Xah Web Dev Blog

highlights

• JS: Xah Functions

• User Interface Design

• CSS: Comment Syntax

• CSS: Selector Tutorial
• CSS: Selector: Match Tag Name
• CSS: Selector: Match Attribute
• CSS: Selector: Match Root Element
• CSS: Selector: Match Parent
• CSS: Selector: Match Children
• CSS: Selector: Match Sibling
• CSS: Pseudo-Class Selectors
• CSS: Pseudo-Element Selectors
• CSS: Selector Negation
• CSS: Selector Syntax Shortcuts

• HTML: the Root Element
• CSS: Variable (Custom Property)

• CSS: Selector Classification

• CSS: Test Sibling Selector
• CSS: Test Selector Omit Tag Name

• 🆕 CSS: Selector: Match Root Element
• CSS: Selector: Match Parent
• CSS: Selector: Match Sibling
• CSS: Selector Syntax Shortcuts

• HTML: the Root Element

advanced CSS. updated.

• CSS: Selector: Match Attribute

• CSS: Reset, Default Values

• Web Domain Farm Spam

• World Multiconference on Systemics, Cybernetics and Informatics

• Internet Explorer Anime Girl

• JS: Random Array Element, Randomize Array 🚀

• HTML Tags Complete List

from 10 years ago

• Facebook Fraud, 2014

• JS: Factorial 🚀

major update

• CSS: Tabbed Menu
• Visual CSS

• CSS: Text Shadow

• JS: Function Pipe 🚀
• JS: Array How-To
• JS: Range Function for Array 🚀
• JS: Deep Copy Object or Array 🚀
• JS: Literal Expression for Map

Understand JavaScript like a mathematician.

• JS: Object Overview
• JS: thisBinding

• Chinese Font on Mac

major update

• Chinese Font on Windows

• 🆕 HTML: Language Attribute
• HTML: Meta Language Tag Obsolete

updated.

• CSS: font
• Metrically Compatible Fonts

• Chinese Font
• Chinese Font on Windows
• Chinese Font on Mac

• CSS: Length Units

updates

• JS: Property Overview
• JS: Property Key
• JavaScript: Exclamation Before Function

• Cascadia vs Consolas

• JS: Switch Statement

Now you can use Cascadia Font. Designed to replace Consolas.

• Common Web Fonts

• Google Tweaks YouTube to Make Microsoft Browser Slower (2018-12)

• CSS: Reset, Default Values

• CSS: Text Flow Multi-Column Layout

• HTML XML Entities List

minor update

• JS: Quote String
• JS: Unicode Escape Sequence

• CSS1 and CSS2 Differences

• Spam Comments of Random Person Names
• Web Spam, Scam, SEO

• Google Html5Rocks

updates.

• HTML: Button
• HTML: Input Text Field
• HTML: Password Text Field
• HTML: Textarea
• HTML: Email Field
• HTML: Input Number Field
• HTML: Radio Button
• HTML: Checkbox ☑
• HTML: Selection, Popup Menu
• HTML: Input Range Slider
• HTML: Color Picker

• JS: Change Element Content

• HTML: Ruby Tag (Chinese Character Annotation)

• Pure CSS Table

• CSS Property Names in JavaScript

• HTML: Ruby Tag (Chinese Character Annotation)

updates.

• CSS: Position Property
• CSS: Adjust Position (position:relative)
• CSS: Create Layer (position:absolute)
• CSS: Fix Element to Window (position:fixed)
• CSS: z-index
• HTML: the Root Element
• CSS: Computed Style

new version out. buy it. thanks. Buy JavaScript in Depth

• SVG: Animation

minor update and repost

• SVG: Basic Examples
• SVG: Animation
• Google and Amazon Generates Invalid HTML
• HTML Correctness and Validators
• CSS: Add CSS to HTML

• HTML: Allowed Characters in id Attribute
• HTML: Charset and Encoding

• HTML XML Entities List

• SVG: Specifying Styles

• CSS: Shrink Wrap

• JS: String Code Unit

massive updates.

• JS: Get Element by ID, Name, Class etc
• JS: Iterate HTMLCollection
• JS: Get Element Parent, Child, Sibling

