Playing: 051: Our Workflows — Design, Development, Git and Deployment
Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More!
Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!
How We Manage Our Lives — Notion, Todos, Notes, Focusing, Calendars, Goal tracking, and more!
Potluck - Changing careers × Repo organization × CSS Grid × Certifications × Freelancing × Spammers × More
Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More
Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More
Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources
Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials
Potluck EP × Is Redux Dead × Learning Quickly × Developing Solo × Specialist vs Generalist × Funnest Projects × Wes’ BBQ Course
Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman
Wes and Scott's Lives - Breakdancing, BBQ, Wives, Work/Life Balance, Problem Solving, YouTube Subscriptions
Snack Pack — CSS Frameworks, React HOC, Render Props, Coding Designers, Early Career Advice and a sound board!
Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!
Jun 20th, 2018
Our Workflows — Design, Development, Git and Deployment👇 Download Show✏️ Edit Show Notes
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