Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Текстовый редактор на html – contenteditable

Одно из весьма интересных и вместе с тем мало используемых атрибутов html – это contenteditable. По сути он практически любой тег превращает в редактируемый input. Если вы с ним еще ни разу не сталкивались, то может сложиться впечатление, что это достаточно новый функционал. Однако это не так. Этот атрибут поддерживается начиная с 8-го эксплорера!

Contenteditable активно используется в google drive и во многих других интернет приложениях. Применять его достаточно просто, плюс к тому редактируемый текст сохраняет стиль, наложенный посредством css

See the Pen contenteditable by Artem Demo (@artemdemo) on CodePen.

Поделиться:

Javascript, писать код так, чтобы потом можно было разобраться – Maintainable Javascript

Я не претендую на то, что “Maintainable Javascript” – это тоже самое, что и “Javascript, писать код так, чтобы потом можно было разобраться”, однако это самый адекватный перевод, который пришел в голову :]

Maintainable Javascript, это прекрасная книга Николаса Закаса (Nicholas C. Zakas), я ее не нашел в переводе, поэтому рекомендую только на языке оригинала.

Maintainable-JavaScript

Это отличная книга о практике написания Javascript кода. Тут есть все, что нужно – от конвенции имен и использования комментариев, до паттернов решения классических проблем – модульный код, темплирование и многое другое.

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

Пожалуй единственный минус книги, который стоит отметить, это достаточно частое упоминание библиотеки YUI. Это уже мертвый ресурс, потому что Yahoo объявила о том, что не будет более заниматься ее разработкой. Однако, это мелочи по сравнению с основным материалом.

Поделиться:

Создание Windows, Linux, Mac приложений с использованием веб технологий – установка TideSDK

Веб технологии сегодня вовсю используются для создания обильных приложений. Те же AngularJS в команде с Ionic дают весьма неплохие результаты. Вторая версия ангулара вообще в первую очередь проектируется для мобильных платформ.

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

html-apps-on-desktop

Насчет платформы сегодня существует ряд решений – TideSDK, AppJS, Xenon. Есть и еще, но эти платформы позицианируют себя как достаточно простые в использовании.

Поговорим о TideSDK.

Есть ряд причин почему я выбрал именно эту платформу – во-первых, она разрабатывается уже достаточно давно и ребята пока не планируют останавливаться. Что безусловно очень радует. Плюс к тому они поддерживают все три основные платформы – Windows, Linux и MacOS

Установка SDK

1. Качаем TideSDK (на сегодняшний день последняя версия 1.3.1). Качаем с главной страницы проекта.

Распаковываем в определенную директорию (для каждой операционки она своя).

On Linux:

On Windows XP:

On Windows 7:

Подробнее тут: http://tidesdk.multipart.net/docs/user-dev/generated/#!/guide/getting_started-section-3

2. Теперь скачиваем TideSDK Developer App. Опять таки качаем с главной страницы проекта. Тут уже не важно куда распаковать файлы.

3. Запускаем TideSDK Developer App.
В моем случае не хватало одной библиотеки и программа вылетала с ошибкой:

Couldn’t load file: ***/TideSDK Developer/runtime/1.3.1-beta/libtide.so, error: libjpeg.so.62: cannot open shared object file: No such file or directory

Исправляется просто – устанавливаем libjpeg.so

Возможно потребуется 32 битная версия

После этого все начало запускаться отлично.

Теперь можно скачать тестовый проект TideSDK, импортировать в проект и запускать.

Поделиться:

Онлайн тестирование регулярных выражений – Online Regex tester

Отличный ресурс для тестирования регулярных выражений. Если работали с ними, то сами знаете насколько муторными они могут быть и вместе с тем насколько жизнь становится проще, если знаешь как с ними работать :]

Однако, этот ресурс хорош еще и тем, что выводит разбор введенного выражения, что в разы облегчает жизнь.

https://regex101.com/#javascript

Поделиться:

Список ресурсов по Angular 2

Недавно нашел список ресурсов по Angular 2 – https://github.com/timjacobi/angular2-education

