Article Archives

22 comments

Force Selection of Text Block

Have you ever seen (or put yourself) some text into a <textarea></textarea> or <input />, not because it was part of a form, but because it made the whole block of text easier to select. Inputs like that have selection boundaries, meaning you can click into them and (for example) Select All and get just the text inside the input.

There is a CSS property that allows us to do that without needing to use a not-particularly-semantically-appropriate form …

30 comments

Zooming Background Images

The following is a guest post by Dylan Winn-Brown, who shows us a performant way to accomplish this design effect.

Whilst working on a client’s website recently, I was asked to replicate an effect like this.


Containers with background images which zoom within their container on hover, revealing more information.…
10 comments

Image Upload and Manipulation with React

The following is a guest post by Damon Bauer, who tackles a pretty common web developer job: offering user image uploads. I'd hesitate to call it easy, but with the help of some powerful tools that do a lot of the heavy lifting, this job has gotten a heck of a lot easier than it used to be. Damon even does it entirely in the browser!…

8 comments

Everything You Need to Know About Instagram API Integration

The following is a guest post by Emerson This. This is a guide for web developers interested in integrating Instagram content on websites. It was only a few months ago when Instagram changed what was possible with their API, so this serves to explain that, what is possible now, and examples of those possibilities.

Design Better Data Tables

Matthew Ström on how data tables can be better through things like alignment, rules, labels, backgrounds, and the type of numerals used:

Oldstyle figures look nice in sentences, where they better match the size and spacing of lower-case letters; lining figures are more uniform, and reinforce the grid-like structure of the table.…

8 comments

The Atomics

  • "Atomic" is a browser-based timeline animation tool.
  • "Atomic Design" is a design methodology in which you design very small parts and combine them in larger and larger pieces to build a whole.
  • "Atomic CSS" is a system in which you apply styles directly through designated HTML classes.
  • "Project Atomic" is something for running containerized applications, like Docker? I dunno it's DevOps-y and above my head.
  • "Atomic Web Browser" is an old (looks abandoned) iOS web browser.

None of them have …

Extensible Web Components

Some interesting thoughts from Jeremy Keith about his concerns with Web Components:

Compare Service Workers to web components.

First of all, ask the question “who benefits from this technology?” In the case of Service Workers, it’s the end users. They get faster websites that handle network failure better. In the case of web components, there are no direct end-user benefits. Web components exist to make developers lives easier. That’s absolutely fine, but any developer convenience gained by the use of …

16 comments

Organizing Your Grunt Tasks

The idea of breaking up your code into smaller bite sized chunks creates an environment that is easy to work in and maintain. That's often thought of as module design, and is a standard for web development these days. I'm going to show you a way you can use module design to better organize your Grunt tasks.…

SVG Uploads in WordPress (the Inconvenient Truth)

Bjørn Johansen covers why:

  1. It's easy to enable SVG uploads in WordPress (few lines to a functions.php file or functionality plugin)
  2. It makes sense why WordPress doesn't allow them by default.

Jake Archibald in the comments:

In hindsight there probably should have been two content types, one that treats SVG has a full document context, and the other as a simple image (how browsers treat SVG in today, which cannot execute script or initiate fetches).

Hear hear.

I also had …

13 comments

Precedence in CSS (When Order of CSS Matters)

On your average CSS-writin' day, odds are you won't even think about precedence in CSS. It doesn't come up a whole heck of a lot. But it does matter! It comes up any time multiple CSS selectors match and element with the exact same specificity.

Assuming specificity is exactly the same, order does matter.

Styles declared later win. …

18 comments

High Performance SVGs

I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the team how to decrease the file size on the SVGs while preserving the appearance and functionality, finally getting the load time to under 2 seconds. The bounce rate …

CSS Writing Mode

Ahmad Shadeed with a bonafide CSS trick:

I noticed a CSS property called writing-mode, this was the first time that I know of it. After some research, I learned that its purpose is for vertical language scripts, like Chinese or Japanese. However, the interesting thing is that when using it with English, we can create a vertical text very easily.

Even in English, writing-mode: vertical-lr; help us lay out text vertically without a bunch of positioning, placeholding, and transforms.…

14 comments

The State of CSS Reflections

I recently saw this loader on CodePen, a pure CSS 3D rotating set of bars with a fading reflection. It's done by using an element for each bar, then duplicating each and every one of these elements to create the reflection and finally adding a gradient cover to create the fading effect. Which sounds a bit like scratching behind your right ear with the toes of your left foot! Not to mention the gradient cover method for the fading effect …

Sponsor: Wufoo

Wufoo is for building web forms. From a simple contact forms to complex, multi-page, logic-controlled mega forms.

Personally, I'm a huge Wufoo user. I have multiple accounts across different organizations. Each organization has multiple users with access to different forms and reports. I've used it for job applications, customer support, selling T-shirts, collecting feedback, lead generation, and more.

Wufoo has collected literally hundreds of thousands of form entries for me, saving me countless hours of dev work. Often those entries …

Web Design in 4 Minutes

