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
4:00 - Design Workflow
- 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
- 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
15:55 - Design to Dev Workflow
- 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
- 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
- Tear off a branch - name after issue - DEV113
- Do your work
- Pull Request
- Rinse + Repeat
- 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
- 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.
- Dealing with secrets
49:53 - Project Folder Structure
- Folder Structure - 0100, 0101…
- element -> styled components with index
- BNO Train Wreck Album
- Atomic Design
- Guide Design Systems
- Creative Market
- Delicious Brain's WP Migrate DB Pro
- Ryan Dahl - 10 Things I Regret About Node.js