meistudioli

automation_nau

gaExt

hashtag

illuTransC

msc-ai-assistant

<msc-ai-assistant /> is a web component based on Chrome Built-in AI Prompt API. Web developers could use <msc-ai-assistant /> to help user consult anything they like to know.

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-circle-progress

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

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.

pasteIt

protractorEx

meistudioli/msc-ai-assistant

<msc-ai-assistant /> is a web component based on Chrome Built-in AI Prompt API. Web developers could use <msc-ai-assistant /> to help user consult anything they like to know.

meistudioli/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.

meistudioli/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.

meistudioli/msc-circle-progress

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

meistudioli/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 exactly the image which users just selected and do some analytics and recommend. Then render results through event which <msc-lens /> provided.

meistudioli/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.

meistudioli/mail-template

Suitable mail template for light / dark mode.

meistudioli/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-any-fullscreen-popup /> is a web component which wrap this feature. Developers could apply it to any element they like.

meistudioli/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.

meistudioli/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 />、<button />. That's why I deign <msc-ripple /> to wrap clickable elements and let them have ripple effect after user tapped. Besides that, <msc-ripple /> also provide sound & vibrate options to let developers decide turn them on or not.

meistudioli/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.

meistudioli/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.

meistudioli/msc-zoom

Zoom is a web component which provide zoom-in / zoom-out effects for image closing watch. Users could just tap the part they like to have a closing watch.

meistudioli/yahoo-auction-automation

Puppeteer exercise - from submit merchandise to payok at TW Yahoo Auction.

meistudioli/content

The content behind MDN Web Docs

meistudioli/developer.chrome.com

The frontend, backend, and content source code for developer.chrome.com

meistudioli/msc-ai-prompt

<msc-ai-prompt /> is a web component based on Chrome Built-in AI Prompt API. Web developers could use <msc-ai-prompt /> wrap form element and give it prompt feature support.

meistudioli/msc-any-hint

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

meistudioli/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, I wrap highlight.js and GitHub light / dark themes as a web component and named it <msc-code-viewer />. With <msc-code-viewer /> syntax highlighting is a piece of cake. It will switch light / dark mode as user preference. Of course「COPY」feature has already built-in.

meistudioli/msc-copy-button

Copy content is a very common feature to help user copy content easier. <msc-copy-button /> provides the whole feature including UI & interaction. With <msc-copy-button />, developers could adopt copy feature to web page easier.

meistudioli/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-drawer /> provides different themes for light / dark mode and also mobile ready.

meistudioli/msc-ez-catalog

Book reading is a very common UI effect to provide different browsing experience for users. With <msc-ez-catalog />, developers could adopt this feature to web page easier. All developers need to do is just providing series image paths in config and everything will be all set.

meistudioli/msc-help-me-write

With <msc-help-me-write /> support, developers just need to set some configs and everything will be all set. (such as web service for AI suggestion api). All user need to do is just press the trigger and <msc-help-me-write /> will display cool appearance for pick up.

meistudioli/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.

meistudioli/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.

meistudioli/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

meistudioli/web.dev

The frontend, backend, and content source code for web.dev

meistudioli/yahoo-x-bv-player

yahoo-x-bv-player is a video player web component which based on BlendVision Web SDK. It has not only LIVE but also REPLAY features for Yahoo Auction. Sellers could display their products through this player and interact with buyers. We believe this could help them increase commerce conversion rate.

meistudioli/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 means user can start from category 「root」 or 「leaf」.

meistudioli/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.