Potluck Part 2 - Magic GQLess × Are classes dead? × Custom Hooks × Staying Up To Date × CSS × More!

Scott and Wes are back with another round of tips, tricks and tasty treats for their favorite code editor, VS Code. 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 01:45 Why Scott and Wes use VS Code vs all the other options Stay up to date with all releases 06:05 - Favorite new updates Notification API Auto Import Listing errors in the file explorer Column Selection Interface Customization Hot Tip: Anytime you find yourself using your mouse, there’s likely a shortcut key for what you’re trying to do React Snippets Library Wes’ VS Code settings Visual Studio Live Share 27:40 - Favorite/New Extensions Bracket Pair Colorizer Rainbow Brackets Auto Rename Tag Better Comments Jest Snapshot Tools JS Refactor Import Cost Polacode Carbon - An alternative way to share beautiful images of your source code 38:49 - Themes LevelUp Official Night Owl Cobalt2 40:35 - Tips and Tricks Learn how to jump and select by letter, word, line, etc. Move a line (or Line Bubbling) - Use this for rearranging and/or moving lines of code quickly. Cycling through multiple windows of the same app - If you have multiple VS Code windows open, “Cmd + backtick” will cycle through them, so you don’t have to drag them in and out of view. Adjust MacOS keyboard settings - change Key Repeat to “fast” and Delay Until Repeat to “short”. This will make your editor super fast when holding down arrow keys. Use Git features Git History Spell Checker - “Cmd + .” will open up code actions and you check for possible misspellings, etc. Code Spell Checker Rename Symbol - Much more reliable than find/replace. Sort Lines Select everything between quotes - (Cmd + Shift + Space) 57:25 - Things that could be improved Region folding is inconsistent and sometimes doesn’t work at all. No easy way to tell which extension is causing CPU performance issues. Sidebar indentation isn’t clear. ××× SIIIIICK ××× PIIIICKS ××× Wes: Melnor 4-Zone Digital Water Timer Scott: Tosowoong Enzyme face cleanser Shameless Plugs Scott’s Intermediate React Series Wes’ All Course Secret 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

30 Touko 20181h 8min

