Article Archives

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

9 comments

CSS Modules and React

In this final post of our series on CSS Modules, I’ll be taking a look at how to make a static React site with the thanks of Webpack. This static site will have two templates: a homepage and an about page with a couple of React components to explain how it works in practice.…

HEAD

Josh Buchea has collected "A list of everything that goes in the <head> of your document". Over 100 <meta> tags alone!…

Sponsor: Enterprise WordPress on Media Temple

Media Temple is the host we both use and recommend here on CSS-Tricks.

Hot off the presses: Media Temple has launched Enterprise WordPress Hosting. This is for large-scale WordPress sites that need the scaling and high-availability of AWS, all managed by the crack engineers at Media Temple.

A little behind the scenes: everything is built on Docker containers. When a high traffic event happens that requires scaling up, that happens in seconds. Media is uploaded and stored on S3, …

All or Nothing

Jonathan Snook takes a look at the all property which can be used like this:

.element { all: initial; }

The idea is that it should set all properties of an element to initial, removing all custom styling thus far applied. Essentially resetting the styles of any element so you can build up from scratch.

Unfortunately the inconsistencies between each browser make it difficult to recommend. If you could count on it being consistent, this is a powerful one-liner, …

3 comments

ease-out, in; ease-in, out

We got to talking about easing in a recent episode of ShopTalk with Val Head and Sarah Drasner. Easing is important stuff when it comes to animations and transitions. Combined with the duration, it has a huge effect on the feel of change. If you're taking animation seriously as part of the brand on a project, you should define and consistently use easings.

That said, it's a balance between:

  • Crafting/using easings that match your brand
  • Adhering to soft "rules" about
12 comments

An Intro to Bedrock for WordPress

The following is a guest post by Alessandro Vendruscolo, who wrote to me excited to write a guest post about a WordPress tool that I didn't know much about: Bedrock. It's not a theme, it's a way to install, configure, and manage WordPress with security and modern development practices in mind.

Reducing JPG File size

There’s lots of neat tricks for reducing the size of JPGs in this article by Colt McAnlis:

With the Average webpage size now larger than the original DOOM game, you have to start asking where all the bytes are coming from, and how you can do more to toss those things out.

While JPG compression is impressive in its’ own right, how you use it in your application can influence the size of these files significantly. As such I’ve assembled …

11 comments

Tips for Aligning Icons to Text

Icons. They're popular. They help complement content (most of the time). And yet they can be a pain in the neck.

Once you've decided on a format (SVG or icon font?) and designed the set, there are still other considerations, many of which pop up while you're coding.…

18 comments

An Intro to Google Tag Manager

The following is a guest post by David Attard. I only recently became aware that Google Tag Manager was a thing, but didn't know exactly what it was, what it did, or why I might care to use it. Thankfully David stepped up here to explain it, so now we all can understand it. Take it David!…

Sponsor: ​Become an Industry-Ready Developer at Galvanize

​At Galvanize, you'll learn the programming skills and problem-solving techniques companies seek when hiring developers. Our full-time immersive web development course six months long and designed to prepare you as a full-stack developer on a software team. Our graduates pursue roles with some of the most exciting and innovative tech companies as full-stack software developers, quality assurance engineers, front-end developers, and product managers. Scholarships and financial aid are available for qualified students. Start your future career, today.

23 comments

Flexbox and Truncated Text

Situation: you have a single line of text in a flex child element. You don't want that text to wrap, you want it truncated with ellipsis (or fall back to just hiding the overflow). But the worst happens. The unthinkable! The layout breaks and forces the entire flex parent element too wide. Flexbox is supposed to be helping make layout easier!

Fortunately, there is a (standardized) solution. You just need to use a non-flexbox property/value to do it.…

We have a pretty good* newsletter.