System Font Stack
shorts |
Instead of loading custom fonts, you can easily use device defaults instead. This site has a list of what to set your CSS to if you want to start your designs with the fast loading build-in fonts for most devices.
Flexbox Patterns...FTW-For The Win
shorts |
All the cool kids love to tell you how great CSS Grid is, but Flexbox still has a lot of Mojo and is better for some things. This cool site has a number of prebuilt patterns for different layouts using Flexbox...Take that...CSS Gridsters.
MilkDown-Pluggable Markdown Editor
shorts |
Lightweight and powerful, I didn't think I would like this markdown editor, but it's pretty terrific. LaTex math equations, table support, copy and paste markdown, Collaboration and emoji support.
|
Hypercolor - Tailwind/CSS Color Gradients
shorts |
I can be a bit color challenged, so I appreciate a good site with inspiring gradients gives me the Tailwind or CSS code quickly. Great interface with lots of customization options.
Daisy UI - Component Library for Tailwind CSS
shorts |
Tailwind is really just an engine for building components, but it doesn't include any components of it's own. Daisy UI uses Tailwind CSS and it gives you a set of components to build sites quicker. It installs as a Tailwind CSS plugin so it's easy to add to your existing project. Think of it as the missing Bootstrap-style link to Tailwind CSS.
Tailwind Kit - UI Components for Tailwind CSS
shorts |
A beautiful UI component showcase for Tailwinds UI. It has a lot of smaller elements like buttons, forms, navigation and lists as well as larger templates for bigger things. Over 250 components and templates that are also React/Vue/Angular compatible.
Tailblocks - Free Tailwind CSS Component Code
shorts |
Tailwinds CSS is great, but it doesn't come with any built in components. A few industrious developers have been creating their own. This is a pretty good selection of ready to go components with everything from ecommerce, navigation, testimonials and blog elements you can copy and paste from. It also has an easy to use interface to copy and preview the blocks.
Notistack - React Compatible Notification Library
shorts |
This is a really nice library for building notifications with React with a lot of options. The best part is the way the examples section lets you choose the different options and it builds the code for you. I wish every demo worked like this.
JS Zip - Read, Write and Create Zip Files
shorts |
This JavaScript library gives you tools to read, write or create Zip files directly from JavaScript, which gives you access to content stored as zip files on your server, or the ability to quickly zip a group of files through your own projects. I'm putting that into my...might be useful at some point bucked.
Github CLI 2.0 - Now with Extensions support
shorts |
There's a new version of the Github CLI and this one provides an extensible framework that allows other developers to contribute content to the platform. The CLI is interesting in that you can use it to do a lot of stuff directly in Github. I like using it for creating issues directly from within a project. I can't wait to see what developers do with this.
Coming Soon: CSS Imports in JavaScript
shorts |
Microsoft and Google have struck an agreement that will bring easy CSS Imports through script tags. This has some performance improvements over the link attribute, which is the current way to load up a CSS file. They can be directly applied as import statements into existing JS files and is similar to the way JavaScript modules work.
Tailwind Buttons
shorts |
One of the hardest things to do in Tailwind CSS is figure out how to style a complex element like buttons. Here's a page with a ton of button styles that easily lets you copy the code for each one.
GistPad
shorts |
GistPad gives you all the goodness of GitHub Gists with directly from within Visual Studio Code. Create, fork, star, follow everything as if it was a local item.
Tabout VSCode Extension
shorts |
This Visual Studio Code extension changes how the tab works so that if you've just typed something within quotes or parenthesis or any other programming type code, the tab key...tabs out instead of adding a useless tab inside your code. Brilliantly simple.
HTML End Tag Labels
shorts |
If you've got a lot of DIVs in your HTML (and who doesn't), it's hard to tell which is which. This VSCode extension will show you the ID and/or Class of each div. Simple, but it can really help you identify when you're missing a closing DIV.
KidPix in JavaScript
shorts |
Wow. Someone redid KidPix (a very old Mac App) in JavaScript and yes, there's a GitHub repo if you want to play with the code. I coded an app using those KidPix sound way back when for my daughter that she loved called PhoebeSound. Ah...those were the days.
Wikimedia picks Vue.js
shorts |
This is pretty big news, Wikimedia Foundation picks Vue.js as their official JavaScript framework. Well, that was already my fave, so welcome aboard.
What's new in ES2022
shorts |
A fantastic write-up of what's coming in ES2022 with a bit of history and an explanation of what came before. Are you excited for the Class Fields addition?
JSON Blob Tester
shorts |
I often use JSON testers to quickly visualize the validity of my data. The thing I like about this one that it is open source, it comes with an interesting API and is easily forkable since it's a GitHub repo.