HTML Icon

HTML

HTML is the fundamental markup language for webpages.
85 Stories
All Topics

HTML fabiensanglard.net

All you may need is HTML

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.

GitHub pragmaticpineapple.com

Sneaking custom HTML & CSS in to your GitHub README

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.

Sneaking custom HTML & CSS in to your GitHub README

Fathy Boundjadj fathy.fr

Forking Chrome to turn HTML into SVG

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.

HTML enhance.dev

Enhance is a web standards-based HTML framework

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.

Python pyscript.net

Create rich Python apps in the browser with HTML

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…

HTML web.dev

A course that breaks down every aspect of modern PWA development

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.

Bootstrap github.com

Tabler is a free and open source HTML dashboard UI kit built on Bootstrap

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!

Heydon Pickering YouTube

Is progressive enhancement dead yet?

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 Coyier CSS-Tricks

CSS-Tricks is joining DigitalOcean

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. 🤞

Django saaspegasus.com

Modern websites, JavaScript optional (Django + HTMX + Alpine)

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.”

HTML github.com

A tool like jq, but for HTML

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.tech

Indiepen – a privacy-friendly solution to present your code to people

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 CSS-Tricks

Choice words about the upcoming deprecation of JavaScript dialogs

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.

Chris Coyier CSS-Tricks

Images are hard.

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.

  0:00 / 0:00