Forem: Agustín

Create your perfect space to focus on your daily tasks

Agustín — Sun, 09 Nov 2025 20:50:59 +0000

I built daily.place – a small browser app to focus, plan, and breathe 🌿

Hey everyone 👋
I’m Agustín, a developer from Argentina. I created a side project called daily.place
— a simple, browser-based workspace where you can focus, organize your day, and maybe relax a bit too.

It’s free, works right in your browser, and doesn’t ask you to sign up or create an account.

🧠 The idea

I was constantly opening 3 or 4 different tabs:

one for a Pomodoro timer,
another for to-do lists,
another for background sounds,
and somehow I’d still end up checking Twitter 🙃

So I thought — what if I could put all those small things in one clean page? Nothing fancy, just a quiet place to focus. That’s how daily.place started.

⚙️ What it does

Here’s what’s inside:

🕐 Pomodoro timer with short & long breaks (customizable).
✅ To-do list — super simple, all stored locally.
🎧 Ambient sound mixer — you can blend rain, café, waves, white noise, etc.
⌨️ Keyboard shortcuts for quick actions.
🌙 Dark mode for night sessions.

Everything is saved locally in your browser — no servers, no accounts, no tracking. You just open it and start.

💡 Why I built it

Honestly, I built it for myself first. I wanted a place that felt calm, like sitting down with a coffee and saying “okay, let’s do this.”

I didn’t want another app full of analytics, logins, and subscriptions. I just wanted something that loads fast and stays out of my way.

Now it’s become my go-to tab whenever I start working.

🚀 Try it out

Go to daily.place

Pick a “place name” (like Work, Study, FocusZone — whatever you want).
That name saves your layout and settings locally.

Then just… start working. Add tasks, set the timer, mix a few sounds.

🧭 What’s next

I’m planning to add:

cloud sync so you can use it on multiple devices,
more ambient sounds,
maybe some small customization for themes and layouts.

But I’m keeping it simple — that’s kind of the point.

💬 Final thoughts

I know it’s not the next Notion or anything like that — and that’s okay. I just wanted a small place that helps me stay focused without noise.

If that sounds useful to you too, I’d love you to try it: daily.place

And if you have feedback or find bugs, you can reach me from the site — I’d love to hear from you.

Thanks for reading ❤️
— Agustín

Create your perfect space to focus on your daily tasks

Agustín — Wed, 01 Mar 2023 00:37:39 +0000

Hi everyone!, I want to share my lastest project: daily.place

The objective of daily.place is to have within reach of a single page the necessary tools to be able to have a space for concentration. Thats include:

Music list with different ambient modes (rain, forest, lo-fi, coffee shop, etc.)
Pomodoro timer with short and long pause, fully configurable.
To-do list with progress ring.
☀️ Light and 🌑 dark mode.

Everything is saved and available in your browser under a name of your choosing.

Some updates in the last changes:

🔃 Support to re-order tasks.
Added button to restart daily pomodoro's.
Vaporwave/Lofi/Synthwave sound added.
▶️⏸️ Play/pause controls added.
Transform .gif to .webm to reduce size and load times.
Add move done tasks down icon in To-Do.
Add scroll support in To-Do to prevent a long list of tasks.

Any feedback is welcome! enjoy it!

https://www.daily.place/

Get information and preview of your site meta tags

Agustín — Tue, 21 Sep 2021 21:48:10 +0000

Hello everyone, 👋

I am the creator of metazord.io, a web app to get information about the meta tags from your site and also a live preview of social networks when you shared your site link.

Why I built metazord.io? 💡

I wanted to get a site where I could simply paste a URL and get a complete information of my site meta's to check if I missed some thing or how the site will goes look when someone share it.

metazord has a Meta List with a clear description of the most common metas and what your site has or missed.

Dark Mode

I added a Dark Mode 🌘 because most common social networks on this days has a Dark mode integrated both on web and mobile.

How do it work? 🛠

Pase your site link + ENTER ✨

Live Preview:

✔ Google Search Result
✔ Facebook Card
✔ Twitter Card
✔ LinkedIn Card
✔ Slack Card
🔜 WhatsApp Card
🔜 Teams Card
🔜 Other Search Engines

