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

CSS-Tricks Icon CSS-Tricks

Why JavaScript is eating HTML

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.


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

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(
        .title("My website"),
            .h1("My website"),
            .p("Writing HTML in Swift is pretty great!")


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

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.


Temple – an elegant HTML library for Elixir and Phoenix

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 Lambert

HTML is the web

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


The anatomy of accessible forms: the problem with placeholders

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 Icon Smashing Magazine

Web accessibility in context

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.

Brad Frost

Reducing motion with the picture element

The prefers-reduced-motion media query is a great tool for improving accessibility and helping users with visual impairments that make animations and such hard to follow, but did you know you can use it inside a picture element with a srcset? Brad writes:

This technique would definitely be helpful for posts with embedded animated GIFs in it. Authors would have to grab a static frame of a GIF as a fallback, so there’s a bit of extra work involved, but the technical execution is pretty dang straightforward.

What would be even cooler is if blogging and social media services did this automatically…


A community fork of the popular Semantic UI framework

I’ve been using Semantic UI for years. Still do to this day. Unfortunately, the project hasn’t been sustainable with a BDFL despite Jack Lukic’s efforts (you can read a lot more on that history right here).

These things happen. And when they do, it’s awesome to see the community rally around the project and keep it alive and thriving. That’s exactly the case with Fomantic UI. Let’s be clear: this is no hostile takeover. From the README:

NOTE: Fomantic was created to continue active development of Semantic-UI and has the intent to be merged back into the master repository once active development can restart.

Let’s hope the two can become one flesh at some point in the future. In the meantime, Fomantic is where the action’s at.

Eric Bailey CSS-Tricks

Reader mode: the button to beat

Eric Bailey writing for CSS-Tricks:

Good design isn’t about forcing someone to walk a tightrope across your carefully manicured lawn. Nor is it a puzzle box casually tossed to the user, hoping they’ll unlock it to reveal a hidden treasure. Good design is about doing the hard work to accommodate the different ways people access a solution to an identified problem.

For reading articles, the core problem is turning my ignorance about an issue into understanding (the funding model for this is a whole other complicated concern). The more obstructions you throw in my way to achieve this goal, the more I am inclined to leave and get my understanding elsewhere—all I’ll remember is how poor a time I had while trying to access your content. What is the value of an ad impression if it ultimately leads to that user never returning?

Fantastic article full of amazing resources. As web developers, we want people to experience our site the way it was intended. But that means we have to put in the work to make that experience easy, accessible, and clutter-free.

Robin Rendle CSS-Tricks

Front-end development is not a problem to be solved

Robin Rendle writing on CSS-Tricks:

We should see front-end development as a unique skillset that is critical to the success of any project.

I believe that’s why frameworks and tools like Bootstrap are so popular; not necessarily because they’re a collection of helpful components, but a global solution that corrects an inherent issue.

Bootstrap isn’t a skill though — front-end development is.

It’s supremely ironic that front-end development is incredibly undervalued by many, yet those same people use frameworks because moving a box around in CSS is “hard.”

Diana Smith

A meticulously detailed portrait in hand coded HTML and CSS

This is a spectacular project by Diana Smith:

Rules I have for myself:

  1. All elements must be typed out by hand
  2. Only Atom text editor and Chrome Developer Tools allowed.
  3. SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor.

The results are stunning, to say the least. I won’t embed the image here, because it won’t do it justice. You have to click through and see it for yourself.

0:00 / 0:00