Moving the University website to HTML9 Responsive Boilerstrap JS

H9RBS.js (v0.0001) is a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds.

H9RBS.js (v0.0001) is a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone kitchensink tweetybirds.

When we redesigned the University website in 2008 we adopted the Blueprint CSS framework which greatly cut down our CSS development time. It offered us a solid, cross-browser compatible foundation on which to build our site.

With the advent of HTML5 and responsive web design we started using the Bootstrap framework which offered not only a mobile-friendly grid but also at least 12 JavaScript plugins to provide design patterns such as modal windows, carousels, tabs and accordions.

As you are probably aware the web is now developing at an astonishing rate. Browsers are updated now on a six-weekly basis, HTML5 is nearing completion, and CSS4 is already being discussed. So we are looking to the future for a new framework that will support our needs and the requirements of our ever more mobile-friendly users for the next few years to come.

In consultation with Prof. Ailol from the University’s School of Computer Science we will be planning a migration to the HTML9 Responsive Boilerstrap JS starting today.

The framework describes itself as

a flexible, dependency-free, lightweight, device-agnostic, modular, baked-in, component framework MVC library shoelacestrap to help you kickstart your responsive CSS-based app architecture backbone […]

In other words: it meets our needs perfectly. Or as the developer of the infamous “All your base are belong to us” might say: All proof I.

A few of the many reasons we’ve selected this framework:

  1. It is entirely suited to today’s web.
  2. Unlike many other frameworks this uses a poor fill rather than a polyfil.
  3. It supports the new JavaScript flair loop.
  4. It is compatible with the forthcoming Commodore 64, Spectrum 48 and BBC B platforms, as well as popular browsers such as IE 6, Netscape Navigator 4 and Mosaic.
  5. No polar bears were harmed in its creation; in other words it is in keeping with our IT strategy for green computing.
  6. It is 100% compatible with JaxelScrobd 8.1.π.

From a usability point of view the only difference you may experience is a mild sense of foolishness.

Advertisements

Job vacancy: web developer

Spanner lying on a laptop keyboard

The University is looking for a web developer to join the web team.

  • Job reference: Web Developer SB1005R1
  • Salary £25,013 – £29,837 per annum (grade 5)
  • Required skills: PHP, JavaScript/jQuery, HTML, CSS, SQL, Ajax
  • Fixed term: 3 years
  • Start: as soon as possible
  • Closing date for applications: Friday 25 April 2014

The main purpose of the role will be in helping maintain and support web services, notably where changes need to be made to coding and other infrastructure elements, so a solid and demonstrable knowledge of PHP, MySQL, JavaScript, HTML and CSS is required. Experience of WordPress (including WordPress Multi Site) will also be of an advantage.

Our enterprise web content management system is the commercial, Java-based TerminalFour Site Manager (although we’ve never had to dabble with any Java) running on an Oracle database; and we’re working a lot with WordPress (and MySQL) too these days (both stand-alone installations and WordPress Multi Site). Pre-knowledge of either is not required as training will be offered.

Regarding existing technologies, we’re currently using an adapted version of the Blueprint CSS framework and a patchwork of jQuery plugins, but we have plans to move to the Bootstrap framework, the Sass CSS pre-processor and a host of other time-saving goodies. We currently don’t use any particular PHP framework, although PHPMaker has been used to help generate a few applications; that’s not to say that we’re not option to the adoption of a PHP framework. We often use Agile methodologies in our project work and use Trello to keep ourselves organised.

It’s not all about hardcore coding, however. An important element of the job will be to deal with website users and content creators in a support and perhaps even training role. The web team offers first, second and third line support, and you will be expected to get involved there too.

The web team is currently made up of four members (web manager, web architect, web editor and web apprentice) with a fifth member on secondment to Corporate Communications. Speaking as someone who is obviously somewhat biased, the web team is a good, fun and supportive place to work. Do you fancy joining us?

More details can be found on the University’s job vacancy website — the job reference code is SB1005R1.

Survey of university websites

Bar chart showing Scotland vs UK vs world university websites As part of our work around developing a solid strategy for the University website for next few years, over the last couple of days we’ve been doing a little ‘competitor analysis’ and have visited over 200 university websites; in all it took us around eight hours. We asked three questions of each site we visited:

  1. Responsive
    Is the homepage responsive? (In other words, does the site adapt depending on the size, orientation of the screen used to view the pages?)
  2. Log in
    Do you need to log in to view information for internal audiences (which we broadly defined as an intranet)?
  3. Standard design
    Do the academic schools’ websites have a standard design?

Similarly, we looked at three areas:

  1. Scottish universities.
  2. Top 100 UK universities (from the Guardian university guide 2014).
  3. Top 100 world universities (from Times Higher Education world University rankings 2014).

Results

