891: Light and Dark Mode

It’s another potluck episode in which Wes and Scott answer your questions! This month - working with designers, criticisms of WordPress, avoiding burnout, time management, and more. Sentry - Sponsor If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”. .tech Domains - Sponsor Finding a great domain name is tough with so many names already taken. If you’re looking for a domain name for your startup, side project, or anything at all, check out .tech Domains. Syntax listeners can get 90% off both one-year and five-year registration by visiting go.tech/syntax and using the coupon code “syntax”. Show Notes 5:05 - How can you help a designer understand how styling works and how layouts work in the web? In other words: How do I explain my boundaries as a front-end developer to a designer? Work closely with the designer Allow the designer to push your limits You can help them understand by: Showing them poor performing websites Showing them things that usually are taxing on the GPU to paint - rotations, background images, drop shadows, etc. Don’t be afraid to let a tough design push your boundaries 13:23 - How do you manage your time for learning new things when you have children and a daily full-time job? Those who figure out how to make it a priority will win out Family first - talk to your spouse Ask your boss for time to learn and grow Find ways to get paid for learning 19:45 - How do you deal with burnout in this constantly evolving front end tech ecosystem? Make time for hobbies away from the computer Do projects just for fun Solve your own problems Syntax 035: Keeping Up with the Codeashians Syntax 041: Preventing and Dealing with Burnout in Web Development 25:00 - Do you code at night (past 9pm)? Start your wind-down time earlier Let your brain wok on problems while you sleep Get it out of your head Listen to podcasts, audiobooks, etc. 29:23 - How do you compress your videos/audio for your courses/tutorials? Handbrake Fast 1080 Use presets Output from video editor, rip from YouTube, or compress directly from video editor 33:10 - It seems like in the web dev community, a lot of people give WordPress crap. Any idea why? WordPress is dope - people just like to complain. WordPress is often one of the first things people learn and have bad memories of it It’s easy to write bad code with WordPress It can be slow It can attract a certain type of developer 33:10 - What are some of the biggest mistakes that people make when they are learning programming and what’s the best way to overcome them? Don’t focus on too many things Don’t worry about picking the right technology Focus on the fundamentals Let your curiosity and excitement drive you Celebrate wins 40:29 - What are your best tips for writing documentation? Start with basic API documentation, them move to more “article style” docs Use tools like CodeSandbox and Swagger Syntax 073: Reading Documentation 43:08 - What are some good questions or techniques to better understand a client’s requirements? How does your business work right now? What are people coming to the website for? Questionnaires are good - they get people thinking It’s your job to understand what a client want out of a website - what problems they have and need solved 45:38 - Do you guys have any tips for taking over maintenance and development of existing websites where the previous developer is no longer reachable? Take time to asses the codebase before writing anything Learn what’s there any and why Don’t start ripping out code without understanding what’s really going on Don’t leave it worse than you found it It depends on the stack, but it’s probably worth giving it an honest go before re-writing the whole thing ××× SIIIIICK ××× PIIIICKS ××× Scott 1: Drillbrush Bathroom Surfaces Tub, Shower, Tile and Grout All Purpose Power Scrubber Cleaning Kit Scott 2: iOttie Wes 1: Sabrent Wireless Charger Wes 2: CD Player Mount Shameless Plugs Scott’s Level Up Pro Subscription Wes’ Advanced React 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

24 Loka 201859min

In this Hasty Treat, Scott and Wes continue a three-part series about old browsers, fallbacks and polyfills. In part two, they talk specifically about CSS Grid, Flexbox, new features and fallbacks, and how to use them. VueSchool.io — Sponsor Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5. Show Notes 3:08 - CSS Grid and Flexbox Flexbox old spec Flexbox new spec CSS Grid Some popular options for supporting for supporting CSS Grid and/or Flexbox: Just serve the mobile layout Display block Separate layout that you will eventually delete Can I Use Do websites need to look exactly the same in every browser? Modernizr CSS3, Please! Autoprefixer 12:38 - CSS Variables Double define Just like Grid, unknown def will be ignored and fallback to CSS CSS Houdini 17:00 - Fallback Code @supports Display block then display grid Feature Testing Detect the browser as a last resort 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

22 Loka 201822min

