Forem: Jaime Rios

How to enable Tailwind Intellisense on TSX Files

Jaime Rios — Tue, 26 Jan 2021 18:44:51 +0000

Intro

I've started to experiment with Tailwind, so while setting up my environment when I had this issue, so here is how to setup intellisense on TSX files in nutshell.

Step 1.

Before getting setting up Intellisense, you will need to install Tailwind in your project.

Step 2.

Install the Tailwind CSS IntelliSense extension for Visual Studio Code.

Step 3.

If you don't have it already, setup a tailwind.config.js file in your root folder by running:

npx tailwindcss init

Step 4.

Go to VS Code settings, and add the following configuration:

// settings.js
// ...
"tailwindCSS.includeLanguages": { 
  "plaintext": "javascript" 
}

Step 5.

Reload VS Code. My favorite way to do it is to press CMD + P and select Reload Window.

That's all folks.

Array.reduce() for newbies

Jaime Rios — Tue, 06 Oct 2020 23:13:42 +0000

Prerequisites.

In order to get the most out of this post, it is important for you to be familiar with:

Using functions with parameters.
Callback functions.
How return works.
JavaScript Data types.
Other Array methods like Array.filter or Array.sort.

In this article will start by getting familiar with some key terms that will make the Array.reduce easier to understand, those key terms are:

Reducer.
Accumulator.

Let's start with a first principles approach and go to the dictionary. According to Dictionary.com, to reduce means:

To bring down to a smaller extent, size, amount, number, etc.

To lower in degree, intensity, etc.

Synonyms for reduce
diminish, decrease, shorten, abridge, curtail, contract, retrench.

With this in mind, it now easier to understand what a reducer function is. Simply put, a reducer function reduces n input items to a single return value.

One of the features that makes Array.reduce so powerful, is that we can use an accumulator. let us learn what an accumulator is. Going back to the dictionary, an accumulator is:

a register used to contain the results of an arithmetical or logical operation.

In the context of our programs, this register can be a variable that is referring a boolean, an array or an object.

Now that we know what a reducer function is, let us explore how Array.reduce works.

According to MDN:

Array.reduce is a method that executes a reducer function on each element of the array, resulting in single output value.

Array.reduce takes in two parameters:

A reducer function.
An initial value for the accumulator.

Let's dive deeper into the reducer function parameter.

Reducer function

As we have learned before:

A reducer function reduces n input items to a single return value.

The reducer function we provide to Array.reduce is executed on each element of the array. This function takes in four parameters:

accumulator. This is the total value of the accumulator.
currentItem. Current item of the array.
currentIndex. Current index of the array.
sourceArray. This is the array that we want to reduce.

Now that we have the basic concepts. Let's walk trought a few examples.

Examples of `Array.reduce` in JavaScript

Get the highest number in an array using `Array.reduce`

In this example, we will: Use Array.reduce and define our own reducer function with an accumulator in order to get the highest number in an array:


/**
 * Let's break it down step by step:

 * 1. Define an array of numbers.
 * 2. We declare the reducer function that will be applied to each element of the array.
 * 3. Within the reducer function, if the currentItem is greater than the accumulator, we will return the currentItem.
 * 4. We invoke numbers.reduce() passing our reducer function as a first parameter and 0 as an initial value for our accumulator. * 5. We store the value returned by numbers.reduce() in a variable called average.
 */


const numbers = [3, 4, 10, 1, 4, 3]; // 1. 

const reducerFunction = (accumulator, currentItem, currentIndex, sourceArray) => { // 2. 
    if (accumulator < currentItem) {
        return currentItem; // 3.
    }
    return accumulator; // 🤓 Notice that the value that we return in the reducer function, will be the value of the accumulator the next time the reducer function is invoked.
}


const highestNumber = numbers.reduce(reducerFunction, 0); // 4 and 5. Notice that 0 is the initial value for our accumulator.

console.log('Highest number is ', highestNumber); // 10

Finding an Average with the Array.reduce

Imagine you have an array of products coming from the back end. In this example we will get the average price of a product in an array.



/**
 * One more time, let's break it down step by step:

 * 1. Define an array of products.
 * 2. We declare the reducer function that will be applied to each element of the array.
 * 3. Within the reducer function, we summ the price of each product to the total.
 * 4. When we reached the last item in the array, we devide it by the number of elements in the array..
 * 5. We invoke products.reduce() passing our reducer function as a first parameter and 0 as an initial value for our accumulator which now is called total. 
 * 6. We store the value returned by products.reduce() in a variable called average.

 */
