Search
Making Web Components for Different Contexts
2.5.2019
This article isn’t about how to build web components. Caleb Williams already wrote a comprehensive guide about that recently. Let’s talk about how to work with them, what to consider when making them, and how to embrace them in your projects.
If you are new to web components, Caleb’s guide is...
Easily Turn Your Photos into Vectors with Photo Vectorizer
2.5.2019
(This is a sponsored post.)
Photo Vectorizer is a simple-to-use Photoshop action that can convert any photo into a vector. With just a few clicks of your mouse, you can save tons of time and frustration by turning your photos into vectors. With super sharp results, these vectors are great for...
Naming things to improve accessibility
2.5.2019
I like the this wrap-up statement from Hidde de Vries:
In modern browsers, our markup becomes an accessibility tree that ultimately informs what our interface looks like to assistive technologies. It doesn’t matter as much whether you’ve written this markup:
in a .html file
in Twig, Handlebars...
The Many Ways of Getting Data Into Charts
1.5.2019
Data is available everywhere nowadays, whether it’s in a plain text file, a REST API, an online Google sheet… you name it! It’s that variety of context that makes building graphs more than simply having a database in your local project — where there is data, there is a way.
That’s pretty much what...
Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!
29.4.2019
Oh, the Many Ways to Make Triangular Breadcrumb Ribbons
Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might see in a hierarchical breadcrumb navigation.
You’ve probably seen this pattern a lot....
create-react-app v3, What's new?
29.4.2019
When you're looking to setup your React developer environment, create-react-app is one of the go to ways to go about it. This package allows you to do so with minimal configuration as
Interviewing for a Technical Position Doesn’t Have to Be Scary
26.4.2019
Jacob Schatz (@jakecodes) is a staff engineer over at GitLab and was kind enough to share how he conducts job interviews for technical positions and his thinking process for them. Technical interviews are talked about often and can be a touchy subject for some, so it’s worth noting that this...
Using Parcel as a Bundler for React Applications
25.4.2019
You may already be familiar with webpack for asset management on projects. However, there’s another cool tool out there called Parcel, which is comparable to webpack in that it helps with hassle-free asset bundling. Where Parcel really shines is that it requires zero configuration to get up...
Moving from Gulp to Parcel
25.4.2019
Ben Frain just made some notes about the switch from Gulp to Parcel, a relatively new "web application bundler" which, from a quick look at things, is similar to webpack but without all the hassle of setting things up. One of the things I’ve always disliked about webpack is that you kinda have...
An Introduction To Storybook: Organize How You Build JS Components
24.4.2019
What is Storybook?
Storybook is an open source tool for developing UI components in isolation and it integrates pretty well with most front end fram
The Circle of a React Lifecycle
23.4.2019
A React component goes through different phases as it lives in an application, though it might not be evident that anything is happening behind the scenes.
Those phases are:
mounting
updating
unmounting
error handling
There are methods in each of these phases that make it possible to perform...
Netlify Functions for Sending Emails
23.4.2019
Let's say you're rocking a JAMstack-style site (no server-side languages in use), but you want to do something rather dynamic like send an email. Not a problem! That's the whole point of JAMstack. It's not just static hosting. It's that plus doing anything else you wanna do through JavaScript...
Add Authentication and Personalization to VuePress
23.4.2019
There are several advantages to using a static site generator such as VuePress. With VuePress, you can focus on writing content using markdown, and the VuePress application generates static HTML fi
Could Grouping HTML Classes Make Them More Readable?
22.4.2019
You can have multiple classes on an HTML element:
<div class="module p-2"></div>
Nothing incorrect or invalid there at all. It has two classes. In CSS, both of these will apply:
.module { }
.p-2 { }
const div...
So, You Wanna Submit a Proposal to Speak at an Event
22.4.2019
You’ve been scouring the web for upcoming events. You’ve subscribed to Developer Avocados and you’ve bookmarked conferences.css-tricks.com. And now you’ve found a call for proposals (CFP) that you can’t wait to enter. You quickly fill out the online form and your pinky races towards the Enter...
Tabs: It’s Complicated™
19.4.2019
I've said before one quick and powerful thing you can learn as a front-end developer just getting starting with JavaScript is changing classes.
const button = document.querySelector(".my-button");
const element = document.querySelector(".content");
button.addEventListener("click", function()...
Remove Recent Applications from Dock
19.4.2019
A Mac user’s dock is a sacred place. We customize our dock to no end, and if you’re ultra organized like me, you even use dock separators to group your app icons. Apple recently implemented a feature which displays three recently used apps in the dock. For basic users that’s...
Faking env() to Use it Now
18.4.2019
There is already an env() function in CSS, but it kinda came out of nowhere as an Apple thing for dealing with "The Notch" but it has made it's way to be a draft spec. The point will be for UAs or authors to declare variables that cannot be changed. Global const for CSS, sorta.
That spec doesn't...
An Event Apart Boston is Coming. Save Now!
18.4.2019
(This is a sponsored post.)
An Event Apart Boston is almost here! We're talking, like, less than a month away. If you've been holding off from registering, this might be your last chance because time and seating are both limited. Besides, we're talking about three days of pure knowledge-dropping...
Wrap a Vanilla JavaScript Package for Use in React
17.4.2019
Complex web projects often require the use of 3rd party widgets. But what if you're using a framework while a widget is only available in pure JavaScript?
To use a JavaScript w