romuland @romuleald - Tumblr Blog

Détecter si un appareil (mobile) est éteint ou allumé

$(window).bind('pageshow pagehide', function(e){console.info(e.type + ' window')});

Cela m'a été nécessaire sur iPad pour couper le son d'une application lorsque l'on éteignez l'écran ou que l'on passait à autre chose.

#ipad #JS #event #pageshow #pagehide

Détecter un élément trop largeur sous IE

Dans la console :

var a = document.getElementsByTagName('*');for(i=0;i<a.length;i++){console.info(a[i].nodeName, ' ', a[i].className, ' ', a[i].clientWidth)}

mysql -uuser -p -e "source c:/path/to/file.sql" database

renomer via des regexp dans windows avec microsoft powershell

Simple est radicalement efficace, renommer massivement des fichiers via une regexp avec Windows avec powershell, ça m'a beaucoup aidé à nettoyer des fichiers contenant des chiffres et autres caractères ou espaces non désirés pour du web.

dir | ren -new { $_ -replace '[0-9]*', '' }

Vous débarrassera de tout chiffres de vos fichiers.

Source en anglais : http://kevin-berridge.blogspot.com/2008/03/powershell-rename-with-regex.html

#dev #powershell #regexp #code

On scroll body ou html ?

Très peu pratique, pour faire scroller une page, il faut choisir entre la balise <html> ou <body>. Certains auteurs préconisent (via jQuery) un énorme bourrin $('body,html') comme sélecteur. Pratique, oui, sauf que lorsque l'ont fait du code propre, et donc que l'on utilise une fonction de callback sur un animate() on déclanchera en toute logique 2 callback.

La solution sera :

ui.$scrolled = ($('body').css('height',2000).prop('scrollTop', 1).prop('scrollTop') == 1) ? $('body') : $('html'); $('body').css('height', '100%').prop('scrollTop', 0);

Ainsi, on détecte la hauteur la plus grande, et c'est celle-ci qui nécessitera le scroll.

#javascript #jquery #dom #scroll

bookmark auto scroll du dashboard de tumblr

Voici un lien à glisser dans votre barre de favoris : tumblr scroller

Il va vous demande l'ID d'un post tumblr, vous l'avez dans l'URL du post. Exemple : http://sophisticated-simplicities.tumblr.com/post/4298491053 l'ID du post est 4298491053

Comme je n'aime louper aucun post de ma liste de follower, j'aime bien pouvoir scroller jusqu'au post exact, je trouverai ça très utile pour moi, alors je partage.

J'ai testé sur FF4 et Chrome, j'ai un peu la flemme de tester ailleurs.

Aligner correctement des éléments de formulaire