The results were both fascinating and encouraging:

Scotland UK World
Responsive 21% 43% 36%
Log in 50% 59% 53%
Standard school sites 86% 91% 39%

Not as far behind as we feared

Working largely in isolation from other university web teams—apart from those few moments each year we gather at Scottish Web Folk, IWMW or T44U conferences—it is easy to convince yourself that you are lagging far behind our fellow universities in terms of adoption of the latest web browser features and standards. A recent meeting of web team members from Abertay, Dundee and St Andrews, however, showed us that we are facing largely the same issues in each institution. And these results show us, certainly in terms of adoption of a mobile-friendlier, responsive website design, we are still a part of the majority. I wish we’d carried out this exercise, say, a year ago so that we could see how quickly this is moving. Time to respond, though.

In or out?

There has been a question posed here about whether our ‘intranet’, our pages for internal audiences, should be available to the general public or whether they aught to be secured behind a login. From this limited sample of approximately 200 institutions, around half restrict access. I’m still trying to figure out what is the exact question that we’re asking here. Is it simply about making some information unfindable by the public, or is it more about providing a more focused experience for external audiences, particularly in the area of search. Currently when someone enters a search term into the search box on the homepage it returns results from the entire University website: over 250,000 pages. Should we be displaying results only from sites that are relevant to external audiences (e.g. information for prospective students, administration A-Z, about the University, school websites, etc.)?

Standard school sites

Finally, we were surprised—but encouraged—by the high percentage of sites that offered a standard look-and-feel for school websites. We would never have guessed, for example, that 9/10 of UK websites would offer this.

Conclusion

This has been a valuable exercise. It would be interesting to repeat this exercise in 12 months’ time to see how the landscape has changed, particularly in the area of responsive design.

On your own in the office over the spring break?

Coding FM, the sound of coding

Missing your colleagues, stick this on in the background and pretend they are still there.

The students have now gone on their spring vacation. Soon colleagues too will be slipping away for a break, leaving you alone in the office.

If—like me—that’s going to leave you on your own at your web team HQ to look after the whole of the internet singlehandedly, then why not load up CODING.FM in your browser, pin the tab and pretend that your colleagues are still in the room by listening to the gentle sound of other people coding.

It is actually surprisingly soothing.

Coloured lists in Trello

Background colours on selected lists in Trello

Background colours on selected lists in Trello

As you probably know, we’re big fans of Trello here in the web team.

We have a number of project boards, overseen by one master, everything-we’re-doing™ board called @Web team. It currently has 24 columns (or lists) which makes quickly navigating to the right list a little tricky at times.

So today I quickly wrote a hacky little Tampermonkey (Chrome) / Greasemonkey (Firefox) script to add background colours to certain lists.

For colours, I simply selected an at-random theme from Adobe Kuler.

It could be optimised but it does what I need to without too much of a performance hit, and already I’ve found it really helpful to immediately identify the “in progress”, “this week” and “done” columns, as well as marking our project backlog columns.

// ==UserScript==
// @name Web team - Trello highlight lists
// @description Highlight certain columns in Trello.
// @include https://trello.com/b/YOUR-BOARD-URL
// @require https://code.jquery.com/jquery-1.11.0.min.js
// @version 2.1
// @copyright 2014, Gareth J M Saunders
// ==/UserScript==

$(document).ready(function() {

var black = '#393939',
brown = '#a39386',
green = '#a8C0aa',
red = '#a7585b',
white = '#fff';

$('body').hover(function() {
$("h2:contains('PROJECTS'), h2:contains('TEAM ADMIN')").css('color', black).parents('.list').css('background', brown);
$("h2:contains('IN PROGRESS')").css('color', black).parents('.list').css('background', green);
$("h2:contains('THIS')").css('color', white).parents('.list').css('background', red);
$("h2:contains('DONE')").css('color', white).parents('.list').css('background', black);
});
});

Please feel free to use it, adapt it, improve it, comment on this.

Obviously, change the ‘contains:’ keywords to find your own list headings, and the @include URL to that of your board.

Update

  • I noticed that I was trying to pull in the jQuery file under http rather than https, which was causing problems.
  • It turns out that the DOM loads long before the content, as there is some Ajax jiggery-pokery going on. So I’m using a hover event on the body to force the colours to change, which is a horrible hack but works, and does also pick up new lists created with these keywords.
  • 2014-12-08 I’ve discovered that rather than // @include https://trello.com/b/YOUR-BOARD-URL, I can use // @match //trello.com/* which will then work across all my Trello boards and follows the protocol of the board being viewed (which seems to always be https:// for me).

To do

  1. Use arrays and or variables to store common colours.
  2. Improve the event handling to determine the best way to load the script.
  3. Reduce duplication with regards to identifying the column (h2:contains gets repeated a lot) and adding the CSS rules.