I would love to hear your opinions about this product!

Hope you all have a great week!

Deploy Sapper PWA on GitHub Pages

Agustín — Sat, 06 Jun 2020 00:23:19 +0000

This a little tutorial to create a PWA App with Sapper, and deploy with GitHub Pages.

First, what is a PWA App?

To understand what this mean, I created a simple web app to divide the count of a dinner (for eg.) between friends or family. Is in Spanish but is easy to understand.

La Cuenta

This PWA is available to "install" in you mobile OS to acces directly like anyone other app installed with Play Store (for Android eg.)

Before continuing with this tutorial, can your app be deployed with GitHub pages?

GitHub pages only accepts static content, so your Sapper application must be exported to static files before being deployed, so read the Sapper exporting documentation to find out if your app can be exported and hosted on GitHub Pages.

So, after this, we can start!

Step 1

First of all, basic, install Sapper

After this, you can start to create the logic and UI for you proyect.

Step 2

Assuming your project is ready and functional, or at least ready to be tested live, you have to create a new GitHub Repo.

Step 3

Instal via npm or your favorite package manager gh-pages package.

npm i gh-pages

After installed, create a folder named script in your app root structure.

And then, into this folder, create a .js file, I named it gh-pages.
Into this js file, copy the following code:

const ghpages = require('gh-pages');

ghpages.publish(
    '__sapper__/export/<your-app-name>',
    {
        branch: 'master',
        repo: 'https://github.com/<your-github-username>/<your-repo-name>.git',
        user: {
            name: '<your-github-username>',
            email: '<your-github-email>'
        }
    },
    () => {
        console.log('Deploy Complete!')
    }
)

Note that in the branch option the master branch is placed.
Read on to find out why :D

Step 4

Go to your Sapper server.js file.
Add the following lines:

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

const url = dev ? '/' : '<your-app-name>'; // <<-

polka()
    .use(
        url, // <<-
        compression({ threshold: 0 }),
        sirv('static', { dev }),
        sapper.middleware()
    )
    .listen(PORT, err => {
        if (err) console.log('error', err);
    });

This means that while we develop and test our app on localhost, the app uses the root directory.
But when it's deployed, use /

Step 5

Now we are going to edit the package.json file adding the following scripts:

"deploy": "npm run export && node ./scripts/gh-pages.js"

And replace export script with the following:

"export": "sapper export --basepath <your-app-name> --legacy"

The reason of everything:

This will make when we run npm run deploy, Sapper will run npm run export to export our application under a folder with our app name, and then run the gh-pages.js file that will deploy this folder in the master branch of our GitHub Repo.

Step 6

Create branch into your proyect with the command git branch <your-branch-name>.
And git checkout <your-branch-name>.

Now you can commit and push your changes:

git add .
git commit -m "a commit message"
git push -u origin <your-branch-name>

Now you have a branch <your-branch-name> with the Sapper proyect and the master branch is for deploy the exported proyect and link with your GitHub Page (in the next step).

Step 7

Run the script npm run deploy and wait to Sapper export your proyect.
When everything is finished you will see the message configured in gh-pages.js

Deploy Complete!

Step 8

Go to GitHub Repo, and click in Settings. Scroll to GitHub Pages

And select master branch, the first option.

After a few minutes, you can access to you PWA App in https://your-username.github.io/your-app-name/

You can audit your page with LightHouse to check that everything is in order:

Don't forget to have your manifest.json file updated!

You can check my app repository if it helps

I hope everything is understood, if you can't comment below 😀

Greetings!

Creating a package for Svelte

Agustín — Fri, 10 Jan 2020 20:07:29 +0000

Intro

The idea of the following post is to make a quick, practical and simple version of how to create a package that can be downloaded via npm in our project made with Svelte.

I recently finished my first package and the truth is that, although the information on the web is quite complete, the idea is to transmit my process in a short and simple way, and I didn't find too many posts explaining how to leave the package working for Svelte.

1. 🛠️ Pre requisites

First of all, the following is required:

Have an account on GitHub
Account at npm
Have Node, npm and GIT installed on your computer.

