HTML *

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

Вдохновившись статьями 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, так и, в качестве одного из вариантов, предоставляя прямой доступ к элементам дерева, построенного по документу.

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

Заметил за собой, что постоянно записываю всякие мелочи, полезную информацию, просто что-то из буфера обмена прямо в текстовом редакторе. Всегда где-то на фоне висит открытый Sublime Text с кучей вкладок.

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

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

Всё это привело меня к мысли написать что-то вроде своего движка для хранения всей информации в одном месте и в удобном виде. Да-да, есть куча всяких Evernote, каких-нибудь заметок, встроенных в MacOS/iOS и так далее, которые и синхронизируются, и фичи полезные имеют — но, как говорится, хочешь сделать что-то хорошо (для себя), сделай это сам. Да и, как почти любой программист, в любой непонятной ситуации я беру и пишу всё сам. Так вышло и в этот раз.