Рубрика «javascript» - 506

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

Цель:

Начать использовать компонентный подход в HTML верстке(новую семантику), а именно вэбкомпоненты.

Под компонентом я подразумеваю — “независимый модуль программного кода, предназначенный для повторного использования и развертывания”. К примеру в другом проекте.



Тут хочу сделать небольшое отступление и внести ясность – речь пойдет о компонентах, а не о виджетах(функционально обособленных единицах приложения, объединяющих в себе представление, логику и/или данные, конкретного приложения — javascript+html+css).
Разница, по моему мнению, состоит в том что компонент не подвязывается к конкретной модели данных или логике конкретного приложения – и вы можете его без труда перенести в другое приложение. А виджет – это единица конкретного приложения тесно связанная логикой или данными, и перенести его куда либо без внутреннего изменения самого виджета у вас не получится.
В качестве примеров компонента могу привести селект, аккордеон или табки, а виджетов – панель состояния или окно отображения сообщений в чате.

Зачем:

Реюзабельный код и удобство верстки с помощью возможности расширения HTML синтаксиса.

Как сказано в доке к одному известному фреймверку:

“Directives is a unique and powerful feature available only in Angular. Directives let you invent new HTML syntax, specific to your application.”

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

И описанное далее это ни в коем случае не MV* фреймверк, и никогда не задумывался как онный.
Читать полностью »

Не смотря на развитие, внедрение новых стандартов и плюшек в браузерах, у нет единых стандартов, как отображать элемент /> по умолчанию. Более того, у этого элемента нет атрибутов, позволяющих его в какой-то мере стилизовать.
Из-за необходимости привести это поле формы к единому виду во всех браузерах и «вписать» в разработанный дизайн, после поисков и анализа материалов в интернете был разработан метод замены вида поля формы на html+css, и js для расширения функциональности.

Как по умолчанию выглядит это поле?

Читать полностью »

JavaScript отличается от многих других «объектно-ориентированных» языков программирования тем, что в нём объекты есть, а классов — нет. Вместо классов в JavaScript есть прототипные цепочки и некоторые другие хитрости, которые требуют времени на осмысление. Перед профессиональными программистами в других языках при переходе на JavaScript встаёт проблема быстрого вхождения в его объектную модель.

Этот текст написан для того, чтобы дать начинающему или эпизодическому разработчику на JavaScript представление о способах создания объектов в JavaScript, от простого «структурного», как в языке C, к более «объектно-ориентированному», как в C++/C#/Java.

Статья может быть рекомендована как новичкам в программировании, так и профессиональным бэкенд-программистам, эпизодически вынужденным погружаться в JavaScript.
Читать полностью »

Случилось то, чего мы ждали уже давно. Благодаря усилиям Jason Walton теперь CoffeeScript поддерживает Source Maps, и мы можем отлаживать код на CoffeeScript прямо в браузере (Chrome, Firefox, Webkit Nightly) и, думаю, уже скоро в WebStorm. Теперь практически не осталось причин не использовать этот великолепный язык в своих веб-проектах.
Читать полностью »

Здравствуйте, уважаемые читатели.
Продолжаю серию постов с личным опытом и советами по разработке расширений для браузера Google Chrome.
В этом выпуске – «глобальные» горячие клавиши на уровне браузера.
Читать полностью »

image

Введение

Webrtc на хабре уже неоднократно упоминался, хотелось бы рассказать немного про техническую часть реализации и осветить создание небольшого видео чата. Хочу сразу оговорится, что реализация webrtc постоянно меняется, в том числе названия функций api, их параметры.
Всем, кому просто хотелось бы посмотреть сразу как это все работает, сюда: apprtc.appspot.com демка от гугла все что нужно — это перейти по ссылке и послать её еще кому-нибудь уже с номером комнаты. В конце нужно поменять цифры если окажется что комната переполнена. Кому интересно как это все работает добро пожаловать под кат
Читать полностью »

asm.js — новый язык?

Нет, это просто подмножество JavaScript. Программа на asm.js одинаково поведёт себя и в существующих движках JavaScript, и в движке с предварительной (ahead-of-time, AOT) компиляцией, способном распознавать и оптимизировать asm.js; различаться будет её скорость, разумеется!

Какой выигрыш в производительности можно ожидать от asm.js?

Сейчас ещё рано утверждать. Однако наши предварительные измерения производительности программ, скомпилированных из Си в asm.js, показывают не более чем двукратное замедление по сравнению с компилированными в машинный код посредством clang. Мы опубликуем дальнейшие измерения, когда насобираем их.

Как я могу следить за ходом реализации?

Мозилла работает над первой реализацией оптимизирующего компилятора asm.js для SpiderMonkey. В вики Фонда Мозиллы также опубликован план разработки дальнейших выпусков и оптимизаций. Если авторы других движков JavaScript опубликуют собственные планы реализации компиляторов asm.js, мы их здесь упомянем.

Почему бы вам не разработать синтаксис байткода вместо необычного диалекта джаваскрипта?

Для компиляторов наподобие Emscripten или Mandreel синтаксис байткодового языка попросту не особенно значим. Притом большинство байткодов и вообще машинных языков имеют двоичный формат, не читаемый людьми. Однако мы можем создать на уровне asm.js более человеко-читаемый синтаксис, который будет и удобным в дизассемблировании, и пригодным для чтения и записи людьми.

