Skip to content

Instantly share code, notes, and snippets.

Majid Valipour majido

Block or report user

Report or block majido

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@majido
majido / scroll-related-effects.md
Created Oct 28, 2019
Interesting scroll related libraries
View scroll-related-effects.md
@majido
majido / gerrit-to-makrdown.js
Last active Nov 18, 2019
Gerrit CL to Markdown
View gerrit-to-makrdown.js
// Small bookmarklet to pring CLs from gerrit in Markdown format.
// Used and tested on https://chromium-review.googlesource.com
// To make this a bookmarklet put the content below into a
// bookmark's link field.
javascript:(function() {
'use strict';
const cls = getCLs();
const desc = Array.prototype.map.call(cls, format);
@majido
majido / detect-scroll-snap-stop.js
Created May 6, 2019
Reliable feature detection for scroll-snap-stop
View detect-scroll-snap-stop.js
// Chrome inadvertantly shipped scroll-snap-stop in Chrome 69 but the feature was implemented in Chrome v75.
// This means that the normal css feature detection CSS.supports('scroll-snap-stop: always)' does not work
// in Chrome between v69 - v75.
// Below is an alternate way of feature detecting scroll-snap-stop that uses a temporary hidden scroller.
const scroller = document.createElement('div');
scroller.style = "opacity:1; position:relative; width: 40px; height: 40px; overflow: scroll; scroll-snap-type: x mandatory;";
const snap1 = document.createElement('div');
snap1.style="margin-left: 0px; width: 1px; height: 1px; scroll-snap-align: start; background-color: blue;"
@majido
majido / 0-element-based-API.idl
Last active Nov 15, 2018
Event Delegation API ideas
View 0-element-based-API.idl
// Element delegates to worker/worklet
interface EventDelegate {};
interface EventTarget {
void addEventDelegate(DOMString type?, EventDelegate delegate, EventDelegateOptions options?);
void removeEventDelegate(DOMString type?, EventDelegate delegate);
};
dictionary EventDelegateOptions {
boolean preventDefault = false;
@majido
majido / jank-bookmarklet.js
Last active Aug 28, 2018
A bookmarklet to add custom amount of jank to main thread. Crafted for those who 💜 jank!
View jank-bookmarklet.js
javascript:(function(){
var meter = `
<label style="position:fixed; z-index:10000; top: 0; left: 50%; transform: translateX(-50%); background-color: pink; padding: 5px;">
Main thread jank (0-500ms): <input id="jankmeter" type="range" min=0 max=500 value=50>
</label>
`;
const d = document.createElement('jank');
d.innerHTML = meter;
document.body.appendChild(d);
@majido
majido / overflow-propagation-using-scrollcustomiaztion.js
Created May 16, 2018
Implementing a declarative scroll propagation control on top of scroll customization
View overflow-propagation-using-scrollcustomiaztion.js
class OverflowPropagationElement extends HTMLElement {
createdCallback() {
// See design doc for details of these experimental APIs: https://docs.google.com/document/d/1VnvAqeWFG9JFZfgG5evBqrLGDZYRE5w6G5jEDORekPY/edit
this.distributeScrollIntent = function(scrollIntent) {
if (scrollIntent.deltaY <= 0) {
if (this.getComputedValue('overflow-propagation-up') == 'normal') {
// let children scroll first and then we scroll if any delta remaining
scrollIntent.distributeToScrollChainDescendant();
this.applyScrollIntent(scrollState);
@majido
majido / scroll-snap-status.md
Last active Nov 19, 2019
Scroll Snap Status & History
View scroll-snap-status.md

A brief history of scroll snapping specification and releases by various browsers.

Summary

As of August 2018: Edge (IE) and Firefox ship the old deprecated spec, Safari and Chrome (starting from v69) ship the current CR spec.

Additional Details

|Date | Status | Specification | Model | Browsers | Features | Notes | Link|

@majido
majido / .blocks
Last active Sep 6, 2017
scroll boundary behavior demo
View .blocks
border: yes
height: 600
scrolling: yes
license: mit
@majido
majido / mininum-clock-resolution.js
Created Jul 18, 2017
Estimate minimum clock resolution
View mininum-clock-resolution.js
// Finds minimum resolution Δ given a set of samples which are known to be in the form of N*Δ.
function computeGCD(a, b) {
if (!Number.isInteger(a) || !Number.isInteger(b)) {
throw new Error('Parameters in function gcd must be integer numbers');
}
var r;
while (b != 0) {
r = a % b;
@majido
majido / aw-ideas.js
Last active Apr 19, 2017
Some ideas!
View aw-ideas.js
animationWorklet.import('twitter-header-animator.js').then( _ => {
var anim = new WorkletAnimation('twitter-header',
[document.timeline, new ScrollingTimeline(scrollingElement, {/* options for timeline */})],
{
targets : {
bar: element1,
avatar: [element2, element3],
},
timing: {
You can’t perform that action at this time.