DEV Community: Anderson. J

How I Run LLM Agents in a Secure Nix Sandbox

Anderson. J — Sat, 03 Jan 2026 23:06:58 +0000

So, let's be honest. Do you trust your AI coder with full access to your machine? I sure didn't. After reading one too many horror stories about LLMs wiping disks, dropping databases, or deleting the wrong directory, I got a little paranoid. I needed to set some firm boundaries. I wanted to give my AI agents the autonomy to be useful, but without giving them the keys to the kingdom. This is the story of how I solved that problem using a pretty interesting tool: Nix.

My Goal: A Secure Playground with Very High Fences

I needed to create a sandbox for any coding agent, but it had to meet a few very strict rules. Think of it as a wishlist for peace of mind.

Zero Trust. Period. The agent gets access to nothing by default. Not my home directory, not my SSH keys, or any other sensitive file.
An Exclusive Toolkit. The sandbox should only contain the tools I explicitly approve. If the agent needs git and curl to do its job, then that's all it gets. It shouldn't even know the rest of my system PATH exists.
Controlled Access. Okay, it obviously needs network access to function. And it has to be able to read and write to the current project directory. But that’s it. A brick wall everywhere else.

Why Docker and Bubblewrap Didn't Cut It

My first thought was Docker. It’s the standard for containers, right? But I hit a wall with it almost immediately. It just felt… heavy for what I was trying to do. Worse, my entire development environment is already managed with Nix Flakes. Using Docker meant I'd have to basically copy that whole setup inside a Dockerfile. It felt clumsy and repetitive. Why manage my environment in two different places?

So I kept digging. My research eventually led me to bubblewrap, a fantastic lightweight utility for creating unprivileged sandboxes. It’s the same tech that powers Flatpak, so I knew it was solid. But it's also very low-level. How could I make it work smoothly with my Nix projects without writing a mountain of shell scripts?

Figuring out the answer to that question was how I found a NixCon talk by Alex David about jail.nix. It was perfect. It's a Nix-native library that gives you beautiful, high-level tools for building bubblewrap sandboxes. It understands Nix packages right away and lets me write my security rules declaratively. It was the elegant solution I was looking for.

If you're interested in diving deeper, Alex David has documentation and the source code available online.

The Flake: Let's See How It Works

This is the flake.nix I ended up with. It looks a bit dense at first, but let me break it down.

{
  # --- 1. Inputs: Just listing our dependencies ---
  inputs = {
    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
    jail-nix.url = "sourcehut:~alexdavid/jail.nix";
    llm-agents.url = "github:numtide/llm-agents.nix";
    flake-utils.url = "github:numtide/flake-utils";
  };

  outputs = { nixpkgs, jail-nix, llm-agents, flake-utils, ... }:
  flake-utils.lib.eachDefaultSystem (system:
  let
    pkgs = import nixpkgs {
      inherit system;
      config.allowUnfree = true;
    };
    jail = jail-nix.lib.init pkgs;

    # I'm using crush and opencode, but you could swap in others.
    crush-pkg = llm-agents.packages.${system}.crush;
    opencode-pkg = llm-agents.packages.${system}.opencode;

    # Common packages available to both agents
    commonPkgs = with pkgs; [
      bashInteractive
      curl
      wget
      jq
      git
      which
      ripgrep
      gnugrep
      gawkInteractive
      ps
      findutils
      gzip
      unzip
      gnutar
      diffutils
    ];

    # Common sandbox options shared by both agents
    commonJailOptions = with jail.combinators; [
      network
      time-zone
      no-new-session
      mount-cwd
    ];

    # --- 2. The Sandboxes ---
    makeJailedCrush = { extraPkgs ? [] }: jail "jailed-crush" crush-pkg (with jail.combinators; (
      commonJailOptions ++ [
        # Give it a safe spot for its own config and cache.
        # This also lets it remember things between sessions.
        (readwrite (noescape "~/.config/crush"))
        (readwrite (noescape "~/.local/share/crush"))

        (add-pkg-deps commonPkgs)
        (add-pkg-deps extraPkgs)
      ]));

    makeJailedOpencode = { extraPkgs ? [] }: jail "jailed-opencode" opencode-pkg (with jail.combinators; (
      commonJailOptions ++ [
        # Give it a safe spot for its own config and cache.
        # This also lets it remember things between sessions.
        (readwrite (noescape "~/.config/opencode"))
        (readwrite (noescape "~/.local/share/opencode"))
        (readwrite (noescape "~/.local/state/opencode"))

        (add-pkg-deps commonPkgs)
        (add-pkg-deps extraPkgs)
      ]));

  in
  {
    lib = {
      inherit makeJailedCrush;
      inherit makeJailedOpencode;
    };

    # --- 3. Putting It All Together in the Dev Shell ---
    devShells.default = pkgs.mkShell {
      packages = [
        pkgs.nixd # A little something for my editor.

        (makeJailedCrush {})
        (makeJailedOpencode {})
      ];
    };
  });
}

Inputs: This part is simple. We're just telling Nix where to find our dependencies: the standard Nix packages, jail.nix, the agents themselves, and a helper library.
Common Configuration: I've defined commonPkgs and commonJailOptions once and reused them for both agents. This keeps things DRY and makes it easy to add a new tool or security option to all agents at once.
The Sandbox Definitions: Here's the core of it. We use jail.nix to wrap our agents, crush and opencode. The combinators are the security rules, and mount-cwd is the bit that gives the agent access only to the project I'm working on. We also give each agent a couple of small directories for its own config so it can remember things. The add-pkg-deps section is my hand-picked list of commands the agents are allowed to use. They get git, curl, and ripgrep, but they have no clue that powerful tools like kubectl, gcloud, or ssh even exist on my machine.
The Dev Shell: Finally, I drop the newly created sandboxed agents into my development shell. Now, when I type nix develop in my terminal, the commands jailed-crush and jailed-opencode are sitting there, ready to go.

Real-World Example: Go Development

Let me show you a simpler, real-world example. Here's how I use jailed-agents for a Go project:

{
  description = "development environment for go-grep-ast";

  inputs = {
    nixpkgs.url = "github:nixos/nixpkgs/nixos-25.11";
    jailed-agents.url = "path:/home/anderson/projects/jailed-agents";
  };

  outputs = { self, nixpkgs, jailed-agents }:
  let
    system = "x86_64-linux";
    pkgs = import nixpkgs {
      system = system;
      config.allowUnfree = true;
    };
  in
  {
    devShells.${system}.default = pkgs.mkShell {
      # https://nixos.wiki/wiki/Go#Using_cgo_on_NixOS
      hardeningDisable = [ "fortify" ];
      packages = with pkgs; [
        go
        gopls
        golangci-lint
        go-task
        delve
        gcc

        (jailed-agents.lib.${system}.makeJailedCrush {
          extraPkgs = [
            go
            gopls
            golangci-lint
            go-task
            libgcc
            gcc
          ];
        })
      ];
    };
  };
}

