948: Zed is Ready For Primetime

In this Hasty Treat, Scott and Wes tackle email, specifically, how to email busy people — how to write emails that actually get read, and don’t just get tossed in the archive. 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:05 Subject lines 11:26 The body 14:33 Best practices 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 Helmi 201923min

It’s another potluck episode in which Wes and Scott answer your questions! This month - organizing your Git repos, the difference between freelancing and contracting, changing careers, how to deal with spammers and more! 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. Techmeme Ride Home Podcast From Techmeme.com, Silicon Valley’s most-read news source, The Techmeme Ride Home podcast is a short daily podcast about the day’s tech news. Mark Zuckerberg called Techmeme the one news source he definitely follows. New episodes are published every day at 5p.m. You can check out the show here, or search for “Techmeme Ride Home” in your favorite podcast player. Show Notes 1:55 Q: Do you prefer to have your backend and frontend in separate Git repos or together? What are the trade-offs? 5:12 Q: In web dev, what’s the difference between a freelancer and independent contractor? 9:45 Q: Default export vs named export? 11:35 Q: I’m looking to change careers, but I’m 41 this year. Is it too late? 16:12 Q: Have you guys made much use of multicolumn layout? If so, only for text, or have you come up with (or seen elsewhere) any interesting out-of-the-box uses? 20:11 Q: Since you publish your courses’ source code on Github, what do you think about people using that to learn instead of buying your course? Is it an intentional decision, or is it a compromise you’re willing to make? 23:52 Q: When is a certification needed for both jobs and side-projects? 29:35 How do you deal with spammers filling out forms? 34:05 Q: Could you better explain what a slug is? I’ve heard the term thrown around on a number of your episodes, but I don’t really know what it means. 37:44 Q: I am currently going through some currency conversion stuff for a project, what would you recommend to use for international conversions? Links Sanity Techmeme Ride Home Podcast Concurrently Rachel Andrew CSS Grid auto height of elements? Cloudflare Intl.NumberFormat ××× SIIIIICK ××× PIIIICKS ××× Scott: Voxon Screwdriver Set Wes: Technology Connections Shameless Plugs Scott’s Level Up 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

6 Helmi 201950min

In this Hasty Treat, Scott and Wes continue their discussion about code quality tooling - how to get your code extra nice and clean, and the tools that will help you along the way. 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 at https://logrocket.com/syntax. Show Notes 2:28 Typescript and Types 5:42 Jest and Testing 7:48 Exceptions & Error Tracking Links Sentry Log Rocket Rollbar Jest 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 Helmi 201913min

In this episode Scott and Wes continue their discussion about the freelance client lifecycle—from design and development, to project hand-off, and everything in between. 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. 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 1:47 - Design Collect all assets from your client Logo Brand guidelines List of likes and dislikes Create initial look and feel Don’t show client too early—they can be distracted by little unfinished things Back up the “whys” of what you did. Otherwise, it’s just a pretty picture and and the client only thinks about it in terms of taste. Remember, you are the expert they hired, so it’s not totally subjective—you have the expertise and you need to flex that. This button is teal because it’s your call to action—this is the button that makes you money so we want to highlight that Grey text on white background is hard to read—you’ll be leaving people out if you do this. When possible, draw circles or golden ratio lines around everything ;) Be prepared for non-standard feedback E.g. this feels cloudy, can it look more sunny? Please make it pop, etc. Don’t get offended by feedback on creative work Clients didn’t go to art school and don’t know about good feedback. Clients will ignore all finished aspects of a design and only focus on the one minor thing that’s incorrect. Revisions 17:58 - Development Clear requirements make development much easier. Sometimes this starts at the same time or in the process of design. Only show dev progress if client is capable of understanding dev process. Showing a developed site too early can cause clients to worry about visual aspects that aren’t yet in line with the design. Showing to early is also a recipe for a feedback list of things you already know. Give regular progress updates, as previously established. Make it happen on a schedule so expectations are set and so you won’t forget. Stick to your timeline! Clients don’t care about technical jargon. Don’t tell clients about Gatsby/React as much as telling them about the benefits, how fast the site is, etc. 23:48 - Feedback and revisions Feedback is done in revisions or rounds. For smaller projects, have your client email (one email) a list of feedback. For larger projects, and more technical clients, use bug tracking software, such as Github issues, Trello, etc. Write down everything, and then have a follow-up call to discuss the feedback. 30:08 - Deployment Get your client to pay for domains and hosting. Make sure their old website has everything off of it, or host the website somewhere else. If you’re moving servers, best to just point the A records at the new server. If changing nameservers for DNS, make sure the client doesn’t have email or any other apps on that server that will be nuked or broken when moving. Many clients use their server to uploaded PDFs and other files that may still need to be accessible. If you are changing URL structure, you’ll need to be aware of any redirects. Backup strategies Restoration strategies 40:05 - Handoff Create a video detailing how to do each thing Don’t give more options than they need in the back end. Do in-person training when possible. Only teach them the things that are important for their day to day usage. 44:28 - Bug fixes and support Very common for clients with wrong idea of project guidelines to want to add on at the end of a project. Not about adding new, non-established features. Emergency bugs require an emergency response if they are your fault Set expectations and be careful what you promise. 48:03 - What to do when things go to shit There should be a trail of communication leading up to things going awry. Project is behind. Product is not met with acceptance. Client isn’t paying. When to fire your client. Links Syntax 112: The Freelance Client Lifecycle - Part 1 Syntax 088: Pre-launch Checklist ××× SIIIIICK ××× PIIIICKS ××× Scott: Synology 4 bay NAS DiskStation DS918+ Wes: Backblaze Shameless Plugs Scott’s Level Up Pro 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

