Syntax - Tasty Web Development Treats

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

Jaksot(936)

Hasty Treat - TypeScript Compilers and Build Tools

Hasty Treat - TypeScript Compilers and Build Tools

In this Hasty Treat, Scott and Wes talk about the differences between compilers and build tools in TypeScript. 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. 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:38 - What is a TypeScript compiler? Do we still need Babel / WebPack? 07:49 - Babel Transpiler It doesn’t do typechecking New JS features that aren’t in TypeScript yet 10:22 - SWC Rust based compiler Doesn’t do type checking (yet) https://github.com/swc-project/swc/issues/571 13:03 - Deno Uses tsc right now Might move to Rust https://github.com/denoland/deno/issues/5432 13:36 - Surcase https://github.com/alangpierce/sucrase#transforms 14:46 - ESBuild Compiles, but doesn’t do any type checking Fastest 17:39 - What about bundlers? Parcel Snowpack Webpack ESBuild When might you still need a bundler? To handle different types of files that are non-standard Like importing CSS and images Treeshaking Smaller bundle files Typescript can concatenate to a single file, or all .js files, but smaller / smarter bundles still need a tool for that Polyfills Typescript does convert to syntax, but will not polyfill features Something like Promise Syntax can be transpiled to old code Methods like allSettled aren’t Links Syntax 324: TypeScript Fundamentals Syntax 322: The Deno Show 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 Helmi 202122min

We Review Resumes, Websites, and Online Presence

We Review Resumes, Websites, and Online Presence

In this episode of Syntax, Scott and Wes review resumes, websites, and online presences, and discuss pros and cons, what you should focus on, 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. 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 04:32 - Why does an impression matter? All of this stuff comes together to work in your favour when you are hunting for a job. 05:14 - What goes into an online presence? Twitter Share what you know Online website Design Messaging Effort Personal life Blog Resume It’s not about being popular, it’s about relationships and positioning yourself as an expert. People mix up their hatred for “influencers” with having a rock solid network of people who they can help and who can help them. 07:25 - A couple stories @HenriHelvetica You don’t know how many times I’ve tried to convince (esp people of color) to try a lightning talk. This stuff gets you to research, and you might even make discoveries. I know it’s a step out of the comfort zone for many, and that’s cool, but don’t be upset at those who go for it, and land some work. I do (did) lunch n learns @ Juno, and I started to end them w/ a post bootcamp life — tell them what it’s like, and to be active on twitter (share what you read, what you’re working on, listen to others, follow great devs, etc.). One person DM’d me to tell me she took that in and decided to try. “I never forgot that time you gave a talk at HY and one thing that you emphasized was to make your voice known on Twitter. You said that this has opened many opportunities for you and that’s been happening to me more and more recently. I never set out to build my account but the growth has indeed happened and along with it, opportunities from people I’ve never expected.” 09:40 - Ash Connolly https://ashconnolly.com/ https://www.notion.so/ashconnolly/Ash-Connolly-321c5a65350f477897ed025f4daa1bb0 Software Engineer Using new tech with high end clients Review Pros Clean, simple design, but doesn’t feel like it’s missing something Animations are a nice touch Easy to see their work (e.g. photo, title, short paragraph, link) Testimonials is good, I might change the word testimonials, but that’s small Cons Nitpick - footer emphasis color looks like a link HTML is good, but missing some semantic tags like , , , too reliant on divs Resume Pros Good idea of what Ash has accomplished (e.g. just by reading his summary, I’m left feeling impressed because of his client base and his extras like writing for FreeCodeCamp and Marvel Blog). Work history - good way of describing what he did. “Carried out performance audits and site speed improvements” Links to writings and side projects Cons Lists Brad Frost as someone who shared his post. This feels a little weird. Nitpick - CSS & CSS3, HTML & HTML5 on the languages. In 2021, just put HTML & CSS. Work history - WAY way too much. Keep it to one sentence and three or four bullet points for each job. Ain’t nobody gonna read all that. 20:48 - Matthew Bidwell https://matty.dev/ Backend dev Not focused on dev Review: Banging domain It’s clear who he is, what he is about Links to Twitter, Github and LinkedIn right away Blog posts showing he knows what he’s talking about 24:42 - Leah Lundqvist https://leah.link Review: Pros Fantastic aesthetics on site Good lead paragraph Cons I’m not sure what work she actually does Github pages are great for digging but not curation or showing off Same with Twitter For instance, I saw on Twitter that Leah made https://app.airport.community/app/rec1CbVg4J5aqScUQ but there was no mention of it anywhere else. A page full of the most recent / best projects with quick links is essential for anyone. Don’t make them hunt for it Twitter review: Unreal Pinned tweet 31:04 - Ismail Ghallou https://smakosh.com/ Best one yet Clear explanation right off the bat Dribbble - shows me he’s up on the latest Open source Testimonials Talks Blog https://twitter.com/smakosh - Twitter lines up Most recent tweets about tech 40:18 - Jhey Tompkins https://jhey.dev/ Whimsey Sound! Good use of CSS and SVG animation 46:28 - Wes’ website websos.com Can’t view source Whimsey The right kind of animation The link to the Syntax podcast has no indication that it’s going to take you offsite. The background image is good, but not as good with a wide browser. Custom scrollbars are nice Overall the site is a delight 53:25 - Scott’s website scotttolinski.com Font’s a little big Link to documentary is great Bio should include links Page animations are great Showing personal life / interests is good Super fast Links https://twitter.com/wesbos/status/1350961135269400580 Syntax 298: Voice Coding is Really Good with Josh Comeau Josh Comeau Doug DeMuro ××× SIIIIICK ××× PIIIICKS ××× Scott: Swedish Dishcloths Wes: Paper Wheels Knife Sharpening System Shameless Plugs Scott: Testing with Cypress - 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

