Forem: Turing's Oracle

MCP Skills vs MCP Tools: The Right Way to Configure Your Server

Antonio Cardenas — Sun, 22 Mar 2026 08:40:00 +0000

Skills and MCP tools are not the same thing — and confusing them costs you. Learn the real difference, the real downsides, and how to combine both for a better agentic workflow.

MCP Skills vs MCP Tools: What's the Difference and How to Combine Them

Everyone is talking about MCP. Everyone is talking about skills.

Most people are using them interchangeably — and that's exactly the problem.

They are not the same thing. They don't solve the same problem. And if you reach for the wrong one, you will feel it: hallucinations, context blowups, agents that drift off-task, and workflows that fall apart under pressure.

Let's fix that.

The Core Mental Model

Think of it like a kitchen.

MCP tools are your appliances and ingredients — the oven, the fridge, the fresh vegetables. Raw capability. Without them, nothing gets cooked.

Skills are your recipes — the step-by-step instructions that tell a skilled chef exactly how to turn those ingredients into something good. Without them, you have power with no direction.

An agent with only MCP tools can do things but doesn't necessarily know how to do them well. An agent with only skills has great instructions but no way to act on them.

You need both.

What Is an MCP Tool?

The Model Context Protocol is an open standard — now under the Linux Foundation's Agentic AI Foundation — that gives AI agents a standardized way to connect to external systems: databases, APIs, file systems, GitHub, Slack, your Angular CLI.

When you connect an MCP server to your client—whether that's Claude Code, the Gemini CLI, or a custom agent—it gets access to a set of typed, deterministic tools. Each tool has a clear input/output schema. When the agent calls it, it executes — no interpretation, no hallucination risk at the execution level. It's a structured API call, not a suggestion.

{
  "mcpServers": {
    "angular-cli": {
      "command": "npx",
      "args": ["-y", "@angular/cli", "mcp"]
    }
  }
}

MCP is how the agent reaches outside itself. It's the nervous system.

Use MCP when you need the agent to:

Read or write to a real system (database, filesystem, API)
Execute actions with clear, auditable inputs and outputs
Connect to tools you don't own or control
Integrate multiple services through a consistent interface

What Is a Skill?

A Skill is a folder containing a Markdown file (with YAML frontmatter) plus optional scripts and resources. It's not executable by itself — it's a playbook.

When a user's request matches a Skill's relevance criteria, the agent loads those instructions dynamically and follows them. Think of it as giving the agent expert-level procedural memory on demand.

---
name: angular-component-review
description: Review Angular components for Signal compliance and standalone architecture
---

# Angular Component Review

When reviewing an Angular component:
1. Check that all state uses `signal()` or `computed()` — never direct property mutation
2. Verify the component is `standalone: true`
3. Confirm no `NgModule` dependencies remain
4. Validate that `@if` / `@for` is used instead of `*ngIf` / `*ngFor`

The agent loads this only when it's relevant. When it's not — it costs you nothing.

Use a skill when you need the agent to:

Follow a consistent process or checklist
Apply domain-specific expertise (your coding standards, review criteria)
Encode knowledge that doesn't change often
Reuse the same workflow across different conversations

The Real Downsides

This is where most guides stop. They shouldn't.

MCP: The Token Tax

Every MCP tool you connect injects its full schema into the context window before the agent processes a single message. Each tool costs 550–1,400 tokens. Connect GitHub, Slack, and Sentry, and you're looking at 55,000 tokens burned upfront — over a quarter of Claude's 200k limit before any real work begins. And if you are using Gemini with its 1M+ token window, you might think you can just ignore this. Don't. Even if you have the space to spare, dumping 55,000 tokens of raw JSON schema into every single turn of a conversation drives up your latency, increases API costs, and dilutes the model's focus.

One team reported connecting three MCP servers and consuming 143,000 of 200,000 tokens on tool definitions alone. The agent had 57,000 tokens left for the actual conversation.

The good news: modern clients like Claude Code and the Gemini CLI have adopted progressive discovery for MCP—loading only tool names and descriptions upfront (~20–50 tokens each) and fetching full schemas only when the agent actually needs a tool. Token overhead declined by ~85%. But this feature only works if your MCP setup is configured to use it, and most setups still aren't.

Skills: The Staleness Problem

Skills are Markdown files. They don't update themselves. If your Angular patterns evolve — say you migrate from setInput() to the new declarative API in Angular 20 — your Skill still teaches the old way until someone updates it manually.

The more skills you create, the more maintenance burden you carry. And if a skill is subtly wrong, the agent will follow it confidently — no error, just quietly incorrect output.

Both: The Selection Problem

Give an agent too many tools or too many skills, and it starts making the wrong choices — calling the wrong tool, triggering the wrong playbook, or combining them in ways that produce contradictory instructions. Experts recommend staying under 10–15 active MCP tools at any time.

How to Combine Them

The most powerful pattern is using them as layers:

Layer 1 — MCP provides access.
Connect only what the agent genuinely needs for the current task. Angular CLI, a database, and a file system. Keep it lean.

Layer 2 — Skills provide expertise.
Create a skill that tells the agent how to use those tools in your specific context. Not just "run the Angular CLI" — but "when migrating a component, run ng generate with these flags, then validate against these patterns."

Layer 3 — Skills can orchestrate MCP.
A Skill can define a multi-step workflow that calls multiple MCP tools in sequence. Example: a "Deploy & Notify" Skill that uses GitHub MCP to push, a CI/CD MCP to trigger a build, and a Slack MCP to notify the team — all under one coherent playbook.

---
name: angular-migration-workflow
description: Full workflow for migrating an Angular component to v21 patterns
---

# Migration Workflow

1. Use the Angular CLI MCP to check the current component version
2. Run `ng update` for the affected package
3. Apply the zoneless migration schematic
4. Review the output against the angular-component-review Skill
5. Run tests and report results

The Practical Decision Guide

Situation	Use
Need to query a real database	MCP
Need to follow a code review checklist	Skill
Need to push to GitHub	MCP
Need to apply your team's commit message format	Skill
Need to read a live API	MCP
Need to teach the agent your Angular architecture rules	Skill
Need both access and consistent process	Both

Improving Your Workflow

A few patterns that actually work in production:

1. One MCP server per domain. Don't load everything at once. Create separate configs for "Angular development," "deployment," and "communication" — and activate only the one you need for a given session.

2. Version your Skills like code. Put them in your repository. Review them when you update your stack. A Skill for Angular 19 patterns will actively hurt you on Angular 21.

