HTML *

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Изменить первое впечатление очень трудно. И я говорю не только о людях. Технологии также часто становятся заложниками первого впечатления — своей первой версии. И потом несмотря на годы развития, новые возможности и устранение старых недостатков, в массовом сознании технология остается той самой несовершенной, своей первой версией. Тем, кто не пытается бороться с такого рода когнитивными искажениями, остаётся только смотреть на успехи конкурентов, использующих знакомые технологии в новых сценариях, с немым вопросом: "А что, так можно было!?".

Наиболее ярким примером технологии, которая шагнула далеко вперёд по сравнению с тем, чем она была в самом начале, на мой взгляд является AMP — Accelerated Mobile Pages. Многие разработчики воспринимают AMP как способ положить статический контент своего сайта (статьи, новости, заметки и т.д.) в кэш Google, чтобы при открытии из поиска этот контент загружался мгновенно (о высокой скорости загрузки AMP страниц свидетельствует иконка молнии в результатах поиска :)). Естественно, если вам нужно добиться именно такого результата, то с AMP это сделать будет очень легко. Но AMP — это гораздо больше чем просто технология для работы со статическим контентом или кэшем Google. AMP уже давно используется как библиотека общего назначения, основанная на web компонентах, для создания быстрых динамических страниц и даже сайтов целиком, на которые пользователи попадают как из поиска, так и из других источников, включая прямые заходы. С этой точки зрения AMP можно поставить в один ряд с Polymer, React или Angular. Естественно с оглядкой на то, что AMP предназначена для простых (чтобы это не значило) сайтов, где основной упор делается на контент, а динамическая составляющая ограничена.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Вдохновившись статьями SvelteJS: Релиз второй версии, Исчезающие фреймворки и Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp», про «исчезающий» фреймворк Svelte (читается «свелт»), я захотел его попробовать. И, для начала, решил написать небольшой компонентик с кнопками из Materialize.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Всем привет!

Хочу представить вашему вниманию небольшую разработку — Box-shadows Device (#bSd).
Это инструмент, который чем-то напоминает конструктор или css редактор. В нем вы можете создавать девайсы на любой вкус и кошелек.

Неожиданным открытием поделился сегодня с общественностью Крис Петерсон из 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-переменные представляют собой мощные инструменты для frontend-разработчиков. Первое позволяет значительно упростить создание макетов веб-сайта, в то время как второе дает всю мощь переменных таблицам стилей.



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

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Введение

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

Чаще всего такие окна появляются после совершения определенных действий на сайте, например, пользователь нажимает на ссылку «Заказать обратный звонок» и перед ним всплывает форма заказа.

Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.

Привет! Тема CSS Grid уже долгое время не даёт покоя frontend сообществу. В этом видео мы решили перейти от теории к практике и рассмотреть пример применения этой технологии для построения макета.



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

Приятного просмотра.

UPD. Ссылка на финальный код — codepen.io/mcslayer/pen/XBNXyX

Причина, по которой Блокнот (он же Notepad) постигла участь гадкого утенка, уже давно мало кого интересовала. Пока не произошло неожиданное…

В это трудно поверить, но Блокнот — одно из самых известных, древних и одновременно самых простых приложений Microsoft — ждет весьма объемное обновление. Важно отметить, что эта программа (из комплекта базовой поставки большинства всех версий Windows) почти четверть века кочевала из одного выпуска операционной системы в другой практически без каких-либо изменений.

Сложно сказать, что случилось в Microsoft, сдохли ли волки в личном зоопарке одного из топ-менеджеров или кто-то случайно встал «с той ноги»… Но после недавнего внезапного внедрения поддержки юниксового перевода строки, в корпорации видимо решили не останавливаться на достигнутом…

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


Так о чём же надо помнить, чтобы делать работу качественно, и SEO-специалисты были довольны вашей работой?

От переводчика: Дэвид Гилбертсон (David Gilbertson) — известный автор, который пишет о веб- и криптовалютных технологиях. Он смог собрать большую аудиторию читателей, которым рассказывает о всяких хитростях и интересностях этих областей.



Небольшое вступление

Давайте обсудим разницу между HTML и DOM.

Например, возьмем элемент table из HTML. Вы можете использовать его в файле с расширением .html. В нем мы указываем набор атрибутов, которые определяют внешний вид и «поведение» страницы.

Давайте создадим Angular компонент для создания множества checkbox из определенной логической группы. Компонент будет написан с идей повторного использования. Что это значит? Приведем пример ниже:

Представьте что перед вами задача сделать редактирование пользователей. При редактвровании обычно открывается форма со всеми полями. Пользователь может иметь одну или множество ролей из списка «Adimin», «Director», «Professor», «Student».

Для реализации множественного выбора ролей было решено нарисовать на форме по одному checkbox для каждой роли. Ставя галочки или снимая роли пользователя будут меняться.

При разработке современных веб-сайтов интенсивно используются возможности JavaScript по работе с DOM. Скрипты позволяют отображать и скрывать элементы, из которых строятся страницы, настраивать свойства этих элементов. У объектов DOM, с которыми взаимодействуют из программ, имеются свойства и методы. О некоторых из них, по мнению автора материала, перевод которого мы сегодня публикуем, знают практически все веб-программисты. А вот некоторые, о которых он и хочет здесь рассказать, пользуются куда меньшей известностью.

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

В очередном процессе написания веб приложения под ASP.NET MVC с использованием Bootstrap поймал себя на мысли, что неизбежное создание HTML-тэгов можно было бы и подсократить. Речь пойдёт не о наборе пользовательских элементов управления для расширения пространства Html.*, а о том, что лежит немножечко глЫбже. Для торопыг предлагаю глянуть сюда (GitHub), а для остальных добро пожаловать под кат.

Общественное мнение перевело Bootstrap в категорию легендарных фреймворков прошлого, но следить за ним все ещё стоит. Bootstrap 4 — отличный навигатор по безопасной верстке, и главное, образец HTML over JS подхода к созданию веб-приложений, в полной мере раскрывает существующие возможности HTML для декларативного описания интерфейса пользователя.

И о том как развивается JavaScript код фреймворка тоже полезно иметь представление. Архитектура jQuery плагинов все еще используется но с 4ой версии это завернутые Rollup'ом в пакет классы ES6 транспиленные при помощи Babel6. jQuery вероятно скоро и не будет вовсе — об этом позже — а пока, на примере создания собственного плагина BsMultiSelect, на том же стёке что и Boostrap 4, будут раскрыты особенности развития фреймворка.

На самом деле, статья несколько шире – она описывает способ, позволяющий прозрачно задействовать и многие другие библиотеки (причём не только из мира Free Pascal), а InternetTools выбрана из-за своего замечательного свойства – это тот случай, когда (как ни удивительно) отсутствует Delphi-вариант с такими же широкими возможностями и удобством использования.

Эта библиотека предназначена для извлечения информации (парсинга) из веб-документов (XML и HTML), позволяя использовать для указания нужных данных как языки запросов высокого уровня, такие как XPath и XQuery, так и, в качестве одного из вариантов, предоставляя прямой доступ к элементам дерева, построенного по документу.