Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes continue their discussion of libraries and tech that where super hot in the past, but not so much any more. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 3:40 - jQuery UI / jQuery Mobile jQuery UI jQuery Mobile Sencha Touch 6:10 - Flash / Silverlight Flash Cufon Silverlight Netflix Happy Gilmore The Wedding Singer 10:54 - Grid systems 960.gs Golden Susy Bootstrap Foundation 16:02 - CoffeScript CoffeScript Compass 18:18 - Underescore.js Underscore.js Lodash jsPerf 20:04 - Less CSS Less CSS Vue.js Drupal Cappuccino 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

It’s another potluck episode in which Wes and Scott answer your questions! This month - thoughts on Typescript, e-commerce platforms vs custom, working for agencies, job-hopping and more! 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. Vue.js In Action - Sponsor Vue.js in Action from Manning Publications is a great way to learn Vue.js. If you’re looking for a book that will teach you Vue.js from start to finish, this is the one. As a Syntax listener, you can get 40% off all their books and courses by visiting deals.manning.com/webdev and using the coupon code syntax40 at checkout. Show Notes 1:20 How do you distinguish between normal and virtual pixels on high dpi devices. How do you call Pixels? Which tools do you use for optimizing Images? 5:02 What are your thoughts on TypeScript (and selfishly, I’d like to learn about using it with React)? Any temptation to try it out if you’re not already doing so? Why or why not? Any resources you’d like to share on TypeScript? 8:35 I have heard you guys say good things about Digital Ocean before, but am reading a lot of bad reviews about them on various websites. Are these just frustrated developers or is there any merit to these claims? 12:48 If you were to build an eCommerce store, given that your business requirements specify that custom functionality is needed, would it be smart to roll your own solution or use Magento/Shopify/Woocommerce? If the later, what is the developer experience like? Which has the greater ability to implement custom functionality for server and client side code? 19:50 I feel like I’m pretty “bos” at starting projects but so terrible at finishing them. As people who finish courses and projects all the time, what is your advice for getting to that finish line? 23:32 Could you please explain how you organize your files? What is the folder structure you use for both your projects and other documents/videos and stuff? 31:38 You guys mention working for “agencies” in the past. As a freelance web developer, what’s the best way to find these agencies, and to be employed by them? Also, can you explain what “agencies” are? 38:14 I once read an interview Wes gave in which he mentioned that frequently changing jobs is the best way to get salary increases. Do you both believe that to be true? Is job-hopping a bad thing? Is the criticism of it justified? 41:53 If I choose to use Next.js, does that mean I won’t be able to use new React features like hooks and suspense until/if the Next.js team implements those? 43:12 When do you use and when do you use to wrap your many returned components from render()? Links Devon Govett tweet about Typescript Digital Ocean Magento Shopify WooCommerce Reaction Commerce Snipcart Next.js Gatsby.js True Grit Texture Supply ××× SIIIIICK ××× PIIIICKS ××× Scott: Undertale Wes: Ghostly Pixels Shameless Plugs Scott’s Level Up Pro Wes’ YouTube Channel 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

In this Hasty Treat, Scott and Wes talk about libraries that have been super hot in the past, but not so much any more. Contentful - Sponsor Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out contentful.com/syntax and get a free pair of socks! Show Notes 4:14 Grunt / Gulp 8:56 Backbone / Marionette 13:00 Bower / Components 15:46 Compass Links Grunt Gulp Backbone Marionette Bower Components Compass 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

To celebrate episode 100, Wes and Scott are talking about Syntax - their most popular episodes, stats, Q&A, and a bunch of cool stuff about what it’s been like making this show for 100 episodes. 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”. 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 1:45 - Celebrating 100 episodes 04:18 - Our first episode Syntax001 - React Tools 06:23 - Our first sponsor Delicious Brains 09:37 - Most popular episodes 10 - Syntax074 - 11 Habits of Highly Effective Developers 09 - Syntax039 - Is jQuery Dead? 08 - Syntax046 - What’s New in Javascript 07 - Syntax048 - VS Code Round Two 06 - Syntax050 - Progressive Web Apps 05 - Syntax018 - All About CSS Grid 04 - Syntax051 - Our Workflows: Design, Development, Git, Deployment 03 - Syntax066 - The React Episode 02 - Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer 01 - Syntax044 - How to Learn New Things Quickly 21:35 - Top countries Just passed 3 million downloads 10 - Poland - 38,731 downloads 09 - Brazil - 40,475 downloads 08 - Netherlands - 47,601 downloads 07 - India - 50,724 downloads 06 - Sweden - 55,378 downloads 05 - Australia - 80,654 downloads 04 - Germany - 109,842 downloads 03 - Canada - 138,250 downloads 02 - United Kingdom - 231,835 downloads 01 - United States - 1,220,519 downloads 27:34 - Top players AppleCoreMedia Overcast Chrome Pocket Casts iTunes 30:35 - Lessons learned about sponsors Pays the bills - editing, hosting, etc… Podcast Royale - Podcast production Libsyn - Podcast hosting They want hard numbers Conversions are hard to track It’s really cool companies and users that enjoy the product hook up How do we get them? 35:10 - Favorite episodes Wes - Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer Scott - Syntax044 - How to Learn New Things Quickly 38:49 - Q&A Q: What’s your favorite soundboard sound? Q: What’s your recording process like? Do you each record your streams locally then edit them together or are there any “hax” you guys have cooked up as developers? A: Pay someone who is good at editing We both have good recording gear We record separate files and send them our production team, Podcast Royale, for editing We do show notes in Dropbox Paper, which are also edited by Podcast Royale Q: Does Scott practice his segues, or do they just come to him on the fly? A: On the fly 😎 Q: Although I am all for peace, why did you choose “peace” as your outro statement? A: It was a random note from Wes in the first episode and we stuck with it Q: how did you meet each other and decided to start the podcast? A: We both released a course around the same time with the same name - we started talking and the rest is history Syntax007 - Scott Tolinski Origin Story Syntax008 - Wes Bos Origin Story 51:20 - Most asked questions What episode was it that you ______ ? Can my boss come on the show and talk about bitcoin? Can you sick pick my thing? Can you do an episode on VueJS? Can you do an episode on Angular? NO EP TODAY? 54:20 - Random thoughts Neat to have community - lots of experts Twitter is great Sales of our own products Transformed Level Up Tuts Doing fitness, hobbies, and life as a developer is fun Learned a lot from researching shows and from community feedback Different voices can give different breakthroughs 57:10 - Future of Syntax No. 1 goal is to always be a fun, helpful show Not going to become a promotional tour stop Maybe more interviews Easy to listen to and and understand Links Netlify Podcast Royale Libsyn Dropbox Paper Studio 3T ××× SIIIIICK ××× PIIIICKS ××× Wes: MongoDB Compass Scott: Notion Shameless Plugs Scott - Level Up Pro Wes - All courses 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

