Saving SVG with Space Around It from Illustrator

Say you have a graphic like this in Adobe Illustrator: Note how the art doesn’t touch the edges of the artboard. Say you want that space around it, and you want to save it as SVG for use on the web. Nope: Save for Web THE CLAW! You’ll see space around here, but unfortunately the classic Save for Web dialog doesn’t export as SVG at all, so that’s not really an option. They are already calling this a “legacy” feature, so I imagine it’ll be gone soon. Nope: Export As The “Export As” feature supports SVG, and you’ll likely be pretty pleased with the output. It’s fairly optimized, cruft-free, and… Read More

Continue Reading

Using Custom Properties to Modify Components

Instead of using custom properties to style whole portions of a website’s interface I think we should use them to customize and modify tiny components. Here’s why. Whenever anyone mentions CSS custom properties they often talk about the ability to theme a website’s interface in one fell swoop. For example, if you’re working at somewhere like a big news org then we might want to specify a distinct visual design for the Finance section and the Sports section – buttons, headers, pull quotes and text color could all change on the fly. Custom properties would make this sort of theming easy because we won’t have to add a whole bunch… Read More

Continue Reading

Building Flexible Design Systems

Yesenia Perez-Cruz talks about design systems that aren’t just, as she puts it, Lego bricks for piecing layouts together. Yesenia is Design Director at Vox, which is a parent to many very visually different brands, so you can see how a single inflexible design system might fall over. Successful design patterns don’t exist in a vacuum. Direct Link to Article — Permalink Building Flexible Design Systems is a post from CSS-Tricks

Continue Reading

Text Input with Expanding Bottom Border

Petr Gazarov published a pretty rad little design pattern in his article Text input highlight, TripAdvisor style. It’s a trick! You can’t really make an stretch like that, so Petr makes a to sync the value too, which acts as the border itself. The whole thing is a React component. If you’re willing to use a instead, you could do the whole thing in CSS! See the Pen Outline bottom by Chris Coyier (@chriscoyier) on CodePen. Although that also means no placeholder. Direct Link to Article — Permalink Text Input with Expanding Bottom Border is a post from CSS-Tricks

Continue Reading

Adapting JavaScript Abstractions Over Time

Even if you haven’t read my post The Importance Of JavaScript Abstractions When Working With Remote Data, chances are you’re already convinced that maintainability and scalability are important for your project and the way toward that is introducing abstractions. For the purposes of this post, let’s assume that an abstraction, in JavaScript, is a module. The initial implementation of a module is only the beginning of the long (and hopefully lasting) process of their life-being. I see 3 major events in the lifecycle of a module: Introduction of the module. The initial implementation and the process of re-using it around the project. Changing the module. Adapting the module over time.… Read More

Continue Reading

Grid areas and the element that occupies them aren’t necessarily the same size.

That’s a good little thing to know about CSS grid. I’m sure that is obvious to many of you, but I’m writing this because it was very much not obvious to me for far too long. Let’s take a close look. There are two players to get into your mind here: The grid area, as created by the parent element with display: grid; The element itself, like a , that goes into that grid area. For example, say we set up a mega simple grid like this: .grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1rem; } If we put four grid items in there, here’s what it looks like… Read More

Continue Reading

Form Validation Part 3: A Validity State API Polyfill

In the last article in this series, we built a lightweight script (6kb, 2.7kb minified) using the Validity State API to enhance the native form validation experience. It works in all modern browsers and provides support IE support back to IE10. But, there are some browser gotchas. Not every browser supports every Validity State property. Internet Explorer is the main violator, though Edge does lack support for tooLong even though IE10+ support it. And Chrome, Firefox, and Safari got full support only recently. Today, we’ll write a lightweight polyfill that extends our browser support all the way back to IE9, and adds missing properties to partially supporting browsers, without modifying… Read More

Continue Reading

A Pretty Good SVG Icon System

I’ve long advocated SVG icon systems. Still do. To name a few benefits: vector-based icons look great in a high pixel density world, SVG offers lots of design control, and they are predictable and performant. I’ve also often advocated for a SVG icon system that is based on s (an “SVG sprite”) and the element for placing them. I’ve changed my mind a little. I don’t think that is a bad way to go, really, but there is certainly a simpler (and perhaps a little better) way to go. Just include the icons inline. That’s it. Sorry if you were hoping for something fancier. Like this: Add to Cart Or… Read More

Continue Reading

Move Modal in on a Path

Have you seen those fancy interactions where a modal window flys down from the top of the page? Maybe it slides in from the side while it fades up to full opacity? Maybe it falls in from above and goes from blurry to focused? Kinda cool, if it fits the vibe of your website. They always seem to move in a straight line though. Thanks to the fairly new offset-path, they don’t have to! The offset-path property in CSS exists so that you can place an element in some position along a path. Like, the same path syntax we’re used to from SVG. Here’s a super simple path. Literally just… Read More

Continue Reading

Stickybits: an alternative to `position: sticky` polyfills

