Haupt / Merkmal

25 Webentwicklungstipps zur Verbesserung Ihrer Fähigkeiten

Es wird oft gesagt, dass es keinen Ersatz für Erfahrung gibt - aber es gibt Abkürzungen dazu. Wir haben mit erfahrenen Entwicklern gesprochen. Menschen, die Tag für Tag über Schleifen arbeiten und über Attribute sklaven. Diese Sammlung von Tipps stammt direkt aus dem Code.

Überfüllt wie ein nicht ausreichend spezifizierter Puffer wurde ein Googolplex an Know-how gefiltert, um Ihnen 25 feine Funktionen, Tricks und Tipps zu bieten. Es gibt Open-Source-Dienste, über die Entwickler schweigen, mobile Programmierhacks und reaktionsschnelle Entwicklungstipps.

Wir hatten schon einige dieser herausragenden Geheimnisse gehört, aber viele waren selbst für uns brandneu. Wir sind sicher, dass Sie mehr als ein oder zwei finden werden, um Ihren Werkzeuggürtel hinzuzufügen.

Codierung

1. Listen löschen

Das Löschen schwebender Elemente ist für die meisten Webentwickler ein Teil des Problems. Wir können trotzdem erwischt werden. Wie können Sie beispielsweise schwebende Listenelemente löschen, ohne eine Höhe festzulegen? 'Die Antwort auf dieses kleine Dilemma ist eigentlich ganz einfach', sagt Rhys Little von Plug and Play , 'Fügen Sie einfach die folgenden zwei CSS-Eigenschaften zu jedem Listencontainer mit schwebenden Listenelementen hinzu.'

display: block;overflow: hidden;

Wenn Sie den Listencontainer jetzt mit einem DOM-Inspektor überprüfen, werden Sie feststellen, dass das Höhenattribut automatisch berechnet wurde - und das Problem dadurch behoben wird.

2. Sandkasten

Wenn Sie beispielsweise Techniken, CSS-Effekte oder neue Arten des Übergangs entwickeln möchten, tun Sie dies als Sandbox-Projekt. „Wenn Sie das Experimentieren nicht durch äußere Einflüsse überladen, lässt sich der Code viel einfacher debuggen, wenn etwas nicht wie erwartet funktioniert“, sagt Creative Director Shane S. Mielke .

3. Webinspektoren

Entwickler unterscheiden sich darin, welcher Webinspektor am besten geeignet ist, aber sie sind sich alle einig, dass wir Probleme hatten, bevor unsere Lieblingsbrowser sie hatten. Neuer Kontext ’S Paul Wilson weist darauf hin, dass Sie CSS-Änderungen live in Chrome oder Safari anzeigen können. Klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie 'Element überprüfen'. Wilson sagt: 'Das gesamte angewendete CSS wird im rechten Inspektionsbereich angezeigt.' Sie können hier neue Elemente bearbeiten oder hinzufügen, um die Auswirkungen Ihrer Änderungen zu sehen. “

Auf den Webinspektor kann in Safari auf dem Mac standardmäßig nicht zugegriffen werden. Aktivieren Sie es, indem Sie in der Menüleiste zu Einstellungen> Erweitert> Entwicklungsmenü anzeigen gehen.

4. Firebug und darüber hinaus

In Chrome und Safari ist jedoch ein Webinspektor integriert Mike Ballan , Digital Designer bei Qualle steht zur ursprünglichen Firefox Developers Toolbar. 'Es ist die perfekte Lösung, um diese kleinen CSS-Probleme zu erkennen, wenn Sie Ihre Website in mehreren Bildschirmgrößen testen', sagt Mike.

'Firebug hat soeben die Möglichkeit hinzugefügt, mehrere Bildschirmgrößen auch in einem Browser-Tab anzuzeigen. Das bedeutet, dass Sie die Breite Ihres Browsers nie mehr ändern müssen, um Ihre Website erneut zu testen.'

5. Eine Sache zu einer Zeit

Ben Howdle , Entwickler von Didlr bei wapple.net sagt, er könne die Bedeutung des Prinzips der Einzelverantwortung nicht genug betonen. „Jedes Objekt in Ihrem Code sollte eine Funktion haben. Auch mit CSS. Fügen Sie nicht alle Stile einer .button-Klasse hinzu. Teilen Sie es in .knopfstruktur und .knopffläche und so weiter ... ”

Warum? Wenn Sie dies nicht tun und etwas kaputt geht, haben Sie eine Menge Zeit, um Ihren Code zurückzuverfolgen und herauszufinden, welches Objekt das Problem ist - und ob der Fehler von höher im DOM geerbt wird.

6. Können Sie es codieren?

Ben ist auch der Meinung, dass es nicht immer die beste Antwort ist, auf Frameworks und Bibliotheken zurückzugreifen. 'Wenn Sie ein kleines Projekt codieren und beispielsweise immer jQuery einschließen, denken Sie an' Kann ich das mit Vanilla JS tun? '. Möglicherweise stellen Sie fest, dass Sie dies tatsächlich in JavaScript besser und schneller tun können.

Projektmanagement

7. Holen Sie sich Git

Wenn Sie an großen Projekten arbeiten, benötigen Sie ein robustes Versionsverwaltungssystem. Viele Entwickler schwören auf GitHub, aber es gibt einen Nachteil, wenn Ihr Projekt privat ist. Ihr Code wird auf den Servern von GitHub gehostet und ist öffentlich verfügbar. Die Leute bei Plug and Play empfehlen GitLab .

'GitLab ist GitHub sehr ähnlich, ist jedoch vollständig Open Source und kann kostenlos auf Ihren eigenen Servern eingerichtet werden', sagt Rhys Little. „Das beste Setup für GitLab ist die Verwendung NGINX mit Einhorn um Leistung und Geschwindigkeit zu verbessern - aber Apache mit Passagier wird auch funktionieren.

'Der größte Vorteil dieser Anordnung besteht darin, dass Ihr gesamter Code bei jedem Commit gesichert wird, mit einem wirklich nützlichen Diff-Viewer, damit Sie sehen können, was bei jedem Commit geändert wurde.'

8. Kommentierter Code

Denken Sie insbesondere an Teammitarbeiter, dass andere Personen Ihren Code verstehen müssen - verwenden Sie Ihre Ressourcen und arbeiten Sie Ihre Dateien durch. 'Sei nicht faul', sagt Shane S. Mielke. „Kommentieren Sie immer Ihren Code, benennen Sie Ihre Ebenen und organisieren Sie Ihre PSDs und FLAs. Je besser Ihre Dateien organisiert sind, desto einfacher ist es für Sie oder andere, einzuspringen und zu verstehen, wo sich die Dinge befinden und wie sie funktionieren. “

9. Sichern Sie Ihre Site

Stellen Sie sicher, dass Sie eine Website durchlaufen, bevor Sie sie live schalten ASafaWeb.com (ausgesprochen A-Safer-Web). 'Diese von Microsoft MVP Troy Hunt geschriebene Website durchsucht ASP.NET-Websites nach einer Reihe allgemeiner Sicherheitsprobleme', sagt .NET dev Macs Dickinson . 'Sollten Sie einen der Tests nicht bestehen, werden Sie beraten, wie Sie das Problem beheben können.'

10. Automatisieren

'Verschwenden Sie keine Zeit damit, Komponententests bereitzustellen oder manuell auszuführen. Automatisieren Sie es ', sagt Macs.' Die Zeit, die Sie damit verbracht haben, sich mit NAnt oder MSBuild auseinanderzusetzen, ist gut angelegt, da dadurch die Anzahl der Reifen verringert wird, durch die Sie springen müssen, wenn diese Frist abläuft. '

11. Team Tracker

Das Team bei Unboxed Consulting benutzen Pivotal Tracker und Pivotal Booster für Projektmanagement und Feature / Bug Tracking. 'Es gibt andere Tools dafür, aber Pivotal Tracker ist eine einfache, leichte Option', sagte uns das Team. 'Wir verwenden es regelmäßig, um den Fortschritt durch Projekte zu verfolgen.'

12. Perfekte Bilder

Pixel Perfekt ist ein Tool, das Unboxed zum Vergleich der ursprünglichen Entwürfe mit dem tatsächlichen Front-End verwendet, das der Entwicklungsprozess ausspuckt. 'Mit diesem kleinen Firefox-Plugin können Sie eine JPEG-Version Ihrer Designs direkt über der Seite überlagern', sagt das Unboxed-Team. 'Sie können bis zum letzten Pixel überprüfen, ob alles in einer Reihe steht!'

