Frontend разработчик 3972

Frontend разработчик

🔥 Быстрое сравнение объектов в JS без глубоких сравнений

Иногда не нужен deep equal, а просто надо понять: два объекта точно одинаковы по содержимому?

Вот простой, но мощный трюк на базе JSON.stringify():


const isEqual = (a: object, b: object) =>
  JSON.stringify(a) === JSON.stringify(b);

📌 Подходит для:

* Простых объектов без методов и undefined;
* Сравнения кеша/props в memo;
* Быстрой проверки изменений формы.

⚠️ Не подходит:

* Для вложенных объектов с разным порядком ключей ({a:1,b:2} !== {b:2,a:1});
* Когда есть Date, Map, Set, функции, undefined, symbol.

🧠 Альтернатива:
Если важен порядок и типы — используй lodash.isEqual.

👉 Пример использования:


if (!isEqual(prevForm, currentForm)) {
  saveChanges();
}

⚡ Просто. Эффективно. Для 80% кейсов — 🔥

👉 @frontend_1

👍7

1.57K views10:05

Frontend разработчик

🚀 Подборка Telegram каналов для программистов

Системное администрирование, DevOps 📌

https://www.tg-me.com/bash_srv Bash Советы
https://www.tg-me.com/win_sysadmin Системный Администратор Windows
https://www.tg-me.com/sysadmin_girl Девочка Сисадмин
https://www.tg-me.com/srv_admin_linux Админские угодья
https://www.tg-me.com/linux_srv Типичный Сисадмин
https://www.tg-me.com/devopslib Библиотека девопса | DevOps, SRE, Sysadmin
https://www.tg-me.com/linux_odmin Linux: Системный администратор
https://www.tg-me.com/devops_star DevOps Star (Звезда Девопса)
https://www.tg-me.com/i_linux Системный администратор
https://www.tg-me.com/linuxchmod Linux
https://www.tg-me.com/sys_adminos Системный Администратор
https://www.tg-me.com/tipsysdmin Типичный Сисадмин (фото железа, было/стало)
https://www.tg-me.com/sysadminof Книги для админов, полезные материалы
https://www.tg-me.com/i_odmin Все для системного администратора
https://www.tg-me.com/i_odmin_book Библиотека Системного Администратора
https://www.tg-me.com/i_odmin_chat Чат системных администраторов
https://www.tg-me.com/i_DevOps DevOps: Пишем о Docker, Kubernetes и др.
https://www.tg-me.com/sysadminoff Новости Линукс Linux

1C разработка 📌
https://www.tg-me.com/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://www.tg-me.com/DevLab1C 1С:Предприятие 8
https://www.tg-me.com/razrab_1C 1C Разработчик
https://www.tg-me.com/buh1C_prog 1C Программист | Бухгалтерия и Учёт
https://www.tg-me.com/rabota1C_rus Вакансии для программистов 1С

Программирование C++📌
https://www.tg-me.com/cpp_lib Библиотека C/C++ разработчика
https://www.tg-me.com/cpp_knigi Книги для программистов C/C++
https://www.tg-me.com/cpp_geek Учим C/C++ на примерах

Программирование Python 📌
https://www.tg-me.com/pythonofff Python академия.
https://www.tg-me.com/BookPython Библиотека Python разработчика
https://www.tg-me.com/python_real Python подборки на русском и английском
https://www.tg-me.com/python_360 Книги по Python

Java разработка 📌
https://www.tg-me.com/BookJava Библиотека Java разработчика
https://www.tg-me.com/java_360 Книги по Java Rus
https://www.tg-me.com/java_geek Учим Java на примерах

GitHub Сообщество 📌
https://www.tg-me.com/Githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://www.tg-me.com/database_info Все про базы данных

Мобильная разработка: iOS, Android 📌
https://www.tg-me.com/developer_mobila Мобильная разработка
https://www.tg-me.com/kotlin_lib Подборки полезного материала по Kotlin

Фронтенд разработка 📌
https://www.tg-me.com/frontend_1 Подборки для frontend разработчиков
https://www.tg-me.com/frontend_sovet Frontend советы, примеры и практика!
https://www.tg-me.com/React_lib Подборки по React js и все что с ним связано

