Sharing links

@hdv FYI en MNATD (misschien niks aan te doen): je preview cards worden gechopt (in mijn Mastodont-cliënt (op mijn device))

@jvhellemond oei… heb 'm zojuist vervangen door eentje met een gangbaarder formaat, moge de og goden me welgezind zijn

@hdv I used to save them on a micro site I had built with WordPress.

I eventually stopped as I already have my own Mastodon instance where I share the links (not deleted/lost).

I upload my Mastodon archive to make it searchable fast: https://quicoto.github.io/mastodon-archive/

Easy access/search in a single HTML page.

Additionally I save the most relevant to my private wiki.

@hdv ???? using Shortcuts is so smart! I must do the same for my https://ohhelloana.blog/bookmarks/ page!

I was thinking of doing something involving netlify functions and a personal slack channel but didn't get around it yet (also don't know if it is possible) because I have the problem as you regarding getting the .md file live.

@hdv i’ve been meaning to do something similar for aaaaaaages. might get around to it this weekend. was going to use a shortcut too.

i know that people use working copy (https://workingcopyapp.com) to do the git bits. might help you too.

@stevenjmesser @hdv came here to say that. This page may help connect working copy to your shortcuts: https://workingcopy.app/manual/shortcuts I highly recommend the app.

@stevenjmesser would love to subscribe to yours! oooh I should look into Working Copy…thanks!

@hdv you might be interested in my own solution, with a bookmarklet instead of an Apple shortcut: https://nicolas-hoizey.com/articles/2023/02/08/a-bookmarklet-to-create-a-new-link-content-markdown-on-github/

@nhoizey @hdv I've got yet one more solution — surfacing items tagged as `share` via Readwise's Reader API ???? https://coryd.dev/posts/2024/link-blogging-using-readwise/

@joostvanderborg @stevenjmesser @hdv I came here to apparently thrice the Working Copy recommendation. I used to fix stuff for w3.org/WAI from my phone on the go back in the day!

@cory I didn’t know Readwise Reader before reading your post! ????

Another option is using your own site as a Share Target, but it’s a bit more complex, and requires some dynamic parts.

@hdv

@nhoizey @hdv so if I read something I want to share, I tag it as share, my site rebuilds and surfaces it as data in Eleventy which is then added to my /links page, my now page and the feed that is sent to Mastodon.

When it's sent to Mastodon it rebuilds and adds the link tot he post from the cache.

@cory nice automation! ????

I like to sometimes add some words, so this wouldn’t work for me.

@hdv

@nhoizey @hdv ah yeah — I’ve co-opted the description field in Readwise and pass that text through a markdown filter to render it on my links page, but it’s not included when syndicating it here.

@ohhelloana I'm hoping to keep the habit by optimising for easy note writing, as that's the part I probably don't have motivation to do later (whereas the task of getting it live seems less prone to procrastination ????)

@cory ok ????

@hdv

@joostvanderborg @hdv excellent, thanks for sharing!

@yatil @joostvanderborg @hdv that’s awesome!

A significant number of events took place from the 13th until this evening so there’s been a snowball’s chance in hell of doing any reading.

Daily Reads:

Hidde de Vries on sharing links

Open Culture: Bertrand Russell and Buckminster Fuller on Why We Should Work Less, and Live and Learn More.

Brad Carter: A system for really remembering stuff. This one hits home hard for a collector of links like me. The reason I collect links is for the benefit of the people I know might be interested.

Seth Godin: The generous ask. When we offer to help someone get to where they were going, we’re approaching the relationship with generosity, not selfishness.

John Hagel: The Paradox of Progress

QOTD:

Lay-offs are also always a symptom of exec incompetence.
\– Baldur Bjarnasson

Music:

Muireann Bradley Candyman

just realised that I forgot to build in sending a webmention to the page I'm linking to. Will add at some point

• The Internet Is Full of AI Dogshit - Aftermath - How AI-generated content is ruining search engines for everyone.
• Exposed RSS - I get sites not having an “RSS” for “Feed” link on their website while actually having an RSS feed. I don’t like it, but I get it. Maybe they picked an off-the-shelf t…
• You should blog | keith.is - Keith calls out for folks to make this the year of blogging about whatever the hell you want. He’s suggested some great places to get started!
• Layers of context. - Will Larson on the importance of thinking outside of your immediate context: why a change that seems like a great idea may not be so well received elsewhere in the organisation, and how you can get a better radar for these things.
• Kind of annoyed at React - Cassidy Williams shares her frustrations about React, echoing some of the things I’ve been feeling recently.
• SVG Filter Maker - SVGFM, a node graph builder for SVG filters
• Sharing links - Hidde's posted about sharing links on his own blog as well - great minds think alike!

The previous installment of Today’s Reading talked quite a bit about RSS feeds and the harm being caused to the web by our content being disseminated primarily via social networks. Interesting to see people now becoming very interest (once again) in publishing & hosting their own content (via things like, you know, blogs). Also very interesting to see things like sections for “links” taking off again, as sort of “localized social networks”. I remember when we all used to have a Links section to our websites that linked to all the cool people we knew, liked, followed and recommended around the web… :-)

The great Sara Soueidan very kindly shares Accessible notifications with ARIA Live Regions (Part 1) and Accessible notifications with ARIA Live Regions (Part 2) from her 38-chapter Practical Accessibility video course because she want “an extensive guide to ARIA live regions to be publicly available to everyone in the community”. Again, very kind…

And the also great Ahmad Shadeed writes about Designing better target sizes. Naturally, it depends on the device, so read through and get your sizes straight!

And once you think you have everything sussed-out, let your pal pa11y run accessibility tests on your pages via the command line or Node.js.

And now considering the amount of time and energy that I have put into religiously creating abbr elements with title attributes for all of the abbreviations I write in this blog, Adrian Roselli‘s article about the lack of support/response browsers and accessibility give them is quite deflating… :-/

Sticking with Adrian, he also offers his approach for how to embed YouTube videos, code examples and slides into a webpage. Nice, thorough code examples and explanations!

remoteStorage is a super helpful library to help sync data across devices and browsers for a specific user. You would still be responsible for identifying the user across devices and browsers, such as when they login, but then you could update their preferences or settings, shopping carts, etc., via the remoteStorage library.

Adam Argyle offers a very entertaining Bouncy image radio group. Fun stuff!

Sticking with Adam, he also offers a slick Bento-style grid animation using :has(), @container, and View Transitions.

Okay, just one more from Adam, this time his Practical Introduction to Scroll-Driven Animations with CSS scroll() and view(). Crazy what we can do with just CSS / no JS now-days! And sad that it is all still just Chrome… :-/

More CSS fun, this time with Temani Afif and The Complex But Awesome CSS border-image Property.

Paul Lewis walks us through a browser’s render process and how we can optimize each step toward a better Interaction to Next Paint (INP).

Toward that same end, Behrouz Pooladrak introduces us to the Long Animation Frames API.

And a bit more detailed, the good folks at DebugBear provide the detailed How To Improve INP With Chrome DevTools. Time to roll up your sleeves!

Something I have been harping on since the very first client-side rendering model came out: Sending HTML is Always Faster.

I did not know this…

<ol> element has `start` and `reversed` attributes!
Where it can be useful:
`start` → paginated results
`reversed` → “top 10 best … ” lists

– Stackblitz, Twitter

Continuing to prove one of the most powerful CSS selectors, did you know that the :has() selector can select elements based on meta and script tags and their attributes? So powerful, using something like these examples:

head:has(meta[property="article:tag"][content="DuckTales"]) ~ body article {
  border-left: 3rem dotted #b0d;
}
head:has(meta[name="viewport"][content="width=device-width, initial-scale=1"]) article {
  border-right: 3rem dotted #b0d;
}
head:has(script[src="https://example.com/analytics.js"]) article {
  border-top: 3rem dotted #b0d;
}

Thanks for pointing this out so clearly, Gaute Hvoslef Kvalnes! (And for the code samples above! ;-)

Next Jecelyn Yeen points our quite clearly how we can manually load and view source maps in Chrome DevTools. Super helpful, considering source maps often do not get pushed to prod…

And finally, for a couple of trips down Memory Lane…

1. First The Web Design Museum (which is apparently a thing) offers a timeline for the history of the web… By title, focusing on “Web Design History”, but incorporates more than just design, and quite thoroughly fascinating.
2. Then Pier-Luc Brault takes us all on a trip down Memory Lane as he uses Netscape Composer in 2024 to create a simple webpage. The screenshots are pure gold… Although I didn’t use that tool often (I was a Notepad man, m’self), but I did occasionally bounce between the two, as some things were simply easier in Composer, but then I could tidy them up in Notepad…

Anyhow, enjoy the trips! :-)

Happy reading,
Atg

PS: I am always looking for new RSS feeds to follow, so please feel free to contribute URLs in the comments! And thanks in advance! :-)

Top⇪

Related

• Sharing links - Hidde's posted about sharing links on his own blog as well - great minds think alike!
• Old'aVista - Altavista was my first search engine (or should I say altavista+was+my+first+search+engine) and this is a delightful trip down memory lane.
• Inside .git - Legendary explainer of things Julia Evans has written a fascinating and understandable guide to what lives inside the .git folder.
• CARI | Aesthetics - I shared this on Mastodon a while back but this is just so compelling, and some of these aesthetics come with a heady dose of nostalgia.
• Where have all the websites gone? - A heartfelt lamentation for the human web.
• Oh Hello Ana - Ana Rodrigues has posted a very comprehensive list of good tech and web-related links.

I mentioned over on The Underground that one thing I wanted to add to my site, to “do more” with it, was a space to collect bookmarks and fun links I com across. Well, I’ve added a quick and dirty “first draft” of the feature over on the new /bookmarks page. It’s even got its own feed you can use to follow along at home.

I’d had the idea for the page a while ago, but the real motivation to get it done came with a recent push to get more people sharing links they’d enjoyed on their website more often (See, for example: Cassidy, Hidde, and Joan). I wanted to have a way of sharing these links that in a way that didn’t need me to dedicate a whole blog post to them[1], giving me the opportunity to be more spontaneous about it.

Fun(?) Technical Notes:

When I add a bookmark it should trigger a webmention to the page in question (if it supports webmentions), and if the other site supports microformats then it should show up as an IndieWeb “bookmark-of”. This was by far the most fiddly bit to get right.

In terms of adding bookmarks - I’m using a combination of IndieKit and a “bookmark on my site” iOS shortcut I made using the guide I wrote a few years back: IndieWeb Sharing with iOS Shortcuts . Hurrah for blog archives, otherwise I’d have had to figure this out again from scratch! I have a few minor niggles to iron out, but adding bookmarks is overall pretty easy for me to do.

1. I am thinking about automating some sort of “weekly round-up post” that will include bookmarks + other content I add to the site. But not yet, as I don’t quite have everything in place as I’d like it. ↩︎

​

