Categories
Dev Process Tools Udemy

Coding on a plane… on an iPad

The project

In my ongoing efforts to up my development game, I’m currently working on learning how to create an app that has user authentication. Adding authentication to the web app is completely new to me and as always I’m time-constrained. So when I found myself in a plane on the runway for over an hour thanks to a mechanical issue I thought why not try and get some study done on my iPad.

I had previously downloaded all my courses content on the Udemy iPad app. This was some luck on my part as streaming video content over a 4G data connection would quickly blow through my data cap which wouldn’t be ideal. I also had a bunch of dev apps I’d downloaded ages ago but hardly ever used.

The setup

I wasn’t sure how much I would really be able to do given I had a set of tools that I guess you’d call “non-traditional” from a web development perspective. Here’s what I used:

  • iPad Pro 10.5 – This continues to be a great machine for me. The screen size gives me a lot of flexibility without the bulk of the 12.7. It does have its limitations of course but increasingly iPad is filling more and more of my needs
  • iPhone 6s – My iPad doesn’t have LTE so I used my phone as a hotspot to connect to the internet
  • Textastic – While of course, I wish I had a text editor with all of the power of a desktop app, Textastic is the best I’ve found so far on iOS. The code highlighting is nice, it comes with a range of themes and custom fonts and works seamlessly with my iOS GitHub client of choice, Working Copy
  • Working Copy – This is one of those apps that constantly amazes me. It feels like this is an application that just shouldn’t be able to work on iOS but somehow it does. I had absolutely no issues connecting to my GitHub repos, downloading the latest build of the project I was working on, making changes in Textastic, then pushing those changes back to GitHub. Perfect!
  • Udemy – The work I was doing was part of the Udemy course I’ve been working through and thankfully the app supports downloading the course content to the device.

What works well

The fact this was possible at all feels sort of amazing. For the most part, the applications I used (listed above) did a great job at the basics and in some cases were far more. I think the thing that really stood out to me most was how the single view full-screen apps made me less likely to switch between apps and, as a result, help me focus on what I was doing more. That focus altered my workflow quite a bit. I’m not sure it was better or worse, but it was certainly different. Thinking about it I think I was far more likely to stay in my text editor and write code from my own mind rather than relying on the content of another window.

I also think the lack of some of the power features of a desktop text editor meant I was paying more attention to everything I typed. Not having the code editor automatically format my text for example really made me pay attention to how I was laying out my code because I knew it wouldn’t be reformatted on save. It will be interesting to see the differences between my handwritten code and what my normal beautified code looks like.

What could be better

Screen real-estate – Whenever you’re doing web development you need a few windows open at a time. You really can’t have too much screen real estate in this sort of work so a 10.5-inch screen is always going to be tight. Having said that it wasn’t horrible either.

Testing – The iPad doesn’t have a terminal nor can it run a node or mongo server so I wasn’t able to test my code. While it’s not a big deal given I was just following a tutorial I wouldn’t want to spend to much time working on something without being able to see the results of my efforts. That would run the risk of building issues on top of issues and it might lead to a lot of wasted effort. I could have used Panics excellent Prompt but the app I’m working on isn’t running on anything other than my local dev environment on my Mac. Sorting that from my iPad was more effort than I was prepared to make, although it probably could be done.

Textastic – I like the look and feel of Textastic but compared to my normal desktop setup it feels a li bit like coding in the dark. These may be features I’m oblivious to but I couldn’t see any form on code completion, code beautifying, or much beyond code highlighting. Not a deal-breaker of course but it’s another little thing that makes you less productive.

Udemy app doesn’t support split-screen – This really means a lot of switching back and forth between apps. Picture in the picture did work but because of the screen size, it made the screencast unreadable so that was of limited value.

I’m really interested to see how iOS continues to evolve as a part of my development workflow. With Apple splitting iPad off into its own OS (iPadOS) it’s difficult to imagine a future in which the iPad doesn’t become an even more capable development machine. With the increasing levels of support for external displays, full-blown safari support and other extended capabilities it’s not impossible future iPads might become fully capable dev environment. At least in some use cases.

The thing I’d like the most that would make the biggest difference is a terminal app. It’s a bit of a pipe dream as I can’t see Apple going that way, but I can dream, right?

Categories
Dev Process Tools

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.

Categories
Dev Process Tools

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.

Categories
Dev JavaScript Tools

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.

Categories
Dev JavaScript Tools

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?

Categories
Dev Geekpulp JavaScript Tools

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?

Categories
Dev Tools

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.

Categories
Dev JavaScript Tools

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?