Darren Woodiwiss

Let's Look At... Parcel

Darren Woodiwiss — Mon, 29 Jan 2018 20:10:48 GMT

What is it?

So Parcel is another module bundler, similar in ways to Webpack or Browserify.
But this one claims to "just work", so let's take a look! 👀

Let's Get Started

I'm pretty much just going to follow the official Getting Started.

Let's create somewhere to work:

$ mkdir project-1
$ cd project-1

And install Parcel:

$ npm init -y
$ npm install -g parcel-bundler

Now let's add some basic files, your typical kinda thang.

.gitignore

# General
*~
.DS_Store
node_modules/

# Parcel Related
.cache/
dist/

index.html

  
  

  
  
    
      Parcel Test

app.js

console.log('hello');

It should look like this:

.
├── .gitignore
├── app.js
├── index.html
└── package.json

Now let's see what Parcel can do!
$ parcel index.html
...
This actually gave me the following error:

async function bundle(main, command) {  
      ^^^^^^^^
SyntaxError: Unexpected token function  
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:542:28)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

From a quick Google search, it turns out async functions are only supported in Node.js v8 onwards. My (quite outdated) v6.9.4 of node needs to be upgraded!

Node Issues (Can Skip)

I use nvm, so updating my local version of node was as simple as:

nvm ls-remote to list the available versions nvm offers.

...
v8.8.1  
v8.9.0   (LTS: Carbon)  
v8.9.1   (LTS: Carbon)  
v8.9.2   (LTS: Carbon)  
v8.9.3   (Latest LTS: Carbon)  
v9.0.0  
v9.1.0  
v9.2.0  
...

From this output, I decided to install v8.9.3 as it's the 'Latest LTS' (Long Term Support), so probably good for a while:
nvm install v8.9.3

To make sure v8.9.3 is used next time I start a new terminal session:
nvm alias default v8.9.3

Might as well update npm while I'm at it:
npm install -g npm

Let's check everything is good to go:
node -v && npm -v

  v8.9.3
  5.6.0

Success! 🎉

Now let's try Parcel again:
parcel index.html

zsh: command not found: parcel

So upgrading Node.js wipes out all your globally installed packages 😑

Let's fix that quickly

npm install -g parcel-bundler

Ok back to Parcel...

Where were we?

NOW LET'S TRY PARCEL AGAIN:
parcel index.html 🤞🏻

⏳  Building...
Server running at http://localhost:1234  
✨  Built in 217ms.

Nice! 😎

So that should be now running on Parcel's built in dev server, pretty cool.

My project directory now looks like this:

.
├── .cache
│   ├── db8235d6812b5c8a7f0fa52459aa5e24.json
│   └── f67a21878735da127d156ff98c298c6c.json
├── .gitignore
├── app.js
├── dist
│   ├── index.html
│   └── project-1.js
├── index.html
└── package.json

