Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually

In CSS, some properties have shorthand. One property that takes separated values. Syntactic sugar, as they say, to make authoring easier. Take transition, which might look something like: .element { transition: border 0.2s ease-in-out; } We could have written it like this: .element { transition-property: border; transition-duration: 0.2s; transition-timing-function: ease-in-out; } Every “part” of the shorthand value has its own property it maps to. But that’s not true for everything. Take box-shadow: .element { box-shadow: 0 0 10px #333; } That’s not shorthand for other properties. There is no box-shadow-color or box-shadow-offset. That’s where Custom Properties come to save us! We could set it up like this: :root { –box-shadow-offset-x:… Read More

Continue Reading
tools

Which Projects Need React? All Of Them!

When does a project need React? That’s the question Chris Coyier addressed in a recent blog post. I’m a big fan of Chris’ writing, so I was curious to see what he had to say. In a nutshell, Chris puts forward a series of good and bad reasons why one might want to use React (or other similar modern JavaScript libraries) on a project. Yet while I don’t disagree with his arguments, I still find myself coming to a different conclusion. So today, I’m here to argue that the answer to “When does a project need React?” is not “it depends”. It’s “every time”. React vs Vue vs Angular vs…… Read More

Continue Reading
current-css-tricks-browser-stats

Think you know the top web browsers?

If I had to blindly guess about global marketshare, I would have gotten it wrong. I probably would have forgotten about UC browser (kind of the point of Peter O’Shaughnessy’s article) that’s so huge in Asia. I would have guessed Firefox has a slight edge on Safari (turns out Firefox is half the share of Safari), and that Edge would be outpacing IE by now (also only half). This is good dinner party conversation fodder, but I wouldn’t base any major decision making on it. The only stats that matter at your websites stats. Here’s this sites, in the last 7 days. There is always the chicken-or-egg conundrum though. If… Read More

Continue Reading
ruler

Focusing a `background-image` on a Precise Location with Percentages

Let’s say you have an element with a background-image, where only part of the image is visible, because the image is bigger than the element itself. The rest is cropped away, outside the element. Now you want to move that background-image such that you’re focusing the center of the element on a specific point in it. You also want to do that with percentage values rather than pixels. We’re going to have to get clever. This is going to involve some math. Let’s use this as our image, which has markers for sizing: And here’s our element, with that background-image applied. Notice we can only see the (top) left of… Read More

Continue Reading
file-system-and-html

The Can-Do’s of CodePen Projects

We just recently launched Projects, the latest big feature over on CodePen. It’s quite a bit different than the Pen Editor, so let’s take a look at all the things it can do! A Complete File System, and Complete HTML Files With CodePen Projects, you get a sidebar of files for you to put whatever files you like. That’s different than the Pen Editor on CodePen, which only gives you the HTML, CSS, and JavaScript editor to work with. While that’s super convenient for many types of demos, it can be limiting. What if you need multiple HTML files to link between? What if you need partials to include as… Read More

Continue Reading
dont-care

Total HTML Agnosticism

A couple of good posts on technology agnosticism lately. Brad Frost says the design system itself is higher level than any particular technology: … it doesn’t bet the farm on any one technology, the system is able to adapt to inevitable changes to tools, technologies, and trends. Jonathan Snook thinks Mustache is good choice for otherwise technologically agnostic templating: I like it because of its simplicity and because it requires the heavy work with the data to be done before it sees a template. Here’s a slide I used at a recent workshop: What I was mostly referring to is total HTML agnosticism. It doesn’t matter (to me) where the… Read More

Continue Reading

When Does a Project Need React?

You know when a project needs HTML and CSS, because it’s all of them. When you reach for JavaScript is fairly clear: when you need interactivity or some functionality that only JavaScript can provide. It used to be fairly clear when we reached for libraries. We reached for jQuery to help us simplify working with the DOM, Ajax, and handle cross-browser issues with JavaScript. We reached for underscore to give us helper functions that the JavaScript alone didn’t have. As the need for these libraries fades, and we see a massive rise in new frameworks, I’d argue it’s not as clear when to reach for them. At what point do… Read More

Continue Reading

Let’s Define Exactly What Atomic CSS is

As Atomic CSS (also known as Functional CSS) has been gaining in popularity, some confusion has occurred about similar related terms. The goal of this article is to clarify this terminology. There are other projects that use the term Atomic, including Atomic Web Design by Brad Frost. Atomic CSS is a completely separate concept from these. Let’s start by defining Atomic CSS: Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function. There are different ways to write Atomic CSS (see variations below). One example would be this: .bgr-blue { background-color: #357edd; } The term “Atomic CSS” was coined by Thierry… Read More

Continue Reading
stepintonextfunctioncall

Debugging Tips and Tricks

Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here’s a compilation of some of them, as well as some from the community. We’ll start with some core tenants and then drill down to more specific examples. Main… Read More

Continue Reading
firebase

Say You Need a Persistent Data Store Entirely on the Client-Side

You got your localStorage. You got your IndexedDB. Those are both client side and capable of storing data, but they are limited to a single browser. I can’t store data there from my laptop then come back later on my phone and have the same data. That’s the kind of thing websites have back-end databases for. The data is stored elsewhere, so you have access everywhere. But what if you don’t want to deal with a back end? There are third-party solutions for this. Firebase Firebase has a “Realtime Database” feature, so not only can you gather, store, and send data from the client side, that data is synced across… Read More

Continue Reading

Brotli and Static Compression

Content compression can be as simple as flipping a switch, but there’s a lot to consider beyond that. We pretty well know what we need to compress, but what about configuring compression? Or static versus dynamic compression? What about Brotli? By now, Brotli enjoys support in a good chunk of browsers in use. While it provides performance advantages in many situations, there are some ins and outs that can prove challenging. At its highest compression setting, Brotli provides superior compression ratios to gzip, but the compression speed at this setting is slow enough that the benefit is squandered when content is dynamically compressed. What you really want in cases such… Read More

Continue Reading
example-1-resized

Smooth Scrolling and Accessibility

Smooth scrolling (the animated change of position within the viewport from the originating link to the destination anchor) can be a nice interaction detail added to a site, giving a polished feel to the experience. If you don’t believe me, look at how many people have responded to the Smooth Scrolling snippet here on CSS-Tricks. Smooth scrolling vs abrupt jumpsRegardless of how you implement the feature, there are a few accessibility issues that should be addressed: focus management and animation. Focus Management It is important to ensure that all content can be accessed with the keyboard alone because some users 100% rely on the keyboard for navigation. So, when a… Read More

Continue Reading

ES6 modules support lands in browsers: is it time to rethink bundling?

Modules, as in, this kind of syntax right in JavaScript: import { myCounter, someOtherThing } from ‘utilities’; Which we’d normally use Webpack to bundle, but now is supported in Safari Technology Preview, Firefox Nightly (flag), and Edge. It’s designed to support progressive enhancement, as you can safely link to a bundled version and a non-bundled version without having browsers download both. Stefan Judis shows: Not bundling means simpler build processes, which is great, but forgoing all the other cool stuff a tool like Webpack can do, like “tree shaking”. Also, all those imports are individual HTTP requests, which may not be as big of a deal in HTTP/2, but still… Read More

Continue Reading

SEO and Location

This is just a baby thought I had about SEO. I overheard some folks at the gym I go to talking about SEO. It was a part-owner of the gym, talking about an SEO firm they were in contact with to help them with the gym website and reaching more people. A concern all businesses share: how do we sell to more people. In the context of a gym, sales will be limited to a pretty narrow geographic region. With rare exception, people don’t drive clear across town to go to the gym, because gyms are largely a commodity and dotted all over cities. So the available market is humans… Read More

Continue Reading
GC_Screenshot_-_Project_Overview

​Content doesn’t need to delay website launches

Whether content is late, structured differently to the design or lost in email threads – content always gets the blame for website project delays. Now you can use GatherContent to organize and produce website content without the chaos. 1000s of teams worldwide use GatherContent to implement a structured process for content that helps launch website projects on time. GatherContent integrates with WordPress, Drupal, Sitecore, Kentico, AEM, Sitefinity, Umbraco, and more! See how GatherContent can streamline your website content production – try it for your projects with a free 30 day trial! Here’s some of the internal screens of what it’s like working in there: Project OverviewItem EditorNote from Chris: I… Read More

Continue Reading

Interesting Takes on Log in / Sign Up Forms

A roundup of simple forms that have interesting UI interactions and animations. I can’t guarantee the final demo for each of them is perfectly accessible or measurably improves UX or anything, but that doesn’t mean that you can’t take inspiration from the ideas and make sure your implementation of them does. Direct Link to Article — PermalinkInteresting Takes on Log in / Sign Up Forms is a post from CSS-Tricks

Continue Reading

Pong with SVG.js

Everybody loves the vintage game Pong, right? We sure do. What’s more fun? Building it yourself! That’s why we decided to create one with SVG.js – to highlight some aspects of our library. It might seem like a complex idea for a small tutorial, but as you’ll see, it’s simpler than it sounds. Let’s dive into it! Here’s the finished product: See the Pen Fully functional Pong game with effects by Wout Fierens (@wout) on CodePen. Getting started SVG.js is available through Github, npm, bower or CDN.js. There are plenty of options for getting your hands on SVG.js, so use whatever you are most comfortable with. Start out by creating… Read More

Continue Reading
arnaques-web

Comment choisir son prestataire Web, quels sont les pièges à éviter?

Aujourd’hui, j’ai décidé de vous parler des prestations web en général, ainsi que de mon point de vue personnel sur cet univers, et les pièges à éviter. Cela fait maintenant 7 mois que j’ai quitté mon poste chez un (le plus) grand hébergeur Européen, et grand spécialiste du Cloud . Mon poste consistait à régler diverses problématiques sur des sites en production, avec un aspect technique assez développé, a savoir résoudre des problèmes courants tels que: Remettre des sites en ligne suite à des modifications hasardeuses. Aider des développeurs  et autres ‘administrateurs système’ à faire leur métier. Donner des petits conseils sur le référencement, la configuration de serveurs, de noms de… Read More

Continue Reading
firefox-screenshot

Using DevTools to Tweak Designs in the Browser

Let’s look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy! Toggling Classes With Checkboxes This is useful when trying to pick a design from different options or to toggle the active state of an element without adding the class manually in DevTools. To achieve this, we could use different classes and scope styles inside them. So if we want to see different options for a banner design, we could so something like: .banner-1 { /* Style variation */ } .banner-2 { /* Style variation */ } Google Chrome gives us the ability to add… Read More

Continue Reading

Recreating Legendary 8-bit Games Music with the Web Audio API

Greg Hovanesyan, who recently posted here an Introduction to the Web Audio API, follows up with another huge post on how to use it to create iconic music from our nerds past, like sounds from The Legend of Zelda and Metroid. The final demo comes as a project you can explore. And don’t miss our recent roundup of some of the best Web Audio API Pens ever on CodePen. Direct Link to Article — PermalinkRecreating Legendary 8-bit Games Music with the Web Audio API is a post from CSS-Tricks

Continue Reading
s_7887F2C7EE34D61FF16137826B5D88AC920BD1E146FAAC42AB4B6AB5B2DEAC6D_1488871641697_Terminology2x

Building a CSS Grid Overlay

Let’s take a look at what it takes to build a grid overlay with CSS. It will be responsive, easily customizable and make heavy use of CSS variables (known more accurately as “CSS custom properties”). If you aren’t familiar with custom properties, I’d highly recommend reading What is the difference between CSS variables and preprocessor variables? and watching Lea Verou’s enlighting talk on using them. This grid overlay that we’re building will consider a developer tool, as in, a tool just for us, not really our users. So, let’s not worry too much about browser support (If you do care, check out caniuse… data on custom properties). While it’s impossible… Read More

Continue Reading
UfVrlid

Introduction to The Elm Architecture and How to Build our First Application

Creating our first Elm application might seem like a hard task. The new syntax and the new paradigm can be intimidating if you haven’t used other functional programming languages before. But once you create your first application, you will understand why Elm has been gaining so much attention lately. Article Series: Why Elm? (And How To Get Started With It) Introduction to The Elm Architecture and How to Build our First Application (You are here!) In this article, we are going to build a simple application that will introduce us to the language fundamentals: the Elm architecture and how to start making things. It is going to be pretty simple,… Read More

Continue Reading

Need to Catch Up on the AMP Debate?

The subject of AMP came up at a meetup I was at the other day. It came up in a “Hey have y’all seen this thing yet?” context. Some people have heard of it, some hadn’t. Even among those who had heard of it, the vibe was mostly: “this is newfangled tech. It’s the future, probably. I guess it’s a thing I gotta learn, I just haven’t gotten around to it yet.” Which makes sense. It’s just like hearing about some new JavaScript framework that is taking off. “Obviously, it’s a big deal, I just haven’t gotten there yet. Perhaps I will one day when it’s clear I need to… Read More

Continue Reading

Modern JavaScript for Ancient Web Developers

Gina Trapani: … when you’re learning modern JavaScript, there’s a good chance that the solution to the problem you’re having is still getting worked out. In fact, it’s very possible it is only one code review away from getting merged into the package you’re using. It’s a weird time. So many of us are living so close to the edge. As Gina puts it, it’s harder to find “a 5-year-old Stack Overflow answer that solves” your problem. New things drop and go out to production instantly, which is a bit at-odds with the classic wisdom of waiting for the .1 release. Direct Link to Article — PermalinkModern JavaScript for Ancient… Read More

Continue Reading
fontface-2

You Kinda Can Use Custom Fonts in HTML Emails

And you use them pretty much just like you’d use custom fonts on a website. Jaina Mistry had the scoop on this last year over on the Litmus blog: While web fonts don’t have universal support, here are the email clients where they are supported: AOL Mail Native Android mail app (not Gmail app) Apple Mail iOS Mail Outlook 2000 Outlook.com app Aside from using a JavaScript font loader, which definitely won’t work in email (no email client will be executing JavaScript), ultimately it comes down to @font-face in CSS. So let’s do that. Say we wanted to use Lato in an email, if we can. Go do the normal… Read More

Continue Reading

The Next Smashing Magazine

Congrats to the big team over there assembled to take on this major redesign process. Unlike our redesigns around here that are usually more like realignments with minor dev work and UX sprinkles each iteration, this was a ground-up rebuild for them. They migrated a bunch of different platforms all into one, a static-site based system with all front end APIs. It’s gotta feel good to pull all that stuff into one system. I remember when I used to have four different systems around here (WordPress, Forums (various), eCommerce (various), and some raw PHP stuff) and the good feeling it was to get it all yanked in under one WordPress… Read More

Continue Reading
selectable

Text Effects with CSS (and a little contenteditable trick)

Mandy Michael has been creating some incredible text effects with just the power of CSS. She uses every trick in the book: gradients, transforms, pseudo elements, shadows, and clipping paths to name a few. They are all real web text too. Custom fonts typically, but no images, canvas, or SVG or anything like that. Take a look at this beautiful effect: See the Pen CSS only 3D paper fold text effect by Mandy Michael (@mandymichael) on CodePen. The fact that it is real text makes it accessible, searchable, and of course, selectable: Demos are an awesome place to use the contenteditable attribute, which turns any text element into sort of… Read More

Continue Reading
p5-book-cover

Creating a Book Cover Using JavaScript and p5.js

I recently published a book and an interactive course called Coding for Visual Learners. It teaches coding to beginners from scratch using the widely popular JavaScript programming language and the p5.js programming library. Since p5.js a great and an easy to use drawing library, I wanted to make use of it to create the cover of my book and course as well. This is a tutorial on how to create this particular visual using JavaScript and p5.js. p5.js is a drawing & creative coding library that is based on the idea of sketching. Just like how sketching can be thought of as a minimal approach to drawing to quickly prototype… Read More

Continue Reading

Guetzli

Geutzili, Google’s new open source algorithm… …that creates high-quality JPEG images with file sizes 35% smaller than currently available methods, enabling webmasters to create webpages that can load faster and use even less data. I’ve seen this fairly widely reported, and that’s great because images are the main cause of web bloat these days and fighting back with tech seems smart. I also saw Anselm Hannemann note: This is great, but to put things into perspective, we also have to consider that it’s up to 100 times slower as Mozilla’s mozJPEG encoder and in many cases, it doesn’t achieve the same quality at the same file size Source: Kornel Lesiński,… Read More

Continue Reading

Animate in Ajax’d Content to its Natural Height

Let’s combine three things we just learned here on CSS-Tricks: One, transitioning to auto dimensions. Two, Ajaxing for stuff in a modern way. Three, waiting for images to be loaded to measure them. With all these three things in our toolbox, we can Ajax for some arbitrary content and insert it onto the page with a revealing height animation. Tricky tricky! Here’s the final demo: See the Pen Slide in Ajax Content by Chris Coyier (@chriscoyier) on CodePen. The thinking here is that since we’re guaranteed to be using JavaScript anyway, since we’re Ajaxing for some content, we might as well keep using JavaScript to help us make a smooth… Read More

Continue Reading

Need to do Dependency-Free Ajax?

One of the big reasons to use jQuery, for a long time, was how easy it made Ajax. It has a super clean, flexible, and cross-browser compatible API for all the Ajax methods. jQuery is still mega popular, but it’s becoming more and more common to ditch it, especially as older browser share drops and new browsers have a lot of powerful stuff we used to learn on jQuery for. Even just querySelectorAll is often cited as a reason to lose the jQuery dependency. How’s Ajax doing? Let’s say we needed to do a GET request to get some HTML from a URL endpoint. We aren’t going to do any… Read More

Continue Reading

Measuring Image Widths in JavaScript (Carefully!)

Let’s say you want to find an on the page and find out how wide it is in JavaScript. Maybe you need to make some choices based on that width (or height, or both) You can definitely do that. The DOM will even give you a variety of dimensions to choose from depending on what you need. There is definitely a catch though. Here’s the image: And here’s us selecting it, by finding the first JavaScript can find in the DOM: var img = document.querySelector(“img”); Let’s just log the width: // How wide the image is rendered at (which could be affected by styles) console.log(img.width); // How wide the image… Read More

Continue Reading
minesweeper-webvr-demo

Minecraft in WebVR with HTML Using A-Frame

I’m Kevin Ngo, a virtual reality web developer on the Mozilla VR team and a core developer of A-Frame. Today, we’ll go over how to build a room scale WebVR Minecraft demo that works on HTC Vive, Oculus Rift, Samsung GearVR, Google Cardboard, desktop, and mobile. The demo will be built with A-Frame in just 11 HTML elements! A-Frame A few years ago, Mozilla invented and pioneered WebVR, a JavaScript API for creating immersive VR experiences in your browser, in an experimental build of Firefox. Since then, WebVR has gained wide support from other companies such as Google, Microsoft, Samsung, and Oculus. And it’s now set to release enabled by… Read More

Continue Reading

Scrolling on the Web: A Primer

Scrolling is complicated. Nolan Lawson: User scrolls with two fingers on a touch pad User scrolls with one finger on a touch screen User scrolls with a mouse wheel on a physical mouse User clicks the sidebar and drags it up and down User presses up, down, PageUp, PageDown, or spacebar keys on a keyboard As it turns out, all five of these input methods have vastly different characteristics, especially when it comes to performance and cross-browser behavior. Some of them (such as touch screen scrolling) are likely to be smooth even on a page with heavy JavaScript usage, whereas others (such as keyboard scrolling) will make the same page… Read More

Continue Reading

Hassle-free Full Bleed with *:not()

Common situation documented by Dave Rupert: Let’s say you’re making a blog post layout. Content is entered into a CMS inside a WYSIWYG editor field. You echo that content to the page. You pull it up on a mobile device and notice the paragraphs go edge-to-edge. Yikes, it’s a little uncomfortable. So you add some kind of left/right padding maybe using a div.container. This works great until the client asks for the images and video to go full bleed. Your universal padding solution no longer works well. You got options. Containerizing isn’t great in any scenario. So how do you yank out those full bleed elements? Dave does it with… Read More

Continue Reading
no-cloud

“Serverless”

Every time I use the word “serverless”, which is somewhat regularly lately, as we’ve had a few articles using the term lately and use the concept at CodePen for a variety of things, I get some version of: CMON BRAH YOU’RE STILL USING “SERVERS”. And they aren’t wrong. Yes, when you build things on the web, there are always servers involved. Always. Whether it’s some old computer in a church basement, a computer in a rack at some big hosting company, or “The Cloud”, it’s a server. Chris Wattersons’s classic sticker.I rolled my eyes at the term the first few times I heard it too. But now I’m hesitant to… Read More

Continue Reading
auto-problem

Using CSS Transitions on Auto Dimensions

We’ve all been there. You’ve got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You’ve set transition: height 0.2s ease-out. You’ve created a collapsed CSS class that applies height: 0. You try it out, and… the height doesn’t transition. It snaps between the two sizes as if transition had never been set. After some fiddling, you figure out that this problem only happens when the height starts out or ends up as auto. Percentages, pixel values, any absolute units work as expected. But all of those require hard coding a specific height beforehand, rather than… Read More

Continue Reading

Linting HTML using CSS

Ire Aderinokun with some CSS selectors designed to catch problematic HTML elements, such as those with inline styles or missing/wrong attributes. I tossed up a repo so I could make a full page demo showing off all those selectors at work. Any red you see is a problem of sorts. Direct Link to Article — PermalinkLinting HTML using CSS is a post from CSS-Tricks

Continue Reading
Screenshot-2017-03-12-00.31.26

Getting Started with CSS Grid

This was a blockbuster week for front-end developers as CSS Grid landed in the latest versions of Firefox and Chrome without a feature flag. That’s right: we can now go and play with Grid in two of the most popular browsers right away. But why is CSS Grid a big deal and why should we care? Well, CSS Grid is the first real layout system for the web. It’s designed for organizing content both into columns and rows and it finally gives developers almost God-like control of the screens before us. That means that we can finally ditch decades of hacks and workarounds for setting elements on a web page… Read More

Continue Reading
large

Simple Little Use Case for `vmin`

Viewport units are things like 10vw (10% of the viewport width) or 2vh (2% of the viewport height). Useful sometimes, as they are always relative to the viewport. No cascading or influence by parent elements. There is also vmin, which is the lesser of vw and vh, and vmax, which is the greater. These values can be used for anything that takes a length value, just like px or em or % or whatever. Let’s take a look at a tiny design pattern that makes use of vmin. A header block! If we set the padding of an like so: header { padding: 10vmin 1rem; } We get some fixed… Read More

Continue Reading
h

The Document Outline Dilemma

For the past few weeks there has been lots of talk about HTML headings in web standards circles. Perhaps you’ve seen some of the blog posts, tweets, and GitHub issue threads. Headings have been part of HTML since the very first websites at CERN, so it might be surprising to find them controversial 25 years later. I’m going to quickly summarize why they are still worth discussing, with plenty of links to other sources, before adding my own opinions to the mix. If you’re up-to-date on the debate, you can jump straight to the “Bigger Dilemma” section. The Story So Far… HTML uses headings (, , , and so on… Read More

Continue Reading
tinymce

Build a Custom Serverless CMS: Part 2

In our previous proof-of-concept demo, we built a bare bones admin for generating a web page with the ability to edit some text on the page and set the site title and description. For this next demo, we build on our example and add rich text editing and image upload capabilities. Article Series: Build a Custom CMS for a Serverless Static Site Generator + Repo Build a Custom Serverless CMS: Part 2 (you are here!) + Repo Rich Text Editing TinyMCE is the most widely used web-based Rich Text Editor around, so let’s use it. We can add it to our admin form pretty easily. There are many configuration options… Read More

Continue Reading
workflow

Introduction to Web Audio API

Web Audio API let’s us make sound right in the browser. It makes your sites, apps, and games more fun and engaging. You can even build music-specific applications like drum machines and synthesizers. In this article, we’ll learn about working with the Web Audio API by building some fun and simple projects. Getting Started Let’s do some terminology. All audio operations in Web Audio API are handled inside an audio context. Each basic audio operation is performed with audio nodes that are chained together, forming an audio routing graph. Before playing any sound, you’ll need to create this audio context. It is very similar to how we would create a… Read More

Continue Reading
stroke-gif

Text Stroke: Stuck In The Middle With You

There is a non-standard way to stroke HTML text (SVG has a standard way). It’s not particularly new. There are -webkit- and -moz- prefixes for it. Jen Simmons recently posted about it, with an example: span { -moz-text-fill-color: #fde; -webkit-text-fill-color: #fde; -moz-text-stroke-color: #666; -webkit-text-stroke-color: #666; -moz-text-stroke-width: 2px; -webkit-text-stroke-width: 2px; } And she’s right: This CSS isn’t fully-baked or fully-supported. But it’s good enough to be used today, especially since it’s simply offering a visual enhancement. It’s not mission critical to making a website usable. I’d only perhaps add that if you were going to do something like add a stroke around white text, you could wrap it in a @supports… Read More

Continue Reading

Randomizing SVG Shapes

SVG shapes are all built from numbers. Obvious, perhaps, but also, I’m not sure we take as much advantage of that as we could with inline . For example, it’s pretty easy to generate a new pseudo-random number in JavaScript: function getRandomInt(min, max) { return Math.floor(Math.random() * (max – min + 1) + min); } Now imagine a bunch of variables set to random numbers, and using ES6 template literals to stitch them together: let newPoints = `${x1},${y1} {x2},${y2} {x3},${y3} {x3},${y3}`; Which makes a valid syntax for the points attribute of a . let polygon = document.querySelector(“polygon”); polygon.setAttribute(“points”, newPoints); A more detailed example of that, and a demo, over on… Read More

Continue Reading
cathy_oneil-620x412

Weapons of Math Destruction

I think you’d do well to read Cathy O’Neils Weapons of Math Destruction: How Big Data Increases Inequality and Threatens Democracy. I saw her read at the Miami Book Fair several months ago, and immediately bought a copy. I even got her to sign it which is kinda cool ;) Cathy’s big idea is that we’re absolutely surrounded by algorithms that inform big decision making. There are lots of good algorithms that help us. Sadly, there are lots of insidiously, dangerous, bad algorithms that do serious damage, and they are lurking all about disguised as good algorithms. One aspect of a good algorithm is some kind of feedback and correctional… Read More

Continue Reading
HeroPatterns

Websites to Generate SVG Patterns

These aren’t particularly hard to web search for, but just in case you didn’t know they existed I figured I’d drop them here. I’ve used all three of these in the past and I think they do a good job of driving home how cool of patterns you can make in SVG with such little code. Hero Patterns A collection of repeatable SVG background patterns for you to use on your web projects. SVG Patterns Gallery SVG images are typically smaller than bitmap images and remain sharp on high-dpi screens. Unlike CSS3 gradients, SVG images are supported on IE9. SVGeneration Scalable Vector Graphics are crisp and clear and can be… Read More

Continue Reading