2019 YEAR END Definitely Not a Clip Show

2019 YEAR END Definitely Not a Clip Show

In this episode of Syntax, Scott and Wes do a 2019 year in review — the most popular Syntax episodes, what they learned, some personal updates, plans for next year, 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. 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:40 - Plans for 2020 Syntax Live March 2019 Plans for 2020 Twitter has done really well for @syntaxfm Community feels great 9:20 - Top 10 Syntax episodes of 2019 Syntax162: The Fundamentals - JS Syntax120: Gatsby vs Next Syntax158: The Fundamentals - HTML + CSS Syntax126: Bootcamps vs School vs Self-Learning Syntax138: What’s New in Web Development Syntax130: The VueJS Show (Scott teaches Wes) Syntax146: CSS the Cool Parts Syntax174: How to Build an API Syntax154: SVGs with Sara Soueidan Syntax106: A Look Forward to 2019 25:17 - Personal stuff Scott Brooklyn Tolinksi 2019 was really tough for me Level Up courses for 12 months Huge changes to my production values and office Huge changes to LUT codebase (React hooks, Typescript, Next.js, Mongoose) Wes New Baby in June / 3 months Paternity Leave Bought a cottage Hardest course to make was Beginner JS — it was a slog, hard to stay motivated at times, with 80 hours of recording alone Course Platform re-write (Next.js) 39:17 - Stuff we learned Scott Better speaker Lots of TypeScript Better debugging Hooks Svelte General improvement in JS writing and programming skills Wes Really good at Vanilla.js DOM API React Hooks Suspense Audio Visualization Shape Detection API - Faces, Barcodes, Text Headless CMS: Prismic, Sanity, WordPress GraphQL, Keystone.js, Hasura Very good understanding of the nitty gritty of JS (closures, objects, this, new keyword, classes, etc.) Links Reactathon freeCodeCamp Podcast CSS Houdini Syntax109: Hasty Treat - CSS Grid Level 2 aka Subgrid Syntax092: React Hooks Dev Mugs TypeScript Svelte Prismic Sanity WPGraphQL Keystone.js Hasura ××× SIIIIICK ××× PIIIICKS ××× Scott: The Dream Podcast Wes: Synology DiskStation DS918+ Shameless Plugs Scott: React & TypeScript For Everyone - Sign up for the year and save 25%! Wes: Beginner Javascript - 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

Avsnitt(960)

Hasty Treat - Desktop Apps + New Tech We Love

Hasty Treat - Desktop Apps + New Tech We Love

In this Hasty Treat, Scott and Wes talk about the hottest new tech they love! 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. 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:30 - Lucy Language https://lucylang.org/ A concise language for describing Finite State Machines 06:10 - MDSvex https://github.com/pngwn/MDsveX Mdx for Svelte Smartypants options transforms ASCII punctuation into fancy typographic punctuation HTML entities https://github.com/rehypejs/awesome-rehype 09:56 - RECut https://getrecut.com/ 12:26 - Fig https://fig.io/ It’s an app you install on your computer, it adds autocomplete to your terminal Works with most popular terminals Autocompletes git commands NPM commands + tons more - npm install ___ works Adds descriptions of what each command does Mac only - again another reason why Mac is best! Themeable Why not use Fish/ZSH? This isn’t a replacement for anything, it’s just autocomplete on top These fish plugins are to vim, as Fig is to VS Code Better UI is KEY 15:56 - Warp https://www.warp.dev/ Rust-based termnial Very fast Extensions and themes Share commands and sessions Great for remote server dev Share terminal state - with share links 19:33 - Raycast https://www.raycast.com/ App launcher File Finder Workflow runner Everyone is asking why is it better than Alfred better UI Better outputs math Better defaults - currency conversion Fast as hell Better integrations More Flexible 21:26 - Table Plus https://tableplus.com/ Fantastic little DB tool 23:59 - Obsidian Update https://obsidian.md/ Wes: I haven’t got into it - find myself still going back to VS Code 26:50 - Descript Update https://www.descript.com/ All-in-one audio and video editing, like a doc Links https://chriscoyier.net/ https://hyper.is/ https://www.alfredapp.com/ https://strapi.io/ https://studio3t.com/ https://www.mindnode.com/ https://remarkable.com/ https://www.notion.so/ https://joplinapp.org/ http://www.telestream.net/screenflow/overview.htm https://shinywhitebox.com/ 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 Sep 202132min

