By: Linux.com Editorial Staff
Mon, 10 Mar 2025 15:30:39 +0000

Join us for a Complimentary Live Webinar Sponsored by Linux Foundation Education and Arm Education

March 19, 2025 | 08:00 AM PDT (UTC-7)

You won’t believe how fast this is! Join us for an insightful webinar on leveraging CPUs for machine learning inference using the recently released, open source KleidiAI library. Discover how KleidiAI’s optimized micro-kernels are already being adopted by popular ML frameworks like PyTorch, enabling developers to achieve amazing inference performance without GPU acceleration. We’ll discuss the key optimizations available in KleidiAI, review real-world use cases, and demonstrate how to get started with ease in a fireside chat format, ensuring you stay ahead in the ML space and harness the full potential of CPUs already in consumer hands. This Linux Foundation Education webinar is supported under the Semiconductor Education Alliance and sponsored by Arm.

Register Now

The post Learn how easy it is to leverage CPUs for machine learning with our free webinar appeared first on Linux.com.

by: Sreenath
Mon, 07 Apr 2025 16:18:54 GMT

Logseq is a versatile open source tool for knowledge management. It is regarded as one of the best open source alternatives to the popular proprietary tool Obsidian.

While it covers the basics of note-taking, it also doubles down as a powerful task manager and journaling tool.

What sets Logseq apart from traditional note-taking apps is its unique organization system, which forgoes hierarchical folder structures in favor of interconnected, block-based notes. This makes it an excellent choice for users seeking granular control and flexibility over their information.

In this article, we’ll explore how to install Logseq on Linux distributions.

Use the official AppImage

For Linux systems, Logseq officially provides an AppImage. You can head over to the downloads page and grab the AppImage file.