10 Helmi 20211h 7min

Hasty Treat - Keyboard Events Are Surprisingly Interesting

Hasty Treat - Keyboard Events Are Surprisingly Interesting

In this Hasty Treat, Scott and Wes talk about keyboard events and some of the fascinating things you can do with them! 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. Show Notes 03:04 - The Events http://keycode.info/ keydown beforeInput Keypress - deprecated inputType tells you whether the event is inserting text, replacing text, inserting a line break, etc. keyup change event - only fires when you focus out https://github.com/w3c/uievents/issues/220 08:02 - Event meta data "key": "c", "keyCode": 67, "which": 67, "code": "KeyC", "location": 0, "altKey": false, "ctrlKey": false, "metaKey": true, "shiftKey": false Others: .locale .repeat 16:46 - Media keys https://developers.google.com/web/updates/2019/02/chrome-73-media-updates play, pause, ect Overkill app: https://krausefx.com/blog/introducing-overkill-dont-let-itunes-interrupt-your-workflow 18:32 - When might you use key codes? Space bar to stop a video on a page Building a game Making a web app feel more like an app Links Better Touch Tool Syntax 315: Hasty Treat - Hyper Productivity with Keyboard Shortcuts + Window Management 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 Helmi 202122min

TypeScript Fundamentals

TypeScript Fundamentals