3. Use Skills to write MCP guardrails. Instead of relying on the agent to figure out when to call a destructive MCP action, write a Skill that explicitly says: "Before running any ng update, always create a git branch first."

4. Measure your context budget. Before your agent does any real work, know how many tokens your MCP setup consumes. If you're over 30% of your context window is on tool definitions, you have a configuration problem.

5. Let the agent maintain simple Skills. For fast-moving areas — like keeping track of your team's current Angular version conventions — let the agent update the Skill file itself when you tell it to. It's faster than doing it manually and keeps the Skill honest.

The Bottom Line

MCP gives agents the ability to act. Skills teach them how to act well.

The debate of "MCP vs Skills" is a false one. The real question is: do you need access, expertise, or both?

In most real Angular workflows, you need both. An agent that can run your CLI but doesn't know your architecture is just a faster way to make the same mistakes. An agent that knows your patterns but can't touch your actual project is just an expensive search engine.

Used together, with clear boundaries and lean configuration, they're the foundation of agentic development that actually works.

Previously I wrote about Angular 21 MCP and the end of manual migrations — a good starting point if you're new to the MCP server setup for Angular.

Angular 20 to 21 Upgrade: The Practical Survival Guide

Antonio Cardenas — Sat, 13 Dec 2025 07:48:14 +0000

A clear and concise guide to upgrading from Angular 20 to 21. that Covers the essentials like the Karma full removal, the new default Zoneless mode, automatic HttpClient, and how to fix your breaking builds.

If you thought Angular 20 was a big shift, welcome to Angular 21.

While version 20 was about stabilizing Signals, version 21 is about removing most of the old patterns. The "Angular Way" has fundamentally changed: zone.js is optional, Karma is dead, and RxJS is slowly retreating to the edges.

This isn't just an update; it's a new ecosystem. Here is what is going to break and how to fix it.

🚨 The "Stop Everything" Breaking Changes

Before you run ng update, be aware that your build will likely fail if you rely on these legacy patterns.

1. The Karma Extinction Event (Vitest is Default)

The most immediate shock for many teams will be ng test. Angular 21 has officially swapped Karma for Vitest as the default test runner.

What breaks: If you have a custom karma.conf.js or rely on specific Karma plugins/reporters, your test suite is now legacy code.

The Fix:

New Projects: You get Vitest out of the box. It's faster, cleaner, and uses Vite.
Existing Projects: You aren't forced to switch immediately, but the writing is on the wall. The CLI will nag you.
Migration: Run the schematic ng generate @angular/core:karma-to-vitest to attempt an auto-migration. It's remarkably good at converting standard configs, but custom Webpack hacks in your test setup will need manual rewriting for Vite.

2. HttpClient is "Just There"

Remember adding provideHttpClient() to your app.config.ts or importing HttpClientModule?

The Change: HttpClient is now injected by default in the root injector.

What breaks:

If you have tests that mock HttpClient by expecting it not to be there, they might fail.
If you rely on HttpClientModule for complex interceptor ordering in a mixed NgModule/Standalone app, you might see subtle behavior changes.

The Fix: Remove explicit provideHttpClient() calls unless you are passing configuration options (like withInterceptors or withFetch). It cleans up your config, but check your interceptor execution order.

3. zone.js is Gone (For New Apps)

New apps generated with ng new will exclude zone.js by default.

What breaks: Nothing for existing apps (yet). Your polyfils.ts will keep importing Zone.

The Warning: If you copy-paste code from a new v21 tutorial into your existing v20 app, it might assume Zoneless behavior (using ChangeDetectorRef less often, relying on Signals). If you mix the two paradigms without understanding them, you'll get "changed after checked" errors or views that don't update.

✨ The New Toys: Features You'll Actually Use

Once you fix the build, v21 offers some incredible DX improvements.

1. Signal Forms (Experimental but Stable)

This is the feature we've been waiting for. No more valueChanges.pipe(...)spaghetti.

import { form, field } from '@angular/forms/signals';

// Define a reactive form model
const loginForm = form({
  email: field('', [Validators.required, Validators.email]),
  password: field('', [Validators.required])
});

// Access values directly as signals!
console.log(loginForm.value().email);

Why use it: It's type-safe by default and doesn't require RxJS mastery.

Status: Experimental. Use it for new features, but maybe don't rewrite your checkout flow just yet.

2. Angular Aria (Developer Preview)

A new library of headless primitives for accessibility.

Instead of fighting with aria-expanded and role="button", you use directives that handle the a11y logic while you handle the CSS.

<!-- Handles keyboard nav, focus, and ARIA roles automatically -->
<div ariaMenu>
  <button ariaMenuItem>Option 1</button>
  <button ariaMenuItem>Option 2</button>
</div>

3. Regex in Templates

Small but mighty. You can finally use regex literals in templates, perfect for @iflogic without creating a helper function.

@if (email() | match: /@company\.com$/) {
  <span class="badge">Employee</span>
}

🛠️ The Upgrade Checklist

Ready to jump? Follow this order to minimize pain.

Backup: Commit everything. Seriously.

Update the Global CLI:
Updating Angular generally involves two parts: the global CLI and the local project dependencies. Ensure your global CLI is up to date first (you might need sudo or Administrator privileges).

# Optional: Uninstall the old global version first to avoid conflicts
npm uninstall -g @angular/cli

# Verify the npm cache
npm cache verify

# Install the latest global CLI version
npm install -g @angular/cli@latest

Update Local Project:
Now update your local project dependencies:
```
ng update @angular/cli@21 @angular/core@21
```
Run the Diagnostics:
Angular 21 includes smarter diagnostics. Pay attention to warnings about ngClass (soft deprecated in favor of [class.my-class]) and standalone migration opportunities.
Check Your Tests:
Run ng test. If it explodes, decide:
- Path A: Keep Karma (add @angular/build:karma manually if removed).
- Path B: Migrate to Vitest (Recommended).
Optional: Go Zoneless:
If you're feeling brave, run the experimental migration:
```
ng generate @angular/core:zoneless-migration
```

This is "Agentic" territory. See our MCP Guide for how to let AI handle this complex refactor.

Summary

Angular 21 is the "clean slate" release. It sheds the weight of the last decade (Zone, Karma, Modules) to compete with modern frameworks like Svelte and Solid.

The upgrade might be bumpy due to the testing changes, but the destination—a faster, simpler, signal-driven framework—is absolutely worth it.

Upgrading to Angular 20

Antonio Cardenas — Sat, 28 Jun 2025 10:07:39 +0000

This is a practical guide focused on what really matters when updating a real-world application: what breaks, what makes your work easier, and how you should adapt your development style.

