Lionel Péramo

@lionel-peramo.com

9 Followers 9 Following

Senior Fullstack Dev Architecting high-performance, accessible, and eco-friendly web. Creator of OTRA (PHP) & EcoComposer. Writing about web perf, CSS, and modern APIs at lionel-peramo.com. Also composing melodic landscapes.

A person in a wheelchair using a tablet, surrounded by accessibility symbols on various electronic devices.
JavaScript code snippet showing an async fetchWithTimeout function that uses AbortController to abort a fetch request after a specified timeout with error handling
Technical illustration showing a JavaScript code example for the WebTransport API. The code features an asynchronous function called 'connectToLiveStream' that establishes a persistent connection, creates a unidirectional stream, and sends encoded data to a server. The visual includes the title 'WebTransport' in a cursive font, a forest background, and a footer banner with Lionel Péramo’s photo and LinkedIn engagement icons (Like, Comment, Repost, Get notified).
A demo video of WebMCP. It shows a user clicking buttons to ask an AI for the weather in Tokyo and Paris. The AI quickly gets the live weather data and gives the correct answer.
A slide titled 'View transitions', showing JavaScript and CSS code snippets for smooth view transitions.
A graphic displaying a CSS code example on a dark card. The background is a sunny green forest. The header says: Chrome 150: CSS text-fit. The center card shows CSS code with two examples of the text-fit property: grow and shrink. The bottom bar shows the photo and name of Lionel Péramo.
A picture with a green forest background. At the top, the title says: Standard versus Mobile Reality. In the middle, a dark card shows a joke about mobile phones. The joke shows that a normal image code does not work on mobile screens, but a modified code name magically works. At the bottom is Lionel Péramo’s profile with social media buttons.
An image titled Permissions - umask showing a PHP code snippet on a forest background. The code shows how to safely set directory permissions by temporarily changing umask. First, it stores the current umask and sets it to zero using umask(0). Next, it creates a folder with full permissions using mkdir('myFolder', 0777). Finally, it restores the original umask using umask($oldMask). The bottom of the image shows Lionel Péramo's profile details.
An image titled Permissions - umask showing a PHP code snippet on a forest background. The code shows how to safely set directory permissions by temporarily changing umask. First, it stores the current umask and sets it to zero using umask(0). Next, it creates a folder with full permissions using mkdir('myFolder', 0777). Finally, it restores the original umask using umask($oldMask). The bottom of the image shows Lionel Péramo's profile details.
A video demonstrating SVG path animation. The video starts with a title card displaying SVG path animation. Then, on a dark background, a thin white line progressively draws itself on the screen. The line gradually reveals the outlines of the word ECOCOMPOSER. Once the outlines are complete, a solid green color fills the inside of the letters.
An image titled Streaming API showing a JavaScript code example. The code defines an asynchronous function called fetchAndStreamText. This function fetches a large text file from a URL and reads the incoming data progressively using response.body.getReader. In a loop, it decodes each data chunk and appends it to an HTML element with the ID 'content'. This allows the webpage to display text progressively as it is being downloaded. The bottom of the image shows Lionel Péramo's profile details.
A video showing a CSS spotlight effect. The video starts with an intro screen displaying the text CSS Spotlight Effect. Then, the word SpotLight appears on a dark background. A circular spotlight moves smoothly from left to right across the word, temporarily illuminating each letter as it passes.
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.
Comparison chart showing the evolution of the TypeScript compiler from version 6.x to 7.0. The legacy JS-powered compiler is single-threaded and slower, while the new native Go-powered engine enables multithreaded parallel processing, native execution speeds up to 10 times faster, and 6% to 26% lower RAM usage.
Video demonstration of the 'CSS sibling-index()' project by Lionel Péramo. The video begins with a dark title card reading 'CSS sibling-index()'. It then displays a geometric pattern of concentric circles made of tiny, glowing dots on a black background. The dots form a rainbow spectrum, starting with warm red and orange in the center and transitioning to green, blue, and purple on the outer edges. The dots scale up and down sequentially, radiating from the center outward to create a hypnotic, organic breathing wave effect.
Cover slide titled 'Sculpt your text' over a green forest background. A central block shows a paragraph of white text wrapping around the left side of a green ASCII-art Christmas tree made of characters. At the bottom, a profile card with the name 'Lionel Péramo' and '1 / 5'.
Demonstration of a realistic moving water visual effect, illustrating the advanced creative possibilities of shaders on a website.
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.
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.
This video shows a web page called "Pure CSS Projection Gallery". The screen shows a grid of photos. There is one large photo box on the left. There are several small photos on the right. A computer mouse pointer moves over the small photos. When the mouse is on a small photo, that photo also appears in the large box on the left. The photo changes smoothly. This project uses only CSS code. It does not use JavaScript.
A close-up picture of a small, silver computer chip. The chip is on a desk. In the middle of the chip, there is a glowing orange light. A small metal padlock sits on top of this light. The padlock means the chip is secure. In the blurry background, there is a computer screen. The screen shows a small lock symbol.
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.
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.