HTML *

Привет, Хабр! Я yukk1ro, и сегодня хочу рассказать о своем проекте, который призван сделать обучение программированию более доступным и эффективным.

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

На самом деле, HTML — самый важный язык вычислений, из когда-либо созданных. Недооценивайте его на свой страх и риск.

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

Всем привет и добро пожаловать в мой хабр о тестировании и QA!

Вполне возможно, что новая статья выйдет уже в Новом Году, так что поздравляю всех с Новым Годом. Пусть задачи будут понятными, а спринты не "подгорали"!

В данной статье разберём создание и деплой простой html-страницы с embed-видео для дальнейших тестов.

HTTP-запросы: структура, методы, строка статуса и коды состояния

Цель: написать небольшую статью, максимально понятным языком,
которая дает представление о протоколе http и объясняет структуру http запросов и ответов сервера.

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

Заголовок: HTTP-запроса: Структура, методы, статусная строка и коды состояния.

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

Причины написания статьи, общие правила использования handlebars в superset и советы содержатся в первой статье, поэтому сразу опишу следующие шаблоны.

Всем привет! В данной статье я бы хотел рассказать о таком понятии как "ключи" в JavaScript фреймворках и библиотеках; зачем они используются и как помогают при работе с DOM.

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

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

Вместе с Creative Developer We Wizards Даниилом Сарабьевым сделаем сервис, позволяющий получить случайный набор закрытых таро с возможностью вскрыть выбранные карты.

Каждый Frontend-разработчик знает, что такое объект Window. С самими объектом, вроде бы, все понятно. Но при детальном рассмотрении оказывается, что браузер никогда не отдает этот важнейший глобальный объект напрямую. В этой статье я предлагаю разобраться в спецификации HTML и в том, как именно ведет себя браузер в части глобального контекста.

Часто, при разработке сайтов на фреймворках, не придаётся особого внимания деталям, которые в данный фреймворк включены. И это нормально, ведь главная задача фреймворка - чтобы удобно было сайт делать и чтобы он был быстрым и функциональным. Но, эти детали тем и интересны, что узнав некоторые моменты, взгляд на javascript разработку чуть дополняется.

Недавно, в процессе реализации одного из модулей проекта, над которым я работаю — возникла проблема воспроизведения видео на web странице, а также возникли проблемы с его адаптацией под iPhone и iPad.

Проблема была в следующем:

Создал веб‑страницу HTML5, на которой есть небольшое видео, создал свою control‑panel для плейера, и все отлично работает в Chrome и FireFox, но совсем не работает ни на iPhone, ни на iPad. Получаю просто пустую страницу.

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

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

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

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

HTML-атрибут hidden=until-found и событие beforematch могут решить эти проблемы. Добавляя hidden=until-found в контейнер для вашего скрытого контента, вы позволяете браузеру искать текст в этой скрытой области и открывать раздел, если совпадение найдено.

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

Эти функции доступны в Chrome 102, поэтому давайте посмотрим, как они работают.

Добрый день хабр! Решил поделиться своим небольшим, но полезным открытием в плане использования html data-attributes & css selectors.

Html data-attributes - это кастомные атрибуты, которые вы можете сами назначать куда-угодно и с каким угодно именем (но имя должно начинаться с префикса data-). Затем вы можете использовать их в css селекторах, чтобы влиять на содержимое классов и уже классами управлять элементами. Движок браузера автоматически среагирует на изменение data-атрибута и применит соответствующий код css класса.

В этой статье мы будем рассматривать ускорение работы страницы только с помощью файлов HTML и CSS

Делиться своими идеями с сообществом - хорошо и правильно. Это позволяет развиваться, перенимать лучшие практики, исследовать новые инструменты, учиться оформлять свои решения. Но какой код стоит выносить в общий доступ? И как делать это на постоянной основе? Чтобы разобраться в этих вопросах я решил сделать свой Javascript OpenSource Boilerplate - маленькую, но максимально расширяемую библиотеку компонентов. Она называется handy-ones.

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

Всем привет, мне пришлось очень долго промучаться с анимацией Аккордеона и свойства max-height не прибегая к помощи Js в вычислениях, и сейчас я поделюсь с вами оптимальным решением.

Код на Codepen https://codepen.io/webfrontden/pen/poaOPER