Blogger

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

by: Abhishek Kumar Sat, 10 May 2025 06:49:14 GMT Sometimes I do weird things for the sake of it. Like once, I used Raspberry Pi as a WiFi extender for fun. This is one of those stories. I had an old pair of hi-fi speakers gathering dust in a forgotten corner of the house. The only problem? They needed a Bluetooth dongle and DAC to work, and I didn’t have either. But with my love for DIY and a determination to salvage my musical aspirations, I decided to take a different route. I thought of giving my old speakers a new life by if converting them into Bluetooth speakers. In this article, I’ll take you through my journey of reviving these old speakers. From putting together a DAC, connecting both speakers, and grappling with my first soldering iron (spoiler: it wasn’t pretty), to finally using my old Raspberry Pi 3 as the brains behind a fully functional Bluetooth speaker system. It wasn’t perfect, but the experience taught me a lot and gave me a setup that delivers impressive sound without spending a fortune. Let’s dive into the details! What I usedI gathered a mix of new and existing components. Here’s everything I used for this project: Two Hi-Fi Speakers: These were the stars of the show— old obviously that had been lying unused for years. Their sound potential was too good to ignore, and this project was all about giving them a second chance. Yep, I forgot to clean the speakers before capturing this pictureDAC Chipset: A Digital-to-Analog Converter (DAC) was essential to drive the speakers. I used a basic DAC module that supported input from a 3.5mm jack and output for the speakers. You need to check your speakers before ordering a DAC for yourself, It provides a stereo output of 30W each and requires 12-24VSoldering Iron: This was my first time using a soldering iron, and let’s just say my initial attempts were far from perfect. I used it to solder the speaker wires to the DAC, which was crucial for connecting the entire system. Simple ol' soldering iron, nothing fancy here. It gets the job done.12V 2A Power Supply: To power the DAC, I used a 12V 2A adapter. Make sure your power supply matches the specifications of your DAC module for safe and efficient operation. 3.5mm Audio Cable: This was used to connect the DAC’s audio output to the Raspberry Pi’s 3.5mm jack. Raspberry Pi 3: I used an old Raspberry Pi 3 that I had lying around. Any Raspberry Pi model with a 3.5mm jack will work for this project, but if you have a newer model with HDMI-only output, additional configuration may be required. My Raspberry Pi 3With these items in hand, I was ready to transform my speakers into a powerful Bluetooth system. If you’re planning to try or follow along this project, you should likely already have some of these components at home, making it a cost-effective way to repurpose old equipment. Connecting the DAC with the SpeakersThe DAC I ordered didn’t come with convenient connectors, so I had to get my hands dirty—literally. I rummaged through my dad’s toolbox and found an old soldering iron, which I hadn’t used before. After watching a couple of quick tutorials online, I felt brave enough to give it a shot. Soldering the speaker wires to the DAC wasn’t as straightforward as I had imagined. But after a few tries, and a lot of patience, I managed to secure the wires in place. Here's you can see my exceptional soldering skills Before closing the speaker lids, I decided to test the connection directly. I powered up the DAC, connected it to the speakers, and played some music through a temporary audio input. To my relief, sound filled the room. It wasn’t perfect yet, but it was enough to confirm that my soldering job worked. With the DAC connected, I was ready to move on to the next part of the build! Adding Bluetooth functionality with Raspberry PiThere are countless guides and projects for turning a Raspberry Pi into a Bluetooth receiver, but I stumbled upon a GitHub project that stood out for its simplicity. It is called Raspberry Pi Audio Receiver. The project had a script that automated the entire setup process, including installing all necessary dependencies. Here’s how I did it: Download the Installation ScriptFirst, I downloaded the script directly from the GitHub repository: wget https://raw.githubusercontent.com/nicokaiser/rpi-audio-receiver/main/install.shRun the Scriptbash install.shFor first-timers or DIY enthusiasts new to this, the installation screen might seem a bit overwhelming. You’ll be prompted several times to install various components and make decisions about the setup. Don’t worry, I’ll break down what’s happening so you can follow along with confidence. Hostname: The script lets you set up the hostname (the internal name for your Raspberry Pi) and a visible device name (referred to as the "pretty hostname"). This visible name is what other devices will see when connecting via Bluetooth, AirPlay, or Spotify Connect. For example, you could name it something like DIY-Speakers. Bluetooth Configuration: The script installs Bluetooth-related packages and sets up an agent to accept all incoming connections. The Pi is configured to play audio via ALSA (Advanced Linux Sound Architecture), and a smart script disables Bluetooth discoverability whenever the Pi is connected to a device. AirPlay 2 Setup: This feature installs Shairport Sync, allowing the Raspberry Pi to act as an AirPlay 2 receiver. It’s perfect for Apple users who want to stream music directly from their devices. Spotify Connect: Finally, the script installs Raspotify, an open-source Spotify client for Raspberry Pi. This enables the Raspberry Pi to act as a Spotify Connect device, letting you stream music straight from the Spotify app on your phone or computer. Each step is straightforward, but you’ll need to be present during the installation to approve certain steps and provide input. This process takes about 5 minutes to complete, but once done, your Raspberry Pi transforms into a multi-functional audio receiver, supporting Bluetooth, AirPlay 2, and Spotify Connect. Testing the DIY Bluetooth speakersWith the hardware setup complete and the Raspberry Pi configured as a Bluetooth audio receiver, it was time for the moment of truth - testing the DIY speakers. The goal was to see how well this entire setup performed and whether all the effort I put in was worth it. To test the system, I decided to connect the speakers to my smartphone via Bluetooth. Sorry for the image quality, had to use an old phone to capture this imageAfter pairing, I opened my music app and selected a random song to play. The sound flowed seamlessly through the speakers. I’ll admit, hearing music come out of the old hi-fi speakers felt incredibly rewarding. It was proof that all the soldering, scripting, and configuring had paid off. How did It perform?Audio Quality: The sound quality was surprisingly good for a DIY setup. The DAC delivered clear audio with no noise, and the hi-fi speakers held up well despite being unused for a long time.Bluetooth Range: The range was decent since my Pi is in this plastic enclosure, I could move around my room and still maintain a stable connection.Responsiveness: There was no noticeable delay or lag in audio playback, whether I streamed music or used Spotify Connect.Final thoughtsThis project was a blend of frustration, curiosity, and pure DIY joy. What started as an attempt to salvage some old, forgotten hi-fi speakers turned into a rewarding learning experience. From figuring out how to solder for the first time (and not doing a great job) to repurposing my old Raspberry Pi 3 as a Bluetooth receiver, every step had its challenges but that’s what made it so satisfying. The best part? Hearing music blast through those old speakers again, knowing I brought them back to life with a bit of effort and creativity. It’s proof that you don’t always need to spend a fortune to enjoy modern tech; sometimes, all it takes is what you already have lying around and a willingness to tinker. If you’ve got old speakers collecting dust, I highly recommend giving this a shot. It’s not just about the outcome; the journey itself is worth it. How I Turned my Raspberry Pi into a Wi-Fi extenderHere is how I re-purposed my Raspberry Pi to a Wi-Fi extender! A good way to spend your weekend with your Raspberry Pi.It's FOSSAbhishek Kumar 💬 And if you did something like this in your home setup, please share it in the comments. I and other readers may get some interesting ideas for the next weekend projects.

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

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

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

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

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

