iiinova — where your digital self keeps evolving

You see AI tools everywhere today. Do you know their true cost to our planet? Green IT published a study on the impacts of AI from 2025 to 2030. #GreenIT #AI #Sustainability 1/6

Infographic showing that the global environmental impact of AI will multiply by 7 between 2025 and 2030 according to Green IT. Electricity use will reach 1,169 TWh per year and greenhouse gases will reach 636 million tons of CO2 equivalent, representing 143% of the European Union annual sustainable budget. The footprint is divided into four main crises: global warming (35%), freshwater pollution (23% to 25%), resource depletion (19%), and fine particle emissions (15%). Running servers in data centers causes up to 96% of the total impact.

100

Lionel Péramo @lionel-peramo.com · 09/10/2026

Improving loading speeds on slow connections is a common challenge. The Streams API can help resolve this issue. It provides a powerful way to handle incoming data. #WebDev #Frontend #JavaScript

100

Lionel Péramo @lionel-peramo.com · 09/10/2026

You know how to create database indexes. Do you know how the engine reads them? The order of your columns changes everything for your server. #Database #Backend #WebDev 1/6

Educational infographic titled "SQL indexes order" showing how database column order affects performance. It uses a composite index on (last_name, first_name). Example 2 shows a fast search using the "last_name" prefix (Efficient). Example 3 shows a slow search using only the "first_name" suffix, resulting in a "Full Table Scan" because the index is ignored. The design features a forest background and code blocks with syntax highlighting.

100

Lionel Péramo @lionel-peramo.com · 08/10/2026

A moving spotlight effect can be created with CSS. It looks complex but the implementation is straightforward. Here is how to build this effect. #CSS #WebDev #Frontend

000

Lionel Péramo @lionel-peramo.com · 08/10/2026

PHP Standard Library data structures often go unnoticed. Yet they can improve your code's efficiency. They provide specialized classes that outperform plain arrays in certain tasks. #PHP #WebDev #Backend

020

Lionel Péramo @lionel-peramo.com · 07/10/2026

Manually updating expected output files in your PHP tests is a nightmare. 🛑 Snapshot testing automates this workflow. It captures your code's output, saves it as a reference file, and alerts you with a clear diff when something changes. #PHP #Testing #WebDev (1/3)

Infographic titled "Snapshot testing" comparing two PHP code examples. The "Manual way" uses file_get_contents() and assertEquals() to check results. The "Snapshot way" simplifies this using the Spatie "MatchesSnapshots" trait and a single assertMatchesSnapshot() call. The image demonstrates how snapshot testing removes the need for manual file management in tests.

110

Lionel Péramo @lionel-peramo.com · 06/10/2026

Stop using JS for staggered animations. Modern CSS has native functions that handle the indexing logic for you. With sibling-index() and sibling-count(), elements now know their exact position and the total count of siblings natively. #CSS #WebDev #Animation (1/3)

130

Lionel Péramo @lionel-peramo.com · 06/10/2026

I export the clip-path property 🙂

Screenshot of exported CSS showing the clip-path property using the shape() function to draw a speech bubble.

000

Lionel Péramo @lionel-peramo.com · 06/10/2026

Writing CSS shapes by hand is slow and complex. I made a visual tool to draw curves easily. You can manipulate paths directly on a canvas. #CSS #WebDev #OpenSource 1/4

241

Lionel Péramo @lionel-peramo.com · 05/10/2026

Shadow DOM no longer requires JavaScript. You can now write it directly in HTML (Part 2). It uses a template tag with shadowrootmode=open. The browser creates the shadow root during HTML parsing. No client-side script is needed to display it. #WebComponents #HTML #WebDev 1/3

Code example using Declarative Shadow DOM with a <template> element and the shadowroot attribute to create an isolated subtree, illustrating how to simplify HTML component creation without JavaScript.

243

Lionel Péramo @lionel-peramo.com · 04/10/2026

You can now run WebAssembly directly in PHP. The extension is called veewee/ext-wasm. It brings a native WASM runtime to your PHP scripts. github.com/veewee/ext-w... #PHP #WebAssembly #OpenSource 1/3

Comparison between PHP-FFI and WebAssembly with ext-wasm in PHP. PHP-FFI uses native C libraries for maximum speed. But memory errors cause segmentation faults that crash the PHP worker, and binaries must be compiled for each operating system. In contrast, ext-wasm runs WebAssembly in an isolated sandbox. Errors throw catchable PHP exceptions instead of crashing the server, and a single wasm file runs safely across all platforms.

