Syntax - Tasty Web Development Treats

In this Hasty Treat, Scott and Wes talk about cranky developers — those devs who never seem happy about anything, always mad about tech choices, and constantly writing off any new tech as simply a “fad” or unnecessary. 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 2:20 - How to deal with cranky devs Many experienced developers prefer older, stable technology for a reason. They have been through it before. 7:14 - Questions to ask when considering new tech: Is it better for the product? Is it better for the users? Is it better for the business? Is it better for the developer? 16:39 - How to convince them: Proof of concept - show them it’s better. 18:28 - Things to acknowledge: There are risks in changing technologies. There are costs - training, tooling, hosting. 21:20 - Some people are not interested in improving themselves They got the job they want and are short sighted about the future. You can appeal to management about making progressive choices. If management isn’t interested, you should look for a new job. Links Sass Backbone Babel Gulp Babel ES6 React for Beginners Missive Swix React Flux Glamorous PayPal GraphCool Facebook Netflix MJML Juice 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 Apr 201924min

It’s another live episode of Syntax in which Wes and Scott do Hook’d on Hooks, Who’s Snackin’ on React, Stump’d, Unpopular Opinions, Q & Eh, and more! 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”. The Armoury - Sponsor The Armoury is a men’s clothing and accessories retailer that provides some of the highest quality clothing you can buy. Designed for those of you who want the highest quality clothing that feels great and will last forever. Buy less, buy better. Follow them on Instagram @thearmourynyc and check out their website TheArmoury.com. Show Notes 6:54 - Who’s Snackin’ On React Guess which of these websites have their homepage partially or fully built in React? EltonJohn.com or ArianaGrande.com? Ferrari.com or Lamborghini.com? Starbucks.com or Dunkindonuts.com? WayFair.com or Ikea.com? Walgreens.com or Cvs.com? 10:55 - Hook’d on Hooks Wes: useSocket useStaticQuery (gatsby) useKeyPress Scott useLocalStorage useClickOutside useMeasure useGesture 17:47 - This, That, Both, or Neither? Gutenborg: A WordPress GUI plugin for creating react-based gutenberg blocks, or a 90’s budget TV show about Cyborgs who read? Nashorn: A Java based JavaScript engine developed by Oracle, or a popular rock climbing spot in Portland? Easy Peasy: A React state library, or children’s spoon set? Use Boxmen: A hooks library that gets box model dimension, or a puzzle-based strategy game for children? Toggs: A lightweight styleable toggle component, or rain resistant outdoor gear? Landwind: A set of React components for using the Tailwinds CSS Library, or a Chinese Knock-off Land Rover SUV? Freeflow: A redux-like state management library built on state, context and hooks, or a California-based hot tub company? Ubergrippen: A popular rock climbing spot in Denver, or a client-side video stabilization framework built on the filereader API? 26:22 - Tag Team Coding React Fetch Data from the data jokes API Show a loading indicator Have a button to fetch a new joke 36:24 - Stump’d What is a react PureComponent for? Why might you use a callback with setState? How would you reverse an array without mutating the original array? Can you explain what a “downtown job” is? When would you use useReducer? What makes useLayoutEffect different from useEffect? What propType would you use for an object that contains a number and a string 43:11 - Unpopular Opinions. Overrated, Underrated? Our own unpopular opinions Scott: React devs like to make things harder than they need to be. Dan Abramov Ryan Florence Sebastian Markbage Jared Palmer Sean Thomas Larkin Sergey Ryzhov Sophie Alpert Parker McMullin Vue does it better _____ 52:45 - Q + EH with Wes and Scott What where the first apps you worked on? What React problem stumped you for the longest time? What’s your most expensive mistake? Do we need classes in Javascript? How do you explain what you do to your mom? How do you explain React? What made you start wanting to code? What’s the hackiest thing you’ve ever done? Where do you see yourselves in 10 years? 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 Apr 20191h 6min

In this Hasty Treat, Scott and Wes talk about portfolios - best practices, organization, and how to use what people are looking for to stand out in the right ways. 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:21 - Include screenshots (or don’t). Often clients can ruin a site after you hand it off. 6:19 - Include list of technologies used 7:25 - Include list of problems solved 7:48 - Use company logos (if allowed) 9:13 - Show mockups on modern laptops/phones 10:04 - Show your work (mockups, sketches, layouts, etc.) 11:39 - Keep it updated 12:10 - You don’t need a million examples — max out somewhere around five. People just need a few quick examples of the type of stuff you work on. 14:11 - What about using side projects and tutorials? 16:28 - Dribbble, Github and Instagram are all valid portfolio options as well — often that is the first place people look. Don’t ignore these. A hot stuff profile on any of these will make you more hireable. Make sure it’s creative and looks nice. Links Wordpress Google Ford Air Canada Dribbble Github Instagram 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 Apr 201920min

