Responsive actions
Search and filters with clear feedback after each change.
← All technologies
JavaScript · BIG FISH
Web development with JavaScript
Search, filters, forms and interactive journeys without unnecessary reloads. We design interface behaviour as carefully as its visual appearance.
BIG FISH / JAVASCRIPT
01User input
02Cancel stale request
03Check response
04Current results
Design × technology × your workflow
PRODUCT CAPABILITIES
Technology becomes
a working product.
Complex forms
Dependent fields, input checks and preservation of work on failure.
Purposeful motion
Animation explains transitions and respects user preferences.
INTERACTIVE EXAMPLE
Try the workflow.
See the outcome.
Live catalogue search with simulated slow responses and failures. A late result for an older query must not replace the current results.
Educational example with fictional data. Actions stay in your browser. This models the workflow; it is not a connected CMS, server or database.
JavaScript
Try pump, valve or sensor. Change the query quickly while a result is loading.
JavaScriptWorkflow result
The example is ready to explore.
WORKFLOW ARCHITECTURE
Every step has
a responsibility.
01
User input
02
Cancel stale request
03
Check response
04
Current results
| Layer | Outcome |
|---|---|
| Interface | Input, limits, loading and errors are clear. Keyboard operation is available. |
| Data | Values have an owner, format and freshness rules. |
| Release | Critical journeys, backups and recovery have been checked. |
BIG FISH · JavaScript
Every action gets a response.
JavaScript interface development turns forms, filters and calculators into a conversation with the user. We show input results, explain errors beside the relevant field and preserve context while data loads or an action needs retrying.
When enhancing a website with JavaScript, we check mouse, keyboard and touch input. Motion explains state changes, while essential content and navigation remain available if an interactive module fails to load.
PRACTICAL GUIDE
Building a product
with JavaScript.
Architecture, constraints and testable workflows. The exact configuration follows the project requirements.
JavaScript / 01
Journeys and states
Search needs idle, loading, results, empty and error states. Forms also need validation and submission confirmation. Define these before implementation so buttons and messages remain consistent. A user action must produce observable feedback even when the network is unavailable.
Acceptance check
Empty results differ from network errors.
JavaScript / 02
Events and structure
Attach handlers to stable elements and account for dynamically inserted content. Components release listeners and timers when removed. Avoid a shared script full of globals that every page depends on. Preserve HTML form semantics so Enter, keyboard navigation and assistive technologies behave predictably.
Acceptance check
Reopening does not duplicate event listeners.
JavaScript / 03
Asynchronous requests
A new search makes the previous response stale. Cancel the request or check its sequence before updating the screen. With fetch, inspect HTTP status separately: receiving a response does not necessarily mean the operation succeeded. Distinguish cancellation, network failure and validation errors to provide useful feedback.
Acceptance check
A late response cannot replace newer results.
const response = await fetch(url, { signal });
if (!response.ok) throw new Error('Request failed');
const data = await response.json();
if (requestId === latestRequestId) renderResults(data);JavaScript / 04
Forms and trust
Browser validation helps users correct input quickly, but the server validates it again. Do not trust hidden fields containing prices, roles or another organisation’s identifier. Preserve valid input after failures. Disabling a button prevents accidental double-clicks, while important operations still require server-side idempotency.
Acceptance check
Price tampering is rejected by the server.
JavaScript / 05
Accessible interactions
A dialog receives focus when opened and returns it to its trigger when closed. Loading and search results should be communicated beyond visual styling alone. Respect reduced-motion preferences. Test keyboard navigation, enlarged text and operation without a pointer, especially for complex filters and menus.
Acceptance check
Closing a dialog restores focus.
JavaScript / 06
Performance
Avoid expensive work on every scroll update. Split tasks, reduce unnecessary DOM changes and load heavy modules only when needed. Measure responsiveness on real devices. More animation does not improve an interface if it delays buttons or interrupts reading.
Acceptance check
Scrolling does not block input.
JavaScript / 07
Safe output
Render user text as text, not HTML. Where formatted content is required, define allowed elements and sanitise it appropriately. Do not expose access tokens or external credentials in public code without understanding their purpose. Test unusual characters, links and markup fragments.
Acceptance check
Markup entered into a field is displayed as text.
JavaScript / 08
Behaviour testing
Test rapid repeated input, out-of-order responses, cancellation and loss of connectivity. Complement automated scenarios with phone testing. Monitor JavaScript errors and changes after dependency updates. Agree supported browsers in advance, including acceptable simplification of effects on less capable devices.
Acceptance check
Losing connectivity does not erase the form.
FAQ
Before we start
Is this a ready-made product?
No. The example illustrates a proposed workflow for JavaScript. We design the production system around your requirements, data and integrations.
Can we retain our current systems?
We first review their interfaces, data ownership and constraints. The result may be an integration, a phased migration or a focused replacement of one component.
What do we receive at handover?
The agreed deliverables include design assets, source code, environment requirements and operational instructions. Scope, ownership and support are recorded in the contract.
Let’s design your product
Tell us about your workflow, audience and existing systems. We will define the interface, technical boundaries and delivery stages.