Author
Chris Coyier
3 Comments
Join Conversation
ooooops I guess we’re* full-stack developers now
This is a written version of my talk from Jamstack Conf London 2019.
#195: How to Draw a Line with CSS
Stupid simple, right? It is! But it’s fun to think about for a few minutes and count a bunch of different ways we could do it. And what do I mean by a line anyway? We’ll mostly talk about a 1px solid horizontal line, but we’ll veer off a little bit and talk about other lines. Can’t CSS draw a line from any point to any point? Not really, actually — unless we get pretty fancy with SVG that is.… Read article “#195: How to Draw a Line with CSS”
#194: Jetpack’s Social Integration
Jetpack can help automate your site’s social media.
It’s a pretty small feature compared to all the huge stuff Jetpack can do, like improve your site’s search, back it up, and protect it. But it’s a feature I love nonetheless.
CSS-Tricks has social media accounts, for example, the Twitter handle @css. We largely use that account to notify folks when new content has been published to the site, and it’s been that way long enough … Read article “#194: Jetpack’s Social Integration”
Web Technologies and Syntax
Chris Coyier
JavaScript has a (newish) feature called optional chaining. Say I have code like:
const name = Data.person.name;If person happens to not exist on Data, I’m going to get a hard, show-stopping error. With optional chaining, I can write:
const name = Data.person?.name;#193: Scully: the SSG for Angular
Tara Z. Manicsic joined me for this video, setting up the very basics of Scully, which is a Static Site Generator for Angular — nay, the SSG for Angular, as Tara pointed out to me.
I don’t know much Angular at all. In fact, I didn’t have the Angular CLI installed on my machine at all when we started this video, so that ends up being one of the first things we do. Then we get into scaffolding a new … Read article “#193: Scully: the SSG for Angular”
Jamstack Conf
Chris Coyier
Here’s an important detail here: It’s free!
Jamstack Conf Virtual is coming up October 6th and 7th, 2020. The sessions are on October 6th. That’s the free part (register here). Then on October 7th there are a variety of workshops (they all look great to me) that are $100 USD each. That’s the classic conference one-two punch. Sessions are for getting a broad sense of what’s happening and will very likely open … Read article “Jamstack Conf”
ztext.js
Chris Coyier
Super cool project from Bennett Feely! It makes any web type into 3D lettering with a mouseover effect that moves the 3D objects in space. It’s reminiscent of Zdog, but for type. It works its magic by stacking a bunch of copies of the glyphs on top of each other that are offset by some translateZ, then using some perspective and rotateX/rotateY on a parent element to do the interactive stuff.
The effect is extremely fun. … Read article “ztext.js”
Thinking About Power Usage and Websites
Gerry McGovern asked if I had any insight into energy consumption and websites. He has a book, after all, about the digital costs on the planet. He was wondering about the specifics of web tech, like…
If you do this in HTML it will consume 3× energy but if you do it in JavaScript it will consume 10×.
I would think if you really looked, and knew exactly how to measure it, you could find examples like … Read article “Thinking About Power Usage and Websites”
Nova
Nova is a new (vehemently macOS-only) code editor from Panic, the folks behind Coda. It’s like “Coda 3” except this was such a major re-write that they gave it a whole new name.
I played with some of the betas as they were building it. I got a little discount as it went live, so I bought it and am using it here and there. Here’s my thought dump!… Read article “Nova”
Vue 3
It’s out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
I like it’s still a priority that Vue can be used with just a <script tag with no build process at all. But it’s ready for build processes too.
… Read article “Vue 3”Vue 3.0 core can still be used via a simple
<scripttag, but its internals has been re-written from the ground up
