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
Feb
9
PBS 71 of X — Bootstrap Spinners
Filed Under Software Development, Computers & Tech 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.
Jan
27
PBS 70 of X — Bootstrap Modals & Toasts
Filed Under Software Development, Computers & Tech on January 27, 2019 | 3 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 Software Development, Computers & Tech 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 Software Development, Computers & Tech 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 Software Development, Computers & Tech 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 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.
Jan
6
PBS 47 of x – ES6 Polymorphism
Filed Under Software Development, Computers & Tech on January 6, 2018 | 2 Comments
In this instalment we’ll wrap up our look at new features added to JavaScript with the release of ES6. We haven’t come even close to looking at all the new features brought by ES6, instead, we’ve just looked at a curated selection of some of the most useful new features.
Thanks to the power of the new class syntax introduced as part of ES6, we can now learn about two really important object oriented concepts which I had previously been avoiding because of how horrible the old syntax was. What we’ll be looking at are the very closely related concepts of inheritance and polymorphism.
To illustrate the concepts, and to lay the ground work for this instalment’s challenge, we’ll be making our way through a worked example. You can find the code in this instalment’s ZIP file, which you can download here.
Dec
20
PBS 46 of x – ES6 Spread Operator, Arrow Functions & Classes
Filed Under Software Development, Computers & Tech on December 20, 2017 | 1 Comment
We’ll start this instalment by having a look at my sample solutions to the previous two instalments, and then we’ll move on to looking at three ES6 features, two of which are extremely significant. We’ll start by addressing an accidental oversight from the previous instalment when we looked at arrays. I had intended to cover the so-called spread operator together with Array.from() and the for...of loop, but it slipped mind. Once we’ve dealt with my little oversight we’ll introduce an entirely new type of function that removes the need for the const self = this kludge for callbacks. So-called arrow functions greatly simplify the use of callback in JavaScript, and in modern JavaScript, callbacks are everywhere!
Finally, we’ll make a start on my personal favourite new feature in ES6 — classes. This major change brings JavaScript into line with the other C-style languages, and, more importantly, into line with how most programmers are used to working. This takes JavaScript objects from weird esoteric things only those initiated into the JS cult can understand at a glance to intuitively understandable constructs. For those of you for whom JavaScript is your first language, classes will be nice, but for those of you coming to JavaScript form other languages, classes will be a blessed relief!
We’ll only be covering the basics of the class keyword in this instalment. In the next instalment we’ll take things up a notch when we finally explore the concept of polymorphism, the heart and soul of object oriented programming.