То обстоятельство, что asm.js — это JavaScript, не обернётся ли непредсказуемым выполнением кода?

Предварительная (ahead-of-time, AOT) компиляция asm.js может генерировать код, выполнение которого весьма предсказуемо, потому что валидный код asm.js ограничен крайне небольшим подмножеством JavaScript, состоящим только из строго типизированных целых чисел, чисел с плавающей точкою, арифметических операций, вызовов функций и обращения к куче.

Почему бы тогда не NaCl или PNaCl вместо этого? Вы просто упорствуете насчёт JavaScript?

Принципиальным достоинством asm.js по сравнению с новыми технологиями вроде NaCl и PNaCl является то, что asm.js работает сегодня: существующие движки JavaScript ужé неплохо оптимизируют код, написанный в таком стиле. Что означает, что разработчики могут выпускать код на asm.js сегодня, а со временем его работа будет ускоряться. Другою важною пользою является заметно бóльшая простота реализации, для которой потребуется совсем немного дополнительных механизмов поверх существующих движков JavaScript — и не понадобится слой совместимости API.

Читать полностью »

Итак, после обновления Firefox до 19 версии, полностью отвалилось горячо любимое расширение Яндекс.Бар. Не забуду напомнить, что Яндекс.Бар был заменен Яндекс.Элементами, которые понравились чуть больше, чем никому, поэтому и получили свои заслуженные 2 бала из 5ти.

Почему не понравились? Заменили адресную строку, стало неудобно просматривать почту, заменили закладки и убрали корректор адресной строки (под предлогом установки Punto Switcher, который может и хорош для обычного работника, но никак не для программиста. Поэтому и был удален почти сразу же, как установлен. Да и если можно было бы настроить, то всё равно желание пропало).

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

Читать полностью »

Сегодня все ещё большинство сайтов работает по протоколу http, а не https. Это хуже в плане безопасности, но дешевле и проще в поддержке. Безопасность аутентификации на таких сайтах — проблема, так как чаще всего она реализуется простой отправкой формы c логином/паролем на сервер, где хэш пароля сверяется c хэшем, который соответствует указанному логину. Входя на такой сайт в открытой Wi-Fi сети или другом публичном месте любой кто умеет пользоваться google сможет без особых усилий перехватить ваш пароль. Некоторые идут чуть дальше, отправляя на сервер хэш пароля, но и это не на много лучше так как имея радужную таблицу (особенно для md5) можно попробовать найти пароль, имея не нулевой на успех, и каждый день вероятность успеха растет.

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

Прежде всего отметём возможное недоразумение: сегодня речь у нас пойдёт не о том движке, который известен старожилам джаваскриптового программирования под названием JSDB и до сих пор располагается по адресу JSDB.org. Тот движок, основанный на мозилловском SpiderMonkey, хотя и обладал богатыми возможностями для доступа к базам данных, к электронной почте и к Интернету, после появления гораздо более шустрого движка Node.js постепенно впал в совершеннейшее забвение, так что и сказать о нём мне нечего.

О пользе JSDBВместо него я намерен вдругорядь привлечь ваше внимание к той базе данных о библиотеках джаваскриптов, которая появилась в нынешнем (2013 года) феврале по адресу JSDB.io и открыта для пополнения читателями. (Пишу «вдругорядь» оттого, что на JSDB у вас и ранее была возможность обратить внимание: сперва mourner упомянул её во твиттере у своей библиотеки Leaflet, а затем alexzfort упомянул её в дайджесте новинок прошлой недели.)

Чем JSDB радует? Продуманностью интерфейса и широким употреблением AJAX для внесения изменений в страницы без перезагрузки. (В итоге интерфейс получается, например, куда более интерактивным и удобным, нежели у тематически сходной вики jswiki или у порождённого этой вики сайта «JavaScript Territory».) Сперва перечисление библиотек с открытым исходным кодом кажется на JSDB простым списком. Однако, так как в JSDB принимаются библиотеки с открытым исходным кодом, на Гитхабе лежащем, то у JSDB есть приятная возможность отреагировать на жмяк мышóю по заглавию той или иной джаваскриптовой библиотеки, автоматически открыв информационную панель с кратким описанием библиотеки, с подсчётом её форков и звёзд и участников её разработки на Гитхабе. (Эта панель развёртывается на месте жмякнутого пункта, раздвигая остальные пункты списка.) Ещё сильнее обрадует обстоятельного читателя вкладка «Readme», позволяющая для справки целиком подкачать с Гитхаба текст Readme-файла выбранной библиотеки, никуда с JSDB не уходя для этого.

А которую пользу сайт JSDB приносит? А вот такую: его содержимое служит расширителем кругозора. Как не следи за развитием современного открытого исходного кода, а всё же упустишь появление пары-тройки-другой библиотек (или отметёшь их в зародыше как бесперспективняк, ан они со временем разовьются в нечто необыкновенно полезное), так что полезно встретить их на JSDB и познакомиться с их продуктивными возможностями.

Понятно, что у каждого из читателей такой список из пары-тройки-другой библиотек, на JSDB с интересом обнаруженных, будет своим. О вкусах и не спорят. Для сведения читателей я счёл, однако, не лишним перечислить и полдесятка моих находок.

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js