15+ käyttöliittymätyökalut, joista sinun pitäisi tietää: Suosikkihauni vuodelle 2020

15+ käyttöliittymätyökalut, joista sinun pitäisi tietää: Suosikkihauni vuodelle 2020

15+ käyttöliittymätyökalut, joista sinun pitäisi tietää: Suosikkihauni vuodelle 2020
СОДЕРЖАНИЕ
02 июня 2020

Yksi vuosi on kulunut, ja jos olet kuten monet alan kehittäjät, olet todennäköisesti löytänyt kokonaan joukon uusia käyttöliittymätyökaluja, jotka olet harkinnut sisällyttävän työnkulkuun. Olen samassa veneessä, etenkin koska olen syvästi mukana tutkimassa säännöllisesti mitä uutta täällä on työkalumaisema.


Tässä viestissä, Aion pyörittää (joidenkin ruutukuvien ja demojen kanssa) joitain mielenkiintoisimmista käyttötapojen työkaluista, joita olen huomannut, että mielestäsi löydät hyödyllisiä vuonna 2020. Nämä eivät ole välttämättä suosituimpia tai kuumimpia työkaluja, mutta mielestäni jokainen niistä on käyttötapauksessaan ainutlaatuinen ja ansaitsee hieman enemmän huomiota. Nämä ovat lähinnä minun vuoden suosikki löytöt etusivun työkaluista.

Parhaat etuosan työkalut

Pikanäppäin

Käyttöliittymätyökalut: Pikanäppäin

Painikkeiden havaitseminen JavaScriptin avulla ei ole liian monimutkainen tehtävä, mutta tämä pieni GitHub-tiimin apuohjelma tekee siitä erittäin yksinkertaisen.

Sen avulla voit laukaista toiminnon elementille pikanäppäimellä.

Pikavalintyyppeihin kuuluu näppäin, näppäinyhdistelmä tai jopa näppäinjärjestys. Voit myös olla useita pikavalintoja yhdestä toiminnosta.

JavaScript on vain yksi ilmoitus ja tuonti:

tuo {asenna} hakemistosta ‘./hotkey.js’;

varten (document.querySelectorAll (‘[data-pikanäppäin’ ‘)))) {
asentaa (el)
}

Kun koodi on paikoillaan, pääasiallinen työ tehdään HTML-muodossa. Tässä on luettelo linkkeistä, jotka olen luonut sisällön näyttämiseen käytetyn pikakuvakkeen mukaan:

  • esimerkki
  • esimerkki
  • esimerkki
  • esimerkki
  • esimerkki

Huomaa jokaiseen linkkiin lisätyt data-pikapainemääritteet. Nämä mahdollistavat kohdennettujen toimintojen pikanäppäimet (tässä tapauksessa laukaisevat: kohdevalitsimen CSS: n kautta). Useita pikanäppäimiä erotetaan pilkulla; näppäinyhdistelmät erotetaan plus-symbolilla; ja näppäinjaksot erotetaan välilyönnillä.

Tässä on suora esittely:

Kokeile kaikkia pikavalintoja ja huomaa, että koodi JavaScript-paneelissa on minimaalinen. Erittäin helppo asentaa, kun moduuli on tuotu. Ja sivupisteenä, jos sinulla on sovellus, jolla on useita pikanäppäimiä ja jonka haluat näyttää modaalikkunassa (kuten Twitterissä, GitHubissa jne. Tehdään), kannattaa ehkä tarkistaa QuestionMark.js, ja vanha projektiini.

Tietenkin, pikanäppäimillä, haluat huomioida esteettömyyteen liittyvät ongelmat, joten muista tutustua repon README-tietoihin siitä.

Freezeframe.js

Käyttöliittymätyökalut: Freezeframe.js

Lyhyiden videoiden upottaminen verkkosivuille on yleinen osoitus tapahtumasta. Joskus myös animoitu GIF on sopiva. Mutta GIF: t ovat yleensä häiritseviä, koska ne toistavat sisältönsä automaattisesti.

