profile
viewpoint
Mu-An 慕安 muan @GitHub Brooklyn, NY https://muan.co Web Systems Engineer @github. She/Her.  

jlord/git-it-electron 3252

:computer: :mortar_board: Git-it is a (Mac, Win, Linux) Desktop App for Learning Git and GitHub

github/accessibilityjs 2163

Client side accessibility error scanner.

jlord/git-it 1824

:computer: :mortar_board: Learn Git and GitHub. Try the new desktop version →

maxogden/cool-ascii-faces 1711

ᕙ༼ຈل͜ຈ༽ᕗ

jlord/patchwork 939

All the Git-it Workshop completers!

dgraham/delegated-events 934

A small, fast delegated event library for JavaScript.

jlord/offline-issues 549

:grey_exclamation: :signal_strength: Get your GitHub Issues to read offline later. Mmm.

github/details-dialog-element 483

A modal dialog that's opened with <details>.

g0v/moedict-webkit 362

萌典網站

push eventgithub/custom-element-boilerplate

Mu-An Chiou

commit sha 096f9a2474ac063ce5eb6ced0d0be166e6b717f9

Add required files

view details

push time in 3 hours

PR opened github/paste-markdown

Prevent parsing table[data-paste-markdown-skip]

In dotcom we use <table> for as HTML parser boundaries in comments and for line/column in blobs. These tables should not be turned into markdown tables when they get copy-pasted.

Previously we use js-comment/js-blob-*/js-diff-* as pointers to skip certain tables. This PR generalize them so it will be easier to mark future tables as not pastable as markdown without altering the library code or subscribing them into js- prefixed classes.

I was gonna call this [data-layout-table] but opted to name it [data-paste-markdown-skip] instead because:

  1. I thought "layout tables" was fitting because they are tables used for their display characteristics instead of semantics, hence should not be parsed as tables. But turns out, many of our cases are actual data tables that just aren't supposed to be turned into markdown.
  2. Prefixing with paste-markdown to make it's clear to see the attribute came from a library.
+20 -9

0 comment

4 changed files

pr created time in 3 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha 21ba6669919bb796ef21a6dcfbbf77a566a0be84

Update readme with data-paste-markdown-skip

view details

push time in 3 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha c8ca1ff27e7e3b49509c88ad105d09cf64f9c1b6

Rename data-layout-table to data-paste-markdown-skip

view details

push time in 4 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha d85d7aa6b3a91b579b0246cddeb1d25b124faf7f

Fix example page

view details

push time in 4 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha edd2575bbb68ffac0ba9d8d15154ab1a966d8d6a

Merge branch 'master' into tsc

view details

Mu-An Chiou

commit sha fd520d8a03693d1078d29432a5984b041a5fb92e

Replace github specific table criteria with data-layout-table

view details

Mu-An Chiou

commit sha 74ed50292d47904215d4d254374434f350229686

Fix test

view details

push time in 4 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha 9068b624453d24f3a456e4cb1daa2bc75af52aa4

Add example page

view details

Mu-An 慕安

commit sha ef85048d6f14d1334408127befe53fcb852097fc

Merge pull request #13 from github/test Create tests

view details

Mu-An 慕安

commit sha 2a59202e8b3e7370d213fab8f420c37ce81d34a8

Merge pull request #14 from github/example Add a demo

view details

Mu-An Chiou

commit sha edd2575bbb68ffac0ba9d8d15154ab1a966d8d6a

Merge branch 'master' into tsc

view details

push time in 4 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha 9068b624453d24f3a456e4cb1daa2bc75af52aa4

Add example page

view details

Mu-An 慕安

commit sha ef85048d6f14d1334408127befe53fcb852097fc

Merge pull request #13 from github/test Create tests

view details

Mu-An 慕安

commit sha 2a59202e8b3e7370d213fab8f420c37ce81d34a8

Merge pull request #14 from github/example Add a demo

view details

Mu-An Chiou