141

Lionel Péramo @lionel-peramo.com · 03/10/2026

Plume is a clean publishing platform for the independent web. It lets you run a blog without any database. All your posts stay in plain Markdown files on your server. www.plume.pub #SelfHosted #OpenSource #Markdown 1/3

Comparison between Heavy CMS and Plume. Heavy CMS is database-driven. It requires complex database maintenance, uses a lot of memory, needs constant security patches, and locks content inside database tables. Plume is a flat-file platform. It stores all content in plain Markdown files without a database. It starts with one Docker command, includes built-in search and dark mode, and lets you own your files completely.

110

Lionel Péramo @lionel-peramo.com · 02/10/2026

Component styles break easily in large projects. The shadow DOM solves this natively. It encapsulates HTML and CSS inside a component. It creates an isolated DOM tree attached to a host element. Global styles cannot enter or break this tree. #WebComponents #WebDev #CSS 1/3

Code example demonstrating how to create a custom HTML element using Shadow DOM with encapsulated styles and template cloning, presented on a forest-themed background with Lionel Péramo's photo and name at the bottom.

200

Lionel Péramo @lionel-peramo.com · 01/10/2026

Are you still relying on innerHTML to inject dynamic HTML? For years, it has been a notorious source of XSS vulnerabilities. Modern browsers (including Chrome and Firefox) are introducing setHTML. A native, built-in way to sanitize and insert content safely. #WebSecurity #WebDev #JS (1/3)

Comparaison entre innerHTML et setHTML : un bloc de code illustre comment setHTML sécurise une saisie utilisateur dangereuse en supprimant un attribut onerror malveillant, contrairement à innerHTML.

220

Lionel Péramo @lionel-peramo.com · 01/10/2026

Do you prefer keeping your metadata separate from your HTML? JSON-LD allows you to define structured data independently of your markup. It keeps your HTML clean, makes your code easier to maintain, and helps search engines understand your site. #SEO #WebDev #JSON 1/3

Example of JSON-LD script for a blog post with structured metadata, including title, description, image, author, publisher, publication and modification dates, keywords, article section, word count, and aggregate rating.

120

Lionel Péramo @lionel-peramo.com · 30/09/2026

Are you using Microformats to enrich your HTML? 🌐 By using specific CSS classes, you can embed rich metadata directly in your markup. It starts with root classes like h-card (for people) or h-entry (for blog posts) to define the vocabulary. #SEO #WebDev #HTML 1/3

Example of HTML code illustrating the use of microformats for SEO optimization. The code presents an h-card structure, used to define information about a person, in this case, Mitchell Baker from the Mozilla Foundation. Specific classes like 'p-name', 'u-url', and 'p-org' are used to mark the name, URL, and organization, making them easier for search engines to recognize.

130

Lionel Péramo @lionel-peramo.com · 30/09/2026

Are you leveraging Microdata for SEO? 🔍 Adding structured data like itemscope, itemtype, and itemprop provides search engines with a clear map of your content. Unsupporting browsers simply ignore them, making it safe to use. #SEO #WebDev #HTML 1/3

Infographic showing an HTML code snippet. It demonstrates how to add Microdata attributes (like itemscope, itemtype, and itemprop) to an article structure, including schema.org/BlogPosting and Organization types.

110

Lionel Péramo @lionel-peramo.com · 29/09/2026

Can someone steal and use your digital key on another computer? Usually, yes. But you can stop this with a special chip called TPM. Here is how TPM protects your computer. (1/5) #Cybersecurity #InfoSec #Tech

System architecture diagram comparing software encryption keys with TPM hardware keys. On the left side, without TPM, Computer A stores the key as a file. An attacker copies the file to Computer B. Because file restrictions do not travel, Computer B gets access granted. On the right side, with TPM, Computer A locks the key inside a physical chip. An attacker copies the disk to Computer B. Because the physical chip is missing, Computer B gets access denied.

100

Lionel Péramo @lionel-peramo.com · 29/09/2026

Secure your website with expertise! 🔒 Discover 5 highly useful web security tools (beyond Mozilla Observatory) to analyze your configurations and prevent critical vulnerabilities. A thread below 👇 #webdev #cybersecurity 1/4

