Skip to content

Instantly share code, notes, and snippets.

View frankszll's full-sized avatar

frankkyll frankszll

0 followers · 3 following
View GitHub Profile
@frankszll
frankszll / promise.js
Created February 14, 2024 01:41 — forked from softwaredoug/promise.js
Simple Javascript Promise Implementation (see this blog post: http://www.opensourceconnections.com/2014/02/16/a-simple-promise-implementation-in-about-20-lines-of-javascript/)
var Promise = function(wrappedFn, wrappedThis) {
this.then = function(wrappedFn, wrappedThis) {
this.next = new Promise(wrappedFn, wrappedThis);
return this.next;
};
this.run = function() {
wrappedFn.promise = this;
wrappedFn.apply(wrappedThis);
};
@frankszll
frankszll / useScroll.js
Created March 2, 2021 15:27 — forked from joshuacerbito/useScroll.js
Custom React hook for listening to scroll events
/**
* useScroll React custom hook
* Usage:
* const { scrollX, scrollY, scrollDirection } = useScroll();
*/
import { useState, useEffect } from "react";
export function useScroll() {
const [lastScrollTop, setLastScrollTop] = useState(0);
@frankszll
frankszll / index.html
Created February 10, 2021 16:26 — forked from gaearon/index.html
Add React in One Minute
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
@frankszll
frankszll / basic_router.jsx
Created February 10, 2021 14:33 — forked from siakaramalegos/basic_router.jsx
Basic example of React Router: BrowserRouter, Link, Route, and Switch
// BrowserRouter is the router implementation for HTML5 browsers (vs Native).
// Link is your replacement for anchor tags.
// Route is the conditionally shown component based on matching a path to a URL.
// Switch returns only the first matching route rather than all matching routes.
import {
BrowserRouter as Router,
Link,
Route,
Switch,
} from 'react-router-dom';
@frankszll
frankszll / htmlentity.js
Created September 13, 2020 21:32 — forked from CatTail/htmlentity.js
Javascript: encode(decode) html text into html entity
// encode(decode) html text into html entity
var decodeHtmlEntity = function(str) {
return str.replace(/&#(\d+);/g, function(match, dec) {
return String.fromCharCode(dec);
});
};
var encodeHtmlEntity = function(str) {
var buf = [];
for (var i=str.length-1;i>=0;i--) {
@frankszll
frankszll / css-breakpoint-mixins.scss
Created March 13, 2020 21:08 — forked from davidgilbertson/css-breakpoint-mixins.scss
@mixin for-phone-only {
@media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
@media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
@media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
@frankszll
frankszll / connect.js
Created February 23, 2020 03:50 — forked from gaearon/connect.js
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 (