13. Gepunktete Linien

Unboxed hat eine intelligente, intuitive Idee, um den Fortschritt beim Codieren von Seiten zu verfolgen. 'Manchmal verwenden wir beim Frontend eine CSS-Klasse' unvollständig 'oder' todo ', die Elemente, die nicht funktionieren oder noch nicht fertig sind, gepunktet umreißt', sagt das Team. 'Wir können klar erkennen, was Arbeit braucht, bevor wir live gehen.'

Handy, Mobiltelefon

14. Aktive Telefonnummern

„Die meisten Mobilgeräte können Anrufe tätigen. Nutzen Sie dies in Ihrem Seitencode“, sagt Mike Ballan. Wickeln Sie die Nummer in die Etikett. Anstelle von http: // als Protokoll verwenden Sie 'tel:'

So könnte das aussehen:

0123456789

15. Hoch oder niedrig?

Ist Ihre Website für Retina-Bildschirme bereit? Glaube nicht, dass es dir gut geht, nur weil die Zahlen gerade auf deiner Seite sind, weil es nicht für immer so bleibt.

„Je nach Reaktion auf die Bildschirmauflösung gibt es verschiedene Lösungen zum Wechseln von Bildern“, sagt Mike. 'Es gibt das JavaScript-Framework retina.js Hier wird die @ 2x-Namenskonvention von Apple verwendet, um Standardbilder gegen hochauflösende Versionen auszutauschen.

'Es ist auch möglich, hochauflösende Bilder mit dem Webkit-Image-Set an iOS-Geräte zu liefern.' Hier ist wie:

.header { background: -webkit-image-set( url(images/header.jpg) 1x, url(images/header_2x.jpg) 2x);}

16. Feste Position

Möchten Sie eine feste Navigation oder eine Kontaktleiste am unteren Rand Ihrer Website haben? Wenn es um Mobilgeräte geht, müssen Sie berücksichtigen, dass nur wenige Browser die Klasse 'Fest' unterstützen. 'Windows Phone 7 wird die' feste 'Klasse durch' statisch 'ersetzen - was nicht gut ist', sagt Mike.

Hier ist seine Liste mobiler Betriebssysteme, die das Attribut 'fest' in CSS unterstützen:

Mobile Safari iOS5 und höher
Android 3 und höher
Blackberry 7.0 und höher

Verknüpfungen

17. Sprite mich

Verwandeln Sie Schaltflächen, Symbole und Hintergründe in Sprites, um das Herunterladen von Seiten zu beschleunigen. Durch das Kombinieren mehrerer Bilder zu einer Datei wird die Anzahl der Anforderungen reduziert, die der Client an Ihren Server stellen muss. 'Einige Entwickler gruppieren Bilder nach Typ', sagt Rhys Little. 'Andere kombinieren einfach alles in einer Datei.'

Anschließend verwenden Sie das CSS-Attribut für die Hintergrundposition, um nur den gewünschten Teil des Bildes anzuzeigen. Das Bild wird einmal heruntergeladen, einmal zwischengespeichert und einmal angefordert. Wenn das nach zu viel harter Arbeit klingt, verwenden Sie das Online-Tool SpriteMe die Eselarbeit machen. Es durchsucht Ihre Seite nach Bildern, die es kombinieren kann, und generiert das CSS für Sie.

18. Leerraum

„Wenn Sie den Leerraum und sogar die Funktionsnamen von JavaScript und CSS verkleinern, werden die Ladezeiten Ihrer Seiten erheblich verkürzt“, sagt Rhys. Er schlägt vor, all Ihr JavaScript und CSS in einer oder zwei Dateien zu kombinieren und diese Dateien dann weiterzuleiten YUI-Kompressor .

19. Aktionen

Selbst Designer vergessen, wie einfach Photoshop-Aktionen ihr Leben gestalten können. Entwickler werden dies nicht vergessen: Photoshop Web Workflow .

„Nach der Installation klicken Sie auf eine beliebige Ebene in Photoshop und drücken die F1-Taste“, sagt Paul Wilson. „Dadurch wird die Ebene erfasst, in ein neues Dokument eingefügt, das die genauen Abmessungen aufweist, und das Fenster Für Web speichern wird angezeigt.“

