A repo with some test cases about web in general, with purpose to study.

run docker:

docker build -t cypress-study .


docker run --rm --name cypress-study -v ${PWD}:/app -it cypress-study /bin/bash

run tests:

npm install

npm run test:browser

npm run server
npm test:noBrowser

main source: https://developer.mozilla.org/ and https://javascript.info/

Subjects Javascript

classes:

• this - JavaScript | MDN
• Classes - javascript.info
• Method definitions
• getter
• setter
• Public class fields
• this | MDN
• new - JavaScript | MDN
• instanceof - JavaScript | MDN

functions:

• Functions - JavaScript | MDN
• Function.prototype.bind() - JavaScript | MDN
• Function: prototype - JavaScript | MDN
• Function.prototype[@@hasInstance]
• Advanced working with functions javascript.info
  • Recursion and stack
  • Rest parameters and spread syntax
  • Variable scope, closure
  • The old "var"
  • Global object
  • Function object, NFE
  • The "new Function" syntax
  • Scheduling: setTimeout and setInterval
  • Decorators and forwarding, call/apply
  • Function binding
  • Arrow functions revisited
• The old "var"
• yield - JavaScript | MDN
• Generators

inherit

• new.target - JavaScript | MDN
• void operator - JavaScript | MDN
• Prototypes, inheritance
• Object.prototype.isPrototypeOf() - JavaScript | MDN
• Inheritance and the prototype chain - JavaScript | MDN
• Reflect.construct() - JavaScript | MDN

symbols

• Symbol type
• Symbol - JavaScript | MDN
• Symbol.replace - JavaScript | MDN
• Symbol.species - JavaScript | MDN
• Symbol() constructor - JavaScript | MDN
• Symbol.for() - JavaScript | MDN
• Symbol.keyFor() - JavaScript | MDN
• Symbol.toPrimitive - JavaScript | MDN
• Symbol.unscopables - JavaScript | MDN
• Iteration protocols - JavaScript | MDN
• Iterables
• Async iteration and generators

objects:

• Object - JavaScript | MDN
  • Object.prototype.valueOf() - JavaScript | MDN
  • Object.prototype.toString() - JavaScript | MDN
  • Object.isFrozen() - JavaScript | MDN
  • Object.seal() - JavaScript | MDN
  • Object.isSealed() - JavaScript | MDN
  • Object.preventExtensions() - JavaScript | MDN
  • Object.groupBy() - JavaScript | MDN
  • Object.prototype.constructor - JavaScript | MDN
  • Object.getPrototypeOf() - JavaScript | MDN
  • Object.setPrototypeOf() - JavaScript | MDN
  • Object.is() - JavaScript | MDN
  • Object.prototype.hasOwnProperty() - JavaScript | MDN
  • Object.hasOwn() - JavaScript | MDN
  • Object.fromEntries() - JavaScript | MDN
  • Object.keys() - JavaScript | MDN
  • Object.getOwnPropertySymbols() - JavaScript | MDN
  • Object.getOwnPropertyNames() - JavaScript | MDN
  • Object.getOwnPropertyDescriptors() - JavaScript | MDN
  • Object.entries() - JavaScript | MDN
  • Enumerability and ownership of properties - JavaScript | MDN
  • Object.defineProperty() - JavaScript | MDN
  • Object.defineProperties() - JavaScript | MDN
  • Object.is() - JavaScript | MDN
• Reference Type - javascript.info

arrays

• Array - JavaScript | MDN
• Array.prototype.copyWithin() - JavaScript | MDN
• Array.prototype.toSpliced() - JavaScript | MDN
• Array.prototype.fill() - JavaScript | MDN
• Array.prototype.lastIndexOf() - JavaScript | MDN
• Array.prototype.reduceRight() - JavaScript | MDN
• Array.fromAsync() - JavaScript | MDN
• Array.prototype.concat() - JavaScript | MDN
• Array.of() - JavaScript | MDN
• Array.prototype.with() - JavaScript | MDN

