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

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

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

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

Сокровища HTML: 7 тегов, которые упростят вам жизнь

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

Все мы знакомы с широко используемыми HTML тегами, такими как <div>, <p>, <a>, и <img>. Однако, существуют HTML - теги, которые могут упростить жизнь, и вместо написания дополнительного кода, выполнят всю работу :)

Читать далее
Всего голосов 70: ↑65 и ↓5+60
Комментарии28

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

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


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

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

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

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

$2500 в месяц на сервисе с 1 функцией, которая уже была у крупных компаний

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

Разбираем, как разработчик создал простой продукт с выручкой $2500 в месяц, связав два популярных сервиса. Несмотря на то, что это уже было сделано до него крупными компаниями.

Читать далее
Всего голосов 95: ↑77 и ↓18+59
Комментарии39

По локоть в легаси: пошагово перезапускаем устаревший портал на PHP

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

PHP — один из самых популярных языков веб-разработки уже около 20 лет, а самому языку скоро стукнет 30. За это время на нем написали огромное количество больших и маленьких проектов. Некоторые сайты, созданные в 90-х, 00-х и 10-х, хранят код еще с тех давних времен. И чем больше времени проходит с начала разработки, тем меньше на рынке специалистов, готовых разбираться в легаси и не самых современных технологиях.

В похожей ситуации оказался портал fishingsib.ru — один из крупнейших в рунете сайтов о рыбалке, который посещают больше 10 000 человек ежедневно. Он создавался в начале 2000-х как форум для рыбаков-любителей и пережил несколько довольно серьезных обновлений кодовой базы. Последнее из них — переезд на CakePHP 2 в 2012 году. На этом фреймворке и PHP 5 сайт жил до 2017 года.

Владелец fishingsib.ru планировал поддерживать и развивать сайт, внедрять новую функциональность, однако столкнулся с техническими проблемами. Любые доработки были очень долгими из-за неудачных архитектурных решений и сильной зависимости от устаревающего и не особенно популярного CakePHP 2. После каждого обновления появлялось множество багов. В то же время не удавалось найти новых разработчиков, потому что большинство специалистов не хотели работать в проекте с неактуальным стеком. Развитие проекта сильно замедлилось и стало понятно, что с технической частью нужно что-то делать.

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

Истории

Прокачиваем вёрстку ARIA атрибутами. Атрибут aria-label

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


Cегодня я хочу рассказать про атрибут aria-label. В статье не будет заумных определений и бездумного копирования стандарта. Я хотел простым языком объяснить, какая польза от атрибута, а также передать свой практический опыт, чтобы вы могли его повторить. А получилось у меня или нет, решать вам.


Со вступительным словом всё. Давайте начнём!

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

Docker — не то, чем кажется

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

Привет, Хабр! Меня зовут Матвей Мочалов, я — компьютерный инженер и один из авторов корпоративного блога cdnnow! Мы с вами познакомились в этом посте про историю DRM для видеоконтента. Сегодня я хочу поговорить с вами про Docker, а точнее про то, о чём многие забывают: различиях в нём для разных систем. Нам, как CDN-провайдеру Docker, все его 50 оттенков близки и знакомы. И, к счастью, наше взаимодействие с ним происходит из-под Linux, но, увы, не всем так везёт.

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

Читать далее
Всего голосов 55: ↑55.5 и ↓-0.5+56
Комментарии71

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

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


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

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

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

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

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

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

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


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


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


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


Сегодня я дам ответ на следующий вопрос: «Зачем нужно использовать свойство display

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

В 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

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

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

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

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

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

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

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

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

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


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

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

Аутентификация для WebSocket и SSE: до сих пор нет стандарта?

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

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

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

А еще заодно поговорим про уязвимость Cross-Site WebSocket Hijacking (CSWSH) и в целом посмотрим на многие вопросы через призму информационной безопасности.

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

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

OpenAPI станет проще: готовится версия 4.0

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


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

До появления расширения OpenAPI DevTools проектировать схему OpenAPI приходилось вручную. Хотя это было непросто, оно того стоит в любом случае. Недавно мы в RUVDS переделали свой API под данный стандарт — и увидели, насколько это эффективно и полезно для всех пользователей и разработчиков, которые обращаются к серверным API.

Сейчас в разработке находится четвёртая версия OpenAPI. Она станет проще и универсальнее, то есть подойдёт даже для тех HTTP API, для которых не годится текущая версия 3.0 (3.1.0).
Читать дальше →
Всего голосов 55: ↑54 и ↓1+53
Комментарии9

Мнение три года спустя: стоил ли того переход с JavaScript на Rust?

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

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

С тех пор мы с потрясающими разработчиками создали Wick, — фреймворк приложений и среду исполнения, использующие в качестве системы основного модуля WebAssembly.

Спустя три года, выполнив несколько развёртываний в продакшен, написав электронную книгу и выпустив примерно сто пакетов на crates.io, я решил, что настало время поделиться своими мыслями о Rust.

Читать далее
Всего голосов 55: ↑54 и ↓1+53
Комментарии63

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

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

Я продолжаю рассказывать, как HTML и CSS могут улучшить или ухудшить доступность интерфейсов. В своём рассказе я использую свой опыт и моего незрячего знакомого Ильи.


В этой статье будет: атрибут autofocus и его нюансы, паттерн «Skip-link» и идея Ильи об использовании его на практике, проблема использования одинаковых ссылок для одной новости, что не так с кнопкой «Наверх» и как вы спрятали список от скринридеров.


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

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

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

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

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

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

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

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


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

  • Какое количество символов следует использовать для текста подсказки для атрибута alt;
  • В чём польза атрибута lang;
  • Почему использование текстовых символов для декоративных задач — это плохая идея;
  • Для чего существует режим повышенной контрастности.

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

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

Абсолютный минимум об Unicode на 2023 год (всё ещё — никаких оправданий!)

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

Двадцать лет назад Джоэл Спольски написал: «Не существует такой штуки, как «обычный текст». Если имеется строка, но неизвестно, какую кодировку символов она использует — смысла в этой строке нет. Больше нельзя спрятать голову в песок и притвориться, что «обычный» текст имеет кодировку ASCII.»

Многое изменилось за 20 лет. В 2003 году главный вопрос звучал так: «Что это за кодировка?». В 2023 году такой вопрос больше не стоит: с вероятностью в 98% это — UTF-8. Наконец то! Можно снова спрятать голову в песок!

Читать далее
Всего голосов 53: ↑52 и ↓1+51
Комментарии46

Глубокий JS. В память о типах и данных

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

Всех нас учили, что в JavaScript есть примитивные и ссылочные типы данных. Исчерпывающая информация есть в официальной документации, а на просторах интернета полно статей на этот счет.

Теория теорией, однако, JS-код исполняется не в теории, а на практике. Точнее, его компилирует и исполняет движок JS. Таких движков существует несколько, разрабатывались они разными людьми и для разных целей. Было бы наивно предполагать, что все они полностью идентичны друг другу. А значит, время разобраться, как же на самом деле хранятся вполне конкретные данные на вполне конкретном движке JS V8.

Читать далее
Всего голосов 55: ↑53 и ↓2+51
Комментарии27

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