Archives de l’auteur : tykayn

Mise en forme de code coloré sur votre site

assez souvent je croise des blogs contenant des portions de code malheureusement non mises en couleur selon le langage.

C’est pourtant pas si compliqué à mettre en place.
de nombreux plugins de blogs wordpress, drupal, dotclear le proposent, si vous écrivez sur un blog.
Ou bien il suffit d’inclure une lib JS (en fin de corps de page) qui se chargera de détecter vos balises ou

, de deviner de quel langage il s’agit et de le colorer en conséquence. Sauf que le langage n’est pas toujours bien détecté car plusieurs langages utilisent des structures et des mots clés similaires,
il faut souvent utiliser un marquage pour éviter les colorations qui n’ont rien à voir.
pour dotclear, sur lequel fonctionne ce blog j’utilise YASH.
il faut mettre son code dans une balise de préformatage
 et lui mettre une classe brush:js par example. Ce qui est un peu relou.
ce qui donne ceci dans le code HTML



 là on est dans du html moche mais coloré 
Mais syntaxeHL fait aussi très bien l’affaire:
http://plugins.dotaddict.org/dc2/details/syntaxehl
// wow ce code est trop mieux en couleur
var bonjour = 'Hello Monde!';

Mais si vous voulez un joli thème de coloration y’a le projet HighLightJS qui non seulement met en forme plus de 50 lagages, mais dispose aussi d’un bon paquet de thèmes dans leur démos.
Le site propose aussi de créer un pack de la lib pour ne mettre en forme que certains langages choisis. Vu qu’en général on ne parle pas de quinze mille langages différents sur le même site c’est une option fort chouette.
J’ai donc uploadé le pack.js dans mon dossier public de dotclear ainsi que le thème css qui va bien.
j’ai ajouté l’appel au script dans le footer tpl/_footer.html de mon thème dotclear, 
<script src="/public/highlightjs/highlight.pack.js">script>
<script>hljs.initHighlightingOnLoad();script>
<link rel="stylesheet" href="/public/highlightjs/agate.css">
le code d’exécution dans une autre balise script, chargé le css dans l’entête du fichier tpl/_head.html
Comme sur ce blog j’utilise la balise de code pour montrer du code, et que la mise en forme d’highlightjs s’applique à une balise
 (le bonheur est dedans) contenant la balise code, j'ai rajouté une ligne de jquery pour enlevopper mes balises codes d'un préformatage. 


$('.post-content code').wrap('pre')


ainsi je peux spécifier la classe du nom du langage sur ma balise code et elle est conservée.


c'est facile à mettre en place, et zoup! ça améliore l'expérience de lecture donc pourquoi s'en priver ? ;)


enjoy!






Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies.  
		   
Le plus simple nous pour nous faire connaître étant de partager cet article.

Suivez moi sur Mastodon 
            
            
         
		@tykayn@mastodon.cipherbliss.com.

Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!


			

	
	


							


	

		
				

			dual boot windows 10 et linux
		

			


		

		


Quelle déconvenue après avoir installé ubuntu 14.04 sur mon nouveau laptop (Acer v nitro) ayant windows 10 préinstallé, déjà, je n’ai pas réussi a le faire à partir d’une clé live usb faite avec unetbootin, quelle que soit la boot config dans le bios. Ensuite, impossible de voir le menu grub. Windows démarre juste après le slpash screen d’Acer sans proposer de choix ni  montrer une seule seconde le menu grub.

Pour arriver a faire démarrer sur grub il fallait faire trois choses:

1/ dans le bios. (touche f2 lors du démarrage)

assurez vous que le boot est en mode UEFI.

désactiver le secure boot dans la partie sécurité. sauver et redémarrer,

2/ dans windows 10

désactiver fast boot dans les options d’alimentation > (bouton pour autoriser les modifications) décocher le « démarrage rapide », sauvegarder. (une nouveauté depuis windows 8 qui devait faire une vraie différence quand on avait pas de SSD à l’époque)

