Categories
Dev JavaScript

JSON

I’ve worked with JSON data before when I was learning Swift and iOS development. At the time I didn’t really know much of JavaScript or its object syntax. Back then, I made my version of a weather app callClima“. That app pulled down weather information based on your current location using JSON data from a third party API.

Having worked with JavaScript for the past few months JSON seems a lot more obvious now. This morning I made a simple IMDB like web app pulling data from http://omdbapi.com/. I still don’t know how to deploying these node.js apps to a server somewhere. As soon as I do I’ll update posts like this linking to my work.

It’s amazing to me how easy it is to get something quite functional up and running with node.js. A few NPM packages, access to a good source of data from a third party API and you’re away.

Even finding details on APIs for basically anything is really easy thanks to services like https://www.programmableweb.com/. It’s basically just a giant directory of anything and everything you might want to know about publically available APIs.

Learning all this kind of makes me feel like I’m discovering coding superpowers. It’s so easy it feels like cheating.

Categories
Dev Process

A battle for the ages

Spaces vs tabs is a hilarious holy war that doesn’t really matter but I do find amusing. Modern text editors normalise differences on a project anyway, but I do love these ideological battles. The video below covers it better than I ever could. Enjoy… btw I’m a spaces man 😉

Categories
Dev JavaScript Optimising Process

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.

Categories
Dev JavaScript

NPM and a Demon

So learning node.js has been really interesting so far, I’m quite taken by it. It’s great being able to transfer my JavaScript skills from frontend to backend. One of the things I’m enjoying most about it is NPM. By their own definition:

NPM is the world’s largest software registry. Open source developers from every continent use NPM to share and borrow packages, and many organizations use NPM to manage private development as well.

Docs.npmjs.com. (2019). About npm | npm Documentation. [online] Available at: https://docs.npmjs.com/about-npm/ [Accessed 22 Mar. 2019].

So what does all this mean? As a developer, you have super easy access to a vast collection of code packages that can be used in your own projects or processes. One such package that’s saved me a repetitive task is nodemon. Nodemon does the simple job of restarting node every time I save a code change.

To install a package like nodemon you simply use the command:

npm install -g nodemon

In this command, the “-g” installs nodemon globally. This means it will work in all node projects. To run it use the command “nodemon” and your node server will fire up. Then each time you save a change to your code, bam, the server restarts to reflect the code change.

NPM has just shy of a million packages. So, if you’re in need of something to support a project, npmjs.com should be your first destination.

Categories
Dev Process

The three stages of developer growth

Today I happened across a great Quora post by Andreas Blixt. In the post, Andreas outlines the three stages of developer growth:

The novice hacker
“This code sure is ugly and I don’t quite understand why it works, but here it is!”
A developer in this phase finds creative solutions to problems, they just happen to be copy/pasted from all over the internet.
The problem is that the code breaks whenever it needs to be changed or it encounters a new situation

The philosophizing abstracter
“This code works for now, but if I move this part into a factory, and create an interface for these methods, it’ll also support all these future cases I can think of!”
They’ve read all the articles on how to structure code. There’s a lot of patterns out there for object-oriented (or functional!) code. Their code has all sorts of useful interfaces, abstraction layers, factories, extension methods, data structures.
Things break down when the project needs to move in an unexpected direction and it turns out that implementing the change requires changing a lot of the codebase because there were a bit too many abstractions that ended up creating hidden dependencies across the code.

The wise hacker
“Move fast. Break things. Revise and fix. Get shit done.”
Finally, developers balance the concepts of hacking and abstracting. They write code that simply solves the problem at hand, then they take a step back and look for repetition that can be simplified. They know from experience that things always change unexpectedly and that you can’t always foresee what will or will not be useful in the future.

Blixt, A. (2015, October 22). What are the growth stages of a programmer? Retrieved March 20, 2019, from https://www.quora.com/What-are-the-growth-stages-of-a-programmer/answer/Andreas-Blixt

As someone basically just starting out, I find this perspective from a senior developer very reassuring. I can absolutely see this path before me. Already I find myself writing code to get things working, then revisiting the code to see how I can improve it.

