1. Zeppelin Apache
2. Openzeppelin Solidity
3. Zeppelin Open Source

Zeplin for Visual Studio Code lets you quickly access the designs you’re working on, follow design changes, open the Jira issues they’re attached to —all from within VS Code. 🔌

Installation

Zeplin v3.0.1 - Passed - Package Tests Results. GitHub Gist: instantly share code, notes, and snippets. Zeplin for Visual Studio Code lets you quickly access the designs you’re working on, follow design changes, open the Jira issues they’re attached to —all from within VS Code. Installation Install Zeplin from Visual Studio Code extension marketplace.

Github Blog The standard for secure blockchain applications. OpenZeppelin provides security products to build, automate, and operate decentralized applications. We also protect leading organizations by performing security audits on their systems and products. Add Storybook links, Styleguidist links, repository links (GitHub, GitLab, Bitbucket) and any other custom links to your design system documentation. Connecting your first component. Getting started is easy. Zeplin maps components in your codebase to the components in Zeplin with a JSON configuration file.

1. Install Zeplin from Visual Studio Code extension marketplace.
2. Open the new Zeplin sidebar.
3. Login to Zeplin.

Usage

Access designs you’re working on

The Zeplin sidebar in Visual Studio Code lets you access the designs you’re actively working on.

Get started by adding a project. Once you add one, all the screens and components in the project will be listed in the sidebar. You can quickly open each screen or component in Zeplin by clicking the “Open in Zeplin” icon in each row. Similar to adding projects, you can also add styleguides and access all their components.

You can also pin screens or components you frequently visit, and they will be listed under the “Pinned” panel.

Follow designs changes

The Zeplin sidebar lets you to see which designs have been updated since you last visited. Once you add a project, Zeplin will list changes to screens and components under the “Activity” panel.

Open Jira issues

Using Zeplin for Jira, you can attach Zeplin resources to Jira issues. This enables two-way collaboration—when you’re viewing a design in Zeplin, you can open the related Jira issue.

The Zeplin sidebar lets you view which resources are attached to a Jira issue by displaying a Jira icon in the row, and clicking the icon opens the Jira issue directly. Coupled with the “Pinned” panel, you can quickly access Jira issues of designs you frequently visit.

Manage Connected Components configuration

Connected Components in Zeplin lets you access components in your codebase directly on designs in Zeplin, with links to Storybook, GitHub and any other source of documentation based on your workflow. 🧩

Zeplin for Visual Studio Code makes it easier to create the JSON configuration file that connects components in your codebase to their design counterparts in Zeplin. Check out our getting started guide for Connected Components.

Contributing and Issue Tracking

See CONTRIBUTING.md for details.

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.

Authorized to work in the US for any employer.

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

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

Zeppelin Apache

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

Openzeppelin Solidity

• 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

Zeppelin Open Source

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)