Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Рубрика «html» - 71
Дайджест свежих материалов из мира фронтенда за последнюю неделю №241 (12 — 18 декабря 2016)
2016-12-18 в 20:28, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, Блог компании Zfort Group, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтендОтправка электронной почты в формате HTML
2016-12-17 в 1:02, admin, рубрики: html, javascript, juice, mail, premailer, Верстка писем, Разработка веб-сайтовВведение
Почти в каждом проекте приходится думать об отправке писем по электронной почте. Основными требованиями при этом являются, помимо надежности доставки, привлекательность и удобство электронных писем.
Основные нюансы при формировании таких писем:
- Все стили должны встраиваться (inline) в виде атрибута
styleдля конкретного HTML-элемента. - Все изображения должны встраиваться, либо как отдельные вложения в в письме, либо в виде base64-кодированных данных (второе банально удобнее).
- Письмо должно поддерживать DKIM (настройка мэйлера), а домен отправителя — содержать SPF-запись.Читать полностью »
Pабота с localstorage: подписка на события, хранение функций, массивов и объектов
2016-12-14 в 10:17, admin, рубрики: html, html5, javascript, localStorageLocalStorage это локальное хранилище данных (key, value), расположенное на клиенте. Данные хранятся до того пока пользователь не очистит их принудительно (историю броузера) или с помощью JavaScript.
Работа с localStorage достаточна проста, данные хранятся в виде строк:
// Сохранение значения
localStorage.setItem(key, value)
localStorage[key] = value
// Получение значения
localStorage.getItem(key)
localStorage[key]
// Удаление значения
localStorage.removeItem(key)
delete localStorage[key]
// Очистка всего хранилища
localStorage.clear()
Самое интересное здесь событие window storage, которое генерируется при изменении значения элемента localStorage.
Читать полностью »
Адаптивное меню без Javascript
2016-12-13 в 15:05, admin, рубрики: css, css3; html-верстка; flexbox;, html, Разработка веб-сайтов, метки: css3; html-верстка; flexbox;
В этой публикации я хочу показать один из способов реализации адаптивного горизонтального меню с использованием Flexbox. Данный способ реализации меню используется на сайте Warface Hub, но немного с другой структурой и большим количеством свистелок.
Читать полностью »
Какой бывает HTML5-стриминг (и почему mp4-стриминга не существует)
2016-12-13 в 12:37, admin, рубрики: Dash, flash video, HLS, html, html5, html5 video, IT-стандарты, media source extensions, mp4, mpeg-dash, streaming, streaming video, WebRTC, Блог компании Эрливидео
Нередко клиенты спрашивают, умеет ли наш сервер «mp4-стриминг в HTML5». В 99% случаев спрашивающий не понимает о чём говорит. В этом сложно винить клиентов: из-за путаницы с терминами, технической сложности и большого разнообразия вариантов стриминга запутаться очень легко.
В этой статье мы расскажем, какой бывает HTML5-стриминг, какие варианты хорошие, и почему, чёрт побери, нельзя говорит «mp4-стриминг».
Читать полностью »
Дайджест свежих материалов из мира фронтенда за последнюю неделю №240 (5 — 11 декабря 2016)
2016-12-11 в 20:51, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, Блог компании Zfort Group, браузеры, дайджест, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.
Список цветовых классов Material Design Lite
2016-12-11 в 18:24, admin, рубрики: css, html, material design, materialdesign, Разработка веб-сайтовПривет всем,
Если вы пробовали Material Design Lite, вы должно быть заметили составной паттерн классов, которые он использует. Это бывает довольно удобно, когда имеешь дело с цветами фона или текста.
Это полный список классов, которые вы можете задать вашим элементам, пользуйтесь!
Читать полностью »
Above-the-Fold CSS — как ускорить загрузку сайта не замедлив разработку
2016-12-06 в 14:38, admin, рубрики: css, front-end, google insights, html, javascriptВ старые добрые времена мы с Google PageSpeed Insights были на короткой ноге. Я — клепал дешевые шаблоны, Google — ставил высокую оценку за скорость их загрузки. Однако со временем многое поменялось, и хоть я по-прежнему клепаю дешевые шаблоны, Google начал вставлять мне палки в колеса.
Я думаю многие видели следующие комментарии в отчетах Google PageSpeed Insights:
- Сократите CSS (HTML, JavaScript)
- Используйте кеш браузера
- Включите сжатие
- Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
И если с первыми тремя пунктами проблем, как правило, не возникает, последний пункт меня поставил в тупик.
Читать полностью »
Про оптимизацию рендеринга — с оптимизмом
2016-12-05 в 13:48, admin, рубрики: cordova/phonegap, css, html, infinite scrolling, javascript, Блог компании Лайв Тайпинг, оптимизацияУ меня есть мечта, и она утопична: я хочу, чтобы мои веб-приложения работали идеально. JQuery, AngularJs, React, Vue.js — все обещают производительность. Но проблема совсем не во фреймворках и не в JavaScript. Проблема в том, как браузер рендерит страницу. А делает он это очень плохо.
Если бы браузер отлично справлялся с рендерингом, то не появился бы такой инструмент, как React Native. Под капотом React Native всё тот же JavaScript, а View нативное, и разница в производительности между нативным приложением и приложением на React Native не будет заметна для рядового пользователя. Другими словами, проблема не в JavaScript.
Если что-то оптимизировать, то как раз рендеринг. Инструментов, которые нам даёт JavaScript и API браузера, недостаточно. Два года я пытаюсь сделать работу своих продуктов плавной и быстрой, но тщетно. Я почти смирился с тем, что веб останется таким навсегда. В этой статье я собрал всё, что успел узнать об оптимизации рендеринга и применить на проектах, над которыми работал, и рассказываю о своих надеждах на ближайшее будущее. Это будущее, в котором я хочу опираться на устойчивый фундамент стандартов и API браузера, а не CSS-хаки и third-party репозитории для оптимизации производительности.
React, Web Components, Angular и jQuery — друзья навеки. Универсальные JavaScript-компоненты
2016-12-05 в 4:59, admin, рубрики: angular, components, html, javascript, jquery, preact, React, ReactJS, web components, Блог компании DevExpress, будущее, Программирование
Эта статья о том, как написать универсальный JavaScript-компонент, который можно будет использовать
- как React-компонент;
- как Preact-компонент;
- как Angular-компонент;
- как Web Component;
- как jQuery функцию для рендеринга в DOMElement;
- как нативную функцию для рендеринга в DOMElement.
Зачем и кому это нужно
Мир JavaScript-разработки очень фрагментирован. Есть десятки популярных фреймворков, большая часть из которых абсолютно несовместима друг с другом. В таких условиях разработчики JavaScript-компонентов и библиотек, выбирая один конкретный фреймворк, автоматически отказываются от очень большой аудитории, которая данный фреймворк не использует. Это серьезная проблема, и в статье предложено ее решение.