Forem: José Muñoz

Pimp your CLI

José Muñoz — Tue, 19 Dec 2023 17:20:25 +0000

Also available in spanish

As a developer, the command line is one of the tools you will be using most frequently. It can be intimidating to venture into the world of CLI tooling but I can assure you it is one of the most rewarding experiences too. In this post I want to walk ya'll through my personal CLI setup. It is based on 3 technologies which I'll coin as the "Holy Trinity" of the command line: TMUX, ZSH, & Neovim.

Prerequisites:

Linux, MacOS, or WSL
Your favourite NerdFont
A decent terminal application (i.e: iterm2, alacritty, etc.)
you OS’s equivalent of apt install zsh tmux neovim,
I'm using Debian for this demo

TMUX

The cornerstone of the command line experience in my opinion has to be the terminal multiplexer: tmux.
In simple terms (pun intended) tmux allows you to split your terminal into different panes, windows, or sessions. Have you ever ssh'd into a server to start a long running process and the screen-saver killed your session? tmux will keep the session running even if the client disconnects and you can pick up where you left by just attaching to the previous session. There is an entire ecosystem with themes, plugins, and utilities built around tmux. Checkout the tmux cheat sheet to get familiar with the basic functionality and keyboard shortcuts. This is really just the tip of the iceberg, I encourage you to dive deeper and customize your setup to your liking. By default your experience might not look like much:

We will start by creating a custom tmux configuration by running nvim ~/.tmux.conf

One of the first life comfort changes I make to my tmux configuration is to set the index to base 1. On your keyboard its easier to switch between the numeric keys in order rather than starting in one end and reaching to the opposite end for the rest of the options.

# start windows, sessions, and panes with 1
set -g base-index 1
set -g pane-base-index 1
set-window-option -g pane-base-index 1
set-option -g renumber-windows on

I also like to change the leader key combination, you're going to be using this key-combo a lot so make sure you set it to something comfortable.

# change prefix
unbind C-b
set -g prefix C-Space
bind C-Space send-prefix

Lastly, one of the configs that I personally think should be the default is to open a new pane or window on the Current Wording Directory.

 # split in cwd
 bind '"' split-window -v -c "#{pane_current_path}"
 bind '%' split-window -h -c "#{pane_current_path}"

This will provide you with a solid base to configure further on your own, but in order to really take it to the next level, you have to be able to tap into Tmux's plugin ecosystem. TPM (Tmux Plugin Manager) can be installed by cloning its repository into Tmux's plugins folder.

git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm

after that, you will have to keep this at the very end of the file:

# Initialize TMUX plugin manager (keep this line at the very bottom of tmux.conf)
 run '~/.tmux/plugins/tpm/tpm'

And a list of your desired plugins at the top, starting with tpm of course:

set -g @plugin 'tmux-plugins/tpm'

I would also recommend adding tmux-plugins/tmux-sensible, and catppuccin/tmux for usability and aesthetics. Your .tmux.conf should look like this:

 # List of plugins
 set -g @plugin 'catppuccin/tmux'
 set -g @plugin 'tmux-plugins/tpm'
 set -g @plugin 'tmux-plugins/tmux-sensible'

 # split in cwd
 bind '"' split-window -v -c "#{pane_current_path}"
 bind '%' split-window -h -c "#{pane_current_path}"

 # start windows, sessions, and panes with 1
 set -g base-index 1
 set -g pane-base-index 1
 set-window-option -g pane-base-index 1
 set-option -g renumber-windows on

 # change prefix
 unbind C-b
 set -g prefix C-Space
 bind C-Space send-prefix

 # Initialize TMUX plugin manager (keep this line at the very bottom of tmux.conf)
 run '~/.tmux/plugins/tpm/tpm'

assuming you're already running tmux, you can run tmux source-file ~/.tmux.conf to load the new config. After the new config has been loaded you need to install the plugins by using your new key-combo and Shift+I. Depending on your font you might have to adjust the font size, 16 is a good default.

If any of the plugins fails to install you can always use this same mechanism of cloning the repo and calling "install" after. Make sure to checkout Tmux's Awesome list for more.

Z Shell

ZShell is an alternative to bash a.k.a. "Bourne-Again SHell". It does everything that bash does and just like Tmux it is extensible via a healthy plugin ecosystem. By this point I hope you have already tried to run zsh on your terminal. At first it won't look like much has changed but with the right plugins this can become your best friend on the command line.
The first thing we need to do is to install oh-my-zsh, a framework on top of zsh that manages configs, plugins, themes, and more.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Once you complete the installation you should have a new configuration file called .zshrc on your home folder, if you open it with nvim ~/.zshrc, you will see that it already has been populated with the default oh-my-zsh configuration. One of the most essential plugins for me is zsh-autosuggestion which provides autocomplete functionality, to install you need to add it to the plugins list on the configuration:

plugins=( 
    # other plugins...
    zsh-autosuggestions
)

Clone the repo to the oh-my-zsh plugins folder like so:

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Lastly, you want to source the new config using source ~/.zshrc, do this every time you edit the config.

My prefered theme is powerlevel10k, yup it’s over nine thousand!

P10k is a feature-rich theme which has a lot of eye candy, it is very customizable and even has a wizard to help with the first config.

To install it find the current theme on your config and set it to:

ZSH_THEME="powerlevel10k/powerlevel10k"

and then clone the repo into your oh-my-zsh themes folder. Don’t forget to source the new config!


git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Make sure to checkout Zsh's Awesome List for more.

NeoVIM

NeoVim was released in 2014 as a fork of VIM that adds support for Lua. Just like its predecessor, there is quite the learning curve, but the payoff as a keyboard-first editor is truly rewarding. You have endless options to customize your setup and I encourage you to start by changing individual things to your liking (like tabs vs spaces) and to make a custom configuration of your own. Lua is already popular as a systems language so it was a good replacement for vimscript and it makes it easier to write plugins in comparison which means there is a good selection of plugins available for Neovim. Its easy to get option paralysis with the vast amount of customization and plugins, so there’s popular configurations of neovim that put together a nice UI with modern IDE functionalities and we can start with those like AstroNvim and NvChad.

In order to install a custom config you’re going to (you guessed it) clone the repository into the config folder and run nvim to load the new config.

git clone --depth 1 https://github.com/AstroNvim/AstroNvim ~/.config/nvim

git clone --depth 1 https://github.com/NvChad/NvChad ~/.config/nvim

If you are switching between configs it is recommended to make a backup of your current config by running the following

mv ~/.config/nvim ~/.config/nvim.bak
mv ~/.local/share/nvim ~/.local/share/nvim.bak
mv ~/.local/state/nvim ~/.local/state/nvim.bak
mv ~/.cache/nvim ~/.cache/nvim.bak

