Jump to content

Blogger

Blog Bot
  • Joined

  • Last visited

    Never

Blog Entries posted by Blogger

  1. by: LHB Community
    Mon, 12 May 2025 10:43:21 +0530

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

    It's the release week. Fedora 42 is already out. Ubuntu 25.04 will be releasing later today along with its flavors like Kubuntu, Xubuntu, Lubuntu etc.
    In the midst of these two heavyweights, MX Linux and Manjaro also quickly released newer versions. For Manjaro, it is more of an ISO refresh, as it is a rolling release distribution.
    Overall, a happening week for Linux lovers 🕺
    💬 Let's see what else you get in this edition
    Arco Linux bids farewell. Systemd working on its own Linux distro. Looking at the origin of UNIX. And other Linux news, tips, and, of course, memes! This edition of FOSS Weekly is supported by Aiven. ❇️ Aiven for ClickHouse® - The Fastest Open Source Analytics Database, Fully Managed
    ClickHouse processes analytical queries 100-1000x faster than traditional row-oriented systems. Aiven for ClickHouse® gives you the lightning-fast performance of ClickHouse–without the infrastructure overhead.
    Just a few clicks is all it takes to get your fully managed ClickHouse clusters up and running in minutes. With seamless vertical and horizontal scaling, automated backups, easy integrations, and zero-downtime updates, you can prioritize insights–and let Aiven handle the infrastructure.
    Managed ClickHouse database | AivenAiven for ClickHouse® – fully managed, maintenance-free data warehouse ✓ All-in-one open source cloud data platform ✓ Try it for freeAiven📰 Linux and Open Source News
    The Arch-based ArcoLinux has been discontinued. Fedora 42 has been released with some rather interesting changes. Manjaro 25.0 'Zetar' is here, offering a fresh image for new installations. ParticleOS is Systemd's attempt at a Linux distribution.
    ParticleOS: Systemd’s Very Own Linux Distro in MakingA Linux distro from systemd? Sounds interesting, right?It's FOSS NewsSourav Rudra🧠 What We’re Thinking About
    Linus Torvalds was told that Git is more popular than Linux.
    Git is More Popular than Linux: TorvaldsLinus Torvalds reflects on 20 years of Git.It's FOSS NewsSourav Rudra🧮 Linux Tips, Tutorials and More
    11 vibe coding tools to 10x your dev workflow. Adding comments in bash scripts. Understand the difference between Pipewire and Pulseaudio. Make your Logseq notes more readable by formatting them. That's a new series focusing on Logseq. From UNIX to today’s tech. Learn how it shaped the digital world. Desktop Linux is mostly neglected by the industry but loved by the community. For the past 12 years, It's FOSS has been helping people use Linux on their personal computers. And we are now facing the existential threat from AI models stealing our content.
    If you like what we do and would love to support our work, please become It's FOSS Plus member. It costs $24 a year (less than the cost of a burger meal each month) and you get an ad-free reading experience with the satisfaction of helping the desktop Linux community.
    Join It's FOSS Plus 👷 Homelab and Maker's Corner
    These 28 cool Raspberry Pi Zero W projects will keep you busy.
    28 Super Cool Raspberry Pi Zero W Project IdeasWondering what to do with your Raspberry Pi Zero W? Here are a bunch of project ideas you can spend some time on and satisfy your DIY craving.It's FOSSChinmay✨ Apps Highlight
    You can download YouTube videos using Seal on Android.
    Seal: A Nifty Open Source Android App to Download YouTube Video and AudioDownload YouTube video/music (for educational purpose or with consent) with this little, handy Android app.It's FOSS NewsSourav Rudra📽️ Videos I am Creating for You
    See the new features of Ubuntu 25.04 in action in this video.
    Subscribe to It's FOSS YouTube Channel🧩 Quiz Time
    Our Guess the Desktop Environment Crossword will test your knowledge.
    Guess the Desktop Environment: CrosswordTest your desktop Linux knowledge with this simple crossword puzzle. Can you solve it all correctly?It's FOSSAbhishek PrakashAlternatively, guess all of these open source privacy tools correctly?
    Know The Best Open-Source Privacy ToolsDo you utilize open-source tools for privacy?It's FOSSAnkush Das💡 Quick Handy Tip
    You can make Thunar open a new tab instead of a new window. This is good in situations when opening a folder from other apps, like a web browser. This reduces screen clutter.
    First, click on Edit ⇾ Preferences. Here, go to the Behavior tab. Now, under "Tabs and Windows", enable the first checkbox as shown above or all three if you need the functionality of the other two.
    🤣 Meme of the Week
    We are generally a peaceful bunch, for the most part. 🫣
    🗓️ Tech Trivia
    On April 16, 1959, John McCarthy publicly introduced LISP, a programming language for AI that emphasized symbolic computation. This language remains influential in AI research today.
    🧑‍🤝‍🧑 FOSSverse Corner
    FOSSers are discussing VoIP, do you have any insights to add here?
    A discussion over Voice Over Internet Protocol (VoIP)I live in a holiday village where we have several different committees and meetings, for those not present to attend the meetings we do video conférences using voip. A few years back the prefered system was skype, we changed to whatsapp last year as we tend to use its messaging facilities and its free. We have a company who manages our accounts, they prefer using teams, paid for version as they can invoice us for its use … typical accountant. My question, does it make any difference in band w…It's FOSS Communitycallpaul.eu (Paul)❤️ With love
    Share it with your Linux-using friends and encourage them to subscribe (hint: it's here).
    Share the articles in Linux Subreddits and community forums.
    Follow us on Google News and stay updated in your News feed.
    Opt for It's FOSS Plus membership and support us 🙏
    Enjoy FOSS 😄
  3. by: Juan Diego Rodríguez
    Wed, 12 Feb 2025 14:15:28 +0000

    We’ve been able to get the length of the viewport in CSS since… checks notes… 2013! Surprisingly, that was more than a decade ago. Getting the viewport width is as easy these days as easy as writing 100vw, but what does that translate to, say, in pixels? What about the other properties, like those that take a percentage, an angle, or an integer?
    Think about changing an element’s opacity, rotating it, or setting an animation progress based on the screen size. We would first need the viewport as an integer — which isn’t currently possible in CSS, right?
    What I am about to say isn’t a groundbreaking discovery, it was first described amazingly by Jane Ori in 2023. In short, we can use a weird hack (or feature) involving the tan() and atan2() trigonometric functions to typecast a length (such as the viewport) to an integer. This opens many new layout possibilities, but my first experience was while writing an Almanac entry in which I just wanted to make an image’s opacity responsive.
    Resize the CodePen and the image will get more transparent as the screen size gets smaller, of course with some boundaries, so it doesn’t become invisible:
    CodePen Embed Fallback This is the simplest we can do, but there is a lot more. Take, for example, this demo I did trying to combine many viewport-related effects. Resize the demo and the page feels alive: objects move, the background changes and the text smoothly wraps in place.
    CodePen Embed Fallback I think it’s really cool, but I am no designer, so that’s the best my brain could come up with. Still, it may be too much for an introduction to this typecasting hack, so as a middle-ground, I’ll focus only on the title transition to showcase how all of it works:
    CodePen Embed Fallback Setting things up
    The idea behind this is to convert 100vw to radians (a way to write angles) using atan2(), and then back to its original value using tan(), with the perk of coming out as an integer. It should be achieved like this:
    :root { --int-width: tan(atan2(100vw, 1px)); } But! Browsers aren’t too keep on this method, so a lot more wrapping is needed to make it work across all browsers. The following may seem like magic (or nonsense), so I recommend reading Jane’s post to better understand it, but this way it will work in all browsers:
    @property --100vw { syntax: "<length>"; initial-value: 0px; inherits: false; } :root { --100vw: 100vw; --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px))); } Don’t worry too much about it. What’s important is our precious --int-width variable, which holds the viewport size as an integer!
    CodePen Embed Fallback Wideness: One number to rule them all
    Right now we have the viewport as an integer, but that’s just the first step. That integer isn’t super useful by itself. We oughta convert it to something else next since:
    different properties have different units, and we want each property to go from a start value to an end value. Think about an image’s opacity going from 0 to 1, an object rotating from 0deg to 360deg, or an element’s offset-distance going from 0% to 100%. We want to interpolate between these values as --int-width gets bigger, but right now it’s just an integer that usually ranges between 0 to 1600, which is inflexible and can’t be easily converted to any of the end values.
    The best solution is to turn --int-width into a number that goes from 0 to 1. So, as the screen gets bigger, we can multiply it by the desired end value. Lacking a better name, I call this “0-to-1” value --wideness. If we have --wideness, all the last examples become possible:
    /* If `--wideness is 0.5 */ .element { opacity: var(--wideness); /* is 0.5 */ translate: rotate(calc(wideness(400px, 1200px) * 360deg)); /* is 180deg */ offset-distance: calc(var(--wideness) * 100%); /* is 50% */ } So --wideness is a value between 0 to 1 that represents how wide the screen is: 0 represents when the screen is narrow, and 1 represents when it’s wide. But we still have to set what those values mean in the viewport. For example, we may want 0 to be 400px and 1 to be 1200px, our viewport transitions will run between these values. Anything below and above is clamped to 0 and 1, respectively.
    In CSS, we can write that as follows:
    :root { /* Both bounds are unitless */ --lower-bound: 400; --upper-bound: 1200; --wideness: calc( (clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) - var(--lower-bound)) / (var(--upper-bound) - var(--lower-bound)) ); } Besides easy conversions, the --wideness variable lets us define the lower and upper limits in which the transition should run. And what’s even better, we can set the transition zone at a middle spot so that the user can see it in its full glory. Otherwise, the screen would need to be 0px so that --wideness reaches 0 and who knows how wide to reach 1.
    CodePen Embed Fallback We got the --wideness. What’s next?
    For starters, the title’s markup is divided into spans since there is no CSS-way to select specific words in a sentence:
    <h1><span>Resize</span> and <span>enjoy!</span></h1> And since we will be doing the line wrapping ourselves, it’s important to unset some defaults:
    h1 { position: absolute; /* Keeps the text at the center */ white-space: nowrap; /* Disables line wrapping */ } The transition should work without the base styling, but it’s just too plain-looking. They are below if you want to copy them onto your stylesheet:
    CodePen Embed Fallback And just as a recap, our current hack looks like this:
    @property --100vw { syntax: "<length>"; initial-value: 0px; inherits: false; } :root { --100vw: 100vw; --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px))); --lower-bound: 400; --upper-bound: 1200; --wideness: calc( (clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) - var(--lower-bound)) / (var(--upper-bound) - var(--lower-bound)) ); } OK, enough with the set-up. It’s time to use our new values and make the viewport transition. We first gotta identify how the title should be rearranged for smaller screens: as you saw in the initial demo, the first span goes up and right, while the second span does the opposite and goes down and left. So, the end position for both spans translates to the following values:
    h1 { span:nth-child(1) { display: inline-block; /* So transformations work */ position: relative; bottom: 1.2lh; left: 50%; transform: translate(-50%); } span:nth-child(2) { display: inline-block; /* So transformations work */ position: relative; bottom: -1.2lh; left: -50%; transform: translate(50%); } } Before going forward, both formulas are basically the same, but with different signs. We can rewrite them at once bringing one new variable: --direction. It will be either 1 or -1 and define which direction to run the transition:
    h1 { span { display: inline-block; position: relative; bottom: calc(1.2lh * var(--direction)); left: calc(50% * var(--direction)); transform: translate(calc(-50% * var(--direction))); } span:nth-child(1) { --direction: 1; } span:nth-child(2) { --direction: -1; } } CodePen Embed Fallback The next step would be bringing --wideness into the formula so that the values change as the screen resizes. However, we can’t just multiply everything by --wideness. Why? Let’s see what happens if we do:
    span { display: inline-block; position: relative; bottom: calc(var(--wideness) * 1.2lh * var(--direction)); left: calc(var(--wideness) * 50% * var(--direction)); transform: translate(calc(var(--wideness) * -50% * var(--direction))); } As you’ll see, everything is backwards! The words wrap when the screen is too wide, and unwrap when the screen is too narrow:
    CodePen Embed Fallback Unlike our first examples, in which the transition ends as --wideness increases from 0 to 1, we want to complete the transition as --wideness decreases from 1 to 0, i.e. while the screen gets smaller the properties need to reach their end value. This isn’t a big deal, as we can rewrite our formula as a subtraction, in which the subtracting number gets bigger as --wideness increases:
    span { display: inline-block; position: relative; bottom: calc((1.2lh - var(--wideness) * 1.2lh) * var(--direction)); left: calc((50% - var(--wideness) * 50%) * var(--direction)); transform: translate(calc((-50% - var(--wideness) * -50%) * var(--direction))); } And now everything moves in the right direction while resizing the screen!
    CodePen Embed Fallback However, you will notice how words move in a straight line and some words overlap while resizing. We can’t allow this since a user with a specific screen size may get stuck at that point in the transition. Viewport transitions are cool, but not at the expense of ruining the experience for certain screen sizes.
    Instead of moving in a straight line, words should move in a curve such that they pass around the central word. Don’t worry, making a curve here is easier than it looks: just move the spans twice as fast in the x-axis as they do in the y-axis. This can be achieved by multiplying --wideness by 2, although we have to cap it at 1 so it doesn’t overshoot past the final value.
    span { display: inline-block; position: relative; bottom: calc((1.2lh - var(--wideness) * 1.2lh) * var(--direction)); left: calc((50% - min(var(--wideness) * 2, 1) * 50%) * var(--direction)); transform: translate(calc((-50% - min(var(--wideness) * 2, 1) * -50%) * var(--direction))); } Look at that beautiful curve, just avoiding the central text:
    CodePen Embed Fallback This is just the beginning!
    It’s surprising how powerful having the viewport as an integer can be, and what’s even crazier, the last example is one of the most basic transitions you could make with this typecasting hack. Once you do the initial setup, I can imagine a lot more possible transitions, and --widenesss is so useful, it’s like having a new CSS feature right now.
    I expect to see more about “Viewport Transitions” in the future because they do make websites feel more “alive” than adaptive.
    Typecasting and Viewport Transitions in CSS With tan(atan2()) originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Important Information

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

Configure browser push notifications

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