Разработка игр 📌
https://www.tg-me.com/game_devv Все о разработке игр

Библиотеки 📌
https://www.tg-me.com/book_for_dev Книги для программистов Rus
https://www.tg-me.com/programmist_of Книги по программированию
https://www.tg-me.com/proglb Библиотека программиста
https://www.tg-me.com/bfbook Книги для программистов

БигДата, машинное обучение 📌
https://www.tg-me.com/bigdata_1 Big Data, Machine Learning

Программирование 📌
https://www.tg-me.com/bookflow Лекции, видеоуроки, доклады с IT конференций
https://www.tg-me.com/rust_lib Полезный контент по программированию на Rust
https://www.tg-me.com/golang_lib Библиотека Go (Golang) разработчика
https://www.tg-me.com/itmozg Программисты, дизайнеры, новости из мира IT
https://www.tg-me.com/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻
https://www.tg-me.com/nodejs_lib Подборки по Node js и все что с ним связано
https://www.tg-me.com/ruby_lib Библиотека Ruby программиста
https://www.tg-me.com/lifeproger Жизнь программиста. Авторский канал.

QA, тестирование 📌
https://www.tg-me.com/testlab_qa Библиотека тестировщика

Шутки программистов 📌
https://www.tg-me.com/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://www.tg-me.com/thehaking Канал о кибербезопасности
https://www.tg-me.com/xakep_2 Хакер Free

Книги, статьи для дизайнеров 📌
https://www.tg-me.com/ux_web Статьи, книги для дизайнеров

Математика 📌
https://www.tg-me.com/Pomatematike Канал по математике
https://www.tg-me.com/phis_mat Обучающие видео, книги по Физике и Математике
https://www.tg-me.com/matgeoru Математика | Геометрия | Логика

Excel лайфхак📌
https://www.tg-me.com/Excel_lifehack

https://www.tg-me.com/mir_teh Мир технологий (Technology World)

Вакансии 📌
https://www.tg-me.com/sysadmin_rabota Системный Администратор
https://www.tg-me.com/progjob Вакансии в IT

Bash Советы

🚀 Секреты и советы по Bash

🔹 Полезные трюки, хитрые однострочники и лайфхаки для работы в терминале.
🔹 Автоматизация, скрипты и оптимизация работы в Linux.
🔹 Стать мастером Bash легко – просто подпишись!

💻 Прокачивай терминал вместе с нами! 👇

❤2

1.52K views10:15

Frontend разработчик

🔥 Юзаешь React + TypeScript? Тогда вот тебе трюк на миллион — типизация children правильно!

Часто можно увидеть вот так:


type Props = {
  children: React.ReactNode;
}

Но это слишком широкий тип. Он допускает что угодно: строки, числа, фрагменты, null…

📌 Лучше — использовать ReactElement:


import { ReactElement } from 'react';

type Props = {
  children: ReactElement;
}

👉 Это значит: ожидаем ровно один React-элемент, и никаких строк/чисел/массивов.

Если нужно несколько элементов — используем:


type Props = {
  children: ReactElement | ReactElement[];
}

🎯 Это даёт жёсткую и предсказуемую типизацию, особенно полезно для обёрток и layout-компонентов.

⚠️ А если хочешь прям универсальность — тогда ReactNode ок. Но осознанно.

Пиши типы как профи 💪

👉 @frontend_1

👍9❤1

1.58K views14:36

Frontend разработчик

🚨 Осторожно с useEffect: ловушка зависимости на функцию!

В React легко попасть в ловушку, передавая функции внутрь useEffect, не задумываясь об их зависимости.


useEffect(() => {
  fetchData(); // ⚠️ Эта функция может пересоздаваться на каждый рендер!
}, [fetchData]);

Если fetchData определена внутри компонента, она будет новой при каждом рендере, и эффект снова выполнится. Это может вызвать бесконечные циклы или лишние вызовы.

🛠 Решения:

1. Вынести функцию наружу, если она не зависит от пропов/стейта.
2. Обернуть в useCallback:


const fetchData = useCallback(() => {
  // ...
}, []);