(To print out the directory structure above, I've used the tree command, specifically tree -a -I '.git' which ignores the .git directory to keep things readable. You can install 'tree' via your typical apt-get install tree or brew install tree)

Since running parcel index.html, we now have two additional folders

.
├── .cache
│   ├── db8235d6812b5c8a7f0fa52459aa5e24.json
│   └── f67a21878735da127d156ff98c298c6c.json
├── dist
│   ├── index.html
│   └── project-1.js

/.cache contains magic 🧙🏻‍♂️
/dist is served up to the browser and should look pretty familiar

/dist/index.html has been updated to include the full path to the newly compiled /dist/project-1.js file:

/dist/index.html

/index.html

And /dist/project-1.js contains all kinds of crazy. Most of which you can happily ignore, but things Parcel needs to do it's thing in browser. Things like 'Hot Module Replacement' and 'Friendly Error Logging' etc.

So making changes in my original files:

.
├── app.js
├── index.html

Triggers a re-compilation and browser injection (not full reload, unless needed).
This becomes especially useful if you're working on stateful elements (such as dirty form fields) as the whole page won't reload and loose your browser's current state.

So making the following changes in /index.html

Parcel Test

Parcel Testing

and in /app.js

console.log('hello');

console.log('hello1');

(The creativity... I know!)

Causes the browser to simply inject the changes, which you can see because the 'Console' has kept the initial log (a full refresh would wipe the 'Console' history based on my DevTools settings).

So, not ground-breaking stuff... But considering how simple that was (minus my personal problems with node versions) it could be quite a powerful tool for getting quickly set up on simple projects.

I'm not sure how it fares when projects get really big or how easily you can customize the, but thinking back to my first foray into Webpack a few years ago - this was a breeze!

Geolocation with Meteor (Proof of Concept)

Darren Woodiwiss — Sun, 05 Jul 2015 11:00:00 GMT

This weekend I looked at some technologies that I felt would be useful for a side project of mine. While the side project isn't fully figured out yet, I wanted to assess the feasibility of some of the concepts. That lead me to revisit the HTML5 Geolocation API, as well as a framework that has continually peaked my interest for a while, Meteor.

It was surprisingly quick to get something up and running, with my desired functionality. The app uses the HTML5 Geolocation API to send the users location data to a MongoDB collection, that is then used to display the users location on a Google Map.

While this is just a proof of concept (and the code is not production ready), it was really quick and easy (using Meteor) to get something up and working to test.

Feel free to view the code on GitHub.

Arizona Night - Atom Theme

Darren Woodiwiss — Wed, 25 Feb 2015 12:00:00 GMT

Having recently checked out Atom Text Editor. I thought I'd share some of the cool things I saw, as well as introduce a theme I created for the editor - Arizona Night.

At the moment, my preferred graphical text editor is Sublime Text (3), I like how lightweight it feels, but also the plethora of packages it has available. I find this a really important feature to me, as it allows the community to create cutting edge packages for new technologies and languages - typically faster than the editor vendor can provide.

"A hackable text editor for the 21st Century" - atom.io

Atom is another lightweight text editor, but it's developed under an open source license. What this means is, quick release cycles and great community support. It also features a similar package system to Sublime Text's Package Control plugin - right out of the box. Oh, it's also free!

What was also really appealing to me, is that Atom is built using web technologies, using electron. What this means is that, if you're a web developer you can probably create a package quite easily, without having to learn a whole other language just to do so (although learning new languages is a good thing, it can be a barrier).

Arizona Night Theme

Introducing Arizona Night; a low contrast, purply theme. Geared towards low-light code sessions.

The theme is available via the built-in package manager, just search for Arizona Night within the Install > Themes section. It's still a work in progress, so expect to see changes and tweaks later down the line.

Feel free to also view the project on GitHub.

Packages

When you start out with Atom, you have just the 'core' packages installed. Typically you'll want to install some cool packages to tailor the editor to your workflow. From my initial experience using Atom, I found the following packages really useful:

Atom Alignment

Atom Alignment allows for you to quickly align text using custom keybindings. Pretty useful if you like clean code as seen above.

Oh, you might also notice the above example has nice color previews, that would be...

Pigments

Pigments provides an inline preview of references to colors within your code. This includes hexadecimal values #87658c, RGBA rgba(135, 101, 140, 1), color names purple and it even parses the outcome of mixins lighten($primary-color, 50%);.

Conclusion

Atom will be the text editor I recommend to beginners in the field, but perhaps for the more experienced, I feel Sublime Text still has the edge when it comes to feeling quick and responsive when dealing with large projects. Hopefully Atom will continue to improve and evolve over the years. For now I will be sticking with Submlime Text 3 and Vim :)

TransMedia Show Website

Darren Woodiwiss — Tue, 15 Apr 2014 11:09:20 GMT

What is TransMedia?

TransMedia is an annual event held in association with the University of Winchester. It's purpose is to allow students on the Digital Media course to engage with industry.
The event consists of students showcasing their work undertaken while studying their degree. This encompasses the first, second, third & masters students.
The event also hosts a 'pitch your project' competition, which is included as part of the third year assessment. This post shall present the process I took, in creating websites for the event.

Backstory

The event has ran for four years now. During the first two years, the event did not have a website or web presence. This obviously affected the marketing of the event and in effect reduced engagement with outside industry.
In 2013 I was an hourly paid part-time lecturer, working on the Digital Media Development couse. I decided to volunteer (in my spare time over the Summer) to create a simple website for the university to promote this event. My reason for doing this, was primarily to help the students engage with industry and ultimately help them find jobs / placements. Having been through this process myself, I understood the importance of having industry attend the event.
I then revisited the website in 2014 and revamped the site.

Problem

As mentioned the event did not have a existing website and had very little online marketing material.
I created one site for the 2013 event, then another for 2014.

The process below will largely document the 2013 website. As for 2014, the branding was kept consistent.

So I set out to create a simple website that was in keeping with the existing branding.
At this point the branding was fairly non-existent, except a logo that was created by Valia Kalfa (at the time a second year student).

At this stage I had a fairly blank slate to start with. So I sketched out some layouts based around what content I believed we might have available.

