This post is part 23 of 37 in the series Programming by Stealth

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:

  1. How to build HTML elements with jQuery
  2. How to inject HTML elements into the DOM
  3. How to loop through each element represented by a jQuery object
  4. How to embed images directly into web pages using Data URLs
  5. 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.

Read more

Tagged with:

This post is part 22 of 37 in the series Programming by Stealth

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.

Read more

Tagged with:

This post is part 21 of 37 in the series Programming by Stealth

In the previous instalment we took our first tentative steps into the browser. We learned about the Javascript console, the concept of the Document Object Model, or DOM, and we introduced the jQuery library.

Our initial introduction to jQuery was very superficial, now, it’s time to dive in deeper, and get much more rigorous in our understanding. We’ll look at how to use jQuery to select specific HTML elements on the page, and then, how to manipulate their styling, and their HTML attributes.

For this instalment we’ll still be using the Javascript console on the PBS dummy page. From the next instalment on, we’ll be embedding our JavaScript directly into our web pages, so this will be the last time we use the dummy page.

Read more

Tagged with:

This post is part 34 of 37 in the series Taming the Terminal

In the previous instalment we finished a five-part series on SSH. Before moving on, lets take a moment to step back and look at the big-picture. The five SSH instalments are all part of the now long-running series on networking. We have been working our way through the networking stack since instalment 23. We started at the bottom of the stack, and have worked our way up. We are not exploring protocols in the Application Layer.

In this instalment we’re moving on from SSH to HTTP, the protocol that powers the world wide web.

Before we look at some HTTP-related terminal commands, we need a basic understanding of how HTTP works, so that’s what this instalment is all about.

Read more

Tagged with:

As described in a post earlier today, I have made some significant changes to this site. The short version is that I’ve started to use WordPress as a CMS (content management system). While the WordPress APIs provide a good range of functions for doing CMS-like things, the web interface is disappointingly lacking in even basic CMS features. Thankfully, WordPress’s plugin architecture has allowed the community to fill in the gaps.

Read more

Tagged with:

This site started life in the early 2000s as a pure blog powered by the Serendipity blogging engine and hosted on free shared hosting provided by MiNDS>, the IT society of Maynooth University, where I was a researcher in the Computer Science department at the time. The first big change came in the summer of 2006 when I moved the blog from MiNDS> to this domain. As well as moving the blog, I also moved my personal website, though the two remained separate entities which I had to mange separately. While moving the blog I took the opportunity to change blogging engines from Serendipity to WordPress. This was an early version of WordPress, so its evolution from blogging engine to content management system (or CMS) still had a long way to go (arguably it still does). As WordPress’s pages feature evolved, I eventually did away with the standalone site, adding just a handful of pages into WordPress. At that point WordPress became my entire website. It was a viable solution because I really just needed a few simple ‘about the stuff I do’ pages, and the blog.

This month, while preparing for the release of the new version of my XKPasswd open source library, I realised that I needed more from this site. While the blog is still important, and will continue to contain most of the information hosted on the site, it won’t be the view though which most of that information will be accessed. A reverse-chronological list of all posts on all topics is not actually an optimal way of presenting content! This site serves as the anchor of my online presence simple because this is the URL I give out when ever I’m asked where people can find me online. I sometimes wonder if podcast listeners aren’t starting to think that Busschots is just my middle name, and that from bartb.ie is actually my surname! This site has not been a particularly good home page, not because there isn’t useful content, but because it’s been ineffectively presented.

Read more

Tagged with:

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:

Tagged with:

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.

Read more

Tagged with:

Now that the worst of the ‘browser wars’ finally seems to be behind us and now that JavaScript can easily communicate with servers to get data without page re-freshes via AJAX one has to wonder if there are any real uses left for applets. My conclusions would be that yes there are still some uses for applets on the web but they are few and far between. Anyone who uses an applet in this day and age should have a bloody good reason to do so because your browser should not have to load a JVM just to view a web page unless that JVM is providing something spectacular that actually adds something to your page and that cannot be done with the core web technologies (XHTML, CSS, JS, AJAX).

Read more

Tagged with: