#frontend (35)

Seite 1 von 4

CSS is DOOMed

Niels Leenheer hat Doom in CSS (und ein bisschen JavaScript) nachgebaut:

No, CSS is awesome. CSS is better than ever and it is only getting better. And that is why I built DOOM in CSS. Every wall, floor, barrel, and imp is a `<div>`, positioned in 3D space using CSS transforms. The game logic runs in JavaScript, but the rendering is entirely CSS. You can play it right now.

CSS is DOOMed! | OpenGraph Preview Image
nielsleenheer.com

CSS is DOOMed!

Every wall, floor, barrel, and imp is a div — DOOM rendered entirely in CSS. Using 3D transforms, CSS math functions, @property, clip-path, anchor positioning, and SVG filters to build a fully playable 3D first-person shooter in the browser without Canvas or WebGL.

xkcd’s Dependency als Physik-Demo

GIF eine Screencasts der xkcd-Dependency Physik-Demo, in der also selbstredend alles zusammenbricht.

Craig S. Kaplan, Informatikprofessor and der University of Waterloo, hat das berühmt-berüchtigte xkcd-Comic „Dependency“ via p5.js und matter.js zu einer Physikdemo gemacht, wie er auf Mastodon schreibt:

In my online undergraduate P5.js course, students are about to begin the module on motion and physics, including a bit of physics simulation using Matter.js. It suddenly occurred to me that I had never seen anybody put together this particular demo before, and I realized it had to be done.

x86CSS

x86CSS is a working CSS-only x86 CPU/emulator/computer. Yes, the Cascading Style Sheets CSS. No JavaScript required.

What you’re seeing above is a C program that was compiled using GCC into native 8086 machine code being executed fully within CSS.

Lyra Rebane hat einen x86 CPU Emulator in – Trommelwirbel 🥁 – CSS gebaut, was absolut verrückt ist. Also im positiven Sinne. Dass das überhaupt geht und das zu machen.

Is CSS a programming language?
– Do you really need to ask at this point?

Und die Demo nutzt #rebeccapurple als Farbe. <3 (via Waxy.org)

x86CSS | OpenGraph Preview Image
lyra.horse

x86CSS

x86CSS is a working CSS-only x86 CPU/emulator/computer. No JavaScript required!

„Nothing can kill jQuery“

Unglaublich, aber wahr: jQuery existiert noch und ist in der vorletzten Woche in Version 4.0 erschienen. In der aktuellen Ausgabe des Bytes-Newsletters („Your weekly dose of JS“) heißt es dazu – neben der obigen Überschrift – sehr passend:

It doesn’t matter how many fancy coding agents or next-gen frameworks you throw at it — the $ God remains eternal. And it just celebrated its 20th birthday in style last week by dropping jQuery 4.0 out of nowhere.

Bis 2016/17 war es ein elementarer Bestandteil eines jeden Frontend-Entwickler-Skillsets, jQuery in- und auswendig zu kennen, gar zu beherrschen. 2006 als Library gestartet, die die unterschiedlichen JavaScript-Browser-APIs unter einem vereinten Interface zusammenfassen sollte, wurde es dank seiner Einfachheit für die Umsetzung von DOM-Manipulationen und Ajax-Requests bis zum Höhepunkt 2019 von 80% der Top-1-Million-Websites genutzt, so Wikipedia.

Ich bin recht froh, dass ich jQuery seit Hypercode-Gründung in 2019 tatsächlich kein einziges Mal mehr im Berufskontext anfassen musste oder ihm begegnet bin. Dafür sind unsere Projekte Evan You sei Dank zu modern.

Wenn ihr jQuery in 2026 immer noch benutzt, macht ihr vermutlich etwas falsch. Schließlich gibt es mit Vanilla JavaScript, also dem standardisierten Umfang unserer liebsten Script-Sprache, eigentlich alles, was das Frontend’ler-Herz begehrt. Spätestens in Kombination mit dem umfangreichen Node- und npm-Ökosystem. Wenn ihr jQuery in 2026 aber immer noch benutzen müsst, dann – auch cool – habt ihr jetzt eine neue Version.

Speaking of Frontend-Entwickler*innen: Bei Hypercode suchen wir gerade alle Ausprägungen davon – Junior, Senior und Werkstudenten. Wenn ihr was braucht oder wen kennt, meldet euch gerne. Sagt mir, ich hab euch geschickt.

Pong Wars

It’s the eternal battle between day and night, good and bad. Written in JavaScript with some HTML & CSS in one index.html.

Lustiges Miniprojekt von Koen van Gilst, der schreibt, dass das hier, was er an einem Freitagnachmittag gebaut hat, seine populärste Kreation im Web sei. Dabei hat er auch Prognosen für die Auswirkungen der Klimakatastrophe auf die Niederlande visualisiert, was ganz schön zeigt, wo allgemein unsere Prioritäten liegen.

comicss – A webcomic about CSS. Coded in CSS.

comiCSS is a webcomic created, designed, and coded by Alvaro Montoro.

PSone.css

Playstation 1 style CSS Framework, inspired by NES.css.

(via FLIP.de)

Human Record Player

Human Record Player makes you spin around to listen to Weezer’s new track.

Großartige Idee. Auch nochmal erklärt in diesem TikTok-Video. Toll umgesetzt von Brian Moore, Jay Schaul, Mike Kavouras und Chris Baker. (via Waxy)

Yamauchi No. 10 Family Office

Großartige Website zur Stiftung der Familie von Hiroshi Yamauchi, dem dritten und prägenden Chef von Nintendo, wie wir es heute kennen. Die Website huldigt seinem Lebenswerk mit hervorragender Pixeloptik und hörenswertem Spiele-Sound – und das, wie Craig Mod schon schreibt, überraschend semantisch. Die verantwortliche Agentur dahinter ist mount inc. aus Tokio. Chapeau! (via Daring Fireball)