3 / toujours dans windows,

lancer la commande suivante dans une invite de commande (lancée en tant qu’administrateur) afin que le boot prenne en charge la config de grub.


bcdedit /set {bootmgr} path \EFI\ubuntu\grubx64.efi


faites entrée, et ça devrait vous dire que ça a réussi.

(astuce prise de cet article http://itsfoss.com/no-grub-windows-… )


redémarrez et priez pour voir le menu grub. et vouala!




Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies.  
		   
Le plus simple nous pour nous faire connaître étant de partager cet article.

Suivez moi sur Mastodon 
            
            
         
		@tykayn@mastodon.cipherbliss.com.

Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!


			

	
	


							


	

		
				

			le triangle du projet
		

			


		

		
every_it_job.png




Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies.  
		   
Le plus simple nous pour nous faire connaître étant de partager cet article.

Suivez moi sur Mastodon 
            
            
         
		@tykayn@mastodon.cipherbliss.com.

Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!


			

	
	


							


	

		
				

			avoir une vie privée
		

			


		

		


une petite vidéo de la quadrature du net, expliquant en deux minutes pourquoi il est essentiel d’avoir une vie privée, et qu’avoir des choses à cacher de quelqu’un ce n’est pas suspect, c’est juste privé.


Pas convaincu? Alors donnez moi plein accès à vos comptes email, les clés de chez vous et à vos comptes en banques. Vous ne voulez pas? c’est pour votre bien, pour lutter contre le terrorisme, pour votre sécurité. Ah, vous voyez, vous commencerez à douter. Profitez en, on risque de ne plus y être autorisé sous peu.



Ce n’est pas si ironique de poster cette vidéo sur youtube, un site qui fait open bar de vos données à la NSA. c’est justement un bon endroit pour se faire entendre.





Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies.  
		   
Le plus simple nous pour nous faire connaître étant de partager cet article.

Suivez moi sur Mastodon 
            
            
         
		@tykayn@mastodon.cipherbliss.com.

Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!


			

	
	


							


	

		
				

			les couleurs de la RATP dans SASS
		

			


		

		
si vous avez dans l’idée de faire un petit projet web incluant les couleurs des lignes de métro / RER / Tram parisien, voici les codes couleurs choppées à coup de pipette (on peut aussi trouver ces codes hexadécimaux sur wikipedia).

Vous pouvez les utiliser dans votre css avec ces variables faites pour le language de preprocessing SASS.


Vous pouvez voir ce que donnent les compilations sass en ligne et vous exercer sur sassmeister.com


 


ensuite il vous faudra des classes pour appliquer ces couleurs sur vos lignes.


/** metros**/

.metro_1 {

background: $metro_1 !important;

}

.metro_2 {

background: $metro_2;

}

.metro_3 {

background: $metro_3;

}

.metro_3BIS {

background: $metro_3BIS;

}

.metro_4 {

background: $metro_4;

}

.metro_5 {

background: $metro_5;

}

.metro_6 {

background: $metro_6;

}

.metro_7 {

background: $metro_7;

}

.metro_7BIS {

background: $metro_7BIS;

}

.metro_8 {

background: $metro_8;

}

.metro_9 {

background: $metro_9;

}

.metro_10 {

background: $metro_10;

}

.metro_11 {

background: $metro_11;

}

.metro_12 {

background: $metro_12;

}

.metro_13 {

background: $metro_13;

}

.metro_13BIS {

background: $metro_13;

}

.metro_14 {

background: $metro_14;

}

/** trams **/

.tram_1 {

color: $tram_1;

border: solid 3px $tram_1;

}

.tram_2 {

color: $tram_2;

border-color: $tram_2;

}

.tram_3 {

color: $tram_3;

border-color: $tram_3;

}

.tram_4 {

color: $tram_4;

border-color: $tram_4;

}

.tram_5 {

color: $tram_5;

border-color: $tram_5;

}

.tram_6 {

color: $tram_6;

border-color: $tram_6;

}

.tram_7 {

color: $tram_7;

border-color: $tram_7;

}

.tram_8 {

color: $tram_8;

border-color: $tram_8;

}




Et si vous voulez personnaliser tout ça dans un mixin pour choisir que colorer avec vos variables, c’i possible!




Admettons que, comme ci dessus l’on veuille une classe pour chaque ligne afin de colorer une bordure.


Pour ça on va utiliser des tableaux associatifs(clé: valeur), sta dire des maps,


et des tableaux non associatifs, des listes (élément1, élément2).


On définit une map de famille de transport (métro, tram, rer), puis une couleur pour chaque ligne.


Puis on définit notre @mixin qui fait une classe avec bordure correspondante.


grâce à l’interpolation de variable on peut faire des noms de classe css (et d’autres choses) dynamiques.


exemple:


$name: foo;

$attr: border;

p.#{$name} {

#{$attr}-color: blue;

}


