On mobile phones/tablets, where touch gestures comes into place, it's sometimes hard to target little links with your finger. Mostly because it was primarily designed for a desktop use. Jacob Rossi, an Internet Explorer 10 engineer who worked on the awesome Microsoft's pointer API (yeah true story man), said at the 2013 W3Conf that every touch oriented elements should be at least 40x40 pixels wide, to ensure the best user experience.
Here's a demo I made on Codepen that let's you play with Ken (from Street Fighter II). There are several moves, like jumping, walking, etc and of course there's the famous Hadoken! :) It's made with only CSS transitions and a minimum of javascript that let's you control Ken.
UPDATE
And here's the post I wrote for the David Walsh Blog → where I explain how it works in details.
Had a lot of fun while making it ;)
I was struggling trying to animate the width of a <div> from a fixed px width to a 100% (or auto) width. The idea was to have a completely fluid 2 columns layout. A main col taking all the space and a right col with a fixed width. Then, on a particular user action, the right col animates until taking all the remaining space (overlapping the main col). I needed to achieve the effect only with css transitions.
Here's how I did it...
This is how I like to do in my projects, it may be or may be not the best solution but it works just fine for me, hope you'll find it useful.
I find myself following these 2 rules :
* Is there a better approach in order to avoid specific ie version targeting?
* If ie specific styles are required, how can I avoid code scattering at all cost?
I recently had to reproduce a fancy "kinda separator" and I gave it a try in pure css. The result is quite cool. It works like a charm in ie9, Chrome, Safari, Opera and Firefox.
If you're using Firefox you'll notice (or not) that the dashed rounded border is "solid" rather than being "dashed" (inside the white circle)... Well there's a bug about it in Firefox opened since 2007... dashed border simply doesn't work when a border-radius is applied to it. Too bad... Well the guys at Webkit's have the solution, wonder why Firefox didn't implemented it jet.
Anyway the :after shadow border works great every where I tested it so it's a quite robust ie9+ technique. I need to apply a degraded version for ie8, maybe just a simple grey border.
Here's the Codepen version. You can play with the tabs to see how it works underhood.
As a front end developer I'm sometimes confront to projects where I need to deal with only static HTML files. Being able to use inclusions in PHP makes it so much easier to maintain.
I’m a Git fan and I usually use Github as remote repository, it allows the creation of a gh-page branch. Basically it means you can have a static web page for your Github project for free. Really it's easy here's the Github doc.
Github pages are awesome but it's then impossible to use php includes in them...
Here's a draft I did just for fun on the logo of an open source projet I heard of called vert.x
I'll suggest it to the community, maybe they'll like it :)
For white backgrounds
For black backgrounds
Ce(tte) œuvre de Julien Knebel est mise à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé.
Fondé(e) sur une œuvre à http://front-back.com/vert-x-logo-concept.
Have you ever struggled to find what line of js code was the cause of a weird behavior in your page? I did.
Well there's a super cool feature in Chrome dev tools you can try. Simply inspect the DOM (where the behavior appears to be) then do a right click and choose one of these three options:
Vous est-il jamais arrivé de vous arracher les cheveux pour trouver quelle ligne de js était à l'origine d'un comportement étrange dans la page ? La situation s'apparente assez à : "chercher une aiguille dans une botte de foin" ?
Eh bien je viens de découvrir une super astuce dans la console (sans doute présente depuis toujours). Il suffit d'inspecter l'élément, de lui faire un click droit et de choisir l'un des trois comportement suivant :
Je me suis mis il y a peu à la technique des glyph icons, en gros ça permet de gérer les pictos sous forme de fonte (donc c'est du texte) pour profiter de la foultitude de bénéfices que le vecteur peut apporter dans ce domaine. J'ai parlé de la technique dans un précédent billet et ce présent article est un peu mon retour d'expérience.
Alors il y a deux approches, soit vous cherchez des packs d'icônes vectorisés libre de droits, il suffit de choisir un pack d'icônes qui vous plaît, personnellement je vais sur icomoon, leur bibliothèque d'icônes à triplé en 3 mois, l'interface est cool et pis c'est gratos). Bon ça c'est fastoche je ne vais pas m'étendre là-dessus.