Пользователь
Привет, Хабр. Я Сергей, фронтенд-разработчик в Clevertec. И сегодня поделюсь опытом использования обновленной 7-й версии React Router. Расскажу, как мы реорганизовали структуру роутинга. Покажу, как избавились от лишних «букав кода», улучшили производительность приложения, создали навигацию по страницам и еще много полезного.
Оптимизация производительности в react - очень тонкая работа, требующая хорошего понимания внутреннего устройства работы библиотеки. Но порой, уже хорошо известные понятия такие как контекст и композиция позволяют неплохо повысить отзывчивость вашего приложения.
Как всего одна небольшая React-задача помогает глубже понять уровень кандидата на собеседовании? Разбираем нюансы работы с хуками, асинхронностью, состоянием гонки и сайд-эффектами. На первый взгляд задача кажется простой - всего лишь компонент, загружающий данные по username. Но в процессе решения выявляются ключевые моменты: правильно ли кандидат управляет состоянием, учитывает ли смену пропсов, обрабатывает ошибки и предотвращает race conditions. Этот вопрос помогает не просто проверить знания, а увидеть, как кандидат рассуждает и принимает технические решения.
Асинхронный код часто становится камнем преткновения для начинающих разработчиков. Почему функции выполняются не в том порядке, зачем нужны промисы, и что делает async/await? В статье я простыми словами объясняю:
• Как работает Event Loop и почему это важно.
• Какие ошибки чаще всего допускают джуны при работе с асинхронностью.
• Как научиться писать понятный и предсказуемый асинхронный код.
Если асинхронность вызывает больше вопросов, чем ответов, загляните в статью - там всё по шагам. 🙂
В данной статье я более подробно рассуждаю про чистый код, документацию, сравниваю микросервисы и монолиты и рассказываю про модульный подход, благодаря которому можно заложить фундамент для масштабируемого приложения.
Всем привет, меня зовут Павел Рожков, я lead фронтенда в компании Doubletapp. Мы занимаемся заказной разработкой, и в нашей работе над React-проектами важную роль играет наш архитектурный гайдлайн, который мы постоянно совершенствуем. Это свод договоренностей о том, каким образом будет организован код в нашем проекте.
Гайдлайн помогает нам:
• Безболезненно менять состав команд на проектах между собой. Каждый может заменить коллегу или усилить команду, минуя этап долгого онбординга.
• Сократить время разработки. У нас часто не возникает вопроса, как здесь сделать лучше, куда что положить, как организовать. Мы подумали об этом заранее.
• Поддерживать старые проекты, т.к. они написаны по тем же принципам.
• Поднять качество кода: работать на проекте становится удобнее и можно сосредоточиться на важных вещах.
• Онбордить новых членов команды благодаря готовой документации.
Содержание:
• Почему бы нам просто не взять FSD?
• Шаблон проекта с архитектурой
• Структура кода приложения
• Заключение
Расширения браузера это web-приложения, которые устанавливаются в web-браузер чтобы расширить его возможности. Обычно для того чтобы воспользоваться расширением, пользователю нужно найти его в Chrome Web Store и установить.
В этой статье я покажу как создать расширение для браузера Google Chrome с нуля. Это расширение будет использовать API браузера для того чтобы получить доступ к содержимому web-страницы любой открытой вкладки. С помощью этих API можно не только читать информацию с открытых web-сайтов, но и взаимодействовать с этими страницами, например, переходить по ссылкам или нажимать на кнопки. Таким образом расширения браузера могут использоваться для широкого круга задач автоматизации на стороне клиента, таких как web-scrape или даже автоматизированное тестирование фронтенда.
Мы создадим расширение, которое называется Image Grabber, которое будет содержать интерфейс для подключения к web-странице и для извлечения из нее информации о всех изображениях. Далее, при нажатии на кнопку "GRAB NOW" список абсолютных URL этих изображений будет скопирован в буфер обмена. В этом процессе вы познакомитесь с фундаментальными строительными блоками, которые в дальнейшем можно будет использовать для создания других расширений.
Расширения, создаваемые таким образом для браузера Chrome совместимы с другими браузерами, основанными на движке Chromium и могут быть установлены, например, в Yandex-браузер или Opera.
В результате, при правильном выполнении всех шагов, вы получите расширение, которое будет выглядеть и работать так, как показано на следующем видео:
Когда вы покупаете стиральный порошок, выбор просто обескураживает. Все средства, скорее всего, сделают ваше бельё немного чище. Но что даст наилучший результат для вашего белья и вашего бюджета?
Хотите ли вы получить белое бельё? Нужны ли вам энзимы? И в чём разница между порошком и жидким моющим средством?
Как это часто бывает, ответить на эти вопросы поможет знание химии.
Что такое стиральный порошок?
Активными ингредиентами как порошков, так и жидкостей для стирки являются «поверхностно-активные вещества», также известные как детергенты (поэтому по-английски продукт называется «laundry detergent»). Как правило, это заряженные молекулы, ионы, которые имеют две различные части в своей структуре. Одна часть хорошо взаимодействует с водой, а другая — с маслами.
Привет, Хаброжители!
Привет, Хабр! На связи Марина Гончарова. Сейчас я занимаю роль старшего менеджера проектов в Купере и работаю над задачами, которые затрагивают по несколько подразделений сразу. Но до этого я долго была проджектом в кросс-функциональных командах.
В этой статье я поделюсь мыслями о том, зачем тимлиду отказываться от кодинга, могут ли котов пасти другие звери и почему тимлидство — это не карьерный рост для разработчика.
Дисклеймер: всё, о чём я пишу далее, — моё личное мнение, основанное на десяти годах в менеджменте. Если у вас другой опыт, буду рада обсудить его в комментариях.
Привет, Хабр! Меня зовут Алексей Топчий, я уже более 20 лет работаю в IT. Прошёл все уровни: бэкенд, фронтенд, фулстек со множеством языков и технологий. В СберТехе занимался Единой фронтальной системой, в Яндексе участвовал в стартапе, связанном с FMCG. Сейчас занимаюсь сервисом ценообразования в сети магазинов «Пятёрочка» (X5 Group).
В этой статье я приоткрываю тайну бэк-офиса современного магазина и делюсь опытом, как мы развиваем программный комплекс, что интересного при этом происходит, с какими проблемами сталкиваемся и как их решаем. Статья будет полезна архитекторам, техническим менеджерам и всем, кто интересуется преобразованием корпоративных IT-ландшафтов.
Во фронтенде часто приходится вызывать асинхронные функции одну за другой, а потом отменять всю цепочку. У каждого опытного разработчика есть свои методы. В этой статье я хочу поделиться своим опытом: как прервать выполнение цепочки вызовов изнутри и снаружи, как обрабатывать ошибки, как перестать ждать результат асинхронной функции и как её можно отменить.
Интересно? Тогда добро пожаловать под кат!
Мой опыт работы в продажах в различных компаниях многому меня научил. Одним из ключевых инструментов, без которого невозможен эффективный процесс продаж, является CRM-система. Для руководителей и менеджеров по продажам она должна решать множество задач и отвечать на целый ряд вопросов. Но об этом чуть позже.
На рынке представлено не так много распространённых CRM-систем для управления продажами, и в большинстве компаний мне приходилось работать именно с ними. В некоторых случаях я сталкивался с кастомными решениями, которые значительно упрощали жизнь пользователю благодаря удобному интерфейсу и гибкости. Поэтому на собеседованиях я часто задавал вопрос о CRM-системе компании. Разочарование наступало, когда выяснялось, что в компании используют "шаблонные" решения, которые не всегда соответствовали требованиям пользователей.
Ещё до того, как я начал заниматься разработкой, мне пришла идея поучаствовать в создании собственной CRM-системы и глубже погрузиться в процесс её разработки. Спустя несколько лет я начал заниматься веб-разработкой, и в какой-то момент понял, что даже небольшому бизнесу, где я работал, нужна CRM. Я пробовал использовать таблицы в Google Docs, тестировал триальные версии популярных CRM, но они были перегружены ненужной информацией и казались неудобными. Так что я решил создать что-то простое, что будет удобно мне и, возможно, другим.
В своей CRM я использую Next.js. Эта система не претендует на то, чтобы обслуживать тысячи пользователей, но она точно может решить задачи 1-2 небольших отделов продаж. У меня есть репозиторий на GitHub, и если кому-то это решение покажется интересным, его можно взять и доработать под свои задачи. В этой статье я постараюсь кратко описать текущий функционал, с какими трудностями я столкнулся и что удалось внедрить в качестве новых гипотез.
Хочется вспомнить SOLID принципы и рассмотреть, как можно их применять в разработке интерфейсов на примере React компонентов.
S: Single Responsibility Principle (Принцип единственной ответственности). Означает, что каждый класс/функция/компонент должны выполнять только одну конкретную задачу.
На примере React компонента: компонент, который отрисовывает пользовательский интерфейс, не должен содержать в себе логику авторизации этого пользователя.
O: Open-Closed Principle (Принцип открытости-закрытости). Означает, что класс/функция/компонент должны быть открыты для расширения, но закрыты для модификации. Чтобы их можно было расширять новым функционалом, не изменяя при этом исходный код.
Какие предположения можно сделать относительно следующего HTTP ответа сервера?
Глядя на этот небольшой фрагмент HTTP ответа, можно предположить, что веб-приложение, вероятно, содержит уязвимость XSS.
Почему это возможно? Что обращает на себя внимание в этом ответе сервера?
Вы будете правы, если сомневаетесь насчет заголовка Content-Type. В нем есть незначительный недостаток - отсутствие атрибута charset. Это может казаться неважным, однако, в этой статье мы объясним, как злоумышленники могут использовать этот недостаток для внедрения произвольного JavaScript кода на веб-сайт, сознательно изменяя набор символов, который ожидает браузер.
Хабр, привет! Я частенько пишу про работу CSS, его неизвестные возможности и влияние на доступность. Кажется, этих направлений мало для меня. Теперь я хочу показать техники вёрстки, используемые мной постоянно.
Цель — поделиться опытом с вами. Я использую не только трюки известных экспертов, есть лично мои придумки. Но, пожалуйста, относитесь к этому контенту, как просто альтернативному мнению. Мои техники не являются единственными правильными решениями.
Сегодня я расскажу:
+ при реализации нестандартных чекбоксов и радиокнопок;inset, сокращающее код на целых три строки;transform. 
Всем привет! Меня зовут Кирилл и я работаю фронтенд-разработчиком. Я расскажу о том, как мы перевели несколько тысяч файлов, написанных на JavaScript, с легаси кода, который использовал goog.module, на новые ES6-модули с помощью построения и преобразования абстрактного синтаксического дерева.
Эта статья будет полезна тем, у кого тоже возникла потребность в рефакторинге большого количества кода.
В 2024 году команда React готовит множество нововведений, приуроченных к выходу React 19.
Одним из таких нововведений является React Сompiler — новый JavaScript-компилятор для оптимизации вычислений. Главной целью разработчиков была оптимизация и автоматизация мемоизации в React-приложениях. Если раньше фронтендерам приходилось использовать такие хуки, как useCallback и useMemo, то вскоре React сам возьмёт на себя ответственность за мемоизацию, чтобы избежать повторных вычислений при каждом рендеринге.
Не будем затягивать со вступлением и сразу перейдём к пересказу.
