Внедрение 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/

Voronoi algorithm

Использование алгоритма Вороного в javascript. Смотреть с 10 минут. http://youtu.be/90NsjKvz9Ns?t=10m15s Ссылки: http://cgm.cs.mcgill.ca/~mcleish/644/Projects/DerekJohns/Sweep.htm http://philogb.github.io/blog/assets/voronoijs/voronoi.html (http://philogb.github.io/blog/2010/02/12/voronoi-tessellation/) https://code.google.com/p/javascript-voronoi/ https://github.com/mikolalysenko/voronoi-diagram https://ru.wikipedia.org/wiki/%D0%9F%D0%B0%D1%80%D0%B0%D0%B1%D0%BE%D0%BB%D0%B0 (ликбез по параболе) http://habrahabr.ru/post/110790/ http://www.cs.princeton.edu/~edwardz/voronoi/voronoi.html http://www.devforrest.com/examples/voronoi/ http://www.ams.org/samplings/feature-column/fcarc-voronoi https://ru.wikipedia.org/wiki/%D0%97%D0%B0%D0%B4%D0%B0%D1%87%D0%B0_%D0%BF%D0%BE%D0%B8%D1%81%D0%BA%D0%B0_%D0%B1%D0%BB%D0%B8%D0%B6%D0%B0%D0%B9%D1%88%D0%B5%D0%B3%D0%BE_%D1%81%D0%BE%D1%81%D0%B5%D0%B4%D0%B0 http://strongriley.github.io/d3/ex/voronoi.html http://www.raymondhill.net/voronoi/rhill-voronoi-demo3.php

Методики оценки скорости работы команды

На тренинге интересную вещь рассказали про методики оценки производительности. Аллегория с эстафетой. Можно оценивать, насколько сильно вспотела команда; а можно оценивать, насколько быстро эстафетная палочка достигла финиша. Т.е. можно оценивать, как много работали люди, а можно оценивать, как быстро делается работа. К сожалению, очень часто пытаются оценивать именно отработанные часы, а не скорость внедрения фич.

Github: подготовка к pull-request

https://help.github.com/articles/fork-a-repo — как создать fork. Тут всё просто — в дополнение к очевидным вещам нужно добавить ещё один источник:

git remote add upstream https://github.com/octocat/.....

1	git remote add upstream https://github.com/octocat/.....

https://help.github.com/articles/syncing-a-fork — как продолжать обновлять из оригинального репозитория. Тут всё тоже не очень сложно:

git fetch upstream
git checkout master
git merge upstream/master

git fetch upstream

git checkout master

git merge upstream/master

Если ветка уже создана, то

git checkout <ветка>
git rebase master

1 2	git checkout <ветка> git rebase master

Чтобы поменять (если нужно) url до origin:

git remote set-url origin git://new.url.here

1	git remote set-url origin git://new.url.here

https://blog.bullgare.com/2014/04/git-%D0%BF%D0%B5%D1%80%D0%B5%D0%BB%D0%B8%D1%82%D1%8C-%D0%BB%D0%BE%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9-%D1%80%D0%B5%D0%BF%D0%BE%D0%B8%D1%82%D0%BE%D1%80%D0%B8%D0%B9-%D0%B2-%D0%BD%D0%BE%D0%B2/