Все потоки
Поиск
Написать публикацию
Обновить
74.63

HTML *

Стандартный язык разметки web-страниц

Сначала показывать
Порог рейтинга
Уровень сложности

«Радио, погода, время всегда под рукой» или история одного решения (железо, софт, интерфейс)

Время на прочтение5 мин
Количество просмотров5.6K

Всегда хотелось какого то простого и удобного решения для управления звуковым бэкграундом в интерьере. Попробовав несколько существующих вариантов, решил реализовать своё решение на базе Android планшета и сайта-веб-приложения. Теперь "Радио, погода, время всегда под рукой".

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

Читать далее

7 полезных HTML-атрибутов, о которых вы, возможно, не знаете

Время на прочтение3 мин
Количество просмотров18K
Веб-разработчик просто обязан хорошо знать HTML и уметь им пользоваться. Тот, кто не ориентируется в HTML, просто не может называться веб-разработчиком. Ведь каждый сайт в интернете создан с применением HTML. Этот язык разметки обладает массой ценных возможностей. В частности, HTML-элементам можно назначать атрибуты, применение которых позволяет расширять возможности элементов.



Некоторые атрибуты общеизвестны, а вот о некоторых кое-кто, возможно, и не знает. Сегодня мы поговорим о таких вот малоизвестных HTML-атрибутах.
Читать дальше →

Расширение для Google Chrome: управляем скиллами друзей в LinkedIn

Время на прочтение5 мин
Количество просмотров2.8K

Статья пригодится для новичков которые давно мечтали создать свое расширение для Google Chrome, но до дела так и не доходило. Поэтому давайте считать, что время пришло, пишем расширение прямо сейчас.

Данное расширение позволяет прожимать подтверждения скиллов на странице друга или отменить подтверждения скиллов. Полезно когда вместо десятков нажатий на "плюсики" Вы нажимаете только на одну кнопку расширения.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №460 (22 — 28 марта 2021)

Время на прочтение3 мин
Количество просмотров8.3K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Аналитика алкогольной продукции сети магазинов «Лента»

Время на прочтение4 мин
Количество просмотров7.9K

Сегодня вашему вниманию представлена аналитика (исследование) алкогольной продукции сети магазинов «Лента» (далее - Лента) в каталоге на официальном сайте компании.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №459 (15 — 21 марта 2021)

Время на прочтение3 мин
Количество просмотров8.6K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Фреймворк Webix Jet глазами новичка. Часть 1. Композиция и навигация

Время на прочтение15 мин
Количество просмотров4.3K

В предыдущих статьях из цикла JavaScript библиотека Webix глазами новичка вы узнали как создать приложение на основе компонентов Webix UI. В этой публикации я хочу подробно рассмотреть создание аналогичного приложения с использованием архитектуры и возможностей фреймворка Webix Jet и рассказать о его преимуществах. Статья будет полезна как для тех кто знаком с Webix UI, так и для новичков, ведь код библиотеки интуитивно понятен и удобен в использовании.

Узнать подробнее

Стоит ли в играх перерисовывать только ту часть CANVAS, которая изменилась? Или проще стереть все и нарисовать заново?

Время на прочтение8 мин
Количество просмотров6K

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

Поначалу звучит очень логично. Где то на краю экрана пробежал вражеский персонаж, и только ту часть CANVAS мы и хотим перерисовать, сэкономив ресурсы. Это было настолько правдоподобно, что я за ночь изрисовал лист A4 в поисках оптимального решения этой задачи. И вот что получилось.

Читать далее

Очередной гайд по HTML-элементам, которые можно использовать в каждом проекте

Время на прочтение6 мин
Количество просмотров22K
В сети существует множество гайдов, которые описывают назначение HTML-элементов. Но сколько я не проводил собеседований или не проверял код, я вижу одну картину. Разработчики используют ограниченный набор элементов.

Для исправления этой ситуации я взял следующие элементы: header, nav, main, section, article, aside, address, и покажу, как их использовать.
Читать дальше →

5 HTML-трюков, о которых никто не говорит

Время на прочтение5 мин
Количество просмотров29K

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

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

Читать далее

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

Время на прочтение3 мин
Количество просмотров8.2K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Веб-компоненты проще, чем вы думаете

Время на прочтение8 мин
Количество просмотров27K

Когда я приходил на конференции и видел презентации на тему веб-компонентов, я всегда думал, что это не только изящно, но и довольно сложно. Тысяча строк JavaScript, чтобы сохранить всего 4 строки HTML. Докладчик или неизбежно скрывал за простыми вещами огромное количество JS кода, или погружался в сложные детали, тогда мои глаза начинали закрываться от скуки, и я начинал думать о том, покрывают ли мои суточные выплаты расходы на закуски.

