PLAY PODCASTS
Syntax - Tasty Web Development Treats

Syntax - Tasty Web Development Treats

1,032 episodes — Page 21 of 21

Wes and Scott's Lives - Breakdancing, BBQ, Wives, Work/Life Balance, Problem Solving, YouTube Subscriptions

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 0:00 Goofing Around 1:30 Real show starts 2:12 Scott explains his breakdancing hobby "Breaking" is breakdancing What is flavour? 10:20 Wes talks about being into BBQ World's Longest Yard Sale Wes has a large Big Green Egg and a MiniMax BGE 19:00 Scott talks about how he is into making music Domestic Robot Scott is starting up a new project called "Shift. Super." 21:30 How do you find time for these hobbies? Avoiding burnout Work/Life Balance Buy in from significant others 28:00 Wes talks about working out and going on date nights with his wife Hamilton is cool Home Renos 35:00 Doing a downtown job Problem Solving 40:00 Scott talks about his love for KungFu Movies 5 Fingers of death 5 Deadly Venoms secret service of the imperial court Boxer from shantung 36th Chamber of Shaolin Human Lanterns 46:00 What kind of cars do we drive? 55:00 What YouTube channels do you watch? Wes: Jeannies Garage It's Alive with Brad Wranglestar Mattias Wandel Main Woodgears Mattias Wandel Secondary Channel Big Clive How it's Made Alex French Guy Cooking Scott: RedLetterMedia stance theneedledrop BroScienceLife 1:05:00 What are you working on Personally / Mentally? Habit Tracker Doing a downtown job Quuuuuiiiiiick SIIIIIIICK PICKS Dan Carlin's Hardcore History: Addendum Scott: Whatever You Think, Think the Opposite Wes: Tracy Osbourne's Hello Web Design 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

Feb 7, 20181h 15m

Snack Pack — CSS Frameworks, React HOC, Render Props, Coding Designers, Early Career Advice and a sound board!

Dev Lifts - Sponsor Dev Lifts - Thad and JC are on a mission to make web developers healthy. Get a Personal Training and Nutrition Plan — use the code SYNTAX for $75 off. They have also just announced their slack-only memberships for $5/month 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 01:10 you should try out the new Syntax Soundboard by Andre Madarang Have a Question?! Submit it here! 03:00 Skateboarding on a TRAMPOLINE?! 04:30 Q: What are your favourite features coming to HTML 5.2 Dialog Box Multiple Main Tags Thanks Jordan! 10:00 Q: How do you retain all the info you learn like a sponge? Thanks Ozan 13:30 What are your favourite CSS Libraries / Frameworks? Thanks Blake! 21:00 What were some of the struggles you had early on in your career? How did you overcome them? Learning how to read error logs and messages Dealing with Impatience Coding is very frustrating 26:50 What are High Order Components and Render Props? High Order Components React Render Props Video: Michael Jackson - Never Write Another HoC React Downshift React Reconciliation 34:45 Q: When should you just drop the towel on code? When should you throw in the towel on code? Scrapping a codebase and moving from PHP to JS Let's talk about if it's worth it 41:00 Q: What is the best way for a JS beginner to get their hands dirty? Don't work on apps, work on pieces! 47:50 How do you recommend a designer falling in love with frontend dev sharpen their skills while being (happily) committed to a full time design position? Should designers code? SIIIIIIICK PICKS Scott: It’s Not How Good You Are, It’s How Good You Want to Be Scott: Whatever You Think, Think the Opposite Wes: Tony Robins Podcast Wes: The Kevin Rose Show Shameless Plugs Scott: New React Native Course! Wes: CSS Grid Course 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