Официальной документации пока еще нету и не ясно когда появится, поэтому приходится довольствоваться тем что есть. Я считаю, что изучать Angular 2, ES6 и TypeScript имеет смысл уж сейчас. Если от первых двух точно никуда не деться, то TypeScript уверенно занимает ключевые позиции, майкрософт выпустили интересный продукт.

Поделиться:

Асинхронная загрузка контроллеров – AngularJS

Порой необходимо загружать контроллеры асинхронно. Собственно, такая задача может стоять и для всех остальных компонентов (services, directives), однако поговорим сегодня о контроллерах. Вместе с этим стоит отметить, что для всего остального есть подобное решение.

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

Создадим достаточно простое приложение, состоящие всего из трех страниц:

index.html

Как видите, помимо ангулара я также использую angular-ui-router, однако это не принципиально.

home.html

portfolio.html

Страница portfolio.html использует дополнительный контроллер, который я не указал в index.html – его мы и будем подгружать асинхронно

app.js

mainCtrl.js

portfolioCtrl.js

Вот, собственно, и все, что требуется.

Поделиться:

Поле с числовым паролем и номерной клавиатурой – смартфон

Порой требуется сделать поле для ввода пароля, причем пароль должен быть обязательно числовым. Ничего интересного в принципе – достаточно тривиальная задача, однако все становится интереснее, если этот пароль нужно вводить с телефона. Либо сам сайт рассчитан на работу со смартфонами, либо вы пишите приложение, которое будет показано через WebView, суть дела это не меняет.

Специфика смартфона разумеется в том, что клавиатура будет выведена прямо на экране, а раз пароль числовой, то должны быть предоставлены числа вместо букв.

Вот тут и может начаться проблема. Если поле обычное, то нет проблем открыть числовую клавиатуру, можно сделать так:

либо вот так (если нужны исключительно числа):

Однако, поле с паролем должно скрывать ввод и для этого используется третий тип:

Который всегда открывает буквенную клавиатуру, но умеет скрывать ввод. Тут и возникает задача – как их совместить?

Для этого достаточно использовать CSS:

И все, проблема будет решена.

Поделиться:

Первая версия jQuery с комментариями Джона Рейзига (John Resig)

Исторический документ – первая версия jQuery с комментариями Джона Рейзига. 10 лет назад, когда еще имело смысл писать код поддерживающий IE5, Джон написал библиотеку, которая стала, пожалуй самой известной в мире фронт энда. Теперь можно посмотреть на изначальный код и почитать, что сам Джон думает об этом :Ъ

http://genius.it/5113998/ejohn.org/files/jquery-original.html

Поделиться:

Сайт каталог дизайнов для мобильных пиложений

Не так давно нашел интересный сайт с консепт дизайнами для мобильных приложений http://www.appdesignserved.co/ Давно хотел найти что-то подобное в одном месте, чтобы было где вдохновение черпать :] Я конечно не дизайнер, но очень часто приходится додумывать решения, которые дизайнер так и не смог выразить.

Кстати, если вы знакомы с подобными проектами, то буду рад если поделитесь в комментариях.

app-design-concept

Поделиться:

Как делаются promise в JavaScript (ES5)

Поскольку на дворе все еще апрель все еще 2015 и ECMAScript 6 до сих пор в разработке, то самое время поговорить о том, как делаются promise. Когда наступит эра ES6 и он будет в каждом браузере, мы сможем спокойно забыть про то, что когда все приходилось делать своими руками :]

Итак, об обещаниях (promise) я уже не раз писал вот тут или тут, но не описывал, как же их все-таки делают. Давайте как раз об этом и поговорим.

Promise имеют два основных метода then и done (он же resolve, reject) – это минимальный набор, который хотелось бы иметь на борту. Давайте о реализации этих методов как раз и поговорим.

Для начала создадим основной класс

Теперь создадим метод then

Создаем метод done

Пример использования:

Я не буду говорить, что все очень просто, но это достаточно просто для того чтобы начать использовать.

Поделиться: