Tag: Links

Some Links on AI-Related Stuff

Posted on December 14, 2022 in Design

Every so often, I find that the links I save to read later fall into natural groups or patterns that reveal common threads of interest. The past couple of weeks have produced a lot of thoughts about ChatGPT, an AI-powered interface that responds to requests in a chat-like exchange. Sorta like a “Hey Siri” request, but in a Discord channel.

ChatGPT is just one of several AI-flavored tech, including GitHub’s CoPilot (writing code) and Dall-E (generative images and art).

Is it the end of human development? A new and exciting way to produce art? Just cocktail party conversation fodder? There are lots of opinions…

  • A Conversation With ChatGPT (Matthias Ott) — Matthias has a conversation with ChatGPT about typography that delves into deeply theoretical thoughts on design process. My favorite is in response to whether designers should learn to code: “Ultimately, whether or not designers should learn to code is a decision that each individual designer must make for themselves, based on their own goals and circumstances. Some designers may benefit from learning to code, while others may be better served by focusing on design principles and concepts.”
  • They were supposed to replace the creative jobs last (Dave Rupert)— “As interesting a future this creates, I’m a member of an old caste of people that still believes massive gains don’t come without realized costs; or more explicitly, electricity isn’t the only cost. What if the cost we’re paying is our perception of reality itself? It’s increasingly likely that the next thing you read or watch is the product of a content extruder.”
  • I just used ChatGPT to help with a complicated equation. — A reddit user used ChatGPT to write a complex equation in Notion. There were a couple hiccups, but it worked in the end.
  • ChatGPT Creates a Working WordPress Plugin – On the First Try (WP Tavern) — Sarah Gooding reporting on a ChatGPT experiment where Johnathon Williams was able to spit out a fully-functional WordPress plugin with a simple chat command. This is the sort of thing that both terrifies me but also blows my mind-hole.
  • ChatGPT Is a Smart Computer’s Impression of a Know-It-All (Pixel Envy) — Nick Heer points to an article on The Atlantic about ChatGPT that opens with three paragraphs written by ChatGPT. It’s crazy that it comes off as naturally as it does, even if it smells slightly fishy at first.
  • Use of ChatGPT1 generated text for content on Stack Overflow is temporarily banned. (Stack Overflow) — A mild dose of #HotDrama as far as Stack Overflow users posting ChatGPT-produced code as answers.
  • Midjourney vs. human illustrators: has AI already won? (Evil Martians) — I love the experiment in this post because it’s a clear example that AI doesn’t *just* work. In its current state, at best, AI is a junior designer when put to the task of creating an image: “After two and a half hours of back and forth with the AI, I was completely exhausted and decided to just upscale the most promising result.” A bonus is that the post concludes with a list of situations where AI might realistically help the team with future work — and it ain’t an entire person’s job.
  • Quick Thoughts on AI (Collaborative Fund) — Ha! Crazy to see a chart comparing how fast ChatGPT reached one million users to other popular services. It took Facebook 10 months, but only five days for ChatGPT.

Dall-E, I want a photo of a developer sitting at a desk with his head exploding while having a chat conversation on a desktop computer with an artificial intelligence algorithm.

Not bad, not bad.

Some Links on AI-Related Stuff originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

CSS-Tricks

, , ,

Some Links About CSS Gradients

Posted on November 2, 2022 in Design