In this Hasty Treat, Scott and Wes talk about the costs of running a business when you’re a solopreneur or solo founder. Contentful - Sponsor Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out contentful.com/syntax and get a free pair of socks! Show Notes 3:48 - Email GSuite Missive Drip Postmark Mailchimp Mandrill SendGrid Mailgun 10:44 - Transactional Costs Stripe PayPal Braintree 12:31 - Software Sketch Figma Screenflow iShowU DaVinci Notion Todoist Things Principle For Mac Textexpander Transmit Cyberduck 17:03 - Services PO Box 17:18 - Domains Hover Cloudflare Name.com Gandi 19:30 - Backup NAS Dropbox Backblaze S3 22:12 - Labor Assistant Part-time developer Contractors for projects 24:53 - Insurance Prescriptions Dental Optical Critical illness Home insurance is higher because of business 26:51 - Professional Accountant Lawyer Bookkeeper TransferWise 29:08 - Hosting CDNs Galaxy Heroku Dokku Netlify Compose Vimeo Amazon S3 Digital Ocean Now.sh Bluehost mlab 34:16 - Travel Taxi / Hotel Dinner Transportation Uber Links Codepen Radio - Software We Pay For 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

In this episode Wes and Scott are joined by their first ever guest on the show: Sacha Greif. Sacha is one of the makers of the State of Javascript - the topic for today’s show. Wes, Scott and Sacha discuss the results of 2018’s survey, what they think, and implications for the industry. 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”. 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 1:48 What is the State of JS survey 3:58 The tech behind State of JS 12:55 How was the data collected? 16:38 JavaScript Flavors 23:14 Frameworks 31:49 DataLayer 34:53 Backend 40:09 Other Tools 44:37 Opinions 47:48 Awards 49:58 Criticism Links Nivo Gatsby Netlify Reason Parcel Relay Express KeystoneJS Ghost Jest GraphQL VueX Storybook Real Analysis of Angular, React, and Vue ××× SIIIIICK ××× PIIIICKS ××× Sacha: DIY and woodworking Wes: Alex French Guy Cooking Scott: Silverback Open 2018 Shameless Plugs Sacha - Vulcan.js Scott - Level Up Pro Wes - All courses 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

