Cu totii ne dorim sa crestem in lucrurile pe care le facem, iar in domeniul dezvoltarii web, unul dintre principalele domenii in care petrecem mult timp este codul nostru. Acestea pot include HTML, CSS, JavaScript, PHP, Python, ActionScript sau orice alt limbaj pe care ati putea alege sa il utilizati pentru crearea site-urilor web.

In acest articol, va voi impartasi cativa pasi practici pe care ii puteti urma pentru a va extinde setul de abilitati si a deveni un programator mai bun.

As dori sa propun cinci obiceiuri diferite pe care le poti adapta pentru a te ajuta sa devii mai excelent in ceea ce faci.

1. Concentrati-va pe un singur tip de limba la un moment dat

Daca proiectati si dezvoltati pentru web, exista adesea numeroase limbi diferite cu care va trebui sa va familiarizati si poate fi tentant sa incercati sa le invatati pe toate simultan, mai ales avand in vedere cat de interconectate sunt toate. Presupun ca, intr-o oarecare masura, acest lucru este inevitabil. Dar daca chiar doriti sa va imbunatatiti rapid, va recomand sa va concentrati pe un anumit domeniu de expertiza.

Doriti sa folositi CSS mai bine? Pune-ti atentia pe asta. Incercati sa utilizati un singur document HMTL si sa creati diverse machete folosind doar stiluri.

CSS Zen Garden este un exemplu grozav al cat de incredibil de diferita poate deveni pagina dvs. web pentru acelasi marcaj. De asemenea, va puteti concentra eforturile gasind o lista de elemente si lucrand peste ele. De exemplu, daca va simtiti confortabil cu CSS2, dar doriti sa va imbunatatiti intelegerea a ceea ce este posibil cu CSS3, puteti studia proprietatile CSS3 si puteti incepe sa le lucrati una cate una.

Puteti citi specificatiile actuale CSS3. Puteti experimenta cu fiecare modul pentru a vedea ce poate (si nu) face in ce browsere. Ati putea folosi o abordare similara a limbajelor de scripting precum JavaScript si PHP, desi incercarea de a lucra metodic prin toate functiile lor ar putea fi putin plictisitoare.

O alta optiune ar fi sa lucrati printr-un numar de tutoriale in mod specific pe aceste limbi, de preferinta in zona specifica in care lucrati cel mai mult. Trebuie sa deveniti mai bun la dezvoltarea WordPress? Exista o multime de tutoriale despre asta.

Doriti sa aflati mai multe despre manipularea imaginilor pe server? Exista si tutoriale pentru asta. Gasiti-le, marcati-le si analizati-le – doar nu o faceti in timp ce parcurgeti tutoriale despre CSS, HTML5 sau orice alt limbaj web, astfel incat sa nu va raspanditi prea putin.

Alege unul si tine-l pana il stapanesti, apoi treci la urmatorul.

2. Scrie-ti logica prin comentarii

Cand vine vorba de codificare, sunt multe principii si idei pe care le sustin. Una dintre acestea este ca codul este logic in proportie de 95%. O alta este ca logica nu se schimba atunci cand este tradusa din limbajul uman intr-un limbaj de programare.

Acest lucru inseamna ca, daca il poti scrie in cod, il poti scrie intr-o limba vorbita precum engleza sau franceza. De exemplu, sa presupunem ca am vrut sa scriu o functie care sa blocheze sau sa deblocheze ceva in functie de ora din zi (din ce motiv, nu sunt sigur). In loc sa trec doar in codificarea functiei, as putea sa dau inapoi si sa scriu logica in limba engleza simpla ca comentarii.

3. Studiati sabloane, pluginuri si cod sursa deschisa

Web-ul este un loc incredibil de accesibil si deschis, mai ales in comunitatile de design si dezvoltare. Aceasta dispozitie a web-ului poate fi o resursa valoroasa pentru oricine doreste sa devina un programator mai bun. De exemplu, daca chiar ai inceput sa folosesti HTML, poti descarca oricare dintre nenumaratele sabloane gratuite care exista pe internet sau poti studia marcajul site-ului tau preferat.

Deoarece aceste sabloane sunt de obicei doar HTML simplu (si CSS, si poate JavaScript), ele pot functiona local, oferindu-va posibilitatea de a deschide sursa si de a incepe sa cautati. Joaca-te cu etichetele si structura pentru a le intelege mai bine. Muta ​​lucrurile in jur.

Vedeti ce se intampla cand modificati o regula de stil. Desigur, as recomanda cu caldura sa combinati aceasta experimentare cu citirea unor resurse solide despre standarde si bune practici. La urma urmei, nu vrei sa te trezesti prin obiceiuri proaste de codare.

Aceasta tehnica este probabil si mai utila pentru codarea programatica precum JavaScript sau PHP, care sunt destul de mai complexe decat HTML sau CSS in ceea ce priveste domeniul de aplicare si logica. De exemplu, un sistem de management al continutului precum WordPress este construit aproape in intregime pe o baza de diferite scripturi PHP care lucreaza toate impreuna pentru a stabili functionalitatile de baza. Platforma de publicare accepta, de asemenea, o arhitectura vasta si puternica pentru extinderea acestei functionalitati de baza, permitandu-va sa descarcati si sa instalati pluginuri care fac tot felul de lucruri interesante (si uneori complet banale).

Avantajul tuturor acestor lucruri este ca WordPress si pluginurile sale sunt in intregime open source, ceea ce inseamna ca aveti acces complet la tot codul. Asadar, mergeti mai departe si profitati de acest fapt cautand in plugin-uri si aruncand in jurul codului. Din nou, aceasta este o oportunitate grozava de a incerca lucruri si de a experimenta.