by: Abhishek Prakash Wed, 07 May 2025 07:58:51 GMT I have got my hands on this 10 inches touchscreen from SunFounder that is made for Raspberry Pi like devices. If you are considering adding touch capability to your Raspberry Pi project, this could be a good contender for that. I have used a few SunFounder products in the past but the Pironman case made me their fan. And I truly mean that. This is why before I opened the package, I had a feeling that this will be a solid device. Let me share my experience with SunFounder's 10 inch DIY Touch Screen with you. SunFounder Latest 10 Inch DIY Touch Screen All-In-One Solution for Raspberry Pi 5, IPS HD 1280x800 LCD, Built-In USB-C PD 5.1V/5A Output, HDMI, 10-point, No Driver, Speakers, for RPi 5/4/3/Zero 2WThis SunFounder Touch Screen is a 10-point IPS touch screen in a 10.1″ big size and with a high resolution of 1280x800, bringing you perfect visual experience. It works with various operating systems including Raspberry Pi OS, Ubuntu, Ubuntu Mate, Windows, Android, and Chrome OS.SunFounderSunFounder📜TLDR; It is a well-thought device that gives a smooth touch experience. A single power cord runs both the screen and Pi. The on-board speakers give you more than just display although they are very basic. All the interface remain available. The best thing is that it can be used with several other SBCs too. From 3D printing to cyberdeck to home automation, how you use it is up to you. The $149 price tag is decent for the quality of the touchscreen and the out of box experience it provides for the Raspberry Pi OS.Technical specificationsBefore we get into the nitty-gritty of performance, let's look at what you're actually getting with this display: Specification Details Screen Size 10 inches (diagonal) Resolution 1280 x 800 pixels Panel Type IPS (In-Plane Switching) Touch Technology Capacitive multi-touch (up to 10 points) Connection HDMI for display, USB for touch function Compatible with Raspberry Pi 4B, 3B+, 3B, 2B, Zero W Power Supply DC 12V/5A power supply with built-In USB-C PD Audio 2 speakers Dimensions 236mm x 167mm x 20mm Viewing Angle 178° (horizontal and vertical) Weight Approximately 350g AssemblingSunFounder has a thing for assembling. Like most of their other products, the touchscreen also needs some assembling. After all, it is properly called 'a 10 -inch DIY touchscreen' so there is obviously a DIY angle here. The assembling should not take you more than 10–15 minutes to put all the pieces together. The assembly basically requires attaching the single board computer with the screws, taping the speakers and connecting it to the touchscreen cable. It's actually fun to do the assembly. Not everyone will be a fan of this but I am guessing if you are into maker's electronics, you won't be unhappy with the assembly requirement. Experiencing SunFounder DIY Touchscreen The device is powered by a 12V/5A DC power that also powers the Raspberry Pi with 5.1V/5A. There are LED lights at the back that indicate if the Pi is turned or not. There is no on-board battery, in case you were wondering about that. It needs to be connected to the power supply all the time to function. Although, if you need, you can always attach a battery-powered system to it. The display is IPS and the surface feels quite premium. Some people may find it a bit glossy and slippery but the IPS screens have the same look and feel in my experience. Colors are vibrant, text is crisp, and the IPS panel means viewing angles are excellent. The 10 point capacitive touch works out of the box. The touch response is quite good. I noticed that the double-click mouse action actually needs 3 quick taps. It took me some time to understand that it is the intended behavior. My 4-years old daughter used it for playing a few games on GCompris and that worked very well. Actually, she sees the Raspberry Pi wallpaper and thinks it's her computer. I had to take the device off her hands as I didn't want her to use it as a tablet. I would prefer that she keeps on using a keyboard and mouse with her Pi. On-screen keyboardSunFounder claims that no drivers are required and the touchscreen is ready to be plugged in and play if you use Raspbian OS. While I didn't have to install any drivers, and the touchscreen worked fine, I had to install squeekboard package to activate the on-screen keyboard on my Raspberry Pi 5 with Raspbian OS. The official SunFounder document mentions that this package should be preinstalled in Raspbian OS but that was not the case for me. Not a major issue as the on-screen keyboard worked fine too after installing the missing package. Using On-screen Keyboard in Raspberry Pi OSHere’s what you can do to use a virtual keyboard on Raspberry Pi OS.It's FOSSAbhishek PrakashSpeakersBefore I forget, I should mention that the touchscreen also has two tiny speakers at the bottom. They are good enough for occasional cases where you need audio output. You won't need to plugin a headphone or external speakers in such cases. But if you want anything more than that, you'll need to attach proper speakers. It really depends on what you need it for. Dude, where is my stand?It would have been nice to have some sort of stand with the screen. That would make it easier to use the touchscreen as a monitor on the table. At first glance, it seems like it is more suitable as a wall mount to display your homelab dashboard or some other information. But it's not completely impossible to use it without a dedicated stand on the desk. I used the extra M 2.5 screws to increase the length of the bottom two screws. That gave it a stand like appearance. Little tweak to make a stand with extra screwsI thought I was smart to utilize those extra screws as a stand. Later I found out that it was intended for that purpose, as the official document also mentioned this trick. I remember the older model of this touch screen used to have a dedicated stand. Older model of SunFounder's Touchscreen had a dedicated standI still think that dedicated stand attachments would have been a better idea. By the way, if you want and have the resources, you can 3D print a custom case for the touchscreen. SunFounder provides the 3D Printer File and all necessary steps on its documentation website. What can you use it for?The imagination is your limit. There are no dearths of touch-focused Raspberry Pi projects. Here are a few usages I can think of: Cyberdeck setupSmart home dashboardRetro gaming setupUse in 3d printersRobotics control interfaceIn-car entertainment system (I mean, why not, if you have an ancient car and want to do some tinkering)Mini kiosk for small businessesHomelab dashboard displayWeather station and agenda displayDigital photo frameShould you get it?The answer always depends on what you need and what you want. If you are on the lookout for a new touchscreen for your homelab or DIY projects, this is definitely worth a look. Sure, the price tag is more than the official Raspberry Pi touchscreen but SunFounder's touchscreen has better quality (IPS), is bigger with better resolution, has speakers and supports more SBCs. Basically, it is a premium device, whereas most touchscreen available on lower prices have a very toy-ish feel. If affordibility is not a concern and you need excellent touch experience for your projects, I can surely recommend this product. Explore SunFounder DIY Touchscreen

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

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

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

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

by: Sreenath Sat, 03 May 2025 08:56:47 GMT In an earlier article, I discussed installing plugins and themes in Logseq. And you already know that there are plenty of third-party plugins available in Logseq plugins Marketplace. Let me share some of the Plugins I use to organize my contents. 🚧Before installing Plugins, it is always good to frequently take backups of your notes. In case of any unexpected data loss, you can roll back easily.I presume you know it already, but in case you need help, here's a detailed tutorial on installing plugins in Logseq. Customize Logseq With Themes and PluginsExtend the capability and enhance the looks for Logseq with themes and plugins.It's FOSSSreenathMarkdown Table EditorCreating tables in Markdown syntax is a tedious process. Tools like Obsidian have a table creator helper that allows you to create and edit tables easily. When it comes to Logseq, we have a very cool plugin, Markdown Table Editor that does the job neatly and greatly. You can install this extension from the Logseq plugin Marketplace. To create a table, press the / key. This will bring you a small popup search. Enter table here and select Markdown Table Editor. This will create a popup window with a straight-forward interface to edit table entries. The interface is self-explanatory where you can add/delete columns, rows, etc. 0:00 /1:00 1× Creating Markdown table in Logseq using the Markdown Table Editor plugin. Markdown Table Editor GitHubBullet ThreadingLogseq follows a bullet blocks approach, with each data block is a properly indented bullet point. Now, the point to note here is "Properly indented". You should be careful about the organization of parent, child, and grandchild nodes (bullets) in Logseq. Otherwise, when you reference a particular block of a note in the future, not all related data will be retrieved. Some points may appear as part of another nested block, which destroys the whole purpose of linking. Bullet-Threading extension will help you keep track of the position you are currently editing in the greater nested data tree. This is done by visually indicating the bullet path. Such an approach makes the current indent location visually clear for you. 0:00 /0:15 1× Example of Bullet Threading Extension Never again loss track of data organization because of the lack of awareness about the indentation tree. Bullet-Threading GitHubTagsTags is the best plugin to organize the data in logseq where there is only a very narrow difference between pages and tags. It is the context of usage that differentiate pages and tags from each other. So, assigning single-word or small phrase tags to your notes will help you access and connect between the knowledge in the future. The Tags extension will query the notes and list all the tags in your data collection; be it a #note, #[[note sample]], or tags:: Newtag tag. You can arrange them alphabetically or according to the number of notes tagged with that specific tag. 🚧As of February 1, 2025, the GitHub repository of this project was archived by the creator. Keep an eye on further development for hassle-free usage.Tags Plugin listing available tagsYou can install the plugin from the Logseq plugins Marketplace. TagsTabsWorking with multiple documents at a time is a necessity. Opening and closing documents one by one is surely not the best experience these days. Logseq has the Tabs plugin that implements a tab bar on top of the window so that you can have easy access to multiple opened documents. This plugin offers several must-needed features like pin tabs, reorder tabs, persisting tabs, etc. 0:00 /0:26 1× Working with Tabs in Logseq. Usually, newly opened document replace the current tabs. But you can use Ctrl+click to open links in background tab, which is a very handy feature. Tabs GitHubJournals CalendarJournal is a very important page in Logseq. You can neatly organize document tree and scribble things and tag them properly. Each day in the Journal is an independent Markdown file in the Journals directory in your File manager. Journal Markdown FilesBut it may feel a bit crowded over time, and getting a note from a particular date often includes searching and scrolling the result. The Journals Calendar plugin is a great help in this scenario. This plugin adds a small calendar button to the top bar of Logseq. You can click on it and select a date from the calendar. If there is no Journal at that date, it will create one for you. 0:00 /0:46 1× Journal Calendar Plugin in Logseq Pages with Journals will be marked with a dot allowing you to distinguish them easily. Journals Calendar GitHubTodo Master PluginTodo Master plugin is a simple plugin that puts a neat progress bar next to a task. You can use this as a visual progress tracking. You can press the slash command (/) and select TODO Master from there to add the progress bar to the task of your choice. Watch the video to understand it better. TODO Master PluginLogseq TOC PluginSince Logseq follows a different approach for data management compared to popular tools like Obsidian, there is no built-in table of contents for a page. There is a "Contents" page in Logseq, which has an entire different purpose. In this case, this real table of contents renderer plugin is a great relief. It renders the TOC using the Markdown headers. Logseq TOC renderingLogseq TOC PluginWrapping UpLogseq plugin Marketplace has numerous plugins and themes available to choose from. But you should be careful since third-party plugins can result in data losses sometimes. Weird, I know. It is always good to take proper backup of the data, especially if you are following a local-first note management policy. You won't want to lose your notes, do you? 💬 Which Logseq plugin do you use the most? Feel free to suggest your recommendations in the comment section, so that other users may find useful!