30 Tammi 20191h 2min

In this Hasty Treat, Scott and Wes talk about code quality tooling - how to get your code extra nice and clean, and the tools that will help you along the way. 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:11 - ESLint / JSHint / Linters in general Eslint took over as a flexible solution for code style and quality Use plugins and presets to set your rules for different types of project Don’t be afraid to tweak rules, they are not the word of god 10:55 - Prettier Strictly formatting Can work with or without ESLint Provides an enforceable standard for teams Configurable Prettier for CSS, PHP, GraphQL, etc. 18:46 - VS Code Red underlines like spellcheck for code Tooltip for lint errors Fix on save vs fix on command Links ESLint JSHint Prettier Wes’ dotfiles 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

28 Tammi 201926min

In this episode Scott and Wes talk about the freelance client lifecycle—from gathering requirements, to project hand-off, and everything in between. Techmeme Ride Home Podcast From Techmeme.com, Silicon Valley’s most-read news source, The Techmeme Ride Home podcast is a short daily podcast about the day’s tech news. Mark Zuckerberg called Techmeme the one news source he definitely follows. New episodes are published every day at 5p.m. You can check out the show here, or search for “Techmeme Ride Home” in your favorite podcast player. 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 at https://logrocket.com/syntax. Show Notes 03:29 - Gathering Requirements Probably the most important part of the process. If you botch this, you’ll be dealing with change orders and scope-creep throughout the entire project. Poor planning is why agencies have project managers and why many freelancers hate their clients. Ask lots of questions Get lots of examples Break down each page into functionality Ask about budget Clarify who will be updating the site Do this in person if possible 17:00 - Quote Figuring out the quote Break it down into major functional areas that don’t necessarily depend on each other. Multi-staged quotes are great because if it’s too expensive, the client knows they can add additional features later in the project. Explain the tech you will use in relation to how it will help their business, or how easy it will be for them to manage. Presenting the quote List what will be included List what won’t be included Make your quote valid for two weeks Create a template that looks professional Our agency had a professional template, printed on heavy paper in an embossed folder with our logo on it. You don’t have to go this far, but experience matters. Think Apple. You can quote more if you have a higher perception of quality. 30:20 - Timelines Timelines should include hard dates. You should have a “hard on” and and “hard off”. Assume 24-hour turnaround on questions Be generous with your estimates. Under promise, over deliver. Quoting time is a huge skill 35:58 - Contract You best have one Spell out what the client is getting (from quote) At the very least, have the client sign your quote Clear communication and a good relationship is extremely important Use online templates, or have a lawyer create something specific 41:09 - Setting Expectations Don’t make yourself available 24/7 Establish a professional environment by not being too casual Your choices will set the course for your relationship Don’t be too quick to reply to email Schedule emails for 10a.m. Links Syntax 036: Hasty Treat - Freelancing Hot Tips docracy Boomerang for Gmail ××× SIIIIICK ××× PIIIICKS ××× Scott: The Great Suspender Wes: Food Busker YouTube Channel Shameless Plugs Scott’s Level 1 Styled Components 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

23 Tammi 201953min

In this Hasty Treat, Scott and Wes talk about tidying up your code - why it’s important and how it can make your (dev) life better. 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:24 - Removal Unneeded comments Unused CSS Unused Functions 8:06 - Organizing A system that works for you Know when to break things out into a new file, components, functions otherwise Index file works sometimes - other times it’s too much work 11:45 - Tiding Up Refactoring bad/old code Non-ironically, does this code spark joy? Unused Functions Add in comments Folding - use a code formatter CSS Links Tidying Up with Marie Kondo Better Comments VS Code Prettier ESLint Nicole Sullivan - Object Oriented CSS 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

21 Tammi 201921min

In this episode Scott and Wes talk about work life balance. These tips aren’t hard-and-fast - part of the beauty of being a web developer is that you do get to enjoy some flexibility. Work is a big part of our live and these are tips that will hopefully allow you to get the most enjoyment out of both work and life.   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.   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 8:06 - Know when you work best The 9-5 isn’t for everyone - you know when you work best, so use that to your advantage 9:39 - Work when it’s time to work, life when it’s time to life Don’t do laundry during work time 11:08 - Make it clear to family members when you are working Wishy-washy in-between can cause tension - are you working? Can I interrupt you? Working after hours Text if you need me 14:34 - Have a defined space for work If I bring my laptop downstairs, I don’t bring a charger Clean yo nasty desk space It’s a mental shift when you sit down - “okay now I am working” 21:14 - Know how to “zone it” Headphones Music or podcasts Block all distractions Close email Pay attention to what gets you there, when it stops working, change it up 24:46 - Keep hobbies Away from screens Physical or relaxing or both 26:37 - Exercise Good for mind and body Huge gains long term and short term 27:31 - Prioritize your to-do list One reason many people over-work is that they feel they have too much to do Add items to your to-do list when they pop into your head - out of your head, into your system 31:28 - Walk away from difficult problems Your brain will chew on problems as time goes on and help you solve them Literally take a walk outside 34:04 - Meetups, conferences or tutorials Reinvigorate your hunger for coding and make you happier both at home and work Easy to get burned out from working too much (or not paying enough attention to your work) Links Wes’ Head Bob Spotify playlist Portable Text from Sanity Portable Text Forget about Gutenberg, no seriously What you need to know about block text ××× SIIIIICK ××× PIIIICKS ××× Scott 1: Todoist Scott 2: Notion Wes: PassSource Shameless Plugs Scott’s Level Up Tutorials 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

16 Tammi 201944min