profile
viewpoint
Ivan Babak sompylasar San Francisco, CA https://sompylasar.github.io/?utm_campaign=cv2018&utm_source=github-profile&utm_medium=github-profile Software architect, frontend engineer. Designing, building, maintaining, refactoring complex web apps, components, APIs, and tools. Specializing in React, Node.

sompylasar/code-insights 6

A toolbox of CLI tools that analyze web application or Node.js source code and show some stats useful for code health maintenance and refactoring.

sompylasar/atom-cursor-indent 3

Atom editor package that makes the cursor follow the desired (auto) indentation on empty lines.

sompylasar/bootstrap-datepicker-select 2

A @twitter bootstrap component for selecting a date from three dropdowns: year, month, day.

dkorolev/curlable 1

A simple wrapper to turn [stateless] command-line utilities into HTTP endpoints.

sompylasar/bootstrap-combobox 1

A combobox plugin that works with twitter bootstrap

sompylasar/Categorizr 1

A modern device detection script

sompylasar/crashkit-api 1

CrashKit API docs and implementations for popular languages

sompylasar/30-seconds-of-code 0

Curated collection of useful Javascript snippets that you can understand in 30 seconds or less.

sompylasar/abyssa-js 0

Stateful, hierarchical router for single page applications

startedjamesknelson/retil

started time in 6 days

startedrxhanson/Rectangle

started time in 16 days

startedwhitecolor/yalc

started time in 18 days

issue openedexcalidraw/excalidraw

Vertical arrows are extremely hard to select and drag; drag cursor is missing

Especially in combination with #703

Screen Shot 2020-02-04 at 3 02 37 PM

created time in 19 days

issue commentexcalidraw/excalidraw

A tool to convert arrows to lines and back

On nice, didn't notice the hint about clicking to start multi-point. It smoothes the curves, so not ideal for my use case, I need sharp turns, and some turns end with arrowheads, so I'm using separate arrows for that and it would be nice to be able to switch arrowheads. That issue seems to fit.

sompylasar

comment created time in 19 days

issue openedexcalidraw/excalidraw

A tool to convert arrows to lines and back

While there's no multi-point arrows, it might be useful to have a simple toggle when selecting an arrow or a line to convert one to another.

created time in 19 days

issue commentexcalidraw/excalidraw

Put back send to back, bring to front on the left menu

Despite what's said in the twitter discussion, for more complex diagrams with a lot of overlapping elements that I'm trying to use excalidraw for, I personally feel like I would benefit from a layers panel, at least to select elements there when it's hard to do on the whiteboard.

vjeux

comment created time in 19 days

issue commentexcalidraw/excalidraw

Undo/redo doesn't work if element selected

Is this a duplicate of #687? Do cmd+c/cmd+v work for you?

dwelle

comment created time in 19 days

issue openedexcalidraw/excalidraw

When some elements are selected, and option+drag is performed, do not perform reselection of elements under pointer

Currently, when I do option+drag of selected elements, it matters where I start the drag: it must be within one of the selected elements, otherwise the selection changes to the element under pointer and that element gets selected and copied instead.

This is annoying when certain elements are hard to select (e.g. overlapping text elements), and cmd+c/cmd+v does not work, so only option+drag works for copy/pasting.

It would be nice if the behavior is adjusted to not replace the selection if option is pressed so that the originally selected elements are copied.

created time in 19 days

pull request commentexcalidraw/excalidraw

Fix typing into color picker popup text field

Also, another change I made, text in the text field is selected/highlighted on the first click. This might be something that needs to be discussed because people might have different preferences. In my opinion, selecting all text makes deleting/removing easier.

👎 My preference is against such behavior in any text field, it's so frustrating, I know how to select text (double click or shift home) if I need to delete it, but in excalidraw, if I instead of selecting a swatch decided to use the text field, I usually want to tweak the color, for example add the opacity byte, not always fully replace it (and even if I did fully replace, I have alternatives). This change fixes one aspect of my workflow and breaks/slows down the other, both were mentioned on the bug report.

muzakparov

comment created time in 19 days

issue commentexcalidraw/excalidraw

Drag selection: drag left to select touched elements vs. drag right to select fully enclosed elements

Here's from AUTOCAD documentation: https://knowledge.autodesk.com/support/autocad-lt/learn-explore/caas/CloudHelp/cloudhelp/2019/ENU/AutoCAD-LT/files/GUID-243E4DD0-8947-4905-AFE2-BE9B903A8C3F-htm.html