numbers

• Number - JavaScript | MDN
• Number.EPSILON - JavaScript | MDN
• NaN - JavaScript | MDN
• Number.parseFloat() - JavaScript | MDN
• Number.parseInt() - JavaScript | MDN
• Number.prototype.toFixed() - JavaScript | MDN
• Math.trunc() - JavaScript | MDN

operators

• Expressions and operators - JavaScript | MDN
• Destructuring assignment - JavaScript | MDN
• How to convert binary to decimal in JavaScript
• Default parameters - JavaScript | MDN
• Unsigned right shift (>>>) - JavaScript | MDN
• Right shift (>>) - JavaScript | MDN
• Bitwise OR (|) - JavaScript | MDN
• Bitwise XOR (^) - JavaScript | MDN
• Bitwise AND (&) - JavaScript | MDN
• Bitwise NOT (~) - JavaScript | MDN
• Using Bitwise operators in JavaScript | DigitalOcean
• Equality comparisons and sameness - JavaScript | MDN
• Greater than or equal (>=) - JavaScript | MDN
• Less than (<) - JavaScript | MDN
• Greater than (>) - JavaScript | MDN
• typeof - JavaScript | MDN
• Operator precedence - JavaScript | MDN
• Equality (==) - JavaScript | MDN
• Unary plus (+) - JavaScript | MDN
• Spread syntax (...) - JavaScript | MDN

strings

• String - JavaScript | MDN
• String.prototype.repeat() - JavaScript | MDN
• Intl.Collator - JavaScript | MDN
• encodeURIComponent() - JavaScript | MDN
• encodeURI() - JavaScript | MDN
• String.raw() - JavaScript | MDN
• String.prototype.localeCompare() - JavaScript | MDN
• Template literals (Template strings) - JavaScript | MDN
• String.prototype.normalize() - JavaScript | MDN

booleans

• Boolean - JavaScript | MDN

dates

• Date - JavaScript | MDN
  • getTime()
  • setTime()
  • Date.now()
  • Date.parse()
  • Date.UTC()
  • getTimezoneOffset()
  • toISOString()

set and map

• Set - JavaScript | MDN
  • A.union(B)
  • A.difference(B)
  • A.isSupersetOf(B)
  • A.isSubsetOf(B)
  • A.symmetricDifference(B)
  • A.intersection(B)
  • A.isDisjointFrom(B)
• Map and Set
• WeakMap and WeakSet
• WeakMap - JavaScript | MDN

modules

• Modules - Tutorial
  • Export and Import
  • Dynamic imports
  • Modules, introduction

promises

• Promises, async/await
  • Error handling with promises
  • Promise
  • Introduction: callbacks
  • Promises chaining
  • Promise API
  • Promisification
  • Microtasks
  • Async/await

binary data

• Binary data, files
  • TextDecoder and TextEncoder
  • Blob
  • ArrayBuffer, binary arrays
  • File and FileReader
• JavaScript typed arrays - JavaScript | MDN
• DataView.prototype.getUint16() - JavaScript | MDN
• DataView - JavaScript | MDN
• ArrayBuffer - JavaScript | MDN
• File: File() constructor - Web APIs | MDN
• TypedArray - JavaScript | MDN
• Typed arrays - Binary data in the browser | Articles | web.dev

regex

• Regular expressions - JavaScript | MDN
  • exec()
  • search()
  • split()
  • match()
  • test()
  • matchAll()
  • replaceAll()
  • replace()
  • RegExp.prototype.unicode
  • RegExp
  • Assertions
  • Groups and backreferences
  • Quantifiers
  • Character classes
  • Unicode character class escape: \p{...}, \P{...} - JavaScript | MDN
  • Character class: [...], [^...] - JavaScript | MDN
  • RegExp.prototype.sticky - JavaScript | MDN
  • RegExp: lastIndex - JavaScript | MDN
  • RegExp.prototype.global - JavaScript | MDN