Every once in a while, the blogging zeitgiest seems to coalesce around a certain topic and it’s like the saved articles in my bookmarks folder are having a conversation. The conversation sitting in there now is all about CSS Gradients and I thought I’d link some of the more interesting pieces.

  • Day 22: conic gradients — Manuel Matuzovic looked at conic gradients on Day 21 of his 100-day series about modern CSS, providing a nice high-level look at colors, angles, placement, and color stops. Then, on Day 22, he puts it use on the ::backdrop pseudo-element. (By the way, Twitter unexpectedly suspended his account — let’s help right that ship if we can.)
  • Do you really understand CSS radial-gradients? — Patrick Brosset has done guide-worthy work here and I’m honestly still working my way through it. But I apready appreciate his clear explanations and demos of things that I still muff up, like keywords for the size and shape of a radial gradient. I’m already linking this up in our own CSS Gradients Guide!
  • Highly Customizable Background Gradients — Hey, speaking of radial gradient, Scott Vandehey‘s recipe for one with multiple color stops made the rounds last week. His challenge was to create a gradient pattern that could support different color variations, which would normally be a hot mess of CSS classes and color values for each variation if not for using custom properties. This way, he can assign a custom property for the different colors and placement values for each color stop, then simply update the values depending on the context. And what’s more is that the way custom properties can be updated with JavaScript allowed Scott to build a tool for customizing his gradient pattern, which is generously shared at the end of the post.
  • CSS Halftone Patterns — Michelle Barker with a detailed breakdown of Ana Tudor’s “halftone” patterns. The effect is sorta like the dotted ink print of old school newspapers. While Ana uses Houdini under the hood for animation and hover effects, Michelle looks specifically at the halftone effect itself and how it’s constructed with a radial gradient. I especially love the way Michelle shows how to get from a straightforward grid of dots to one where the pattern is staggered a bit. And stick around to the end to see how she punctuates the effect with a mask-image that uses a linear gradient to create a fading effect. I riffed with this pattern a bit, too, and wound up with something neat that looks like a runny ink blot filter.
  • A Dashing Navbar Solution — Eric Meyer was given an interesting design challenge for a menu where a dotted line comes out of the “current page” link and becomes part of a larger dotted border along the left edge of the content container. Eric is always a great example of how to think like a front-end developer, and he does it here as he describes the alternate route he took using a linear gradient when he hit a snag with the standard approach of setting border-style: dotted on the element.
  • Masked Gradient Dashed Lines — Eric with a follow-up to that last link showing not only how he connected the dashes of a left border to the dashes of a raster image, but how his persnickety design eye convinced him to change his solution to mimic the lower resolution of the image’s dashes using two repeating linear background gradients as a mask-image on the background gradient. So nerdy and great!

Some Links About CSS Gradients originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

CSS-Tricks

, , ,
[Top]

7 Fresh Links on Performance For March 2022

Posted on March 2, 2022 in Design

I have a handful of good links to articles about performance that are burning a hole in my bookmarks folder, and wanna drop them here to share.

Screenshot of the new WebPageTest homepage, a tool for testing performance metrics.
The new WebPageTest website design
  • From fonts to SVG: an icon migration strategy— Erwin Hofman notes that he was using icon fonts out of sheer convenience, but that there are loads of reasons not to use them. He provides details on his new strategy for using icons, which is based on the <use> technique. Five years later, I’m still a big fan of just dunking the <svg> in the HTML where you need them. It’s just an HTML partial like any other.
  • Next.js Performance: Making a Fast Framework Even Faster— Ben Schwarz says that Next.js is already a pretty fast framework in that it does smart things that keep even React powered pages snappy. But performance isn’t something that can be left entirely to a framework. You have to do work. Fortunately, Next.js has some pretty handy helpers for things like dynamically (lazily) loading components, deferring scripts, optimizing images, and more.
  • Redirect Liquidation— Tim Vereecke covers a fascinating technique where instead of redirecting an old URL to a new URL, you let the old URL load, dynamically load the new content, then history.replaceState the old URL with the new URL. It’s faster, but just don’t do it for bots.
  • Performant A/B Testing with Cloudflare Workers— Philip Walton covers how A/B testing is a little trickier on static sites than server-backed sites, but you can pull it off (performantly) thanks to Cloudflare Workers which can manipulate HTML before it hits the browser, much like a Service Worker except at the edge rather than at the client. Save a cookie and you can maintain users in their proper groups.
  • A Unified Theory of Web Performance— Alex Russell tries to answer Tanner Hodges’ call for actually defining web performance. It’s one of those things that seems obvious (like it’s clear when certain things help and hurt web performance) but actually defining it is tricky. And not just defining it in terms of specific metrics (even that is tricky), but answer questions like: What are this discipline’s guiding principles? What does it look like to practice web performance? How do we do it?
  • Unveiling the new WebPageTest UI— I absolutely love seeing WebPageTest’s design evolve and improve. It’s one of those products that’s clearly a best-in-class tool for performance practitioners, yet had a prettttty gnarly design for a lot of years. This is way better. It’s like when Google Fonts finally got a redesign and the broad community let out a collective exhale of appreciation.
  • Caching Header Best Practices— Simon Hearne’s dissertation on Cache headers. When I first started caring about web performance, this was, like, the main thing. If you incorrectly send Cache headers, users might be re-downloading a file over and over unnecessarily when they don’t need to, which is about the worst thing possible. I’m glad to see headers keep getting attention and re-imagined as the web evolves.

7 Fresh Links on Performance For March 2022 originally published on CSS-Tricks. You should get the newsletter.

CSS-Tricks

