Posts with the tag: javascript

Changing node versions automatically per directory

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

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

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

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)

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

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

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.

iPhone e Rails

O desenvolvimento de web apps para iPhone requer alguns cuidados especiais. Em nossas aplicações significa pensar em um layout para o gadget. Uma forma rápida de definir o layout para iPhone é através do código abaixo: Para quem quer conhecer o desenvolvimento de web apps para iPhone, vale conhecer os projetos jQTouch e iWebKit. O jQTouch é um plugin do jQuery com uma série de recursos de animação semelhantes ao do aparelho e possui inclusive a funcionalidade de Geo Location.

jQuery no Spotlight

Anteriormente eu postei sobre como integrar a documentação do Ruby e do Rails no dicionário do Mac OS, que automaticamente é indexado pelo Spotlight. A dica de hoje é copiar o ‘dicionário’ do jQuery para a pasta de dicionários do seu usuário (~/Library/Dictionaries) e curtir a documentação do jQuery dentro do Spotlight. PS.: existe também um aplicativo AIR com a API do jQuery. PS 2.: jPlanet é um agregador de conteúdo sobre jQuery.

Bookmarklet para ver propriedades dos elementos de uma página

O XRAY é um bookmarklet para Safari e família Mozilla que mostra as características de determinado elemento de uma página. Para quem usa Firefox, o XRAY lembra a função Inspect da extension Firebug. Recomendado! P.S.: do mesmo desenvolvedor do XRAY vem um guia bacaníssimo sobre CSS.