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

Selection

One thing I notice about jQuery is how it simplifies common tasks. A good example is something you do all the time with JavaScript, select DOM elements. In JavaScript selecting all li elements would look something like this:

document.querySelectorAll( "li" );

The same selection using jQuery is like this:

$("li")

At this stage of my learning, I can’t say I see the above as a major advantage. Yes, it’s shorter but you could argue it’s also less descriptive for the reader. Brevity isn’t always a net win in code. This is especially true when tools like Emmet and other text editor tricks auto-complete a lot of code. So it’s not 100% clear to me what the advantage is.

It will be interesting as my jQuery knowledge grows if my feelings toward it change. At this early stage, I can’t help feeling sceptical. Especially when I keep hearing about frameworks like Angular and React. I guess we will see.

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?

Categories
Dev JavaScript Projects

Hex

Just a quick post to say I’ve updated the colour game with a new mode, Hex colours. To enable different modes I’ve changed a little bit of the UI. So the difficulty is now a dropdown making room for a matching mode dropdown. The beauty of this is I can add other modes (CMYK for example) without to much UI fuss.

Screen shot of the new UI

To give this new model a try, just select Hex from that dropdown and the board will refresh. As always you can play the game and/or check out the code, which ever tickels your fancy.

Categories
Geekpulp

jQuery

What is jQuery?

jQuery is a JavaScript library designed to simplify front end web development. It is the most widely deployed JavaScript library by an insanely large margin.

Why use jQuery

There are quite a few reasons you’d want to use jQuery, or a library like it, in your project rather than vanilla JavaScript. Here are a few examples.

Ease of use

JavaScript can be a handful, jQuery can be far cleaner and more concise than the equivalent in vanilla JavaScript. Take a look at these two examples of a fade in effect:

JavaScript Fade In

function fadeIn(element) {
  element.style.opacity = 0;
  var last = +new Date();
  var tick = function() {
    element.style.opacity = +element.style.opacity + (new Date() - last) / 400;     
    last = +new Date();
    if (+element.style.opacity < 1) {
      (window.requestAnimationFrame && 
      requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }   
  };
  tick();
}
fadeIn(element);

jQuery Fade In

$(element).fadeIn();

Cross browser support

Cross-browser support is one of the most difficult things about web development. jQuery normalises this so you don’t have to worry about different browsers as much.

This reason becomes less true with time. However, If you need to support older browsers, particularly anything older than IE8 then you should seriously consider jQuery.

Lots of people use jQuery

It might seem like a silly reason to use something just because loads of others are using it too. Having said that there are some real benefits to that thinking. In particular, there are plenty of resources available to help you learn and use jQuery. So if you need examples of how to do something you should have no problem finding them.

Even if you’re already a skilled developer, the practice of coding is continuous learning. So it’s always good to have a strong community around the area in which you work.

Why not use jQuery?

Based on the above you’d think jQuery would be a no brainer, and in many situations that’s true. However there are plenty of situations where it isn’t the best option, here’s why.

You can do everything without it

There is nothing in jQuery you can’t do in vanilla JavaScript. So depending on your project adding jQuery to the mix may actually be creating an unnecessary dependency. If you’re not using many of jQuery’s capabilities in your app, it pay’s to consider alternatives.

jQuery contains hundreds of methods that on many applications you’ll never use. There’s no sense in bundling all that in if you’re only using a small part of it.

People are moving away from jQuery

This one is a little contentious as depending on who you’re talking to. For a few years now there are signs that people may or may not be moving away from jQuery. Regardless, if new jQuery based projects are in decline there is such a huge existing usage of the library it still pays to learn it.

Categories
Dev JavaScript

Halfwa​​y

Just now I’ve put the finishing touches on “The Great RGB Colour Game” thereby passing the halfway point of my web dev bootcamp. You can take a look at the code on GitHub.

The “final” release of my version of the great RGB colour game.

So far the course has covered HTML, CSS, Bootstrap 3 and 4, and my personal favourite so far, JavaScript. JavaScript really seems to be where it’s at on the web these days. I wouldn’t have predicted that 10 years ago.

The great thing about it, is it’s one language that can do basically everything from the front end, to the server side, to the database. It means any investment in learning it gives incredible flexibility to the developer.

I’m really happy with my progress so far. It’s been really great getting my hands “back on the tools” so to speak. Next up is jQuery, which I have used a little bit before. Now that I have a better grounding in vanilla JavaScript I think I’ll have a much better foundation this time around.

Onward to glory!

Categories
Dev Projects

RGB Colour Game UI update

Tonight I got a bit of time to work on a new version of RGB colour game. This time I focused mostly on UI improvements so the game looks a little nicer than the first release. I’m particularly fond of the subtle CSS transition when you click on an incorrect colour. Little touches like this are what make a UI a bit loveable.

I’ve updated the code on both the GitHub repo and the live app site, so take a look. As always, if you have a feature request, a bug to report, or you’d like to contribute some code, you’re always welcome.

Categories
Dev Projects

I made a thing – Colour Game

I made another thing in JavaScript as part of the course I’m doing. This time it’s a simple colour picker game. The code is still very rough but the app is effectivly working. If you want to see it in action you can play the current version.

The idea of the game is the player is presented with up to six coloured squares and an RGB value. They player then has to pick the square that matches the RGB value. There’s an easy (3 colours) and hard (6 colours) mode too, so you can vary the challenge of the game.

If you’re interested in the code (which is currently terrible) or you’d like to report a bug, take a look at the projects GitHub page.

Categories
Dev Process

We’ve all got issues

Since I’ve been learning JavaScript I’ve been making an effort to do things as if I was working with others. The idea being that any project of meaning is very likely a collaborative one.

To my mind understanding how to effectively work with others on a coding project is as important as the coding itself. Also understanding how people work is always good when managing people is part of your professional life.

To that end, since I’ve recently created an “app” and put it on GitHub, the obvious next step was to record any issues with the app. So far there are three, but I suspect there are plenty more.

  1. The interface needs styling
  2. What constitutes victory isn’t clear
  3. Max score change doesn’t affect victory formatting

Over time I aim to chip away at these and any other reported issues. Of course being open-source, it’s entirely possible others may do the same. Which would no doubt teach me something too…

Categories
Dev Projects

I made a thing – Score keeper

I’ve been doing a web development course for a few months and today I made my first thing that actually does something. Nothing amazing mind you, but it’s a start.

Do you ever have the need to keep score in a best 2 out of 3 kind of way? Me neither, but here’s a web app that does it regardless  🙂

At some stage, I’ll pop it on a web server and make it live for anyone to use. For now, if you’re interested in the code, take a look at the GitHub repo or you can download it directly.

Update: The app’s now live. Give it a try.