51

June 20th, 2018 ×

Our Workflows — Design, Development, Git and Deployment

Wes Bos

Wes Bos Host

Scott Tolinski

Scott Tolinski Host

or
Show Notes Transcript

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

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

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Share