A Friendly Introduction to SVG • Josh W. Comeau
A fantastic explanation of the building blocks of SVG, illustrated—as always—with Josh’s interactive examples.
Link tags: icon
89
THE AI CON - How to Fight Big Tech’s Hype and Create the Future We Want
A shame that this must-read book won’t be out in time for Christmas—’twould make a great stocking filler for a lot of people I know.
A smart, incisive look at the technologies sold as artificial intelligence, the drawbacks and pitfalls of technology sold under this banner, and why it’s crucial to recognize the many ways in which AI hype covers for a small set of power-hungry actors at work and in the world.
Small dents in the IndieWeb · Paul Robert Lloyd
Paul has been doing so much fantastic work with the indie web community, not least of which is co-organising Indie Web Camp Brighton—just ten days away now!
A cohesive and unified identity for IndieWeb protocols · Paul Robert Lloyd
I really enjoyed hanging out with Paul at Indie Web Camp in Nuremberg last weekend. And I like the iconography he’s proposing:
This design attempts to bring together a set of icons that share the concept of a node – a line and a point – and use this to add counters to each letter shape.
Using Web Components on My Icon Galleries Websites - Jim Nielsen’s Blog
Because I want my site to be progressively-enhanced (e.g. the core feature of the site — viewing icons — works without JS), I didn’t want a “shell” web component that’s merely an empty HTML tag in the initial HTML that later renders everything.
Jim seems bashful about calling what he’s built a true web component:
Maybe I shouldn’t be using the term “web component” for what I’ve done here. I’m not using shadow DOM. I’m not using the templates or slots. I’m really only using custom elements to attach functionality to a specific kind of component.
Au contraire! For me, this exemplifies the best mindset to have when wielding this technology.
Remix Icon - Open source icon library
I love how easy it is to use these icons: you can copy and paste the SVG or even get it encoded as a data URL.
11ty/api-indieweb-avatar: Return an optimized avatar image from a domain name input.
Here’s a nifty little service from Zach: pass in a URL and it returns an image of the site’s icon.
Think of it as the indie web alternative to showing Twitter avatars.
supercookie • workwise
Favicons are snitches.
Beyond Smart Rocks
Claire L. Evans on computational slime molds and other forms of unconvential computing that look beyond silicon:
In moments of technological frustration, it helps to remember that a computer is basically a rock. That is its fundamental witchcraft, or ours: for all its processing power, the device that runs your life is just a complex arrangement of minerals animated by electricity and language. Smart rocks.
Works offline
How do we tell our visitors our sites work offline? How do we tell our visitors that they don’t need an app because it’s no more capable than the URL they’re on right now?
Remy expands on his call for ideas on branding websites that work offline with a universal symbol, along the lines of what we had with RSS.
What I’d personally like to see as an outcome: some simple iconography that I can use on my own site and other projects that can offer ambient badging to reassure my visitor that the URL they’re visiting will work offline.
Round 1: post your ideas / designs · Issue #1 · works-offline/logo
This is an interesting push by Remy to try to figure out a way we can collectively indicate to users that a site works offline.
Well, seeing as browsers have completely dropped the ball on any kind of ambient badging, it’s fair enough that we take matters into our own hands.
Et In Silicon Valley Ego – Dr Beth Singler
The parallels between Alex Garland’s Devs and Tom Stoppard’s Arcadia.
The Worm is Back! | NASA
The return of NASA’s iconic “worm” logo (for some missions).
Lea Verou on Twitter
Now that all modern browsers support SVG favicons, here’s how to turn any emoji into a favicon.svg:
<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100"> <text y=".9em" font-size="90"> 💩 </text> </svg>Useful for quick apps when you can’t be bothered to design a favicon!
Point, don’t point — I love Typography
A brief history of the manicule, illustrated with some extreme examples.
Less… Is More? Apple’s Inconsistent Ellipsis Icons Inspire User Confusion - TidBITS
The ellipsis is the new hamburger.
It’s disappointing that Apple, supposedly a leader in interface design, has resorted to such uninspiring, and I’ll dare say, lazy design in its icons. I don’t claim to be a usability expert, but it seems to me that icons should represent a clear intention, followed by a consistent action.
PWA asset generator based on Puppeteer.
Automatically generates icons and splash screens based on Web App Manifest specs and Apple Human Interface Guidelines. Updates manifest.json and index.html files with the generated images.
A handy command line tool. Though be aware that it will generate the shit-ton of link elements for splash screens that Apple demands you provide for a multitude of different screen sizes.
How to speak Silicon Valley: decoding tech bros from microdosing to privacy | US news | The Guardian
Every one of these is chef’s kiss.
An oral history of the hamburger icon (from the people who were there)
From the days of Xerox PARC:
In your garage organization, there’s always a bucket for miscellaneous. You’ve got nuts and bolts and screws and nails, and then, stuff, miscellaneous stuff. That’s kind of what the hamburger menu button was.
Same as it ever was.
Accessible Icon Buttons — Sara Soueidan – Freelance-Front-End UI/UX Developer
Sara runs through the many ways of providing an accessible name to an icon button, backed up with Scott’s testing.