What's New in Javascript
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
Potluck EP × Is Redux Dead × Learning Quickly × Developing Solo × Specialist vs Generalist × Funnest Projects × Wes’ BBQ Course
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
How to Learn New Things Quickly
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
20 JavaScript Array and Object Methods to make you a better developer
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
Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman
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
Preventing and Dealing with Burnout in Web Development
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
The Testing Show!
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
Is jQuery Dead?
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
