meta_pixel
Tapesearch Logo
Log in
Syntax - Tasty Web Development Treats

Our Workflows: Design, Development, Git, Deployment

Syntax - Tasty Web Development Treats

Wes Bos

Js, Technology, Css, Html5, Tech News, Webdevelopment, News, Javascript, Html

4.9 • 1.1K Ratings

🗓️ 20 June 2018

⏱️ 67 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

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!

Transcript

Click on a timestamp to play from that location

0:00.0

You're listening to Syntax, the podcast with the tastiest web development treats out there.

0:06.1

Strap yourself in and get ready.

0:08.1

Here is Scott Tolinsky and West Boss.

0:10.6

Welcome to Syntax. In this episode we are going to be talking all about our

0:16.7

workflows in all kinds of ways we're going to be talking about our design

0:20.8

workflows, our designed to development work workflows are sort of how we use

0:24.8

get in our projects how we even deploy and really just work on our sites what the

0:30.2

processes that both Wes and I use as sort of in a project to project basis.

0:35.7

So as always with me is Wes Boss say what's up.

0:39.3

Hello everybody hope you're doing well.

0:41.7

Yeah so this episode is sponsored by coffee cup software CSS grid building tool which is a brilliant

0:49.3

tool that allows you to both design and develop CSS grid-based layouts and a really brilliant

0:56.8

visual editor as well as View School which is going to be a new course on view which is going to really level up your view skills.

1:06.5

So check it out.

1:08.3

We'll get into both of those a little bit more as the episode goes on. So how are you doing Wes how's it going today?

1:16.0

I'm doing fantastic I just got back from Dayton Ohio in which I had a company down there called Spark Box, a pretty cool company.

1:25.3

They actually designed the original CodePen layout which I thought was pretty nifty,

1:29.6

but they brought me in to do a workshop on kind of like just like web apps and

1:35.2

JavaScript in general so we did a full day workshop on promises a sync away

1:40.4

the modules we used a parcel bundler by the way I'm absolutely in love with parcel yeah I'm so good I'm working on a course right now for electron and I'm using

1:50.9

parcel for that and it's just like everything in parcel. I'm just a huge fan. I use it all the time. Yeah. I can't believe how how much of a joy it is. I find that the docks aren't great but you mostly don't need the docks.

2:04.3

Yeah. We did that and then we also did service workers. We built this like photo booth

...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.

Copyright © Tapesearch 2025.