Is VS Code coming to your browser DevTools? Chris Heilmann says it can already be there, syncing changes 2-way from your DevTools to your local file system, making sure you don’t accidentally refresh and lose the changes you’ve been making. I think I would prefer (and maybe I missed this in the video) to be able to play around in DevTools first, experimenting until I get it right, and then “Save to Local” or something like that… But no question this is super powerful and a step in the right direction!
And speaking of VS Code, here’s a nice extension to manage/edit your GitHub Gists from right within VS Code!
I feel like The Fab Four Technique, though introduced back in 2016, has slowly become the darling of the web-dev world, appearing in slightly-morphed variations everywhere from the original link above that created responsive columns in email, to setting min and max font-sizes, to setting conditional border-radius. This technique involves using various combinations of min(), max(), calc() and clamp() in your CSS, to create essentially one-liner @media queries for setting minimum and maximum values for things that don’t have native min/max properties, like font-size and padding, but also allowing for flexible values in between, like these that I have pulled from the above links:
/* responsive columns in email */ min-width: 50%; max-width: 100%; width: calc((480px — 100%) * 480); /* responsive font-size, with a min and max */ font-size: clamp(0.9rem, 1vw + 1rem, 2.2rem); /* responsive padding, with a min and max */ padding: 1.5rem clamp(1rem, 5%, 3rem); /* if/else border-radius! */ border-radius: clamp(0px, ((100vw - 4px) - 100%) * 9999, 8px);
As long as you don’t need to support IE, you should definitely get to know these CSS functions inside and out!
Although I work mostly in Firefox these days, I can definitely see the value in a lot of these Chrome Extension “must-have”s.
More encouraging news on the PWA-front, coming from the PWA Summit, but we are all still being held back by iOS…
The above article references Project Fugu, a Google project to help close the gap between native apps and PWAs. From the project landing page, you can learn more about the project, check-out the project’s current status, consult the current API tracker, and even play with some of these APIs. I have hated, nay, loathed, native apps since their appearance, always believing that apps belonged on a common, accessible platform, and the web is the platform, and PWAs are the path. So happy to see this slowly happening. Hope we somehow find a way to give Apple the kick-in-the-butt they so badly need…
And here is a quick video on using Next.js to create a PWA in 10 minutes (yes, the video is 13 minutes, and yes he pauses the video a couple of times, but come on…). I also think a massive-miss in the video is not pushing the concept that PWAs can be installed on mobile devices! James thoroughly covers installing on desktop, and from that we should all be able to figure out that they can be installed on mobile, but it could have been more explcit…
And finally, here are two lists of apps and services that we can all use, sans logins or accounts:
A great addition to these would be a “this can be used to replace ________”, but it still nevertheless super useful!
Happy reading,
Atg