Allgemein (30)


Massendefekt – Echos

massendefekt_saturn_live_set

Die Jungs von Massendefekt haben eine neue Platte am Start.
Massendefekt kommen aus meiner Heimat Meerbusch und werfen Ihr nunmehr 6. Album auf den Markt.
Am Erscheinungstag hat das Quartett Sebastian, Alex, Claus und Mike eine kleine Release-Party im SEVENS – Home of Saturn an der KÖ gegeben.
Diese bestand aus einem Mini-Live-Set. Ein Schöner Mix aus alten und neuen Nummern der Band.
Ich habe mir Echos in der Limited Edition natürlich vorbestellt.
Neben dem Album (inkl. Bonus-Tracks) bekommt der Massendefekt-Fan dazu Socken, Sonnenbrille, Plektrum, signiertes Songbook und eine DVD.
Die DVD enthält fast alle Musikvideos, die Massendefekt-Dokumentation und ein Tourtagebuch.

massendefekt_echos

Das Album enthält 15 feinste Punk ’n‘ Roll Songs.
Man erkennt bei jedem Lied den typischen Massendefekt-Sound und stellt zugleich fest, dass sich die Band von Album zu Album weiter entwickelt hat.
Meine Anspiel-Tipps sind vor Allem „Mauern“, „Echo“ und „Schwarz Weiss Negativ“.
Zu den beiden Erstgenannten gibt es bereits Videos (z.B. auf YouTube). Beide Videos wurden (wie so häufig) von Kay Özdemir konzipiert, gedreht und geschnitten,
den ich noch aus meiner Schulzeit kenne.




Alles Neue macht der Januar…

… macht er das?
Man weiß es nicht. Jedenfalls habe ich schon lange überlegt, meinem Blog mal ein neues und (vor allem schlankeres) Aussehen zu verpassen.
Mangels Zeit und mangelnder gestalterischer Qualitäten habe ich mich einfach eines fertigen Themes bedient.
Das hört auf den Namen Material for Coders und ist genau das, was ich mir momentan so vorgestellt habe.
Schlank, schick und responsive. Der Content steht hierbei im Vordergrund.

Den Ansatz des Themes habe ich im ersten Schritt aufgegriffen.
Ein wenig Redundanz, was den Header-Bereich angeht, ist noch vorhanden, wird aber sukzessive reduziert werden.
Die ehemalige Header-Grafik wird in reduzierter Form wiederkommen – allein um den Wiedererkennungswert beizubehalten.
Weitere gravierende Änderungen hier einmal im Schnelldurchlauf:

  • keine Werbung mehr
  • kein Archiv, keine Kategorien – interessiert eh Keinen
  • keine Sidebar mehr
  • kein Stilbruch mehr auf mobilen Geräten
  • schnellere Ladezeiten durch verzicht auf Schmuck-Grafiken
  • keine Social-Media-Buttons in jedem Beitrag

Über die nächsten Tage, Wochen, Monate werde ich hier und da Dinge anpassen und weiter optimieren.
Ferner werde ich versuchen ein wenig mehr den Fokus dieses Blogs auf meine Erfahrungen aus der Welt der Webentwicklung zu legen.
Weniger privater Kram, mehr aus dem Nähkästchen eines Web-Entwicklers.
Ich schreibe mir hier bewusst keine Quote auf die Fahne, da gerade in diesem Jahr einige private Dinge anstehen, die eine deutlich höhere Priorität genießen.
Wer weiß, vielleicht lasse ich mich dazu hinreißen gegen Mitte/Ende des Jahres 2016 hier darüber zu berichten.

Spannend finde ich die Geschichte, die der Yellowled da in seinem Blog veranstaltet. Nämlich ein Live-Redesign. Kann ich aber im Moment nicht mit meiner Work-Life-Balance vereinbaren. 😉




Aktion Arschloch

7bc137fc-vY29YRk2TeuoBmsvNeYh_keinbockaufnazis_logo

