DEV Community: Lucas G. Terracino

Building an open source skill showcase with Deno

Lucas G. Terracino — Thu, 21 Nov 2024 18:16:52 +0000

Let's start by saying something which is not new: the Javascript ecosystem has become quite complicated. Whether your afternoon was completely consumed by tweaking webpack, creating a gulp pipeline, choosing your next CSS framework, adding typescript support to your old side-project or just navigating the ever expanding frontend framework libraries being born each day, you already know what I mean.

Explaining to a junior friend how Javascript tooling and runtime work

Enter Deno 2.0 🦕

I've always been curious about Deno. The Previous version was not truly compatible with npm. The promise of native support for TS is good, but it wasn't something that really made me jump in the Deno 1.X train.
Then, this appeared in my Youtube feed:

This short and sweet high-production trailer gave me the push I needed to try their latest features.

What do we build 🛠️?

A tool I'd use, short, and open source

TL;DR: Picto!

NOMADE55 / picto

Showcase your skills with flare 🔥

Picto

Easily showcase your skills with flare 🔥

Picto is a tool that generates dynamic images to showcase the programming languages, technologies, and tools you’ve learned.

🤔 How to create your own Picto?

That's easy! Picto allows you to customize the appearance and layout of the generated image using query parameters.

https://mypicto.xyz/icons
    ?i=php,ruby,javascript,react,laravel
    &cols=4

Parameter	Type	Default	Description
i	string	-	Icon identifier
cols	string (numeric)	8	Number of columns to display
size	string (numeric)	100	Icon size
bg	string	-	Background setting (`none` or empty string)
rounded	string	-	Border radius setting (`none`, `rounded` or numeric: `0`, `6`, `12`, etc.)

Examples

No rounded corners and 2 columns

https://mypicto.xyz/icons?i=html,css,javascript,python&round=none&cols=2

No background

https://mypicto.xyz/icons?i=html,css,javascript,python,vue&bg=none&cols=4

📍 Roadmap

WIP: Add theming, light, dark & auto
Add more icons, of course (Open an Issue to add your missing icon).
Add kits/groups (MERN, MEAN, LAMP, etc)
Improve…

View on GitHub

Ok now, for real

My Github profile icons needed a refresh, especially since they looked quite dull in dark mode.

Then, I reread this awesome article about using SVGs in favicons, that 'intelligently' switches appearances based on the user's preferred color scheme.
The cool things plain CSS can do, huh?

This gave me an idea 💡

Create a bunch of cool SVGs for profile use.
Use CSS variables to configure important values. Think corners, backgrounds, fill, theme, etc.
Create a small backend (with Deno!) that will serve these icons if the proper parameters are provided.
Alter or add <style> tags to update SVGs on the fly based on the parameters provided.
Enjoy ✨.

How Deno was better than I expected

🎨🦕 code formatting out of the box. No prettier config here 🙌🏻.
✅🦕 has linting also out of the box. No eslint here either 😎
👁🦕 can serve the file locally and watch it's changes. Nodemonwho?
📦🦕 has compatibility with all the packages in npm I'm already familiar with, plus a few from their own standard library.

Using Deno

If you want Deno to work in your VSCode you need to add their extension and add enable it in settings file

{
  "deno.enable": true,
}

Formatting with Deno [docs]

If you want Deno to format the code from the CLI it's quite easy actually.

$ deno fmt

This will format the whole project, but you can scope it to only format one file.
It can also format your files on save like prettier would. Just update your settings file like so:

{
  "deno.enable": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "denoland.vscode-deno",
}

Linting [docs]

Deno provides lint in your IDE without needing to configure any other extension. That said, they provide a very convenient way to lint your project.

$ deno serve --watch main.ts

Serving with Deno [docs]

Deno has quite a beefy CLI, and serving your app to test locally is a breeze

$ deno serve --watch main.ts

That's it?

This is not a huge project, but there is a few more cool things to show and tell, which I'll be doing in future articles:

Building dynamic SVGs.
Using style variables to manipulate everything.
Theming and using user's color scheme to replace colors.
Docs and building a reliable source of information for users.

I haven't finished the tool yet. You can check the roadmap and even suggest (or contribute cool stuff) in Picto's repository.
This is an opportunity for me to learn building in public 🌱, so I count on the DEV community to make this experience even better. So if you have any suggestions or comments, let me know 🚀!

Aprendiendo de los Grandes: El feed de Instagram

Lucas G. Terracino — Wed, 28 Jul 2021 15:24:06 +0000

En el proceso de aprender a desarrollar sitios web y utilizar las herramientas más básicas como lo son CSS y HTML, lo más desafiante es elegir ejemplos fáciles que reproducir.
Una web que es sorprendentemente familiar a todos con un moderado nivel de dificultad es Instagram. Vamos a ver como resolvemos muchos de los desafíos detrás de crear su feed y aprender en el camino una o dos cosas.

Lo primero que vamos a hacer es armar el tan conocido y emblemático posteo de Instagram en las diferentes partes que después vamos a maquetas con HTML.

🏗 Maquetando

Es bastante claro mirando el posteo, que tenemos

un área superior que encabeza el componente donde está el usuario y su foto de perfil
una sección principal donde está la imagen
un area inferior donde vamos a poner las acciones, los datos y una sección donde el usuario puede comentar.

Ya mismo empezar a maquetar haciendo uso de la etiqueta semántica article y anidando las futuras secciones usando header, section y footer, las cuales comienzan a darle estructura a nuestro posteo.

<article>
    <header></header>
    <section></section>
    <footer></footer>
</article>

¿Por qué no usar muchos div?

Es inevitable el uso de div, no te castigues si ves que realmente no podes evitarlo, pero es importante saber que utilizar la menor cantidad posible tiene sus beneficios:

El código es mucho más fácil de leer, interpretar y mantener.
Agregar estilo (CSS) a nuestros componentes se vuelve más sencillo y con menos clases.
Estás utilizando las herramientas mas avanzadas y correctas para el maquetado.
Mejores puntajes de SEO ✨
Habla bien de vos como developer

Y ¿por qué estas en particular?

article es una etiqueta excelente para contenido auto-contenido (como lo es un posteo, un producto, el articulo de un blog, etc).
section define una sección dentro de un documento
header representa contenido introductorio o links de navegación
footer es el pie de página o el final del contenido y suele tener información, autor, o contenido relacionado.

🏗 Agregando más elementos

Header

Necesitamos agregar la imagen para la foto de perfil y un título para nuestro usuario.
También vamos a envolver a la imagen en un div en caso de que necesitemos manipularla dentro de la estructura sin alterar sus proporciones, y el titular va a contar con un a para llevarnos al perfil que corresponde.

<header>
  <div>
    <img width="32" height="32" src="https://avatars.dicebear.com/api/avataaars/alebonzo.svg">
  </div>
  <h2><a href="https://instagram.com/alebonzo">alebonzo</a></h2>
</header>

Maquetando con Placeholders

Para la imagen de perfil use Dicebear Avatars, una librería de imágenes con una amplia cantidad de avatares que podemos usar solo poniendo una URL. Este tipo de librerías es ideal cuando estamos maquetando y aún no tenemos las imágenes finales pero queremos poner algo que denote la intención que va a tener esa imagen. En este caso es el avatar o foto de perfil de un usuario.

Para usarla ponemos la URL cambiando los valores de category y seed. La librería nos va a dar es una imagen diferente para cada seed dentro de cada categoría.

https://avatars.dicebear.com/api/category/seed.svg

Las categorías están en el link, y el seed puede ser cualquier cosa **URL friendly* (pst, para los espacios podes-usar-guiones).*

Section

Siendo un poco más fácil, acá solo queremos poner una imagen, y de nuevo vamos a poner un div que la contenga para poder manipularla sin alterar sus proporciones.

<section>
  <div class="img-wrapper">
    <img src="https://i.imgur.com/bxPoqdw.jpg" alt="">
  </div>
</section>

Footer

Vamos a comenzar por poner los iconos en su lugar con svg (los que nos ahorra tener que hacer iconos para cada tamaño, ya que los SVG son vectores y siempre se van a ver bien) y envolverlos en un div que los separe del resto de los elementos del footer al que vamos a llamar acciones.

Vamos a poner en .data quien le dió like, el creador del contenido con su descripción, y en una etiqueta time hace cuanto se posteó.

<footer>
  <div class="actions">
    <svg aria-label="Like" height="24" viewBox="0 0 48 48" width="24">...</svg>
    <svg aria-label="Comment" height="24" viewBox="0 0 48 48" width="24">...</svg>
    <svg aria-label="Share Post" height="24" viewBox="0 0 48 48" width="24">...</svg>
    <svg aria-label="Save" height="24" viewBox="0 0 48 48" width="24">...</svg>
    </div>
  <div class="data">
    <div class="likes">Liked by <strong>you</strong> and <strong>others</strong></div>
    <div class="description"><strong>ladyahorro</strong></div>
    <time>2 hours ago</time>
    </div>
  <div class="comment">
    <div class="emote">
            <svg height="24" viewBox="0 0 48 48" width="24">...</svg>
    </div>
    <input type="text" placeholder="Add a comment...">
    <button>Post</button>
  </div>
</footer>

🎨 Agregando estilo

¡Ahora es cuando se pone divertido! Con todo el HTML ya escrito, solo queda agregar estilo a los componentes para que se vean exactamente como queremos.

Comenzamos por definir la paleta inicial que vamos a utilizar. En este caso en particular, los obtuve directamente de la página de Instagram.

#ffffff: Blanco, el fondo del articulo.
#dbdbdb: Gris, para los bordes.
#262626: Negro, para el color de los textos.
#0095f6: Azul, para el botón.

Article

Comenzamos con el aspecto en general de nuestro posteo, un fondo blanco, un borde gris con las esquinas ligeramente redondeadas. Y en caso de que haya algún elemento lo suficientemente rebelde como para extenderse sobre el padre, vamos a ocultarlo.
También en caso de que haya más de un posteo al lado del otro, queremos que estén separados entre sí, y para eso usamos márgenes.

💡 PRO CSS TIP: El selector a + b selecciona un elemento b que esté inmediatamente después de un elemento a. Esto puede ser usado con cualquier elemento, ya sea una clase, una etiqueta o un id.

article {
  background-color: #ffffff;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  overflow: hidden;
}

/* Hacemos uso del selector a + b para seleccionar a cualquier posteo que este seguido de otro, y lo separamos verticalmente desde el lado superior. */
article + article {
    margin-top: 1rem;
}

Header

Al header de nuestro posteo le vamos a poner una borde inferior gris del mismo color que nuestro articulo, un poco de espacio entre el contenido y la caja, y vamos a hacer que los hijos estén alineados al medio.

Además de quitarle todo el estilo al link, al titular lo vamos a separar de la imagen desde el lado izquierdo, y vamos redondear los bordes de la imagen de perfil*.*

article header {
  z-index: 20;
  background: #ffffff;
  display: flex;
  width: 100%;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #dbdbdb;
}

article header h2 {
  margin: 0;
  margin-left: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
  color: #262626;
}

article header h2 a {
  text-decoration: none;
  color: #262626;
}

article header img {
  display: block;
  height: 32px;
  width: 32px;
  padding: 2px;
  border-radius: 100%;
  border: 1px solid #262626;
}

Section