I offer a single bit of advice to friends and family when they become new parents: When you start to think that you’ve got everything figured out, everything will change. Just as you start to get the hang of feedings, diapers, and regular naps, it’s time for solid food, potty training, and overnight sleeping. When you figure those out, it’s time for preschool and rare naps. The cycle goes on and on.

The same applies for those of us working in design and development these days. Having worked on the web for almost three decades at this point, I’ve seen the regular wax and wane of ideas, techniques, and technologies. Each time that we as developers and designers get into a regular rhythm, some new idea or technology comes along to shake things up and remake our world.

How we got here

I built my first website in the mid-’90s. Design and development on the web back then was a free-for-all, with few established norms. For any layout aside from a single column, we used table elements, often with empty cells containing a single pixel spacer GIF to add empty space. We styled text with numerous font tags, nesting the tags every time we wanted to vary the font style. And we had only three or four typefaces to choose from: Arial, Courier, or Times New Roman. When Verdana and Georgia came out in 1996, we rejoiced because our options had nearly doubled. The only safe colors to choose from were the 216 “web safe” colors known to work across platforms. The few interactive elements (like contact forms, guest books, and counters) were mostly powered by CGI scripts (predominantly written in Perl at the time). Achieving any kind of unique look involved a pile of hacks all the way down. Interaction was often limited to specific pages in a site.

The birth of web standards

At the turn of the century, a new cycle started. Crufty code littered with table layouts and font tags waned, and a push for web standards waxed. Newer technologies like CSS got more widespread adoption by browsers makers, developers, and designers. This shift toward standards didn’t happen accidentally or overnight. It took active engagement between the W3C and browser vendors and heavy evangelism from folks like the Web Standards Project to build standards. A List Apart and books like Designing with Web Standards by Jeffrey Zeldman played key roles in teaching developers and designers why standards are important, how to implement them, and how to sell them to their organizations. And approaches like progressive enhancement introduced the idea that content should be available for all browsers—with additional enhancements available for more advanced browsers. Meanwhile, sites like the CSS Zen Garden showcased just how powerful and versatile CSS can be when combined with a solid semantic HTML structure.

Server-side languages like PHP, Java, and .NET overtook Perl as the predominant back-end processors, and the cgi-bin was tossed in the trash bin. With these better server-side tools came the first era of web applications, starting with content-management systems (particularly in the blogging space with tools like Blogger, Grey Matter, Movable Type, and WordPress). In the mid-2000s, AJAX opened doors for asynchronous interaction between the front end and back end. Suddenly, pages could update their content without needing to reload. A crop of JavaScript frameworks like Prototype, YUI, and jQuery arose to help developers build more reliable client-side interaction across browsers that had wildly varying levels of standards support. Techniques like image replacement let crafty designers and developers display fonts of their choosing. And technologies like Flash made it possible to add animations, games, and even more interactivity.

These new technologies, standards, and techniques reinvigorated the industry in many ways. Web design flourished as designers and developers explored more diverse styles and layouts. But we still relied on tons of hacks. Early CSS was a huge improvement over table-based layouts when it came to basic layout and text styling, but its limitations at the time meant that designers and developers still relied heavily on images for complex shapes (such as rounded or angled corners) and tiled backgrounds for the appearance of full-length columns (among other hacks). Complicated layouts required all manner of nested floats or absolute positioning (or both). Flash and image replacement for custom fonts was a great start toward varying the typefaces from the big five, but both hacks introduced accessibility and performance problems. And JavaScript libraries made it easy for anyone to add a dash of interaction to pages, although at the cost of doubling or even quadrupling the download size of simple websites.

The web as software platform

The symbiosis between the front end and back end continued to improve, and that led to the current era of modern web applications. Between expanded server-side programming languages (which kept growing to include Ruby, Python, Go, and others) and newer front-end tools like React, Vue, and Angular, we could build fully capable software on the web. Alongside these tools came others, including collaborative version control, build automation, and shared package libraries. What was once primarily an environment for linked documents became a realm of infinite possibilities.

At the same time, mobile devices became more capable, and they gave us internet access in our pockets. Mobile apps and responsive design opened up opportunities for new interactions anywhere and any time.

This combination of capable mobile devices and powerful development tools contributed to the waxing of social media and other centralized tools for people to connect and consume. As it became easier and more common to connect with others directly on Twitter, Facebook, and even Slack, the desire for hosted personal sites waned. Social media offered connections on a global scale, with both the good and bad that that entails.

Want a much more extensive history of how we got here, with some other takes on ways that we can improve? Jeremy Keith wrote “Of Time and the Web.” Or check out the “Web Design History Timeline” at the Web Design Museum. Neal Agarwal also has a fun tour through “Internet Artifacts.”

Where we are now

In the last couple of years, it’s felt like we’ve begun to reach another major inflection point. As social-media platforms fracture and wane, there’s been a growing interest in owning our own content again. There are many different ways to make a website, from the tried-and-true classic of hosting plain HTML files to static site generators to content management systems of all flavors. The fracturing of social media also comes with a cost: we lose crucial infrastructure for discovery and connection. Webmentions, RSS, ActivityPub, and other tools of the IndieWeb can help with this, but they’re still relatively underimplemented and hard to use for the less nerdy. We can build amazing personal websites and add to them regularly, but without discovery and connection, it can sometimes feel like we may as well be shouting into the void.

Browser support for CSS, JavaScript, and other standards like web components has accelerated, especially through efforts like Interop. New technologies gain support across the board in a fraction of the time that they used to. I often learn about a new feature and check its browser support only to find that its coverage is already above 80 percent. Nowadays, the barrier to using newer techniques often isn’t browser support but simply the limits of how quickly designers and developers can learn what’s available and how to adopt it.

Today, with a few commands and a couple of lines of code, we can prototype almost any idea. All the tools that we now have available make it easier than ever to start something new. But the upfront cost that these frameworks may save in initial delivery eventually comes due as upgrading and maintaining them becomes a part of our technical debt.

If we rely on third-party frameworks, adopting new standards can sometimes take longer since we may have to wait for those frameworks to adopt those standards. These frameworks—which used to let us adopt new techniques sooner—have now become hindrances instead. These same frameworks often come with performance costs too, forcing users to wait for scripts to load before they can read or interact with pages. And when scripts fail (whether through poor code, network issues, or other environmental factors), there’s often no alternative, leaving users with blank or broken pages.

Where do we go from here?

Today’s hacks help to shape tomorrow’s standards. And there’s nothing inherently wrong with embracing hacks—for now—to move the present forward. Problems only arise when we’re unwilling to admit that they’re hacks or we hesitate to replace them. So what can we do to create the future we want for the web?

Build for the long haul. Optimize for performance, for accessibility, and for the user. Weigh the costs of those developer-friendly tools. They may make your job a little easier today, but how do they affect everything else? What’s the cost to users? To future developers? To standards adoption? Sometimes the convenience may be worth it. Sometimes it’s just a hack that you’ve grown accustomed to. And sometimes it’s holding you back from even better options.

Start from standards. Standards continue to evolve over time, but browsers have done a remarkably good job of continuing to support older standards. The same isn’t always true of third-party frameworks. Sites built with even the hackiest of HTML from the ’90s still work just fine today. The same can’t always be said of sites built with frameworks even after just a couple years.

Design with care. Whether your craft is code, pixels, or processes, consider the impacts of each decision. The convenience of many a modern tool comes at the cost of not always understanding the underlying decisions that have led to its design and not always considering the impact that those decisions can have. Rather than rushing headlong to “move fast and break things,” use the time saved by modern tools to consider more carefully and design with deliberation.

Always be learning. If you’re always learning, you’re also growing. Sometimes it may be hard to pinpoint what’s worth learning and what’s just today’s hack. You might end up focusing on something that won’t matter next year, even if you were to focus solely on learning standards. (Remember XHTML?) But constant learning opens up new connections in your brain, and the hacks that you learn one day may help to inform different experiments another day.

Play, experiment, and be weird! This web that we’ve built is the ultimate experiment. It’s the single largest human endeavor in history, and yet each of us can create our own pocket within it. Be courageous and try new things. Build a playground for ideas. Make goofy experiments in your own mad science lab. Start your own small business. There has never been a more empowering place to be creative, take risks, and explore what we’re capable of.

Share and amplify. As you experiment, play, and learn, share what’s worked for you. Write on your own website, post on whichever social media site you prefer, or shout it from a TikTok. Write something for A List Apart! But take the time to amplify others too: find new voices, learn from them, and share what they’ve taught you.

Go forth and make

As designers and developers for the web (and beyond), we’re responsible for building the future every day, whether that may take the shape of personal websites, social media tools used by billions, or anything in between. Let’s imbue our values into the things that we create, and let’s make the web a better place for everyone. Create that thing that only you are uniquely qualified to make. Then share it, make it better, make it again, or make something new. Learn. Make. Share. Grow. Rinse and repeat. Every time you think that you’ve mastered the web, everything will change.

Read More

​I offer a single bit of advice to friends and family when they become new parents: When you start to think that you’ve got everything figured out, everything will change. Just as you start to get the hang of feedings, diapers, and regular naps, it’s time for solid food, potty training, and overnight sleeping. When you figure those out, it’s time for preschool and rare naps. The cycle goes on and on.

The same applies for those of us working in design and development these days. Having worked on the web for almost three decades at this point, I’ve seen the regular wax and wane of ideas, techniques, and technologies. Each time that we as developers and designers get into a regular rhythm, some new idea or technology comes along to shake things up and remake our world.

How we got here

I built my first website in the mid-’90s. Design and development on the web back then was a free-for-all, with few established norms. For any layout aside from a single column, we used table elements, often with empty cells containing a single pixel spacer GIF to add empty space. We styled text with numerous font tags, nesting the tags every time we wanted to vary the font style. And we had only three or four typefaces to choose from: Arial, Courier, or Times New Roman. When Verdana and Georgia came out in 1996, we rejoiced because our options had nearly doubled. The only safe colors to choose from were the 216 “web safe” colors known to work across platforms. The few interactive elements (like contact forms, guest books, and counters) were mostly powered by CGI scripts (predominantly written in Perl at the time). Achieving any kind of unique look involved a pile of hacks all the way down. Interaction was often limited to specific pages in a site.

The birth of web standards

At the turn of the century, a new cycle started. Crufty code littered with table layouts and font tags waned, and a push for web standards waxed. Newer technologies like CSS got more widespread adoption by browsers makers, developers, and designers. This shift toward standards didn’t happen accidentally or overnight. It took active engagement between the W3C and browser vendors and heavy evangelism from folks like the Web Standards Project to build standards. A List Apart and books like Designing with Web Standards by Jeffrey Zeldman played key roles in teaching developers and designers why standards are important, how to implement them, and how to sell them to their organizations. And approaches like progressive enhancement introduced the idea that content should be available for all browsers—with additional enhancements available for more advanced browsers. Meanwhile, sites like the CSS Zen Garden showcased just how powerful and versatile CSS can be when combined with a solid semantic HTML structure.

