Skip to content

Instantly share code, notes, and snippets.

View wesbos's full-sized avatar
🔥
SLAYING BUGS

Wes Bos wesbos

🔥
SLAYING BUGS
32.8k followers · 31 following
View GitHub Profile
@wesbos
wesbos / detect.ts
Created May 31, 2022 19:06
import { codes } from './database';
const app = document.querySelector('.app') as HTMLDivElement;
const videoEl = app.querySelector('video');
const canvasEl = app.querySelector('canvas');
const labelsEl = app.querySelector('.labels') as HTMLDivElement;
const ctx = canvasEl.getContext('2d');
interface Window {
BarcodeDetector: any;
@wesbos
wesbos / object-spread.js
Created June 13, 2017 18:09
const countryCodes = {
US: 'United States',
CA: 'Canada',
NG: 'Nigeria',
GB: 'United Kingdom',
};
const sales = [
{ code: 'US', count: 233 },
@wesbos
wesbos / node-google-speech-to-text.js
Created September 30, 2020 14:47
Syntax Speech to Text
import speech from '@google-cloud/speech';
import fs from 'fs';
import dotenv from 'dotenv';
dotenv.config();
async function main() {
const client = new speech.SpeechClient();
const config = {
@wesbos
wesbos / sarcastic.js
Created November 8, 2019 17:08
/* eslint-disable */
String.prototype.sarcastic = function() {
return [...this]
.map((char, i) => char[`to${i % 2 ? 'Upper' : 'Lower'}Case`]())
.join('');
};
@wesbos
wesbos / fake.js
Created September 16, 2020 15:26
fake-your-git-history.js
let currentColor = '#ebedf0';
let clicking = false;
const boxes = document.querySelectorAll('.js-calendar-graph-svg rect');
const graph = document.querySelector('.js-calendar-graph-svg');
// code for switching the current color
function handleColorChange(e) {
const el = e.currentTarget;
currentColor = el.style['background-color'];
console.log(currentColor)
@wesbos
wesbos / service-worker.js
Created March 24, 2022 18:26
Nuke a service worker from inside a service worker
// put this in a file where your service worker used to live, like yourdomain.com/service-worker.js. You can find out this path in the SW dev tools of your browser
self.addEventListener('install', (e) => {
console.log('[Service Worker] Installing Service Worker ...', e);
self.skipWaiting();
});
self.addEventListener('activate', (e) => {
console.log('[ServiceWorker] Activate');
self.registration
@wesbos
wesbos / wow.html
Created June 23, 2016 19:10
CSS spring() transition timing function
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Spring</title>
</head>
<body>
<img src="https://logo.clearbit.com/wesbos.com" class="person person1">
<img src="https://logo.clearbit.com/paulirish.com" class="person person2">
<img src="https://logo.clearbit.com/addyosmani.com" class="person person3">
@wesbos
wesbos / recruiters.js
Created May 17, 2016 14:42
[...document.querySelectorAll('.invite-card')].forEach(card => {
const headline = card.querySelector('.headline').textContent;
const accept = card.querySelector('.bt-invite-accept');
const decline = card.querySelector('.bt-invite-decline');
const name = card.querySelector('.name').textContent;
if(headline.match(/recruit/gi)) {
console.log(`Nah. ${name} looks a little fishy to me. 🚷🚷🚷`);
decline.click();
} else {
@wesbos
wesbos / you-cant-spell-without.ts
Created January 11, 2022 15:39
interface Without {
without(withoutWord: string): boolean;
}
// 1. Easiest / the way I'd do it
function youCantSpell(word: string): Without {
return {
without(withoutWord: string) {
return word.includes(withoutWord);
}
@wesbos
wesbos / css-variables.js
Last active August 11, 2021 14:23
Test for CSS Variables
function testCSSVariables() {
var color = 'rgb(255, 198, 0)';
var el = document.createElement('span');
el.style.setProperty('--color', color);
el.style.setProperty('background', 'var(--color)');
document.body.appendChild(el);
var styles = getComputedStyle(el);
var doesSupport = styles.backgroundColor === color;