-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
112 lines (112 loc) · 50.2 KB
/
index.html
File metadata and controls
112 lines (112 loc) · 50.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Saint-P, Summer, Front-end. Two-day, single track, English-speaking front-end conference in St. Petersburg, Russia on June 8–9th, 2018."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="@pitercss_conf"><meta name="twitter:url" property="og:url" content="https://pitercss.com/"><meta name="twitter:title" property="og:title" content="pitercss_conf"><meta name="twitter:description" property="og:description" content="Saint-P, Summer, Front-end. June 8–9th, 2018."><meta name="twitter:image" property="og:image" content="https://pitercss.com/social.jpg"><meta property="og:type" content="website"><meta property="og:site_name" content="pitercss_conf"><link rel="preload" href="fonts/gotham-pro.woff2" as="font" type="font/woff2"><link rel="preload" href="fonts/gotham-pro-bold.woff2" as="font" type="font/woff2"><link rel="icon" href="favicon.ico"><link rel="icon" type="image/png" sizes="228x228" href="apple-touch-icon.png"><link rel="stylesheet" href="css/style.css"><title>pitercss_conf, June 8–9th, 2018</title></head><body><svg style="display: none"><symbol viewBox="0 0 130 30" id="icon-yandex"><path d="M10.599 4.145H8.987c-.496 0-.976.103-1.441.31-.466.207-.879.537-1.24.992-.362.455-.651 1.038-.869 1.752-.217.713-.325 1.565-.325 2.557 0 .971.119 1.793.356 2.465.238.671.553 1.224.946 1.658.393.434.837.75 1.333.946a4.174 4.174 0 0 0 1.55.294h1.302V4.145zM4.399 26H1.578L6.6 16.731c-1.467-.703-2.516-1.638-3.147-2.806-.63-1.167-.945-2.557-.945-4.169 0-1.24.176-2.335.527-3.286.351-.95.827-1.751 1.426-2.402a5.89 5.89 0 0 1 2.092-1.473 6.518 6.518 0 0 1 2.527-.496h3.968V26h-2.449v-8.866H8.987L4.399 26zm39.587-14.415a1.33 1.33 0 0 0-.93.372c-.269.248-.496.594-.682 1.038-.186.445-.33.967-.434 1.566-.103.6-.176 1.25-.217 1.953h4.092v-.341c0-.103-.005-.217-.016-.341a4.87 4.87 0 0 1-.015-.403c-.083-1.22-.279-2.165-.589-2.836-.31-.672-.713-1.008-1.209-1.008zm19.344 6.448c0 1.88.29 3.358.868 4.433.579 1.075 1.467 1.612 2.666 1.612.455 0 .92-.067 1.395-.201a9.71 9.71 0 0 0 1.147-.388l.248 1.767a9.14 9.14 0 0 1-1.596.76c-.59.217-1.256.325-2 .325-1.591 0-2.878-.661-3.86-1.984-.981-1.323-1.472-3.224-1.472-5.704 0-1.364.14-2.604.418-3.72.28-1.116.657-2.067 1.132-2.852.475-.785 1.044-1.395 1.705-1.829a3.825 3.825 0 0 1 2.139-.651c.682 0 1.297.093 1.844.279a5.63 5.63 0 0 1 1.473.744l-1.271 2.139c-.29-.33-.615-.61-.977-.837-.361-.227-.728-.341-1.1-.341-.434 0-.827.186-1.178.558-.351.372-.64.858-.868 1.457-.227.6-.403 1.286-.527 2.061a14.987 14.987 0 0 0-.186 2.372zm-29.45-6.045h-2.325v.31c0 .971-.031 2-.093 3.085a32.1 32.1 0 0 1-.341 3.192 24.449 24.449 0 0 1-.651 2.961c-.269.93-.61 1.736-1.023 2.418h4.433V11.988zm26.257 13.981h-2.759l-3.813-7.874-.279-.341v8.215h-2.48V10.004h2.48v7.254l.279-.31 3.379-6.944h2.635l-3.906 7.192 4.464 8.773zM24.89 10.004v15.965h-2.449v-7.626h-3.658v7.626h-2.48V10.004h2.48v6.293h3.658v-6.293h2.449zm23.405 15.252c-.517.29-1.09.542-1.72.76-.63.217-1.339.325-2.124.325-1.612 0-2.904-.672-3.875-2.015-.971-1.343-1.457-3.234-1.457-5.673 0-1.178.098-2.31.294-3.395.197-1.085.496-2.045.9-2.882.403-.838.914-1.51 1.534-2.015.62-.507 1.364-.76 2.232-.76 1.281 0 2.315.64 3.1 1.922.785 1.281 1.178 3.172 1.178 5.673v1.364h-6.665c0 1.736.294 3.09.884 4.061.589.971 1.513 1.457 2.774 1.457.475 0 .966-.067 1.473-.201a9.046 9.046 0 0 0 1.193-.388l.279 1.767zM37.569 29.1h-2.201v-3.131h-6.851V29.1h-2.201v-5.146h.961a13.7 13.7 0 0 0 1.163-3.007c.279-1.075.49-2.16.635-3.255.145-1.095.232-2.18.264-3.255.03-1.075.046-2.098.046-3.069v-1.364h6.944v13.95h1.24V29.1zm41.23-14.477V26h-1.488V4.455h1.488v10.044l6.479-10.044h1.426l-6.386 9.92L87.262 26h-1.674l-6.789-11.377zm13.423 10.571c.723 0 1.338-.3 1.845-.899.506-.6.904-1.323 1.193-2.17v-4.433h-1.674c-1.302 0-2.273.315-2.914.946-.64.63-.961 1.637-.961 3.022 0 1.116.227 1.984.682 2.604.455.62 1.064.93 1.829.93zm3.472.806c-.062-.207-.13-.47-.201-.79-.073-.32-.13-.76-.171-1.318-.372.744-.837 1.333-1.395 1.767-.558.434-1.23.651-2.015.651-1.054 0-1.912-.398-2.573-1.193-.661-.796-.992-1.907-.992-3.333 0-1.674.444-2.94 1.333-3.797.889-.858 2.18-1.287 3.875-1.287h1.705v-1.953c0-1.22-.217-2.103-.651-2.65-.434-.548-1.085-.822-1.953-.822-.661 0-1.281.15-1.86.45a3.88 3.88 0 0 0-1.426 1.255l-.403-1.333c.31-.413.78-.78 1.41-1.1.63-.32 1.39-.481 2.279-.481 1.281 0 2.263.367 2.945 1.1.682.734 1.023 1.876 1.023 3.426v8.525c0 .537.031 1.08.093 1.628.062.547.145.966.248 1.255h-1.271zm8.773-.899c.517 0 .966-.083 1.348-.248.383-.165.708-.362.977-.589.31-.227.568-.506.775-.837l.465 1.147a3.99 3.99 0 0 1-.899.868c-.29.227-.661.429-1.116.605-.455.175-.982.263-1.581.263-1.57 0-2.785-.708-3.643-2.123-.857-1.416-1.286-3.405-1.286-5.968 0-2.583.424-4.588 1.271-6.014.847-1.426 2.077-2.139 3.689-2.139.827 0 1.514.14 2.062.418.547.28.997.626 1.348 1.039l-.403 1.488a5.718 5.718 0 0 0-1.255-1.24c-.486-.351-1.07-.527-1.752-.527-1.22 0-2.118.604-2.697 1.813-.579 1.21-.868 2.93-.868 5.162 0 2.19.284 3.885.852 5.084.569 1.199 1.473 1.798 2.713 1.798zm10.137 0c.517 0 .966-.083 1.348-.248.383-.165.708-.362.977-.589.31-.227.568-.506.775-.837l.465 1.147a3.99 3.99 0 0 1-.899.868c-.29.227-.661.429-1.116.605-.455.175-.982.263-1.581.263-1.57 0-2.785-.708-3.642-2.123-.858-1.416-1.287-3.405-1.287-5.968 0-2.583.424-4.588 1.271-6.014.847-1.426 2.077-2.139 3.689-2.139.827 0 1.514.14 2.062.418.547.28.997.626 1.348 1.039l-.403 1.488a5.718 5.718 0 0 0-1.255-1.24c-.486-.351-1.07-.527-1.752-.527-1.22 0-2.118.604-2.697 1.813-.579 1.21-.868 2.93-.868 5.162 0 2.19.284 3.885.853 5.084.568 1.199 1.472 1.798 2.712 1.798zm8.99.093c.723 0 1.338-.3 1.845-.899.506-.6.904-1.323 1.193-2.17v-4.433h-1.674c-1.302 0-2.273.315-2.914.946-.64.63-.961 1.637-.961 3.022 0 1.116.227 1.984.682 2.604.455.62 1.064.93 1.829.93zm3.472.806c-.062-.207-.13-.47-.202-.79a9.467 9.467 0 0 1-.17-1.318c-.372.744-.837 1.333-1.395 1.767-.558.434-1.23.651-2.015.651-1.054 0-1.912-.398-2.573-1.193-.661-.796-.992-1.907-.992-3.333 0-1.674.444-2.94 1.333-3.797.889-.858 2.18-1.287 3.875-1.287h1.705v-1.953c0-1.22-.217-2.103-.651-2.65-.434-.548-1.085-.822-1.953-.822-.661 0-1.281.15-1.86.45a3.88 3.88 0 0 0-1.426 1.255l-.403-1.333c.31-.413.78-.78 1.41-1.1.63-.32 1.39-.481 2.279-.481 1.281 0 2.263.367 2.945 1.1.682.734 1.023 1.876 1.023 3.426v8.525c0 .537.031 1.08.093 1.628.062.547.145.966.248 1.255h-1.271z"/></symbol><symbol viewBox="0 0 290 90" id="icon-paypal"><path d="M194.383 4.158h-22.12a3.078 3.078 0 0 0-3.034 2.61l-8.945 57.053a1.851 1.851 0 0 0 1.821 2.144h11.35c1.057 0 1.96-.774 2.124-1.827l2.537-16.174a3.079 3.079 0 0 1 3.035-2.61h7c14.568 0 22.976-7.093 25.174-21.15.989-6.148.04-10.979-2.822-14.36-3.146-3.72-8.72-5.686-16.12-5.686zm2.552 20.837c-1.208 7.987-7.271 7.987-13.137 7.987h-3.336l2.34-14.912a1.848 1.848 0 0 1 1.82-1.566h1.53c3.993 0 7.764 0 9.708 2.288 1.164 1.37 1.515 3.4 1.075 6.203zM36.627 4.158H14.509a3.08 3.08 0 0 0-3.036 2.61L2.528 63.821a1.852 1.852 0 0 0 1.822 2.144h10.561a3.08 3.08 0 0 0 3.036-2.609l2.414-15.392a3.078 3.078 0 0 1 3.035-2.61h7c14.568 0 22.976-7.093 25.174-21.15.99-6.148.04-10.979-2.821-14.36-3.147-3.72-8.723-5.686-16.122-5.686zm2.553 20.837c-1.21 7.987-7.273 7.987-13.137 7.987h-3.337l2.34-14.912a1.847 1.847 0 0 1 1.821-1.566h1.53c3.992 0 7.764 0 9.707 2.288 1.163 1.37 1.515 3.4 1.076 6.203zM102.736 24.74h-10.59c-.908 0-1.68.664-1.822 1.566l-.465 2.98-.74-1.08c-2.295-3.349-7.407-4.468-12.511-4.468-11.7 0-21.697 8.92-23.642 21.43-1.013 6.241.424 12.206 3.942 16.37 3.232 3.824 7.844 5.416 13.34 5.416 9.43 0 14.662-6.096 14.662-6.096l-.473 2.962a1.85 1.85 0 0 0 1.821 2.145h9.538a3.078 3.078 0 0 0 3.035-2.608l5.726-36.473a1.85 1.85 0 0 0-1.821-2.144zm-14.76 20.738c-1.023 6.087-5.827 10.174-11.955 10.174-3.072 0-5.53-.994-7.111-2.876-1.567-1.865-2.157-4.523-1.66-7.483.954-6.033 5.836-10.252 11.87-10.252 3.007 0 5.45 1.003 7.06 2.903 1.623 1.913 2.26 4.588 1.796 7.534zM260.492 24.74h-10.59c-.908 0-1.68.664-1.821 1.566l-.467 2.98-.74-1.08c-2.295-3.349-7.406-4.468-12.51-4.468-11.702 0-21.697 8.92-23.642 21.43-1.013 6.241.425 12.206 3.943 16.37 3.231 3.824 7.844 5.416 13.34 5.416 9.43 0 14.662-6.096 14.662-6.096l-.473 2.962a1.85 1.85 0 0 0 1.82 2.145h9.539a3.078 3.078 0 0 0 3.035-2.608l5.726-36.473a1.851 1.851 0 0 0-1.822-2.144zm-14.76 20.738c-1.022 6.087-5.826 10.174-11.953 10.174-3.073 0-5.531-.994-7.113-2.876-1.565-1.865-2.156-4.523-1.659-7.483.954-6.033 5.834-10.252 11.868-10.252 3.007 0 5.45 1.003 7.062 2.903 1.622 1.913 2.259 4.588 1.796 7.534zM159.146 24.74H148.5c-1.018 0-1.97.51-2.543 1.356l-14.684 21.756-6.224-20.907a3.077 3.077 0 0 0-2.944-2.206h-10.464c-1.264 0-2.152 1.25-1.746 2.454l11.722 34.612-11.025 15.648c-.866 1.23.008 2.928 1.505 2.928h10.635a3.067 3.067 0 0 0 2.526-1.33l35.403-51.4c.847-1.229-.028-2.91-1.515-2.91zM272.976 5.725l-9.079 58.097a1.851 1.851 0 0 0 1.821 2.143h9.131a3.08 3.08 0 0 0 3.036-2.609l8.95-57.053a1.85 1.85 0 0 0-1.82-2.144h-10.217a1.846 1.846 0 0 0-1.822 1.566z"/></symbol><symbol viewBox="0 0 28 23" id="icon-twitter"><path d="M28 2.72c-1.026.46-2.137.78-3.298.919A5.84 5.84 0 0 0 27.23.422a11.37 11.37 0 0 1-3.657 1.41A5.704 5.704 0 0 0 19.386 0c-3.17 0-5.741 2.601-5.741 5.806 0 .458.052.898.146 1.323C9.014 6.886 4.786 4.58 1.95 1.062a5.814 5.814 0 0 0-.779 2.922 5.815 5.815 0 0 0 2.555 4.828 5.609 5.609 0 0 1-2.596-.725v.07c0 2.817 1.981 5.166 4.604 5.703a5.865 5.865 0 0 1-2.596.095c.735 2.307 2.852 3.982 5.365 4.035a11.462 11.462 0 0 1-7.135 2.48c-.461 0-.914-.027-1.367-.078A16.125 16.125 0 0 0 8.808 23c10.56 0 16.338-8.848 16.338-16.519l-.018-.752A11.642 11.642 0 0 0 28 2.721z"/></symbol><symbol viewBox="0 0 31 17" id="icon-vkontakte"><path d="M15.174 16.927h1.854s.558-.057.843-.354c.262-.274.25-.787.25-.787s-.036-2.385 1.116-2.74c1.141-.342 2.602 2.306 4.147 3.333 1.176.776 2.055.605 2.055.605l4.146-.057s2.162-.126 1.14-1.769c-.082-.137-.593-1.21-3.076-3.424-2.602-2.316-2.246-1.94.879-5.945 1.9-2.443 2.661-3.926 2.423-4.565-.225-.605-1.627-.445-1.627-.445L24.667.8s-.345-.045-.606.103c-.25.148-.416.48-.416.48s-.737 1.882-1.723 3.492c-2.079 3.389-2.91 3.56-3.243 3.355-.784-.491-.594-1.963-.594-3.024 0-3.287.523-4.645-1.01-4.999-.51-.114-.879-.194-2.174-.205-1.663-.012-3.077 0-3.873.376-.534.251-.938.81-.689.833.309.034 1.01.183 1.378.662.475.628.464 2.032.464 2.032s.273 3.868-.642 4.348c-.63.33-1.485-.343-3.338-3.413-.95-1.575-1.664-3.31-1.664-3.31s-.142-.319-.38-.501C5.86.824 5.444.756 5.444.756L1.013.779S.348.8.098 1.075c-.214.251-.012.754-.012.754s3.47 7.794 7.402 11.72c3.6 3.618 7.686 3.378 7.686 3.378z"/></symbol><symbol viewBox="0 0 14 26" id="icon-facebook"><path d="M9.078 26V14.137h4.128l.622-4.623H9.091v-2.95c0-1.341.383-2.248 2.368-2.248H14V.18A37.041 37.041 0 0 0 10.308 0C6.656 0 4.142 2.158 4.142 6.104v3.41H0v4.623h4.142V26h4.936z"/></symbol><symbol viewBox="0 0 26 26" id="icon-instagram"><path d="M18.04 0H7.692C3.493 0 .072 3.459.072 7.703v10.46c0 4.245 3.421 7.704 7.62 7.704H18.04c4.2 0 7.62-3.459 7.62-7.703V7.704C25.66 3.458 22.24 0 18.04 0zm5.049 18.164c0 2.817-2.261 5.103-5.049 5.103H7.692c-2.787 0-5.048-2.286-5.048-5.103V7.704c0-2.818 2.26-5.104 5.048-5.104H18.04c2.788 0 5.049 2.286 5.049 5.103v10.46z"/><path d="M12.86 6.24c-3.648 0-6.615 3-6.615 6.687 0 3.689 2.967 6.688 6.615 6.688 3.65 0 6.616-3 6.616-6.688 0-3.688-2.967-6.687-6.616-6.687zm0 10.787c-2.237 0-4.043-1.826-4.043-4.087 0-2.262 1.806-4.088 4.043-4.088s4.044 1.826 4.044 4.088c0 2.26-1.807 4.087-4.044 4.087zm6.628-9.118A1.6 1.6 0 0 1 17.897 6.3a1.6 1.6 0 0 1 1.59-1.608c.886 0 1.592.714 1.592 1.608a1.6 1.6 0 0 1-1.591 1.609z"/></symbol></svg><div class="header-wrapper header-wrapper--main"><header class="header header--main"><div class="header__container"><div class="header__logo-container"><img src="images/logo-header.svg" alt="pitercss_conf" width="132" height="28"></div><time class="header__time" datetime="2018-06-08 10:00">June 8–9th, 2018</time><div class="header__place"><a class="header__place-link" href="https://sredaproject.com/en"><span class="header__place-city">St. Petersburg</span>
Sreda Project<br>Sadovaya 17
</a></div></div><div class="header__mobile-place"><a class="header__mobile-place-link" href="https://sredaproject.com/en">St. Petersburg, Sreda Project, Sadovaya 17</a></div><nav class="header__nav"><ul class="header__menu-list"><li class="header__menu-item"><a class="header__menu-link" href="index.html#schedule">Schedule</a></li><li class="header__menu-item"><a class="header__menu-link" href="community">Сommunity tickets</a></li><li class="header__menu-item"><a class="header__menu-link" href="code-of-conduct">Code of conduct</a></li></ul></nav></header></div><main class="content"><section class="summary"><div class="summary__inner"><div class="summary__container"><time class="summary__date" datetime="2018-06-08 10:00">8–9/6</time><h1 class="summary__heading">The First International Front-end Conference in Russia</h1></div><p class="summary__stats"><span class="summary__stats-item">
2
<span class="summary__stats-unit">days</span></span><span class="summary__stats-item">
16
<span class="summary__stats-unit">speakers</span></span><span class="summary__stats-item">
500
<span class="summary__stats-unit">participants</span></span></p></div></section><section class="section section--mission"><h2 class="section__heading">We Unite</h2><span class="section__subheading">Russian and Worldwide Communities</span><p class="section__paragraph">Your chance to participate in a European conference without leaving the country.</p></section><section class="section section--schedule" id="schedule"><h2 class="section__heading">Schedule</h2><section class="host" style="margin-bottom: 60px"><div class="host__container"><div class="host__heading"><div class="host__caption">Host</div><h4 class="host__name">Vitaly Friedman
<span class="host__company">Smashing Magazine</span></h4></div><div class="host__photo"><img src="images/speakers/host@1x.png" srcset="images/speakers/host@2x.png 2x" alt="Vitaly Friedman"></div></div></section><time class="section__day" datetime="2018-06-08 10:00">
Day 1st
<sup class="section__date">June 8th</sup></time><div class="section__container"><div class="recreation"><time class="recreation__time" datetime="2018-06-08 10:00">10:00</time><h3 class="recreation__heading">Doors open</h3></div><div class="recreation"><time class="recreation__time" datetime="2018-06-08 11:00">11:00</time><h3 class="recreation__heading">Opening ceremony</h3></div><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-08 11:20">11:20</time><div class="session__container"><div class="session__speaker">
Björn Ganslandt
<span class="session__company">Intuio</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/bjorn-ganslandt@1x.jpg, /images/speakers/bjorn-ganslandt@2x.jpg 2x"><img src="images/speakers/bjorn-ganslandt@0.5x.jpg" srcset="images/speakers/bjorn-ganslandt@1x.jpg 2x" alt="Björn Ganslandt"></picture></div><h3 class="session__topic">
Space Jam! Writing HTML Like It’s 1996
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
As web developers we spend a good amount of time learning the latest techniques and features. So much that we sometimes forget the web’s history extends beyond IE11. So let’s use those shiny dev tools of ours for a bit of web archeology for a change and explore Space Jam, a website that has been largely unchanged since 1996. Shortly before CSS became a W3C recommendation that year, Warner Brothers released a movie featuring Michael Jordan, Bill Murray and Bugs Bunny taking on a group of aliens in an epic basketball match. A movie accompanied by a website. Exploring its source we’ll see concepts that endured, were discarded and ones that are just about to reemerge 20 years later. Join me in a celebration of animated gifs, backward compatibility and the open web.
<a href="https://twitter.com/ansimorph">@ansimorph</a></p></div></section><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-08 12:00">12:00</time><div class="session__container"><div class="session__speaker">
Brenda Storer
<span class="session__company">Thoughtbot</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/brenda-storer@1x.jpg, /images/speakers/brenda-storer@2x.jpg 2x"><img src="images/speakers/brenda-storer@0.5x.jpg" srcset="images/speakers/brenda-storer@1x.jpg 2x" alt="Brenda Storer"></picture></div><h3 class="session__topic">
You Might Not Need Media Queries: How to use CSS Grid Today
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
The new CSS Grid specification is here! Sure, it’s fun to play with, but is it truly ready or even practical to use for everyday work? As a designer and front end developer at a software development agency, I’ve been using CSS Grid in production for websites since its initial release to browsers in March 2017 and I’m a big fan. In this talk, I’ll share live examples and step by step how you can progressively enhance your site with CSS Grid and write a bulletproof fallback for older browsers (or even continue to use your current grid framework as a fallback), all with pure CSS, no JavaScript required!
<a href="https://twitter.com/brendamarienyc">@brendamarienyc</a></p></div></section><div class="recreation"><time class="recreation__time" datetime="2018-06-08 12:40">12:40</time><h3 class="recreation__heading">Break</h3></div><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-08 13:00">13:00</time><div class="session__container"><div class="session__speaker">
Oliver Schöndorfer
<span class="session__company">86/60</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/oliver-schondorfer@1x.jpg, /images/speakers/oliver-schondorfer@2x.jpg 2x"><img src="images/speakers/oliver-schondorfer@0.5x.jpg" srcset="images/speakers/oliver-schondorfer@1x.jpg 2x" alt="Oliver Schöndorfer"></picture></div><h3 class="session__topic">
You Can Save Web Typography
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
The web is written language — and it’s also a mess, because most sites don’t present text properly. Typography to the rescue! In this talk you will learn how to boost your next web project with good typography. Several examples and live demos will give you a basic understanding of type and how to apply it with CSS in responsive web design. It’s a talk for developers, designers and everyone in between. Together we can save the web’s typography — one paragraph at a time.
<a href="https://twitter.com/glyphe">@glyphe</a></p></div></section><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-08 13:40">13:40</time><div class="session__container"><div class="session__speaker">
Anna Migas
<span class="session__company">Lunar Logic</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/anna-migas@1x.jpg, /images/speakers/anna-migas@2x.jpg 2x"><img src="images/speakers/anna-migas@0.5x.jpg" srcset="images/speakers/anna-migas@1x.jpg 2x" alt="Anna Migas"></picture></div><h3 class="session__topic">
Fast But Not Furious: Debugging User Interaction Performance Issues
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
Perceived performance is not only about fast page loads and delivering the content as early as possible. It is also about all the interactions happening on an already loaded page. Understanding what happens under the browser’s hood can help you avoid potential performance issues.
<a href="https://twitter.com/szynszyliszys">@szynszyliszys</a></p></div></section><div class="recreation"><time class="recreation__time" datetime="2018-06-08 14:20">14:20</time><h3 class="recreation__heading">Lunch</h3></div><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-08 15:20">15:20</time><div class="session__container"><div class="session__speaker">
Mathieu Henri
<span class="session__company">Microsoft</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/mathieu-henri@1x.jpg, /images/speakers/mathieu-henri@2x.jpg 2x"><img src="images/speakers/mathieu-henri@0.5x.jpg" srcset="images/speakers/mathieu-henri@1x.jpg 2x" alt="Mathieu Henri"></picture></div><h3 class="session__topic">
Ready, Set, Go! Live Coding an Action Game from Scratch
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
Action games like Lunar Lander or Geometry Wars are super addictive. It turns out they are also really fun to write. What better way to learn a few tricks of the web platform than to livecode an action game from scratch with ES6, Canvas, …without framework or libraries? Ready, set, go!
<a href="https://twitter.com/p01">@p01</a></p></div></section><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-08 16:00">16:00</time><div class="session__container"><div class="session__speaker">
Shay Keinan
</div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/shay-keinan@1x.jpg, /images/speakers/shay-keinan@2x.jpg 2x"><img src="images/speakers/shay-keinan@0.5x.jpg" srcset="images/speakers/shay-keinan@1x.jpg 2x" alt="Shay Keinan"></picture></div><h3 class="session__topic">
Getting Started With ReactVR
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
WebVR enables web developers to create frictionless, immersive experiences. We’ll explore the core concepts behind VR, see different demonstrations, learn how to get started with React VR and how to add new features from the Three.js library.
<a href="https://twitter.com/shay_keinan">@shay_keinan</a></p></div></section><div class="recreation"><time class="recreation__time" datetime="2018-06-08 16:40">16:40</time><h3 class="recreation__heading">Break</h3></div><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-08 17:00">17:00</time><div class="session__container"><div class="session__speaker">
Roman Dvornov
<span class="session__company">Avito</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/roman-dvornov@1x.jpg, /images/speakers/roman-dvornov@2x.jpg 2x"><img src="images/speakers/roman-dvornov@0.5x.jpg" srcset="images/speakers/roman-dvornov@1x.jpg 2x" alt="Roman Dvornov"></picture></div><h3 class="session__topic">
All About the CSS Syntax
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
At first glance the CSS syntax looks simple, however it has a complicated parts. Many developers dislike CSS syntax for some reasons, therefore various pre-/post-processors and the rest alternatives exist. Lately so many attempts to change CSS and mix it with JavaScript, or even replace with it. Perhaps the problem is that many do not understand the design of the CSS and its beauty. I’ll tell you about the design of the CSS. I’m sure you’ll love the CSS a little more.
<a href="https://twitter.com/rdvornov">@rdvornov</a></p></div></section><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-08 17:40">17:40</time><div class="session__container"><div class="session__speaker">
Andrey Sitnik
<span class="session__company">Evil Martians</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/andrey-sitnik@1x.jpg, /images/speakers/andrey-sitnik@2x.jpg 2x"><img src="images/speakers/andrey-sitnik@0.5x.jpg" srcset="images/speakers/andrey-sitnik@1x.jpg 2x" alt="Andrey Sitnik"></picture></div><h3 class="session__topic">
PostCSS Best Practice
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
PostCSS has been a huge success: starting from Autoprefixer it has changed the way we think about CSS. Now we can shape styles in any way possible, try new ideas and make great tools. And while the number of PostCSS plugins and use cases is growing there are some things that could be improved. Common mistakes and best practices for plugin authors from the creator of PostCSS itself.
<a href="https://twitter.com/sitnikcode">@sitnikcode</a></p></div></section><div class="recreation"><time class="recreation__time" datetime="2018-06-08 18:20">18:20</time><h3 class="recreation__heading">Closing</h3></div></div><time class="section__day" datetime="2018-06-09 10:00">
Day 2nd
<sup class="section__date">June 9th</sup></time><div class="section__container"><div class="recreation"><time class="recreation__time" datetime="2018-06-09 10:00">10:00</time><h3 class="recreation__heading">Doors open</h3></div><div class="recreation"><time class="recreation__time" datetime="2018-06-09 11:15">11:15</time><h3 class="recreation__heading">Opening</h3></div><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-09 11:20">11:20</time><div class="session__container"><div class="session__speaker">
Una Kravets
<span class="session__company">Bustle</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/una-kravets@1x.jpg, /images/speakers/una-kravets@2x.jpg 2x"><img src="images/speakers/una-kravets@0.5x.jpg" srcset="images/speakers/una-kravets@1x.jpg 2x" alt="Una Kravets"></picture></div><h3 class="session__topic">
CSS Today & Tomorrow
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
CSS has gone through so many changes in the past few months, let alone years! Let’s go through some tricks we can implement in today’s UI’s and exciting opportunities for the CSS of the future: CSS grid, custom properties, filter effects, text decoration, and Houdini. Be prepared to learn about what CSS had to offer — today and tomorrow.
<a href="https://twitter.com/una">@una</a></p></div></section><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-09 12:00">12:00</time><div class="session__container"><div class="session__speaker">
Sergei Kriger
<span class="session__company">SinnerSchrader</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/sergei-kriger@1x.jpg, /images/speakers/sergei-kriger@2x.jpg 2x"><img src="images/speakers/sergei-kriger@0.5x.jpg" srcset="images/speakers/sergei-kriger@1x.jpg 2x" alt="Sergei Kriger"></picture></div><h3 class="session__topic">
Accessibility Testing with a Screen Reader
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
Screen reader is the most popular tool used by people with visual impairments to browse the Web. As a rule screen readers have a quite high learning curve due to their complexity and different (non-visual) approach of getting information. Let’s figure out best practices of navigating web pages with a screen reader, learn how to use those practices for accessibility testing on both macOS and Windows and understand how to avoid the most common pitfalls when getting started using a screen reader.
<a href="https://twitter.com/_sergeikriger">@_sergeikriger</a></p></div></section><div class="recreation"><time class="recreation__time" datetime="2018-06-09 12:40">12:40</time><h3 class="recreation__heading">Break</h3></div><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-09 13:00">13:00</time><div class="session__container"><div class="session__speaker">
Lisi Linhart
</div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/lisi-linhart@1x.jpg, /images/speakers/lisi-linhart@2x.jpg 2x"><img src="images/speakers/lisi-linhart@0.5x.jpg" srcset="images/speakers/lisi-linhart@1x.jpg 2x" alt="Lisi Linhart"></picture></div><h3 class="session__topic">
From Pen & Paper to SVG Animations. An Illustration Adventure
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
For decades drawing has allowed us to tell captivating stories with only a simple medium like pen and paper. But why stop at pen and paper, when we have an amazing medium like the web, that allows us to turn handdrawn sketches into beautiful interactive and animated SVG illustrations. This talk will explain how art and coding have many similarities and why creating a clear cut between developers and designers can be limiting. We will explore what SVG is and how we can utilise it to turn our illustrations into code. Finally we’ll sprinkle some animation techniques on top to create a delightful interactive illustration in the browser.
<a href="https://twitter.com/lisi_linhart">@lisi_linhart</a></p></div></section><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-09 13:40">13:40</time><div class="session__container"><div class="session__speaker">
Andreas Larsen
</div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/andreas-larsen@1x.jpg, /images/speakers/andreas-larsen@2x.jpg 2x"><img src="images/speakers/andreas-larsen@0.5x.jpg" srcset="images/speakers/andreas-larsen@1x.jpg 2x" alt="Andreas Larsen"></picture></div><h3 class="session__topic">
Easing Gradients, the Squircle of Colors
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
Gradients in web-design are the color equivalent of Comic Sans in that they are frequently misused and sometimes frowned upon. But what if we could control the color mix and get rid of the hard edges, desaturated midpoints or verbose syntax? We’ll do just that using timing functions, color spaces, postCSS and Sketch plugins with a syntax that is currently a CSSWG draft proposal.
<a href="https://twitter.com/larsenwork">@larsenwork</a></p></div></section><div class="recreation"><time class="recreation__time" datetime="2018-06-09 14:20">14:20</time><h3 class="recreation__heading">Lunch</h3></div><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-09 15:20">15:20</time><div class="session__container"><div class="session__speaker">
José Manuel Pérez
<span class="session__company">Spotify</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/jose-manuel-perez@1x.jpg, /images/speakers/jose-manuel-perez@2x.jpg 2x"><img src="images/speakers/jose-manuel-perez@0.5x.jpg" srcset="images/speakers/jose-manuel-perez@1x.jpg 2x" alt="José Manuel Pérez"></picture></div><h3 class="session__topic">
Fostering a Web Performance Culture
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
As users of web applications we like fast, light and delightful products. As developers we struggle trying to balance our ergonomics, user’s experience and company goals, and in many cases we have a hard time raising awareness about this in our teams and companies. In this talk I will give practical tips to foster a web performance culture and make it a priority when building our projects. I will show how to share knowledge with your colleagues, how some companies are promoting performance improvements, and some tools that we can use to make performance part of our workflow.
<a href="https://twitter.com/jmperezperez">@jmperezperez</a></p></div></section><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-09 16:00">16:00</time><div class="session__container"><div class="session__speaker">
Kornel Lesinski
<span class="session__company">ImageOptim</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/kornel-lesinski@1x.jpg, /images/speakers/kornel-lesinski@2x.jpg 2x"><img src="images/speakers/kornel-lesinski@0.5x.jpg" srcset="images/speakers/kornel-lesinski@1x.jpg 2x" alt="Kornel Lesinski"></picture></div><h3 class="session__topic">
“Save for Web” Won’t Save You
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
The web is now mostly browsed on mobile, where bandwidth is costly, and high resolution images slow down loading of pages. Tools, techniques and best practices for delivering high quality images without blowing your performance budget. How to choose most appropriate image formats and how to squeeze maximum performance out of them.
<a href="https://twitter.com/kornelski">@kornelski</a></p></div></section><div class="recreation"><time class="recreation__time" datetime="2018-06-09 16:40">16:40</time><h3 class="recreation__heading">Break</h3></div><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-09 17:00">17:00</time><div class="session__container"><div class="session__speaker">
Roman Prudnikov
<span class="session__company">2GIS</span></div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/roman-prudnikov@1x.jpg, /images/speakers/roman-prudnikov@2x.jpg 2x"><img src="images/speakers/roman-prudnikov@0.5x.jpg" srcset="images/speakers/roman-prudnikov@1x.jpg 2x" alt="Roman Prudnikov"></picture></div><h3 class="session__topic">
It’s a Mad, Mad, Mad, Mad Search Bar
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
Search bar is a common way to help users to find whatever they want on your website. Especially it works when your website was developed to help users. However, it isn’t easy to make a search bar for your app which is written in React and Redux. In this talk, I’ll share my experience of developing a search bar component. Starting from the UX of a search bar and to the architecture of the React-component we made. Of course, there’ll be a word about Redux-saga which helped us. After my talk you’ll know how to make search bars accessible and how to rewrite your code once again to make the search bar easy to use not only for developers.
<a href="https://twitter.com/RayProud">@rayproud</a></p></div></section><section class="session session--closed"><div class="session__heading js-session-open"><time class="session__time" datetime="2018-06-09 17:40">17:40</time><div class="session__container"><div class="session__speaker">
Maxim Salnikov
</div><div class="session__speaker-photo"><picture><source media="(min-width: 1024px)" srcset="/images/speakers/maxim-salnikov@1x.jpg, /images/speakers/maxim-salnikov@2x.jpg 2x"><img src="images/speakers/maxim-salnikov@0.5x.jpg" srcset="images/speakers/maxim-salnikov@1x.jpg 2x" alt="Maxim Salnikov"></picture></div><h3 class="session__topic">
Is a New Cross-Platform Development Era Coming?
</h3></div></div><button class="session__toggle session__toggle--show js-session-close" type="button" aria-label="Open talk description"></button><div class="session__info"><p class="session__description">
A single codebase for the main mobile platforms applications is a Holy Grail for developers. What could be the real unifying factor for app platforms we have now, both mobile, desktop and web-based? Right! Progressive web apps are gaining momentum. Is this a real new cross-platform silver bullet?
<a href="https://twitter.com/webmaxru">@webmaxru</a></p></div></section><div class="recreation"><time class="recreation__time" datetime="2018-06-09 18:20">18:20</time><h3 class="recreation__heading">Closing ceremony</h3></div></div></section><section class="section section--gallery" id="photos"><h2 class="section__heading">Impressions</h2><span class="section__subheading">Photos and Videos from Last Year</span><div class="gallery gallery--transformable"><button class="gallery__button gallery__button--prev" type="button" aria-label="Show previous picture"></button><button class="gallery__button gallery__button--next" type="button" aria-label="Show next picture"></button><div class="gallery__item gallery__item--show gallery__item--three-cells"><figure class="video"><div class="video__wrapper"><img class="video__media video__media--image" src="https://img.youtube.com/vi/f7V39zfWTDo/mqdefault.jpg" alt="Pitercss_conf 2017 mood video."><button class="video__button"><svg aria-label="Play video" class="video__icon" width="90" height="63" viewBox="0 0 30 21"><path d="M29.7 4.55a6.47 6.47 0 0 0-1.19-3A4.31 4.31 0 0 0 25.5.3C21.3 0 15 0 15 0S8.7 0 4.5.3a4.31 4.31 0 0 0-3 1.27 6.47 6.47 0 0 0-1.19 3A45.46 45.46 0 0 0 0 9.41v2.17a45.46 45.46 0 0 0 .3 4.86 6.47 6.47 0 0 0 1.19 3A5.13 5.13 0 0 0 4.8 20.7c2.4.23 10.2.3 10.2.3s6.3 0 10.5-.31a4.31 4.31 0 0 0 3-1.27 6.47 6.47 0 0 0 1.19-3 45.46 45.46 0 0 0 .3-4.86V9.41a45.46 45.46 0 0 0-.3-4.86zm-17.8 9.89V6l8.1 4.24-8.11 4.2z"></path></svg></button></div></figure></div><div class="gallery__item"><picture><source media="(min-width: 768px)" srcset="/images/photos/1.jpg, /images/photos/1.jpg 2x"><img class="gallery__image" src="images/photos/1.jpg" srcset="images/photos/1.jpg 2x" alt="Picture from the Last Year Conference"></picture></div><div class="gallery__item gallery__item--two-cells"><picture><source media="(min-width: 768px)" srcset="/images/photos/2.jpg, /images/photos/2.jpg 2x"><img class="gallery__image" src="images/photos/2.jpg" srcset="images/photos/2.jpg 2x" alt="Picture from the Last Year Conference"></picture></div><div class="gallery__item gallery__item--two-cells"><picture><source media="(min-width: 768px)" srcset="/images/photos/3.jpg, /images/photos/3.jpg 2x"><img class="gallery__image" src="images/photos/3.jpg" srcset="images/photos/3.jpg 2x" alt="Picture from the Last Year Conference"></picture></div><div class="gallery__item"><picture><source media="(min-width: 768px)" srcset="/images/photos/4.jpg, /images/photos/4.jpg 2x"><img class="gallery__image" src="images/photos/4.jpg" srcset="images/photos/4.jpg 2x" alt="Picture from the Last Year Conference"></picture></div><div class="gallery__item"><picture><source media="(min-width: 768px)" srcset="/images/photos/5.jpg, /images/photos/5.jpg 2x"><img class="gallery__image" src="images/photos/5.jpg" srcset="images/photos/5.jpg 2x" alt="Picture from the Last Year Conference"></picture></div><div class="gallery__item gallery__item--two-cells"><picture><source media="(min-width: 768px)" srcset="/images/photos/6.jpg, /images/photos/6.jpg 2x"><img class="gallery__image" src="images/photos/6.jpg" srcset="images/photos/6.jpg 2x" alt="Picture from the Last Year Conference"></picture></div><div class="gallery__item gallery__item--three-cells"><picture><source media="(min-width: 768px)" srcset="/images/photos/9.jpg, /images/photos/9.jpg 2x"><img class="gallery__image" src="images/photos/9.jpg" srcset="images/photos/9.jpg 2x" alt="Picture from the Last Year Conference"></picture></div></div><p class="gallery__more"><a class="button" href="https://www.facebook.com/media/set/?set=a.453600831685091.1073741829.382592345452607">more photos from last year</a></p></section><section class="section section--speakers" id="speakers"><h2 class="visually-hidden">For speakers</h2><div class="block"><h3 class="block__caption">Where to go in St. Petersburg</h3><p class="block__description">First time in St. Petersburg? Not sure where to go? Here are some cool places, the ones we love and recommend. You can find there good coffee, amazing food, interesting bookstores, one cool vinyl store, lovely museums and much more.</p><a class="block__button button" href="where-to-go">Enjoy the city!</a></div><div class="bgr-block"><div class="bgr-block__wrapper"><h3 class="bgr-block__caption">Code of conduct</h3><p class="bgr-block__description">Our code of conduct aims to create a safe and welcoming space for our community members, and to protect every attendee, staff member and speaker from harassment.</p></div><a class="bgr-block__link" href="code-of-conduct">Read all code of conduct</a></div></section><section class="section section--sponsors" id="sponsors"><h2 class="section__heading">Thanks to all these people</h2><p class="sponsors__description">Help us to make this front-end festival even better! Become a sponsor. For more info: <a href="mailto:hi@pitercss.com?subject=pitercss_conf%20sponsorship">hi@pitercss.com</a>.</p><ul class="sponsors__cards"><li class="sponsors__item"><a class="sponsors__link" href="https://htmlacademy.ru/"><img class="sponsors__image" src="images/sponsors/html-academy.svg" alt="HTML Academy" width="180"></a></li><li class="sponsors__item"><a class="sponsors__link" href="http://www.shishki.pro/"><img class="sponsors__image" src="images/sponsors/shishki.svg" alt="Shishki" width="200"></a></li><li class="sponsors__item"><a class="sponsors__link" href="https://www.avito.ru/company"><img class="sponsors__image" src="images/sponsors/avito.svg" alt="Avito" width="200"></a></li><li class="sponsors__item"><a class="sponsors__link" href="https://sinnerschrader.com/"><img class="sponsors__image" src="images/sponsors/sinnerschrader.svg" alt="SinnerSchrader" width="110"></a></li><li class="sponsors__item"><a class="sponsors__link" href="https://kontur.ru/"><img class="sponsors__image" src="images/sponsors/kontur.svg" alt="Kontur" width="200"></a></li><li class="sponsors__item"><a class="sponsors__link" href="https://www.microsoft.com/"><img class="sponsors__image" src="images/sponsors/microsoft.svg" alt="Microsoft" width="230"></a></li><li class="sponsors__item"><a class="sponsors__link" href="https://htmlacademy.ru/production"><img class="sponsors__image" src="images/sponsors/liga-a.svg" alt="Liga A." width="110" style="margin-top: -20px"></a></li><li class="sponsors__item"><a class="sponsors__link" href="https://www.google.com/about/"><img class="sponsors__image" src="images/sponsors/google.svg" alt="Google" width="180"></a></li><li class="sponsors__item"><a class="sponsors__link" href="https://www.mozilla.org/en-US/"><img class="sponsors__image" src="images/sponsors/mozilla.svg" alt="Mozilla" width="170"></a></li><li class="sponsors__item"><a class="sponsors__link" href="https://uploadcare.com/"><img class="sponsors__image" src="images/sponsors/uploadcare.svg" alt="Uploadcare" width="240"></a></li></ul></section></main><footer class="footer"><div class="footer__container"><div class="footer__content"><form class="form-subscribe" action="https://pitercss.us14.list-manage.com/subscribe/post?u=5e93eb3640317ef9257048d9c&id=e052fffa90" method="post"><label class="form-subscribe__label" for="subscribe-email">Be the first to know</label><div class="form-subscribe__field"><input class="form-subscribe__input" type="email" id="subscribe-email" name="email" placeholder="email@example.com" required="required"><button class="form-subscribe__button" type="submit">Notify me</button></div></form><ul class="social"><li class="social__item"><a class="social__link social__link--email" href="mailto:hi@pitercss.com">hi@pitercss.com</a></li><li class="social__item"><a class="social__link social__link--twitter" href="https://twitter.com/pitercss_conf" aria-label="Twitter"><svg width="24" height="20"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter"></use></svg></a></li><li class="social__item"><a class="social__link social__link--vkontakte" href="https://vk.com/pitercss_conf" aria-label="VK"><svg width="25" height="14"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-vkontakte"></use></svg></a></li><li class="social__item"><a class="social__link social__link--facebook" href="https://www.facebook.com/pitercssconf/" aria-label="Facebook"><svg width="12" height="23"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use></svg></a></li><li class="social__item"><a class="social__link social__link--instagram" href="https://www.instagram.com/pitercss_conf/" aria-label="Instagram"><svg width="21" height="21"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-instagram"></use></svg></a></li></ul></div><div class="footer-info"><ul class="footer-info__list"><li class="footer-info__item"><a href="code-of-conduct" class="footer-info__link"><span>Code of conduct</span></a></li><li class="footer-info__item"><a href="community" class="footer-info__link"><span>Сommunity tickets</span></a></li><li class="footer-info__item"><a href="privacy-ru" class="footer-info__link"><span>Privacy policy</span></a></li></ul><p class="footer-info__copyright">
Interaktivnye Obuchayushhchie Tehnologii LLC
<span class="footer-info__copyright-years">© 2016–2018</span></p></div><div class="footer__logo"><img class="footer__logo-image" src="images/logo-footer.svg" alt="pitercss_conf" width="37"></div></div></footer><script src="js/script.js"></script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create','UA-85020445-1','auto');ga('send','pageview');setTimeout(function(){ga('send','event','New Visitor',location.pathname);},10000);</script><script>!function(e,t,a){(t[a]=t[a]||[]).push(function(){try{t.yaCounter42828309=new Ya.Metrika({id:42828309,clickmap:!0,trackLinks:!0,accurateTrackBounce:!0,webvisor:!0,ecommerce:'dataLayer'})}catch(e){}});var c=e.getElementsByTagName('script')[0],r=e.createElement('script'),n=function(){c.parentNode.insertBefore(r,c)};r.async=!0,r.src='https://mc.yandex.ru/metrika/watch.js','[object Opera]'==t.opera?e.addEventListener('DOMContentLoaded',n,!1):n()}(document,window,'yandex_metrika_callbacks');</script><noscript><img src="https://mc.yandex.ru/watch/42828309" style="position:absolute;left:-9999px" alt=""></noscript><script type="text/javascript">(window.Image ? (new Image()) : document.createElement('img')).src = 'https://vk.com/rtrg?p=VK-RTRG-231201-bS5Uz';</script><script>!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');fbq('init','464142210710445');fbq('track','PageView');</script><noscript><img height="1" width="1" src="https://www.facebook.com/tr?id=464142210710445&ev=PageView&noscript=1"/></noscript><script type="text/javascript">!function(){var t=document.createElement("script");t.type="text/javascript",t.async=!0,t.src="https://vk.com/js/api/openapi.js?154",t.onload=function(){VK.Retargeting.Init("VK-RTRG-249685-6PBn7"),VK.Retargeting.Hit()},document.head.appendChild(t)}();</script><noscript><img src="https://vk.com/rtrg?p=VK-RTRG-249685-6PBn7" style="position:fixed; left:-999px;" alt=""/></noscript></body></html>