TechHub Demo Night

I’ve recently become a TechHub member and was given the chance to demo my app Collated at the May Demo Night last week. I wrote the app to organise all my web related tweets and browser bookmarks to get everything in one place and be more productive. It was great to get constructive feedback on whether it could be a viable product and have made some new contacts.

demo-night

Intro to Ember talk – Creating a basic Twitter app

Last year I did a remote learning course with Talent Buddy building a basic Twitter App using the EmberJS framework. I’ve since been attending the monthly Ember London meetup and project nights and they’ve really helped my understanding. Last month I thought I’d give a talk on the course to give something back to the community and it was great experience for me. I’m currently working on a new Twitter based organiser app and hope to give another talk in the future.

Ember-Talk

PC vs Mac Keyboard Shortcuts

I use a Mac for web development and use a Windows Virtual Machine for my support work and thought I’d post some useful shortcuts as a comparison. Generally they’re very similar with Macs using ⌘ (Command) instead of Ctrl, but some are different such as Print Screen and using Explorer / Finder.

General

PC

Mac

Windows / Command Key Windows (Next to Alt)
Alt / Option Key Alt
Cursor Start of Line Home ⌘ + Left arrow
Cursor End of Line End ⌘ + Right arrow
Find Ctrl + F ⌘ + F
Find Next F3 ⌘ + G
Cut, Copy, Paste Ctrl + X, C, V ⌘ + X, C, V
Undo Ctrl + Z ⌘ + Z
Redo Ctrl + Shift + Z ⌘ + Shift + Z
Print Screen Ctrl+ Prnt Scrn ⌘ + Shift + 3
Print Selection 3rd Party Software ⌘ + Shift + 4
Print Window Alt + Prnt Scrn ⌘ + Shift + 4 + Spacebar

Explorer / Finder

 
Show Hidden System Folders N/A ⌘ + Shift + G
Open Computer Folder Win + E ⌘ + Shift + C
Show Desktop / Hide Applications Win + D ⌘ + H
Hide / Show Start Menu / Dock Ctrl + Esc ⌘ + ⌥ + D
Switch Application Alt + Tab ⌘ + Tab
Get Properties Alt + Enter ⌘ + I
Close / Quit program Alt + F4 ⌘+ Q

Internet Browser

   
Refresh Browser Page F5 ⌘ + R
Clear Cache / Browsing History Ctrl + Shift + Del ⌘ + Shift + Backspace
Dev Tools (Chrome/Firefox/Opera) Ctrl + Shift + I ⌘ + ⌥ + I
Dev Tools (IE) F12 N/A
Inspect Element Ctrl + Win + C ⌘ + ⌥/Shift + C
Clear Console Ctrl + L Ctrl + L

Recovery / Troubleshooting

   
Boot from CD F10 / Bios Hold C
Boot in Safe Mode F8 Hold Shift after Apple Tone
End Unresponsive Program Ctrl + Alt + Del ⌘ + ⌥ + Esc

Project Review – Fringe Furniture

I’ve been learning web development for well over a year now and thought I’d review this recent project for a furniture and interior design company based near me in East London. This was my first major project and a great opportunity to gain experience.

Brief

Their previous site was hard to navigate and the images were small and lacked optimization. The requirements for the new site included the following :

  • Bespoke design
  • Easy to navigate
  • Display over a hundred project images

I initially created some mock-ups to improve my Photoshop skills which they liked, but I felt were too formulaic. A graphic designer friend Adam Mitchinson happened to be available and I commissioned him to produce 4 homepage ideas. Fringe have a great portfolio of images and the following design was chosen for the use of full screen display and simple navigation (Fig 1).

Fringe Initial ideas_presFig 1 – initial homepage design

A new requirement arose in that the client wanted the site to differentiate between the two sides of the business, as the old site had caused confusion in the past. This turned out to be the key issue and without it the new site might not be needed they felt. After sketching some ideas and trying to keep things as simple as possible, I thought of having a separate menu for Furniture & Interior Design which we all agreed on.

Responsive Template

I’d always wanted to make the site responsive (one that gives an optimal viewing experience on different devices) and knew the simple layout would work well on mobile and tablet devices. Starting the new project was quite daunting but Initializr, which is based on the HTML5 Boilerplate Framework, gave a great starting point to build on (Fig 2).

Screen Shot 2014-04-07 at 20.37.22Fig 2 – initializr.com

The responsive template gives a basic design instead of a blank page and includes the following :

  • Mobile first responsive CSS template
  • Normalize.css
  • Modernizr.js
  • Google Analytics script
  • Optional humans.txt, robots.txt, .htaccess

Progressive enhancement is a Responsive Web Design concept where basic content and functionality should be accessible to all web browsers and the site is enhanced for larger platforms. Therefore using the mobile first CSS template made designing the site a lot easier.

Normalize.css, is a way of preserving browser default stylings as opposed to resetting everything using a reset.css file. It also corrects some common bugs that are out of scope for reset.css like display settings for HTML5 elements.

Modernizr.js, a JavaScript library to detect new HTML5 & CSS3 features which I used for the following:

  • Media Queries (can use respond.js or create separate stylesheet for IE < 9)
  • CSS transitions (IE < 10)
  • @font-face for Open Sans Google webfont
  • Rem units
  • Calc CSS3 property to calculate widths of bullets

The Google Analytics script is an inline script included at the bottom of the index.html file which I used to track the site for SEO purposes. The other optional files can be used to provide additional information about the site, restrict access to web crawlers and change access to web server directories.

Navigation

The site would essentially be a responsive dropdown menu and an image slider plugin, discussed later. The Initializr template navigation wasn’t suitable and I found this excellent tutorial on Tuts Plus.

