Skip to content

Instantly share code, notes, and snippets.

@razwan
razwan / on-scroll-raf.js
Created June 14, 2022 17:33
onScrollRAF
export const onScrollRAF = ( callback ) => {
let scrollY = window.pageYOffset;
let lastScrollY = -1;
let frameRendered = false;
window.addEventListener( 'scroll', () => {
scrollY = window.pageYOffset;
frameRendered = false;
} );
index.js?ver=2e2b78de4a8a9e8f1ec023c58f617ba6:17 Uncaught TypeError: Cannot read property 'my_block_meta' of undefined
    at index.js?ver=2e2b78de4a8a9e8f1ec023c58f617ba6:17
    at Array.reduce (<anonymous>)
    at index.js?ver=2e2b78de4a8a9e8f1ec023c58f617ba6:17
    at mountMemo (react-dom.8b3dda97.js:15807)
    at Object.useMemo (react-dom.8b3dda97.js:16029)
    at useMemo (react.eef5f5a3.js:1680)
    at index.js?ver=2e2b78de4a8a9e8f1ec023c58f617ba6:17
    at WithMetaAttributeSource((Component)) (index.js?ver=2e2b78de4a8a9e8f1ec023c58f617ba6:17)
<?php
/**
* Plugin Name: Gutenberg Test
* Description: Gutenberg Test
* Version: 0.0.0
*/
function gutenberg_test_register_meta() {
register_meta( 'post', 'my_block_meta', array(
( function( blocks, element ) {
var el = element.createElement,
registerBlockType = blocks.registerBlockType;
registerBlockType( 'gutenberg-test/block', {
title: 'Gutenberg test block',
icon: 'megaphone',
category: 'widgets',
@razwan
razwan / scroll-window-to-bottom.js
Created September 30, 2019 07:43
Scroll to bottom with easings
function linear(t) { return t };
function easeInQuad(t) { return t*t };
function easeOutQuad(t) { return t*(2-t) };
function easeInOutQuad(t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t };
function easeInCubic(t) { return t*t*t };
function easeOutCubic(t) { return (--t)*t*t+1 };
function easeInOutCubic(t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 };
function easeInQuart(t) { return t*t*t*t };
function easeOutQuart(t) { return 1-(--t)*t*t*t };
function easeInOutQuart(t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t };
@razwan
razwan / _media.scss
Created April 6, 2018 13:38
Media query sass mixin
$breakpoints: (
xsmall: 30em, // ~ 480px
small: 42.5em, // ~ 680px
pad: 50em, // ~ 800px
lap: 62.5em, // ~ 1000px
desk: 80em // ~ 1280px
) !default;
@mixin above($bpname) {
$breakpoint: map-get($breakpoints, $bpname);
@razwan
razwan / _baseline-spacing.scss
Last active November 10, 2018 18:28
SCSS mixin used to achieve consistent spacing between different typographic elements
$baseline-unit: 12px !default;
$baseline-debug: false !default;
@mixin baseline($baseline-font-size: 16px, $baseline-line-height: 1.25, $cap-height-ratio: 0.68, $margin-bottom: 3rem) {
$baseline-distance: ($baseline-line-height - $cap-height-ratio) / 2;
// set the proper font-size and line-height to size the element in multiples of baseline units
font-size: ($baseline-font-size / $baseline-unit) * 1rem;
line-height: $baseline-line-height;
@razwan
razwan / module.js
Last active August 8, 2016 12:06
JavaScript Revealing Module Design Pattern
;var Module = (function(undefined) {
var privateVariable = '';
function privateMethod() {
console.log('did this');
}
function exposedMethod() {
privateMethod();
}
@razwan
razwan / jquery.parallax.js
Last active August 4, 2016 06:28
jQuery Parallax Plugin
// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;(function ($, window, document, undefined) {
var windowHeight = $(window).height(),
lastKnownScrollY;
$(window).on('resize', function(e) {
windowHeight = $(window).height();
@razwan
razwan / jquery.plugin.js
Created August 2, 2016 14:27
jQuery Plugin Pattern
// the semi-colon before the function invocation is a safety
// net against concatenated scripts and/or other plugins
// that are not closed properly.
;(function ($, window, document, undefined) {
function PluginName(element, options) {
this.element = element;
// jQuery has an extend method that merges the
// contents of two or more objects, storing the