Как стать автором
Обновить
0
Рейтинг

jQuery™ *

Популярная библиотека JavaScript

Сначала показывать
  • Новые
  • Лучшие™
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

Создаём одинаковое приложение 5 раз

Блог компании ITSOFT™ jQuery™ *Angular *ReactJS *VueJS *
Перевод

На написание этой статьи™ меня вдохновил YouTube-канал Fireship, записывающий отличные видео о веб-разработке, крайне™ рекомендую их посмотреть, если вам интересна эта тема.

Вот видео с канала™, в котором в 10 фреймворках создают todo-приложение:


Я решил, что не хочу тратить на это кучу времени, и в основном использовал статью™ как оправдание для изучения нескольких новых фреймворков, поэтому пять раз собрал™ одно и то же приложение. Я планирую создать простое приложение для добавления заметок, в котором пользователи могут писать™ текст и сохранять его как отдельные заметки. Некоторые из этих фреймворков я уже использовал для создания подобных приложений, а в других™ не делал ничего™ похожего, или даже не использовал их вообще™, поэтому это будет чуть сложнее.
Читать™ дальше™ →
Всего голосов 12: ↑9 и ↓3 +6
Просмотры 8.5K
Комментарии 25

Новости

EasyUI™: действительно easy?

Блог компании Auriga™ Веб-дизайн™ *JavaScript *jQuery™ *HTML *

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

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

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

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

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

Читать™ дальше™
Всего голосов 7: ↑6 и ↓1 +5
Просмотры 3.3K
Комментарии 9

Плагин™ Events™ для jQuery™

Разработка веб-сайтов™ *jQuery™ *
Из песочницы
Я разработал свободный плагин™ Events™ для jQuery™. После чего плагин™ выложил на GitHub™.

Назначение плагина, позволить привязывать теги к переменным.

В последствии чего задав новое значение переменной все привязанные теги на странице обновятся.

Простой Пример™

У нас имеются теги для отображения данных™:

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

Вначале мы привязываем значения HTML тэгов и функций к имени переменной.

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); 

Одной командой мы разместили во всех привязанных тегах к переменной cost значение 200, а в теге .order_cost_tax разместили значение 240, что на 20% больше™ чем значение переменной.

Результат:

<span class='amount™'>200</span>
<span class='cart_cost'>200</span>
<span class='order_cost'>200</span>
<span class='order_cost_tax'>240</span>
Читать™ дальше™ →
Всего голосов 12: ↑11 и ↓1 +10
Просмотры 3.1K
Комментарии 50

Как я в 15 лет написал свой первый™ jQuery™ плагин™ и как их создавать

Разработка веб-сайтов™ *JavaScript *Программирование *jQuery™ *
Recovery mode
Из песочницы

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


читать™ далее
Всего голосов 24: ↑9 и ↓15 -6
Просмотры 4.1K
Комментарии 21

Как встроить ColorPicker в JavaScript Гант для изменения цвета задач

Open source™ *JavaScript *jQuery™ *HTML *Визуализация данных™
Из песочницы


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


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


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

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


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

Читать™ дальше™ →
Всего голосов 7: ↑7 и ↓0 +7
Просмотры 2.1K
Комментарии 0

Как подружить Electron и Webix. Часть 2. Создаем приложение со своим View

Веб-дизайн™ *CSS *JavaScript *jQuery™ *Node.JS *
Tutorial

Введение


В предыдущей статье™ мы рассмотрели с Вами вопрос™ интеграции фреймворка «Webix» в «Electron» и создание на основе™ этих фреймворков простого GUI приложения. Цель данной™ статьи™ является дальнейшую развитие вопроса интеграции в GUI интерфейс, построенный с помощью «Electron» и «Webix» других™ «JavaScript» фреймворков. Все элементы GUI реализованные в «Webix» характеризуются параметром «view». В зависимости от значения этого параметра будет отображаться тот или иной GUI элемент. Количество типов элементов «view», которые позволяет создавать «Webix» перекрывают порядка 90% задач при реализации интерфейса. Оставшиеся 10% это как раз тот случай™, когда необходимо осуществить интеграцию либо ранее написанного кода либо фреймворка (библиотеки), которые в явном виде не поддерживаются в «Webix». Для осуществления интеграции со сторонними фреймворками(библиотеки) создадим вместе™ с Вами свой «view» элемент «Webix».

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


Создать GUI приложение «Electron+Webix», которое будет строить график™ функции вида «y=a*sin(b)+c» с возможностью изменения параметров функции «a, b и c» с динамической перерисовкой графика.
Читать™ дальше™ →
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 1.3K
Комментарии 0

Уйти от jQuery™ к Svelte™, как это было

