Jump to content

Blogger

Blog Bot
  • Joined

  • Last visited

    Never

Blog Entries posted by Blogger

  1. by: Abhishek Prakash
    Fri, 22 Aug 2025 11:33:54 +0530

    What is firewalld?
    Firewalld is an open source firewall management tool that acts as a front-end tool for the Linux kernel's netfilter framework. It is a zone-based firewall system that allows for the different security configuration levels for different connection zones. While Ubuntu and Debian rely on ufw for the firewall function, firewalld is shipped by default in Fedora, CentOS, openSUSE and Red Hat.
    Why use firewalld?
    Easier management: No need to remember complex iptables or nftables syntax. Dynamic updates: Change rules without downtime. Predefined services: Quickly allow/deny SSH, HTTP, HTTPS, etc. Widespread adoption: Default firewall in RHEL, CentOS, Fedora, openSUSE, and more. 📖 Get familiar with firewalld terms quickly
    Before jumping into commands, let’s look at a few important terms you’ll encounter again and again:
    Zones: A zone represents a trust level for a network connection. For example, public (least trusted), home (medium), trusted (all allowed). Each network interface can be assigned to a zone. Services: Firewalld comes with predefined services like ssh, http, https. Enabling a service automatically opens the required port(s). Ports: You can directly allow or deny specific ports (like 80/tcp for HTTP) if you don’t want to rely on service definitions. Runtime vs Permanent:Runtime rules: Take effect immediately but are lost after reboot/reload. Permanent rules: Persist across reboots but require a reload to apply. Backends: Firewalld uses nftables (modern Linux) or iptables (older Linux) under the hood, so you don’t have to. Manage firewalld with firewall-cmd commands
    You use firewalld with a dedicated firewall-cmd command line tool.
    Command Description sudo firewall-cmd --state Check if firewalld is running sudo systemctl restart firewalld Restart the firewall service sudo firewall-cmd --reload Reload rules without stopping service sudo firewall-cmd --get-active-zones Show active zones and interfaces sudo firewall-cmd --get-default-zone Show the default zone sudo firewall-cmd --list-all List all rules in the default zone sudo firewall-cmd --add-service=ssh --permanent Allow SSH permanently sudo firewall-cmd --remove-service=ssh --permanent Remove SSH access permanently sudo firewall-cmd --add-port=8080/tcp --permanent Open TCP port 8080 permanently sudo firewall-cmd --remove-port=8080/tcp --permanent Close TCP port 8080 sudo firewall-cmd --list-services List allowed services in current zone sudo firewall-cmd --set-log-denied=all Enable logging of denied packets We have a one page guide on firewall-cmd command that shows these examples in a better way.
    firewalld-cmd Command in Linux: 24 ExamplesThe firewall-cmd command line tool lets you interact and manage the firewalld firewall in Linux. Here’s how to use this command.Linux HandbookLHB CommunityThis here is a collection of quick tutorials that teaches you various ways of using the firewalld firewall system. The collection will be updated continually with more tutorials in the future.
  2. by: Abhishek Prakash
    Thu, 21 Aug 2025 04:32:39 GMT

    There are numerous popular browser-based free VPNs. FreeVPN is one such extension that was recently caught to be spying on its users. As the saying goes, if it's free, you are the product.
    Google Verified FreeVPN Caught Red-handed Spying on its UsersIf it is free, you are the product. Unless it is free and open source.It's FOSS NewsSourav RudraIf you have to, at least use free option from reliable sources like Proton or Mozilla.
    💬 Let's see what else you get in this edition
    Some new hardware for tinkerers. XZ Utils backdoor being found in Debian docker images. Command that lets you create new files with predefined size. LibreOffice gets AI image generation ability. And other Linux news, tips, and, of course, memes! 📰 Linux and Open Source News
    LibreOffice gets a new AI image generation extension. Security researchers have found XZ Utils backdoor in Debian images on Docker Hub. Intel's ongoing global layoff drive is adversely affecting driver support in the Linux kernel. Firefox 142 is here with a topic-based new tab page, AI-powered link previews, and more. ArmSoM's CM1 is here for industrial-grade performance in embedded IoT. Raspberry Pi has launched a smaller variant of the Touch Display 2. Raspberry Pi Launches 5″ Touch Display 2 for Just $40Small, sharp, and just $40.It's FOSS NewsSourav Rudra🧠 What We’re Thinking About
    A Windows update is not playing nice with SSDs. Switching to Linux should fix this.
    Windows Update Is Killing SSDs! Should You Switch to Linux?The moment to make the move to Linux is now.It's FOSS NewsSourav Rudra🧮 Linux Tips, Tutorials, and Learnings
    Here are some privacy-focused alternatives to Notion. You can access root folder from the Nautilus file manager. If you ever forget it, you can easily reset the root password in Ubuntu. Handy fallocate command allows you to create files of a certain size, say a 10 GB file for your testing. Accessing Root Directory in Nautilus File ManagerQuick little tip that shows how you can access the files and folders under root from Nautilus file manager.It's FOSSAbhishek Prakash👷 AI, Homelab and Hardware Corner
    I tested the TerraMaster's SSD enclosure against my SanDisk external SSD. I never cared for SSD enclosures until now and I must say these are pretty useful gadgets, specially for people who have their homelab with access to numerous NVMe SSDs.
    TerraMaster D1 SSD Plus Review: Experience a Faster External SSDIt is one of those devices that I did not know I needed until I used it.It's FOSSAbhishek PrakashA split mechanical keyboard that doesn't look weird and is also silent? Nocfree is famous for that and they have a new version announced on Kickstarter. One more gadget added to my wishlist. Now I got to start saving for it 😄
    Nocfree & on Kickstarter✨ Project Highlight
    You might have heard about Omarchy. The distro that started the 'pre-configured Hyprland' revolution of sorts. Sourav tested it out, read his experience.
    This One Command Turned My Arch Install Into a Beautiful Hyprland SetupThis script turned my boring Arch install into something special.It's FOSS NewsSourav Rudra📽️ Videos I am Creating for You
    Have a look at Linux Mint 22.2 Zara features in the latest video.
    Subscribe to It's FOSS YouTube Channel🧩 Quiz Time
    Are you a terminal plumber? Our Chain Reaction quiz will test your pipes knowledge.
    Chain Reaction: A Linux Pipes & Commands QuizConnect the dots...er.. pipes and correctly guess the command combinations.It's FOSSAbhishek Prakash🛍️ Don't Miss: Linux ebooks and videos bundle
    Level up your Linux skills with the latest Humble Tech Book Bundle with courses by Pearson. Get professional-quality lessons like UNIX® and Linux® System Administration Handbook, Fifth Edition, Linux performance optimization, and more. Pay what you want for a whole new user experience on your favorite machine—and help support The BINC Foundation with your purchase!
    Humble Tech Book Bundle: Linux Complete by PearsonUnleash your machine’s potential with our latest Humble Tech Book Bundle: Linux Complete—customize, design, and help support The BINC Foundation today!Humble BundleExplore Linux Bundle💡 Quick Handy Tip
    In Dolphin (the KDE file manager), you can make copying and moving files 'faster'. Go to Menu → Configure → Configure Dolphin → Context Menu, turn on Copy To and Move To, and hit "Apply".
    After that, right-click any file or folder, and you’ll see Copy Here and Move Here options. Clicking them lets you pick a destination right there without needing to open another window.
    🤣 Meme of the Week
    I have become old. 👨‍🦳
    🗓️ Tech Trivia
    On 25th August 1991, a 21-year-old Finnish student named Linus Torvalds casually announced on Usenet that he was working on a “hobby” operating system for 386 PCs—something “just for fun” and not big or professional like GNU. That hobby project became Linux, our favorite open source project.
    🧑‍🤝‍🧑 FOSSverse Corner
    The discussion surrounding why Windows users are so difficult to convert to Linux is still ongoing. Go ahead, contribute to it!
    Why are Windows Users so Difficult to Convert to Linux?Over the weekend I had a windows user come to see me, he had no sound on his laptop computer speakers.Running windows 10. Easy, into devices on the control panel, look for realtek and enable them, sound worked. But reboot, they stopped. Virus check showed he was badly infected, so many lost count. Malwarebytes, adwcleaner etc and removed them, restart enable device worked, but second restart no sound, virus check again and they had returned. The computer is not capable of converting to window…It's FOSS Communitycallpaul.eu (Paul)❤️ With love
    Please 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 😄
  3. by: Abhishek Prakash
    Thu, 21 Aug 2025 09:50:26 +0530

    Stop wrestling with complex shell scripts and manual log parsing.
    AWK is your secret weapon for instant data analysis, log processing, and system monitoring. Convert your superlong scripts into elegant one-liners to help with your actual usecases.
    What makes AWK special?
    Built into every Linux system - no installation needed Handles structured data effortlessly Perfect for log analysis, configuration processing, and report generation Bridges the gap between simple grep/sed and complex programming languages What You'll Learn in This Series
    While there is no end to mastering a new tool or skill, this tutorial series will make you familiar with the essential concepts of AWK.
    Part 1: Introduction to AWK
    Get up and running with AWK basics. Learn when to use AWK vs grep vs sed, get familiar with the pattern-action syntax, and start extracting data from files like a pro.
    Part 2: Pattern Matching and Operations
    Control exactly what data gets processed. Master conditional logic, comparison operators, and complex pattern matching that handles real-world scenarios.
    Part 3: Built-in Variables and Field Manipulation
    Discover AWK's built-in sensors (NR, NF, FS, OFS) and learn to reshape data on-the-fly. Turn any text format into exactly what you need.
    Part 4: Mathematical Operations
    Perform calculations on your data and manipulate text with precision. Format reports, clean data, and transform strings like a text processing wizard.
    Part 5: String Manipulations
    Utilize the vast string functions AWK provides to deal and add a new dimension to your scripts.
    Part 6: Arrays and Data Structures
    Unlock AWK's most powerful feature. Count occurrences, group data, create summaries, and perform analysis that would require complex scripts in other languages.
    Part 7: Control Flow
    Build sophisticated scripts with for and while loops.
    Part 8: User Defined Functions
    Write cleaner, more maintainable code by breaking complex operations into reusable components.
    Part 9: AWK Best Practices
    Write maintainable, efficient AWK scripts. Learn debugging techniques, performance optimization, and when NOT to use AWK.
    Why This Series
    ✅ Hands-On Learning
    Every chapter includes complete sample files and working examples. Copy, paste, run and see immediate results.
    ✅ Sysadmin-Focused
    Real scenarios you face daily: processing logs, monitoring systems, generating reports, and automating tasks.
    ✅ Progressive Complexity
    Start with simple field extraction, progress to complex data analysis. Each chapter builds on previous knowledge.
    ✅ Practical Examples
    Every example solves system administration challenges using realistic data.
    Who This Series Is For
    Perfect if you're:
    A Linux system administrator handling log files and data processing Comfortable with basic command line but want to level up your text processing skills Tired of writing long scripts for simple data extraction tasks Looking to automate reporting and monitoring tasks Want to understand when and how to use AWK effectively Not quite ready? If you're new to Linux command line, start with basic bash tutorials first. This series assumes you're comfortable navigating the terminal and editing files.
    Tools and Requirements
    What you need:
    Any Linux system (local, VM, or server access) Basic terminal/command line familiarity Text editor of your choice Sample log files (I'll provide realistic examples) What's included:
    Complete sample data files for every chapter Working code examples you can copy and modify Practice exercises with increasing difficulty Ready? Let's start learning.
  4. by: Abhishek Prakash
    Thu, 21 Aug 2025 02:49:22 GMT

    Transferring large files via typical USB thumb drives is a pain. Try it with a 20 GB file and it will take an hour just for copying the files.
    That's why external, portable SSDs are the new normal these days, especially when we have to deal with 4K video files that go in multiple GBs.
    Another player in this domain is an external SSD enclosure that allows you to use your typical, internal NVMe SSD like a portable, external SSD.
    One of the latest such devices is TerraMaster's D1 SSD Plus. If you did not know already, TerraMaster manufactures NAS, DAS and other storage equipment. D1 SSD Plus is their latest offering.
    📋TerraMaster sent me this device for review. The views expressed are my own and come from experience with time spent on it.TerraMaster D1 SSD Plus Enclosure
    The TerraMaster D1 SSD Plus is a high-speed, portable M.2 NVMe SSD enclosure that supports up to 8 TB drives and connects via USB4 (40 Gbps), delivering near-desktop performance with read/write speeds close to 4 GB/s (or so it claims).
    Weighing at 250 grams, TerraMaster D1 SSD Plus is a heavy device for a portable SSD. But that's by choice and by design. The enclosure is made of aerospace-grade aluminum, and it is certainly a lot bulkier than your usual external SSD. Although it keeps the SSD safe and also adds the passive cooling features thanks to the dual-sided fins.
    It looks like the white colored aluminum casing is getting popular. ZimaBoard 2 and some other gadgets in the homelab niche also use this styling these days. I prefer dark, black looks, but let the color not be a judge of this device.
    🚧TerraMaster D1 SSD Plus is just an enclosure. It does NOT include NVMe SSD.Set up
    Please note that the enclosure does NOT come with NVMe SSD. You have to use your own NVMe SSD and it cannot be SATA SSD.
    The box contains the enclosure, a high-speed cable, a screwdriver, manual, and a pouch for the device.
    There is a tiny screw at the bottom of the device. You have to use the provided screwdriver to unscrew it and open the enclosure. The screw doesn't come out entirely but stays fixed on it. This is good thinking, as you don't want to lose the tiny screw. At the same time, you wouldn't want to use an unsuitable device on the screw because if the screw loses its shape, you may have a hard time with it.
    Once the enclosure is opened, you'll see the option to add the NVMe SSD on one part. The other part has a thermal pad with a sticker on it that should be removed before the first use.
    The entire setup doesn't take long and is certainly not complicated.
    Data safety and SSD supports
    D1 SSD Plus is compatible with double sided SSDs too. This is another plus.
    Another plus point is the data safety. TerraMaster claims that D1 SSD Plus incorporates additional protective components to ensure stable data transmission, safeguarding against short circuits, voltage surges, and electrostatic discharge (ESD).
    As noted by Gizmochina, the large amount of SMD capacitors used here are the same as you see with enterprise SSDs to stabilize the voltage, provide power failure protection, and thus ensure data safety.
    Technical specifications
    Specification Details Interface USB4 (40 Gbps), TB5/4/3, USB 3.x/2.0 Max Speeds Read up to ~3,853 MB/s, Write up to ~3,707 MB/s SSD Slot M.2 NVMe 2280 Max Capacity 8 TB Enclosure Aluminum, fanless, heat-dissipating Dimensions (mm) 112.5 × 60 × 33 Weight 246 g (without SSD) Power Consumption ~7.5 W active, ~5.5 W hibernation File Systems Supported NTFS, APFS, HFS+, exFAT, FAT32, EXT4 Extras Backup apps (TDAS & TPC), screwdriver, pouch Price (enclosure) Approximately $110 Get TerraMaster D1 SSD Plus on AmazonSpeed matters
    Since one of the main points of having a TerraMaster external SSD enclosure is to use it as a better alternative of regular external SSDs, I tested it against my SanDisk Extreme Portable Disk (model SDSSDE60-1T00).
    This SanDisk SSD has been with me for the past few years. In fact, I have three of them. One of them stores important data and is not used much and the other two are more portable in nature. I have almost stopped using USB drives even for data transfer after these SSDs.
    Let me share how the TerraMaster SSD enclosure compares with my SanDisk Extreme portable disk.
    To summarize, this is my test kit:
    ASUS Zenbook S14 with Thunderbolt 4 port SanDisk Extreme Portable Disk SDSSDE60-1T00 (USB 3.2 interface with advertised speed of 1050 MB/s). TerraMaster D1 SSD Plus with WD Blue SN5000 (PCIe 4.0 interface with advertised speed of 2853 MB/s) 📋My tests are more from a casual, end-user's perspective. I am sure these tests can be performed at a more expert level with dedicated speed testing software but I wanted to test it the way I use them in my day-to-day activities.In the test screenshots, Data-SSD is TerraMaster and Backup-SSD is SanDisk.
    The first test I did was with a folder containing photos of around 5.5 GB in size. Surprisingly, SanDisk nearly took the same time (6.6 sec) as TerraMaster (5.32 sec).
    I was not expecting this, to be honest. Then I created a file of 10 GB in size with fallocate and used it to test the two external disks. This time TerraMaster was around two times faster than SanDisk.
    Next, I copied a folder with some huge video files. The folder was around 96 GB in size. And as expected, TerraMaster finished copying under one third of the time than SanDisk.
    TerraMaster took 1 minute, 28 seconds for 96 GB of file transfer. Which should be roughly around 1.1 GB/s.
    TerraMaster D1 SSD PlusSanDisk took 4 minutes and 10 seconds, which should amount to a speed of 380 MB/s.
    SanDiskBasically, the larger the file size, the better it performs.
    Of course, the SanDisk uses USB 3.2 interface and is a few years older, but most of the external SSDs use the same interface and have a similar performance range. In my opinion, it is only fair to keep the comparison with these external disks as the external SSD enclosure is supposed to replace them in your setup.
    Backup your PC and smartphone data easily
    TerraMaster has dedicated software to backup Windows PCTerraMaster also provides dedicated software to backup your Windows PC easily to your external SSD. I don't use Windows and there is no such application for Linux so I didn't test it.
    There are also dedicated mobile apps for iOS and Android. I was actually excited about the idea of automatically backing up smartphone data to the SSD.
    I have a Galaxy S23 Ultra with 1 TB storage and 2 children. Which means that I have tons of photos and videos of my children. I keep an automatic backup on pCloud as I have their 2 TB lifetime storage. Having data locally is a plus as I prefer keeping multiple copies of the data.
    Unfortunately, at present, my Galaxy S23 is suffering from 'foreign particle and moisture' in the charging port and thus I could not test it on my phone. I'll update this section when this problem goes away and the USB port is functional again.
    I used my wife's iPhone,but the WD Blue SN5000 probably required more power because I saw a 'Cannot use accessory. This accessory uses too much power' error.
    I am sure these apps have been created to add more versatility to the overall offering of TerraMaster devices. I wish I could test them but it didn't happen.
    Advantages of an external SSD enclosure
    I learned a thing or two about using an external SSD enclosure.
    Speed: By using the Thunderbolt port, these SSD enclosures are equal or faster than your regular external SSDs. Reusability: If you have internal NVMe SSDs that are not being used, you can put them in the enclosure and use them as external SSDs. You are not fixed to a single brand of SSD as well. Cost-effective in long run: You have the option to 'upgrade' your external SSD by changing the NVMe SSD. Robust: In some unfortunate case if the USB connector breaks on the external SSD, your data is pretty much lost. In case of SSD enclosure, your SSD can be taken out anytime and put into another device. A device worth having
    I was skeptical at first, unsure of the usability of such a device. But when I looked closely and tested it, I could see its potential and why external SSD enclosures are gaining popularity specially among homelab users who have multiple NVMe SSDs in their setup. It gives the option to reuse your internal SSDs into a portable, external SSD.
    TerraMaster D1 SSD Plus is a robust device. It is bulky, but it ensures safe SSD operation. The all almunium chassis gives it a rugged look and at the same time, it provides passive cooling.
    With 4K being the new normal, it's not uncommon to have video files in 100s of GBs. USB 3 is certainly not adequate for data transfer of such large files. External SSDs are the way to go. Even there, the speed matters, and as you saw, TerraMaster D1 SSD Plus was easily more than 3 times faster than portable SSD.
    The ability to transfer photos and videos directly from your smartphones into the SSD is another plus for TerraMaster D1 SSD Plus, given that you use the correct SSD.
    My biggest gripe is perhaps its bulky outfit. Now, I understand that it is important to secure the SSD against jerks and falls for a longer and smoother operation and hence it makes sense to have a military grade enclosure. Plus, it handles the heat pretty well so I should not complain about the size.
    Get it from official websiteOrder it from Amazon
  5. by: Amit Sheen
    Wed, 20 Aug 2025 13:54:52 +0000

    In the previous chapter, we built a basic 3D layered text effect using nothing but HTML and CSS. It looks great and has a solid visual presence, but it’s completely static. That is about to change.
    In this chapter, we will explore ways to animate the effect, add transitions, and play with different variations. We will look at how motion can enhance depth, and how subtle tweaks can create a whole new vibe.
    3D Layered Text Article Series
    The Basics Motion and Variations (you are here!) Interactivity and Dynamism (coming August 22) ⚠️ Motion Warning: This article contains multiple animated examples that may include flashing or fast moving visuals. If you are sensitive to motion, please proceed with caution.
    ‘Counter’ Animation
    Let’s start things off with a quick animation tip that pairs perfectly with layered 3D text. Sometimes, we want to rotate the element without actually changing the orientation of the text so it stays readable. The trick here is to combine multiple rotations across two axes. First, rotate the text on the z-axis. Then, add a tilt on the x-axis. Finally, rotate the text back on the z-axis.
    @keyframes wobble { from { transform: rotate(0deg) rotateX(20deg) rotate(360deg); } to { transform: rotate(360deg) rotateX(20deg) rotate(0deg); } } Since we rotate on the z-axis and then reverse that rotation, the text keeps its original orientation. But because we add a tilt on the x-axis in the middle, and the x-axis itself keeps rotating, the angle of the tilt changes as well. This creates a kind of wobble effect that shows off the text from every angle and emphasizes the sense of depth.
    CodePen Embed Fallback If we want to take this a few steps further, we can combine the wobble with a floating effect. We will animate the .layers slightly along the z-axis:
    .layers { animation: hover 2s infinite ease-in-out alternate; } @keyframes hover { from { transform: translateZ(0.3em); } to { transform: translateZ(0.6em); } } To really sell the effect, we will leave the original span in place — like a shadowed anchor — change its color to transparent, and animate the blur factor of its text-shadow:
    span { color: transparent; animation: shadow 2s infinite ease-in-out alternate; } @keyframes shadow { from { text-shadow: 0 0 0.1em #000; } to { text-shadow: 0 0 0.2em #000; } } Syncing those two animations together gives the whole thing a more realistic feel:
    CodePen Embed Fallback Splitting Letters
    OK, this is starting to look a lot better now that things are moving. But the whole word is still moving as one. Can we make each letter move independently? The answer, as usual, is “yes, but…”
    It is absolutely possible to split each word into a separate letters and animate them individually. But it also means a lot more elements moving on the screen, and that can lead to performance issues. If you go this route, try not to animate too many letters at once, and consider reducing the number of layers.
    In the next example, for instance, I reduced the layer count to sixteen. There are five letters, and to place them side by side, I gave the .scene a display: flex, then added a small delay to each letter using :nth-child:
    CodePen Embed Fallback New Angles
    Until now, we have only been moving the text along the z-axis, but we can definitely take it further. Each layer can be moved or rotated in any direction you like, and if we base those transformations on the --n variable, we can create all sorts of interesting effects. Here are a few I played with, just to give you some ideas.
    In the first one, I am animating the translateX to create a shifting effect:
    CodePen Embed Fallback In the others, I am adding a bit of rotation. The first one is applied to the y-axis for the sloping effect:
    CodePen Embed Fallback This next example applies rotation on the x-axis for the tilting:
    CodePen Embed Fallback And, finally, we can apply it on the z-axis for a rotating example:
    CodePen Embed Fallback Layer Delay
    Working with separate layers does not just let us tweak the animation for each one; it also lets us adjust the animation-delay for every layer individually, which can lead to some really interesting effects. Let us take this pulsing example:
    CodePen Embed Fallback Right now, the animation is applied to the .layeredText element itself, and I am simply changing its scale:
    .layeredText { animation: pulsing 2s infinite ease-out; } @keyframes pulsing { 0%, 100% { scale: 1; } 20% { scale: 1.2; } } But we can apply the animation to each layer separately and give each one a slight delay. Note that the span is part of the stack. It is a layer, too, and sometimes you will want to include it in the animation:
    .layer { --delay: calc(var(--n) * 0.3s); } :is(span, .layer) { animation: pulsing 2s var(--delay, 0s) infinite ease-out; } Here I am using the :is selector to target both the individual layers and the span itself with the same animation. The result is a much more lively and engaging effect:
    CodePen Embed Fallback Pseudo Decorations
    In the previous chapter, I mentioned that I usually prefer to save pseudo elements for decorative purposes. This is definitely a technique worth using. We can give each layer one or two pseudo elements, add some content, position them however we like, and the 3D effect will already be there.
    It can be anything from simple outlines to more playful shapes. Like arrows, for example:
    CodePen Embed Fallback Notice that I am using the :is selector to include the span here, too, but sometimes we will not want to target all the layers — only a specific portion of them. In that case, we can use :nth-child to select just part of the stack. For example, if I want to target only the bottom twelve layers (out of twenty four total), the decoration only covers half the height of the text. I can do something like :nth-child(-n + 12) , and the full selector would be:
    :is(span, .layer:nth-child(-n + 12))::before { /* pseudo style */ } This is especially useful when the decoration overlaps with the text, and you do not want to cover it or make it hard to read.
    CodePen Embed Fallback Of course, you can animate these pseudo elements too. So how about a 3D “Loading” text with a built-in spinner?
    CodePen Embed Fallback I made a few changes to pull this off. First, I selected twelve layers from the middle of the stack using a slightly more advanced selector: .layer:nth-child(n + 6):nth-child(-n + 18). This targets the layers from number six to eighteen.
    Second, to fake the shadow, I added a blur filter to the span‘s pseudo element. This creates a nice soft effect, but it can cause performance issues in some cases, so use it with care.
    :is(span, .layer:nth-child(n + 6):nth-child(-n + 18))::before { /* spinner style */ } span { /* span style */ &::before { filter: blur(0.1em); } } Face Painting
    But you don’t have to use pseudo elements to add some visual interest. You can also style any text with a custom pattern using background-image. Just select the top layer with the :last-child selector, set its text color to transparent so the background shows through, and use background-clip: text.
    .layer { /* layer style */ &:last-child { color: transparent; background-clip: text; background-image: ... /* use your imagination */ } } Here is a small demo using striped lines with repeating-linear-gradient, and rings made with repeating-radial-gradient:
    CodePen Embed Fallback And, yes, you can absolutely use an image too:
    CodePen Embed Fallback Animating Patterns
    Let us take the previous idea a couple of steps further. Instead of applying a pattern just to the top layer, we will apply it to all the layers, creating a full 3D pattern effect. Then we will animate it.
    We’ll start with the colors. First, we give all the layers a transparent text color. The color we used before will now be stored in a custom property called --color, which we will use in just a moment.
    .layer { --n: calc(var(--i) / var(--layers-count)); --color: hsl(200 30% calc(var(--n) * 100%)); color: transparent; } Now let’s define the background, and we’ll say we want a moving checkerboard pattern. We can create it using repeating-conic-gradient with two colors. The first will be our --color variable, and the second could be transparent. But in this case, I think black with very low opacity works better.
    We just need to set the background-size to control the pattern scale, and of course, make sure to apply background-clip: text here too:
    .layer { --n: calc(var(--i) / var(--layers-count)); --color: hsl(200 30% calc(var(--n) * 100%)); color: transparent; background-image: repeating-conic-gradient(var(--color) 0 90deg, hsl(0 0% 0% / 5%) 0 180deg); background-size: 0.2em 0.2em; background-clip: text; transform: translateZ(calc(var(--i) * var(--layer-offset))); animation: checkers 24s infinite linear; } @keyframes checkers { to { background-position: 1em 0.4em; } } As you can see, I have already added the animation property. In this case, it is very simple to animate the pattern. Just slowly move the background-position, and that is it. Now we have text with a moving 3D pattern:
    CodePen Embed Fallback Variable Fonts
    So far, we have been using a single font, and as I mentioned earlier, font choice is mostly a matter of taste or brand guidelines. But since we are already working with layered text, we absolutely have to try it with variable fonts. The idea behind variable fonts is that each one includes axes you can manipulate to change its appearance. These can include width, weight, slant, or just about anything else.
    Here are a few examples I really like. The first one uses the Climate Crisis font, which has a YEAR axis that ranges from 1979 to 2025. With each year, the letters melt slightly and shrink a bit. It is a powerful ecological statement, and when you stack the text in layers, you can actually see the changes and get a pretty striking 3D effect:
    CodePen Embed Fallback Another great option is Bitcount, a variable font with a classic weight axis ranging from 100 to 900. By changing the weight based on the layer index, you get a layered effect that looks like peaks rising across the text:
    CodePen Embed Fallback And here is an example that might give your browser a bit of a workout. The font Kablammo includes a MORF axis, and adjusting it completely changes the shape of each letter. So, I figured it would be fun to animate that axis (yes, font-variation-settings is animatable), and add a short delay between the layers, like we saw earlier, to give the animation a more dynamic and lively feel.
    CodePen Embed Fallback Delayed Position
    Before we wrap up this second chapter, I want to show you one more animation. By now you have probably noticed that there is always more than one way to do things, and sometimes it is just a matter of finding the right approach. Even the positioning of the layers, which we have been handling statically with translateZ, can be done a little differently.
    If we animate the layers to move along the z-axis, from zero to the full height of the text, and add an equal delay between each one, we end up with the same visual 3D effect, only in motion.
    .layer { --n: calc(var(--i) / var(--layers-count)); --delay: calc(var(--n) * -3s); animation: layer 3s var(--delay) infinite ease-in-out; } @keyframes layer { from { transform: translateZ(0); } to { transform: translateZ(calc(var(--layers-count) * var(--layer-offset))); } } This is a more advanced technique, suited for more complex animations. It is not something you need for every use case, but for certain effects, it can look very cool.
    CodePen Embed Fallback Wrapping Up
    So far, we have brought the layered text effect to life with movement, variation, and creative styling. We also saw how even small changes can have a huge visual impact when applied across layers.
    But everything we have done so far has been pre defined and self contained. In the next chapter, we are going to add a layer of interactivity. Literally. From simple :hover transitions to using JavaScript to track the mouse position, we will apply real-time transformations and build a fully responsive bulging effect.
    3D Layered Text Article Series
    The Basics Motion and Variations (you are here!) Interactivity and Dynamism (coming August 22) 3D Layered Text: Motion and Variations originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
  6. by: Chris Coyier
    Tue, 19 Aug 2025 19:15:02 +0000

    Alex & Chris get into a fairly recent technological change at CodePen where we ditched our Elasticsearch implementation for just using our own Postgres database for search. Sometimes choices like this are more about team expertise, dev environment practicalities, and complexity tradeoffs. We found this change to be much better for us, which matters! For the most part search is better and faster. Postgres is not nearly as fancy and capable as Elasticsearch, but we werent taking advantage of what Elasticsearch had to offer anyway.
    For the power users out there: it’s true that we’ve lost the ability to do in-code search for now. But it’s temporary and will be coming back in time.
    Time Jumps
    00:07 Alex is back! 01:10 The history of search at CodePen 02:15 Why was Elasticsearch not the right choice for CodePen? 09:36 Why we’re using PostGres instead 15:18 What does triggers have to do with search? 21:02 Figuring out what people are actually searching for 24:19 Some of the tradeoffs in changing search
  7. by: Ahmed Alkabary
    Tue, 19 Aug 2025 17:35:01 +0530

    Ansible has become a cornerstone in the realm of automation, enabling efficient management of IT infrastructure through simple, yet powerful automation.
    This online course is meticulously designed to equip you with the essential skills and knowledge required to excel in the RHCE Ex294 Exam, where proficiency in Ansible is a key component.
    By enrolling in this course, you will delve into the intricacies of Ansible, mastering playbooks, roles, modules, and best practices for configuration management.
    Our hands-on approach ensures that you not only understand the theoretical concepts but also gain practical experience in automating tasks across diverse environments.
    Who is this course for?
    Whether you are a seasoned IT professional looking to enhance your automation skills or a newcomer aiming to break into the field, this course offers a structured path towards success in the RHCE Ex294 Exam.
    Even if you are not preparing for the RHCE exam, this is still a good learning resource on Ansible in general.
    This is a fully practical hands-on course for learning Ansible Automation. It will get you up and running with Ansible in no time.
    With this 12-chapter course, you'll learn how to automate your apps deployment and IT infrastructure operations with Ansible.
    As you can see, some chapters of the course are for Pro members only. The Pro membership costs $50 a year and you get this course in e-book format along with e-books on Linux commands and Bash, There is also a SSH video course for absolute beginners.
    If you do not want to spend $50, you can buy this exam preparation course in e-book format for $15 (or less depending on your geographical location).
    Learn Ansible Quickly - eBook for RHCE Certification
    Master All Ansible Automation skills required to pass EX294 exam and become a Red Hat Certified Engineer.
    Get it for $15
  8. by: Abdullah Tarek
    Tue, 19 Aug 2025 13:06:24 +0530

    Welcome to the "Linux for DevOps" course! In the fast-paced world of DevOps, proficiency in Linux is not just a skill but a necessity. 
    Whether you are new to Linux or looking to deepen your skills, this course will guide you through essential concepts, command-line operations, and system administration tasks that form the backbone of Linux in the DevOps world.
    You'll start with the basics, break down the command line (it's not as scary as it sounds!), and dive into the essential tools you need. Whether you're a complete beginner or just looking to level up your skills, we've got you covered.
    No techy language, no unnecessary fluff—just practical learning that you can apply right away. Let's make Linux your friend!
    📶 Difficulty level: Beginner
    ⏳ Time to complete: Approx. 16 hours
    📋 Prerequisite: None
    🗒️ Type: Primarily text-based courseHow to use this course?
    This course is available only for Pro members of Linux Handbook. If you are not a Pro member yet, sign up here and you'll access all our premium courses as long as your subscription is active. Alternatively, you can purchase just this course for a single payment.Linux For DevOps - Courses by Linux HandbookWelcome to the “Linux for DevOps” course! In the fast-paced world of DevOps, proficiency in Linux is not just a skill but a necessity. Whether you are new to Linux or looking to deepen your skills, this course will guide you through essential concepts, command-line operations, and system administration tasks…Courses by Linux HandbookThroughout this course, you will gain practical skills through hands-on exercises, and real-world scenarios.
    The best approach here would be to follow the instructions and commands on your Linux system installed in a virtual machine.
    By the end, you'll have the knowledge and confidence to navigate, administrate, and automate Linux systems, making you a more effective DevOps professional.
    Without further ado, Let's dive in!
  9. Chris’ Corner: Faces

    by: Chris Coyier
    Mon, 18 Aug 2025 16:30:47 +0000

    It’s one of those weeks where I just feel like posting some specimen screenshots of new-to-me typefaces that I like and have saved.
    Haffer XH Babcock Bernie Dumpling Ultramega Gottak Pixel Imperfect Scorekard
  10. 3D Layered Text: The Basics

    by: Amit Sheen
    Mon, 18 Aug 2025 13:46:00 +0000

    Recently, a client asked me to create a bulging text effect. These are exactly the kinds of creative challenges I live for. I explored several directions, JavaScript solutions, SVG filters, but then I remembered the concept of 3D layered text. With a bit of cleverness and some advanced CSS, I managed to get a result I’m genuinely proud of.
    Visually, it’s striking, and it’s also a perfect project to learn all sorts of valuable CSS animation techniques. From the fundamentals of layering, through element indexing, to advanced background-image tricks. And yes, we’ll use a touch of JavaScript, but don’t worry about it right now.
    There is a lot to explore here, so this article is actually the first of a three part series. In this chapter, we will focus on the core technique. You will learn how to build the layered 3D text effect from scratch using HTML and CSS. We will cover structure, stacking, indexing, perspective, and how to make it all come together visually.
    In chapter two, we will add movement. Animations, transitions, and clever visual variations that bring the layers to life.
    In chapter three, we will introduce JavaScript to follow the mouse position and build a fully interactive version of the effect. This will be the complete bulging text example that inspired the entire series.
    3D Layered Text Article Series
    The Basics (you are here!) Motion and Variations (coming August 20) Interactivity and Dynamism (coming August 22) The Method
    Before we dive into the text, let’s talk about 3D. CSS actually allows you to create some wild three-dimensional effects. Trust me, I’ve done it. It’s pretty straightforward to move and position elements in a 3D space, and have full control over perspective. But there’s one thing CSS doesn’t give us: depth.
    If I want to build a cube, I can’t just give an element a width, a height, and a depth. There is no depth, it doesn’t work that way. To build a cube or any other 3D structure in CSS, we have two main approaches: constructive and layered.
    Constructive
    The constructive method is very powerful, but can feel a bit fiddly, with plenty of transforms and careful attention to perspective. You take a bunch of flat elements and assemble them together, somewhere between digital Lego bricks and origami. Each side of the shape gets its own element, positioned and rotated precisely in the 3D space. Suddenly, you have a cube, a pyramid, or any other structure you want to create.
    And the results can be super satisfying. There’s something unique about assembling 3D objects piece by piece, watching flat elements transform into something with real presence. The constructive method opens up a world where you can experiment, improvise, and invent new forms. You could even, for example, build a cute robot bouncing on a pogo stick.
    CodePen Embed Fallback Layered
    But here we’re going to focus on the layered method. This approach isn’t about building a 3D object out of sides or polygons. Instead, it’s all about stacking multiple layers, sometimes dozens of them, and using subtle shifts in position and color to create the illusion of depth. You’re tricking the eye into seeing volume and bulges where there’s really just a clever pile of flat elements.
    This technique is super flexible. Think of a cube of sticky memo papers, but instead of squares, the papers are cut to shape your design. It’s perfect for text, 3D shapes, and UI elements, especially with round edges, and you can push it as far as your creativity (and patience) will take you.
    CodePen Embed Fallback Accessibility note: Keep in mind that this method can easily become a nightmare for screen reader users, especially when applied to text. Make sure to wrap all additional and decorative layers with aria-hidden="true". That way, your creative effects won’t interfere with accessibility and ensure that people using assistive technologies can still have a good experience.
    Creating a 3D Layered Text
    Let’s kick things off with a basic static example, using “lorem ipsum” as a placeholder (feel free to use any text you want). We’ll start with a simple container element with a class of .text. Inside, we’ll put the original text in a span (it will help later when we want to style this text separately from the layered copies), and another div with a class of “layers” where we’ll soon add the individual layers. (And don’t forget the aria-hidden.)
    <div class="text"> <span>Lorem ipsum</span> <div class="layers" aria-hidden="true"></div> </div> Now that we have our wrapper in place, we can start building out the layers themselves. In chapter three, we will see how to build the layers dynamically with JavaScript, but you can generate them easily with a simple loop in your preprocessor (if you are using one), or just add them manually in the code. Check out the pro tip below for a quick way to do that. The important thing is that we end up with something that looks like this.
    <div class="layers" aria-hidden="true"> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <!-- ...More layers --> </div> Great, now we have our layers, but they are still empty. Before we add any content, let’s quickly cover how to assign their indexes.
    Indexing the layers
    Indexing simply means assigning each layer a variable (let’s call it --i) that holds its index. So, the first layer gets --i: 1;, the second gets --i: 2;, and so on. We’ll use these numbers later on as values for calculating each layer’s position and appearance.
    There are a couple of ways to add these variables to your layers. You can define the value for each layer using :nth-child in CSS, (again, a simple loop in your preprocessor, if you’re using one), or you can do it inline, giving each layer element a style attribute with the right --i value.
    .layer { &:nth-child(1): { --i: 1; } &:nth-child(2): { --i: 2; } &:nth-child(3): { --i: 3; } /* ... More layers */ } …or:
    <div class="layers" aria-hidden="true"> <div class="layer" style="--i: 1;"></div> <div class="layer" style="--i: 2;"></div> <div class="layer" style="--i: 3;"></div> <!-- ...More layers --> </div> In this example, we will go with the inline approach. It gives us full control, keeps things easy to understand, and avoids dependency between the markup and the stylesheet. It also makes the examples copy friendly, which is great if you want to try things out quickly or tweak the markup directly.
    Pro tip: If you’re working in an IDE with Emmet support, you can generate all your layers at once by typing .layer*24[style="--i: $;"] and pressing Tab. The .layer is your class, *24 is the number of elements, attributes go in square brackets [ ], and $ is the incrementing number. But, If you’re reading this in the not-so-distant future, you might be able to use sibling-index() and not even need these tricks. In that case, you won’t need to add variables to your elements at all, just swap out var(--i) for sibling-index() in the next code examples.
    Adding Content
    Now let us talk about adding content to the layers. Each layer needs to contain the original text. There are a few ways to do this. In the next chapter, we will see how to handle this with JavaScript, but if you are looking for a CSS-only dynamic solution, you can add the text as the content of one of the layer’s pseudo elements. This way, you only need to define the text in a single variable, which makes it a great fit for titles, short labels, or anything that might change dynamically.
    .layer { --text: "Lorem ipsum"; &::before { content: var(--text); } } The downside, of course, is that we are creating extra elements, and I personally prefer to save pseudo elements for decorative purposes, like the border effect we saw earlier. We will look at more examples of that in the next chapter.
    A better, more straightforward approach is to simply place the text inside each layer. The downside to this method is that if you want to change the text, you will have to update it in every single layer. But since in this case the example is static and I do not plan on changing the text, we will simply use Emmet, putting the text inside curly braces {}.
    So, we will type .layers*24[style="--i: $;"]{Lorem ipsum} and press Tab to generate the layers.
    <div class="text"> Lorem ipsum <div class="layers" aria-hidden="true"> <div class="layer" style="--i: 1;">Lorem ipsum</div> <div class="layer" style="--i: 2;">Lorem ipsum</div> <div class="layer" style="--i: 3;">Lorem ipsum</div> <!-- ...More layers --> </div> </div> Let’s Position
    Now we can start working on the styling and positioning. The first thing we need to do is make sure all the layers are stacked in the same place. There are a few ways to do this as well , but I think the easiest approach is to use position: absolute with inset: 0 on the .layers and on each .layer, making sure every layer matches the container’s size exactly. Of course, we’ll set the container to position: relative so that all the layers are positioned relative to it.
    .text { position: relative; .layers, .layer { position: absolute; inset: 0; } } Adding Depth
    Now comes the part that trips some people up, adding perspective. To give the text some depth, we’re going to move each layer along the z-axis, and to actually see this effect, we need to add a bit of perspective.
    As with everything so far, there are a few ways to do this. You could give perspective to each layer individually using the perspective() function, but my recommendation is always to apply perspective at the parent level. Just wrap the element (or elements) you want to bring into the 3D world inside a wrapper div (here I’m using .scene) and apply the perspective to that wrapper.
    After setting the perspective on the parent, you’ll also need to use transform-style: preserve-3d; on each child of the .scene. Without this, browsers flatten all transformed children into a single plane, causing any z-axis movement to be ignored and everything to look flat. Setting preserve-3d; ensures that each layer’s 3D position is maintained inside the parent’s 3D context, which is crucial for the depth effect to come through.
    .scene { perspective: 400px; * { transform-style: preserve-3d; } } In this example, I’m using a fairly low value for the perspective, but you should definitely play around with it to suit your own design. This value represents the distance between the viewer and the object, which directly affects how much depth we see in the transformed layers. A smaller value creates a stronger, more exaggerated 3D effect, while a larger value makes the scene appear flatter. This property is what lets us actually see the z-axis movement in action.
    Layer Separation
    Now we can move the layers along the z-axis, and this is where we start using the index values we defined earlier. Let’s start by defining two custom properties that we’ll use in a moment: --layers-count, which holds the number of layers, and --layer-offset, which is the spacing between each layer.
    .text { --layers-count: 24; --layer-offset: 1px; } Now let’s set the translateZ value for each layer. We already have the layer’s index and the spacing between layers, so all we need to do is multiply them together inside the transform property.
    .layer { transform: translateZ(calc(var(--i) * var(--layer-offset))); } This feels like a good moment to stop and look at what we have so far. We created the layers, stacked them on top of each other, added some content, and moved them along the z-axis to give them depth. And this is where we’re at:
    CodePen Embed Fallback If you really try, and focus hard enough, you might see something that kind of looks like 3D. But let’s be honest, it does not look good. To create a real sense of depth, we need to bring in some color, add a bit of shadow, and maybe rotate things a bit for a more dynamic perspective.
    Forging Shadows
    Sometimes we might want (or need) to use the value of --i as is, like in the last snippet, but for some calculations, it’s often better to normalize the value. This means dividing the index by the total number of layers, so we end up with a value that ranges from 0 to 1. By normalizing, we keep our calculations flexible and proportional, so the effect remains balanced even if the number of layers changes.
    .layer { --n: calc(var(--i) / var(--layers-count)); } Now we can adjust the color for each layer, or more precisely, the brightness of the color. We’ll use the normalized value on the ‘light’ of a simple HSL function, and add a touch of saturation with a bluish hue.
    .layer { color: hsl(200 30% calc(var(--n) * 100%)); } Gradually changing the brightness between layers helps create a stronger sense of depth in the text. And without it, you risk losing some of the finer details
    CodePen Embed Fallback Second, remember that we wrapped the original text in a span so we could style it? Now is the time to use it. Since this text sits on the bottom layer, we want to give it a darker color than the rest. Black works well here, and in most cases, although in the next chapter we will look at examples where it actually needs to be transparent.
    span { color: black; text-shadow: 0 0 0.1em #003; } Final Touches
    Before we wrap this up, let us change the font. This is of course a matter of personal taste or brand guidelines. In my case, I am going with a bold, chunky font that works well for most of the examples. You should feel free to use whatever font fits your style.
    Let us also add a slight rotation to the text, maybe on the x-axis, so the lettering appears at a better angle:
    .text { font-family: Montserrat, sans-serif; font-weight: 900; transform: rotateX(30deg); } And there you have it, combining all the elements we’ve covered so far: the layers, indexes, content, perspective, positioning, and lighting. The result is a beautiful, three-dimensional text effect. It may be static for now, but we’ll take care of that soon.
    CodePen Embed Fallback Wrapping Up
    At this point, we have a solid 3D text effect built entirely with HTML and CSS. We covered everything from structure and indexing to layering, depth, and color. It may still be static, but the foundation is strong and ready for more.
    In the next chapters, we are going to turn things up. We will add motion, introduce transitions, and explore creative ways to push this effect further. This is where it really starts to come alive.
    3D Layered Text Article Series
    The Basics (you are here!) Motion and Variations (coming August 20) Interactivity and Dynamism (coming August 22) 3D Layered Text: The Basics originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
  11. Bash Scripting

    by: Ahmed Alkabary
    Mon, 18 Aug 2025 15:05:34 +0530

    Whether you are a beginner or seasoned Linux user, you cannot escape Bash.
    From school curriculum to sysadmin tasks, from setting up your homelab to working as DevOps, Bash scripting is present everywhere.
    It is time that you get familiar with the essentials of bash shell scripting, and this course intends to do the same.
    📶 Difficulty level: Beginner
    ⏳ Time to complete: Approx. 3 hours
    📋 Prerequisite: Absolute basics of getting around Linux terminalWhat will you learn?
    In this Bash course for beginners, you'll learn the following:
    Creating and running Hello World bash script Understanding variables Passing arguments to your bash scripts Using bash arrays Doing mathematical calculations in bash Manipulating strings Adding conditional logics in bash Creating loops Using functions Automating some small but practical tasks with bash 💡Each lesson in this course has practice exercises, too, so that you can test what you just learned.How to use this course?
    You can simply read the text and see things in action.
    Although, it is highly recommend that you follow the instructions and steps on your own system. That will be the best approach here.
    The course is divided into chapters. The chapters of the series are always visible in the left sidebar and you can easily switch between them. The sub-sections of a chapter are located in the right sidebar.
    The next and previous chapter navigation are also present at the bottom of each chapter.
    Each chapter has sample examples and practice exercises to test your learnings.
    For any doubts, you can always use the comment section available under each chapter.
    Let's start scripting bash!
  12. by: Bhuwan Mishra
    Mon, 18 Aug 2025 14:33:58 +0530

    Are you tired of theory-heavy tutorials that leave you confused when it’s time to actually manage services on a Linux system?
    Welcome to "systemd Playbook: Learn by Doing", a hands-on, text-based course designed to turn you into a confident systemd user through real-world scenarios and sample labs. You are not reading here, you are doing it and learning it.
    Whether you're a Linux beginner trying to grasp system services or a sysadmin looking to level up your systemd knowledge—this course will meet you where you are and take you deeper.
    📶 Difficulty level: Intermediate
    ⏳ Time to complete: Approx. 8-12 hours (if you are doing it)
    📋 Prerequisite: Understanding of Linux command line and system
    🗒️ Type: Primarily text-based course📚 What will you learn?
    Module 1: Understanding systemd Core: Grasp the concepts of units, states, targets, and dependencies.
    Module 2: Crafting Robust Unit Files: Write, modify, and debug unit files for services, sockets, timers, and paths.
    Module 3: Mastering journalctl: Dig into advanced log filtering, persistent logs, and runtime analysis.
    Module 4: Automating with Timers: Replace cron jobs with systemd timers for smarter, event-driven automation.
    Module 5: Resource Management with cgroups: Use systemd to manage CPU, memory, and I/O limits via cgroup integration. Isolate and control services with ease.
    Module 6: Networking with systemd-networkd: Learn how to configure static IPs, bridges, VLANs, and DHCP with systemd-networkd.
    Module 7: Debugging & Troubleshooting systemd: Use built-in tools and boot options to diagnose startup failures. Practice troubleshooting with broken units, dependency issues, and journal logs.
    How to use this course?
    This course is available only for Pro members of Linux Handbook. If you are not a Pro member yet, sign up here and you'll access all our premium courses as long as your subscription is active.
    Unlock the course with Pro membership Throughout this course, you will gain practical skills through hands-on exercises, and real-world scenarios.
    The best approach here would be to follow the instructions and commands on your Linux system installed in a virtual machine or a dedicated test machine.
    By the end, you'll have the knowledge and confidence to manage your Linux system more effectively using systemdl.
  13. by: Abhishek Prakash
    Mon, 18 Aug 2025 06:09:19 GMT

    Once upon a time, Nautilus allowed accessing the root directory from 'Other locations' option in the sidebar.
    This tiny but useful option has disappeared in the recent versions. But you can still access root folder in Nautilus by typing / in the address bar.
    Let's see it in a bit more detail in this quick tutorial for Linux beginners.
    Nautilus is the default file explorer in GNOME desktop environment and thus it should be applicable for Ubuntu, Fedora and many other distributions that use GNOME.
    Access root directory from Nautilus
    Open the Nautilus file manager. You'll notice that there is an address bar on the top that displays like Home or the current location. Click on it and you'll see that you can enter text here.
    All you have to do is to enter / here. That's it.
    Click on the address bar and enter /If it helps, here's a video of the entire process to show things better.
    0:00 /0:13 1× Access root directory as a normal user
    There is one tiny thing to note here. You'll be accessing the root directory as a normal user. So while you can read most files, you won't be able to create new or modify existing ones.
    If you want that, you can easily do that. Let me show that in the next section.
    Access root directory as a root user
    Open the Nautilus file explorer and type the following in the address bar:
    admin://You'll be asked to enter the password. That will be your own user account password.
    Here's a video to show things in a better way.
    0:00 /0:15 1× When you access the root directory as an admin (sudo), you can make changes here, create new files etc. This comes handy in situations where you have to make changes to config files and you want to avoid the terminal. Files opened from here will be opened in graphical text editor, easier to modify.
    This is different from opening any file as root trick I shared earlier.
    Open Files and Folders as Admin in Nautilus File ManagerLearn to add an “Open as Administrator” option in the right click context menu in Nautilus file manager in Ubuntu and other Linux distributions.It's FOSSAbhishek PrakashConclusion
    This is one of the many Nautilus tweaks that you can use to get more out of it.
    15 Ways to Tweak Nautilus File Manager in LinuxNautilus, aka GNOME Files, is a good file manager with plenty of features. You can further enhance your experience by using these extensions, tweaks and tips.It's FOSSAbhishek PrakashIt's quite powerful and it is always good to explore the less obvious features of your regular tools. In that regard, you may also want to learn a thing or two about utilizing the search feature in Nautilus.
    Mastering Nautilus File Search in Linux DesktopBecome a pro finder with these handy tips to improve your file search experience with GNOME’s Nautilus file search.It's FOSSSreenathAs I mentioned initially, the option to access root files used to be under the 'Other locations' in the left sidebar. It is removed and replaced by a clandestine method. I think the rational behind this decision was to avoid accidental changes to root files. That's just my guess. I let you enjoy this quick Nautilus tip.
  14. Kubernetes Operator

    by: Sachin H R
    Mon, 18 Aug 2025 10:08:30 +0530

    Dive deep into the world of Operators and learn how to effortlessly manage and scale your containerized applications.
    Whether you're a seasoned pro or just starting with Kubernetes, this course is designed to equip you with the skills needed to automate and streamline your operations.
    There is a sample business scenario and we shall see how to use Kubernetes Operator concept in this scenario. You'll learn to build, test and deploy Kubernetes Operator using Kubebuilder as well as Operator SDK.
    📶 Difficulty level: Intermediate
    ⏳Time to complete: Approx. 1-2 hours (Revision chapters can be skipped)
    📋 Prerequisite: Linux command line basics and familiarity with container and Kubernetes concepts.
    📹 Type: Primarily video courseWhat will you learn?
    With the Kubernetes Operator course, you'll learn:
    Building custom Operators Deployment strategies for enhanced scalability Practical hands-on exercises The course is divided into the following chapters:
    Chapter 1: Setting up your lab environment Chapter 2: Docker and Kubernetes concepts (Revision chapter) Chapter 3: Crash course on Go language (Revision chapter) Chapter 4: Sample project scenario (problem Kubernetes Operator will solve) Chapter 5: Build, test, and deploy Kubernetes Operator Using Kubebuilder Chapter 6: Build, test, and deploy Kubernetes Operator Using Operator SDK Basically, the course refreshes the essential concepts of Kubernetes and Go. After that, it presents you with a problem scenario of a sticker organization. And then, you'll learn the practical application of building a Kubernetes operator using Kubebuilder and operator-sdk.
    👩‍💻 Who is this course for?
    DevOps Engineers System Administrators Kubernetes enthusiasts Who is your instructor?
    Sachin H R
    Seasoned DevOps Engineer with over 5 years of experience specializing in Kubernetes, Jenkins, and automation for DevOps, SRE, and CloudOps. He holds multiple certifications, including CKA, AZ-104, and ArgoCD Fundamentals, and has instructed over 50,000+ students globally through platforms like KillerCoda. Sachin has extensive expertise in managing cloud infrastructure on Azure, optimizing CI/CD pipelines, and automating processes with tools like Terraform and Helm. He is passionate about leveraging technology to drive efficiency and has successfully streamlined environment creation and deployment processes.
    How to use this course?
    This course is available only for Pro members of Linux Handbook. If you are not a Pro member yet, sign up here.Get Hands-on! We believe in learning by doing. For the most optimal experience, we recommend following the instructions and commands directly on your machine.
    By the end of this course, you'll master automation techniques, optimize application deployment and enhance your Kubernetes skill set.
    Without further ado, Let's dive into the first module!
  15. by: Ted LeRoy
    Mon, 18 Aug 2025 09:07:23 +0530

    Linux and its famed command line is vast. But you have to start somewhere.
    If you are completely unfamiliar with the Linux commands, terminal and the bash shell, this micro course is for you.
    In an hour or two, you'll get acquainted with the most common Linux commands, learn to seek help from man pages and learn to navigate through bash shell.
    📶 Difficulty level: Beginner
    ⏳ Time to complete: Approx. 1 hour
    📋 Prerequisite: None
    📹 Type: Primarily video courseWhat will you learn?
    In this crash course on Linux commands, you'll learn the following:
    Know your way around the Linux terminal and command line Introduction to bash shell Understanding man pages to get help on a Linux command Case sensitivity in Linux Get familiar with the concept of superuser and root Most common Linux commands Navigating the Bash shell Prerequisite
    There is no requirement as such. You should know how to use a computer at least.
    The course presumes that you are an absolute beginner to Linux commands. But you can still use it to brush up the basics if you have forgotten your ways around the command line.
    Who is your instructor?
    Ted LeRoy is an Enterprise Security Architect, providing a variety of information and physical security guidance to his business.
    Ted is also best-selling online instructor specializing in technology related courses.
    He has over 20 years in Information Technology and experience in Windows and Linux administration, web server and email administration, and network and firewall administration with Cisco, Juniper, and pfSense devices.
    How to use this course?
    💡This course is available to both free and Pro members of Linux Handbook. If you are not a member yet, sign up for free here. You can simply watch the videos to see things in action.
    Although, it is highly recommend that you follow the instructions and steps on your own system. That will be the best approach here.
    For that, you should have access to a Linux system. You can use WSL on Windows or install it in a VM. Of course, you can use a full Linux desktop. You may also use a cloud server. Any Linux distribution should work fine.
    The course also contains text. So if you have to revise the lessons, you can quickly go through the text instead of going through the video again.
    The course is divided into chapters. The chapters of the series are always visible in the left sidebar and you can easily switch between them. The sub-sections of a chapter are located in the right sidebar.
    The next and previous chapter navigation are also present at the bottom of each chapter.
    For any doubts, you can always use the comment section available under each chapter.
    Let's start learning Linux!
  16. SSH Fundamentals

    by: Abhishek Prakash
    Sun, 17 Aug 2025 18:23:30 +0530

    SSH has become a must know tool for sysadmins and developers alike. Often, your production or test server is in a remote location and then you have to use the ssh command to connect to the remote server from your local system. And then you run and execute commands on the remote server from your local machine through the SSH connection.
    This is an absolute beginner's course for Linux beginners, sysadmin beginners, network admin beginners, software developers, or anyone who wants to use SSH. The course assumes that you have no previous knowledge of SSH, terminal, or Linux commands.
    📶 Difficulty level: Beginner
    ⏳ Time to complete: Approx. 4 hours
    📋 Prerequisite: None
    📹 Type: Primarily video courseWhat will you learn?
    In this crash course on Linux commands, you'll learn the following:
    What is SSH and why you should use it Set up a lab environment with VirtualBox Use SSH between two systems Basic Linux commands Basic text editing in the terminal Configure key based authentication Best practices to secure SSH Copy files between remote systems with SCP Maintain continuous SSH connection using screen or nohup commands Prerequisite
    There is no requirement as such. You should know how to use a computer at least.
    The course presumes that you are an absolute beginner to SSH and Linux commands. But you can still use it to brush up the basics if you have forgotten your ways around SSH.
    Who is your instructor?
    Ted LeRoy
    An Enterprise Security Architect, Ted has been providing a variety of information and physical security guidance to businesses. He is also a best-selling online instructor specializing in technology related courses. He has over 20 years in Information Technology and experience in Windows and Linux administration, web server and email administration, and network and firewall administration with Cisco, Juniper, and pfSense devices.
    How to use this course?
    💡This course is available only Pro members of Linux Handbook. If you are not a Pro member yet, sign up here. You can simply watch the videos to see things in action.
    Although, it is highly recommend that you follow the instructions and steps on your own system. That will be the best approach here.
    The course also contains text. So if you have to revise the lessons, you can quickly go through the text instead of going through the video again.
    The course is divided into chapters. The chapters of the series are always visible in the left sidebar and you can easily switch between them. The sub-sections of a chapter are located in the right sidebar.
    The next and previous chapter navigation are also present at the bottom of each chapter.
    For any doubts, you can always use the comment section available under each chapter.
    Let's start learning SSH!
  17. by: Abdullah Tarek
    Sun, 17 Aug 2025 17:06:24 +0530

    Did you know that Docker dominates the containerization market with a huge share of over 80%?
    That's right, and as a future DevOps Engineer, you will be the one responsible for managing these Docker containers.
    I'll cover everything you need to know about Docker in this series to help you get started and become a Docker expert by the end.
    📶 Difficulty level: Beginner
    ⏳ Time to complete: Approx. 8 hours
    📋 Prerequisite: Basic Linux commands and networking knowledge
    🗒️ Type: Primarily text-based courseWhat will you learn?
    In this Docker course, you'll learn the following:
    Introduction to Docker Setting up your Docker environment Manipulating Docker containers Working with Docker images Volumes and data persistence Exploring Dockerfiles Docker Compose Docker Networking Prerequisite
    Basic Linux knowledge: Terminal navigation & file system concepts Networking Fundamentals: IP addresses, ports, and TCP/IP How to use this course?
    This course is available only for Pro members of Linux Handbook. If you are not a Pro member yet, sign up here.Get Hands-on! We believe in learning by doing. You'll engage in practical exercises that simulate real-world scenarios throughout the course. For the most optimal experience, we recommend following the instructions and commands directly on your machine.
    By the end of this course, you'll have the knowledge and confidence to navigate the world of containerization, building and managing your containerized applications easily.
    Without further ado, Let's dive into the first chapter!
  18. by: Abhishek Prakash
    Sun, 17 Aug 2025 12:20:49 +0530

    Once you have a little bit of idea about the terminal, Linux command structure, path and directory hierarchy system, you should know about handling files in Linux.
    As a Linux user, you have to deal with all kinds of files and all kinds of file operations.
    You should know how to display the contents of files, create new files, change their properties. You should also know how to look for files and edit them.
    In this section of Linux Handbook, you'll learn about various Linux commands that you can use for file managements.
    I have categorized the commands into sections so that it is easier for you to follow.
    Basic file commands
    Form listing files to copying them, these commands will help you.
    Command Description Example ls List files in a directory ls command examples cp Copy files and directories cp command examples mv Move (rename) files and directories mv command examples ln Create links to files and directories ln command examples Directory operation commands
    These commands will handle creating, moving around and removing directories.
    Command Description Example cd Navigate between directories cd command mkdir Create new directories mkdir command rmdir Delete the empty directories rmdir command File viewing commands
    View the contents of a file in Linux terminal with these commands:
    Command Description Example cat Join several input files by sequentially or display contents cat command head Print a specified number of lines from the beginning of the file head command tail Outputs the last parts of a single file or multiple files tail command less Viewing text files less command more Opens a text file in page views more command File editing commands
    Edit files in the terminal with these editors:
    Command Description Example Vim Popular command line text editor Vim commands Emacs Popular Text Editor Emacs commands File properties commands
    Learn about the timestamps, size, number of lines and many more such attributes of files with these commands:
    Command Description Example wc Count the number of lines, words and characters of text file wc command chgrp Changing the group of a file or directory chgrp command touch Changing file timestamps/creating new empty file touch command chmod Changing the mode of access chmod command du Checking the size of directory du command file Determine actual type of file and related information file command stat Get file attribute information stat command chown Change user and group ownership of a file/directory chown command chattr Make a file 'undeletable' even by root chattr command File searching commands
    These commands will let you search for files on your system.
    Command Description Example which Locates an executable file in your shell’s search path which command locate Preform a super quick search for files locate command xargs Build and execute commands from standard input xargs command find Searching for files and directories find command File manipulation commands
    Manipulate the output of text files with these commands
    Command Description Example grep Find patterns in files grep command cut Removing “columns” or data on each line of a text file cut command paste Merges several input files to produce a new delimited text file paste command tee Reads from standard input and writes to both standard output and files tee command expand Convert the tabs into spaces expand command tr Translating one type of characters into another tr command sort Sorting the contents of the text files sort command uniq Filtering duplicate text from a file uniq command
  19. Introduction to Flatpak

    by: Sagar Sharma
    Sun, 17 Aug 2025 09:54:02 +0530

    I have used Flatpak packages since I was introduced to them. The reason? They solve one of the core problems every Linux desktop user faces: managing packages on Linux.
    Yes, I'm aware of the fact that there are default package managers such as apt on Debian-based distros, pacman on Arch and yum on RHEL-based distros. For the most part, these package managers do a great job (for the most part - I'm repeating again).
    When you change your Linux distribution, you need to learn the new package manager along. Furthermore, managing dependencies between two packages might conflict and that's where the Flatpak comes in.
    What is Flatpak?
    Flatpak is a package management utility for Linux that allows developers to distribute applications in a sandboxed environment, isolated from the rest of the system.
    Flatpak packages are portable and are designed to run across different Linux distributions, eliminating dependency issues that may occur with traditional package managers.
    Another good part is that Flatpak packages come bundled with their own libraries and dependencies. So you don't have to worry about dependencies. This solves a huge problem as on a Linux system, different packages/services might require different versions of one package.
    For example, if you're running GNOME and try to install a KDE application using the default package manager, you will find the dependency list is huge in size, and even bigger than the actual package. This can be solved using Flatpak.
    Applications installed via Flatpak run in an isolated environment with limited access to system resources. This enhances security by preventing compromised apps from affecting the rest of the system.
    Using Flatpak, you can install multiple versions of the same package. Sure, it requires some extra effort but it is doable.
    What are the pros and cons of Flatpak?
    Like any software solution, Flatpak comes with its own pros and cons. Here, I will be addressing the pros and cons of using Flatpak so you can decide whether Flatpak will be powering your system or not.
    Pros of using Flatpak
    Runs on any Linux distribution (if you install Flatpak support on it). Often provides the most recent version of the package. Ability to install packages for individual users without affecting the whole system. Flatpak packages run in an isolated environment which enhances security by limiting access to system resources. Flatpak packages come bundled with all the necessary dependencies, avoiding conflicts with the system. Flatpak is decentralised which means it can be hosted and updated independently without relying on a single repository. Cons of using Flatpak
    As the packages are bundled with all the dependencies, the size of the package is quite large compared to what you get with the default package manager. Flatpaks are isolated and are only given limited access to the system which often causes trouble. For example, by default, I can not send files located inside the root directory from Discord (Flatpak version) due to limited access. Many times, Flatpaks won't pick the system-wide theme. Sure, you can theme Flatpak but it requires additional steps. It only works when you have a desktop environment installed. This means you can not run Flatpak on the Ubuntu server. Should you use Flatpak?
    If you love using the most recent version of packages and want to install multiple versions of the same package without worrying about the dependency resolution, then Flatpak can be a great choice.
    In fact, distros like Fedora silverblue, elementaryOS, Endless OS, etc. come pre-configured with flatpak packages.
    Just one con and that's the filesize. In my opinion, it will only affect users with low-end specs so even if you have a moderately spaced computer, you should give it a try.
    This section of Linux Handbook gives you the necessary resources to start using Flatpaks on your Linux system.
  20. Covering hidden=until-found

    by: Geoff Graham
    Fri, 15 Aug 2025 12:55:36 +0000

    Filing this in the “Missed First Time Around” category. It popped up in the Firefox 139 release notes and I was, like, ooo neat. Then I saw it’s been in Chrome since at least 2022. And as I wrote this, it landed in Safari Technology Preview 125. So there you have it.
    Turns out there are a few good posts and tutorials about hidden=until-found floating out there, so I thought I’d jot down a few key takeaways for later reference.
    It makes hidden content “findable”
    Short story: Slapping hidden=until-found on an element in HTML enables any hidden content within the element to be findable in the browser with in-page search.
    <div hidden="until-found"> <!-- hidden content --> </div> You’ll see, or more accurately not see, that the content is hidden with that in place:
    CodePen Embed Fallback It’s content-visibility: hidden under the hood
    The browser takes that as a hint to hide the content and does so by implicitly setting content-visibility: hidden on the element in the user agent styles.
    If we do a Ctrl+F on the keyboard to activate in-page search and enter a query, then a match reveals the content, highlighting said matched query.
    Why we need this
    That’s what I was asking myself when I started digging into this a little deeper. The most prominent example of it being used is from the Chrome for Developers docs as a faux-accordion. You know, a series of panels that open and close on click.
    CodePen Embed Fallback But isn’t that a solved deal now that we have the <details> element at the ready? May as well use a semantic disclosure widget to, you know, disclose content. Indeed, browsers also set content-visibility: hidden on the ::details-content portion of the element that holds the content.
    I’m pretty sure <details> was not as widely supported in 2022 as it is today. It’s actually part of Interop 2025 and notice that one of the functionalities mentioned is the capability for in-page search. Chrome already supports it. Firefox recently shipped it (ostensibly as part of the hidden=until-found release). And Safari will presumably get there with Interop 2025. The example from the Chrome for Developers post demonstrates an approach for working around a not-fully-supported <details> element and now we have it.
    So, why hidden=until-closed?
    I don’t know. I’m sure there’s a good use case for hiding content accessibly in some fashion while making it searchable. I just can’t think of it off the top of my head. I mean, we have popover as well, but that takes a different approach with display: none which completely removes the content from in-page search.
    Browser support and polyfill
    We’ve already established that Chrome and Firefox are on board. Safari is the bigger holdout, but knowing that making the hidden content in <details> findable is part of Interop 2025 (and Firefox’s corresponding support for it as part of that effort) makes me think it’s around the corner. (Turns out that hunch was correct because it landed in Safari Technology Preview 125 after writing this.)
    In the meantime, though, is it worth using hidden=until-found? Because if we’re aiming for a consistent cross-browser experience, we’d need to do some sort of swap between content-visibility: hidden to hide the content and content-visible: auto to reveal it.
    Nathan Knowler expertly explains the conundrum this creates. We can’t set content-visibility: hidden on something without also removing it from in-page search. The hidden=until-found attribute works exactly like content-visibility: hidden but maintains that in-page search still works. In other words, we can’t polyfill the feature with content-visibility.
    Thanks, Nathan, for going down the massive rabbit hole and finding a solution that leverages the Shadow DOM to look for the HTML attribute, check support, and revert its properties when needed to accessibly hide the content visually without fully nuking it from being found.
    Styling
    Seems like there isn’t much to say about styling something that ain’t visible, but notice that the in-page search feature highlights content that matches the search query.
    Looks like we may get a new ::search-text pseudo that allows us to select the matched query and style the highlight color in the CSS Pseudo-Elements Module Level 4 specification, which is currently in Editor’s Draft status at the time I’m writing this.
    What about multiple matches? The current selection gets a different highlight from subsequent matches.
    We’ll presumably, according to the spec, be able to combine ::search-text with the :current pseudo-class to target the current match: ::search-text:current.
    If you’re thinking we might get to mix-and-match ::search-text with the corresponding :past and :future pseudo-classes, I’m afraid the spec says nay. But it does not shut the door on it completely:
    Anything else?
    Not really, but I do like the note at the end of Christian Shaefer’s “Rethinking Find-in-Page Accessibility” post that says consideration needs to go into what happens after a search query matches content on the page. Currently, the content remains visible even after in-page search is closed or canceled. Perhaps we’ll need some other HTML hint for that.
    Links
    A dump of things I found and used while researching this:
    “Making collapsed content accessible with hidden=until-found” (Joey Arhar) “Polyfilling hidden until-found” (Nathan Knowler) “Hidden until found” (James McGrath) “The hidden=until-found HTML attribute and the beforematch event” (WICG explainer) “Announcing Interop 2025” (WebKit Blog) Bugzilla Ticket #1761043 MDN content update (GitHub) ::search-text (CSS Pseudo-Elements Module Level 4) Covering hidden=until-found originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
  21. by: Geoff Graham
    Fri, 15 Aug 2025 12:26:00 +0000

    I love “re-learning” things I thought I knew. HTML is full of those opportunities (case in point, like today) since it’s where you typically start learning about web development. And in those early days, you don’t know what you don’t know.
    So, thanks Jim Nielsen for giving me a reason to give URL patterns another look. It’s easy to take URL superpowers for granted, even if you already have these patterns under your belt.
    The patterns:
    <a href=""> <!-- Scrolls to the top of a document --> <a href="#"> <!-- Reloads the current page, preserving the search string but removing the hash string (if present). --> <a href="."> <!-- Reloads the current page, removing both the search and hash strings --> <a href="?"> <!-- Reloads the current page, removing both the search and hash strings (keeps `?`) --> <a href="data:"> <!-- Link to data URLs, like text fragments --> <a href="video.mp4#t=10,20"> <!-- Links to specific parts of a media file --> But do yourself a favor and read Jim’s full post. He gets way more into the weeds, referencing the specification and stress testing different configurations. I mean, this is gold:
    Me neither.

    A Few Things About the Anchor Element’s href You Might Not Have Known originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
  22. by: Abhishek Prakash
    Fri, 15 Aug 2025 16:25:44 +0530

    Good news! The new ebook I was talking about in the previous newsletter is here. It's basically a collection of around a 100 little command line tips that I have shared on Twitter and in this newsletter.
    Pro members can download this book for free from here.
    Linux Command NuggetsMaster powerful Linux command-line tips in minutes, not hours. Say goodbye to endless Googling and hello to a faster, smarter terminal workflow.Linux HandbookAbhishek PrakashI consider it a 'work-in-progress' as I am looking for feedback and suggestions to improve the quality and style of this little ebook.
    Last week to get the lifetime membership of Linux Handbook for just $99.
    For a single payment, you get the paid membership to download all 7 ebooks and access all premium 7 courses. No recurring payment, you pay just once and enjoy forever.
    Get Lifetime membership for just $99 (instead of $139)  
     
      This post is for subscribers only
    Subscribe now Already have an account? Sign in
  23. Linux Command Nuggets

    by: Abhishek Prakash
    Fri, 15 Aug 2025 15:59:47 +0530

    This book does not teach you to use the Linux commands in the traditional sense. It assumes that you are already familiar with the common Linux commands and use them occasionally or regularly on your Linux system(s).
    This book presents you with small tips on using those commands that you probably didn’t know. Like sorting the top command by RAM usage or creating multiple folders at once that match a given pattern.
    It lets you go, "Wow! I didn't know that this command could do that."
    You will love discovering these small nuggets of command line tips and when you put them into practice, they will help you become slightly more efficient at the Linux command line.
    It's a quick, light reading. You can store it on your Kindle and have a look at it on a lazy afternoon. Highlight the ones that you liked for quick access in the future.
     
     
      This post is for paying subscribers only
    Subscribe now Already have an account? Sign in
  24. by: Geoff Graham
    Thu, 14 Aug 2025 13:10:11 +0000

    My brain can’t help but try to make connections between seemingly disparate ideas. And that’s what happened yesterday when I read:
    Hidde’s “Can components conform to WCAG?” Joas’s “Automating Design Systems” Zell’s “We Might Need Something Between Root and Relative CSS Units for “Base Elements” What we have is:
    A semantic issue of saying that individual components can conform to WCAG. We might be able to “optimize” a component for accessibility, but accessible experiences are composed of complete web pages containing components designed to work together. A desire to automate all things in a design system. Update it here and it updates all over. But there’s still this matter of knowing if changing one component in a design system impacts other components. A musing over a possible new CSS “base” unit. The idea is to set one element as a “base” that allows other elements to inherit its font-related properties as roots for better vertical rhythm between elements, no matter their proximity. Makes me think:
    Could a base unit in CSS make components more interoperable? Like, if buttons could inherit its font size depending on what other component it is in? Sorta like container query units, but without needing additional wrappers in the markup. Would that allow design systems changes to cascade between components more smoothly? Will properties inherited through a base element make components more optimized for WCAG conformance when implemented on a page with other components? Does this overlap with CSS @scope at all? Sorry for the shower thoughts, but it’s interesting to consider how these ideas work together.
    On Accessibility Conformance, Design Systems, and CSS “Base” Units 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.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.