Dealing With Email Overload && Prettier Setups

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

In this Hasty Treat (Short episode) Scott and Wes discus all things domains. Where to get them, how to set them up and how to safe time managing them all in one place. 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 What is a domain? 4:59 What is DNS? 6:00 Nameservers 8:30 What is a DNS provider? DNS Simple Cloudflare Hover Name Domainr iwantmyname 13:30 Different types of DNS records 17:00 Different kinds of domains .com, .tv, .io, etc. 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

2 Juli 201827min

Scott and Wes talk about marketing. Specifically how to do marketing if you’re a developer wondering where to start. 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. LogRocket - 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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax Show Notes 7:58 - Personal Branding Build trust and reciprocity Be authentic to yourself and let that carry through in your work. Have the guts to put yourself out there and establish yourself as an expert. Speak at conferences Write blog posts Make YouTube videos Be on podcasts Start your own podcast 14:50 - Running a Business Treat people well. Reward your customers. Don’t punish your users. Have a refund policy. 19:26 - Social Media Don’t push people off a platform. Bring content to them that is tailored for that platform. Get in early, before the platform becomes super crowded. YouTube Quality content through quantity. Write good SEO titles. Tease your paid content or create a free one-off. Don’t expect to make a lot of money, but it can be great for growing a brand. Twitter Be helpful - small, digestible tips and tricks and great for growing a Twitter following. Quality is still the key. Steve Schoger is a great example of consistent, high quality content. Facebook People have other interests besides web development. People like to see into your life. Use Facebook to give people a window into who you are. Reddit Reddit is really difficult. It’s easy to get banned. The best strategy is to not focus on marketing and just try to be helpful. It’s sort of replaced forums and is a great place to build communities around different hobbies. Instagram Recently IG has been blowing up for web developers. Dhanish is a perfect example of how to do Instagram well. 49:55 - Paid Advertising Don’t be sleazy. Ads are good for getting likes and driving some traffic to something, but it takes experimentation to get the best bang for you buck. 54:40 - Email marketing Wes: Email is probably responsible for most of my sales. Keeps people up to date and helpful for promoting new courses. Helpful for figuring out what people want. 59:17 - Partnerships A lot of companies want to partner rather than just sponsor. It can be a great way to fund the creation of products/courses. Affiliate programs are great when they work out. 67:30 - Freebies Giving away free content is a surefire way to get people to pay attention. It’s about giving back to the community as much as marketing your products. ××× SIIIIICK ××× PIIIICKS ××× Scott: Cypress: End to end testing Wes: Audiobook: Own the Day, Own Your Life Shameless Plugs Scott’s New Electron Course Wes’ Advanced React and GraphQL 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

27 Juni 20181h 18min

It’s a workflow extravaganza! Scott and Wes talk about their development workflows, covering everything from design to deployment. Coffeecup’s CSS Grid Builder Tool Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid! VueSchool.io's Vue.js Masterclass 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. Show Notes 4:00 - Design Workflow Wes: Screenshots of look + feels Sketch layouts out in pencil Mock up layout in Sketch Once rough layout is done, I refine Once I have: colors, type, patterns, textures and overall layout, I move to code. A design program is important to vs designing in code Scott Mirrored component structure in Figma Using Ideas from Atomic design and React components Goal is for Figma components to be 100% mapped to styled components Flexible and testable in different layouts My design philosophy is refinement through iteration Light theft Footer from Pitchfork New card animation idea from Patagonia 15:55 - Design to Dev Workflow Wes: Happy with design so far Setup tooling - styled components, stylus, sass… Setup type, variables, partials, resets… Do as much HTML as possible before styling CSS it up for layouts, then go section by section Broad first, then zoom in on finesse Browsersync / Hot Reload Test across browsers / Devices Scott: Define parameters in Figma Styled components in React, hand write that CSS bruh Move aspects of styled components lib like breakpoints, colors, functions, helpers, base components 32:06 - Git Workflow Wes: Tear off a branch - name after issue - DEV113 Do your work Rebase Squash Pull Request Rinse + Repeat Scott Master branch is 1-1 with live Develop is where work is done (but not really because I make a feature branch for each feature and merge in) Contributors issue pull requests into develop 42:34 - Deployment Workflow Scott: Hosted on Meteor Galaxy, container based hosting Develop is merged into master, all tests run, if everything passes tests and manual check, I deploy to Galaxy via NPM script. Soon I’ll be adding in automated test running & auto deploy to galaxy on push to master. Secrets are kept in a settings.json file that’s used during deployment. Wes: Codeship DeployHQ Git Rsync Dealing with secrets 49:53 - Project Folder Structure Wes: Folder Structure - 0100, 0101… Scott: API UI element -> styled components with index Startup Utilities Links BNO Train Wreck Album Atomic Design Guide Design Systems BrowserSync FontSquirrel fontplop Creative Market Delicious Brain’s WP Migrate DB Pro Ryan Dahl - 10 Things I Regret About Node.js ××× SIIIIICK ××× PIIIICKS ××× Scott: Overcooked - Nintendo Switch Wes: SkyRoam Solis Shameless Plugs Scott’s Level 2 React 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