In this episode of Syntax, Scott and Wes talk about TypeScript fundamentals — what it is, how you use it, why people love it so much, and more! 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. 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 What is TypeScript? 03:12 - Types? What are types and why should you care? JS is a typed language, it’s just not strongly typed JS does not care about reassignment of a variable to a new type Does not care about your types, but they do exist 06:34 - The Fundamentals You write your JavaScript code, but each time you create a variable, function, parameter, you “type it” — which means you describe what that data will look like. Create a variable: Will it be a string? A number? A custom type of show? Create a function: What params does it take? What type are they? What does it return? Types allow your code to know if there are type errors that would present themselves to the user silently. These are small errors that can be compounded and go unnoticed. This can allow you to prevent shipping code that has these errors by checking your code. Some of the biggest benefits here come via errors in your text editor 13:30 - Explaining the types You can create your own types Strings Numbers We only have numbers in TS, no floats/ints We do have BigInt though, but not something most people will use Arrays Will be a list of another type Unions This type will be one of the possible options String of DRAFT PUBLISHED or ARCHIVED Intersections An intersection type combines multiple types into one Objects These are custom types where each property is its own type Any Explicit any Implicit any Language types These things are technically just Objects, but they have their own types Dates Timeouts DOM Elements / Nodes Void When a function returns nothing — usually used with side effects like click handlers Enum A set of named constants Used when you have a select amount of values — I like to think of these as the select lists of TS String unions are also used for this same thing 30:28 - Inference Automatic detection of types Typescript will try to infer your types based on their definition Not every type can be inferred, leading to implicit anys and the need for explicit types 33:25 - Getting types Most popular packages already have types — you install them like npm i @types/whatever If a package doesn’t have types, you have to create them yourself, which can be annoying MakeTypes Console log a JSON.stringify(obj), and pipe it in Node has types Vanilla JS has types, for the language and all of the DOM - HTMLInputElement React has types Typing Node modules that don’t have types Overall benefits 40:39 - Type hinting With TS and your editor (VSCode) you’ll get more information about your code as you type it — allowing you to know exactly what things expect This seems like a small deal but in practice leads to being much more efficient 42:50 - Refactoring Rename a function, type, or variable and it will be updated everywhere in the project! Moving a function to a new file is actually part of TypeScript Drag + Drop file, update imports 48:10 - Compiling TSC vs Babel / Esbuild Only TSC type checks Compiling TS with babel will not allow you to break the build on type errors, you’ll need to run TSC in coordination or in the CI/CD Links Snipcart GraphQL Snowpack ××× SIIIIICK ××× PIIIICKS ××× Scott: 1: LumiPets 2: LumiPets Bear Wes: Phomemo Label Printer Shameless Plugs Scott: ESM & Snowpack - 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

3 Helmi 202158min

Hasty Treat - New Level Up Tutorials Site

Hasty Treat - New Level Up Tutorials Site

In this Hasty Treat, Scott and Wes talk about the new Level Up Tutorials website — some of the new tech powering the site, behind-the-scenes decisions, previous iterations, 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. Show Notes 02:55 - Previous iterations Originally on Drupal 7 Full re-write to Meteor + Blaze Two sites — store.leveluptutorials.com and leveluptutorials.com Meteor + React Meteor + Apollo Combine store and site Move to TypeScript NOW 05:30 - Big choices No Babel up and down the stack UI Mostly unchanged — React + Styled Components + SCSS Moving more to SCSS, CSS vars Build and dev done via Snowpack 50ms hot reloadin’ Mega fast development workflow has been a huge plus Errors in the UI via Snowpack Wrote a custom GraphQL importer plugin API ESBuild Insane speeds Wrote a custom GraphQL importer plugin Mercurious / Fastify Codegen GraphQL code gen to create everything we need for a fully typed codebase Auto-generated React Hooks Hosting render.com for both CLI Custom avalanche CLI that removes the guesswork and makes bulk operations easy Caddy server for easy leveluptutorials.dev in local environments Testing Jest → API Cypress → UI Links Digital Ocean app platform https://beta.leveluptutorials.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

1 Helmi 202125min

The Deno Show

The Deno Show

