Taking Vacation When No One is Paying You to Take Time Off

My family usually takes two “bigs” trips each year: one spent visiting family across the country and another to explore places that are new to us. This is no problem for my wife. Her employer gives her four weeks of paid vacation every year and she can bank on that when we’re planning where we want to travel and how long we want to spend there. So lucky! The problem for me, however, is that no one is paying me to take time off. It’s kind of ironic in a way because my wife has one employer who pays her to not work for a limited amount of time, but… Read More

Continue Reading
cube_min

Simplifying CSS Cubes with Custom Properties

I know there are a ton of pure CSS cube tutorials out there. I’ve done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel… outdated and very WET. I thought I should do something to fix this problem, so this article was born. It’s going to show you the most efficient path towards building a CSS cube that’s possible today, while also explaining what common, but less than ideal cube coding patterns you should steer clear of. So let’s get started! HTML structure The HTML structure is the following: a .cube element with .cube__face children (6 of them). We’re… Read More

Continue Reading

Some Extremely Handy `:nth-child` Recipes as Sass Mixins

There is no such thing as one-size-fits-all styling. An image gallery with three images might need to be styled differently than an image gallery with twelve. There are some cool tricks that you can use to add some number-based logic to your CSS! Using :nth-child and :nth-last-child, you can get some surprisingly complex information without ever leaving your stylesheet. This post will assume that you have a basic understanding of how the :nth-child pseudo-selector works. If you need a quick refresher, Chris has a great post covering that topic. Writing Complex :nth-child() Selectors You may be aware that along with :nth-child there is the related :nth-last-child. It works exactly the… Read More

Continue Reading

User Facing State

Let’s talk about state. Communicating state to the user that is, not application stores state in JavaScript objects, or localStorage. We’re going to be talking about how to let our users know about state (think: whether a button is disabled or not, or if a panel is active or not), and how we can use CSS for that. We’re not going to be using inline styles, or, as much as can be helped, class selectors, for reasons that will become clear as we go. Still here? Cool. Let’s do this. All dynamic components of an application have a default user-facing state, and that state needs to be stored and updated… Read More

Continue Reading
circ_distrib_overlap_items_desired

Solving the Last Item Problem for a Circular Distribution with Partially Overlapping Items

Let’s say we wanted to have something like this: Clockwise circular (cyclic) distribution with partially overlapping items.At first, this doesn’t seem too complicated. We start with 12 numbered items: – 12.times do |i| .item #{i} We give these items dimensions, position them absolutely in the middle of their container, give them a background, a box-shadow (or a border) and tweak the text-related properties a bit so that everything looks nice. $d: 2em; .item { position: absolute; margin: calc(50vh – #{.5*$d}) 0 0 calc(50vw – #{.5*$d}); width: $d; height: $d; box-shadow: inset 0 0 0 4px; background: gainsboro; font: 900 2em/ #{$d} trebuchet ms, tahoma, verdana, sans-serif; text-align: center; } So… Read More

Continue Reading
local-dev-results

Poll Results: Local WordPress Development

We kicked a poll off three months ago asking y’all what kind of local development environment you set up for running WordPress locally. At the time of this writing, we got 2,623 votes, so a decent amount of significance here. Especially because the question was phrased: If you’re running WordPress locally (i.e running PHP, MySQL, and a web server), how are you doing it? Presupposes that you are running a local environment. (Please do that.) Here’s an image of the results: (If you can’t see that, don’t worry, we’re about to go through the results.) The winner, at 61%, was using some kind of software-with-a-UI to manage it. WAMP /… Read More

Continue Reading

5 Awesome Sublime Plugins you Won’t Find in Top Plugin Posts

I am a huge fan of Sublime text editor and whenever I go and try other text editors I come back to Sublime crying: “Forgive me I’ll never, ever, leave you again!” But I’m not here to praise Sublime. In this post I’m rather going to share some of the Sublime plugins I’ve been using a lot and which are really helpful and fun to work with. You may find them for your favorite text editor as well. Let’s dive into the first one. 1) Text Pastry How many times have you had a markup and all you wanted to do was to add incremental numbers to it? For example… Read More

Continue Reading
webpackgulp

Combine Webpack with Gulp 4

Webpack is so hot right now! Webpack is great when it comes to module bundling and working with frameworks like Vue or React, but it is a bit more awkward when handling static assets (like CSS). You might be more used to handling your static assets with something like Gulp, and there are some pretty good reasons for that. Still, the amount of JavaScript in our static projects is growing, so to compensate, let’s make use of Webpack, while remaining in Gulp. In this article, specifically, Gulp 4. We’ll use modern techniques to build an easily maintainable workflow, including the powerful and useful Hot Module Reloading (HMR). You May Want… Read More

