Как стать автором
Обновить
402.82

Веб-разработка *

Делаем веб лучше

Сначала показывать
Порог рейтинга
Уровень сложности

Прогресс WebAssembly и будущее веба. Быстрые интерфейсы, пример Figma

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

Скетч из статьи Лин Кларк «Создание и работа с модулями WebAssembly»

WebAssembly (Wasm) — это бинарный формат для безопасного и эффективного выполнения портативных программ в стековой виртуальной машине (в браузере или на сервере). Как и ASM.js, представляет собой низкоуровневый код. Есть ещё WAT — WebAssembly Text, человекочитаемая версия бинарного кода.

WebAssembly — не столько язык программирования, сколько цель компиляции, новый вид ассемблера, который работает близко к железу, принимая программы на C, C++, Rust и других привычных языках. При этом Wasm гораздо быстрее ASM.js и выполняет код в браузере почти как нативные программы под любой ОС.
Читать дальше →
Всего голосов 57: ↑54 и ↓3+51
Комментарии16

Хороший ретрай, плохой ретрай, или История одного падения

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

Порой простое и очевидное решение может потянуть за собой хвост проблем в будущем. Например, добавление ретраев.

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

Этот пост — продолжение вымышленных историй о разработчике Васе, который несколько лет назад разбирался с идемпотентностью в распределённых системах. Теперь перед ним новые задачи — получится ли справиться с ними в этот раз? Давайте узнаем.

Читать далее
Всего голосов 152: ↑152 и ↓0+152
Комментарии32

Разбираем TLS по байтам. Кто такой этот HTTPS?

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


Подключение к сайту бывает защищённым, а бывает нет — это надо знать всем детям. Только мало детей знают, что это значит и как работает.

Я, изучая веб-разработку, узнал об HTTP. Разобраться в нём несложно: в каждой статье о протоколе множество наглядных примеров запросов и ответов. Затем узнал о схеме HTTPS, с которой всё не так наглядно. В ней используется то ли SSL, то ли TLS, и что-то где-то шифруется, и зачем-то нужны какие-то сертификаты. Короче, всё расплывалось в тумане: где пример ответа, запроса, сертификата, как его создать, зачем он нужен и почему гайд по созданию http-сервера уже написал каждый школьник, а https-сервер — недоступная для начинающих разработчиков роскошь?

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

Во второй обсудим, как это дело реализуется в протоколе TLS и разберём формат TLS-пакетов по байтам. Статьи рассчитаны в первую очередь на изучающих веб-разработку, знакомых с HTTP и жаждущих осознать, кто такое https. Но материал актуален для любых применений TLS, будь то веб или не веб.
Читать дальше →
Всего голосов 62: ↑61 и ↓1+60
Комментарии21

В Go меняется фундаментальная вещь — цикл

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

Если раньше в циклах были проблемы с замыканиями, так как переменная цикла имела скоуп всего цикла, а не одной его итерации, то в 1.22 это поведение поменяют.


проще показать на примере:


 funcs := []func(){}

 for i := 0; i < 5; i++ {
  funcs = append(funcs, func() {
   fmt.Println(i)
  })
 }

 funcs[0]()

Последняя строка примера напечатает 5 в go 1.21, но в go 1.22 будет уже интуитивно понятный 0.

Читать дальше →
Всего голосов 59: ↑57 и ↓2+55
Комментарии62

Истории

Видеоредактор, работа с видео и зачем там Canvas

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

Современные устройства и браузеры развиваются достаточно быстро, но все-равно этого бывает недостаточно для задач со сложными вычислениями. К таким задачам можно отнести обработку видео.

Одной из задач, где мы в Ozon используем Canvas, является обработка видео. Для это у нас реализован минималистичный видеоредактор. Зачем нужно было делать свой редактор для веба и почему не использовать готовый? Все ответы под катом.

Читать далее
Всего голосов 67: ↑67 и ↓0+67
Комментарии24

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

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


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

Видео от автора на ту же тему.
Читать дальше →
Всего голосов 56: ↑55 и ↓1+54
Комментарии19

Капибара, Новый Старый Пикабу

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

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

