# Effect

Published articles for Effect.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## How Value Induction Reshapes LLM Behaviour

DevFeed: [How Value Induction Reshapes LLM Behaviour](<https://devfeed.tech/articles/how-value-induction-reshapes-llm-behaviour-31492.md>)

Original publisher: [Read original article](<https://machinelearning.apple.com/research/value-induction-llm-behaviour>)

Published: 2026-09-16T00:00:00Z

Content type: article

Language: en

Sources: [Apple Machine Learning Research](<https://devfeed.tech/sources/apple-machine-learning-research.md>)

Topics: [Large Language Model](<https://devfeed.tech/topics/llm.md>), [LLM Techniques](<https://devfeed.tech/topics/llm-techniques.md>), [LLM evaluation / benchmarking](<https://devfeed.tech/topics/llm-evaluation-benchmarking.md>)

Tags: [complex](<https://devfeed.tech/tags/complex.md>), [effect](<https://devfeed.tech/tags/effect.md>), [language-models](<https://devfeed.tech/tags/language-models.md>), [llm](<https://devfeed.tech/tags/llm.md>), [safety](<https://devfeed.tech/tags/safety.md>), [values](<https://devfeed.tech/tags/values.md>)

### AI overview

This research examines how inducing selected values in conversational large language models affects other values, safety, anthropomorphic language, and question-answering benchmark performance. It finds that value induction can affect related and contrastive values, positive values can increase safety, and all tested values increased anthropomorphic, validating, and sycophantic language.

### Source excerpt

Conversational Large Language Models are post-trained on language that expresses specific behavioural traits, such as curiosity, open-mindedness, and empathy, and values, such as helpfulness, harmlessness, and honesty. This is done to increase utility, ensure safety, and improve the experience of the people interacting with the model. However, values are complex and inter-related - inducing one could modify behaviour on another. Further, inducing certain values can make models more addictive or sycophantic through language used in the generations, with a potential detrimental effect on the...

## How to Create a Water Ripple Text Effect with SVG Filters

DevFeed: [How to Create a Water Ripple Text Effect with SVG Filters](<https://devfeed.tech/articles/svg-filters-are-just-amazing-20475.md>)

Original publisher: [Read original article](<https://www.amitmerchant.com/svg-filters-are-just-amazing/>)

Author: Amit Merchant

Published: 2026-01-12T00:00:00Z

Content type: tutorial

Language: en

Sources: [Amit Merchant](<https://devfeed.tech/sources/amit-merchant.md>)

Topics: [SVG](<https://devfeed.tech/topics/svg.md>), [SVG animations in CSS](<https://devfeed.tech/topics/svg-animations-in-css.md>), [CSS](<https://devfeed.tech/topics/css.md>), [HTML](<https://devfeed.tech/topics/html.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [effect](<https://devfeed.tech/tags/effect.md>), [filter](<https://devfeed.tech/tags/filter.md>), [guide](<https://devfeed.tech/tags/guide.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [svg](<https://devfeed.tech/tags/svg.md>)

### AI overview

This tutorial explains how to create a water ripple effect on text using SVG filters and CSS. It covers defining the target element, configuring filter primitives for noise and turbulence, adjusting their parameters, and applying the filter in CSS.

### Source excerpt

So, lately, I have been exploring Haley Park's website and it's pretty cute and well designed. What caught my attention, though, was this water ripple effect on one of the text snippets.

## Creating a CRT Screen Effect in Jetpack Compose

DevFeed: [Creating a CRT Screen Effect in Jetpack Compose](<https://devfeed.tech/articles/creating-a-crt-screen-effect-in-jetpack-compose-25771.md>)

Original publisher: [Read original article](<https://www.sinasamaki.com/creating-a-crt-screen-effect-in-jetpack-compose/>)

Author: sinasamaki

Published: 2025-11-07T10:50:23Z

Content type: tutorial

Language: en

Sources: [sinasamaki](<https://devfeed.tech/sources/sinasamaki.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [Graphics](<https://devfeed.tech/topics/graphics.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [effect](<https://devfeed.tech/tags/effect.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>)

### AI overview

A tutorial on recreating a CRT monitor effect in Jetpack Compose using an offscreen graphics layer, repeated gradients for scanlines, layered blur for glow, and randomized screen jitter.

### Source excerpt

Using graphics layer, gradients and blur to create this nostalgic effect

## Wrapping a Fancy Ribbon around any Composable

DevFeed: [Wrapping a Fancy Ribbon around any Composable](<https://devfeed.tech/articles/wrapping-a-fancy-ribbon-around-any-composable-25803.md>)

Original publisher: [Read original article](<https://www.sinasamaki.com/wrapping-a-fancy-ribbon-around-any-jetpack-composable/>)

Author: sinasamaki

Published: 2025-05-31T16:47:35Z

Content type: tutorial

Language: en

Sources: [sinasamaki](<https://devfeed.tech/sources/sinasamaki.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [build](<https://devfeed.tech/tags/build.md>), [compose](<https://devfeed.tech/tags/compose.md>), [effect](<https://devfeed.tech/tags/effect.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [ui](<https://devfeed.tech/tags/ui.md>)

### AI overview

This tutorial explains how to build a Jetpack Compose ribbon modifier that wraps around UI elements. It covers drawing a winding path with polar coordinates, matching the ribbon to an element's dimensions, and creating depth by splitting the path into segments drawn above and below the content.

### Source excerpt

How to animate a ribbon that wraps around UI elements in Jetpack Compose

## STAR WARS™ Makes Its Way to Discord

DevFeed: [STAR WARS™ Makes Its Way to Discord](<https://devfeed.tech/articles/star-warstm-makes-its-way-to-discord-282.md>)

Original publisher: [Read original article](<https://discord.com/blog/star-wars-makes-its-way-to-discord>)

Author: Shop Team

Published: 2025-05-04T00:00:00Z

Content type: release

Language: en

Sources: [Discord Blog](<https://devfeed.tech/sources/discord-blog.md>)

Topics: [Discord](<https://devfeed.tech/topics/discord.md>), [App](<https://devfeed.tech/topics/app.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>)

Tags: [app](<https://devfeed.tech/tags/app.md>), [chat](<https://devfeed.tech/tags/chat.md>), [collection](<https://devfeed.tech/tags/collection.md>), [creative](<https://devfeed.tech/tags/creative.md>), [desktop](<https://devfeed.tech/tags/desktop.md>), [discord](<https://devfeed.tech/tags/discord.md>), [display](<https://devfeed.tech/tags/display.md>), [effect](<https://devfeed.tech/tags/effect.md>), [feelings](<https://devfeed.tech/tags/feelings.md>), [gaming](<https://devfeed.tech/tags/gaming.md>), [inspiration](<https://devfeed.tech/tags/inspiration.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [profile](<https://devfeed.tech/tags/profile.md>), [release](<https://devfeed.tech/tags/release.md>), [shop](<https://devfeed.tech/tags/shop.md>), [space](<https://devfeed.tech/tags/space.md>)

### AI overview

Discord has released a Star Wars-themed collection of Avatar Decorations and Profile Effects created in collaboration with Lucasfilm. The collection includes items inspired by characters, vehicles, lightsabers, and iconic scenes from the franchise, and is available through the Shop on desktop and mobile.

### Source excerpt

For this year's Power of the Force celebrations, we're hyped to release a brand-new collection of Star Wars themed Avatar Decorations and Profile Effects!

## Understanding UIViewPropertyAnimator's Presentation-State Behavior

DevFeed: [Understanding UIViewPropertyAnimator's Presentation-State Behavior](<https://devfeed.tech/articles/uiviewpropertyanimator-is-too-cute-32243.md>)

Original publisher: [Read original article](<https://publicobject.com/2025/01/26/uiviewpropertyanimator/>)

Author: Jesse Wilson

Published: 2025-01-26T21:04:55Z

Content type: article

Language: en

Sources: [Public Object](<https://devfeed.tech/sources/public-object.md>)

Topics: [iOS](<https://devfeed.tech/topics/ios.md>), [Swift](<https://devfeed.tech/topics/swift.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [code](<https://devfeed.tech/tags/code.md>), [effect](<https://devfeed.tech/tags/effect.md>), [swift](<https://devfeed.tech/tags/swift.md>)

### AI overview

This article investigates how UIViewPropertyAnimator animates a UIButton's alpha in Swift. It observes that the animated visual state can differ from the property value, that changing some properties during animation may take effect after completion, and that only certain properties animate as expected. An update explains that CALayer.presentation() exposes properties during an animation.

### Source excerpt

I was using the old UIView APIs when I found some code that broke my brain. Here's Swift code to animates a UIButton from opaque to transparent over one second. let button = ... let animateOut = UIViewPropertyAnimator(duration: 1.0, curve: .easeInOut) { print("2 alpha=\(button.alpha)") button.alpha = 0.0

## How to fetch data with React Hooks

DevFeed: [How to fetch data with React Hooks](<https://devfeed.tech/articles/how-to-fetch-data-with-react-hooks-18964.md>)

Original publisher: [Read original article](<https://www.robinwieruch.de/react-hooks-fetch-data/>)

Author: Robin Wieruch

Published: 2024-10-21T11:50:46Z

Content type: tutorial

Language: en

Sources: [Robin Wieruch](<https://devfeed.tech/sources/robin-wieruch.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [data](<https://devfeed.tech/topics/data.md>), [client](<https://devfeed.tech/topics/client.md>), [axios](<https://devfeed.tech/topics/axios.md>), [API](<https://devfeed.tech/topics/api.md>), [Promise](<https://devfeed.tech/topics/promise.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [async](<https://devfeed.tech/tags/async.md>), [await](<https://devfeed.tech/tags/await.md>), [axios](<https://devfeed.tech/tags/axios.md>), [beginners](<https://devfeed.tech/tags/beginners.md>), [browser](<https://devfeed.tech/tags/browser.md>), [command-line](<https://devfeed.tech/tags/command-line.md>), [component](<https://devfeed.tech/tags/component.md>), [effect](<https://devfeed.tech/tags/effect.md>), [fetch](<https://devfeed.tech/tags/fetch.md>), [fundamentals](<https://devfeed.tech/tags/fundamentals.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [learn](<https://devfeed.tech/tags/learn.md>), [libraries](<https://devfeed.tech/tags/libraries.md>), [react](<https://devfeed.tech/tags/react.md>), [react-fetch-data-hooks](<https://devfeed.tech/tags/react-fetch-data-hooks.md>), [react-hooks](<https://devfeed.tech/tags/react-hooks.md>), [state](<https://devfeed.tech/tags/state.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>)

### AI overview

A tutorial on fetching data in client-side React with built-in React Hooks. It explains state and effect management, builds a reusable custom data-fetching hook using the Hacker News API, and shows how to use axios or the browser's native fetch API, including handling asynchronous effects and cleanup functions.

### Source excerpt

Learn the fundamentals about data fetching in client-side React with React Hooks ...

## Building applications with Kotlin and Arrow.kt in style

DevFeed: [Building applications with Kotlin and Arrow.kt in style](<https://devfeed.tech/articles/building-applications-with-kotlin-and-arrow-kt-in-style-25510.md>)

Original publisher: [Read original article](<http://nomisrev.github.io/building-applications-with-kotlin-and-arrow.kt-in-style/>)

Author: Simon Vergauwen

Published: 2022-05-31T00:00:00Z

Content type: tutorial

Language: en

Sources: [nomisRev](<https://devfeed.tech/sources/nomisrev.md>)

Topics: [Kotlin](<https://devfeed.tech/topics/kotlin.md>), [Ktor](<https://devfeed.tech/topics/ktor.md>), [Functional programming](<https://devfeed.tech/topics/functional-programming.md>), [Microservices](<https://devfeed.tech/topics/microservices.md>), [Architecture & Design](<https://devfeed.tech/topics/architecture-design.md>)

Tags: [arrow](<https://devfeed.tech/tags/arrow.md>), [continuation](<https://devfeed.tech/tags/continuation.md>), [database](<https://devfeed.tech/tags/database.md>), [effect](<https://devfeed.tech/tags/effect.md>), [either](<https://devfeed.tech/tags/either.md>), [functional-programming](<https://devfeed.tech/tags/functional-programming.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [ktor](<https://devfeed.tech/tags/ktor.md>), [microservices](<https://devfeed.tech/tags/microservices.md>), [suspend](<https://devfeed.tech/tags/suspend.md>), [webinar](<https://devfeed.tech/tags/webinar.md>)

### AI overview

A webinar with Anton Arhipov demonstrates an end-to-end functional microservices workflow using Kotlin, Ktor, and Arrow, including request handling, database interaction, and response generation.

### Source excerpt

Webinar with Anton Arhipov on functional microservices with Ktor and Arrow.

## Exploring Kotlin's Context Receivers

DevFeed: [Exploring Kotlin's Context Receivers](<https://devfeed.tech/articles/exploring-kotlin-s-context-receivers-25511.md>)

Original publisher: [Read original article](<http://nomisrev.github.io/context-receivers/>)

Author: Simon Vergauwen

Published: 2022-02-17T00:00:00Z

Content type: article

Language: en

Sources: [nomisRev](<https://devfeed.tech/sources/nomisrev.md>)

Topics: [Kotlin](<https://devfeed.tech/topics/kotlin.md>), [ide](<https://devfeed.tech/topics/ide.md>), [context](<https://devfeed.tech/topics/context.md>)

Tags: [compiler](<https://devfeed.tech/tags/compiler.md>), [dsl](<https://devfeed.tech/tags/dsl.md>), [effect](<https://devfeed.tech/tags/effect.md>), [extension-function](<https://devfeed.tech/tags/extension-function.md>), [fp](<https://devfeed.tech/tags/fp.md>), [function](<https://devfeed.tech/tags/function.md>), [ide](<https://devfeed.tech/tags/ide.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [scope-functions](<https://devfeed.tech/tags/scope-functions.md>), [suspend](<https://devfeed.tech/tags/suspend.md>)

### AI overview

A tutorial on Kotlin Context Receivers, introduced as a preview in Kotlin 1.6.20-M1. It explains how additional receivers work, how the compiler handles them, and how they can support scope-based programming patterns such as effect handlers and logging contexts.

### Source excerpt

Last week a long awaited feature was released as a preview in Kotlin 1.6.20-M1. In this blogpost we're going to explore what Context Receivers are, and some benefits and patterns they'll enable. To try it out in your IDE, follow this guide

## Functional programming in Kotlin with Arrow.kt

DevFeed: [Functional programming in Kotlin with Arrow.kt](<https://devfeed.tech/articles/functional-programming-in-kotlin-with-arrow-kt-25514.md>)

Original publisher: [Read original article](<http://nomisrev.github.io/functional-programming-in-kotlin-with-arrow-kt/>)

Author: Simon Vergauwen

Published: 2021-12-05T00:00:00Z

Content type: article

Language: en

Sources: [nomisRev](<https://devfeed.tech/sources/nomisrev.md>)

Topics: [Kotlin](<https://devfeed.tech/topics/kotlin.md>), [Functional programming](<https://devfeed.tech/topics/functional-programming.md>), [Ktor](<https://devfeed.tech/topics/ktor.md>), [Microservice](<https://devfeed.tech/topics/microservice.md>), [Programming](<https://devfeed.tech/topics/programming.md>)

Tags: [circuit](<https://devfeed.tech/tags/circuit.md>), [effect](<https://devfeed.tech/tags/effect.md>), [either](<https://devfeed.tech/tags/either.md>), [functional-programming](<https://devfeed.tech/tags/functional-programming.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [ktor](<https://devfeed.tech/tags/ktor.md>), [microservices](<https://devfeed.tech/tags/microservices.md>), [patterns](<https://devfeed.tech/tags/patterns.md>), [programming](<https://devfeed.tech/tags/programming.md>), [suspend](<https://devfeed.tech/tags/suspend.md>), [validation](<https://devfeed.tech/tags/validation.md>), [webinar](<https://devfeed.tech/tags/webinar.md>)

### AI overview

A webinar discusses functional microservices with Ktor and Arrow in Kotlin, including retries with circuit breakers and schedulers, validation, optics, and analysis.

### Source excerpt

Webinar with Anton Arhipov & Alejandro Serrano about functional microservices with Ktor and Arrow.

## Continuation\<R, A\> in Kotlin

DevFeed: [Continuation\<R, A\> in Kotlin](<https://devfeed.tech/articles/continuation-r-a-in-kotlin-25512.md>)

Original publisher: [Read original article](<http://nomisrev.github.io/continuation-monad-in-kotlin/>)

Author: Simon Vergauwen

Published: 2021-11-28T00:00:00Z

Content type: tutorial

Language: en

Sources: [nomisRev](<https://devfeed.tech/sources/nomisrev.md>)

Topics: [Kotlin](<https://devfeed.tech/topics/kotlin.md>), [Coroutines](<https://devfeed.tech/topics/coroutines.md>), [Functional programming](<https://devfeed.tech/topics/functional-programming.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [continuation](<https://devfeed.tech/tags/continuation.md>), [coroutines](<https://devfeed.tech/tags/coroutines.md>), [effect](<https://devfeed.tech/tags/effect.md>), [either](<https://devfeed.tech/tags/either.md>), [exception](<https://devfeed.tech/tags/exception.md>), [functional-programming](<https://devfeed.tech/tags/functional-programming.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [kotlin-standard-library](<https://devfeed.tech/tags/kotlin-standard-library.md>), [monad](<https://devfeed.tech/tags/monad.md>), [suspend-function](<https://devfeed.tech/tags/suspend-function.md>), [syntax](<https://devfeed.tech/tags/syntax.md>)

### AI overview

A Kotlin tutorial introduces Continuation Passing Style and typed computations that can represent either a successful result or a typed failure. It develops an Effect type implemented as a suspend function and demonstrates a DSL for validation and file-reading examples.

### Source excerpt

Coroutines is one of the most liked features in Kotlin. Most people are familiar with the KotlinX Coroutines implementation, and many are also familiar with suspendCoroutine from the Kotlin Standard Library and then have also come across Continuation.

## Diagonal Badging

DevFeed: [Diagonal Badging](<https://devfeed.tech/articles/diagonal-badging-19287.md>)

Original publisher: [Read original article](<https://www.codenameone.com/blog/diagonal-badging/>)

Author: Shai Almog

Published: 2020-07-09T00:00:00Z

Content type: tutorial

Language: en

Sources: [CodeName One](<https://devfeed.tech/sources/codename-one.md>)

Topics: [Code](<https://devfeed.tech/topics/code.md>), [Website](<https://devfeed.tech/topics/website.md>), [Stack Overflow](<https://devfeed.tech/topics/stackoverflow.md>)

Tags: [arrow](<https://devfeed.tech/tags/arrow.md>), [blog-post](<https://devfeed.tech/tags/blog-post.md>), [code](<https://devfeed.tech/tags/code.md>), [component](<https://devfeed.tech/tags/component.md>), [edge](<https://devfeed.tech/tags/edge.md>), [effect](<https://devfeed.tech/tags/effect.md>)

### AI overview

A tutorial explains how to implement a diagonal badge in Codename One and corrects earlier drawing behavior that caused the banner to be cropped into an arrow shape.

### Source excerpt

Recently I got a question on stackoverflow about doing a diagonal badge that's actually quite similar to the one on our website. This isn't hard to do in Codename One but it requires a bit of tinkering so here's how you would implement that. As a matter of fact the original code I provided in the answer had a bit of a misbehavior which I'm fixing for this blog post so everything will look correct:

## CSS only elastic hover effect

DevFeed: [CSS only elastic hover effect](<https://devfeed.tech/articles/css-only-elastic-hover-effect-37266.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/elastic-hover-effect/>)

Author: Stanko

Published: 2018-03-19T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [how to create smooth CSS transitions](<https://devfeed.tech/topics/how-to-create-smooth-css-transitions.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [custom](<https://devfeed.tech/tags/custom.md>), [effect](<https://devfeed.tech/tags/effect.md>)

### AI overview

A tutorial explaining how to create an elastic hover effect for buttons using CSS. It uses ellipse pseudo-elements that scale on hover, slight button zooming, and custom elastic Bézier easing; a wireframe version is also included.

### Source excerpt

Some CSS fun. Lately I've stumbled upon couple of websites with elastic hover effect on buttons. Each one was using SVG morphing, which is fine, but I was wondering how hard would it be to implement it in CSS. It ended up up being pretty easy. I created four pseudo elementsOnly two pseudo elements (::before and ::after) can be created per element, therefore each button has one additional div inside it.. Each of these is ellipse, running along one edge of the button. By default these are scaled to zero by relevant axis. On hover, they scale back to their full size. For effect, whole button zoom in a little bit. Combine all of that with custom elastic bezier easing, and it looks quite convincing. Wireframe version is included as well, to make it easier to see how it works.

## Kolmo: A Schema and Runtime Toolkit for Software Configuration

DevFeed: [Kolmo: A Schema and Runtime Toolkit for Software Configuration](<https://devfeed.tech/articles/kolmo-36464.md>)

Original publisher: [Read original article](<https://berthub.eu/articles/posts/kolmo/>)

Published: 2017-10-24T08:24:57Z

Content type: article

Language: en

Sources: [Bert Hubert's writings](<https://devfeed.tech/sources/bert-hubert-s-writings.md>)

Topics: [configuration](<https://devfeed.tech/topics/configuration.md>), [Parsing](<https://devfeed.tech/topics/parsing.md>), [Documentation](<https://devfeed.tech/topics/documentation.md>), [Software](<https://devfeed.tech/topics/software.md>), [The Lounge](<https://devfeed.tech/topics/thelounge.md>)

Tags: [configuration](<https://devfeed.tech/tags/configuration.md>), [documentation](<https://devfeed.tech/tags/documentation.md>), [effect](<https://devfeed.tech/tags/effect.md>), [parsing](<https://devfeed.tech/tags/parsing.md>), [programming](<https://devfeed.tech/tags/programming.md>), [webserver](<https://devfeed.tech/tags/webserver.md>)

### AI overview

This article explains Kolmo, a toolkit for defining, documenting, parsing, validating, and manipulating software configuration. It describes schema features such as constraints, units, metadata, and types, along with runtime configuration access, web-based manipulation, rollback, and configuration dumps.

### Source excerpt

Welcome to Kolmo There are three avenues to learn about Kolmo (GitHub). There are two Youtube videos, one from the most excellent NLNOG 2017, the other from the equally excellent UKNOF 38. These videos explain a lot of the the history and the 'why' behind Kolmo. There is also the kolmo.org website, which is 'self-hosted' by the ws Kolmo-powered webserver. Finally, there is this post, in which I focus on what Kolmo actually does, without spending much time on the 'why' or the history.

## Using SVG feColorMatrix for per-channel image manipulation

DevFeed: [Using SVG feColorMatrix for per-channel image manipulation](<https://devfeed.tech/articles/finessing-fecolormatrix-28795.md>)

Original publisher: [Read original article](<https://una.im/fecolormatrix/>)

Published: 2016-02-11T00:00:00Z

Content type: article

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [SVG](<https://devfeed.tech/topics/svg.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [effect](<https://devfeed.tech/tags/effect.md>), [filter](<https://devfeed.tech/tags/filter.md>), [image](<https://devfeed.tech/tags/image.md>), [svg](<https://devfeed.tech/tags/svg.md>)

### AI overview

This article explains how SVG feColorMatrix can provide detailed pixel-value manipulation and individual color-channel control beyond standard CSS filters.

### Source excerpt

CSS Filters are awesome, but you can't do individual channel manipulation with them. Enter: feColorMatrix, SVG filter effect method that allows for really in-depth pixel value manipulation for even better image filters.

## CSS Image Effects #4: Bokeh Textures

DevFeed: [CSS Image Effects #4: Bokeh Textures](<https://devfeed.tech/articles/css-image-effects-4-bokeh-textures-28776.md>)

Original publisher: [Read original article](<https://una.im/bokeh/>)

Published: 2015-10-18T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [image effects](<https://devfeed.tech/topics/image-effects.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [effect](<https://devfeed.tech/tags/effect.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [image-effects](<https://devfeed.tech/tags/image-effects.md>), [patterns](<https://devfeed.tech/tags/patterns.md>), [photography](<https://devfeed.tech/tags/photography.md>)

### AI overview

This tutorial explains how to recreate the visual illusion of bokeh photography with CSS. It covers layering image textures with blend modes, using gradients and box shadows to form blurred circles, positioning those circles, and combining them into patterns that can be randomized.

### Source excerpt

Bokeh textures are very popular in photography. Let's take a look at how to create our own.

## CSS Image Effects #3: Vignettes 3 Ways

DevFeed: [CSS Image Effects #3: Vignettes 3 Ways](<https://devfeed.tech/articles/css-image-effects-3-vignettes-3-ways-28851.md>)

Original publisher: [Read original article](<https://una.im/vignettes/>)

Published: 2015-10-09T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [image effects](<https://devfeed.tech/topics/image-effects.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [effect](<https://devfeed.tech/tags/effect.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [image-effects](<https://devfeed.tech/tags/image-effects.md>)

### AI overview

A tutorial explaining three CSS approaches for adding vignette effects to images: inset box shadows, radial gradients, and layered elements or pseudo-elements. It notes browser support and visual limitations of the methods.

### Source excerpt

This week we'll take a look at one of the most popular photo manipulations: adding a vignette to draw attention to the center of an image.

## Smooth image loading by upscaling

DevFeed: [Smooth image loading by upscaling](<https://devfeed.tech/articles/smooth-image-loading-by-upscaling-2141.md>)

Original publisher: [Read original article](<https://developers.soundcloud.com/blog//smooth-image-loading-by-upscaling>)

Published: 2014-02-20T00:00:00Z

Content type: article

Language: en

Sources: [SoundCloud Backstage Blog](<https://devfeed.tech/sources/soundcloud-backstage-blog.md>)

Topics: [Caching](<https://devfeed.tech/topics/caching.md>), [Single-page application (SPA)](<https://devfeed.tech/topics/spa.md>), [Image](<https://devfeed.tech/topics/image.md>), [browser](<https://devfeed.tech/topics/browser.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [CSS](<https://devfeed.tech/topics/css.md>), [HTML](<https://devfeed.tech/topics/html.md>), [HTTP](<https://devfeed.tech/topics/http.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [cache](<https://devfeed.tech/tags/cache.md>), [code](<https://devfeed.tech/tags/code.md>), [css](<https://devfeed.tech/tags/css.md>), [display](<https://devfeed.tech/tags/display.md>), [effect](<https://devfeed.tech/tags/effect.md>), [fetch](<https://devfeed.tech/tags/fetch.md>), [http](<https://devfeed.tech/tags/http.md>), [identifier](<https://devfeed.tech/tags/identifier.md>), [image](<https://devfeed.tech/tags/image.md>), [index](<https://devfeed.tech/tags/index.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [map](<https://devfeed.tech/tags/map.md>), [memory](<https://devfeed.tech/tags/memory.md>), [object](<https://devfeed.tech/tags/object.md>), [request](<https://devfeed.tech/tags/request.md>)

### AI overview

The article presents a smooth image-loading technique for a single-page application. It displays a previously cached, smaller image enlarged to the target size, then fades in the larger image after it loads. A memory-efficient bitmask tracks which image sizes are already cached, avoiding unnecessary requests for small images.

### Source excerpt

The site is a single-page application that displays a multitude of users' images. At SoundCloud, we use a technique to make the loading of...