Category: VS CODE

Tools you will probably be using in your JavaScript journey, I will keep this list updated as I go. Some obvious tools like NPM and Yarn will be added along with the other obvious stuff, but I will be adding them once I have something usefull to point out about them.

1- A web browser

Web browser: On the market today, relevant to JavaScript development, there are 3 browsers, 1.1- Firefox, 1.2- Safari (And browsers based on it’s WebKit such as some browsers based on it), and everything else that are really all based on 1.3- google chrome (Yes, including both brave and MS edge).

I personally use Firefox, and for development purposes, I use “Firefox Browser Developer Edition“, I would probably make sure i have chrome installed, at least for cross browser compatibility, WebKit/Safari, I have never found a need for it, but it is there is you want to grab it

VS Code

Microsoft s super popular IDE, a great tool, itself written in JavaScript (Electron), but not so useful for JavaScript without a few good extensions, so here are a few extensions that you might need for Javascript development

• VS Code JavaScript (ES6) snippets by charalampos karypidis
  This extension provides shortcuts to insert code directly into your project
• ESLint by MidcroSoft
  Integrates ESLint JavaScript into VS Code. ESLint itself is a command line tool you run against your code to analyze it for potential problems, now, it is a VS Code plugin !
• DotENV by mikestead
  Do you use a lot of .env variables ? I already use this for Laravel development, but it is also good for JS development, this tool adds highlighting and more to environment

For website speed, I am considering tailwind, a CSS framework that acts more like a library than a framework.

I will be adding my notes here, and the links at the bottom.

Which is better, tailwind or bootstrap

Well, like i said above, you are comparing apples to oranges, while it is very easy to spot a bootstrap theme when you see one, tailwind is more like CSS extended, so you have elements that you can use in your design, but your design is yours 😉

Some of the cool tutorials I have found….

Traversy Media : Tailwind CSS Crash Course (30 minutes)
Traversy Media : Tailwind Crash Course | Project From Scratch (1:30)
Net Ninja – Tailwind CSS Tutorial

Development in TailWind CSS

All you need for developing in TailWind is your CSS editor (VS Code in this post), then you will need NodeJS, and NPM to generate the production CSS and minify it

I will create a few ultra simple files for you to learn the process,

• the HTML file: Where you add your HTYML
• The tailwindCSS file, from which the production CSS file is copied.
• The NPM config file and the tailwind config file WHICH YOU CAN SIMPLY COPY FROM HERE and modify if needed

I personally use Debian Linux, everything should be identical on Windows and Mac, I will assume you are using the command line on Linux, but if you open the command prompt on windows, it should work exactly the same way

The following is a list of plugins I have installed to help with Laravel Development, I will add to them as I go, I will also remove the ones i don’t think were worth it from the list as well

Plugin	What for	How to use	Publisher
Prettier	Very popular plugin to format your code so that it looks tidy	Do take a look at the plugin’s config to tweak it to your liking	Prettier
PHP IntelliSense	Advanced Autocomplete and Refactoring support for PHP		Felix Becker
PHP Intelephense	Cooler than PHP IntelliSense		Ben Mewburn
Laravel Extra Intellisense	Self explanatory name !
PHP Namespace Resolver	Import and expand PHP namespaces		Mehedi Hassan
laravel-blade	Laravel blade syntax highlighting		Christian Howe
Laravel Snippets			Winnie Lin
Laravel Blade Snippets	Laravel blade snippets and syntax highlight support		Winnie Lin
Laravel goto view	Quick jump to view !		codingyu
Better Align	Align code without selecting them first		wwm
Laravel Blade Wrapper	Speed up wrapping code with Blade directives	CTRL + SHIFT + T	lHunte
Laravel-goto-components	Takes you to Blade components <x-… with a click	CTRL + CLICK	naoray
DotENV	Syntax highlighting for .env files !		mikestead
Tailwind CSS Intellisense	If you use Tailwind (A css library), this plugin will do all the tailwind magick		Tailwind Labs