Читать далее
Всего голосов 180: ↑173 и ↓7+166
Комментарии225

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

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

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


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

Читать дальше →
Всего голосов 51: ↑51 и ↓0+51
Комментарии13

Назад в будущее Хабра. Трекер 3.0

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

Приветствуем вас, наши дорогие пользователи! Без долгих предварительных ласк: новый трекер, налетайте 🙂

Читать далее
Всего голосов 109: ↑109 и ↓0+109
Комментарии195

Нарушая правила: как я выбросил 10-месячный проект после 2 месяцев в должности

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

Когда я принял управление командой, её участники находились на 8-м месяце реализации 3-месячного проекта по перезапуску коммерческого сайта компании. Спустя два месяца ведения этой команды, я решил отказаться от всего достигнутого и начать сначала. Это история о том, почему я это сделал, как, и что в итоге получилось.
Читать дальше →
Всего голосов 76: ↑64 и ↓12+52
Комментарии23

А давайте убьем все фреймворки?

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

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

Технологии эволюционируют и функционируют, а новые технологии их полностью заменяют. Считаю, что сейчас наступает эпоха, когда технологии фреймворков и Электрона могут быть вытеснены генеративными AI. Рассмотрим несколько примеров.

Нажимайте вот эту вот кнопотуленку
Всего голосов 134: ↑108 и ↓26+82
Комментарии274

Ох уж эти CSS-переменные

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


Я люблю создавать компоненты везде и всегда, поэтому пользовательские CSS-свойства, также известные как CSS-переменные, являются одной из моих любимых фишек, которая позволяет писать более модульный код. При работе с ними я набил достаточно шишек, выпил литры чая и убил кучу времени. Теперь я «мастер», и хочу поделиться своим опытом.
Читать дальше →
Всего голосов 56: ↑56 и ↓0+56
Комментарии13

Разбираем HTTP/2 по байтам

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

image


Откройте любую статью с обзором HTTP/1.1. Скорее всего, там найдётся хотя бы один пример запроса и ответа, допустим, такие:


GET / HTTP/1.1
Host: localhost

HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
Content-Length: 38
Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<h1>Привет!</h1>

Теперь откройте статью с обзором HTTP/2 или HTTP/3. Вы узнаете о мультиплексировании запросов, о сжатии заголовков, о поддержке push-технологий, но вряд ли увидите хоть одно конкретное сообщение. Ясно, почему так: HTTP/1.1 — текстовый протокол, тогда как сиквелы к нему бинарные. Это очевидное изменение открывает дорогу ко множеству оптимизаций, но упраздняет возможность просто и доступно записать сообщения.


Поэтому в этой статье предлагаю покопаться в кишках у HTTP/2: разобрать алгоритмы установки соединения, формат кадров, примеры взаимодействия клиента с сервером.

Читать дальше →
Всего голосов 115: ↑115 и ↓0+115
Комментарии45

Ближайшие события

Прекратите превращать программирование в религию (восклицательный знак)

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

Как вы меня задолбали, священники, святые отцы и монахи с кадилами. Сколько можно это терпеть? Я учился в университете, чтобы получить диплом по специальности, но вместо этого я получил пропуск в какую-то конспирологическую теоретическую секту.

Не верите?

Давайте я покажу вам.
Всего голосов 239: ↑205 и ↓34+171
Комментарии302

Я бы пересмотрел вообще всё

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

В программировании нет вообще никаких непреложных истин. Даже самые очевидные правила могут иметь контекст, в которых их применять нельзя. К сожалению в 99% организаций есть прям заповеди, обязательные к исполнению. И есть правила, которые считаются правилами хорошего тона (как не сморкаться в занавеску). Однако всегда бывают ситуации, когда лучше все-таки сморкаться.


Вот примеры.


1) Например, DRY — don’t repeat yourself. Хорошее полезное правило, но его можно довести до маразма. Из того что я встречал на практике: есть два разных по бизнес-смыслу раздела, которые начинались с простого CRUD, и многие части (и фронта и бека) выглядели во многом абсолютно одинаково. Если их объединить с помощью общей высосанной из пальца абстракции и тем самым избавиться от небольшого дублирования кода, то потом (очень скоро) можно будет сойти с ума, потому что эти две вещи скоро разъедутся, обрастая кастомными фичами, и абстракция будет только вредить. Нельзя абстрагировать неабстрагуемое, даже если DRY нарушен.