In this episode Wes and Scott discuss fitness for developers. As a follow-up to Episode 20, they talk about the status of their fitness goals from that episode, what’s worked, what hasn’t, and how you can be more fit yourself in 2018. DevLifts — Sponsor DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering two options: The first is Fit.Start - perfect for beginners or those looking to get back at it. Use the coupon code “syntax” to get 50% off the fit.start plan. The second is DevLifts Premium - for those looking for a laser-focused approach and maximum accountability. Use the coupon code “tasty” to get 50% off the premium plan. Check it out today! Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 3:30 Why is fitness important as a developer? 6:08 Working Out Update: Wes 14:37 Working Out Update: Scott 25:06 Nutrition Update: Wes 35:12 Nutrition Update: Scott 45:40 Supplement Update: Wes 48:00 Supplement Update: Scott 52:18 Plans for the future: Wes 54:53 Plans for the future: Scott ××× SIIIIICK ××× PIIIICKS ××× Scott: Fitness Blender Wes: Dr. Peter Attia - The Drive Podcast Shameless Plugs Scott’s Level Up Pro Wes’ Advanced React 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

17 Loka 20181h 2min

In this Hasty Treat, Scott and Wes kickoff a three-part series about old browsers, fallbacks and polyfills. In part one, Scott and Wes talk specifically about old browsers, how best to support them, and whether or not you should support them at all. VueSchool.io — Sponsor Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5. Show Notes 5:10 - How do you decide if you should support an older browser? Google Analytics Data User base / Money earned from that audience IS it worth it? Time vs Money? 11:35 - How do you test your websites and app in older browsers? Actual hardware - there’s no substitution for the real thing Browser Stack Virtual Box Modern.ie Can I Use 18:24 - Supporting and Testing Mobile Browsers Resize your browser Build a device lab Remote Debugging Browser device view Faking Geolocation Emulators in XCode / Android dev tools Browsersync Ghostlab 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

15 Loka 201828min

In this episode Wes and Scott continue the discussion of their favorite top 18 new things in Javascript. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Graph CMS - Sponsor GraphCMS is trying to be the world’s most developer friendly CMS. It’s a great way to build a GraphQL API without having to write a custom GraphQL server. Try out the API-first CMS of the future today at graphcms.com/syntaxfm. Show Notes 3:30 Spread 8:40 Rests 11:54 Arrow Functions 15:48 Default Function Arguments 19:47 Named params 21:26 Modules 35:35 Classes 41:54 Things we never use Links Jake’s Minesweeper ××× SIIIIICK ××× PIIIICKS ××× Scott: Trader Joe’s Everything by the Bagel Sesame Seasoning Blend Wes: Trader Joe’s Green Dragon Hot Sauce Shameless Plugs Scott’s Better Javascript Course Wes’ ES6 For Everyone 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 Loka 201853min

In this Hasty Treat, Scott and Wes talk about this year’s Hacktoberfest - a great way to support open source. NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax. Show Notes 2:42 Hacktoberfest - The rules 7:35 Things to PR 12:56 Things not to PR 18:05 How Pull Requests work 21:45 Some of our repos Wes’ ES6 course blog posts Syntax Show Notes KeyCode.info CSSCursor.info 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

8 Loka 201825min

In this episode Wes and Scott discuss their favorite top 18 new things in Javascript. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com. Show Notes 6:02 Const / Let 10:00 Template literals / Template strings Toggle Quotes Extension Prettier 14:29 Object destructuring 21:28 Array destructuring 27:25 Function Param destructuring 30:14 Promises Wes’ Async + Await Talk 36:24 Async + Await Syntax Ep 028 - Async + Await 40:59 Object Computed Property Name 43:42 Object Method Syntax Links Denver Startup Week ××× SIIIIICK ××× PIIIICKS ××× Scott: Red Bull VC One World Final 2018 Wes: Jura Impressa Shameless Plugs Scott’s Better Javascript Course Wes 1: CSS Grid in 45 Minutes Wes 2: Async + Await Talk 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 Loka 201851min

In this Hasty Treat, Scott and Wes are back for a second edition of Stumped! where they try to stump each other with interview questions from 30 Seconds of Interviews. NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax. Show Notes 5:05 What are defer and async attributes on a script tag? 7:15 What are the differences between var, let, const and no keyword statements? 8:45 What is a callback? Can you show an example using one? 9:52 What is recursion and when is it useful? 12:06 What is the difference between the array methods map() and forEach()? Syntax Ep 023 14:02 What is Big O Notation? 15:28 What does 0.1 + 0.2 === 0.3 evaluate to? wtfjs 17:44 What is CSS BEM? 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

1 Loka 201822min