Tämän pienen apuohjelman avulla voit lisätä videomaisen toiminnallisuuden HTML-koodiin upotettuihin animoituihin GIF-tiedostoihin.

Kun olet sisällyttänyt Freezeframe.js-lähteen sivullesi, tarvitset vain yhden JavaScripti-ilmoituksen:

uusi Freezeframe (‘. freezeframe’, {
liipaisin: ‘leijuu’,
peittokuva: väärä
});

Jos jätät toisen argumentin pois (esim. Uusi Freezeframe (‘. Freezeframe’)), se ei ole oletusarvoisesti toistopainiketta ja animaatio laukaisee hiirellä. Ainoa virhe siinä on, että koska se on animoitu GIF, et teknisesti voi "tauko" se, voit vain "lopettaa" se (mikä tarkoittaa, että se alkaa alusta). Mutta yleensä GIF: n kanssa tämä ei ole iso juttu.

Tässä on demo kolmella erilaisella esimerkillä:

Pelkän tämän työkalun käyttäminen ei kuitenkaan välttämättä säästä suorituskykyä, koska näyttää siltä, ​​että GIF-tiedosto täynnä kulissien takana. Mutta oletan, että tätä voidaan käyttää laiskojen latauskirjastojen kanssa, jos GIF on poissa näytöstä sivun latautuessa.

ARC-työkalupakki

Käyttöliittymätyökalut: ARC-työkalupakki

Käyttöliittymäsi työkaluissa tulisi olla runsaasti esteettömyysvaihtoehtoja.

Tämä on Chrome-laajennus, joka lisää välilehden kehittäjätyökaluihisi auttaaksesi sinua löytämään pääsyvirheitä ja varoituksia, jotka liittyvät WCAG 2.1: n tason A ja AA ohjeisiin..

Kaksi syytä, miksi tämä työkalu on niin suuri:

  • Se integroituu olemassa olevaan testaus / virheenkorjauksen työnkulkuun kehittäjätyökalujen sisällä
  • Sen on laatinut The Paciello Group, joka on kehittäjäyhteisössä tunnettu esteettömyystään

ARC-työkalupakin ominaisuudet

Kun laajennus on asennettu, valitse vain välilehti kehittäjätyökaluissa ja valitse "Suorita testit". Alkuuloste on samanlainen kuin mitä näit edellisessä kuvakaappauksessa. Sieltä voit porata alaspäin nähdäksesi mahdolliset tiettyyn ominaisuuteen liittyvät saavutettavuusongelmat, kuten seuraavassa kuvakaappauksessa näkyy:

ARC-työkalupakin ominaisuudet Drill-down

Huomaa "Linkit" vasemmalla olevan vaihtoehdon vieressä on valintamerkki. Sitä olen päättänyt tutkia tässä tapauksessa. Tämä lisää myös sivulle peittokuvan, joka näyttää kaikkien valittujen kohteiden sijainnin, kuten näet aktiivisen sivun kehittäjätyökalujen yläpuolella..

Scene.js

Käyttöliittymätyökalut: Scene.js

Joka vuosi näyttää olevan uudenlaista animaatiokirjastoa käyttöliittymätyökalujen maisemaan.

Valintani tänä vuonna on Scene.js.

Tätä ei voi vain valita ja työskennellä muutamassa minuutissa, kuten muutkin toistaiseksi esitellyt.

Sovellusliittymään tottuu oppimiskäyrä, joka näyttää noin:

anna kohtaus = uusi kohtaus ({
".Hakulaatikko": {
"0%" : "leveys: 50px",
"70%": "leveys: 300 kuvapistettä",
},
".linja": {
"30%" : "leveys: 0%",
"100%": "leveys: 100%",
}
}, {
kesto: 1,
keventäminen: kohtaus.EASE_IN_OUT,
valitsin: totta,
}). ExportCSS ();

scene.setTime (0);
anna vaihtaa = väärä;

