- 扫描 ID：
- 9827fc62-09c2-427b-986a-b9117faf117f已完成
- 提交的 URL：
- https://thewhale.cc/
- 报告完成时间：
链接 · 找到 50 个
从页面中识别出的传出链接
| 链接 | 文本 |
|---|---|
| https://icons.pqoqubbw.dev/ | pqoqubbw |
| https://medusajs.com/ | Medusa |
| https://gitmoji.dev/ | Gitmoji |
| https://randoma11y.com | RandomA11y |
| https://leto.axym.org/ | Leto Reader |
| https://htmlrev.com/ | HTMLrev |
| https://www.scriptkit.com/ | Scriptkit |
| https://hono.dev | Hono |
| https://github.com/piecesjs/piecesjs | piecejs |
| https://forgejo.org/ | Forgero |
JavaScript 变量 · 找到 4 个
在页面窗口对象上加载的全局 JavaScript 变量是在函数外部声明的变量，可以从当前范围内的代码中的任何位置访问
| 名称 | 类型 |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| umami | object |
控制台日志消息 · 找到 0 条
记录到 Web 控制台的消息
HTML
页面的原始 HTML 正文
<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>The whale | Find resources for web developer like tools, products, events, podcasts, jobs, posts, open source software</title>
<link rel="alternate" type="application/rss+xml" title="The whale, technological monitoring for web developers" href="https://thewhale.cc/feed">
<meta property="og:title" content="Technological monitoring for web developers">
<meta property="og:description" content="">
<meta property="og:type" content="website">
<meta property="og:url" content="https://thewhale.cc/home">
<meta property="og:image" content="https://thewhale.cc/assets/img/dashboard_screenshot.jpg">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/img/favicon/site.webmanifest">
<link rel="mask-icon" href="assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="description" content="Technological monitoring for web developer. Daily curated list of web resources, jobs, missions and events">
<meta name="keywords" content="web developer, internet, front-end developer, back-end developer, web developers, front-end developers, back-end developers, technological monitoring, curated links, web">
<meta name="google-site-verification" content="N9HX-Q51Tzjzonr5GjBMYoarQwx_VzN4bLsMlPgkasI">
<!-- Umami -->
<script async="" src="https://analytics.umami.is/script.js" data-website-id="e5be0324-ac33-4d33-a9e6-4e5877729125"></script>
<!-- / Umami -->
<link href="https://thewhale.cc/assets/css/style-min.css" rel="stylesheet">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://thewhale.cc/",
"name": "The whale",
"author": {
"@type": "Person",
"name": "Gilles Vauvarin"
},
"description": "Technological monitoring for web developers. Every week, a curated list of resources,
jobs and web event announcements",
"publisher": "The whale, Gilles Vauvarin",
}
</script>
</head>
<body class="bg-white bg-img">
<div class="grid-container">
<div class="grid-box grid-box-header">
<div class="header-container flex xl:flex-row flex-col justify-center">
<div class="brand-container xl:block flex justify-center px-5 mt-2">
<a class="no-underline xl:flex" href="https://thewhale.cc">
<div class="brand-name hidden xl:inline-block mt-6 mr-8 xl:mx-8">
<div class="text-4xl font-sans xl:text-right mb-4 text-blue-logo">
The <br> whale </div>
</div>
<div class="brand-logo mt-6">
<figure class="logo text-center">
<img alt="logo" src="https://thewhale.cc/media/site/3456718206-1689922535/whale.svg" width="80px" height="80px">
</figure>
</div>
</a>
</div>
<div class="brand-taglines text-center mt-6 p-5">
<h1 class="text-2xl font-thin xl:mb-3 text-blue-logo">
Technological monitoring for web developers </h1>
<div class="xl:hidden my-6 w-full">
<a href="#menu-footer-mobile" class="">
<div class="burger-line bg-blue-logo"></div>
<div class="burger-line bg-blue-logo"></div>
<div class="burger-line bg-blue-logo"></div>
</a>
</div>
</div>
<div class="menu-top hidden xl:block xl:mt-6 p-5">
<nav id="menu-top">
<ul class="flex list-reset justify-center">
<li class="mx-2">
<a class="no-underline text-sm text-blue hover:text-blue-darker" href="https://thewhale.cc">Home</a>
</li>
<li class="mx-2">
<a class="no-underline text-sm text-blue hover:text-blue-darker" href="https://thewhale.cc/about">About</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="grid-box grid-box-mainleft xl:mt-12 xl:pt-6">
<!--
<div class="xl:sticky xl:mx-8 xl:mb-8 mt-1 leading-normal" style="top:20px">
<div class="py-6 text-blue-logo text-xs font-mono bg-white text-center border border-grey-light">
Advertise your <br>product/service/job/event<br> in this sticky box!<br><br>
<span class="font-bold">- $10/day -</span><br> The number of day is up to you
</div>
<div class="mt-3 text-blue-logo font-mono text-center">
<span class="font-bold text-sm"></span>
</div>
</div>
--></div>
<div class="grid-box grid-box-maincenter">
<div class="mt-8 pb-5 text-center text-xl text-blue-logo font-sans font-light ">
Already 1435 resources listed
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://icons.pqoqubbw.dev/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/pqoqubbw/2411683943-1730948400/pqoqubbw-icons-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Nov 7th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://icons.pqoqubbw.dev/">
<h2 class="text-lg mb-2 font-mono">pqoqubbw</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>A beautifully crafted animated icons. An open-source (MIT License) collection of smooth animated icons for your projects. Feel free to use them, share your feedback, and let's make this library awesome together. Built with framer-motion and lucide.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">UX</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Icons, OpenSource, Animation, pqoqubbw</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://medusajs.com/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/medusa/1179531767-1730300400/medusa-world-s-most-flexible-commerce-platform-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 30th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://medusajs.com/">
<h2 class="text-lg mb-2 font-mono">Medusa</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>The world's most flexible commerce platform. The most popular open-source platform for commerce. Use Medusa as your foundation and focus on building the customizations that move the needle.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">E-commerce, JavaScript, OpenSource, Medusa</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://gitmoji.dev/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/gitmoji/266843332-1730127600/gitmoji-an-emoji-guide-for-your-commit-messages-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 28th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://gitmoji.dev/">
<h2 class="text-lg mb-2 font-mono">Gitmoji</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>An emoji guide for your commit messages. Gitmoji is an initiative to standardize and explain the use of emojis on GitHub commit messages. Using emojis on commit messages provides an easy way of identifying the purpose or intention of a commit with only looking at the emojis used. As there are a lot of different emojis I found the need of creating a guide that can help to use emojis easier.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Dev</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Git, Commits, Emoji, Gitmoji</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://randoma11y.com">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/randoma11y/3011173080-1730127600/randoma11y-endless-collection-of-accessible-color-combos-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 28th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://randoma11y.com">
<h2 class="text-lg mb-2 font-mono">RandomA11y</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>RandomA11y is a web tool that generates random color pairs that meet WCAG (Web Content Accessibility Guidelines) accessibility criteria in terms of contrast.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">UX</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Contrast, Color, RandomA11y, Accessibility</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://leto.axym.org/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/leto-reader/3108503674-1729782000/leto-free-modern-speed-reading-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 24th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://leto.axym.org/">
<h2 class="text-lg mb-2 font-mono">Leto Reader</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>A versatile speed reader that supports high-speed reading for skimming or consuming easy texts at e.g. 400-1000 words per minute. It can also be used at lower speeds for better comprehension while still benefiting from Rapid Serial Visual Presentation (RSVP).</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Reading, LetoReader</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://htmlrev.com/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/htmlrev/379555022-1729713600/free-html-website-templates-on-htmlrev-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 23rd, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://htmlrev.com/">
<h2 class="text-lg mb-2 font-mono">HTMLrev</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>HTMLrev provides free HTML website templates built with vanilla CSS, Bootstrap, Tailwind, Angular, React, Vue, Nextjs, Nuxt, Svelte, Gatsby, Astro and Laravel. All templates are free for both personal and commercial projects including client work.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">HTML, Templates, HTMLrev</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://www.scriptkit.com/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/scriptkit/3045794582-1729713600/script-kit-shortcut-to-everything-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 23rd, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://www.scriptkit.com/">
<h2 class="text-lg mb-2 font-mono">Scriptkit</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Shortcut to everything, an open-source kit to optimize your developer workflow. Script Kit makes it easy to create and run scripts that solve your daily problems. Create a new script from the prompt then your script opens in the editor of your choice. Write a few lines of JavaScript. Then run the script from the prompt. Simply put, Script Kit helps you script away the friction of your day.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Dev</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Scripts, JavaScript, OpenSource, Scriptkit</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://hono.dev">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/hono/348916409-1729713600/hono-web-framework-built-on-web-standards-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 23rd, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://hono.dev">
<h2 class="text-lg mb-2 font-mono">Hono</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Hono is a small, simple, and ultrafast web framework built on Web Standards. It works on any JavaScript runtime: Cloudflare Workers, Fastly Compute, Deno, Bun, Vercel, Netlify, AWS Lambda, Lambda@Edge, and Node.js. It's a simple web application framework similar to Express, without a frontend. But it runs on CDN Edges and allows you to construct larger applications when combined with middleware.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Dev</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Framework</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://github.com/piecesjs/piecesjs">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/piecejs/1872840899-1729519200/github-piecesjs-piecesjs-front-end-framework-for-a-versatile-and-native-web-components-management-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 21st, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://github.com/piecesjs/piecesjs">
<h2 class="text-lg mb-2 font-mono">piecejs</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>piecesjs is a simple and lightweight front-end framework that aims to make native web components accessible, with several utilities and tools for website and app development. Like modern frameworks, it dynamically imports the JS and CSS that the page needs, for better optimization. Without being limited to a big headless infrastructure.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Components, Framework, JavaScript, piecejs</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:w-3/4 w-full pt-10 mx-auto mb-12 pb-12">
<div class="font-mono text-sm text-blue w-full text-center mt-4 mb-4">Join the web developers community</div>
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="my-3 mx-3 xl:mx-0 border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon:</span> 300 followers</a></li>
<!--
<li class="my-3 mx-3 xl:mx-0"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/newsletter"><span class="xl:inline-block xl:w-48 font-semibold">Rss:</span> 12,5564 unique vues per month</a></li> -->
</ul>
</div>
<!--
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/subscription"><span class="xl:inline-block xl:w-48 font-semibold">Newsletter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/twitter"><span class="xl:inline-block xl:w-48 font-semibold">Twitter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 "><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon</span> </a></li>
</ul>
</div>
-->
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://forgejo.org/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/forgero/1016554324-1729188000/forgejo-beyond-coding-we-forge-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 17th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://forgejo.org/">
<h2 class="text-lg mb-2 font-mono">Forgero</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Take back control of your software development process, self-host your projects and get everyone involved in delivering quality software on the same page.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Dev</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Git, OpenSource, Forgero</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://dokploy.com/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/dokploy/530367586-1729188000/dokploy-effortless-deployment-solutions-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 17th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://dokploy.com/">
<h2 class="text-lg mb-2 font-mono">Dokploy</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Deploy anywhere with total freedom and ease. Streamline your operations with our all-in-one platform-perfect for managing projects, data, and system health with simplicity and efficiency.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Sysadmin</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Deployment, OpenSource, ServerAdmin, Docker, Dokploy</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://www.reorproject.org/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/reor/1459372026-1729184400/reor-reor-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 17th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://www.reorproject.org/">
<h2 class="text-lg mb-2 font-mono">Reor</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Reor is the AI note-taking app that self-organizes your notes and runs models locally. Reor interfaces with Llama.cpp to run local LLMs and Transformers.js to run local embedding models.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">AI, OpenSource, Local, NoteTaking, Reor</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://bolt.new/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/bolt/2357313703-1729105200/bolt-new-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 16th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://bolt.new/">
<h2 class="text-lg mb-2 font-mono">Bolt.new</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Bolt.new is an AI-powered web development agent that allows you to prompt, run, edit, and deploy full-stack applications directly from your browser.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Dev</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">IA, Code, Stackblitz, Bolt</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://github.com/panphp/pan?ref=laravelnews">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/pan/1252401634-1729105200/pan-a-simple-lightweight-and-privacy-focused-product-analytics-php-package-laravel-news-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 16th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://github.com/panphp/pan?ref=laravelnews">
<h2 class="text-lg mb-2 font-mono">Pan</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Pan is a lightweight and privacy-focused PHP product analytics library. It’s designed as a very simple package that you can install via composer require and start tracking your pages or components with a simple data-pan attribute.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Back</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Analytics, PHP, Laravel, Package, Pan</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://deno.com/blog/v2.0">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/deno-2/1384706984-1729105200/announcing-deno-2-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 16th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://deno.com/blog/v2.0">
<h2 class="text-lg mb-2 font-mono">Deno 2</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Deno 2 is here! All Deno news are explained in this article.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Back</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">JavaScript, Server, Deno</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://nitro.unjs.io/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/nitro/2225216760-1729105200/nitro-next-generation-server-toolkit-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 16th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://nitro.unjs.io/">
<h2 class="text-lg mb-2 font-mono">Nitro</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Next Generation Server Toolkit. Create web servers with everything you need and deploy them wherever you prefer.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Dev</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">WebServer, Tooltik, Nitro</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://github.com/matvp91/mixwave">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/1728818726-mixwave-an-open-source-scalable-video-streaming-service/2902978322-1729105200/mixwave-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 13th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://github.com/matvp91/mixwave">
<h2 class="text-lg mb-2 font-mono">Mixwave - an Open-Source, Scalable, Video Streaming Service</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Mixwave is a self hostable platform that aims to simplify the complexities of video delivery. Transcode and package your media for online streaming with simple API calls and sane defaults, or craft dynamic HLS playlists on the fly with bumpers, ads and filters.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Back</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Video, API, Mixwave</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://htmlforpeople.com/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/htmlforpeople/908684229-1728687600/html-for-people-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 11th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://htmlforpeople.com/">
<h2 class="text-lg mb-2 font-mono">HTMLforPeople</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>HTML isn’t only for people working in the tech field. It’s for anybody, the way documents are for anybody. HTML is just another type of document. A very special one—the one the web is built on. This book will teach you how to do just that. It doesn’t require any previous experience making websites or coding. I will cover everything you need to know to get started in an approachable and friendly way.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">HTML, Web, htmlforpeople</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:w-3/4 w-full pt-10 mx-auto mb-12 pb-12">
<div class="font-mono text-sm text-blue w-full text-center mt-4 mb-4">Join the web developers community</div>
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="my-3 mx-3 xl:mx-0 border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon:</span> 300 followers</a></li>
<!--
<li class="my-3 mx-3 xl:mx-0"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/newsletter"><span class="xl:inline-block xl:w-48 font-semibold">Rss:</span> 12,5564 unique vues per month</a></li> -->
</ul>
</div>
<!--
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/subscription"><span class="xl:inline-block xl:w-48 font-semibold">Newsletter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/twitter"><span class="xl:inline-block xl:w-48 font-semibold">Twitter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 "><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon</span> </a></li>
</ul>
</div>
-->
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://pagedjs.org/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/paged-js/3622978230-1728421200/paged-js-how-to-use-paged-js-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 8th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://pagedjs.org/">
<h2 class="text-lg mb-2 font-mono">Paged.js</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Paged.js is a free and open-source library that paginates any HTML content to produce beautiful print-ready PDF. The library fragments the content, reads your CSS print declarations and presents a paginated preview in your browser that you can save as PDF.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">HTMLtoPDF, Print, JavaScript, OpenSource, PagedJs</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://zen-browser.app/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/zen/690028606-1728079200/zen-browser-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 4th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://zen-browser.app/">
<h2 class="text-lg mb-2 font-mono">Zen</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Beautiful. Fast. Private. Your Browser, Your Way. Beautifully designed, privacy-focused, and packed with features. We care about your experience, not your data.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Browser, Firefox, Zen</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://kamal-deploy.org/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/kamal/529804943-1728079200/kamal-deploy-web-apps-anywhere-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Oct 4th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://kamal-deploy.org/">
<h2 class="text-lg mb-2 font-mono">Kamal</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Deploy web apps anywhere from bare metal to cloud VMs. Kamal offers zero-downtime deploys, rolling restarts, asset bridging, remote builds, accessory service management, and everything else you need to deploy and manage your web app in production with Docker. Originally built for Rails apps, Kamal will work with any type of web app that can be containerized.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Dev</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Admin, Deploy, OpenSource, Kamal</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://openfreemap.org/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/openfreemap/3510145271-1727661600/openfreemap-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Sep 30th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://openfreemap.org/">
<h2 class="text-lg mb-2 font-mono">OpenFreeMap</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>OpenFreeMap lets you display custom maps on your website and apps for free. You can either self-host or use our public instance. Everything is open-source, including the full production setup — there’s no ‘open-core’ model here. The map data comes from OpenStreetMap. Using our public instance is completely free: there are no limits on the number of map views or requests. There’s no registration, no user database, no API keys, and no cookies. We aim to cover the running costs of our public instance through donations.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Map, OpenSource, OpenFreeMap</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://dev.to/zkat/i-replaced-htmx-with-a-simple-web-component-4bnh">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/i-replaced-htmx-with-a-simple-web-component/1611053615-1727236800/kat-marchan-dev-community-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Sep 25th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://dev.to/zkat/i-replaced-htmx-with-a-simple-web-component-4bnh">
<h2 class="text-lg mb-2 font-mono">Replaced htmx with a simple web component</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>This is how Kat Marchán (tech lead/architect) replaced its entire usage of htmx with a tiny, 100-line, vanillajs web component.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Ajax, HTMX, WebComponent, KatMarchán</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://github.com/MightyMoud/sidekick">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/sidekick/2068373344-1727143200/github-mightymoud-sidekick-bare-metal-to-production-ready-in-mins-your-own-fly-server-on-your-vps-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Sep 24th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://github.com/MightyMoud/sidekick">
<h2 class="text-lg mb-2 font-mono">Sidekick</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Sidekick helps you along all the steps of deployment on your VPS. From basic setup to zero downtime deploys, we got you!</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Sysadmin</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Deplyment, VPS, Sidekick</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://uiverse.io/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/universe/2410602898-1727143200/uiverse-the-largest-library-of-open-source-ui-elements-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Sep 24th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://uiverse.io/">
<h2 class="text-lg mb-2 font-mono">Universe UI</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>The Largest Library of Open-Source UI. Community-built library of UI elements. Copy as HTML/CSS, Tailwind, React and Figma.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Library, UIElements, UniverseUI</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://logseq.com">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/logseq/359007024-1726538400/logseq-a-privacy-first-open-source-knowledge-base-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Sep 17th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://logseq.com">
<h2 class="text-lg mb-2 font-mono">Logseq</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Connect your notes, increase understanding.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Notes, Graph, Cards, Logseq</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://polar.sh">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/polar/249141923-1726538400/polar-the-best-monetization-platform-for-developers-polar-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Sep 17th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://polar.sh">
<h2 class="text-lg mb-2 font-mono">Polar</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>The best monetization platform for developers. Get paid coding on your passion. Leave upsales, billing and international taxes to us.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Dev</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Payment, Polar</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:w-3/4 w-full pt-10 mx-auto mb-12 pb-12">
<div class="font-mono text-sm text-blue w-full text-center mt-4 mb-4">Join the web developers community</div>
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="my-3 mx-3 xl:mx-0 border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon:</span> 300 followers</a></li>
<!--
<li class="my-3 mx-3 xl:mx-0"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/newsletter"><span class="xl:inline-block xl:w-48 font-semibold">Rss:</span> 12,5564 unique vues per month</a></li> -->
</ul>
</div>
<!--
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/subscription"><span class="xl:inline-block xl:w-48 font-semibold">Newsletter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/twitter"><span class="xl:inline-block xl:w-48 font-semibold">Twitter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 "><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon</span> </a></li>
</ul>
</div>
-->
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://www.beercss.com/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/beercss/1524013200-1726513200/beer-css-build-material-design-in-record-time-without-stress-for-devs-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Sep 16th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://www.beercss.com/">
<h2 class="text-lg mb-2 font-mono">Beercss</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Build material design in record time without stress for devs.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">CSS, Framework, UI, Beercss</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://dotapp.uk/index.html">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/dot/855251587-1726192800/try-out-the-dot-beta-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Sep 13th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://dotapp.uk/index.html">
<h2 class="text-lg mb-2 font-mono">Dot</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Need the power of language models but don't want to send away your documents and data? Use Dot.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">IA, Local data, Dot</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://localsend.org/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/localsend/2785494424-1724094000/localsend-share-files-to-nearby-devices-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Aug 19th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://localsend.org/">
<h2 class="text-lg mb-2 font-mono">LocalSend</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Share files to nearby devices. Free, open-source, cross-platform.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Files, Share, OpenSource, LocalSend</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://join-lemmy.org/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/lemmy/3291707846-1723644000/lemmy-a-link-aggregator-for-the-fediverse-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Aug 14th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://join-lemmy.org/">
<h2 class="text-lg mb-2 font-mono">Lemmy</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>A link aggregator for the fediverse. Lemmy is a selfhosted social link aggregation and discussion platform. It is completely free and open, and not controlled by any company. This means that there is no advertising, tracking, or secret algorithms. Content is organized into communities, so it is easy to subscribe to topics that you are interested in, and ignore others. Voting is used to bring the most interesting items to the top.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Fediverse, SocialLinkAggregation, Lemmy</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://www.hyperui.dev/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/hyperui/2378379257-1722931200/free-open-source-tailwind-css-components-hyperui-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Aug 6th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://www.hyperui.dev/">
<h2 class="text-lg mb-2 font-mono">HyperUI</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>HyperUI is a collection of free Tailwind CSS components that can be used in your next project. With a range of components, you can build your next marketing website, admin dashboard, eCommerce store and much more.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Tailwindcss, Components, HyperUI</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://public.work/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/public-work/3791831767-1722690000/public-work-by-cosmos-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Aug 3rd, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://public.work/">
<h2 class="text-lg mb-2 font-mono">Public.work</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Public Work is a search engine for public domain content. Explore 100,000+ copyright-free images from The MET, New York Public Library, and other sources.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Design</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Public, Library, Images, Public.work</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://recall.cards/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/recall/276470492-1722636000/recall-learn-twice-faster-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Aug 2nd, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://recall.cards/">
<h2 class="text-lg mb-2 font-mono">Recall</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Recall is the flashcards application for efficient learners.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Flashcards, Learning, Recall</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://repocloud.io/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/repocloud/2339196274-1722582000/repocloud-browse-app-marketplace-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Aug 2nd, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://repocloud.io/">
<h2 class="text-lg mb-2 font-mono">RepoCloud</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Deploy and scale your favorite open source applications effortlessly with one click - for half the price of major cloud hosts</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Sysadmin</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">OpenSource, Cloud, RepoCloud</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://ffoodd.github.io/chaarts/index.html">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/chaarts/2677224328-1722582000/radar-charts-chaarts-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Aug 2nd, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://ffoodd.github.io/chaarts/index.html">
<h2 class="text-lg mb-2 font-mono">Chaarts</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Every chart in this project relies solely on semantic markup — table based — and a spread of CSS variables carried by the tags. No JavaScript required for display, and styles are progressively enhanced depending on your browser's capabilities.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">HTML, CSS, Charts, Chaarts</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:w-3/4 w-full pt-10 mx-auto mb-12 pb-12">
<div class="font-mono text-sm text-blue w-full text-center mt-4 mb-4">Join the web developers community</div>
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="my-3 mx-3 xl:mx-0 border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon:</span> 300 followers</a></li>
<!--
<li class="my-3 mx-3 xl:mx-0"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/newsletter"><span class="xl:inline-block xl:w-48 font-semibold">Rss:</span> 12,5564 unique vues per month</a></li> -->
</ul>
</div>
<!--
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/subscription"><span class="xl:inline-block xl:w-48 font-semibold">Newsletter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/twitter"><span class="xl:inline-block xl:w-48 font-semibold">Twitter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 "><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon</span> </a></li>
</ul>
</div>
-->
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://openverse.org/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/openverse/4253447079-1722495600/openly-licensed-images-audio-and-more-openverse-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Aug 1st, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://openverse.org/">
<h2 class="text-lg mb-2 font-mono">Openverse</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Explore more than 800 million creative works. An extensive library of free stock photos, images, and audio, available for free use.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Design</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Images, Photos, Audios, Openverse</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://private.mt/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/private-mt/1285232030-1722369600/private-machine-translation-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jul 30th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://private.mt/">
<h2 class="text-lg mb-2 font-mono">Private.mt</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Private machine translation, running locally on your device.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Translation, privatemt</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://minipic.app/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/minipic/828921292-1722157200/minipic-convert-images-super-fast-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jul 28th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://minipic.app/">
<h2 class="text-lg mb-2 font-mono">MiniPic</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Convert and compress images superfast.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Design</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Photo, Image, Optimization, MiniPic</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://educajou.forge.apps.education.fr/autobd/?type_galerie=personnages&personnage=Jous">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/autobd/2392748555-1721592000/auto-bd-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jul 21st, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://educajou.forge.apps.education.fr/autobd/?type_galerie=personnages&personnage=Jous">
<h2 class="text-lg mb-2 font-mono">AutoBD</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Create simple comic strips in just a few clicks.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Design</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">BD, LaForge, AutoBD</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://artvee.com/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/artvee/2433217099-1721289600/artvee-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jul 18th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://artvee.com/">
<h2 class="text-lg mb-2 font-mono">Artvee</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Artvee is an open source archive of over 100,000 public domain works, including illustrations, photos, drawings and paintings. Download art for free in high resolution.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Design</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Art, Illustration, Photos, Drawings, OpenSource, Artvee</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://zed.dev/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/zed/3974302727-1721041200/zed-code-at-the-speed-of-thought-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jul 15th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://zed.dev/">
<h2 class="text-lg mb-2 font-mono">Zed</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter. It's also open source. Mac, Windows, Linux.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Dev</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Rust, IDE, OpenSource, Zed</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://protomaps.com/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/protomaps/1805024985-1720987200/protomaps-a-free-and-open-source-map-of-the-world-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jul 14th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://protomaps.com/">
<h2 class="text-lg mb-2 font-mono">Protomaps</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Protomaps is an open source map of the world, deployable as a single static file on cloud storage.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Map, OpenSource, Protomaps</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://matcha.mizu.sh">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/matcha-css/3045264916-1720519200/matcha-css-drop-in-semantic-styling-library-in-pure-css-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jul 9th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://matcha.mizu.sh">
<h2 class="text-lg mb-2 font-mono">Matcha.css</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>matcha.css is a pure CSS library designed to style HTML elements similarly to a default browser stylesheet, eliminating the need for users to manually patch their documents.</p>
<p>Ideal for fast prototyping, static HTML pages, Markdown-generated documents, and developers seeking to streamline their workflow without delving into CSS intricacies and want to make use of the full range of available HTML elements.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">CSS, Matcha</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://microbin.eu/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/microbin/1444581513-1720216800/microbin-microbin-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jul 5th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://microbin.eu/">
<h2 class="text-lg mb-2 font-mono">Microbin</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>MicroBin is a feature rich, performant and secure text and file sharing web application, a "paste bin". Imagine cloud storage, but simpler, and with cool features like URL redirection, automatic file expiry , raw file serving support and 3 possible levels of encryption.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Sysadmin</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">FileSharing, PasteBin, Encryption, Microbin</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:w-3/4 w-full pt-10 mx-auto mb-12 pb-12">
<div class="font-mono text-sm text-blue w-full text-center mt-4 mb-4">Join the web developers community</div>
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="my-3 mx-3 xl:mx-0 border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon:</span> 300 followers</a></li>
<!--
<li class="my-3 mx-3 xl:mx-0"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/newsletter"><span class="xl:inline-block xl:w-48 font-semibold">Rss:</span> 12,5564 unique vues per month</a></li> -->
</ul>
</div>
<!--
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/subscription"><span class="xl:inline-block xl:w-48 font-semibold">Newsletter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/twitter"><span class="xl:inline-block xl:w-48 font-semibold">Twitter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 "><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon</span> </a></li>
</ul>
</div>
-->
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://github.com/Y2Z/monolith">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/monolith/4026397615-1720216800/github-y2z-monolith-cli-tool-for-saving-complete-web-pages-as-a-single-html-file-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jul 5th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://github.com/Y2Z/monolith">
<h2 class="text-lg mb-2 font-mono">Monolith</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>A data hoarder’s dream come true: bundle any web page into a single HTML file. You can finally replace that gazillion of open tabs with a gazillion of .html files stored somewhere on your precious little drive.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Archive, WebPage, HTML, Monolith</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://jampack.divriots.com/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/jampack/709676301-1720216800/jampack-jampack-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jul 5th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://jampack.divriots.com/">
<h2 class="text-lg mb-2 font-mono">Jampack</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Jampack is a post-processing tool that takes the output of your Static Site Generator (aka SSG) and optimizes it for best user experience and best Core Web Vitals scores.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">SSG, post-processing, Jampack</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://pikimov.com">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/pikimov/3495533958-1719864000/pikimov-alternative-gratuite-a-after-effects-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jul 1st, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://pikimov.com">
<h2 class="text-lg mb-2 font-mono">Pikimov</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Online motion design and video editor.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Design</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">Video, Editor, Browser, Pikimov</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://modelviewer.dev/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/model-viewer/3615084146-1719270000/model-viewer-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jun 24th, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://modelviewer.dev/">
<h2 class="text-lg mb-2 font-mono">Model Viewer</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Easily display interactive 3D models on the web & in AR</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Front</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">3D, JS, model-viewer</div>
<br class="xl:hidden">
</div>
</div>
<div class="xl:flex xl:text-left text-center bg-indigo-darker xl:mb-8 border border-b-white p-8">
<div class="thumbs-container text-center">
<div class="xl:mb-0 mb-2">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://servo.org/">
<figure>
<img class="thumbs" src="https://thewhale.cc/media/pages/posts/servo/1930597930-1718982000/servo-the-embeddable-independent-memory-safe-modular-parallel-web-rendering-engine-200x150.png" width="200" height="150" alt="thumbs">
</figure>
</a>
</div>
<div class="text-xs text-blue-light mt-3 mb-6 xl:mb-0">
Jun 21st, 2024 </div>
</div>
<div class="xl:pl-8">
<a class="no-underline text-blue-lighter hover:text-blue-light" target="_blank" href="https://servo.org/">
<h2 class="text-lg mb-2 font-mono">Servo</h2>
</a>
<div class="description w-full text-sm leading-normal text-grey-light">
<p>Servo is a web rendering engine written in Rust, with WebGL and WebGPU support, and adaptable to desktop, mobile, and embedded applications.</p> </div>
<div class="inline-block xl:mb-0 mb-2 mt-3 py-1 px-2 xl:mr-2 text-xs text-white leading-normal bg-purple-dark rounded-sm">Internet</div>
<div class="inline-block py-1 px-2 xl:mr-2 xl:mt-3 text-xs text-white leading-normal bg-teal-dark rounded-sm">WebRendering, Rust, Servo</div>
<br class="xl:hidden">
</div>
</div>
<nav class="w-full text-sm xl:text-base mt-4 xl:mt-0">
<ul class="flex list-reset justify-center">
<li class="last mx-3 text-grey"><span>← Newest</span></li>
<li class="mx-3 text-grey">
1 </li>
<li class="mx-3">
<a class="no-underline text-blue hover:text-blue-light" href="https://thewhale.cc/page:2">
2 </a>
</li>
<li class="mx-3">
<a class="no-underline text-blue hover:text-blue-light" href="https://thewhale.cc/page:3">
3 </a>
</li>
<li class="mx-3">
<a class="no-underline text-blue hover:text-blue-light" href="https://thewhale.cc/page:4">
4 </a>
</li>
<li class="mx-3"><a class="no-underline text-blue hover:text-blue-light" href="https://thewhale.cc/page:2">Oldest →</a></li>
</ul>
</nav>
<div class="xl:w-3/4 w-full pt-10 mx-auto mb-12 pb-12">
<div class="font-mono text-sm text-blue w-full text-center mt-4 mb-4">Join the web developers community</div>
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="my-3 mx-3 xl:mx-0 border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon:</span> 300 followers</a></li>
<!--
<li class="my-3 mx-3 xl:mx-0"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/newsletter"><span class="xl:inline-block xl:w-48 font-semibold">Rss:</span> 12,5564 unique vues per month</a></li> -->
</ul>
</div>
<!--
<div class="w-full font-mono text-sm text-center text-blue xl:text-left bg-blue xl:mr-2 px-6 py-4 mt-1">
<ul class="list-reset">
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/subscription"><span class="xl:inline-block xl:w-48 font-semibold">Newsletter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 border-b border-blue-light"><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/twitter"><span class="xl:inline-block xl:w-48 font-semibold">Twitter</span> </a></li>
<li class="text-center my-3 mx-3 pb-3 xl:mx-0 "><a class="no-underline text-white hover:text-blue-lighter" href="https://thewhale.cc/mastodon"><span class="xl:inline-block xl:w-48 font-semibold">Mastodon</span> </a></li>
</ul>
</div>
-->
</div>
</div>
<div class="grid-box grid-box-mainright xl:mt-12 xl:pt-6">
<img class="absolute hidden xl:block" style="top:360px;right:240px;z-index:-100" alt="jellyfish" width="30px" src="https://thewhale.cc/assets/img/jellyfish.svg">
<div class="xl:sticky xl:ml-8 xl:pt-1 mb-4" style="top:15px">
<div class="">
<form class="mb-4 text-center xl:text-left" action="https://thewhale.cc/search">
<button class="xl:button-bevel xl:button-bevel-search bg-teal hover:bg-teal-dark text-white font-bold py-2 px-4">Search</button>
</form>
</div>
<div class="mb-4">
<form class="mb-4 text-center xl:text-left" action="https://thewhale.cc/ad">
<button class="xl:button-bevel xl:button-bevel-suggest bg-teal hover:bg-teal-dark text-white font-bold py-2 px-4">Advertise</button>
</form>
<form class="mb-4 text-center xl:text-left" action="https://thewhale.cc/supporters">
<button class="xl:button-bevel xl:button-bevel-suggest bg-teal hover:bg-teal-dark text-white font-bold py-2 px-4">Become supporter</button>
</form>
<form class="mb-4 text-center xl:text-left" action="https://thewhale.cc/suggest">
<button class="xl:button-bevel xl:button-bevel-suggest bg-teal hover:bg-teal-dark text-white font-bold py-2 px-4">Share your link</button>
</form>
<!--
<form class=" text-center xl:text-left" action="">
<button class="xl:button-bevel xl:button-bevel-sponsor bg-teal hover:bg-teal-dark text-white font-bold py-2 px-4">Support</button>
</form>
-->
</div>
</div>
</div>
<div class="grid-box grid-box-footer p-5 mt-8">
<footer>
<div id="menu-footer-mobile" class="menu-footer xl:hidden block xl:mt-6 p-5">
<nav>
<ul class="flex list-reset justify-center">
<li class="mx-2">
<a class="no-underline text-blue hover:text-blue-darker text-sm" href="https://thewhale.cc">Home</a>
</li>
<li class="mx-2">
<a class="no-underline text-sm text-blue hover:text-blue-darker" href="https://thewhale.cc/about">About</a>
</li>
</ul>
</nav>
</div>
<nav>
<ul class="flex justify-center menu-footer w-full list-reset">
<li class="mx-2">
<a class="no-underline text-sm text-blue hover:text-blue-darker" href="https://thewhale.cc/mastodon">Mastodon</a>
</li>
<li class="mx-2">
<a class="no-underline text-blue hover:text-blue-darker text-sm" href="https://thewhale.cc/legal">Legal</a>
</li>
<li class="mx-2">
<a class="no-underline text-blue hover:text-blue-darker text-sm" href="https://thewhale.cc/privacy">Privacy</a>
</li>
</ul>
</nav>
</footer>
</div>
</div>
</body></html>