Topics/Product engineering/Tags
frontend
46 notes tagged frontend in the Product engineering topic. Building products: frontend, mobile and design systems.
- Engineering release checklists for production, UAT and frontend UI
Three pre-ship checklists in one place: production readiness for a service, user acceptance testing with the product team, and the frontend UI check before a design goes…
- The debug loop: make the agent measure the browser before it touches the CSS
A repeatable loop for AI-driven UI debugging: name the metric, name the axis, drive a real browser over CDP, read the DOM into a table, kill theories, sweep the suspect,…
- Introducing HTMX - navigating the advantages and concerns
A comprehensive exploration of HTMX, a JavaScript library that extends HTML as a hypermedia, addressing the limitations of legacy HTML applications.
- WebSockets
WebSockets are a simple solution that is invented to solve the problems of HTTP polling for updating the data from the server, which has caused in high overhead,…
- Window and iframe communication
When working with web development, communicating between a main window and an embedded iframe is often necessary for various tasks, such as content creation or widget…
- Adoption of pnpm
The Dwarves team switched from Yarn to pnpm for faster, more efficient package management, improving development speed and saving disk space across their projects and…
- Applying mock service worker (MSW) for seamless web development
Mock Service Worker (MSW) is an API mocking library that leverages the Service Worker API to intercept requests. It offers unique features that set it apart from…
- Render optimization in data-fetching libraries
Data-fetching libraries are software tools or frameworks that can help improve the performance and scalability of your application by handling network requests and data…
- A fragment colocation pattern with React & Apollo GraphQL
When working with complex GraphQL schemas, it's common to have shared fields across different types. A fragment colocation pattern allows us to define fragments…
- Scroll-driven animations in CSS
Scroll-driven animations are popular effects used in web design. They are animations that are connected to the scroll position of a scroll container.
- URL formats for sharing a link on social networks
Each social network has its own unique way of handling URLs, and understanding the correct formatting can make a significant difference in the visibility and engagement…
- Shadow DOM
Shadow DOM is a web standard that allows encapsulation of HTML, CSS, and JavaScript within a specific context.
- Choosing a JavaScript framework: React versus Angular versus Vue
Compare React, Angular, and Vue to find the best JavaScript framework for your web projects by exploring their performance, learning curve, tooling, and industry use…
- Retain scroll position in infinite scroll
Infinite scroll has become a popular web design technique in recent years, as it offers several benefits over traditional pagination models. However, it can also present…
- What is PNPM compare to NPM/Yarn
PNPM is a package manager for Node.js which stands for “Performant NPM”. It was introduced in 2016, the same year Yarn was released. PNPM is a fast, disk space efficient…
- Accelerating project initiation with a Next.js boilerplate and React toolkit
Speed up project initiation with NextJS-Boilerplate and React-Toolkit, featuring pre-configured tools, TypeScript, custom hooks, and ESLint for faster setup and improved…
- An i18n guideline for frontends: locale detection, routing and RTL text
Learn how to implement multi-language support with locale detection, internationalized routing, RTL/LTR text handling, and i18next formatting in React.js and Next.js…
- Why we chose our frontend tech stack
We pride ourselves on being a team of seasoned technology experts, passionate about crafting innovative solutions for our clients. With years of experience in the…
- Tackling server state complexity in frontend development
Frontend development has become increasingly complex over the years, and with it, the need for efficient state management.
- Variable fonts
Variable fonts are a font format that allows for a single font file to contain multiple variations of a typeface.
Show all 46
- When should we use useReducer instead of useState?
Imagine we have a component with multiple states. It is simple enough not to use state management libraries. `useState` is surely a choice for the sake of brevity and…
- Validation with Zod
Zod is the TypeScript-first schema validation library with static type inference.
- Parse, don't validate in TypeScript
The "parse, don't validate" approach is about processing incoming data and failing in a controlled manner if parsing fails.
- Webassembly
WebAssembly (abbreviated *Wasm*) was launched in 2017 as a low-level assembly-like language with a compact binary format, so it’s fast to load, execute, and run with…
- Singleton design pattern in Javascript
The Singleton design pattern is a design pattern that restricts the instantiation of a class to one object.
- An introduction to atomic CSS
This article provides an overview of Atomic CSS, including its definition, variations, purposes, and how it compares to other CSS approaches.
- Intro to IndexedDB
IndexedDB is a low-level API for client-side storage like localStorage and cookies. But this built-in non-relational database is much more powerful than those 2…
- The fundamental of web performance
The key to improving your website speed is to understand where the bottlenecks are, and how much time each step takes.
- WAI-ARIA
WAI-ARIA is a technology that can help with the problems of modern websites and applications containing huge amounts of dynamic content and complex components with no…
- Build polymorphic React components with Typescript
This article provides a step-by-step guide on how to build polymorphic React components with Typescript, covering the necessary concepts and techniques to create…
- Cameras in ThreeJS
**ThreeJS** is a JavaScript 3D library that allows developers to develop and describe data in 3 dimensions, and then convert them into 2 dimensions and display them on…
- Prevent layout thrashing
Layout Thrashing happens, when you request layout information of an element or the document, while the layout is in an invalidated state.
- Pure CSS parallax
This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website.
- Container queries in CSS
Container Queries is a CSS feature that allows us to style elements based on the size of a container.
- HSL color
HSL is the answer to resolving all of the painful points of Hexadecimal color codes.
- Css in JS
CSS-in-JS is a styling technique where Javascript is used to style the component.
- Dark mode flickers a white background for a fraction of a second
The dark mode feature uses local storage to store a user's preference for future usage. The problem is that when the dark mode is enabled and the page is reloaded,…
- ViteJS native modules
ViteJS takes full advantage of the availability of native ES modules in the browser and the rise of JavaScript tools written in compile-to-native languages by…
- JavaScript modules
Modules have always been a part of JavaScript development and providing mechanisms for splitting JavaScript programs up into separate modules that can be imported when…
- Atomic design pattern
Atomic design is a methodology for crafting design systems with five key fundamental building blocks, which, when combined, promote consistency, modularity, and…
- React 18 feature quick guide
React 18 was released in March 2022. This release focuses on performance improvements and updating the rendering engine.
- Zaplib post-mortem
Zaplib is a frontend framework that helps to port your JS/TS app to Rust/Wasm. This idea was found after the founder's painful work at https://webviz.io when he had to…
- Parallelism in JavaScript
Parallelism in JavaScript is a technique to improve the performance of web applications by executing multiple tasks simultaneously.
- MPA, SPA and partial hydration
MPA, SPA and partial hydration are three different approaches to building web applications.
- Using correct Html element to increase website accessibility
Using the correct HTML element can significantly improve the accessibility of your website.