Our Workflows — Design, Development, Git and Deployment

It's a workflow extravaganza! Scott and Wes talk about their development workflows, covering everything from design to deployment.

Cofeecup's CSS Grid Builder Tool — Sponsor

Check out Coffeecup's CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!

VueSchool.io's Vue.js Masterclass — Sponsor

Check out VueSchool.io's new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off.

Show Notes

4:00 - Design Workflow

• Wes:

  • Screenshots of look + feels
  • Sketch layouts out in pencil
  • Mock up layout in Sketch
  • Once rough layout is done, I refine
  • Once I have: colors, type, patterns, textures and overall layout, I move to code.
  • A design program is important to vs designing in code

• Scott

  • Mirrored component structure in Figma
  • Using Ideas from Atomic design and React components
  • Goal is for Figma components to be 100% mapped to styled components
  • Flexible and testable in different layouts
  • My design philosophy is refinement through iteration
  • Light theft
    • Footer from Pitchfork
    • New card animation idea from Patagonia

15:55 - Design to Dev Workflow

• Wes:

  • Happy with design so far
  • Setup tooling - styled components, stylus, sass...
  • Setup type, variables, partials, resets...
  • Do as much HTML as possible before styling
  • CSS it up for layouts, then go section by section
  • Broad first, then zoom in on finesse
  • Browsersync / Hot Reload
  • Test across browsers / Devices

• Scott:

  • Define parameters in Figma
  • Styled components in React, hand write that CSS bruh
  • Move aspects of styled components lib like breakpoints, colors, functions, helpers, base components

32:06 - Git Workflow

• Wes:

  • Tear off a branch - name after issue - DEV113
  • Do your work
  • Rebase
  • Squash
  • Pull Request
  • Rinse + Repeat

• Scott

  • Master branch is 1-1 with live
  • Develop is where work is done (but not really because I make a feature branch for each feature and merge in)
  • Contributors issue pull requests into develop

42:34 - Deployment Workflow

• Scott:

  • Hosted on Meteor Galaxy, container based hosting
  • Develop is merged into master, all tests run, if everything passes tests and manual check, I deploy to Galaxy via NPM script.
  • Soon I'll be adding in automated test running & auto deploy to galaxy on push to master.
  • Secrets are kept in a settings.json file that's used during deployment.

• Wes:

  • Codeship
  • DeployHQ
  • Git
  • Rsync
  • Dealing with secrets

49:53 - Project Folder Structure

• Wes:

  • Folder Structure - 0100, 0101…

• Scott:

  • API
  • UI
    • element -> styled components with index
  • Startup
  • Utilities

Links

• BNO Train Wreck Album
• Atomic Design
• Guide Design Systems
• BrowserSync
• FontSquirrel
• fontplop
• Creative Market
• Delicious Brain's WP Migrate DB Pro
• Ryan Dahl - 10 Things I Regret About Node.js

××× SIIIIICK ××× PIIIICKS ×××

• Scott: Overcooked - Nintendo Switch
• Wes: SkyRoam Solis

Shameless Plugs

• Scott's Level 2 React Course
• Wes' Courses

Tweet us your tasty treats!

• Scott's Instagram
• LevelUpTutorials Instagram
• Wes' Instagram
• Wes' Twitter
• Wes' Facebook
• Scott's Twitter
• Make sure to include @SyntaxFM in your tweets