The move to London

At the end of May I moved to London, leaving Evoluted and Sheffield.

DSC_0139
Peak District

To the next adventure…

20140719_151121-EFFECTS
On top of monument

 

I’m trying to go to as many developer meetups as I can, so far I’ve been to the London API meetup, and this week Justsharing and the Angular JS meetups. More on that later…  If you have any other suggestions tweet me @olliemcfarlane

The annoying back button

Blogger has the most annoying mobile UX feature I have come across lately. The swipe and back action.

The back that doesn’t actually go back, but always to the list of all blog posts. So if you have a table that is larger than the screen size, you go right to view it, then back left.. and you’ve gone back to the home page…
Even when a page is properly formatted with no left or right scrolling, when would a swipe right to go back be good UX for a webpage? It’s not consistent across websites, I already have a back button on my mobile and there is no hint that swiping goes back, until you do it.

Screenshot_2014-07-26-11-19-20

This is an example, of an idea that seemed clever at the time, but actually damages the users experience.

Chart.js

I haven’t updated the blog in a while I know!

I was going to write a nice piece on new company, new developments, but that’ll have to wait for another day.

For now a lightweight charting library that’s just hit version 1. Chart.js

Includes Line, Bar, Radar, Polar Area, Pie and Doughnut which should be enough for most projects. The best bit is you can only include the js for the charts you actually use, making it even lighter.

Italy 2014

Almost a month with no post, the longest wait yet. I’ve been very busy recently, setting up a new company, more details on that later.
I haven’t yet written a non technical post on this blog, its easier to stick to ‘facts’ and tutorials. But I’ll give it a whirl, in a lazy short description kinda way. I’ll get more photos later.

I have just returned from a trip to Italy, visiting Lake Como, Milan, Florence and Pisa in that order.

Lake Como, a great place to relax. Boats, towns, very green. Get to the top of one of the hills, a great view, and some random waterfalls too.

20140513_122530
Milan, busy hectic, with character. Quite the change from the lake. Public transport is well connected. Impressive cathedral.

Florence, interesting, historic, walk-able. Easily spend many days looking around all the museums. Lovely in early morning, tourists by the coach, after coach, after coach load by lunch.

Pisa, Impressive tower and cathedral, random classic cars. After those are ticked off, I’m not sure what you’d do. You will never be short of fake bags and sun glasses.

Lessons learnt; Service stations have restaurants that are over the motorway which is very exciting, and sell legs of Parma ham. The Fiat 500 is a fun car. You can use your credit card pretty much everywhere. Indicating is for special occasions, and stopping at pedestrian crossings is determined by a in the mind dice roll. Everywhere does clams and spaghetti. I still don’t know why there’s first and second dishes.

Karma

I have recently started using Karma a test runner for JavaScript that runs off Node.js.  It then tests your JavaScript using a testing framework, like Jasmine, in a real browser!

karma
The YouTube video does a great job explaining what it does, and how to use it. They changed their name from Testacular, so that’s why they keep mentioning it in the video.

The best feature in my opinion is the watching of your JavaScript source, so as soon as you save a .js file in sublime, the test runs in your console. Instant feedback on what you’ve broken!

Stripe Module Version 1 beta for Prestashop released

More info and download – Stripe Prestashop Module

I’ve just uploaded version 1 beta of the Stripe module for Prestashop.

This is a beta release, please report any bugs you find.

Changelog

Better Prestashop 1.6 support
Refunds fixed
Buttons fixed
‘White page’ crash fixed

Admin Improvements
Checks to see if you enter the private key in the public key field.
Strips white space around the key.

UI Improvements
Card logos only show after you’ve entered a card number.

Prestashop 1.6 Demo with Stripe test

I’ve setup a demo shop at http://mz-hosting.com/demo/prestashop1.6 its a clean install of Prestashop 1.6 along with the stripe module in test mode. The default theme is the best yet, looks great.

Go and test it out, test card details for Stripe below.

Number Card type
4242424242424242 Visa
5555555555554444 MasterCard
378282246310005 American Express
6011111111111117 Discover
30569309025904 Diner’s Club
3530111333300000 JCB

