HTML Icon

HTML

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

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.

CSS daisyui.com

DaisyUI – component classes for Tailwind

When we had Adam Wathan on JS Party, I asked him if anybody besides the Tailwind team were working on component libraries. He said yes, but didn’t name any off the top of his head. Well, add DaisyUI to the list.

Your HTML doesn’t need to be messy. DaisyUI adds component classes to Tailwind CSS. Classes like btn, card, etc… No need to deal with hundreds of utility classes.

No script dependencies. 2KB gzipped. Worth a look.

Ashley Kolodziej CSS-Tricks

A love letter to HTML & CSS

Ashley Kolodziej speaking directly to HTML:

You are the foundation of the Internet. You are the bridge between humans and information. When we say HTML isn’t an expertise in and of itself, when we take you for granted, we leave behind the people and systems who access that information using web crawlers and accessibility technology.

and CSS:

There is a time and place for specificity, and I cherish your ability to manage that. I love your system of overrides, of thinking ahead to what should and shouldn’t be modifiable by another developer easily. I find the appreciation of specificity and !important and contrast and all the beautiful little things you do well increasingly lost in the pursuit of the newest and shiniest frameworks.

A lovely love letter to two of my favorite technologies. 💚

A List Apart Icon A List Apart

The future of web software is HTML-over-WebSockets

Matt E. Patterson writing for A List Apart:

The dual approach of marrying a Single Page App with an API service has left many dev teams mired in endless JSON wrangling and state discrepancy bugs across two layers. This costs dev time, slows release cycles, and saps the bandwidth for innovation.

What’s old is new again (with a twist):

a new WebSockets-driven approach is catching web developers’ attention. One that reaffirms the promises of classic server-rendered frameworks: fast prototyping, server-side state management, solid rendering performance, rapid feature development, and straightforward SEO. One that enables multi-user collaboration and reactive, responsive designs without building two separate apps. The end result is a single-repo application that feels to users just as responsive as a client-side all-JavaScript affair, but with straightforward templating and far fewer loading spinners, and no state misalignments, since state only lives in one place.

I won’t spoil the ending where Matt places his bet on the best toolkit to accomplish this, but let’s just say you’ve probably heard of it. Whoops!

Austin Gil austingil.com

Building better forms for the web

An epic 5-part series on building HTML forms right.

Forms are arguably the most important parts of any web application. Without forms, we would not have sites like Google, Facebook, Amazon, Reddit, etc. However, the more I browse the web, the more I see poor implementations of forms.

In this series, we will examine the proper steps to creating forms for the web, how to think about the code we write, and considerations to make along the way.

Austin plans on turning this series into a full-blown book this year, so expect more from him in this arena very soon.

CSS css-tricks.com

Why do we still need tricks to autogrow <textareas>?

Chris Coyier:

Earlier this year I wrote a bit about autogrowing textareas and inputs. The idea was to make a <textarea> more like a <div> so it expands in height as much as it needs to in order to contain the current value. It’s almost weird there isn’t a simple native solution for this, isn’t it?

I’ll go a step further and say that this lack of a feature isn’t merely “almost weird”, it’s down right criminal. I’d love to champion this feature to the browser vendors/standards bodies, if one of y’all is willing to help me understand and navigate that process…

Addy Osmani web.dev

It's time to lazy-load offscreen iframes!

Addy Osmani:

Native lazy-loading for images landed in Chrome 76 via the loading attribute and later came to Firefox. We are happy to share that native lazy-loading for iframes is now standardized and is also supported in Chrome and Chromium-based browsers.

<iframe src="https://changelog.com" loading="lazy" width="600" height="400"></iframe>

YaS!! Lazy load all the things 💚

Matteo mailgo.dev

mailgo makes `mailto` and `tel` links more useful

Instead of only triggering the default email or phone apps when selecting a mailto or tel link on your website, “mailgo” provides a modal with more options such as “Open in Gmail”, “Open in Outlook”, etc.

This will extra functionality will be less important on mobile now that Apple is letting us change our default clients in iOS 14 (so that the default app would already be set to Gmail, for example), but you may find it helpful for your users anyhow. 4.96 KB cheap.

HTML htmx.org

High powered tools for HTML

htmx allows you to access AJAX, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.

htmx is small (~7kb gzipped), dependency-free, and even IE11 compatible. It’s the successor to intercooler.js and even comes bundled with a very nice haiku:

javascript fatigue:
longing for a hypertext
already in hand

0:00 / 0:00