Tags
#php
#kotlin
#bash
#go
#sql
#rust
#typescript
#html
#java
#python
#files
#utils
#strings
#http
#concurrency
#async
#json
#arrays
#security
#types
#crypto
#database
#dates
#format
TypeScript
Template Tag for Safe HTML
Build HTML strings with a tagged template literal that auto-escapes every interpolated value. Eliminates a class of XSS bugs without pulling in a templating library.
@admin
HTML
Product Page with Schema.org Markup
Marking up a product page with the Schema.org `Product` type unlocks Google's rich snippets — price, rating, availability appear directly in search results. JSON-LD is the recommended format.
HTML
RTL (Right-to-Left) Document
Set `dir="rtl"` on the root element for languages that read right-to-left (Arabic, Hebrew, Persian). The browser flips text alignment, scroll, and form controls automatically. Use `dir="auto"` to let user-generated text decide per-block.
HTML
All Standard Input Types
HTML5 input types each have built-in validation, on-screen keyboards (mobile), and pickers. Use them — `<input type="number">` beats `<input type="text">` + JS validation every time.
HTML
HTML5 Document Boilerplate
Sensible HTML5 starting template: UTF-8 charset, responsive viewport, language attribute, semantic landmarks. Drop this in every new project before adding anything else.
HTML
Card Pattern (article + link wrapper)
The standard content card — image, title, excerpt, meta. Make the WHOLE card clickable by wrapping the title link and using `::after` to extend the hit area to the full card.
HTML
ARIA Live Region for Dynamic Announcements
Use `aria-live` on a container so screen readers announce its content changes (toast notifications, form errors, loading states). `polite` waits for a pause; `assertive` interrupts.
HTML
Radio Group with Fieldset + Legend
Always wrap radio groups (and checkboxes that share semantics) in a `<fieldset>` with a `<legend>`. Screen readers announce the legend before each option — without it, the choice is contextless.
HTML
Breadcrumb Navigation (with Schema)
A keyboard- and screen-reader-friendly breadcrumb. The `aria-label="Breadcrumb"` on `<nav>` announces the role; `aria-current="page"` marks the final segment. Add the JSON-LD for Google's rich result.
HTML
Picture Element — Art Direction
`<picture>` lets you serve DIFFERENT images at different breakpoints — not just different sizes of the same crop. Perfect for a wide desktop banner that becomes a square mobile poster.
HTML
Iframe with Sandbox + lazy loading
Embed third-party content (YouTube, Stripe, maps) safely. `sandbox` restricts what the embedded page can do. `loading="lazy"` defers offscreen iframes — huge perf win for blog posts with multiple embeds.
HTML
Details / Summary — Native Accordion
`<details>` is the built-in "click to expand" widget. Free keyboard navigation, search-engine-indexable content (open or closed), no JS needed. Style with CSS to match your design.
HTML
Navigation with aria-current
Use `<nav>` for primary navigation. Mark the currently-active link with `aria-current="page"` — screen readers will announce it, and you get a free CSS hook with `[aria-current]`.
HTML
Open Graph + Twitter Card Tags
How your page renders when shared to Facebook, LinkedIn, Slack, Discord, X. Every public page needs these — they dramatically improve click-through on shares.
HTML
Semantic Article Structure
`<article>` for self-contained content (blog post, comment, news item). Each article gets its own header, body, and (optionally) footer. Helps screen readers, RSS, and Google understand structure.
HTML
Skip-to-Main-Content Link
Keyboard users (and screen-reader users) tab through every nav link before reaching content. A skip-link as the first focusable element jumps straight to <main>. Required for WCAG 2.1 AA.
HTML
Print Stylesheet Setup
Tune the print layout: hide nav/footer, force black-on-white text, expand absolute URLs, hide images you don't want printed. Save your users from wasting paper on the page chrome.