Juste ce qu’il faut pour démarrer vite fait bien fait !

L’article Outil – Générateur de grille responsive fluide est apparu en premier sur DesireLabs.

Suite à ça on est redirigé vers le site app.crossbrowsertesting.com sur lequel on créé un compte gratuit puis on sélectionne la version du navigateur ainsi que l’OS voulu pour le test. C’est simple et efficace !

L’article Astuce – Tester son code frontend dans toutes les versions d’Internet Explorer via CodePen.io est apparu en premier sur DesireLabs.

Les plus malins auront remarqué le lien de parenté avec Gist de GitHub. En effet, la connexion s’effectue via votre compte GitHub si vous en possédez un. Du coup vous retrouvez aussi tous vos snippets sur Gist. Alors l’intérêt par rapport à Gist ? On simplifie au max l’interface, on offre la possibilité de labeliser ses bout de code et exit le reste. Par défaut, les snippets sont privés, et si vous souhaitez les rendre publics, il faut se rendre sur Gist. oui, c’est un peu relou, mais il y a fort à parier que d’ici peu vous n’aurez plus besoin de faire de va et vient.

A delà de ça on peut aussi créer des groupes de travail et inviter des personnes pour leur partager de manière privée les snippets que vous souhaitez. Je trouve ça assez cool, même si pour l’instant je n’en ai pas l’utilité.Pour finir sur les fonctions de partage, on peut mailer, twitter ou faire un embed de son gist à peu près où on veut. Exemple :

Plutôt chouette non ?

Autre truc sympa : Au sein d’un même gist, on peut mettre plusieurs snippets, plutôt utile quand on fait du html/css/javascript

Très honnêtement, GistBox n’est pas parfait et pas mal de choses restent à faire selon moi, mais c’est vraiment un chouette outil qui fait la part belle à l’utilisabilité tout en offrant à l’utilisateur de coupler le tout avec son compte GitHub. Ce qu’il manque par contre à mon avis :

• La possibilité de créer des labels avec des couleurs choisies via une palette dédiée
• Une gestion plus fine de la fonction de trie
• La possibilité de rendre public ou privé un snippet sans avoir à se rendre sur Gist

EDIT du 18/11/2014 : En réalité, il est possible de spécifier le statut public ou privé d’un gist, mais uniquement lors de sa création.

Au delà de ça, si vous avez comme moi tout plein de snippets et que vous aimez y accéder où et quand vous voulez, alors n’hésitez pas, l’essayer c’est l’adopter !

L’article Outils – Organisez proprement vos snippets avec GistBox est apparu en premier sur DesireLabs.

EDIT du 22/08/2015 : Cette fonctionnalité ne semble plus être disponible sur la version 42 developer edition. Tristesse…

Alors ok, dit comme ça on se demande un peu ce que c’est que ce gadget. Et bien à mon sens ça n’en est pas un, car il me sauve souvent la mise lorsque je travaille sur de longues et lourdes pages au DOM chargé, surchargé et enchevêtré dans du code java ou php à n’en plus pouvoir. Dans ce genre de cas, il arrive parfois de mal fermer une balise par exemple. Et alors quand il y a un millier de lignes je ne vous raconte pas l’angoisse. Mais ça c’était avant que je ne découvre cette fonctionnalité

Grâce à elle, les blocs (entendre les blocs de balises) sont présentés en perspective 3D à la façon de calques superposés. On y voit de suite beaucoup plus clair Bon ça bouffe quand même des ressources matérielles, mais comme je m’en sers ponctuellement, ça n’est pas dramatique.

Par ailleurs on peut, dans cette vue sélectionner l’élément voulu, et automatiquement, il l’est aussi dans l’inspecteur. Plutôt pratique !