In this episode of Syntax, Scott and Wes bring you the long-awaited Deno show — what it is, what it replaces, how you can use it, and more! Deque - Sponsor Deque’s free axe browser extension helps developers instantly catch 50% of accessibility bugs while they code. It’s lightweight, easy-to-use, and has zero false positives. Get started for free at deque.com/axe. 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. 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 02:13 - What is it? A secure runtime for JavaScript and TypeScript Built by Ryan Dhal — same guy who initially built Node.js API is JS or TS out of the box 04:55 - Does it replace / what is it in relation to? Node It’s a replacement for Node.js Express Web Server Frameworks like Express will run on Deno, but Express itself won’t currently run because they are build on Node APIs https://github.com/oakserver/oak Serverless Deno can be used for anything, so it can be used for serverless functions, or a traditional web server Serverless, Deno and TypeScript with Brian Leroux React / Vue / Svelte These things are just JavaScript, so they should/will work in Deno. Deno will replace your tooling. More involved things like Next.js that require Node APIs won’t work until. https://alephjs.org/ SSR It comes with all browser APIs out of the box! Fetch Window + Add Event listener Webpack / Parcel / Snowpack Deno is a bundler Prettier Deno is a formatter TSC Deno is a TypeScript compiler and runtime ESLint Deno is a linter Jest Deno is a Test Runner NPM Deno is a package manager - it pulls in packages from URLs 14:51 - Modules ES modules from the start Modules are loaded from URLs Why? No package registry to worry about This is how the browser works Import from URL You can also specify it in the json file https://github.com/oakserver/oak/blob/main/deps.ts https://deno.land/ Fetch is built in! It’s a browser API, but who cares?! Browser APIs window.add event Listener Deno is event based, like the browser 20:10 - A nice standard library https://github.com/denoland/deno/tree/master/std 22:14 - WASM Deno can run WASM with the same APIs that the browsers can Node is doing this too (experimental) 25:06 - Multi-threading with Web Workers 26:13 - Speed It’s fast! They took everything they learned from Node - good and bad Built in Rust From what we understand: V8 is written in C++ Node is written in C, C++ and JavaScript How it talks to V8 - Rust sits in-between the JS runtime, and the C++ V8 runtime and communicates between the two. https://github.com/denoland/deno/blob/master/core/examples/hello_world.rs 29:44 - Security Sandboxed —allow-read —allow-net -allow-write https://deno.land/manual@v1.6.3/getting_started/permissions#permissions-list You can specify which dirs it can access 33:39 - Run from anywhere https://www.npmjs.com/package/npx Deno run https://cool.com/whatever.ts 37:43 - Async out of the box Everything is based on async + await / promises right away. No callback APIs, no promise wrapping. Top level await 38:53 - Node Compatibility Node APIs are being filled This means if a browser package ships an ES module of a package, we can just import it 42:21 - What we’ve built A bunch of sample scripts Lots of simple demos Very intuitive Fetched and downloaded every single Syntax mp3 https://twitter.com/wesbos/status/1326345600141582336 46:54 - Hosting Literally any linux server (Linode, Digital Ocean, etc.) https://begin.com/ https://fly.io/ 48:29 - Final thoughts Scott: Now is a great time to learn, but don’t put any crucial work into that space unless you are ready to write everything. Libraries are still being written and evolved. Docs are still sparse. Many things didn’t work on first try. I had to read lots of source. Wes: If You know JS or TS, you are already 90% there. The package ecosystem isn’t there yet Battle-tested ××× SIIIIICK ××× PIIIICKS ××× Scott: Boom/Bust: The Rise and Fall of HQ Trivia Wes: Orthopaedic Pillow Shameless Plugs Scott: Deno 101 For Web Developers - 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

27 Tammi 202159min

Hasty Treat - The New AVIF Image Format Is Unreal

Hasty Treat - The New AVIF Image Format Is Unreal

In this Hasty Treat, Scott and Wes talk about AVIF — what it is and how you might use it! 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. Show Notes 03:10 - What is AVIF? AVIF is derived from the keyframes of an AV1 video Royalty free (big deal) What about WebP? Basically half the file size of a WebP for free, which was already about half the size of a jpeg It’s a lossy format — ie it inherently will degrade the image https://jakearchibald.com/2020/avif-has-landed/ No animation 10:53 - How to implement Cloudinary is in beta, but you can try it Gatsby supports it https://squoosh.app/ Imagemin https://github.com/nucliweb/imagemin-avif https://avif.io/ https://github.com/dreampiggy/AVIFQuickLook https://github.com/vercel/next.js/pull/20765 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 Tammi 202120min

Potluck — $100k Dev Jobs × Sponsored Blog Posts × How To Keep Your Skills Up To Date × Libraries vs Custom × Dev Tools × More!

Potluck — $100k Dev Jobs × Sponsored Blog Posts × How To Keep Your Skills Up To Date × Libraries vs Custom × Dev Tools × More!

