\n Kaikki syntyy koodista kehitt\u00e4j\u00e4lle, joten on luonnollista aloittaa parhaalla mahdollisella muokkausty\u00f6kalulla. Komodo Edit on melko kosher kaikkeen t\u00e4h\u00e4n ja muuhun. Se on mukava monialustainen, monikielinen tekstieditori, jolla voit kirjoittaa ja muokata koodiasi. Ja se on ilmainen.\n<\/p>\n
\n Ty\u00f6kalu toimii Windows-, Mac-, Linux-\/UNIX-k\u00e4ytt\u00f6j\u00e4rjestelmiss\u00e4, joten ei hikoilu siell\u00e4. Pid\u00e4mme siit\u00e4 my\u00f6s sen automaattisen koodin t\u00e4ydennysominaisuuden vuoksi kielille, kuten HTML, CSS, JavaScript, Java, PHP, Ruby, Perl (noin viidelle ihmiselle maailmassa) jne. Se on yksi \u00e4lyk\u00e4s tekstieditori.\n<\/p>\n
\n Bonuspisteet lis\u00e4\u00e4v\u00e4t Project Manager -ominaisuuden mukavuutta tiedostojen j\u00e4rjest\u00e4miseen ja seuraamiseen.\n<\/p>\n
\n 2 CSS 3.0 Maker
\n<\/h5>\n
\n \n Olkaamme rehellisi\u00e4, huolimatta kaikesta mit\u00e4 rakastat CSS3:ssa, et voi olla vihaamatta sit\u00e4 hieman, kun on kyse syntaksin kirjoittamisesta sellaisille asioille kuin py\u00f6ristetyt kirottu reunat. On niin triviaali yksityiskohta, ett\u00e4 menet\u00e4t unesi, mutta teet kuitenkin. Et voi muistaa enemp\u00e4\u00e4 kuin 100 uutta ominaisuutta ja niiden etuliitteit\u00e4. Joten kiitos Herralle ty\u00f6kalusta, kuten CSS 3.0 Maker.\n<\/p>\n \n T\u00e4m\u00e4n siistin pienen verkkoty\u00f6kalun avulla voit kopioida ja liitt\u00e4\u00e4 hankalaa koodia tyylisivullesi. Se luo koodin tyyliyksityiskohtiin, kuten laatikon s\u00e4teet, kaltevuudet, teksti ja laatikon varjot, muunnokset, siirtym\u00e4t ja kierrokset. Se n\u00e4ytt\u00e4\u00e4 my\u00f6s, mitk\u00e4 ty\u00f6p\u00f6yt\u00e4- ja mobiiliselaimet tukevat kyseisi\u00e4 tyyliominaisuuksia. Pieni esikatselualue n\u00e4ytt\u00e4\u00e4 tehosteen, koodin voi kopioida n\u00e4kym\u00e4ruudusta tai ladata HTML-tiedostoon.\n<\/p>\n \n Niille meist\u00e4, jotka eiv\u00e4t voi omistaa aivan liian paljon aikaa n\u00e4enn\u00e4isen banaalin tyylin yksityiskohtiin, t\u00e4m\u00e4 ty\u00f6kalu on hengenpelastaja.\n<\/p>\n \n \n ”Vapauta CSS-etuliitehelvetist\u00e4!” – Etuliitet\u00f6n esittelysivu.\n<\/p>\n \n T\u00e4m\u00e4 on j\u00e4rjet\u00f6n ty\u00f6kalu, jonka Githubin Lea Verou-niminen enkeli toi pelastamaan meid\u00e4t ”etuliitehelvetist\u00e4”. Se lis\u00e4\u00e4 toimittajan etuliitett\u00e4 (jotkin et n\u00e4e) tyylisivuihin\n<\/p>\ntai elementteihin. Lis\u00e4ksi: Sinun ei tarvitse huolehtia uusista\ntai elementeist\u00e4, jQueryn \n Mist\u00e4 ei pid\u00e4?\n<\/p>\n \n \n ”Lorem Ipsum” on ollut paikkamerkkiteksti aivan liian kauan. Onneksi meill\u00e4 on nyt Blokk: Fontti, joka pys\u00e4ytt\u00e4\u00e4 k\u00e4sitt\u00e4m\u00e4tt\u00f6m\u00e4n latinan ”tuskan”.\n<\/p>\n \n Blokk antaa sinulle lohkon ”teksti\u00e4”, jota k\u00e4ytet\u00e4\u00e4n paikkamerkkin\u00e4, kun luot malleja ja rautalankaa. Sanomattakin on selv\u00e4\u00e4, ett\u00e4 se ei h\u00e4mmenn\u00e4 v\u00e4hemm\u00e4n web-valaistuneita asiakkaita esitysten aikana.\n<\/p>\n \n \n Ennen kuin ikonifonteista tuli asia, kehitt\u00e4jien oli pyydett\u00e4v\u00e4 suunnittelijoiden apua skaalautuvien kuvakkeiden luomiseen. Niiden kehitt\u00e4miseen kulunut aika (johon muuten sis\u00e4ltyy luominen, purkaminen, toteuttaminen ja mukauttaminen) rajoittui ”t\u00e4ysin naurettavaan”. Mutta sitten joku muutti kuvakkeet fonteiksi ja kaikki eliv\u00e4t onnellisina\u2026 l\u00e4hitulevaisuudessa.\n<\/p>\n \n Fontello on loistava ikonien kirjasingeneraattori. Sen avulla voit valita tuhansien kuvakkeiden joukosta, muokata niiden kartoitusta tai muokata niiden nimi\u00e4 ja koota ne yhdeksi kirjasintiedostoksi. Se on h\u00e4mm\u00e4stytt\u00e4v\u00e4\u00e4 ja se on ilmainen.\n<\/p>\n \n Emme voi kiitt\u00e4\u00e4 tarpeeksi Vitaly Puzrinia.\n<\/p>\n \n \n Ota selaimesi JavaScript k\u00e4ytt\u00f6\u00f6n ja ala testata, milt\u00e4 valitsemasi kirjasintyyppi n\u00e4ytt\u00e4\u00e4 todellisella sivustolla.\n<\/p>\n \n Kirjoituslaite on mutkaton. Sen avulla voit sy\u00f6tt\u00e4\u00e4 ja verrata erilaisia \u200b\u200bfontteja ja testata niiden ulkon\u00e4k\u00f6\u00e4. Voit my\u00f6s leikki\u00e4 koon, seurannan, v\u00e4rin jne. kanssa, kunnes saat haluamasi. Voit vertailla jopa 36 eri kirjasintyyppi\u00e4 kerralla. Kuvittele, kuinka paljon aikaa voit s\u00e4\u00e4st\u00e4\u00e4 t\u00e4ll\u00e4.\n<\/p>\n \n Se on aika siisti\u00e4.\n<\/p>\n \n \n Koodaus voi joskus olla hieman v\u00e4sytt\u00e4v\u00e4\u00e4, mutta koodinpuhdistus on olemassa tasolla: Utter Tedium. Se on kuitenkin v\u00e4ltt\u00e4m\u00e4t\u00f6nt\u00e4, jos haluat est\u00e4\u00e4 virheit\u00e4 ja ladata nopeammin.\n<\/p>\n \n Dirty Markup auttaa s\u00e4\u00e4st\u00e4m\u00e4\u00e4n aikaa, jonka voit muuten k\u00e4ytt\u00e4\u00e4 mielenkiintoisempien aktiviteettien parissa (pekonivoileip\u00e4, kuka tahansa?). T\u00e4m\u00e4 sis\u00e4lt\u00e4\u00e4 muiden yhden syntaksin puhdistusty\u00f6kalujen yhdistetyt ominaisuudet. Puhumme HTML Tidyst\u00e4, CSS Tidyst\u00e4, JS Beautifysta ja Ace Editorista. Se on yksi kattava puhdistusaine.\n<\/p>\n \n Se on verkkopohjainen sovellus HTML:n, CSS:n ja JavaScriptin puhdistamiseen ja muotoiluun. Emme voi pyyt\u00e4\u00e4 enemp\u00e4\u00e4.\n<\/p>\n \n \n T\u00e4m\u00e4n tehokkaan ty\u00f6kalun avulla saatat vain tulla vikoja tappavaksi valvojaksi.\n<\/p>\n \n BugHerd noudattaa ikivanhaa sanonta ”Pid\u00e4 se lyhyt ja yksinkertainen, tyhm\u00e4”. Se voi kaapata asiakaspalautteen, ratkaista pieni\u00e4 ongelmia itse, j\u00e4ljitt\u00e4\u00e4 vikoja (jotta voit poistaa). Se pelaa my\u00f6s sihteeri\u00e4 ja hallitsee projektejasi.\n<\/p>\n \n Sivustosi eritt\u00e4in helppo osoita ja napsauta -k\u00e4ytt\u00f6liittym\u00e4 antaa k\u00e4ytt\u00e4jille mahdollisuuden ilmoittaa ongelmista. BugHerd muuttaa ne raporteiksi, joissa on kaikki tarvitsemasi tiedot (kuten k\u00e4ytt\u00e4j\u00e4n selainversio). Se on helppo asentaa, hauska k\u00e4ytt\u00e4\u00e4, ja siin\u00e4 on ominaisuuksia, kuten automaattiset kuvakaappaukset (selaimen laajennus), suorat linkit, tiedostoliitteet, t\u00e4ydelliset valitsintiedot ja keskustelut.\n<\/p>\n \n 29 dollaria kuukaudessa vakiotilauksella, se on saalis.\n<\/p>\n \n \n Responsiivinen verkkosuunnittelu on enemm\u00e4n kuin uusi muoti, sill\u00e4 se on tullut j\u00e4\u00e4d\u00e4kseen. Mutta t\u00e4ll\u00e4 hetkell\u00e4 sujuvat asettelut ovat parhaimmillaankin hankalia. Saatat my\u00f6s olla raivoissaan yritt\u00e4ess\u00e4si testata asetteluasi erikokoisilla n\u00e4yt\u00f6ill\u00e4.\n<\/p>\n \n Onneksi Screenfly on mukava pieni verkkosovellus, joka testaa @media-kyselysi puolestasi. Liit\u00e4t URL-osoitteesi, ja se n\u00e4ytt\u00e4\u00e4, kuinka kyselysi k\u00e4sittelev\u00e4t laitteen mittoja, joita klikkaat yl\u00e4paneelissa.\n<\/p>\n \n Se ei vaikuta selainten v\u00e4liseen render\u00f6intieroon, mutta voit k\u00e4ytt\u00e4\u00e4 Browser Shotsia siihen. Muuten se on yksinkertainen, kauniisti koottu tapa n\u00e4hd\u00e4, milt\u00e4 sivustosi n\u00e4ytt\u00e4\u00e4 eri resoluutioilla.\n<\/p>\n \n \n Koska puhumme RWD:st\u00e4, voimme yht\u00e4 hyvin alkaa puhua kehyksist\u00e4 sen kehitt\u00e4miseksi.\n<\/p>\n \n Internetiss\u00e4 k\u00e4yd\u00e4\u00e4n keskustelua siit\u00e4, kumpi k\u00e4ytt\u00f6liittym\u00e4 on parempi: Bootstrap vai Foundation? Voit k\u00e4ytt\u00e4\u00e4 yht\u00e4 tai toista. Mutta Foundation on hieman etusijalla, kun on kyse ruudukkoj\u00e4rjestelmist\u00e4, suunnittelun suhteellisista yksik\u00f6ist\u00e4 (vaikka Bootstrap 4.0 Alpha on siirtynyt em- ja rem-yksik\u00f6ihin), oikealta vasemmalle -tuki, hinnoittelutaulukot, kiertomatkat ja off-canvas-navigointi .\n<\/p>\n \n On selv\u00e4\u00e4, ett\u00e4 pid\u00e4mme s\u00e4\u00e4ti\u00f6st\u00e4 parempana. Se toimii SASS:n ja CSS:n kanssa, on t\u00e4ynn\u00e4 monia ominaisuuksia ja yleens\u00e4 k\u00e4tev\u00e4mpi ja joustavampi.\n<\/p>\n \n Olemme Zurbin kanssa samaa mielt\u00e4 t\u00e4st\u00e4: Se on ”hullun nopeaa”.\n<\/p>\n \n \n Vuosikymmenen ohjelmiston j\u00e4lkeen, jossa suunnittelu asetettiin koodin edelle, Adobe antaa viimein koodaajille Edgen.\n<\/p>\n \n T\u00e4m\u00e4 suoraan sanottuna h\u00e4mm\u00e4stytt\u00e4v\u00e4 ty\u00f6kalu- ja palveluvalikoima on tehty pit\u00e4m\u00e4ll\u00e4 uudet k\u00e4ytt\u00f6liittym\u00e4n koodaustrendit mieless\u00e4. He ovat saaneet meille melkoista herkkua. Edge Animate auttaa koodaajia luomaan animaatioita ja samalla poistamaan kaikki Flashin j\u00e4ljet. Anteeksi Adobe, Flash oli loistava. Mutta Animate k\u00e4ytt\u00e4\u00e4 tavallista HTML:\u00e4\u00e4 ja JavaScripti\u00e4, ja tied\u00e4th\u00e4n, yksi koko sopii kaikille\u2026\n<\/p>\n \n Siell\u00e4 on Edge Code CSS:n muokkaamiseen HTML-dokumentista. Inspect yhdist\u00e4\u00e4 selaimen testit ja laitteiden yhteensopivuustestit reagoivaa suunnittelua varten ja synkronoi ne kaikki eritt\u00e4in nopeaa p\u00e4ivityst\u00e4\/mukauttamista varten. \u00c4\u00e4rimm\u00e4isen suosittu Typekit on nyt osa Edge-perhett\u00e4. Reflow ei ole viel\u00e4 julkaistu, mutta se todenn\u00e4k\u00f6isesti puhaltaa muut etup\u00e4\u00e4n CSS-ruudukon valmistajat pois vedest\u00e4. Ja viel\u00e4 on muutakin.\n<\/p>\n \n Me tied\u00e4mme. Meid\u00e4n piti my\u00f6s poimia leuat irti lattiasta.\n<\/p>\n \n \n Vagrant on paljon enemm\u00e4n kuin virtuaalinen kehitysohjelmisto.\n<\/p>\n \n T\u00e4m\u00e4n kauneuden avulla voit luoda kannettavia, helposti toistettavia ty\u00f6ymp\u00e4rist\u00f6j\u00e4. Se yhdist\u00e4\u00e4 virtualisointiohjelmiston, palvelimen peruslaatikon ja konfigurointity\u00f6kalut yhteen tehokkaaseen pakettiin. Pohjimmiltaan sinulla ei en\u00e4\u00e4 tarvitse olla VirtualBox + Ubuntu + Chef. Vagrant tekee kaikkien kolmen ty\u00f6n ja vie v\u00e4hemm\u00e4n tilaa tehdess\u00e4\u00e4n sit\u00e4. Tehok\u00e4ytt\u00e4j\u00e4t kertovat my\u00f6s, kuinka sen avulla voit helposti m\u00e4\u00e4ritt\u00e4\u00e4 usean virtuaalikoneen verkkoja.\n<\/p>\n \n Se on kirjoitettu Rubylla, mutta toimii PHP:ll\u00e4, Javalla, JavaScriptill\u00e4, Pythonilla ja C#:lla. Voit ty\u00f6skennell\u00e4 Vagrantin kanssa Windowsissa, Mac OSX:ss\u00e4, Linuxissa ja FreeBSD:ss\u00e4.\n<\/p>\n \n Se on eritt\u00e4in nopea, koska siin\u00e4 ei ole mit\u00e4\u00e4n U-yst\u00e4v\u00e4llist\u00e4, joka n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4, mutta vie paljon kaivattua tilaa. Se toimii hyvin testausymp\u00e4rist\u00f6n\u00e4 kehitt\u00e4jille.\n<\/p>\n \n Se on niin l\u00e4hell\u00e4 Graalin maljaa kuin voimme saada.\n<\/p>\n \n \n Googlen PageSpeed \u200b\u200bInsights tekee juuri sen, mit\u00e4 se kertoo. Se antaa sinulle k\u00e4sityksen sivusi k\u00e4ytt\u00f6liittym\u00e4n suorituskyvyst\u00e4. Se avaa silm\u00e4t monille huippu- ja mahtaville kehitt\u00e4jille. J\u00e4rjest\u00e4 siis chortle-festivaali ja aloita nopeutettu kaljuuntuminen kaikista revitt\u00e4vist\u00e4 hiuksista.\n<\/p>\n \n Se vain mittaa kulunutta aikaa: pyynn\u00f6n ja sivun yl\u00e4osan sis\u00e4ll\u00f6n render\u00f6innin sek\u00e4 pyynn\u00f6n ja koko sivun render\u00f6innin v\u00e4lill\u00e4.\n<\/p>\n \n Se tarkistaa verkosta riippumattomat n\u00e4k\u00f6kohdat laskeakseen, miten sivusi toimii: palvelimen kokoonpano, HTML-rakenne, JavaScript, CSS ja kuvat.\n<\/p>\n \n Se on veitsenter\u00e4v\u00e4 ja armottoman nopea; joten se varmasti satuttaa tunteitasi ja saa sinut itkem\u00e4\u00e4n, jos pisteet ovat alhaisia. Se my\u00f6s yritt\u00e4\u00e4 kompensoida sen antamalla sinulle tarkkoja ehdotuksia suorituskyvyn parantamiseksi, kuten alentuva vanhempi.\n<\/p>\n \n Ja me rakastamme sit\u00e4.\n<\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844581a0a86.webp\")
<\/a>\n<\/p>\n\n 3 \u2013 etuliitteet\u00f6n
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-63844583d44dd.webp\")
<\/a>\n<\/p>\n.css()<\/code>etuliitteist\u00e4 tai kaikista tekemist\u00e4si muutoksista, koska se kattaa kaiken.<\/p>\n\n 4 Block Puntaa
\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 Tyyppitestit
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-327128-6384458ad95f3.webp\")
<\/a>\n<\/p>\n\n 7 Likainen merkint\u00e4
\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 S\u00e4\u00e4ti\u00f6
\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