const products = [ // 1.
  {
    name: "apple",
    price: 29.76, 
  },
  {
    name: "pineapple",
    price: 41.85,
  },
  {
    name: "melon",
    price: 46.5
  }
];

const reducerFunction = (total, product, index, array) => { // 2.
  total += product.price; // 3.
  if( index === array.length - 1) { // 4.
    return total / array.length;
  } else { 
    return total; 
  }
}

const average = products.reduce(reducerFunction, 0); //5 and 6.

console.log(average) // 39.37

Other resources:

That's all folks. Thanks for taking the time for learning this article.

I teach working professionals to code so they can get their first job in tech. If you further questions, you can ask here or DM me on Twitter.

As a BackEnd Dev, what is your biggest struggle while learning Front End Technologies?

Jaime Rios — Mon, 23 Mar 2020 04:41:38 +0000

For me, the biggest struggle while learning Front End Technologies was to distiguish between what is worth learning and revelant and what is not.

It was early 2016, when Angular 2 was a romour, IE was still supported, flexbox was emerging but not yet supported by most modern browsers.

A few questions that exemplify my struggle were the following:

Desciding between using bower and npm as a package manager.
Choosing a first JS freamework to learn, my candidates were: Angular, Angular 2 that was about to be realeased, Ember or React.
Should I learn ES6?
Should I learn Typescript or CoffeeScript?
Grunt or Gulp? What about Yeoman?

What about you:

As a BackEnd Dev, what is your biggest struggle while learning Front End Technologies?

Solving my own problem with Software

Jaime Rios — Mon, 27 May 2019 05:59:33 +0000

TLDR : I made a mobile-only, PWA.
Link to the app ➡ https://simpleunitconverter.netlify.com/
Link to the repo ➡ https://github.com/papaponmx/simple-unit-converter

Hey guys, this is a short post, just to let you know that I just launched a PWA that solves a very personal problem.

The problem

When I go to the gym, three situations coincide:

I use an app that allows you to use pounds or kilograms but not both.
My gym uses pounds for machines and kilograms for dumbbells.
Therefor I need a way to constantly convert units from pounds to kilograms.

Now, let us explore the alternatives:

I could do it mentally, but I will not too lazy for that.
There is an app, but I don't want to see commercials, neither use 25 MB for such a simple app space on my device, nor want to see commercials.
Just Google it, I could but that means turning on the mobile data. That seems trivial, but I start to get notifications from social apps. The problem is that they induce me train for more time than I should, and make me more prone to injuries due to bad form.
There is a website for that. Kind of, but they are not fully responsive not PWAs.
Create a PWA connected to the cloud in order to track your own trainings. I didn't think of that at the time thinking

The solution 🤓

Use my knowledge and make a PWA with these features:

️Bidirectional KG to LBS Unit Conversion 🏋️‍
Dark Theme as default 🌑
Screen reader tested 🔉
No User tracking 🔍
No Ads 📈
No 💩
Open source 📚

The tech stack

Hosted on Netlify.
Create React App as a boilerplate.
State management with React Hooks and Context API.
Styled Components.

Link to the app ➡ https://simpleunitconverter.netlify.com/
Link to the repo ➡ https://github.com/papaponmx/simple-unit-converter

Cheers guys.

Progressive Enhancement: Respecting web browser preferences in a post ES6 world

Jaime Rios — Wed, 22 May 2019 13:04:53 +0000

Cover Image By: Tom Davidson on Flickr.

Intro

After Google IO, and watching a few talks, about elevating web capabilities, I got inspired. So here is a bridge for you guys.

What is Progressive Enhancement?

In a nutshell, Progressive Enhancement is a philosophy for developing web applications and this are the principles:

Basic content should be accessible to all web browsers.
Basic functionality should be accessible to all web browsers.
Sparse, semantic markup contains all content.
Enhanced layout is provided by externally linked CSS.
Enhanced behavior is provided by unobtrusive, externally linked JavaScript.
End-user web browser preferences are respected.

An alternative to PE is Graceful Degradation(GD). The difference is that PE goes from simple to complex while GD goes the other way around.

I've written before about accessibility and will write another post for common heuristics for web development.

More than persuading you to support IE or holding back on CSS Grid, my goal is to make you aware of new APIs we can use in order to comply with the last point on the list: End-user web broser preferences are respected.

Respecting web browser preferences

Even if you are not aware of it, the browser exposes information about the user preferences, so let us walk through a few of them.

Font system default