JavaScript *jQuery™ *
Recovery mode
Всем привет™.

Это отчёт в продолжение статьи™ "Уйти от jQuery™ к Svelte™, без боли".

Ниже я расскажу о трудностях с которыми столкнулся, их было не много, и только™ одна была настолько фундаментальной, где без поддержки сообщества я бы не справился.

Введение


Я планировал переписывать фронтэнд по кусочкам, это не то что бы совсем™ не получилось, получилось не совсем™ — переписывать пришлось большими кусками.

Во первых™ потому™ что подход™ jQuery™ — императивный, подход™ Svelte™ — декларативный.

Во вторых™ потому™, что с использованием jQuery™ у нас область видимости всегда™ глобальная, из любой строчки кода нам доступны все элементы веб-страницы, мы к ним обращаемся по ID или CSS селектору, в то время как Svelte™ рекомендует использование компонентов и внутри™ компонента мы видим только™ сам компонент, ни внешних элементов ни внутренних у нас нет, и мы не имеем возможности обратиться к ним напрямую.

Со Svelte™ получается настоящее ООП: мы не можем внести™ изменения сами, мы можем только™ сообщить компоненту о необходимости изменений. Как эти изменения будут сделаны, знает только™ код внутри™ компонента.

И это прекрасно :)
Читать™ дальше™ →
Всего голосов 14: ↑12 и ↓2 +10
Просмотры 5.5K
Комментарии 10

Когда JavaScript-фреймворк не нужен

JavaScript *jQuery™ *Angular *ReactJS *VueJS *
Перевод

Фото — Maria Teneva™, площадка Unsplash

Иногда™ React, Angular, Vue.js и т. д. — это лишнее™

Правда™ ли, что JavaScript-фреймворков слишком много и выбор становится чересчур сложным? Или, может, мы просто™ забыли™ о соображениях производительности и о том, что за лишний™ трафик™ в итоге должны™ платить пользователи?

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


Помните, было время, когда JQuery™ использовали для всего! JQuery™ то, jQuery™ сё — повсюду легкий™ аромат™ jQuery™. На любом веб-сайте и в каждом™ веб-приложении — jQuery™.

В чем причина популярности этой библиотеки?

Простой JavaScript казался слишком сложным в применении. К тому, же между браузерами было много отличий.

Но пришло™ спасение — библиотека jQuery™ избавила сообщество JavaScript от этой головной боли. Правда™, большинство из нас в результате стали лениться, поскольку перестали понимать, что происходит «под капотом».

Я прозрел, когда появился этот сайт.

Читать™ дальше™ →
Всего голосов 10: ↑5 и ↓5 0
Просмотры 4K
Комментарии 1

Создавайте свой код с нуля, это прокачает ваш уровень

Блог компании Edison™ JavaScript *Программирование *jQuery™ *Учебный процесс в IT
Перевод
image


Чтобы по-настоящему понять™ колесо™, нужно его самостоятельно переизобрести.

На днях я провел™ собеседование на должность senior™ javascript разработчика. Мой коллега, который также принимал участие в собеседовании, попросил кандидата написать функцию, которая будет выполнять HTTP-запрос™, и повторять его несколько раз в случае™ сбоя.

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

Подумав что он нервничает, мы решили™ сделать задание немного проще и попросили его преобразовать функцию на основе™ обратного вызова™ в функцию на основе™ Promise.

Не повезло.

Я могу сказать, что он видел подобный код раньше™. Он более или менее знал, как это работает. Псевдокода, демонстрирующего, что он понимает эту концепцию, было бы достаточно.

Но код, который он написал на доске, не имел никакого смысла™. У него было только™ смутное понимание концепции Promise в JavaScript, и он не смог рассказать про него доходчиво.

Это может быть простительно, если вы начинающий разработчик, но если вы претендуете на руководящую должность, этого недостаточно. Как он отладит сложную цепочку Promise и затем объяснит другим™, что он сделал™?
Читать™ дальше™ →
Всего голосов 17: ↑15 и ↓2 +13
Просмотры 2.3K
Комментарии 8

Снова про phpQuery

PHP *jQuery™ *
Из песочницы
Приветствую всех. Недавно я взял заказ, где нужно было автоматически подтягивать данные™ на сайт (проще говоря™ — написать парсер™).

Содержание статьи™:


Читать™ дальше™ →
Всего голосов 17: ↑11 и ↓6 +5
Просмотры 21K
Комментарии 39

История и наследие jQuery™

Блог компании VK Разработка веб-сайтов™ *JavaScript *jQuery™ *История IT
Перевод