• DOM: NodeList vs HTMLCollection DOM: Live Object

• JS: List, Add, Remove Class Attribute
• JS: Insert, Remove, Replace Element

• JS: What is Node, Node Type, Element
• JS: Node Type
• JS: Node Name
• JS: Node value
• DOM: textContent, innerHTML, innerText, nodeValue
• DOM: Whitespace Nodes
• DOM: History of GetElementsByClassName

• JS: Iterable Object
• JS: Interface

• HTML: Glossary

• JS: Browser Window Object
• JS: Get URL (window.location)

• JS: Symbol Tutorial

• JS: How to Use Browser Console

updates

• CSS: Media Query
• CSS: Variable (Custom Property)
• CSS: calc
• CSS: Reset, Default Values
• CSS: Dark Theme
• CSS: Prevent Right Click
• CSS: Data URI Scheme
• CSS: protocol-relative URL
• CSS: Declare Charset
• CSS: Display Table on Small Screen
• CSS: Fixed Aspect Ratio
• CSS: Add Icon to Links

old articles.

• JavaScript Books Review 2023
• Book Review: JavaScript by David Flanagan
• JavaScript, Design Patterns Approach to Computer Language Tutorials

• CSS: Reset, Default Values

updates

• CSS Color Syntax
• CSS Color Names
• 🆕 CSS: RGB Color Syntax
• CSS: HSL Color
• CSS: Opacity
• CSS: Linear Gradient
• CSS: Radial Gradient

more updates

• 🆕 JS: Literal Expression for Map
• 🆕 JS: Map Substract 🚀
• 🆕 JS: Map Equality 🚀
• 🆕 JS: Nested Map

• JS: Set Union, Intersection, Difference 🚀
• JS: the Set Object Tutorial
• JS: Xah Functions

• History of the JavaScript script Tag

• JS: Semicolon
• JS: HTML-Like Comment
• JS: 2015 Features
• JS: Function Declaration vs Function Expression

• JS: Spread Operator

massive update on JavaScript in past week.

• removed many console.log for short expressions.
• added section visual block for headers.
• rewrote parts of many pages, for more clarity.
• rename, moved, reorg, delete, new, for many sections or pages.

• 🆕 JS: Convert Map to Object 🚀
• 🆕 JS: Number
• 🆕 JS: Speed Comparison, Array Push vs Unshift
• 🆕 JS: String is Immutable
• 🆕 JS: String Index
• 🆕 JS: Timing, Benchmark Functions
• 🆕 JS: Speed Comparison of Increment
• 🆕 JS: Speed Comparison of Generating Array

• JS: Array.prototype.includes
• JS: 2015 Features
• JS: Object.defineProperty
• JavaScript Basics
• JS: arguments Object
• JS: thisBinding
• JS: Keyword var and Global Variable
• JS: Iterate Map Object
• JS: How Map Determines Uniqueness of Keys
• JS: Map Object
• JS: Number Object
• JS: Object Tutorial
• JS: Array Push vs Unshift, Speed Comparison
• JS: Strict Mode
• Xah JavaScript Style Guide for Functional Programers
• JS: Timing, Benchmark Functions
• JS: undefined
• JS: Property Overview

• JS: Array.prototype.includes
• JS: Array.prototype.join
• JS: Array.prototype.length
• JS: Array.prototype.some
• JS: Array.prototype.toString
• JS: Boolean.prototype
• JS: Function.prototype.constructor
• JS: Function.prototype
• JS: Infinity
• JS: Map.prototype.constructor
• JS: Map.prototype.entries
• JS: Map.prototype.size
• JS: Map.prototype[Symbol.toStringTag]
• JS: NaN
• JS: Number.parseFloat
• JS: Number.parseInt
• JS: Number.prototype
• JS: Number.prototype.toString
• JS: Object.defineProperty
• JS: Object.getOwnPropertyDescriptors
• JS: Object.getOwnPropertySymbols
• JS: Object.getPrototypeOf
• JS: Object.is
• JS: Object.isExtensible
• JS: Object.prototype.propertyIsEnumerable
• JS: Object.prototype.valueOf
• JS: Reflect.getPrototypeOf
• JS: Set.prototype.size
• JS: String.prototype.charAt
• JS: String.prototype.charCodeAt
• JS: String.prototype.codePointAt
• JS: String.prototype.concat
• JS: String.prototype.padStart
• JS: String.prototype.repeat
• JS: String.prototype.replace
• JS: String.prototype.replaceAll
• JS: Array
• JS: Array Tutorial
• JS: Array.prototype.every
• JS: Array.prototype.flat (Flatten Array)
• JS: Array.prototype
• JS: Array Object
• JS: Arrow Function
• JS: Boolean: true, false
• JS: Boolean Object
• JS: if then else
• JS: Deep Copy Object or Array 🚀
• JS: Array-Like Object to Array
• JS: Convert String, Number
• JS: Convert Decimal, Binary
• JS: Create Object with Parent X
• JS: Date Constructor
• JS: Date Object
• JS: Date.prototype
• JS: Global Functions Without Property Key "prototype"
• JS: Factorial 🚀
• JS: Get Set Prototype
• JS: for-in Loop
• JS: for-of Loop
• JS: Function Pipe 🚀
• JS: Function Object
• JS: Get URL (window.location)
• JS: isNaN
• JS: for while do Loop
• JS: Iterator Prototype
• JS: JSON
• JS: Map Filter 🚀
• JS: Map Object
• JS: Map.prototype
• JS: Swap Key Value of Map 🚀
• JS: Sort Map 🚀
• JS: Truncate Map 🚀
• JS: Map Substract 🚀
• JS: Math
• JS: Math Operators
• JS: null
• JS: Number Comparison Operators
• JS: Number Object
• JS: Object Tutorial
• JS: Object Object
• JS: Object.prototype
• JS: Property Key "prototype"
• JS: Convert Object to Map 🚀
• JS: Global parseInt
• JS: Primitive Value
• JS: Add Method to Prototype
• JS: Array Push vs Unshift, Speed Comparison
• JS: Quote String
• JS: Random Array Element, Randomize Array 🚀
• JS: Range Function for Array 🚀
• JS: Get Set Property
• JS: Reflect
• JS: RegExp.prototype
• JS: RegExp Object
• JS: Regex Replace Function Args
• JS: Swap Object Key Value 🚀
• JS: Set Object
• JS: Set.prototype
• JS: Split Array 🚀
• JS: String Code Unit
• JS: String Constructor
• JS: String Escape Sequence
• JS: String.prototype
• JS: String Operations
• JS: String Object
• JS: Count Chars in String 🚀
• JS: Switch Statement
• JS: Symbol Object
• JS: Symbol.prototype
• JS: Triple Equal Operator
• JS: typeof Class
• JS: undefined
• JS: Char to UTF-16 Encoding 🚀
• JS: Char to UTF-8 Encoding 🚀
• JS: Object Type
• JS: Floating Box Following Scroll
• SVG: Circle Arc

• Google Censorship: Image Search White Couple (2018)

• Chinese Websites Encoding survey, Year 2022

• 🆕 JS: Button to Switch to Dark Theme
• CSS: Dark Theme
• Should You Use Dark Theme

• JS: Change CSS

• HTML/CSS Case Sensitivity

minor updates

• JS: RegExp Syntax
• JS: RegExp Flag
• JS: String.prototype.matchAll

complete update

• CSS: Selector Tutorial
• CSS: Selector: Match Tag Name
• CSS: Selector: Match Attribute
• CSS: Selector: Match Parent
• CSS: Selector: Match Sibling
• CSS: Pseudo-Class Selectors
• CSS: Pseudo-Element Selectors
• CSS: Selector Syntax Shortcuts

• CSS: Pseudo Class
• CSS: Pseudo Element

misc update

• CSS: How Large is a CSS Pixel?
• CSS: Fixed Aspect Ratio

• JS: Find Window Size

interesting result.

Github started to require JavaScript

Github, started to require JavaScript, about last month. If no js, the main content no show.

