iiinova — where your digital self keeps evolving

You're totally right, that's a typo in my visual. The <template> should definitely be placed inside the <my-component> tags, not above them. Thanks for pointing it out!

000

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

The browser uses the parent element. The parent is the element that wraps the template. The browser creates the shadow root inside this parent element. Then, it removes the template tag.

110

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

3. Browser support and limits. It is now Baseline with around 95% global support. Older browser versions need a small polyfill fallback. It does not replace clean CSS or semantic HTML. Are you already using Declarative Shadow DOM? Tell me in the replies. 3/3

010

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

2. Key advantages. Initial page loading is faster because no script is needed. Search engines read the content directly, which improves SEO. It brings native shadow DOM to Server-Side Rendering. This removes layout jumps before client scripts load. 2/3

220

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

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.

232

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

I mean class collisions leaking into components, and cascade issues when bundle import orders change. Without strict conventions or scoping, global CSS easily causes regressions in multi-team codebases.

110

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

That's what I aim but it's not always simple. I generally prefer performance over maintainability but that has a cost. As a lot of topics, it's a matter of where we put the cursor on each thing, according to a specific context.

100

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

As long as the visitor's needs come before the developer's needs. 😉 Always pleasant to have deep discussions like this one.

110

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

Shadow DOM does not stop reflows. The browser flattens everything into one layout tree. Also, Burton's post is literally CSS-only: zero JS and zero shadow DOM! Semantic HTML and clean CSS already fix div-soup and reflows without creating 60+ hidden trees.

000

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

That is true if global CSS uses deep selectors like .card .title. But flat naming like BEM already makes rule matching a fast hash lookup in light DOM. The cost of 1,000 shadow roots in memory and JS often outweighs the microsecond saved on style recalculation isn't it?

100

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

It depends on the scale. Shadow DOM scopes CSS selectors, but it does not isolate repaints or layouts. Changes inside still trigger global page reflows. If we want scoped repaints + fast renders, CSS properties like `contain` and `content-visibility` do that natively on DOM with zero JS overhead.

200

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

I prefer clean CSS naming. Users do not care about dev comfort, they want fast pages. Shadow DOM adds hidden layers and extra JS. A good SCSS architecture scales fine. We can test mixins and compiled CSS directly to ensure clean output. I prefer lightweight, tested CSS over runtime isolation.

200

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

It can even run the game DOOM controlled by PHP. Unlike PHP-FFI, it brings safe sandboxing with zero risk of segmentation faults. Would you use WebAssembly in your backend projects? 3/3

000

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

You can call WASM components using plain PHP values. The extension handles the data conversion for you. It also supports WASI for secure sandboxing. This means you can safely run untrusted code. 2/3

100

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.

131

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

Search, RSS feeds, and dark mode work right away. All files stay on your machine. You can back up your blog by copying a folder. Do you prefer flat-file platforms like Plume or traditional CMSs? 3/3

000

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

I love this minimalist approach. I even built a private generator using PHP-FFI and a C library to parse Markdown. Plume gives you that same lightweight speed without writing custom code. You launch it with a single Docker command. 2/3

100

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.

100

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

Here are three useful resources. MDN: developer.mozilla.org/en-US/docs/W... web.dev: web.dev/articles/sha... W3C: dom.spec.whatwg.org Do you prefer shadow DOM or clean CSS naming? Tell me in the replies. 3/3

100

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

It shines when building advanced custom widgets. For example, you can build an autocomplete search bar. Custom Elements handle logic and attributes. The shadow DOM protects internal markup. However, it makes debugging harder. It does not replace a solid CSS architecture. 2/3

100

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 · 02/10/2026

Want to try it yourself? I set up a vanilla JS/GLSL demo on CodePen: codepen.io/mysth/pen/bNVwreo Try changing the numbers. What happens if you use vec4(v_uv.x, 0.0, 0.0, 1.0)? What if you swap X and Y? Let me know what you find! 👇 3/3

000

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

In GLSL, v_uv.x goes from 0 (left) to 1 (right), and y goes bottom-up. To create a gradient, we write: ``` void main() { gl_FragColor = vec4(v_uv.x, v_uv.y, 0.5, 1.0); } ``` This maps Red to X, Green to Y, and Blue to 50%. Smooth gradient achieved! 2/3

