It’s a workflow extravaganza! Scott and Wes talk about their development workflows, covering everything from design to deployment.
Coffeecup’s CSS Grid Builder Tool 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 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