Logo
    Search

    715: Google & MS Duopoly, Frontend to Fullstack, Where to Put Business Logic + more(Potluck)

    enJanuary 10, 2024

    Podcast Summary

    • The Impact of Large Tech Companies on the Web Development LandscapeGoogle and Microsoft's growing influence in web development could limit openness and competition, impacting the future of the open web.

      While it's exciting to see large tech companies innovating and providing valuable tools for web development, it's important to remain aware of what that means for the openness and diversity of the web. Scott and Wes, the hosts of Syntax, shared stories about their children's extracurricular activities and drew a parallel to the web development landscape. Just as children need a safety net to learn new skills without getting hurt, developers need resources and services to help them build and improve their applications. However, as Worried Listener points out, the increasing dominance of a few large companies in various aspects of web development could potentially limit the openness and competition in the space. Google's efforts to block ad blockers in Chrome and Microsoft's ownership of popular tools like GitHub, NPM, TypeScript, and Visual Studio Code are examples of this trend. And while these companies have brought significant value to the web development community, it's crucial to consider the potential implications for the future of the open web. As always, we encourage listeners to submit their questions for future episodes at syntax.fm.

    • Maintaining diversity in browsersImportant to prevent one browser company from dominating, potential consequences if Firefox adopts Chrome's engine, Chrome not actively blocking ad blockers, transition to new web extensions prioritizing user privacy

      It's important to maintain diversity in web browsers to prevent any one company from having too much control. The discussion touched upon the potential consequences if Firefox were to abandon its own engine and adopt Chrome's, similar to what Opera did years ago. This shift could lead to a monopoly in the browser market, which isn't ideal for the future of the web. Furthermore, there's been confusion regarding Chrome's stance on ad blockers. Contrary to popular belief, Chrome isn't actively blocking ad blockers. Instead, it's transitioning to a new version of web extensions (manifest V3) that prioritizes user privacy. Some ad blockers have yet to adapt to this change, leading to misunderstandings. In summary, it's crucial to be aware of these developments and understand the nuances behind them to ensure the web remains an open and diverse platform.

    • Understanding Technology's Impact on PrivacyBe aware of how technology collects and sells data, prioritize privacy, use ad blockers, and stay flexible with technology to create content effectively and ethically.

      While technology can make our lives easier, it comes with a cost to our privacy. Chrome extensions, even popular ones like Honey, can collect and sell your data. Corporations prioritize making money over protecting your privacy, with Google being an advertising company and Apple focusing on hardware. It's crucial to be aware of this tradeoff and take steps to safeguard your privacy, such as using ad blockers and being cautious about the extensions you install. Additionally, having a flexible technology stack can help avoid becoming overly attached to any one tool or method, allowing for greater adaptability and openness to new solutions. When it comes to creating content, keeping things simple with HTML, CSS, and JavaScript can be a versatile and effective approach. Ultimately, understanding the benefits and limitations of various technologies and being mindful of privacy concerns can lead to a more informed and productive use of technology.

    • Transitioning to Full-Stack DevelopmentUnderstanding requests and responses, databases, and server-side technologies like Node and MongoDB are essential for full-stack development. Having a strong foundation in HTML, CSS, and React for front-end and problem-solving skills for back-end are important. Being open to learning new technologies and concepts is key to success.

      The lines between front-end and back-end development are becoming increasingly blurred, and having a good understanding of both can make you a more versatile and valuable developer. While there's no definitive answer to when you're ready to call yourself a full-stack developer, having a basic understanding of concepts like requests and responses, databases, and server-side technologies like Node and MongoDB can help you make the transition. Additionally, many modern frameworks use similar APIs on both the client and server, making JavaScript skills more transferable between the two. For those new to tech looking to apply for junior front-end positions, having a strong foundation in building accessible and functional web pages with technologies like HTML, CSS, and React is important. While knowledge of data structures and algorithms can be beneficial, solving technical interview questions is a good way to improve problem-solving skills and gain confidence in this area. Ultimately, being a well-rounded developer who is open to learning new technologies and concepts is key to success in the ever-evolving tech industry.

    • Manipulating data structures with array methods is crucial for JavaScript developersBe proficient in using map, reduce, filter, and forEach to transform data structures in JavaScript, but understand when to apply them based on project requirements.

      As a front end developer working with JavaScript, it's essential to be comfortable with manipulating data structures using array methods like map, reduce, filter, and forEach. While most of the time, you won't need to delve deep into complex algorithms, there may be instances where you need to transform one data structure into another to fit the requirements of a library or tool. Companies like Dropbox, Sentry, Adobe, and Uber value this skill set, especially in app development. However, if you're working for an agency or building a React interface, you may not encounter these situations frequently. For HTML emails, using a framework like Zurb Foundation Email Layout, MJML, or a React-based tool can help you inline CSS and create reusable components, saving you from the pain of laying out emails from scratch. If you're using a marketing email platform, it's often more practical to use their WYSIWYG editor rather than coding from scratch.

    • Choosing the right tools for your projectUsing appropriate tools can streamline your development workflow, whether it's for email marketing, syntax checking, versioning, or unstyled component libraries.

      Having the right tools for your specific use case can significantly improve your development workflow. For email marketing, using a WYSIWYG editor like react.email or similar options can be beneficial due to the need for different layouts and design elements. On the other hand, for syntax checking and versioning, tools like GitHub Actions, GitLab CI, and Vercel's build API can be invaluable for automating tests, incrementing version numbers, and maintaining a clear overview of issues. Additionally, unstyled component libraries, such as Arc, can provide functionality and accessibility with some low-level styling, but the majority of styling is usually brought in from external sources. The choice of tools ultimately depends on the project requirements and the development team's preferences.

    • Considering the importance of both unstyled and styled componentsFor complex projects, choose between unstyled and styled components based on project requirements, desired aesthetic, and target audience.

      For complex applications, designers and developers need to consider the importance of both unstyled and styled components, depending on the specific project requirements. The speaker emphasized the value of unstyled components for maintaining a personalized aesthetic and having full control over the design, especially for projects where the look and feel matter. However, for simpler projects or for mobile versions of complex applications, styled components can save time and effort. The speaker also shared his experience with a writing app, Obsidian, which initially only had a desktop version. Although it was functional, the lack of a mobile version didn't deter users, but it's essential to consider the user experience and needs for both desktop and mobile versions in complex applications. Ultimately, the choice between unstyled and styled components depends on the project's nature, the desired aesthetic, and the target audience.

    • Design for mobile users while maintaining consistency across devicesDesign a responsive interface that adapts to different screen sizes and provides a seamless user experience on all devices, catering to the growing mobile audience

      When developing an app, it's crucial to consider your audience and their preferred devices. While a desktop app may be suitable for technical users, many people now use their phones for most activities, including writing. If you want to cater to this mobile audience, a simplified mobile interface could be a solution. However, maintaining two separate apps or components can be challenging and lead to syncing issues. A responsive design, which adapts to different screen sizes, is often the best approach, allowing users to access all features on any device. Providing a mobile-friendly experience from the start is essential, even if you don't plan to offer it initially. Remember, even large companies like Instagram struggle to keep features consistent across platforms. Aim for a seamless user experience, with no compromises on features, regardless of the device.

    • Planning and designing mobile apps with responsive design and good user experienceConsider mobile from the start, use pointer events, learn from mistakes, use flowchart apps for planning, and continuously prototype, refactor, and plan for successful mobile app development

      When it comes to mobile app development, responsive design is crucial for Android apps due to their adaptability to various screen sizes. Meanwhile, iOS apps often have separate phone and iPad versions. When planning mobile apps, consider thinking about mobile from the start, using pointer events instead of clicks, and keeping in mind the importance of a good user experience. Regarding code planning, it's essential to learn from mistakes and refactor when necessary. Tools like flowchart apps, such as Mondo Draw and Octopus.do, can help in the planning process. Additionally, creating folder structures before writing code can prevent confusion about where to place certain files. Ultimately, continuous prototyping, refactoring, and planning are key to successful mobile app development.

    • Should Business Logic Live on Client or Server?Consider real-time user needs, data size, and security risks when deciding where to handle business logic. Server side is better for data validation and formatting when user doesn't need real-time feedback. Client side is better for real-time validation and modification.

      Determining whether a piece of logic should live on the client or server side can depend on various factors. Business logic, such as data validation and data formatting, can be handled on both sides, depending on the specific use case. For instance, if the user doesn't need to be alerted to any data changes and it's not a big deal to send the data to the server, it's often better to keep the business logic on the server. However, if the user needs real-time validation or modification of data, then it makes more sense to handle that logic on the client side. Additionally, consider the size of the data being transferred and the potential for security vulnerabilities. For example, generating a slug for a blog post should be done on the server side to prevent potential security issues. Ultimately, it's important to consider the specific use case and the potential benefits and drawbacks of handling the logic on either the client or server side. The front-end and back-end roles are not rigidly defined, and developers must learn to navigate the nuances of each situation.

    • Family Fun with The Sleeping Queens GameThe Sleeping Queens game is a delightful family option for ages 6 and up, enhancing game nights with fun and engagement. Protect packages with customized boxes to ensure their safety and dryness.

      The Sleeping Queens card game is an excellent family game option for ages 6 and up, despite the suggested age being 8. The game is fun, engaging, and includes cute cards that kids love. The family has enjoyed playing it during game nights. Another takeaway is the importance of having a package box for delivered packages, especially in areas with high package theft. The speaker shares their experience of using a wooden box with a custom "packages" label and recommends various types of package boxes to keep deliveries safe and dry. Lastly, the speaker promotes the Syntax newsletter and their social media presence, inviting listeners to engage and join their community.

    • Learn from Wes Bos and Scott Tolinski on Syntax.fmDiscover valuable insights and practical tips for developers through engaging discussions on Syntax.fm. Access their extensive archive and subscribe for updates.

      If you're interested in programming, web development, or just enjoy listening to insightful discussions, be sure to check out Syntax.fm. This podcast, hosted by Wes Bos and Scott Tolinski, covers a wide range of topics in an accessible and engaging way. They provide valuable insights and practical tips for developers at all levels. To access their extensive archive of episodes, head on over to their website, syntax.fm. Don't forget to subscribe in your preferred podcast player to stay updated on new episodes. And if you find their content helpful or enjoyable, consider leaving a review to help spread the word. Overall, Syntax.fm is a must-listen for anyone looking to expand their knowledge and skills in the world of programming and web development.

    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

    Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 1

    Hasty Treat - Old Browsers, Fallbacks and Polyfills - Part 1

    In this Hasty Treat, Scott and Wes kickoff a three-part series about old browsers, fallbacks and polyfills. In part one, Scott and Wes talk specifically about old browsers, how best to support them, and whether or not you should support them at all.

    VueSchool.io — Sponsor

    Check out VueSchool.io’s new subscription plans. Get access to their entire catalog with more than 160 lessons, including The Vue.js Masterclass, for one low monthly fee. New content and courses are added regularly. Visit VueSchool.io/syntax and get your first month for only $5.

    Show Notes

    5:10 - How do you decide if you should support an older browser?

    • Google Analytics Data
    • User base / Money earned from that audience
    • IS it worth it? Time vs Money?

    11:35 - How do you test your websites and app in older browsers?

    18:24 - Supporting and Testing Mobile Browsers

    • Resize your browser
    • Build a device lab
    • Remote Debugging
    • Browser device view
    • Faking Geolocation
    • Emulators in XCode / Android dev tools
    • Browsersync
    • Ghostlab

    Tweet us your tasty treats!

    What’s New in Web Development

    What’s New in Web Development

    In this episode of Syntax, Scott and Wes talk about what’s new in web development: new promise static methods, new CSS functions, PWAs 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”.

    Clubhouse - Sponsor

    Clubhouse is the first project management software that brings everyone together so that teams can focus on what matters: creating products that customers love. Clubhouse provides a perfect balance of simplicity and structure for better cross-functional collaboration. Check out https://clubhouse.io/syntaxpodcast and get your first two months free.

    Show Notes

    5:38 - New Promise static methods

    • Promise.all
    • Promise.race()
    • Promise.allSettled()
    • Promise.any()

    10:16 - Lazy loading images

    14:25 CSS Houdini aka JS in CSS

    20:32 - Subgrid

    24:31 - Native modules in browser

    • type="module"
    • dynamic import()

    27:08 - Node Native Modules update

    29:17 - PWA install app and Google PlayStore

    • Already shipped in Chrome
    • Java API that communicates through services with Chrome
    • Trusted Web Activity aka TWA
    • All content in TWAs must comply with Play store policy including policies for payments in-app purchases and other digital goods
    • Already existing TWAs include Twitter Lite, Google Maps Go, Instagram Lite
    • Passing the PWA Criteria
    • Performance Score with a minimum of 80/100, tested with Lighthouse
    • All current Google Play Store rules

    35:49 - CSS Scroll Snap

    • In many browsers already
    • scroll-padding

    38:17 - Aspect Ratio Unit

    39:32 - CSS nesting

    • Disallows cross-domain cookies unless on the same domain/subdomain

    Links

    ××× SIIIIICK ××× PIIIICKS ×××

    Shameless Plugs

    Tweet us your tasty treats!

    Episode 27 - Digital Authoritarianism An Increasingly Dark Side Of The Internet

    Episode 27 - Digital Authoritarianism An Increasingly Dark Side Of The Internet
    The internet was once viewed as an instrument of freedom. It freed communications across borders, aided the ability of people to rally against repressive governments, dramatically lowered entry barriers to sellers of goods and services across borders. But like many good things, the internet has been increasingly harnessed to repress – or more neutrally to assist those in control of government to keep their power and a watchful eye and long arm over those who threaten their view of public order, The Freedom House report is a disturbing compilation of the rise of digital authoritarianism. The study of 65 countries that hold 87% of the world’s internet users found a decline in freedom from June 2017-May 2018 in 26 nations compared to gains in 19. If you have ideas for more interviews or stories, please email info@thedataprivacydetective.com.

    Método Bowtie para Avaliar Riscos

    Método Bowtie para Avaliar Riscos

    Nesta semana, Ricardo fala sobre a avaliação de riscos pelo método Bowtie. O método tem suas raízes na indústria de óleo e gás, mas é utilizado hoje em diversas áreas para visualizar o evento de risco, as ameaças que podem desencadear o risco e suas consequências. Depois de avaliar as ameaças e consequências, a equipe trabalha em conjunto para identificar as barreiras que podem ser implementadas para evitar ou mitigar a ameaça ou impacto. O método tem esse nome porque tem o formato visual de uma gravata borboleta.

    PS: A imagem relacionada a este podcast é uma gravata borboleta real sobre risco de desempenho humano na Autoridade de Aviação Civil do Reino Unido. Clique aqui para ver o arquivo original.