Fabien Sanglard’s advice to writers:

By starting with a markup based generator, you rob yourselves of the opportunity to learn the core technology running the whole internet. Instead you will learn to use a layer built on top of it with little to no re-usable knowledge. Inevitably, you will want to do something the framework did not forecast and will come up with convoluted ways to do it anyway.

Additionally, depending on how long you will write and how often you do it, setting up a generator may be counterproductive.

The best way to avoid the YAGNI trap is to start as simple as possible and only add tech when you’re absolutely sure the ROI is higher than the TCO.

Nikola Đuza lays out a way you can customize your README to stand out from the crowd:

GitHub supports adding HTML in Markdown, but it is pretty aggressive when removing HTML that can be potentially dangerous to users. Things like scripts, iframes, and similar will get removed or “silenced” to avoid malicious content from being served to users.

Luckily, there’s one way to sneak in some HTML (or a web page) inside the README. You can do it via SVG and foreignObject SVG element.

Fathy Boundjadj new html2svg project is pretty cool. We’ve seen a lot of efforts to convert HTML to raster images like PNG and JPG, but SVG is a different (pixel-independent) story.

This end product took some engineering, and the linked post goes deep into all the steps Fathy had to take along the way. From taking the picture to rendering to SVG to supporting shadows and more.

Tapajyoti Bose draws our attention to some obscure-but-useful elements: meter & progress, sup & sub, datalist, map & area, details & summary, object, and abbr

I love that people are bringing HTML back to the forefront:

Our mission is to enable anyone to build multi-page dynamic web apps while staying as close to the platform as possible. Enhance fills in the gaps to make building for the backend, and the browser a seamless experience for web authors and consumers.

Modern JavaScript frameworks bring more problems than they solve; recreating native web platform features adding unnecessary weight and complexity, which is challenging to unravel.

Enhance provides a dependable foundation built on standards-based web platform features, allowing developers to create web applications that are lightweight, flexible, and future-proof.

PyScript is a Pythonic alternative to Scratch, JSFiddle, and other “easy to use” programming frameworks, with the goal of making the web a friendly, hackable place where anyone can author interesting and interactive applications.

Lots of code examples of various apps (clock, repl, todos, etc) here. I love the why behind this effort:

As an industry, we have focussed on making the impossible possible, rather than focussing on making the possible accessible to all.

They want to bring programming to the 99%. Somebody’s gotta do it…

This is a nice round-up of some new(ish) HTML and JavaScript features related to forms. Now that Safari 16 is out, good stuff like requestSubmit and showPicker are looking pretty green!

11ty creator Zach Leatherman recently released a standalone HTML serializer for generating markup for Web Components. Here’s what Zach had to say about it on Twitter:

This is an early preview and I welcome feedback! I think it’s a great way to build standards-based HTML-first components without JavaScript framework overhead 🙌🏻

It’s cool to see the how far HTML has come. Every once in a while I find something that seems super powerful, wrapped up in a simple implementation. This time it was the HTML capture attribute.

This course from the folks at web.dev targets beginners and advanced developers alike.

You’ll learn PWA fundamentals like the Web App Manifest, service workers, how to design with an app in mind, what’s different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you’ll learn about integration with the platform and operating system, how to enhance your PWA’s installation and usage experience, and how to offer an offline experience.

Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern, user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful!

Looks great!

Just copy/paste these SVGs into your HTML and you’re good to go!

Ignoring progressive enhancement could be seriously hurting your conversions. This article will show you how to build resiliency into your apps.

Hidde de Vries:

WebAIM have come out with their latest report on which accessibility issues they found in the top million websites that they tested automatically. What is some low hanging fruit you could fix today?

Louis Lazaris describes/demos somewhat obscure HTML attributes you may find useful enough to personally use in one of your projects. I learned a few things, maybe you will too.

You’ll either love the humor laced throughout this YT video by Heydon Pickering… or you’ll hate it. Here’s a litmus test: does this quote tickle your funny bone at all?