From React To SvelteKit

From React To SvelteKit

In this episode of Syntax, Scott talks with Wes about moving Level Up Tutorials from React to SvelteKit — why he did it, how, benefits, things to watch out for, 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 07:28 - Thoughts Apples to oranges, so unfortunately, no super legit ability to compare. SvelteKit isn’t analogous with a custom React setup that uses CSR SSR is usually going to be faster - we can ship less JS Some big things changed beyond React → SvelteKit Apollo → GFetch Plyr → Vime HLS starts grabbing chunks immediately, so it’s hard to get accurate load time and transfer. Whole conversion took a couple of months. Hardest part was making UI choices and changes, straight up converting components one by one wasn’t actually that tough 16:14 - Converting React components to Svelte useState becomes just a straight-up variable Graphql calls were hooks now just imported generated functions Remove extranous fragments Convert {things && } to {#if thing}{/if}  becomes  24:06 - Spark joys State Our checkout flow became way more transparent, way easier with Svelte stores Render flow Was never something we needed to really think about. Didn’t think about memoizing, or worrying about too many renders down the line, just never needed to Overall developer experience It’s honestly a joy to work in and I don’t want to go back Making a library Package dir, new SvelteKit project, svelte-kit package I made svelte-toy - https://github.com/leveluptuts/svelte-toy svelte-element-query - https://github.com/leveluptuts/Svelte-Element-Query svelte-simple-datatable fork Creating a sitemap was extremely easy, because of server-side routes. file.returnformat.ts ie sitemap.xml.ts CSS without a css-in-js library for scoping is a dream. CSS props are now 100% via CSS variables using the https://svelte.dev/docs#style_props Animations are all done with Svelte’s internal animations lib 32:45 - Hosting adapter-node Hosted on render.com as a straight-up node process $7/m for more than enough RAM and CPU, Lots of other options for static, Vercel, workers whatever, I like having just a straight-up node app you can host anywhere 35:50 - Things to do Admin tools Pancake lib for charts 37:00 - Challenges ESM is not always smooth sailin Import has from ‘lodash/has’ didn’t working in dev, but import has from ‘lodash/has.js’ didn’t work in prod. Solution was to use lodash.has as the dependency Apollo included all React as a dep unless you import from @core TS is great, but there was once where I wanted to define the entire props ts object for a spread prop, but was not possible Drag animations Cloudinary 42:46 - Wes’ questions What about the ecosystem? What about forms + DOM data? Serverless functions? Do you always bind to state? Or just access directly? formData = writable({ title: "yo" }) {$formData.title} Is it stable? Deno - Snel Links https://leveluptutorials.com/ https://vitejs.dev/ ××× SIIIIICK ××× PIIIICKS ××× Scott: The Skeptics Guide To The Universe Podcast Wes: Pressure Washer Nozzle Shameless Plugs Scott: Web Components 101 - 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

22 Sep 202155min

Hasty Treat - Webhooks

Hasty Treat - Webhooks

In this Hasty Treat, Scott and Wes talk about webhooks — one of those concepts that seems a lot scarier than it actually is. 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. 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 03:42 - What are webhooks? User-defined HTTP callbacks When something happens, ping this URL with this data Examples: When something sells, ping this URL When someone reverses a charge, lock their account Trigger a build of the website when the content changes Then someone buys a shirt, generate a shipping label and save it to the DB 07:57 - Sending End Can be a great way to hook two services together 09:13 - Receiving End Often you will be the one that accepts the webhook ping In this case, you set up an endpoint 11:00 - Payloads Almost all will send a JSON body that you parse out The method send is variable 11:51 - Auth On the receiving end of a webhook, you often get a token which you can then ping the service with. It will tell you if that request was legit or not. On the sending end, you can often set up headers with auth - same with the method Can be a replacement for a serverless function 13:18 - Testing webhooks Can be a pain in the ass ngrok - expose locally localtunnel Insomnia Postman Stripe has a great VS code extension Snipcart has an awesome dashboard Will also tell you when one failed webhook.site https://expose.dev/ IFTTT Zapier 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 Sep 202121min

New to JavaScript — ES2022

New to JavaScript — ES2022

In this episode of Syntax, Scott and Wes talk about all the new stuff in ES2022 — what it is, why you might need it, and how to use it. 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. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provides features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below: https://a0.to/syntax. Show Notes 04:50 - Regex indicies New d flag in a regex https://regex101.com/ This will tell you the indexes (indicies) of the regex matches Handy if you need to highlight or replaces matches in a string We can ask for the start and end positions of each matched capture group 07:16 - Class updates Private fields Properties and Methods to be kept private Prefix them with a # =Helpful for internal state and methods which should not be accessed directly or at all by external In React how we have __INTERNTAL_NEVER USE THIS class ColorButton extends HTMLElement { // All fields are public by default color = "red" // Private fields start with a #, can only be changed from inside the class #clicked = false } const button = new ColorButton() // Public fields can be accessed and changed by anyone button.color = "blue" // SyntaxError here console.log(button.#clicked) // Cannot be read from outside button.#clicked = true // Cannot be assigned a value from outside Getters and setters introduced in es5 https://www.w3schools.com/js/js_object_accessors.asp class Person { #hobbies = ['computers'] get #hobbiesGetter() { return this.#hobbies } #getHobbies() { return this.#hobbies } getHobbiesPublic() { return this.#hobbies } } const scott = new Person(); scott.#getHobbies(); // doesn't work scott.getHobbiesPublic(); // works 09:07 - Class fields This may seem super old because we have been polyfilling it forever Right now if you want an instance field on a class, you need to declare it in the constructor Now we can just declare them inside the class 10:36 - Static fields and methods As above can also be static with the static keyboard Works for methods too Explain what a static method is 13:17 - Top level await So handy in modules. Need to pull in some data? Simple. 15:19 - Ergonomic brand checks for private fields Used for checking if a private field on a class exists using the in keyword 16:00 - .at() method Strings and arrays - we can use square brackets to reference items of the array Super handy for grabbing the last item of an array // 🔥 New .at() method on arrays and strings const toppings = ['pepperoni', 'cheese', 'mushrooms']; // The old way to grab the last item toppings[toppings.length - 1]; // mushrooms // using .at() method with a negative index toppings.at(-1); // mushrooms // works with any index toppings.at(0); // pepperoni toppings.at(-2); // cheese // and with strings! 'Meeting Room: B'.at(-1) // B Why not use array[-1]? We used to use slice(-1) What about indexOf? 21:34 - Handy hasOwn method https://github.com/tc39/proposal-accessible-object-hasownproperty 24:51 - Class static block A static block allows you to run code before creating an optional static property during initialization https://github.com/tc39/proposal-class-static-block Links https://github.com/tc39/proposals/blob/master/finished-proposals.md ××× SIIIIICK ××× PIIIICKS ××× Scott: Ultraloq Smart Lock Wes: Magnatiles Shameless Plugs Scott: Web Components Course - 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

15 Sep 202138min

Hasty Treat - Starlink Rural Internet

Hasty Treat - Starlink Rural Internet

In this Hasty Treat, Scott and Wes talk about Wes’ new satellite internet setup — best use-cases and how to set it up. 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. 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 04:06 - Rural internet is huge for: Access to information Remote work Opens up job opportunities for many residents who can’t relocate due to family Home values Big city folk moving into rural areas and driving prices up is another issue altogether Smart rural home 05:46 - Previous setup We have a cottage LTE Routers Yagi Antennas Worked well, but slow $4/gig over 100gb Grey market - one went up/down Alternatives WISP - no access XPLORNET @ (hughesnet) - BRUTAL Bell LTE - $$$ - slow 08:35 - The signup, install, price $129 CAD Deposit ($100 USD) $650 for the dish $120/month Unlimited bandwidth Needs a clear view of the northern sky Clear from obstructions is key Every 1 foot up is 2 foot of obstructions cleared I put it on a 25ft piece of wood Bought a pipe adaptor from Starlink 09:59 - The performance These numbers are not impressive to anyone with fiber, but are LIFE CHANGING to rural folks From 30mbps - 200mbps down - some users posted ~350 down Upload from 25mpbs - 80mbps (better than you can pay for where I live in the city) Ping is around 40ms Downtime is measured in seconds Youtube streams super smoothly Zoom works great Facebook + Instagram issues Many reported changing DNS fixed it 14:21 - The equipment Starlink comes with a router Does not support bridge mode Doesn’t have WPS Only one hard-wired port POE-only UniFi Dream Machine Three access points POE switch for Starlink Router Gives you stats The ethernet is hard-wired into the dish, so you have to drill a huge hole in the house Links Starlink Wyze UniFi Dream Machine 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 Sep 202121min

Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × More!

Potluck - Sass × Houdini × No JS? × Solid Project × First Dev Job Tips × Bartering × DRM × Dev Laptops × Databases × Frontity × More!

It’s another Potluck! In this episode, Scott and Wes answer your questions about Sass, Houdini, JS requirements, tips for your first dev job, dev laptops, databases, Frontity, and more! 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. 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. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 02:35 - What are the use cases of SASS/SCSS in 2021? Would you still choose it over CSS (or something else?) in a new project? 05:26 - What ever happened to CSS Houdini? 08:49 - With all these JS being transferred, have you ever tried to challenge yourself to build a project that doesn’t involve any JS (in the front end alone); (e.g. just HTML+CSS)? I find it funny how I can pretty much use amazon.com with JS disabled, but I literally cannot view the angular docs if I disable it. 11:40 - As we all know, Tim Berners-Lee made the web. Apparently, after seeing everyone’s data getting harvested by tech companies, he decided to make a project called Solid (https://solidproject.org/) that allows people to own their data and control all permissions to it. So if a user logs into your app with Solid, rather than storing their info on your server, you’d store it in their Solid Pod. Do you think this could save both Web developers’ conscience and disk space in the cloud? 15:47 - I am about to start my first developer job. What practices can I start to really get off on the right foot and lay down a foundation for a successful career? 18:57 - Have you guys ever used your dev skills to trade for other goods or services? For instance, helping out an auto mechanic with their website in exchange for brake service on your car or creating a site for a barbershop traded for free haircuts for a year. If so, how do you go about starting that conversation? 22:14 - What’s your take on DRM? Have you implemented/integrated something like Widevine in any of your platforms/projects? How does one go about doing such a thing? I can’t seem to find any good docs on that. I personally can relate as to why it’s there, but end up hating it anyways. I recently found out that Prime Video only allows SD(sub HD) content on Linux and it had something to do with the Widevine DRM they employ. I got outraged and eventually canceled my subscription! 29:35 - Have you seen the Framework laptop and, if so, what are your thoughts for web development? I’m a lifelong Mac user but the idea of a higher repairable laptop running Linux (I personally can’t do Windows) sounds like an amazing step forward for consumers. 32:53 - I know that you both like MongoDB and so do I. But sometimes all these queries to database, especially aggregations gets messy, aren’t they? Prisma has now support for MongoDB. What do you think? Is it a tool that will make requesting MongoDB much easier? 37:02 - Hey guys, been diving into Svelte a bit recently and had a question about using it with GraphQL. As I recall Scott once deemed React Typescript GraphQL CodeGen “the promised land” and since then I tried it out and have found it awesome. However, I’ve been debating moving a larger personal project from React to Svelte. I see that there is plugin for graphql-codegen-svelte-apollo but with my limited knowledge of Svelte find it hard to decipher if the development experience would be as streamlined. I am wondering if you could shed some light on the developer experience of working with GraphQL in Svelte in Typescript. 40:58 - Do y’all have any thoughts about Frontity for WordPress? I swear I’m not a plant for Frontity, but I stumbled upon it today and I’m trying to evaluate it vs. other solutions like Next.js for use in a headless WordPress setup. Would love your thoughts if you have any! 43:40 - Call me weird, but I kind of like fiddling around with webpack configs. I just like the level of control I have here. That being said, is webpack going to die now that the “better” tools out there mature? Or do you think we might see a webpack v6 with esbuild under the hood that makes it compete with Parcel, Vite, Snowpack in terms of speed? Links https://sass-lang.com/ https://postcss.org/ https://ishoudinireadyyet.com/ https://astro.build/ https://kit.svelte.dev/ https://www.widevine.com/ https://frame.work/ https://www.prisma.io/ https://www.mongodb.com/ https://www.postgresql.org/ https://mongoosejs.com/ https://keystonejs.com/ https://frontity.org/ https://webpack.js.org/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Hot App Wes: Pet Food Mat Shameless Plugs Scott: Web Components Course - 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

8 Sep 202153min

Hasty Treat - TypeScripts Strict Explained

Hasty Treat - TypeScripts Strict Explained

In this Hasty Treat, Scott and Wes talk about the Typescript strict flag — what it does and why you might use it. 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 02:50 - What is it? Future versions of TypeScript may introduce additional stricter checking under this flag, so upgrades of TypeScript might result in new type errors in your program. When appropriate and possible, a corresponding flag will be added to disable that behavior. 03:26 - noImplicitAny The any type in TypeScript is exactly that - it can be anything. TypeScript will try to infer the type. When it can’t it will be any. Sometimes you need any, but if that is the case, you must explicitly type it as any. If something is implicitly any - it might be a mistake, or you forgot to type it. Risky! 06:01 - noImplicitThis You must type this - it can’t be implicitly inferred. 06:47 - strictFunctionTypes If you have a type that is a function and it doesn’t 100%. 07:44 - alwaysStrict Always turns on strict mode. You can’t do things like redeclare var variables. 09:25 - strictNullChecks Makes you check that the item is actually there before accessing a value or method from it. Imagine you filter or find on an array, or query selector a DOM element. There is a possibility that nothing is there. strictNullChecks makes you check that it’s there - like an if statement. Optional chaining is super handy here. 11:18 - strictBindCallApply 12:38 - strictPropertyInitialization 13:37 - useUnknownInCatchVariables Links https://www.typescriptlang.org/tsconfig#strict 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 Sep 202117min

STUMP'D - Coding Interview Questions

STUMP'D - Coding Interview Questions

In this episode of Syntax, Scott and Wes are back with another edition of Stump’d! where they try to stump each other with interview questions. 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. Auth0 - Sponsor Auth0 is the easiest way for developers to add authentication and secure their applications. They provide features like user management, multi-factor authentication, and you can even enable users to login with device biometrics with something like their fingerprint. Not to mention, Auth0 has SDKs for your favorite frameworks like React, Next.js, and Node/Express. Make sure to sign up for a free account and give Auth0 a try with the link below. https://a0.to/syntax Show Notes 03:10 - What is STUMP’D? 04:27 - What is a first class function? 06:27 - What is the purpose of using object is method? 09:31 - What is the purpose of Error object? 11:00 - What are the advantages of minification? 12:37 - How do you declare namespace? 15:38 - What are JS labels? 19:20 - List the methods that are available on a WeakSet? What is the difference between a set and a WeakSet? 23:33 - What is the use of preventDefault method? 26:15 - What is a spread opperator? 27:35 - What is the output of below spread operator array? [...'John Resig'] 30:19 - How do you load CSS and JS files dynamically? 32:00 - What are tasks in event loop? 34:15 - What is a WeakMap? 37:35 - How do get query string values in JavaScript? 40:50 - What is the purpose of some method in arrays? 42:15 - How do you delete a cookie? Links https://30secondsofinterviews.org/ https://www.interviewbit.com/javascript-interview-questions/ https://github.com/sudheerj/javascript-interview-questions https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label https://es6.io/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Builderment Wes: Lawn Mower Blade Balancer Shameless Plugs Scott: All Courses - 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

1 Sep 202150min

Populärt inom Politik & nyheter

aftonbladet-krim
svenska-fall
motiv
p3-krim
fordomspodden
rss-krimstad
blenda-2
rss-viva-fotboll
flashback-forever
rss-sanning-konsekvens
aftonbladet-daily
rss-krimreportrarna
rss-frandfors-horna
dagens-eko
rss-vad-fan-hande
sydsvenskan-dok
olyckan-inifran
rss-svalan-krim
rss-flodet
krimmagasinet