OR 

Users DO Change Font Size

Evan Minto: The question was ‘How many users browse the main Internet Archive site with a default font size other than the common value of 16 pixels?‘ By knowing this, we would determine how many users would be affected by sizing with relative units like rems/ems. Using the methodology I describe below, we found that the answer is 3.08% of our users. So if you set type in pixels, and your traffic is anything like the Internet Archive&

favicon of http://css-tricks.com

Animate Calligraphy with SVG

From time to time at Stackoverflow, the question pops up whether there is an equivalent to the stroke-dashoffset technique for animating the SVG stroke that works for the fill attribute. But upon closer inspection, what the questions are really trying to ask is something like this: I have something that is sort of a line, but because it has varying brush widths, in SVG it is defined as the fill of a path. How can this "brush" be animated? In Th

favicon of http://css-tricks.com

Advanced Document Conversions with Filestack

You might know Filestack from being an incredible service to add file uploading, storage, and management to your own web apps. There is another thing Filestack can do for you: convert documents into different formats. For one thing, it can manipulate documents. Take images. Perhaps you would like to offer some image manipulation for your users uploaded images, like cropping and rotation. That‘s a common feature for apps that offer avatar

favicon of http://css-tricks.com

Balancing Time

I first wrote this post four years ago. I put it on a blog that no longer exists. Funnily enough, I still refer to it myself, so I figured it might be best served in a place where other people can see it. I‘ve made only a few minor tweaks to the original content. A lot about how I work has changed, but most of these pieces have not. I work on many personal projects concurrently. I love doing this, The post Balancing Time appeared first o

favicon of http://css-tricks.com

An Almost Ideal React Image Component

Yes, this is a React component, but regardless if you care about that part or not, the "ideal image component" part could be of interest. There is a lot to consider with how we put images on web pages these days. This deals with: Placeholder space (and then flexible responsive styles after loading) Low-quality placeholder images Responsive images syntax (srcset) Image formats (e.g. using WebP when you can) Click-to-load on bad network connection

favicon of http://css-tricks.com

Using Custom Fonts With SVG in an Image Tag

When we produce a PNG image, we use an img tag or a CSS background, and that‘s about it. It is dead simple and guaranteed to work. PNG is way simpler to use in HTML than SVG Unfortunately, the same cannot be said for SVG, despite its many advantages. Although you‘re spoiled for choices when using SVG in HTML, it really boils down to inline, object and img, all with serious gotchas and trade-offs. Problems with inline SVG The post Usi

favicon of http://css-tricks.com

What is SVG good for?

Y‘all probably wouldn‘t be surprised if I told you it‘s pretty awesome for icons, and icon systems. SVG icon systems can, and perhaps should be quite easy. I‘m a fan of just inlining those suckers, particularly when they are pretty simple. But what else? Logos is a classic example! A lot of people dip their toes in this way. You don‘t have to inline the SVG if you don‘t want. It could be an img or background

favicon of http://css-tricks.com

Creating your own meme generator

Almost every time a new meme pops up in my Twitter feed, I think of a witty version to create. I‘m not alone in this. Memes are often a way to acknowledge a shared experience or idea. In a variation of the "Is this a pigeon" meme that has been making the rounds online, a designer Daryl Ginn joked about the elementary nature of most applications that say they use artificial intelligence. pic.twitter.com/nAHki0YFyV Daryl Ginn (@darylginn) M

favicon of http://css-tricks.com

UTC is Enough for Everyone, Right?

A good candidate for the Blog Post of the Year from Zach Holman. I think Eric Portis‘ "w descriptors and sizes: Under the hood" is up there too, but perhaps even nerdier. Ooooh, also Frank Chimero‘s "The Good Room" is up there. But I digress. Zach‘s article is as educational as it is funny. But yeah, this UTC initialism doesn‘t make any sense. Let‘s dig into this a little more. So you‘ve got a bunch of scienti

favicon of http://css-tricks.com

Centering: The Newest Coolest Way vs. The Oldest Coolest Way

This isn‘t a comprehensive guide to centering things. We have that! This is just a little observation about old and new. One of the trickier things related to centering in CSS is when you need to center both vertically and horizontally and you don‘t know the width or height of what you are centering. Vertical centering being the extra tricky of the two. Believe it or not, there was a way to do that even in IE 8. The trick The post

favicon of http://css-tricks.com

Truly understand your site visitors‘ behavior

(This is a sponsored post.) Hotjar is a quick and easy way to truly understand your visitors and identify opportunities for improvement and growth. Try the all-in-one analytics and feedback tool for free. Direct Link to Article Permalink The post Truly understand your site visitors‘ behavior appeared first on CSS-Tricks.

favicon of http://css-tricks.com

More Unicode Patterns

Creating is the most intense excitement one can come to know. Anni Albers, On Designing I recently wrote a post that was shared here on CSS-Tricks where I looked at ways to use Unicode characters to create interesting (and random) patterns. Since then, I‘ve continued to seek new characters to build new patterns. I even borrowed a book about Unicode from a local library. (That‘s a really thick book, by the way.) It‘s all up to

favicon of http://css-tricks.com

Don‘t just copy the @font-face out of Google Fonts URLs

I don‘t think this is an epidemic or anything, but I‘ve seen it done a few times and even advocated for. This is what I mean... You go to Google Fonts and pick a font like Open Sans, and it gives you either a link or an @import with a URL there in which to ready this font for usage on your site. You can take a peek in there and see what it returns... It‘s just some @font-face declarations, The post Don‘t just copy the @f

favicon of http://css-tricks.com

The Four Big Ways Jetpack Helps with Image Performance

We‘ve been working with Jetpack around here as a sponsor. It‘s a great match because as someone with a bunch of self-hosted WordPress sites, Jetpack is one of those no-brainer plugins for me. Jetpack can do a ton of good things for any site in a variety of very different ways. Here‘s one way to think about it: it brings the power of WordPress‘ own massive servers to you. For now, let‘s just focus on one angle of wha

favicon of http://css-tricks.com

Building a RSS Viewer With Vue: Part 2

Welcome to Part 2 of this mini-series on building a RSS viewer with Vue. In the last post, I walked through how I built my demo using Vue.js and Vuetify on the front end and Webtask on the back end. When I built that initial version, I knew it was exactly thatmdash;an "initial" version. I took some time to work on a few updates, and while I won‘t dare call this a "perfect" version, I do think I‘ve made The post Building a RSS Viewer

favicon of http://css-tricks.com

Your Brain on Front-End Development

Part of the job of being a front-end developer is applying different techniques and technologies to pull off the desired UI and UX. Perhaps you work with a design team and implement their designs. I know when I look at a design (heck, even if I know I‘m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task. Let‘s take a look at what I mean. The post Your Brain on Fron

favicon of http://css-tricks.com

Understanding the Almighty Reducer

I was recently mentoring someone who had trouble with the .reduce() method in JavaScript. Namely, how you get from this: const nums = [1, 2, 3] let value = 0 for (let i = 0; i nums.length; i++) { value += nums[i] } ...to this: const nums = [1, 2, 3] const value = nums.reduce((ac, next) = ac + next, 0) They are functionally equivalent and they both sum up all the numbers in the array, but there is The post Understanding the Almighty Reducer ap

favicon of http://css-tricks.com