Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Рубрика «html» - 39
Дайджест свежих материалов из мира фронтенда за последнюю неделю №326 (6 — 12 августа 2018)
2018-08-12 в 20:09, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, Блог компании Zfort Group, браузеры, дайджест, подкасты, Разработка веб-сайтов, ссылки, фронтендПеснь о том, как создание проекта превратилось в ад
2018-08-10 в 15:55, admin, рубрики: html, python, веб-дизайн, Геоинформационные сервисы
Привет! Меня зовут Владимир, мне 15 лет, я Junior Python Developer и по совместительству буду в этой истории ещё и дизайнером-дилетантом. Сейчас я учусь в 9 классе (кто бы мог подумать) и намереваюсь рассказать вам о нашем погибшем проекте.
Читать полностью »
Используем AMP как библиотеку общего назначения для создания быстрых динамических сайтов
2018-08-08 в 8:18, admin, рубрики: amp, css, Google Chrome, html, javascript, pwa, Блог компании Google, Разработка веб-сайтов, Разработка под e-commerceИзменить первое впечатление очень трудно. И я говорю не только о людях. Технологии также часто становятся заложниками первого впечатления — своей первой версии. И потом несмотря на годы развития, новые возможности и устранение старых недостатков, в массовом сознании технология остается той самой несовершенной, своей первой версией. Тем, кто не пытается бороться с такого рода когнитивными искажениями, остаётся только смотреть на успехи конкурентов, использующих знакомые технологии в новых сценариях, с немым вопросом: "А что, так можно было!?".
Наиболее ярким примером технологии, которая шагнула далеко вперёд по сравнению с тем, чем она была в самом начале, на мой взгляд является AMP — Accelerated Mobile Pages. Многие разработчики воспринимают AMP как способ положить статический контент своего сайта (статьи, новости, заметки и т.д.) в кэш Google, чтобы при открытии из поиска этот контент загружался мгновенно (о высокой скорости загрузки AMP страниц свидетельствует иконка молнии в результатах поиска :)). Естественно, если вам нужно добиться именно такого результата, то с AMP это сделать будет очень легко. Но AMP — это гораздо больше чем просто технология для работы со статическим контентом или кэшем Google. AMP уже давно используется как библиотека общего назначения, основанная на web компонентах, для создания быстрых динамических страниц и даже сайтов целиком, на которые пользователи попадают как из поиска, так и из других источников, включая прямые заходы. С этой точки зрения AMP можно поставить в один ряд с Polymer, React или Angular. Естественно с оглядкой на то, что AMP предназначена для простых (чтобы это не значило) сайтов, где основной упор делается на контент, а динамическая составляющая ограничена.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №325 (30 июля — 5 августа 2018)
2018-08-05 в 20:49, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, Блог компании Zfort Group, браузеры, дайджест, подкасты, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Создаём оповещатель, о том что у пользователя включён блокировщик рекламы и просим его выключить
2018-08-03 в 22:37, admin, рубрики: html, javascript, браузеры, контекстная реклама, медийная рекламаДля многих сайтов реклама — единственный источник денег. Поэтому они, Вы, я — размещают её у себя. Но в нашем мире куча блокировщиков рекламы. AdBlock, AdBlock Plus, AdBlock Pro, Ghostery, Adguard. Есть даже встроенные в браузеры (Opera, Яндекс.Браузер). Эти блокировщики блокируют не только рекламу, но и прибыль от сайта. Может, сайт вообще живёт только на рекламе? Так вот. Сегодня расскажу о том, как можно узнать, пользуется посетитель Вашего сайта блокировщиком или нет, а если да — попросить его отключить.
Итак, почему же я выбрал способ просить пользователя отключить блокировщик, а не маскировать рекламу под обычный контент сайта, или вообще не допускать посетителя к сайту (пока он не отключит AdBlock)? А потому, что это есть самый этичный способ, а ещё при пользовании последними двумя способами, можно потерять большую долю уникальных посетителей.
Вот HTML-код моего первого способа.
Пишем компонент с «материальными» кнопками для Svelte
2018-07-30 в 14:18, admin, рубрики: html, javascript, svelte, Разработка веб-сайтовВдохновившись статьями SvelteJS: Релиз второй версии, Исчезающие фреймворки и Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp», про «исчезающий» фреймворк Svelte (читается «свелт», а то мало ли), я захотел его попробовать. И для начала решил написать небольшой компонентик с кнопками из Materialize.
Читать полностью »
Дайджест свежих материалов из мира фронтенда за последнюю неделю №324 (23 — 29 июля 2018)
2018-07-29 в 20:16, admin, рубрики: angular, css, ES6, html, html5, javascript, JS, React, vue, Блог компании Zfort Group, браузеры, дайджест, подкасты, Разработка веб-сайтов, ссылки, фронтендПредлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Почему открытие YouTube в Firefox или Edge может занимать в 5 раз дольше, чем в Google Chrome
2018-07-24 в 19:31, admin, рубрики: chrome, Firefox, Google Chrome, html, mozilla, shadow dom, YouTube, браузерыНеожиданным открытием поделился сегодня с общественностью Крис Петерсон из Mozilla: как выяснилось, в данный момент открытие страницы YouTube в браузерах Firefox и Edge происходит в 5 раз медленнее, чем в Google Chrome. В чём же причина подобного явления?
Дело в том, что новый редизайн YouTube, в основе которого лежит библиотека Polymer, полагается на API Shadow DOM v0, которое было реализовано исключительно в Chrome, а с апреля этого года и вовсе признано deprecated.
В силу описанной причины для работы обновленного YouTube в Firefox и Edge вместо Shadow DOM v0 используется полифилл — который, разумеется, работает медленнее. На ноутбуке Криса первоначальная загрузка страницы занимает в Chrome 1 секунду, а под Firefox с использованием полифилла — целых 5 секунд. При последующей навигации по сайту падения производительности замечено не было. Под IE11 YouTube по-прежнему работает в старом дизайне без использования Polymer.
Причина подобного решения неизвестна. Возможно, внутренние метрики Google показали, что редизайн с полифиллом увеличивает вовлечение пользователей (user engagement) в Firefox и Edge сильнее, чем им вредит медленная загрузка сайта.
Читать полностью »
Как быстро прототипировать приложения с CSS-сеткой и CSS-переменными
2018-07-24 в 14:22, admin, рубрики: css, html, skillbox, Блог компании Skillbox, дизайн, приложения, прототипирование, Учебный процесс в ITКак CSS-сетка, так и CSS-переменные представляют собой мощные инструменты для frontend-разработчиков. Первое позволяет значительно упростить создание макетов веб-сайта, в то время как второе дает всю мощь переменных таблицам стилей.
В этом материале я покажу вам, как использовать оба инструмента для того, чтобы быстро прототипировать дизайн приложений.
Читать полностью »
Разработка редактора для создания веб сайтов-лендингов (Опыт)
2018-07-22 в 20:45, admin, рубрики: css, editors, html, JS, UI, utieditor special for you <3, UX, web, wix, бизнес-модели, веб-дизайн, дизайн, Разработка веб-сайтов
(Art by http://www.simonstalenhag.se/)
Предыстория / Дисклеймер
Всем привет, данная статья является по факту материалом для моего выступления в понедельник на марафоне в Киеве. Но не думайте, что вы аудитория на которой я отрабатываю текст, просто мне так проще подготовиться.
На данный момент я Front-end разработчик в Conductor/WeWork. Мы не занимаемся разработкой редакторов, как собственно и я, по вечерам не разрабатываю такие вещи. Это больше об опыте который я получил на прошлом проекте в компании УТИ(сокращенно), утипути, ути-…. Это было достаточно давно, но как оказывается, тема актуальна и по сей день, как и косяки связанные с ней.
Речь идет как правило о сайт визитках, лендингах, и более менее функциональных сайтах, но разумеется не о бек офисах или админках.
UTIEditor special for you <3
Зачем нам нужны такие редакторы?
Тут достаточно много ответов на этот вопрос, многие из вас, я уверен догадываются и так.
Я отвечу на этот вопрос с точки зрения УТИ, компании которая предоставляет услуги по разработке сайтов.
УТИ по сути своей — компания ширпотреб. Уверен в свое время в таких поработал каждый, десяток сайт визиток на человека, десяток интернет магазинов и фирменная вишенка — своя CMS.
Вот вы сделали очередной лендинг, сайт визитку и отдали клиенту, а он прибегает через день и просит поменять текст. Через еще день, поменять цвет фона и добавить всего одну картинку. Для клиента это выглядит, как нечто простое и быстрое. С этим трудно поспорить, оно так и есть. Но для вас это означает, что вам нужно выдернуть разработчика/дизайнера с его текущих задач. Не говоря уже о работе менеджера который тратит время на коммуникации. Соответственно, вы выставляете счет и он не маленький. Клиент негодует и жалуется. В следующий раз вы уже думаете наперед о таких вещах и начинаете задавать вопросы, закладывать в ТЗ функционал редактирования.
Тут пожалуй стоит перейти к обсуждению этого функционала, ведь он очень разный.
Хотелось бы добавить, что я не буду включать в этот разговор такие CMS как WrodPress, Drupal, мы сконцентрируемся на рынке редакторов.