html
Aias
Every element is an html.
Can I include?
A WebsiteThis site helps you understand which tag you can include in another using the WHATWG HTML specification.
So many little design helper sites!
An Article by Chris CoyierI’m sure y’all find these things just as useful as I do. They don’t make us lazy, they make us efficient. I know how to make a pattern. I know how to draw a curve with a Pen Tool. I know how to convert SVG into JSX. But using a dedicated tool makes me faster and better at it. And sometimes I don’t know how to do those things, but that doesn’t mean I can’t take advantage. Fake it ’til you make it, right?
Element diversity
An Article by Manuel MatuzovicDid you know that there are 112 elements in HTML?!
It would be a bit too easy to only blame JS frameworks [for the overuse of
div
s]; there are several reasons we use divs so much:- Poor knowledge of HTML elements
- Lack of understanding why
- Insufficient CSS skills
- Default styles
- JS frameworks
- We don't care enough about the page
- Some elements are hard to style
Guidelines for Brutalist Web Design
An Article by David Bryant Copeland- Content is readable on all reasonable screens and devices.
- Only hyperlinks and buttons respond to clicks.
- Hyperlinks are underlined and buttons look like buttons.
- The back button works as expected.
- View content by scrolling.
- Decoration when needed and no unrelated content.
- Performance is a feature.
This page is a truly naked, brutalist html quine
An Article by Leon BambrickI decided to make a truly naked, brutalist html page, that is itself a quine. And this page is it.
Viewing the source of this page should reveal a page identical to the page you are now seeing. Nothing is hidden. It's a true "What you see is what you get."
this vs. that
A Website by Phuoc NguyenThe Great Divide
An Article by Chris CoyierOn one side, an army of developers whose interests, responsibilities, and skill sets are heavily revolved around JavaScript.
On the other, an army of developers whose interests, responsibilities, and skill sets are focused on other areas of the front end, like HTML, CSS, design, interaction, patterns, accessibility, etc.
HTML Elements Memory Test
A WebsiteMy first attempt was 54. Not even half!
How many HTML elements can you remember?
Brilliant Hardware in the Valley of the Software Slump
It begins with craft
Something strange is happening in the world of software: It’s slowly getting worse. Not all software, but a lot of it. It’s becoming more sluggish, less responsive, and subtly less reliable than it was a few years ago.
In some ways this is hyperbole. Objectively, we’ve never been able to do so much, so easily with our smartphones and laptops and tablets. We’ve never pushed more data between more places more readily. But while the insidious “worseness” I mention falls only in part on the engineering side of things, it falls harder on the more subjective, craft side of things, making it all the more worrisome.
Why should we care about this? Because the majority of our waking hours take place within the confines of applications. A truth recently amplified by the covid pandemic.
And I believe software used by millions (if not billions) has a moral duty to elevate the emotional and intellectual qualities of its users. That elevation begins with craft.
Penn Station
In the same way that physical architecture can affect a mind, so too can software. Slower, less reliable software is like Penn Station: Sure, you can catch a transfer from one train to another but the dreary lowness of the place, the lack of sunlight or sensible wayfinding will make you feel like a rat, truculent and worthless, and worse: You’ll acclimate to that feeling and accept it as a norm.
Edges
Hardware has literal and metaphorical edges — it must be fully complete and largely bug free to ship. Software? It’s far more amorphous, like mist. Patches can be endlessly pushed. It never ends. Faulty hardware can destroy a company. Faulty software can be patched. The butterfly keyboard debacle may never be lived down. Even as I type on this improved Magic Keyboard, I can’t help but wonder: Did they really test this thing? I had three butterfly keyboards die on me, twice in the field. Not fun. Hardware failures live long in the mind.
The business case for craft
macOS software that adheres to craft — Things or Carbon Copy Cloner or BBEdit or Sublime Text (which, despite not being “native native” feels so solid and so responsive you’re willing to overlook its quirks) or Bear or Alfred or iA Writer or Keynote (arguably one of the best pieces of macOS software of all time) or anything by Panic, heck, even Terminal or Quicken (which, against all rational expectations is just a joy to use)5 — exists in troves, the existence of such proves to the Slacks or Twitters or Adobes of the world that it’s not impossible nor rare to produce craft-oriented software in service to user fluency, and still make a profit.
In fact, there’s a business case to be made for being craft- and fluency-focused. We’ve seen entire companies with business models that could be summarized as “Bloat-Free X” emerge in recent years. Affinity is bloat-free Adobe. Install Adobe Creative Cloud on your laptop and marvel at the no fewer than a dozen processes whirling around in the background for unknown purposes. It’s no surprise Affinity Photo and Publisher and Designer have taken off. Sketch’s main feature for many years was simply: Not Adobe.
And the web! When you care — when you really give a shit — the web is awe inspiring. I still can’t believe Figma is web-native (also born from the Not Adobe camp). That an application can feel so powerful, so fast, so well-crafted and be fully web-based should be a kind of lighthouse-archetype for all other sites lost in a sea of complexity and muck and unnecessary frameworks.