Использование глобальной мемоизации в React

Когда наши приложения React становятся медленными, мы обычно обращаемся к useMemo, чтобы избежать бесполезной работы по повторному рендерингу. Это молоток, который часто работает хорошо, и с его помощью трудно выстрелить себе в ногу. Но useMemo не является серебряной пулей - иногда он просто добавляет еще больше бесполезной работы вместо того, чтобы сделать ваше приложение быстрее.

https://blog.thoughtspile.tech/2022/02/09/react-global-memo/

✍️ @React_lib

Google JavaScript руководство по стилю

https://rostislavdugin.github.io/styleguide/jsguide.html

👉 @frontend_1

Красными, зелёными или любого другого цвета — такими могут быть функции. И, оказывается, задавая функциям атрибут “цвет”, можно описывать и находить “плохие” архитектурные паттерны, такие как, например, вызов логгера из performance-critical участка кода или поход в базу при рендеринге шаблонов.

Как применить такой подход, читайте в статье Александра Кирсанова на Хабре: https://vk.cc/chdhxQ

Идея абсолютно не зависит от языка и применима к любому: хоть JS, хоть Go. В конце статьи ссылка на open-source инструмент nocolor, который помогает реализовать данную концепцию.

Сегодня #RUTUBE открывает дополнительный набор IT-специалистов. В этом году наша команда выросла почти в 3 раза и мы хотим еще. Мы в поиске талантливых технологических экспертов, которые будут развивать крупнейший российский видеохостинг вместе с нами!

Вакансии, на которые вы можете откликнуться прямо сейчас:
SRE инженер
Golang developer
Python developer
Frontend Developer (react)
Android developer
IOS developer
Инженер по сетевой безопасности
Специалист по ИБ веб-сервисов и мобильных приложений
Менеджер ИТ проектов


Сейчас в RUTUBE собрана сильная команда профессионалов и организованы условия работы на уровне топовых технологических компаний: как с точки зрения сложности и амбициозности задач, так и с точки зрения возможностей развития и конкурентного вознаграждения.

С нетерпением ждём ваши резюме! Их можно отправить сюда: [email protected]

Как найти подстроку в строке?

Метод charAt возвращает символ по указанному индексу.

Метод includes проверяет, содержит ли строка переданную подстроку. Возвращается true либо false. Вторым параметром возможно передать индекс в строке, с которого надо начать поиск, но это необязательно.

Метод search проверяет, присутствует ли в строке переданное значение либо регулярное выражение и возвращает индекс начала совпадения. В случае, если переданное значение не найдено, возвращается -1.

@frontend_sovet

Разрабатываем ToDo лист на React + TypeScript + Zustand со сборкой на ViteJS | Уроки JavaScript

В этом уроке создадим целиком вместе с вёрсткой ToDo list c использованием React, TypeScript, Zustand, ViteJS + будем использовать хранилище LocalStorage.

00:00 Введение.
02:44 Установка и настройка ViteJS
05:47 Настройка структуры директорий
11:55 Постановка задачи. Изучаем макет в Figma.
12:47 Добавляем базовую верстку.
19:28 Знакомимся с zustand.
23:01 Описываем типы todo листа
26:16 Создаём store на zustand
42:44 Работаем над формой добавления задач (InputPlus)
52:49 Добавляем стили к InputPlus.
01:00:55 Отображаем отсутствие задач.
01:02:52 Отображение существующих задач.
01:09:54 Работа над компонентой задачи (InputTask).
01:14:18 Работа над стилями InputTask.
01:21:59 Добавляем mode редактирования для InputTask.
01:30:59 Тестирование + небольшие правки
01:33:19 Погружение в middleware zustand (devtools)
01:37:40 Пишем собственную middleware для LocalStorage.

https://www.youtube.com/watch?v=Z0rxniw2nBc

👉 @frontend_1

3 коротких октябрьских совета по CSS

https://dev.to/melnik909/the-3-short-october-css-tips-n2h

👉 @frontend_1

Frontend SOLID || Архитектура во Фронтенде

Single Responsibility || API package
Open Closed principle
Принцип подстановки Барбары Лисков || The Liskov substitution principle
Принцип разделения интерфейса || Interface Segregation Principle
Dependency Inversion || storage package

https://www.youtube.com/playlist?list=PLz_dGYmQRrr8rWKkoB3BtxF7JpCzUKny_

👉 @frontend_1

Bun - это быстрая универсальная среда выполнения JavaScript.

Пакетирование, транспиляция, установка и запуск проектов JavaScript и TypeScript - все это в Bun. Bun - это новая среда выполнения JavaScript с собственным сборщиком, транспайлером, средством запуска задач и встроенным клиентом npm.

https://bun.sh/

👉 @frontend_1

Здоровье программиста: 7 способов быть здоровым

При всей своей любви к программированию, оно может быть одним из самых вредных для здоровья. В современном мире разработчики сталкиваются с огромным количеством проблем с физическим и психическим здоровьем. Будь то боли в запястьях и спине, мигрени, напряжение глаз, потеря мотивации или проблемы с концентрацией внимания — программирование может быть довольно рискованной профессией!

Вот семь простых способов позаботиться о себе и поддерживать свой разум и тело в отличной форме.

@itmozg

Где-то в мире живёт фронтенд-разработчик Серёжа, работает на аутсорсе и пишет программы на заказ. Сделал продукт Серёжа, сдал и забыл о нём. И даже не представляет, какую пользу принёс людям😕