A dark-themed digital graphic titled "5 WEB SECURITY TOOLS" in glowing neon letters. The image displays five security icons connected by a thin line, labeled: "1. Firewall" (a shield with a flame), "2. Scan" (a browser with a magnifying glass), "3. SSL" (a padlock), "4. Threat Detection" (a browser with a warning sign), and "5. Data Encryption" (a key and padlock). Below the icons, on the left, is a large glowing neon blue shield with a lock on a digital grid. On the right, a futuristic computer monitor displays security graphs and a shield icon on its screen, next to a glowing virtual keyboard.

100

Lionel Péramo @lionel-peramo.com · 28/09/2026

Less than 24% of websites pass security tests correctly. 🔒 To test and strengthen your site, Mozilla Observatory is an essential, free tool. It runs automated checks on HTTP headers, SSL, and provides actionable reports. 👉 observatory.mozilla.org #cybersecurity #webdev 1/2

Interface of a cybersecurity tool displaying a text field prompting to enter the domain name with a blue button labeled 'Scan Me'. Below, three checkboxes are presented: 'Don't include my site in the public results', 'Force a rescan instead of returning cached results', and 'Don't scan with third-party scanners', all on a dark background.

100

Lionel Péramo @lionel-peramo.com · 27/09/2026

PHP templates make great static websites. Kirigami runs them without installing PHP. It is a static site generator. It runs real PHP in WebAssembly through Node.js. #PHP #WebDev #WebAssembly 1/4

A comparison between classic PHP static site setups and Kirigami. Classic setups require installing the PHP runtime, configuring local servers, and managing external asset bundlers. Kirigami runs PHP in WebAssembly through Node.js with zero local installation, built-in Sass and esbuild bundling, live VS Code preview, and an AI MCP server.

121

Lionel Péramo @lionel-peramo.com · 26/09/2026

You know PHP as an interpreted language. Manticore turns it into native machine code. It is an Ahead-Of-Time compiler written in pure PHP. It uses LLVM to generate standalone binaries. #PHP #WebDev #OpenSource 1/4

Architecture diagram of Manticore. Typed PHP code goes through type inference, LLVM intermediate representation, and machine code optimization. The compiler produces a standalone native binary that runs directly on the operating system without the PHP interpreter.

262

Lionel Péramo @lionel-peramo.com · 25/09/2026

Are your cookies truly safe from attackers? Securing web cookies takes only a few simple settings. Here is how to protect your users in three steps. #WebSecurity #CyberSecurity #WebDev 1/3

The PHP code illustrates how to configure a cookie with HttpOnly and Secure flags using the setcookie function. It includes parameters for the cookie's lifetime, path, domain, and attributes for security such as 'secure', 'httponly', and 'samesite'. The script ends with a segment of code that checks if cookies are enabled, displaying 'Cookies are enabled' or 'Cookies are not enabled'.

110

Lionel Péramo @lionel-peramo.com · 25/09/2026

A standard text field only identifies the input. The native <search> element groups the entire experience. Many developers confuse <input type="search"> with the new <search> tag. Here is why they are not duplicates. (1/4)

HTML structure demonstrating the correct usage of the native <search> landmark. It groups the entire search experience by wrapping a query form (with a search input) and a sibling results container containing its own action form (with an Add to Cart button), avoiding invalid nested forms.

100

Lionel Péramo @lionel-peramo.com · 24/09/2026

You probably know the classic :target selector. Have you heard of scroll-target-group? It is a new CSS property. It creates a native scroll-spy effect without JavaScript. Here is how it works. #CSS #WebDev #Frontend 1/4

100

Lionel Péramo @lionel-peramo.com · 24/09/2026

Do you still use JavaScript to track scroll position? Modern CSS can track scroll state for you. You can detect if users read your terms without scroll listeners. Here is how it works. #CSS #WebDev #JavaScript 1/4

100

Lionel Péramo @lionel-peramo.com · 23/09/2026

You can create a 3D portal effect using only CSS. No JavaScript is required. Modern scroll-driven animations turn simple scrolling into a visual journey. Here is how it works. #CSS #WebDev #WebDesign 1/4

110

Lionel Péramo @lionel-peramo.com · 22/09/2026

You probably built your checkout button with AJAX. Have you tested what happens when JavaScript fails? Network drops or extensions can block your scripts. When that happens, users click and nothing works. #CSS #WebDev #WebPerformance 1/3

Code example showing CSS media query scripting none. The style hides an AJAX checkout button and reveals a native HTML form when JavaScript is disabled.

210

Lionel Péramo @lionel-peramo.com · 22/09/2026

You use Promises for every async task. Tomorrow, you might use scheduler.postTask instead. They handle tasks in very different ways. Here is how they change web performance. #JavaScript #WebPerf #WebDev 1/5