Allez donc voir les quelques fonctions existantes sur les maps. Ici on se servira uniquement de celle qui retourne la valeur pour une clé donnée.


Avec @each on va parcourir notre map et créer des classes en conséquence avec notre mixin, appelé par la directive @include.


Ensuite si on veut que nos classes soient différentes pour les métros et les trams on a plus qu’a faire un autre mixin, et voilà!




// variables de couleurs

$metro_1: #fdce00;

$metro_2: #0267af;

$metro_3: #a1971b;

$metro_3BIS: #96d7dd;

$metro_4: #b74288;

$metro_5: #de8b53;

$metro_6: #79bb92;

$metro_7: #e8a8b8;

$metro_7BIS: #7cc485;

$metro_8: #cfa9d0;

$metro_9: #cec92b;

$metro_10: #dfb039;

$metro_11: #8e6538;

$metro_12: #328e5b;

$metro_13: #a0cccb;

$metro_14: #612684;

$tram_1: #0564b1;

$tram_2: #c74896;

$tram_3: #90613b;

$tram_3a: #90613b;

$tram_3b: #ec8a42;

$tram_4: #fcc11b;

$tram_5: #0564b1;

$tram_6: #ec5738;

$tram_7: #90613b;

$tram_8: #999738;

$rer_a: #cf532e;

$rer_b: #5191cd;

// maps de couleurs

$metro_colors: (

'1' : $metro_1,

'2': $metro_2,

'3':$metro_3,

// etc

);

$tram_colors: (

'1' : $tram_1,

'2': $tram_2,

// etc

);

$rer_colors: ('a' : $rer_a,

'b': $rer_b);

// map de famille

$sisi_la_famille: (

'metro' : $metro_colors,

'tram' : $tram_colors,

'rer' : $rer_colors,

);

// mettre une bordure à gauche selon la famille et le numéro de ligne

@mixin lineBorder($famille,$nom) {

$famille_map: map-get($sisi_la_famille, $famille);

.#{$famille}_#{$nom} {

border-left: 3px solid map-get($famille_map, $nom);

}

}

// faire un style différent pour les trams

@mixin tram($nom,$color) {

.tram_#{$nom} {

color: $color;

border-color: $color;

}

}

@warn "yeah";

// boucle-ception

@each $famille, $list in $sisi_la_famille {

@each $key, $val in $list {

// traitement différent pour les trams

@if ($famille == 'tram') {

@include tram($key, $val);

} @else {

@include lineBorder($famille, $key);

}

}

}


Enjoy!






Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies.  
		   
Le plus simple nous pour nous faire connaître étant de partager cet article.

Suivez moi sur Mastodon 
            
            
         
		@tykayn@mastodon.cipherbliss.com.

Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!


			

	
	


							


	

		
				

			des live templates pour angular dans intelliJ
		

			


		

		


(ceci est un live template)

