The Author – Bart Busschots
Creative Commons
Unless otherwise stated, the content on this site is licensed under Creative Commons Attribution, Noncommercial, No Derivative Works 3.0 License
Jun
1
PBS 79 of X — Introducing Javascript Promises
Filed Under Computers & Tech, Software Development on June 1, 2019 | 1 Comment
Finally, after much teasing, we get our first taste of JavaScript Promises! This will just be a taste though, Promises are simultaneously really simple and really counter-intuitive. In many ways teaching promises reminds me a lot if teaching recursion — there is a tipping point where the concept goes from infuriatingly mind-bending to obvious and logical. Getting to that tipping point can be quite the challenge though.
So, we’re going to take it slow with promises. They will provide us with a way out of callback hell, but that path to salvation is unlikely to be obvious to you by the end of this instalment. It will take one or two more instalments until we get that far. All I can ask is that you please trust, me, how ever bumpy the journey gets, the destination is worth the struggle!
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 595
May
18
PBS 78 of X — is.js & Bootstrap Popovers
Filed Under Computers & Tech, Software Development on May 18, 2019 | 2 Comments
For boring real-life reasons this instalment is a bit of an intermission. In the previous instalment we learned about so-called call-back hell, and were all set to learn how Javascript Promises would be our liberation, but that’s going to have to wait until next time. Promises are a very important concept, and I don’t want to rush them.
What we’re going to do in this instalment is focus entirely on my sample solution to the challenge set at the end of the previous instalment, which I’ve used as an opportunity to demonstrate two new tools to add to our programming tool belt — the micro-checking library is.js, and Bootstrap Popovers.
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 593
May
4
PBS 77 of X — More Callbacks & More AJAX
Filed Under Computers & Tech, Software Development on May 4, 2019 | Leave a Comment
My plans for this instalment were to quickly demonstrate so-called callback hell, and then move on to the solution, JavaScript Promises, but in light of some listener feedback I changed my plans a little. There was some confusion in the community about what callbacks really are, so, now seemed like an opportune moment to spend a little time re-familiarising ourselves with some callback basics. This sets things up for a bit of a teaser-ending because we’ll get as far as demonstrating callback hell, but not as far as using Promises to get back out of hell, that will have to wait until the following instalment!
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 592
Apr
20
PBS 76 of X — AJAX with jQuery
Filed Under Computers & Tech, Software Development on April 20, 2019 | 1 Comment
Having laid a very strong foundation in the previous instalment, we’re now ready to learn how to make HTTP requests with JavaScript using a technique known as AJAX.
We’ll start our journey into AJAX using more traditional JavaScript techniques, i.e. we’ll use callbacks to handle HTTP responses. As we’ll discover, this works very well for single AJAX requests, but the model really starts to get complicated when you have multiple inter-dependent requests. We won’t complicate things in this instalment though — we’ll start with just simple stand-alone requests this time.
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 590
Apr
6
PBS 75 of X — AJAX Intro
Filed Under Computers & Tech, Software Development on April 6, 2019 | 1 Comment
Having wrapped up our introduction to Mustache templates we’re going to spend the next few instalments learning about AJAX, a very powerful JavaScript technique for loading information from a given URL. In future instalments we’ll use this technique to load external templates and data for use with our Mustache templates.
AJAX is a mechanism for making a HTTP requests via JavaScript, so before we’re ready to learn about AJAX we need to take the time to learn about the HTTP protocol itself. Unless you understand the mechanics and the terminology of HTTP, AJAX-related documentation simply won’t make any sense.
Listen Along: CCATP Episode 589
May
19
PBS 35 of x – HTML Text Input | Introducing ‘Life’
Filed Under Computers & Tech, Software Development on May 19, 2017 | 3 Comments
We’ll start this instalment by rounding out our look at QUnit – first, by taking a quick look at my sample solution to the challenge from the previous instalment, and then by introducing a simple little feature that will make this instalment’s challenge more manageable.
Next, we’ll make a start on text input in HTML forms. This time we’ll focus purely on free-form text, and then in the next instalment we’ll move on to formatted sub-sets of text like numbers, email addresses and so on.
Finally, we’ll make a start on what will be an on-going project. The idea is to combine our understanding of HTML, CSS, JavaScript, jQuery, and QUnit to implement a zero-player with a really cool computer science back-story.
As usual, I’ve created a ZIP file with the files for this instalment, including a sample HTML page that demonstrates text input in action, and the files that make up the starting point for this instalment’s challenge which you can download here.
Apr
30
PBS 34 of x – More JS Testing with QUnit
Filed Under Computers & Tech, Software Development on April 30, 2017 | 3 Comments
In the previous instalment we had our first look at QUnit, an open source Unit testing framework for JavaScript by the jQuery project. In this instalment we’ll finish our exploration of QUnit with a look at a few more advanced QUnit features. We’ll be making regular use of QUnit in future JavaScript challenges.
Wrapping up our brief detour into testing a QUnit leaves us free to move back to HTML forms and more JavaScript practice in the next instalment. The aim is to slowly bring those two streams back together through a new multi-instalment project. Over the next few instalments we’ll be building up a web app that makes use of both web forms and JavaScript prototypes.
As usual, I’ve collected the code referenced in this instalment into a ZIP file which you can download here.
Dec
31
PBS 27 of x – JS Prototype Revision | HTML Forms
Filed Under Computers & Tech, Software Development on December 31, 2016 | 2 Comments
In this instalment we’ll make a start on a large topic which we have intentionally ignored until now – taking user input on the web. The way this is done is through HTML forms. It will take us a few instalments to learn all about them, so we’ll start with the basics in this instalment.
The code for the examples in this instalment has been collected into a single ZIP file which you can download here.
Dec
10
PBS 26 of x – HTML Data Attributes with jQuery
Filed Under Computers & Tech, Software Development on December 10, 2016 | 10 Comments
After our brief division in the previous instalment, it’s time to get back to learning new things. We’ll learn about data attributes – a mechanism for embedding data into HTML elements.
We’ll also revise what we learned about defining our own object prototypes to start including prototypes in our APIs.
Finally, as a practical worked example, we’ll build a better clock API for Allison’s website. Each Sunday she streams the live recording of her podcast from podfeet.com/live at 5pm at her house. To avoid timezone confusion, Allison would like a clock on that page that shows the current time at her house.
As usual I’ve packaged all the files needed for the worked example into a ZIP file which you can download here.
Nov
23
PBS 25 of x – A Case Study (bartificer.linkToolkit.js)
Filed Under Computers & Tech, My Projects, Software Development on November 23, 2016 | Leave a Comment
This instalment is a little unusual – rather than learning new topics, and then demonstrating them with a few simple examples, we’re going to look at a real-world JavaScript API, see how it works, and in so doing, reinforce what we’ve already learned, and expand our knowledge a little.
The library we’ll be examining is bartificer.linkToolkit.js, a small open source library I released over the weekend. This library bundles some functions for manipulating links in HTML documents. The two main functions of the library are to ensure that links with a target of _blank also specify a rel of noopener (for security reasons), and, to automatically make links leading out of the site open in a new tab, and denoting that fact with an icon appended to the end of the links. You can see the library in use right here on this page!
We’ll be looking at the library from three points of view – the actual JavaScript code, the JSDoc comments, and the documentation produced from those comments, and, project management.