Common Practices - denshya/frontend GitHub Wiki

Navigation/Routing

File Upload Handling

  1. File Deduplication: Compute file hashes (e.g., SHA-256) on the client side to prevent storing duplicate files.
  2. File Type Validation: Implement server-side checks to ensure only permitted file types (e.g., .jpg, .png, .pdf) are accepted, using a whitelist approach.
  3. File Size Restrictions: Set limits on file sizes to prevent denial-of-service attacks and manage server resources effectively.
  4. Unique Filenames: Generate unique filenames (e.g., using UUIDs or timestamps) to avoid overwriting existing files and prevent naming collisions.
  5. Chunked Uploads: Break large files into smaller chunks for more efficient uploads and better error recovery.
  6. Resumable Uploads: Allow users to resume uploads if interrupted, enhancing the user experience, especially for large files.
  7. Progress Indicators: Provide visual feedback (e.g., progress bars) during uploads to improve user experience.
  8. Secure Storage: Store uploaded files in secure locations, preferably outside the web root, with appropriate permissions to prevent unauthorized access.
  9. Filename Sanitization: Sanitize filenames to prevent directory traversal attacks and remove potentially dangerous characters.
  10. Content Scanning: Scan uploaded files for malware or malicious content using antivirus tools before processing.
  11. Client-Side Validation: Implement basic checks (e.g., file type and size) on the client side to provide immediate feedback, but always enforce validation on the server side.
  12. Authentication and Authorization: Restrict file upload capabilities to authenticated and authorized users to prevent unauthorized access.
  13. Logging and Monitoring: Maintain logs of file upload activities and monitor for suspicious behavior to detect and respond to potential security threats.
  14. Preventing MIME-Type Sniffing: Set the X-Content-Type-Options header to nosniff to prevent browsers from interpreting files as a different MIME type than intended.

Data Collecting

Gathering data from conventional and custom fields spread across several elements/forms.

Pagination

UI Feature allowing user to navigate between content split into pieces for convenience and data-transfer optimization.

Form Validation

Automatically checking user input against rules (e.g. required fields, email format) before submission.

Autocomplete

Suggesting and completing user input based on a list of possible values as they type.

Search & Filtering

Allowing users to query or narrow down large sets of data by keywords or criteria.

Sorting

Reordering lists or tables by one or more columns (e.g. ascending/descending dates, names).

Infinite Scrolling

Dynamically loading additional content as the user scrolls, in lieu of discrete pages.

Lazy Loading

Deferring the loading of off-screen resources (images, modules) until they’re needed to improve initial load time.

Modal Dialogs

Overlay windows that demand user interaction (confirmations, forms) before returning to main UI.

Tooltips & Popovers

Contextual hover- or click-activated overlays for brief help or extra details.

Tabs

Switchable panels that organize related content into separate views without page reloads.

Multi-step Wizards

Breaking complex workflows into sequential steps, guiding users through a process.

Notifications & Toasts

Transient messages (success, error, info) that briefly inform the user of system events.

Service & API Health Indicators

Live status badges or retry logic when backend requests fail.

File Upload

UI controls for selecting and sending files to a server, often with progress indicators.

Date/Time Picker

Interactive calendars or time-sliders for selecting dates and times in a standardized way.

Real-time Updates

Using WebSockets or SSE to push live data changes (e.g. chat messages, stock prices) to the UI.

Responsive Layout Controls

JS helpers that adjust or toggle layout components (e.g. hamburger menus, off-canvas panels) for different screen sizes.

Skeleton Screens & Loaders

Placeholder elements that signify loading state in place of blank or shifting content.

Context Menus

Right-click or long-press menus offering actions relevant to the clicked element.

Masked Input

Formatting user-entered data in real time (e.g. phone numbers, credit cards) to guide correct input.

History & Routing

Client-side URL management (e.g. single-page apps) to navigate between views without full reloads.

Here’s a further set of common Web-JS UI patterns and features you can sprinkle into apps:

Internationalization (i18n)

Dynamically loading and switching locale-specific strings, formats, and RTL/LTR layouts.

Theming & Dark Mode Toggle

Runtime switching of CSS variables or class names to change the look & feel.

Keyboard Shortcuts

Global or context-sensitive key bindings to speed up power-user workflows.

Guided Tours & Onboarding

Step-by-step overlays (e.g. Shepherd, Intro.js) that highlight and explain UI elements.

  • Drag & Drop
  • Offline & PWA Support (Caching assets/data via Service Workers, with offline UI fallback states)
  • Real-time Collaboration
  • Geolocation & Maps
  • Gesture & Touch Support
  • Feature Flags & A/B Testing

History & Undo/Redo

Snapshot or command-pattern stacks that let users roll back or replay actions.

Clipboard Operations

Copy/Paste handlers for text, images, or custom data payloads.

Interactive Positioning

Positioning elements on a grid where user can move elements (e.g. Shop cart) and they snap to the grid constraints or to other ones.

Password Strength Meter

Live feedback on password complexity as the user types.

Timeline/Range Sliders

Dual-handle sliders to select date ranges, volumes, or any continuous interval.

Video/Audio Controls

Custom JS wrappers around HTML5 media for chapter markers, speed controls, transcripts.