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

In this Hasty Treat, Scott and Wes discuss npm, yarn, lock files, why they’re useful, why you would or wouldn’t want to track them in Git and much 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 4:10 What is npm and yarn? 8:00 What’s the difference between npm and yarn? 12:00 What is semver? 16:40 What is the dependency tree? This is the problem that lock files solve 20:32 Cool new features of npm and yarn npx security warnings 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

30 Juli 201826min

What is the undocumented web? Scott and Wes dive into it, discussing APIs, faking, scraping, automation, proxies as well as tips and tricks for best practices. Kyle Prinsloo’s Freelancing & Beyond — Sponsor Kyle Prinsloo teaches you everything you need to know about freelancing, including how to quit your job, earn a side-income and start taking control of your life. Check it out at https://studywebdevelopment.com/freelancing and use the coupon code “syntax” at checkout 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 3:05 - What Is the undocumented web? When traditional methods don’t give you what you want Wild West 6:10 - Undocumented APIS Instagram’s private API Use dev tools’ XHR Request React Dev Tools will also have the data Ep 008 - Wes Bos Origin Story Realtor.ca - MLS Mapping Simon Willison’s Zeit Day Talk about XML files Charles Proxy App - also good for debugging requests 17:34 - Faking Faking User Agents Sending headers from requests Free Blackberry wifi on plane 23:52 - Scraping What is craping? Cheerio - jQuery like node package 27:30 - Automation Cron Jobs Filling out forms instantly Headless browsers Puppeteer PhantomJS 33:30 - Proxies Need a fresh IP address Need a different country Side note: Canadians buying stuff in USA M4S1P1 === 41100 API throttling 39:00 - Tips and Tricks Multiple API keys diskDB - Text files as databases Search Github for API keys Inspect Element and Delete Overlays Delete Cookiesokay 44:45 - Stories Photo Voting MLS Listing Top Entrepreneur voting cheating Vanity Plate Checker My Hockey Team Sucks Vehicle auction bidding app youtube-dl ××× SIIIIICK ××× PIIIICKS ××× Scott: Octopath Traveler & OST Wes 1: AvE Youtube Channel Wes 2: Mustie1 Youtube Channel 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

25 Juli 20181h 4min

In this Hasty Treat, Scott and Wes discuss refactoring, what it is, why you should do it, when to do it, as well as best practices and much 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 5:00 - What is refactoring and why would you do it? Re-writing code while maintaining functionality The first code you write is most likely not your best code 7:32 - Benefits To Refactoring Keep part of your codebase in your head Keep codebase timely and up to date (E.g. promises, async, await, etc.) Writing code from the vantage point of having already built your product Performance improvement 12:54 - When to refactor When it’s stopping your from progressing When brining someone new on to your team When you can see a more elegant solution When you’re having performance issues When you’re sharing or presenting code When you have a large codebase that needs to be broken up into smaller components 19:03 - Tips on how to refactor Testing will make refactoring easier Identify bad code and problem areas Use git as an escape hatch Break things into smaller chunks Publish often use code to npm as modules Links Facebook’s Codemod Syntax043 - 20 JavaScript Array and Object Methods to make you a better developer 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

23 Juli 201826min

Scott and Wes give their best advice for beginners, including tech skills, applying for jobs, focus, imposter syndrome, and more… Coffeecup’s CSS Grid Builder Tool — Sponsor Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid! 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 4:46 - Advice for gaining new skills Patience and momentum are key You likely won’t get anywhere significant in two months Think about where you want to be in five years Start small Start with was excites you and let that drive your exploration Start writing code ASAP. Don’t worry about the right way, just get started. 17:15 - Advice for applying to jobs Apply for everything. Failing an interview is no big deal. Each interview is an opportunity to gain experience Putting yourself out there is huge - one blog post, YouTube video, or open source project will put you miles ahead Have an entrepreneurial mindset - you can negotiate money, hardware, vacation time, flexible schedule, etc. Don’t just google “average salary” Negotiate salaries and perks. 29:32 - Advice for knowing what to focus on What gets you jazzed? Find something cool and figure out how to recreate it. Find a problem and figure out how to solve it - build real things. Don’t focus on tech - tech is just a tool. 38:32 - Advice for impostor syndrome Listen to this podcast! ;) Almost everyone has it. Don’t worry about other people’s progress. You don’t need to know how to do everything, but you should be able to figure out how to learn. 46:45 - Misc advice Evaluate things for yourself - don’t blindly follow the loudest voices on the internet Focus on soft skills as well - time management, communication Get a mentor Health and Hobbies - don’t let yourself burnout Links Ep 044 - How to Learn New Things Quickly Javascript30 ××× SIIIIICK ××× PIIIICKS ××× Scott: Sony A7iii Wes: Zevia Shameless Plugs Scott’s Level Up Tuts Pro Wes’ Stickers 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

18 Juli 20181h

In this Hasty Treat (Short episode) Scott and Wes discuss dot files, what they are, how to use and manage them as well as best practices 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:15 - What is a dot file? Access tokens Settings for editors, etc. 4:40 - Dot file examples .gitignore .gitkeep .rc .babelrc .bashrc .eslintrc .env .DS_Store .editorconfig .meteorignore 23:46 - How to keep your dot files in sync Hot Tip In MacOS, toggle dot files with “Shift + Cmd + .” Links Wes’ dot files repo Prettier 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

16 Juli 201825min

In this highly requested episode, Scott and Wes talk about design systems, what they are, why you may want or need one, how to use them, efficiency, best practices, and much 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:40 Design Systems 101 Wes’ Tweet about Design Systems 9:40 Organizational elements of design systems It’s all about consistency 23:07 Best tools for building design systems and style guides Figma Relay for Figma InVision Design Systems Manager Airbnb Lona Brad Frost’s Pattern Library uiengine 41:52 Where to learn more Links Guide to Design Systems by InVision Shopify’s Design System Mailchimp’s Voice and Tone Zendesk Garden Material Design Awesome Design Systems Design Systems Repo Design Systems Docz Facebook Yoga StorybookJS Stuart Clarke-Frisby Tweet Figma’s Platform Figma Styles and Prototyping Design Systems Newsletter ××× SIIIIICK ××× PIIIICKS ××× Scott: CalDigit TS3 Plus Wes: Picasso Tiles Shameless Plugs Scott’s Level 1 Electron 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

11 Juli 201856min

In this Hasty Treat (Short episode) Scott and Wes discuss user roles, what to think about when creating your own, security implications, etc. 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:30 How to manage user role systems 11:30 Client side best practices Don’t rely on front-end role systems as a security measure 14:13 Where to store your roles Start simple and get more complex as needed 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

9 Juli 201818min

It’s another potluck episode in which Wes and Scott talk about freelancing best practices, tips for working remotely, what they would do if they had to pick a different career, and much 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. Coffeecup’s CSS Grid Builder Tool — Sponsor Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid! Show Notes 4:48 How long should you stay with each job and/or company? 8:20 What is the best way to work remotely? Tips for remote working Have a dedicated space Clear on and off times Have a time for winding down Make specific TODO lists Use blocking software to help you stay focused Switch up the scenery / Work in different places 15:26 What are the trade-offs with using WordPress in a headless setup vs a tradition setup? 21:28 How do you deal with API credentials in React? 27:15 How do you keep an eye on performance with an app/site over the long-term? Check uptime Check the performance features in browser dev tools Use error checking software Host-based performance tools Newrelic pingdom LogRocket 34:28 What happened to Canvas after all the hype around HTML5 a few years ago? 40:15 How do you deal with analysis paralysis? Just get to work - you can always change things later Do research, but don’t let it get in the way of shipping 44:05 If you were forced to change your career (and it had to be something you’ve never done professionally in the past), what would it be? Wes: Some sort of buying and selling (eBay, Amazon, etc,) Example: Buying things at wholesale prices and selling them with a markup Scott: Could go a lot of different directions. Example: DJ, Snowboarding instructor, develop a video game that is a sequel to Cruis’n USA 50:14 As a freelance developer, what are some good questions to ask before taking on a client? Budget Scope Preferred communication methods How do you make money? What are the ultimate goals? Basically, ask as many questions as possible ××× SIIIIICK ××× PIIIICKS ××× Scott: Goodhertz Wes: Audiobook: Anything You Want by Derek Sivers Shameless Plugs Scott’s Level 1 Electron Course Wes’ Courses are all on sale 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

4 Juli 20181h 3min