by: Geoff Graham Fri, 02 May 2025 12:36:10 +0000 The CSS shape() function recently gained support in both Chromium and WebKit browsers. It’s a way of drawing complex shapes when clipping elements with the clip-path property. We’ve had the ability to draw basic shapes for years — think circle, ellipse(), and polygon() — but no “easy” way to draw more complex shapes. Well, that’s not entirely true. It’s true there was no “easy” way to draw shapes, but we’ve had the path() function for some time, which we can use to draw shapes using SVG commands directly in the function’s arguments. This is an example of an SVG path pulled straight from WebKit’s blog post linked above: <svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> <path fill="black" d="M0 0 L 100 0 L 150 50 L 100 100 L 0 100 Q 50 50 0 0 z " /> </svg> Which means we can yank those <path> coordinates and drop them into the path() function in CSS when clipping a shape out of an element: .clipped { clip-path: path("M0 0 L 100 0 L 150 50 L 100 100 L 0 100 Q 50 50 0 0 z"); } I totally understand what all of those letters and numbers are doing. Just kidding, I’d have to read up on that somewhere, like Myriam Frisano’s more recent “Useful Recipes For Writing Vectors By Hand” article. There’s a steep learning curve to all that, and not everyone — including me — is going down that nerdy, albeit interesting, road. Writing SVG by hand is a niche specialty, not something you’d expect the average front-ender to know. I doubt I’m alone in saying I’d rather draw those vectors in something like Figma first, export the SVG code, and copy-paste the resulting paths where I need them. The shape() function is designed to be more, let’s say, CSS-y. We get new commands that tell the browser where to draw lines, arcs, and curves, just like path(), but we get to use plain English and native CSS units rather than unreadable letters and coordinates. That opens us up to even using CSS calc()-ulations in our drawings! Here’s a fairly simple drawing I made from a couple of elements. You’ll want to view the demo in either Chrome 135+ or Safari 18.4+ to see what’s up. CodePen Embed Fallback So, instead of all those wonky coordinates we saw in path(), we get new terminology. This post is really me trying to wrap my head around what those new terms are and how they’re used. In short, you start by telling shape() where the starting point should be when drawing. For example, we can say “from top left” using directional keywords to set the origin at the top-left corner of the element. We can also use CSS units to set that position, so “from 0 0” works as well. Once we establish that starting point, we get a set of commands we can use for drawing lines, arcs, and curves. I figured a table would help. CommandWhat it meansUsageExampleslineA line that is drawn using a coordinate pairThe by keyword sets a coordinate pair used to determine the length of the line.line by -2px 3pxvlineVertical lineThe to keyword indicates where the line should end, based on the current starting point. The by keyword sets a coordinate pair used to determine the length of the line.vline to 50pxhlineHorizontal lineThe to keyword indicates where the line should end, based on the current starting point. The by keyword sets a coordinate pair used to determine the length of the line.hline to 95%arcAn arc (oh, really?!). An elliptical one, that is, sort of like the rounded edges of a heart shape.The to keyword indicates where the arc should end. The with keyword sets a pair of coordinates that tells the arc how far right and down the arc should slope. The of keyword specifies the size of the ellipse that the arc is taken from. The first value provides the horizontal radius of the ellipse, and the second provides the vertical radius. I’m a little unclear on this one, even after playing with it.arc to 10% 50% of 1%curveA curved lineThe to keyword indicates where the curved line should end. The with keyword sets “control points” that affect the shape of the curve, making it deep or shallow.curve to 0% 100% with 50% 0%smoothAdds a smooth Bézier curve command to the list of path data commandsThe to keyword indicates where the curve should end. The by keyword sets a coordinate pair used to determine the length of the curve. The with keyword specifies control points for the curve.I have yet to see any examples of this in the wild, but let me know if you do, and I can add it here. The spec is dense, as you might expect with a lot of moving pieces like this. Again, these are just my notes, but let me know if there’s additional nuance you think would be handy to include in the table. Oh, another fun thing: you can adjust the shape() on hover/focus. The only thing is that I was unable to transition or animate it, at least in the current implementation. CodePen Embed Fallback CSS shape() Commands originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

by: Sacha Greif Thu, 01 May 2025 12:34:58 +0000 I don’t know if I should say this on a website devoted to programming, but I sometimes feel like *lowers voice* coding is actually the least interesting part of our lives. After all, last time I got excited meeting someone at a conference it was because we were both into bouldering, not because we both use React. And The Social Network won an Oscar for the way it displayed interpersonal drama, not for its depiction of Mark Zuckerberg’s PHP code.  Yet for the past couple years, I’ve been running developer surveys (such as the State of JS and State of CSS) that only ask about code. It was time to fix that.  A new kind of survey The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.  I’m hoping to answer questions such as: What are developers’ favorite recent movies and video games? What kind of physical activity do developers practice? How much sleep are we all getting? But also address more serious topics, including: What do developers like about their workplace? What factors lead to workplace discrimination? What global issues are developers most concerned with? Reaching out to new audiences Another benefit from branching out into new topics is the chance to reach out to new audiences. It’s no secret that people who don’t fit the mold of the average developer (whether because of their gender, race, age, disabilities, or a myriad of other factors) often have a harder time getting involved in the community, and this also shows up in our data.  In the past, we’ve tried various outreach strategies to help address these imbalances in survey participation, but the results haven’t always been as effective as we’d hoped.  So this time, I thought I’d try something different and have the survey itself include more questions relevant to under-represented groups, asking about workplace discrimination: As well as actions taken in response to said discrimination: Yet while obtaining a more representative data sample as a result of this new focus would be ideal, it isn’t the only benefit.  The most vulnerable among us are often the proverbial canaries in the coal mine, suffering first from issues or policies that will eventually affect the rest of the community as well, if left unchecked.  So, facing these issues head-on is especially valuable now, at a time when “DEI” is becoming a new taboo, and a lot of the important work that has been done to make things slightly better over the past decade is at risk of being reversed. The big questions Finally, the survey also tries to go beyond work and daily life to address the broader questions that keep us up at night: There’s been talk in recent years about keeping the workplace free of politics. And why I can certainly see the appeal in that, in 2025, it feels harder than ever to achieve that ideal. At a time when people are losing rights and governments are sliding towards authoritarianism, should we still pretend that everything is fine? Especially when you factor in the fact that the tech community is now a major political player in its own right… So while I didn’t push too far in that direction for this first edition of the survey, one of my goals for the future is to get a better grasp of where exactly developers stand in terms of ideology and worldview. Is this a good idea, or should I keep my distance from any hot-button issues? Don’t hesitate to let me know what you think, or suggest any other topic I should be asking about next time.  In the meantime, go take the survey, and help us get a better picture of who exactly we all are! State of Devs: A Survey for Every Developer originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