1. The Full Story Behind Karma's Removal: Beyond a Broken Build

The immediate issue when upgrading is that ng test will fail. The reason is a fundamental change in Angular's build tools.

Why did Angular drop Karma?

With Angular 20, the default build package changes from @angular-devkit/build-angular to the new @angular/build. This new package no longer includes the Karma plugin used by legacy test setups.

The web ecosystem has moved on to faster test runners like Vitest and Jest that use modern tools like Vite and esbuild. Karma had become a bottleneck.

What the new world looks like (Vitest/Jest)

Angular's experimental test runner, now powered by Vitest, is the future. Migrating means your unit tests will run in a fast, modern Node.js-based environment.

The "temporary fix" explained

npm install @angular-devkit/build-angular --save-dev

This command forces the CLI to fall back to the old compiler that still supports Karma. It’s a compatibility bridge — but the message is clear: start planning your migration to Jest or Vitest soon.

2. Prerequisites

Before starting the update process, make sure you meet the following:

Node.js: Version 20.11.1 or later
TypeScript: Version 5.8 or later
Project backup: Commit all current changes in Git

3. How to Update: CLI Command and Comparison

Update Command

Make sure you're running Node.js v20.11.1 or later:

ng update @angular/cli @angular/core

If you use Angular Material:

ng update @angular/cli @angular/core @angular/material

Manual intervention required

To reinstall the old compiler with Karma support:

npm install @angular-devkit/build-angular --save-dev

This wasn't required in earlier versions but is now mandatory if you want to keep using Karma.

Compared to earlier upgrades

Angular v19: ng update just worked.
Angular v20: You must manually reinstall the old builder for Karma.

4. Control Flow: More Than Syntactic Sugar

@for replaces *ngFor and is a major improvement.

Old syntax

<div *ngFor="let item of items; trackBy: trackItemById">
  {{ item.name }}
</div>

New syntax

@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
} @empty {
  <div>No items to display.</div>
}

track is mandatory and encourages best practices.
@empty improves DX by removing the need for separate @if.

Automated migration and performance

Use the CLI to automatically refactor templates to the new control flow syntax:

ng generate @angular/core:control-flow

General Best Practices and Further Migrations

You can also migrate to other modern Angular features:

ng generate @angular/core:standalone
ng generate @angular/core:inject
ng generate @angular/core:route-lazy-loading
ng generate @angular/core:signal-input-migration
ng generate @angular/core:signal-queries-migration
ng generate @angular/core:output-migration

These commands allow for a comprehensive update of an Angular app to leverage the latest patterns.

5. Standalone by Default: A Fundamental Architectural Shift

By explicitly listing dependencies using the imports array at the component level, each component becomes self-contained. This:

Clarifies your architecture
Improves tree-shaking
Results in smaller bundles

6. Zoneless: Escaping the "Magic" of Change Detection

In a zone-less world, the UI only updates when you explicitly tell it to.

Signals are the main tool here.

mySignal.set(newValue);

This directly tells Angular to update only the DOM parts that use that signal. It’s a surgical, predictable, and high-performance approach.

7. New Naming Convention: Why It Feels Complicated

Angular 20 introduces a new official naming convention that drops traditional suffixes.

Old naming

user-profile.component.ts
auth.service.ts
highlight.directive.ts

New naming

user-profile.ts       // UI component
auth-store.ts         // state
highlight.ts          // directive

Focus on intent instead of type

user-api.ts         // HTTP requests
auth-store.ts       // reactive state
movie-card.ts       // UI component
movie-details.ts    // UI component

Naming rules

Use dashes: user-profile.ts
Match class and filename
Keep .spec.ts for tests
Avoid generic names like utils.ts
Co-locate related files

Feature-based folder structure

src/
├── core/
│   └── auth/
│       ├── auth-store.ts
│       ├── login.ts
│       └── register.ts
├── features/
│   └── users/
│       ├── user-profile.ts
│       ├── user-api.ts
│       └── user-settings.ts

Benefits

Cleaner Git diffs
Intention-oriented code
Easier onboarding

8. Important Detail: `browserslist` and Browser Support

Angular 20 no longer supports Opera officially.

If you list Opera in your browserslist, you may need to remove it.

Other non-mainstream browsers may also lose support, potentially triggering warnings or build issues.

From Vibe Coding to Vibe Engineering with V0 and Firebase Studio. [Part 0].

Antonio Cardenas — Tue, 08 Apr 2025 18:48:10 +0000

Yes, you heard right

In this tutorial, we’re going to crank up impostor syndrome to the max by building a full-stack web app using:

Firebase Auth for authentication
Firestore for real-time data storage
Firebase Hosting so you can actually show your project and avoid the “it works on my machine” excuse
Firebase Studio

But this time, we’re not doing another “Login + Hello World.”

We’re going to build something with purpose: a book lending and return management platform for a public library.
And yes, we’ll generate QR codes to streamline returns.

Phase One: Planning and Goals

A popular saying goes:
You don’t start a house from the roof...

And even though Vercel’s V0 lets us begin with the UI, we’re going to do things properly.

Before sending prompts, we’ll define what we’re building:

The What

A library management app with:

Full CRUD for books
Book lending and return system
QR code generation for scannable loan identification
QR code reading to easily mark books as returned
(Optional) Social features to create a reading club where users can exchange books and experiences

The Why

We aim to solve a real problem: managing a public or community library in a simple, modern, and digital way — and encourage reading habits.

Also, it’s a great excuse to practice:

Next.js 14/15 architecture
V0-generated UI components (which we’ll refine manually later)
Firebase as backend (although you could swap it for something else)
CRUD best practices (create, read, update, delete)

The Premise

We want to manage book check-ins and check-outs from a physical location and create a small community that works like a book club.

Manage the borrowing and returning of books in a public library.
All this using:

v0.dev for quick UI creation with style
Next.js as the web framework, also used by V0
Firebase for authentication, database, and hosting
Firebase Studio (Optional alternative to v0)
QR codes to ease the physical return of books, using
- yudiel/react-qr-scanner
- qrcode.react

The Logic

We assume there will be a librarian role — someone responsible for books.
This person’s responsibilities include:

Registering new books
Updating stock
Correcting input errors
Removing availability of certain books
Checking return status (condition, timeliness)
Tracking book locations (e.g., Sci-Fi shelf 2)

As a user, I want to:

Search for a book and check if it’s available
The homepage should display a searchable list of books by name, ISBN, or category
Know where a book is physically located

Another scenario: the user finds the book and scans the QR code to request a loan.
To do this, they must sign in or register — since managing libraries or book clubs requires some form of membership or ID.