20 Juni 20181h 6min

Scott and Wes dive into the ins and outs, best practices and tasty tidbits of Progressive Web Apps. 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. LogRocket - 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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax Show Notes 2:00 What’s the deal with the GitHub / Microsoft acquisition? 6:05 What is a Progressive Web App? 8:55 - Progressive Web App Checklist What are the baseline features for a Progressive Web App? 09:25 Site is served over HTTPS Let’s Encrypt 11:05 Pages are responsive on tablets & mobile devices 11:35 All app URLs load while offline Use a Service Worker 16:35 Metadata provided for Add to Home screen 18:40 First load fast even on 3G 20:00 Site works cross-browser 20:15 Page transitions don’t feel like they block on the network 22:20 Each page has a URL What makes an exemplary Progressive Web App? 27:42 All content is indexed by Google 28:38 Schema.org metadata is provided where appropriate Social metadata is provided where appropriate 29:42 Canonical URLs are provided when necessary User experience 31:43 Content doesn’t jump as the page loads Scott’s Pro Gatsby Course 36:52 Pressing back from a detail page retains scroll position on the previous list page 37:34 When tapped, inputs aren’t obscured by the on screen keyboard The Best of the rest 38:22 Content is easily shareable Site is responsive Any app install prompts are not used excessively The Add to Home Screen prompt is intercepted 39:20 Use cache-first networking Device APIs 40:34 Web RTC Get User Media 41:50 Push API 45:12 Accelerometer GPS 45:55 Payment Request API 47:12 Local Storage 48:03 IndexedDB 48:35 StorageManager 51:45 Vibration API 52:58 Use Lighthouse to improve the quality of your web apps ××× SIIIIICK ××× PIIIICKS ××× Scott: myNoise Wes: Ozark Trail Drinkware Shameless Plugs Scott’s Level 2 React 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

13 Juni 201859min

It’s a Potluck episode - you bring the questions and we turn them into tasty treats. 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 Check out Coffeecup’s CSS Grid.cc builder tool and resources to learn, prototype and build next gen layouts with CSS Grid! Show Notes 2:15 What’s the best resource for staying up to date with Javascript? 3:48 How do you stay motivated if you don’t like your current project? 7:08 What’s your favorite music to work to? 11:10 In what order should developers learn tools related to GraphQL? 13:48 As a JS developer, is it a good idea to learn other languages like PHP or Python? 19:55 As a CS undergrad, what can you do in terms of programming that could be a great benefit after graduation? 23:14 Should you be concerned about SEO when using JS frameworks like React? 28:17 How can you build your network when you’re too tired or busy to go to a bunch of meetups? 32:55 How do you come up with such good designs and UI for your courses? 36:37 As more websites move to secure connections, where can a noob learn the basics of https, SSL certificates, how to deploy a secure website, etc.? 43:05 Have you had experience working for large companies and how does it compare to smaller companies and/or freelancing? 47:30 What are other programming podcasts you listen to? ××× SIIIIICK ××× PIIIICKS ××× Wes: SpikeBall / Slammo Scott: Stance Shameless Plugs Scott’s Level 2 React 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

6 Juni 20181h

