Best of Frontend Development — August 2023
- 1
- 2
Medium·3y
A Front-End Application Folder Structure that Makes Sense
The goal is to apply some kind of modularisation that will make the codebase easier to understand by setting boundaries between features and minimizing code coupling and side effects. By default when scaffolding a new project using one of the popular front-end frameworks the component structure is flat and follows no hierarchy whatsoever.
- 3
habr·3y
React Custom Hook: useArray
"useArray" hook is one of the many carefully crafted hooks available in the collection of React custom hooks. The useArray hook uses the useState hook from React to manage the array state. The advantages of using this custom hook are twofold: it simplifies the management of array states and provides a cleaner and more readable code structure.
- 4
- 5
asayer·3y
Create a CI/CD Pipeline for Front End Projects
In modern front-end development, automating the testing and deployment of your apps is mandatory to avoid wasting time or making mistakes. This article will show you how to go about achieving this goal. We’ll walk through the crucial elements of a successful pipeline for Front-end projects.
- 6
WunderGraph·3y
5 Best Practices for Backends-for-Frontends
The Backends-for-Frontends (BFF) pattern is an interesting solution to a problem many teams face. BFF stands for Backend For Frontend, and it’s a very clever way to architect your application in a way so that no matter how many different frontend experiences you offer, the core backend services remain intact.
- 7
Amplication·3y
Serving Frontends in Microservices Architecture
The microservices architecture has emerged as a dominant paradigm in the software development landscape. The frontend - which serves as the user's gateway to the application - is equally crucial. This article aims to explore the challenges and solutions associated with serving frontends in a microservices environment.
- 8
React Custom Hook: useAsync
The useAsync hook takes in a callback function that performs the asynchronous operation and an optional array of dependencies. It returns an object with three properties: loading, error, and value. The hook employs the useState and useEffect hooks to manage the loading state and invoke the memoized callback function when necessary.
- 9
freeCodeCamp·3y
MERN Stack Crash Course – Build a Book Store App
MERN stack is a set of technologies often used to build full stack web apps. You'll start from scratch and build a complete CRUD application, exploring both backend and frontend development. The course covers an array of topics, including but not limited to: Backend CRUD operations.
- 10
React Custom Hook: useDarkMode
"UseDarkMode" Hook is one of the many carefully crafted hooks available in the collection of React custom hooks. It combines two other handy hooks and, to provide a seamless dark mode experience. It automatically detects the user's preferred color scheme and persists the dark mode state in the browser's local storage.
- 11
React Custom Hook: useClickOutside
The useClickOutside hook is designed to simplify the process of detecting clicks outside a specified component. It listens for click events on the document level, allowing you to trigger a callback function when a click occurs outside the provided component's reference. It works seamlessly with functional components using the useState and useRef hooks.
- 12
React Custom Hook: useDebugInformation
React Custom Hook: useDebugInformation is one of the many carefully crafted hooks available in the collection of React custom hooks. The hook tracks the number of renders, changed props, time since the last render, and the timestamp of the last rendering. UseDebugInformation can be applied in various scenarios.
- 13
React Custom Hook: useCookie
React Custom Hook: useCookie is one of the many carefully crafted hooks available in the collection of React custom hooks. UseCookie allows you to effortlessly handle cookies by providing a concise interface. In scenarios where you need to remove a cookie, the deleteCookie function comes to the rescue.
- 14
React Custom Hook: useFetch
React Custom Hook: useFetch is one of the many carefully crafted hooks available in the collection of React custom hooks. UseFetch handles the network request, parses the JSON response, and provides the resulting data. The hook also offers flexibility through its customizable options parameter.
- 15
React Custom Hook: useDebounce
The useDebounce hook leverages the useTimeout hook internally to delay the execution of a callback function until a specified delay has passed. The hook takes care of managing the timeout and clears it when necessary, ensuring that the callback is only triggered after the specified delay and with the latest dependencies.
- 16
Securing Front-end Apps with CORS and CSP
Security breaches can lead to data theft, unauthorized access, and brand reputation damage. With proper CORS and CSP implementations, we can fortify our front-end apps and stay ahead of potential threats. The crucial security feature known as CORS, or Cross Origin Resource Sharing, enables servers to manage which external resources can access a web application.
- 17
React Custom Hook: useCopyToClipboard
The useCopyToClipboard hook streamlines the copy-to-clipboard functionality, providing developers with a hassle-free solution. The hook is incredibly versatile and can be employed in various scenarios. It is particularly useful in situations where copying text, such as URLs, shareable content, or user-generated data is required.
- 18
Laravel News·3y
Livewire v3 Has Been Released
Livewire v3 has been released. Caleb Porzio demoed a ton of the new features in his talk at Laracon. The core of Livewire has been totally rewritten from scratch. The new core architecture will also be much easier to maintain for Caleb and the Livewire core contributors.