To simplify, all books can be borrowed, and the Google account used to request them will serve as identification.

Other Considerations: “Security”

This includes both physical and digital security and depends on the specific library’s operations.

In public libraries, there’s usually a front desk with a librarian who grants access to the reading area.
They assign books by membership number or personal data.

If the user wants to take a book home:

It must be scanned and assigned
The system may also send return details and deadlines

Digitally:

Users must log in to borrow a book
Protect routes so only admins access core CRUD operations.
Optionally, implement a reputation system that limits the number of loans based on:
- Account age
- Verification status
- Membership validity
- Loan and return history
- Return timeliness

With Firebase, it’s crucial to:

Structure documents properly.
Define security rules so only authorized roles can read, write, or delete certain documents

(This section will be expanded in future articles.)

Summary

After all this planning, we’ve essentially written a pseudocode-like spec for our app.

So in the next article, we’ll set up everything from Firebase to V0, use alternative Firebase Studio, and build the first prompt based on pseudocode.

In future posts, we’ll explore Copilot, Cursor, and other AI tools to accelerate development — because at the end of the day, AI is a tool, not a replacement.

The Future of FrontEnd Is Written... with Prompts

Antonio Cardenas — Wed, 26 Mar 2025 09:21:33 +0000

As you may know, after several iterations, v0 no longer just centers divs.
It now raises a question that makes many feel uncomfortable:

To what extent can—or should—artificial intelligence replace the work of a frontend developer?

What is v0?

v0.dev is a platform developed by Vercel that allows you to generate full frontend components from natural language descriptions. It's a sort of visual copilot that combines design and implementation, returning clean code using React, Tailwind, and other modern stacks.

What sets v0 apart from other generators is its semantic precision. It understands the context of the request, provides coherent structures, and offers visually well-designed solutions.

It doesn't generate "random code"; it generates useful components, aligned with what the prompt suggests and how it's written.

Some time ago, the prompt used by v0 from Vercel to build interfaces from plain text was leaked. You can take a look here.

Despite causing a stir, the leak uncovered the true power of this tool: context.

What is a prompt?

A prompt is the instruction given to a language model to perform a task.

"A registration form with validation, dark mode, and mobile-first design."

The power of a prompt doesn't just lie in what is being asked, but in how it is asked.
Clear language, explicit intentions, and well-defined context are key to obtaining useful results.

What is context?

Technically speaking, context is the additional information that accompanies a prompt and allows the model to more precisely "understand" what is expected.

It may include:

The desired stack (React, Next.js, Tailwind)
Accessibility considerations
Expected component behavior
Technical or design constraints

v0 uses an advanced prompt engineering system with enriched context, which enables it to generate functional code relevant to the project environment.

What is Vibe Coding?

The concept of vibe coding refers to a new way of programming guided more by intention and creative energy than by manually writing every line of code.

With tools like v0, the development experience begins to feel more like composing music than coding line by line.

The flow shifts: it becomes a collaboration between human and AI, where intuition and technical judgment remain essential.

And v0 isn't alone.

Cursor transforms Visual Studio Code into a conversational environment, allowing you to edit, navigate, and write code directly with AI.
Claude enables reasoning over complex structures and high-level refactoring, very useful for abstract frontend tasks like architecture design.
GitHub Copilot continues to act as a line-level assistant, suggesting snippets and completing code as you type.

All of these tools are part of the new development environment—one where human ingenuity and algorithmic efficiency meet at the center of the workflow.

The End of the Front-End Dev?

Personally, the approach I like most regarding artificial intelligence is augmenting capabilities.

Automating without understanding what is being done can be a dangerous trap, often generating more technical debt than real value.

v0 doesn't replace the frontend developer, but it does require them to evolve.
The role shifts from implementer to curator, architect, and interface strategist.

Writing a good prompt, understanding the project context and its logic, testing its security, validating accessibility, fixing errors generated by AI implementations, optimizing performance…
All of that is still part of the job.

Artificial intelligence doesn't eliminate frontend development. It transforms it.

And those who understand that transformation will be the ones to lead it—rather than resist it.

Seamless Reactive HTTP Requests in Angular

Antonio Cardenas — Tue, 18 Mar 2025 10:49:21 +0000

Starting from Angular v19.2, we can begin to move away from manually handling API calls thanks to Angular's new primitive: httpResource. It allows us to reactively fetch data, calling our preferred API automatically each time the value changes.

Main features:

Automatic Reactivity:
The resource generated by httpResource observes signals and automatically makes HTTP requests each time reactive dependencies change.
Default state:
Allows defining default values through the defaultValue property, ensuring a consistent response during initial states, loading phases, or request errors.
Data validation and transformation:
The parse option facilitates automatic validation and transformation of HTTP responses, enhancing type safety and ensuring the integrity of received data.

Advantages over the traditional approach:

Significant code reduction: Eliminates the need to manually manage subscriptions, reducing errors such as memory leaks.
Automatic state updates: By directly depending on Signals, data updates automatically according to changes in the application's reactive state, eliminating manual tasks.
Increased security: Promotes robust development through automatic validation and strict state management throughout all phases of the data lifecycle.

Currently, this API is in an experimental phase, so it's recommended to monitor its evolution before implementing it in critical production environments.

Usage and implementation example:

Previously, we had to rely on RxJS to subscribe and unsubscribe each time we made an API call, which sometimes contributed to the famous memory leaks when we forgot to unsubscribe.

To implement it, we should start by creating an interface defining the structure of our character with data such as the ID, name, image, etc.

Now we implement httpResource in our component.

characterResource is an httpResourceRef that returns character data from the API; defaultValue ensures that characterResource has a defined structure even before the data is loaded.

characterId is a signal representing the ID of the character being displayed. Changing this value triggers httpResource to fetch data for the selected character.

But what if we want to use POST, PUT, DELETE?

We only need to change the method and provide the corresponding body along with the params.

  usersResource = httpResource<RickCharacter>({
    url: '',
    method: 'POST',
    body: { page: 1 },
    params: { per_page: 6 },
  });

In the next article, I'll cover more advanced aspects like headers, params, etc., but for now you can see all the functional code in the following:

Example:

Proyect Fugu

Antonio Cardenas — Mon, 25 Nov 2024 14:00:00 +0000

Aims to bridge the gap between progressive web applications (PWAs) and native applications, making PWAs more useful, appealing, and accessible to everyone. This effort is a collaboration between the Chromium community and companies such as Google, Microsoft, and other contributors from the broader web community.

What are PWAs?

