Sveriges 100 mest populära podcasts

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.

Prenumerera

iTunes / Overcast / RSS

Webbplats

syntax.fm

Avsnitt

Potluck ? Coding for Kids × MongoDB Hosting × NoMoreFoo × Best Cities for Dev Jobs × GraphQL Resolvers × Package Security × Prototypes and Portfolios × More!

It?s another Potluck! In this episode, Scott and Wes answer your questions about privacy policies, coding for kids, MongaDB hosting, cloud backups, system design, #NoMoreFoo, and much 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

04:49 - Ben Lamers: Heyo Scott and Wes! I am building a web app currently with my brother, and I was wondering when we get to launch it how do you go about correctly writing/adding Terms of Use and Privacy Policy. I?m assuming this may be quite different depending on the platform so maybe general resources or tips for this. Thanks!

06:45 - Fumbles O?Brian: Do you have any recommendations for teaching young children how to code? I have a 5-year-old niece in kindergarten who is absolutely fascinated watching me work, and I?d like to start teaching her basic concepts when she?s able to read/write better. For example, she loves watching me make UI changes in React, it blows her mind that changing letters on one screen changes what a website looks like.

11:01 - Kenny: Gentlemen! Love this show and the content you put out. It keeps me occupied during my 5 and 6 mile runs. Thank you both for working so hard to keep it active, I know it takes a lot of work. I?m curious what you think about hosting your own MongoDB server? I?m relatively new to Mongo but want to start working with it for smaller projects. I?ve used MySQL for a decade, hosted online with shared hosting. Worked well for my relational db needs. Should I host my own Mongo when I?m ready for production, or pay the reasonable costs for something like Linode or maybe even Atlas? I have experience in Linux (enough to get by) and have my own virtualization cluster that I can spin up a server in seconds, along with an enterprise level firewall for managing traffic to and from. I actually just spun up a docker server this week and have a Mongo container running on it, though it?s not accessible outside my network. This is purely for my development environments. Despite the firewall, my concern is security. Is it worth paying for a trusted solution like Linode, or should I put a little time in locking down my own Mongo container for my own use? Thank you both! Keep up the great work.

14:42 - Mike: Not a question but more of a rant? It?s 2021, almost 2022, can we all stop using ?foo? and ?bar? and ?baz? when teaching a programming concept? I applaud both of you because I don?t recall seeing any of your content ever using such atrocious terms, however, I?m sad to see other prominent educators in the web development community use these terms from time to time. I feel like there are so many better examples that we could use to explain a concept and the use of ?foo? is just confusing to beginners. That?s all, just wanted to get that off my chest. Thanks for a wonderful podcast! #nomorefoo

18:53 - Amir: Hey Wes and Scott, thank you for your awesome podcast. What are the best cities in Canada and USA to get (more quantity, highest-paying) developer jobs?

23:44 - LW: Hi guys, I am finally starting to get into GraphQL and I don?t get it. Specifically I am working to convert an existing REST API to GraphQL. This seems really tough and there is not much guidance out there on how to do it. The main part I am unsure of is how to write resolvers. If I use the existing query then GraphQL just seems like an over-engineered filter method. If I write an individual resolver for each column in the table - that?s gonna be 100s of resolvers and super annoying to write. Have either of you ever moved something from REST to GraphQL? And, if so, how did you handle this?

27:57 - Dan: How does someone learn and actually practice using these system design topics like load balancing, caching, and database sharding. I have never had the need to use some of these things in my day-to-day work, but recently been interviewing and in the system design portion of the interview I feel a little lost. I?ve read about these topics and watched videos but haven?t really seen how to implement these things. Any good resource recommendations?

31:57 - Matt: How do you know if you can trust an NPM package, from an unknown developer, that does not have many GitHub stars and has relatively few downloads? (The repo that made me ask this question is https://github.com/Wondermarin/react-color-palette). NPM audit automatically runs when you install a package, do any of you ever use additional security checks?

38:32 - Yosef: Hi I?m a beginner front-end developer and I heard you saying that being able to copy prototypes is a valuable skill, so I found some Figma free template and I copied them, the question is can I put them in my portfolio or deploy them?

40:00 - Nick: Hey dudes! I picked up a freelance project to make a brochure-style website and found myself having trouble to decide on what tools to pick for this site. I wanted to ask you and get your take, what tools/tech would you use to build a brochure site? By this, I mean the site should have mainly company information that is ideally editable by the stakeholders and has a contact form. Thanks!

44:22 - Casey: Hi Scooter and Wild Wes! Why do I feel so dirty when I?m forced to use negative values in CSS?

45:45 - Gnommer: Do you use some cloud sync service to backup your directory with projects? I mean OneDrive, Dropbox etc.
I tried to use it alongside with Git, and it just messed my files so badly. On the other side I feel very uncomfortable without any backup apart from Github. BTW, according to last Potluck: polish ??/?? is pronounced like ?w? in ?what a sick podcast you have?. Best from Poland ;)

Links https://www.ryzerobotics.com/tello https://www.mongodb.com/cloud/atlas https://snyk.io/ https://deno.land/ https://kit.svelte.dev/ https://astro.build/ https://www.gatsbyjs.com/ https://www.dropbox.com/ https://www.backblaze.com/ https://www.synology.com/ https://support.apple.com/en-us/HT201250 ××× SIIIIICK ××× PIIIICKS ××× Scott: The Way Down Wes: Wooster Shortcut Shameless Plugs Scott: Modern GraphQL with Prisma - 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
2021-10-20
Länk till avsnitt

Hasty Treat - Handy Utility Functions with Just

In this Hasty Treat, Scott and Wes talk about handy utility functions with Just!

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

03:44 - What is Just?

https://github.com/angus-c/just No dependencies It?s written in JS, so you can copy+paste them if you really need it Types available https://medium.com/@angustweets/just-a12d54221f65#.ljib0mfr5

06:46 - Some nice ones

just-safe-set ? deeply setting dynamic object properties set(data, 'a.long[0].path', value) object-typeof Why not use typeof? Everything is an object Why not use array.isArray? Handy to have a switch statement just-*-case Camel, kebab, snake just-compare

10:54 - Why?

This is the NPM install of Stack Overflow copy+paste Handy as hell Battle-tested Lots of ways to do simple stuff Sometimes the simple stuff has weird edge cases - these are caught Sometimes your checks can be messy Check if an object is empty 25 lines Just install it

12:05 - Other

Great to learn and test yourself There are tests for each function Run them See them fail Try and make it so all the tests pass without looking at the source Links https://github.com/angus-c/just https://github.com/antony 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
2021-10-18
Länk till avsnitt

A Podcast on Running a Podcast

In this episode of Syntax, Scott and Wes talk about running a podcast ? recording, sponsoring, where to start, 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.

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

01:45 - Recording Setup

Zoom to chat Record on Zoom Quicktime Logic Riverside Wes: Heil PR-40 dbx 286s Scott: Electro-Voice RE20 Cloudlifter dbx 286s

09:13 - Notes

Shows begin as a Notion doc Big outlines with a point-based outline to where to go Sometimes points are detailed, other times are just one-word reminders as to what to hit Sponsors pulled from a Notion relational table Shows are created in a kanban board but moved to a calendar view

12:37 - How do you find stuff to talk about?!

Technical skills Hasty Tasty Potluck Game shows Collabs ShopTalk Collab Changelog Collab Soft skills Productivity Apps We Cooked It: Explainer Episode Add ideas to the list anytime it pops into your head

21:02 - Editing

Podcast Royale We record a clap for syncing Upload to Dropbox for our editors

22:07 - Hosting

Libsyn Archaic feeling, but covers everything

22:36 - The website

Next.js Open source PRs are submitted adding the latest episodes

24:10 - Transcripts

Generated

24:40 - Would you still start one?

Podcast vs YouTube vs Twitch

29:20 - Getting popular / Marketing

How do you do it? Consistency is key Need external audience

35:34 - Sponsors

Five to six hours per week in prep Most of our sponsors are products we already used We sell and manage all our sponsors ourselves

42:17 - What about Patreon?

Ad-free version?

46:04 - Live shows

Confs Livestream Links Delicious Brains Syntax Ep 004: JavaScript Tooling LulaRich ××× SIIIIICK ××× PIIIICKS ××× Scott: Untold: Crime & Penalties Wes: Roadrunner: A Film About Anthony Bourdain 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
2021-10-13
Länk till avsnitt

Hasty Treat - Neat Things in CSS Color - Current and Coming!

In this Hasty Treat, Scott and Wes talk about all things color in CSS, both current and coming soon!

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.

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.

Show Notes

04:39 - color-contrast()

Part of CSS5! Maybe. The color-contrast() functional notation takes a color value and compares it to a list of other color values, selecting the one with the highest contrast from the list.

06:01 - Accent color

https://davidwalsh.name/css-accent-color

07:34 - currentcolor

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword

08:54 - Profiled color values - color()

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()