Серёжа может сменить работу и устроиться в продуктовую компанию: Яндекс, Тинькофф, X5 Group. Тогда он сможет увидеть, как своей работой приносит пользу. Ещё в продуктовой компании платят больше денег. А строчка в резюме о работе в X5 Group поднимет Серёжу в глазах эйчаров, если он решит сменить работу. 

Приходите на бесплатный лайв от HTML Aсademy. Андрей Смирнов из X5 Group, расскажет: 

– Что нужно, чтобы работать в X5 Group. Берут ли джунов?
– Какие скиллы нужны фронтенд-разработчику, чтобы работать в продуктовой компании.
– Как подготовиться и пройти собеседование.
– Какие плюсы и минусы быть мидл фронтенд-разработчиком.

Лайв стартует 19 октября в 13.00.
Записаться по ссылке: https://tml.io/fghjk

​30-seconds-of-code – Коллекция готовых фрагментов кода на JavaScript, CSS, Python и даже Git для любых ваших потребностей в разработке

Например, коллекция JS содержит широкий спектр вспомогательных функций ES6, помощников для работы с примитивами, массивами и объектами, а также алгоритмы, функции манипулирования DOM и утилиты Node.js

#Interesting #Useful #Templates

👉 @Githublib

ReactJS под капотом

React Reconciliation
Все ли вы знаете о React key?
Что вы знаете о useCallback?
какая разница между useLayoutEffect, componentDidMount и useEffect?
Best Practices for useEffect by React Documentation
Первое погружение в исходники хуков (задел на будущее)
createRef, setRef, useRef и зачем нужен current в ref
Что выбрать: глобальные переменные или useThis()?
Какая настоящая цена useMemo?
useMemo - исходники, альтернативное использование и мемоизация ссылки
React.memo это вам не useMemo || разница между HOC и hook на примере исходников
Чем отличается SimpleMemoComponent от MemoComponent?
Улучшаем перфоманс без memo() || Советы от Дэна Абрамова
Станет ли memo() дэфолтным поведением реакт компонента?
Блок схема по использованию memo() && Боевые примеры
Трюк с useMemo от React разработчиков
Новый хук в 18-ой версии React - useSyncExternalStore
Исходники Context API + Redux vs Context
[Эксперимент] useContext + useReducer вместо Redux
Лучшие примеры использования Context API
Новый хук useEvent решит наши проблемы!

Все видео доступны на youtube

✍️ @React_lib

Создайте свою собственную безопасную для типов версию Tailwind CSS с помощью Sprinkles

Я большой поклонник библиотеки CSS vanilla-extract; на мой взгляд, это самый интересный инструмент CSS со времен Tailwind CSS. Если вы новичок в vanilla-extract, это библиотека CSS-in-JS, созданная Марком Далглишем, которая позволяет вам использовать возможности TypeScript для вашего CSS.

https://blog.logrocket.com/build-type-safe-version-tailwind-css-sprinkles/

👉 @frontend_1

Анимированная кнопка, выполненная с помощью CSS, SVG и JavaScript

https://codepen.io/jkantner/pen/zYdaBPJ

#codepen #css #js

Подпишись👉 @codepen_1

Проблемы с переполнением в CSS

https://www.smashingmagazine.com/2021/04/css-overflow-issues/

👉 @frontend_1

Советы для сложных иллюстраций на CSS

https://css-tricks.com/advice-for-complex-css-illustrations/

👉 @frontend_1

Восход солнца, выполненный с помощью SCSS, без использования JavaScript

https://codepen.io/pehaa/pen/yLVeLNg

#codepen #scss


Подпишись👉 @codepen_1

Frontend митап в Йошкар-Оле. 28 мая 2022

Реализация совместной работы в конструкторах онлайн-материалов - Юрий Минаков, iSpring
Функциональное программирование: практическое внедрение на производстве - Иван Калагин, Arenadata
Feature Sliced Design - Артур Мирзин, Ak Bars Bank
Викторина по Frontend на митапе

https://www.youtube.com/playlist?list=PL29DYZAQWb0LLIDcDqED941bmmEWHtZgZ

👉 @frontend_1

Встреча сообщества A?.Frontend #1

Команда Alfa Digital приглашает на встречу frontend-сообщества всех, кто хочет узнать новое, обменяться опытом и провести время в хорошей компании!

Где: Санкт-Петербург, офис Альфа-Банка
Когда: 27 октября (четверг) в 19:00

В программе — доклады:
🍁«Как успешно пройти любое собеседование»
Расскажет Кирилл Павлик, JS -разработчик в Альфа-Банке

🍁«Как улучшить DX и перестать тратить силы на бессмысленную рутину»
Лайфхаками поделится Ольга Болотова, Руководительница направления развития компетенции JS в Альфа-Банке

🍁 «Разбирательство. Дело №1: как сейчас живут ИТ-сообщества?»
Вместе с коллегами из Яндекса и Мегафона обсудим актуальные вопросы о митапах, конференциях и сообществах в ИТ сегодня.

А ещё всех гостей, помимо докладов, ждет:

☕️ Горячий какао и пряные сладости
☕️ Согревающий мерч от Альфы в подарок за лучшие вопросы докладчикам

👉Регистрируйтесь на встречу заранее, количество мест ограничено

И вступайте в frontend-сообщество: https://yangx.top/alfa_frontend