PWAs are web applications designed to be fast, reliable, and capable of being installed on devices as if they were native applications. They use modern APIs to:

Enhance capabilities: Access advanced hardware and features.
Ensure reliability: Load quickly and work seamlessly, even offline.
Simplify installation: Behave like traditional apps.

With these enhancements, PWAs combine the best of the web and native applications.

Why "Fugu Project"?

The name "Fugu" refers to the Japanese pufferfish, known for being delicious but dangerous if not prepared correctly. This symbolism captures the essence of the project: the new APIs can be very powerful, but if not implemented carefully, they can pose risks.

Examples of advanced capabilities and risks:

Advanced capabilities: File system access, video editing tools, integration with Bluetooth and USB devices.
Potential risks: These tools must ensure user security and privacy.

The Fugu Project focuses on enabling these capabilities while maintaining a balance between utility and security.

Key APIs in the Fugu Project

File System Access API: Allows applications to read and write files directly on the user's system.
Web Share API and Web Share Target API: Facilitates sharing content between web and native apps.
Contact Picker API: Provides access to device contacts with explicit permission.
Web Bluetooth and Web USB: Enables connection with physical devices to extend functionality.
Badging API: Displays notifications and counts on the installed app's icon.

Benefits of the Fugu Project

Universal compatibility: PWAs work on any device with a browser.
Hassle-free updates: Always up-to-date without requiring downloads from an app store.
Better user experience: Access to features previously exclusive to native apps.

Security and the Future of PWAs

The Fugu Project aims to expand PWA capabilities securely. It works to mitigate risks through explicit permissions and the development of responsible practices for developers.

With Fugu, PWAs are evolving beyond being mere web versions. They are a powerful tool transforming how we interact with technology.

Bonus:

Via App the easy way to personalize macros and Keytes https://usevia.app/
The Momentum website https://momentum-fw.dev/ uses the Web USB API to install an alternative firmware to the default one on FlipperZero.

More examples and inspiration at:
https://developer.chrome.com/docs/capabilities/fugu-showcase

What's New Angular 19:

Antonio Cardenas — Tue, 19 Nov 2024 15:47:47 +0000

Angular is constantly evolving, and version 19 is no exception. With a focus on developer experience, improved performance, and new tools, Angular 19 offers features to streamline your projects and enhance efficiency. In this article, we’ll explore improvements in reactivity with signals, rendering optimizations, and much more. This marks the eleventh iteration since version 8, one of the first articles on this blog.

1. Standalone Components as the Default Standard

Standalone components, introduced in Angular 14, have been revolutionary, and now in Angular 19, they are the default behavior. This means you no longer need to declare standalone: true for each component.

Before Angular 19:

@Component({
  standalone: true,
  imports: [CommonModule],
  selector: 'standalone-component',
  templateUrl: './standalone-component.html',
})
export class StandaloneComponent { }

Now:

@Component({
  imports: [CommonModule],
  selector: 'standalone-component',
  templateUrl: './standalone-component.html',
})
export class StandaloneComponent { }

This eliminates the need for NgModules in most cases, simplifying application structure and promoting modular development. If you still need to work with NgModules, you can explicitly declare standalone: false.

2. Partial and Incremental Hydration for Faster Rendering

Angular 19 introduces partial and incremental hydration, transforming the performance of server-rendered (SSR) applications.

Partial Hydration: Prioritizes critical component loading, reducing initial interaction time.
Incremental Hydration: Defers feature loading based on user interactions (clicks or hovers), optimizing resource usage.

These techniques create faster, more interactive applications right from the start, improving the user experience.

3. Enhanced Signals: Simplifying Reactivity

Signals integration in Angular continues to improve, now with deeper support and new tools like LinkedSignal.

What are signals?

Signals are an API designed to manage states reactively and predictably, reducing reliance on Zone.js. This not only simplifies debugging but also improves performance and reduces bundle size.

Example with Signals: Introducing LinkedSignal

linkedSignal allows the creation of dependent signals that automatically update based on a source signal.

import { signal, linkedSignal } from '@angular/core';

const source = signal(10);
const double = linkedSignal(source, value => value * 2);

console.log(double()); // 20
source.set(15);
console.log(double()); // 30

4. Improvements to Component API

Angular 19 introduces a new lifecycle hook, ngAfterSignalUpdate, to react after a Signal update, simplifying interactions with complex states.

import { Component, Signal, signal, AfterSignalUpdate } from '@angular/core';

@Component({
  selector: 'app-lifecycle',
  template: `
    <h3>Signal Lifecycle </h3>
    <button (click)="updateSignal()">Update</button>
  `,
})
export class SignalLifecycleComponent implements AfterSignalUpdate {
  mySignal = signal(0);

  updateSignal() {
    this.mySignal.set(this.mySignal() + 1);
  }

  ngAfterSignalUpdate() {
    console.log('Signal updated to:', this.mySignal());
  }
}

This hook helps developers manage UI changes and complex state interactions effectively.

5. Faster Build Times

Thanks to optimizations in Angular CLI, builds are faster in both development and production environments. The addition of caching accelerates iterative processes.

Example: Build with Cache

ng build --optimization=true --build-cache

6. Dependency Injection Enhancements

Angular now automatically infers types in Dependency Injection (DI), reducing repetitive code and increasing type safety.

Example: Type Inference in DI

// Before
constructor(private http: HttpClient) {}

// Now in Angular 19
constructor(private readonly httpClient) {}

7. Resource and rxResource APIs: Simplifying Async Data

The new experimental resource and rxResource APIs are designed for promises and observables, simplifying asynchronous data handling.

Properties of `resource`:

Status: Tracks resource state (loading, success, or error).
Value: Contains data after loading.
Error: Handles errors.

Example with `rxResource`

import { rxResource } from '@angular/core';

const data = rxResource(async () => {
  const response = await fetch('/api/data');
  return response.json();
});

data.value.subscribe(data => console.log(data));

These tools unify asynchronous data management, making workflows more intuitive.

8. Improved Routing

Angular 19 integrates signals more deeply with the router, enabling more reactive and streamlined navigation flows. This simplifies handling route and query parameters reactively.

Example: Using Signals with Router

import { Component, inject, OnInit, Signal } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-signal-route',
  template: `
    <h2>Signal Route</h2>
    <p>Route ID: {{ routeSignal() }}</p>
  `,
})
export class RouteDemoComponent implements OnInit {
  private route = inject(ActivatedRoute);
  routeSignal: Signal<string> = signal('');

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.routeSignal.set(params.get('id') ?? '');
    });
  }
}

Bonus: Angular Material Enhancements

