Article Archives

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.…

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 …

27 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.
5 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.…

6 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 …

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 …

34 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 …

12 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
42 comments

Don’t Overthink It (Flexbox) Grids

Four years ago I posted "Don't Overthink it Grids" and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid. Someone was promoting a new grid framework practically every week.

That article was my way of saying: "Fear not! You can make a grid yourself! You don't need a complicated framework." It might not have been quite as fancy, but that's how I rolled. You float a couple of elements …

20 comments

The Essential Meta Tags for Social Media

The following is a guest post by Adam Coti. Follow along as Adam whittles down the necessary meta tags for social media to display rich previews. If you referenced their docs directly, you might end up with a dozen, but in reality, you might be able to get away with as few as five.

2 comments

CSS-Tricks Chronicle XXVII

Summer! It's been too long since I chronicle'd at ya. You know, where I chitchat about what's been going on in life, around here, and on my other projects. …

15 comments

Style Guide Driven Development with Atomic Docs

The following is a guest post by Nick Berens, a senior front-end developer at wisnet.com. Nick and his team have been building websites through custom style guides for years. Over those years, Nick has been building and evolving a tool to help with this process. I'll let Nick explain both the philosophy and the tool.

​Sponsor: ​Hired – The End of Job Searching

​Designers and developers are in demand, so shouldn't companies apply to hire you instead of the other way around? That's exactly how it works on Hired.

Hired is a platform that gives you an easy to way to get jobs at top companies in SF, NYC, and 14 other tech hubs around the world.

It's totally free, and Hired will block your employer and anyone else you want from ever seeing your profile. Even if you're just curious to …

13 comments

Git’s Patch Mode

Let’s say we’ve just changed some CSS in a file and we want to stage it with Git. …

Google Fonts Redesign

It's a big redesign of a site I'm sure all of use have visited many, many times. It even resides on a new subdomain: fonts.google.com.

Live typing samples in the search index for the win! There are also much nicer font specimen pages with clearer examples, cool/nerdy data visualizations, and pairing recommendations. Reminder that you may want to use a bit more sophisticated font loading than the snippets they provide, though.…

Typography Handbook(s)

I ran across this Typography Handbook the other day and thought it was very well done. It gets you right away by looking at two resumes and having your rather instinctively prefer the one with nice type, even though the information on them is exactly the same.

Reminds me of how many other typographic "handbooks" there are:

8 comments

Component-Led Design Patterns with Nunjucks & Grunt

The following is a guest post by Morgan Feeney. Morgan and his colleagues went through a journey of trying to find the right code prototyping tools, and found that a Nunjucks based system worked well. I think it's a compelling choice! I'll let Morgan make that clear.

51 comments

Form Validation UX in HTML and CSS

You can do and impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors. But it does require some CSS trickery to get everything just right!…

10 comments

How To Use Airtable as a Front End Developer

I came across Airtable at a recent hackathon-esque event, when a fellow developer suggested we use it as a way to store and use our data. I was super into it. For the first time, I felt like: "This is a database for me. This is what I want out of a data storage system."…

11 comments

Interactive Data Visualization: Animating the viewBox

Controlling the way that a data visualization lays out on your page on the fly is powerful in terms of conveying information. In the past, we've talked about how we can use this to hide and show information for responsive development. When working with SVG, we can do this by using the viewBox as a camera, isolating the relevant information on the page to highlight information for the viewer. There are so many uses for this technique. We're going to …

We have a pretty good* newsletter.