Un ultim sfat cu privire la acest obicei: nu luati niciodata tehnicile sau structurile pe care le gasiti in codul altor persoane ca fiind definitive (sau „evanghelie”) – asigurati-va ca incercati sa intelegeti si ce se intampla si nu doar sa imiteti pe cel al altcuiva. cod. Intrebati intotdeauna de ce lucrurile sunt asa cum sunt. Incercati intotdeauna sa luati in considerare codul deoarece se refera la procesele si standardele acceptate pentru limba respectiva.

Din nou, acest lucru va va ajuta sa nu va alunecati in anumite obiceiuri proaste.

4. Cititi Carti

Desi exista o multime de informatii grozave pe diverse bloguri aici pe web (cum ar fi chiar aici, la Six Revisions), inca nu exista nimic ca sa citesti o carte buna despre un subiect. Blogurile sunt grozave pentru articole si tutoriale pe anumite subiecte si pot face minuni pentru sfaturi rapide, dar, din punctul meu de vedere, nimic nu bate o carte buna pentru a ajuta la construirea unei intelegeri fundamentale puternice a unui subiect mai larg. Acest lucru nu mi-a fost niciodata mai clar decat atunci cand m-am saturat in sfarsit de machetele bazate pe tabele pe care le creasem la sfarsitul anilor 90 si la inceputul secolului XXI.

In acel moment, mi-am dat seama in sfarsit ca era timpul sa trec la cele mai bune practici div. Cu toate acestea, pana in acel moment, am avut doar un succes moderat incercand sa ma invat cum sa folosesc un marcaj adecvat. Nu am inteles pe deplin sintaxa selectorului CSS, care este o parte atat de mare a machetelor divbazate pe grokking.

Ca atare, chiar nu am primit nici pseudo-clase (cum ar fi :hover), iar intregul concept de specificitate si mostenire nu a insemnat nimic pentru mine. Acelasi lucru a fost valabil si pentru pozitionare si plutitoare. Acum, probabil ca as fi putut invata limba incet, impletind fragmente de informatii de la diverse bloguri (din care erau mult mai putine la acea vreme, as putea adauga) pentru a forma o imagine mai cuprinzatoare a CSS in ansamblu.

Asta ar fi durat mult si aveam treburi de facut, asa ca cautam o solutie mai convenabila. Deci, am iesit si am cumparat Stylin’ With CSS de Charles Wyke-Smith. A fost o revelatie.

In doar cateva capitole scurte, aveam jos conceptele de baza ale CSS. Toate acele lucruri despre care nici macar nu stiam ca exista mi-au fost facute cunoscute intr-un mod bine ritmat si organizat, fiecare capitol construindu-se pe cel de dinainte. In aproximativ o zi de lectura, am dobandit aceeasi cantitate de cunostinte care mi-ar fi luat saptamani si luni sa scot dintr-o gama larga de articole si articole de blog.

Desigur, am invatat mult mai multe de atunci, dar aceasta singura carte a fost intr-adevar fundatia cunostintelor mele CSS si o pastrez in continuare pe raftul meu ca referinta (are un apendice foarte la indemana). Daca trebuie sa descoperi o noua tehnologie de la zero, o carte buna este una dintre cele mai bune modalitati de a o rezolva!

5. Experimenteaza

Ultimul lucru pe care v-as sugera sa va obisnuiti este sa va distrati. Aseaza-te, experimenteaza si vezi ce poti gasi pe cont propriu. In prezent, aceasta este o tendinta populara cu CSS3, deoarece diferiti codori incearca sa impinga tehnologia si tehnicile pentru a descoperi de ce este capabil cu adevarat.

Iata doar cateva exemple de astfel de experimente.

Transformari CSS3 si experiment @font-face

Acesta este un experiment foarte tare care creeaza un design tipografic asemanator unui poster folosind proprietatea @font-face CSS, impreuna cu unele umbre si transformarea uimitoare de rotatie, care, atunci cand este pe deplin acceptata de toate browserele, va deschide tot felul de noi posibilitati uimitoare. in web design.

Postere CSS

In acest articol de la Design Informer, Jad Limcaco experimenteaza cu privire la crearea unui numar de modele diferite de afise folosind nimic altceva decat CSS.

Grafic linie CSS pur

Exista o multime de tutoriale diferite care demonstreaza cum sa creati grafice cu bare folosind CSS. Acesta foloseste o abordare diferita pentru vizualizarea datelor prin utilizarea unui grafic cu linii reale. In functie de punctul tau de vedere, s-ar putea sa nu crezi ca este CSS „pur”, deoarece foloseste un sprite urias, dar este totusi destul de grozav.

Stive in stil leopard CSS3

Acest articol ilustreaza o incercare excelenta de a incerca sa recreati un efect non-web folosind CSS prin emularea vizuala a unui comportament din sistemul de operare Mac. Este si ea destul de bine facuta, asa ca verificati-l pentru a va inspira.

CSS pur Twitter Fail Whale

Nu toate experimentele CSS sunt in intregime practice, desigur, iar acesta este probabil cel mai putin practic dintre toate, deoarece recreeaza de fapt binecunoscuta ilustratie a balenei esuate de pe Twitter folosind nimic altceva decat CSS. Este consumator de timp? Da.

Este practic? Nu. Dar este cu siguranta distractiv si este o dovada a conceptului cat de puternic este CSS.

Toate aceste experimente fac lucruri convingatoare cu CSS. Unele au mai multe aplicatii din lumea reala decat altele, dar sunt sigur ca toti creatorii lor au luat ceva din explorarea CSS-ului; poate o mai buna intelegere a proprietatilor CSS specifice cu care lucrau sau cateva tehnici pe care le vor putea aplica la design-urile reale ale site-urilor. Ce fel de experiment de codificare puteti intreprinde?

Poate fi un mod distractiv si eficient de a invata.