slick – responsive carousel

The carousel everyone’s talking about at the momentslick. A very nice looking responsive carousel with touch events, items, fading, add + remove and more.

slick

Looks good for a featured items, homepage slider and video list. I’d probably still use fotorama for image galleries, because of the large options for thumbnails and other more imagey specific things.

How to Install Gulp.js on Windows

A Mr Stewart Doxey requested a tutorial on installing Gulp.js on Windows.

Step 1 – Install Node.js

Head on over to http://nodejs.org and click install – this should use magic to figure out what OS and version.

Step 2 – Install Gulp.js

gulp-2x Open command prompt – (run cmd) then type ‘npm’ – if there is no  error you’ve installed Node.js correctly yay! Otherwise make sure you close and reopen command prompt if it was open during install. Or try rebooting – reinstalling, the usual.

Now type ‘npm install -g gulp’ this will install Gulp.js globally on your system. It will enable you to run the ‘gulp’ command in your command prompt.

You will now need to go ‘npm install gulp’ to locally install Gulp to your project root directory. You’ll have to do this for each new project where you wish to use Gulp.

Type ‘gulp’ it should say no gulpfile found this means its installed correctly.

Step 3- Setup your project

You need two files in your project, package.json and gulpfile.js. If you doing a Node.js project already you know about package.json, otherwise read on.

What is package.json? It’s a  file that tells npm what dependencies your code needs. It allows npm to install automatically all dependencies.

npm works on a system of not including your dependencies in your version control. So add node_modules to your .gitignore file. Simply add ‘node_modules’ to the bottom.

Grab your package.json and gulpfile.js files, ready made for your convenience. A special mention has to go to Myke for his SASS error display code in the gulpfile.js. – More on that later.

Plop these two files in the root of your project. Open your command prompt cd your way to there. Now run ‘npm link’. This will scurry away installing all your needed dependencies and using magical symlinks to link them into your project.

Install Complete

Step 4 – Configure your project

Open up gulpfile.js on Line 14, you configure your SASS directories you wish to watch. You may only want one, or ten, its all in JavaScript go mad.

logo-235e394c

Configure SASS

You must already have ruby-sass installed on your computer! if you don’t have this, you’ll need to google how to install ruby sass on Windows. I may make a tutorial on how to do that another time.

The directory to watch – in this example we are watching all files AND sub directories in the _scss/Site/ directory.

watch: '_scss/Site/**/*.scss',

The master sass file, we compile from this file.

sass: '_scss/Site/site.scss',

Output folder

output: './www/app/View/Themed/Site/webroot/css',

Output file name

name: 'site.css',

JavaScript-logo

Configure JS concatenation

We’re off to line 28 (in the original file, duh) to change the JS settings. Again you can watch multiple directories and output to multiple places.

Watch JavaScript files for changes

watch: '_assets/admin/*.js',

Output folder

output: './www/app/View/Themed/Admin/webroot/js/',

Output filename

name: 'admin.js',

Output filename minified

nameMin: 'admin.min.js'

This creates two version of your JS, a minified and non-minified, good for debugging.

Why Sass? Because its better than CSS
Why JS concatenation? Because fewer requests are better, and minifiying is the way to go.

All set!

Step 5 – Run it!

You should be able to run ‘gulp’. It should then go off and start watching all your files.

All new files you create are automatically watched! – This is why we are using gulp-watch instead of the built in watch script. No need to restart gulp.

SASS errors will be displayed in your  CSS, with a background colour and the error message. – Just refresh the page and you’ll see the error quickly and easily.

This script includes live reload so download the live reload extension to Chrome and once Gulp is running click the icon, it’ll change  a tiny amount, so you’ll end up clicking it a lot and turning it on and off. But when its actually synced your SASS changes will auto load into your browser as you press save. Pretty cool.

You may notice that the example gulpfile.js file has the directory paths for CakePHP setup. If you’re using that, lucky you!

Why Ruby Sass? Why not libsass? Alas, libsass cannot compile bootstrap or inuit. Once it can I’ll be happy to remove the ruby dependency.

Updated 02/04/2014 Fixed some errors in package.json  – Thanks to Sam