Обновить
52.81

HTML *

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

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

JavaScript библиотека Webix глазами новичка. Часть 5. Работа с данными на стороне пользователя

Время на прочтение7 мин
Охват и читатели2.6K


Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix. Я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеке.
Читать дальше →

Гайд по Custom HTML тегам для Google Tag Manager от Simo Ahava

Время на прочтение8 мин
Охват и читатели9.4K
В конце января Симо Ахава выложил в своём блоге обзор на возможности применения Custom HTML тегов в Google Tag Manager. Пользовательские HTML теги дают широкие возможности для изменения контента на сайте, но нужно соблюдать повышенную осторожность — особенности тегов и их обработки несут большие риски. Аналитик MediaGuru Тимур Леденёв перевел для вас этот полезный обзор.

Довольно долго (с конца 2012 года) одной из наиболее значимых опций GTM был Custom HTML тег. Этот волшебный инструмент позволяет GTM добавлять элемент HTML на страницу сайта. С 2012 года Google Tag Manager превратился из изолированной среды с пользовательскими шаблонами тегов в неограниченное ничем решение по управлению контентом на стороне клиента.

В статье мы рассмотрим принципы работы Custom HTML тег и возможности его применения.
Читать дальше →

Современная сборка 2020 для frontend. Gulp4

Время на прочтение9 мин
Охват и читатели95K

Начало


Посмотрев на календарь, я понял, что уже 2020, а посмотрев на свою сборку, которая была с 2018 года, я понял, что пора её менять. В этой статье мы разберем структуру проекта, плагины (минимальный набор функционала) и их новые возможности, которые добавились за такое большое время. Мы разберем все моменты, чтобы новичок мог себе скачать эту сборку и начать с ней работать.


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


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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №402 (10 — 16 февраля 2020)

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

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

Исчерпывающий путеводитель по тегу iframe

Время на прочтение11 мин
Охват и читатели330K
iframe tag

Элемент iframe (сокращение от встроенного фрейма), вероятно, является одним из старейших тегов HTML и был представлен ещё в далеком 1997 году в HTML 4.01 Microsoft Internet Explorer.


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


Чтобы помочь вам сформировать собственное мнение и отточить свои навыки разработчика, мы расскажем обо всем, что вам нужно знать об этом противоречивом теге.


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


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

Понимание CSS Grid (1 часть): Grid-контейнер

Время на прочтение10 мин
Охват и читатели49K

Приветствую! Представляю вашему вниманию перевод статьи «Understanding CSS Grid: Creating A Grid Container» автора Rachel Andrew


Понимание CSS Grid: Создание Grid-контейнера


Хотя технология CSS Grid стала поддерживаться некоторыми браузерами еще в 2017 году, у многих разработчиков пока не было возможности использовать её в своих проектах. Технология CSS Grid привносит множество новых свойств и значений. Из-за этого может казаться сложной. Однако, многие используемые в ней инструменты являются взаимозаменяемыми, а это значит, что вам не нужно изучать всю спецификацию, чтобы начать. Цель серии статей "Понимание CSS Grid" – провести читателей по пути от новичка до эксперта.


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


В этой статье мы рассмотрим:


  • Создание grid-контейнера с помощью display: grid или display: inline-grid
  • Создание колонок и строк с помощью grid-template-columns и grid-template-rows
  • Управление размерами неявных треков (полос / дорожек) с помощью grid-auto-columns и grid-auto-rows

Продуктовый дизайн без дизайнера

Время на прочтение10 мин
Охват и читатели3.8K


Я работаю в КОРУС Консалтинг СНГ 3 года, и за это время поучаствовала в проектировании девятнадцати B2B сервисов. Проектирование взаимодействия ассоциируется обычно с Axure, InVision, Moqups, Framer, (вставьте ваш любимый вариант), но мои инструменты — это HTML, SCSS и AngularJs. Я расскажу, как обычная практика сохранения HTML-шаблонов выросла в альманах полноценных макетов, и как группа верстальщиков во главе с арт-директором проектировала взаимодействие с интерфейсами всех продуктов КОРУС Консалтинг СНГ на протяжении шести лет.

И почему это работало.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №401 (3 — 9 февраля 2020)

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

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

JavaScript библиотека Webix глазами новичка. Часть 4. Работа с данными. CRUD

Время на прочтение6 мин
Охват и читатели4.5K


Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеке.

ЧЕТВЕРТАЯ ЗАДАЧА


В работе с данными важно иметь возможность выполнить несколько типов операций. В web разработке за это отвечает CRUD — четыре базовые функции. У библиотеки Webix есть все средства для реализации CRUD. Основой для решения новых задач мне послужит материал из предыдущих публикаций: создание интерфейса приложения, модулей проекта и работа с формами.
Читать дальше →

ResizeObserver — новый мощный инструмент для работы с адаптивностью

Время на прочтение5 мин
Охват и читатели49K
Доброго времени суток, друзья!

