Pull to refresh
1
0
Vladislav @Logert

Front-end Developer

Send message

Архитектура front-end приложений — react, react native, angular. Обзор

Level of difficultyEasy
Reading time8 min
Views32K

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

Когда я провожу собеседование на позицию React разработчика, обычно задаю общий вопрос об архитектуре - "как бы ты строил архитектуру своего приложения и почему?". После обсуждения, я начинаю рассказывать небольшую часть материала из этой статьи, 5% по содержанию, приводя тезисы, по которым можно будет собрать общую картину моего видения. И обычно получаю положительную обратку. Поэтому решил изложить этот материал более развернуто здесь. Буду отправлять ссылку тем, кому это может пригодиться.

Читать далее
Total votes 14: ↑13 and ↓1+12
Comments15

Создаём npm пакет, совместимый с CJS, ESM, написанный на TypeScript

Reading time6 min
Views8.2K

Здравствуйте! Меня зовут Евгений, я бакенд разработчик в компании ClickON. Хотелось бы поделиться опытом создания npm пакета, который умеет встраиваться в CommonJS, ESModule проект. Опишем подводные камни, попытаемся сделать универсальный пакет, прикрутим алиасы.

Читать далее
Total votes 20: ↑19 and ↓1+18
Comments7

11 хитростей Chrome DevTools, которые помогут Вам стать Senior FrontEnd-разработчиком

Reading time4 min
Views57K

Я полагаю, вы знакомы с инструментами разработчика браузера Chrome. Мы можем использовать его для просмотра сетевых запросов, анализа производительности веб-страницы и отладки последних функций JavaScript.

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

Давайте посмотрим
Total votes 62: ↑56 and ↓6+50
Comments23

HTMHell — адовая разметка (25 плохих примеров)

Reading time32 min
Views17K

Перевод заметок с сайта HTMHell - коллекции плохих примеров HTML-кода, взятых из реальных проектов.

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

Читать далее
Total votes 12: ↑11 and ↓1+10
Comments10

Как избежать излишней сложности состояния приложения [перевод]

Reading time9 min
Views18K


Реализации Flux, такие как Redux, мотивируют нас уделять больше внимания проектированию состояния приложения. Оказывается, это нетривиальная задача. Это похоже на классический пример из теории хаоса, когда, казалось бы, безобидный взмах крыльев бабочки ведёт к далеко идущим последствиям. Ниже приведены советы, которые помогут вам лучше организовать состояние приложения.
Читать дальше →
Total votes 19: ↑19 and ↓0+19
Comments7

20 основных частей любого крупномасштабного React-приложения

Reading time6 min
Views15K

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

Приятного чтения!
Total votes 15: ↑10 and ↓5+5
Comments8

«Осторожно, печеньки!»: советы начинающим тестировщикам в сфере безопасности

Reading time12 min
Views37K

Привет, меня зовут Вика Бегенчева, я QA-инженер в Redmadrobot. Я расскажу, как злоумышленники крадут наши данные, и что можно сделать, чтобы от этого защититься. Статья написана для начинающих тестировщиков безопасности и тех, кому непонятно, что за «фрукты» эти хакеры и чем они там занимаются.

Читать далее
Total votes 9: ↑6 and ↓3+3
Comments8

Кастомизация компонентов Ant Design и оптимизация бандла

Reading time12 min
Views24K
The Archivist by juliedillon

Я Иван Копенков, ведущий фронтенд-разработчик в Mail.ru Cloud Solutions, в статье расскажу, какие есть подходы к кастомизации компонентов UI-библиотеки Ant Design, как это сделали мы, а так же покажу, как удалось полностью избавиться от неиспользуемых модулей и уменьшить размер бандла.

Если вы уже используете или собираетесь использовать библиотеку компонентов Ant Design, то из данной статьи сможете узнать, как можно делать это удобнее и эффективнее. Если вы используете другую библиотеку компонентов, то сможете использовать описанный подход в работе с вашей UI-библиотекой.
Читать дальше →
Total votes 31: ↑27 and ↓4+23
Comments8

Один совет, благодаря которому я успешно прошёл несколько собеседований

Reading time6 min
Views174K
— Что вы скажете, если я попрошу вас разработать сервис, который обрабатывает тысячи запросов в секунду с минимальной задержкой?

— Хм… Я скажу, что у вас в компании возникла такая проблема. Но у вас нет идей и вы обсуждаете её на собеседованиях с кандидатами :)

Именно так я ответил, когда мне впервые задали вопрос по архитектуре. Мы хорошо посмеялись. Но потом интервьюер всё-таки заставил меня спроектировать сервис.
Читать дальше →
Total votes 107: ↑101 and ↓6+95
Comments222

Бесплатные хостинги для веб-разработчиков

Reading time4 min
Views180K

Привет, Хабр!

Одним из наиболее популярных направлений разработки сегодня является веб. И когда нужно разместить свой проект где-нибудь, кроме localhost, многие сталкиваются с трудностями, ведь хостинг должен быть быстрым, удобным и, желательно, бесплатным :)

В этом списке вы найдете 15 бесплатных сервисов, где легко сможете разместить свой проект и не заплатите ни копейки. Погнали!

Читать далее
Total votes 40: ↑39 and ↓1+38
Comments38

АМА с Хабром #21. Тестируем новый WYSIWYG

Reading time3 min
Views6.4K

У меня есть причины не любить аббревиатуру WYSIWYG. Во-первых, я до сих пор не могу сходу её написать — всё время сначала проговариваю про себя расшифровку (What You See Is what You Get) и только потом пишу. Во-вторых, она ужасно читается, «визивиг» или, что ещё хуже, «висивиг» — отвратительнее только иметь дело с бандой tough-though-trough-through-thorough-thought-throw. В третьих, в ней аж две буквы «y», которая залипает в моём ноутбуке, но это так, совсем уж личное.

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

Профессиональное применение инструментов разработчика Chrome: 13 советов

Reading time7 min
Views33K
Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по профессиональной работе с инструментами разработчика браузера. А именно, эти советы рассчитаны на программистов, которые по какой-то причине решили, что их основным браузером будет Google Chrome.


Читать дальше →
Total votes 58: ↑57 and ↓1+56
Comments12

Собираешься работать в кибербезопасности? Прочитай это

Reading time6 min
Views37K
Автор статьи — Брайан Кребс, известный журналист в сфере информационной безопасности.

Каждый год из колледжей и университетов выходят тысячи выпускников по специальностям «информационная безопасность» или «информатика», абсолютно не подготовленных к реальной работе. Здесь мы посмотрим на результаты недавнего опроса, который выявил самые большие пробелы в навыках выпускников, а также подумаем, как кандидатам на работу выделиться из толпы.



Практически каждую неделю мне приходит минимум одно письмо от читателя, который просит совета, как начать карьеру в сфере ИБ. В большинстве случаев соискатели спрашивают, какие сертификаты им следует получить или у какой специализации самое светлое будущее.
Читать дальше →
Total votes 24: ↑21 and ↓3+18
Comments6

Визуальное сравнение 13 CSS-фреймворков

Reading time3 min
Views18K
Доброго времени суток, друзья!

Предлагаю Вашему вниманию результаты небольшого исследования — визуального сравнения 13 CSS-фреймворков.

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

В исследовании представлены следующие фреймворки:


Использовались следующие версии стилей:


Total votes 20: ↑16 and ↓4+12
Comments16

AdonisJS 5 — Laravel-подобный фреймворк на nodeJS и с Typescript достойный вашего внимания