Eigentlich veröffentliche ich ja hier Beiträge über Autos, Web-Entwicklung und dergleichen.
Normalerweise halte ich mich auch aus politischen Diskussionen raus.
Diejenigen, die mir auf Twitter oder Facebook folgen, wissen ja bereits, dass ich die Aktion Arschloch unterstütze.
In Zeiten, wo Flüchtlinge ihr Land verlassen müssen, wo Krieg und Gewalt herrscht, kann es nur gut sein, dem rechten Pack vor Augen zu führen, wie erbärmlich sie sind.
Flüchtlingsheime anzuzünden und wie kürzlich in Berlin passiert, diese Menschen in der Bahn zu bepissen (sorry, dass kann man nicht harmloser formulieren) geht mal gar nicht.

Darum meine Bitte an Euch: Wenn ihr könnt, kauft Euch „Schrei nach Liebe“ von „die ärzte“ und/oder wünscht es Euch bei Euren Radiosendern.
Lasst alle wissen, dass wir nicht nochmal sowas wie damals in Rostock-Lichtenhagen brauchen…
Danke!

P.S.: Ich verzichte an der Stelle natürlich auf Affiliate-Links und möchte, dass Ihr die Kohle lieber an Pro-Asyl oder dergleichen abgebt.

Ich verabschiede mich mit einem weiteren Song von „die ärzte“, der in die gleiche Kerbe schlägt:




Teufel Concept E 450 Digital „5.1-Set“

Der letzte Post ist über ein Jahr her.
Zeit mal wieder was zu verbloggen.
Kurz nach dem letzten Post war ich zum letzten Mal für OnVista on the road und habe die Fronteers 2014 besucht.
Danach habe ich OnVista verlassen und bin zum Handelsblatt gewechselt.
Weniger familiär, da deutlich größer, aber abwechslungsreicher. Dort arbeite ich weiterhin als Frontend-Developer, habe aber mehr Backend-Tätigkeiten zu erledigen.

Lirum, larum. Worum es hier eigentlich gehen soll, ist ein gänzlich anderes Thema.
Ich habe mir etwas Geld beiseite gelegt und mir ein kleines Träumchen erfüllt.

Mal weiter ausgeholt: Vor ca. 10 Jahren (während meiner Ausbildung zum Fachinformatiker) habe ich meine Aktiv-Boxen in Rente geschickt und mir ein 5.1 Surround-System von Creative Labs geholt (Kostenpunkt damals: 90€). Das Verhältnis Preis vs. Leistung ging schon in Ordnung.
Ein Kumpel von mir hat sich ein oder zwei Jahre später ein Teufel-System geholt. Zugegebenermaßen war ich ein wenig neidisch. Dennoch war ich zufrieden mit meinem Sound.

In den letzten acht Jahren habe ich immer mal wieder daran gedacht, mein Boxen-System durch ein Teufel-System zu ersetzen.
Jetzt habe ich das einfach mal gemacht.
Über den Teufel eBay-Shop sogar einigermaßen günstig (bisschen über 400€).

Kurios war letztendlich die Lieferung.
Samstags bestellt. Montags kamen die Satelliten-Boxen. Der Subwoofer (zugleich die Zentrale) ließ auf sich warten.
Aufgrund längerer Krankheit war ich die ganze Woche zu Hause. Doch DHL kam nicht.
Den Samstag darauf habe ich den kranken Schwiegervater im Krankenhaus besucht. Dann kam natürlich DHL und konnte nicht zustellen.
Montags nach der Arbeit also zur Post. Ich so: „Ich würde gerne ein Paket abholen“. Die Dame am Schalter: „Augenblick.“ …
kam wieder und sagt zur Kollegin: „Ich brauche mal die Karre“.
Leute: Der Subwoofer alleine wiegt 34Kg.
Habe das Ding dann mit meiner Freundin zusammen hoch getragen.

Nun hängt das Teil per USB am Rechner. Smartphone und Macbook liefern die Mucke per Bluethooth an das System.
Der Klang ist der Hammer. Beste Entscheidung seit langem.




OnVista CSS

This article has been published in English to reach a greater audience. It covers a topic that every web developer should be concerned about. So I chose English to target everyone in the business. Let me know what you think about it in the comments below the article.

