Article Archives

one comment

Fresh SVG Talks

I'm just back from CSS Dev Conf (Dave and I wrapped it up over on ShopTalk) and it was a pleasant surprise for me to have seen four (!) SVG talks back-to-back on the first day. Just a little confirmation SVG is a hot topic these days. Anytime anyone asked the room who was using SVG, nearly every hand in the room went up. Here's the presentations:

  1. Sara Soueidan (@SaraSoueidan): SVG For Web Designers (and Developers)
  2. Brenda

Sponsored: Syncano – Database. Backend. Middleware. Real-time. Microservices. All in one place.

Syncano is a backend platform to build powerful real-time apps more efficiently. Customize your backend with several different modules and minimize boilerplate code. Define your data schema, add real-time communication, integrate with any API, add microservice-like functionality without setting up a server or building out a custom API route, and more - all from one place. Get started with our Rest API or one of our open source libraries. Start building, take the time you need, and pay only when …

Embracing the Network

Patrick Hamann in a fast-paced talk on avoiding single points of failure. He suggests:

Developers at the Financial Times managed to shave 1.5s off the total download time by providing users with assets served over HTTP/2. I think this suggests just how different the future of performance and optimisation is going to look.

Related: Facebook has …

Redesigning The Toast

Karen McGrane tweets, dreamteam assembles, epic redesign ensues, story of entire process published.

Some minor nuggets #RelevantToMyInterets:

  • A big part of the effort was content strategy and taxonomy work. Cleaning up the tag and category system (and actually inventing different types of tags) meant they could offer many more interesting ways to browse the site.
  • They stayed on WordPress. They don't have too much positive to say about it, but I suspect it's about like this. They are
2 comments

Conference Talk → Web

Levels of awesomeness of what you can do with your presentation/slides:

  1. Not awesome: do nothing.
  2. Average: post your slides on something like Speaker Deck.
  3. A little awesome: make slides for the web in the first place, so they work on the web already.
  4. Very awesome: redesign your presentation for the web.

Scott Jehl just did this for his talk Delivering Responsibly and credits Frank Chimero (e.g. The Web's Grain) and Maciej Cegłowski (e.g. The Internet With A Human

Angled Edges with CSS Masks and Transforms

Jeremy Frank with a very simple and clever way to have elements not end perfectly horizontally, but at an angle:

.section { clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%); }

Just make sure there is enough bottom padding so nothing important gets cut off.…

CSSgram

CSSgram is a CSS library by Una Kravets recreating Instagram filters. The filters are pseudo elements on the <figure>, sitting on to of the <img>, using different gradients, opacities, and mix-blend-modes.

This continues her excellent work in experimenting with blend modes and filters, from vintage washouts to 3d image effects.…

Sponsor: Learn Web Design with Treehouse

Treehouse is structured, inexpensive, modern training to for learning how to be a web designer and developer. I love how they allow you learn in ways that match what you want to do. Wanna learn to build a game for iOS? They have a project you can do. Want to learn Ruby? That's a topic you can dig into. Want to learn what you need to become a web designer? That's a track.

Their Code Challenge Engine allows you …

ES6 Overview in 350 Bullet Points

Nicolas Bevacqua summarises everything ES6 with an invaluable list of each new feature and links to find more info about them:

My ES6 in Depth series consists of 24 articles covering most syntax changes and features coming in ES6. This article aims to summarize all of those, providing you with practical insight into most of ES6, so that you can quickly get started. I’ve also linked to the articles in ES6 in Depth so that you can easily go deeper …

13 comments

A Brief History of People Being Mad About Inputs

Jonathan Gillette, "Textarea, You Are A Sunken Nothing", 2004:

Yes, I mean it, Textarea. You are a Sunken Nothing. You have a beveled edge, but you are a worthless thing to jot upon. Bad pad! BAD PAD!!

[...]

Do you accept tabs? Oop. Well, my premature article is published now.

You are the most popular text editor. You are the worst text editor. Even Notepad has search and replace. And I can make it bigger and smaller.


Kroc Camen, …

3 comments

CSS-Tricks Chronicle XXIV

In which I blather about my recent trips and events, things going on here at CSS-Tricks, and over on CodePen and ShopTalk. A little about the big redesigns that have gone out. Probably a little oversharing.

Sponsor: UltraEdit – A Feature-Rich Text Editor

UltraEdit is a deeply customizable, lightning-fast and feature-rich text editor whose ability to open and edit large files is second to none. It's also edited code that’s been to Mars… but that’s all we’re allowed to say.

It's the web developer’s multi-tool. With features like integrated FTP, SSH and support for hundreds of languages, it’s the best you can get. Especially on Windows, where SSHing into your server normally requires a separate program.

Other features include file compare, code folding, …

6 comments

Rendering SVG Paths in WebGL

