Loadingcity479

Experienced software developer with a passion for creating User Interfaces (Atomic Design, 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.

• Graphql Markdown Table
• Graphql Markdown Cheat
• Graphql-docs Markdown
• Graphql Markdown In Python
• Graphql Markdown

Load the extension inside gql/graphql fenced code blocks in markdown files; execute query/mutation/subscription operation, embedded or in graphql files; pre-load schema and document defintitions; Support graphql-config files with one project and multiple projects; the language service re-starts on changes to vscode settings and/or graphql config!

Authorized to work in the US for any employer.

• However, contrary to some of the above, GraphQL was released three years later under the MIT license and today forms the backbone behind open-source services like Apollo (using GraphQL to read and/or change both local and remote app state) or even Gatsby (using GraphQL to query front-matter and textual content from markdown files).
• Apr 03, 2019 How to Build a Real-time Collaborative Markdown Editor with React Hooks, GraphQL & AWS AppSync.

Skills

• Areas of Expertise: Front-End, User Interface
• Data: Mobx, Redux, Vuex, Axios, Fetch, JSON, 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, 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…
• details TDB

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

Graphql Markdown Table

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 Works¹ 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
• Skills Used: JavaScript, NPM, NPX

Technology Demonstration

• auto-gql - app using GraphQL & mock api
• graphql - playground for mock api
• auto-list - cars used in mock api
• auto-icons - icon demonstration

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, 4 implementations

** app 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.
• 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.
• The Svelte app is PWA compliant and can be installed via Chrome, the new Edge or iOS (using Safari).
• Deployed with Vercel.
• Built without sourcemaps.
• Skills Used: React, Stencil, Svelte, Vue, Vuex, 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

Github profile app using Vue

• app: git-notes
• github: git-notes
• Uses a custom event-bus mechanism to manage the store.
• Skills Used: Vue, Bootstrap, Axios

Github profile app using React

• app: egghead-notes
• github: egghead-notes
• Skills Used: React, Mobx, Bootstrap, Axios

WSS & REST notes server build on Node

• app: fire-notes
• github: fire-notes
• The original app used Firebase, but i wanted to try to build something similar from scratch.
• The next version of this will be built with GraphQL.
• Skills Used: Node, Express, MongoDB, Mongoose, WebSockets

Technology

• Axios - Promise based HTTP client
• Between.js - Lightweight ES6 tweening engine
• Behance - Design Inspiration
• Capacitor - A cross-platform native runtime for web apps
• Colors - A nicer palette for the web
• CSS3 - moz://a
• CSS Animations - moz://a
• CSS variables - moz://a
• Custom Elements Everywhere - Web Components
• devolution - Ship modern, and de-modernized bundles
• Direflow - Create fast, performant Web Components using React
• Dribbble - Show and tell for designers
• egghead.io - Learn to Code
• EJS - Embedded JavaScript templating
• ES6 - ECMAScript 6
• Fast - Adaptive UI System, Utilities & Tools
• Fetch API - moz://a
• Framer X - Interactive Design Tool
• Hooks - React
• HTML - moz://a
• HTML5 - moz://a
• iconfactory - Award-Winning Design & Development
• JavaScript - moz://a
• Micro Frontends - Frontend architecture
• Midnight - Dark Theme Sketch Plugin
• moz://a - about:Credits ^{Richard Hess}
• Muzli - Design Inspiration
• nvm - Node Version Manager
• Papa Parse - A powerful, in-browser CSV parser
• Pose - Simple animation for React & Vue
• Pow - Zero-config Rack server for OSX
• Powder - Makes Pow even easier
• PWA - Progressive Web Apps
• Sapper - The next small thing in web development
• Sinon.js - Test spies, stubs and mocks for JS
• Slack - Where work happens
• Stencil - A compiler for Web Components
• Svelte - Cybernetically enhanced web apps
• SVG - Scalable Vector Graphics
• SVGOMG - SVGO’s missing GUI
• svql - FetchQL wrapper for Svelte 3
• tapbots - Delightful robots apps for iOS and the Mac
• Udemy - Online Courses
• urql - A blazing-fast GraphQL client
• Vuetify - Material Component Framework
• Vercel - Develop. Preview. Ship.
• Verdaccio - A lightweight private npm proxy registry
• Web Components - moz://a
• Web Components the Right Way - A currated list
• WebSockets - Client and server for Node

–
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)

A federated graph (also known as a supergraph ) is a graph that’s composed of multiple individual subgraphs:

Each subgraph represents an underlying service or set of services that provide their own GraphQL API. Different subgraphs are often owned by different teams in an organization.

Apollo Studio provides tools to help multiple teams collaborate on a federated graph and its subgraphs.

Viewing a field's originating subgraph

The Schema > Reference tab in Studio displays a table of your federated schema’s types and fields. This table includes a Subgraph column:

Clicking the subgraph link for a type or field takes you to the line in the subgraph schema where it's defined:

If you're using the @contact directive to specify owner contact information for your subgraphs, hovering over a subgraph name displays its contact information, enabling you to follow up with the appropriate team:

Viewing subgraph SDL

The Schema > SDL tab in Studio displays the raw SDL of your federated graph’s schema, along with the schema of each subgraph.

From this tab you can:

• View metadata about the composed graph and each subgraph (such as endpoint URL and the most recent schema registration date)
• Identify the originating subgraph for any type or field in your API and share a link with team members
• Search for types and fields
• Download a copy of your subgraph’s SDL for local development
• Filter out comments and deprecated fields for improved scanning

Subgraph contact info

You can use the @contact directive to add your team's contact info to your subgraph schema. This info is displayed in Studio, helping other teams know who to contact for assistance with the subgraph:

The contact info includes a name (of a team or individual), along with an optional description and custom URL.

Adding the @contact directive to your subgraph

To add the @contact directive to your schema, you first need to define the directive. Add the following definition to each of your subgraph schemas:

You can now apply the @contact directive to the special schema object. Many schemas don’t include this object because it’s not required, but you can add it like so:

Note that the schema object can’t be empty, so you need to add the query field as shown above if it isn’t already present.

Supported @contact fields

Known @contact limitations

Graphql Markdown Cheat

• To provide the @contact directive to Apollo, you must register your schema using the --localSchemaFile option of apollo service push. If you use the --endpoint option instead, directives are not included in the registered schema.

• Similarly, you cannot provide your @contact directive to Apollo via schema reporting. This registration method also does not include directives.

• If your subgraph doesn’t already have a schema object, you need to add one to use the @contact directive. The schema object cannot be empty, so you need to include at least one field in it (most commonly query: Query). If you do provide the Query type like this, it needs to include at least one field in your subgraph’s schema. If your subgraph’s Query type is empty, you need to add a dummy field for the SDL to be valid:

Graphql-docs Markdown

Viewing contact info

After you register a subgraph schema with the @contact directive, the contact information is included in the metadata shown in Studio’s Schema > SDL tab:

In the Schema > Reference tab, you’ll also see a contact card when you hover over the subgraph link of a type or field:

Federation support in the Explorer

Graphql Markdown In Python

The Apollo Studio Explorer provides enhanced support for working with federated graphs:

Graphql Markdown

• You can preview how your graph resolves data for an operation by inspecting the operation’s query plan in the Response pane.
• While you’re building operations in the Explorer, you can see which subgraph each field of your operation originates in by enabling subgraph hints from the Explorer’s Settings tab.

Viewing composition errors

Studio displays a Federated label next to the name of a federated graph. If a federated graph has composition errors, you can click the label to view the errors that must be resolved before composition can succeed.