, , , ,
[Top]

9 New React and JavaScript Links for February 2022

Posted on February 12, 2022 in Design

Every now and then, I find that I’ve accumulated a bunch of links about various things I find interesting. Like React and JavaScript! Here’s a list of nine links to other articles about them that I’ve been saving up and think are worth sharing.

React and JavaScript code snippets with colorful hand-marked scribbles of notes.
Source: “Good advice on JSX conditionals” by Vladimir Klepov
  • Seed Funding for Remix
    Remix went open source after taking funding which seems like a solid move. It’s a for-now-React-only framework, so I think it’s fair that everyone asks how does it compare to Next.js. Which they answered. Probably worth noting again for us CSS folks, Kent mentioned: “Because Remix allows me to easily control which of my CSS files is on the page at any given time, I don’t have all the problems that triggered the JavaScript community to invent workarounds like CSS-in-JS.”
  • React Router v6
    Speaking of that gang, they released React Router v6, which looks like a positive move — all hooks based, 50% smaller than v5 — but is yet another major version with API changes. React Router has a history of API changes like this and they trigger plenty of grumbling in the community. There is plenty of that again.
  • React Aria
    “A library of React Hooks that provides accessible UI primitives for your design system” from… Adobe. Interesting. Looks like some pretty hard problems being solved here, like FocusScope (“When the contain prop is set, focus is contained within the scope.”) and interesting color inputs, like useColorField, useColorSlider, and useColorWheel. There are 59 hooks in all, ranging from interactions and forms to overlays and internationalization, with plenty of others in between.
  • Front End Tables: Sorting, Filtering, and Pagination
    Tania Rascia: “One thing I’ve had to do at every job I’ve had is implement a table on the front end of an application that has sorting, filtering, and pagination.” No shame in reaching for a big library with all these features, but sometimes it’s best to DIY.
  • Good advice on JSX conditionals
    Vladimir Klepov covers the (weirdly) many ways fairly simple conditionals can go wrong, like the number 0 leaking into your markup, and how to manage update versus remount in conditionals.
  • useProseMirror
    I’ve found ProseMirror to be a pretty nice rich text editor in the past. The library itself isn’t actually in React, so I think it’s a smart call here to make a modern React wrapper for it.
  • Spead up sluggish inputs with useDeferredValue
    You can introduce gnarly input delay the more work that an onChange function has to do on a text input. “useDeferredValue gives us a way to separate high priority updates from low priority updates for cases like this.”
  • 🎥 A Cartoon Intro to WebAssembly
    If you don’t have a good understanding of what WebAssembly is, then Lin Clark will get you there in this video from JSConf EU 2017. So, no, not a new link or anything, but it’s new to me!
  • 🎥 Turborepo Demo and Walkthrough
    Vercel bought Turborepo. Turborepo is specifically focused on making monorepos better. As someone who’s main codebase is a monorepo with Lerna and Yarn Workspaces such that we can have multiple different sites all share things like a design system, this is right up our alley. This video is with the Turborepo creator Jared Palmer and Lee Robinson, head of developer relations at Vercel. In this video, you get to see it all work.

9 New React and JavaScript Links for February 2022 originally published on CSS-Tricks. You should get the newsletter and become a supporter.

CSS-Tricks

, , , ,
[Top]

8 Helpful Accessibility Links for January 2022

Posted on January 13, 2022 in Design

Every now and then, I find that I’ve accumulated a bunch of links about various things I find interesting. Accessibility is one of those things! Here’s a list of related links to other articles that I’ve been saving up and think are worth sharing.

Screenshot of the Accessibility Maze homepage.
  • Myths about Web Accessibility — Alvaro Montoro covers some classics. My favorite is “accessibility is for people with disabilities.” Accessibility is for people with disabilities, because they are people, and accessibility is for people.
  • Accessibility Myths — Speaking of myths, Sergei Kriger built this entire site for them. I’ll cherry pick “Accessibility can be achieved by only adding ARIA attributes”, which is famously wrong as the first rule of ARIA is not using it.
  • Form fields in depth — While perhaps not specifically about accessiblity, forms are among the most crucial things to get accessibility right on and go wrong far too often. This new guide from Google incorporates accessibility throughout and gets specifically into it as well.
  • Accessibility Maze — Build by the Digital Education Strategies team in The G. Raymond Chang School of Continuing Education at Ryerson University. So fun! You can (and largely have to) play the whole game on the keyboard.
  • HTML focusgroup attribute — You know how when you’ve focused on one of the radio buttons in a group of radio buttons, then you can use the arrow keys to move between them? Or how the up/down arrows work to navigate the items of a native select? You could call that “focus group navigation”, and unfortuantely we can’t tap into that behavior whenever we want to. But what if we could with something as simple as a focusgrup attribute in HTML? That’d be cool, someday.
  • Adding A Dyslexia-Friendly Mode To A Website — I always think of the Dyslexie font, but clearly there is a lot more to it than just using the right font. A lot more spacing, especially typographically, and less clutter is helpful. See the demo. A somewhat rare use-case of word-spacing in use there.
  • How many people with disabilities use our site? — Hidde de Vries says it’s probably not a big number, but that doesn’t matter (love the quote from Tim Cook). Still, if you need to find a business upside, Hidde points out a report that cites 15-20% of the world’s population has a disability.
  • 🎥 Building The Most Inaccessible Site Possible — Manuel Matuzovic proves you can get 100’s across the board on a Lighthouse test and yet make an entirely unusable site. It’s like learning in reverse. If you know what causes problems, you know how not to do those things.

8 Helpful Accessibility Links for January 2022 originally published on CSS-Tricks. You should get the newsletter and become a supporter.

CSS-Tricks

, , , ,
[Top]

8 Interesting Typography Links for January 2022

Posted on January 7, 2022 in Design

Every now and then, I find that I’ve accumulated a bunch of links about various things I find interesting. Typography is one of those things! Here’s a list of typography links to other articles that I’ve been saving up and think are worth sharing.

A specimen of the Retail typeface, once of the typography links in the list.
An awesome new font from OH no Type Company
  • Output Sans goes variable — David Jonathan Ross’s Output is a real workhorse typeface. He’s been re-doing it as a variable as part of an effort to get variable fonts “over the hump” — that is, away from being thought of as experimental and thought of as practical for day-to-day usage.
  • Line Lengths — Shawn says, “it seems an obvious immediate win to apply max-width: 69ch to your blog content blocks.” Nice. Oliver Schöndorfer dug into line length recently too.
  • Smarter line-heights with “calc” — Check out this particular part of Josh’s custom CSS reset. A potentially cool way to handle line-height for both body copy and headers in one swoop.
  • Women in Type — Just an incredible website from the University of Reading team. “These women worked daily on developing and producing typefaces that were, eventually, almost always attributed to male designers. They merit attention as key contributors to the design process of many renowned typefaces that emerged throughout the twentieth century.”
  • Retail — “Retail is the result of focussing our energy on the not-too-trendy world of humanist sans.” Very nice work from OH no Type Company.
  • Designers’ Pick: Best Google Fonts for 2022 — The fact that you can go from zero to implemented custom fonts, for free, in like 30 seconds with Google Fonts is going to keep it the most-used custom font solution likely as long as it exists. Fortunately, the website for it has gotten a lot better, the performance of them has gotten good (and controllable), and as this post on Qode shows, there is a ton of really great new choices available. I like the look of Space Grotesk. The Typewolf newsletter is always covering new good ones. Lately: Readex Pro & Spline Sans.
  • Google Fonts Knowledge — Speaking of Google Fonts! Elliot Jay Stocks worked on this beefy project: “30+ lessons spread out over three modules — “Introducing Type”, “Choosing Type”, and “Using Type” — and 100+ glossary definitions.”
  • Modern fluid typography editor — The output from this generator tool by Adrian Bece is a lot like the clamp() stuff from Andy’s Consistent, Fluidly Scaling Type and Spacing. Adrian’s helps you visualize the “curve”, but actually this Fluid Type Scale Calculator from Aleksandr Hovhannisyan might be a smidge more useful when setting up a new project as it gives you a full spectrum of custom properties to use.

Do you have any interesting typography links from the past month worth sharing? Drop ’em in the comments!

8 Interesting Typography Links for January 2022 originally published on CSS-Tricks. You should get the newsletter and become a supporter.

CSS-Tricks

, , , ,
[Top]

Links on Performance V

