Archive | article

RSS feed for this section

Using Default Parameters in ES6

I’ve recently begun doing more research into what’s new in JavaScript, catching up on a lot of the new features and syntax improvements that have been included in ES6 (i.e. ES2015 and later).

You’ve likely heard about and started using the usual stuff: arrow functions, let and const, rest and spread operators, and so on. One feature, however, that caught my attention is the use of default parameters in functions, which is now an official ES6+ feature. This is …


Using Default Parameters in ES6 is a post from CSS-Tricks

Direction Aware Hover Effects

This is a particular design trick that never fails to catch people’s eye! I don’t know the exact history of who-thought-of-what first and all that, but I know I have seen a number of implementations of it over the years. I figured I’d round a few of them up here.

Noel Delagado

See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado (@noeldelgado) on CodePen.

The detection here is done by tracking the mouse position on …


Direction Aware Hover Effects is a post from CSS-Tricks

Article Performance Leaderboard

A clever idea from Michael Donohoe: pit websites against each other in a performance battle! Donohoe is a long-time newsroom guy, so this is specifically about article pages for major publications.

Lets state the obvious, this is an imperfect and evolving measure and the goal is to foster discussion and rivalry in making our pages better, faster, and lighter. Bear in mind this was built as an internal tool at Hearst Newspapers to track changes as we rollout our new …


Article Performance Leaderboard is a post from CSS-Tricks

CSS Basics: The Syntax That Matters & The Syntax That Doesn’t

When you’re starting to play around with CSS at the very beginning, like any other language, you have to get used to the syntax. Like any syntax, there are a bunch of little things you need to know. Some characters and the placement of them is very important and required for the CSS to work correctly. And some characters are more about clean looking code and generally followed standards but don’t matter for the CSS to work.

First, so …


CSS Basics: The Syntax That Matters & The Syntax That Doesn’t is a post from CSS-Tricks

Web Animation Workshops Dates for 2018 Announced

“I’m getting a raise!”

This was my favorite quote from last year’s Web Animation Workshops, as Val and I covered performance, tooling, and creating animations for SVG, CSS, JS and React.

Now we’re gearing up for another round of Web Animation Workshops in 2018! But we’re only offering two workshops this time since both of us have moved away from full-time consulting.

The aim of these workshops is to level up your animation skills in just two days and …


Web Animation Workshops Dates for 2018 Announced is a post from CSS-Tricks

Website Sameness™

Here’s captain obvious (yours truly) with an extra special observation for you:

BAR WITH SPECIAL MESSAGE

LOGO PLATFORM↓ SOLUTIONS↓ PRICING

BOLD STATEMENT

CALL TO ACTION

GRID OF LITTLE ILLUSTRATIONS

LARGE BOLD FOOTER
©2018

— Chris Coyier (@chriscoyier) January 30, 2018

It came across as (particularly trite) commentary about Website Sameness™. I suppose it was. I was looking at lots of sites as I was putting together The Power of Serverless. I was actually finding it funny how obtuse the …


Website Sameness™ is a post from CSS-Tricks

The Best UX is No User Interface at All

We have to anticipate how the user is going to think or react and everyone is different. Well designed systems can get us close to intuitive. .Even a perfect UI would be less than ideal. The ideal is to have no middleman at all. No translation layer. Historically speaking, this hasn’t been possible because we can’t “speak” to computers.


The Best UX is No User Interface at All is a post from CSS-Tricks