host_m сегодня в 14:04

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

Перевод

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

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

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

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

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

Юристы из Гарварда обратили внимание на проблему «мертвых» ссылок в интернете
25 мая 2021 в 16:49 Комментарии: 14
Автор Doom Captcha предлагает отсеивать ботов фрагментом видеоигры
25 мая 2021 в 09:40 Комментарии: 19
Прямой эфир про тесты, трейты, devops в монолите, переход на Go и KPHP с казанского PHP-митапа
14 мая 2021 в 09:05 Комментарии: 0
GitHub блокирует FLoC от Google на всех страницах, кроме кастомных доменов
28 апреля 2021 в 12:38 Комментарии: 9
Как составить резюме веб-разработчика: интервью с Марией Обориной из hh.ru
27 апреля 2021 в 12:31 Комментарии: 0
Google и Ростуризм запустили проект «Раскуси Россию» о русской кухне
21 апреля 2021 в 09:01 Комментарии: 0
WordPress обсуждает отключение Google FLoC на веб-сайтах
19 апреля 2021 в 21:01 Комментарии: 4
Frontend Meetup 20/04: видео и материалы встречи
19 апреля 2021 в 16:22 Комментарии: 0
Подкаст о том, как всё устроено в веб-разработке
16 апреля 2021 в 13:06 Комментарии: 2
Выпуск nginx 1.19.10
14 апреля 2021 в 14:04 Комментарии: 4

nikolayshabalin сегодня в 08:38

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

Перевод
Tutorial

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

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

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

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

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

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

Элементы

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

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

karanarqq вчера в 12:42

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

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

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

ru_vds вчера в 09:00

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

Перевод

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

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

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

S_ILya 21 июня 2021 в 12:00

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

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

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

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

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

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

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

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

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

S_ILya 21 июня 2021 в 10:00

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

Перевод

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

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

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

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

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

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

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

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

alexzfort 20 июня 2021 в 23:18

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

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

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

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее

ru_vds 20 июня 2021 в 17:05

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

Перевод

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

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

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

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

S_ILya 20 июня 2021 в 15:00

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

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

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

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

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

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

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

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

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

madflux 20 июня 2021 в 14:34

Как мы весь интернет сканировали

Всем привет! Меня зовут Александр и я пишу код для 2ip.ru. За добрую половину сервисов можно пинать меня, готов отбиваться. Cегодня я хочу немного рассказать про переделку одного нашего старого сервиса. Это конечно не "big data", но всё равно довольно большие объёмы информации, поэтому думаю будет интересно.

Речь пойдет про Сайты на одном IP, который как вы уже догадались, позволяет узнать все домены зарегистрированные на одном IP. Довольно удобно посмотреть кто присосался к вашему серверу (да, есть и такие), ну или чужому (например shared хостинг).

Как это всегда работало? Мы ходили в Bing с большого пула адресов и парсили выдачу по специальному запросу. Да, решение так себе, но что было то было. Было, потому что бинг прикрутил гайки и мы решили всё это сделать по человечески.

Vordgi 18 июня 2021 в 22:18

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

Из песочницы

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

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

anisimoffnikita 18 июня 2021 в 18:01

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

Tutorial

Часть 1

Часть 2

Часть 3

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

intro

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

MagisterLudi 18 июня 2021 в 15:40

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

Перевод

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

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

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

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

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

fpn 18 июня 2021 в 08:40

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

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

Shreedeer 17 июня 2021 в 23:44

Как я попал на стажировку в Яндекс

Из песочницы

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

programmerguru 17 июня 2021 в 16:01

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

Перевод

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

Перевод предыдущих частей:
❒ Разработка REST-серверов на Go. Часть 1: стандартная библиотека.
❒ Разработка REST-серверов на Go. Часть 2: применение маршрутизатора gorilla/mux

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

host_m 17 июня 2021 в 10:30

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

Перевод

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

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

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

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

fpn 16 июня 2021 в 16:39

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

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

Ish_Ivan 16 июня 2021 в 11:50

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

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

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

mamchyts 15 июня 2021 в 11:46

Автоматическая документация по коду для API в Laravel

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

Ждать долго не пришлось, при обновлении на сервере PHP c 7.2 до 7.4 - мы получили страницу с описанием ошибки, вместо документации. Ошибка найдена в библиотеке, которую мы использовали для рендеринга UI документации. ПР на гитхабе был создан быстро, но провисел в статусе open почти неделю. После этого, тикет насчет документации пошел в работу.

Разработка веб-сайтов

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

Все подряд

Лучшие

Авторы

Компании

Минуточку внимания

Что такое Workbox?

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

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

Что такое Workbox?

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

Средняя зарплата в IT

Вклад компаний

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

Читают сейчас

Самое читаемое

Минуточку внимания

Ваш аккаунт

Разделы

Информация

Услуги

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

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

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

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