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
16
PBS 56 of X — More Bootstrap Content
Filed Under Software Development, Computers & Tech on June 16, 2018 | 1 Comment
In the previous instalment we got our first look at the functionality the Bootstrap documentation groups together under the heading Content. These are opt-in additional styles for standard HTML elements. Last time we looked at headings, paragraphs, quotations and lists. This time we’ll finish our overview of this aspect of Bootstrap with a look at styling images, figures, and tables.
In the next instalment we’ll move on to the most powerful aspect of Bootstrap, layout. This will take us a few instalments to cover, but when we’re done we’ll have learned how to use Bootstrap to arrange content on a page, and, better yet, to make our layouts responsive. That is to say, we’ll learn how to use Bootstrap to make our pages look right on any screen, from the smallest phone to the largest desktop!
You can download this instalment’s ZIP file here.
Jun
2
PBS 55 of X — Bootstrap Content
Filed Under Software Development, Computers & Tech on June 2, 2018 | 2 Comments
In this instalment we’ll continue our exploration of Bootstrap, making a start on the second of the four main aspects of Bootstrap — content. This is the word the Bootstrap team have used to describe Bootstrap’s styling of regular HTML tags for things like headers, paragraphs, lists, tables, etc.. In the previous two instalments we looked at the first of the four aspects, the utility classes, and when we finish with the content aspect we’ll move in to look at the third aspect — layout.
It’s going to take us at least two instalments to look at Bootstrap content. We’ll make a start in this instalment by focusing on the most important classes related to the HTML elements Bootstrap’s documentation (somewhat confusingly IMO) bundles together under the sub-heading Typography (under Content). Specifically that means headings, paragraphs, block quotations, and lists.
You can download the ZIP file for this instalment here.
May
19
PBS 54 of X — More Bootstrap Utilities
Filed Under Software Development, Computers & Tech on May 19, 2018 | 1 Comment
In the previous instalment we started our exploration of Bootstrap with a look at some of its commonly used utility CSS classes. We’ll finish that off in this instalment by looking at some more utility CSS classes. That will finish out our initial look at the utilities. We’ll then be ready to move on to the next major component of Bootstrap, the CSS libraries it provides for enhancing existing HTML content.
The ZIP file for this instalment can be downloaded here.
May
5
PBS 53 of X — Bootstrap Utilities
Filed Under Software Development, Computers & Tech on May 5, 2018 | 2 Comments
We’ll start this instalment with a very quick look at my sample solution to the previous instalment‘s challenge. Then, we’ll really get stuck into Bootstrap.
As we learned last time, Bootstrap can be thought of as consisting of four separate chunks of functionality — layout, content, components, and utilities. Because utilities are universally useful, that’s where we’ll be start our journey. In this instalment we’ll meet our first few Bootstrap utility CSS classes.
You can download the ZIP file for this instalment here.
Mar
31
PBS 52 of X — Introducing Bootstrap 4
Filed Under Software Development, Computers & Tech on March 31, 2018 | 1 Comment
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.
Feb
18
PBS 50 of x — A Worked Example (Object Explorer)
Filed Under Software Development, Computers & Tech 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 Software Development, Computers & Tech 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.
Jan
20
PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Filed Under Software Development, Computers & Tech on January 20, 2018 | 2 Comments
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.
Oct
29
PBS 42 of x – Playing the Game of Life
Filed Under Software Development, Computers & Tech on October 29, 2017 | 1 Comment
In this instalment it’s finally time to bring our Cellular Automaton prototypes to life by implementing Conway’s Game of Life. By the end of this instalment we’ll have reached a real milestone — our first web app! Granted, it won’t be a very feature-rich web app, but you have to start somewhere!
As usual, I’ve collected the code files for this instalment into a ZIP file which you can download here. As well as the ZIP file, I’ve also published a tagged release of the bartificer.ca.js code on GitHub which you’ll need for this instalment’s challenge.
Oct
13
PBS 41 of x – Form Events
Filed Under Software Development, Computers & Tech on October 13, 2017 | 1 Comment
In this instalment we’ll tie up the last few loose ends related to web forms. With web forms under our belts, we’ll then be ready to pick up where we left off with our cellular automata JavaScript prototypes, and combine our HTML, JavaScript, and CSS skills together to make our first web app – an implementation of Conway’s Game of Life.
This instalment breaks down into two distinct parts – our first look at keyboard interaction with web forms, and a final look at form-related events.
When it comes to keyboard interaction we’ll start by looking at how browsers treat regular web forms, and then we’ll move on to supporting keyboard interaction with custom web form UI elements like the star-rating example from instalment 36.
Finally, we’ll wrap up with a handy reference table summarising the most important webform-related JavaScripts events, giving some guidance on their use.
There’s just one sample file associated with this instalment, and it’s available for download as a ZIP file here.