The following is a guest post by Matt DesLauriers. Matt combined a bunch of techniques and open source modules to build an incredible demo where simple recognizable icons explode into vector triangles only to reform into a completely new icon. Here he talks about some of the tools and ideas involved in making it happen, but beyond that, other approaches and other related concepts. This is some pretty advanced stuff and I hope it turns on some mental lightbulbs

114 comments

Dark Matter

The "Dark Matter Developer" moniker has been floating around for several years. Scott Hanselman introduced the term to describe developers who do not have active online or social personas:

They don't read a lot of blogs, they never write blogs, they don't go to user groups, they don't tweet or facebook, and you don't often see them at large conferences. Where are these dark matter developers online?…

28 comments

Reverse Text Color Based on Background Color Automatically in CSS

Over the weekend I noticed an interesting design for a progress meter in a videogame. The % complete was listed in text in the middle of the bar and didn't move. But that text was the same color as the background of the bar that was filling up from left to right. It seemed like the background was going to make the text invisible once they overlapped, but instead, the text color reversed to be white instead anywhere it overlapped …

Sponsor: FullStory – let your customers show you how to improve

FullStory records each customer session exactly as it rendered in their browser – unlocking pixel-perfect playback, DOM and console inspection, searchability on any page element or interaction, and more.

Watch and understand how real users are interacting with your site. Go beyond analytics to see why customers aren't taking the expected actions, or troubleshoot problem sessions exactly as they occurred without needing to recreate the bug after the fact. See what it's like to get the full story with a

Responsive Images in WordPress Core

In April 2014 Tim Evko created a WordPress plugin that used the CMS's capabilities to make using responsive images much easier (just do what you were already doing, reap benefits). He wrote about it here. Later it became the official plugin of the RICG. Now a year and a half later it was merged into WordPress core (meaning when v4.4 drops, it will be in there). …

3 comments

The WordPress Nav Walker Class: A Guided var_dump()

The following is a guest post by Scott Fennell. Scott is a WordPress theme & plugin developer in Anchorage, Alaska. Here, he customizes the default HTML output of WordPress' menu system to his liking, without damaging the useful things it already does.

There are many things about the WordPress nav menu system that I like, and a handful of things I really dislike. The things I dislike happen to trigger my pet peeves: Markup-bloat and non-SMACCS-ish class …

Windows Editors and Shells

Dave Rupert is switching to Windows in part because the web dev crowd is a little heavy on the Apple, which isn't true, generally, of the user's we build for.

But not only is he switching, he's documenting the important developer-y stuff that he's having to go through in the transition. …

Web Font Anti-Patterns

A series of articles by Bram Stein on typography, performance and modern day best-practices for using fonts. I particularly like what Bram has to say on overusing web fonts:

An­other re­cent trend is us­ing web fonts where they’re not ap­pro­pri­ate. Don’t use web fonts if you don’t need them. They’re not the right an­swer for every­thing. If you find your­self wrap­ping each let­ter or word in a span el­e­ment in or­der to style them — stop. Use SVG.

Most …

The Tragicomic History of CSS Color Names

Ever wondered why we have CSS color names like tomato, salmon and darkgoldenrod? Ars Technica on the evolution (and convolution) of the "Named Colors" spec:

Backlash ensued. The color database had been subjected to the whims of so many different programmers that it became deeply disorganized, leading some to argue it had no place in CSS. Critics attacked its naming scheme: “dark gray” was lighter than “gray”; there was a “medium violet red” but no “violet red”; …

21 comments

The Snowballing of Practice

I really want to be a better musician. Someday, I will be. I know what it takes: practice.

I want to get really good. I want people to hear me play and say to themselves "hey that guy really knows how to play." I want to be able to sit down with other musicians and make things happen. I want to understand music in a lot deeper way than I do now. That's going to take a boatload of …

7 comments

Accelerated Mobile Pages Project

New Google thing, aimed at unsucking the "mobile" web:

The Accelerated Mobile Pages (AMP) Project is an initiative to improve the mobile web and enhance the distribution ecosystem. If content is fast, flexible and beautiful, including compelling and effective ads, we can preserve the open web publishing model as well as the revenue streams so important to the sustainability of quality publishing.…

GreenSock MorphSVGPlugin

Greensock really knocked it out of the park with this one. You know shape morphing? It's a cool effect with loads of uses ranging from practical to artistic. SMIL can do it, but the future of that is in jeopardy. Other JavaScript libraries can do it, but they are bound by the same limitation as SMIL: they need to have the same number of points. This new Greensock plugin isn't bound by that, meaning you could morph an apple …

A List Apart Live Panel: The State of Front End Dev

I'm going to be moderating an online panel (Google Hangouts) on Wednesday, November 4, 2015 with Jina Bolton, Una Kravets, Rebecca Murphey, and Marco Rogers all about front end stuff. We held a little planning and prep session for it the other night and a lot of interesting discussion was had, so I bet y'all will enjoy it.…

16 comments

Creating a CSS Sliding Background Effect

