2019 YEAR END Definitely Not a Clip Show

In this episode of Syntax, Scott and Wes talk about using React with Typescript — how to set it up, components, state, props, passing data, custom hooks, and 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. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Linode - Sponsor Whether you’re working on a personal project or managing enterprise infrastructure, you deserve simple, affordable, and accessible cloud computing solutions that allow you to take your project to the next level. Simplify your cloud infrastructure with Linode’s Linux virtual machines and develop, deploy, and scale your modern applications faster and easier. Get started on Linode today with a $100 in free credit for listeners of Syntax. You can find all the details at linode.com/syntax. Linode has 11 global data centers and provides 24/7/365 human support with no tiers or hand-offs regardless of your plan size. In addition to shared and dedicated compute instances, you can use your $100 in credit on S3-compatible object storage, Managed Kubernetes, and more. Visit linode.com/syntax and click on the “Create Free Account” button to get started. Show Notes 04:55 - Components Strategies Example: type Props = { value: string; } const App = (props: Props) => Return type? JSX.Element FC or FunctionComponent It’s discouraged for this reason: It means that all components accept children, even if they're not supposed to It could be useful for a return type 12:13 - Props Default props: const defaultJoke: JokeProps = { joke: 'LOL JOE', id: 'YEAH', status: 200, }; function JokeItem({ joke = defaultJoke }: JokeProps): JSX.Element { return ( {joke.joke} = {joke.id} ); } Because props are always destructured, you often have to make a new type for your props. You can’t just type each argument by itself. 18:38 - State Just like Generics, State can be inferred If your type is simple and you’re using useState, it just works: const [user, setUser] = useState(null); 22:27 - useEffect Nothing special required Good use of void: If you want to use a Promise function but not worry about await or .then(), you can pop a void in front of it: useEffect(() => { console.log('Mounted'); // getJoke().then(console.log).catch(console.error); void getJoke(); }, [getJoke]); 26:09 - Refs Very similar to state however some interesting things with null: const ref1 = useRef(null!); “Instantiating the ref with a current value of null but lying to TypeScript that it’s not null.” 29:33 - Custom Hooks This is a great use case for Tuples 31:00 - Context This is probably the most complex thing in this list First define the types Use generic to pass in types OR null This can also be non-null if you have default values in createContext: const AppCtx = React.createContext(null); 35:21 - Events The React events system is better than Vanilla JS Can handle them inline and have it inferred: onClick={e ⇒ yeah(e.target)} const onSetType = (e: React.ChangeEvent) => setType(e.target.value) React has a bunch of events built in — many of them take a Generic argument so you can specify the type of element that triggered it. Handy for native API methods like play and pause. 39:27 - ForwardRef Again use of to pass in forwarded ref type as param 1, Props types as param 2: type Props = { children: React.ReactNode; type: "submit" | "button" }; export type Ref = HTMLButtonElement; export const FancyButton = React.forwardRef((props, ref) => ( {props.children} )); 41:30 - ESLint Typescript-react is good Extend your own Most JS rules apply to TS 46:20 - React as Global React 17 Also add JSX: True to eslint globals for typing things like JSX.Element global.d.ts import * as react from "react" import * as react_dom from "react-dom" declare global { type React = typeof react type ReactDOM = typeof react_dom } 48:08 - TSConfig jsx: "react" React emit .js files with JSX changed Preserve .jsx file output React-native → .js files with jsx not changed 53:05 - Frameworks? Next.js makes this a TREAT Gatsby just use .tsx extensions https://www.gatsbyjs.com/plugins/gatsby-plugin-ts-config/ Links https://github.com/typescript-cheatsheets/react Tanner Linsley https://github.com/wesbos/eslint-config-wesbos Deno Architect https://fav.farm/ Snowpack Vite Parcel 2 Foam ××× SIIIIICK ××× PIIIICKS ××× Scott: Obsidian Wes: Folding Allen Keys Shameless Plugs Scott: 1: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! 2: SvelteKit Course Wes: Beginner Javascript Course - Use the coupon code ‘Syntax’ for $10 off! 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 Jun 20211h 12min

