Forem: Matthew Rebehn

9 VS Code Extensions for Web Development

Matthew Rebehn — Thu, 09 Jan 2020 19:43:45 +0000

I have been a professional Web Developer for about 3 years now. I am self-taught and have dabbled in Web technologies for much longer but I considered myself a professional when I started to sell, or provide my services for a fee. Being self-taught, it took a long time to learn as much as I thought I needed to know to provide my services for a fee. The whole impostor syndrome hard at work.

In my travels I have used many editors, with many many different extensions. From full-fledged IDE's to starting out on Notepad ++ and just a plain Windows Text editor. In the beginning I was so lost, starting my coding journey with C and Bucky Roberts, who was a GREAT instructor, the content was just way over my head. I finally bounced around with a few different languages and landed on HTML and CSS to really get something to show up on a page that I could look at outside of the Command Line. That is what had me hooked. Actually seeing a graphical representation of code on the screen. Even if it was just some markup and styling. Then I jumped into JavaScript and never looked back.

As I dive in, keep in mind, these are just a few of the extensions that I find useful in my day to day work. This is not an exhaustive list. In fact, I have over 20 extensions installed, some disabled, at any given time, however these I find I am using day to day and without them, I would be lost.

I will list the extensions, then I will go on to write a little about what each of them do, how I use them, and how they can be useful to Web Developers in general.

The list is not in any specific order.
My top 9 extensions for Visual Studio Code are:

Autoprefixer
Bracket Pair Colorizer 2
Bookmarks
Code Spell Checker
GitLens
ES7 React / Redux / GraphQL / React-Native Snippets
Live Server
Import Cost
Prettier

*Bonus - My Theme is Dark-Cipher, which is my own personal theme. I just recently published it, so check it out: VS Code Marketplace.

1 - Autoprefixer - I am sure many of you are familiar with what Autoprefixer does, but for those who are not, this tool helps you write CSS. More specifically... browser specific CSS. Autoprefixer parses your CSS and adds vendor specific prefixes to the CSS rules you have defined. For example if you wrote CSS for:

.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

You will still need to add in the specific vendor prefixes for all the different browsers. This could potentially take a lot of time looking them all up and figuring out what you need to include. In the end it would look something like this:

.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

Autoprefixer is the answer to this problem. It will do this work for you. The extension can also be set up to work with a specific project or an external Autoprefixer package. It can also be configured to run automatically using Grunt or Gulp. The easiest way to use it is, once it is installed, go to your CSS file, press F1 and when the drop-down appears, select the Autoprefixer option and it will add all the prefixes directly to your already written CSS right in VS code.

2 - Bracket Pair Colorizer 2 - This is the newest version of the Bracket Pair Colorizer extension in the Marketplace. There is an 'original' version but when you go to the original Bracket Pair Colorizer listing, it informs you: "Announcement: A new version is being developed at Bracket Pair Colorizer 2". This is the one I have switched to.

Bracket Pair Colorizer does exactly what the name implies. It allows matching brackets to be identified with colors; matching colors. You can even define what colors to use. This makes it very easy to see scope, in fact some of the options include choosing a border style to highlight active scope. You can also show active scope in the gutter which is how I currently have my settings.

As you can see in the screenshot, the brackets are in the gutter as well as a line connecting them on the page to make it easier. The brackets' color also matches. This is just the way I set it up and as I said, there are many different ways to do it. This makes reading and even working with the code so much easier since in just a glance, you can see where you are at.

3 - Bookmarks - This extension makes it very easy to navigate a large codebase. You can mark and un-mark positions in your code so you are able to navigate to and from whatever point you set up. Name them and see a list of all the bookmarks you set. It adds an icon to the side bar that when clicked, will show you all the bookmarks. I personally have a few websites from restaurants. They ask me to change their specials frequently, which I have found to be another great use case. I set a bookmark at the start of their specials in the code and that way, anytime I open the project I can go to the sidebar, see all the bookmarks, and navigate right to the spot where their weekly specials are and I change them without having to hunt through the entire index page looking for that spot.

The screenshot is actually from one of the restaurant projects, with the specials that need to be changed. As you can see there is an icon in my sidebar just for bookmarks, the bookmark is actually able to be given a name, and it shows up in the gutter as well. With a simple cmd/control + shift+ P, then start typing bookmarks, and all the options begin to show up.

