jQuery *

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

Сайты наподобие You might not need jQuery (YMNJQ) продвигают идею, в соответствии с которой от jQuery очень легко избавиться. Но самый первый пример на этом сайте демонстрирует вескую причину jQuery использовать. Там строка простого кода на jQuery заменяется на 10 строк обычного JS!

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

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

(Для наглядности далее буду сопровождать всю статью скринами и кодом, чтоб мне и вам было понятнее, о чем речь в конкретный момент)

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

Сегодня 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 занял годы.

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



В этом материале речь пойдёт о том, как перевести проект, созданный с использованием jQuery, на Vue.js. Этот проект будет создан на jQuery, а потом переработан с применением Vue. Автор материала хочет продемонстрировать всем желающим то, что использование Vue, даже в сравнительно небольших проектах, не обязательно означает чрезмерное увеличение размера кода таких проектов и большую дополнительную нагрузку на программиста. Это, наоборот, при практически тех же размерах вспомогательного кода, что и при использовании jQuery, позволяет повысить производительность труда и улучшить качество приложений.

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

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

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

Вывод: Если Вам интересны пользователи из Китая — следует пересмотреть свое мнение на предмет загрузки библиотек или шрифтов с гугловских CDN.

Забьем еще один гвоздь в крышку гроба Роскомнадзора.

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

Странно, что на Хабре еще не упоминался этот замечательный бот — Journalist (@JournalistBot). На сайте указано, что beta, но работает более чем стабильно.

Всем привет,

Приглашаем на первый открытый Front-end MeetUp 28 марта, организованный внутренним сообществом разработчиков Райффайзенбанка.

Фреймворк Bootstrap — это свободный набор инструментов для создания интерфейсов сайтов и веб-приложений. Его возможности ориентированы исключительно на фронтенд-разработку. Bootstrap — проект весьма популярный, о чём, например, говорит то, что он занимает (по состоянию на начало марта 2018-го года) второе место по количеству звёзд на GitHub.

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

В Первой части мы подготовили нашу страницу.

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

Имитация базы, как мне уже писали в комментариях, это json файлы с содержанием нужного текста. Вопрос: "Зачем тут Vue? Если это можно написать и на скриптах?". Если честно — для красоты html верстки. Ну и изучения новых технологий.

Передо мной встала задача по обновлению текущего сайта одной компании, и в соответствии тренду выбор пал на landing page с поддержкой мультиязычности.

Посмотрев на реализации представленные в интернете я ужаснулась. В теле страницы куча текста! С такой разметкой же невозможно работать. А если надо поменять информацию? Это надо лезть в html, искать нужное, и менять в нескольких местах. Короче ужас! И я подумала что хорошо бы использовать базу данных, но это же обычная страница, и разворачивать ради нее целый сервер? и базу? как то перебор! Работая с Angular2 я подумала что было бы классно с его помощью создать страницу, но он очень тяжелый, и не подходит… И тут я вспомнила о его аналоге Vue.js. Легкая библиотека, для создания приложений. Я подумала: "А почему бы не создать сайт с помощью vue и добавить имитацию базы?".

Обдумав все за и против, посмотрев на другие подходы, мне захотелось внести немного "красоты" в html верстку.

Для объяснения подхода я решила сделать небольшую страничку, потому что выкладывание полного кода существующей страницы считаю слишком "тяжелым".

Но пришлось все равно разбивать статью на 2ве части, тут описывается только подготовка небольшой страницы и добавление меню для смены языка.

Недавно мне довелось выполнить один маленький и интересный заказ Его суть заключалась в том, чтобы по нажатию кнопки с удалённого сервера БД скопировать БД (её приблизительный размер составляет почти 800Mb) на тестовый сервер и после выполнить ряд изменений в структурах таблиц.

Казалось бы, что нет ничего проще берём выполняем на удалённом сервере запрос вида:

mysqldump -uLogin -pPassword db_name > db_name.sql

и забрать потом файл, но в моём случае это оказался сервер БД без возможности выкачать оттуда файл, поэтому мне пришлось изловчиться и написать свой механизм экспорта из этой удалённой БД средствами YII2, с которым я был на тот момент не так сильно знаком.

Привет, Хабр! Представляю вашему вниманию перевод статьи Vue.js Tutorial: From jQuery to Vue.js автора Paul Redmond.