The basic plugins will be downloaded on the first run using Lazy, a package manager for Neovim that loads only the necessary plugins as you use them. Once it's done you should be looking at a full-fledged IDE.

Here are some quality-of-life improvements I like to add to my setup in order to have Neovim across the whole system. First I update the global editor settings for git:

git config —global core.editor nvim

A lot of things on the command line default to vi as their editor, so I like to alias it to nvim to make sure I get a consistent experience

alias vi=“nvim”

Sometimes you want to edit something that requires privileged access and you run sudo nvim only to be surprised with the default config. This is because nvim loads config from the user's home folder and that context changes when you run something as root. To fix this you can run sudo with option -E to include the current environment variables. Add it to your .zshrc as a quality-of-life improvement.

alias sudo=“sudo -E”

Make sure to checkout Neovim's Awesome List for more.

Conclusion

Having a nice environment helps when you're spending time on the command-line. It took me a while to figure out that you could do so much with CLI applications. I hope that this becomes the starting point of your command-line journey. Let me know if you have any other utilities I can add to my CLI setup on the comments!

Bonus

If you want to take your SSH to the next level I highly recommend you read Carlos Becker's SSH Tips and Tricks blog post.

Enchula Mi Consola

José Muñoz — Tue, 19 Dec 2023 17:20:21 +0000

disponible en ingles

Como desarrollador, la consola (o terminal) es una de las herramientas mas se usan a lo largo de tu carrera. Puede que sea intimidante adentrarse al mundo de las herramientas de consola pero es tambien una de las mejores experiencias que uno puede tener. En este articulo quiero mostrarles mi propia configuración para terminal. Esta basada en las 3 tecnologias que me gusta llamarles la "santísima trinidad" de la terminal: TMUX, ZSH, & Neovim.

Pre-requisitos:

Linux, MacOS, or WSL
Una fuente bonita de NerdFont
Un emulador de terminal decente (i.e: iterm2, alacritty, etc.)
El equivalente a apt install zsh tmux neovim en tu sistema, yo voy a usar Debian.

TMUX

La primera piedra en la experience de consola tiene que ser el multiplexor de terminal: tmux.
En pocas palabras tmux te permite separar tu terminal en paneles, ventanas, o sesiones. ¿Alguna vez te has conectado a traves de SSH a un servidor para correr un proceso largo y el salva pantallas te mato la sesión? Tmux te mantiene la sesion corriendo aun si la conexion SSH se corta! En cualquier momento podes re-abrir la sesion previa y es como si nada hubiese pasado.

Hay una gran comunidad que hace temas, plugins, y diferentes utilidades basadas en Tmux. Les recomiendo leer tmux cheat sheet para familiarizarse con las funcionalidad y las combinaciones de teclas. Y este es solo la punta del iceberg, hay tantas cosas que probar. Los animo a que investiguen mas por su parte y configuren todo a su gusto ya que la experiencia que viene por defecto no es muy buena.

Lo primero es crear un archivo de configuración corriendo nvim ~/.tmux.conf y una de las mejoras que me gusta hacer inmediatamente es cambiar el indice a base 1 ya que hace mas comodo navegar pestañas con el teclado.

# start windows, sessions, and panes with 1
set -g base-index 1
set -g pane-base-index 1
set-window-option -g pane-base-index 1
set-option -g renumber-windows on

Tmux usa una combinación de teclas para llamar las funciones, y por defecto esto siempre empieza con Ctrl + b pero no me parece muy comodo, asi que yo cambio la combinación lider a Ctrl + Space que se me hace mas fácil de hacer de manera constante.

# change prefix
unbind C-b
set -g prefix C-Space
bind C-Space send-prefix

Por ultimo, algo que me parece que debería ser así por defecto es que cuando abra un panel nuevo me abra la sesion en donde estaba originalmente y no en la raiz.

 # split in cwd
 bind '"' split-window -v -c "#{pane_current_path}"
 bind '%' split-window -h -c "#{pane_current_path}"

Con esto pueden ir modificando y añadiendole a esta configuración a medida vayan usando tmux para hacer su propia configuración. Pero para poder sacarle bien el jugo a tmux hay que aprovechar los plugins a traves de TPM (Tmux Plugin Manager). Para instalar TPM se necesita clonar el repositorio dentro de la carpeta de plugins de tmux

git clone https://github.com/tmux-plugins/tpm ~/.tmux/plugins/tpm

ponerlo en la lista de plugins en la configuración

set -g @plugin 'tmux-plugins/tpm'

y luego añadir estas lineas de codigo al final del archivo

# Initialize TMUX plugin manager (keep this line at the very bottom of tmux.conf)
 run '~/.tmux/plugins/tpm/tpm'

Les puedo recomendar tambien tmux-plugins/tmux-sensible y catppuccin/tmux para tener mejor funcionalidad y estetica. Al final la configuración les debe quedar así:

 # List of plugins
 set -g @plugin 'catppuccin/tmux'
 set -g @plugin 'tmux-plugins/tpm'
 set -g @plugin 'tmux-plugins/tmux-sensible'

 # split in cwd
 bind '"' split-window -v -c "#{pane_current_path}"
 bind '%' split-window -h -c "#{pane_current_path}"

 # start windows, sessions, and panes with 1
 set -g base-index 1
 set -g pane-base-index 1
 set-window-option -g pane-base-index 1
 set-option -g renumber-windows on

 # change prefix
 unbind C-b
 set -g prefix C-Space
 bind C-Space send-prefix

 # Initialize TMUX plugin manager (keep this line at the very bottom of tmux.conf)
 run '~/.tmux/plugins/tpm/tpm'

Si no has corrido todavía tmux en la consola, la nueva configuración va a cargar automaticamente. Para actualizar la configuración estando ya dentro de tmux basta con correr tmux source-file ~/.tmux.conf para actualizar la configuración y los plugins se instalan con Shift + I

Dependiendo de la fuente que uses, habra que ajustar el tamaño de la letra, muchas configuraciónes asumen que usas 16 o mas. Si alguno de los plugins no se instala bien, siempre se puede instalar manualmente clonandolo a la carpeta de plugins como lo hicimos para instalar tpm. Hay mas recursos en: Tmux's Awesome list.

Z Shell

zsh (tambien conocido como ZSHell) es una alternativa a bash (tambien conocido como "Bourne-Again SHell"). En funcionlidad básica hacen lo mismo, pero zsh tiene mucha mas funcionalidad sobre lo que se puede hacer con bash, y al igual que TMUX, hay un gran ecosistema con plugins, temas, y mas. Cuando corras zsh por primera vez, no va a hacer cambiado mucho, pero con los plugins adecuados zsh puede convertirse en tu mejor amigo en la terminal. Para empezar vamos a instalar oh-my-zsh, un framework basado en zsh que administra configuraciones, temas, plugins, y mas.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Una vez completado el instalador vamos a tener un nuevo archivo de configuración llamado .zshrc en la carpeta raíz,
si lo editamos con nvim ~/.zshrc podemos ver que ya tiene bastantes secciones con comentarios y varias opciones ya configuradas. Les puedo recomendar el plugin zsh-autosuggestion que hace que la terminal te de autocomplete basado en tu historial. Para instalarlo hay que agregarlo a la lista de plugins:

plugins=( 
    # other plugins...
    zsh-autosuggestions
)

hay que clonar el repositorio a la carpeta de plugins de oh-my-zsh

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

y por ultimo hay que cargar la nueva configuración corriendo source ~/.zshrc.

Mi tema preferido para oh-my-zsh es powerlevel10k, asi es, mas de nueve mil!

Viene con un instalador que te ayuda a configurar paso a paso cada opcion del tema, con muchos iconos, información y colores.

Para instalarlo hay que clonar el repositorio a la carpeta de temas de oh-my-zsh


git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

hay que cambiar el tema en .zshrc y recargar la configuración.

ZSH_THEME="powerlevel10k/powerlevel10k"

Hay mas recursos en: Zsh's Awesome List.

NeoVIM

Neovim fue lanzado en 2014 como un fork de Vim que lo extiende con soporte para Lua. Lua ya es un lenguaje establecido en el ambito del desarrollo de sistemas linux, lo que lo hace un reemplazo ideal para vimscript lo que hace mas facil para la comunidad que hace plugins. Al igual que Vim, no es facil acostumbrarse a usar Neovim, pero el cambio a trabajar principalmente con el teclado es lo mas productivo que se puede ser con un editor de texto. Inclusive, los editores modernos tienen plugins para poder usar configuraciones de teclado estilo VIM, asi que una vez que se aprende este modo de trabajo se puede traducir a otros editores facilmente.

Hay miles de opciones para configurar en este editor y hacerlo tan util como VSCode. Podemos empezar con opciones basicas como tabs o espacios e ir haciendo una configuración personalizada. Es facil paralizarse con tantas opciones que aprender, pero la comunidad tiene varias configuraciones populares para tener una buena funcionalidad e interfaz sin mucho que hacer como AstroNvim y NvChad.

Para instalar una configuración basta con clonar el repositorio a la carpeta de configuración de Neovim

git clone --depth 1 https://github.com/AstroNvim/AstroNvim ~/.config/nvim

git clone --depth 1 https://github.com/NvChad/NvChad ~/.config/nvim

Al cambiar de configuración hay que hacer los siguientes respaldos:

mv ~/.config/nvim ~/.config/nvim.bak
mv ~/.local/share/nvim ~/.local/share/nvim.bak
mv ~/.local/state/nvim ~/.local/state/nvim.bak
mv ~/.cache/nvim ~/.cache/nvim.bak

Cuando abrís nvim la primera vez despues de cambiar la configuración se van a instalar los plugins basicos con Lazy el manejador de paquetes para Neovim que carga los plugins a medida se van necesitando.
Una vez terminada la instalación el editor se ve como un IDE completo.

Algunas cosirijillas que me hacen la vida mas facil es configurar mi editor global de git que sea nvim:

git config —global core.editor nvim

Muchos programas usan vi como el editor por defecto, asi que una manera de tomar un atajo y cambiarlos todos es hacerle un alias apuntando a nvim

alias vi=“nvim”

A veces hay que editar un archivo con privilegios y al correr sudo nvim te aparece la configuración inicial sin temas ni nada. Esto es porque Neovim carga su configuración con las variables de ambiente del usuario, para pasarlas con sudo se usa la opción -E. Se le puede hacer un alias para hacerte la vida mas facil.

alias sudo=“sudo -E”

Hay mas recursos en: Neovim's Awesome List.

Conclusión

Cuando vas a pasar mucho tiempo usando un programa es importante que tenga buena interfaz y funcionalidad. Aventurarse a la consola puede ser intimidante pero con una buena interfaz muchas cosas se vuelven digeribles.
Comenten sus recomendaciones de herramientas de consola, les agradezco de antemano.

Extra

Si queres enchular tu SSH también, te recomiendo los SSH Tips and Tricks en el blog de Carlos Becker

Git Conflict resolution made simple

José Muñoz — Sat, 03 Jul 2021 19:58:37 +0000

Have you ever tried to merge a Pull Request and it seems to have a conflict on file that you changed intentionally?

When it comes to conflict resolution, it can be a painful experience sometimes, even when you all you’re doing is accepting the incoming changes.

Git can be intimidating sometimes, and most people tend to prefer a GUI to manage their versioning and source control. But sometimes using the CLI can be the better option.

I’m the kind of weird that likes to do things on the CLI when possible, so I have a small life-hack that has saved me so much time during conflict resolution.

In this example we are going to imagine we are trying to make a PR from development to staging, once you’ve created the PR you notice there is a few conflicts and the PR can’t be merged right away. Don’t panic, we can fix this with the power of the CLI!

Make sure you have the latest version of your destination branch (in this case staging) checked out on your local environment.

Go to your source branch (in this case its development) and run:

git pull origin staging —strategy ours

This will accept the history of the source branch over the destination branch and resolve the conflicting files for you. Now you can safely push the resolution to your remote and the PR you submitted should now be mergeable.

The CLI can be an intimidating place, but sometimes it can be the fastest way to achieve a task. Merge strategies are one of the most powerful options you can use from the git source control system, and there’s many more strategies that allow you to get even more flexibility from these options, I’ll leave a couple of links below where you can learn more about git merge strategies, thanks for reading!

Links:

WebRTC and React-Native

José Muñoz — Tue, 12 May 2020 05:24:04 +0000

It is a strange time to be a developer, with most countries going into lock-down, the need for communication technologies has sparked.

One of the technologies that has been readily available for web developers to create this solutions is the WebRTC API which web browsers have implemented almost across the board. The next step for these kind of technologies is to make a jump to mobile, either with PWA or a Native application. The former could be considered already viable but the features that the public expects with video apps has only become more and more complex.

For React-Native Developers the WebRTC solutions have historically had a high barrier of entry. Expo has not yet (as of May 2020) integrated the react-native-webrtc native module into their framework despite having demand for it. Of course it is not Expo's responsibility to implement the things that we claim for, that is not how open source works.

If you want to have WebRTC on your React-Native project you must go with the official npx react-native CLI.

The Setup

react-native-webrtc's documentation has been neglected by the community, as it is one of the least favourite parts of a developer's tasks, but an essential task nonetheless. You can follow the installation guides for both Android and iOS but in this post I will try to guide you through a much much simpler process that is made possible thanks to the auto-linking features that came with react-native@0.60

Starting From Scratch

My purpose here is to lower the entrance barrier for people to explore WebRTC technologies, for this reason I will approach this from the perspective of a greenfield project, the typical npx react-native init myApp will do.

