DEV Community: Leonardo Faria

Building TypeScript definitions on demand

Leonardo Faria — Mon, 07 Feb 2022 18:16:50 +0000

I recently came across an interesting problem: is it possible to dynamically create TypeScript definitions for a React component library that doesn't use TypeScript at all? Something like a DefinitelyTyped package for a private NPM package?

The problem

Let me detail the problem a bit better. Consider the Button component below:

import PropTypes from "prop-types";

const Button = ({ appearance, children, ...props }) => {
 return (
  <button className={`button--${appearance}`} {...props}>
   {children}
  </button>
 );
};

Button.propTypes = {
 /** Type of the button */
 appearance: PropTypes.oneOf(["primary", "secondary"]),
 /** Content for the button */
 children: PropTypes.node.isRequired
};

Button.displayName = 'Button';

export default Button;

This component is very straightforward: a <button> that will be accordingly styled with the value of appearance.

Now imagine that a new developer joined the company and they shipped their very first feature with the following Button:

<Button variant="link">Buy now</Button>

The new developer used to work with Material UI and variant="link" came from their old days. No one noticed that the Button didn't look like the others in the application.

It would be great to have a warning in our editor mentioning that variant is not a valid prop for <Button>. It would be great to have an autocomplete feature in our editor, so the developer could learn the component API as they work in the codebase. TypeScript solves these problems; however, the codebase doesn't use TS.

In addition, the Button is imported from a private NPM package. If the repository and packages were public, probably someone would create definitions and add them in the DefinitelyTyped repository.

Going back to the initial question of this post: is it possible to dynamically create TypeScript definitions for a React component library that doesn't use TypeScript at all? YES!

The solution

I am using the react-to-typescript-definitions package to create definitions from the compiled files. The tool can map most PropTypes (any, array, bool, func, number, object, string, node, element, oneOfType, arrayOf, symbol, shape) and identify the required ones. The package partially support oneOf PropType and can even re-use your comments.

You can create definitions from the command line or import the functionality into a script with this tool. Here is one example:

import { generateFromFile } from "react-to-typescript-definitions";

generateFromFile(null, "Button.js", {}, "react");

The function generateFromFile will return something like:

export type ButtonAppearance = "primary" | "secondary";

export interface ButtonProps {
    // All other props
    [x:string]: any;
    /**
     * Type of the button
     */
    appearance?: ButtonAppearance;
    /**
     * Content for the button
     */
    children: React.ReactNode;
}

export const Button: React.FC<ButtonProps>;

A few highlights:

The tool reused the comments ("Type of the button", "Content for the button") from the original component;
The tool identified appearance as optional and children as required props;
The tool created a variable with the possible values of appearance;

In real life

We have two options of usage of this package.

CLI

CLI can be helpful for one-off scenarios or for when you want to test things out. The example that I posted above could be created by running:

cat src/components/Button/Button.js | yarn --silent react2dts --top-level-module Button

Node module

Importing the package into your toolbox scripts gives you the flexibility to customize what needs definitions and define what to do with the data. Here is what I am doing:

I created a script that imports all components from my main index.js file (import * as componentLibrary from './src/index.js';). This index.js looks like this:

export { default as Avatar } from './components/Avatar';
export { default as Badge } from './components/Badge';
export { default as Button } from './components/Button';

For each of these components, I call the generateFromFile function:

import * as componentLibrary from './src/index.js';

let definitionsContent = '';
const components = Object.keys(componentLibrary);

components.forEach((component) => {
  if (
    typeof componentLibrary[component] === 'function' &&
    componentLibrary[component].filename !== undefined
  ) {
    const definitions = generateFromFile(
      null,
      componentLibrary[component].filename,
      {},
      'react'
    );

    definitionsContent = `${definitionsContent}${definitions}`;
  }
});

The definitionsContent variable might have some duplicated content, for example, multiple import * as React from 'react';. After cleaning this, I store the content of this variable in the dist/es/index.d.ts. Finally, in the package.json, I mention the location of the types:

{
  "module": "dist/es/index.js",
  "types": "dist/es/index.d.ts",
  "files": [
    "dist/*"
  ]
}

