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
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 Software Development, Computers & Tech 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 Software Development, Computers & Tech 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 Computers & Tech, Software Development, 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 Computers & Tech, Software Development 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.
Dec
15
hsxkpasswd Without sudo (with perlbrew)
Filed Under My Projects, Security, Computers & Tech, System Administration on December 15, 2015 | 2 Comments
While it’s very easy to install hsxkpasswd onto your system from CPAN – it’s literally just one command (see below) – it requires administrator access to the machine.
sudo cpan Crypt::HSXKPasswd
This is all well and good if you have administrator access and are sure you want the module installed system-wide. But, what if you don’t have admin access, or, what if you just want to experiment with the module in your own home directory? The answer is perlbrew, a system for running custom versions of Perl inside your home directory. No need for sudo, and what ever you install with perlbrew is entirely contained within your home directory. If you already have perlbrew installed and configured with a version of Perl greater than or equal to 5.16, you can skip to the final step. If not, you’ll need to make your way through all the steps.
Step 1 – Install perlbrew Into Your Home Dir
There are a few different ways of installing perlbrew, but I find the following method the simplest:
curl -L http://install.perlbrew.pl | bash
That should install perlbrew into your home directory, and it should tell you to append some code to the end of your ~/.bash_profile file, which you can do with the following command:
echo 'source ~/perl5/perlbrew/etc/bashrc' >> ~/.bash_profile
Once that’s done, close your Terminal window and open a new one (this is to pick up the new environment variables defined in ~/perl5/perlbrew/etc/bashrc). You’ll know the install has been successful if you can run the perlbrew command:
perlbrew version
Step 2 – Install a Compatible Version of Perl into perlbrew
The joy of perlbrew is that you can have as many versions of Perl installed at any one time as you like, and you can then switch between them with the perlbrew command.
You can install Crypt::HSXKpasswd, and hence the hsxkpasswd terminal command, into any version of Perl greater than or equal to 5.16.
The following command will install Perl 5.16 into perlbrew:
perlbrew install perl-5.16.0
Go off and make yourself a cup of your favourite beverage – this will take a while! 🙂
Once the install finally finishes, you can activate that version of perl (just on your account) with the command:
perlbrew switch perl-5.16.0
It’s important to note that if at any stage you want to disable perlbrew and get back to the default system version of perl, the command to do so is:
perlbrew off
Step 3 – Enable the perlbrew CPAN Client
If you haven’t already done so, enable the perlbrew CPAN client cpanm with the command:
perlbrew install-cpanm
Step 4 – Install Crypt::HSXKPasswd
Once you have perlbrew installed and configured with a compatible version of perl, you can install Crypt::HSXKPasswd with the following simple command:
cpanm Crypt::HSXKPasswd
You’ll know it’s worked if you can run the hsxkpasswd terminal command:
hsxkpasswd --version
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.
Nov
5
PBS 3 of X – HTML Block Elements
Filed Under Software Development, Computers & Tech on November 5, 2015 | 6 Comments
In the previous instalment we introduced HTML, learned about HTML tags in the abstract, and looked at a basic template for all HTML pages. Over the next few instalments we’ll be working our way through the common HTML tags.
There are two major types of HTML tags, block-level tags, and inline tags, though it should be noted that there is a much less common third type which is a hybrid of the two, referred to as inline-block. For now, we’ll be ignoring these odd-balls.
Block level tags define regions of content – things like titles, paragraphs, lists, list items, and so on. Inline tags affect parts of a block – for example, a few words within a paragraph can be marked for emphasis. With practice the distinction will be comes obvious, especially when we get to the more advanced aspects of CSS, but the different in type can be confusing. A handy way of remembering the difference is that opening a new block-level tag will always start a new line on your page.
In this instalment we’ll start with some of the most common block-level tags.