Deno 2: What is New in it?
Deno is an open-source JavaScript runtime. It has been regarded as an ideal alternative to Node.js since its initial release in 2018. It addresses several shortcomings of Node.js, especially in module management and security. Deno 2 has come several steps forward. Released on October 9, 2024, this new version promises numerous improvements. Let us explore what advancements Deno 2 has to offer. Key Features of Deno 2 Deno 2 is a secure runtime for JavaScript and TypeScript. It uses the V8 engine that also powers Chrome. Some primary improvements you can notice in this version include: API Enhancements Deno 2 is more stable now. Previously, many of its APIs underwent frequent changes as the platform was still evolving. The core team behind Deno 2 put significant effort into stabilizing APIs. Due to this stability, developers can now develop production-ready applications confidently. The team has added several new web APIs in Deno 2. You get support for WebSocket, URL, Fetch, and more. These new APIs provide seamless integration for file handling, cryptography, and HTTP requests. Compatibility with Node & NPM Deno 2 is compatible with NPM packages and Node modules. This new version bridges the gap between Deno and the JavaScript ecosystem. Developers can import and use existing Node.js libraries without any trouble. The platform also manages private NPM registries like Node and npm. You need a .npmrc file. Deno will detect it automatically and let you pull private packages without any extra setup. Additionally, Deno 2 supports the package.json format. Developers can now work with npm scripts without significant rewrites. Better Native TypeScript Support Although Deno 1 had built-in support for TypeScript, its compilation was complicated. The compilation process is more streamlined in this new version. In Deno 2, TypeScript is way faster. It also improves type-checking performance. These improvements naturally boost the developer experience. New JavaScript Registry Deno 2 introduces a new JavaScript registry. It acts as a centralized repository for modules and packages. The JavaScript registry has a collection of premium modules, ensuring developers have access to secure and reliable code. The JavaScript registry in Deno 2 has better search capabilities. It helps developers to find and integrate 3rd party libraries into their projects. The registry also enables developers to load modules via URLs. They do not need to worry about versioning issues and project bloat anymore. Moreover, the JavaScript registry provides detailed documentation for additional support. Long Term Support Another standout feature of Deno 2 is its Long Term Support (LTS). This means that Deno 2 will receive updates and patches over an extended period. This reliability lets developers use Deno 2 for large-scale applications. Security Deno 2 operates within a highly secured sandboxed environment. It prevents unauthorized access to system resources, networks, and files. If users have to grant permissions, they can use flags such as –allow-read, –allow-write, or –allow-net. The runtime also comes with various auditing tools. Developers can use them to identify and prevent security risks in their web codes. Deno 2 also enforces strict security measures, such as mandatory code reviews and vulnerability checking for published modules. Workspaces & Monorepos Deno 2 offers support for Workspaces and Monorepos. Therefore, users can now manage multiple projects within a single repository. They can interconnect projects by sharing dependencies and configurations across all sub-projects. It is particularly beneficial when working on large-scale applications. It will improve your workflow by managing complex codebases. Improved Performance Deno 2 is faster than its predecessor, thanks to the enhanced performance of the underlying V8 engine. Since the Deno 2 core team has reduced cold start times for Deno scripts, Deno-based applications load quickly now. Developers can experience a noticeable improvement in Deno’s performance due to its quick execution time and low memory consumption. Whether making API requests or rendering on the server, Deno provides better performance. Conclusion Overall, we can say that this new version of Deno has a lot to offer. Deno 2 is a substantial advancement in the JavaScript runtime environment. It has better API stability, performance, and security. Deno 2 is a modern toolchain for the advanced JavaScript ecosystem. Whether you are a seasoned JavaScript developer or just a beginner, it will meet your needs.
Shadcn: Everything You Need to Know about it
Do you want to build a modern web application with React? Are you looking for a tool that can simplify this process?If yes, Shadcn is worth considering. Shadcn is an easy-to-customize and highly scalable library that lets you develop stylish web applications. This post explores the features and components of Shadcn. Continue reading to learn more about this renowned UI component library. Let us begin. What is Shadcn? Shadcn is an open-source UI library for React featuring reusable components. Released in March 2023, Shadcn is one of the flexible user interface libraries built on React. It comes with a set of pre-built and reusable components. You can directly copy-paste these components into your codebase. Additionally, you can customize these components depending on the design requirements of your project. The liberty to alter predefined components lets you achieve virtually any design. Shadcn provides you with clean yet eye-appealing designs. How are Shadcn UI components built? Shadcn UI has the following tools at its core: Radix UI Shadcn UI employs Radix primitives at its foundation offering headless UI components. They provide structure and behavior to your application. Tailwind CSS For styling, Shadcn utilizes Tailwind CSS. It lets you create appealing UI designs in no time. TypeScript Shadcn UI library is written in TypeScript. It lets you catch type-related bugs on the go. TypeScript comes with features like code navigation, auto-completion, and more. Let us explore some primary features of Shadcn UI that make it unique from its competitors. Features of Shadcn UI Shadcn UI has a myriad of features that make app building hassle-free. Shadcn-ui Themes Shadcn allows you to customize the look and feel of your app exactly the way you want. Moreover, you can switch between different themes using CSS variables. You can customize the default theme of your CSS file by modifying its value. Additionally, you can tailor the theme from the official website. Shadcn lets you customize the theme color, border radius, and style. After implementing the changes, you can copy and paste this style directly into your CSS file. Easy to Customize Components Unlike conventional libraries, Shadcn UI gives you complete control over style and functionality. You can style your app using Tailwind CSS or other frameworks. Shadcn CLI Shadcn CLI is a tool that lets you add components straight from the command line. You can also install components from a URL. It lets you do installation remotely through resources like v0. Lightweight Shadcn UI has a modern architecture. You can choose to import the components you actually need. It naturally reduces the bundle size and improves the overall performance. Shadcn UI library is lightweight. Consequently, it ensures a smooth experience across different devices and networks. Besides this, the library is highly scalable. You can add new components to it to extend the functionality. The best part is that you can do all these changes without affecting the core of Shadcn. Shadcn Blocks Shadcn-UI blocks are pre-built UI components that help developers build interfaces with minimal effort. These blocks have ready-to-use tables, buttons, input fields, cards, and modal forms. You can combine these blocks to create various interfaces, such as admin panels, dashboards, and landing pages. Since these components are not tied to a particular design, they can be adapted to any project. Should I Choose Shadcn for My Project? Shadcn-UI is a powerful component library based on Tailwind CSS and Radix UI. Unlike traditional libraries, it has pre-built components that you can directly copy and paste into your codebase. Whether you should choose Shadcn UI or not, depends on your requirements. Developers who often struggle to brainstorm a good UI design for their application can leverage Shadcn UI. If you want complete control over the design and style of your app, Shadcn UI is an excellent tool. It gives you a high level of design flexibility. You can use Shadcn UI to build feature cards, pricing tables, and hero sections of marketing websites/applications. It is also suitable for developing navigation components and widgets in dashboards. Shadcn UI is also helpful for junior web developers trying to boost their React and component design skills. If you prioritize customization and flexibility in UI components, Shadcn-UI is the best platform for you. Conclusion Whether you are a beginner or a seasoned developer, Shadcn can help you build a modern web app. Its ready-to-use components speed up the development process. It does not have unnecessary dependencies. Therefore, you make a high-performing web app that is visibly appealing. Shadcn UI library is compatible with all popular frameworks, including Next.js, Astro, Vite, Remix, and more.
Next.js15: Everything You Need to Know About it
Next.js is a renowned React framework developed by Vercel. It enables web developers to create user-friendly static websites and web applications. Next.js was first released in 2016. However, it has come a long way since then. The framework has added numerous features and brought tons of improvements. Next.js 15 is the latest release of the framework. Let us find out how it is different from previous versions. What is New in Next.js 15? According to Vercel, Next.js 15 brings a wealth of improvements helping developers boost their workflow. Let us find out what is new in this version. Support for React19 One of the primary features you get in Next.js 15 is the support for React 19. The framework offers support for the following integrations: React Compiler This experimental compiler focuses on optimizing the performance and efficiency of React applications. Hydration Error Improvements This integration improves the hydration process making it more powerful and error-resistant. Web developers experience a smooth transition from server-rendered HTML to fully interactive React components. Server Actions Server Actions are a crucial feature enabling developers to run server-side codes within React components. It improves the workflow by minimizing the need for API routes. Since developers can embed server actions in the same file as components, they can maintain a clean and modern codebase. Besides, Server Actions improve security as sensitive operations are managed server-side. It naturally minimizes the risk of exposing sensitive data to the client. TypeScript Support TypeScript has turned into an essential tool for modern web development. Next.js 15 has brought significant improvement in its TypeScript support. You get improved TypeScript integration. It helps developers build and maintain type-safe applications. Next.js 15 provides seamless integration with the latest TypeScript features. Developers get better Type inference and accurate error reporting. Furthermore, Next.js 15 offers comprehensive support for TypeScript configuration files. Consequently, users get better control over the TypeScript compiler options and project structure. Support for Environment Variables & Configurations With Next.js 15, you notice a noteworthy improvement in support for environment variables and configuration management. Managing application settings across various environments gets much easier now. Developers can now define environment-specific settings, thanks to the new configuration API. Apart from this, managing and deploying applications across different stages of development and production is straightforward. Caching Overhaul You can notice the following changes in caching behavior in Next.js 15 RC. Web developers get better control and flexibility over how data fetching is handled. Fetch requests do not get cached by default now. Like fetch requests, GET route handlers won’t cache responses by default. Therefore, users are served with the latest data. In Next.js 15 RC, navigations on the client side bypass the cache. It offers predictable and dynamic user experience. Middleware Improvements Next.js 15 comes with advanced middleware capabilities. It provides support for asynchronous operations and middleware chaining. Developers can perform authentication, data manipulation, and logging before rendering the page. Creating multiple middleware functions and executing them sequentially is much easier now. It supports better organization and reuse of codes. Asynchronous middleware operations support quick request handling. They do not let complex jobs block the main thread. Routing & Nested Layouts Nested layouts in Next.js 15 enable developers to make complex and reusable UI structures. These layouts help them define parent and child layouts. It means users can maintain a well-organized component hierarchy. This feature is particularly beneficial for apps having multiple dashboards with common UI elements. Next.js 15 also features a flexible and improved routing system. The updated routing API supports dynamic route segments and custom route matching. Apart from this, the framework has improved the handling of its nested routes. Web Vitals Attribution Next.js 15 lets developers track web vitals. Therefore, they get granular insights into their application’s performance and learn about possible bottlenecks. Data Fetching with SWR Delta Another major update you can see in Next.js 15 is data fetching with the Stale-While-Revalidate (SWR) delta. It builds on a powerful SWR library by introducing delta synchronization. It enables applications to fetch the changes (delta) from the last request. SWR Delta does not re-fetch the entire dataset. It optimizes the amount of data transferred over the network. Consequently, users experience fast load time and a reduction in bandwidth usage. This feature is quite helpful for developers developing applications with frequent data changes, such as real-time dashboards. Final words The release of Next.js 15 has brought several enhancements to the framework. From Server Actions to improved routing to in-depth TypeScript support, the framework is empowering developers. They can develop apps faster without compromising on scalability. All in all, Next.js 15 is an ideal choice for modern web development. It has set new standards for web development frameworks. Try it if you have not already.
How the New TypeScript 4.9+ Streamlines the Type Safety in Storybook 7.0?
TypeScript is popularly used for JavaScript extension and data specification in the industry. As it reports unmatched types, writing in TypeScript can ensure productivity and optimal developer experience while coding. If we are onto using TypeScript, Storybook 7.0 is worth mentioning. That’s because it allows you to write in TypeScript without any configuration setup and boost your experience with built-in APIs. With the launch of Storybook 7.0, the tool rectified all the pain points in the previous version. Now, you get a combination of CSF 3 and the new TypeScript 4.9+ operator to bolster accuracy and safety. Read on to explore how this combination can make your coding more productive and safer while using the latest Storybook 7.0. Storybook 7.0 — An Introduction to Update 8/18 Storybook 7.0 or update 8/18 is a core upgrade of Storybook focused on better interaction testing and user experience. You get 3.5% more screen space for Canvas with over 196 icons available for complete customizations. By the same token, Storybook 7.0 is more compatible in integrating with Remix, Qwik, and SolidJS. The also features some documentation upgrades such as MDX 2 and simplified import of stories. Lastly, the most exclusive upgrade is the combination of TypeScript 4.9+ and CSF3. Let’s see what makes it a big highlight! What is TypeScript 4.9+? TypeScript 4.9+ is a statically-typed superset of JavaScript that provides additional features such as type annotations, interfaces, and generics. It enables developers to write more maintainable and scalable code by catching potential errors at compile-time rather than runtime. One of the key benefits of using TypeScript with Storybook 7.0 is that it allows developers to specify the expected types of props and events for each component. This ensures that any components that use these props and events are properly typed and provide a clear contract for how they should be used. In addition to these benefits, TypeScript can also improve the documentation and discoverability of UI components in Storybook 7.0. By leveraging TypeScript’s support for JSDoc annotations, developers can document the expected usage of each component and generate API documentation automatically. Look at the difference between TypeScript types in Storybook 6 and Storybook 7.0 below. Combination of CSF3 Syntax and TypeScript 4.9+ In addition to TypeScript 4.9+, the Component Story Format (CSF) also received an upgrade from version CSF 2 to CSF3. The combination of both offer enhanced type safety, better in-editor type checking, and Codemod for easy upgrades. Here are the top elements of this incredible combination! StoryObj Type With the upgrade CSF3, you now get access to the StoryObj type that manipulates stories as objects and infers the type of component props. The feature was still there but the previous story was not so powerful to automatically infer prop types. On the other hand, this new syntax depreciates React-Specific ComponentMeta and ComponentStory using React, Vue, Svelte, and Angular. Check the result with a side-by-side comparison of CSF2 and CSF3 given below satisfies Operator satisfies Operator is the most useful feature of TypeScript 4.9+ for strict type checking. Pair CSF3 with satisfies operator to better type safety and fix unspecified/specified issues. Take a look at the below example where TypeScript is not raising any issue for unspecified label arg. If you use satisfies operator, you can fix that issue as we did below. // Button.stories.tsx import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; const meta = { title: 'Example/Button', component: Button, } satisfies Meta<typeof Button>; export default meta; type Story = StoryObj<typeof meta>; export const Primary: Story = { args: { primary: true, }, }; After fixing the issue, you can expect TypeScript to provide an error for unspecified arg. Auto-infer Component Level args Pairing the CSF and TypeScript is good but it will not infer the types automatically unless you specify the connection. In this scenario, TypeScript will show errors on the stories even if you have provided a label in meta-level args. That’s where auto-infer component level args come up to specify the connection between CSF and TypeScript. To make them understand the connection, you need to pass the typeof meta to StoryObj at both story and meta-level. Here’s how you can do it! // Button.stories.tsx import type { Meta, StoryObj } from '@storybook/react'; import { Button } from './Button'; const meta = { title: 'Example/Button', component: Button, args: { label: 'Default', }, } satisfies Meta<typeof Button>; export default meta; type Story = StoryObj<typeof meta>; // 👇 TS won't complain about the "label" missing export const Primary: Story = { args: { primary: true, }, }; const Secondary: Story = { args: { disabled: false } }; const Disabled: Story = { args: { disabled: true } }; Vue As discussed above, Storybook 7.0 is more compatible with modern frameworks. Vue is the best example of that but you need to set up an ideal environment. Look for SFC files with vue-tsc and access the editor support in VSCode. Take a look at the Vue3 single file component. <script setup lang="ts"> defineProps<{ count: number, disabled: boolean }>() const emit = defineEmits<{ (e: 'increaseBy', amount: number): void; (e: 'decreaseBy', amount: number): void; }>(); </script> <template> <div class="card"> {{ count }} <button @click="emit('increaseBy', 1)" :disabled='disabled'> Increase by 1 </button> <button @click="$emit('decreaseBy', 1)" :disabled='disabled'> Decrease by 1 </button> </div> </template> Svelte Like Vue, Svelte features excellent support for TypeScript and enables .svelte files. You can utilize svelte-check and add VSCode editor support to run type checks. Consider the following component as an example. <script lang="ts"> import { createEventDispatcher } from 'svelte'; export let count: number; export let disabled: boolean; const dispatch = createEventDispatcher(); </script> <div class="card"> {count} <button on:click={() => dispatch('increaseBy', 1)} {disabled}> Increase by 1 </button> <button on:click={() => dispatch('decreaseBy', 1)} {disabled}> Decrease by 1 </button> </div> Conclusion: Conclusively, the new TypeScript 4.9+ features in Storybook 7.0 have greatly improved the type safety and developer experience for creating UI components. With the addition of advanced type inference capabilities, developers can now create reusable components with