4 - Code Spell Checker - I am, and always have been, awful at spelling. Sometimes it is so bad that even the spell checker has no suggestions and I have to manually look it up... Luckily for me, and loads of other like me, they make software for spelling. Software that will actually check what you have already written and see if all the words are spelled correctly. Not just in word documents either. This extension is specifically for code projects. In fact, the first line of their listing in the Marketplace is: "A basic spell checker that works well with camelCase code." I know that when I am building a website for a client, I do not want spelling mistakes in it. Especially when it is launched. How many times have you been looking at a website, and stumbled on a misspelled word? Or better yet, you get a website launched, and within a week you have multiple emails from the grammar police about a misspelling on your newly launched website. Embarrassing.

This extension takes care of all those spelling problems. I also really like that you can add custom dictionaries either globally or on a project level. So if you are building a website for an industry with some crazy words you can just add a project level .txt file and point your spell checker to that file. Words that are not in the dictionary and misspelled, will have a squiggly underline. The extension will make suggestions as to what the correct word should be. A list of misspellings will also show up in the Problems Console at the bottom of the editor. You can then see the entire list and click on them one by one to be brought directly to the word. You can enable and disable different file types and it can be installed in different languages.

5 - GitLens - This extensions allows you to "Supercharge the Git capabilities built into VS Code". It lets you visualize code authorship, navigate and explore Git repo's, go back through history, and much much more. Here is a small list from their marketplace listing:

Current Line Blame
Authorship Code Lens
Line History View
Side Bar Views
1. Repositories View
2. File History View
3. Line History View
4. Search Commits View
5. Compare View
Gutter Blame - on demand
Gutter Heatmap - on demand
Recent Changes - on demand
Many Powerful Commands
User-defined modes to toggle between settings
Much Much More!

This is all offered for free too!!! This extension is open-source and is always looking for any kind of support. If you use Git, you could benefit from this extension.

You can see my cursor is on line 172, which shows who made the last changes to that line of code. It was me, 8 months ago and it even includes the Git commit message. If you look at the bottom, you can see the Status Bar Blame. There is so much more to this extension, please check their website at GitLens to see all of what it has to offer.

6 - ES7 React / Redux / GraphQL / React-Native Snippets - I use this extension daily. It provides all those snippets we use over and over. For instance, if you start typing imr then hit tab, it will write import React from 'react'. How many times in a project do you actually write that out? I was doing it a lot!

The snippets extension offers a lot more than just imr. If you check the listing in the VS Code marketplace, there is a list of them. It has everything from 'Basic Methods' to 'React', and 'React Hooks', 'React Native', 'Redux', 'Prop Types', and much more. Simple and short, three to five letter abbreviations that when typed, will trigger useful snippets on tab. There is also a feature to search through the snippets by using cmd/ctr + shift + p then start typing ES7 and it will pop up.

7 - Live Server - A local development server that has live reload for static and dynamic pages which makes it a very useful tool. It can be used for all different types of files. I use it for my static HTML files. There are a few different ways to start it, but I usually just use the easiest. In VS code, if you go to the Explorer and just right click on an HTML file, an option will come up to open it using Live Server. You can configure what browser it automatically opens it in, and if you don't it will just open it in your default browser. Once it is open, live reload kicks in and you can then make changes to that file and it will be reflected in the browser. When it is running, you can start and stop it in the status bar at the bottom and it features a lot of other options and configurations. I have many projects that I built and still maintain that are not huge Node or Framework projects. Just plain HTML, CSS, and JS. Not even a package.json and this Live Server is perfect for them.

8 - Import Cost - Displays the size of the package you are importing at the end of the import statement.

This package was made by the people over at Wix. It is Open Source, and seems to have a pretty active community. Every time you create a component and import a package, it is going to tell you how big it is. I have noticed that some of the packages, and some local packages it will not pick up the size, but generally it gives an excellent idea or estimate of the package size coming in. It makes it easy to track bloat and the potential size of projects. This is important when building projects of any size.

9 - Prettier - The last extension on my list is a great extension called Prettier. This is a popular program and it can be used as a VS Code extension or it can be used in your individual programs with Yarn or NPM. It can also be used both ways and it can be coupled with ES Lint. Prettier is listed on their website as, "An opinionated code formatter". It helps make your code look pretty. It supports many different languages and integrates with just about all the editors out there. It makes it easy to collaborate on projects with multiple authors. Everyone has their own style of writing code. However, when you are working in a large code base you want all your committed code to conform to a specific style. In it's docs it describes Prettier's actions as, "It removes all original styling and ensures that all outputted code conforms to a consistent style."