Jeremy Thomas explains web design (the basic applying style to content part) through an interactive step-by-step walkthrough. I could see this being an ah-ha moment for plenty of folks in the early stages of understanding web design.…

2 comments

Remote Control WordPress at Scale

This is the third and final article in a series on "remote control WordPress". That's my nickname for this strategy of managing network settings on one "control" install, and then pulling those values into all your client installs. The advantage is that it saves staff members from having to toggle the same settings on the same network plugins, across many multisite installs.…

New `video` Policies for iOS

This is pretty big news: earlier today the WebKit team announced that iOS 10 will now support silent <video> elements with the autoplay attribute, which is a big deal for performance. Jer Noble describes the update in much more detail:

It turns out that people these days really like GIFs. But the GIF format turns out to be a very expensive way to encode animated images when compared to a modern video codec like H.264. We’ve found that GIFs can …

35 comments

Full Width Containers in Limited Width Parents

I bookmarked a tweet a few months ago, as it was a bonafide CSS trick and that's what we love around here.

The issue is: how do we make a full-browser-width container when we're inside a limited-width parent?

Using the fieldset and legend elements

Leonie Watson:

You should use the <fieldset> and <legend> elements when:

  • You have a single multiple choice question (using radio buttons or checkboxes).
  • You have several questions relating to the same topic (like text boxes, or any other type of field).

You should not use the <fieldset> and <legend> when:

  • You have a single form field that asks for a single piece of information.
6 comments

Give Your Development Domain a Different Favicon Than Production

I got frustrated of not being able to tell the tabs apart as I was working on stuff. So this is my so-dumb-it's-smart solution.

The only hitch in my gittyup was that I had to add it to .gitignore, which untracked the file, which deletes it, and had to manually slip it back onto the server. Although it looks like there are smarter ways.…

8 comments

Learning to COPE with Microservices

I vividly remember my first encounter with a content management system: It was 2002 with a platform called PHP-Nuke. It offered a control panel where site administrators could publish new content that would be immediately available to readers, without the need to create/edit HTML files and upload them via FTP (which at the time was the only reality I knew).

Once I'd made the jump to a CMS, I didn't look back. CMSs quickly became part of my toolkit …

one comment

OAuth Fun with OAuth1

This is the second article in a three-part series about using the WP API to achieve something I'm calling "Remote Control WordPress", a lifestyle where you'd manage network settings on a "control" install, and have other "client" installs pull their settings from the control. The advantage of this is that you could then manage the settings for many WordPress installs all in one place. The first article laid out how to register network settings as a custom endpoint in the …

7 comments

CSS Keyframe Animation with Delay Between Iterations

Say you want an animation to run for 1 second, but then delay for 4 seconds before running again. Seems like that would be easy. Turns out it's not-so-straightforward, but doable. You need to fake it.…

55 comments

Considerations for Styling a Modal

A modal. A small box that pops up to tell you something important. How hard can it be? Wellllll. Medium hard, I'd say. There's quite a few considerations and a few tricky things to get just right. Let us count the ways.…

11 comments

Change Color of All Four Borders Even With `border-collapse: collapse;`

The following is a guest post by Daniel Jauch. It's a quicky that covers something I bet many of us have run across at one time or another: border-collapse is great, until it impedes on your ability to change a border color you're trying to change because of the overlapping.

The border-collapse property is great for making borders even all around <table></table> cells. It makes for a clean look that I actually prefer.

But, there is something that can …

A Comprehensive Guide to Font Loading Strategies

Squee!

The post we've been waiting for from Zach Leatherman. This will be the go-to reference when making tech and UX choices on font loading.

Zach compares 11 current (and future) techniques for loading web fonts, all with live demos. He clearly lists the PRO's and CON's for each without making it a novel. Most valuably, he provides a VERDICT on each, which let's you know if the technique is up-to-par or not.

A winner is declared, but it's fairly …

7 comments

The WP REST API for Remote Control WordPress

At my day job, we have about 1,000 sites spread across 30 WordPress multisite installs. The installs all run many of the same plugins and settings, especially at the network level. This causes a lot of wasted time for our staff: They have to manually repeat the same settings across 30 installs. Because of this, we're moving to something I like to call "Remote Control WordPress".…

How I Ended Up With Element Queries, And How You Can Use Them Today

We often want a component to respond to the dimensions of its parent element rather than the dimensions of the browser window. Currently that’s not possible but ultimately that’s the idea behind Element Queries, and over on Smashing Magazine Tommy Hodgins has written about the development of EQCSS.js, a JavaScript library which allows developers to write element queries.

This implementation of element queries is interesting as it suggests that we can style an element dependent on the features …

3 comments

Collaborative Engineering and Design Tools

Working at any large company, the greatest hurdle is always the problem of scale. Be it engineering, design, or how they work together, communication is the key to a successful business. Here are some of the tools that I've seen help a great deal while collaborating on a large team. With a number of engineers and designers in the mix — not to mention hybrids like me — working together seamlessly and staying focused on a common goal for …

35 comments

A Front End Developer is Aware