Inspired by the latest articles about CSS architecture (from Mark Dotto, Ian Feather and Chris Coyer)
I decided to come up with my own one.
I think a lot more developers should do that, to learn from each other.

OnVista is a website which targets the German speaking user who is interested into financials.
We’re currently one of the most visited german financial websites.
Right now we are facing the fact, we serve some pages in a new layout
and some (well most of them) still in the old layout and old backend architechture.
Don’t ask for the reason. This is quite challenging for optimising the CSS architecture.
So here’s what we do now to cope with the given situation.

Quick facts
– We use SASS as our preprocessor
– We have about 60 partials which are compiled to (currently) four CSS files in
production (weighing about 290kb, 58kb gzipped)
– We compile them into two main files for our focused new layout because of the 4096 selector thing in IE<10 - The other two are used for elements used in both worlds (prefixed with "global_") - we used to write styles very specifically, mainly on tag base (not the best idea, because we nowadays need to reset a lot of styles) - we're trying to get the switch from tag based to a kind of BEM, OOCSS approach. That said we aim for classes over tags - pixels are the unit of choice Preprocessor
We are relying on SASS.
It gives you anything you need right now and it’s doing its job server-side.
Nesting can help a lot, when it comes to style a certain box.
But we try to keep the nesting level to a minimum. Never more than 3 levels is a rule of thumb.
Gradients, animations, cropping text via ellipsis and things like that are mixins we can use
everywhere needed.

Architecture
We learned from mistakes we made in the past.
As mentioned before we were starting to lean to a more BEM, OOCSS approach.
It is absolutely nessesary to get away from selectors like .foo .bar .baz ~ .item-one > span:first-child
That means we’re trying to rely on base classes used with modifiers (if needed) to create a standard button with the class „button“.
Modifiers would determine the color or the size. Just by applying the classes „button-primary“ and „button-small“.
Despite being a german speaking company we started to use english class names.
Variables are heavily used for colors, margins, font-sizes etc.

Linting
Yes, we’re using a CSSlint Jenkins step.
But it is very basic and just checks if the css is valid and if the count of selectors isn’t larger than 4096.
There is room for improvement here.
Think of how often are font-sizes set or floats or widths, etc.

Webfonts
Actually we’re using two fonts.
The first one is our corporate identity font, the second one is a customized icomoon font.
They are implemented in a _webfont.scss which is imported by the main css file.

Icons
Most of the icons are SVGs in a special folder.
A grunt task (written by the gorgeous filamentgroup) packs them together and even delivers a png fallback.

Background-Images/Sprites
Remember the time you handcrafted sprites in photoshop?
Get over it. Most of it could be achieved automatically.
grunt-spritesmith can help. Just place your single files in a folder and let grunt do the work.
Run grunt-imgcompress to gain smaller file sizes.

Styleguide
Also a grunt task we set up the other day.
Styles are annotated as a comment and grunt-stylguide generates a browsable living styleguide.
So every single backend/frontend developer or designer is able to look up which element can be used in
particular.
On the other hand it can ring a bell if you’re duplicating things (i.e. 50 shades of gray).

Are we done yet?
Hell no. There is a lot to do.
Linting must be improved to raise the quality of the css (i.e. number of importants, nesting level, etc.).
Spites must be improved to reduce the manual positioning of items.




Der caschy rockt raus, ich bin dabei!

Dem Caschy sein Blog feiert in diesen Tagen den 7. Geburtstag.
Seit nunmehr über drei Jahren habe ich dort viele Tipps, Tricks und Software-Perlen gefunden.
Nun haut der Kerl eine Menge an Hardware raus.

Ein Grund mehr auf seinen Blog hinzuweisen und Euch aufzufordern, das Teil in Euren RSS-Reader zu hauen.
Der Junge hat wie erwähnt viele Tipps am Start und schreibt, wie ihm sein Mund gewachsen ist.
Ungefilterte Meinungen zu aktuellen Themen aus der Welt des Internets.
Ich finde, es macht extrem Spass, seine Posts zu lesen.

Der caschy rockt raus, ich bin dabei! http://bit.ly/wmDzr1