You are able to define specific rules for your written code. It can then be integrated into your pipeline or even just on save. Once you make a .prettierrc file with all of your rules, you can apply them globally or on a project to project basis.

These are some of my favorite and most used extensions. If you have not yet tried Visual Studio Code, install it and give a try. You will not be sorry. If you are new to Web Development, be sure to check these extensions out and if you have been doing it for a while and are not using these... consider them too. VS Code has a vast array of different extensions and their extensions API is very easy to work with. If you have an idea for one, check out how easy it is to integrate.

AWS-CLI on Windows Subsystem Linux

Matthew Rebehn — Sun, 14 Jul 2019 15:13:10 +0000

Adding awscli to Windows Subsystem Linux

To start off, I am using Windows 10 OS which is updated to its most recent updates, I also have Windows Subsytem Linux, (WSL), installed. On WSL, I am using the Ubuntu flavor, version 18.04, though this should not have any impact on what we are about to do. I struggled for a while attempting to find the correct answer as to why I kept getting an error after installing the Amazon Web Services Command Line Interface, or awscli on WSL. The error I kept getting was:

Error Message Progression

When I first started using this machine as my primary developer machine, I came from Linux, which has a lot of tools installed by default that Windows does not. For instance, Python comes already installed and ready to use on Linux. I use Python for a variety of things as well as the Python package installer, pip, so when I started with this computer I installed them right away. Not sure if this makes a difference but I at least want to be able to duplicate my environment in case anyone else is struggling with this. After installing python, both versions, 2.X.X and 3.X.X, as well as pip, since they are two different programs, I made sure to do it right and add it to my 'path' or Windows environment variables so it can be found. After that, I installed NPM and a variety of other tools including the awscli, WSL, GIT, and a few more. After installing all of this through PowerShell I realized after poking around, that I could have a Linux 'environment' called Windows Subsystem Linux. Since Linux is what I was used to and felt most comfortable with, I set out to install WSL. I wanted to use WSL for all of the things I had just loaded on my machine through PowerShell, so I had to duplicate a lot of my work. I made sure python 2.X.X and 3.X.X were installed on WSL. Since WSL is similar to a virtual machine or a distro all to itself - or a 'subsystem' - I was not sure if I could share these tools between the two environments. I have set up dual boot machines as well as virtual machines before and the explanations I read made it sound like it favored these kinds of an environment. I installed pip, Node, NPM, GIT, and all the other stuff I was using at the time onto WSL. One of the programs I use is the awscli. This allows you to interact with AWS or Amazon Web Services. I use their S3 storage as well as CloudFront, and Route 53, and a few other services. Being able to interact with these services via CLI is imperative for me.

After installing the awscli to Ubuntu WSL, I continued to get the same error as shown in the screenshot above. No matter what I did I seemed to continue getting this error. The last thing the error says is: no such file or directory, so this is where I started. I traced the file location and confirmed there is actually such a file. Now I looked at the bad interpreter: portion of the error message. My first thought is what does this even mean! 'Bad interpreter - no such file' - WHAT? The file is there. I can see it is there. That is when I set in to Google. I got a lot of Mac related results and a few that referred to Windows. Attempting to decipher those results was difficult since there seemed to be so many different 'solutions' depending on all the different environment setups. As you can see from the screenshot I use ZSH as my shell of choice instead of Bash so this was throwing me off some too.

I was able to recognize a few patterns all the 'solutions' had in common and just started trying different things. The Windows file system displays its path to a file differently than Linux. On Windows the path is represented this way: C:\Users\Matth\AppData\Local and on Linux the path is represented /usr/bin/python. This was throwing things off and it could not find the file. As you can see from the screenshot, I tried just about every different combination trying to get it to find the file. Finally, it dawned on me that I had installed python on Windows as well as on WSL. Once I figured out which python instance it was attempting to use by issuing the which python command, it returned /usr/bin/python. That told me it was using the WSL installed version of python.

At this point I was able to trace the path back to C:\Users\Matth\AppData\Local\Programs\Python\Python37\Scripts\aws where the actual awscli file lived. The very first line, (see screenshot below), of the file starts with #!/mnt/c/Users/Matth/AppData/Local/Programs/Python/Python37/Scripts/aws. Just looking at this path I could tell this was the problem. I use Hyper for a terminal and in that terminal I have it set up to default to the zsh shell installed on WSL. This is why in the path there is the first '/mnt' and the rest is self explanatory. Once in the file I just kept changing the URL until I could get it to work correctly. After I figured out it was attempting to use the python installation from WSL /usr/bin/python I just used that for the URL on Line 1 of the awscli file and it worked immediately after that.

