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
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.
Jan
13
PBS 69 of X — Bootstrap Navbars
Filed Under Computers & Tech, Software Development on January 13, 2019 | 1 Comment
In the previous instalment we learned how to use Navs for creating navigation bars, and learned how to use Dropdowns to add expandable menus to our Navs. In this instalment we’ll meet Bootstrap’s ultimate navigation component, the Navbar. This is a powerful component designed to act as the menubar at the top of websites or web apps.
You can download this instalment’s ZIP file here..
Dec
16
PBS 68 of X — Bootstrap Navs
Filed Under Computers & Tech, Software Development on December 16, 2018 | 1 Comment
In this instalment we’ll get our first look at Bootstrap’s so-call Nav component, a menu designed to facilitate navigation around a website, within a page, or within a web app. In the previous instalment we met Dropdowns for the first time, and saw how Dropdowns filled with buttons can be used within web app UIs. We ended by noting that Dropdowns come in two flavours, buttons and links. In this instalment we’ll learn how to use the link-flavour of Dropdowns within Navs. Finally, we’ll learn how to use Navs to create tabbed content regions within a web page or web app.
You can download this instalment’s ZIP file here.
Dec
2
PBS 67 of X — Introducing Bootstrap Dropdowns
Filed Under Computers & Tech, Software Development on December 2, 2018 | 1 Comment
In this instalment we’ll start a two-part look at the Bootstrap Dropdown component. This component can be used to add pretty dropdown menus to both web app UIs and website navigation bars. In this instalment we’ll look at the first of those uses, and then in the next instalment we’ll look at navigation bars in general, which we’ve not seen before, and then Dropdowns within navigation bars.
You can download this instalment’s ZIP file here.
Nov
4
PBS 66 of X — Bootstrap Form Validation
Filed Under Computers & Tech, Software Development on November 4, 2018 | 2 Comments
Over the past few instalments we’ve been making our way though the various form-related features Bootstrap offers. We’ll round out that tour in this instalment with a look at how Bootstrap can help with form validation.
You can download this instalment’s ZIP file here.
Oct
20
PBS 65 of X — Bootstrap Input Groups
Filed Under Computers & Tech, Software Development on October 20, 2018 | 1 Comment
This will be the penultimate instalment of our introduction to Bootstrap forms. Today we’ll be looking at a really useful Bootstrap component for making form inputs clearer for the user, more powerful, and prettier. In the next instalment we’ll finish off with Bootstraps forms for the moment with a look at Boostrap’s built-in form validation features.
You can download this instalment’s ZIP file here.
Oct
4
PBS 64 of X — Bootstrap Form Layouts
Filed Under Computers & Tech, Software Development on October 4, 2018 | 2 Comments
In the previous few instalments we’ve been learning about Bootstrap forms. We first learned how to include standard HTML form controls like text areas, text boxes, checkboxes, radio buttons, and dropdowns into the default form layout. Then we learned about buttons and button groups. Now it’s time to learn about three alternative form layouts — inline forms, horizontal forms, and grid-based forms.
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 566