by: Abhishek Prakash Thu, 01 May 2025 05:49:00 GMT Before the age of blogs, forums, and YouTube tutorials, Linux users relied on printed magazines to stay informed and inspired. Titles like Linux Journal, Linux Format, and Maximum Linux were lifelines for enthusiasts, packed with tutorials, distro reviews, and CD/DVDs. These glossy monthly issues weren’t just publications—they were portals into a growing open-source world. Let's recollect the memories of your favorite Linux magazines. Ever read them or had their subscription? Linux Magazines That Rule(d) The LinuxverseOnce upon a time when it was fashionable to read magazines in print format, these were the choices for the Linux users.It's FOSSAbhishek Prakash💬 Let's see what else you get in this edition RISC-V based SBC, Muse Pi.Lenovo offering Linux laptops.Trying tab grouping in Firefox.And other Linux news, tips, and, of course, memes!This edition of FOSS Weekly is supported by PikaPods.❇️ PikaPods: Enjoy Self-hosting Hassle-freePikaPods allows you to quickly deploy your favorite open source software. All future updates are handled automatically by PikaPods while you enjoy using the software. PikaPods also share revenue with the original developers of the software. You get a $5 free credit to try it out and see if you can rely on PikaPods. I know, you can 😄 PikaPods - Instant Open Source App HostingRun the finest Open Source web apps from $1.20/month, fully managed, no tracking, no ads, full privacy. Self-hosting was never this convenient.Instant Open Source App Hosting📰 Linux and Open Source NewsQEMU 10 just released with many new upgrades.Proton Pass now allows attaching files to passwords.The Indian court orders a ban on Proton Mail.Kali Linux is urging users to add their new signing key.Running Arch Linux inside WSL is now officially possible.The Muse Pi Pro is a new RISC-V SBC with AI acceleration.Lenovo offers Linux laptops with cheaper price tag . Lenovo Cuts the Windows Tax and offers Cheaper Laptops with Linux Pre-installedLenovo is doing something that many aren’t.It's FOSS NewsSourav Rudra🧠 What We’re Thinking AboutPerplexity is ready to track everything users do with its upcoming AI-powered web browser. Perplexity Wants to Track Your Every Move With its AI-powered BrowserPerplexity’s new Comet web browser is bad news if you care about privacy.It's FOSS NewsSourav Rudra🧮 Linux Tips, Tutorials and MoreOrganize better with Logseq journals and contents pages.Learn how to create a password-protected Zip file in Linux.Our apt command guide is a one-stop resource for all your apt command needs.Dual-booting CachyOS and Windows is a nice way to get the best of both worlds.Firefox has finally introduced Tab Groups, join us as we explore it. Exploring Firefox Tab Groups: Has Mozilla Redeemed Itself?Firefox’s Tab Groups help you organize tabs efficiently. But how efficiently? Let me share my experience.It's FOSSSourav Rudra Desktop Linux is mostly neglected by the industry but loved by the community. For the past 12 years, It's FOSS has been helping people use Linux on their personal computers. And we are now facing the existential threat from AI models stealing our content. If you like what we do and would love to support our work, please become It's FOSS Plus member. It costs $24 a year (less than the cost of a burger meal each month) and you get an ad-free reading experience with the satisfaction of helping the desktop Linux community. Join It's FOSS Plus 👷 Homelab and Maker's CornerSomeone managed to run a website on a Nintendo Wii. This Website Is Running on a WiiAlex Haydock found a dusty old Wii console at a hardware swap and modded it to run his website.404 MediaSamantha Cole✨ Apps HighlightWe tested out GNOME's new document viewer, Papers. Hands-on with Papers, GNOME’s new Document ReaderTried GNOME’s new document reader, it didn’t disappoint.It's FOSS NewsSourav Rudra📽️ Videos I am Creating for YouSubscribe to It's FOSS YouTube Channel🧩 Quiz TimeTest your Ubuntu knowledge with our All About Ubuntu crossword. All About Ubuntu: Crossword PuzzleA true Ubuntu fan should be able to guess this crossword correctly.It's FOSSAbhishek Prakash🛍️ Deal you might likeThis e-book bundle is tailored for DevOps professionals and rookies alike—learn from a diverse library of hot courses like Terraform Cookbook, Continuous Deployment, Policy as Code and more. And your purchase supports Code for America! Humble Tech Book Bundle: DevOps 2025 by O’ReillyA digital apprenticeship with the pros at O’Reilly—add new skills to your DevOp toolkit with our latest guides bundle.Humble Bundle💡 Quick Handy TipIn Brave Browser, you can open two tabs in a split view. First, select two tabs by Ctrl + Left-Click. Now, Right-Click on any tab and select "Open in split view". The two tabs will then be opened in a split view. You can click on the three-dot button in the middle of the split to swap the position of tabs, unsplit tabs, and resize them. 🤣 Meme of the WeekWe really need to value them more 🥹 🗓️ Tech TriviaOn April 27, 1995, the U.S. Justice Department sued to block Microsoft’s $2.1 billion acquisition of Intuit, arguing it would hurt competition in personal finance software. Microsoft withdrew from the deal shortly after. 🧑‍🤝‍🧑 FOSSverse CornerKnow of a way to rename many files on Linux in one go? Pro FOSSer Neville is looking for ways: What is the best way to rename a heap of files?There are two rename apps a Perl program a utility from util-linux You can also use mv in a loop I have the util-linux version trinity:[nevj]:~$ rename -V rename from util-linux 2.41 I used it to do the following The syntax of that rename version is rename ′ from ′ ′ to ′ files I have several folders of these image files so I just cd’d around and did each folder by hand. Just wondering… has anyone used the Perl version of rename or do people do it with the File Manager or some o…It's FOSS Communitynevj❤️ With loveShare 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 😄

by: Sourav Rudra Thu, 01 May 2025 05:10:17 GMT Mozilla's Firefox needs no introduction. It is one of the few web browsers around that is not based on Chromium, setting out to provide a privacy-focused browsing experience for its users. Sadly, some recent maneuvers have landed it in hot water, the most recent of which was a policy change that resulted in an intense backlash from the open source community, who felt wronged. The consensus being that Mozilla broke their promise of not selling user data, leading to widespread concern over the organization's commitment to user privacy. Since then, they have tweaked Firefox's Terms of Use to better reflect how they handle user data, clarifying that they do not claim ownership over user content and that any data collected is used for maintaining and improving Firefox, in line with their Privacy Policy. Behind the scenes, Mozilla has also been focusing on developing more AI-powered features for Firefox—an approach that has drawn mixed reactions, with many asking for improvements to the core, everyday browser functionality. Luckily, they have finally delivered something on that front by implementing the long-requested Tab Groups feature. Firefox Tab Groups: Why Should You Use It?As the name implies, Tab Groups allows users to organize multiple open tabs into customizable, color-coded, and collapsible sections—making it significantly easier for users to reduce visual clutter, stay focused on priority tasks, and streamline workflows. This can greatly boost productivity, especially when paired with the right tools and tips for optimizing your workflow on a Linux desktop. Being someone who has to go through a lot of material when researching topics, I fully understand the importance of efficient tab management on a web browser. Using a tab grouping feature like this helps minimize distractions, keeps your browser organized, and ensures quick access to important information without you getting overwhelmed by an endless stack of tabs. You can learn more about how this came to be on the announcement blog. How to Group Tabs in Firefox?If you are looking to integrate this neat feature into your workflow, then you have to first ensure that you are on Firefox 138 or later. After that, things are quite straightforward. Open up a bunch of new tabs and drag/drop one onto the other. This should open up the "Create tab group" dialog. Here, enter the name for the tab group, give it a color, and then click on "Done". You can right-click on existing tabs to quickly add them to tab groups, or remove them for easy reorganization into new groups. Tab groups can be expanded or collapsed with a simple left-click, and you can drag them to rearrange as needed. If you accidentally close Firefox, or even do so intentionally, you can still access your previous tab groups by clicking the downward arrow button above the address bar. Similarly, managing an existing tab group is easy—just right-click on the group to open the "Manage tab group" dialog. From there, you can rename the group, change its color, move it around, or delete it entirely. Besides that, Mozilla has mentioned that they are already experimenting with AI-powered tools for organizing tabs by topic, which runs on their on-device AI implementation. It is live on the Firefox Nightly build and can be accessed from the "Suggest more of my tabs" button. Suggested Read 📖 I Tried This Upcoming AI Feature in FirefoxFirefox will be bringing an experimental AI-generated link previews, offering quick on-device summaries. Here’s my quick experience with it.It's FOSS NewsSourav Rudra