«[Немного] дублирования обходится гораздо дешевле, чем неправильная абстракция» — Сэнди Мец

Т.е. DRY — хороший принцип, но бывают исключения.

Читать дальше →
Всего голосов 261: ↑219 и ↓42+177
Комментарии346

Чёрт тебя возьми, CSS

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

У CSS много моментов, которые сбивают с толку. Разработчики плюются от него. А мне нравится CSS, несмотря на мои потраченные нервы. Подумав, как помочь другим меньше мучаться, я собрал ряд неочевидных моментов. Они сбивали с толку меня и моих знакомых. Надеюсь, вам будет полезно.

Читать дальше →
Всего голосов 60: ↑58 и ↓2+56
Комментарии52

Если ваш фронтендер перестал бояться IE6, покажите ему SmartTV

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

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

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

Меня зовут Лена и я фронтенд-разработчик Яндекс Музыки. В этой статье я расскажу про особенности работы SmartTV и разработки под них на примере свежей фичи, которую мы назвали Время клипов. Теперь в приложении вы можете посмотреть клипы любимых артистов и открывать для себя новых исполнителей, которые подходят вам по настроению.

Под катом обсудим ключевые отличия работы фронтенда над вебом и SmartTV, поговорим про оптимизацию и вёрстку и посмотрим на фотографии множества пультов (без пакетиков).

Читать далее
Всего голосов 64: ↑64 и ↓0+64
Комментарии85

Учимся разрабатывать REST API на Go на примере сокращателя ссылок

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

В этой статье мы напишем полноценный REST API сервис — URL Shortener — и задеплоим его на виртуальный сервер с помощью GitHub Actions.

Говоря «полноценный», я имею в виду, что это будет не игрушечный проект, а готовый к использованию:

  • мы выберем для него актуальный http-роутер,
  • позаботимся о логах,
  • напишем тесты: unit-тесты, тесты хэндлеров и функциональные,
  • настроим автоматический деплой через GitHub Actions и др.

Но важно понимать, что «готовый к продакшену» != «энтерпрайз».

Кратко обо мне: меня зовут Николай Тузов, я много лет занимаюсь разработкой на Go, очень люблю этот язык. Также веду свой YouTube-канал, на котором есть видеоверсия текущего гайда, с более подробными объяснениями.
Читать дальше →
Всего голосов 57: ↑56 и ↓1+55
Комментарии40

История одной XSS в Telegram

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

Здравствуйте, уважаемые читатели Хабра! Сегодня я хочу поделиться с вами информацией о XSS-уязвимости, которую я обнаружил в Telegram около двух недель назад. Также статья коснется некоторых особенностей работы программы поиска уязвимостей от Telegram. Моя цель — не только продемонстрировать вам интересный и относительно простой пример XSS, но и обозначить причины, по которым, возможно, не стоит тратить свои усилия на участие в багбаунти программе Telegram.

Читать далее
Всего голосов 148: ↑145 и ↓3+142
Комментарии59

Массовый дефейс веб-сайтов .РФ

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

26 мая 2023 года произошёл массовый дефейс веб-серверов национального сегмента сети интернет .РФ. В качестве цели атаки выступила CMS «Битрикс».

В ходе расследования выяснилось, что атака подготовлена заранее. Подготовка велась с 2022 года через известные уязвимости, включая CVE-2022-27228. Техническое описание см. на форуме разработчиков. Возможно, это самая крупная атака против национального сегмента .РФ в его истории.

Компания CyberOK выпустила отчёт c описанием атаки и разъяснением необходимых действий для того, чтобы удалить с сервера бэкдор, устранить уязвимости «Битрикса» и восстановить приложение. Также приведены рекомендации по защите веб-приложения.
Читать дальше →
Всего голосов 83: ↑77 и ↓6+71
Комментарии102

Вклад авторов