One idea that has lodged itself into my brain recently (largely from this panel discussion) is how a front end developer needs to be aware. In a general sense, the front end developer is positioned in the middle of lots of other jobs. Everybody involved in a web team ends up talking with the front end developers. That makes sense. The front end developers create the actual thing people interact with. Everything comes together with the front end …

​Sponsored: Stop Running Out Of Money

YNAB: You’ve Never Budgeted Like This Before

YNAB is different because it works. By combining a proven method with award-winning software, on average users save $200 the first month, and $3,300 by month nine. YNAB will teach you to think about your money differently and give you the tools to put it into practice. What have you got to lose? (Except all that debt and stress, so, sort of a lot, actually.)

Sign up for a 34-day free trial to …

12 comments

Accessible SVGs

Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let’s see how this will impact users of assistive technology (AT) and what is needed in order to ensure a great user experience for everyone.…

7 comments

Leverage WordPress Functions to Reduce HTML in your Posts

There is a debate on whether HTML classes belong in your content. As in, classes that are strictly related to the presentation of that content. Sometimes the use of these classes is unavoidable. A callout paragraph, a pull quote, a carousel in the middle of a post... you'll need classes to style and add functionality to these things.

While you sometimes need them, the less you write them into the actual post content, in my opinion, the better.…

11 comments

The Ninth Fourth

Another year! They tick by all-too-quickly these days. It's time for another commemorative post, as we do. A state of the union. A mile-marker style post where I talk about the year gone by and where things stand 'round here.…

22 comments

Makin’ GIFs

These are the ways in which I make GIFs. Sometimes for blog posts. Sometimes for tweets. Sometimes for documentation. Sometimes for fun. GIFs can be tremendously useful and communicate better than a still image or even video in some circumstances.

I use a Mac so these are mostly Mac things.…

Sponsor: ​The Best Checking Account in America

Money magazine recently named The Aspiration Summit Account as the "Best Checking Account in America".

​The Summit Account is an online-only checking account with no fees, no minimum balance and no minimum monthly deposit requirements. You can earn up to 1.00% interest and get unlimited ATM fee reimbursements. Perfect for frequent travelers and smart savers!

Interestingly, Aspiration incorporates a "pay what is fair" model. You choose your price and pay a "tip", a monthly recurring payment up to $6 per …

Dreamweaver Beta

The only jokes more played out than IE jokes are Dreamweaver jokes. But Dreamweaver just dropped a new Beta that some developers are pretty into. Anselm Hannemann:

This is a reduced workspace that then deactivates a couple of tools to declutter the UI from panels that are intended for users seeking for UI-supported editing. The new coding workspace simply focuses on code, and is intended to please professional coders who don’t want to use the visual tools and prefer …

The Languages Which Almost Became CSS

Today, CSS doesn't really have any competitors. We might compile another language to get it, or apply it in unusual ways, but ultimately styling happens on the web through CSS.

But before CSS cemented itself, there was RRP, PWP, FOSI, DSSSL, PSL, CHSS, and JSSS.

An awesome journey through web styling history by Zack Bloom.…

37 comments

Recreating the Twitter Heart Animation (with One Element, No Images, and No JavaScript)

I recently saw a recreation of the Twitter heart animation among the picks on CodePen. If I happen to have a bit of time, I always look through the code of demos that catch my attention to see if there's something in there that I could use or improve. In this case, I was surprised to see the demo was using an image sprite. I later learned that this is how Twitter does it. Surely it could be done …

13 comments

How To Build a Word Counter App

The following is a guest post by Vikas Lalwani, who walks us through building something very practical. Along the way, we'll learn about structure, RegEx, Ajax, APIs, and more, that get us to the desired feature set. All with good ol' vanilla HTML, CSS, and JavaScript.

2 comments

PHP School (Learn PHP Through Command Line Workshops)

The following is a guest post by Aydin Hassan, who is going to introduce to you a really compelling way to learn PHP. I'm sure all of us get asked by our less experienced acquaintances "how do I get started with X?" or even "what book should I buy?" Books can be great, but given the choice, learning code by actually coding in an interactive environment will do you better.

How to Ask Good Coding Questions That Get Great Answers

I see my fair share of poorly-asked technical questions. Zell Liew's advice:

The onus is on you to craft questions that others can understand and reply quickly.

Reminds me of two excellent sentences by Pamela Marie:

Golden rule asking a question: imagine trying to answer it

Golden rule in answering: imagine getting your answer

@pwnela #MadPlusRuby

— Chris Coyier (@chriscoyier) August 21, 2015

And also: Reduced Test Cases

Sponsor:​ Bushel – A Beautifully-Designed Solution for Managing Apple Devices

Bushel is a cloud-based Mobile Device Management (MDM) solution for the iPads, iPhones, and Macs in your workplace. Bushel makes device management accessible and affordable for everyone, so businesses can support their users without help from IT.

Bushel helps you:

  • Configure settings on all of your Apple devices quickly and consistently over the air.
  • Manage your devices by centrally deploying apps anytime from anywhere.
  • Ensure the sensitive company information your employees access on their Apple devices remains secure.
  • Enforce passcodes

We have a pretty good* newsletter.