Pull to refresh
0
0
Send message

Кастомные хуки в React: лучшие практики, пример использования и покрытия тестами

Level of difficultyEasy
Reading time10 min
Views26K

Когда я искал свою первую работу в качестве Frontend-разработчика, меня часто спрашивали, умею ли я писать кастомные хуки в React. Тогда я только начинал изучать React и только-только запомнил основы, такие как useState и useEffect. Слово «кастомный хук» для меня было новым и сложным. Но теперь, когда я уже более опытный разработчик, знаю, что это значит и как их использовать.

В этой статье я расскажу о лучших практиках при создании кастомных хуков и приведу пример создания кастомного хука для работы с API. Эта информация будет полезна начинающим разработчикам, которые только начинают изучать кастомные хуки в React.

Читать далее
Total votes 11: ↑9 and ↓2+9
Comments9

Создание внутреннего пакета компонентов React — проще, чем кажется

Reading time14 min
Views4.7K

В разработке современных React-приложений часто возникает потребность в повторном использовании компонентов. Есть разные способы решения такой задачи, и одним из них является создание внутреннего пакета компонентов. Грамотная сборка и поддержка такого пакета позволяют повысить эффективность и производительность разработки, а команда получает возможность использовать готовые компоненты в различных проектах без особых усилий. 

Я frontend-разработчик SimbirSoft Эллина, и в этой статье расскажу, как создать внутренний пакет компонентов в React с помощью инструмента сборки Rollup, а также как сделать его более качественным и удобным для использования. Материал будет полезен frontend-разработчикам уровней junior+ и middle.

Читать далее ?
Total votes 3: ↑2 and ↓1+2
Comments2

Памяти Кевина Митника — хакера, ломавшего ФБР, АНБ и Кремниевую долину. Часть 1: бурная юность тёмного гения

Level of difficultyEasy
Reading time9 min
Views48K

16 июля 2023 года в возрасте 59 лет наш мир покинул Кевин Митник — один из самых знаменитых и архетипичных хакеров в истории. В середине 90-х он считался самым разыскиваемым хакером в мире, и было за что: Митник лихо взламывал сети корпораций и правительства США, обходил большинство систем безопасности, прослушивал агентов ФБР, добывал тонны конфиденциальной информации и данных о банковских картах, включая счета топов Кремниевой долины, — вот только денег, как считается, он никогда не воровал. Ну а закрыв проблемы с американским законом, Кевин Митник превратился в одного из лучших специалистов по кибербезопасности. Вспомним о человеке, на основе которого во многом и сформировался классический образ хакера 90-х годов.
Читать дальше →
Total votes 60: ↑56 and ↓4+74
Comments34

React Fiber & Concurrency Part 2 (2)

Level of difficultyEasy
Reading time8 min
Views5K

Данная статья посвящена реализации не блокирующего рендеринга - Concurrent React. Мы рассмотрим то, как работают под капотом Concurrent Features добавленные в 18 версии React. На основе теоретических знаний разберем результат профилирования тренировочного приложения и наглядно увидим, как Concurrent Features разбивают рендеринг приложения.

В статье также приложено множество ссылок на исходники React, чтобы вы могли самостоятельно погрузится в эту тему.

Читать далее
Total votes 3: ↑3 and ↓0+3
Comments0

Продвинутый телеграмм бот на Java (Spring, postgres и free deploy)

Level of difficultyMedium
Reading time13 min
Views24K

На дворе 2023 год. На хабре до сих пор пишут статьи по созданию телеграмм ботов, скажите вы, но не спешите с выводами. Во-первых, пожалеем студентов, во многих вузах на программистских направлениях до сих пор заставляют писать ботов хотя бы раз в течение обучения. И многие гайды в интернете немножко outdated в плане деплоя (хероку умер, доздравствует... но об этом немного позже). Т.е. основным уклоном данной статьи будет именно этот аспект. Ну и сам бот у нас будет также не скучный и не самый простой, какие часто в гайдах, а с полноценной привязкой к базе данных, т.е. полноценное Spring приложение.

Ну так о чем же бот и как мне пришла в голову такая идея?

Читать далее
Total votes 5: ↑3 and ↓2+1
Comments2

Как сделать эффект Parallax с помощью CSS

Level of difficultyEasy
Reading time15 min
Views15K


Параллакс-скроллинг может улучшить восприятие сайта, сделав его более запоминающимся, динамичным и иммерсивным. Техника параллакс-скроллинга создает эффект трехмерности, что придает веб-странице большую глубину. Однако здесь есть свои нюансы, о которых мы и поговорим.

В этой статье мы рассмотрим, в каких ситуациях оправдано использование параллакс-скроллинга, разберем, как реализовать его с помощью CSS, и почему для этого стоит использовать именно CSS, а не JavaScript. Приведем несколько примеров CSS-параллакса, варианты его использования и лучшие практики.
Читать далее
Total votes 17: ↑14 and ↓3+13
Comments1

