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

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

373,16

Рейтинг

СтатьиПостыНовостиАвторыКомпании

MaxRokatansky 24 июн 2021 в 20:56

Главные причины, почему мы разрабатываем веб-приложения на Symfony

6 мин

17K

Блог компании OTUSВеб-разработка * Программирование * Symfony *

Перевод

В компании Outsourcify мы работаем над проектами разного размера: от небольших сайтов, состоящих из нескольких страниц, до сложных бизнес-приложений. В зависимости от конкретного случая мы рекомендуем клиентам разные технические решения (например, мы пишем много одностраничных приложений на JavaScript и работаем с WordPress), но в самых сложных сценариях, когда разрабатываются крупные веб-приложения, занимающие группу разработчиков на несколько недель или месяцев, мы отдаем предпочтение фреймворку Symfony.

aio350 24 июн 2021 в 12:00

Полное визуальное руководство/шпаргалка по CSS Grid

7 мин

465K

Блог компании МаклаудCSS * Программирование * Веб-разработка *

Перевод

Сегодня мы с вами рассмотрим свойства CSS Grid (далее также — Грид), позволяющие создавать адаптивные или отзывчивые макеты веб-страниц. Я постараюсь кратко, но полно объяснить, как работает каждое свойство.

Что такое `CSS Grid`?

Грид — это макет для сайта (его схема, проект).

Грид-модель позволяет размещать контент сайта (располагать его определенным образом, позиционировать). Она позволяет создавать структуры, необходимые для обеспечения отзывчивости сайтов на различных устройствах. Это означает, что сайт будет одинаково хорошо смотреться на компьютере, телефоне и планшете.

Вот простой пример макета сайта, созданного с помощью Грида.

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

+39

polnd 24 июн 2021 в 07:25

Выше 90 баллов PageSpeed на WordPress — это реально

8 мин

9.5K

WordPress * Веб-разработка * Серверная оптимизация *

С июля 2018 Google начали учитывать скорость страниц в выдаче. В ноябре 2019 года они добавили отчет о скорости страниц в личный кабинет Web Search Console. В июне 2021 они ужесточили критерии PageSpeed, подняв влияние Total Blocking Time (TBT) с 25% до 30% и Cumulative Layout Shift (CLS) с 5% до 15%.

-1

host_m 23 июн 2021 в 11:04

Промокоды, случайно оставленные в исходном коде веб-сайта

5 мин

25K

Блог компании VDSina.ruИнформационная безопасность * Веб-разработка * Реверс-инжиниринг *

Перевод

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

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

Мы исследуем сайт сети крытых аквапарков Great Wolf Lodge, однако должен сообщить, что веб-сайты довольно часто раскрывают свою внутреннюю информацию в плохом коде.

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

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

+26

nikolayshabalin 23 июн 2021 в 05:38

Что можно положить в тег <head>

14 мин

41K

Блог компании HTML AcademyВеб-разработка * Семантические сети * HTML *

Туториал

Перевод

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования

Элементы

Допустимые элементы <head> включают meta, link, title, style, script, noscript и base.

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

+35

karanarqq 22 июн 2021 в 09:42

Vue 3: CompositionAPI + Typescript эксперименты

9 мин

26K

Веб-разработка * JavaScript * IT-стандарты * VueJS * TypeScript *

В прошлой статье меня упрекнули, что я при живом Vue 3 пишу про "устаревший" Vue 2. Отговорившись тем, что Vue 3 еще не production-ready, я понемногу начал его смотреть и изучать. И поскольку я заядлый любитель типизации и различных фичей с сахарком, то рассматривать Vue 3 с его новеньким CompositionAPI в статье именно с этой точки зрения. А заодно поэкспериментируем и попробуем написать свой типизированный store, организовать компоненты в стиле <script setup> и подружить его с typescript и eslint, а также напишем небольшой компонент на TSX в качестве еще одного эксперимента.

Рубрика эээксперименты!

ru_vds 22 июн 2021 в 06:00

Новые JavaScript-API для работы с аппаратным обеспечением

4 мин

15K

Блог компании RUVDS.comПроектирование API * JavaScript * Веб-разработка *

Перевод

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

В этом материале речь пойдёт о трёх новых JavaScript-API, направленных на работу с аппаратным обеспечением. В частности — о WebHID, о WebNFC и о WebUSB.

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

+32

S_ILya 21 июн 2021 в 09:00

Идеальный инструмент для создания прогрессивных веб-приложений или Все, что вы хотели знать о Workbox. Часть 2

27 мин

12K

Блог компании МаклаудJavaScript * Веб-разработка *

Что такое `Workbox`?

