931: Project Init - How to Make Good Choices When Starting a New Coding Project

Freshbooks — Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 02:55 Wes' Async + Await talk on YouTube from DotJS JavaScript is Asynchronous Ryan Dhal (Creator of Node.js) original Node.js talk 06:00 Callback Hell Q Bluebird What is a promise? Promises are an IOU 8:30 Async + Await IS promises What is Async + Await? How does the code look? Returning values from an await 15:20 Performance Considerations MEGA PROMISES Promise.all() Here is an example: const [weather, store] = Promise.all(getWeather(), getStores()); 19:22 This stuff is 100% native Most new Browser APIs are build on Promises Fetch() Some examples: await fetch(' https://api.github.com/users/wesbos').then(data => data.json()) OR await (await fetch(' https://api.github.com/users/wesbos')).json() Axios 22:48 The Payment Request API You should listen to episode 006 on accepting money on the internet Web Animation API 27:00 Snackisodes Snack Packs Hasty Treats?!!! 28:00 Making callback-based functions promised basked es6-promisify util.promisify() 30:00 Error Handling Methods View my slides for some code examples. Try/Catch High Order Function Just handle the error when you callIt().catch(dealWithIt); Node's process.on('unhandledRejection') event 36:00 Browser Support Babel it! 38:00 AbortController() Abortable Fetch SIIIIICK PICKS 42:00 Scott: Ring Doorbell Wes: The Indicator Podcast 47:00 Sick Tip Chrome's Autoplay is changing Details on this Visit chrome://media-engagement to see your scores Shameless Plugs Fullstack GraphQL CSS Grid Course is coming sooooon! 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

17 Tammi 201854min

Snipcart — Sponsor Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at Snipcart.com/syntax and sign up for three months free! Freshbooks — Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. { show(id: 027) { notes }} 02:40 What is GraphQL anyways? GraphQL Relational Data 04:45 How is it different than REST? 08:30 GraphQL's self documenting Nature 09:20 You don't need to replace your existing REST api It can sit infront of multiple APIs 10:00 GraphQL Resolvers Apollo Link State does local data as well 11:50 GraphQL on the client side Relay Apollo GraphQL Request Lokka Nano 13:30 Why we like Apollo Setup is amazingly fast 15:00 Pagination Refreshing of data 18:00 The GraphQL Core Concepts Queries Mutations Filtering and Sorting It's not really a query language 21:00 How do you say Schema? 22:00 More on Resolvers 22:50 Mutations Updating the cache 27:00 Using with existing APIs Do you have two schemas now? One for MongoDB and one for GraphQL? 35:00 CMS and Static Site Generators that run on GraphQL Gatsby WP-GraphQL GraphCMS 45:00 Graph Cool 53:00 Apollo Link Apollo VS Redux 56:00 Graphiql SIIIIICK PICKS Wes: The Indicator Podcast Scott: You Don't Know JS Shameless Plugs Free GraphQL Tuts from Scott CSS Grid Course is coming sooooon! 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

10 Tammi 20181h 6min

Dev Lifts — Sponsor Dev Lifts will create a personal training plan tailored to your 2018 health and fitness goals. Use the code SYNTAX for $50 off. Join with a friend and we'll make you a Buddy Plan that you can do together (nutrition will still be tailored on a per-individual basis, but workouts will be something you can both do together)! Plus, use the coupon code below and you'll both get $100 off. Enter each other's email address as the coupon code and your discount will be applied to your invoices (invoices are sent manually currently, so I'll apply the discount for you both once you've both signed up). Valid thru January 31, 2018. The Show Notes! 01:00 Scott's New Redux Course Redux Docs What is Redux? Why do we need it? 06:00 Modifying Your State Immutability 07:15 Actions + Actions Creators Dispatching 09:00 Reducers 14:00 Wes' Redux Tutorial 18:30 What is the difference between Cookies and JWT? 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

3 Tammi 201826min

Wes details "Breakout" — his email management strategy for overwhelmed creatives and Scott and Wes chat about how they have their prettier setup. Freshbooks — Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. The Show Notes! 01:00 Wes' notes on the Breakout Email Management System 02:00 Do you like minisode or snackisode? Any other ideas for names for these short episodes? 04:00 Email is often busywork 04:30 You likely have a decision problem 06:00 Kill it at the source! How do you stop email from getting to you in the first place? 08:00 Your inbox is not the world's TODO list Process it when you get it Getting Things Done 09:30 Filter! Filter! Filter! 10:30 Germans sure do get a lot of vacation time! 13:00 Expansions Using Robots for empathy Text Expander aText 15:30 Dictation is great! 17:30 Video responses 18:30 Defer 19:19 Batch Processing Email Send + Archive 20:31 Stop emailing yourself 24:00 Listener Question: How do you use Prettier? 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

27 Joulu 201730min

Scott and Wes dive into CSS BEM — What is it? Why do you need it? How does it work? Sign up for D3 in 5 Days — Sponsor D3 has a bit of a bad reputation for being hard to learn so Ben Clinkinbeard has put together this awesome 5 day email course that will get you comfortable with the 3 or 4 fundamental concepts that are needed to create amazing data visualizations with D3.js. Get it now The Show Notes! 01:00 Minisode! What do you think? Meijer is the best! 05:00 What is CSS BEM? What problems does CSS BEM solve? Block, Element, Modifier! 8:00 What about really long class names? 9:00 Use with Sass/Stylus 12:00 What about styled components?! 15:00 Listener Question: Do / should you use Dropbox for a website with Git and node_modules? 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

21 Joulu 201723min

