После того как у нас получилось выгрузить скрипты и стили на сайт, а также отобразить большое количество разметки испульзуя 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
Заключение:
Надеюсь данная статья сэкономит ваше время и нервы! Программируйте с удовольствием!
Комментарии (11)
biophreak
19.08.2015 00:04Вопрос: если изображения заэнкодить в base64 и загружать вместе со стилями, не будет-ли это блокировать рендеринг страницы (не уверен, как работает рендеринг в современных браузерах)?
Я имею в виду, что base64 изображения в стилях будут весить прилично, соответственно браузер будет загружать css гораздо медленнее и парсить их дольше.
И, соответственно, юзер получить «правильно» зарендеренную страницу позже.
Как по мне, это плохой user-experience.
Не проще-ли грузить изображения «асинхронно» JavaScript'ом? Ну или просто не энкодить бездумно все изображения на странице.
DmitryMV
19.08.2015 00:12Полностью согласен! Я в статье указал, что это рекомендуется использовать для маленьких изображений, у меня их 5 штук и это не сильно влияет на скорость загрузки и отрисовку css ;)
Evgeny42
19.08.2015 00:14+4Вы серьезно? Ну не надо скатываться до таких элементарных вещей, которые гуглятся за двадцать секунд и набиты интернетом. Ужасно бесполезная статья.
DmitryMV
19.08.2015 00:32-1Евгений, здесь действительно элементарные вещи, но у разных программистов уровень разный и я пытался выдать всё в комплексе под определенную задачу!
Glebcha
19.08.2015 19:48Скажите зачем вам для такой задачи Angular?
Я бы вообще обошелся ванилью.DmitryMV
20.08.2015 21:48Есть опыт разработки на Angular, поэтому и стал его использовать, а с Vanila не приходилось работать
Glebcha
20.08.2015 22:05… а с Vanila не приходилось работать
Это вы сейчас на полном серьезе?
Нет, я конечно понимаю, что Angular на старте предоставляет низкий порог вхождения, но вот так прямо признавать…
То есть вы даже не знаете как написать запрос без всяких прокладок в виде методов любимого вами Angular или какого-нибудь жикверя? Я уже не спрашиваю про трех китов ООП в контексте JS.
Извините за резковатый комментарий, но вам стоит забыть про использование фреймворков пока не решите хотя бы одну серьезную задачу на ванили.DmitryMV
20.08.2015 22:25Дельный комментарий, но нельзя так строго судить автора за использование Angular и нативных методов JS (которых вы не видели), не хочу разводить холивар. С ООП знаком, а именно в скупе с TypeScript советую посмотреть, а так в зависимости от ситуации использую то, что сможет решить мои задачи!
Glebcha
21.08.2015 05:23Спасибо, но я буду лучше использовать ECMA2015 потому что уже совсем скоро мой код перестанет быть компилируемым, а в случае с TypeScript он таковым останется навсегда. Плюс мне не интересен ангуляр, который перешел на него во второй версии. А так да, смотрел еще давно, пробовал и не увидел каких-либо существенных преимуществ перед новой спекой с транспайлером.
SerafimArts
1) Браузеры, где нет XHR2 с Cors правилами уже мертвы (ну или почти что мертвы), думаю стоит принять на заметку.
2) Для пункта 2 зачем нужен сервис, когда эта функция встроена в пых (см. base64_endode)?
3) CDN — это конечно хорошо, но значительно лучше будет, если внешних ссылок не более 5ти-10ти их не использовать. Время резолва DNS может быть больше времени загрузки некоторой статики, а некоторые CDN бывают что падают (например амазон, до недавнего времени). Т.е. если упадёт сайт — результата не будет и так (и с CDN и без), а если упадёт CDN, то в одном случае всё будет ок (без CDN, ваш Кеп), в другом сайт будет мёртв.
Это так, небольшие пометки на тему.
DmitryMV
1) + (SerafimArts, в первой статье я описывал сервис, который я разрабатываю (callback-виджет), который располагается на другом сайте, и у этого сайте может стоять запрет на CORS),
2) Он нужен, когда мы используем его на другой странице у клиента (only js, css, html),
3)+, я его использую только для двух файлов 1:css(здесь и использую base64 для картинок), 2:js(внутри него прячу ещё разметку)