Let's say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the
The team at Kapwing has collected a lot of images from the Internet Archive’s Wayback Machine and presented a history of how the homepage of popular websites like Google and the New York Times have changed over time. It’s super interesting.
I particularly love how Amazon has evolved from a super high information dense webpage that sort of looks like a blog to basically a giant carousel that takes over the whole screen.
Huge thanks to BigCommerce for sponsoring CSS-Tricks this week!
Here's the basics: BigCommerce is a hosted eCommerce platform. In just a few minutes, anybody can build their own online store. From a personal perspective, I'd suggest to any of my friends and family to go this route. CMS-powered websites are complicated enough, let alone feature-packed eCommerce websites. Please go with a solution that does it all for you so your site will look and work great and you can focus on your actual business.
There is no shortage of videos out there where you can watch people code with an educational vibe. A golden age, one might say. Here are a few that I've watched and really enjoyed lately:
- @keyframers - "An animated, collaborative coding live stream by @davidkpiano & @shshaw." They've got 2 epsidoes out now, each of which they start with an animated interface GIF and then collaboratively re-build it.
- The Coding Train - Daniel Shiffman's show is a force of nature on it's own, featuring challenges, introductions, and guest tutorials. Speaking of guest tutorials, CodePen recently sponsored an episode featuring Catt Small and game development with Phaser.js.
- Creative Coding with CSS. You have to sign up for Skillshare to watch it, but Jake Albaugh loves getting crazy with CSS and it's fun to watch.
We just hit you with a slab of observations about CSS Grid in a new post by Manuel Matuzović. Grid has been blowing our minds since it was formally introduced and Jen Simmons is connecting it (among other new features) to what she sees as a larger phenomenon in the evolution of layouts in web design.
This may be the sixth such point in the history of the web. One of those points where everything changes and we swap out our techniques ... let’s talk about layout. What’s next? Intrinsic Web Design.
Why a new name? Why bother? Well, it was helpful to debate fluid vs. fixed, or table-based layouts: having words really helps. Over the past few years, Jen has needed a term for “responsive web design +”.
Last year, I assembled A Collection of Interesting Facts about CSS Grid Layout after giving a workshop. This year, I worked on another workshop and I've learned some more exciting facts about the layout spec we all so love.
Of course, I'm not going to keep my knowledge to myself. I'm happy to share my findings once again with you, the CSS-Tricks community.
Tired of Twitter? Facebook fatigued? It's time to head back to RSS.
I'm an RSS reader lover, so I hate to admit it, but RSS ain't going mainstream. It was too nerdy 20 years ago and it's too nerdy now. RSS is still incredibly useful technology, but I can't see it taking off alone.
For RSS to take off, it needs some kind of abstraction. Like Flipboard, where you can get started reading stuff right away and feeding it RSS isn't something you need to handle manually. Apple News is kinda like that. I'm a little love/hate with Apple News though. I like reading stuff in it, but I've stopped publishing in it because it became too much work to get right and have it look good. It's like managing a second site, unlike RSS which just brainlessly works when your CMS supports it. A little-known feature of Apple News was that it used to be able to function as an RSS reader, but they removed that a couple of years ago. Boooooo.
Huge thanks to Wufoo for sponsoring CSS-Tricks this week! Like it says in the sidebar on this very site, we’ve been using Wufoo for literally over a decade. It’s the easiest and most powerful way to build web forms on the web.
Here’s something brand new from the Wufoo team: now in addition to payment providers like PayPal and Stripe, you can choose Worldpay.
Like if we wanted to know the padding of an element, classically we'd do:
var el = document.querySelector("#thing"); var style = window.getComputedStyle(el); console.log(style.padding);
And we'd get "20px" as a string or whatever it is.
One of these new API's lets us pull it off like this:
console.log( el.computedStyleMap().get('padding').value, el.computedStyleMap().get('padding').unit );
And we get
20 as a real number and "px" as a string.
There is also
attributeStyleMap with getters and setters, as well as functions for each of the values (e.g.
Eric counts the benefits:
- Few bugs.
- Arithmetic operations & unit conversion.
- Value clamping & rounding.
- Better performance.
- Error handling.
- Naming matches CSS exactly.