Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Our Workflows: Design, Development, Git, Deployment

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p>It’s a workflow extravaganza! Scott and Wes talk about their development workflows, covering everything from design to deployment.</p> <h2><a id="Cofeecups_CSS_Grid_Builder_Tool_9" name= "Cofeecups_CSS_Grid_Builder_Tool_9"></a>Coffeecup’s CSS Grid Builder Tool</h2> <p>Check out Coffeecup’s <a href="https://cssgrid.cc/">CSS Grid.cc</a> builder tool and resources to learn, prototype and build next gen layouts with CSS Grid!</p> <h2><a id="VueSchoolios_Vuejs_Masterclass_13" name= "VueSchoolios_Vuejs_Masterclass_13"></a><a href= "http://vueschool.io/">VueSchool.io</a>'s Vue.js Masterclass</h2> <p>Check out <a href="https://vueschool.io/">VueSchool.io’s new Vue.js Masterclass</a> 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 <a href= "https://vueschool.io/syntax">VueSchool.io/syntax</a> to get 25% off.</p> <h2><a id="Show_Notes_16" name="Show_Notes_16"></a>Show Notes</h2> <p>4:00 - Design Workflow</p> <ul> <li> <p>Wes:</p> <ul> <li>Screenshots of look + feels</li> <li>Sketch layouts out in pencil</li> <li>Mock up layout in Sketch</li> <li>Once rough layout is done, I refine</li> <li>Once I have: colors, type, patterns, textures and overall layout, I move to code.</li> <li>A design program is important to vs designing in code</li> </ul> </li> <li> <p>Scott</p> <ul> <li>Mirrored component structure in Figma</li> <li>Using Ideas from Atomic design and React components</li> <li>Goal is for Figma components to be 100% mapped to styled components</li> <li>Flexible and testable in different layouts</li> <li>My design philosophy is refinement through iteration</li> <li>Light theft <ul> <li>Footer from <a href= "https://pitchfork.com/">Pitchfork</a></li> <li>New card animation idea from <a href= "http://www.patagonia.com/">Patagonia</a></li> </ul> </li> </ul> </li> </ul> <p>15:55 - Design to Dev Workflow</p> <ul> <li> <p>Wes:</p> <ul> <li>Happy with design so far</li> <li>Setup tooling - styled components, stylus, sass…</li> <li>Setup type, variables, partials, resets…</li> <li>Do as much HTML as possible before styling</li> <li>CSS it up for layouts, then go section by section</li> <li>Broad first, then zoom in on finesse</li> <li>Browsersync / Hot Reload</li> <li>Test across browsers / Devices</li> </ul> </li> <li> <p>Scott:</p> <ul> <li>Define parameters in Figma</li> <li>Styled components in React, hand write that CSS bruh</li> <li>Move aspects of styled components lib like breakpoints, colors, functions, helpers, base components</li> </ul> </li> </ul> <p>32:06 - Git Workflow</p> <ul> <li> <p>Wes:</p> <ul> <li>Tear off a branch - name after issue - DEV113</li> <li>Do your work</li> <li>Rebase</li> <li>Squash</li> <li>Pull Request</li> <li>Rinse + Repeat</li> </ul> </li> <li> <p>Scott</p> <ul> <li>Master branch is 1-1 with live</li> <li>Develop is where work is done (but not really because I make a feature branch for each feature and merge in)</li> <li>Contributors issue pull requests into develop</li> </ul> </li> </ul> <p>42:34 - Deployment Workflow</p> <ul> <li> <p>Scott:</p> <ul> <li>Hosted on Meteor Galaxy, container based hosting</li> <li>Develop is merged into master, all tests run, if everything passes tests and manual check, I deploy to Galaxy via NPM script.</li> <li>Soon I’ll be adding in automated test running & auto deploy to galaxy on push to master.</li> <li>Secrets are kept in a settings.json file that’s used during deployment.</li> </ul> </li> <li> <p>Wes:</p> <ul> <li>Codeship</li> <li>DeployHQ</li> <li>Git</li> <li>Rsync</li> <li>Dealing with secrets</li> </ul> </li> </ul> <p>49:53 - Project Folder Structure</p> <ul> <li> <p>Wes:</p> <ul> <li>Folder Structure - 0100, 0101…</li> </ul> </li> <li> <p>Scott:</p> <ul> <li>API</li> <li>UI <ul> <li>element -> styled components with index</li> </ul> </li> <li>Startup</li> <li>Utilities</li> </ul> </li> </ul> <h2><a id="Links_97" name="Links_97"></a>Links</h2> <ul> <li><a href= "https://upload.wikimedia.org/wikipedia/en/thumb/3/33/BNO-trainwreck_cover.jpg/220px-BNO-trainwreck_cover.jpg"> BNO Train Wreck Album</a></li> <li><a href= "http://bradfrost.com/blog/post/atomic-web-design/">Atomic Design</a></li> <li><a href= "https://www.invisionapp.com/blog/guide-to-design-systems/">Guide Design Systems</a></li> <li><a href="https://browsersync.io/">BrowserSync</a></li> <li><a href="https://www.fontsquirrel.com/">FontSquirrel</a></li> <li><a href="https://www.fontplop.com/">fontplop</a></li> <li><a href="https://creativemarket.com/">Creative Market</a></li> <li><a href= "https://deliciousbrains.com/wp-migrate-db-pro/">Delicious Brain’s WP Migrate DB Pro</a></li> <li><a href="https://www.youtube.com/watch?v=M3BM9TB-8yA">Ryan Dahl - 10 Things I Regret About Node.js</a></li> </ul> <h2><a id="_SIIIIICK__PIIIICKS__109" name= "_SIIIIICK__PIIIICKS__109"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li>Scott: <a href= "https://www.nintendo.com/games/detail/overcooked-special-edition-switch">Overcooked - Nintendo Switch</a></li> <li>Wes: <a href= "https://www.skyroam.com/?rfsn=1346968.ac598">SkyRoam Solis</a></li> </ul> <h2><a id="Shameless_Plugs_114" name= "Shameless_Plugs_114"></a>Shameless Plugs</h2> <ul> <li><a href="https://leveluptutorials.com/store">Scott’s Level 2 React Course</a></li> <li><a href="https://wesbos.com/courses">Wes’ Courses</a></li> </ul> <h2><a id="Tweet_us_your_tasty_treats_119" name= "Tweet_us_your_tasty_treats_119"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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

Aplikace Youradio Talk

Our Workflows: Design, Development, Git, Deployment

Poslechněte si podcast