Logo

    794: Prettier JavaScript with Vjeux

    enJuly 12, 2024
    What is the origin of Vuzu Shado's nickname 'Viju'?
    How did Vuzu Shado's career evolve over time?
    What is the significance of the Syntax and Prettier collaboration?
    What challenges did Shado face while developing Prettier?
    How does Prettier benefit developers and support multiple programming languages?

    Podcast Summary

    • Nickname creation, Career evolution, CollaborationEngineer Vuzu Shado discusses creating his unique nickname 'Viju' from the French term 'Je video', his career journey from engineer to manager and back, and the importance of effective collaboration and leadership in successful projects, while emphasizing the significance of open-source collaborations and the role of managers in guiding and supporting contributors

      Christopher V. Vuzu Shado, a prolific engineer at Meta and co-creator of React Native, shares how he came up with his unique nickname "Viju" from the French term "Je video," swapping the two words to create a distinct and unclaimed five-letter handle. During this Syntax podcast episode, Vuzu Shado also discusses his career evolution from software engineer to manager and back, emphasizing the importance of effective collaboration and leadership in fostering successful projects. Moreover, the podcast introduces the collaboration between Syntax and Prettier, with the release of a limited-edition Prettier t-shirt, where a portion of the sales goes towards the project. The episode highlights the significance of open-source collaborations and the role of managers in guiding and supporting contributors, providing valuable insights for both individuals and teams involved in software development.

    • Open Source Project LeadershipA successful open source project requires not only good engineering but also a visionary leader who invests time, takes risks, and focuses on long-term success. Consistent coding style is essential to avoid duplication and conflict, leading to the creation of popular tools like Prettier.

      Successful open source projects require more than just good engineering. They also need a visionary leader who is willing to take risks, think long-term, and invest time in making the project massively successful. The speaker, a co-creator of several popular open source projects like Prettier, React Native, and Yoga, shared how his attraction to "crazy projects" and his focus on setting the right foundation have contributed to their success. He also highlighted the importance of consistency in coding style to avoid unnecessary duplication and conflict, which led him to create Prettier, a popular code formatter for JavaScript. The speaker's experience of receiving detailed code reviews and the inefficiencies of inconsistent coding styles inspired him to create a solution. However, he realized that the incentives for such projects are different from traditional projects, and it took him joining a compiler team to understand the unique challenges and rewards of working on such projects. In essence, the speaker's success in open source projects can be attributed to his unique combination of vision, risk-taking, long-term thinking, and technical expertise.

    • Project AccuracyAiming for 99.999% accuracy in a project requires significant upfront investment, dedication, and addressing edge cases before allowing widespread use.

      Creating a successful project, like Prettier, requires a high level of accuracy and a significant upfront investment. The founder recognized that people wouldn't continue using it if it didn't work consistently, so they aimed for 99.999% accuracy. This meant investing in setup and addressing edge cases before allowing widespread use. Many potential contributors lacked the commitment to see it through, but during a winter break, two individuals began working on it, inspiring the founder to fully commit. He cleared his calendar and spent six months fixing edge cases, eventually converting half of the Facebook repository's JavaScript files. His role shifted from coding to managing, focusing on integration and growing contributors. The most value is gained by running Prettier on save rather than commit. This story illustrates the importance of dedication, accuracy, and community involvement in bringing a project to success.

    • Code formatting identity shiftAutomating code formatting leads to less attachment to specific rules, enabling more openness to changes and standardization in JavaScript development

      The removal of manual code formatting from a developer's workflow has led to a significant mental shift in the attachment to syntax and formatting rules. This is because people become accustomed to formatting their code a certain way after doing it repeatedly for thousands of times, making it part of their identity. By automating the formatting process, people become less attached to specific formatting rules and are more open to changes. The limited options in tools like Prettier have also contributed to this adoption by reducing the complexity and eliminating the need for extensive customization. However, the implementation of such tools can be challenging due to the various combinations of options and the different ways they need to be handled in various environments. Despite the controversy surrounding certain default settings, such as curly braces and dot-chaining, the overall trend is towards fewer options and more standardization in JavaScript development.

    • Prettier project decisionsMaking significant decisions for an open source project, despite resistance and the need for consensus, requires balancing consistency and avoiding breaking changes with the need to move the project forward. Finding a supportive organization and manager is also crucial.

      The speaker's experience in leading the development of a JavaScript project called "Prettier" involved making significant decisions about its syntax and features, despite facing resistance and the need for consensus within the open source community. He had to balance the desire for consistency and avoiding breaking changes with the need to make decisions and move the project forward. The speaker also discussed the importance of finding an organization and manager that would support and enable such a project, even if it meant working independently for an extended period. Additionally, he mentioned that Mark Zuckerberg, the CEO of Facebook, was knowledgeable about the technical aspects of the project and allowed the VP of infrastructure to handle its implementation. The speaker also shared that before the development of Prettier, many developers used ESLint for formatting, but the speaker felt that the current solution was not sufficient for addressing all formatting issues and decided to create a new project instead.

    • Prettier vs ESLintPrettier and ESLint serve distinct purposes in formatting code and linting, with Prettier focusing on formatting and ESLint on linting and static analysis. While Prettier can be fast enough for many, rust-based alternatives offer potentially faster formatting.

      While there are different tools and approaches to formatting code and linting, such as Prettier and ESLint, they serve distinct purposes and can coexist effectively. Prettier focuses on formatting code consistently while ESLint handles linting and static analysis. The debate around using one tool over the other or the emergence of rust-based alternatives is driven by factors like performance and formatting rules. Prettier has been fast enough for many users, but some have expressed concerns about its speed. The rust-based alternatives, like Biome, aim to address these concerns by offering potentially faster formatting. However, Prettier's creator doesn't believe it needs to be written in Rust, as other areas of JavaScript tooling, like packaging and ID feedback, can greatly benefit from faster performance. The future of Prettier lies in continuous improvement and keeping up with the evolving JavaScript ecosystem, as new syntaxes and features are added. Ultimately, the choice between tools depends on the specific needs and priorities of developers and projects.

    • Prettier fundingPrettier, a crucial code formatter for multiple programming languages, relies on donations for development and maintenance. Your support can help ensure its continued success and consistency for developers.

      Prettier, a popular code formatter, is in need of financial support to continue its development and maintenance. The project, which supports various programming languages including JavaScript, HTML, and CSS, has two main maintainers who are currently being paid through donations. The funds are running low, and the team is exploring ways to increase donations and fundraising. Prettier has become an essential tool for many developers due to its ability to format code consistently and efficiently, saving time and reducing mental overhead. The project's success and lack of competition in the market highlight the importance of continued support. Prettier's impact extends beyond JavaScript, as it also supports other languages and templates. The speaker expressed gratitude for the tool and encouraged listeners to consider donating or purchasing Prettier merchandise as a way to support the project. The speaker also mentioned the inspiration behind Prettier, such as Go FMT, and how it has influenced the auto-formatting trend in various programming languages.

    • Open-source project managementCreating opportunities for others to contribute and making them feel ownership can lead to project growth and success even when the original maintainer moves on.

      Effective open-source project management involves creating opportunities for others to contribute and making them feel ownership over the project. This can lead to the project's continued growth and success even when the original maintainer moves on to new projects. The speaker shared their personal experience of managing projects at Facebook and how they learned to let go and trust others to contribute. They emphasized the importance of creating clear boundaries and giving people access and responsibilities to make them feel invested. For maintainers struggling with managing popular projects, they advised seeking advice from experienced individuals in the open-source community and adopting a mindset of openness and encouragement towards contributors. Additionally, the speaker highlighted Transformers JS as a shameless plug, a project that allows running machine learning models inside the browser and is integrating with the new WebGPU API for 3D scenes.

    • CUDA technology in machine learningCUDA technology enables GPUs to handle complex mathematical operations required for machine learning models, providing 10 to 100 times the performance compared to traditional 3D APIs like WebGL.

      NVIDIA's CUDA technology has revolutionized the field of machine learning by enabling GPUs to handle complex mathematical operations required for machine learning models. This is a significant improvement over traditional 3D APIs like WebGL, providing 10 to 100 times the performance. During a recent interview on Syntax.fm's 40th episode, a brilliant guest discussed this topic and left listeners in awe. Prettier, a popular code formatter, is just one of the many projects this individual has contributed to, and the community is eagerly awaiting the release of their new t-shirt designs. Overall, the conversation highlighted the power and potential of CUDA in machine learning and the exciting advancements in the tech industry.

    Recent Episodes from Syntax - Tasty Web Development Treats

    817: You Need These 30 Apps - PART 1

    817: You Need These 30 Apps - PART 1

    Scott and Wes kick off part 1 of a 2-part series, breaking down 30 must-have apps for web developers and productivity enthusiasts. From file management tools to media utilities, they cover everything you need to supercharge your workflow.

    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

    816: Why Your CSS Sucks

    816: Why Your CSS Sucks

    Scott and Wes break down why your CSS might suck—from misusing specificity to not leveraging CSS variables. Tune in as they dive into common pitfalls that are making your stylesheets a hot mess.

    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

    815: Deno 2 with Ryan Dahl

    815: Deno 2 with Ryan Dahl

    In this episode of Syntax, Wes and Scott talk with Ryan Dahl about Deno 2.0, its new features and use of web standards, and how it seamlessly integrates with popular frameworks like Next.js. Ryan shares insights on the motivations behind Deno’s creation, its emphasis on simplicity and security, and offers his take on the evolving JavaScript ecosystem.

    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

    814: Fundamentals: HTML

    814: Fundamentals: HTML

    In this episode of Syntax, Wes and Scott talk about HTML fundamentals — from basic structure and semantics to practical tips for better accessibility and SEO. They also discuss the difference between block and inline elements, form functionalities, HTML5 elements like dialog and canvas, and 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

    Randy: X Instagram YouTube Threads

    813: CSS: Scroll Driven Animations

    813: CSS: Scroll Driven Animations

    In this episode of Syntax, Wes and Scott talk about CSS’ new scroll-driven animations, its implementation, uses, and potential pitfalls. They also discuss animation-timeline and animation-range, and how they can be utilized to control animations based on scroll positions.

    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

    812: CSS 4, 5, and 6! With Google’s Una and Adam

    812: CSS 4, 5, and 6! With Google’s Una and Adam

    In this episode of Syntax, Wes and Scott talk with Una Kravetz and Adam Argyle from Google Chrome about the evolution of CSS, new features, and the push toward more advanced UI capabilities on the web. They discuss the introduction of CSS versioning, exciting new properties like text-box-trim, state queries, and scroll state functionalities, select, and 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

    Randy: X Instagram YouTube Threads

    How To Stay Up To Date with Daily.dev’s Francesco Ciulla

    How To Stay Up To Date with Daily.dev’s Francesco Ciulla

    In this episode of Syntax, Scott and Wes talk with Daily.dev’s Francesco Ciulla about the platform's history, community features, and significant growth. They dive into the core ideas behind daily.dev, including its personalized feed for developers, new features like squads, community contributions, and tech stack. Francesco also shares his passion for Rust, and highlights the importance of content creation in the ever-evolving tech landscape.

    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

    808: The Future of JavaScript Frameworks × Building Auth × DB Design Tips, and more!

    808: The Future of JavaScript Frameworks × Building Auth × DB Design Tips, and more!

    In this potluck episode of Syntax, Wes and Scott answer your questions about the future of JavaScript frameworks, building custom authentication systems, limiting API access, using Caddy server proxy for local development, component props in JSX, structuring a relational database, and 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

    Randy: X Instagram YouTube Threads