jQuery™ — это самая популярная в мире JavaScript-библиотека. Сообщество веб-разработчиков создало её в конце 2000-х, что привело к возникновению богатой экосистемы сайтов™, плагинов и фреймворков, использующих под капотом jQuery™.

Но в последние годы её статус™ главного инструмента для веб-разработки пошатнулся. Давайте посмотрим, почему™ jQuery™ стала популярной и почему™ она вышла из моды, а также в каких случаях её пока ещё целесообразно использовать для создания современных сайтов™.
Читать™ дальше™ →
Всего голосов 61: ↑55 и ↓6 +49
Просмотры 23K
Комментарии 17

Зачем современную веб-разработку так усложнили? Часть 1

Разработка веб-сайтов™ *JavaScript *jQuery™ *HTML *Браузеры
Перевод
Tutorial
Современная фронтенд-разработка оставляет полярные впечатления: одни её любят, другие™ презирают.

Я большая поклонница современной веб-разработки, хотя она мне напоминает некую «магию», со своими™ плюсами и минусами:

  • Когда вы поймёте, как использовать волшебные инструменты (babel! бандлеры! вотчеры! и так далее!), ваш рабочий процесс становится быстрым, мощным™ и восхитительным
  • Если вы не понимаете волшебные инструменты, всё ужасно™ запутанно
  • …и попытки освоить магию слишком часто неудачны, если вам кто-нибудь™ не поможет продраться через джунгли жаргона, преувеличений и устаревшей информации в интернете
Читать™ дальше™ →
Всего голосов 107: ↑101 и ↓6 +95
Просмотры 70K
Комментарии 320

Рассказ о том, почему™ я до сих пор использую jQuery™

Блог компании RUVDS.com Разработка веб-сайтов™ *JavaScript *jQuery™ *
Перевод
imageМногие™, когда речь заходит о jQuery™, говорят так: «Просто™ пользуйтесь обычным JavaScript. Библиотека jQuery™ вам не нужна». Что тут сказать? Я не нуждаюсь во многих™ вещах, но, несмотря на это, хорошо™, когда они есть. Так и jQuery™. Я в этой библиотеке не нуждаюсь, но её, определённо, приятно иметь под рукой.

Сайты наподобие You might not need jQuery™ (YMNJQ) продвигают идею, в соответствии с которой от jQuery™ очень легко избавиться. Но самый первый™ пример™ на этом сайте демонстрирует вескую™ причину jQuery™ использовать. Там строка™ простого кода на jQuery™ заменяется на 10 строк обычного JS!
Читать™ дальше™ →
Всего голосов 88: ↑78 и ↓10 +68
Просмотры 37K
Комментарии 88

Как использовать библиотеку jQuery™ с фреймворком Angular (когда это действительно необходимо)

Блог компании Plarium JavaScript *Программирование *jQuery™ *Angular *
Перевод
Представляем вам перевод статьи™ Aditya™ Modi, опубликованной на blog.bitsrc™.io. Статья™ посвящена использованию библиотеки jQuery™ в приложениях на Angular.

Читать™ дальше™ →
Всего голосов 16: ↑7 и ↓9 -2
Просмотры 7K
Комментарии 11

Организация поиска™ по веб-странице на JavaScript (без jQuery™)

Разработка веб-сайтов™ *JavaScript *jQuery™ *
Из песочницы
Пару дней назад получил тестовое задание от компании на вакансию Front-end dev. Конечно же, задание состояло из нескольких пунктов. Но сейчас™ речь пойдет™ только™ об одном из них — организация поиска™ по странице. Т.е. банальный поиск по введенному в поле тексту™ (аналог™ Ctrl+F в браузере). Особенность задания была в том, что использование каких-либо JS фреймворков или библиотек запрещено. Все писать™ на родном™ native™ JavaScript.

(Для наглядности далее буду сопровождать всю статью™ скринами и кодом, чтоб мне и вам было понятнее, о чем речь в конкретный момент™)
Читать™ дальше™ →
Всего голосов 21: ↑11 и ↓10 +1
Просмотры 62K
Комментарии 9

Вариант миграции с JQuery™ на чистый™ Javascript

Разработка веб-сайтов™ *JavaScript *Клиентская оптимизация *jQuery™ *
Библиотека JQuery™ была создана в 2006 году для восполнения недостающей функциональности Javascript. С тех пор последний достаточно продвинулся в своем развитии, чтобы разработчики могли обходиться без JQuery™, основная проблема которой — производительность.

Читать™ дальше™ →
Всего голосов 19: ↑7 и ↓12 -5
Просмотры 11K
Комментарии 78

Github™.com отказывается от использования jQuery™ и переходит на чистый™ JavaScript

