Стандартная библиотека C++ крайне гибка и позволяет решать множество задач. Однако мало кто знает о некоторых её возможностях, из-за чего порой вместо написания нескольких строчек кода люди неделями пишут своё решение или переизобретают готовые алгоритмы. В докладе вас ждёт рассказ о полезных "фишках" стандартной библиотеки на которые почему-то мало кто обращает внимание.
Как перестать отлаживать асинхронный код и начать жить / Андрей Саломатин (Pr...Ontico
Асинхронность в Javascript больше не страшна. Классические триллеры вроде "Callback Hell" и "Pyramid of Doom" потеряли свою актуальность настолько, что даже Java-программисты перестали пугать ими невинных джуниоров.
Всё благодаря паттернам и библиотекам. Streams, Promises, Async-Await и другие изменили наш код. Теперь он прекрасен.
Пока ещё вымысел? Поговорим о том, как сделать эту картину реальностью. Об основных практиках асинхронного программирования, принципах их работы, отличиях и сценариях использования.
Андрей Карпов, Приватные байки от разработчиков анализатора кодаSergey Platonov
Доклад о редких нестандартных расширениях языка С++, про которые никто не знает, но которые надо поддерживать в анализаторе кода.
О магии Visual C++ с файлом stdafx.h, когда проект компилируется, хотя не должен. О том как зародился viva64 (предшественник PVS-Studio) для поиска 64-битных проблем. Как и почему исчез анализ кода, который одно время существовал в компиляторе Intel C++.
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)Ontico
TypeScript – светлое будущее ES6 уже вчера.
Почему не "Кофе"? Чай полезней.
Что не так с Flow от Facebook?
Реальная практика использования: плюсы и минусы.
Не VisualStudio единым. Особенности работы в других IDE.
Интеграция с уже существующим JS кодом.
Использование совместно с RequireJS. Подводные камни.
Использование TypeScript совместно с React.
TypeScript и Angular.
Плюшки, которых нет в ES6/7 (пока нет): [static] enum, интерфейсы, private, protected, декораторы... Что дают и зачем?
В докладе будут сделаны попытки ответить на вопросы, какой тип скрывается под маской auto, почему T&& не всегда rvalue, и почему move ничего не двигает.
Стандартная библиотека C++ крайне гибка и позволяет решать множество задач. Однако мало кто знает о некоторых её возможностях, из-за чего порой вместо написания нескольких строчек кода люди неделями пишут своё решение или переизобретают готовые алгоритмы. В докладе вас ждёт рассказ о полезных "фишках" стандартной библиотеки на которые почему-то мало кто обращает внимание.
Как перестать отлаживать асинхронный код и начать жить / Андрей Саломатин (Pr...Ontico
Асинхронность в Javascript больше не страшна. Классические триллеры вроде "Callback Hell" и "Pyramid of Doom" потеряли свою актуальность настолько, что даже Java-программисты перестали пугать ими невинных джуниоров.
Всё благодаря паттернам и библиотекам. Streams, Promises, Async-Await и другие изменили наш код. Теперь он прекрасен.
Пока ещё вымысел? Поговорим о том, как сделать эту картину реальностью. Об основных практиках асинхронного программирования, принципах их работы, отличиях и сценариях использования.
Андрей Карпов, Приватные байки от разработчиков анализатора кодаSergey Platonov
Доклад о редких нестандартных расширениях языка С++, про которые никто не знает, но которые надо поддерживать в анализаторе кода.
О магии Visual C++ с файлом stdafx.h, когда проект компилируется, хотя не должен. О том как зародился viva64 (предшественник PVS-Studio) для поиска 64-битных проблем. Как и почему исчез анализ кода, который одно время существовал в компиляторе Intel C++.
TypeScript: особенности разработки / Александр Майоров (Tutu.ru)Ontico
TypeScript – светлое будущее ES6 уже вчера.
Почему не "Кофе"? Чай полезней.
Что не так с Flow от Facebook?
Реальная практика использования: плюсы и минусы.
Не VisualStudio единым. Особенности работы в других IDE.
Интеграция с уже существующим JS кодом.
Использование совместно с RequireJS. Подводные камни.
Использование TypeScript совместно с React.
TypeScript и Angular.
Плюшки, которых нет в ES6/7 (пока нет): [static] enum, интерфейсы, private, protected, декораторы... Что дают и зачем?
В докладе будут сделаны попытки ответить на вопросы, какой тип скрывается под маской auto, почему T&& не всегда rvalue, и почему move ничего не двигает.
С ростом количества CSS на клиенте, разработчики озаботились его минимизацией: сначала простыми заменами, а потом и структурной оптимизацией. Первым иструментом, где появилась такая оптимизация, был CSSO и он оставался лучшим, пока не был заброшен. Не так давно он снова вернулся к жизни. Принципы работы CSSO, новые идеи оптимизаций и изменения в последних релизах от нового мейнтейнера проекта.
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"Yandex
Есть мнение, что БЭМ! можно применять только в Яндексе и подобных больших компаниях для сложных проектов. Мы расскажем, почему это не так. Доклад ориентирован на любого веб-разработчика, а примеры будут основываться на таких задачах как: вёрстка HTML+CSS по PSD, написание JS компонент, сборка динамического сайта с использованием PHP/Django/RoR.
Многие разработчики не представляют, как дорого обходятся ошибки в программах. Причем я имею в виду не падения ракет и прочие катастрофы, а обыкновенное прикладное программное обеспечение. Хочется показать всю важность нахождения ошибок на самых ранних этапах. Одним из способов выявить ошибку как можно раньше является статический анализ кода. Поговорим мы не только об этом, но и о различных приемах при написании кода, которые позволят избежать множество типовых ошибок.
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...Yandex
БЭМ упрощает разработку сайтов, которые нужно быстро создать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться. С обширным арсеналом БЭМ, со всей его модульностью и мощью, вам останется «всего-то» придумать идею и реализовать её. На мастер-классе вы сможете вместе с нами создать то, что мы «только что» придумали. Вы узнаете, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомитесь с готовыми библиотеками блоков и инструментами для автоматизации сборки. Мы покажем, как разные инструменты — например, autoprefixer, css-препроцессор Roole или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки на БЭМ. На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельная часть мастер-класса будет посвящена декларативным шаблонам BEMHTML и BEMTREE, которые позволяют преобразовывать сырые данные во view-ориентированный BEMJSON. Мы вместе напишем серверную часть приложения в БЭМ-методологии и используем данные от разных социальных и поисковых сервисов (RSS с Яндекс.Фоток, API Twitter и Instagram). В результате получится работающий сайт, а вы — на практике познакомитесь с полным стеком БЭМ-технологий. После мастер-класса мы сможем свободно пообщаться на профессиональные темы. Например, вы расскажете о трудностях, с которыми встретились при реализации проекта на БЭМ, и мы вместе подумаем, как воплотить вашу идею в жизнь.
Я занимаюсь CSSO. В ходе работы над ним мне пришлось погрузиться в процесс парсинга CSS. В результате парсер (тот, что в CSSO) был не раз переписан. Пришло время сделать его отдельным инструментом.
Новый быстрый детальный парсер CSS, его AST, области применения и кое-что ещё.
Статический анализ кода: Что? Как? Зачем?Andrey Karpov
Методология статического анализа год за годом зарекомендовывает себя в поисках дефектов в исходном коде программ.
Максим расскажет про:
- методологию статического анализа и какие плюсы и минусы у нее есть;
- технологии этой методологии, которые позволяют выявлять разнообразнейшие дефекты в коде;
- интересные примеры ошибок в реальных проектах, которые были найдены при помощи статического анализа;
- интеграцию инструментов статического анализа в проекты любой сложности, и почему так важно регулярное использование подобных инструментов.
С ростом количества CSS на клиенте, разработчики озаботились его минимизацией: сначала простыми заменами, а потом и структурной оптимизацией. Первым иструментом, где появилась такая оптимизация, был CSSO и он оставался лучшим, пока не был заброшен. Не так давно он снова вернулся к жизни. Принципы работы CSSO, новые идеи оптимизаций и изменения в последних релизах от нового мейнтейнера проекта.
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"Yandex
Есть мнение, что БЭМ! можно применять только в Яндексе и подобных больших компаниях для сложных проектов. Мы расскажем, почему это не так. Доклад ориентирован на любого веб-разработчика, а примеры будут основываться на таких задачах как: вёрстка HTML+CSS по PSD, написание JS компонент, сборка динамического сайта с использованием PHP/Django/RoR.
Многие разработчики не представляют, как дорого обходятся ошибки в программах. Причем я имею в виду не падения ракет и прочие катастрофы, а обыкновенное прикладное программное обеспечение. Хочется показать всю важность нахождения ошибок на самых ранних этапах. Одним из способов выявить ошибку как можно раньше является статический анализ кода. Поговорим мы не только об этом, но и о различных приемах при написании кода, которые позволят избежать множество типовых ошибок.
Мастер-класс: Разрабатываем сайт с нуля на полном стеке БЭМ-технологий — Жека...Yandex
БЭМ упрощает разработку сайтов, которые нужно быстро создать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться. С обширным арсеналом БЭМ, со всей его модульностью и мощью, вам останется «всего-то» придумать идею и реализовать её. На мастер-классе вы сможете вместе с нами создать то, что мы «только что» придумали. Вы узнаете, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомитесь с готовыми библиотеками блоков и инструментами для автоматизации сборки. Мы покажем, как разные инструменты — например, autoprefixer, css-препроцессор Roole или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки на БЭМ. На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельная часть мастер-класса будет посвящена декларативным шаблонам BEMHTML и BEMTREE, которые позволяют преобразовывать сырые данные во view-ориентированный BEMJSON. Мы вместе напишем серверную часть приложения в БЭМ-методологии и используем данные от разных социальных и поисковых сервисов (RSS с Яндекс.Фоток, API Twitter и Instagram). В результате получится работающий сайт, а вы — на практике познакомитесь с полным стеком БЭМ-технологий. После мастер-класса мы сможем свободно пообщаться на профессиональные темы. Например, вы расскажете о трудностях, с которыми встретились при реализации проекта на БЭМ, и мы вместе подумаем, как воплотить вашу идею в жизнь.
Я занимаюсь CSSO. В ходе работы над ним мне пришлось погрузиться в процесс парсинга CSS. В результате парсер (тот, что в CSSO) был не раз переписан. Пришло время сделать его отдельным инструментом.
Новый быстрый детальный парсер CSS, его AST, области применения и кое-что ещё.
Статический анализ кода: Что? Как? Зачем?Andrey Karpov
Методология статического анализа год за годом зарекомендовывает себя в поисках дефектов в исходном коде программ.
Максим расскажет про:
- методологию статического анализа и какие плюсы и минусы у нее есть;
- технологии этой методологии, которые позволяют выявлять разнообразнейшие дефекты в коде;
- интересные примеры ошибок в реальных проектах, которые были найдены при помощи статического анализа;
- интеграцию инструментов статического анализа в проекты любой сложности, и почему так важно регулярное использование подобных инструментов.
«Парсим CSS», Роман Дворнов (Avito)
В ходе работы над CSSO мне пришлось погрузиться в процесс парсинга CSS. В результате парсер (тот, что в CSSO) был не раз переписан. Пришло время сделать его отдельным инструментом. Новый быстрый детальный парсер CSS, его AST, области применения и кое-что ещё.
Есть такая штука как инструментирование кода. Мало кто знает о ней, даже пользуясь результатами ее применения. Между тем, с инструментированием можно делать много всего интересного и, главное, полезного. Например, это может вам помочь лучше понять код или сделать процесс разработки более эффективным. Примеры инструментирования кода и принципы его работы.
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Ontico
Совместно с университетом ИТМО мы запустили курс, посвященный основам HTML и CSS. Уже на момент регистрации на этот курс записалось более 12 тысяч студентов. Перед нами стояла задача разработать систему, которая будет автоматически проверять итоговые проекты на соответствие заранее подготовленному макету. В качестве основной техники для проверки было выбрано регрессионное тестирование.
В каждом проекте мы проверяли разметку, сетку и стилевое оформление не только страницы целиком, но и отдельных блоков. Одной из главных проблем был поиск этих самых блоков, так как о том, какой будет верстка студентов, мы не знали ничего — ни какие теги они использовали, ни какие классы и идентификаторы были задействованы. Имели только общее представление о структуре.
В докладе я расскажу, от чего мы отталкивались при построении этой системы, как мы разбирали и анализировали проекты. Какие инструменты и технологии мы для этого использовали и почему. Какие подводные камни вылезали, и какие возникали проблемы.
Денис Бугарчев "Внедрение идей БЭМ на не-Яндекс проект"Yandex
28 мая 2011, Я.Субботник в Киеве
Денис Бугарчев "Внедрение идей БЭМ на не-Яндекс проект"
О докладе:
В докладе идет речь о внедрении используемой в Яндексе системы верстки на любой проект. Доводы «за» и рассказы о многочисленных плюсах перехода на БЭМ-верстку прилагаются.
Как не потерять контроль над написанным кодом через полгода? Как организовать работу нескольких верстальщиков при сохранении единства кода? Действительно ли нужно каждый раз верстать похожие блоки заново? Если вы хоть раз задавались подобными вопросами, то есть хорошая новость. Судя по всему, вам очень поможет используемая в Яндексе система верстки абсолютно независимыми блоками. Именно о внедрении и практическом использовании этой системы на ваших сайтах и пойдет речь в этом докладе.
13. 13
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Код разработчика Б
А: Почему так ф-ю
написал?
15. 15
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Код разработчика Б
А: Зачем тут скобка?
17. 17
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Код разработчика Б
А: Зачем тут точка с
запятой?
23. 23
Организационный профит Code Style
• Это закон
– Должна быть отдельная страница о которой все знают
– Страницу просто найти
• Закон разрешает конфликты
– Не знание закона не освобождает от ответственности
• Решает большинство проблем
• Эту страницу нужно дать прочитать перед
началом работы
28. 28
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Обобщение соседних элементов
29. 29
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Обобщение соседних элементов
Перенос строки разрывает обобщение
30. 30
.b-form {
font-family: Arial;
font-size: 2em;
padding: 0 10px;
min-height: 100px;
}
Обобщение соседних элементов
Перенос строки разделяет разные типы CSS
ствойств и обобщает соседние элементы
32. 32
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Вертикаль – список
var - список переменных
33. 33
var name = function (value) {
..var a = 0
...., b = 42
...., c = 42
...., d = 42
....;
};
Вертикаль – список
Coma-first style – его цель уменьшить число
ошибок.
34. 34
var name = function (value) {
..var a = 0
...., b = 42
....c = 42
...., d = 42
....;
};
Вертикаль – список
Отсутствие запятых легко заметить
35. 35
var a =
..{ b: 2
.., c: 3
.., d: 4
..}
..;
Вертикаль – список
Coma-first style для литералов Object
https://gist.github.com/357981
36. 36
ALL code is ugly.
Yours, mine, everyone's.
Code Is Ugly. Just face it.
41. 41
if (typeof a !== "undefined" &&
typeof b !== "undefined" &&
typeof c === "string") {
// your stuff
}
Вертикаль – список
Несколько условий – список
43. 43
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Единообразие
Похожий код быстрее воспринять
44. 44
// Этот пробел обязательный
function A(value) {
}
// Этот пробел для единообразия
var A = function (value) {
};
Единообразие
Похожий код быстрее воспринять
51. 51
var name = function (value) {
....var a = 0,
........b = 42;
if (value) {
....return a;
}
};
Начало блока "видит" конец блока
Код представляет из себя "параграфы
текста"
52. 52
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return a;
....}
};
Начало блока "видит" конец блока
Код представляет из себя "параграфы
текста"
64. 64
var name = function (value) {
....var a = 0,
........b = 42;
....if (value)
........return a;
};
Скобки у циклов и условий
Лень писать скобки
65. 65
var name = function (value) {
....var a = 0,
........b = 42;
....if (value)
........a = 42;
........return a;
};
Скобки у циклов и условий
Редкая логическая ошибка
66. 66
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........a = 42;
........return a;
....}
};
Скобки у циклов и условий
67. 67
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) return a;
};
Скобки у циклов и условий
Много скобок создает много шума
69. 69
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return
............{pewpew: a};
....}
};
Auto semicolon insertion
70. 70
var name = function (value) {
....var a = 0,
........b = 42;
....if (value) {
........return;
............{pewpew: a};
....}
};
Auto semicolon insertion
После return будет поставлена ;
http://es5.github.com/#x7.9
74. 74
.b-form {
-webkit-box-shadow: 0 0 400px 200px #000;
box-shadow: 0 0 400px 200px #000;
}
Свойства с префиксами в CSS
Последним должен идти свойство без
префикса
http://pepelsbey.net/pres/pre-fixes/
76. 76
Еще несколько слов…
• Документирование неявного кода
– Код должен быть максимально самодокументируемым
• Написание примеров использования
– Чтобы не рыться в коде
• Сокращение длины строки
– Чтобы не вертеть головой и не скролить
• Уменьшение уровней вложенности
– Быстрее читать код
• Единообразие в модулях и именах
• Автоматизированная проверка кода ♥
– IDE
– Pre Commit Hook
79. 79
Как мы делаем в Яндексе
• Love & Peace
• У каждого проекта свой Code Style
– Страница в Вики
– Или CONTRIBUTE.md файл в корне проекта
• Есть стиль по умолчанию
– Страница в Вики со стилей по языкам
– Не обязательный – на случай если лень
• Стараемся использовать общепринятый
– Так проще новым разработчикам
– Привычней читать сторонний код
• Code Review
– Зависит от размера проекта
– Как правило новички проходят обязательно
80. 80
Заключение
• Соглашение Code Style - Must have!
• Нужно знать меру
– Разрядка пробелами
– Фигурные скобки
• Все правила имеют на то причину