document.querySelector (".Lähetä") .AddEventListener ("klikkaus", toiminto () {
vaihtaa =! vaihtaa;
scene.setDirection (toggle ? "normaali" : "käänteinen");
scene.play ();
});

Se on koodi yhdelle esimerkkejä kotisivulla. Se on yksinkertainen pieni animoitu hakukenttä. Tässä on heidän CodePen-esittely:

Tämä ei taaskään ole helppo työkalu oppia nopeasti, mutta jos olet kiinnostunut kokeilemaan uutta animaatiokirjastoa, jolla näyttää olevan melko suoraviivainen sovellusliittymä, tämä saattaa olla hyvä vaihtoehto.

commento

Käyttöliittymätyökalut: Kommentointi

Nykyinen yksityisyyttä tunteva verkkomaisema voisi käyttää enemmän tämänkaltaisia ​​työkaluja. Olen pohtinut WordPress-verkkosivustollani parannettujen kommentointijärjestelmien vaihtoehtoja jo jonkin aikaa, ja Commento näyttää hyvältä.

Pidän jonkinlaisen Disqus-toiminnallisuudesta (ylä- ja alaäänet, ylimmät kommentit jne.), Mutta siinä on liikaa paisua.

Pidän myös siitä, että WordPress-kommentit ovat itse ylläpitämiä oletuksena, mutta niistä puuttuu Disqus-lisäominaisuudet. Mielestäni Commento on askel oikeaan suuntaan näiden ongelmien korjaamiseksi.

Jos harkitset siirtymistä olemassa olevalta kommentointiympäristöltä Commentolle, niin se on melko vähän työtä siitä, mitä olen lukenut, joten se on iso haittapuoli.

Vaikka Commento antaa sinun tuoda Disqusista, et voi tuoda "ääntä" Disqusin vanhoista kommentteista tai kommentteja lähettäneiden käyttäjien avatarista.

Vanhoja WordPress-kommentteja ei voi myöskään tuoda Commentoon, ellet vie ensin Disqus-sovellukseen ja tuota sitten Disqus-ohjelmasta Commentoon (mikä voidaan tehdä käyttämällä Disqus-tuontityökalua, kun kirjaudut Commentoon).

Viimeinen haittapuoli on se, että Commento ei ole ilmainen, ellet itse isännöi sitä. Mutta kun harkitset Disquksen paisumista ja yksityisyyttä koskevista kysymyksistä, pieni kuukausimaksu on kannattavaa.

Git Historia

Käyttöliittymätyökalut: Git-historia

Vaikka tämä ei kuulu yksinomaan käyttöliittymäkategoriaan, se on yksi suosikkeistani tässä luettelossa, koska se toimii yksinkertaisuutensa ja uutuutensa vuoksi.

Git-historian avulla voit tarkastella kaikkien julkisessa Git-repo-tiedostojen (GitHub, GitLab tai Bitbucket) tiedostojen historiaa..

Oletetaan esimerkiksi, että haluat tarkastella lähdetiedosto varten Normalize.css. Tiedosto sijaitsee osoitteessa:

https://github.com/necolas/normalize.css/blob/master/normalize.css

Korvaa github.com URL-osoitteessa github.githistory.xyz sen historian tarkastelemiseksi:

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

Uuden URL-osoitteen tulosteet lataavat siistiä, interaktiivista tapaa nähdä tiedoston muutokset ajan myötä. Jotkut hienot animaatiot laukaistavat joka kerta, kun valitset historiapisteen, jolloin voit nähdä, mitkä muutokset tapahtuivat ja mikä käyttäjä sitoutui niihin.

CSS-ominaisuus vaihtaa

Käyttöliittymätyökalut: CSS-ominaisuus vaihtaa

Jos työskentelet edelleen ympäristössä, jossa joudut suorittamaan joitain vanhoja selainkokeita, tämä saattaa olla mukava pieni Chrome-laajennus, joka voidaan lisätä testaustyökalupakkiisi..

