Neat little tricks
Tags: html, css, beginners, webdev
Published: 2022-11-23 19:07:34

I love a good shortcut. I mean, of course, it's the journey that matters and not the destination and all that, but sometimes you just want to get from A to B. 

The popularity of all kinds of life hacks (travel hack, fashion hack, cooking hacks etc.) proves that we all like to make our lives just a little bit easier and if so, what not apply that to front-end development? 

To that goal, for the last week and a half, I tried to learn not just what semantic HTML is, what's the difference between inline and block elements and how to push and pull to and from GitHub, but also how to use all those tools and perform all those actions more efficiently. 

Below are a few of the things I discovered. I suspect that for most they will be hardly groundbreaking, and one day I'll probably look back at this list and laugh at my own innocence, but as a beginner, I found all those tricks super useful. Maybe you will too.

## Change VCS appearance


Initially I found VSC highly intimidating, but I'm quickly discovering how versatile and flexible it is. One of the best ways to tame it was to change its appearance. A personalized theme can make reading and editing code easier. To do that, click file/preferences/settings/workbench/appearance and chose one of the themes available. I guess you can probably find more themes online, but I didn't have the need to try that out for myself yet.

---


## Install plugins


Did you know that you can add plugins to VSC?!? I had no idea! But since I learned that I can, I've tried and tested a bunch of them, and here are the ones that I decided to keep:

[Auto rename tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag) - a brilliant little plugin which renames the closing tag when you edit it's opening brother.

[Colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize) - It makes those cure little colour selectors in CSS better visible.

[CSS peak](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek) - lets you take a quick peak at a CSS CLASS or ID properties from the HTML file. (I'm probably using the wrong terminology here, but hey, I'm still learning!).

[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - spares you the need to refresh the page you're working on every time you make a change in the code.

[Code spell checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - pretty self-explanatory, isn't it?

---

 
## Use your TAB


TAB is quickly becoming my favourite keyboard key. In VSC it unleashes the magical powers of "autofill", meaning it helps you finish whatever you started writing. Here are some examples.

A few first letters of an HTML tag followed by a TAB press result in a beautiful, fresh pair of desired tags popping up on the screen. 

Press "." followed by whatever class name you need, and a pair of DIV tags with that class name assigned will be ready in no time. It works with ID's too, just replace "." with a "#".

---


## Use Command Palette 


To find it, right-click on your workbench, it's the last item on the menu (alternatively press Ctrl+shift+p). There are plenty of shortcuts to chose from. So far, the one I ended up using regularly is "Wrap with Abbreviation", which speeds up the process of wrapping stuff in tags. Just select whatever you want wrapped, click the shortcut, type in your tag (you can follow it up with a "." or a "#" to add class or ID) and magic happens.

---


## Quickly create multiple LI tags


Instead of adding your LI tags to your UL or OL list one by one, you can do it all in one go. Here's an example:

ul>li*5 will create a UL list with 5 LI tags. You can then quickly switch between the list's positions using your TAB (❤️) key.

---

 
## Use a screen reader


One of the first challenges during the bootcamp was code refactoring for accessibility. And one of the most useful tools which helped me complete this challenge was the Screen Reader Chrome extension. If was the best way to see (or rather, hear) where my project fell short of accessibility standards.

---

I hope using those tricks and shortcuts will become second nature to me over time, but for now I'll keep them on that list for future reference. In fact, I'll probably be adding more as I go along. 

I hope this also helps other aspiring developers out there. And if you know any other quality-of-life little hacks and tricks, feel free to share them in the comments.