HTML Icon

HTML

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

Austin Gilaustingil.com

Building better forms for the web

logged by jerodsanto via austingil 2021-01-04T15:31:00Z #html +1

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.

CSScss-tricks.com

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

logged by jerodsanto 2020-11-12T14:36:00Z #css +1

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 Osmaniweb.dev

It's time to lazy-load offscreen iframes!

logged by jerodsanto 2020-07-24T16:55:00Z #html +1

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 💚

Matteomailgo.dev

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

logged by jerodsanto via manzinello 2020-07-13T13:15:00Z #html +1

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.

HTMLhtmx.org

High powered tools for HTML

logged by jerodsanto via recursivedoubts 2020-06-24T15:19:00Z #html +1

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

Chris CoyierCSS-Tricks

What to use instead of `number` inputs

logged by jerodsanto 2020-03-09T16:13:00Z #html

Chris Coyier:

You might reach for <input type="number> when you’re, you know, trying to collect a number in a form. But it’s got all sorts of issues. For one, sometimes what you want kinda looks like a number, but isn’t one (like how a credit card number has spaces), because it’s really just a string of numbers. Even more importantly, there are a variety of screen reader problems.

(We discuss the uncanny valley of number inputs on this JS Party episode about the stale parts of browsers.)

Turns out the best practice (just use text inputs) has a twist to it: inputmode!

CSS-Tricks IconCSS-Tricks

Why JavaScript is eating HTML

logged by jerodsanto 2020-02-14T17:35:00Z #javascript +1

Mike Turley for CSS-Tricks:

JavaScript developers have realized that by defining a page’s structure in JavaScript instead of in HTML (using frameworks such as React), they can simplify the development and maintenance of user interaction code that is otherwise much more complex to build. Of course, when you tell someone that the HTML they wrote needs to be chopped up and mixed in with JavaScript they don’t know anything about, they can (understandably) become frustrated and start asking what the heck we’re getting out of this.

I get this question occasionally and I often have trouble answering it. All of the materials I’ve found on this topic are written for an audience that is already familiar with JavaScript — which is not terribly useful to those who focus on HTML and CSS. But this HTML-in-JS pattern (or something else that provides the same benefits) will likely be around for a while, so I think it’s an important thing that everyone involved in web development should understand.

Swiftgithub.com

A DSL for writing type-safe HTML, XML, and RSS in Swift

logged by jerodsanto 2019-12-04T15:28:00Z #swift +1

It can be used to build websites, documents and feeds, as a templating tool, or as a renderer for higher-level components and tools. It’s primary focus is on static site generation and Swift-based web development.

I’ve always enjoyed using DSL’s like this.

let html = HTML(
    .head(
        .title("My website"),
        .stylesheet("styles.css")
    ),
    .body(
        .div(
            .h1("My website"),
            .p("Writing HTML in Swift is pretty great!")
        )
    )
)

HTMLalmanac.httparchive.org

The HTTP Archive's first annual *state of the web* report

logged by jerodsanto 2019-11-13T17:07:00Z #html +2

Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. It is comprised of 20 chapters spanning aspects of page content, user experience, publishing, and distribution.

There’s so much to digest here. 85 contributors! Quite an achievement and one that I’m excited to dig in to.

Phoenixmitchellhanberg.com

Temple – an elegant HTML library for Elixir and Phoenix

logged by jerodsanto 2019-07-29T15:07:00Z #phoenix +2

Conventional template languages like EEx use a form of interpolation to embed a programming language into a markup language, which can result in some ugly code that can be difficult to write and debug.

Temple is written using pure elixir.

There are some good ideas here, for sure. (Click through for code samples.)

My concern with this (and with pretty much all non-HTML style template languages) is cognitive overhead for folks who’d rather be writing HTML. That being said, if I were creating a web app from scratch all by my lonesome, I’d 💯% give Temple a go.

Pete Lambertpetelambert.com

HTML is the web

logged by jerodsanto 2019-06-28T14:27:00Z #html +2

My big concern is at the bottom of that technology pyramid. The lowest common denominator of the Web. The foundation. The rhythm section. The ladyfingers in the Web trifle. It’s the HTML. And it is becoming increasingly clear to me that there’s a whole swathe of Frontend Engineers who don’t know or understand the frontend-est of frontend technologies.

Solid rant with a nice list of resources at the end. 👌

HTMLdeque.com

The anatomy of accessible forms: the problem with placeholders

logged by kball 2019-06-15T17:20:00Z #a11y +1

A great example of how good accessibility practices are often actually good usability practices for all. While the problems highlighted are most impactful on those who have challenges, I found every single alternative suggested improved usability for me as well.

Author Raghavendra Peri states:

According to the research conducted by Nielsen, it is not best practice to have a placeholder in the form field from a user experience perspective. This is because many users are confused by placeholders. In particular, people with cognitive disabilities tend to have issues understanding placeholder text because they think it is pre-populated text and will try to submit the form without entering their specific information.

TL;DR Don’t use placeholders! But for examples of what else to do, read this article.

Smashing Magazine IconSmashing Magazine

Web accessibility in context

logged by kball 2019-06-14T16:25:00Z #a11y +1

Fascinating read through covering historical context for accessibility and assistive technologies as well as diving into the way we do accessibility in the web today.

According to author Be Birchall this article aims to shift your perspective

by showing how web accessibility fits into the broader areas of technology, disability, and design. We’ll see how designing for different sets of abilities leads to insight and innovation. I’ll also shed some light on how the history of browsers and HTML is intertwined with the history of assistive technology.

0:00 / 0:00