11:00 - color-mix()

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix() The color-mix() functional notation takes two color values and returns the result of mixing them in a given colorspace by a given amount. Would be handy for programmatically generating colors - 10% more blue for a border? Sure!

14:18 - Space-separated functional color notations

rgba(255 255 255 0) instead of rgba(255,255,255,0.5)

15:28 - RGB and HSL with Alpha

rgb() and hsl() can take alpha and percent values - rgb(0 0 0 / 50%) or rgb(0 0 0 / 0.5)

18:22 - Hex + Alpha values

RRGGBBAA How do you remember?!?! Transparent

21:49 - lch(), lab(), hwb() notation

CIELAB color space aka Lab is a color space. A color space is an organization of colors in coordination color profiling supported by various physical devices, it supports reproducible representations of color Lab is intended as perceptually uniform Perceptually uniform - a perceptual uniform color space ensures that the difference between two colors (as perceived by the human eye) is proportional to the Euclidian distance within the given color space. https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/ Links https://developer.mozilla.org/en-US/docs/Web/CSS/color_value https://twitter.com/argyleink 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
2021-10-11
Länk till avsnitt

Potluck ? Corn Shucking × Self-Hosting Images × WordPress × Getting Scammed × Portfolios

It?s another Potluck! In this episode, Scott and Wes answer your questions about corn shucking, self-hosting images, WordPress, getting scammed, portfolios, 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 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

02:55 - Hey guys, I love the podcast! This is a silly question and possibly the least important potluck question you?ll ever get. When you get a new Apple device like an iPhone, Apple Watch, or Macbook Pro? do you keep the box? Why or why not?

06:56 - Hey guys! Awesome podcast! Could you go over the advantages and disadvantages of using local images vs external images service (e.g. Cloudinary) for displaying images on a web app?

11:26 - Heyyyy Scott and Wes! 40-year-old lady here looking to make a career change. It?s taken me a year plus, but after building several tutorial React apps, I finally built a fullstack JavaScript app of my own, with lots of rad Postgres database stuff, a bunch of secure Node/Express API endpoints, role-based access control, fancy Oauth, and of course the latest React tech (context, hooks, etc). I?m pretty proud of it. I even managed to configure Nginx and deploy it to AWS. The only problem is?it looks like crap. My portfolio site itself is pretty darn slick, since I used a gorgeous Gatsby template that required only a bit of tweaking. But the site I architected and worked so hard to bring to life? It looks like an 8-bit game for toddlers, a responsive yet Bootstrapy game. My question: does this matter? I would hope that this project shows off my backend skills, but I?m afraid they?ll judge a book by its cover. (I guess a second question would be: how do you show off your backend skills? I have a README in my repo, but will they actually read it? Or, can you be a fullstack React developer with no design skills?) I am very, VERY ready to apply to jobs (emotionally and financially), but I am terrified of making a fool of myself and worried I?ll never get hired. I am completely self-taught and have just been plugging away at this on my own for the duration of the pandemic, so I send a massive thank you to you guys for the sense of community that your show provides! Props to Wyze sprinkler controllers!

16:14 - Scott, I just finished your ?SvelteKit? course and now I?m working on ?Building Svelte Components?. I have some questions regarding testing. I was listening to an interview with Rich Harris on Svelte Radio and it?s my understanding that the framework is trying not to be opinionated as far as testing. What are you doing as far as testing with SvelteKit? Do you have any recommended packages/plugins/libraries? I?ve only ever written unit tests with Jest in Vue. I?m loving Svelte, but I really want to work on writing tests as well. Basically, everything/anything you?ve got on testing with SvelteKit would be much appreciated. I?ve been listening to the show since forever, you guys are both awesome, shout out to Wes too, you?ve both taught me so much! Thank you, peace, love, and happiness

2021-10-06
Länk till avsnitt

Hasty Treat - Spicy Takeout - PHP Is Good and We?re Just Re-Creating It

In this Hasty Treat, Scott and Wes talk about how much modern web development has taken from PHP!

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.

Show Notes

03:56 - Why much of modern web development is just recreating PHP

Everyone loves to hate on PHP, but modern Web dev takes a lot from PHP

05:44 - Mixing templating and logic

We do this with JSX

07:39 - Each request has its own scope

08:57 - Massive standard lib

Format a date? No sweat! Image resizing? Sure! Audio bindings? Sure!

10:16 - URL-based routing

Next.js pages Serverless functions

11:13 - Server-rendered

Hotwire

11:38 - $_GET, $_POST, are just available

Next.js hooks

12:29 - Variable interpolation

12:59 - All-in-one frameworks

Laravel did it CakePHP CodeIgnighter

13:32 - Direct DB access

SQL statements

14:37 - Why do people hate PHP?

WordPress Inconsistent API Their first code was PHP and they sucked PHP has come a long way It used to not be safe Blocking by default - no async/await

17:48 - Why is JS still better?

Shared code between frontend and backend Single language Huge ecosystem (could be a con) Links Syntax 267: Hasty Treat - Turbolinks + Server Generated HTML + JS Sprinkles https://vuejs.org/ https://www.hey.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
2021-10-04
Länk till avsnitt

Changelog Frontend Feud

In this episode of Syntax, Scott and Wes do a crossover episode with Changelog?s JS Party! Your favorite web dev podcasts join forces for a super collab that?ll knock you frontend off! Amelia joins Chris Coyier and Dave Rupert from ShopTalk Show, while Divya teams up with Wes Bos and Scott Tolinski from Syntax. Let the FEUDing begin!

.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?.

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

02:49 - Frontend Feud Rules

04:06 - Round 1

10:28 - Round 2

17:26 - Round 3

25:37 - Round 4

35:15 - Round 5

42:03 - Round 6

Links Changelog JS Party Chris Coyier Dave Rupert Wes Bos Scott Tolinski Jerod Santo Amelia Wattenberger Divya The Feud At The Seventh Mountain Amelia?s repo visualizer CSS-Tricks freeCodeCamp Wes Bos? courses Changelog Merch Level Up Tutorials 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
2021-09-29
Länk till avsnitt

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
2021-09-27
Länk till avsnitt

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
2021-09-22
Länk till avsnitt

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
2021-09-20
Länk till avsnitt

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
2021-09-15
Länk till avsnitt

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
2021-09-13
Länk till avsnitt

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
2021-09-08
Länk till avsnitt

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
2021-09-06
Länk till avsnitt

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
2021-09-01
Länk till avsnitt

Hasty Treat - Freelance Tips - Toxic Clients

In this Hasty Treat, Scott and Wes talk about toxic clients ? how to identify them, and what to do about them.

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

05:33 - Warning Signs of a potential toxic client

Doesn?t have project well thought out. Scope creep - Adds on new features while not considering the amount of work required to make them happen. Can be mad when you run out of time or budget. Ill Communicator Contacts you at odd times. Thinks that you should answer every email in an hour. Contacts you in inappropriate ways, via text message, social media. OR doesn?t respond to emails in a timely manner giving you blockers. Jerk The rude client Thinks they can be rude because they are giving you money Hundreds of emails Tries to be flashy upfront (dinners, etc.) Scatterbrain or way too big. Facebook for nurses

18:06 - What to do about toxic clients

Communicate your needs clearly. Set expectations. ?I work best when?? ?I answer emails once every two days? Set clear deadlines for deliverables, feedback and revisions (one revision backed in, more at x hourly rate, etc.). Just be VERY clear. If something doesn?t work for them, they will hopefully tell you. Get things in writing. Put things clearly in a working agreement for your client to approve. That way you have something to show in case things go south and you can say, ?You agreed to the following things?. Fire them You can fire clients. Honestly, some of them just aren?t worth the time and effort. It?s usually the cheapest clients who demand the most from you. Don?t let them take more of your time and energy than they are paying for. Firing clients is very simple. Hi so and so, I don?t feel like we?re a good match for this project, so I?ll be canceling our work agreement. Good luck on your project. 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
2021-08-30
Länk till avsnitt

Advice for New Devs

In this episode of Syntax, Scott and Wes talk about advice for new devs, our advice and opinions for how new devs can level up.

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.

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

01:59 - Get comfortable with your code not working

All of our code is broken much of the time.

02:40 - Compound learning and momentum is your biggest tool

There is no formation without repetition. It sucks to hear, but honestly, if you get a little bit better every single day, you will be WAY ahead in years to come. Keep at it, keep chipping away, take the lows and the highs.

04:05 - Learn to read error messages

Is this error coming from my code? Is this coming from the library? If so, maybe the library wasn?t expecting that. Is this coming from the browser? An extension? Is it even related? Stack trace is a treasure map

09:42 - Take the time to learn the concepts that scare you

They are often easier than they seem (though not every time).

10:40 - We all struggle

This stuff is hard ? give yourself a break.

12:56 - Taking a walk is good for solving bugs

It?s hard to walk away from broken code, but it really helps.

14:33 - Get comfortable with the command line

