Обновить
512K+

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

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

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

Именование в CSS Grid

Время на прочтение12 мин
Охват и читатели21K
Когда вы впервые изучаете, как использовать Grid-разметку, можно начать с размещения элементов на сетке по номерам линий. В этом случае необходимо следить за тем, где на сетке проходят определённые линии, и помнить о том, что последовательность их номеров меняется на противоположную, если сайт отображается для языков, которые пишутся справа налево.

На основе этой системы линий работают техники, делающие возможным именование линий и даже grid-областей. Использование этих техник позволяет размещать элементы по имени, а не по номеру. В этой статье я подробно рассмотрю различные способы именования линий и областей в CSS Grid разметке, а также несколько интересных возможностей, которые они создают.
Читать дальше →

Docker для фронтендера. Часть 1. Зачем?

Время на прочтение5 мин
Охват и читатели34K

Привет, Хабр!


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



Приглашаю под кат всех веб-разработчиков, особенно фронтендеров.

Как проверить паспорт на действительность

Время на прочтение6 мин
Охват и читатели247K


Реквизиты паспорта — не просто набор цифр, в них закодирован вагон информации. Если правильно расшифровывать и сопоставлять реквизиты, подозрительные документы мгновенно всплывут на поверхность. Продукты HFLabs уже 14 лет проверяют клиентские данные в банках, страховых, телекомах и другом крупном бизнесе. Расскажу, как мы распознаем ошибки в российских паспортах.
Читать дальше →

Как готовить RTSP на сайте в 2020 году, или почему кабаны не успеют убежать

Время на прочтение7 мин
Охват и читатели44K


RTSP — это простой сигнальный протокол, который уже много лет не могут ничем заменить, и надо признать, что не особо стараются.


Скажем, есть у нас IP камера с поддержкой RTSP. Всякий, кто щупал трафик акула-кабелем, расскажет, что там сначала идет DESCRIBE, потом PLAY, и вот полился трафик напрямую по RTP или завернутый в тот же TCP канал.

Читать дальше →

Немного размышлений на тему модульного css и проблемы поддержки кода

Время на прочтение5 мин
Охват и читатели5.3K

В чем заключается вопрос?


Всем привет, сегодня я хочу поделиться с вами личным опытом написания стилей или проще говоря выложить свое видение на проблему написания css для сайтов.

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

На эти и другие вопросы я и попытаюсь ответить, предложив свои методы и подходы к решению некоторых проблем.
Читать дальше →

Сравнение сеансов профилирования в XHProf Admin

Время на прочтение4 мин
Охват и читатели2.6K

В статье рассказывается об удобном инструменте сравнения сеансов профилирования PHP кода, который позволил быстрее найти узкие места в проекте на CMS Битрикс.

Читать дальше →

Мельчайшее различие

Время на прочтение4 мин
Охват и читатели12K
В июле команда, которая занимается дизайн-системой в компании Gusto, выдала кое-что, достойное восхищения. В течение трёх месяцев мы вкладывали в дело все силы, стремясь обновить корпоративные материалы, такие, как логотипы, цвета и шрифты. Но занимались мы не только этим. Мы чувствовали, что перед нами открылась возможность улучшить каждый компонент нашей библиотеки. Мы надеялись расширить возможности проекта, убрав компоненты, дублирующие друг друга, и избавившись от технического долга. Тогда же мы начали разбираться с множеством давних проблем, касающихся доступности проекта для людей с ограниченными возможностями.



Меня уже некоторое время беспокоил дизайн наших таблиц. Я с нетерпением ждал того момента, когда смогу привести их к достойному виду.
Читать дальше →

Разработчик открыл бар для разработчиков и хостит там встречи по Angular, верстке, PHP

Время на прочтение5 мин
Охват и читатели12K


Истории о том, как совмещать управление заведением с основной работой в ИТ, караоке для настоящих программистов (пример под катом), рассказ про бармена, пишущего на Cobol, и другое необычное о жизни питерских айтишников после заката.
Читать дальше →

Актуальные библиотеки визуализации данных для react-разработчиков

Время на прочтение3 мин
Охват и читатели13K
Привет, Хабр! Представляю вашему вниманию перевод статьи «Data Visualization Libraries for React Developers in 2019» автора Veronika Rovnik.

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

Вы когда-нибудь сталкивались с необходимостью улучшить своё приложение аналитическими и визуальными функциями и получить представление о данных?
Читать дальше →

Делаем интерактивный план местности за 15 минут

Время на прочтение10 мин
Охват и читатели22K


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

Записи докладов ок.tech: Frontend Meetup #2

Время на прочтение2 мин
Охват и читатели2.2K