It’s another potluck! In this episode, Scott and Wes answer your questions about VS Code, JavaScript, $100k-per-year dev jobs, sponsored blog posts, how to use dev tools, how to keep your skills up to date, 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. 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. 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 02:01 - Not so much a question as me saying thanks! I started web dev as a bartender/college dropout in 2017 when Syntax was pretty new. I rarely miss an episode, and this year I’m starting my first >$100k JS job! Your show has always been fun, kept my attention in the realm of web dev, and helped guide my interest — I think it has been extremely valuable to my career so far, and I look forward to more. 04:10 - How do I know when to pull in a package rather than write similar functionality myself? And is there a rule for when enough is enough, in terms of having too many packages? What I’m most concerned about is bundle size. It doesn’t seem to take a lot of packages before Webpack notifies you about large bundle sizes, so what would be best practice? 11:27 - What is your opinion of doing a sponsored post or guest post on your own site? And if you’re in favor, what sorts of terms, payment, etc. would you outline or charge for it? 18:20 - Do you have/know of any resources for those that want to learn more about selling digital products through e-commerce? The sources I’ve found (Scott’s e-commerce/Gatsby courses & Next.js commerce demo page) focus more on creating stores that sell physical products. Are there any gotchas when selling digital vs physical? 22:10 - Do you have any tips for keeping your skills up to date while taking a break from work? I’m a frontend dev currently six months into my year-long maternity leave and I feel like my brain has turned to soup. I listen to podcasts and read blog posts but it never feels like enough. Time and energy are very limited for me to work on personal projects! 25:11 - I remember you guys saying something about making your own UI component libraries. Do you use some CSS libraries like Tailwind or even Bootstrap or others for this, or do you write your Sass/CSS from scratch? 30:52 - Would be interested to hear some of the common ways you use dev tools (chrome dev tools, react dev tools, redux, etc.). I feel like there is a lot of information in there that I am not utilizing properly to help figure out problems during development. Would be cool to hear an overview of how you use the different tabs, some of the most commons things to look for, etc. 35:20 - I am graduating from a bootcamp next month and I feel severe insecurities/imposter syndrome. For whatever reason, I freeze up when it comes to coming up with code or writing things myself, mainly in JS. When in class, watching tutorials, following along, or viewing other people's code, I can tell you exactly what is going on, why it is being done, and I can change and add things and explain them. But when it comes to starting from a blank slate, I freeze, as if everything I know about programming has gone out the window. Do you have any advice as to how to get past this hurdle? I feel like at this point I shouldn’t be feeling like this, but maybe this is normal? 40:36 - Do you think developers have a responsibility to help reduce CO2 emissions caused by the web? A BBC news article stated that “HD video streaming on a phone generates about eight times more in emissions than standard definition (SD)” and noted that on a small screen, the viewer might not even notice the difference. Should the developer limit the resolution available to mobile devices, or should they let the end user choose? 47:53 - I was hoping that you guys could give me, and other listeners, advice on “knowing when you’ve bitten off more than you can chew”? Often I’ll be working on a project for fun, or possibly building out my portfolio, and I’ll continue to get excited about features that I’d like to add to my current app or what have you. At first glance, the ideas or features seemed reasonable enough to tackle, but hours later, I’ll find myself stuck, realizing that I’m in over my head, as I’ve tried to take on something that I’m not yet experienced enough to work with, or I’m lacking the man-power to complete it in a timely manner. At the same time, I want to challenge myself so that I can grow, but sometimes I feel that I’m not using my time wisely. So my question to you is, where is the line between challenging ourselves to take on new and difficult tasks and scaling back our current work to make it more approachable and less overwhelming? 55:01 - What is the right use-case for a database, and what is the right use-case for a headless CMS? Is a headless CMS just a database + a user-friendly way of entering data into that database? Is there a secure way of querying Sanity directly from the frontend if I have data that I want to be only available to logged-in users? Links Syntax Listener Questions Bundle Phobia Shopify Snipcart Styled Components BEM Mux ××× SIIIIICK ××× PIIIICKS ××× Scott: Double Sided Mounting Tape Wes: Secret Aardvark Habanero Hot Sauce 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

20 Tammi 20211h 4min

Suosittua kategoriassa Politiikka ja uutiset

rss-ootsa-kuullut-tasta
ootsa-kuullut-tasta-2
aikalisa
rss-podme-livebox
politiikan-puskaradio
rss-vaalirankkurit-podcast
otetaan-yhdet
et-sa-noin-voi-sanoo-esittaa
the-ulkopolitist
rikosmyytit
linda-maria
rss-hyvaa-huomenta-bryssel
rss-kaikki-uusiksi
rss-pallo-keskelle-2
rss-mina-ukkola
rss-raha-talous-ja-politiikka
rss-tasta-on-kyse-ivan-puopolo-verkkouutiset
rss-sinivalkoinen-islam
rss-polikulaari-humanisti-vastaa-ja-muut-ts-podcastit
rss-merja-mahkan-rahat