DEV Community: DX Knight

The Best VSCode Git Extension Pack

DX Knight — Sun, 28 May 2023 14:10:16 +0000

It Automatically set the best configurations of these extensions for you and it has 2 commands for manually activate/deactivate.

Features:

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more
Story mode Browsing history and files in any git repository
Conventional Commits for VSCode.
Checkpoints - Checkpoints(using ctrl+alt+s) used in between commits for keeping a local short-term history of work in progress files, like bookmarks in you undo-stack.

Hope to be useful for you. Please support us with GitHub star, LinkedIn ❤️

Visual Studio Code marketplace

GitHub

To see other developer experienced based extensions:

https://marketplace.visualstudio.com/publishers/SeyyedKhandon

The Best VSCode Frontend Extension Pack

DX Knight — Fri, 19 May 2023 07:16:42 +0000

It Automatically set the best configurations of these extensions for you and it has 2 commands for manually activate/deactivate.

Features:

Prettier
HTMLHint
HTML CSS Support
Auto Rename Tag
Color Highlight
Color Info
Unused CSS Classes
CSS Navigation
Image preview
Font Preview
Svg Preview
Five Server (Maintained Fork of Live Server)
Pretty TypeScript Errors

Hope to be useful for you. Please support us with GitHub star, LinkedIn ❤️

Visual Studio Code marketplace

GitHub

To see other developer experienced based extensions:

https://marketplace.visualstudio.com/publishers/SeyyedKhandon

Fastest Way to Auto Generate Types for Typescript and Input validation

DX Knight — Sat, 22 Apr 2023 15:00:12 +0000

Short description

Writing types for API's especially giant JSON's are frustrating especially when it comes to input validation.

solution:

Just paste your json inside app.quicktype.io or it's vscode

Now you can paste that type into transform.tools/typescript-to-zod to generate the corresponding zod schema for input validation:

Note 🏅 For Practical step by step example check this 4min youtube video:

Video - Skip Writing types manually

Github Project

ZOD is Typescript for Runtime - Less code but more Reliable

DX Knight — Mon, 06 Mar 2023 07:13:49 +0000

Zod is a schema validator, it means you give your object to it and it checks that if it is exactly the same as the interface that you defined or not, and if it isn't, it gives you an error!

What does it mean? It means that you don't need to use if-elses anymore like before, e.g.

if(name=== null || name==="")
...
if(name.length>5 && name.length<10)
...
if(number && number !==0 || number >0 ...)

It does all this by itself only with the following command:

z.safeParse(formdata);

more examples:

IP check example

Introduction ~7min 👌

To get to know it better, watch this video from WebDevelopSimplified:

7min ZOD introduction

Learn it completely ~30 min 🤩✨

To learn it completely, and use it to save alot of time from yourself and also shipping reliable code watch this video

ZOD in 30 min

VSCode Pro for Frontend developers: 🎖️

ZPack

TailwindCSS from Zero to Production - Notes

DX Knight — Sun, 26 Feb 2023 09:19:50 +0000

Why Tailwindcss

In my opinion TailwindCSS is Typescript but for CSS world! It will eliminate or decrease major problems that I strongly recommend to read it's comparison to the other ways like BEM etc. from the original reference and it's the creator CSS Utility Classes and "Separation of Concerns"

Where To learn

Now you know why you should use it and how much it will help you especially when you are trying to develop a Design System for your company's project!

The best source that I've found, after reading a lot of articles, udemy and youtube etc. videos, is just again their youtube channel, there is a series(8episode - totally under 2h) of videos on their youtube, you can see it here:
TailwindCSS from Zero to Production

Here is the code for this tutorial

After this video, you can just go to it's document and like others, make the best and most use of his document, for example, to use a certain class or what...
https://tailwindcss.com/docs/installation

Notes on these series ✨🤩

I've just finished this series and during watching this series I took some notes, and I will share them to you here so you can use it too.
Notes

Practical Learning section

I strongly suggest to use or atleast read from FlowBite
which has alot of examples that are written with tailwindcss:

✨ Bonus - VSCode Pro for Frontend developers: 🎖️

ZPack