This script is executed in CI environmnent. When someone publishes a new version of the component library:

We build the package using rollup, saving the files in the dist folder;
We execute the script to create the TypeScript definitions;
We run npm publish (currently with Lerna)
We make release notes with Lerna

What do you think of this solution? Let me know in the comments.

Also posted on my blog. If you like this content, follow me on Twitter and GitHub.

Enfrentando a síndrome do impostor e problemas de gerenciamento de tempo

Leonardo Faria — Sat, 28 Nov 2020 02:21:21 +0000

This is the Portuguese version of the post Facing importor syndrome and time management issues that I wrote back on April. A few weeks after sharing my thoughts, Glaucio Oliveira translated the post and shared it on his Linkedin. Now, I am including the translation in my blog and here.

Frequentemente ouço pessoas falando sobre síndrome do impostor e problemas de gerenciamento de tempo. Às vezes ouço sobre esses problemas por parte de um amigo, um subordinado, e ocasionalmente de mim mesmo. Somos sempre desafiados por esses problemas, e eles podem afetar nosso ânimo, nossa capacidade de ser produtivo, e nosso julgamento.

Temos dias onde tudo funciona bem, e também temos dias ruins, onde tudo parece dar errado. Essa montanha-russa emocional pode nos fazer duvidar de nossas realizações e pode criar um medo persistente de sermos expostos como uma fraude.

Existem algumas coisas que você pode fazer para se lembrar de que você é incrível:

Mantenha um diário com registros de realizações: esse exercício diário treinará seu cérebro para se sentir mais confiante.
Foque em seus pontos fortes, especialmente quando você está em uma nova função no trabalho, use seus talentos naturais para agregar valor a sua função.
Busque vitórias rápidas, pois elas o ajudarão a construir uma reputação de alguém adepto de uma habilidade específica.

Problemas com gerenciamento de tempo também afetam nosso senso de ter o trabalho concluído. Às vezes, o problema começa no início, quando nos é atribuída uma tarefa que pode não fazer muito sentido. Vamos para por um momento e pensar nos níveis de incerteza de uma tarefa:

Bem esclarecido
Com algumas dúvidas
Entendido, porém não familiarizado com a abordagem
Conhece a área, mas não a direção
Pouco claro no geral

Como a incerteza afeta o gerenciamento do tempo? Se algo é bem compreendido, é muito improvável que você fique confuso e as coisas naturalmente tomarão o tempo inicialmente estimado. Começando a fase “com algumas dúvidas”, você precisa ter cuidado, pois a incerteza afetará tanto seu gerenciamento de tempo, quanto seu senso de conquistas. A boa notícia é que você sempre pode usar esse problema como uma oportunidade para melhorar.

Com algumas dúvidas: Encontre a melhor pessoa qualificada para responder suas perguntas. Se a descrição da tarefa não for clara o suficiente, vá até a pessoa que a criou. Se a questão é técnica, fale com um desenvolvedor da equipe que pode ajudá-lo.
Entendido, porém não familiarizado com a abordagem: Se você entendeu o panorama geral, mas não está confiante com a abordagem, fale com outro desenvolvedor e peça ajuda. Essa é uma boa oportunidade para “programação em par”.
Conhece a área, mas não a direção: Essa é uma boa oportunidade para conversar com outra pessoa desenvolvedora e ouvir seus pensamentos iniciais. Elas podem ter uma opinião de como começar a atividade, ou serão capazes de sugerir boas referências para consultar.
Pouco claro: Se o problema na atividade não está claro, esclareça. Se a abordagem técnica não está clara, converse com outras pessoas desenvolvedores, considere ter uma sessão de programação em par, e fale com outras pessoas de sua equipe para entender sua abordagem nesse trabalho.

Em geral, síndrome do impostor é algo que todos veremos em algum momento de nossas carreiras. É algo que já lidei, mas acho que enfrentar essa luta oferece uma excelente oportunidade para refletir sobre minhas habilidades e descobrir novas áreas de potencial aprendizado. Com essas sugestões em mente, espero que você consiga melhorar seu senso de confiança e auto-eficácia em sua vida profissional.

