Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Custom Elements in Custom Stickers

Custom Elements in Custom Stickers

Tzulin Huang
LINE Fukuoka UIT Team Front-end Engineer

LINE DevDay 2019

November 21, 2019

More Decks by LINE DevDay 2019

Other Decks in Technology


  1. 2019 DevDay Custom Elements in Custom Stickers > Tzulin Huang

    > LINE Fukuoka UIT Team Front-end Engineer
  2. LINE Custom Stickers

  3. For in-House Designers and 3rd Party Designers Custom Stickers CMS

  4. Custom Stickers LINE Shop Custom Stickers CMS SVG PNG Customized

  5. LINE Creators Market Public to all Creators

  6. That Could Be Shared Between Custom Sticker CMS and Creators

    Market > Form Controls > The Custom Text Editor There Are Some Common Parts
  7. Custom Text Editor

  8. > Make it componentized and reusable > The user interaction

    is somewhat complicated Custom Text Editor
  9. > Easy to integrate with other front-end frameworks > Must

    be a common technology Consideration of Componentize
  10. Custom Elements

  11. https://github.blog/2018-09-06-removing-jquery-from-github-frontend/#custom-elements > No additional bytes of a framework for the

    user to download, parse and compile > A component library native to the browser Custom Elements
  12. Browsers Compatibility https://www.webcomponents.org/

  13. Framework Compatibility https://custom-elements-everywhere.com/ > Custom Elements work well with Vue

    JS > Creators Market heavily adopted Vue JS Angular Svelte Others
  14. > There are plenty of good tutorial and documentation •

    https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements • https://developers.google.com/web/fundamentals/web-components/customelements > Or just google “Custom Elements” > Not part of my topic How To Develop Custom Elements
  15. The Benefit It Brings Us Reusability Encapsulate and re-use complicated

    UI logic in Vanilla JS Interoperability Improve web apps’ interoperability among browsers Extendability Extend insufficient HTML elements
  16. The Benefit It Brings Us Reusability <name-sticker-editor /> Interoperability <two-tone-slider

    /> <input 
 type=“text” /> Extendability <input 
 type=“text” />
  17. The actual custom element for editing custom sticker <name-sticker-editor />

  18. Use It in HTML <name-sticker-editor />

  19. Use It in JS <name-sticker-editor />

  20. > No standard CSS pseudo selectors > It is very

    hard to customize style of <input type=“range”> <two-tone-slider />
  21. <two-tone-slider /> > <two-tone-slider /> works in all major browsers

  22. https://github.com/whatwg/html/issues/1467#issuecomment-447650684 <input is=“graphemic” type=“text” /> > In maxlength Computation of

 <input type=“text” />, Non-BMP Characters Are Counted Differently Among Major Browsers > Languages of South Asia and South-East Asia Heavily Use non-BMP Characters
  23. > Extend <input type=“text” /> <input is=“graphemic” type=“text” /> >

    Calculate maxlength by counting graphemes • https://github.com/orling/grapheme-splitter <input is=“graphemic” type=“text” /> <input type=“text” /> Extendability Interoperability
  24. > Compatible with modern browsers and most front-end frameworks >

    Custom Element is the browser-native component library The Takeaways > Reusability, Interoperability, Extendability
  25. Thank You