110

Lionel Péramo @lionel-peramo.com · 21/09/2026

PHP hosting usually relies on Nginx and php-fpm setups. Qbix Server changes this model completely. It is an all-in-one web server written in pure userland PHP. It runs standalone applications without external web servers. #PHP #WebDev #Server 1/2

Qbix Server is a web server for PHP with three main capabilities. First, it runs standalone without Nginx or php-fpm, using worker preloading to reduce memory footprint down to 5MB per worker. Second, it natively supports HTTP/1.1, upgrades to HTTP/2 with optional amphp packages, and needs a reverse proxy for HTTP/3. Third, it includes built-in WebSockets, a live traffic metrics dashboard, and smart component-level cache invalidation.

110

Lionel Péramo @lionel-peramo.com · 21/09/2026

Can you build a game with zero JavaScript? Yes, you can. Here is how this reflex game works. #CSS #WebDev #GameDev 1/4

1113

Lionel Péramo @lionel-peramo.com · 20/09/2026

You know how to inject HTML with setHTML. Are you ready for streamHTML? This new browser API pipes incoming network streams straight into the DOM. #WebDev #JavaScript #Performance 1/4

Code example comparing the traditional way of injecting HTML with the modern streamHTML API. The traditional approach fetches an entire response into memory and sets innerHTML, which can freeze the user interface. The modern approach uses streamHTML to pipe incoming text chunks directly into the DOM as network packets arrive, eliminating memory bloat and displaying content progressively.

100

Lionel Péramo @lionel-peramo.com · 19/09/2026

Firefox is moving fast this week. Mozilla released Firefox 156 with big speed updates. They also announced a new partnership with Mistral AI. #Firefox #MistralAI #OpenSource 1/4

Infographic titled Firefox: Fast and Private AI. It presents two main updates. First, Firefox 156 opens PDF files up to 45 percent faster, uses less CPU and memory for JPG images, and improves video calls. Second, Mistral AI powers Firefox Smart Window to summarize pages and organize tabs, with zero data retention. The key takeaway states that Firefox combines high performance with strong privacy, delivering modern AI without tracking user data.

131

Lionel Péramo @lionel-peramo.com · 18/09/2026

AI now runs directly inside your web browser. The Chrome Prompt API lets you run AI on user devices. It focuses on speed, privacy, and local processing. #WebDev #Chrome #AI 1/6

JavaScript code showing the use of the Prompt API (window.ai.languageModel.generate) to generate an AI response locally in the browser from the prompt 'Summarize the impact of local AI on web performance'.

100

Lionel Péramo @lionel-peramo.com · 17/09/2026

Managing PHP extensions across environments is often difficult. You can now manage them just like regular packages. PIE makes this possible. PIE stands for PHP Installer for Extensions. #PHP #WebDev #DevOps 1/6

A flowchart titled "PIE workflow". It shows a developer creating a pie.json file and running the "php pie.phar install" command. This triggers PIE to read the file, download, compile, and install the extension, resulting in a reproducible setup. The image is presented as a social media post.

110

Lionel Péramo @lionel-peramo.com · 17/09/2026

PHP is not only for websites. You can now build video games with it. Meet Phrost, a modern 2D game engine. #PHP #GameDev #IndieDev 1/5

A screenshot showing game development with Phrost. The background displays a code editor with visible PHP script (commands like '$sprite->play'). The foreground shows an active game window titled 'Warrior Animation Demo', featuring a 2D pixel-art platformer game inside a dark dungeon.

1103

Lionel Péramo @lionel-peramo.com · 16/09/2026

Can you speed up your app at server startup? PHP preloading loads files into memory in advance. This helps your server answer requests much faster. #PHP #WebPerf #DevOps 1/5

PHP code demonstrating how to preload classes and functions in PHP 7.4. The code shows three calls to the `opcache_compile_file` function, with explanatory comments. Two of the calls preload PHP class files, and the last one preloads a file of functions.

110

Lionel Péramo @lionel-peramo.com · 16/09/2026

Your PHP code might miss an easy speed gain. A very small change can make your functions run faster. Here is how the PHP compiler handles native functions. #PHP #WebDev #Performance 1/5

$Image titled "PHP native functions boost" showing a code comparison in a "Before/After" format. The "Before" section shows a for-loop calling `strlen('some string')`. The "After" section shows the optimized version calling `\strlen('some string')` inside the loop. Comments in the code explain that the backslash makes a direct, faster call to the native function.$

100

