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
Jul
13
PBS 81 of X — The JavaScript Promise Utilities
Filed Under Computers & Tech, Software Development on July 13, 2019 | Leave a Comment
So far in our exploration of promises we’ve learned the core concept — a promise is an object that represents the status and/or result of an asynchronous task. Asynchronous tasks are inherently parallel, but we’ve learned how to use .then() and .catch() to create so-called promise chains, allowing promises to be executed in series. What we’ve not looked at yet is JavaScript’s native Promise class. This class is primarily used to create promises, but it also provides some useful utility functions. For now at least, we’re focusing on using promises rather than creating them, so we won’t be digging into how the Promise class’s contractor works. However, some of the utility functions are designed to help developers use promises in more powerful ways, so those will be our focus for this instalment. The most powerful of these utilities is Promise.all(), a function that allows us to create promise chains that perform some tasks in series, and others in parallel, allowing us to efficiently manage our asynchronous tasks.
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 597
Jun
14
PBS 80 of X — JavaScript Promise Chains
Filed Under Computers & Tech, Software Development on June 14, 2019 | 2 Comments
In the previous instalment we got our first introduction to the concept of promises in JavaScript. By the end of the instalment we’d learned how to use promises to deal with single asynchronous tasks, but not how to use promises to deal with multiple interdependent asynchronous tasks. That’s what we’ll be focusing on in this instalment. In the previous instalment we looked at the arguments to .then(), but we ignored its return value. It’s the return value from .then() that this instalment revolves around. That return value is the key to dealing with interdependent asynchronous tasks by combining multiple promises into so-called promise chains.
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 597
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
Mar
24
PBS 74 of X — More Mustaches
Filed Under Computers & Tech, Software Development on March 24, 2019 | 1 Comment
In the previous instalment we got our first look at Mustache templates. In this instalment we’ll finish our look at this handy little third party library with a look at some of Mustache’s more advanced features. This will set us up perfectly to finally introduce AJAX into this series. This is an extremely common technique for fetching external resources with JavaScript. We’ll learn how to use AJAX to fetch both Mustache template strings and JSON data from URLs.
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 587
Mar
10
PBS 73 of X — Mustache Templates
Filed Under Computers & Tech, Software Development on March 10, 2019 | 2 Comments
In the previous instalment we took our first look at using templates with JavaScript to create cookie-cutter content like Toast notifications more easily than building them up piece-by-piece with jQuery. We started our exploration of the topic with a look at HTML5’s new <template> tag. In this instalment we’ll introduce a third-party templating tool, Mustache, and see how it can take our templates to the next level with concepts like conditional and looped sections.
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 585
Feb
23
PBS 72 of X — HTML5 Templates
Filed Under Computers & Tech, Software Development on February 23, 2019 | 2 Comments
Templating is a very important concept to get to grips with as you move from web pages to web apps. You need the ability to design some generic HTML and then easily inject data into it. Every UI popup has a standard form, but the information being displayed changes each time its invoked. Similarly, apps often use some kind of card interface to show a collection of similar items, those are basically the same piece of HTML being re-used with different data over and over again. Clearly, you want to be able to easily create a template for one card, and then re-use it over and over again.
I’ve been trying to find the perfect moment to insert this topic into the series, and it struck me that Bootstrap Toasts would make a simple but informative example around which to introduce the topic. So far we’ve been generating toasts by building them up piece-by-piece with jQuery, starting with a tag, setting the text, setting some attributes and properties, adding some classes, appending tags together, and so on. The code works, but it’s cumbersome to write, and worse still, difficult to debug and maintain. Hopefully you’ve been thinking to yourself ‘there must be a better way?’, because if you have been, you’ll be very well motivated to ingest this instalment!
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 583