FrontEndHub💻
65 subscribers
85 photos
4 files
268 links
A channel for developers who want to pump their skills.
Download Telegram
Control Layout in a Multi-Directional Website

1. Start with the HTML markup
2. CSS Custom Properties are your friend
3 CSS pseudo-classes and selectors
4. Prepare the web fonts
5. CSS Logical Properties
6. Other layout considerations


#i18n #css
Should You Really Use useMemo in React? Let’s Find Out.

- What is useMemo?
- What does React say about useMemo?
- Hypothesis
- Benchmarking Setup
- Results


#react #hooks #performance
React folder structure for enterprise level applications

The goal of this article is to explain the reasoning behind this structure so that you can use these ideas to architect the best solution for your project.

#react
CPT Custom Hooks, React Router

useHistory
useRouteMatch
useParams
useLocation


#react #hooks
Three ways to handle data fetching logic in React projects!

- The Simplest Way
- The Redux Way
- The React Query Way
- So, which is the best way?


#react
How and Why You Should Store React UI State in the URL

- Bring back deep linking on the web
- Dead-Simple Deep Linking
- The Code


#react #statemanager
How to useRef to Fix React Performance Issues

- The Problem
- The Aha Moment
- The Solution
- When to useRef

#react #hooks
Распространённые ошибки при использовании npm, которых лучше не совершать

1. Ручное добавление зависимостей в файл package.json
2. Ограничение зависимостей типа peerDependencies конкретной версией патча
3. Публикация нескольких модулей в виде единственного пакета
4. Случайная публикация секретных данных
5. Использование обычного токена аутентификации
6. Бессмысленное обновление пакетов
7. Удаление файла package-lock.json


#npm
Replacing jQuery with Vanilla ES6

Following a discussion with a colleague about how “necessary” jQuery is now-days, considering how far ES6 has come, I decided to conduct a small experiment: I would clone a live, functioning JS module and replace as much jQuery as possible (ideally all) with vanilla ES6.


#jquery
React Architecture Patterns for Your Projects

Navigating a Directory Structure
Create Custom Hooks
Use Absolute Imports
Open Source Session Replay
Separate business logic from UI
The Utils directory
Avoiding creating a single Context for everything

#react
Add a Service Worker to Your Site

What are service workers?
Security
Listening for requests in a service worker
Service worker strategies
Implementing network-first and offline-first strategies in your service worker
Putting it all together


#js
Deep dive into React codebase [EP1: Prerequisites]

Preface
Prerequisites to the whole series
Afterword


#react
Commit Better Code with Husky, Prettier, ESLint, and Lint-Staged

Tools of the Trade 🧰
Commiting Clean Code to a Project
Adding ESLint and Prettier
Configuring Husky
Testing Our Setup
Further Resources

#react
Simple Readable Client-side Architecture — React

UI Components
Containers
Interactions
API Related Data
Global states
Selectors
Benefits
Readability
Shareability
Testability
Conclusion

#react #architecture
Thinking in mental models

The paradigm shift
What mental models are
How to assess systems
How to make decisions
Putting mental models to use
Making decisions
Elon Musk and Jeff Bezos
What you're supposed to do now
Top 6 React state management libraries for 2022

Recoil
Jotai
Redux
Rematch
Zustand
Hookstate
React Context

#react
Why custom react hooks could destroy your app performance

Let’s build a modal dialog on custom hooks
Performance implications
Adding more functionality to the useModal hook

#react #hooks
How to write performant React code: rules, patterns, do's and don'ts

Let's structure our app first
Implementing Page component
Refactoring Page component - with performance in mind
Implementing the list of countries
Implementing selected country
Final polish: theming

#react #hooks
React project structure for scale: decomposition, layers and hierarchy

1. What do we need from the project structure convention
2. Organising the project itself: decomposition
3. How to structure a package itself
4. React recommends against nesting

#monorepo #architecture
Why React Re-Renders

The core React loop
It's not about the props
Profiling with the React Devtools
Going deeper
Bonus: Performance tips

#performance #react