Derick Yearnsmith

A simple, no frills class that inherits from Set().

In some languages, Range is a built-in class, that can easily be instantiated.

This adds a very simple implementation of Range to JavaScript.

I learned:

• Class inheritance from a Global class
• Ranges have many intricacies

A basic command line utility for templating html files.

I built it to scratch an itch with this portfolio, but mainly to learn about node.js fs library.

I learned:

• fs
• Reinventing the wheel isn't very fun

Say goodbye to messy group-chats…

…say hello to organised gigs, rehearsals, and announcements!

Bandmate is a side-project to maintain and improve Ruby on Rails skills, while also scratching my own itch…

Currently WIP, with back end complete, and front end in progress.

Back End

Bandmate implements token based authentication via Devise Token Auth, and makes use of uuids, Single Table Inheritance, and uses blueprints to build data into views for front-end consumption.

I have decided for a privacy-first modus-operandi, where users may only see information about bands they are a member of. Any other request will be returned with a 404 error — implementing security through obfuscation as a first port of call.

Another achievement is Discord-like invite tokens to ensure band ids and credentials stay within the application itself, while allowing non-platform-members to be easily invited.

Front End

The front end will be a standard rails app for it's first MVP iteration, utilising react-router, styled-components, and react-bootstrap for a fast development process.

I learned:

• Postman scripting to test API endpoints
• Single Table Inheritance
• Enum types for postgreSQL columns and Rails models
• ActionMailer

Kairos is my final project for Coder Academy. Built as a team project, it consists of a React client and nodeJS REST API accessing a mongoDB Altas database.

Kairos is a web app that combines goal setting with a personal organiser.

Back End

Using nodeJS, Express, and Mongoose, we implemented an mvc architecture using Test Driven Development.

Some challenges overcame were learning the jest testing framework, and mongoose while developing the API.

Front End

We took a mobile-first approach to build an mvp. The react front end uses SemanticUI components, and takes UI cues from instagram and Trello.

Axios was used to make API calls, and state was managed with react's built in useReducer/useContext hooks.

Our design process made use of Figma for high def wireframing, and a trello board for project management using kanban methodology.

We used React Testing Library to implement TDD while developing the client.

I learned:

• React Testing Library
• Jest
• Semantic UI
• Axios
• MongoDB/Mongoose

SwapThat! is a Ruby On Rails assignment for Coder Academy. The brief was a Rails-based two sided marketplace.

SwapThat! is the mvp of a bartering marketplace, where users list products to “sell”, and “pay” using their own listings.

Juicy Details

In this project I learned and implemented self-joining tables, scoped routing, active storage through cloudinary, and the mock-content gem Faker.

Self-joining tables and scoped routing were challenges for me as a bootcamp coder, but I was able to implement them as planned.

Unfortunately this also came at the expense of not implementing commenting, user profiles, and other features I had also planned.

I also tried using a css framework for the first time, after years of self-rolled css. I ended up regretting this decision, as it only compounded with all the other new things I was exposing myself to in a tight turn around. I ended up putting a nice ui on the backlog, considering we weren't being marked on it.

I plan to go back and make SwapThat pretty, while also putting in the full suite of functionality I originally (and naively) planed. The goal will be to deploy a demo version without the stress or formality of launching an actual product.

I learned:

• Self Joins in SQL and Rails
• Scoped Routing
• Faker Gem
• Advanced coding concepts are not always better on strict time limits
• Bulma CSS

lister is a ruby assignment for Coder Academy. The brief was a ruby terminal app.

lister is a global to-do app, accessible from any directory, with bash-style option flags.

lister makes use of yaml to save and export lists.

Juicy Details

I designed lister to have both an interactive mode and command-line mode, with some overlapping options. This required complex control structures that I was not prepared for at this stage of my coding journey — but managed to pull off with the basics that I knew.

lister relies extensively on the family of TTY gems — and this was a great introduction to the concept of dependencies, frameworks, and domain specific languages.

One part that held me up considerably was my intention to create a command line app that acted as though it was installed, with the ruby script accessible from anywhere in the user's file system.

For lister, I achieved this through creating a copy of the script in the user's home directory, and creating a symbolic link to usr/local/bin. In hindsight I should have dropped this for the assignment part, and added it later.

One day I'll refactor lister to be mvc, and easily executable.

I learned:

• creating symbolic links in bash
• What a symbolic link even is
• ruby procs and lambdas
• yaml
• file system reads and writes
• A good idea shouldn't always be included in version 1

My previous folio site, and first assignment for Coder Academy.
The visual design was to be evocative of a terminal browser, and I borrowed the solarized colour theme, which I am quite a fan of.

Written in pure HTML/SCSS with a sprinkle of javascript validation for the contact form.

I was quite proud of the animated landing page and the contact form layout.

Juicy Details

The landing page animation was achieved through some css trickery.

It consists of a monospace font, multiple div tags, and a css animation.

The text is always present, but is hidden by blocks that shift right at a certain speed.

I achieved the visual effect of the 'cursor' div's line feed by calculating the total time it took for previous lines to finish animating, and offsetting the animation by that amount of time.

I learned:

• SCSS
• Advanced flexbox
• CSS animation