Syntax - Tasty Web Development Treats

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

It's a long awaited CSS Grid show! How does it work? When do you use it? What's the difference between Grid and Flexbox? Sponsor Save A Bro is selling absolutely hilarious mustache t-shirts for $18 - all proceeds go to support the fight against prostate cancer. Use the coupon code "syntax" at checkout to get free shipping in the US. The Show Notes Wes Bos AMA where he tricked Scott that Bert Bos was his dad CSS Tricks A Complete Guide to Grid Rachel Andrew Rachel Andrew Twitter Rachel's Grid by Example Rachel's Grid AMA CSS Grid Garden The Story of CSS Grid, from Its Creators Jen Simmons Jen Simmons Twitter Jen Simmons Labs CSS Grid Pinterest / Masonry Layout Question Wes' grid-auto-flow: dense; Experiment grid-auto-flow: dense; Docs caniuse CSS Grid Support - make sure to click the "Show All" button "If someone thinks progressive enhancement means providing a crappy experience for older browsers then they’ve got a lot of reading to do." — Sara Soueidan Benjamin De Cock - @bdc dropping tasty CSS Grid treats all day long on twitter. CSS Grid Animation #1 CSS Grid Animation #2 David K Piano Twitter Flipping Slide Deck on FLIP CSS Grid Template Area ASCII Grid repeat() Grid minmax() CSS Grid nth-row() CSS Sub-Grid Sick Picks Scott: Just My Type Wes: Sick Update on the Caldigit TS3 Dock Tweet us your tasty treats! Wes Bos Scott Tolinski Make sure to include @SyntaxFM

Buzz Words! WTF Do they mean?! Do They Mean Things?? Let's Find Out! Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. The Buzz Words This is the order in which we talk about the different concepts. If you have anything you'd like to add to the next buzz words show, tweet us @SyntaxFM  Serverless / Cloud Functions Composition in functional programming funfunfunction Progressive Enhancement Singleton APIs + SDKs Pure Functions + Side Effects Date-fns Immutable / Mutable / Mutations Immutable.js JavaScript30 Array Cardio Isomorphic / Universal JavaScript Microservices Scoping Closures Model View Controller Pattern Learn Node with a stupid explanation of MVC Bike Shedding Tree Shaking Hoisting ES Next Asynchronous / Synchronous Sick Picks Scott: Ghost in the Wires: My Adventures as the World's Most Wanted Hacker Wes: Apollo Reddit App for iOS Shameless Plugs Scott: React 16 for Everyone Tweet us your tasty treats! Wes Bos Scott Tolinski Make sure to include @SyntaxFM

Show Notes Q: Rems vs Ems vs Pixels? What do you use? Q: What activity, that isn't developer related, benefits you most as a developer? Becoming a Supple Leopard Q: Is a hot dog a sandwich? 🌭 Q If Google offered you a job today, would you take it? Mike Rowe: Why Entrepreneurs Crave the 'Reverse Commute' Q: How did Wes and Scott Meet? Q: What are your thoughts on CMSs, like WordPress, adding JavaScript frameworks, like React? Q: Where do you find remote work? Q: How do you make money? Q: Can a back-end dev become a good designer? Hero Patterns Steve Schoger's Twitter Q: Do you ever feel tired? Q: What do you think about live streaming? Should we do a Syntax live stream?! Q: What stack should a new developer use? Q: What is your process for deciding on new tools? React FAQ - sign up for Tim's newsletter! Q: Where do you see yourself in 5 years? Sick Picks Scott: Fivestar Notebook Wes: Read about your credit card benefits + perks! Tweet us your tips! Wes Bos Scott Tolinski Make sure to include @SyntaxFM

Dive into essential advice for budding developers and tackle the notorious imposter syndrome. Discover how a growth mindset can transform your learning journey and appreciate the power of consistency in skill development. Learn the value of hands-on experience, sharing your progress, and engaging with the community. Explore the significance of pursuing job opportunities and the boost they offer to confidence. Plus, indulge in delightful tales from gaming, practical design tips, and fresh resources to enhance your projects!

Scott and Wes dive into their tech stacks, sharing insights on transitioning from Drupal to custom solutions. They discuss the pros and cons of backend technologies like Meteor and Express, along with user account management and efficient database integrations. The duo also tackles video hosting challenges, exploring options like Amazon S3 and Backblaze. Listeners will enjoy tips on optimizing asset storage, effective charting libraries, and navigating various web hosting services for streamlined development.

Discover the secrets to mastering the command line and enhance your web development prowess. Dive into various terminal applications and their productivity benefits, from ZSH to Fish. Explore handy plugins that simplify navigation and manage files seamlessly. Learn how to customize your command line experience with Yarn and tips for using tab triggers. Plus, check out valuable resources on software design and personal nutrition tracking tools.

Scott and Wes talk about switching to VS Code. What is so good about it? Killer features? Must have Plugins! Sponsor Need to learn Docker? Check out Nick Janetakis' Dive into Docker course which is currently on sale! Follow us on twitter! Wes Bos Scott Tolinski Syntax Show Notes Cobalt2 for VS Code Visual Studio Code @rachsmithtweets 🔥 rename symbol tip - you should follow her too! Use F8 to cycle through inline errors Open the problems tab to see all your applications errors and warnings The built in debugger ESlint Package You can use the Prettier Package on it's own, or use via your .eslintrc file and just use the above ESLint plugin. Git History Git Lens Debugger for Chrome Color Highlight Settings: "editor.formatOnSave": true and "eslint.autoFixOnSave": true Wes' Current ESLint + Prettier Config Grumpy Developer Import Cost Path Intellisense npm Intellisense CSS Intellisense PHP Intellisense Another PHP Intellisense Custom CSS and JS Loader Cobalt2 Theme Material Theme Material Pale Night Theme Version Lens for npm Project Manager ⌘ + # Tabs Key Bindings Scott's VS Code Series on YouTube Sublime Keymap for VS Code ES6 Absolute Imports with Webpack Sick Picks Scott: Moonwalking with Einstein Wes: Yeti Rambler Wes: Ozark Trail 20oz Scott outdoes Wes by 3oz: Bottl Shameless Plugs Level Up Tuts - check out scott's new shopping cart! Wes' Courses Stickers are coming!