Category Archives: Mobile

Debugging site in chrome from android device

Download platform tools from here — https://developer.android.com/studio/releases/platform-tools.html. Run ADB with command

./adb start-server
# when you finished, stop it with
# ./adb kill-server

./adb start-server

# when you finished, stop it with

# ./adb kill-server

Configure your phone according to this article — https://developer.android.com/studio/debug/dev-options.html (for my specific it is https://www.syncios.com/android/how-to-debug-xiaomi-mi-max-mix.html). Connect your phone to the computer with USB cable. Follow instructions from here — https://developers.google.com/web/tools/chrome-devtools/remote-debugging. When finished, stop ADB and turn off all the developer features on your …

Доступ к локальному серверу из внешней сети

https://github.com/localtunnel/localtunnel Пример использования

lt --port 80 --local-host "my.cool_local_host"

1	lt --port 80 --local-host "my.cool_local_host"

Полезно использовать, если, к примеру, нужно протестировать сайт в Opera Mini или в Google Page Speed.

Вёрстка писем

Всё время радуюсь, что я не верстаю письма. Видимо, надо делать свой фреймворк для этого. Пара ссылок для начала. http://m.habrahabr.ru/company/pechkin/blog/262585/ http://m.habrahabr.ru/post/262427/ http://m.habrahabr.ru/company/pechkin/blog/263699/

Реализация определения размера устройства в AngularJS

Идея описана здесь — https://blog.bullgare.com/2013/12/%D0%BE%D0%BF%D1%80%D0%B5%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D1%82%D0%B8%D0%BF%D0%B0-%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0-%D0%B2-js-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-media/. Т.е. через media-queries задавать параметры, которые определят размеры устройства, по этим параметрам менять z-index. Затем создать в js-файле такой элемент скрытым и считывать его z-index в любой момент. Особенно это удобно делать в css-препроцессорах, чтобы параметризовать параметры media-queries. Тогда изменения внешнего вида сайта через css будут происходить одновременно с изменением …

Кратко про создание мобильных приложений из single page application

http://bunsch.pl/2014/09/21/buiding-offline-mobile-html5-apps/

Chrome Fullscreen API

Всё сводится к вызову:

function launchIntoFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

function launchIntoFullscreen(element) {

if(element.requestFullscreen) {

element.requestFullscreen();

} else if(element.mozRequestFullScreen) {

element.mozRequestFullScreen();

} else if(element.webkitRequestFullscreen) {

element.webkitRequestFullscreen();

} else if(element.msRequestFullscreen) {

element.msRequestFullscreen();

}

Но при этом есть нюанс использования: включить полноэкранный режим можно только в ответ на действие пользователя. http://davidwalsh.name/fullscreen http://stackoverflow.com/questions/7836204/chrome-fullscreen-api

Поддержка стилей разными почтовыми программами

https://www.campaignmonitor.com/css/

Анимированные иконки

http://codepen.io/bennettfeely/details/twbyA

Определение типа устройства в js через media query

Заинтриговал? Достаточно делать разные z-index через media query. Потом создать невидимый элемент и смотреть, какой z-index у него. http://davidwalsh.name/device-state-detection-css-media-queries-javascript

Инструмент для генерации шаблонов с flexbox

http://the-echoplex.net/flexyboxes/