Skip to content

Instantly share code, notes, and snippets.

View asvny's full-sized avatar
🎯
Focusing

Annamalai Saravanan asvny

🎯
Focusing
View GitHub Profile
@developit
developit / example.js
Last active May 6, 2024 05:10
Preact + Web Components = <333 Demo: http://www.webpackbin.com/VJyU9wK5W
import { h, Component } from 'preact';
import Markup from 'preact-markup';
import register from './preact-custom-element';
// just a proxy component: WC -> Preact -> WC
const A = () => <x-b foo="initial foo from <x-a>" />;
// stateful component that can re-render
class B extends Component {
render(props, state) {
@iammerrick
iammerrick / PinchZoomPan.js
Last active April 22, 2024 02:54
React Pinch + Zoom + Pan
import React from 'react';
const MIN_SCALE = 1;
const MAX_SCALE = 4;
const SETTLE_RANGE = 0.001;
const ADDITIONAL_LIMIT = 0.2;
const DOUBLE_TAP_THRESHOLD = 300;
const ANIMATION_SPEED = 0.04;
const RESET_ANIMATION_SPEED = 0.08;
const INITIAL_X = 0;
webpack --display-modules | awk '{print $3$4" "$2}' | grep -v bytes | sort -n | tail -100
@droom
droom / Resource Hints
Last active September 26, 2021 00:35
Hints to the browser that might prime the pump for resources you will need. PreLoad is the only exception here, being more of an instruction than just a hint.
by Addy Osmani (@addyosmani)
https://twitter.com/addyosmani/status/743571393174872064
———
Preresolve DNS hostnames for assets
<link rel="dns-prefetch" href="https://my-site.com">
Begin a connection handshake in the background
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
/*\
title: $:/plugins/sukima/dombuilder/dombuilder.js
type: application/javascript
module-type: library
Micro DSL for DOM creation and stringification.
\*/
/**
@gaearon
gaearon / connect.js
Last active May 3, 2025 05:27
connect.js explained
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
import Ember from 'ember';
export default Ember.Component.extend({
theme: Ember.inject.service()
// ...
});
@spikebrehm
spikebrehm / Redux-resources.md
Last active September 16, 2018 14:42
Redux resources, courtesy of Dan Abramov.
@ethaizone
ethaizone / server_time_sync.js
Last active December 21, 2024 11:43
Sync server time to client browser with JS. Implement follow Network Time Protocol.
// Original from http://stackoverflow.com/questions/1638337/the-best-way-to-synchronize-client-side-javascript-clock-with-server-date
// Improved by community and @jskowron
// Synchronize client-side clock with server time using an approximation of NTP
let serverTimeOffset = null;
function getServerTime(callback) {
if (serverTimeOffset === null) {
const scripts = document.getElementsByTagName("script");
const currentScriptURL = scripts[scripts.length - 1].src;
@WebReflection
WebReflection / dom-class-zero.js
Last active February 18, 2016 19:16
A simplified way to register Custom Elements
var DOMClass = (function (O,o) {
/*! (C) Andrea Giammarchi */
var
create = O.create,
css = create(null),
dP = O.defineProperty,
gOPD = O.getOwnPropertyDescriptor,
gOPN = O.getOwnPropertyNames,