Jan 31, 20181h 3m

Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!

Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi. With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too. Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality. Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster. Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax Show Notes Take a drink every time Wes says exactly 01:10 CSS Grid course is out! 03:50 The most basic hosting / services WordPress.org, Medium, Wix, Squarespace 05:00 Your Cheap PHP/Apache Hosts Endurance International Group owns most of the cheap web hosting world cPanel Bluehost doing shady stuff Siteground seems p good 13:20 Service Based Hosting Heroku Zeit's Now Galaxy 15:00 What does "spinning down" mean? Deploying to these services 17:20 How these services do instant cut-overs to new servers SSL Certificates 20:00 You should listen to the Our Stacks Explained episode. Zeit's Now Alias mLab MongoDB Hosting Compose MongoDB Hosting 29:00 Raw Server Space Linode Digital Ocean Rackspace Digital Ocean Droplets Digital Ocean's docs are 👌👌👌👌 32:00 What is Nginx?! Let's Encrypt Mozilla's SSL config generator Caddy Server 38:20 Docker 40:00 SPA Apps - React, Angular, Vue... How to handle Routing Netlify SICK PICKS Wes: Magnetic Magsafe-life USB cable for micro USB, USB-c and Lightning Wes: Magsafe-like USB that can handle a 87w Macbook Pro Wow: MONGOOSE VS SNAKE VIDEO Scott: Bulk Supplements Shameless Plugs Scott: Levelup Tutorials Pro Wes: CSS Grid Course 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

Jan 24, 201852 min

Async + Await

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

Jan 17, 201854 min

GraphQL? Here is what you need to know!

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

Jan 10, 20181h 6m

All About Redux && Cookies vs JWT

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

Jan 3, 201826 min

Dealing With Email Overload && Prettier Setups

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

Dec 27, 201730 min

All About CSS BEM!

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

Dec 21, 201723 min

Web Development in 2017 && a look ahead at 2018 🍾🍷

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

Dec 13, 20171h 8m

Failure

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

Dec 6, 20171h 8m

What's New in CSS? Variables, Scoping, New Selectors and Color Functions

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

Nov 29, 201758 min

Fitness, Nutrition, and Losing Weight 💪🏻

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

Nov 22, 20171h 10m

How to get into Speaking At Conferences

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

Nov 15, 20171h 7m

All About CSS Grid

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

Nov 8, 20171h 4m

22 Buzz Words Explained — Mutations, Pure Functions , Serverless, Hoisting, MVC + More

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

Nov 1, 20171h 4m

Tasty Treats — Rems VS Ems, Remote Work, Making Money, Getting good at Design + more! 🍬

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

Oct 18, 20171h 10m

Advice for New Developers, Imposter Syndrome and Interviewing at Google

Scott and Wes dish out some tasty advice to developers who are new to web development. How do you get better? How do you deal with imposter syndrome? Sponsor Freshbooks - Get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Shameless Plugs Wes just updated his ES6 course! Mastering Figma is now Launched! Show Notes This show is light on links :) The Gap by Ira Glass Hackathon Stater Sick Picks Nintendo Switch Creative Market Fonts Tweet us your tips! Wes Bos Scott Tolinski Make sure to include @SyntaxFM

Oct 11, 20171h 11m

Our Stacks Explained 🖥️ 💪

Scott and Wes detail their current stacks that run their training platforms. From front end code linting to the server side and databases. Sponsor Intro to The Serverless Framework by Loren Stewart. The first 20 people to use the code SYNTAX_FREE will get the course for free! After that make sure to use the code SYNTAX for an extra $10 off. Show Notes Wes' Stack Youtube Video Meteor Node.js Level Up Tutorials is fast! Express Learn Node Passport JS MongoDB Mongoose mLab Hosting Mongohub MongoDB Compass Studio 3T MiniMongo React Styled Components Stylus Lang Metor Sessions Prerender.io React Apollo Cross Storage Victory Charts Cloudinary Tim Thumb Amazon S3 Amazon Cloudfront Backblaze Vimeo Pro Jest Mocha Fixer.io Curreny Conversion API Brain Tree Stripe Mandrill Drip Amazon SES PostMark App (THE BEST) Zurb Inky Juice CSS Inliner Meteor Hosting Meteor Hosting Digital Ocean Zeit Now Heroku Bluehost Sucks Let's Encrypt Cloudflare OOPS I SAID CLOUDFRONT Sick Picks Scott: Focusrite Scarlett 2i2 Wes: Better Bidding Tweet us your tips! Wes Bos Scott Tolinski Make sure to include @SyntaxFM Shameless Plugs Level Up Tuts - check out scott's new shopping cart! Wes just updated his ES6 course!

Oct 4, 20171h 19m

The Command Line for Web Developers

This episode is all about how to become comfortable and proficient with the command line. This one includes windows users too! Sponsor Need to learn Docker? Check out Nick Janetakis' Dive into Docker course which is currently on sale! Show Notes React 16 Command Line Power User Course iTerm2 Hyper Awesome Hyper Cmder for Windows Windows Subsystem Linux Windows 10 Insiders Program ZSH Oh My ZSH - You'll want to start here, not on zsh.org Fish Shell Oh My Fish Fisherman Bass ZSH Autosuggestion ZSH Syntax Highlighting z Frecent (GET THIS) Tree Brew Brew Cask Trash CLI YouTube-DL Wes' Video on youtube-dl pbcopy ZSH Extract .. or ... or .... or ..... or ...... !! re-runs the last command (careful!) cd - back to last folder - this works with lots of commands like git checkout - ⌘ + K to clear. ⌘ + R to clear but maintain scrollback Cobalt2 for ZSH + iTerm2 Cobalt2 for Hyper Patched Powerline Fonts Slavic Cat Wild Cherry Sick Picks Scott: Source Making Wes: My Fitness Pal Tweet us your tips! Wes Bos Scott Tolinski Make sure to include @SyntaxFM Shameless Plugs Level Up Tuts - check out scott's new shopping cart! Wes just updated his ES6 course! Stickers are coming!

Sep 27, 20171h 8m

Why is everyone switching to VS Code?

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!

Sep 20, 20171h 8m

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

Sep 13, 20171h 0m

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

Sep 6, 20171h 5m

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

Aug 30, 201759 min

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

Aug 23, 201756 min

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

Aug 16, 201756 min

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

Aug 9, 20171h 3m

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

Aug 2, 201758 min

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

Jul 26, 201749 min

CSS Preprocessors and Structuring CSS - 003

Show Notes WesBos Website Level Up Tutorials GraphQL Dinosaur JS Conference Angular Pug / Jade EJS BEM Methodology Stylus Rupture Less Sass PostCSS PostCSS Autoprefixer RuckSack cssnext LostGrid Bootstrap Haml Babel Flickity Plugin webpack Compass React Sick Picks Bartender 2 Lets you organize your menu bar apps, by hiding them, rearranging them, or moving them to the Bartender Bar. Vanilla Hide menu bar icons on your Mac. Power Blocks One set of Power Block replaces racks of dumbbells 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. The Sketch Course & UX Prototyping with Principle Combo Limited Sale Price: $39.99 $49.99 Learn the new industry standard for web design. Become an expert in the app that is changing how designers work in the modern web and app design world. Animate Your Ideas, Design Better Apps Principle makes it easy to design animated and interactive user interfaces. Whether you're designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing. Twitter Wes Bos Scott Tolinski

Jul 19, 20171h 3m

Webcam and audio access with WebRTC and getUserMedia() - 002

Show Notes WebRTC Apple WebRTC Support GetUserMedia Slack WebTorrent https://github.com/webtorrent/webtorrent Soctt WebRtc Mirror - TBC MediaRecorder Electron Kap Wes Security Cam Scott Colorbars YouTube - TBC Wes Face Detection Fluent Conf Sick Picks Peak Design Everyday Backpack Everyday Backpack Video Quik by GoPro Splice 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. Level Up Tutorials Over 860 free video tutorials for beginners, intermediate and expert web professionals. Level Up your skills with clear, high production, free video tutorials. Twitter @Syntax @wesbos @stolinski

Jul 12, 201740 min

React Tools - 001

Show Notes Wes Bos' Site Level Up Tutorials site Level Up Tutorials YouTube channel Scott Tolinski personal site Cloudflare Next.js Hacker News Example in Next.js GraphQL Graphcool create-react-app React dev-tools Redux dev-tools Preact.js React Storybook Meteor Blaze Sick Picks Wes: Parcel App Scott: Fish shell Shameless Plugs Learn Node React Native for everyone

Jul 5, 201750 min

Syntax 000 - PREVIEW

Subscribe to this podcast in your player of choice! Links available over at https://Syntax.fm

Jun 27, 20172 min