Pull to refresh
-2
0.2
Олег Бубнов @bubn0ff

Frontend-developer

Send message

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

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

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



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

Протокол HTTP

Level of difficultyMedium
Reading time14 min
Views26K

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

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

Читать далее
Total votes 47: ↑44 and ↓3+57
Comments31

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

Level of difficultyEasy
Reading time6 min
Views8.3K

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

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

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

Reading time10 min
Views15K

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

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

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

Level of difficultyEasy
Reading time16 min
Views31K

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

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

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

Читать далее
Total votes 36: ↑31 and ↓5+31
Comments22

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

Reading time2 min
Views89K

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

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

Читать далее
Total votes 217: ↑186 and ↓31+198
Comments495

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

Level of difficultyMedium
Reading time6 min
Views3.9K


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


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

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

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

Читать дальше →
Total votes 36: ↑35 and ↓1+52
Comments6

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

Level of difficultyMedium
Reading time13 min
Views70K

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

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

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

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

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

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

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

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

Интересны детали? Добро пожаловать под кат
Total votes 59: ↑58 and ↓1+69
Comments142

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

Level of difficultyEasy
Reading time7 min
Views9.1K

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

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

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

REST API на котиках

Level of difficultyEasy
Reading time7 min
Views25K

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

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

Читать далее
Total votes 63: ↑60 and ↓3+61
Comments26

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

Level of difficultyEasy
Reading time4 min
Views8.2K

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

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

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

Level of difficultyEasy
Reading time7 min
Views25K

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

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

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

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

Level of difficultyMedium
Reading time6 min
Views15K

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

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

Узнать лучшие практики
Total votes 23: ↑22 and ↓1+25
Comments6

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

Reading time4 min
Views45K


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


Средства отладки VS Code и jest от Facebook
Читать дальше →
Total votes 25: ↑22 and ↓3+19
Comments10

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

Reading time19 min
Views5.6K

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


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


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


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


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


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


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

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

Level of difficultyMedium
Reading time18 min
Views3.4K

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

Читать далее
Total votes 10: ↑9 and ↓1+8
Comments4

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

Reading time6 min
Views3.6K


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

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

Level of difficultyEasy
Reading time13 min
Views14K

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

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

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

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

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

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

Читать далее
Total votes 31: ↑30 and ↓1+32
Comments16

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

Level of difficultyEasy
Reading time12 min
Views10K

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

Читать далее
Total votes 22: ↑21 and ↓1+26
Comments2

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

Level of difficultyMedium
Reading time12 min
Views22K

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

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

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

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

Information

Rating
2,266-th
Location
Россия
Registered
Activity