Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes talk about front end security and what to do in order to avoid hacking. 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 and using the coupon code “tastytreat”. Show Notes 2:53 - SSL Encrypted transfer of information Digitally binds a cryptographic key to an organization’s details Web-cam, geolocation, etc. 6:15 - innerHTML React’s dangerouslySetInnerHTML Name intentionally chosen to be frightening Allows you to write HTML to the DOM Data should be sanitized before used in prop Removes unexpected data from string Used to prevent cross site scripting attacks 10:25 - Don’t trust the client The client can be manipulated to send any info to your server E-commerce example — don’t take the price total from the front end to make the charge, DB call and calculate on the server Validate form inputs via HTML 5 field validation/check data types on the server Don’t allow your users to send an object when it should just be a string Get this for free with GraphQL via types 13:41 - PCI Compliance Protect card holder data SSL or Secure iFrame Encrypt transmission of card data Restrict access to card holder data Restrict physical access Front of front-end 16:44 - Tips Don’t put a name on sensitive fields if you are using JS HTTP only cookies Local Storage tokens XSS Links React GraphQL Express 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

8 Jul 201920min

In this episode of Syntax, Scott and Wes talk about the “fundamentals” of web development and what you need to know - HTML, CSS foundations 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 and using the coupon code “tastytreat”. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at Freshbooks and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:54 - Learning fundamentals vs framework specialists Learning vs getting a job Abstractions work well until they don’t and you need to debug them HTML 7:58 - Semantic markup 9:15 - Accessibility basics 9:57 - Attributes CSS 16:13 - Specificity 22:42 - Selectors 24:52 - Layouts 27:53 - Box model 32:50 - Positioning 36:42 - Forms and inputs 40:45 - Block vs inline vs inline-block 43:09 - Sizing units 44:40 - Typography 47:53 - Media Queries Links Interviewing candidates with a lack of fundamentals - Tweet Jean-Philippe Sirois Tweet Syntax 72: Accessibility Syntax 107: Hasty Treat - CSS Units ××× SIIIIICK ××× PIIIICKS ××× Scott: I Think You Should Leave with Tim Robinson Wes: Forearm Forklift Lifting and Moving Straps Shameless Plugs Scott’s new course - “Debugging and Dev Tools” Wes’ courses - Use the coupon 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

3 Jul 201956min

In this Hasty Treat, Scott and Wes talk about headless CMSs - why to use them, how they work, pros and cons, examples 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 and using the coupon code “tastytreat”. Show Notes 2:11 - What is a headless CMS? It’s a system or CMS that has no front-end (aka head) Allows you to use front-end specific tech (static generators/front-end frameworks) instead of the back-end to generate pages 4:37 - Some examples Can be used with any type of website that can consume an API WordPress API + Gatsby Hosted Service + React App 7:06 - Why? Separation of concerns - your data is in a single spot, and can be pulled into any app, website, marketing micro site, etc. Keeps ergonomics of WordPress or $CMSHERE, while developers get to use what they like Optimizes for performance with static builds Hide the implementation details and back-end from view 10:19 - Live vs statically-generated website Syntax 120 - Gatsby vs Next 10:55 - How? Connects to API via normal fetch calls/GraphQL/whatever you use Needs to host your back-end either as a service or on a host Needs to host your front-end either on the same server as your back-end or on something specialized like Netlify Links WordPress Sanity.io React Syntax 120 - Gatsby vs Next Netlify GraphQL Cobalt Gatsby.js Drupal Next.js Nginx 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

1 Jul 201917min

It’s another potluck! In this episode, Scott and Wes answer your questions about career changes, preprocessors, moving, “the gap”, hip hop 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 and using the coupon code “tastytreat”. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on Sanity. Show Notes 1:54 - Q: I am 33 with a wife and two young daughters, and am trying to change careers. My job pays $80,000 a year, but I hate it. My wife is ok with me doing university, but she wants me to stay at the job I don’t like. Should I stand my ground? Any tips on achieving my goals to make me happy, but also keep my family happy? 10:10 - Q: What is your advice to very junior/junior devs in writing cover letters for jobs? I wonder what to say without sounding canned and fake. 14:35 - Q: Scott, what was the stack you were using at Ford? 17:09 - Q: Other than reading the docs, how do you guys go about learning/trying out new technologies? Do you rebuild similar applications or pick out individual features you think are “sIcK”? 22:32 - Q: Is it always necessary to use setState in react when storing data (for example, a form input) even if you don’t intend on re-rendering the page, or can you get away without using state? 25:04 - Q: Development has a stereotype for being a young person’s game. As someone who started their career out of university, I often wonder how long I can sling divs for? Do you think you could make it to retirement age or do you think the game will change out from under you? 30:34 - Q: Scott, you’ve mentioned you love hip hop. Would you be willing to share any playlists of your all-time favorite hip hop artists? 32:08 - Q: What are your thoughts on HTML pre-processors? If you use one, which one(s) do you prefer and why? 36:04 - Q: What advice would you have for someone considering to “level up” their career by moving from a city with few tech jobs to a city with more opportunity for tech jobs? What are some of the biggest things to consider when moving possibly cross-country to further a career? 42:11 - Q: What are your recommendations in terms of resources for first time dads (and moms) like books, podcasts, etc. and generally good co-parenting advice for working professionals? 46:45 - Q: Loved the show with Travis. Had a question about “the gap”. Similar to design ambitions/taste surpassing current skill, when did you feel like your code had “grown up” and that you could actually DO what you envisioned with Javascript? Links Syntax 044: How to Learn New Things Quickly Scott’s Spotify playlist - “Rap Music To Code To = Level Up Tutorials” Scott’s Spotify playlist - “Golden Era” Scott’s music picks Apache - Apache Ain’t Shit MF DOOM - MM…Food Kendrick Lamar - To Pimp A Butterfly GZA - Liquid Swords Gang Starr - Daily Operation Slick Rick - The Ruler’s Back Redman & Method Man - Blackout Q-Tip - The Renaissance Enter The Wu-Tang (36 Chambers)[Expanded Edition] - Wu-Tang Clan Pete Rock on Spotify Preemo on Spotify Codeland Conference Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google ××× SIIIIICK ××× PIIIICKS ××× Scott: Oculus Quest All-in-one VR Gaming Headset Wes: Marpac Rhom Portable White Noise Sound Machine Shameless Plugs Scott’s new course - “Dev Tools and Debugging” Wes’ Courses - Use the coupon 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

