JavaScript *

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

ExpandJS

Огромный проект, где спецификация веб-компонентов используется на полную катушку. ExpandJS это набор из более чем 80 компонентов и более 350 различных функций для работы с ними. И все это доступно как каркас, но так же и в трендовом Material Design стиле.

<!-- Import elements -->
<link rel="import" href="../mat-content.html">
<link rel="import" href="../mat-drawer.html">
<link rel="import" href="../mat-header-panel.html">
<link rel="import" href="../mat-shell.html">

<!-- Application scaffold -->
<mat-shell theme="...">

    <mat-drawer>...</mat-drawer>

    <mat-header-panel>
        <mat-header>...</mat-header>
        <mat-content>...</mat-content>
    </mat-header-panel>

    <mat-drawer right>...</mat-drawer>

</mat-shell>

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Недавно вышла новая версия Matreshka.js.



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

Так гласит документация, но на деле подводные камни присутствуют, особенно учитывая «для новичков» и примеры в документации, которые сбивают с толку.

Метод позволяет определить посещаемые пользователем сайты с помощью запроса иконок сайта со страницы. Идея этого метода пришла мне в голову при обсуждении с другом возможностей аналитики поведения пользователей на его сайте. Мы обсуждали, какие метрики нужно и какие не нужно собирать о его посетителях. Я подумал, что было бы неплохо узнать, какими еще сайтами пользуются его посетителями. В голову тут же пришел старый, но известный способ с CSS-стилями.

Тот способ основывается на использовании метода DOM элемента getComputedStyle. Будучи вызванным у HTMLAnchorElement, он позволяет различать :visited и обычные состояния ссылок на популярные сайты.

Баг давно закрыли и больше им воспользоваться нельзя.

Мой метод основывается на том факте, что favicon.ico посещаемых пользователем сайтов, скорее всего, будут находиться у него в кэше и, соответственно, загрузятся быстрее, чем тех сайтов, на которых он ни разу не был. Браузеры очень агрессивно кэшируют favicon.ico, что лишь увеличивает надежность такого способа.

Ниже приведен полный исходный код proof-of-concept реализации этого способа. С его помощью можно продемонстрировать, что вы посещаете сайт habrahabr.ru, но ни разу не были на сайте hornet.com.

Тема актуальная. Для меня как для корпоративного телефониста лет пять-десять назад всегда была задача настроить функцию ARS на Panasonic TDA100/200/600 или LCR на LG LDK100/300. В общем, сделать так чтобы подешевле звонить было. Но времена меняются, и сейчас у многих компаний используется Asterisk, а я уже не настраиваю УПАТС Panasonic, LG и прочие.

В Астериске, всем известно, вся маршрутизация делается в диалплане. Но если у оператора много направлений и цена на каждое из них различна, то в диалплане получаются портянки на несколько страниц. Решения разные: кто-то разбивает по разным файлам диалплана, использует макросы, кто-то подключает к работе БД, кто-то выносит на отдельный сервис.

Я хочу поделиться своим решением: вынести поиск оператора с наименьшей стоимостью заданного направления в стороннее приложение на node.js, с которым Астериск взаимодействует посредством AGI.

Думаю, многие из вас знают, что сейчас существует обилие различных языков (или инструментов), которые позволяют писать код компилируемый в JavaScript. Это CoffeeScript, Dart, GorillaScript и другие (довольно большой список можно найти здесь). Недавно я решил познакомиться с одним из представителей этого списка — языком программирования под названием TypeScript.

Я расскажу о личном опыте — почему решил попробовать именно его, как начать работать с ним, и какие выводы сделал, поработав с ним несколько дней.

Если вам это интересно — пожалуйста, заходите под кат.

Всем привет! Я Егор Дыдыкин, руководитель группы разработки главной страницы Mail.Ru. В этой статье я расскажу о том, как мы решали задачу по созданию адаптивного портального меню — блока, расположенного в верхней части практически каждой страницы проектов Mail.Ru. Создавать, развивать и модифицировать любые кросспортальные решения (к которым относится и наше адаптивное меню) – это всегда объемная и сложная задача. Трудность работы с такими элементами в том, что они используются на всех проектах портала Mail.Ru — и соответственно, должны учитывать технологическую и продуктовую специфику каждого из них. Необходимо, чтобы портальное меню было технически независимо и могло работать в любой среде — легко встраиваться в каждый из проектов и соответствовать их логике.

Новая версия портального меню понадобилась в результате крупного обновления портальных гайдлайнов, которое произошло в прошлом году. Подробно о том, что и зачем поменялось, можно прочитать на Behance. В рамках обновления нужно было обеспечить стилистическое единство множества разных проектов портала Mail.Ru, а также единый стиль работы на них навигации, визуально и функционально. На каком бы проекте ни находился пользователь, ему должно быть понятно, как по нему перемещаться. Поэтому меню и технически должно быть единым, кросспроектным.



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

А теперь подробнее о том, как мы это сделали.

