933: Hackweek Overview - What Is It, What Did We Build

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

Wes and Scott talk all about testing! SnapShooter - Sponsor SnapShooter is a Digital Ocean backup service. You get fine grain control over when you backup and how long you backup for. Easily restore from previous snapshots. Use the code SYNTAX to get 20% off your first 12 months. 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 3:00 Testing Talk Is testing scary? 8:00 Unit Testing Pure Functions Mutations Pass in dates to functions 11:40 Integration Testing Integration Testing Mémé 14:00 Visual Regression Testing 17:00 End to End Testing 21:00 Why would you want to test? Confidence Easy Refactoring Finding edge cases 33:00 Test Runners vs Assertion Libraries Jest Mocha Cucumber BBD (Big Black Dog) BDD (Behaviour Driven Development) Cypress.io Enzyme React Testing Library 50:00 Mocking Spy Functions 54:00 Snapshot Testing Jest Snapshot Testing 57:00 TDD (Test Driven Development) BDD (Behaviour Driven Development) Continuous Integration Travis CI ×SICK×PICKS× None today! 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

4 Huhti 20181h 8min

Wes and Scott dive into jQuery. Is it dead? Should you still use it? Why not? What are some alternatives? 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 Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 03:00 A stroll down jQuery Memory Lane What was the first jQuery plugin you wrote? jQuery Conference jQuery IRC room Ben Alman 9:00 jQuery UI jQuery Mobile Sencha Touch nvr 4get where u come from 13:00 So, why is jQuery going away? 16:00 The Selector API Sizzle Bling.js querySelectorAll Docs 21:00 Working with Ajax Fetch Axios 27:00 Dom Traversal Element.matches() You don't need jQuery 30:00 Data / Utility Functions Lodash Just use Map/Reduce/Filter Data Massaging 💆🏻‍ 34:00 Cross Browser Compatability Polyfill.io 37:00 Event Listeners Event Delegation Listening for events on multiple elements 47:00 Final Thoughts on jQuery JavaScript30 The JS Foundation Seeeaaaaacccckkkk PIX Scott: MJML Desktop App Wes: HyperSelect LED Utility Light Shameless Plugs Vue.js for Everyone All of 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

28 Maalis 20181h 3min

In this episode, Scott and Wes chat about 20 different ways you can improve the perf, speed and overall user experience of your websites. Cloudinary - Sponsor Cloudinary is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free! Also check out Cloudinary's ImageCon conference - use the code SYNTAX99 for a discount when checking out. 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 So many perf tips came in over twitter, so in addition to this podcast I'd recommend you read all the replies to this tweet 0:00 We just cracked 1,000,000 downloads! Thank you! 4:00 Network Tips Reducing the amount of HTTP requests A little bit about HTTP2 An interview about http2 8:00 Use Caching and LocalStorage Turn on aggressive caching on your server - long expire times What is gzip? / Enabling gzip 12:00 Using a CDN Listen to our episode on CDNs and #BigZips 13:00 When to load your JS Blocking Requests 15:00 Use Lazy Loading 17:00 Preloading content with Link rel="preload" rel="prefetch" 19:00 Picture, picturefill and srcset="" Article on srcsrc and Picture srcset vs picture/source elements 25:00 Image Compression One less jpg Serve less data 26:00 Inline SVG Talk about Font Awesome 33:00 CSS and JS Code Critical CSS 37:00 Remove unused code Purify CSS no-unused-imports with ESlint 38:00 Code Splitting 40:00 Transpile less babel-preset-env 41:00 Tree shaking Hoyyyy its a tree shaker 42:00 Async ans defer attributes on your script tags Amazing site that visualizes async and defer 45:00 Icon Fonts Web Fonts Native Font Stack: Good: font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 47:00 font-display 49:00 Troubleshooting Performance Simulate Slow Network Speed Google Page Speed Wes' Page Speed Video SIIIIICKkkkkkkkk PIXXXXX Scott: WiFi Surge Protector Wes: KitSound Bluetooth Airline Converter Shameless Plugs Scott is working on a Vue course! Wes is working on his 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

21 Maalis 20181h 3min

In this episode, Scott and Wes everything about their recording — from gear to software to tips and tricks for creating a good screencast. 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 Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section. Show Notes 2:00 Scott's Hardware: EV RE20 DBX 286s Preamp K&M 23850 Microphone Desk Arm Shure KSM32 Blue Snowball Bluebird Scarlet 2i2 4:00 We talk about Different types of microphones Wes' Hardware: Heil PR40 Heil PL2T Boom Arm Audio Technica AT2020 Heil Flush Desk Mount Scarlet 2i2 DBX 286s Preamp EQ351 Equalizer BSW Pop filter for Heil PR40 Heil Shock Mount 14:30 What are the essentials for hardware? Put a t-shirt under your keyboard 16:00 Once you get to record, what do we use? Divvy IShowU Instant Screenflow Uberlayer Loopback 32:00 Making Mistakes Leaving in goof ups and debugging 40:00 Bad screen recordings What is boring? What is annoying? Recording pet peves Tips for sizing your editor Gross sounds Too many files 50:00 What makes a good recording? Good contrast on colour scheme Keeping the code open Short recordings SIIIIICKkkkkkkkk PIXXXXX Wes: CD Player Magnet Phone Holder Scott: OxyLED Motion Sensor Lights 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

14 Maalis 20181h 7min