jQuery *

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

Дизайн сегодня один из необходимых компонентов любого продукта, а для сайтов и веб-приложений — это самая важная часть. Всё, что находится под капотом, скрыто от глаз клиента. Пользователя не интересует гениальность исполнения движка или уникальность архитектуры: подразумевается само собой, что программа должна работать надежно и безопасно. Современному пользователю необходим стильный графический интерфейс.

Раньше создание такого интерфейса вызывало серьёзную головную боль у программистов, но теперь для избавления от неё выпущено большое количество различных фреймворков и библиотек. Казалось бы — ура, проблема решена! Однако, теперь перед нами встаёт другой вопрос: какой препарат выбрать — пенталгин или панадол? 

Вопрос нелёгкий, и решать, в итоге, вам. Я же расскажу о своём лекарстве: библиотеке EasyIU, предназначенной для создания полноценных одностраничных веб-приложений (SPA) и основанной на jQuery, Angular, Vue и React.

Моё знакомство с EasyUI началось около двух лет назад, когда наша команда приступила к разработке софта для системы управления питанием и его интеллектуального распределения между потребителями. Управляющее устройство имело на борту Linux и кроме распределения питания должно было обмениваться данными с различными периферийными устройствами, уметь контролировать их, а также принимать показания от большого количества (до нескольких сотен) датчиков. Правила управления могли изменяться, позволяя пользователю настроить работу всего комплекса для выполнения необходимых задач. 

Мы все иногда сталкиваемся с необходимостью вытащить нужную информацию из JSON или YAML файлов. Многие уже познакомились с мощью утилиты jq. Судя по публикациям на Хабре, напр. https://habr.com/ru/post/525808/, и вопросам в qna, тема до сих пор актуальна.

Мне в очередной раз пришлось вспомнить специфический DSL jq чтобы восстановить накопленные за долгое время закладки в Хроме, не сохранённые при апгрейде. Точнее, файл Bookmarks в формате .json сохранился, но ни в какую не хотел импортироваться в новый Хром. Хочу поделиться рецептом решения этой проблемы, заодно упорядочить собранные в разных местах миниатюрные скрипты для решения похожих проблем.

JQ в действительности полноценный язык программирования со всеми атрибутами - переменными, типами данных, арифметикой, циклами и условными переходами, массой встроенных функций и возможностью добавления новых. Удивительно, всё это в программке размером 30KB, страницей "man jq" такого же размера и библиотекой libjq размером 300KB.

Итак, заглянув в свой Bookmarks с несколькими сотнями ссылок, первый вопрос - какова структура этого .json файла? По счастью, я уже знал как быстро её посмотреть и использовать в дальнейших запросах. Вот эта команда:

... $ jq '[paths|join(".")]' Bookmarks|head -n 16 [ "checksum", "roots", "roots.bookmark_bar", "roots.bookmark_bar.children", "roots.bookmark_bar.children.0", "roots.bookmark_bar.children.0.children", "roots.bookmark_bar.children.0.children.0", "roots.bookmark_bar.children.0.children.0.children", "roots.bookmark_bar.children.0.children.0.children.0", "roots.bookmark_bar.children.0.children.0.children.0.date_added", "roots.bookmark_bar.children.0.children.0.children.0.guid", "roots.bookmark_bar.children.0.children.0.children.0.id", "roots.bookmark_bar.children.0.children.0.children.0.name", "roots.bookmark_bar.children.0.children.0.children.0.type", "roots.bookmark_bar.children.0.children.0.children.0.url",

<span class='amount'>0</span>
<span class='cart_cost'>0</span>
<span class='order_cost'>0</span>
<span class='order_cost_tax'>0</span>

jQuery().event('cost', '.amount');
jQuery().event('cost', '.cart_cost');
jQuery().event('cost', '.order_cost');
jQuery().event('cost', '.order_cost_tax',function(){ return this*1.2});
jQuery().event('cost', function(){ console.log('Стоимость продуктов:',this)});

jQuery().var('cost',200); 

<span class='amount'>200</span>
<span class='cart_cost'>200</span>
<span class='order_cost'>200</span>
<span class='order_cost_tax'>240</span>

Здравствуйте! Я живу в Узбекистане и самостоятельно изучаю веб разработку вот уже третий год. За это время я научился изобретать велосипед самостоятельно решать проблемы, с которыми я сталкивался. Одна из таких проблем и ее решение будет описана здесь. Надеюсь вам будет интересно.

Привет, меня зовут Женя, и я просто еще один из обитателей JavaScript вселенной, который хочет поделиться с вами интересным опытом в frontend-разработке, а именно как кастомизировать диаграмму Ганта.

Не так давно я присоединился к команде энтузиастов, которая работает над проектом по производству оборудования для ремонта автомобилей. Как и для любого проектного менеджмента, нам нужен был инструмент для планирования задач с следующим функционалом:

• оптимальное распределение ресурсов и нагрузки между сотрудниками
• мониторинг выполнения задач
• оценка эффективности и временных рамок проекта

Во многих современных приложениях для управления проектами для решения таких задач используются диаграммы Ганта. И я взялся за реализацию ее функциональности в нашем приложении.

Хотя можно было бы использовать готовый софт, в нашем случае нужно было сильно кастомизировать Гант под нужды проекта. Альтернатива разработки диаграммы с нуля — это слишком накладное и времязатратное мероприятие. Посовещавшись с коллегами, мы решили, что лучше всего найти готовый компонент среди библиотек JavaScript и настроить его под наш проект.

Введение

Постановка задачи

Введение

Вернемся в эпоху jQuery

• Предисловие
• Про phpQuery
• Начало работы
• Практическая часть
• Заключение

• Когда вы поймёте, как использовать волшебные инструменты (babel! бандлеры! вотчеры! и так далее!), ваш рабочий процесс становится быстрым, мощным и восхитительным
  
• Если вы не понимаете волшебные инструменты, всё ужасно запутанно
  
• …и попытки освоить магию слишком часто неудачны, если вам кто-нибудь не поможет продраться через джунгли жаргона, преувеличений и устаревшей информации в интернете

• querySelectorAll (который предположительно был вдохновлен когда-то именно jQuery),
• fetch для работы с AJAX,
• delegated-events для обработки событий,
• полифиллы для работы с DOM,
• пользовательские элементы (Custom Elements), которые сейчас на подъеме.