Posted on December 21, 2021 in Design
  1. Does shadow DOM improve style performance? — Nolan Lawson covers how, because of the inherent encapsulation of the shadow DOM, the styling gets applied a bit faster than it would if those styling rules were relevant to the entire page. But as ever, it depends, and it turns out that classes and IDs are actually faster outside of it (?!), so if you just style with those, that’s the way to go.
  2. HTML-first, JavaScript last: the secret to web speed! — Miško Hevery is talking about Qwik and one of the things that makes it fast. I don’t know much about Qwik, but it looks like a JavaScript framework that is pretty SSR-friendly as it keeps state directly in the HTML/DOM (e.g. div ::app-state="./AppState" app-state:1234="{count: 321}">), which you would think is slow, but apparently isn’t.
  3. Small Bundles, Fast Pages: What To Do With Too Much JavaScript — Some thoughts from Ben Schwarz on what to do with those problematic big bundles. Make ’em smaller is the main game, then constantly keep an eye on them.
  4. Getting Your head Straight: A New CSS Performance Diagnostics Snippet — We covered Harry’s super clever snippet a while back, but Vitaly had beaten us to it and it’s worth re-sharing because it’s awfully cool.
  5. New HTTP standards for caching on the modern web — Tim Perry gets into two brand new (proposed) caching headers: Cache-Status and Targetted Cache-Control. “These are designed to update HTTP standards to match the reality of the CDN-powered web that exists today, creating specifications that formalize existing practices from popular CDNs.” Feels like good stuff where web standards can come in and fix up a gnarly situation.
  6. Optimizing resource loading with Priority Hints — Leena Sohoni, Addy Osmani, and Patrick Meenan talk about the Priority Hints…. uh… I’d call it an API except it’s really just an importance attribute in HTML, or a JavaScript param in other APIs. Here’s the draft spec. It’s one of those things, like responsive images with srcset/sizes or will-change, where you, the-author, know more than the browser does and allows you to give the browser information it needs to perform better.
  7. Have Core Web Vitals made the web faster? — CWVs were announced in May 2020 and then we were told by May 2021 they would become a factor in SEO. Barry Pollard checks in to see if that big carrot (or stick?) has enticed us all to make sites faster en masse. The answer is complicated because the way CWVs are measured has changed in that time. Some measurements say yes, things are better. But if you use steady alternate measurements from before/after, things look worse. I all depends on what slice of the web you’re looking at.
  8. Improving performance with Islands Architecture and PostCSS — Astro has a cool feature for components—like <Sidebar client:media={"(min-width: 768px)"} />—where that element isn’t loaded at all unless that media query matches. I might argue that’s only a good idea if it’s a heavy component or has JavaScript it requires. I say that because it seems like using it for something like static HTML would actually offset any potential savings, as extra JavaScript has to run to test the media conditions and then conditionally fetch assets. But anyway, Oliver Turner demonstrates how to share the media queries between your JavaScript and CSS (via PostCSS).
  9. Image Optimizer — This is an Electron-powered (but macOS only) drag-and-drop image optimizer. Like ImageOptim, I suppose. Both are free.

CSS-Tricks

,
[Top]

Links on WordPress I

Posted on December 8, 2021 in Design

