Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Linkoteca. desarrollo web

Simple Redirects with .htaccess

Imago voragine.net
• ,

Redirect Syntax

This is the basic syntax for redirects written using the mod_alias redirect directive in Apache:

Redirect [status] URL-path URL
  • Make sure you capitalize the R in Redirect or it won’t work. Everything is case sensitive.
  • The status is optional and is usually a number indicating the HTTP status code you want to deliver to the browser. You can use the word permanent in the place of 301, or temp in the place of 302. If not provided, then 302 will be used as the default.
  • The URL-path is required and is always a path relative to the site root, not the location of the .htaccess file.
  • The URL is required and is either a path relative to the site root, assuming the redirect is within the same site, or an absolute URL if the redirect points to another site.

Milligram. A minimalist CSS framework

Imago voragine.net
• , ,

Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It’s not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!

D3 and Next

Imago voragine.net
• , , , ,

D3 and Next are the perfect combination for seamlessly creating reusable, extensible and component-driven interactive dashboards that can be used in literally any industry you can imagine.
With Next JS we can weild the high speed and performance powers to make the UI/UX even more pleasing due to prefetching of all the data that the dashboard is populated with.

How to Create Accessible Infographics And Data Visualizations

Imago voragine.net
• , , ,

Accessibility in infographics and data visualizations ensures that all users, including those with disabilities, can access and understand the information presented. This is not just a matter of compliance with accessibility standards like the Web Content Accessibility Guidelines (WCAG), but also an intrinsic element of inclusive design.

With that said, to truly make data-driven content accessible to all users, including those with visual impairments, following accessibility guidelines and design techniques is essential. In this short guide, we’ll examine proven techniques for creating accessible infographics and data visualizations that are inclusive and understandable to a wide audience.

Web Accessibility Initiative: Forms Tutorial

Imago voragine.net
• , , , , ,

Forms are commonly used to provide user interaction on websites and in web applications. For example, login, registering, commenting, and purchasing. This tutorial shows you how to create accessible forms. The same concepts apply to all forms, whether they are processed client or server-side.

Aside from technical considerations, users usually prefer simple and short forms. Only ask users to enter what is required to complete the transaction or process; if irrelevant or excessive data is requested, users are more likely to abandon the form.

Forms can be visually and cognitively complex and challenging to use. Accessible forms are easier to use for everyone, including people with disabilities.

  • People with cognitive disabilities can better understand the form and how to complete it, as making forms accessible improves the layout structure, instructions, and feedback.
  • People using speech input can use the labels via voice commands to activate controls and move the focus to the fields that they have to complete.
  • People with limited dexterity benefit from large clickable areas that include the labels, especially for smaller controls, such as radio buttons and checkboxes.
  • People using screen readers can identify and understand form controls more easily because they are associated with labels, field sets, and other structural elements.

Joost/Karim Fork

Imago voragine.net
• , , , , ,

In open source, one thing that makes it even harder to ship great software is bringing together disparate groups of contributors who may have entirely different incentives or missions or philosophies about how to make great work. Working together on a team is such a delicate balance, and even one person rowing in the wrong direction can throw everyone else off.

That’s why periodically I think it is very healthy for open source projects to fork, it allows for people to try out and experiment with different forms of governance, leadership, decision-making, and technical approaches.

The beauty of open source is they can take all of the GPL code in WordPress and ship their vision. You don’t need permission, you can just do things. If they create something that’s awesome, we may even merge it back into WordPress, that ability for code and ideas to freely flow between projects is part of what makes open source such an engine for innovation. I propose that in a year we do a WordPress + JKPress summit, look at what we’ve shipped and learned in the process, which I’d be happy to host and sponsor in NYC next January 2026. The broader community will benefit greatly from this effort, as it’s giving us a true chance to try something different and see how it goes.

OpenAPI Specification

Imago voragine.net
• , ,

The OpenAPI Specification (OAS) defines a standard, language-agnostic interface to HTTP APIs which allows both humans and computers to discover and understand the capabilities of the service without access to source code, documentation, or through network traffic inspection. When properly defined, a consumer can understand and interact with the remote service with a minimal amount of implementation logic.

An OpenAPI definition can then be used by documentation generation tools to display the API, code generation tools to generate servers and clients in various programming languages, testing tools, and many other use cases.

Newsletter semanal sobre cómo crear y vender software

Imago voragine.net
• , , ,

Reflexiones sobre el mundo del software: desde cómo gestionamos nuestro equipo técnico a cómo el movimiento bootstrapper en IndieHackers está influyendo en la industria.

Casos de estudio sobre empresas de software: ¿quieres saber por qué Salesforce organizaba falsas manifestaciones para atacar a sus competidores?

Opiniones (las mías) sobre la industria tecnológica: por qué los bonus por objetivos pervierten muchas empresas o por qué el número de empleados no siempre es un indicador de salud del negocio.

Estrategias para SaaS de las que (solo) quizás puedas aprender: desde cómo aplicar el marketing de contenidos a qué sesgos cognitivos te pueden ayudar a mejorar tus landing pages.

React & TypeScript: What is React.FC and Why should i use it?

Imago voragine.net
• , , ,

React.FC is a type that stands for «Function Component» in React. It is a generic type that allows you to specify the props that a function component will accept.

Using React.FC can be helpful for a number of reasons:

It provides type safety for the props that a component expects to receive. This can help catch bugs early on and make your code easier to understand.