As this was also my Summer side-project, I decided to indulge in some development frameworks that had peaked my interest during the year.
For the backend I choose to explore Laravel, a PHP framework using the MVC software pattern. A few reason for picking this framework:

I was personally interested in the framework.
It was compatible with the server we currently had.
It had nice features such as migrations, similar that found in Ruby on Rails.
Compatible with my existing deployment process (Capistrano), so ideal for professional future maintainance.

As for the front-end, I decided to check out the latest version of Twitter Bootstrap (at the time version 2). A few reasons for selecting this:

Speed of use.
A responsive grid system, ideal for cross browser & device useability.
Ability to rapidly prototype ideas and experiment.

The design process for this project mainly took place in a browser. This was due to the fact I wanted to make use of Twitter Bootstrap's ability to quickly prototype layouts and assets. Also it allowed me to further explore the framework and acquaint myself with the components available.
The decision to keep the design phase in the browser worked in this instance, because no client was technically involved.
I was also experimenting with colours and fonts in the environment they would be used - a browser.

I suppose the downside of a quick workflow like this, is that it's hard to preserve a progression of ideas.

After much experimenting and exploring on Google Fonts, I decided upon the font pairing of:

Header: Muli
Body: PT Sans

I feel the choosen fonts have a clean and fairly neutral look, but also have a modern feel compared to most default fonts.

Moving onto colours, for the primary colour a dark blue was selected. Primarily for the reason it has a neutral feel and gives off a professional look.

I explored other colours (as seen below), as I wanted to do something eye-catching for the website.

I used this palette to randomise the brand colours of the website. This was a technique I used on my personal portfolio website at the time - and received good feedback from doing so.
I felt the technique would be suited to this website, as this one website had to cater to all the students different personalaties and styles.

Outcome

Here you can see the final outcome of the project (the logo should read TM13, but at the time of blogging I had already updated the logo).
I decided to go for a modular layout regarding the content. This allowed more flexibility when adding more content in the future.

Below you can also see the changing colour palette when the browser is refreshed (Please excuse the .gif quality).

Update

Since the TransMedia 2013 show, I have once again visited the website over my Summer break.
For the 2014 show, I choose to re-develop the website using WordPress for the backend and Zurb Foundation for the front-end.

My reason for this was that while the 2013 website had a CMS and was quite easy to use, end-users and students seem to prefer the look and feel of Wordpress.
As for switching out Twitter Bootstrap for Zurb Foundation, this was just a personal preference - largely due to Zurb Foundation including HTML5 form validations as standard.

The TransMedia-2014 website can be viewed here & below.

You might notice that I have also removed the alternating colours, I believe simplifying the colour palette will help the brand in the long-term.

Reflection

Having given the TransMedia Show a web presence, I feel happy with the outcome. I feel the end result could be much better, but given the timeframe and resources - It does the job.
From the 2013 website to the 2014 website, it always feels like a mad dash to get it done in time. This is usually due to varying reasons, but hopefully going forward this is a solid base for the website to grow.

It's hard to weigh up the outcome in a statistical format, as promoting a show relies on many people and many different factors.

3.15% more visitors are exploring additional pages of the website (bounce rate, lower = better).

Below you can view the Google Analytics of the site to date.
The initial spike was the 2013 website & then second being the 2014 website.

Unsatisfying the 2013 website generated more unique visitors than the 2014 website. But again this is most likely due to the marketing channeling traffic to the website.

The data I find the most interesting is the 'Average Visit Duration' and 'Bounce Rate'.
The average visit length has increased by 1.3%
And 3.15% more visitors are exploring additional pages of the website (bounce rate, lower = better).

All in all I am glad that I took on the task of looking after the TransMedia website. I feel it has been beneficial to the Digital Media course at The University of Winchester, while also beneficial to the students.

Hopefully for 2015's event, a better website will be in place. But ideally the existing website will now set the foundation.

Thanks for taking the time to read :)

Creative Network South

Darren Woodiwiss — Mon, 14 Apr 2014 00:31:07 GMT

Digital Media Network Talk

21st January 2014

I was recently approached to give a talk about my career to date, at a local networking / conference event in Winchester called Creative Network South.

I happily accepted the offer and prepared some slides for the event.
I based my slides around my student years and the transition from studying to working in industry. I tried to keep the advice practical and honest.
The slides might not make much sense without me speaking over them though.

I feel the talk went well and I received positive and useful feedback from the event.
I also noticed quite a few students attended, which is good as that was the audience I was aiming at.

While public speaking doesn't come naturally, I did enjoy the experience and hope to do more in the future.

Someone in the audience nicely captured the gist of the talks in an awesome sketch. You can find more out about Drawnalism here.