• faak github, recently started to require js. and is slow.
• by the way, also faak open source faakheads. u made things this way.
• yeah move to codeberg or gitlab, until they got big and sold soul like u.
• u r a faakhead, that continuely make society this way.

JavaScript Async Functions Computation Model

a great article on the JavaScript async functions, an analysis of this computing model.

• JavaScript Books Review 2023

• HTML Basics

quite amazing, of the past 30 years, the only website that still did not require JavaScript is amazon.

• JS: RegExp Tutorial
• HTML: Definition List: dl dt dd

• Brendan Eich on Fixing JavaScript String Methods Fail on Emoji

• Twitter Card and OpenGraph

• HTML Link Problem, _blank noopener noreferrer

• Windows User Interface Design: Accidental Hide Windows

• 🆕 Deno: Read File

• JS: String.prototype.split
• JS: String Operations

• JS: Destructuring Assignment

• Font Size Survey 2023
• Font Size Problem: CSS Size vs Visual Size

• CSS: Variable (Custom Property)
• HTML: the Root Element
• CSS: Computed Style

• 2023-11-15 brave browser now has a ai chatbot called Leo.

updates

• JS: Array Tutorial
• JS: Array.prototype.slice
• JS: Array.prototype.splice
• JS: Array.prototype.flatMap
• JS: Array.prototype.copyWithin

• JS: Object Tutorial
• JS: let Declaration

• CSS: Selector: Match Tag Name

• JS: Xah Functions

• JS: Timing, Benchmark Functions

• JS: Array.prototype.fill
• JS: Array Constructor
• JS: Sparse Array

• JS: Array Tutorial
• JS: for-of Loop
• JS: Reflect.construct

• JS: Array.prototype.flat (Flatten Array)
• JS: Array.prototype.flatMap

• JS: Convert Decimal, Hexadecimal
• 🆕 JS: Convert Decimal, Binary

• JS: Number.prototype.toString

updates

• JS: Xah Functions
• JS: Swap Object Key Value 🚀
• JS: Semicolon

minor updates. added tip icon and warning icon.

• JavaScript Basics
• JS: if then else
• JS: Object Literal Expression
• JS: let Declaration
• JS: “in” Operator
• JS: for-in Loop
• JS: “delete” Operator
• JS: var Declaration 👎
• JS: var Declaration Order (Name Hoisting)
• JS: Symbol Tutorial

• JS: arguments Object
• JS: Function Declaration vs Function Expression
• JS: Strict Mode

• JS: Array.prototype.sort
• JS: Test Array Equality
• JS: Test Equality
• JS: Double Equal Operator
• JS: Difference Between window.isNaN vs Number.isNaN

• JS: typeof Operator
• JS: What is Constructor
• JS: instanceof Operator
• JS: Difference Between typeof, instanceof, constructor property

JS: Object.isExtensible
• JS: Object.preventExtensions
• JS: Object.isExtensible
• JS: Object.seal
• JS: Prevent Adding Property
• JS: Object.getOwnPropertyDescriptor
• JS: Function.prototype.apply vs Function.prototype.call

• JS: Get Set Prototype
• JS: Object.prototype.__proto__
• JS: Prototype and Inheritance
• JS: Add Method to Prototype

• JS: RegExp.prototype.exec
• JS: String.prototype.match
• JS: String.prototype.matchAll
• JS: RegExp Flag

• JS: Date Tutorial
• JS: Date.parse

• JS: Load Order, defer, async, module
• JS: Element Attribute Methods
• JS: Node value

• HTML: Nested List
• HTML: Figure Tag

• CSS: Length Units
• CSS: Reset, Default Values
• CSS: Percentage Value

• reviving this blog.
• because i find it convenient to put webdev related stuff here, e.g. JavaScript CSS HTML.

Stopping this blog. This web dev blog began in 2010-01. 〔see Xah Web Dev Blog 2010-01〕 It was split from Xah Programing Blog. Because i was dying of hunger and wanted to get peanuts from Google Ads. Now, no more. Read web dev stuff at my main programing blog.

• CSS: Dark Theme

Ok guys. Remove cache, now xah site support dark theme! Still going thru testing stage. So if u find problems, tell it. Thank you!