AWS Config File

This was a really convoluted way to get it to work. I am confident there are other ways to do this. In fact, there are probably more 'economical' ways to do this. You may be able to use the python installation from the host OS, being Windows, but this seemed to be the easiest way to get this done so I can continue to work.

Pretty URL's with AWS s3

Matthew Rebehn — Tue, 14 May 2019 20:05:57 +0000

Make your URL's pretty on Amazon S3

I host multiple websites on Amazon s3 Static site hosting. They offer a great product for an extremely reasonable price. They even offer a free tier, though there are some requirements. It is definitely worth checking out. There is a decent learning curve, but it is not impossible. I was able to figure it out as a newbie with a decent amount of searches and just reading their docs.

I set my first couple sites up using all of their services, with the exception of the domain, which I got from Namecheap. I used their S3 buckets, CloudFront, and Route 53. After setting my sites up, one of the problems I noticed was the URL's of the website had the .html on the end. Once my domain was set up, the homepage was the only page that did not have .html at the end. I wanted to get rid of this and so I set out on a mission to do so.

I started searching their docs, which are massive, and really don't respond to the words 'pretty url', so I set out with my search engine and came to a few excerpts on Stack Overflow on how to do this, but not really an in depth explanation. Now, the sites I am trying to clean the URL's for are business websites that I would rather not have go down while I am trying to do this. I was able to stitch together a few main points that the different excerpts had in common and figure it out. But since I was confused while doing it, I figured I would put this together for anyone else.

I am going to start with an already set up site. If you want to know how to set up the site please reference this article by Mike Tabor which I found to be the most helpful.

Once your site is set up, you have your bucket with all your files listed. When you initially set it up, you had to select an 'index document', which I set to 'index.html'. This does not change. My site was structured similar to this:

You can see all the files had the .html after their name. My 'index document' was index.html which again, I left as such. The first thing I did was went through all the other pages, under their 'Properties' tab and confirmed the metadata had them listed as 'text/html'. If it doesn't, you will need to set it:

After confirming that, I had to go to the code. The website I did this on was eight pages and I had to tediously go through every page and change every single 'href' to read <a href="/gallery">Gallery</a> leaving off the .html on every single link, instead of the original <a href="/gallery.html">Gallery</a>. I used the 'find and replace' tool in VS Code to do it:

I did this on every page, for every link, until all links, for any kind of internal navigation on my site were set up to the <a href="/gallery">Gallery</a> instead of the original way. This will break the navigation if you try to preview the site in a browser without it being hosted on AWS. So remember that if you are updating the site or working on it and previewing it in a browser. You will have to preview each page individually instead of clicking through the navigation.

Then, you will have to re-upload all the pages you changed. Once you upload everything, it will look as it originally did. Now on Amazon, in your website's bucket, go through all the pages and 'rename' the pages, leaving off the '.html'. It should now look something like this:

Once this was done I noticed upon internal navigation, that when you click from another page back to the homepage, it would show up as www.mysite.com/index.html. To fix this, I went ahead and uploaded a duplicate index.html page and changed the name to just 'index' so now it will internally navigate to www.mysite.com/index. Just note, when you upload the second index page, make sure to rename it to 'index1.html', or something different, prior to uploading, or it will just replace the 'index.html' page already in your bucket. Once uploaded, rename 'index1.html' to just 'index'. It should now look like this:

*Edit*
After this was up for a while I got a notification saying I had duplicate pages. So this trick with the index.html page did not work. So I changed tactics and all I did to get rid of that index.html, was back in the code, I changed all the links going to the index.html page, to the actual website https://example.com and left it as an external link. Everything else, I left the same, and it all works seamlessly.

Once this is done, you are in the home stretch. If you just leave it the way it is, depending on how your cache is set up or how you have it hosted, it will eventually work correctly. My site is set up with Amazon's default cache policy, so it will only check back once every 24 hours. Since this was a business website, I had to see if this worked right away. I went ahead and created an invalidation for every single page that I changed so I would know if what I did broke the site, or worked correctly. To do that, head over to CloudFront, select the correct distribution, then along the top, select the tab labeled 'Invalidations'. Click on the blue button to 'Create Invalidation' and fill in all the pages you changed.

Once this is done invalidating all the pages, navigate to your site and check it out. Remember to clear your browsers cache so if you looked at the site recently it won't serve you a stale copy from the cache.

I hope this was helpful.