By: Edwin Wed, 30 Apr 2025 13:08:34 +0000 A lot of people want Linux but do not want to go either remove Windows or take up the overwhelming task of dual booting. For those people, WSL (Windows Subsystem for Linux) came as a blessing. WSL lets you run Linux on your Windows device without the overhead of a Virtual Machine (VM). But in some cases where you want to fix a problem or simply do not want WSL anymore, you may have to uninstall WSL from your Windows system. Here is step-by-step guide to remove WSL from your Windows system, remove any Linux distribution, delete all related files, and clear up some disk space. Ready? Get. Set. Learn! What is WSL You probably knew by now that we will always start with the basics i.e., what WSL does. Think of WSL as a compatibility layer for running Linux binaries on Microsoft Windows systems. It comes in two versions: WSL 1: Uses a translation layer between Linux and Windows. WSL 2: Uses a real Linux kernel in a lightweight VM. All around the world, WSL is a favourite among developers, system administrators, and students for running Linux tools like bash, ssh, grep, awk, and even Docker. But if you have moved to a proper Linux system or just want to do a clean reinstall, here are the instructions to remove WSL completely without any errors. Step 1: How to Uninstall Linux Distributions The first step to uninstall WSL completely is to remove all installed Linux distributions. Check Installed Distros To check for the installed Linux distributions, open PowerShell or Command Prompt and run the command: wsl --list --all After executing this command, you will see a list of installed distros, such as: Ubuntu Debian Kali Alpine How to Uninstall a Linux Distro To uninstall a distro like Ubuntu, follow these instructions: Press Windows key + I to open Settings window. Go to Apps, then click Installed Apps (or Apps & Features). Search for your distro and click Uninstall. Repeat for all distros you no longer need. If you plan to uninstall WSL completely, we recommend removing all distros. if you prefer PowerShell, run these commands wsl --unregister <DistroName> For example, if you want to remove Ubuntu, execute the command: wsl --unregister Ubuntu This removes the Linux distro and all its associated files. Step 2: Uninstall WSL Components Once we have removed the unwanted distros, let us uninstall the WSL platform itself. Open Control Panel and navigate to Programs and then click Turn Windows features on or off. Uncheck these boxes: Windows Subsystem for Linux Virtual Machine Platform (used by WSL 2) Windows Hypervisor Platform (optional) Click OK and restart your system. Step 3: Remove WSL Files and Cache Even after uninstalling WSL and Linux distributions, some data might remain. Here are the instructions to delete WSL’s cached files and reclaim disk space. To delete the WSL Folder, open File Explorer and go to: %USERPROFILE%\AppData\Local\Packages Look for folders like: CanonicalGroupLimited…Ubuntu Debian… KaliLinux… Delete any folders related to WSL distros you removed. Step 4: Remove WSL CLI Tool (Optional) If you installed WSL using the Microsoft Store (i.e., “wsl.exe” package), you can also uninstall it directly from the Installed Apps section: Go to Settings, and then to Apps and then open Installed Apps. Search for Windows Subsystem for Linux. Click Uninstall. Step 5: Clean Up with Disk Cleanup Tool Finally, use the built-in Disk Cleanup utility to clear any temporary files. Press “Windows key + S and search for Disk Cleanup. Choose your system drive (usually drive C:). Select options like: Temporary files System created Windows error reporting Delivery optimization files Click OK to clean up. Bonus Section: How to Reinstall WSL (Optional) If you are removing WSL due to issues or conflicts, you can always do a fresh reinstall. Here is how you can install latest version of WSL via PowerShell wsl --install This installs WSL 2 by default, along with Ubuntu. Wrapping Up Uninstalling WSL may sound tricky, but by following these steps, you can completely remove Linux distributions, WSL components, and unwanted files from your system. Whether you are making space for something new or just doing some digital spring cleaning, this guide ensures that WSL is uninstalled safely and cleanly. If you ever want to come back to the Linux world, WSL can be reinstalled with a single command, which we have covered as a precaution. Let us know if you face any errors. Happy learning! The post Uninstall WSL: Step-by-Step Simple Guide appeared first on Unixmen.

By: Edwin Wed, 30 Apr 2025 13:08:28 +0000 There are multiple very useful built-ins in Bash other than cd, ls, and echo. For shell scripting and terminal command execution, there is one lesser known but very powerful built-in command. It is the ” shopt”. This comes in handy when you are customizing your shell behaviour or writing advanced scripts. If you understand shopt, you can improve your workflow and also your scripts’ reliability. In this guide, let us explain everything there is about the shopt command, how to use it, and some practical applications as well (as usual in Unixmen). Ready? Get. Set. Learn! The Basics: What is shopt shopt stands for Shell Options. It is a built-in command in Bash, that allows you to view and modify the behaviour of the shell by enabling or disabling certain options. These options affect things like filename expansion, command history behaviour, script execution, and more. Unlike environment variables, options in shopt are either on or off i.e., boolean. Basic Syntax of shopt Here is the basic syntax of shopt command: shopt [options] [optname...] Executing Without arguments: Lists all shell options and their current status (on or off). With “-s” (set): Turns on the specified option. With “-u” (unset): Turns off the specified option. Use “-q” (quiet): Suppresses output, useful in scripts for conditional checks. How to View All Available Shell Options To view the list of all shopt options and to see which are enabled, execute this command: shopt The output to this command will list the options and their status like: autocd on cdable_vars off dotglob off extglob on Enabling and Disabling Options with shopt We just learnt how to see if an option is enabled or not. Now let us learn how to enable an option: shopt -s optname Similarly, execute this command to disable an option: shopt -u optname Here is a couple of examples: shopt -s dotglob # This command is to include dotfiles in pathname expansion shopt -u dotglob # This command is to exclude dotfiles (which is the default behaviour) Some of the Commonly Used shopt Options Here are some shopt options that will be useful for you: dotglob When this option is enabled, shell includes dotfiles in globbing patterns i.e., the * operator will match “.bashrc”. This option will be helpful for you when you want to apply operations to hidden files. shopt -s dotglob autocd The autocd option lets you cd into a directory without typing the cd command explicitly. For example, typing “Documents” will change into the “Documents” directory. Here is how you can enable it: shopt -s autocd nocaseglob This option makes filename matching case insensitive. Using this option will help you when you write scripts that deal with unpredictable casing in filenames. shopt -s nocaseglob How to Write Scripts with shopt You can use shopt within Bash scripts to ensure consistent behaviour, especially for scripts that involve operations like pattern matching and history control. Here is an example script snippet to get you started: # First let us enable dotglob to include dotfiles shopt -s dotglob for file in *; do echo "Processing $file" done In this script, “dotglob” option ensures hidden files are also processed by the “for” loop. Resetting All shopt Options If you’ve made changes and want to restore to the default behaviours, you can unset the options you enabled by executing these commands for the appropriate options: shopt -u dotglob shopt -u autocd shopt -u extglob Advantages of shopt It gives you fine-grained control over your shell environment. Once you are familiar with it, it improves script portability and reliability. With shopt, you can enable advanced pattern matching and globbing. It can be toggled temporarily and reset as needed and also helps you avoid unexpected behaviours when writing automation scripts. Wrapping Up The shopt command is not as famous as other built-in tools in shell but it a very powerful hidden gem. Whether you are starting to explore shell scripting or you are a power user automating workflows, learning to use shopt can save time and prevent headaches. Once you’re comfortable, you’ll find that Bash scripting becomes more predictable and powerful. Related Articles Bash Functions in Shell Scripts How to Run a Python Script: A Beginners Guide Bash Script Example: Guide for Beginners bash – shopt works in command line, not found when run in a script – Ask Ubuntu The post shopt in Bash: How to Improve Script Reliability appeared first on Unixmen.

