# render

Rendering is the computational process of generating a two-dimensional image from a three-dimensional scene description.

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

## Weekly recommendations for reading, watching, and trying

DevFeed: [Weekly recommendations for reading, watching, and trying](<https://devfeed.tech/articles/things-1-25613.md>)

Original publisher: [Read original article](<https://www.romainguy.dev/posts/2026/things-1/>)

Author: Romain Guy

Published: 2026-08-06T00:00:00Z

Content type: opinion

Language: en

Sources: [Posts on Romain Guy](<https://devfeed.tech/sources/posts-on-romain-guy.md>)

Topics: [C++](<https://devfeed.tech/topics/c-plus-plus.md>), [Data structures](<https://devfeed.tech/topics/data-structures.md>), [benchmarking](<https://devfeed.tech/topics/benchmarking.md>), [GPU](<https://devfeed.tech/topics/gpu.md>), [render](<https://devfeed.tech/topics/render.md>), [Open Source](<https://devfeed.tech/topics/open-source.md>), [Cloud](<https://devfeed.tech/topics/cloud.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [articles](<https://devfeed.tech/tags/articles.md>), [benchmarking](<https://devfeed.tech/tags/benchmarking.md>), [books](<https://devfeed.tech/tags/books.md>), [c-plus-plus](<https://devfeed.tech/tags/c-plus-plus.md>), [cloud](<https://devfeed.tech/tags/cloud.md>), [developer](<https://devfeed.tech/tags/developer.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [links](<https://devfeed.tech/tags/links.md>), [open-source](<https://devfeed.tech/tags/open-source.md>), [render](<https://devfeed.tech/tags/render.md>), [videos](<https://devfeed.tech/tags/videos.md>)

### AI overview

A weekly list of recommendations covering C++26 std::hive internals and performance, rendering and GPU techniques, animation, mountaineering, films, an open-source cloud computer, and parallel Delaunay triangulation.

### Source excerpt

Here is a list of tings I read/watched/played/etc. this week that you might find interesting or enjoyable: Things to read Link to heading A Deep Dive into C++26 std::hive: The Ultimate Container for Active Data -- Some details about the internals of C++ 26's new data structure. How fast is C++26's std::hive? -- Pretty self-explanatory and useful numbers to keep in mind. A Spectral BSSRDF for Shading Human Skin -- A spectral shading model that can be used to render different skin tones. On the Accuracy of Surface Scattering Theories -- Another reason why our rendering models are not quite good enough. A Texture Lookup Approach to Bézier Curve Evaluation on the GPU -- A clever use of GPU textures units to render Bézier curves efficiently. Haikyu!! -- I've been re-reading this manga. The anime is also worth it, for the animation itself. Annapurna: First Conquest of an 8000-meter Peak -- Maurice Herzog's account of the first successful ascent of Annapurna. Read the French original if you can. And you might want to read True Summit afterwards. Things to watch Link to heading Benchmarking - It's About Time -- Benchmarking is hard, but Matt Godbolt makes it fun and interesting. Nirvanna the Band the Show the Movie -- I watched it without knowing what it was really about. You should do the same, it takes an unexpected turn. Things I want to try Link to heading Wasmo -- An Open Source "cloud computer". delaunay32 -- Fast, parallel 2D Delaunay triangulation using exact integer predicates.

## The Most Expensive Milliseconds Are Unmeasured

DevFeed: [The Most Expensive Milliseconds Are Unmeasured](<https://devfeed.tech/articles/the-most-expensive-milliseconds-are-unmeasured-19739.md>)

Original publisher: [Read original article](<https://medium.com/expedia-group-tech/the-most-expensive-milliseconds-are-unmeasured-d6cfaaca881d?source=rss----38998a53046f---4>)

Author: Divya Gupta Arora

Published: 2026-06-03T17:11:58Z

Content type: article

Language: en

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

Topics: [Mobile](<https://devfeed.tech/topics/mobile.md>), [render](<https://devfeed.tech/topics/render.md>), [ui](<https://devfeed.tech/topics/ui.md>)

Tags: [case-study](<https://devfeed.tech/tags/case-study.md>), [devops](<https://devfeed.tech/tags/devops.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [login](<https://devfeed.tech/tags/login.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [mobile-apps](<https://devfeed.tech/tags/mobile-apps.md>), [mobile-performance](<https://devfeed.tech/tags/mobile-performance.md>), [observability](<https://devfeed.tech/tags/observability.md>), [performance](<https://devfeed.tech/tags/performance.md>), [release](<https://devfeed.tech/tags/release.md>), [software-engineering](<https://devfeed.tech/tags/software-engineering.md>), [technology-investments](<https://devfeed.tech/tags/technology-investments.md>), [time-to-interactive](<https://devfeed.tech/tags/time-to-interactive.md>), [ui](<https://devfeed.tech/tags/ui.md>), [visibility](<https://devfeed.tech/tags/visibility.md>)

### AI overview

This Expedia Group engineering case study describes extending Native Time to Interactive across mobile login screens. The metric was used to evaluate technology investments, compare platform behavior, and detect performance regressions that existing system-health signals did not reveal.

### Source excerpt

Expedia Group Technology -- EngineeringHow a screen-level performance metric reshaped platform decisions, engineering ownership, and release disciplinePhoto by Pietro De Grandi on Unsplash For the last few years, my responsibility has been straightforward to state but hard to execute -- owning the traveler login experience across mobile platforms. Not just whether a feature works, but whether it feels responsive, predictable, and trustworthy in the moments that matter most. During login, those moments are unforgiving: if a login screen hesitates travelers don't interpret it as 'a slow render', they interpret it as risk. And when the majority of travelers interact through our mobile apps, performance stops being a technical concern and becomes a product promise. This post is a case study of how, within Expedia Group™'s login domain, we extended Native Time to Interactive (NTTI) across login screens -- moving performance from a late-stage check to a first-class signal we can use to validate technology investments, compare platform behavior, and prevent silent regressions as we ship. The Problem: Mobile reliability rarely fails loudly Mobile performance rarely breaks with a crash. It usually degrades quietly, a button takes a beat longer to respond a screen looks ready, but taps don't register the UI stutters just enough to feel "off" Those are the expensive milliseconds -- because they erode trust without triggering obvious alarms. In our login flows, we were shipping consistently, evolving a major part of our stack, and supporting increasing product complexity. Yet we didn't have a consistent way to answer the user's real question -- "When can I actually use this screen?" Why our existing signals failed We were not blind. We tracked many useful things, crashes and ANRs backend latency and service SLIs some component-level timing signals limited Time to Interactive tracking on onboarding and initial login But we had a gap -- we had visibility into system health, not screen

## From FileUploadWorkflow to creative OS: How Layer scaled on Temporal

DevFeed: [From FileUploadWorkflow to creative OS: How Layer scaled on Temporal](<https://devfeed.tech/articles/from-fileuploadworkflow-to-creative-os-how-layer-scaled-on-temporal-35833.md>)

Original publisher: [Read original article](<https://temporal.io/blog/fileuploadworkflow-creative-os-layer-scaled-temporal>)

Author: Alex Engel

Published: 2026-04-28T00:00:00Z

Content type: article

Language: en

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

Topics: [Artificial Intelligence](<https://devfeed.tech/topics/ai.md>), [async](<https://devfeed.tech/topics/async.md>), [Fine-tuning](<https://devfeed.tech/topics/fine-tuning.md>), [lora](<https://devfeed.tech/topics/lora.md>), [Inference](<https://devfeed.tech/topics/inference.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [ai](<https://devfeed.tech/tags/ai.md>), [article](<https://devfeed.tech/tags/article.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [community](<https://devfeed.tech/tags/community.md>), [developer](<https://devfeed.tech/tags/developer.md>), [fine-tuning](<https://devfeed.tech/tags/fine-tuning.md>), [inference](<https://devfeed.tech/tags/inference.md>), [lora](<https://devfeed.tech/tags/lora.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [node](<https://devfeed.tech/tags/node.md>), [pipeline](<https://devfeed.tech/tags/pipeline.md>), [production](<https://devfeed.tech/tags/production.md>), [render](<https://devfeed.tech/tags/render.md>)

### AI overview

Layer describes how it expanded from a small set of Temporal workflows into about 50 workflow types running in production. The article covers the product and architecture changes behind its creative operating system, including image generation, LoRA fine-tuning, multimodal pipelines, billing synchronization, and large-scale parallel asset generation.

### Source excerpt

How Layer went from a handful of Temporal Workflows to 50 in production. The architecture, the lessons, and what broke along the way.

## How to create custom Dials

DevFeed: [How to create custom Dials](<https://devfeed.tech/articles/how-to-create-custom-dials-25785.md>)

Original publisher: [Read original article](<https://www.sinasamaki.com/how-to-create-custom-dials/>)

Author: sinasamaki

Published: 2026-03-14T20:43:05Z

Content type: tutorial

Language: en

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

Topics: [Library](<https://devfeed.tech/topics/library.md>), [Canvas](<https://devfeed.tech/topics/canvas.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [animation](<https://devfeed.tech/tags/animation.md>), [article](<https://devfeed.tech/tags/article.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [library](<https://devfeed.tech/tags/library.md>), [render](<https://devfeed.tech/tags/render.md>)

### AI overview

A tutorial on customizing ChromaDial, including visual and invisible thumbs, drag and hover interactions, animated feedback, full-size touch areas, and custom track drawing with Canvas.

### Source excerpt

ChromaDial is super customizable and delightful

## Bridging two JSX runtimes: How we solved Astro's React children problem

DevFeed: [Bridging two JSX runtimes: How we solved Astro's React children problem](<https://devfeed.tech/articles/bridging-two-jsx-runtimes-how-we-solved-astro-s-react-children-problem-30982.md>)

Original publisher: [Read original article](<https://www.mintlify.com/blog/astro-react-children>)

Author: Kyle Finken

Published: 2026-03-10T00:00:00Z

Content type: article

Language: en

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

Topics: [Astro](<https://devfeed.tech/topics/astro.md>), [React](<https://devfeed.tech/topics/react.md>), [MDX](<https://devfeed.tech/topics/mdx.md>), [React Component](<https://devfeed.tech/topics/react-component.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [astro](<https://devfeed.tech/tags/astro.md>), [bridging](<https://devfeed.tech/tags/bridging.md>), [component](<https://devfeed.tech/tags/component.md>), [components](<https://devfeed.tech/tags/components.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [mdx](<https://devfeed.tech/tags/mdx.md>), [react](<https://devfeed.tech/tags/react.md>), [render](<https://devfeed.tech/tags/render.md>), [solved](<https://devfeed.tech/tags/solved.md>)

### AI overview

Mintlify describes how its Astro integration addressed a JSX runtime mismatch that caused compound React components to lose their children during hydration in Astro's MDX pipeline.

### Source excerpt

How Mintlify solved a fundamental JSX runtime mismatch to make compound React components work inside Astro's MDX pipeline.

## Brushed Metal UI in Jetpack Compose

DevFeed: [Brushed Metal UI in Jetpack Compose](<https://devfeed.tech/articles/brushed-metal-ui-in-jetpack-compose-25768.md>)

Original publisher: [Read original article](<https://www.sinasamaki.com/brushed-metal-ui-in-jetpack-compose/>)

Author: sinasamaki

Published: 2025-02-14T11:52:40Z

Content type: tutorial

Language: en

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

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

Tags: [article](<https://devfeed.tech/tags/article.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [compose](<https://devfeed.tech/tags/compose.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [render](<https://devfeed.tech/tags/render.md>), [rotation](<https://devfeed.tech/tags/rotation.md>), [ui](<https://devfeed.tech/tags/ui.md>)

### AI overview

A tutorial on recreating and animating a brushed-metal skeuomorphic UI effect in Jetpack Compose. It explains how to layer radial gradients for circular ridges and sweep gradients for rotating highlights, with colors derived from a base color.

### Source excerpt

How to create this skeuomorphic metallic effect using gradients

## Notes on The Little Learner: Parameters, Tensors, and Mathematical Operations

DevFeed: [Notes on The Little Learner: Parameters, Tensors, and Mathematical Operations](<https://devfeed.tech/articles/little-learnings-28092.md>)

Original publisher: [Read original article](<https://jlongster.com/little-learnings>)

Author: James Long

Published: 2024-09-02T12:00:00Z

Content type: tutorial

Language: en

Sources: [James Long](<https://devfeed.tech/sources/james-long.md>)

Topics: [dataset](<https://devfeed.tech/topics/dataset.md>), [math](<https://devfeed.tech/topics/math.md>), [implementation](<https://devfeed.tech/topics/implementation.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [dataset](<https://devfeed.tech/tags/dataset.md>), [graph](<https://devfeed.tech/tags/graph.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [learnings](<https://devfeed.tech/tags/learnings.md>), [math](<https://devfeed.tech/tags/math.md>), [render](<https://devfeed.tech/tags/render.md>)

### AI overview

Notes working through The Little Learner explain function parameters, datasets, scalars, tensors and tensor rank, then implement extended mathematical operators such as addition and sum.

### Source excerpt

(note: skipping interactive content block) ^f3bf01 ^aeae51 A collection of notes as I work through The Little Learner. (note: skipping interactive content block) ^0c0c15 Chapter 1 1.5: graph a line with $w$ and $b$ parameters const f = (w, b) => x => w * x + b; render(graph(f(100, 10))); render(graph(f(10, 0))); ^2b4784 1.14: reverse the order to make $x$ an argument and $w$ and $p$ parameters // A version where w and b become parameters _after_ `x` const f = x => (w, b) => w * x + b; return graph(x => f(x)(2, 20)); ^14f8ec x is the argument of the line, while w and b which come after are parameters 1.19 plot the xs, ys dataset const xs = [2, 1, 4, 3]; const ys = [1.8, 1.2, 4.2, 3.3]; return graph({ marks: Plot.dot(zip(xs, ys), { x: n => n[0], y: n => n[1], fill: "black" }), domainX: [0, 5], domainY: [0, 5] }); ^dc0f98 Rule of parameters: every parameter is a number Given x and y, or arguments to a function, we can walk backwards and figure out the parameters and then use that to predict other y values for a given x θ is the parameter set (lowercase theta) Given θ, there parameters if it referred to as θ$_1$, θ$_2$, etc const f = θ => (θ_1, θ_2) => θ_1 * x + θ_2 ^7052b4 Chapter 2 "Scalars" are real numbers A "tensor" is a vector of scalars: [2.0, 1.0, 4.3, 4.2] The book uses tensor$^1$ with a superscript Tensors can be nested, and the superscript indicates the level of "nested" "elements" are the individual values in the tensor I think tensor$^1$ (with the 1 superscript) specifically means a vector of scalars, and higher tensors have tensors as elements All tensors$^m$ must have the same number of elements A scalar is atensor$^0$ 9 is tensor$^0$ [9, 9, 9] is tensor$^1$ [[9, 9, 9] [9, 9, 9]] is tensor$^2$ 2.25: define a function that finds the rank of a tensor window.scalarp = v => typeof v === "number"; window.rank = t => (scalarp(t) ? 0 : 1 + rank(t[0])); return log(output => { output(rank(4), 0); output(rank([4, 1]), 1); output(rank([[4, 1], [3, 6]]), 2); output(r

## Intro to the new site

DevFeed: [Intro to the new site](<https://devfeed.tech/articles/intro-to-the-new-site-28091.md>)

Original publisher: [Read original article](<https://jlongster.com/intro-new-site>)

Author: James Long

Published: 2024-07-09T12:00:00Z

Content type: article

Language: en

Sources: [James Long](<https://devfeed.tech/sources/james-long.md>)

Topics: [Back end](<https://devfeed.tech/topics/backend.md>), [Obsidian](<https://devfeed.tech/topics/obsidian-md.md>), [User experience (UX)](<https://devfeed.tech/topics/ux.md>), [Syntax Highlighting](<https://devfeed.tech/topics/syntax-highlighting.md>), [render](<https://devfeed.tech/topics/render.md>), [math](<https://devfeed.tech/topics/math.md>)

Tags: [backend](<https://devfeed.tech/tags/backend.md>), [math](<https://devfeed.tech/tags/math.md>), [obsidian](<https://devfeed.tech/tags/obsidian.md>), [render](<https://devfeed.tech/tags/render.md>), [syntax-highlighting](<https://devfeed.tech/tags/syntax-highlighting.md>), [ux](<https://devfeed.tech/tags/ux.md>), [workflow](<https://devfeed.tech/tags/workflow.md>), [writing](<https://devfeed.tech/tags/writing.md>)

### AI overview

The author introduces a new site backend and a workflow centered on Obsidian for fast writing and publishing. The site supports interactive JavaScript code blocks, syntax highlighting, DOM output, rendering functions, and KaTeX mathematics, motivated partly by the author's AI studies.

### Source excerpt

I just pushed a new backend for this site. I love having a quick direct connection to my site: being able to write content and publish it with a quick press of a key. Previously, I was using logseq for this but while writing my latest post I got frustrated with how slow it is. I use this site not just for writing content, but also quick sketches of interactive code. I can easily make a code block interactive by tagging it to run inline in the page, making it easy to develop quick ideas. For this to work, publishing needs to be instant and the editing experience is vital. In logseq, it took 3-4 seconds to publish content (some of this is due to how I wired up the process) but worse is the editing experience in large posts with lots of code was very slow and frustrating. My new setup uses obsidian to write content which I've found extremely polished and fast. A big difference is logseq is an "outliner" and obsidian treats content as a simple file of text. I'll miss certain features of outliners but overall the UX improvement is very much worth it. New site allows code with syntax highlighting (just as before): function calc(x) { return x + 6 * 10000; } ^659b71 I can make code blocks easily run by adding the run tag to a codeblock. It looks like this: ```js run function calc(x) { return x + 5 * 10; } return calc(10); ``` ^4536cf If I want to show something from the code I can just return the value and it appears in the DOM: (note: skipping interactive content block) ^ef4d56 Alternatively I could use a render function within the code block to do the same thing: render(calc(10)). It's a little more verbose, but the benefit with this is I can render multiple things and at different places in the call stack. I also took the time to support math which is rendered with katex. For example $g(\\sqrt{a^2 + b^2})$ renders as this: $g(\sqrt{a^2 + b^2})$. This new workflow will be instrumental in my AI studies, which was the primary motivation for this rehaul. Watch this space: I

## Astro 4.11

DevFeed: [Astro 4.11](<https://devfeed.tech/articles/astro-4-11-3191.md>)

Original publisher: [Read original article](<https://astro.build/blog/astro-4110/>)

Author: Matthew Phillips

Published: 2024-06-20T00:00:00Z

Content type: release

Language: en

Sources: [The Astro Blog](<https://devfeed.tech/sources/the-astro-blog.md>)

Topics: [Astro](<https://devfeed.tech/topics/astro.md>), [releases](<https://devfeed.tech/topics/releases.md>), [Code](<https://devfeed.tech/topics/code.md>), [render](<https://devfeed.tech/topics/render.md>), [Release notes](<https://devfeed.tech/topics/release-notes.md>)

Tags: [astro](<https://devfeed.tech/tags/astro.md>), [bug-fixes](<https://devfeed.tech/tags/bug-fixes.md>), [cli](<https://devfeed.tech/tags/cli.md>), [code](<https://devfeed.tech/tags/code.md>), [improvements](<https://devfeed.tech/tags/improvements.md>), [release](<https://devfeed.tech/tags/release.md>), [release-notes](<https://devfeed.tech/tags/release-notes.md>), [render](<https://devfeed.tech/tags/render.md>), [transformers](<https://devfeed.tech/tags/transformers.md>)

### AI overview

Astro 4.11 introduces improvements to custom 500 error pages and adds Shiki transformer support to the Code component. The release also includes bug fixes and smaller improvements.

### Source excerpt

Astro 4.11 is out with custom 500 page improvements and Shiki transformers in the Code component.

## Apollo Client 3.8 introduces the @nonreactive directive and useFragment hook for more selective React rendering

DevFeed: [Apollo Client 3.8 introduces the @nonreactive directive and useFragment hook for more selective React rendering](<https://devfeed.tech/articles/don-t-overreact-introducing-apollo-client-s-new-nonreactive-directive-and-usefragment-hook-23405.md>)

Original publisher: [Read original article](<https://www.apollographql.com/blog/introducing-apollo-clients-nonreactive-directive-and-usefragment-hook>)

Author: Alessia Bellisario

Published: 2023-06-15T08:53:00Z

Content type: release

Language: en

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

Topics: [apollo-client](<https://devfeed.tech/topics/apollo-client.md>), [GraphQL](<https://devfeed.tech/topics/graphql.md>), [React](<https://devfeed.tech/topics/react.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [apollo-client](<https://devfeed.tech/tags/apollo-client.md>), [graphql](<https://devfeed.tech/tags/graphql.md>), [react](<https://devfeed.tech/tags/react.md>), [release](<https://devfeed.tech/tags/release.md>), [render](<https://devfeed.tech/tags/render.md>)

### AI overview

The article introduces Apollo Client 3.8 beta features for reducing unnecessary React re-renders: the @nonreactive directive and the useFragment hook. It explains how they can limit updates to affected components and improve rendering efficiency.

### Source excerpt

Efficient React apps are selective in their re-rendering, using a variety of techniques (such as ) to skip re-rendering unchanged components. With the beta release of Apollo Client 3.8, we're excited to spotlight a couple of new techniques to help you re-render exactly the components that you need to: - The directive: mark GraphQL query fields and fragments that shouldn't trigger a re-render if their cached value changes.

## A blog redesign and an exploratory Rust multiplayer game project

DevFeed: [A blog redesign and an exploratory Rust multiplayer game project](<https://devfeed.tech/articles/10-years-later-25814.md>)

Original publisher: [Read original article](<https://www.metabrew.com/article/2021-blog-update>)

Author: {"image"=\>"rj-headshot.jpg", "greetings"=\>nil}

Published: 2021-07-29T05:00:00Z

Content type: opinion

Language: en

Sources: [Richard Jones](<https://devfeed.tech/sources/richard-jones.md>)

Topics: [border-image](<https://devfeed.tech/topics/border-image.md>), [Media Queries](<https://devfeed.tech/topics/media-queries.md>), [Rust](<https://devfeed.tech/topics/rust.md>), [WebAssembly](<https://devfeed.tech/topics/web-assembly.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [WebRTC](<https://devfeed.tech/topics/webrtc.md>), [Bevy](<https://devfeed.tech/topics/bevy.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [bevy](<https://devfeed.tech/tags/bevy.md>), [css](<https://devfeed.tech/tags/css.md>), [life](<https://devfeed.tech/tags/life.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [mobile-web](<https://devfeed.tech/tags/mobile-web.md>), [render](<https://devfeed.tech/tags/render.md>), [rust](<https://devfeed.tech/tags/rust.md>), [wasm](<https://devfeed.tech/tags/wasm.md>), [webassembly](<https://devfeed.tech/tags/webassembly.md>), [webrtc](<https://devfeed.tech/tags/webrtc.md>)

### AI overview

The author describes updating the blog with responsive CSS and migrating comments to GitHub issue comments while experimenting with a browser-based multiplayer game in Rust, WebAssembly, WebRTC, and Bevy.

### Source excerpt

I have dragged my blog, kicking and screaming, into the era of media-queries and responsive CSS. So now it's readable on a variety of screen sizes. My first post was roughly the same year the iPhone 3G came out I think, and the mobile web wasn't really a big deal back then.

## Building a Pride Rainbow Easter Egg into the Over Android App 🏳🌈

DevFeed: [Building a Pride Rainbow Easter Egg into the Over Android App 🏳🌈](<https://devfeed.tech/articles/building-a-pride-rainbow-easter-egg-into-the-over-android-app-27882.md>)

Original publisher: [Read original article](<https://riggaroo.dev/building-a-pride-rainbow-easter-egg-into-the-over-android-app/>)

Author: Rebecca Franks

Published: 2021-06-13T09:39:08Z

Content type: tutorial

Language: en

Sources: [Rebecca Franks - @riggaroo](<https://devfeed.tech/sources/rebecca-franks-riggaroo.md>)

Topics: [OpenGL](<https://devfeed.tech/topics/opengl.md>), [Android](<https://devfeed.tech/topics/android.md>), [glsl](<https://devfeed.tech/topics/glsl.md>), [implementation](<https://devfeed.tech/topics/implementation.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [glsl](<https://devfeed.tech/tags/glsl.md>), [guide](<https://devfeed.tech/tags/guide.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [opengl](<https://devfeed.tech/tags/opengl.md>), [pride](<https://devfeed.tech/tags/pride.md>), [rainbow](<https://devfeed.tech/tags/rainbow.md>), [render](<https://devfeed.tech/tags/render.md>), [ui](<https://devfeed.tech/tags/ui.md>)

### AI overview

This tutorial explains how the Over Android app implements a Pride-themed Easter egg: text containing selected LGBTQ+ terms changes a text-layer outline into an animated rainbow. It focuses on rendering the gradient bounding box with OpenGL, Android SurfaceView, and GLSL shaders.

### Source excerpt

This post originally appeared here on the GoDaddy Engineering blog. The Over App is a playground for creating beautiful content for social media. As developers on the app, we are often inspired by the pictures and videos that our users make. To inspire our users a bit more, we decided to create a small easter [...] The post Building a Pride Rainbow Easter Egg into the Over Android App 🏳🌈 appeared first on Rebecca Franks - @riggaroo.

## Getting Started With Apollo Client in Next.js

DevFeed: [Getting Started With Apollo Client in Next.js](<https://devfeed.tech/articles/getting-started-with-apollo-client-in-next-js-23470.md>)

Original publisher: [Read original article](<https://www.apollographql.com/blog/next-js-getting-started>)

Author: Kurt Kemple

Published: 2021-03-09T14:52:25Z

Content type: tutorial

Language: en

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

Topics: [apollo-client](<https://devfeed.tech/topics/apollo-client.md>), [Next.js](<https://devfeed.tech/topics/next-js.md>), [data](<https://devfeed.tech/topics/data.md>), [Server-side rendering](<https://devfeed.tech/topics/server-side-rendering.md>), [API](<https://devfeed.tech/topics/api.md>), [React](<https://devfeed.tech/topics/react.md>), [render](<https://devfeed.tech/topics/render.md>), [Search engine optimization (SEO)](<https://devfeed.tech/topics/seo.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [apollo-client](<https://devfeed.tech/tags/apollo-client.md>), [browser](<https://devfeed.tech/tags/browser.md>), [fetch](<https://devfeed.tech/tags/fetch.md>), [getting-started](<https://devfeed.tech/tags/getting-started.md>), [next-js](<https://devfeed.tech/tags/next-js.md>), [react](<https://devfeed.tech/tags/react.md>), [render](<https://devfeed.tech/tags/render.md>), [seo](<https://devfeed.tech/tags/seo.md>), [server-side-rendering](<https://devfeed.tech/tags/server-side-rendering.md>)

### AI overview

A tutorial on configuring Apollo Client with Next.js. It compares static, server-side, and client-side data fetching and rendering, explains their tradeoffs for freshness, response latency, and SEO, and demonstrates setting up a Next.js app with Apollo Client and an API.

### Source excerpt

Wait, you want me to put my data where!? Figuring out how to configure Apollo Client with Next.js can be a bit confusing. This confusion stems from the fact that there are three ways to fetch and render data: static, server-side, and client-side. There are benefits and tradeoffs to each strategy, but I'm happy to report that Apollo Client is compatible with all three!

## Metaballs

DevFeed: [Metaballs](<https://devfeed.tech/articles/metaballs-37311.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/metaballs-generative-art/>)

Author: Stanko

Published: 2020-02-06T00:00:00Z

Content type: article

Language: en

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

Topics: [generative art](<https://devfeed.tech/topics/generative-art.md>), [creative coding](<https://devfeed.tech/topics/creative-coding.md>), [Graphics](<https://devfeed.tech/topics/graphics.md>), [coding](<https://devfeed.tech/topics/coding.md>), [Algorithm](<https://devfeed.tech/topics/algorithm.md>), [implementation](<https://devfeed.tech/topics/implementation.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [algorithm](<https://devfeed.tech/tags/algorithm.md>), [art](<https://devfeed.tech/tags/art.md>), [coding](<https://devfeed.tech/tags/coding.md>), [computer-graphics](<https://devfeed.tech/tags/computer-graphics.md>), [creative-coding](<https://devfeed.tech/tags/creative-coding.md>), [exploration](<https://devfeed.tech/tags/exploration.md>), [generative](<https://devfeed.tech/tags/generative.md>), [generative-art](<https://devfeed.tech/tags/generative-art.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [projects](<https://devfeed.tech/tags/projects.md>), [render](<https://devfeed.tech/tags/render.md>)

### AI overview

A project write-up about creating Metaballs, a generative art project that combines spheres into organic shapes, slices them, and renders their outlines as vector files. The author describes exploring metaballs, learning about marching cubes and marching squares, using an existing solution, and building tooling for immediate visual feedback.

### Source excerpt

I'm all about generative art these days. Today, I present you Metaballs, my latest creation. It is one of those projects that I visualized in my head and managed to pull it off exactly how I imagined it. Somehow I came up with an idea to generate spheres, smoothly merge them to get organic looking shapes, which then I would slice up and render the outlines.I ordered a pen plotter and that is the reason I'm focused on producing vector files. One of the final images looks like this (click on it to see more): Exploration # Not sure how I started thinking about slicing these blobby objects, but I had a clear vision of what I wanted to achieve. At this point I had no idea they are called metaballs. I asked on our company's #tech-creative-coding channel, if anyone is familiar with making something like this, and my colleagues pointed out the term metaballs and marching cubes algorithm. Definition # Wikipedia defines metaballs as: In computer graphics, metaballs are organic-looking n-dimensional isosurfaces, characterised by their ability to meld together when in close proximity to create single, contiguous objects. Which makes them perfect for what I had in mind - generating organic looking blobs. Implementation # The first try # Initially I wanted to implement it myself, but I didn't really know where to start. I had an idea to hack it by overlapping two spheres and calculate a curve between them. By rotating this curve, I would create a tube and merge everything together. It looks ok-ish for two spheres, but I wasn't completely satisfied. And it was impossible do it for more than two spheres. So I gave up early on this idea. Marching on # So I went back to the marching cubes algorithm. After some research I found a wonderful post, which very thoroughly explains implementation of marching squares.Marching squares are the same algorithm as marching cubes, but in 2D. Now I understood how algorithm works, but I gave up on implementing it myself. I was more interested in bei

## Fix for Chrome not rendering 1px borders

DevFeed: [Fix for Chrome not rendering 1px borders](<https://devfeed.tech/articles/fix-for-chrome-not-rendering-1px-borders-37269.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/fix-for-chrome-not-rendering-borders/>)

Author: Stanko

Published: 2018-07-16T00:00:00Z

Content type: tutorial

Language: en

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

Topics: [Chrome](<https://devfeed.tech/topics/chrome.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [render](<https://devfeed.tech/topics/render.md>), [screen](<https://devfeed.tech/topics/screen.md>)

Tags: [browsers](<https://devfeed.tech/tags/browsers.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [issue](<https://devfeed.tech/tags/issue.md>), [render](<https://devfeed.tech/tags/render.md>), [screen](<https://devfeed.tech/tags/screen.md>), [solve](<https://devfeed.tech/tags/solve.md>)

### AI overview

A short troubleshooting note about Chrome sometimes failing to render 1px borders at certain screen sizes. It suggests changing the border width from 1px to thin as a workaround, while noting that the author does not know why it works.

### Source excerpt

This happened to me couple of times - borders would just randomly disappear in Chrome. All other browsers render them normally, but they just vanish in Chrome, on some screen sizes. Resizing helps sometimes, but I never was able to catch real pattern for reproducing. If this ever happens to you, there is a (hacky) solution. Change border width from 1px to thin. border: 1px solid #000; /* change it to: */ border: thin solid #000; Although I don't like it, as it is a hacky workaround and I don't really understand why it works, it does solve the issue. It seems that I'm not the only one having this problem.

## Introducing React Apollo 2.1

DevFeed: [Introducing React Apollo 2.1](<https://devfeed.tech/articles/introducing-react-apollo-2-1-23419.md>)

Original publisher: [Read original article](<https://www.apollographql.com/blog/introducing-react-apollo-2-1-c837cc23d926>)

Author: Peggy Rayzis

Published: 2018-03-22T21:13:00Z

Content type: release

Language: en

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

Topics: [React](<https://devfeed.tech/topics/react.md>), [GraphQL](<https://devfeed.tech/topics/graphql.md>), [apollo-client](<https://devfeed.tech/topics/apollo-client.md>), [render](<https://devfeed.tech/topics/render.md>), [TypeScript](<https://devfeed.tech/topics/typescript.md>)

Tags: [announce](<https://devfeed.tech/tags/announce.md>), [announcement](<https://devfeed.tech/tags/announcement.md>), [api](<https://devfeed.tech/tags/api.md>), [apollo-client](<https://devfeed.tech/tags/apollo-client.md>), [graphql](<https://devfeed.tech/tags/graphql.md>), [react](<https://devfeed.tech/tags/react.md>), [render](<https://devfeed.tech/tags/render.md>), [typescript](<https://devfeed.tech/tags/typescript.md>)

### AI overview

React Apollo 2.1 introduces a render prop API, stronger TypeScript support, upgraded documentation, and new components for querying and mutating GraphQL data in React applications. The release is described as backwards compatible.

### Source excerpt

The wait is over! We're super excited to announce React Apollo 2.1, a huge step forward in improving how you develop React applications with GraphQL. It features a new render prop API and much stronger TypeScript support, along with upgraded docs. It's also 100% backwards compatible! From the very beginning, React Apollo was designed to make building React apps with Apollo Client a delightful and intuitive experience.

## Use Dynamic Components to render HTML for 3rd party libraries

DevFeed: [Use Dynamic Components to render HTML for 3rd party libraries](<https://devfeed.tech/articles/use-dynamic-components-to-render-html-for-3rd-party-libraries-21321.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2017/11/dynamic-angular-components-for-rendering-html/>)

Published: 2017-11-14T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [HTML](<https://devfeed.tech/topics/html.md>), [render](<https://devfeed.tech/topics/render.md>), [API](<https://devfeed.tech/topics/api.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [html](<https://devfeed.tech/tags/html.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [render](<https://devfeed.tech/tags/render.md>)

### AI overview

A tutorial on using Angular dynamic components to render and update HTML for Leaflet map popups controlled by a third-party API.

### Source excerpt

Lorem ipsum dolor sit amet

## The Render Token

DevFeed: [The Render Token](<https://devfeed.tech/articles/the-render-token-37579.md>)

Original publisher: [Read original article](<https://brendaneich.com/2017/09/the-render-token/>)

Author: Brendan Eich

Published: 2017-09-25T14:57:39Z

Content type: opinion

Language: en

Sources: [Brendan Eich](<https://devfeed.tech/sources/brendan-eich.md>)

Topics: [render](<https://devfeed.tech/topics/render.md>), [GPU](<https://devfeed.tech/topics/gpu.md>), [Blockchain](<https://devfeed.tech/topics/blockchain.md>), [watermarking](<https://devfeed.tech/topics/watermarking.md>), [Security](<https://devfeed.tech/topics/security.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [Ethereum](<https://devfeed.tech/topics/ethereum.md>), [proof of work](<https://devfeed.tech/topics/proof-of-work.md>)

Tags: [blockchain](<https://devfeed.tech/tags/blockchain.md>), [ethereum](<https://devfeed.tech/tags/ethereum.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [proof-of-work](<https://devfeed.tech/tags/proof-of-work.md>), [render](<https://devfeed.tech/tags/render.md>), [security](<https://devfeed.tech/tags/security.md>), [testing](<https://devfeed.tech/tags/testing.md>), [uncategorized](<https://devfeed.tech/tags/uncategorized.md>), [watermarking](<https://devfeed.tech/tags/watermarking.md>)

### AI overview

Brendan Eich discusses OTOY's RNDR token as a decentralized GPU-cloud rendering system for AR/VR, games, and movies. He describes token-based access to computing resources, blockchain-attested work verification, renderer reputation, hardware-assisted confidentiality, and watermarking for protecting digital models and art.

### Source excerpt

I wrote about OTOY over four years ago, in "Today I Saw The Future". Since then, I have been inspired by the commitment of the founders Jules Urbach and Alissa Grainger to the vision that Jules enunciates: "... to render and remix simulated reality as effortlessly as the web did for text and digital media. ... Continue reading "The Render Token"

## Implementing Critical CSS on your website

DevFeed: [Implementing Critical CSS on your website](<https://devfeed.tech/articles/implementing-critical-css-on-your-website-31272.md>)

Original publisher: [Read original article](<https://nystudio107.com/blog/implementing-critical-css>)

Author: andrew@nystudio107.com (Andrew Welch)

Published: 2017-02-28T21:34:00Z

Content type: tutorial

Language: en

Sources: [nystudio107 | Articles on modern web development.](<https://devfeed.tech/sources/nystudio107-articles-on-modern-web-development.md>)

Topics: [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [inlining](<https://devfeed.tech/topics/inlining.md>), [render](<https://devfeed.tech/topics/render.md>), [Website](<https://devfeed.tech/topics/website.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [browser](<https://devfeed.tech/tags/browser.md>), [critical](<https://devfeed.tech/tags/critical.md>), [development](<https://devfeed.tech/tags/development.md>), [essential](<https://devfeed.tech/tags/essential.md>), [frontend](<https://devfeed.tech/tags/frontend.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [implementing](<https://devfeed.tech/tags/implementing.md>), [inlining](<https://devfeed.tech/tags/inlining.md>), [insights](<https://devfeed.tech/tags/insights.md>), [modern](<https://devfeed.tech/tags/modern.md>), [modern-web-development](<https://devfeed.tech/tags/modern-web-development.md>), [performant](<https://devfeed.tech/tags/performant.md>), [render](<https://devfeed.tech/tags/render.md>), [shows](<https://devfeed.tech/tags/shows.md>), [website](<https://devfeed.tech/tags/website.md>)

### AI overview

This tutorial explains Critical CSS, a method for extracting the CSS needed for above-the-fold content and inlining it so the browser can render the page immediately. It presents the technique as part of building performant websites.

### Source excerpt

Implementing Critical CSS is an essential part of modern website development, this article shows you how to do it

## Droidcon Italy recap

DevFeed: [Droidcon Italy recap](<https://devfeed.tech/articles/droidcon-italy-recap-28644.md>)

Original publisher: [Read original article](<https://jeroenmols.com/blog/2016/04/08/droidconit/>)

Author: info@jeroenmols.com (Jeroen Mols)

Published: 2016-04-08T00:00:00Z

Content type: article

Language: en

Sources: [Jeroen Mols](<https://devfeed.tech/sources/jeroen-mols.md>)

Topics: [Development](<https://devfeed.tech/topics/development.md>), [User Experience](<https://devfeed.tech/topics/user-experience.md>), [App](<https://devfeed.tech/topics/app.md>), [render](<https://devfeed.tech/topics/render.md>), [APK](<https://devfeed.tech/topics/apk.md>), [configuration](<https://devfeed.tech/topics/configuration.md>), [Gson](<https://devfeed.tech/topics/gson.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [apk](<https://devfeed.tech/tags/apk.md>), [app](<https://devfeed.tech/tags/app.md>), [app-development](<https://devfeed.tech/tags/app-development.md>), [app-performance](<https://devfeed.tech/tags/app-performance.md>), [blogs](<https://devfeed.tech/tags/blogs.md>), [conference](<https://devfeed.tech/tags/conference.md>), [dependencies](<https://devfeed.tech/tags/dependencies.md>), [design](<https://devfeed.tech/tags/design.md>), [designer](<https://devfeed.tech/tags/designer.md>), [developer](<https://devfeed.tech/tags/developer.md>), [developers](<https://devfeed.tech/tags/developers.md>), [development](<https://devfeed.tech/tags/development.md>), [droidcon](<https://devfeed.tech/tags/droidcon.md>), [experience](<https://devfeed.tech/tags/experience.md>), [gson](<https://devfeed.tech/tags/gson.md>), [lint](<https://devfeed.tech/tags/lint.md>), [performance](<https://devfeed.tech/tags/performance.md>), [proguard](<https://devfeed.tech/tags/proguard.md>), [recap](<https://devfeed.tech/tags/recap.md>), [tools](<https://devfeed.tech/tags/tools.md>)

### AI overview

A recap of Droidcon Italy covering collaboration between developers and designers to improve user experience, Android layout rendering performance, and reducing DEX method counts through APK analysis, Proguard configuration, dependency cleanup, and tools such as ClassyShark.

### Source excerpt

A conference about our favorite Green little robots? In sunny Italy? With great food and a party? Yeah, I can image how you must feel in case you missed it... I on the other hand was fortunate enough to attend and speak at this awesome conference.

## Replacing Ember's Rendering Engine Improved Discourse Performance on Android

DevFeed: [Replacing Ember's Rendering Engine Improved Discourse Performance on Android](<https://devfeed.tech/articles/we-finally-did-something-about-android-performance-40637.md>)

Original publisher: [Read original article](<https://eviltrout.com/blog/2016-02-25-fixing-android-performance/>)

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

Content type: opinion

Language: en

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

Topics: [Ember](<https://devfeed.tech/topics/ember.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [render](<https://devfeed.tech/topics/render.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [devices](<https://devfeed.tech/tags/devices.md>), [improvements](<https://devfeed.tech/tags/improvements.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [performance](<https://devfeed.tech/tags/performance.md>), [render](<https://devfeed.tech/tags/render.md>), [speed](<https://devfeed.tech/tags/speed.md>)

### AI overview

The article describes how the Discourse team addressed slow Android performance by replacing Ember's rendering engine for a common view with a custom virtual DOM-based renderer. Reported benchmarks show faster large-topic rendering across desktop and Android devices, with the largest gains on older Android hardware.

### Source excerpt

Back in September, Codinghorror wrote a popular post on the state of android Javascript performance on Discourse's Meta forum. It drew a lot of attention, and led to some fascinating discussions on our forum and behind the scenes with browser engineers. The poor performance of Discourse on Android was already old news to us at that point: we started paying attention several years ago, and have spent some time contributing to the Ember.js community tools to help profile application performance, in particular the "Render Performance" tab on the Ember Inspector, and the ember performance suite.

## Hiding Offscreen Content in Ember.js

DevFeed: [Hiding Offscreen Content in Ember.js](<https://devfeed.tech/articles/hiding-offscreen-content-in-ember-js-40625.md>)

Original publisher: [Read original article](<https://eviltrout.com/blog/2014-01-04-hiding-offscreen-ember/>)

Published: 2014-01-04T00:00:00Z

Content type: tutorial

Language: en

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

Topics: [Ember](<https://devfeed.tech/topics/ember.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [elements](<https://devfeed.tech/tags/elements.md>), [ember](<https://devfeed.tech/tags/ember.md>), [js](<https://devfeed.tech/tags/js.md>), [memory](<https://devfeed.tech/tags/memory.md>), [render](<https://devfeed.tech/tags/render.md>)

### AI overview

This article explains how hiding offscreen content in Ember.js can reduce the browser's DOM workload and memory use. It describes Discourse's infinite-scrolling performance problem and a cloak technique that replaces offscreen views with simpler elements while preserving their height.

### Source excerpt

Everything you render in a browser, whether it's a blog post or a tweet or a video, has a performance cost. At the very least, you will be asking the browser to render a handful of tags and text elements that make up your user interface. That structure, a subtree in the browser's DOM, can be quite complicated and memory intensive. The more tags and elements you render, the slower the browser is going to perform, and the more memory it is going to use to do it. It follows that if you give the browser less work to do, it will do it faster.

## Transparency with JPEGs

DevFeed: [Transparency with JPEGs](<https://devfeed.tech/articles/transparency-with-jpegs-15932.md>)

Original publisher: [Read original article](<https://developer.squareup.com/blog/transparency-with-jpegs>)

Author: Square Engineering

Published: 2013-01-18T17:01:00Z

Content type: tutorial

Language: en

Sources: [Square Corner Blog RSS Feed](<https://devfeed.tech/sources/square-corner-blog-rss-feed.md>)

Topics: [Compression](<https://devfeed.tech/topics/compression.md>), [Image](<https://devfeed.tech/topics/image.md>), [Graphics](<https://devfeed.tech/topics/graphics.md>), [implementation](<https://devfeed.tech/topics/implementation.md>), [pixel](<https://devfeed.tech/topics/pixel.md>), [render](<https://devfeed.tech/topics/render.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [color](<https://devfeed.tech/tags/color.md>), [compression](<https://devfeed.tech/tags/compression.md>), [engineering](<https://devfeed.tech/tags/engineering.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [implementation](<https://devfeed.tech/tags/implementation.md>), [information](<https://devfeed.tech/tags/information.md>), [jpeg](<https://devfeed.tech/tags/jpeg.md>), [library](<https://devfeed.tech/tags/library.md>), [pixel](<https://devfeed.tech/tags/pixel.md>), [quality](<https://devfeed.tech/tags/quality.md>), [render](<https://devfeed.tech/tags/render.md>)

### AI overview

The article describes a technique for adding transparency to JPEG images by storing color data in one JPEG and transparency data in a separate monochrome alpha-channel image. It explains how to combine the two images during rendering, including an Android implementation, to reduce file size while retaining photographic quality.

### Source excerpt

Combining the compression of JPEGs and the transparency of PNGs for a 90% compression gain.