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
Mar
24
PBS 74 of X — More Mustaches
Filed Under Computers & Tech, Software Development on March 24, 2019 | Leave a 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 | 1 Comment
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
Feb
9
PBS 71 of X — Bootstrap Spinners
Filed Under Computers & Tech, Software Development on February 9, 2019 | 1 Comment
The challenge set at the end of the previous instalment was to build a simple timer web app. This was a much more substantial challenge than those I’ve been setting in the previous handful of instalments, and in involved re-familiarising yourself with concepts we’ve learned before, but not used for some time. For those reasons this instalment will primarily revolve around my sample solution to the challenge. I’ll go through it in much greater detail than I have been doing recently.
It would be a shame to go through an entire instalment without any new content though, so we also meet one very simple but very useful little Bootstrap component, the Spinner. Learning about the spinner sets us up nicely for a new challenge — two simple but important improvement to the timer web app we just built.
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 581
Jan
27
PBS 70 of X — Bootstrap Modals & Toasts
Filed Under Computers & Tech, Software Development on January 27, 2019 | 2 Comments
In this instalment we’ll continue our recent focus on Bootstrap components primarily intended for use in web apps rather than on web pages. We’ll look at a pair of components designed to notify of something — modal dialogue boxes, and so-called toast notifications.
Different notifications require a different UI, hence there being two components, Modal, and Toast. However, both are quite similar in the sense that you will most probably be triggering them via JavaScript. Unlike the other components we’ve seen so far, these will not be visible to the user when the page loads, they’ll make their presence felt at some later time in response to some kind of event.
You can download this instalment’s ZIP file here.
Sep
16
PBS 62 of X — A Basic Bootstrap Form
Filed Under Computers & Tech, Software Development on September 16, 2018 | Leave a Comment
So far in our exploration of Bootstrap 4 we’ve focused on the kinds of features that are useful when building web pages designed to communicate information — news sites, blogs, corporate websites etc.. There is of course much more out there in the universe of websites, and one of the biggest categories we’ve totally ignored is web apps! All web apps need the ability for the user to interact with them. In other words, all web apps need web forms, and we’ve totally ignored those in our explorations of Bootstrap to date! It’s about time we rectified that, so in this instalment we’ll dip our toes in the ocean of form-related Bootstrap features.
One of the reasons I’ve delayed diving into Bootstrap forms is that it’s almost impossible to know where to begin. Bootstrap provides so many form-related features and options it’s almost overwhelming!
We’ll start our exploration of forms very simply, but bear in mind that what we’ll see today is just the tip of the proverbial iceberg.
You can Download this instalment’s ZIP file here.
Aug
12
PBS 60 of X — Bootstrap & jQuery
Filed Under Computers & Tech, Software Development on August 12, 2018 | 1 Comment
So far we’ve looked at three our of the four aspects of Bootstrap — the utility CSS classes, the so-called content CSS classes for styling standard HTML components, and Bootstrap’s layout functionality (the grid & the breakpoints). So far, it’s all been pure CSS, we’ve not even imported the Bootstrap JavaScript library yet!
That changes in this instalment when we make a start on Bootstrap’s final aspect, so-called components. These are re-usable generic website components, and they rely on JavaScript for some or all of their functionality. To get the ball rolling we’ll take a look at just one very simple component, the Bootstrap alert.
You can Download this instalment’s ZIP file here.
Mar
3
PBS 51 of x — Cellular Automata Wrap-up
Filed Under Computers & Tech, Software Development on March 3, 2018 | 1 Comment
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.
Feb
18
PBS 50 of x — A Worked Example (Object Explorer)
Filed Under Computers & Tech, Software Development on February 18, 2018 | 1 Comment
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.
Feb
3
PBS 49 of x — Improving Our Cellular Automata
Filed Under Computers & Tech, Software Development on February 3, 2018 | Leave a Comment
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.