Syntax - Tasty Web Development Treats

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

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

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

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

Dive into the world of CSS with the BEM methodology! Discover how BEM improves organization and maintainability in stylesheets. The hosts tackle concerns about long class names while comparing BEM to modern techniques. They also discuss using Dropbox alongside Git for website development, weighing the pros and cons of each strategy. Plus, learn about a free email course on D3.js that promises to make data visualization a breeze!

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

The discussion dives deep into the fear of failure and its impact on creativity. Strategies to overcome procrastination and the value of small wins are explored. Personal anecdotes highlight the importance of learning from MVP failures. The speakers emphasize how embracing setbacks can lead to growth, both personally and professionally. They also offer insights into strategic pivots after challenges, sharing lessons learned from their own career failures and the significance of accountability in team dynamics.

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

Wes and Scott talk about their fitness journey and how it relates to being a web developer in terms of energy, focus and mental clarity. Get Fit with Dev Lifts — Show Sponsor Dev Lifts - Thad and JC are on a mission to make web developers healthy. They are currently offering Personal Training and Nutrition Plans for $149 (Regular $249) and with the code Syntax you'll get an extra $50 off. That's only $99 for the next ~95 people! The Show Notes 04:20 - Scott's Fitness Story 08:00 - Wes's Fitness Story 09:50 - The benefits of fitness and being a web developer. Productivity / Focus / Mental Clarity 14:00 - Finding Time to Work Out Tweet your work + workout routine to @SyntaxFM 17:40 - How to work out / What to do / Routines? 24:00 - Learning to code && Learning to Workout 25:20 - Significant Other Buy-in Fitness Blender Starting Strength 28:00 - All About Dev Lifts Jeff Nippard Youtube 34:00 — Nurition 36:00 — Wes' Keto Nutrition Plan Dom D'Agostino Keto Interview MyFitnessPal Keto Reddit Keto Gains Reddit 41:00 - Scott's Nutrition 42:00 - Pop or Soda? 45:45 - 16 : 8 Intermittent Fasting IF Reddit 48:30 - Dieting is bad Supplements — Don't take our Advice here. Talk to your trainer. 50:00 - Wes' Supplements and how Bags of Milk are the best BCAA Amino Energy Preworkout Coke'd Up Cissus Quadrangularis Extract - Genoflex Fish Oil Vita Jym Multivitamin 54:00 - Scott's Supplements NOW Adam Superior Men’s Multi Optimum Nutrition Gold Standard 100% Whey Protein NOW Psyllium Husk BulkSupplements Pure L-Citrulline DL-Malate 2:1 Powder Bulksupplements Pure Caffeine Capsules. Caffeine can be dangerous warning! Sick Picks Scott: TriggerPoint GRID Foam Roller Wes: Nike Techfleece Joggers Tweet us your tasty treats! Wes Bos Scott Tolinski Make sure to include @SyntaxFM

Wes talks to Scott about speaking at conferences. What are the benefits of speaking? How do you apply? What talk should you give? What makes a good conference talk? Freshbooks is the best! Freshbooks.com/syntax - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. The Show Notes Snow Tires are supes important Blizzzzaaaaakkksss!!! Benefits Free travel / accommodations / vacation Fantastic Friendships and Industry Connections Job Opportunities Industry Recognition Renewed Excitement Wes loved David K Piano's Flip Talk How do you Apply / Where to Find Conferences Create a CFP You need to brute force it 🍯 Honey Hole: Lanyrd Calls 🐝 Honey Hole: The Weekly CFP 🍯 Honey Hole: Papercall.io Meetup Types of Talks you could give Lessons Learned Talk The New Concept Talk (the tasty treats talk) My Approach to XYZ The Complicated Concepts Explained The Super Interesting Deep End Talk What makes a good talk? Skip the history lesson - hook them Keep your personal bio short Start with a banger ‼️ Short Code Examples Short Looping video examples Scott's Origin Story Podcast Make sure your talk works offline Prepare for aspect ratios Plug into the projector before your talk Live that dongle life Show people why they need to know something Slide Deck Software Powerpoint or Keynote Wes' HTML5 Slide Deck Another one of Wes' talks Reveal JS React Spectacle Prezi Conference Training Training pays well More hands on experience for conf attendees Getting the Most out of a tech conference Wes' Post on Getting the most out of a conference Conf Code of Conduct Logitech Wireless Clicker Join Twitter Early Have Lunch with Speakers Stay off your phone Keep your name badge on! Practice your break away Sick Picks Scott: Spectacle Window Manager Wes: What the heck is the event loop anyway? Tweet us your tasty treats! Wes Bos Scott Tolinski Make sure to include @SyntaxFM