Leet service desk calls

Our support calls list shows 13 calls assigned to me, 37 to the whole team. That's so 1337 or leet!

1337

This morning I logged into UniDesk, our IT Service Desk incident management system, and noticed that the calls assigned to me next to the calls assigned to the whole web team read: 1337.

That’s so 1337! (Using leetspeak, an alternative alphabet for the English language, it reads: elite.)

We’ve been making a particular effort to drive down our support calls this week. Here’s how many calls we had at 09:00 each morning this week.

  • Monday: 67
  • Tuesday: 58
  • Wednesday: 55
  • Thursday: 37

We’re doing well. In fact, you could say we’re 1337!

Zeal and Dash—Offline documentation browsers

Zeal for Linux and Windows

Zeal for Linux and Windows

Yesterday I came across a really useful application for web development which has already sped up my workflow when needing to look for documentation: Zeal.

Zeal is available for Linux and Windows only, because it’s based on a similar application for Mac OS X only called Dash.

On my personal blog, I’ve written about how I’m using Zeal, and how I’ve configured it to be integrated into Sublime Text 3. It has been a real time-saver already: thoroughly recommended.

BarCamp on Sublime Text 3

Sublime Text 3

Sublime Text 3

In order to try to improve our skills and share knowledge within the team we are currently trialling weekly, informal ‘BarCamps‘ within the team. Today we had our second, focusing on the code editor Sublime Text 3, which is currently in beta.

I’ve been using Sublime Text for a couple of years now, having moved from Blumentals WeBuilder, which I’d been using for years. I loved WeBuilder, I created loads of code snippets to use in it, I even contributed to developing colour themes for the editor. But I just found that Sublime Text was a more efficient editor for me.

At our BarCamp this afternoon I went through the following:

Install

Available for Linux, Mac and Windows. Download from Sublime Text website. Version 2 is stable; version 3 is in beta.

Package manager

Will Bond has created a tremendous package manager, and curates an impressive repository of packages (add-ons, extensions) for Sublime Text 2 and 3.

Recommended packages

With package manager installed, either go to Preferences > Package Control > Install Package, or Shift+Ctrl+P and type Install.

  • Alignment
  • BracketHighligher
  • ColorPicker
  • DevDocs
  • Emmet (see documentation and screencast by Chris Coyier)
  • jQuery
  • SidebarEnhancements
  • SublimeCodeIntel
  • SyncedSideBar
  • Tag
  • Tomorrow Color Schemes
  • View In Browser

User preferences

One powerful feature of Sublime Text is being able to set user preferences. Preference > Settings — Default will show you all the options available. You can then copy and paste those into Preference > Settings — User to edit them.

A few of my favourite options:

  • “bold_folder_labels”: true,
  • “draw_white_space”: “selection”,
  • “fade_fold_buttons”: false,
  • “highlight_line”: true,
  • “line_padding_bottom”: 1,
  • “line_padding_top”: 1,
  • “show_encoding”: true,
  • “show_line_endings”: true,
  • “tab_size”: 4,
  • “translate_tabs_to_spaces”: true

Keyboard shortcuts

Scotch has a useful page showing Sublime Text keyboard shortcuts. Print pages 2–4 for an easy-to-use cheat sheet.

Create snippets

Code snippets are a really useful way of adding blocks of regularly-used code, and mapping them to keywords which are triggered when you hit the tab key.

There’s a really useful tutorial on Hongkiat.com: working with code snippets In Sublime Text that will get you up-and-running.

Q & A

Two questions that were raised during the session we found answers for:

  1. Can you find a PHP function in any file within a project?
    A combination of SublimeCodeIntel package (Alt+click will open the file in the current project that defines the function), and Shift+Ctrl+F allows you to search within the current project for that function name.
  2. How can I ensure that all .inc files are shown with PHP syntax highlighting?
    Open a .inc file, then View > Syntax > Open all with current extension as…

More tips

Sign up for the Sublime Text Tips email newsletter, or simply browse the site for more top tips on what many regard as today’s best text editor.

If you’ve not already tried it, do give it a try. It’s free to try, USD $70 (approx. GBP £42) to buy.

Fife and Tayside T4 group

Fife and Tayside T4 group meets for the first time write-up on Scottish Web Folk T4 blog

Fife and Tayside T4 group meets for the first time write-up on Scottish Web Folk T4 blog

This morning Steve Evans (University web manager) and I travelled to deepest, darkest Dundee for the first meeting of what is hoped will be a regular meeting of TerminalFour Site Manager administrators and users from the universities of Abertay, Dundee and St Andrews.

We met in the ‘moot court room’ in the school of law at the University of Dundee, hence the stern-looking photograph above.

You can read about it on the Scottish Web Folk T4 blog.