New Aug 9, 2024

Issue #577 (CSS/HTML, AI Tools, JS Lib Plugins)

Multi Author Blogs All from Web Tools Weekly View Issue #577 (CSS/HTML, AI Tools, JS Lib Plugins) on webtoolsweekly.com


<!--[if mso | IE]>

Advertisement

Master Dev Skills at Visual Studio Live!
Join us at Visual Studio Live!, part of the groundbreaking Live! 360 Orlando Tech Con – a unique 6-in-1 conference experience. Choose from 200+ sessions to create your custom learning experience focused on Microsoft's developer tools and technologies.

Visual Studio Live!

Dive deep into .NET, Azure, AI integration, web development, mobile apps, & more. Our expert speakers will guide you through hands-on labs and in-depth sessions, helping you sharpen your skills and stay ahead in the rapidly evolving world of development. Use code WEBTOOLS for $900 off standard pricing and invest in your professional growth!

Register Now & Save $900 →

<!--[if mso | IE]>

 

CSS and HTML Tools

Batman-Comic.CSS — Here's something different and niche: A utility-class library that allows to easily create Batman and Robin comics, with CSS classes that define the character and his facial expressions.

Slab — A programmable markup language, similar to solutions like Pug, that simplifies the creation of HTML, combining concise notation with standard programming constructs to create reusable web content more efficiently.

TailwindMerge for Laravel — A PHP/Laravel plugin that allows you to merge multiple Tailwind classes and automatically resolves conflicts by removing classes conflicting with a class defined later.

Tailwind Color Palette — A simple one-page reference displaying all the colors available in Tailwind's default config (242 in all), with an option to switch format to hex, RGB, HSL, or Tailwind classes.

Master Dev Skills at Visual Studio Live! — Join top developers for 200+ sessions and 10+ hands-on labs at Live! 360 this November in Orlando. Customize your learning experience in .NET, AI, Cloud Computing, and more!   SPONSORED 

Sendune Designer — An open-source, drag-and-drop HTML email editor with responsive live preview, email testing, and media uploads.

CSS Gradient Generator — A nicely designed interactive CSS gradient generator that allows you to easily add/remove color stops and choose a radial or linear gradient.

CSS Gradient Generator

CSS Grid Generator — A simple interactive tool to help developers create custom CSS grid layouts using the CSS Grid specification, with ability to define columns, rows, gutter size, and cell spanning across rows/columns.

Mastodon Embed Timeline — A responsive, accessible, and customizable script and stylesheet to allow you to embed a timeline from the Mastodon social network (Twitter/X alternative).

The Good Colors — A tool that creates a color palette using OKLCH, which ensures consistent perceptual changes in lightness and chroma, and supports wide gamut displays and checks contrast ratios using APCA.
 

ChatGPT and AI Tools

Meta AI — Facebook's version of ChatGPT, allowing you to ask the AI anything, save conversations, generate images, and more.

OpenSearch GPT — A personalized AI search engine that learns about you and your interests as you browse the web, like a Perplexity or SearchGPT clone, but for you.

DOM to Semantic Markdown — A JS/TS library that converts HTML DOM to a semantic Markdown format optimized for use with LLMs.

HackerPulse – The Ultimate Dev Profile — Bring together your GitHub, Stack Overflow, and LinkedIn profiles into a single HackerPulse dev profile. Perfect for job applications and networking, HackerPulse gives a complete picture of your skills and projects, all in one place.   SPONSORED 

Skeleton Fingers — A web app for AI-powered audio transcriptions via URL, file upload, or direct via voice/microphone.

screenshot-to-code — A simple but ambitious tool to convert screenshots, mockups and Figma designs into clean, functional code using AI.

screenshot-to-code

KitOps — An open-source MLOps tool that packages and versions your AI model, datasets, code, and configuration into a ModelKit that data scientists and developers can use with their preferred tools.

ai-utils — A developer toolkit that makes it simple to build with the Workers AI platform and includes support for embedded function calling.

Generista — A Figma plugin that helps create generative artwork with a simple, easy-to-use interface.

LLM Datasets — A GitHub repository that's a resource high-quality datasets, tools, and concepts for LLM fine-tuning.
<!--[if mso | IE]>

<!--[if mso | IE]>

Advertisement

<!--[if mso | IE]>

Bytes: Everyone's Favorite JavaScript Newsletter
If you're a front-end developer who works regularly with JavaScript, you'll want to subscribe to Bytes. Every issue is packed with news, articles, tools, and coding tips covering just about everything going on in the JavaScript ecosystem.

Bytes Newsletter

I haven't missed an issue of Bytes in years and it's one of the primary ways that I'm able to keep up with the latest in front-end news and information. In addition to the top quality content, you'll get a laugh almost every week with the team's humorous take on the JavaScript industry.

Subscribe to Bytes Today →

<!--[if mso | IE]>


 

JavaScript Library Plugins

Tree.js — A procedural tree generator (that is, nature's trees, not like a chart) built with Three.js, with over 30 tunable parameters and support for exporting to .glb (a 3D model file format).

@sebastianwessel / quickjs — A TypeScript package to safely execute JavaScript and TypeScript code within a WebAssembly sandbox using the QuickJS engine.

Nano Stores Router — A tiny URL router for the Nano Stores state manager that's small, has good TypeScript support, and can be used with any framework or just vanilla JavaScript.

HackerPulse – The Ultimate Dev Profile — Bring together your GitHub, Stack Overflow, and LinkedIn profiles into a single HackerPulse dev profile. Perfect for job applications and networking, HackerPulse gives a complete picture of your skills and projects, all in one place.   SPONSORED 

Express-Ts-Auth-Service — A pre-built authentication server that uses JSON Web Tokens (JWT) for authentication, built using Express.js, TypeScript, and MySQL.

LayerChart — A large collection of visualization components and utilities for Svelte, built on the Layer Cake framework.

LayerChart

threejs-procedural-planets — A procedural 3D planet generator built with Three.js, with lots of interactive options to customize the planet that's generated.

zustand-slices — A utility that allows you to use 'slice patterns' with Zustand, the minimalist JavaScript state library.

Middle Class Text Editor — An appropriately named Svelte component that implements limited rich text behaviour for Slack-style mentions in a plain text area.

ThreePipe — A 3D viewer framework built on top of Three.js in TypeScript with a focus on rendering quality, modularity, and extensibility.

Commercial Apps & Classifieds

These are commercial apps, affiliate links, PPC ads, and paid classifieds. Buy a Classified here.

Otto Engineer – An AI sidekick that tests its own code and iterates until it works.

The Aurorean – Discover essential news, research, and beauty in STEM every Wednesday.   AD 

ExplainIt – A user-friendly tool to create an AI-powered chat for your documentation website.

PoopUp – A notifications and popup tool to help drive engagement and conversions.

Techpresso – Join 100,000+ free daily readers for the latest AI and tech news, tools, and insights.    AD 

Shootmail – A template-first mail platform with scheduling and analytics.

FridayGPT – An AI copilot for your Mac that gives you instant access to ChatGPT, voice-to-text, and more.
<!--[if mso | IE]>

An X Post for Thought

If you want some resources on learning AI technologies and how they work under the hood, you may want to check out some of the responses in this thread on that very subject.
 
An X Post for Thought
 

Send Me Your Tools!

Made something? Reply to this email or send links via Direct Message on X @LouisLazaris (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
 

Before I Go...

If you like music and coding, you'll enjoy Strudel REPL, a live coding platform to write dynamic music pieces in the browser. It's the JavaScript version of a similar tool written in Haskell.

Scroll to top