Jeremy Wagner measured some performance differences between React and vanilla JavaScript. While I’m not surprised that running your code on bare metal code is faster than a framework, it’s interesting to see some exact numbers.

React and ReactDOM total about 120 KiB of minified JavaScript, which definitely contributes to slow startup time. When client-side rendering in React is relied upon entirely, it churns. Even if you render components on the server and hydrate them on the client, it still churns because component hydration is computationally expensive.

If it sounds like I have a grudge against React, then I must confess that I really like its componentization model. It makes organizing code easier. I think JSX is great. Server rendering is also cool—even if that’s just how we say “send HTML over the network” these days.

Even with server-side rendering, React and other virtual DOM frameworks add loading time because they need to load more code and hydrate the page before it’s interactive.

A vanilla addEventListener callback performs about 40 times faster (!) than an event handled in a React component. React’s overhead worth when you have a lot of complex state, not “simple state” like menu toggles.

Read the full article on CSS-Tricks.

If you’ve dealt with dates in the browser, chances are you’ve used Moment.js. Moment has been the date library for JavaScript in the past years. In a humble prelude of the documentation, the Moment maintainers talk about the (near) deprecated status of the project.

Read more

If GitHub is your daily driver or you’ve contributed to open source at some point, you’ve probably seen the comparison screen before.

“Compare and review just about anything”

They’re not lying. You can compare a lot in there, but most of it isn’t available in the UI. Here are a few tricks you probably didn’t know about.

Read more

Rsync is a command line tool to copy files between different hosts.

Read more

Ever since Things 3 came along, it’s been my todo app of choice. Every now and then I check out the competition, but I always swing back.

Inspired by Stefan Zweifel’s post, here’s how I use Things on a daily basis.

Read more

I’ve been looking for a way to add captions to markdown images without falling back to raw HTML. It turns out Hugo supports this with render hooks.

Read more

When you need to set up a service in a Laravel app, service providers are generally the place to be. But, there’s one problem with service providers: they’re global. This usually doesn’t matter, but in multi-section apps this can be problematic.

Read more

Zipping is easy. Remembering zip’s arguments is hard.

Read more

As developers, we often talk about the importance of learning. Learning is so important to us, that it’s worth persuing ways to improve the way we learn.

One way to become a better learner is to master the reverse: unlearning. Not the ability to completely forget, but the ability to set something aside for a brief moment.

When we learn a new language, framework, or tool, it’s hard not to dismiss new ideas based on our existing opinions. It’s the mental baggage we carry along all day.

What we’ve established as antipatterns in tool X’s, might be shiny tool Y’s bread & butter. That doesn’t mean we should dismiss tool Y. Ideas on their own are rarely good or bad, they need to be evaluated in a certain context.

Read more

My colleague Brent wrote a food-for-thought post about two different kinds of programmers: builders & architects.

The first ones, the builders, are the programmers who get things done. […] On the other hand there are architects. They are concerned about sturdy and structurally sound code. […]

These two types of programmers seem like opposites. They themselves look at the other group and often think exactly that. They have a different way of handling the same problems. The other group’s solutions are so different, they can’t possibly be right, or so it seems.

Builders often find architects too rigid and conservative. They follow the rules for the sake of following them, without any practical benefit. Architects in turn, think of builders as careless, too focused on results, instead of thinking about long-term maintainability.

Different programmers aside, “build vs. architect” is the eternal internal conflict when I want to make decisions. Striking a balance between “getting things done” and “getting things right” is tough.

Read the entire, beautifully illustrated post on stitcher.io.

By Fred Hebert:

• if you make the build tool simple, it won’t handle all the weird edge cases that exist out there
• if you want to handle the weird edge cases, you need to deviate from whatever norm you wanted to establish
• if you want ease of use for common defaults, the rules for common defaults must be shared between the tool and the users, who shape their systems to fit the tool’s expectations
• if you allow configuration or scripting, you give the users a way to specify the rules that must be shared, so the tool fits their systems
• if you want to keep the tool simple, you have to force your users to only play within the parameters that fit this simplicity
• if your users’ use cases don’t map well to your simplicity, they will build shims around your tool to attain their objectives

The endless loop of software development. Complexity is why what starts out as “a lightweight alternative to X” often ends up as bloated as X. Greenfield projects allow you to not care about the edge cases for a while, but complexity always catches up.

Read the full article on ferd.ca.

Web browsers have a few functions that accept callback parameters. setTimeout and requestAnimationFrame are the first that come to mind.

If you need to do multiple calls to these functions in a row, you quickly end up in callback hell. Here’s a quick tip to flatten your code with async/await.

Read more

Now that we’ve built a dropdown list, lets add some transitions to create open & close animations.

Read more

Every now and then I do a quick checkup of a project’s npm dependencies. I like to keep them up to date by often doing small upgrades. It’s a lot less painful than doing large upgrades once a year.

One annoying part of this process is ensuring every dependency is on the latest major version. For example, if a project requires lint-staged@^8.0.0, yarn upgrade won’t upgrade it to lint-staged@^9.0.0 (luckily of course, it’s the behaviour I want during everyday development).

Today I learned about yarn upgrade --latest, which will upgrade all dependencies to the highest available version, despite the version constraints in your package.json file. lint-staged@^8.0.0 would happily upgrade to lint-staged@^9.0.0, even if it breaks semver boundaries.

Read more

Today I set up a static documentation site (built with Hugo) for internal use. Since it contains sensitive information, I wanted to add some sort of password protection.

We don’t need any dynamic user management for this, so I decided to store an encrypted password on the server with htpasswd and enable basic authentication with nginx.

Here’s how I set up basic HTTP authentication on a Laravel Forge provisioned Ubuntu server.

Read more