Angular Material introduces new style improvements, accessibility features, and enhanced component interactions. For example, components like mat-menu and mat-select are now more intuitive and user-friendly.

Example: Improved mat-menu Usage

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
  <button mat-menu-item>Item 3</button>
</mat-menu>

Conclusion

Angular 19 marks a significant step in the evolution of the framework. From default standalone components to improved reactivity with signals and SSR optimizations, this version provides tools to build faster, more reactive, and maintainable applications.

Ready to upgrade?

ng update @angular/core @angular/cli

more info about update here:https://angular.dev/update-guide/?v=18.0-19.0&l=1

Share your experience with these new features and keep exploring the future of Angular development! 🚀, Stay tuned for upcoming articles deep down about Material, Signals and of course Hydration

¡Thanks to @damiansire for being the editor and approving this post!

12 HTML Tricks You Probably Don't Know About

Antonio Cardenas — Mon, 09 Sep 2024 22:48:22 +0000

HTML is the backbone of the web, but it's far more than just a set of basic tags and attributes. There are tons of hidden features in HTML that can make your websites more interactive, accessible, and efficient. Ready to level up your HTML skills? Let's dive into these cool tricks!

1. `contenteditable` - Make Elements Editable

Did you know you can make any HTML element directly editable by the user? The contenteditable attribute allows you to do just that. Whether you're building a CMS, an interactive blog, or a live text editor, this attribute can save you loads of time.

<div contenteditable="true">
 You can edit this text. Give it a try!
</div>

Use case: Enhance user engagement by allowing them to edit content directly on the page. No need for complex JavaScript!

2. Custom Data Attributes - Store Extra Info on Elements

If you've ever needed a way to store custom data within an HTML element, custom data attributes are for you. These attributes, prefixed with data-, let you add extra information that you can access via JavaScript, without cluttering your DOM.

<div id="user-profile" data-user-id="42" data-role="admin">
 <! - User details go here →
</div>

Usage: Perfect for dynamic applications that rely on metadata. Plus, it keeps your code clean!

3. The `hidden` Attribute - Hide Elements Without CSS

Forget using display: none; in your stylesheets. The hidden attribute is a more semantic way to hide elements. It's easy to use and helps keep your HTML tidy.

<p>This paragraph is visible.</p>
<p hidden>This paragraph is hidden.</p>

Usage: Use it with JavaScript to show or hide elements dynamically without worrying about styles.

4. `<fieldset>` and `<legend>` - Better Form Accessibility

Forms can get messy, especially if they have many inputs. Enter <fieldset> and <legend>. These tags help you group related controls together, providing a clear, accessible structure for all users, including those using screen readers.

<fieldset>
 <legend>Personal Information</legend>
 <label for="firstname">First Name:</label>
 <input type="text" id="firstname" name="firstname">
</fieldset>

Usage: It's all about improving user experience. Structured forms are easier to navigate and understand!

5. `download` Attribute - Simplify File Downloads

Want to offer a file download on your site? The download attribute on an <a> tag lets you do this seamlessly. You can even specify the filename that the file should be saved as.

<a href="path/to/file.pdf" download="myfile.pdf">Download the PDF</a>

Usage: Makes downloading files straightforward for your users. No need for extra server-side configurations!

6. `spellcheck` - Enable Spell Checking in Text Inputs

Ever wanted to add spell-checking to your text inputs or textareas? The spellcheck attribute lets you turn on the browser's built-in spell checker. This can be super useful for enhancing user experience by reducing typos and mistakes.

<textarea spellcheck="true">This textarea will be spell-checked!</textarea>

Usage: Make sure users always have a great experience by helping them avoid embarrassing typos.

7. `inputmode` - Improve Mobile Input

Tailor the virtual keyboard for users on mobile devices using the inputmode attribute. This attribute specifies what kind of input is expected, triggering a keyboard that's optimized for the type of data to be entered.

<input type="text" inputmode="numeric" placeholder="Enter your phone number">

Usage: Providing the right keyboard helps users enter data quickly and correctly. Great for mobile-friendly sites!

8. `<details>` and `<summary>` - Create Native Expandable Content

Need to create expandable content without relying on JavaScript? The <details> and <summary> elements offer a simple, built-in solution for collapsible sections. Perfect for FAQs, menus, or any other content that benefits from being hidden until needed.

<details>
 <summary>What is HTML?</summary>
 <p>HTML stands for HyperText Markup Language. It's the foundation of the web!</p>
</details>

Usage: This is a lightweight, accessible way to toggle content visibility without using JavaScript.

9. `draggable` -Add Drag-and-Drop Functionality

Want to add drag-and-drop functionality to your site? The user is able to drag elements with the "draggable" attribute. It's an easy way to introduce interactivity without needing external libraries.

<img src="image.jpg" alt="Draggable Image" draggable="true">

Usage: Combine draggable with JavaScript events to create custom drag-and-drop experiences!

10. `type="date"` - Simplify Date Input

Instead of using text fields and JavaScript to manage dates, try using <input type="date">. This will bring up a native date picker in most modern browsers, making it easier for users to enter dates.

<input type="date" name="birthday">

Usage: Provides a consistent, easy-to-use interface for date input, no additional JavaScript required.

11. `srcset` and `sizes` - Optimize Images for Different Devices

If you want to make your website faster and more responsive, use the srcset and sizes attributes on <img> tags. These attributes allow the browser to choose the most appropriate image based on the device's screen size and resolution.

<img src="image-small.jpg"
 srcset="image-medium.jpg 768w, image-large.jpg 1200w"
 sizes="(max-width: 768px) 100vw, (min-width: 769px) 50vw"
 alt="Responsive Image">

Usage: Serve the right image for the right screen, reducing load times and improving the user experience.

12. `placeholder` - Enhance Form Inputs with Hints

Need to provide a hint or example for your form inputs? Use the placeholder attribute to display a short hint inside an input field before the user enters a value.

<input type="email" placeholder="you@example.com">

Usage: It helps users understand what input is expected without cluttering your form with extra text.

Final Takeaway

These HTML tricks show that there’s a lot more to HTML than meets the eye. Don’t just settle for the basics—explore and experiment with these features to build more dynamic, accessible, and user-friendly web pages. Dive in and start experimenting to discover all the cool things HTML can do!

AlphaFold: Towards Infinite Possibilities and the Next Step in Human Evolution

Antonio Cardenas — Thu, 29 Aug 2024 04:09:35 +0000

From creating single-use plastics to developing new treatments and one day uncovering humanity's greatest mystery: "How life works."

What is the problem?