By: Edwin Wed, 30 Apr 2025 13:08:26 +0000 AI is almost everywhere. Every day, we see new AI models surprising the world with their capabilities. The tech community (which includes you as well) wanted something else. They wanted to run AI models like ChatGPT or LLaMA on their own devices without spending much on cloud. The answer came in the form of Ollama. In this article, let us learn what Ollama is, why is it gaining popularity, and the features that set it apart. In addition to those, we will also explain what Ollama does, how it works, and how you can use Ollama to run AI locally. Ready? Get. Set. Learn! What is Ollama? Ollama is an open-source tool designed to make it easy to run large language models (LLMs) locally on your computer. It acts as a wrapper and manager for AI models like LLaMA, Mistral, Codellama, and others, enabling you to interact with them in a terminal or through an API. The best part about this is that you can do all these without needing a powerful cloud server. In simple words, Ollama brings LLMs to your local machine with minimal setup. Why Should You Use Ollama? Here are a few reasons why developers and researchers are using Ollama: Run LLMs locally: No expensive subscriptions or hardware required. Enhanced privacy: Your data stays on your device. Faster response times: Especially useful for prototyping or development. Experiment with multiple models: Ollama supports various open models. Simple CLI and REST API: Easy to integrate with existing tools or workflows. How Does Ollama Work? Ollama provides a command-line interface (CLI) and backend engine to download, run, and interact with language models. It handles: Downloading pre-optimized models Managing RAM/GPU requirements Providing a REST API or shell-like experience Handling model switching or multiple instances For example, to start using the llama2 model, execute this command: ollama run llama2 Executing this command will fetch the model if not already downloaded and start an interactive session. Supported Models in Ollama Here are some of the popular models you can run with it and their distinguishing factor: LLaMA 2 by Meta, used in Meta AI Mistral 7B Codellama: Optimized for code generation Gemma: Google’s open model Neural Chat Phi: Lightweight models for fast inference You can even create your own model file using a “Modelfile”, similar to how Dockerfiles work. How to Install Ollama on Linux, macOS, or Windows On Linux devices, execute this command: curl -fsSL https://ollama.com/install.sh | sh You can install from source via GitHub as well. If you have a macOS device, open Terminal window and execute this command: brew install ollama Ollama now supports Windows natively via WSL (Windows Subsystem for Linux). You can also install it using the “.msi” installer from the official Ollama site. Key Features of Ollama Easy setup: No need for complex Python environments or dependency hell Built-in GPU acceleration: Supports NVIDIA GPUs (with CUDA) API access: Plug into any app using HTTP Low resource footprint: Runs on machines with as little as 8 GB RAM Model customization: Create, fine-tune, or combine models Practical Applications of Ollama Here are some real-world applications to understand better. Try these projects when you have got answers to your question: what is Ollama. Chatbot development: Build an AI assistant locally. Code generation: Use Codellama to assist in coding. Offline AI experimentation: Perfect for research in low-connectivity environments. Privacy-sensitive applications: Ensure data never leaves your machine. Learning and prototyping: This is a great tool for beginners to understand how LLMs work. Limitations of Ollama At Unixmen, we included this section for educational purposes only. Ollama is a great tool considering it is open for all. While it is powerful, it has a few limitations: You may still need a decent CPU or GPU for smoother performance. Not all LLMs are supported (especially closed-source ones). Some models can be large and require storage bandwidth for downloading. Still, it provides a great balance between usability and performance. Wrapping Up If you’ve been wondering what is Ollama, now you know. It is a powerful tool that lets you run open-source AI models locally, without the need for cloud infrastructure. It’s simple, efficient, and perfect for both hobbyists and professionals looking to explore local LLMs. With growing interest in privacy, open AI, and local compute, tools like this are making AI more accessible than ever. Keep an eye on Unixmen because as AI models get better, we will keep adding more and more information about them. Related Articles The Impact of Artificial Intelligence on Linux Security The Dawn of Artificial Intelligence: The Many Benefits of AI for Small Businesses How AI is Revolutionizing Linux System Administration: Tools and Techniques for Automation The post What is Ollama? How to Run LLMs Locally appeared first on Unixmen.

By: Edwin Wed, 30 Apr 2025 13:08:24 +0000 Firefox is the browser of choice for many tech-enthusiasts. If you are reading this, it probably means that your go-to browser is Firefox. But very often, we find ourselves buried under dozens of open tabs in Firefox? You are not alone. Tab overload is a real productivity killer and Firefox dev team knows it. Here is the solution: Firefox Tab Groups. Firefox stunned the world by removing the built-in tab grouping but there are powerful extensions and workarounds that help bring that functionality back. Some of these tricks even improve tab grouping in Firefox. In this detailed guide, we will explore what tab groups in Firefox are, how to implement them using modern tools, and why they’re a must-have for efficient browsing. Ready? Get. Set. Learn! What Are Firefox Tab Groups? Tab groups help you organize your open browser tabs into categories or collections. Think of them as folders for tabs. You can switch between different contexts like “Work”, “Research”, “Shopping”, or “Social Media” without cluttering your current window. While Firefox once had native support for tab groups (known as Panorama), it was removed in version 45. Fortunately, the Firefox community has filled the gap with powerful extensions. Why Should You Use Tab Groups? Here’s why tab grouping in Firefox is helpful and the Firefox community went to great lengths to bring it back: Helps you in decluttering your tab bar: Endless scrolling to find one tab is tough. Focus on one task or project at a time. Save tab groups for future sessions. Restore your groups after closing the browser. Easily categorize tabs by topic or purpose (like Christmas shopping reminder). Whether you’re a developer, student, or just a multitasker, organizing tabs can drastically improve your workflow. Best Firefox Extension for Tab Groups Let us look at a tried and tested Firefox extension to create tab groups. Simple Tab Groups Simple Tab Groups (STG) is the most popular and powerful Firefox extension for creating and managing tab groups. Let us list some features that sets this extension apart: Create multiple tab groups Assign custom names and icons Automatically save sessions Move tabs between groups Keyboard shortcuts for switching groups Dark mode and compact view How to Install Simple Tab Groups Go to the Firefox Add-ons page. Search for “Simple Tab Groups”. Click “Add to Firefox” and follow the prompts. Once the installation is successful, you will see an icon in your toolbar. Click it to start creating groups. Panorama View (Optional) Panorama View brings back the old visual tab management feature from classic Firefox, letting you see tab groups in a grid layout. While it’s not essential, it is a great visual complement to STG for those who prefer drag-and-drop tab organization. Using Simple Tab Groups Here is a quick walkthrough for beginners: How to create a Group Click the Simple Tab Groups icon in the toolbar. Select “Create new group”. Name the group, e.g., “Work” or “Unixmen”. Firefox will switch to a new, empty tab set. Switching Between Groups You can switch using: The STG toolbar icon Right-click menu on any tab Custom hotkeys (configurable in STG settings) How to Move Tabs Between Groups Drag and drop tabs in the STG group manager interface or use the context menu. Backing Up Your Groups STG allows you to export and import your tab groups, which is perfect for syncing between machines or saving work environments. Some Best Practices and Tips Use keyboard shortcuts for faster group switching. Enable auto-save groups in the STG settings to avoid losing tabs on crash or shutdown. Use Firefox Sync along with STG’s export/import feature to keep your tab setup across devices. Combine with Tree Style Tab to organize tabs vertically within a group. Wrapping Up While Firefox doesn’t have native tab groups anymore, extensions like Simple Tab Groups not only replace that functionality but expand it with advanced session management, export options, and more. If you are serious about browsing efficiency and keeping your digital workspace organized, Firefox tab groups are an essential upgrade. Here are some more tips to get you started: Start with a few basic groups (e.g., Work, Studies, Shopping). Use names and colours to easily identify each group. Experiment with automation features like auto-grouping. Related Articles The Best Private Browsers for Linux Install Wetty (Web + tty) on Ubuntu 15.04 and CentOS 7 – Terminal in Web Browser Over Http/Https Install Log.io on Ubuntu – Real-time log monitoring in your browser The post Firefox Tab Groups: Managing Tabs Like a Pro appeared first on Unixmen.

By: Edwin Wed, 30 Apr 2025 13:08:23 +0000 Many hardcore Linux users were introduced into the tech world after playing with the tiny Raspberry Pi devices. One such tiny device is the Raspberry Pi Zero. Its appearance might fool a lot of people, but it packs a surprising punch for its size and price. Whether you’re a beginner, a maker, or a developer looking to prototype on a budget, there are countless Raspberry Pi Zero projects you can build to automate tasks, learn Linux, or just have fun. In this detailed guide, we will list and explain ten of the most practical and creative projects you can do with a Raspberry Pi Zero or Zero W (the version with built-in Wi-Fi). These ideas are beginner-friendly and open-source focused. We at Unixmen, carefully curated these because they are perfect for DIY tech enthusiasts. Ready? Get. Set. Create! What is the Raspberry Pi Zero? The Raspberry Pi Zero is tiny (size of a credit-card) single-board computer designed for low-power, low-cost computing. The typical specs are: 1GHz single-core CPU 512MB RAM Mini HDMI, micro USB ports 40 GPIO pins Available with or without built-in Wi-Fi (Zero W/WH) Though the size looks misleading, it is enough and ideal for most lightweight Linux-based projects. Ad Blocker This will be very useful to you and your friends and family. Create a network-wide ad blocker with Pi-Hole and Raspberry Pi Zero. It filters DNS queries to block ads across all devices connected to your Wi-Fi. Why this will be famous: Blocks ads on websites, apps, and smart TVs Reduces bandwidth and improves speed Enhances privacy How to Install Pi-hole Execute this command to install Pi-hole curl -sSL https://install.pi-hole.net | bash Retro Gaming Console If you are a fan of retro games, you will love this while you create it. Transform your Pi Zero into a portable gaming device using RetroPie or Lakka. Play classic games from NES, SNES, Sega, and more. Prerequisites Micro SD card USB controller or GPIO-based gamepad Mini HDMI cable for output Ethical Testing Wi-Fi Hacking Lab Use tools like Kali Linux ARM or PwnPi to create a portable penetration testing toolkit. The Pi Zero W is ideal for ethical hacking practice, especially for cybersecurity students. How Will This be Useful Wi-Fi scanning Packet sniffing Network auditing We must warn you to use this project responsibly. Deploy this on networks you own or have permission to test. Lightweight Web Server Run a lightweight Apache or Nginx web server to host static pages or mini applications. This project is great for learning web development or hosting a personal wiki. How Can You Use this Project Personal homepage Markdown notes Self-hosted tools like Gitea, DuckDNS, or Uptime Kuma Smart Mirror Controller Build a smart mirror using a Raspberry Pi Zero and a 2-way acrylic mirror to display: Time and weather News headlines Calendar events Use MagicMirror² for easy configuration. IoT Sensor Node Add a DHT11/22, PIR motion sensor, or GPS module to your Pi Zero and turn it into an IoT data collector. Send the data to: Home Assistant MQTT broker Google Sheets or InfluxDB This is a great lightweight solution for remote sensing. Portable File Server (USB OTG) You can set up your Pi Zero as a USB gadget that acts like a storage device or even an Ethernet adapter when plugged into a host PC. To do this, use “g_mass_storage” or “g_ether” kernel modules to emulate devices: modprobe g_mass_storage file=/path/to/file.img Time-Lapse Camera You can connect a Pi Camera module and capture time-lapse videos of sunsets, plant growth, or construction projects. Tools You Require raspistill “ffmpeg” for converting images to video Cron jobs for automation Headless Linux Learning Box You can install Raspberry Pi OS Lite and practice: SSH Command line tools (grep, sed, awk) Bash scripting Networking with “netcat”, “ss”, “iptables” E-Ink Display Projects Libraries like Python EPD make it easy to control e-ink displays. Use the Pi Zero with a small e-ink screen to display functional events like: Calendar events Quotes of the day Weather updates RSS feeds Fun Tip: Combine Projects! You can combine several of these Raspberry Pi Zero projects into one system. For example, you can create an e-ink display with ad-blocker as well or a retro game console that also acts as a media server. Wrapping Up Whether you’re into IoT, cybersecurity, retro gaming, or automation, the Raspberry Pi Zero helps you create fun and useful projects. With its low cost, tiny size, and solid performance, it’s the perfect device for building compact, lightweight Linux-based systems. As of 2025, there is a growing number of open-source tools and community tutorials to support even the most ambitious Raspberry Pi Zero projects. All you need is an idea and a little curiosity. Learn more and more about Linux based applications at Unixmen! Related Articles How to Use Fopen: C projects guide Raspberry Pi Firewall: Step-by-step guide for an easy setup Gooseberry; An alternative to Raspberry Pi The post Raspberry Pi Zero Projects: Top 10 in 2025 appeared first on Unixmen.

