ui-space

Notes helpful for UI Engineer - basically replacement for GitHub gist. I don't want to use twitter for my notes.

[uispace]

Floating-point precision errors

75.49 * 100 will give 7548.999999999999 and not 7549.

[uispace]

Viewport deep dive

[uispace]

Deep clone native method: structuredClone

structuredClone(someObject)

Beware

1. Functions, it will be quietly ignored

2. error/dom nodes will throw error

3. Prototype chain stuff will be ignored

https://web.dev/structured-clone/

[uispace]

Battery API

Battery Status API - Web APIs | MDN

The Battery Status API, more often referred to as the Battery API, provides information about the system's battery charge level and lets you

[uispace]

PWA Desktop override topbar

Customize the window controls overlay of your PWA's title bar

With the Window Controls Overlay feature, developers can customize the title bar of installed PWAs so that their PWAs feel more like apps.

[uispace]

handwriting recognizer on the web

Recognize your users' handwriting

The Handwriting Recognition API allows web applications to use advanced handwriting recognition services to recognize text from handwritten

[uispace]

custom picker

Show a browser picker for date, time, color, and files - Chrome Developers

The web platform now ships with a canonical way to show a browser picker.

Recently a new picker is coming up that allows us to render a picker for a lot of input types.

[uispace]

Cross site tracking

Safari and other browsers are now by default not sending the complete referrer such as www.a.com/sub-page/b and only sending www.a.com due to this https://www.arcolatheatre.com/disable-prevent-cross-site-tracking/ https://stackoverflow.com/questions/62225068/safari-mobile-and-desktop-are-hiding-full-referrer-url-why#:~:text=If%20you%20want%20it%2C%20you,Select%20Show%20full%20website%20address%20

[uispace]

stopImmediatePropagation

stopPropagation will prevent any parent handlers from being executed stopImmediatePropagation will prevent any parent handlers and also any other handlers from executing

https://stackoverflow.com/a/5299841

[uispace]

React NativeEvent

React's onclick is unique, if we want to access the native event of the click then we need to use e.nativeEvent.functionName()

https://stackoverflow.com/a/47528705

[uispace]

MySQL Mac

To connect run:

mysql -uroot

To start mysql:

brew services start mysql

Or, if you don't want/need a background service you can just run:

/opt/homebrew/opt/mysql/bin/mysqld_safe --datadir=/opt/homebrew/var/mysql

[uispace]

webpack blobals & eslint

Globals added in webpack config should also be added to eslint

[uispace]

crontab

minute-of-hour(0-59) hour-of-day(0-23) day-of-month(1-31) month-of-year(1-12) day-of-week(0-6 | 0 -> Sunday) /command-to-run

Use this: https://crontab-generator.org/

* -> Every value of the field

10-15 -> denoting a range

*/10 -> step value

1-59/2 -> every odd minute

[uispace]

CSS border, padding, margin

border-inline | padding-inline is left and right

border-block is top and bottom,

This also considers the case when the axis is flipped in the case of chinese, which is top to bottom now

border-inline-start => only the start while in case of rtl is right, for ltr it is left

border-inline-end => opposite of -start

[uispace]

CSS text align

While considering text align, also consider language. For example for english it is ltr, for arabic it is rtl. So instead of using text-align: left | right, use text-align: start | end.

This will take the language into consideration as well!!

[uispace]

Direction of text

direction can be set on both HTML and CSS

direction: ltr | rtl | vertical-rl | vertical-lr

[uispace]

Adjustable CSS padding