Skip to content

Instantly share code, notes, and snippets.

View swyxio's full-sized avatar
🎯
Focusing

swyx.io swyxio

🎯
Focusing
View GitHub Profile
@swyxio
swyxio / amplify docs requests.md
Last active June 5, 2020 12:30
amplify docs requests
@swyxio
swyxio / readme.md
Last active May 11, 2022 07:58
notes on how to video tutorial like a pro - https://www.youtube.com/watch?v=9lPjY-JGZDY

Notes for gregg pollack's https://www.youtube.com/watch?v=9lPjY-JGZDY

Tools: AUDIO > Video. Use a good mic. Film yourself w/ natural light & good backdrop when explaining ideas. Use Screenflow, high res monitor (for zooming). Hire a film editor. Keynote/powerpoint. Use Animations! Get everything captioned!

Instructional Design:

  • Describe the problem first, dont just teach syntax.
  • Give Learning Objectives.
  • Show them what you're going to build, what they need to know
  • teach with visuals where needed
  • Show more than one example
@swyxio
swyxio / readme.md
Last active January 16, 2022 10:36
svelte society day talks and resources -
// // with thanks
// https://dev.to/emreloper/react-router-v6-in-two-minutes-2i96
// https://github.com/ReactTraining/react-router/blob/dev/docs/installation/getting-started.md
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9d29adedf662de685356f711951ef8b9e8342865/types/react-router/index.d.ts#L1
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9d29adedf662de685356f711951ef8b9e8342865/types/react-router-dom/index.d.ts#L1
declare module "react-router-dom" {
import * as React from 'react';
/**
@swyxio
swyxio / Tailwindcssunreset.scss
Last active February 14, 2024 01:19
Tailwind CSS Un-Reset - un-reset Tailwind's Preflight CSS Reset so that autogenerated HTML looks consistent with the rest of your Tailwind site. - https://www.swyx.io/writing/tailwind-unreset
.unreset {
a {
@apply text-blue-700 underline;
}
p {
@apply my-4;
}
blockquote,
figure {
@swyxio
swyxio / chatscroller.jsx
Last active November 15, 2020 21:55
Handy Scroll window manager component for building a Slack-like Chat experience - when you want your chat window to autoscroll down when new messages appear, BUT not while you're scrolling up. Also useful for feedlike or log display components. from ryan florence workshop chat example (course at https://courses.reacttraining.com/courses/517181/…
function ChatScroller(props) {
const ref = useRef()
const shouldScrollRef = useRef(true)
useEffect(()=> {
if (shouldScrollRef.current) {
const node = ref.current
node.scrollTop = node.scrollheight
}
})
const handleScroll = () => {
@swyxio
swyxio / walk.js
Last active March 20, 2020 14:39
recursive crawl to get a list of filepaths
const fs = require('fs');
const path = require('path');
const { promisify } = require('util');
const readDir = promisify(fs.readdir);
// https://gist.github.com/kethinov/6658166
var walk = async function(dir, filelist) {
var files = await readDir(dir);
filelist = filelist || [];
await Promise.all(
@swyxio
swyxio / potato.js
Created March 9, 2020 00:07
scrape twitter follows
const fetch = require('node-fetch');
const cheerio = require('cheerio');
const fs = require('fs');
(async function() {
const res = await fetch(
// 'https://publish.twitter.com/oembed?url=https://twitter.com/levelsio/status/818085334319656960?lang=en'
'https://twitter.com/swyx'
)
// .then((x) => x.json())
.then((x) => x.text());
@swyxio
swyxio / react-router-dom-v6.d.ts
Last active October 4, 2022 00:36
react router dom v6 types - i have not tested this in all cases, nor have i ensured this covers the full api, - this should just be a nice drop in single .d.ts file that covers basic usecases detailed in https://dev.to/emreloper/react-router-v6-in-two-minutes-2i96, including inlining the necessary types for history and react-router
// // with thanks
// https://dev.to/emreloper/react-router-v6-in-two-minutes-2i96
// https://github.com/ReactTraining/react-router/blob/dev/docs/installation/getting-started.md
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9d29adedf662de685356f711951ef8b9e8342865/types/react-router/index.d.ts#L1
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9d29adedf662de685356f711951ef8b9e8342865/types/react-router-dom/index.d.ts#L1
// // release notes
// https://github.com/ReactTraining/react-router/releases/tag/v6.0.0-alpha.3
declare module "react-router-dom" {
@swyxio
swyxio / react-query.d.ts
Last active March 3, 2021 16:39
react query fixed working types - its not updated for v1 so i fixed locally
// Type definitions for react-query 0.3
// Project: https://github.com/tannerlinsley/react-query
// Definitions by: Lukasz Fiszer <https://github.com/lukaszfiszer>
// Jace Hensley <https://github.com/jacehensley>
// Matteo Frana <https://github.com/matteofrana>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
import { ComponentType } from 'react';
// overloaded useQuery function with pagination