Chris Coyier - 2/472

Aspect Ratio Boxes

# June 8, 2017 By Chris Coyier

I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz's Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave's Ol' Padded Box.

Let's go on a little journey through this concept, as there is plenty to talk about.

(more…)

aspect ratio

Oh wait, I was looking at production

# June 7, 2017 By Chris Coyier

Oh so true:

Why won't this CSS change?!

Restart server

>Nope

rm -rf everything

>Nope

rebuild dev env

>Nope

Oh wait, I was looking at production

— Mike Coutermarsh (@mscccc) June 5, 2017

Not to ruin the joke, but I find it tremendously helpful to Give Your Development Domain a Different Favicon Than Production.

Read the comment thread on that post too, there are some other very clever ideas.

Componentizing a Framework

# June 2, 2017 By Chris Coyier

I'm sure most of you understand how you work with a framework like Bootstrap, Foundation, or Materialize. You use their CSS and JavaScript. You also use their chunks of HTML, piecing together and applying classes as needed to do what you need to do.

You're on your own piecing the HTML together. That's good, because it's flexible. People use frameworks like this in all kinds of CMS's and backend systems. But what if you want to apply some structure to this, making actual components out of the components given to you in the framework?

(more…)

HelloSign: The Industry’s Fastest eSignature API Integration

# June 1, 2017 Sponsored

My favorite kind of software products are the ones that very clearly make life simpler. Being able to legally sign a document by clicking a button in an email and squiggling my mouse to make my signature is definitely one of those things.

(more…)

How Can I Make My Icon System Accessible?

# May 31, 2017 By Chris Coyier

Here's a question I got the other day?

Would you suggest icon fonts or inline SVGs for a complex single page application? And are there specific accessibility concerns for either? Accessibility is especially important for us because schools use our products. I ask because we are currently in the process of unifying and setting up an icon system.

(more…)

a11y icons

Floating Labels are Problematic

# May 31, 2017 By Chris Coyier

I feel like all these issues are handleable, but the damning issue is #3: they need space to move into. Labels can't go away and need to be readable at all times, so a floating label pattern doesn't actually save any space. You could have just put the labels where they float to to begin with. It's still a neat effect, but it doesn't buy you anything and may just cost you something.

(more…)

forms

Browserslist is a Good Idea

# May 30, 2017 By Chris Coyier

As front-end developers, we're well aware that different browsers (and versions) support different web platform features. We make choices based on the support of those features balanced with what analytics tell us about what browsers our users use. For example, if our Google Analytics tell us only 0.01% of users are left on IE 9, perhaps we'll decide it's OK to start using Flexbox and .classList.

(more…)

autoprefixer babel browserlist eslint stylelint

Full Page Background Video Styles

# May 28, 2017 By Chris Coyier

Making a full page background video is slightly trickier than a full page background image. Over on the Media Temple blog, I take a look at how that's done, but then also what the design patterns are once you've done it. You likely need text over top the video, so do you center it? Do you let the page scroll and cover the video? Do you get fancy and fade out the header as you scroll?

video

A Unified Styling Language

# May 26, 2017 By Chris Coyier

This article by Mark Dalgleish will go down as one of the most important front-end development articles of 2017.

It's about the hot topic that is "CSS in JavaScript". Mark walks us through how that's actually not a simple and singular idea, but a continuum of concepts and implementations. There are lots of projects that all approach it in different ways. It's likely that the best ways are the projects that actually generate real CSS. These things are a far cry from "inline styles".

Regular ol' CSS isn't going anywhere, but these CSS in JS ideas aren't either. There is some serious benefits to them for a lot of projects. Scoped styles preventing styling mistakes. Performance gains through critical styles. Only shipping the minimum amount of styles needed. Stylesheets that nobody is afraid of and don't become the proverbial "append only" stylesheets. Not to mention that if you are going to be styling in a JavaScript environment, you get the possibility of dynamic styles and porting those styles to other platforms and such.

What is the Future of Front End Web Development?

# May 25, 2017 By Chris Coyier

I was asked to do a little session on this the other day. I'd say I'm underqualified to answer the question, as is any single person. If you really needed hard answers to this question, you'd probably look to aggregate data of survey results from lots of developers.

I am a little qualified though. Aside from running this site which requires me to think about front end development every day and exposes me to lots of conversations about front end development, I am an active developer myself. I work on CodePen, which is quite a hive of front end developers. I also talk about it every week on ShopTalk Show with a wide variety of guests, and I get to travel all around going to conferences largely focused on front end development.

So let me take a stab at it.

(more…)

framework performance preprocessing