• Catastrophic backtracking

streams

• Streams API - Web APIs | MDN
  • Streams API concepts
  • Using readable streams
  • Using readable byte streams
  • Using writable streams
  • ReadableStreamBYOBRequest: respond() method - Web APIs | MDN
  • ReadableByteStreamController: byobRequest property - Web APIs | MDN
  • TransformStream: TransformStream() constructor - Web APIs | MDN
  • ReadableStreamDefaultReader: releaseLock() method - Web APIs | MDN
  • ReadableStreamDefaultReader: cancel() method - Web APIs | MDN
  • ReadableStreamDefaultReader: read() method - Web APIs | MDN
  • ReadableStream: tee() method - Web APIs | MDN
  • TextEncoderStream: TextEncoderStream() constructor - Web APIs | MDN
  • ReadableStream: pipeThrough() method - Web APIs | MDN
  • ReadableStreamDefaultController: enqueue() method - Web APIs | MDN
  • Response: Response() constructor - Web APIs | MDN
  • ReadableStream() constructor - Web APIs | MDN
  • ReadableByteStreamController - Web APIs | MDN

others

• JavaScript data types and data structures - JavaScript | MDN
• Standard built-in objects - JavaScript | MDN
• Shallow copy - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
• Deep copy - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
• Garbage collection
• Proxy and Reflect

Time total MDN: 771m

Time total javascript.info: 282m

Total all: 1053m

Subjects Web

history of web

• JavaScript - MDN Web Docs Glossary: Definitions of Web-related terms
• A HISTÓRIA COMPLETA: JAVASCRIPT
• The history of the web (Chrome University 2019)
• How browsers work!

dom

• Document javascript.info
  • Browser environment, specs
  • DOM tree
  • Walking the DOM
  • Searching: getElement*, querySelector*
  • Node properties: type, tag and contents
  • Attributes and properties
  • Modifying the document
  • Styles and classes
  • Element size and scrolling
  • Window sizes and scrolling
  • Coordinates
• Selection and Range

events

• Introduction to Events
  • Introduction to browser events
  • Bubbling and capturing
  • Event delegation
  • Browser default actions
  • Dispatching custom events UI Events
  • Mouse events
  • Moving the mouse: mouseover/out, mouseenter/leave
  • Pointer events
  • Keyboard: keydown and keyup
  • Scrolling

html elements

• Form controls
  • Focusing: focus/blur
  • Events: change, input, cut, copy, paste
  • Forms: event and method submit
  • Form properties and methods
• Document and resource loading
  • Page: DOMContentLoaded, load, beforeunload, unload
  • Scripts: async, defer
  • Resource loading: onload and onerror
• Web Components - Web APIs | MDN
  • HTMLElement: attachInternals() method - Web APIs | MDN
  • :state()
  • ::part
  • :host()
  • slotchange
  • :host-context()
• The Story of Web Components
• How To Build Sortable Drag & Drop With Vanilla Javascript
• HTML Drag and Drop API
  • Recommended Drag Types - Web APIs | MDN
  • File drag and drop - Web APIs | MDN
• How was this not in the browser before???
• Using the Popover API - Web APIs | MDN
  • HTMLElement.popover
  • HTMLButtonElement.popoverTargetAction
  • HTMLInputElement.popoverTargetElement
  • popovertarget
  • @starting-style
  • popovertargetaction
  • ::backdrop
  • popover
  • HTMLInputElement.popoverTargetAction
  • HTMLButtonElement.popoverTargetElement
  • transition-behavior
• Solving Clickjacking - HTTP 203

network request

• Network requests
  • Fetch
  • FormData
  • Fetch: Download progress
  • Fetch: Abort
  • Fetch: Cross-Origin Requests
  • Fetch API
  • URL objects
  • XMLHttpRequest
  • Resumable file upload
  • Long polling
  • WebSocket
  • Server Sent Events
  • Streaming requests with fetch