📌 Всегда проверяй зависимости в useEffect. Полагайся на ESLint-плагин react-hooks — он поможет не попасть в ловушку.

👉 @frontend_1

👍7❤1

1.59K views15:28

Frontend разработчик

🎯 Современный способ центрирования с place-items

Центрировать элемент — базовая задача, но многие до сих пор пишут лишнее:

❌ Старый способ с Flexbox:


display: flex;
justify-content: center;
align-items: center;

✅ Новый минималистичный способ с Grid:


display: grid;
place-items: center;

📌 place-items — это сокращение для align-items + justify-items. Работает только с CSS Grid, но зато:

* Меньше кода
* Более читаемо
* Идеально для одиночных элементов в контейнере

💡 Подходит для модалок, карточек, лоадеров и др.

⚙️ Поддержка: все современные браузеры (даже IE11 частично поддерживает place-items как -ms-grid)

Пробуй — и забудь про лишние строки!

👉 @frontend_1

👍9

1.72K views16:28

Frontend разработчик

Не просто кнопка "Загрузить": Секреты работы с файлами в React

🎓 19 мая в 20:00 — бесплатный вебинар для разработчиков, которые хотят делать удобную и безопасную загрузку файлов в React-приложениях.

Что покажем:
— Drag & Drop, предпросмотр, валидация — всё, что ждали от UX;
— Обработка PDF, Excel и изображений прямо в браузере;
— Как не «положить» интерфейс при загрузке тяжёлых файлов;
— Защита от XSS, проверка MIME-типов и другие нюансы безопасности.

📌 Для фронтендеров и fullstack-разработчиков, которым важна клиентская оптимизация.

В программе — реальные примеры кода, которые можно сразу использовать.
Урок пройдет в преддверии старта курса «React.js Developer». Каждый участник вебинара получит скидку на обучение.

Регистрация: https://vk.cc/cLVH8S

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

1.85K views08:16

Frontend разработчик

0:07

This media is not supported in your browser

VIEW IN TELEGRAM

Athena Crisis — это современная реализация тактической стратегии в духе Advance Wars, написанная на Rust с использованием движка Bevy.

Особенности:

* Сражения в стиле пошаговой стратегии
* Кампания с диалогами и кат-сценами
* Пользовательские карты и редактор уровней
* ИИ-противники
* Полностью кроссплатформенный: работает в браузере, на ПК и мобильных устройствах
* Сохраняемые игры

Проект в активной разработке. Вы можете попробовать демо прямо сейчас в браузере: Играть в демо

https://github.com/nkzw-tech/athena-crisis

👉 @frontend_1

👍4👎1

2.05K views10:20

Frontend разработчик

Совет по HTML 💡

Семантический способ выделить часть текста ✅

👉 @frontend_1

👍5

2.06K viewsedited 16:25

Frontend разработчик

🔥 Как дебаунсить useEffect без лишних библиотек

Когда useEffect триггерится слишком часто — например, при вводе в input — можно легко добавить дебаунс. Без lodash, только setTimeout.


import { useEffect } from 'react'

function useDebouncedEffect(effect: () => void, deps: any[], delay: number) {
  useEffect(() => {
    const handler = setTimeout(() => effect(), delay)

    return () => clearTimeout(handler)
  }, [...deps, delay])
}

📌 Использование:


useDebouncedEffect(() => {
  fetch(`/api/search?q=${query}`)
}, [query], 500)

✅ Плюсы:
– Простой и читаемый хук
– Не надо тащить lodash
– Управляемый debounce прямо в useEffect

⚠️ Важно: deps должны быть стабильны. Заворачивай колбэки в useCallback при необходимости.

👉 @frontend_1

👍5👎2❤1🤔1🤣1

1.96K views05:40

Frontend разработчик

0:06

This media is not supported in your browser

VIEW IN TELEGRAM

CSS-совет 💡

Возможно, ты не знал о единице измерения lh в CSS

👉 @frontend_1

👍6

2.04K views05:26

Frontend разработчик

Как мне взбрело в голову свой Notion-like редактор написать

