Category: Programming
Categories
Detect Element Visibility
There are two ways to know when an element gets visible / hidden in the screen during scrolling: Listening to the window scroll event Observing the element for visibility using Intersection Observer API Listening to the scroll Event Attach a scroll event handler to the window object, and use getBoundingClientRect() to calculate the position of […]
Categories
Clean, Maintainable CSS
CSS best practices CSS variables object-oriented CSS BEM CSS Best Practices follow a naming convention kebab case: .nav-bar camel case: .navBar Pascal case: .NavBar BEM: Block Element Modifier block__element block–modifier: indicate different versions create logical section in your stylesheet Basic styles Typography Forms etc avoid over-specific selectors avoid !important sort CSS properties take advantage of […]
Categories
Intro to Vue 2
Vue is a progressive framework for building user interface. The core library is focused on the view layer only, and is easy to integrate with other libraries or existing projects. Expression {{ }} produce or evaluate a value combine values perform conditional logic with a ternary operator run methods on data Vue is reactive: the […]
Categories
Get first word of a string
regular expression split() substr() https://stackoverflow.com/questions/18558417/get-first-word-of-string/18558427
Categories
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
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
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
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
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 […]
Yujin's Amusement Park 