image
Мова піде про чергове вирішення багаторічної проблеми в браузері — обмеження користувальницького введення, або просто — маска, яка використовується повсюдно: номери телефонів, кредитних карт, паспорти і т. д.

На даний момент було знайдено два популярних рішення:

  1. jQuery.Маска вводу
  2. jQuery-Mask-Plugin
Ті, хто намагався використовувати маски в своїх і без того непростих проектах, швидше за все були б раді викинути все це справа і використовувати просто валідацію. Особливо якщо маска повинна бути динамічною, залежати від вже введених символів, потрібна можливість отримувати размаскированное значення навіть якщо користувач ввів його не цілком, чи потрібно повністю приховати placeholder… Що працювало в одній бібліотеці — не працювало в інший, як тільки перекручуватися не доводилося. Вже простіше самому написати, в кінці то кінців, програмісти ми або хто!? Та й колеги теж не загубилися, написали під Android ж.

Кому не терпиться, ось воно: imaskjs.
Поламати демку можна тут.

Читати далі →

Фиксим дивна поведінка плагін jQuery uploadify (і один баг)

Так вийшло, що я на своїх сайтах використовую плагін uploadify для jQuery — uploadify.com (хоч він вже застарів, флеш і все таке, але HTML5-версія у них вже платна). Плагін надає мультизагрузку файлів, не перевантажуючи сторінку, що нам всім і треба. Однак виявилося, що в цьому плагіні не працює (і/або працює не так, як треба) функція перевірки існування файлів перед відправкою на сервер.

Читати далі →

Огляд сучасних систем веб-робочих столів

Привіт, великий Хабр! В наш час Інтернет бурхливо розвивається. Тепер, це не просто сховище інформації. Ми спілкуємося в мережі, активно використовуємо хмарні сервіси для зберігання власних файлів, створюємо веб-додатках документи, малюнки та презентації, користуємося онлайн-перекладачем, граємо в онлайн-ігри і так далі.

У віртуальному просторі Інтернету, на мій погляд, завжди зручно мати у своєму розпорядженні звичний робочий стіл, який зосередив у собі всі необхідні для користувача програми і дозволив працювати з даними безпосередньо в браузері. На сьогодні Інтернет – це одна з бурхливо розвиваються галузей IT-сфери і останнім часом особливу популярність придбали хмарні технології, зокрема все більший інтерес отримують так звані «мережеві операційні системи».

Система веб-робочих столу організовує для користувача набір додатків і сервісів прямо в Інтернеті, доступний в будь-якому місці і на будь-якому пристрої. Основою кожного такого робочого столу є інтерфейс — аналог провідника і робочого столу звичайної операційної системи (Windows, Mac OS, Linux).

Читати далі →

Рецепт розробки бота під Telegram



Добрий день, шановні читачі Хабрахабра!

В цьому топіку я хочу поділитися з вами досвідом розробки бота під Telegram за 4 дні. Цей бот переводить всі голосові повідомлення, які отримує, в текст. Намагався зробити швидко, але якісно — підучив пару-трійку технологій. Постараюся максимально детально описати свій процес подолання помилок і перешкод; довести, що, навіть не маючи потрібних навичок, запустити свій продукт не так-то й складно.

Стаття може бути цікава як новачкам у програмуванні — побачити, скільки перешкод стоять на шляху у готового продукту, так і більш просунутим фахівцям — десь посміятись, десь поплакати, десь написати коментар «життєво».

Преамбула
І так, що ж може зробити один програміст за 4 дні?

Читати далі →

React, Web Components, Angular і jQuery — друзі навіки. Універсальні JavaScript-компоненти

image
Ця стаття про те, як написати універсальний JavaScript-компонент, який можна буде використовувати
  • як React-компонент;
  • як Preact-компонент;
  • як Angular-компонент;
  • як Web Component;
  • jQuery функцію для рендеринга в DOMElement;
  • як нативну функцію для рендеринга в DOMElement.
Навіщо і кому це потрібно
Світ JavaScript-розробки дуже фрагментований. Є десятки популярних фреймворків, велика частина з яких абсолютно несумісні один з одним. В таких умовах розробники JavaScript-компонентів і бібліотек, вибираючи один конкретний фреймворк, автоматично відмовляються від дуже великої аудиторії, що даний фреймворк не використовує. Це серйозна проблема, і в статті запропоновано її рішення.
Читати далі →

«Великий зрівнювач» або спосіб вирішити проблему вирівнювання по висоті

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

Ця стаття стане у пригоді тим, хто часто стикається з проблемою вирівнювання елементів по висоті в різних ситуаціях.

Рис. 1. Порядок відображення групи товарів.


Читати далі →

«Великий зрівнювач» або спосіб вирішити проблему вирівнювання по висоті

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

Ця стаття стане у пригоді тим, хто часто стикається з проблемою вирівнювання елементів по висоті в різних ситуаціях.

Рис. 1. Порядок відображення групи товарів.



Читати далі →

Від Jquery UI до Ext.js: огляд бібліотек віджетів для побудови інтерфейсу на JS. Частина 2

У той час як веб розвивається і отхватывает все більшу частину пирога, коли-то дісталася десктопа, виробники програмного забезпечення, орієнтованого на корпоративний сегмент, не можуть залишатися без діла. Якщо коли-то рулили додатки з використанням Windows Forms, то зараз все більше контор замислюються, чи варто взагалі використовувати Windows.

image

Природно, розробники подібного ЗА намагаються адаптуватися під нові умови і випускають свої UI бібліотеки, тільки вже для Web.

Правда, є якась дивна тенденція: замість конкуренції з зовнішнім світом виробники конкурують як би між собою. Більшість продуктів мають однаковий набір віджетів, які зовні і структурно виглядають схожими один на одного, випускаються з інсталятором для Windows і мають широку підтримку .NET.

Загалом, живуть в Enterprise світі зі своєю атмосферою. І все ж я спробую розібратися і знайти якісь унікальні обриси у тієї чи іншої бібліотеки. А криються вони трохи за межами веб інтерфейсу, тому я спробую залізти трохи далі банального html + js.

Читати далі →

Скролінг контенту методом торкання і перетягування на jQuery

Hello, jQuery, again!

Завдання даного плагіна — скролінг контенту за допомогою торкання і перетягування.

Використовувані події mousedown/move/up. За замовчуванням ця ланцюжок подій виділяє вміст в межах дотику.

Реалізація — до болю знайоме overflow:hidden, обгортання вмісту елемента і переміщення контенту всередині.

Невирішені проблеми
1. Іноді, на межі між перетином нижнього краю п'ятикратним уповільненням, контент зсувається вгору на певний інтервал. Примітно, що при зворотному русі (в момент перетину цієї риси) контент повертається на своє місце (зсувається вниз).

Сподіваюся, для когось ця стаття виявиться корисною і знайде своє застосування.
Вэлком в коментарі, чекаю на ваші думки, ваш конструктив і негатив, все, що спрямовано на покращення даного коду!

Випробувальний стенд на jsFiddle (52 рядка некомментированного коду).

Читати далі →