Categories
JavaScript

Get first word of a string

regular expression split() substr() https://stackoverflow.com/questions/18558417/get-first-word-of-string/18558427

Categories
css

Disable a link

Scenario: disable button for next step in checkout when number of articles in cart exceeding limitation, the button for paypal is actually a link element.

Categories
css

transition-timing-function

Ease (default): accelerate sharply – decelerate linear: no speed change ease-in: accelerate smoothly ease-out: decelerate smoothly ease-in-out: accelerate smoothly – decelerate smoothly steps( n, <jumpterm>): Staircase functions enable animation to jump between the specific number of frames in a non-continuous way. Easing Function cubic-bezier Value Starting Speed Middle Speed Ending Speed linear cubic-bezier(0.0, 0.0, 1.0, 1.0) […]

Categories
JavaScript Vue.js

Vue.js Directives

click-outside https://stackoverflow.com/a/42389266 Bonus: add tabindex attribute to enable element to be focused https://stackoverflow.com/a/53956904

Categories
css

Prevent parent scrolling

 overscroll-behavior auto – Default. Scrolls that originate on the element may propagate to ancestor elements. contain – prevents scroll chaining. Scrolls do not propagate to ancestors but local effects within the node are shown. For example, the overscroll glow effect on Android or the rubberbanding effect on iOS which notifies the user when they’ve hit a […]

Categories
JavaScript

Node Selectors

HTMLCollection The HTMLCollection interface represents a generic collection (array-like object similar to arguments) of elements in document order and offers methods and properties for selecting from the list. An HTMLCollection is live (getElement* calls return collections of references), it is automatically updated when the underlying document is changed. https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection HTMLCollections are not as array-like as […]

Categories
JavaScript Vue.js

Measure function execution time

Background: Need to call a button click function in the child component from parent. Two methods: Call method in the child component Trigger click event on the button of the child element Want to compare performance of these two methods. https://stackoverflow.com/questions/313893/how-to-measure-time-taken-by-a-function-to-execute

Categories
JavaScript

Array

Remove duplicate values https://stackoverflow.com/a/9229821 Get the last item https://stackoverflow.com/questions/3216013/get-the-last-item-in-an-array https://stackoverflow.com/questions/9050345/selecting-last-element-in-javascript-array Toggle an element PS: only removes the first instance of the value https://stackoverflow.com/questions/17153238/how-to-toggle-an-element-in-array-using-javascript Check existence of an element tests whether at least one element in the array passes the test implemented by the provided function Scenario: To check if an element contains at least one of […]

Categories
css JavaScript

Element class

Element.classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList Class start with selector [class^=”pre-“] Only check the first item in classList

Categories
JavaScript

Data attribute

Set attribute Get attribute Delete attribute