Para la sección de la foto, vamos a hacer un div donde poner a nuestra imagen.
Vamos a forzar la relación de aspecto de este elemento a 1:1 usando el truco del padding.
Por último, la imagen va a usar object-fit: cover para que cubra toda la superficie del padre.


article section {
  width: 100%;
  position: relative;
  height: auto;
}

article section .img-wrapper {
  padding-top: 100%;
  position: relative;
}

article section img {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

Footer

El peso tipográfico de la etiqueta strong por defecto es bolder (equivale a 700), así que lo suavizamos un poco al reducirlo a 600*.*

Lo que vamos a hacer es poner las acciones separadas entre sí con márgenes y de los bordes laterales de la caja con padding.

La etiqueta time va a requerir que le bajemos un poco la intensidad, por lo que en vez de jugar con los colores, sencillamente le bajamos la opacidad,

Vamos a remover los bordes del input y button. Para facilitar el armado de la estructura, vamos a usar display: grid en su padre, pero esta estructura también se puede lograr fácilmente con flex, sólo que con más líneas de código.

article footer strong {
  font-weight: 600;
}

article footer svg {
  display: block;
}

article footer > * + * {
  margin-top: 1rem;
}

article footer > .actions,
article footer > .data > *,
article footer > .comment {
  padding-left: 1rem;
  padding-right: 1rem;
}
article footer > .data > * + * {
  margin-top: .5rem;
}

article footer .actions {
  padding-top: 1rem;
  display: flex;
}

article footer .actions > * + * {
  margin-left: .5rem;
}

article footer .actions > *:last-child {
  margin-left: auto;
  margin-right: 0;
}

article footer time {
  display: block;
  opacity: .6;
  font-size: .7rem;
  text-transform: uppercase;
}

article footer .comment {
  display: grid;
  grid-template-columns: auto 1fr 50px;
  align-items: center;
  gap: .15rem;
  margin-top: 1rem;
  padding-top: .7rem;
  padding-bottom: .7rem;
  border-top: 1px solid #dbdbdb;
}

article footer .comment input,
article footer .comment button {
  line-height: 1;
  background-color: #fff;
  padding: .5rem 1rem;
  border: 0;
}

article footer .comment button {
  color: #0095f6;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

article footer .comment input::placeholder {
  color: #262626ee;
}

💡 PRO CSS TIP: El selector * + *, también conocido como Owl Selector, o Selector Buho 🦉, es excelente para seleccionar y darle espacio a varios elementos que no conocemos que van a ser; sólo que son hermanos. Combinarlo con el selector de hijos directos > va a ser ideal para evitar problemas con descendencias mas profundas.

✨ Uniendo todo

Una vez que juntamos todo tenemos y agregamos algunos post más, tenemos una interfaz más que conocida. Que como vimos, es un desafío fácil de tacklear si analizamos previamente que es lo que vamos a necesitar, maquetamos el HTML con conciencia y después le damos estilo.

👋 Palabras Finales

Recrear estos sitios web nos sirve de práctica a la vez que ayuda a incorporar técnicas y reglas de CSS, que eventualmente nos van a salir de forma natural.

En otro posteo vamos a cubrir los pasos que nos faltan para terminar con la home de Instagram, mientras tanto cuéntenme en los comentarios sus opiniones y que les gustaría ver a futuro.

¡Hasta la próxima!

Relaciones de Aspecto Perfectas en CSS

Lucas G. Terracino — Wed, 21 Jul 2021 17:28:13 +0000

O, cómo aprendí a dejar de preocuparme y amar el padding

Ya sea que estemos desarrollando una web o la interfaz de una aplicación, las relaciones de aspecto son algo por lo que no tenemos que preocuparnos mucho. Hasta que el cliente nos pasa un video que quiere que sea vea sin bandas negras, o nos explican que la imagen tiene que estar sí o sí en una relación de 1:1.

¿Qué es la relación de aspecto?

La relación de aspecto es la relación que hay, proporcionalmente, entre el alto y el ancho de un elemento. Esta relación se suele expresar como la fracción de ancho sobre alto. Por ejemplo, para un elemento que tiene 1:1 su ancho es igual a su altura. Sin embargo un elemento que tiene 4:3 como relación de aspecto*, el ancho es 1.33 veces mas grande (porque 4 sobre 3, es 1.33).*

Algunas de las más conocidas y populares siendo:

4:3 Televisores de tubo viejos 📺, y la relación nativa de los VHS 📼
16:9 Monitores, celulares en horizontal, laptops, y televisores smart en promedio (cualquiera que no sea widescreen).
9:16 Los celulares en vertical 📱 y con ellos, todas los videos filmados verticalmente como el contenido de TikTok
1:1 Las imágenes del feed de Instagram y las fotos Polaroid.

🎨 Relaciones de Aspecto en CSS

Excelente, ahora que sabemos que es una relación de aspecto 1:1, podemos forzar un alto que corresponda al ancho y listo ¿no?
Si un elemento tiene 1100px de ancho (width: 1100px) le agregamos 1100px de alto (height: 1100px), tiene la relación de aspecto que queríamos, 1:1 pero si el tamaño de la pantalla cambia, también deberíamos cambiar el alto para preservar la relación de aspecto. Esta solución es válida pero **no es responsiva.

Necesitamos alguna regla de CSS que automáticamente mute en base al ancho, pero que tenga influencia en el alto.

🤯 El padding porcentual de un elemento es relativo al ancho de su padre

Una propiedad bastante interesante y poco intuitiva es que el tamaño del padding cuando las unidades son porcentuales corresponde al ancho del elemento 🤯. Esto que a simple lectura parece algo muy chico ¡nos permite calcular un alto, en base a un ancho 🤯!

Si pueden ver a donde vamos con esto, si a un elemento de 100px de ancho, le agregamos un hijo con alto automático (height: auto) y le damos 100% de padding-top, el alto de este elemento va a ser 100px (1:1). ¡Tadá!

👨‍💻 Relaciones de aspecto más complejas

En caso de tener por ejemplo el pantallazo de una película, filmada en 16:9, mi elemento tiene que tener la misma relación de aspecto si quiero que se vea sin bandas negras.

Para calcularlo dividimos el alto, por el ancho: 9/16 = 0.5625 (padding-top: 56.25%).

Tambien podemos usar la función calc() para automatizar el proceso de cálculo del padding.

.aspect-ratio-16-9 {
    height: auto;
    padding-top: 56.25%;
}

.aspect-ratio-1-1 {
    height: auto;
    padding-top: 100%;
}
/* O haciendo uso de calc() */
.aspect-ratio-4-3 {
    height: auto;
    padding-top: calc(100% * (3 / 4));
}

.aspect-ratio-9-16 {
    height: auto;
    padding-top: calc(100% * (16 / 9));
}

🤔 Pero el padding empujaría todo el contenido hacia abajo ¿no?

Exacto, vamos a tener que volver a acomodar a los hijos de este elemento usando la ayuda de 🌈 posicionamiento absoluto 🦄.

Supongamos que dentro de nuestro elemento con la relación de aspecto 16:9 tenemos que agregar una imagen, lo único que tenemos que hacer es darle un posicionamiento relativo al padre, y acomodar la imagen para que ocupe todo el tamaño provisto por él.

<div class="aspect-ratio-parent">
    <div class="aspect-ratio-16-9">
        <img src="http://placehold.it/1920x1080?text=16:9"/>    
    </div>
</div>

.aspect-ratio-16-9 {
    height: auto;
    padding-top: 56.25%;
    position: relative;
}

.aspect-ratio-16-9 img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: cover; 
}

👀 ¿Hay alguna manera de evitarme hacer yo el cálculo?

Sí, calc(), pero si necesitas un amigo que te ayude con los ratios, RatioBuddy recibe el tamaño del elemento del que quieras calcular su relación de aspecto, y realiza los cálculos por nosotros. Al final, nos deja el SCSS listo para copiar y pegar ✨.
🙏 En caso de que no sepas como usar SCSS (Sass), pega el resultado de RatioBuddy en Sassmeister.

🆙 Level Up!

Usando pseudo elementos y variables de CSS, podemos agregarle a nuestros elementos una relación de aspecto, usando solo una clase.

Explicación

Al crear un ::before dinámicamente, nos ahorramos el tener que crear otro el elemento desde el HTML.
En vez de crear una clase para cada uno de los casos de relación de aspecto que tengamos que cubrir, hacemos uso de las variables de CSS ponemos --aspect-ratio en el padding-top.
Calculamos el padding-top con calc() dividiendo el total, lo que venga en la variable --aspect-ratio.
Como estamos dentro de un calc(), CSS va a dividir al 100% calculando la relación de aspecto que esté en la variable.
Desde nuestro HTML, vamos a darle valor a esa variable para elemento usando style="--aspect-ratio: n/n".

💡 Pst, también podemos pasarle relación de aspecto, ya dividida, como por ejemplo 1.778 (16/9).

⚡ Usando relaciones de aspecto en Frameworks

Si estás usando un framework es probable que ya exista una clase o componente para aprovechar estas relaciones de aspecto responsivas:

Boostrap: https://getbootstrap.com/docs/4.1/utilities/embed/
Bulma: https://bulma.io/documentation/elements/image/#responsive-images-with-ratios
Tailwind: https://github.com/tailwindlabs/tailwindcss-aspect-ratio

👋 Conclusiones y el futuro

Un verdadero truco de CSS, que al aprenderlo vamos a ser los primeros en proponer una solución a problemas que parecen tener solución solo con Javascript.
Sin embargo, existe un futuro donde no tenemos que depender de trucos y engaños. La regla de CSS aspect-ratio ya tiene un sólido soporte en la mayoría de los exploradores conocidos y con el tiempo ese número solo va a crecer. Mientras tanto, el Truco del Padding ✨, es responsive y válido para todos los exploradores que existen.

Easy theming with SASS mixins.

Lucas G. Terracino — Wed, 28 Oct 2020 17:59:13 +0000

While building a dark theme for my React App, I've found myself escaping the nesting a lot in order to make styles for the dark theme .
Then, this mixin was born.

Show me the code!

@mixin atDarkTheme {
    $selector: #{&};
    @at-root body.dark-theme #{$selector} {
        @content
    }
}