To create a lasso selection, click, drag, and release the mouse button. Do one of the following:

  • Select individual objects by clicking them.
  • Drag from left to right to select all objects that are entirely enclosed in the selection rectangle or lasso (window selection).
  • Drag from right to left to select all objects that are crossed by the selection rectangle or lasso (crossing selection).
sompylasar

comment created time in 19 days

issue commentexcalidraw/excalidraw

Drag selection: drag left to select touched elements vs. drag right to select fully enclosed elements

Just tried some moder ones, looks like it's not present in Google Slides or Sketch... they both seem to always do touched elements. That's unfortunate.

I'm sure it's present and very helpful in AUTOCAD and Flash.

sompylasar

comment created time in 19 days

issue commentexcalidraw/excalidraw

Drag selection: drag left to select touched elements vs. drag right to select fully enclosed elements

It's like that in many graphics editors, I'm sure. I was surprised to not find it in excalidraw because this was so intuitive for me to try (heavily used to this feature in other editors).

sompylasar

comment created time in 19 days

issue openedexcalidraw/excalidraw

Drag selection: drag left to select touched elements vs. drag right to select fully enclosed elements

This video illustrates the two kinds of selection: https://youtu.be/mYq511ZH6gQ (source: https://www.cadsessions.com/quick-tip-right-vs-left-drag-selection/ ).

The two selection modes are quite natural in vector editors, so it would be nice in excalidraw to improve UX for crowded pictures.

created time in 19 days

issue openedexcalidraw/excalidraw

Pressing "shift" when resizing a rectangle sets the aspect ratio to square; releasing it does not reset to non-constrained, keeps square

