Protips

Vos changements en temps réel avec LiveReload


Vous avez la fâcheuse habitude de réactualiser votre page Web à chaque modification à grand coup de F5? Avec LiveReload plus besoin!

  • Installez le logiciel

  • Ajoutez le ou les dossiers de votre projet

  • Ajoutez le script indiqué en début de votre page HTML

    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

  • A chaque sauvegarde de votre projet, votre navigateur réactualise automatiquement la page.

La méthode avec ajout de script fonctionne sur tout les navigateurs, mobiles et tablettes compris! Il existe également des extensions spécifiques pour éviter d'ajouter le script mais je n'ai pas réussi à installer celle pour Chrome.

Utilisez LESS dans Atom


LESS est un framework CSS permettant entre autres d'insérer des variables ou d'imbriquer des sélecteurs en CSS pour se faciliter la vie.

Pour auto générer le fichier CSS dans Atom il faut tout simplement installer l'extension less-autocompile.

Ensuite vous créez votre fichier .less, puis ajoutez la ligne de commentaire indiquant l'emplacement de votre futur fichier .css

// out: style.css, sourcemap: true, compress: true

A la prochaine sauvegarde de votre fichier .less, le fichier css sera automatiquement généré.

Voilà de quoi rendre moins fastidieux la création et l'édition de vos CSS.

Téléchargez Windows sur les serveurs officiels


Vous devez réinstallez Windows, manque de bol vous n'avez plus de CD ou DVD sous la main. Voici où récupérer les différentes ISO sans avoir besoin de dégainer votre clef.

Windows 7 SP1

Des liens officiels existent pour télécharger les ISO des différentes versions.

  • Windows 7 Familiale: x86 / x64
  • Windows 7 Professionnel: x86 / x64

L'outil officiel suivant permet de créer une clef USB bootable: Windows USB/DVD Download Tool

Microsoft a décidé de tirer définitivement un trait sur Windows 7, les ISOS ne plus aussi facile à récupérer qu'avant.

Windows 8/8.1

Vous pouvez utiliser cet utilitaire qui vous permettra de télécharger n'importe quel version de Windows 8 et de créer un DVD ou une clef USB bootable.
http://windows.microsoft.com/en-us/windows-8/create-reset-refresh-media

Windows 10

Une page officielle permet de télécharger directement les isos.
ISO Windows 10

Vous pouvez utiliser cet utilitaire qui vous permettra de télécharger n'importe quel version de Windows 8 et de créer un DVD ou une clef USB bootable.

La capture du futur avec ShareX et Amazon S3


Oubliez la capture Windows

Pour capturer et partager en 2 temps 3 mouvements votre écran à l'aide d'un raccourci clavier, il y a une tonne de logiciels comme Puush ou Gyazo, mais la solution la plus élégante et flexible reste ShareX.
Le logiciel est plus compliqué à appréhender, mais vous autorise à peu près tout ce qui est possible en matière de capture d'écran. Le gros plus, c'est que vous êtes entièrement libre de choisir vos hébergeurs et de fuir en cas de débandade (coucou Imgshack et Uppix). Vous n'allez pas savoir où donner de la tête entre, Imgur, Pomf.se, Imgshack, TinyPic, Google Drive, OneDrive, Flickr, FTP, Amazon S3, Minus, etc.

Vous pouvez héberger sur tout service possible et inimaginable. Vous pouvez sélectionner indépendamment un hébergeur de photo, de texte et pour les plus gros fichiers.

