Kotisivu » Web-suunnittelu » Tuoreet resurssit web-suunnittelijoille ja kehittäjille (huhtikuu 2018)

    Tuoreet resurssit web-suunnittelijoille ja kehittäjille (huhtikuu 2018)

    Tässä kuussa huomasimme muutamia ilmoituksia merkittävistä nimistä tech-nimissä. Esimerkiksi Apple avasi uuden tietokantajärjestelmän, Google julkaisi uuden työkalun, jolla voit mitata sivustosi nopeutta mobiililaitteissa, ja Githubin vapaa kurssi, jonka avulla voit aloittaa Gitin, Githubin ja yleisesti koodauksen..

    Myös tämänpäiväisessä viestissä niissä on useita uusia työkaluja, jotka ovat parhaillaan nousussa. Hyppäämme siihen, mitä meillä on enemmän luettelossa.

    VuePress

    Vue, VuePress, uusi työkalu on a staattisen sivuston generaattori suunniteltu Vue.js: n kanssa. Se luo ja esivirittää staattisen HTML: n jokaiselle sivulle ja toimii SPA-palveluna (yhden sivun sovellus). Siinä on joitakin ominaisuuksia, jotka sisältävät laatikon, mukaan lukien mahdollisuus lisätä Google Analytics -tunnusta, hakua, seuraavaa ja edellistä navigointia, sivupalkkia ja PWA.

    IMG-2

    JavaScript-kirjasto, joka esittelee a mukautettu elementti, img-2. Uusi elementti lisää useita optimointeja, jotka eivät kuulu standardiin img elementti, parantaa kuvan lataamista käyttäjille. Mukautetun elementin avulla kuva tallennetaan myös välimuistiin laiska kuorma kuvat ja palvella tahtoa välimuistista vain, kun kuvat syöttävät käyttäjän näkymän. Tutustu demoon.

    Tabler

    Tyylikäs kojelauta / hallintapaneeli perustuu Bootstrapiin 4. Kojelaudassa on valmiiksi valmistetut komponentit, kuten kaaviot, lomakkeet, galleriat, hinnoittelutaulukko ja mukava kokoelma mukautettuja kuvakkeita. Loistava lähtökohta antaa kehittäjille rakentaa hallintapaneeli nopeasti. Tutustu demoon!

    DayJS

    DayJS JavaScript-kirjasto muodostaa päivämäärät ja kellonajat. Vielä enemmän, DayJS: ssä on samanlaiset API: t Moment.js: lle, mutta se on vain paino 2Kb. Koska tämä voi olla a hyvä vaihtoehto Moment.jsille, jos haluat, että kevyempi kirjasto säilyttää tietämyksen siitä, mitä olet jo tuntenut.

    UnifiedArchive

    PHP-kirjasto, joka käsittelee pakattuja tiedostoja, UnifiedArchive tukee monia eri muotoja, mukaan lukien RAR, Zip, Gzip, Terva, ja paljon muita pakkaustyyppejä. Tällä kirjastolla voit arkistoida ja purkaa tiedostoja tai hakemistoja. Se tarjoaa a muutamia API-tiedostoja tiedostojen käsittelemiseksi sen jälkeen, kun se on poistettu arkistosta. UnifiedArchive on saatavana Composer-pakettina.

    Github Learning Lab

    Github on juuri ilmoittanut vapaa kurssi, joka kattaa pääasiassa Gitin Githubissa. Tällä hetkellä on 5 kurssia, joissa voit oppia muutamia käteviä asioita, kuten miten käyttää Githubia järjestää koodit, miten Github-sivuja käytetään saat hankkeen ilmaisen sivuston tai blogin ja miten hallita yhteisiä ristiriitoja, joita esiintyy, kun työskentelet monien kehittäjien kanssa projektissa.

    WordPress UnitTest DOM Parser

    Mukava kärki Takayuki Miyauchilta DOMElementin testaaminen suoritettaessa UnitTest WordPress-sovelluksissa. Itse löysin tämän todella hyödylliseksi; Toivottavasti löydät sen saman.

    Popmotion

    JavaScript-kirjasto, joka mahdollistaa voideltavan tasaisen animaation verkossa, “Popmotion” tarjoaa API: n nimeltä Fysiikka, jonka avulla voit luoda lähes reaaliaikaisia ​​animaatiovaikutuksia. Se on päättämätön; kirjasto yksinkertaisesti lähtöarvot perustuvat kokoonpanon tiettyyn sarjaan. Tämän avulla voit käyttää näitä lähtöjä animoimaan mitä tahansa mediaa, kuten CSS, SVG, Three.js ja jopa React.js.

    Driver.js

    JavaScript-kirjasto, jonka avulla voit “ajaa” käyttäjä keskittyy sivulle. Tämä on erityisen hyödyllistä, jos haluat ottaa käyttöön tiettyjä ominaisuuksia tai ohjata niitä tiettyihin tehtäviin sivulla. Driver.js on oikea 4 KB: n kokoinen, muokattavissa ja näppäimistöystävällinen.

    Vaihda animoitu GIF videolla

    GIF on kaikkialla, kun hän on tehnyt suuren paluun. GIF-ongelma on kuitenkin se, että se on yleensä hyvin valtava. Se on kaistanleveyden tuhlausta, mutta graafinen laatu on usein kauheaa. Tämä Googlen ohjeistus näyttää, miten “Video” voi korvata GIF: n näyttämään animaatioita.

    Tekstimaski

    JavaScript-kirjasto muokkaa erityistä muotoilua edellyttävää tekstiä kuten puhelinnumero, valuutta tai luottokortin numero. Kun käyttäjä kirjoittaa, teksti muuttuu automaattisesti sopivaksi muotoiluksi, joka parantaa käyttäjäkokemusta. TextMask voidaan käyttää React-, Vue- tai pelkkä vanhojen JavaScript-ohjelmien kanssa.

    Vertaa mobiilisivuston nopeutta

    Tämä on toinen kätevä työkalu Googlelta. Tämän työkalun avulla voit tarkista sivustosi nopeus, kun lataat mobiililaitteesta ja arvioi tulojen menetys, kun sivusto latautuu hitaasti. Sinä pystyt valitse maa ja nopeus josta sivustosi testataan.

    VueNut

    VueNut tekee siitä kehityskumppanin, kun rakennetaan web-sovellusta Vue.js: lla ja Vuexilla helpompi tutkia tallennettua datatilaa ja voit manipuloida tietoja kehityksen aikana helposti. Hienoja juttuja!

    FoundationDB

    Äskettäin Apple teki FoundationDB: n avoimen lähdekoodin Githubissa. Se on a avainarvoparin tietokantajärjestelmä joka lupaa skaalautuvuutta ja suorituskykyä. On hienoa, että suuret teknologiayritykset alkavat omistautua avoimen lähdekoodin tuotteille.

    Satukirjat

    StoryBooks on työkalu rakentaa React-komponentti erillään. Se tarjoaa selaimen käyttöliittymän, jonka avulla voit tarkastella kunkin komponentin eri tiloja sekä testata komponentit.

    GhostText

    Selaimen laajennus synkronoi selaimesi kirjoittamasi tekstieditori tai päinvastoin. Löysin tämän lopulta hyödylliseksi, jos haluat kirjoittaa verkkosivustoon, jossa on koodisi editorin mukavuus ja ominaisuudet. GhostText on käytettävissä Chrome, Firefox ja Opera.

    Coala

    Coala on a CLI tarjoaa rajapinnan ja kiinnityskoodin käyttöliittymän käytetyistä kielistä riippumatta. Voit käyttää Coala-koodia koodieditorissa, integroida sen CI: hen (Jatkuva integrointi) ja muokata sitä kokoonpanosyntaksiin .coafile. Coala tukee monia kieliä, kuten CSS, JavaScript, PHP, ja löydät lisää hakemistosta.

    ReactStrap

    ReactStrap on kokoelma Bootstrap 4 -komponenteista, jotka muunnetaan uudelleenkäytettäviksi React-komponenteiksi. Jos haluat modernisoida vanhaa Bootstrap-pohjaista sivustoa, tämä kirjasto on jotain mitä haluat ehkä tutkia.

    Reacto

    Toinen Reactiin liittyvä työkalu, Reacto on IDE on rakennettu Electronin päälle ja suunniteltu Web-sovellusten kehittämiseen ReactJS: n avulla. Tämä näyttää todella kätevältä, jos kehityspäällikkösi kääntyy ReactJS: n ympärille.

    PicoJS

    JavaScript-kirjasto mahdollistaa kasvojentunnistuksen. Se toimii valokuvan tai integroidun kameran kanssa. On todella kiehtovaa, miten web-tekniikka kehittyy viime vuosina.