Total Theatre Edinburgh Festival Fringe App

Darren Woodiwiss — Fri, 23 Aug 2013 16:00:00 GMT

I have recently just finished an app for Total Theatre to promote the Edinburgh Festival Fringe.
The app allows users to view data (provided by the Fringe office) showing the different shows happening throughout the festival.

This data is updated via the provided API and allows access to see times, descriptions, categories, venues etc.

The functionality we required wasn't actually possible directly with the API, so most of the project time was spent coercing the data into what we wanted. This eventually required the use of cron jobs and JSON data being stored and heavily filtered on the server side.

I also choose to use AngularJS for this project, which has been a fairly smooth process. I am happy to have made use of the ngAnimate features to switch between views within the app. The ngAnimate directive is currently in the unstable / edge build, but has worked alright so far.

The project had a fairly snappy deadline to coincide with the early stages of the festival, we knew this would be a difficult feat - but this process will be useful for when the app is re-launched and perfected for next years festival.

Unfortunately the launch also coincided with the downtime of the Apple Member Center, which threw things off by a few weeks - but we got there in the end.

Overall developing this app has allowed me to publish my first iOS and Android apps, which is a great feeling. It's good to finally get to grips with the different distribution processes and SDKs. Hopefully this is the first of many apps to come.

If you are visiting the festival, check out the app for some of Total Theatre's recommended shows.

Available now on Apple iOS or Android devices.

NUKO Agency

Darren Woodiwiss — Sat, 22 Jun 2013 14:21:00 GMT

Junior Web Developer @ NUKO Agency

4th March 2013 - 28th June 2013

While a student at the University of Winchester I negotiated an internship at Remarkable Group.
This was a great opportunity and helped expand my PHP and jQuery skill-set, all while making some good connections.
I later returned back to the company's digital division, but under it's new name Nuko Agency.

Here I was able to get to grips with WordPress and also further expand my network of contacts. Since leaving I have returned to do some freelance work when needed.

Below are some of the projects I worked on:

While at Nuko, lots of time was spent on HTML marketing and micro-sites.
As well as many internal sites on their Consultation Online system.

The University of Winchester

Darren Woodiwiss — Sat, 22 Jun 2013 14:20:00 GMT

Associate Lecturer @ The University of Winchester

September 2012 - January 2015

In 2012 I graduated from The University of Winchester with first class honours, having studied on the Digital Media Development(BSc) course.

Just before graduation, I was asked if I would like to lecture on the Digital Media course. I was very honoured and accepted the responsibility right away.
As I had already negotiated a full-time job at Marmalade on Toast, I started off part-time lecturing the second year cohort on a Tuesday afternoon.

The demand for a developer lecturer on the course grew, to the point now where I'm working full-time teaching all the code & developer related content on the programme.

This experience has been great and has provided me with a considerable understanding of both sides of academia. It has also allowed me to work with some enthusiastic and driven students/colleagues while solidifying my own knowledge on the topics I'm teaching.

A few topics I lecture on are:

HTML & CSS
- Zurb-Foundation
- HTML5Boilerplate
JavaScript
PHP & MySQL
- Laravel
Unity3D
- Vuforia
- Oculus Rift Integration
Git
3D Printing
And more...

Quite a diverse range of topics, but I like to keep my skills current - to reflect the demands of industry & to satisfy student requests.

I seem to get great student feedback, so I must be doing something right!

Some of my slides can be found on SlideShare.
Although I'm not sure how they fair without me talking over them & fancy slide transitions ;)

Since lecturing I have also started to organise & host internal hack days for the students to attend. This has so far proven quite popular and will hopefully grow in strength.

Project on Github
For the last hack day of 2013, I also created a small website (in nodejs & express) that required the students to use web developer tools to explore the source code / console - in the aim to answer riddles to progress. I gained good feedback from this, so will try to do more in the future.

p.s. The details for /riddle1: username: admin, password: 9876. This info was written on a post-it note stuck on the raspberry-pi hosting the app at the time - The hack day theme was security.

If you are interested in potentially guest lecturing, get in contact.

Marmalade on Toast

Darren Woodiwiss — Sat, 22 Jun 2013 08:21:00 GMT

Web Developer @ Marmalade on Toast

25th June 2012 - 11th January 2013

After graduating university, I contacted Marmalade on Toast to see if they had room for an extra developer. I was lucky enough to contact them at the right time and ended up doing some full-time contracting for them.

Below are some of the projects I worked on:

Among others...

The Awesome of Sinatra

Darren Woodiwiss — Wed, 20 Jun 2012 14:22:00 GMT

