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