26 ноября в петербургском офисе Одноклассников состоялся ок.tech: Frontend Meetup #2.
Вместе с коллегами из Одноклассников, ВКонтакте и Hazelcast поговорили про новый фронтенд OK.RU, сделанный на связке React + Graal, обсудили может ли “Lifting State Up” – один из двенадцати ключевых концепций в официальной документации React, приводить к плохой производительности, а также узнали несколько историй про баги и технические решения, которые были предприняты, чтобы с ними справиться.

Заходите под кат если хотите увидеть видеозаписи докладов.

9 лучших опенсорс находок за ноябрь 2019

Время на прочтение2 мин
Охват и читатели20K

Доброй зимы, дамы и господа. Подготовил для вас подборку самых интересных находок из опенсорса за ноябрь 2019.


За полным списком новых полезных инструментов, статей и докладов можно обратиться в мой телеграм канал @OpensourceFindings (по ссылке зеркало, если не открывается оригинал).


В сегодняшнем выпуске.
Технологии внутри: Rust, TypeScript, JavaScript, Go, Python.
Тематика: веб разработка, инструменты для QA, работа с данными, инструменты разработчика и администратора.


Прошлый выпуск.

Читать дальше →

Архитектор высоких нагрузок. Новый курс от OTUS

Время на прочтение3 мин
Охват и читатели4K
Внимание! Данная статья не является инженерной и предназначается читателям, которые находятся в поисках Best Practice по HighLoad и отказоустойчивости веб-приложений. Вероятнее всего, если Вы не заинтересованы в обучении, данный материал не будет Вам интересен.




Представим ситуацию: запустил какой-нибудь интернет магазин акцию со скидками, ты, как и миллионы других людей тоже решил купить себе очень важный (или не очень :-) ) девайс, заходишь на сайт, а сервер упал. «Сори, вас слишком много!» — пишут где-нибудь в социальных сетях администраторы и обещают решить эту ситуацию…
Читать дальше →

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

Школа магии PHP

Время на прочтение18 мин
Охват и читатели29K
Что такое магия в PHP? Обычно под этим подразумевают методы вроде _construct() или __get(). Магические методы в PHP — это лазейки, которые помогают разработчикам выполнять удивительные вещи. В сети полно инструкций по их использованию, с которыми вы наверняка знакомы. Но что если мы скажем, что вы даже не видели настоящую магию? Ведь, чем больше вам кажется, что вы знаете все, тем больше магии ускользает от вас.



Давайте отбросим установленные рамки правил ООП и сделаем невозможное возможным в школе магии PHP. Главный и первый волшебный преподаватель школы — Александр Лисаченко (NightTiger). Он научит магическому мышлению и, возможно, вы полюбите магические методы, нестандартные способы доступа к свойствам, изменение контекстов, аспектно-ориентированное программирование и потоковые фильтры.

Продуманные запросы: стратегии кэширования в век PWA

Время на прочтение18 мин
Охват и читатели14K
Давным-давно мы, в деле кэширования, всецело полагались на браузеры. Разработчики в те дни почти никак не могли на это повлиять. Но потом появились прогрессивные веб-приложения (Progressive Web App, PWA), сервис-воркеры, API Cache. Внезапно случилось так, что в руках программиста оказались широкие полномочия, власть над тем, что попадает в кэш, и над тем, как оно туда попадает. Теперь мы можем кэшировать всё, что хотим… в этом-то и кроется потенциальная проблема.



Медиа-файлы, в особенности — изображения, это то, что в наши дни является основной составной частью размера типичной веб-страницы. Со временем ситуация лишь ухудшается. Для того чтобы повысить производительность страниц, мы пытаемся кэшировать как можно большие объёмы подобных данных. Но стоит ли это делать? В большинстве случаев — не стоит. Даже учитывая то, что в нашем распоряжении теперь есть все эти новомодные технологии, нам, для того, чтобы достичь высокой производительности веб-страниц, всё ещё необходимо придерживаться одного простого правила. Оно заключается в том, что запрашивать с сервера нужно лишь то, что нужно, стремясь при этом к тому, чтобы в ответе на каждый запрос приходило бы как можно меньше данных.

Мы стремимся к тому, чтобы наши проекты вызывали бы у посетителей лишь положительные ощущения. При этом нам не хотелось бы перегружать сетевые соединения и жёсткие диски пользователей. Это значит, что пришло время дать ход некоторым классическим практическим приёмам, поэкспериментировать со стратегиями кэширования медиаданных и изучить хитрости API Cache, которые скрыты в рукаве у сервис-воркеров.
Читать дальше →

10 возможностей VS Code, помогающих ускорить работу программиста