Server-side languages like PHP, Java, and .NET overtook Perl as the predominant back-end processors, and the cgi-bin was tossed in the trash bin. With these better server-side tools came the first era of web applications, starting with content-management systems (particularly in the blogging space with tools like Blogger, Grey Matter, Movable Type, and WordPress). In the mid-2000s, AJAX opened doors for asynchronous interaction between the front end and back end. Suddenly, pages could update their content without needing to reload. A crop of JavaScript frameworks like Prototype, YUI, and jQuery arose to help developers build more reliable client-side interaction across browsers that had wildly varying levels of standards support. Techniques like image replacement let crafty designers and developers display fonts of their choosing. And technologies like Flash made it possible to add animations, games, and even more interactivity.

These new technologies, standards, and techniques reinvigorated the industry in many ways. Web design flourished as designers and developers explored more diverse styles and layouts. But we still relied on tons of hacks. Early CSS was a huge improvement over table-based layouts when it came to basic layout and text styling, but its limitations at the time meant that designers and developers still relied heavily on images for complex shapes (such as rounded or angled corners) and tiled backgrounds for the appearance of full-length columns (among other hacks). Complicated layouts required all manner of nested floats or absolute positioning (or both). Flash and image replacement for custom fonts was a great start toward varying the typefaces from the big five, but both hacks introduced accessibility and performance problems. And JavaScript libraries made it easy for anyone to add a dash of interaction to pages, although at the cost of doubling or even quadrupling the download size of simple websites.

The web as software platform

The symbiosis between the front end and back end continued to improve, and that led to the current era of modern web applications. Between expanded server-side programming languages (which kept growing to include Ruby, Python, Go, and others) and newer front-end tools like React, Vue, and Angular, we could build fully capable software on the web. Alongside these tools came others, including collaborative version control, build automation, and shared package libraries. What was once primarily an environment for linked documents became a realm of infinite possibilities.

At the same time, mobile devices became more capable, and they gave us internet access in our pockets. Mobile apps and responsive design opened up opportunities for new interactions anywhere and any time.

This combination of capable mobile devices and powerful development tools contributed to the waxing of social media and other centralized tools for people to connect and consume. As it became easier and more common to connect with others directly on Twitter, Facebook, and even Slack, the desire for hosted personal sites waned. Social media offered connections on a global scale, with both the good and bad that that entails.

Want a much more extensive history of how we got here, with some other takes on ways that we can improve? Jeremy Keith wrote “Of Time and the Web.” Or check out the “Web Design History Timeline” at the Web Design Museum. Neal Agarwal also has a fun tour through “Internet Artifacts.”

Where we are now

In the last couple of years, it’s felt like we’ve begun to reach another major inflection point. As social-media platforms fracture and wane, there’s been a growing interest in owning our own content again. There are many different ways to make a website, from the tried-and-true classic of hosting plain HTML files to static site generators to content management systems of all flavors. The fracturing of social media also comes with a cost: we lose crucial infrastructure for discovery and connection. Webmentions, RSS, ActivityPub, and other tools of the IndieWeb can help with this, but they’re still relatively underimplemented and hard to use for the less nerdy. We can build amazing personal websites and add to them regularly, but without discovery and connection, it can sometimes feel like we may as well be shouting into the void.

Browser support for CSS, JavaScript, and other standards like web components has accelerated, especially through efforts like Interop. New technologies gain support across the board in a fraction of the time that they used to. I often learn about a new feature and check its browser support only to find that its coverage is already above 80 percent. Nowadays, the barrier to using newer techniques often isn’t browser support but simply the limits of how quickly designers and developers can learn what’s available and how to adopt it.

Today, with a few commands and a couple of lines of code, we can prototype almost any idea. All the tools that we now have available make it easier than ever to start something new. But the upfront cost that these frameworks may save in initial delivery eventually comes due as upgrading and maintaining them becomes a part of our technical debt.

If we rely on third-party frameworks, adopting new standards can sometimes take longer since we may have to wait for those frameworks to adopt those standards. These frameworks—which used to let us adopt new techniques sooner—have now become hindrances instead. These same frameworks often come with performance costs too, forcing users to wait for scripts to load before they can read or interact with pages. And when scripts fail (whether through poor code, network issues, or other environmental factors), there’s often no alternative, leaving users with blank or broken pages.

Where do we go from here?

Today’s hacks help to shape tomorrow’s standards. And there’s nothing inherently wrong with embracing hacks—for now—to move the present forward. Problems only arise when we’re unwilling to admit that they’re hacks or we hesitate to replace them. So what can we do to create the future we want for the web?

Build for the long haul. Optimize for performance, for accessibility, and for the user. Weigh the costs of those developer-friendly tools. They may make your job a little easier today, but how do they affect everything else? What’s the cost to users? To future developers? To standards adoption? Sometimes the convenience may be worth it. Sometimes it’s just a hack that you’ve grown accustomed to. And sometimes it’s holding you back from even better options.

Start from standards. Standards continue to evolve over time, but browsers have done a remarkably good job of continuing to support older standards. The same isn’t always true of third-party frameworks. Sites built with even the hackiest of HTML from the ’90s still work just fine today. The same can’t always be said of sites built with frameworks even after just a couple years.

Design with care. Whether your craft is code, pixels, or processes, consider the impacts of each decision. The convenience of many a modern tool comes at the cost of not always understanding the underlying decisions that have led to its design and not always considering the impact that those decisions can have. Rather than rushing headlong to “move fast and break things,” use the time saved by modern tools to consider more carefully and design with deliberation.

Always be learning. If you’re always learning, you’re also growing. Sometimes it may be hard to pinpoint what’s worth learning and what’s just today’s hack. You might end up focusing on something that won’t matter next year, even if you were to focus solely on learning standards. (Remember XHTML?) But constant learning opens up new connections in your brain, and the hacks that you learn one day may help to inform different experiments another day.

Play, experiment, and be weird! This web that we’ve built is the ultimate experiment. It’s the single largest human endeavor in history, and yet each of us can create our own pocket within it. Be courageous and try new things. Build a playground for ideas. Make goofy experiments in your own mad science lab. Start your own small business. There has never been a more empowering place to be creative, take risks, and explore what we’re capable of.

Share and amplify. As you experiment, play, and learn, share what’s worked for you. Write on your own website, post on whichever social media site you prefer, or shout it from a TikTok. Write something for A List Apart! But take the time to amplify others too: find new voices, learn from them, and share what they’ve taught you.

Go forth and make

As designers and developers for the web (and beyond), we’re responsible for building the future every day, whether that may take the shape of personal websites, social media tools used by billions, or anything in between. Let’s imbue our values into the things that we create, and let’s make the web a better place for everyone. Create that thing that only you are uniquely qualified to make. Then share it, make it better, make it again, or make something new. Learn. Make. Share. Grow. Rinse and repeat. Every time you think that you’ve mastered the web, everything will change.

I offer a single bit of advice to friends and family when they become new parents: When you start to think that you’ve got everything figured out, everything will change. Just as you start to get the hang of feedings, diapers, and regular naps, it’s time for solid food, potty training, and overnight sleeping. When you figure those out, it’s time for preschool and rare naps. The cycle goes on and on.

The same applies for those of us working in design and development these days. Having worked on the web for almost three decades at this point, I’ve seen the regular wax and wane of ideas, techniques, and technologies. Each time that we as developers and designers get into a regular rhythm, some new idea or technology comes along to shake things up and remake our world.

How we got here

I built my first website in the mid-’90s. Design and development on the web back then was a free-for-all, with few established norms. For any layout aside from a single column, we used table elements, often with empty cells containing a single pixel spacer GIF to add empty space. We styled text with numerous font tags, nesting the tags every time we wanted to vary the font style. And we had only three or four typefaces to choose from: Arial, Courier, or Times New Roman. When Verdana and Georgia came out in 1996, we rejoiced because our options had nearly doubled. The only safe colors to choose from were the 216 “web safe” colors known to work across platforms. The few interactive elements (like contact forms, guest books, and counters) were mostly powered by CGI scripts (predominantly written in Perl at the time). Achieving any kind of unique look involved a pile of hacks all the way down. Interaction was often limited to specific pages in a site.

The birth of web standards

At the turn of the century, a new cycle started. Crufty code littered with table layouts and font tags waned, and a push for web standards waxed. Newer technologies like CSS got more widespread adoption by browsers makers, developers, and designers. This shift toward standards didn’t happen accidentally or overnight. It took active engagement between the W3C and browser vendors and heavy evangelism from folks like the Web Standards Project to build standards. A List Apart and books like Designing with Web Standards by Jeffrey Zeldman played key roles in teaching developers and designers why standards are important, how to implement them, and how to sell them to their organizations. And approaches like progressive enhancement introduced the idea that content should be available for all browsers—with additional enhancements available for more advanced browsers. Meanwhile, sites like the CSS Zen Garden showcased just how powerful and versatile CSS can be when combined with a solid semantic HTML structure.

Server-side languages like PHP, Java, and .NET overtook Perl as the predominant back-end processors, and the cgi-bin was tossed in the trash bin. With these better server-side tools came the first era of web applications, starting with content-management systems (particularly in the blogging space with tools like Blogger, Grey Matter, Movable Type, and WordPress). In the mid-2000s, AJAX opened doors for asynchronous interaction between the front end and back end. Suddenly, pages could update their content without needing to reload. A crop of JavaScript frameworks like Prototype, YUI, and jQuery arose to help developers build more reliable client-side interaction across browsers that had wildly varying levels of standards support. Techniques like image replacement let crafty designers and developers display fonts of their choosing. And technologies like Flash made it possible to add animations, games, and even more interactivity.

These new technologies, standards, and techniques reinvigorated the industry in many ways. Web design flourished as designers and developers explored more diverse styles and layouts. But we still relied on tons of hacks. Early CSS was a huge improvement over table-based layouts when it came to basic layout and text styling, but its limitations at the time meant that designers and developers still relied heavily on images for complex shapes (such as rounded or angled corners) and tiled backgrounds for the appearance of full-length columns (among other hacks). Complicated layouts required all manner of nested floats or absolute positioning (or both). Flash and image replacement for custom fonts was a great start toward varying the typefaces from the big five, but both hacks introduced accessibility and performance problems. And JavaScript libraries made it easy for anyone to add a dash of interaction to pages, although at the cost of doubling or even quadrupling the download size of simple websites.

The web as software platform

The symbiosis between the front end and back end continued to improve, and that led to the current era of modern web applications. Between expanded server-side programming languages (which kept growing to include Ruby, Python, Go, and others) and newer front-end tools like React, Vue, and Angular, we could build fully capable software on the web. Alongside these tools came others, including collaborative version control, build automation, and shared package libraries. What was once primarily an environment for linked documents became a realm of infinite possibilities.

At the same time, mobile devices became more capable, and they gave us internet access in our pockets. Mobile apps and responsive design opened up opportunities for new interactions anywhere and any time.