css

• Kevin Powell Css
• Learn CSS Grid the easy way
• Learn how to use Media queries & Container queries
• Are you using the right CSS units?
• Avoid These 5 Awful CSS Mistakes
• min-content, max-content, fit-content - intrinsic sizing with CSS
• Selectors, pseudo elements, etc
• Inheritance, cascade, box model, specificity
• No more specificity issues?! (or all new ones 🤔) - A look at CSS Cascade Layers
• The secret to mastering CSS layouts
• Unfamiliar CSS patterns that improve on the classics
• Incredible scroll-based animations with CSS-only
• Avoiding layout shift by putting the CSS in charge - HTTP 203
• CSS building blocks - Learn web development | MDN
• Cascade layers
• Backgrounds and borders
• Handling different text directions
• Overflowing content
• Images, media, and form elements
• Debugging CSS

canvas

• Canvas
  • HTML5 Canvas Tutorial for Complete Beginners
  • Drawing On HTML5 Canvas for Complete Beginners
  • Animating HTML5 Canvas for Complete Beginners
  • Interacting with HTML5 Canvas for Complete Beginners How to Code: Collision Detection How to Code: Collision Detection Part II Create Effect Cursor Like Spider Man Using Canvas HTML5 And Javascript Collision detection canvas js Canvas - Images and Image Data - Episode 4 @supports - CSS: Cascading Style Sheets | MDN

svg

• SVG Tutorial
  • Why would you code an image?
  • How to Build a Christmas Tree with SVG
  • How to Make a Gingerbread Figure with SVG
  • How to Build a House with SVG
  • How to Draw Basic Paths with SVG
  • How to use the transform property of SVG elements
  • How to Draw a Clock with SVG and JavaScript
  • SVG + JavaScript tutorial: How to Code an Animated Watch
  • How to reuse image elements with SVG
  • How to Draw a Forest with SVG
  • How to Animate an SVG with CSS
  • How to Draw Quadratic Bézier Curves with SVG
  • How to Draw Cubic Bézier Curves with SVG
  • How to Draw a Bell with SVG
  • How to Draw an Arc with SVG
  • Paths - SVG: Scalable Vector Graphics | MDN
  • How to Draw a Bear with SVG
  • How to Use Gradients with SVG
  • How to Add Animation on Hover of an SVG element
  • How to Inline SVG in CSS
  • How to Draw Text Along a Path with SVG
  • How to Animate Along a Path with SVG
  • How to use clip-path with SVG
  • How to Add Interaction to SVG elements with JavaScript
  • How to Generate an SVG Diagram from JavaScript
  • How to Break Down an SVG Image into Multiple Components

animations

• Animating with the Web Animations API
  • Animating with the Web Animations API - Part 1: Overview
  • Animating with the Web Animations API - Part 2: Animating the Street
  • Animating with the Web Animations API - Part 3: Animating the Scooter
  • Animating with the Web Animations API - Part 4: Animating the Background
  • Animating with the Web Animations API - Part 5: Animating the Foreground Using the Web Animations API - Web APIs | MDN
  • Animation.pause()
  • Animation.play()
  • Element.animate()
  • Animation.reverse()
  • Animation.finish()
  • Document.getAnimations
  • Animation.cancel()
  • animation-timing-function - CSS: Cascading Style Sheets | MDN
  • animation-fill-mode - CSS: Cascading Style Sheets | MDN
  • animation-composition - CSS: Cascading Style Sheets | MDN
  • animation-timeline - CSS: Cascading Style Sheets | MDN
  • animation-range - CSS: Cascading Style Sheets | MDN

service worker

• Understanding Service Workers
  • Service Workers - Registration, LifeCycle, Events, and Dev Tools
  • Service Workers - The Cache API
  • Service Workers - waitUntil, skipWaiting, and claim methods
  • Service Workers - How to Integrate Caches in the Worker
  • Service Workers - The Storage API
  • Service Workers - Controlling Every Fetch Call
  • Service Workers - When Fetch Goes Wrong
  • Service Workers - Messaging between Tabs and Service Workers
  • Service Workers Simplified with Caching Strategies
  • Custom Service Worker Redirects 12
