Ever since Node was introduced, it has always included a package manager to handle dependencies. For many years NPM was the only game in town, but over time several alternatives have emerged, each with its own strengths and weaknesses. This analysis explores the four major players: NPM, Yarn Classic, PNPM, and Yarn2 Berry. Introduction: What is a Package Manager? In the JavaScript ecosystem, a package manager is an essential tool that automates the process of installing, updating, configuring, and removing "packages"—reusable pieces of code libraries, frameworks, tools that projects depend on. It reads a manifest file usually package.json to understand...
We're all into AI these days, but the way we interact with AI models can vary widely depending on the client or interface we use. Each type of client offers different features, capabilities, and user experiences. As a developer, it's important to understand these differences so you can choose the right tools for your needs or build your own custom solutions. Different target audiences may also prefer different clients based on their technical expertise and use cases. This post provides a breakdown of the primary types of AI interaction clients, with your examples and others categorized as requested. Web-Based Chat...
It's interesting to see how AI tools have transformed programming workflows. A trend known as "vibe coding" has emerged, where developers rely heavily on AI to generate code snippets with minimal oversight. While this approach can speed up development, it can also lead to buggy or inefficient code if not carefully managed. This post will explore the concept of vibe coding, its advantages and disadvantages, and strategies for more effective AI-assisted programming. What is Vibe Coding? Vibe coding is a programming style where developers use AI tools to iteratively generate code based on prompts, often without deep understanding or thorough...
The Unnumebered Sparks project is a landmark in large-scale interactive art installations. It demonstrated how web technologies could be harnessed to create immersive experiences that engage audiences in new ways. The project is a combination of a large sculpture, and a web-based interactive system that allows users to add visual elements to the sculpture using their mobile devices. The entire system is built around the web browser as the rendering engine, showcasing the power and flexibility of web technologies. This guide details how to build an immersive, interactive art piece where many people can use their phones to "paint with...
Recent supply chain attacks have highlighted the need for robust vulnerability management in Node projects. While NPM Audit provides a basic level of security scanning, it has limitations that can leave projects exposed. This post explores how to enhance your security posture by integrating Software Bill of Materials SBOM generation with Syft and vulnerability scanning with Grype into Node projects. Moving Beyond NPM Audit NPM audit is a useful tool for identifying known vulnerabilities in your dependencies. However, it has several limitations: It does not cover all types of dependencies, may miss vulnerabilities in transitive dependencies, will not handle supply...
In recent months, we've seen a rise in security vulnerabilities related to the NPM ecosystem. As developers, it's crucial to follow best practices to ensure the security of our applications. This responsibility extends beyond just our own code; it includes maintaining the integrity of our dependencies. This post will cover essential NPM security best practices, focusing on two key areas: understanding the supply chain threat and implementing a layered defense for your projects. The Threat: Understanding Supply Chain Attacks NPM, like other package managers, is a common target for supply chain attacks. These attacks compromise popular packages to steal credentials,...
Model Context Protocols MCPs are an interesting adjacent technology to large language models LLMs and AI agents. They provide a standardized way for AI models to interact with external data sources, tools, and systems, enabling them to access real-time information and perform complex tasks that go beyond their initial training data. This post explores what MCPs are, how they work, and how they can be used to enhance the capabilities of AI agents. What Are Model Context Protocols? Model Context Protocols have emerged as a pivotal technology for enhancing the capabilities of AI agents. At its core, an MCP is...
I've always struggled with how to integrate AI into web applications. It wasn't until I learned about Transformers.js and the Chrome native AI APIs that I realized how powerful these tools could be. The first AI component I created was a summarizer that used Chrome's Native AI capabilities and a fallback based on Transformers.js. This allowed to provide an AI-powered summary feature for all browsers. This post will discuss the creation of a translation custom element that uses AI to translate text content. The component will use Chrome's Native AI capabilities when available and fall back to Transformers.js and a...
When I first conceived the idea of creating a custom element for text to speech TTS, I envisioned a simple web component that could leverage existing web technologies and AI, packaged as a web component so it could be easily integrated into any web page. The result was interesting, to say the least, and ended as something completely different from my initial idea. This post will walk through the process of building the custom element, the challenges faced, and the lessons learned in the process. The Initial Idea The goal was to create a component that could speak the text...
While modern CSS has adopted several powerful features that were once exclusive to preprocessors like SASS, a number of key SASS functionalities are still not natively available. For some of these, clever workarounds exist in pure CSS but, for others, there are no direct equivalents. This guide explores the features that both platforms now share, followed by the features that remain unique to SASS and their workarounds. Features Available in Both SASS and CSS The gap between SASS and CSS has narrowed as native CSS has adopted features pioneered by preprocessors. What's important to note is that even though the...