Stickybits is a small JavaScript utility plugin. It’s goal is not to get in the way. It does one thing well: help with sticky elements. It is not dependent on other JavaScript Plugins, can be imported via npm, and approaches sticky elements in a very utility-oriented way. Solving the sticky element problem can lead to sticky situations When navigating sites, it is common to see HTML elements, like banners and navigations, sticking to the top and bottom of the browser. There are a couple of ways that can be done. One, there is position: sticky, a native CSS feature. You might use it something like this: header { position: sticky;… Read More

Continue Reading

Form Validation Part 2: The Constraint Validation API (JavaScript)

In my last article, I showed you how to use native browser form validation through a combination of semantic input types (for example, ) and validation attributes (such as required and pattern). While incredibly easy and super lightweight, this approach does have a few shortcomings. You can style fields that have errors on them with the :invalid pseudo-selector, but you can’t style the error messages themselves. Behavior is also inconsistent across browsers. User studies from Christian Holst and Luke Wroblewski (separately) found that displaying an error when the user leaves a field, and keeping that error persistent until the issue is fixed, provided the best and fastest user experience. Unfortunately,… Read More

Continue Reading

Form Validation Part 1: Constraint Validation in HTML

Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp’s embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validation plugin, and some custom MailChimp code. In fact, that setup is what inspired this new series about modern form validation. What new tools do we have these days for form validation? What is possible? What is still needed? In this series, I’m going to show you two lightweight ways to validate forms on the front end. Both take advantage of newer web APIs. I’m also going to teach you how to push browser support for… Read More

Continue Reading
slide-down

CSS Animations vs Web Animations API

There is a native API for animation in JavaScript known as the Web Animations API. We’ll call it WAAPI in this post. MDN has good documentation on it, and Dan Wilson has a great article series. In this article, we’ll compare WAAPI and animations done in CSS. A note on browser support WAAPI has a comprehensive and robust polyfill, making it usable in production today, even while browser support is limited. As ever, you can check Can I Use for browser support data. However, that doesn’t provide very good info on support of all the sub features of WAAPI. Here’s a checker for that: See the Pen WAAPI Browser Support… Read More

Continue Reading

Introduction to Webpack: Entry, Output, Loaders, and Plugins

Front-end development has shifted to a modular approach, improving the encapsulation and structure of codebases. Tooling became a critical part of any project, and right now there are a lot of possible choices. Webpack has gained popularity in the last years because of its power and scalability, but some developers found its configuration process confusing and hard to adopt. We’ll go step by step from an empty configuration file to a simple but complete setup to bundle a project. This article assumes basic understanding of CommonJS notation and how modules work. Concepts Unlike most bundlers out there, the motivation behind Webpack is to gather all your dependencies (not just code,… Read More

Continue Reading
toggle

Using Mixins in Vue.js

It’s a common situation: you have two components that are pretty similar, they share the same basic functionality, but there’s enough that’s different about each of them that you come to a crossroads: do I split this component into two different components? Or do I keep one component, but create enough variance with props that I can alter each one? Neither of these solutions is perfect: if you split it into two components, you run the risk of having to update it in two places if the functionality ever changes, defeating DRY premises. On the other hand, too many props can get really messy very quickly, and force the maintainer,… Read More

Continue Reading

Free Guide to Using cPanel & WordPress​

Managed WordPress hosting is a great choice if you need a hosting solution that’s optimized for WordPress. But it’s only for WordPress. What if you need more? What if you need email hosting? What if you need to run other software alongside WordPress? What if you need more control than what managed WordPress hosting allows, but without the complexity of a VPS? There’s an easy solution: host everything in one place, and manage it all with the powerful cPanel dashboard. You’ll learn how in this free guide to cPanel & WordPress. Direct Link to Article — Permalink Free Guide to Using cPanel & WordPress​ is a post from CSS-Tricks

Continue Reading

How to improve your site’s UX

Let’s face it, it’s tough to be a web designer today. You have to stand up in front of the class and let people pick apart the thing you spent 10 hours on the night before. But what if you can really support your designs by actual data and feedback, directly from your users and visitors, ultimately improving the overall experience. By combining both Analytics and Feedback tools, Hotjar gives you the ‘big picture’ of how to improve your site’s user experience and performance. The Analytics tools allow you to measure and observe user behavior (what users do) while the Feedback tools allow you to hear what your users have… Read More

Continue Reading
www-img2-lawson-800w-opt

World Wide Web, Not Wealthy Western Web

Bruce Lawson explores many of the misconceptions that web designers might have when building websites. The crux of his argument is that we should be focusing on designing for users that are just getting online and for those that have frustratingly slow internet connection speeds. He even makes a bold prediction: Many of your next customers will come from the area circled below, if only because there are more human beings alive in this circle than in the world outside the circle. Direct Link to Article — Permalink World Wide Web, Not Wealthy Western Web is a post from CSS-Tricks

Continue Reading

An intro to web components with otters

Monica Dinculescu on web components and why we might care: … before web components came around, you had to wait on all browsers to agree on a new element (like, a date picker). And even after they agreed on a new element, it took them yeaaaaars to implement it… With web components, web developers get to write such elements, so that you don’t have to wait for 10 years before all browsers agree that they should implement a date picker. I struggle with trying to figure out if web components (with Polymer or not) are really “the future” or not. People definitely haven’t adopted them with the same ferocious appetite… Read More

Continue Reading
book-type

The Equilateral Triangle of a Perfect Paragraph

Still, too many web designers neglect the importance of typography on the web. So far, I’ve only met a few that really understand typography and know how to apply that knowledge to their work. And the lack of knowledge about typography doesn’t come from ignorance. I learned that web designers are commonly either self-taught and haven’t grasped the importance of typography yet, or they actually studied design but typography was just one of the classes they had to attend. I created the Better Web Type course to help raise awareness of the important role typography plays on the web. In my opinion, both web designers and web developers should learn… Read More

Continue Reading
content-trap

A Little Example of Data Massaging

I’m not sure if “data massaging” is a real thing, but that’s how I think of what I’m about to describe. Dave and I were thinking about a bit of a redesign for ShopTalk Show. Fresh coat of paint kinda thing. Always nice to do that from time to time. But we wanted to start from the inside out this time. It didn’t sound very appealing to design around the data that we had. We wanted to work with cleaner data. We needed to massage the data that we had, so that it would open up more design possibilities. We had fallen into the classic WordPress trap Which is… just… Read More

Continue Reading
grid-2

An Introduction to the `fr` CSS unit

With all the excitement around CSS Grid, I haven’t seen as much talk about the new fr CSS length unit (here’s the spec). And now that browser support is rapidly improving for this feature, I think this is the time to explore how it can be used in conjunction with our fancy new layout engine because there are a number of benefits when using it; more legible and maintainable code being the primary reasons for making the switch. To get started, let’s take a look at how we’d typically think of building a grid in CSS. In the example below, we’re creating a four column grid where each column has… Read More

Continue Reading
react_lecon_1

Formulaires en React.js : Dans quels cas Utiliser Refs?

React.js fournit deux manières de récupérer les valeurs depuis les éléments. La première méthode consiste à implémenter ce qu’on appelle les “controlled components” (voir ce billet sur le sujet) et la seconde est d’utiliser la propriété ref de React. Les “Controlled components” sont assez lourds à mettre en place. La définition des caractéristiques d’un controlled component est que la valeur affichée est liée à l’état du component . Pour mettre à jour la valeur on execute une fonction attachée à l’écouteur onChange sur l’élément form. La fonction onChange met à jour l’état de la propriété, qui à son tour met à jour la valeur de l’élément form. (Avant de s’enfoncer plus loin, si vous voulez… Read More

Continue Reading
offline-site

Simple Offline Website

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… Read More

Continue Reading
field-notes

Websites We Like: May 2017

It’s been far too long since we rounded up some of the most interesting websites out there. But this time we have a diverse round-up of whacky interfaces and beautiful layouts to look at. Let’s dive straight in! Nick Jones’ Portfolio The portfolio of Nick Jones is one of the neatest personal websites I’ve ever seen. As you flip through each page and project that Nick has worked on, the interface rotates and zooms in as you get closer to the end. Not only that but the interface changes color and the tiny animation on the title of each post draws your eye to it. In fact, I think this… Read More

Continue Reading

Web Hosting with Media Temple

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… Read More

Continue Reading

Announcing JSON Feed

Manton Reece and Brent Simmons have just published their thoughts on JSON Feed which is a new standard for making a feed, like a collection of blog posts. The format itself is similar to RSS and Atom but since it’s in JSON it’s easier to read and a lot more familiar to developers: For most developers, JSON is far easier to read and write than XML. Developers may groan at picking up an XML parser, but decoding JSON is often just a single line of code. Our hope is that, because of the lightness of JSON and simplicity of the JSON Feed format, developers will be more attracted to developing… Read More

Continue Reading
good-bad-ugly

Easing Linear Gradients

Linear gradients are easy to create in CSS and are extremely useful. As we’ll go through in this article, we can make them visually much smoother by creating them with non-linear gradients. Well, non-linear in the easing sense, anyway! Here’s an example that shows how harsh a standard linear-gradient() can be compared to how smooth we can make it by easing it: Screencap from “The Good, the Bad and the Ugly” with gradients overlaid.Il buono (the good): Smooth gradients in CSS that blends into their context. Il cattivo (the bad): No text protection (bad accessibility). Il brutto (the ugly): Standard linear gradients with sharp edges. In this article, we’ll focus… Read More

Continue Reading
filter_and_clip_path

Methods for Contrasting Text Against Backgrounds

It started with seeing a recent Pen of Mandy Michael’s text effects demos. I’m a very visual creature, so the first thing I noticed was the effect, not the title (which clearly states how the effect was achieved). Instantly, my mind went “blend modes!”, which turned out to be wrong. The demo actually uses clip-path. First of all, the text is duplicated. We have black text below as the actual text content of the element and the white text above as the value of the content property (taken from a data attribute which gets updated via JS). These two are stacked one on top of each other (they completely overlap).… Read More

Continue Reading