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

Frontend-developer

Send message

Как в git работает HEAD

Level of difficultyEasy
Reading time5 min
Views15K

Недавно я провела в Mastodon опрос о том, насколько мои читатели уверены в том, что они хорошо понимают работу HEAD в Git. Результаты (на основании примерно 1700 голосов) меня немного удивили:

10% — 100%

36% — достаточно сильно уверен

39% — уверен в некоторой степени

15% — представления не имею

Меня удивило, что люди не уверены в своём понимании: я-то считала, что HEAD — это довольно простая тема.

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

Читать далее
Total votes 20: ↑17 and ↓3+20
Comments21

Сборка мусора в V8

Reading time19 min
Views6.4K

В этой статье мы детально разберем процесс сборки мусора движком V8. Познакомимся с понятиями поколений, Minor и Major Garbage Collection, посмотрим, как аллоцируются, трассируются и маркируются объекты в памяти. Что происходит с пустыми областями после очистки, и как выполняется сборка мусора в фоновом режиме. 

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

Надежный обход блокировок в 2024: протоколы, клиенты и настройка сервера от простого к сложному

Level of difficultyMedium
Reading time46 min
Views228K

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

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

Читать далее
Total votes 445: ↑437 and ↓8+489
Comments366

Как я склеил картон и продал на маркетплейсах на 50 млн в год

Level of difficultyEasy
Reading time8 min
Views294K

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

Читать далее
Total votes 239: ↑217 and ↓22+244
Comments295

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

Level of difficultyEasy
Reading time14 min
Views11K

Привет! Меня зовут Егор Стеблин, я фронтенд-разработчик отдела спецпроектов в KTS.

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

В конце — пример целого письма в HTML.

Читать далее
Total votes 42: ↑40 and ↓2+40
Comments17

CSS для печати на бумаге

Reading time10 min
Views11K

По работе я довольно часто занимаюсь созданием генераторов печати на HTML для воссоздания и замены форм, которые компания традиционно заполняла от руки на бумаге или в Excel. Это позволяет компании переходить на новые веб-инструменты, в которых форма автоматически заполняется по параметрам URL из нашей базы данных, создавая при этом тот же результат на бумаге, к которому все привыкли.

В этой статье я объясню основы CSS, управляющие внешним видом веб-страниц при печати, и дам пару советов, которые могут вам помочь в этом.

Читать далее
Total votes 23: ↑22 and ↓1+28
Comments17

Ловкость рук, четкость алгоритма и никакого мошенничества: чек-лист для дизайнеров интерфейсов и фронтенд-разработчиков

Reading time10 min
Views13K

Привет, Хабр! Меня зовут Даша, я проектировщик интерфейсов в Selectel.

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

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

Шаги, примеры оформления и полезный шаблон ищите под катом. Рассчитываю, что текст будет полезен джунам и мидлам как в дизайне, так и во фронтенд-разработке.
Читать дальше →
Total votes 40: ↑39 and ↓1+45
Comments17

Установка и настройка tor в Linux Mint

Level of difficultyEasy
Reading time4 min
Views17K

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

Читать далее
Total votes 13: ↑11 and ↓2+16
Comments7

Автоматизируем сборку и деплой приложения в GitLab CI/CD: подробное руководство с примерами

Level of difficultyEasy
Reading time22 min
Views29K

При разработке приложений рано или поздно наступает момент, когда заниматься развёртыванием вручную становится затратно и неудобно. Как следствие на помощь приходит автоматизация этого процесса с помощью специально настроенных пайплайнов непрерывной интеграции и непрерывной доставки (Continuous Integration & Continuous Delivery — CI/CD). Для разных систем управления репозиториями исходного кода существуют свои способы настройки CI/CD.

В этой статье мы рассмотрим, как использовать GitLab для организации автоматической сборки и деплоя приложения в кластер Kubernetes. Сам кластер работает под управлением Deckhouse Kubernetes Platform, а автоматизировать процесс будем с помощью werf — Open Source CLI-утилиты, организующей полный цикл доставки приложения в Kubernetes и использующей Git как единый источник истины для состояния приложения, развёрнутого в кластере.

Читать далее
Total votes 30: ↑29 and ↓1+34
Comments17

Figma закрыла Dev Mode: пути обхода и их краткий обзор

Reading time5 min
Views37K

В июне 2023 года Figma выпустила масштабное обновление: появился режим разработки Dev Mode. Эта функция обеспечивает плавный переход от дизайна к разработке. Такое новшество сразу же пришлось по душе многим. Однако совсем недавно пропала возможность пользоваться режимом бесплатно. Как быть и какие есть альтернативы — рассказываем под катом!
Читать дальше →
Total votes 46: ↑46 and ↓0+46
Comments27

Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде

Level of difficultyMedium
Reading time9 min
Views17K

Привет, Хабр! Меня зовут Данил, я Frontend-разработчик в Samokat.tech. Недавно мы с командой распилили монолит на Angular и перешли к микрофронтендам на Vue. 

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

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

Styled Components — идеальная стилизация React-приложения

Reading time15 min
Views71K

Это статья о Styled Components будет полезна новичкам и старичкам. Для понимания материала нужны базовые навыки работы с React и TypeScript.

Styled Components — одно из популярных решений написания кода методом CSS in JS. Гибкое, простое и, главное, идеально вписывается в архитектуру React приложения.

Разберём данную библиотеку на базовых примерах в связке с TypeScript. Также поделюсь своими лучшими практиками при написание кода.

Читать далее
Total votes 5: ↑3 and ↓2+1
Comments18

