Lionel Péramo

4 July

I joined @wearedevelopers.bsky.social LIVE with @codepo8.bsky.social and @danielcranney.bsky.social to talk about CSS Shapes Level 2. (1/4) Watch here: devrel.wearedevelopers.com/live/2026-07... #CSS #WebDev #Frontend

10h

Have you heard of the HTML inert attribute? It helps freeze parts of a web page. Here is what it does: - It makes an element inactive. - Users cannot click on it. - Screen readers skip it. #WebDev #Accessibility #HTML 1/4

How to use it? - When the menu opens: add inert to the main content. - When the menu closes: remove inert from the main content. Example in JavaScript: mainContent.setAttribute('inert', ''); mainContent.removeAttribute('inert'); 3/4

10h

inert makes websites easier to build and accessible for everyone. You can see the demo here: https://codepen.io/mysth/pen/xxvVBPx Have you tried this feature yet? 4/4

Why is it useful? When a side menu opens: - You want users to focus on the menu. - You do not want users to click on the main page. inert stops clicks on the background page. It helps screen reader users stay on the menu. 2/4

22h

Making a custom toolbar accessible with keyboard navigation usually requires a lot of JavaScript code. The experimental `focusgroup` HTML attribute aims to make this much easier by letting the browser handle arrow-key navigation for you. 👇 #WebDev #a11y #HTML 1/4

3. Better accessibility by default: - Screen reader users and keyboard-only users get a smoother experience. Please note: This feature is still highly experimental. It is currently being tested in Chromium-based browsers, and does not have full support yet. 3/4

22h

A basic implementation looks like this: <div focusgroup="toolbar"> <button>Cut</button> <button>Copy</button> </div> How do you currently handle arrow-key navigation in your projects? Let me know! You can find more detail and a link to the proposal on my profile blog. 4/4

Here is what `focusgroup` does: 1. Native arrow-key navigation: - Users can use arrow keys to move between buttons or menu items automatically. 2. Less custom JavaScript: - You do not need to write complex keyboard event listeners. The browser manages the active focus state. 2/4

According to the World Health Organization, over 2 billion people have visual impairments. You can use your browser's developer tools to see how your website looks to people with different vision needs. Here is how it can help you. 👇 #a11y #Accessibility #WebDev 1/4

3. Layout and sizing: - Keep font sizes large enough to read easily. - Ensure the page still looks good and remains usable when users zoom in. - Leave enough space between text and buttons. You can use tools like https://color.review to check your color contrast. 3/4

Testing your website for visual impairments is a simple step to help many users. I have shared more details and the WHO source link on my blog. You can find the link in my profile. Have you ever tested your website with these simulation tools? 4/4

1. How to use it: - Open your browser's developer tools. - Look for the 'rendering' or 'accessibility' tab. - Choose a visual impairment (like color blindness) to simulate it. 2. What to fix with CSS: - Make sure text colors have strong contrast against the background. 2/4

We all love Markdown. However, it can be messy and confusing. Djot is a new markup language. It fixes many Markdown issues. #Djot #Markdown #WebDev 1/5

3. Built for security and developers. It blocks unsafe HTML by default. It uses an Abstract Syntax Tree. This makes it simpler to parse and extend. 4/5

4. Available now for PHP. A modern parser is ready for production. Read more here: https://djot.net/ https://www.dereuromark.de/2025/12/09/djot-php-a-modern-markup-parser/ Would you switch to Djot, or stay with classic Markdown? 5/5

We all love Markdown. However, it can be messy and confusing. Djot is a new markup language. It fixes many Markdown issues. #Djot #Markdown #WebDev 1/5

1. A cleaner syntax. It removes confusing edge cases. Lists and containers nest without layout bugs. It handles quotes and dashes automatically. 2/5

2. More features out of the box. Highlights, insertions, and deletions are built-in. You do not need extra extensions for basic styling. You can easily mark specific parts of your text. 3/5

Curved 3D corridors usually require WebGL. You can build them using native CSS 3D transforms. Here is how to create a curved 3D corridor gallery with Vanilla JavaScript. #WebDev #CSS #JavaScript 1/5

3. Recycle geometry like an arcade game. When a panel passes behind the camera, move it to the front. This creates an infinite loop with few DOM nodes. It keeps memory usage very low. 4/5

4. Fix 3D click detection with elementsFromPoint. Browser raycasting fails on tilted 3D elements. Use document.elementsFromPoint to inspect the stack. It detects clicks on paintings with 100% accuracy. What do you think of this native 3D approach? 5/5

Curved 3D corridors usually require WebGL. You can build them using native CSS 3D transforms. Here is how to create a curved 3D corridor gallery with Vanilla JavaScript. #WebDev #CSS #JavaScript 1/5

