Welcome to ENGINEBREATH .uk

A collection and protection of the work of Responsive Developer and Games Designer Oliver Harris

Current Work

December 2016 - Wikipedia article generator

The idea for this had its genesis following on from the Wikipedia API tapping accomplished below for the Solar System simulation.

Visually very basic but works fine functionally. For the API call itself I used the following:

  • action=query - query the JSON data only of an article (instead of using parse/bring across HTML).
  • generator=random - special as this allows the generator magic to happen, without usually requesting a page title.
  • grnnamespace=0 - access the top-level data namespace (mandatory to gain access to the properties below).
  • prop=extracts|info - the first property 'extracts' here allows the item.extract article data to be displayed. The second 'info' property allows access to the 'inprop=url' specified below.
  • inprop=url - this allows output of the item.fullurl href on the anchor link without hitting the same-origin policy on initial API call / a hardcoded callback (an unwieldly two sets of $.getJSON and $.each functions nested in each other).
  • exintro= - this allows output of the item.title article data to be displayed.
  • format=json - more straight-forward to manipulate here as a data format than XML. In fact it's not possible to cross-domain query/parse if XML(!!)
  • callback=? - needed for getting the functionality to work - key to getting around the same-origin/cross-domain policy.

Can be built out further with a user being able to save/store cookie-related favourite article collections.

Please click here to see the personal project

Previous Work

May 2016 - Solar System simulation

Whilst playing around with SASS an accident occured where list-item discs started rotating around a central element. This inspired me to map out the Solar System (as you do)! Both planets and their moons have individual orbits - the Sun is 10 times smaller though (for obvious reasons)!

Still lots to do, and some number-crunching to get sizes, distances and speeds accurate.

The background text information is pulled in from the Wikipedia API via JSON; I will use this wonderful resource to change the text based on clicking of different celestial bodies.

The star background I'll happily admit I found on this page.

Please click here to see the personal project

April 2016 - Google Maps with JSON integration

A first foray into Google Maps - clicking each of the markers on the map calls via AJAX a diferent area of a JSON file, to populate a list.

Uusual responsive considerations and semantic UI are also in place (the UX was built from a supplied PSD file).

Please click here to see the application

April 2016 - IE7/8 compatible responsive website with hand-coded slider

Was set a task to craft a standard website, with a slider to display products. The catch being, no external Flexslider style library was to be used.

The site also had to be cross-browser compatible, all the way back to Internet Explorer 7 and 8! This meant loading in a couple of extra scripts ("css3-mediaqueries.js" and "html5shiv.js") to allow these older browsers capability to make use of responsive media-queries.

initially I used the notation:"'open-bracket'!'dash''dash'[if lt IE 8]'close-bracket'" in the head to attach seperate IE only Stylesheets. This worked fine in the emulated space of the IE11 browser running in IE 7/8 mode, however these didn't attach when tested in Browserstack. So I changed tack and added a class to the HTML tag at the top of the document, on detection of one of these browsers. This allowed the browser specific styles to be targeted on a permanently attached stylesheet.

All because IE7 at least, does not calculate less than integer pixel dimensions, so using a percentage-based responsive-grid system fails here usually. Hence, these new rules specified smaller widths. Another IE only area that was targetted: only load certain layout, files and commands to create the Foundation mobile-menu, if above IE8.

Please click here to see the website

April 2016 - AJAX Accordion

Was set a task to develop a non-jQuery-UI accordion, that populated the accordion content from a seperate JSON file via AJAX. This includes the structure, so HTML list-items are automatically added to the DOM based on the number of records in the JSON file.

As well as standard accordion functionality built in (only a single drawer open at one time) there was also work completed on the display of the indication arrows (they only switch in a callback after the accordion-drawer slide-toggle).

Please click here to see the results

March 2016 - UI Engineer Test - "The Bee Game"

Other areas to consider - use hexagons filling with honey for health - the bees inside can be holding the numerical health indicator..?

Remodel on mobile - for obvious reasons, the design can be drastically overhauled on dimensions less than 768px tablet; currently there is too much scrolling. Really the layout should all fit on the screen.

To make it more engaging, the code can be reworked as a game of skill, where the idea is to swat the Queen Bee based on a 'roulette' style.

Things I've learnt about SVGs with this project:

  • Applying gradients in Adobe Illustrator then exporting to SVGs proves difficult to render - this graphic code had to then be manually edited to remove this rogue gradient code. Arduously editing SVG code is not fun, so stick to solid colours!
  • It's a strange contradiction that the ':after' pseudoclass cannot be applied to an SVG (it is technically considered an image), even though it can otherwise be manipulated by CSS when inline... The 'shine' CSS masking effect has to be on a rectangular 'block' element rather than a more ideal SVG honeycomb image.
Please click here to see the game

December 2015 - Angular Test

This has some good examples of using ng- directives, routing ready for more screens, and utilising the MVC paradigm to organise files (loading in a JSON file for example).

Further additions could be 'sort by price'.

