Как стать автором
Обновить
-2
0.2
Олег Бубнов @bubn0ff

Frontend-developer

Отправить сообщение

Concurrent Mode в React: адаптируем веб-приложения под устройства и скорость интернета

Время на прочтение10 мин
Количество просмотров24K
В этой статье я расскажу о конкурентном режиме в React. Разберёмся, что это: какие есть особенности, какие новые инструменты появились и как с их помощью оптимизировать работу веб-приложений, чтобы у пользователей всё летало. Конкурентный режим — новая фишка в React. Его задача — адаптировать приложение к разным устройствам и скорости сети. Пока что Concurrent Mode — эксперимент, который может быть изменён разработчиками библиотеки, а значит, новых инструментов нет в стейбле. Я вас предупредил, а теперь — поехали.

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



Конкурентный режим решает перечисленные проблемы. С ним React может приостанавливать, приоритизировать и даже отменять операции, которые раньше были блокирующими, поэтому в конкурентном режиме можно начинать отрисовывать компоненты независимо от того, были ли получены все данные или только часть.
Читать дальше →
Всего голосов 20: ↑19 и ↓1+25
Комментарии3

Протокол HTTP

Уровень сложностиСредний
Время на прочтение14 мин
Количество просмотров27K

Текстовая версия видео по протоколу HTTP из обновленного курса по компьютерным сетям для начинающих.

Рассматриваем основы работы HTTP, применяем HTTP на практике в терминале, используем Wireshark для анализа пакетов HTTP. 

Читать далее
Всего голосов 47: ↑44 и ↓3+57
Комментарии31

Как задеплоить сайт в облако. Инструкция для новичков

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров8.4K

Опубликовать сайт можно разными способами. Например, если проект лежит в репозитории на GitHub, можно воспользоваться GitHub Pages. Но если вы не боитесь трудностей, советуем попробовать кое-что поинтересней — разместить сайт на облачном сервере.

Новичкам этот способ может показаться сложным. Но на самом деле он очень удобен, потому что вы сможете легко масштабировать архитектуру проекта и гибко управлять мощностями сервера.
Читать дальше →
Всего голосов 34: ↑28 и ↓6+31
Комментарии18

Пайплайны в GitLab для микросервисов

Время на прочтение10 мин
Количество просмотров16K

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

Начнем с основ на примере монолитного приложения, а потом усложним их микросервисами и постараемся избавиться от однотипного кода. А еще…
Читать дальше →
Всего голосов 57: ↑57 и ↓0+74
Комментарии4

Мегагайд: культура работы с Git

Уровень сложностиПростой
Время на прочтение16 мин
Количество просмотров32K

Привет всем! Меня зовут Юля, я фронтенд-разработчик, наставник на курсах по JS и React и организатор профессионального сообщества Tbilisi JS. В Практикуме я помогаю студентам на курсе «React-разработчик».

За время работы в разных компаниях и над разными проектами я поняла, что Git — это не только (и не столько!) знание самой технологии и конкретных команд, но и определённая культура взаимодействия, практики, подходы, договорённости. Всё это помогает участникам команды лучше понимать друг друга и работать быстрее и чётче.

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

Читать далее
Всего голосов 36: ↑31 и ↓5+31
Комментарии22

Памятка наемного айтишника

Время на прочтение2 мин
Количество просмотров89K

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

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

Читать далее
Всего голосов 217: ↑186 и ↓31+198
Комментарии495

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 8

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров4K


Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня мы рассмотрим следующие аспекты:

  • какие скрытые проблемы с паттерном «visually-hidden» нас ждут;
  • в каких ситуациях кнопка «Закрыть» указывает на выход;
  • чем вредно значение contents у свойства display;
  • почему подсказка с помощью атрибута aria-label вызывает недоумение.

Давайте начнём!

Читать дальше →
Всего голосов 36: ↑35 и ↓1+52
Комментарии6

Как стать VPN провайдером за один вечер

Уровень сложностиСредний
Время на прочтение13 мин
Количество просмотров76K

Рассказываю о своём опыте использования Xray (с протоколом VLESS-Reality) - одного из лучших решений для преодоления интернет-цензуры на сегодняшний день. Я потратил много времени на то, чтобы разобраться с ним - теперь вам достаточно одного вечера, чтобы поднять свой сервер на несколько десятков пользователей, c xray на борту!

скрипт ex.sh для простой настройки и установки; есть поддержка Docker

легко добавлять пользователей; клиентские конфиги в форме url-ссылок

правильные конфиги: скрытность + удобство

трафик популярных российских сайтов идёт напрямую, a не через сервер

для xray есть приложения под все популярные ОС - делюсь инструкциями

только https, нет udp; торренты через сервер блокируются по возможности

мой проект на гитхабе: easy-xray

Интересны детали? Добро пожаловать под кат
Всего голосов 59: ↑58 и ↓1+69
Комментарии142

Безопасность веб-приложений для самых маленьких фронтов

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров9.1K

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

Статья подготовлена по материалам внутреннего митапа по информационной безопасности.

Читать далее
Всего голосов 19: ↑18 и ↓1+19
Комментарии7

REST API на котиках

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров25K

Привет любителям котиков! Меня зовут Юля, я backend‑разработчик компании CDEK. Я сама не так давно изучала все эти сложные понятия в программировании, поэтому решила помочь и вам разобраться с одним из них.

С какой стороны IT вы бы не пытались войти — в какой‑то момент столкнётесь с понятием REST API. Эта статья создана, чтобы смягчить данное столкновение. Новые темы всегда легче воспринимаются на простых примерах, ну а если это примеры с котиками, то варианта не разобраться просто нет. Хочется обойтись без сложных научных определений, а рассказать самым простым языком. Поэтому, если вы любите сухие и точные формулировки, то вам нужна другая статья :)

Читать далее
Всего голосов 63: ↑60 и ↓3+61
Комментарии26

Вспомнить за майские: 20 шагов для апгрейда информационной безопасности

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров8.2K

Каждый год растет количество взломов сервисов, хакерских атак, утечек персональных данных. Особенно это видно за 2023 год. Открываешь Tadviser — и волосы дыбом встают.

В этом тексте даем базовую информацию о том, как защитить инфраструктуру, не потерять данные клиентов, подготовиться к новым угрозам и эффективно им противодействовать. А еще — делимся чек-листом для повышения уровня безопасности. Подробности под катом!
Читать дальше →
Всего голосов 41: ↑38 и ↓3+51
Комментарии1

Пошаговая шпаргалка по защите сервера от хакеров и другой нечисти

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров25K

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

Представьте: вот арендовали вы сервер, запустили на нем SAMP или Minecraft, а через время видите, как наступает хаос. Виртуальную машину взломали и с открытым фанатизмом портят сборку плагинов, которую вы так долго делали.

Привет! На связи Йети — самый йетический автор Vscale. Это моя первая статья на Хабре. В ней я расскажу, как защитить сервер от хактевистов и другой нечисти. Подробности под катом! :)
Читать дальше →
Всего голосов 62: ↑53 и ↓9+61
Комментарии23

Best Practices по подключению к сторонним API в проекте

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров15K

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

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

Узнать лучшие практики
Всего голосов 23: ↑22 и ↓1+25
Комментарии6

Отладка React-приложений в VS Code

Время на прочтение4 мин
Количество просмотров45K


Прошли те дни, когда мне, в процессе разработки, приходилось тратить время, переключаясь между терминалом, браузером и редактором. Теперь всё делается иначе — быстрее и удобнее. Сегодня я расскажу об оптимизации повседневных дел React-разработчика. А именно, речь пойдёт о том, как связать Visual Studio Code и Google Chrome. Это даст возможность отлаживать браузерный код в редакторе.


Средства отладки VS Code и jest от Facebook
Читать дальше →
Всего голосов 25: ↑22 и ↓3+19
Комментарии10

Типовые ситуации при непрерывной интеграции

Время на прочтение19 мин
Количество просмотров5.6K

Вы изучили команды Git но хотите представлять, как непрерывная интеграция (Continuous Integration, CI) происходит в реальности? Или может вы хотите оптимизировать свои ежедневные действия? Этот курс даст вам практические навыки непрерывной интеграции с использованием репозитория на GitHub. Данный курс не задуман как некий визард, который можно просто прокликать, напротив, вы будете совершать те же действия, что люди на самом деле делают на работе, тем же способом, которым они это делают. Я буду объяснять теорию по мере прохождения вами имеющих к ней отношение шагов.


Что мы будем делать?


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


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


Шаги непрерывной интеграции


Вы пройдёте такие стандартные для CI сценарии:


  • Работа над фичей;
  • Применение автотестов для обеспечения качества;
  • Реализация приоритетной задачи;
  • Разрешение конфликта при слиянии ветвей (merge conflict);
  • Возникновение ошибки в продуктивной среде.
