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, UI, js
location knowledge/webdev.dz:3

export_js
content export js keyword (MDN)
parents react/quickstart
hyperlink https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
location knowledge/webdev.dz:9

slider
content slider: range input
hyperlink https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range
tags html, mdn
location knowledge/webdev.dz:13

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 audioworklet, safari
location knowledge/webdev.dz:18

textcontent_mdn
content textContent property in node
hyperlink https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
location knowledge/webdev.dz:24

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 js, mdn
location knowledge/webdev.dz:28

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.
location knowledge/webdev.dz:34

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
location knowledge/webdev.dz:43

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
location knowledge/webdev.dz:48

codepen_canvas_pixels
content small webgl example drawing pixels
hyperlink https://codepen.io/anon/pen/pgBjBy
tags webdev, webgl
location knowledge/webdev.dz:55

zod
content zod: TypeScript-first schema validation with static type inference
parents nextjs/learn_dashboard_app
hyperlink https://zod.dev/
location knowledge/webdev.dz:60

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/
location knowledge/webdev.dz:65

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/
location knowledge/webdev.dz:72

pdfmake
content Client/server side PDF printing in pure JavaScript
hyperlink http://pdfmake.org/
tags webdev, pdf
location knowledge/webdev.dz:78

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 vercel, webdev
location knowledge/webdev.dz:83

npx_create_react_app_typescript
content npx create-react-app my-app --template typescript
location knowledge/webdev.dz:90

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
location knowledge/webdev.dz:93

typescript_handbook
content The (new) typescript handbook
hyperlink https://microsoft.github.io/TypeScript-New-Handbook/everything/
tags typescript
location knowledge/webdev.dz:98

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
location knowledge/webdev.dz:103

deno
content Deno: A modern runtime for JavaScript and TypeScript.
hyperlink https://github.com/denoland/deno
location knowledge/webdev.dz:109

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
location knowledge/webdev.dz:113

digitalocean_typescript_new_project
content How to set up a new typescript project (DigitalOcean)
hyperlink https://www.digitalocean.com/community/tutorials/typescript-new-project
location knowledge/webdev.dz:120

using_pointer_events
content MDN: Using pointer events
hyperlink https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Using_Pointer_Events
location knowledge/webdev.dz:124

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
location knowledge/webdev.dz:128

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/
location knowledge/webdev.dz:133

12factor
content The 12-factor app is a methodlogy for building software-as-a-service apps.
remarks found via zulip.
hyperlink https://12factor.net/
location knowledge/webdev.dz:140

mdxjs
content MDX lets you use JSX in your markdown content.
hyperlink https://mdxjs.com/
location knowledge/webdev.dz:146

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
location knowledge/webdev.dz:150

tailwindui
content Tailwind UI components
children inter_typeface (used by tailwindui components), headlessui
hyperlink https://tailwindui.com/
location knowledge/webdev.dz:157

headlessui
parents tailwindui
hyperlink headlessui:
location knowledge/webdev.dz:161

inter_typeface
content inter typeface
parents tailwindui
hyperlink https://rsms.me/inter/
location knowledge/webdev.dz:165

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/
location knowledge/webdev.dz:171

pnpm
content A package manager that's faster and more efficient than npm or yarn.
hyperlink https://pnpm.io/
location knowledge/webdev.dz:177

clsx
content Utility for constructing class names conditionally
children clsx_github (github)
parents nextjs/learn_dashboard_app
hyperlink https://www.npmjs.com/package/clsx
location knowledge/webdev.dz:182

mockapi
content mockAPI: A third-party service that can be used to mock REST APIs
hyperlink https://mockapi.io/
location knowledge/webdev.dz:186

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/
location knowledge/webdev.dz:191

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/
location knowledge/webdev.dz:200

clsx_github
content clsx: github
parents clsx
hyperlink https://github.com/lukeed/clsx
location knowledge/webdev.dz:208

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
location knowledge/webdev.dz:214

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.
location knowledge/webdev.dz:218

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.
location knowledge/webdev.dz:228

