PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

This Web Site is a Tech Talk

March 31, 2021
in Web Dev
271 21
This Web Site is a Tech Talk


This literal tech talk (YouTube video embedded in there) by Zach Leatherman is a good time. The talk is sprinkled with fun trickery, so I’m just taking notes on some on it here:

  • I have no idea how he pulled off the “bang on the keyboard and get perfect code” thing, but it reminds me of Jake Albaugh’s “Self-Coding” Pens.
  • Adding contenteditable on the <body> makes the whole page editable! Did you know document.designMode = "on" does the same thing in JavaScript? (More on making DevTools a design tool.)
  • There’s a short bit where the typing happens in two elements at once. CodePen supports that! Just CMD + click into the editor where you want another one to be, or make it part of a snippet.
  • System fonts are nice. I like how easy they are to invoke with system-ui. Firefox doesn’t seem to support that, so I guess we need the whole stack. I wonder how close we are to just needing that one value. Iain Bean has more on this in his “System fonts don’t have to be ugly” post.
  • box-decoration-break is a nice little touch for “inline headers.” The use of @supports here makes great sense as it’s not just that one property in use, but several. So, in a non-support situation, you’d want to apply none of it.
  • Slapping a <progress> in some <li> elements to compare rendering strategies is a neat way to get some perfect UI without even a line of CSS.
  • Making 11ty do syntax highlighting during the build process is very cool. I still use Prism.js on this site, which does a great job, but I do it client-side. I really like how this 11ty plugin is still Prism under the hood, but just happens when the page is built. I’d love to get this working here on this WordPress site, which I bet is possible since our code block in the block editor is a custom JavaScript build anyway.
  • In the first bullet point, I wrote that I had no idea how Zach did the “bang on the keyboard and get perfect code” but if you watch the bit about syntax highlighting and keep going, Zach shows it off and it’s a little mind spinning.

I think Zach’s overall point is strong: we should question any Single-Page-App-By-Default website building strategy.

As a spoonful of baby bear porridge here, I’d say I’m a fan of both static site generators and JavaScript frameworks. JavaScript frameworks offer some things that are flat-out good ideas for building digital products: components and state. Sometimes that means that client-side rendering is actually helpful for the interactivity and overall feel of the site, but it’s unfortunate when client-side rendering comes along for the ride by default instead of as a considered choice.

Direct Link to Article — Permalink


The post This Web Site is a Tech Talk appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.



Source link

Share219Tweet137Share55Pin49

Related Posts

Intrinsic Typography is the Future of Styling Text on the Web
Web Dev

Intrinsic Typography is the Future of Styling Text on the Web

The way we style text hasn’t changed much over the years. There have been numerous advancements to help make...

April 20, 2021
Say Hello To CSS Container Queries
Web Dev

Say Hello To CSS Container Queries

I haven’t been more excited for a CSS feature like I’m now in the past six years I spent...

April 20, 2021
Keep Logs Tidy With the Log Cleaner Package for Laravel
Web Dev

Keep Logs Tidy With the Log Cleaner Package for Laravel

Laravel Log Cleaner is a package by Joost van Veen for keeping your log files small and tidy. While...

April 20, 2021
Making GraphQL Work In WordPress — Smashing Magazine
Web Dev

Making GraphQL Work In WordPress — Smashing Magazine

About The AuthorLeonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless...

April 20, 2021
Next Post
Nailing That Cool Dissolve Transition

Nailing That Cool Dissolve Transition

A Complete Guide To Accessible Front-End Components — Smashing Magazine

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Consuming REST APIs In React With Fetch And Axios — Smashing Magazine

#BlackLivesMatter — Smashing Magazine

June 4, 2020
Thank You (2020 Edition) | CSS-Tricks

Thank You (2020 Edition) | CSS-Tricks

December 31, 2020
Introducing AWS Snowcone – A Small, Lightweight, Rugged, Secure Edge Computing, Edge Storage, and Data Transfer Device : idk.dev

Introducing AWS Snowcone – A Small, Lightweight, Rugged, Secure Edge Computing, Edge Storage, and Data Transfer Device : idk.dev

June 18, 2020
When To Say No To Freelance Projects — Smashing Magazine

When To Say No To Freelance Projects — Smashing Magazine

January 22, 2021

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In