Читать дальше →
Всего голосов 9: ↑8 и ↓1+12
Комментарии8

Создание библиотек и публикация в npm

Уровень сложностиСредний
Время на прочтение18 мин
Количество просмотров3.5K

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

Читать далее
Всего голосов 10: ↑9 и ↓1+8
Комментарии4

Знакомство с Jest Mocks

Время на прочтение6 мин
Количество просмотров3.7K


Мокинг — это техника изоляции объектов тестирования путем замены зависимостей объектами, которые можно проверять и контролировать. Зависимостью может быть всё, от чего зависит объект, но обычно это модуль, который объект импортирует.
Читать дальше →
Всего голосов 10: ↑9 и ↓1+12
Комментарии0

Как выжить на первом испытательном сроке в IT и не только

Уровень сложностиПростой
Время на прочтение13 мин
Количество просмотров14K

Всем привет! Меня зовут Артём Харченков, и я руководитель подразделения разработки программных продуктов в компании Crosstech Solutions Group. Сегодня я расскажу, как успешно пройти свой первый испытательный срок, что нужно делать обязательно и чего лучше не делать. 

Для начала – кратко обо мне, чтобы было понятно, почему мне стоит доверять в таком вопросе.

/слайд обо мне/

Образование у меня ИБ-шное, в ИТ я работаю с 2012 года. За свою карьеру занимался внедрением, был разработчиком, инженером, главным техническим специалистом в группе разработчиков и даже делал проекты практически в одиночку :) В «Кросстех Солюшнс Групп» руковожу разработкой чуть более трех лет. Здесь мы создаем системы для обеспечения безопасности данных, сейчас импортозамещаем зарубежные продукты, ушедшие с российского рынка. К слову, активно нанимаем сотрудников: еще в прошлом году в компании было 50 человек, а в этом году стало уже больше 200.

В моем управлении четыре департамента: разработка, тестирование, системная аналитика и devops, суммарно нас на текущий момент уже 29 человек. За свою карьеру я сам прошел несколько испытательных сроков, а самое главное – повидал много работников, которые его проходили. 

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

Читать далее
Всего голосов 31: ↑30 и ↓1+32
Комментарии16

Настраиваем CI/CD с GitHub Actions и werf: инструкция для новичков

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров10K

В этой статье мы рассмотрим, как настроить пайплайн CI/CD в GitHub: подготовим репозиторий, зальём туда приложение, создадим файлы конфигурации GitHub Actions, в которых опишем, как собирать наше приложение и деплоить его в кластер Kubernetes, развёрнутый под управлением Deckhouse Kubernetes Platform. Деплоить будем с помощью Open Source CLI-утилиты werf. Она помогает организовать полный цикл доставки приложений в Kubernetes и рассматривает Git как единый источник истины для состояния развёрнутого приложения. Статья рассчитана на тех, кто только начинает свой путь в мире облаков и кластеризации.

Читать далее
Всего голосов 22: ↑21 и ↓1+26
Комментарии2

Делаем код-ревью правильно

Уровень сложностиСредний
Время на прочтение12 мин
Количество просмотров22K

В начале своей карьеры я как-то работал над одним заказом, создавая платформу сентимент-анализа для социальных сетей. В то время Twitter ещё был Twitter’ом. Наша команда состояла из семи человек, среди которых я был джуниором. Мы были молоды и полны энтузиазма. Наш девиз можно было описать как: «Мы гибкие, быстрые и всё ломаем!». Да, мы действительно гордились своей скоростью. Код-ревью? Я вас умоляю. Мы считали эту практику бюрократическим пережитком корпоративного мира.

И что вы думаете? Через несколько месяцев наша база кода стала подобна минному полю. Причём баги нас волновали меньше всего, хотя их была уйма. Реальная проблема заключалась в том, что никто не мог понять код, написанный другими. У нас во многих местах дублировалась логика, и в модулях использовались разные стили кода. Всё было очень печально.

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

Итак, в двух словах: если вы не проводите код-ревью, или делаете их «для галочки», то обрекаете себя на боль, пусть не сразу, но в конечном итоге однозначно. Это можно сравнить с возведением дома на фундаменте из песка. Какое-то время он, может, и простоит, но явно недолго. А в мире стартапов второго шанса у вас может уже не быть.
Читать дальше →
Всего голосов 50: ↑48 и ↓2+70
Комментарии26
1
23 ...

Информация

В рейтинге
2 499-й
Откуда
Россия
Зарегистрирован
Активность