Installer Ruby On Rails + Passenger pour Apache2 sur Debian | D-Sites. Certains outils très intéressants utilisent Ruby On Rails, il faut donc l'installer. Nous allons voir comment installer Ruby On Rails en installant en premier lieu le langage Ruby puis son gestionnaire de paquets, RubyGems, puis, grâce à celui-ci, Rails. Installer Ruby depuis les sources Nous allons compiler et installer Ruby nous-même. Pour ce faire, nous allons télécharger puis décompresser la dernière version stable de Ruby: wget tar xzf stable-snapshot.tar.gz Maintenant, nous allons très simplement configurer, compiler puis installer Ruby. cd ruby . Note: Exécutez ces commandes en tant que super-utilisateur. Pour plus de facilitée, je vous conseil de créer un lien symbolique vers l'exécutable ruby afin de la pas avoir à renseigner le chemin complet à chaque fois: ln -s /etc/ruby/bin/ruby /usr/bin/ruby Installation de RubyGems Maintenant, nous allons installer RubyGems, le gestionnaire de paquets de Ruby.
RubyGems est à présent installé. Ruby on Rails Screencasts - RailsCasts. Apprenez Vim Progressivement. Tlpl: Vous désirez apprendre vim (le meilleur editeur de texte connu à ce jour) le plus rapidement possible. Voici mes conseils pour vous aider. Commencez à apprendre le minimum vital, puis apprenez doucement de nouvelles commandes. Vim ou l’éditeur qui vallait 3 milliards : Meilleur, plus fort, plus rapide. Apprenez vim et ce sera votre dernier éditeur. Je vous conseille de l’apprendre en 4 étapes : La survieSe sentir à son aiseSe sentir meilleur, plus fort et plus rapideTirer parti des super-pouvoirs de vim À la fin de ces leçons vous serez transformé. Avant de commencer, un message pour vous prévenir. 1er Niveau – Survivre Installez vimLancez vimNE TOUCHEZ A RIEN! Dans un éditeur normal, il suffit de taper sur une touche du clavier et la lettre s’affiche à l’écran.
Voilà, c’est magique. Maintenant que vous savez passer du mode Normal au mode Insert. I → Passer en mode insértion. Seulement 5 commandes. Mais avant un petit mot sur le mode Normal. Quelques mots concernant les notations : D3.js - Data-Driven Documents. D3.js. Front / Back | jkneb + skoua. Build a Street Fighter Demo with CSS Animations and JavaScript. I recently learned a cool technique from Simurai about how to animate PNG sprites with the CSS3 animations' steps() property.
The main idea in this technique is to "recreate" some kind of animated GIF but with the tiles of a PNG sprite. As with everyone I know, I played to Street Fighter in my childhood and when I saw this ... guess what popped in my head? If the pen doesn't render above, click here to see it in action. Let's Create the First CSS Move We'll start with the punch (see in the sprite bellow it's the third one). First we need to open Photoshop to create the sprite. Make all images the same size (these ones are 70px width and 80px height). Then we need to set up a DIV for Ken which will receive our punch move (and all our other future moves): Let's assume vendor prefixes are implicitly working. What we just did is apply an animation (punch) to a class name (.punch) which basically animates background-position from 0px to -280px (on x axis).
Take it to the Next Level with SASS. Web Design Tutorials. How to Create a Responsive CSS-only Slider. In this tutorial we’ll create a simple responsive home page with a header embellished with a carousel where photos slide from right to left. Our solution will not require javascript, we’ll make our slideshow using css3 animations – supported by all major browsers: Firefow 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ and IE10. Step 1 – Prerequisities We will need 4 large photos, mine are 1200px x 390px. To have a horizontal slider I’ll create a 4800px x 390px image in Photoshop, place my four images one after another in a row and save the image for the web (“slider-horizontal.jpg”).
Step 2 – HTML In fact we will animate the background-position of our header element. <header><h1>L'ile de Batz</h1></header> The complete html is as follows <! Step 3 The “mobile-first” basic css We will not start with the large screen styles. Step 4 Large screen styles On large screens we want the .main and .screen sections to be displayed differently. Step 5 Responsive image in the header Step 6 Animation Conclusions. Diagonal Thumbnails Gallery. We got used to standard grids and clear horizontal and vertical axes. No wonder that the eye-catching layouts based on the diagonal lines have become one of the recent trends in web design.
In this tutorial we will create a very simple diagonal thumbnails gallery. We will use css3 2D-transforms and pseudo elements to display the diamond-shaped elements with a background image. Note that to keep the code below concise I omit the vendor prefixes before “transform” and “transform-origin”. Step 1 Prerequisites To recreate the demo gallery you will need 6 images (mine are 250px x 250px) stuck together into one sprite (mine is 1500px x 250px and you can see it right below). Step 2 A single diamond Here is the markup for a single diamond thumbnail.
<a class="diamond thumb" id="cake" href=""><p>A cherry</p></a> Step 3 Rotate a square Let’s start writing some css. Step 4 Rotate the background image We rotated the square but its background image got rotated as well, and this is not a desired effect. Css-only Lavalamp-like Fancy Menu Effect.
This time let’s get inspired by the sliding menu effect, also known as the Lavalamp effect (ex. here). We’ll recreate it with pure css – using css3 transitions and the general sibling combinator selector. Below we’ll discuss three simple examples (make sure to see the demo first). Step 1 – Prerequisites We use a Unica One google web font. In the “heart & arrow” example we use three images combined into a sprite image as below : Step 2 – HTML For each of the three examples the html is the same. <div class="nav ph-line-nav"> <a href="#">Home</a> <a href="#">About</a> <a href="#">Gallery</a> <a href="#">Contact</a> <div class="effect"></div></div> The general sibling selector uses a tilde character combinator (E ~ F) and matches elements that are siblings of a given element.
Step 3 – CSS – all examples Let’s start with the styles that are common for all three examples. The crucial part of the lavalamp-like effect happens here : Step 4 – Into the details (1) Step 5 – Into the details (2)