FrontMatter a CMS editor for VS Code (first look)
Front Matter is a CMS that runs within Visual Studio Code/GitPod/... It gives you the power and control of a full-blown CMS while also providing you the flexibility and speed of the static site generator of your choice. Jump right into editing and creating content with Front Matter and be able to preview it straight in VS Code.
Creating, Testing, and Publishing React components with Vite
Recently I switched from create-react-app (CRA) for creating and publishing react apps and components to rolling my own build solution using Vite, Vitest, and Typescript.
Native HTML5 Modals (aka HTML Dialogs) are FUN!
Yeaaa!!! You heard me right native HTML5 Modals are finally here, available across all evergreen browsers and they are fun. Well actually its the new <dialog> element. While it does require a bit of javascript to work for events and the likes, most of the functionality you need to create a...
Automate boilerplate task/code with Hygen
While working on react components for a personal project I kept having to create the same files over and over. Why not automate the creation process, first thoughts were to go with plop.js but remembered that I had come across Hygen.js that seemed like and easier solution so I decided to give it a...
CodeStudio Extension Pack for VS Code (ver. 0.8.0)
CodeStudio is an extension pack for VSCODE that bundles several extensions (frontend) into one install. I created the extension for two reasons, the first to teach myself how to, the second, to scratch an itch that I had trying to figure out how to get VSCODE from installation to work ready in the...
JAM-STACKING shawnsandy.dev: 11ty, Vanilla JS, HTML, Netlify, Node/NPM
Before joining the 9-5 workforce, no matter where or what I was doing I always had a side project, whether it was a WordPress plugin, Laravel library, a CSS toolkit, or a VUE plugin. I was always exploring new things trying out the latest tech or prototyping some idea. But when you work in a...
Master to Main, renaming Github default branch. Making Sense of it?
GitHub, in a show of support and solidarity with the African community during the turmoil and unrest that rocked the US in response to the death of George Floyd and many others while in the custody of law enforcement. Announced that "The default branch for newly-created repositories is now...
Performance metrics; lighthouse scores and fixes for ShawnSandy.dev
The blog's official launch is getting closer, no exact launch date yet, but it's getting closer "can feel it in my bones". Most of the development work is done. I'm till tweaking things here and there, adding a couple of nice to have features, refining styles, etc,...
XD WEB-KIT
Publish your Adobe XD design systems packages to the Web. Setting up, managing, and publishing your style guide or design system has never been easier. Using Adobe XD, VS Code, and the DSP. KIT Designers Developers and Product owners can work together to build, publish and share brand guidelines...
Tip: Simple, dynamic 11ty class-names
When building dynamic websites, you will most likely find yourself working with template-driven pages controlled by a master layout(s). So it's standard practice for developers to generate dynamic CSS class-names for each page from template data, allowing them to quickly customize the look and feel...
AccessLint: quickly add dynamic accessibility testing to your development workflow
I consider accessibility testing an important part any Frontend development workflow so I'm constantly on the lookout for tools that can make the process easier. Recently I came across a lightweight JavaScript library that allows you to quickly add accessibility testing to any project in under a...
Tabler Icons: over 1250+ plus free vector icons for web design
If you are searching for a new set of font icons or SVG icons, or maybe you want to replace the popular FontAwesome, check out Tabler. It's a free icon set that comes with over 1250+ icons line style icons. Created by Michał Wolny and has an MIT license, check it out. You can find it by going to...
Cleaner, useful commits messages for teams with commitizen
A commit message is a short description of the changes you've made to a file added before committing the changes to your repository. Let's, chat about commit messages, what we use them for and why we as developers should improve how we write them. For the record, I have written(still do) some...
A decent(ish) built in clipboard manager for Windows10
I have been a loyal ditto user for quite some time its my goto for managing and my clipboard. Ditto is an extension to the standard windows clipboard. It saves each item placed on the clipboard allowing you access to any of those items at a later time. Ditto allows you to save...