Continue Reading
GitHub-Code-Guidelines

Enforcing CSS Syntax Style (and more!)

I bet you have a style that you write CSS in, for the most part. You like 4-spaces, say. You always have a space after braces and colons. You always put a space after rulesets. You only ever put one declaration on a line, and the only declarations that can be multi-line are when they are big blocks like a gradient or a comma-separated box-shadow. You might take this a little further and codify this. Perhaps you have a team meeting about it and decide on how you want to style code. You write up a guide and make it available for everybody on the team to see. GitHub’s Primer… Read More

Continue Reading

Making Custom Properties (CSS Variables) More Dynamic

CSS Custom Properties (perhaps more easily understood as CSS variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They can do what preprocessor variables can… but also a lot more. Whether you have been a fan of the declarative nature of CSS or prefer to handle most of your style logic in JavaScript, Custom Properties bring something to the table for everyone. Most of the power comes from two unique abilities of Custom Properties: The cascade The ability to modify values with JavaScript Even more power is exposed as you combine Custom Properties with other… Read More

Continue Reading

The Issue with Preprocessing CSS Custom Properties

CSS has Custom Properties now. We’ve written about them a bunch lately. Browser support is good, but of course, old non-evergreen browsers like Internet Explorer don’t have them and never will. I can see the appeal of authoring with “future CSS”, and letting a preprocessor backport it to CSS that is compatible with older browsers. Babel for CSS! Why not?! It makes me nervous though – because it’s only some use cases of Custom Properties that you can preprocess. There are plenty of situations where what you are doing with a Custom Property just isn’t possible to preprocesses. So if you do, you’re putting yourself in a pretty weird situation.… Read More

Continue Reading
offline-site

Simple Offline Website

A little while back, Nicolas Bevacqua wrote the fantastic article Making a Simple Site Work Offline with ServiceWorker. We kinda tag teamed the idea. Nicolas did all the work, but I put forth the idea (and designed the crappy little website) that we were going to make work offline. I wanted a site that wasn’t as complicated as a major web app with loads of resources and API usage, but wasn’t as simple as a single HTML page. Everything in that article is up-to-date and serves as a great reference to getting started with offline capabilities for a site. Just a few notes: I updated the repo to make sure… Read More

Continue Reading
field-notes

Websites We Like: May 2017

It’s been far too long since we rounded up some of the most interesting websites out there. But this time we have a diverse round-up of whacky interfaces and beautiful layouts to look at. Let’s dive straight in! Nick Jones’ Portfolio The portfolio of Nick Jones is one of the neatest personal websites I’ve ever seen. As you flip through each page and project that Nick has worked on, the interface rotates and zooms in as you get closer to the end. Not only that but the interface changes color and the tiny animation on the title of each post draws your eye to it. In fact, I think this… Read More

Continue Reading
Screenshot-2017-03-12-00.31.26

Retraçons l’histoire des polices de caractères CSS

Chen Hui Jing a écrit une excellente publication sur l’histoire des polices CSS et la façon dont le W3C écrit la spécification et les propriétés CSS étranges, comme font-effect, font-emphasize et font-presentation. Dans le cadre de mon obsession perpétuelle de la typographie, ainsi que de CSS, j’ai examiné comment nous étions arrivé à avoir plus de polices sur Internet que nous ne pouvons en utiliser. Ce que j’adore dans la façon que le W3C a de faire les choses, c’est qu’il y a toujours des liens vers les versions précédentes de la spécification, jusqu’à leurs toutes premières ébauches. Bien qu’il manque l’aperçu complet des différentes discussions et réunions entre toutes… Read More

Continue Reading
good-bad-ugly

Easing Linear Gradients

Linear gradients are easy to create in CSS and are extremely useful. As we’ll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Well, non-linear in the easing sense, anyway! Here’s an example that shows how harsh a standard linear-gradient() can be compared to how smooth we can make it by easing it: Screencap from “The Good, the Bad and the Ugly” with gradients overlaid.Il buono (the good): Smooth gradients in CSS that blends into their context. Il cattivo (the bad): No text protection (bad accessibility). Il brutto (the ugly): Standard linear gradients with sharp edges. In this article, we’ll focus… Read More

Continue Reading