input,textarea{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Ceci va vous permettre d'aligner des éléments de formulaire ainsi : http://css-tricks.com/examples/BoxSizing/

Renommer des fichiers en masse avec PowerShell

Voici la ligne de commande à passer dans PowerShell pour renommer massivement des fichiers. En gras les variables. Placez vous dans le dossier où se trouve les fichiers et faites :

dir *.html | foreach { move-item -literal $_ $_.Name.Replace(".html", ".php")}

source le blog Mike Ormond

Bien coder en CSS

Une bonne piqûre de rappelle depuis le wiki développeur de Mozilla. Les bonnes bases sont :

Évitez de cibler un tag (effet dangereux sur l'ensemble du site)

Évitez de sur-cibler exemple : div.class form.sousClass div#monElement{} (trop de dépendance)

Nommez correctement (on évite les class avec .maClass1 .maClass2 .maClass3) et on les contexualises

Avec de telles pratiques vous écrirez une feuille de style moins lourde, et plus facile à faire évoluer.

Propriétés CSS spécifiques (CSS vendor extension)

Edit : Eric Meyer a mis à jour avec wekbit en plus

À titre d'info perso, puis pour ceux qui tomberont dessus, voici une liste des propriétés CSS spécifiques aux moteurs de rendus :

Opéra

Mozilla

Microsoft

Webkit

Webkit boude un peu, dommage… Merci à meyerweb pour la recherche.

easter egg CSS

.size260 {width:255px;margin-top:80px;}

la joie des easter egg quand on code en CSS à plusieurs.

[PNGQuant] png32 -> png8 avec transparance Alpha

Pourquoi un PNG 8 bits avec transparence alpha ? Internet Explorer 6 ne lit pas correctement les PNG 32 bits (24 bits + 8 bits de transparence alpha). La solution est donc d'appliquer une transparence alpha sur un PNG 8 bits. Est-ce parfait ? Non, IE6 ne lira pas la transparence alpha correctement, et la lira comme une transparence index (transparent, ou non) et ils ne vous reste que 8 bits pour votre image, mais cela suffit au final pour la plupart des images de décoration.

Pour Windows XP

récupérez PNGquant

placez le dans C:\windows\system32

ensuite ouvrez une fenêtre et allez dans "Outils"

Cliquez sur l'onglet type de fichier

Si ici vous avez restaurer à la place de avancé, cliquez sur restaurer puis après sur avancé

la ligne peu visible est : C:\windows\system32\pngquant.exe 256 "%1"

respectez bien les autres options vous pouvez mettre ce que vous voulez dans Action, ceci s'affichera dans votre menu contextuel (clic droit) d'un PNG ensuite vérifiez bien que l'action Ouvrir est toujours par défaut, sinon ça risque de vous embêter plus qu'autre chose

Et voilà, vous avez votre PNG 8 en 256 couleurs avec transparence Alpha au lieu d'utiliser Fireworks.

Besoin d'un traitement par lot ? Aucun problème, sélectionnez tous vos PNG en même temps. Notez que le fait d'avoir pngquant dans c:\windows\system32 vous permet aussi de l'exécuter en ligne de commande via la commande c:\> pngquant 256 *.png 256 défini le nombre de couleur, nous avons rarement besoin de moins, mais c'est ici l'avantage de fireworks qui sait choisir automatiquement le bon nombre de couleur pour optimiser le poids au maximum

Pour Windows Seven

Il faut aller dans le regedit, editer cette ligne (pour avoir cette ligne, exécutez au moins une fois pngquant.exe) :

HKEY_CURRENT_USER\ Software\Classes\Applications\pngquant.exe\shell\open\command Et passez le paramètre 256 entre les deux valeurs entre quotes (") ex: "C:\Windows\System32\pngquant.exe" 256 "%1" Ensuite, cliquez droit sur un PNG, choisir un programme, sélectionnez pngquant (il faut le chercher)

[apache] accéder à un site localhost depuis une autre machine/VM

Le problème :

Vous travailler sur un site qui pour des questions de sécurité n'est accéssible qu'en localhost (127.0.0.1), mais vous avez besoin de vérifier votre super IE6/7 sur une machine alors que vous êtes sur Windows 7/Mac/Linux (ou inverse).

Il vous est impossible d'accéder au site, sauf si vous trichez avec ProxyPass et ProxyPassReverse

Vous avez besoin d'activer les modules suivant :

LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_http.so

Et dans vos Vhosts :

<VirtualHost *:80> ServerName monsite.local DocumentRoot C:\path\to\site </VirtualHost>

<VirtualHost *:80> ServerName proxsite.romu ProxyPass / http://monsite.local/ ProxyPassReverse / http://monsite.local/ </VirtualHost>

critique

Les commentaires étant inexistant, cela m'arrange fortement.

Oui, le code html/css est dégueu, oui la créa inexistante est dégueu, mais, le but reste le contenu, c'est ça qui est important

Accessoirement, sachez que ce blog contient un tag analytics.

au boulot

Ça fait quelque temps que bloguer me chatouille les doigts. Oui, j'ai deux trois blog photos ici et là, mais ce n'est pas pareil.

Ici je vais bloguer, pas comme avant mais plutôt un mélange de ce qui me passionne, tel que l'image, la technique, la critique.

J'ai des articles dans le fond du tiroir, des choses qui m'ont été utile pour le développement web.

Sur ce, après avoir nettoyé légèrement l'interface tumblr, je vais sûrement pouvoir m'y mettre !

yey

First post, nice isn't it?

Trending Blogs

Recently Viewed Blogs

romuland