The "trick" of sliding backgrounds in CSS is not new. In fact, the first time I came across it might have been a couple of years ago on the Valio Con site (the current design doesn't have it anymore). I happened to notice it on a couple of new sites I visited today, however, and thought it would be worth sharing.…

Sponsor: An Event Apart

I love An Event Apart conferences, and I bet you would too.

It's where ideas like responsive design and mobile first were launched, and where this year's attendees are already learning how grid layout, CSS shapes, and other advanced techniques will fundamentally change…well, everything.

San Francisco is coming up November 2-4. If you can't make that, they just released the 2016 schedule with cities all over the U.S., including a first-time visit to Nashville and an extra-special Orlando event at …

Project Comet

Speaking of in-development software targeted at screen design. Also check out the videos in Khoi Vinh's post. The repeat grid demo is pretty compelling.…

6 comments

Defining and Dealing with Technical Debt

We're all familiar with debt, right? It's that concept where an amount is owed from one person (the borrower) to another (the lender). We often use it to describe financial situations. For example, I borrow money from a bank. I now have debt with them in the amount of how much money they lent me (plus interest!) and expect me to repay it.

Debt isn't always about money. In fact, we run into it as front-end developers all the time …

BoxBox

BoxBox is a design app that’s currently under development and the designers, Kevin Lynagh and Ryan Lucas, have written a series of articles describing their thoughts that led to its creation. First, they outline the problems with the current state of applications:

We’re still primarily using legacy print design applications to create modern, responsive software interfaces. This has created a unique set of challenges that plague the UI design workflow.

Later, they delve into the serious lack of responsive design …

2 comments

How to Make Charts with SVG

In my first post about making charts, I looked at methods that solely relied on CSS. I argued that this wasn’t the best option in most cases; there are just too many tricky design and development hurdles to overcome. Generally speaking, it’s best to make charts with a combination of SVG, JavaScript, and CSS.…

RAIL

Paul Irish and Paul Lewis describe a way for us to think about web performance: RAIL (Response, Animation, Idle and Load). It's designed to break up each moment of a user’s experience into actions which can then be specifically optimized.

Very few of us have unlimited time to throw at optimization work, far from it, and we need criteria that help us decide what’s important to optimize (and what’s not!). When all is said is done, we want and need …

CSS Stacking Contexts

Tiffany B. Brown breaks down what stacking contexts are in a very quick and understandable way. First, what makes a new context, then:

Children of a stacking context are painted from bottom to top in the following order.

  1. Elements with a negative stack level, typically elements with z-index: -1
  2. Elements with a position value of static.
  3. Elements with a stack level of 0, typically positioned elements with a z-index value of auto.
  4. Elements with positive stack levels,

Image Diffing in CSS

A bonafide CSS trick by Franklin Ta. Position the images on top of each other at 50% opacity and inverted colors. Or, as Bennett Feely pointed out, use background-blend-mode: difference; if they are background images.…

How to undo (almost) anything with Git

A handy guide to fixing common mistakes with Git from Joshua Wehner:

One of the most useful features of any version control system is the ability to "undo" your mistakes. In Git, "undo" can mean many slightly different things.

When you make a new commit, Git stores a snapshot of your repository at that specific moment in time; later, you can use Git to go back to an earlier version of your project.…

16 comments

Breaking Up Large Files Into Sections

It's a 2,000 line behemoth. It's hard to browse or easily find what you are looking for in there. What can be done? This article isn't about actually dismantling the file (although that would be a good one), it's mostly about what to do when you need to leave the file that way.…

5 comments

Those Words Again

It's interesting to see how many people over time have come to the conclusion that certain seemingly-harmless words can be problematic while communicating:

Back to the :roots

simurai:

I'll try to show a few ways how you can make the cascade be your friend and maybe reduce the need of overriding and thus encounter less fighting with specificity.…

20 comments

Understanding JavaScript Constructors

The following is a guest post by Faraz Kelhini. Some of this stuff is out of my comfort zone, so I asked Kyle Simpson to tech check it for me. Kyle's answer (which we did during an Office Hours session) was very interesting. It was: 1) This article is technically sound. JavaScript doesn't really have classes in a traditional sense and this is the way most people shoehorn them in. 2) We may want to stop shoehorning them in.

20 comments

How To Do Knockout Text

There are a couple of ways to do knockout text (text that appears cut out, such that you can see a background behind it) on the web. There is one fairly new way that has pretty decent browser support that is pretty interesting. But let's cover all the ground.…

59 comments

Discussion Around Ad Blocking

The discussion has heated up with the drop of iOS 9 and its ability to run apps that block ads. That was just the spark for the conversation, as ad blocking isn't a new thing. Desktop browsers have had extensions that can block ads for a long time. There are ad blockers that work for Android. Not a new concept, just new to iOS.

Let's round up some news and opinion.…

We have a pretty good* newsletter.