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
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.
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.
Nov
5
PBS 3 of X – HTML Block Elements
Filed Under Computers & Tech, Software Development 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.
Oct
23
PBS 2 of X – Introducing HTML
Filed Under Computers & Tech, Software Development on October 23, 2015 | 4 Comments
The first baby-step we’ll take towards real programming is the Hyper-Text Markup Language, better known to us all as HTML. HTML is not a true programming language, it is instead a simpler beast known as a markup language – it adds context to text. HTML allows us to mark certain parts of a document as headings, other parts as paragraphs, and yet other parts as being emphasised etc.. Like with programming, we are conveying meaning to the computer, but the range of possible things we can ‘say’ is much smaller and simpler.
Modern best practices for web development are the result of decades of evolution. We’re going to ignore all the techniques that time and experience have shown to be mistake, and jump straight to the end of the story – modern best practice. There have also been many versions of HTML over the years, and again, we’re going to jump straight to the end of the story, and use the latest incarnation of the Hyper-Text Markup Language, HTML5.
Before we dive into the specifics, I want to take a moment to explain the larger context in which we’ll be using HTML. When HTML was originally developed, it was designed to describe both what different elements of a web page were, and, what they should look like. Experience has taught us that this is a terrible idea, so we no longer use HTML in this dual role. Instead, HTML is now just half of a duo of languages used to create a web page – the other partner being Cascading Style Sheets, or CSS. We use HTML to describe what each part of the page is, and CSS to describe how each marked up element on the page should be styled.
We’ll be moving on to CSS once we finish describing HTML. Until we get CSS, the web pages we create will look exceptional plain and frankly boring, but don’t worry, we’ll move on to CSS soon enough, and then you can really let your creative juices fly!
May
3
Dashboard Widgets for Web Monkeys
Filed Under Software Development, Computers & Tech on May 3, 2006 | Leave a Comment
Following on from my recent post on Dashboard Widgets for Techies, this post previews some nice dashboard widgets for Web Developers.
Regular Expressions
We’ll start with what I consider to be the most powerful widget, the regular expression widget. Regardless of what web language you end up using and what you are doing the chances are that you will need to validate user-input and that you will need to use regular expressions to do it. There are a number of Widgets for testing regular expressions out there but of all the ones I’ve tried the RegexToolbox was by far the best. It allows you to set up a list of test cases and then match an RE off them and it tells you what it matches as well as all the matches within bracketed groups. It also allows you to test substitutions.
Technical References
It’s often handy to have the full spec for things at your fingertips and the Dashboard is about as ‘at your fingertips’ as things get so it makes sense to have some API specs in Widget form.
I know I hate PHP but I still have to use it quite a bit and I know a lot of other people do too so a PHP reference widget is still very useful. There are quite a few different ones but the one I found to be the best is this one: www.apple.com/downloads/dashboard/developer/phpfunctionreference.html.
Another somewhat useful widget is the Tags – CSS widget. It sounds great and gives you a nice interface for searching for what CSS attributes there are but sadly if doesn’t give you the possible values for those attributes which is very annoying. A similarly disappointing widget is Tags – HTML.
Colour Tools
Easy access to the web-safe colour pallet is something that sounds very useful and hence you’d think there would be a very good widget for it but you’d be wrong. There are indeed many colour widgets but no very good ones. Color Safe is the best of a bad lot but it’s not perfect. I’m quite tempted to write my own Widget for this though.
Apr
22
Developing My First Dashboard Widget – Unix Time Stamp Converter
Filed Under Software Development, Computers & Tech, My Projects on April 22, 2006 | 3 Comments
I recently did a post on Dashboard Widgets for techies and am working on another about Dashboard Widgets for developers. There was one important widget missing from my list of widgets for techies, one for converting Unix Time Stamps to human readable dates and vica-versa. The reason it was missing was because I couldn’t find one anywhere on the Apple site! I find this strange because I regularly need to deal with Unix Time Stamps in things like logfiles and raw data in Databases, hence I’d have expected others to need this too and hence for there to be a widget for it. Well, I decided to remedy this omission by writing my own Widget which I’ve now submitted to Apple for addition to their Widget Downloads Page. I’ve decided to release it as GPL so you can get it on the downloads page of my home page.
So, how easy was it to develop my first widget? Trivial! I went from deciding to write the widget to a fully working first implementation in about 2 hours including all reading and experimenting that I had to do to get started. IMO that’s not bad at all, in fact I can’t think of any other platform I’ve ever used where I was able to do something useful as quickly.
So, what’s involved in writing a Dashbaord Widget? TBH very little. If you are up to speed with client-side web technologies then you’ve pretty much got everything you need. Yes, there are some extensions to these technologies involved to allow you to interact with the OS and the command-line and also for 2D graphics with Quartz if you want to get fancy but they are very easy to get to grips with and there are some excellent guides on Apple’s Developer Site.
A Dashbaord Widget is basically a web page written in XHTML that is skinned with CSS and made interactive with JavaScript. There really is nothing more to it than that. If you want to give this a go yourself the links below are all you’ll need.
- Apple’s Dashboard Developers Page
- Apple’s Dashboard Programming Guide
- Apple’s help topic on getting your Widget to flip
As I said I had a fully functional Widget in two hours, took me a little longer to get it to do cool stuff like flipping round to show the credits on the reverse side and getting it skinned in a way I was happy with but all in all that Widget was no more than 5 hours work including all the fiddly graphics and layout stuff. A screenshot of the finished product can be seen below.
Oct
27
Nice web forms and not a table in sight!
Filed Under Software Development, Computers & Tech on October 27, 2005 | Leave a Comment
I am well aware that tables for layout are a BAD BAD idea and have stopped using them for such perverted things years ago with just one exception, forms. I started doing my forms in lists because IMO that makes sense but clients were always grumpy when web forms weren’t layed out in the traditional two column way and short of creating a mess of Divs I always ended up falling back to tables for forms. Not anymore! I’ve FINALLY found a nice way of doing forms so that the XHTML is simple, elegant and more importantly, semantically correct while still keeping to a nice two column layout.