Once you have a boilerplate project we need add react-native-webrtc as a dependency:

npm install --save react-native-webrtc

From here on our next step is going to be to integrate react-native-webrtc with each platform.

The high-level overview of this setup is:

glue the native module to each platform
ask for the necessary permissions

I highly recommend you use a physical device to debug.

iOS

The iOS integration is the simplest one because cocoapods will do most of the legwork.

On the project's root, locate the podfile under ./ios/podfile, the first line is where we set the platform version, we will change this to version 10:

platform :ios, '10.0'

On the podfile, locate your project's target pods and add the following line:

pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc'

Once you've made these changes save everything and open a terminal on your project's root and run npx pod-install

Now that you've completed the first step, it's time to ask (nicely) for some permissions, locate the info.plist file under ./ios/myApp and add the following lines after the first <dict>:

<key>NSCameraUsageDescription</key>
<string>Camera Permission</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone Permission</string>

And that completes the iOS setup portion, easy right? If you only care about the iOS platform then all you need to do now is to run the project on an iPhone.

Android

The setup process for Android is inherently more complex but we will try to keep it as simple as possible.

On the project's root locate graddle settings under ./android/settings.graddle and replace the last line with the following:

include ':WebRTCModule', ':app'
project(':WebRTCModule').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')

In the ideal world we would add permissions and be done with it, but bear with me

Locate the project's graddle properties under ./android/graddle.properties and add the following line:

android.enableDexingArtifactTransform.desugaring=false

Locate Android's build properties under ./android/build.graddle and look for the buildscript dependencies, make sure the tooling is on version 3.5.2:

classpath("com.android.tools.build:gradle:3.5.2")

On different build properties located under ./android/app/build.graddle locate the dependencies and add the following line within its scope:

compile project(':WebRTCModule')

Go into the project's Android MainApplication.java located at ./android/app/src/java/com/all/the/things/ and add the namespace for react-native-webrtc by adding the following import:

import com.oney.WebRTCModule.WebRTCModulePackage;

Finally we can ask (nicely) for permissions, locate the project's AndroidManifest.xml under ./android/app/src/main and add the permissions on the same scope as the <application> tag with the following lines:

 <uses-permission android:name="android.permission.INTERNET" />
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
 <uses-permission android:name="android.permission.RECORD_AUDIO" />
 <uses-permission android:name="android.permission.WAKE_LOCK" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
 <uses-permission android:name="android.permission.CAMERA" />
 <uses-feature android:name="android.hardware.camera" />
 <uses-feature android:name="android.hardware.camera.autofocus"/>

Once this is in place we are ready to run the project on a device for testing.

Conclusion

react-native-webrtc's installation guides while not completely up-to-date, they have valuable information that is still useful for some people. I've made a template application that has been setup for WebRTC broadcasting and includes a simple socket implementation of a signaling server (required to start the Peer Connections), The sample itself is written using hooks and its linked below:

jdmg94 / react-native-webrtc-example

An example app for `react-native-webrtc` using React 0.60 or newer

What do you think about video broadcasting technologies? What other uses could Real Time Communication technologies be applied to? Have you baked bread during this quarantine yet? Thanks for reading!

Converting JSON with Elm

José Muñoz — Tue, 10 Dec 2019 06:32:50 +0000

Photo by TimJ on Unsplash

I've been getting into Elm in the last few weeks. I feel like I've been getting too comfortable with React and I wanted to get into something that was more Functional

So far I have been enjoying my experience, the concepts that the language encourages are fascinating to me, a lot of them I was already using in Javascript and it made my code better in a way that was hard to explain to my peers.

Today I want to tackle a simple task, something that literally every web application does to a certain degree, I want to call an API and present some of the data fetched. I'm using Random User API which is a free service that is consumed as REST. The final product can be found here and the source is linked below:

jdmg94 / elm-user-card-app

A simple elm application that fetches user data and presents a social card.

elm-user-card-app

A simple elm application that fetches user data and presents a social card. this is an exercise on parsing and transforming JSON structures we get from services that we may not have control over. it uses tailwind as its css framework, you can generate styles via yarn styles you can open a hot-reloading dev server via yarn dev it takes the same options as elm make.

View on GitHub

Disclaimer:
I am still learning Elm, I don't think I'm qualified to teach anyone about it, however these are my thoughts and experience with it.

I won't be able to take advantage of all the data that this nice API provides and make some complicated profile builder, I would like to just show a card with a name, a picture, a handle maybe. But the response we get is rather extense:

{
  "results": [
    {
      "gender": "female",
      "name": {
        "title": "Mrs",
        "first": "Lucy",
        "last": "Cruz"
      },
      "location": {
        "street": {
          "number": 5454,
          "name": "Fincher Rd"
        },
        "city": "Bundaberg",
        "state": "New South Wales",
        "country": "Australia",
        "postcode": 6462,
        "coordinates": {
          "latitude": "-87.1460",
          "longitude": "149.9745"
        },
        "timezone": {
          "offset": "+1:00",
          "description": "Brussels, Copenhagen, Madrid, Paris"
        }
      },
      "email": "lucy.cruz@example.com",
      "login": {
        "uuid": "92878432-b5ee-4539-92ae-b3bc44880832",
        "username": "whitepanda288",
        "password": "padres",
        "salt": "t34unJhk",
        "md5": "6bbd926216c8ba43e619b6a33c3b0fa0",
        "sha1": "f2beb504929ef81d8846d8007c2ef72f5ff8f574",
        "sha256": "d4671f10b485c7e8531d70d726e1e07be4a68eb4b75c2589262abb3f36d6aefe"
      },
      "dob": {
        "date": "1983-02-22T00:20:05.732Z",
        "age": 36
      },
      "registered": {
        "date": "2015-08-05T13:35:58.976Z",
        "age": 4
      },
      "phone": "02-5505-2105",
      "cell": "0430-474-187",
      "id": {
        "name": "TFN",
        "value": "251930914"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/women/29.jpg",
        "medium": "https://randomuser.me/api/portraits/med/women/29.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/women/29.jpg"
      },
      "nat": "AU"
    }
  ],
  "info": {
    "seed": "001e6b8cb1b5ecfa",
    "results": 1,
    "page": 1,
    "version": "1.3"
  }
}

In order to get what we need out of this large response object we need to understand decoders and type aliases. Decoders are Elm's way of handling JSON data, they provide instructions on how to handle a JSON input. Type Aliases are a schema of the data we intend on getting out of this bunch.

note:
I'll leave the boilerplate aside for all examples, however all examples should be interpreted as living in the same file.

first, let's define the data we want to receive on the view, the ideal scenario from the perspective of a view function.

type alias User = { firstName : String, lastName : String, username: String,  picture : String }

now that we have our type alias, we can define a model, very simple:

type Model = Loading | Fail | (Success User)

Notice that Success is encapsulated with our User type alias, elm supports the concept of tuples that allows us to bind 2 or 3 types as a single element, parenthesis are optional.

We'll come back to types, however, for now I want to transition to Decoders, since we are working on a hypothetical ideal scenario with our declarations above, we need to transform our JSON data. The first thing we're going to do is to pick the fields from the first result item, where the data resides. Type aliases are also functions, and they are initialized with their paths as curried parameters.
If your schema is rather complicated you may want to look into Json.Decode.Pipeline

userDecoder: Decoder User
userDecoder = map4 User
  (at ["name", "first"] string)
  (at ["name", "last"] string)
  (at ["login", "username"] string)
  (at ["picture", "large"] string)

Notice we're declaring userDecoder twice, the first one is the function's prototype declaration which is going to tell the compiler what to expect from this function. The latter is the function's body, and in it we want to use the map function to return the 4 fields we need to initialize a User record, remember to send them in the order of declaration.

Now that we have the userDecoder ready we can start thinking about how to get there from the real world, we need to make a request to the server and then unpack the results object before we can use our userDecoder, in order to achieve that we will write another decoder to unwrap the results from our non-existent request:

resultsDecoder: Decoder User
resultsDecoder = field "results" index 0 userDecoder

This decoder is also going to return a User record, but it is going to help us unwrap the layers we don't really need before extracting our data.
In order to accomplish this we're going to use the userDecoder we declared a moment ago, Decoders are just functions and being able to compose them like this really helps splitting tasks like this very easy.

Alright, I think we've done well so far with our decoders, before we can make our request I need another type that will allow me to update the application's state, and I want to give my users the option to refetch as well:

type Msg = anotherOne | gotUser (Result Error User)

One of these enumerations of type Msg will serve as a loading flag, another one will handle when the task is done. Notice the latter is a touple, that as another touple as its second element. With that in place let's make our request:

getRandomProfile: Cmd Msg
getRandomProfile = Http.get {
    url = "https://randomuser.me/api",
    expect = Http.expectJson gotUser resultsDecoder
  }

Using the get method of the Http package, we can pass a record with 2 members, the url to send the request, and what to expect from it's response, the Http package has other helpful functions for this, in our case we will call expectJson because that's what our decoders expect, and with that in place we can pull it together:

  browser.element = {
    init = init,
    view = view,
    update = update,
    subscriptions = subscriptions
    }

  init: () -> (Model, Cmd Msg)
  init _ = (Loading, getRandomProfile)

  subscriptions : Model -> Sub Msg
  subscriptions model = Sub.none

  update: Msg -> Model -> (Model, Cmd Msg)
  update msg model = 
    case msg of 
      AnotherOne -> (Loading, getRandomProfile)
      GotUser result -> 
        case result of 
          Ok profile -> (Success profile, Cmd.none)
          Err _ -> (Fail, Cmd.none)

  view: Model -> Html Msg
  view model = container [ 
    case model of
      Loading -> loader []
      Fail -> loader []
      Success profile -> card [ 
        onTheLeft [ roundedImage profile.picture ],
        detail [
          title (profile.firstName ++ " " ++ profile.lastName),
          subtitle ("@" ++ profile.username),
          refresh [onClick anotherOne]
          ]
        ]
    ]

Conclusion

Elm has the right paradigms to succeed, but for now React's roadmap is looking brighter. The advantage that Elm has over React is that React had to steer the community towards the right patterns (i.e: functional components over class components) to make concurrency work. Elm by its functional nature is already capable of concurrency, but at this point its not taking advantage of it in the way that React is, and in the future, when React Concurrent mode is released the difference is going to be accentuated. If elm wants to compete in the frontend world concurrency is going to be fundamental to its longevity, nonetheless it is an enjoyable language with the right paradigms, I think this would be a great first language for someone getting into web development.

React Hooks as an Enabler for Concurrent mode

José Muñoz — Fri, 01 Nov 2019 20:04:09 +0000

React Conf 2019 happened last week and we got some great content from all the speakers. However, I can't shake the feeling of walking away with last's years promise.

I'm not implying that the React team has been slacking or something, there was a lot of work done to prove the concept for concurrent mode and I'm glad they're taking their time to deliver something stable and proven on the real world. I had the chance to be at this (and last year's) React Conf and talk with some of the people behind the React projects and these are just my thoughts from this experience.

The React That Was Promised

Last year, Dan Abramov delivered a memorable talk titled "Beyond React 16" about concurrent rendering aka "Time slicing"

Later that same year Jared Palmer introduced us to the benefits of concurrent rendering on his talk "Moving to React Suspense"

Fast Forward a full year later and this year's React Conf gives us a deep dive into Concurrent mode and how the teams at Facebook are taking advantage of it to improve initial load times and time to interactive in lower end devices through techniques like selective hydration, server-side rendering and html streaming.

But what exactly is Concurrent Mode?

quoting the Official React Docs:

Concurrent Mode is a set of new features that help React apps stay responsive and gracefully adjust to the user’s device capabilities and network speed.

In simple terms, this will allow React to manage time more efficiently by performing several tasks at the same time in a non-blocking way. So when a component isn't ready to display yet, React will do something else instead. This will enable an array of user interactions where before we would only had a frozen loading state.

With concurrent mode fast devices increase in responsiveness giving a synchronous accessed data kind of feeling. In slow devices, the non-blocking nature of concurrent mode would provide responsiveness even with few resources, server-side rendering should take some of the load for slow devices to render the initial view, and selective hydration would increase perceived performance by prioritizing work based on user interaction heuristics.

For developers coordinating resources, data, and side-effects would become simpler, making a fluid and responsive app that scales is now easier.

How is this related to hooks?

Last year at React Conf the Hooks API was announced, and it got a lot of hype and well deserved attention, it basically out-shined the more "experimental" Suspense presentations.

Hooks made it easier for developers to take advantage of the functional components as more than just presentational and encouraging the transition from class-based components to functional components.

Functional components enable better tree-shaking and more predictable change tracking which helped a lot with the developer tooling and fast refresh, also announced in this year's conference, it enables the people working on React to take advantage of functional programming concepts that create a better developer experience and increase your application's performance.

A year later hooks has taken by storm the repositories both the general public and major OSS libraries, and now that hooks has pushed functional style into the spotlight, the community is ready for the next step: Parallelism

It's important we think about Parallelism

We're reaching the physical limits to which we can optimize chip design.
year after year Intel (as market leader) has struggled to scale down their transistors, forcing them to present new products with more cores instead. These are things that the web can take advantage of, and the React team has presented the right patterns for us developers to also benefit from that without getting into all the pitfalls of traditional "multi-threading".

The concepts that React has pushed have historically changed with the real world, and I think it is part of React's success.

Conclusion