The main problem in molecular biology is the difficulty of determining the three-dimensional structure of proteins, which are essential for understanding how life works. There are around 200 million known proteins, but only a small fraction of them have their exact shape determined. Each protein folds into a unique 3D structure that defines its biological function. This folding depends on the specific sequence of 20 types of amino acids.

Traditionally, discovering the exact structure of a protein has required expensive and slow methods such as X-ray crystallography, nuclear magnetic resonance (NMR) spectroscopy, and cryo-electron microscopy. These processes can take many years and cost hundreds of thousands of dollars, limiting scientists to study only a small fraction of proteins. This limitation significantly delays the research and development of new medicines to cure diseases.

In 1969, Cyrus Levinthal highlighted the complexity of this problem, stating that it would take more time than the age of the known universe to list all the possible configurations of a typical protein by brute force calculation. Levinthal estimated (10^{300}) possible conformations for a typical protein, demonstrating the extreme difficulty of predicting its structure. However, in nature, proteins fold spontaneously, sometimes in milliseconds, a phenomenon known as Levinthal's paradox.

What is AlphaFold?

AlphaFold was developed in response to the challenge known as the "Protein Folding Problem" in the CASP (Critical Assessment of Protein Structure Prediction) competition, held every two years. In this competition, teams receive a selection of amino acid sequences for proteins whose exact 3D structure has been mapped but not made public. The teams must submit their best predictions to see how close they are to the structures revealed later.

In 2018, AlphaFold ranked first in CASP13. In 2020, AlphaFold 2 achieved such a high level of accuracy in CASP14 that the scientific community considered the protein folding problem solved.

What does AlphaFold do?

By using graph connections to understand the relationship between amino acids, AlphaFold accurately predicts a protein's structure from its amino acid sequence. This is achieved by leveraging the sequences and structures of hundreds of thousands of already known proteins, segmented by scientists worldwide. This revolutionary capability allows researchers to tackle the protein-folding problem much more efficiently.

Applications and functionalities

AlphaFold 3 is transforming how we understand and approach biological problems. If you could unravel a protein, you would see that it is like a string of beads made of a sequence of different chemical substances known as amino acids. These sequences are assembled according to the genetic instructions of an organism's DNA.

Traditional experimental methods, such as nuclear magnetic resonance and X-ray crystallography, though effective, require years of hard work and specialized multimillion-dollar equipment. AlphaFold 3, however, offers a revolutionary alternative by predicting the structure of proteins solely from their amino acid sequence. This capability opens up new possibilities in diverse areas, from new medicine research to developing advanced materials and improving agricultural crops.

Why is it important for advancing health sciences?

AlphaFold 3 is a game-changer for health sciences because it allows researchers to understand the structures and functions of proteins at a level of detail previously unattainable. This understanding is critical for several reasons:

Drug discovery: By accurately predicting protein structures, AlphaFold 3 can significantly accelerate the drug discovery process. Pharmaceutical researchers can design more effective drugs by targeting specific proteins involved in diseases.
Disease research: Understanding how proteins fold and interact can lead to advances in understanding complex diseases, including those involving misfolded proteins, such as Alzheimer's and Parkinson's.
Biological processes: AlphaFold 3 helps scientists explore and visualize the intricate interactions between proteins and other molecules, shedding light on fundamental biological processes and leading to new therapeutic strategies.
Global health and food security: The tool's ability to predict protein structures can also be applied to areas such as agriculture and environmental science, helping to develop more resilient crops and sustainable resources.

Limitations and responsibilities

Despite its immense potential, AlphaFold 3 also has limitations. Although its accuracy is remarkable, it is not infallible, and its use must be complemented with other methods and a responsible approach. Developers and scientists are working to ensure that this powerful tool is used ethically, aiming to benefit the entire global community.

How to get started

For those interested in exploring AlphaFold 3, it is recommended to start with the resources available in the AlphaFold Protein Structure Database, where millions of predicted protein structures can be accessed. This is an excellent starting point for researchers, students, and anyone interested in molecular biology and medicine.

Democratizing science

One of the most significant aspects of AlphaFold 3 is its accessibility. The AlphaFold Protein Structure Database is available for free, allowing scientists worldwide to access millions of predicted protein structures. This democratization of science accelerates research and innovation, enabling discoveries that could have global health implications.

Real-world applications

AlphaFold 3 is already being used in real-world scenarios, such as predicting the structure of previously uncharacterized proteins, helping develop new materials, and even in agricultural research. The tool's versatility means it has the potential to impact a wide range of fields beyond health sciences.

Conclusion

AlphaFold 3 represents a significant advancement in our ability to understand and manipulate protein structures, with the potential to revolutionize medicine, biology, and many other disciplines. By tackling one of the biggest challenges in modern biology, AlphaFold 3 brings us closer to a healthier future filled with new scientific possibilities.

Warp: Redefining Productivity with AI Right In Your Terminal

Antonio Cardenas — Mon, 26 Aug 2024 04:47:43 +0000

Artificial intelligence is no longer a thing of the future. It has become crucial in software development, transforming how we work, from coding to managing systems. In this context, Warp is a tool that meets the current needs of developers and anticipates future requirements by using AI to enhance every interaction.

What is Warp?

Warp is a terminal for Mac and Linux (soon available on Windows) characterized by its simple design and strong AI integration. But what makes it unique? The key lies in how Warp changes the way we use the terminal. Not only does it allow for customization, but it also simplifies executing commands with an Agent Mode that understands plain language questions.

AI in the Terminal: A Paradigm Shift

Warp's significant innovation is its ability to suggest commands and solve problems directly from the terminal. Imagine you don't remember how to show hidden files in a folder. Instead of searching on Google, you just type in English: "How can I see all hidden files in a folder?" and Warp will recommend the correct command (ls -a). This way of working not only saves time but also avoids having to memorize difficult commands, allowing developers to focus on what's essential.

Agent Mode: Your Virtual Assistant in the Terminal

Warp's Agent Mode enhances work efficiency. Like GitHub Copilot for code, Warp's Agent Mode assists in the terminal by suggesting commands and solving problems on the spot.

For example, if you need to perform a rebase or squash branches in Git, just consult the agent mode. Within seconds, you'll have the correct command ready to use without having to remember or search for the exact process.

Comparison: Warp vs. Other AI Tools

To better understand Warp's position in the current landscape, it's useful to compare it with other popular tools that also use artificial intelligence, such as Ollama, Fabric, Shell Automation, AIChat, YAI, Aider, gen.nvim, and gp.nvim.

Warp vs. Ollama