Мне в голову пришла идея пет-проекта, который изначально никак не был связан с текстовым редактором. Однако, в процессе работы все дошло до того, что пользователям нужно где-то набирать текст. Я люблю Notion и пишу там много и часто, поэтому решил сделать похожий (но сильно упрощенный) редактор в своём проекте. Не столько из нужды, сколько из любопытства, ведь я никогда не занимался ничем подобным и мало что знал о том, как писать текстовые редакторы.

В статье хочу рассказать про атрибут contenteditable у HTML-элементов, про сопутствующие проблемы при его использовании, про кастомное форматирование и про работу с выделенными участками текста.

https://habr.com/ru/articles/815579/

👉 @frontend_1

👍2

2.02K views08:53

Frontend разработчик

💡 Знаете ли вы, что к числам в упорядоченном списке можно добавить 0️⃣?

👉 @frontend_1

👍11❤3

1.98K views11:55

JavaScript Promises Crash Course

00:00 - Introduction
01:40 - Creating a promise
03:50 - Errors and catch
05:20 - Chaining multiple methods
07:42 - Using finally
08:54 - Practical examples
14:05 - async and await
16:45 - gotchas with async and await
22:00 - Which approach should you use?

источник

👉 @frontend_1

👍3

1.83K views08:20

Frontend разработчик

CSS совет 💡

Возможно, ты не знал об этом новом и самом простом способе вертикально центрировать контент в блочном макете.

👉 @frontend_1

👍10❤1

1.6K views08:04

Frontend разработчик

Bash Советы

❤3

1.57K views06:59

Frontend разработчик

TypeScript: стоит ли усложнять типы?

Что такое TypeScript? Официальная документация отвечает так: “TypeScript — это JavaScript с синтаксисом типов”. Однако некоторые считают TypeScript своеобразным слиянием двух языков: языка для манипулирования значениями JavaScript и языка для манипулирования типами.

Cистема типов TypeScript Тьюринг-полная. Это означает, говоря по-простому, что система может решить любую вычислительную задачу при наличии некоторого представления входных и выходных данных.

Можно ли использовать это знание на практике? Как избежать крайностей от примитивного аннотирования типов до избыточного усложнения?

https://habr.com/ru/companies/lanit/articles/908642/

👉 @frontend_1

👍2

1.76K views06:01

Frontend разработчик

0:18

This media is not supported in your browser

VIEW IN TELEGRAM

👉 @frontend_1

😁19

1.66K views09:15

Frontend разработчик

React Reconciliation: скрытый механизм, управляющий компонентами

В моих предыдущих статьях (1, 2) я подробно рассматривал, как работает React.memo, а также делился более эффективными подходами к оптимизации производительности с помощью компоновки. Однако для глубокого понимания работы React необходимо разобраться в основном механизме, лежащем в основе всех этих оптимизаций – алгоритме согласования (reconciliation).

Согласование – это процесс, в результате которого React приводит DOM в соответствие с деревом компонентов. Именно этот механизм позволяет реализовать декларативный подход к программированию на React: вы формулируете свои намерения, а React самостоятельно определяет, как выполнить эти намерения наилучшим образом и с наименьшими затратами.

https://habr.com/ru/companies/timeweb/articles/901212/

👉 @frontend_1

👍2

1.62K views08:36

Frontend разработчик

Совет по веб-доступности 💡

Лучший способ сделать ваши ссылки, состоящие только из иконок, удобными для экранных читалок.

👉 @frontend_1

👍5

1.67K views06:06

Frontend разработчик

🫵 Хочешь стать Fullstack-разработчиком, но боишься, что слишком сложно?

Ты не один.
90% новичков теряются, потому что не понимают, с чего начать.

➡️ На вебинаре 10 июня в 18:00 от OTUS ты:
— разберёшься в основах фронтенда,
— получишь Skill-map, чтобы понять свои сильные стороны,
— сделаешь осознанный старт в IT.

❗️Не листай дальше — переходи на сайт, там уже готов план для старта: https://vk.cc/cMAZQk

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

1.72K views08:04

2025/07/11 18:23:39
Back to Top

HTML Embed Code:

<iframe width="100%" src="https://www.bootg.com/buyppe/web?embed=1" title="Telegram Web" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>