It's worth mentioning, this will work in any kind of project that uses Sass, not just React.
And even though styled components can tackle theming easily too, I'm a fan of Scss and having my components styled with their own Scss file.

Breakdown

When dark mode is enabled, <body> receives the class dark-theme. So in order to prepend the body.dark-theme selector the mixin works like this:

$selector: parses our current selector making use of & (parent selector) and #{}, and then stores it for later use.
@at-root: moves the next selector to the root of the document, escaping the current nesting.
- body.dark-theme: the class that will be responsible for our dark-mode styles.
  - #{selector}: adding our previous selector back again.
    - @content: everything we add between the brackets {} in our @include goes here.

Usage

.just-a-box {
    background: white; // ☀
    color: black; // ☀
    width: 100px;
    height: 100px;
    // Dark Theme styles
    @include atDarkTheme {
        background: black; // 🌙
        color: white; // 🌙
    }
}

After compiling this code into CSS, it will look like this:

.just-a-box {
    background: white;
    color: black;
    width: 100px;
    height: 100px;
}
body.dark-theme .just-a-box {
    background: black;
    color: white;
}

🧬Evolving the mixin: Multiple Themes

Why conform with dark mode, let's create themes with one mixin to rule'em all!

@mixin atTheme($theme: "default") {
    $selector: #{&};
    @at-root body.#{$theme}-theme #{$selector} {
        @content
    }
}

