Select Page

Category: Article

A Funny Thing Happened on the Way to the JavaScript

Around this time last year, I wrote an article about the JavaScript learning landscape. Within that article, you’ll find my grand plans to learn JavaScript — complete with a link to a CodePen Collection I started for tracking my progress, and it even got dozens of comments cheering me on. Like most people, I was ambitious. It was a new year and I was excited to tackle a long-standing project. It was my development version of losing 30 pounds (which I also need to do). But, if you follow that link to the CodePen Collection, you’ll see that there’s...

Read More

Where Do You Nest Your Sass Breakpoints?

I love nesting my @media query breakpoints. It’s perhaps the most important feature of Sass to me. Maybe I pick a method and do it like this: .element { display: grid; grid-template-columns: 100px 1fr; @include breakpoint(baby-bear) { display: block; } } That’s straightforward enough. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I’m never quite sure which one I should be doing. I could duplicate the breakpoint for each child: .parent { @include breakpoint(desktop) { } .child { @include breakpoint(desktop) { } } .child-2 { @include breakpoint(desktop) { } } } The compiled CSS comes out to something like this: @media screen and (min-width: 700px) { .parent { } } @media screen and (min-width: 700px) { .parent .child { } } @media screen and (min-width: 700px) { .parent .child-2 { } } Or, I could duplicate the children under the first nested breakpoint: .parent { @include breakpoint(desktop) { .child { } .child-2 { } } .child { } .child-2 { } } That results in: @media screen and (min-width: 700px) { .parent .child { } .parent .child-2 { } } .parent .child { } .parent .child-2 { } Or I could do a combination of the two. Neither of them feels particularly great because of the duplication, but I’m not sure there is a perfect answer here....

Read More

Using Dotfiles for Managing Development and Many Other Magical Things

Howdy folks! 🎉 I’m Simon Owen, and over the years, I’ve loved being a part of and learning from the dotfiles community. I spend a lot of time teaching developers and running workshops. In those sessions, demonstrating how I set up my development environment is often one of things that folks appreciated the most. Dotfiles are a key part of my development environment. Haven’t heard of them? Well, even if you have, it’s a good idea to walk through what they are and the benefits of using them. Last year, I set myself a goal to create a screencast...

Read More

Come to An Event Apart in 2019

The 2019 season for An Event Apart (the premiere web and interaction design conference) is about to kick off! Seattle – March 4–6, 2019 Boston – May 6–8, 2019 Washington DC – July 29–31, 2019 Chicago – August 26–28, 2019 Denver – October 28–30, 2019 San Francisco – December 9–11, 2019 I’ll be there in Seattle for the kickoff, giving a talk about how to think like a front-end developer. I’ve been working on it for ages, and I think I have a talk ready that helps set the stage for where we are at in the world of...

Read More

Animate a Blob of Text with SVG and Text Clipping

I came across this neat little animation in a designer newsletter — unfortunately, I lost track of the source, so please give a shout out if you recognize it! In it, a block of text appears to bleed into view with a swirl of colors, then goes out the same way it came in. It’s a slick effect and one I wanted to recreate in code. The approach I took was to use SVG text as a clip path for an SVG background. We must use SVG text because CSS currently only allows us to animate the background with...

Read More
www.000webhost.com