933: Hackweek Overview - What Is It, What Did We Build

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 Aug 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 Aug 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 Aug 201832min

In this episode Wes and Scott do a deep dive into React - what it is, best practices and all the ins and outs of how the framework works. Dev Lifts — Sponsor DevLifts - 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 fit.start() with the coupon code “SYNTAX”. Additionally, the first 10 people to use the code "TASTY" get 50% off your DevLifts Premium subscription. Check it out today!  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:23 Components 12:30 JSX 25:13 Data and Props 44:48 Fetching 49:22 Event Handlers 54:00 Instance classes + properties 55:02 Lifecycle Methods 59:55 Context 1:01:35 Routing Links Preact Inferno How to Comment in JSX (article) Apollo Redux LevelUpTutorials.com Level II React Course React Informed (forms) Meteor Axios Firebase Gatsby Here’s how React’s new Context API works ××× SIIIIICK ××× PIIIICKS ××× Scott: Dark Net Diaries Podcast Wes: Any suggestions for key management products? + Iliza Shlesigner Stand-Up Shameless Plugs Scott’s Level Up Tuts Pro 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

15 Aug 20181h 14min

In this Hasty Treat, Scott and Wes discuss how they create courses, design and build curriculum, as well as insights and best practices for content creation. 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:32 - Wes’ process Figure out what to make Build the thing you’re teaching in the course Have it reviewed by experts Simplify and create a linear flow for what you’re teaching 16:25 - Scott’s process Chose a topic Build the thing Create the outline as you go Have goals in mind, for individual topics Record with final code open 28:25 - How to get started 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

13 Aug 201832min

Scott and Wes talk office setups and all things gear. Gotta get the gear! 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 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 11:00 Wes’ gear Scott’ gear Scott’s podcasting/screencasting gear 13:30 - Computer Wes: Macbook Pro 15" Scott: Macbook Pro 15" 17:39 - Monitors Wes: [22" vertical Cheap Acer: https://amzn.to/2vkXomG [27" Dell 4k - https://amzn.to/2Mo3NnO [Ergotron Monitor Arms - https://amzn.to/2voS9CF Scott: LG 34UC88-B 34-Inch 21:9 Curved UltraWide VIVO Dual stand 28:33 - Keyboards and Mice Twitter Thread about mice Wes: Apple Magic Keyboard Magic Mouse Logitech MX Master 2S Scott: CODE Keyboard Apple Magic Trackpad 33:14 - Desks Wes: Ikea Countertop Ikea Alex Drawers Scott: Ikea Karlby Walnut Countertop + Jarvis Legs === dope desk! 37:53 - Chairs Wes: Herman Miller Aeron Polished Aluminum Scott: Herman Miller Aeron 39:24 - Headphones Wes: Bose QC35s Apple AirPods Scott: AKG K 553 Pro M-Audio Bx8 monitors Polk Audio 12” Subwoofer for that booom booom! 43:50 - Hard Drives / Backup Systems Wes: WD My Passport 1TB Backblaze Backup Scott: WDMyCloud EX4100 47:28 - Charging Stations Wes: Anker USB Wall Charger 48:52 - USB Splitters Wes: CalDigit TS3 Plus Amazon Basics USB 3 Hub Scott: CalDigit TS3 Plus 50:35 - Wifi Wes: Amplifi HD Mesh Scott: Google Wifi Mesh 54:26 - Recording Gear Check out episode 037 for a full rundown of all of our recording gear Wes: Heil PR40 Pack dbx 286s Focusrite Scarlett 2i2 Scott: Electro Voice RE-20 Sony a7 III Focusrite Scarlett 2i2 58:32 - Misc Wes: Peak Design Everyday 30L Backpack Skyroam Solis Hotspot Scott: Google Home Smart outlet that shuts off all my stuff topodesigns.com Links Laravel Nova ××× SIIIIICK ××× PIIIICKS ××× All of the above ;) Shameless Plugs Scott’s Level 1 Apollo Client with React Course Wes’ Advanced React Course - Coming Soon 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 Aug 20181h 5min

In this Hasty Treat, Scott and Wes discuss all things cross-origin - APIs, Javascript, JSON, CORS, 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/syntax for more info. Show Notes 3:52 What is JSON? 5:09 Origin policy in the browser 6:00 Cookies + how they work 6:38 How do you get data from one site to another? 7:00 JSON P (JSON with Padding) 9:00 CORS (cross-origin resource sharing) CORS errors + learning on the fly 11:31 Canvas elements 12:24 Proxies Crossorigin.me Enable-cors.org 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

6 Aug 201817min

It’s another potluck episode in which Wes and Scott answer your questions about freelancing, portfolios, code editors, meetup tips, switching to windows and more! VueSchool.io's Vue.js Masterclass — Sponsor Check out VueSchool.io’s new Vue.js Masterclass taught by Alex Kyriakidis. Learn Vue.js along with best practices, modern Javascript, and other exciting technologies, by building a real-world application - a forum. The first 50 people to visit VueSchool.io/syntax to get 25% off. 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:37 Question: Maaz Syed Adeeb - Are editor fonts worth the investment (if yes, why)? Why are they such a big deal in the first place? Operator Mono Dank Mono Fira Code 6:10 Question: Ste O’Neill - How can I come up with ideas for projects? What can I put in a portfolio when I work for an agency? 9:10 Question: JavaScript Joe - If I only have two hours per week to work on coding projects, do I spend it building a side project or do I spend it contributing to open source? What’s your experience contributing to open source? 10:45 Question: Diane - Why is Git so hard to grasp in team projects? What are the best resources to master it? Try Github 13:35 Question: Grant Chambers - What are some tips for going to your first meetup? React Meetups 20:23 Question: Michael Hoffman - Have you ever thought about using Linux or Windows as your main operating system? Google Pixelbook Microsoft Surface Pro Figma Logic Sketch Mint OS Final Cut Pro 27:39 Question: Would you recommend using Upwork for starting out freelancing or something similar? 31:18 Question: Mike C. - What do you guys think about sites like Codewars and Code Fights? Being new to web development, I find the problems hard to solve. Is it important to know how to solve all these problems? If so, how do I get better at developing the mindset to solve them? JavaScript 30 Level Up Tutorials 38:47 Question: When I work on a website, I need to record user names, passwords, URLs, keys, logins, cPanel, WordPress, ftp, MySQL for each and every website, local and remote. Currently, I use a text file to save all that information. How are you storing all this info? How others do it? How the pros are managing this? Pros and cons? SSH Key LastPass 1Password 42:15 Question: Chandler Bing - What happened to Scott’s YouTube channel? 44:57 Question: Whose idea was it to do a podcast? Who approached whom first? Josh Owens Egghead.io ××× SIIIIICK ××× PIIIICKS ××× Scott: Jarvis Legs Wes: King of the Road Shameless Plugs Scott’s Level 1 Apollo Client with React Course Wes’ Social Media Twitter Instagram Facebook 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 Aug 201859min