Select Page

Author: admin

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 connections Better UX for loading errors, with translatable copy That’s not even all of it. So much to think about with poor little . I enjoyed Alejandro Sanchez’s response: The readme file for this component is amazing to teach you how to think like a front-end developer. — Alejandro Sanchez (@alesanchezr) June 12, 2018 Direct Link to Article — Permalink The post An Almost Ideal React Image Component appeared first on CSS-Tricks....

Read More

JavaScript Regex Cheat Sheet

Successfully working with regular expressions requires you to know what each special character, flag and method does. This is a regular expressions cheat sheet which you can refer to when trying to remember how a method, special character or flag works. Defining a Regular Expression in JavaScript There are two ways of defining a regular expression in JavaScript. var rgx = /^(d+)/ — You can use a regular expression literal and enclose the pattern between slashes. This is evaluated at compile time and provides better performance if the regular expression stays constant. var rgx = new RegExp('^(d+)') — The...

Read More

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 or background-image as well. These are really simple things though. At it’s heart, SVG is simply a vector-based image format capable of just about anything....

Read More

Build a Reusable Design System With React

React has done a lot to simplify web development. React’s component-based architecture makes it easy in principle to decompose and reuse code. However, it’s not always clear for developers how to share their components across projects. In this post, I’ll show you some ways to fix that. React has made it easier to write beautiful, expressive code. However, without clear patterns for component reuse, code becomes divergent over time and becomes very difficult to maintain. I’ve seen codebases where the same UI element had ten different implementations! Another issue is that, more often than not, developers tend to couple the UI...

Read More

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 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, of course! Now your performance-minded brain kicks off. Wait. So, I make one HTTP request for this stylesheet, and then...

Read More
000webhost logo