Scott and Wes detail the tips and tools you need to get better at debugging. 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 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:00 Read the stack trace 7:35 Make sure you aren’t debugging production Make sure you’re not cached 8:40 Check the network panel for the whole response CORS (Cross-Origin Resource Sharing) 12:04 Use debugger commands in the browser Set breakpoints (race conditions 13:40 Use Source Maps 15:29 Make full use of all console methods console.group/groupEnd/info/ console.log({objNAme}) 17:02 View your code in other browers Make sure your browser is up to date 18:50 Step into and step over function Useful for especially tricky issues 19:47 Look into Scope in dev tools panel 20:33 Recreate it in CodePen or Create React App Helps to quarantine your code Verify where the problem actually is 24:12 Take a break Helps clear your head and approach your problem from a different angle 25:40 Rubber Duck Debugging Forcing yourself to talk it out will often reveal problems/issues 26:40 Check Github issues / ask in Slack Leave your solution in the comments for others 28:12 Use Node --inspect flag 29:57 Read the code in your libs (if you can) 32:34 - Chrome Dev Tools Tabs Rundown 33:10 - Network tab 34:15 - Preformance tab 35:58 - Lesser known tools 36:15 - Firefox Grid Debug 36:20 - Firefox Fonts tab 37:10 - More tools (three dots menu in top right of Chrome Dev Tools window) 37:39 - Chrome Animations Inspector 38:34 - /dev tips & Modern DevTools Course 39:41 - Chrome & FF Layers for 3d and full view of canvas & window 40:51 - Sensors for overriding fake devices sensors Hot tip: Use Instagram on the desktop - Go to Instagram and set the user agent to iPad and it will work as it does on that actual device Hot tip: Get free internet on a plane - If the airplane offers free internet for a certain device, change your user agent to that device and then switch back 43:12 - Favorite DevTools extensions Apollo React Redux Vue Lighthouse JSON Formatter 44:06 - Application/Storage tab 44:41 - FireFox Grid Inspector ××× SIIIIICK ××× PIIIICKS ××× Scott: Hotel Tonight App Wes: Coffee table - If you’re trying to build an outdoor coffee table, use a peice of granite Shameless Plugs Scott’s Level 2 React Course coming out THIS WEEK! - subscribe and be notified when it’s released Wes’ Courses - Advanced React course coming soon - subscribe to be notified when it’s released 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

23 Touko 201856min

Scott and West talk about what’s new in JavaScript. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX 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. They are also hiring! netlify.com/careers Show Notes 1:55 - Scott’s new studio 4:57 - Pop Motion Pose New library for React or vanilla JavaScript Define locations instead of CSS styles Pass the animation state into a React component as open or closed instead of active or inactive Flip animation techniques Style Fire - Simple HTML & SVG styler optimised for animation 8:44 - Intersection Observer Browser-based API based on observables Example uses: Tell me when this element is on the page, goes off the page or is halfway down the page 10: 32 - MDX Webpack loader for MDX (i.e. JSX-infused Markdown) using mdx-it Turns MarkDown files into components in Webpack 12:56 - Resize Observer Watch elements for resize 15:47 Web Animations API Works with animations natively in JavaScript Tell your animations to play, pause, reverse, etc. Instead of changing classes, you have full control over what the animation is doing Web-Animation-JS Polyfill Can I use 18:00 - Window Face Detector API Create a new window.face detector and pass it an image tag and it returns an array of faces. 22:53 - Payment Request API Eliminates check out forms Allows platform to handle payment safely and securely 29:23 - INTL.NumberFormat Format pricing with different currencies 32:59 - V8 BigInts Makes working with big numbers more viable 34:53 - Speech Recognition Converts speech to text Pipe in different accents 36:22 - Text To Speech Simulates text into spoken words 41:46 - ES6 Modules In Node There are no ES6 modules in Node. It’s still being developed. If you want to build an ES6 module in Node, you have to use the .mjs extension ××× SIIIIICK ××× PIIIICKS ××× Scott:Dank Mono Wes:Video Doorbell Pro from Ring 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

16 Touko 201856min

It’s a Potluck episode - you bring the questions and we turn them into tasty treats. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX 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:42 What is an efficient way to process huge data, greater than 740 MB when not working in JS? 6:45 What’s new and shiny thing in web development do you think is going to go the distance? GraphQL Prisma GraphCool GraphQL Playground 11:09 Wes, can you make a course on how to barbecue meat properly? 12:31 How do you go about learning a new language or framework? Ep 44 - How to Learn New Things Quickly 12:54 What are the best things to keep in mind when you are the only developer on a team? 18:07 Is Redux for React dead with the new context API? Redux 21:41 What’s the funnest project you have ever worked on and why? LevelUpTuts 27:19 What’s the best use case for JWP? JWP 29:50 Should I focus on one thing and try to master one technology instead of being a jack of all trades? 35:00 Why do thousands of entrepreneurs build SaaS products on Ruby on Rails? Laravel Laravel Spark CodeIgniter Meteor Hackathon Starter 39:41 Would you use single page application vs SSR for large reactor view apps? SSR Next.js 41:06 What do you use for online learning platforms? Ep 14 - Our Stacks Explained Teachable Moodle ××× SIIIIICK ××× PIIIICKS ××× Wes: Parcel Scott: Nebo Shameless Plugs Scott’s Headless WordPress course Wes’ Instgam Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter

9 Touko 201852min

Scott and Wes talk about how they learn new things quickly. Scott also tells a crazy story about his weekend. 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. They are also hiring! netlify.com/careers Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Show Notes 2:00 Scott recounts his crazy story about getting Lymphangitis 8:30 Know your learning type videos, blogs, docs, source no right or wrong way 15:00 Foundational Skills 23:00 Narrow your focus Should you learn Redux with React? blurring skills hurts future progress don't learn too many things at once 26:00 Get excited try to reclaim your initial excitement flow happens when you are excited pick projects around hobbies Star wars sucks 33:00 Grind Time write code first ask questions later break shit Submit to yourself that you are going to build this 3-4 times iteration driven development quality from quantity use smarter people snippet libs style guides 40:00 Immersion follow every kind of media you can put things on in the background permeate into your brain ××× SIIIIICK ××× PIIIICKS ××× Wes: Crushing It Book Wes: Crushing It AudioBook Scott: Popmotion Pose Shameless Plugs Wes' JavaScript30 Course Scott's Headless WordPress course 1:00:00 Scott comes out of nowhere with a story about TEA! 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

2 Touko 20181h 2min

Wes and Scott rattle through ~20 different Object and Arra Methods that will make you a better JavaScript developer. Freshbooks - Sponsor This is episode Wes mentions the free book Breaking The Time Barrier. Get a 30 day free trial of Freshbooks at freshbooks.com/syntax. 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. They are also hiring! netlify.com/careers Show Notes For the docs for all these, just google mdn and the method you are looking for 😃 3:00 Why are these great? They are chainable Immutable 5:30 .filter() Truthy or Falsy 8:00 .map() 10:00 .reduce() - returns any shape! filter, create a new shape, add up numbers... 14:30 .forEach() Side effects 16:00 .some() can be used as a short circuit forEach 25:00 .every() .includes() (why not contains?) 26:00 Array.from() Array.from() takes a secondary map arg Array.of() 29:00 Object.values() Object.keys() Object.entries() 32:00 Array spread - converts iterable to array Array spread - Concats arrays Array Spread + Slice. Don't splice - remove an item from an array. 34:00 Object Spread 37:00 Function Rest 39:00 Object.freeze() 40:00 Object.seal() 41:00 Object.assign() - no longer needed because you can object spread Reference vs Copy in JavaScript ×SICK×PICKS× Scott: Tea Haus Wes: SOG Folding Knife Wes: Sharpening Stone Shameless Plugs Vue.js for Everyone Wes' Course SMASH that Subscribe Button on Wes' YouTube 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

25 Huhti 201855min

It's a Potluck episode - you bring the questions and we turn them into tasty treats. DeployHQ - Sponsor DeployHQ is the easiest way to deploy websites to your servers. Invite your team and set up automated deployment processes to: Compile a production build of your assets Deploy securely to servers behind VPNs and firewalls Execute SSH commands Manage and upload your config files Preview and schedule deployments Track and monitor your deployments in real-time Deploy to multiple servers at the same time, whether that be your own server via FTP/SSH, or an Amazon S3 bucket. You can even start deployments automatically whenever you push! Instant setup for repositories hosted on GitHub, Bitbucket, GitLab and Codebase, plus realtime notifications in your favourite chat services like Slack or HipChat. To get 50% off your first 6 months, head on over to deployhq.com/syntax. The first 25 listeners to deploy successfully will receive a FREE branded mug or t-shirt! Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Submit Your Questions Here Show Notes 02:44 What are your thoughts on Vue.js? VuePress Nuxt 6:20 What are your thoughts on Typescript and Flow? Typescript Flow 10:45 What was your biggest breakthrough in Programming? Nude.js 20:00 Any tips, tools and tricks to avoid procrastination The productivity episode Sort by anxiety Eat That Frog Todoist 25:00 Thoughts on CMSes? Headless? Database Driven? Static Site Generator? Headless WordPress Gatsby 34:00 How can I start creating and selling courses? 40:00 How did you two become renown in the developer community? We don't think we're renown :) YouTube Ad Revenue is poor 46:00 Server Side Rendering with JavaScript Apps 53:00 Is Yeoman still a thing? ×SICK×PICKS× Scott: Eat That Frog Wes: DevDocs.io PWA Shameless Plugs Vue.js for Everyone Wes' Course SMASH that Subscribe Button on Wes' YouTube 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

18 Huhti 20181h 5min

Scott and Wes Chat about burnout! Freshbooks - Sponsor This is episode Wes mentions the free book Breaking The Time Barrier. Get a 30 day free trial of Freshbooks at freshbooks.com/syntax. Fluent Conf - Sponsor Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers. Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences. Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX Show Notes 01:50 What is burnout? Losing Enthusiasm for web development That Hustle 7:00 Why is being burnt out bad? Putting off hobbies 12:30 How do you prevent burnout? Farming out Work Automating content Busy work 18:00 Aggressively turn down meetings Work to cut out busy work Locus on Control Managing Email and Notifications Scrubbing Plates 24:00 Health and Nutrition Sleep 27:00 Motivation What to do when you just don't like the work you are working on Small Wins Learning new Things Getting a new job Taking Courses Keeping Up With The Codeashians 37:00 Being overworked at work Overtime 41:00 So you've burnt out, what do you do? How do you reignite the spark? Taking a day off Delegating GitHub Online chat with other developers ×SICK×PICKS× Wes: Dewalt 20v Drill Set Wes: Dewalt 20v Cordless Web/Dry Vac MERU Shameless Plugs Vue.js for Everyone SMASH that Subscribe Button on Wes' YouTube 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

11 Huhti 20181h 2min