The Franconian
Coder Studio

When working with web standards, it’s easy to assume that developer experience (DX) will suffer without the conveniences of large frameworks. In a recent internal project, I decided to forgo frameworks entirely, using Lit with JavaScript. While this approach eliminated the need for a build environment, it introduced challenges like repetitive HTML templating and the need for a bundler. Enter Astro—a tool that not only provides excellent HTML templating but also a robust build environment for JavaScript and CSS. In this article, I’ll share how combining Astro and Lit has improved my productivity and why modern web standards, paired with the right tools, can rival the DX of large frameworks.

A great user experience isn’t just about design and functionality—it’s also about how smoothly your app transitions between states and content. While CSS transitions have long allowed developers to animate DOM elements, the View Transitions API takes this a step further by enabling seamless animations during content changes. Imagine smoothly transitioning from a list view to a detail page, enhancing both usability and visual appeal. Although browser support is still growing, this API holds immense potential for creating engaging web applications. In this article, I’ll explore how the View Transitions API can elevate your app’s user experience.

Voice control and text-to-speech are no longer exclusive to native apps—thanks to the Web Speech API, web applications can now offer these features too. With the SpeechRecognition API, users can interact with your app using their voice, while the SpeechSynthesis API enables your app to ‘speak’ back to them. Although browser support for speech recognition is still limited and often relies on web services, speech synthesis is more widely available and can work offline. In this article, I’ll explore how the Web Speech API can enhance your web app’s functionality and user experience.

While keyboards and mice are the standard input devices for computers, modern web applications can leverage much more with Pointer Events. This API allows developers to detect not just clicks and movements, but also the pressure and tilt of a stylus. Whether you’re building a creative tool or enhancing general interactivity, Pointer Events open up a new dimension of user input. In this article, I’ll explore how this technology works, its potential applications, and why it’s a game-changer for web app development.

Traditional password-based authentication is fraught with risks, from weak passwords to phishing attacks. Enter WebAuthn and Passkeys—modern solutions that replace passwords with secure, passwordless logins. WebAuthn uses public-key cryptography, allowing you to authenticate with biometrics like fingerprints or facial recognition. Passkeys take this a step further by securely storing your credentials in the cloud, making them accessible across devices. In this article, I’ll explore how these technologies work, their benefits, and why they’re poised to become the standard for secure web authentication.

As web applications grow more complex, optimizing performance and resource usage becomes critical. APIs like Page Visibility, User Idle, and Page Lifecycle provide valuable insights into how users interact with your app, enabling smarter resource management. Whether it’s pausing resource-intensive tasks when the app is in the background, throttling data exchange during idle periods, or adapting to browser-imposed optimizations, these APIs help create efficient, responsive applications. In this article, I’ll explore how these tools can improve both performance and user experience, ensuring your web app remains lightweight and user-friendly.

When you think of web applications, centralized servers often come to mind. But with WebRTC, web apps can establish direct, real-time connections between users, enabling video, audio, and data exchange without relying on a central server. This technology, over a decade old and now widely supported, opens up exciting possibilities—from video calls and chats to collaborative tools that prioritize privacy and efficiency. In this article, I’ll explore how WebRTC works, its advantages for both users and providers, and why it’s a game-changer for real-time communication in web apps.

When I started web development in the mid-90s, the web was a far cry from what it is today. What began as static websites with a sprinkle of JavaScript has evolved into a universal platform capable of competing with native UI solutions. While native frameworks like WPF, Flutter, and Compose Multiplatform have their strengths, the web’s flexibility and modern standards make it a standout choice for UI development. Tools like Lit and Vue have further enhanced this capability, offering powerful ways to build dynamic, responsive interfaces. In this article, I’ll explore why the web is my go-to platform for UIs and highlight some of the exciting tools and frameworks shaping its future.

In 2023, web standards are making a noticeable comeback, and tools like Lit are at the forefront of this shift. Unlike traditional frameworks that reinvent the web, Lit embraces existing standards, making web components more accessible and practical. With Lit, you can build web UIs without complex build steps—everything runs directly in the browser. This simplicity, combined with its lightweight design, makes Lit a compelling choice for developers. Material Web 1.0, built on Lit, further demonstrates its potential. While Lit may not replace major frameworks anytime soon, it’s a refreshing reminder of the power of web standards. In this article, I’ll explore why Lit is worth a closer look for anyone passionate about modern web development.