iiinova — where your digital self keeps evolving

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.

110

Lionel Péramo @lionel-peramo.com · 17h

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.

120

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.

100

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 · 28/09/2026

Data breaches cost millions of dollars. Email security is essential to protect your business. Here are simple ways to keep your emails safe. #EmailSecurity #CyberSecurity #DataProtection 1/4

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.

111

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.

252

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.

121

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

I forgot the link about the PHP 2D game engine Phrost so here it is: www.youtube.com/watch?v=UOft...

youtube.com

Phrost Update #2 - 2D Game Engine For PHP

YouTube video by Joseph Montanez

111

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.

193

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

Does your team fight over CSS formatting? You can standardize your code easily with one tool. #CSS #WebDev #CleanCode 1/5

110

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

CSS is getting 11 brand-new powers. You can soon style with randomness, math, and zero hacks. #CSS #WebDev #FrontEnd 1/8

100

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

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

Managing large CSS files is often difficult. The SMACSS methodology helps you solve this problem. It divides your styles into five clear categories. #CSS #WebDev #FrontEnd 1/5

CSS code illustrating the SMACSS methodology. The code includes sections commented in English for Base, Layout, Module, State, and Theme. Each section contains specific styles, such as base styles for `body` and headings, layout styles for the header and footer, reusable modules like cards, states for collapsed elements, and themes for a dark mode. The comments clearly explain the role of each section according to the SMACSS principles.

101

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

BEM often forces you to write long class names. RSCSS offers a simpler alternative. It helps you write clean and readable CSS code. #CSS #WebDev #FrontEnd 1/4

Infographic titled "RSCSS methodology" comparing BEM and RSCSS code structures over a forest background. The "old way" (BEM) shows long class names like "search-form__field search-form__field--large". The "reasonable way" (RSCSS) shows much shorter class names like "field -large". A CSS section demonstrates how RSCSS uses child selectors for cleaner code. At the bottom, the author's name is Lionel Péramo.

110

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

Complex CSS is hard to maintain. OOCSS helps you solve this problem. This method separates structure from visual design. It makes your stylesheets lighter and faster. #CSS #WebDev #FrontEnd 1/4

Example of CSS code demonstrating OOCSS (Object-Oriented CSS), separating objects (`.media`, `.btn`) and their elements (`.media__img`) from skins (`.media--rev`, `.btn--primary`, `.btn--secondary`) for a more efficient and organized web development process.

000

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

Large CSS files can break easily. ITCSS helps you organize your stylesheets. It orders CSS from broad rules down to specific rules. This system avoids specificity conflicts. #CSS #WebDev #FrontEnd 1/6

An infographic illustrating the ITCSS methodology. A large, green inverted triangle is superimposed on a photo of a forest path. The triangle is divided into 7 layers, labeled from top to bottom: 1. Settings, 2. Tools, 3. Generic, 4. Elements, 5. Objects, 6. Components, and 7. Utilities.

110

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

You think this layout uses borders. Modern CSS has a better way. CSS gap decorations draw lines only between grid items. No extra markup is required. #CSS #WebDev #FrontEnd 1/3

Infographic about CSS gap decorations by Lionel Péramo. The top preview shows six metric cards in a grid. Solid vertical lines and a dashed horizontal line separate the cards without touching the outer edges. The bottom code block shows the CSS rules. It uses column-rule, row-rule, and rule-overlap to create interior grid dividers without CSS borders or extra HTML elements.

120

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

The autocorrect attribute is now an official HTML standard. Mobile keyboards often replace valid codes by mistake. This attribute gives you control over that behavior. #HTML #WebDev #Frontend 1/3

HTML code example titled HTML: autocorrect. A form element uses autocorrect set to off to disable keyboard corrections for its inputs. Inside the form, a promo code field inherits this setting, and an order notes textarea turns autocorrect back on. Below the form, a standalone username input disables autocorrect directly.

100

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

Choosing how to organize CSS is a key decision. CUBE CSS combines global layouts and isolated styles. It organizes your code in four clear layers. #CSS #WebDev #Frontend 1/6

100

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

Lost in your stylesheet? BEM is a naming method that brings order to your CSS. It helps you write clean and scalable code. #CSS #WebDev #Frontend 1/5

Example of CSS code following the BEM methodology, based on a naming convention. It includes a `.button` block with basic styles, a `.button__text` element for the button's text, and modifiers such as `.button--large` for a larger button, `.button--disabled` for a disabled button, and `.button__text--highlight` for highlighted text styles. Comments in English explain each part of the code.

100

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

Many people change the text size on their phones. But most mobile browsers do not show this change on websites. A new HTML tool is coming: <meta name="text-scale">. It tells browsers to scale text. But is this a good solution? (1/3) #WebDev #Accessibility #CSS

111

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

Make UI elements move along a curved path with pure CSS. No JavaScript is needed for this animation. Here is how offset-path brings motion to your menus. #CSS #WebDev #Frontend 1/6

100

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

Build an animated menu pointer without JavaScript. Modern CSS makes this easy and fast. Here is how CSS anchor positioning works. #CSS #WebDev #Frontend 1/6

100