Smashing Conf Freiburg 2016 – Notizen Tag 2

My notes from the second day at Smashing Conf 2016 in Freiburg.

A Smashing Case Study

@SaraSoueidan

SVG vs. PNG

If SVGs are complex they become pretty big. Sometimes it makes sense to use a PNG, because it may be smaller than the SVG. You've got to compare.

You don't have to choose just one embedding technique, you may, but you don't have to. Choose whatever makes sense in the certain use case.

Responsive Typography

Responsive Typography CodePen
Article: Truly Fluid Typography With vh And vw Units

CSS Underlines

CSS Underlines Suck
currentColor
Nested Links

Multiline padded text

box-decoration-break
CSS box-decoration-break caniuse

a11y

a11y is not an enhancement, it's a requirement

<svg aria-labelledby="title">
    <title>Back to top</title>
</svg>

Useful for dynamically added content:

aria-live=""

ARIA Live-Regionen

(mehr …)

Mehr lesen

Service Worker ohne HTTPS auf einem Virtual Host in Chrome

Es ist so weit, ich mache zum ersten Mal ein Projekt mit Service Worker Offline verfügbar. Sehr weit bin ich noch nicht, weil es gleich zu Anfang eine Hürde zu bewältigen gab.

Um Service Worker verwenden zu können, benötigt man eine verschlüsselte Verbindung. Lokal ist das grundsätzlich kein Problem, wenn die Site über localhost oder 127.0.0.1 angesteuert wird, weil diese Ausnahmen darstellen (siehe hier für weitere Ausnahmen). In meinem Fall haut das aber nicht hin, weil ich mit Virtual Hosts arbeite.

Die Lösung

Zumindest für Chrome habe ich aber eine Lösung gefunden: Man öffnet den Browser über die Kommandozeile und behandelt http://meinesite.dev als sichere Quelle, obwohl sie unsicher ist. Dafür muss man zwei Flags übergeben.

Zuerst schließt man alle Instanzen von Chrome oder in meinem Fall von Chrome Canary, öffnet Terminal oder iTerm und gibt folgende Zeile ein.

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --user-data-dir=/tmp/foo --unsafely-treat-insecure-origin-as-secure=http://meinesite.dev

Bevor man mit Enter bestätigt, muss man natürlich http://meinesite.dev noch durch die passende Domain ersetzen und Google\ Chrome\ Canary mit Google\ Chrome falls man Chrome und nicht Chrome Canary öffnen möchte.
Wenn alles gut gegangen ist, öffnet sich Chrome und man kann Service Worker auf einem Virtual Host verwenden.

Für Firefox gibt es wohl auch eine Lösung: Service Worker ohne HTTPS auf einem Virtual Host in Firefox (Habe es aber nicht getestet)

Offline ist bei mir noch nichts verfügbar, aber Service Worker läuft jetzt zumindest auf meinem Virtual Host. Mal sehen, wie es weitergeht ;)

Quellen

Mehr lesen

Warum Seiten auf iOS 9 skaliert werden

shrink to fit auf iOS9

Neulich habe ich eine Website in unterschiedlichen Browsern durchgetestet und da ist mir aufgefallen, dass sie auf iOS 9 beim Laden kurz runter skaliert wird und dann auf die eigentliche Größe springt. Das ist bei jedem Click auf einen Link passiert, was auf Dauer sehr nervig war. Ich konnte nicht herausfinden, was der eigentliche Grund war für das hin und her springen (wahrscheinlich habe ich irgendwas bei den Abmessungen verpfuscht ;)), aber zumindest weiß ich jetzt warum auf iOS 9, und nur auf iOS 9, überhaupt irgendetwas skaliert wird.

(mehr …)

Mehr lesen

Inspiration: Portfolio Websites

unique Wireframe

Es gibt schon seit Längerem große Aufregung darüber, dass im Web alles gleich aussieht. Dass alle die gleichen WordPress-Themes verwenden und die gleichen Bootstrap basierenden Websites bauen. Dass alle Websites ein großes Heroimage mit Call To Action (Scroll üblicherweise), 1 - 3 Spalten und irgendeinen Parallax-Spass haben. Dass alle DesignerInnen die gleichen Stockfotos und Iconsets verwenden, und so weiter.

Wenn man sich umschaut, wird man sehen, dass das auch wirklich so ist. Aber wessen Schuld ist das? Unsere! Natürlich ist mir klar, dass man bei den meisten Projekten wahrscheinlich nicht die gestalterischen Freiheiten hat, die man sich wünsche würde. Es gibt aber eine ganz gute Möglichkeit, wie man sich selbst kreativ verwirklichen und zeigen kann, dass es auch andere Wege gibt Websites zu gestalten: Die eigene Portfolio Website.

Nachdem meine Website nicht nur nicht schön ist, sondern sich auch in irgendeinem kostenlosen Standard WordPress Theme kleidet, habe ich nicht groß zu reden. Aber ich bin bereit mich zu bessern und habe vor, optisch etwas aus meinem Online-Auftritt zu machen.
Deswegen habe ich mich umgesehen und umgehört und ein paar Inspirationen gesammelt. In dieser kleinen Sammlung sind nicht nur zwangsweise sehr schöne, dafür aber programmier- oder layouttechnisch irgendwie besondere und auffällige Werke dabei.

(mehr …)

Mehr lesen

Meine Top Picks der letzten Woche #3

Eine kleine Liste mit den Artikeln, Videos, Websites, Programmen, etc., die mir letzte Woche besonders gut gefallen haben oder in irgendeiner Form hilfreich waren. Wenn du die Liste ergänzen kannst und möchtest, mach das bitte in den Kommentaren.

Image tag vs background property

https://pawelgrzybek.com/image-tag-vs-background-property/
object-fit: cover ist für img-Tags was background-size: cover für Hintergrundbilder ist.

MediumEditor

https://yabwe.github.io/medium-editor/
Ein Inline-Editor.

CSS Best Practices

http://fantasai.inkedblade.net/style/talks/best-practices/#title
Ein paar CSS Tipps. (Mit Click/Tap blättern.)

Mehr lesen

Meine Top Picks der letzten Woche #2

Eine kleine Liste mit den Artikeln, Videos, Websites, Programmen, etc., die mir letzte Woche besonders gut gefallen haben oder in irgendeiner Form hilfreich waren. Wenn du die Liste ergänzen kannst und möchtest, mach das bitte in den Kommentaren.

The A11Y Project

http://a11yproject.com/
How-Tos, Checklisten, Patterns, Tests, Tipps und Mehr zum Thema Accessibility.

vienna.js

http://www.meetup.com/viennajs/
Ich war letzte Woche das erste Mal beim vienna.js Meetup und kann es nur empfehlen!

BEM with Emmet

https://pawelgrzybek.com/bem-with-emmet/
Emmet Filter für den BEM Syntax.

Critical Web Fonts

http://www.zachleat.com/web/critical-webfonts/
Kritische Buchstaben zuerst laden und dann erst den Rest.

Mehr lesen