Now that the landscape has changed, React is ready to give us more tools from the functional shed, with parallelism being the focus of this year we have to consider, why is this still on the experimental channel? will the third time be the charm for Concurrent mode? I'm excited to see what comes next.

Writing Code for Others to Read

José Muñoz — Mon, 10 Jun 2019 22:06:04 +0000

Most software engineers primarily focus on becoming great at writing code. And this makes perfect sense. This is an essential step to become a great engineer within a reasonably sized team.

Successful companies, however, grow continuously. Sooner or later, the software engineering team will be beyond a few dozen people, where everyone can easily talk with everyone else. People will be split across different floors. New offices in different locations will be opened. Face-to-face communication starts to be insufficient. Channels like email, chat or video calls become more important. The pace of which this growth happens varies by company: for some, it takes years. For some of the really successful companies, it happens much more rapidly.

-Gergely Orosz

When you get your first gig as a developer you will inevitably be reading, understanding, and maintaining other people's code. Coding is an expression of one's logical abilities, and every mind is a world of its own, so as you gain experience, you will learn to identify people by their coding style. On a small team, this is no biggie, but as people come and go this starts to become an issue.

In the ideal situation, the organization maintains a style-guide and this helps to keep the code-base homogeneous, if this isn't your case, your code should express intent, tell a story, this will make bugs easier to identify and locate. there are a few of things that we can do to keep our code clean. The following observations are my personal, over-simplified take on The Clean Code book series by Robert C. Martin with just the right amount of empiric bias.

Use Meaningful Names

Variable names should express intent, be explicit on what that variable is going to be used for. Don't be afraid of using long names, just make sure you're following the language's casing convention. Variables should be named within their context, loosely-coupled logic rarely has several resources doing the same thing, so naming things within context allows you to re-use variable names that make sense in another file. Function names should be thought of as verbs, a reaction to an event. when naming a function think about what is the function going to be used for.

Instead of writing this:

 button.onclick = () => {
  const anchor = document.createElement('a')
  anchor.download = 'my download.pdf'
  anchor.src = '/some/resource/url'
  anchor.click()
 }

you could write this:

const downloadPdf = // some implementation
button.onclick = downloadPdf

Currying is your friend

Currying is the technique of translating the evaluation of a function that takes multiple arguments into evaluating a sequence of functions, each with a single argument. Curried functions are particularly useful in the context of function composition, which allows us to create specialized higher-order functions that can provide more semantic sense.

Instead of writing this:

const SomeComponent = props => {
  return (
    <Button
      onClick={() => props.navigate('somewhere-else')}
    />
  )
}

you could write this:

const SomeComponent = props => {
  const goTo = route => () => props.navigate(route)

  return (
    <Button
      onClick={goTo('somewhere-else')}
    />
  )
}

Comments can be functions too!

If you're writing a large portion of logic you may feel like you need to explain what that code does, it is natural to think about leaving a comment for another collaborator to read when working around that file. Every time you find yourself writing a comment to explain the reasoning behind a portion of code, think about it as an opportunity to refactor that portion of code into its own function with a meaningful name. This doesn't mean that comments are bad, there are valid cases for comments where legacy code can't be refactored or notes for things that need to be revisited like //#TODO: vacuum cat

Instead of writing this:

const myBigImperativeFunction = async () => {

 if(isCold){
   const clothes = await fetch('/api/clothes')
   if(clothes.sweater){
     if(clothes.sweater.thickness > 3){
       clothes.sweater = await fetch('/api/sweaters?thickness=4')
     }
   } else {
      clothes.sweater = await fetch('/api/sweater')
   }

   const coffee = await fetch('/api/beverages/coffee')
   this. energy += cofee;
 }
}

you could write this:

const wearWarmSweater = //some implementation
const getSomeCoffee = //some implementation

if(isCold){
  await wearWarmSweater()
  await getSomeCoffee()
}

Keep things DRY

Logical reduction is one of the most powerful tools on any developer's belt. The thing about code with lots of flow control is that, it is hard to detect duplicate efforts but now that your code is explicitly expressing its intent, it is easier to spot things that can be reduced and re-used.

Instead of writing this:

const rightIcon = {
  size: 16,
  name: 'plus',
  color: '#0064D2',
}


const leftIcon = {
  size: 16,
  name: 'minus',
  color: '#0064D2',
}

you could write this:

const smallCeruleanSign = name => ({
  name,
  size: 16,
  color: '#0064D2',
})

const rightIcon = smallCeruleanSign('plus')
const leftIcon = smallCeruleanSign('minus')

Conclusion

Writing clean code makes everyone's life easier, your users will benefit of the increased productivity that having readable and understandable code will provide. Even on a personal level, clean code allows us to understand our projects 6 months down the line, it allows teams to onboard new engineers faster, and it helps spot efforts that could be optimized in a granular fashion. Let me know what you do to keep your code clean, I would love to learn a couple of tricks from the comment section.

Declarative Resource Loading with React

José Muñoz — Mon, 15 Apr 2019 04:38:35 +0000

^(photo by @alexjones on unsplash.com)

Loading Stuff is Hard

how many of you write the word isLoading 10x a day? Often times we want to make our application responsive even in slow connections, so we have loading indicators to give the user feedback that the app is working. If you think about your application, a lot of time and energy is focused on coordinating when stuff comes in, when it comes out, and what to show the user. This is any resource our browser uses, even resources that we don't fetch explicitly like images, fonts, code, etc. impact our time to interactive and UX. In this post, we'll take a look at a few approaches to load resources in our apps and how this is going to play in the near future.

Code Splitting

Code splitting is when you only send the code that’s required to load the page you are visiting, and then the rest of the code is sent to the client as the user navigates. Although there are a lot of other ways of achieving this, React has a couple of APIs which help us split the bundle into chunks of code that are grouped in the most efficient way to reduce their file size. The first API we need in order to split our application is called lazy, it is super simple, it takes a function that returns a dynamic import and then that’s a drop-in replacement for your component.

the other API is called Suspense. Suspense helps us determine if the resources we are trying to call are available to use and displays an alternative loading state while the resource becomes available. In other words, Suspense is a declarative loading state API.

Data Fetching

Look at the following example of a traditional class-based data fetching component:

it initializes the state on the constructor, fetches the data on-mount, and when it renders it evaluates if there is data to present or if it's ok to display a loader fallback instead. You must be thinking, of course using hooks would make it better right?

With Hooks, you fetch data using effects and imperatively checking the loading state to display a loader until the resource becomes available. We reduced some boilerplate code and made it cleaner, but it is still the same process, it still imperatively decides whether to present a loader or content.

Until now, we have only been able to use Suspense to load dynamic code with lazy, but in reality, we can use it for other types of resources too. You can suspend any element in your component hierarchy, if the calling resource can’t suspend the rendering of that subtree and provide a fallback it will look up the tree until it finds one that can or it errors out, it works exactly like an error boundary.