j’utilise PHPstorm pour faire des projets avec du angular dedans (entre autres), et pour gagner en performance et en confort, heureusement qu’il y a les live templates.

éditables dans les settings, ils permettent de créer des fichiers xml dans le dossier de templates, ( dans le dossier: ~/.WebIde80/config/templates , avec un nom qui ressemble à .WebIde80 selon la version de votre IDE)  

et de vous faire des raccourcis paramétrables.


des projets sur github permettent de rajouter des suites de code template pour vous faciliter la vie.

aujourd’hui je vais vous vanter les mérites d’un dépot fort sympa pour faire des tests jasmine et divers trucs de routine dans angular: angularjs-webstorm-livetpls


clonez le dépot, copiez ses fichiers .xml dans votre dossier de templates, redémarrez votre IDE, et hop, magie vous avez des code templates trop bien. zieutez de quoi ils ont l’air dans les settings, vous pourrez les renommer à votre convenance tant que deux templates n’ont pas la même abbréviation.

et si vous voulez en savoir plus sur les live/code templates pour faire les vôtres, zieutez la doc officielle.




Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies.  
		   
Le plus simple nous pour nous faire connaître étant de partager cet article.

Suivez moi sur Mastodon 
            
            
         
		@tykayn@mastodon.cipherbliss.com.

Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!


			

	
	


							


	

		
				

			le bash de vos rêves
		

			


		

		
on peut personnaliser son bash ultrafacilement grâce a ce merveilleux site, bashrcgenerator:

http://bashrcgenerator.com/


glissez déposez les éléments, cliquez sur un élément pour choisir sa couleur, et hop vous avez le code a rajouter dans votre .bashrc pour mettre de la couleur dans votre console.


Essayez donc de mettre cette commande d’export à la fin de votre .bashrc, et de relancer bash.


$ nano ~/.bashrc

# titre du terminal personnalisé

PROMPT_COMMAND='echo -ne "\033]0;${USER}@${HOSTNAME}: ${PWD}\007"'

# prompt personnalisé

export PS1="\[\033[38;5;214m\]\T\[$(tput sgr0)\]\[\033[38;5;15m\] \[$(tput sgr0)\]\[\033[38;5;192m\]\u\[$(tput sgr0)\]\[\033[38;5;42m\]@\[$(tput sgr0)\]\[\033[38;5;84m\]\h\[$(tput sgr0)\]\[\033[38;5;70m\]:\[$(tput sgr0)\]\[\033[38;5;6m\]\w\[$(tput sgr0)\]\[\033[38;5;15m\] \[$(tput sgr0)\]"




on enregistre avec ctrl +o, on sort avec ctrl + x. et hop!


$ bash


et vouala:




02:23:52tykay@mycomputer:/usr/local/src




Arpès, si vous êtes des fifous, vous pouvez aussi blinder votre prompt en lui rajoutant des infos du dépôt git dans lequel vous vous trouvez.




Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies.  
		   
Le plus simple nous pour nous faire connaître étant de partager cet article.

Suivez moi sur Mastodon 
            
            
         
		@tykayn@mastodon.cipherbliss.com.

Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!


			

	
	


							


	

		
				

			customiser son serveur
		

			


		

		
Certaines commandes sont nécessaires à la maitrise d’un environnement unix, et puis il y a celles absolument pas indispensable.

Par example, celles qui vous permettent de mettre un ASCII art au login sur votre serveur avec le message du jour (message of the day, motd).


changer le nom de votre machine (hostname).


il faut aussi changer le nom de l’hôte dans /etc/hosts


$ sudo nano /etc/hosts


redémarrez le service hostname.


$ sudo service hostname restart


et voilà votre nom d’hôte changé \O/


mettre un message du jour à la connexion.


le message du jour est généré grâce aux scripts dans /etc/update-motd.d/

vous pouvez donc ajouter un script perso.


$ nano /etc/update-motd.d/99-tktrucs


