Jump to content

Blogger

Blog Bot

  • Joined

  • Last visited

    Never
View Profile Find content

Blog Entries posted by Blogger

  1. by: Adnan Shabbir
    Sun, 18 May 2025 05:36:45 +0000

    Linux has evolved over time, from a minimalist interface and tools to supporting state-of-the-art interfaces and applications. In today’s modern era, a Browser is one of the most required applications on any system. Linux distros that come with a GUI by default have some browsers pre-installed, i.e., Firefox, Chromium. Other than the default installed browser, there are more competitive browsers supported by Linux that can be a better choice than the already installed one.
    Keeping this in view, I will discuss the top Linux browsers, including the GUI and text-based browsers.
    Top 12 Browsers for Linux
    From a user’s point of view, there are several factors that influence the browser choice. While choosing a browser, some users prefer a resource-friendly browser, a browser full of features, or a secure browser. If you are unsure, please go through this guide, and you’ll find your browser as per your requirements.
    Firefox
    Firefox, because of its Free and Open-Source (FOSS) nature, comes by default in most of the Linux distributions, i.e., Ubuntu, Kali. It was introduced in 2004 with the aim of being a competitor of Internet Explorer. Firefox offers various features that make it stand out among most browsers.
    Let’s see why anyone should use or opt for Firefox.
    Why Firefox?
    Over time, Firefox evolved, and it attracted a large number of Linux users. Firefox is well-known for its privacy-oriented features, i.e., cookie protection, tracking protection, and support for DNS over HTTPS.
    Firefox is updated every 4 weeks, and the core focus is continuously evolving the privacy and security features.
    Firefox has a large number of extensions in its “Add-ons” store. Extensions assist the users in doing specific tasks with one click instead of spending a few minutes on a specific task.
    Firefox is highly customizable, which makes it favorable for those looking for some visual appeal in the browser.
    Limitations of Firefox:
    Although Firefox is well-liked and is no doubt a fully loaded browser. However, it still has some limitations that I want to highlight:
    The processing is slow and laggy, which is a red flag in this speedy tech era. That’s why the Gen Z audience barely adapts to Firefox. Consumes relatively larger memory than it should, as it has a poor tab process management mechanism. Want to give it a try? Let’s learn how it can be installed on various Linux distributions.
    Install Firefox on Linux
    sudo apt install firefox #Debian Derivatives sudo pacman install firefox #Arch and its Derivatives sudo pacman install firefox #Arch and its Derivatives Google Chrome
    Google Chrome is also one of the leading browsers for Linux systems. It was introduced in 2008, and since then, it has been gaining popularity day by day because of its amazing strengths, which you might not see in any other browser.
    So, let’s dig into the “Why” part:
    Why Google Chrome?
    Google Chrome releases its stable version every 4 weeks (same as Firefox). Currently, Google Chrome 136 is the latest stable release with security updates in focus as well.
    Google Chrome has a large extensions store to integrate various tools, apps with your browser to save time. That’s why Google Chrome’s user experience is better than other browsers in the list.
    Google Chrome is a part of Google’s ecosystem, thus, you can integrate Google services with your Chrome profile. This way, multiple accounts can be integrated with multiple Chrome profiles.
    Chrome offers some control over the data. Like, protecting your list of passwords, autofill control, managing cookies and sessions up to some extent, indicating if the password is found in a data breach, asking before saving any password, etc.
    Limitations of Google Chrome:
    High resource consumption, i.e., RAM. As it is integrated with Google’s ecosystem, Chrome usually tracks and collects data on the user’s behavior throughout the session. Chrome has some serious limitations as discussed above, but still used and loved the most.
    Install Google Chrome on Linux
    Let me take you through the installation methods of Chrome on Linux:
    Ubuntu and other Debian Distros:
    Chrome is not directly available on Ubuntu’s or Debian’s repository. You have to download the “deb” package file from the Official Website and use the following command:
    sudo apt install "./deb-package-name" Click here to read the complete Installation guide of Chrome on Ubuntu.
    Arch-Linux and Its Derivatives:
    Get the AUR helper, i.e., yay in this case:
    sudo pacman -S --needed base-devel git
    git clone https://aur.archlinux.org/yay-git.git
    cd yay
    makepkg -si Now, install Chrome on Arch using the following command:
    yay -S google-chrome Detailed insight into installing Google Chrome on Arch Linux.
    Fedora:
    sudo dnf install fedora-workstation-repositories
    sudo dnf install google-chrome-stable Click here to learn multiple methods of installing Chrome on Fedora.
    Opera
    Opera is a Chromium-based, partially Open-Source browser. It was first launched in 1995 with the aim of providing a state-of-the-art user experience at that time. Let’s have a look at the “Why”?
    Why Opera?
    Opera has the same rendering engine (JavaScript-based) as Google Chrome, and thus provides speed assurance while surfing.
    Opera provides built-in support for messengers of social platforms, providing a dedicated bar inside the browser.
    Opera has built-in support for VPN, which serves through 3 locations only.
    Opera supports a number of extensions that assist users in doing several tasks quickly, i.e., a single click to open/manage apps or tools. Apart from Opera’s own extensions, it supports Chrome-based extensions as well.
    Limitations of Opera:
    Resource consumption. Chromium-based, but still utilizes high resources. Since it is a partially open source, and thus the VPN source code is not revealed, which makes it vulnerable, ultimately compromising the privacy of the user. Likewise, the same concern is for the Ad and tracker blocker. Install Opera on Linux
    Snap Supported Distros:
    sudo snap install opera Ubuntu and Other Debian Derivatives:
    Click here to see detailed installation methods of Opera on Ubuntu and other Debian derivatives.
    Arch and Its Derivatives:
    yay -S opera Brave
    In 2016, the co-founder of the Mozilla project introduced Brave to provide privacy. For this, it was launched with a built-in Ad and tracker blocker. Let’s dig into the core details of why this Browser is one of the most used by Linux users:
    Why Brave?
    Since Brave was introduced to ensure privacy so it integrated Tor browsing, which is the most secure way of browsing. Routing through multiple IPs and ensuring the tracker blocking is what makes Brave a secure browser.
    Brave has a unique Ad reward system, known as “Basic Attention Token”. Users can earn these tokens by watching the Ads and supporting the content creators.
    Brave is also a Chromium-based browser (equipped with the V8 JS engine), which makes it a fast browser.
    Brave supports a list of Chrome-based extensions to ensure the availability of maximum features to the users. Moreover, it has cross-platform support available, i.e., you can integrate the saved bookmarks, browsing history, and other settings to another platform.
    Limitations of Brave:
    The aggressive tracker and ad-blocking feature of Brave blocks various useful extensions and sites either completely or partially, which impacts the user experience. Now, let’s explore the ways to install Brave on Linux:
    Install Brave Browser on Linux
    You can get Brave on Linux using one shell script:
    curl -fsS https://dl.brave.com/install.sh | sh Ubuntu and Other Debian Derivatives:
    Click here to get detailed instructions for installing Brave on Ubuntu and Debian Derivatives
    Arch and Its Derivatives:
    Click here to install Brave on Arch and its derived distributions.
    Chromium
    Google Chrome is a free and open-source browser developed and maintained by Google (under the Chromium project). It was first released in 2008 and named after the Chromium metal, which is used to create Chrome plates. Let’s see why Chromium is one of the best browser choices.
    Why Chromium?
    Chromium is open source, which makes it favorable for Linux users, and it was developed by Google, so most of the Chrome-like features are already there.
    Chromium also allows you to get extensions from the Chrome Web Store and from external sources, resulting in a large number of extensions for a better user experience.
    The browser’s source code can be modified, but only Google-authorized developers are allowed to do so.
    When compared with Chrome, Chromium is more privacy-oriented than Google Chrome, i.e., it installs updates manually and it does not track or share user data.
    Limitations of Chromium:
    Chromium is also a resource-intensive browser, making it hard for people looking for a hardware-friendly browser, and the Chromium codebase is the major reason behind this.
    Install Chromium on Linux
    Ubuntu and Other Debian Derivatives:
    sudo apt install chromium-browser Read this guide for detailed installation instructions.
    Snap supported Distros:
    sudo snap install chromium Arch and Its Derivatives:
    sudo pacman -S chromium Fedora:
    sudo dnf install chromium Vivaldi
    Vivaldi is another Chromium-based browser, introduced in 2015 by Vivaldi. It was developed and considered as an alternative to the Opera browser.
    Why Vivaldi?
    Since Vivaldi is Chromium-based, its UI is customizable, and users have a variety of themes, layout options to experience a unique feel.
    Vivaldi’s quick command line support allows you to navigate between browsers, create Vivaldi notes, and scroll through browser history. Just write the keyword in the command search tab, and a list of commands is shown with their purpose.
    Vivaldi is equipped with a built-in mail client and RSS feed reader, which you may not get by default in other browsers.
    Limitations of Vivaldi:
    Vivaldi is not completely open-source, with some of its features on a closed-source list. Although it offers a customizable UI but it can result in consuming high hardware resources. Install Vivaldi on Linux
    Ubuntu and Other Debian Derivatives:
    Vivaldi is not directly available on the repositories of Ubuntu or other Debian derivatives. However, you can get the “.deb” package from the official Vivaldi site. Once the “deb” package is downloaded, you can use the following command to install it:
    sudo apt install "./path-to-deb-file" Note: Follow this guide for a detailed installation method.
    Snap Supported Distros:
    Users of those Linux distributions where the snap is functional can use the following command to install Vivaldi on the system:
    sudo snap install vivaldi Flatpak Supported Distros:
    Ensure that your system has Flatpak installed and it is connected to Flathub. Then, use the following command to install it:
    flatpak install flathub com.vivaldi.Vivaldi Tor (The Onion Router)
    Tor is the most secure browser so far, introduced in 2002, with an aim to create the first ever anonymous browser. It is managed and maintained under the Tor Project.
    Why Tor?
    When a request is sent through Tor, it passes through a multi-layered routing, one layer after another. This multi-layer routing makes it impossible to detect and trace a user or the location of the user.
    Tor usually works on the “.onion” links, which only work on the Onion routing, i.e., Tor. This makes Tor a browser for specific use (helping the government and corporate sector work anonymously to achieve specific goals).
    Limitations of Tor:
    The multi-layered routing puts extra load on the system resources, which is not good for users looking for resource-friendly browsers. Takes more time to load/start. Anonymity is usually utilized in illegal activities (hacking, dark web, etc). Install Tor on Linux
    Ubuntu and other Debian Derivatives:
    sudo apt install torbrowser-launcher Note: Follow this guide for detailed installation instructions for Tor on Ubuntu.
    Flatpak Supported Distros:
    flatpak install flathub org.torproject.torbrowser-launcher Fedora:
    To install Tor on Fedora, you have to first integrate the Tor project with Fedora’s package repository and then proceed with the installation. Get brief info on this at Tor’s official page.
    Falkon
    Falkon was initially introduced in 2010 with the name “QupZilla”. Later in 2017, KDE adapted it and renamed it from “QupZilla” to “Falkon”.
    Why Falkon?
    Since it is a KDE-owned browser, it works well and is integrated with the KDE environment (a desktop environment on Linux).
    Falkon is a resource-friendly browser, making it well-liked among users working in a resource-constrained environment.
    It offers a built-in Ad blocker and some privacy controls, which are enough for a normal user and thus nullify the need to install any other service.
    Limitations of Falkon:
    Falkon is very straightforward and resource-friendly with limited engine updates. Because of that, it sometimes behaves abnormally when modern web standards are encountered, i.e., dynamic sites, high-end graphic visuals, JavaScript-enriched sites. It does not have enough extension support as compared to other browsers. Install Falkon on Linux
    sudo apt install falkon #Debian Derivatives flatpak install flathub org.kde.falkon #Flatpak Supported Distros sudo snap install falkon #Snap Supported Distros Read this guide for detailed installation instructions using Snap.
    Midori
    Midori was introduced in 2007 as a part of the XFCE project and aimed to offer a simple, fast, and lightweight solution for Linux users.
    Why Midori?
    Midori is not modern in visuals, but effective for hardware-conscious users, i.e., old hardware, low hardware specs, embedded systems.
    It has a notably low memory consumption, which makes it boot and perform fast.
    It supports low-level tools for tracker and cookie blocking, providing essential privacy to users.
    Limitations of Midori:
    Low support for the extensions and advanced customization. Neither intermediate nor advanced security measures are supported. Install Midori on Linux:
    Ubuntu and Other Debian Derivatives:
    sudo apt install midori Snap Supported Distros:
    sudo snap install midori Note: Remember to configure and enable snapd, or else you will get an error while installing.
    Flatpak Supported Distros:
    flatpak install flathub org.midori_browser.Midori These were the most used and recommended GUI browsers for Linux users.
    Lynx | Text-Based Browser
    Lynx is an open-source and command-line browser for linux systems. It was introduced in 1992 by a group of researchers from the University of Kansas.
    Why Lynx?
    Lynx was aimed at command-line browsing and is still used in Linux servers to keep the GUI exposure as low as possible.
    Lynx allows a limited number of operations to track the user data. However, it provides control over the cookies, users can manage if the cookies are allowed or disallowed.
    It is a preferred browser while communicating with a system through SSH, Telnet, or any other terminal-based connections.
    Because of its only command line support, Lynx is well-supported and recommended for resource-friendly systems.
    Limitations of Lynx:
    Only command-line operations. The search result is provided as a formatted text on the terminal screen, which might not be suitable for all Linux users or users shifting to Linux. Only recommended when browsing is not being done frequently. Install Lynx on Linux
    sudo apt install lynx Ubuntu and Other Debian Distros sudo dnf install lynx Fedora and other dnf-supported Distros sudo pacman -S lynx Arch and its Distros Browsh | Text-Based Browser
    Browsh is another text-based browser for Linux. However, it is modern as compared to the Lynx as it supports a GUI but in a controlled manner. For GUI rendering, the user must have Firefox installed.
    Why Browsh?
    Browsh supports a basic graphics element renderer (CSS/JS) to offer limited GUI support for the search results.
    Browsh does not allow sharing the user data. However, while processing web pages, the cookies need to be managed manually.
    Being a text-based browser, it is lightweight and supports old hardware or systems with low hardware resources.
    Browsh is also used when communicating through SSH, Telnet, etc., the remote connections to the systems.
    Limitations of Browsh:
    Although it supports a modern GUI renderer, advanced graphics have not yet been supported inside Browsh. Thus, when displaying the graphics, a few of them pixelate or do not show up properly. Install Browsh on Linux
    sudo apt install browsh #Ubuntu and Other Debian Distros sudo dnf install browsh #Fedora and other dnf-supported Distros sudo pacman -S browsh #Arch and its Distros: W3m | Text-Based Browser
    W3m was initially introduced in 1995 as a text-based browser for the Unix-derived operating systems. Since then, it has been adapted at a larger scale by Linux users to browse in a non-GUI environment.
    Why W3m?
    Like other text-based browsers, it is also resource-friendly, takes no time to start, and browses the data with an optimal speed.
    It is usually used in Linux servers and for remote browsing through remote connection protocols, i.e., SSH, Telnet.
    With time, W3m has been updated and now it provides a more user-friendly text-based interface, i.e., inline images and interactive results.
    Limitations of W3m:
    W3m needs to be configured to show inline images and SSL-encrypted pages. If not configured properly, it will show abnormal results in the terminal. Install W3m on Linux
    sudo apt install w3m #Ubuntu and Other Debian Distros sudo dnf install w3m #Fedora and Other dnf-supported Distros sudo pacman -S w3m #Arch and Its Derivatives That’s all from the list of top Linux browsers.
    Comparison of the Browsers | Which one to choose?
    Now that you have gone through the top browsers for Linux. Let me provide you with a comparison chart of the browsers. Here, I have considered notable parameters that a user should consider before switching to another browser:
    Browser System Resource Usage Privacy Customization Extension Support Rendering Engine Updates Source-Code GUI Browsers Firefox Medium Medium Medium High Gecko Regular FOSS Chrome High Low Low High Blink Regular Proprietary Tor High High Low Medium Gecko Regular FOSS Opera Medium Ad and Tracker blocker, VPN
    High, i.e., sidebar, themes, workspaces High Blink Regular Partially Open-Source Brave Low Ad and Tracker blocker Medium Medium Blink Regular FOSS Chromium Low Low Low Medium Blink Regular FOSS Vivaldi Low Tracker blocker Low High Blink Regular Partially Open-Source Falkon Very Low Low Low Medium QtWebEngine Not Regular FOSS Midori Very Low Low Low Medium WebKit Not Regular FOSS Terminal/Text-Based Browsers Lynx Very Low Low Low Internal Not Regular FOSS w3m Very Low Low Low Internal Not Regular Browsh Very Low Low Low Geck-based Not Regular That’s all. Choose your browser wisely.
    Conclusion
    The top linux browsers for 2025 are: Google Chrome, Firefox, Opera, Brave, Chromium, Vivaldi, Tor, Falkon, Midori, Lynx, Browsh, and W3m. Each browser is chosen based on some factors, i.e., some offer advanced features, security, resource consumption, and text-based interfaces. You just need to see which browser fulfills your requirements and just go for it.
    I have provided a list of the most used Browsers on Linux and demonstrated a brief comparison so that a user can easily pick a browser as per their requirements.
  2. by: Abhishek Kumar
    Sun, 18 May 2025 05:23:03 GMT

    Manually formatting code can be tedious, especially in fast-paced or collaborative development environments.
    While consistent formatting is essential for readability and maintainability, doing it by hand slows you down and sometimes leads to inconsistent results across a project.
    In this article, I’ll walk you through the steps to configure Visual Studio Code to automatically format your code each time you save a file.
    We'll use the VS Code extension called Prettier, one of the most widely adopted tools for enforcing code style in JavaScript, TypeScript, and many other languages.
    By the end of this guide, you'll have a setup that keeps your code clean with zero extra effort.
    Step 1: Install Prettier extension in VS Code
    To start, you'll need the Prettier - Code Formatter extension. This tool supports JavaScript, TypeScript, HTML, CSS, React, Vue, and more.
    Open VS Code, go to the Extensions sidebar (or press Ctrl + Shift + X), and search for Prettier.
    Click on Install and reload VS Code if prompted.
    Step 2: Enable format on save
    Now that Prettier is installed, let’s make it run automatically whenever you save a file.
    Open Settings via Ctrl + , or by going to File > Preferences > Settings.
    In the search bar at the top, type format on save and then Check the box for Editor: Format On Save.
    This tells VS Code to auto-format your code whenever you save a file, but that’s only part of the setup.
    Troubleshooting
    If saving a file doesn’t automatically format your code, it’s likely due to multiple formatters being installed in VS Code. Here’s how to make sure Prettier is set as the default:
    Open any file in VS Code and press Ctrl + Shift + P (or Cmd + Shift + P on Mac) to bring up the Command Palette. Type “Format Document” and select the option that appears. If multiple formatters are available, VS Code will prompt you to choose one. Select “Prettier - Code formatter” from the list. Now try saving your file again. If Prettier is correctly selected, it should instantly reformat the code on save.
    In some cases, you might want to save a file without applying formatting, for example, when working with generated code or temporary formatting quirks. To do that, open the Command Palette again and run “Save Without Formatting.”
    Optional: Advanced configuration
    Prettier works well out of the box, but you can customize how it formats your code by adding a .prettierrc configuration file at the root of your project.
    Here’s a simple example:
    { "singleQuote": true, "trailingComma": "es5", "semi": false } This configuration tells Prettier to use single quotes, add trailing commas where valid in ES5 (like in objects and arrays), and omit semicolons at the end of statements.
    There are many other options available such as adjusting print width, tab width, or controlling how JSX and HTML are handled.
    You can find the full list of supported options in Prettier’s documentation, but for most projects, a few key settings in .prettierrc go a long way.
    Try It Out
    Create or open any file, JavaScript, TypeScript, HTML, etc. Add some poorly formatted code.
    <html><head><style>body{background:#fff;color:#333;font-family:sans-serif}</style></head><body><h1>Hello</h1><script>document.querySelector("h1").addEventListener("click",()=>{alert("Hello World!")})</script></body></html> Then simply save the file (Ctrl + S or Cmd + S), and watch Prettier instantly clean it up.
    As you can see, Prettier neatly indents and spaces each part of the html code, even across different embedded languages.
    Wrapping Up
    It doesn't matter if you are vibe coding or doing everything on your own, proper formatting is a sign of writing good code.
    We’ve already covered the fundamentals of writing clean, consistent code - indentation, spacing, and word wrap, and automatic formatting builds directly on top of those fundamentals.
    Once configured, it removes the need to think about structure while coding, letting you focus on the logic.
    If you're also wondering how to actually run JavaScript or HTML inside VS Code, we've covered that as well, so check those guides if you're setting up your workflow from scratch.
    If you’re not already using automatic formatting, it’s worth making part of your workflow.
    And if you use a different tool or approach, I’d be interested to hear how you’ve set it up, let us know in the comments. 🧑‍💻
  3. by: Geoff Graham
    Fri, 16 May 2025 14:38:19 +0000

    Some weekend reading on the heels of Global Accessibility Awareness Day (GAADM), which took place yesterday. The Email Markup Consortium (EMC) released its 2025 study on the accessibility in HTML emails, and the TL;DR is not totally dissimilar from what we heard from WebAIM’s annual web report:
    The results come from an analysis of 443,585 emails collected from the past year. According to EMC, only 21 emails passed all accessibility checks — and they were all written by the same author representing two different brands. And, further, that author represents one of the companies that not only sponsors the study, but develops the automated testing tool powering the analysis.
    Automated testing is the key here. That’s needed for a project looking at hundreds of thousands of emails, but it won’t surface everything, as noted:
    The most common issues relate to internationalization, like leaving out the lang (96% of emails) and dir (98% of emails) attributes. But you’ll be familiar with most of what rounds up the top 10, because it lines up with WebAIM’s findings:
    Links must have discernible text Element has insufficient color contrast Images must have alternate text Link text should be descriptive Links must be distinguishable without relying on color I appreciate that the report sheds a light on what accessibility features are supported by specific email clients, such as Gmail. The report outlines a set of 20 HTML, CSS, and ARIA features they look for and found that only one email client (SFR Mail?) of the 44 evaluated supports all of the features. Apple Mail and Samsung Email are apparently close behind, but the other 41? Not so much.
    AilSo, yeah. Email has a ways to go, like a small microcosm of the web itself.
    HTML Email Accessibility Report 2025 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
  4. by: Abhishek Prakash
    Fri, 16 May 2025 14:25:21 GMT

    Sausage is a word forming game, inspired by the classic Bookworm. Written in bash script, you can use it on any Linux distribution.
    Playing SausageThe goal of the game is simple.
    Earn points by spotting words. Longer word spotting results in coloured letters. Using coloured letters give more points. Smaller words introduces red letters, which when reached bottom, you lose the game. Installation
    ✋Since it's a terminal-based game, it requires a few commands for installation. I advise learning the command line essentails from our terminal basics series.You need to have git installed on your system.
    Use git to clone the official Sausage repository:
    git clone https://gitlab.com/christosangel/sausage.git Switch to the clone directory:
    cd sausageGive execution permission to the install.sh shell script.
    chmod +x install.sh Run the script:
    ./install.sh Once the installation is finished, open Sausage in the same location using:
    ./sausage.sh Essential commands and shortcuts
    📋Sausage needs a 60 Column x 34 Lines terminal to work properly.The interface has all the key combinations described properly. Even the direction of motion is displayed.
    To move without selecting any word, use the arrow key.
    Once a starting word is decided, press the Space/Enter key to select that letter. Now, use the navigation keys to continue selection.
    Navigation Key ↑ (Up) k or Up Arrow ↓ (Down) j or Down Arrow ↗ (Right and Up) L or Shift + Right Arrow ↘ (Right and Down) l or Right Arrow ↖ (Left and Up) H or Shift + Left Arrow ↙ (Left and Down) h or Left Arrow To show all the words, press the b key in the game.
    Show all wordsTo undo a letter select, press the Backspace key. Undo a word selection with the Delete key.
    Select/Unselect lettersPress r key in game to reshuffle. Each reshuffle loses a turn and introduces multiple red cells. Existing red cell drop one cell down.
    Reshuffle in SausageConfiguration
    Limited configuration is possible here. Either manually edit ~/.config/sausage/sausage.config file or use the c key in the game start page.
    Sausage ConfigYou can find more gameplay details on its official GitLab page.
    Removing Sausage
    Technically, you run Sausage from the script itself. Still, initially, it has created a few directories. This screenshot from the official repository shows them:
    So, to 'uninstall' Sausage, you have to remove the cloned repository and if you want to remove the game related files, check the screenshot above and remove them.
    Up for a (word) game?
    If you ever played the classic Bookworm, Sausage will be pure nostalgia. And if you never played that before, it could still be fun to try it f you like these kinds of game.
    It's one of those amusing things you can do in the terminal.
    I let you leave a few words in the comments 😉
  5. by: Abhishek Prakash
    Fri, 16 May 2025 14:25:21 GMT

    Sausage is a word forming game, inspired by the classic Bookworm. Written in bash script, you can use it on any Linux distribution.
    Playing SausageThe goal of the game is simple.
    Earn points by spotting words. Longer word spotting results in coloured letters. Using coloured letters give more points. Smaller words introduces red letters, which when reached bottom, you lose the game. Installation
    ✋Since it's a terminal-based game, it requires a few commands for installation. I advise learning the command line essentails from our terminal basics series.You need to have git installed on your system.
    Use git to clone the official Sausage repository:
    git clone https://gitlab.com/christosangel/sausage.git Switch to the clone directory:
    cd sausageGive execution permission to the install.sh shell script.
    chmod +x install.sh Run the script:
    ./install.sh Once the installation is finished, open Sausage in the same location using:
    ./sausage.sh Essential commands and shortcuts
    📋Sausage needs a 60 Column x 34 Lines terminal to work properly.The interface has all the key combinations described properly. Even the direction of motion is displayed.
    To move without selecting any word, use the arrow key.
    Once a starting word is decided, press the Space/Enter key to select that letter. Now, use the navigation keys to continue selection.
    Navigation Key ↑ (Up) k or Up Arrow ↓ (Down) j or Down Arrow ↗ (Right and Up) L or Shift + Right Arrow ↘ (Right and Down) l or Right Arrow ↖ (Left and Up) H or Shift + Left Arrow ↙ (Left and Down) h or Left Arrow To show all the words, press the b key in the game.
    Show all wordsTo undo a letter select, press the Backspace key. Undo a word selection with the Delete key.
    Select/Unselect lettersPress r key in game to reshuffle. Each reshuffle loses a turn and introduces multiple red cells. Existing red cell drop one cell down.
    Reshuffle in SausageConfiguration
    Limited configuration is possible here. Either manually edit ~/.config/sausage/sausage.config file or use the c key in the game start page.
    Sausage ConfigYou can find more gameplay details on its official GitLab page.
    Removing Sausage
    Technically, you run Sausage from the script itself. Still, initially, it has created a few directories. This screenshot from the official repository shows them:
    So, to 'uninstall' Sausage, you have to remove the cloned repository and if you want to remove the game related files, check the screenshot above and remove them.
    Up for a (word) game?
    If you ever played the classic Bookworm, Sausage will be pure nostalgia. And if you never played that before, it could still be fun to try it f you like these kinds of game.
    It's one of those amusing things you can do in the terminal.
    I let you leave a few words in the comments 😉
  6. by: Abhishek Prakash
    Fri, 16 May 2025 17:00:52 +0530

    In the previous edition, I asked your opinion on the frequency of the newsletters. Out of the all the responses I got, 76% members want it on a weekly basis.
    Since we live in a democratic world, I'll go with the majority here. I hope the rest 24% won't mind seeing the emails once each week ;)
    Here are the highlights of this edition :
    TCP Proxy with socat Out of memory killer explained Nerdlog for better log viewing And regular dose of tips, tutorials and memes 🚀 Elevate Your DevOps Career – Up to 50% OFF!
    This May, the Linux Foundation is offering 50% off on certifications with THRIVE Annual Subscriptions, 40% off on training courses, and 10% off on THRIVE access.
    Top Bundles:
    LFCS + THRIVE — Master Linux Administration CKA + THRIVE — Become a Kubernetes Pro CKAD + THRIVE — Level up Kubernetes Development CKS + THRIVE — Specialize in Kubernetes Security Offer ends May 20, 2025!
    Explore Linux Foundation's 'Mine New Skills' Offer  
     
      This post is for subscribers only
    Subscribe now Already have an account? Sign in
  7. by: Geoff Graham
    Thu, 15 May 2025 12:30:59 +0000

    I was reflecting on what I learned about CSS Carousels recently. There’s a lot they can do right out of the box (and some things they don’t) once you define a scroll container and hide the overflow.
    Hey, isn’t there another fairly new CSS feature that works with scroll regions? Oh yes, that’s Scroll-Driven Animations. Shouldn’t that mean we can trigger an animation while scrolling through the items in a CSS carousel?
    Why yes, that’s exactly what it means. At least in Chrome at the time I’m playing with this:
    CodePen Embed Fallback It’s as straightforward as you might expect: define your keyframes and apply them on the carousel items:
    @keyframes foo { from { height: 0; } to { height: 100%; font-size: calc(2vw + 1em); } } .carousel li { animation: foo linear both; animation-timeline: scroll(inline); } There are more clever ways to animate these things of course. But what’s interesting to me is that this demo now combines CSS Carousels with Scroll-Driven Animations. The only rub is that the demo also slaps CSS Scroll Snapping in there with smooth scrolling, which is effectively wiped out when applying the scroll animation.
    I thought I might work around that with a view() timeline instead. That certainly makes for a smoother animation that is applied to each carousel item as they scroll into view, but no dice on smooth scrolling.
    CodePen Embed Fallback Scroll-Driven Animations Inside a CSS Carousel originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
  8. by: LHB Community
    Thu, 15 May 2025 15:44:09 +0530

    A TCP proxy is a simple but powerful tool that sits between a client and a server and is responsible for forwarding TCP traffic from one location to another. It can be used to redirect requests or provide access to services located behind a firewall or NAT. socat is a handy utility that lets you establish bidirectional data flow between two endpoints. Let's see how you can use it to set up a TCP proxy.
    A lightweight and powerful TCP proxy tool is socat (stands for "SOcket CAT)". It establishes a bidirectional data flow between two endpoints. These endpoints can be of many types, such as TCP, UDP, UNIX sockets, files, and even processes.
    As a former developer and sysadmin, I can't count the number of times I've used socat, and it's often saved me hours of troubleshooting.🤯
    Whether it's testing a service behind the company firewall, redirecting traffic between local development environments, or simply trying to figure out why one container isn't communicating with another. It's one of those tools that, once you understand what it can do, is amazing. How many problems can be solved with just one line of command?
    In this tutorial, you will learn how to build a basic TCP proxy using socat. By the end of the tutorial, you'll have a working configuration that listens on a local port and forwards incoming traffic to a remote server or service. This is a fast and efficient way to implement traffic proxying without resorting to more complex tools.
    Let's get started!
    Prerequisites
    This tutorial assumes you have a basic knowledge of TCP/IP networks. 
    # Debian/Ubuntu sudo apt-get install socat # macOS (Homebrew) brew install socatUnderstanding the basic socat command syntax
    Here’s the basic socat syntax:
    socat <source> <destination>These addresses can be in the following format:
    TCP4-LISTEN:<port> TCP4-<host>:<port> The point is: all you have to do is tell socat “where to receive the data from” and “where to send the data to,” and it will automatically do the forwarding in both directions.
    Setting up a basic TCP proxy
    Let’s say you have a TCP server working on localhost (loopback interface). Maybe some restrictions prevent you from modifying the application to launch it on a different interface. Now, there’s a scenario where you need to access the service from another machine in the LAN network. Socat comes to the rescue.
    Example 1: Tunneling Android ADB
    First, we established a connection with the Android device via ADB, and then we restart the adb daemon in TCP/IP mode.
    adb devices adb tcpip 5555On some devices, running this adb tcpip 5555 command will expose the service on LAN interface, but in my setup, it doesn’t. So, I decided to use Socat.
    socat tcp4-listen:5555,fork,reuseaddr,bind=192.168.1.33 tcp4:localhost:5555A quick reminder, your LAN IP would be different, so adjust the bind value accordingly. You can check all your IPs via ifconfig.
    Example 2: Python server
    We’ll use Python to start a TCP server on the loopback interface just for demonstration purposes. In fact, it will start an HTTP server and serve the contents of the current directory, but under the hood, HTTP is a TCP connection.
    🚧Start this command from a non-sensitive directory.python -m http.server --bind 127.0.0.1This starts an HTTP server on port 8000 by default. Now, let’s verify by opening localhost:8000 in the browser or using a curl request.
    curl http://localhost:8000What if we do curl for the same port, but this time for the IP assigned by the LAN? It’s not working, right?
    socat tcp4-listen:8005,fork,reuseaddr,bind=192.168.1.33 tcp4:localhost:8000Now, establish the connection on port 8005.
    When establishing a connection through the different devices to http://192.168.1.33:8005, you might get a connection refused error because of firewall rules. You can add a firewall rule to access the service in that case.
    You can refer to our tutorial on using UFW to manage firewall for more details. Here are the commands to do the job quickly:
    sudo ufw allow 8005/tcp sudo ufw statusConclusion
    Whether you are proxying between containers or opening services on different ports, socat proves to be a versatile and reliable tool. If you need a quick and easy proxy setup, give it a try — you'll be amazed at how well it integrates with your workflow.
    Bhuwan Mishra is a Fullstack developer, with Python and Go as his tools of choice. He takes pride in building and securing web applications, APIs, and CI/CD pipelines, as well as tuning servers for optimal performance. He also has a passion for working with Kubernetes.
  9. by: Abhishek Prakash
    Thu, 15 May 2025 04:47:12 GMT

    An interesting development has taken place as openSUSE has decided to not offer Deepin Desktop anymore over repeated security concerns.
    Deepin Desktop Removed from openSUSE over Security ConcernsopenSUSE is not happy with Deepin Desktop and they have their reasons for that.It's FOSS NewsSourav Rudra💬 Let's see what else you get in this edition
    A new OpenSearch release. GNOME's new default video player. What went down at GrafanaCON 2025. And other Linux news, tips, and, of course, memes! This edition of FOSS Weekly is supported by Aiven for OpenSearch®. ❇️ Supercharge Your Search with Aiven for OpenSearch® – Get $100 Sign-Up Bonus! 🚀
    If you've been searching for a way to effortlessly deploy and manage OpenSearch, I've got great news for you! Aiven for OpenSearch® lets you deploy powerful, fully managed search and analytics clusters across AWS, Google Cloud, DO and Azure – all without the hassle of infrastructure management.
    🔥 Why Choose Aiven for OpenSearch®?
    Streamlined Search Applications – Focus on building, not maintaining. Real-Time Visualization – Instantly visualize your data with OpenSearch Dashboards. 99.99% Uptime – Reliable and always available. Seamless Integrations – Plug into Kafka, Grafana, and more with a few clicks. Sign up using this link and claim a $100 bonus credit to explore and test Aiven for OpenSearch®! 💰
    🔥 Claim Your $100 Credit Now📰 Linux and Open Source News
    OpenSearch 3.0 launched with some major upgrades. The OSU's Open Source Lab has survived its funding woes. GNOME has changed its default video player, opting for a modern offering. Nextcloud has been kneecapped thanks to Google's apathy. GrafanaCON 2025 didn't disappoint, with Grafana 12 and Grafana Assistant making a debut.
    Grafana 12 & Grafana Assistant Making a Debut at GrafanaCON 2025GrafanaCON 2025 was an absolute banger, packed with exciting new launches.It's FOSS NewsSourav Rudra🧠 What We’re Thinking About
    UC Berkley demos that a humanoid robot can be built under $5,000. If it comes in mass-production, are we looking at robotic house helps in the near future?
    You Can Build an Open Source Humanoid Robot for Just $5,000UC Berkley shows an interesting project for the open source and robotics community.It's FOSS NewsGourav Patnaik🧮 Linux Tips, Tutorials and More
    Using VS Code? Have better control on the indentation. Here are a few tips and tweaks for handling message threads in Thunderbird. Don't want a specific package to be updated? It's possible on Debian and Ubuntu. Explore some interesting KDE widgets. Manage your photo collection in Linux with these software.
    9 Best Linux Photo Management SoftwareLooking for a replacement for the good-old Picasa on Linux? Take a look at best photo management applications available for Linux.It's FOSSAnkush Das Desktop Linux is mostly neglected by the industry but loved by the community. For the past 12 years, It's FOSS has been helping people use Linux on their personal computers. And we are now facing the existential threat from AI models stealing our content.
    If you like what we do and would love to support our work, please become It's FOSS Plus member. It costs $24 a year (less than the cost of a burger meal each month) and you get an ad-free reading experience with the satisfaction of helping the desktop Linux community.
    Join It's FOSS Plus 👷 Homelab and Maker's Corner
    Reuse, reinvent, rock out. Abhishek (not me, the other one) shared how he gave his old speakers a new life with this DIY guide:
    How I Turned My Old Hi-Fi Speakers into Bluetooth Ones with Raspberry PiCuriosity, more than sustainability, drove me to add Bluetooth features to my old speakers and thus play Spotify and other players wirelessly through it.It's FOSSAbhishek KumarMy favorite Raspberry Pi case, Pironman 5, has just received an upgrade!
    Pre-order will get you a 25% discount. Check out more on their webpage.
    ✨ Apps Highlight
    RSS Guard is a no-nonsense feed reader app for Linux.
    RSS Guard: A Superb Open Source Feed Reader AppA cross-platform open source feed reader that gets the job done.It's FOSS NewsSourav Rudra📽️ Videos I am Creating for You
    Have fun in the terminal by flying a train.
    Subscribe to It's FOSS YouTube Channel🧩 Quiz Time
    How much knowledge do you have about the Linux kernel? This trivia quiz will test that:
    Kernel Chronicles: Linux kernel InsightsThink you know about the Linux kernel? Answer these questions!It's FOSSAnkush Das💡 Quick Handy Tip
    In Linux Mint Cinnamon panel, you can change the way time is displayed. Just right-click on the time in the panel and select Configure. In the configuration window, enable the "Use a custom date format" option.
    Now, enter your preferred format in the "Date format" and "Date format for tooltip" fields.
    You can click on the "Show information on date format syntax" button, which will lead you to a detailed documentation about available date format options if you feel lost.
    🤣 Meme of the Week
    The hate is real with this one. ☠️
    🗓️ Tech Trivia
    To challenge Intel's 486 dominance in the early 1990s, Texas Instruments (TI) sold their own line of 486 microprocessors. However, these TI-branded chips were actually designed by Cyrix, offering software compatibility at a potentially lower cost, yet ultimately failing to dethrone Intel in the microprocessor market.
    🧑‍🤝‍🧑 FOSSverse Corner
    I recently made a new post, in which I explain the differences between the 2.4G and 5G Wi-Fi bands.
    Difference between 2.4G and 5G WifiNot strictly related to Linux but I recently had an interesting discussion with a not-so-technical friend who confused 2.4G and 5G wifi as 2nd generation and 5th generation. I can see why there is a confusion. Terms like 3G, 4G and 5G got popular due to the rise of smartphones. It is easy to mistake 5G of wifi connection for 5th generation of network. Here’s the thing: In terms of Wi-Fi networks, G in 2.4G and 5G are the frequency unit GHz. It has nothing to with 5th generation of cellular da…It's FOSS Communityabhishek❤️ With love
    Share it with your Linux-using friends and encourage them to subscribe (hint: it's here).
    Share the articles in Linux Subreddits and community forums.
    Follow us on Google News and stay updated in your News feed.
    Opt for It's FOSS Plus membership and support us 🙏
    Enjoy FOSS 😄
  10. by: John Rhea
    Wed, 14 May 2025 14:01:42 +0000

    I recently rebuilt my portfolio (johnrhea.com). After days and days of troubleshooting and fixing little problems on my local laptop, I uploaded my shiny new portfolio to the server — and triumphantly watched it not work at all…
    The browser parses and runs JavaScript, right? Maybe Chrome will handle something a little different from Firefox, but if the same code is on two different servers it should work the same in Chrome (or Firefox) no matter which server you look at, right? Right?
    First, the dynamically generated stars wouldn’t appear and when you tried to play the game mode, it was just blank. No really terrible website enemies appeared, nor could they shoot any bad experience missiles at you, at least, not in the game mode, but I guess my buggy website literally sent a bad experience missile at you. Over on the page showing my work, little cars were supposed to zoom down the street, but they didn’t show up, either.
    Let me tell you, there was no crying or tears of any kind. I was very strong and thrilled, just thrilled, to accept the challenge of figuring out what was going on. I frantically googled things like “What could cause JavaScript to act differently on two servers?”, “Why would a server change how JavaScript works?”, and “Why does everyone think I’m crying when I’m clearly not?” But to no avail.
    There were some errors in the console, but not ones that made sense. I had an SVG element that we’ll call car (because that’s what I named it). I created it in vanilla JavaScript, added it to the page, and zoomed it down the gray strip approximating a street. (It’s a space theme where you can explore planets. It’s really cool. I swear.) I was setting transforms on car using car.style.transform and it was erroring out. car.style was undefined.
    I went back to my code on my laptop. Executes flawlessly. No errors.
    To get past the initial error, I switched it from car.style to using setAttribute e.g. car.setAttribute('style', 'transform: translate(100px, 200px)');. This just got me to the next error. car was erroring out on some data-* attributes I was using to hold information about the car, e.g. car.dataset.xspeed would also come back undefined when I tried to access them. This latter technology has been supported in SVG elements since 2015, yet it was not working on the server, and worked fine locally. What the Hoobastank could be happening? (Yes, I’m referencing the 1990s band and, no, they have nothing to do with the issue. I just like saying… errr… writing… their name.)
    With search engines not being much help (mostly because the problem isn’t supposed to exist), I contacted my host thinking maybe some kind of server configuration was the issue. The very polite tech tried to help, checking for server errors and other simple misconfigurations, but there were no issues he could find. After reluctantly serving as my coding therapist and listening to my (tearless) bemoaning of ever starting a career in web development, he basically said they support JavaScript, but can’t really go into custom code, so best of luck. Well, thanks for nothing, person whom I will call Truckson! (That’s not his real name, but I thought “Carson” was too on the nose.)
    Next, and still without tears, I tried to explain my troubles to ChatGPT with the initial prompt: “Why would JavaScript on two different web servers act differently?” It was actually kind of helpful with a bunch of answers that turned out to be very wrong.
    Maybe there was an inline SVG vs SVG in an img issue? That wasn’t it. Could the browser be interpreting the page as plain text instead of HTML through some misconfiguration? Nope, it was pulling down HTML, and the headers were correct. Maybe the browser is in quirks mode? It wasn’t. Could the SVG element be created incorrectly? You can’t create an SVG element in HTML using document.createElement('svg') because SVG actually has a different namespace. Instead, you have to use document.createElementNS("http://www.w3.org/2000/svg", 'svg'); because SVG and HTML use similar, but very different, standards. Nope, I’d used the createElementNS function and the correct namespace. Sidenote: At several points during the chat session, ChatGPT started replies with, “Ah, now we’re getting spicy 🔥” as well as, “Ah, this is a juicy one. 🍇” (emojis included). It also used the word “bulletproof” a few times in what felt like a tech-bro kind of way. Plus there was a “BOOM. 💥 That’s the smoking gun right there”, as well as an “Ahhh okay, sounds like there’s still a small gremlin in the works.” I can’t decide whether I find this awesome, annoying, horrible, or scary. Maybe all four?
    Next, desperate, I gave our current/future robot overlord some of my code to give it context and show it that none of these were the issue. It still harped on the misconfiguration and kept having me output things to check if the car element was an SVG element. Again, locally it was an SVG element, but on the server it came back that it wasn’t.
    Maybe using innerHTML to add some SVG elements to the car element garbled the car element into not being an SVG element? ChatGPT volunteered to rewrite a portion of code to fix this. I put the new code into my system. It worked locally! Then I uploaded it to the server and… no dice. Same error was still happening. I wept openly. I mean… I swallowed my emotions in a totally healthy and very manly way. And that’s the end of the article, no redemption, no solution, no answer. Just a broken website and the loud sobs of a man who doesn’t cry… ever…
    …You still here?
    Okay, you’re right. You know I wouldn’t leave you hanging like that. After the non-existent sob session, I complained to ChatGPT, it again gave me some console logs including having the car element print out its namespace and that’s when the answer came to me. You see the namespace for an SVG is this:
    http://www.w3.org/2000/svg What it actually printed was this:
    https://www.w3.org/2000/svg One letter. That’s the difference.
    Normally you want everything to be secure, but that’s not really how namespaces work. And while the differences between these two strings is minimal, I might as well have written document.createElementNS("Gimme-them-SVGzers", "svg");. Hey, W3C, can I be on the namespace committee?
    But why was it different? You’d be really mad if you read this far and it was just a typo in my code. Right?
    You’ve invested some time into this article, and I already did the fake-out of having no answer. So, having a code typo would probably lead to riots in the streets and hoards of bad reviews.
    Don’t worry. The namespace was correct in my code, so where was that errant “s” coming from?
    I remembered turning on a feature in my host’s optimization plugin: automatically fix insecure pages. It goes through and changes insecure links to secure ones. In 99% of cases, it’s the right choice. But apparently it also changes namespace URLs in JavaScript code.
    I turned that feature off and suddenly I was traversing the galaxy, exploring planets with cars zooming down gray pseudo-elements, and firing lasers at really terrible websites instead of having a really terrible website. There were no tears (joyful or otherwise) nor were there celebratory and wildly embarrassing dance moves that followed.
    Have a similar crazy troubleshooting issue? Have you solved an impossible problem? Let me know in the comments.
    This Isn’t Supposed to Happen: Troubleshooting the Impossible originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
  11. by: Abhishek Kumar
    Wed, 14 May 2025 03:14:27 GMT

    Indentation is how code is visually spaced. It helps define structure, scope, and readability. For example, Python requires indentation to define blocks of code.
    Other languages might not require it, but messy indentation can make code really hard to read (and debug). Common indentation styles include:
    2 spaces (popular in JS, HTML, CSS) 4 spaces (common in Python, Java) Tabs (some devs swear by them) VS Code lets you customize indentation per file, per language, or globally.
    Let’s explore all the ways to tweak that!
    1. Change indentation via the status bar (per-file basis)
    This is the easiest method and perfect when you're editing just one file.
    Open a file in VS Code. Look at the bottom-right corner of the window. You’ll see something like Spaces: 4 or Tab Size: 4. Click that label, a menu pops up! Now, you can choose:
    Indent Using Tabs Indent Using Spaces And below that, choose how many spaces (2, 4, 8 - up to you).
    Just changing the indentation setting doesn’t automatically re-indent the whole file. You’ll want to reformat the document too.
    Here’s how:
    Press Ctrl + Shift + P (Linux/Windows) or Cmd + Shift + P (macOS). Type Format Document and select it. Or use the shortcut:Ctrl + Shift + I on Linux Shift + Alt + F on Windows Shift + Option + F on macOS Boom! The file gets prettied up with your chosen indentation.
    2. Set global indentation in user settings
    Want to make your indentation choice apply to all new files in VS Code? Here’s how:
    Open Command Palette with Ctrl + Shift + P or F1. Type Preferences: Open User Settings. In the Settings UI, search for Tab Size and set it (e.g., 4). Then search Insert Spaces and make sure it’s checked. This tells VS Code:
    Also check for Detect Indentation, if it’s ON, VS Code will override your settings based on the file content. Disable it if you want consistency across files.
    3. Set project-specific indentation (Workspace settings)
    Maybe you want different indentation just for one project, not globally.
    Open the project folder in VS Code. Go to the Command Palette and select Preferences: Open Workspace Settings. Switch to the Workspace tab. Search and set the same Tab Size, Insert Spaces, and Detect Indentation options. These get saved inside your project’s .vscode/settings.json file.
    Perfect if you want 2-space indentation in a JS project but 4 spaces in a Python project you're working on separately.
    4. Set indentation based on programming language
    Now, here's the power-user move. Let’s say you want:
    4 spaces for Python 2 spaces for JavaScript and TypeScript Easy!
    Open the Command Palette → Preferences: Open User Settings (JSON) Add this snippet: "[python]": { "editor.tabSize": 4 }, "[javascript]": { "editor.tabSize": 2 }, "[typescript]": { "editor.tabSize": 2 } This overrides the indentation per language.
    You can find all language identifiers in the VS Code docs if you want to customize more.
    You can also drop this into your .vscode/settings.json file if you want project-level overrides.
    Bonus Tip: Convert tabs to spaces (and vice versa)
    Already working on a file but the indentation is inconsistent?
    Open the Command Palette → Type Convert Indentation Choose either:Convert Indentation to Spaces Convert Indentation to Tabs You can also do this from the status bar at the bottom.
    If you need to convert all tabs in the file to spaces:
    Press Ctrl + F Expand the search box Enable Regex (.* icon) Search for \t and replace it with two or four spaces Wrapping up
    Like word wrapping in VS Code, indentation may seem like a small thing, but it's one of the cornerstones of clean, readable code.
    Whether you're coding solo or collaborating on big projects, being consistent with indentation helps avoid annoying bugs (especially in Python!) and keeps the codebase friendly for everyone.
    VS Code makes it super easy to control indentation your way, whether you want to set it globally, per project, or even per language.
    We’ll be back soon with another helpful tip in our VS Code series.
  12. by: Chris Coyier
    Mon, 12 May 2025 17:00:57 +0000

    Sometimes we gotta get into the unglamorous parts of CSS. I mean *I* think they are pretty glamorous: new syntax, new ideas, new code doing foundational and important things. I just mean things that don’t demo terribly well. Nothing is flying across the screen, anyway.
    The Future of CSS: Construct <custom-ident> and <dashed-ident> values with ident() by Bramus Van Damme — When you go anchor-name: --name; the --name part is a custom property, right? No. It is a “custom ident”. It doesn’t have a value, it’s just a name. Things get more interesting with ident() as a function, which can help us craft them from other attributes and custom properties, making for much less repetitive code in some situations. Beating !important user agent styles (sort of) by Noah Liebman — Using !important is a pretty hardcore way for a rule to apply, made even more hardcore when used by a low level stylesheet, of which user agent styles are the lowest. So is it even possible to beat a style set that way? Click to find out. Here’s Why Your Anchor Positioning Isn’t Working by James Stuckey Weber — There is a whole host of reasons why including DOM positioning and order. If you ask Una she’ll say it’s probably the inset property. Faux Containers in CSS Grids by Tyler Sticka — Elements that stick out of their “container” is a visually compelling look. A classic way to do it is with negative margins and absolute positioning and the like. But those things are a smidge “dangerous” in that they can cause overlaps and unexpected behavior due to being out of regular flow. I like Tyler’s idea here of keeping it all contained to a grid and just making it look like it’s breaking out. Introducing @bramus/style-observer, a MutationObserver for CSS by Bramus Van Damme — A regular MutationObserver watches the DOM for changes. But not style changes. Bramus has created a version of it that does, thanks to a very newfangled CSS property that helps it work efficiently. I’m not overflowing with use case ideas, but I have a feeling that when you need it, you need it. Using the upcoming CSS when/else rules by Christiana Uloma — There is a working draft spec for @when/@else so while these aren’t real right now, maybe they will be? The if() function seems more real and maybe that is enough here? The if() function would just be a value though not a whole block of stuff, so maybe we’ll get both.
  13. by: Ryan Trimble
    Mon, 12 May 2025 12:42:10 +0000

    Friends, I’ve been on the hunt for a decent content management system for static sites for… well, about as long as we’ve all been calling them “static sites,” honestly.
    I know, I know: there are a ton of content management system options available, and while I’ve tested several, none have really been the one, y’know? Weird pricing models, difficult customization, some even end up becoming a whole ‘nother thing to manage.
    Also, I really enjoy building with site generators such as Astro or Eleventy, but pitching Markdown as the means of managing content is less-than-ideal for many “non-techie” folks.
    A few expectations for content management systems might include:
    Easy to use: The most important feature, why you might opt to use a content management system in the first place. Minimal Requirements: Look, I’m just trying to update some HTML, I don’t want to think too much about database tables. Collaboration: CMS tools work best when multiple contributors work together, contributors who probably don’t know Markdown or what GitHub is. Customizable: No website is the same, so we’ll need to be able to make custom fields for different types of content. Not a terribly long list of demands, I’d say; fairly reasonable, even. That’s why I was happy to discover Pages CMS.
    According to its own home page, Pages CMS is the “The No-Hassle CMS for Static Site Generators,” and I’ll to attest to that. Pages CMS has largely been developed by a single developer, Ronan Berder, but is open source, and accepting pull requests over on GitHub.
    Taking a lot of the “good parts” found in other CMS tools, and a single configuration file, Pages CMS combines things into a sleek user interface.
    Pages CMS includes lots of options for customization, you can upload media, make editable files, and create entire collections of content. Also, content can have all sorts of different fields, check the docs for the full list of supported types, as well as completely custom fields.
    There isn’t really a “back end” to worry about, as content is stored as flat files inside your git repository. Pages CMS provides folks the ability to manage the content within the repo, without needing to actually know how to use Git, and I think that’s neat.
    User Authentication works two ways: contributors can log in using GitHub accounts, or contributors can be invited by email, where they’ll receive a password-less, “magic-link,” login URL. This is nice, as GitHub accounts are less common outside of the dev world, shocking, I know.
    Oh, and Pages CMS has a very cheap barrier for entry, as it’s free to use.
    Pages CMS and Astro content collections
    I’ve created a repository on GitHub with Astro and Pages CMS using Astro’s default blog starter, and made it available publicly, so feel free to clone and follow along.
    I’ve been a fan of Astro for a while, and Pages CMS works well alongside Astro’s content collection feature. Content collections make globs of data easily available throughout Astro, so you can hydrate content inside Astro pages. These globs of data can be from different sources, such as third-party APIs, but commonly as directories of Markdown files. Guess what Pages CMS is really good at? Managing directories of Markdown files!
    Content collections are set up by a collections configuration file. Check out the src/content.config.ts file in the project, here we are defining a content collection named blog:
    import { glob } from 'astro/loaders'; import { defineCollection, z } from 'astro:content'; const blog = defineCollection({ // Load Markdown in the `src/content/blog/` directory. loader: glob({ base: './src/content/blog', pattern: '**/*.md' }), // Type-check frontmatter using a schema schema: z.object({ title: z.string(), description: z.string(), // Transform string to Date object pubDate: z.coerce.date(), updatedDate: z.coerce.date().optional(), heroImage: z.string().optional(), }), }); export const collections = { blog }; The blog content collection checks the /src/content/blog directory for files matching the **/*.md file type, the Markdown file format. The schema property is optional, however, Astro provides helpful type-checking functionality with Zod, ensuring data saved by Pages CMS works as expected in your Astro site.
    Pages CMS Configuration
    Alright, now that Astro knows where to look for blog content, let’s take a look at the Pages CMS configuration file, .pages.config.yml:
    content: - name: blog label: Blog path: src/content/blog filename: '{year}-{month}-{day}-{fields.title}.md' type: collection view: fields: [heroImage, title, pubDate] fields: - name: title label: Title type: string - name: description label: Description type: text - name: pubDate label: Publication Date type: date options: format: MM/dd/yyyy - name: updatedDate label: Last Updated Date type: date options: format: MM/dd/yyyy - name: heroImage label: Hero Image type: image - name: body label: Body type: rich-text - name: site-settings label: Site Settings path: src/config/site.json type: file fields: - name: title label: Website title type: string - name: description label: Website description type: string description: Will be used for any page with no description. - name: url label: Website URL type: string pattern: ^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\/[^\s]*)?$ - name: cover label: Preview image type: image description: Image used in the social preview on social networks (e.g. Facebook, Twitter...) media: input: public/media output: /media There is a lot going on in there, but inside the content section, let’s zoom in on the blog object.
    - name: blog label: Blog path: src/content/blog filename: '{year}-{month}-{day}-{fields.title}.md' type: collection view: fields: [heroImage, title, pubDate] fields: - name: title label: Title type: string - name: description label: Description type: text - name: pubDate label: Publication Date type: date options: format: MM/dd/yyyy - name: updatedDate label: Last Updated Date type: date options: format: MM/dd/yyyy - name: heroImage label: Hero Image type: image - name: body label: Body type: rich-text We can point Pages CMS to the directory we want to save Markdown files using the path property, matching it up to the /src/content/blog/ location Astro looks for content.
    path: src/content/blog For the filename we can provide a pattern template to use when Pages CMS saves the file to the content collection directory. In this case, it’s using the file date’s year, month, and day, as well as the blog item’s title, by using fields.title to reference the title field. The filename can be customized in many different ways, to fit your scenario.
    filename: '{year}-{month}-{day}-{fields.title}.md' The type property tells Pages CMS that this is a collection of files, rather than a single editable file (we’ll get to that in a moment).
    type: collection In our Astro content collection configuration, we define our blog collection with the expectation that the files will contain a few bits of meta data such as: title, description, pubDate, and a few more properties.
    We can mirror those requirements in our Pages CMS blog collection as fields. Each field can be customized for the type of data you’re looking to collect. Here, I’ve matched these fields up with the default Markdown frontmatter found in the Astro blog starter.
    fields: - name: title label: Title type: string - name: description label: Description type: text - name: pubDate label: Publication Date type: date options: format: MM/dd/yyyy - name: updatedDate label: Last Updated Date type: date options: format: MM/dd/yyyy - name: heroImage label: Hero Image type: image - name: body label: Body type: rich-text Now, every time we create a new blog item in Pages CMS, we’ll be able to fill out each of these fields, matching the expected schema for Astro.
    Aside from collections of content, Pages CMS also lets you manage editable files, which is useful for a variety of things: site wide variables, feature flags, or even editable navigations.
    Take a look at the site-settings object, here we are setting the type as file, and the path includes the filename site.json.
    - name: site-settings label: Site Settings path: src/config/site.json type: file fields: - name: title label: Website title type: string - name: description label: Website description type: string description: Will be used for any page with no description. - name: url label: Website URL type: string pattern: ^(https?:\/\/)?(www\.)?[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}(\/[^\s]*)?$ - name: cover label: Preview image type: image description: Image used in the social preview on social networks (e.g. Facebook, Twitter...) The fields I’ve included are common site-wide settings, such as the site’s title, description, url, and cover image.
    Speaking of images, we can tell Pages CMS where to store media such as images and video.
    media: input: public/media output: /media The input property explains where to store the files, in the /public/media directory within our project.
    The output property is a helpful little feature that conveniently replaces the file path, specifically for tools that might require specific configuration. For example, Astro uses Vite under the hood, and Vite already knows about the public directory and complains if it’s included within file paths. Instead, we can set the output property so Pages CMS will only point image path locations starting at the inner /media directory instead.
    To see what I mean, check out the test post in the src/content/blog/ folder:
    --- title: 'Test Post' description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.' pubDate: 05/03/2025 heroImage: '/media/blog-placeholder-1.jpg' --- The heroImage now property properly points to /media/... instead of /public/media/....
    As far as configurations are concerned, Pages CMS can be as simple or as complex as necessary. You can add as many collections or editable files as needed, as well as customize the fields for each type of content. This gives you a lot of flexibility to create sites!
    Connecting to Pages CMS
    Now that we have our Astro site set up, and a .pages.config.yml file, we can connect our site to the Pages CMS online app. As the developer who controls the repository, browse to https://app.pagescms.org/ and sign in using your GitHub account.
    You should be presented with some questions about permissions, you may need to choose between giving access to all repositories or specific ones. Personally, I chose to only give access to a single repository, which in this case is my astro-pages-cms-template repo.
    After providing access to the repo, head on back to the Pages CMS application, where you’ll see your project listed under the “Open a Project” headline.
    Clicking the open link will take you into the website’s dashboard, where we’ll be able to make updates to our site.
    Creating content
    Taking a look at our site’s dashboard, we’ll see a navigation on the left side, with some familiar things.
    Blog is the collection we set up inside the .pages.config.yml file, this will be where we we can add new entries to the blog. Site Settings is the editable file we are using to make changes to site-wide variables. Media is where our images and other content will live. Settings is a spot where we’ll be able to edit our .pages.config.yml file directly. Collaborators allows us to invite other folks to contribute content to the site. We can create a new blog post by clicking the Add Entry button in the top right
    Here we can fill out all the fields for our blog content, then hit the Save button.
    After saving, Pages CMS will create the Markdown file, store the file in the proper directory, and automatically commit the changes to our repository. This is how Pages CMS helps us manage our content without needing to use git directly.
    Automatically deploying
    The only thing left to do is set up automated deployments through the service provider of your choice. Astro has integrations with providers like Netlify, Cloudflare Pages, and Vercel, but can be hosted anywhere you can run node applications.
    Astro is typically very fast to build (thanks to Vite), so while site updates won’t be instant, they will still be fairly quick to deploy. If your site is set up to use Astro’s server-side rendering capabilities, rather than a completely static site, the changes might be much faster to deploy.
    Wrapping up
    Using a template as reference, we checked out how Astro content collections work alongside Pages CMS. We also learned how to connect our project repository to the Pages CMS app, and how to make content updates through the dashboard. Finally, if you are able, don’t forget to set up an automated deployment, so content publishes quickly.
    Using Pages CMS for Static Site Content Management originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
  14. by: LHB Community
    Mon, 12 May 2025 10:43:21 +0530

    Automating tasks is great, but what's even better is knowing when they're done or if they've gotten derailed.
    Slack is a popular messaging tool used by many techies. And it supports bots that you can configure to get automatic alerts about things you care about.
    Web server is down? Get an alert. Shell script completes running? Get an alert.
    Yes, that could be done too. By adding Slack notifications to your shell scripts, you can share script outcomes with your team effortlessly and respond quickly to issues and stay in the loop without manual checks. It lets you monitor automated tasks without constantly checking logs. 
    🚧I am assuming you already use Slack and you have a fair idea about what a Slack Bot is. Of course, you should have at least basic knowledge of Bash scripting.The Secret Sauce: curl and Webhooks
    The magic behind delivering Slack notifications from shell scripts is Slack's Incoming Webhooks and the curl command line tool.
    Basically, everything is already there for you to use, it just needs some setup for connections. I found it pretty easy, and I'm sure you will too.
    Here are the details for what webhooks and the command line tool is for:  
    Incoming Webhooks: Slack allows you to create unique Webhook URLs for your workspace that serve as endpoints for sending HTTP POST requests containing messages.   curl: This powerful command-line tool is great for making HTTP requests. We'll use it to send message-containing JSON payloads to Slack webhook URLs. Enabling webhooks on Slack side
    Create a Slack account (if you don't have it already) and (optionally) create a Slack workspace for testing. Go to api.slack.com/apps and create a new app. Open the application and, under the “Features” section, click on “Incoming Webhooks” and “Activate Incoming Webhooks”. Under the same section, scroll to the bottom. You’ll find a button “Add New Webhook to Workspace”. Click on it and add the channel. Test the sample CURL request.  Important: The CURL command you see above also has the webhook URL. Notice that https://hooks.slack.com/services/xxxxxxxxxxxxx things? Note it down.
    Sending Slack notifications from shell scripts
    Set SLACK_WEBHOOK_URL environment variable in your .bashrc file as shown below.
    Use the webhook URL you got from Slack in the previous stepCreate a new file, notify_slack.sh, under your preferred directory location.
    # Usage: notify_slack "text message" # Requires: SLACK_WEBHOOK_URL environment variable to be set notify_slack() {     local text="$1"     curl -s -X POST -H 'Content-type: application/json' \         --data "{\"text\": \"$text\"}" \         "$SLACK_WEBHOOK_URL" }Now, you can simply source this bash script wherever you need to notify Slack. I created a simple script to check disk usage and CPU load.
    source ~/Documents/notify_slack.sh  disk_usage=$(df -h / | awk 'NR==2 {print $5}') # Get CPU load average cpu_load=$(uptime | awk -F'load average:' '{ print $2 }' | cut -d',' -f1 | xargs) hostname=$(hostname) message="*System Status Report - $hostname*\n* Disk Usage (/): $disk_usage\n* CPU Load (1 min): $cpu_load" # Send the notification notify_slack "$message"Running this script will post a new message on the Slack channel associated with the webhook.
    Best Practices 
    It is crucial to think about security and limitations when you are integrating things, no matter how insignificant you think it is. So, to avoid common pitfalls, I recommend you to follow these two tips:
    Avoid direct hardware encoding in publicly shared scripts. Consider using environment variables or configuration files. Be aware of Slack's rate limitation for incoming webhooks, especially if your scripts may trigger notifications frequently. You may want to send notifications only in certain circumstances (for example, only on failure or only for critical scripts). Conclusion
    What I shared here was just a simple example. You can utilize cron in the mix and periodically send notifications about server stats to Slack. You put in some logic to get notified when disk usage reaches a certain stage.
    There can be many more use cases and it is really up to you how you go about using it. With the power of Incoming Webhooks and curl, you can easily deliver valuable information directly to your team's communication center. Happy scripting!
    Bhuwan Mishra is a Fullstack developer, with Python and Go as his tools of choice. He takes pride in building and securing web applications, APIs, and CI/CD pipelines, as well as tuning servers for optimal performance. He also has a passion for working with Kubernetes.
  15. by: Abhishek Kumar
    Sat, 10 May 2025 06:49:14 GMT

    Sometimes I do weird things for the sake of it. Like once, I used Raspberry Pi as a WiFi extender for fun. This is one of those stories.
    I had an old pair of hi-fi speakers gathering dust in a forgotten corner of the house.
    The only problem? They needed a Bluetooth dongle and DAC to work, and I didn’t have either. But with my love for DIY and a determination to salvage my musical aspirations, I decided to take a different route.
    I thought of giving my old speakers a new life by if converting them into Bluetooth speakers. In this article, I’ll take you through my journey of reviving these old speakers.
    From putting together a DAC, connecting both speakers, and grappling with my first soldering iron (spoiler: it wasn’t pretty), to finally using my old Raspberry Pi 3 as the brains behind a fully functional Bluetooth speaker system.
    It wasn’t perfect, but the experience taught me a lot and gave me a setup that delivers impressive sound without spending a fortune.
    Let’s dive into the details!
    What I used
    I gathered a mix of new and existing components. Here’s everything I used for this project:
    Two Hi-Fi Speakers: These were the stars of the show— old obviously that had been lying unused for years. Their sound potential was too good to ignore, and this project was all about giving them a second chance.
    Yep, I forgot to clean the speakers before capturing this pictureDAC Chipset: A Digital-to-Analog Converter (DAC) was essential to drive the speakers. I used a basic DAC module that supported input from a 3.5mm jack and output for the speakers.
    You need to check your speakers before ordering a DAC for yourself, It provides a stereo output of 30W each and requires 12-24VSoldering Iron: This was my first time using a soldering iron, and let’s just say my initial attempts were far from perfect. I used it to solder the speaker wires to the DAC, which was crucial for connecting the entire system.
    Simple ol' soldering iron, nothing fancy here. It gets the job done.12V 2A Power Supply: To power the DAC, I used a 12V 2A adapter. Make sure your power supply matches the specifications of your DAC module for safe and efficient operation.
    3.5mm Audio Cable: This was used to connect the DAC’s audio output to the Raspberry Pi’s 3.5mm jack.
    Raspberry Pi 3: I used an old Raspberry Pi 3 that I had lying around. Any Raspberry Pi model with a 3.5mm jack will work for this project, but if you have a newer model with HDMI-only output, additional configuration may be required.
    My Raspberry Pi 3With these items in hand, I was ready to transform my speakers into a powerful Bluetooth system.
    If you’re planning to try or follow along this project, you should likely already have some of these components at home, making it a cost-effective way to repurpose old equipment.
    Connecting the DAC with the Speakers
    The DAC I ordered didn’t come with convenient connectors, so I had to get my hands dirty—literally.
    I rummaged through my dad’s toolbox and found an old soldering iron, which I hadn’t used before. After watching a couple of quick tutorials online, I felt brave enough to give it a shot.
    Soldering the speaker wires to the DAC wasn’t as straightforward as I had imagined. But after a few tries, and a lot of patience, I managed to secure the wires in place.
    Here's you can see my exceptional soldering skills Before closing the speaker lids, I decided to test the connection directly. I powered up the DAC, connected it to the speakers, and played some music through a temporary audio input.
    To my relief, sound filled the room. It wasn’t perfect yet, but it was enough to confirm that my soldering job worked.
    With the DAC connected, I was ready to move on to the next part of the build!
    Adding Bluetooth functionality with Raspberry Pi
    There are countless guides and projects for turning a Raspberry Pi into a Bluetooth receiver, but I stumbled upon a GitHub project that stood out for its simplicity. It is called Raspberry Pi Audio Receiver.
    The project had a script that automated the entire setup process, including installing all necessary dependencies. Here’s how I did it:
    Download the Installation Script
    First, I downloaded the script directly from the GitHub repository:
    wget https://raw.githubusercontent.com/nicokaiser/rpi-audio-receiver/main/install.shRun the Script
    bash install.shFor first-timers or DIY enthusiasts new to this, the installation screen might seem a bit overwhelming. You’ll be prompted several times to install various components and make decisions about the setup.
    Don’t worry, I’ll break down what’s happening so you can follow along with confidence.
    Hostname:
    The script lets you set up the hostname (the internal name for your Raspberry Pi) and a visible device name (referred to as the "pretty hostname").

    This visible name is what other devices will see when connecting via Bluetooth, AirPlay, or Spotify Connect. For example, you could name it something like DIY-Speakers.
    Bluetooth Configuration:
    The script installs Bluetooth-related packages and sets up an agent to accept all incoming connections.

    The Pi is configured to play audio via ALSA (Advanced Linux Sound Architecture), and a smart script disables Bluetooth discoverability whenever the Pi is connected to a device.
    AirPlay 2 Setup:
    This feature installs Shairport Sync, allowing the Raspberry Pi to act as an AirPlay 2 receiver. It’s perfect for Apple users who want to stream music directly from their devices.
    Spotify Connect:
    Finally, the script installs Raspotify, an open-source Spotify client for Raspberry Pi. This enables the Raspberry Pi to act as a Spotify Connect device, letting you stream music straight from the Spotify app on your phone or computer.
    Each step is straightforward, but you’ll need to be present during the installation to approve certain steps and provide input.
    This process takes about 5 minutes to complete, but once done, your Raspberry Pi transforms into a multi-functional audio receiver, supporting Bluetooth, AirPlay 2, and Spotify Connect.
    Testing the DIY Bluetooth speakers
    With the hardware setup complete and the Raspberry Pi configured as a Bluetooth audio receiver, it was time for the moment of truth - testing the DIY speakers.
    The goal was to see how well this entire setup performed and whether all the effort I put in was worth it.
    To test the system, I decided to connect the speakers to my smartphone via Bluetooth.
    Sorry for the image quality, had to use an old phone to capture this imageAfter pairing, I opened my music app and selected a random song to play. The sound flowed seamlessly through the speakers.
    I’ll admit, hearing music come out of the old hi-fi speakers felt incredibly rewarding. It was proof that all the soldering, scripting, and configuring had paid off.
    How did It perform?
    Audio Quality: The sound quality was surprisingly good for a DIY setup. The DAC delivered clear audio with no noise, and the hi-fi speakers held up well despite being unused for a long time. Bluetooth Range: The range was decent since my Pi is in this plastic enclosure, I could move around my room and still maintain a stable connection. Responsiveness: There was no noticeable delay or lag in audio playback, whether I streamed music or used Spotify Connect. Final thoughts
    This project was a blend of frustration, curiosity, and pure DIY joy. What started as an attempt to salvage some old, forgotten hi-fi speakers turned into a rewarding learning experience.
    From figuring out how to solder for the first time (and not doing a great job) to repurposing my old Raspberry Pi 3 as a Bluetooth receiver, every step had its challenges but that’s what made it so satisfying.
    The best part? Hearing music blast through those old speakers again, knowing I brought them back to life with a bit of effort and creativity.
    It’s proof that you don’t always need to spend a fortune to enjoy modern tech; sometimes, all it takes is what you already have lying around and a willingness to tinker.
    If you’ve got old speakers collecting dust, I highly recommend giving this a shot. It’s not just about the outcome; the journey itself is worth it.

    How I Turned my Raspberry Pi into a Wi-Fi extenderHere is how I re-purposed my Raspberry Pi to a Wi-Fi extender! A good way to spend your weekend with your Raspberry Pi.It's FOSSAbhishek Kumar 💬 And if you did something like this in your home setup, please share it in the comments. I and other readers may get some interesting ideas for the next weekend projects.
  16. by: Abhishek Prakash
    Fri, 09 May 2025 20:17:53 +0530

    In the past few months, some readers have requested to increase the frequency of the newsletter to weekly, instead of bi-monthly.
    What do you think? Are you happy with the current frequency, or do you want these emails each week?
    Also, what would you like to see more? Linux tips, devops tutorials or lesser known tools?
    Your feedback will shape this newsletter. Just hit the reply button. I read and answer to each of them.
    Here are the highlights of this edition :
    TaskCrafter: A YAML-based task scheduler Docker logging guide cdd command (no, that's not a typo) This edition of LHB Linux Digest is supported by ANY.RUN. 🎫 Free Webinar | How SOC Teams Save Time with ANY.RUN: Action Plan
    Trusted by 15,000+ organizations, ANY.RUN knows how to solve SOC challenges. Join team leads, managers, and security pros to learn expert methods on how to:  
    Increase detection of complex attacks   Speed up alert & incident response   Improve training & team coordination   Book your seat for the webinar here.
    How SOC Teams Save Time and Effort with ANY.RUN: Action PlanDiscover expert solutions for SOC challenges, with hands-on lessons to improve detection, triage, and threat visibility with ANY.RUN.  
     
      This post is for subscribers only
    Subscribe now Already have an account? Sign in
  17. by: John Rhea
    Thu, 08 May 2025 12:33:29 +0000

    I recently updated my portfolio at johnrhea.com. (If you’re looking to add a CSS or front-end engineer with storytelling and animation skills to your team, I’m your guy.) I liked the look of a series of planets I’d created for another personal project and decided to reuse them on my new site. Part of that was also reusing an animation I’d built circa 2019, where a moon orbited around the planet.
    Initially, I just plopped the animations into the new site, only changing the units (em units to viewport units using some complicated math that I was very, very proud of) so that they would scale properly because I’m… efficient with my time. However, on mobile, the planet would move up a few pixels and down a few pixels as the moons orbited around it. I suspected the plopped-in animation was the culprit (it wasn’t, but at least I got some optimized animation and an article out of the deal).
    Here’s the original animation:
    CodePen Embed Fallback My initial animation for the moon ran for 60 seconds. I’m folding it inside a disclosure widget because, at 141 lines, it’s stupid long (and, as we’ll see, emphasis on the stupid). Here it is in all its “glory”:
    Open code #moon1 { animation: moon-one 60s infinite; } @keyframes moon-one { 0% { transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; } 5% { transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; } 9.9% { z-index: 2; } 10% { transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; } 15% { transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; } 19.9% { z-index: -1; } 20% { transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; } 25% { transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; } 29.9% { z-index: 2; } 30% { transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; } 35% { transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; } 39.9% { z-index: -1; } 40% { transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; } 45% { transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; } 49.9% { z-index: 2; } 50% { transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; } 55% { transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; } 59.9% { z-index: -1; } 60% { transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; } 65% { transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; } 69.9% { z-index: 2; } 70% { transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; } 75% { transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; } 79.9% { z-index: -1; } 80% { transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; } 85% { transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; } 89.9% { z-index: 2; } 90% { transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; } 95% { transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; } 99.9% { z-index: -1; } 100% { transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; } } If you look at the keyframes in that code, you’ll notice that the 0% to 20% keyframes are exactly the same as 20% to 40% and so on up through 100%. Why I decided to repeat the keyframes five times infinitely instead of just repeating one set infinitely is a decision lost to antiquity, like six years ago in web time. We can also drop the duration to 12 seconds (one-fifth of sixty) if we were doing our due diligence.
    I could thus delete everything from 20% on, instantly dropping the code down to 36 lines. And yes, I realize gains like this are unlikely to be possible on most sites, but this is the first step for optimizing things.
    #moon1 { animation: moon-one 12s infinite; } @keyframes moon-one { 0% { transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; } 5% { transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; } 9.9% { z-index: 2; } 10% { transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; } 15% { transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; } 19.9% { z-index: -1; } 20% { transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; } } Now that we’ve gotten rid of 80% of the overwhelming bits, we can see that there are five main keyframes and two additional ones that set the z-index close to the middle and end of the animation (these prevent the moon from dropping behind the planet or popping out from behind the planet too early). We can change these five points from 0%, 5%, 10%, 15%, and 20% to 0%, 25%, 50%, 75%, and 100% (and since the 0% and the former 20% are the same, we can remove that one, too). Also, since the 10% keyframe above is switching to 50%, the 9.9% keyframe can move to 49.9%, and the 19.9% keyframe can switch to 99.9%, giving us this:
    #moon1 { animation: moon-one 12s infinite; } @keyframes moon-one { 0%, 100% { transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; } 25% { transform: translate(-3.51217391vw, 3.50608696vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; } 49.9% { z-index: 2; } 50% { transform: translate(-5.01043478vw, 6.511304348vw) scale(1); z-index: -1; animation-timing-function: ease-in; } 75% { transform: translate(1.003478261vw, 2.50608696vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; } 99.9% { z-index: -1; } } Though I was very proud of myself for my math wrangling, numbers like -3.51217391vw are really, really unnecessary. If a screen was one thousand pixels wide, -3.51217391vw would be 35.1217391 pixels. No one ever needs to go down to the precision of a ten-millionth of a pixel. So, let’s round everything to the tenth place (and if it’s a 0, we’ll just drop it). We can also skip z-index in the 75% and 25% keyframes since it doesn’t change.
    Here’s where that gets us in the code:
    #moon1 { animation: moon-one 12s infinite; } @keyframes moon-one { 0%, 100% { transform: translate(0, 0) scale(1); z-index: 2; animation-timing-function: ease-in; } 25% { transform: translate(-3.5vw, 3.5vw) scale(1.5); z-index: 2; animation-timing-function: ease-out; } 49.9% { z-index: 2; } 50% { transform: translate(-5vw, 6.5vw) scale(1); z-index: -1; animation-timing-function: ease-in; } 75% { transform: translate(1vw, 2.5vw) scale(0.25); z-index: -1; animation-timing-function: ease-out; } 99.9% { z-index: -1; } } After all our changes, the animation still looks pretty close to what it was before, only way less code:
    CodePen Embed Fallback One of the things I don’t like about this animation is that the moon kind of turns at its zenith when it crosses the planet. It would be much better if it traveled in a straight line from the upper right to the lower left. However, we also need it to get a little larger, as if the moon is coming closer to us in its orbit. Because both translation and scaling were done in the transform property, I can’t translate and scale the moon independently.
    If we skip either one in the transform property, it resets the one we skipped, so I’m forced to guess where the mid-point should be so that I can set the scale I need. One way I’ve solved this in the past is to add a wrapping element, then apply scale to one element and translate to the other. However, now that we have individual scale and translate properties, a better way is to separate them from the transform property and use them as separate properties. Separating out the translation and scaling shouldn’t change anything, unless the original order they were declared on the transform property was different than the order of the singular properties.
    #moon1 { animation: moon-one 12s infinite; } @keyframes moon-one { 0%, 100% { translate: 0 0; scale: 1; z-index: 2; animation-timing-function: ease-in; } 25% { translate: -3.5vw 3.5vw; z-index: 2; animation-timing-function: ease-out; } 49.9% { z-index: 2; } 50% { translate: -5vw 6.5vw; scale: 1; z-index: -1; animation-timing-function: ease-in; } 75% { translate: 1vw 2.5vw; scale: 0.25; animation-timing-function: ease-out; } 99.9% { z-index: -1; } } Now that we can separate the scale and translate properties and use them independently, we can drop the translate property in the 25% and 75% keyframes because we don’t want them placed precisely in that keyframe. We want the browser’s interpolation to take care of that for us so that it translates smoothly while scaling.
    #moon1 { animation: moon-one 12s infinite; } @keyframes moon-one { 0%, 100% { translate: 0 0; scale: 1; z-index: 2; animation-timing-function: ease-in; } 25% { scale: 1.5; animation-timing-function: ease-out; } 49.9% { z-index: 2; } 50% { translate: -5vw 6.5vw; scale: 1; z-index: -1; animation-timing-function: ease-in; } 75% { scale: 0.25; animation-timing-function: ease-out; } 99.9% { z-index: -1; } } CodePen Embed Fallback Lastly, those different timing functions don’t make a lot of sense anymore because we’ve got the browser working for us, and if we use an ease-in-out timing function on everything, then it should do exactly what we want.
    #moon1 { animation: moon-one 12s infinite ease-in-out; } @keyframes moon-one { 0%, 100% { translate: 0 0; scale: 1; z-index: 2; } 25% { scale: 1.5; } 49.9% { z-index: 2; } 50% { translate: -5vw 6.5vw; scale: 1; z-index: -1; } 75% { scale: 0.25; } 99.9% { z-index: -1; } } CodePen Embed Fallback And there you go: 141 lines down to 28, and I think the animation looks even better than before. It will certainly be easier to maintain, that’s for sure.
    But what do you think? Was there an optimization step I missed? Let me know in the comments.
    Orbital Mechanics (or How I Optimized a CSS Keyframes Animation) originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
  18. by: Abhishek Prakash
    Thu, 08 May 2025 05:54:15 GMT

    Rust everywhere! It was included in the Linux kernel code a couple of years ago. And even before that happened, a race started to re-write tools into Rust.
    14 Rust Tools for Linux Terminal DwellersRust-powered tools for the terminal? Here are some of the best options as alternatives to some popular command-line tools!It's FOSSSreenathAnd now it seems that Ubuntu is relying heavily on Rust re-implementations. In the upcoming Ubuntu 25.10, you'll see GNU Coreutils replaced with Rust-based uutils. The classic sudo command will also be replaced by Rust-based sudo-rs.
    Ubuntu 25.10 is Switching to Rust-based SudoThe upcoming Ubuntu release will use sudo-rs instead of sudo.It's FOSS NewsSourav RudraToo much of Rust? What do you think?
    💬 Let's see what else you get in this edition
    Curl saying no to AI slop. Redis returning to its open source roots. Detailed terminal customization video KDE being done with Plasma LTS releases. And other Linux news, tips, and, of course, memes! This edition of FOSS Weekly is supported by AWS Valkey. ❇️ Scale Your Real-Time Apps with Amazon ElastiCache Serverless for Valkey
    What’s Valkey? Valkey is the most permissive open source alternative to Redis stewarded by the Linux Foundation, which means it will always be open source.
    What’s Amazon ElastiCache Serverless for Valkey? It’s a serverless, fully managed caching service delivering microsecond latency performance at 33% lower cost than other supported engines.
    Even better, you can upgrade from ElastiCache for Redis OSS to ElastiCache for Valkey with zero downtime.
    Don’t just take our word for it – customers are already seeing improvements in speed, responsiveness, and cost.
    Try Amazon ElastiCache for Valkey and feel the difference.
    Valkey-, Memcached-, and Redis OSS-Compatible Cache - Amazon ElastiCache Customers - AWSLearn how customers are using Amazon ElastiCache for for their caching needs.Amazon Web Services, Inc.📰 Linux and Open Source News
    KDE Plasma LTS releases are no more. UN ditched Google Forms for this open source solution. AdGuard 1.0 has been released for Linux. Redis is open source again with an OSI approved license. The OSU's Open Source Lab is in urgent need of funding. Grafana 12 and Grafana Assistant were announced at GrafanaCon 2025. Mission Center 1.0 is a release packed with many nice changes.
    Mission Center Hits A 1.0 Release! Making it the Best GUI System Monitor for LinuxMission Center 1.0 is here with a refined interface and many cool features.It's FOSS NewsSourav Rudra🧠 What We’re Thinking About
    AI slop doesn't look like it will stop any time soon, but curl has put a stop to it in its bug bounty program.
    Curl is Done With AI SlopThe curl project is cracking down on low-quality AI-generated bug reports.It's FOSS NewsSourav Rudra🧮 Linux Tips, Tutorials and More
    Ever wondered what is LUKS Encryption? Learn how to enable or disable word wrap in VS Code. Your Logseq setup isn't complete without these 7 plugins. Install DOSBox in Ubuntu to play retro games on a modern Linux system. I have always considered Kazam to be the best screen recorder for Linux. For the past several years, it didn't see any development. But finally, there is Kazam 2.0 with newer features now.
    Record Screen in Ubuntu Linux With Kazam [Beginner’s Guide]This tutorial shows you how to install Kazam screen recorder and explains how to record the screen in Ubuntu. The guide also lists useful shortcuts and handy tips for using Kazam.It's FOSSAbhishek Prakash Why should you opt for It's FOSS Plus membership:
    ✅ Ad-free reading experience
    ✅ Badges in the comment section and forum
    ✅ Supporting creation of educational Linux materials
    Join It's FOSS Plus 👷 Homelab and Maker's Corner
    I review SunFounder's 10-inch DIY touch screen display.
    SunFounder Touchscreen review: Add a Premium Touch to Your SBCTransform your Raspberry Pi into a versatile interactive device with SunFounder’s 10-inch touchscreen. Here’s my experience with this device.It's FOSSAbhishek Prakash🎟️ Free Webinar | How SOC Teams Save Time with ANY.RUN: Action Plan
    Trusted by 15,000+ organizations, ANY.RUN knows how to solve SOC challenges. Join team leads, managers, and security pros to learn expert methods on how to:  
    Increase detection of complex attacks   Speed up alert & incident response   Improve training & team coordination   Tune in to the LIVE webinar on May 14, 3:00 PM GMT ✨ Apps Highlight
    Don't get lost in words, install this open source dictionary app to always have a dependable resource at hand.
    freeDictionaryApp: Open Source Android App That Helps You Get Information on a WordAn easy way to get additional information about a word!It's FOSS NewsSourav Rudra📽️ Videos I am Creating for You
    A step-by-step video tutorial to transform your functional but boring terminal into an eye candy with additional features.
    Subscribe to It's FOSS YouTube Channel🧩 Quiz Time
    Can you correctly Guess the Linux apps in this crossword?
    Guess the Linux Apps: CrosswordYou have seen them around you and perhaps used them all, too. Can you solve this crossword by correctly guessing the Linux software?It's FOSSAbhishek Prakash💡 Quick Handy Tip
    With GNOME Tweaks, you can set app window focus from "Click to Focus" to "Focus on Hover". For doing that, open GNOME Tweaks and go into the Windows tab. Here, under Window Focus, click on "Focus on Hover". Now, enable the "Raise Windows When Focused" toggle button.
    With this, whenever you hover over another window, it will be automatically focused. The window won't lose focus when the cursor is on the desktop. To revert to stock behavior, click on the "Click to Focus" option.
    🤣 Meme of the Week
    The list never ends! 🥲
    🗓️ Tech Trivia
    After Commodore declared bankruptcy in 1994, German company Escom AG bought its name and tech for $10 million, aiming to revive the iconic Amiga, but eventually sold the rights instead.
    🧑‍🤝‍🧑 FOSSverse Corner
    Regular FOSSer Rosika has created a file management script for Android and Linux.
    File management script for Android and LinuxHi all, 👋 I don´t know whether the following would be of any interest to any of you but I thought I´d post it here anyway. 😊 Often enough there´s a situation in which I find myself obliged to scan physical documents (i.e. documents on paper) in order to produce a digital equivalent of them. In most cases I need to have them in digital format for being able to quickly and easily access them e.g. when dealing my income tax return. Anyhow, due the setup of my computer peripherals it´s…It's FOSS CommunityRosika❤️ With love
    Share it with your Linux-using friends and encourage them to subscribe (hint: it's here).
    Share the articles in Linux Subreddits and community forums.
    Follow us on Google News and stay updated in your News feed.
    Opt for It's FOSS Plus membership and support us 🙏
    Enjoy FOSS 😄
  19. by: Sunkanmi Fafowora
    Wed, 07 May 2025 12:25:19 +0000

    Okay, nobody is an exaggeration, but have you seen the stats for hwb()? They show a steep decline, and after working a lot on color in the CSS-Tricks almanac, I’ve just been wondering why that is.
    hwb() is a color function in the sRGB color space, which is the same color space used by rgb(), hsl() and the older hexadecimal color format (e.g. #f8a100). hwb() is supposed to be more intuitive and easier to work with than hsl(). I kinda get why it’s considered “easier” since you specify how much black or white you want to add to a given color. But, how is hwb() more intuitive than hsl()?
    According to Google, the term “intuitive” means “what one feels to be true even without conscious reasoning; instinctive.” As such, it does truly seem that hwb() is more intuitive than hsl(), but it’s only a slight notable difference that makes that true.
    Let’s consider an example with a color. We’ll declare light orange in both hsl() and hwb():
    /* light orange in hsl */ .element-1 { color: hsl(30deg 100% 75%); } /* light orange in hwb() */ .element-2 { color: hwb(30deg 50% 0%); } These two functions produce the exact same color, but while hwb() handles ligthness with two arguments, hsl() does it with just one, leaving one argument for the saturation. By comparison, hwb() provides no clear intuitive way to set just the saturation. I’d argue that makes the hwb() function less intuitive than hsl().
    I think another reason that hsl() is generally more intuitive than hwb() is that HSL as a color model was created in the 1970s while HWB as a color model was created in 1996. We’ve had much more time to get acquainted with hsl() than we have hwb(). hsl() was implemented by browsers as far back as 2008, Safari being the first and other browsers following suit. Meanwhile, hwb() gained support as recently as 2021! That’s more than a 10-year gap between functions when it comes to using them and being familiar with them.
    There’s also the fact that other color functions that are used to represent colors in other color spaces — such as lab(), lch(), oklab(), and oklch() — offer more advantages, such as access to more colors in the color gamut and perceptual uniformity. So, maybe being intuitive is coming at the expense of having a more robust feature set, which could explain why you might go with a less intuitive function that doesn’t use sRGB.
    Look, I can get around the idea of controlling how white or black you want a color to look based on personal preferences, and for designers, it’s maybe easier to mix colors that way. But I honestly would not opt for this as my go-to color function in the sRGB color space because hsl() does something similar using the same hue, but with saturation and lightness as the parameters which is far more intuitive than what hwb() offers.
    I see our web friend, Stefan Judis, preferring hsl() over hwb() in his article on hwb().
    Lea Verou even brought up the idea of removing hwb() from the spec in 2022, but a decision was made to leave it as it was since browsers were already implementing the function. And although,I was initially pained by the idea of keeping hwb() around, I also quite understand the feeling of working on something, and then seeing it thrown in the bin. Once we’ve introduced something, it’s always tough to walk it back, especially when it comes to maintaining backwards compatibility, which is a core tenet of the web.
    I would like to say something though: lab(), lch(), oklab(), oklch() are already here and are better color functions than hwb(). I, for one, would encourage using them over hwb() because they support so many more colors that are simply missing from the hsl() and hwb() functions.
    I’ve been exploring colors for quite some time now, so any input would be extremely helpful. What color functions are you using in your everyday website or web application, and why?
    More on color
    Almanac on Feb 22, 2025 hsl()
    .element { color: hsl(90deg, 50%, 50%); } color Sunkanmi Fafowora Almanac on Mar 4, 2025 lab()
    .element { color: lab(50% 50% 50% / 0.5); } color Sunkanmi Fafowora Almanac on Mar 12, 2025 lch()
    .element { color: lch(10% 0.215 15deg); } color Sunkanmi Fafowora Almanac on Apr 29, 2025 oklab()
    .element { color: oklab(25.77% 25.77% 54.88%; } color Sunkanmi Fafowora Almanac on Apr 3, 2025 oklch()
    .element { color: oklch(70% 0.15 240); } color Gabriel Shoyombo Why is Nobody Using the hwb() Color Function? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
  20. by: Abhishek Kumar
    Wed, 07 May 2025 11:06:19 GMT

    Word wrap automatically breaks a long line of text so it fits within your current editor window, without you needing to scroll horizontally. It doesn’t add line breaks to your file; it just wraps it visually.
    Picture this: You’re writing a long JavaScript function or a long SQL query. Without word wrap, you’d be endlessly dragging that horizontal scrollbar. With it, everything folds neatly within view.
    This is especially useful when:
    You're working on a small screen. You want cleaner screenshots of your code. You prefer not to lose track of long lines. Now, let's see how to turn it on or off when needed.
    Method 1: The quickest toggle - Alt + Z
    Yep, there’s a shortcut for it!
    Open any file in VS Code. Press Alt + Z on your keyboard. And that’s it! Word wrap is toggled. Hit it again to switch it off.
    Method 2: Use the command palette
    Prefer something a bit more visual? The Command Palette is your go-to.
    Press Ctrl + Shift + P (or Cmd + Shift + P on macOS). Type Toggle Word Wrap. Click the option when it appears. This is ideal if you’re not sure of the shortcut or just want to double-check before toggling.
    Method 3: Set a default from settings
    Want word wrap always on (or always off) when you open VS Code? You can change the default behavior.
    1. Go to File > Preferences > Settings
    2. Search for “word wrap.”
    3. Under Editor: Word Wrap, choose from the following options:
    off: Never wrap. on: Always wrap. wordWrapColumn: Wrap at a specific column number. bounded: Wrap at viewport or column, whichever is smaller. 💡What’s “wordWrapColumn” anyway?
    It lets you define a column (like 20) at which VS Code should wrap lines. Great for keeping things tidy in teams with coding standards.You can also tweak "editor.wordWrap" in settings.json if you prefer working directly with config files.
    Wrapping up!
    Word wrap might seem like a tiny detail, but it’s one of those “small things” that can make coding a lot more pleasant. Take the indentation settings for example, another crucial piece for code readability and collaboration. Yes, the tabs vs spaces debate lives on 😄
    We’ll continue exploring more quick yet powerful tips to help you make the most of VS Code.
    Until then, go ahead and wrap those words your way.
  21. by: Abhishek Prakash
    Wed, 07 May 2025 07:58:51 GMT

    I have got my hands on this 10 inches touchscreen from SunFounder that is made for Raspberry Pi like devices.
    If you are considering adding touch capability to your Raspberry Pi project, this could be a good contender for that.
    I have used a few SunFounder products in the past but the Pironman case made me their fan. And I truly mean that. This is why before I opened the package, I had a feeling that this will be a solid device.
    Let me share my experience with SunFounder's 10 inch DIY Touch Screen with you.
    SunFounder Latest 10 Inch DIY Touch Screen All-In-One Solution for Raspberry Pi 5, IPS HD 1280x800 LCD, Built-In USB-C PD 5.1V/5A Output, HDMI, 10-point, No Driver, Speakers, for RPi 5/4/3/Zero 2WThis SunFounder Touch Screen is a 10-point IPS touch screen in a 10.1″ big size and with a high resolution of 1280x800, bringing you perfect visual experience. It works with various operating systems including Raspberry Pi OS, Ubuntu, Ubuntu Mate, Windows, Android, and Chrome OS.SunFounderSunFounder📜TLDR;

    It is a well-thought device that gives a smooth touch experience. A single power cord runs both the screen and Pi. The on-board speakers give you more than just display although they are very basic.

    All the interface remain available. The best thing is that it can be used with several other SBCs too.

    From 3D printing to cyberdeck to home automation, how you use it is up to you.

    The $149 price tag is decent for the quality of the touchscreen and the out of box experience it provides for the Raspberry Pi OS.Technical specifications
    Before we get into the nitty-gritty of performance, let's look at what you're actually getting with this display:
    Specification Details Screen Size 10 inches (diagonal) Resolution 1280 x 800 pixels Panel Type IPS (In-Plane Switching) Touch Technology Capacitive multi-touch (up to 10 points) Connection HDMI for display, USB for touch function Compatible with Raspberry Pi 4B, 3B+, 3B, 2B, Zero W Power Supply DC 12V/5A power supply with built-In USB-C PD Audio 2 speakers Dimensions 236mm x 167mm x 20mm Viewing Angle 178° (horizontal and vertical) Weight Approximately 350g Assembling
    SunFounder has a thing for assembling. Like most of their other products, the touchscreen also needs some assembling. After all, it is properly called 'a 10 -inch DIY touchscreen' so there is obviously a DIY angle here.
    The assembling should not take you more than 10–15 minutes to put all the pieces together.
    The assembly basically requires attaching the single board computer with the screws, taping the speakers and connecting it to the touchscreen cable.
    It's actually fun to do the assembly. Not everyone will be a fan of this but I am guessing if you are into maker's electronics, you won't be unhappy with the assembly requirement.
    Experiencing SunFounder DIY Touchscreen
    The device is powered by a 12V/5A DC power that also powers the Raspberry Pi with 5.1V/5A. There are LED lights at the back that indicate if the Pi is turned or not.
    There is no on-board battery, in case you were wondering about that. It needs to be connected to the power supply all the time to function. Although, if you need, you can always attach a battery-powered system to it.
    The display is IPS and the surface feels quite premium. Some people may find it a bit glossy and slippery but the IPS screens have the same look and feel in my experience.
    Colors are vibrant, text is crisp, and the IPS panel means viewing angles are excellent.
    The 10 point capacitive touch works out of the box. The touch response is quite good. I noticed that the double-click mouse action actually needs 3 quick taps. It took me some time to understand that it is the intended behavior.
    My 4-years old daughter used it for playing a few games on GCompris and that worked very well. Actually, she sees the Raspberry Pi wallpaper and thinks it's her computer. I had to take the device off her hands as I didn't want her to use it as a tablet. I would prefer that she keeps on using a keyboard and mouse with her Pi.
    On-screen keyboard
    SunFounder claims that no drivers are required and the touchscreen is ready to be plugged in and play if you use Raspbian OS.
    While I didn't have to install any drivers, and the touchscreen worked fine, I had to install squeekboard package to activate the on-screen keyboard on my Raspberry Pi 5 with Raspbian OS.
    The official SunFounder document mentions that this package should be preinstalled in Raspbian OS but that was not the case for me. Not a major issue as the on-screen keyboard worked fine too after installing the missing package.
    Using On-screen Keyboard in Raspberry Pi OSHere’s what you can do to use a virtual keyboard on Raspberry Pi OS.It's FOSSAbhishek PrakashSpeakers
    Before I forget, I should mention that the touchscreen also has two tiny speakers at the bottom. They are good enough for occasional cases where you need audio output. You won't need to plugin a headphone or external speakers in such cases.
    But if you want anything more than that, you'll need to attach proper speakers. It really depends on what you need it for.
    Dude, where is my stand?
    It would have been nice to have some sort of stand with the screen. That would make it easier to use the touchscreen as a monitor on the table.
    At first glance, it seems like it is more suitable as a wall mount to display your homelab dashboard or some other information.
    But it's not completely impossible to use it without a dedicated stand on the desk. I used the extra M 2.5 screws to increase the length of the bottom two screws. That gave it a stand like appearance.
    Little tweak to make a stand with extra screwsI thought I was smart to utilize those extra screws as a stand. Later I found out that it was intended for that purpose, as the official document also mentioned this trick.
    I remember the older model of this touch screen used to have a dedicated stand.
    Older model of SunFounder's Touchscreen had a dedicated standI still think that dedicated stand attachments would have been a better idea.
    By the way, if you want and have the resources, you can 3D print a custom case for the touchscreen. SunFounder provides the 3D Printer File and all necessary steps on its documentation website.
    What can you use it for?
    The imagination is your limit. There are no dearths of touch-focused Raspberry Pi projects.
    Here are a few usages I can think of:
    Cyberdeck setup Smart home dashboard Retro gaming setup Use in 3d printers Robotics control interface In-car entertainment system (I mean, why not, if you have an ancient car and want to do some tinkering) Mini kiosk for small businesses Homelab dashboard display Weather station and agenda display Digital photo frame Should you get it?
    The answer always depends on what you need and what you want.
    If you are on the lookout for a new touchscreen for your homelab or DIY projects, this is definitely worth a look.
    Sure, the price tag is more than the official Raspberry Pi touchscreen but SunFounder's touchscreen has better quality (IPS), is bigger with better resolution, has speakers and supports more SBCs.
    Basically, it is a premium device, whereas most touchscreen available on lower prices have a very toy-ish feel.
    If affordibility is not a concern and you need excellent touch experience for your projects, I can surely recommend this product.
    Explore SunFounder DIY Touchscreen
  22. by: Ryan Trimble
    Tue, 06 May 2025 14:14:41 +0000

    Back in October, the folks behind the GreenSock Animation Platform (GSAP) joined forces with Webflow, the visual website builder. Now, the team’s back with another announcement: Along with the version 3.13 release, GSAP, and all its awesome plugins, are now freely available to everyone.
    Webflow is celebrating over on their blog as well:
    Check out the GSAP blog to read more about the announcement, then go animate something awesome and share it with us!
    GSAP is Now Completely Free, Even for Commercial Use! originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
  23. by: LHB Community
    Tue, 06 May 2025 18:08:50 +0530

    Anyone who works in a terminal, Linux or Windows, all the time knows that one of the most frequently used Linux commands is "cd" (change directory).
    Many people have come up with tools to change the current directory intuitively. Some people use the CDPATH environment variable while some go with zoxide, but which doesn't suit my needs.
    So I created a tool that works for me as a better alternative to the cd command.
    Here's the story.
    Why did I build a cd command alternative?
    In my daily work, I've used the cd command a few dozen times (that's about the order of magnitude). I've always found it annoying to have to retype the same paths over and over again, or to search for them in the history.
    By analyzing my use of “cd” and my command history, I realized that I was most often moving through fifty or so directories, and that they were almost always the same.
    Below is the command I used, which displays the number of times a specific directory is the target of a “cd” command:
    history | grep -E '^[ ]*[0-9]+[ ]+cd ' | awk '{print $3}' | sort | uniq -c | sort -nr Here's how it works step by step:
    history: Lists your command history with line numbers grep -E '^[ ]*[0-9]+[ ]+cd ': Filters only lines that contain the cd command (with its history number) awk '{print $3}': Extracts just the directory path (the 3rd field) from each line sort: Alphabetically sorts all the directory paths uniq -c: Counts how many times each unique directory appears sort -nr: Sorts the results numerically in reverse order (highest count first) The end result is a frequency list showing which directories you've changed to most often, giving you insights into your most commonly accessed directories.
    The above command won't work if you have timestamp enabled in command history.
    From this observation, I thought, why not use a mnemonic shortcut to access the most used directories.
    So that's what I did, first for the Windows terminal, years ago, quickly followed by a port to Linux.
    Meet cdd
    Today cdd is the command I use the most in a console. Simple and very efficient.
    GitHub - gsinger/cdd: Yet another tool to change current directory efficientlyYet another tool to change current directory efficiently - gsinger/cddGitHubgsingerWith cdd, you can:
    Jump to a saved directory by simply typing its shortcut. Bind any directory to a shortcut for later use. View all your pre-defined shortcuts along with their directory paths. Delete any shortcut that you no longer need. 0:00 /1:01 1× Installing cdd
    The source is available here.
    The cdd_run file can be copied anywhere in your system. Don't forget to make it executable (chmod +x ./cdd_run)
    Because the script changes the current directory, it cannot be launched in a different bach process from your current session. It must be launched by the source command. Just add the alias in your ~/.bashrc file:
    alias cdd='source ~/cdd_run' Last step: Restart your terminal (or run source ~/.bashrc).
    Running cdd without argument displays the usage of the tool.
    In the end...
    I wanted a short name that was not too far from "cd". My muscle memory is so used to "cd" that adding just a 'd' was the most efficient in terms of speed.
    I understand that cdd may not be a tool for every Linux user. It's a tool for me, created by for my needs, and I think there might be a few people out there who would like it as much as I do.
    So, are you going to be one of them? Please let me know in the comments.
    This article has been contributed by Guillaume Singer, developer of the cdd command.
  24. by: Chris Coyier
    Mon, 05 May 2025 17:00:34 +0000

    The news is that GSAP, a hugely popular animation library on CodePen and the web writ large, is now entirely free to use thanks to their being acquired by Webflow.
    Cool.
    In celebration, they are also running a Community Challenge where you make stuff and submit it and maybe win some swag. You make something to submit either with Webflow or CodePen, and they provide a quick Pen template to get started.
    As you can see in that template, GSAP is great at animating regular ol’ HTML content, and in this case text content that it splits into individual elements (accessibly!) with the brand-new entirely re-written for betterness SplitText plugin. But GSAP can animate… whatever. I actually think of it as being particularly good at animating SVG, so I figure we ought to spend the rest of our time together here looking at sweet SVG links that caught my eye recently.
    Animating Figma’s SVG Exports by Nanda Syahrasyad — These interactive posts that Nanda does are amazing. It really doesn’t have anything to do with Figma, but that’s a clever title as it will help connect with the kind of developer who needs this. This made me think of GSAP a bit as the last demo relies on a bit of transform-origin which GSAP explicitly fixes cross-browser (or at least that used to be a big sticking point it smoothed over). svg-gobbler by Ross Moody — Exporting SVG from a design tool, like above, is one way to get the SVG you need. Another is kiping it from existing sites! There is lots of SVG on the web already to get your hands on (be careful to account for copyright and taste). This browser extension helps you extract them cleanly. SVG Coding Examples: Useful Recipes For Writing Vectors By Hand by Myriam Frisano — The other way to get your hands on the SVG you need is to roll up your sleeves and write it, which is an entirely possible thing to do in SVG syntax. This guide doesn’t use <path> on purpose because that’s a whole thing unto itself (which I once documented and have played with on a limited basis). Myriam’s guide here does get into using JavaScript to variable-ize things and do loops and stuff which is all smart and useful stuff. From static to interactive: turn SVG diagrams into exciting experiences on your website by Vanessa Fillis — Flouish looks like a pretty cool tool. These demos by Vanessa to me feel like slightly fanci-fied image map demos, which is actually a perfectly great SVG use case. Changing Colors in an SVG Element Using CSS and JavaScript by Kirupa Chinnathambi — Just some SVG 101 here, which is always appreciated. Vectorpea by Ivan Kutskir— Web-based vector editor (ala Illustrator, with the Pen tool and such) that opens lots of file formats and works quite nicely in my limited experience. Lissajous Curve SVG Generator by Eva Decker — So niche. SVGFM by Chris Kirknielsen — SVG filters are ultra powerful and, I’ve always felt, a bit inscrutable. Chris brings some language and UI to the party making it a bit easier to experiment and play. But it’s still complex! Revisiting SVG filters – my forgotten powerhouse for duotones, noise, and other effects by Brecht De Ruyte — My favorite kind of SVG filters are the ones with one clear purpose and one filter that does the thing. Duotone images are that. The Truth(tm) about encoding SVG in data URIs by Stoyan Stefanov — When using SVG in CSS as a background, you can do: background: url('data:image/svg+xml,<svg ...></svg>'); and I mean that quite literally. You can put whatever SVG syntax in there and it’ll work generally as expected. No scripting or anything. There is only one thing to worry about: encode any # characters as %23.
  25. by: Kevin Hamer
    Mon, 05 May 2025 13:01:43 +0000

    Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before (indeed, it’s one of his all-time favorite CSS tricks), by layering background gradients with different attachments, we can get shadows that are covered up when you’ve scrolled to the limits of the element.
    Geoff covered a newer approach that uses the animation-timeline property. Using animation-timeline, we can tie CSS animation to the scroll position. His example uses pseudo-elements to render the scroll shadows, and animation-range to animate the opacity of the pseudo-elements based on scroll.
    Here’s yet another way. Instead of using shadows, let’s use a CSS mask to fade out the edges of the scrollable element. This is a slightly different visual metaphor that works great for horizontally scrollable elements — places where your scrollable element doesn’t have a distinct border of its own. This approach still uses animation-timeline, but we’ll use custom properties instead of pseudo-elements. Since we’re fading, the effect also works regardless of whether we’re on a dark or light background.
    Getting started with a scrollable element
    First, we’ll define our scrollable element with a mask that fades out the start and end of the container. For this example, let’s consider the infamous table that can’t be responsive and has to be horizontally scrollable on mobile.
    Let’s add the mask. We can use the shorthand and find the mask as a linear gradient that fades out on either end. A mask lets the table fade into the background instead of overlaying a shadow, but you could use the same technique for shadows.
    CodePen Embed Fallback .scrollable { mask: linear-gradient(to right, #0000, #ffff 3rem calc(100% - 3rem), #0000); } Defining the custom properties and animation
    Next, we need to define our custom properties and the animation. We’ll define two separate properties, --left-fade and --right-fade, using @property. Using @property is necessary here to specify the syntax of the properties so that browsers can animate the property’s values.
    @property --left-fade { syntax: "<length>"; inherits: false; initial-value: 0; } @property --right-fade { syntax: "<length>"; inherits: false; initial-value: 0; } @keyframes scrollfade { 0% { --left-fade: 0; } 10%, 100% { --left-fade: 3rem; } 0%, 90% { --right-fade: 3rem; } 100% { --right-fade: 0; } } Instead of using multiple animations or animation-range, we can define a single animation where --left-fade animates from 0 to 3rem between 0-10%, and --right-fade animates from 3rem to 0 between 90-100%. Now we update our mask to use our custom properties and tie the scroll-timeline of our element to its own animation-timeline.
    Putting it all together
    Putting it all together, we have the effect we’re after:
    CodePen Embed Fallback We’re still waiting for some browsers (Safari) to support animation-timeline, but this gracefully degrades to simply not fading the element at all.
    Wrapping up
    I like this implementation because it combines two newer bits of CSS — animating custom properties and animation-timeline — to achieve a practical effect that’s more than just decoration. The technique can even be used with scroll-snap-based carousels or cards:
    CodePen Embed Fallback It works regardless of content or background and doesn’t require JavaScript. It exemplifies just how far CSS has come lately.
    Modern Scroll Shadows Using Scroll-Driven Animations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Important Information

Terms of Use Privacy Policy Guidelines We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.