Image for post
Image for post

OMG hope you don’t fall asleep, but I love this topic ❤ in less than 3 minutes you will be done! So here we go.

What is JAMStack?

Well, first of all JAMStack = Client-side rules (oh yes, I love my client) is nothing new, you probably have been doing this for years without noticing, the thing is that nowadays there is a cool name for that ; )


Since the early years of our civilization we have relied on servers for almost everything and we still do, but today we have 2 great advantages: personal computers are quite more powerful than 200 years ago and browsers are rockets. …

Image for post
Image for post
Ubuntu 19.10 Login

I love beautiful minimalist designs. Today we are gonna create together Ubuntu 19.10 (Eoan Ermine) Login. Using Semantic HTML and CSS only.

Why Semantic HTML and CSS only? Why aren’t we going to use JavaScript?

Well, you should use JS only when needed and as you will see, we can go quite far without it. You can recreate cool effects with CSS only.

Image for post
Image for post

Rely on CSS as much as you can (also some parts can be GPU accelerated).

1 Define your parts

First of all, check again at the very top of the article the Pen or the image with the Ubuntu Login. We need to think about the diferent parts of our login to break it into pieces. …

Image for post
Image for post
Ubuntu Terminal Adwaita-dark

The minimalist design for Ubuntu combine with the famous Adwaita theme are beautiful and unique. If you are starting with Web technologies or want to refresh some fun CSS concepts you can join me recreating this Ubuntu terminal in CSS.

Semantic HTML

We are going to organize the differents parts (components) of The Ubuntu terminal but instead of using divites (divs tags every where), overdose of attributes, classes…

<div class="col-xs-12 col-sm-6 col-md-8"><button class="toolbar__button toolbar__button--exit">&#10005;</button><div class="terminal-prompt-title"></div></div>

We are going to use our own Semantic HTML. You already know the difference:

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content. …

Image for post
Image for post
May Stack Overflow Be With You by gengns

A nice list of General Web, HTML, CSS and JavaScript questions that we used during interviews in my previous job : )


What is HTTP?

HTTP stands for HyperText Transfer Protocol, a protocol for transmitting resources across the internet.

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML, a set of tecnniques for asynchronous calls that fetch data from a server and update the web without reloading.

What is a SPA?

SPA stands for Single Page Application, a web app / site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.

What is the difference between SPA and AJAX?

SPA is a way to make applications, and they can make use of AJAX or not. For example, if all the content of the SPA is static and don’t require custom data from a server we don’t need AJAX. …

Image for post
Image for post
Game of Frameworks by gengns on DeviantArt

Powerful enhancements that are coming to the standard and ideas that would make our lives even easier when dealing with web technologies.

[DOM] Print any element

Print any element of the document with its own style.


The standard only supports window.print() but it would be really interesting if it was possible to print anything we want to as it’s shown.

[JS] Flatten nested elements

There is already a proposal for arrays in the specification.

// current proposal solution
[1, 2, 3, [4, 5]].flat() // [1, 2, 3, 4, 5]

It would be really useful to extend the same approach for objects.

const obj = { 
name: 'mario',
work: {type: 'cto', salary: 80000, country: 'es'}…

I want to dedicated this article to one of the best and humble programmers I’ve ever known, who guided me through the inscrutable paths of JavaScripts.

I think I’m starting to be a little too tiresome with JavaScript.

Image for post
Image for post
Operating Systems in my house by Randall Munroe

I realised this when I started meeting people and introduce myself following as “what’s the world most popular language? French, English, Spanish or JavaScript”, “have you ever listened about the great history behind JavaScript…” (playing in the background Conan the Barbarian OST) after what many of the them answered me with the typically “I know Java, it’s a programming language” ¬¬

What’s the difference between Java and Javascript?

Image for post
Image for post

Oh my glob, what year is it? and I’m still explaining this but I like quoting one of the top rated answer of stackoverflow (probably new generations won’t catch the…

Dealing with some famous libraries and utilities for small apps.

Image for post
Image for post

Tumblr’s images viewer, fetching data with vanilla JS, Simon Game, mouse dragging selections, adding samples with chart.js, maps with OpenLayers and Google Maps, presentations with impress.js and reveal.js, SPA navigation, introduction to Web SQL, swipe events with hammer.js, React basic example and much more.

Asynchronous fetch with first class functions and closures

Get and post with/without authorization needed.

View on JSFiddle here.

Simon Game

Have you ever played to Simon? That game where you have to memorize an incremental sequence of colors. Today I’m bring to you this famous game in ES6 using CSS transformations and animations. …

Image for post
Image for post
Developing Time by gengns on DeviantArt

A nice list of HTML, CSS and JavaScript How Tos with basic concepts for everyday use. Feel free to comment your own approaches :)

Disabling everything with CSS


.disabled {
filter: grayscale(1);
pointer-events: none;

View on JSFiddle here.

Split an array into chunks without mutability


const array = [1, 2, 3, 4]
const size = 3
const new_array = array.reduce((acc, a, i) => {
i % size ? acc[parseInt(i / size)].push(a) : acc.push([a])
return acc
}, [])

or even shorter

const new_array = array.reduce((acc, a, i) =>
i % size ? acc : […acc, array.slice(i, i + size)], [])

Remember, start using const, if you need to change its value then use let and avoid as much as possible var. …

Image for post
Image for post

No todas las ideologías y costumbres son respetables, sobre todo cuando te pueden hacer daño: la ablación del clítoris, el apaleamiento de homosexuales, tirar cabras de campanarios, escupir a madres solteras, etc.

Image for post
Image for post

Muchos de estos comportamientos te pareceran de lo más absurdo y/u horribles, pero para muchos es justo lo contrario, algo bueno, algo que se debe hacer.

Image for post
Image for post

Sociedades enteras adoctrinadas desde la infancia, y reforzadas a lo largo de sus vidas con ritos y ceremonias que abocan por esa hegemonía.

Image for post
Image for post

La religión los programa en la ignorancia, les inculcan el rezo periódico y a la negación absoluta contra cualquier pensamiento que pueda peligrar su fe. …

Hay una serie de preguntas religiosas de las que quizás, al igual que yo, estés bastante cansado de oírlas. A continuación, un batallón de respuestas para lidiar con ellas.

Creyente: ¿Por qué no crees en Dios?

Agnóstico: Soy ateísta agnóstico, una postura que no está basada en creencias, básicamente, si tu como creyente me vienes diciendo que Dios existe, yo te pediré que me lo demuestres, si no me lo demuestras no podré creerte. Si lo piensas, en realidad todos somos algo agnósticos. (Ricky Gervais)

Image for post
Image for post

C: Si tan claro tienes que Dios no existe, demuéstrame que no.

A: Esto es una Falacia, el hecho de que no se pueda demostrar su no existencia no implica que exista. Ejemplo: demuéstrame que no existe un unicornio rosa. …

Génesis García Morilla

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store