21 апреля 2015 года команда Cordova (ранее PhoneGap) выпустила версию 5.0 своих инструментов, которые позволяют веб-разработчикам разрабатывать мобильные приложения сразу для нескольких платформ. Новый релиз содержит достаточно много новых улучшений для разработчика, о которых дальше и пойдет речь.

Кроме исправления ошибок, были сделаны следующие улучшения:

• Поддержка подключаемых WebView
• Поддержка CSP
• Сохранение используемых платформ и плагинов в конфигурации проекта
• Использование NPM для хранения плагинов
• Русская документация

WebFonts. История

WebFonts — это технология использования сторонних шрифтов на своей веб-странице. Один из примеров:



Если начинать с истоков, тег font был введен в 1995 году, а уже в 1996-м было написано программное определение на CSS. Начиная с версии CSS 2.0 была введена загрузка и синтез шрифта в браузерах, но тем не менее тогда еще популярный, а ныне старый и неактуальный IE не имел поддержки загрузки шрифтов, что мешало бурному развитию использования шрифтов на своем сайте.

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

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Пятничный пост, посвященный тому как и о чем люди думали несколько (десять? двадцать?) лет назад, касательно веб-разработки.

Картинка для привлечения внимания.
Я тот, кто первым использовал технологии навигации для построения дополненной реальности.
Технологии геолокации известны давно и хорошо документированы во всех языковых частях Интернета, включая русскую. Но, как бы это ни было удивительно, до сих пор никем не применялись толком на практике. Несколько лет назад, всё на том же habrahabr'е я читал о планах использования карт дополненной реальности. Но, насколько я могу видеть, нигде, кроме ingress это, опять же, так и не использовали.
В декабре 2011-го года Воронежская областная детская библиотека создала свой собственный краеведческий ресурс Детям о Воронежском крае и с тех пор систематически наполняла его краткими аннотациями по памятникам, памятным местам и другой информацией о Воронежском крае. Пользователи в любой момент могли получить эту информацию и отсылки к краеведческой литературе, которая имеется в библиотеке.

В посте на своем блоге «gdal_translate и gdalwarp для перепроицирования изображений» описывался процесс получения картинок под разные проекции с помощью утилит GDAL. Полученные изображения я использовал как подложки для карт в примерах проекта dbCartajs. Позже, работая над портированием канвасной версии своего планетария на WebGL, описанной в статье «Звездное небо на WebGL с использованием Three.js» на Хабре, у меня возникла мысль со временем перенести не только глобус, но и плоские на карты на WebGL, используя вместо фона текстуры. То есть для создания карты обойтись только использованием браузера и JavaScript без использования серверных компонентов.

Анимация скролла к месту страницы с момента изобретения почти не подвергалась никаким модификациям, никак не украшалась. Да никому и не надо вроде, и так все работает. Говоришь куда скроллить и за сколько нужно добраться. Всё.

Я решил на анимацию скролла посмотреть под другим углом. Не потому что сейчас с ним что-то не так, а потому что можно и поинтереснее. В результате некоторых наблюдений и всплесков фантазии удалось придумать 3 способа для более интересной анимации. В итоге завернул все в плагин «Scrollport.js» с 3 новыми и 1 классическим режимом. Смотрите демо и проходите под кат.

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

Для статьи я подобрал наиболее полезные дополнения «на все случаи жизни».

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

1. Разберемся, что такое контекстное меню и зачем оно нужно.
2. Реализуем свое контекстное меню, используя JS и CSS.
3. Затронем недостатки и ограничения используемого подхода, чтобы знать, какие проблемы могут нас предостерегать при выкатывании всего этого в продакшн.

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Доброго времени суток, уважаемые хабравчане. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.

Ramjet

Нереально крутой скрипт, который производит морфинг DOM элементов. Выглядит потрясающе! Работает с HTML и SVG элементами, а также с изображениями. Ramjet содержит в себе базовую коллекцию функций анимации и максимально прост в использовании:

<div id='a' style='background-color: red; font-size: 4em; padding: 1em;'>a</div>
<div id='b' style='background-color: blue; font-size: 4em; padding: 1em;'>b</div>

<script src='ramjet.js'></script>
<script>
    // to repeat, run this from the console!
    ramjet.transform( a, b );
</script>

Внимание! Данная статья устарела. Вы можете ознакомиться с более свежими статьями здесь или почитать блог на нашем сайте.

В последнее время мы были заняты работой над большим обновлением VoxImplant, которое должно сделать платформу еще более гибкой и удобной для разработчиков коммуникационных сервисов. Количество новых функций достаточно большое, поэтому будем рассказывать о них по-порядку и начнем с месседжинга и презенса. Так как банальное описание функционала мало кому интересно, то сразу разберем пример создания приложения для внутрикорпоративных коммуникаций с использованием популярного ReactJS и Flux. Это позволяет достаточно оперативно сделать более-менее сложное приложение, ну и заодно показать как использовать VoxImplant при таком подходе. Presence у нас тоже с некоторыми интересными особенностями, про которые мы расскажем более детально и объясним потом зачем это может быть нужно.