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
Apr
1
PBS 12 of X – Introducing JavaScript
Filed Under Computers & Tech, Software Development on April 1, 2016 | 7 Comments
With this instalment we’re starting into a whole new phase of the series. We’ve looked at using HTML to define the structure of an HTML document, and then we moved on to looking at CSS for defining the look of an HTML document, and now we’re going to move on to JavaScript to add interactivity to HTML documents.
Learning the basics of JavaScript, and learning how to connect JavaScript into the browser environment are two very different tasks, so, we’re going to separate them. We’ll start by learning some JavaScript fundamentals in a JavaScript playground I’ve created. Only when we know enough JavaScript for the mechanics of the browser’s JavaScript integration to make sense will we move tackle the so-called DOM, and the browser event model.
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 Software Development, Computers & Tech 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 Software Development, Computers & Tech on February 19, 2016 | 4 Comments
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 Software Development, Computers & Tech on February 3, 2016 | 5 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 | 4 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.
Dec
30
Pretty Markdown & HTML Links With TextExpander & Perl
Filed Under Software Development, Computers & Tech, Automation on December 30, 2015 | 7 Comments
What’s the problem to be solved? When doing show notes for the various podcasts I contribute to, I generally have to include a lot of links. Particularly for Let’s Talk Apple and the Security Stuff segment on the Nosillacast, I want to clearly show where the news story came from. I also want to keep the link text short. To balance those two requirements, I decided to use the domain part of the URL with /... appended to it as the link text. Doing this manually would be a really big pain in the backside because there are often more than 50 links in the notes for a single episode! Clearly, this needed automation.
I do my show notes in Markdown, so my initial solution produced links in Markdown format. Allison asked me how I did my links, because she thought they looked good, and she assumed I would have automated the process in some way. I explained my solution, and she asked if I could build a variant for her that generates the same style of links in HTML format.
My solution is built using a number of building blocks, but the glue that holds it all together is TextExpander. TextExpander is a paid-for Mac-only app, but one I would argue is well worth the price of admission. TextExpander is one of the first things I install on every new Mac.
TextExpander’s raison d’être is to monitor everything you type, looking for abbreviations you have defined, and replacing them with expansions you have defined as you type. Each of these abbreviations/expansion pairs are referred to as snippets within TextExpander.
Snippets can be very simple replacements like expanding *bb into Bart Busschots, but they can also be much more complex. The next level up would be to include special codes to inject data into the replacements, for example, I have a snippet that replaces *di with the current date and my initials, the content of that snippet is %d-%m-%Y BB – %d gets replaced with the day part of the current date, %m the month part of the current date etc.. The next level of complexity is that you can include special codes to make TextExpander popup a little form when ever you type the abbreviation into which you then fill in information that gets included in the replacement text.
However, the thing that really makes TextExpander powerful in my mind is it’s ability to execute a script to generate the replacement text. The scripts can be written in AppleScript, JavaScript, and any scripting language supported in the OS X terminal. This allows TextExpander to utilise the full power of the Terminal, as well as the full power of scripting languages like Perl, Python and Ruby.
Unsurprisingly, I like to use Perl in my snippets, and in this case, I use Perl to reach out to the pbpaste terminal command, and to harness the power of the URI perl module.
I use my solution as follows:
- Copy the link to be included in the show notes to the clipboard
Cmd+tabto the show notes I am working on and type the abbreviation*mdlcinto the place in the notes where I want the URL to be inserted (all my Markdown expansions start with*md, andlcstands for linkify clipboard).- The TextExpander snippet then executes – it fetches the URL from the clipboard, parses it with the
URIperl module, and assuming that succeeds, generates the Markdown code for the link, and inserts it into the show notes in place of the*mdlcabbreviation.
Dec
27
PBS 5 of X – Images & Links
Filed Under Software Development, Computers & Tech on December 27, 2015 | 4 Comments
Up until now we’ve only encountered very simplistic HTML tags, and we have ignored the fact that many HTML tags can specify attributes. In this instalment we’ll look at two tags that require attributes – those for inserting images into pages, and those for inserting links into pages. Before we can look at the two tags in question, we need to lay two pieces of ground-work – we need to discuss attributes in HTML tags, and we need to discuss URLs, and particularly the difference between relative and absolute URLs.
Nov
20
PBS 4 of X – HTML In-line Elements
Filed Under Software Development, Computers & Tech on November 20, 2015 | 1 Comment
In the previous instalment we introduced the concept of block-level tags, and inline tags. Block level tags define blocks of text like headers, paragraphs and lists, and starting a new block-level tag generally starts a new line in the page. Inline tags on the other hand effect a part of a block, and opening an inline tag generally doesn’t start a new line. In the previous instalment we looked at some of the most important block-level tags, in this instalment we’ll look at some of the most common inline tags.