It is advised to use tools like AppImageLauncher (hasn't seen a new release for a while, but it is active) or GearLever to create a desktop integration for Logseq.

Fret not, if you would rather not use a third-party tool, you can do it yourself as well.

First, create a folder in your home directory to store all the AppImages. Next, move the Logseq AppImage to this location and give the file execution permission.

Right-click on the AppImage file and go to the file properties. Here, in the Permissions tab, select "Allow Executing as a Program" or "Executable as Program" depending on the distro, but it has the same meaning.

Here's how it looks on a distribution with GNOME desktop:

Once done, you can double-click to open Logseq app.

Alternatively, use the 'semi-official' Flatpak

Logseq has a Flatpak version available. This is not an official offering from the Logseq team, but is provided by a developer who also contributes to Logseq.

First, make sure your system has Flatpak support. If not, enable Flatpak support and add Flathub repository by following our guide:

Using Flatpak on Linux [Complete Guide]

Learn all the essentials for managing Flatpak packages in this beginner’s guide.

It's FOSSAbhishek Prakash

Now, install Logseq either from a Flatpak supported software center like GNOME Software:

Or install it using the terminal with the following command:

flatpak install flathub com.logseq.Logseq

Other methods

For Ubuntu users and those who have Snap setup, there is an unofficial Logseq client in the Snap store. You can go with that if you prefer.

There are also packages available in the AUR for Logseq desktop clients. Arch Linux users can take a look at these packages and get it installed via the terminal using Pamac package manager.

Post Installation

Once you have installed Logseq, open it. This will bring you to the temporary journal page.

You need to open a local folder for Logseq to start your work to avoid potential data loss. For this, click on the "Add a graph" button on the top-right, as shown in the screenshot below.

On the resulting page, click on "Choose a folder" button.

From the file chooser, either create a new directory or select an existing directory and click "Open".

That's it. You can start using Logseq now. And I'll help you with that. I'll be sharing regular tutorials on using Logseq for the next few days/weeks here. Stay tuned.

Overview

On Thursday, February 6, 2025, multiple Cloudflare services, including R2 object storage, experienced a significant outage lasting 59 minutes. This incident resulted in complete operational failures against R2 and disruptions to dependent services such as Stream, Images, Cache Reserve, Vectorize, and Log Delivery. The root cause was traced to human error and inadequate validation safeguards during routine abuse remediation procedures.

Impact Summary

• Incident Duration: 08:14 UTC to 09:13 UTC (primary impact), with residual effects until 09:36 UTC.

• Primary Issue: Disabling of the R2 Gateway service, responsible for the R2 API.

• Data Integrity: No data loss or corruption occurred within R2.

Affected Services

1. R2: 100% failure of operations (uploads, downloads, metadata) during the outage. Minor residual errors (<1%) post-recovery.

2. Stream: Complete service disruption during the outage.

3. Images: Full impact on upload/download; delivery minimally affected (97% success rate).

4. Cache Reserve: Increased origin requests, impacting <0.049% of cacheable requests.

5. Log Delivery: Delays and data loss (up to 4.5% for non-R2, 13.6% for R2 jobs).

6. Durable Objects: 0.09% error rate spike post-recovery.

7. Cache Purge: 1.8% error rate increase, 10x latency during the incident.

8. Vectorize: 75% query failures, 100% insert/upsert/delete failures during the outage.

9. Key Transparency Auditor: Complete failure of publish/read operations.

10. Workers & Pages: Minimal deployment failures (0.002%) for projects with R2 bindings.

Incident Timeline

• 08:12 UTC: R2 Gateway service inadvertently disabled.

• 08:14 UTC: Service degradation begins.

• 08:25 UTC: Internal incident declared.

• 08:42 UTC: Root cause identified.

• 08:57 UTC: Operations team begins re-enabling the R2 Gateway.

• 09:10 UTC: R2 starts to recover.

• 09:13 UTC: Primary impact ends.

• 09:36 UTC: Residual error rates recover.

• 10:29 UTC: Incident officially closed after monitoring.

Root Cause Analysis

The incident stemmed from human error during a phishing site abuse report remediation. Instead of targeting a specific endpoint, actions mistakenly disabled the entire R2 Gateway service. Contributing factors included:

• Lack of system-level safeguards.

• Inadequate account tagging and validation.

• Limited operator training on critical service disablement risks.

The Risks of CDN Dependencies in Critical Systems

Content Delivery Networks (CDNs) play a vital role in improving website performance, scalability, and security. However, relying heavily on CDNs for critical systems can introduce significant risks when outages occur:

• Lost Revenue: Downtime on e-commerce platforms or SaaS services can result in immediate lost sales and financial transactions, directly affecting revenue streams.

• Lost Data: Although R2 did not suffer data loss in this incident, disruptions in data transmission processes can lead to lost or incomplete data, especially in logging and analytics services.

• Lost Customers: Extended or repeated outages can erode customer trust and satisfaction, leading to churn and damage to brand reputation.

• Operational Disruptions: Businesses relying on real-time data processing or automated workflows may face cascading failures when critical CDN services are unavailable.

Remediation Steps

Immediate Actions:

• Deployment of additional guardrails in the Admin API.

• Disabling high-risk manual actions in the abuse review UI.

In-Progress Measures:

• Improved internal account provisioning.

• Restricting product disablement permissions.

• Implementing two-party approval for critical actions.

• Enhancing abuse checks to prevent internal service disruptions.

Cloudflare acknowledges the severity of this incident and the disruption it caused to customers. We are committed to strengthening our systems, implementing robust safeguards, and ensuring that similar incidents are prevented in the future.

For more information about Cloudflare's services or to explore career opportunities, visit our website.

by: Geoff Graham
Wed, 09 Apr 2025 13:00:24 +0000

The CSS Overflow Module Level 5 specification defines a couple of new features that are designed for creating carousel UI patterns:

• Scroll Buttons: Buttons that the browser provides, as in literal <button> elements, that scroll the carousel content 85% of the area when clicked.
• Scroll Markers: The little dots that act as anchored links, as in literal <a> elements that scroll to a specific carousel item when clicked.

Chrome has prototyped these features and released them in Chrome 135. Adam Argyle has a wonderful explainer over at the Chrome Developer blog. Kevin Powell has an equally wonderful video where he follows the explainer. This post is me taking notes from them.

First, some markup:

<ul class="carousel">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

First, let’s set these up in a CSS auto grid that displays the list items in a single line:

.carousel {
  display: grid;
  grid-auto-flow: column;
}

We can tailor this so that each list item takes up a specific amount of space, say 40%, and insert a gap between them:

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40%;
  gap: 2rem;
}

This gives us a nice scrolling area to advance through the list items by moving left and right. We can use CSS Scroll Snapping to ensure that scrolling stops on each item in the center rather than scrolling right past them.

.carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 40%;
  gap: 2rem;

  scroll-snap-type: x mandatory;

  > li {
    scroll-snap-align: center;
  }
}

Kevin adds a little more flourish to the .carousel so that it is easier to see what’s going on. Specifically, he adds a border to the entire thing as well as padding for internal spacing.

So far, what we have is a super simple slider of sorts where we can either scroll through items horizontally or click the left and right arrows in the scroller.