Время на прочтение9 мин
Охват и читатели107K
Когда программист попадает в состояние потока, его мысли часто движутся прямо-таки с космической скоростью. Он пишет код так быстро, как только может, прилагая все усилия к тому, чтобы ухватить свои идеи и не дать им растаять в воздухе или затеряться в закоулках новых образов.

Редактор Visual Studio Code (VS Code) стал восходящей звездой вселенной инструментов программирования сразу после того, как появился. Я долго не решалась его попробовать. Причина этого была не в том, что это — просто некий очередной редактор кода. Дело было в том, что вся моя работа была отлично организована в Sublime.

image

Для меня понятия «работа» и «написание кода» — это одно и то же. И, по большому счёту, неважно, каким именно редактором я буду постоянно пользоваться. Но изменения — это всегда нелегко. После того, как я неделю поработала в VS Code, я обнаружила, что моя продуктивность сильно просела. Я сделала за это время меньше, чем сделала бы, пользуйся я чем-то привычным.

Это было так, отчасти, из-за того, что мне нужно было перестроиться, привыкнуть к новым инструментам. Нужно было выяснить то, какие команды мне пригодятся, нужно было запомнить полезные сочетания клавиш, изучить средства навигации по коду. И, вдобавок, надо было разобраться в том, какие расширения редактора мне понадобится установить для того, чтобы облегчить себе жизнь.

В итоге я снова вышла на высокую производительность. Вряд ли я снова затею переход на новый редактор. VS Code — это надёжный и нетребовательный к ресурсам инструмент. Вокруг него собралось мощное сообщество разработчиков расширений. Пожалуй это — одна из лучших разработок Microsoft.

Вот 10 возможностей VS Code, освоение которых помогло мне ускорить работу. Надеюсь, они пригодятся и вам.
Читать дальше →

Динамическая CDN для WebRTC стриминга с низкой задержкой и контролем доступа к потокам

Время на прочтение4 мин
Охват и читатели1.9K


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


Во второй части мы добавили в CDN выделенные серверы для задач транскодирования, чтобы обеспечить нашим зрителям качество трансляции в зависимости от используемых ими устройств и качества канала. Таким образом, все публикуемые потоки в нашей CDN доступны всем зрителям.


Теперь допустим, что предприятие выходит на этап монетизации и часть потоков должны быть доступны бесплатно, часть — по подписке. Или, например, вебинары для внутреннего обучения сотрудников транслируются одновременно, но для разных филиалов потоки разные, и открывать техники продаж, применяемые в Юго-Восточной Азии, для менеджеров из СНГ нежелательно.

Читать дальше →

Новичку only: 10 вещей, которые вы должны знать как веб-разработчик

Время на прочтение5 мин
Охват и читатели31K
Привет, Хабр! Представляю вашему вниманию перевод статьи «10 Things You Should Know As a Web Developer» автора Anuupadhyay.

Написание тысячи строк кода и превращение в веб-сайт — одна из творческих и сложных вещей для веб-разработчиков. Если вы в этом деле новичок, увидели множество красивых веб-сайтов и подумали попробовать силы в этом, нам необходимо открыть глаза и рассказать о некоторых вещах, нужных веб-разработчику. Создание веб-сайта, который привлекает внимание пользователей, — это не только изучение различных языков программирования, это также изучение других концепций, таких как DevTools, форматы данных, тестирование, API-интерфейсы, аутентификация и многое другое. Здесь рассказывается о некоторых вещах, которыми должен овладеть веб-разработчик.

1. HTML / CSS / JS


Важным навыком, который каждый разработчик должен изучить в первую очередь, является знание этих трех основных строительных блоков, то есть HTML, CSS и JavaScript. Вы будете использовать HTML и CSS во «фронтенде» для интерфейсов. Щелкните правой кнопкой мыши на веб-браузере и выберите вариант просмотра источника страницы. Вы найдете структуру вашего сайта, где много HTML-тегов используются для различных целей.

CSS также используется в веб-интерфейсе, который определяет стиль, дизайн, макет и то, как элементы HTML должны отображаться на экране.
Читать дальше →

Размер имеет значение

Время на прочтение5 мин
Охват и читатели4.2K
И черт меня дернул написать материал «Фреймворки — больше минусов чем плюсов». Точнее назвать материал именно так. Пылился он себе, пылился в песочнице, но вот в прошлом месяце его оттуда извлекли и… такого количества комментариев я не ожидал.

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

Прекратите использовать Else в ваших программах

Время на прочтение2 мин
Охват и читатели31K

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


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


Дисклеймер: нижеизложенное — исключительно моё субъективное мнение.


Приём, о котором я собираюсь рассказать, работает не всегда и иногда использовать else всё-таки придётся. В остальных случаях отказ от else поможет сделать код чище.


Читать дальше →