Article Archives

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

12 comments

Run Multiple Find & Replace Commands in Sublime Text

I run Find & Replace commands a lot. Sometimes I'm changing a class name. Sometimes I'm looking for a function reference and want to make sure all instances have been accounted for. Sometimes I'm working on an article and and some conversion process requires some global changes. I've often wished I could run a single command to run all the Find & Replace commands I normally have to do individually. I finally web searched my way through a solution so …

35 comments

AOS: CSS-Driven “On Scroll” Animation Library

The following is a guest post by Michał Sajnóg, a front end developer at Netguru. Michał has created one of those "when you scroll to here, trigger this animation" libraries. One of the things I like about it is that it leaves as much as it can to CSS for creating and controlling the animation themselves. Not to mention it's proved itself by working well on a number of production sites. I'll let Michał walk you through it.

“… have a tendency to latch onto big opinions about How Things Should Be.”

I like Rachel Nabors measured thinking in this week's Web Animation Weekly:

Scrolljacking has become a dirty word. But what is scrolljacking, and is it really all bad? Motion design on the web is young. Many agencies latch on to the newest techniques to dazzle clients, but industry heavyweights and aspiring leaders also have a tendency to latch onto big opinions about How Things Should Be.

At best: design innovation should propel the web forward while experienced leaders apply …

14 comments

Websites We Like: June 2016

We have a new thing we'd like to try! We're going to round up some websites that we like and share them with you. We’ll take a look at the weird and peculiar, the shocking and downright odd; websites that spark our interest and make us double-take. We might choose a website for a number of reasons, such as in the use of a particular technical feature, or it might be a website that stands out from the crowd because …

Improving Your CSS with Parker

Harry Roberts has written about Parker, a stylesheet analysis tool by Katie Fenn. He explains why using tools like Parker are wonderfully helpful to developers:

I use Parker almost daily, and regularly go through it with my clients and workshop attendees. Parker surfaces some really interesting numbers, and if you know what they represent, you can draw some really valuable insights about your CSS from them.

Harry also describes a very important reason as to why developers might use …

10 comments

How Using Yeoman Changed the Way We Work

The following is a guest post by Noam Elboim, a developer at myheritage.com. Noam has dove head-first into Yeoman - from not knowing anything or understanding how it could help at work, to building a custom generator just for them. If you think a tool to help you scaffold out new projects to your liking could help you, check out Noam's journey!

Sponsor: Segment, the last integration you’ll ever need.

Are you tired of integrating third-party services into your website? Yeah, we were too. That’s why we made Segment.

From advertising to personalization and support, our extensive partner network includes the industry’s leading marketing technology solutions, data warehousing and analytics tools. Segment’s developer-friendly APIs set the standard for customer data platforms and is trusted by thousands of awesome companies like New Relic, Crate & Barrel, Intuit, Product Hunt, Instacart, InVision, and Bonobos.

With Segment you can reclaim hours of …

11 comments

Molten Leading in CSS

Dave and I started the latest ShopTalk Show with an audio clip from Tim Brown responding to some of our previous chatter regarding vertical rhythm (and such). Transcription here. It sparked another interesting conversation about these things.

A small part of that was about Tim's coined phrase "molten leading", which is essentially line-height that depends on line length. …

Instant Loading: Building Offline-First Progressive Web Apps

There was a lot of great talks from Google’s I/O event this year, and Jake Archibald’s talk on building offline-first is certainly one of them. The DevTools in 2016 talk is great too.

Or, decide for yourself! There is a playlist of all of them and Robert Nyman rounded up everything as well.

Also, if you're interested in hearing more about this "Progressive Web Apps" stuff and the debate around it...

20 comments

Creating a CSS Curtain Opening Effect

If you're as old as me, you might remember watching Let's Make a Deal on the old television airwaves. The show is apparently still on these days in a new format, but the original always stuck out to me because of one simple thing: the reveal.…

14 comments

Ways You Need To Tell The Browser How To Optimize

In the past few years, there has been a number of front end features in which the performance onus has shifted from browser to developer. Rather than the presumed "browsers will get faster at running my code", there is a little more "I need to change the way I code for browsers to get faster."…

Vanilla List

Vanilla List is a repository of JavaScript libraries; datepickers, form validation and push notifications are just some of the libraries available if you can’t (or don’t want) to a library dependency.…

36 comments

inStyle (Modifying the Current Selector `&` in Sass)

The following is a guest post by Filip Naumovic from Salsita Software. Filip has built a Sass tool to help with an issue I know I've experienced many times. You're happily nesting in Sass. You're maybe a level or two deep, and you need to style a variation based on some parent selector. You need to either break out of the nesting and start a new nesting context, or go nuclear with @at-root. I'll let Filip tell

​Sponsor: ​LightCMS

LightCMS is the fastest growing white-label Content Management System on the market. Their Developer Program gives you all the tools you’ll need to build your web design business on a top-tier, cloud-based platform and your customers don’t ever have to know it’s not your CMS. They’ll even invoice your customers on your behalf. You’ll of course have full access to the HTML and CSS of your sites and you’ll even get a free website for your business.

If you're sick …

Considerations for styling the `pre` tag

I wrote about a bunch of design things you should think about if you use the <pre> tag in your content. Things like:

  1. Do you use the <code> tag inside?
  2. Choosing a font stack
  3. To wrap or not to wrap?
  4. How you can (easily) make code blocks auto-expanding
  5. Dangers if it is headed to email
  6. Syntax highlighting
  7. Language labeling
  8. White-space control
  9. Alternatives
28 comments

Sticky Footer, Five Ways

A brief history, if you will.

The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.…

32 comments

Injecting a Line Break

I had a little situation where I head a header with a span in it, and I wanted to make sure to put a line break before the span. For the record, there really isn't anything wrong with just chucking a <br /> tag before it (and in fact the ability to show/hide that is very useful). But... it always feels a little weird to have to use HTML to achieve a layout thing.

So let's take a journey. …

We have a pretty good* newsletter.