All About CSS Grid

In this Hasty Treat, Scott and Wes talk about positivity in the web industry - how it can affect you, your work, and the people around you. NativeScript - Sponsor NativeScript is an open source framework for building truly native mobile apps with Angular, Vue.js, TypeScript, or JavaScript. It’s is a great way for front-end developers to get started building native mobile apps. Get started today at nativescript.org/syntax. Show Notes The tech industry is always on the cutting edge and we’re starting to see a shift in how we deal with positivity and negativity. 3:18 - The effects of negativity and how the web industry is improving Mental health awareness is very real Stack overflow sees that it needs to change Linus Torvalds’ apology Negativity is a disease, and it spreads Positivity is a force as well You can be constructive while still being nice Dan Abramov, Addy Osmani, Sarah Drasner are all amazing examples of people pushing the web forward while having a smile on their face 11:50 - Healthy ways to approach disagreements Never assume malice Kill them with kindness Take note of the people you admire and how they deal with aggressiveness 17:08 - The power of positivity Inspire the change you want to see It’s good for your productivity - it makes you feel good 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 Sep 201821min

In this episode Wes and Scott discuss specialization vs generalization - the different ways one can be a generalist or a specialist, advantages and disadvantages to both, and, ultimately, which is the better career path. 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. Dev Lifts — Sponsor Dev Lifts - Thad and JC are on a mission to make web developers healthy. They’re currently offering Personal Training and Nutrition Plans as well as a new program called Fit.Start. Get 50% off with the coupon code “tasty”. Check it out today! Show Notes 4:18 - What is a specialist? Someone who is very good at one or two things Can be very lucrative if you’ve taken the time to become well-known in you’re industry 12:20 - What is a generalist? Two ways to look at generalists: Someone who tries to do a little bit of everything (e.g. a developer who does Wordpress, Drupal, Django, Rails, etc.) Someone who builds related skills around one area (e.g. a JavaScript developer who can code up a backend and a frontend) There will be more jobs available for the dev with tightly integrated skills in related areas than a true “jack of all trades”. 22:22 - Frontend vs Backend Frontend Frameworks (React, Vue, etc.) CSS Performance Animations Backend Web servers Serverless / AWS Scaling Frameworks Performance Databases Docker CI 26:50 - When to widen your focus When you are complacent with your mastery You need a skill to get something done. For fun For a specific job 30:42 - When to narrow your focus You don’t feel control over your skills You are missing out on employment because a lack of skills in one department You feel overwhelmed by the options available You want to be the "go to person” For fun 35:48 - How to master and expand Focus on one skill at at time. Master it and then expand on your skillset Find satellite skills - things that work in harmony 38:47 - Scott’s journey 42:31 - Wes’ journey 44:55 - How to know where to focus Necessity will dictate a lot - what do you need right now? Job postings - you can stack the deck in your favor by learning React. Once you are in, you’re can lean anything you want. Follow your heart - but have a plan 51:03 - Should I be a generalist or a specialist? Wes: There is nothing wrong with having a large skillset as long as you aren’t mediocre at everything. If you’re optimizing for hire-ability I think having a defined focus on either front-end or back-end is best, but still an understanding of how the other works. Ideally you have 1) Very good JS skills, 2) an understanding of how things work on both ends. Scott: You can do either, but whatever you do, do it well. It’s easier to do a few things well than many things well. That said there are some virtuosic devs out there who can be amazing at many things, however those people are not common. Most people have holes in their armor. Links JAMstack_conf ××× SIIIIICK ××× PIIIICKS ××× Scott: Great British Baking Show Wes: 1 Pointless Packaging Instagram / 2 Ozark Season 2 Shameless Plugs Scott’s React Testing for Beginners Course 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

19 Sep 20181h 2min

In this Hasty Treat, Scott and Wes talk about feedback and criticism in the web industry. 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 4:00 - Getting Feedback Don’t assume malice - tone is easily lost in digital communication Don’t take it personally Evaluate the feedback through the eyes of who it’s coming from Look for the truth in the feedback Be open to feedback 15:15 - Giving Feedback Don’t be negative - phrase your feedback in positives Don’t give unrequested feedback Explain the why behind your feedback Don’t be rude or an asshole Use Tools and Standards for Code Quality Give an opportunity to improve Explain the “why” behind the feedback Sandwich criticism with something positive When things are heated, try to diffuse the situation Give frequent positive feedback Links Tweet from Dan Blundell Tweet from Dan vs Code Manager Tools’ Feedback Model Elon Musk on The Joe Rogan Experience 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 Sep 201838min

