In diesem Screencast zeige ich euch wie ihr ganz leicht Videos responsive machen könnt. Und dazu benutzen wir FitVids.js.

Für mehr Videos, hier abonnieren klicken. Danke!

This week I’ve got a lot of links to share with you. So let’s get started:

• As CNN mobile traffic hits 40%, editor calls web vs. apps debate ‘red herring’
  While the mobile web visitor numbers of CNN grow they decide to equally push their mobile website as well as their apps. Read about why they decide to do so.

• Sky parental controls break jQuery website
  A good reason for hosting jQuery or something similar yourself instead of relying on an external service like code.jquery.com.

• BBC News Responsive Beta
  This is a link to a responsive Beta theme of the BBC News. Looks pretty awesome.

• net awards 2014
  The voting is now open until March, 24th. Awesome people to vote for.

• IE and Chrome usage over time
  What a beautiful chart. Look at IE8.

• “Just”
  Brad Frost makes you think about the little word “Just”. Highly recommended read.

• What’s with putting the CSS in the head?
  Interesting article that advocates putting CSS in the head instead of storing it in a separate file. He makes convincing arguments. We just need a simple way to automate the transition from developing in separate files to including the CSS in the head in the final production site.

• Things I’ve Learned On Planet Earth
  Not development related but nevertheless a great list by Daniel Eden.

• Understanding the GitHub Workflow
  This is a nice and easy to understand explanation of how the GitHub Workflow works.

• YOU MIGHT NOT NEED JQUERY
  If you want to try staying away from jQuery and write pure Javascript, this site might help you. Related:

You might not need images. That's what is weighing down the average web page – not JS libraries.

— Addy Osmani (@addyosmani) January 31, 2014

• The first year as a themeforest author
  Very interesting article on selling themes on ThemeForest. Sounds fun, even though the earnings aren’t that much, considering they need to suffice for two people.

Hello and welcome to another Weekly Recap. This week is a nice mix of CSS, Javascript and general topics. Let’s dive in:

• Responsive Javascript
  Most of us know a lot more about responsive CSS than about responsive Javascript. So go ahead and have a look at this one-pager that answers questions like „What is Responsive Javascript?“ and „What are the Browser APIs?“.

• Use zero-width spaces to stop annoying Twitter users
  Harry Roberts has a simple trick for you how to write @import or other @-statements in tweets without mentioning users.

• CSS animation-fill-mode
  I recently searched for exactly that: Being able to stop an animation at 100% and don’t have it going back to 0%. Works in IE10 and newer and all the cool kids on the block. I also created a CodePen.

• Adaptive Backgrounds
  Cool jQuery plugin that extracts dominant colors from images and applies them to their parent elements.