Реализация Server-Side Rendering (SSR) при помощи Bun и React

Level of difficultyEasy
Reading time7 min
Views7.9K

Bun — «швейцарский нож» для JavaScript, который все ждали, наконец релизнулся и уже стал геймченджером. Bun представляет собой универсальную среду выполнения JavaScript и набор инструментов, рассчитанный на высокую скорость работы. В его состав входят бандлер, тест-раннер, встроенная поддержка TypeScript и JSX и даже менеджер пакетов, совместимый с Node.js.

Дисклеймер: это вольный перевод статьи из блога Алекса Кейтса. С оригинальным постом можно ознакомиться здесь.

Читать далее
Total votes 2: ↑2 and ↓0+2
Comments7

Rematch — Redux без шаблонного кода

Level of difficultyEasy
Reading time7 min
Views3.8K

Сегодня я хотел бы рассказать о Rematch — библиотеке, которая предоставляет удобный и эффективный способ управления состоянием ваших веб-приложений. Если вы уже знакомы с Redux и ищете более простое и компактное решение, то Rematch может оказаться для вас полезным инструментом. 

В этой статье я предлагаю вам ознакомиться с основными преимуществами Rematch и покажу, как просто и эффективно использовать его для управления состоянием ваших приложений. Думаю, что, независимо от вашего опыта в разработке, вы найдете полезную информацию, которая поможет вам в повседневной работе.

Rematch предлагает удобный синтаксис и позволяет избежать написания многочисленных бойлерплейтов, свойственных Redux. С помощью него вы можете быстро создавать и организовывать Redux-хранилище, экономя при этом время и упрощая процесс разработки. Rematch идеально подходит для различных типов проектов, независимо от их размера и сложности.

С помощью Rematch вы можете определить модели (models) и их состояние, эффекты (effects) и редьюсеры (reducers). Он предоставляет удобные инструменты для работы с асинхронными операциями, а также возможность создания селекторов (selectors) для выборки данных из хранилища. Все это помогает организовать логику вашего приложения и управлять его состоянием с минимальными усилиями.

В первую очередь, я бы рекомендовал эту библиотеку тем, кто только начинает изучать управление состоянием приложений или пишет новый проект с нуля, потому что Rematch намного проще в освоении, чем многие другие библиотеки, обеспечивает гораздо более приятный интерфейс и, к тому же, намного легче.

Читать далее
Total votes 6: ↑4 and ↓2+3
Comments25

Конфигурируем веб-сервер для Next.js

Reading time3 min
Views21K

Казалось бы, что развёртывание приложений на Next.js не влечёт за собой трудностей - установил зависимости, сделал "npm run build && npm run start" и проксируешь запросы на 3000-ый порт, но для оптимальной работы предстоит сделать кое-что ещё.

Читать далее
Total votes 2: ↑2 and ↓0+2
Comments12

Service Workers. Инструкция по применению

Reading time9 min
Views142K


Количество выходов в интернет с мобильных устройств ежегодно растёт на 2-4% в год. Качество связи не успевает за такими темпами. Как итог, даже самое лучшее веб-приложение обеспечит ужасный опыт, если пользователь не сможет его загрузить.

Проблема в том, что до сих пор нет хорошего механизма управления кэшем ресурсов и результатов сетевых запросов. В своей статье я хочу рассказать как Service Worker (SW) может помочь в решении этой задачи. Объясню в формате рецептов — какие элементы и в какой пропорции смешать, чтобы получить нужный результат, исходя из задачи и требований.
Поехали!
Total votes 57: ↑57 and ↓0+57
Comments40

ESLint. Анатомия правил линтинга: разбираем структуру, создаём собственное правило для React-приложения

Level of difficultyMedium
Reading time13 min
Views21K

Всем привет! Меня зовут Анастасия Щедрина, я технический лидер по фронтенду проекта размещения объявлений в компании Домклик. Сегодня я расскажу вам немного о том, как устроены правила в ESLint, и покажу на примере, как можно разработать собственные.

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

Читать далее
Total votes 28: ↑28 and ↓0+28
Comments1

Учим PixiJS на играх

Level of difficultyEasy
Reading time60 min
Views28K

В статье описал разработку 13-ти игр на PixiJS. Около 70% текста - это описание механики игр, остальное - реализация на PixiJS. Получилось много текста, т.к. описывать советы для PixiJS интереснее с примером из игр.
Самая последняя игра будет самой сложной и интересной.

Читать далее
Total votes 21: ↑20 and ↓1+23
Comments6

Information

Rating
Does not participate
Registered
Activity

Specialization

Frontend Developer, Web Developer
Lead
From 250,000 ₽
JavaScript
TypeScript
React