Sign in

Rägnar O'ock

@ragnar-oock.bsky.social
61 followers 133 following 125 posts

Web 🥔 building the tools to empower others. Creator of xoram.dev

PostsRepliesMedia
Rägnar O'ock @ragnar-oock.bsky.social · 20/02/2026
I made more textures for the game, it looks a lot better in 3d now too (which is how I hope to make it in the end). And no, there's no canvas for rendering. That cobblestone texture took me forever to draw and it revealed an issue with how the textures are rendered and I can't unsee it ( è - é )
A screenshot of a city builder prototype showing a grid based map with various tiles identified by emojis and decorated by pixel art textures adapting to the type of the surrounding tiles. The backdrop of the map is a dirt texture, tiles have various backgrounds such as grass, water, asphalt and cobblestone.
The cobblestone texture stands out from the other textures by its contrasting color and the lining of smaller stones shown on the outside edge of the group of tiles.A screenshot of a city builder prototype showing the background textures of a grid based map with various tiles decorated by pixel art textures adapting to the type of the surrounding tiles. The backdrop of the map is a dirt texture, tiles have various backgrounds such as grass, water, asphalt and cobblestone.
The cobblestone texture stands out from the other textures by its contrasting color and the lining of smaller stones shown on the outside edge of the group of tiles.A screenshot of a city builder prototype showing the background textures of a grid based map with various tiles decorated by pixel art textures adapting to the type of the surrounding tiles. The backdrop of the map is a dirt texture, tiles have various backgrounds such as grass, water, asphalt and cobblestone.
The cobblestone texture stands out from the other textures by its contrasting color and the lining of smaller stones shown on the outside edge of the group of tiles.
The game board is tilted slightly away from the camera to make it look like it is placed on a table viewed from the side. Because it's a prototype the edges of the map are clipped in view of the screen making the setup feel bodged together.
030
Rägnar O'ock @ragnar-oock.bsky.social · 15/02/2026
Today I have worked (shortly) on adding textures to my game. Because I'm lazy and didn't want to draw too many textures I used a dual grid to make it possible to have nice looking connected textures. I wouldn't have thought it to be this easy to implement.
Screenshot of a grid based city builder with somewhat random tile types scattered everywhere to showcase how the background textures connect cleanly when 2 nearby grid cells are filled with a tile. The background texture is a pixel art grass pattern and the tiles at the edges have an artistic feathering to transition between the grass texture and the blank background of the map.
The tiles use emojis to illustrate their type.
A set of 7 cards lay in an arc at the bottom ready to be placed on the board.
220
Rägnar O'ock @ragnar-oock.bsky.social · 07/12/2025
Soooo... I've been working on and off on the small game I posted about last time. I've added a bunch of interactivity and, more importantly, actual gameplay in the form of placement constraints and scoring. I think I'll work on the graphics next... Try the game here : ragnar-oock.github.io/colon/
010
Rägnar O'ock @ragnar-oock.bsky.social · 06/11/2025
I needed to try something new for a bit, so I decided to make a board game loosely inspired by Colon Catan. So far I have the board, the things that go on it and a way to control which tile can be placed where. This silly thing is built with Vue and I wouldn't have thought it such a good fit. >>>
100
Rägnar O'ock @ragnar-oock.bsky.social · 28/10/2025
I got a new job about a month and a half back. And it's both funny and deeply depressing that now that I have 2 "actual experiences" on my CV (yes, I already updated my CV), I get so many more cold calls from recruiters. I went from 2 in 6 months to 8 in 5 weeks. And I don't like that fact at all
000
Reposted by Rägnar O'ock
Kevin Powell @kevinpowell.co · 11/09/2025
Last week I did a quick live session in my Discord community, and it worked well enough that I've decided to do monthly workshops there. The first one will be next Friday, with a CSS Grid crash course of sorts. You can join the community here: discord.gg/bRVypdE9?eve...
CSS Grid Workshop: Friday September 19th at 4pm UTC / 12pm Eastern time / 9am Pacific time
3262
Rägnar O'ock @ragnar-oock.bsky.social · 07/09/2025
Me: Technology has peaked, it's only downhill from here. There's no way we can make it better. Me after looking at the rest of the thread: nevermind...
021
Reposted by Rägnar O'ock
Adrian Roselli, pH0 @aardrian.bsky.social · 19/08/2025
Unfortunately, standards work may be a function of who has the biggest platform for social media polls (that pre-judge the outcome). I’m hoping those who work in or near #accessibility can offer some feedback to more fundamental, not pre-judged, questions here: bsky.app/profile/aard... #a11y
163
Reposted by Rägnar O'ock
Adrian Roselli, pH0 @aardrian.bsky.social · 18/08/2025
[1/3] Asking the questions from this Masto post so you can respond to me here and I’ll carry them over: eigenmagic.net/@sundress/11... Think of `<label for="IDREF">` and other places you use an IDREF. 1. What are the specific pain points around using IDs? #HTML #accessibility #a11y
eigenmagic.net
Alice Boxhall (@sundress@eigenmagic.net)
There are some posts doing the rounds at the moment asking questions about using IDREF attributes like `for` without using IDs. I think these polls are asking the wrong questions. I think these are t...
234
Reposted by Rägnar O'ock
Alice Averlong 🏳️‍⚧️ @alice.averlong.com · 13/08/2025
SIGH
A form labeled Gender with four options:
* Female
* Male
* Female-to-Male (FTM)/Transgender Male/Trans Man
* Male-to-Female (MTF)/Transgender Female/Trans Woman
1257924
Rägnar O'ock @ragnar-oock.bsky.social · 13/08/2025
If you're making websites or web apps and want to use masonry in the future, now's the time to give your opinion on how the API should work. What do you want your masonry CSS to look like?
264
Rägnar O'ock @ragnar-oock.bsky.social · 12/08/2025
The results from State of CSS are out. 2025.stateofcss.com Let's go over some interesting bits...
2025.stateofcss.com
State of CSS 2025
133
Rägnar O'ock @ragnar-oock.bsky.social · 08/08/2025
I have been wanting to make a small video game in JS for a while now. And who says video game, says game engine, right? right... As usual, I got sidetracked, and I'm now making an edit history system for xoram.dev, and I finally got it to do something interesting.
100
Rägnar O'ock @ragnar-oock.bsky.social · 26/07/2025
Using an old artwork from @v-0-3.bsky.social
Screenshot of an Android phone lock screen. It shows the date and time (Saturday July 26 at 10:59PM) the temperature (21°C) and current weather as an icon (sunny with some clouds). The background image shows a guy, dimly lit behind an out of focus crosslink fence. The guy is the main character of the webcomic Paper Roses.
000
Rägnar O'ock @ragnar-oock.bsky.social · 18/07/2025
I scored 10/28 on jsdate.wtf, and all I got was this lousy text to share on social media.
jsdate.wtf
new Date("wtf")
How well do you know JavaScript's Date class?
000
Rägnar O'ock @ragnar-oock.bsky.social · 18/07/2025
Working on the xoram.dev demo with Tiptap and Vue again : youtube.com/live/9rRfrSR... www.twitch.tv/ragnar_oock
xoram.dev
xoram
xoram - A lightweight plugin framework
000
Rägnar O'ock @ragnar-oock.bsky.social · 17/07/2025
Result of today's stream: a small xoram.dev, Vue, and Tiptap editor that supports bold, italic, 3 levels of heading, and links. Tune in tomorrow at 2 PM UTC+1, we'll do a bit of styling and try to make a plugin to auto-complete Wikipedia pages in the link pop-up window. youtu.be/jdgVRgMTjG4
youtu.be
stream result 17/07/2025
YouTube video by Rägnar O'ock
000
Rägnar O'ock @ragnar-oock.bsky.social · 17/07/2025
I did it ! I'm live over there : www.twitch.tv/ragnar_oock | youtube.com/live/9rRfrSR...
twitch.tv
Ragnar_Oock - Twitch
Making a pomodoro app with @b1mind
010
Rägnar O'ock @ragnar-oock.bsky.social · 16/07/2025
Welp... I forgot to stream... Let's try again tomorrow
000
Reposted by Rägnar O'ock
Adrian Roselli, pH0 @aardrian.bsky.social · 15/07/2025
I need to dispel some table accessibility myths. 1. `<thead>` and `<tbody>` are not exposed to users. Using `<thead>` to wrap multiple header rows has no effect (and you shouldn’t have multiple header rows). Partial ref: adrianroselli.com/2022/02/colu... [1/3] #accessibility #a11y #HTML
adrianroselli.com
Column Headers and Browser Support
Data tables need column headers. Monolitten, a granite column of humans (each with a head) at Vigelandsanlegget, a sculpture park in Frognerparken in Oslo, Norway. What they probably do not need is a ...
194
Rägnar O'ock @ragnar-oock.bsky.social · 16/07/2025
I forgot to post about it but... The integration package for xoram and @vuejs.org is out. It's called panoramique and it uses pinia to create a dynamic component tree you can manipulate dynamically from any dependent xoram plugin. Check out the doc here : xoram.dev/plugins/pano...
xoram.dev
xoram
xoram - A lightweight plugin framework
000
Rägnar O'ock @ragnar-oock.bsky.social · 16/07/2025
Challenge to myself : I stream on twitch tomorrow to work on a demo of @tiptap.dev using xoram.dev to create an a-la-carte menu for some default extension (bold, italic, underline, ul, ol, link) and a custom one, I'm still on the fence on what to make it about.
xoram.dev
xoram
xoram - A lightweight plugin framework
000
Rägnar O'ock @ragnar-oock.bsky.social · 12/07/2025
Vapor mode finally hitting alpha! It can mean huge bundle size reduction if you use Vue to build dynamic islands or JAMStack style web apps/sites.
010
Reposted by Rägnar O'ock
Alex Riviere @dangitalex.wtf · 30/06/2025
this is a perfect graph, no notes. comicss.art/comics/193/
comicss.art
comiCSS #193: Benefits of Tailwind
Pie chart titled Benefits of Using TailwindCSS. The chart is 30% green, 55% yellow, and 15% orange. The legend is Reduced Code Bloat (red), Maintainability (blue), and Learning Curve (pink)
23611
Rägnar O'ock @ragnar-oock.bsky.social · 30/06/2025
Oups, I did it again. *rotates your viewport* codepen.io/ragnar_ock/p...
122
Rägnar O'ock @ragnar-oock.bsky.social · 29/06/2025
@kevinpowell.co challenged me to adapt my rotation cube view-transition to a scroll-based animation. It kinda works with #CSSonly but I think using a bit of JS and view-transitions between sections would look better, I might try it in the future. codepen.io/ragnar_ock/p...
1101
Reposted by Rägnar O'ock
Lily Suchipi Skye @suchipi.bsky.social · 27/06/2025
ANNOUNCEMENT: I'm looking for work! I'm a JavaScript/TypeScript expert with a ton of experience in Node, ASTs, Testing Frameworks, Docker, and more! - 10 years experience - Former core maintainer of Prettier - 315 GitHub repos, 198 npm packages suchipi.com/Resume2025.pdf
Preview of the linked PDF
36639
Rägnar O'ock @ragnar-oock.bsky.social · 28/06/2025
Experimented a bit with animation-timeline today, those are really fun to play with. I can't wait for it to hit baseline so designers can go ham with them. codepen.io/ragnar_ock/p...
000
Rägnar O'ock @ragnar-oock.bsky.social · 26/06/2025
Apparently there's a windows manager for linux that allowed you to do that kind of stuff more than a decade ago... maybe there is such a thing as "too much transition" after all
000
Rägnar O'ock @ragnar-oock.bsky.social · 24/06/2025
After 3 months of work I can finally brag about it here, I've released my first NPM package! It's called xoram and it's a small plugin engine inspired by Vue's composition API. You can check the documentation on xoram.dev I'm also working on a tie-in package to integrate with @vuejs.org and Pinia.
xoram.dev
xoram
xoram - A lightweight plugin framework
000
Reposted by Rägnar O'ock
Sara Soueidan @sarasoueidan.com · 24/06/2025
'“eat your vegetables” is one of the least effective arguments in the world. [..] I would like to list some of my personal, completely selfish reasons for building accessible UIs. No finger-wagging here: just good old hardheaded self-interest!' nolanlawson.com/2025/06/16/s... #a11y
nolanlawson.com
Selfish reasons for building accessible UIs
All web developers know, at some level, that accessibility is important. But when push comes to shove, it can be hard to prioritize it above a bazillion other concerns when you’re trying to c…
05717
Reposted by Rägnar O'ock
Mali 💤 MCM London G-23 @sleepimali.bsky.social · 20/06/2025
Reposting with alt text since this is going around again!
Two panel comic in black and white. In the first panel, a bunny sits in the grass, surrounded by sparkles and flowers, on a white background. The second panel zooms in on the bunny's face and the background is black, with white text handwritten in all caps on it: "TOUCHING GRASS ISN'T ENOUGH, I NEED MONEY"

Signature: SLEEPIMALI (and the year the comic was made, 2023)
6128645119
Rägnar O'ock @ragnar-oock.bsky.social · 20/06/2025
I often do cursed things when writing JS or TS, but today I innovated, I did a DNSxHTML cursed thing. Behold the smallest index.html you might have ever seen: <meta http-equiv="refresh" content="0; url=https://xoram.dev/" /> github.com/Ragnar-Oock/...
github.com
zoram/index.html at master · Ragnar-Oock/zoram
GH page to redirect zoram.dev to xoram.dev. Contribute to Ragnar-Oock/zoram development by creating an account on GitHub.
100
Reposted by Rägnar O'ock
Ana Tudor @anatudor.bsky.social · 13/06/2025
I have a new article out. It's about a better technique to create grainy gradients, without the big problem that layering a noise layer brings: altering the original gradient palette (to a greater or lesser extent, depending on the approach used). #CSS #SVG #filter
111014
Reposted by Rägnar O'ock
Chris Ferdinandi @cferdinandi.bsky.social · 10/06/2025
If anyone is hiring, I'm still looking for my next thing. Senior Frontend/Fullstack Developer. Skilled at HTML/CSS/JavaScript, React, UI/UX, A11Y, web performance, design systems, Web Components, and more. I'd love to work with you! gomakethings.com/resume
gomakethings.com
Resume
Chris Ferdinandi's Resume Location: Greater Boston, MA chris@gomakethings.com A senior full-stack web developer specializing in JavaScript and scalable, resilient architecture. Skills and experience ...
32919
Reposted by Rägnar O'ock
VoidZero @voidzero.dev · 10/06/2025
We're thrilled to announce the first stable release of Oxlint - version 1.0! Our Rust-powered JavaScript/TypeScript linter delivers 50~100x faster performance than ESLint with 500+ rules and zero configuration required. Time to give it a try! voidzero.dev/posts/announ...
voidzero.dev
Announcing Oxlint 1.0
The first stable version of Oxlint, a fast & easy-to-use Rust-powered linter for JavaScript and TypeScript, is out. Learn about its 50~100x speed advantage over ESLint, support for 500+ rules, real-wo...
1030161
Reposted by Rägnar O'ock
Vi @v-0-3.bsky.social · 26/03/2025
My entry for Global Comic Awards is finished and ready to read! We worked very hard on it and it would mean a lot if you could check it out 🙏❤️✨
19813211
Reposted by Rägnar O'ock
The Spaceshipper 🚀 @thespaceshipper.com · 11/02/2025
Concept artist wizard @paulchadeisson.bsky.social (Foundation, Homeworld 3, Dune Part 2, Dune Prophecy, Alien Romulus, Alien Earth, The Creator, etc) released a second Solstice-5 short! This is sci-fi.
youtube.com
SOLSTICE - 5: Forgotten archives
YouTube video by Paul Chadeisson
1015729