Friske ressurser for webdesignere og utviklere (februar 2015)

Etter å ha gjort dette i mer enn et år, er den vanskeligste delen om å skrive denne månedlige ressursbunken for designere og utviklere introduksjonen. Mens vi er på temaet, er det ditt februar 2015-sammendrag av de beste og ferskeste ressursene for webutviklere som deg.

I denne delen ser vi på en spesiell søkemotor for å finne kodeutdrag, en veldig ressursfull referanse til adresseproblemer i Flexbox-modulen, og utviklingsverktøy for bedre styring av farge, skrift og gradienter.

Gradient Animator

CSS3 Gradient tillater oss å lage imageless gradients på nettstedet vårt uten behov for å laste inn noen bilder. Vi kan til og med kombinere den med CSS3 Animation for å gi en mer overbevisende effekt. Men hvis koden er for mye for deg, bruk den enklere Gradient Animator-ruten for å generere en med et fint grensesnitt.

SVG Pocket Guide

SVG Pocket Guide er utarbeidet av Joni Trythall. Det er en praktisk referanse som vil gå deg gjennom det grunnleggende av SVG (som å skape former og tekst) helt til mer avanserte funksjoner (som å lage gradienter, utklippsstier og mønstre). Boken kommer i Markdown-format og er tilgjengelig på engelsk og portugisisk.

Flexbugs

Flexbox er en veldig lovende ny modul i CSS3 som helt ville forandre de måten vi bygger weboppsett på. Men det kommer også med kompatibilitetsproblemer med egen nettleser. Dette depotet, Flexbugs, er en samling av disse feilene og løsningene for å adressere dem. Dette er en svært nyttig ressurs for alle som bor på den blødende kanten på nettet.

icono

Det er utrolig hva vi kan oppnå med bare CSS som å lage et fullt presentert ikon med bare ett enkelt element. icono er biblioteket som gjør dette. I dette biblioteket finner du en samling kjente ikoner som kun er laget med et enkelt element, og CSS. Disse ikonene lastes raskere og er mer tilpassbare enn bildebaserte ikoner.

Dillinger

Dillinger er et øye-tiltalende Markdown editor. Her kan du skrive i Markdown format, og umiddelbart se utgangen på høyre side. For enkelhets skyld gir Dillinger deg muligheten til å eksportere arbeidet ditt til HTML, PDF, eller bare i et Markdown-filformat når du har gjort det. Alternativt kan du også koble den til en tredjepartstjeneste som Dropbox og Github hvor du kan lagre filen.

HTML5Up

HTML5Up er en samling gratis HTML5-baserte maler. Du kan finne en håndfull oppsett som passer til ulike typer nettsteder: virksomhet, portefølje eller bare en enkel blogg. Alle maler er også lydhør, og sikrer at innholdet og nettstedet layout er morsomt i varierende skjermstørrelser.

CSS-farger

Noen gang lurer på hva en bestemt farge heter? CSS-farger viser farge navn samt Hex og RGBA format for en samling av grunnleggende farger. Det er en god kilde for å finne den perfekte fargekombinasjonen for nettstedene dine.

Emmet Re-view

Re-view er en Chrome-utvidelse som analyserer nettstedet ditt @media spørringer og viser nettstedet ditt i hvert av de punkter som er spesifisert i hver @media spørsmål. Hvis du leter etter et verktøy som kan spare deg litt tid når du tester lydhør nettsider, så er dette verktøyet du trenger.

TypeGenius

Hvis du ser på Google Font-biblioteket, finner du mange skrifter i ulike ansikter, familie, vekt og typer. Derfor kan det være en virkelig overveldende oppgave å velge riktig par eller kombinasjon av skrifter. TypeGenius gjør valg av skriftpar enkelt og raskt og mulig for den generelle befolkningen.

søke

Som navnet sa, er dette en søkemotor for å lete etter koder eller kodestykker av mange programmeringsspråk, inkludert JavaScript, C, PHP. Denne søkemotoren kommer til å resultere i mange kilder som Github, Bitbucket og Google Code. Dette er et absolutt må-ha-verktøy for tunge kodere.