Week of the 4/05/2021 - #14

29/03/2021

tech

Contents

tech

Sizecoding CSS demo
Tiny Markdown Parser
Revision 2021: ASCII/ANSI/PETSCII Compo

Sizecoding CSS demo

I’ve been thinking about doing some HTML/CSS/JS sizecoding. I’ve seen a couple of impressive JS 1K demos in the past and since I’m pretty proficient in HTML/CSS/JS I think it might be interesting to explore what can be done.

For starters I created this simple roto/zoom effect using only CSS:

<style>p{animation:p 3s infinite;width:100vw;
height:100vh;background:linear-gradient(gray 50%,#fff 50%)}
@keyframes p{0%,100%{background-size:9px 9px}
50%{transform:rotate(720deg);background-size:99px 99px}}
</style><p>

YouTube video of the effect

Some screenshots:

CSS Rotozoom 1 CSS Rotozoom 2

It’s not particularly pretty but shows how using animations + CSS you can create a simple effect in 217 bytes. I need to explore a little more this idea and see if I might be able to create something nicer in 256 bytes or 1k. I found a couple of places with intersting CSS effects:

CSS3 Patterns Gallery - This site has backgrounds generated with only CSS
Animista.net - This site has a lot of CSS animations and you can extract the minified CSS for them
Animating a CSS Gradient Border
The Power of CSS – Una Kravets / Front-Trends 2017 - Very cool filter effects. From the YouTube description: “This talk will go over some of the superpowers of CSS. From fauxtoshop to recreating common UI elements, or querying for browser information via at-rules, CSS supertricks offer control and new capabilities.” / You can find the slides of her talk on her GitHub page
Text Effect - Very cool CSS text effects.

I think by using CSS animations + a nice ogg / webm loop in an

Some other cool HTML/JS/CSS demos

These are 1k:

Matraka
BLCK4777
Voltra - breakdown incomplete but at least something
Particle Party by HellMood + Desire [src]
Monospace - breakdown in this blog post
256b audio example - breakdown here
HBC-00019: Fluid Dynamics 101
LRNZ SNGLRT - Nice sound!
Many more 1k here

These or other smaller ones:

Tea Storm - 256 bytes JavaScript signed distance field raymarcher using 2D Canvas. TEA STORM won at Function 2013. Break down here

Tea Storm demo screenshot

Blookdstream - 256b Javascript
Mandelbrot Rotozoom - Many people did fractals renderers in Javasript in 256 bytes, but no one ever made one that zooms and rotate… until today.. Breakdown here
Mini World - a small rotating world map inspired by this dwitter

Some ideas to explore:

Use data attributes with BMP images which are minimal in size. See here for more information
See if GIF is smaller: Wikipedia GIF article
Smallest possible size of many types: Github repo
Test <audio> tag with loop and a short mp3 in data:
Check out these dwitts: https://www.dwitter.net/d/22172, https://www.dwitter.net/d/888, https://www.dwitter.net/d/1231, https://www.dwitter.net/d/676, https://www.dwitter.net/d/933, https://www.dwitter.net/d/7702

Tiny Markdown Parser

Need a very small markdown parser? Look no further! mmd.js is what you need! To use simply do:

<script src=mmd.min.js></script>
<script>
  console.log( mmd('Markdown is **sweet**') );
</script>

That’s it!

Revision 2021: ASCII/ANSI/PETSCII Compo

Here are some of my favorite productions presented in Revision 2021 from this compo:

Nazi-sceners-fuck-off.asc by LMN
NFO4Revision2021 by Nightmare/Nuance

NFO4Revision2021

Together by Fuzion/Neokortex
Exodus Infofile for TRSI by H7/TRSI & Accession & The Boys
Nanakorobi Yaoki by Luisa/Poo-Brain ^ Rabenauge

Nanakorobi Yaoki ANSI ASCII

Here and here are the results.

This are some ideas that I liked from revision ASCII/ANSI/PETSCII productions from Revision 2021:

This is from an Amiga production. I like the use of / and \:

    /\ s c i i


    \/\| i l L

    b e   b a c |<


      '
     ''
     '''
     '''
    '''''

From Party Ascii Collection:

@BEGIN_FILE_ID.DIZ
         ____/\ ____.    _ _____/\
    .___/  _ //___  |_____ ___   \\
   _|_  \__ \/    \ _     \_ /     \ ___
_._\__\ __________/_|______/_______//__/_._
 |                                       |
 |      ShRiMPS dESiGN   bRiNGS   A      |
 |     PARtY ASCii COllECtiON fOR thE    |
_|_ REViSiON PARtY 2o21 .... bY YOP/Shd _|_
 `/_____________________________________\'
@END_FILE_ID.DIZ

César Miquel