et mettre dedans des trucs trop importants. 


#!bin/bash

echo "un grand pouvoir entraine de grandes responsabilités"


et il faudra lui donner les droits de s’exécuter.


$ sudo chmod +x /etc/update-motd.d/99-tktrucs


ce fichier permet de rajouter du contenu à la fin du message du jour


$ sudo nano /etc/motd.tail


utilisez le générateur d’ASCII art pour faire des trucs trop impressionants.


http://www.network-science.de/ascii/


astuce bonus pour se loguer de façon plus sécurisée.


copier sa clé publique sur un serveur distant







$ ssh-copy-id -i ~/.ssh/id_dsa.pub titi@toto.host.org


Password:









sources:

http://doc.ubuntu-fr.org/motd

https://askubuntu.com/questions/87665/how-do-i-change-the-hostname-without-a-restart


http://www.generation-linux.fr/index.php?post/2008/06/07/117-changer-le-message-d-accueil-sur-ssh


http://www.network-science.de/ascii/






Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies.  
		   
Le plus simple nous pour nous faire connaître étant de partager cet article.

Suivez moi sur Mastodon 
            
            
         
		@tykayn@mastodon.cipherbliss.com.

Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!


			

	
	


							


	

		
				

			des tests plus rapides avec jasmine
		

			


		

		


Jasmine, framework de test en javascipt dispose de quatre fonctions intéressantes pour rendre l’exécution de vos nommmmmmbreux tests JS. Parce que bien sûr, vous testez votre javascript, nesspa?


Bien, donc,

on développe des blocs de test avec describe() et it()


vous pouvez demander à jasmine de ne pas exécuter de bloc en utilisant xdescribe() et xit().

et vous pouvez lui demander de n’exécuter que certains blocs et assertions avec fdescribe() et fit()


ce qui devrait faire tourner le tout plus vite, notamment si vous avez dans les 500 assertions et que vous bossez seulement sur une certaine partie.


une astuce pour ensuite ne pas faire de push avec ces blocs spéciaux, c’est de se créer un hook sur git.

parce que vous utilisez git, nesspa?

Bien, donc, avec un terminal ouvert dans votre projet, dans le dossier .git.


touch .git/hooks/pre-commit
chmod +x .git/hooks/pre-commit

et mettez y de quoi vérifier que vous n’avez pas de fdescribe( , de fit( dans vos fichiers de tests.
#!/bin/sh
# A git pre-commit hook that verifies that the change does not introduce
# the use of a Jasmine exclusive test , which would
# prevent most other tests from being run without any clear indication thereof

 FILES_PATTERN='\.(js|coffee)(\..+)?$'
FORBIDDEN='fit('
git diff --cached --name-only | \
    grep -E $FILES_PATTERN | \
    GREP_COLOR='4;5;37;41' xargs grep --color --with-filename -n $FORBIDDEN && echo 'COMMIT REJECTED Found "$FORBIDDEN" references. Please remove them before commiting' && exit 1

Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies.   Le plus simple nous pour nous faire connaître étant de partager cet article. 
Suivez moi sur Mastodon     @tykayn@mastodon.cipherbliss.com. 
Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!
 paye ton arrondi en js
F12. dans la console javascript écrivez:
 999999999999999
 faites entrée. la console vous répond:
 999999999999999
mais écrivez un 9 de plus
 9999999999999999
 faites entrée. la console vous répond:
 10000000000000000
narmol.
Si vous aimez ce que nous faisons à Cipher Bliss, vous pouvez nous soutenir de plusieurs façons: en faisant un micro don sur liberapay , ou en cryptomonnaies.   Le plus simple nous pour nous faire connaître étant de partager cet article. 
Suivez moi sur Mastodon     @tykayn@mastodon.cipherbliss.com. 
Ce site restera libre comme un gnou dans la nature et sans pubs, parce qu'on vous aime. Que la source soit avec vous!