Open Source Friday with Alex Lichter and Nuxt.js

09 Mar 2024 (8 months ago)
Open Source Friday with Alex Lichter and Nuxt.js

Duolingo

  • Duolingo uses GitHub Copilot to improve engineering efficiency, increasing productivity by 25% and enabling more thoughtful conversations and big ideas.
  • Copilot is used daily by Duolingo employees and simplifies their day-to-day work.

KNX JS

  • KNX JS is a meta framework for building any kind of application based on Vue.js.
  • It provides superpowers to Vue applications, including easy deployment on various platforms and rendering modes.
  • KNX JS values freedom of choice and ensures that deploys will work even if users switch platforms.
  • Alexander Lehr, a contributor since 2017, joined the core team in 2018.
  • Lehr's open-source journey began with PHP, where he contributed to documentation and packages before discovering front-end development.

Open-Source Contributions

  • The speaker's open-source journey started with solving a personal problem, leading to the creation of a module for Kendo UI.
  • They were later approached by the core team and invited to a conference in London, marking a significant moment in their open-source journey.
  • Contributing to open-source doesn't have to start with big popular projects; beginners should start with smaller modules or good first issues.
  • The Kendo UI and Vue communities are welcoming and supportive of beginner contributors.

Kendo UI and Next.js

  • A live coding session showcased setting up a Next.js application with Kendo UI and demonstrated the hot module replacement feature.
  • The speaker emphasized the importance of documentation and provided tips for finding modules and examples within the Kendo UI ecosystem.

KN Death Tools

  • The KN Death Tools are a set of developer tools that run within a Next.js application.
  • They provide an overview of the application's performance, modules, plugins, and components.
  • The Death Tools are extensible, allowing developers to add their own custom windows and functionality.
  • They include a VS Code tab for making changes to the Next.js application from within the tools.

Next.js

  • The speaker demonstrated how to use the Death Tools to enable routing and create new views.
  • Next.js supports file system-based routing, making it easy to add new pages and components.
  • Route parameters and query parameters can be used to dynamically render content.
  • Next.js supports both server-side rendering and static site generation, and JavaScript can be disabled for specific pages or routes.
  • Route rules define granular control over which pages have JavaScript enabled, and caching and pre-rendering can be applied on a page or route basis.
  • Next.js uses route rules to define dynamic data modes for different pages without using JavaScript.
  • The default title for all pages can be defined in the configuration and overwritten for development or production builds.
  • Debugging in Next.js can be challenging due to multiple packages and abstraction layers.
  • The Discord server and the H3 relations website are helpful resources for debugging and understanding relationships between Next.js packages.
  • The visualization tool used in the presentation is built using Vis data and is open-source.

Vue.js

  • Next.js offers different strategies for fetching data, including async data fetch and plugins.
  • Composable functions in Vue.js should only be called in a view or component context.
  • useRoute should not be called inside a function that is not in a view context, such as a button event handler.
  • useFetch can fetch data from an API and be used for server-side rendering.
  • useFetch has a refresh function for refetching data on the client side.
  • $fetch is a wrapper around the fetch API that can submit forms.
  • useFetch is recommended for data fetching in Vue.js, providing built-in features like automatic re-fetching when reactive properties change.
  • useAsyncData is an alternative to useFetch that allows choosing a custom fetching library.
  • Vue.js provides end-to-end type safety for data fetching when using the Nitro server engine and API endpoints.
  • Various methods can connect to databases in Vue.js, including KV stores, ORMs like Prisma or Drizzle, and lightweight SQL connectors like db0.
  • Astro and Vue.js are both great frameworks, with Astro focusing on hydrating only active parts and Vue.js using server components to render static content on the server.
  • Alex's podcast, Deja View, is coming out this month with Michael Ton, discussing the Vue ecosystem.

GitHub Copilot for Enterprise

  • GitHub Copilot for Enterprise is now generally available, offering fine-tuned models based on an organization's code, integration with GitHub.com, and analysis of pull request diffs for more efficient code reviews.

Stability AI

  • Stability AI announced the upcoming release of Stable Diffusion 3

Overwhelmed by Endless Content?