Google Chrome DevTools Grab bag (Breakpoint Episode 5)
В этом видео рассказывается о новых возможностях консоли Chrome: Тестирование мобильной версии сайта с помощью подмены User Agent, метрик устройства, эмуляции touch-событий и ориентации устройства. Подмена media type, чтобы посмотреть как выглядит версия сайта, к примеру, при выводе на печать. (09:16) CSS Regions (патч от Adobe) (11:11) Подсветка селектора (14:53) Возможность проинспектировать локальную область видимости …
Документация по Grunt
https://github.com/gruntjs/grunt/wiki — wiki проекта.
Особенности отрисовки z-index
Вот тут подробно объясняются нетривиальные вещи — http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ ( What No One Told You About Z-Index — Philip Walton) Самое интересное — заданием opacity=.99 можно фактически сбросить z-index у всех вложенных элементов. И еще один интересней факт, которого в статье нет: вложенный элемент не может иметь z-index больше родительского. UP: вот на русском — http://habrahabr.ru/post/166435/
CSS3 для реализации табов, аккордеона и тогглера без javascript
Табы JS Bin Методика — скрытые инпуты и следующий css: .tab-switcher input[type=radio]:checked ~ .tab-content { z-index: 10; opacity: 1; background: #888; color: white; } .tab-switcher input[type=radio]:checked ~ label { background: #888; color: white; } ~ позволяет обращаться к элементам-«братьям».
Grunt: Перезагрузить окно браузера при изменении файла
Вот способ для Mac OS и safari — http://www.2ality.com/2012/08/jsreload.html. P.S.: надо реализовать свой велосипед для Хрома и фаерфокса. Вот пакет для перезагрузки нужного таба в Chrome для android — https://github.com/brianleroux/chrome-for-android-remote-debugging, работа протокола описана здесь — https://developers.google.com/chrome-developer-tools/docs/remote-debugging, http://developer.chrome.com/trunk/extensions/debugger.html
Оптимизация трафика клиент-сервер на примере WebSocket
С использованием node.js http://buildnewgames.com/optimizing-websockets-bandwidth/
Автоматическая компиляция спрайтов средствами Compass
http://www.codechewing.com/library/automatically-generate-css-sprites-with-sass/
requestAnimationFrame для оптимизации анимации в браузере
Это замена обычной покадровой отрисовки по setTimeout. Пример: (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; window.requestAnimationFrame = requestAnimationFrame; })(); var start = window.mozAnimationStartTime; // Only supported in FF. Other browsers can use something like Date.now(). function step(timestamp) { var progress = timestamp — start; d.style.left = Math.min(progress/10, 200) + «px»; …
Magna Charta
Библиотечка для рисования диаграмм (чартов) на jQuery. https://github.com/alphagov/magna-charta. Примеры — http://alphagov.github.com/magna-charta/
Синхронизация контактов телефона
Долго и муторно пытался найти приложение для синхронизации контактов телефона (он у меня старый, поддерживает только java-приложения). Нашёл только web-сервис https://www.phonecopy.com/ru/. Работает достаточно быстро, нареканий никаких. Потом можно скачать контакты в csv.