Обновить
512K+

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

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

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

DOM, который построил Chrome. Или не построил? Или не Chrome? Или не DOM?

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

Обычный, теневой, виртуальный, инкрементальный… Как получилось, что простой программный интерфейс доступа к элементам веб-страниц обзавелся таким количеством «родственников»? Чем современные фреймворки не устраивает стандартная объектная модель документа или просто DOM? Что и как на самом деле отрисовывает браузер в процессе рендера веб-страницы?

Всем привет, это Макс Кравец из Holyweb. Помните сцену из Матрицы, в которой один из юных кандидатов в Избранные наставляет Нео: «Не пытайся согнуть ложку. Первое, что ты должен понять — ложки не существует!»? Давайте переформулирую: «Не пытайся изменить DOM...». А вот о том, что прячется под многоточием, мы сегодня и поговорим.

Читать далее

Хранение изображений сайта в БД

Время на прочтение8 мин
Охват и читатели60K
Автор должен признаться: статья родилась и выросла из довольно небольшой и не претендующей на откровение оптимизации сайта, описанного в другом материале. Сайт этот связан с музыкальной тематикой и, соответственно, активно отображает обложки альбомов, хранящиеся (до поры до времени) на сервере не в ФС, как обычно бывает, а в БД SQL Server (в BLOB-поле, о чём несложно догадаться); в старом варианте пора извлечения изображений из базы и сохранения их в виде файлов возникает в момент запроса альбомов пользователем, после чего (по истечении сессии) они удаляются.

Страница сайта с обложками

Чтобы почти окончательно развеять куцую интригу и помочь возможному читателю определиться с тем, имеет ли смысл продолжить чтение, опишу конечный результат оптимизации: обложки по-прежнему останутся в базе данных, причём в поле того же типа, но вот веб-сервер, отдающий в итоге изображения клиенту, будет «обманут» и станет обращаться за файлом знать не зная, что его на самом деле нет в ФС, а вызов идёт сразу и непосредственно к СУБД. Такой «обман» конечно же не является самоцелью – всё в основном затевалось ради уменьшения нагрузки на дисковую подсистему.
Читать дальше →

PHP Дайджест № 212 (13 – 27 сентября 2021)

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

Подборка свежих новостей и материалов из мира PHP.

Вышел PHP 8.1 RC2 и уже доступен первый пакет с использованием перечислений, будет сделан форк Magento, новый тип стандартов PER в дополнение к PSR, стартовала PhpStorm 2021.3 EAP, Symfony 6 будет полностью типизирован — как обновляться?

Для PHP 8.2 предложены новые оптимизированные структуры данных.

Также в выпуске порция инструментов, полезные статьи, видео и анонсы двух митапов.

Приятного чтения!
Читать дальше →

Небинарный *ngIf

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

Вам когда-нибудь хотелось отобразить состояние загрузки, пока ngIf ждет ответа от async-пайпа? Или, может, вы мечтали передать в ngFor шаблон для пустого массива? Возможно, вы бросили это, потому что вам не хотелось реализовывать базовую логику этих директив самому. На самом деле в этом нет нужды! Один и тот же селектор может подцепить несколько директив, что позволяет расширить функциональность встроенных директив дополнительной логикой.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №486 (20 — 26 сентября 2021)

Время на прочтение3 мин
Охват и читатели7.7K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Впечатления от прохождения конкурса Яндекс «One Day Offer Frontend»

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

Делюсь впечатлениями как я поучаствовал в конкурсе Яндекс "One Day Offer Frontend". Суть в том, что надо пройти онлайн соревнование - решить за 3часа 5 задач, можно частично. Задачи на алгоритмы и верстку на 5, 45, 70, 90 и 90 баллов. Надо набрать >=100 баллов и тогда будет уже онлайн собес с людьми 25 сентября и оффер в одну из команд Я.Такси, Маркет или Поиск если все будет ОК.

Читать далее

Разделение кода и текста: первая рабочая версия

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

Продолжая тему, которую я начал в предыдущих постах #1 и #2, хотел бы ознакомить всех желающих с прогрессом по своей идее-технологии. У технологии появилось рабочее название – Pushkin, в честь понятно кого.

Читать далее

Адаптивный layout — как переверстать весь проект, не перевёрстывая его

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


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