I try to keep up with WordPress news because I’m a big WordPress user and have many production sites that run on it. WordPress has been good to me as a site builder for literally my entire career. So, like we do with typography (example), accessibility (example), and JavaScript (example), I’m hoping to occasionally drop packs of links things I find particularly interesting in that ecosystem.

  1. Advanced Custom Fields: A Guide to Custom Fields and ACF Blocks by Iain Poulson — “ACF is exactly what WordPress as a Content Management System (CMS) has been missing when it comes to having more control over your content.” Exactly. ACF is a big deal for WordPress, making it into a proper CMS when you need to have that specific control over data modeling. You might think the block editor fights back on the need for ACF a little, but no, ACF’s custom block solution is pretty damn good, making it almost even more valuable. This is a good overview.
  2. Make Unique Designs by Combining Blocks by Mel Choyce — The Block Editor is truly capable of crafting compelling and highly designed pages. Linking to the slides here, but the magic is in the video below the slides. Starting at 13:00, you can see Mel showcase pages built with the Block Editor and literally no additional plugins. Between Columns, Spacers, and Cover blocks alone, you can get pretty dang fancy.
  3. WP Engine Makes Local Pro Free for All Users by Sarah Gooding — Pretty cool of Flywheel (owned by WP Engine) to make Local entirely free. It used to have a PRO version with some compelling features worth paying for, so it feels like many of us will literally save money. I can’t imagine working with WordPress locally without Local anymore, it’s so good. My favorite little baby feature is the one-click admin login. No cluttering up my password manager with a bunch of dumb local site logins. (Disclosure: Flywheel sponsors this site.)
  4. Simpler Block Spacing in WordPress with :is() and :where() by Michelle Barker — The Block Editor brings its own HTML classes that we now have to deal with in our own themes (and admin styles). The nesting can lead to pretty gnarly CSS selectors, but they end up cleaner thanks to the comma-sperated powers of these pseudo selectors.
  5. Faust.js, the Framework For Headless WordPress by Will Johnston — WP Engine has created Faust, a “framework for building front-end applications for headless WordPress sites. Faust.js provides tooling to reduce the pains of building a headless WordPress site (namely around data fetching, authentication, previews, and SSR/SSG) while offering a pleasant experience for both developers and publishers.” It’s based on Next.js.
  6. Proposal for a Performance team by Ari Stathopoulos — “Compared to other platforms (e.g., Wix, Shopify, Squarespace), WordPress is falling behind. Other platforms are on average faster – and becoming increasingly faster – than WordPress websites, and are actively investing in (and marketing) core performance-as-a-feature.” Seems like a smart move to me, to have a team dedicated to this long-term. But it’s also an extremely tall order. Themes and plugins, which WordPress itself doesn’t directly control, are the biggest influence on performance.
  7. Theme.json for WordPress Block Themes explained by Ellen Bauer — I really need to bone up on this myself. This is a new file that’s a part of themes that is going to have a lot of control over styling information. Seems like the future and not to be avoided, although a much bigger deal for sites that get into “full site editing” (FSE). Eric Karkovack has another intro post on all this. And speaking of full site editing, Annie McCarthy has a roundup of Q & A from people concerned about specific things as FSE marches forward.
  8. Query Loop: The Ins and Outs of One of WordPress 5.8’s Most Powerful Features by Justin Tadlock — The Query Block seems like a very big deal, especially for full site editing. If you don’t have a template file you can use to execute a WP_Query then… where do you do it? In a Query Block, soon. Looks like it’ll be fun to use, as not only do you query for what you want, but you apply design patterns to the results visually. I imagine there is going to be a lot of opportunity in shipping patterns for this block.
  9. Encute by Mark Jaquith — a “WordPress plugin for fluent management of scripts and styles.” I used to use MinQueue for this, but it looks long dead. What I liked about MinQueue is it had a visual component that would show you all the scripts and styles that were enqueued on any page, so you knew the full list of what was there, and then take action. I used it to turn off crap that plugins loaded that I didn’t want. Or even if I did, I’d take the resource and load it myself so I could properly concatinate it (becoming less of an issue with HTTP/2).

The #1 tool I use to save links to review later is Notion Web Clipper. I kick links over to one big table in Notion then I read them and tag them when I have time. My flow is essentially RSS (Firehose) → Notion (Good finds) → WordPress (Best of).

CSS-Tricks

,
[Top]

Buttons vs. Links

Posted on November 1, 2021 in Design

There are thousands of articles out there about buttons and links on the web; the differences and how to use them properly. Hey, I don’t mind. I wrote my own as well¹.

It’s such a common mistake on the web that it’s always worth repeating:

  • Is the intention to send someone to another URL? It’s a link in the form of <a href="">.
  • Is it to trigger some on-page interactivity? It’s a button in the form of <button>.
  • Any devition from from those and you better smurfing know what you are doing.

Eric Eggert wrote a pretty good piece recently with a nice line about why it matters:

If you had a keyboard and your “e” key would only work 90% of the time, it would be infuriating. Reliability and trust in user interfaces is important to allow users to navigate content and application with ease. If you use the right elements, you support users.

Manuel Matuzović has a Button Cheat Sheet that is a lol-inducing ride about why literally everything other than a <button> isn’t as good as a button. Manuel links up Marcy Sutton’s epic The Links vs. Buttons Showdown (video), pitting the two against each other in a mock battle — “We’ll pit two HTML elements against each other in a crusade of better and worse, right and possible wrong. One element is triggered with the space bar, the other with the enter key. Who will win?” I don’t know whether to laugh or cry at how far we have to go to spread this information.

  1. I think our article A Complete Guide to Links and Buttons is a pretty good example of beginner-oriented content, which is my favorite style of content to write and publish! But because there is so much beginner-oriented content on the web, the bar is pretty high if you want to make and impact and get enough SEO for anyone to even ever find it. So, in this case, the idea was to go big and write nearly as much as there is to write about the technical foundation of links and buttons. If you’ve got a knack for this kind of writing, reach out for sure.

The post Buttons vs. Links appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

,
[Top]

Some Typography Links VIII

Posted on October 21, 2021 in Design

The post Some Typography Links VIII appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

CSS-Tricks

, , ,
[Top]