CSS Flexbox order is a double-edged sword. It visually moves elements around, but the DOM stays exactly the same. This breaks screen readers and keyboard navigation if you aren’t careful. I built a free tool that solves this. What it does: Use cases: Privacy:100% client-side. Nothing uploaded. Try it: tools.kandz.me/flexbox-order-simulator
Prettier does not require a parser option in most cases. When it formats a file, it looks at the file’s extension and infers which parser to use. A .ts file uses the TypeScript parser. A .css file uses the CSS parser. A .md file uses the Markdown parser. The parser option exists as an override…
The .prettierignore file is the mechanism for telling Prettier which files and directories it should never touch. It uses the same syntax as .gitignore, and it exists so that prettier –write . can be run against the entire project without reformatting build artifacts, generated code, lockfiles, or vendor directories. The file is recommended in every…
JSX is not HTML, and it is not JavaScript. It is its own syntax with its own formatting rules. Prettier treats it accordingly: it wraps JSX in parentheses in return statements, it preserves double quotes for JSX attributes even when singleQuote is true for JavaScript, and it places the closing > of a multi-line tag…
The bracketSpacing option controls whether Prettier prints spaces between the curly braces of an object literal. It is a boolean with two values: true prints { foo: bar }, and false prints {foo: bar}. The default is true . The option is narrow by design: it applies to object literals and import/export specifiers, but it…
The trailingComma option controls whether Prettier prints a comma after the last item in a multi-line list. The three values are not stylistic variations on the same idea; they represent different answers to the question “which syntax is valid in the target environment?” none removes every trailing comma, es5 adds them only where ES5 allows…
A CSS Module is a CSS file whose class names are scoped to the module that imports it. The file is written like ordinary CSS, but the class names are rewritten at build time into unique identifiers. The importing JavaScript file receives an object that maps the original names to the generated ones. Two components…
Parcel treats CSS as a first-class asset type. A .css file can be imported from JavaScript, referenced from HTML, or used as a build entry point. When Parcel encounters a CSS file, it parses the stylesheet, discovers its dependencies—@import statements, url() references, and @font-face sources—and bundles the result into a single output stylesheet per entry….
An HTML file is the natural entry point for a Parcel application. Pointing Parcel at index.html tells it to parse the HTML, discover every reference to another file—scripts, stylesheets, images, links, iframes, metadata URLs—and follow each one to build the complete asset graph. The HTML is not just a file that gets copied; it is…
Differential bundling is Parcel’s mechanism for shipping two versions of the same application from one build. A modern bundle contains the source syntax, unmodified for browsers that support it. A legacy bundle contains the downleveled syntax and polyfills for browsers that do not. The browser chooses which bundle to load using the type=”module” and nomodule…