В данной статье будет описано небольшое руководство по тому, как создать сайт на таком фреймворке как Cample.js. На момент написания статьи (версия 3.1.1), фреймворк уже более года находится в разработке. За это время был реализован минимальный функционал для создания современных веб-приложений.
Зачастую, когда я наталкиваюсь на информацию о работе с DOM в Angular, в них присутствуют упоминания об одном или нескольких из этих классов: ElementRef, TemplateRef, ViewContainerRef. Именно упоминания, ведь общее представление достаточно сложно сложить, даже тщательно изучив документацию Angular. Поэтому я решил подробно сформулировать, как это работает и для чего нужно.
Новый View Transitions API, что можно перевести как "интерфейс переходов отображения", предлагает легкий способ анимирования перехода между двумя состояниями DOM — даже между загрузками страниц. Это прогрессивное улучшение, которое можно реализовать уже сегодня.
Если вы никогда раньше не работали с JavaScript и читаете этот текст из десктопной версии одного из современных браузеров, то вы можете прямо сейчас написать свой первый HelloWorld-скрипт. Нужно нажать клавишу F12 (открыть инспектор), перейти на вкладку «Console», ввести alert("Hello, World!"); и нажать клавишу «Enter».
Можно назвать JS особенным: будучи самым распространённым языком для браузеров, он также является одним из самых популярных языков программирования в мире.
Микрофронтенд-архитектура - это подход к созданию приложений, в котором каждая часть приложения, отвечающая за определенную функциональность, представлена отдельным фронтенд-приложением. Такой подход позволяет достичь более высокой гибкости и масштабируемости приложения, так как каждый микрофронтенд может быть разработан и развернут независимо от остальных.
Как правило, микрофронтенды используются в комбинации с микросервисной архитектурой, в которой приложение состоит из набора независимых микросервисов, каждый из которых выполняет свою функцию. Микрофронтенды позволяют разработчикам разрабатывать интерфейсы для каждого микросервиса отдельно и объединять их в единое приложение, что облегчает поддержку, масштабирование и развертывание приложения.
Одним из ключевых преимуществ микрофронтендов является возможность быстрой разработки и доставки изменений пользовательского интерфейса без необходимости изменения всего приложения. Кроме того, микрофронтенды могут помочь упростить процесс разработки, улучшить переиспользуемость кода и уменьшить зависимость между различными частями фронтенд-приложения.
Полезная ссылка с подробным объяснением концепции микрофронтенда.
Когда речь идет о производительности, разработчики часто используют Lighthouse, Perfbuddy или аналогичные инструменты анализа производительности. Но когда целевой сайт имеет защиту от ботов, получить информацию не так просто. В этой статье блога мы сосредоточимся на том, где искать признаки узких мест в производительности с помощью Chrome Devtools.
Всем привет! Меня зовут Айрат, я frontend-разработчик IT-компании SimbirSoft. Поговорим о такой теме, как адаптивная верстка.
ДИСКЛЕЙМЕР: адаптив для сайта как явление на языке мемов уже смело можно назвать «баяном», впервые в России он появился в 2012 году (10 лет назад, Карл!). Даже React – самая популярная на данный момент библиотека для UI-разработки вышла только год спустя. И, наверное, вы подумали: «Да что тут читать? Даже у сайта булочной есть адаптив под мобильные устройства». Справедливое замечание... Мы тоже так думали, но не тут-то было. Представьте наше удивление, когда за последние полгода чуть ли не каждый второй клиент обязательным требованием выставляет наличие адаптивной верстки для сайта. Удивляет нас это потому, что адаптив – опция «из коробки» для каждого нашего проекта, на которой мы даже не акцентируем внимание. Всем же понятно, что он должен быть. Оказывается, нет…
В этой статье попробуем разобраться, чем отличаются различные подходы в разработке приложений и сайтов с точки зрения визуализации интерфейса, чтобы помочь вам сделать выбор в пользу той или иной технологии в зависимости от ваших задач.
Итак, мы хотим получить информацию с веб сайта — это можно сделать в 3 шага
1) Получить html сайта (пропустим этот шаг)
2) Распарсить html строку и создать dom. — builderdom.js
3) Найти нужные dom_node из dom по кссселекторам.
3.1) Распарсить строку кссселекторов и создать дерево для поиска. — cssselectorparser.js
3.2) Отфильтровать дом_ноды по дереву кссселекторов и найти нужные. — treeworker.js
Привет, Хабр! Я Лена Райан, фронтенд разработчик в Х5 Tech. Решила поделиться с вами подборкой ТОП-10 проверенных зачётных онлайн-ресурсов по фронтенду, которые будут полезны как новичкам, так и желающим подтянуть свои знания по этой теме. Подборка подойдёт также тем, кто только недавно пришёл в IT или в профессию фронтендера и хочет понять, с какой базы им начать.
HitBox — это чаще всего невидимая область или группа областей, которая помогает обнаруживать коснулся ли объект другого объекта, у которого тоже есть свой хитбокс.
В HTML страницах изначально нет понятие хитбокса у блоков, поэтому в этом посте мы сами получим и обработаем их с помощью JS.
Всем привет! Гуляя по Хабру, мне ни разу не доводилось обнаружить статью на тему Django + PWA. А ведь тема интересная (лично мне пришлось потратить 4 дня на то, чтобы с ней разобраться). И дабы сэкономить ваше время, в данной статье я попытался представить достаточно простой способ для создания прогрессивного веб приложения (PWA) вместе с Django без сторонних библиотек.
Вывод HTML-дерева из локального файла в окно программы-оболочки «Windows PowerShell» версии 5.1 (или в окно программы-оболочки «PowerShell» версии 7) с помощью скрипта на языке PowerShell в операционной системе «Windows 10». Используется библиотека «HTML Agility Pack».
В качестве упражнения в алгоритмах и структурах данных рассмотрено несколько способов обхода и вывода HTML-дерева: NLR (прямой с приоритетом обхода потомков слева направо), NRL (прямой с приоритетом обхода потомков справа налево), LRN (обратный). Примеры практической реализации.
5 причин для того чтобы использовать Bulma в вашем следующем проекте.
Bulma это open-source, адаптивный и легковесный CSS фреймворк базирующийся на flexbox сетке. Этот новый фреймворк уже завоевал сердца многих разработчиков.
Итак, в этой статье, я расскажу о пяти причинах, почему разработчики любят Bulma.
Часть 2
Взаимодействие с Figma
В статье про написание скриптов для Adobe After Effects я предложил читателям сделать песочницу кода, работающую прямо в AE. Давайте теперь сделаем такую же и для Figma. За основу можно взять заготовку из предыдущей статьи. Здесь вы найдете необходимые для работы плагина файлы manifest.json, index.html и plugin.js.
Для начала откроем manifest.json и заменим значение поля name на актуальное. Я назвал плагин Script Notepad.
В данной статье я хочу поделиться одним из способов создания компонента боковой панели навигации (sidenav), являющегося отзывчивым, поддерживающего навигацию с клавиатуры, работающего как при помощи JavaScript, так и без него, и поддерживаемого всеми браузерами.
Привет всем. Представим у вас есть сайт и для мобильной версии вы хотите сделать такую фитчу, чтобы вы рисовали какой-либо символ пальцем по дисплею смартфона и что-то выполнялось. Например, рисуем букву Z и появляется окно с информацией как на гифке.
Очень простая библиотека JavaScript, которая распознаёт ваши рисунки на мобильной версии сайта.
Размещение изображений на сайте очень важно т.к. это помогает передать смысл страницы. Это значит, что почти каждое изображение, которое вы создаете, должно иметь альтернативное описание.
В этой статье я хочу поделиться опытом избавления от жуткой головной боли, возникшей при разработке веб-приложения для одного маленького, но весьма могучего устройства. Но сначала несколько слов об источнике этой боли — о дизайне.
Дизайн сегодня один из необходимых компонентов любого продукта, а для сайтов и веб-приложений — это самая важная часть. Всё, что находится под капотом, скрыто от глаз клиента. Пользователя не интересует гениальность исполнения движка или уникальность архитектуры: подразумевается само собой, что программа должна работать надежно и безопасно. Современному пользователю необходим стильный графический интерфейс.
Раньше создание такого интерфейса вызывало серьёзную головную боль у программистов, но теперь для избавления от неё выпущено большое количество различных фреймворков и библиотек. Казалось бы — ура, проблема решена! Однако, теперь перед нами встаёт другой вопрос: какой препарат выбрать — пенталгин или панадол?
Вопрос нелёгкий, и решать, в итоге, вам. Я же расскажу о своём лекарстве: библиотеке EasyIU, предназначенной для создания полноценных одностраничных веб-приложений (SPA) и основанной на jQuery, Angular, Vue и React.
Моё знакомство с EasyUI началось около двух лет назад, когда наша команда приступила к разработке софта для системы управления питанием и его интеллектуального распределения между потребителями. Управляющее устройство имело на борту Linux и кроме распределения питания должно было обмениваться данными с различными периферийными устройствами, уметь контролировать их, а также принимать показания от большого количества (до нескольких сотен) датчиков. Правила управления могли изменяться, позволяя пользователю настроить работу всего комплекса для выполнения необходимых задач.
Нативная отложенная загрузка для изображений была добавлена в Chrome 76 через атрибут loading, а затем пришла и в Firefox. Мы рады сообщить, что встроенная отложенная загрузка для iframe теперь стандартизирована и также поддерживается в браузерах на основе Chrome и Chromium.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400"></iframe>
Встроенная lazy-loading загрузка iframe откладывает загрузку закадровых элементов iframe до тех пор, пока пользователь не прокрутит их рядом. Это сохраняет данные, ускоряет загрузку других частей страницы и уменьшает использование памяти.
Современные фронтенд-фреймворки дают удивительные возможности. React, Vue, Angular и другие созданы делать то, что раньше было невозможно, – веб-приложения. В 2020 скачивать и устанавливать приложения уже необязательно. Зачем, если всё можно сделать на сайте?
Однако с большой силой приходит большое количество зависимостей. И находятся энтузиасты, которые решают, что поднять большой фреймворк для своего небольшого проекта, – не такая уж плохая идея. Даже если это просто лендинг.
В этом вопросе я поддерживаю "консерваторов". Не нужно писать лендинги и многостранички на Create-React-App, для этого пойдет и обычная статика.
Однако я также прекрасно понимаю тех, кто делает иначе. Современные фронтенд-фреймворки дают не только множество нового функционала, они очень удобны в использовании. А если мне нужно сделать простой сайт с парой страниц, у меня оказывается не очень то много выбора.
Что делать? Писать простыню HTML-разметки в одном файле? Хранить данные во view? Это не сделать шаг назад, это сорваться и упасть в пропасть. Это не просто неудобно, это идет вразрез с современной парадигмой фронтенд-разработки.
Во-первых, data-driven. Данные во главе угла, а внешний вид – лишь их отображение. Пользователь делает действие, данные меняются, вслед меняется отображение. Так работают все современные фреймворки.
Еще один элемент современного подхода – компонентность. Делим приложение на мелкие самодостаточные переиспользуемые куски. Больше переиспользуемости – меньше кода. Меньше кода – меньше багов.
До этого мы уже обсуждали, как реализовать data-driven минимальными усилиями. Мой выбор – Alpine.js. Что же делать с компонентностью? Для простых статических сайтов я предлагаю самый простой вариант – gulp-file-include.