You?ll need it

18:09 - The ability to replicate a design pixel perfect is a valuable skill

You will be shocked at how many devs can?t or don?t do this. If you want to avoid spending extra time on something, don?t make the designers tell you to go back and fix simple spacing, color, and detail things.

21:26 - You are on a team

Don?t get stuck in the "us vs them" mentality of internal company teams (e.g. devs vs designers). You are all working together to make something.

24:10 - You are not an expert

Even if you think you are an expert, you should always be seeking out alternate viewpoints and ideas. You are a student forever in this game.

26:14 - Scaffold with comments

It helps keep you organized once you get into the mess

28:30 - From Twitter

Tweet thread - https://twitter.com/wesbos/status/1417139639861735424

29:30 - Ben Newton

Soft skills are about as important as coding skills if you want to go far. https://twitter.com/BenENewton/status/1417140062211526658

32:46 - Eric McCormick

Don?t be afraid to push yourself beyond your comfort zone. https://twitter.com/edm00se/status/1417140503527792640

33:31 - Jason Liggi

You don?t have to code for fun. https://twitter.com/Liggi/status/1417141600124346371

35:34 - Andrew Nickerson

Start by building a project that?s interesting to you.
https://twitter.com/Nickvisual/status/1417140742531674118

37:15 - Michael Powers

Ask questions, break things once in a while, learn vanilla everything even if it feels like a waste of time. https://twitter.com/mgrpowers/status/1417141364525912064

39:33 - Jason Liggi

Doesn?t matter how long you do this job, MOST stuff out there will probably be unknown and confusing. https://twitter.com/Liggi/status/1417141322478235653

40:14 - Swashata

Learn to read documentation https://twitter.com/swashata/status/1417142055436910598

49:59 - Max Stoiber

Know your tradeoffs. https://twitter.com/mxstbr/status/1417142461709828101

43:34 - Pat Clarke

Build a rapport with PMs/clients beyond the technical.
https://twitter.com/LeftShotDev/status/1417142505494269954

44:21 - Musa Barighzaai

Leave things better than you found them.
https://twitter.com/mbarighzaai/status/1417142734993907715

45:20 - David Moore

Build things that excite you. https://twitter.com/DavidIMoore/status/1417145783581741067 Links https://johnlindquist.com/ https://github.com/albertlauncher/albert ××× SIIIIICK ××× PIIIICKS ××× Scott: Raycast Wes: Amazon iPhone Repair Kits 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
2021-08-25
Länk till avsnitt

Hasty Treat - Why Do People Hate CSS?

In this Hasty Treat, Scott and Wes talk about why people hate CSS, some common issues, and how you can level up.

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:20 - Layout is hard

block vs inline vs inline-block Learn what this means! Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Grid Avoid floats Wes? Flexbox Course Wes? CSS Grid Course Scott?s Modern CSS Layouts Course

07:43 - I can?t get my thing to get the right style

Use a scoping system like BEM, CSS in JS, CSS Modules Don?t style via IDs Avoid !important

11:00 - My thing isn?t looking the way it?s coded

Dev tools Write CSS in the browser Check class names

12:11 - I don?t know if I can delete this CSS

Use tools like https://purgecss.com/ http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

15:51 - Look at things holistically

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
2021-08-23
Länk till avsnitt

Potluck - Moist code × Memoization × Ready for full-time? × Deadlines × Design ethics × React components × Video hosting × Local fonts × More!

It?s another Potluck! In this episode, Scott and Wes answer your questions about memoization, how to know when you?re ready for a full-time dev job, what to do when you underestimate projects, design ethics, local fonts, 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.

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

04:07 - Can you explain the concept of memoization in JS?

07:27 - I?ve been developing for a while now and I was wanting to know if there is some sort of catalyst that I should be aware of that screams ?you?re ready for a full-time job??

09:26 - I have an ethics question for you. I recently took on a freelance gig that requires a custom admin dashboard, and I wasn?t really sure how to design one of those. My solution was to look up a pre-made Bootstrap dashboard template that can be purchased for $50-$500, and just re-create it myself. I looked at their live demo and reconstructed a very similar dashboard myself, using the same UI library. The outcome is not a perfect copy, although it?s very close, and I never looked at their code base, so there?s probably many differences there. But still, I can understand why some people might be upset by my attempt to copy someone else?s design. I?m not reselling it as a theme, just using it my freelance project with one client. What are your thoughts on this?

16:36 - How do you decide how specific a (React) component should be?

22:03 - My question is about the npm run eject feature of React. Is there a place where I should be using this feature or can I keep on ignoring that it exists?

24:04 - My question is for Scott. In one of the episodes in the past, you mentioned that you use YouTube private videos on leveluptutorials.com using some kind of authentication. If I am not mistaken, you use a different platform to host videos now. Was there any reason to stop using that technique?

31:13 - I?m setting up a webinar. I?m going to require an iLok drive to access the FTP site, so I head over to Ali Baba, and I?m on Ali Baba to buy the things, and I should mention my main concern would be data miners. I mean they?re just like cyber-crackheads, really. So, I would imagine that any latency issues could be compensated through a registrar handshake with the firmware, and I?d love to see a combination of both flash and HTML5, so my question is, would the eCommerce piece embed on the host platform, as well as the dialogue field for user names? Or, would the gateway socket extension be full duplex, as well as the packet switchover?

33:33 - How do you allow users to edit text to their profile or to messages they send to other users, without sacrificing the safety and security of your site?

38:07 - Any tips on how should I use npm packages in Netlify functions? I read that I could commit node_modules (which for me sounds absolutely barbaric) and I also read that I could install netlify-lambda package with an additional postinstall script in the package.json. What?s your approach?

41:07 - Can you disable local fonts from the OS and check if the site actually loads them?

46:02 - I have a question related to freelancing. Yesterday I took on a new client project. Price is locked in and contract is signed. Thing is, I am new to web dev freelancing and I now realise I have totally miscalculated the complexity and size of this project. What I initially estimated I could do in 3-4 weeks suddenly looks more like 6-8 weeks of work for me. Do I break the bad news for the client and ask to extend the deadline, outsource part of the work (which might lead to more hassle), or just buckle up and prepare to pull several all nighters to get on top of it? What would you do?

49:09 - Question to Scott: Have you ever thought of calling your students Scott?s Tots?

Links https://mux.com/ https://vimeo.com/ https://github.com/cure53/DOMPurify https://wesbos.com/sanitize-html-es6-template-strings https://svelte.dev/ https://vercel.com/ https://begin.com/ https://en.wikipedia.org/wiki/Scott%27s_Tots ××× SIIIIICK ××× PIIIICKS ××× Scott: I Think You Should Leave Season 2 Wes: Underground Wire Locator Shameless Plugs Scott:
1: Level Up Tuts Pro - Sign up for the year and save 25%!
2: Become a Level Up Tutorials Author 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
2021-08-18
Länk till avsnitt

Hasty Treat - The Weird and Wonderful Link Tag

In this Hasty Treat, Scott and Wes talk about the  tag ? why it?s weird and wonderful, and what you can do with 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.

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:16 - What is it?

https://ryanflorence.dev/p/ship-weird The link tag is weird. First, it?s not for links! It?s for establishing a relationship between the current HTML document and a resource.

05:11 - CSS / Media attr

07:13 - Web fonts

08:09 - Favicons

Syntax 373: Hasty Treat - The Surprisingly Exciting World of Favicons

08:36 - Preload + Prefetch Resource

Audio, document, fetch, font, image, script, style, track, video, worker + more

10:15 - Fetch request (shoutout Ryan)

11:27 - Preconnect

Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins.

13:01 - Module

13:30 - Integrity

SHA 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
2021-08-16
Länk till avsnitt

How to Build a Website ? The Show For Beginners

In this episode of Syntax, Scott and Wes talk about the basics of building a website ? how to get started for beginners!

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.

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:20 - HTML

HTML is the language you write to get text and elements to show up on the screen Elements can describe the content they contain p img Or be structural and describe the areas of the website div h header, footer Listen to our ep on HTML elements to learn more about them: Syntax 354: The Surprisingly Exciting World of HTML Elements HTML elements have default styling applied to them before you write any CSS This comes from the browser and can be manipulated However, by default all elements are either block or inline-display

08:11 - CSS