Why awesome? Having used the Ruby language for around a month now, I decided to dive right into learning Rails. While I feel progress has been great so far, I wish I had known about Sinatra sooner. a nice introduction to Sinatra can be seen here What really appeals to me is the ability to quickly test out ideas, in an environment prettier than irb (no offence irb!). This has provided a more visual way for me to experiment with pure ruby code.

Bootstrap

Having recently used Twitter Bootstrap on a small personal project, I decided to see if I could merge the two frameworks. I eventually came up with sin-strap. It's a pretty simple boilerplate that contains both frameworks, ideal for rapidly prototyping ideas or just messing around. Feel free to fork, clone, pull the repo. Comments always welcome!

Riddle Route

Darren Woodiwiss — Wed, 11 Apr 2012 14:22:00 GMT

Project on Github

Over the past few months I have been hard at work on a university project called 'Riddle Route'. I have worked collaboratively with Katya Lukjanova (an MA student) to bring the project to a semi-commercial level for the Winchester Cathedral. The project itself is a web app that utilises QR Codes to provide a treasure hunt style experience for the cathedrals younger visitors. The cathedral frequently has small groups of children visit, typically on school outings. The cathedral wanted to provide a modern approach to the children's learning and attempt to engage them more, sometimes in issues too complex for them to fully grasp. The basic premise of the app is that the visitors use a QR Code scanner on a mobile device to scan the codes strategically placed around the cathedral. Then the visitor is presented with a riddle and an input box to answer the puzzle. What also helps to enhance the experience is that the app records the users score and presents them with a visual score screen at the end of the tour.

To achieve this quick storage of the scores, I decided to use HTLM5's localStorage feature. Here is a brief example of how I went about storing the data in localStorage:

$url = 'riddle1';
$currentScreen = 'incorrect';

function scoreStore(){  
  localStorage.setItem($url, $currentScreen);
};

function scoreTotal(){ $a = Array(); for (var key in localStorage){  
    $a.push(localStorage.getItem(key));
  };
};

The reasoning for this was, phone signal strength is fairly intermittent around the cathedral. Using localStorage allowed for the user to store a persistent score, without having to keep connecting to a remote database. I feel this worked out pretty well in the end. Upon completing the tour, the child can obtain a certificate from the information desk that they then sign, to show they have completed the tour. We recently ran a field test with a small group of children at the cathedral and received some really positive results. This approach has proved successful so far and has helped to engage with the young visitors on a deeper level. We are now at a stage where we will put in a bid for funding to further the project. Hopefully once things are organised, I'll be able to include a preview of the app on my site. All in all, it's been a really interesting project and I'm glad I got involved.

Octopress

Darren Woodiwiss — Wed, 22 Feb 2012 12:00:00 GMT

Update It's been quite a while since my last blog post, due to work and various university side projects. Over the next few posts I'll be trying to give a more detailed view of what I've actually been up to. In the mean time, I'll discuss my new website woodiwiss.me. To kickstart my blogging brain back into gear, I have decided to re-vamp said website. One of the biggest changes, is switching my blog platform over to Octopress. Opposed to the old one which was using the ever popular WordPress. My main reasoning for this was that I wanted a lighter and easier way to manage my blog, while keeping full control over my site. So far Octopress has ticked all the boxes for me. I just need to find the time to re-theme it! I'll try to explain some of the epicness of octopress below.

Perks

Switching to Octopress has yielded many personal benefits. Here are a few of the cool features I've enjoyed so far:

It's responsive straight out of the box. Try to resize your browser now and it should adapt to the space available. This helps with the readability and efficiency, especially when loaded on mobile devices. You can also demo the responsive nature of the site here.
Posts are written in markdown, then pre-processed into HTML. So while writing a blog post I can be pretty confident that it will display as I indent it to. This keeps my mind focused on the content of my posts, rather than the code required to display it.
Octopress doesn't require a database. Octopress serves my pages as static content. While this enhances the security of my site, it also removes the dependency of a database to store posts on. While there are possible downsides to this, I personally find this approach to be quite liberating.
SSH & R-sync to push new posts to my live server. Linking to the last point, opposed to a database I have a folder called 'posts' with all my markdown files in it, I also have this hosted on Dropbox. This allows me to access the files on my iPad and create posts while on the go, or while inspiration strikes. When I return home, the post are waiting for me and can be deployed with 2 simple commands:

$ rake generate
$ rake deploy

Then my live site is updated and good to go. There are many other awesome features to Octopress that I haven't covered, but if you've read this far it may be worth checking out.