Дайджест свежих материалов из мира фронтенда за последнюю неделю №466 (3 — 9 мая 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Модульные front-end блоки – пишем свой мини фреймворк
37 мин
Доброго времени суток уважаемые читатели хабра. С каждым годом в веб разработке появляется все больше разнообразных решений которые используют модульный подход и упрощают разработку и редактирование кода. В данной статье я предлагаю вам свой взгляд на то, какими могут быть переиспользуемые front-end блоки (для проектов с бэкендом на php) и предлагаю пройти все шаги от идеи до реализации вместе со мной. Звучит интересно? Тогда добро пожаловать под кат.
HTML трюки
2 мин
Перевод
1. Атрибут `loading=lazy`
Совет по производительности. Вы можете использовать атрибут
loading = lazy, чтобы отложить загрузку изображения до тех пор, пока пользователь не домотает до них. <img src='image.jpg' loading='lazy' alt='Alternative Text'> 
Вышел Bootstrap 5: оцениваем 7 главных нововведений
4 мин
Перевод
Пройдя через несколько альфа- и бета-версий, наконец-то появился Bootstrap 5, на что у разработчиков ушло несколько месяцев. Новая версия претерпела серьезные изменения, включая отказ от поддержки Internet Explorer (IE) и зависимости jQuery. От IE было решено отказаться, потому что браузер занимает всего 3% рынка и его доля продолжает снижаться.
Что такое Bootstrap? Это самый популярный в мире CSS-фреймворк с открытым исходным кодом, который разработан командой Twitter. В v5 внесено сразу несколько критически важных изменений, давайте посмотрим, что там и как.
Карта метро Москвы с расчётом пути
Простой
2 мин
Туториал
В своей предыдущей статье про интерактивную карту метро Москвы я описывал процесс создания векторной карты на svg-движке, сравнивая с канвасным отображением.
Спустя время я решил вернуться к своей карте и добавил в неё возможность вывода маршрута кратчайшего пути между выбранными станциями по алгоритму BFS, обхода графа в ширину.
Почему стоит использовать тег <picture> вместо <img>
6 мин
Перевод
Использование изображений и анимаций в интерфейсах пользователя стало распространённой практикой в современных веб-приложениях. Хотя эти примеры современного дизайна делают упор на повышение удобства работы с приложениями, если изображения не адаптируются ко всем устройствам, то могут возникать проблемы.
Мы, разработчики, должны удовлетворять потребностям пользователей. Но чаще всего мы упускаем мелочи, способные быть очень важными из-за того, что мы ищем решения на более высоких уровнях.
Выбор между тегами
picture и img может показаться мелким решением, но сделав правильный выбор, вы сможете повысить и удобство для пользователя, и производительность.В этой статье мы расскажем о различиях между тегами
picture и img и объясним, почему тег picture более совершенен, чем img.Базовая структура HTML-документа с объяснением каждой строчки
9 мин
Перевод
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Unique page title - My Site</title>
<script type="module">
document.documentElement.classList.remove('no-js');
document.documentElement.classList.add('js');
</script>
<link rel="stylesheet" href="/assets/css/styles.css">
<link rel="stylesheet" href="/assets/css/print.css" media="print">
<meta name="description" content="Page description">
<meta property="og:title" content="Unique page title - My Site">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://www.mywebsite.com/image.jpg">
<meta property="og:image:alt" content="Image description">
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://www.mywebsite.com/page">
<link rel="canonical" href="https://www.mywebsite.com/page">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/my.webmanifest">
<meta name="theme-color" content="#FF00FF">
</head>
<body>
<!-- Content -->
<script src="/assets/js/xy-polyfill.js" nomodule></script>
<script src="/assets/js/script.js" type="module"></script>
</body>
</html>Под катом — разбор каждой строчки
Фреймворк Webix Jet глазами новичка. Часть 2. Взаимодействие с интерфейсом
20 мин
Туториал
В предыдущей статье “Фреймворк Webix Jet глазами новичка. Часть 1. Композиция и навигация” я подробно рассказал вам как создать интерфейс приложения с помощью UI компонентов Webix и распределить полномочия между view-модулями и логикой внутри архитектуры Jet фреймворка.
В этой статье я продолжу свой рассказ о Jet фреймворке и библиотеке Webix, и реализую следующее:
добавлю в уже известное вам приложение немного интерактива
организую серверные модели с разными подходами к загрузке и сохранению данных.
С кодом готового приложения можно ознакомиться тут.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №465 (26 — 2 мая 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Кастомный виджет Яндекс.Переводчик для сайтов
6 мин
Туториал
Когда-то я предложил свое решение по кастомизации виджета googleTranslate, тема оказалась действительно полезной и актуальна по сей день. Репозиторий с проектом на gitHub набрал немного звезд, а я рад тому, что мои труды не напрасны. И вот недавно мне понадобилось сделать пользовательский выпадающий список с выбором языков, но уже с виджетом яндекс переводчика...
HTML-теги и атрибуты, о которых вы, возможно, не знали
14 мин
Эта статья — шпаргалка по HTML-тегам. Поэтому не будем разглагольствовать, сразу к делу.
abbr
Тег abbr определяет аббревиатуру или акроним. Аббревиатура или акроним расшифровываются с помощью атрибута title.
<abbr title="HyperText Markup Language">HTML</abbr> был разработан британским ученым Тимом Бернерсом-Ли приблизительно в 1986—1991 годах.abbr часто используется совместно с тегом dfn, идентифицирующим понятие или термин:
<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn> - формальный язык описания внешнего вида документа (веб-страницы).</p>address
Тег address определяет контактную информацию об авторе или владельце документа или статьи. Контактная информацию может включать в себя адрес электронной почты, адрес сайта, физический адрес, номер телефона, ссылки на аккаунты в социальных сетях и т.д.
Примеры применения переменных CSS на практике
9 мин
Туториал
Перевод
Когда я впервые попробовал использовать переменные CSS, у меня не было полного представления об их возможностях. Правильное их использование позволяет существенно сократить время и трудозатраты на решение определённых задач в CSS. В преддверии старта нового потока курса по Frontend разработке делимся с вами описанием практического использования переменных CSS помимо их применения для создания маркеров дизайна, таких как цвета.
HTMHell — адовая разметка (25 плохих примеров)
32 мин
Туториал
Перевод
Перевод заметок с сайта HTMHell - коллекции плохих примеров HTML-кода, взятых из реальных проектов.
Каждая заметка включает сам фрагмент плохого кода, который дополняется объяснениями, в чём именно ошибки и почему так лучше не делать. А в заключение предлагается вариант, который считается более корректным.
Ближайшие события
Как обеспечить глассморфизм с помощью HTML и CSS
4 мин
Перевод
Вы, наверное, подумаете — ну вот еще один тренд дизайна? Разве они у нас не каждый год появляются или около того?
В прошлом году мы познакомились с нейморфизмом, который до сих пор является довольно спорным трендом, который так и не получил широкого распространения. Реакция была неоднозначной, кому-то это очень понравилось, а кому-то совершенно не понравилось.
Но давайте поговорим немного больше о глассморфизме.
Целительная сила JavaScript
6 мин
Перевод
Чуть меньше года назад, когда по всему миру начали распространяться локдауны в связи с Covid-19, большинство людей начало запасаться туалетной бумагой и консервами. Но лично я стремился получить нечто другое: реализовать функцию поиска.
Цель функции поиска была не особо важна, мне просто нужно было кодить. Код успокаивает, потому что позволяет ощутить контроль в те моменты, когда мир, казалось бы, погружается в хаос. По сути, программирование состоит из небольших головоломок, которые нужно решить. Не просто из пазлов, пассивно лежащих на столе, но из головоломок, в которых можно вдохнуть таинственную жизненную силу. Головоломок, способных выполнять задачи, что-то создавать, автоматизировать рутину или публиковать тексты, доступные всему миру.
Как и множество других писателей и художников, я держу личный веб-сайт, работающий уже в течение почти 20 лет. Решив заняться кодом, я смахнул пыль с моих заржавевших знаний JavaScript, и начал искать библиотеки нечёткого поиска, которые можно подключить к веб-сайту для упрощения поиска эссе из моей коллекции.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №464 (19 — 25 апреля 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Даешь свободную литературу! Или как я с политикой вуза боролся
5 мин
Доброго времени суток, хабровчане! Это мой первый пост на форуме, так что прошу строго не судить.
Как и полагается любому техническому вузу – в нашем есть куча интернет ресурсов, которыми вуз чрезмерно гордится. Однако есть оборотная сторона медали – качество этих сервисов. А именно, если говорить про электронную библиотеку, о коей и пойдет речь в данной статье, то в ней напрочь отсутствует возможность скачивания pdf-версии нужной тебе методички, точнее она есть, но за это придется заплатить немало денЯк. Деньги далеко не маленькие (если говорить именно про цену за вузовские методички). Если же такой формат не устраивает, то можешь пользоваться онлайн библиотекой.
В онлайн библиотеке есть просмотрщик книг, через который можно читать литературу. Просмотрщик оформлен максимально неудобно: долгое время не работал переход на определенную страницу книги, и книгу в 700 страниц приходилось перелистывать по страничке, что превращалось в адскую муку. Но самое ужасное в этом сайте то, что каждые 20 минут он просит авторизоваться по новой…
И теперь представьте картину: человек пытается подготовиться к контрольной по квантовой механике по методичкам преподавателя, объемом 700 страниц, где необходимый материал находится на 500, и может перелистывать по 5 страничек в минуту, и каждые 20 минут, его попытки приходится возобновлять.… В общем, жесть…. И вот после очередной неудачной попытки прочитать нужную главу, я решил, что пришло время положить конец данному произволу.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №463 (12 — 18 апреля 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
Малоизвестные, но крутые атрибуты в HTML
4 мин
Спросите случайного фронтендера, какие атрибуты HTML он использует — и услышите что-то вроде «src, href, style, class...» и прочую чепуху, которую всем ещё в младенчестве вживили на чипе агенты IETF. Между тем, стандарты веба не стоят на месте, и с каждым годом в браузерах появляются всё более крутые фичи не только для монструозного CSS, но и для обычных элементов HTML. Вы знали, что с помощью атрибутов можно пинговать* произвольный адрес, а элементы формы могут многократно переопределять её поведение? Вряд ли.
Дайджест свежих материалов из мира фронтенда за последнюю неделю №462 (5 — 11 апреля 2021)
3 мин
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.
