# pixels

Published articles for pixels.

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

## snakes.run: rendering 100M pixels a second over ssh

DevFeed: [snakes.run: rendering 100M pixels a second over ssh](<https://devfeed.tech/articles/snakes-run-rendering-100m-pixels-a-second-over-ssh-40775.md>)

Original publisher: [Read original article](<https://eieio.games/how-snake>)

Author: Nolen Royalty (eieiogames@gmail.com)

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

Content type: article

Language: en

Sources: [eieio.games](<https://devfeed.tech/sources/eieio-games.md>)

Topics: [ssh](<https://devfeed.tech/topics/ssh.md>), [Go Language](<https://devfeed.tech/topics/go-language.md>), [Back end](<https://devfeed.tech/topics/backend.md>), [Text-based user interface](<https://devfeed.tech/topics/tui.md>), [ASCII](<https://devfeed.tech/topics/ascii.md>)

Tags: [backend](<https://devfeed.tech/tags/backend.md>), [go](<https://devfeed.tech/tags/go.md>), [multiplayer](<https://devfeed.tech/tags/multiplayer.md>), [performance](<https://devfeed.tech/tags/performance.md>), [pixels](<https://devfeed.tech/tags/pixels.md>), [render](<https://devfeed.tech/tags/render.md>), [server](<https://devfeed.tech/tags/server.md>), [ssh](<https://devfeed.tech/tags/ssh.md>), [terminal](<https://devfeed.tech/tags/terminal.md>), [text](<https://devfeed.tech/tags/text.md>), [unicode](<https://devfeed.tech/tags/unicode.md>)

### AI overview

An engineering article explains how snakes.run delivers a massively multiplayer snake game over SSH. It describes server-side frame rendering, a TUI-based game architecture, bandwidth and performance work, and the use of Unicode block elements and terminal colors for smoother graphics.

### Source excerpt

snakes.run is a massively multiplayer snake game that uses the Secure Snake Home (SSH) protocol. It can render 100M pixels a second.

## Hello Deep Learning: Reading handwritten digits

DevFeed: [Hello Deep Learning: Reading handwritten digits](<https://devfeed.tech/articles/hello-deep-learning-reading-handwritten-digits-36420.md>)

Original publisher: [Read original article](<https://berthub.eu/articles/posts/handwritten-digits-sgd-batches/>)

Published: 2023-03-30T10:00:04Z

Content type: tutorial

Language: en

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

Topics: [Deep learning](<https://devfeed.tech/topics/deep-learning.md>), [Neural Network](<https://devfeed.tech/topics/neural-network.md>), [Deep neural networks](<https://devfeed.tech/topics/deep-neural-networks.md>), [Image](<https://devfeed.tech/topics/image.md>)

Tags: [blog-posts](<https://devfeed.tech/tags/blog-posts.md>), [deep-learning](<https://devfeed.tech/tags/deep-learning.md>), [images](<https://devfeed.tech/tags/images.md>), [layer](<https://devfeed.tech/tags/layer.md>), [matrices](<https://devfeed.tech/tags/matrices.md>), [neural-network](<https://devfeed.tech/tags/neural-network.md>), [pixels](<https://devfeed.tech/tags/pixels.md>), [spatial](<https://devfeed.tech/tags/spatial.md>)

### AI overview

A tutorial in the Hello Deep Learning series explains how to build a neural network that recognizes all ten handwritten digits. It describes flattening 28x28 images, applying matrix multiplications and ReLU layers, and selecting the highest-scoring output.

### Source excerpt

This page is part of the Hello Deep Learning series of blog posts. You are very welcome to improve this page via GitHub! In the previous chapter we described how automatic differentiation of the result of neural networks works. In the first and second chapters we designed and trained a one-layer neural network that could distinguish images of the digit 3 and the digit 7, and the network did so very well.

## Hello Deep Learning: Automatic differentiation, autograd

DevFeed: [Hello Deep Learning: Automatic differentiation, autograd](<https://devfeed.tech/articles/hello-deep-learning-automatic-differentiation-autograd-36257.md>)

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

Published: 2023-03-30T10:00:03Z

Content type: tutorial

Language: en

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

Topics: [Deep learning](<https://devfeed.tech/topics/deep-learning.md>), [Neural Network](<https://devfeed.tech/topics/neural-network.md>), [Algorithm](<https://devfeed.tech/topics/algorithm.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [algorithm](<https://devfeed.tech/tags/algorithm.md>), [deep-learning](<https://devfeed.tech/tags/deep-learning.md>), [matrices](<https://devfeed.tech/tags/matrices.md>), [model](<https://devfeed.tech/tags/model.md>), [neural-network](<https://devfeed.tech/tags/neural-network.md>), [pixels](<https://devfeed.tech/tags/pixels.md>), [train](<https://devfeed.tech/tags/train.md>)

### AI overview

This tutorial chapter explains how automatic differentiation and gradient descent train a five-layer neural network to recognize all ten handwritten digits. It introduces the network's layers, parameters, weights, and biases, then connects parameter updates to derivatives of the error.

### Source excerpt

This page is part of the Hello Deep Learning series of blog posts. You are very welcome to improve this page via GitHub! In the previous chapter we configured a neural network and made it learn to distinguish between the digits 3 and 7. The learning turned out to consist of "twisting the knobs in the right direction". Although simplistic, the results were pretty impressive. But, you might still be a bit underwhelmed - the network only distinguished between two digits.

## How a Neural Network Learns to Classify Images of 3s and 7s

DevFeed: [How a Neural Network Learns to Classify Images of 3s and 7s](<https://devfeed.tech/articles/hello-deep-learning-actually-learning-something-36398.md>)

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

Published: 2023-03-30T10:00:02Z

Content type: tutorial

Language: en

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

Topics: [Learning](<https://devfeed.tech/topics/learning.md>), [Neural Network](<https://devfeed.tech/topics/neural-network.md>), [Deep learning](<https://devfeed.tech/topics/deep-learning.md>), [Machine learning](<https://devfeed.tech/topics/machine-learning.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [data](<https://devfeed.tech/tags/data.md>), [deep-learning](<https://devfeed.tech/tags/deep-learning.md>), [layer](<https://devfeed.tech/tags/layer.md>), [machine-learning](<https://devfeed.tech/tags/machine-learning.md>), [neural-network](<https://devfeed.tech/tags/neural-network.md>), [pixels](<https://devfeed.tech/tags/pixels.md>)

### AI overview

This tutorial explains how a simple neural network can learn to classify images of 3s and 7s. It introduces random parameter initialization, the role of the weights matrix, and adjusting weights based on image pixels to improve the classification score.

### Source excerpt

This page is part of the Hello Deep Learning series of blog posts. You are very welcome to improve this page via GitHub! In this chapter we're going to take the neural network we made earlier, but actually make it do some learning itself. And, oddly enough, this demonstration will again likely simultaneously make you wonder "is this all??" and also impress you by what even this trivial stuff can do.

## What is the difference between size and viewport size in vector drawables?

DevFeed: [What is the difference between size and viewport size in vector drawables?](<https://devfeed.tech/articles/what-is-the-difference-between-size-and-viewport-size-in-vector-drawables-37181.md>)

Original publisher: [Read original article](<https://arkadiuszchmura.com/posts/what-is-the-difference-between-size-and-viewport-size-in-vector-drawables/>)

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

Content type: tutorial

Language: en

Sources: [Arkadiusz Chmura](<https://devfeed.tech/sources/arkadiusz-chmura.md>)

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

Tags: [app](<https://devfeed.tech/tags/app.md>), [canvas](<https://devfeed.tech/tags/canvas.md>), [code](<https://devfeed.tech/tags/code.md>), [compose](<https://devfeed.tech/tags/compose.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [pixels](<https://devfeed.tech/tags/pixels.md>), [screen](<https://devfeed.tech/tags/screen.md>), [vector](<https://devfeed.tech/tags/vector.md>)

### AI overview

A tutorial explains the difference between a vector drawable's intrinsic size and viewport size. Using a Jetpack Compose example, it shows that size determines the drawable's displayed dimensions, while viewport size defines the coordinate space used to draw its paths.

### Source excerpt

It always puzzled me so I decided to find out how are these things different.

## SVG non-scaling circle and rectangle

DevFeed: [SVG non-scaling circle and rectangle](<https://devfeed.tech/articles/svg-non-scaling-circle-and-rectangle-37359.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/svg-non-scaling-circle-and-rectangle/>)

Author: Stanko

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

Content type: tutorial

Language: en

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

Topics: [SVG](<https://devfeed.tech/topics/svg.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [elements](<https://devfeed.tech/tags/elements.md>), [pixels](<https://devfeed.tech/tags/pixels.md>), [property](<https://devfeed.tech/tags/property.md>), [standard](<https://devfeed.tech/tags/standard.md>), [svg](<https://devfeed.tech/tags/svg.md>), [vector](<https://devfeed.tech/tags/vector.md>)

### AI overview

A tutorial explains how to create non-scaling SVG circles and rectangles using non-scaling strokes, line caps, and very short lines. It includes SVG code and discusses browser limitations and outlined shapes.

### Source excerpt

While making a simple SVG chart, I realized I would like to have non-scaling circles for data points. Unfortunately, SVG doesn't support it out of the box. If you are eager to see the result, jump to the examples below or play with the code on Codepen. Non-scaling stroke example # SVG does support non-scaling stroke width by setting vector-effect to non-scaling-stroke. When you set it, strokes will stay the same width no matter the scale of the SVG image. Try resizing your windowOn desktop, you should be able to resize each image on it's own by dragging the bottom right corner, and you'll see that the bottom line always stays 1px, while the upper one scales with the image: Stroke line cap # SVG also allows you to change how your line's ends look like, by using stroke-linecap property. Available options are butt, square and round, and on the image below they are presented in that order. As you can see square and round line caps are sticking out of our line. You probably figured it out, but that is exactly what we are going to use to create non-scaling circles and rectangles. Putting it all together # Up to this point we know that we can have a non-scaling stroke and that we can change its caps to be round and square. If we use a line with no length, sticking parts will join and create a perfect circle (or rectangle). SVG doesn't support lines with length of zero pixels, so we'll set the length to something negligible. The only thing left is to set a thick stroke width to create a shape. Circle # The code below will create a black circle with a radius of 50 and center at { x: 50, y: 50 }. <path d="M 50 50 l 0.0001 0" vectorEffect="non-scaling-stroke" strokeWidth="100" strokeLinecap="round" stroke="black" /> Let me quickly break the code down: d="M 50 50 l 0.0001 0" - this creates a super short line. The first two coordinates (M 50 50) are the line's start and our circle's center. The rest of the code (l 0.0001 0) draws a horizontal line 0.0001px longPlease be aware th

## Implementing PhotoShop font sizes and tracking in CSS, points to pixels conversion

DevFeed: [Implementing PhotoShop font sizes and tracking in CSS, points to pixels conversion](<https://devfeed.tech/articles/implementing-photoshop-font-sizes-and-tracking-in-css-points-to-pixels-conversion-37272.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/font-size-and-tracking-points-to-pixels/>)

Author: Stanko

Published: 2016-09-08T00: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>), [Sass](<https://devfeed.tech/topics/sass.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [conversion](<https://devfeed.tech/tags/conversion.md>), [css](<https://devfeed.tech/tags/css.md>), [function](<https://devfeed.tech/tags/function.md>), [mixins](<https://devfeed.tech/tags/mixins.md>), [photoshop](<https://devfeed.tech/tags/photoshop.md>), [pixels](<https://devfeed.tech/tags/pixels.md>), [points](<https://devfeed.tech/tags/points.md>), [sass](<https://devfeed.tech/tags/sass.md>), [scss](<https://devfeed.tech/tags/scss.md>), [tracking](<https://devfeed.tech/tags/tracking.md>)

### AI overview

A tutorial on converting Photoshop font sizes from points to CSS pixels and translating Photoshop tracking into CSS letter spacing using Sass functions and mixins. It explains when to use each construct and provides example Sass and generated CSS.

### Source excerpt

We've all been there - trying to get right font sizes from PhotoShop to CSS. Designers usually work with points, which are used in the print, but not common on the web. They also use term tracking a lot, which is actually only a letter spacing with different units. You can recalculate everything by hand and try to keep track of it. But we can use the goodies of SCSS to make that process a bit easier. Point to pixel ratio is 1pt = 1.333333px. We'll create SASS function to do conversion for us. And PhotoShop tracking works relative to the font size. One point of tracking is 1/1000 of the font size. For this one we'll create a mixin. // Converts pt to px @function pt-to-px($size-in-points){ @return #{ round($size-in-points * 1.333333) }px; } // Adds letter spacing to match photoshop tracking @mixin tracking($ps-tracking){ letter-spacing: #{ $ps-tracking / 1000 }em; } // Usage .Component { @include tracking(-5); font-size: pt-to-px(20); line-height: pt-to-px(30); } This will generate following CSS: .Component { letter-spacing: -.005em; font-size: 15px; line-height: 23px; } Note that function and mixin can do pretty much the same job. But it makes more sense to use mixins when including complete styles, and functions to return values. So conversion makes sense to be a function, as we can use it for font size, line height or anything else. Conversion of tracking to letter spacing is including a specific style, so keep it in a mixin.

## The Anatomy of a Frame

DevFeed: [The Anatomy of a Frame](<https://devfeed.tech/articles/the-anatomy-of-a-frame-39440.md>)

Original publisher: [Read original article](<https://aerotwist.com/blog/the-anatomy-of-a-frame>)

Author: Paul Lewis

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

Content type: tutorial

Language: en

Sources: [Paul Lewis](<https://devfeed.tech/sources/paul-lewis.md>)

Topics: [Chrome](<https://devfeed.tech/topics/chrome.md>), [browser](<https://devfeed.tech/topics/browser.md>), [Processes](<https://devfeed.tech/topics/processes.md>), [GPU](<https://devfeed.tech/topics/gpu.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [layout](<https://devfeed.tech/topics/layout.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [code](<https://devfeed.tech/tags/code.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [jank](<https://devfeed.tech/tags/jank.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [layout](<https://devfeed.tech/tags/layout.md>), [pixels](<https://devfeed.tech/tags/pixels.md>), [process](<https://devfeed.tech/tags/process.md>)

### AI overview

This reference explains how Chrome and Blink move content from browser processes and renderer threads to the screen. It describes the GPU process, compositor thread, main thread, tile workers, input handling, JavaScript, style, layout, paint, and frame delivery, while noting that the architecture may differ across browser vendors.

### Source excerpt

I'm often asked by other developers about parts of the pixel workflow, and what fires when and why, so I figured it might be worth putting up a little reference for what's involved in shipping pixels to screen.