Wird Zeit das Baby hier mal wieder zu reanimieren.
2018 traten Massendefekt wieder einmal in ihrer Heimatstadt Düsseldorf auf. Die Jungs aus Meerbusch (meiner Heimat) geben 2018 das erste Mal ein Konzert in der Mitsubishi-Electric-Halle (früher bekannt als Phillipshalle). Ca. 3500 Gäste warten auf Sebi, Alex, Mike und Nico (Ersatz für Claus, der die Band im August verließ) .
Als Vorbands waren geladen: Alex Mofa Gang, Tim Vantol und No fun at all
Aber seht selbst:
Die Broilers haben sich am 1. und 2. Dezember im Düsseldorfer ISS-Dome die Ehre gegeben.
Vorband an beiden Abenden war niemand geringeres als die Donots.
Unfassbar mit welcher Energie Ingo Donot das Publikum in Stimmung brachte.
Der Typ ist eine Rampensau! (Im positiven Sinne).
Ebenso wie Mario von den Blackout Problems, die ich letztes Jahr als Vorband von Massendefekt erleben durfte.
Ähnlich wie bei den Prophets of Rage, war die Setlist gut durchmischt.
Neue und ältere Songs im Wechsel. Die „Bro Hymn“ von Pennywise zwischendurch hat die Stimmung nochmal voran getrieben.
Meine absoluten Highlights waren „Meine Familie“ und „Meine Sache“. Letzteres habe ich kurz in einem Video festgehalten.
Danke an Marius und seine Nachbarn, mit denen ich an dem Abend eine gute Zeit hatte.
Hat echt Spaß gemacht mit Euch!
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.
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.
… 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:
Ü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. 😉
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.
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.
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.
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
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.
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.
#Remove ETags
Header unset ETag
FileETag None
#Expire Header
ExpiresActive On
ExpiresDefault „access plus 2 months“
ExpiresByType text/html „access plus 1 day“
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.
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.
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.
cmff.de, 2024. Theme Material for Coders