VS Code

Recent reading leads me to think my text editor of choice (Atom) might not be the best solution for my current needs. To that end, I’m downloading VS Code just to see what all the fuss is about.

The number one thing I keep hearing about VS Code is its performance. I’ve always found this to be quite a curious thing. Perhaps it’s just I haven’t done any meaningful coding in a while but I’ve always found development to be about 5% typing and 95% staring into the void. This might change as I work on bigger projects but for now, this is my view.

So given performance is a bit of a moot point (at least at this stage) for me I want to focus on other features of VS Code. This really is about two different things:

  1. Out of the box features, I can’t get in Atom. Stuff like IntelliSense and debugging features
  2. Recreating features I have set up in Atom like code beautifying, settings sync, Emmet, and code snippets and see if there’s any nuance

I suspect this will be a journey, but then again that really is the point. With a bit of luck, I’ll either reaffirm my choices with Atom or find a new favourite in VS Code. Another possibility is I just don’t have the development maturity yet to benefit from what VS Code offers, but I guess we will soon see.

Do you use VS Code or Atom? Is there anything you think I should keep my eye’s open for?

Survey says

Today I was reading the 2018 stack overflow developer survey and boy was it an interesting read. There are loads of insights into the current state of software development.

For example, JavaScript continues to grow in dominance. If you’re working on the web and you’re not learning JavaScript you need to start yesterday. It’s been clear for a few years now that JS is the direction the web development is going, but I don’t think I’d quite realised how much that was the case. 71.5% of all professional developers are now using it in some form. That’s huge!

Another surprise to me is the popularity of various text editors. VS Code has really risen to the top in a short space of time. To my horror Notepad++ (of all things) is the 3rd most popular app. Sublime text somehow trails behind it in 4th place and my beloved Atom is 8th!

With over 100,000 developers participating in the survey, it really is quite a rich resource. Did anything surprise you in the results?

Emmet!

Whatever your text editor of choice (I just can’t quit you Atom) there is a wide range of plugins to enhance its capabilities. One such plugin that I use constantly is Emmet.

Emmet can be used for a number of things, but where it really shines is speeding up my HTML production. Emmet uses a CSS like syntax to quickly produce common HTML code.

The most common situations I find myself using it is when I initially create an HTML document. To do this you just type “!” and hit tab. The result will be:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

</body>

</html>

Perhaps most useful of all is adding repetitive blocks of HTML like lists. Just type “ul>li.lego{Awesome}*10” then hit tab and you’ll get:

<ul>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
  <li class="lego">Awesome</li>
</ul>

Or you can get super fancy and nest all sorts of things. Give something like this a go. Type “div.awesome>(header>ul>li.item$*5>a{Awesome thing $})+footer>p{Awesome}” and hit tab. Boom you get:

<div class="awesome">
  <header>
    <ul>
      <li class="item1"><a href="">Awesome thing 1</a></li>
      <li class="item2"><a href="">Awesome thing 2</a></li>
      <li class="item3"><a href="">Awesome thing 3</a></li>
      <li class="item4"><a href="">Awesome thing 4</a></li>
      <li class="item5"><a href="">Awesome thing 5</a></li>
    </ul>
  </header>
  <footer>
    <p>Awesome</p>
  </footer>
</div>

As you can see, once you learn the basic structure, everything is awesome with Emmet.