This combination of capable mobile devices and powerful development tools contributed to the waxing of social media and other centralized tools for people to connect and consume. As it became easier and more common to connect with others directly on Twitter, Facebook, and even Slack, the desire for hosted personal sites waned. Social media offered connections on a global scale, with both the good and bad that that entails.

Want a much more extensive history of how we got here, with some other takes on ways that we can improve? Jeremy Keith wrote “Of Time and the Web.” Or check out the “Web Design History Timeline” at the Web Design Museum. Neal Agarwal also has a fun tour through “Internet Artifacts.”

Where we are now

In the last couple of years, it’s felt like we’ve begun to reach another major inflection point. As social-media platforms fracture and wane, there’s been a growing interest in owning our own content again. There are many different ways to make a website, from the tried-and-true classic of hosting plain HTML files to static site generators to content management systems of all flavors. The fracturing of social media also comes with a cost: we lose crucial infrastructure for discovery and connection. Webmentions, RSS, ActivityPub, and other tools of the IndieWeb can help with this, but they’re still relatively underimplemented and hard to use for the less nerdy. We can build amazing personal websites and add to them regularly, but without discovery and connection, it can sometimes feel like we may as well be shouting into the void.

Browser support for CSS, JavaScript, and other standards like web components has accelerated, especially through efforts like Interop. New technologies gain support across the board in a fraction of the time that they used to. I often learn about a new feature and check its browser support only to find that its coverage is already above 80 percent. Nowadays, the barrier to using newer techniques often isn’t browser support but simply the limits of how quickly designers and developers can learn what’s available and how to adopt it.

Today, with a few commands and a couple of lines of code, we can prototype almost any idea. All the tools that we now have available make it easier than ever to start something new. But the upfront cost that these frameworks may save in initial delivery eventually comes due as upgrading and maintaining them becomes a part of our technical debt.

If we rely on third-party frameworks, adopting new standards can sometimes take longer since we may have to wait for those frameworks to adopt those standards. These frameworks—which used to let us adopt new techniques sooner—have now become hindrances instead. These same frameworks often come with performance costs too, forcing users to wait for scripts to load before they can read or interact with pages. And when scripts fail (whether through poor code, network issues, or other environmental factors), there’s often no alternative, leaving users with blank or broken pages.

Where do we go from here?

Today’s hacks help to shape tomorrow’s standards. And there’s nothing inherently wrong with embracing hacks—for now—to move the present forward. Problems only arise when we’re unwilling to admit that they’re hacks or we hesitate to replace them. So what can we do to create the future we want for the web?

Build for the long haul. Optimize for performance, for accessibility, and for the user. Weigh the costs of those developer-friendly tools. They may make your job a little easier today, but how do they affect everything else? What’s the cost to users? To future developers? To standards adoption? Sometimes the convenience may be worth it. Sometimes it’s just a hack that you’ve grown accustomed to. And sometimes it’s holding you back from even better options.

Start from standards. Standards continue to evolve over time, but browsers have done a remarkably good job of continuing to support older standards. The same isn’t always true of third-party frameworks. Sites built with even the hackiest of HTML from the ’90s still work just fine today. The same can’t always be said of sites built with frameworks even after just a couple years.

Design with care. Whether your craft is code, pixels, or processes, consider the impacts of each decision. The convenience of many a modern tool comes at the cost of not always understanding the underlying decisions that have led to its design and not always considering the impact that those decisions can have. Rather than rushing headlong to “move fast and break things,” use the time saved by modern tools to consider more carefully and design with deliberation.

Always be learning. If you’re always learning, you’re also growing. Sometimes it may be hard to pinpoint what’s worth learning and what’s just today’s hack. You might end up focusing on something that won’t matter next year, even if you were to focus solely on learning standards. (Remember XHTML?) But constant learning opens up new connections in your brain, and the hacks that you learn one day may help to inform different experiments another day.

Play, experiment, and be weird! This web that we’ve built is the ultimate experiment. It’s the single largest human endeavor in history, and yet each of us can create our own pocket within it. Be courageous and try new things. Build a playground for ideas. Make goofy experiments in your own mad science lab. Start your own small business. There has never been a more empowering place to be creative, take risks, and explore what we’re capable of.

Share and amplify. As you experiment, play, and learn, share what’s worked for you. Write on your own website, post on whichever social media site you prefer, or shout it from a TikTok. Write something for A List Apart! But take the time to amplify others too: find new voices, learn from them, and share what they’ve taught you.

Go forth and make

As designers and developers for the web (and beyond), we’re responsible for building the future every day, whether that may take the shape of personal websites, social media tools used by billions, or anything in between. Let’s imbue our values into the things that we create, and let’s make the web a better place for everyone. Create that thing that only you are uniquely qualified to make. Then share it, make it better, make it again, or make something new. Learn. Make. Share. Grow. Rinse and repeat. Every time you think that you’ve mastered the web, everything will change.

Read More

I offer a single bit of advice to friends and family when they become new parents: When you start to think that you’ve got everything figured out, everything will change. Just as you start to get the hang of feedings, diapers, and regular naps, it’s time for solid food, potty training, and overnight sleeping. When you figure those out, it’s time for preschool and rare naps. The cycle goes on and on.

The same applies for those of us working in design and development these days. Having worked on the web for almost three decades at this point, I’ve seen the regular wax and wane of ideas, techniques, and technologies. Each time that we as developers and designers get into a regular rhythm, some new idea or technology comes along to shake things up and remake our world.

How we got here

I built my first website in the mid-’90s. Design and development on the web back then was a free-for-all, with few established norms. For any layout aside from a single column, we used table elements, often with empty cells containing a single pixel spacer GIF to add empty space. We styled text with numerous font tags, nesting the tags every time we wanted to vary the font style. And we had only three or four typefaces to choose from: Arial, Courier, or Times New Roman. When Verdana and Georgia came out in 1996, we rejoiced because our options had nearly doubled. The only safe colors to choose from were the 216 “web safe” colors known to work across platforms. The few interactive elements (like contact forms, guest books, and counters) were mostly powered by CGI scripts (predominantly written in Perl at the time). Achieving any kind of unique look involved a pile of hacks all the way down. Interaction was often limited to specific pages in a site.

The birth of web standards

At the turn of the century, a new cycle started. Crufty code littered with table layouts and font tags waned, and a push for web standards waxed. Newer technologies like CSS got more widespread adoption by browsers makers, developers, and designers. This shift toward standards didn’t happen accidentally or overnight. It took active engagement between the W3C and browser vendors and heavy evangelism from folks like the Web Standards Project to build standards. A List Apart and books like Designing with Web Standards by Jeffrey Zeldman played key roles in teaching developers and designers why standards are important, how to implement them, and how to sell them to their organizations. And approaches like progressive enhancement introduced the idea that content should be available for all browsers—with additional enhancements available for more advanced browsers. Meanwhile, sites like the CSS Zen Garden showcased just how powerful and versatile CSS can be when combined with a solid semantic HTML structure.

Server-side languages like PHP, Java, and .NET overtook Perl as the predominant back-end processors, and the cgi-bin was tossed in the trash bin. With these better server-side tools came the first era of web applications, starting with content-management systems (particularly in the blogging space with tools like Blogger, Grey Matter, Movable Type, and WordPress). In the mid-2000s, AJAX opened doors for asynchronous interaction between the front end and back end. Suddenly, pages could update their content without needing to reload. A crop of JavaScript frameworks like Prototype, YUI, and jQuery arose to help developers build more reliable client-side interaction across browsers that had wildly varying levels of standards support. Techniques like image replacement let crafty designers and developers display fonts of their choosing. And technologies like Flash made it possible to add animations, games, and even more interactivity.

These new technologies, standards, and techniques reinvigorated the industry in many ways. Web design flourished as designers and developers explored more diverse styles and layouts. But we still relied on tons of hacks. Early CSS was a huge improvement over table-based layouts when it came to basic layout and text styling, but its limitations at the time meant that designers and developers still relied heavily on images for complex shapes (such as rounded or angled corners) and tiled backgrounds for the appearance of full-length columns (among other hacks). Complicated layouts required all manner of nested floats or absolute positioning (or both). Flash and image replacement for custom fonts was a great start toward varying the typefaces from the big five, but both hacks introduced accessibility and performance problems. And JavaScript libraries made it easy for anyone to add a dash of interaction to pages, although at the cost of doubling or even quadrupling the download size of simple websites.

The web as software platform

The symbiosis between the front end and back end continued to improve, and that led to the current era of modern web applications. Between expanded server-side programming languages (which kept growing to include Ruby, Python, Go, and others) and newer front-end tools like React, Vue, and Angular, we could build fully capable software on the web. Alongside these tools came others, including collaborative version control, build automation, and shared package libraries. What was once primarily an environment for linked documents became a realm of infinite possibilities.

At the same time, mobile devices became more capable, and they gave us internet access in our pockets. Mobile apps and responsive design opened up opportunities for new interactions anywhere and any time.

This combination of capable mobile devices and powerful development tools contributed to the waxing of social media and other centralized tools for people to connect and consume. As it became easier and more common to connect with others directly on Twitter, Facebook, and even Slack, the desire for hosted personal sites waned. Social media offered connections on a global scale, with both the good and bad that that entails.

Want a much more extensive history of how we got here, with some other takes on ways that we can improve? Jeremy Keith wrote “Of Time and the Web.” Or check out the “Web Design History Timeline” at the Web Design Museum. Neal Agarwal also has a fun tour through “Internet Artifacts.”

Where we are now

In the last couple of years, it’s felt like we’ve begun to reach another major inflection point. As social-media platforms fracture and wane, there’s been a growing interest in owning our own content again. There are many different ways to make a website, from the tried-and-true classic of hosting plain HTML files to static site generators to content management systems of all flavors. The fracturing of social media also comes with a cost: we lose crucial infrastructure for discovery and connection. Webmentions, RSS, ActivityPub, and other tools of the IndieWeb can help with this, but they’re still relatively underimplemented and hard to use for the less nerdy. We can build amazing personal websites and add to them regularly, but without discovery and connection, it can sometimes feel like we may as well be shouting into the void.

Browser support for CSS, JavaScript, and other standards like web components has accelerated, especially through efforts like Interop. New technologies gain support across the board in a fraction of the time that they used to. I often learn about a new feature and check its browser support only to find that its coverage is already above 80 percent. Nowadays, the barrier to using newer techniques often isn’t browser support but simply the limits of how quickly designers and developers can learn what’s available and how to adopt it.

Today, with a few commands and a couple of lines of code, we can prototype almost any idea. All the tools that we now have available make it easier than ever to start something new. But the upfront cost that these frameworks may save in initial delivery eventually comes due as upgrading and maintaining them becomes a part of our technical debt.

If we rely on third-party frameworks, adopting new standards can sometimes take longer since we may have to wait for those frameworks to adopt those standards. These frameworks—which used to let us adopt new techniques sooner—have now become hindrances instead. These same frameworks often come with performance costs too, forcing users to wait for scripts to load before they can read or interact with pages. And when scripts fail (whether through poor code, network issues, or other environmental factors), there’s often no alternative, leaving users with blank or broken pages.

