Eliminate flash of unstyled content
A CSS-only solution…
Node Version Manager (nvm)
Node Version Manager – POSIX-compliant bash script to manage multiple active node.js versions
OpenAPI Specification
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.
OpenAPI.Tools
Stay up to date with a community-driven list of high-quality, modern tools for OpenAPI. An open source project from APIs You Won’t Hate.
Newsletter semanal sobre cómo crear y vender software
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?
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.
Everything You Need to Know About WPGraphQL
This article will explore GraphQL and WPGraphQL, delving into their core principles, architecture, and how they contrast with the WordPress REST API.
What is the difference between .js, .tsx and .jsx in React?
.js is JavaScript, plain and simple
.ts is TypeScript, Microsoft’s way of adding «concrete» types to JavaScript
.jsx is JavaScript but with JSX enabled which is React’s language extension to allow you to write markup directly in code
.tsx is similar to jsx except it’s TypeScript with the JSX language extension
How TO – Lightbox
Learn how to create a modal image gallery (lightbox) with CSS and JavaScript.
List all image sizes including custom (WordPress)
Since WP 5.3 it is enough to use this function:
wp_get_registered_image_subsizes();
SQLite no es una base de datos de juguete
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
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 ?
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.
Browser detection using the user agent
When considering using the user agent string to detect which browser is being used, your first step is to try to avoid it if possible. Start by trying to identify why you want to do it.
interact.js: JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers
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.
Resizable & Draggable Dialog In Pure JavaScript
A vanilla JavaScript library to create a draggable & resizable dialog popup without any frameworks or libraries (e.g. jQuery UI).
To move, drag from the title bar of the dialog box.
To resize, drag from any edge or any corner of the dialog box.
Comparing Various Ways to Hide Things in CSS
Developers most commonly use display: none to hide the content on the page. Unfortunately, this way of hiding content isn’t bulletproof because now that content is now “inaccessible” to screen readers. It’s tempting to use it, but especially in cases where something is only meant to be visually hidden, don’t reach for it.
Traducción con Pods de WordPress y WPML
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')
3D TagCloud.js rotating with mouse
const TagCloud = require('TagCloud');
const container = '.tagcloud';
const texts = [
'3D', 'TagCloud', 'JavaScript',
'CSS3', 'Animation', 'Interactive',
'Mouse', 'Rolling', 'Sphere',
'6KB', 'v2.x',
];
const options = {};
TagCloud(container, texts, options);
Response: json() method
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
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
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.
Avoid invisible text during font loading
font-display is an API for specifying font display strategy. swap tells the browser that text using this font should be displayed immediately using a system font. Once the custom font is ready, the system font is swapped out.
Reduce web font size
Web font optimization is a critical piece of the overall performance strategy. Each font is an additional resource, and some fonts may block rendering of the text, but just because the page is using WebFonts doesn’t mean that it has to render slower. On the contrary, optimized fonts, combined with a judicious strategy for how they are loaded and applied on the page, can help reduce the total page size and improve page rendering times.
The Shapes of CSS
CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.
Evaluating Web Accessibility Overview
When developing or redesigning a website or web application, evaluate accessibility early and throughout the development process to identify accessibility problems early, when it is easier to address them.
There are evaluation tools that help with evaluation. However, no tool alone can determine if a site meets accessibility standards. Knowledgeable human evaluation is required to determine if a site is accessible.
WordPress: how to add a default title to your posts
This came up on the Fediverse: @kev@log.kevquirk.com wanted to automatically add titles to the posts on his microblog.
This automation would have to be compatible with all the editors, including the mobile app.
I think may be a fairly common request when one uses their WordPress site as microblogging platform. When you share quick updates with your friends, be it a picture, a video, a sentence or two, you don’t really want to have to think of a title for that update. The editor should enable you to share, not get in the way.
aria-label use
The aria-label should be used to provide a text alternative to an element that has no visible text on the screen.
aria-label is an attribute defined in the WAI-ARIA(opens in a new tab) specification. This specification extends native HTML, allowing you to change the way an HTML element is «translated» into the accessibility tree.
A Complete Guide to Flexbox
This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items).
Variable fonts guide
Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style.
The heart of the new variable fonts format is the concept of an axis of variation describing the allowable range of that particular aspect of the typeface design. So the ‘weight axis’ describes how light or how bold the letterforms can be; the ‘width axis’ describes how narrow or how wide they can be; the ‘italic axis’ describes if italic letterforms are present and can be turned on or off accordingly, etc. Note that an axis can be a range or a binary choice. Weight might range from 1–999, whereas italic might be 0 or 1 (off or on).