• Using Web Workers - Web APIs | MDN
• The main thread is overworked & underpaid (Chrome Dev Summit)
• Cache - Web APIs | MDN
  • Cache.add(request)
  • Cache.put(request, response)
  • Cache.match(request, options)
  • Cache.addAll(requests)
  • CacheStorage.open()
  • Cache.matchAll(request, options)
  • Cache.keys(request, options)
  • Cache.delete(request, options)
• Introducing Background Fetch | Blog | Chrome for Developers
• Background Synchronization API
• How to periodically synchronize data in the background | Web apps patterns

web auth

• Create a passkey for passwordless logins | Articles | web.dev

• Web Authentication API - Web APIs | MDN

  • navigator.credentials.get()
  • navigator.credentials.create()
  • PublicKeyCredential
  • AuthenticatorAssertionResponse
  • AuthenticatorResponse

• Debugging memory leaks - HTTP 203

• Web Security - HTTP203

media source

• MediaSource - Web APIs | MDN

  • MediaSource.activeSourceBuffers
  • MediaSource.readyState
  • MediaSource.duration
  • HTMLMediaElement.srcObject
  • MediaSource.handle
  • MediaSource.sourceBuffers
  • MediaSource.endOfStream()
    • MediaSource.endOfStream()
  • MediaSource.isTypeSupported()
  • MediaSource.addSourceBuffer()
  • MediaSource.setLiveSeekableRange()
  • MediaSource.clearLiveSeekableRange()
  • MediaSource.removeSourceBuffer()

• You Don't Need a Dependency - Clipboard API

file system

• File System API - Web APIs | MDN
  • Window.showSaveFilePicker()
  • StorageManager.getDirectory()
  • flush()
  • window.showOpenFilePicker()
  • FileSystemDirectoryHandle
  • FileSystemSyncAccessHandle
  • FileSystemSyncAccessHandle
  • FileSystemHandle
  • write()
  • FileSystemWritableFileStream
  • FileSystemWritableFileStream
  • DataTransferItem.getAsFileSystemHandle()
  • DataTransferItem.getAsFileSystemHandle()
  • FileSystemFileHandle
  • window.showDirectoryPicker()

media devices

• MediaDevices: getUserMedia() method - Web APIs | MDN

full screen api

• Fullscreen API - Web APIs | MDN
  • Element.requestFullscreen()
  • Document.fullscreenElement
  • Document.exitFullscreen()
  • ShadowRoot.fullscreenElement
  • Document.fullscreenEnabled
  • fullscreenerror
  • fullscreenchange
• EditContext API - Web APIs | MDN

edit context api

• EditContext
• TextFormat

window management api

• Window Management API - Web APIs | MDN
  • Window.getScreenDetails()
  • ScreenDetails
  • Window.screen.isExtended
  • ScreenDetailed
  • Using the Window Management API

crypto

• Crypto - Web APIs | MDN
  • Crypto.randomUUID()
  • RandomSource

picture in picture

• Picture-in-Picture API - Web APIs | MDN
  • Document.pictureInPictureElement
  • PictureInPictureWindow
  • Document.exitPictureInPicture()
  • HTMLVideoElement.disablePictureInPicture
  • HTMLVideoElement.requestPictureInPicture()
  • Document.pictureInPictureEnabled
  • onresize
  • enterpictureinpicture
  • leavepictureinpicture
  • ShadowRoot.pictureInPictureElement

screen wake API

• Screen Wake Lock API - Web APIs | MDN
  • Navigator.wakelock
  • WakeLockSentinel
  • Permissions-Policy: screen-wake-lock
  • WakeLockSentinel.release()
  • navigator.wakeLock.request()

Total all: 1896m