Skip to content

Instantly share code, notes, and snippets.

@mistercoffee66
mistercoffee66 / webpack.config.js
Created October 26, 2023 20:22
Set webpack dev server to use next avail open port in a range
const net = require('net');
const getOpenPort = async (port, maxPort) => {
const isPortAvail = (currentPort) => new Promise((resolve, reject) => {
const tester = net.createServer()
.once('error', (err) => (err.code === 'EADDRINUSE' ? resolve(false) : reject(err)))
.once('listening', () => tester.once('close', () => resolve(true)).close())
.listen(currentPort);
});
@mistercoffee66
mistercoffee66 / 1. ResponsiveContext.jsx
Last active December 2, 2019 19:22
example of using React context hook for responsive design
import React, { createContext, useState } from 'react';
import PropTypes from 'prop-types';
const mq = 'screen and (max-width: 671px)';
const ResponsiveContext = createContext();
const ResponsiveContextProvider = ({ children }) => {
const [isMobile, setIsMobile] = useState(window.matchMedia(mq).matches);
matchMedia(mq).addEventListener('change', e => setIsMobile(e.matches));
@mistercoffee66
mistercoffee66 / index.js
Last active October 7, 2019 19:49
async/await error scenarios and variations
/* eslint no-console: 0 */
/* eslint no-unused-vars: 0 */
const https = require('https');
const goodUrl = 'https://jsonplaceholder.typicode.com/users/1';
const badUrl = 'https://jsonplaceholder.typicode.com/foo';
const badDomain = 'https://no.such.url';
const externalCall = (url, t = 0) => new Promise((resolve, reject) => {
setTimeout(() => {
@mistercoffee66
mistercoffee66 / isTruthy.js
Created May 6, 2019 15:17
opinionated test for truthy
const isTruthy = (expression) => {
if (typeOf expression === 'number') return true // 0 returns true
if (Array.isArray(expression) && expression.length < 1) return false // empty array returns false
if typeOf expression === 'Object' && Object.keys(expression).length < 1) return false // empty object returns false
return !!expression
}
@mistercoffee66
mistercoffee66 / iterable.js
Last active May 6, 2019 15:05
ES6 iterable Map example
<script>
const els = document.querySelectorAll('li')
const iterables = new Map([
['myObject', {
appetizer: 'Soup',
entree: 'Mahi Mahi',
dessert: 'Pie!'
}],
['myArray', [
@mistercoffee66
mistercoffee66 / trim-anything.js
Last active November 2, 2020 22:43
trim anything
export const trimAnything = (str, trimChar, opts = { start: false, end: true }) => {
if (str.length > 1 || opts.allowEmpty) {
let pattern;
if (opts.start && !opts.end) {
pattern = `^\\${trimChar}+`;
} else if (!opts.start && opts.end) {
pattern = `\\${trimChar}+$`;
} else {
pattern = `^\\${trimChar}+|\\${trimChar}+$`;
}
@mistercoffee66
mistercoffee66 / gist:7a44837abef5317c5a87508ec3d39662
Last active May 9, 2019 18:02
Webpack 4 + Express + Hot module reloading without middleware
//*********server.js*********
const express = require('express')
const path = require('path')
const app = express()
const port = process.env.PORT || 3000
@mistercoffee66
mistercoffee66 / .eslintrc
Last active October 10, 2017 19:53
airbnb eslint config all in one file (no "extends") for use in JetBrains IDEs code-style settings (see https://blog.jetbrains.com/webstorm/2017/06/webstorm-2017-2-eap-172-3198/ )
{
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module",
"ecmaFeatures": {
"experimentalObjectRestSpread": true
}
},
"rules": {
"func-names": [
@mistercoffee66
mistercoffee66 / polyfills.js
Created September 25, 2017 21:04
frequently used polyfills
// Element.matches()
if (!Element.prototype.matches)
Element.prototype.matches =
Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector
// NodeList.forEach()
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = function (callback, thisArg) {
@mistercoffee66
mistercoffee66 / mobileUtils.js
Created September 8, 2017 19:17
quick n dirty user agent tests
const isMobile = () =>{
return ( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/BlackBerry/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
navigator.userAgent.match(/IEMobile/i) )
}