Technical
314 articles
- A pattern for composable UI in Flask
- Async React with NextJS 13
- Reader question: useReducer or XState?
- When your brain is breaking, try Stately.ai
- Over-engineering tweet embeds with web components for fun and privacy
- useCallback is a code smell
- Your code doesn't matter
- Promise.allSettled, a wonderful tool for resilient code
- Saving time in UTC doesn't work and offsets aren't enough
- A quick lesson in writing resilient code
- A new VSCode extension makes state machines shine on a team
- Small choices can wreck your codebase
- How defensive coding leads to bloat
- How to configure Jest with TypeScript
- Anything's a sorting problem if you squint hard enough
- You don't need a big team to automate your work
- React 18 and the future of async data
- A surprising feature of JavaScript optional chaining
- Use Netlify's _redirects on Gatsby Cloud
- A better React 18 startTransition demo
- Trying out React 18 Alpha
- A fun security bug with static rendering – CodeWithSwiz #31
- Build privacy-focused blazing fast tweet embeds – CodeWithSwiz 30
- Twitter embeds without JavaScript, pt1 – #CodeWithSwiz 29
- Your serverless questions, answered
- Go full-stack in 5min with your first cloud function
- Can you automate love?
- If you can JavaScript, you can backend
- That time serverless melted my credit card
- Why serverless fits side-projects perfectly
- How a $12 AWS bill powers a $50k business
- Variants – a quick tip for better React components
- Reverse engineer a GraphQL API to automate love notes – CodeWithSwiz 24
- A TypeScript trick for reusable hooks
- React Bricks - visual blocks editor for NextJS #CodeWithSwiz 22
- The Magic Function principle
- [CodeWithSwiz 21] useAuth beta support for Firebase 🎉
- Tech interview best practice that fails in life
- [CodeWithSwiz 20] Adding Firebase support to useAuth, pt2
- [CodeWithSwiz 19] Firebase Auth support in useAuth, pt1
- SSR, SSRwR, SSG, CSR, WTFBBQ???
- Gatsby to NextJS pt1, server-side-render or server-side-generate?
- Use private libraries to cleanup your codebase
- React context without context, using XState – CodeWithSwiz 14, 15
- Swap useReducer with XState – CodeWithSwiz 13
- How to write tests for XState – CodeWithSwiz 12
- Refactoring a useReducer to XState, pt1 – CodeWithSwiz 11
- Prefetch data with React Query and NextJS – CodeWithSwiz 8, 9
- Modern backend is a JavaScript function
- Using JavaScript to commit to Github – CodeWithSwiz 7
- Why NextJS /api routes are fab – CodeWithSwiz 6
- Exploring NextJS with a headless CMS, pt4 – CodeWithSwiz
- Exploring NextJS with a custom CMS, pt3 – CodeWithSwiz
- Building a small CMS with NextJS, pt2 – CodeWithSwiz
- Your first NextJS app – CodeWithSwiz
- CodeWithSwiz: Privacy-focused embeds for YouTube, Twitter, et al
- You though computer science has no place in webdev? Here's a fun coding challenge
- How to debug unified, rehype, or remark and fix bugs in markdown processing
- When your brain is breaking, try XState
- In 2020's, what is "frontend"? 🤨
- Why react-hook-form is my new favorite form library
- Path dependence or why existing code always looks bad
- Build a new design system in a couple afternoons
- Wormhole state management
- Using scopes for elegant JAMStack permissions
- Screw web performance, just wait a little 😈
- Add granular role-based access to your JAMStack app
- Don't be weird
- The 3 types of scalability
- Why you should build a form generator
- How tests uncover hidden complexity in simple code
- The surprising performance boost from changing gif embeds
- Configuring your JAMStack app for prod vs. dev
- How you can start using GraphQL today without changing the backend
- Mocking and testing fetch requests with Jest
- Connecting Gumroad to Auth0 for paywalled JAMStack apps
- How serverless beats servers
- How GraphQL blows REST out of the water
- Famous last words: Pfft, that's easy
- A promises gotcha that will catch you out
- How I answer the door with AWS Lambda and Twilio
- Towards a Gatsby+Suspense proof-of-concept
- Sometimes your worst code is your best code
- Experimenting with the new React Concurrent mode
- Is hot dog taco?
- That time monkey patching took 2 days off my life
- REST API best practice in a GraphQL world
- Moving 13 years of Wordpress blog to Gatsby Markdown
- What happens when you push AWS credentials to GitHub
- The Big Mac index and Jest fetch testing
- useReducer + useContext for easy global state without libraries
- useAuth – the simplest way to add authentication to your React app
- Better engineer or More Effective engineer?
- A short lesson in debugging complex systems
- The day I crashed production 4 times
- The unreasonable difficulty of adding a feature to a Textarea
- A whole new level of technical decision
- How to drive React state with D3 transitions for complex animation
- A Drilldown Piechart with React and D3
- TypeScript's biggest flaw and how you can use ducks to fix it
- Is JavaScript really getting too complex?
- Getting the CSS out of rendered React components
- TypeScript for serverless lambda backends 👌
- Just for fun 👉 React vs. jQuery vs. Svelte, same 🐱 app
- Svelte takes the best of React and the best of Vue to make something awesome
- The Phoenix Project recap
- LOLCODE-to-JavaScript compiler babel macro
- The web moves fast, how do you keep up?
- comp sci ain't useless
- Build better software with The Theory of Constraints
- Finally, a practical use case for JavaScript generators!
- Serverless Chrome on AWS Lambda, the guide that works in 2019 and beyond
- Custom markdown extensions with Remark and HAST handlers
- Trying the new ResizeObserver and IntersectionObserver APIs
- BrowserStack – a less painful way to test weird browsers
- Fixing laggy UI with React.memo
- useDimensions – a React Hook to measure DOM nodes
- Learning a new field is super hard, I get it now 😅
- Why dataviz does better for your career than TODOapps
- Behind the curve ... of my bar donut chart 🤨
- JavaScript’s most popular dataviz library
- Dinosaurs, software engineers, and cholera. What do they have in common?
- An experiment to merge React and Vue
- Custom react hooks ❤️
- Async, await, catch – error handling that won't drive you crazy
- React, D3, and hooks 👉special livecode tonight 9:30pm
- Why CSS-in-JS is winning, an example
- Tooltips and state across various d3 charts in a React dashboard!
- How to set up Gatsby and Auth0 for easy authentication on your next project
- Delightful state management with hooks and Constate
- How to build a Remark plugin to supercharge your static site
- DRY is a footgun, remember to YAGNI
- How to use React Context effectively
- Logging 1,721,410 events per day with Postgres, Rails, Heroku, and a bit of JavaScript
- Tooltips ... tooltips are not so easy 🧐
- Building a React dataviz with React hooks
- Oh the things you can learn with a fun weekend hack project 🏗
- Waiting for Godot with callbacks, promises, and async
- Some life advice I learned from computer science
- Announcing D3blackbox and useD3
- Easy D3 blackbox components with React hooks
- React hooks in a nut shell 🥐
- Making a Node CLI both global and local
- The most frustrating debugging experience I've had all year
- How virtual memory saves lives, workshops, and your sanity
- Build responsive SVG layouts with react-svg-flexbox
- ReactVR/react-360 is great, but maybe not quite there yet
- Answering some common questions about React + D3 2018
- Creating the perfect rounded edge with D3 curves
- Building a filterable log viewer with Downshift and match-sorter
- Hire these interns
- Upgrading to Gatsby v2 with the help of the hivemind 👌
- Intern process part 2 – (my first) webinar, about React context
- Use ref callbacks to measure React component size
- Tiny React & D3 flamegraph tutorial
- Build an animated pure SVG dynamic height accordion with React and D3
- Towards a WebRTC mesh network with RTCDataChannel
- Learning WebRTC peer-to-peer communication, part 2 – connecting 2 browsers on different devices
- Learning WebRTC peer-to-peer communication, part 1
- Declarative D3 charts with React 16.3
- Using YouTube as a data source in Gatsbyjs
- Declarative D3 transitions with React 16.3
- Blockchain-redux becomes useful, part 1
- How our engineering team got 12x faster using these 5 lessons about integrating 3rd-party services
- Build a Chrome extension from idea to launch in an afternoon
- Silky smooth Piechart transitions with React and D3.js
- Make your things pretty with chroma-js
- Seamlessly render a Preact component in a React project
- Building an interactive DOM benchmark, preliminary results
- What I learned making my first open source React component
- Loops are the hardest
- 3 key insights that make D3.js easy to learn
- You don't want to build your own list virtualization
- Fade in lazy loaded images with React and CSS – a quick guide
- How to populate react-redux-form with dynamic default values
- How to setup Gocommerce on a new Digital Ocean droplet
- Always put side effects last
- Blockchain Redux experiment, part 2
- Advent of Code Day 24 – The A* Algorithm, I think
- Advent of Code Day 22 – Sporifica Virus
- Advent of Code Day 20 – Particle Swarm
- Advent of Code Day 19 – A Series of Tubes
- A blockchain-backed Redux clone in 105 lines of code
- Advent of Code Days 17 & 18 – Spinlocks and Interpreters
- Advent of Code Day 15 – Dueling JavaScript Generators
- Advent of Code Day 14 – Disk Fragmentation
- Advent of Code Day 13, Packet Scanners
- How to DDoS yourself with analytics –– a war story
- Livecoding 52: First impressions of Vue
- Arcane JavaScript knowledge still useful
- How to add real web push notifications to your webapp
- After a week I must begrudgingly admit VSCode is a better editor than Emacs
- Livecoding 51: I did it! My first PR to a big OSS project \o/
- My love letter to Prettier
- Livecoding Recap 50: How newbie mistakes kill the flow
- Why I won't be switching to VSCode any time soon
- That one time a simple for-loop increased conversions by 19%
- Livecoding Recap 48- Why contributing to big opensource projects is still hard
- Livecoding Recap 48: JavaScript async/await and Morty's Mindblowers
- Server-side rendering a D3 chart with React 16
- JavaScript promises are just like monads and I can explain both in less than 2 minutes
- Livecoding Recap 47: Webpack build progress indicator for Mac Touchbar
- How JavaScript linters cause bugs
- Livecoding Recap #46: 3D is hard, WebAR defeats me
- Livecoding Recap #45: Almost building a ballistic missile with React and AR.js
- How you can translate any random D3 example to React
- Livecoding Recap #44: Dipping my toes in AR.js
- The two ways to build a zoomable dataviz component with d3.zoom and React
- How to think of your business logic as data
- Livecoding recap #43: A landing page for React + D3v4
- How I reverse-engineered Hacker News
- Livecoding recap #42: HackerNews app where people are nice
- More messing with time: Deduping messages between iOS and JavaScript
- Livecoding recap #41: Towards declarative 3D scenes with React and Three.js
- A dirty Webpack trick that reduced our gzipped bundle size by 55KB
- Livecoding recap #40: react-navigation with React Native
- Exploring the AST with Babylon and Prettier
- Livecoding #39: Towards an AI that writes JavaScript
- Do you really need immutable data?
- Livecoding #38 - A faux AI that writes JavaScript
- Counting web sessions with JavaScript
- Here's why you should never implement your own caching
- Livecoding #37- Building a real life color picker
- A Fast Mutex Lamport Lock with JavaScript Promises
- Time is funny in Ruby
- The Internet is a Beautiful Place in the World's Most Exclusive Chatroom
- N-body Collision Simulation with React, D3, and MobX
- Livecoding #35 - A New Site for reactd3js.com
- Livecoding #34: A Map of Global Migrations, Part 3
- Declarative `canvas` Animation with React and Konva
- Livecoding #33: A Map of Global Migrations, Part 2
- How We Used Webpack to Reduce Our JS Footprint by 50
- A Dancing Rainbow Snake – An Example of Minimal React and D3v4 transitions
- Livecoding #32: A Map of Global Migrations, Part 1
- It ain't stupid if it works
- Livecoding #31: Wherein we learn that datasets are hard and find 2 good papers
- Yet another hard lesson about time
- Livecoding #30: Dipping my toes in React Native
- Migrating to Webpack 2: some tips and gotchas
- Animating 2048 SVG nodes in React, Preact, Inferno, Vue, Angular 2, and CycleJS – a side-by-side comparison
- Livecoding #29: Optimizing React choropleth map rendering
- Using HOCs to DRY up your code
- If the first page of The Martian was written in different type systems
- Dancing tree fractal with React
- Fun surprise: UglifyJS can't ES6
- Livecoding #28: Productizing the door-answering Slack bot, Part 1
- One awkward thing about MobX: Complex models
- Do you even need that bind?
- Livecoding #27: New React Indie Bundle page almost done
- Fractals in React
- Fast, searchable dropdown inputs with React
- I made a python script that converts SVG to React ?
- Livecoding #26: A new page for a new React Indie Bundle
- Modeling time in React
- How to structure your MobX app for the real world
- A tiny ES6 fetch() wrapper that makes your life easier
- How to waste hours of life with fetch() and a bit of brainfart
- Livecoding #25: Adding MobX to a vanilla React project
- Simple MobX-driven modals
- How to use MobX with create-react-app
- Histogram in D3v3 vs D3v4
- CSS classes don't work the way you think they work
- How to make Slack and Twilio talk to each other
- A trick to make your big dataviz load super fast
- WTF is X-Frame-Options?
- Tying place names to county names with geonames.org
- Livecoding #24: A choropleth in React.js
- Chrome's console.log is the slowest
- Livecoding #23: Slackbots and OAuth
- Backbone → React: Handling state with MobX
- Backbone → React: it's a people problem after all ?
- Backbone → React – Step 1
- Livecoding #22: A door-answering Slackbot
- Firefox is slow, Lodash is fast
- Object clone performance: preliminary results
- A puzzle in JavaScript objects
- Work on React+D3js ES6 v2 begins in earnest
- The one thing flexbox can't do
- Backbone with ES6
- How to add ESLint to your project
- I added linting to a 3-year old project. You can totally guess what happened next.
- Livecoding #21: Use Babel for libraries, not Webpack
- Slack lied to me
- MacOS filesystem's annoying little quirk
- Animated string diffing with React and D3
- Livecoding #20: You can’t extend an object
- Conway’s game of life in Google Docs
- Livecoding #19: It’s hard to package a library
- JavaScript can fetch() now and it's not THAT great
- I broke AJAX in Chrome 52 ?
- JS object optimization bug in Chrome 52
- Livecoding #18: An abstract React transition component
- Livecoding #17: Particle physics is hard
- Livecoding #16: canvas.drawImage performance is weird but magical
- Livecoding #15: Reaching the limits of canvas redraw speed
- Livecoding #14: Mostly-smooth animation up to 4,000 elements with React and canvas
- Livecoding #13: rendering React components with canvas
- Livecoding #12: towards animating 10k+ elements with React
- Using d3js transitions in React
- How to Make a Piechart using React and d3
- Animating with React, Redux, and d3
- Don't Worry; It's a Compiler Bug
- A day is not 60*60*24 seconds long
- There's a "bug" in ES6 modules
- React+Flux can do in just 137 lines what jQuery can do in 10
- Lesson learned, test your migrations on the big dataset
- React components as jQuery plugins
- Webpack lazy loading on Rails with CDN support
- How to wait for DOM elements to show up in modern browsers
- How to run JavaScript tests in Chrome on Travis
- Javascript debugging [slightly] beyond console.log
- My new favourite Javascript trick
- Checking for primes? Dumber algorithm is faster algorithm
- Project euler is a fun way to become a better geek