What happened in web development in 2017? What were our personal and professional feats in 2017? What should we look forward to in 2018? Snipcart — Sponsor Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at Snipcart.com/syntax and sign up for three months free! Freshbooks — Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. The Show Notes! 02:00 Scott's 2017 Look Back Scott is a new parent Dealing with kids who don't sleep Scott's Breakdancing Gains 05:20 Wes' Look Back Taking Health Seriously First full year of Wes doing tutorials full time Course Correction VS Goals Course Platform Improvements Lots of Email Marketing Migration to Drip 09:10 Scott cut ties with startup 100% Invested in Levelup Tutorials Major Platform improvements New Payment Gateways Lots of new Series - 400 videos! 11:25 We Launched Syntax! Thank you! The show is getting good (we think?) 13:50 Wes launched his Learn Node Course Wes updated his ES6 for Everyone Course Lots of feedback on Wes' JavaScript30 course Stickers! 16:20 Goals for 2018 The Yacht Club S.M.A.R.T. Goals 18:00 Scott's 2018 Goals More videos More Youtube Building a Set Less Overtime 20:35 Wes' 2018 Goals Releasing lots and lots of Content CSS Grid VS Code Some ideas around JavaScript and CSS Courses (tweet Wes your feedback) If it's not a Hell Yes, it's a no Double down on what works New Checkout Experience Delegate + Automate Get faster at recording 29:40 JavaScript in 2018 SSR Frameworks: Next.js, Gatsby, Nuxt.js ParcelJS Tooling is becoming less of a pain in the ass 33:00 GraphQL Is Blowin' Upppppp Typed Languages / Typings Flow / Typescript / ReasonML / GraphQL Typings 38:00 WordPress' Gutenberg Editor 41:00 React Patent's Dropped Vue became really popular 45:30 CSS Changes! CSS Grid Firefox CSS Grid Dev Tools 48:50 Componentized CSS Design Systems Figma CSS Variables 54:00 VS Code became very popular 55:00 The Iron Yard shut down 58:00 Progressive Web Apps 59:00 What do we hope for in 2018? Sick Picks Scott: Google Daydream Wes: Missive 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

13 Joulu 20171h 8min

Failure. How do you deal with it? How to learn from it? How do you know when you should give up vs keep pushing? Snipcart — Sponsor Snipcart allows you to create online shopping carts without any backend work. It's entirely client-side which means it's the perfect fit for anyone building a SPA in React, Angular or any other framework. Check out the full list of features over at Snipcart.com/syntax and sign up for three months free! Get In Shape with DevLifts — Sponsor DevLifts is how I (Wes) got in shape. After an indepth consultation about your goals, They will create you a personal training and nutrition plan. If you are looking to get in shape in 2018, now is the time to sign up. Use the code SYNTAX for an extra $50 off. The Show Notes! 01:34 Scott and Wes shoot the shit Wes is back from the DotJS conference Wes does a terrible (and hopefully not offensive) French Accent 03:50 What's the deal with the #FailFast culture We talk about Fear of Failure and how it can stop you from starting anything at all High Stakes vs Low Stakes Failure 09:20 Be aware of how fear of failure manifests itself in your work Just do it, put in the work Pen to Paper 12:20 How to deal with mid-project failure Getting sick of a project part way through Finishing Things is such an underrated skill Small wins is key for confidence Take the emotion out of the decisions 18:00 MVP - Minimum Viable Product 19:30 Do you plan for failure? Wes' Life is Course Correction Wes is Unapologetically Confident Scott is Ignorantly Confident 23:00 Another one of Scott's amazing segueways into our Sponsor 26:20 Wes' Facebook Ads Failures The cost of admission Own your role in something failing 33:33 Eating burnt rice is a huge character trait Pivoting 41:20 Our own personal failures detailed Scott's Soundcloud Scott's Bandcamp Sick Picks Scott: Cypress.io Wes: Dome D201 Dashcam Tweet us your tasty treats! Wes' Instagram Wes' Twitter Wes' Facebook Scott's Twitter Scott's Instagram Make sure to include @SynaxFM in your tweets

6 Joulu 20171h 8min

Wes and Scott talk about the future of CSS - what is new and what should we expect to be coming in the near future? Bug Replay - Sponsor You need to try out Bug Replay for recording and re-playing browser based bugs. It's a bug reporting tool that can be used at all stages of development and by anyone in your organization. Provide your dev team with detailed reports so they can fix bugs faster. Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. The Show Notes! 03:30 IT'S NOT CALLED CSS4 You can find the different levels over at CSS Working Group Drafts 06:24 CSS Custom Properties (CSS Variables) Bite and chew over the syntax - it's backwards compatible What's the difference between this and Sass/Less/Stylus? JavaScript30.com Day 3 uses JavaScript + CSS Variables CSS Tricks: The CSS attr() function got nothin’ on custom properties Independent Transforms - transform: rotateX(var(--x)) translateY(var(--y)); 19:20 CSS Filters Drop Shadow Filter SVG Filters 28:20 RRGGBBAA Hex transparency in colors 31:00 Colour Functions CSS Next Draft Spec for Color Functions 36:00 CSS Level 4 Selectors ITS NOT CSS4!!!!!! css4.rocks 40:00 nth-of-selectoed :nth-child(3n of img.dog) div:has(img) 44:00 Some not-so-new-but-still-cool units Viewport Units min-height: 100vh ch units ex units CSS Angles - deg(), grad(), rad(), turn() Sick Picks Scott: Google Pixel 2 XL Wes: Anker 5 Port 40w USB Charger Anker 10 Port 60w USB Charger Anker 5 Port 60w with a USB-C Port Tweet us your tasty treats! Wes' Twitter Wes' Instagram Wes' Facebook Scott's Twitter Scott's Instagram Make sure to include @SynaxFM in your tweets

29 Marras 201758min