webtuts-navFig 3 – responsive navigation tutorial

In the mobile view, the dropdown navigation would be placed underneath the main image, so as not to obscure it when expanded. The order of the HTML content would therefore need to be changed and considered the following CSS display properties:

  • display: table-header-group & table-footer-group
  • display: flex
  • display: absolute

Using display: table-header-group would mean using tables for layout which is not best practise and flexbox wasn’t properly supported, so I opted for absolute positioning.

fringe-navFig 4 – dropdown navigation using hsla

The dropdown menu would need to be semi transparent as above and was achieved using the hsla CSS property. Rgba could also have been used, but hsla made creating color variations on the fly a lot easier and makes more intuitive sense. Increasing the second value will increase the saturation of the color and decreasing the third value will decrease the lightness.

nav li ul {
  background-color: rgb(0, 192, 181); /* fallback value */
  background-color: hsla(177, 100%, 38%, 0.6);
}

To animate the dropdown menu I initially used the hoverIntent.js jQuery plugin, but this caused issues when changing orientation on iOS. CSS transitions where a much better option as they could be controlled using media queries. Adding a delay to the transition on hover mimics the hoverIntent plugin and prevents the menu from showing inadvertently.

.example {
  transition: [property] [duration] [timing-function] [delay];
}

nav li.navA ul, nav li.navB ul, nav li.navC ul {
  top: 0; 
  transition: top 350ms ease-in;
} 
    
nav li.navA:hover ul, nav li.navB:hover ul, nav li.navC:hover ul { 
  top: 100%;
  transition: top 350ms ease-out 350ms;
}

Image Slider Plugin

The site would need to show over 100 different project images, so an image slider plugin would be necessary as I didn’t have the time or experience to create my own.

royalsliderFig 5 – royalslider.com

I’d read in Net Magazine about the Royal Slider plugin and felt it was perfect because of these features:

  • Modular, so only features that you need are included improving performance
  • Touch friendly for iPad / tablets
  • Responsive to mobile
  • Good knowledge base & support
  • Auto image scaling options, necessary for full screen images on varying display sizes

I wanted the images to be vertically centred and used the slider fill mode. Being a responsive site however, the height of the image would first need to be determined as it would vary for differing viewport widths. I wrote a jQuery function to determine the viewport height and then assign the image height and widths to the slider configuration object. The image would also need to be centred when the browser was resized and I created a resizeWin function that was triggered on either the resize or orientationchange events.

Responsive Images

One of the challenges of having full screen images was how to optimize them for different resolutions. Loading a 1900px image for a mobile device that can only show 640px is a waste of bandwidth and would cause it to crash in most cases. I created three copies of every project image with the following sizes:

Image Width Avg File Size
Small 640px 45 – 80 KB
Medium 1280px 100 – 250 KB
Large 1900px 300 – 500 KB

Fig 6 – image size comparison

Initially I created them all manually in Photoshop which lead to RSI problems I mentioned in my previous post. When a new set of images needed to be added, I looked for a way to automate the process.

grunt-screenshotFig 7 – gruntjs.com

I use Twitter and go to a lot of meetup groups to keep to up to date with the latest technologies and heard about the Grunt Responsive Images plugin. It took a while to setup, but once configured it created all the files (about 300) in about 10 minutes. Before when I’d used Photoshop manually, it had taken over a day so quite a time saving!

In order to load the different image sizes based on the viewport width, I used a responsive image script. The small image is loaded by default and the script changes the src url to either the medium or large image determined by the viewport width specified in the CSS media query.

<img class="rsImg" src="/bath1-sml.jpg" data-medium="/bath1-med.jpg" 
data-large="/bath1-lrg.jpg" />
body:after { /* media query script */
    visibility: hidden; 
    content: 'tablet';
}

The downside of the script is that the small image is always loaded, so an extra HTTP request is sent per image where the viewport is greater than 640px wide. The <picture> and <srcset> elements will be a better way serving responsive image in future once the spec has been finalised.

Browser Testing & Future Improvements

I developed the site in Windows XP and tested the site back to IE7 using Multiple IE’s which installs IE 6-8. IE 9 and above are not supported on XP and I used a separate partition with Windows 7 and IE 9 & 10. For Apple support I used a newly purchased Mac Mini, a first gen iPad and iPhone 4.

For my first main project I’m very happy with it and the client was pleased and managed to incorporate all the changes he wanted. A few improvements I would like to make in future:

  • Convert CSS into SASS
  • Use <srcset> instead of responsive image script
  • Improve JavaScript code by creating a namespace object to remove global variables

The site is hosted on Github as a private repo due to licensing restrictions of the slider plugin.

fringefurniture.co.uk

Relieving Repetitive Strain Injury

Whilst creating multiple images for a recent project, I developed Repetitive Strain Injury (RSI) and it was excrutiating I can tell you. I’ve since automated the process which I will be reviewing in a future post, but still suffer from it occasionally. Knowing others who have also experienced this, I thought I’d post some recommendations my sister gave me who’s an osteopath.

Wrist Bend & Flex Exercise

Wrist Bend Exercise

Wrist Bend

Wrist Extend Exercise

Wrist Extend

  • Stretch your arm out keeping it locked
  • Use your other hand to bend / extend your wrist, keeping it relaxed
  • Hold for 10 and repeat 3 times for both sides

These exercises have helped a lot and I do them at the end of the day or if I feel any tension in my hand or wrist.

Mouse Size

My mouse was too small causing  me to grip the sides which produced tension in my thumb and little finger. I now use a Magic Trackpad, having purchased a Mac recently and that too has helped. Windows functionality is very limited for PCs however, and may purchase a Logitech Trackman in future. They take a while getting used to, but remove any tension caused by gripping the mouse.