Что касается библиотек JavaScript, то никогда не было более популярной библиотеки, чем jQuery. Она создавалась для обхода DOM элементов с использованием CSS селекторов в то время, когда совместимость браузеров была важной проблемой для разработчиков.

Фактически jQuery настолько универсален, что я подумал что он отлично передаст то, почему я люблю писать UI с Vue, используя компонентный JavaScript. В этом руководстве мы сначала рассмотрим создание пользовательского интерфейса с jQuery, а затем перепишем его с помощью Vue.

Я перфекционист который любит во всём порядок. Больше всего меня радует когда вещи работают именно так, как они должны работать (в моём, разумеется, понимании). А ещё у меня уже давно есть своё персональное интернет-радио на базе IceCast-KH + LiquidSoap. И много лет мне не давал спокойно спать тот факт, что сервера потокового радиовещания не умеют отдавать обложки (artwork) проигрываемых треков в потоке. Да и не только в потоке — вообще никак не умеют. Я и на IceCast-KH (форк от IceCast2) перешёл только из-за одной его убер-фичи — он умеет отдавать mp3-тэги внутри flv потока (это нужно для отображения исполняемого трека при онлайн воспроизведении на сайте через флэш-плеер). И теперь пришло время закрыть последний вопрос — отдачу обложек проигрываемых треков — и успокоиться. Поскольку готовых решений не нашлось, я не придумал ничего лучше, чем написать свой сервер обложек для .mp3 файлов. Как? Добро пожаловать под кат.

Когда-то библиотека jQuery была хорошим помощником для программистов. Так как она позволяла в разы облегчить создание функционала, который в то время с помощью одного JavaScript было почти нереально написать, и предоставляла очень хорошую кроссбраузерность.

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

В этой статье я расскажу про самую главную функцию jQuery — jQuery();.

Когда я начинал учить веб-программирование, встретил лучший из всех, по моему мнению, фреймворков — JQuery. В то далёкое время нельзя было представить нормальное программирование без него, так как он мог делать одной строкой то, что делал JavaScript за 95.

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

Так вот, в этой статье я хочу рассказать о реализациях некоторых функций из JQuery на чистом JavaScript.

В этой статье я решил выложить свое представление о авторизации на сайте при помощи PHP.
Конечно если авторизация происходит на SSL риски того, что пароль будет перехвачен при помощи снифера становятся ничтожными. Но все же, такой вид авторизации не везде используется. Один из видов защиты — это содержание пароля в виде хеша. Но ведь при авторизации пароль оправляется в POST запросе на сервер и существует шанс его выловить. Поразмыслив, я решил попробовать реализовать схему авторизации при которой пароль не будет отправляться на сервер в том виде в котором он есть. И даже не его MD5 хеш. В планах было что то подобное алгоритму ms-chap.

Одним из преимуществ строковых шаблонизаторов таких как JUST.js, jqueryTmpl или handlebarsjs перед шаблонизаторами на основе виртуального DOM дерева (VUE.js, angular) это низкий порог вхождения и простота в использовании. Ещё как мне кажется со строковыми шаблонизаторами проще интегрировать плагины для jquery.

Однако возможность реактивного связывания данных модели с шаблоном действительно удобный инструмент, и после того как я пробовал VUE.js и angular мне стало очень не хватать этого в моём любимом шаблонизаторе JUST.JS.

В итоге я решил добавить одностороннее реактивное связывание данных в JUST.JS, а в итоге получилось решение которое можно использовать практически с любым строковым шаблонизатором.

Итак, начал я разрабатывать один проект по фану. Основная идея проекта проста: площадка, где все могут ставить на всё что угодно, заключать пари, сделки и БЕЗ каких либо ограничений. Развлекательный проект по сути своей.

Ну и конечно стал вопрос Удобной авторизации пользователей с наименьшим «трением». Подумав немного, я выбрал авторизацию через Facebook, но думаю, на этом я не остановлюсь и вы прочтете ещё несколько статей, с авторизацией через Google Acc, VK и Tweet.


Итак к делу! В интернете я нашел несколько тем, которые описывают вопрос авторизации, некоторая информация мне помогла, но я не нашел ни одной, которая бы решила поставленную мной задачу, поэтому, завершив задачу я и решил написать эту статью.