Skip to content

Instantly share code, notes, and snippets.

View jh3y's full-sized avatar
🔨
Crafting

Jhey Tompkins jh3y

🔨
Crafting
View GitHub Profile
@jh3y
jh3y / footer.jade
Created September 29, 2014 20:45
Jade mixin for github stats footer on project page
@jh3y
jh3y / gulpfile.js
Last active August 15, 2019 14:07
gulpfile using gulp 4's series/parallel features
import gulp from 'gulp'
const compileMarkup = () => { // COMPILE MARKUP }
const compileScript = () => { // COMPILE SCRIPT }
const compileStyle = () => { // COMPILE STYLE }
const watchMarkup = () => { // WATCH MARKUP }
const watchScript = () => { // WATCH SCRIPT }
const watchStyle = () => { // WATCH STYLE }
@jh3y
jh3y / shelf.jsx
Created March 31, 2016 22:01
React Shelf component for displaying GitHub repos for given user
class Shelf extends React.Component {
componentDidMount () {
this.intervals = [];
}
componentWillUnmount () {
this.intervals.map(clearInterval);
}
setInterval () {
this.intervals.push(setInterval.apply(null, arguments));
}
@jh3y
jh3y / serve.js
Last active August 19, 2018 19:04
serve.js
const browsersync = require('browser-sync'),
vf = require('vinyl-file'),
vss = require('vinyl-source-stream'),
vb = require('vinyl-buffer');
const start = () => {
const server = browsersync.create();
server.init({
baseDir: 'public/'
});
@jh3y
jh3y / carousel.css
Last active October 5, 2016 14:40
Pure CSS carousel exploration
@jh3y
jh3y / webpack.config.babel.js
Last active September 22, 2016 22:59
Basic webpack configuration
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const path = require('path');
const IS_DIST = (process.argv.indexOf('--dist') !== -1) ? true : false;
const config = {
devServer: {
@jh3y
jh3y / getCursorXY.js
Last active February 26, 2023 23:44
get text cursor position
/**
* returns x, y coordinates for absolute positioning of a span within a given text input
* at a given selection point
* @param {object} input - the input element to obtain coordinates for
* @param {number} selectionPoint - the selection point for the input
*/
const getCursorXY = (input, selectionPoint) => {
const {
offsetLeft: inputX,
offsetTop: inputY,
@jh3y
jh3y / showPositionMarker.js
Last active November 29, 2022 07:16
show text cursor position marker
/**
* shows a position marker that highlights where the cursor is
* @param {object} e - the input or click event that has been fired
*/
const showPositionMarker = e => {
// grab the input element
const { currentTarget: input } = e
// create a function that will handle clicking off of the input and hide the marker
const processClick = evt => {
if (e !== evt && evt.target !== e.target) {
@jh3y
jh3y / bakeACake.js
Last active August 21, 2020 20:43
Baking a cake with async + await
const PROB = 0.2
const grabIngredient = ingredient => () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > PROB) {
resolve(ingredient)
} else {
reject(`Sorry, we've got no ${ingredient}`)
}
}, Math.random() * 1000)
@jh3y
jh3y / focussed-twitter.js
Created July 25, 2019 00:59
Bookmarklet for "Focussed Twitter" 🐦
// Create a new bookmark in your browsers' Bookmark Manager pointing at the following script:
javascript:(function(){let a;const b=new CSSStyleSheet;b.insertRule("header, [data-testid=\"sidebarColumn\"] { transition: opacity .5s ease; }"),b.insertRule(".fade-noise header, .fade-noise [data-testid=\"sidebarColumn\"] { opacity: 0.005; }"),document.adoptedStyleSheets=[b];const c=()=>{document.body.classList.add("fade-noise"),a&&clearTimeout(a),a=setTimeout(()=>{document.body.classList.remove("fade-noise")},2500)};window.addEventListener("scroll",c)})();
// NOTE:: You can modify the behavior by updating the values in the injected CSS
// 1. transition time for opacity (0.5s default)
// 2. opacity of non-focussed items (0.05 default)
// 3. time it takes for non-focussed items to return to full opacity (2500ms default)