Scott and Wes are back with another round of tips, tricks and tasty treats for their favorite code editor, VS Code. LogRocket - 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 replayer and a performance monitor. Get 14 days free over at https://logrocket.com/syntax Show Notes 01:45 Why Scott and Wes use VS Code vs all the other options Stay up to date with all releases 06:05 - Favorite new updates Notification API Auto Import Listing errors in the file explorer Column Selection Interface Customization Hot Tip: Anytime you find yourself using your mouse, there’s likely a shortcut key for what you’re trying to do React Snippets Library Wes’ VS Code settings Visual Studio Live Share 27:40 - Favorite/New Extensions Bracket Pair Colorizer Rainbow Brackets Auto Rename Tag Better Comments Jest Snapshot Tools JS Refactor Import Cost Polacode Carbon - An alternative way to share beautiful images of your source code 38:49 - Themes LevelUp Official Night Owl Cobalt2 40:35 - Tips and Tricks Learn how to jump and select by letter, word, line, etc. Move a line (or Line Bubbling) - Use this for rearranging and/or moving lines of code quickly. Cycling through multiple windows of the same app - If you have multiple VS Code windows open, “Cmd + backtick” will cycle through them, so you don’t have to drag them in and out of view. Adjust MacOS keyboard settings - change Key Repeat to “fast” and Delay Until Repeat to “short”. This will make your editor super fast when holding down arrow keys. Use Git features Git History Spell Checker - “Cmd + .” will open up code actions and you check for possible misspellings, etc. Code Spell Checker Rename Symbol - Much more reliable than find/replace. Sort Lines Select everything between quotes - (Cmd + Shift + Space) 57:25 - Things that could be improved Region folding is inconsistent and sometimes doesn’t work at all. No easy way to tell which extension is causing CPU performance issues. Sidebar indentation isn’t clear. ××× SIIIIICK ××× PIIIICKS ××× Wes: Melnor 4-Zone Digital Water Timer Scott: Tosowoong Enzyme face cleanser Shameless Plugs Scott’s Intermediate React Series Wes’ All Course Secret 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

30 Maj 20181h 8min

Scott and Wes detail the tips and tools you need to get better at debugging. 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 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:00 Read the stack trace 7:35 Make sure you aren’t debugging production Make sure you’re not cached 8:40 Check the network panel for the whole response CORS (Cross-Origin Resource Sharing) 12:04 Use debugger commands in the browser Set breakpoints (race conditions 13:40 Use Source Maps 15:29 Make full use of all console methods console.group/groupEnd/info/ console.log({objNAme}) 17:02 View your code in other browers Make sure your browser is up to date 18:50 Step into and step over function Useful for especially tricky issues 19:47 Look into Scope in dev tools panel 20:33 Recreate it in CodePen or Create React App Helps to quarantine your code Verify where the problem actually is 24:12 Take a break Helps clear your head and approach your problem from a different angle 25:40 Rubber Duck Debugging Forcing yourself to talk it out will often reveal problems/issues 26:40 Check Github issues / ask in Slack Leave your solution in the comments for others 28:12 Use Node --inspect flag 29:57 Read the code in your libs (if you can) 32:34 - Chrome Dev Tools Tabs Rundown 33:10 - Network tab 34:15 - Preformance tab 35:58 - Lesser known tools 36:15 - Firefox Grid Debug 36:20 - Firefox Fonts tab 37:10 - More tools (three dots menu in top right of Chrome Dev Tools window) 37:39 - Chrome Animations Inspector 38:34 - /dev tips & Modern DevTools Course 39:41 - Chrome & FF Layers for 3d and full view of canvas & window 40:51 - Sensors for overriding fake devices sensors Hot tip: Use Instagram on the desktop - Go to Instagram and set the user agent to iPad and it will work as it does on that actual device Hot tip: Get free internet on a plane - If the airplane offers free internet for a certain device, change your user agent to that device and then switch back 43:12 - Favorite DevTools extensions Apollo React Redux Vue Lighthouse JSON Formatter 44:06 - Application/Storage tab 44:41 - FireFox Grid Inspector ××× SIIIIICK ××× PIIIICKS ××× Scott: Hotel Tonight App Wes: Coffee table - If you’re trying to build an outdoor coffee table, use a peice of granite Shameless Plugs Scott’s Level 2 React Course coming out THIS WEEK! - subscribe and be notified when it’s released Wes’ Courses - Advanced React course coming soon - subscribe to be notified when it’s released 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 Maj 201856min