Workbox (далее — WB) — это библиотека (точнее, набор библиотек), основной целью которой является "предоставление лучших практик и избавление от шаблонного кода при работе с сервис-воркерами" (далее — СВ).

Если вы впервые слышите о СВ, то перед изучением данного руководства настоятельно рекомендуется ознакомиться со следующими материалами:

WB предоставляет следующие возможности:

предварительное кэширование
кэширование во время выполнения
стратегии (кэширования)
обработка (перехват сетевых) запросов
фоновая синхронизация
помощь в отладке

Это вторая часть руководства. Вот ссылка на первую часть.

Модули, предоставляемые `WB`

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

+12

S_ILya 21 июн 2021 в 07:00

Карманная книга по TypeScript. Часть 8. Модули

6 мин

24K

Блог компании МаклаудВеб-разработка * TypeScript *

Перевод

Мы продолжаем серию публикаций адаптированного и дополненного перевода "Карманной книги по TypeScript".

Другие части:

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

Определение модуля

В TS, как и в ECMAScript2015, любой файл, содержащий import или export верхнего уровня (глобальный), считается модулем.

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

Модули выполняются в собственной области видимости, а не в глобальной. Это означает, что переменные, функции, классы и т.д., объявленные в модуле, недоступны за пределами модуля до тех пор, пока они в явном виде не будут из него экспортированы. Кроме того, перед использованием экспортированных сущностей, их следует импортировать в соответствующий файл.

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

+18

alexzfort 20 июн 2021 в 20:18

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

3 мин

8.1K

CSS * HTML * JavaScript * Веб-разработка *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

+16

ru_vds 20 июн 2021 в 14:05

Оптимизация веб-графики в 2021 году

9 мин

23K

Блог компании RUVDS.comОбработка изображений * Веб-разработка *

Перевод

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

Изображения обычно имеют большие размеры. Даже очень большие. В большинстве случаев CSS- и JavaScript-ресурсы, необходимые для обеспечения работоспособности страниц — это мелочь в сравнении с тем объёмом данных, который нужно передать по сети для загрузки изображений, используемых на страницах. «Медленные» изображения могут повредить показателям Core Web Vitals сайта, могут оказать воздействие на SEO и потребовать дополнительных затрат на трафик. Изображения — это обычно тот самый ресурс сайта, который оказывает решающее воздействие на показатель Largest Contentful Paint (LCP) и на задержки загрузки сайта. Они способны увеличить показатель Cumulative Layout Shift (CLS). Если вы не знакомы с этими показателями производительности сайтов — почитайте о них в Definitive Guide to Measuring Web Performance.

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

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

+32

S_ILya 20 июн 2021 в 12:00

Идеальный инструмент для создания прогрессивных веб-приложений или Всё, что вы хотели знать о Workbox. Часть 1

30 мин

16K

Блог компании МаклаудJavaScript * Веб-разработка *

Что такое `Workbox`?

WB предоставляет следующие возможности:

предварительное кэширование
кэширование во время выполнения
стратегии (кэширования)
обработка (перехват сетевых) запросов
фоновая синхронизация
помощь в отладке

На что похож `WB API`?

Ниже приведены примеры основных подходов к разработке прогрессивных веб-приложений (приложений, в которых используются возможности, предоставляемые СВ).

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

+18

Vordgi 18 июн 2021 в 19:18

Темизация. История, причины, реализация

16 мин

7.2K

TypeScript * ReactJS * JavaScript * CSS * Веб-разработка *

Из песочницы

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

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

anisimoffnikita 18 июн 2021 в 15:01

Создаем веб-приложение на Haskell с использованием Reflex. Часть 4

7 мин

Блог компании TypeableHaskell * Программирование * Веб-разработка * Функциональное программирование *

Туториал

Часть 1

Часть 2

Часть 3

Всем привет! В новой части мы рассмотрим использование JSFFI.

intro

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

MagisterLudi 18 июн 2021 в 12:40

Пробелы бывают разные:   ≠ C2A0

3 мин

52K

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

Перевод

Я только что потратил более двух часов на устранение, казалось бы, простой проблемы с HTML. Когда я скопировал и вставил небольшой раздел HTML, веб-браузер отображал только что вставленный раздел не так, как оригинал. Горизонтальный интервал между некоторыми элементами был немного другим, из-за чего вся страница выглядела неправильно. Но как такое могло быть? Два раздела HTML были идентичны — новый был буквально копией старого.

Эта простая на первый взгляд проблема бросала вызов всем моим попыткам ее объяснить. Я придумал множество замечательных теорий: проблемы с моими классами CSS или с полями и отступами. Несоответствующие теги HTML. Ошибки браузера. Я попробовал три разных браузера и во всех получил одинаковые результаты.