CSS Feature Toggles, samanlainen kuin yllä mainittu ARC Toolkit, lisää uuden välilehden selaimesi kehittäjätyökaluihin.

Välilehdessä huomaat luettelon nykyaikaisista CSS-ominaisuuksista.

Vaihdettavissa olevat CSS-ominaisuudet

Voit vaihtaa näitä nähdäksesi heti, miltä sivusi näyttää, kun käyttäjä käy sivulla selaimessa, joka ei tue kyseistä ominaisuutta. Tämä on loistava tapa saada nopea yleiskuva siitä, kuinka asettelut huononevat vanhemmissa ympäristöissä.

Kun valitset erilaisia ​​ominaisuuksia, sivu päivittyy automaattisesti muutosten näyttämiseksi. Esimerkiksi Flexboxilla rakennetulla sivustolla on hyötyä jokaisesta vanhemmasta CSS: stä, joka pitää asettelun järkevänä, kun taas parannetaan asteittain uusimmissa selaimissa.

Luo sovellus

Käyttöliittymätyökalut: Luo sovellus

Epäilemättä työkalusi työnkulku sisältää runsaasti vaihtoehtoja rakennuksille. Tämä verkkosivusto on yhdistelmä oppimisverkkosivustoa ja projektinluontityökalua kehittäjille, jotka käyttävät (tai haluavat oppia käyttämään) webpackia tai Parcelia, suosittuja omaisuudenmyyjiä..

Tarkastele vasemmalla olevia luokkia valitaksesi rakennuksellesi haluamasi vaihtoehdot. Katso sitten tarvittavat tiedostot ja kokoonpanoasetukset näkyvät pääikkunassa.

Luo sovellusmääritysasetukset

Sivu on täysin vuorovaikutteinen, joten voit napsauttaa mitä tahansa virtuaalitiedostoa nähdäksesi niiden sisällön tai siirtämällä hiiren osoittimen valitun vaihtoehdon päälle nähdäksesi kuvaus yhdessä korostettujen rakennusosien kanssa, jotka ovat kyseisen vaihtoehdon kannalta merkityksellisiä..

Erittäin hyödyllinen sekä oppimiseen että uusien projektien luomiseen!

CSSJanus

Käyttöliittymätyökalut: CSS Janus

Kansainvälistymisen alueella tämä on online-työkalu, jonka avulla voit muuntaa tyylitaulukoita vasemmalta oikealle oikealta vasemmalle ja päinvastoin.

Tämän avulla voit helposti luoda tyylitaulukoita oikealta vasemmalle (rtl) -kielille, kuten arabia ja heprea.

Tässä on CSS-esimerkki:

.esimerkki {
kellua: vasen;
tekstin kohdistaminen: vasen;
täyte: 1 x 2 x 3 x 4 x
reuna-vasen: 1em;
tausta-asema: 5% 100px;
kohdistin: ei koon muuttamista;
raja-säde: 1px 2px;
}

Edellä mainittu muunnetaan seuraavaksi:

.esimerkki {
kellua: oikea;
tekstin kohdistaminen: oikea;
täyte: 1 x 4 x 3 x 2 x
marginaali-oikea: 1em;
tausta-asema: 95% 100px;
kohdistin: nw-koon muuttaminen;
raja-säde: 2px 1px;
}

Huomaa, että erot eivät sisällä vain rivejä, kuten kelluvia: vasen ja teksti-kohdista: vasenta, mutta toiset pitävät vaakasuorasta täyteilmoitusta ja tausta-aseman arvoja.

Ja jos haluat, että työkalu ohittaa tyylilohkon tai yksittäisen ilmoituksen, voit käyttää @noflip-direktiiviä:

/ * @noflip * / .arvoitettu {
kellua: vasen;
}

.ei huomioimatta {
kellua: vasen;
/ * @noflip * / tausta: #fff (poster-ltr.png);
}

Värivarka

Etuosatyökalut: Värivarka

Color Thief on todella siisti ja melko yksinkertainen käyttää, mutta on erityinen käyttötapauksissa.

