Logo
    Search

    Podcast Summary

    • Prismic introduces new 'slices' feature for flexible webpage creationPrismic's new 'slices' feature lets users create reusable webpage sections, mirroring React components, offering a balance between customization and ease of use.

      Prismic, a popular CMS, is introducing a new feature called "slices" which allows users to create reusable sections of a webpage, offering a flexible solution between drag-and-drop no-code platforms and fully custom coded websites. This funding-backed development enables users to create and mirror components from their React applications into Prismic, making them available as inputs, or "slices," for website creation. Prismic's recent announcement also includes an impressive space-themed website design, showcasing the smooth scrolling experience. This new feature aims to provide a balance between customization and ease of use, making it an exciting development for web developers. Additionally, Prismic has recently raised $20 million in funding, demonstrating their commitment to this new direction.

    • New features in Sentry for efficient error managementSentry's new 'for review' tab lets users assign errors to team members, customize errors by country, and offers a coupon code for two months free with Century I0 as sponsor. These updates streamline error tracking and provide more detailed insights.

      Sentry, a error tracking tool, has recently added new features to make error management more efficient. One of these features is a "for review" tab, which allows users to assign specific errors to team members for review. Another feature is the ability to customize errors by country, providing valuable insights into where most errors are originating. Additionally, Sentry is offering a coupon code for two months free for those who sign up with Century I0 as their sponsor. CSRF (Cross-Site Request Forgery) was also briefly discussed. This security vulnerability occurs when an attacker tricks a user into making an unintended request to a website, using the user's authentication credentials. To prevent CSRF attacks, websites check for valid authentication tokens with each request. Sentry's new features aim to streamline the error tracking process and provide more detailed information, making it easier for teams to address issues and improve website performance. The ability to assign errors for review and view errors by country are just a few examples of how Sentry is continually adding value to its platform.

    • Preventing Cross-Site Request Forgery attacks with SameSite cookiesSet SameSite cookie property to 'strict' to limit cookie usage to the same site, reducing CSRF attack risk

      Websites can be vulnerable to cross-site request forgery (CSRF) attacks, where a malicious website tricks your browser into making unintended requests to another site on your behalf. For instance, if you're logged into your bank account and visit a malicious site, it could submit a form to transfer your funds without your knowledge. To prevent this, you can use various security measures. One such method is setting the SameSite cookie property. Cookies are small text files sent between your browser and a website, and they can be used to authenticate users. By default, cookies are sent with requests to any origin (lax), but you can also set them to be sent only to the same site (strict) or not sent at all (none). By using the strict SameSite cookie setting, you can limit the scope of cookies to the same site, preventing them from being sent to third-party sites and reducing the risk of CSRF attacks. It's important to note that this is just one of several measures you can take to secure your website against CSRF attacks. Other methods include using anti-CSRF tokens and implementing server-side validation. In summary, understanding the risks of CSRF attacks and implementing appropriate security measures, such as using the strict SameSite cookie setting, can help protect your website and your users' data.

    • Protecting Against CSRF Attacks with Cookies and TokensUse 'SameSite' attribute in cookies and CSRF tokens to prevent unauthorized requests and protect against CSRF attacks. Both measures should be used together for added security.

      Implementing the "SameSite" attribute in cookies and using CSRF tokens are important security measures to prevent cross-site request forgery (CSRF) attacks. The "SameSite" attribute restricts cookies to be sent only to the domain that originally set the cookie, preventing cookie theft and subsequent unauthorized requests. CSRF tokens are unique values that get generated when a user loads a page with a form and sent along with the form when it's submitted, ensuring that only the intended user can submit the form. Both measures should be used together as additional layers of defense, as the "SameSite" attribute alone may not be sufficient in all cases. The importance of these measures is highlighted by the fact that they are commonly built into popular frameworks and packages, and security audits in industries like banking software often require their use. However, it's important to note that while these measures provide significant protection, they should not be the only security measures in place.

    • Securing Cookies and Preventing CSRF AttacksOlder browsers may not support SameSite attribute, so checking origin and referrer headers can help ensure secure cookie processing. Be aware of potential spelling mistakes in headers and use CAPTCHAs and user experience management to prevent unauthorized access.

      Securing cookies and preventing Cross-Site Request Forgery (CSRF) attacks requires a deep understanding of browser security features and potential compatibility issues. The SameSite attribute is important for securing cookies, but older browsers might not support it. In such cases, checking the origin and referrer headers can help ensure that only expected requests are processed. It's also important to be aware of potential spelling mistakes in headers, like the infamous "referrer" vs. "referer" confusion. Additionally, using CAPTCHAs and carefully managing user experience can help prevent unauthorized access or modifications. Overall, implementing robust security measures involves a balance between protection and user experience, and staying informed about the latest browser security features is crucial.

    • Using pre-made frameworks for implementing security measuresImplementing security measures is essential, and using pre-existing frameworks can save time and resources by handling complexities for you, but it's crucial to have a strategy and know what's sufficient for your specific case.

      Implementing security measures in software development is crucial, but it doesn't always require building everything from scratch. Using pre-made frameworks can save time and resources by handling the complexities for you. During a recent discussion on the Syntax podcast, the hosts touched upon their experiences with implementing security strategies in their application at Syntex. They emphasized the importance of having a strategy and knowing what is enough for your specific case. While they didn't delve too deep into the topic, they agreed that having a framework in place can help developers avoid going down rabbit holes and learning everything on their own. The podcast concluded with a reminder to join them again on Wednesday for the next episode and to check out the full archive on syntax.fm. Don't forget to subscribe or leave a review if you enjoy the show.

    Recent Episodes from Syntax - Tasty Web Development Treats

    790: State of JS 2023 Reactions

    790: State of JS 2023 Reactions

    Scott and Wes dive into the 2023 State of JavaScript survey, breaking down the latest trends and pain points in front-end frameworks, build tools, and JavaScript runtimes. Tune in for their hot takes and insights on what’s shaping the JavaScript landscape this year!

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    789: Do More With AI - LLMs With Big Token Counts

    789: Do More With AI - LLMs With Big Token Counts

    Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    788: Supabase: Open Source Firebase for Fullstack JS Apps

    Scott and CJ chat with Paul Copplestone, CEO and co-founder of Supabase, about the journey of building an open source alternative to Firebase. Learn about the tech stack, the story behind their excellent documentation, and how Supabase balances business goals with open-source values.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 Who is Paul Copplestone?
    • 01:17 Why ‘Supa’ and not ‘Super’?
    • 02:26 How did Supabase start?
    • 08:42 Simplicity in design.
    • 10:32 How do you take Supabase one step beyond the competition?
    • 12:35 How do you decide which libraries are officially supported vs community maintained?
      • 15:17 You don’t need a client library!
    • 16:48 Edge functions for server-side functionality.
    • 18:51 The genesis of pgvector.
    • 20:59 The product strategy.
    • 22:25 What’s the story behind Supabase’s awesome docs?
    • 25:26 The tech behind Supabase.
    • 35:46 How do you balance business goals with open source?
    • 42:01 What’s next for Supabase?
    • 44:15 Supabase’s GA + new features.
    • 48:24 Who runs the X account?
    • 50:39 Sick Picks + Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    CJ: X Instagram YouTube TwitchTV

    Randy: X Instagram YouTube Threads

    787: You Should Try Vue.js

    787: You Should Try Vue.js

    Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.

    Show Notes

    Vue.js: The Documentary.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    786: What Open Source license should you use?

    786: What Open Source license should you use?

    Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you’ll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they’ll help you choose and apply the right license for your project.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    785: What’s Next for NextJS with Tim Neutkens

    785: What’s Next for NextJS with Tim Neutkens

    Scott and Wes dive into the world of Next.js with special guest Tim Neutkens from Vercel. They explore the latest updates, including the React Compiler and React Server Components, discussing their impact on developer workflows and the future of Next.js development.

    Show Notes

    • 00:00 Welcome to Syntax!
    • 00:30 What does the React Compiler do?
    • 05:04 Will React Compiler help with managing Context?
    • 06:39 What happens if you’re not using a React Compiler?
    • 09:30 Will this work on any NextJS version?
    • 12:18 What are React Server Components?
    • 16:28 Shipping all the data inside an encapsulated component.
    • 20:17 Clearing up the frustrations around retrofitting server components.
    • 23:13 Handing migration.
    • 28:30 Is this just a fetch request with props?
    • 36:41 How closely are the NextJS and React teams working?
    • 41:53 Will we ever get Async Client Components?
    • 43:52 Async Local Storage API.
    • 45:31 Turbopack.
    • 57:51 Sick Picks & Shameless Plugs.

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    784: Logging × Blogging × Testing × Freelancing

    784: Logging × Blogging × Testing × Freelancing

    In this Potluck episode, Scott and Wes tackle listener questions on modern blogging, website environmental impact, and using LangChain with LLMs. They also cover CSS hyphens, unit vs. integration testing, and balancing web development with new parenthood.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    783: How We Built a Netflix Style “Save for Offline” Feature Into Syntax

    Scott and Wes dive into the world of browser caching for audio files, exploring the File System API and the Cache API. They discuss size restrictions across different browsers, how tools like Riverside.fm leverage IndexedDB, and walk through code examples for creating, retrieving, and managing cached audio data.

    Show Notes

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    782: The Developer’s Guide To Fonts with Stephen Nixon

    782: The Developer’s Guide To Fonts with Stephen Nixon

    Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    781: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode

    In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott:X Instagram Tiktok LinkedIn Threads

    Randy: X Instagram YouTube Threads

    Related Episodes

    SE Radio 563: David Cramer on Error Tracking

    SE Radio 563: David Cramer on Error Tracking

    In this episode, David Cramer, co-founder and CTO of Sentry, joins host Jeremy Jung for a conversation about error tracking. The discussion starts with treating performance problems as errors, why you might not need logs, and how most applications share the same problems. From there they consider other topics including capturing information by hooking into runtimes and frameworks, issues with the quality of Open Telemetry data, how front-end applications are constantly changing and why that makes them hard to instrument. Finally, they discuss how Sentry's architecture has evolved, and why they switched from a permissive license to the Business Source License.

    This vs That × map vs reduce, forEach vs for in, and more!

    This vs That × map vs reduce, forEach vs for in, and more!

    In this Hasty Treat, Scott and Wes do a little this vs that with map vs reduce, forEach vs for in, .hasOwnProperty() vs in vs .hasOwn(), CSS absolute + left/right/top/bottom vs transform, 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.

    Show Notes

    • 01:30 Sponsor: Prismic
    • 02:58 Sponsor: Sentry
    • 04:21 .filter() and .map() (every, one, etc…) VS Reduce
    • 09:17 .forEach() vs for in / for of
    • 15:52 .hasOwnProperty() vs in vs .hasOwn()
    • 19:37 CSS absolute + left/right/top/bottom vs transform
    • 22:54 Object.assign({}, obj) vs {…spread}
    • Animal Friendly idioms

    Tweet us your tasty treats

    How To Be Consistent

    How To Be Consistent

    In this Hasty Treat, Scott and Wes talk about their tips and tricks for being consistent if you’re trying to create.

    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.

    MagicBell - Sponsor

    MagicBell is the The notification inbox for your product. Add a MagicBell to your product for announcements, billing, workflow, and other notifications. The free plan supports up to 100 Monthly Active Users - use the coupon code SYNTAXFM for 10% off the first 12 months.

    Show Notes

    • 00:44 String cheese theory
    • 01:49 Sponsor: Sentry
    • 03:41 Sponsor: MagicBell
    • 05:26 Being consistent is the key to success
    • 07:12 Commit to it
    • 09:13 Plan and schedule
    • 13:42 Being accountable to someone
    • 18:11 Break things down into smaller tasks
    • 20:25 Measure goals
    • 22:14 Revise the plan

    Tweet us your tasty treats

    718: React Server Components

    718: React Server Components

    Wes and Scott talk through server components, the difference between server components and client components, reasons to run something server side, how server components work, using forms and buttons, what they like and don’t like about it, and tips to learn more.

    Show Notes

    Sick Picks

    Shameless Plugs

    Hit us up on Socials!

    Syntax: X Instagram Tiktok LinkedIn Threads

    Wes: X Instagram Tiktok LinkedIn Threads

    Scott: X Instagram Tiktok LinkedIn Threads

    Hasty Treat - Communication Skillz

    Hasty Treat - Communication Skillz

    In this Hasty Treat, Scott and Wes talk about communication — why it’s important, how to improve, building good habits, tools and more!

    Sentry - Sponsor

    If you want to know what’s happening with your errors, track them with Sentry. Sentry is open-source error tracking that helps developers monitor and fix crashes in real time. Cut your time on error resolution from five hours to five minutes. It works with any language and integrates with dozens of other services. Syntax listeners can get two months for free by visiting Sentry.io and using the coupon code “tastytreat”.

    Show Notes

    3:59 - Why it’s important

    • Projects can live or die by the team’s communication
    • Project timelines can be disrupted leading to big problems with scheduling

    5:53 - How to improve communication skills

    • PRACTICE
    • Pay attention to what works
    • Have a system – standups, weekly meetings, etc.
    • Over communicating can be annoying but effective
    • Realize that people can’t read your mind, so having your intentions and timelines public and known is important

    9:12 - Building good habits

    • Need to practice
    • Build systems to support new habits

    11:04 - Tools we use to communicate

    Links

    Tweet us your tasty treats!