It’s another potluck episode in which Wes and Scott answer your questions! This month - interview questions, headless CMSs, resume design, redux vs context, and more! 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”. 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:21 Q: Are there any tutorials you would recommend to learn more computer science related knowledge (algorithms, closures, etc.)? 5:12 Q: Do you have any suggestions for picking a headless CMS? 8:55 Q: Do you have any advice for someone in a customer service background seeking a more flexible job with remote work opportunities? Resources? Is this a realistic goal or a good way to approach my job search? 15:13 Q: How much importance would you place in the design of a resume? Is it worth the cost? 21:09 Q: With the new React Hooks and Context API, do we still need Redux? 25:37 Q: If either of you could change anything about your personal tech stack, what would it be and why? 29:07 Q: Do you prefer to use React’s defaultProps or plain JS default function parameters to give your component’s props some default values? 30:44 Q: You guys chat CMS sometimes - why no love for Umbraco? 35:53 Q: I’m ready for a new challenge, how do I break this to my employer? 38:16 Q: What’s the difference between const add = (a, b) => { return a + b } and function add (a, b) { return a + b }? Links Udacity Coursera Contentful Ghost Prismic Strapi HeadlessCMS Sanity WordPress Drupal ××× SIIIIICK ××× PIIIICKS ××× Scott: J.A. Henckels International 10-piece Capri Granitium Nonstick Cookware Set Wes: IRWIN VISE-GRIP 2078300 Self-Adjusting Wire Stripper, 8" Shameless Plugs Scott’s Gridsome Series Wes’ YouTube 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 Apr 201949min

In this Hasty Treat, Scott and Wes talk about bike shedding - issues that are hotly debated, but may not matter that much in the long run. 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 re-player and a performance monitor. Get 14 days free at https://logrocket.com/syntax. Show Notes 3:03 - What is Bike Shedding? Technical disputes over minor, marginal issues conducted while more serious ones are being overlooked. The implied image is of people arguing over what color to paint the bike shed while the house is not finished. 4:39 - Tabs vs spaces Two spaces 5:50 - Single vs double quotes Single in JS, double in HTML 7:05 - Semicolons or not Semicolons 9:01 - Grouping/ordering CSS properties Wes: Format Scott: Alphabetical 12:35 - var vs let vs const Scott: const for life — let when needed Wes: const by default — change to let when needed 14:24 - Default vs named exports Use both Mix-n-match 15:58 - Should designers code? If interested, sure 17:58 - Which front-end framework Whichever one best suits your needs 19:30 - Vim/Emacs vs Atom/VS Code/Sublime VS Code 21:53 - Small perf wins Micro optimization often aren’t needed 25:14 - Browser support If you’re required to support it, then support it 25:47 - Block formatting Function block Else on a new line vs else after block 29:07 - Trailing comma Links Law of Triviality React Vue.js AngularJS Ember.js Vim Emacs Atom Sublime VS Code 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 Apr 201930min

In this episode Wes and Scott talk about VueJS - what it is, how it compares to other frontend frameworks, and how to get the most out of it. 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”. Clubhouse - Sponsor Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntax and get your first two months free. Show Notes 2:22 - What’s the deal with VueJS? Combines ideas from Angular 1, React and Blaze Ease of Angular 1 App structure of React 8:02 - Components Template syntax is similar to handlebars aka {{stuff}} v-bind:property v-bind:property or simply :bind allows you to dynamically bind a value to a property Props Props must be declared before they can be used in a template. Script tag Where imports happen Where props are defined, computed properties, action events and lifecycle Actions v-on:click="doSomething" @click="doSomething" These will run a doSomething event defined in your script export via methods Lifecycle How does data fetching work? CSS Can be scoped to file by adding  to your property Global Registration You can register a global component and not have to import it 36:38 - Features CLI Easy to use when creating new projects Animations Baked in to core A transition component wraps your code and just have a v-if on the element you are transitioning There is also more intense javascript options via v-on Routing 1st party router vue-router with support for 3rd party routers Global State Vuex 45:57 - Ecosystem Nuxt — AKA Next.js for Vue Gridsome — AKA Gatsby for Vue Native? Links Angular React Blaze What Hooks Mean for Vue Nuxt.js Next.js Gridsome Gatsy NativeScript Vue Native ××× SIIIIICK ××× PIIIICKS ××× Wes: Modified Power Wheels Scott: Ezy Jeans by Uniqlo Shameless Plugs Wes: Node.js and React Scraper Tutorial Scott: Static Vue with Gridsome 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