26 Jun 201958min

In this Hasty Treat, Scott and Wes talk about pushing yourself in uncomfortable areas to grow as a programmer, be a better developer, and become more efficient in general. 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 for more info. Show Notes 3:50 - CCS Preprocessor parable 6:09 - Efficiency 10:40 - When to learn new systems 13:03 - Common pain points 14:42 - Pushing yourself to foster growth 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 Jun 201925min

In this episode of Syntax, Wes is joined by Sara Soueidan, a freelance front-end UI developer and trainer. While Scott is taking a break to spend time with his new baby girl, Wes and Sara dive into all things SVG! 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 and using the coupon code “tastytreat”. Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on Sanity. Show Notes 6:05 - What are SVGs? It’s an image you can edit 16:17 - Icon fonts Better tools Fails in certain areas SVG sprite icons Grunticon 24:24 - SVG files / Build tools SVGO / SVGOMG 31:50 - Where to find SVGs Noun project Exporting from Sketch/Illustrator/Figma Freepik Iconmoon 33:48 - What is the viewbox? 40:39 - Animating SVG 43:41 - Accessibility & text with SVG 45:44 - Graphing with SVG D3.js 47:58 - Filters Links Font Awesome Grunticon Grunt gulp.js React Vue.js Sketch Illustrator Figma imagemin gulp-imagemin Gatsby.js gatsby-plugin-sharp jakearchibald/svgomg Noun Project Freepik Icomoon GreenSock Snap.svg SVG Animations: From Common UX Implementations to Complex Responsive Animation By Sarah Drasner Codrops D3.js ××× SIIIIICK ××× PIIIICKS ××× Sara: Netlify Wes: Wise Contact Sensors Shameless Plugs Sara’s Website & Workshop Dates Wes’ Courses - Use the coupon 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 Sara’s Twitter

19 Jun 20191h 1min

In this Hasty Treat, Scott and Wes talk about internationalization - how to deal with different languages, different currencies, and more! Log Rocket - 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 re-player and a performance monitor. Get 14 days free at logrocket.com/syntax. Show Notes 5:48 - Intl.NumberFormat 9:17 - Intl.ListFormat 12:17 - Intl.DateTimeFormat / Intl.RelativeTimeFormat 14:27 - Intl.PluralRules Links Standard built-in objects Language Subtag Registry 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

17 Jun 201918min

In this episode of Syntax, Scott and Wes talk about debugging — tools, techniques, and the mindset needed to debug a problem and get through it as quickly as possible. 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. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at Freshbooks.com and put SYNTAX in the “How did you hear about us?” section. Show Notes 1:41 - Tools CLDD - console.log driven development How To Pause Your Code With Breakpoints In Chrome DevTools Other types of break points XHR DOM break on attribute change DOM break on children Conditional break Break on exception Break on event listener 21:49 - Network requests Doesn’t take place in your site/dom, so might not always have all info in your console, debugger Network tab in dev tools shows you all requests going in and out of your app Filters by type, sees length in request Sees headers, responses and more Failed requests will be red 26:50 - Debugging mindset Check different browsers Check the docs/examples Isolate when possible “What has changed?” Get minimal working code Rubber Duck Debug Step back and re-think Links Debugging Visual Studio Code (Node) - James Q Quick CodePen Spencer Carli’s Youtube ××× SIIIIICK ××× PIIIICKS ××× Wes: DeWALT Lawn Mower Scott: Cold Brew Coffee Maker Shameless Plugs Wes’ Courses - Use the coupon code ‘Syntax’ for $10 off! Level 2 React Native with GraphQL 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 Jun 201948min