by: Andy Clarke Wed, 30 Apr 2025 12:12:45 +0000 I mentioned last time that I’ve been working on a new website for Emmy-award-winning game composer Mike Worth. He hired me to create a highly graphical design that showcases his work. Mike loves ’90s animation, particularly Disney’s Duck Tales and other animated series. He challenged me to find a way to incorporate their retro ’90s style into his design without making it a pastiche. But that wasn’t my only challenge. I also needed to achieve that ’90s feel by using up-to-the-minute code to maintain accessibility, performance, responsiveness, and semantics. Designing for Mike was like a trip back to when mainstream website design seemed more spontaneous and less governed by conventions and best practices. Some people describe these designs as “whimsical”: But I’m not so sure that’s entirely accurate. “Playful?” Definitely. “Fanciful?” Possibly. But “fantastic?” That depends. “Whimsy” sounds superfluous, so I call it “expressive” instead. Studying design from way back, I remembered how websites often included graphics that combined branding, content, and navigation. Pretty much every reference to web design in the ’90s — when I designed my first website — talks about Warner Brothers’ Space Jam from 1996. Warner Brothers’ Space Jam (1996) So, I’m not going to do that. Brands like Nintendo used their home pages to direct people to their content while making branded visual statements. Cheestrings combined graphics with navigation, making me wonder why we don’t see designs like this today. Goosebumps typified this approach, combining cartoon illustrations with brightly colored shapes into a functional and visually rich banner, proving that being useful doesn’t mean being boring. Left to right: Nintendo, Cheestrings, Goosebumps. In the ’90s, when I developed graphics for websites like these, I either sliced them up and put their parts in tables or used mostly forgotten image maps. A brief overview of properties and values Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements. They were popular for graphics, maps, and navigation, but their use declined with the rise of CSS, SVG, and JavaScript. <map> adds clickable areas to a bitmap or vector image. <map name="projects"> ... </map> That <map> is linked to an image using the usemap attribute: <img usemap="#projects" ...> Those elements can have separate href and alt attributes and can be enhanced with ARIA to improve accessibility: <map name="projects"> <area href="" alt="" … /> ... </map> The shape attribute specifies an area’s shape. It can be a primitive circle or rect or a polygon defined by a set of absolute x and y coordinates: <area shape="circle" coords="..." ... /> <area shape="rect" coords="..." ... /> <area shape="poly" coords="..." ... /> Despite their age, image maps still offer plenty of benefits. They’re lightweight and need (almost) no JavaScript. More on that in just a minute. They’re accessible and semantic when used with alt, ARIA, and title attributes. Despite being from a different era, even modern mobile browsers support image maps. Design by Andy Clarke, Stuff & Nonsense. Mike Worth’s website will launch in April 2025, but you can see examples from this article on CodePen. My design for Mike Worth includes several graphic navigation elements, which made me wonder if image maps might still be an appropriate solution. Image maps in action Mike wants his website to showcase his past work and the projects he’d like to do. To make this aspect of his design discoverable and fun, I created a map for people to explore by pressing on areas of the map to open modals. This map contains numbered circles, and pressing one pops up its modal. My first thought was to embed anchors into the external map SVG: <img src="projects.svg" alt="Projects"> <svg ...> ... <a href="..."> <circle cx="35" cy="35" r="35" fill="#941B2F"/> <path fill="#FFF" d="..."/> </a> </svg> This approach is problematic. Those anchors are only active when SVG is inline and don’t work with an <img> element. But image maps work perfectly, even though specifying their coordinates can be laborious. Fortunately, plenty of tools are available, which make defining coordinates less tedious. Upload an image, choose shape types, draw the shapes, and copy the markup: <img src="projects.svg" usemap="#projects-map.svg"> <map name="projects-map.svg"> <area href="" alt="" coords="..." shape="circle"> <area href="" alt="" coords="..." shape="circle"> ... </map> Image maps work well when images are fixed sizes, but flexible images present a problem because map coordinates are absolute, not relative to an image’s dimensions. Making image maps responsive needs a little JavaScript to recalculate those coordinates when the image changes size: function resizeMap() { const image = document.getElementById("projects"); const map = document.querySelector("map[name='projects-map']"); if (!image || !map || !image.naturalWidth) return; const scale = image.clientWidth / image.naturalWidth; map.querySelectorAll("area").forEach(area => { if (!area.dataset.originalCoords) { area.dataset.originalCoords = area.getAttribute("coords"); } const scaledCoords = area.dataset.originalCoords .split(",") .map(coord => Math.round(coord * scale)) .join(","); area.setAttribute("coords", scaledCoords); }); } ["load", "resize"].forEach(event => window.addEventListener(event, resizeMap) ); I still wasn’t happy with this implementation as I wanted someone to be able to press on much larger map areas, not just the numbered circles. Every <path> has coordinates which define how it’s drawn, and they’re relative to the SVG viewBox: <svg width="1024" height="1024"> <path fill="#BFBFBF" d="…"/> </svg> On the other hand, a map’s <area> coordinates are absolute to the top-left of an image, so <path> values need to be converted. Fortunately, Raphael Monnerat has written PathToPoints, a tool which does precisely that. Upload an SVG, choose the point frequency, copy the coordinates for each path, and add them to a map area’s coords: <map> <area href="" shape="poly" coords="..."> <area href="" shape="poly" coords="..."> <area href="" shape="poly" coords="..."> ... </map> More issues with image maps Image maps are hard-coded and time-consuming to create without tools. Even with tools for generating image maps, converting paths to points, and then recalculating them using JavaScript, they could be challenging to maintain at scale. <area> elements aren’t visible, and except for a change in the cursor, they provide no visual feedback when someone hovers over or presses a link. Plus, there’s no easy way to add animations or interaction effects. But the deal-breaker for me was that an image map’s pixel-based values are unresponsive by default. So, what might be an alternative solution for implementing my map using CSS, HTML, and SVG? Anchors positioned absolutely over my map wouldn’t solve the pixel-based positioning problem or give me the irregular-shaped clickable areas I wanted. Anchors within an external SVG wouldn’t work either. But the solution was staring me in the face. I realized I needed to: Create a new SVG path for each clickable area. Make those paths invisible. Wrap each path inside an anchor. Place the anchors below other elements at the end of my SVG source. Replace that external file with inline SVG. I created a set of six much larger paths which define the clickable areas, each with its own fill to match its numbered circle. I placed each anchor at the end of my SVG source: <svg … viewBox="0 0 1024 1024"> <!-- Visible content --> <g>...</g> <!-- Clickable areas -->` <g id="links">` <a href="..."><path fill="#B48F4C" d="..."/></a>` <a href="..."><path fill="#6FA676" d="..."/></a>` <a href="..."><path fill="#30201D" d="..."/></a>` ... </g> </svg> Then, I reduced those anchors’ opacity to 0 and added a short transition to their full-opacity hover state: #links a { opacity: 0; transition: all .25s ease-in-out; } #links a:hover { opacity: 1; } While using an image map’s <area> sadly provides no visual feedback, embedded anchors and their content can respond to someone’s action, hint at what’s to come, and add detail and depth to a design. I might add gloss to those numbered circles to be consistent with the branding I’ve designed for Mike. Or, I could include images, titles, or other content to preview the pop-up modals: <g id="links"> <a href="…"> <path fill="#B48F4C" d="..."/> <image href="..." ... /> </a> </g> Try it for yourself: CodePen Embed Fallback Expressive design, modern techniques Designing Mike Worth’s website gave me a chance to blend expressive design with modern development techniques, and revisiting image maps reminded me just how important a tool image maps were during the period Mike loves so much. Ultimately, image maps weren’t the right tool for Mike’s website. But exploring them helped me understand what I really needed: a way to recapture the expressiveness and personality of ’90s website design using modern techniques that are accessible, lightweight, responsive, and semantic. That’s what design’s about: choosing the right tool for a job, even if that sometimes means looking back to move forward. Biography: Andy Clarke Often referred to as one of the pioneers of web design, Andy Clarke has been instrumental in pushing the boundaries of web design and is known for his creative and visually stunning designs. His work has inspired countless designers to explore the full potential of product and website design. Andy’s written several industry-leading books, including Transcending CSS, Hardboiled Web Design, and Art Direction for the Web. He’s also worked with businesses of all sizes and industries to achieve their goals through design. Visit Andy’s studio, Stuff & Nonsense, and check out his Contract Killer, the popular web design contract template trusted by thousands of web designers and developers. Revisiting Image Maps originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

by: Sreenath Wed, 30 Apr 2025 05:46:58 GMT Logseq is different from the conventional note-taking applications in many aspects. Firstly, it follows a note block approach, rather than a page-first approach for content organization. This allows Logseq to achieve data interlinking at the sentence level. That is, you can refer to any sentence of a note in any other note inside your database. Another equally important feature is the “Special Pages”. These are the “Journals” and “Contents” pages. Both of these special pages have use-cases far higher than what their names indicate. The Journals pageThe “Journals” is the first page you will see when you open Logseq. Here, you can see dates as headings. The Logseq documentation suggests that a new user, before understanding Logseq better, should use this Journals page heavily for taking notes. Journals PageAs the name suggests, this is the daily journals page. Whatever you write under a date will be saved as a separate Markdown file with the date as the title. You can see these pages in your file manager, too. Head to the location you use for Logseq, then visit the journals page. Journals Markdown Files in File ManagerLet's see how to make this Journals page most useful. Journal page as a daily diaryLet's start with the basics. The “Journals” page can be used as your daily diary page. If you are a frequent diary writer, Logseq is the best tool to digitize your life experiences and daily thoughts. Each day, a new page will be created for you. If you need a page for a day in the past, Just click on the Create button on the bottom of Logseq window and select “New page”. Click on Create → New PageIn the dialog, enter the date for the required journal in the format, Mar 20th, 2023. Press enter. This will create the Journal page for the specified that for you! Create Journal page for an old dateJournal as a note organizerIf you have read the Logseq Pages and Links article in this series, you should recall the fact that Logseq considers the concept of Pages, Tags, etc. in almost similar manner. If you want to create a new note, the best way is to use the keyboard method: #[[Note Title Goes Here]]The above creates a page for you. Now, the best place to create a new page is the Journals page. Logseq has a powerful backlink feature. With this, if you use the Journals page to create a new page, you don't need to add any date references inside the page separately, since at the very end of the page, you will have a backlink to that day's journal. Note with date referenceThis is beneficial because you can recall when a note was first created easily. Journal as a to-do organizerLogseq can be used as a powerful task manager application as well, and the Journals page plays a crucial role in it. If you come across any task while you are in the middle of something, just open the Journals page in Logseq and press the / key. Search and enter TODO. Then type the task you are about to do. Once done, press / again and search for Date Picker. Select a date from the calendar. 0:00 /0:29 1× Creating a TODO task in Logseq That's it. You have created a to-do item with a due date. Now, when the date arrives, you will get a link on that day's Journal page. Thus, when you open Logseq on that day, you will see this item. It will also contain the link to the journal page from where you added the task. Other than that, you can search for the TODO page and open it to see all your task list, marked with TODO. 0:00 /0:23 1× Search for the TODO page to list all the to-do tasks Journal to manage tasksTask management is not just adding due date to your tasks. You should be able to track a project and know at what stage a particular task is. For this, Logseq has some built-in tags/pages. For example, LATER, DOING, DONE, etc. These tags can be accessed by pressing the / key and searching for the name. For example, if you have some ideas that should be done at a later date, but not sure when exactly, add these with the LATER tag, just like the TODO tag explained above. Now, you can search for the LATER tag to know what all tasks are added to that list. 0:00 /0:22 1× Using the LATER tag in Logseq Using the Journal page is beneficial here because you will be able to recollect on what date a particular task was added, allowing you to get more insight about that task. This will help you more, if you have entered your thoughts of that day in the Journal. The Contents PageLogseq has a special Contents page type, but don't confuse it with the usual table of contents. That is not its purpose. Here, I will mention the way I use the contents page. You can create your own workflows once you know its potential. You can think of the Contents page as a manually created Dashboard to your notes and database. Or, a simple home page from where you can access contents needed frequently. The most interesting thing that sets the contents page apart from others is the fact that it will always be visible in the right sidebar. Therefore, if you enable the sidebar permanently, you can see the quick links in the contents all the time. Edit the Contents pageAs said above, the Contents page is available on the right sidebar. So click on the sidebar button in the top panel and select Contents. You can edit this page from this sidebar view, which is the most convenient way. Click on the Sidebar button and select ContentsAll the text formatting, linking, etc., that work on Logseq pages works on this page as well. 1. Add all important pages/tagsThe first thing you can do is to add frequently accessed pages or tags. For example, let's say you will be accessing the Kernel, Ubuntu, and APT tags frequently. So, what you can do is to add a Markdown heading: ## List of TagsNow, link the tags right in there, one per line: #Kernel #Ubuntu #APTFor better arrangement, you can use the Markdown horizontal rule after each section. ---2. Link the task management pagesAs discussed in the Journals section, you can have a variety of task related tags like TODO, LATER, WAITING, etc. So you can link each of these in the contents page: ## List of Tasks #TODO #LATER #WAITING ---🚧Please note the difference between the Markdown heading and the Logseq tags. So, don't forget to add a space after the # if you are creating a Markdown header.3. Quick access linksIf you are visiting some websites daily, you can bookmark these websites on the contents page for quickly accessing them. ## Quick access links [It's FOSS](https://itsfoss.com/) [It's FOSS Community](https://itsfoss.community/) [Arch Linux News](https://archlinux.org/) [GitHub](https://github.com/) [Reddit](https://www.reddit.com/)After all this, your contents page will look like this: Contents page in LogseqWrapping UpAs you can see, you can utilize these pages in non-conventional ways to get a more extensive experience from Logseq. That's the beauty of this open-source tool. The more you explore, the more you discover, the more you enjoy. In the next part of this series, I'll share my favorite Logseq extensions.

by: Geoff Graham Tue, 29 Apr 2025 14:27:25 +0000 Brad Frost is running this new little podcast called Open Up. Folks write in with questions about the “other” side of web design and front-end development — not so much about tools and best practices as it is about the things that surround the work we do, like what happens if you get laid off, or AI takes your job, or something along those lines. You know, the human side of what we do in web design and development. Well, it just so happens that I’m co-hosting the show. In other words, I get to sprinkle in a little advice on top of the wonderful insights that Brad expertly doles out to audience questions. Our second episode just published, and I thought I’d share it. We’re finding our sea legs with this whole thing and figuring things out as we go. We’ve opened things up (get it?!) to a live audience and even pulled in one of Brad’s friends at the end to talk about the changing nature of working on a team and what it looks like to collaborate in a remote-first world. https://www.youtube.com/watch?v=bquVF5Cibaw Open Up With Brad Frost, Episode 2 originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.