request_api
content Request API: The Request interface of the Fetch API represents a resource request.
parents fetch_api, nextjs/route_handler
hyperlink https://developer.mozilla.org/en-US/docs/Web/API/Request
location knowledge/webdev.dz:239

response_api
content The Response API interface of the Fetch API represents the response to a request.
parents fetch_api, nextjs/route_handler
hyperlink https://developer.mozilla.org/en-US/docs/Web/API/Response
location knowledge/webdev.dz:244

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 formdata (can be sent via fetch() method), request_api, xmlhttprequest (fetch is a more powerful replacement for XMLHttpRequest), response_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.
location knowledge/webdev.dz:249

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
location knowledge/webdev.dz:261

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
location knowledge/webdev.dz:271

use_debounce
content use-debounce: react libraries for debouncing
hyperlink https://www.npmjs.com/package/use-debounce
location knowledge/webdev.dz:276

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 fetch_api, navigator, nextjs/learn_dashboard_app, xmlhttprequest
hyperlink https://developer.mozilla.org/en-US/docs/Web/API/FormData
location knowledge/webdev.dz:280

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
location knowledge/webdev.dz:293

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
location knowledge/webdev.dz:298

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
location knowledge/webdev.dz:308

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
location knowledge/webdev.dz:320

web_dev_learn_accessibility
content Learn Accessibility: An evergreen accessibility course and reference to level up your web development.
parents nextjs/learn_dashboard_app/14_improving_accessibility
hyperlink https://web.dev/learn/accessibility/
location knowledge/webdev.dz:328

eslint_plugin_jsx_a11y
content eslint-plugin-jsx-a11y: Static AST checker for accessibility rules on JSX elements.
parents nextjs/learn_dashboard_app/14_improving_accessibility
hyperlink https://www.npmjs.com/package/eslint-plugin-jsx-a11y
location knowledge/webdev.dz:333

aria
content ARIA: Accessible Rich Internet Applications, is a set of roles and attributes that define ways to make web content and web applications more accessible to those with disabilites.
children aria/attributes, aria/roles, html/aria_describedby, html/aria_live
hyperlink https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
location knowledge/webdev.dz:352

authentication
content Authentication: is in general the process of proving that some fact is genuine. More specifically, in web security, it is the process of verifying the claimed identity of some entity, such as a user.
children RFC4949_internet_security_glossary (for more elaboration on authentication and similar terms), authorization (authorization happens after authentication)
parents nextjs/learn_dashboard_app/15_adding_authentication
hyperlink https://developer.mozilla.org/en-US/docs/Glossary/Authentication
flashcard (front) What is authentication (in the context of the web)?
flashcard (back) Authentication is the process of verifying the claimed identity of some entity, such as a suer
location knowledge/webdev.dz:389

RFC4949_internet_security_glossary
content RFC 4949: Internet Security Glossary
parents authentication
hyperlink https://datatracker.ietf.org/doc/html/rfc4949
location knowledge/webdev.dz:399

authorization
content Authorization: Once a user's identity is confirmed, authorization decides what parts of the application they are allowed to use.
parents authentication, nextjs/learn_dashboard_app/15_adding_authentication
location knowledge/webdev.dz:405

oauth
content OAuth: Open Authorization (OAuth) is an open standard for access delegation, commonly used as a way for internet users to grant websites or applications access to their information on other websites but without giving them their passwords.
children nextjs/nextauthjs/credentials_provider (oauth generally recommended over credentials provider)
parents cryptography/bcrypt
hyperlink https://en.wikipedia.org/wiki/OAuth
location knowledge/webdev.dz:412

html
content HTML: hyper-text markup language
children html/elements, vscode/autogen_templates (Useful for generating boilerplate HTML5 code)
hyperlink https://developer.mozilla.org/en-US/docs/Web/HTML
location knowledge/webdev.dz:448