\n Allt kommer fr\u00e5n kod f\u00f6r en utvecklare, s\u00e5 det \u00e4r bara naturligt att b\u00f6rja med det b\u00e4sta redigeringsverktyget du kan hitta. Komodo Edit \u00e4r ganska kosher f\u00f6r allt det och mer. Det \u00e4r en trevlig plattformsoberoende, flerspr\u00e5kig textredigerare f\u00f6r dig att skriva och redigera din kod i. \u00c5h, och det \u00e4r gratis.\n<\/p>\n
\n Verktyget fungerar p\u00e5 Windows, Mac, Linux\/UNIX, s\u00e5 ingen svett d\u00e4r. Vi gillar det ocks\u00e5 f\u00f6r dess automatiska kodkompletteringsfunktion f\u00f6r spr\u00e5k som HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (f\u00f6r de 5 eller s\u00e5 m\u00e4nniskorna i v\u00e4rlden), etc. Det \u00e4r en smart textredigerare.\n<\/p>\n
\n Bonuspo\u00e4ng f\u00f6r extra bekv\u00e4mlighet med Project Manager-funktionen f\u00f6r att organisera och h\u00e5lla reda p\u00e5 filer.\n<\/p>\n
\n 2 CSS 3.0 Maker
\n<\/h5>\n
\n \n L\u00e5t oss vara \u00e4rliga, trots allt du \u00e4lskar med CSS3 kan du inte l\u00e5ta bli att hata det lite n\u00e4r det kommer till att skriva syntax f\u00f6r saker som rundade f\u00f6rbannade kanter. Det \u00e4r en s\u00e5 trivial detalj att tappa s\u00f6mnen \u00f6ver, men det g\u00f6r man \u00e4nd\u00e5. Du kan inte memorera fler \u00e4n 100 nya egenskaper och deras respektive prefix. S\u00e5 tack Herren f\u00f6r ett verktyg som CSS 3.0 Maker.\n<\/p>\n \n Detta snygga lilla onlineverktyg l\u00e5ter dig kopiera och klistra in knepig kod i din stilmall. Den genererar kod f\u00f6r stildetaljer som boxradier, gradienter, text och boxskuggor, transformeringar, \u00f6verg\u00e5ngar och rotationer som du v\u00e4ljer. Det kommer ocks\u00e5 att visa vilka webbl\u00e4sare f\u00f6r station\u00e4ra och mobila enheter som st\u00f6der dessa stilegenskaper. Ett litet f\u00f6rhandsgranskningsomr\u00e5de kommer att visa effekten, koden kan kopieras fr\u00e5n visningsrutan eller laddas ner i en HTML-fil.\n<\/p>\n \n F\u00f6r de av oss som inte kan \u00e4gna alldeles f\u00f6r mycket tid \u00e5t till synes banala stildetaljer \u00e4r det h\u00e4r verktyget en livr\u00e4ddare.\n<\/p>\n \n \n ”Bli loss fr\u00e5n CSS-prefix helvetet!” \u2013 Prefixfri introsida.\n<\/p>\n \n Det h\u00e4r \u00e4r ett no-nonsens verktyg, f\u00f6rt f\u00f6r att befria oss fr\u00e5n ”prefix helvetet” av en \u00e4ngel som heter Lea Verou fr\u00e5n Github. Det kommer att l\u00e4gga till leverant\u00f6rsprefix (n\u00e5gonstans du inte kan se) till stilmallar i\n<\/p>\neller element. Dessutom: Du beh\u00f6ver inte oroa dig f\u00f6r nya element\neller element, jQuerys \n Vad finns det att inte gilla?\n<\/p>\n \n \n ”Lorem Ipsum” har varit platsh\u00e5llartexten som ska anv\u00e4ndas alldeles f\u00f6r l\u00e4nge. Lyckligtvis har vi nu Blokk: Typsnittet f\u00f6r att s\u00e4tta ”sm\u00e4rtan” av obegripligt latin till ett skrikande stopp.\n<\/p>\n \n Blokk ger dig blockerad ”text” som ska anv\u00e4ndas som platsh\u00e5llare n\u00e4r du skapar mockups och wireframes. Det \u00e4r ocks\u00e5 sj\u00e4lvklart att det inte kommer att f\u00f6rvirra de mindre, eh, webbupplysta kunderna under presentationer.\n<\/p>\n \n \n Innan ikontypsnitt blev en grej, var utvecklare tvungna att ta hj\u00e4lp av designers f\u00f6r att skapa skalbara ikoner. Tiden det tog att utveckla dem (som f\u00f6r \u00f6vrigt inkluderar att skapa, extrahera, implementera och anpassa) gr\u00e4nsade till ”absolut l\u00f6jligt”. Men sedan f\u00f6rvandlade n\u00e5gon ikoner till typsnitt och alla levde lyckliga… under \u00f6versk\u00e5dlig framtid.\n<\/p>\n \n Fontello \u00e4r en fantastisk ikontypsnittsgenerator. Det l\u00e5ter dig v\u00e4lja bland tusentals ikoner, anpassa deras mappning eller redigera deras namn och kompilera dem i en enda teckensnittsfil. Det \u00e4r fantastiskt och det \u00e4r gratis.\n<\/p>\n \n Vi kan inte tacka Vitaly Puzrin nog.\n<\/p>\n \n \n Sl\u00e5 p\u00e5 webbl\u00e4sarens JavaScript och b\u00f6rja testa hur ditt valda typsnitt kommer att se ut p\u00e5 en faktisk webbplats.\n<\/p>\n \n Typtester \u00e4r okomplicerat. Det l\u00e5ter dig ange och j\u00e4mf\u00f6ra olika typsnitt och testa deras utseende. Du kan ocks\u00e5 leka med storlek, sp\u00e5rning, f\u00e4rg etc. tills du f\u00e5r det du vill ha. Du kan j\u00e4mf\u00f6ra upp till 36 olika typsnitt samtidigt. F\u00f6rest\u00e4ll dig hur mycket tid du kan spara med det.\n<\/p>\n \n Det \u00e4r ganska coolt.\n<\/p>\n \n \n Kodning kan vara lite tr\u00f6ttsamt ibland, men kodrensning finns p\u00e5 Level: Utter Tedium. Det \u00e4r dock n\u00f6dv\u00e4ndigt om du vill f\u00f6rhindra fel och ladda snabbare.\n<\/p>\n \n Dirty Markup hj\u00e4lper till att spara den tid du annars kan spendera p\u00e5 mer intressanta aktiviteter (baconsm\u00f6rg\u00e5s, n\u00e5gon?). Den h\u00e4r kommer med kombinerade funktioner f\u00f6r andra reng\u00f6ringsverktyg med singelsyntax. Vi pratar HTML Tidy, CSS Tidy, JS Beautify och Ace Editor. Det \u00e4r ett helt\u00e4ckande reng\u00f6ringsmedel.\n<\/p>\n \n Det \u00e4r en webbaserad app f\u00f6r att reng\u00f6ra och formatera din HTML, CSS och JavaScript. Vi kan om\u00f6jligt beg\u00e4ra mer.\n<\/p>\n \n \n Du kanske bara blir en bugd\u00f6dande vigilante med detta kraftfulla verktyg.\n<\/p>\n \n BugHerd f\u00f6ljer det urgamla ordspr\u00e5ket ”Keep it Short and Simple, Stupid”. Det kan f\u00e5nga klientfeedback, l\u00f6sa mindre problem p\u00e5 egen hand, sp\u00e5ra buggar (f\u00f6r dig att utrota). Det kommer ocks\u00e5 att spela sekreterare och hantera dina projekt.\n<\/p>\n \n Ett superenkelt peka-och-klicka-gr\u00e4nssnitt p\u00e5 din webbplats l\u00e5ter dina anv\u00e4ndare rapportera problem. BugHerd f\u00f6rvandlar dem till rapporter med all information du kan beh\u00f6va (som anv\u00e4ndarens webbl\u00e4sarversion). Det \u00e4r l\u00e4tt att st\u00e4lla in, roligt att anv\u00e4nda och har funktioner som automatiska sk\u00e4rmdumpar (webbl\u00e4sartill\u00e4gg), direktl\u00e4nkar, filbilagor, fullst\u00e4ndiga v\u00e4ljardata och diskussioner.\n<\/p>\n \n F\u00f6r $29\/m\u00e5nad standardprenumeration \u00e4r det en hake.\n<\/p>\n \n \n Responsiv webbdesign \u00e4r mer \u00e4n en ny modefluga, eftersom den \u00e4r h\u00e4r f\u00f6r att stanna. Men f\u00f6r tillf\u00e4llet kommer du i b\u00e4sta fall att tycka att flytande layouter \u00e4r knepiga. Du kommer ocks\u00e5 att uppleva ett v\u00e5ldsamt raseri n\u00e4r du f\u00f6rs\u00f6ker testa din layout p\u00e5 olika sk\u00e4rmstorlekar.\n<\/p>\n \n Lyckligtvis \u00e4r Screenfly en trevlig liten webbapp som testar dina @media-fr\u00e5gor \u00e5t dig. Du kopplar in din webbadress och den visar hur dina fr\u00e5gor hanterar enhetsdimensioner som du klickar igenom i den \u00f6vre panelen.\n<\/p>\n \n Det tar inte h\u00e4nsyn till renderingsskillnaden mellan webbl\u00e4sare, men du kan anv\u00e4nda Browser Shots f\u00f6r det. Annars \u00e4r det ett enkelt, vackert sammansatt s\u00e4tt att se hur din webbplats ser ut med olika uppl\u00f6sningar.\n<\/p>\n \n \n Eftersom vi pratar RWD kan vi lika g\u00e4rna b\u00f6rja prata ramverk f\u00f6r att utveckla det.\n<\/p>\n \n Internetdebatten rasar om vilket front-end-ramverk som \u00e4r b\u00e4ttre: Bootstrap eller Foundation? Du kan anv\u00e4nda det ena eller det andra. Men Foundation \u00e4r n\u00e5got mer i f\u00f6rgrunden n\u00e4r det g\u00e4ller rutn\u00e4tssystem, proportionella enheter f\u00f6r design (\u00e4ven om Bootstrap 4.0 Alpha har flyttat till em och rem-enheter), h\u00f6ger-till-v\u00e4nster-st\u00f6d, pristabeller, turer och navigering utanf\u00f6r arbetsytan .\n<\/p>\n \n Det \u00e4r uppenbart att vi f\u00f6redrar Foundation. Den fungerar med SASS och CSS, \u00e4r full av en hel rad funktioner och generellt mer bekv\u00e4m och flexibel.\n<\/p>\n \n Vi h\u00e5ller med Zurb om detta: Det \u00e4r ”galet snabbt”.\n<\/p>\n \n \n Efter ett decennium av programvara som s\u00e4tter design f\u00f6re kod, ger Adobe \u00e4ntligen kodarna en Edge.\n<\/p>\n \n Denna uppriktigt sagt fantastiska m\u00e4ngd verktyg och tj\u00e4nster \u00e4r gjorda med tanke p\u00e5 de nya front-end-kodningstrenderna. De har gett oss en njutning. Edge Animate f\u00f6r att hj\u00e4lpa kodare att skapa animationer och samtidigt utpl\u00e5na alla sp\u00e5r av Flash. F\u00f6rl\u00e5t Adobe, Flash var bra. Men Animate anv\u00e4nder standard HTML och JavaScript, och du vet, en storlek passar alla…\n<\/p>\n \n Det finns Edge Code f\u00f6r att redigera CSS fr\u00e5n ett HTML-dokument. Inspect konsoliderar webbl\u00e4sartest och enhetskompatibilitetstester f\u00f6r responsiv design och synkroniserar dem alla f\u00f6r supersnabb uppdatering\/anpassning. Det om\u00e5ttligt popul\u00e4ra Typekit \u00e4r nu en del av Edge-familjen. Reflow har \u00e4nnu inte sl\u00e4ppts, men det kommer f\u00f6rmodligen att bl\u00e5sa andra frontend CSS-n\u00e4ttillverkare ur vattnet. Och det finns \u00e4nnu mer.\n<\/p>\n \n Vi vet. Vi var tvungna att lyfta k\u00e4karna fr\u00e5n golvet ocks\u00e5.\n<\/p>\n \n \n Vagrant \u00e4r s\u00e5 mycket mer \u00e4n virtuell utvecklingsprogramvara.\n<\/p>\n \n Denna sk\u00f6nhet l\u00e5ter dig skapa b\u00e4rbara, l\u00e4tt reproducerbara arbetsmilj\u00f6er. Den konsoliderar virtualiseringsprogramvaran, serverbasboxen och konfigurationsverktygen i ett kraftfullt paket. I grund och botten beh\u00f6ver du inte l\u00e4ngre ha VirtualBox + Ubuntu + Chef. Vagrant kommer att g\u00f6ra jobbet f\u00f6r alla tre och ta mindre plats medan han g\u00f6r det. Power-anv\u00e4ndare kommer ocks\u00e5 att ber\u00e4tta hur det g\u00f6r att du enkelt kan konfigurera multi-VM-n\u00e4tverk.\n<\/p>\n \n Det \u00e4r skrivet i Ruby, men kommer att fungera f\u00f6r PHP, Java, JavaScript, Python och C#. Du kan arbeta med Vagrant p\u00e5 Windows, Mac OSX, Linux och FreeBSD.\n<\/p>\n \n Det \u00e4r supersnabbt eftersom det inte har n\u00e5got av det U-v\u00e4nliga-jag som ser snyggt ut men tar upp v\u00e4lbeh\u00f6vligt utrymme. Det fungerar bra som en testmilj\u00f6 f\u00f6r utvecklare.\n<\/p>\n \n Det \u00e4r s\u00e5 n\u00e4ra den heliga gralen vi kan komma.\n<\/p>\n \n \n Googles PageSpeed \u200b\u200bInsights g\u00f6r exakt-vad-det-s\u00e4gs-p\u00e5-pinnen. Det ger dig insikter om din sidas frontend-prestanda. Det kommer att bli en \u00f6gon\u00f6ppnare f\u00f6r m\u00e5nga h\u00f6ga och m\u00e4ktiga utvecklare d\u00e4r ute. S\u00e5 ha en chortle-fest och b\u00f6rja den accelererade skalligheten fr\u00e5n allt h\u00e5r som kommer att dras.\n<\/p>\n \n Allt det g\u00f6r \u00e4r att m\u00e4ta f\u00f6rfluten tid mellan: beg\u00e4ran och ovanf\u00f6r mitten av inneh\u00e5llsrendering, och beg\u00e4ran och helsidesrendering.\n<\/p>\n \n Den kommer att kontrollera de n\u00e4tverksoberoende aspekterna f\u00f6r att ber\u00e4kna hur din sida presterar: serverkonfiguration, HTML-struktur, JavaScript, CSS och bilder.\n<\/p>\n \n Den \u00e4r knivskarp och skoningsl\u00f6st snabb; s\u00e5 det kommer definitivt att skada dina k\u00e4nslor och f\u00f6rmodligen f\u00e5 dig att gr\u00e5ta om du f\u00e5r l\u00e5ga po\u00e4ng. Den kommer ocks\u00e5 att f\u00f6rs\u00f6ka kompensera f\u00f6r det genom att ge dig konkreta f\u00f6rslag f\u00f6r att f\u00f6rb\u00e4ttra din prestation, som en nedl\u00e5tande f\u00f6r\u00e4lder.\n<\/p>\n \n Och vi \u00e4lskar det.\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844581a0a86.webp\")
<\/a>\n<\/p>\n\n 3 \u2013 utan prefix
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844583d44dd.webp\")
<\/a>\n<\/p>\n.css()<\/code>prefix eller eventuella \u00e4ndringar du g\u00f6r, f\u00f6r det kommer att t\u00e4cka allt.<\/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 Sk\u00e4rmfluga
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844592db210.webp\")
<\/a>\n<\/p>\n\n 10 Stiftelsen
\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