Design, Code, Performance, Usability, Accessibility

UX/UI Engineer, advocate, Dad, Husband, content creator and autodidact; crazy about design, performance, usability, accessibility, diversity, and inclusion.
codestudio-extension-pack-for-vs-code-(ver.-0.8.0)

CodeStudio Extension Pack for VS Code (ver. 0.8.0)

CodeStudio is an extension pack for VSCODE that bundles several extensions (frontend) developers into one install. I created this extension for two reasons, the first to teach myself how to, the second, to scratch an itch that I had trying to figure out the quickest to get VSCODE from install to work ready.

Continue Reading

fp-pages

FP pages

Lightweight, Fast, Accessible, Inclusive; A minimalist UI Toolkit for building responsive, performance driven, accessibility first websites

Continue Reading

frontend-engine

FrontEnd Engine

UX, Ui, and Engineering -- news, articles, resources, guides and more, for powering the modern Frontend

Continue Reading

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. CRA provided an excellent start for creating basic react applications, but it lacked the flexibility I needed to customize...


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...


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...


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...