Pour capturer rien de plus simple:

  • Impr Ecran pour tout l'écran

  • Ctrl + Impr Ecran + Sélection de la zone de capture

  • Shift + Impr + Sélection de la zone de capture vidéo (ShareX vous proposera d'installer FFMpeg.exe)


Aller plus loin avec Amazon S3 et votre propre nom de domaine

C'est bien beau tout ça mais le but c'est de s'affranchir des contraintes des hébergeurs classique avec votre adresse perso et taille illimitée. Créez vous un compte sur AWS et dirigez vous dans la sélection des destinations dans ShareX et la catégorie Amazon S3.

De cet page vous disposez du raccourci direct vers la page de vos paramètres de sécurité qui vous permet de génerer vos Access Keys (Access Key ID and Secret Access Key) que vous copie collerez dans ShareX.
Le second raccourci vous renvoie vers votre espace Amazon S3 où vous créerez votre "bucket" pour ShareX dans votre zone géographique (attention Francfort n'est pas encore supporté).
Pour le nom du bucket utilisez votre nom de domaine, personnellement j'ai opté pour un nom de domaine sur Namecheap. Reportez bien l'adresse de votre bucket correspondant à votre région.
Cochez "Utilisez un domaine personnalisé" et "Utiliser le stockage de Redondance Réduite" pour diminuer la facture Amazon S3.

Maintenant direction votre registrar pour le rediriger vers votre bucket Amazon. Créez un CNAME (ALIAS) qui redirige vers la région de votre bucket:
s3-eu-west-1.amazonaws.com. pour l'Irelande par exemple. Faites attention au point final, c'est important!

Dans mon cas, j'ai créé un sous domaine up.cybercerveau.fr

Et voilà vous disposez de votre propre hébergeur, ce n'est pas gratuit mais c'est classe! Pour vous donnez un ordre d'idée du coût j'y stocke des mp4 et des webm depuis plus d'un an, j'approche les 6GB et je suis à 0,17$ par mois sur Amazon S3. Faites tout de même attention de ne pas partager sur Reddit une vidéo à succès, vous risqueriez de douiller si elle a du succès.

Blog Ghost sur Docker via Digital Ocean


Ce blog Ghost est hébergé sur Digital Ocean via un container Docker et le nom de domaine a été enregistré chez Namecheap. Vous en voulez un? Le plus simple pour y arriver est de suivre ce guide

Pour commencer payez vous un nom de domaine, une étape importante qui vous permettra d'accéder plus facilement à votre serveur. Sur Namecheap les prix sont assez intéressants sur le long terme à 9€ par an pour un .fr. Si vous voulez juste un nom pour vous amuser 1 an, il y a des offres à 1,50€ et quelques chez 1and1 et OVH, mais attention ça passe à 15€ au delà.

Ensuite j'ai choisis DigitalOcean, une offre de serveur cloud assez intéressante comparé à Rackspace et Amazon AWS avec des tarifs agressifs et en plus les performances sont au rendez vous.
Ensuite munissez vous de vos clefs SSH, PuTTY Key Generator vous en générera si vous êtes sur PC.

Création des clefs

Pensez à sauvegarder la private key sur votre machine et copiez coller la public key dans votre interface Digital Ocean dans Votre mail>Settings>Security.

Ensuite créez votre serveur Digital Ocean en choisissant la taille de votre choix, le serveur le plus proche de vous, Amsterdam dans mon cas.

Personnellement j'ai opté pour Docker et son système de container pour plus de flexibilité. C'est comme de la virtualisation en moins contraignant et pour faire cohabiter des projets en différents langage c'est vraiment pas mal. Pensez à ajouter clef SSH que vous venez et de créer et c'est parti!

Une poignées de secondes plus tard, votre instance Docker est fin prête! Retour sur votre registrar pour configurer le nom de domaine avec l'IP de votre machine virtuelle. Je préfère m'en occuper avec le registrar car j'ai des sous domaines qui pointent ailleurs et on peut régler le TTL à 60.

Bon jusqu'ici c'était facile, il va falloir passer sur le terminal pour déployer Ghost. Dans Putty ajoutez l'adresse de votre serveur dans Session et dirigez vous dans Connection>SSH>Auth pour y ajouter la clef privé que vous avez préalablement créé. Retournez sur Session enregistrez vos paramètres et lancez vous en cliquant sur open. Si tout se passe comme prévu vous vous retrouvez aux commande de votre serveur Ubuntu + Dokku. Pour installer Ghost rien de plus simple

docker run --name some-ghost -p 8080:2368 -d ghost

8080 étant le port entrant redirigeant vers le port 2368 de votre Ghost.
Pour accéder à votre blog proprement il suffit de créer la règle iptables 80 vers 8080.

iptables -A INPUT -i eth0 -p tcp --dport 80 -j ACCEPT

iptables -A INPUT -i eth0 -p tcp --dport 8080 -j ACCEPT

iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080

Et voilà votre Blog est accessible à son adresse, vous n'avez plus qu'à aller dans l'admin en y ajoutant /ghost. Bonne chance avec votre blog! A plus pour apprendre à jongler avec les images Docker.