senäh

17senäh und so…

Code Snippet Thumb

HTML/CSS/JS
25. Apr 2013
Kommentare: 0

Einfaches, selbstgebautes Drag&Drop für beliebige Elemente

Kategorien: HTML/CSS/JS | 25. Apr 2013 | Kommentare: 0

Die Anforderung war einen HTML-Container verschieben zu können. Ich wollte dafür aber nicht gleich überfrachte Frameworks wie jQuery UI benutzen. Auch wollte ich kein möglichst flexibles Plugin draus machen, da ich es wirklich nur für diesen einen Zweck brauchte. Deswegen habe ich Chris Coyiers Lösung abgewandelt.

Hier ist das Endprodukt: Weiterlesen →

JSConf.eu

HTML/CSS/JS
07. Okt 2012
Kommentare: 0

Live von der JSConf.eu 2012 – Tag 2

Kategorien: HTML/CSS/JS | 07. Okt 2012 | Kommentare: 0

Bacon und Spiegeleier! Whooohoo! Toller Start in den Tag. So langsam werden der Saal wieder voller. Vor ein paar Minuten sah das noch ganz anders aus. Der zweite Tag startet gleich mit einem für mich sehr heißen Thema: TypeScript. Könnte dies die erste compiles-to-JavaScript-Sprache sein, die für mich relevant ist? Ich bin gespannt. In ~30 Minuten geht’s los!

So sieht's aus, wenn man pünktlich ist...

So sieht’s aus, wenn man pünktlich ist…

Weiterlesen →

JSConf.eu

HTML/CSS/JS
06. Okt 2012
Kommentare: 0

Live von der JSConf.eu 2012 – Tag 1

Kategorien: HTML/CSS/JS | 06. Okt 2012 | Kommentare: 0

Hallo Freunde des gepflegten Internetstandards! Heute und morgen gibt es ein besonderes Leckerli von mir. Es ist 8:58 Uhr und ich sitze im Zug nach Berlin. Ziel meiner Reise ist nichts anderes als die JSConf.eu 2012. Die Fahrt ermöglicht mir mein Arbeitgeber. Vielen Dank an Mercateo an dieser Stelle :)

Ich werde im Folgenden während/nach jedem Talk den ich besuche ein kleines Update in diesem Artikel fahren. Das live blogging des armen Mannes, also. Meine Auswahl an Talks habe ich bereits getroffen. Vom allerersten und dem letzten abgesehen finden immer zwei Vorträge gleichzeitig statt. Den ersten einmal ausgeklammert (er beschäftigt sich nicht mit JS) geht es heute um 11:15 in der Alten Münze los. Sehr humane Zeiten also, weswegen ich ziemlich fit in den Tag gestartet bin. Die Messe kann von mir aus kommen! Auf der Agenda stehen u.a. einige Exoten wie Node.js+Arduinos=Roboter und es gibt Vorstellung von brandneuen Technologien wie TypeScript, welches erst diese Woche der Öffentlichkeit präsentiert wurde.

Seid ihr auch so gespannt? Na dann los!

Weiterlesen →

greensock logo

HTML/CSS/JS
23. Mai 2012
Kommentare: 0

TweenLite/TweenMax für JavaScript veröffentlicht – Yeehaa!

Kategorien: HTML/CSS/JS | 23. Mai 2012 | Kommentare: 0

Alte Flasher-Hasen wissen worauf sie sich freuen können: die Koryphäe aller Tweening-Frameworks findet ihren Weg nach JavaScript. Die Rede ist von der GreenSock Animation Platform (GSAP), besser bekannt als TweenLite/TweenMax. Nach meiner Erfahrung ist Tweening das Salz in der Suppe der AS3 Programmierung. Umso erstaunter war ich, dass Tweening auf anderen Plattformen stiefmütterlich behandelt wird. Das habe ich auf meinem kurzen Ausflug in XNA gemerkt (hier mein verzweifelter Aufruf im App Hub Forum), aber auch in HTML5. Dabei habe ich schon bei einem meiner ersten Canvas Experimente Tweens benötigt! Damals habe ich tween.js von sole verwendet. Eine recht gute Alternative, aber irgendwas habe ich vermisst. Das ändert sich nun. Hoffentlich… ;) Weiterlesen →

Code Snippet Thumb

HTML/CSS/JS
17. Mai 2012
Kommentare: 0

JS-Code-Snippet: Mit Function-Wrappern die Logik einer Funktion erweitern

Kategorien: HTML/CSS/JS | 17. Mai 2012 | Kommentare: 0

Ich hatte letztens das Problem, dass ich mit einer Funktion arbeiten musste, deren Aufruf ich nicht beeinflussen konnte. Leider hat die Funktion nicht genau das gemacht, was ich benötigte. Ich konnte diese Funktion aber auch nicht einfach überschreiben, da sie eine innere Logik besaß, die ich benötigte und die nicht so einfach reproduzierbar war. Eine sehr knifflige Lage! Weiterlesen →

Artikelbild: Einfache To-Do-Liste im Notizbuch-Design

HTML/CSS/JS
22. Mrz 2012
Kommentare: 7

Einfache To-Do-Liste im Notizbuch-Design

Kategorien: HTML/CSS/JS | 22. Mrz 2012 | Kommentare: 7

Durch einen bei css-tricks veröffentlichten Artikel wurde ich dazu inspiriert, mich kurz in viererlei Sachen zu üben:

  • CSS mit Transitions und Pseudo-Elementen
  • möglichst wenig HTML-Markup
  • keine Bilder verwenden
  • einfaches JavaScript ohne jQuery & Co

Herausgekommen ist einer sehr einfache To-Do-Liste im Notizbuch-Stil. Kleine Spielerei, aber ein bisschen was habe ich gelernt. Vor allem, dass man JavaScript völlig neu lernen muss, wenn man sonst nur den Umgang mit jQuery gewohnt ist.

Es folgt ein kleiner Walkthrough. Weiterlesen →

WebGL Thumb

HTML/CSS/JS
17. Mrz 2012
Kommentare: 5

Make some (Perlin) Noise!

Kategorien: HTML/CSS/JS | 17. Mrz 2012 | Kommentare: 5

Prozedurale Synthese. Habt ihr schon einmal davon gehört? Darüber wollte ich ursprünglich mal meine Bachelorarbeit schreiben. Prozedurale Synthese bedeutet, dass Daten (Grafiken, Musik oder was auch immer) durch einen speziellen Algorithmus generiert werden. Das heißt, dass euer Computer bestimmte Inhalte generiert und ihr als Programmierer könnt diese Inhalte beeinflussen. Je nach Daten/Inhalte, die generiert werden sollen, funktioniert das unterschiedlich gut/einfach. So gibt es noch kein Computerprogramm, welches euch einen Beststeller-Roman entwirft. Aber es gibt andere ziemlich beeindruckende Dinge, die ihr damit tun könnt. Ihr könnt euch zum Beispiel eure eigene Welt generieren lassen! Glaubt ihr nicht? In dieser Serie erfahrt ihr, wie es geht! :P Weiterlesen →

WebGL Thumb

HTML/CSS/JS
14. Mrz 2012
Kommentare: 6

Einstieg in WebGL mit three.js

Kategorien: HTML/CSS/JS | 14. Mrz 2012 | Kommentare: 6

Vor einigen Tagen stand ich vor der Entscheidung über welches Thema ich als nächstes schreiben sollte. Über die HTML5 Game Engine, die ich schon länger plane? Einen Teil davon? Oder was ganz anderes? Am Ende habe ich mich für ein Thema entschieden, in welchem ich mich selbst überhaupt noch nicht auskenne und bei dem es verwunderlich ist, dass ich mit diesem noch nicht beschäftigt habe: WebGL! Warum habe ich mich noch nie mit WebGL beschäftigt?! Ich stehe auf Browserspiele, ich interessiere mich für 3D-Grafik – warum habe ich dann bitte schön noch nie etwas mit WebGL gemacht?! Höchste Zeit etwas nachzuholen. Weiterlesen →

Code Snippet Thumb

HTML/CSS/JS
15. Feb 2012
Kommentare: 0

Code Snippet: OOP und JavaScript – Klassenstruktur

Kategorien: HTML/CSS/JS | 15. Feb 2012 | Kommentare: 0

Eigentlich komme ich programmiertechnisch ja aus der OOP-Ecke. Hier fühl ich mich wohl, hier kenn’ ich mich aus. Hoffe ich zumindest ;) Bekanntermaßen(?) ist JavaScript eine objektorientierte, aber klassenlose Sprache. Wie bitte? Vor JavaScript wusste ich nicht, dass man ohne Klassen objektorientiert programmieren kann. Für mich waren Klassen das Fundament von OOP. Umso schwieriger viel mir der Einstieg in JavaScript. Wie konnte ich gewonnene Erfahrungen nur in JavaScript weiter verwenden?

Mittlerweile bin ich um einige Erkenntnisse in JavaScript reicher und weiß das man dank Closures bestimmte OOP-Eigenheiten emulieren kann. Da ich in meinem täglichen Workflow immer wieder auf folgende “klassenartige” Struktur zurück greife, wollte ich sie hier mit euch teilen. Vielleicht hilft es dem ein oder anderen JavaScript-Einsteiger. Aber immer daran denken: Es ist nur klassenartig und keine echte Klasse! Aber ihr bekommt statische und nicht-statische, sowie private und öffentliche Methoden und Attribute. Weiterlesen →

HTML5 Logo Thumbnail 2

HTML/CSS/JS
02. Feb 2012
Kommentare: 2

Clientseitiges Speichern von Daten mit der Indexed Database API

Kategorien: HTML/CSS/JS | 02. Feb 2012 | Kommentare: 2

Letztens habe ich ja über die Web Storage API geschrieben. Einfacher kann man Daten nicht clientseitig speichern! (Meine Meinung ;)) Aber diese Einfachheit geht Hand in Hand mit einigen Beschränkungen. Wer komplexere datenbankartige Speichermöglichkeiten sucht ist bei der Indexed Database API besser aufgehoben – bekommt aber auch ein weit weniger einsteigerfreundliche API. Weiterlesen →