I’m yet to have the knowledge to do a great job on the improvements, but I feel that is my workflow. Having these stages outlined actually impacts my pathway through them. As I develop more skills I’ll be mindful of when and where I should deploy them.

Categories
Dev Process Udacity Udemy

How much time should I spend a day learning to code?

This is the question I asked myself when I first started learning (well relearning really) to code a while back. Obviously I Googled this and found some really interesting answers, but generally speaking, the common wisdom is about 4 hours a day.

I call bullshit on this. In my experience (and your mileage may vary) you should code every day, but it really doesn’t matter how much. Sure, you’ll get to the destination faster if you’re able to put 4 hours a day, but that number is completely unrealistic for a good chunk of the population.

Personally, I have a full-time job, 2 young kids, and a wife. 4 hours a day is an absurd amount of free time for me each day to work on much of anything. So when I study something I work to a very simple philosophy. Do some study every day. That’s it. Change is all about momentum. You don’t have to stop sleeping to make a change, you just have to show up every day and do something.

Routine is key

My personal routine is to get out of bed early, normally around 5-5:30am. Then I do as much of my course work before the kids get up as possible. Normally I’d get around an hour or so done. Some days I might sleep in and only get 30 mins, but I still progress. To solidify my learning, in the evening I go over what I did in the morning and write up notes. Sometimes those notes turn into a blog post. In that way, I’m sort of doing double duty. Sharing what I’ve learnt and documented it for my own retention all in one.

The thing about learning anything over and above your already busy life is that you have to make it accessible or it won’t work. Lowering the barrier to just do something each day means I might only research something I learnt the day before or add some comments to code I wrote a week ago. It really doesn’t matter what it is, as long as I get started each day.

So if you’re wanting to study but don’t think you have the time? Explore study options that let you learn in small chunks and to your own deadlines. I’ve found both Udacity and Udemy great services for this sort of thing. You won’t get a formal qualification from these services, but if you’re just interested in the skills then does that really matter?

Categories
Dev JavaScript Projects

I made a thing: Aroha generator

So I made another thing. The only reason I’m really even talking about it is because what’s going on in Christchurch is so awful I can hardly bear it. Making new things (even simple things like this) is a good distraction.

So in an effort to cheer myself up I made a web thing that says Aroha (and basically anything else I choose) as many times as I ask it to. I did this in node.js, which I’ve never used before, so this is a good learning experience. I have no idea how to deploy anything in node yet, but once I learn I’ll put it up somewhere.

Obviously this is not something I expect to be used in anyway, but learning new things always puts my mind in a good place. It makes me think about the good things in life like change, growth and the new. Something we all need to be thinking more about, especially in dark times. I’m certainly not a perfect person, but I try hard to be a better one every day. We owe that to ourselves, we owe it to each other.

Aroha Generator in all its glory!

If you’re interested in this very random project, check it out on GitHub. If you feel like escaping for a bit then you’re welcome to add to it, or create your own, or help someone else to create one. Just remember to be kind to one another.

Aroha.

Categories
Dev JavaScript Optimising

Constantly letting down my variables

As it turns out I’ve been doing everything wrong. Well, maybe not everything, but at the very least I’ve been declaring variables incorrectly.

There are actually three different variable types in JavaScript, var, let, and const. I’ve been using var exclusively and it’s actually bad practice. So what’s the difference between each and which should I be using when?

const

Where at all possible you should use const. Unsurprisingly const is short for constant and without going into to much detail that means it’s something you know will not change. You won’t be able to use this all the time obviously because a lot of the time you need to vary the content of variables. It’s always good pratice to minimise mutability in your code and const is the ultimate example of that.

let

This is how most of your variables should be declared the majority of the time. The strength of let variables is their scope is limited to the block level. For example:

let numberOfPowers = 1;

if (numberOfPowers === 1) {
  let numberOfPowers = "1 more power than Batman"
  console.log(numberOfPowers);
}

console.log(numberOfPowers);

In this example we have two variables named the same thing, but because we are using let their scope is limited to different parts of the code so they don’t collide. So in the console, we’d see both “1” and “1 more power than Batman”.

var

This is the option you should use least often and that’s because of its scope. Unlike let, var has a very wide scope. This is either the function it’s inside of, or if it’s declared outside any function, global. Obviously, that’s not ideal because it creates a greater opportunity to have your variables collide, especially as your projects grow in size. So to revisit our example with var instead of let:

var numberOfPowers = 1;

if (numberOfPowers === 1) {
  var numberOfPowers = "1 more power than Batman"
  console.log(numberOfPowers);
}

console.log(numberOfPowers);

This time the console will only read 2x “1 more power than Batman”. This is because having a global scope means we are writing over a single global variable rather than creating two different variables with different scopes but the same name.

I can see when you’re learning why this concept might be more of an intermediate level concept. Scope can be a bit tricky to get your head around. At the early stages of learning it’s probably better to focus on core concepts rather than nuances like this, but as your skills grow I think this is an important practice to do with variable declaration.

Categories
Dev Process

Flow

Getting into a flow state is super helpful when you’re trying to get some coding done. Whenever I’m working on a course exercise or side project I find a few things in my daily routine really help focus my mind:

  1. Keeping my desk tidy – It seems silly but a cluttered desk is a cluttered mind for me. Keeping my workspace simple and functional really makes a difference.
  2. Meditation – I’ve dabbled with this for years, but this year I decided to make it a daily habit. I’m not perfect at it, but I’d say I manage to get 10 mins done in 9 out of 10 days. When I miss a day I notice it. I’m currently using Waking up with Sam Harris, which I’ve found very educational too.
  3. Music – Not all music is good for coding, but the right music makes a world of difference to me. I have a few sources I use to block out the world:
    1. Code Radio – Free Code Camp has a live streaming station via YouTube which is specifically for helping developers concentrate.
    2. White Noise – This isn’t technically music, but it’s just as effective at blocking out distraction.
    3. Spotify or Apple Music focus playlists – If you use a streaming service, there are loads of shared playlists for focus, concentration or study that do the job. I suggest using a paid service if you can afford it. Although I don’t come across a lot of ads in the free version of Spotify, they are frequent enough to interrupt my thinking.
  4. Changing location – Most of my best work happens in my home office, but some of my best work is done in a busy café. Sometimes when you’re having a hard time getting your head around a problem the best thing to do is take a break, change location and give it another go. There’s something about a change of scene that can make all the difference.
  5. Eat – If I’m not paying attention I don’t eat. If I don’t eat, I’m not effective at much of anything. I find removing choice helps me to stick to regular patterns of eating. Like with meditation I don’t always get this right but as a general rule, I eat basically the same thing each day at the same time. This makes sure I’m both fed and also taking regular breaks.

Do you have some flow state secrects I haven’t covered?

Categories
Dev JavaScript Optimising

How to write modern JS

So you’re learning JavaScript (JS), cool. Putting all this effort in, you’ll want to be learning the modern usage of the language right? Time to get strict.

“use strict” is something I recently stumbled across, and it seems like a really important thing to be using. So much so that I’m a bit surprised it hasn’t been mentioned in the course I’m doing. As it turns out, JS is full of legacy thinking. In an effort to keep new versions of the language compatible with older versions, much of this legacy thinking was/is retained. Obviously this limits JavaScripts ability to overcome its past and improve as time goes on.

Evidently, in 2009 a decision was made to start to modernise JS with the release of ECMAScript 5 (ES5). This meant breaking compatibility with older version of JS if you decided that was what you wanted to do. This is where “use strict” comes in. To enable this “modernisation” you include “use strict” at the top of your JS files like this:

"use strict";
// code below this will be implemented the modern way
...

Since it’s been 10 years since that decision was made, all modern browsers now support ES5. So unless you need to support browsers before the dawn of IE10 then you should be turning strict mode on for all of your JS development.

This of course begs the question, why? Well, aside from staying current with the language, there are also a number of practical benefits:

  1. Modern JS throws errors on things that where previously ignored. This helps you write better, more secure code
  2. It can improve the performance of your code, sometime significantly. Sometimes the code itself is identical and you just get a free performance boost, nice!
  3. It prevents some syntax being use that future version of the language are likely to use. AKA it future proofs your code

So from here on in, I’m going to be using strict mode exclusively and only avoid it when a situation presents itself that I can’t.

As always MDN is a good source of information on both strict and sloppy mode. Now go forth and write strict code!