In this Hasty Treat, Scott and Wes talk about making money as a creator — how to do what you love, make money doing it, and not feel yucky about it! Deque - Sponsor Deque’s axe DevTools makes accessibility testing easy and doesn’t require special expertise. Find and fix issues while you code. Get started with a free trial of axe DevTools Pro at deque.com/syntax. No credit card needed. 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 logrocket.com/syntax. Show Notes 06:37 - Community supported Sell licenses Premium plugin Single payment $x per year Sell training Online In-person Sell support Donation-supported Patreon (usually has bonus content) Tips Open Collective Sell merch Teespring 16:00 - Corporation supported Display ads Sponsored segments Corporate sponsors Sponsored content Interesting collabs Stickers Links Syntax 330: React Query + More React with Tanner Linsley Syntax 340: Servers with Matt from Caddy Wes’ CSS Grid 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

31 Mai 202125min

In this episode of Syntax, Scott and Wes bike shed some common developer opinions. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. 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 logrocket.com/syntax. Mux - Sponsor Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time. Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you’re serving a few dozen streams or a few million. Visit mux.com/syntax. Show Notes 04:27 - Event params e, evt, ev, or event? 06:36 - CSS variables —red or —primary? 09:31 - CSS colors https://twitter.com/rem/status/1386694431710007298 RGB, HSL, HEX? 11:52 - Default exports vs named exports 14:45 - JavaScript import ordering 17:09 - Foo / Bar / Baz in examples 21:18 - Light vs dark themes 24:00 - longVerboseNamesDescribingWhatItIsOrDoes vs x 26:54 - VScode vs WebStorm (IDE) vs Vim 31:12 - TypeScript Generics: vs 34:39 - Indentation-base syntax https://twitter.com/LeahLundqvist/status/1386693374305095680 37:37 - Max line length 40:21 - One reduce, vs multiple .map()/flat(),filter() async function getStatus() { const res = await sendCommand('AT!GSTATUS'); const result = res.result .split('\n') .map((x: string) => x.split(`\t\t`)) .flat() .filter(Boolean) .map((x: string) => x.trim()) .map((x: string) => x.split(` \t`)) .flat() .filter((x: string) => x.includes(':')) .map((x: string) => x.split(`:`)) .map(([prop, val]: [string, string]) => [prop, val.trim()]) return Object.fromEntries(result); } 42:50 - index.js files https://twitter.com/sevilhelm/status/1386693971112562694 ComponentName.js vs ComponentName/index.js https://twitter.com/rleggos/status/1386694773021552641 48:20 - Ligatures and fancy fonts https://twitter.com/badsyntax/status/1386695010859507713 50:30 - Regular functions vs anon functions in a variable vs arrow functions function hey() {} const hey = function() {} const hey = () ⇒ {} 52:44 - Explicit return vs implicit return ××× SIIIIICK ××× PIIIICKS ××× Scott: Ego Mower Wes: Pass-Through Socket Set Shameless Plugs Scott: 1: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! 2: Github Actions with Brian Douglas Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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

26 Mai 20211h 3min

In this Hasty Treat, Scott and Wes talk about JavaScript’s drag and drop API — how it works, concerns, best practices, and more! .TECH Domains - Sponsor .TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 04:45 - What is it? Drag and drop is really for desktop apps You can drag and drop anything from any browser to any browser The important thing here is that this is a set of browser standards that allow different apps to communicate 07:50 - How to implement Make an element draggable Listen on elements for drag events The events bubble up, so you can listen on the parent element as items are added/removed 09:06 - DataTransfer API You can store anything you want in it getData / setData API Reference strings 11:35 - Accepting drops When you dragOver, you need to preventDefault() Calling the preventDefault() method during both a dragEnter and dragOver event will indicate that a drop is allowed at that location 13:01 - Drop Image Set whatever you want 16:00 - Drop Effect What does it look like when you drop it? Does it go back? dataTransfer.effectAllowed e.dataTransfer.setDragImage(nothing, 0, 0); 18:02 - Security concerns 20:34 - Shortcomings: Edge cases out the WAZOO Margin caused dragout events Lots of if statements It’s up to you to do EVERYTHING CSS, classes, hover styles, etc. Accessibility Inaccessible by default, unless using mouse keys Have to announce everything Mobile 26:14 - Lbs Transmat API Links Figma Notion Missive 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

