Share
Sobald Sie für eine Weile programmiert haben, nehmen Sie etwas als selbstverständlich an. Sie vergessen, wie klug Sie wirklich sind. Wie viele hundert Tastenkombinationen haben wir gespeichert? Wie viele Sprachen haben wir gelernt? Wie viele Frameworks? Wie viele hacks Zu sagen, dass Webdesign / -entwicklung eine extrem harte Branche ist, bringt es leicht. Fügen Sie als Nächstes hinzu, dass vieles, was Sie heute wissen, in einigen Jahren als veraltet gilt.
Heute werden wir uns einige Tipps und Tricks anschauen, die Anfängern dabei helfen, ihre Entwicklungszeit zu beschleunigen und Code effizienter zu codieren. Sie erhalten eine Mischung aus Tipps zur schnellen Zeitersparnis sowie spezifische Codierungstricks, um die Effizienz Ihrer Webanwendung zu steigern.
Wenn Sie das Tool "Für Web speichern" in Photoshop verwenden, können wir unsere Bilder komprimieren, um ihre jeweiligen Dateigrößen zu verringern. Wussten Sie jedoch, dass die Komprimierung ohne Qualitätsverlust noch weiter vorangetrieben werden kann? Eine Site namens Smush.It macht den Prozess ein Kinderspiel.
Das Team von Smush verwendet verschiedene Werkzeuge.
* Die obigen Einträge wurden von der SmushIt-FAQ-Seite übernommen .
Führen Sie Ihre URL vor dem Bereitstellen einer neuen Website durch ihren Service, um alle Ihre Bilder zu reduzieren - und beschleunigen Sie damit Ihre Website. Achtung, der Dienst kann Ihre GIF-Dateien in PNG-Dateien konvertieren. Möglicherweise müssen Sie Ihre HTML- und CSS-Dateien entsprechend aktualisieren. Während wir uns zu diesem Thema befinden, ist das Sparen als PNG in 99% der Fälle die bessere Entscheidung. Wenn Sie keine klebrige animierte GIF-Datei verwenden, sollten Sie das PNG-Format als bewährte Methode betrachten.
Viele IDEs bieten ein "Code-Snippet" -Feld, in dem Sie Code zur späteren Verwendung speichern können. Besuchen Sie lipsum.com zu oft, um sich den generischen Text anzusehen? Warum nicht einfach als Ausschnitt speichern? Drücken Sie in Dreamweaver "Shift F9", um die Registerkarte "Snippet" zu öffnen. Sie können dann das entsprechende Snippet an die entsprechende Stelle ziehen. Diese Funktion spart mir so viel Zeit in einer Woche.
Sie haben die jQuery-Bibliothek heruntergeladen und versuchen langsam, die Syntax zu verstehen. Auf dem Weg dorthin stoßen Sie auf einen Haken und stellen fest, dass Sie nicht herausfinden können, welchen Wert $ someVariable hat. Einfach, mach einfach…
console.log ($ someVariable);
Laden Sie jetzt Firefox auf - stellen Sie sicher, dass Sie FireBug installiert haben - und drücken Sie F12. Sie erhalten den korrekten Wert.
Nun multiplizieren Sie dies mit unendlich und bringen Sie es in die Tiefe von Ewigkeit. Sie werden immer noch nicht erkennen, wie nützlich Firebug und console.log () sein können. :)
Dieses unglaublich hilfreiche Firefox-Plugin wurde von Chris Pederick erstellt und bietet Ihnen eine Fülle von Optionen. Viele von Ihnen, die sich meine Screencasts ansehen, wissen, dass ich ein Fan der Option "CSS bearbeiten" bin, um meine Stile in Echtzeit anzupassen. Andere hilfreiche Optionen sind…
Web Developer Toolbar
Dies ist eine Prozedur, die wir alle nicht genug ausführen. Obwohl dies nicht immer machbar ist, können Sie Ihre Website um ein Vielfaches beschleunigen, indem Sie Ihre Skript-Tags neben dem Abschluss platzieren
Etikett.…
Die meisten aktuellen Browser können maximal zwei Komponenten für jeden Hostnamen parallel herunterladen. Beim Herunterladen eines Skripts können jedoch keine weiteren Downloads erfolgen. Dieser Download muss abgeschlossen sein, bevor Sie fortfahren können.
Wenn dies machbar ist, ist es absolut sinnvoll, diese Dateien an den unteren Rand des Dokuments zu verschieben, damit die anderen Komponenten (Bilder, CSS usw.) zuerst geladen werden können.
Wenn Leistung für Ihre Website von größter Bedeutung ist, empfehle ich Ihnen dringend, Ihre CSS- und Javascript-Dateien kurz vor der Bereitstellung zu komprimieren. Machen Sie sich nicht zu Beginn Ihrer Entwicklung die Mühe. Es wird nur mehr Frustration als Hilfe verursachen. Wenn der Bogen erst einmal gebunden ist, komprimieren Sie diese Babys.
Zwei weitere hilfreiche Tools zum Packen von JavaScript-Code sind YUI Compressor und JSMin.
Außerdem haben Sie die Möglichkeit, Ihren HTML-Code zu komprimieren - ich würde ihn jedoch nicht empfehlen. Die Dateiverkleinung ist vernachlässigbar.
Vor nicht allzu langer Zeit veröffentlichte Jon Hobbs-Smith von tvidesign.co.uk einen fantastischen Artikel mit 25 jQuery-Tipps. Stellen Sie sicher, dass Sie diese Seite mit einem Lesezeichen versehen! Hier sind einige meiner Favoriten.
Accentsconagua
if ($ ('# myDiv) .length) // Dieser Code wird nur ausgeführt, wenn das div mit der ID #myDiv vorhanden ist. Viele Leute wissen nicht, dass die jQuery-Funktion beim Zugriff auf dom-Elemente einen zweiten Parameter - "context", akzeptiert. Folgendes berücksichtigen…
var myElement = $ ('# someElement'); Dieser Code erfordert, dass jQuery das gesamte DOM durchläuft. Wir können die Geschwindigkeit verbessern, indem wir einen Kontext als zweiten Parameter verwenden.
var myElement = $ ('# someElement', $ ('. someContainer')); Jetzt sagen wir jQuery, nur innerhalb des .someContainer-Elements zu suchen und alles außerhalb davon zu ignorieren.
Beim Zugriff auf IDs mit jQuery verwendet die Bibliothek die traditionelle Methode "getElementById". Beim Zugriff auf Klassen muss jQuery jedoch seine eigenen Methoden verwenden, um den dom zu durchlaufen (es gibt keine native Methode "getElementByClass"). Daher dauert es etwas länger!
Alle 25 Tipps überprüfen!
Wenn Sie bei AJAX-Anrufen zwischen $ _GET oder $ _POST wählen können, wählen Sie den vorherigen.
"Das Yahoo! Mail-Team stellte fest, dass POST bei der Verwendung von XMLHttpRequest in zwei Schritten in den Browsern implementiert wird: Zuerst werden die Header gesendet, dann werden Daten gesendet. Verwenden Sie daher GET, das nur ein TCP-Paket zum Senden benötigt ( es sei denn, Sie haben viele Cookies). " - Entwickler.Yahoo.com
Denken Sie daran - verwenden Sie $ _GET nicht blind. Stellen Sie sicher, dass Sie genau wissen, was Sie zuerst tun. Beispielsweise sollten Sie auf keinen Fall die Abfragezeichenfolge und den Datenbankzugriff miteinander mischen. Vor nicht allzu langer Zeit schickte mir einer meiner Twitter-Freunde ein Bild einer Live-Website mit einer MYSQL-Abfrage in der URL. TUN SIE NICHT! :)
Unabhängig davon, ob Sie PHP, ASP.NET, Mootools, jQuery oder eine Kombination aus allen verwenden, sollten Sie gegebenenfalls Frameworks verwenden.
Zum Beispiel:
Wenn ich jedoch eine komplizierte Website erstelle, für die ein vollständiger CMS und ein komplizierter Datenzugriff erforderlich ist, schaue ich mir einen Rahmen meiner bevorzugten Sprache an.
Denken Sie daran - stellen Sie sicher, dass Rahmen für Sie funktionieren; nicht umgekehrt. Seien Sie klug, wenn Sie diese Entscheidungen treffen.
YSlow ist ein wunderbarer Service, der Ihre Website überprüft, um sicherzustellen, dass sie so effizient wie möglich ist. Das Yahoo Dev-Team hat vor nicht allzu langer Zeit eine Reihe von Richtlinien oder Best Practices erstellt, die bei der Entwicklung befolgt werden sollten - von denen viele in diesem Artikel tatsächlich detailliert sind.
Es gibt einen großartigen YSlow-Screencast, der viele zeitsparende Techniken demonstriert. Ich empfehle Ihnen dringend, es sich anzusehen, wenn Sie die Chance dazu haben.
Die meisten erfahrenen Designer / Entwickler werden mir zustimmen. Wenn ich jedes Mal, wenn ich meine Website oder mein Design ändern wollte, zum Symbolleistenmenü wechseln musste, wäre ich verloren. Ich verwende Tastenkombinationen so lange, dass ich nicht mehr den richtigen Ort für diese Befehle kenne. Ich weiß nur, dass "Shift X" das richtige Panel öffnet.
Auf den ersten Blick mag es wie verschwendetes Wissen erscheinen. Aber ich versichere Ihnen, dass es nicht so ist. Ich empfehle Ihnen, eine Google-Suche nach "X-Tastenkombinationen" durchzuführen - wobei X Ihrer Software (d. H. Photoshop) entspricht. Drucken Sie das Diagramm aus und platzieren Sie es neben Ihrem Computer. Üben Sie in den nächsten Wochen so wenig wie möglich, Ihre Maus zu berühren. Dies ist eine Sache, die die Profis von den Hobbyisten unterscheidet.
Seien wir ehrlich; Nicht jede Website muss eine riesige und komplizierte Anwendung sein. Manchmal möchten wir einfach unser Portfolio anzeigen - wahrscheinlich die meiste Zeit für einige! In diesen Fällen können Sie eine einfache "Vorlage" erstellen, die alles enthält, was Sie zum Einstieg benötigen.
In meinem Vorlagenordner habe ich die Ordner "JS" und "CSS" verschachtelt.
Außerdem habe ich eine "index.html (php)" -Datei, die einige Codeausschnitte enthält, die ich für die meisten meiner Projekte verwende. Es ist nichts Besonderes, aber es spart Zeit!
Unbenanntes Dokument
Wie Sie sehen, verweise ich auf meine CSS- und Javascript-Dateien, verweise auf die jQuery-Datei von Google, erstelle die jQuery-Funktion document.ready () und öffne das standardmäßige "container" -Div.
Es ist ziemlich simpel, aber es spart Zeit. Wenn Sie also eine neue Website erstellen, kopieren Sie einfach Ihren "Vorlagen" -Ordner und graben Sie hinein.
Im Allgemeinen sollten alle CSS und Javascript von der Seite entfernt und in ihren jeweiligen externen Dateien abgelegt werden.
Wenn Sie nur wenige Grundstile haben, kann eine Ausnahme gemacht werden. In diesen und nur in diesen Fällen kann es vorteilhaft sein, sie in die HTML-Seite aufzunehmen.
AJAX ist momentan in aller Munde - vor allem, weil es dank Javascript-Bibliotheken nun relativ benutzerfreundlich geworden ist. In einigen Fällen müssen Sie feststellen können, ob das Skript mit Javascript aufgerufen wurde. Es gibt einige Tage, um diese Aufgabe zu erledigen.
Eine Möglichkeit wäre, beim Senden des POST ein eindeutiges Schlüssel-Wert-Paar mit Javascript anzufügen. Sie können dann PHP verwenden, um festzustellen, ob dieser bestimmte Schlüssel vorhanden ist. In diesem Fall wissen wir, dass Javascript aktiviert ist.
Ein besserer Weg wäre die Verwendung einer integrierten PHP-Funktion namens "HTTP_X_REQUESTED_WITH". Um zu zeigen…
if isset ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) // Schreiben Sie Code und seien Sie sicher, dass das Javascript aktiviert ist. else // Tun Sie etwas anderes, um Benutzer zu entschädigen, die JS deaktiviert haben.
Vor nicht allzu langer Zeit hat Google mit dem Hosting beliebter Skripts wie jQuery begonnen. Wenn Sie eine solche Bibliothek verwenden, wird dringend empfohlen, einen Link zum CDN von Google zu erstellen, anstatt ein eigenes Skript zu verwenden.
AJAX-Bibliotheken-API
Ich bin ein großer Fan von Google Chrome. Es öffnet sich extrem schnell und verarbeitet Javascript schneller als alle anderen Browser - zumindest für den Moment (ich denke, die neueste Version von Firefox könnte aufgeholt haben.).
Ich werde jedoch nicht so schnell Firefox verlassen. Die Anzahl der für den Browser verfügbaren hilfreichen Plugins ist erstaunlich. Hier ist eine Liste meiner Favoriten.
Genauso wie es cool ist, Microsoft jetzt zu hassen, scheint es im Moment beliebt zu sein, dass Leute diejenigen angreifen, die IDEs während der Entwicklung verwenden. Das ist einfach dumm.
In vielen Fällen ist die Verwendung einer fortschrittlichen IDE von größter Bedeutung - insbesondere, wenn Sie in OOP-Sprachen arbeiten. Wenn Sie jetzt einfach eine kleine HTML-Vorlage erstellen, funktionieren Programme wie Notepad ++ und Coda hervorragend. Eigentlich würde ich ihre Verwendung in diesen Fällen empfehlen. Fügen Sie nicht das zusätzliche Aufblasen hinzu, wenn Sie es nicht brauchen. Nutzen Sie bei der Entwicklung fortschrittlicher Anwendungen jedoch eine IDE.
Das sollte es jetzt tun. Hoffentlich helfen ein paar davon (vielleicht alle!), Sie zu einem besseren Designer und Entwickler zu machen. Was sind deine Lieblings-Shortcuts? Hinterlasse einen Kommentar und lass es uns wissen!
