Salem Cobalt#
Lead Frontend Architect, Design Systems#
Work Experience#
Principal Frontend Engineer, Knapsack (May 2020 - Present)
- Massive overhaul and expansion of Knapsack's design system platform over the past 15+ months using the best-of-class tools, libraries, and services.
- Strategic focus on the "front-end of the front-end" however day to day responsibilities are considerably more comprehensive. A few examples include:
- Building, testing, and shipping product features and improvements in React and Typescript; rapid prototyping and iteration
- Writing out GraphQL mutations / subscriptions to Hasura backend
- Expanding and improving our Sass-based CSS architecture (ITCSS + BEM); CSS custom properties
- Writing E2E and component-specific tests in Cypress; VRT using Percy
- Orchestrating complex user flows in XState
- Testing and improving front-end perceived performance
- Front-end build tools (Webpack, Rollup, esbuild)
- Deployment + delivery-related infrastructure (Github Actions, Heroku, Vercel, NPM)
Lead Front End Architect, Pegasystems (July 2016 - May 2020)
- Front-end development lead & creator of the Bolt Design System which powers the majority of the front-end UI across Pega’s 5+ corporate sites and 7+ microsites
- Responsible for planning, building, documenting, testing, releasing, & maintaining the design system’s front-end deliverables and infrastructure
- Some critical contributions over the past 4 years have included:
- Developing a system of centrally maintained, shared UI components with deep backend CMS integration
- Progressively enhanced (basic no-JS functionality), server-side rendered (SSR) web components powered by Preact & LitElement
- Creating the scalable Sass-based CSS architecture used by front-end, and backend developers, designs, and content authors
- Modern front-end tooling used by front-end and backend developers (Gulp, Webpack, Webpack Dev Server, Babel, Rollup, Terser, Eslint, Prettier)
- Automating component documentation & demos via schemas
- Per-branch deploy previews, continuous releases to NPM + Github
- Bolt's testing infrastructure (Travis, Jest, Puppeteer, VRT, Nightwatch.js)
Front End Architecture Consultant, Digsup (June 2019 - Present)
- Freelance front-end consultant for local real estate tech startup; mentor and coach for small team of front-end devs & designers
- Led major front-end architectural refactor + design system buildout; Storybook implementation to build and maintain the app’s React-based UI components; Lerna-managed monorepo; Sass architecture
Pattern Lab Core Maintainer (June 2018 - Present)
- Core maintainer of the open source Pattern Lab project on Github; contributed to major UI overhaul (web components, Preact, Redux)
Front-end Architect, Genuine Interactive (March 2012 - March 2016)
-
Responsible for leading front-end development and architecture for multi-billion dollar companies like Akamai, Panera Bread and Lysol.
-
Collaborated with teams of designers, frontend / backend devs, and stakeholders on building large scale responsive / mobile sites
Specializations#
- Web Components
- Web Performance
- CSS Architecture
- Design Systems
- Front-end Tooling
Technical Skills#
Web Component Architecture
- Progressive enhancement & accessibility
- Custom component base Class
- Modern rendering via LitElement & Preact
- Server-side rendering (SSR) via Twig
Scalable CSS Architecture
- Specialization in scalable, maintainable BEM / ITCSS-based Sass architecture.
- Animations, CSS custom properties, advanced user customization, etc.
Modern UI Components
- React + Typescript
- Atomic Design
- Comprehensive demos & documentation
- Automated testing (Cypress, Jest, Nightwatch.js, Snapshots, E2E & cross browser testing)
- Typescript; schema-based APIs, Props
- Self-managed NPM dependencies (Lerna)
Front-end Tools & Bundling
- Webpack / WDS, Rollup, Babel, Express
- Schema validation & enforcement
- CLIs / Component Generators (Yeoman)
- Pattern Lab, Storybook, static site generators (ex. Eleventy)
Web Performance
- Performance monitoring and optimization
- Highly experience with advanced techniques like responsive images, Critical CSS, async font loading, ES Modules
Front-end DevOps & Automation
-
Continuous Integration & Deployment (Travis CI); Github Actions API integration
-
Functional and E2E Integration Testing
-
Automated deployments + deploy previews (Heroku, Vercel, Netlify)
-
Automated releases (Lerna, NPM, Github)
Contact Me#
Achievements#
Podcasts
- Design Systems Podcast (Ep 8): Bolt Design System & Front-End Architects
Awards
- Pega’s Business Operations Team Award for Innovation: Q1, 2019