In this Hasty Treat, Scott and Wes talk about CSS variables, a.k.a CSS Custom Properties - why you might want to use them, why they’re better than various preprocessor’s variables, and pitfalls to watch out for and avoid. Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off. Show Notes 3:25 - What --example-name, represent custom properties called using var() Overwrite with a more specific style Use JavaScript to append .style.setPropert( How are they scoped? Just like normal CSS Can be set on :root {} Can be set on any element down 9:10 - Why Uses: Can make more sense if used semantically var(–accent) vs var(–yellow) Independent values for things that can’t be broken up: box-shadow: 2px 2px 2px 2px red transform: rotate(var(–rotate)) scale(2); Inline properties can be picked up by regular CSS (color, size, etc.) hey Themes that can easily be changed at runtime for entire app 19:15 - Calculations You can use them inside of calc() Animations 20:10 - Bummers Not super well supported just yet (IE 11) No good fallback other than manual fallback Syntax - Old Browsers, Fallbacks and Polyfills series Part 1 Part 2 Part 3 PostCSS Custom Properties 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

In this episode Wes and Scott bring you their holiday gift guide - things, ideas or experiences that would make great gifts for any developer, ranging from a few bucks to a few hundred bucks. Contentful - Sponsor Contentful is a great way to manage your data. Update once and publish everywhere. Contentful gives you a ton of flexibility and reliability and everything you need to build excellent front-end content without having to worry about the back-end of your site. Check out contentful.com/syntaxfm and get a free pair of socks! 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:57 - Foodie Gifts Hot Sauce Merfs Every Cholula Hot Sauce Jalapeno from Trader Joes Blue Top Creamy Buffalo Everything but the bagel Spice Loose leaf Teas from Teahaus.com Wes’ Tea Steeper Scott’s Tea Mug & Steeper Flavored Salts (No link, just go find them) Savory Spice Shop Rainbeers - make it yourself Beer Making Kit Umai Dry Steak Aging and Charcuterie Bags 11:27 - Experiences Knife Skills Class Butchering Class Cooking Class Float tank Subscription Massages 18:15 - Subscriptions Headspace Spotify HBO Go YouTube TV MeUndies Underwear Subscription Memrise LastPass Magazines Mantry Crates Kids Crates 23:07 - Books / Audible BadBlood Beat the bank - for Canadians Only American Kingpin Rich Dad / Poor Dad Kingpin: How One Hacker Took Over the Billion-Dollar Cybercrime Underground Anything You Want Essentialism The E-Myth Revisited 29:47 - Clothes Uniqlo Jeans - w/ elastic Carhart Beanie (TOQUE) Naked and Famous Raw Selvedge Denim Jeans Skinny Guy Weird Guy Nudie Raw Selvedge Denim “thin Finn” “Unbranded” Raw Denim Custom Leather Belt TNF Fanorak Windbreaker Hoodies Adidas Black-on-black NMD crewneck Champion Hoodie Sneakers Nike Airmax 270 Jordans DonTrip RayBans with mirrors Original Wayfarer Sunglasses Under Armour Boxer Jock Underwear Reebok Boxer Brief Underwear dvlpr.io Merch 39:08 - Gadgets Mechanical Keyboards CTRL Keyboard WASD Keyboard Code Keyboard Ergodox 10W qi Wireless Fast Charger Charging Pad USB C Gadgets 8-in-1 USB Type-C Hub with HDMI USB C Hub LaCie Rugged USB-C Hard Drive Koomus Car CD Slot Magnet Mount for your phone Anker Portable Battery Extra Long Braided Phone Cables Lighting Micro USB USB-c Anker USB Power Block 4 ports with Fast Charge 6 ports with Fast Charge Wifi Hotspot SkyRoam Solis Magnet Breakway USB-C Cable that handles 87w Tello Programable drone High end mini screwdrivers MaxCraft 7-in-1 iFixIt 64 bit set 48:00 - Smart Home Google Home Ring Doorbel Nest Doorbell Ring Floodlight Security Camera EcoBee WeMo Plugs TP Link Smart Plug Leviton Smart Wifi Dimmers LIFX Bulbs Sonoff $5 wifi Switch 54:40 - Grooming and Wellness Seki clippers CBD balm A nice comb Burts Bees Lip Balm in a tin 58:57 - High End Apple AirPods Bose QC 35 Wireless Headphones Samsung QLED TV - very high end Shameless Plugs Scott’s Level 1 Typescript Course Wes’ updated course platform 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

In this Hasty Treat, Scott and Wes talk about installing dependencies vs rolling your own - the advantages and disadvantages, and how to know when to do either. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax. Show Notes 2:15 - Reasons To roll your own Learning Experience Fun Features Add your own features Lightweight - only use what you need 8:08 - Reasons not to roll your own Battle Tested Actually Tested Time Money Experience 11:27 - Fork Something needs extra features Upstream your changes 13:10 - Some Examples Fetch + function vs Axios Date functions vs Stack Overflow copy/paste Lodash vs your own - try it with map/reduce/filter first, but lots of cases need Lodash Links React PowerPlug Lodash Axios Stack Overflow 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

It’s another potluck episode in which Wes and Scott answer your questions! This month - raising your rates, full stack designers, JWT, VS Code tips, and more. 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. React in Action - Sponsor React in Action by Mark Thomas from Manning Publications is a great way to learn React. It’s a clearly written, example-rich book, introducing front-end developers to the React framework and related tools. Not everyone likes learning from a video. If that’s you, React In Action is a great book that covers everything you need to know. Also be sure to check out this page for 40% off all manning books and videos. Show Notes 2:29 I listened to your episode on Freelancing and I was wondering how to justify an increase in my hourly rate. You mentioned that you just increased it to $100/hr and nobody griped, but I seem to have a steady stream of clients who want things for free or nearly free and I usually have that fear that if I charge them more, then I won’t get the business. Thoughts? 6:55 I’ve started a YouTube web development channel. Recently, I was approached to produce content for money for another website. For some reason, I immediately thought I might be taken advantage of (I’m pretty new and it’s odd to be offered something like this so quickly, no?) if accepting. What do you think? Should I create content for a (small) website that I never heard of or continue with YouTube (or both)? 14:00 I’ve read on Twitter that React.Context can be a good replacement for Redux. Why? 18:40 What’s it like running a podcast?! 24:03 I’ve seen a rise in the term “full-stack designer”. Is this a title you think will become a real thing? Someone capable of overseeing a project from concept to prototype? Thanks! 27:36 What has been the most awkward situation you’ve been in as a dev? 31:20 Do you have any good resources on JWT? I’m unclear when my front end needs to send what to my back end, to ensure my sites and only my sites can get the data requested from my server. Thanks for everything you do! 35:34 How do you move selected text horizontally (or vertically) in VSCode? I’ve seen it in Wes’ videos and I tried to ask him on Twitter, but I’m sure that is a chore to keep up with. I’ve googled a ton, but the only thing I found was an extension that adjusts indentation, which is not really what I’m after. 38:57 How do you recommend providing feedback on “bad” code to a developer more experienced than you, without coming off as an uppity, know-it-all junior who just read a bunch of textbooks?? 42:39 How do you set up an IP whitelist? I am just getting started managing databases and I am using Mongo Atlas. They require an IP whitelist for all connections. Developing from my computer is fine because I can just add my IP to the whitelist, but what do I do if I actually want to make my API or website public? Just whitelist everything? That sounds like a terrible idea… Links useReducer Full Stack Radio Ep 98: Ryan Chenkie - Securing Single Page Applications ××× SIIIIICK ××× PIIIICKS ××× Scott: Jelle’s Marble Runs Wes 1: Good Quality Baking Sheet Pans Wes 2: Pre-cut Parchment Paper Sheets Shameless Plugs Scott’s Pro Gatsby 2 Course Wes’ Advanced React Course - use the code SYNTAX for $10 off 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

In this Hasty Treat, Scott and Wes talk about how to be well liked at work - dealing with difficult co-workers, being a better co-worker yourself, and general tips for improving your people skills. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax. Show Notes 5:01 - Foster a culture of asking “why” and “how” 7:58 - Show your own mistakes 9:26 - Be understanding of people’s life situations and accommodate them accordingly 11:36 - Be okay with people taking your time 13:10 - Don’t take up other people’s time 15:40 - Be nice 15:57 - Share things 16:50 - Respect personal space 18:08 - Respect people’s time Links Adam Grant - Give and Take: Why Helping Others Drives Our Success 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

In this episode Wes and Scott discuss React Hooks - what they are, why you might want to use them, their differences with regular classes, and more. 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. 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”. Show Notes 2:30 Function components 4:50 What are React hooks? 8:12 What problem does this solve? 12:00 State hooks 21:50 Context hooks 26:02 Effect hooks 36:46 Reducer hooks 40:40 Ref Hooks 48:00 Libraries already using React hooks Rehooks → Listing of hook libraries React Spring React Measure Formik Immer 50:30 Resources Dan Abramov’s Talk Harry Wolf Use Hooks Newsletter Awesome React Hooks ××× SIIIIICK ××× PIIIICKS ××× Scott: Bad Blood Wes 1: Swindled Podcast Wes 2: Scrub Brush Drill Shameless Plugs Scott’s Pro Gatsby 2 Course Wes’ Advanced React Course - use the code SYNTAX for $10 off 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

In this Hasty Treat, Scott and Wes talk about stickers and break down Wes’ entire process for creating and selling his sticker packs. Check out Bos.af for more info. LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax. Show Notes 6:08 Design 9:23 Printing 16:08 Types of Stickers 19:34 Selling 21:43 Envelopes, stamps and shipping 30:47 Returns 32:42 The future Links Bos.af Patrick DePuydt Alibaba Sticker Mule Shipstation 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

This week Scott and Wes are live at JAMstack_conf with games, Spicy JAM Tips, Q&As and more. Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntaxfor more info. Show Notes 7:14 - Spicy JAM Tips Set default headers in your request library - this way it comes along for the ride on every request Don’t get hung up on “static” - static sites can be as dynamic as needed Don’t wait to use new tech - progressively enhance and gracefully degrade where needed There are many JAMStack libraries in the sea - there are many different approaches so don’t be afraid to experiment Side projects are key to learning - test out new tech on smaller projects first and get comfortable with it 10:10 - This, That or Both? Evo RX - High end Carbon Fibre Road Bike or Library for composing asynchronous and event-based operations in JavaScript? Jumpsuit - A rap/rock group from Flint Michigan or a minimal React/Redux Framework? Aphrodite - React Styling Library or Best Selling Erotic novel? Yugo - A minimal static site generator built in O-CAML or a super mini hatchback built in the former Yugoslavia? C-Control - A modern state management library for web components or studio headphone mixer? Yakbak - A recordable HTTP testing interface or a popular 90’s electronic toy? Joose - A hip east coast juice bar or a metaobject system for JavaScript? Easy Rooter - A client side object oriented router written in modern Vanilla JavaScript or a drain cleaning plumbing apparatus popular among local plumbers? Aqueduct - A server-rendered ORM and oAuth 2.0 based framework built in Dart or a early 2000’s pop group hailing from Venice Beach? Gort - A 1980’s animated series cartoon villain or a CLI Toolkit for RobotOps written in Go? Raptorize - A jQuery plugin that plays a Velociraptor screech or A popular DIY spray on truck bed liner? 21:13 - Stumped! Question 1: What does “age” console.log to and why? let age = 26; age /= 2; console.log(age); // ?? Question 2: What are all seven types in JS? Question 3: How do you pronounce “specificity”? Question 4: What is event delegation and when might you want to use it? Question 5: What is CSS @supports for? Question 6: An arrow function takes in an unlimited number of arguments - how would you capture them? Question 7: What is the difference between .slice() and .splice()? Question 8: How would you calculate the number of milliseconds since midnight of January 1, 1970? Question 9: What does “age” console.log to and why? const age = console.log(100) || 200; console.log(age); 31:26 - Overrated or Underrated? Arrow Functions Downtown scooters Using Sass inside Styled Components Website that play sound in the interface The amount of JS frameworks Soft close toilet seats GraphQL ES6 Destructuring Instapots Implicit Return CSS Houdini Service Workers and Offline Applications Modern Design Tools - Figma, FramerX, Moudlez, Sketch, Studio Decorators Optional Chaining Proposal 42:35 - Q+A with Scott and Wes Since this is your first time meeting, what was the thing that surprised you the most? If you could create any Tycoon game, what would you create? In 2018, how concerned should we be about no-JS users? How many spaces should a tab be? How important is integration testing and the decentralized ecosystem? What are your thoughts on the new React Hooks API? Are we going to have a serverless function architecture apocalypse? Are you ever going to create an online course together? How will the future look for component-based design? What’s your least favorite jam? What would be your goto headless CMS? What do you disagree on? 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

In this Hasty Treat, Scott and Wes are back for another edition of Stumped! where they try to stump each other with interview questions. Today’s questions are from Flashcards for Developers. EmailOctopus - Sponsor Email marketing for less, via Amazon SES. EmailOctopus sends your emails through Amazon’s Simple Email Service (SES), saving money without sacrificing deliverability. With simple setup and all the features you would expect, EmailOctopus is as flexible as you need it to be. Get started today at emailoctopus.com/syntax and get your first three months free. Show Notes 4:03 What’s the difference between synchronous and asynchronous code? 5:56 What’s the difference between .call and .apply? 7:08 How do you share code between files? 8:18 What’s the difference between double equals and triple equals? 10:40 What’s the difference between null, undefined, and undeclared? 14:18 What is the event loop? Philip Roberts - What the heck is the event loop anyway? 16:02 Why is extending built-ins never a good idea? 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

In this episode Wes and Scott discuss their pre-launch checklists. They talk about performance, accessibility, compatibility, SEO, analytics, and more - all the things you should check before launching something to the world. 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 1:45 - Overall Let robots do the work for you - use auditing tools Lighthouse SEO Checkers Accessibility checkers like axe 2:58 - Performance Compress those images Build process Cloudinary ImageOptim imgIX Minify Code Splitting Smaller bundles where it makes sense A future where it’s done for us Run page speed tests like Google PageSpeed Insights Don’t service worker on launch Syntax Ep 50 - Progressive Web Apps 11:43 - Compatibility Test on actual browsers that need to be supported Ask people to check on their devices Use a service like Browserstack Browser resolution and ratios Cache busters 16:00 - Sales / Credit Cards Use package.lock Have multiple people test your checkout Make sure your company name is listed on customer’s credit card bills Have a phone number listed for disputes 24:55 - Tips from the Trenches Secure API endpoints Scale up server just in case Early access Soft launch Make sure URLs are correct - no “localhost:3000”, etc. 31:25 - Content Check spelling and grammar A working 404 page Check for leftover placeholder text → launching with lorem ipsum is not good 34:39 - Accessibility Alt text Run color contrast checker Run Lighthouse Correct tab order Use the site with keyboard only and make sure it’s a good experience 37:35 - SEO Sitemap created and uploaded to Google Webmaster Tools SEO checkers Meta tags Correct heading hierarchy 41:55 - Analytics Google analytics Facebook tracking pixel Drip 43:23 - Server config & access .htaccess redirects where needed robots.txt prevent indexing of some pages Enable GZIP Caching Cloudflare or other CDN 46:12 - Company Processes Make sure tests are passing Git issues are closed Merge pull requests Write documentation on processes (readme, etc.) Deploy to staging environment and test production build No unwanted logs or errors left in production build DNS Propagation ××× SIIIIICK ××× PIIIICKS ××× Scott: Swindled Podcast Wes: FIFO Bottles Shameless Plugs Scott’s Level Up Pro Wes’ Advanced React Course - use the code SYNTAX for $10 off 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

In this Hasty Treat, Scott and Wes conclude a three-part series about old browsers, fallbacks and polyfills. In part three, they talk specifically about transpiling and polyfilling. 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 2:20 - Polyfills and Transpile 5:18 - Back in the day Border-radius htc hack PNG fix for transparent PNGs Flash for custom fonts Cufon and SIFR 10:48 - JavaScript Polyfills Features are polyfilled MDN Polyfill Core-js Polyfill.io HTML5 Cross Browser Polyfills 13:47 - JavaScript Transpile Syntax is transpiled babel-preset-env Babel has plugins and presets Meteor bundle to different browsers on demand There are polyfills for most things, but performance can be an issue Resize observer Intersection Observer Some things can’t be done with either New browser APIs Service workers, device access, inline video on old iOS, etc. 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

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

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

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

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

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

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

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

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

It’s another potluck episode in which Wes and Scott answer your questions! This month - all things JS, go-to dev stacks, website security and the ever-changing nature of development. 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. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 3:33 - Would you ever consider doing a live Syntax show? Yes! Get tickets at JAMstack_conf 4:31 - What are your thoughts on Flutter? Does React Native have some solid competition now? Google’s answer to React Native. Flutter NativeScript 9:43 - What are your website security essentials for static and dynamic sites? What’s the deal with forms? Is it bad to put a form on my site with no server-side validation? Not cool. Always do server-side validation. Netlify Cloudflare 14:55 - Do you have a ‘go-to’ stack when building new web apps? If so, what is it and how would you go about choosing the right stack for the project? Scott - Gatsby for sites / Meteor Apollo, React, MongoDB for db needing accounts sites Wes - Next.js, Express Backend + either MongoDB, DiskDB or Prisma (or hasura) 21:51 - What are your thoughts on 100 Days of Code Challenge? Consistency and accountability. The best way to get good. 100 Days of Code 25:05 - I really have been learning a lot of React recently and have been wondering what is the difference between Next.js, Gatsby.js and vanilla React? Dynamic vs static. What are your needs, how often does the content change. Next.js Use for dynamic needs It can do static exports too Convert to markdown Nothing special other than Routing and SSR (Server request getInitialProps) Gatsby.js Use for static needs Gatsby has lots of adapters 30:38 - What are websockets and when should they be used? A request that is always open - it responds to events instead of pinging, pushing or pulling data 35:15 - I would love to hear your take on PWAs. Do either of you have any experience with building or using them? Syntax Ep 50 - Progressive Web Apps 40:16 - I’m a nervous newbie who’s concerned about doing a web app that accepts payments or sensitive information. How can I know I’ve done everything to create a secure website and also protect myself from being sued by the client if their website gets hacked? I’m trying to be a jam stack developer so I’m looking at things like Snipcart and Stripe Don’t save sensitive info in plain text. Use services that make it tough to do that until you are confident. Look up PIPEDIA 43:23 - What is a JavaScript generator? I heard that async/await creates a “generator” under the hood. Pausable function that can return multiple values - call .next() on it 46:54 - Are web components worth it in 2018? Web Components Polymer Svelte 49:52 - How soon the designers replace React Developers with the invent of tools like Framer X? Not soon. Your job is changing and will continually change SouthPark - They Took Our Jobs! 56:52 - Have you, or anyone you know ever thought of quitting the industry because of difficulties you have run into? ××× SIIIIICK ××× PIIIICKS ××× Scott: EGO Lawn Tools Wes: B is for Build YouTube Channel 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

In this Hasty Treat, Scott and Wes talk about positivity in the web industry - how it can affect you, your work, and the people around you. 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 The tech industry is always on the cutting edge and we’re starting to see a shift in how we deal with positivity and negativity. 3:18 - The effects of negativity and how the web industry is improving Mental health awareness is very real Stack overflow sees that it needs to change Linus Torvalds’ apology Negativity is a disease, and it spreads Positivity is a force as well You can be constructive while still being nice Dan Abramov, Addy Osmani, Sarah Drasner are all amazing examples of people pushing the web forward while having a smile on their face 11:50 - Healthy ways to approach disagreements Never assume malice Kill them with kindness Take note of the people you admire and how they deal with aggressiveness 17:08 - The power of positivity Inspire the change you want to see It’s good for your productivity - it makes you feel good 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

In this episode Wes and Scott discuss specialization vs generalization - the different ways one can be a generalist or a specialist, advantages and disadvantages to both, and, ultimately, which is the better career path. 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. Dev Lifts — Sponsor Dev Lifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering Personal Training and Nutrition Plans as well as a new program called Fit.Start. Get 50% off with the coupon code “tasty”. Check it out today! Show Notes 4:18 - What is a specialist? Someone who is very good at one or two things Can be very lucrative if you’ve taken the time to become well-known in you’re industry 12:20 - What is a generalist? Two ways to look at generalists: Someone who tries to do a little bit of everything (e.g. a developer who does Wordpress, Drupal, Django, Rails, etc.) Someone who builds related skills around one area (e.g. a JavaScript developer who can code up a backend and a frontend) There will be more jobs available for the dev with tightly integrated skills in related areas than a true “jack of all trades”. 22:22 - Frontend vs Backend Frontend Frameworks (React, Vue, etc.) CSS Performance Animations Backend Web servers Serverless / AWS Scaling Frameworks Performance Databases Docker CI 26:50 - When to widen your focus When you are complacent with your mastery You need a skill to get something done. For fun For a specific job 30:42 - When to narrow your focus You don’t feel control over your skills You are missing out on employment because a lack of skills in one department You feel overwhelmed by the options available You want to be the "go to person” For fun 35:48 - How to master and expand Focus on one skill at at time. Master it and then expand on your skillset Find satellite skills - things that work in harmony 38:47 - Scott’s journey 42:31 - Wes’ journey 44:55 - How to know where to focus Necessity will dictate a lot - what do you need right now? Job postings - you can stack the deck in your favor by learning React. Once you are in, you’re can lean anything you want. Follow your heart - but have a plan 51:03 - Should I be a generalist or a specialist? Wes: There is nothing wrong with having a large skillset as long as you aren’t mediocre at everything. If you’re optimizing for hire-ability I think having a defined focus on either front-end or back-end is best, but still an understanding of how the other works. Ideally you have 1) Very good JS skills, 2) an understanding of how things work on both ends. Scott: You can do either, but whatever you do, do it well. It’s easier to do a few things well than many things well. That said there are some virtuosic devs out there who can be amazing at many things, however those people are not common. Most people have holes in their armor. Links JAMstack_conf ××× SIIIIICK ××× PIIIICKS ××× Scott: Great British Baking Show Wes: 1 Pointless Packaging Instagram / 2 Ozark Season 2 Shameless Plugs Scott’s React Testing for Beginners Course 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

In this Hasty Treat, Scott and Wes talk about feedback and criticism in the web industry. 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”. Show Notes 4:00 - Getting Feedback Don’t assume malice - tone is easily lost in digital communication Don’t take it personally Evaluate the feedback through the eyes of who it’s coming from Look for the truth in the feedback Be open to feedback 15:15 - Giving Feedback Don’t be negative - phrase your feedback in positives Don’t give unrequested feedback Explain the why behind your feedback Don’t be rude or an asshole Use Tools and Standards for Code Quality Give an opportunity to improve Explain the “why” behind the feedback Sandwich criticism with something positive When things are heated, try to diffuse the situation Give frequent positive feedback Links Tweet from Dan Blundell Tweet from Dan vs Code Manager Tools’ Feedback Model Elon Musk on The Joe Rogan Experience 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

In this episode Wes and Scott discuss 11 habits that will make you a better developer - everything from understanding the business goals behind your projects to maintaining work-life balance, staying curious, and developing empathy. 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. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 2:55 - You understand stakeholder and business goals What is the website (or project) ultimately trying to accomplish? How does the business make money? Don’t get caught up in your own “mama drama” about frameworks, but instead focus on how a particular framework will help achieve the end goal of the business 5:13 - You’re curious and always learning This industry is ever-changing and isn’t slowing down 7:36 - You have an open mind about new technology Don’t “poopoo” something because it’s intimidating, new, scary or different Like foods you’ve never tried, sometimes something unusual turns out to be game changing 9:57 - You ask for help #LifeHack - most people know more than you Be comfortable with NOT knowing Be comfortable with failing and with how others might perceive that Check your ego at the door 15:35 - You help others Helping others solidifies your own knowledge Answering questions Stack Overflow Quora Blogging YouTube videos Mentoring co-workers Not offering unwanted advice 19:12 - You have a “problem solver” mentality General curiosity - figuring out why things aren’t working Break things down into testable components to pinpoint an issue Have a clear head under pressure (e.g. interviews) 24:37 - You have fun with what you do Enjoying challenges Even if something isn’t particularly fun, you find ways to make it fun and interesting 27:54 - You understand work-life balance Burnout is huge in our industry It can be difficult when you love what you do, but it’s so important to maintain balance 34:00 - You are empathetic to your co-workers and users Be a team players while getting things done Make everyone around you better at what they do Be someone others want to work with by being inclusive and professional Don’t make inappropriate jokes, put co-workers in a tough position, etc. 37:08 - You pay attention to detail Think about edge cases 39:03 - You’re part of the community Local meetups / lunch and learn Twitter #100daysofcode Conferences ××× SIIIIICK ××× PIIIICKS ××× Scott: Overcooked! 2 Wes: Book - Rich Dad Poor Dad Shameless Plugs Scott’s React Testing for Beginners Course Wes’ Advanced React Graph QL 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

In this Hasty Treat, Scott and Wes dive into documentation - how to avoid common pitfalls and overwhelm, as well as how to read, understand and get the most out of documentation. 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”. Show Notes 5:10 - What are the different kinds of documentation? Tutorials Docs API references Video docs Examples of good documentation Stripe Next.js Examples New PayPal Docs Gatsby Jest Meteor 14:34 - How to read documentation Understanding how you learn will save you lots of time 16:03 - Understanding Parameters Parameter types Required / Optional Parameter order 22:45 - How do you tackle learning something new? Look at some examples Scan the entire docs to get an idea of the surface area Have something specific in mind that you want to build 27:34 - What to do when the docs suck? Look at other people’s code Chat rooms Tests for examples Read the source code Github search Contribute 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

In this episode Wes and Scott dive into the very big topic of accessibility, from the basics and easy wins to best practices, tools, resources and more! Cloudinary - Sponsor Cloudinary is a heavy duty media hosting stack for your websites and applications. Also, check out Making Media Accessible: How to Automatically Generate alt Text for Images. In the first part of the series, Cloudinary will demonstrate how you can integrate machine learning tools into your image management pipeline to automatically generate alt text for your assets. Deque - Sponsor Deque is the amazing company behind the aXe accessibility testing tool that over 200,000 people use to ensure their websites are accessible. For users looking to scale accessibility, export issues and collaborate with colleagues, Deque offers an enterprise toolset called Attest. Attest also allows you to select accessibility custom rules, offers a more robust API and more integrations AND can test the accessibility of your iOS and Android applications. Show Notes 6:00 - Basics What is accessibility? Amy Carney Tweet Tim Berners Lee Quote a11y What types of disabilities are there? Temporary, situational, and permanent Tweet thread with lots of info 15:03 - How do you write accessible code (easy wins)? Clean HTML Semantic elements Use the alt attribute on images HTML5 (article, section, header, footer, aside) Proper inputs types - number, text, CSS order property on Flexbox and Grid Colors and proper contrast Use links and buttons properly Use ARIA roles to define elements when semantic HTML falls flat (popups, non-standard controls, etc.) Introduction to ARIA Using ARIA: Roles, States, and Properties Keyboard only navigation Tabindex Skip to content “Skip Navigation” Links a11y ESLint rules Video captions for ESL Transcripts for Podcasts 44:48 - Tools aXe Lighthouse - Audits tab in Chrome dev tools Inclusive Design Posters HTML Code Sniffer Pa11y runs code sniffer from the CLI Accessibility features in OS Screen Readers MacOS VoiceOver NVAccess Chrome Vox 54:35 - Resources The A11Y Project Bulb Accessibility Audit from Heydon Deque Youtube Channel 62:22 - Important Ideas Use your website with accessibility tools turned on Sit with someone using a screen reader Amy Carney’s Tweet Mike Behnke Tweet moose of letters’ Tweet Links Syntax033: Large Files - CDNs, Image Compression, Video Hosting, and Big Zips ××× SIIIIICK ××× PIIIICKS ××× Scott: SpeedCurve Wes: Netflix - Magic for Humans Shameless Plugs Scott’s React Testing Course Wes’ Courses 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

In this Hasty Treat, Scott and Wes try to stump each other with interview questions from 30 Seconds of Interviews. 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”. Show Notes 4:33 What is the difference between the postfix (i++) and prefix (++i) increment operators? 7:15 What’s the difference between a static method and an instance method? 9:25 What is a focus ring? What is the correct solution to handle them? 11:20 How does hoisting work in JavaScript? Syntax 017 - 22 Buzz Words Explained — Mutations, Pure Functions , Serverless, Hoisting, MVC + More 12:47 What are the advantages of using CSS preprocessors? 14:29 What is memoization? 15:48 Describe the different ways to create an object. When should certain ways be preferred over others? 19:15 What is event delegation and why is it useful? Can you show an example of how to use it? 22:06 How do you compare two objects in JavaScript? 26:00 Can you describe how CSS specificity works? 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

It’s another potluck episode in which Wes and Scott answer your questions! This month - programming languages, how to practice soft skills, PHP vs JS, is it every too late to become a developer, and more. 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 5:00 Why don’t you work with Typescript? 10:52 How do you recommend working with APIs/libraries that compete with the DOM (e.g. d3 + react, react + google maps)? 13:40 What is meant by the word “state” when referring to Vue or React? 16:32 How do you practice and get better at “soft skills” (e.g. burnout, freelancing, time management, confrontation)? Syntax 025 - Dealing with email overload PaperKarma - The App to Stop Junk Mail 28:23 Do you guys use different environments (e.g. “QA” and “Prod”)? What are some best practices? Semaphore - Test and deploy your code Sentry - Open-source error tracking 32:43 As someone trying to break into the field of programming, should you build everything from scratch, or it ok to use plugins and libraries? 38:52 What would WordPress be like if it were built on Node and GraphQL? Ghost 46:54 I’m learning JavaScript at 34… Do you think I can learn to breakdance at 34 too? 51:16 How do you handle high level page layout when using styled components? 53:13 As a junior dev, should I switch from PHP and Laravel to full stack JS? I love PHP, but JS is taking over. Links react-async-script-loader Netflix Explained ××× SIIIIICK ××× PIIIICKS ××× Scott: Alfred Emoj Wes: Motherboard YouTube Channel Shameless Plugs Scott’s React Testing Course Wes’ Courses 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

In this Hasty Treat, Scott and Wes talk about prototyping and design tools in the development space, specifically Framer X - what it is, what it isn’t, and some cool stuff coming down the pipeline. 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”. Show Notes 3:35 Framer X - What it is and what it isn’t 13:20 What it means for other prototyping and design tools 17:00 Future of prototyping and design and development 21:40 Final thoughts Links Scott’s Framer X Fist Look Video Sign up for Framer X Beta 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

In this episode Wes and Scott dive into designing for developers - tips and tricks for improving your designs, and how to up your game in small ways that will have a big impact on your projects. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. 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:18 - General Design Tips Spacing is important Using patterns and textures Subtle Patterns Hero Patterns Heroicons FlatIcon True Grit Texture Supply Steve Schoger Use subtle gradients ColorSpace Use subtle drop shadows Multiple shadows on one element can have a nice effect Don’t use true black and white (e.g. #000 or #fff) - use softer variation of black and white Use CSS Variables for custom blacks and whites CSS default colors are almost always too harsh Default browser UI is almost never the best UI Select elements, radio buttons, checkboxes, etc. can all be styled - it’s no fun, but way better than it’s ever been 40:22 - UX Design & Animation Don’t use animations when not necessary Subtle scale/transitions on hover can be a nice effect Particles.js Patagonia’s Bears Ears CSS transitions vs Physics based 51:30 - How To Get Better Follow UI-themed Instagram accounts siteInspire Dribbble UISources Follow Steve Schoger Find a free mockup and build it out pixel for pixel Take time to challenge what you think is possible or doable technically and creatively ××× SIIIIICK ××× PIIIICKS ××× Scott: Louis Cole Wes: r/posthardcore Spotify Playlist Shameless Plugs Scott’s React Testing Course Wes’ Courses 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

In this Hasty Treat, Scott and Wes talk goal setting - why it’s important, when to do it, how to stick to them, and more. Tweet us your goals with the hashtag #syntaxgoals. 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”. Show Notes 4:14 Setting SMART goals (Specific, Measurable, Attainable, Relevant, Time) 7:45 What kinds of thing should you set goals for? 10:49 Business goals 16:50 Visualizing Goals 22:58 When should you set goals? 27:42 Accountability Links ProfitWell Forever Jobless Goals Worksheet 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

In this episode Wes and Scott do a deep dive into React - what it is, best practices and all the ins and outs of how the framework works. Dev Lifts — Sponsor DevLifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering Personal Training and Nutrition Plans as well as a new program called fit.start(). Get 50% off fit.start() with the coupon code “SYNTAX”. Additionally, the first 10 people to use the code "TASTY" get 50% off your DevLifts Premium subscription. Check it out today! 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 5:23 Components 12:30 JSX 25:13 Data and Props 44:48 Fetching 49:22 Event Handlers 54:00 Instance classes + properties 55:02 Lifecycle Methods 59:55 Context 1:01:35 Routing Links Preact Inferno How to Comment in JSX (article) Apollo Redux LevelUpTutorials.com Level II React Course React Informed (forms) Meteor Axios Firebase Gatsby Here’s how React’s new Context API works ××× SIIIIICK ××× PIIIICKS ××× Scott: Dark Net Diaries Podcast Wes: Any suggestions for key management products? + Iliza Shlesigner Stand-Up Shameless Plugs Scott’s Level Up Tuts Pro Wes’ Courses 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

In this Hasty Treat, Scott and Wes discuss how they create courses, design and build curriculum, as well as insights and best practices for content creation. 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”. Show Notes 4:32 - Wes’ process Figure out what to make Build the thing you’re teaching in the course Have it reviewed by experts Simplify and create a linear flow for what you’re teaching 16:25 - Scott’s process Chose a topic Build the thing Create the outline as you go Have goals in mind, for individual topics Record with final code open 28:25 - How to get started 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

Scott and Wes talk office setups and all things gear. Gotta get the gear! 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 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 11:00 Wes’ gear Scott’ gear Scott’s podcasting/screencasting gear 13:30 - Computer Wes: Macbook Pro 15" Scott: Macbook Pro 15" 17:39 - Monitors Wes: [22" vertical Cheap Acer: https://amzn.to/2vkXomG [27" Dell 4k - https://amzn.to/2Mo3NnO [Ergotron Monitor Arms - https://amzn.to/2voS9CF Scott: LG 34UC88-B 34-Inch 21:9 Curved UltraWide VIVO Dual stand 28:33 - Keyboards and Mice Twitter Thread about mice Wes: Apple Magic Keyboard Magic Mouse Logitech MX Master 2S Scott: CODE Keyboard Apple Magic Trackpad 33:14 - Desks Wes: Ikea Countertop Ikea Alex Drawers Scott: Ikea Karlby Walnut Countertop + Jarvis Legs === dope desk! 37:53 - Chairs Wes: Herman Miller Aeron Polished Aluminum Scott: Herman Miller Aeron 39:24 - Headphones Wes: Bose QC35s Apple AirPods Scott: AKG K 553 Pro M-Audio Bx8 monitors Polk Audio 12” Subwoofer for that booom booom! 43:50 - Hard Drives / Backup Systems Wes: WD My Passport 1TB Backblaze Backup Scott: WDMyCloud EX4100 47:28 - Charging Stations Wes: Anker USB Wall Charger 48:52 - USB Splitters Wes: CalDigit TS3 Plus Amazon Basics USB 3 Hub Scott: CalDigit TS3 Plus 50:35 - Wifi Wes: Amplifi HD Mesh Scott: Google Wifi Mesh 54:26 - Recording Gear Check out episode 037 for a full rundown of all of our recording gear Wes: Heil PR40 Pack dbx 286s Focusrite Scarlett 2i2 Scott: Electro Voice RE-20 Sony a7 III Focusrite Scarlett 2i2 58:32 - Misc Wes: Peak Design Everyday 30L Backpack Skyroam Solis Hotspot Scott: Google Home Smart outlet that shuts off all my stuff topodesigns.com Links Laravel Nova ××× SIIIIICK ××× PIIIICKS ××× All of the above ;) Shameless Plugs Scott’s Level 1 Apollo Client with React Course Wes’ Advanced React Course - Coming Soon 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

In this Hasty Treat, Scott and Wes discuss all things cross-origin - APIs, Javascript, JSON, CORS, and more. Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 3:52 What is JSON? 5:09 Origin policy in the browser 6:00 Cookies + how they work 6:38 How do you get data from one site to another? 7:00 JSON P (JSON with Padding) 9:00 CORS (cross-origin resource sharing) CORS errors + learning on the fly 11:31 Canvas elements 12:24 Proxies Crossorigin.me Enable-cors.org 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

It’s another potluck episode in which Wes and Scott answer your questions about freelancing, portfolios, code editors, meetup tips, switching to windows and more! VueSchool.io's Vue.js Masterclass — Sponsor Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off. 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 2:37 Question: Maaz Syed Adeeb - Are editor fonts worth the investment (if yes, why)? Why are they such a big deal in the first place? Operator Mono Dank Mono Fira Code 6:10 Question: Ste O’Neill - How can I come up with ideas for projects? What can I put in a portfolio when I work for an agency? 9:10 Question: JavaScript Joe - If I only have two hours per week to work on coding projects, do I spend it building a side project or do I spend it contributing to open source? What’s your experience contributing to open source? 10:45 Question: Diane - Why is Git so hard to grasp in team projects? What are the best resources to master it? Try Github 13:35 Question: Grant Chambers - What are some tips for going to your first meetup? React Meetups 20:23 Question: Michael Hoffman - Have you ever thought about using Linux or Windows as your main operating system? Google Pixelbook Microsoft Surface Pro Figma Logic Sketch Mint OS Final Cut Pro 27:39 Question: Would you recommend using Upwork for starting out freelancing or something similar? 31:18 Question: Mike C. - What do you guys think about sites like Codewars and Code Fights? Being new to web development, I find the problems hard to solve. Is it important to know how to solve all these problems? If so, how do I get better at developing the mindset to solve them? JavaScript 30 Level Up Tutorials 38:47 Question: When I work on a website, I need to record user names, passwords, URLs, keys, logins, cPanel, WordPress, ftp, MySQL for each and every website, local and remote. Currently, I use a text file to save all that information. How are you storing all this info? How others do it? How the pros are managing this? Pros and cons? SSH Key LastPass 1Password 42:15 Question: Chandler Bing - What happened to Scott’s YouTube channel? 44:57 Question: Whose idea was it to do a podcast? Who approached whom first? Josh Owens Egghead.io ××× SIIIIICK ××× PIIIICKS ××× Scott: Jarvis Legs Wes: King of the Road Shameless Plugs Scott’s Level 1 Apollo Client with React Course Wes’ Social Media Twitter Instagram Facebook 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

In this Hasty Treat, Scott and Wes discuss npm, yarn, lock files, why they’re useful, why you would or wouldn’t want to track them in Git and much more! Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 4:10 What is npm and yarn? 8:00 What’s the difference between npm and yarn? 12:00 What is semver? 16:40 What is the dependency tree? This is the problem that lock files solve 20:32 Cool new features of npm and yarn npx security warnings 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

What is the undocumented web? Scott and Wes dive into it, discussing APIs, faking, scraping, automation, proxies as well as tips and tricks for best practices. Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout to get 25% off. 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:05 - What Is the undocumented web? When traditional methods don’t give you what you want Wild West 6:10 - Undocumented APIS Instagram’s private API Use dev tools’ XHR Request React Dev Tools will also have the data Ep 008 - Wes Bos Origin Story Realtor.ca - MLS Mapping Simon Willison’s Zeit Day Talk about XML files Charles Proxy App - also good for debugging requests 17:34 - Faking Faking User Agents Sending headers from requests Free Blackberry wifi on plane 23:52 - Scraping What is craping? Cheerio - jQuery like node package 27:30 - Automation Cron Jobs Filling out forms instantly Headless browsers Puppeteer PhantomJS 33:30 - Proxies Need a fresh IP address Need a different country Side note: Canadians buying stuff in USA M4S1P1 === 41100 API throttling 39:00 - Tips and Tricks Multiple API keys diskDB - Text files as databases Search Github for API keys Inspect Element and Delete Overlays Delete Cookiesokay 44:45 - Stories Photo Voting MLS Listing Top Entrepreneur voting cheating Vanity Plate Checker My Hockey Team Sucks Vehicle auction bidding app youtube-dl ××× SIIIIICK ××× PIIIICKS ××× Scott: Octopath Traveler & OST Wes 1: AvE Youtube Channel Wes 2: Mustie1 Youtube Channel Shameless Plugs Scott’s Level Up Tuts Pro Wes’ Courses 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

In this Hasty Treat, Scott and Wes discuss refactoring, what it is, why you should do it, when to do it, as well as best practices and much more. Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 5:00 - What is refactoring and why would you do it? Re-writing code while maintaining functionality The first code you write is most likely not your best code 7:32 - Benefits To Refactoring Keep part of your codebase in your head Keep codebase timely and up to date (E.g. promises, async, await, etc.) Writing code from the vantage point of having already built your product Performance improvement 12:54 - When to refactor When it’s stopping your from progressing When brining someone new on to your team When you can see a more elegant solution When you’re having performance issues When you’re sharing or presenting code When you have a large codebase that needs to be broken up into smaller components 19:03 - Tips on how to refactor Testing will make refactoring easier Identify bad code and problem areas Use git as an escape hatch Break things into smaller chunks Publish often use code to npm as modules Links Facebook’s Codemod Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer 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

Scott and Wes give their best advice for beginners, including tech skills, applying for jobs, focus, imposter syndrome, and more… Coffeecup’s CSS Grid Builder Tool — Sponsor Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid! 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 4:46 - Advice for gaining new skills Patience and momentum are key You likely won’t get anywhere significant in two months Think about where you want to be in five years Start small Start with was excites you and let that drive your exploration Start writing code ASAP. Don’t worry about the right way, just get started. 17:15 - Advice for applying to jobs Apply for everything. Failing an interview is no big deal. Each interview is an opportunity to gain experience Putting yourself out there is huge - one blog post, YouTube video, or open source project will put you miles ahead Have an entrepreneurial mindset - you can negotiate money, hardware, vacation time, flexible schedule, etc. Don’t just google “average salary” Negotiate salaries and perks. 29:32 - Advice for knowing what to focus on What gets you jazzed? Find something cool and figure out how to recreate it. Find a problem and figure out how to solve it - build real things. Don’t focus on tech - tech is just a tool. 38:32 - Advice for impostor syndrome Listen to this podcast! ;) Almost everyone has it. Don’t worry about other people’s progress. You don’t need to know how to do everything, but you should be able to figure out how to learn. 46:45 - Misc advice Evaluate things for yourself - don’t blindly follow the loudest voices on the internet Focus on soft skills as well - time management, communication Get a mentor Health and Hobbies - don’t let yourself burnout Links Ep 044 - How to Learn New Things Quickly Javascript30 ××× SIIIIICK ××× PIIIICKS ××× Scott: Sony A7iii Wes: Zevia Shameless Plugs Scott’s Level Up Tuts Pro Wes’ Stickers 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

In this Hasty Treat (Short episode) Scott and Wes discuss dot files, what they are, how to use and manage them as well as best practices and more. Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 3:15 - What is a dot file? Access tokens Settings for editors, etc. 4:40 - Dot file examples .gitignore .gitkeep .rc .babelrc .bashrc .eslintrc .env .DS_Store .editorconfig .meteorignore 23:46 - How to keep your dot files in sync Hot Tip In MacOS, toggle dot files with “Shift + Cmd + .” Links Wes’ dot files repo 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

In this highly requested episode, Scott and Wes talk about design systems, what they are, why you may want or need one, how to use them, efficiency, best practices, and much more… VueSchool.io's Vue.js Masterclass — Sponsor Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off. 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 2:40 Design Systems 101 Wes’ Tweet about Design Systems 9:40 Organizational elements of design systems It’s all about consistency 23:07 Best tools for building design systems and style guides Figma Relay for Figma InVision Design Systems Manager Airbnb Lona Brad Frost’s Pattern Library uiengine 41:52 Where to learn more Links Guide to Design Systems by InVision Shopify’s Design System Mailchimp’s Voice and Tone Zendesk Garden Material Design Awesome Design Systems Design Systems Repo Design Systems Docz Facebook Yoga StorybookJS Stuart Clarke-Frisby Tweet Figma’s Platform Figma Styles and Prototyping Design Systems Newsletter ××× SIIIIICK ××× PIIIICKS ××× Scott: CalDigit TS3 Plus Wes: Picasso Tiles Shameless Plugs Scott’s Level 1 Electron Course Wes’ Advanced React Course (Coming Soon) 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

In this Hasty Treat (Short episode) Scott and Wes discuss user roles, what to think about when creating your own, security implications, etc. Netlify — Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info. Show Notes 3:30 How to manage user role systems 11:30 Client side best practices Don’t rely on front-end role systems as a security measure 14:13 Where to store your roles Start simple and get more complex as needed 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

It’s another potluck episode in which Wes and Scott talk about freelancing best practices, tips for working remotely, what they would do if they had to pick a different career, and much more! 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. Coffeecup’s CSS Grid Builder Tool — Sponsor Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid! Show Notes 4:48 How long should you stay with each job and/or company? 8:20 What is the best way to work remotely? Tips for remote working Have a dedicated space Clear on and off times Have a time for winding down Make specific TODO lists Use blocking software to help you stay focused Switch up the scenery / Work in different places 15:26 What are the trade-offs with using WordPress in a headless setup vs a tradition setup? 21:28 How do you deal with API credentials in React? 27:15 How do you keep an eye on performance with an app/site over the long-term? Check uptime Check the performance features in browser dev tools Use error checking software Host-based performance tools Newrelic pingdom LogRocket 34:28 What happened to Canvas after all the hype around HTML5 a few years ago? 40:15 How do you deal with analysis paralysis? Just get to work - you can always change things later Do research, but don’t let it get in the way of shipping 44:05 If you were forced to change your career (and it had to be something you’ve never done professionally in the past), what would it be? Wes: Some sort of buying and selling (eBay, Amazon, etc,) Example: Buying things at wholesale prices and selling them with a markup Scott: Could go a lot of different directions. Example: DJ, Snowboarding instructor, develop a video game that is a sequel to Cruis’n USA 50:14 As a freelance developer, what are some good questions to ask before taking on a client? Budget Scope Preferred communication methods How do you make money? What are the ultimate goals? Basically, ask as many questions as possible ××× SIIIIICK ××× PIIIICKS ××× Scott: Goodhertz Wes: Audiobook: Anything You Want by Derek Sivers Shameless Plugs Scott’s Level 1 Electron Course Wes’ Courses are all on sale 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