In this episode Wes and Scott discuss 11 habits that will make you a better developer - everything from understanding the business goals behind your projects to maintaining work-life balance, staying curious, and developing empathy. 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. Sanity.io - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get up and running by typing npm i -g @sanity/cli && sanity init in your command line. Get an awesome supercharged free developer plan on sanity.io/syntax. Show Notes 2:55 - You understand stakeholder and business goals What is the website (or project) ultimately trying to accomplish? How does the business make money? Don’t get caught up in your own “mama drama” about frameworks, but instead focus on how a particular framework will help achieve the end goal of the business 5:13 - You’re curious and always learning This industry is ever-changing and isn’t slowing down 7:36 - You have an open mind about new technology Don’t “poopoo” something because it’s intimidating, new, scary or different Like foods you’ve never tried, sometimes something unusual turns out to be game changing 9:57 - You ask for help #LifeHack - most people know more than you Be comfortable with NOT knowing Be comfortable with failing and with how others might perceive that Check your ego at the door 15:35 - You help others Helping others solidifies your own knowledge Answering questions Stack Overflow Quora Blogging YouTube videos Mentoring co-workers Not offering unwanted advice 19:12 - You have a “problem solver” mentality General curiosity - figuring out why things aren’t working Break things down into testable components to pinpoint an issue Have a clear head under pressure (e.g. interviews) 24:37 - You have fun with what you do Enjoying challenges Even if something isn’t particularly fun, you find ways to make it fun and interesting 27:54 - You understand work-life balance Burnout is huge in our industry It can be difficult when you love what you do, but it’s so important to maintain balance 34:00 - You are empathetic to your co-workers and users Be a team players while getting things done Make everyone around you better at what they do Be someone others want to work with by being inclusive and professional Don’t make inappropriate jokes, put co-workers in a tough position, etc. 37:08 - You pay attention to detail Think about edge cases 39:03 - You’re part of the community Local meetups / lunch and learn Twitter #100daysofcode Conferences ××× SIIIIICK ××× PIIIICKS ××× Scott: Overcooked! 2 Wes: Book - Rich Dad Poor Dad Shameless Plugs Scott’s React Testing for Beginners Course Wes’ Advanced React Graph QL 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

12 Sep 201849min

In this Hasty Treat, Scott and Wes dive into documentation - how to avoid common pitfalls and overwhelm, as well as how to read, understand and get the most out of documentation. 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 5:10 - What are the different kinds of documentation? Tutorials Docs API references Video docs Examples of good documentation Stripe Next.js Examples New PayPal Docs Gatsby Jest Meteor 14:34 - How to read documentation Understanding how you learn will save you lots of time 16:03 - Understanding Parameters Parameter types Required / Optional Parameter order 22:45 - How do you tackle learning something new? Look at some examples Scan the entire docs to get an idea of the surface area Have something specific in mind that you want to build 27:34 - What to do when the docs suck? Look at other people’s code Chat rooms Tests for examples Read the source code Github search Contribute 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

10 Sep 201833min

