Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

swyx sw-yx

🎯
Focusing
View GitHub Profile
@sw-yx
sw-yx / stringify.ts
Created Jun 6, 2020
JSON stringify replacer (no circular deps) pretty printer
View stringify.ts
import parse5 from 'parse5'
var src = `
{#if name}
<script>
console.log('not top level')
</script>
{/if}
<ul>
{#each cats as cat}
@sw-yx
sw-yx / amplify docs requests.md
Last active Jun 5, 2020
amplify docs requests
View amplify docs requests.md
@sw-yx
sw-yx / readme.md
Last active Apr 30, 2020
notes on how to video tutorial like a pro - https://www.youtube.com/watch?v=9lPjY-JGZDY
View readme.md

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
@sw-yx
sw-yx / readme.md
Last active Dec 18, 2020
svelte society day talks and resources -
View readme.md
View react-router-dom-v6-alpha.2.d.ts
// // 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';
/**
@sw-yx
sw-yx / Tailwindcssunreset.scss
Last active Jan 13, 2021
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
View Tailwindcssunreset.scss
.unreset {
a {
@apply text-blue-700 underline;
}
p {
@apply my-4;
}
blockquote,
figure {
@sw-yx
sw-yx / chatscroller.jsx
Last active Nov 15, 2020
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/…
View chatscroller.jsx
function ChatScroller(props) {
const ref = useRef()
const shouldScrollRef = useRef(true)
useEffect(()=> {
if (shouldScrollRef.current) {
const node = ref.current
node.scrollTop = node.scrollheight
}
})
const handleScroll = () => {
@sw-yx
sw-yx / walk.js
Last active Mar 20, 2020
recursive crawl to get a list of filepaths
View walk.js
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(
@sw-yx
sw-yx / potato.js
Created Mar 9, 2020
scrape twitter follows
View potato.js
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());
@sw-yx
sw-yx / react-router-dom-v6.d.ts
Last active Apr 19, 2020
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
View react-router-dom-v6.d.ts
// // 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" {