24 Mai 202128min

In this episode of Syntax, Scott and Wes talk about HTML — interesting HTML elements, things you might not know, wish lists for the future, and more! Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Cloudinary - Sponsor Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations. Show Notes 02:34 - What is semantic HTML? What is the content? HTML should describe the content first and foremost. 04:04 - Why semantic HTML? Accessibility SEO Styling is easier HTML tags that have meaning: Almost all of them Common ones: / and to 20:04 - Structural / Layout tags You can have more than one header Header cannot be in a footer / address / header 26:18 - Some fun ones you might not know / and strike? / / A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. and While is used to convey how much work in a task has been completed, the element is used to display a measurement on a known scale. This could be something like the current disk usage on your computer, or a temperature measurement (within a defined range). 32:12 - Visual vs Semantic tags Almost all tags in HTML are semantic vs and vs and are NOT deprecated like many have said The element is for content that is of greater importance, while the element is used to draw attention to text without indicating that it's more important. 35:40 - HTML tags with no meaning: 37:51 - Some elements have special functionality or styling and tag + 40:59 - What elements would we like to see? Modal element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog Textarea that grows with content Animated accordion A better table One that works with grid/flex/modern CSS, auto-sizing, max/min widths From Twitter: VirtualList Carousel - HOT DRAMA Date range Hero tag that figured its level out by itself. Useful for components that can go anywhere Icon tag Cookie banner tag that shows HTML elements without encoding You can kinda do this with display block on script and style tags Links Sara Soueidan ××× SIIIIICK ××× PIIIICKS ××× Scott: Hat Washer Wes: Netflix's This is a Robbery Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code 'Syntax' for $10 off! 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

19 Mai 20211h 2min

In this Hasty Treat, Scott and Wes talk about the different kinds of things that are difficult to style, how you can style them, and some future tech to look out for! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. 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 logrocket.com/syntax. Show Notes Can it be styled? Solutions 04:28 - Just style the defaults Most elements can be styled, though some elements are really just multiple elements grouped together into the shadow dom and are hard to style. This leads to us having to re-create the visual UI, and often is a point of making inaccessible UIs. Select Input - number, date, etc. Very hard to style Often need appearance: none; for mobile Checkbox / Radio Generally speaking, these CSS Properties can be applied to all inputs: font-size color padding margin background / images outline (remember focus) border 08:20 - Overlap with more dom elements, set background images Checkbox / Radio / Toggle buttons Often used :before and :after along with labels — e.g. label + input:checked Select can have element overlap 14:13 - Re-implement the UI with JavaScript Video / Audio HUGE rabbit hole of things to code Very important to maintain accessibility 15:46 - Use a UI Library Bootstrap Foundation Ant Design Carbon Design Fast Lightning Design System Material Design Chakra 17:20 - Open UI Documenting all the different types of web UI controls https://open-ui.org/ https://twitter.com/stubbornella/status/1384889551924121605 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

17 Mai 202121min