If HTML is the bones, CSS is the clothes and skin CSS dictates how a website looks Without CSS, you have text on a blank page and images CSS stands for Cascading Style Sheets (?cascading? being the key word) Adding CSS to a page Link tag Style tag Inline styles Selectors You can select an element on the page via element, class, id, attribute Syntax is selector, brackets, property, value Property A property is what you are changing (e.g. background-color) Value determines how the thing looks background: red; Specificity Specificity is a big part of the cascade. When you apply one style to something, you need to learn how to target things appropriately. This is a huge part of being good at CSS. People develop systems like BEM to organize this General rules - Use elements for base styling and classes for specific styling. Don?t use IDs for styling. !important exists to override everything, but as a general rule, NEVER use it. Seriously. Some interaction Most interaction is done in JavaScript, but CSS has some basics hover, active, focus Pseudo selectors You?ll often see people reaching for libraries to make CSS easier and more consistent Common examples are Bootstrap, Foundation, and TailwindCSS For the most part you?ll want to avoid these until you have a good understanding of the cascade, how CSS works, and how to write good CSS. In addition to properties, you can now write your own custom properties for CSS. While this could be seen as an advanced technique, I believe the new normal is CSS variables first. CSS variables are indicated by ?variableName: value; where variable name takes the place of a property. You can then use the variable via var(?variableName) in place of a property. This allows for easy duplication of same values across your style sheet.

37:08 - JavaScript

JavaScript is used to add interaction to a website It makes your website dynamic

JavaScript the Language

We have a base programming language that has nothing to do with HTML It has things like: Variables - ways to store things Numbers + Math Data Containers - Objects and Arrays Functions - Code grouped together to achieve a certain purpose It also has a ?Standard Lib? which means JavaScript comes with built-in support for doing common things: Formatting time + money Alerting the user Logging a value to developer tools Capitalizing things Sorting lists of things Round or randomize numbers Fetch data Talk to a sever Promises Logic and flow control

JavaScript the DOM

When the HTML is loaded, it?s parsed into something called the DOM (Document Object Model) Events JavaScript is mostly event-driven - when something happens, do something else When you click something and want something else to happen There are lots of events mouse, touch, pointer Ready Forms Submit, change, keyboard, etc. Can be used to fetch data fetch() - you?ll often hear it called Ajax, or XMLHttpRequest Can be used to make more HTML Whole set of APIs for creating elements The DOM can be traversed Links https://css-tricks.com/ https://getbootstrap.com/ https://get.foundation/ https://tailwindcss.com/ ××× SIIIIICK ××× PIIIICKS ××× Scott: Tony Hawk?s Pro Skater 1 + 2 Wes: Mini Split Air Conditioner Shameless Plugs Scott:
1: Level Up Tuts Pro - Sign up for the year and save 25%!
2: Become a Level Up Tutorials Author Wes:
1: All Courses - Use the coupon code ?Syntax? for $10 off!
2: Javascript Notes & Reference 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
2021-08-11
Länk till avsnitt

Hasty Treat - TypeScript Utility Types

In this Hasty Treat, Scott and Wes talk about TypeScript utility types ? what they are, why you might use them, why they exist, 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.

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:35 - Levels of using TypeScript

Typing your code Typing your code, but getting a little bit more dynamic using utility types Creating your own utility types! TypeScript is a language in itself Check out type challenges if you want your mind blown: https://github.com/type-challenges/type-challenges/ https://www.typescriptlang.org/docs/handbook/utility-types.html

07:29 - Partial

08:23 - ReadOnly

09:00 - Required

09:33 - Record

A record is an object type that is a bit more restrictive Say you want to store podcast details - name, URL, showCount, etc., but only for Syntax and Shoptalk.

10:47 - Omit

I find this one handy when I want to create a ?Create Item? type, where it has all the item fields except the ID field

11:34 - Pick

Given a type, pick these properties

12:39 - Return Types

Gives you the type that is returned from a function. Handy if you need to dynamically generate the type based on a passed function.

13:30 - Case

These case types are useful for when you are doing template literal types Uppercase Lowercase Capitalize Uncapitalize 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
2021-08-09
Länk till avsnitt

Potluck - WordPress × 3rd-Party Cloud Services × Backend Hosting × Drupal × Getting Clients × GPS vs BEM × More!

It?s another Potluck! In this episode, Scott and Wes answer your questions about WordPress, Drupal, using SSGs, finding clients when you?re just starting out, scoped CSS, 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.

RevenueCat - Sponsor

RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world?s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.

Show Notes

01:48 - Most small businesses I know have heard of WordPress and it seems like it?s the industry standard for brochure sites. I?m tired of 1-5 page freelance WordPress sites. I love front-end coding and design. Do I need to ?sell? people on static sites or are there freelance jobs out there for Vue/React/whatever static sites for developers? I want to stick with small businesses and a few other niches, but I?m tired of drag-and-drop builders in WordPress. Plus, I feel WordPress is overkill for a majority of sites. I just want to code sites and freelance.

08:53 - I wanted to get your opinion on 3rd-party cloud services that provide some application functionality. Things like auth0, Algolia, open cart etc. I work for a large enterprise where there is a real fear of trusting these companies with our data and so everything is built from the ground up, with less time, and we miss out on some of the sweet features these services provide. Do you use many services like this in your production apps and how would you decide which to use?

16:03 - I recently took Wes? Advanced React course and went on to build my first custom React app! Thanks Wes! When the time came to deploy the app, I was surprised by the asymmetry in hosting options for the front vs. backend. It seems that there are 1000 slick, free-teir options for hosting my front-end. But finding a host for my Keystone backend: barf. I messed around with Heroku but troubleshooting was a nightmare, and I eventually settled on a Digital Ocean droplet. My inner system admin is secretly happy to have another OS instance to manage, but I hate paying 5 dollars a month to host a silly project that will probably never be seen by anyone, and I?m already irritated with the amount of care and feeding the backend needs. What gives? Why are there so many choices for frontend hosts and so few for the backend? Are there hosted backends that have auth, database, image hosting, etc and take care of the nitty-gritty with a newbie-friendly free-tier? Maybe I should I be looking into serverless?

23:21 - Since Drupal has evolved beyond awkward kloog of v7 entity/ctools/json-services/phptemplate erc into v9 with excellent graphql/json/rest support and tomb(?) for non drupal web would you recommend Drupal as for a blogger/businesses? internal network doc/publishing/communications system (ie Drupal not as website itself)?

29:43 - I have just started my web development freelancing business and I feel like I am having a hard time getting a lot of response from small business who currently don?t even have a website (or have a terrible one). Is there any advice you can give about talking people into hiring a web developer when they CLEARLY need help? I plan to use NextJS and Sanity for all of my sites. My first client project is already built using it and it was a great developer experience!

34:30 - What would you guys consider the best alternative to the BEM naming convention? I personally follow a method with very few classes (I?ve seen this called GPS) which takes advantage of the CSS cascade, but I do think it may suffer from readability problems if I handed my stuff to another developer to work on. Interested to hear your thoughts.

39:16 - I have been self teaching myself web development for a little over a year now and your show has been a big help! I am getting to the point now where I feel I am nearly qualified for jobs and will be starting the application journey soon. I currently work in supply chain management at a big corporation with a background in industrial engineering (of which I hold a Bachelors degree). My question for you is - seeing that I have work experience at a big company and a STEM background, do you think this holds any weight in terms of being qualified for a dev job? What I am mainly wondering is how much I should leverage this during interviews and on my resume.

Links https://www.gatsbyjs.com/ https://tina.io/ https://vercel.com/ https://www.netlify.com/ https://circleci.com/ https://github.com/Nexedi/renderjs https://keystonejs.com/ https://www.drupal.org/ https://medium.com/@jescalan/bem-is-terrible-f421495d093a ××× SIIIIICK ××× PIIIICKS ××× Scott: I Was There Too Podcast Wes: Mattias Random Stuff YouTube Channel Shameless Plugs Scott: Advanced Svelte Techniques - 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
2021-08-04
Länk till avsnitt

Hasty Treat - Git the Latest - New Things In Tech - CoPilot, Petite Vue, Stackblitz, Web3 + More!

In this Hasty Treat, Scott and Wes launch a new series called Git the Latest ? New Things In Tech.

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:47 - GitHub CoPilot

AI-powered autocompletion Not going to take your job

07:18 - Next.js 11

Image updates Multiplayer

08:20 - Astro

Build faster websites with less client-side JavaScript

09:50 - Notion API

Get database Query database Pages Block children

11:27 - Petite Vue

Petite Vue is an alternative distribution of Vue optimized for progressive enhancement Similar to Alpine.js Without a build step

13:58 - Stackblitz

Node in the browser Not in the cloud Rolled

15:22 - Solid.js

Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead, it opts to compile its templates down to real DOM nodes and wrap updates in fine-grained reactions. This way when your state updates only the code that depends on it runs.

16:37 - Stately

From the company that made xState

18:05 - Web3

Let us know if you want a show about it Ethereum JavaScript API Apps that run on the Blockchain Links https://alpinejs.dev/ https://svelte.dev/ https://xstate.js.org/ 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
2021-08-02
Länk till avsnitt

ShopTalk x Syntax

In this episode of Syntax, Scott and Wes do a collaboration with Chis Coyier and Dave Rupert from ShopTalk Show! They talk about favorite tech stacks, podcasting, learning new tech, dealing with FOMO, 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:23 - What?s your favorite stack right now?

28:52 - What are your thoughts on WordPress? Do you still use it?