«Отзывчивый» является одним из стандартов веб-разработки. Существует большое количество разрешений экрана, и это количество все время увеличивается. Мы стремимся поддерживать все возможные размеры экранов с сохранением дружелюбного пользовательского интерфейса. Отличным решением данной задачи являются медиа-запросы (media-queries). Но что насчет веб-компонентов? Современная веб-разработка основана на компонентах, и нам нужен способ делать их отзывчивыми. Сегодня я хочу рассказать о ResizeObserver API, позволяющим следить (наблюдать) за изменениями размеров конкретного элемента, а не всей области просмотра (viewport), как в случае с медиа-запросами.
Читать дальше →

[По докам] Flutter. Часть 4. Для веб-разработчиков

Время на прочтение9 мин
Охват и читатели12K
Начинаем новую неделю с очередной интерпретации официальной документации Flutter в формате «вопрос-ответ». 4-я часть освещает в сравнительном стиле Flutter для веб-разработчиков. Она целиком посвящена вёрстке и вышла не такой объёмной, как предыдущие. Традиционно рекомендую всем интересующимся Flutter веб-разработчикам заглянуть под кат, чтобы понять, стоит ли пробовать этот фреймворк и сколько усилий это займёт.


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

Доработка админки Webasyst

Время на прочтение3 мин
Охват и читатели4K
В данной статье я хочу рассказать, как простым способом немного облегчить себе жизнь, заполняя сайт на движке WebAsyst, сразу переходя к редактированию товаров и имея возможность снимать все чекбоксы на странице. А так же потенциально сэкономить 500 руб на покупке плагина, который исправляет одну из этих проблем.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №400 (27 января — 2 февраля 2020)

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

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

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

Знакомимся с Web Animations API

Время на прочтение5 мин
Охват и читатели22K
Доброго времени суток, друзья!

Веб API постоянно эволюционируют. Некоторые из них, такие как Console или Canvas, хорошо поддерживаются всеми браузерами, другие по-прежнему находятся на стадии разработки.

Одним из API, находящимся на стадии разработки, является Web Animations API или WAAPI. Несмотря на то, что первый вариант спецификации был опубликован в 2012 году, а сам API впервые реализован в браузерах Firefox и Chrome в 2014 году, я узнала о нем совсем недавно (я тоже раньше о нем не слышал — прим.пер.).

Он позволяет разработчикам работать с CSS анимацией средствами JavaScript. Его синтаксис похож на синтаксис традиционной CSS анимации, но имеет некоторые особенности, которые облегчают разработчикам создание и изменение анимации.

Давайте рассмотрим этот API на простом примере.
Читать дальше →

Создаем анимированное слайдшоу на CSS

Время на прочтение3 мин
Охват и читатели16K


Доброго времени суток, друзья!

Устал от JS, переключись на CSS!

Задача


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

Возможное решение


Для слайдшоу возьмем странные «макрофото» Paweł Czerwiński (они прикольные).

Итак, поехали.
Читать дальше →

Методы скрытия элементов веб-страниц

Время на прочтение13 мин
Охват и читатели256K


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

  • Некий элемент совершенно невидим и, более того, удалён из потока документа.
  • Глазами элемент не увидеть, но он присутствует в документе и доступен для ассистивных технологий наподобие средств для чтения с экрана.
  • Элемент видим, но скрыт от средств для чтения с экрана.

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

JavaScript библиотека Webix глазами новичка. Часть 3. Модули, диаграммы, древовидные таблицы

Время на прочтение6 мин
Охват и читатели4.6K


Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеки.
Читать дальше →

Конец эпохи Trident

Время на прочтение27 мин
Охват и читатели38K
tl;dr Я бы сказал, что Microsoft на несколько световых лет опередила всех в разработке инструментов для проектирования сложных веб-сайтов. Сейчас эти технологии изобретают заново на руинах погибшей цивилизации.



Когда я был ребёнком, меня всегда завораживали истории о древних цивилизациях. Я зачитывался книгами об Атлантиде, об истории открытия Трои Генрихом Шлиманом, о греках, римлянах, империи инков и Древнем Египте. И меня всегда восхищали их продвинутые знания в области астрономии, математики и медицины, их невероятные достижения, возведение этих огромных монументов и построение высокофункциональных социальных систем. Что ещё более невероятно, так это то, что всё это было сделано за тысячи лет до появления христианской культуры!

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

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

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

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

Рендеринг веб сайтов 101

Время на прочтение7 мин
Охват и читатели55K
Вы вводите название сайта в адресную строку браузера, нажимаете enter, и по привычке видите запрашиваемую страницу. Все просто: ввел название сайта — сайт отобразился. Однако для более любознательных хочу рассказать, что происходит между тем как браузер начинает получать куски сайта (да, сайт приходит кусками, по-другому — чанками) и отображает полностью нарисованную страницу.