Will YES show in showcases (front-page folio items)
Will YES show in Listings (folio item lists)
Will YES show in Archives
Position relative to other items: BOTTOM
The #JavaScript30 is a 30 day challenge by Wes Bos, It comprises a series of mini-projects and exercises to look at core JavaScript features and browser API’s.
The challenge is to complete one challenge a day to a minimal standard and to use no external libraries, frameworks or compilers except for surface level aesthetics like fonts.
Since completing the challenge I’ve steadily upgraded and polished-off each project, striving to give each a unique twist or aesthetic.
If you’re new to JavaScript or looking to brush up your JS fundamentals I would highly recommend giving the #JS30 a go (with the free course), even if you’re experienced, you might still encounter some things that’ll surprise you!
With React-Redux on the front end for single page app efficiency, this app utilises local storage and MongoDB to allow the user to resume their progress on load but only save what they actually need. Security with Helmet.js, authentication with 3rd party Oauth2.
A simple tag system allows notes to be grouped and recalled quickly
I wanted to flex my new skills in a project that was clean, followed a structured project plan, and solidified my learned findings. I also wanted to mature some of my visual design work given my tenancy to flip back and forth on a design theme and make stuff up as I went along.
This app was built after projects such as Pinapathy and the Stock Price Viewer. I was proud of the things I had done and learned but still felt uneasy given how much I had to wrestle such things as getting Passport Oauth to work with React.
An example of matured responsive UI feedback; in the past I would toggle between items going lighter / darker on hover, on click etc
The code structure such as the server routes and packages needed, as well as the front end components and application structure were planned in advance, I was able to successfully reconcile some of the things that bothered me with the previous projects, and I achieved my goal of a super “clean” app, even if it’s functionality was not much of a push on my skillets as I would seek out in later projects.
UI features such as a drop menu which closes on out-of-bounds clicks and an unsaved-changes indicator.
A relatively early project, a full MEEN stack (Mongo, Express, EJS, Node) app to allow users to post poles with simple, bold visualisations displayed to others.
The app used an Express server with Passport.js for authentication and followed strict CRUD principles in the route layouts. Pages were templated from EJS partials and bootstrapped using Semantic UI. Poll results were visualised using D3.js.
Login modal using Semantic UI for the first time
This was a good project for feeling out if a CSS framework was something I’d like to use more of going forward (nope as it turns out) and developing clean code practices.
Another, larger poll with custom option capability
For instance, at the time I didn’t use Mongoose promises and was not yet using ES6 syntax so there’s a lot of ‘pyramid code’ yet the app is still clearly readable, something to perhaps take on board given that some later projects, while far superior on a technical count, are difficult to reverse engineer.
An example of callback-based Mongoose leading to pyramiding; every nested callback adding to the indentation
The Directions App was an attempt to reconcile challenges around balancing complex responsibilities and needs in day-to-day life, inspired by a personal need.
A new take on the classic “work life balance” dichotomy, the Directions App presented all actions and responsibility as equal, and aimed to offer ‘mindless’ task direction without simply creating to-do lists.
This was a significant project to me, it was my first proper Redux application and allowed me to hone in React knowledge that I had previously only uses in fits and spurts.
Much later on, the notion of non-coercive task organisation and my findings from this project influenced the “traffic light system”, a component of my project Boots & the Future of Wellness.
View the live demo and repository with the links or read on to learn the backstory.
Backstory
Ok so we’ve all built To-Do lists, you learn the basics of a new MVC framework and can easily test your work. Then maybe, while continuing your learning, you make a version with data-persistence, probably with localstore or maybe something like Redis. Then if you really want to, you can set up a database and save the data permanently which is a great way to practice React-Express integration.
If you desire more in-depth productivity and planning tools there is no end or free software available to help you ‘do more, faster and smarter’ or ‘take control of your work’ or ‘plan every last detail’.
I found myself in a personal quandary. I, as ever, had a lot going on in my life. I was slowly coming to the realisation that just powering through; working endlessly, pushing myself beyond limits, just wasn’t working. Day’s blurred into one endless stream of “stuff”, with five things demanding my attention at once, an endless wish-list of things I’d like my life to have (or not have) “once this is all over”.
I would burn out, I was kept physically fit by running about all day but my health took a beating with regard to diet, sleep, and of course, mental state.
You are a machine
Everyone has at least some experience of living like this and maybe gave or received advice that sounds something like “You’re not a machine, you’re a person, you need time to breath and do other things”. I agree with this sentiment broadly but I think it misses something: a ‘machine’ of most types does not run endlessly, without “rest”, or without “breathing”.
The definition of machine is broad but lets generalise of a second, imagine an abstract “Machine”. A machine can run for a duration of time then needs repair. A machine can run at sustainable levels for long periods. A machine can be pushed beyond it’s quoted physical limits but with the cost of quicker time-to-fail or malfunction.
I don’t know about you but that sounds like a pretty good description of a person to me.
A person is a biological system that has needs and conditions with affect their behaviour and abilities in their ‘functioning’, living day to day life. To take some easy exemplars, if you don’t sleep enough, you can put in all the extra hours that you like but won’t necessary be as productive. If you write something while caffeinated it may have a different read to something written in a more subdued state. If you do work while a little tipsy you may find you peak in creativity and inspiration but make sloppy mistakes and quickly drop bellow productive levels.
Here’s one I still struggle with, if you are stuck on a problem, taking time away, rather than trying to power through, can let your subconscious process it in ways you are unable to, leading to faster solutions. As intuitive as it may be to step away while the clock is ticking.
“This is not a task-list”
So how exactly do you balance things when you have five ticking clocks and now, the pressure to do this “self care” thing you just learned about?
You could try a simple planner and a to-do list but these both have the issue of making everything a “task” to finish. Is walking in a park a task? Reading a few pages before bed? What about things that repeat, like if you are job searching and need to do a little every day? Do you continue on weekends? How much do you do a day? How do you measure it?
The Directions App was an attempt at doing just this, it ordered all items with equal weight, utilising a tag system to differentiate them.
Priority: this denotes actual task items, things which need to be completed
Ongoing: this is used for tasks which repeat for a duration of time
Fun: used for recreational activities
Health: used for activities which benefit health and well being
Social: used to section social activities
In this way you could combine which would show items denoted by which filters were active. Looking to do something recreational but also healthy? Turn on ‘Fun’ and ‘Health’. Set some time aside for task work? Use ‘Priority’, and so on.
Looking back
I still have a fondness for this app even if I didn’t actually end up using it all that much after a while. It was a useful way to explore things which exist between boundaries such as something which is fun and enjoyable to do but is still ‘work’. I realised that by assigning everything a tag and grouping them together, I could see the interlink between various tasks but it didn’t work so well to actually designate time, to come up with that magic formula where everything is balanced and just falls into place.
On a stylistic note, it was useful for me to develop emerging styles and layout patterns which would be refined further later on, even if it looks somewhat garish now.
Unit three of the course dealt primarily with design from a user perspective, the torch project was an exercise in applying the design process to an every-day object with particular regard to emotional and functional considerations.
This project began with a simple, incredibly open brief, summarised by it’s title; that is “to design an Emergency Torch”. Being a shift away from previous project which focused on practical manufacturing knowledge, this contextual study left the door completely open for use to define what an “emergency” constitutes, and justify a design response.
An early design concept for a tubular light which holds a position decided by the user.
At the beginning of the project I was of two minds, on the one hand this task was to design within a typology that already exists, and necessitated finding a problem within that typology rather than starting with an identified problem and finding the most appropriate solution. In other words, it is what some would call ‘traditional product design’, object-orientated and consumer lead.
On the other hand, the emphasis on technical competency and refinement of function was very similar to what I was familiar with from the SQA’s preferred methods. This was a chance to really push and refine particular skill sets.
In addition, it offered an opportunity to identify a real problem and conceptualise a design solution which could, if actualised, help people in a genuine way.
In Scotland, engineering practice starts early. This is one of my earliest pieces of design work, a multi function display stand, produced at 13 years old.
My final design solution looked to provide an all-in-one device for survival situations where a torch may be all that the user has left, for example a vehicle crash or sudden natural disaster in a remote region.
Through research I identified four essential resources to have in such situations as being: Ability to start a fire, A survival knife or basic tooling, Energy generation (if any other electronics survived) and, by extension, light.
My final design functioned primarily as a torch with functionality built in to generate thermos-electric power and start fires using solid-state functionality.
Final Presentation BoardSecond Final Presentation Board
Reflecting back on the project I was pleased overall with the outcome, particularly with the iterative development of the products functionality and form, however the end solution was a bit ‘Jekyll-Hyde’ in that several typologies had been hybridised rather than their concepts synthesised.
Rather than create a combination of a survival knife and torch’s functionality, I had simply designed a survival knife with a light on the front. In addition, questions could be asked about the efficiency of the thermos-electric generator and the specification of the LED’s used.
I may revisit this concept in the future and take these considerations into account but over-all, the project was a good exercise and extension of the basic skills involved in physical product design.
A year long exploratory project for Advanced Higher Art & Design exploring perceptual relationship with nature through a semiotic analysis in the context of lighting design.
Art and Design, as opposed to the engineering-based Product Design, focuses less on tech-based skillets or problem-solving as it does on theme exploration and expressive content with theoretical frameworks applied. I started with a basic idea to explore the geometry and regular patterns in the natural environment, evolved from the abandoned theme of ‘capturing motion’; exploring movement in form.
Images from some initial dark room experiments on form development.
This interest in geometric form in nature morphed into an exploration of what certain patterns and shapes mean to people, observing the boundary between organic form and the more geometric patterns which often underpin them and how this can be used loosely as a method to explore a broader conception of ‘nature’ and the built environment.
Given the long timescale format, I decided that I wanted to introduce a more technical element of my own accord, learning over the course of the year to use Arduino and constructing multiple prototypes and methods of lighting and interfacing with light. This foundational knowledge in code laid the path to my later interest in JavaScript and other technologies.
A collage of images from the ‘triangles’ development route.
One particular branch of exploration which interested me was this exploration of triangular formations. The triangle or triangular-pyramid provides a repetitive tiling structure but the angles of 30 and 60 degrees added an element of rapidly expansive complexity (akin to polygons in CAD modelling) which opened a great many possibilities in a short amount of time.
In addition to Arduino controlled lighting, polymorph plastic played an integral role in the projects outcomes. Polymorph is a polymer with properties very close to polymethacrylate that can be moulded at around 60 degrees, allowing it to be melted down and moulded over and over again. As it turns out, it also has great optical properties as well.
The final outcomes in various scenarios showing the Arduino controller and capacitive touch panel.
The final design was a range of units, designed to be placed apart as part of a set, which function as sculptural pieces as well as mood lighting and manipulation. The units are lined with RGB LED’s to diffuse light across their bodies, hooked up to an Arduino controller and optional control panel.
Several programs were written for different effects. Capacitive touch and proximity detection was used whereby the Arduino could detect electro-magnetic interference near a circuit and respond. Once program had the panel respond to toggle colours on and off on touch. Another detected user’s proximity to an individual unit and lit the rest up like a ‘heat map’, in response to the relative position.
The idea was that, with more psychological user research, the units could read the users mood and respond with an appropriate stimulus colour.
Every year the innovation platform Jovoto hosts a challenge to design a limited edition swiss army knife casing design for Victorinox.
The competition is one of the most well-known repeating challenges on the site with little to no restrictions place on the aesthetic theme or outcome. In recent years a general theme has been defined but for the 2015 competition it was left open.
The Victorinox Logo.
I decided this was a good chance to branch into an area of product design which was new for me at the time. The challenge is purely graphical, you cannot change the function or materials of the knife and the logo must remain in the same location.
The original design for ‘A tool for all people’ before scanning and editing.
Two of the designs were created using manual techniques which were then scanned and adjusted for use in the final design, the third was created entirely digitally.
One of the promotional images for each of the three ideas.
The first of my designs played on the idea of smart devices (amongst other products) being compared to the Swiss army knife to describe them as versatile and useful, eg “This phone can do anything, it’s the Swiss army knife of modern phones” by representing each of the functions of the knife as an ‘app’ icon on a phone graphic.
The next (top left) looks at trying to capture motion and energy through use of blown inks and fast, un-coordinated brush strokes.
The last design is similar in that it uses a bright spectrum of colours to convey dynamism. The design uses they symbolism of a rainbow or spectrum to represent diversity of people. This is to push the idea of social acceptance and accessibility as the colours connect the design to the LGBTQ flag but do not make a direct connection.
In hindsight, it may have been prudent to make the LGBTQ connection stronger to cement the message but I wanted to keep interpretations for the design as open as possible.
A very early project to engineer a desk table with built in computer interface extension.
This project, developed over the summer of 2013, was one of the first ever long-form, self-directed projects I undertook. A small, movable work table with a reflected PC display extension and touch capability. It was built on the open source software Community Core Vision (CCV).
The main interface for CCV, on the left is the raw infrared image, the right shows the filtered image and registered touch points.
CCV is an open source software designed to interpolate data from an infra-red camera for use in this kind of project. The above image shows data from an experiment before the LED arrays were even introduced (i.e. working only with ambient IR light), already the software can detect ‘clicks’.
The final camera assembly after modification.
The device works by flooding the display sheet of polymethacrylate with strips of infra-red light via IR LED arrays. A small standard webcam is housed inside, modified to block visible light and pick up IR radiation. The IR light is even throughout the sheet until something comes into contact with the surface, at which point light deflects into the camera. The camera is in continuous use by the CCV software.
Throughout development and testing, several mock-ups were setup to simulate different conditions such as the amount of outside light pollution and camera / projector distance tolerances.
To design the casing, I created a minimalist but aesthetic form, inspired by the set design of one of the Star Trek movies. The display is created by linear setup of a projector reflecting off a mirror. The table has to encase the projector reflection assembly and camera with minimal light bleeding in so avoiding a ‘blocky’ aesthetic was a challenge.
The exploded CAD model, designed as a reference for the real-world build.
A full assembly was designed with a wooden frame clad in sections of polymethacrylate to give a smooth aesthetic in line with trends at the time. The table was designed with home / workshop manufacture in mind; I did intend to make it only opting not to due to cost and storage constraints.
In reflection I realised that I had, for the longest time, brushed away this project because of a restrictive mindset I was in at the time; this has no particularly beautiful renders or SQA-style presentation sheets. However, on closer analysis, I am very satisfied with how this project came out; the design was ready for manufacture, the projector camera assembly was working, acting as a proof of concept, and much was learned about electronics, interface software and engineering techniques which would serve useful later on.
One of my oldest projects, done in early high school; A UX and Lighting project for use in redeveloping rail stations.
As part of the Higher Product Design Course, as with Intermediate Two, we must produce a Design Proposal as a prelude to the Design Assignment which comprised 50% of our final grade. The brief chosen was to create a platform lighting system for a fictional lucrative rail operator to use on all its station platforms with few restrictions placed on functionality and cost.
The main brief with the chosen project.
This project was our first real chance to experiment an innovate as the product typology, its placement (multiple units on a platform) and restrictions placed by the brief were all very open.
Four of my original ideas were built on the premise that a lighting dimension could be built into an alternative function, that the functional part of a light is the light emitted and that the product to emit the light was merely a ‘casing’, a means to an end.
In this way, a lighting project can be thought of as a project to design a new way to achieve the generation and projection of light.
The initial sketch for design idea two, floor directed lighting with a timetable display.
My first chosen idea was built around the idea that timetables could be placed on the ground level and used to project light along the ground. This was built on the idea that ground-level light projection was less intrusive and more ambient than excessive overhead lighting and that to build this into the platform would create a floor level intrusion. If the unit had a secondary purpose, the obstruction could be justified.
Design idea five, expanding sculptural light.
My second idea was built on the idea that a piece of lighting could be ornamental as well as functional, as most platform lighting is purely functional. The opens to emit light, transforming into a solid sphere during the day to evoke a sense of mystery and intrigue by being a piece of sculpture as much an emitter of light.
The final manual render.
The final design chosen was the media display unit which incorporated elements from other ideas such as the rotating light cover from idea six.
The final design refined the notion of projecting light along the floor by emitting light directed down from the floor to about chest height allowing for some ambient spread.
Looking back on the project I am still pleased with the outcome but have some reservations about the means by which the outcome was created.
The brief’s looseness on function, cost and location allowed for some inventive ideas but none of those ideas really solved a problem. I tried to make ideas which enhanced the user experience but the lack of research to form the foundations was, in hindsight, a hindrance.
If I were to take on this brief now, I would want to do a great deal more research, finding a comparable rail operator and defining a set of problems, areas for improvement and constraints to follow.
