I'm Mike Slater, Full Stack Web Developer with a Fontend Focus. I have enjoyed building web applications of all sizes for over 25 years. My main focus is always the latest in HTML, CSS and JavaScript. In recent positions, I have focused on using frameworks like React, Vue and Angular to design and maintain enterprise-level SAAS applications.

The demos on this page focus on my personal side-projects. I learn by creating small prototypes and proof-of-concepts like these.

I'm also a musician, please see my recordings and music blog to hear some of my music and covers.

Web Development and UI Demos

Setlist Manager Demo

Setlist Manager App

git repo | demo page

Firebase DB Firebase Auth React Responsive UI

This is an app I created with React and Firebase. It helps my band to manage setlists and songs.

Setlist Manager allows the user to highlight setlists by what instrument each member is playing or who is singing. This assists in creating setlists minimizing the number of instrument switches between songs. Its also useful to assemble practice lists and organize shows by what members are available.

This was created with React and Firebase. It registers in the user as a guest on pageload. Admin users can login to view additional functionality.

Life Tracker Demo

Life Tracker App

git repo | typescript conversion | demo page

CSS React Vite Layout TypeScript

Use case for using both grid and flex display together. The life total section layout is handled with grid display while alignment on button rows and text is flex.

This is a good codebase to showcase how I build small React web apps.

I also converted this from vanilla React + JS to TypeScript as an excercise in learning TypeScript.

Responsive Table Demo

Responsive UI Tables

git repo | demo page

CSS Responsive UI

Demonstrates a way to display large tables in mobile browsers without hiding columns while re-using the same HTML.

Async Javascript Presentation

Javascript Async Presentation

slides

Javascript Async Patterns

This is a presentation I gave. The subject was to demonstrate the ways async client programming has evolved in javascript.

I used the slides as way to demonstrate the js stack visually. Flipping slides shows how js tasks move through the execution stack.

Older Demos

fiddle | codepen

These are pre-2014 codepen and fiddle examples I created while experimenting early on with jQuery, JavaScript, Responsive CSS, flex layout and more.