Разработка веб-сайтов™ *JavaScript *jQuery™ *GitHub™
Сегодня Mislav™ Marohnić объявил о том, что разработчики Github™ избавились от jQuery™ на фронтенде GitHub™.com. Казалось бы, в самом этом факте нет ничего™ примечательного, если бы не один интересный момент™.

Проблема выбора™ нового™ фреймворка для фронтенда была решена™ радикально — решено™ было обойтись без фреймворков в принципе. Вместо™ них были использованы следующие средства:

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

Помимо™ Custom™ Elements, ничего™ другого из Web Components было решено™ не использовать. Разработчики присматривались к Shadow™ DOM и были бы не против™ прибегнуть к нему — однако™, в силу того, что на полифиллах скорость поиска™ в DOM оставляет желать™ лучшего, им пришлось пока отложить эту затею.

Зачем разработчикам в принципе потребовалось все это сделать? По их словам™, для того, чтобы «отдавать» посетителям меньше™ килобайт, иметь возможность использовать более явно выраженный синтаксис для выполнения манипуляций с DOM, а также ради возможности использовать библиотеку Flow.JS для статического анализа типов. По словам™ разработчиков, процесс ухода с jQuery™ занял годы.
Читать™ дальше™ →
Всего голосов 73: ↑70 и ↓3 +67
Просмотры 52K
Комментарии 178

Переход с jQuery™ на Vue.js

Блог компании RUVDS.com Разработка веб-сайтов™ *JavaScript *jQuery™ *VueJS *
Перевод
Автор статьи™, перевод которой мы публикуем сегодня, полагает, что в мире существует ещё много программистов, которые, когда им нужно разработать простое веб-приложение, обращаются к jQuery™. Обычно™ это случается тогда, когда некую страницу нужно оснастить простыми интерактивными возможностями, но использование для этого какого™-нибудь™ JavaScript-фреймворка кажется явным перебором. Ведь это — килобайты ненужного кода, шаблоны, инструменты для сборки™ проектов, средства для упаковки модулей… При этом подключить к странице jQuery™, воспользовавшись CDN-ресурсом, проще простого.



В этом материале речь пойдёт™ о том, как перевести проект™, созданный с использованием jQuery™, на Vue.js. Этот проект™ будет создан™ на jQuery™, а потом переработан с применением Vue. Автор материала хочет продемонстрировать всем желающим то, что использование Vue, даже в сравнительно небольших проектах, не обязательно означает чрезмерное увеличение размера кода таких проектов и большую дополнительную нагрузку на программиста. Это, наоборот, при практически тех же размерах вспомогательного кода, что и при использовании jQuery™, позволяет повысить производительность труда и улучшить качество приложений.
Читать™ дальше™ →
Всего голосов 50: ↑48 и ↓2 +46
Просмотры 36K
Комментарии 43

О вреде CDN, сервисов и шрифтов от Google™

jQuery™ *Google™ API *
Из песочницы
Как известно, сегодня все больше™ и больше™ разработчиков предпочитают грузить js-библиотеки из CDN Google™ (например, jQuery™). Более того, это даже считается хорошим тоном — в более чем 50% случаев тот же jQuery™ находится в кэше браузера пользователя благодаря посещению других™ сайтов™, использующих тот же CDN. И все бы хорошо™ — к вашему™ серверу меньше™ обращений, у пользователя сайт грузится быстрее… Видимых недостатков нет.

А что если вы работаете на глобальном рынке? Использованием googleapis вы сразу отсекаете огромную часть пользователей из Китая!

Большой китайский фаервол блокирует не только™ поисковик от Google™, но и все его сервисы, в числе которых и CDN. Таким образом, в Китае Ваш сайт становится либо недоступен (если Вы подключаете jQuery™ до body), либо работает не совсем™ так, как вы ожидаете (если jQuery™ подключается в конце кода). То же самое касается шрифтов от Google™, графиков от Google™, reCaptcha от Google™ и всего остального «от Google™».

Вывод: Если Вам интересны пользователи из Китая — следует пересмотреть свое мнение™ на предмет загрузки библиотек или шрифтов с гугловских CDN.
Читать™ дальше™ →
Всего голосов 33: ↑22 и ↓11 +11
Просмотры 7.7K
Комментарии 31

Вывод Telegram-канала™ на свой вебсайт

Разработка веб-сайтов™ *jQuery™ *
Tutorial
Забьем™ еще один гвоздь™ в крышку™ гроба Роскомнадзора.

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

Странно, что на Хабре еще не упоминался этот замечательный бот — Journalist (@JournalistBot). На сайте указано, что beta, но работает более чем стабильно.
Читать™ дальше™ →
Всего голосов 33: ↑28 и ↓5 +23
Просмотры 27K
Комментарии 13

Вклад авторов