Search
Breaking CSS Custom Properties out of :root Might Be a Good Idea
27.3.2019
CSS Custom Properties have been a hot topic for a while now, with tons of great articles about them, from great primers on how they work to creative tutorials to do some real magic with them. If you’ve read more than one or two articles on the topic, then I’m sure you’ve noticed that they start...
JavaScript Glossary: String lastIndexOf()
27.3.2019
Basics
The lastIndexOf() method returns the last position within a String object which an element can be found. The search starts from the last position of the String object.
JavaScript Glossary: String startsWith()
27.3.2019
Basics
The startsWith method takes a string parameter and checks if the calling string starts with the value provided. It returns a Boolean value, true
JavaScript Glossary: String toLowerCase()
26.3.2019
Basics
The toLowerCase() String method converts a string object to lower case. The return value of the method is the value of the calling string in lower case
JavaScript Glossary: String length
26.3.2019
Basics
The length property of the String object returns the number of code points in a string object. It indicates the length of the string
An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods
26.3.2019
Map, reduce, and filter are three very useful array methods in JavaScript that give developers a ton of power in a short amount of space. Let’s jump right into how you can leverage (and remember how to use!) these super handy methods.
Array.map()
Array.map() updates each individual value in...
Understanding Event Emitters
26.3.2019
Consider, a DOM Event:
const button = document.querySelector("button");
button.addEventListener("click", (event) => /* do something with the event */)
We added a listener to a button click. We’ve subscribed to an event being emitted and we fire a callback when it does. Every time we click that...
JavaScript Glossary: String indexOf()
25.3.2019
Basics
This method checks for the first appearance of a provided string argument within the calling string and returns the index. It returns -1 if the string argument can’t be
Set Commit Author with git or hg
24.3.2019
Knowing who authored a code patch is a sacred and important practice in the world of software engineering. Knowing the author gives the reviewer an idea of trust level, know who to ask questions about the patch, and gives credit to the genius of an important fix. There have been times when...
All About mailto: Links
22.3.2019
You can make a garden variety anchor link (<a>) open up a new email. Let's take a little journey into this feature. It's pretty easy to use, but as with anything web, there are lots of things to consider.
The basic functionality
<a href="mailto:someone@yoursite.com">Email...
Using <details> for Menus and Dialogs is an Interesting Idea
21.3.2019
One of the most empowering things you can learn as a new front-end developer who is starting to learn JavaScript is to change classes. If you can change classes, you can use your CSS skills to control a lot on a page. Toggle a class to one thing, style it this way, toggle to another class...
Blurred Borders in CSS
20.3.2019
Say we want to target an element and just visually blur the border of it. There is no simple, single built-in web platform feature we can reach for. But we can get it done with a little CSS trickery.
Here's what we're after:
The desired result.
Let's see how we can code this effect, how we...
Creating a Custom Element from Scratch
20.3.2019
In the last article, we got our hands dirty with Web Components by creating an HTML template that is in the document but not rendered until we need it.
Next up, we’re going to continue our quest to create a custom element version of the dialog component below which currently only uses...
JavaScript Glossary: String includes()
19.3.2019
Basics
The includes method checks a provided string against the calling String object, it returns true if the calling String object contains the provided string a
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...
Creating a Python Class Generator for VS Code
19.3.2019
My motto...when you have a problem, do something about. I hated stubbing out Python classes so I created an extension in Visual Studio Code to do it for me. In this article, let's walk through how
Schematics: A Plug-in System for JavaScript Projects
18.3.2019
Schematics is a tool from the Angular team that allows you to manipulate projects with code. You can create files, update existing files, and add dependencies to any project that has a packag
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...
The Ultimate Guide to JavaScript Algorithms: Implementing a Custom Filter
13.3.2019
In JavaScript, the .filter() function is often used to loop through an array and extract the elements that pass a certain condition specified in a callback function.
Ever wonder
Smooth Scrolling for Screencasts
13.3.2019
Let's say you wanted to scroll a web page from top to bottom programmatically. For example, you're recording a screencast and want a nice full-page scroll. You probably can't scroll it yourself because it'll be all uneven and jerky. Native JavaScript can do smooth scrolling. Here's a tiny snippet...