My development setup

I’ve been optimising and tweaking my development environment to try and get the most reliable and easy to use setup.

I use Windows, my main development machine is a Sony laptop, from experience trying to install Linux on a laptop will end in tears (especially this one where windows drivers only just work). If someone buys me a Macbook I’ll use it.

For development I’ve learnt a long time ago that windows is not great, missing dependencies, unreliable ports, annoying path problems. A virtual machine it is. I’ve always use CentOS for servers, so continued this for the virtual machine. No GUI needed, and its always good to have the same linux distro on dev and live.

I started by using VirtualBox shared folders to share files from windows. The problem with this is permissions and symlinks, the shared folder inherits the set permission and can’t have per-file or per-folder permissions. Symlinks just can’t exist with windows shared folders. Symlinks are really useful and losing them is a pain, the folder permissions cause problems when going into a live environment with proper permissions.

So I’ve switched to Samba network folders, so I can keep all the advantages of  the Linux file system whilst using windows as the development environment.
An important thing to do is map the network location to a drive, this greatly improves the performance of editing files on the virtual machine. Without the mapping there can be a couple of second delays randomly while editing a file in Sublime that can drive you crazy, map the location and all is well.

The Setup  For PHP, Node, Python and Go
Windows 8.1 Sony Laptop
VirtualBox CentOS Linux
Gulp
Sublime text 3

Centos of VirtualBox
CentOS on VirtualBox

 
I rarely shut down the computer, and so the virtual machine chugs along in the background happily. When I do need to reboot or properly shutdown I save the virtual machine state, so its always available instantly or a few seconds of resuming.
The best of both worlds, Linux development with Windows tools and software. I’m sure some people would say I’ve just described OSX. 😉

Gulp.js

After starting to develop my own Grunt plugins and using it for all my new projects, a new build system appears. Gulp.js

Not only is the configuration easy to read, and more logically grouped with build items. For example all the thing you do with JavaScript are together, concatenation, minification and linting.

It uses piping (streams), which is one the most powerful features on Node.js. Allowing you to pipe outputs around different plugins without having to continuously having to write and move around files.

It is also faster than Grunt due to it not writing as many files. There are 237 plugins available at the time of publish, which is great for a build system that’s only recently getting the attention it deserves.

The next project I setup I’ll be testing out Gulp.

Faker.js

I’ve sneakily changed the ‘code of the week’ to ‘code of a week’. I initially did every week to fill up the blog with some content to get it going, I feel there’s enough content now. So I will only add my favourite code when I discover them, whenever that may be.

Anyway, I am getting into authentic automated testing. I prefer to have real life tests rather than code base automated testing, – so using Phantom / Casper JS. I believe it swings the testing further towards real life than automated server side tests. I see cases in complex server side processing where server side test frameworks are essential, but for mainly customer facing web applications Casper works brilliantly.

To further increase the realism of the tests, Faker.js allows you to generate random fake data. Such as names, addresses and many more. Using this and Casper JS makes a very nice real tests.

Chrome issues

The latest version of Chrome (32.0.1700.76 m) is causing quite a few problems for me. The most annoying is the inability to select the last option on the select element

Its impossible to select the last option. 'Spanish'
Its impossible to select the last option. ‘Spanish’

 

The other problem is when debugging JavaScript, putting break points in and pausing code, even after resuming shows the please wait screen.

page-unresponsive

All in all, not a great update for Chrome. The drop downs seem to have a different design, as well as check boxes which now seem to listen to CSS styles, as they’ve gone huge on a few sites.

The mystery of the removed Prestashop Stripe module – Solved

Download and Latest updates – Stripe Prestashop Module

Updated – The module was removed because the contract with Stripe has expired, scroll to the bottom for more info.

I recommended Stripe to a client a mere month ago, safe in the knowledge that adding Stripe would be easy. There’s am official module available for free, it just needs installing an setting up, no problem.

But this weekend, I wander over to the Prestashop website, and absolutely no sign of the module, anywhere. Did I dream it? I searched Google, found many a reference to the module in the forums, but all links just went to the Prestashop Addons homepage. Maybe it was a free module that someone released, but has since removed? I then found a interesting post, someone said they had Stripe in an earlier version of Prestashop, but not the latest. It most have been included in core Prestashop as a ‘partner module’.

Happily, Prestashop use Github to store their code. We can look at the commit history to see what happened.

Stripe Removed

 

That is, on the 27/12/13 the Stripe module was removed from the ‘Partner Modules’ – The modules that are already there on a Prestashop install.

So.. Why was Stripe removed from Prestashop? The commit message gives no clues. The module doesn’t appear on their site anywhere else, and there has been no official announcement, even the forum moderators are confused.