Where do we go from here?

Today’s hacks help to shape tomorrow’s standards. And there’s nothing inherently wrong with embracing hacks—for now—to move the present forward. Problems only arise when we’re unwilling to admit that they’re hacks or we hesitate to replace them. So what can we do to create the future we want for the web?

Build for the long haul. Optimize for performance, for accessibility, and for the user. Weigh the costs of those developer-friendly tools. They may make your job a little easier today, but how do they affect everything else? What’s the cost to users? To future developers? To standards adoption? Sometimes the convenience may be worth it. Sometimes it’s just a hack that you’ve grown accustomed to. And sometimes it’s holding you back from even better options.

Start from standards. Standards continue to evolve over time, but browsers have done a remarkably good job of continuing to support older standards. The same isn’t always true of third-party frameworks. Sites built with even the hackiest of HTML from the ’90s still work just fine today. The same can’t always be said of sites built with frameworks even after just a couple years.

Design with care. Whether your craft is code, pixels, or processes, consider the impacts of each decision. The convenience of many a modern tool comes at the cost of not always understanding the underlying decisions that have led to its design and not always considering the impact that those decisions can have. Rather than rushing headlong to “move fast and break things,” use the time saved by modern tools to consider more carefully and design with deliberation.

Always be learning. If you’re always learning, you’re also growing. Sometimes it may be hard to pinpoint what’s worth learning and what’s just today’s hack. You might end up focusing on something that won’t matter next year, even if you were to focus solely on learning standards. (Remember XHTML?) But constant learning opens up new connections in your brain, and the hacks that you learn one day may help to inform different experiments another day.

Play, experiment, and be weird! This web that we’ve built is the ultimate experiment. It’s the single largest human endeavor in history, and yet each of us can create our own pocket within it. Be courageous and try new things. Build a playground for ideas. Make goofy experiments in your own mad science lab. Start your own small business. There has never been a more empowering place to be creative, take risks, and explore what we’re capable of.

Share and amplify. As you experiment, play, and learn, share what’s worked for you. Write on your own website, post on whichever social media site you prefer, or shout it from a TikTok. Write something for A List Apart! But take the time to amplify others too: find new voices, learn from them, and share what they’ve taught you.

Go forth and make

As designers and developers for the web (and beyond), we’re responsible for building the future every day, whether that may take the shape of personal websites, social media tools used by billions, or anything in between. Let’s imbue our values into the things that we create, and let’s make the web a better place for everyone. Create that thing that only you are uniquely qualified to make. Then share it, make it better, make it again, or make something new. Learn. Make. Share. Grow. Rinse and repeat. Every time you think that you’ve mastered the web, everything will change.

I provide a single bit of recommendation to family and friends once they develop into new mother and father: While you begin to suppose that you simply’ve received the whole lot discovered, the whole lot will change. Simply as you begin to get the grasp of feedings, diapers, and common naps, it’s time for stable meals, potty coaching, and in a single day sleeping. While you determine these out, it’s time for preschool and uncommon naps. The cycle goes on and on.

Article Continues Beneath

The identical applies for these of us working in design and improvement lately. Having labored on the net for nearly three many years at this level, I’ve seen the common wax and wane of concepts, strategies, and applied sciences. Every time that we as builders and designers get into an everyday rhythm, some new concept or expertise comes alongside to shake issues up and remake our world.

I constructed my first web site within the mid-’90s. Design and improvement on the net again then was a free-for-all, with few established norms. For any format apart from a single column, we used desk components, usually with empty cells containing a single pixel spacer GIF so as to add empty area. We styled textual content with quite a few font tags, nesting the tags each time we needed to range the font model. And we had solely three or 4 typefaces to select from: Arial, Courier, or Occasions New Roman. When Verdana and Georgia got here out in 1996, we rejoiced as a result of our choices had almost doubled. The one protected colours to select from have been the 216 “internet protected” colours recognized to work throughout platforms. The few interactive components (like contact varieties, visitor books, and counters) have been largely powered by CGI scripts (predominantly written in Perl on the time). Reaching any sort of distinctive look concerned a pile of hacks all the way in which down. Interplay was usually restricted to particular pages in a website.

The start of internet requirements#section3

On the flip of the century, a brand new cycle began. Crufty code plagued by desk layouts and font tags waned, and a push for internet requirements waxed. Newer applied sciences like CSS received extra widespread adoption by browsers makers, builders, and designers. This shift towards requirements didn’t occur by accident or in a single day. It took lively engagement between the W3C and browser distributors and heavy evangelism from people just like the Net Requirements Undertaking to construct requirements. A Checklist Aside and books like Designing with Net Requirements by Jeffrey Zeldman performed key roles in educating builders and designers why requirements are essential, implement them, and promote them to their organizations. And approaches like progressive enhancement launched the concept that content material must be obtainable for all browsers—with extra enhancements obtainable for extra superior browsers. In the meantime, websites just like the CSS Zen Backyard showcased simply how highly effective and versatile CSS could be when mixed with a stable semantic HTML construction.

Server-side languages like PHP, Java, and .NET overtook Perl because the predominant back-end processors, and the cgi-bin was tossed within the trash bin. With these higher server-side instruments got here the primary period of internet functions, beginning with content-management methods (notably within the running a blog area with instruments like Blogger, Gray Matter, Movable Kind, and WordPress). Within the mid-2000s, AJAX opened doorways for asynchronous interplay between the entrance finish and again finish. Out of the blue, pages might replace their content material without having to reload. A crop of JavaScript frameworks like Prototype, YUI, and jQuery arose to assist builders construct extra dependable client-side interplay throughout browsers that had wildly various ranges of requirements help. Methods like picture substitute let artful designers and builders show fonts of their selecting. And applied sciences like Flash made it potential so as to add animations, video games, and much more interactivity.

These new applied sciences, requirements, and strategies reinvigorated the trade in some ways. Net design flourished as designers and builders explored extra various kinds and layouts. However we nonetheless relied on tons of hacks. Early CSS was an enormous enchancment over table-based layouts when it got here to primary format and textual content styling, however its limitations on the time meant that designers and builders nonetheless relied closely on photographs for advanced shapes (resembling rounded or angled corners) and tiled backgrounds for the looks of full-length columns (amongst different hacks). Difficult layouts required all method of nested floats or absolute positioning (or each). Flash and picture substitute for customized fonts was an amazing begin towards various the typefaces from the large 5, however each hacks launched accessibility and efficiency issues. And JavaScript libraries made it simple for anybody so as to add a splash of interplay to pages, though at the price of doubling and even quadrupling the obtain dimension of straightforward web sites.

The online as software program platform#section4

The symbiosis between the entrance finish and again finish continued to enhance, and that led to the present period of recent internet functions. Between expanded server-side programming languages (which saved rising to incorporate Ruby, Python, Go, and others) and newer front-end instruments like React, Vue, and Angular, we might construct totally succesful software program on the net. Alongside these instruments got here others, together with collaborative model management, construct automation, and shared bundle libraries. What was as soon as primarily an surroundings for linked paperwork grew to become a realm of infinite potentialities.

On the similar time, cell units grew to become extra succesful, and so they gave us web entry in our pockets. Cellular apps and responsive design opened up alternatives for brand spanking new interactions anyplace and any time.

This mixture of succesful cell units and highly effective improvement instruments contributed to the waxing of social media and different centralized instruments for folks to attach and eat. Because it grew to become simpler and extra widespread to attach with others instantly on Twitter, Fb, and even Slack, the need for hosted private websites waned. Social media provided connections on a world scale, with each the nice and dangerous that that entails.

Need a way more in depth historical past of how we received right here, with another takes on ways in which we are able to enhance? Jeremy Keith wrote “Of Time and the Net.” Or try the “Net Design Historical past Timeline” on the Net Design Museum. Neal Agarwal additionally has a enjoyable tour by means of “Web Artifacts.”

Within the final couple of years, it’s felt like we’ve begun to achieve one other main inflection level. As social-media platforms fracture and wane, there’s been a rising curiosity in proudly owning our personal content material once more. There are various other ways to make a web site, from the tried-and-true traditional of internet hosting plain HTML information to static website mills to content material administration methods of all flavors. The fracturing of social media additionally comes with a price: we lose essential infrastructure for discovery and connection. Webmentions, RSS, ActivityPub, and different instruments of the IndieWeb may help with this, however they’re nonetheless comparatively underimplemented and exhausting to make use of for the much less nerdy. We will construct wonderful private web sites and add to them recurrently, however with out discovery and connection, it may possibly generally really feel like we could as nicely be shouting into the void.

Browser help for CSS, JavaScript, and different requirements like internet elements has accelerated, particularly by means of efforts like Interop. New applied sciences achieve help throughout the board in a fraction of the time that they used to. I usually find out about a brand new function and examine its browser help solely to seek out that its protection is already above 80 %. These days, the barrier to utilizing newer strategies usually isn’t browser help however merely the boundaries of how shortly designers and builders can study what’s obtainable and undertake it.

Immediately, with just a few instructions and a few traces of code, we are able to prototype virtually any concept. All of the instruments that we now have obtainable make it simpler than ever to start out one thing new. However the upfront value that these frameworks could save in preliminary supply finally comes due as upgrading and sustaining them turns into part of our technical debt.

If we depend on third-party frameworks, adopting new requirements can generally take longer since we could have to attend for these frameworks to undertake these requirements. These frameworks—which used to allow us to undertake new strategies sooner—have now develop into hindrances as an alternative. These similar frameworks usually include efficiency prices too, forcing customers to attend for scripts to load earlier than they’ll learn or work together with pages. And when scripts fail (whether or not by means of poor code, community points, or different environmental components), there’s usually no various, leaving customers with clean or damaged pages.

The place can we go from right here?#section6

Immediately’s hacks assist to form tomorrow’s requirements. And there’s nothing inherently flawed with embracing hacks—for now—to maneuver the current ahead. Issues solely come up after we’re unwilling to confess that they’re hacks or we hesitate to switch them. So what can we do to create the long run we would like for the online?

Construct for the lengthy haul. Optimize for efficiency, for accessibility, and for the person. Weigh the prices of these developer-friendly instruments. They might make your job a bit simpler at present, however how do they have an effect on the whole lot else? What’s the associated fee to customers? To future builders? To requirements adoption? Generally the comfort could also be price it. Generally it’s only a hack that you simply’ve grown accustomed to. And generally it’s holding you again from even higher choices.

Begin from requirements. Requirements proceed to evolve over time, however browsers have accomplished a remarkably good job of continuous to help older requirements. The identical isn’t at all times true of third-party frameworks. Websites constructed with even the hackiest of HTML from the ’90s nonetheless work simply high-quality at present. The identical can’t at all times be mentioned of websites constructed with frameworks even after only a couple years.