100

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

Ever wanted to understand shaders without bloated libraries? 🎨 A fragment shader is a tiny program running on your GPU. It runs for every single pixel to determine its color. Using GLSL, we can map pixel colors directly to their coordinate map (v_uv). #WebDev #WebGL #GLSL 1/3

210

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

Want to dive deeper into browser native sanitization? 👇 MDN Docs: developer.mozilla.org/en-US/docs/W... Have you started testing setHTML in your projects yet? (3/3)

000

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

Unlike innerHTML, setHTML automatically parses, cleans, and discards dangerous elements (like scripts or inline event handlers) before inserting them into the DOM. Check out the image below to see how it neutralizes an unsafe input compared to the legacy approach. (2/3)

101

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

Want to write and test your JSON-LD schemas? Here are the best tools: 👇 - Playground: json-ld.org - Schema Validator: validator.schema.org - Google Test: search.google.com/test/rich-re... Have you implemented JSON-LD yet? What's your experience? 3/3

000

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

How does it work? 🛠️ Instead of adding extra attributes to your tags, you simply embed a single `<script type="application/ld+json">` block, usually in your document `<head>`. This leads to lighter markup, faster rendering, and trouble-free SEO updates. 2/3

110

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

Want to dive deeper? Here are the key resources: 👇 • microformats.org • developer.mozilla.org/fr/docs/Web/... Have you ever experimented with Microformats on your site? 3/3

010

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

Inside, use prefixes for properties: • p-* for text (like p-name) • u-* for URLs (like u-photo) • dt-* for dates (dt-bday) • e-* for rich content Since they are standard HTML classes, they are safe to use and ignored if not supported. 2/3

100

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

- schema.org - developer.mozilla.org/fr/docs/Web/... - validator.schema.org - developers.google.com/search/docs/... - search.google.com/test/rich-re... Do you use Microdata on your site? 👇 3/3

000

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

Prefer keeping your HTML clean and organized? JSON-LD is a great alternative. It lets you define your structured data independently of your markup, keeping your codebase easier to maintain. Here are the key resources to get started: 👇 2/3

100

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

Without TPM, hackers can steal your keys. With TPM, your keys are safe. They cannot be used on other computers. Is TPM active on your computer? (5/5)

000

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

TPM does not save keys as files. TPM locks the keys inside the chip itself. A hacker cannot copy the keys from the chip. The keys only work on your computer. (4/5)

100

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

To stop this, we use a special tool. This tool is a computer chip called TPM. TPM means Trusted Platform Module. The chip is inside your computer. (3/5)

100

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

Usually, computers store digital keys as files. If a hacker enters your computer, they can copy the key file. They can move the file to their own computer. The hacker can now use your key. (2/5)

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

is AI usage mandatory with scanly? I always try to put non AI options if possible as it's quite heavy on resources.

000

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

5. Invicti: Automated scanner specializing in critical web app vulnerabilities. 👉 www.invicti.com Proactive security is key! Have you tested these? What are your favorite cybersecurity tools? 👇 4/4

000

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

3. Sucuri SiteCheck: Detects malware, blacklists, and security risks. 👉 sitecheck.sucuri.net 4. Detectify: Automated vulnerability scans with global expert insights. 👉 detectify.com 3/4

sitecheck.sucuri.net

Sucuri Security

SiteCheck is a website security scanner that checks any site, link, or URL for malware, viruses, blacklist status, seo spam, or malicious code. Check your website safety for free with Sucuri Security.

110

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

1. SSL Labs: In-depth SSL/TLS configuration test. 👉 www.ssllabs.com/ssltest/ 2. Security Headers: Quick check of HTTP headers to prevent common vulnerabilities. 👉 securityheaders.com 2/4

200

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

Why use it? • Protect users & their data • Strengthen customer trust • Access cybersecurity guides & best practices What are your go-to web security strategies? Share your favorite tools below! 👇 2/2

000

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

These settings protect your sender reputation. They make sure your emails reach the inbox. How do you secure your emails? Share your tips in the comments. 4/4

000