Expected behavior:

  • When creating a rectangle, holding shift should make it a square (constrained aspect ratio), releasing shift should reset to unconstrained creating.
  • When resizing an existing rectangle, holding shift should constrain to the aspect ratio of the rectangle before resize (not square if it wasn't square); releasing shift should reset to unconstrained resizing.

created time in 20 days

issue commentexcalidraw/excalidraw

cmd+z undo, cmd+c copy, cmd+v paste stop working sporadically on excalidraw.com

Your issue was likely connected to this: when you open contextMenu, pasting no longer works.

But does undo work still, or it also stops working after context menu?

Looks like my issue is related to duplicating selection via option+drag, this happened again and not sure how to make it work again.

sompylasar

comment created time in 20 days

issue commentexcalidraw/excalidraw

cmd+z undo, cmd+c copy, cmd+v paste stop working sporadically on excalidraw.com

You can check the preview if it improves (or makes worse) your situation

Thanks! I just need to draw something quickly now so I don't have much time now to reproduce issues, sorry.

I reported the weird behaviors that I noticed related to keyboard shortcuts, it doesn't seem to be related with the actual clipboard behavior which works fine when the shortcuts work.

sompylasar

comment created time in 20 days

issue commentexcalidraw/excalidraw

cmd+z undo stopped working on excalidraw.com

Hmm, looks like sporadically, now it started working again after I did something... Also when it stops, then cmd+c, cmd+v also don't work.

sompylasar

comment created time in 20 days

issue openedexcalidraw/excalidraw

Typing into the color picker popup text field causes color selection via hotkey

Before typing "d", want to add the opacity component to the color hex code (#ffffffdd): Screen Shot 2020-02-03 at 11 46 30 AM

After typing "d", green color is selected ("d" stands for green) Screen Shot 2020-02-03 at 11 46 41 AM

created time in 20 days

issue openedexcalidraw/excalidraw

cmd+z undo stopped working on excalidraw.com

This might have to do with added keyboard shortcuts.

created time in 20 days

startedmicrosoft/playwright

started time in a month

startedTracerBench/tracerbench

started time in a month

issue commentexcalidraw/excalidraw

Switch to the Text tool on double-click

Currently if you double click with any tool, a text input is created and a text input cursor starts blinking.

I expect that if this happens, this behaves exactly as if I selected the Text tool and single-clicked the same point.

sompylasar

comment created time in a month

issue commentexcalidraw/excalidraw

Show the styles sidebar as soon as a tool is selected

Also, even if the Text tool is not selected when entering text with double-click (#399), I'd expect the sidebar to show the current text styles while I'm typing the text.

sompylasar

comment created time in a month

issue openedexcalidraw/excalidraw

Switch to the Text tool on double-click

Related to #163 and #398

This may be controversial, but for the sake of seeing and being able to tweak text styles while entering text, it may make sense to switch to the Text tool.

Currently, it keeps the currently selected tool (e.g. shape), but to apply the text I still click outside of the text area which switches to the arrow tool.

created time in a month

issue openedexcalidraw/excalidraw

Show the styles sidebar as soon as a tool is selected

Currently the sidebar looks like this, showing one white color picker which doesn't seem to apply to anything:

Screen Shot 2020-01-16 at 11 39 51 AM

But the tools implicitly apply some shared state of previously selected colors. This state is not visible to the user, so it's unexpected what will happen when I use the tool.

For example, after drawing a shape, then changing its stroke color to red, then adding some text (e.g. via double-click on an empty surface), the text will be red as well while I type it in, but the sidebar does not reflect that, keeps showing one white color picker. It only will show when I finish editing the text and select it with the arrow tool.

created time in a month

startedlukeed/dequal

started time in a month

startedlukeed/klona

started time in a month

PR closed facebook/react

DOM diff and component stack in SSR hydrate mismatch warnings (#10085) CLA Signed Resolution: Stale

Renders DOM attributes in the tags mentioned in the warnings. Borrows the idea and partially implementation of getNodeSignature from @giles-v https://github.com/facebook/react/pull/12115

Renders DOM diff and component stack showing visually the location where the hydration failed. Example warning with a diff (see the fixtures/ssr and the tests for more warning examples):

Warning: Expected server HTML to contain a matching <div> in <div>.

  <div>
    {'nested'}
    <!-- -->
    {' '}
    <p>children <b>text</b></p>
+   <div>{['children ', …]}</div>
  </div>

    in div (at SSRMismatchTest.js:280)
    in div (at SSRMismatchTest.js:275)
    in div (at SSRMismatchTest.js:308)
    in SSRMismatchTest (at App.js:14)
    in div (at App.js:11)
    in body (at Chrome.js:17)
    in html (at Chrome.js:9)
    in Chrome (at App.js:10)
    in App (at index.js:8)

react-fixtures-ssr-example

Requires changes to ReactFiberReconciler interface functions that handle hydration errors to distinguish insertion from replacement and show insertion as one added line in the diff; show replacement as one removed, one added line, at correct position among the parentInstance's DOM children:

  • add index (use fiber.index) to point at which child node the insertion or replacement occurs;
  • add isReplaced to distinguish insertion from replacement.

<details> <summary> The latest screen recording from <code>fixtures/ssr</code> (7.8MB – click to expand) </summary>

react-fixtures-ssr-10mb

</details>


<details><summary>Previous revisions</summary>

Warning: Expected server HTML to contain a matching <div>{['children ', …]}</div> in <div>nested<!-- --> <p>children <b>text</b></p></div>.
  <div>
    {'nested'}
    {' '}
    <p>children <b>text</b></p>
+   <div>{['children ', …]}</div>
  </div>
    in div (at SSRMismatchTest.js:280)
    in div (at SSRMismatchTest.js:275)
    in div (at SSRMismatchTest.js:308)
    in SSRMismatchTest (at App.js:14)
    in div (at App.js:11)
    in body (at Chrome.js:17)
    in html (at Chrome.js:9)
    in Chrome (at App.js:10)
    in App (at index.js:8)

Extends the proof-of-concept at commit 6c425e7b90cd61f1124c566b26fa2a5d00261b1b

react-ssr-warning-diff


  • Added textual component stack to the hydrate mismatch warnings
  • Added DOM hydrate mismatch test cases to fixtures/ssr

Example warning:

Warning: Expected server HTML to contain a matching <p> in <div>.
    in p (at SSRMismatchTest.js:40)
    in div (at SSRMismatchTest.js:39)
    in div (at SSRMismatchTest.js:46)
    in SSRMismatchTest (at App.js:14)
    in div (at App.js:11)
    in body (at Chrome.js:17)
    in html (at Chrome.js:9)
    in Chrome (at App.js:10)
    in App (at index.js:8)

react-ssr-mismatch

</details>


Fixes https://github.com/facebook/react/issues/10085

+1908 -64

46 comments

12 changed files

sompylasar

pr closed time in a month

pull request commentfacebook/react

DOM diff and component stack in SSR hydrate mismatch warnings (#10085)

Okay, stale[bot], I guess we can close this one, as nobody's been looking at it, and focus on #13602 instead.

sompylasar

comment created time in a month

pull request commentfacebook/react

Hydration warnings with DOM diff in react-reconciler (#10085)

Hey stale[bot], I still have hopes to ship this some day!

sompylasar

comment created time in a month

issue commentfacebook/flow

Intersection type doesn't refine unions inside matching properties

Looks like what's confusing is the word "Intersection" in the "Intersection Types" concept name.

What is usually considered an intersection of two sets is the middle american-football-ball-shaped section. https://en.wikipedia.org/wiki/Intersection_(set_theory)

But according to the Flow Intersection Types documentation it's not that for Flow types. https://flow.org/en/docs/types/intersections/

excalidraw-202018205128

For example, flow.org/try

type A = { a: number };
type B = { b: boolean };
type C = { c: string, b: number };

// This one works as expected with set intersection:
(({}): (A & B));
// Expected no error (no fields in the intersection of A and B sets of fields),
// got no error.

// But the following ones do not!

(({ a: 1 }): (A & B));
// Expected error about extra property `a`,
// got error about missing property `b`.

(({ b: true }): (B & C));
// Expected no error (`b: boolean` is in the intersection of B and C sets of fields),
// got error about missing property `c`,
// and error about incompatibility of `b: boolean` and `b: number`.

(({ b: 1 }): (B & C));
// Expected no error (`b: number` is in the intersection of B and C sets of fields),
// got error about missing property `c`,
// got error about incompatibility of `b: boolean` and `b: number`.

(({ a: 1, b: true }): (A & B));
// Expected error about extra property `a`,
// got no error.

(({ b: true, c: 'c' }): (B & C));
// Expected error about extra property `c`,
// got error about incompatibility of `b: boolean` and `b: number`.

(({ a: 1, b: true, c: 'c' }): (A & B & C));
// Expected error about extra property `a`,
// got error about incompatibility of `b: boolean` and `b: number`.
qm3ster

comment created time in a month

startedneutraltone/awesome-stock-resources

started time in 2 months

PR opened gajus/eslint-plugin-flowtype

fix: sort-keys spreads, spreads with generics, comment handling

For the flowtype/sort-keys rule:

  1. Fixes dropping of spread generic type arguments when keys are reordered.
  2. Fixes reordering of spread elements. The order of spreads is significant and must be preserved, sort only standalone keys between the spans of spreads.
  3. Fixes comment handling and preservation.
  4. Makes it clear in the tests and code comments that the objects within generic type arguments are not auto-fixed even though they show an error (can be fixed later).

I had to reimplement generateOrderedList and a part of generateFix to get this working to find tokens an replacement ranges more precisely (most difficult were comments). Hope it won't be very hard to review; I recommend reviewing the full code, not the red/green diff lines.

See added tests. Before this PR, the added tests were failing:

  1419 passing (2s)
  5 failing

  1) sort-keys
       invalid
         
        type FooType = {
          ...ErrorsInRecursiveGenericTypeArgsButDoesNotFix<{
            y: boolean,
            x: string,
            z: {
              j: string,
              l: number,
              k: boolean,
            },
          }>,
          a: number,
          c: string,
          b: Map<string, Array<ErrorsInRecursiveGenericTypeArgsButDoesNotFix<{
            y: boolean,
            x: string,
            z: {
              j: string,
              l: number,
              k: boolean,
            },
          }>>>,
        }
      :

      AssertionError [ERR_ASSERTION] [ERR_ASSERTION]: Output is incorrect.
      + expected - actual

       
               type FooType = {
      -          ...ErrorsInRecursiveGenericTypeArgsButDoesNotFix,
      +          ...ErrorsInRecursiveGenericTypeArgsButDoesNotFix<{
      +            y: boolean,
      +            x: string,
      +            z: {
      +              j: string,
      +              l: number,
      +              k: boolean,
      +            },
      +          }>,
                 a: number,
                 b: Map<string, Array<ErrorsInRecursiveGenericTypeArgsButDoesNotFix<{
                   y: boolean,
                   x: string,
      
      at testInvalidTemplate (node_modules/eslint/lib/testers/rule-tester.js:569:28)
      at Context.<anonymous> (node_modules/eslint/lib/testers/rule-tester.js:592:25)
      at processImmediate (internal/timers.js:439:21)

  2) sort-keys
       invalid
         
        type FooType = {
          ...BPreservesSpreadOrder,
          ...APreservesSpreadOrder,
          c: string,
          b: number,
        }
      :

      AssertionError [ERR_ASSERTION] [ERR_ASSERTION]: Output is incorrect.
      + expected - actual

       
               type FooType = {
      +          ...BPreservesSpreadOrder,
                 ...APreservesSpreadOrder,
      -          ...BPreservesSpreadOrder,
                 b: number,
                 c: string,
               }
             
      
      at testInvalidTemplate (node_modules/eslint/lib/testers/rule-tester.js:569:28)
      at Context.<anonymous> (node_modules/eslint/lib/testers/rule-tester.js:592:25)
      at processImmediate (internal/timers.js:439:21)

  3) sort-keys
       invalid
         
        type FooType = {
          ...BPreservesSpreadSpans,
          ...APreservesSpreadSpans,
          c: string,
          b: number,
          ...CPreservesSpreadSpans,
          e: string,
          d: number,
        }
      :

      AssertionError [ERR_ASSERTION] [ERR_ASSERTION]: Output is incorrect.
      + expected - actual

       
               type FooType = {
      +          ...BPreservesSpreadSpans,
                 ...APreservesSpreadSpans,
      -          ...BPreservesSpreadSpans,
      -          ...CPreservesSpreadSpans,
                 b: number,
                 c: string,
      +          ...CPreservesSpreadSpans,
                 d: number,
                 e: string,
               }
             
      
      at testInvalidTemplate (node_modules/eslint/lib/testers/rule-tester.js:569:28)
      at Context.<anonymous> (node_modules/eslint/lib/testers/rule-tester.js:592:25)
      at processImmediate (internal/timers.js:439:21)

  4) sort-keys
       invalid
         
        type FooType = {
          ...BPreservesSpreadOrderAndTypeArgs<string, number>,
          ...APreservesSpreadOrderAndTypeArgs<number>,
          c: string,
          b: number,
        }
      :

      AssertionError [ERR_ASSERTION] [ERR_ASSERTION]: Output is incorrect.
      + expected - actual

       
               type FooType = {
      -          ...APreservesSpreadOrderAndTypeArgs,
      -          ...BPreservesSpreadOrderAndTypeArgs,
      +          ...BPreservesSpreadOrderAndTypeArgs<string, number>,
      +          ...APreservesSpreadOrderAndTypeArgs<number>,
                 b: number,
                 c: string,
               }
             
      
      at testInvalidTemplate (node_modules/eslint/lib/testers/rule-tester.js:569:28)
      at Context.<anonymous> (node_modules/eslint/lib/testers/rule-tester.js:592:25)
      at processImmediate (internal/timers.js:439:21)

  5) sort-keys
       invalid
         
        type FooType = {
          /* preserves block comment before spread BType */
          // preserves line comment before spread BType
          ... /* preserves comment in spread BType */ BType<Generic> /* preserves trailing comment in spread AType */,
          /* preserves block comment before spread AType */
          // preserves line comment before spread AType
          ... /* preserves comment in spread AType */ AType /* preserves trailing comment in spread AType */,
          /* preserves block comment before reordered key "c" */
          // preserves line comment before reordered key "c"
          c:/* preserves comment and white space or lack of it */string/* preserves trailing comment for key "c" */,
          b: number,
          dWithoutComma: boolean
        }
      :

      AssertionError [ERR_ASSERTION] [ERR_ASSERTION]: Output is incorrect.
      + expected - actual

       
               type FooType = {
                 /* preserves block comment before spread BType */
                 // preserves line comment before spread BType
      -          ...AType /* preserves trailing comment in spread AType */,
      +          ... /* preserves comment in spread BType */ BType<Generic> /* preserves trailing comment in spread AType */,
                 /* preserves block comment before spread AType */
                 // preserves line comment before spread AType
      -          ...BType /* preserves trailing comment in spread AType */,
      +          ... /* preserves comment in spread AType */ AType /* preserves trailing comment in spread AType */,
      +          b: number,
                 /* preserves block comment before reordered key "c" */
                 // preserves line comment before reordered key "c"
      -          b: number/* preserves trailing comment for key "c" */,
      -          c: string,
      +          c:/* preserves comment and white space or lack of it */string/* preserves trailing comment for key "c" */,
                 dWithoutComma: boolean
               }
             
      
      at testInvalidTemplate (node_modules/eslint/lib/testers/rule-tester.js:569:28)
      at Context.<anonymous> (node_modules/eslint/lib/testers/rule-tester.js:592:25)
      at processImmediate (internal/timers.js:439:21)
+273 -35

0 comment

2 changed files

pr created time in 2 months

startedjlongster/crdt-example-app

started time in 3 months

startedstevensacks/react-smart-scroll

started time in 3 months

startedlebab/lebab

started time in 4 months

startedtheKashey/use-callback-ref

started time in 4 months

startedueno-llc/react-three-gui

started time in 5 months

startedsmooth-code/react-merge-refs

started time in 5 months

startedGoogleChromeLabs/wasm-feature-detect

started time in 5 months

startedpalmerhq/tsdx

started time in 6 months

more