33:59 - What do you want for listeners of Syntax?

38:21 - How do you deal with FOMO / the pressure to learn new tech?

Links https://shoptalkshow.com/469/ Chris Coyier Dave Rupert Syntax 372: CSS Container Queries, Layers, Scoping and More with Miriam Suzanne https://svelte.dev/ https://kit.svelte.dev/ https://mercurius.dev/ https://www.prisma.io/ https://keystonejs.com/ https://graphql.org/ https://redwoodjs.com/ https://nuxtjs.org/ https://astro.build/ https://vercel.com/ https://wordpress.org/ https://dayoneapp.com/ https://automattic.com/ https://mongoosejs.com/ https://www.blink182.com/ https://newsroom.spotify.com/2021-02-22/a-new-era-for-podcast-advertising/ Chase Reeves YouTube Channel https://xdebug.org/ ××× SIIIIICK ××× PIIIICKS ××× Dave: 1: Haikyu!! 2: Nintendo Garage Chris: Ray App Wes: 1: Connor Ward YouTube Channel 2: Ryan Knorr YouTube Channel 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
2021-07-28
Länk till avsnitt

Hasty Treat - The Surprisingly Exciting World of Favicons

In this Hasty Treat, Scott and Wes talk about favicons. Favicons are a bit of mystery and something people don?t talk about that often.

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

03:48 - What are favicons?

Requesting favicons by default /favicon.ico

07:38 - Sizing favicons

16x16 is OG - don?t do that now You can specify multiple sizes

09:41 - File formats

.ico files .png favicons

13:40 - Animated favicons

Canvas Base64

11:36 - SVG favicons

17:19 - Dark mode favicons

18:55 - App Coloring

Isn?t there a new Safari version? Links https://en.wikipedia.org/wiki/Favicon https://caniuse.com/ https://keycode.info/ https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons https://fav.farm/ https://deno.land/ https://uses.tech/ 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
2021-07-26
Länk till avsnitt

Potluck - Svelte × Bleeding-Edge Tech × Git Process × Screencasts × Government Jobs × Permissions-Based APIs × Rescript × More!

It?s another Potluck! In this episode, Scott and Wes answer your questions about Svelte, bleeding-edge tech, best Git processes, Create React App, screencast software, FitBit API, government jobs, Syntax sponsors, 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?.

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

03:15 - I was wondering what you guys think about using the latest of Svelte (svelte-next) in serious projects? Does the improved devEx makes up for the small (but growing) community and lack of libraries? Do you think svelte-next is here to stay or maybe we will get a revamp that breaks backward compatibility in a couple of years, like svelte 2 -> svelte 3?

8:48 - Git question: My process is often that I want to be able to use my last project as a starting point for my next project, with the new project having absolutely no connection or relationship to the old project. What steps can I take to completely sever any ties to the old project? Bonus question: In the new project I would love to eliminate all commits from the old project and start the new project having just one commit, the initial commit with all the code from the old project.

11:05 - Is CRA still useful for building actual production-level web apps these days? People seem to be reaching for Next or Gatsby most of the time, and I feel CRA is mainly used for actually learning React/building personal small websites. Your thoughts? Also, for normal CSR, I feel it is better to use something like Next, and fetch data inside your component (eg: for a dashboard) rather than building one with CRA. Am I wrong?

19:40 - What are your favorite screencast tools? (Linux? Mac? Windows?)

25:53 - Is it a bad trait for beginners to ?give up? easily? By that, I mean instead of taking the time to think of the answer to a problem, they would instead rely on googling the solution and try to understand how it worked afterward.

27:55 - In pursuit of better health I want to track my weight daily using a smart digital scale. The idea is to automate the process of logging my own weight (e.g. stepping on the scale will update my Apple Health and any other integrations I have). After some searching around I landed on the Aria Air (mostly because I like the design and it has the coolest name). One small problem - it does not sync with Apple Health as it is a product from FitBit. They have an API so I?m thinking about running a serverless function daily, around 8 a.m. after I weigh in, to hit the FitBit API, get the data and push it to Apple Health. This way I can stay in the Apple eco-system whilst happily getting this nice, aesthetic digital scale. Any thoughts on how you would personally implement something like this? P.S. My girlfriend thinks I?m crazy, but I know the tinkerer inside Wes will love this.

30:26 - I work for the government with good pay and benefits and love where I work, but I feel like I?m missing out. Working in government we are not always working on the bleeding edge of technology. I do try and learn on my own, but it?s hard sometimes if I don?t put it into practice. I do peek at other job openings and get excited about the tech stack and the things they?re doing. I?m just afraid if I leave I won?t have the stability and benefits I would get from working in government. Any tips or thoughts would be appreciated.

34:24 - Unpopular opinion: Authentication isn?t that hard, but authorization is! What systems have you built to handle when users with specific permissions are allowed (or disallowed) to take actions within your system? What advice would you give to other developers developing permissions-based APIs, assuming their users can have 5-10 different levels of permissions?

40:21 - What are your thoughts on ReScript as an alternative to TypeScript?

44:43 - How come you guys moved to two sponsors on a Hasty and three on a Tasty? Not that it?s a big deal - was just curious of it was to keep up with costs or just because you could and then you?d make more? Either way, the show is awesome and really appreciate your opinions on everything!

48:01 - Have you tried Angular 12? I?d think you?d be pleasantly surprised if you gave it a chance!

52:20 - I have to copy and paste hundreds of products with six rows of details from a spreadsheet into a web interface because there is no API or CSV upload function for this program. Any recommendation on how to automate data entry into web inputs, navigate pages / click buttons, and toggle between applications? BTW, I scored my first web developer job and have to give you guys credit for steering me in the right direction.

Links Svelte Create React App Next.js Vercel iShowU Descript Screenflow Aria Air FitBit Apple Health https://www.gov.uk/ Keystone rescript TypeScript Angular Syntax 359: Hasty Treat - Making a Vaccine Bot with JavaScript Puppeteer uses.tech wes.tech ××× SIIIIICK ××× PIIIICKS ××× Scott: SvelteKit Wes: Wyze Sprinkler Controller Shameless Plugs Scott: Svelte 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
2021-07-21
Länk till avsnitt

Hasty Treat - Stylelint for Linting CSS

In this Hasty Treat, Scott and Wes talk about Stylelint, what it is and why you should 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.

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:15 - What is a linter anyway? Why do you want to lint your CSS?

Does stylelint fix errors or just tell you errors?

04:42 - Getting setup

.stylelintrc stylelint extension Sass High perf animations stylelint order Max nesting depth Declaration strict value { "extends": [ "stylelint-config-standard", "stylelint-config-sass-guidelines" ], "plugins": [ "stylelint-high-performance-animation", "stylelint-declaration-strict-value", "stylelint-order" ], "rules": { "selector-no-qualifying-type": [ true, { "ignore": [ "attribute" ] } ], "plugin/no-low-performance-animation-properties": [ true, { "ignoreProperties": [ "color", "background-color", "box-shadow" ] } ], "indentation": "tab", "order/order": [ "custom-properties", "declarations" ], "order/properties-alphabetical-order": null, "declaration-block-no-duplicate-custom-properties": true, "declaration-empty-line-before": null, "scale-unlimited/declaration-strict-value": [ [ "/color$/", "z-index", "font-size" ] ], "scss/dollar-variable-pattern": "^[a-z][a-zA-Z0-9]+$", "max-nesting-depth": 3, "selector-pseudo-class-no-unknown": null } } Links https://github.com/stylelint/awesome-stylelint JSLint JSHint ESLint 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
2021-07-19
Länk till avsnitt

React 18 - A Look Ahead

In this episode of Syntax, Scott and Wes talk about everything coming in React 18!

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.

RevenueCat - Sponsor

RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world?s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.

Show Notes

04:32 - Automatic Batching

Don?t worry about re-renders

08:32 - New Render API

const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); No more hydrate method (yay!)

10:44 - Suspense

Suspense is basically a promise resolver component - nothing inside will render until promise is resolved. SuspenseList lets you coordinate the order in which loading indicators show up.

16:43 - StrictEffects Mode

https://github.com/reactwg/react-18/discussions/19 Will allow components to mount, unmount, and mount again Will help with fastrefresh and really good dev experience

18:43 - useTransition() Hook

Not an animation hook. They named it this because of the future ability to add animations to React core. Wrap the state update in a ?transition? to prevent the ProfilePage from being unmounted while suspending. This lets React know that it should wait for the update to complete. We classify state updates in two categories: Urgent updates reflect direct interaction, like typing, hover, dragging, etc. Transition updates transition the UI from one view to another.

23:11 - SSR Improvements

React.Lazy will work on the Server Finally! https://github.com/reactwg/react-18/discussions/37 Server-side rendering (abbreviated to ?SSR? in this post) lets you generate HTML from React components on the server, and send that HTML to your users. SSR lets your users see the page?s content before your JavaScript bundle loads and runs. React Server Components

