Installing MongoDB on macOS

The course I’m doing uses Cloud 9 (C9) as cloud-based IDE. I’ve basically ignored that side of things and done everything locally on my Mac as that feels more real world to me. Turns out this was a good decision as C9 has recently announced it’s shutting down. Anyway, at times this has made things more difficult though. A good example is when I need to follow instructions to get a particular part of the development environment setup. Because all the instructions are specific to C9 it means I more or less have to figure out how to do it myself on macOS.

This morning I had an example of this exact thing when I needed to install MongoDB. I’m finally at the point that I’m starting to work with a database (hallelujah!) and I needed to get things going on my Mac. Thankfully there’s Google and I quickly found this treehouse article that gave me some clear steps to follow.

Of course it’s never quite that easy. Different machines are set up in different ways, so a guide like this doesn’t always allow for edge cases. So here’s what worked for me:

  • Open terminal and use the command brew update to update Homebrew itself to the latest version
  • Now install MongoDB using brew install mongodb. This will install the latest version
  • Next we need to create a folder to house our MongoDB data files. Use the command sudo mkdir -p /data/db. The instructions I first followed didn’t include sudo and so didn’t work for me. Your milage may vary
  • We should now have a place for our data but we need to set the folder permissions using sudo chown -R `id -un` /data/db

That’s basically it, you should now have a functional install of MongoDB. Open up two terminal windows in the first start the server with the mongod command. In the second terminal run mongo to launch the mongo shell for accessing data.

Pastebot

The more time I spend coding the more time I find myself researching solutions to workflow problems I’ve never had before. Copy and paste is a good example of this.

Sharpening my coding skills I find myself copying and pasting a lot more than normal. Maybe a better way to say it is coping and pasting in specific ways a lot more. For example, when I’m writing CSS I tend to copy and paste a small set of different colour codes over and over. Another example would be copying lists of items from a document one at a time to populate a list in an HTML document.

I had never considered that there might be a better way of doing these things until I stumbled on Pastebot. Pastebot is like copying and pasting on steroids. At a basic level, it keeps a history of everything you copy and paste. Even this simple function makes it incredibly useful when coding. Need to paste that colour code you copied 30 mins ago? Bam there it is in your clipboard history.

Once you’ve got used to having clipboard history you’ll never go back to your old ways. As a developer though that’s not even the best part. Where Pastebot really shines is its filters. Want to copy of a list of items then paste them as an HTML list? Want to copy some text and pasted it wrapped it in <p> tags? Pastebot can take care of all of that for you.

Do yourself a favour and at the very least investigate a clipboard manager, and if you’re on a Mac make sure you try Pastebot. It really is worth your time.

on() click()

Today I learnt the different between the on(“click”) and click() methods in jQuery.

click() only adds listeners for existing elements, so it will completely ignore any dynamically added items. So in the example below only the <li> declared in the html file will be clickable. All of the new <li> elements added to the todo list won’t be clickable:

<!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></title>
  <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
    crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
</head>

<body>
  <div id="container">
    <h1>To-Do List</h1>
    <input type="text" name="" id="">
    <ul>
      <li><span>X</span> Go to potions class</li>
      <li><span>X</span> Buy a new broom</li>
      <li><span>X</span> Visit Hagrid</li>
    </ul>
  </div>
  <script type="text/javascript" src="assets/js/script.js" charset="utf-8"></script>
</body>

</html>
// check off specific todos by clicking
$( "li" ).click( function () {
  $( this ).toggleClass( "completed" );
} );

// click on x to delete todo item
$( "span" ).click( function ( event ) {
  $( this ).parent().fadeOut( 300, function () {
    $( this ).remove();
  } );
  event.stopPropagation();
} );

// add new item to todo list on keypress
$( "input[type='text']" ).keypress( function ( event ) {
  if ( event.which === 13 ) {
    var todoItem = $( this ).val();
    $( this ).val( "" );
    $( "ul" ).append( "<li><span>X</span> " + todoItem + "</li>" );
  }
} );

To get around this, instead of using click() we use on(“click”). Unlike click() on(“click”) will add listeners for all potential future elements on the page. This makes all the dynamic content, like the new items in our todo list app, work flawlessly. So the updated code would look like this:

// check off specific todos by clicking
$( "ul" ).on( "click", "li", function () {
  $( this ).toggleClass( "completed" );
} );

// click on x to delete todo item
$( "ul" ).on( "click", "span", function ( event ) {
  $( this ).parent().fadeOut( 300, function () {
    $( this ).remove();
  } );
  event.stopPropagation();
} );

// add new item to todo list on keypress
$( "input[type='text']" ).keypress( function ( event ) {
  if ( event.which === 13 ) {
    var todoItem = $( this ).val();
    $( this ).val( "" );
    $( "ul" ).append( "<li><span>X</span> " + todoItem + "</li>" );
  }
} );

jQuery has some excellent documentation. So if you need to drill into the specifics of any particular method (like on() or click()) be sure to RTFM.

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?

What is the state of JavaScript?

This JavaScript thing is really catching on eh? As the name suggests, “the state of JavaScript” survey gives a snapshot view of JavaScript development. What everyone (over 20,000 developers anyway) is using and enjoying or otherwise. It also gives a general sense of the direction things are going in. As with the StackOverflow survey, I found it well worth a read. It’s also beautifully presented.

Some of my main takeaways:

  • React is where it’s at from a front-end framework perspective
  • Express seems to be the stable go to back-end framework for Node.js
  • GraphQL appears to be the rising star of the data layer, but Redux is the player to beat
  • There seems to be a range of good options with testing, but the community seemed to enjoy Jest the most
  • Building desktop and mobile apps using JavaScript seem to be a two player game at present. Electron for desktop and React Native for mobile. This space does have some competition on the rise though. Flutter looks particularly interesting
  • VS Code dominates text editors by such a large margin, I really need to give it a second look. I haven’t seen anything that makes me think I’ll move from Atom but I’m open to the possibility

Have you read the survey? Did I miss anything you found particularly interesting?

Atom snippets

One of the things I love about modern text editors is code snippets. Coding tends to involve repetition, code snippets can really help cut down on needless typing.

I group all my code snippets by prefixing them with “my”. That way to view all my snippets I just start typing “my” and Atom shows all my snippets for the specific file type I’m currently working on.

Some simple examples I use quite often are:

myHTML – My own HTML boilerplate

<!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></title>
    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
  </head>

  <body>
  
  <script type="text/javascript" src="assets/js/script.js" charset="utf-8"></script>
  </body>

  </html>

myjQuery – Inserts jQuery using their CDN

<script src="https://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>

myFontAwesome – Inserts font awesome using their CDN

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

myLog – inserts a console.log() to help debug my JavaScript

console.log()

Getting all this working in Atom is a fairly easy affair. I found the below video by Hitesh Choudhary super useful.

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?