HTML *

Данное руководство составлено на основе некоторого опыта, который был получен из книг и официальной документации. Вашему вниманию будет представлено 2 варианта написания простых в поддержке сайтов на Vue.js (с использованием backend систем и без). 

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

Во второй части мы рассмотрим более сложный вариант, с использованием опен сорс CMS решения для управления данными сайта. Весь код в данном руководстве представлен в синтаксисе javascript/hml/css и bash.

Вместе со Стивом Сьюэллом, CEO Builder.io, разбираемся, почему с точки зрения оптимизации производительности изображения лучше загружать через HTML, а не через CSS. 

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

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

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

Полезная ссылка с подробным объяснением концепции микрофронтенда.

Давайте погрузимся внутрь и посмотрим, что нового ждет разработчиков в Chrome 111.

В Институте бизнеса и дизайна состоялась научная конференция «Эмоции в цифровой культуре: репрезентация, выражение, потребление»

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

• Клиент-серверную модель
• Жизненный цикл запроса веб-страницы
• Hypertext Transfer Protocol
• Как браузеры рендерят контент

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

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

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

Начнем!

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

Что такое цветовые функции CSS?

Основной обязанностью любого транспортного протокола является поддержка связи и коммуникации между двумя конечными сущностями. Таким сущностями могут выступать хосты и устройства, как, к примеру, роутеры. Транспортный протокол предоставляет механизм виртуального зацикленного пути между двумя конечными устройствам. Есть два типа транспортных протоколов: ориентирующиеся на соединения и не ориентирующиеся. Из названий становится понятно, что в первом типе происходит некоторое количество дополнительной работы на то, чтобы создать соединение и только после этого появляется возможность передачи информации. В свою очередь протоколы, работающие без заранее созданного соединения, нацелены на то, чтобы доставлять информацию, не волнуясь о том была ли она принята или нет, но в таком случае работа по приёму ложится на самих отправителей и адресатов, которые связаны протоколом. В пример можно привести два самых распространённых протокола – это TCP и UDP, соответственно, первый ориентирован на связь, а второй – нет.

Протокол QUIC – новый транспортный протокол, предназначенный для обеспечения соединения с низкой задержкой через Интернет. Новая технология построена на основе протокола UDP (что напрямую отражено в названии - Quick UDP Internet Connections), поэтому с её помощью можно передавать данных без необходимости в выделенном сквозном соединении.

QUIC был разработан компанией Google для решения проблем основного транспортного протокола TCP (Transmission Control Protocol), который широко используется в интернете, однако имеет недостатки среди которых – высокий уровень задержек и проблемы с контролем перегрузок, который могут привести к проблемам с производительностью.

В сети можно найти множество различных публикаций, посвященных безопасной разработке backend приложений. Основной причиной этого является то, что в бэкенде ведется основная обработка данных и соответственно, там выше риски в случая уязвимости кода. Но не стоит забывать и об уязвимостях на frontend, ведь это та сторона веб-ресурса, которая видна пользователям, и которая первой подвергается различным попыткам эксплуатации уязвимостей. В этой статье мы поговорим о безопасной разработке в таких инструментах фронтенд разработки, как язык разметки HTML. 

Добрый вечер всем!

Возможно выбрал не лучшее время для охвата аудитории, но тем не менее главное чтоб продукт был хороший, а не статья о нем. Последние несколько недель я пишу приложение в рамках которого надо собирать огромное количество информации из сети(запросы к API/парсинг HTML кода) и под конец 4-ой интеграции я подумал что надо бы это максимально облегчить(не дело это пересобирать приложение под каждый чих интеграции), возможно это не лучшая преамбула, но хотя бы была реальная проблема решение к которой хотелось показать и заопенсорнуть.

Итак Fitter = сшиватель достаточно жаргонный перевод, но мне он кажется что лучше всего подходит. Я делал эту штуки исходя из следующих предположений:

Size container queries и container query units недавно достигли стабильной поддержки во всех современных браузерных движках.

Парсинг лучших статей дня с habr

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

Всем привет, последние пару месяцев я активно изучаю тему веб‑компонентов, собираю и нарабатываю опыт, а затем делюсь своими наработками с другими с целью обменяться опытом, получит новый опыт, фидбек и понять куда двигается разработка в вебе и шагать дальше за новым опытом. Все ниже изложенное не является инструкцией как делать нужно, а является примером того, как сделать возможно на текущий момент в 2023 году, у меня уже набрался небольшой опыт (8 публикаций и 3 веб‑компонента на гитхабе) и я решился попробовать сделать что‑то серьезнее чем просто очередную реактивную кнопку или лайки, в первой части моей публикации я проведу вас по MVP веб‑компонента wc-wisywig, немного затронем философию семантики, браузерные API и обменяемся опытом, потестим HTML5 теги в статье на хабре. Для нетерпеливых сразу вот ссылка на демо и git репозиторий. Остальных ждет техничесий лонгрид, прошу под кат)

Всем привет! Я в веб-разработке не так давно. Сейчас я пишу свой сайт, который будет выступать в качестве моего портфолио и, возможно, даже целого проекта. При добавлении модального окна для авторизации на свой сайт, я подумал, а что будет, если публиковать подобные модульные вещи, чтобы любой человек мог их скопировать и не думать о них, а использовать в разработке. То есть создать готовый модуль для встраивания. Мне, как разработчику было бы удобно использовать готовое решение, тем более написанное мною, да и делиться опытом - дело приятное :)

Когда речь идет о производительности, разработчики часто используют Lighthouse, Perfbuddy или аналогичные инструменты анализа производительности. Но когда целевой сайт имеет защиту от ботов, получить информацию не так просто. В этой статье блога мы сосредоточимся на том, где искать признаки узких мест в производительности с помощью Chrome Devtools.