HTML Addon: Miért volt értelme a böngésző alapvető funkcióinak másolásának

(2020. december 10.)

The HTML kiegészítő a mesekönyvhez azt teszi, amit a modern böngészők évek óta csinálnak. Ennek ellenére meglepően hasznos és megközelíti a 100 000 letöltést. A Whitespace vezető fejlesztője Fredrik Johansson megmagyarázza miért.

A HTML-kiegészítés animált előnézete működés közben

Az ötlet egy kliens projektből származik, amelyet a svéd webplatform-gyártó, az Episerver számára készítettünk. Csapatunk egy olyan komponens könyvtárat épített, amelyet a belső hálózatuk. Az összetevőket az Episerver sajátos sablonnyelvén írnák, és könnyebb hozzáférést szeretnének a HTML-kódhoz – anélkül, hogy birkóznának a React-tel.

A Storybook kiegészítőjének írása meglehetősen egyszerűnek bizonyult, és van egy rövid útmutató , hogyan kell csinálni. Kevesebb, mint egy nap alatt elkészült a HTML addon első verziója. Szeszélyből hozzáadtam a Whitespaces Github-hoz, hogy mások is hasznosnak találják. És eddig 2020-ban csaknem 100 ezer letöltés történt.

Mit csinál a HTML Addon?

Hozzáad egy panelt, amely megmutatja az éppen megtekintett összetevő HTML kódját. mesekönyvben. Ennyire egyszerű.

Technikailag az addon a böngésző API-ját (konkrétan a belsőHTML-t) használja a különböző keretekbe írt összetevőkből származó HTML-ek lekérésére. Ez automatikusan megtörténik a DOM frissítésekor, akár történetek közötti váltáskor, akár a jelenlegi kimenetének megváltoztatásával vezérlők vagy gombok segítségével. Ezután a jelölést a Prettier segítségével dolgozzák fel, hogy olvashatóvá váljon.

A HTML kiegészítő panel képernyőképe

Miért használjuk az addont?

Eleinte nem láttam annak előnyét, hogy olyan kiegészítőt készítünk, amely pusztán HTML-t mutat. Évek óta a modern böngészőkben a dev eszközökön keresztül látható volt az egyes alkatrészek jelölése, miért kellene tehát újra feltalálni a kereket? Hogy őszinte legyek, az addon elkészítése inkább a fiók exec-jének humorizálása volt.

Az idő azonban (egyszer) bebizonyította, hogy tévedtem.

Az addon három egyszerű feladatot egyszerűsít a Whitespace-en:

  1. átadások. Gyakran dolgozunk olyan belső technológiai vállalatoknál, amelyek belső háttérfejlesztőkkel rendelkeznek. Időt takarít meg, ha közvetlen hozzáférést biztosít a HTML-hez a projekt beállítása nélkül. Ezenkívül teljes mértékben függetleníti a szállításunkat ügyfeleink sablonnyelvének megválasztásától.
  2. Minőségi auditok. Amikor akadálymentességi tesztet hajtunk végre, akadálymentességi szakembereink közvetlen hozzáférést kapnak a HTML jelöléshez.
  3. Hibaelhárítás. Az azonnali hozzáférés a HTML-hez sokkal könnyebbé teszi a hibajavítást. Ha nem kell megnyitnia a böngésző fejlesztői eszközeit, az eltávolít egy kis súrlódást. És ha a megélhetéshez kódolsz, akkor mindenképpen jó a kisebb súrlódás.

Ez abból áll, hogy a Whitespace-ben (és másutt) több felhasználói felület-fejlesztő ismeri a HTML-t, mint a React. És még a hozzám hasonló lelkes React fejlesztők számára is a HTML gyakran egyszerűbb. A HTML addon a kódot lényegre törővé teszi, és sok ember számára megkönnyíti a munkát.

Hogyan telepítsem?

Adja hozzá a HTML addont a mesekönyvéhez az npm :

npm i --save-dev @whitespace/storybook-addon-html

Az addon regisztrálása a .storybook / main.js fájlba:

module.exports = {
// ...
addons: [
"@whitespace/storybook-addon-html",
// ...
],
};

További információ található a a GitHub átolvasási szakaszában .

Mi folyik a tervben előre?

Meglepett és elégedett vagyok az addon pozitív fogadtatásával. Rendszeres visszajelzést kapok a Github-on keresztül, és havonta néhány órát töltök a hibák kijavításával. Láttunk más emberek hozzászólásait is, amelyek nagy segítséget nyújtottak a Storybook core új verzióinak naprakészen tartásában.

Ha funkciókat szeretne hozzáadni, ne habozzon, húzza meg kérés – vagy üss fel a Githubon, vagy a Whitespace Twitterén keresztül.

Vegyen részt

Nézze meg a Addon Catalog a Storybook testreszabásának további módjaival. A legfrissebb kiegészítők és a Storybook hírekért regisztráljon a Storybook levelezőlistára. Nézze meg a mesekönyvet a GitHub oldalon, és csatlakozzon a Discord csevegéshez.

Eredetileg a https : //whitespace.se 2020. december 10-én.