Another reason for using the system's default font is web performance, since there are no additional files to fetch from a server. There are three ways to accomplish this:

Using the system-ui value:
This is a value for font-family that represents the default user interface font. Except for Firefox, it is supported by most recent modern browsers.
Apply system fonts by calling them using font-family:
I recommend hiding this behind a feature query, as a fallback.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Using a polyfill. Depending on your use case, this might be a last resource alternative. This is available as an npm package and this is the link: https://www.npmjs.com/package/font-family-system-ui

Do Not track

This might be a controversial one. But the only fact that the user does not want you to, should be enough reason to stop monitoring their behavior. This is an opinion, but privacy is a human right.

The Do Not Track API is supported by modern browsers except Safari

Here is what an implementation might look like:

/**
 * "1" if DNT is enabled
 * "0" if the user opted-in for tracking
 * "unspecified" otherwise
 **/ 

if (navigator.doNotTrack === 0) {
    // Initialize Google Analytics scripts
} else if (!navigator.doNotTrack) {
    // Ask user if it is ok to track
} else {
    // DO NOT TRACK
}

Here is Do Not Track on MDN.

Default to user preferred language

Depending on your app, there might be an internationalization(i18n) implementation in your app. There is a way to default to user's language if supported, Instead of inferring it from their IP, location or your app preferences.

https://developer.mozilla.org/en-US/docs/Web/API/NavigatorLanguage/language

User `prefers-color-scheme`

prefers-color-scheme is a media feature that as the name implies, allows us to detect if the user has requested the system use a light or dark color theme.

This was shipped on Firefox 67, it is supported on Safari 12.1 but as the time of this writing, support is still missing in most modern browsers.

Here is the link to prefers-color-scheme on MDN.

User `prefers-reduced-motion`

Similar to the previous point, we can detect if the user prefers to have less animations. This might be due to accessibility concerns, or mere preference. I can see why this might be a concern if you have rich CSS animations, 3D Graphics or VR.

The implementation in CSS is rather simple, here is what the code looks like:

