Posts with the tag: javascript

Automating accessibility tests with Cypress

Read in 6 minutes ·

In my previous post, I covered how to add screenshot testing in Cypress to ensure components unintentionally change over time. Now, I will share how to automate accessibility tests with Cypress. Why should we care about accessibility? Short answer: because it is the right thing to do. Long answer: an accessible web can help people with disabilities improve their lives. There are different kinds of disabilities, including auditory, cognitive, neurological, physical, speech and visual and our goal as product creators, engineers, designers is creating experiences that can include all people.

Adding screenshot testing with Cypress in your project

Read in 8 minutes ·

Developers are usually concerned about the quality of their code. There are different kinds of tests to avoid breaking code when a new feature is added in a project, however, what can be done to ensure that components don’t look different over time? In this post, you will learn how to use Cypress to capture parts of pages of a website and after that, you will integrate the testing tool in CI to ensure that in the future no one will bring unwanted changes in the project.

Creating your own ESLint config package

Read in 3 minutes ·

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.

Changing node versions automatically per directory

Read in 1 minute ·

Working in multiple Node projects sometimes means using different versions of Node. nvm is one popular solution for Linux, macOS and Windows WSL that handles multiple Node installations. One of its most unknown tricks is the deeper shell integration. Check the video: If you are using macOS Catalina, you are probably using ZSH as default shell. To make the magic happen, paste the following in ~/.zshrc file. # place this after nvm initialization!

Using Dependabot to keep your environment up to date

Read in 3 minutes ·

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.

Exploring device detection for better user experiences in 2020

Read in 3 minutes ·

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. 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.

Creating a website for my Apple Collection

Read in 5 minutes ·

Part of the collection

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.

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

Read in 1 minute ·

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')\"",

Disabling autofill in Chrome

Read in 3 minutes ·

Autofill in form elements is a very useful feature in browsers. Creating new accounts or shopping in an online store are examples of this feature saving us time.

However, the autofill feature can be a problem for SaaS products. Imagine that you want to edit the email address of one of your users. You hit edit in one screen and once you get a form with your user data Chrome will replace their email to your email. This is not a good user experience.

MDN has an article showing “How to turn off form autocompletion”. The solution is using the autocomplete attribute with an off value. This doesn’t work in Chrome.

Digging in Stackoverflow and Google results, I found a bug issued in 2015 about the topic. Here is the TL,DR (from March 2016):

Thoughts on building components libraries

Read in 4 minutes ·

A few months ago we started using React at Thinkific. One of the challenges of using React is creating reusable components not only from a look and feel perspective but also shareable in different projects.

I didn’t create this concept of elements (or components) library. To be honest, there are podcasts, courses, and examples everywhere about it but how to even start it? When you start creating a project from scratch you face several questions:

  • How to style components? Sass? Stylus? styled-components?
  • How to show the elements?
  • How to build the library? Babel? Webpack?
  • How to publish the library? To NPM or not NPM?
  • How to use integrations and CI in your favour?

Lots of decisions and you may not know all the answers. Startup Life™ doesn’t let you do whatever you want – everything has a cost and a trade-off. Why am I talking all this story? Because I wanted to share my thoughts about it and I created a repository to document what we are doing.