That's it, we can go on.

2. 💡 The idea

Before you start anything, it's good to have an idea of what you want to do, so that you don't waste time and steps doing and undoing the package. No matter how basic it is, think of something that you can use first, both to use and to practice, and that you would like to upload.

And don't think if it's already done or not, most things are probably already done, just look for the spin on it to have an added value for you.

3. 🏁 Start the package

You can now create a folder on your pc, with the name of the package (or the one you like), and open your preferred editor.

In my case I used Visual Studio Code, which already has a built-in terminal, in case you use another one, you should open the Node console and go to the directory you just created.

Now they must run npm init -y

This will create a package.json file to place information about the package, such as name, author, description, the dependencies it uses, the version etc.

    {
      "name": "",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

You can fill in the fields like name, description, keywords, author and license

Now we can install the dependencies that will use our package. Note that this is a basic code, this means that we will install basic dependencies.

Execute in your terminal the following command

npm install -D rollup rollup-plugin-node-resolve rollup-plugin-svelte svelte

This will install the basic dependencies like devDependencies (-D), so they will only be used for development.

The package.json will add the following field:

    "devDependencies": {
        "rollup": "^1.28.0",
        "rollup-plugin-node-resolve": "^5.2.0",
        "rollup-plugin-svelte": "^5.1.1",
        "svelte": "^3.16.7"
    }

4. 📦 The package

Now we are going to create a folder src in the root of the directory, and inside a file index.js

Inside this file we will put the following code:

    import Name from './Name.svelte';

    export default Name;

Where Name should be the name you want to give the component.

And then, we will also create inside the folder src, a file Name.svelte where Name should be the same that they put in the file index.js

Once inside the .svelte file, it's up to you to build the component of the idea you came up with, here it only acts as a normal .svelte page, with the style script blocks and the html.

You can import elements of Svelte without problems.

package.json

We're going to make some changes to this file, adding the following:

    "main": "dist/index.js",
    "module": "dist/index.mjs",
    "svelte": "src/index.js",
    "scripts": {
        "build": "rollup -c",
        "dev": "rollup -c -w"
    },

In main we will set the output after running the build script (no need to create the /dist directory, it will be created automatically)
In module we are going to define the same thing but as output a .mjs, file so that Node can distinguish between modules created with CommonJS and ES6. More info here
In svelte, we will define the path of our index.js file created earlier.
And then we'll define the scripts (if you're familiar with Svelte, you'll know them).

rollup.config.js

We're going to create another file, but this time at the root level (where the src folder is, and the package.json), and we're going to call it rollup.config.js

If you've used Svelte before, you already know this file.

We're going to run this file when we run the build script and pass it some directives on what to do:

    import svelte from 'rollup-plugin-svelte';
    import resolve from 'rollup-plugin-node-resolve';

    const pkg = require('./package.json');

    export default {
        input: 'src/Name.svelte',
        output: [
            { file: pkg.module, 'format': 'en' },
            { file: pkg.main, 'format': 'umd', name: 'Name' }
        ],
        plugins: [
            svelte(),
            resolve()
        ],
    };

In the first 2 lines, we exported 2 of the units that we installed before.
Then in the constant pkg, we bring the package.json
And then we tell him that the input he will enter is the .svelte file (again changing Name by the name of his file), and that the output will be pkg.module, that is the module value we put before in the package.json "module": "dist/index.mjs" and the main "main": "dist/index.js", changing also the 'Name' value by that of his component.
And then we execute the 2 plugins.

5. 🧪 Test locally

There is a way to test our package locally, before uploading it to npm.

Create a new folder on your computer and install Svelte.

From the terminal, in your package's directory, run the command npm link
From the newly created folder where we installed Svelte in step 1, open a new terminal located in that directory and run the command npm link /path/of/your-package.

This will allow us to test the package locally, and also if we make any modifications to it, there is no need to update or install each time, it updates itself.

6. 🚀 Publish in npm

After all this, we are ready to release the package and make it available for installation via npm.

It is recommended to have created in the root directory a file README.md with information about our package. How to install it, how to use it, configurations, etc.

This is a good example for you to use.

Remember that the README.md will be the same for npm as for the GitHub repository.

Publish

Execute in the terminal, in the directory of our package, the command npm adduser, it will ask for the credentials of our account.
Then run npm publish and that's it!

IMPORTANT: Any changes we make to our package, before we can run npm publish again, we must change the version in our package.json.

    "version": "1.0.0"

7. 🚀 Posting on GitHub

To get the package into our GitHub repository, let's do the following:

Create a .gitignore file in the root directory of your package that includes the following:

        # Directories
        node_modules/
        dist/

This prevents the dist folder and the node_modules folder from being published.

In our GitHub account, we create a repository with the name of our package, and we put that DO NOT create a README.md file
We execute the following commands in our terminal:

       git init
        git remote add origin https://github.com/tu-usuario/el-nombre-del-repositorio.git
        git add .
        git commit -m "First Commit"
        git push -u origin master

This will upload our files to the repository (except the ones we put in the .gitignore file)

🧐 Recommendations

It is quite useful, once our repository is created and our package is published, to add the following lines in our package.json file:

        "repository": {
            "type": "git",
            "url": "https://github.com/tu-usuario/el-nombre-del-repositorio"
        },
        "homepage": ""
        "bugs": {
            "url": "https://github.com/tu-usuario/el-nombre-del-repositorio/issues"
        }

This will also add on the npm page of our package, the Homepage and Repository fields linking directly to our package site and the GitHub repository.

📕 Conclusion

Is there much more that can be done before publishing the package? Yes, you can, like run tests, have a LICENSE file, add prebuild and pre-publish scripts in package.json, etc.

Yes, you can, but the idea of the post is that at least they know how to start, then it's up to each one to add more things to the process.

I hope everything is understood, if you can't comment below 😀

Greetings!

Photo by Clark Tibbs on Unsplash

Creando un paquete para Svelte

Agustín ・ Jan 9 '20

#svelte #javascript #npm #node

Creando un paquete para Svelte

Agustín — Thu, 09 Jan 2020 23:48:35 +0000

Intro

La idea del siguiente post es hacer una versión rápida, practica y sencilla de como crear un paquete (package) para podes descargar vía npm en nuestro proyecto hecho con Svelte.

Hace poco finalice mi primer package y la verdad, aunque la información en la web es bastante, y muy completa, la idea es transmitir mi proceso de forma corta y sencilla, además de que no encontré demasiados post explicando como dejar funcionando el paquete para Svelte.

Recomiendo este post de Sergio Xalambrí, que explica varios pasos mas, con muy buen nivel de detalle (que no es la idea de este post, por ahora).

1. 🛠️ Pre requisitos

Antes que nada es requisito lo siguiente:

Tener cuenta en GitHub
Tener cuenta en npm
Tener Node, npm y GIT instalados en su pc.

Listo esto, podemos seguir.

2. 💡 La idea

Antes de empezar nada, es bueno tener una idea de que se quiere hacer, para no perder tiempo ni pasos haciendo y deshaciendo el paquete. No importa que sea algo básico, piensen en algo que les sirva a ustedes primero, tanto para usar como para practicar, y que les gustaría subir.

Y no piensen si ya esta hecho o no, la mayoría de las cosas posiblemente estén hechas ya, solo búsquenle la vuelta para que tenga un valor agregado suyo.

3. 🏁 Iniciar el paquete

Ya pueden crear una carpeta en su pc, con el nombre del paquete (o el que les guste), y abrir su editor preferido.

En mi caso use Visual Studio Code, que ya tiene una terminal integrada, en caso que utilicen otro, deberán abrir la consola de Node y situarse en el directorio que crearon recién.

Ahora deben ejecutar npm init -y

Esto va a crear un archivo package.json para colocar información sobre el paquete, como nombre, autor, descripción, las dependencias que utiliza, la versión etc.

    {
      "name": "",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo "Error: no test specified" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }

Pueden ir completando los campos como name, description, keywords, author y license

Ahora podemos instalar la dependencias que usara nuestro paquete. A tener en cuenta que es un código básico, esto quiere decir que instalaremos dependencias básicas.

Ejecuten en su terminal el siguiente comando

npm install -D rollup rollup-plugin-node-resolve rollup-plugin-svelte svelte

Esto instalara las dependencias básicas como devDependencies (-D), ósea que solo se utilizaran para el desarrollo.

El package.json agregara el siguiente campo:

    "devDependencies": {
        "rollup": "^1.28.0",
        "rollup-plugin-node-resolve": "^5.2.0",
        "rollup-plugin-svelte": "^5.1.1",
        "svelte": "^3.16.7"
    }

4. 📦 El paquete

Ahora vamos a crear un carpeta src en la raíz del directorio, y dentro un archivo index.js

Dentro de este archivo vamos a poner el siguiente código:

    import Name from './Name.svelte';

    export default Name;

Donde Name deberá ser el nombre que quieran darle al componente.

Y luego, crearemos también dentro de la carpeta src, un archivo Name.svelte donde Name debera ser el mismo que pusieron en el archivo index.js

Ya dentro del archivo .svelte, queda en ustedes construir el componente de la idea que se les ocurrió, acá solo actúa como una pagina .svelte normal, con los bloques script style y el html.

Pueden importar elementos de Svelte sin problemas.

package.json

Vamos a hacer unos cambios en este archivo, agregando lo siguiente:

    "main": "dist/index.js",
    "module": "dist/index.mjs",
    "svelte": "src/index.js",
    "scripts": {
        "build": "rollup -c",
        "dev": "rollup -c -w"
    },

En main vamos a establecer el output después de correr el script build (no hace falta crear el directorio /dist, se creara automáticamente)
En module vamos a definir lo mismo pero como salida un archivo .mjs, para que Node distinga entre módulos creados con CommonJS y ES6. Más info aca (en Ingles)
En svelte, vamos a definir la ruta de nuestro archivo index.js creado antes.
Y después vamos a definir los scripts (si están familiarizados con Svelte, ya los conocerán).

rollup.config.js

Vamos a crear otro archivo, pero esta vez a nivel raíz (donde esta la carpeta src, y el package.json), y vamos a llamarlo rollup.config.js

Si usaron Svelte antes, conocen ya este archivo.

A este archivo vamos a ejecutarlo cuando corramos el script build y vamos a pasarle algunas directivas de que hacer:

    import svelte from 'rollup-plugin-svelte';
    import resolve from 'rollup-plugin-node-resolve';

    const pkg = require('./package.json');

    export default {
        input: 'src/Name.svelte',
        output: [
            { file: pkg.module, 'format': 'es' },
            { file: pkg.main, 'format': 'umd', name: 'Name' }
        ],
        plugins: [
            svelte(),
            resolve()
        ],
    };

En las 2 primeras líneas, exportamos 2 de las dependencias que instalamos antes.
Después en la constante pkg, traemos el package.json
Y después le decimos que el input que ingresara es el archivo .svelte (otra vez cambiando Name por el nombre de su archivo), y que el output será pkg.module, ósea el valor module que pusimos antes en el package.json "module": "dist/index.mjs" y el valor main "main": "dist/index.js", cambiando también el valor 'Name' por el de su componente.
Y luego ejecutamos los 2 plugin.

5. 🧪 Testear localmente

Hay una forma para poder testear nuestro paquete de manera local, antes de subirlo a npm.

Creamos una carpeta nueva en nuestra pc e instalamos Svelte.
Desde la terminal, en el directorio de tu paquete, ejecutamos el comando npm link
Desde la carpeta recién creada donde instalamos Svelte en el paso 1, abrimos una nueva terminal situada en ese directorio y ejecutamos el comando npm link /la-ruta/de/tu-paquete

Eso nos va a dejar testear localmente el paquete, y además si hacemos alguna modificación en el, no hace falta hacer un update o install cada vez, se actualiza solo.

6. 🚀 Publicar en npm

Después de todo esto, ya estamos listos para publicar el paquete y dejarlo disponible para instalar vía npm.

Es recomendable haber creado en el directorio raíz un archivo README.md con información acerca de nuestro paquete. Como instalarlo, como utilizarlo, configuraciones, etc.

Este es un buen ejemplo para que puedan usar.

Recuerden que el README.md será el mismo para npm que para el repositorio de GitHub.

Publicar

Ejecutar en la terminal, en el directorio de nuestro paquete, el comando npm adduser, nos va a pedir las credenciales de nuestra cuenta.
Luego ejecutar npm publish y listo!

IMPORTANTE: Cualquier cambio que hagamos en nuestro paquete, antes de poder ejecutar npm publish de nuevo, debemos cambiar la versión en nuestro package.json

    "version": "1.0.0"

7. 🚀 Publicar en GitHub

Para tener el paquete en nuestro repositorio de GitHub, vamos a hacer lo siguiente:

Creamos un archivo .gitignore en el directorio raíz de nuestro paquete que incluya lo siguiente:

        # Directories
        node_modules/
        dist/

Esto evita que se publique la carpeta dist y la carpeta node_modules.

En nuestra cuenta de GitHub, creamos un repositorio con el nombre de nuestro paquete, y ponemos que NO cree un archivo README.md
Ejecutamos los siguientes comandos en nuestra terminal:

       git init
        git remote add origin https://github.com/tu-usuario/el-nombre-del-repositorio.git
        git add .
        git commit -m "First Commit"
        git push -u origin master

Esto va a subir nuestros archivos al repositorio (excepto los que pusimos en el archivo .gitignore)

🧐 Recomendaciones

Es bastante útil, una vez creado nuestro repositorio y publicado nuestro paquete, agregar las siguientes líneas en nuestro archivo package.json:

        "repository": {
            "type": "git",
            "url": "https://github.com/tu-usuario/el-nombre-del-repositorio"
        },
        "homepage": "",
        "bugs": {
            "url": "https://github.com/tu-usuario/el-nombre-del-repositorio/issues"
        }

Esto además añadirá en la pagina npm de nuestro paquete, los campos Homepage y Repository linkeando directamente al sitio de nuestro paquete y al repositorio de GitHub.

📕 Conclución

Se pueden hacer muchas mas cosas antes de publicar el paquete? Si, se pueden, como correr testeos, tener un archivo LICENSE, agregar scripts de prebuild y prepublish en el package.json, etc.

Si, se puede, pero la idea del post es que al menos sepan como arrancar, después queda en cada uno agregarle mas cosas al proceso.

Espero se haya entendido todo, si no pueden comentarlo abajo 😀

Saludos!

Photo by Clark Tibbs on Unsplash

Creating a package for Svelte

Agustín ・ Jan 10 '20 ・ 6 min read

#tutorial #svelte #javascript #npm

My side project in Svelte

Agustín — Fri, 13 Dec 2019 22:59:56 +0000

A community list of personal sites for inspiration

After some weeks I finished my side project.

I was thinking in a new project to start, and get the opportunity of test svelte.
Suddenly I thought about the idea of a site where you could upload pages especially from designers, collaboratives, developers to show.

On the site the pages sent do not pass through a filter, it is automatically uploaded. My idea was to do this and that those sites that were not in line with the page were reported for review.

I used svelte integrated with sapper, but I didn't give much use to the latter.
The most important thing I have to say is that they use svelte, it's really simple and with a lot of potential!

Are you a designer, developer, creative or a simple curious looking for inspiration?

Take a look
🌐 sitesshowcase

Github repo:

agustinl / sitesshowcase

A community list of personal sites for inspiration

A community list of personal sites for inspiration.

View site.

View on GitHub

All suggestions, recommendations and criticisms will be well accepted 🙌
And this is my first post in dev.to too 🎉

RESTApi Host

Agustín — Mon, 14 Oct 2019 22:17:35 +0000

Hello community, I have a question here,

I build a app with the MERN Stack, and I decided separate the front from the back.
I thought of upload the static front in github pages, but, I dont know what is the best host to upload my backend.

A host that allows you to store the files that are sent from my frontend and update the database (which I already have made in mlab).

Any know a good solution for this?
Now I tested my entire app in heroku, but the files I upload are removed 24 hours later.

Thanks and nice week :)