.animation {
  animation: vibrate 0.3s linear infinite both; 
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

Further resources:

prefers-reduced-motion on MDN.
Here is a great article if you would like to look further into this: https://css-tricks.com/introduction-reduced-motion-media-query/

That's all folks, thanks for your taking the time to read this. You can read my other posts on https://dev.to/papaponmx or say hi on Twitter.

Cheers.

Accessible fonts for people in a hurry

Jaime Rios — Sat, 20 Apr 2019 16:45:45 +0000

TLDR:
Fonts can be more a11y friendly by:

Using a bigger font size.
Having sans-serif font Families.
More contrasting colors.
If you don't have a11y first, could you provide an a11y theme?

Alternative ways to interact with the web

My current job and a few post inspired this post. There is a keen interest on the business side towards making the application more accessible and we are doing some heavy lifting in order to facilitate the interaction for most users.

Some of those include but are not limited to:

Cognitive impairments (head injury, autism, developmental disabilities) and learning disabilities (such as dyslexia, dyscalculia or ADHD).
Visual impairment such as low-vision, complete or partial blindness, and color blindness.
Hearing-related disabilities.
Motor or dexterity impairment such as carpal tunnel syndrome, artritis and repetitive strain injury.

Most of us interact with a mouse and a keyboard, but there is a wide range of people that just can't. Depending on their condition, our users might use assistive software or devices like:

Screen readers like JAWS, talkback,
A braile keyboard.
A switch device or their phone volume buttons in the same way.
A keyboard without a mouse.
A Chrome extension due to dislexya.

What we can do about it

As you can see, there is a wide variety on conditions, for the purpose of this post, visual impairment is the most relevant for us. Keep in mind that it also includes people wearing glasses due to some degree of myopia, astigmatism. Even poor illumination or a bad monitor can pose some difficulty for experiencing the web.

Let us begin with the end in mind. Most developers are not expected to design, but there are situations where our input is required, so I want to give you some heuristics in order to make some a11y aware decisions.

In this post, our goal is to improve the fonts for readability. According to Wikipedia:

Readability is the ease with which a reader can understand a written text. In natural language, the readability of text depends on its content and its presentation.

As a rule of thumb, readability most come first.

Make fonts bigger

Fonts serve different purposes, they help determine the atmosphere of a website, might even remind us of things and help us better convey a message.

In a world with ever more mobile internet access, having a smaller font might be a good optimization, specially since screens are smaller on mobile devices. However passing a certain threshold, it messes up readability, zooming in might break your layout. Having bigger fonts as a default, makes our layout less prone to break when zooming in.

Bigger fonts are easier to read from a distance. Here is an article with use cases.

Could you avoid serifs?

Serifs are the small lines at the end of a larger stroke in a letter. The image below explains it way better.

During the early days of the web, there used to be a debate about why sans serif fonts are better for screens with low resolution. However, the reasons to avoid them are:

Serif fonts can confuse dyslexics, for example lowercase “p” for a “b”, d”, or “q”.
Serif fonts can be distracting on narrow spaces.

Colors and contrast

When two colors are similar, if the difference is two subtle, people might not perceive the difference, this is why contrast matters. Here is the contrast definition:

Contrast is the difference or degree of difference between things having similar or comparable natures.

As crazy as it sounds, two people can be seeing the same color, with one hexadecimal value and still perceive a different color. If the ability to perceive the difference between two colors is too high, this is what we call color blindness.

The question that arises is: How do I if the colors I'm using are contrasting enough? I am glad you asked.

The unit we use as a reference to measure the contrast between two colors, is called contrast ratio A contrast ratio of 4.5:1 is the minimum Web Content Accessibility Guideline.

Here are tools to help you pick more contrasting colors:

A11y themes

In the later months, having a dark theme has become something cool, appreciated by the users and hype-worthy.

What does it take to provide a dark theme?

From a "First principle's approach", a dark theme requires two things:

To have the color's across an application to be defined a variables. I know this might not be necessary but, stick with me for a bit.
An alternative color palette.
A mechanism that allows the user to switch themes.

The question I am trying to pose is, could we provide an a11y theme too?

For starters, an a11y theme could have two things:

Even more contrasting colors, like Monokai Charcoal High Contrast theme for VS Code.
Dyslexic friendly fonts.

Further resources

Tool to check Contrast ratio.
Video about Typefaces for dyslexics.
Pulp Fiction Dialog with Typography.
CSS Tricks on Updating a variable with JavasScript.
Article by Microsoft about variable fonts.
Paul Boag's podscast episode about Web Typography.
Hemingway app.
Article about a11y audits by Addy Osmani
Article: Special font for dislexya?

That's all folks, thanks for taking the time to read this article. I'm building a blog with all my blog posts. On the mean time, you peek into my future blog posts along with all the previous ones in this repo.

You can find me as @papaponmx on your favorite social network.

Cheers.

A hitchhikers guide to web images on 2019

Jaime Rios — Sat, 23 Mar 2019 20:47:25 +0000

Cover photo by JfXie

The goals of this post is to give you some exposure to the current web capabilities and help you identify some opportunity areas for:

A few assumptions about you reading this post:

You are familiar with HTML.
You know basic image formats like jpg, png and svg.
You are somewhat familiar with CSS and enough have enough expertise to read, understand and implement the MDN documentation.

Introduction

The web is evolving, fast. Nice to have features have become something you as a developer, are expected to be familiar with here are some that are common:

Internationalization (i18n).
Front End Routing.
Responsive web design.
Front End User Authentication.
SEO.
Page Speed Optimization.

New features within the HTML spec

The HTML5 spec, is intended to serve a mobile web, you can think of it as two things a set of HTML tags, and several new APIs

Let us revise some new tags and attributes one by one, after that I will add an example that uses all of these.

`<picture>`

You can think of it as an img tag with more flexibility to display image resources. It allows us to provide higher-density versions of an image to high-DPI displays. Let us see what it looks like, according to MDN:

The HTML element contains zero or more elements and one element to provide versions of an image for different display/device scenarios.

`<source>`

The HTML <source> element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element.

`srcset` attribute

This attribute is similar to src, but used to define multiple images src, there are many ways to implement this sources

Declare the attribute once with multiple images and a src as a default. Check original source at webkit.org.

<img 
  src="image-src.png" 
  srcset="image-1x.png 1x, 
          image-2x.png 2x,
          image-3x.png 3x, 
          image-4x.png 4x"
>

The other way is to declare multiple sources and within each have one srcset. You can see it in the example below. The main difference is that the second has a more specfic conditions for image displays.

Putting it all together:

See it on Codepen

<picture>
  <source media="(max-width: 799px)" srcset="https://placekitten.com/200/300">
  <source media="(min-width: 800px)" srcset="https://placekitten.com/400/600">
  <img src="https://placekitten.com/600/800" alt="A cute black cat showing his love">
</picture>

New relevant CSS properties

In case you did not know, spoiler alert, CSS 4 does not exist. Instead we have small increments being supported by modern browsers. Here are some properties that is good to be aware of:

`object-position`

As the name suggests, object-position, defines the way in which an object is defined within a box. It is quite similar to background-position. You can see the code pen example in, thanks @Robin Rendle.

`image-rendering`

This property serves to tell the browser how it should render the image. The values describe the algorithm that will be implemented in order to scale the image, by the time of this writing, the possible values are:

auto: Default value, the browser's algorithm will determine how to scale the image.
crisp-edges: It preserves contrast and edges in the image.
pixelated: As the name suggests, the browser will keep it's pixelated style as the viewport grows.

You can see how this three images behave in this example on Codepen.

Or check this image-rendering applied to a QR code.

Image formats

<img alt="Apple iPhone 7 Plus, GSM Unlocked, 32GB - Rose Gold (Refurbished)" src="https://images-na.ssl-images-amazon.com/images/I/51gVm-dTdvL._AC_SY200_.jpg" class="product-image" height="200px" data-a-hires="https://images-na.ssl-images-amazon.com/images/I/51gVm-dTdvL._AC_SY400_.jpg">

Lazy loading

Lazy loading images means that they are served slowly and it is avoided until it is necessary.

When implemented, for the final user it usually means a smaller bundle served, faster loads and a better experience overall.

Intersection Observer API

For starters, you might want to use the Intersection Observer API.

Simply put, the API provides users a way to observe given elements and monitor changes in their intersection with a given ancestor element, or the viewport itself.

If you use Gatsby, Gatsby Link is already using it under the hood.

Intersection Observer API on MDN.
Intersection Observer API support on caniuse.com.
Great article: Master the Intersection Observer API.

For modern frameworks here are some npm packages you might want to look into:

Skeletons

Even when you have lazy loading in place, user's internet speed might be slow or interrupted, even in urban areas, even if the user is not aware of it, so it is good to have something in place to the user to see. That's where skeletons come in place.

A skeleton is a placeholder in a place which need waiting for loading

You might have seen it before, this is what a skeleton looks like:

https://codepen.io/oslego/pen/XdvWmd

There are some npm packages you might use in order to implement this feature, but as a rule of thumb, let's use something simpler.

Introduce `:empty` pseudo-class

According to MDN Docs:

empty represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.

So an skeleton can be as simple as

/*
 * ...your styles
 */

.user-data:empty {
  background: rgba(130, 130, 130, 0.2); 
}

You can check an animated Skeleton Screen with CSS or :empty at MDN Docs.

Introduce WebP

WebP is an image format designed for the web, it was released on September 2010 and other than Safari, now it is widely supported on most modern browsers. If you check your profile picture on dev.to, you might find that it is already using it. I'll list a few articles in the last part.

Further resources

MDN Mobile Optimization
Google's Mobile Testing Tool.
Website Speed Test Image Analysis Tool.
HTML5 Cheat Sheet.
Learn How to automate your image optimization process with Lepto by Dimitry Nicholas.
Automated image Editing, Optimization and Analysis via CLI and a web interface.
Gatsby Image.
Lozard JS: Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more https://apoorv.pro/lozad.js/demo/
Article about WebP on Google Developers..
WebP on Wikipedia.

That's all folks, thanks to making it to the very end, keep on learning.

Cheers.

If you could only achieve one thing as a programmer during the next year, what would it be?

Jaime Rios — Mon, 03 Dec 2018 14:44:31 +0000

For me it would be reaching 150 customers.

It implies launching my SaaS and making it open source, and improving the browsing experience for the people that I seek to serve.

Flipping the coin: Should developers design?

Jaime Rios — Wed, 28 Nov 2018 03:42:38 +0000

We all know and have different and loosely held opinions about designers coding. But what about the opposite?

Personally I've had uncomfortable interactions trying to navigate and
performing critical tasks in both school and tax paying system.

At the time there feel like Norman Doors, specially a time when I was asked to create a really strong password in order to protect critical information. After a form was submitted, no feedback was presented to the user. Upon further inspection a realized that a fetch request was made to the server and it has a ~5 second latency. If things go wrong, which they did, no feedback was presented to the user. It was really, really painful.

When you hire a developer, you don't expect her to design, however some UX or UI design is always appreciated. What's your take?

Front End Development Automation. Part 4

Jaime Rios — Sun, 25 Nov 2018 17:52:55 +0000

Intro

In this post we will create part of a system that is part of a bigger one. We will focus only on running performance test.

Note: In this post I am assuming that you are quite familiar with Git, Github Webhooks, NodeJS and Docker.

NodeJS: Here is the repo with all the code.

The problem

ABC Corp has a SPA that is core to the business. It needs to perform great on mobile(we will define what great means later). As time goes by, releases become more frequent and there is a pressing need to ensure that all new releases comply with the performance budget assigned to it

The solution

As developers, we must ensure each release must be in a deployable state. For us, deployable means that all tests are passing and new features work as expected in an production-like environment. On top of that, we need/would like to have a way to get instant feedback about the performance of our next release, therefore the proposed solution:

Create a system that runs performance tests each time a new release is made.

Dependencies

dotenv. A zero-dependency module that loads environment variables from a .env file into process.env
NodeJS.
Puppeteer. Headless Chrome Node API.
Lightouse CLI. Audit our application and get the relevant data.

1. Developing our Analysis tool

Ideally, our next build should always either improve upon the last release or stay within an acceptable range. If things start to deviate, we want to get the relevant data as fast as posible.

We will create a function that gathers these metrics:

JS Coverage & CSS Coverage. This metric tells us how much code was used, versus how much was loaded.
Network Requests. Lists the network requests that were made during page load.
Speed-index. Speed Index shows how quickly the contents of a page are visibly populated.

We will runs all tests that Lighthouse has available. This is the order in which things should start to happen:

Get the app URL running in a testing/staging/local environment. This should be read from a configuration file.
Generate code coverage. For now we'll just get it for the home page.
Run Lighthouse audit.
Filter information and send it somewhere it can persist. This could be either a JSON saved using file system or a Database. As the app matures we'll define it somewhere else

/**
 * puppeteerPerformance.js
*/

'use strict';
require('dotenv').config();

const chromeLauncher = require( 'lighthouse/chrome-launcher/chrome-launcher' );
const fs = require( 'fs' );
const lighthouse = require( 'lighthouse' );


const { APP_URL } = proccess.env;
// 1.

const flags = {
  output: 'json'
};

const launchChromeAndRunLighthouse = ( url, flags, config = null ) => {
  return chromeLauncher.launch()
    .then( chrome => {
      flags.port = chrome.port;
      return lighthouse( url, flags, config )
        .then( results =>
          chrome.kill()
          .then( () => results )
        );
    } );
}


// 2.
launchChromeAndRunLighthouse( APP_URL, flags )
// 3.
  .then( results => {
     fs.writeFile( './results.json', JSON.stringify(results), function ( err ) {
        if ( err ) {
          return console.log( err );
        }
        console.log( 'The file was saved!' );
      } );
});

Note that the results variable could be sent to a database and be stored for historycal comparison.

In this case, we'll just save it as a JSON file

2. Not Creating our Github Action

Bummer: at this time, Github actions are in public, beta, and I am on the wait list. So we will use a Github WebHook instead. If you are in a position to authorize my request, I'll be happy to blog about it.

NodeJS: Here is the repo with all the code.

I have already written a blog post on how to setup Github Webhooks. In this case I'll create a Heroku app in and use that url for the URL settup.

Now we need to create a simple Express Application that runs tests everytime a request is recieved.

We will install express

yarn add express


require('dotenv').config();

const { APP_STAGING_URL, APP_PRODUCTION_URL } = process.env;

const express = require('express');
const bodyParser = require('body-parser');
const fs = require('fs');
const { lighthousePerfAudits } = require('./audits/lighthousePerfAudits');

const app = express();
const flags = {
  output: 'json',
};

app.use(bodyParser.json());

app.post('/run', (req, res) => {
  // 1. Check secret
  if (req.headers['x-hub-signature']) {
    /**
     * Secret is valid,
     * run tests and write json data
     * on both environments
     */
    lighthousePerfAudits(APP_PRODUCTION_URL, flags)
      .then((results) => {
        fs.writeFile('/production_results.json', JSON.stringify(results), (err) => {
          if (err) {
            return console.log(err);
          }
          console.log('The file was saved!');
        });
      });

    lighthousePerfAudits(APP_STAGING_URL, flags)
      .then((results) => {
        fs.writeFile('/staging_results.json', JSON.stringify(results), (err) => {
          if (err) {
            return console.log(err);
          }
          console.log('The file was saved!');
        });
      });

    // send response with 200
    res.status(200).send();
  } else {
    res.status(500).send();
  }
  // secret is not valid, return 500
});

app.listen(process.env.PORT || 8080, () => {
  console.log('App linstening on ', process.env.PORT || 8080);
});

Conclusion

With this instance in place, we can run scripts everytime a push is deployed to the repository and get our relevant metrics in order.

There are some lose ends on the application like:

Where should this data persist?
Is there a way to just plug it into Github?
How can we visualize the historic data of our releases performance?
What does the fox say?

I'll address those concerns in further posts. I'm also working on an openSource SaaS that solves this questions. You can hit me up on twitter if you have more questions.

NodeJS: Here is the repo with all the code.

Cheers.

Further resources:

My impressions about mentoring

Jaime Rios — Sun, 11 Nov 2018 17:00:18 +0000

Hi everyone. I have been serving as a mentor for Front End Development for about two months and I'd love to share my experience with all of you. I've collaborated in three ways:

DEV has a Beta feature that connects mentors with mentees and you can choose the area of expertise you'd like for your mentor. This connected me with someone in another country (I'm Mexican) who is eager to be a Full Stack JS Developer.
I have three friends that are not satisfied with their career choices and are interesting in coding as an alternative.
I started a new job and there is an Junior Dev who I help on a regular basis.