Lionel Péramo @lionel-peramo.com · 15/09/2026

How did a small personal project become the backbone of the web? This is the history of PHP. #PHP #WebDev #TechHistory 1/6

An elephant symbolizing PHP 8.5, with glowing digital patterns on its body, set in a nighttime urban landscape surrounded by illuminated skyscrapers, palm trees, and candles floating on a river.

100

Lionel Péramo @lionel-peramo.com · 15/09/2026

Can PHP render 2D and 3D graphics? PHP-GLFW makes it possible. It opens PHP to game development and visual tools. #PHP #GameDev #Programming 1/5

Screenshot of the game FlappyPHPant, developed with PHP-GLFW, showing a pixelated blue elephant flying between green pipes in a forest landscape. Displayed text: "High Score: 2" and "Press Space to Start".

1105

Lionel Péramo @lionel-peramo.com · 14/09/2026

You can make PHP much faster. You can call C libraries directly with PHP-FFI. FFI means Foreign Function Interface. You do not need to create custom PHP extensions anymore. #PHP #WebDev #Programming 1/5

PHP-FFI example demonstrating matrix multiplication using the BLAS library with the dgemm function. Matrices A, B, and C are initialized as 4x4 arrays, and the optimized calculation is performed by calling dgemm.

110

Lionel Péramo @lionel-peramo.com · 14/09/2026

Is your website slow? The PerformanceObserver API helps you find out why. Here is how it works. #WebDev #WebPerf #JavaScript 1/5

Example of JavaScript code using the PerformanceObserver API to observe resources taking more than 500ms to load.

110

Lionel Péramo @lionel-peramo.com · 13/09/2026

The battle over CSS Masonry has reached an agreement. The CSS Working Group selected display grid-lanes for CSS Grid Level 3. Here is what this means for modern layouts. #CSS #WebDev #CSSGrid 1/4

Infographic titled CSS Grid Lanes: Native Masonry by Lionel Péramo. A code box shows a CSS rule using display: grid-lanes, gap: 1.5rem, and grid-template-columns: repeat(3, 1fr). Below the code, a preview section titled Rendered Result (Zero JavaScript) displays six cards of different heights packed into three vertical columns. The cards stack tightly without vertical empty spaces.

151

Lionel Péramo @lionel-peramo.com · 12/09/2026

A glowing pointer can follow your menu items with zero JavaScript. Modern CSS Anchor Positioning now handles the entire effect natively. Here is how the latest specifications make this possible. #CSS #WebDev #AnchorPositioning 1/4

120

Lionel Péramo @lionel-peramo.com · 11/09/2026

Did you think CSS anchors only work for small menus? No, they can actually clone and fly full images across your screen. This page uses zero JavaScript to create a smooth projection gallery. #css #webdev #frontend

100

Lionel Péramo @lionel-peramo.com · 10/09/2026

Stop using CustomEvent in JavaScript. There is a much better way to handle custom events. #JavaScript #TypeScript #WebDev 1/5

A code comparison between two JavaScript methods. On the left, the 'Old way' uses CustomEvent with a nested detail property. On the right, the 'Better way' shows a class extending Event, allowing direct access to properties without the detail wrapper.

110

Lionel Péramo @lionel-peramo.com · 10/09/2026

SQL struggles to handle deep trees or comment sections. The nested set model solves this problem. It stores hierarchical data in a simple flat table. #SQL #Database #WebDev 1/5

Diagram titled "SQL Nested sets." It shows a debugging conversation (nodes 1 to 6) structured as a tree. Each node's boundaries are defined by nsleft and nsright numbers (for example, the root node is bounded by 1 and 12), illustrating how the Nested Set model represents the hierarchy.

100

Lionel Péramo @lionel-peramo.com · 09/09/2026

Web navigation is finally fixed. You can now stop fighting the old History API. #WebDev #JavaScript #NavigationAPI 1/7

Code comparison image titled "Navigation API". The "Before" section shows complex manual handling using window.onclick and onpopstate. The "After" section shows the new simplified method using navigation.onnavigate and event.intercept. Created by Lionel Péramo.

120

Lionel Péramo @lionel-peramo.com · 09/09/2026

The DOM changes often in modern web applications. The MutationObserver API lets you watch these changes in real time. It replaces older and slower techniques. It performs well without slowing down the browser. #JavaScript #WebDev #FrontEnd 1/6

JavaScript code snippet selecting an element with id “app”, creating a MutationObserver to watch attribute and child list mutations, and logging each mutation type

100