Reading time2 min
Views7.5K
Состоялся релиз Adonis JS 5, на данный момент разработчики называют его preview версией, хотя в своем Discord они утверждают что по сути это production-ready версия фреймворка, а названа она preview потому-что еще не все необходимые пакеты были переписаны под версию 5, их скромности стоит позавидовать, от себя скажу что, версия 5 действительно заслуживает широкого внимания, на мой взгляд это один из лучших и простых фреймворков на которых стоит делать backend в 2020+ годах.
AdonisJS это Laravel-подобный фреймворк на NodeJS а теперь еще и на Typescript
Читать дальше →
Total votes 7: ↑5 and ↓2+3
Comments3

12 советов по внедрению TypeScript в React-приложениях

Reading time9 min
Views36K
TypeScript — стандарт современной фронтенд-разработки. Согласно исследованиям State of JavaScript, TS вызывает явный интерес у программистов. По данным опроса за 2019 год, почти 60% респондентов пробовали TS и продолжают использовать, 22% не пробовали и желают изучить.

Эта статья — сборник советов о том, как внедрить и улучшить использование TypeScript. Первая половина советов общая, касающаяся подходов и инфраструктуры. Вторая — несколько особо полезных фишек языка.


Читать дальше →
Total votes 60: ↑60 and ↓0+60
Comments43

Устройство расширений для браузера Firefox (WebExtensions)

Reading time38 min
Views15K

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


Тому, кто разбирается в веб-разработке, будет несложно создать новое расширение для браузера. Сейчас большинство самых популярных браузеров поддерживает стандартную систему разработки, которая использует в основном только JavaScript, HTML и CSS, — WebExtensions.


Человеку, который никогда раньше не создавал дополнение для браузера на основе WebExtensions, может быть тяжело сразу понять, из каких основных частей оно должно состоять и что может делать. В сети Интернет есть много информации об этой системе, но для того, чтобы создать для себя общую картину, придётся потратить много времени. Эта статья поможет быстро разобраться в устройстве системы WebExtensions и покажет, как лучше ориентироваться в документации к её API. Здесь описывается расширение для браузера Firefox, поэтому почти вся информация, используемая в статье, взята с сайта MDN. Но статья будет полезна и тем, кто хочет создать расширение для других браузеров, поддерживающих WebExtensions, — в первую очередь для Google Chrome и Chromium.


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


Читать дальше →
Total votes 22: ↑21 and ↓1+20
Comments3

Полная домашняя автоматизация в новостройке

Reading time8 min
Views218K
Три года назад стал претворять свою давнюю мечту в реальность — максимальная домашняя автоматизация квартиры, купленной в новостройке с нуля. При этом «отделку от застройщика» пришлось принести в жертву умному дому image и полностью переделать, а вся электрика, не связанная с автоматикой приехала с известного китайского сайта. Паяльник не потребовался, но знающих мастеров, электриков и плотников пришлось искать долго.


Панель управления квартирой в феврале 2020 года (Home Assistant)

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


Строительство нашего дома в процессе — ноябрь 2016 года
Умный дом в самом соку...
Total votes 138: ↑135 and ↓3+132
Comments514

10 React-компонентов на все случаи жизни

Reading time3 min
Views28K
Я полагаю, что для решения различных задач React-разработки лучше использовать маленькие узкоспециализированные инструменты, а не универсальные решения, предлагаемые библиотеками компонентов. Мне нравится выбирать компоненты самостоятельно, я не люблю читать длинную документацию, и мне хочется избежать бессмысленных обновлений библиотек, после которых в проекте нередко что-то ломается.



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

Материал, перевод которого мы сегодня публикуем, посвящён рассказу о 10 React-компонентах.
Читать дальше →
Total votes 46: ↑45 and ↓1+44
Comments15

70 вопросов по JavaScript для подготовки к собеседованию

Reading time43 min
Views863K
Доброго времени суток, друзья!

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

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

Буду признателен за развернутые комментарии. Все замечания будут учтены при редактировании статьи.

Итак, поехали.
Читать дальше →
Total votes 46: ↑43 and ↓3+40
Comments135

Information

Rating
Does not participate
Location
Минск, Минская обл., Беларусь
Date of birth
Registered
Activity