Ollama: Is a program that allows you to talk to AI models like GPT through simple commands. It provides AI-generated responses, focusing more on interacting with models than improving commands.

Conclusion: Warp is perfect for developers needing a terminal with integrated AI, while Ollama is better suited for those looking for a command-line interface specialized in working with language models.

Warp vs. Fabric

Fabric: A tool for automation and remote administration that allows running commands and scripts on servers via SSH. It's more oriented towards automating repetitive tasks across multiple servers.

Conclusion: Warp is better for improving the individual terminal experience, while Fabric is more useful for automating and remotely managing servers.

Warp vs. Shell Automation

Shell Automation: A collection of scripts and utilities that add AI capabilities to the existing terminal, focusing on personalization and expanding specific functionalities.

Conclusion: Warp is ideal for those looking for an all-in-one solution, while Shell Automation is better for users who want to customize and extend their existing environment.

Warp vs. AIChat

AIChat: Is essentially a chat interface that allows you to have conversations and ask questions to AI directly from the command line.

Conclusion: Warp is perfect for enhancing the terminal with AI, while AIChat is more appropriate for those who want to interact conversationally with AI models in the terminal.

Warp vs. YAI

YAI: A terminal tool that allows you to communicate with language models like GPT, focusing on asking questions and receiving AI-based responses directly in the terminal.

Conclusion: Warp is very useful for making the terminal easier to use with direct command assistance, while YAI is better suited for communicating with language models in the terminal.

Warp vs. Aider

Aider: A tool that helps programmers with their code. This AI tool interacts with code repositories to assist in tasks like writing, editing, and improving code based on what the developer needs.

Conclusion: Warp is perfect for those who want to improve their terminal usage, while Aider is more useful for programmers needing help with coding and repository management.

Warp vs. gen.nvim

gen.nvim: A tool for Neovim that uses AI to help create and modify code directly in the editor. This makes programming easier and provides assistance while writing code in real-time.

Conclusion: Warp enhances the terminal, and gen.nvim facilitates coding in Neovim.

Warp vs. gp.nvim

gp.nvim: An extension for Neovim that uses language models like GPT to help create and edit code within the editor, making programming easier and more efficient.

Conclusion: Warp is perfect for making the terminal more efficient, while gp.nvim is designed to assist in writing code in Neovim using AI.

Limitations and Considerations

Despite Warp's usefulness, it also has some restrictions. For example, it might not always have the latest information, leading to outdated instructions. Additionally, Warp is not yet ready for use on Windows, which could be an issue for those who prefer this operating system.

However, these aspects do not diminish the possibilities that Warp offers. Incorporating AI into the terminal is a significant step forward in automating and continuously improving daily activities in software development.

Conclusion

Warp is not just an ordinary terminal; it's a tool that changes how development is done, as "all" the answers are in one window, minimizing distractions. Along with a user-friendly design and advanced features like Agent Mode, it becomes an essential tool for any programmer looking to improve their workflow.

Whether you're managing a file storage location, troubleshooting remote connections, or simply trying to remember a forgotten command, Warp is available to help, providing a unique user experience in the world of computing.

If you haven't tried it yet, now is the time. Warp can be used on macOS and Linux computers and will soon be available for Windows. Don't fall behind—find out how this tool can change your daily life as a programmer. Use my referral code to get a theme for further customizing your terminal:
Here

Forem: Turing's Oracle

MCP Skills vs MCP Tools: The Right Way to Configure Your Server

MCP Skills vs MCP Tools: What's the Difference and How to Combine Them

The Core Mental Model

What Is an MCP Tool?

What Is a Skill?

The Real Downsides

MCP: The Token Tax

Skills: The Staleness Problem

Both: The Selection Problem

How to Combine Them

The Practical Decision Guide

Improving Your Workflow

The Bottom Line

Angular 20 to 21 Upgrade: The Practical Survival Guide

🚨 The "Stop Everything" Breaking Changes

1. The Karma Extinction Event (Vitest is Default)

2. HttpClient is "Just There"

3. zone.js is Gone (For New Apps)

✨ The New Toys: Features You'll Actually Use

1. Signal Forms (Experimental but Stable)

2. Angular Aria (Developer Preview)

3. Regex in Templates

🛠️ The Upgrade Checklist

Summary

Upgrading to Angular 20

1. The Full Story Behind Karma's Removal: Beyond a Broken Build

Why did Angular drop Karma?

What the new world looks like (Vitest/Jest)

The "temporary fix" explained

2. Prerequisites

3. How to Update: CLI Command and Comparison

Update Command

Manual intervention required

Compared to earlier upgrades

4. Control Flow: More Than Syntactic Sugar

Old syntax

New syntax

Automated migration and performance

General Best Practices and Further Migrations

5. Standalone by Default: A Fundamental Architectural Shift

6. Zoneless: Escaping the "Magic" of Change Detection

7. New Naming Convention: Why It Feels Complicated

Old naming

New naming

Focus on intent instead of type

Naming rules

Feature-based folder structure

Benefits

8. Important Detail: browserslist and Browser Support

From Vibe Coding to Vibe Engineering with V0 and Firebase Studio. [Part 0].

Yes, you heard right

Phase One: Planning and Goals

The What

The Why

The Premise

The Logic

Other Considerations: “Security”

Summary

The Future of FrontEnd Is Written... with Prompts

What is v0?

What is a prompt?

What is context?

What is Vibe Coding?

The End of the Front-End Dev?

Seamless Reactive HTTP Requests in Angular

Main features:

Advantages over the traditional approach:

Usage and implementation example:

Proyect Fugu

What are PWAs?

Why "Fugu Project"?

Examples of advanced capabilities and risks:

Key APIs in the Fugu Project

Benefits of the Fugu Project

Security and the Future of PWAs

Bonus:

What's New Angular 19:

1. Standalone Components as the Default Standard

2. Partial and Incremental Hydration for Faster Rendering

8. Important Detail: `browserslist` and Browser Support

Properties of `resource`:

Example with `rxResource`

1. `contenteditable` - Make Elements Editable

3. The `hidden` Attribute - Hide Elements Without CSS

4. `<fieldset>` and `<legend>` - Better Form Accessibility

5. `download` Attribute - Simplify File Downloads

6. `spellcheck` - Enable Spell Checking in Text Inputs

7. `inputmode` - Improve Mobile Input

8. `<details>` and `<summary>` - Create Native Expandable Content

9. `draggable` -Add Drag-and-Drop Functionality

10. `type="date"` - Simplify Date Input

11. `srcset` and `sizes` - Optimize Images for Different Devices

12. `placeholder` - Enhance Form Inputs with Hints