\n Alt er f\u00f8dt fra kode for en utvikler, s\u00e5 det er helt naturlig \u00e5 starte med det beste redigeringsverkt\u00f8yet du kan finne. Komodo Edit er ganske kosher for alt det og mer. Det er en fin flerspr\u00e5klig tekstredigerer p\u00e5 tvers av plattformer som du kan skrive og redigere koden i. \u00c5, og det er gratis.\n<\/p>\n
\n Verkt\u00f8yet fungerer p\u00e5 Windows, Mac, Linux\/UNIX, s\u00e5 ingen svette der. Vi liker det ogs\u00e5 for funksjonen for automatisk kodefullf\u00f8ring for spr\u00e5k som HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (for de rundt 5 menneskene i verden), osv. Det er en smart tekstredigerer.\n<\/p>\n
\n Bonuspoeng for ekstra bekvemmelighet med Project Manager-funksjonen for \u00e5 organisere og holde styr p\u00e5 filer.\n<\/p>\n
\n 2 CSS 3.0 Maker
\n<\/h5>\n
\n \n La oss v\u00e6re \u00e6rlige, til tross for alt du elsker med CSS3, kan du ikke unng\u00e5 \u00e5 hate det litt n\u00e5r det kommer til \u00e5 skrive syntaks for ting som avrundede ford\u00f8mte kanter. Det er en s\u00e5 triviell detalj \u00e5 miste s\u00f8vnen over, men det gj\u00f8r du uansett. Du kan ikke huske mer enn 100 nye egenskaper og deres respektive prefikser. S\u00e5 takk Herren for et verkt\u00f8y som CSS 3.0 Maker.\n<\/p>\n \n Dette pene lille nettverkt\u00f8yet lar deg kopiere og lime inn vanskelig kode i stilarket ditt. Den genererer kode for stildetaljer som boksradier, gradienter, tekst- og boksskygger, transformasjoner, overganger og rotasjoner etter eget valg. Det vil ogs\u00e5 vise hvilke stasjon\u00e6re og mobile nettlesere som st\u00f8tter disse stilegenskapene. Et lite forh\u00e5ndsvisningsomr\u00e5de vil vise effekten, koden kan kopieres fra visningsboksen eller lastes ned i en HTML-fil.\n<\/p>\n \n For de av oss som ikke kan bruke altfor mye tid p\u00e5 tilsynelatende banale stildetaljer, er dette verkt\u00f8yet en livredder.\n<\/p>\n \n \n «Slipp deg l\u00f8s fra CSS-prefikset helvete!» – Prefiksfri introside.\n<\/p>\n \n Dette er et no-nonsense verkt\u00f8y, brakt for \u00e5 befri oss fra ‘prefikshelvete' av en engel ved navn Lea Verou fra Github. Det vil legge til leverand\u00f8rprefiks (et sted du ikke kan se) til stilark i\n<\/p>\neller elementer. Dessuten: Du trenger ikke \u00e5 bekymre deg for nye elementer\neller elementer, jQuerys \n Hva er det ikke \u00e5 like?\n<\/p>\n \n \n ‘Lorem Ipsum' har v\u00e6rt den foretrukne plassholderteksten altfor lenge. Heldigvis har vi n\u00e5 Blokk: Fonten for \u00e5 sette \u00absmerten\u00bb av uforst\u00e5elig latin til en skrikende stans.\n<\/p>\n \n Blokk gir deg blokk «tekst» som skal brukes som plassholder mens du lager mockups og wireframes. Det sier seg ogs\u00e5 selv at det ikke vil forvirre de mindre, eh, nettopplyste klientene under presentasjoner.\n<\/p>\n \n \n F\u00f8r ikonfonter ble en ting, m\u00e5tte utviklere f\u00e5 hjelp av designere for \u00e5 lage skalerbare ikoner. Tiden det tok \u00e5 utvikle dem (som for \u00f8vrig inkluderer \u00e5 lage, trekke ut, implementere og tilpasse) grenset til «helt latterlig». Men s\u00e5 gjorde noen ikoner til fonter og alle levde lykkelige … i overskuelig fremtid.\n<\/p>\n \n Fontello er en flott ikonfontgenerator. Den lar deg velge blant tusenvis av ikoner, tilpasse kartleggingen eller redigere navnene deres, og kompilere dem i en enkelt fontfil. Det er fantastisk og det er gratis.\n<\/p>\n \n Vi kan ikke takke Vitaly Puzrin nok.\n<\/p>\n \n \n Sl\u00e5 p\u00e5 nettleserens JavaScript og begynn \u00e5 teste hvordan den valgte skrifttypen vil se ut p\u00e5 et faktisk nettsted.\n<\/p>\n \n Typetester er ukomplisert. Den lar deg angi og sammenligne forskjellige fonter og teste utseendet deres. Du kan ogs\u00e5 leke med st\u00f8rrelse, sporing, farge osv. til du f\u00e5r det du vil ha. Du kan sammenligne opptil 36 forskjellige skrifttyper samtidig. Tenk deg hvor mye tid du kan spare med det.\n<\/p>\n \n Det er ganske kult.\n<\/p>\n \n \n Koding kan noen ganger v\u00e6re litt slitsomt, men koderensing finnes p\u00e5 Level: Utter Tedium. Det er imidlertid n\u00f8dvendig hvis du vil forhindre feil og laste raskere.\n<\/p>\n \n Dirty Markup hjelper deg med \u00e5 spare tiden du ellers kan bruke p\u00e5 \u00e5 drive med mer interessante aktiviteter (bacon sandwich, noen?). Denne kommer med kombinerte muligheter til andre rengj\u00f8ringsverkt\u00f8y med enkeltsyntaks. Vi snakker HTML Tidy, CSS Tidy, JS Beautify og Ace Editor. Det er ett omfattende rengj\u00f8ringsmiddel.\n<\/p>\n \n Det er en nettbasert app for rengj\u00f8ring og formatering av HTML, CSS og JavaScript. Vi kan umulig be om mer.\n<\/p>\n \n \n Du kan bare bli en bug-drepende \u00e5rv\u00e5ken med dette kraftige verkt\u00f8yet.\n<\/p>\n \n BugHerd f\u00f8lger det eldgamle ordtaket om «Keep it Short and Simple, Stupid». Den kan fange opp klienttilbakemeldinger, l\u00f8se mindre problemer av seg selv, spore feil (for deg \u00e5 utrydde). Den vil ogs\u00e5 spille sekret\u00e6r og administrere prosjektene dine.\n<\/p>\n \n Et superenkelt pek-og-klikk-grensesnitt p\u00e5 nettstedet ditt lar brukerne rapportere problemer. BugHerd gj\u00f8r dem til rapporter med all informasjonen du trenger (som brukerens nettleserversjon). Det er enkelt \u00e5 sette opp, morsomt \u00e5 bruke, og har funksjoner som automatiske skjermbilder (nettleserutvidelse), direktekoblinger, filvedlegg, fullstendige velgerdata og diskusjoner.\n<\/p>\n \n For $29\/m\u00e5ned standard abonnement, det er en hake.\n<\/p>\n \n \n Responsiv webdesign er mer enn en ny kjepphest, ved at den er kommet for \u00e5 bli. Men forel\u00f8pig vil du finne flytende oppsett i beste fall vanskelig. Du vil ogs\u00e5 finne deg selv opparbeidet til et voldsomt raseri n\u00e5r du pr\u00f8ver \u00e5 teste layouten din p\u00e5 forskjellige skjermst\u00f8rrelser.\n<\/p>\n \n Heldigvis er Screenfly en fin liten nett-app som vil teste @media-sp\u00f8rsm\u00e5lene dine for deg. Du kobler til nettadressen din, og den vil vise hvordan s\u00f8kene dine h\u00e5ndterer enhetsdimensjoner du klikker deg gjennom i topppanelet.\n<\/p>\n \n Det tar ikke hensyn til gjengivelsesforskjellen mellom nettlesere, men du kan bruke nettleserbilder til det. Ellers er det en enkel, vakkert sammensatt m\u00e5te \u00e5 se hvordan nettstedet ditt ser ut med forskjellige oppl\u00f8sninger.\n<\/p>\n \n \n Siden vi snakker RWD, kan vi like godt begynne \u00e5 snakke rammeverk for \u00e5 utvikle det.\n<\/p>\n \n Internett-debatten raser om hvilket front-end-rammeverk som er bedre: Bootstrap eller Foundation? Du kan bruke den ene eller den andre. Men Foundation er litt mer i forgrunnen n\u00e5r det kommer til rutenettsystemer, proporsjonale enheter for design (selv om Bootstrap 4.0 Alpha har flyttet til em og rem enheter), h\u00f8yre-til-venstre-st\u00f8tte, pristabeller, turer og navigasjon utenfor lerretet .\n<\/p>\n \n Det er \u00e5penbart at vi foretrekker Foundation. Den fungerer med SASS og CSS, er full av en hel rekke funksjoner og generelt mer praktisk og fleksibel.\n<\/p>\n \n Vi er enige med Zurb om dette: Det er «vanvittig raskt».\n<\/p>\n \n \n Etter et ti\u00e5r med programvare som setter design foran kode, gir Adobe endelig koderne en Edge.\n<\/p>\n \n Dette \u00e6rlig talt fantastiske utvalget av verkt\u00f8y og tjenester er laget med tanke p\u00e5 de nye front-end-kodingstrendene. De har gitt oss en godbit. Edge Animate for \u00e5 hjelpe programmerere med \u00e5 lage animasjoner og samtidig utrydde alle spor av Flash. Beklager Adobe, Flash var bra. Men Animate bruker standard HTML og JavaScript, og du vet, \u00e9n st\u00f8rrelse passer alle…\n<\/p>\n \n Det er Edge Code for redigering av CSS fra et HTML-dokument. Inspect konsoliderer nettlesertester og enhetskompatibilitetstester for responsiv design, og synkroniserer dem alle for superrask oppdatering\/tilpasning. Det um\u00e5telig popul\u00e6re Typekit er n\u00e5 en del av Edge-familien. Reflow er enn\u00e5 ikke utgitt, men det vil sannsynligvis bl\u00e5se andre frontend CSS-nettprodusenter ut av vannet. Og det er enda mer.\n<\/p>\n \n Vi vet. Vi m\u00e5tte plukke kjevene fra gulvet ogs\u00e5.\n<\/p>\n \n \n Vagrant er s\u00e5 mye mer enn virtuell utviklingsprogramvare.\n<\/p>\n \n Denne skj\u00f8nnheten lar deg lage b\u00e6rbare, lett reproduserbare arbeidsmilj\u00f8er. Den konsoliderer virtualiseringsprogramvaren, serverbaseboksen og konfigurasjonsverkt\u00f8yene i \u00e9n kraftig pakke. I utgangspunktet trenger du ikke lenger ha VirtualBox + Ubuntu + Chef. Vagrant vil gj\u00f8re jobben til alle tre og ta mindre plass mens han gj\u00f8r det. Kraftbrukere vil ogs\u00e5 fortelle deg hvordan det lar deg enkelt sette opp multi-VM-nettverk.\n<\/p>\n \n Det er skrevet i Ruby, men vil fungere for PHP, Java, JavaScript, Python og C#. Du kan jobbe med Vagrant p\u00e5 Windows, Mac OSX, Linux og FreeBSD.\n<\/p>\n \n Den er superrask fordi den ikke har noe av det U-vennlige – jeg g\u00e5r for det som ser fint ut, men som tar opp s\u00e5rt tiltrengt plass. Det fungerer godt som et testmilj\u00f8 for utviklere.\n<\/p>\n \n Det er s\u00e5 n\u00e6r den hellige gral som vi kan komme.\n<\/p>\n \n \n Googles PageSpeed \u200b\u200bInsights gj\u00f8r n\u00f8yaktig-det-det-sier-p\u00e5-tinn. Det gir deg innsikt i sidens frontend-ytelse. Det kommer til \u00e5 v\u00e6re en \u00f8ye\u00e5pner for mange h\u00f8ye og mektige utviklere der ute. S\u00e5 ha en chortle-fest og begynn den akselererte skallingen fra alt h\u00e5ret som skal trekkes.\n<\/p>\n \n Alt den gj\u00f8r er \u00e5 m\u00e5le medg\u00e5tt tid mellom: foresp\u00f8rsel og gjengivelse av innhold over skillelinjen, og foresp\u00f8rsel og helsides gjengivelse.\n<\/p>\n \n Den vil sjekke de nettverksuavhengige aspektene for \u00e5 beregne hvordan siden din yter: serverkonfigurasjon, HTML-struktur, JavaScript, CSS og bilder.\n<\/p>\n \n Den er sylskarp og n\u00e5del\u00f8st rask; s\u00e5 det vil definitivt skade f\u00f8lelsene dine og muligens f\u00e5 deg til \u00e5 gr\u00e5te hvis du scorer lavt. Den vil ogs\u00e5 pr\u00f8ve \u00e5 gj\u00f8re opp for det ved \u00e5 gi deg skarpe forslag for \u00e5 forbedre ytelsen din, som en nedlatende forelder.\n<\/p>\n \n Og vi elsker det.\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844581a0a86.webp\")
<\/a>\n<\/p>\n\n 3 \u2013 uten prefiks
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844583d44dd.webp\")
<\/a>\n<\/p>\n.css()<\/code>prefikser eller endringer du gj\u00f8r, fordi det vil dekke alt.<\/p>\n\n 4 Block Pounds
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-638445861b498.webp\")
<\/a>\n<\/p>\n\n 5 Fontello
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-638445880da58.webp\")
<\/a>\n<\/p>\n\n 6 Typetester
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384458ad95f3.webp\")
<\/a>\n<\/p>\n\n 7 Dirty Markup
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384458e305ed.webp\")
<\/a>\n<\/p>\n\n 8 BugHerd
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844590dfd3c.webp\")
<\/a>\n<\/p>\n\n 9 Screenfly
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844592db210.webp\")
<\/a>\n<\/p>\n\n 10 Stiftelse
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384459574e29.webp\")
<\/a>\n<\/p>\n\n 11 Adobe Edge
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844597e33a5.webp\")
<\/a>\n<\/p>\n\n 12 Vagrant
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384459a1429e.webp\")
<\/a>\n<\/p>\n\n 13 PageSpeed \u200b\u200bInsights
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384459ca2be9.webp\")
<\/a>\n<\/p>\n\n 14 Git
\n<\/h5>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384459f578c6.webp\")
<\/a>\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-638445a2c069a.webp\")
<\/a>\n<\/p>\n