You'll notice the Go packages are listed twice in the packages list. The first set (go, gopls, etc.) are available in your dev shell for you to use normally. The second set inside makeJailedCrush defines what the AI agent can access. This separation gives you full control. In that way, you can powerful tools in your environment while restricting what the agent uses.

The Result: Embracing 'YOLO Mode' Without the Fear

Honestly, using this setup is liberating. I can now fire up an agent on a complicated task, let it run wild in "yolo mode," and completely turn my attention elsewhere. I don't have a worry in the back of my mind that it might accidentally run a destructive command or wander into the wrong directory. Its world is strictly defined by the sandbox I built. It allows me to actually focus on my own work, checking in on the agent's progress when it's convenient for me.

What I really love is that I solved a very real problem using the tools I already enjoy. This isn't just some one-off hack, either. A few of my coworkers have already grabbed a version of this flake to lock down their own agents. It’s a small solution, but it solved a big problem for us.

Have you found yourself restricting your AI agents' access, or are you living on the edge? I'd love to hear how you're handling security in your development workflow.

fastify-hashids: Obscure Your Database IDs Like a Pro!

Anderson. J — Wed, 26 Jul 2023 22:46:19 +0000

Greetings, fellow developers! Today, I'd like to introduce you to a Fastify plugin that can significantly simplify handling sensitive data in your applications. Say hello to Fastify Hashids! This plugin seamlessly integrates Hashids into your routes, providing a straightforward way to encode and decode data securely.

The Why behind Fastify Hashids

When building web applications, it's common to use numerical IDs as primary keys in databases. However, these IDs can unintentionally leak sensitive information due to their sequential nature. For instance, if records receive IDs in ascending order, it's easy to infer the total number of records present. This seemingly harmless detail might indirectly reveal additional information like the total number of users, orders, or partial revenue, potentially posing a security risk.

Hashids comes to the rescue by obfuscating numbers, effectively resolving this issue. Here's an example of how it works:

ID	Encoded ID
1	olejRejN
2	pmbk5ezJ
3	pnel5aKB
4	MvbmOeYA
5	openRe7A

You can find more details about hashids in the official documentation.

Now, my approach when working with Fastify involves using sequential numeric IDs on the backend. However, the real magic happens when data flows in and out of the server. At that point, I implement a hashing layer using Fastify Hashids to ensure robust security without complicating things internally.

Using Fastify Hashids

To get started, let's install the necessary packages for your project. Open your terminal and run:

pnpm install fastify fastify-hashids

With the packages installed, let's put Fastify Hashids to work by creating a basic Fastify server.

// index.mjs
import Fastify from 'fastify'
import { randomInt } from 'crypto'

const fastify = Fastify({
  logger: true
})

// Declare a route
fastify.get('/user', async function handler (request) {
  const id = randomInt(100000);
  const name = 'John'

  request.log.info({originalId: id});
  return { 
    id,
    name
  }
})

// Run the server!
try {
  await fastify.listen({ port: 3000 })
} catch (err) {
  fastify.log.error(err)
  process.exit(1)
}

If we start our server using node index.mjs and make some requests to it, we'll see the following output:

curl localhost:3000
{"id": 85171, "name": "John"}

Additionally, the console will display logs like this:

{"level":30,"time":1690406026744,"pid":59530,"hostname":"ander-server","reqId":"req-2","originalId": 85171}
{"level":30,"time":1690406026744,"pid":59530,"hostname":"ander-server","reqId":"req-2","res":{"statusCode":200},"responseTime":0.5319289565086365,"msg":"request completed"}

Notice the "originalId": 85171 in the logs, helping us track the original ID before encoding.

Now, let's integrate Fastify Hashids. All we need to do is import it and register it. That's it!

// Import the framework and instantiate it
import Fastify from 'fastify'
import fastifyHashids from 'fastify-hashids'
import {randomInt} from 'crypto'

const fastify = Fastify({
  logger: true
})

// Register Fastify Hashids
await fastify.register(fastifyHashids);

// Declare a route
fastify.get('/user', async function handler (request) {
  const id = randomInt(100000);
  const name = 'John'

  request.log.info({originalId: id});
  return { 
    id,
    name
  }
})

// Run the server!
try {
  await fastify.listen({ port: 3000 })
} catch (err) {
  fastify.log.error(err)
  process.exit(1)
}

With this integration, the output will look different:

curl localhost:3000
{"id": "jy2z", "name": "John"}

The console will still display the original ID without encoding:

{"level":30,"time":1690406026744,"pid":59530,"hostname":"ander-server","reqId":"req-2","originalId": 79501}

Pretty cool, right?

Fastify Hashids also offers some options for fine-tuning your hashing experience. You can pass the following options to the plugin:

hashidsOptions.idRegexp: A regular expression that fastify-hashids uses to automatically identify properties as IDs. By default, it matches variations of "id, ids, ID, userID," etc. You can customize this regex to match your specific property names. Set it to null to disable the regex-based identification.
hashidsOptions.propertyList: An array of property names to include in the hashing process. Properties listed here will be considered for encoding with Hashids, in addition to those identified by the idRegexp.

For more options, such as salt and minimum length, check out the hashids.js repo.

Wrap-Up

Fastify Hashids is a great tool that effortlessly integrates Hashids into your Fastify applications. It's perfect for securing sensitive data like database IDs, enhancing your application's security without adding unnecessary complexity.

Since this plugin is open-source, you're welcome to contribute, report issues, or suggest improvements.

Happy coding! 🚀

Understanding highWaterMark in Node.js Streams

Anderson. J — Thu, 20 Apr 2023 19:27:47 +0000

If you're working with Node.js streams, you've probably come across the highWaterMark parameter. But what is it, and why is it important? In this post, we'll explore the basics of highWaterMark and how it affects your stream pipelines.

What is `highWaterMark`?

Simply put, highWaterMark is a parameter that sets a limit on the amount of data that can be stored in the internal stream buffer. When the buffer reaches this limit, Node.js stops asking for more data until the buffer is emptied. This helps prevent your program from consuming too much memory and crashing.

However, it's important to remember that highWaterMark is a threshold, not a strict limit. You can keep manipulating data even when the buffer size exceeds highWaterMark. But be aware that the data will still be buffered in memory, which could cause your memory to fill up and you to lose all the benefits of Node.js streams.

If you're using the writable.write() method, it returns a boolean value that indicates whether it's safe to continue writing data to the stream. Specifically, if the internal stream buffer size is bigger than highWaterMark, it'll return false. In this case, you need to wait for the 'drain' event to be emitted before you can resume writing data to the stream. If the buffer size is smaller than highWaterMark, then it'll return true, and you can continue writing data without waiting.

Important things to keep in mind:

highWaterMark is a parameter that sets a limit on the amount of data that can be stored in the internal stream buffer.
This limit is a threshold, not a strict limit, so you can keep manipulating data beyond it if you need to.
However, exceeding the threshold could cause your memory to fill up, so it's important to be mindful of your memory usage.
If you're using the writable.write() method, check the boolean value it returns before keep writing data to the stream.

By understanding highWaterMark and how it works, you can write more efficient and robust code that takes advantage of Node.js streams. Happy streaming! 🌊

If you want to stay up to date with more Node.js tips and tricks, follow me on Twitter, And don't forget to check out the Twitter thread version of this post for a quick summary.

filename, dirname, and others are not really globals.

Anderson. J — Thu, 20 Oct 2022 19:03:33 +0000

A global variable is a variable that is declared in the global scope, in other words, a variable that is visible from all other scopes.

mdn web docs

In NodeJS we have multiple variables and global objects, some of them are only specific to Node (Buffer, Event, process) while others are part of the Javascript language (JSON, Proxy, console)

__dirname is a variable that tells you the path of the folder where the current javascript file lives. So __dirname has a different value depending on the file path where this variable it's used.

__filename is a variable that holds the filename of the code that it's running.

You can use both of them anywhere in your code, so they must be globals. Right?

Right?

It turns out that __dirname, __filename, exports, module and even require() are not globals. You can use all these objects anywhere in your code, but they only exist in the module scope. Node does not execute our module code directly. Instead of that, code lives within a closed scope, and this scope is inside the module wrapper.

Inside the module wrapper

Every module is wrapped in a function that looks like this:



(function(exports, require, module, __filename, __dirname) {

  // Module code actually lives here

});

You can take a look at the module wrapper in the Node source code But you can also check it in your terminal by running the following code:



const Module = require('module');

console.log(Module.wrap());

The output should be something like this:



> node main.js

(function(exports, require, module, __filename, __dirname) { undefined
});

But what is that undefined after the curly brackets? Well, that is where your actual code lives. The wrapper function takes one argument, and it's the module code.

In Node source code, wrap function looks like this:



Module.wrapper = [
  '(function (exports, require, module, __filename, __dirname) { ',
  '\n});',
];

let wrap = function(script) {
  return Module.wrapper[0] + script + Module.wrapper[1];
};

So that means that if you call wrap and pass some code as argument:



const Module = require("module");

console.log(Module.wrap('console.log("hello from the module wrapper")'));

You will get:



> node main.js

(function (exports, require, module, __filename, __dirname) {    
  console.log("hello from the module wrapper")
});

Now that we know this, we can modify the module wrapper (just for fun, of course)

We're going to need two files. The first one will be module.js



function sum(a, b) {
  return a + b;
}

console.log(sum(1, 2));

It'll be just a simple two-sum.

The second file we'll need, it's the one where we'll modify the module wrapper. This file will be calledmain.js



const Module = require("module");

Module.wrap = function(script) {
  console.log('hello from the module wrapper, today we will be executing the following code:');
  console.log(script);

  return Module.wrapper[0] + script + Module.wrapper[1];
}

require('./module');

Here we're replacing wrap() function with our own. We know that this function takes the module code as argument, and should return the code wrapped.

Finally, we call require('./module') to import our previously created file.

Now we just need to run node main.js and the output should be:



> node main.js

hello from the module wrapper, today we will be executing the following code:
function sum(a, b) {
  return a + b;
}

console.log(sum(1,2));

3

Very cool, very cool.

Why do we need a wrapper?

Node docs says it is used to keep top-level variables scoped to the current module, in that way those variables are not propagating to the global object. It is also used to provide global-looking variables like __filename and __dirname, if you think about it, those variables are related to each module, so it makes sense they not being truly globals.

That's it for today! I just wanted to share something interesting I discovered in the last few days. I'm starting to dig more and more into NodeJS source code, so probably I'll be sharing more stuff here or on Twitter.

Please, share the post with your friends and let me know in the comments if you know about another interesting piece of code from NodeJS source.

Typescript Tip: Safer functions with branded types.

Anderson. J — Mon, 11 Apr 2022 23:18:28 +0000

Imagine you have a function like this one:

interface Post {
  id: number
  title: string
}

export function getPosts(page: number): Post[] {
  // perform some query to return posts from a database
  // ...
  // ...
  return []
}

getPosts accepts a page argument and retrieves posts from a data source.

Now, what if getPosts is used like this?

const posts = getPosts(-1);

Obviously That's incorrect because a page number can not be negative. A simple solution would be add a line like this one:

if(page < 0) throw Error('Page must be a positive number')`

But would not be nice if we receive a type error when we try to call the function with a negative number?

The problem here, is that the type number is too general for our function. number can be any number and we are expecting just a positive number.

We can create a type alias for it:

type PositiveNumber = number;

Although it makes our code more readable, using a simple alias doesn't solve the problem. Because we are still able to pass any number as an argument to getPosts().

This is when we can create a Branded Type.

Branded Types

When the base type is too general we can use this pattern.

type PositiveNumber = number & { __type: 'PositiveNumber' };

Here we are using an intersection between the base type (number) and an object with the __type property, this private property holds the brand type, and its used to differentiate it from a regular number.

We can rewrite our function to:

type PositiveNumber = number & { __type: 'PositiveNumber' };

export function getPosts(page: PositiveNumber): Post[] {
  // ...
  return []
}

Now if we try to call it like before, we're going to receive the error we expect.

const posts = getPosts(-1); 
// ^^^ Argument of type 'number' is not assignable to parameter of type 'PositiveNumber'.

Let's try with a valid number:

const posts = getPosts(2); 
// ^^^ Argument of type 'number' is not assignable to parameter of type 'PositiveNumber'.

Hmm, that's doesn't make sense 🤔, I'm sure 2 is a positive number.

We are still receiving the same error because we are still passing a number, not a PositiveNumber. Son wee need to explicitly say to the compiler that we are passing a PositiveNumber using the as keyword.

const posts = getPosts(2 as PositiveNumber);

That will get rid of the error.

Now, what if we have a variable that we can't tell if it's a positive number or not?

const { page } = incomingRequest.body;  
// here, page could be a positive or a negative number, so we can't use the `as` keyword because we can't be sure of what is the actual value;

const posts = getPosts(page);

To solve this we can use an assertion function that asserts page is an actual PositiveNumber

function assertsPositiveNumber(value: number): asserts value is PositiveNumber {
  if(value < 0) throw new Error('Value must be a positive number');
}

Now with this assertion, we can tell if page is a positive number or not.

const { page } = incomingRequest.body;  

assertsPositiveNumber(page);

const posts = getPosts(page); // at this point TypeScript know that `page` its a PositiveNumber

If you liked this tip, please, share it and hit the ♥

TypeScript Tip: Using Conditional Types To Refactor Overloads.

Anderson. J — Mon, 04 Apr 2022 21:46:45 +0000

Introduction

A few days ago I was refactoring code and I found something like this:

interface IRawUser {
  first_name: string
  email: string,
  id: number,
}

interface User {
  name: string,
  email: string
  print: () => void
}

declare function userFactory(rawUser: IRawUser): User;

function mapRawToUserObject(rawShow: IRawUser[]): User[];
function mapRawToUserObject(rawShow: IRawUser): User;
function mapRawToUserObject(rawShow: IRawUser | IRawUser[]): User | User[] {
  if (rawShow instanceof Array) {
    return rawShow.map((raw) => userFactory(raw));
  }

  return userFactory(rawShow);
}

The function mapRawToUserObject uses overloads to express the following: If we call it with an array of IRawUser[] it will return an array of User[], if we call it with a single IRawUser it will return a single User.

Nothing too complex but it seemed like a good opportunity to refactorize the method definition.

Creating a conditional type.

We need to take a decision on the type of input that the method receives.

The possible inputs we need to look at are: IRawUser and IRawUser[]

type MapRawResult<T extends IRawUser | IRawUser[]> = any;

Then we add the conditional logic:

type MapRawResult<T extends IRawUser | IRawUser[]> = T extends IRawUser ? User : User[]

In plain words: If T is assignable to IRawUser return User otherwise return User[]

Applying the conditional type to our method.

Right now our method looks like this:

function mapRawToUserObject(rawShow: IRawUser[]): User[];
function mapRawToUserObject(rawShow: IRawUser): User;
function mapRawToUserObject(rawShow: IRawUser | IRawUser[]): User | User[] {
  // implementation
}

We can now remove the overloads, add a generic parameter (T extends IRawUser | IRawUser[]), and replace the return type with the one we recently created.

type MapRawResult<T extends IRawUser | IRawUser[]> = T extends IRawUser ? User : User[]

function mapRawToUserObject<T extends IRawUser | IRawUser[]>(rawShow: T): MapRawResult<T> {
  // implementation
}

At this point, typescript will complain about the type of value that we are returning.

The compiler can't infer the type of the value we are returning, a solution for this is to explicitly express the type we are expecting using the keyword as.

Our final method then looks like this:

function mapRawToUserObject<T extends IRawUser | IRawUser[]>(rawShow: T): MapRawResult<T> {
  if (rawShow instanceof Array) {
    return rawShow.map((raw) => userFactory(raw)) as MapRawResult<T>
  }

  return userFactory(rawShow) as MapRawResult<T>
}

Conclusion

If we try with some values, we can see how our method behaves the same as before but without using overloads.

As a bonus we could use a type alias for IRawUser | IRawUser[] and make the code cleaner:

type MapRawArg = IRawUser | IRawUser[];

type MapRawResult<T extends MapRawArg> = T extends IRawUser ? User : User[];
function mapRawToUserObject<T extends MapRawArg>(rawShow: T): MapRawResult<T> {
  // ...
}

NestJS: Creating a pipe to optimize uploaded images.

Anderson. J — Wed, 23 Mar 2022 23:15:56 +0000

Cover image by Tim Mossholder on Pexels

Introduction.

In NestJS Context, pipes are intermediary between the incoming request and the request handled by the route handler.

Pipes have 2 common use cases:

Validation
Transformation

In the case of transformation, pipes take care of transforming input data in a specific format to be received by the route handler.

An example of this would be converting a String to an Int, which is the case of ParseIntPipe.

In this post, we're going to build a pipe that takes an incoming image and transforms it into a size and web-friendly format.

Preparing Multer.

Nest uses by default Multer middleware to handle data sent with multipart/form-data which is used principally to upload files via HTTP POST.

First, we need to install Multer typings



npm i -D @types/multer

Then let's import it to our root module.



// app.module.ts
@Module({
  // importing MulterModule and use memory storage to use the buffer within the pipe
  imports: [MulterModule.register({
    storage: memoryStorage()
  })],
  controllers: [AppController],
  providers: [AppService],
})

The route handler needs to receive the uploaded file by the client, so we need to add the interceptor FileInterceptor() to extract the file from the request.



// app.controller.ts
  @Post()
  @UseInterceptors(FileInterceptor('image'))
  uploadImage(@UploadedFile() image: Express.Multer.File) {
    this.service.uploadImage(image);
  }

Building the pipe.

To handle the image transformation we're going to use Sharp. Sharp is a high performance image processing module, it's very useful to convert large images to smaller formats.

Let's install this module along with its typings



npm install sharp



npm i -D @types/sharp

We can now create our pipe by creating the file sharp.pipe.ts

A pipe must implement the PipeTransform interface and must be annotated with the @Injectable() decorator.

PipeTransform<T, R> is a generic interface, where T is the input type and R is the type returned by the transform() method.

In this case, we expect to receive an Express.Multer.File and after the transform process, we're going to return a string with the name of the file.



import { Injectable, PipeTransform } from '@nestjs/common';

@Injectable()
export class SharpPipe implements PipeTransform<Express.Multer.File, Promise<string>> {

  async transform(image: Express.Multer.File): Promise<string> {

  }

}

With these lines, our pipe fulfills the PipeTransform interface. We're ready to begin the implementation.

The final code looks like this:



import { BadRequestException, Injectable, PipeTransform } from '@nestjs/common';
import * as path from 'path';
import * as sharp from 'sharp';

@Injectable()
export class SharpPipe implements PipeTransform<Express.Multer.File, Promise<string>> {

  async transform(image: Express.Multer.File): Promise<string> {
    const originalName = path.parse(image.originalname).name;
    const filename = Date.now() + '-' + originalName + '.webp';

    await sharp(image.buffer)
      .resize(800)
      .webp({ effort: 3 })
      .toFile(path.join('uploads', filename));

    return filename;
  }

}

Let's explain some of the lines from the above code.

image.originalname contains the file's original name, including its extension. We're planning to convert this file into a .WEBP file, so the original extension is not useful in this case. We only extract the file name with the path module.



const originalName = path.parse(image.originalname).name;

Then we create a new file name, to avoid duplicated collisions. Finally, we add the new extension: .webp



const filename = Date.now() + '-' + originalName + '.webp';

To finally convert our image, we execute sharp with the image buffer, we resize it to 800x800 and convert it to webp. Sharp has an extensive API to manipulate quality and sizes, you can find more options in their oficial docs

We finish by calling .toFile() with the path where this image is going to be saved. In this case it will be saved in ./uploads/<filename>.webp



await sharp(image.buffer)
  .resize(800)
  .webp({ effort: 3 })
  .toFile(path.join('uploads', filename));

Our pipe is ready to be used, now we need to integrate it into our route handler. To do that, it's simple as passing our new pipe as an argument to the UploadedFile decorator.

As SharpPipe returns a string we need to change the image typing in the route handler. So we replace Express.Multer.File with string.



// app.controller.ts

  @Post()

  @UseInterceptors(FileInterceptor('image'))

  //                        vvv Our pipe

  uploadImage(@UploadedFile(SharpPipe) image: string) {

    this.service.uploadImage(image);

  }

Conclusion.

And in that way, we already have a flow to optimize uploaded images by the client.

I made a quick test and tried to upload a 5MB image, after getting through the pipe the image size was 15.5KB. That's a decrease of ~ 99%!

If you liked this tutorial, please share and hit ❤

A simple way to handle errors in Express.js

Anderson. J — Wed, 09 Feb 2022 02:29:11 +0000

Exists many ways to handle Errors in Express. A common way to do it it's using the default express middleware.

app.use(function(err, req, res, next) {
    console.error(err.stack);
    res.status(500).send('Something broke!');
}

Another way could be to handle errors inside of controllers.

router.get("/users", async (req, res) => {
    try {
        const users = await User.getAll();
    }
    catch(err) {
        return res.status(500).json({
            message: "Something broke!",
        });
    }

    res.status(200).json({
        message: "success",
        data: users,
    });
})

That handling way could cause some problems to keep the code clean. This problem becomes more evident when we have many controllers or some functions like the next example:

router.get("/profile", async (req, res) => {
    try {
        const {username} = await User.auth();
        const preferences = await User.getPreferences(username);
    }
    catch(err) {
        if(err instance of AuthError) {
            return res.status(401).json({
                message: "Unauthorized",
            });
        }
        else {
            return res.status(500).json({
                message: "Something Broke!",
            });
        }
    }

    res.status(200).json({
        message: "success",
        data: users,
    });
});

We can see how the code becomes less readable because of try/catch blocks. If we have other routes where we need to call similar functions we will be repeating code, and that's not ideal.

A simple solution.

A simple solution for this problem is using a wrapper that contains the controller function and letting the wrapper handle the exception.
The wrapper looks like this:

const errorHandlerWrapper = (promiseCallBack) => {
  return async (req, res, next) => {
    try {
      await promiseCallBack(req, res, next);
    } catch (err) {
      if (err instanceof AuthError) {
        res.status(401).json({
          message: "Unauthorized",
        });
      } 
      else {
        console.log(err);
        res.status(500).json({
          message: "Something Broke!",
        });
      }
    }
  };
};

errorHandlerWrapper receives a controller used as a callback. Then, it returns a function that executes the callback inside a try/catch block.

In that way, we delegate error handling outside of controllers.

After refactoring the code, it looks like this:

router.get("/profile", errorHandlerWrapper(async (req, res) => {
    const {username} = await User.auth();
    const preferences = await User.getPreferences(username);

    res.status(200).json({
        message: "success",
        data: users,
    });
}));

Note how the code reduced and became more readable. All this while we are still effectively handling errors.

Conclusion

It's important to keep route controllers readable. When the code begins to grow, keeping controllers clean could become a challenge. Implementing an alternative to repetitive code blocks it's the first step to face it.

If you know alternative ways to handle exceptions within controllers, let me know in the comments ✌

Construye Aplicaciones Web Accesibles Con Grommet

Anderson. J — Fri, 29 May 2020 18:13:25 +0000

Hace unos días rediseñé mi portafolio. Siempre me gusta integrar nuevas tecnologías a cada proyecto personal, de esa manera aprendo algo nuevo y puedo descubrir nuevas joyas que mejoren mi flujo de desarrollo.

Esta vez fue el turno de Grommet.

¿Que es Grommet?

Grommet es un framework basado en react que provee accesibilidad, modularidad, diseño responsive y tematización en un paquete ordenado.

Si buscas un framework/sistema de diseño para react, que sea ligero, minimalista, con componentes accesibles y con grandes capacidades de personalizacion, Grommet es lo que buscas.

Cuenta con todos los componentes necesarios para que empieces a construir tu web app. Incluyendo componentes que dan soporte al esquema, tipografía, formularios, visualizaciones de datos y muchas otras utilidades.

¿Por que elegí Grommet?

A la hora de usar una librería con componentes de diseño me gusta usar mis propios colores, pero las soluciones para temas personalizados en algunos frameworks es un poco más complicada de lo que me gustaría, buscaba algo fácil de editar e integrar. Y luego de buscar entre varias opciones, noté que Grommet tiene un diseñador para Temas. No busqué más.

El creador de temas para Grommet, hace que crear un nuevo tema sea muy sencillo, y al mismo tiempo te permite la posibilidad de agregar soporte para paletas de colores dark/light

Para cambiar los colores, las fuentes y los tamaños de los elementos solo hacen falta un par de clics, gracias a su diseñador con una interfaz WYSIWYG. Todos los detalles del tema están contenidos en un JSON, y solo basta con incluirlo en el proyecto y pasarlo como propiedad en el tope de nuestra app para ver los componentes tomar el aspecto de nuestra marca :D

Y no solo termina ahí. Grommet también cuenta con un diseñador de componentes, el cual también tiene una interfaz WYSIWYG que te permite crear y modificar componentes en tiempo real ¡Sin necesidad de escribir código! Solo con clics puedes añadir y quitar propiedades a los componentes de Grommet y así empezar a diseñar tus propios componentes.

Esa herramienta hizo que mi velocidad de desarrollo aumentara de forma significativa, podía diseñar los componentes para mi sitio web, y al mismo tiempo verificar si lucían exactamente como yo esperaba, y por último, exportar mi creación para luego incluir el componente en mi código fuente.

No tuve ningún desafío o contratiempo usando este framework, definitivamente vale la pena intentarlo, estoy seguro de que cada desarrollador puede encontrarle un espacio para algún proyecto y no se arrepentirá.

Presentando la Web Share API

Anderson. J — Thu, 21 Nov 2019 23:10:37 +0000

Cuando hablamos de las Web APIs, nos referimos a las APIs que están integradas en los navegadores. Simplemente se trata de una API que los navegadores proveen, para acceder a ciertas funcionalidades y características del navegador (¡Y del sistema operativo!) Esta API es consumida desde el front-end, así que si, para usarla tenemos que usar JavaScript.

Estas API's están ayudando muchísimo al crecimiento y aceptación de las PWA (Progressive Web Apps) eliminando cada vez más la línea divisoria entre las aplicaciones nativas y las aplicaciones web.

Este post se enfocará en una pequeña parte de la Web API, y es la API para compartir contenido, o la Web Share API.

La Web Share API fue lanzada en 2016 por el equipo de Chrome, en su momento fue específicamente dirigida para Android Chrome 61. Desde entonces ha sido integrada a otros navegadores populares. Haciendo que compartir contenido en la web sea mucho más cómodo e intuitivo.

Compartiendo en la Web

Es común ver distintos tipos de widgets para compartir contenido en la web.

Normalmente al presionar sobre ellos, te redirigen a la red social donde quieres compartir el contenido, abren una nueva pestaña o incluso una ventana emergente. Todas estas maneras, son formas de lograr que el usuario comparta el contenido con su audiencia, pero también son formas de arruinar la experiencia de usuario, ya que ese no es el comportamiento que se espera al utilizar una aplicación nativa, y eso es justo lo que intentan las Progressive Web Apps, emular al máximo una aplicación nativa del móvil o de la computadora.

Compartiendo contenido con widgets personalizados

Compartiendo en la Web (La manera cool)

Gracias a la Web Share API no es necesario construir de forma manual una característica para compartir contenido, tampoco necesitamos de widgets de terceros. ¡El Navegador y el sistema operativo se encargarán de todo!

Esta API no solo beneficia a los desarrolladores, también tiene un impacto grande en la experiencia de usuario, ya que, al presionar el botón de compartir aparecerá justo lo que el usuario espera: Una ventana que luce familiar, con opciones para compartir contenido en distintas plataformas. ¡Y lo mejor, es que estas opciones están basadas en las aplicaciones que el usuario tiene instaladas!

Usando la Web Share API

Primero que todo, es necesario comprobar si el navegador actual soporta la Web Share API

if (navigator.share) {
  // La Web Share API está disponible
} else {
  // No está disponible, es necesario implementar una alternativa
}

En caso de que esté disponible, podemos hacer uso de la API.

const sharePromise = navigator.share(data);

El método share, recibe como parametro un objeto data que debe contener los siguientes campos:

Campo	Descripción
url	La URL del contenido que se quiere compartir
text	El texto adjunto a la URL
title	Representa el título del contenido

Este método devuelve una Promise, que será resuelta una vez el usuario haya elegido una aplicación para compartir. La Promise fallará en caso de que el parámetro data no haya sido especificado de forma correcta. También fallará en caso de que el usuario cierre la ventana para compartir el contenido.

Para que todo salga bien debes tener en cuenta 2 cosas:

El sitio debe ser servido a través de HTTPS
Solo se puede invocar la API en respuesta a la acción de un usuario (click en un botón, por ejemplo)

Ejemplo:

const shareData = {
  title: 'DEV Community',
  text: 'Check my DEV profile!!',
  url: 'https://dev.to/andersonjoseph',
}

const btn = document.querySelector('button');


btn.onclick = () => {
  navigator.share(shareData)
    .then(() => console.log('Contenido Compartido!'))
    .catch(() => console.log('Sucedió algo inesperado'))
}

bastante simple.

Conclusión

Esta API es el futuro para compartir contenido, provee una forma efectiva y muy intuitiva para compartir. En un futuro muy cercano, esta es la forma en la cual los usuarios compartirán links mediante web apps.
Aunque está siendo soportada por distintos navegadores, es importante que verifiques si el navegador tiene soporte para la Web API.
Al momento de escribir esto, esta es la tabla de compatibilidad según Can I Use

También es importante que utilices mecanismos de alternativa en caso de que el navegador del usuario no sea compatible con esta API.

What They Want, Is What They Get: The Partial Response Strategy

Anderson. J — Mon, 10 Jun 2019 19:24:00 +0000

When we are designing software with performance and scalability in mind, we are always looking reduce the network activity and machine resources. We implement and design patterns, strategies and architectures to have the best possible performance in any circumstance.

Partial Response

A partial response is like a SQL select statement where you can specify only the fields you want back. Only the attributes of interest are requested. Previously all fields for objects were returned, even if the client didn't need them. So the goal is reduce payload sizes by being more selective about what data is returned.

A couple of years ago Google introduced us the idea With the simple goal of make the web faster.
The benefits of this strategy are pretty obvious. If the API behaves like a database, it adds the possibility to the user of choose what fields want to receive. Reducing like that, the number of bits that our API deliver.

Let's say that a client request some users from an API.

GET /users

response:

{
  "results": [
    {
      "gender": "male",
      "name": {
        "title": "mr",
        "first": "andy",
        "last": "pawlik"
      },
      "location": {
        "street": "meisenweg 164",
        "city": "halle (westf.)",
        "state": "schleswig-holstein",
        "postcode": 81023,
        "coordinates": {
          "latitude": "-37.4061",
          "longitude": "-95.1859"
        },
        "timezone": {
          "offset": "+4:00",
          "description": "Abu Dhabi, Muscat, Baku, Tbilisi"
        }
      },
      "email": "andy.pawlik@example.com",
      "login": {
        "uuid": "0aaaa5ec-ab09-4720-b092-81610a218d55",
        "username": "orangecat573",
        "password": "111111",
        "salt": "OUdLDkdm",
        "md5": "64b62e0595cff0e112ed8d08364acc55",
        "sha1": "84523e164a58b81f379b7cc86330dcaeeeee47cc",
        "sha256": "1d5e441f6d2b5cb98c88741efe4993afe48327f18b6097010ca37f8c9eda3088"
      },
      "dob": {
        "date": "1950-05-19T13:38:56Z",
        "age": 69
      },
      "registered": {
        "date": "2009-01-05T22:06:17Z",
        "age": 10
      },
      "phone": "0061-0583330",
      "cell": "0171-3132822",
      "id": {
        "name": "",
        "value": null
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/men/11.jpg",
        "medium": "https://randomuser.me/api/portraits/med/men/11.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/men/11.jpg"
      },
      "nat": "DE"
    },
    {
      "gender": "female",
      "name": {
        "title": "miss",
        "first": "inés",
        "last": "van herk"
      },
      "location": {
        "street": "1201 voorstraat",
        "city": "ridderkerk",
        "state": "noord-brabant",
        "postcode": 13096,
        "coordinates": {
          "latitude": "-34.5827",
          "longitude": "-162.2972"
        },
        "timezone": {
          "offset": "-6:00",
          "description": "Central Time (US & Canada), Mexico City"
        }
      },
      "email": "inés.vanherk@example.com",
      "login": {
        "uuid": "36164c34-dcf6-4d13-9eb8-0681227d7648",
        "username": "crazylion993",
        "password": "genesis1",
        "salt": "xGhkkDZB",
        "md5": "1b662495a9619402ff22219cb13b31a8",
        "sha1": "39fcb31864451020f63275bddbd53c05ff353eeb",
        "sha256": "63152369be81139d6c0e457c319416b4b457dc3badf2e6ad702d594fa1fac6cb"
      },
      "dob": {
        "date": "1980-07-15T13:38:56Z",
        "age": 38
      },
      "registered": {
        "date": "2008-05-14T16:59:07Z",
        "age": 11
      },
      "phone": "(141)-015-6780",
      "cell": "(726)-722-0668",
      "id": {
        "name": "BSN",
        "value": "49767252"
      },
      "picture": {
        "large": "https://randomuser.me/api/portraits/women/13.jpg",
        "medium": "https://randomuser.me/api/portraits/med/women/13.jpg",
        "thumbnail": "https://randomuser.me/api/portraits/thumb/women/13.jpg"
      },
      "nat": "NL"
    }
  ]
}

It receives pretty complex information (name, address, credentials, profile pic, etc.)
But what if the user only needs gender and names? The rest of the information will be delivered in vain, because the client doesn't care about address, email or DOB.

With a partial response we can let the user choose which fields want to get, so, nobody wastes resources and we all win.

Example. Requesting gender and name

GET /users?fields=results(gender,name)

response:


{
  "results": [
    {
      "gender": "male",
      "name": {
        "title": "mr",
        "first": "andy",
        "last": "pawlik"
      }
    },
    {
      "gender": "female",
      "name": {
        "title": "miss",
        "first": "inés",
        "last": "van herk"
      }
    }
  ]
}

The response has been reduced in almost 90% in comparison with the previous!
In that way we can deliver a more compact response and is just what the user need.
The benefit is not only better performance, is also better syntax. The syntax is pretty clear, and personally it's very comfortable and specific. Only with read the endpoint you know what is that you going to get as response.

Examples

Exist a JavaScript library pretty simple to use json-mask it's a little engine (4KB) used to select specific parts of a JavaScript object.
Also exist an express middleware: express-partial-response (It uses json-mask under the hood.)

I'll be using json-mask for the next examples.


// server.js

let http = require('http');
let url = require('url');
let fs = require('fs');

let mask = require('json-mask');

let server;

server = http.createServer(function(req, res) {
  let fields = url.parse(req.url, true).query.fields;

  let data = fs.readFileSync('data.txt'); // read the JSON response example
  data = JSON.parse(data);

  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify(mask(data, fields)));
});

server.listen(3000);
console.log('listening in 3000');

Let's execute our server and start to make some requests.

$ node server.js

$ curl localhost:3000
{"results":[{"gender":"male","name":{"title":"mr","first":"andy","last":"pawlik"},"location":{"street":"meisenweg 164","city":"halle (westf.)","state":"schleswig-holstein","postcode":81023,"coordinates":{"latitude":"-37.4061","longitude":"-95.1859"},"timezone":{"offset":"+4:00","description":"Abu Dhabi, Muscat, Baku, Tbilisi"}},"email":"andy.pawlik@example.com","login":{"uuid":"0aaaa5ec-ab09-4720-b092-81610a218d55","username":"orangecat573","password":"111111","salt":"OUdLDkdm","md5":"64b62e0595cff0e112ed8d08364acc55","sha1":"84523e164a58b81f379b7cc86330dcaeeeee47cc","sha256":"1d5e441f6d2b5cb98c88741efe4993afe48327f18b6097010ca37f8c9eda3088"},"dob":{"date":"1950-05-19T13:38:56Z","age":69},"registered":{"date":"2009-01-05T22:06:17Z","age":10},"phone":"0061-0583330","cell":"0171-3132822","id":{"name":"","value":null},"picture":{"large":"https://randomuser.me/api/portraits/men/11.jpg","medium":"https://randomuser.me/api/portraits/med/men/11.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/men/11.jpg"},"nat":"DE"},{"gender":"female","name":{"title":"miss","first":"in├⌐s","last":"van herk"},"location":{"street":"1201 voorstraat","city":"ridderkerk","state":"noord-brabant","postcode":13096,"coordinates":{"latitude":"-34.5827","longitude":"-162.2972"},"timezone":{"offset":"-6:00","description":"Central Time (US & Canada), Mexico City"}},"email":"in├⌐s.vanherk@example.com","login":{"uuid":"36164c34-dcf6-4d13-9eb8-0681227d7648","username":"crazylion993","password":"genesis1","salt":"xGhkkDZB","md5":"1b662495a9619402ff22219cb13b31a8","sha1":"39fcb31864451020f63275bddbd53c05ff353eeb","sha256":"63152369be81139d6c0e457c319416b4b457dc3badf2e6ad702d594fa1fac6cb"},"dob":{"date":"1980-07-15T13:38:56Z","age":38},"registered":{"date":"2008-05-14T16:59:07Z","age":11},"phone":"(141)-015-6780","cell":"(726)-722-0668","id":{"name":"BSN","value":"49767252"},"picture":{"large":"https://randomuser.me/api/portraits/women/13.jpg","medium":"https://randomuser.me/api/portraits/med/women/13.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/13.jpg"},"nat":"NL"},{"gender":"female","name":{"title":"ms","first":"nicoline","last":"brekka"},"location":{"street":"├╕rakerstien 1564","city":"krossneset","state":"rogaland","postcode":"5042","coordinates":{"latitude":"88.7205","longitude":"64.5762"},"timezone":{"offset":"+7:00","description":"Bangkok, Hanoi, Jakarta"}},"email":"nicoline.brekka@example.com","login":{"uuid":"62172038-acd0-4c39-b440-aad7fcbb484c","username":"orangeduck796","password":"windows","salt":"4ccvZvuQ","md5":"b8e39475a2ed9f8ad68915177c3ced5c","sha1":"f01c9bfdb776df443cf302e674df259dafbe7be0","sha256":"c514c25ff3923483ce139b8baf1932bc1f03e82aed7b6c99e8472e36a9577070"},"dob":{"date":"1949-10-29T14:40:11Z","age":69},"registered":{"date":"2002-03-30T18:05:22Z","age":17},"phone":"58178313","cell":"97485634","id":{"name":"FN","value":"29104900508"},"picture":{"large":"https://randomuser.me/api/portraits/women/74.jpg","medium":"https://randomuser.me/api/portraits/med/women/74.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/74.jpg"},"nat":"NO"},{"gender":"female","name":{"title":"mademoiselle","first":"tiffany","last":"michel"},"location":{"street":"8012 rue des ecrivains","city":"tujetsch","state":"valais","postcode":8047,"coordinates":{"latitude":"17.7426","longitude":"84.7045"},"timezone":{"offset":"+11:00","description":"Magadan, Solomon Islands, New Caledonia"}},"email":"tiffany.michel@example.com","login":{"uuid":"1bdff6a3-e005-4d55-af83-c10c6e2bd524","username":"blackbird202","password":"devildog","salt":"DBjwqCNp","md5":"1dd3d19403c1af2d8fc99bcf88df3892","sha1":"8a38aab0fbd7bd2e5229c7589922fb87c4101aee","sha256":"ee3b4f24d7686f019cfbea1f1d08e8b7926277853a3b84be9ce1f41a1ced250d"},"dob":{"date":"1968-12-09T13:44:54Z","age":50},"registered":{"date":"2005-06-11T16:03:32Z","age":13},"phone":"(904)-994-7298","cell":"(707)-614-1326","id":{"name":"AVS","value":"756.6921.2803.01"},"picture":{"large":"https://randomuser.me/api/portraits/women/96.jpg","medium":"https://randomuser.me/api/portraits/med/women/96.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/96.jpg"},"nat":"CH"},{"gender":"female","name":{"title":"ms","first":"dorota","last":"schiffmann"},"location":{"street":"kiefernweg 166","city":"erwitte","state":"brandenburg","postcode":40265,"coordinates":{"latitude":"1.5847","longitude":"96.2037"},"timezone":{"offset":"+3:00","description":"Baghdad, Riyadh, Moscow, St. Petersburg"}},"email":"dorota.schiffmann@example.com","login":{"uuid":"6d9a566f-283a-4fbc-bcbe-e6772547a342","username":"lazyzebra922","password":"goodtime","salt":"pmhtDQad","md5":"857d0b65744d965497f46e2020cf1b19","sha1":"10c469122851d2c38273f97ec00ca648b3de7a34","sha256":"322a589cf7053a1274fd1b2c304c022503a64d536fa23ded1554a61b97776fbc"},"dob":{"date":"1961-12-16T18:41:26Z","age":57},"registered":{"date":"2004-10-28T15:06:26Z","age":14},"phone":"0881-0401075","cell":"0171-4104339","id":{"name":"","value":null},"picture":{"large":"https://randomuser.me/api/portraits/women/37.jpg","medium":"https://randomuser.me/api/portraits/med/women/37.jpg","thumbnail":"https://randomuser.me/api/portraits/thumb/women/37.jpg"},"nat":"DE"}]}

$ curl http://localhost:3000?fields=results(gender,name)
{"results":[{"gender":"male","name":{"title":"mr","first":"andy","last":"pawlik"}},{"gender":"female","name":{"title":"miss","first":"in├⌐s","last":"van herk"}},{"gender":"female","name":{"title":"ms","first":"nicoline","last":"brekka"}},{"gender":"female","name":{"title":"mademoiselle","first":"tiffany","last":"michel"}},{"gender":"female","name":{"title":"ms","first":"dorota","last":"schiffmann"}}]}

$ curl http://localhost:3000?fields=results(login(username,password))
{"results":[{"login":{"username":"orangecat573","password":"111111"}},{"login":{"username":"crazylion993","password":"genesis1"}},{"login":{"username":"orangeduck796","password":"windows"}},{"login":{"username":"blackbird202","password":"devildog"}},{"login":{"username":"lazyzebra922","password":"goodtime"}}]}

json-mask it describes to itself like a language, so it has it own syntax:

a,b,c comma-separated list will select multiple fields
a/b/c path will select a field from its parent
a(b,c) sub-selection will select many fields from a parent
a/*/c the star * wildcard will select all items in a field

You can start to play with diferent requests and experiment with the results.

Conclusion

The partial response its a flexible way to give the users the information that they need.
It may not be so easy to implement once you have a REST API with some time in production, the implementation can be expensive in matter of source code modification. But it really worth have in mind this technique the next time that you design an API.

References

Don't marry the framework!

Anderson. J — Wed, 01 May 2019 22:02:53 +0000

In this article I'm going to talk about Back End frameworks

Frameworks have been popular in many ecosystems, not only javascript's. This has brought variety to the community. There are so many options for developers, free frameworks, and paid ones. They're powerful and very useful.

But some frameworks try to replace the architecture of our systems. And that is only the beginning of the problems.

Many frameworks ~~sellers~~ authors offer these pieces of software to solve community problems, and that's perfect. We all thankful. But a framework will not resolve ALL your problems, they can't. The author knows their own problems, co-worker problems, friends, and maybe some complaints about development flow that they've read on twitter, reddit or DEV.to. That's the reasons of why the frameworks are created, to solve those problems, not yours.

The problems you have can coincide with the problems that authors trying to solve, that's common, otherwise the frameworks would not be so popular.

The risks begin when we start to fall in love with the frameworks. It's pretty common read the docs and find a tutorial or a starter-page describing in detail how to integrate that framework to your app. In other words, wrap your architecture around that framework. Normally this implies extend framework's public classes or import some source code inside of your business entities, linking more and more your app with each line of code you write.

So. What happen if your system architecture is pretty strict?
Obviously you don't want third party code inside your business rules, but let's say that you're ok with that, you trust in framework X.

But. What happen if the framework isn't useful for your app anymore?
The product has grown up and the framework may not meet the needs of the current app, so the framework isn't as useful as has been in the earlier stages. But that is ok for you, and you feel comfortable coding a couple hours more.

And if with the time the framework evolves in a direction that isn't ideal for your app?
Functions changing, functions dying, updates not-retrocompatibles, etc.

The problem is obvious, all these risks sooner or later will charge invoice, and the damage will be bigger while more grows the app. Those risks are always in there, but most of the time we say 'I Agree' and we put on the wedding ring.

The solution is simple: Don't marry the framework!

A good software architecture is framework independent. You can see frameworks as app details or tools and it's a good practice to keep them as far away as possible from business rules

if it's necessary that some extended classes be inside of intern layers of the app, the ideal solution would be use proxies and keep those proxies as plugins that you could use with your business rules.

Conclusion

The frameworks can be powerful and useful. And the authors will always be deep believers in the piece of software that they write for our community, the problems begins when the users marries with the frameworks. You don't wanna be that person.

Watch from close every framework, don't buy just because it's on trending.
Yeah, the framework X looks pretty cool, but, what is the cost? How you are going to use it? How you are going to protect your app from it? How you are going to preserve the system design when you integrate that framework?
Be skeptical. Ask all these questions to yourself at the moment of choosing a new framework, in order to prevent that it takes all the control of your app.

DEV Community: Anderson. J

How I Run LLM Agents in a Secure Nix Sandbox

My Goal: A Secure Playground with Very High Fences

Why Docker and Bubblewrap Didn't Cut It

The Flake: Let's See How It Works

Real-World Example: Go Development

The Result: Embracing 'YOLO Mode' Without the Fear

fastify-hashids: Obscure Your Database IDs Like a Pro!

The Why behind Fastify Hashids

Using Fastify Hashids

Wrap-Up

Understanding highWaterMark in Node.js Streams

What is highWaterMark?

Important things to keep in mind:

__filename, __dirname, and others are not really globals.

Inside the module wrapper

Why do we need a wrapper?

Typescript Tip: Safer functions with branded types.

Branded Types

Further Reading:

TypeScript Tip: Using Conditional Types To Refactor Overloads.

Introduction

Creating a conditional type.

Applying the conditional type to our method.

Conclusion

Further Reading

NestJS: Creating a pipe to optimize uploaded images.

Introduction.

Preparing Multer.

Building the pipe.

Conclusion.

Further Reading

A simple way to handle errors in Express.js

A simple solution.

Conclusion

Construye Aplicaciones Web Accesibles Con Grommet

¿Que es Grommet?

¿Por que elegí Grommet?

Presentando la Web Share API

Compartiendo en la Web

Compartiendo en la Web (La manera cool)

Usando la Web Share API

Conclusión

What They Want, Is What They Get: The Partial Response Strategy

Partial Response

Examples

Conclusion

References

Don't marry the framework!

The solution is simple: Don't marry the framework!

Conclusion

What is `highWaterMark`?

filename, dirname, and others are not really globals.