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
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.
Sep
29
PBS 22 of X – jQuery Events
Filed Under Computers & Tech, Software Development on September 29, 2016 | 2 Comments
In the previous instalments we experimented with jQuery using the web console on our dummy page. In this instalment we’ll learn how to embed JavaScript into web pages, and, how to attach our code so it gets triggered by browser events.
This instalment includes a number of examples. You can copy-and-paste the code out of the page, but for convenience I’ve zipped up all the files and you can download them here.
Mar
17
PBS 11 of X – Tables
Filed Under Computers & Tech, Software Development on March 17, 2016 | 2 Comments
Finally, after many months of making Allison wait, it’s time to look at tables on web pages. We’ll start by describing the HTML markup for tables, and then look at how to style them with CSS.
Remember – tables are for one thing, and one thing only – displaying tabular data!
Mar
4
PBS 10 of X – Yet More CSS
Filed Under Computers & Tech, Software Development on March 4, 2016 | 4 Comments
Continuing our look at CSS, in this instalment we’ll start by looking at how to style lists, then we’ll move on to look at some more CSS selectors, and we’ll finish with an introduction to a new CSS concept – pseudo-classes.
Feb
19
PBS 9 of X – More CSS Positioning
Filed Under Computers & Tech, Software Development on February 19, 2016 | 1 Comment
In the previous instalment we learned how to group multiple HTML tags together to define regions within a page, and then how to move those regions around by floating them, or positioning them explicitly. We’ll start this instalment with a little revision – there was a lot to digest last time! While re-visiting the layout from last time, we’ll also look at some of its limitations, and then we’ll move on to look at the CSS display property, how it can be used to alter layouts, and, how we can use it to improve on our demo layout.
Feb
3
PBS 8 of X – CSS Positioning
Filed Under Computers & Tech, Software Development on February 3, 2016 | 3 Comments
In the previous instalment we learned about the CSS box model. Each HTML tag is represented as a box within the browser, and those boxes stack down the page, and inside each other to build up the web pages we see. We also learned how to use FireFox’s developer tools to actually see and inspect the boxes. In this instalment we’ll learn how to take one or more boxes out of the normal flow of the page, and position them elsewhere on the page.
Jan
21
PBS 7 of X – More CSS
Filed Under Computers & Tech, Software Development on January 21, 2016 | 3 Comments
In this instalment we’ll build on our basic understanding of CSS from previous instalment. We’ll start with some new CSS selectors, in the process, introduce two new HTML tag attributes, then we’ll move on to the CSS box model. Each HTML tag is represented in the page as a box, and all those boxes can be manipulated with CSS.
Jan
8
PBS 6 of X – Introducing CSS
Filed Under Computers & Tech, Software Development on January 8, 2016 | 5 Comments
We have now learned enough HTML to encode basic page content, marking things as headings, paragraphs, lists, etc.. We have completely ignored the look of our pages so far – relying on our browsers’ default styles. The default styles, it’s fair to say, are pretty darn ugly, which is why almost every page on the web has at least some basic styling applied to override these defaults.
In the bad old days, HTML pages were styled by adding attributes directly into the HTML tags. This was very time-consuming, and it greatly reduced the re-usability of the HTML markup. Those attributes still exist in the HTML spec, but we have completely ignored them, and will continue to do so for the entire series. This is not the bad old days, so we now have access to a much better solution – Cascading Style Sheets, or CSS.
Jun
28
Some Help with Webdesign and Colours
Filed Under Computers & Tech, Software Development on June 28, 2006 | Leave a Comment
Something I’ve always had a lot of trouble with is developing good colour schemes for web pages. (The fact that I’m rather colour blind does not help matters!) I generally end up falling back to a mono-chrome scheme where the site just uses many different shades of the same single colour. This works but often leads to sites that look a little boring. I need to skin a new web portal at work that I want to make look good and professional to speed up it’s adoption so I decided I just had to get to grips with this colour thing. There is no magic quick fix but here are two links I found in-valuable and that I’m sure will also be a great help for others trying to get to grips with this:
- A page explaining the theory
- A nice interactive web-based colour wheel to help you put it into practice