1. Calculate the curve with trigonometry. Use a periodic sine and cosine function. Compute the position and the tangent angle along the path. Rotate each panel to follow the curve. 2/5

2. Slice the corridor into modular panels. Do not use one giant 3D box. Divide walls, floor, and ceiling into short segments. Align each segment along the curve tangent. 3/5

Sometimes users need to print a web page. If the page is not formatted for paper, it can waste ink and paper. You can use a simple CSS tool to make your pages look clean when printed. Here is how to do it. 👇 #CSS #WebDev #GreenIT 1/4

3. Save ink: - Use dark text on a white background. - Avoid dark backgrounds to prevent wasting black ink. - Change font sizes so the text is easy to read on paper. 4. Test your work: Open your browser's print preview to see how it looks before printing. 3/4

Helping users print cleanly saves resources and makes your website more accessible. For more information, check out my blog article: https://lionel-peramo.com/posts/mastering-css-print/ Have you ever optimized your CSS for printing? 4/4

1. Use the print media query: Add `@media print` in your CSS. This code only runs when a user prints the page. 2. Remove useless elements: - Hide navigation menus, headers, and footer links. - Hide ads and sidebars to save paper. 2/4

Do you know how to make complex web elements accessible? ARIA (Accessible Rich Internet Applications) is a set of attributes you can add to your code. It helps people using screen readers understand your website. Here is how to use it. 👇 #Accessibility #a11y #WebDev 1/4

3. Use ARIA wisely: - Too much ARIA can make your website harder to use. - Only use it as a helper to fill in missing details. For example, a progress bar might need specific ARIA roles to tell screen readers how much it has loaded. 3/4

Keeping your code clean and using standard HTML is the best way to help your users. Want to learn more? Check out my blog link in my profile for a full guide. Have you used ARIA in your projects before? Let me know! 4/4

1. The Golden Rule: Always use standard HTML first. Standard tags like <button> or <label> already have built-in accessibility. 2. When to use ARIA: - For complex elements like custom menus or tabs. - When standard HTML elements are not enough. 2/4

Web accessibility means making websites that everyone can use. This includes people with disabilities, but it also helps many other users. Here is why web accessibility is important for your website. 👇 #Accessibility #a11y #WebDev 1/4

3. It builds trust: - People respect brands that care about everyone. 4. How to start: - Check your site with free tools like WAVE or axe. - Use correct HTML tags. - Ask real users with diverse needs to test your website. 3/4

Making your website accessible is a simple way to create a better experience for everyone. You can find a more detailed guide on my blog. The link is in my profile. Have you worked on web accessibility before? 4/4

1. It helps everyone: - Subtitles help when watching videos without sound. - Good color contrast helps in bright sunlight. 2. It improves search rankings (SEO): - Search engines read accessible code better. - Alt text on images makes them easier to find. 2/4

Sometimes you start a task in JavaScript but need to stop it. For example, stopping a data fetch if the user leaves the page. AbortController is a built-in tool that lets you cancel these tasks easily. Here is how it works. 👇 #JavaScript #WebDev #Coding 1/4

2. Real-world examples: - Search boxes: Cancel an old search request when the user types a new letter. - File uploads: Stop an upload if it takes too much time. - Images: Stop loading images that are not visible on the screen. 3/4

Almost all modern browsers support AbortController. It makes your code cleaner and more reliable. Want to learn more? Check out the detailed article on my blog. The link is in my profile. Have you used AbortController in your projects? 4/4

1. Why use it? - Stop requests that are no longer needed. - Create simple timeouts if a task takes too long. - Save your users' internet data and device memory. It helps keep your websites fast and responsive. 2/4

A standard API request gets data once and closes. WebTransport is different. It opens one live connection and keeps it open. This allows the browser and the server to talk to each other at any time. Here is how it works. 👇 #WebDev #Coding #JavaScript 1/4

3. When to use it: Use WebTransport for high-performance needs: - Sending data many times per second. - Very low delay (latency). - Multiple data types at once. In JavaScript, you open a permanent link like this: const transport = new WebTransport(url); await transport.ready; 3/4

WebTransport keeps your connection open so you can send and receive data smoothly at any moment. Are you planning to use WebTransport for your live apps? Let's discuss! 4/4

1. Multi-lane highway: You can send many independent streams of data at once. A chat message and a large file won't block each other. 2. Server push: The server does not have to wait for you to ask. It can send you instant updates, like live stock prices or chat messages. 2/4

AI models need more than just training data. They need to connect to your tools and files. WebMCP is a new open standard that connects AI to your apps safely and easily. Here is how it works. 👇 #AI #WebMCP #WebDev 1/4

3. Privacy first: You control what the AI can see. The connection happens locally, so your data stays safe. 4. How it works: - AI chooses the best tool. - The system runs the tool on your device. - The system sends the data back to the AI. - AI gives you the correct answer. 3/4