Category: VS CODE

Final Result

Well, Yes, my own VSCODE with all my plugins etc… basically the same instance that runs on my computer on an Android or iOS device BROWSER ! I put this here at the beginning so that if this is not what you need, you don’t have to waste your time, but before you move on, think about it as an alternative since it works remotely too 😉 , if not, then move on… don’t waste your time here

What for

For my back pain, I want to be able to change my setting every few hours, and this enables me (With the help of a wireless mouse and keyboard” to use my android TV box, my ipad, and other screens around the house to keep working

Summary

So, I will get to the details, but in summary, you can install Visual Studio Code Server on the same machine that has your Visual Studio Code installed, then you open your VSCODE with a browser

It turned out that someone has already done this tutorial (Here), but i am keeping this post so that you can see the summary before you have to se the video

The official VSCODE extension for rust is called (rust-analyzer) by rust-lang.org

To install rust, All you need is the installer, you can get it from rustup.rs, it might fire up a visual studio installer for the builder if you are running windows…

So, to check that you have rust installed on your computer, You may want to run the following command

rustc --version

In my case, it responds with (rustc 1.77.0 (aedd173a2 2024-03-17))

To update rust, you will need to run the commadn

rustup update

If you want to create a new rust project you CD into a directory where you want the project to be, and issue the command

cargo new projectname

Now, you can open the projectname directory in VSCODE to start working on a project (Right click, open terminal, then run the command ” code . “) the dot means current directory

If at any time you want to update the dependancies in your project, you can simply issue the command

cargo update

from within the project directory, this should update the cargo.lock file etc….

To add libraries to cargo, visit crates.io and you can get the names of the libraries you can add to Cargo.toml

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