34:45 - ELI5

https://github.com/reactwg/react-18/discussions/46

36:37 - Next.js

Next.js will probably have support for a lot of these features soon. Links https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj https://github.com/reactwg/react-18 https://github.com/reactwg/react-18/discussions Svelte Syntax 127: Hasty Treat - React Suspense Deno ××× SIIIIICK ××× PIIIICKS ××× Scott: SoundSource App Wes: The Changelog 443: Exploring Deno Land Shameless Plugs Scott: Building Svelte Components - 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
2021-07-14
Länk till avsnitt

Hasty Treat - Vite + Parcel 2

In this Hasty Treat, Scott and Wes talk about modern build tools, comparisons between them, and makes them modern and next-level.

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:08 - Next Gen Bundlers are here!

They are easy They are fast They are bundlers They are code splitters They are dev environments HMR / Fast Refresh

07:13 - What do they use under the hood?

Parcel uses SWC (Rust) Vite uses esbuild (Go)

10:29 - How do you use them?

Usually point your app at an HTML file Your HTML file has an ES module It then goes and loads everything from there They have adaptors for different types of files CSS Images Etc. You can also point it directly at files

14:59 - Common use-cases

React / JSX OOTB Vue Svelte TypeScript Both just work Custom Babel config Plugins for both Sass Vite: Detects it, asks to install it Parcel: Detects it, installs it for you PostCSS Processors

20:29 - Custom API

Both have a custom API or ?plugins?, which you can integrate into your app or tooling if needed. Example use-case: a really nice WordPress dev package.

20:57 - Which one?

Both are really good! Parcel 2 has been in dev for 2+ years - unsure when it will launch. Wes: In my experience Vite ?just works? a bit better. Might be a side effect of Parcel being in dev. Both are wicked fast. (Wes: I literally screen recorded JS and CSS updates ~ 10 ms difference either way.) Life is good! Links Top Chef Master Chef Snowpack Webpack Parcel SWC Vite esbuild Rollup SvelteKit Strapi 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
2021-07-12
Länk till avsnitt

Syntax Highlight ? We Review Your Portfolios

In this episode of Syntax, Scott and Wes review your portfolios!

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

03:59 - cudd.io

Shared component animation between home / about really nice Readable, clear Simple Check the contrast ratio on the white text on light blue: https://coolors.co/contrast-checker/ffffff-56ccf2 Nice SSR from Next.js CSS vars Very tall cards without much text, looks like a mistake Better on a short browser window - peep the tall and skinny Card heading should be h3 or h4

10:35 - damonbolesta.com

Nice design = super fun! Good color palette Shows your skills straight up Animation Not accessible - EASY fixes with Axe Dev Tools Text on background images hard to read White text on buttons Bold some words in your bio Border radius

21:52 - walterkjenkins.com

Map is fun Contrast issues with the color choices Transparency not needed on body content Cursive font for links / buttons is a no for me dog Labels on social media icons Hero overlaps section below it Maps data processing should be h4

29:40 - suhit.me

This is an example of a really good one Wicked domain name Design is ON POINT, like this is the type of polish I like to see - I?d hire on this Can?t get enough Inter font Fun little animation I?d go a little easier on the box-shadow Github even has a custom readme Resume Very modern - JS, TS, Bootstrap TypeScript A+ Drop the ?5? and ?3? from ?HTML? and ?CSS? I?d add color to the resume, its likely not printed Don?t need to say Github and LinkedIn in front of the URLs

37:20 - jacobpawlak.com

Initial loading is great - transitions are hot Typography looks nice - not sure about those serif all-cap nav items Slider not very usable View circle on hover is cool, but I?m not sure about following your mouse, covers text T-shirt portfolio is awesome Fun little bits in the footer SSL is broken - fix that sh!t Links don?t show over background images - common issue today External links should probably be indicated as such HTML, paragraphs as h3 & h4, h5, should be

- (i.e. ?here are a few of my recently completed?? should be a

) Design of resume is KEY - different colors, eh?

47:04 - mrtnvh.com

This is a good example of subtle flex of skills FAST AF Makes you say ?Ohhhh? when you click a link (something that?s missing from a lot of these single page sites) Personal Photo A+ Position sticky Love the skills layout on the about page Email is a button I can?t copy your email We have mailto links - don?t reinvent A+ Links Top Chef Syntax 354: The Surprisingly Exciting World of HTML Elements ××× SIIIIICK ××× PIIIICKS ××× Scott: What Had Happened Was Podcast Wes: WAGO Lever-Nuts Shameless Plugs Scott: Building Svelte Components - 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
2021-07-07
Länk till avsnitt

Hasty Treat - JavaScript Event Buzzwords ? Sync, Concurrent, Defer, Blocking, Workers

In this Hasty Treat, Scott and Wes define some JavaScript Buzzwords and talk about what they mean!

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:24 - Synchronous / Async

05:23 - Multi-threaded

JavaScript has a single ?main thread? But you can have more threads with web workers

08:12 - Blocking

JavaScript can stop other things on the page from running A script tag can block HTML from being parsed Most stuff in JavaScript is non-blocking Node.js write to filesystem can be blocking

10:27 - Concurrent + Parallel

JavaScript start/stop are concurrent The API runs on a different thread Doesn?t REALLY matter https://joearms.github.io/published/2013-04-05-concurrent-and-parallel-programming.html

13:22 - Consecutive / Waterfall

One after another

13:48 - Callback

A function to run when this thing happens or is done Click event callback Websocket on data callback Like a tweet stream Data fetch callback Almost entirely replaced with async + await http://callbackhell.com/ https://caolan.github.io/async/v3/

17:56 - Script Tag Async + Defer

Doesn?t block other content Runs when ready - doesn?t care about DOMcontentLoaded Wait until the page is loaded before running If the script tag is above content, don?t wait for it Good for things that aren?t called on page load

21:54 - Lazy

Load it in later - maybe when it?s scrolled into view, or as needed Not mission-critical 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
2021-07-05
Länk till avsnitt

Dev Tools Power ? Elements Tab

In this episode of Syntax, Scott and Wes talk about the Dev Tools Elements Tab ? all the features, and when you would use them!

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.

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

03:13 - Elements

Learn to open the Elements panel and the console right away ? right-click inspect element is weak! Drag-and-drop elements Edit as HTML Click to select use in JS console $0 ? Add Attribute Breadcrumbs Flex (Chrome now!) Break on ? Node removal Scroll into view Expand / Collapse

16:59 - Styles

:hov .cls Element style Layout - Box Model Layout - Grid Layout - Flexbox Toggle Print/Light/Dark

25:03 - Panel

Escape to open close No longer has to be JUST Console Computed Styles Great to find out what value it?s actually using without scrolling through the cascade Toggle browser styles on and off Fonts Tab Super handy to find the used font, spacing, size, weight, etc. You can also see all fonts used on a page Animations Tab Changes Shows the CSS that has changed since you have been goofing around.

38:18 - Settings

Show what?s new https://chrome.google.com/webstore/detail/material-devtools-theme-c/jmefikbdhgocdjeejjnnepgnfkkbpgjo Experiments

43:39 - Compatibility

Links Firefox Chrome Canary Brave Can I Use ××× SIIIIICK ××× PIIIICKS ××× Scott: Problematic Roller Coasters Wes: Scrapyard Finds! Repair-A-Thon! Cordless Tools Galore! Shameless Plugs Scott: Svelte Kit - 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
2021-06-30
Länk till avsnitt

Hasty Treat - Seven Interesting JavaScript Proposals - Async Do, JSON Modules, Immutable Array Methods, and More!

In this Hasty Treat, Scott and Wes talk about seven new JavaScript proposals ? what they do, where they?re at, and how you might use them.

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

03:32 - Seven new JavaScript proposals

https://github.com/tc39/proposals

06:25 - JSON Modules

https://github.com/tc39/proposal-json-modules Builds on the import assertions No named exports Not executed, to avoid security issues Not in Node yet

09:55 - Array Find From Last

https://github.com/tc39/proposal-array-find-from-last The problem: you need to group together async code.The only way to do that right now is to wrap it in a function.

11:40 - Async Do

https://github.com/tc39/proposal-async-do-expressions Async do will allow you to group together a block of code and mark it as async. No need for an iife Downside to this is that it?s a code block, so if you need to return any values, you?ll need to jump that up a scope level. Promise.all([ async do { let result = await fetch('thing A'); await result.json(); }, async do { let result = await fetch('thing B'); await result.json(); }, ]).then(([a, b]) => console.log([a, b]));

14:33 - Change Array By Copy

https://github.com/tc39/proposal-change-array-by-copy Like old array methods, but returns a new array rather than mutating

17:48 - Temporal

https://github.com/tc39/proposal-temporal Stage 3, looking good! Amazing, large, very good Date API Syntax 295: Hasty Treat ? Temporal Date Objects in JavaScript

18:35 - As Patterns

https://github.com/zkat/proposal-as-patterns Scott don?t get it Stage 0 when ([ ?go?, (?north? | ?east? | ?south? | ?west?) as dir ]) { ? }

20:47 - Pattern Matching

https://github.com/tc39/proposal-pattern-matching VERY Rust-like https://doc.rust-lang.org/1.6.0/book/patterns.html Stage 1 {props => match (props) { when ({ loading }) { ; } when ({ error }) { ; } when ({ data }) { ; } }} 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
2021-06-28
Länk till avsnitt

Potluck - Web components × Gear × Docker × Web Dev Frameworks × Golden Handcuffs × Browser Testing × SSR React × Code Prediction × More!

It?s another Potluck! In this episode, Scott and Wes answer your questions about web components, gear, Docker, web dev frameworks, golden handcuffs, browser testing, SSR React, code prediction, 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.

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:08 - Is there a mechanism for exporting a React/Vue/Svelte component as a web component?

11:42 - You guys chat a lot about your sweet gear and desk setups. As a newcomer to web development it?s all a little expensive for me to mimic what you have; at least before I?ve learned enough to justify investing in better equipment. My question is: what are the minimum specs (laptop/monitor/etc) you would recommend a beginner just starting out in webdev?

22:35 - I rarely, if ever, hear you guys or any other web dev related podcast mentioned Python, Flask, Django etc. Do you have any experience with those frameworks and can you give any thoughts you may have on Python as a language for back end development.

26:47 - What do you think of using Docker containers to do development work? I have seen a couple articles talking about it, but it doesn?t seem super common to use since few GitHub projects have Dockerfiles in their repos.

32:19 - I?ve often heard you two talk about the idea of the ?golden handcuffs?, where a job pays well, but the employees are miserable. I think I might be in that situation right now. I?ve tried organizing my day so my time is better segmented. I can?t tell if this is the natural progression of a developer advancing in their career and I just need to adjust better, or if I need to make a change. Any advice or tips you have to better manage time or decide what?s next would be much appreciated.

37:28 - When it comes to desktop browser testing, is there a difference anymore is browser rendering engines? Do most (if not all) browsers use Google?s rendering engine?

39:20 - As someone who got into the industry relatively recently (around 2019), component frameworks and single-page applications were my introduction to web development. I am now really interested in learning more about the ?traditional? way of doing things, 100% server-rendered. What?s my recourse here? Ruby on Rails, Laravel, something else? Is there an agreed upon ?modern? way to do a server-rendered monolithic app?

43:43 - I wish to ask the kind of plug-in, extensions or stand-alone software you use for code prediction and to help you code faster. I personally use Kite and VS Code?s intellisense, it seems to get it wrong more times than right. Do both of you have any recommendation?

47:18 - Is there any benefit to using prop types in TypeScript for React projects?

48:14 - I?m currently planning to build an audio-focused app (maybe even more than one actually), and I?ve been wondering how you would solve the problem of storing and fetching (on-demand) hundreds, perhaps thousands, of little audio-files. I?ve got some deep reservations against AWS, although I?m somewhat familiar with it - the complexity, hidden (and hard to estimate) costs etc. I?m thinking about Digital Ocean or something like that. Would it be too hard to implement things like caching and such yourself. Any thoughts?

Links https://www.npmjs.com/package/react-to-webcomponent https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9 LearnNode.com Transistor.fm ××× SIIIIICK ××× PIIIICKS ××× Scott: A Death In Cryptoland Podcast Wes: Affinity Designer Shameless Plugs Scott: Svelte Kit - Sign up for the year and save 25%! Wes: Beginner JavaScript Notes 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
2021-06-23
Länk till avsnitt

Hasty Treat - CSRF Explained

In this Hasty Treat, Scott and Wes talk about CSRF (Cross Site Request Forgery)!

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

05:40 - What is it?

https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html#samesite-cookie-attribute Someone can submit a form FROM or TO your domain, automatically.

07:50 - Solutions

SameSite Cookie https://medium.com/swlh/secure-httponly-samesite-http-cookies-attributes-and-set-cookie-explained-fc3c753dfeb6 Lax ? Default value in modern browsers. Cookies are allowed to be sent with top-level navigations and will be sent along with GET requests initiated by a third party website. The cookie is withheld on cross-site subrequests, such as calls to load images or frames, but is sent when a user navigates to the URL from an external site, such as by following a link. Strict ? As the name suggests, this is the option in which the Same-Site rule is applied strictly. Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites. The browser sends the cookie only for same-site requests (that is, requests originating from the same site that set the cookie). If the request originated from a different URL than the current one, no cookies with the SameSite=Strict attribute are sent. None ? Cookies will be sent in all contexts, i.e sending cross-origin is allowed. The browser sends the cookie with both cross-site and same-site requests. CSRF Token Check Origin / Referrer Headers Captcha Ask for Password Token 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
2021-06-21
Länk till avsnitt

CSS Container Queries, Layers, Scoping and More with Miriam Suzanne

In this episode of Syntax, Scott and Wes talk with Miriam Suzanne about all things CSS ? container queries, layers, scoping, 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.

RevenueCat - Sponsor

RevenueCat makes it easy to build and manage iOS and Android in-app purchases. With a few lines of code, RevenueCat provides IAP infrastructure, customer analytics, data integrations, and gives you time back from dealing with edge cases and updates across the platforms. Created by developers, for developers, thousands of the world?s best apps use RevenueCat to power their in-app purchases and subscriptions. Get started for free at revenuecat.com.

Guests Miriam Suzanne Show Notes

02:21 - When did you come on board with container queries?

10:27 - How would you declare specificity?

Layer example: @layer default; @layer theme; @layer components; @import url(theme.css) layer(theme); @layer default { audio[controls] { display: block; } }

13:08 - What is your background?

18:20 - What are container queries?

22:06 - What is the background on contain? How does it work?

https://developer.mozilla.org/en-US/docs/Web/CSS/contain

29:25 - Is it still under development?

https://www.igalia.com/open-prioritization/index

33:51 - Have you tried the EQ polyfill from Johnathan Neal yet?

35:21 - How far out are we?

38:10 - What is Scope?

44:00 - How will MQ and CQ work together?

45:49 - Do you use inline and block?

48:44 - What browser do you use?

Links OddBird Susy Jonathan Neal FireFox Codepen https://github.com/w3c/csswg-drafts https://twitter.com/TerribleMia ××× SIIIIICK ××× PIIIICKS ××× Scott: Reelgood Wes: Embroidery machine Shameless Plugs Miriam: OddBird Scott: 1: SvelteKit 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! 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
2021-06-16
Länk till avsnitt

Hasty Treat - What is SvelteKit?

In this Hasty Treat, Scott and Wes talk about SvelteKit ? what it is and why you might want 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.

Show Notes

03:28 - What is it?

Total platform for building Svelte apps Built in Vite.js Includes all of the Vite goodness but it hides behind the scenes for the most part Host anywhere

05:16 - Is it CSR, SSR, SSG, WTF?!

All of the above. Uses adapters to control the output: kit: { // hydrate the element in src/app.html target: '#svelte', adapter: adapter() }

09:45 - What you get out of the box

File-based routing API routes Layouts and layout resets Fancy file titles [slug] __layout Code splitting & preloading PostCSS TypeScript support

17:03 - Neat small things

Glob import https://github.com/svelte-add/svelte-add Links SvelteKit Next.js Gatsby.js Sapper tailwindcss @chriscoyier 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
2021-06-14
Länk till avsnitt

Potluck - Immutability × Turning Off Your Brain × Types vs Interfaces × Hooks vs Components × Making the Most of Your First Job × Confidence in Svelte × More!

It?s another Potluck! In this episode, Scott and Wes answer your questions about immutability, turning off your brain, managing copy on a website, problem-solving, types vs interfaces, hooks vs components, 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.

Coudinary - 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

01:24 - I?m finally getting onboard with the GraphQL train and have a specific question about nomenclature. Having worked with redux in the past, IMMUTABILITY was a concept ingrained in my head. I continue to see benefits of immutable updates across all sorts of libraries, frameworks, vanilla js, etc. Learning about GraphQL now, I?m taken aback by the fact that CUD (create, update, delete) operations are called MUTATIONS. Is there a reason that we use the ?mutation? terminology, despite the fact that best practices dictate that we should implement immutable updates to objects? Does GraphQL actually mutate objects behind the scenes?

06:38 - How do you sleep at night?!? I mean, how do you switch off your brain when you?re trying to go to sleep and your brain just wants to keep on coding?

12:15 - How do you manage copy and microcopy on a site? Should you put every piece of text across the entire site into a CMS so the client can change it? Or just the parts you think may be updated in the future? Or do you just hard-code everything directly into the markup? Or collect it all into an importable JSON file?

21:41 - I am new to using CMSs and I was wondering for applications that require a lot of content management where a CMS or headless CMS such as Contentful is ideal but also requires dynamic queries such as recommended content to the end-user based on browsing history. How do you approach integrating the user data in combination with the data being received and handled from the CMS? A separate API and database? Or is this a scenario that a CMS doesn?t fit?

25:56 - When solving a problem, do you do it through trial and error? Or do you carefully think through every solution and choose the best one before actually implementing it into code?

28:14 - How can we take advantage of this new partnership between 1Password + SecretHub! I feel like this is getting into DotEnv but sounds so much more interesting.

32:34 - When creating types in TypeScript, when should someone use a type over an interface? While I generally understand the differences, it seems like interfaces offer more flexibility. I am struggling to understand why I would ever use a type.

36:34 - I?ve recently started using TypeScript in React, and typically I?m just using function components. I?ve seen some people saying that classes are really great with TypeScript in React but I haven?t found any real use case/benefits myself yet. How about you guys, do you use classes in React/TypeScript?

38:17 - What are your opinions on generators like Yeoman?

44:26 - I?ve been looking for a career in web for a couple of years now and I?ve recently landed a job with a small agency getting paid hourly making WordPress websites, that I?ll be starting in two weeks. I?m worried that I?m going to get stuck pushing Divi sites all the time. I know this is a good opportunity for me but I was hoping you guys can shed some light and give me some tips on how I can put my skills to good use.

48:35 - What are your approaches for caching a GraphQl API?

52:30 - You mentioned in an earlier Potluck that Svelte is probably the easiest framework to learn. How confident can one be to start a new project with Svelte? Being a technical lead, can I propose our team to work with Svelte? Are there enough material/solution on the web and is the community established?

Links ZMA Supplement Tina https://twitter.com/gusfune/status/1372243283758419977 1Password SecretHub TypeScript Syntax 348: TypeScript Fundamentals ? Getting a Bit Deeper Syntax 042: Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman https://www.npmjs.com/package/zx Yeoman Mercurius Apollo Svelte ××× SIIIIICK ××× PIIIICKS ××× Scott: Contigo Shake & Go Wes: Deli Containers Shameless Plugs Scott: 1: Become a Level Up Tutorials Author 2: Level Up Tutorials Pro Spring Sale - 50% off annual subscriptions! 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
2021-06-09
Länk till avsnitt

Hasty Treat - Making a Vaccine Bot with JavaScript

In this Hasty Treat, Scott and Wes talk about Wes? experiment building a vaccine bot!

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

07:32 - First step

Finding the data. Open up dev tools. Copy as Node.js Fetch in Chrome Two ways to do this - Puppeteer, or raw requests, or a mix.

11:03 - Variablizing it

Store IDs Booking form IDs Vaccine IDs

12:56 - Finding out any restrictions

Is there a cookie? Is there an XSRF? Do these things change? How often can you hit it?

15:20 - Caching

Array variable

16:59 - Delivering the notifications

Telegram Links https://github.com/wesbos/vaxbot 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
2021-06-07
Länk till avsnitt

React + TypeScript

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
2021-06-02
Länk till avsnitt

Hasty Treat - How to Make Money as a Creator

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
2021-05-31
Länk till avsnitt

Bike Shedding ? Developer Opinions Explained

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
2021-05-26
Länk till avsnitt

Hasty Treat - JavaScript?s Drag and Drop API

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
2021-05-24
Länk till avsnitt

The Surprisingly Exciting World of HTML Elements

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

 

2021-05-19
Länk till avsnitt

Hasty Treat - Stylin the Unstylables

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
2021-05-17
Länk till avsnitt

Potluck ? Freelancing × Leveraging your experience × Component size × Dealing with mediocrity × How to spend ?extra time? × Rust vs Node × Free hosting? × More!

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
2021-05-12
Länk till avsnitt

Hasty Treat - Technical Debt

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
2021-05-10
Länk till avsnitt

Potluck ? Is it worth it to still learn WordPress? × Is Safari the new IE11? × Mobile website testing × Pirated content × Styled components × SSGs × Transitioning to full-time freelance × More!

It?s another Potluck! In this episode, Scott and Wes answer your questions about blogging best practices, support IE11, Nest.js, mobile website testing, pirated course content, building .edu websites, transitioning to full-time freelance work, 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.

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:20 - I am adding a blog to my custom written personal website and I wanted to know if there is any best practices for storing blog posts? My hope is to write them in markdown, host them somewhere and then automatically feed them into my website so they are all formatted to the style of my website.

05:37 - Do you care if people share cool, unique tips from your courses publicly on social media? For example, I once shared out a trick from one of Wes? courses for how to set your VS Code windows different colors to distinguish your server and client code windows (giving all credit to Wes? course for the concept). But it felt a little weird that I was sharing out a portion of his paid content for free. Is that okay? Where?s the line?

18:18 - With official support of IE11 coming to an end on August 17, 2021, do you think developers should still try to support ir or focus only on new modern browsers? Also, will there be a new ?lowest common denominator? that we should be aware of and support?

07:20 - Thanks for an awesome podcast! Have you looked into Nest.js (not to be confused with Next.js) for backend work? It is an open source TypeScript Node framework that is becoming pretty popular

22:48 - Do you think it?s worth learning WordPress for freelancing if you aren?t too confident in your JavaScript front-end design? Also, I don?t want to get stuck in only WordPress land just because of the money.

30:11 - Hi guys, I have been listening to you guys for a while and just recently launched my first website! Your podcast has been a huge help in terms of getting started. For the website I made, I tested the iPhone view on Chrome dev tools and everything looked fine. However, when viewing the website on an actual iPhone, the button is too small and the word ?Menu? turns into ?Men?. Any advice on how to more accurately test sites on mobile devices without pushing to a production branch?

36:52 - Do you guys ever see your premium courses pirated on sites like UdemySkillshare, any of the other video course platforms? Meaning somebody downloaded your videos and uploaded them as if they were the creator. Any tips to protect against this?

39:53 - Looking at uses.tech and thinking, I see a lot of class names with almost the same style, gKxjCc and hSiXhL. I really want to know the science behind generating those. Do you have a shared classes that some magic tool transfers them into ugly names and copies over? What is that tool? And is it worth it?

42:57 - Have you ever developed a .edu site? If so, what did you use to manage the enormous archives in addition to giving the site a simple page builder for departments to contribute with little or no interaction from the developer? No Joomla or Drupal please - been there. Thanks for the great help guys!

50:35 - Hi Wes & Scott, thank you so much for giving me my weekly motivation boost to try out new stuff. Currently, I am experimenting with Next.js and SSG and I would like to know how I can generate a page at build time but only show it to an authorized user. I know I could use SSR with getServerSideProps to check allowance, however, the page is completely static without any dynamic content and I don?t want to regenerate it with every request. Is there a way to achieve this? Keep up the great work.

54:59 - I love the show guys! I want to make the transition into full-time freelancing and wanted to know what you think about having a talk with my current employer to see if they?d be willing to take me from full-time to a contract/freelance basis. Bad idea? Thoughts? Advice?

Links Fastify RedwoodJS Keystone.js 10up Vite Safari + Dev tools Browsersync localtunnel ngrok Xcode simulator Mike Birbiglia Brian Douglas YouTube Channel ××× SIIIIICK ××× PIIIICKS ××× Scott: 3 in 1 Multi USB Charging Cable Wes: Milk Frother 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
2021-05-05
Länk till avsnitt

Hasty Treat - Future Tech We?re Excited About

In this Hasty Treat, Scott and Wes talk about future tech ? some things you may not have heard about yet, and why we?re excited about them!

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.

Show Notes

05:20 - Astro

What it is: astro.build is a next gen ?meta? framework that eases some of React?s pain but also is not just React. https://twitter.com/georges_gomes/status/1380801812656226304 Why we?re excited about it: Server Side JS frameworks, combine Svelte, React, Vue as needed in one component that is an SFC using markdown style meta data. Scoped CSS by default (a la Svelte). Sass out of the box. Collections import for .md files // pages/blog.astro --- import PostPreview from '../components/PostPreview.astro'; const blogPosts = import.meta.collections('./post/*.md'); --- Blog Posts {blogPosts.map((post) => ( )}

12:06 - ViteKit

What it is: Framework-agnostic API routes Pages (frontend, optional hydration) Adapter for Node, static, Vercel, cf worker, etc. Inspired by SvelteKit.

15:58 - Svelte Kit

What it is: https://kit.svelte.dev/docs https://svelte.dev/blog/sveltekit-beta New framework for building Svelte apps

19:07 - Remix.run

What it is: Remix.run Fullstack React framework Why we?re excited about it: Made by Michael Jackson, Ryan Florence License-based React-based Caching-focused, uses ?the platform? Centralized data loading, works without client JS if needed Better nested routing Links Sapper Vite Snowpack 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
2021-05-03
Länk till avsnitt
Hur lyssnar man på podcast?

En liten tjänst av I'm With Friends. Finns även på engelska.
Uppdateras med hjälp från iTunes.