Chris Coyier - CSS-Tricks

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

The Tools of an HTML Email Workflow

# May 24, 2017 By Chris Coyier

Last week's ShopTalk Show was all about HTML Email. It's such a fascinating subject, as technically it is front-end web development, but it almost feels like a bizarro alternate universe.

We have dozens of browsers to worry about, they have hundreds of clients to consider. We worry about whether fancy new APIs are supported, they worry about whether padding is supported. We have grid layout, they have.... grid layout?!

It's tempting to make the joke: "It's coding like it's 1999!", but as we talk about in this episode, that's not really true.

Aside from all that, another thing I thing fascinating are all the tools involved. Lemme think this out.

(more…)

Email html email

Are we making the web too complicated?

# May 23, 2017 By Chris Coyier

Exactly as I did the other week, Laurie Voss saw a tweet about the complication of front-end development and responded.

From the outside, front end development in 2017 looks pathologically overcomplicated. Is this a fair perception? If so, why is it happening?

— Pinboard (@Pinboard) May 21, 2017

The replies to Maciej's tweet are interesting to read. They fall roughly into two camps:

Older/not front-end developers: because the web is shit!

Current front-end developers: because shit is hard!

As is often the case, both camps are correct! The web is a shitshow of wheel reinvention and bad APIs. It's also a blizzard of innovation.

Expectations for what a website should be able to do have evolved enormously. Users expect snappy, desktop-like responsiveness and rich presentation in web apps. They also expect those same web apps to work equally well on mobile devices. And they expect these apps to load basically instantly.

Web Hosting with Media Temple

# May 18, 2017 Sponsored

I find Media Temple to be a perfect fit for a mostly-front-end person like me. I'm not an idiot, I'm pretty experienced with web work, but I don't really wanna be in charge of setting up and configuring a server. That's a specialized set of knowledge that I think is well suited to the people that own, sell, and support servers. (I think that would be a pretty good career choice, FWIW, kids.) That's what Media Temple does in spades. They own, sell, and support the heck out of servers.

That's true at all levels. They have super affordable WordPress-tuned servers and shared servers that cost less than a dollar a day that can host more sites than you'll ever need (500!). You can scale up from there with virtual servers (that's what I have) and up to dedicated servers and even fully managed AWS stuff, if that's the kind of power you need.

Enforcing CSS Syntax Style (and more!)

# May 16, 2017 By Chris Coyier

I bet you have a style that you write CSS in, for the most part. You like 4-spaces, say. You always have a space after braces and colons. You always put a space after rulesets. You only ever put one declaration on a line, and the only declarations that can be multi-line are when they are big blocks like a gradient or a comma-separated box-shadow.

You might take this a little further and codify this. Perhaps you have a team meeting about it and decide on how you want to style code. You write up a guide and make it available for everybody on the team to see.

(more…)

linting

Simple Offline Website

# May 12, 2017 By Chris Coyier

A little while back, Nicolas Bevacqua wrote the fantastic article Making a Simple Site Work Offline with ServiceWorker. We kinda tag teamed the idea. Nicolas did all the work, but I put forth the idea (and designed the crappy little website) that we were going to make work offline. I wanted a site that wasn't as complicated as a major web app with loads of resources and API usage, but wasn't as simple as a single HTML page.

Everything in that article is up-to-date and serves as a great reference to getting started with offline capabilities for a site. Just a few notes:

I updated the repo to make sure it was all working properly. Again the example isn't totally barebones, but simple. It has a little build script that represents fairly normal modern web development: Sass, asset concatenation/minification/sourcemaps, SVG icon system, and... shuffling things around to make a production offline version.
I moved the demo to a CodePen Project. Now it's easier to see the code and the site itself together, and easier to fork and play around.
I also tossed the site up at simpleoffline.website so you can see it all alone, which makes use of CodePen Projects ability to use Custom Domains.

(more…)

The `:focus-within` Pseudo Class

# May 12, 2017 By Chris Coyier

Nice find by Ian Devlin:

The :focus-within pseudo class becomes active when an element itself has focus or if any of its descendants does.

Selecting a parent element based on children is lonnng awaited. The crown jewel of that is :has(). I wonder if that's getting closer.

:focus-within parent selectors

The Issue with Preprocessing CSS Custom Properties

# May 11, 2017 By Chris Coyier

CSS has Custom Properties now. We've written about them a bunch lately. Browser support is good, but of course, old non-evergreen browsers like Internet Explorer don't have them and never will. I can see the appeal of authoring with "future CSS", and letting a preprocessor backport it to CSS that is compatible with older browsers. Babel for CSS! Why not?!

It makes me nervous though - because it's only some use cases of Custom Properties that you can preprocess. There are plenty of situations where what you are doing with a Custom Property just isn't possible to preprocesses. So if you do, you're putting yourself in a pretty weird situation.

(more…)

custom properties preprocessing

Create and Share Forms with Wufoo

# May 11, 2017 Sponsored

Designing web forms can be tough all by itself. There is a lot of markup to get right to make sure it's accessible and has good UX. There is a lot of CSS (properties you may not use every day) to wrestle control and make sure things look good.

Wufoo's got you covered there. It's almost trivially easy to build forms (even quite complex ones), and good design, good UX, and good accessibility come along for the ride.

But what happens after you submit a form? That's just as complicated as the HTML and CSS. There is validation, spam protection, and processing, to name a few. If you're really doing it right, you'd save the form data to a database before sending it along elsewhere (like to an email notification or integration). That way you always have the data in case anything goes wrong, or to look at in aggregate. Of course, you get that with Wufoo too, with full blown API access to all the data.