Как стать автором
Обновить
308.57
Рейтинг

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

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

Сначала показывать
  • Новые
  • Лучшие
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

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

Блог компании МаклаудРазработка веб-сайтовJavaScript

image


Что такое Workbox?


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


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



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


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

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


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

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

Новости

Показать еще

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

Блог компании МаклаудРазработка веб-сайтовTypeScript
Перевод

image


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

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



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


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


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


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


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

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

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

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

Читать дальше →
Всего голосов 11: ↑10 и ↓1 +9
Просмотры2.9K
Комментарии 0

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

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



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

Здесь мы поговорим о подборе наиболее подходящего формата изображений, об оптимизации их размеров в пикселях и качества, а так же о встраивании изображений в веб-страницы и о ленивой загрузке изображений.
Читать дальше →
Всего голосов 41: ↑38 и ↓3 +35
Просмотры6.8K
Комментарии 21

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

Блог компании МаклаудРазработка веб-сайтовJavaScript

Что такое Workbox?


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


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



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


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

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


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

Читать дальше →
Всего голосов 33: ↑24 и ↓9 +15
Просмотры2.5K
Комментарии 3

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

Высокая производительностьРазработка веб-сайтовMySQLGoBig Data

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

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

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

Читать далее
Всего голосов 14: ↑14 и ↓0 +14
Просмотры7.6K
Комментарии 20

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

Разработка веб-сайтовCSSJavaScriptReactJSTypeScript
Из песочницы

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

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

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Просмотры1.3K
Комментарии 0

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

Блог компании TypeableРазработка веб-сайтовПрограммированиеHaskellФункциональное программирование
Tutorial

Часть 1


Часть 2


Часть 3


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


intro

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

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

Разработка веб-сайтовHTML
Перевод
image

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

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

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

К этому моменту я был готов обвинить космические лучи или магию вуду.
Читать дальше →
Всего голосов 28: ↑14 и ↓14 0
Просмотры2.6K
Комментарии 14

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

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

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

Читать далее
Всего голосов 2: ↑1 и ↓1 0
Просмотры1.3K
Комментарии 0

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

Разработка веб-сайтовJavaScriptКарьера в IT-индустрииIT-компании
Из песочницы

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

Читать далее
Всего голосов 25: ↑11 и ↓14 -3
Просмотры5.1K
Комментарии 35

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

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

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


Читать дальше →
Всего голосов 43: ↑41 и ↓2 +39
Просмотры3.7K
Комментарии 2

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

Блог компании VDSina.ruРазработка веб-сайтовCSSHTML
Перевод

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

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

Иногда это вселяет трепет, но этой статье я хочу сказать, что нам следует двигаться дальше, к миру без div с именами классов или ID. В мир уникальных элементов HTML. Семантического HTML. Нам нужно сосредоточиться на основах.
Читать дальше →
Всего голосов 40: ↑32 и ↓8 +24
Просмотры11.9K
Комментарии 44

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

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

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

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Просмотры1.5K
Комментарии 0

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

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

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

Пройти путь вместе
Всего голосов 35: ↑32 и ↓3 +29
Просмотры3.9K
Комментарии 0

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

Разработка веб-сайтовPHPПрограммированиеLaravelПодготовка технической документации

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

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

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Просмотры2.6K
Комментарии 1

<img>. Доклад Яндекса

Блог компании ЯндексРазработка веб-сайтовJavaScriptИнтерфейсыHTML
«Просто добавь картинку на сайт», — говорили они. А оказалось, что «просто» не значит «правильно». В докладе я постарался разобраться, как эффективно добавлять изображения на страницу, какие форматы графики для каких случаев полезны и как автоматизировать автоматизируемое.

— Всем привет. У меня доклад с интригующим названием в виде одного тега.
Читать дальше →
Всего голосов 33: ↑33 и ↓0 +33
Просмотры7.6K
Комментарии 4

Дайджест Joomla за весну 2021

CMSРазработка веб-сайтовPHPJoomla
Из песочницы

Все главные новости из мира Joomla за осень 2020 и весну 2021, в одной статье.

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

Читать далее
Всего голосов 9: ↑8 и ↓1 +7
Просмотры1.9K
Комментарии 14

PHP Дайджест № 205 (1 – 15 июня 2021)

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


Подборка свежих новостей и материалов из мира PHP. В выпуске: первая альфа PHP 8.1.0, Composer 2.1, Symfony 5.3 и другие релизы. Обзор новых предложений для PHP 8.1: Partial Function Application, pipe оператор, readonly свойства. А также порция полезных инструментов, статьи, видео и подкасты.

Приятного чтения!
Читать дальше →
Всего голосов 45: ↑45 и ↓0 +45
Просмотры7.4K
Комментарии 7

Webix Datatable. От простой таблицы к сложному приложению

Разработка веб-сайтовJavaScriptПрограммированиеHTML
Tutorial

Эта статья будет интересна для тех, кто привык решать сложные задачи простыми методами. Работа с большими данными, на первый взгляд, может показаться сложной задачей. Но если вы владеете специальными инструментами, то организация и отображение больших наборов данных покажется вам не более чем забавным развлечением. Сегодня мы поговорим об одном из самых неординарных инструментов для работы с данными, который предоставляет нам команда Webix. Речь пойдет о таком простом и одновременно сложном виджете библиотеки Webix UI как DataTable. Давайте разбираться в чем его сила.

Читать далее
Всего голосов 2: ↑1 и ↓1 0
Просмотры2.4K
Комментарии 4

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