Eine einfach klingende Sequenz, die jedoch die Erstellung von Hintergründen, Prototypen und Sprites erheblich beschleunigt

20. Wenn dann

Keir Whitaker von Viewport Industries kann ohne Mac-Anwendung nicht leben TextExpander: „Sie können Verknüpfungen zu großen Textblöcken zuweisen. Wenn ich zum Beispiel die WordPress-Schleife in meinem Code-Editor ausgeben möchte, gebe ich einfach // loop ein. Es funktioniert systemweit und ist ein großartiges Werkzeug zum Erstellen zeitaufwändiger Codestrukturen wie verschachtelter Listen.

21. Aktualisiert

Keir ist auch ein Fan von CodeKit „Wenn Sie einen Mac verwenden, ist CodeKit ein Muss“, sagt er. „Die Funktion zum erneuten Laden des Browsers ist allein die geringen Kosten wert. Es eignet sich auch hervorragend zur Bildoptimierung und zum Kompilieren von Sass und JavaScript.

22. Sie haben alle Post

'Es ist ein Vollzeitjob, der die Mailing-Funktion Ihrer App aufrechterhält. Sparen Sie sich also Kopfschmerzen und lagern Sie sie aus', sagt UX Developer Will Grant . Services wie SendGrid oder Mandrill sorgen für Zustellbarkeit, Spam-Schutz und Bounce-Berichte - das Los. 'Diese Dinge sind supergünstig oder sogar kostenlos für Ihre ersten paar tausend Mails.'

Responsive Sites

23. Medienabfragen

'Beim Erstellen von reaktionsfähigen Websites sind Medienabfragen das Rückgrat des Prozesses', sagt Mike Ballan. 'Sie entsprechen dem Medientyp Ihres Geräts und zeigen das von Ihnen deklarierte CSS an.' Zum Beispiel:

body { text-color:#000000; }@media only screen and (min-width:1200px) {body { text-color:#FF0000; }}

Der obige Code erfasst Bildschirmauflösungen mit 1200px oder höher und wendet die Farbe Rot auf den gesamten Text auf der Seite an. Wenn die Bildschirmgröße weniger als 1200 Pixel beträgt, wird schwarzer Text angezeigt.

So weit, so einfach - aber erfahrene Entwickler wissen, dass dieser Prozess bald umständlich werden kann, wenn Sie sich bemühen, alle Menschen die ganze Zeit zufrieden zu stellen.

„Verwenden Sie ein CSS-Framework wie überraschen Sagt Mike. Es ersetzt die Notwendigkeit, eine Milliarde verschiedener Medienabfragen durch einfache semantische Klassen zu schreiben

24. Eine schwerere Wahl

Wenn ein schwereres Framework erforderlich ist, dann Twitter's Bootstrap oder ZURB-Stiftung könnte den Trick machen.

25. Schalten Sie die Dinge aus

„Wenn Sie reaktionsfähige Websites erstellen, möchten Sie nicht, dass Benutzer doppelt tippen und zoomen können, da alle Ihre Inhalte sichtbar sein sollten“, sagt Mike Ballan. „Dazu müssen Sie Code hinzufügen, der das Zoomen von Benutzern deaktiviert und Skalierung “.

Mit diesem Code kann das iOS-Gerät Websites auch eleganter anzeigen, wenn das iPad oder iPhone gedreht wird.

Unsere Experten waren:

Keir Whitaker, Mitbegründer von Bath-based Viewport Industries hat mit Carsonified and Smashing Magazine zusammengearbeitet.

Rhys Little aus Plug and Play Southampton bot einige Top-CSS-Tipps.

Shane S. Mielke ist Designer und Creative Director bei Kunden wie LucasArts, Nintendo und Sony Pictures Studio.

Paul Wilson ist MD von Neuer Kontext Schottland, spezialisiert auf agile Projektentwicklung in Ruby on Rails.

Mike Ballan ist Digital Designer bei Qualle Wer ist mit XHTML und CSS genauso vertraut wie mit Photoshop?

Macs Dickinson ist ein walisischer .NET-Entwickler, der in Yorkshire lebt. Er ist @MacDickinson auf Twitter.

Ben Howdle ist Teil des Teams, das gerade die Entwicklung von Didlr bei abgeschlossen hat wapple.net . Es ist eine Zeichen-App für Web- und Mobilgeräte.