webdev

webdev

dz / webdev

Subgraphs

Node Tree

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