Чувствуя себя сбитым с толку, я снова посмотрел на два раздела HTML в редакторе WordPress (текстовое представление) и подтвердил, что они полностью идентичны. Затем я попробовал встроенные в Firefox инструменты веб-разработчика для просмотра отображаемых элементов страницы и сравнил все их свойства CSS. Идентичны, но каким-то образом визуализированы по-разному. Я использовал инструменты разработчика, чтобы проверить точный HTML, полученный с моего веб-сервера, снова проверил два раздела и убедился, что они символьно идентичны. Инструмент Firefox «источник страницы» также подтвердил, что эти два раздела полностью идентичны.

К этому моменту я был готов обвинить космические лучи или магию вуду.

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

fpn 18 июн 2021 в 05:40

WebRTC CDN на Google Cloud Platform с балансировкой и автоматическим масштабированием

10 мин

2.7K

Блог компании FlashphonerВеб-разработка * Работа с видео * DevOps * Видеоконференцсвязь

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

programmerguru 17 июн 2021 в 13:01

Разработка REST-серверов на Go. Часть 3: использование веб-фреймворка Gin

7 мин

56K

Блог компании RUVDS.comGo * Программирование * Веб-разработка * Серверное администрирование *

Перевод

Сегодня, в третьей части серии материалов, посвящённых разработке серверов на Go, мы займёмся реализацией нашего REST-сервера с использованием Gin — одного из самых популярных веб-фреймворков для Go. Вот код, который мы будем тут обсуждать.

Предыдущие части:

Разработка REST-серверов на Go. Часть 1: стандартная библиотека
Разработка REST-серверов на Go. Часть 2: применение маршрутизатора gorilla/mux
Вы тут — Разработка REST-серверов на Go. Часть 3: использование веб-фреймворка Gin
Разработка REST-серверов на Go. Часть 4: применение OpenAPI и Swagger
Разработка REST-серверов на Go. Часть 5: Middleware
Разработка REST-серверов на Go. Часть 6: аутентификация

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

+36

host_m 17 июн 2021 в 07:30

DIV должен уйти: улучшаем HTML

4 мин

22K

Блог компании VDSina.ruCSS * HTML * Веб-разработка *

Перевод

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

Тег div во многом напоминает такие комнаты. Он является чистым листом. Он подходит для любого потока, позволяет управлять своими функциями, и может становиться всем, что мы пожелаем. Целые веб-сайты могут создаваться (и создаются) почти исключительно на одних div. Загуглите «single div designs», и вы найдёте бесчисленное множество дизайнеров, демонстрирующих свои навыки владения CSS, превращая один div в любую форму, которая им понадобится.

Иногда это вселяет трепет, но этой статье я хочу сказать, что нам следует двигаться дальше, к миру без div с именами классов или ID. В мир уникальных элементов HTML. Семантического HTML. Нам нужно сосредоточиться на основах.

+24

fpn 16 июн 2021 в 13:39

AWS, ELB, CDN, Auto Scaling и другие аббревиатуры и термины для WebRTC с низкой задержкой

11 мин

2.7K

Блог компании FlashphonerВеб-разработка * Работа с видео * DevOps * Видеоконференцсвязь

Современные браузеры не предоставляют возможность выбора - использовать WebRTC или не использовать. И если проиграть поток можно по HLS, MSE, то захватить поток с камеры и публиковать поток из браузера можно только с помощью WebRTC. Производители браузеров приняли этот "формат" и внедрили его в свои продукты. Так же как в свое время, те же вендоры поддерживали Flash Player в качестве плагина. Текущая ситуация с WebRTC отличается только тем, что WebRTC встроен в браузер нативно, на уровне кода, а не в виде плагина. Если через пару лет кто-то предложит лучшую библиотеку для работы с видео, нет сомнений, что вендоры перейдут на эту новую технологию. Но сегодня в мире браузеров правит бал Chrome, поэтому горизонт для WebRTC остается чистым.

Ish_Ivan 16 июн 2021 в 08:50

От одного приложения — к сотне. Путь микрофронтенда в Тинькофф Бизнес

5 мин

9.3K

Блог компании Т-БанкМикросервисы * КонференцииAngular * Веб-разработка *

Привет, меня зовут Ваня, недавно я выступил на CodeFest 11, где рассказал про путь Тинькофф Бизнеса на фронтенде от одного приложения к сотне. Но, так как в ИT очень быстро все меняется, а ждать запись еще долго, сейчас я тезисно расскажу о нашем шестилетнем путешествии в дивный мир микрофронтенда!

Пройти путь вместе

+29