Usage

Now we can pass an argument to the mixin to dinamically add styles to the themes we create.

.amazing-navbar {
    background: white;
    color: black;
    width: 100%;
    height: 52px;
    // Theme styles
    @include atTheme("red") {
        background: red; // 🟥
    }
    @include atTheme("green") {
        background: green; // 🟩
    }
    @include atTheme("blue") {
        background: blue; // 🟦
    }
    @include atTheme("halloween") {
        background: purple; // 👻
    }
}

After compiling this code into CSS, it will look like this:

.amazing-navbar {
    background: white;
    color: black;
    width: 100%;
    height: 52px;
}

body.red-theme .amazing-navbar {
    background: red;
}

body.blue-theme .amazing-navbar {
    background: blue;
}

body.green-theme .amazing-navbar {
    background: green;
}

body.halloween-theme .amazing-navbar {
    background: purple;
}

💡A few more ideas

To keep the post simple I'll just give you a few hints to where you can improve upon on your project:

CSS Variables
Predefined $themes variable to check if the argument passed to the atTheme mixin is valid.
"Automatic" dark-theming with the invert filter.

Conclusion

Using @at-root directive in mixins will save us a lot of time, creating theme-specific selectors for our elements we are working on in a breeze, relying only in CSS' powerful specificity.

If this post was any help or do you think this can be improved upon, let me know in the comments!

If you are still hungry for more sassy knowledge, I've written another post about it and the Bulma framework.

Highlighting awesome SASS snippets from Bulma

Lucas G. Terracino ・ Oct 15 '20

#beginners #webdev #sass #css

Until next time 👋!

Highlighting awesome SASS snippets from Bulma

Lucas G. Terracino — Thu, 15 Oct 2020 13:58:20 +0000

Being the awesome CSS framework that it is, Bulma has a very clean and structured SASS codebase. Let's dive in it and get some Sassy gems 💎 for ourselves.

Bulma is a framework I'd recommend to anyone, whether they are new in the scene or seasoned experts. Specially if you are learning SASS.
The things I'm gonna be highlighting today are not on their documentation. But give it a look if you want to harness the full potential of this humble but solid CSS framework.

⚠ Head's up!

Bulma is written in SASS completely, and I mean. SASS. So as a friendly reminder.

Mixins look different! @mixin newMixin() looks like this =newMixin() in SASS.
Includes look different! @include newMixin() looks like this +newMixin() in SASS.
SASS doesn't use semicolons ;.
SASS doesn't use curly braces {}.
SASS uses indentation instead for nesting. Be precise with it.

I'm adding bits of information and annotations in the code, look for 📚 comments.

💎 Easy placeholders for inputs

This mixin is not really needed if you have a prefixer, yet is an awesome way to swiftly style the placeholder of any input or textearea.

=placeholder
  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
  @each $placeholder in $placeholders
    &:#{$placeholder}-placeholder
      @content
      // 📚 Content passed to @include ends up where the @content directive is.

💎 Easier Media Queries

Useful when building specific media queries for any of your components.

=from($device)
  @media screen and (min-width: $device)
    @content

=until($device)
  @media screen and (max-width: $device - 1px)
    @content

Bulma has its own set of breakpoints defined with variables, this allows very specific mixins

=mobile
  @media screen and (max-width: $tablet - 1px)
    @content

=tablet
  @media screen and (min-width: $tablet), print
    @content

=tablet-only
  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
    @content
    // 📚 Content passed to @include ends up where the @content directive is.

💎 Overlaying absolute element

Do you need a gradient over an image for a sexier look?
A whole div to protect an image from being easily grabbed?
Perhaps an ::after or ::before that needs to cover its parent?

=overlay($offset: 0)
  bottom: $offset
  left: $offset
  position: absolute
  right: $offset
  top: $offset

Maybe you can mix it up, adding more parameters in case you want different offsets.

💎 Color Helper Mixins to find Dark and Light variants

colorLuminance determines the level of luminance a color has from 0 to 1.
This function in particular is one of my favorites from the library.

@function colorLuminance($color)
  @if type-of($color) != 'color'
  // 📚 Checking if its an actual color. If not, returns .55
    @return 0.55
  $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
  // 📚 Grabs each RGB value for the color
  @each $name, $value in $color-rgb
    $adjusted: 0
    $value: $value / 255
    @if $value < 0.03928
      $value: $value / 12.92
    @else
      $value: ($value + .055) / 1.055
      $value: powerNumber($value, 2)
     // 📚 Calculates amount of luminance for each color (RGB) and then stores it back in the variable.
    $color-rgb: map-merge($color-rgb, ($name: $value))
  @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
  // 📚 Sums up the RGB luminances together to get the $color's luminance.

findColorInvert returns white or black(ish), with the help of previously defined function colorLuminance. This is very useful when we are creating components programmatically with an @each.