In this episode Wes and Scott dive into the very big topic of accessibility, from the basics and easy wins to best practices, tools, resources and more! Cloudinary - Sponsor Cloudinary is a heavy duty media hosting stack for your websites and applications. Also, check out Making Media Accessible: How to Automatically Generate alt Text for Images. In the first part of the series, Cloudinary will demonstrate how you can integrate machine learning tools into your image management pipeline to automatically generate alt text for your assets. Deque - Sponsor Deque is the amazing company behind the aXe accessibility testing tool that over 200,000 people use to ensure their websites are accessible. For users looking to scale accessibility, export issues and collaborate with colleagues, Deque offers an enterprise toolset called Attest. Attest also allows you to select accessibility custom rules, offers a more robust API and more integrations AND can test the accessibility of your iOS and Android applications. Show Notes 6:00 - Basics What is accessibility? Amy Carney Tweet Tim Berners Lee Quote a11y What types of disabilities are there? Temporary, situational, and permanent Tweet thread with lots of info 15:03 - How do you write accessible code (easy wins)? Clean HTML Semantic elements Use the alt attribute on images HTML5 (article, section, header, footer, aside) Proper inputs types - number, text, CSS order property on Flexbox and Grid Colors and proper contrast Use links and buttons properly Use ARIA roles to define elements when semantic HTML falls flat (popups, non-standard controls, etc.) Introduction to ARIA Using ARIA: Roles, States, and Properties Keyboard only navigation Tabindex Skip to content “Skip Navigation” Links a11y ESLint rules Video captions for ESL Transcripts for Podcasts 44:48 - Tools aXe Lighthouse - Audits tab in Chrome dev tools Inclusive Design Posters HTML Code Sniffer Pa11y runs code sniffer from the CLI Accessibility features in OS Screen Readers MacOS VoiceOver NVAccess Chrome Vox 54:35 - Resources The A11Y Project Bulb Accessibility Audit from Heydon Deque Youtube Channel 62:22 - Important Ideas Use your website with accessibility tools turned on Sit with someone using a screen reader Amy Carney’s Tweet Mike Behnke Tweet moose of letters’ Tweet Links Syntax033: Large Files - CDNs, Image Compression, Video Hosting, and Big Zips ××× SIIIIICK ××× PIIIICKS ××× Scott: SpeedCurve Wes: Netflix - Magic for Humans Shameless Plugs Scott’s React Testing Course 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

5 Sep 20181h 14min

In this Hasty Treat, Scott and Wes try to stump each other with interview questions from 30 Seconds of Interviews. 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 4:33 What is the difference between the postfix (i++) and prefix (++i) increment operators? 7:15 What’s the difference between a static method and an instance method? 9:25 What is a focus ring? What is the correct solution to handle them? 11:20 How does hoisting work in JavaScript? Syntax 017 - 22 Buzz Words Explained — Mutations, Pure Functions , Serverless, Hoisting, MVC + More 12:47 What are the advantages of using CSS preprocessors? 14:29 What is memoization? 15:48 Describe the different ways to create an object. When should certain ways be preferred over others? 19:15 What is event delegation and why is it useful? Can you show an example of how to use it? 22:06 How do you compare two objects in JavaScript? 26:00 Can you describe how CSS specificity works? 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 Sep 201830min

It’s another potluck episode in which Wes and Scott answer your questions! This month - programming languages, how to practice soft skills, PHP vs JS, is it every too late to become a developer, 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. Mlab - Sponsor mLab is the leading Database-as-a-Service for MongoDB, powering over half a million deployments worldwide. Wes and Scott use mLab to host their own databases as well as take care of backups, security, scaling and performance. Try out a sandbox database on your next mongoDB project → https://mlab.com. Show Notes 5:00 Why don’t you work with Typescript? 10:52 How do you recommend working with APIs/libraries that compete with the DOM (e.g. d3 + react, react + google maps)? 13:40 What is meant by the word “state” when referring to Vue or React? 16:32 How do you practice and get better at “soft skills” (e.g. burnout, freelancing, time management, confrontation)? Syntax 025 - Dealing with email overload PaperKarma - The App to Stop Junk Mail 28:23 Do you guys use different environments (e.g. “QA” and “Prod”)? What are some best practices? Semaphore - Test and deploy your code Sentry - Open-source error tracking 32:43 As someone trying to break into the field of programming, should you build everything from scratch, or it ok to use plugins and libraries? 38:52 What would WordPress be like if it were built on Node and GraphQL? Ghost 46:54 I’m learning JavaScript at 34… Do you think I can learn to breakdance at 34 too? 51:16 How do you handle high level page layout when using styled components? 53:13 As a junior dev, should I switch from PHP and Laravel to full stack JS? I love PHP, but JS is taking over. Links react-async-script-loader Netflix Explained ××× SIIIIICK ××× PIIIICKS ××× Scott: Alfred Emoj Wes: Motherboard YouTube Channel Shameless Plugs Scott’s React Testing Course 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

29 Aug 20181h 5min