Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Linkoteca. desarrollo web

pods_api_post_save_pod_item or save_post not working on frontend

Imago voragine.net
• , , 
//////
// This is a logging function for any debugging task 
// NOTES:  Youy must have the following lines in the wp-config.php file in the root folder, which
//      puts a debug.log text file under the wp-content folder under root
//
//
// define( 'WP_DEBUG', true );
// define( 'WP_DEBUG_DISPLAY', false );
// define( 'WP_DEBUG_LOG', true );
//
// NOTES: install Error Log Viewer Plugin by bestwebsoft to view log from admin menu

// for error logging
if (!function_exists('write_log')) {
    function write_log ( $log ) {
        if ( true === WP_DEBUG ) {
            if ( is_array( $log ) || is_object( $log )) {
                error_log( print_r( $log, true ));
            
            } else {
                error_log( $log );
            }
        }
    }
}

//
//////

Timestamp To Date Converter

Imago voragine.net
• , , ,

Timestamp Online is timestamp converver between unix timestamp and human readable form date. If you want to convert timestamp, it is sufficient to either enter your timestamp into input area, or you can construct URL with your timestamp – http://timestamp.online/timestamp/{your-timestamp}.

Timestamp Online also supports countdown, so you can see, how much time remains to particular timestamp. URLs for countdowns have following form – http://timestamp.online/countdown/{your-timestamp}.

Python | Introduction to Web development using Flask

Imago voragine.net
• , ,

Flask is an API of Python that allows us to build up web-applications. It was developed by Armin Ronacher. Flask’s framework is more explicit than Django’s framework and is also easier to learn because it has less base code to implement a simple web-Application. A Web-Application Framework or Web Framework is the collection of modules and libraries that helps the developer to write applications without writing the low-level codes such as protocols, thread management, etc. Flask is based on WSGI(Web Server Gateway Interface) toolkit and Jinja2 template engine.

Navigating the New Era of AI-Assisted Code Generation in WordPress

Imago voragine.net
• , , ,

WordPress plugin developers are adopting AI-powered tech and building it into their products, such as RankMath’s AI-generated suggestions for creating SEO-friendly content, WordPress.com’s experimental blocks for AI-generated images and content, and a Setary’s plugin that uses AI to write and bulk edit WooCommerce product descriptions. The wpfrontpage site is tracking these plugins but WordPress.org also lists dozens of plugins with AI, many of them created to write content or generate images.

Flask – (Creating first simple application)

Imago voragine.net
• , ,

To understand what Flask is you have to understand a few general terms.

WSGI Web Server Gateway Interface (WSGI) has been adopted as a standard for Python web application development. WSGI is a specification for a universal interface between the web server and the web applications.
Werkzeug It is a WSGI toolkit, which implements requests, response objects, and other utility functions. This enables building a web framework on top of it. The Flask framework uses Werkzeug as one of its bases.
jinja2 jinja2 is a popular templating engine for Python. A web templating system combines a template with a certain data source to render dynamic web pages.

Flask is a web application framework written in Python. Flask is based on the Werkzeug WSGI toolkit and Jinja2 template engine. Both are Pocco projects.

Converting my OTF font into multiple web fonts with this bash script

Imago voragine.net
• , , ,

I came across this use-case where we had to use a specific custom font but it was only available in .otf. However, we want to support multiple formats to ensure even deprecated browsers can load the font. Otf has a global coverage of 97.89% but we didn’t want to take any chances of the font not loading as it’s a crucial feature in our app.

I wanted to convert the font to support the following browsers:

  • woff2 – Latest browsers
  • woff – Modern browsers
  • ttf – Apple and mobile OS
  • svg – older safari and ios support
  • eot – older IE support

GraphQL. A query language for your API

Imago voragine.net
• , , ,

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Headless content management system

Imago voragine.net
• , , ,

A headless Content Management System, or headless CMS, is a back end-only web content management system that acts primarily as a content repository. A headless CMS makes content accessible via an API for display on any device, without a built-in front end or presentation layer. The term ‘headless’ comes from the concept of chopping the ‘head’ (the front end) off the ‘body’ (the back end).

The Importance of WP Localize Script

Imago voragine.net
• , ,

The importance of wp_localize_script is when you can pass data directly from PHP to JavaScript.

Functions is very easy to handle there are only 3 parameters required :

$handle
(string) (Required) Script handle the data will be attached to.

$object_name
(string) (Required) Name for the JavaScript object. Passed directly, so it should be qualified JS variable. Example: ‘/[a-zA-Z0-9_]+/’.