@function findColorInvert($color)
  @if (colorLuminance($color) > 0.55)
    @return rgba(#000, 0.7)
  @else
    @return #fff

findLightColor returns a light version of a color, through the use of the lightness function. The color given has to be below a certain level of lightness, or the function will return the same color.

@function findLightColor($color)
// 📚 Checks the type of the variable sent to the function
  @if type-of($color) == 'color'
    $l: 96%
    // 📚 After defining a base lightness level ($l), checks if $color isn't above it already. Then proceeds to adjust the color.
    @if lightness($color) > 96%
      $l: lightness($color)
    @return change-color($color, $lightness: $l)
    // 📚 If its not a color, returns a variable Bulma has already declared before.
  @return $background

findDarkColor returns a darker version of the color given. This function makes use of the function max, to always go with the base.

@function findDarkColor($color)
// 📚 Checks the type of the variable sent to the function
  @if type-of($color) == 'color'
    $base-l: 29%
    // 📚 After setting a base target of darkness ($base-l), gets the luminance of the color.
    $luminance: colorLuminance($color)
    $luminance-delta: (0.53 - $luminance)
    $target-l: round($base-l + ($luminance-delta * 53))
    // 📚 After doing some calculations, chooses the highest value between the target lightness ($target-l) and the base one defined previously.
    @return change-color($color, $lightness: max($base-l, $target-l))
    // 📚 If its not a color, returns a variable Bulma has already declared before.
  @return $text-strong

👋 Parting words

I've found myself learning a lot of SASS going through Bulma's repository and I with hope this article you did too!

These snippets 💎 I've highlighted here are but a fraction of their codebase and I encourage you to use Bulma the next time you need a CSS framework. It has a very well written documentation, its highly customizable and they are open source ♥.

If you liked this post or found it useful in anyway please let me know with a comment or reaction. Also if you want me to breakdown another popular CSS framework, let me know which one in the comments.

Tweaking commits with Git's Magic Time Machine✨, aka git rebase

Lucas G. Terracino — Thu, 10 Sep 2020 00:04:58 +0000

Magic is everywhere! Specially in your terminal, and our git has some of its own. In this post I'm going to show you a little of this magic that lives inside the git rebase command.
🐻 Bear in mind, this post assumes you are already familiar with git.

git rebase

📖 Reapply commits on top of another base tip.

This sounds and looks just like git merge... right?

git checkout feature
git rebase master

Not quite. git rebase, moves the branch and incorporates all of the new commits, but re-writing the project history by creating brand new commits for each commit in the original branch.

These brand new commits thingy thing, brings up the golden rule of rebase: do not rebase on public branches.

Besides rewriting commits, we can add two other key features of git rebase:

Doesn't make new commits (because it rewrites them)
Can be used in the same branch we are working on

This three key features gives us the opportunity to tweak our commits, which comes really in handy when

we messed up with the commit message
made a very tiny file change and its commit would be better off inside a larger one
when we need to change the order of the commits
remove a whole commit

Getting our hands dirty

Let's say I've been working on this new feature branch, and 4 commits in, I want to make some changes to them using rebase.

git rebase -i HEAD~4

git rebase: calls, of course, the git-rebase command
-i: Shorthand for interactive, this makes a list of the commits that we are about to rebase, letting us edit that list and how we are going to rebase them. This file is where we are going to do today's magic.
HEAD~4: The tilde is used to point to a position relative to a specific commit, in this case, the HEAD; giving us its 4th parent.

Now, a file has been opened on your designed IDE called git-rebase-todo and we are ready to do some magic with out git project.

# git-rebase-todo
pick 4acdb1d First Commit of Feature
fixup be76710 Second Commit of Feature
drop 78acdd0 Third Commit of Feature
reword 9480b3d Fourth Commit of Feature

When we use --interactive/-i this file is going to tell git what to do with each of the commits listed. The list can be re-ordered and git will execute your orders from top to bottom!

By default, all commits come with the option pick, but there are many options we can use to alter our commits.
Let's see what that means and what we can do with the other commands rebase has for us.

pick

Pick signals git to use the commit, this means, it will keep this commit and use it in its rebasing.
➡ When should I use pick? Every time we want to keep a commit!

pick be76710 Super awesome commit message
# You can also use the short version: p
p be76710 Super awesome commit message

reword

Reword signals git to use the commit just like pick but lets us change the commit message when it's about to be commited again. This option will prompt you with a file to edit with the previous commit message for you to edit.
➡ When should I use reword? Every time we want to keep a commit, but we need to make changes to it.

reword be76710 Super awesome commit message
# You can also use the short version: r
r be76710 Super awesome commit message

edit

Edit signals git to use the commit, but stops just before commiting to let us make changes or adjustments. This amendments to the code are not limited at all. Everything will be included in the commit long as you stage them: this includes typos, a few more lines of code, or a whole new file.
➡ When should I use edit? Every time we want to keep a commit, but we need to slip in a few more changes to it.

edit be76710 Super awesome commit message
# You can also use the short version: e
e be76710 Super awesome commit message

squash

Squash signals git to merge the commit with the previous one, this means, both commits will become one with a new hash. Git will let you reword the commit message of this newly created commit and will prompt you with a file to edit it.
➡ When should I use squash? Every time we want you want to meld one or more commits with a previous one.

squash be76710 Super awesome commit message
# You can also use the short version: s
s sbe76710 Super awesome commit message

fixup

Fixup signals git to merge the commit with the previous one, just like squash but discarding the commit's message.
➡ When should I use fixup? Every time we wan to meld one or more commits with a previous one disregarding its message is.

pick 4acdb1d Super Awesome Commit
fixup be76710 This commit is going to be merged with the one on top of it
pick 9480b3d Another Super Awesome Commit
# You can also use the short version: f
f be76710 Super awesome commit message

drop

Drop signals git to remove the whole commit.
➡ When should I use fixup? Every time you want to discard all the changes made by a commit.

drop be76710 Super awesome commit message
# You can also use the short version: d
d be76710 Super awesome commit message

So, again, how do I use this magic tricks?

You've just commited a very big change to your new website index.html. Your eyes wonder upon the job done, and suddenly, a nasty typo appears out of nowhere.

✨ Just make another commit with the fixed typo. Invoke the magic words on your terminal git -i rebase HEAD~2 and then, use fixup to merge the commit done for the typo.

After making three commits, you've noticed the first one has a commit message that others in your team would find confusing.

✨ Just call upon the greatness of rebase with git rebase -i HEAD~3 and use reword on the commit you'd like to change its message.

You have noticed the whole commit you've done, five commits ago is wrong, but... there are many commits you don't want to lose using reset!

✨ Rebase comes to hide all of those silly mistakes! Let's recite together on our terminal git rebase -i HEAD~5 and using drop that commit is now gone forever!

With great power comes great responsibility

Before using rebase, you have to make sure if at any point, the commits you are going to merge have already been merged to public branch, if that's the case... don't us rebase. Remember what we've learned about rebase making new commits? You'll have issues because we've just rewritten the commits history!
Another thing to keep in mind is, when we rebase, all the commits are applied one after the other, this means, dropping or changing the order of any commit might pop up conflicts you'll have to fix and then commit before rebase can continue. After you've successfully dealt with them, gracefully resume your rebase with git rebase --continue. Or just go with git rebase --abort and cry yourself to sleep remembering those conflicts... oh lord... those conflicts.

📚 Let's read more!

By the way, I'm aware this post doesn't cover in depth the differences between merge and rebase, but I have good news 🔗Atlassian has a great post about it.
If you need a better way to visualize what rebase does to your branch, @lydiahallie has 🔗 excellent animations on how git works on this gorgeous post.
The options I've presented here are not the only ones rebase has. If this topic got you hooked, and you crave to expand your knowledge on them and rewriting history, 🔗 git documentation on has a lot of good insight.
If you feel like getting a little more technical, @jessekphillips goes slightly 🔗 more in depth with rebase in a short but sweet post.

That's it from me for now, I hope you find it useful and on your next project less of these pesky typos plague your commit history, thanks to the magic of rebase✨

Productivity tips I'd give my past self through a time-cellphone with limited credit

Lucas G. Terracino — Fri, 24 Jul 2020 07:11:26 +0000

I was reading through Vito's post about VSCode shortcuts that he'd tell himself if he could go back in time with very limited time (btw you should totally check his post for awesome VSCode tips), and made me think, what if I had a quick call with my past self, and very limited credit.

— 📱🎶

— ¿Hola?

— Lucas, it's me! ~~Mario~~ You! From the future, I don't have time for your, erm, my..., no... our many questions! Your productivity is very questionable, so I'm gonna give you a few things you need to do with your work environment ASAP. Also we are going to talk in English so most of the world can read it.

— Erm... okay sure... this is so sudden and I'm very busy right now, so please, make it quick!

— You are playing videogames, so you better pause it and listen to me carefully.

— Man... I know myself way too much...

— Duh, of course! Ok so, stop tinkering around with the themes, they take you too much of your time, just go with Dracula🧛‍♀️ every time you can, you will develop a love relationship with this theme.

— Dracula? Love relationship? Why would I love a Halloween themed color scheme? This seems rather mu-

— Just. Use. It.

— Ok! Okay! I, will us-

— Also, we both know you wanna learn to use git, but it's too daunting from the command line. Luckily for you there is this amazing extension called Git Lens. It will ease so much of your git journey, letting you have a look at your branches, commits, tags, among a few things right in VSCode. Even cherry picking 🍒 will be a breeze.

— That actually sounds very useful, you seem to know your st-

— Let's talk about the terminal, you need to learn to use it fast, it will save you a lot of time, and a lot of software is only available for terminals, so get your hands dirty with it fast. Is it WSL 2 out yet?🐧

— N-no I've heard news about something called WSL, but not that two version thing.

— Shoot! WSL 2 is amazing, you can have a Linux distribution running inside your Windows, virtually and very well integrated. Nevermind, add Powershell⚡ or cmder to your VSCode and start using it. You will thank the practice you've earned with those once WSL 2 is out.

— What about the WSL 1?

— Don't bother, go straight to WSL 2. It's way, way better. Also, as soon as it's available download Windows Terminal, it will let you run multiple terminals in tabs.

— I've been using cd and touch in the terminal to change directories and create files easi-

— That's good and all, but we need more. I'll give you this tiny bookmark for your future reference: ExplainShell🐚. This will help you learn more of those pesky shell commands. Think it as a Google for commands.

— More? How many more do I n-

— Speaking about more, you'll spend ages trying to theme your terminal (of course) just right. Leave that to Starship.rs🚀, it's exactly what you want and more, having a lot of modules you can turn on and off, and it's written in Rust, so it's fast keeping the performance of our console pretty much the same.

— Erm o-okay that sounds good but I want to customize the prompt with erm... you know...

— Yes, you can add emojis to the prompt.

— Sold! But... what about the theme?
— DRACULA of course!

— Wow, okay! I mean, chill man, you clearly have strong feelings for our blood thirsty friend, I didn't expect I'd become such a fan of vampires... is emo cool again in the future?

— No, but dark interfaces are e v e r y w h e r e. That said, you'll need to share your code effectively and quickly. Average screen grabbers aren't really good for code, go with CodeSnap📷. It's very customizable and you can take nice pictures of your code just by selecting it. You'll want to hang those awesome hotfixing snippets on the wall now.

— Ok, mhm, okay, hang... in the wall. Mhm.

— Where are you writing these things out?

— In a few Sticky Notes on my desk. Why? Does the future me write things down in a better w-

— As a matter of fact, yeah, I've been using Notion for the past months, and it's the perfect tool for us, you know how messy our desks and mind are; the way we always forget things... Well, no more! That's a thing of the past, erm your present, my past!
I've been organizing everything I can in Notion it's been such a joy. YOU NEED TO USE IT. You'll never become filthy, filthy rich if you keep forgetting you forget those million-dollar ideas 🌈.

— HOLD UP A FILTHY SECOND. I'LL BECOME... FILTHY, **FILTHY RICH?**

— Of course! I've already told you how we pulled it off. Haven't I...?

— No! I'd totally remember such special little piece of information.

— Oh, silly me! You know, it was actually a very unexpected journey, let me te-

— ...
— You there?

If you've found the post helpful or do you want to discuss/ask any of the things I've sent to my past self, please feel free to do so!
If you are feeling shy just let me know with a 🦄 or a ♥ you've enjoyed it and I might just call myself a few times more. Thanks again Vitor Paladini for the idea.

My React Functional Component maker for the terminal

Lucas G. Terracino — Thu, 16 Jul 2020 18:10:11 +0000

Hi 👋, this is my first post. Any feedback is welcome.

For a few months now, I've been digging deeper into React. As a newcomer to the React world I was seeing myself repeating some things over and over, that I wished I had an artisan command for them (Laravel developers might know what I mean), but in a nutshell, a way to create a basic file quickly.

At the same time, I've been using more and more Linux, Ubuntu in particular, which I installed to try out WSL2, and let me tell you, I'm very happy with it, specially with how easy is to tinker and make my own commands and scripts to make my work more efficient.

One of these repetitive and tedious tasks was

Making a folder
Then putting an index.js inside it which exported the default of a file
Make that file and inside it import React from 'react'
Of course, make a function and export it as default

You know the drill and you know where this is going ✨.

Introducing `pls_react_function_component`!

I decide to share my humble time saver command I call pls_react_function_component here in DEV.to. So please, use it and hack it to your hearts content.
Also, I'm aware its name is long^{^{^{I love it}}}

🛠 Usage

pls_react_function_component <OPTIONS>... <COMPONENT_NAME>...

Options

-e Changes the extension of the created files to the one provided. In case of choosing ts, semicolons are removed from files. Default value is js. Dot is not needed.
-p Creates parent folders if they don't exist.
-h Shows help for the command.

Example

Let's assume you have the following folder structure, and you wanna create a new Footer component.

src/
└── components/

We call our handy new pls_react_function_component command.

pls_react_function_component src/components/Footer

This will create the following folder structure and files.

src/
└── components/
    └── Footer/
        ├── Footer.js
        └── index.js

// src/components/Footer/Footer.js contents
import React from 'react';

function Footer() {
    return (
        <React.Fragment></React.Fragment>
    );
}

export default Footer;

// src/components/Footer/index.js contents
export { default } from './Footer';

💡 The code ^{^finally}

⚠ A few warnings:

I'm very aware some things might be better and that's why I'm also sharing the code, I'm quite a beginner with shell scripting, so if you find something that could be better, please, comment with any feedback you have 🙏.
The first line, the shebang, has zsh instead of the usual bash because I use ZShell as preferred terminal to work with. You can change it to #!/bin/bash if needed.
The file is structured to be added to the functions your terminal pre-loads, but you can use it however you like.
You might not agree with the styling of my code (i.e. tab size, arrow function, exporting, etc) but you are invited to edit, remix and tinker away with the code to suit your needs!
I advice once you've copied/cloned the gist, remove the extension for a better use as proper command.

Ok that's it from me for now, if I update this script in anyway I'll update the gist on this post too. Let me know if you used it or found it useful.

If you are shy a ❤ or 🦄 will be enough!

TL;DR: I made a script for your terminal to create React Function Components easily.

DEV Community: Lucas G. Terracino

Building an open source skill showcase with Deno

Enter Deno 2.0 🦕

What do we build 🛠️?

NOMADE55 / picto

Showcase your skills with flare 🔥

Picto

Easily showcase your skills with flare 🔥

🤔 How to create your own Picto?

Examples

No rounded corners and 2 columns

No background

📍 Roadmap

Ok now, for real

How Deno was better than I expected

Using Deno

Formatting with Deno [docs]

Linting [docs]

Serving with Deno [docs]

That's it?

Aprendiendo de los Grandes: El feed de Instagram

🏗 Maquetando

¿Por qué no usar muchos div?

Y ¿por qué estas en particular?

🏗 Agregando más elementos

Header

Maquetando con Placeholders

Section

Footer

🎨 Agregando estilo

Article

Header

Section

Footer

✨ Uniendo todo

👋 Palabras Finales

Relaciones de Aspecto Perfectas en CSS

O, cómo aprendí a dejar de preocuparme y amar el padding

¿Qué es la relación de aspecto?

🎨 Relaciones de Aspecto en CSS

🤯 El padding porcentual de un elemento es relativo al ancho de su padre

👨‍💻 Relaciones de aspecto más complejas

🤔 Pero el padding empujaría todo el contenido hacia abajo ¿no?

👀 ¿Hay alguna manera de evitarme hacer yo el cálculo?

🆙 Level Up!

Explicación

⚡ Usando relaciones de aspecto en Frameworks

👋 Conclusiones y el futuro

Easy theming with SASS mixins.

Show me the code!

Breakdown

Usage

🧬Evolving the mixin: Multiple Themes

Usage

💡A few more ideas

Conclusion

Highlighting awesome SASS snippets from Bulma

Lucas G. Terracino ・ Oct 15 '20

Highlighting awesome SASS snippets from Bulma

⚠ Head's up!

💎 Easy placeholders for inputs

💎 Easier Media Queries

💎 Overlaying absolute element

💎 Color Helper Mixins to find Dark and Light variants

👋 Parting words

Tweaking commits with Git's Magic Time Machine✨, aka git rebase

git rebase

Getting our hands dirty

pick

reword

edit

squash

fixup

drop

So, again, how do I use this magic tricks?

With great power comes great responsibility

📚 Let's read more!

Productivity tips I'd give my past self through a time-cellphone with limited credit

My React Functional Component maker for the terminal

Introducing pls_react_function_component!

Introducing `pls_react_function_component`!

💡 The code ^{^finally}