В данной статье я поделюсь с вами моими наработками, которые появлялись по мере поступления задач связанных с разработкой Callback Виджета.
После того как у нас получилось выгрузить скрипты и стили на сайт, а также отобразить большое количество разметки испульзуя Angular.js в Первой части нашего цикла статьей на Хабрхабре у нас появлись новые задачи требующие решения!
Содержание статьи:
1. JSONP параметры и метод param
2. Convert img to base64
3. Настройка CDN на Amazon CloudFront
4. Шрифты вместе с FontForge
5. Angular и ng-keypress
6. Мобильная версия Виджета
7. CRON задачи
8. Найденный SEO Словарь
#1 JSONP параметры и метод param
При передаче кроссдоменного запроса JSONP как и любого другого запроса требуется передача параметров, а простая передача объекта нам в данной ситуации не подойдёт, нужно передавать как GET параметры (вида ?name=ferret)! Поскольку мы не используем jquery, а соответственно и метод $.param я решил написать свой метод param и выглядит он следующим образом:
$scope.param = function (obj) { var parts = []; for (var key in obj) { if (obj.hasOwnProperty(key)) { parts.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key])); } } return parts.join('&'); }; Замечательно, мы научились передавать параметры, идём дальше!
#2 Convert img to base64
При render нашей html разметки встаёт вопрос, а как нам вывести картинки и с учётом, что мы хотим это сделать без лишних запросов на другие адреса и без лишней нагрузки на производительность! И тут я нашёл замечательное решение, перекодировать наши изображение в base64. Так же есть замечательный сервис, который всё это делает онлайн base64-image. После загрузки изображения он выдаёт нам уже подготовленные под вставку в стили строки:
<style type="text/css"> div.image { width: 100px; height: 100px; background-image: url('data:image/png;base64,iVBORw0KGgoAAA............'); /* (Сократил длину) */ } </style> Рекомендуется это использовать для небольших изображений, поскольку для больших это будет много весить!
#3 Настройка CDN на Amazon CloudFront
Возникла задача: использовать CDN для более быстрой загрузки наших скриптов и стилей с любого сайта.
Статьями богат данный сервис, но мне почему-то хотелось побольше наглядных и визуальных примеров. Посмотрите что из этого вышло:
Супер, теперь наши файлы на CDN! Возникли вопросы при загрузке шрифтов с CDN, почему-то нашёл инструкции относящиеся к другому сервису Amazon E3!
#4 Шрифты вместе с FontForge
Что такое FontForge? Это редактор шрифтов. При желании через данную программу вы сможете создать свой шрифт или просто открыть и посмотреть другие шрифты! Вот ссылка на дистрибутив FontForge
Для примера берем шрифты Font-Awesome (font-awesome.woff) и открываем их через FontForge. После открытия вы увидите таблицу символов, так и должно быть, но для того, чтобы увидеть изображения заложенные в шрифты, жмем в меню Кодировка->Компактная и получаем таблицу картинок:
Просто круто!
#5 Angular и ng-keypress
Используя
ng-keypress=onKeyPressNumber($event) и ng-paste=onPaste($event)
Можно ограничить пользователя при вводе данных и запретить CTRL+V вставку:
$scope.onKeyPressNumber = function ($event) { if (!($event.keyCode > 47 && $event.keyCode < 58)) { $event.preventDefault(); } else { //логика вашего приложения } }; $scope.onPaste = function ($event) { $event.preventDefault(); }; Удобный подход!
#6. Мобильная версия Виджета
В этом пункте я хочу оставить ссылки на материалы, которые я использовал при создании:
Media Queries for Standard Devices
Media Query Snippets
Тестирование для мобильных устройств
#7 CRON задачи — это просто
Нашёл неплохую статью, где можно узнать прочитать основы CRON задач ОСНОВЫ CRON, а так большинство хостеров предоставляют данную услугу в виде web-интерфейса с инструкцией, логом, настройками внутри!
#8 Найденный SEO Словарь
Блуждая по сайтам в поисках решения, нашёл очень любопытный словарь SEO терминов, возможно пригодится СЛОВАРЬ
Не хотел бы оставить без внимания ещё один ресурс, который позволяет вам просмотреть возвращаемые от сервера заголовки REDBot
Заключение:
Надеюсь данная статья сэкономит ваше время и нервы! Программируйте с удовольствием!
ссылка на оригинал статьи http://habrahabr.ru/post/265035/
Добавить комментарий