commit sha a330391c5c6ceab4dc45aff36fc8372065a3ba2b

Merge branch 'master' into layout-table

view details

Mu-An Chiou

commit sha 6a7631fa743869a68517e3e43cdd849d8672f027

Fix example page

view details

push time in 4 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha ae18f2298b29ae43c3b5cb57873d6849315da04e

Fix test

view details

push time in 4 hours

create barnchgithub/paste-markdown

branch : layout-table

created branch time in 4 hours

push eventmuan/site

Mu-An 慕安

commit sha f284270ab96f1bdec46b3067ae73747f1d7572f1

Add a note

view details

push time in 5 hours

Pull request review commentgithub/paste-markdown

Replace flow + babel with tsc

-/* @flow strict */- import {install as installLink, uninstall as uninstallLink} from './paste-markdown-image-link' import {install as installTable, uninstall as uninstallTable} from './paste-markdown-table' import {install as installText, uninstall as uninstallText} from './paste-markdown-text' -type Subscription = {|+interface Subscription {   unsubscribe: () => void-|}+} -export default function subscribe(el: Element): Subscription {+export default function subscribe(el: HTMLElement): Subscription {

(1/2) This is to ensure event listeners are correctly typed.

muan

comment created time in 7 hours

Pull request review commentgithub/paste-markdown

Replace flow + babel with tsc

-/* @flow strict */- export function insertText(textarea: HTMLInputElement | HTMLTextAreaElement, text: string): void {-  const beginning = textarea.value.substring(0, textarea.selectionStart)-  const remaining = textarea.value.substring(textarea.selectionEnd)+  const beginning = textarea.value.substring(0, textarea.selectionStart || 0)+  const remaining = textarea.value.substring(textarea.selectionEnd || 0)

(2/2) selectionStart and selectionEned only applies to input elements of certain types. https://html.spec.whatwg.org/#do-not-apply

muan

comment created time in 7 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha f55ba0630b84d5619424adf9cfa5d5e6dc31d159

Remove unused package

view details

push time in 7 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha 613f66260d3e96d800f98bc82d84aeb903b35ca0

Add support back to Input elements Note: selectionStart/End only applies to input elements of certain types so it could be null and throws. This fallbacks to 0. https://html.spec.whatwg.org/#do-not-apply

view details

push time in 7 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha f13154352646a1c549bd825eed4d7b1dad73762c

Remove/simplify config

view details

Mu-An Chiou

commit sha 148d2ac2fbfc9f871a6780498385d7a196a96b1f

Extend config

view details

push time in 7 hours

delete branch github/paste-markdown

delete branch : example

delete time in 9 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha 9068b624453d24f3a456e4cb1daa2bc75af52aa4

Add example page

view details

Mu-An 慕安

commit sha 2a59202e8b3e7370d213fab8f420c37ce81d34a8

Merge pull request #14 from github/example Add a demo

view details

push time in 9 hours

PR merged github/paste-markdown

Add a demo

This adds a demo page with table and image examples.

example page

+57 -0

0 comment

1 changed file

muan

pr closed time in 9 hours

push eventgithub/paste-markdown

Mu-An Chiou

commit sha 64317f45b0c443091e66ed61cb6d31c607468a2c

Add test requirements and move eslint base setup to be extended

view details

Mu-An Chiou

commit sha df07bd704f3ac2ee92ecefdb352a8f7da393ef98

Add tests

view details

Mu-An Chiou

commit sha 905e51758a4106b27c12f32e2365eb6de4ada856

Test with github actions

view details

Mu-An 慕安

commit sha ef85048d6f14d1334408127befe53fcb852097fc

Merge pull request #13 from github/test Create tests

view details

push time in 9 hours

PR merged github/paste-markdown

Create tests

This adds basic tests for paste event listeners and adds setup to run tests with GitHub Actions.

image

Coming soon:

  • Demo pages https://github.com/github/paste-markdown/pull/14
  • Convert to TypeScript & tsc
  • Refactor exclude content selector (.js-comment -> [data-*])
+1870 -20

0 comment

8 changed files

muan

pr closed time in 9 hours

startedtatianamac/selfdefined

started time in 12 hours

PR opened github/paste-markdown

Replace flow + babel with tsc

Ref:

  • https://github.com/rollup/plugins/issues/61
  • https://github.com/ezolenko/rollup-plugin-typescript2#declarations
+631 -1295

0 comment

15 changed files

pr created time in a day

create barnchgithub/paste-markdown

branch : tsc

created branch time in a day

PR opened github/paste-markdown

Add a demo

This adds a demo page with table and image examples.

example page

+57 -0

0 comment

1 changed file

pr created time in a day

create barnchgithub/paste-markdown

branch : example

created branch time in a day

PR opened github/paste-markdown

Create tests

This adds basic tests for paste event listeners and adds setup to run tests with GitHub Actions.

image

Coming soon:

  • Demo pages
  • Convert to TypeScript & tsc
  • Refactor exclude content selector (.js-comment -> [data-*])
+1870 -20

0 comment

8 changed files

pr created time in a day

push eventgithub/paste-markdown

Mu-An Chiou

commit sha 905e51758a4106b27c12f32e2365eb6de4ada856

Test with github actions

view details

push time in a day

create barnchgithub/paste-markdown

branch : test

created branch time in a day

push eventmuan/site

Mu-An 慕安

commit sha c11e71ea46d35c8689961700fc114bb21804ad64

Add a note

view details

push time in 3 days

push eventmuan/site

Mu-An 慕安

commit sha 8b5c56378944a6c3849986c7c960ca56762ecdd2

Add a note

view details

push time in 5 days

push eventgithub/file-attachment-element

Mu-An Chiou

commit sha b351b46ef7a45e3393bf3416a2be8523f8629314

Add input to the example

view details

push time in 9 days

release github/file-attachment-element

v0.3.0

released time in 9 days

created taggithub/file-attachment-element

tagv0.3.0

Attach files via drag and drop or file input.

created time in 9 days

push eventgithub/file-attachment-element

Mu-An Chiou

commit sha 97354d2c3f208024ab32523dfbfc0c1bfadce42b

0.3.0

view details

push time in 9 days

push eventmuan/site

Mu-An 慕安

commit sha ecb685f3d25477f2548ece18f60aafae26a80535

Add a note

view details

push time in 11 days

created repositoryAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA0/AAAA

created time in 12 days

create barnchAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA0/AAAA

branch : master

created branch time in 12 days

create barnchAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA0/4

branch : master

created branch time in 12 days

created repositoryAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA0/4

created time in 12 days

startedyou-dont-need/You-Dont-Need-Momentjs

started time in 12 days

delete branch github/file-attachment-element

delete branch : tests

delete time in 12 days

push eventgithub/file-attachment-element

Mu-An Chiou

commit sha 35bd606b58502cd7d1102c2e8520261668f2aac3

Ensure change event came from #input

view details

Mu-An Chiou

commit sha b762d66d05e0ba3ff1637ad2ace9da322ea7061d

Connect file-attachment & input

view details

Mu-An Chiou

commit sha 2a4bdbd2f29621708f8c6df3763eb7ba2743486e

Add documentation for optional attributes

view details

push time in 12 days

startedtc39/proposal-error-stacks

started time in 12 days

PR opened github/file-attachment-element

Add support for file inputs

Ref: #2.

  • [ ] See about adding constraints to qualified sources of change
+31 -2

0 comment

2 changed files

pr created time in 13 days

push eventgithub/file-attachment-element

Mu-An Chiou

commit sha 004840fd3201a2593eb6cee525f2985315c9e145

Add support for input.files

view details

push time in 13 days

create barnchgithub/file-attachment-element

branch : input

created branch time in 13 days

startedirori/wapuro-mincho

started time in 13 days

PR opened github/file-attachment-element

Reviewers
Add tests for event listeners and attach

This adds some tests for the element behavior around event listeners and the public API .attach.

image

+58 -0

0 comment

2 changed files

pr created time in 13 days

create barnchgithub/file-attachment-element

branch : tests

created branch time in 13 days

create barnchmuan/delete-me-2

branch : master

created branch time in 14 days

created repositorymuan/delete-me-2

created time in 14 days

issue openedgithub/file-attachment-element

Hadnling file input

Attach files via drag and drop or file input.

The element itself doesn't seem to care about file inputs. In dotcom we us a custom behavior that calls fileattachment.attach(files). I think we can add some simple documentation for this, but I wonder what yo all think about having the element listening on file input change instead?

It is not too much to add the custom hook, but considering an actual file input would be needed for accessibility, I think it'd be good if it comes by default.

cc @github/web-systems

created time in 14 days

startedjulien-lafont/Mocky

started time in 14 days

delete branch github/details-menu-element

delete branch : input-support

delete time in 14 days

delete branch github/details-menu-element

delete branch : filter-input-support

delete time in 14 days

PR closed github/details-menu-element

Expose APIs for clearing focus and selecting item

This is dependent on #38, as #38 introduced a new focus state that doesn't go away on its own. I figured this could be worth a separate discussion.

These two functions are useful when there are scripted behaviors that alter menu items. This allows those behaviors to interact with <details-menu> easily, instead of getting into the implementation details of <details-menu>.

For example,

A filtering behavior would want to clear focus after filtering. With this change, it will be able to call detailsMenu.clearFocus() instead of

  1. duplicating details-menu's logic for querying menu items
  2. clearing focus states based on details-menu's implementation

A filtering input would want to trigger an implicit selection for the first filtered result on Enter. With this change, it will be able to invoke detailsMenu.selectFocusOrFirst() instead of

  1. check for currently focused menu item or finding first item by duplicating details-menu's logic for querying menu items
  2. simulate a click() on the item

Example:

menu.addEvenetListener('menuitem-filtered', () => {
  menu.clearFocus()
})
input.addEvenetListener('keypress', event => {
  if (event.key !== 'Enter') return
  input.closest('details-menu').selectFocusOrFirst()
})

Note: In this use case the current focus check in selectFocusOrFirst is redundant, since the input would have focus. "Focus or first" is mostly an explicit name for an implicit default.

+15 -0

1 comment

3 changed files

muan

pr closed time in 14 days

pull request commentgithub/details-menu-element

Expose APIs for clearing focus and selecting item

We're no longer pursuing this.

muan

comment created time in 14 days

PR closed github/details-menu-element

Support selecting menu item from <input>

Currently when a menu contains a filtering input, navigating items will take user's focus away from the input. This creates quite an annoyance when quick filtering actions are performed.

This adds support for managing focus via aria-activedescendant when an input is specified on the menu element, and said input is focused. Aside from setting input attribute, the markup should also fulfill the following (not enforced by details-menu):

  • aria-owns on <input> targeting the menu item container
  • id and role on the menu item container since role=menu should not contain <input>
  • Static id on each of the menu item (there is a dynamically generated ID, but in testing it seems AT might be slow in picking them up)
  • Styling focus style with :focus, [aria-selected="true"]
Keyboard VO w/ Safari

References:

  • https://www.w3.org/TR/wai-aria-1.1/#aria-activedescendant for managing focus
  • https://www.w3.org/TR/wai-aria-1.1/#aria-selected for conveying focus state over :focus
+145 -17

1 comment

5 changed files

muan

pr closed time in 14 days

pull request commentgithub/details-menu-element

Support selecting menu item from <input>

We're no longer pursuing this.

muan

comment created time in 14 days

delete tag github/combobox-nav

delete tag : 1.0.2

delete time in 16 days

created taggithub/combobox-nav

tag1.0.2

Attach combobox navigation behavior to <input> or <textarea>.

created time in 16 days

created taggithub/combobox-nav

tagv1.0.2

Attach combobox navigation behavior to <input> or <textarea>.

created time in 16 days

push eventgithub/combobox-nav

Mu-An Chiou

commit sha 179f812ed1a4ce58e13610a10fcb2d308b6a037a

1.0.2

view details

push time in 16 days

delete branch github/combobox-nav

delete branch : hidden

delete time in 16 days

push eventgithub/combobox-nav

Mu-An Chiou

commit sha 0cc83676c98aac49db108814c932a8e7f628541a

Add test for hidden options

view details

Mu-An Chiou

commit sha 4a79ecca05034970998b07dd1e731ae39f55c66b

Ignore hidden options

view details

Mu-An Chiou

commit sha ec3354917447baca38db4eed90e7c55e2f637bdd

Use visible check instead of hidden for futureproofing

view details

Mu-An 慕安

commit sha 6b33f0489bf0e6703d85d8ca07dd2c0ab5b59520

Merge pull request #16 from github/hidden Ignore hidden options

view details

push time in 16 days

PR merged github/combobox-nav

Ignore hidden options

Ensure only visible items are focused on. For reference https://github.com/github/details-dialog-element/pull/48

+10 -5

0 comment

2 changed files

muan

pr closed time in 16 days

startedgithub/filter-input-element

started time in 16 days

push eventmuan/site

Mu-An 慕安

commit sha a39fc68d33e35aa781b56e6e57b6e6b412582fe6

Add a note

view details

push time in 16 days

delete branch muan/megamoji

delete branch : yo

delete time in 19 days

PR closed muan/megamoji

WIP: Rewrite
  • Less jQuery
  • More unicode
  • Use emojilib

  • [ ] Less CSS
  • [ ] Less JavaScript
  • [ ] Fix tests
  • [ ] Find workaround for chrome not rendering big emoji
+11922 -301

1 comment

22 changed files

muan

pr closed time in 19 days

issue closedmuan/hello-how-are-you

Hello. I'm Fine.

How are you?

closed time in 19 days

Uniminin

issue commentmuan/hello-how-are-you

Hello. I'm Fine.

I am great.

Uniminin

comment created time in 19 days

created tagmuan/hello-how-are-you

tag1.0.0

created time in 19 days

release muan/hello-how-are-you

1.0.0

released time in 19 days

create barnchmuan/hello-how-are-you

branch : master

created branch time in 19 days

created repositorymuan/hello-how-are-you

created time in 19 days

push eventmuan/site

Mu-An 慕安

commit sha 159a5cabfc214e907311e651c9e6f9e7cffa8e68

Add a note

view details

push time in 20 days

startedwulkano/kap

started time in 21 days

release github/details-menu-element

v1.0.8

released time in 21 days

created taggithub/details-menu-element

tagv1.0.8

A menu opened with <details>.

created time in 21 days

push eventgithub/details-menu-element

Mu-An Chiou

commit sha 87a2ed3b57c4e65a992bca2db55e973602d26dc8

1.0.8

view details

push time in 21 days

push eventgithub/details-menu-element

Mu-An Chiou

commit sha 767ec2a7d72a5b5b58d02af15e41b63e0664ebab

Only trigger close if details was open

view details

Mu-An 慕安

commit sha 844dbec6317eb62a62043cd59ddb15fc2ab31aa5

Merge pull request #45 from github/close-if-open Only trigger close if details was open

view details

push time in 21 days

delete branch github/details-menu-element

delete branch : close-if-open

delete time in 21 days

PR merged github/details-menu-element

Only trigger close if details was open

Reference: https://github.com/github/github/pull/133881

Issue: Menu button was focused on when one of its menuitems was triggered by a hotkey without the menu being open.

Steps to reproduce:

  1. Trigger a click on a menu item without the menu being open
  2. See <summary> gets focused

This fixes the issue by returning the close() call if <details> isn't open.

before after

I didn't add a test because this would be testing that something doesn't happen which can potentially be any number of things.

cc @latentflip

+2 -0

0 comment

1 changed file

muan

pr closed time in 21 days

PR opened github/details-menu-element

Only trigger close if details was open

Reference: https://github.com/github/github/pull/133881

Issue: Menu button was focused on when one of its menuitems was triggered by a hotkey without the menu being open.

Steps to reproduce:

  1. Trigger a click on a menu item without the menu being open
  2. See <summary> gets focused

This fixes the issue by returning the close() call if <details> isn't open.

I didn't add a test because this would be testing that something doesn't happen which can potentially be any number of things.

cc @latentflip

+2 -0

0 comment

1 changed file

pr created time in 21 days

create barnchgithub/details-menu-element

branch : close-if-open

created branch time in 21 days

pull request commentgithub/eslint-plugin-github

docs: describe Array#forEach anti patterns

I believe @zeke was also right with regards to async functions in that forEach is blocking while for...of isn't. I vaguely remember that being the reason. cc @dgraham

keithamus

comment created time in 21 days

pull request commentgithub/auto-complete-element

Accept `text/fragment+html` as a content-type

when nginx sees a Content-Type header of text/html; fragment - it discards it as an invalid Mime Type and will not gzip it.

How does this new string, which still contains media-type, work? Do we know that they gets parsed successfully regardless and that the "invalid" part is ignored?

koddsson

comment created time in 22 days

pull request commentgithub/auto-complete-element

Replace xhr with fetch

I'm still not sure auto complete needs the text/html; fragment content type to function since it doesn't check for it in the code.

What I meant is that the element needs a HTML fragment response, and users of the element needs to know that somehow. This is done properly through content negotiation. Content negotiation is thus essential because the element requires this specific type of content to do its primary job; otherwise, apps can be sending back a JSON string because the element did not ask for the right thing, and the element wouldn’t work.

I view “asking for the right thing” as the element’s responsibility, especially considering all the troubles we’ve had with <include-fragment> not asking for the right thing and requiring us to add an accept attribute.

<auto-check> on the other hand does not use the response content, so I’d argue content negotiation isn’t essential.

koddsson

comment created time in 23 days

startedmicrosoft/playwright

started time in a month

starteddgraham/stache

started time in a month

push eventmuan/site

Mu-An 慕安

commit sha 2292f548d4e09b23c4182f67fd595fcb2beb537e

Add a note

view details

push time in a month

issue commentgithub/details-dialog-element

CSS class for disabling escape key?

As specified in https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-7, the behavior of pressing escape to close a dialog is an accessibility requirement. Therefore we will not add an option to disable this behavior.

frederikhors

comment created time in a month

issue closedgithub/details-dialog-element

CSS class for disabling escape key?

CSS class for disabling escape key?

closed time in a month

frederikhors

Pull request review commentgithub/file-attachment-element

Attachment states

 export default class Attachment {   file: File   directory: string | undefined+  state: 'pending' | 'saving' | 'saved'+  id: string | null | undefined

Is undefined necessary?

dgraham

comment created time in a month

pull request commentgithub/auto-complete-element

Replace xhr with fetch

Mostly wanted to drop the text/html; fragment accept header and did that in 6703c3e.

Can you add more on the reasoning for this change? <auto-complete> needs a HTML fragment to function, like <remote-input>; <auto-check> does not.

koddsson

comment created time in a month

startedgithub/file-attachment-element

started time in a month

issue closedgithub/time-elements

time-until wrong calculation

Today is Jan 18, 2020,

but <time-until datetime="2020-12-31T00:00:00"></time-until> outputs next year

image

closed time in a month

rnons

issue commentgithub/time-elements

time-until wrong calculation

  1. The timestamp you used does not have a timezone specified, so the time diff would be your local time ~ 2020/12/31T00:00:00 UTC, which can be further away.
  2. The relative time calculation is rounded here so a 11.5 month rounds up to 12 months away, which is displayed as next year here.
  3. If you wishes to see a more specific <time-until> (aka one that is not loosely rounded), use format="micro", which will give you the exact days until the date.
rnons

comment created time in a month

more