Let op: DHL Phishing

Gestern erhielt ich eine E-Mail von DHL.
So sah es zumindest aus. Jedoch kam die E-Mail von info@dhl-kundencenter.eu

Grund genug um mal wieder darauf hinzuweisen, dass man immer mit offenem Auge durch das Netz und durch die Inbox surfen sollte.

Was auffällt (und nicht unbedingt im Screenshot zu sehen ist):
– Alles in DHL-typischem Rot/Gelb gehalten
– keine persönliche Anrede
– Packstation immer in Versalien geschrieben
– Panikmache: „wird es uns nicht möglich sein… [bla bla bla]
– alle Links führen auf dhl-kundencenter.eu
– „Verschicken Sie Ihre Geheimzahl (PIN) niemals per E-Mail oder geben diese an dritte weiter. Die DHL-PACKSTATION darf nicht für dritte beantragt werden. Im Falle von Missbrauch haftet der Inhaber der PACKSTATION.“

Besonders der letzte Punkt lässt einen glauben, dass es sich hierbei um eine echte Mail von DHL handelt.
Daher appelliere ich an der Stelle E-Mails dieser Art besonders zu hinterfragen.

Seid wachsam und liest/analysiert diese E-Mail komplett.
Diejenigen, die es auf Eure PINs/Passwörter etc. abgesehen haben sind listenreich.
Bevor ihr blind auf die Links in solchen E-Mails klickt, googelt ob es Kampagnen dieser Art gibt,
schaut euch den Absender an und prüft ob dieser valide erscheint.
dhl-kundencenter.eu ist kein offizieller DHL-Account!

Ich bin jedenfalls immer skeptisch, wenn mir jemand schreibt, dass mein Account ausgelaufen ist,
oder ich plötzlich einen Gutschein bekomme. Das solltet ihr auch sein.




WordPress – Frontend Performance verbessern

Egal ob Google, Yahoo oder Bing.
Suchmaschinen setzen neben Keywords und anderen SEO-Maßnahmen auch auf die Performance einer Website.
Um die Performance (der eigenen Website) zu ermitteln gibt es mittlerweile eine Menge Tools.
Sei es als Plugin für den Browser oder als Web-Applikation.
Nur um ein paar zu nennen:

Die letzten zwei Tage habe ich mich damit beschäftigt, die Performance in meinem Blog zu verbessern.
Seit ein paar Wochen habe ich meinen Blog von Serendipity auf WordPress umgestellt.
Da ich ein recht einfaches Hosting Angebot von 1&1 nutze, kann ich leider nicht alle Register ziehen, die ich ziehen wollte 😉
Hier liste ich mal einige Maßnahmen auf, die auf jeden Fall die Ladezeit meines Blogs reduziert haben.

.htaccess Einträge – ETags und Expires Headers

#Remove ETags
Header unset ETag
FileETag None

#Expire Header
ExpiresActive On
ExpiresDefault „access plus 2 months“
ExpiresByType text/html „access plus 1 day“

style.css

In meinem Theme wird die style.css verwendet.
Für die Entwicklung binde ich sie als style_dev.css ein.
Diese CSS-Datei lasse ich vom YUI Compressor minifzieren und in style.css umbenennen.
Das mache ich per Ant-Task. Ist für eine Datei etwas überkandidelt, aber so kann ich mich mehr mit
Ant als Automatisierungs-Tool beschäftigen.

CSS-Sprites

Ich bin kein Designer, von daher nutze ich ein fertiges HTML5-Theme namens Absolum.
Das Problem ist, dass einige Hintergrundbilder zusammen gefasst werden könnten, aber nicht zusammen gefasst wurden.
Daher habe ich das Bookmarklet SpriteMe von Steve Souders verwendet.
Damit habe ich schon einmal eine Menge der Hintergrundbilder in ein Hintergrundbild vereint.
Das Bookmarklet sagt mir sogar, welche Styles ich anpassen muss.
Dadurch habe ich wieder ein paar HTTP-Requests gespart.

Bild-Optimierung