Неочевидные моменты TypeScript и способы их решения

Level of difficultyHard
Reading time7 min
Views16K

Разрабатывая на TypeScript, можно столкнуться с ситуациями, в которых код будет работать не так, как ожидается. В статье разберем несколько таких моментов. Часть просто придется иметь ввиду, часть решается обновлением, а часть исправляется – обо всем по порядку.

Если вам будет удобно сразу же проверять каждый пример, читая статью, можно это делать в редакторе. Он удобен тем, что версию TypeScript в нем можно переключать.

Читать далее
Total votes 12: ↑10 and ↓2+12
Comments11

Построить топологию и проверить отказоустойчивость: подборка open source решений для эмуляции сетей

Reading time6 min
Views11K

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

Читать далее
Total votes 6: ↑5 and ↓1+7
Comments7

Собираем «Тревожный чемоданчик». Мнение спортивного туриста

Reading time18 min
Views209K
Когда началась война, все произошло так быстро, что я не могла ни понять, что происходит, ни подумать о том, что хотела бы взять с собой, когда мы убегали. (из интервью сирийской беженки)

Мне почему-то не хочется делать вид, что ничего не происходит. Потому что нынешняя военная эскалация напоминает затишье перед бурей, похожие ощущения были в январе 2020, когда «коронавирус же не у нас, он в Китае». В итоге жизнь подтвердила несостоятельность подобного «психологического» трюка. Поэтому, думая про худшее и надеясь на лучшее, я написал недавно эмоциональную заметку про «тревожный чемоданчик». Написана она с учетом моего опыта спортивного туризма (инструктор гор/пеш), поэтому профессиональные военным (выживальщикам?) просьба отнестись с пониманием. Писалось с акцентом на беларускую аудиторию, и вот искренне надеюсь, что (НЕ) пригодится всем. Просьба не политизировать данную статью, а воспринимать as is. Те кто затевает войны — Хабр не читают. Мы все в одной лодке, надеюсь написанное под катом хоть немного поможет этой «лодке» быть на плаву…


Собираем тревожный чемоданчик вместе
Total votes 225: ↑198 and ↓27+223
Comments391

Типизированные CSS переменные с @property

Level of difficultyEasy
Reading time4 min
Views5.6K

Типы CSS - это достойное вложение в безопасность типов при работе с внешним интерфейсом. Мы все еще ожидаем кроссбраузерности, но мы к этому придем ? .

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

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

Level of difficultyEasy
Reading time6 min
Views11K

Привет, меня зовут Денис, я руковожу направлением разработки в Домклик. Дополнительно несу ношу лидера frontend-направления в нашей компании. Не так давно я отрефакторил систему собеседований для frontend-разработчиков, попутно тестируя технические вопросы на внешних и внутренних респондентах. И пришёл к выводу, что множество мной опрошенных разработчиков, вне зависимости от уровня, не знают или просто не обращают внимание на базовые правила при работе с картинками. В результате на просторах интернета зачастую можно найти изображения размером 200 на 200 пикселей и весом в несколько мегабайтов со смещением макета, столь раздражающим пользователей. Если вам интересно, как практически без вложений улучшить пользовательский опыт, то прошу под кат.

Читать далее
Total votes 47: ↑43 and ↓4+46
Comments21

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

Level of difficultyMedium
Reading time7 min
Views9.9K

Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это.


Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно. Поехали!

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

Как создать слайдер изображений в почтовом сообщении

Reading time9 min
Views16K
Примечание переводчика: В нашем блоге мы уже неоднократно рассказывали о создании интерактивных email-рассылок с помощью CSS и HTML. Сегодня мы представляем вашему вниманию адаптированный перевод материалов из блога Fresh Inbox о том, как создать слайдер изображений в email-сообщении, который будет отображаться на мобильных устройствах, а также в вебе и на десктопе.



Данная статья описывает процесс создания слайдера из эскизов изображений для email-рассылок. Сначала мы сконцентрируемся на реализации слайдера под мобильное ПО, а в частности под родные email-клиенты iPhone и Android. Затем мы добавим поддержку стационарных платформ.

Как вы можете видеть на скриншоте сверху, наша цель – слайдер с миниатюрами, расположенными выше основного изображения. В неподдерживаемых email-клиентах миниатюры отображаться не будут.

Слайдер будет рассчитан только на одну ссылку, что хорошо подойдет в случае описания продукта с разных ракурсов (или, как в нашем случае, номера в отеле), но категорически не подходит при описании разных продуктов, где для каждого изображения требуется отдельная ссылка.
В данной статье будет использоваться ряд техник, описанных в «Интерактивных изображениях для мобильной Email-рассылки», поэтому если у вас возникнут вопросы, вы всегда можете обратиться к вышеописанной статье за разъяснениями.
Читать дальше →
Total votes 20: ↑14 and ↓6+8
Comments6

Принцип работы async/await в JavaScript

Level of difficultyMedium
Reading time8 min
Views30K


Если вам доводилось работать с JavaScript, то вы наверняка встречались с синтаксисом async/await. Эта функциональность позволяет прописывать асинхронную логику синхронным образом, упрощая тем самым её понимание. Некоторым ветеранам JS известно, что async/await – это просто синтаксический сахар для существующего Promises API. Это означает, что в JS должен быть способ реализации функциональности async/await без использования ключевых слов async и await, хоть и более громоздкий. Именно об этом и пойдёт речь в данной статье.

Видео от автора на ту же тему.
Читать дальше →
Total votes 41: ↑40 and ↓1+54
Comments19

Information

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