This post is part 52 of 52 in the series Programming by Stealth

In this first instalment back after our month-long hiatus we change tack completely, moving away from JavaScript altogether, and diving right back into HTML and CSS.

One of the golden rules of programming is not to waste your time needlessly re-inventing the wheel. This is the driving motivation behind the development of many open source libraries. The aim is to give programmers a leg up by providing pre-built foundations for them to build on. The best example of this approach we’ve seen so-far in this series is jQuery. Today, I’m going to introduce you to another one, Bootstrap.

Out of the box, all versions of HTML, even HTML 5, have some significant short-comings:

  • The default style is just plain ugly!
  • There are no simple tags for creating complex page layouts.
  • There are no simple tags for facilitating responsive design (same page displayed differently depending on screen resolution).
  • Some basic elements and behaviours common to many web pages are not provided.

Bootstap aims to solve all these shortcomings using a combination of mostly CSS combined with a little JavaScript.

Read more

Tagged with:

This post is part 51 of 52 in the series Programming by Stealth

This instalment will be the last before we go on hiatus for a few weeks while Allison goes off exploring Europe. When Allison comes back we’ll be changing gears and switching for focusing on JavaScript to focusing on HTML and CSS. We’ll learn about the free and open source Bootstrap 4 CSS library. This library provides many useful features, but we’ll start simple. Firstly, the library providers modern and elegant default styles for all the HTML elements we already know and love. It also provides a handful of simple CSS classes for defining page layouts (columns, rows, that kind of thing), and thirdly, it provides simple CSS classes for creating so-called responsive web pages, i.e. pages who’s layout changes automatically depending on screen size.

As this is the last instalment before the hiatus we’ll use it to wrap up our work on the Cellular Automata prototypes. We’ll start with a sample solution to the challenge from the previous instalment, and finish with a worked example where we use our prototypes to create three distinct CAs.

The final code for the worked example is included in this instalment’s ZIP file which you can download here.

Read more

Tagged with:

This post is part 50 of 52 in the series Programming by Stealth

In this very special 50th instalment I share my screen with Allison and we build up a simple web app together. We start with the scariest thing of all, a blank screen, and take it from there.

The web app we build up together is an object visualiser. Our simple web app consists of a text area into which we can enter JavaScript code to define an object, a <div> into which we will render a representation of the object, and a button to trigger the rendering.

Using a Screen Reader? click here.

Just about everything we use in this little exercise is revision, with one exception — we meet JavaScript’s eval() function for the first time. The eval() function takes as an argument a string, and executes it as JavaScript code. For more details, see the MDN documentation.

You can download the final code here.

Tagged with:

This post is part 49 of 52 in the series Programming by Stealth

In this instalment we’re going to continue to consolidate our understanding of JavaScript classes by improving the Cellular Automaton classes we built together in previous instalments. This time we’ll make a start on improving how the classes represent and deal with cell states. The challenge will be to finish the task.

We’ll also take some time to revise the basics of JavaScript objects.

The ZIP file for this instalment contains my sample solution to the previous challenge.

Read more

Tagged with:

This post is part 48 of 52 in the series Programming by Stealth

I had initially planned to return to our Cellular Automata classes and Conway’s Game of Life for this instalment, but based on some listener feedback I’ve decided to delay that by at least one instalment and dedicate this entire instalment to a closer look at just two JavaScript keywords – this and static instead. The two are more closely related that you might think.

The ZIP file for this instalment contains my sample solution to the challenge set at the end of the previous instalment, the starting point for the next challenge, and a JavaScript file containing all the example code snippets that appear in this instalment.

Read more

Tagged with:

This post is part 47 of 52 in the series Programming by Stealth

In this instalment we’ll wrap up our look at new features added to JavaScript with the release of ES6. We haven’t come even close to looking at all the new features brought by ES6, instead, we’ve just looked at a curated selection of some of the most useful new features.

Thanks to the power of the new class syntax introduced as part of ES6, we can now learn about two really important object oriented concepts which I had previously been avoiding because of how horrible the old syntax was. What we’ll be looking at are the very closely related concepts of inheritance and polymorphism.

To illustrate the concepts, and to lay the ground work for this instalment’s challenge, we’ll be making our way through a worked example. You can find the code in this instalment’s ZIP file, which you can download here.

Read more

Tagged with:

This post is part 46 of 52 in the series Programming by Stealth

We’ll start this instalment by having a look at my sample solutions to the previous two instalments, and then we’ll move on to looking at three ES6 features, two of which are extremely significant. We’ll start by addressing an accidental oversight from the previous instalment when we looked at arrays. I had intended to cover the so-called spread operator together with Array.from() and the for...of loop, but it slipped mind. Once we’ve dealt with my little oversight we’ll introduce an entirely new type of function that removes the need for the const self = this kludge for callbacks. So-called arrow functions greatly simplify the use of callback in JavaScript, and in modern JavaScript, callbacks are everywhere!

Finally, we’ll make a start on my personal favourite new feature in ES6 — classes. This major change brings JavaScript into line with the other C-style languages, and, more importantly, into line with how most programmers are used to working. This takes JavaScript objects from weird esoteric things only those initiated into the JS cult can understand at a glance to intuitively understandable constructs. For those of you for whom JavaScript is your first language, classes will be nice, but for those of you coming to JavaScript form other languages, classes will be a blessed relief!

We’ll only be covering the basics of the class keyword in this instalment. In the next instalment we’ll take things up a notch when we finally explore the concept of polymorphism, the heart and soul of object oriented programming.

Read more

Tagged with:

This post is part 45 of 52 in the series Programming by Stealth

We’ll start this instalment be re-visting the question of when to use let and when to use const for variable declarations. My initial advice was to default to using let, but based on some great feedback from the the community, I’ve changed my mind, and will be defaulting to const going forward. I’ll explain why I changed my mind.

Next we’ll have a quick look at my sample solution to the challenge set at the end of the previous instalment, before moving on to some new material. Specifically, we’ll look at some of the ways in which ES6 has improved arrays and strings.

Read more

Tagged with:

This post is part 44 of 52 in the series Programming by Stealth

In the previous instalment we started our exploration of the new features ES6 brought to JavaScript with a look at block scoped variables. We learned that var will continue to work as it always has, defining function-scoped variables, but that we can now use let and const to define block-spoped variables and constants.

We’ll continue our exploration of ES6 today by looking at how function arguments have been improved, and learning about a new type of loop designed to make looping over object properties easier.

There is no ZIP file for this instalment, instead, I’ve published my solution to the challenge from the previous instalment (which is also the starting point for the next challenge) as a tagged release on GitHub. You can download it using the big green button labeled Clone or Download.

Read more

Tagged with:

Note: This is an improved version of my original solution to this problem.

As a reminder, the problem to be solved is to have screenshots automatically appear in Yoink as they are taken. Again, as a reminder, on macOS, screenshots are saved to the desktop as files with names of the form Screen Shot YYYY-MM-DD at HH.MM.SS.png, e.g. Screen Shot 2017-11-22 at 22.30.10.png. And one final reminder — Hazel is an app that watches the filesystem for events, and executes actions in response. Hazel rules are added to folders.

My original solution was to add a Hazel rule to the desktop folder with the condition Name starts with Screen Shot and a single Shell script action which used the open terminal command to send the screenshot to Yoink. The good people at Hazel replied to my tweet about the original post with a suggestion: I think you can do the same thing without a script. Try using the “Open” action.

Unsurprisingly, the Hazel suggestion proved to be spot on.

Read more

Tagged with:

keep looking »