Zod in Angular. Typescript Schema validation library

Using Zod in an Angular project is a great way to introduce runtime validation with static typing. Zod is a TypeScript-first schema declaration and validation library, which complements Angular’s type system and form handling. Why Use Zod in Angular? Type-safe validation Works well with Reactive Forms or standalone services Generates types from schemas automatically Useful for form validation, API response validation, and runtime checks
eraoftech.medium.com/zod-in-angular-8dcefc2a20ec

Nushell

Nushell

A new type of shell

Cross-platform

Nu works on Linux, macOS, BSD, and Windows. Learn it once, then use it anywhere.

Everything is data

Nu pipelines use structured data so you can safely select, filter, and sort the same way every time. Stop parsing strings and start solving problems.

Powerful plugins

It’s easy to extend Nu using a powerful plugin system.

Screenshot showing using the ls command

Nu works with existing data

Nu speaks JSON, YAML, SQLite, Excel, and more out of the box. It’s easy to bring data into a Nu pipeline whether it’s in a file, a database, or a web API:

Screenshot showing fetch with a web API

Nu has great error messages

Nu operates on typed data, so it catches bugs that other shells don’t. And when things break, Nu tells you exactly where and why:

Screenshot showing Nu catching a type error

www.nushell.sh/

MVC vs Flux vs Redux: Key Differences Explained

MVC vs Flux vs Redux: Key Differences Explained

Comparing MVC vs Flux vs Redux

1. Architecture

During web application development, we create solutions that address the customers’ needs and solve problems of businesses and users. To achieve this, different architecture patterns and technologies are used. For many years, application designs have revolved around the In the meantime, there have been a series of advanced frameworks like Flux and Redux, in the same vein, which helps you deal with complex applications. We are aware of the increased complexity in apps that multiplies due to the absence of effective design patterns in place. Here we have compared MVC vs Flux vs Redux to help you create effective, sensible and scalable application architecture.

Continue reading “MVC vs Flux vs Redux: Key Differences Explained”

Visualizing Angular dependencies

When working on large Angular projqects, managing dependencies between files and modules can become a challenge.

Here are 2 tools to help you visualize dependencies in an Angular project.

Madge – visualizes typescript dependencies

  • https://www.npmjs.com/package/madge
  • Install: npm install -g madge
  • In root folder of project, run:
    npx madge src/main.ts --ts-config tsconfig.json --image ./deps.png

    Above will output the image “deps” in the root of project.
  • Can also be run for any typescript class, e.g. a single component such as:
    npx madge src/app/app.component.ts --ts-config tsconfig.json --image ./deps.png
  • Detect circular dependencies:
    npx madge --circular src/main.ts--ts-config tsconfig.json

  • Detect dead code (code that is never referred to anywhere in your app):
    npx madge --orphans src/main.ts --ts-config tsconfig.json

Compodoc – “The missing documentation tool for Angular..”

https://compodoc.app/

# Install globally compodoc with npm
npm install -g @compodoc/compodoc

# Create a file named tsconfig.doc.json in project root, containing: 
{
"include": ["src/**/*.ts"]
}

# Run compodoc in your project root and serve it on http://127.0.0.1:8080 (will output html based documentation in ./documentation path.
npx compodoc -p tsconfig.doc.json -s

Unlocking the power of CSS container queries: lessons from the Netflix team  |  web.dev

Container queries have revolutionized how developers approach responsive design, and the Netflix team has experienced firsthand the profound impact they can have on streamlining development, improving flexibility, and enhancing performance. This post breaks down the key benefits of using container queries, comparing them to older methods, particularly those relying on JavaScript for layout control. It includes code examples to illustrate each point, showing how container queries can make your life as a developer much easier.
web.dev/case-studies/netflix-cq