Github Flow

По сравнению с git flow всё проще. Создаётся fork, разработка фичи ведётся в отдельной ветке. Потом создаётся pull request (merge request для gitlab), опционально назначаются ответственные за merge, в процессе обсуждений может продолжаться работа в ветке (изменения будут автоматически добавлены к request). После одобрения ветка мёржится в мастер/главную ветку https://guides.github.com/introduction/flow/index.html

Sass-mixin для media query

@mixin media($query) {
	@if $query {
		@media only screen and (#{$query}) { @content; }
	}
}

@mixin media($query) {

@if $query {

@media only screen and (#{$query}) { @content; }

}

Использование:

Скопировать ssh-ключ из-под Windows

Скачать plink — http://www.chiark.greenend.org.uk/~sgtatham/putty/download.html (http://the.earth.li/~sgtatham/putty/latest/x86/plink.exe). Открыть терминал. Перейти в папку C:\Users\имя пользователя\.ssh (там уже должен лежать ssh-ключ). Затем выполнить

type id_rsa.pub | d:\Down\plink.exe -ssh user@host -pw password "cat >> .ssh/authorized_keys"

1	type id_rsa.pub \| d:\Down\plink.exe -ssh user@host -pw password "cat >> .ssh/authorized_keys"

http://serverfault.com/questions/224810/is-there-an-equivalent-to-ssh-copy-id-for-windows https://blog.bullgare.com/2012/08/%d1%87%d1%82%d0%be-%d1%81%d0%b4%d0%b5%d0%bb%d0%b0%d1%82%d1%8c-%d1%87%d1%82%d0%be%d0%b1%d1%8b-%d0%bb%d0%be%d0%b3%d0%b8%d0%bd%d0%b8%d1%82%d1%8c%d1%81%d1%8f-%d0%ba-%d1%83%d0%b4%d0%b0%d0%bb%d1%91%d0%bd/ https://blog.bullgare.com/2013/03/%d0%bf%d1%83%d1%82%d1%8c-%d0%bf%d0%be-%d1%83%d0%bc%d0%be%d0%bb%d1%87%d0%b0%d0%bd%d0%b8%d1%8e-%d0%b4%d0%bb%d1%8f-ssh-%d0%ba%d0%bb%d1%8e%d1%87%d0%b5%d0%b9-%d0%b2-windows/

Внедрение e2e- и unit-тестов в сборку AngularJS-приложения: Protractor, Karma и gulp

Допустим, у нас уже есть сборка проекта на gulp. И нужно добавить в процедуру сборки релиза e2e-тесты на protractor.

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

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

Кастомизация скролла в 21м веке

Стилизация нативного scrollbar в Chrome. Chrome custom scroll

.wrapper {
  width: 300px;
  height: 200px;
  background-color: red;
  overflow-y: auto;
}
.element {
  width: 200px;
  height: 500px;
  background-color: green;
}

::-webkit-scrollbar {
    height: 10px;
    width: 6px;
    background: #fff;
}

::-webkit-scrollbar-thumb {
    background: #616161;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #fff;
}

.wrapper {

width: 300px;

height: 200px;

background-color: red;

overflow-y: auto;

}

.element {

width: 200px;

height: 500px;

background-color: green;

}

::-webkit-scrollbar {

height: 10px;

width: 6px;

background: #fff;

}

::-webkit-scrollbar-thumb {

background: #616161;

-webkit-border-radius: 1ex;

-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);

}

::-webkit-scrollbar-corner {

background: #fff;

}

http://css-tricks.com/examples/WebKitScrollbars/

Настройка nginx для кроссдоменных ajax-запросов

Как разрешить кроссдоменные ajax-запросы в nginx.

       location /geoip {
                add_header Access-Control-Allow-Origin "*";
                add_header Access-Control-Allow-Methods "GET";
                add_header Access-Control-Allow-Methods "OPTIONS";
       }

location /geoip {

add_header Access-Control-Allow-Origin "*";

add_header Access-Control-Allow-Methods "GET";

add_header Access-Control-Allow-Methods "OPTIONS";

}

upstream GEOIP {
        server [];
}
server {
        listen *:80;
        server_name [];

        location /geoip {
                # CORS Headers
                if ($request_method = OPTIONS ) {
                        add_header Access-Control-Allow-Methods "GET";
                        add_header Access-Control-Allow-Origin "*";
                        return 204;
                }
                add_header Access-Control-Allow-Origin "*";

                set $args "format=json&language=ru&ip=$remote_addr";
                proxy_pass http://GEOIP/?$args;
        }
}

upstream GEOIP {

server [];

}

server {

listen *:80;

server_name [];

location /geoip {

# CORS Headers

if ($request_method = OPTIONS ) {

add_header Access-Control-Allow-Methods "GET";

add_header Access-Control-Allow-Origin "*";

return 204;

}

add_header Access-Control-Allow-Origin "*";

set $args "format=json&language=ru&ip=$remote_addr";

proxy_pass http://GEOIP/?$args;

}

Webstorm, Ubuntu 14.04, русская раскладка — фикс сочетаний клавиш

https://github.com/zheludkovm/LinuxJavaFixes Скачать репозиторий, положить 2 jar-файла из директории build в нужное место. Затем в файле ~/Applications/WebStorm-138.2001.2328/bin/webstorm64.vmoptions добавить строку

-javaagent:[path to directory with jar files]/LinuxJavaFixes-1.0.0-SNAPSHOT.jar

1	-javaagent:[path to directory with jar files]/LinuxJavaFixes-1.0.0-SNAPSHOT.jar

Поиск утечек памяти через Google Chrome

На примере Яндекс-почты: http://habrahabr.ru/company/yandex/blog/195198/ Самое интересное:

Современные иконки: favicon, touchicon и т.д.

Вот более-менее полный набор иконок, который нужен сайту:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Для IE11 и Windows 8.1 нужен ещё файл browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/mstile-70x70.png"/> <square150x150logo src="/mstile-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <wide310x150logo src="/mstile-310x150.png"/> <TileColor>#2b5797</TileColor> </tile> </msapplication> </browserconfig>

<?xml version="1.0" encoding="utf-8"?> <browserconfig> <msapplication> <tile> <square70x70logo src="/mstile-70x70.png"/> <square150x150logo src="/mstile-150x150.png"/> <square310x310logo src="/mstile-310x310.png"/> <wide310x150logo src="/mstile-310x150.png"/> <TileColor>#2b5797</TileColor> </tile> </msapplication> </browserconfig>

Более подробно: http://css-tricks.com/favicon-quiz/ Генератор favicon — http://realfavicongenerator.net/