eswat2.github.io
my personal GitHub Page...
Project maintained by eswat2 Hosted on GitHub Pages — Theme by mattgraham
Richard Hess
Experienced software developer with a passion for creating User Interfaces (Atomic Design, Stencil, Svelte, Vue, React, GraphQL). I am a self-starter and can quickly learn new technologies and apply them to solve real-world problems. Prefer remote opportunities.
- Personal Email
- Mastodon Profile
- LinkedIn Profile
- Keybase Profile
- Github Profile
- Spectrum Profile
- AngelList Profile
Authorized to work in the US for any employer.
Skills
- Areas of Expertise: Front-End, User Interface
- Data: Mobx, Redux, Vuex, Axios, Fetch, JSON, lowdb, MongoDB, Mongoose, Papa Parse
- Design: Atomic Design, Sketch, Zeplin
- Frameworks: React, Styled Components, Vue, Svelte, Stencil, lodash, Material Design, Bootstrap, AngularJS
- Graphics: CSS animation, Pixelmator, Sketch, SVG, Between.js, GreenSock, Snap.svg, Raphaël, Charts.js, HighCharts
- Languages: ECMAScript, ES6, JavaScript, TypeScript, ActionScript, Lisp, Ruby, Smalltalk, C, Objective-C
- Platforms: Bitbucket, Github, Heroku, iOS, NPM
- Server: Node, EJS, Express, REST api, GraphQL, Docker
- Tools: Agile, Atom, Git, ESLint, Jest, Parcel, Postman, Pow, Powder, Prettier, Sinon, Storybook, VSCode, Webpack, Yarn
- Web: Web Components, Tailwind CSS, HTML, HTML5, CSS Flexbox, CSS Grid, CSS variables, CSS3, Markdown
Experience
Portfolio Technical Architect - UI/UX (Remote), Cox Automotive (IMS)
September 2020 to present
- Charter: establish a front-end architecture vision & strategy for the IMS Portfolio…
- Published ADR for Micro-Frontend Architecture
- Published ADR for Scalable CSS Architecture
- Skills Used: Micro Frontends, Web Components, Stencil, Tailwind CSS
Lead Technical Architect - UI (Remote), Cox Automotive (ISS)
February 2020 to September 2020
- Charter: establish a front-end architecture vision & strategy.
- Collaborate with Product, Engineering, and UX.
- Build software prototypes to validate architecture approaches and assess emerging technologies.
- Skills Used: Micro Frontends, Web Components
Lead Software Engineer - UI (Remote), Cox Automotive
July 2019 to February 2020
- UI development for CVI, Common Vehicle Inventory
- Advocate for GraphQL and NodeJS
- Created a GraphQL technology demonstration: auto-gql
- Created several NodeJS utilities and mock servers
- Collaborated on a new component library.
- Skills Used: React, Redux, Styled-Components, Axios, GraphQL, Markdown, NodeJS, SVG
Principal UI Engineer (Remote), Skava
June 2018 to April 2019
- Worked on a next-generation e-commerce platform.
- Member of the UX/UI Engineering team.
- Created an SVG component for Material Design icons.
- description: snapshot of Storybook for the SVG component
- Refactored our reference store to use the latest components in our framework.
- Wrote documentation (Markdown) for the UI library and development environment.
- description: snapshot of MacDown editor
- Provided focused training on our new framework for our in-house solutions team.
- Skills Used: Atomic Design, TypeScript, React, Styled Components, Mobx, CSS Grid layouts, CSS variables, Apollo, CodeSandbox, GraphQL, Markdown, Sketch, Storybook, SVG, Zeplin, Agile
Senior UI Software Engineer (Remote), Demandbase
July 2007 to January 2018
- Developed UI’s for a wide range of customer facing applications over the 10 years I was working at Demandbase.
- Developed a desktop Adobe AIR app with a ticker tape style display.
- description: the Adobe AIR app running with the ticker configured for the top of the desktop on OSX. This snapshot shows both the ticker and the dropdown windows displaying the details of the ticker data.
- this was a Skunk Works1 project lead by the CTO, concept to deployment in one month (sole developer).
- Developed a procedurally generated SVG graphic using Raphaël for a production app.
- description: the top graphic is the static mock from the designer, and the bottom graphic is the custom component used in the app, rendered with Raphaël.
- Developed a set of custom chart components with Raphaël.
- description: a custom interactive component rendered with Raphaël showing normal (left) and hover (right) states.
- Developed reusable React components for an enterprise SAAS application.
- Developed custom charts using Chart.js and HighCharts.
- example: radial chart prototype
- Rapidly built UI proof-of-concepts to validate design & technology directions.
- description: 3 snapshots of prototypes created for a new application dashboard (using Hero elements)
- Developed mock-api servers in Node to streamline my UI development workflow.
- description: 2 snapshots from a prototype React application driven by data from a mock-api server (using faker.js).
- Skills Used: React, Redux, Material-UI, InVision, Zeplin, Node, Pixelmator, Postman, Raphaël, Chart.js, HighCharts, Papa Parse, lodash, Bootstrap, Angular 1.x, JavaScript, Pow, Powder, ActionScript, Adobe AIR, Adobe Flex, Agile
Education
BS, Engineering (Cum Laude)
Rose Hulman Institute of Technology
Notable Projects
NPX business card
npx eswat2@latest- github: repo
- npmjs: package/eswat2
- Skills Used: JavaScript, NPM, NPX
Farmers Market, Columbus, IN (pro bono, Dec 2014 to Dec 2018)
- Site was retired in Dec 2018.
- Developed a new web app to streamline their signup and approval process.
- Allowed them to move to a completely paperless process.
- Pages defined with EJS (Embedded JavaScript templating).
- Provided password-less admin interface.
- Automatically updated the vendor list on the website as they were approved.
- Private Repo.
- Skills Used: Bootstrap, Node, Express, EJS, MongoDB, Heroku
Custom SVG graphic with animation
- one app design, 8 implementations…
| app | framework | tween engine | size | wire |
|---|---|---|---|---|
| funnel-s4e | Svelte | built-in | 39k | 16k |
| funnel-wc | Stencil | Between.js | 62k | 24k |
| funnel-uce | uCE | Between.js | 67k | 25k |
| funnel-p4t | Preact | Between.js | 70k | 26k |
| funnel-lit | Lit | Between.js | 72k | 26k |
| funnel-sld | Solid | Between.js | 74k | 27k |
| funnel-vue | Vue3 | Between.js | 114k | 46k |
| funnel-r3t | React | Between.js | 200k | 69k |
** size == total resources loaded, as measured in Chrome…
- Private repos.
- The original example used Snap.svg to generate the shapes.
- These apps work with SVG elements directly to render the funnel shapes and display the funnel values.
- Each app consists of a standard set of 12 building blocks, implemented as single file components in each framework.
- Each app generates similar DOM and styling with only minor visual differences.
- Styling is done with Tailwind CSS and a custom color plugin.
- The layout is responsive so it works on both desktop and mobile.
- Color palette based on clrs.cc.
- Icon components based on Material Design SVGs.
- State is persisted to Local Storage.
- Vite is used for all builds except for Stencil.
- Lit & uCE have a slightly different DOM structure and use Nano Stores for state management.
- Deployed with Vercel.
- Skills Used: Stencil, Svelte, Solid, Lit, uCE, Preact, React, Vue, Nano Stores, Pinia, Signals, Vite, Tailwind CSS, SVG, Between
Icon Proofs Web Component
- app: wc-proofs
- Simple Icon Proofs sheet for a few SVG icons.
- Implemented in Stencil.
- Optimized SVGs with SVGOMG.
- Layout done with flexbox.
- Deployed with NPM and Vercel.
- Skills Used: Stencil, SVG, TypeScript
Sudoku App Demo
- one app design, 7 implementations…
- puzzle - serverless RUST api
| app | framework | store | size | wire |
|---|---|---|---|---|
| sudoku-wc | Stencil | @stencil/store | 36k | 16k |
| sudoku-uce | uCE | nanostores | 42k | 17k |
| sudoku-s4e | Svelte | built-in | 43k | 17k |
| sudoku-sld | Solid | built-in | 43k | 18k |
| sudoku-p4t | Preact | Signals | 45k | 18k |
| sudoku-lit | Lit | nanostores | 46k | 18k |
| sudoku-p4t+ | Preact CE | Signals | 48k | 19k |
Preact CE == Preact + CustomElements (web component)
** size == total resources loaded, as measured in Chrome…
- Features:
- Simple Sudoku puzzle demo.
- Puzzles are created/solved in a Rust API. (serverless)
- Stores utilize a simple action/state pattern.
- State is persisted to Local Storage.
- Layout is done with flexbox.
- Styling is done with Tailwind CSS and a custom color plugin.
- Vite is used for all builds except for Stencil.
- Deployed with NPM and Vercel.
- Skills Used: Stencil, Svelte, Solid, Preact, Lit, uCE, Nano Stores, Signals, Tailwind, TypeScript, Rust
Technology Demonstration
| app | framework | store |
|---|---|---|
| autos-lit | Lit | nanostores |
| autos-p4t | Preact | Signals |
| autos-sld | Solid | built-in |
| wc-autos | Stencil | @stencil/store |
| autos-s4e | Svelte | built-in |
- Features:
- each is composed of 10 simple components.
- action/state pattern used for state management.
- State is persisted to Local Storage.
- Serverless GraphQL backend – gt-forza.
- Serverless Mock APIs behind GraphQL.
- Car data based on Forza Horizon 5 video game.
- Styling is done with Tailwind CSS and a custom color plugin.
- The layout is responsive so it works on both desktop and mobile.
- Color palette based on clrs.cc.
- Simple Icon components based on Material Design SVGs.
- SVG icons provided via a dynamic web component loader.
- the custom SVG icon library behind this consists of:
- Vite is used for all builds except for Stencil.
- Deployed with Vercel.
- Skills Used: Stencil, Svelte, Solid, Lit, Preact, Nano Stores, Signals, Tailwind CSS, SVG
Technology 
- Affinity Designer
- Animate.css
- Apollo GraphQL
- Atom
- Atomic Design
- Axios - Promise based HTTP client
- Babel
- Between.js - Lightweight ES6 tweening engine
- Behance - Design Inspiration
- Bootstrap
- Capacitor - A cross-platform native runtime for web apps
- Chart.js
- CodeSandbox
- Colors - A nicer palette for the web
- create-react-app
- create-react-library
- CSS3 - moz://a
- CSS Animations - moz://a
- CSS Flexbox
- CSS Grid
- CSS variables - moz://a
- Custom Elements Everywhere - Web Components
- devolution - Ship modern, and de-modernized bundles
- Direflow - Create fast, performant Web Components using React
- Docker
- Dribbble - Show and tell for designers
- egghead.io - Learn to Code
- EJS - Embedded JavaScript templating
- Electron
- Enzyme
- ES6 - ECMAScript 6
- esbuild - An extremely fast JavaScript bundler
- ESLint
- Express
- Faker.js
- Fast - Adaptive UI System, Utilities & Tools
- Fetch API - moz://a
- Figma - The collaborative Interface Design Tool
- Font Awesome
- Framer X - Interactive Design Tool
- Gatsby
- GitHub
- GitHub Desktop
- GitHub Pages
- GitKraken
- GlyphIcons
- Got - Human-friendly and powerful HTTP request library for Node.js
- GraphQL
- GreenSock
- Gridsome
- Headless UI - Completely unstyled UI components
- Heroku
- Homebrew
- Hooks - React
- HTML - moz://a
- HTML5 - moz://a
- iconfactory - Award-Winning Design & Development
- Immutable
- InVision
- Ionic
- iTerm2
- JavaScript - moz://a
- Jest
- JSON
- Kaleidoscope
- Keybase
- Kubernetes
- Ky - Tiny & elegant JavaScript HTTP client based on the browser Fetch API
- Lit - Simple. Fast. Web Components.
- lodash
- lowdb - Simple to use local JSON database
- MacDown
- Markdown Guide
- Material Design
- Material Design Icons
- Material-UI
- Medium
- Micro Frontends - Frontend architecture
- Midnight - Dark Theme Sketch Plugin
- mLab
- MobX - Simple, scalable state management.
- MongoDB
- Mongoose
- moz://a - about:Credits Richard Hess
- Muzli - Design Inspiration
- Nano Stores - A tiny (334 bytes) state manager
- nativeWeb - Tiny library for simple web components
- Netlify
- Node
- npm
- npx
- nvm - Node Version Manager
- Oh My Zsh
- Papa Parse - A powerful, in-browser CSV parser
- Parcel
- Pinia - The intuitive store for Vue.js
- Pixelmator
- Poi
- Pose - Simple animation for React & Vue
- Postman
- Pow - Zero-config Rack server for OSX
- Powder - Makes Pow even easier
- Preact
- Preact Signals - Reactive Primatives
- Prettier
- Prisma
- Prototypr.io
- PurgeCSS - A tool to remove unused CSS
- PWA - Progressive Web Apps
- PWA Checklist
- Raphaël
- React
- React Testing Library
- Redux - A Predictable State Container
- Rose Hulman Institue of Technology
- Rust - A Programming Language
- Sapper - The next small thing in web development
- Sinon.js - Test spies, stubs and mocks for JS
- Sketch
- Slack - Where work happens
- Snap.svg
- SolidJS - Another UI compiler
- Stencil - A compiler for Web Components
- Storybook
- Styled Components
- Sublime Merge
- Sublime Text
- Svelte - Cybernetically enhanced web apps
- SVG - Scalable Vector Graphics
- SVG.js
- SVGOMG - SVGO’s missing GUI
- svql - FetchQL wrapper for Svelte 3
- Tailwind CSS - A utility-first CSS framework
- Tailwind UI - Official Tailwind CSS components
- tapbots - Delightful robots apps for iOS and the Mac
- Testing Library
- TypeScript
- Udemy - Online Courses
- uce - uhtml based Custom Elements
- urql - A blazing-fast GraphQL client
- Vectornator - Design Tool
- Vercel - Develop. Preview. Ship.
- Verdaccio - A lightweight private npm proxy registry
- Visual Studio Code
- Vite - Next Generation Frontend Tooling
- Vue
- VuePress
- Vuetify - Material Component Framework
- Vuex
- Web Components - moz://a
- Web Components the Right Way - A currated list
- Web Fundamentals
- Webpack
- WebSockets - Client and server for Node
- xScope - Measure. Inspect. Test.
- Yarn
- You Don’t Know JS
- Zeit
- Zeplin
–
Footnotes:
[1]. A skunk works project is a project developed by a small and loosely structured group of people who research and develop a project primarily for the sake of radical innovation. (source)