• Single Line Comments (//) in CSS
  I’m writing CSS on a daily basis for years now and I wasn’t aware of CSS not really supporting single line comments. Probably because it always worked for me because I either didn’t minify my CSS in the past or Sass is now doing some magic for me which allows me to use single line comments. Either way, necessary read.

• DevSwag
  Need some new webdev related stickers or T-Shirts? Here you go.

• 30 years of Macintosh
  On Friday, January 24th 2013, the Macintosh turned 30. This is the video and page Apple put together to celebrate. Well done.

• Sitespeed.io
  This is an awesome tool to analyze your sites performance and get helpful tips how to improve it. You need to handle it via the command line but it’s really worth to learn it.

markj:

Slideshows. Who doesn’t love a good slideshow? jQuery Cycle is a plugin that makes creating these popular site elements incredibly simple. However, you may have attempted to use Cycle in a responsive layout recently and discovered that the slideshow does not resize as your container changes size.

Today I finalized the new welcome page of QUOTE.fm for tomorrow. A problem I encountered was making the jQuery Cycle slideshow responsive. I found a nice tutorial that helped me with that. It was not the exact solution because I have div’s with images and text which cycle instead of just images but it was a big help.

nakedpassword.com:

The whole idea of naked password is to encourage your users to enter stronger passwords.

Our beautiful model Sally tastefully removes items of clothing as the password grows stronger.

Fun idea. If the plugin could automatically detect whether the user is female or male it would be even better.

fancyApps:

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

In Zukunft kann man alle Bilder hier im Blog anklicken und bekommt eine Hi-Res Version angezeigt, die sogar auf dem iPad dank einer Auflösung von 2048px an der langen Kante, gut aussieht. Realisiert habe ich die simple Funktionalität mit fancybox, meinem lieblings Lightbox Script.
Die fancybox kann noch viel mehr als das wofür ich sie bisher nutze und alles ist super einfach zu implementieren. Und weil ich hier den ein oder anderen Euro verdiene, habe ich auch gerne eine Lizenz für 15€ gekauft.

Dass es bald eine read-only API für QUOTE.fm geben wird ist ein offenes Geheimnis und daher baue ich gerade den Labs-Bereich in dem die API erklärt wird, man eigene Apps anlegen kann und später auch diverse Snippets für die eigene Webseite findet.

Wer zum Beispiel schon mal mit der Twitter API gearbeitet hat, weiß, dass man für jede App, die man anlegt diverse geheime Codes bekommt, die man dann kopieren und irgendwo in den eigenen Code einfügen muss. Teilweise beinhalten dieses Codes so seltsame Zeichen, dass ein schnelles Markieren per Doppelklick nicht möglich ist. Natürlich kann man den Text dann auch ganz normal markieren und kopieren. Oft nervt das aber und hält unnötig auf.

Es gibt eine – wahrscheinlich auch noch tausend andere – Möglichkeit, das schneller und einfacher zu machen. Deswegen wird man in der QUOTE.fm API einfach irgendwo in den Code klicken können und hat automatisch die komplette Zeile markiert und kann sie kopieren. Nur ein Detail, was die Arbeit aber etwas angenehmer macht, da man sowieso immer den kompletten Schlüssel braucht.

Die Lösung dafür ist ganz simpel. Statt irgendeines anderen Containers nehmen wir für den Code einfach ein input-Feld, setzen es auf readonly und stylen es als wäre es normaler Text.

<input class="key select" type="text" value="bYRlJaCBHJaksjdhaAS)(§Uk8o6IfbQMemhW7TOQ" readonly />

Das dazugehörige CSS:

.key {
    width: 100%;
    color: #3c3c3c;
    font-family: 'Monaco','Courier',monospace;
    font-size: 15px;
    line-height: 15px;
    border: 1px solid bold;
    font-style: italic;
}

Soweit sind wir optisch fertig. Jetzt brauchen wir nur noch einen jQuery Schnipsel und fertig sind wir. Und jQuery einbinden nicht vergessen.

$('.select').click(function(){
    $(this).select();
});

Wenn wir also irgendwo auf der Webseite einen Text automatisch ausgewählt haben wollen, können wir einfach die Klasse .select vergeben und brauchen uns nicht weiter um irgendwas kümmern.
In diesem Fall hätte ich mir eine der beiden Klassen sparen können, in einem größeren Projekt ergibt die Aufteilung aber durchaus Sinn. Viel Spaß damit!

Den Trick verwendet dribbble übrigens auch auf den Einzelseiten für die Permalink urls.

Update: Habe es auch mal kurz bei jsfiddle gebaut, damit ihr es testen könnt.

Ihr kennt alle den schönen Effekt, wenn man in ein Eingabefeld klickt und der Text darin verschwindet. Bei einem Anmeldeformular zum Beispiel steht in einem Feld Username, man klickt rein und der Platzhalter verschwindet. Gibt man nichts ein und klickt wieder außerhalb des Feldes, dann steht der ursprüngliche Text wieder drin.

Dieser Effekte musste immer per JavaScript erzeugt werden. Dank HTML5 und dem placeholder-Attribut geht das mittlerweile für aktuelle Browser (Chrome, Safari ab Version 4, Firefox ab Version 7, Opera ab Version 11.5) auch einfacher.

Mal angenommen wir haben ein einfaches Input-Feld mit einem vor definierten Inhalt.

<input type="text" value="Vorname" />

Wenn man jetzt in das Feld klickt passiert nichts. Man muss Vorname selbst rauslöschen um den eigenen Namen eingeben zu können. Das ist natürlich ziemlich blöd. Um das einfach und schnell zu lösen benutzen wir einfach statt value, placeholder.

<input type="text" placeholder="Vorname">

Die komplette restliche Arbeit nimmt uns HTML5 ab. Klick ins Feld und wir können unseren Namen eintragen und Vorname verschwindet. Tragen wir nichts ein und klicken außerhalb des Feldes steht weiterhin Vorname drin. Alles ganz ohne JavaScript.

Wer möchte, dass das ganze auch im Internet Explorer funktioniert, für den gibt es das jQuery Plugin Placeholder. Einfach jQuery, das Plugin sowie eine eigene scripts.js für unseren Code einbinden…

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.placeholder.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>

… und dann noch das Plugin in der scripts.js aufrufen. Fertig.

$(document).ready(function(){
    $('input, textarea').placeholder();
});

Das ersetzt dann in alten Browsern bei allen Inputfelder und Textareas den placeholder. Man könnte das natürlich auch nur auf einzelne Felder anwenden, z.B:

$(document).ready(function(){
    $('#search').placeholder();
});

Viel Spaß damit. Ich nutze es andauernd und es macht die ätzende Arbeit mit Formularen ein Stück angenehmer.

Todd Parker:

That’s right, version 1.0 is out! After more than a year of refinements, we now have a rock solid release.

Ich war bisher erst an einem Projekt beteiligt, dass wir mit jQuery Mobile umgesetzt haben und das lief nicht so wirklich zufrieden stellend. Allerdings war das Framework auch noch eine 0.x Version. Bin gespannt was man demnächst von der finalen 1.0 hören wird. Der Gedanke dahinter, den Entwicklern das einfache Bauen von mobilen Seiten/Anwendungen auf HTML5 Basis zu ermöglichen ist ja nach wie vor sehr gut.