Design with care. Whether or not your craft is code, pixels, or processes, take into account the impacts of every determination. The comfort of many a contemporary device comes at the price of not at all times understanding the underlying selections which have led to its design and never at all times contemplating the affect that these selections can have. Reasonably than speeding headlong to “transfer quick and break issues,” use the time saved by fashionable instruments to think about extra rigorously and design with deliberation.

At all times be studying. When you’re at all times studying, you’re additionally rising. Generally it could be exhausting to pinpoint what’s price studying and what’s simply at present’s hack. You may find yourself specializing in one thing that received’t matter subsequent yr, even if you happen to have been to focus solely on studying requirements. (Keep in mind XHTML?) However fixed studying opens up new connections in your mind, and the hacks that you simply study someday could assist to tell completely different experiments one other day.

Play, experiment, and be bizarre! This internet that we’ve constructed is the last word experiment. It’s the one largest human endeavor in historical past, and but every of us can create our personal pocket inside it. Be brave and take a look at new issues. Construct a playground for concepts. Make goofy experiments in your individual mad science lab. Begin your individual small enterprise. There has by no means been a extra empowering place to be inventive, take dangers, and discover what we’re able to.

Share and amplify. As you experiment, play, and study, share what’s labored for you. Write by yourself web site, publish on whichever social media website you like, or shout it from a TikTok. Write one thing for A Checklist Aside! However take the time to amplify others too: discover new voices, study from them, and share what they’ve taught you.

Go forth and make#section7

As designers and builders for the online (and past), we’re chargeable for constructing the long run every single day, whether or not which will take the form of private web sites, social media instruments utilized by billions, or something in between. Let’s imbue our values into the issues that we create, and let’s make the online a greater place for everybody. Create that factor that solely you’re uniquely certified to make. Then share it, make it higher, make it once more, or make one thing new. Study. Make. Share. Develop. Rinse and repeat. Each time you suppose that you simply’ve mastered the online, the whole lot will change.

I provide a single bit of recommendation to family and friends once they change into new mother and father: If you begin to assume that you just’ve obtained every little thing discovered, every little thing will change. Simply as you begin to get the grasp of feedings, diapers, and common naps, it’s time for stable meals, potty coaching, and in a single day sleeping. If you determine these out, it’s time for preschool and uncommon naps. The cycle goes on and on.

Article Continues Beneath

The identical applies for these of us working in design and growth nowadays. Having labored on the internet for nearly three a long time at this level, I’ve seen the common wax and wane of concepts, strategies, and applied sciences. Every time that we as builders and designers get into an everyday rhythm, some new thought or know-how comes alongside to shake issues up and remake our world.

I constructed my first web site within the mid-’90s. Design and growth on the internet again then was a free-for-all, with few established norms. For any structure apart from a single column, we used desk parts, typically with empty cells containing a single pixel spacer GIF so as to add empty area. We styled textual content with quite a few font tags, nesting the tags each time we needed to range the font type. And we had solely three or 4 typefaces to select from: Arial, Courier, or Instances New Roman. When Verdana and Georgia got here out in 1996, we rejoiced as a result of our choices had almost doubled. The one secure colours to select from have been the 216 “net secure” colours identified to work throughout platforms. The few interactive parts (like contact varieties, visitor books, and counters) have been largely powered by CGI scripts (predominantly written in Perl on the time). Attaining any form of distinctive look concerned a pile of hacks all the best way down. Interplay was typically restricted to particular pages in a web site.

The delivery of net requirements#section3

On the flip of the century, a brand new cycle began. Crufty code affected by desk layouts and font tags waned, and a push for net requirements waxed. Newer applied sciences like CSS obtained extra widespread adoption by browsers makers, builders, and designers. This shift towards requirements didn’t occur by accident or in a single day. It took energetic engagement between the W3C and browser distributors and heavy evangelism from of us just like the Net Requirements Mission to construct requirements. A Record Aside and books like Designing with Net Requirements by Jeffrey Zeldman performed key roles in educating builders and designers why requirements are essential, how one can implement them, and how one can promote them to their organizations. And approaches like progressive enhancement launched the concept content material ought to be obtainable for all browsers—with extra enhancements obtainable for extra superior browsers. In the meantime, websites just like the CSS Zen Backyard showcased simply how highly effective and versatile CSS could be when mixed with a stable semantic HTML construction.

Server-side languages like PHP, Java, and .NET overtook Perl because the predominant back-end processors, and the cgi-bin was tossed within the trash bin. With these higher server-side instruments got here the primary period of net purposes, beginning with content-management techniques (significantly within the running a blog area with instruments like Blogger, Gray Matter, Movable Sort, and WordPress). Within the mid-2000s, AJAX opened doorways for asynchronous interplay between the entrance finish and again finish. All of the sudden, pages may replace their content material without having to reload. A crop of JavaScript frameworks like Prototype, YUI, and jQuery arose to assist builders construct extra dependable client-side interplay throughout browsers that had wildly various ranges of requirements help. Strategies like picture substitute let artful designers and builders show fonts of their selecting. And applied sciences like Flash made it attainable so as to add animations, video games, and much more interactivity.

These new applied sciences, requirements, and strategies reinvigorated the business in some ways. Net design flourished as designers and builders explored extra numerous types and layouts. However we nonetheless relied on tons of hacks. Early CSS was an enormous enchancment over table-based layouts when it got here to fundamental structure and textual content styling, however its limitations on the time meant that designers and builders nonetheless relied closely on photos for complicated shapes (reminiscent of rounded or angled corners) and tiled backgrounds for the looks of full-length columns (amongst different hacks). Difficult layouts required all method of nested floats or absolute positioning (or each). Flash and picture substitute for customized fonts was an ideal begin towards various the typefaces from the large 5, however each hacks launched accessibility and efficiency issues. And JavaScript libraries made it simple for anybody so as to add a splash of interplay to pages, though at the price of doubling and even quadrupling the obtain measurement of easy web sites.

The net as software program platform#section4

The symbiosis between the entrance finish and again finish continued to enhance, and that led to the present period of recent net purposes. Between expanded server-side programming languages (which stored rising to incorporate Ruby, Python, Go, and others) and newer front-end instruments like React, Vue, and Angular, we may construct totally succesful software program on the internet. Alongside these instruments got here others, together with collaborative model management, construct automation, and shared package deal libraries. What was as soon as primarily an setting for linked paperwork grew to become a realm of infinite potentialities.

On the similar time, cellular gadgets grew to become extra succesful, they usually gave us web entry in our pockets. Cellular apps and responsive design opened up alternatives for brand spanking new interactions anyplace and any time.

This mix of succesful cellular gadgets and highly effective growth instruments contributed to the waxing of social media and different centralized instruments for individuals to attach and devour. Because it grew to become simpler and extra frequent to attach with others immediately on Twitter, Fb, and even Slack, the will for hosted private websites waned. Social media supplied connections on a worldwide scale, with each the great and dangerous that that entails.

Need a way more intensive historical past of how we obtained right here, with another takes on ways in which we will enhance? Jeremy Keith wrote “Of Time and the Net.” Or take a look at the “Net Design Historical past Timeline” on the Net Design Museum. Neal Agarwal additionally has a enjoyable tour via “Web Artifacts.”

Within the final couple of years, it’s felt like we’ve begun to achieve one other main inflection level. As social-media platforms fracture and wane, there’s been a rising curiosity in proudly owning our personal content material once more. There are a lot of alternative ways to make an internet site, from the tried-and-true basic of internet hosting plain HTML information to static web site turbines to content material administration techniques of all flavors. The fracturing of social media additionally comes with a price: we lose essential infrastructure for discovery and connection. Webmentions, RSS, ActivityPub, and different instruments of the IndieWeb will help with this, however they’re nonetheless comparatively underimplemented and onerous to make use of for the much less nerdy. We are able to construct superb private web sites and add to them usually, however with out discovery and connection, it may generally really feel like we could as nicely be shouting into the void.

Browser help for CSS, JavaScript, and different requirements like net elements has accelerated, particularly via efforts like Interop. New applied sciences achieve help throughout the board in a fraction of the time that they used to. I typically study a brand new function and verify its browser help solely to seek out that its protection is already above 80 %. These days, the barrier to utilizing newer strategies typically isn’t browser help however merely the boundaries of how rapidly designers and builders can study what’s obtainable and how one can undertake it.

Immediately, with a couple of instructions and a few strains of code, we will prototype virtually any thought. All of the instruments that we now have obtainable make it simpler than ever to begin one thing new. However the upfront price that these frameworks could save in preliminary supply finally comes due as upgrading and sustaining them turns into part of our technical debt.

If we depend on third-party frameworks, adopting new requirements can generally take longer since we could have to attend for these frameworks to undertake these requirements. These frameworks—which used to allow us to undertake new strategies sooner—have now change into hindrances as a substitute. These similar frameworks typically include efficiency prices too, forcing customers to attend for scripts to load earlier than they will learn or work together with pages. And when scripts fail (whether or not via poor code, community points, or different environmental elements), there’s typically no various, leaving customers with clean or damaged pages.

The place will we go from right here?#section6

Immediately’s hacks assist to form tomorrow’s requirements. And there’s nothing inherently unsuitable with embracing hacks—for now—to maneuver the current ahead. Issues solely come up once we’re unwilling to confess that they’re hacks or we hesitate to interchange them. So what can we do to create the longer term we wish for the online?

Construct for the lengthy haul. Optimize for efficiency, for accessibility, and for the consumer. Weigh the prices of these developer-friendly instruments. They could make your job somewhat simpler at the moment, however how do they have an effect on every little thing else? What’s the fee to customers? To future builders? To requirements adoption? Typically the comfort could also be price it. Typically it’s only a hack that you just’ve grown accustomed to. And generally it’s holding you again from even higher choices.

Begin from requirements. Requirements proceed to evolve over time, however browsers have finished a remarkably good job of continuous to help older requirements. The identical isn’t at all times true of third-party frameworks. Websites constructed with even the hackiest of HTML from the ’90s nonetheless work simply high quality at the moment. The identical can’t at all times be stated of web sites constructed with frameworks even after only a couple years.

Design with care. Whether or not your craft is code, pixels, or processes, think about the impacts of every resolution. The comfort of many a contemporary software comes at the price of not at all times understanding the underlying choices which have led to its design and never at all times contemplating the affect that these choices can have. Moderately than speeding headlong to “transfer quick and break issues,” use the time saved by trendy instruments to think about extra rigorously and design with deliberation.

All the time be studying. In the event you’re at all times studying, you’re additionally rising. Typically it might be onerous to pinpoint what’s price studying and what’s simply at the moment’s hack. You may find yourself specializing in one thing that gained’t matter subsequent yr, even for those who have been to focus solely on studying requirements. (Bear in mind XHTML?) However fixed studying opens up new connections in your mind, and the hacks that you just study sooner or later could assist to tell totally different experiments one other day.

Play, experiment, and be bizarre! This net that we’ve constructed is the last word experiment. It’s the one largest human endeavor in historical past, and but every of us can create our personal pocket inside it. Be brave and take a look at new issues. Construct a playground for concepts. Make goofy experiments in your personal mad science lab. Begin your personal small enterprise. There has by no means been a extra empowering place to be artistic, take dangers, and discover what we’re able to.