It was a neat exercise - initially I went down the path of having two separate ng-repeat functions (one for product list, the other for the cart modal), and only adding a product to the cart if it wasn't there in the first place (using a loop-check function with a nested index check). This logic would go on to cause lots of problems when displaying calculations from the two different ng-repeats.

To rectify, the logic was stripped back - a single ng-repeat was used twice upon the two different instances, and the aforementioned loop-check disabled. In essence, instead of trying to only push to the cart with a fresh instance; each instance is populated at start with quantity:0. This allowed Angular.JS to perform much more natively than hacking the $scope, and all that was left was a simple display function - only show a product in the cart if a quantity is greater than zero.

Please click here to see the project

November 2015 A - SCSS Test

For another Front-End role I applied for, I was given two tasks. The first, where asked "Re-write the following CSS block as SCSS, using a for loop:"

  • .item-1 { width: 3px; float: left; margin: 1px 0; }
  • .item-2 { width: 6px; float: right; margin: 0 2px; }
  • .item-3 { width: 9px; float: left; margin: 3px 0; }
  • .item-4 { width: 12px; float: right; margin: 0 4px; }
  • ...to a total of 12 iterations. After download and installation of the Compass.app compiler, I was ready to write my first proper SCSS file.

After some digging around, I wrote the following which fulfilled the brief:

SCSS example image
The most interesting line in the code above being "@if $i % 2 == 0", where changing the value of '2' would edit where the increment in the loop should fulfil the following statement (in this case, every second instance). I'll happily admit I found the key concept on this page.

November 2015 B - JavaScript Test

This was the second, seperate part of the test. Here it was asked that four buttons were to be created with the following criteria:

  • Default State: Code 3 buttons which have a maximum value of 10, 15, and 1 respectively - and a final 'Reset' button.
  • Clicked State: When a user clicks on a button its state should change, with a click count appearing beside it.
  • Disabled State: A user should not be able to click a button once it has reached its maximum value. In that case the button should become disabled.
  • Reset State: When the ‘Reset’ button is clicked all buttons should return to the default state.
Please click here to see the results

October 2015 - Completed an IKM Proficiency Test

Also worth pointing out I'm learning Angular.JS, and now an Umbraco Level 2 Developer.

For a Front-End role I applied for I was required to complete an online IKM Proficiency Test, with the results shown below. I was disallowed the ability to use any external resources, so I trudged through it on my own consideration.

IKM Proficiency Test image

It was an interesting test as the questions adapt to the skill level of the person being tested, however the final marks are global. I am pleased with the 75% mark I achieved, considering my current status as a Mid-Weight Web Developer - and it highlighted the areas I need to strengthen, such as the more abstract, less tangible theory behind web-development (Object-Oriented Programming).

August 2014 - Responsive Adventures in JavaScript

Script written for a responsive slider to display more than one button at once, that also takes into account mobile-device orientation change:

JavaScript is fine usually, as the file is loaded upon page load. It became obvious though responsive design would need a way of targeting different dimension considerations, if different actions needed to occur on different screens pixel-widths. The code on this page was used as a basis for this.

This then further needed refining, as having a mobile-device change orientation would kick-in the CSS media-queries as would be expected – but there was no obvious way of reloading the JavaScript file without a full-page refresh, which was cumbersome for the user. Therefore a way of targeting orientation-change listening to reload JavaScript on-the-fly was required. The code on this page was used as a basis for this.

So combining the above and this resource I created a slider to display more than one button at once, that combines the aforementioned separate phone (320px-767px) and tablet (768px+) orientation change listening to reload JavaScript on-the-fly (should a mobile-device be oriented portrait or landscape from initial load) - and the more usual different dimension considerations for a smooth responsive desktop experience, should the window be less than 1024px.

Please click here to see the results

October 2013 - Personal website revamp

Considering current skills that have been crafted, it seemed fitting to pour them into crafting a future-proof HTML5 / CSS3 responsive website. The inability for Mobile platforms to generally display Flash platform content as well, was proving to be a cause for concern as time has moved on.

It has actually proved more tricky to consider which work is worth keeping to showcase, and which to remove from upload. A lot of older work is certainly not up to current standards so to broadcast personal abilities in the most positive light these older projects have been removed. Only about 50% is currently converted, so the other pages beyond Home, Gallery and Flash Work need porting over.

Over the next few weeks there is a lot more responsiveness to be added to the site, especially to the top-area of the Homepage - a Mobile-friendly Menu system needs to be incorporated, and other small tweaks can be deployed instead of its current Desktop incarnation. Generally annotations to all of the other sections explaining my work is also needed. Some neat fonts and other small embellishment would not go amiss either!

If you are interested in what the site looked like originally, please click here.

How to Contact

For any enquiries regarding work or roles, please feel free to call on: 07925 332790 Alternatively, please Email at: revilosirrah@gmail.com In case there is any wonder, the above Email address prefix is the Author's name backwards!

Thankyou for visiting!