Search
I Don’t Hate Arrow Functions
19.3.2019
TL;DR Arrow functions are fine for certain usages, but they have so many variations that they need to be carefully controlled to not break down the readability of the code. While arrow functions clearly have a ubiquitous community consensus (though not unanimous support!), it turns...
Planning for Responsive Images
13.3.2019
The first time I made an image responsive, it was as simple as coding these four lines:
img {
max-width: 100%;
height auto; /* default */
}
Though that worked for me as a developer, it wasn’t the best for the audience. What happens if the the image in the src attribute is heavy? On high-end...
What Hooks Mean for Vue
4.2.2019
Not to be confused with Lifecycle Hooks, Hooks were introduced in React in v16.7.0-alpha, and a proof of concept was released for Vue a few days after. Even though it was proposed by React, it’s actually an important composition mechanism that has benefits across JavaScript framework ecosystems,...
Multiple Background Clip
30.1.2019
You know how you can have multiple backgrounds?
body {
background-image:
url(image-one.jpg),
url(image-two.jpg);
}
That's just background-image. You can set their position too, as you might expect. We'll shorthand it:
body {
background:
url(image-one.jpg) no-repeat top right,
...
Browser Diversity Commentary, Regarding the Edge News
6.12.2018
Still no word from the horse's mouth about the reported EdgeHTML demise, but I hear that's coming later today. The blog posts are starting to roll in about the possible impact of this though.
Andre Garzia: While we Blink, we loose the Web:
Even though Opera, Beaker and Brave are all doing very good...
Build a state management system with vanilla JavaScript
25.7.2018
Managing state is not a new thing in software, but it’s still relatively new for building software in JavaScript. Traditionally, we’d keep state within the DOM itself or even assign it to a global object in the window. Now though, we’re spoiled with choices for libraries and frameworks to help...
Finite State Machines with React
24.7.2018
As JavaScript applications on the web have grown more complex, so too has the complexity of dealing with state in those applications — state being the aggregate of all the data that an application needs to perform its function. Over the last several years, there has been a ton of great...
Empower Through Web Development
28.6.2018
As a person with a disability, I appreciate the web and modern-day computing for their many affordances. The web is a great place to work and share and connect. You can make a living, build your dream, and speak your mind.
It’s not easy, though. Beginners struggling with the box model often take...
Better rendering for variable fonts
26.6.2018
I was messing around with a variable font the other day and noticed this weird rendering issue in the latest version of Chrome where certain parts of letterforms were clipping into each other in a really weird way. Thankfully, though, Stephen Nixon has come to the rescue with a temporary hack...
Learning Gutenberg: React 101
23.5.2018
Although Gutenberg is put together with React, the code we’re writing to make custom blocks isn’t. It certainly resembles a React component though, so I think it’s useful to have a little play to get familiar with this sort of approach. There’s been a lot of reading in this series so far, so let’s...
Managing Heading Levels In Design Systems
3.5.2018
Heydon Pickering looks into how to give a React component a certain heading (like <h1>, <h2>, etc.) depending on its context and thereby ensure that the DOM is still perfectly accessible for screen readers. Why is using the right heading important though? Heydon writes in...
Radial Gradient Recipes
26.4.2018
Radial gradients are pretty dang cool. It's amazing we can paint the background of an element with them so easily. Easily is a relative term though. It's certainly easier than needing to create a graphic in third-party software to use as the background, and the syntax is highly learnable. But it's...
Native-Like Animations for Page Transitions on the Web
23.4.2018
Some of the most inspiring examples I’ve seen of front-end development have involved some sort of page transitions that look slick like they do in mobile apps. However, even though the imagination for these types of interactions seem to abound, their presence on actual sites that I visit do not....
Scroll to the Future
19.4.2018
This is an interesting read on the current state of scrollbars and how to control their behavior across operating systems and browsers. The post also highlights a bunch of stuff I didn’t know about, like Element.scrollIntoView() and the scroll-behavior CSS property.
My favorite part of all though?...
How to Optimize Node Requests with Simple Caching Strategies
29.3.2018
One of the things that affect how users interact with our applications is its speed. Even though some users generally have a poor connection, they are expecting some minimum level of speed when usi