Suspense allows async resources to behave as if they had sync access. We don't even have a loader on our fetching component now, we just let React know that the resource ain't ready yet and Suspense will provide a fallback somewhere along the tree to wait for our resources to be ready to render.

Not only does Suspense improve our DX by reducing our lines of code exponentially but it also allows for a smoother transition between loading states like when your app goes from lazy loading the code to fetching data.

Other Resources

Another great example is images, sometimes our pages render and some images are missing, the requests for those resources can be on the heavier side. Let's do our new trick and load an image using Suspense.

Of course, you don't have to do this yourself, the-platform is a nifty library that has your back with wrapped components for images and other resources that are Suspense-ready.

As a fallback, you could have a regular <img/> tag with a lower-res thumbnail instead of a spinner and it will provide a smooth transition between the thumbnail and the full-size image.

Strict Mode

So now we have a few resources loading and our application might start to feel slow if we keep that loader going, we need to decide how much are we willing to wait for each resource. I definitely need to retrieve the code and data first, but I could get away with showing a low-res thumbnail for a few seconds longer in order to deliver an almost complete UI. Suspense provides us with a second prop called maxDuration and this prop allows us to specify in milis how much should it wait till it provides a fallback or content. maxDuration will only work when certain conditions are met, this is where things get a little tricky.

In order for React to appropriately evaluate what is going on, there should be no deprecated APIs in the suspended tree. to help us identify possible issues React exposes a tag called StrictMode. Strict mode is a stable API and you can use it right now in production, nothing will break, however, if there are any deprecated APIs used within its children you will be getting errors on your browser's console.

Concurrent Rendering

If you wrapped your app in strict-mode and your console is still clear, congratulations! You are now able to activate concurrent mode and start taking advantage of maxDuration. But what exactly is Concurrent mode? In the words of Dan Abramov:

Concurrent Mode lets React apps be more responsive by rendering component trees without blocking the main thread. It is opt-in and allows React to interrupt a long-running render (for example, rendering a new feed story) to handle a high-priority event (for example, text input or hover). Concurrent Mode also improves the user experience of Suspense by skipping unnecessary loading states on fast connections.

There are 2 ways of enabling concurrent mode in your application, again, these features are experimental and expected to ship sometime around Q2 2019. React-dom exposes a function called createRoot (currently unstable_createRoot), it receives the dom reference to the element where the app will be rendered, you can chain a render method with the app instance.

As an opt-in feature, React exposes a tag called ConcurrentMode which you can use to wrap subsections of your app to enable concurrent rendering only in their subtrees.

For a demo visit https://sdjs-demo.jdmg94.now.sh
For the full source visit:

jdmg94 / sdjs-suspense-demo

A Simple Data Fetch Demo using Classes, Hooks, and Suspense. Circa 2019

San Diego JS React Monthly Demo

A quick data fetching demo, illustrates data fetching with classes, hooks, and suspense. Includes code-splitting with React lazy, Concurrent mode, and both Data and Image fetching using suspense.

Usage

the options are displayed on the main page, both classes and hooks work in virtually the same way, they are both loading data on mount and imperatively so if things don't come through in a timely manner, you can see a small 'jump' on the loader. By contrast, using Suspense, not only do we reduce the code boilerplate even further, but allows us to treat the data as if it was a synchronous operation, it will use the algebraic effect of an error boundary to find the nearest fallback up its tree and wait until everything is ready to render taking advantage of concurrent mode.

If you open the suspense example page, you will…

View on GitHub

Why is No One Talking About Razzle?

José Muñoz — Sat, 30 Mar 2019 17:03:37 +0000

I love working in React, as most people do, I started with Create-React-App (CRA).
This provided a big cushion for me to just start working and forget about setting up the environment, I think most of us would agree that if we could just open an editor and start spitting out JSX without setting up babel/webpack, it would make our lives simpler. One of the things I enjoy the most about React is using client-side routing with react-router-dom. When looking for SSR solutions, I noticed the market forced me to abandon my way of doing routing, which meant I couldn't benefit from all the APIs that I get for free with my router. This was a big turn off for me, I had to think about my existing projects, which had gained a certain level of complexity, and re-structure everything to fit in either Next's way of doing routing, or Gatsby's way of using templates for static content.

I am NOT a fan of tools that force you to think around them and don't enable your creativity, that's one of the main reasons I abandoned Angular after v2 came out.
So SSR for me was a deal breaker for some time, I needed the SEO benefits, but I wasn't going to re-factor my whole app to do so.

I needed more flexibility from my tools. So I started doing my research and I found Razzle which is an isomorphic SSR solution. Razzle even has its own CLI, Create-Razzle-App (also CRA?), which meant I could get going by just calling it like the original Create-React-App. Razzle grew on me really fast, it's config-less mode meant I could start prototyping quickly just like I would with CRA, but I had all the extensibility I needed without having to adapt my workflow to it.

If I wanted to change the ESLint config, I could do so by just adding a .eslintrc file to the project, the babel config could be changed the same way, add a plugin with a .babelrc and Razzle will pick it up and add it to the default config, if I needed to modify the webpack config just add a razzle.config.js file, which provides a no-hassle, extensible, default webpack config. I didn't have to buy into a new framework, I didn't have to refactor my whole app (much). I could keep using React-router-dom just like I did with CRA, so the learning curve is basically non-existent. In fact, the only thing I had to do in order to add SEO to my apps now was to copy paste the SEO component from Gatsby, that was it.

Because of the way Razzle works, you can use it with Vue, Angular, or React.
By default, Razzle comes with React's config, but you could easily change the config to use any other frontend framework.

So How does Razzle work?

Razzle bundles both your client and server code using two different webpack instances running with Hot Module Replacement in parallel. While your server is bundled and run on whatever port you specify in src/index.js (3000 is the default), the client bundle (i.e. entry point at src/client.js) is served via webpack-dev-server on a different port (3001 by default) with its publicPath explicitly set to localhost:3001 (and not / like many other setups do).

Razzle was created by Jared Palmer, the mind behind Formik, Backpack, and After.js, with support from other prominent OSS contributors like Dan 'the man' Abramov, and Jari Zwarts and many others. Give Razzle a try, I'm sure you're going to love it!

How to Easily Center stuff with Flexbox

José Muñoz — Wed, 02 Jan 2019 20:09:18 +0000

Photo by Unsplash

A Brief History of the CSS struggle

Centering elements on a web page has been historically cumbersome and harder than it should be. In ye olde days, tables reigned supreme as they were the only HTML element that allowed centering to some degree.

In November 1994 a CSS Proposal was announced at the Web Conference in Chicago. This was the beginning of the web as we know it but it still had a long way to become what we know today.

If you go to 1998 google using the wayback machine you can check the source and see that it was only an img tag and some tables.

