Sketch, ma sélection de plugins

J’avais déjà réalisé une sélection de plugins pour Sketch il y a pas si longtemps, mais Sketch à beaucoup évolué depuis et l’arrivée de nouveaux venus ainsi que mon expérience sur le logiciel font qu’un nouvel article est nécessaire !

Si il ne devait rester qu’un seul plugin pour Sketch ?

Craft by Invision Labs. Définitivement la meilleure chose que vous puissiez faire à votre workflow est d’utiliser ce meta plugin, regroupant beaucoup de fonctionnalités extrêmement utiles. Plutôt que tout vous détailler, je vous conseille de regarder cette vidéo :

Les fonctionnalités qui m’intéressent le plus personnellement sont la création d’inventaires de styles, qui permettent de vérifier la cohérence de votre design entre autres et les fonctions de duplication.

Find & Replace

findreplace

Définitivement pratique quand on a une erreur typo à changer, find and replace fait exactement ce que son nom indique, il vous permet de chercher et de remplacer du contenu simplement, sans en oublier.

FontFinder

fontfinder

Idéal pour maitriser les fonts utilisées et remplacer certaines en cas de changement, Font Finder va vous permettre de sélectionner certaines fonts très rapidement. Très pratique !

Sketch Iconfont

iconfont

Utiliser des fonticônes est très pratique, mais peut être vraiment embêtant par moment si l’on ne dispose pas d’une page comme ce que nous propose FontAwesome qui regroupe tout les caractères à copier / coller facilement. Sketch Iconfont vous permet d’insérer facilement les glyphes de vos fonticônes et propose encore quelques options pratiques comme les convertir en tracés.

Magic Mirror

magicmirror

Extrêmement pratique pour réaliser des mockups, présentations ou simplement manipuler des images,  Magic Mirror est un véritable couteau suisse qui apporte des fonctionnalités de perspective malheureusement absentes de Sketch.

Rename it

renameit

Si comme moi, vous organisez extrêmement bien vos calques, (hum hum) Rename it vous fera gagner beaucoup de temps en vous permettant de renommer des calques en masse. La principale utilité est la possibilité d’utiliser bon nombre de raccourcis de numération ou de nommage très facilement.

Sketch Mate

Sketch Mate permet d’ajouter beaucoup de raccourcis clavier pour aligner et organiser ses calques et artboards. Si vous utilisez beaucoup les raccourcis, ce plugin est fait pour vous !

Sketch Measure

export-html-measure

Votre développeur / intégrateur préféré est un peu fainéant ? Plus d’excuses pour lui, vous pouvez annoter directement vos maquettes avec Sketch Measure. Encore mieux, ce plugin vous générera un fichier HTML interactif où l’on pourra cliquer et voir tout les éléments et leurs mesures très rapidement. Un must-have.

Sketch Palettes

sketch-palettes

La gestion des palettes dans Sketch est loin d’être optimale, surtout pour les habitués des produits Adobe, qui peuvent exporter / importer et toujours conserver leurs palettes de couleurs préférées. Sketch Palette permet de combler ce vide. Ce plugin vous permettra d’importer / exporter vos palettes facilement.

Social Artboards

artboardssocial

Il n’y a rien de plus embêtant que de chercher les tailles des différents éléments de design des réseaux sociaux actuels. Ce petit plugin va vous permettre de créer des artboards directement aux tailles justes. Social Artboards est pratique si ce genre de missions vous est récurrent.

Content Generator

userpics

Générer automatiquement du contenu peut-être très pratique pour tester ses design d’interface avec des noms plus ou moins longs, des images de stock et ce genre d’éléments qui pourront amener un peu de réalisme dans vos maquettes.  Content Generator s’en chargera très bien.

Apache, MySQL, PHP natif sur macOS

Bien qu’il soit possible d’utiliser des solutions packagées pour un AMP sur Mac, il est possible et assez simple d’utiliser ce qui est déjà inclus dans OSX pour développer sur son Mac. En effet, Apache et PHP sont disponibles dans l’OS de la marque à la pomme. Il suffit de tout paramétrer correctement pour y avoir accès.

Attention, ce tutoriel nécessite l’utilisation sommaire de la ligne de commande. Je pars du principe que vous savez un minimum l’utiliser.

Apache & PHP

OSX El Capitan inclus Apache 2.4.16, ainsi que PHP 5.5.27, voici comment les activer.

Quelques commandes pour commencer (celles-ci sont à entrer dans votre terminal)

Pour démarrer Apache :

sudo apachectl start

Pour arrêter Apache :

sudo apachectl stop

Pour relancer Apache :

sudo apachectl restart

Une fois Apache lancé, rendez-vous sur : http://localhost pour vérifier qu’il fonctionne bien. Vous devriez être accueilli par ceci :

apache_itworks

De base, le répertoire de stockage des fichiers lisibles par Apache se trouve dans

/Library/WebServer/Documents/

Pas très pratique, car il nécessite, pour y écrire, des droits d’administration, ce qui fait que vous, simple utilisateur, ne serez pas aussi libre que ça, et devrez entrer votre mot de passe root toutes les 2s. La solution consiste à utiliser un répertoire accessible pour l’utilisateur, typiquement dans son dossier d’accueil, OSX utilise le dossier Sites. Créez ce dossier dans l’explorateur.

/Users/votre_nom/Sites/

Pour ce faire, il suffit d’autoriser Apache à lire et exécuter du code dans ce répertoire.
Direction le terminal :

cd /etc/apache2/users
sudo nano username.conf

Puis copiez le code suivant, en modifiant votre « username » pour correspondre au nom de votre dossier d’accueil.

<Directory "/Users/username/Sites/">
AllowOverride All
Options Indexes MultiViews FollowSymLinks
Require all granted
</Directory>

Les permissions du fichier devraient être les suivantes :

-rw-r--r--   1 root  wheel  298 Jun 28 16:47 username.conf

Si vous devez les changer :

sudo chmod 644 username.conf

Ouvrez maintenant le fichier httpd.conf

sudo nano /etc/apache2/httpd.conf

Et vérifiez que les modules suivants sont décommentés :

LoadModule authz_core_module libexec/apache2/mod_authz_core.so
LoadModule authz_host_module libexec/apache2/mod_authz_host.so
LoadModule userdir_module libexec/apache2/mod_userdir.so
LoadModule include_module libexec/apache2/mod_include.so
LoadModule rewrite_module libexec/apache2/mod_rewrite.so
LoadModule php5_module libexec/apache2/libphp5.so
Include /private/etc/apache2/extra/httpd-userdir.conf

Enlevez aussi le check devant la ligne :

√#Listen 12.34.56.78:80

pour qu’elle ressemble à :

#Listen 12.34.56.78:80

Sauvegardez vos changements et modifications.

Ouvrez après le fichier suivant : 

sudo nano /etc/apache2/extra/httpd-userdir.conf

et décommentez :

Include /private/etc/apache2/users/*.conf

Sauvegardez vos changements et redémarrez Apache pour que ces paramètres soient pris en compte.

sudo apachectl restart

Vous pouvez maintenant vous rendre sur : http://localhost/~votre_nom/

Vous devriez voir : 

apache_userdir

Permettre le rewriting d’url et les modifications via .htaccess

Direction httpd.conf

sudo nano /etc/apache2/httpd.conf

Et changez la ligne suivante pour qu’elle ressemble à ceci : 

apache_allowoverride

Décommentez aussi la ligne (normalement fait plus haut): 

LoadModule rewrite_module libexec/apache2/mod_rewrite.so

Pour vérifier que PHP fonctionne, créez un fichier phpinfo.php dans votre répertoire

/Users/votre_nom/Sites/phpinfo.php

avec pour contenu :

<?php phpinfo(); ?>

Puis, rendez-vous dans votre navigateur :

http://localhost/~votre_nom/phpinfo.php

Vous devriez voir ceci : 

apache_php_elcapitan

MYSQL

MySql n’est pas intégré dans OSX nativement, il convient donc de le télécharger depuis le site de MysqL.

mysql_el_capitan

Choisissez la version la plus à jour en DMG, cliquez sur « download« , puis sur la page suivante « No thanks, just start my download », tout en bas de la page.

no_thanks_mysql

Installez Mysql puis démarrez le depuis le panneau apparu dans les préférences système. 

mysql_el_capitan_preference_panel

Ou via le terminal : 

sudo /usr/local/mysql/support-files/mysql.server start

Pour trouver la version de Mysql depuis le terminal, tapez :

/usr/local/mysql/bin/mysql -v

Dernière étape, définissez le mot de passe root pour mysql à l’aide de la commande suivante : 

/usr/local/mysql/bin/mysqladmin -u root password 'yourpasswordhere'

Attention ! il faut utiliser les ‘quotes’ ici.

Voilà ! Tout est en place ! Pour vous connecter et gérer vos bases Mysql je ne peux que vous conseiller l’excellent et très gratuit SequelPro.

Bon développement !

[ecko_link url= »http://coolestguidesontheplanet.com/get-apache-mysql-php-and-phpmyadmin-working-on-osx-10-11-el-capitan/ »]Source de l’article[/ecko_link]

Pimp My Terminal sous macOS

Dernièrement les technos web se sont beaucoup automatisées, et l’utilisation du terminal pour réaliser certaines opérations et utiliser certains outils (grunt / gulp / sass / less / npm et j’en passe) s’est largement démocratisée. Mais le terminal, ou l’invite de commande (pour les windowsiens) est toujours un endroit, froid, austère, sans couleurs et difficile à appréhender. J’ai quelques petites astuces pour vous réconcilier avec cet outil très puissant, qui peut réellement vous faire gagner beaucoup de temps bien maitrisé.

Bash c’est bien, Zsh c’est mieux

Sans rentrer dans les détails techniques, de base, OSX intègre bash comme interprèteur de commande. Qu’est-ce qu’un interprèteur de commande me direz-vous ? C’est le petit programme qui comprends les instructions que vous lui envoyez et réponds en conséquence de manière visuelle à celles-ci. Quand vous souhaitez lister le contenu d’un répertoire par exemple, vous lancez la commande ‘ls‘, ce qui vous listera les répertoires, comme ceci :

bash-ls

Magnifique n’est ce pas? (ok, on ne s’excite pas)
Eh bien il existe plusieurs interprèteurs de commandes, avec leurs fonctionnalités et différences, et il est parfaitement possible de passer de bash à quelque chose d’autre de plus sympa très simplement.
Un interpréteur qui m’a particulièrement séduit est Zsh, et plus particulièrement, le set pré-configuré Oh-My-Zsh.

Oh My Zsh !

Ok, mais concrètement, qu’est-ce que j’y gagne ?

Plein de fonctionnalités vraiment sympa, comme l’auto-complétion, des raccourcis bien pratiques, une superbe interaction avec git, de l’auto-correction de commandes et bien d’autres. Pour un bon coup d’oeil aux fonctionnalités, je vous conseille cet article très visuel sur zsh.
Oh My Zsh quant à lui est un moyen simple et efficace d’améliorer zsh, par l’ajout de plugins, et un fichier de configuration simple et facile à modifier. Son installation est enfantine. Ouvrez votre terminal sur OSX, (Applications > Utilitaires > Terminal.app) et copiez-coller cette commande :

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Vous devrez simplement entrer votre mot de passe pour passer de bash à Zsh et tadaaa !

ohmyzsh - Installation

Quittez votre terminal et relancez le pour que les changements prennent effet.
Vous pourrez remarquer que le prompt à changé, (le prompt c’est la flèche verte et le tilde ~) ce qui indique que tout c’est bien passé.

Oh My Zsh propose de nombreux thèmes de couleurs et personnalisations, que vous pouvez retrouver sur le github de Oh My Zsh. Mon préféré est af-magic, simple et efficace, et propose l’état de votre repository git du répertoire courant dans le prompt.
Pour modifier le thème par défaut, rendez-vous dans le terminal, et éditez le fichier via la commande :

nano .zshrc

 

Edition de .zshrc
Edition de .zshrc

Pour enregistrer, CTRL-X (oui bien CTRL, pas CMD, ni ALT) puis validez par « Y« , enfin relancez votre terminal, vous devriez voir quelque chose comme ceci :

afmagic ohmyzsh

iTerm, le terminal aux stéroïdes

iTerm propose certaines fonctionnalités qui valent le détour.
La possibilité d’avoir plusieurs terminaux sur la même fenêtre pour commencer, qui va vous permettre de créer votre propre layout et de le sauvegarder aussi,des profils, la gestion des couleurs, de l’auto-complète, de la recherche, et une foultitude d’options qui paraissent nécessaires une fois utilisées. Pour voir toutes les possibilitées de cette petite application, je vous conseille de vous rendre sur la page dédiée de cette dernière.

Ca reste pas très joli…

Ajoutons de la couleur alors ! Un gentil développeur à eu la bonne idée de créer des profils de couleurs très variés, disponibles sur son repo Github. il y en a littéralement pour tout les gouts ! Devant le choix pléthorique des thèmes proposés, voici ceux qui m’ont parus les plus sympas :

Pour installer ces thèmes, rien de plus simple, récupérez le zip, dézippez le, et depuis iTerm, importez puis sélectionnez le thème que vous souhaitez dans les préferences de l’application.

select-preset

 

Voilà, votre terminal est déjà beaucoup plus sympa, beaucoup de fonctionnalités ajoutées, n’hésitez pas d’ailleurs à lire les possibilités d’iTerm ou de Oh My Zsh, pour paramétrer le tout pour vos besoins, et n’oubliez pas de sauvegarder votre .zshrc, pour ne pas répéter l’opération sur toutes vos machines !

De chaines Youtube à découvrir

Je suis accro à Youtube. Je passe un temps considérable, quelque soit le device que j’ai entre les mains à regarder des vidéos. Même si les vidéos de chats et de licornes retiennent toute mon attention, je suis principalement des chaines « Tech », mais aussi d’autres plus droles et insolites. On est un geek ou on ne l’est pas.

Petit tour de mes chaines préférées.( Vous pouvez simplement cliquer sur les visuels des chaines pour vous y rendre )

Continuer la lecture de « De chaines Youtube à découvrir »

Profiter du catalogue Netflix Américain en France

Petite astuce, parce que c’est bientôt le week-end, comment profiter simplement du catalogue pléthorique américain de Netflix en France gratuitement ( si vous êtes abonnés Netflix bien entendu ), et facilement ?
Continuer la lecture de « Profiter du catalogue Netflix Américain en France »

Stagiaires web, pourquoi vos candidatures ne sont pas retenues.

Chers stagiaires qui postulez dans des agences de communication ou web, voici quelques conseils pour éviter que votre candidature ne parte directement à la poubelle ou ne déclenche l’hilarité à sa réception. Continuer la lecture de « Stagiaires web, pourquoi vos candidatures ne sont pas retenues. »