Our Workflows: Design, Development, Git, Deployment

Syntax

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

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 ××× SIIIIICK ××× PIIIICKS ××× Shameless Plugs Tweet us your tasty treats!

Please note that Dev Shows isn’t affiliated with the featured podcasts. Each podcast’s content (logo and other images, audio, and text) is property of the show itself. Their content is retrieved from the show’s RSS feed and may contain the occasional error, such as an MP3 audio URL that doesn't work. And, of course, any opinions expressed, or product endorsements made, by a show’s host(s) or guest(s) are theirs alone.

All other content is © 2020–21 Dev Shows.

Made by Bruce.
I’m a freelance developer available for hire.

Audio Player

-
--:--
--:--