webdev
dz / webdevSubgraphs
Node Tree
- digitalocean_typescript_new_project
- mswjs
- single_responsibility_principle
- prisma
- SPA
- navigator
- nanostores
- zod
- conform
- mdn_header_element
- touch_action
- wiredjs
- pdfmake
- urlsearchparams
- stately_docs
- npx_create_react_app_typescript
- vercel_files_serverless
- typescript_handbook
- mdxjs
- use_debounce
- slug
- using_pointer_events
- bun_js
- clsx
- rxjs
- export_js
- 12factor
- tailwindui
- fetch_api
- textcontent_mdn
- pnpm
- deno
- class_selectors
- core_web_values_affect_seo
- radix_ui
- audioworklet_safari
- codepen_canvas_pixels
- spread_syntax
- drizzle
- progressive_enhancement
- mockapi
- slider
Nodes
wiredjs | |
content | A set of common UI elements with a hand-drawn, sketchy look. |
hyperlink | https://wiredjs.com/ |
tags | webdev, js, UI |
export_js | |
content | export js keyword (MDN) |
parents | react/quickstart |
hyperlink | https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export |
slider | |
content | slider: range input |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range |
tags | mdn, html |
audioworklet_safari | |
content | implementing audioworklet in safari |
remarks | maybe this can fix issues on iphone? |
hyperlink | https://stackoverflow.com/questions/73164697/implementing-an-audioworklet-in-safari |
tags | safari, audioworklet |
textcontent_mdn | |
content | textContent property in node |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent |
spread_syntax | |
content | Spread Syntax in JS |
children | react/tic_tac_toe (discovered spread syntax from react's tic tac toe tutorial) |
remarks | Initially discovered while doing React tic-tac-toe tutorial |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax |
tags | mdn, js |
single_responsibility_principle | |
content | Single Responsibility Principle: A module should be responsible to one, and only one, actor. |
parents | react/thinking_in_react |
remarks | found while reading the "Thinking In React" page |
hyperlink | https://en.wikipedia.org/wiki/Single-responsibility_principle |
flashcard (front) | what is the Single Responsibility principle? |
flashcard (back) | The single-responsibility principle (SRP) is a computer programming principle that states that a module should be responsible to one, and only one, actor. |
class_selectors | |
content | Class Selectors |
parents | react/thinking_in_react |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors |
tags | css, mdn |
nanostores | |
content | Nanostores: A tiny (286 bytes) state manager for React/RN/Preact/Vue/Svelte with many atomic tree-shakable stores |
parents | codestudy/rusty_bikes/client_README |
hyperlink | https://github.com/nanostores/nanostores |
tags | webdev |
codepen_canvas_pixels | |
content | small webgl example drawing pixels |
hyperlink | https://codepen.io/anon/pen/pgBjBy |
tags | webgl, webdev |
zod | |
content | zod: TypeScript-first schema validation with static type inference |
parents | nextjs/learn_dashboard_app |
hyperlink | https://zod.dev/ |
conform | |
content | conform: Conform is a type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js. |
hyperlink | https://conform.guide/ |
mswjs | |
content | mswjs: API mocking library that allows you to write client-agnostic mocks and reuse them across any frameworks, tools, and environments. |
hyperlink | https://mswjs.io/ |
pdfmake | |
content | Client/server side PDF printing in pure JavaScript |
hyperlink | http://pdfmake.org/ |
tags | webdev, pdf |
vercel_files_serverless | |
content | This guide will explain how to read files from Vercel Functions, both when used with frameworks like Next.js or standalone on Vercel. |
hyperlink | https://vercel.com/guides/how-can-i-use-files-in-serverless-functions |
tags | webdev, vercel |
npx_create_react_app_typescript | |
content | npx create-react-app my-app --template typescript |
mdn_header_element | |
content | The header element (MDN) |
parents | codestudy/hello_ts_react/header_element |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header |
tags | html, mdn |
typescript_handbook | |
content | The (new) typescript handbook |
hyperlink | https://microsoft.github.io/TypeScript-New-Handbook/everything/ |
tags | typescript |
slug | |
content | slug MDN |
remarks | came up while looking at keys from a LC75 data dump |
hyperlink | https://developer.mozilla.org/en-US/docs/Glossary/Slug |
tags | mdn |
deno | |
content | Deno: A modern runtime for JavaScript and TypeScript. |
hyperlink | https://github.com/denoland/deno |
stately_docs | |
content | Stately documentation |
remarks | DF mentioned this when we were talking about state machines, thinks the concepts are solid. |
hyperlink | https://stately.ai/docs |
digitalocean_typescript_new_project | |
content | How to set up a new typescript project (DigitalOcean) |
hyperlink | https://www.digitalocean.com/community/tutorials/typescript-new-project |
using_pointer_events | |
content | MDN: Using pointer events |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Using_Pointer_Events |
touch_action | |
content | touch action |
remarks | had to set this to be none for it to work in chrome |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action |
bun_js | |
content | Bun: A fast all-in-one javascript runtime. |
remarks | This was mentioned by 3 different people in the span of a few days at RC. So, I thought it'd be worth checking out. Also, parts of it are written in Zig. |
hyperlink | https://bun.sh/ |
12factor | |
content | The 12-factor app is a methodlogy for building software-as-a-service apps. |
remarks | found via zulip. |
hyperlink | https://12factor.net/ |
mdxjs | |
content | MDX lets you use JSX in your markdown content. |
hyperlink | https://mdxjs.com/ |
rxjs | |
content | RxJS is a library for composing asynchronous and event-based programs by using observable sequences. |
remarks | DF was trying this out in his granular synth app, mostly as way to manipulate events. |
hyperlink | https://rxjs.dev/guide/observable |
tailwindui | |
content | Tailwind UI components |
children | headlessui, inter_typeface (used by tailwindui components) |
hyperlink | https://tailwindui.com/ |
headlessui | |
parents | tailwindui |
hyperlink | headlessui: |
inter_typeface | |
content | inter typeface |
parents | tailwindui |
hyperlink | https://rsms.me/inter/ |
radix_ui | |
content | Radix UI: open source component library optimized for fast development, easy maintenance, an accessibility. |
remarks | Found on a job posting, also seen elsewhere I think. |
hyperlink | https://www.radix-ui.com/ |
pnpm | |
content | A package manager that's faster and more efficient than npm or yarn. |
hyperlink | https://pnpm.io/ |
clsx | |
content | Utility for constructing class names conditionally |
children | clsx_github (github) |
parents | nextjs/learn_dashboard_app |
hyperlink | https://www.npmjs.com/package/clsx |
mockapi | |
content | mockAPI: A third-party service that can be used to mock REST APIs |
hyperlink | https://mockapi.io/ |
prisma | |
content | Prisma: a modern database toolkit and object-relational model (ORM) that simplifies database operations by providing typesafe database access, schema management, and query building for Node.js and TypeScript applications. In typescript, It will automatically create types based on your schema. |
hyperlink | https://www.prisma.io/ |
drizzle | |
content | Drizzle is a lightweight, type-safe TypeScript ORM that emphasizes SQL-like syntax and zero abstractions, offering direct database operations with minimal overhead and maximum performance for Node.js applications. |
hyperlink | https://orm.drizzle.team/ |
clsx_github | |
content | clsx: github |
parents | clsx |
hyperlink | https://github.com/lukeed/clsx |
core_web_values_affect_seo | |
content | How Core Web Values affect SEO |
children | cumulative_layout_shift (nextjs linked to this article with this term) |
hyperlink | https://vercel.com/blog/how-core-web-vitals-affect-seo |
cumulative_layout_shift | |
content | Cumulative Layout Shift: Metric used by Google to evaluate the performance and user experience of a website. |
parents | core_web_values_affect_seo |
flashcard (front) | What is Cumulative Layout Shift? |
flashcard (back) | Cumulative layout shift is a metric used by google to evalulate the performance and user experience of a website. |
SPA | |
content | SPA: single-page application, loads only a single web document, then updates the body content of that single document via JavaScript APIs such as Fetch when different content is to be shown. |
hyperlink | https://developer.mozilla.org/en-US/docs/Glossary/SPA |
flashcard (front) | What is a SPA? |
flashcard (back) | A Single-page page application loads a single web document, then updates the document via Javascript when different content is to be shown. |
request_api | |
content | Request API: The Request interface of the Fetch API represents a resource request. |
parents | nextjs/route_handler, fetch_api |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/API/Request |
response_api | |
content | The Response API interface of the Fetch API represents the response to a request. |
parents | nextjs/route_handler, fetch_api |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/API/Response |
fetch_api | |
content | Fetch API: an interface for fetching resources (including across the network). It is a more powerful and flexible replacement for XMLHttpRequest. |
children | xmlhttprequest (fetch is a more powerful replacement for XMLHttpRequest), response_api, formdata (can be sent via fetch() method), request_api |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API |
flashcard (front) | What is the fetch API? |
flashcard (back) | The Fetch API is an interface for fetching resources (including across the network). It is a more powerful and flexible replacement for XMLHttpRequest. |
xmlhttprequest | |
content | XMLHttpRequest (XHR) objects are used to interact with servers. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing. |
children | formdata (can be sent via XMLHttpRequest.send() method) |
parents | fetch_api |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest |
urlsearchparams | |
content | URLSearchParams: interface that provides utility methods to work with the query string of a URL |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams |
use_debounce | |
content | use-debounce: react libraries for debouncing |
hyperlink | https://www.npmjs.com/package/use-debounce |
formdata | |
content | FormData interface: provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the fetch(), XMLHttpRequest.send(), or navigator.sendBeacon() methods. |
parents | nextjs/learn_dashboard_app, fetch_api, xmlhttprequest, navigator |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/API/FormData |
navigator | |
content | Navigator interface: represents state and identify of the user agent. |
children | formdata (can be sent via the navigator.sendBeacon() method) |
hyperlink | https://developer.mozilla.org/en-US/docs/Web/API/Navigator |
progressive_enhancement | |
content | Progressive Enhancement: a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern browsers that can run all the required code. |
children | progressive_enhancement_wikipedia (further elaboration and context. The writing in the,definition is also a bit more mellow. More of a "semantic web",bias perhaps?), progressive_enhancement_uk |
remarks | "best possible experience only to users of the most modern browsers" is a very corporate tech sentence. |
hyperlink | https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement |
progressive_enhancement_wikipedia | |
content | Progressive Enhancement (wikipedia): a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, whilst users with additional browsers or features or faster internet access receive the enhanced version instead. |
parents | progressive_enhancement |
progressive_enhancement_uk | |
content | Building a robust frontend using progresive enhancement |
parents | progressive_enhancement |
remarks | Recommended by alcinnz, where they link when discussing the concept |
hyperlink | https://en.wikipedia.org/wiki/Progressive_enhancement |