ReactJS *

Всем привет! Меня зовут Олег и я fullstack-программист в компании Тензор. Опыт в разработке, без малого, 20 лет (как-то раз батя спаял на кухне ZX Spectrum и все заверте..., сам не понял как так вышло). В данный момент являюсь тимлидом собственной команды разработчиков, которая периодически нуждается в пополнении толковыми программистами.

Как и многие руководители, я активно принимаю участие в подборе сотрудников для себя и помогаю на собесах коллегам соседних отделов.

Наша команда занимается разработкой веб-приложения на React. Соответственно, мне важно найти программистов уверенно владеющих основами (!) этого фреймворка. Есть много способов проверки компетенций на собеседовании, один из любимых - задача по написанию hook для загрузки данных.

Если вы тоже в вечном поиске классных фронтендеров или сами часто проходите собесы - велком в эту статью :)

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

react-afc - библиотека для более простого уменьшения количества ненужных ререндеров дочерних компонентов.

Здравствуйте!

Коротко о чем тут, чтобы вы могли понять, нужно ли оно вам или нет.

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

Сразу напишу, что это, скорее, не статья, а открытие дискуссии. Я уверен, что по этой теме было создано огромное количество материала, но вдруг в момент выхода моего — какой‑нибудь прошлый я прочтет это и о чем‑нибудь задумается. Если это поможет хотя бы одному — это было не зря.

Почему это дискуссия? Потому что я не могу утверждать, что это правильное решение или что это в принципе хорошее решение для действительно больших проектов. Я не знаю. Но в тоже время, чисто логически, это выглядит как правильное решение и все последние проекты которые я делал с этим подходом — легко поддерживаются и разрабатываются. Надеюсь, что более опытные разработчики оставят отзыв или комментарий на эту тему и по этому материалу.

И снова всем привет! Продолжение к переводу второй части книги Patterns.dev

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

Напомню, что авторы Patterns.dev:
Лидия Холли — штатный консультант и преподаватель по разработке программного обеспечения, которая в основном работает с JavaScript, React, Node, GraphQL. Она также занимается наставничеством и проводит личные тренинги.
Эдди Османи — технический менеджер, работающий над Google Chrome. Его команды работают над такими проектами, как Lighthouse, PageSpeed ​​Insights, Chrome User Experience Report и другими.

Материал книги будет полезен не только React‑разработчикам, но и всем, кто так или иначе интересуется или сталкивается с frontend‑разработкой. Это ознакомительная часть перевода учебника https://www.patterns.dev/. Перевод всей третьей части учебника можно найти здесь.

P. P. S.: Третья часть взята из книги: https://www.patterns.dev/, переведена на русский язык. Книга находится под лицензией CC BY-NC 4.0

Данный адаптированный материал распространяется на условиях лицензии Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)

При работе с React и TypeScript вы часто сталкиваетесь с подобными ошибками:

const onChange = (e) => {}; // Parameter 'e' implicitly has an 'any' type.

<input onChange={onChange} />;

Не всегда понятно, какой тип следует присвоить пременнойe внутри функции onChange.

Это может произойти с onClick, onSubmit или любым другим обработчиком событий, которые получают элементы DOM.

К счастью, есть несколько решений:

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

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

Если вы следите за новинками экосистемы JavaScript, то должны были слышать об интересной библиотеке пользовательского интерфейса (user interface, UI) под названием shadcn/ui. Вместо того, чтобы распространяться в виде пакета npm, компоненты shadcn/ui добавляются с помощью интерфейса командной строки (command line interface, CLI), который помещает исходный код компонентов непосредственно в ваш проект. Разработчик библиотеки указывает причину такого решения на официальном сайте shadcn/ui.

"Почему код для копирования/вставки, а не библиотека?

Идея заключается в том, что вы полностью владеете и контролируете код. Это позволяет вам решать, как именно будут построены и оформлены ваши компоненты.

Начните с настроек по умолчанию, а затем кастомизируйте компоненты под свои нужды.

Используя пакет npm, можно наткнуться на один недостаток — стиль всегда связан с реализацией. Дизайн компонентов должен быть отделен от их реализации".

На самом деле, shadcn/ui — это не просто очередная библиотека компонентов, а технология, позволяющая представить дизайн-систему в виде кода.

Цель этой статьи — изучить архитектуру и реализацию shadcn/ui.

Если вы еще не использовали shadcn/ui, я советую просмотреть ее документацию и немного поэкспериментировать с ней, чтобы извлечь из статьи максимальную пользу.

Привет, Хабр! Меня зовут Саша, я Full-Stack разработчик и последние 7 лет пишу фронтенд, 6 из которых я работаю в американском стартапе. 

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

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

Недавно компания Facebook* (aka Meta**) выпустила в опенсорс собственную CSS-in-JS библиотеку под названием StyleX. По заявлениям разработчиков, она отлично подходит для больших проектов и ключевым ее преимуществом является перфоманс.

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

Верней оформил 5 декабря 2023 года оформил для всех то, чем его разработчики пользуются уже давно. Позиционируется данный помощник для js-подобных фреймворков типа React, Preact, Solid, lit-html и Angular, однако оперирующие html шаблонами Vue и Svelte тоже могут задействовать StyleX, но после предварительной специальной её кастомизации.

Код в React в итоге выглядит примерно так:

Привет! Меня зовут Фёдор, я фронтенд-тимлид в KTS и преподаватель школы Metaclass.

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

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

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

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

Со временем у разработчика опытным путем или с чтением хорошей технической литературы нарабатывается чувство чистого кода, но что делать новичкам? В этой статье я не буду долго мучать теорией про чистый код и паттерны —  про это уже было в Симпсонах в учебниках, конференциях и на Хабре в том числе. Но приведу примеры плохого (на мой взгляд) кода в приложениях на React и JavaScript — и также покажу, как его улучшить.

Надеюсь, что начинающим моя статья будет полезна — и после прочтения они смогут применить всё на практике.

Привет, меня зовут Филипп, я фронтенд-разработчик в KTS.

Visual Studio Code — это бесплатный, шустрый (что важно на больших проектах) и глубоко кастомизируемый редактор кода.

В статье расскажу, какие настройки и плагины VS Code использует наша команда фронтенда в KTS. Материал может быть полезен для JavaScript- и React-разработчиков, а ещё для тех, кто уже давно пользуется VS Code, но не знает о некоторых полезных плагинах и фичах для повседневного использования. 

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

Также я рассмотрел инструменты для оптимизации работы с Git, шаблоны директорий и другие возможные настройки.

По аналогии с принципом LSP из ООП, при работе с функциями в Typescript стоит придерживаться следующего принципа:

Принимая колбэк с меньшим числом аргументов, оборачивайте его, прежде, чем передавать его далее в качестве колбэка с большим числом аргументов.

Статья является продолжением первой части, в которой была обучена нейронная сеть для решения задачи соревнования Digit Recognizer на Kaggle. В предыдущей статье был использован трюк, который увеличил точность нейронной сети в контексте результатов соревнования (до 0.99 896), в результате чего позиция автора в лидерборде значительно выросла. В данной статье мы рассмотрим каким образом можно интегрировать и использовать обученную модель нейронной сети в систему для распознавания рукописных цифр.

Фронтенд-разработчик Дарья Саенко рассказывает, как в Авито реализовали микрофронтенды с поддержкой серверного рендеринга.

Разбираемся, что же такое conditional types и как написать свои утилиты, такие как ReturnType, InstanceType, NonNullable и др., при помощи ключевых слов infer и extends.

Давайте представим себе частый кейс - вы с бека получаете какой-то массив данных, из которых вы будете делать разметку, что будет содержимым вашей страницы.

Для примера возьмем список пользователей, и вам надо отрендерить этот список. Вам пришел массив и вы, не теряя времени, прогоняете его через map, создавая, таким образом свою разметку - вот так:

Запустили сайт HomeBro, который ищет квартиры сразу на всех топовых сайтах объявлений. Все предложения по недвижке на одной карте + уведомления о новых вариантах в телегу.