It makes it easier to refactor your component’s props. For example, if you want to rename a prop, the TypeScript compiler will catch any places where that prop is used and help you update them.

It makes it easier to see the expected shape of a component’s props just by looking at its type definition.

SQLite no es una base de datos de juguete

Imago voragine.net
• , ,

SQLite es el DBMS más común del mundo, incluido en todos los sistemas operativos populares.
SQLite no tiene servidor.
Para quienes desarrollan, SQLite está integrado directamente en la aplicación.
Para todos los demás, existe una conveniente consola de base de datos (REPL), que se proporciona como un solo archivo (sqlite3.exe en Windows, sqlite3 en Linux / macOS).

WordPress Rest API extensions for going headless WP

Imago voragine.net
• , , ,

I love the WordPress Rest API and switching more and more from theme development to a headless WP approach, with an nice front-end framework. Right now I’m favoring Nuxt.js, which is build on Vue.js (check out wuxt, my very own dockerized nuxt/wp development environment).

For using WPs full strength with the Rest API I’ve collected/build a useful snippet library with WordPress Rest API extensions. I’ll try to maintain the following list as development goes on. All of the following extensions can be embedded in the functions.php file. If you wondering about the wuxt_ prefix, I’ve got the code from my Wuxt project and the prefix is as good as anyone.

How to detect the user browser ( Safari, Chrome, IE, Firefox and Opera ) using JavaScript ?

Imago voragine.net
• , , ,

Detecting the Safari browser: The user-agent of the Safari browser is “Safari”. This value is passed to indexOf() method to detect this value in the user-agent string. One additional check is required in the case of the Safari browser as the user-agent of the Chrome browser also includes the Safari browser’s user-agent. If both the user-agents of Chrome and Safari are in the user-agent, it means that the browser is Chrome, and hence the Safari browser value is discarded.

interact.js: JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers

Imago voragine.net
• , ,

interact.js takes a slightly different approach compared to most drag and drop libraries. To give you as much control as possible, it tries to provide a simple, flexible API that gives you all the pointer event data you’ll need to move elements around.

The library doesn’t even do any moving at all! This is great because you decide exactly what feedback your users get. You can drag elements, draw on a canvas or (if you really need to) scroll the page.

Traducción con Pods de WordPress y WPML

Imago voragine.net
• , , ,

en el caso de que se estén empleando plugins para el desarrollo de una solución WordPress que no sean compatibles con WPML, por ejemplo PODS, una solución interesante, es duplicar el mismo post o tipo de contenido, que ha sido creado con elementos del plugin incompatible y aprovechar cada versión para cada uno de los idiomas que hemos configurado para nuestro sitio, diferenciando cada post con una nomenclatura, por ejemplo con el diminutivo (_en, _es, _fr) del idioma en el slug o (-EN, -ES, -FR) en el nombre del mismo.

Para que luego WordPress distnga cual de esos bloques o contenidos pertenece al idioma concreto, utilizamos la constante ICL_LANGUAGE_CODE, definida por WPML, que se pueden emplear como parte del nuestro tema, para poder invocar el contenido de un post u otro en dependencia del idioma actual con el que se está navegando en nuestro sitio, idioma almacenado en la constante antes mencionada.

De esta manera un ejemplo podría ser:

if (ICL_LANGUAGE_CODE == 'en')

Response: json() method

Imago voragine.net
• , , ,

The json() method of the Response interface takes a Response stream and reads it to completion. It returns a promise which resolves with the result of parsing the body text as JSON.

const myList = document.querySelector("ul");
const myRequest = new Request("products.json");

fetch(myRequest)
  .then((response) => response.json())
  .then((data) => {
    for (const product of data.products) {
      const listItem = document.createElement("li"); 
      listItem.appendChild(document.createElement("strong")).textContent = product.Name; 
      listItem.append(` can be found in ${product.Location}. Cost: `); 
      listItem.appendChild(document.createElement("strong")).textContent = `£${product.Price}`; 
      myList.appendChild(listItem);
    }
  })
  .catch(console.error);

EventTarget: addEventListener() method

Imago voragine.net
• , ,

The Function.prototype.bind() method lets you establish a fixed this context for all subsequent calls — bypassing problems where it’s unclear what this will be, depending on the context from which your function was called. Note, however, that you’ll need to keep a reference to the listener around so you can remove it later.

class Something {
  name = "Something Good";
  constructor(element) {
    // bind causes a fixed `this` context to be assigned to `onclick2`
    this.onclick2 = this.onclick2.bind(this);
    element.addEventListener("click", this.onclick1, false);
    element.addEventListener("click", this.onclick2, false); // Trick
  }
  onclick1(event) {
    console.log(this.name); // undefined, as `this` is the element
  }
  onclick2(event) {
    console.log(this.name); // 'Something Good', as `this` is bound to the Something instance
  }
}

const s = new Something(document.body);

Medusa: Building blocks for digital commerce

Imago voragine.net
• , ,

Thousands of developers use Medusa’s open-source commerce modules and tools to build rich, reliable, and performant commerce applications without reinventing core commerce logic.

We build modularized commerce logic like carts, products, and order management and provide tools to orchestrate them for powerful ecommerce websites, POS applications, commerce-enabled products, and everything in between.

Our modules are incredibly portable and can run in modern JavaScript environments, unlocking new infrastructure for unparalleled scalability and performance, while bringing commerce enablement to new layers of your stack.