We can add scroll buttons to the mix. We get two buttons, one to navigate one direction and one to navigate the other direction, which in this case is left and right, respectively. As you might expect, we get two new pseudo-elements for enabling and styling those buttons:

• ::scroll-button(left)
• ::scroll-button(right)

Interestingly enough, if you crack open DevTools and inspect the scroll buttons, they are actually exposed with logical terms instead, ::scroll-button(inline-start) and ::scroll-button(inline-end).

And both of those support the CSS content property, which we use to insert a label into the buttons. Let’s keep things simple and stick with “Left” and “Right” as our labels for now:

.carousel::scroll-button(left) {
  content: "Left";
}
.carousel::scroll-button(right) {
  content: "Right";
}

Now we have two buttons above the carousel. Clicking them either advances the carousel left or right by 85%. Why 85%? I don’t know. And neither does Kevin. That’s just what it says in the specification. I’m sure there’s a good reason for it and we’ll get more light shed on it at some point.

But clicking the buttons in this specific example will advance the scroll only one list item at a time because we’ve set scroll snapping on it to stop at each item. So, even though the buttons want to advance by 85% of the scrolling area, we’re telling it to stop at each item.

Remember, this is only supported in Chrome at the time of writing:

We can select both buttons together in CSS, like this:

.carousel::scroll-button(left),
.carousel::scroll-button(right) {
  /* Styles */
}

Or we can use the Universal Selector:

.carousel::scroll-button(*) {
  /* Styles */
}

And we can even use newer CSS Anchor Positioning to set the left button on the carousel’s left side and the right button on the carousel’s right side:

.carousel {
  /* ... */
  anchor-name: --carousel; /* define the anchor */
}

.carousel::scroll-button(*) {
  position: fixed; /* set containment on the target */
  position-anchor: --carousel; /* set the anchor */
}

.carousel::scroll-button(left) {
  content: "Left";
  position-area: center left;
}
.carousel::scroll-button(right) {
  content: "Right";
  position-area: center right;
}

Notice what happens when navigating all the way to the left or right of the carousel. The buttons are disabled, indicating that you have reached the end of the scrolling area. Super neat! That’s something that is normally in JavaScript territory, but we’re getting it for free.

Let’s work on the scroll markers, or those little dots that sit below the carousel’s content. Each one is an <a> element anchored to a specific list item in the carousel so that, when clicked, you get scrolled directly to that item.

We get a new pseudo-element for the entire group of markers called ::scroll-marker-group that we can use to style and position the container. In this case, let’s set Flexbox on the group so that we can display them on a single line and place gaps between them in the center of the carousel’s inline size:

.carousel::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

We also get a new scroll-marker-group property that lets us position the group either above (before) the carousel or below (after) it:

.carousel {
  /* ... */
  scroll-marker-group: after; /* displayed below the content */
}

We can style the markers themselves with the new ::scroll-marker pseudo-element:

.carousel {
  /* ... */

  > li::scroll-marker {
    content: "";
    aspect-ratio: 1;
    border: 2px solid CanvasText;
    border-radius: 100%;
    width: 20px;
  }
}

When clicking on a marker, it becomes the “active” item of the bunch, and we get to select and style it with the :target-current pseudo-class:

li::scroll-marker:target-current {
  background: CanvasText;
}

Take a moment to click around the markers. Then take a moment using your keyboard and appreciate that we can all of the benefits of focus states as well as the ability to cycle through the carousel items when reaching the end of the markers. It’s amazing what we’re getting for free in terms of user experience and accessibility.

We can further style the markers when they are hovered or in focus:

li::scroll-marker:hover,
li::scroll-marker:focus-visible {
  background: LinkText;
}

And we can “animate” the scrolling effect by setting scroll-behavior: smooth on the scroll snapping. Adam smartly applies it when the user’s motion preferences allow it:

.carousel {
  /* ... */

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

Buuuuut that seems to break scroll snapping a bit because the scroll buttons are attempting to slide things over by 85% of the scrolling space. Kevin had to fiddle with his grid-auto-columns sizing to get things just right, but showed how Adam’s example took a different sizing approach. It’s a matter of fussing with things to get them just right.

---

This is just a super early look at CSS Carousels. Remember that this is only supported in Chrome 135+ at the time I’m writing this, and it’s purely experimental. So, play around with it, get familiar with the concepts, and then be open-minded to changes in the future as the CSS Overflow Level 5 specification is updated and other browsers begin building support.

---

CSS Carousels originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.