Pohjimmiltaan tämän apuohjelman avulla voit käyttää JavaScriptiä tarttuaksesi värivalikoimaan, jossa on 2 – 20 väriä annetun kuvan perusteella.

Tätä ei käytetä jokaisessa verkkosivustossa tai sovelluksessa, mutta se on hieno idea, ja se on ilmeisesti ollut olemassa jonkin aikaa ja se on päivitetty viimeisen vuoden aikana.

Yksinkertaisella API: lla voit tarttua kuvan palettiin yhdellä rivillä:

anna myPalette = colorThief.getPalette (img, 10);

Sieltä on vain palautetun ryhmän manipulointi. Näet alla CodePeniin rakentamasi demon, joka tarttuu käyttäjän syöttämään määrään värejä esitetystä kuvasta. Käytän taulukossa koodia:

myPalette.forEach (
elementti => colors.innerHTML + = ""
);

Rakennan palettiä elementtejä ja rivityylejä käyttämällä. Värit palautetaan RGB-arvoina.

CodePen-demossa käytän kiertotapaa kiertääksesi alkuperäisen alkuperän ongelmia, joihin törmäsin CodePenissä, mutta yleensä et tarvitse näitä rivejä (kommentoi) tavanomaisessa ympäristössä.

RegexGuide

Käyttöliittymätyökalut: RegexGuide

Näyttää siltä, ​​että joka vuosi löydät hienon interaktiivisen sovelluksen lisätäksesi käyttöliittymätyökalujen kokoelmaan, joka auttaa rakentamaan säännöllisiä lausekkeita, joten tässä on tämän vuoden kirjoitus. Ja jos olet kuin minä, otat kaikki aput, joita voit saada näiden rakentamiseen.

Tämä on vähän outo saada pääsi ympäri aluksi, koska se kulkee vaiheiden läpi yksi kerrallaan, kuten ohjattu toiminto.

Kun olet valmis ja sinulla on kaikki ehdot paikassa, voit kokeilla erilaisia ​​arvoja täyttääksesi määritellyt ehdot ja sivu osoittaa interaktiivisesti, mikä toimii.

Tällaiset työkalut ovat aina joitain suosikkeistani, koska ne eivät ole vain tapa luoda koodia, joka muuten olisi työläs, vaan ne auttavat sinua myös oppimaan syntaksin.

Edessä olevat työkalut: kunniallinen mainitsee

Joten nämä ovat mielestäni joitain mielenkiintoisimpia käyttöliittymätyökaluja, joita olen huomannut, että en ole saanut tarpeeksi huomiota viimeisen vuoden aikana. Olen varma, että sinulla on omat tällaiset löytösi, joten pudota ne alla oleviin kommentteihin. Sillä välin, tässä on lopullinen luettelo tavaroista, jotka eivät aivan muodostaneet pääluetteloa, mutta pidän mainitsemisen arvoista:

  • wehatecaptchas – captcha-vaihtoehto, jossa kuvaa tai kirjainta / numeroa ei ole purettu, ei edes valintaruutua "Vahvista, etten ole robotti"
  • simpleParallax – Helppo tapa tehdä parallaksi-ilmiöitä JavaScriptin avulla.
  • Lite YouTube Upota – Ilmeisesti 224X nopeampi kuin perinteinen upotuskoodi.
  • Selaimen oletustyylit – Kirjoita mikä tahansa HTML-elementti, ja tämä työkalu kertoo kunkin selaimen kyseisen elementin oletus CSS: n.
  • Kuka voi käyttää – Syötä kaksivärinen yhdistelmä, ja tämä työkalu kertoo, millaiset näkövammaiset käyttäjät voivat käyttää tätä yhdistelmää tekstiä / taustaa varten.

Älä unohda liittyä kaatumiskurssillemme WordPress-sivustosi nopeuttamiseksi. Joillakin yksinkertaisilla korjauksilla voit vähentää latausaikaa jopa 50–80%:

Suunnittelu ja esitys Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector