Reduce your install time up to 70%. Ask me how! 😱

Image for post
Image for post

Anyone who knows me can confirm that I’m a long-standing lover of JavaScript and its entire ecosystem. As a Front-end engineer, Node-based package managers have been a crucial part of my toolset since 2013.

First, I used Bower, which was primarily focused on the front-end world. Then, in 2015, I sadly (ok, not really) realized that Bower was dying and NPM, the default package manager for Node, was the way to go for the front-end too. …


Time-saving techniques used by pros

Image for post
Image for post

1. Clearing or truncating an array

An easy way of clearing or truncating an array without reassigning it is by changing its length property value:

const arr = [11, 22, 33, 44, 55, 66];// truncanting
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// clearing
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

2. Simulating named parameters with object destructuring

Chances are high that you’re already using configuration objects when you need to pass a variable set of options to some function, like this:

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });function doSomething(config) {
const foo = config.foo !== undefined ? config.foo : 'Hi';
const bar = config.bar !== undefined ? config.bar : 'Yo!';
const baz = config.baz !== undefined ? config.baz : 13;
// ... …


Image for post
Image for post
This is how the output of our testing framework will look like

I promise, this is gonna be fun. =)

Probably, automated tests are part of your daily routine (if not, please stop reading this article and start from the beginning, by learning from the father of TDD himself). You’ve been using testing frameworks such as Node-tap (or Tape), Jasmine, Mocha or QUnit for quite a while, just accepting that they do some magic stuff and not asking too many questions about them. Or, if you’re like me, maybe you’re always curious about how things work, including testing frameworks, of course.

This article will guide you through the process of creating a JavaScript testing framework from scratch, with a pretty decent DSL and a nicely detailed output. This is the first article in my #LearnByDIY series. The idea is to demystify certain kinds of software that we’re used to, by creating simpler versions of them. …


Image for post
Image for post

Firstly, I want to say that for the next few weeks I’ll be a little busier than normal, so my Pen experiments and OSS contributions will decrease a little (or even pause completely) until at least the middle of April. I’ll try to post some technical articles in the meantime.

Maybe you already saw my CSS-pure version of the Super Mario World classic. If not, here’s the link to the article where I presented it. Today’s experiment certainly is not so nostalgic as Mario.css was, but I have to confess that the former was reasonably more complex than the latter. …


Image for post
Image for post
It’s me, Mario!

In this post, I’ll be brief. Allow me to get straight to the point.

This GIF on the left shows a short Super Mario World animation made purely with CSS. No embedded or external images were used. No JavaScript too. Only CSS (with Stylus as preprocessor) and this tiny HTML:

<main class="game">
<div class="game__background"></div>
<div class="game__foreground">
<div class="foreground__mario"></div>
<div class="foreground__ground"></div>
</div>
</main>

For comparison purposes, this is the original Super Mario World, for Super Nintendo:


Image for post
Image for post

Undoubtedly, a critical factor for the giant leap we’ve seen in CSS development was the advent of pre/post-processors. Back then, when wonderful tools like PostCSS (and its great variety of plugins), Stylus, Sass and others were presented to the world, they allowed us to write our stylesheets in a completely different way. Elegant – and easier – code reuse, structuring, modularity and cleaning (e.g. Autoprefixer) were a really sexy sales pitch for those poor souls having to deal with huge-messy-nonDRY-monolithic stylesheets everyday. Moreover, elements of structured programming, like loops, conditionals and subroutines brought a whole new range of possibilities.

In the meantime, CSS was definitely not idle. Over the last years, it has been evolving steadily and at a very fast pace. It was truly a wise choice from the CSS Working Group to split the specification up into separate modules which level independently. This way of working enables a constant stream of new features being delivered to the development community. Now, we have Flexbox, CSS Grid Layout and other killer features. One of them is CSS variables (a.k.a. Custom Properties). …


Image for post
Image for post
É sempre melhor pedir uma pizza assincronamente…

Para fins didáticos, vejamos dois exemplos do mundo real:

Exemplo 1) Eu vou a uma pizzaria, peço uma pizza para viagem no balcão e fico plantado lá, só esperando me entregarem o pedido para que eu possa ir embora.

Exemplo 2) Eu vou a uma pizzaria, peço uma pizza para viagem no balcão e, enquanto ela não fica pronta, dou uma passada na livraria ao lado para folhear a biografia de algum vlogger teen e tentar descobrir uma serventia para aquela obra se não como alternativa emergencial ao papel higiênico.

Se você conhece os conceitos básicos de assincronismo, é fácil compreender que o exemplo 1 é um caso típico de operação síncrona, pois minha vida parou completamente até que o pizzaiolo completasse seu trabalho. No exemplo 2, por outro lado, resolvi aproveitar meu precioso tempo ocioso degustando alguma pérola literária repleta de vazio. …

About

Alcides Queiroz

JavaScript hacker, front-end engineer and F/OSS lover. ☞ github.com/alcidesqueiroz ☜ ☞ alcidesqueiroz.com ☜ ☞ twitter.com/alcidesqueiroz

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store