The Author – Bart Busschots
RSS Feeds
Creative Commons
Unless otherwise stated, the content on this site is licensed under Creative Commons Attribution, Noncommercial, No Derivative Works 3.0 License
May
19
PBS 54 of X — More Bootstrap Utilities
Filed Under Computers & Tech, Software Development on May 19, 2018 | Leave a 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 Computers & Tech, Software Development on May 5, 2018 | 1 Comment
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 Computers & Tech, Software Development 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 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.
Jan
20
PBS 48 of x – A Closer Look at ‘this’ and ‘static’
Filed Under Computers & Tech, Software Development 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 Computers & Tech, Software Development 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.
Sep
15
PBS 39 of x – HTML5 Form Validation
Filed Under Computers & Tech, Software Development on September 15, 2017 | 1 Comment
In this instalment we’ll be taking a break from our parallel approach, and focusing almost exclusively on HTML5 form validation. We’ll dedicate the entirety of the next instalment to getting our cellular automaton prototypes up and running so we can actually ‘play’ the game of life.
While we won’t be continuing work on our Cellular Automata prototypes this time, I will share my solution to the challenge I set way back in instalment 36.
Also, before we get stuck into new content I’ll be taking a small diversion to explain a slight change in my approach to HTML coding, and how that will affect the sample code you see for the remainder of this series.
As usual, I’ve collected the example file for this instalment and the starting point for the challenge together into a ZIP file which you can download here.
Sep
1
PBS 38 of x – Taking Stock
Filed Under Computers & Tech, Software Development on September 1, 2017 | Leave a Comment
Since this is the first instalment back after our summer hiatus, it seems like a good time to pause and take stock. I want to look back to revise what we’ve learned to far, and, to look forward to where I want to take this series next.
Oct
28
PBS 24 of x – Creating a JavaScript API
Filed Under Computers & Tech, Software Development on October 28, 2016 | 4 Comments
In this instalment we’ll take our JavaScript skill up a level, learning how to write code that is designed to be re-used by ourselves or by others. When you solve a problem that you know you’ll need to solve again, it’s worth putting in a little extra effort to make your code as easy to re-use as possible. You may decide to share that code with others, or you may not, but either way, it’s in your interest to write it using some simple best practices.
Re-usable code without documentation is all but useless, so, we’ll also learn how to create great API documentation as you code. We’ll learn to do this using the free and open source tool JSDoc.
As a worked example, we’ll re-write our link fixer as an easily re-usable API, and while we’re at it we’ll also add in some extra functionality to make its behaviour more customisable, and hence, more useful to more people.
The sample files used in this instalment, as well as some needed libraries, can be downloaded as a ZIP file here. The examples assume you’ll save the files within the zip in a folder named pbs24 in the document root of your local web server.
Oct
12
PBS 23 of x – Creating Elements with jQuery
Filed Under Computers & Tech, Software Development on October 12, 2016 | 2 Comments
So far in this series we have been using jQuery to alter existing HTML elements by changing their attributes or style. In this instalment we take things to the next level, and learn how to use jQuery to create entirely new HTML elements, and inject them into the DOM, and hence, into the web page.
We’ll be working towards our first truly practical assignment in the series – a function that finds all links on a page, and if, and only if, they lead to an external page, alters them to open in a new tab, and appends an icon indicating that fact. In order to work up to that we need to learn five new things:
- How to build HTML elements with jQuery
- How to inject HTML elements into the DOM
- How to loop through each element represented by a jQuery object
- How to embed images directly into web pages using Data URLs
- How to use the 3rd-party library URI.js to interrogate URLs
There are four examples in this instalment, and a starting-point for the challenge. I’ve gathered them, and the other files they depend on, into a ZIP file which you can download here. It’s assumed that you’ll extract this ZIP file and place the five HTML files and one folder it contains into a folder named pbs23 in your local web server’s htdocs folder. The folder is particularly important because it contains a copy of the URI.js library, and if it’s not in the same folder as pbs23d.html and pbs23-assignment.html, those pages won’t work.