The industry partners page (http://www.prestashop.com/en/industry-partners/payment/stripe) has been removed, redirected to their Payments page. – It seems PayPal who were a long time partner has also been removed. Have these contracts expired?

As it was on Git, I simply had to go back another commit to find the module, on version 0.9.7. I have added this to GitHub repository here – https://github.com/franksmule/prestashop-stripejs, and made an easy to use download link here -> Download Prestashop Stripe Module 0.9.7

I have checked the license, and I am allowed to redistribute this code under the Academic Free License.

I have asked on the Prestashop forums, why the module has been removed.

Thanks to Xavier for the response (Below, in comments). As he confirms, that contracts have not been renewed, so please enjoy the module above.

My eyes like f.lux

I have recently started using f.lux. I have tired it a couple of times before, over the years, but have had bugs or got annoyed with it whilst doing Photoshop work.

I’ve installed it again as it popped up on Hacker news, and this time getting along much better. This version has a 24 hour preview which is really fancy way of showing people how it works. It really does make a difference at night time with the yellow dim lights, eye strain is a lot better and I do feel its easier to go to sleep. It may be a placebo, but meh.

Code of the week – jQuery Plugin Pattern

I’ve developed jQuery plugins using a few different styles, but the one I’ve settled on and is currently my favourite is ‘jquery-plugin-pattern‘.

It gives you a very structured start that will help you avoid bugs, and quite importantly for me, be able to call plugin functions from outside the plugin without polluting the global namespace.

For example $('#my-id').plugin('doSomething', var1); instead of $('#my-id').doSomething(var1);.

Sainsburys salad bar pricing

March 2015 Update – Sainsburys Salad bar price increase!

It seems the prices have risen and the sizes have changed! Thanks for the updates (in the comments at the bottom of the page) from Susan, Mark and Jojo.

The sad news is, the small pot is no longer with us and prices have substantially increased.

Name Cost Old Cost Size ppm Old ppm Difference
Micro Pot  £1.49 99p 280ml 0.53p 0.35p 0.18p
51% Increase
Small Pot N/A £1.49 325ml N/A 0.45p N/A
Medium Pot £2.75 £1.99 500ml 0.55p 0.4p 0.15p
38% Increase
Large Pot £4.00 £2.99 980ml 0.41p 0.3p 0.11p
34% Increase

So the large pot is still most cost effective, and the medium takes the crown for worst value.


Details below are from January 2014

In what is certain to be the most important post of the year, we Ollie McFarlane and Stewart Doxey have investigated the sizes and costs of the Sainsburys salad bar.

Using science, the size of the salad pots were measured by filling them with water and seeing how many millilitres each pot size could hold. Using Stu’s abacus we can also get the per mill cost.

Name Cost Size Price per millilitre
Micro Pot  99p 280ml 0.35p
Small Pot £1.49 325ml 0.45p
Medium Pot £1.99 500ml 0.4p
Large Pot £2.99 980ml 0.3p

The shocking revelation is that the micro pot Large Pot is most cost effective, buy two micro pots not one medium!

We are currently looking for sponsorship to complete the investigation and test the large pot size.

Update: Funding has been received, and large pot added.

Find and Replace Prestashop Module

I had to replace some product text on a Prestashop website. It was repeated a fair few times through many products on the site. I needed to do a find and replace through every product.

You can do this in SQL easily enough, but why use SQL when you can have a module?
Find replace module

 

Download the module

Upload it and install in the normal way from the modules screen.

You can current find and replace within the following fields, one at a time.

Product Name
Product Description
Product Description Short
Category Name
Category Description

Remember, there is no undo, and find text is case sensitive.

Node.js and Websockets Synchronised Mice Code

This weeks code of the week is a tutorial on how to synchronise mouse movements across browsers using Node.js and socket.io, made by me, yay.

The code relays your mouse movements to all other clients connected. It draws your mouse movements as one icon, and other users as different icon. It also relays mouse clicks to other clients. This would be a great start to a multi-player game. It also keeps an up-to-date count of all users online and updates as users join and leave.

You can jump straight in and get the code from GitHub – https://github.com/franksmule/node-synchronised-mice

To get the code running download it from GitHub, run ‘npm install’ then ‘node app’.

Its dependencies (installed by npm) are;
Express – To handle the route, a good start for any site.
Handlebars – For the view, Jade is too different for me for quick projects.
Socket.io – For the websockets.

The server side code is all within app.js.

When a user joins the updated number of currently connected users to sent to all connected users. The cached locations of all connected user is sent to the new user allowing them to render everyone on screen immediately.

When your move your mouse, it is sent to the server which then updates every connected client with your new mouse movements.

On disconnection, every remaining user is sent the id of the disconnected user, the user is removed from the cache and the users online is updated.

The client side code is all within /public/js/main.js it requires jQuery.

When you move your mouse, the move is dampened to create a following rather than snap to effect. It is then sent to the server every 3o milliseconds if you have actually moved. This number can be increased to lower bandwidth and strain on the server.

The users are rendered as divs with a background image, when a new user is encountered the div is created, then subsequently updated with new location info.

The explosions are rendered when someone clicks, it renders a ‘boom’ div that is automatically removed after a second.

This is an example, and is not secure. People could hijack other users locations as sessions are not used. I will write a post about getting sessions working with Socket.io in the near future.