Pour activer cette fonctionnalité, il suffit d’aller dans l’inspecteur d’élément de Firefox, puis dans les options des outils (petit engrenage en haut à droite), dans la partie « boutons de la boîte à outils », cocher « vue 3d ». Une nouvelle option apparaîtra en haut à droite de l’inspecteur, vous permettant de basculer en vue 3d.

Pour les allergiques de Firefox, il existe sous chrome une extension qui fait la même chose : 3D View for Webpages. Mais je ne l’ai pas testé et elle semble souffrir de quelques problèmes.

L’article Astuce – Vue du DOM en 3D sous Firefox est apparu en premier sur DesireLabs.

Cela laisse par ailleurs beaucoup de latitude quant aux versions des packages. Sous Linux, aucun problème : 3 coups de apt-get install et hop ! ça tourne Mais sous Windows c’est une autre paire de manches. Je vous propose donc aujourd’hui un tutoriel dédié à l’installation d’un serveur AMP sous windows 7. Ce tuto s’inspire librement des différentes sources que j’ai pu trouver sur le web, et tout particulièrement d’un tuto en anglais dont je vous donne le lien à la fin de cet article.

C’est parti !

0 – Les prérequis :

Avoir ses packages Microsoft Visual C++ à jour. Si vous êtes en 64bits, vous devez posséder la version x86 ET x64.

1 – Installation / mise à jour des packages Visual C++ en tant qu’administrateur

– Visual C++ 2005

x86 – http://www.microsoft.com/fr-fr/download/details.aspx?id=3387
x64 – http://www.microsoft.com/fr-fr/download/details.aspx?id=18471

– Visual C++ 2008

x86 – http://www.microsoft.com/fr-fr/download/details.aspx?id=29
x64 – http://www.microsoft.com/fr-fr/download/details.aspx?id=15336

– Visual C++ 2010

x86 – http://www.microsoft.com/fr-fr/download/details.aspx?id=5555
x64 – http://www.microsoft.com/fr-fr/download/details.aspx?id=14632

– Visual C++ 2012

x86 & x64 – http://www.microsoft.com/fr-fr/download/details.aspx?id=30679

– Visual C++ 2013

x86 & x64 – http://www.microsoft.com/fr-fr/download/details.aspx?id=40784

– Visual C++ 2015

x86 & x64 – https://www.microsoft.com/fr-fr/download/details.aspx?id=48145

2 – Installation de Apache 2.4

Prérequis : Être authentifié en tant qu’administrateur, sinon vous ne pourrez pas installer de service.

1. Récupérer la dernière version Apache httpd 2.4.x-x64 – https://www.apachelounge.com/download/VC11/binaries/ (nécéssite VC11 Update 4)
2. Dézipper dans C:\Apache24
3. dans C:\Apache24\conf\httpd.conf
   changer documentRoot
   par le chemin www souhaité
4. Changer serverName en localhost:80 et décommentez la ligne
5. vhost -> décommenter le chemin
   changer conf\extra\httpd-vhosts.conf avec ses propres vhost valides
6. Rajoutez le chemin C:\Apache24\bin\ dans votre path windows
7. tester les paramètres dans l’invite de commande cmd en exécutant httpd.exe
8. si tout test ok, installer le service via la commande httpd.exe -k install
   Puis quitter cmd
9. démarrer bin\ApacheMonitor.exe et tester que le serveur démarre
10. Exécuter « services.smc » et arrêter le service Apache2.4

3 – Installation de PHP 5.5.x x64

1. Télécharger la version correspondante (x64) – Non Thread Safe ! (à moins de savoir ce que vous faites) – http://windows.php.net/download/
2. Extraire l’archive dans C:\php
3. Dupliquer C:\php\php.ini-development en C:\php\php.ini
4. Ajouter à la fin de C:\Apache24\conf\httpd.conf
   

   LoadModule php5_module C:/php/php5apache2_4.dll
   
       DirectoryIndex index.html index.php
       AddHandler application/x-httpd-php .php
       PHPIniDir "C:/php"

