The New Syntax Site × Ingest, Stack, AI and more

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 Syys 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 Syys 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 Syys 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 Syys 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 Elo 20181h 5min

In this Hasty Treat, Scott and Wes talk about prototyping and design tools in the development space, specifically Framer X - what it is, what it isn’t, and some cool stuff coming down the pipeline. 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 3:35 Framer X - What it is and what it isn’t 13:20 What it means for other prototyping and design tools 17:00 Future of prototyping and design and development 21:40 Final thoughts Links Scott’s Framer X Fist Look Video Sign up for Framer X Beta 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

27 Elo 201824min

In this episode Wes and Scott dive into designing for developers - tips and tricks for improving your designs, and how to up your game in small ways that will have a big impact on your projects. 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. 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 6:18 - General Design Tips Spacing is important Using patterns and textures Subtle Patterns Hero Patterns Heroicons FlatIcon True Grit Texture Supply Steve Schoger Use subtle gradients ColorSpace Use subtle drop shadows Multiple shadows on one element can have a nice effect Don’t use true black and white (e.g. #000 or #fff) - use softer variation of black and white Use CSS Variables for custom blacks and whites CSS default colors are almost always too harsh Default browser UI is almost never the best UI Select elements, radio buttons, checkboxes, etc. can all be styled - it’s no fun, but way better than it’s ever been 40:22 - UX Design & Animation Don’t use animations when not necessary Subtle scale/transitions on hover can be a nice effect Particles.js Patagonia’s Bears Ears CSS transitions vs Physics based 51:30 - How To Get Better Follow UI-themed Instagram accounts siteInspire Dribbble UISources Follow Steve Schoger Find a free mockup and build it out pixel for pixel Take time to challenge what you think is possible or doable technically and creatively ××× SIIIIICK ××× PIIIICKS ××× Scott: Louis Cole Wes: r/posthardcore Spotify Playlist 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

22 Elo 20181h 6min

In this Hasty Treat, Scott and Wes talk goal setting - why it’s important, when to do it, how to stick to them, and more. Tweet us your goals with the hashtag #syntaxgoals. 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:14 Setting SMART goals (Specific, Measurable, Attainable, Relevant, Time) 7:45 What kinds of thing should you set goals for? 10:49 Business goals 16:50 Visualizing Goals 22:58 When should you set goals? 27:42 Accountability Links ProfitWell Forever Jobless Goals Worksheet 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

20 Elo 201832min