Our Workflows: Design, Development, Git, Deployment

Our Workflows: Design, Development, Git, Deployment

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

Jaksot(964)

Our favourite Productivity Hacks 🔥

Our favourite Productivity Hacks 🔥

Scott and Wes - Do you sleep? How do you get so much done? You replied to me way too fast! We share our best productivity hot tips and the apps we use the GSD. Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Follow us on twitter! Wes Bos Scott Tolinski Syntax Show Notes Alfred Alfred Package Manager -Packal Alfred Units Conversion Workflow Cobalt2 Alfred Theme Alfred Timezones Workflow Alfred Process Kill Workflow ⌘+L makes text huge! Alfred Font Awesome Workflow Alfred Encode / Decode Workflow Alfred DevDocs Workflow Alfred Stack Overflow Workflow Clipy Clipboard Manager App Todoist Things App Getting Things Done Book Git Alias Text Expander aText Evernote [Video Speed Controller] https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk?hl=en() Karabiner Elements Better Touch Tool Focus App Self Control App Slicy Figma Exports CloudApp Keyboard Shortcuts You Should Know Sorry windows users. ⌘ + Tab switch between apps Press q to quit an app from this place ⌘ + Backtick to switch between multiple windows of an app ⌘ + T for a new tab ⌘ + Shift + T to reopen a closed tab Crank up Key Repeat in your keyboard setting Option + ←/→ to move word-by-word Add Shift to select those itesm ⌘+option+Arrow to switch tabs ⌘ + Number to go to that tab # Enable tabbing on OSX dialog Boxes Press question mark in any google app to get a list of shortcuts Sick Picks Scott: Rhino Sheild Case Wes: Deep Work Shameless Plugs Level Up Tuts Wes' Courses

13 Syys 20171h

CSS in JS 💅👩‍🎤💁🚒 (Drama Free!)

CSS in JS 💅👩‍🎤💁🚒 (Drama Free!)

The most requested syntax episode ever! We break down CSS in JavaScript. Pros/Cons? What is it? What problems does it solve? What libraries should you use? Is it stupid or amazing? Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Follow us on twitter! Wes Bos Scott Tolinski Syntax Show Notes BEM Styled Components Emotion Radium Glamorous Styled JSX Sick Picks Boxyapp Mail Client Airpods Shameless Plugs Grab Level Up Tuts before the price goes up! Modern Dev Tools

6 Syys 20171h 5min

Dang, that's handy! JavaScript Utility Libraries 🛠️

Dang, that's handy! JavaScript Utility Libraries 🛠️

Scott and talk all about different JavaScript utility libraries that make you say "Dang, that's handy!" Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes Lodash Underscore You should follow John David Dalton on twitter Moment.js moment().endOf(‘term’) date-fns Slugify speakingurl Fetch API Axios Cookie Jar store.js Cross Storage Faker.js Woah URL.searchParams() is a thing Parse URI url-search-params-polyfill ngrok Browsesync Async Bling.js Sick Picks Essentialism Book Essentialism Audiobook Satechi Aluminum Multi-Port Adapter Satechi all Docks Shameless Plugs Dhanish Gajjar's Instagram Paweł Grzybek's Snippet Generator Twitter Wes Bos Scott Tolinski Syntax

30 Elo 201759min

Wes Bos Origin Story 🎸💼💻🔥🐷

Wes Bos Origin Story 🎸💼💻🔥🐷

In this episode, Wes talks about his career path from a MySpace customizer to where he is now. Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes Brootal PS20.itgo.com CDN Money 2004 WesBos.com The Success of Zara: Technology Makes It Possible REI BTM at Ryerson University WordPress Codex Angle Media Group Ryerson Co-op Jet Cooper Darcy Clarke DealPage Daily Deal Aggregation jQuery IRC YayQuery Ladies Learning Code HackerYou Wes' Blog Sublime Text Book Command Line Power User Flexbox.io React For Beginners ES6 for Everyone JavaScript30 This Podcast Sick Picks MotoRead Shameless Plugs Wes' Courses Level UP Tutorials Youtube Twitter Wes Bos Scott Tolinski Syntax

23 Elo 201756min

Scott Tolinski Origin Story 🎧 📹 💻 🕺

Scott Tolinski Origin Story 🎧 📹 💻 🕺

In this episode, Scott talks about his unconventional career path and how to grow your career by working on what you love. Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes UofM Performing Arts Technology Devin Kerr Jamie Schefman Michelle Chamuel Guitar World Ghostly International Q LTD Michigan Creative Ford GTB Level Up Tutorials Scott Concussion Atya Sick Picks Good Hertz Shameless Plugs Wes' Courses Level Up Tutorials Youtube How to GraphQL Twitter Wes Bos Scott Tolinski Syntax

16 Elo 201756min

Accepting Money on the Internet 💰💸

Accepting Money on the Internet 💰💸

In this episode we talk about how to accept money on the internet including the ups of Stripe, the downs of PayPal. Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes Apollo React Apollo GraphCool Stripe PayPal Braintree Stripe Docs HTML5 Autocomplete Types Stripe Radar Royal Bank PayPal WorkAround Stripe Atlas Transferwise Stripe Bitcoin Sick Picks ChefSteps What Cha Tea Shameless Plugs Wes' Courses Level UP Tutorials Youtube How to GraphQL Twitter Wes Bos Scott Tolinski Syntax

9 Elo 20171h 3min

How to Slam Dunk Freelancing 🏀🤑

How to Slam Dunk Freelancing 🏀🤑

Sponsor Deliciousbrains WP Migrate DB Pro - Use the code SYNTAX for 20% off Show Notes Stickers - SOLD OUT MORE SOON Scott's Personal Website on Gatsby Gatsby Codealong Gatsby MJML Email Framework The E-Myth Revisited Book Design is a Job Breaking the Time Barrier Basecamp Trello Freshbooks Wave Sick Picks Hyper Key + Karabiner Elements Better Touch Tool King of the Road Twitter Wes Bos Scott Tolinski Syntax

2 Elo 201758min

JavaScript Tooling - 004

JavaScript Tooling - 004

Show Notes Deliciousbrains WP Migrate DB Pro WesBos Website Level Up Tutorials WHY USE WWW? Webpack Babel ESLint Prettier Babili Prepack Sick Picks Figma Turn Ideas into Products Faster Design, prototype, and gather feedback all in one place with Figma. CalDigit TS3 Dock The TS3 is designed for users who require their Thunderbolt™ dock to act as the main charging hub for their laptop. Delivering the reality of single cable charging, ONE Thunderbolt™ 3 cable is all it takes for a clean, elegant and streamlined workspace. Shameless Plugs JavaScript30 A Free 30 Day Vanilla JS Coding Challenge Course. Build 30 things in 30 days with 30 tutorials. No Frameworks No Compilers No Libraries No Boilerplate. Join 101,746 others. React Native for everyone Twitter Wes Bos Scott Tolinski

26 Heinä 201749min

Suosittua kategoriassa Politiikka ja uutiset

rss-ootsa-kuullut-tasta
aikalisa
tervo-halme
ootsa-kuullut-tasta-2
politiikan-puskaradio
viisupodi
rss-podme-livebox
et-sa-noin-voi-sanoo-esittaa
otetaan-yhdet
rss-vaalirankkurit-podcast
aihe
the-ulkopolitist
rss-polikulaari-humanisti-vastaa-ja-muut-ts-podcastit
rss-hyvaa-huomenta-bryssel
rss-kuka-mina-olen
politbyroo
linda-maria
rss-lets-talk-about-hair
rss-50100-podcast
rss-tekoalyfoorumi