SynthelicZ Dark Mode Gallery
2025
HTML5, CSS3, JavaScript ES6+
Modern Web Development, Dark Mode Design, Responsive Layout
A stunning dark mode photo gallery with glassmorphism effects, smooth animations, and responsive design. Features include theme switching, keyboard navigation, and modern UI components.
Legacy Modernization Project
2006-2025
JavaScript, CSS, HTML
Code Modernization, UI/UX Design, Cross-browser Compatibility
Complete modernization of a legacy photo gallery application from 2006. Transformed old-school JavaScript into modern ES6+, replaced table layouts with CSS Grid, and added stunning dark mode with glassmorphism effects.
My very first "Hello World" (MegaDuck)
1994
MegaDuck BASIC
Output to Display
This was my very first "Hello World" I've coded ever. On this play&learn computer for kids, I spent hours and hours of displaying turtle like graphics with a BASIC like dialect.
I even found a way into the firmware by producing a heap overflow which overwrote the protected interrupt table thus letting me enter into the secret BIOS menu.
Now it's only a bare PCB in my personal hall of fame.
The first "Hello World" (Schneider CPC6128)
1995
Schneider BASIC 1.1
Output to Display
This was the first get-in-touch with a Schneider CPC 6128 personal computer.
Though it wasn't really a "Hello World" more sort of a show nice graphics and beep testimonial.
On this thingy I wrote a MegaMan clone and lots of graphics demos.
Screenshot
Screenshot
First "Hello World" in Q-BASIC (IBM PC)
1996
Q-BASIC 1.1
Output to Display, Graphics, Music, Sound, Game development
This was the first "Hello World" written in interpreted Q-BASIC under MS-DOS.
The era with Q-BASIC lastet heavily for several years, as I programmed tons of graphic
demos, sounds, games and shells like a norton commander clone, viewers for several file
formats and more. I started by developing mods of the for this time famous Gorilla and Nibbles
from Microsoft.
"Hello C64" in C64-BASIC (Commodore C64)
1996
C64 BASIC v2
Output to Display
From a buy-used store I got my first C64 from Commodore. One more thing of hardware that was worth playing around
with it. On this platform I was forced to learn some dirty memory tricks and 6502 Assembler.
I even cloned the game "Superball" from the breakfast television because my family wanted to play
but was never called back on the telephone.
VGAEdit / VGAMaus
1996
Q-BASIC 1.1 / Power BASIC 2.3
Pixelediting
Mouse movement under DOS
BMP File Format
Mouse movement under DOS
BMP File Format
The VGA Editor was created because I had the need for developing sprites in a fast and easy way.
Though I did not had any software that met the specific needs of Q-BASIC, I developed my own.
When I started with this editor it was still in 80x50 text mode to allow editing pixel by pixel.
The first supported sprite resolution was only 12x20 pixels which was enough for most of the games I wrote
because in 320x200 cololr modes you don't have that much pixels available to fill the display at all.
As I progressed understanding SVGA and VESA standard, as well as x86-Assembler and machine language,
I had the need for even bigger sprites which led me to rewriting the text-mode application and transfer
it into VGA-graphics at 640x480. The Sprite size was now something at 128x64, a big improvement.
The first versions did not had mouse support under DOS, but Assembler was a nice way to go here,
though it was real machine language that was used to finally store the needed opcodes in int[]-Arrays.
Because of the mouse support the next version was called "VGAMaus".
Both programs served me well for a long time because of their ability to store graphics data in two different
file formats: RAW (which was abbreviated .VGA in the program) and BAS (native BASIC source code to embed the sprites
directly in the code).
One of the last additions to this software was an import routine for Microsoft Bitmaps (.bmp) which worked only for bitmaps with no more than 16 colors, by design. When I developed the first real SVGA library for BASIC under DOS, I also added loading routines for the sprites which were created using VGAEdit/VGAMaus.
ScreenshotOne of the last additions to this software was an import routine for Microsoft Bitmaps (.bmp) which worked only for bitmaps with no more than 16 colors, by design. When I developed the first real SVGA library for BASIC under DOS, I also added loading routines for the sprites which were created using VGAEdit/VGAMaus.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Nettalk v1.0
1997
Q-BASIC 1.1
Network Drives
Network Files
File operations in Coop-Mode under DOS
Remote Control under DOS
Network Files
File operations in Coop-Mode under DOS
Remote Control under DOS
Nettalk is a software that I developed from the needs the chat with each other in the
informaticas class. The school network was entirely Novell Netware based and lacked the
ability to enter a chat room and talk to other pupils. Because the local TEMP-folder was
mapped to the file server, I decided to use that as a base for my messages.
The first versions were bundled with a batch file whihc loaded the Q-BASIC interpreter and started
the source code. They did not had any installation or configuration routines, even their IDs were
hardcoded. But you could choose your display name of course :D.
DUNE ST2
1997
Q-BASIC 1.1
Mouse Movement under DOS
Machine Code in Q-BASIC
PixelArt (16 Colors)
Sprites
Machine Code in Q-BASIC
PixelArt (16 Colors)
Sprites
This was written as part of a Dune5-Project. It was possibly to use the mouse
to place all buildings from the game and ran fluidly on the 80486 at 40MHz in
Q-BASIC.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
AQUANOID
1997
Q-BASIC 1.1
Breakout algorithm
Game programming (QB/DOS)
Automatic Ball Movement
Game programming (QB/DOS)
Automatic Ball Movement
This was my first and only Aquanoid-Clone. More a proof-of-concept
than a real game but it worked as intended. Everything was working from the game start
till the Game-Over, though it had no highscores anyway.
The objective is simple: try not to get the ball down the lower bound of the screen and hit every visible block on the screen with it.
When every block was gone, the level started again, with sound from the PC speaker to get the nights over.
ScreenshotThe objective is simple: try not to get the ball down the lower bound of the screen and hit every visible block on the screen with it.
When every block was gone, the level started again, with sound from the PC speaker to get the nights over.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
3D-Algorithm
1998
PB3.5 / DOS
SVGA-Graphics(VESA)
Assembler and PowerBASIC - the unholy alliance
Bitmap-Files as Textures
3D-Arithmetics
Assembler and PowerBASIC - the unholy alliance
Bitmap-Files as Textures
3D-Arithmetics
This code was the first of it's kind which used a proprietary 3D-engine I made.
It's using most of the routines I wrote in my SVGA-library. This library was partly
written in PowerBASIC and partly in x86 inline-Assembler. Displaying 3-dimensional objects
is archieved by using 1pixel sized-voxels which are then rotated and translated in the
3D-space. It could load Microsoft-BMP files and use them as textures.
Screenshot
Screenshot
Screenshot
3D-Algorithm v2
1998
PB3.5 / DOS
SVGA-Graphics(VESA)
Assembler and PowerBASIC - the unholy alliance
Bitmap-Files as Textures
3D-Arithmetics
Code-Optimization
3D-Vectoroperations
Assembler and PowerBASIC - the unholy alliance
Bitmap-Files as Textures
3D-Arithmetics
Code-Optimization
3D-Vectoroperations
This one was an advanced version of the first 3D-engine which used lines wherever
possible to get even better performance. All edges were displayed using lines instead
of single points thus saving lots of calculations. Because of the gained speed, more
complex objects were possible now.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
NettalkP v10.0
1999
Power BASIC 2.3
Network Drives
Network Files
File operations in Coop-Mode under DOS
Remote Control under DOS
Hidden Tasks under Win9x Windows Scripting Host
Kernel Calls under Win9x
Installation Routines under DOS
BMP File Format
SVGA-Graphics(VESA)
Network Files
File operations in Coop-Mode under DOS
Remote Control under DOS
Hidden Tasks under Win9x Windows Scripting Host
Kernel Calls under Win9x
Installation Routines under DOS
BMP File Format
SVGA-Graphics(VESA)
This was the last version of Nettalk. Since I started this projects, lots of things
had been going on. The current version was more optimized and compiled now instead of
interpreted. It was supporting Windows9x and could do remoting, restarting the PC and block
it if instructed to do so. Therefore an administrator could do more than just chatting,
but instead execute lots of commands on each remote machine. The colors could be changed,
memory load could be shown, users could be kicked and banned. Much was improved but due
to reduced license selling and the upcoming dead of MS-DOS, the development also died with version 10.0.
Rest in Peace my old Friend !
Rest in Peace my old Friend !
VTEXT
2000
Power BASIC 3.5 (PB/DOS)
VideoText
Chardrawing in Graphics Mode
Chardrawing in Graphics Mode
When I was in school at former times, there was the possibility to save data streams
onto VHS-cassettes. These streams were saved on the normally invisible overscan area
of the picture. My goal was to save data streams there and making them visible again.
There were no specifications or anything to work with he given hardware but a tool,
which could only write probrietary text streams. So I had to reverse engineer was
it was doing and do this myself. So my code took it even further and allowed reading and
writing any kind of stream, interpreted the control characters in the text streams and showed
the pages on the screen. Only the old driver was used to access the VHS-recorder under DOS.
Screenshot
Screenshot
Screenshot
Screenshot
Tetrix / 3D-Tetris
2001
Power BASIC 3.5 (PB/DOS) / Assembler
SVGA-Graphics(VESA)
Assembler and PowerBASIC - the unholy alliance
Bitmap-Files as Background
3D-Arithmetics
Assembler and PowerBASIC - the unholy alliance
Bitmap-Files as Background
3D-Arithmetics
Based on my former experiences with the 3D-programming, I told my pupils
how to write a 3D-wireframed tetris-clone under DOS using SVGA graphics.
I taught young individuals from three schools and showed them how to code.
On the left side you can see a three-dimensional version of the upcoming tile.
The remaining game part is equal to every existing tetris.
It was a lot of fun to discuss every piece of code and seeing how the pupils progressed farther and farther. The extended features of PowerBASIC under DOS, especially the VESA graphics standard which we used through Assembler pieces where very hard to taught. Functions for calculating sine and cosine were also written in Assembler because they were needed very often in the 3D-rotations and were very slow in BASIC.
The source code uses my SVGA library and is fairly functional.
Greetins to any of the AG-members of former times. It was a really nice and funny time with you in 5 years. Thanks that you listened to my ideas. I hope I could've turned at least some of you into great coders.
ScreenshotIt was a lot of fun to discuss every piece of code and seeing how the pupils progressed farther and farther. The extended features of PowerBASIC under DOS, especially the VESA graphics standard which we used through Assembler pieces where very hard to taught. Functions for calculating sine and cosine were also written in Assembler because they were needed very often in the 3D-rotations and were very slow in BASIC.
The source code uses my SVGA library and is fairly functional.
Greetins to any of the AG-members of former times. It was a really nice and funny time with you in 5 years. Thanks that you listened to my ideas. I hope I could've turned at least some of you into great coders.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
ELIZA
2002
Power BASIC 3.5 (PB/DOS) / LISP
Artificial Intelligence
FuzzyLogic
FuzzyLogic
Based on stone-old code of the ELIZA in LISP, I implemented a version written in Power BASIC.
Being more than just a proof-of-concept, ELIZA was a real neat party gag. Even in the
IT-class it was easily possible to entertain people with it.
ELIZA is solely based on a keyword state-machine from which it generates her answers. Because of the english grammar it is really easy for a computer program to generate sentences using whatever the user enters without really understanding the meaning of it.
ELIZA is not really intelligent or smart but bound to her limits by Fuzzy-Logic. She's using therapists-like questions to force the user to tell me about himself thus having a fascinating "someone-listens-to-me" effect on the people.
The program changes the facts from the user by using the language syntax and reflecting it back to the person in front of the screen, thus posing questions in her very own way.
ScreenshotELIZA is solely based on a keyword state-machine from which it generates her answers. Because of the english grammar it is really easy for a computer program to generate sentences using whatever the user enters without really understanding the meaning of it.
ELIZA is not really intelligent or smart but bound to her limits by Fuzzy-Logic. She's using therapists-like questions to force the user to tell me about himself thus having a fascinating "someone-listens-to-me" effect on the people.
The program changes the facts from the user by using the language syntax and reflecting it back to the person in front of the screen, thus posing questions in her very own way.
Screenshot
Screenshot
»SynthelicZ« Extended Console for CS1.5 v1.2
2003
PERL5.6
GUI Design(Perl/TK)
File operations in Coop-Mode(Perl)
Cooperation with the Half-Life-Engine
Half-Life/Counter-Strike Scripting Language
File operations in Coop-Mode(Perl)
Cooperation with the Half-Life-Engine
Half-Life/Counter-Strike Scripting Language
This is an extended console for the famous video game "Half-Life".
Though the game already has an own console, this enables the user to do even more things while playing.
It is possible to query the cheater-database for all users on the server and report who's has cheated lately.
The application also enables the user to tell others what music he's listening to while gaming and how the stats
on other servers are. The possibility to find known players on all servers around the world was also a nice
addon.
A script injected this console into the native one thus allowing the user to enter new commands and even bind them to keys.
Technically invocation of a command triggered the creation of a log file which was then parsed and processed. The answers of a request were written back into a script file which was than automatically executed by the game. The results could be seen on the screen, posted to other users on the server or heard via in-game sound/voice.
Main functions included cheat-reporting like in "Cheating-Death", background music, different voice-scripts, stats-lookup and mate finding on all servers.
ScreenshotA script injected this console into the native one thus allowing the user to enter new commands and even bind them to keys.
Technically invocation of a command triggered the creation of a log file which was then parsed and processed. The answers of a request were written back into a script file which was than automatically executed by the game. The results could be seen on the screen, posted to other users on the server or heard via in-game sound/voice.
Main functions included cheat-reporting like in "Cheating-Death", background music, different voice-scripts, stats-lookup and mate finding on all servers.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
»SynthelicZ« Homepage
2003
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS) / PHP
Dynamic Content(JS)
Webdesign
User management(JS)
Applications(JS)
File modifications(PHP)
JavaScript/PHP Remote Procedure Call
Plain Text Files as Data Source(JS)
Webdesign
User management(JS)
Applications(JS)
File modifications(PHP)
JavaScript/PHP Remote Procedure Call
Plain Text Files as Data Source(JS)
This was the first web-page of project »SynthelicZ« as well as the Counter-Strike
Clan [>SynthelicZ<]. The poll and the link list were created by using JavaScript. The
member area and the clan war area were navigatable through execessive use of javascript, too.
When adding news, members, etc. a PHP script was invoked which in fact generated more JavaScript-Code
on the server or changing the existing code. Thus it was possible to change a script file with
JavaScript on the server side. I used techniques which are now known as AJAX to the mass but at this
time, this was not achievable by using XmlHttpRequest objects, so I took IFRAMES to do the magic.
The site had an internal area where user could login to write news etc. The passwords and usernames
were hashed and saved in JavaScript files, too. When a user managed to login successfully, a cookie was
set which also cached the access rights in the form of flags. The design was cooperation with Naii'Ra Tee.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Webview Matrix
2004
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS) / Windows Scripting Host (WSH)
Windows-Webviews
This is a Webview which I used to replace the existing one in Windows 98.
In this project I made my first experiences with the objects and classes which were only
available to Webviews. Furthermore, a cross-over between WSH and JS was possible which leds to
interesting features.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Webview Design 26
2004
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS) / Windows Scripting Host (WSH)
Windows-Webviews
Binary Files threated as Text Files(JavaScript)
File Type AVI
File Type BMP
File Type MP3
File Type JPG
File Type GIV
File Type WAV
Document Object Model
Config-Files(JavaScript)
Binary Files threated as Text Files(JavaScript)
File Type AVI
File Type BMP
File Type MP3
File Type JPG
File Type GIV
File Type WAV
Document Object Model
Config-Files(JavaScript)
This was the second Webview for Windows 98. But this time I spend a huge amount
of time to get it much more powerful. It could read several file types and shows
detailed information about the given types. It also showed verbose in-detail information
about the file system and the drive usage. It could calculate LFN entry-sizes, show interpret/artist etc.
of MP3-files, resolution/colors of images, length/frames/dimension of video files.
The biggest problem was to read binary files using the "OpenTextFile"-function, because no
"OpenBinary"-or something similar existed in the script world.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
»SynthelicZ« Clanpage
2004
HTML / PHP / Document Object Model (DOM) / Cascading Style Sheets (CSS)
File Upload(PHP)
Plain Text Files as Data Source(PHP)
Plain Text Files as Data Source(PHP)
This page was developed to give the Counter-Strike Clan of Project »SynthelicZ«
a new look-and-feel. The page supports add-ins like the picture of the week and did not use
any content management system from the market. It was developed hands-in-hands with Stormy.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
»SynthelicZ« Transferpage
2004
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
none
This transfer page was online when time had come to transit to a new page.
During a maintenance time of four weeks, the visitors had to be glad to see this page.
Screenshot
Screenshot
»SynthelicZ« Homepage
2004
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
Window-coding(JS)
Eventhandling(JS)
Cross-Browser(JS)
Dynamic Design(JS)
Dynamic Skinnable Elements(JS)
typical GUI-Elements (Icons, Windows, Desktops)(JS)
Extended Objects(JS)
Eventhandling(JS)
Cross-Browser(JS)
Dynamic Design(JS)
Dynamic Skinnable Elements(JS)
typical GUI-Elements (Icons, Windows, Desktops)(JS)
Extended Objects(JS)
This is project was both, a proof-of-concept and a full-featured GUI with virtual
storage devices. There are applications which are presented in IFRAMES or DIVs depending
on whether they are modules or real apps. The whole page is modular which allows loading
needed code at runtime instead of page-load.
There is also a lot of content belonging to Project »SynthelicZ«, and the CS-Clan.
ScreenshotThere is also a lot of content belonging to Project »SynthelicZ«, and the CS-Clan.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Terrorhuhn
2004
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
Sprites(JS)
Event-Handling(JS)
Mouse-Collision-Detection(JS)
Games programming(JS)
Event-Handling(JS)
Mouse-Collision-Detection(JS)
Games programming(JS)
This Moorhuhn-Clone is the answer to the question: is it possible to write such stuff
in a 30 minute break. I wrote it when I was at T-Systems in my TODO: Ausbildungszeit.
A colleague of mine bet that it isn't possible, so I owed him an example.
There is no highscore-list or main menu, but the simple principle is working fine.
I focused mainly on the main game. I used three graphics from GoogleImages and that's it.
It would have been easy to add the missing things but I didn't put any effort into it after
the break was over.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Intranet Gruppenseite
2004
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
Event-Hanling(JS)
Dynamic-Content(JS)
Dynamic-Content(JS)
This page was developerd to show-off the two AZUBI-groups in the Telekom intranet.
The main theme was the "Tresor" which was chosen by the groups und realized using
JavaScript by myself. On the upper edge there is a menu which displays the names of
the groups' members. It could be scrolled using the white arrows on the left and
right side of the menu. There is also a little icon which can be found which distinguishes
both groups from each other. When the mouse is moved over one of the names, a face of the given
person is displayed on the lower edge and fades away when the mouse moves away.
Clicking on a name or scrolling through them using the arrow icons, opens the safe and displays
information about the chosen person. Depending on the group the given person is in,
the safe either opens on the left or on the right side of the screen, showing information,
photos and similar stuff. At the end of each information block, there is a link to each persons
home page. If this is clicked both doors open, letting the whole screen being able to be used by
the page. There are also two "Top Secret" documents which are transparently shown under the pages.
I had to remove the content on the screenshots because of data security reasons.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
JSP-Login and Webshop
2005
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS) / Java Server Pages(JSP)
Java Beans
SQL Connection(JAVA)
Java Server Pages
WebShop(JSP)
SQL Connection(JAVA)
Java Server Pages
WebShop(JSP)
This was developed when a JAVA-lesson took place where the basic concepts of the language
were taught to me. I just tested some stuff and this is why this little login-modules
with a database connection was born. One day later, it was a little web shop. The images of
the items are not shown on the screenshots because of a bad tomcat configuration. On the
original server, everything worked fine.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
ICS/ICFW Portmapper
2005
Windows Scripting Host (WSH) / Visual BASIC Script (VBS)
Windows Network Libraries(VBS)
Windows Internet Connection Sharing(VBS)
Windows Internet Connection Sharing(VBS)
This script was developed because Windows XP was unable to allow me
to configure whole port ranges for the firewall. You had to do it
one after another if you wanted this. I didn't want to bring 1000
ports into life by hand, so this script was needed.
It instantiates some ActiveX objects from Microsoft and uses them to
insert each port into the firewall exclusion list. It is able to
add and remove single ports and whole ranges. For someone like me
who has to open or close a hundred ports for some time, this is a
real help.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
»SynthelicZ« Designstudie
2005
HTML / Cascading Style Sheets (CSS)
WebDesign
This is nothing more than a design study. A friend asked me to test something
like this on an exmplary »SynthelicZ« page and this was the result.
I came to the conclusion, that this looks like most of the clan pages in the net,
but was definately not the design decision of the Project »SynthelicZ«.
Screenshot
Screenshot
Screenshot
Screenshot
»SynthelicZ« window study
2005
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
Pixel by Pixel Layout
This time the task was to clone an explorer window pixel by pixel and making the right part
usable for navitgation. So it is possible to show dynamic content through JavaScript and
getting back by use of the Back-Button on the upper left. Everything was filled with content
and send in as a request. It was approved by the administrator and used in the intranet.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
DIVX Calculator
2005
Power BASIC 3.5 (PB/DOS)
DIVX Rate Calculation
Dieses Programm schrieb ich, um eine Anzeige über mögliche
Bitraten von Filmen einer bestimmten Länge zu bekommen. Es
errechnet die Bitrate eines Videostreams in Abhängigkeit zu
seiner Länge, bezogen auf bestimmte Größenangaben, zB eine CD.
Beim Start kann man eine Filmlänge in Minuten angeben, die
dann ebenfalls berechnet und in der unteren Tabellenzeile
angezeigt wird. Links sieht man die einzelnen Filmlängen,
während oben die Grenzwerte zu sehen sind. Die Werte in der
Tabelle geben an, wie hoch die Bitrate des Films sein muss,
damit seine Gesamtgröße genau innerhalb dieses Grenzwertes
liegt. Die Farben zeigen an, wie gut die Bildqualität bei
dieser Bitrate noch ist. Dabei kann man davon ausgehen, dass
alles was grün oder blau ist, recht gut aussieht. Hellrot sind
Bitraten, die über 15000kBit/s liegen, was wohl eher
Verschwendung von Speicherplatz ist. Richtig fies sieht das
Bild meist bei den braunen und dunkelroten Bitraten aus, denn
da nehmen die Blöcke schon überhand. Gelb ist die
durchschnittliche Qualität einer VCD/SVCD. Man kann sich mit
dem Cursor durch das Feld bewegen und erhält unnten die
genauen Werte angezeigt. An Stellen wo n/A in der Tabelle
steht, müsste die Bitrate des Videos negativ sein, da bereits
der Audiocodec mit 224kBit/s zu Buche schlägt und den
gegebenen Speicherplatz ausschöpft.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
JavaScript Water Effects
2006
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
Microsoft Filter and WebDesign
In dieser kleinen Demo ging es eigentlich nur darum einen
aufwendigen Effekt mit Hilfe der Microsoft Web Filter zu
generieren. Ist zwar nur auf dem IE bzw. Browsern mit der IE -
Engine lauffähig, für diese Demo war allerdings auch nicht mehr
von Nöten. Geschrieben habe ich dies, nachdem mich in der
BBi jemand gefragt hat, ob es denn generell möglich sei einen
wasserähnlichen Effekt mit JavaScript in Echtzeit zu
generieren. Hier ist das Proof-of-Concept dazu.
Screenshot
Screenshot
»SynthelicZ« Extended Console for CS1.6 v2.0
2006
VBS / HTML4.01 / CSS / JS2.0 / WSH5.6 / DOM
File Operations in Coop-Mode(WSH/VBS)
Cooperation with the STEAM-Engine
Half-Life/Counter-Strike Scripting Language
Speech Synthesis with WSH/VBS
Half-Life/Counter-Strike Scripting Language
Speech Synthesis with WSH/VBS
Dies ist eine zusätzliche Konsole zu der in der Half-Life
Engine bereits vorhandenen. Sie ermöglicht dem Spieler neue
Befehle in der HLConsole, welche diese dann über eine Datei an
meine Konsole weitergibt. Die SZXC bearbeitet diese daraufhin
und liefert ihre Ergebnis wieder in Form einer Datei an die
HL-Engine zurück. Nun bekommt der Spieler noch mittels
Sprachausgabe einen Hinweis und kann eine Taste drücken, die
einen Befehl ausführt, um das Ergebnis der SZXC im Spiel
dargestellt zu bekommen. Wichtigste Funktionen sind die
Ingame-Cheaterabfrage ähnlich Cheating-Death und die
Stats-Abfrage des zum Spieleserver gehörenden Stats-Servers.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
PHP Webshop
2006
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
MySQL Database Connections(PHP)
User Management(PHP)
WebShop(PHP)
User Management(PHP)
WebShop(PHP)
Dieser WebShop entstand in der Berufsschule innerhalb eines
2-mann kleinen Entwicklungsteams. Das Modul für die
Benutersessions ist nicht von mir sondern von tinitram. Das
ganze ist ein Auktionshaus, wie ebay-nur kleiner. Prinzipiell
liegen sämtliche Produkte und Benutzer in einer SQL-Datenbank.
Es gibt kein Design der Oberfläche, daher dieser Nur-Text-Look.
Dafür war eine dritte Person gedacht, jedoch war diese
innerhalb des Projektzeitraums von gerade mal 2 Wochen krank.
An diesem Projekt lässt sich sehr gut ein mehrschichtiges
modulares Konzept erkennen, dass im Fachkonzept auch als
solches bezeichnet ist.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Isometric JavaScript Engine(beta)
2006
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
Isometric graphics engine(JS)
Staggered Maps(JS)
Staggered Maps(JS)
Dies ist ein Projekt an dem ich zur Zeit arbeite. Es soll eine
Spieleengine in JavaScript werden, die die Spielfläche als
Isometrische Karte darstellt, ähnlich wie Civilization oder
Diablo. Eventuell wird das ganze mit Karten in Plain Text
Files funktionieren. Mal schauen, ob es bei einer Studie,
einem Proof-of-concept oder einem beliebten MMORPG endet.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
JavaScript Process Kernel
2006
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
Virtual Processes(JS)
Ein als Proof-of-concept gedachtes JavaScript Kernel. Es kann
virtuelle Prozesse ausführen, entweder indem aus ein Objekt
erstellt oder eine Funktion aufruft. Natürlich kann es auch
Prozesse beenden und Nachrichten mit dem Prozess austauschen.
Ziel ist eine Mehrschichtarchitektur, die ähnlich wie in
richtigen Betriebssystemen mit Multitasking und GUI arbeitet.
Das alljährlich erneuerte GUI-System der
»SynthelicZ« Seite soll mit diesem Kernel und dem
Dynmischen JavaScript Lader zusammgeführt werden und so als
Arbeitsoberfläche für die Besucher dienen.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
»SynthelicZ« Transferpage
2006
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
Cross-Browser CSS
Dieser Transferpage war in der Zeit online, zu der gerade die
alte Homepage auf die neue umgestellt wurde. Dies dauerte ca.
2 Wochen, in denen die Besucher mit dieser Zwischenseite
auskommen mussten.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
»SynthelicZ« Homepage
2006
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
Window-coding(JS)
Eventhandling(JS)
Cross-Browser(JS)
Dynamic Design(JS)
Dynamic Skinnable Elements(JS)
typical GUI-Elements (Icons, Windows, Desktops)(JS)
Extended Objects(JS)
Virtual File System(JS)
ObjectViewer/-parser(JS)
Encryption methods(JS)
Tree-Parsing(JS)
Eventhandling(JS)
Cross-Browser(JS)
Dynamic Design(JS)
Dynamic Skinnable Elements(JS)
typical GUI-Elements (Icons, Windows, Desktops)(JS)
Extended Objects(JS)
Virtual File System(JS)
ObjectViewer/-parser(JS)
Encryption methods(JS)
Tree-Parsing(JS)
Mit diesem Projekt soll sowohl ein Proof-of-Concept geliefert
werden, als auch eine umfangreiche GUI mitsamt virtuellen
Datenträgern zur Verfügung gestellt werden. Außerdem ist ein
Verschlüsselungstool, sowie ein Objekt-Viewer enthalten.
Es gibt virtuelle Anwendungen, die in Form von IFRAMES oder DIVs
bereitgestellt werden. Das ganze ist zudem modular, so dass
im Betrieb Objekte eingeladen und verwendet werden können.
Natürlich findet sich auch allerhand Inhalt zum Project
»SynthelicZ«, sowie zum CS-Clan des Projektes.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
CSS Fensterstudie
2006
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
CSS Positioning
CSS Cross-Browser
CSS Cross-Browser
Bei diesem Projekt geht es darum visuelle Skins nicht wie bisher
über JavaScript, sondern allein durch CSS zu realisieren.
Dies soll einen Geschwindigkeitsgewinn in der nächsten
Fenster-basierten Oberfläche bringen. Außerdem soll
damit die browserübergreifende Engine zuverlässiger
arbeiten.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
»SynthelicZ« Askengine / D&D Characterhelper
2006
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
Dynamic Rulesets
Dynamic Content
Dynamic GUI
Mix of local and web content
Cross-browser
Dynamic Content
Dynamic GUI
Mix of local and web content
Cross-browser
In Ahnlehnung eines Charakterberaters für das Spiel
Dungeons&Dragons habe ich diese Fragebogen-Engine
geschrieben. Sie ist universell einsetzbar und kann mit den
verschiedensten Fragen und Regelwerken gefüttert werden, um jede
Art von Fragebogen zu simulieren und die Antworten des Benuters
auszuwerten. Sie enthält weiterhin einen Editor, mit dem
sich die Auswirkungen jeder Frage bearbeiten lassen, so dass
es mit wenigen Mouse-Clicks möglich ist einen Fragebogen
zu generieren. Der Charakterberater für
Dungeons&Dragons war das erste Regelwerk und der erste
Fragenkatalog für die Engine. Er dient dazu den jungen
Rollenspielern bei ihrer Wahl eines Charakters zu helfen, indem
er anhand ihrer Antworten auf die gestellten Fragen den
Charakter zusammenstellt, der ihnen am nächsten kommt.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Containermanager
2006
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS) / Active Server Pages (ASP) / VisualBASIC Script (VBS) / OracleSQL
Dynamic GUI
Parser
User management(ASP)
Parser
User management(ASP)
Ein Projekt hinter dem viel Arbeit steckt ist der
Containermanager. Er hat einige tausend Zeilen Quellcode und
wurde komplett mit einem Benutzermanagement, oder
Benutzerverwaltung, der Implementation von Gruppen und
Kategorien und umfangreicher Datenbankanbindung entwickelt.
Das Projekt kann jede Art von Daten darstellen, solange die
Datenstruktur einem gewissen Schema folgt. Grundsätzlich gibt
es eine hierarchische Struktur bei der Anzeige, die sich in
Ober- und Unterklassen teilt. Dabei werden die Oberklassen
durch die umrandeten DIVs dargestellt und die Unterklassen
als Blöcke innerhalb der Oberklassen. Der Containermanager ist
sehr flexibel und wurde auf den Screenshots als
Versionverwaltung verwendet. Ebenso wäre er geeignet alle
Computer eines Unternehmens zu verwalten oder eine übersicht
sämtlicher Server und den auf ihnen laufenden Applikationen,
die Auslastung derselben oder auch für ganz andere Dinge.
Ein Parser kann sogar Abhängigkeiten innerhalb verschiedener
Tabellen verfolgen und Datenblöcke farbig darstellen. Es
können sogar mehrere verschiedenartige Oberklassen auf einer
Seite dargestellt werden, die ebenfalls verschiedenartige
Unterklassen enthalten können. Dieses System kommt in einer
modifizierten Version momentan in der T-Systems zum Einsatz,
weswegen ich leider keinen Quellcode dazu veröffentlichen darf.
T-Systems verwaltet damit seine Server und ihre Applikationen
und stellt eine Verbindung zwischen Servern und Projekten bzw.
Umgebungen und Systemen her. Dort liefert der Containermanager
wichtige Aussagen darüber zu welchen Systemen welche Server
gehören und ob Server eventuell völlig unausgelastet sind.
Benutzer die das Tool benutzen können sich zudem ihre
Ansichten umsortieren und Datensätze ausblenden, die für sie
uninteressant sind. Bei der Entwicklung wurde peinlichst genau
auf CSS und HTML Konformität geachtet und auch "barrierefreies"
Benutzen für sehbehinderte Menschen ist möglich.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
»SynthelicZ« History
2006
HTML / JavaScript (JS) / Document Object Model (DOM) / Cascading Style Sheets (CSS)
Dynamic GUI
Cross-Browser
Text-Browser compatible
Tableless Design
Cross-Browser
Text-Browser compatible
Tableless Design
Um meine History und meine Referenzen benutzerfreundlich
umzusetzen und trotzdem eine JavaScript-freie Version darbieten
zu können, wurde diese Seite erzeugt. Sie dient einzig und
allein der Navigation durch meine persönliche
Programmiergeschichte und bietet auch mir selbst einen
Überblick was ich schon gemacht hab und was nicht.
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
Screenshot
ΤrαdeΜαster®
2010
C# 3.5 / C++
Financial Trading Systems, Distributed Systems, High-Performance Number Crunching, High-Performance Networking Sockets, Executable Self-Encryption, Very Large Databases
Diese Applikation findet selbstständig Regelmäßigkeiten in den
Forex-Märkten, berechnet daraus Handelsstrategien und erlaubt den
Kunden diese zu handeln. Das System besteht aus einem verteilten
redundanten Serverbackend, Backtesting-Servern, vielen Clients,
einem Front-End in WPF 3.5, einem eigenen Update-Mechanismus inklusive
einem verschlüsselten Loader. Alle Komponenten sind komplette
Eigenentwicklungen. Abgesehen von der Charting-Bibliothek wurden nur
Standardkomponenten von Microsoft eingesetzt.
Das interessante an diesem Projekt waren gleich mehrere Aspekte. Ich entwickelte eine Komponente die innerhalb der 2GB Prozessgrenze (3^15-1)*2 Möglichkeiten automatisch auf mehrere Jahre zurücktestete und brauchbare Strategien ausspuckte. Trotz der immensen Datenmengen gelang es das Backtesting innerhalb von zwei Tagen pro Währung zu berechnen. Zum Kalkulieren mehrerer Währung wurde es kurzerhand auf verschiedene PC's verteilt, so dass es linear skalierte.
Die Ergebnisse der Ein- und Ausstiege füllten schnell mehrere TerraByte, so dass auch der SQL-Server ordentlich Arbeit bekam. Also optimierte ich auch die Queries solange, bis sie weniger als zwei Tage benötigten, um die Statistiken vorzubereiten und die Strategien anhand von gewichteten Kennzahlen zu sortieren. Dadurch entstanden Strategien, welche nun sogar in Portfolios gefasst werden konnten.
Die nächste große Hürde stellte die (De-)Serialisierung der Serverobjekte auf einem Hochperformanten Socket dar. Nachdem bestehende Techniken als unzureichend bewertet wurden, entwickelte ich also einen Asynchronen Socket, welcher beliebig große Datenpakete weitestmöglich komprimieren, serialisieren und deserialisieren konnte. Um die Geschwindigkeit optimal zu halten, wurde auf den Einsatz von Reflection gänzlich verzichtet. Eigene ByteBuffer Klassen sowie multithreading und thread-sharing rundeten das Bild ab.
Das interessante an diesem Projekt waren gleich mehrere Aspekte. Ich entwickelte eine Komponente die innerhalb der 2GB Prozessgrenze (3^15-1)*2 Möglichkeiten automatisch auf mehrere Jahre zurücktestete und brauchbare Strategien ausspuckte. Trotz der immensen Datenmengen gelang es das Backtesting innerhalb von zwei Tagen pro Währung zu berechnen. Zum Kalkulieren mehrerer Währung wurde es kurzerhand auf verschiedene PC's verteilt, so dass es linear skalierte.
Die Ergebnisse der Ein- und Ausstiege füllten schnell mehrere TerraByte, so dass auch der SQL-Server ordentlich Arbeit bekam. Also optimierte ich auch die Queries solange, bis sie weniger als zwei Tage benötigten, um die Statistiken vorzubereiten und die Strategien anhand von gewichteten Kennzahlen zu sortieren. Dadurch entstanden Strategien, welche nun sogar in Portfolios gefasst werden konnten.
Die nächste große Hürde stellte die (De-)Serialisierung der Serverobjekte auf einem Hochperformanten Socket dar. Nachdem bestehende Techniken als unzureichend bewertet wurden, entwickelte ich also einen Asynchronen Socket, welcher beliebig große Datenpakete weitestmöglich komprimieren, serialisieren und deserialisieren konnte. Um die Geschwindigkeit optimal zu halten, wurde auf den Einsatz von Reflection gänzlich verzichtet. Eigene ByteBuffer Klassen sowie multithreading und thread-sharing rundeten das Bild ab.