$l10n
(array) (Required) The data itself. The data can be either a single or multi-dimensional array.

Custom Post Type Templates from Plugin Folder?

Imago voragine.net
• ,

You can use single_template filter hook.

/* Filter the single_template with our custom function*/
add_filter('single_template', 'my_custom_template');

function my_custom_template($single) {

    global $post;

    /* Checks for single template by post type */
    if ( $post->post_type == 'POST TYPE NAME' ) {
        if ( file_exists( PLUGIN_PATH . '/Custom_File.php' ) ) {
            return PLUGIN_PATH . '/Custom_File.php';
        }
    }

    return $single;

}

How to add a custom field to quick edit

Imago voragine.net
• ,

There are a few steps to create the custom quick edit box and custom column

  1. create a custom meta key (assumed that you have 1 already)
  2. add custom admin column title and data (assumed that you want to shows the custom meta key in the column, if not, you may also modify a bit of the logic to accomplish the same effect because the principal is the same)
  3. add custom quick edit box
  4. add save logic
  5. load script to modify original inline-edit-post function in order to support custom meta value
  6. prepare the script file

Introduction to D3.js

Imago voragine.net
• , , ,

This tutorial is meant for D3 v5-v7.

This tutorial is a quick intro to D3.js, a Javascript library for creating interactive data visualizations in the browser. D3 is built on top of common web standards like HTML, CSS, and SVG.

This is not designed to be a deep dive — this tutorial will teach you how to learn D3 and give you a high-level understanding of this powerful tool.

D3 Force layout

Imago voragine.net
• , , , ,

Broadly speaking there are 4 steps to setting up a force simulation:

  • create an array of objects
  • call forceSimulation, passing in the array of objects
  • add one or more force functions (e.g. forceManyBody, forceCenter, forceCollide) to the system
  • set up a callback function to update the element positions after each tick

Modernizing JavaScript Code in WordPress

Imago voragine.net
• , , , , ,

I’ve just had a nice experience improving and modernizing a large JavaScript codebase in a WordPress plugin. The original code was written in an old-fashioned way with jQuery in a single large file. Using modern EcmaScript and tools like Webpack, I was able to split it into modules and improve the code structure. The new code is much more readable and maintainable, and of course, fewer bugs. In this tutorial, I’ll show you how I did that.

ES6 Tutorial

Imago voragine.net
• , ,

ECMAScript 2015 or ES2015 is a significant update to the JavaScript programming language. It is the first major update to the language since ES5 which was standardized in 2009. Therefore, ES2015 is often called ES6.

cola.js. Constraint-Based Layout in the Browser

Imago voragine.net
• , , , , ,

cola.js (A.K.A. «WebCoLa») is an open-source JavaScript library for arranging your HTML5 documents and diagrams using constraint-based optimization techniques.

It works well with libraries like D3.js, svg.js, and Cytoscape.js. The core layout is based on a complete rewrite in Javascript of the C++ libcola library.

It also has an adaptor for d3.js that allows you to use cola as a drop-in replacement for the D3 force layout. The layout converges to a local optimum unlike the D3 force layout, which forces convergence through a simple annealing strategy. Thus, compared to D3 force layout:

How to check a user watched the full video in html5 video player

Imago voragine.net
• ,

Basic check is simple, wait for the ended event. This is so simple you can just google it.

Now to check that user played full video an extensive analysis would be needed checking if he played every second of it. That’s not necessary however, it should be enough that user:

  • played as many seconds as the video is long
  • played to the end of the video

This snippet demonstrates exactly that. The video will not be marked as fully played if you just skip to the end. Playing the beginning over and over will also not mark it fully played

WordPress.org Strongly Urges Theme Authors to Switch to Locally Hosted Webfonts

Imago voragine.net
• , , , ,

In light of a recent German court case, which fined a website owner for violating the GDPR by using Google-hosted webfonts, WordPress.org’s themes team is updating its recommendations for hosting webfonts. Most theme authors have been enqueuing Google Fonts from the Google CDN for better performance, but this method exposes visitors’ IP addresses.

“The themes team strongly encourages the theme authors to update their themes,” Themes Team representative @benachi said in a recent announcement. “We recommend updating by switching to locally hosted webfonts. Luckily Google Fonts can be downloaded and bundled in a theme. Bundled font files allow users to host webfonts locally and comply with GDPR.”

How to enable HTTP/2 support in Apache