I'd love to tell you what it is like so far and share my two cents if you are in a similar situation.

Be encouraging

We all struggle, even simple ideas don't always feel that way the first time. I've spent hours trying to understand something without any guidance and ended up seeing a 5 min video after which everything just made sense. I've also had the opportunity to see something similar with the mentees.

Sometimes when I'm learning I feel frustrated and/or stupid. In those moments, a kind word goes a long way. I really appreciate the opportunity to give it to a student.

Respect your time and others

This might be obvious for you. Right now I'm working full-time, doing college part time, part time freelancing, getting to 9% body fat and on top of that mentoring. If you can do something to provide some certainty when you schedule a meeting, it helps make things smoother.

Thinking that I'm spending two free hours today with my mentee while I could be earning X dollars from my client. Makes me quite uncomfortable. Something that worked for me is to decide before hand, how many hours am I allowed to spend this week for each role.

If you read The Seven Habits of Highly Effective People, I am designing and developing something that might help organizing your weeks as the Third Habit describes.

People learn in different ways

What helped me learn, might not help you at all, you might even find it confusing. We all have different brain structures and cognition has some nuances for all.

I found this while sharing resources with a mentee. Some like to read articles but find the documentation quite confusing. Other prefers to see crash courses videos, while a third one prefers to do pair programming.For me, videos with subtitles at twice the speed work like a charm, I can also just read the docs and start coding.

