About me
I am a fullstack developer and have been living in Folsom, California for over 20 years.
Previous to becoming a fullstack developer I designed computer chips. I was at Intel for nearly 20 years, where I worked on chipsets and later developing the internal graphics for CPUs. Before Intel, I worked for ARM, in CPU design.
I moved from England to the United States in 1996, but some of my accent is still present.
My degree, from Bristol University in England, is in Computer Systems Engineering, where I achieved first class honours.
I have two children, and with whatever time I have left I enjoy the outdoors - hiking, cycling and skiing
Full stack web development certificate from UC Davis extension - completed August 2019
I thoroughly enjoyed this class. I have been coding and learning new languages and concepts since the age of 12, so web programming is a great fit. There are new web languages, libraries and frameworks coming out all the time and this is analogous to chip design where the underlying technology changes every two years and methodologies and tools must adapt - I love this need for continually improving. The class studied basic concepts but I studied way beyond that.
Key technologies : HTML5, Javascript (ES6), CSS. MERN stack, Mongoose, Express, React, Node. git, mySQL, github
Tools and libraries : Trello, npm, mongoose, sequelize, handlebars, lodash, mocha, chai, chai-http, postman, bcrypt, react-router, cheerio, moment, sass, jsonwebtoken, winston, bootstrap, materialize, create-react-app, Jquery, github, travisCI, heroku, eslint, axios, firebase, bash, json, ajax, REST, API, bash, typescript, agile, Kanban
Please note: Heroku free conditions have changed, and as of July 2023, apps that depend on Heroku aren't working
Toilet Paper Crisis
I was inspired to develop this app due to the irony that the response to a pandemic was for people to stockpile toilet paper leading to completely empty shelves at stores
In designing this app, I wanted
- User experience: fast time to first render, fast UI responses, humor
- Frequent deployments, allowing new content and features to be added easily. It deploys automatically to a Netlify server, on pushing to the github "release" branch
- Static for speed, less complexity and better security
- No ads or use of cookies for good security
- Use of standard frameworks and tools, such as react, react-router, create-react-app, sass, Bootstrap, Typescript
This a single page app, mobile first with different flexbox grids and menus between mobile and desktop
A downside of react is that there is a lot to be loaded before the first render. With a slow network or slow mobile phone, the user will not see anything for several seconds, so is likely to leave the page before seeing anything
To solve this, I coded a loading screen with a spinner (roll of toilet paper) into the index.html file. I added a postbuild step to stop any blocking of render from loading script and css files. The loading screen loads almost immediately (time to first render), although the time to first interaction will be slower as all files need to be loaded
Cheetsheet
This is a simple website, that summarizes some of the things that I always seem to forget, putting them in one place, with links to more detailed documentation
A work in progress - expect to always add new things, modify existing and re-organize the pages. It was also used to experiment with various ways of adding content, where there are a lot of code examples
Possible expansions (other than new content)
- Ability to set up pages to contain specific sheets, store as localStorage on browser or on a server
- Visual Studio Code shortcuts for items in cheatsheet
Tai Chi Chuan website
This is a website I created to support a Tai Chi class
There are two versions, an end user website (using the link shown here) and a version that can be edited, which has not yet been connected into a server. The edit version uses ckeditor to create a truly wysiwyg web site
My Neighborhood
This web app is a hyper focused community resource that provides local news, alerts, neighbor contacts and contractor/services recommendations. It could be used by a home owners association or student dorm, providing very local, focused information.
The app is built using a MERN stack: Mongodb, Express, React and Node.js. It uses many other packages, notably bcrypt (password hash generation and comparison), jsonwebtoken (signing user authorization token), mongoose(schema based ORM for mongodb),winston (replacing console.log), mocha/chai (server API route testing) and cheerio(server side Jquery tool)
The app is mobile first, as we would expect that most people would be using it on a cell phone. It is reactive, but has not yet been tuned for desktop use.
myNeighborhood is the final group project completed as part of a UCDavis/Trilogy bootcamp
recBooker is a app and website that helps eliminate the common problem when individuals or sports team rent a sport field or party gazebo only to find when they arrive at their assigned time there is already someone using the facility
Users can create a user account, create new bookings, view bookings for a facility, and view their own bookings
recBooker is a full stack app that uses sequelize, mysql, express, handlebars, bootstrap, jQuery and cookie-session. For testing it uses mocha, chai, chai-http and TravisCI, which is linked into github, for checking before pull request is complete. It is deployed on Heroku, note that it takes Heroku 10-20 seconds to restart
recBooker was a group project completed as part of a UCDavis/Trilogy bootcamp
Book searching with Google books
This is a fullstack app that can search for books on Google books, get information about the books, and then optionally save that information and get a list of saved books.
This app is built using the MERN stack - Mongoose, Express, React and Node. create-react-script
was used to build the framework and for deployment builds. It uses
several other modules/technologies - bootstrap, mocha/chai for testing, axios and lodash
The app has the following features in addition to the basic functionality
- Theme changing between light and dark using css variables
- Custom buttons css. Similar to material design, but some changes
- Customized search button. Hidden until user enters text in form
This project was completed as part of a UCDavis/Trilogy bootcamp
Onion scraper
This app (newsCommenter) is a full stack app that "scrapes" data from a web page, stores it in a mongodb database, and then displays the data on a web page. Users can then add notes about each article, and those notes are also stored in the mongodb database.
I chose to scrape data from "The onion", a satirical news site, hence the "Onion scraper" title.
The app
only refers to the onion in two places, the scraper function defined in
routes/scrape.js, in the title, defined in
views/layout/main.handlebars, and in the help modal, defined in
views/index.handlebars . The app can therefore be easily altered
if a different news site is chosen, or if the onion changes the way it displays
data.
newsCommenter uses the following technologies: mongodb, express, handlebars, Node.js, mongoose, cheerio, winston, morgan and axios.
newsCommenter was completed as part of a UCDavis/Trilogy bootcamp
Memory game
This is a react front end app that implements a simple memory game
It uses the following main technologies - react, create-react-app, css, reactstrap (bootstrap react components), bootstrap. It is deployed using the github-pages module.
The game consists of clicking on one of a dozen cards, so long as you don't click on one that you have already clicked. Between clicks, the cards flip over, reshuffle and then flip back again. The current score and high score (max 12) are shown.
Animation is used to grow the cards and add a shadow when hovered over. The card flipping is done through a 3d rotateY() transformation.
memgame was completed as part of a UCDavis/Trilogy bootcamp
Random Restaurant
This app solves the problem when two people don't agree where to eat. It allows each person to select a food(cuisine) type, and then randomly chooses a restaurant nearby, showing address, cuisine type and a map. Each picked restaurant is stored in a table, where the user can choose to blacklist the restaurant (never go again), or "whitelist" the restaurant. The app excludes restaurants recently chosen, so whitelist allows it to be chosen again. The restaurants visited table is shown on the page, and saved in a Firebase database (cloud storage)
Random restaurant is a front end app that uses bootstrap, firebase and moment. It uses the web APIs for Zomato (Restaurant search) and Mapbox
Random restaurant was a group project completed as part of a UCDavis/Trilogy bootcamp
Liri
Node.js search program (command line input)
Liri uses web APIs from spotify, omdb and bandsintown to search for movies, songs and concerts, from command line input, for example
node liri movie-this The good the bad and the ugly
Screenshots can be seen at Liri screenshots
This was not a complex program, but the APIs did not return data as expected and further searches had to be made in the returned data
Liri was a project completed as part of a UCDavis/Trilogy bootcamp
Burger logging app
Save burgers you would like to eat and move them to the "devoured" column when eaten.
Full stack app using mysql, handlebars, express and bootstrap. Deployed on a Heroku server
A gif capture of this app can be found at burger gif
This app was a project completed as part of a UCDavis/Trilogy bootcamp
