Jon Urry
Full Stack Web Application Developer and Designer
Hi there! I’m, Jon.
I design and develop web applications for computers, mobiles and tablets.
I'm looking for a new job as a Full Stack Web Developer.
You can find examples of my work on this website.
I love cycling, especially on quiet hilly roads, gravel and byways.
My taste in music is rather eclectic, ranging from indie pop to afrobeat (amongst many other music genres).
I'm a home barista and occasionally enjoy a tasty dark beer.
You will mostly find me in the kitchen at parties.
Contact me here:
About Me
What Am I Looking For?
I love to design and develop computer applications.
It's a challenging, creative, stimulating, interesting and rewarding thing to do.
My past experience has mostly been developing apps for desktop computers.
Now, I am completely refreshing my technological skill set and focusing on developing web applications using open source technologies.
Eventually, I will become a Full Stack Open Source Web Developer.
Right now, I'm looking for my first job as a Web Developer.
I realise that there is a mountain of stuff to learn to be a web developer but my past experience will stand me in good stead and I expect to progress quickly. Software development is not just about programming, it takes years of experience to be able to architect, design and build large scale software and I already have those skills. I just need to apply them to an area of technology that is relatively new to me.
I started this journey in September 2017.
Who Do I want To Work With?
I'm looking for a progressive company that can support me as I learn how to build web apps.
At the same time, I want to help grow that company and contribute in any way that I can to make them and the team successful.
Ideally, I will be working with the latest proven open source web technologies.
I'm pragmatic in my approach to projects and see the value in agile methodologies, the automation of testing and builds, and in best-practice design patterns.
I want to be mentored by excellent developers and have lots of scope to develop my skills and progress in the workplace.
What Have I Done?
I have 21+ years' experience of developing software products.
During that time, I have:
-
Designed and implemented software used by:
BP ExxonMobil General Motors Ford Hyundai Kia Peugeot Citroën Chrysler LG Jaguar Land Rover Bentley Aston Martin US Air Force Lufthansa Cathay Pacific Air China Alitalia
- Designed web app and implemented database for Bluetooth interoperability testing that helped attract new customers more than doubling annual revenue to £2 million
- Led a team of software engineers who envisioned, designed and implemented a multi-user document management system from scratch
- Successfully led and managed a distributed team of software engineers in London, Mumbai and Chandigarh, delivering features on schedule and at a significantly reduced cost
- Created XML generator for Ford Motor Company to power their global customer facing Bluetooth interoperability websites
- Promoted agile methodologies and helped define new and improved processes
- Designed and developed a UI framework. Reusable solution saved many weeks of development work and gave product a consistent look and operation
- Solved challenging and complex business problems. E.g. Interoperability of software versions. Others had abandoned this problem in the past only for me to succeed
- Designed and implemented dozens of SQL Server reports to deliver business critical information on demand saving many hours of work every week across the company
- Designed and implemented an audit solution that enabled process inefficiencies to be highlighted and provided real metrics for accurate customer quotes
- Implemented many optimisations to dramatically increase software performance. E.g. improving complex filtering process from 100 minutes to less than 10 seconds
- Realised fully automated build tool. Significantly reduced labour costs (converting a 2-day manual task to a 1-hour automated task) and improved quality by reducing human error
- Helped to turn around failing software project to automatically test in-car system interoperability
- Implemented flight simulation and pilot training software
Qualifications
-
MSc Scientific Computing: University of Huddersfield
-
Postgraduate Diploma Software Technology: University of Hull
-
BSc Physics: Imperial College, London
-
Associate: Royal College of Science
Skills
-
Programming: JavaScript ES6 ES7 ES8 React Jest HTML CSS SASS XML Node AWS Lambda SEO Analytics WordPress C# C C++ Visual Basic .Net ASP.Net MVC WPF Appcelerator
-
Tools: UX Responsive Design Design Patterns Unit Testing Git Chrome Inspector VS Code Atom CodeKit ESLint Babel Prettier Assembla UML
-
Process: Agile Methodologies Scrum Test-Driven Development
-
Database: SQL Server SSRS SSIS MySQL Oracle PL/SQL Performance Optimisation
-
Management: Pragmatic Organised Lead teams globally Bonus/performance targets
Never Stop Learning!
What are people saying about me?
An Outstanding Software Developer
Jon is an outstanding software developer who led the development of the most important product in our portfolio and this product is still striving 12 years later. A robust very rich product that is still ahead of its time.
Our Best Software Architect
Jon was well known throughout Ulysses as our best software architect. He was liked by all, respected and appreciated for his calm and professional manner as much as the excellent technical results he achieved. The code produced by his team (Document Management) was always of a very high quality; well-designed, well-documented, and with proper attention paid to corner cases and implementation details. It was a pleasure working with Jon and I highly recommend him.
A Natural Problem Solver
Jon is one of the most innovative web app designers I have come across with a work ethic to match. He’s a natural problem solver and is able to take on and successfully deliver some of the most challenging engagements out there. If you’re looking for someone to hit the ground running, deliver to budget and timescales, I can’t recommend Jon enough.
A Superb Developer and a Valued Asset to Any Software Company
Jon is a superb developer and manager, able to effectively lead and manage others as well as architect, design and implement complex projects. During my time working with Jon he designed elegant solutions to some of the most complex areas of the systems we dealt with and was always willing and able to give feedback and advice to other members of the department. Jon is a thoroughly professional individual who would be a valued asset to any software company.
Exceptional Analytical Skills
During my time at Ulysses Systems, Jon was a key member of my team. He has exceptional analytical skills and could always be trusted to find elegant and creative solutions when presented with complex technical problems. I have no hesitation in thoroughly recommending him.
Incredibly Helpful and Knowledgeable
We worked in the same group and interacted quite often. During that time, Jon proved to be incredibly helpful and knowledgeable. He always had an efficient strategy lined up to make our work go smoothly and was excellent in communicating his ideas to the rest of the team. I learned from him just by watching the way he approached a problem.
Creates Business Technology Solutions that Deliver a Competitive Advantage
Jon is skilled in architecting creative IT solutions through a deep and wide ranging technical expertise encompassing enterprise architecture, application development and cloud computing, combined with commercial insight into business processes and objectives. Jon can define and create business technology solutions that will deliver competitive advantage.
Very Intelligent and Hard Working
Very intelligent hard working product manager that understood customer requirements accurately and very quickly. The code product was well architected and documented. A pleasure to maintain!
Always Up To Date With New Developments and Innovations
He introduced the concept of agile development in our company and guided us with methodologies to follow. Not only is he always willing to share his knowledge, but he is also eager to learn new things and welcomes new ideas/views in very positive ways. As a senior he brings the best out of his juniors in most considerate manner. I am thankful to him for helping me grow as a professional, and truly admire him as a mentor.
Ability to Learn Quickly
Jon displayed the ability to learn quickly and persevere with difficult problems. Conscientious and hardworking, Jon quickly become the primary expert in the area of aircraft system simulation within our software product.
Excellent Interpersonal Skills
He is respected by his team members because he leads by example. Jon has excellent interpersonal skills that allow him to work with multicultural customers and teams. Jon follows a structured but at the same time pragmatic approach in translating vague customer requirements into effective software products.
Ability to Produce High-Quality Software
Based on Jon’s strong technical knowledge and his personal skills it can safely be said that he is a true leader of a software development team. On the technical side I would like to stress his ability to produce high-quality software design. Jon is capable of inspiring his teams to work hard and find creative solutions to the problem at hand. He is a hands-on leader that is not afraid to contribute to the team’s work by helping with the development tasks.
You Can Definitely Depend On Him To Deliver
Jon Urry is in every sense the model employee. He is a team player but also good at working on complex projects alone, he can be taken seriously but is also easy to communicate with and far from overbearing. Perhaps one of is winning attributes would his ability to take on board complex business problems and identify the most logical winning strategy. He knows his subject matter extremely well and you can definitely depend on him to deliver.
Excellent at Handling Complex and Difficult Assignments
Jon is extremely professional in everything he undertakes, He is excellent at handling complex and difficult assignments and coming up with the best possible solution fast. His serious and sensitive approach to people make him an excellent colleague.
Strong Technical and Leadership Skills
I have worked closely with Jon at Ulysses Systems; he has strong technical and leadership skills. Jon encourages and inspires his team to actively contribute to projects on hand. Software design, creative solution, time & resource management are some of Jon’s key strength.
I Thoroughly Enjoyed Working With Jon
Jon and I worked together on a software project for two years. He was a much valued member of the team and approached the task with a high level of professionalism. He was friendly and polite at all times and clearly enjoyed the technical aspects of his work. As well as successfully contributing to the project, Jon supported other team members in their work. I thoroughly enjoyed working with Jon and am sure he would be an asset to any future employer.
It Was Great Working Alongside Jon
Jon is an excellent product manager and very skilled at his job. His ability to coordinate and manage teams between multiple location is good. At Ulysses he was the key member in designing and implementing the core platform. It was great working alongside Jon.
He's Known as 'Quality' Jon for Good Reason
Jon has a deep understanding of technology. He can be relied on to fully understand complex business problems and provide elegant answers. Although I only worked with Jon for six months, I have known him for twenty years. He has always impressed me with his calm demeanour. He leads by example, often letting others talk before neatly presenting a solution. He's known as 'quality' Jon for good reason.
Projects
Black Box is an abstract board game for one or two players, which simulates shooting rays into a black box to deduce the locations of "atoms" hidden inside.
Black Box
Overview
Black Box is an abstract board game for one or two players, which simulates shooting rays into a black box to deduce the locations of "atoms" hidden inside. It was created by Eric Solomon. The board game was published by Waddingtons from the mid-1970s and by Parker Brothers in the late 1970s. The game can also be played with pen and paper, and there are numerous computer implementations for many different platforms, including one which can be run from the Emacs text editor.
Black Box was inspired by the work of Godfrey Hounsfield who was awarded the 1979 Nobel Prize in Medicine for his invention of the CAT scanner.
Why I Built It
I wanted an interesting project to practice the JavaScript skills that I had been learning. Black Box presented some fairly complex game logic that was fun to code and play with. I knew that I would be able to practice a few design patterns, MVC included. There's plenty of scope for expansion too. I could add high scores, saving game state, adding audio and multi-player capabilities in the future.
How I Built It
Black Box was written from scratch and by hand. I didn't want to take any short cuts as it was a vehicle for me to learn how to do things from first principles, using fundamentals. I chose not to use any frameworks or libraries. The JavaScript and CSS is vanilla.
I wanted to practice different layout methods so I used Grid CSS with a fallback of Flex. For browsers that don't support either Grid or Flex I fallback to a basic block and float layout.
The website is responsive, of course. I regard this as a fundamental requirement, building a mobile friendly site first and then progressively enhancing the site depending on the device's capabilities and available screen real estate.
I'm keen to employ test driven-development. After reviewing the available options, I chose Jest by Facebook and all of the game logic is backed up by unit tests. I may add screenshot testing in the future.
Another area that really interests me is design patterns. I used a few design patterns for Black Box including MVC. In the future, I may implement new versions of the View layer in React and Vue and allow the user to switch between them.
I'm interested in build tools having created one myself in the past for a previous company. I thought about learning Grunt or WebPack but I was learning so many other things I thought it would be better to use CodeKit on this project. CodeKit wraps a lot of the useful functionality of a build tool in a nice UI. I was able to quickly add ES6 and SASS pre-processing, automatically add browser specific prefixes in CSS, minify and concatenate files, create source maps and optimise images. CodeKit also has its own web server so you can view your website in real time on multiple local devices and browsers for testing purposes.
There's many development IDE's to choose from. I went with Atom by GitHub. It is basically a text editor built with internet technologies. I added several web development packages to supercharge my working environment.
I chose GitHub for source control duties. You can see all of the code on my GitHub BlackBox project page.
The Black Box website is hosted via GitHub Pages. This is free for open source projects.
Colophon
A list of technologies used in the project:
| Technology | Description |
|---|---|
| HTML | The structural and semantic design of the web site. |
| CSS |
Vanilla CSS There were no UI frameworks or libraries used in this project. All CSS was hand written from scratch unless otherwise stated in the code base. Float Layout Basic default layout to work in all browsers. Flex Layout Flex layout that can be used by 97% of today's browsers (by usage). Progressive enhancement over float layout. Grid Layout Grid CSS layout that can be used by 76% of today's browsers (by usage). Progressive enhancement over flex layout. SASS Taking advantage of variables etc. |
| JavaScript |
Vanilla JS All JavaScript was hand written from scratch except for the SVG animation which was adapted from another source. ES6 Taking advantage of the latest enhancements to the JS specification where appropriate. |
| Responsive |
Responsive Design The UI is responsive and will change according to the size of the device's screen. A mobile first design is employed with enhancements for larger screens. The Black Box grid will always fill the smaller of the screen's dimensions. |
| Unit Tests |
Jest All game logic has been unit tested using Jest by Facebook. Both public and private methods tested. |
| Design Patterns |
Model View Controller The MVC pattern has been used to separate the application code from the UI presentation layer. The controller binds the two layers together. Namespace All application code is protected by being contained in a single namespace accessible from the global context. Module Each code module is self-contained and independently testable. Public/Private Members Modules expose public methods and hide internal logic. Prototype Reusable methods are attached to the object's prototype to manage memory and resources better. |
| SVG |
Drawing Light rays are traced on an SVG element at the end of the game. The path of each light ray is recorded and rendered. Animation Light rays are animated by default. This can be switched off in the UI. The SVG paths are traced over a period of time. |
| Google Fonts |
Web Fonts Google web fonts are used where appropriate. They are served from Google's CDN. |
| Tools |
Atom GitHub's open source Atom Text Editor with plugins for web development. CodeKit Mac application for compiling, building and optimising web sites. Chrome Inspector Debug web sites in Google's browser. ESLint Check code syntax. Babel Use the latest JavaScript language improvements and have them compiled to standard JavaScript. Prettier Format your code in a standard and attractive way. Auto Prefixer Don't worry about vendor specific CSS prefixes. Source Maps Allow minified/uglified code to be debugged in the browser. |
| Performance |
Combining Files Combine multiple files into one to cut down on server requests. Minifying Reduce the size of code files to make them faster to download. Optimise Images Reduce the size of images so that they can be downloaded faster. |
React implementation of the classic Minesweeper game.
Velo Studio is an online e-commerce store selling cycling inspired t-shirts with panache! I designed all of the t-shirts and created the website.
Overview
Velo Studio is an online e-commerce store selling cycling inspired t-shirts with panache!
Why I Built It
I love cycling and really enjoy designing things and being creative. I buy and wear cycling related t-shirts myself and had lots of ideas for my own t-shirt designs. I was also interested in building a website and experimenting with techniques to get people to visit the store via marketing, social media and SEO. I decided to flex my design chops and learn as much as I could by getting stuck in and building.
How I Built It
I chose to build the website with WordPress and WooCommerce as the main building blocks. WordPress is extremely popular, and WooCommerce converts WordPress from a blogging platform into an eCommerce platform. When combined with Storefront, a UI template, you have a free (open source) online store. This was the easiest, cheapest, and most reliable way to get the project up and running.
I didn't want to invest lots of money in physical stock when I didn't know if anyone would buy the t-shirts so I decided to partner with a print on demand and fulfilment company. I integrated my store with their API and they automatically pick up the orders from my website, print the t-shirts on demand and send them directly to the customer.
Electronic payments are handled by Stripe. This is cheaper than PayPal as they just take a small commission from each sale.
The most effective marketing channel is still email. I chose to use Drip for email marketing as it is free for the first 100 subscribers and they have some really advanced automated workflows.
The web store is synchronised with my Facebook store so users can browse my products on Facebook and then purchase at Velo Studio.
Each product page is optimised for SEO. Google analytics tracks visitors and SE Ranking allows me to monitor and analyse competitor strategies.
I have social media accounts on Instagram, Facebook and Twitter. Grum allows me to schedule and automatically post content to Instagram. IFTTT automatically posts the same content to Facebook and Twitter. Social Insider allows me to analyse both my own and my competitor's performance on social media.
I occasionally advertise on Instagram and Facebook to drive sales to Velo Studio. I use Shakr to create video and slideshow ads for Instagram and Facebook.
Colophon
A list of technologies used in the project:
| Technology | Description |
|---|---|
| Content Management |
WordPress The world's most popular content management system. Based on PHP and MySQL. WooCommerce The most popular eCommerce platform on the web. Built on top of WordPress. Storefront An intuitive, responsive and flexible, free WordPress theme offering deep integration with WooCommerce Collectively, these 3 products allow you to build an online e-commerce store for 'free'. |
| On Demand Fulfilment |
Print on Demand All t-shirts are printed on demand. That means that I don't need to carry any stock. Ship on Demand Once printed, the t-shirts are shipped directly to the customer by the printing company. |
| Email Marketing |
Drip Smart email marketing including intelligent Facebook ads, visual workflow builder, automate everything, track performance. |
| Payments |
Stripe Accept electronic payments through the internet. |
| Facebook Shopping |
Allow users to browse and buy products from your web store via Facebook. Integrated with WooCommerce. |
| Hosting |
Flywheel WordPress hosting and management. |
| SEO |
Search Engine Optimisation Each product web page is optimised for search engines so that people can find the products. SE Ranking Provides detailed analysis of SEO rankings, competitor strategies, back-links etc. |
| Analytics |
Google Analytics for tracking, conversions and query analysis. |
| Social Media |
Social Insider Track social media activity on Facebook and Instagram. Grum Schedule and automatically post content to Instagram. |
| Advertising |
Facebook Ads Advertise across Facebook and Instagram. |
| Automation |
IFTTT IF This Then That. Automatically re-post Instagram posts to Facebook and Twitter. |
My personal solutions to the exercises and problems set in the 3rd edition of eloquent javascript by Marijn Haverbeke.
Eloquent JavaScript Solutions (3rd Edition)
Overview
The website presents my personal solutions to the exercises and problems set in the 3rd edition of eloquent javascript by Marijn Haverbeke.
Why I Built It
I wanted to gain an in-depth and practical knowledge of JavaScript. One of the resources that was recommended again and again was the Eloquent JavaScript book by Marijn Haverbeke. I knew that by carefully reading each chapter and then immediately applying the knowledge that I had just learnt would be invaluable. I also knew that building a website to present my solutions to the problems would also be a great learning exercise.
How I Built It
The website is dynamic. It uses the GitHub API to load each chapter's solutions on demand. The code samples are stored as gists on GitHub and the site text is stored as markdown comments for those gists. I used the opportunity to try out the new ES6/7 JS features, Promises, Async and Await when interacting with the GitHub API.
Colophon
A list of technologies used in the project:
| Technology | Description |
|---|---|
| HTML | The structural and semantic design of the web site. |
| CSS |
Typography Using a vertical rhythm typographical reset based on the golden ratio from Grid Lover GitHub Gist Theme All JavaScript code is styled using a GitHub Gist Theme. Animated Loading Spinner Customised animation based on one of the spinners by Tobias Ahlin Animated Menu Animated menu that expands, contracts and fades in and out on mouse click. |
| JavaScript |
GitHub API All code samples and dynamic website content is loaded on demand from GitHub code gists and markdown comments. ES6/7 Since the website's content is loaded via the GitHUb API, the website needs to support asynchronous methods. I take advantage of the new ES6/7 JavaScript features, Promises, Async and Await when interacting with the GitHub API. Markdown The website text is loaded from GitHub Markdown comments. These are dynamically converted to HTML using the marked.js code library. Code Syntax Highlighting The JavaScript code syntax is dynamically highlighted using the highlight.js code library. MVC The project code is organised using a Model View Controller (MVC) pattern. Modules All code is organised into self-contained code modules that can be individually unit tested. Polyfills Since not all browsers support all modern JavaScript fuctionality I have added some JavaScript polyfills. e.g. Adding a polyfill for the 'prepend' DOM method. I also use Babel to translate Promises, Async and Await into 'standard' JavaScript. |
| Responsive |
Responsive Design The UI is responsive and will change according to the size of the device's screen. A mobile first design is employed. |
| Google Fonts |
Web Fonts Google web fonts are used where appropriate. They are served from Google's CDN. |
| Tools |
VS Code Microsoft's open source Visual Studio Code Editor with plugins for web development. CodeKit Mac application for compiling, building and optimising web sites. Chrome Inspector Debug web sites in Google's browser. ESLint Check code syntax. Babel Use the latest JavaScript language improvements and have them compiled to standard JavaScript. Prettier Format your code in a standard and attractive way. Auto Prefixer Don't worry about vendor specific CSS prefixes. Source Maps Allow minified/uglified code to be debugged in the browser. |
| Performance |
Combining Files Combine multiple files into one to cut down on server requests. Minifying Reduce the size of code files to make them faster to download. |
Serverless email service built using Amazon Web Services, Lambda Function, Node.js, and Simple Email Service (SES).
JavaScript 2d canvas animation of a person walking through a randomly generated rainbow forest.
Vanilla ES6 implementation of the game of life.
Two websites to celebrate the marriage of Sarah and me.
Wedding
Overview
A website to celebrate the marriage of Sarah and me. I actually created two websites:
- Pre-wedding to give invited guests all the information that they needed about the big day
- Post-wedding to showcase the wedding photos and our honeymoon meal at Heston Blumenthal's restaurant, the Fat Duck
Why I Built It
In this Internet age, it made sense to create a wedding website where guests could get all the information they needed about the wedding.
The original website catered for this having sections for the venue, how to get there, where to stay, advice on gifts, an RSVP mailing list and contact info.
There was also a section about the bride, groom, bridesmaids and best man. I commissioned cartoon caricature drawings of us all to add a little fun to the site.
We had a great photographer at the wedding and she took some wonderful photos. The current website showcases those. There's also a few shots that I took of our meal at the Fat Duck.
How I Built It
I didn't want to create a website totally from scratch so I chose to start with Twitter Bootstrap and customise the styling from there.
It was important to layout the information in a logical and clear way so that guests knew exactly what was going on.
The post-wedding website is heavily focused on photo images. To make it efficient, I took the highest resolution photos and created several smaller versions that would be served to a variety of device screen sizes. For landscape photos, that meant cropping the photos to have a portrait orientation (keeping the subject matter balanced) and saving to various sizes.
The websites are fully responsive and look good from mobiles to desktops.
Both websites were created in 2013 when responsive websites were a relatively new thing.
Colophon
A list of technologies used in the project:
| Technology | Description |
|---|---|
| HTML | The structural and semantic design of the web site. |
| CSS |
Bootstrap Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. CSS Additional CSS for specific page styling. |
| JavaScript |
Picture Fill A responsive image polyfill for picture, srcset, sizes, and more. Allows different image sizes to be served depending on the device's screen resolution. Smooth Scroll Allows the web page to scroll smoothly to a different position when an internal link is clicked. |
| Responsive |
Responsive Design The UI is responsive and will change according to the size of the device's screen. A mobile first design is employed with enhancements for larger screens. The Black Box grid will always fill the smaller of the screen's dimensions. |
| Adaptive Images | Automatically create different image sizes depending on the supported media queries. |
| Google Fonts |
Web Fonts Google web fonts are used where appropriate. They are served from Google's CDN. |
| Tools |
Atom GitHub's open source Atom Text Editor with plugins for web development. CodeKit Mac application for compiling, building and optimising web sites. Chrome Inspector Debug web sites in Google's browser. ESLint Check code syntax. Babel Use the latest JavaScript language improvements and have them compiled to standard JavaScript. Prettier Format your code in a standard and attractive way. Auto Prefixer Don't worry about vendor specific CSS prefixes. Source Maps Allow minified/uglified code to be debugged in the browser. |
| Performance |
Combining Files Combine multiple files into one to cut down on server requests. Minifying Reduce the size of code files to make them faster to download. Optimise Images Reduce the size of images so that they can be downloaded faster. |