robsite

In meins

robsite 6

Es ist Zeit für den alljährlichen Blogpost und das allsiebenjährliche Redesign der robsite. Jetzt ohne Kommentare und Sidebar! Dafür in schwarz, fast.

Diverse Projekte sind nun unter /projekte erwähnt.
In den letzten Jahren dazugekommen ist z.B. wootboard, die Alpha-Version eines (weiteren) Malprogramms. Mit Vektoren auf einer endlosen Leinwand zeichnen, editieren und am Ende leicht Teilen. Ähnlich jsfiddle.net, nur für Zeichnungen.

Die DVD Experience ist für alle, die schon immer mal das DVD-Logo genau in die Ecke fliegen sehen wollten. Mit Konfetti und Turbo-Modus.

In Zukunft werd ich die Seite wieder vermehrt als Erinnerungshilfe für mich benutzen und interessante Links und Codeschnipsel posten. Oder auch nicht.


Die robsite ist nun fast 19 Jahre alt, erstaunlich. Die erste (bzw. nullte) Version baute ich anno 2000 in einem Website-Baukasten, noch bevor wir Internet (ISDN) bekamen. Nachdem die ersten Bytes durch die Leitung tröpfelten lud ich sie zu xoom.com hoch, einem mittlerweile toten Konkurrenten zum mittlerweile toten GeoCities. Somit ist die Seite verschollen.

2001 dann war ich schwer mit Spieleprogrammierung in Dark-, Blitz- und PureBasic beschäftigt und sammelte Tutorials und Links, auf robsite.de.vu. Diesmal selbstgebaut, mit Frames und sogar CSS.

Später in 2001 kam das erste Redesign. Pixelgrafik, Spalten, Toplists und eigenes Forum. Die Seite nahm Fahrt auf.

Statisches HTML zu editieren macht keinen Spaß, drum gab's 2003 die dritte Version. Gleiches Design (plus 2 "Themes"), aber mit PHP 4 und MySQL generiert. Als Backend diente phpMyAdmin \o/
Die Seite hatte rund 5000 Besucher pro Tag, machte ein wenig Geld mit Werbung und wurde gar in der (mittlerweile toten) Bravo Screenfun erwähnt. Ein großer Erfolg.

Bis 2005. Google machte große Portalseiten mit Linksammlungen überflüssig, zumindest für mich. Die Motivation weiter Links anzuhamstern ging zurück, gleichzeitig war ich zunehmend mit Studieren beschäftigt. Somit begann die erste Content-Dürre, die bis 2008 anhielt.

2008 war ich begeistert von Ruby on Rails, Mac OS X und TextMate. Das erste Projekt war ein neues CMS für die robsite, nun Version 4. Mehr Blog als Portal und mit minimalem Design. Hat Spaß gemacht zu bauen.

Aber, wo das initiale Entwickeln in Rails Spaß macht, tun es die darauffolgenden Änderungen und Anpassungen an neue Rails-Versionen nicht. Gleichzeitig startete ich als freier Webentwickler und schielte auf WordPress, das viele Kunden bevorzugten. Unsicher, langsam, PHP. Aber das Backend ist nett, ich hatte ein neues Spielzeug und Anfang 2012 die robsite Version 5, mit text-shadow und sogar in responsive™.

Die aktuelle Version 6 sollte erst eine statische Seite werden. Gleichzeitig will ich ein komfortables Backend, kurze turn-around-Zeiten beim Editieren und es selbst hosten. Es gibt diverse Optionen, aber noch keine perfekte. Somit weiter ausprobieren und erstmal faul bei WordPress bleiben.

Soviel zur Geschichte. Bis 2020!

· meins, geschichte, relaunch, robsite ·

Lunicode ASCII Art

Jetzt neu auf Lunicode:

_____ _ _ / ____| (_) (_) | | __ __ _ _ __ _ __ _ ___ ___ _ __ _ | | |_ |/ _` | '__| | '__| |/ _ \/ __| |/ _` | | |__| | (_| | | | | | | __/\__ \ | (_| | \_____|\__,_|_| |_| |_|\___||___/_|\__, | __/ | |___/
"("I"*(((!(""((!!!!!!(!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!''''--'''''''''''''''- "z""(**((("*(!+(!!!(!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'!!!!!''''''''''''''''''''--''! """*((+"+((!+!((+(!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'''''''!''!!''''''''''---''!! "+*"""""""+(!***!!!!!!!!!!!!!!!!!!!!!*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'''''''!'''''''''''''''-...'!!! +*""""""+(*(""!!!!!((!!!!!(((*("+!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'''!!!!!!!!!''''''''''''''-...!!!!! """"""""*(""*((!*""""Iuj"**I(*("$"!!!!!!(!!!!!!!!(""!!!!!+!!!!!!!!''!'!!!!!!!''''''''''''''''--...!!!("3 "uI""""+""+((("jI"(""Iz%%$$3!!!!("""""zt"*(*u"u%"$J$#%!!!!!!!!!!'''!!'''!!!'''''''''''-''''''-.-!!("$$$$ t""""""""*"""t"*("3%3%$$$#$3*(!!""%$$$$33############$!!!!!!!''!''!!'''!!!!''''''''''--'---'!!*"3$$$$$$% """""""""""Ij"""tz""Iz"u%##$$$"z%$$$$$$########Q###(!!(!!''''''!!!!!''!!!!!''''''''''.-'!*"$$$$$$$$$%"(! """t"""""Ju""""I3j%$$#######$&"u$$$u$u$###$$####$(!""!!!!!!!!'!!!!!!!!!!!!!'''''''''!!!"$$$$$$$$z""(!!!' "It""""""$"""%$##$$$#######""u$###$%#$%###$###$!!""!!!!!!!!!!!!!!!!!!!!!!!'''''''!"3%%+""333""*!!!!!!!!% u""Izu"*"%3$###$$#########"$$###$"3$$#####3$t!*"*!!'!!!!!!!!!!!!!!!!!!!!!''''!"J##3$&%"(!!!!!!!!!!!!!u## """"z$$$$$###$#####$####$$$####%$$u$##j#Q%!!""(!'!!!!!!!!!!!!!!!!!!!!!!!!!!!%##$%#j"3"3"!!!!!!!!!!!u#### "Ij3%$#####$######I$####%#########%##($#%"3"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!"$$$$$$$%"I"%+!!!!!!!"####### ""3$#$#$$$%######$I##############%$#%""("%!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!''!!"$$$%I%$$+"""!!!!"$######### I%######$$$#######$##############$#$$$%""!!!!!!!!!!!!!!!!!!!!!!!!!'!!!'''''!!"$$##$$$#""+(!"&########### $#$######$##$######zI############$j$$3((!!!!!!!!!!!!!!!!!!!!!!!!!''''''''''!!(u$####$#$""(!"%########### ##########$##$######3*$########$"3%"!!(!!!!!!!!!!!!!!!!!!!!!!!!'!'''''''''''!!"$$####$#%!!!*############ $$##############$####(#####B##+"u"!!!!+!!!!!!!!!!!!!!!!!!!!!!!!'''''''''..--'!!3$#######+!!+############ 3###############$%J##$u#QB##"+t"!!!!!!(!!!!!!!!!!!!!((!!!!!!!!!'''''''-.-...'!!"%$######$!!($########### $###############%$#$##!#B#%+I"!!!!!!!!!!!!!'!!!!!!((!!!!!!!!!!!''''''''--....'!(3$#######(!!$########### ##################$####z$""j(!!!!!!!!!!"!!!!!!!!!!!!!!!!!!!!!!!''''''''-.-...-'!"$$#####$$!!$########### ##$$$######$##$###$##B#3j%"!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!''!!''''''-...-'!*&$#######!!I########### ##############&##$###$"3%!!!!!!!!!!!!!!!"%%j""*(!!!!!!!!!!!!!!!!!!!!!''''''.-'!!(%########"!+########### ###########$#$######3"%"!!!!!!!!!!!'!!"zt""j3%$$$$3"(!!!!!!!!!!!!!!!!!!''''!!!"t%#########$!!3########## ####$########3###Q#""I!!!!!'!!!!!'!("I""++"(!+IJ$$###$t(!!!!!!!!!!!!!!!!!"3$$$$%z%$$#######!!"########## ####$$##########Q$+3+!!!!!''!!!!!"$$$$$$$$##%$##$j%u333t"(!!!!!!!!!!!!!*Iz$$$##$###########!!u$######### #####$J$########%+j!!!!!!''!!!!&##################$"""""""((!!!!''''!+$####################!!j$######### #######$#######u"3!!!!!!'''!!j#############$!!(%####3"II""++!!!'-.'!$#####ju(3#############!!"$######### I#############3Jj!!!!!!'''!*$%$#####$$#$###$'.-'!$$3$33u"""+!!!'.-($$#$####"!($############(!+#$#$###### #############"%"!!!!!'''!(zzJ"""I%##%JI%$3!'-.'!("uJj3uu""""!!'..!3%""%$%3!!!"$############"!(#$######## #########Q##"%*!!!!!''!"%3"""""++""zuJ3"t+(!!!!!!!(""IjI"""+!!'..!!+""(""!!"3$#############"!!%#$####### ########B#$"%"!!!!!'!+$$3"""+"**(+++*"""u"""""!!!!(+tI""""""(!'.`'!!(""""Ij%$#$$$##########J!!"#$####### #########%"%"!!!!''!$$%3u""+((((!!!!((((((!!!!!!!!!"""""""""(!!.`-!!!!(*"""t33%%$$#########%!!"######### ########3"%"!!!!'!$#$%3jI"""*(!!!!!!!!!!!!!!!!!!!!(""+"""""""!!.`.!!!!!((""""Ij3%$#########$!!!$######## #######t"%"!!!''"###$33jt"""+((!!!!!!!!!!!!!!!!!!!(**+""""t""!!-..'!!!!(*""""""u3$##########!!!%######## ######I"3"!!!!!$###$%3uIIt""+*((!!!!!!!!!!!!!!!!!!((*++""""""(!'``'!!!!!(+"""""j3$##########!!*(######## #####u"3"!!''!#####$%zuI"""""++*(!!!!!!!!!!!!!!!!(*+"+"""I"""(!'.`.!!!!!(*"""""j%###########(!+!######## ####%"%"!'''"######$%3JI""""""*(((!!!!!!!!!!!!!!((""""""III""+!!.`.!!!!(*("""""u$###########"!*(u####### BB#$"3j!''!$#######$$%3I"""""""*(!(!!!!!!!!!!!!!(("""""""ujI""!!'.`'!!!(**""""I3$#######$###3!(!"#B##### BQ$"3I!''(######$##$$%3II""""""+*(((!!!!!!!!!!!(*"""""""Ijju""(!!.`.!!((**""""J$############$!!("######$ $3t%3(!!+#######$##$$%3uII"""""+++(((((!!!!!!!((+"t3z""""""I""+!!.`.!**((""""I3##############*!((3####$I !!!!!!!"########%##$$&3II"""""""+"+(((((((!!!!(**"I%I"""""""uj"(!'.'!***+"""I3$##############"!!*j##Q#%" !!!!!(##########%$#$$%3JuI""""""+"**(((((!!!!!!(*""u""z##$$$%3j"!!!!!(*+""""u$###############%!!""####"+ "+!!%###########z$#$%33uIII""""""+"**+(((((!!!!(((+"""I""""uzt+!!!!!!((""""I$#################!!"*$##3"+ "!!#############I$$$%3ujjIj"""""""""++**(((!!!!!(!(*++"""*!!(!!'!!!!((+""""$#########$########"!""$#$"+" !"##############3%$$%3jjIt""""""""""""+((((((!(!((((**+*(!''!!''!!!!(+*"""$##########$########$!(+$$3"+" ################%$%$%&zuI"""t""""""""""""+****((***((((!!!.'!!'''!!!+*"""%####################$(("$u"""" ################$$%$$%3uItt""""""""""""""""""""+"+++((!!!!!!!!!!!!!"""""3######################"!"%I"""" ###$############$#$#$$%3jt"tI""""""""""""3%3j"""""""t"tjIj""""IJt"z%"+"u#######################"!3"""""" ################$#$##$%3zI"III""""""""""I&&%$$$$%&3&%%%%%3I"""I3j"""""3########################%!"*"*"+* ################$####$$%33uzuIIt"""""+""+""tIIIIuI"""!!!!!!!!!!""+*""%##############$##########$!(("("** ######################$$%&333uuII""""""+"""""tjII"tt""*(!((((("*+(""$###############$#$####$###$!!(*!"(( #######################$$%%%33zuj""""""""""""""t"IjuujIt"I"""*(*+"j$###############$#######$###$(!+((+(( ########################$$$$%%33j"""""""""""""""""""""""""*(((+""u#################$###$###$####(!*!*+(( ##########################$$$%%3zII"""""""""""+(**(!!!!!!!!!((*+I##################%$#$#########(!(!"((( #############################$$$%3j"""""""+++((!!!!!!!!!!!!!((("###################%$#$#########!!!!"((! ################################$$3JII"""""*+(((!!!!!!!!!!!!(("$###################%$#$#########!!!!+((( ####################################$$%%3j""""+(((!!!!!!!!!*+"I$###################%$$$##$$#####!!!("""" ###############################$$$%3uI""t""""++!(!!!!!!!!!!!!!"$###################$$$$$##$#####!!!"3J%3 ############################$$3J"""t""""""""""*(((((((((!!!!!!!!!!!"$##############$$#$$##$$###$!*(I%zJ& ###########################$$&zII"IIt""""""""""+*"+"+++((!!!!!!!'''''!!"$#########$$%#$###$####$!+"It""" ############################$%zJuIIIt""""""""""""""""+*(!!!!!!!!!!'''''''!!"########$##########z!*"""""" ############################$%333jIt""I""""""""""""++*(!!!!!!!!!!!!!'''''''''!3#####$##########"!""***++ ######################$#####$%33uIIIjI""""""""""""""*(!!!!!!!!!!!!!!!!!'''''-.-!"###$##########!(""((*** ######################$$####$zzzuI33"""""""""""""++*(!!!!!!!!!!!!!!!!!!''''''....!"############!"""*((**

____________ < Excelsior! > ------------ \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || ||
· meins, ascii, lunicode ·

Lunicode

Mein neues Tool zum kunstvollen Verzwirbeln von Text.

Kopfüber, gespiegelt, creepified, leicht anders, mit Blubberblasen, Quadraten, runden Quadraten und Kapitälchen.

ɹǝqn̤ɟdo⋊, ƚ|ɘǫɘiqꙅɘǫ, ç̶͔̻͔̹͙͓̝̃͊͛r̷̛̙͖͑́̚e̵̝͋̂̈̒͝e̴̗͉͓̘̜̦̼̓͘ͅp̵͕̦̳̥̅͛̊ī̷̗̯͇̯͉̻̘̃f̴͍̙̂̌͝i̶͚̗͓͍̰̅̈́̾ȩ̴͓̲͎̲̞͗̏̾̀͛̇̋ͅd̴̢̨̖̻̩̂̽, Ӏҽìçհէ ąղժҽɾʂ, ⓜⓘⓣ Ⓑⓛⓤⓑⓑⓔⓡⓑⓛⓐⓢⓔⓝ, Q⃞    u⃞    a⃞    d⃞    r⃞    a⃞    t⃞    e⃞    n⃞, r⃣   u⃣   n⃣   d⃣   e⃣   n⃣    Q⃣   u⃣   a⃣   d⃣   r⃣   a⃣   t⃣   e⃣   n⃣ und ᴋᴀᴘɪᴛÄʟᴄʜᴇɴ.

Dazu kommt eine erlesene Auswahl der besten Unicode-Icons und Emoji:
┌( ಠ_ಠ)┘ ┌∩┐(◕_◕)┌∩┐ (/◔ ◡ ◔)/

All diese Tools gibt's zwar schon oft im Web, mein Ziel war aber, die jeweils beste Version zu bauen. So ist Lunicodes Flip meines Wissens nach das einzige, das Umlaute unterstützt. Auch Mirror fand ich so noch nicht.

Es war auch eine feine Gelegenheit mit neuen Webtechnologien rumzuspielen. Drum läuft es nur in modernen Browern (vornehmlich Chrome und Safari auf Mac oder iOS) und benötigt gute Unicode-Fonts.

Die Text-Funktionen hab ich extrahiert: Lunicode.js auf GitHub, unter MIT-Lizenz. Wer Verbesserungen oder Ideen für neue Funktionen und Zeichen hat, immer her damit.

· meins, tool, unicode ·

Robsite Nr. 5

Nach fast vier Jahren wird es mal wieder Zeit für ein neues Design. In HTML5 und mit Version für mobile Browser. Schön minimal, wie die Anzahl der Updates pro Woche :D

Die Seite läd nun im Durchschnitt doppelt so schnell. Halb soviele Requests, halb soviele übertragene Daten, jQuery per Google CDN und ein neuer besserer Server in Deutschland statt den USA, der mangels Ozean dazwischen allein 100ms bringt (und 13€ weniger kostet. Yay HostEurope).

Das Backend ist keine Eigenentwicklung in Rails mehr, sondern WordPress. OMGBLASPHEMIE! Jedoch. WordPress bietet alles, was ich haben will und ich hab keine Lust nochmal ein Blog-CMS zu schreiben. Been there, done that. Bleibt die Frage der Performance und Sicherheit.

Mit meinen zum Design passenden Besucherzahlen wird WordPress wohl zurechtkommen. Aber wie sicher WordPress auf Dauer ist, bleibt abzuwarten...

Und wer sich langweilt, kann die neue 404-Seite spielen.

Edit: Unbedeutende Änderungen zum Schutz anderer vServer :>

· meins, robsite ·

Gepixel 2

Cowbot
Rob-ot 3
· meins, pixelart ·

Gepixel

Rob-ot
Cubes
Escher Dreieck
Torte
Haus 1
Wassertransport 4
· meins, pixelart ·

/images/posts/0000/2494/einmannarmee_big.jpg

Ostprodukte
/images/posts/0000/2500/ostprodukte_big.jpg

/images/posts/0000/2506/bidibidibidi_big.jpg

Fineliner auf Heftrand, anno 2003, Doppelstunde Politische Weltkunde

· meins, drawing ·

kritzl update

kritzl-update

Über Weihnachten hab ich nicht nur Berge an Enten gegessen sondern auch ein wenig an kritzl, meinem kleinen Browser-Maltool/Forum, gebastelt. Neues:

User-Accounts
Wer seinen Namen unterm Bild sehen will, muss ihn nicht mehr länger ins Bild pinseln oder die Seite hacken. Man kann weiterhin anonym posten (was sich wohl auch nie ändern wird), aber mit einem Account wirds praktischer. Man sieht, welche Bilder man gemalt hat und... das wars eigentlich fast schon.

Benutzerkonten sind hauptsächlich gut, um auf ihnen später Funktionen zu basieren. Bewertung von Bildern, private Nachrichten, Moderatoren und so. Mal sehn. Eine weitere User-Funktion gibts aber schon:

NSFW-Filter
/images/posts/0000/2236/eded9f205f3aba29fe24ef12e65e6536_thumb.png Da anscheinend einige Kinder lustige Bilder malen und Pimmelzeug unschön finden, kann man jetzt unzüchtiges Bildgut melden, vom Admin (also mir) überprüfen lassen und auf Wunsch nur jugendfreie Bilder anzeigen lassen.

Das ist kein Jugendschutz und eh standardmäßig abgeschaltet, aber wer ungern Strichmännchensex sieht, braucht es nun nicht mehr (falls ich es rechtzeitig markiere :>). Da ich keine Bilder löschen werde, die nicht grad NPD/Kinderporno/BPjM-Propaganda sind, ist so eine freiwillige Selbstzensur eine ganz gute Lösung.

Radiergummi
In der Tat. Ab heute kann man Linien nicht nur malen, sondern auch löschen!
Zwar intern nichts weiter als ein weißer Stift, aber doch etwas netter, da man nicht mehr pixelgenau Weiß auswählen muss. Auch später praktisch, falls mal Bilder mit transparentem Hintergrund kommen.

RSS-Feeds
Für alle Bilder oder nur die eines Users.

Und
kleinere Bugfixes. Das Füll-Tool füllt nun auch an vertikalen Rändern ohne das ganze Bild vollzurotzen.

Viel Spaß damit :)

Und thx an lödwäg für einen Bugfix.

· meins, canvas, drawing, kritzl, tool ·

kritzl

In den letzten zwei Monaten hab ich mit dem HTML5 canvas-Element rumgespielt. Rausgekommen ist ein kleines Malprogramm mit einem Forum drumherum.

Man kann Bilder im Browser malen, sie auf der Seite speichern und auf andere Bilder antworten.

Es sollte gut in Firefox 3.5+, Safari 4+ und Opera 9.6+ laufen (in Opera nur etwas unschön, mangels runder Ecken und box-shadow). Internet Explorer User müssen erstmal draußen bleiben, sorry.

/images/posts/0000/2110/kritzl_big.png

Die Funktionen:

  • Freihand-Linien, geglättet oder nicht
  • Rechtecke mit runden Ecken
  • Ellipsen und Kreise
  • Linien
  • Flood Fill mit Toleranz
  • Eye-Dropper Farbwähler
  • Colorpicker mit Alpha-Transparenz
  • Undo/Redo mit Tastaturshortcuts

Mein Plan war am Anfang, nur das Malwidget zu veröffentlichen, sodass sich jeder seine eigene GUI basteln kann. Ein Mini-Bildeditor als Wordpress-Plugin oder grafische CAPTCHAs wären interessant. Das gab ich aber bald auf, weswegen der Code nun eher schlecht wiederverwendbar ist. Ne Doku fehlt auch, wer also Fragen hat, einfach einen Comment posten.

Ich nehm clientseitig jQuery, jQuery UI, ein modifiziertes jQuery.hotkeys und BrowserDetect. Auf dem Server läuft CakePHP mit ImageMagick zum erstellen der Thumbnails.

Das ist nur die erste buggy-pre-alpha-Version und meine Todo-Liste ist noch lang. Gut wären z.B. bessere Pinsel, Zoom, Maltools ohne Anti-Aliasing (für Pixelart), Auswahlwerkzeuge, beliebige Bildgröße, Filter, Layer, weniger Bugs, optionale Useraccounts, Bild-Bewertungen oder ein schnellerer Flood-Fill Algorithmus.

Über Bugmeldungen, Verbesserungsvorschläge und vor allem lustige Bilder würde ich mich freuen :)

· meins, canvas, drawing, kritzl, tool ·
Mastodon