Turn an Entire DIV into a Clickable Link
Here we assign an absolute position to the inner <a>
tag such that it occupies the entire DIV and we also set the z-index property to 10 to position the link above all the other elements in the DIV. This is the easiest approach and the semantic structure is maintained.
div.box { position: relative; width: 200px; height: 200px; background: #eee; color: #000; padding: 20px; } div.box:hover { cursor: hand; cursor: pointer; opacity: .9; } a.divLink { position: absolute; width: 100%; height: 100%; top: 0; left: 0; text-decoration: none; /* Makes sure the link doesn't get underlined */ z-index: 10; /* raises anchor tag above everything else in div */ background-color: white; /*workaround to make clickable in IE */ opacity: 0; /*workaround to make clickable in IE */ filter: alpha(opacity=0); /*workaround to make clickable in IE */ }
Modify relationship select field labels
add_filter( 'pods_field_pick_data_ajax_items', 'custom_pods_labels_in_pick_field_ajax', 1, 6 ); add_filter( 'pods_field_pick_data', 'custom_pods_labels_in_pick_field_data', 1, 6 ); function custom_pods_labels_in_pick_field_ajax($items, $name, $value, $options, $pod, $id) { if ( 'FIELDNAME' == $name ) { foreach ( $items as $key => &$data ) { if ( isset( $data['id'] ) ) { $data['text'] = custom_pods_select_field_label( $data['id'] ); $data['name'] = $data['text']; } } } return $items; } function custom_pods_labels_in_pick_field_data($items, $name, $value, $options, $pod, $id) { // pods_meta_ prefix for Pods backend, pods_field_ prefix for front-facing Pods form if ( 'pods_meta_FIELDNAME' === $name || 'pods_field_FIELDNAME' === $name ) { if ( ! empty( $items ) && is_array( $items ) ) { foreach ( $items as $key => $item ) { if ( isset( $item['id'] ) ) { $data['text'] = custom_pods_select_field_label( $data['id'] ); $data['name'] = $data['text']; } elseif ( is_numeric( $key ) && ! is_array( $item ) ) { $items[ $key ] = custom_pods_select_field_label( $key ); } } } } return $items; } function custom_pods_select_field_label( $id ) { // You can return anything you want here. }
margins-paddings-sass-mixin
A sass mixin to create a bunch of margin and padding classes
How to Build a Dynamic Wardrobe App with React Drag and Drop

In this tutorial, we’ll build a dynamic wardrobe app using React. You’ll learn to structure components, handle drag-and-drop interactions, and craft a smooth user experience.
Spain map with D3

Since we will manage files and dependencies we choose Flask for a quick example. Any other framework could be used, it only consist on importing correctly all libraries.
The libraries used are the following:
Jquery
: Common library used almost for anything. (Desc)
Jquery UI
: Visual extension for Jquery (Desc, in this case used to create the time slider. We also add another extension (Ui slider pips) to this slider to customize even more.
D3
: D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. In this case we use to create a map of Spain. More examples of D3 here.
D3 composite
: Extension of D3 that allow to create proyections of maps. For example, in the case of Spain since the canary islands are far away from the peninsula, only using D3 we have a really off center map. This library also provides Spain provinces limits . Important: This library only works with the current set of Jquery and D3 version, if you want to use other versions, check the docs page.
Simple Redirects with .htaccess
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
inRedirect
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 of301
, ortemp
in the place of302
. If not provided, then302
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
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!
MapTiler. Maps for developers

Easy to use maps, documentation, code samples, and developer tools for web & mobile.
Raster tile providers
This is a list of online raster tile servers based on OpenStreetMap data.
Web Accessibility Initiative: Forms Tutorial
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.
Python strip() – How to Trim a String or Line
When you specify as arguments .
and !
, all instances of both will get removed:
phrase = ".....Python !!!" stripped_phrase = phrase.strip(".!") print(stripped_phrase) #output #Python
Forking is Beautiful
We’re very proud to announce that Vinny Green, a former WordPress community member, has started his fork, FreeWP. We strongly encourage anyone who disagrees with the direction WordPress is headed in to join up with Vinny and create an amazing fork of WordPress. Viva FreeWP!
Joost/Karim Fork
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.
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);