Share and amplify. As you experiment, play, and study, share what’s labored for you. Write by yourself web site, publish on whichever social media web site you like, or shout it from a TikTok. Write one thing for A Record Aside! However take the time to amplify others too: discover new voices, study from them, and share what they’ve taught you.

Go forth and make#section7

As designers and builders for the online (and past), we’re accountable for constructing the longer term day-after-day, whether or not which will take the form of non-public web sites, social media instruments utilized by billions, or something in between. Let’s imbue our values into the issues that we create, and let’s make the online a greater place for everybody. Create that factor that solely you might be uniquely certified to make. Then share it, make it higher, make it once more, or make one thing new. Be taught. Make. Share. Develop. Rinse and repeat. Each time you assume that you just’ve mastered the online, every little thing will change.

I offer a single bit of advice to friends and family when they become new parents: When you start to think that you’ve got everything figured out, everything will change. Just as you start to get the hang of feedings, diapers, and regular naps, it’s time for solid food, potty training, and overnight sleeping. When you figure those out, it’s time for preschool and rare naps. The cycle goes on and on.

Article Continues Below

The same applies for those of us working in design and development these days. Having worked on the web for almost three decades at this point, I’ve seen the regular wax and wane of ideas, techniques, and technologies. Each time that we as developers and designers get into a regular rhythm, some new idea or technology comes along to shake things up and remake our world.

I built my first website in the mid-’90s. Design and development on the web back then was a free-for-all, with few established norms. For any layout aside from a single column, we used table elements, often with empty cells containing a single pixel spacer GIF to add empty space. We styled text with numerous font tags, nesting the tags every time we wanted to vary the font style. And we had only three or four typefaces to choose from: Arial, Courier, or Times New Roman. When Verdana and Georgia came out in 1996, we rejoiced because our options had nearly doubled. The only safe colors to choose from were the 216 “web safe” colors known to work across platforms. The few interactive elements (like contact forms, guest books, and counters) were mostly powered by CGI scripts (predominantly written in Perl at the time). Achieving any kind of unique look involved a pile of hacks all the way down. Interaction was often limited to specific pages in a site.

The birth of web standards#section3

At the turn of the century, a new cycle started. Crufty code littered with table layouts and font tags waned, and a push for web standards waxed. Newer technologies like CSS got more widespread adoption by browsers makers, developers, and designers. This shift toward standards didn’t happen accidentally or overnight. It took active engagement between the W3C and browser vendors and heavy evangelism from folks like the Web Standards Project to build standards. A List Apart and books like Designing with Web Standards by Jeffrey Zeldman played key roles in teaching developers and designers why standards are important, how to implement them, and how to sell them to their organizations. And approaches like progressive enhancement introduced the idea that content should be available for all browsers—with additional enhancements available for more advanced browsers. Meanwhile, sites like the CSS Zen Garden showcased just how powerful and versatile CSS can be when combined with a solid semantic HTML structure.

Server-side languages like PHP, Java, and .NET overtook Perl as the predominant back-end processors, and the cgi-bin was tossed in the trash bin. With these better server-side tools came the first era of web applications, starting with content-management systems (particularly in the blogging space with tools like Blogger, Grey Matter, Movable Type, and WordPress). In the mid-2000s, AJAX opened doors for asynchronous interaction between the front end and back end. Suddenly, pages could update their content without needing to reload. A crop of JavaScript frameworks like Prototype, YUI, and jQuery arose to help developers build more reliable client-side interaction across browsers that had wildly varying levels of standards support. Techniques like image replacement let crafty designers and developers display fonts of their choosing. And technologies like Flash made it possible to add animations, games, and even more interactivity.

These new technologies, standards, and techniques reinvigorated the industry in many ways. Web design flourished as designers and developers explored more diverse styles and layouts. But we still relied on tons of hacks. Early CSS was a huge improvement over table-based layouts when it came to basic layout and text styling, but its limitations at the time meant that designers and developers still relied heavily on images for complex shapes (such as rounded or angled corners) and tiled backgrounds for the appearance of full-length columns (among other hacks). Complicated layouts required all manner of nested floats or absolute positioning (or both). Flash and image replacement for custom fonts was a great start toward varying the typefaces from the big five, but both hacks introduced accessibility and performance problems. And JavaScript libraries made it easy for anyone to add a dash of interaction to pages, although at the cost of doubling or even quadrupling the download size of simple websites.

The web as software platform#section4

The symbiosis between the front end and back end continued to improve, and that led to the current era of modern web applications. Between expanded server-side programming languages (which kept growing to include Ruby, Python, Go, and others) and newer front-end tools like React, Vue, and Angular, we could build fully capable software on the web. Alongside these tools came others, including collaborative version control, build automation, and shared package libraries. What was once primarily an environment for linked documents became a realm of infinite possibilities.

At the same time, mobile devices became more capable, and they gave us internet access in our pockets. Mobile apps and responsive design opened up opportunities for new interactions anywhere and any time.

This combination of capable mobile devices and powerful development tools contributed to the waxing of social media and other centralized tools for people to connect and consume. As it became easier and more common to connect with others directly on Twitter, Facebook, and even Slack, the desire for hosted personal sites waned. Social media offered connections on a global scale, with both the good and bad that that entails.

Want a much more extensive history of how we got here, with some other takes on ways that we can improve? Jeremy Keith wrote “Of Time and the Web.” Or check out the “Web Design History Timeline” at the Web Design Museum. Neal Agarwal also has a fun tour through “Internet Artifacts.”

In the last couple of years, it’s felt like we’ve begun to reach another major inflection point. As social-media platforms fracture and wane, there’s been a growing interest in owning our own content again. There are many different ways to make a website, from the tried-and-true classic of hosting plain HTML files to static site generators to content management systems of all flavors. The fracturing of social media also comes with a cost: we lose crucial infrastructure for discovery and connection. Webmentions, RSS, ActivityPub, and other tools of the IndieWeb can help with this, but they’re still relatively underimplemented and hard to use for the less nerdy. We can build amazing personal websites and add to them regularly, but without discovery and connection, it can sometimes feel like we may as well be shouting into the void.

Browser support for CSS, JavaScript, and other standards like web components has accelerated, especially through efforts like Interop. New technologies gain support across the board in a fraction of the time that they used to. I often learn about a new feature and check its browser support only to find that its coverage is already above 80 percent. Nowadays, the barrier to using newer techniques often isn’t browser support but simply the limits of how quickly designers and developers can learn what’s available and how to adopt it.

Today, with a few commands and a couple of lines of code, we can prototype almost any idea. All the tools that we now have available make it easier than ever to start something new. But the upfront cost that these frameworks may save in initial delivery eventually comes due as upgrading and maintaining them becomes a part of our technical debt.

If we rely on third-party frameworks, adopting new standards can sometimes take longer since we may have to wait for those frameworks to adopt those standards. These frameworks—which used to let us adopt new techniques sooner—have now become hindrances instead. These same frameworks often come with performance costs too, forcing users to wait for scripts to load before they can read or interact with pages. And when scripts fail (whether through poor code, network issues, or other environmental factors), there’s often no alternative, leaving users with blank or broken pages.

Where do we go from here?#section6

Today’s hacks help to shape tomorrow’s standards. And there’s nothing inherently wrong with embracing hacks—for now—to move the present forward. Problems only arise when we’re unwilling to admit that they’re hacks or we hesitate to replace them. So what can we do to create the future we want for the web?

Build for the long haul. Optimize for performance, for accessibility, and for the user. Weigh the costs of those developer-friendly tools. They may make your job a little easier today, but how do they affect everything else? What’s the cost to users? To future developers? To standards adoption? Sometimes the convenience may be worth it. Sometimes it’s just a hack that you’ve grown accustomed to. And sometimes it’s holding you back from even better options.

Start from standards. Standards continue to evolve over time, but browsers have done a remarkably good job of continuing to support older standards. The same isn’t always true of third-party frameworks. Sites built with even the hackiest of HTML from the ’90s still work just fine today. The same can’t always be said of sites built with frameworks even after just a couple years.

Design with care. Whether your craft is code, pixels, or processes, consider the impacts of each decision. The convenience of many a modern tool comes at the cost of not always understanding the underlying decisions that have led to its design and not always considering the impact that those decisions can have. Rather than rushing headlong to “move fast and break things,” use the time saved by modern tools to consider more carefully and design with deliberation.

Always be learning. If you’re always learning, you’re also growing. Sometimes it may be hard to pinpoint what’s worth learning and what’s just today’s hack. You might end up focusing on something that won’t matter next year, even if you were to focus solely on learning standards. (Remember XHTML?) But constant learning opens up new connections in your brain, and the hacks that you learn one day may help to inform different experiments another day.

Play, experiment, and be weird! This web that we’ve built is the ultimate experiment. It’s the single largest human endeavor in history, and yet each of us can create our own pocket within it. Be courageous and try new things. Build a playground for ideas. Make goofy experiments in your own mad science lab. Start your own small business. There has never been a more empowering place to be creative, take risks, and explore what we’re capable of.

Share and amplify. As you experiment, play, and learn, share what’s worked for you. Write on your own website, post on whichever social media site you prefer, or shout it from a TikTok. Write something for A List Apart! But take the time to amplify others too: find new voices, learn from them, and share what they’ve taught you.

Go forth and make#section7

As designers and developers for the web (and beyond), we’re responsible for building the future every day, whether that may take the shape of personal websites, social media tools used by billions, or anything in between. Let’s imbue our values into the things that we create, and let’s make the web a better place for everyone. Create that thing that only you are uniquely qualified to make. Then share it, make it better, make it again, or make something new. Learn. Make. Share. Grow. Rinse and repeat. Every time you think that you’ve mastered the web, everything will change.

I offer a single bit of advice to friends and family when they become new parents: When you start to think that you’ve got everything figured out, everything will change. Just as you start to get the hang of feedings, diapers, and regular naps, it’s time for solid food, potty training, and overnight sleeping. When you figure those out, it’s time for preschool and rare naps. The cycle goes on and on.

Article Continues Below

The same applies for those of us working in design and development these days. Having worked on the web for almost three decades at this point, I’ve seen the regular wax and wane of ideas, techniques, and technologies. Each time that we as developers and designers get into a regular rhythm, some new idea or technology comes along to shake things up and remake our world.

I built my first website in the mid-’90s. Design and development on the web back then was a free-for-all, with few established norms. For any layout aside from a single column, we used table elements, often with empty cells containing a single pixel spacer GIF to add empty space. We styled text with numerous font tags, nesting the tags every time we wanted to vary the font style. And we had only three or four typefaces to choose from: Arial, Courier, or Times New Roman. When Verdana and Georgia came out in 1996, we rejoiced because our options had nearly doubled. The only safe colors to choose from were the 216 “web safe” colors known to work across platforms. The few interactive elements (like contact forms, guest books, and counters) were mostly powered by CGI scripts (predominantly written in Perl at the time). Achieving any kind of unique look involved a pile of hacks all the way down. Interaction was often limited to specific pages in a site.

