Skip to content

Instantly share code, notes, and snippets.

Avatar
🥽
In the Matrix

Nick Taylor nickytonline

🥽
In the Matrix
View GitHub Profile
@nickytonline
nickytonline / useDragAndDrop.js
Last active Aug 31, 2020
A (P)React hook for attaching drag and drop events to an element.
View useDragAndDrop.js
/**
* Hook for drag attaching drag and drop functionality to a DOM element
*
* @param {object} props
* @param {Function} props.onDragOver The handler that runs when the dragover event is fired.
* @param {Function} props.onDragExit The handler that runs when the dragexit/dragleave events are fired.
* @param {Function} props.onDrop The handler that runs when the drop event is fired.
*/
export function useDragAndDrop({ onDragOver, onDragExit, onDrop }) {
const [element, setElement] = useState(null);
@nickytonline
nickytonline / crosspost.md
Created Oct 19, 2019
DEV Moderation Canned Responses
View crosspost.md
@nickytonline
nickytonline / mini-expect.js
Last active Jul 20, 2019
Recreated a portion of the expect library
View mini-expect.js
function expect(actual) {
function prettyJSON(objectToSerialize) {
return JSON.stringify(objectToSerialize, null, '\t')
}
return {
toBe(expected) {
if (actual === expected) {
console.log('✅ Pass')
} else {
@nickytonline
nickytonline / object-entries-polyfills.js
Last active Jul 15, 2019
Having fun recreating some lodash functionality and polyfills
View object-entries-polyfills.js
// Just having fun creating some polyfills.
/**
* A polyfill for Object.prototype.entries.
*
* @returns {[string, any][]} An array of tuples where each tuple is a key/value pair.
*/
Object.prototype.entries = Object.prototype.entries || function() {
const obj = this;
@nickytonline
nickytonline / createElement.js
Last active Oct 4, 2020
A Handy DOM element creation function.
View createElement.js
// Inspired from Sam Thorogood's article, https://dev.to/chromiumdev/beyond-appendchild-better-convenience-methods-for-html-55n4
function createElement(nodeName, props) {
const { style = {}, ...propsNoStyle } = props;
const element = Object.assign(document.createElement(nodeName), propsNoStyle);
Object.entries(style).forEach(([key, value]) => { element.style[key] = value; });
return element;
}
@nickytonline
nickytonline / paste.js
Last active Nov 6, 2020
Simulate a paste event in Cypress
View paste.js
/**
* Simulates a paste event.
*
* @param pasteOptions Set of options for a simulated paste event.
* @param pasteOptions.destinationSelector Selector representing the DOM element that the paste event should be dispatched to.
* @param pasteOptions.pastePayload Simulated data that is on the clipboard.
* @param pasteOptions.pasteFormat The format of the simulated paste payload. Default value is 'text'.
*/
function paste({ destinationSelector, pastePayload, pasteType = 'text' }) {
// https://developer.mozilla.org/en-US/docs/Web/API/Element/paste_event
@nickytonline
nickytonline / webpack.config.js
Last active Dec 2, 2019
@babel/preset-env not transpiling to ES5
View webpack.config.js
module.exports = {
entry: {
acme_co_es5: [
"@babel/polyfill",
"./public/javascripts/webpack_entry_points/acme_co.js"
]
},
resolve: {
extensions: [".js", ".jsx"]
},
@nickytonline
nickytonline / snippets.js
Created Sep 16, 2018
Chrome Extension Snippets
View snippets.js
function getActiveTab() {
return new Promise((resolve, reject) => {
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
const activeTab = tabs.find(t => t.active);
resolve(activeTab);
});
});
}
@nickytonline
nickytonline / preview-head.html
Created Jul 11, 2018
Grid Points Background for Storybook
View preview-head.html
<style>
body {
background-image: linear-gradient(transparent 0px, transparent 1px, rgb(255, 255, 255) 1px, rgb(255, 255, 255) 20px), linear-gradient(to right, rgb(54, 69, 79) 0px, rgb(54, 69, 79) 1px, rgb(255, 255, 255) 1px, rgb(255, 255, 255) 20px);
background-position: 1.1875rem;
background-size: 1.25rem 1.25rem;
background-attachment: fixed;
}
</style>
View my-mac-setup.sh
#!/bin/sh
# More Mac setup at https://mac.iamdeveloper.com
# Log file
timestamp=$(date +%s)
logFile="./my-mac-setup-$timestamp.log"
# if true is passed in, things will reinstall
reinstall=$1
You can’t perform that action at this time.