Trotzdem ich Wert darauf lege, dass Bilder bereits optimiert abgelegt werden, lasse ich im Zweifel Bilder von Smush.it optimieren.
Hiermit werden noch einmal ein paar Bytes verlustfrei entfernt.

Allein durch diese Maßnahmen habe ich den Performance-Index meines Blogs von 72 auf 81 angehoben.
Könnte ich CSS und JS Dateien noch per .htaccess gzip-komprimiert ausliefern, dann würde sicher noch mehr gehen.
Eine weitere Möglichkeit, die ich die nächsten Tage noch prüfen werde, ist die, dass ich teilweise Bilder unter anderen Subdomains ausliefere.
Das hat den Vorteil, dass der Browser die Dateien parallel herunterlädt.

Weitere Performance-Maßnahmen sind noch in Planung und werden vermutlich in den nächsten Tagen umgesetzt.
Je nachdem, wie ich Zeit finde. Dazu wird es aber auch nochmal einen gesonderten Artikel geben. Stay tuned.




Improvisation, Chatroulette, Flip Mino HD und Caschy

Eigentlich wollte ich mich gegen den Rummel um Chatroulette wehren.

1. Finde ich chatten mit Unbekannten ohne ein Thema doof.
2. Habe ich in meinem 5-minütigem Test mehr gesehen, als ich wollte
3. ist es Zeitverschwendung (IMHO)

Ich bin ein Mensch, der beruflich eine Menge mit dem Web zu tun hat und privat möchte ich die Vorzüge des Internets nicht missen.
Mal eben was Googlen, bei Wikipedia Dinge nachgucken, oder auf IMDB herausfinden, woher ich den Schauspieler kenne, den ich gerade 90 Minuten in einem Film gesehen habe.

Aber Chatroulette? Was soll ich damit anfangen? Eigentlich hatte ich auch nicht vor darüber zu bloggen.
Aber ein Gewinnspiel bei Caschy hat mich letztendlich doch dazu gebracht.
Das Ding könnte ich ganz gut gebrauchen, wenn ich mal wieder zum Nürburgring fahre um Erlkönige zu beobachten.

Dabei geht es mir aber weniger um die Applikation an sich, sondern um den Typen im Video.
Bei Chatroulette, werden die Chat-Partner per Zufallsgenerator zusammengewürfelt. Man kann über einen Button zum nächsten Partner weiterspringen.
Der Kollege in dem hier geposteten Video sitzt am Klavier und singt Songs, die zu dem Gegenüber passen und reagiert auf Eingaben im Chat-Fenster oder auf Gestiken, Mimiken im Video-Fenster.
Er spielt sogar gewünschte Lieder des Gegenübers. Finde ich einfach grossartig.

Also, zieht Euch das rein und bewundert diese Improvisation:




Putpat – Musikvideos

Vor einiger Zeit bin ich über einen Blogpost gestolpert, der Putpat anpries.

Putpat ist momentan in der Beta-Phase und bietet quasi personalisiertes Musikfernsehen.
Man meldet sich dort an, verknüpft sein last.fm Profil und los geht’s.

Ãœber den sogenannten Veequalizer kann man bestimmen, welche der 5 Lieblingsbands am häufigsten gespielt werden.
Ausserdem werden einem ähnliche Künstler vorgeschlagen. Diese kann man als Favoriten markieren oder verbannen.
Hat man einmal seinen eigenen Channel aufgesetzt, werden nonstop Musik-Videos gespielt.
Und das sogar in extrem guter Qualität.
Wird dort ein Lied gespielt, das einem nicht gefällt, dann kann man zum nächsten Track skippen.
Wenn man möchte, dann kann man natürlich vorher den Track verbannen.

Eine coole Geschichte. Auch wenn ich mir mehr als 5 Top-Artists wünschen würde.
Aber dennoch wird mein Musik-Geschmack in der Regel getroffen.
Ganz klar „Daumen hoch“ für diesen kostenlosen und zum großen Teil werbefreien Service.

Ich habe noch 6 Invites. Also wer möchte soll sich einfach per Mail oder Twitter melden.
First come, first serve.