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

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

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