WordPress & Webwork: Top-15-Artikel in 2016 auf perun.net

Als erstes wünsche ich allen Lesern von perun.net ein frohes, erfolgreiches, glückliches und gesundes Jahr 2017. Damit ich selber, nach ein paar Tagen Auszeit, mich zu Recht finde 😉 fangen wir mit etwas gemütlichem an. Hier die 15 Artikel, die in 2016 am häufigsten aufgerufen wurden.

Weiter …

Amazon Kindle: die CSS-Fähigkeiten des neuen Dateiformats

Seit längerer Zeit existiert das neue Dateiformat für Kindle, dass eine Unterstützung für HTML5 und für CSS3 bietet. Ich habe bereits darüber berichtet. Seit dem 3.4er Update für Kindle Keyboard unterstützen alle relevanten Kindle-Geräte und auch die Apps, dass neue Format.

Daher habe ich mir gedacht, ich mache mal einen kleinen Test und schaue mal, wie sich das Testdokument in der Kindle-App für Android, dem Kindle Fire 1, dem Kindle Keyboard und dem Kindle Previewer (Vorschau-Software) macht. Das sind die Umgebungen auf denen ich auch sonst teste.

Hier der HTML-Code:

Weiter …

Thinkin’ Tags: visueller Editor zur Erstellung von Website-Prototypen

Dirk Jesse dürfte sehr vielen deutschsprachigen Webentwicklern durch sein CSS-Framework YAML bekannt sein. Seit heute gibt es eine öffentliche Alpha-Version seines neuen Projektes mit dem Namen Thinkin’ Tags: Es handelt sich hierbei um einen visuellen Editor zur Erstellung von Website-Prototypen. Bereits jetzt werden YAML und Blueprint.CSS unterstützt. Unterstützung für weitere CSS-Frameworks, wie zum Beispiel Twitter … Weiter …

Linkschleuder: CSS3-Generatoren, Bild zu data-URI, Inhaltsverzeichnis wie in einem Buch

Hier ein paar Lesezeichen, die sich in meinem Browser in den letzten Tagen aufgesammelt haben:

Auf CSS-Portal findet man mehrere Online-Generatoren, darunter unter anderem einen Generator für CSS-Layouts und einen Generator für Navigationsmenüs, die mit CSS3 umgesetzt wurden.

Bilder in Base64 konvertieren

Auf Image to data URI convertor kann man seine Bilder in Base64 codieren, das untere Bild welche ich aus diesem Artikel entnommen habe könnte ich entweder “klassischerweise” so einbinden:

<img src="browser-perun_net-juli-2012.png" width="500" height="244" title="" alt="" />

In Base64 codiert schaut das Ergebnis aber so aus:

Weiter …

CSS-Links: einheitliche Sende-Buttons, Spritepad, Sprechblasen, Flexbox statt Float

Hier wieder mal ein paar interessante CSS-Links, die sich in miner Browser-Session angesammelt haben:

Björn Wibben liefert eine Lösung, wie man es schaffen kann das der Sende-Button eines Formulars in allen Browsern einheitlich zu gestalten. Lösung für ein sehr nerviges Problem.

Das Spritepad bietet eine sehr einfache Möglichkeit CSS-Sprites zu erstellen: einfach per Klicken und Ziehen die einzelnen Grafiken anordnen und anschließend den CSS-Code kopieren. Unter einem CSS-Sprite versteht man wenn mehrere Grafiken zu einer großen zusammengesetzt werden.

Weiter …

CSS-Datei mit Dust-Me Selectors entrümpeln

Bastelt man häufiger an seiner Website, was so die allermeisten Webworker tun, dann hat man recht schnell Regeln in der CSS-Datei, die nicht mehr benötigt werden. Es ist nicht einfach über Jahre gewachsene Struktur im Auge zu behalten.

Das braucht eiserne Disziplin und eine perfekte Organisation … und Hand aufs Herz, diese beiden Eigenschaften im Paket haben die wenigsten von uns, wenn es sich um die eigenen Projekte handelt. Etwas was man bei Kundenprojekten nicht durchgehen lässt, winkt bei eigenen Projekten häufiger durch.

Solltest du in der CSS-Datei auf Regeln stoßen, wo du dir nicht sicher bist ob die noch wirklich benötigt werden, dann könnte dir hierbei die Firefox-Erweiterung Dust-Me Selectors helfen.

Die URL der Website eingeben

Einfach die URL der Website oder der XML-Sitemap eingeben und das Addon durchsucht die Website und gibt nach ein paar Minuten das Ergebnis aus:

Weiter …

Google aktualisiert seine Styleguides für HTML, CSS und Javascript

Styleguides (“Gestaltungsrichtlinien”) werden zum Beispiel von größeren Firmen erstellt, damit auch externe Dienstleister nach den “gleichen Regeln” arbeiten, wie die internen Entwickler. Styleguides sind u. a. dann sinnvoll wenn zwei oder mehrere Freelancer zusammenarbeiten, damit man sich auf gemeinsame Regeln einigt. Sie sind aber auch eine interessante Inspirationsquelle, damit man sieht wie andere arbeiten und … Weiter …

Ein Paar Links zu HTML & CSS

Hier ein paar Links zum Thema CSS und HTML die ich seit einigen Tagen als offene Tabs in meinem Browser mit mir schleppe: Why you should care about CSS page performance: ein paar Tipps zur Performance-Optimierung der CSS-dateien CSS Tricks: How to Speed Up CSS Rendering: ein weitere Artikel zum gleichen Thema Style Guide für … Weiter …

CSS: neue Methode um Text zu verbergen

Seit vielen Jahren nutzen Webworker diverse Methoden um per CSS Text oder Überschriften zu verbergen, zum Beispiel bei grafischen Überschriften oder vor allem, wie hier auf perun.net, auf das Logo zu verlinken, aber den eigentlichen Text der zum Logo gehört zu Seite zu schieben. Eine sehr bekannte und dabei auch zugängliche Methode ist es mit … Weiter …

CSS Usage: welche CSS-Regeln sind im Einsatz?

CSS Usage ist ein Addon für Mozilla Firefox, welche den Firebug um eine zusätzliche Funktion erweitert. Mit CSS Usage kann man herausfinden welche CSS-Regeln auf einer bestimmten Seite eingesetzt werden. Nach der Installation bindet sich CSS Usage in Firebug als zusätzlicher Tab ein. Mit Klick auf Scan untersucht man die gerade aufgerufene Seite. Aktiviert man … Weiter …

Wer ist der schnellste Coder?

Wer sich gerne auch bei HTML und CSS mit anderen misst, der sollte mal bei Code Racer vorbeischauen. Hier kann man live gegen andere Spieler/Coder antreten und sein Wissen bzw. Können rund um HTML und CSS testen. Der Gegner ist also ein anderer Spieler und die Zeit. Und als besondere Gimmicks gibt es für gewonnene … Weiter …