But just like that time you whacked a zombie over the head with a shovel only to discover it was really your friend Jimmy with a hangover, this would be a grave mistake. And I use the term ‘grave’ advisedly, because having sent Jimmy to an early grave, this would increase the likelihood of him becoming a zombie in the not too distant future.

Chris does a great job answering what will surely be the most common question about this acquisition in his announcement post:

1. What happens to CSS-Tricks?
2. Will you still be running CSS-Tricks?
3. Why now?

The amount of value this team has given to the web world over the years is immeasurable.

I sincerely hope DigitalOcean turns out to be a worthy new steward of this precious resource and the site’s best years are ahead of it. 🤞

Install SingleFile on any major browser and then just:

1. Wait until the page is fully loaded.
2. Click on the SingleFile button in the extension toolbar to save the page.
3. You can click again on the button to cancel the action when processing a page.

Anybody who’s had to design/implement HTML emails knows how utterly painful it is. With Mailwind you get to do it the same way you’d build a site with Tailwind and then run:

mailwind --input-html email.html --output-css style.css
# or for inline styles
mailwind --input-html email.html --output-html email-inlined.html

And you’re off to the outbox! 📤

Building a modern front end in Django without reaching for a full-blown JavaScript framework. Choosing the right tools for the job, and bringing them into your project.

This is as close to a tutorial as you’ll see on Changelog News. I’m linking to it not for the step-by-step bits like talking to your “Django backend without a full-page reload”, but for the decision making bits like “when you might choose low-JavaScript.”

Your <head> is the single biggest render-blocking part of your page—ensuring it is well-formed is critical. ct.css is a diagnostic CSS snippet that exposes potential performance issues in your page’s <head> tags.

htmlq uses CSS selectors to extract bits of content from HTML files. Mozilla’s MDN has a good reference for CSS selector syntax.

This looks super handy. Examples!

// Find part of a page by ID
curl --silent https://www.rust-lang.org/ | htmlq '#get-help'

// Find all links in a page
curl --silent https://www.rust-lang.org/ | htmlq --attribute href a

// Get the text content of a post
curl --silent https://nixos.org/nixos/about.html | htmlq  --text .main

Henrik Fricke:

Indiepen lets you embed HTML, CSS, and JS code examples on a website. We built it because we wanted to embed code examples on our blog, but many existing solutions set cookies, have a ton of features or just come with a bad performance.

😎 No cookies, no tracking, no external requests
⚡️ Small footprint with less than 20 KB
❤️ Features built for everyone

Congrats, Henrik, on shipping your first open source project! 👏

Chris Coyier is not too pleased about browsers changing the way cross-origin iframes handle certain native JavaScript calls such as alert and confirm:

Cross-origin iframes are essentially the heart of how CodePen works. You write code, and we execute it for you in an iframe that doesn’t share the same domain as CodePen itself, as the very first line of security defense. We didn’t hear any heads up or anything, but I’m sure the plans were on display.

The change is about security and performance, it seems. There’s a workaround using postMessage, but that comes with its own problems that Chris details. Overall, it seems the way this change is being rolled out is more of a concern than the change itself…

Believe it or not, I generally am a fan of Google and think they do a good job of pushing the web forward. I also think it’s appropriate to waggle fingers when I see problems and request they do better. “Better” here means way more developer and user outreach to spell out the situation, way more conversation about the potential implications and transition ideas, and way more openness to bending the course ahead.

I believe Chris Coyier put that period at the end of this post title for a reason:

Putting images on websites is incredibly simple, yes? Actually, yes, it is. You use <img> and link it to a valid source in the src attribute and you’re done. Except that there are (counts fingers) 927 things you could (and some you really should) do that often go overlooked. Let’s see…

He goes on to list 15 bullet points of things to consider. This images situation is actually a microcosm of the web (and all software?) itself: it appears easy/simple at first, but the deeper you go, the more dizzying the depth.