Do Whatever works best for you but don't give up on learning. Also be kind when you find someone less experienced with a different preference for learning resources.

Share what you know, there is greatness in you

The fact that you are solving real problems, even spending your free time learning more about your craft is something to be applauded. Specially when we always have things like Facebook, Twitter and Netflix to distract us.

Beware that most of your experiences if you choose so, make you smarter and better. Even your mistakes have value, if you learn from them, you become better, if you share that with us, we all are.

Cheers.

PS: If you are and experienced Node JS Dev with extensive experience on SaaS, Distributed Systems and multi-tenant applications I'd love to have you as a mentor. DMs are open at @papaponmx.

A gentle explanation of Github Webhooks

Jaime Rios — Wed, 12 Sep 2018 21:47:17 +0000

Intro

As you know, I have been working a lot on puppeteer lately. Trying to automate the things that I find important, repetitive and boring, or where the Pareto principle can be implemented. This is an in between post that we'll build on top of for the next part of the project.

The choice to aim for something greater while selecting a topic for this post was not that easy, however, I feel like on the verge of building a product that: is open source, provides you with a lot of value, excites us all and is profitable. All of those four, in that specific order.

If you want to, you can tweet me @papaponmx, DMs are open.

What are webhooks and why do they matter

In this context, hooks are events you can subscribe to in order to trigger some action. It is possible that you have been using them for a while without knowing. Within the context of git and Github, there are many events you might want to know about.