It’s another Potluck! In this episode, Scott and Wes answer your questions about freelancing, climbing the corporate ladder, Throttling vs debounce, how to build skills with your free time, and 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. 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 logrocket.com/syntax. Vonage - Sponsor Vonage is a Cloud Communications platform that allows developers to integrate voice, video and messaging into their applications using their communication APIs. Whether you’re wanting to build video calls into your app, create a Facebook bot, or build applications on top of programmable phone numbers, you’ll have all the tools you need. Use promo code SYNTAX10 for €10 of free credit when signing up at vonage.dev/syntax. Show Notes 02:11 - I’ve read that when you start out freelancing, you should look to your area first to gauge the market for both rates, and type of work that is in demand. If you wanted to work remotely as a freelancer, however, is that really applicable advice? Is it viable to work 100% remote and not be tied to “local rates”? How can I leverage my years of professional experience when starting to freelance? A lot of material online speaks to those who are learning web development for the first time. But what does someone do if they’ve been working at big companies, who can’t share their work directly? What can I do to help prospective clients appreciate those years of experience? 06:02 - In your opinion, what is the accepted norm for the size of a component? It could be anything from a single element to a full page of content, but what is the norm for component size or content? Love the show, keep up the good work. 09:42 - I’m a bit confused about throttling and debounce. What is the difference between them? I have been finding different examples which are not at all helpful. 12:58 - My question is about climbing the company hierarchy. I’ve had a hard time getting my first job after graduation. I have dealt with the unemployment office, useless recruiters, trying to look important for companies, and I wonder if a get a low wage job at a company and then apply for their IT department after some time if there is a open position. Is it bad practice or good strategy taking this shortcut? Would they know what I’m trying to accomplish? 18:25 - I’m getting started building websites and find the initial design to be a challenge. I always end up diving into the coding and then spending hours getting lost tweaking CSS. The mediocrity of the final design is a masked technical challenge, and I emerge at the other end of the effort with something I’m still not happy with. I suspect there is some kind of mock up stage I’m forgoing, and I bet there are some tools to make it easier. I imagine that some kind of application that really focused me on the design and made it easy to tweak and tinker quickly would be ideal. Thoughts? What do you use? 23:34 - The company I work for works with a SOAP API. Currently I am developing a application in React but I am wondering whether it’s better to use the SOAP API or let them create a Rest API. Some people on the internet say that JS and SOAP combinations are not done. Is there some advice you can give me about this? 28:28 - Why are radio buttons called radio buttons? 30:49 - I am midway through a post-baccalaureate in computer science. I recently quit my job to focus on my second degree. Now I’m looking to spend my “extra time” on an area of focus that can hit as many of the following criteria as possible: Could make me money now Help me to hit the ground running when I graduate Get me a job easily Make me all kinds of cash Thoughts? 35:56 - What is your opinion on a Rust GraphQL server for web backend? Do you think it is better than Node.js? (not part of a question, just a comment: I found you yesterday and dude I have to say, you are legendary… I am 13 right now and also started web development when I was 12. I have been looking for a good web-development related podcast for about four months now. Looks like I found the one I needed ;) ) 39:57 - How would you go about introducing React into an existing big website with lots of legacy code and a template-based CMS behind? I can’t do a full rewrite but I would love to start turning little bits & pieces into a single-page-experience (e.g. checkout) to slowly modernize the site. The frontend is already TypeScript & SCSS but it’s an old self-made framework and the content coming from the CMS is mostly put into data-attributes or right into the HTML. I don’t really have an API for most of the content. How would React hook into the existing DOM in different places, loading data from the templates and potentially writing it back into the templates as well? 45:31 - What’s the best way to be able to host personal projects (frontend + backend) for free on the web? I would like something where I can SSH into to install for example Node.js and a database. I already bought a domain, but I don’t want to pay for some premium plan for now since I’m short on money and it’s for personal projects anyway. Links https://type-scale.com https://www.leveluptutorials.com/tutorials/modern-css-design-systems https://www.npmjs.com/package/soap Vercel Glitch Codepen Code Sandbox PM2 ××× SIIIIICK ××× PIIIICKS ××× Scott: Wyze Sprinkler Controller Wes: Retevis Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - Sign up for the year and save 25%! Wes: All Courses - Use the coupon code ‘Syntax’ for $10 off! 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

12 Mai 202159min

In this Hasty Treat, Scott and Wes talk about technical debt — what it is, why does it occur, and some techniques for reducing and avoiding it. Prismic - Sponsor Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax. Sentry - Sponsor If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up. Show Notes 03:17 - What is technical debt Outdated or hard to update code If you groan when you have to work on it, it might be a sign of technical debt Brittle code, easily breakable Quirks and features 06:55 - Why does it occur Over time, any garden left un-pruned will become overgrown Many people, many code styles Using hot new frameworks / techniques This is why seasoned developers don’t jump on new things You allow users to do literally anything 13:18 - Techniques for avoiding it Deny your FOMO of new things Abstract Write good tests Don’t put off refactors Update dependencies frequently Good standards Etsy has thousands of devs 20:08 - Examples in the real world Airline websites open in new windows all the time Cellphone carrier flashes the screen 100x 22:15 - Unfixable technical debt Agency work sometimes Links Next React Router TailwindCSS Redux Etsy Dave Ramsey 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 Mai 202128min