From 4f21742e53054454347c282445addefea79134df Mon Sep 17 00:00:00 2001 From: Declan Chidlow Date: Sun, 16 Feb 2025 18:36:56 +0800 Subject: [PATCH] Overhaul links --- src/assets/styles/pages/links.css | 5 + src/blogs.ori | 22 ++ src/blogs.yaml | 198 +++++++++++++++++ src/links_template.ori | 17 ++ src/miscellaneous.ori | 20 ++ .../links/misc.yaml => miscellaneous.yaml} | 0 src/pages/links.ori | 19 ++ src/pages/links/blogs.yaml | 138 ------------ src/pages/links/links.ori | 30 --- src/pages/links/tools-and-resources.yaml | 116 ---------- src/site.ori | 8 +- src/tools-and-resources.ori | 22 ++ src/tools-and-resources.yaml | 210 ++++++++++++++++++ 13 files changed, 520 insertions(+), 285 deletions(-) create mode 100644 src/assets/styles/pages/links.css create mode 100644 src/blogs.ori create mode 100644 src/blogs.yaml create mode 100644 src/links_template.ori create mode 100644 src/miscellaneous.ori rename src/{pages/links/misc.yaml => miscellaneous.yaml} (100%) create mode 100644 src/pages/links.ori delete mode 100644 src/pages/links/blogs.yaml delete mode 100644 src/pages/links/links.ori delete mode 100644 src/pages/links/tools-and-resources.yaml create mode 100644 src/tools-and-resources.ori create mode 100644 src/tools-and-resources.yaml diff --git a/src/assets/styles/pages/links.css b/src/assets/styles/pages/links.css new file mode 100644 index 00000000..de291ddb --- /dev/null +++ b/src/assets/styles/pages/links.css @@ -0,0 +1,5 @@ +@media (max-width: 45rem) { + #section { + display: none; + } +} diff --git a/src/blogs.ori b/src/blogs.ori new file mode 100644 index 00000000..405c7c42 --- /dev/null +++ b/src/blogs.ori @@ -0,0 +1,22 @@ +(blogs) => main_template.ori({ + title: "Blog Links" + description: "A curated collection of insightful blogs covering web development, programming, design, AI, accessibility, security, technology trends, and digital culture I've collected. Including expert analyses, interactive tutorials, deep dives into coding, and unique perspectives on the evolving tech landscape" + og_description: "Links to various blogs of interest or note." + stylesheet: "pages/links.css" + +@text: +`Links + +
+

Blog Links

+ +

These are ${ blogs/length } links to interesting blogs. Descriptions are generalised for the sake of brevity and may not cover all the content on the linked site. It can generally be assumed there are assorted bits not mentioned.

+ + +
`}) diff --git a/src/blogs.yaml b/src/blogs.yaml new file mode 100644 index 00000000..91be1788 --- /dev/null +++ b/src/blogs.yaml @@ -0,0 +1,198 @@ +- title: Josh W Comeau + url: www.joshwcomeau.com + description: Web development articles, interactive tutorials, and goodies. +- title: Gwern + url: gwern.net + description: Academic writings on AI, psychology, and statistics. +- title: Coding Horror + url: blog.codinghorror.com + description: Programming blog focussing on human factors. +- title: Robert Heaton + url: robertheaton.com + description: Development and tech with an emphasis on privacy. +- title: Citation Needed + url: www.citationneeded.news + description: Coverage of the cryptocurrency industry and broader technology issues. +- title: Web3 is Going Just Great + url: www.web3isgoinggreat.com + description: Tracking of how web3 projects are actually going. +- title: The Evil Skeleton + url: theevilskeleton.gitlab.io + description: Tech, primarily regarding Gnome. +- title: Bryce Wray + url: www.brycewray.com + description: Primarily web development. +- title: Terence Eden’s Blog + url: shkspr.mobi + description: Technology, reviews, and assorted musings. +- title: Andrew Chan + url: andrewkchan.dev + description: Mostly programming related. +- title: GioCities + url: blog.giovanh.com + description: Tech and wider web culture. +- title: Ahmad Shadeed + url: ishadeed.com + description: Web development articles with interactive elements. +- title: iio.ie + url: iio.ie + description: Random ideas and personal ramblings from a disgruntled techie. +- title: Darek Kay + url: darekkay.com + description: Front-end development. +- title: ajkprojects + url: ajkprojects.com + description: Developer relevant psychology. +- title: Articles & Experiments by Roman Komarov + url: kizu.dev + description: CSS experiments and explorations. +- title: LMNT + url: lmnt.me + description: Short write-ups, often about design and Apple. +- title: meyerweb.com + url: meyerweb.com + description: Assorted content, often about the web platform. +- title: Stephen Wolfram + url: www.stephenwolfram.com + description: Data-heavy analysis with a focus on mathematics and statistics. +- title: Michael Dickens + url: mdickens.me + description: Philosophy, investing, and altruism. +- title: Paul Graham + url: paulgraham.com + description: Start-up culture. +- title: Håvard Brynjulfsen + url: www.havardbrynjulfsen.design + description: Web development and design. +- title: Ryan Mulligan + url: ryanmulligan.dev + description: Front-end development experimentation, learning, and discoveries. +- title: Clagnut by Richard Rutter + url: clagnut.com + description: Design and typography with a focus on the web. +- title: samwho + url: samwho.dev + description: Visual, often interactive, computer science introductions and traditional development posts. +- title: Jan Miksovsky’s Blog + url: jan.miksovsky.com + description: Development and project notes. +- title: Jim Neilsen's Blog + url: blog.jim-nielsen.com + description: Web development and thoughts. +- title: blakewatson.com + url: blakewatson.com + description: Web development. +- title: Karolina Szczur + url: karolinaszczur.com + description: Assorted tech industry related commentary. +- title: Adam Argyle + url: nerdy.dev + description: CSS and other aspects of the web platform. +- title: Ben Myers + url: benmyers.dev + description: Web development. +- title: Ryan Trimble + url: ryantrimble.com + description: Web development and weekly roundups. +- title: Werd I/O + url: werd.io + description: Intersection of technology, democracy, and society. +- title: Birchtree + url: birchtree.me + description: Technology. +- title: Adactio + url: adactio.com + description: Development and tech industry. +- title: That HTML Blog + url: thathtml.blog + description: Web standards and standards-adjacent technologies. +- title: Computers Are Bad + url: computer.rip + description: Explains why computers are bad. +- title: Maggie Appleton + url: maggieappleton.com + description: Visual essays about programming, design, and anthropology. +- title: CSS { In Real Life } + url: css-irl.info + description: CSS, front-end development, the web, and beyond. +- title: Aleksandr Hovhannisyan + url: www.aleksandrhovhannisyan.com + description: Programming, life, and other topics. +- title: Ashlese M Boyer + url: ashleemboyer.com + description: Accessibility, disability, and software engineering. +- title: Sara Joy + url: sarajoy.dev + description: Web development and life. +- title: Moth Monster + url: moth.monster + description: Technology. +- title: Mayank + url: mayank.co + description: Web development. +- title: Heather Buchel + url: heather-buchel.com + description: Web standards and accessibility. +- title: Seirdy's Home + url: seirdy.one + description: Accessibility, security, privacy, and software freedom. +- title: Scott O'Hara + url: www.scottohara.me + description: Web development, largely focusing on accessibility. +- title: Waxy.org + url: waxy.org + description: Various web things. +- title: Simon Willison's Weblog + url: simonwillison.net + description: Artificial intelligence. +- title: LessWrong + url: www.lesswrong.com + description: Community blog of sorts discussing rationality and AI. +- title: brr + url: brr.fyi + description: Records of interesting things about Antarctica from someone who lived there. +- title: ribo.zone + url: ribo.zone + description: Assorted miscellany. +- title: oimo.io + url: oimo.io + description: Development with an emphasis on graphics. +- title: Bartosz Ciechanowski + url: ciechanow.ski + description: In-depth explanations of general concepts with visualisations. +- title: Henry From Online + url: henry.codes + description: Tech and life. +- title: Stillness.Digital + url: stillness.digital + description: Short little reflective somethings. +- title: Strange.Website + url: strange.website + description: Pontificating about conceptual website vibes. +- title: Anthony Fu + url: antfu.me + description: Development. +- title: Faster and Worse + url: fasterandworse.com + description: Technology. +- title: maya.land + url: maya.land + description: Tech menacery. +- title: 30fps.net + url: 30fps.net + description: Computer graphics and programming. +- title: elle's homepage + url: ellesho.me + description: A lovely little site to visit. +- title: Ray's Miscellany + url: brisray.com + description: Completely indescribable. +- title: HTMHell + url: htmhell.dev + description: HTML crimes and how to rectify them. +- title: Shellsharks + url: shellsharks.com + description: InfoSec, technology, and life. +- title: In Two Minds + url: intwominds.blog + description: A digital garden exploring philosophy, ethics, and systems thinking through multiple lenses and personas. diff --git a/src/links_template.ori b/src/links_template.ori new file mode 100644 index 00000000..44ca0613 --- /dev/null +++ b/src/links_template.ori @@ -0,0 +1,17 @@ +(blogs) => main_template.ori({ + title: "Links" + description: "A curated collection of intriguing and valuable links I've discovered while surfing the web." + +@text: +`

Links

+ +
+

This is a curated collection of ${ blogs/length } intriguing and valuable links I've discovered while surfing the web.
+ Descriptions not provided. Content not ordered. Quality not assured.

+ + + +
`}) diff --git a/src/miscellaneous.ori b/src/miscellaneous.ori new file mode 100644 index 00000000..3e105f9b --- /dev/null +++ b/src/miscellaneous.ori @@ -0,0 +1,20 @@ +(miscellaneous) => main_template.ori({ + title: "Miscellaneous Links" + description: "A handpicked list of curious, nostalgic, and obscure web destinations discovered during my surfing. Explore everything from digital oddities and retro-computing to interactive art, internet history, and bizarre experiments. No order, no guarantees—just pure internet miscellany" + og_description: "Links to various websites of interest or note." + stylesheet: "pages/links.css" + +@text: +`Links + +
+

Miscellaneous Links

+ +

These are ${ miscellaneous/length } links to miscellaneous web things.
+ Descriptions are not provided. Content is not ordered. Quality is not assured. Not appropriate for all audiences. Check with your doctor if this collection is right for you.

+ + +
`}) diff --git a/src/pages/links/misc.yaml b/src/miscellaneous.yaml similarity index 100% rename from src/pages/links/misc.yaml rename to src/miscellaneous.yaml diff --git a/src/pages/links.ori b/src/pages/links.ori new file mode 100644 index 00000000..0a674cf6 --- /dev/null +++ b/src/pages/links.ori @@ -0,0 +1,19 @@ +(blogs, tools-and-resources, miscellaneous) => main_template.ori({ + title: "Links" + description: "A curated collection of intriguing and valuable links I've discovered while surfing the web, plus a selection of delightfully offbeat YouTube oddities." + og_description: "Links to various other places of interest or note on the 'net." + +@text: +`

Links

+ +
+

This is a huge curated collection of ${ (blogs, tools-and-resources, miscellaneous) → =[...blogs, ...tools-and-resources, ...miscellaneous]/length } intriguing and valuable links I've discovered while surfing the web. A link's existence here does not necessarily indicate endorsement, but it does indicate that something about it snagged on my brain.

+ + + +

I have also compiled an assorted wonder of quality YouTube videos. They tend to be on the zanier side, and I'm not to be held responsible for any warped distortion of your recommendations that watching them may bring.

+
`}) diff --git a/src/pages/links/blogs.yaml b/src/pages/links/blogs.yaml deleted file mode 100644 index 91141ad6..00000000 --- a/src/pages/links/blogs.yaml +++ /dev/null @@ -1,138 +0,0 @@ -- title: Josh W Comeau - url: www.joshwcomeau.com -- title: Gwern - url: gwern.net -- title: Coding Horror - url: blog.codinghorror.com -- title: Robert Heaton - url: robertheaton.com -- title: Molly White - url: blog.mollywhite.net -- title: Citation Needed - url: www.citationneeded.news -- title: Web3 is Going Just Great - url: www.web3isgoinggreat.com -- title: The Evil Skeleton - url: theevilskeleton.gitlab.io -- title: Bryce Wray - url: www.brycewray.com -- title: Terence Eden’s Blog - url: shkspr.mobi -- title: Andrew Chan - url: andrewkchan.dev -- title: GioCities - url: blog.giovanh.com -- title: Ahmad Shadeed - url: ishadeed.com -- title: iio.ie - url: iio.ie -- title: Darek Kay - url: darekkay.com -- title: ajkprojects - url: ajkprojects.com -- title: Articles & Experiments by Roman Komarov - url: kizu.dev -- title: LMNT - url: lmnt.me -- title: meyerweb.com - url: meyerweb.com -- title: Stephen Wolfram - url: www.stephenwolfram.com -- title: Michael Dickens - url: mdickens.me -- title: Paul Graham - url: paulgraham.com -- title: Håvard Brynjulfsen - url: www.havardbrynjulfsen.design -- title: Ryan Mulligan - url: ryanmulligan.dev -- title: Clagnut by Richard Rutter - url: clagnut.com -- title: Andy Bell - url: bell.bz -- title: samwho - url: samwho.dev -- title: Jan Miksovsky’s Blog - url: jan.miksovsky.com -- title: Jim Neilsen's Blog - url: blog.jim-nielsen.com -- title: blakewatson.com - url: blakewatson.com -- title: Karolina Szczur - url: karolinaszczur.com -- title: Adam Argyle - url: nerdy.dev -- title: Ben Myers - url: benmyers.dev -- title: Ryan Trimble - url: ryantrimble.com -- title: Werd I/O - url: werd.io -- title: Birchtree - url: birchtree.me -- title: Adactio - url: adactio.com -- title: Computers Are Bad - url: computer.rip -- title: Maggie Appleton - url: maggieappleton.com -- title: CSS { In Real Life } - url: css-irl.info -- title: Aleksandr Hovhannisyan - url: www.aleksandrhovhannisyan.com -- title: Ashlese M Boyer - url: ashleemboyer.com -- title: Sara Joy - url: sarajoy.dev -- title: Moth Monster - url: moth.monster -- title: Mayank - url: mayank.co -- title: Heather Buchel - url: heather-buchel.com -- title: Seirdy's Home - url: seirdy.one -- title: Scott O'Hara - url: www.scottohara.me -- title: Waxy.org - url: waxy.org -- title: Simon Willison's Weblog - url: simonwillison.net -- title: LessWrong - url: www.lesswrong.com -- title: brr - url: brr.fyi -- title: Astral Codex Ten - url: www.astralcodexten.com -- title: oimo.io - url: oimo.io -- title: Bartosz Ciechanowski - url: ciechanow.ski -- title: Henry From Online - url: strange.website -- title: Stillness.Digital - url: stillness.digital -- title: Strange.Website - url: strange.website -- title: Anthony Fu - url: antfu.me -- title: Faster and Worse - url: fasterandworse.com -- title: 30fps.net - url: 30fps.net -- title: elle's homepage - url: ellesho.me -- title: maya.land - url: maya.land -- title: ribo.zone - url: ribo.zone -- title: eieio.games - url: eieio.games -- title: Ray's Miscellany - url: brisray.com -- title: HTMHell - url: htmhell.dev -- title: Shellsharks - url: shellsharks.com -- title: In Two Minds - url: intwominds.blog diff --git a/src/pages/links/links.ori b/src/pages/links/links.ori deleted file mode 100644 index df707ba0..00000000 --- a/src/pages/links/links.ori +++ /dev/null @@ -1,30 +0,0 @@ -(blogs, tools-and-resources, misc) => main_template.ori({ - title: "Links" - description: "A curated collection of intriguing and valuable links I've discovered while surfing the web." - -@text: -`

Links

- -
-

This is a curated collection of ${ (blogs, tools-and-resources, misc) → =[...blogs, ...tools-and-resources, ...misc]/length } intriguing and valuable links I've discovered while surfing the web.
- Descriptions not provided. Content not ordered. Quality not assured.

- -

Blogs

- - -

Tools and Resources

- - -

Misc

- - -

Videos

-

I have compiled an assorted wonder of quality YouTube videos. They tend to be on the zanier side and I'm not to be held responsible for any warped distortion of your recommendations that watching them may bring.

-
`}) diff --git a/src/pages/links/tools-and-resources.yaml b/src/pages/links/tools-and-resources.yaml deleted file mode 100644 index a5c27aee..00000000 --- a/src/pages/links/tools-and-resources.yaml +++ /dev/null @@ -1,116 +0,0 @@ -- title: SVG Wave Generator - url: www.softr.io/tools/svg-wave-generator -- title: Tabler Icons - url: tablericons.com -- title: 3dicons - url: 3dicons.co -- title: Puter - url: puter.com -- title: Simple Icons - url: simpleicons.org -- title: The Ultimate Oldschool PC Font Pack - url: int10h.org/oldschool-pc-fonts -- title: Device Info - url: deviceinfo.me -- title: css.glass - url: css.glass -- title: Feather Icons - url: feathericons.com -- title: Mixkit - url: mixkit.co -- title: Unsplash - url: unsplash.com -- title: Oh Shit, Git!?! - url: ohshitgit.com -- title: 98.css - url: jdan.github.io/98.css -- title: XP.css - url: botoxparty.github.io/XP.css -- title: 7.css - url: khang-nd.github.io/7.css -- title: Laws of UX - url: lawsofux.com -- title: cheat.sh - url: cheat.sh -- title: Microsoft Portals - url: msportals.io -- title: Meet the Ipsums - url: meettheipsums.com -- title: Realtime Colors - url: www.realtimecolors.com -- title: Flexbox Froggy - url: flexboxfroggy.com -- title: Pexels - url: www.pexels.com -- title: The League of Movable Type - url: www.theleagueofmoveabletype.com -- title: IT Tools - url: it-tools.tech -- title: Fontshare - url: fontshare.com -- title: Merklemap - url: www.merklemap.com -- title: PWA Install Demo - url: khmyznikov.com/pwa-install -- title: HTML De-crapulator - url: a11y-tools.com/markup-de-crapulator -- title: time.fyi - url: time.fyi -- title: RedditDB - url: redditdb.info -- title: magick.css - url: css.winterveil.net -- title: Uiverse - url: uiverse.io -- title: Uisual - url: uisual.com -- title: Toools.design - url: www.toools.design -- title: Wakamai Fondue - url: wakamaifondue.com -- title: SQLZoo - url: sqlzoo.net -- title: OSINT Framework - url: osintframework.com -- title: Photopea - url: photopea.com -- title: Learn X in Y Minutes - url: learnxinyminutes.com -- title: NandGame - url: www.nandgame.com -- title: CodePen - url: codepen.io -- title: Anna's Archive - url: annas-archive.org -- title: What length CSS unit should you use? - url: whatunit.com -- title: srcl - url: www.sacred.computer -- title: Kenney - url: www.kenney.nl -- title: OpenGameArt.org - url: opengameart.org -- title: Freesound - url: freesound.org -- title: Kay Lousberg - url: kaylousberg.com -- title: Quaternius - url: quaternius.com -- title: Overlay Fact Sheet - url: overlayfactsheet.com -- title: WikiApiary - url: wikiapiary.com -- title: Remix Icon - url: remixicon.com -- title: Free Music Archive - url: freemusicarchive.org/home -- title: LandChad.net - url: landchad.net -- title: Iconic - url: iconic.app -- title: VERT.sh - url: vert.sh -- title: Color and Contrast.com - url: colorandcontrast.com -- title: ambientCG - url: ambientcg.com diff --git a/src/site.ori b/src/site.ori index 340e0d42..1efb0f6b 100644 --- a/src/site.ori +++ b/src/site.ori @@ -10,7 +10,6 @@ support.html = main_template.ori(functions/parse-markdown.js(pages/support.md)) syndication.html = main_template.ori(functions/parse-markdown.js(pages/syndication.md)) search.html = main_template.ori(functions/parse-markdown.js(pages/search.md)) - links.html = pages/links/links.ori(pages/links/blogs.yaml, pages/links/tools-and-resources.yaml, pages/links/misc.yaml) 404.html = main_template.ori(functions/parse-markdown.js(pages/404.md)) posts.html = pages/posts.ori(post_data.ori) @@ -41,4 +40,11 @@ portfolio.html = pages/portfolio.ori(portfolio_data.ori) portfolio/ = map(portfolio_data.ori, portfolio_template.ori) + + links.html = pages/links.ori(blogs.yaml, tools-and-resources.yaml, miscellaneous.yaml) + links/ = { + blogs.html = blogs.ori(blogs.yaml) + tools-and-resources.html = tools-and-resources.ori(tools-and-resources.yaml) + miscellaneous.html = miscellaneous.ori(miscellaneous.yaml) + } } diff --git a/src/tools-and-resources.ori b/src/tools-and-resources.ori new file mode 100644 index 00000000..b8ec3197 --- /dev/null +++ b/src/tools-and-resources.ori @@ -0,0 +1,22 @@ +(tools-and-resources) => main_template.ori({ + title: "Tools and Resources Links" + description: "A collection of handy and useful tools/resources for designers, developers, and creators. Find everything from icon packs and fonts to CSS frameworks, UX guides, OSINT tools, coding resources, and free assets for music, art, and game development." + og_description: "Links to tools and resources of interest or note." + stylesheet: "pages/links.css" + +@text: +`Links + +
+

Tools and Resources

+ +

These are ${ tools-and-resources/length } links to handy and useful tools and resources available on the web. All are usable for free and without sign-up.

+ + +
`}) diff --git a/src/tools-and-resources.yaml b/src/tools-and-resources.yaml new file mode 100644 index 00000000..f971860a --- /dev/null +++ b/src/tools-and-resources.yaml @@ -0,0 +1,210 @@ +- title: SVG Wave Generator + url: www.softr.io/tools/svg-wave-generator + description: Generates customisable waves with SVG. +- title: Tabler Icons + url: tablericons.com + description: Huge collection of vector icons. +- title: 3dicons + url: 3dicons.co + description: Icons, but 3D. +- title: Puter + url: puter.com + description: A cloud-based desktop environment. +- title: Simple Icons + url: simpleicons.org + description: Huge collection of vector icons. +- title: The Ultimate Oldschool PC Font Pack + url: int10h.org/oldschool-pc-fonts + description: Old crunchy PC fronts. +- title: Device Info + url: deviceinfo.me + description: A web browser security testing, privacy testing, and troubleshooting tool. +- title: css.glass + url: css.glass + description: Glassmorphism CSS generator. +- title: Feather Icons + url: feathericons.com + description: Huge collection of vector icons. +- title: Mixkit + url: mixkit.co + description: Stock footage. +- title: Unsplash + url: unsplash.com + description: Stock photos. +- title: Oh Shit, Git!?! + url: ohshitgit.com + description: A guide to un-fucking your Git mistakes. +- title: 98.css + url: jdan.github.io/98.css + description: Windows 98 style CSS design system. +- title: XP.css + url: botoxparty.github.io/XP.css + description: Windows XP style CSS design system. +- title: 7.css + url: khang-nd.github.io/7.css + description: Windows 7 style CSS design system. +- title: Laws of UX + url: lawsofux.com + description: Collection of best practices that designers can consider when building user interfaces. +- title: Meet the Ipsums + url: meettheipsums.com + description: Various placeholder texts. +- title: Realtime Colors + url: www.realtimecolors.com + description: Visualise colours and fonts in context on a site. +- title: Flexbox Froggy + url: flexboxfroggy.com + description: A way to learn CSS flexbox. +- title: Pexels + url: www.pexels.com + description: Stock photos and videos. +- title: The League of Movable Type + url: www.theleagueofmoveabletype.com + description: Open-source font foundry. +- title: IT Tools + url: it-tools.tech + description: Handy tools for developers. +- title: Fontshare + url: fontshare.com + description: Fonts for personal and commercial use. +- title: Merklemap + url: www.merklemap.com + description: Search subdomains. +- title: PWA Install Demo + url: khmyznikov.com/pwa-install + description: Installation dialog for Progressive Web Applications (PWAs) +- title: HTML De-crapulator + url: a11y-tools.com/markup-de-crapulator + description: Does what it says on the tin. +- title: time.fyi + url: time.fyi + description: Time related tools to help you stay productive and organised. +- title: RedditDB + url: redditdb.info + description: Shows the time when subreddits are most active. +- title: magick.css + url: css.winterveil.net + description: Minimal CSS framework. +- title: Uiverse + url: uiverse.io + description: Community-built library of UI elements. +- title: Uisual + url: uisual.com + description: Library of website components and templates. +- title: Wakamai Fondue + url: wakamaifondue.com + description: Answers the question “What can my font do?” +- title: SQLZoo + url: sqlzoo.net + description: Teaches SQL step-by-step +- title: OSINT Framework + url: osintframework.com + description: Provides tons of open source intelligence resources. +- title: Photopea + url: photopea.com + description: Photoshop clone. +- title: Learn X in Y Minutes + url: learnxinyminutes.com + description: Teaches various things quickly and simply. +- title: NandGame + url: nandgame.com + description: Teaches how to build a computer from basic components. +- title: CodePen + url: codepen.io + description: Online front-end playground. +- title: Anna's Archive + url: annas-archive.org + description: Huge open library. +- title: What length CSS unit should you use? + url: whatunit.com + description: Informs what CSS unit you should select in various use cases. +- title: srcl + url: www.sacred.computer + description: Open-source component and style repository with terminal aesthetics. +- title: Kenney + url: www.kenney.nl + description: Free game assets. +- title: OpenGameArt.org + url: opengameart.org + description: Tons of art available for commercial use. +- title: Freesound + url: freesound.org + description: Stock sounds. +- title: Kay Lousberg + url: kaylousberg.com + description: Game assets. +- title: Quaternius + url: quaternius.com + description: Game assets. +- title: Overlay Fact Sheet + url: overlayfactsheet.com + description: Information about web 'accessibility' fact sheets. +- title: WikiApiary + url: wikiapiary.com + description: Information about MediaWiki websites. +- title: Remix Icon + url: remixicon.com + description: Huge collection of vector icons. +- title: Free Music Archive + url: freemusicarchive.org/home + description: An archive of free music. +- title: LandChad.net + url: landchad.net + description: Information on how to get your own place on the internet. +- title: Iconic + url: iconic.app + description: Huge collection of vector icons. +- title: VERT.sh + url: vert.sh + description: Comprehensive file converter. +- title: Color and Contrast.com + url: colorandcontrast.com + description: Interactive guide to color and contrast. +- title: ambientCG + url: ambientcg.com + description: Free textures, HDRIs, and more. +- title: BGJar + url: bgjar.com + description: SVG background generator. +- title: ColorSpace + url: mycolor.space + description: Generate a palette from a colour. +- title: Cool Backgrounds + url: coolbackgrounds.io + description: Backgrounds that are cool. +- title: fffuel + url: www.fffuel.co + description: Collection of colour tools and SVG generators for gradients, patterns, textures, shapes, and backgrounds. +- title: Undesign + url: undesign.learn.uno + description: Collection of free design tools and resources for makers, developers, and designers. +- title: Mossaik + url: mossaik.app + description: Graphic generator. +- title: Tabbied + url: tabbied.com + description: Generate patterns from templates. +- title: Patterninja + url: patterninja.com + description: Create tiled patterns from icons. +- title: Duotone + url: duotone.shapefactory.co + description: Convert images into duotone versions. +- title: archives.design + url: archives.design + description: Archive of graphic design related items available on the Internet Archive. +- title: CallToInspiration + url: calltoinspiration.com + description: Huge amount of UI/UX inspiration. +- title: collected + url: collected.li + description: New web design inspiration on every visit +- title: Curated Design + url: www.curated.design + description: Curated web design inspiration catalog. +- title: Design Everywhere + url: designeverywhere.co + description: An ever-growing collection of carefully curated works from around the world. +- title: iOS Icon Gallery + url: www.iosicongallery.com + description: Gallery of iOS app icons.