They matter because they allow us to perform some actions only when they are relevant, here are some examples:

When a pull request is created, run all the tests and let me know if they are OK, or not.
When a new release tag is created, make a summary of all the new features and add it to the CHANGELOG.md.
When a new issue is rised, send a message to the team via Slack.
Any time a release is made, run performance test, look for key differences and let me know the results. This is what we are going to do on the next post.

Here is a link with more events you can subscribe to.

How does it work

When some event happens, Github will send you an HTTP POST letting you us know that the event happen and a payload providing us with relevant information about it. For example: If you subscribed to pull_request, they payload will tell us who initiated it, the target and origin branches, etc.

As you can tell, the payload depends on the event, in the pull_request payload, we have this information about the repo:

{
//...
"repo": {
  "id": 135493233,
  "node_id": "MDEwOlJlcG9zaXRvcnkxMzU0OTMyMzM=",
  "name": "Hello-World",
  "full_name": "Codertocat/Hello-World",
  "owner": {
    "login": "Codertocat",
    "id": 21031067,
    "node_id": "MDQ6VXNlcjIxMDMxMDY3",
    "avatar_url": "https://avatars1.githubusercontent.com/u/21031067?v=4",
    "gravatar_id": "",
    "url": "https://api.github.com/users/Codertocat",
    "html_url": "https://github.com/Codertocat",
    "followers_url": "https://api.github.com/users/Codertocat/followers",
    "following_url": "https://api.github.com/users/Codertocat/following{/other_user}",
    "gists_url": "https://api.github.com/users/Codertocat/gists{/gist_id}",
    "starred_url": "https://api.github.com/users/Codertocat/starred{/owner}{/repo}",
    "subscriptions_url": "https://api.github.com/users/Codertocat/subscriptions",
    "organizations_url": "https://api.github.com/users/Codertocat/orgs",
    "repos_url": "https://api.github.com/users/Codertocat/repos",
    "events_url": "https://api.github.com/users/Codertocat/events{/privacy}",
    "received_events_url": "https://api.github.com/users/Codertocat/received_events",
    "type": "User",
    "site_admin": false
  },
}

If you want to check the full JSON for pull_request, here is the link.

How do we start

I'm glad you asked. Now that we have a general notion of the basics, we need two things:

To register our webhook.
Expose an endpoint to our webhook.

Registering our webhook

On your repository, you need to go to Settings, click the Webhooks tab and you should see a screen like this:

One you click the Add webhook button, you will be asked for the following data:

Payload URL: This is the endpoint where we will receive the post, something like http://localhost:4567/payload. But we'll configure this later.
Content type: Comming from a Front End background, application/json makes more sense.
Secret: This is a string. The purpose it serves, is to provide us with a way to ensure that the POST request is coming from Github.
Events: The events you want to listen.

This is what a webhook added looks like:

Cheers guys.

Further resources:

Link to my Puppeteer series:

Github webhooks Documentation
My twitter profile, @papaponmx.

Cheers guys.

Forem: Jaime Rios

How to enable Tailwind Intellisense on TSX Files

Intro

Step 1.

Step 2.

Step 3.

Step 4.

Step 5.

Array.reduce() for newbies

Prerequisites.

Reducer function

Examples of Array.reduce in JavaScript

Get the highest number in an array using Array.reduce

Finding an Average with the Array.reduce

Other resources:

As a BackEnd Dev, what is your biggest struggle while learning Front End Technologies?

Solving my own problem with Software

The problem

The solution 🤓

The tech stack

Progressive Enhancement: Respecting web browser preferences in a post ES6 world

Intro

What is Progressive Enhancement?

Respecting web browser preferences

Font system default

Do Not track

Default to user preferred language

User prefers-color-scheme

User prefers-reduced-motion

Accessible fonts for people in a hurry

Alternative ways to interact with the web

What we can do about it

Make fonts bigger

Could you avoid serifs?

Colors and contrast

A11y themes

What does it take to provide a dark theme?

Further resources

A hitchhikers guide to web images on 2019

Introduction

New features within the HTML spec

<picture>

<source>

srcset attribute

New relevant CSS properties

object-position

image-rendering

Image formats

Lazy loading

Intersection Observer API

Skeletons

Introduce :empty pseudo-class

Introduce WebP

Further resources

If you could only achieve one thing as a programmer during the next year, what would it be?

Flipping the coin: Should developers design?

Front End Development Automation. Part 4

Intro

The problem

The solution

Dependencies

1. Developing our Analysis tool

2. Not Creating our Github Action

Conclusion

My impressions about mentoring

Be encouraging

Respect your time and others

People learn in different ways

Share what you know, there is greatness in you

A gentle explanation of Github Webhooks

Intro

What are webhooks and why do they matter

How does it work

How do we start

Registering our webhook

Further resources:

Examples of `Array.reduce` in JavaScript

Get the highest number in an array using `Array.reduce`

User `prefers-color-scheme`

User `prefers-reduced-motion`

`<picture>`

`<source>`

`srcset` attribute

`object-position`

`image-rendering`

Introduce `:empty` pseudo-class