It’s nice to have event listeners for events on elements, but how do you listen for something like an attribute change?

Enter MutationObserver. One of its best qualities is enabling you the ability to watch data not otherwise capable of being “listened” to, like a traditional DOM event.

First, set up the function that will be called by MutationObserver. It takes just one argument: mutationsList. Each item in the list is what’s called a MutationRecord. The callback can do anything you want.

const mutationCallback = (mutationsList) => { for (const mutation of mutationsList) { if ( mutation.type !== "attributes" ||…


I hear you, I hear you.

Let’s say you’re feeling masochistic and want to add some ES2015+ goodness to your static Jekyll site. It’s your holiday break, and you felt like learning a thing. You know, for fun.

sigh

In all seriousness, Jekyll is a decent alternative if you’re tired of the SPA life and want to jump back into static site templating.

This little tutorial makes only one assumption: that you’re storing your static files in the assets folder. Feel free to use a different folder if it fits your setup.

Also, this should be compatible with pipeline-control gems…


Accounting for document direction can be frustrating. So, with the inspiration of my coworkers, I attempted to implement my own sass mixin to handle rtl formatting.

While some of the CSS spec greatly accounts for document direction (flexbox, for example), much of it (mostly the older bits) doesn’t.

This mixin searches a given property/value pair’s text for “left” or “right” and inverts them to “right” and “left”, respectively. For values, the mixin checks that it’s a string first. If not, the value is skipped and default is returned.

The utility utilizes Hugo Giraudel’s str-replace function, which is essentially the same…


Here’s a quick run-down of simple but easy methods to manipulate a web page using vanilla JavaScript. There are many more which are clearly outlined on pages like You May Not Need jQuery, but this should serve as a nice starting point on methods you are likely to use day-to-day.

Mandatory “smash that like button and subscribe” if you find this helpful. 😉

Get an element

  • document.querySelector(".my-element"): Returns an element instance to use other built-in methods against. Query with IDs using #my-element syntax, or with attributes using [my-element] syntax. Returns null if nothing is found.
  • document.querySelectorAll(".my-element"): Same as querySelector, but returns a NodeList…

Photo from freestocks.org on Unsplash

One of the more annoying parts of web development is supporting older browsers, and if web developers agree on one thing, it’s that you should be rewarding users for being in a modern browser. At least, I hope.

Typically this means not loading polyfills if you don’t need to. Unfortunately, a common approach is to load @babel/polyfill (or something similar) as part of your entry point. While this works, it doesn’t allow you to control why it shows up, only that it should.

I think this is wrong. It punishes users in modern, ES2015+ capable browsers by adding anywhere from…


Image uploaded by delfi de la Rua from Unsplash

UPDATE 6/30/2019: I didn’t previously make some points clear around when/how to use react-router-last-location in conjunction with react-router-dom, so I’ve added some more details below.

Preface: Although unrelated to this article, folks at Scribd have already shared some wonderful information about accessibility, varying from the anatomy of an accessible ebook reader to small code snippets that can vastly improve the accessibility of your website with pretty minimal effort. Check those out if you’re interested in learning more!

If you’re a front-end developer in today’s world, you’ve probably used the various JavaScript tooling available (React, Vue, Webpack, etc) to build a…


console.log( ) all the things.

George is a front-end developer and digital designer living in Oakland, California. He currently codes things as a front-end developer at Scribd. When he’s not in a text editor, he can be found long boarding, playing video games, or napping. Usually napping.


I’ve been watching a great YouTube channel lately, run by Mattias P Johansson (formerly at Spotify), called Fun Fun Function. A couple years ago, he made a video about the psychological safety of development teams, and it really struck home for me as a more junior developer trying to learn and grow into software.

In short, the psychological safety of a development team is the confidence in its team members to take risks, ask dumb questions, and work with one another empathically.

What’s more, the idea of psychological safety got me thinking about how we ingrain our thoughts and intentions…


There are a lot of great options and ways you can modularize your js applications these days, and one of my new favorites is bundling related components into their own single entry point using webpack. One of my coworkers has been working on something similar for a few months, so I decided to try it out in some of my own projects.

We’ve been calling these component groupings ‘packages’, or ‘libraries’. It conveniently solves the issue of importing components like so:

import Button from ‘../../../components/button/button’;
import Bio from '../../../components/bio/bio';

To something a bit more manageable:

import { Button, Bio }…


Let’s be real: work is maybe 20% of your job. What about the rest?

I think we all crave something at our place of work: to feel needed, fulfilled, valued, and recognized as a person and not as a cog in a larger machine.

It’s taken me a long time to see how the pieces should fit together for me, but now that I know my ideal work culture, I can’t help but ask myself, “Why on Earth didn’t I demand a higher standard before?”

It’s worth saying that when I say “standard,” I don’t mean amenities like food or snacks. I simply mean culture fit and treatment. …

George Treviranus

Learning to see. @gwtrev

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