All About CSS Grid

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

19 Nov 201824min

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

14 Nov 201859min

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

12 Nov 201835min

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

7 Nov 20181h 3min

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

5 Nov 201821min

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

31 Okt 201858min

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

29 Okt 201825min

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

24 Okt 201859min