Express snippets

Since I’m playing with Express at the moment I’ve updated my collection of snippets to include a few things I seem to be doing regularly:

Express setup

I use the shortcut “myExpressSetup” to kick off all my new Express projects. It has basically all the parts I need to get the project underway, and means I dont have to remeber each bit. This is more or less the Express equivalent of the HTML boilerplate I’ve mentioned in the past.

  'Express Setup':
    'prefix': 'myExpressSetup'
    'body': """
    "use strict"

    var express = require( "express" );
    var app = express();
    var bodyParser = require( "body-parser" );

    app.use( bodyParser.urlencoded( {
      extended: true;
    } ) );

    app.set( "view engine", "ejs" );

    app.get( "/", function( request, response ) {
      response.render( "home" );
    } )

    $1

    app.get( "*", function( request, response ) {
      response.send( "404 page not found );
    } )

    // Tells express to listen for requests (Start server)

    app.listen( 3000, function() {
      console.log( "The server started on http://localhost:3000/" );
    } );
    """

Get route

Shocking no one, if there’s one thing I seem to be doing a lot it’s displaying content on an HTML page. Using the shortcut “myGetRoute” this one basically says if the URL fits this pattern take it and display it using the “project” template.

'Express Get':
    'prefix': 'myGetRoute'
    'body': """
    app.get( "/project/:thing", function( request, response ) {
      let thing = request.params.thing
      response.render( "project", {
        thingVar: thing
      } );
    } );
    """

So, for example, I could have a URL like geekpulp.co.nz/project/banana and have it populate the project templates H1 with “banana”. If the URL was then geekpulp.co.nz/project/apple it would populate the project template H1 with Apple. Obviously later in the course, I’ll start populating things from a database and this will all make a lot more sense.

Post route

This one’s all about collecting data from a form and adding it back to the page. Again this sort of thing will make a lot more sense when I’m actually posting the data to a database. At the moment if you refresh the page everything will just return to defaut values because nothing is being saved to the backend.

'Express Push':
    'prefix': 'myPushRoute'
    'body': """
    app.post( "/addteam", function( request, response ) {
      let newTeam = request.body.newTeam;
      teams.push( newTeam );
      response.redirect( "/teams" );
    } );
    """

These new snippets are certain to change in the next week or so as I expand to doing things that are actually useful. At this stage, a lot of this stuff is just code that facilities learning. Having said that, I find making snippets for repetitive tasks a good habit to form. Ultimately the whole point is being as efficient as possible.

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?

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.