Dagens artikel uppmuntrar dig att vana att ägna tid åt små experiment. Att testa idéer och lösa problem i en lågtryck och eventuellt jätte miljö kan kraftigt öka din utbildning och leda till fantastisk innovation.
Vi börjar med några fördelar och tips för att experimentera med webbutvecklingsprojekt och avsluta med en kort titt på några av de verktyg som jag personligen använder för att komponera egna experiment. Låt oss börja!
Fördelarna med experiment
Experimentation är en kraftfull sak. Faktum är att jag skulle kalla det en absolut viktig del i fortbildning av någon webbutvecklare, oavsett om du har varit på den i tio dagar eller tio år. Alla kunskaper i webbdesign i världen kommer inte att innebära att du kommer att hoppa om du inte hoppa in och få dina händer smutsiga.
? Det absolut bästa sättet för mig att lära mig något på detta område är att skjuta upp en textredigerare och ge det ett skott själv.?Jag läser regelbundet webbdesignböcker och jag åtminstone bläddra, om inte helt konsumera flera webbdesign tutorials dagligen. Det här är stora resurser, men det absolut bästa sättet att lära mig någonting på detta område är att skjuta upp en textredigerare och ge det ett skott själv.
Teori och instruktion verkar ha en ganska tillfällig plats i min hjärna, men ett praktiskt projekt hyser sig djupt i mitt långsiktiga minne. Orsaken är vanligtvis ganska enkel: frustration. Sanningen är att jag misslyckas regelbundet när jag försöker åstadkomma en viss idé eller ett experiment. Ofta fungerar inte saker bara inte så smidigt som jag föreställer mig att de kommer och resultatet blir att jag sitter och tinkar med ett problem i timmar i slutet.
Frustration utmanar mig. En gång inför ett problem som jag inte kan lösa omedelbart, löser jag mig för att slå det till varje pris. Projektet självt har liten eller ingen konsekvens, det är en handling av att arbeta ut saker som tvingar mig att öka min kunskapsbas, vilket i sin tur hjälper till i alla framtida projekt framåt.
Tips för experiment
Innan vi tittar på några av de verktyg som jag personligen använder för att snabbt hämta ut mina idéer, låt oss gå över några grundläggande saker att komma ihåg när du går in på dina egna webbutvecklingsexperiment.
Du behöver inte nödvändigtvis ett mål
Det hjälper absolut att ha ett mål eller en destination i åtanke när man svänger med någon kod, men i sanning borde du inte undvika övningen bara för att du inte har någon grand idé eller quandary.
Författare engagerar sig ofta i denna övning där de bara sätter sig ner och skriver ner sina tankar när de kommer, det är en stor vana att komma in i och kan verkligen skapa några solida skrivideor. Som utvecklare borde du försöka samma sak. Om du är uttråkad en eftermiddag och har trettio minuter att döda, börja bara kodning för att se var det tar dig. Det låter syndigt tråkigt för utomstående men litar på mig, om du är i rätt yrke, kommer du att älska varje minut av det.
Gräva runt i andra människors kod
Du behöver inte starta från början när du experimenterar. En av de absolut bästa sätten att hämta nya tekniker är att spricka öppna någon annans kod för att se vad som gör det kryssat. När du är in, bläddra inte bara, börja byta saker och kommentera avsnitt för att se hur sidan svarar. Kom alltid ihåg att fråga? Varför ?? när du ser något du inte förstår!
Några bra ställen att börja är förbyggda ramar och pannplattor, som HTML5 Boilerplate. Dessa typer av verktyg skapas för enkel surfning, förutom att de är ganska avancerade tenderar de också att vara extremt väl dokumenterade och organiserade.
Glöm Reglerna
När du kodar en professionell webbplats, se till att du är på bästa sätt med giltig, semantisk kod och kompatibilitet med webbläsaren. När du experimenterar, var dock inte rädd för att kasta försiktighet mot vinden och prova någonting som kommer att tänka på.
För att lösa ett problem är det viktigt att veta vad som fungerar och varför, även om din lösning visar sig vara oacceptabel i en levande webbmiljö, kan det hjälpa dig att nå en som är.
Vidare, mellan HTML5 och CSS3, finns det massor av nya tekniker där ute och väntar bara på att du ska försöka få en glimt av webbdesign i framtiden. Många av dem arbetar bara med två webbläsare eller mindre men det betyder inte att det inte är värt att gräva in och se hur de fungerar!
När du är klar med att skapa ditt Frankenstein webbmonster, kör det genom ett valideringsverktyg eller linsverktyg för att se några förklaringar på varför det inte är korrekt och förslag på hur du fixar det.
Slå handledningen
En annan stor katalysator för experiment är en webbdesigntutorial som de som du ser på den här sidan och andra. När som helst ser du en av dessa, bläddra igenom den och fråga dig själv huruvida den presenterade lösningen är den bästa.
Följ inte bara anvisningarna, tänka på hur du kan förbättra processen genom att minska ineffektiviteten. Konkurrensen mellan dig kommer att upptäcka att när du står inför en motståndare som du försöker bäst, kommer du att köras mycket längre än vad du normalt skulle göra.
Verktyg för experiment
Snarare än att ge dig en enorm lista över resurser som du måste sortera genom dig själv för att hitta de riktiga ädelstenarna, bestämde jag mig för att skära ner erbjudandet den här gången och presentera bara de verktyg som jag personligen använder för experiment.
Verktygen nedan är ganska lika i konceptet men skiljer sig tillräckligt för att jag befinner mig själv med hjälp av olika saker. När du provar dem och känner för dem, så ser du vad jag menar.
Espresso för Mac
Låt oss börja med den enda icke-lediga resursen på listan. Espresso är inte bara ett verktyg för experiment, det är fullt på professionellt IDE som kommer att leda dig runt $ 80. Om du är en professionell webbdesigner men det är värt vartenda öre.
Det finns en miljon skäl att det är bra att fungera som din primära kodningsmiljö, men det främsta skälet till att det är bra att experimentera är live preview-fönstret. När du kodar uppdateras HTML-förhandsvisningen i realtid utan en manuell uppdatering.
Använd Divvy eller något liknande verktyg för att dela upp din skärmfastighet mellan din kod och förhandsvisningsfönster och du har själv en oslagbar experimenteringsflöde. En annan fantastisk fördel här som du ofta inte hittar i gratis onlineverktyg är automatiskt slutförd, vilket verkligen sparar dig massor av skrivartid och låter dig busta ut dessa experiment på en tredjedel av tiden.
Om du redan är en Espresso-fan, kolla Kaboom-utgåvan av Espresso 2!
CSSDesk
Vill du ha en kodningsmiljö som uppdateras lever men inte kostar dig en dime? Kolla in CSSDesk. Detta fantastiska lilla verktyg består av tre huvudområden: CSS, HTML och förhandsgranskning. När du kodar i den lilla expanderbara låda till vänster på skärmen, gör förhandsgranskningen till rätt uppdateringar i realtid, vilket gör det till ett fantastiskt sätt att snabbt prova eventuella webbdesignsidor du kanske har.
CSSDesk är extremt användbar och har några riktigt bra funktioner, inklusive möjligheten att dela eller ladda ner dina skapelser. En unik sak som jag inte har sett någon annanstans är möjligheten att anpassa bakgrunden till dina experiment. Det här är jättebra när du inte kodar en hel sida utan istället vill fokusera på ett enda objekt.
Du kommer också att älska fördelarna med radnummerering, kodhöjning och möjligheten att dölja kodlådan helt för att se ditt experiment i full fönsterstorlek.
jsFiddle
jsFiddle är mycket som CSSDesk, bara med en stor förstärkning i funktionalitet (som kan vara ett pro eller con för ett enkelt experiment). Till att börja med, som namnet antyder, läggs stor vikt vid JavaScript här. Du behöver dock inte skriva en enda rad av JavaScript för att det ska vara till hjälp.
I jsFiddle har du fyra resizable områden, en för HTML, CSS, JavaScript och en förhandsgranskning. Till skillnad från de två föregående valen måste förhandsgranskningen uppdateras manuellt varje gång du vill visa den.
En fantastisk funktion av jsFiddle är möjligheten att snabbt ladda i populära JavaScript-bibliotek som MooTools och jQuery. Du kan också spara, dela och gaffla ditt arbete och det finns knappar för att städa upp din kod och lämna kommentarer till andras experiment.
Jag gillar verkligen den enkla och effektiva CSSDesk-miljön, men i sanning är jsFiddle min go-to-place online för snabba experiment. Jag älskar helt enkelt det här verktyget och kan inte rekommendera tillräckligt för att du gör en vecka vana ur att ta tid att komma hit och tinker runt med idéer eller problem som du har haft.
Slutsats
Sammanfattningsvis är frekvent experimentation avgörande för din tillväxt som webbdesigner och utvecklare. Det är alltför lätt att falla i fällan av att tillgripa samma gamla metoder på varje enskilt projekt som du tar på, vilket lätt kan leda till en stagnation av talang. Det finns inget mer farligt för en webbdesigners karriär än att falla bakom och bli föråldrad!
Tipsen för att experimentera ovan är i första hand riktade till kodare men kan också enkelt appliceras på pixel pushers också. Här skulle din lekplats helt enkelt vara Photoshop, Illustrator och / eller Fireworks, men de allmänna förslagen om freeform-experiment, titta på andras arbete för inspiration och bryta dina typiska vanor gäller fortfarande.
Lämna en kommentar nedan och låt oss veta hur mycket tid du ägnar dig åt att bara leka och prova nya saker. Hur mycket värde får du från den här tiden och vilka verktyg använder du?