Photo credit: roller coaster (Pixalbay)

Using Flexbox and text ellipsis together

Leonardo Faria — Mon, 03 Aug 2020 18:49:13 +0000

Another day I was asked to build a table containing a list of files uploaded by the users. Imagine a table similar to the list of files in Finder:

The second item of the table is mobile-phone-screenshot-long-fine-name.png, however the column is not big enough to show the complete filename. Instead, we see mobile-phone-sc...g-fine-name.png. In this project, we decided to cut part of the end of the filename and keeping the extension, as shown above:

HTML markup:

<div class="filename">
  <span class="filename__base">this-file-has-a-really-really-really-long-filename.</span>
  <span class="filename__extension">pdf</span>
</div>

CSS:

.filename {
  display: flex;
  min-width: 0;
}

.filename__base {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.filename__extension {
  flex-shrink: 0;
}

The ellipsis effect can be done by combining text-overflow, white-space and overflow properties, however, we still need to figure out the relation between the filename base and its parent, which also contains the file extension.

The trick is using the property min-width, as covered in this pen by AJ Foster and CSS Tricks. From the Flexbox spec:

Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties. The keyword was previously defined in this specification, but is now defined in the CSS Sizing module.

...

In general, the content-based minimum size of a flex item is the smaller of its content size suggestion and its specified size suggestion.

By using min-width: 0, we are changing the minimum size of the flexbox container, which will resize the child elements of the container that don't use the flex-shrink attribute. Since the filename base element has the text-overflow, white-space and overflow properties, the ellipsis will be rendered properly.

The full example is available in this Codepen:

Also posted on my blog. If you like this content, follow me on Twitter and GitHub.

Creating your own ESLint config package

Leonardo Faria — Wed, 17 Jun 2020 04:01:39 +0000

ESLint is a powerful tool to enforce consistent coding conventions and ensure quality in your JavaScript codebase. Coding conventions are sometimes difficult to decide and having a tool to automate enforcement is great to avoid unnecessary discussions. Ensuring quality is also a welcoming feature: linters are excellent tools for catching bugs, such as those related to variable scope.

ESLint is designed to be completely configurable, giving you the option of enabling/disabling each rule, or mixing the rules to match your needs. With this in mind, the JavaScript community and companies who use JavaScript can extend the original ESLint config. There are several examples in the npm registry: eslint-config-airbnb is one of the most famous.

In your daily basis, you will probably combine more than one config, since there is no one-config-fits-all. This post will show how to create your repository of configurations, giving you the option to centralize all your rule definitions.

The first step is creating a new folder and creating an npm project. By convention, the module name begins with eslint-config-, such as eslint-config-test.

mkdir eslint-config-test
cd eslint-config-test
npm init

You will have a package.json file that will look like the following snippet:

{
  "name": "eslint-config-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Next, time to add your ESLint dependencies:

npm install -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-import eslint-plugin-jsx eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

The packages will change according to your needs. In this case, I work with React codebases and I use Prettier to format my code. The documentation mentions that if your shareable config depends on a plugin, you should also specify it as a peerDependency.

Next, I will create a .eslintrc.js with my configuration - this is similar to what you already do in your apps:

module.exports = {
  extends: [
    'airbnb',
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:prettier/recommended',
    'prettier/react',
  ],
  plugins: [
    'react-hooks',
  ],
  rules: {
  },
};

The rules object stores any rule that you want to override. In the snippet above rules is empty but feel free to check my overrides. In the airbnb/javascript repository you can find a list of overridden rules by the community.

Time to create a .prettierrc with your custom rules - this is a tricky part since Prettier and ESLint can conflict in a few rules:

{
  "tabWidth": 2
}

It is important to mention that the .prettierrc file should live in the root of the project that is using your package. Right now, I am manually copying it. Next step is exporting your config in the index.js file:

const eslintrc = require('./.eslintrc.js');

module.exports = eslintrc;

It is technically possible to create all configuration in the index.js file however you wouldn't get the config object linted (insert your Inception joke here).

Voilà! That's all you need to start your own package of configurations. You can test locally your config package by running, in a JavaScript project:

npm install /Users/leonardo/path/to/eslint-config-test

Keep in mind that the dependencies of your configuration package may also be installed.

If everything looks fine, you can publish to the npm registry:

npm publish

Full example

I have a functional GitHub project showing the setup of this post: eslint-config-leozera.

More about it

Configuring ESLint: official ESLint docs. You know, read the docs
How to publish your first NPM package: quoting the post subtitle", everything you need to know to create a NPM package"
eslint-config-wesbos: a project by Wes Bos that help me doing this work

Also posted on my blog. If you like this content, follow me on Twitter and GitHub.

Using HAR files to analyze performance over time

Leonardo Faria — Mon, 08 Jun 2020 16:34:41 +0000

When I consider the performance of a website, the first things that come to mind are; looking at the requests of a page, understanding what resources are being loaded, and how long these resources take to be available to users.

The network tab will give you a table containing all assets loaded on the page, as well as relevant information about their origin (domain, HTTP status code, size), who initiated the request, and the order in which they were loaded in a waterfall representation. You can add more information to this table by right-clicking one of the table headers and choosing other columns.

The size, time and waterfall columns will be crucial to understanding the performance of a page. The size value will present the gzipped size of the resource (when applicable), while the time column shows the total duration from the start of the request to the receipt of the final byte in the response. Last, but not least, the waterfall column demonstrates when the asset is loaded along with the other requests.

Performance improvements are noticeable by changes in your code/environment. So how do we keep track of what is being analyzed by the Network tab? By exporting the page in HAR format.

What is a HAR file?

A HAR (short for HTTP Archive) file is a JSON file containing all information about a browser's interactions with a page. It will contain the HTML document and its respective JS and CSS files. Along with this content, a HAR file will also contain all headers' information and the browser metadata (i.e. the time of each request).

It is important to mention here that cookies and form data will also be logged in the file, so be careful to not include sensitive information (personal details, passwords, credit card numbers) while auditing pages. Also, it is preferable to audit pages in private windows, which avoids browsers' extensions. It is invaluable to avoid a browser's extensions since they may modify the loading times of a page.

Generating HAR files

Google Chrome

Close all incognito windows in Google Chrome.
Open a new incognito window in Google Chrome.
Go to View > Developer > Developers Tools.
In the Developer Tools panel, choose the Network tab.
Check the Preserve Log and Disable cache checkboxes to record all interactions.
Refresh the page.
Click the Export HAR (down arrow icon) to export the HAR file.
Save the HAR file.

Firefox

Close all private windows in Firefox.
Open a new private window in Firefox.
Go to Tools > Developer > Network or ctrl-shift-E.
Refresh the page.
In the Cog icon (upper right side of the page), choose Save All As Har.
Save the HAR file.

Safari

Ensure that Show Develop menu in menu bar checkbox is checked under Safari > Preferences > Advanced.
Choose File > Open New Private Window.
Visit the web page where the issue occurs.
Choose Develop > Show Web Inspector. The Web Inspector window appears.
Refresh the page.
Click Export on the upper right side of the pane.
Save the HAR file.

Reading HAR files

Once you have a HAR file, you can try a few HAR viewers online. My personal favourite is the one created by Jan Odavarko.

What I like about this viewer in particular is the fact you can have multiple files open at the same time, which makes it easier to compare them.

Using HAR files to analyze the performance of a page

HAR files can be useful to collect information about the assets of a page. Since you have detailed information about their content, you can compare what has improved (or in some cases, not improved) after a new feature is launched or a redesign is completed, for example. During my workflow, I like to keep track of the final size/time values of a few pages of the product that I am working on.

More information

Also posted on my blog. If you like this content, follow me on Twitter and GitHub. Cover photo by William Daigneault/Unsplash

The Mentoring Framework

Leonardo Faria — Mon, 01 Jun 2020 15:42:35 +0000

Last October I created a Mentoring Framework at work. The goal was creating a project from scratch using Ruby on Rails and in this journey, learning more about Ruby, Frontend, Project Management and Git, Databases and DevOps.

This Mentoring Framework is similar to what bootcamps do but the difference here is I am sharing a list of suggested features / things to learn and the person can focus in what is important for them.

In a nutshell: Goals → Project → Execution → Knowledge (and profit)

The document is divided into 4 main sections: Before start, Project ideas, Execution, Examples and Resources.

Before start

What are your main goals? For the following list, pick: "basic understanding", "intermediate understanding", "advanced understanding". This will help to identify where you are going to invest more time and energy.

Learn Ruby / Ruby on Rails
Learn Frontend
Learn Project Management and Git
Learn Databases
Learn DevOps

Project ideas

Once you know your main goals, you need a project. Check the following two ideas:

Book store

Imagine you want to sell books online. What kind of features does a bookstore have?

List books per title
List books per authors
List books per categories
Search books
Buy books
List your orders

Pet adoption website

Imagine you want to create a website for an organisation that takes care of animals (in British Columbia we have SPCA). What kind of features does a pet adoption website have?

List pets per type (dog, cat and others)
List pets per size (or breed, or age)
List pets per location
Search pet per name
Request an adoption
List your adoption requests

Execution

Once you know your main goals and you have an idea, it is time to work. Check the list of tasks you will be doing:

Learn Ruby on Rails

Use scaffolds to create your entities (basic understanding) or create your own controllers, models and views (intermediate)
Add authentication with Devise (basic understanding) or create your own (intermediate). Or use Devise with Oauth authentication (Facebook, Google, etc - intermediate)
Add friendly URLs with a gem (basic) or create your own solution (intermediate)
Add search (intermediate)
Add tests for all your code
Create seeds for your data so you don't need to create manually data
Send email to users (intermediate)
Create different user roles (intermediate)
Add pagination (basic)
Add localization (intermediate)
Add a tag system (intermediate)
Add images (intermediate)

Learn Frontend

Use Tailwind CSS (basic) or your own CSS/SASS (intermediate) to create a beautiful layout
Use Turbolinks (advanced / optional)
Add basic animations - ex.: when adding a book in the cart show some animation (advanced/optional)
Add Google Maps in your app (intermediate)
Add Google Places in your users
Add a carousel with photos
Add Pagination with Ajax or endless pagination (advanced)

Learn Project Management and Git

Use Github Project to organize your features
Use feature branches in Git, create PR for all your features

Learn Databases

Write plain SQL to find relevant information. A few examples:
- Find best-sellers authors in the book store
- Find the number of orders or pet requests per city
- Find which day has more sales
Add charts in your app to expose the data

Learn DevOps

Deploy the website to Heroku (easy/intermediate) or AWS (advanced)
Setup CI in Heroku (easy/intermediate)
Add Airbrake to monitor errors in your app (easy)
Buy a domain, set up Cloudflare (advanced/optional)

Examples

Resources

Courses: Ruby on Rails 5 Essential Training and Ruby on Rails 6 Essential Training - The first course is longer than the second.
Screencasts: RubyTapas, GoRails

Also posted on my blog. If you like this content, follow me on Twitter and GitHub. Cover photo by Maxwell Nelson at Unsplash

Using Dependabot to keep your environment up to date

Leonardo Faria — Sat, 02 May 2020 14:41:56 +0000

Adding dependencies in a project is seen as a good way to not reinvent the wheel but at the same time it can be concerning in many different aspects:

Versioning: sometimes dependencies can require specific versions of other dependencies and this can cause hiccups in your app;
Bundling: you need to be careful here to not bring extra code that will bloat your bundles;
Updating: JavaScript moves fast and if you don't update packages regularly, you'll play Jenga in the future.

There are different tools to cover the update part like Dependencies.io, Snyk and Dependabot. Since I have been using Dependabot for a while, I decided to write about my experience.

Dependabot is a tool acquired by GitHub one year ago that checks dependencies files from different languages (Ruby, JavaScript, Python, PHP, Elixir, to name a few) and finds new versions of libraries you are using in your project. Here is the setup:

Daily updates can be overwhelming and I think that weekly updates have a better cost/benefit. Also, I assign myself the Pull Requests so I can get notifications as soon they are opened.

How to use Dependabot effectively

Dependabot includes in each PR release notes, changelogs, commits links and vulnerability details whenever available. This is useful because you can take a look at the information and decide to proceed or not.

However, as pragmatic programmers, we want to ensure things won't break. The PR details are important but more than that, we want a simulation of all (or almost all) deliverables that the project has.

This screenshot shows what happens every time a PR is opened in the components library codebase of my work.

Tests (Jest / Bundle): the Jest task will test the React components while the Bundle task will simulate the bundling commands we run when we want to update the package in the NPM registry;
Linters (Stylesheets / JavaScript): the stylesheet files follow a custom sass-lint setup and the JS code follows a series of ESLint rules. If a PR introduces a new version of a linter with new rules we will be able to capture that;
Cypress (Screenshot Testing / Accessibility Testing): if a new package introduces changes that may reflect in the look and feel of components, Cypress will capture the difference, screenshot it and store in S3. Since Cypress needs a live version of the documentation website, we also get the Gatsby build process covered.

With all these steps, it is very unlikely an external package will break our master branch. Kudos to my co-worker Grant Lee that also works in this project.

Also posted on my blog. If you like this content, follow me on Twitter and GitHub.

Facing impostor syndrome and time management issues

Leonardo Faria — Sun, 26 Apr 2020 15:28:33 +0000

I often hear people talking about impostor syndrome and time management issues. Sometimes I hear about these issues from a friend, a direct report, and occasionally from myself. We are always challenged by them and they can affect our mood, our ability to be productive and our judgement.

We have days where everything works great and also we have bad days, where everything seems to go wrong. This emotional roller coaster can make us doubt our accomplishments and can create a persistent fear of being exposed as a fraud.

There a few things that you can do to remember that you are great:

Keep a daily journal with notes of achievements: this daily exercise will train your brain to feel more confident;
Focus on your strengths, especially when you are new in a role at work, use your natural strengths to add value to your position;
Find quick wins, they will help you build a reputation of someone adept in a particular skill.

Issues with time management also impact our feeling of getting the job done. Sometimes the problem starts early on when we are assigned a task that may not make much sense. Let's step back for a moment and think about the levels of uncertainty of a task:

Well understood
Have a few questions
Understood, but unfamiliar with the approach
Know the area, but not the direction
General unclear

How does uncertainty affect time management? If something is Well understood, it is very unlikely you will get lost in the woods and things will take as long as expected. Starting with the level of Have a few questions, you need to be careful because the uncertainty will affect your time management and your sense of achievement. Good news is, you can always use this problem as an opportunity to improve.

Have a few questions: Find the best person to answer your question. If the description is unclear, go to the person who created that task. If the question is technical, talk to a developer on the team that can help you;
Understood, but unfamiliar with the approach: If you understand the big picture but you are not confident with the approach, talk to another developer and ask for help. This is a good opportunity for pair programming;
Know the area, but not the direction: This is a good opportunity to talk to another developer and hear their initial thoughts. They may have an opinion on how to get the task started or be able to suggest a good resource to review;
General unclear: If the problem in the task is generally unclear, ask for clarification. If the technical approach is unclear, talk to other developers, think about having a pair programming session, and speak with other members of your team to understand how they approach their work.

Overall, facing imposter syndrome is something that we all face at some point in our careers. It is an issue that I have certainly struggled with but find that facing these struggles provides an excellent opportunity for me to reflect on my skills and discover new areas of potential learning. With these suggestions in mind, I hope that you are able to improve your sense of confidence and self-efficacy in your professional life.

Also posted on my blog. If you like this content, follow me on Twitter and GitHub. Photo credit: roller coaster (Pixalbay)

Exploring device detection for better user experiences in 2020

Leonardo Faria — Wed, 15 Jan 2020 05:16:54 +0000

A few months ago I watched a great talk in Chrome Dev Summit about performance in slow devices.

It blew my mind all the work done by Facebook in identifying devices to create a better user experience. Fast-forward to now, I decided to study a bit more the topic and see what I could do at Thinkific (the company I work for and it is hiring for several positions).

User agents

User agents are well-known by developers. We use them to detect bots, redirect users to a specific version of our website or append CSS classes on our page so we can create different experiences.

At Thinkific we already use the browser Ruby gem to parse the user-agent and get relevant info (bot detection for instance). So, I decided to persist the main info in a visitor_device table – here is the schema:

tenant_id: the course creator school the visitor is checking
raw: the raw ua
type: desktop / mobile / tablet / bot / other
browser_name
browser_version
platform_name
platform_version
hardware: hstore containing memory, processor, device_model, device_name
connection: hstore containing downlink_max, connection_type

You probably noticed that a few things there are not available in the UA string. Time for new JavaScript APIs:

Getting hardware info using JavaScript

As covered in the Chrome Dev Summit video, we can use JS to get this info

Memory

navigator.deviceMemory will return a floating-point number. There are things to consider here:

It only works over HTTPS
Support is quite limited (Chrome only basically)

More about it:

Processors

navigator.hardwareConcurrency will return the number of logical cores of the user’s CPU. Support for this is decent.

Detecting connection info using JavaScript

navigator.connection is a new API containing information about the system’s connection, such as the current bandwidth of the user’s device or whether the connection is metered. The support is quite limited (Chrome only basically) but things are promising.

More about it:

Detecting the device model

The user agent may return some information about the model name. userstack is a service that gives you information based on the user agent. It works well and it is easy to integrate, however, depending on your need, they can’t help.

Take for instance iDevices. Their user agent is basically the same so you can’t differentiate an iPad Pro from an old iPad that runs the last iOS. For these cases, you may need a better detection based on resolution, pixel density and other hardware information exposed in the browser. I did a quick research on this and found 3 products so far: WURFL.io, DeviceAtlas and 51Degrees. I didn’t have time to try their products yet, but I am looking forward to doing it (and post about it)

FAQ

Question: Why not using Google Analytics / Mixpanel / Kibana / New Relic / your tool here?

We could get browser info inside other tools however as a SaaS product we don’t use our own Google Analytics property (customers add their own). Also, adblockers may block these third-party tools. Last not least, by having this info in our side we can adapter better.

Question: Do you have a list of low-end/high-end devices?

No. Maybe this can be built combining the number of processors and memory but I didn’t invest much time on this. In this project, my colleague created a Rails helper that would determinate if the user would use the lite or default version of a website based on hardware. On this topic, it is important to mention Facebook has a library for Android called Device Year Class.

The post Exploring device detection for better user experiences in 2020 appeared first on leonardofaria.net.

A simple Sinatra Auth

Leonardo Faria — Mon, 04 Nov 2019 04:40:07 +0000

Imagine you want to protect the content of a website created with Next.js, Hugo or your favourite static site generator. Github doesn’t offer this feature or Netlify offers authentication only in their paid plans. Decided to create something simple with Sinatra, TailwindCSS and ready to go in Heroku.

Also posted on my blog. Follow me on Twitter

Creating a website for my Apple Collection

Leonardo Faria — Thu, 17 Oct 2019 03:36:30 +0000

Also posted on my blog

A while ago I started an Apple Collection. After a few laptops and a few iDevices, I decided that I should start collecting info about my iThings. In the beginning, I created a gist containing model, serial number, how did I get the device, minimum/maximum OS, etc.

The list kept going bigger and bigger and the content started looking messy. The natural way to organize my data would be inside a SQL database, with the information distributed in columns. After organizing the information in tables, I would create a graphQL API (the one cool kids use these days) to give me the data needed to populate my UI – probably written in React, compiled with Babel and packed with webpack.

Reading the previous paragraph aloud, you can hear many technologies and I even ignored the backend language and UI details like SASS or styled-components. It sounds a bit overwhelming when the ultimate goal is showing a list of items in a nice design.

That’s being said, I thought: how can I deliver this content without:

An API or any backend work
Any JS framework/library
Any JS tooling (webpack, babel, etc)
Any CSS work

On top of these constraints, I had a few stretch goals:

Create a website with good accessibility
Create a website that works in old browsers, since I have computers running Mac OS 9.2 and iDevices running iOS 3

Challenge accepted. One index.html, a few vanilla JS files, no custom CSS. TL,DR:

No API or any backend work

A while ago I saw a SaaS product called Stein. You create your data inside a Google Sheets document and they give you an endpoint with your data. Their library works like handlebars and it looks perfect for my use case:

<div data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1" data-stein-limit="2">
  <div>
    <h1>{{title}}</h1>
    <h6>By {{author}}</h6>

    {{content}}

    Read on <a href="{{link}}">Medium</a>
  </div>
</div>

No JS framework/library and tooling

Decided to avoid adding a framework or library in this project since the use case didn’t need one. All JS interactions on this page are quite simple (show/hide menus, open a modal screen, handle permalinks).

Since I was not using a framework/library, I would avoid adding webpack and babel. No need to dig into presets and loaders.

PS. You can argue that I’d have chosen create-react-app or Next.js and get all these problems solved, but no.

No CSS work

I love writing CSS, especially when I can use SASS but I decided to do not write CSS here. I had a few good reasons to avoid doing it:

I had no designs and despite I could do something decent-looking, I didn’t want to put time and energy on it;
I wanted to use Tailwind CSS.

If you never heard about Tailwind CSS, please don’t try to think “it is a Bootstrap option”. Here is a good short explanation, from their website:

Most CSS frameworks do too much.

…

Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

This is pretty much true. A quick search gives you many web apps “rebuilt” with Tailwind CSS:

Create a website with good accessibility

Last month I started taking accessibility courses at Deque University. Their content is great and it reminders me that HTML is accessible by default. By using a semantic HTML structure and testing basic things like keyboard navigation and colour contrast you eliminate several barries that move people with disabilities from your content. I am not an accessibility expert but here are a few accessibility-related things I’ve worked on this website:

Disable stylesheets: by disabling stylesheets you can ensure that your content follows a logical/structural way.
VoiceOver: VoiceOver is included in macOS and iOS. It is very simple to use it and by using it you can have a better understanding of how people use this feature.
Modals: modals can be problematic. Decided to follow Ire Aderinokun’s approach.
axe: the extension is an accessibility checker for WCAG 2 and Section 508 accessibility rules.

It is not perfect, there are a few things that I didn’t work it, like adding a skip link to the main content. If you are curious, here is the Pull Request with all the changes.

Create a website that works in old browsers

I couldn’t achieve this objective since I had no control over scripts and styles. However, it doesn’t seem to be impossible. A few things I noticed:

Expedite (Stein client) uses fetch, which was only added in Safari 10. The request to their server could be probably replaced for an XMLHttpRequest.
Tailwind uses flexbox in many elements. Safari only started supporting Flexbox in iOS 7. Maybe I could write a few properties to their existing elements to achieve a decent look.
SSL Certificates may be an issue to old browsers.

Conclusions

Making this website was super fun. The fact I added “constraints” to it made think outside the box. Out of curiosity, I tracked my time using Clockify and I’ve worked 13h on this, between coding, creating the data, testing and writing this post.

Forcing the usage of yarn (and at a specific version)

Leonardo Faria — Fri, 11 Oct 2019 03:40:46 +0000

Also published in my blog.

People and organizations often have preferences for a specific package manager. At work, we decided to use Yarn due to emoji support (jk) but how to keep everybody using Yarn?

We can use the preinstall hook to check if the user run npm installor yarn install. Here is one example:

"scripts": { 
  "preinstall": "node -e \"if(process.env.npm\_execpath.indexOf('yarn') === -1) throw new Error('You must use Yarn to install, not NPM')\"",
}

If you run npm install:

If you want to ignore the checking (CI environment for instance), use the --ignore-scripts option:

npm install --ignore-scripts

Moreover, you can use the engines option of NPM to force a specific version of Node, and/or Yarn. Here is an example:

"engines": { 
  "yarn": ">1.19.1", 
  "node": ">12"
},