27 Mar 201957min

In this Hasty Treat, Scott and Wes talk about frontend frameworks — what they are, when you need one, how to organize your code for maximum efficiency, and more! Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm. Show Notes 3:08 - What is a frontend framework? JavaScript based Controls applications such as: Routing Rendering Data Fetching Examples: React Angular VueJS Ember Backbone Svelte 5:54 - When to use a frontend framework The Link between your JavaScript data and the DOM (your HTML) isn’t live The use of frameworks makes re-updating the DOM (after the initial variable update) easy You need an opinionated way to handle complexity Example: You add an item to a shopping cart, send the event to the backend, and update both the number of items in the cart and the “Add to cart” button Event Handlers - binding and un-binding Your client wants a fast, modern experience Seamless routing and page transitions Fast prototyping Access to battle-tested libraries Security Perf 14:24 - When not to use a frontend framework When using CMS like WordPress and Drupal A medium amount of JavaScript is needed - Vanilla JS will work fine Modals Slideshows Form submits Static pages, no JS functionality Updating an existing project 17:20 - Why can’t I just use jQuery? Vanilla JS contains all of jQuery’s available DOM APIs Frameworks provide structure Organizes code for big projects Links Syntax 039: Is jQuery Dead? 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 Mar 201920min

In this episode Wes and Scott talk about how to find freelance clients — tangible things you can do to position yourself and set yourself up for success. Stackbit - Sponsor Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm. 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 1:27 - Question from Andreas Trattner: I am a backend developer with 4+ years experience working on large systems in Europe and am considering moving toward freelancing/contracting. However, I find it difficult to discover quality opportunities. Any tips you can share on how to strategically get projects? There isn’t a secret trove of work, and there’s no one way to do it. 4:50 - Relationships Trust and relationships rule all. The best paying gigs are never advertised. Who should you know? Other developers How? Meetups, Conferences, Twitter, Slack rooms, Friends Tip: Volunteering is a great way to get in to conferences, plus you often get to know people Tip: If you are friends of a friend who gets a lot of work, as for a introduction Designers and marketers You usually work together How? Twitter, Email, Dribbble, Instagram Project managers How? Cold emails, tweets Office managers Life blood of the office - they know everyone Often move into other roles How? Meetups, previous employees Entrepreneurs Lots of connections, often switching gears How? Demo camps, Facebook marketing groups Venture capitalists Have dozens of companies and tons of connections How? Demo camps, introductions, cold email 19:08 - Display of expertise It certainly is an option to just be really freaking good at what you do Speaking at conferences and local meetups Working on open source Helping in chat rooms Posting guides Maintaining docs Offering reviews / Make things public Performance - Harry Roberts from CSS Wizardry Accessibility - HeydonWorks WordPress speed React checking Start a podcast Blogging Volunteering 9:22 - Visibility You need to let everyone know what you do. Your mom’s uncle’s friend’s cousin on Facebook might casually ask for recommendations. Instagram / Photos. Showing people what you are doing and what you are working on will make a mental note in their head that you do that type of work. Facebook / Twitter / Instagram Blogging This makes the “vetting” process much easier Tweeting YouTube videos Slack channels you are involved in 38:02 - Other tactics SEO - Locality (Toronto designer), specific technologies (Redux contractor) Craigslist This one sucks, but it can lead to decent work occasionally You need to be more vigilant in screening, most clients will suck Cold asks - Just ask people what works well “Hey, I’m looking to book a few contracts starting June 2019. I love working with ______ and you can see my work here” Put a phone number on your website. Seriously. UpWork Won’t make as much money here because of competition Local business listings Find online and offline biz listings Old fashioned — putting your card on bulletin boards 47:29 - Maintaining Relationships Check in every few months with non-biz related contact But also just straight up ask for work Christmas / Thank-you gifts Links Canadian Couch Potato ××× SIIIIICK ××× PIIIICKS ××× Scott: Google Drive Scanner Wes: Endy Mattress Shameless Plugs Scott’s React Hooks For Everyone Wes’ All 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 Mar 20191h