Centering elements on the web was a lot easier once automatic margins were introduced, on later versions of CSS. In theory, you could throw auto margins at any element in the box model and it should automagically center itself within their scope, however, this only worked partially since it was hard to work with the vertical axis of this solution. This was a major pain point for most web developers in the early 2000s, how to vertically center elements in using the box model.

It wasn't until 2013 that W3C released a working draft of Flexbox which was promised to solve this and other long-standing pain points.

Why We're Here

I know you didn't come here for a history lesson, especially one that happened some 30 years ago, let's get our hands dirty with some real world 2019 methods of centering elements on your web page.

Horizontal centering is pretty straightforward depending on your needs. You can get away with slapping auto margins on your element and it would work most of the time.

.item{
  margin: 0 auto;
}

If your ambitions go beyond centering a single element, flexbox is here to save the day. In this case, you won't make a rule for the elements you want to center, you will make rules for its container and everything inside will fall along the lines of those rules.

Horizontal Axis

.row{
  /* 
   * all children are automatically
   * considered columns
   */
  display: flex;
  flex-direction: row;
}

Vertical Axis

.column{
  /* 
   * all children are automatically
   * considered rows
   */
  display: flex;
  flex-direction: column;
}

Once your container has the right direction, we can center the items along the main axis of our container by setting justify-content: center;, this is cool we now have our content centered along either axis of the container, but, why not both?
This could be useful to display centered elements on a fullscreen container, or to make a grid system, we are not going that deep into flexbox's possibilities in this post, if you want to see what could be accomplished with flexbox as a grid system I recommend you check the Bulma CSS Framework, it's one of my favorites. What we are trying to accomplish here is much more trivial, center our elements in both its axis, we just need to add align-items: center; and this will change the alignment in the perpendicular axis. By joining both justify-content and align-items we can have our child elements centered in both the X and Y planes.

.centered{
  align-items: center;
  justify-content: center;
};

If you want something in the center of the screen all you need to add is height: 100vh; and your content will be there.

Conclusion

A few years ago, having elements in the exact middle of the screen was a mere illusion that very crafty web devs created through complicated and often rigid solutions, nowadays you can toss 6 lines of CSS and make it happen.

Happy 2019 🎉 would you like to continue reading about the history of CSS?
You can check out W3's History of CSS which was used to help write this post. For more information about flexbox visit CSS-Tricks' Complete Guide to Flexbox which is a great resource.

Bootstrapping a React library with Parcel Bundler

José Muñoz — Thu, 20 Sep 2018 17:48:28 +0000

Photo by Jøn on Unsplash

Often while working on a project I get to create some neat components that I would like to re-use in the future and keep it in a presentable repo for anyone interested. Most of these side-projects end up in a repo graveyard or not even get split from their original project. Configuring webpack and babel to transpile and expose a UMD module and a demo page can be a daunting task. Although Webpack 4 has introduced config-less operation, today I want to share my experience with Parcel-bundler.

Parcel runs config-less by default, and it is a very fast and flexible bundler that works seamlessly with Babel 7. I want to show you how easy it is to achieve that painless library setup.

Folder Structure

First, we need to create our root folder with the name of our project and initialize it with yarn (or NPM if that's what you're into).

mkdir my-awesome-component 
cd my-awesome-component
yarn init

Once the folder has been initialized we need to add a couple of things


mkdir lib
mkdir example/src

These folders will hold both our source code and the example we're going to write.
These are not the only folders we are going to work with but for now, this is all we need.

Dependencies

I'm only going to talk about the general dependencies you would need to accomplish an environment that provides most of the functionality you get from CRA with a minimal setup using babel 7 and Parcel.

NOTE: At the time writing this Parcel 1.10 is in beta, so I'll be using the beta since the current stable build does not support babel 7.

On the most basic level, we need babel to: transpile to ES5, polyfill generators, and support the object-spread syntax. We are also going to add parcel as our bundler.

 yarn add --dev @babel/cli @babel/core @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-regenerator @babel/plugin-transform-runtime parcel-bundler@^1.10

If you use lodash.js or moment.js you may want to add the babel plugins to shave off those extra KBs from your bundle as well.

Since we are talking about React in here, I'm going to add the obligatory dependencies. Note that react-dom is added to be used in our demo and not necessarily on our library.

yarn add react react-dom prop-types

Configuring Babel 7

Parcel provides a default babel config and it will do most of the things for you. However, you can define your own .babelrc and Parcel will pick it up and add it to their config. Parcel will automatically add some presets like env and react so we don't need to set that up if you check the babel dependencies we didn't even need to include a preset, so we are here just to set up our plugins. I'm using atom, feel free to use your favorite editor!

 atom .babelrc

then add

{
  "plugins": [
    "@babel/transform-runtime",
    "@babel/transform-regenerator",
    "@babel/proposal-object-rest-spread"
  ]
}

and that was it for Babel!

The Scripts

Now the fun part begins. We need to set up the scripts that are going to bring our project to life! open your package.json and head to the scripts section.

 atom package.json

We need a start script that watches our source for changes and compiles it live to /dist (or however you want to call it I'm going for the default).

We need a build script that compiles and minifies our bundle and makes it ready for shipping.

we need a start-demo script which watches the source of our example in examples/src

We need a build-demo so our demo can also be bundled and get ready to be served on github pages

We also need a publish-demo script so we can push the bundle to GitHub.

{
  "start": "parcel watch lib/index.js",
  "build": "parcel build lib/index.js --global my-awesome-component",
  "start-demo": "parcel example/src/index.html --out-dir examples/dist --open",
  "build-demo": "parcel build example/src/index.html --out-dir examples/dist --public-url ./",
  "publish-demo": "gh-pages -d examples/dist",
}

NOTE: the --global option denotes the UMD package name, so you need to provide the name your NPM package is going to have. Also, make sure your examples' index.html has a script tag referencing your index.jsx and parcel will take care of the rest

Extra

Source maps are generated by default using Parcel, and they can be a powerful tool to analyze and optimize your bundle size. Let's take advantage of them.

Source-map-explorer is a CLI that generates a report based on your existing source maps, we are going to use this tool to generate a visual representation of our bundle.

 yarn add --dev source-map-explorer

now let´s add a script to generate the HTML representation of our source map.

"view-source-map": "source-map-explorer --html dist/index.js dist/index.map > source.html && open source.html"

now you can open source.html on your browser and figure out where you can shave off those extra KBs.

NOTE: If you are running windows you need to remove open to launch the generated html to your default browser

Conclusion

With the configuration we've discussed here, you can throw in something you cooked up in CRA with minimal changes and publish it as its own library with a nice demo hosted on GitHub pages. I hope this can encourage other devs to start using parcel and get their ideas published faster. Thanks for reading if you got this far, please leave a comment to share your thoughts!