Select Page

Category: Article


Frank Chimero published a new talk-turned-essay, Everything Easy is Hard Again. May we all be as wonderfully self-reflective and eloquent as Frank one day. There is a lot there, so please read it. Part of the theme is that web design and development has seemingly repetitive cycles that can kick even quite experienced people back down the ladder: I don’t feel much better at making [websites] after 20 years. My knowledge and skills develop a bit, then things change, and half of what I know becomes dead weight. This hardly happens with any of the other work I do....

Read More

The JavaScript Learning Landscape in 2018

Raise your hand if this sounds like you: You’ve been in the tech industry for a number of years, you know HTML and CSS inside-and-out, and you make a good living. But, you have a little voice in the back of your head that keeps whispering, “It’s time for something new, for the next step in your career. You need to learn programming.” Yep, same here. I’ve served in a variety of roles in the tech industry for close to a decade. I’ve written a bunch of articles on design, coding, HTML, and CSS. Hell, I’ve even written a...

Read More

Gotchas When Publishing Modules in npm and Bower

Bower and npm are de-facto the package managers of the web. I doubt there are many front-end developers out there who haven’t heard of them or used them to manage dependencies. Whilst many of us use them as consumers, one day you might decide to share a project of your own and become a contributor! This happened to me recently. I had the experience of publishing my open-source library on npm and Bower. Although their official docs were quite good, I still ended up struggling with three little known gotchas. I won’t focus on the basics in this post. You can always find and read about them. I’ll instead focus on the gotchas. Nowadays, it looks like even Bower tells people not to use Bower. However, in 2018, there are still many projects that depend on it. The state of JavaScript in 2017 survey shows that around 24% of surveyed developers still use Bower as a package manager. Therefore, I think it might take a little while before we see the end of Bower, which means it’s probably still worth supporting it to cover legacy-package-managed projects. I feel the pain of those of you working on a legacy project—that’s why I chose to publish my open source module there, too. My hope is that after this you’ll be one step ahead when you decide to share your code with...

Read More

CSS Basics: Using Multiple Backgrounds

With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both: body { background-color: red; background-image: url(pattern.png); } Here’s an example where I’m using an SVG image file as the background, embedded right in the CSS as a data URL. See the Pen background color and image together by Chris Coyier (@chriscoyier) on CodePen. That’s just a single image there, repeated, but we can actually set multiple background images if we want. We do that by separating the values with commas. body { background-image: url(image-one.jpg), url(image-two.jpg); } If we leave it like that, image-one.jpg will repeat and entirely cover image-two.jpg. But we can control them individually as well, with other background properties. body { background-image: url(image-one.jpg), url(image-two.jpg); background-position: top right, /* this positions the first image */ bottom left; /* this positions the second image */ background-repeat: no-repeat; /* this applies to both images */ } See how background-position also has comma-separated values? Those will apply individually to each image respectively. And then how background-repeat has only one value? We could have done two values in the same way, but by using just one value, it applies to both. Here’s an example using four separate images, one in each corner, offset by a smidge: See...

Read More

Web Animation Workshops Dates for 2018 Announced

“I’m getting a raise!” This was my favorite quote from last year’s Web Animation Workshops, as Val and I covered performance, tooling, and creating animations for SVG, CSS, JS and React. Now we’re gearing up for another round of Web Animation Workshops in 2018! But we’re only offering two workshops this time since both of us have moved away from full-time consulting. The aim of these workshops is to level up your animation skills in just two days and equip you with a full understanding of animation concepts without having to rely on copying and pasting code from other people in your web applications. These are the dates and locations: Chicago: March 19 – 20 Brighton, UK: July 9 – 10 We’re already out of early bird tickets for Chicago and space is limited, so grab yours quickly before they sell out. We’ll see you there! Direct Link to Article — Permalink Web Animation Workshops Dates for 2018 Announced is a post from CSS-Tricks...

Read More