meistudioli

msc-collages

People love collages. With collages we could combined several images together and make them more vivid and interesting. Developers could apply <msc-collages /> instead of annoying HTML code & CSS setting. All we need to do is just make a few setting and e

msc-portable-video

Video - the most popular content in web page. Visitors always attracted with vivid contents. That's why editor like to place video contents in web page. We could see these video modules fixed in web page corner easily, such as YouTube. It's a very common

yauction-product-picker

To display specific promotion module, users might like to pick products to list by themselves. That's why I design <yauction-product-picker /> to fulfill this request. With <yauction-product-picker />, users could search products by keyword & category eas

msc-ez-video

Modern browsers already had a vivid player for <video />. However, web developers and designers still want to custom their own style player for different situations. Sounds like web component will do a lot favor for this purpose. With <msc-ez-video /> sup

msc-stretch-textarea

Users used to experience autogrowing <textarea /> since Facebook announced this fancy effect. There are so many skills to apply this effect in web page. Here comes the most cleanest trick for autogrowing textareas. With this trick, decvelopers could apply

msc-sidebar

A sidebar provides a way to display meta content intended for temporary access (navigation links, buttons, menus, etc.). The sidebar can be revealed by a button tap while the main content remains visually underneath.

msc-ripple

Interaction with UI mutation is usability 101 level stuff. Web developers should always keep this in mind to let user realize which element has beeb tapped. I like Google Material Design's ripple effect when user taped some clickable elements, suh as <a /

msc-web-push

Push messaging provides a simple and effective way to re-engage with your users. Once users subscribed, vendor could push messaging for them. <msc-web-push /> provides a simple usage for developers. It will handle subscription process and UI mutations.

msc-code-viewer

As a web developer, show some demo code is a very common stuff. There are so many syntax highlighting libraries for the Web. highlight.js is one of the popular library. It is easy to use and there are so many themes for it. To make it more suitable for me

msc-lens

Google Lens is famous and powerful for image search. Users could use its fancy UI for image selection. I like its effect and wanna to apply it for services I owned. That's also the main reason I wrapped it into <msc-lens />. Developers could received exac

msc-drawer

Drawer effect provides extra promotion space for web page. It is also a common effect in web pages & APPs, such as Google APP applied it for image search or other related search results. Developers could also apply it for mentioning some information. <msc

msc-zoom

<msc-zoom /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-zoom />'s html structure and everything will be all set.

msc-snackbar

<msc-snackbar /> provide brief messages about app processes at the bottom of the screen. It's a web component and applied Material Design - Snackbar's spec.

msc-circle-progress

<msc-circle-progress /> provides progress with circle shape. Developers could use it to indicate upload、form complete status for users.

yauction-clipping-purchase

<yauction-clipping-purchase /> provides 「add to cart」&「direct buy」features for commerce site wiich means developers could adopt these features in any web pages they liked.

msc-image-uploader

<msc-image-uploader /> is a web component based image uploader. Users could pick & upload images by 「file picker」、「drag & drop」and even direct「paste」image content. Besides that, users could also change images sorting through 「drag & drop」or 「keyboard arro

msc-input-assistant

<msc-input-assistant /> is a web component which help user to input wisely. Users could search or pick option with list we provide. Once options are not good enough for them, they can 「add」 their own options for usage.

yauction-category-picker

<yauction-category-picker /> is a category picker for TW Yahoo! Auction. Users could go through the whole category tree to pick a suitable category for their merchandise. <yauction-category-picker /> will show up with categoryId which developers set. That

msc-tags-collector

msc-tags-collector is a web component for input tags purpose. Users could key in anything they like (include space). Besides that sorting has already build-in with msc-tags-collector. We can go by 「DRAG」and「DROP」or ←、→ to arrange tag orders we like.

msc-select-list

<msc-select-list /> provides a common UI as <select /> and group checkboxs as its drop menu. So user could experience it as usual and have multi-select feature.

msc-help-me-write

「OpenAI」 is so powerful for all kinds services. That's why I try to adopt OpenAI to help Y! Auction's seller submit merchandise quickly. With <msc-help-me-write /> support, developers just need to set some configs and everything will be all set. All user

msc-reminder

<msc-reminder /> provides a notification features for user. It applied slot to open a tunnel let developers put LightDOM elements into ShadowDOM. That means developers could use any design they like as content to display.

msc-any-pip

Imaging what if we can let anything Picture-in-Picture (not only <video />) ?! Here comes <msc-any-pip /> to let it dream comes true. <msc-any-pip /> apply Document Picture-in-Picture API to given elements have Picture-in-Picture feature.

msc-any-fullscreen-popup

Imagine the feature to open a popup window in fullscreen mode. With window-management support, user could directly open a popup window in fullscreen mode in just one click.

msc-hint

Hint is a very common UI effect to help user easy understand particular nouns. With msc-hint, developers could adopt this feature to web page easier.