Share
Une fois que vous avez codé pendant un certain temps, vous commencez à prendre quelque chose pour acquis. Vous oubliez à quel point vous êtes vraiment intelligent. Combien de centaines de raccourcis clavier avons-nous mémorisés? Combien de langues avons-nous appris? Combien de cadres? Combien de hacks? Dire que la conception et le développement de sites Web est une industrie extrêmement difficile, c’est un peu à la légère. Ajoutez ensuite le fait qu'une grande partie de ce que vous savez aujourd'hui sera considérée comme obsolète dans quelques années..
Aujourd'hui, nous allons examiner une série de trucs et astuces qui aideront les débutants à accélérer leur temps de développement et à coder plus efficacement. Vous verrez une combinaison de conseils permettant d’économiser rapidement du temps, ainsi que des astuces de codage spécifiques pour accroître l’efficacité de votre application Web..
Lorsque vous utilisez l'outil "Enregistrer pour le Web" dans Photoshop, nous pouvons compresser nos images afin de réduire la taille de leurs fichiers. Mais saviez-vous que la compression peut être poussée encore plus loin sans sacrifier la qualité? Un site nommé Smush.Il rend le processus un jeu d'enfant.
L'équipe de Smush.Il utilise une variété d'outils.
* Les éléments de la liste ci-dessus proviennent de la page FAQ SmushIt. .
Donc, juste avant de déployer un nouveau site Web, lancez votre URL via leur service pour réduire toutes vos images - accélérant ainsi votre site Web. Attention, le service peut convertir vos fichiers GIF en PNG. Vous devrez peut-être mettre à jour vos fichiers HTML et CSS en conséquence. Pendant que nous sommes sur le sujet, 99% du temps, économiser en tant que PNG est la meilleure décision. À moins que vous n'utilisiez un GIF animé collant, considérez le format PNG comme meilleure pratique..
De nombreux IDE offrent un panneau "extrait de code" qui vous permettra de sauvegarder le code pour une utilisation ultérieure. Vous trouvez-vous trop souvent sur lipsum.com pour saisir le texte générique? Pourquoi ne pas l'enregistrer sous forme d'extrait? Dans Dreamweaver, appuyez sur "Maj F9" pour ouvrir l'onglet d'extrait de code. Vous pouvez ensuite faire glisser l'extrait de code approprié à l'emplacement approprié. Cela me permet de gagner beaucoup de temps en une semaine..
Vous avez téléchargé la bibliothèque jQuery et essayez lentement de saisir la syntaxe. En cours de route, vous rencontrez un problème et vous réalisez que vous ne pouvez pas comprendre à quoi la valeur de $ someVariable est égale. Facile, fais juste…
console.log ($ uneVariable);
Maintenant, chargez Firefox - assurez-vous d’avoir installé FireBug - et appuyez sur F12. Vous serez présenté avec la valeur correcte.
Maintenant, multipliez cela par l'infini et portez-le au fond des choses pour toujours et vous ne réaliserez toujours pas à quel point Firebug et console.log () peuvent être utiles. :)
Créé par Chris Pederick, ce plugin Firefox extrêmement utile vous présente une multitude d’options. Beaucoup d'entre vous qui regardent mes screencasts savent que je suis fan de l'option "Modifier les CSS" pour ajuster mes styles en temps réel. D'autres options utiles incluent…
Barre d'outils de développement Web
C’est une procédure que nous ne réalisons pas tous assez. Bien que cela ne soit pas toujours faisable, vous pouvez souvent accélérer votre site Web en plaçant vos balises de script à côté du
étiquette.…
La plupart des navigateurs actuels peuvent télécharger un maximum de deux composants en parallèle pour chaque nom d’hôte. Cependant, lors du téléchargement d'un script, aucun autre téléchargement ne peut avoir lieu. Ce téléchargement doit se terminer avant d'aller de l'avant.
Ainsi, lorsque cela est réalisable, il est parfaitement logique de déplacer ces fichiers vers le bas de votre document afin de permettre aux autres composants (images, css, etc.) de se charger en premier..
Si les performances sont primordiales pour votre site Web, je vous suggère fortement de compresser vos fichiers CSS et Javascript juste avant le déploiement. Ne vous embêtez pas au début de votre développement. Cela ne fera que causer plus de frustration que d'aide. Cependant, une fois que l'arc est attaché, comprimez ces bébés.
YUI Compressor et JSMin sont deux autres outils utiles pour la compression de code JavaScript..
De plus, vous avez la possibilité de compresser votre HTML - bien que je ne le recommande pas. La réduction de fichier est négligeable.
Il n'y a pas si longtemps, Jon Hobbs-Smith de tvidesign.co.uk a publié un article fantastique qui détaille 25 astuces jQuery. Assurez-vous de mettre cette page en favori! Voici plusieurs de mes favoris.
Accentsconagua
if ($ ('# myDiv) .length) // ce code ne sera exécuté que si le div portant l'id #myDiv existe. Beaucoup de gens ne se rendent pas compte que, lors de l'accès aux éléments dom, la fonction jQuery accepte un deuxième paramètre - "context". Considérer ce qui suit…
var myElement = $ ('# someElement'); Ce code nécessitera que jQuery traverse l'ensemble du DOM. Nous pouvons améliorer la vitesse en utilisant un contexte comme second paramètre.
var myElement = $ ('# someElement', $ ('. someContainer')); Maintenant, nous demandons à jQuery de rechercher uniquement dans l'élément .someContainer et d'ignorer tout ce qui se trouve en dehors de celui-ci..
Lors de l'accès aux ID avec jQuery, la bibliothèque utilise la méthode traditionnelle "getElementById". Cependant, lors de l'accès aux classes, jQuery doit utiliser ses propres méthodes pour parcourir le dom (il n'y a pas de méthode native "getElementByClass"). En conséquence, cela prend un peu plus de temps!
Passez en revue les 25 conseils!
Si vous avez le choix entre $ _GET ou $ _POST lors de vos appels AJAX, choisissez l’ancien.
"L'équipe Yahoo! Mail a constaté qu'en utilisant XMLHttpRequest, POST est implémentée dans les navigateurs en tant que processus en deux étapes: envoyer les en-têtes d'abord, puis les données. Il est donc préférable d'utiliser GET, qui ne prend qu'un paquet TCP à envoyer ( sauf si vous avez beaucoup de cookies). " - Développeur.Yahoo.com
Rappelez-vous - n'utilisez pas aveuglément $ _GET. Assurez-vous de savoir exactement ce que vous faites en premier. Par exemple, vous ne devez en aucun cas mélanger la chaîne de requête et l'accès à la base de données. Il n'y a pas si longtemps, un de mes amis sur Twitter m'a envoyé l'image d'un site Web actif contenant une requête MYSQL dans l'URL. NE FAITES PAS CELA! :)
Que vous utilisiez PHP, ASP.NET, Mootools, jQuery - ou une combinaison de tous, envisagez d'utiliser des frameworks le cas échéant.
Par exemple:
Cependant, si je construis un site compliqué qui nécessite un CMS complet et un accès compliqué aux données, je jetterai un coup d'œil à l'un des frameworks de ma langue préférée.
Rappelez-vous - faites en sorte que les cadres fonctionnent pour vous; pas l'inverse. Soyez intelligent lorsque vous prenez ces décisions.
YSlow est un service formidable qui vérifie votre site Web pour s’assurer qu’il est aussi efficace que possible. Il n'y a pas si longtemps, l'équipe de développement de Yahoo a créé un ensemble de lignes directrices, ou de meilleures pratiques, qui doivent être suivies lors du développement - dont beaucoup sont détaillées dans cet article..
Il existe un excellent screencast YSlow qui illustre de nombreuses techniques permettant de gagner du temps. Je vous recommande vivement de le voir quand vous en aurez l'occasion.
Les designers / développeurs les plus expérimentés seront d'accord avec moi; si je devais monter dans le menu de la barre d’outils chaque fois que je voulais apporter une modification à mon site ou à ma conception, je serais perdu. J'utilise les raccourcis clavier depuis si longtemps que je ne connais plus l'emplacement correct pour ces commandes. Je sais juste que "Shift X" ouvre le bon panneau.
Au début, cela peut sembler un gaspillage de connaissances. Mais, je vous assure que ce n'est pas le cas. Je vous recommande de rechercher sur Google les "raccourcis clavier X" - où X est égal à votre logiciel (c'est-à-dire Photoshop). Imprimez le tableau et placez-le à côté de votre ordinateur. Au cours des prochaines semaines, exercez-vous à toucher le moins possible votre souris. Ceci est une chose qui sépare les pros des amateurs.
Avouons-le; tous les sites Web ne doivent pas forcément être une application énorme et complexe. Parfois, nous souhaitons simplement afficher notre portefeuille - probablement la plupart du temps pour certains! Dans ces cas, pourquoi ne pas créer un "modèle" simple qui contient tout ce dont vous avez besoin pour commencer.
Dans mon dossier de modèles, j'ai imbriqué les dossiers "JS" et "CSS".
De plus, j'ai un fichier "index.html (php)" qui contient quelques extraits de code que j'utilise dans la plupart de mes projets. Ce n'est pas trop chic, mais ça fait gagner du temps!
Document sans titre
Comme vous pouvez le voir, je fais référence à mes fichiers CSS et Javascript, je crée un lien vers le fichier jQuery de Google, je crée la fonction document.ready () jQuery et j'ouvre le div "conteneur" standard..
C'est plutôt simpliste, mais permet de gagner du temps. Ainsi, chaque fois que vous créez un nouveau site Web, copiez simplement votre dossier "modèle" et.
De manière générale, tous vos CSS et Javascript doivent être supprimés de la page et placés dans leurs propres fichiers externes..
Si vous n'avez que quelques styles de base, une exception peut être faite. Dans ces cas, et dans ces cas seulement, il peut être avantageux de les inclure dans la page HTML..
AJAX fait fureur à l'heure actuelle - principalement parce qu'il est enfin devenu relativement convivial, grâce aux bibliothèques Javascript. Dans certains cas, vous devez avoir un moyen de déterminer si le script a été appelé avec Javascript. Il y a quelques jours pour accomplir cette tâche.
Une solution serait d’ajouter une paire clé-valeur unique en Javascript lors de l’envoi du POST. Vous pouvez ensuite utiliser PHP pour déterminer si cette clé existe. Si c'est le cas, nous savons que Javascript est activé..
Un meilleur moyen serait d'utiliser une fonctionnalité PHP intégrée appelée "HTTP_X_REQUESTED_WITH". Pour illustrer…
if isset ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) // écrit du code et soyez assuré que le Javascript est activé. else // Faites quelque chose de différent pour compenser les utilisateurs pour lesquels JS est désactivé.
Il n'y a pas si longtemps, Google a commencé à héberger des scripts populaires tels que jQuery. Si vous utilisez une telle bibliothèque, il est vivement recommandé de créer un lien vers le CDN de Google plutôt que d'utiliser votre propre script..
API de bibliothèques AJAX
Je suis un grand fan de Google Chrome. Il s'ouvre extrêmement rapidement et traite Javascript plus rapidement que tout autre navigateur, du moins pour le moment (je pense que la dernière version de Firefox aurait pu le rattraper.).
Cependant, vous ne me verrez pas quitter Firefox de si tôt. Le nombre de plugins utiles disponibles pour le navigateur est stupéfiant. Voici une liste de mes favoris.
De la même manière que c'est cool de haïr Microsoft à l'heure actuelle, il semble qu'il soit courant pour les gens d'attaquer ceux qui utilisent des IDE lors du développement. C'est juste idiot.
Dans de nombreux cas, l'utilisation d'un IDE avancé est primordiale, en particulier lorsque vous travaillez dans des langues POO. Maintenant, si vous créez simplement un petit modèle HTML, des programmes tels que Notepad ++ et Coda fonctionneront à merveille. En fait, je recommanderais leur utilisation dans ces cas. N'ajoutez pas le fardeau supplémentaire si vous n'en avez pas besoin. Cependant, lors du développement d’applications avancées, tirez parti d’un environnement de développement intégré..
Cela devrait le faire pour le moment. Espérons que quelques-uns d'entre eux (peut-être tous!) Aideront à faire de vous un meilleur concepteur et développeur. Quels sont certains de vos raccourcis préférés? Laissez un commentaire ci-dessous et laissez-nous savoir!
