5 nyeste webutviklingsverktøy du bør vite

Hvis du har fulgt vår månedlige postserie på Fresh Resources for Designers and Developers, kan du se at hver måned er det mange nye verktøy introdusert; listen er sannsynligvis uendelig. Tilbake i 2008, da jeg bare begynte å lære HTML og CSS, hadde de fleste av disse verktøyene ikke eksistert ennå.

I dag vokser Internett eksponentielt. Det blir også mer komplekst enn noen gang før. Vi trenger flere verktøy som kan bidra til å løfte noe av vekten av webutvikling. Så i dette innlegget har vi satt sammen et sett av trendy verktøy som vil bidra til webutvikling .

Forhåpentligvis kan disse listerne hjelpe deg med å presentere de riktige verktøyene for webutvikling, spesielt for de som bare er i gang.

1. CSS Pre-prosessorer

CSS er veldig enkelt å skrive. Syntaxen er enkel og lett å forstå. Men da prosjektet ditt blir større, må du kanskje administrere flere stilark for å håndtere tusenvis av CSS-linjer, og hvis du vet CSS, vet du at det blir mektig vanskelig å opprettholde i den situasjonen.

Dette er hvor CSS Pre-prosessorer blir veldig nyttige. Vi har dekket CSS-Preprocessors flere ganger tidligere, så jeg antar at du allerede er ganske kjent med dem. For de som er nye, i et nøtteskall, tillater CSS Preprocessor oss å skrive CSS i programmeringsmodus med Variabler og Funksjoner, som deretter er kompilert i nettleser-kompatibelt CSS-format . Vi kan også gjenbruke CSS-egenskaper med noen spesielle regler som @extend og @include .

Det finnes en rekke CSS-forprosessorer: Sass, LESS, Stylus og Myth.

2. Template Engine

Å lage en statisk HTML-side på samme måte er enkel. Men hvis du har flere HTML-sider å håndtere i prosjektet, kan ting komme ut av hånden. De fleste av disse sidene kan dele de samme komponentene som en Header, Sidebar og Footer.

Hvis du endrer noe i sidefeltet, bør du endre det til sidefeltet på de andre sidene, en etter en, eller bruk en malmotor i stedet?

Bruke en mal Engine lyder bedre for denne situasjonen. Det er nå en rekke malmotorer som vi kan bruke, for eksempel Kit, Jade og Handlebars. Hver har sine egne skrivekonvensjoner. Kit, for eksempel, kommer bare med variabler og importeringsfunksjon som er deklarert med en enkel HTML-kommentærkode, slik som det.

 // eksempel på å importere en egen mal  // dette er en variabel 

Jade og håndtak har mange robuste funksjoner for å imøtekomme til mer komplekse prosjekter. Vi vil diskutere dem mer detaljert i et eget innlegg (hold deg innstilt!). Poenget er at hvis du vil bygge en skalerbar statisk nettside, bør du ta fordel av en malmotor .

3. Oppgave Runner

Prosessen med å bygge et nettsted er betydelig repeterende. Minifisering, kompilering, enhetstesting, linting, sammenkobling av filer og nettleser Forfriskende, for å nevne noen, er de tingene som vi mest sannsynlig vil gjøre ofte i prosjekter. Heldigvis kan de automatiseres ved hjelp av en Task Runner, som Grunt og Gulp.

Du kan fortelle Grunt å gjøre et sett med oppgaver som er spesifisert i Gruntfile.js . Det er nå mange plugins for å automatisere nesten alt med Grunt, så du trenger ikke skrive dine egne Grunt-oppgaver .

Si at du vil kompilere MINDRE filen til CSS, du kan installere grunt-contrib-less. I vårt tidligere innlegg har vi også utnyttet Grunt for å fjerne unødvendige moduler i jQuery.

Hvis prosjektet ditt sliter ut, er det på tide at du bruker en oppgaverunner for å strømlinjeforme arbeidsflyten din.

4. Synkronisert testverktøy

Her er et uunngåelig verktøy hvis du bygger en mobiloptimalisert nettside. Hvis du har mange enheter for å teste nettstedet ditt, trenger du definitivt synkronisert testing, som lar deg teste nettstedet ditt i flere enheter samtidig.

Nettleseropplasting samt samspillet som å klikke og rulle reflekteres over alle testede enheter samtidig, og sparer deg fra repeterende handling.

Det er to verktøy du kan prøve å gjøre dette: Et Grunt-plugin kalt BrowserSync, og et GUI-program kalt Ghostlab.

5. Utviklingsverktøy

Utviklingsverktøyet setter sammen en rekke verktøy i ett program. Hvis du ikke er komfortabel med den tekstbaserte innstillingen i Grunt, ville et GUI-program trolig være et bedre verktøy for deg.

Codekit pionerer denne typen søknad, og inkluderer mindre, Sass, Kit, Jade, Siml, Uglify, Bower, og mye mer på sin funksjonsliste.

Codekit er en OS X-eneste app. Hvis du bruker Windows, kan du prøve Prepros, hvis du bruker Linux, er det Koala-app .

15 Videoredigeringsprogrammer for IOS og Android-enheter

Apples iPhone har alltid kommet med en av de beste smarttelefonkameraene, og mange brukere utnytter dette ved å ta flotte bilder og videoer på det. Når du har den filmen, vil du ha en måte å redigere den på . Selv om IOS har sin egen redaktør, heldig for oss, er det nok av tredjepartsapps som kan gi deg flere redigeringsfunksjoner for å få videoene dine til å skinne.Mange av

(Tekniske og design tips)

Åtte Mobile Apps for 3D Design & Sketching

3D-modelleringsverktøy og programvare gjør at du kan gjøre ideene dine til vakre 3D-modeller og prototyper . Mye brukt i bransjer som 3D-utskrift, animasjon, spill, arkitektur og industriell design, er 3D-design viktige komponenter i digital produksjon.Imidlertid, som alle andre verktøy som går mobile, gjør 3D-design og sketching-apps raskt også veien til smarttelefonene og nettbrettene. Så, f

(Tekniske og design tips)