Imago voragine.net
• , ,

Enable HTTP/2 module
Apache’s HTTP/2 support comes from the mod_http2 module. Enable it from:

a2enmod http2
apachectl restart

If above commands do not work in your system (which is likely the case in CentOS/RHEL), use LoadModule directive in httpd configuration directory to enable http2 module.
Add HTTP/2 Support
We highly recommend you enable HTTPS support for your web site first. Most web browser simply do not support HTTP/2 over plain text. Besides, there are no excuses to not use HTTPS anymore. HTTP/2 can be enabled site-by-site basis. Locate your web site’s Apache virtual host configuration file, and add the following right after the opening tag:

Protocols h2 http/1.1

Is No-Code the Future of Creating Websites?

Imago voragine.net
• , ,

Pros of No-Code Platforms

  • An immediate solution to problems you have in terms of website development because you will be able to create software solutions without having to hire expert programmers.
  • Regardless of your degree, career, or position in a business, you can now build a website by yourself that will add value to your craft or business.
  • Building a website is faster and cheaper. Hiring developers will cost you a lot of money and with no-code, you will be able to cut the cost.
  • It will save you months and months of working since you can now build a website straight away without the need to code.
  • You will have creative freedom on what you want to add to your website since the process is more visual.
  • Obviously, with no-code, web developers will have less on their plates and can focus more on streamlining processes or creating new innovations.

Cons of No-Code Platforms

  • Security breaches with no-code are unavoidable, and once the platform you are using is affected by this factor, your website will be compromised as well.
  • You don’t have the full authority with using no-code networks, so basically you are taking a risk in using such platforms.
  • You will not be able to customize software using the no-code platform.
  • You have to adapt your business process based on the capability feature of the no-code network or platform you are using.

«Corporate Memphis»: ¿Por qué todas las webs parecen iguales?

Imago voragine.net
• , , , ,
Captura de pantall de «Corporate Memphis»: ¿Por qué todas las webs parecen iguales?

…decenas de revistas, cuentos, webs y aplicaciones comerciales con una estética similar a la de la ilustración que decora este artículo. A ese estilo se le conoce como «Alegria» o «Corporate Memphis». Es un producto de la precarización y la devaluación del trabajo y tiene decenas de variantes y versiones, todas igualmente exánimes y repetitivas.

El resultado es un cambio cualitativo. Cualquiera puede hacer una ilustración dentro de los códigos visuales del «Corporate Memphis». Ya no es solo que el ilustrador -uno de los últimos artesanos- se haya proletarizado, ni siquiera que una vez proletarizado haya sido expulsado de la oficina y se haya precarizado al extremo vendiendo horas de trabajo en una plataforma. Ahora el ilustrador como tal es ya innecesario.

La automatización combinatoria de un código estándar de imágenes pre-diseñadas permitirá que ilustrar se convierta en una tarea más del desarrollador web. Una entre otras muchas que ya se han automatizado o están en camino de hacerlo. Porque el desarrollador es el primero que ha sufrido la estandarización y procedimentación automatizada de su trabajo. Ahora, Inteligencia Artificial mediante, está siendo alienado incluso de la algoritmia.

PHP setcookie “SameSite=Strict”?

Imago voragine.net
• , , ,

You can use the $options array to set the samesite value, for example:

setcookie($name, $value, [
‘expires’ => time() + 86400,
‘path’ => ‘/’,
‘domain’ => ‘domain.com’,
‘secure’ => true,
‘httponly’ => true,
‘samesite’ => ‘None’,
]);

The value of the samesite element should be either None, Lax or Strict.

Setting Cookies in WordPress

Imago voragine.net
• , , ,

So how do you set cookies in WordPress? With core constants:

COOKIEPATH — Server path in which the cookie will be available on.
COOKIE_DOMAIN — The (sub)domain that the cookie is available to.

Setting cookies in WordPress, especially the expiration is a cinch using one of the core time constants, available since v3.5:

MINUTE_IN_SECONDS = 60 seconds
HOUR_IN_SECONDS = 3,600 seconds
DAY_IN_SECONDS = 86,400 seconds
WEEK_IN_SECONDS = 604,800 seconds
MONTH_IN_SECONDS = 2,629,746 seconds
YEAR_IN_SECONDS = 31,556,952 seconds

Don’t forget to add the current timestamp to one of these constants, for example:

// 5 minutes into the future
$five_minutes = current_time( ‘timestamp’ ) + ( MINUTE_IN_SECONDS * 5 );