Однако в недавнем проекте, созданном для легкого изучения HTML (Конечно, путем добавления зомби и глупых шуток), я решил, что необходимо описать каждый элемент HTML в спецификации. Не считая той конференции, я впервые начинал знакомство с <slot> и <template> элементами, и, когда я захотел написать что-то интересное о них в проекте, мне пришлось углубиться в тему.

И в процессе углубления я понял: веб-компоненты проще, чем я думал.

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

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

Читать далее

Заметки фронтендера #1

Время на прочтение4 мин
Количество просмотров8.2K
image

В этой статье вы найдете несколько небольших заметок о фронтенде. Иногда они будут короткими потому, что тема полностью раскрывается в паре предложений, а иногда от того, что автору не хватает опыта и знаний, чтобы раскрыть их более полно. Если вам понравится, то буду писать больше и полнее, со ссылочками и ресерчем.
Читать дальше →

Ближайшие события

Забудьте про div, семантика спасёт интернет

Время на прочтение6 мин
Количество просмотров124K

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном <div> и <span>) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но <div> — не приговор, и мы не призываем от него целиком отказываться. Ну и всегда можно договориться.

Читать далее

Дайджест свежих материалов из мира фронтенда за последнюю неделю №457 (1 — 7 марта 2021)

Время на прочтение3 мин
Количество просмотров8.7K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

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

Три способа создания клякс с помощью CSS и SVG

Время на прочтение6 мин
Количество просмотров14K

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

Итак, как же они устроены? Разумеется, можно открыть какой-то графический редактор и сделайте их, верно? Конечно, это круто. Но мы пишем здесь о CSS финтах, и было бы гораздо интереснее посмотреть на возможности, которые нам дают CSS и SVG - двух наших любимых ингредиентов!

У нас есть несколько способов сделать кляксы. Давай проверим их.

Читать далее

Отслеживание лиц в реальном времени в браузере с использованием TensorFlow.js. Часть 6

Время на прочтение7 мин
Количество просмотров3.2K

Вот и финал этой серии статей (ссылки на предыдущие части — в конце этого материала), в которой мы создавали в браузере фильтры в стиле Snapchat, обучая модель ИИ понимать выражения лиц и добились ещё большего, используя библиотеку Tensorflow.js и отслеживание лиц.

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

Приятного программирования!

Самый простой (для знающих Linux) и дешевый способ разместить IP-камеру на сайте для небольшой аудитории

Время на прочтение5 мин
Количество просмотров24K

В чем главная проблема современных недорогих IP-камер? Вы не можете просто так добавить их на свой сайт! Они выдают видео совсем не в том формате, который понимают браузеры. Да, конечно, можно зайти напрямую на камеру (и часто только с IE), и у многих моделей есть «облако». Но проблема остается — я не могу просто так взять и поместить камеру на сайт, как например, простую картинку!

Я рассмотрел множество решений для организации трансляций с IP-камер от разных поставщиков, в том числе и OpenSource решения. У большинства один недостаток, очень критичный для меня: система постоянно захватывает поток с камеры, даже если нет зрителей. В моем случае нужно было вывести картинку на сайт с удаленных камер, подключенных по 4G каналу в глухом районе.

Читать далее

Отслеживание лиц в реальном времени в браузере с использованием TensorFlow.js. Часть 5

Время на прочтение7 мин
Количество просмотров3.9K

Носить виртуальные аксессуары – это весело, но до их ношения в реальной жизни всего один шаг. Мы могли бы легко создать приложение, которое позволяет виртуально примерять шляпы – именно такое приложение вы могли бы захотеть создать для веб-сайта электронной коммерции. Но, если мы собираемся это сделать, почему бы при этом не получить немного больше удовольствия? Программное обеспечение замечательно тем, что мы можем воплотить в жизнь своё воображение.

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

Приятного программирования!

Отслеживание лиц в реальном времени в браузере с использованием TensorFlow.js. Часть 4

Время на прочтение9 мин
Количество просмотров3.4K

В 4 части (вы же прочли первую, вторую и третью, да?) мы возвращаемся к нашей цели – создание фильтра для лица в стиле Snapchat, используя то, что мы уже узнали об отслеживании лиц и добавлении 3D-визуализации посредством ThreeJS. В этой статье мы собираемся использовать ключевые точки лица для виртуальной визуализации 3D-модели поверх видео с веб-камеры, чтобы немного развлечься с дополненной реальностью.

Приятного программирования!