Разрабатывая браузерное приложение (CRM) столкнулся с необходимостью использования объекта истории браузера. Дело в том, что основная масса навигационных переходов внутри CRM осуществляется посредством выполнения Ajax-запросов , как следствие записей в истории не ведется, и если пользователь войдет к примеру в карточку объекта, то нажав "назад" ничего не произойдет. Чтобы устранить это недоразумение, мы и будем использовать объект истории браузера. Итак, работа с историей базируется нет, не на трех)) на двух китах: eventListener "onpopstate" и методе window.history.pushstate(), который принимает в себя три параметра: Объект , который может быть JavaScript-сущностью, Заголовок вкладки браузера и URL окна. Обратите внимание, что при изменении текущей записи истории перехода по указанному URL не произойдет, он будет проставлен в адресную строку, не более. При этом, поскольку браузер не открывает URL, он может привести на несуществующую страницу, и это на совести р

Оказывается в Атоме это сделать совсем нетрудно, а эффект получается очень даже зачетный). Для этого достаточно в стили (меню atom->Stylesheets) добавить следующую строку: .cursor, atom-text-editor::shadow .cursor { transition: 150ms; } Можно добавить небольшой Bounce-эффект за счет использования функции cubic-bezier , тогда год будет выглядеть так: .cursor, atom-text-editor::shadow .cursor { transition: 150ms cubic-bezier(.31,.16,.12,1.24); } (UPDATED) Не так давно Atom начал выдавать уведомление об устаревшем селекторе .cursor, atom-text-editor::shadow .cursor. Для того, чтобы можно было дальше продолжить использовать анимированный курсор необходимо заменить данный селектор на .cursor, atom-text-editor.editor .cursor

Не могу пройти мимо такого интересного сервиса, как Fontello . В одном из своих постов я рассказывал за символьный шрифт FontAwesome , содержащий множество символов. Но тут я наткнулся на сервис Fontello. FontAwesome содержит множество символов (2 481, если быть совсем точным), но здесь вчерашнее преимущество оборачивается неприятностями. Во-первых, все эти 2 481 символов нужно загрузить. Во-вторых, может случится, что нужного символа таки не окажется в наборе FontAwesome, а окажется в другом наборе. Подключать еще один символьный шрифт? И вот тут приходит на выручку Fontello. Это генератор символьных шрифтов, который позволяет создать новый шрифт на основе нескольких символьных шрифтов (Fontelico, FontAwesome, Entypo, Typico, Iconic, Modern Pictograms, Meteoicons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons, Web Symbols), в который Вы можете включить только те иконки, которые Вам действительно нужны. На выходе вы получаете архив со всеми стилями, файлом шрифта в неск

Порой мы сталкиваемся с ситуацией, когда нужно протестировать мобильную версию сайта на реальном девайсе ввиду специфики мобильного браузера Android/iOS. Но до публикации сайта в Сети это сделать было практически невозможно. Сразу скажу, что речь идет не о тестировании прототипа в Adobe® DeviceReady™, а о реальном html-коде. Впрочем, инструмент, который мы будем рассматривать сегодня позволяет тестировать как локальный сайт (сайт, не опубликованный в сети, а существующий только на конкретном компьютере разработчика), так и сайт уже выложенный в сеть. Опять же – программа является платной, однако стоимость её относительно невелика - $50. Итак, представляю Вашему вниманию GhostLab . Программа создает на компьютере локальный HTTP-сервер, доступный в сети Wi-Fi, с которым и соединяются реальные смартфоны и/или планшеты. Можно просматривать на нескольких устройствах одновременно. Консоль, унаследованная от Google® Chrome™ позволяет вести отладку javascript, запущенный на конкрет

И снова здравствуйте! Порой при разработке 3D модели возникает вопрос – а как показать ее заказчику? Рендер не совсем подходит, так как позволяет посмотреть только статичную картинку с одним ракурсом. Вместе с тем, а как быть, если заказчик хочет «покрутить» модель? Вот тут и приходит на помощь сервис P3D . Этот сервис позволяет загрузить в облако модель в формате OBJ+MTL, и в дальнейшем, с помощью технологии WebGL ее можно посмотреть даже на мобильнике. Взгляните сами – эту модель (представлена ранняя её версия) я загрузил на p3d и внедрил на эту страницу в виде IFRAME Базовый функционал предоставляется на бесплатной основе, дополнительные опции (отключение брендирования, регулировка контролов и т.п. обойдатся в столько, сколько Вы выберите сами – больше функционала, больше цена. Подробнее ). К сожалению, как и множество других качественных ресурсов, сайт англоязычный, так что определенные навыки английского разумеется потребуются, но оно того стоит! Пользуйтесь на здоровье!

Доброе время суток, дорогие читатели! Прежде всего приношу извинения за длительное отсутствие – много всего произошло в этот период моей жизни – переезд в другой город, беготня по инстанциям, и иже с ними, опять же – Новогодние праздники)). Но не будем отвлекаться от темы. Итак – ситуация: нам нужно встроить карту на сайт, но нам хочется сделать так, чтобы карта была в тон цветовой гамме сайта. Базовый функционал Google Maps API не позволяет этого. Что делать? Представляю Вашему вниманию Snazzy Maps . Этот инструмент позволяет стилизовать все – цвет карт, расположение и наличие элементов управления, цвет/наличие подписей, элементы навигации, поведения (масштабирование, панорамирование, и т.д.), и так далее. Что следует отметить отдельно, что при сохранении карты с Вас попросят ключ API, предоставляемый Google. Ключ предоставляется Google на бесплатной основе с условием, если количество просмотров в день не превышает 25 000. Если превышает, нужно смотреть тарифные планы. Само с