5. tester httpd.exe pour vérifier les erreurs dans cmd
6. dans php.ini, décommenter les lignes :
   extension_dir = « ext » (permet d’aller chercher les extensions dans le dossier ext)
   Remplacez « ext » par le chemin complet, à savoir « C:/php/ext » par précaution.
   extension=php_mysql.dll
   extension=php_mysqli.dll
   extension=php_pdo_mysql.dll
   et optionnellement :
   extension=php_bz2.dll
   extension=php_curl.dll
   extension=php_gd2.dll
   extension=php_imap.dll
   extension=php_openssl.dll
   extension=php_pdo_odbc.dll
   extension=php_pdo_sqlite.dll

4 – Installer MySql

1. Télécharegr mysql-installer-web-community-5.6.20.0.msi – http://dev.mysql.com/get/Downloads/MySQLInstaller/mysql-installer-web-community-5.6.20.0.msi
2. Lancer l’installation avec les paramètres par défaut et en sélectionnant la version Developer durant l’installation
3. A la fin de l’installation il ne vous reste qu’à renseigner les paramètres de connexion

Démarrer Apache ! Et si tout s’est bien déroulé, vous avez à présent un serveur AMP fonctionnel.

5 – Notes

Il est tout à fait possible d’installer MySql en tant que service. Pour ce faire :

1. Dans cmd, taper mysqld –install
2. Puis mysqld start

Vous remarquez au passage que lors de l’installation de MySql, pas mal d’autres outils ont été installés, comme MySql Notifier qui vous permet de gérer le service MySql directement dans la barre de notifications Windows, ainsi que MySql Workbench qui vous permet de gérer vos bases en l’absence de phpMyAdmin.

Cependant et pour des raisons purement pratiques je n’utilise pas ce dernier et m’en remet entièrement à la ligne de commande qui reste pour moi plus efficace et performante que n’importe quelle interface, et surtout m’offre une vraie maîtrise de cee que je fais.

J’espère que ce petit tuto vous aura été utile, n’hésitez pas à poser vos questions si vous en avez ou vos remarques (je prends aussi ^^).

Inspiré de : http://superuser.com/questions/748117/how-to-manually-install-apache-php-and-mysql-on-windows

L’article Tutoriel – Installer un serveur Apache – PHP – MySql manuellement sous Windows 7 et 10 est apparu en premier sur DesireLabs.

Il s’agit de WpScan. Tout en ruby, il s’installe sur une machine Linux. Tout site WP peut être scanner. Ce qui fait de cet outil un joujou de choix pour les hackers potentiels. Je l’ai installé sur mon serveur pour tester, et c’est plutôt efficace. De plus toutes les failles qu’il remonte sont documentées avec plusieurs sources. Bravo aux développeurs de cette perle !

Je vous encourage à le tester. Voici le site ainsi que leur GitHub :

http://wpscan.org/

https://github.com/wpscanteam/wpscan

Si vous aussi connaissez des outils similaires, n’hésitez surtout pas à les partager !

A+

L’article Outil – Scanner de vulnérabilités WordPress est apparu en premier sur DesireLabs.

Pourquoi mettre son dossier www dans le répertoire /home de l’utilisateur ?

D’abord parce que c’est plus propre : chaque utilisateur à son login et son mot de passe, et donc son répertoire. Ainsi on sépare bien toutes nos entités et on s’y retrouve plus facilement.

Ensuite, parce que c’est plus sécurisé : Comme dit juste avant, on ferme tout et chaque utilisateur accède à son espace et pas celui des autres, grâce à son login/mot de passe. De plus, si comme moi vous avez installé votre /home sur une partition distincte de la partition système, vous ne risquez pas de perdre vos données web si jamais quelque chose tournait mal et que vous vouliez récupérer votre boulot.

Ce qu’on va faire

Création d’un espace individuel pour chaque site
Activation du module Apache UserDir
Configuration d’un virtual host associé

Avant de commencer

Toutes les manipulations présentées ici sont réalisées sur un système Debian 7 Wheezy, mais ça fonctionne également sur tout système de base Debian avec Apache2 d’installé, comme Ubuntu. Il va de soit que tout se passe en ligne de commande et qu’un minimum de connaissance du shell est nécessaire.

On y va

Création d’un utilisateur

sudo adduser wplabs

Activation du module Apache userdir

On active le module (1ère commande), puis on modifie sa configuration (2ème commande)

sudo a2enmod userdir
sudo nano /etc/apache2/mods-available/userdir.conf

Dans le fichier de config, on a juste un truc à modifier : public_html qu’on va transformer en www aux lignes 2 et 5. On pourrait très bien garder le nom « public_html », mais on va garder la cohérence du dossier /var/www.

<IfModule mod_userdir.c>
        UserDir public_html 
        UserDir disabled root

        <Directory /home/*/public_html>
                AllowOverride FileInfo AuthConfig Limit Indexes
                Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec
                <Limit GET POST OPTIONS>
                        Order allow,deny
                        Allow from all
                </Limit>
                <LimitExcept GET POST OPTIONS>
                        Order deny,allow
                        Deny from all
                </LimitExcept>
        </Directory>
</IfModule>

Voilà ce que ça donne :
Ce qu’on a fait ici c’est simplement dire que les fichiers visibles et accessibles (nos sites) se trouvent toujours dans le dossier /home/*/www (l’astérisque sert à dire n’importe quel utilisateur). Pensez à sauvegarder.

<IfModule mod_userdir.c>
        UserDir www 
        UserDir disabled root

        <Directory /home/*/www>
                AllowOverride FileInfo AuthConfig Limit Indexes
                Options MultiViews Indexes SymLinksIfOwnerMatch IncludesNoExec
                <Limit GET POST OPTIONS>
                        Order allow,deny
                        Allow from all
                </Limit>
                <LimitExcept GET POST OPTIONS>
                        Order deny,allow
                        Deny from all
                </LimitExcept>
        </Directory>
</IfModule>

Création du virtualhost

On se rend dans le dossier des vhost, et on commence par jeter un oeil à celui par défaut.

cd /etc/apache2/sites-available/
sudo nano default

Ça c’est mon vhost par défaut. Le votre est peut etre différent, mais ce qui importe c’est qu’il indique DocumentRoot /home/*/www
Vous remarquez ? Comme dans mon userdir.conf

<VirtualHost *:80>
        ServerAdmin neovea@gmail.com
        DocumentRoot /home/*/www
        <Directory />
                Options FollowSymLinks
                AllowOverride All
        </Directory>
        <Directory /home/*/www/>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride all
                Order allow,deny
                allow from all
        </Directory>
</VirtualHost>

Vu qu’il est bon, on le copie colle en le renommant du nom de notre site, et on l’édite.

sudo cp default wplabs
sudo nano wplabs

Renseignez bien le chemin tel qu’il existe cette fois ci, cf lignes 5 et 10, et faites en sorte d’avoir un alias/name valide, sans quoi ça ne fonctionnera pas.

<VirtualHost *:80>
        ServerAdmin neovea@gmail.com
        ServerAlias wplabs.desirelabs.fr
        ServerName wplabs.desirelabs.fr
        DocumentRoot /home/wplabs/www
        <Directory />
                Options FollowSymLinks
                AllowOverride All
        </Directory>
        <Directory /home/wplabs/www/>
                Options Indexes FollowSymLinks MultiViews
                AllowOverride all
                Order allow,deny
                allow from all
        </Directory>
</VirtualHost>

Activation du site et reload d’apache

Le reload est important, il permet de prendre en compte le nouveau site activé, mais aussi le module qui a été activé, userdir.

sudo a2ensite wplabs
sudo service apache2 reload

Création du site et tests

Rien de méchant, on se connecte avec le user qu’on a créé précédemment, et on lui fait créer un dossier www dans son propre espace.

su wplabs
cd
mkdir www

Alors oui c’est vrai on pourrait mettre tous les fichiers du site à la racine du user, mais je préfère procéder ainsi et me garder la liberté de pouvoir mettre des choses à côté du répertoire de mon site si je le souhaite, comme mes backups de base de données par exemple, ou simplement une nouvelle version du site en cours de développement.

Testez votre site en créant un bête index.html dans www et profitez

Fini la prise de tête avec chmod !

L’article Mettre son dossier www dans home pour chaque utilisateur linux est apparu en premier sur DesireLabs.

Créer un dépot git local

mkdir <mon_depot_git>
cd <mon_depot_git>
git init

Article connexe sur la création d’un dépôt sur serveur privé.

Communiquer avec le dépôt git distant

Cloner un dépôt git distant vers sa machine

git clone <url du dépôt>:<dépôt git>

Sauvegarder son travail : procéder à des ajoutes et les commiter

git add .
git commit -a

La première commande dit d’ajouter tout ce qui se trouve dans le répertoire courant lors du prochain commit (exception faite des fichiers ou dossier précisés dans le fichier .gitignore)

La seconde effectue la sauvegarde de tout ce qui a été modifié ou ajouté.

Envoyer son travail commité vers le dépôt distant

git push

Procéder à une vérification des données disponibles sur le serveur distant et les rappatrier en local

git fetch
git pull

Changer le dépôt git distant d’un projet

git remote set-url origin <url du nouveau dépôt>:<nom du nouveau dépôt>

//exemple sur un serveur privé :
git remote set-url origin git@desirelabs.fr:monprojet.git

Utiliser les branches (version soft)

Créer une nouvelle branche

git branch <nom_de_la_branche>

Changer de branche

git checkout <nom_de_la_branche>

Créer une branche et la choisir en même temps

git checkout -b <nom_de_la_branche>

Afficher les branches disponibles

git branch

Fusionner deux branches

// on retourne sur la branche principale
git checkout master

// et on 'merge' avec la branche souhaitée
git merge <branche_a_fusionner>

Supprimer une branche

git branch -D <nom_de_la_branche>

L’article Principales commandes Git est apparu en premier sur DesireLabs.

On est donc tenté de faire un simple rechercher/remplacer dans sa base de données pour remédier à ce problème. ERREUR GRAVE ! Pourquoi ? Tout simplement parce que l’url est sérialisée dans MySql et que si on la casse, bah le site fonctionnera plus. Et alors là, pour rattraper le coup, tu peux te brosser Martine.

Je ne vous ferai pas de long laïus sur le script proposé par Interconnectit, c’est une petite perle qu’il fait toujours bon connaitre et avoir avec soi. C’est fiable, facile, efficace et fonctionne sous quasiment tous les CMS PHP connectés à MySql. Tout ce que j’aime

Avertissement !

Cette manipulation n’est pas sans risque pour votre base de données, et une mauvaise manipulation ou un souci technique ne sont pas à exclure. Et je peux vous assurer que perdre une base de données complète le jour de la mise en production est typiquement le genre de chose qui vous donne envie de vous pendre à défaut de donner votre démission pour incompétence. Et ni moi ni l’auteur du script ne saurait être tenu pour responsable si vous n’avez pas pris la précaution de faire une sauvegarde de la base de données avant de procéder. Mais rassurez-vous, si vous faites tout bien comme il faut, il ne devrait pas y avoir de pépin
Maintenant que vous avez bien flippé, on y va !

Avant de commencer il faut :

Avoir un site fonctionnel avec la nouvelle adresse déjà configurée
Sauvegarder sa base de données MySql au cas tout vous exploserait à la figure
Le script est disponible ici http://interconnectit.com/

Le changement d’url, comment ça marche ?

On part du principe que vous avez un site en développement qui a une adresse de type http://localhost/monsite ou bien http://dev.monsite.fr/ ou tout autre nom de domaine de « transition » avant la mise en production. Nous ce qu’on veut c’est que son adresse soit http://monsite.fr/ ou http://www.monsite.fr./ Qu’à cela ne tienne !

Précédons par étape :

1. On décompresse le dossier contenant le script
2. On renomme le script par sécurité et simplicité sans supprimer l’extension .php
3. On se connecte en ftp sur notre site et à la racine du dossier contenant le CMS, on dépose le script
4. On se connecte à sa nouvelle adresse (e.g. http://www.monsite.fr)/ à laquelle on ajoute /nom_du_script.php, soit http://www.monsite.fr/nom_du_script.php
5. On atterrit sur la page d’accueil du script qui propose donc de charger les informations de connexion à la base de donnée de WordPress. On laisse la case « Pre-populate » cochée et on clique sur « Submit ».
   
6. Sur la page suivant s’affichent donc les informations de connexion. Vérifier avec soin qu’elles correspondent bien à celles de votre base de données. Le cas échéant, les corriger. Faites bien attention au charset utilisé qu’il corresponde également. si tout est ok, cliquez sur « Submit DB details ».
   
7. L’avant dernière page vous propose de sélectionner les tables dans lesquelles effectuer le rechercher/remplacer. Par défaut, tout est sélectionné. Dans notre cas, c’est exactement ce que l’on souhaite, donc on ne touche à rien, si ce n’est qu’on coche impérativement la case « Leave GUID column unchanged ». Je vous invite à lire la page du codex concernée si vous voulez plus de détails, mais grosso modo, si vous ne la cochez pas, vous cassez vos flux RSS. On clique à présent sur « Continue » et « OK » à l’avertissement.
   
8. Enfin, dernière étape de notre script, le chercher/remplacer. Dans le champs du haut on met le domaine à remplacer, et dans celui du bas, le nouveau nom de domaine. Il faut être vigilant et ne renseigner que le domaine. Donc concrètement, on ne met pas le http://,/ ni de slash (/) à la fin. Puis on clique sur « Submit Search String » et « OK » pour procéder.
   
9. Voilà, c’est fait. Si tout est ok, le script affiche « Completed » ainsi qu’un récap des modifications effectuées. Vérifiez votre site en navigant et constatez que votre nouvelle adresse ne bouge et est la même de partout, même pour les images.
   
10. Supprimez le script de votre ftp afin qu’un petit malin ne vienne pas mettre le boxon dans votre installation.

Je rappelle que ce script est utilisable pour presque tous les CMS PHP utilisant MySql. Je l’ai déjà testé avec succès sur WordPress, Drupal et CMS Made Simple. J’insiste aussi encore sur une chose : Faites une sauvegarde de votre base de données avant de procéder !

Sur ce, enjoy

L’article Changer l’URL de son site est apparu en premier sur DesireLabs.

Cependant, il faut impérativement faire une sauvegarde de la base avant de procéder.

Le script qui suit fonctionne avec presque tous les CMS, mais de mon côté je m’en sers essentiellement avec WordPress et Drupal. Principalement il me sert à changer les url stockées en dur dans la base, lors de la mise en production d’un site. Je signal au passage qu’il est recommandé par le Codex WordPress.

Pourquoi se servir de ce script ? Car il prend en considération la sérialisation des chaînes php et évite donc d’endommager vos tables.

Il existe maintenant en v3, mais je ne l’ai pas testé. Donc je vous laisse me donner vos retours là dessus

Pour télécharger le script, c’est par là : http://interconnectit.com/

Il suffit de le mettre à la racine de votre site et de l’exécuter. N’oubliez pas de le supprimer une fois que vous avez terminé

L’article Effectuer des chercher remplacer dans sa base de données mysql est apparu en premier sur DesireLabs.