Всем привет! Меня зовут Юрий Голубев, я разрабатываю frontend в Почте Mail.ru. Сегодня я хочу поделиться опытом того, как мы добавили адаптивности и возможности кастомизации в интерфейс, а заодно — открыли новый для себя способ написания адаптивных компонентов.

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

Веб-безопасность 202

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

Сегодня публикуем завершающую часть вторая часть теории, которую рассказал эксперт по информационной безопасности и преподаватель Иван Юшкевич провел мастер-класс по безопасности на конференции РИТ++ на платформе hacktory.ai.

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

Первую часть можно посмотреть по этой ссылке, а вторую — здесь.

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

Читать далее

NFC в веб сделали: кому пригодится такой подход к технологии

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

В конце мая 2021 года вышло обновление браузера Chrome с поддержкой Web NFC. С помощью этой технологии сайты могут считывать и записывать теги NFC, когда пользователи прикладывают к меткам считывающее устройство. Пока что API Web NFC не ушёл за пределы Chrome для Android. Мы собрали идеи и мнения, как использовать эту функцию.

Нужно или нет?

35 инструментов для веб-разработчика на каждый день

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

Кроме редактора кода, терминала, браузера и гита веб-разработчики пользуются вагоном и маленькой тележкой маленьких инструментов, которые выполняют какую-то одну задачу, но могут пригодиться в ежедневной работе. Предлагаем вам нашу подборку — надеемся, что что-то пригодится, а по поводу чего-то вы и вовсе скажете «А что, так можно было?».

Краткое содержание: проверка кода по стандартам, проверка вёрстки и стилей, работа с кодом, работа с графикой (SVG, фавиконки, конвертеры и сжималки), работа с текстом (типографы и конвертеры всего во всё).

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

Читать далее

Первые шаги в aiohttp, часть 2: подключаем базу данных к приложению

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

Привет!

В прошлой статье мы познакомились с aiohttp и написали на нем свое первое веб-приложение: стену с отзывами.

В этой статье мы продолжим изучение и подключим к нашему приложению базу данных PostgreSQL, используя для этого Gino, SQLAlchemy и Aiopg, а также автоматически сгенерируем и применим миграции с помощью Alembic.

Если вам интересно асинхронное программирование, приходите к нам на курс в KTS, где мы гораздо подробнее разберем эту тему.

Читать далее

MastermindCMS2 — Как начать?

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

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

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

Одно видео уже готово, но пока не было времени сделать пост-продакшн, анимашки всякие добавить, в общем сами понимаете, если делать продукт, то его надо делать качественно.

После небольшого вступления, давайте приступим именно к сабжу.

Читать далее

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

11 проектов, которые нужно сделать, чтобы стать мастером фронтенда

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

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

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

Читать далее

CSS-переменные в медиазапросах

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

К большой радости узнал о существовании PostCSS-плагина "PostCSS Custom Media", который уже сейчас позволяет использовать синтаксис кастомных медиазапросов из черновика спецификации "Media Queries Level 5", преобразуя их в синтаксис с числовыми значением, который поддерживается браузерами.

Читать далее

Как составить техническое задание на разработку сайта, чтобы ожидания совпали с реальностью

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

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

Читать далее

10 самых популярных докладов за всю историю 404fest

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

Юбилейная подборка видео топовых докладов Фестиваля 404. Пока мы готовимся к эпичнейшей айти-тусовке эвер, самое время вспомнить доклады, которые больше всего цепляли публику. Располагайтесь поудобнее ?

Читать далее

Что не так с сорсмапами и как с ними не связываться?

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

Здравствуйте, меня зовут Дмитрий Карловский и у меня… посттравматическое стрессовое расстройство после генерации сорсмапов. И сегодня, с вашей помощью, мы будем это лечить путём максимально глубокого погружения в травмирующие события.



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

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

Концепция контроллеров компонента в Angular: часть вторая

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

Несколько месяцев назад я написал статью «Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular». Я рассказал о том, как мы добавляем гибкости и избавляемся от дублирования кода с помощью DI. Пришло время продолжить статью.

Сегодня посмотрим на более хитрые трюки с такими директивами-контроллерами и попробуем сделать метаконтроллер, который, в свою очередь, состоит из других контроллеров. Все это будет происходить в рамках безграничных возможностей Dependency Injection в Angular.

Давайте посмотрим