The birth of web standards#section3

At the turn of the century, a new cycle started. Crufty code littered with table layouts and font tags waned, and a push for web standards waxed. Newer technologies like CSS got more widespread adoption by browsers makers, developers, and designers. This shift toward standards didn’t happen accidentally or overnight. It took active engagement between the W3C and browser vendors and heavy evangelism from folks like the Web Standards Project to build standards. A List Apart and books like Designing with Web Standards by Jeffrey Zeldman played key roles in teaching developers and designers why standards are important, how to implement them, and how to sell them to their organizations. And approaches like progressive enhancement introduced the idea that content should be available for all browsers—with additional enhancements available for more advanced browsers. Meanwhile, sites like the CSS Zen Garden showcased just how powerful and versatile CSS can be when combined with a solid semantic HTML structure.

Server-side languages like PHP, Java, and .NET overtook Perl as the predominant back-end processors, and the cgi-bin was tossed in the trash bin. With these better server-side tools came the first era of web applications, starting with content-management systems (particularly in the blogging space with tools like Blogger, Grey Matter, Movable Type, and WordPress). In the mid-2000s, AJAX opened doors for asynchronous interaction between the front end and back end. Suddenly, pages could update their content without needing to reload. A crop of JavaScript frameworks like Prototype, YUI, and jQuery arose to help developers build more reliable client-side interaction across browsers that had wildly varying levels of standards support. Techniques like image replacement let crafty designers and developers display fonts of their choosing. And technologies like Flash made it possible to add animations, games, and even more interactivity.

These new technologies, standards, and techniques reinvigorated the industry in many ways. Web design flourished as designers and developers explored more diverse styles and layouts. But we still relied on tons of hacks. Early CSS was a huge improvement over table-based layouts when it came to basic layout and text styling, but its limitations at the time meant that designers and developers still relied heavily on images for complex shapes (such as rounded or angled corners) and tiled backgrounds for the appearance of full-length columns (among other hacks). Complicated layouts required all manner of nested floats or absolute positioning (or both). Flash and image replacement for custom fonts was a great start toward varying the typefaces from the big five, but both hacks introduced accessibility and performance problems. And JavaScript libraries made it easy for anyone to add a dash of interaction to pages, although at the cost of doubling or even quadrupling the download size of simple websites.

The web as software platform#section4

The symbiosis between the front end and back end continued to improve, and that led to the current era of modern web applications. Between expanded server-side programming languages (which kept growing to include Ruby, Python, Go, and others) and newer front-end tools like React, Vue, and Angular, we could build fully capable software on the web. Alongside these tools came others, including collaborative version control, build automation, and shared package libraries. What was once primarily an environment for linked documents became a realm of infinite possibilities.

At the same time, mobile devices became more capable, and they gave us internet access in our pockets. Mobile apps and responsive design opened up opportunities for new interactions anywhere and any time.

This combination of capable mobile devices and powerful development tools contributed to the waxing of social media and other centralized tools for people to connect and consume. As it became easier and more common to connect with others directly on Twitter, Facebook, and even Slack, the desire for hosted personal sites waned. Social media offered connections on a global scale, with both the good and bad that that entails.

Want a much more extensive history of how we got here, with some other takes on ways that we can improve? Jeremy Keith wrote “Of Time and the Web.” Or check out the “Web Design History Timeline” at the Web Design Museum. Neal Agarwal also has a fun tour through “Internet Artifacts.”

In the last couple of years, it’s felt like we’ve begun to reach another major inflection point. As social-media platforms fracture and wane, there’s been a growing interest in owning our own content again. There are many different ways to make a website, from the tried-and-true classic of hosting plain HTML files to static site generators to content management systems of all flavors. The fracturing of social media also comes with a cost: we lose crucial infrastructure for discovery and connection. Webmentions, RSS, ActivityPub, and other tools of the IndieWeb can help with this, but they’re still relatively underimplemented and hard to use for the less nerdy. We can build amazing personal websites and add to them regularly, but without discovery and connection, it can sometimes feel like we may as well be shouting into the void.

Browser support for CSS, JavaScript, and other standards like web components has accelerated, especially through efforts like Interop. New technologies gain support across the board in a fraction of the time that they used to. I often learn about a new feature and check its browser support only to find that its coverage is already above 80 percent. Nowadays, the barrier to using newer techniques often isn’t browser support but simply the limits of how quickly designers and developers can learn what’s available and how to adopt it.

Today, with a few commands and a couple of lines of code, we can prototype almost any idea. All the tools that we now have available make it easier than ever to start something new. But the upfront cost that these frameworks may save in initial delivery eventually comes due as upgrading and maintaining them becomes a part of our technical debt.

If we rely on third-party frameworks, adopting new standards can sometimes take longer since we may have to wait for those frameworks to adopt those standards. These frameworks—which used to let us adopt new techniques sooner—have now become hindrances instead. These same frameworks often come with performance costs too, forcing users to wait for scripts to load before they can read or interact with pages. And when scripts fail (whether through poor code, network issues, or other environmental factors), there’s often no alternative, leaving users with blank or broken pages.

Where do we go from here?#section6

Today’s hacks help to shape tomorrow’s standards. And there’s nothing inherently wrong with embracing hacks—for now—to move the present forward. Problems only arise when we’re unwilling to admit that they’re hacks or we hesitate to replace them. So what can we do to create the future we want for the web?

Build for the long haul. Optimize for performance, for accessibility, and for the user. Weigh the costs of those developer-friendly tools. They may make your job a little easier today, but how do they affect everything else? What’s the cost to users? To future developers? To standards adoption? Sometimes the convenience may be worth it. Sometimes it’s just a hack that you’ve grown accustomed to. And sometimes it’s holding you back from even better options.

Start from standards. Standards continue to evolve over time, but browsers have done a remarkably good job of continuing to support older standards. The same isn’t always true of third-party frameworks. Sites built with even the hackiest of HTML from the ’90s still work just fine today. The same can’t always be said of sites built with frameworks even after just a couple years.

Design with care. Whether your craft is code, pixels, or processes, consider the impacts of each decision. The convenience of many a modern tool comes at the cost of not always understanding the underlying decisions that have led to its design and not always considering the impact that those decisions can have. Rather than rushing headlong to “move fast and break things,” use the time saved by modern tools to consider more carefully and design with deliberation.

Always be learning. If you’re always learning, you’re also growing. Sometimes it may be hard to pinpoint what’s worth learning and what’s just today’s hack. You might end up focusing on something that won’t matter next year, even if you were to focus solely on learning standards. (Remember XHTML?) But constant learning opens up new connections in your brain, and the hacks that you learn one day may help to inform different experiments another day.

Play, experiment, and be weird! This web that we’ve built is the ultimate experiment. It’s the single largest human endeavor in history, and yet each of us can create our own pocket within it. Be courageous and try new things. Build a playground for ideas. Make goofy experiments in your own mad science lab. Start your own small business. There has never been a more empowering place to be creative, take risks, and explore what we’re capable of.

Share and amplify. As you experiment, play, and learn, share what’s worked for you. Write on your own website, post on whichever social media site you prefer, or shout it from a TikTok. Write something for A List Apart! But take the time to amplify others too: find new voices, learn from them, and share what they’ve taught you.

Go forth and make#section7

As designers and developers for the web (and beyond), we’re responsible for building the future every day, whether that may take the shape of personal websites, social media tools used by billions, or anything in between. Let’s imbue our values into the things that we create, and let’s make the web a better place for everyone. Create that thing that only you are uniquely qualified to make. Then share it, make it better, make it again, or make something new. Learn. Make. Share. Grow. Rinse and repeat. Every time you think that you’ve mastered the web, everything will change.

Source link

I had not realised it had been 805 days since my last bookmarks roundup. 805 days. This section is still one of the most visited parts of my little web corner.

It's been so long that I have accumulated an intimidating number of bookmarks. On the other hand, I did go on maternity leave and stayed away from the tech world for a while. I started the draft for this post in May 2023, and here I am, on January 2024, finally sharing it. It's a good thing that for the past few weeks, people have been talking a bit more about their bookmarks, and because I want to move to a system of individual link sharing rather than bulk, I needed to get this batch out of the way.

This post will mostly include links from 2022 - things I bookmarked while on maternity leave. It's great to revisit these because I have no memories of that time.

I hope to get another batch of bookmarks from May 2023 out soon, and then I will move on to add them individually. I mentioned before somewhere in these posts, but adding them as a batch isn't working for me right now. I used to do it monthly, but if it is a month that I bookmark a lot, it will be a long post to curate. Right now, this format takes me at least one hour to create. I could switch to a weekly post but must integrate it into my routine. Maybe forcing a time slot every Friday morning or something. I also like the idea of individual link posts so that I can add tags and get back to them quickly.

Bookmarks related to tech and web development

• Using Position Sticky With CSS Grid by Ahmad Shadeed.
• Doing the work by Monica Dinculescu.
• Stream on by Simon Collison.
• a11y.css by Gaël Poupard.
• 12 Days of Web by Stephanie Eckles.
• Pixel patterns by Chuan.
• Subterranean Blogging by Tom Critchlow.
• Fix Contrast.
• Esoteric.Codes by Daniel Temkin.
• Generate a Pull Request of Static Content With a Simple HTML Form by Hilman Ramadhan.
• How To Use Contentful With Eleventy by Henry Desroches.
• WHCM and System Colors by Adrian Roselli.
• Getting Started With Accessibility: Dynamic Type by Bas Thomas Broek.
• SVG Generators by Iris Lješnjanin.
• All the Eleventy things by David Darnes.
• Web accessibility simplified.
• How I Make CSS Art by Yosra Emad.
• How to keep up with web development without falling into despair by Baldur Bjarnason.
• “Evergreen” Does Not Mean Immediately Available by Eric Bailey.
• Reducing The Web’s Carbon Footprint: Optimizing Social Media Embeds by Michelle Barker.
• Aspect Ratio is Great by Michelle Barker.
• Websites as an Act of Creativity by Yesterweb Zine.
• Digital Cleanup Day.
• Estimate how many people using your website might be disabled.
• From Tumblr girl to engineer: How the platform inspired a generation of women to code by Elizabeth de Luna.
• Using the language attribute to make your website accessible by Craig Abbott.
• Don’t Alienate Your User: A Primer for Internationalisation & Localisation by Sophie Clifton-Tucker.
• What is the Web? by Jim Nielsen.
• Understanding Layout Algorithms by Josh W Comeau.
• Privacy and the :visited selector.
• Notes on a Blogging Accelerator by Tom Critchlow.
• Home Sweet Homepage by Amy Wibowo.
• Mourning loss as a remote team.

Other bookmarks

• 11 years, 10 arrests, at least 62 women: how did Britain’s worst cyberstalker evade justice for so long? by Sirin Kale.