Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
Основы и примеры для понимания зачем нужен CSS-фреймворк Bootstrap. Доклад читался в рамках WordPress Meetup #3 в Санкт-Петербурге. Объясняется в чем суть верстки на Bootstrap, зачем он нужен для WordPress, подробно разбирается основы grid (сетки) на Bootstrap чтобы верстать адаптивный дизайн.
В лекции мы попробуем взглянуть на страницу глазами пользователей и понять, что можно сделать для ускорения ее загрузки. Рассмотрим основные оптимизации на стороне браузера, познакомимся с инструментами для измерения времени отображения.
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровYandex
Лекция Петра Волкова в Школе вебмастеров: «Как защитить свой сайт».
https://academy.yandex.ru/events/webmasters_school/yawebm2015/
Актуальные типы угроз и динамика их развития
Компрометация сервера и её последствия. Распределённые атаки типа «отказ в обслуживании». Подмена или добавление рекламы на стороне клиента. Атаки, направленные на пользователей. Проблемы, связанные со внешним содержимым.
Управление рисками безопасности веб-сайтов
Разные типы сайтов подвержены разным типам рисков информационной безопасности. Понимание целей и подходов злоумылшенников как ключ к эффективному снижению рисков. Методы монетизации атак на сайты.
Доступный инструментарий и методики для обеспечения безопасности
Открытые инструменты форензики для типовых и сложных проектов. Системы обнаружения вторжений, подходы к проектированию безопасности в архитектуре и процессах.
Bootstrap 3. Адаптивная верстка для WordPressIgor Sazonov
Основы и примеры для понимания зачем нужен CSS-фреймворк Bootstrap. Доклад читался в рамках WordPress Meetup #3 в Санкт-Петербурге. Объясняется в чем суть верстки на Bootstrap, зачем он нужен для WordPress, подробно разбирается основы grid (сетки) на Bootstrap чтобы верстать адаптивный дизайн.
В лекции мы попробуем взглянуть на страницу глазами пользователей и понять, что можно сделать для ускорения ее загрузки. Рассмотрим основные оптимизации на стороне браузера, познакомимся с инструментами для измерения времени отображения.
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровYandex
Лекция Петра Волкова в Школе вебмастеров: «Как защитить свой сайт».
https://academy.yandex.ru/events/webmasters_school/yawebm2015/
Актуальные типы угроз и динамика их развития
Компрометация сервера и её последствия. Распределённые атаки типа «отказ в обслуживании». Подмена или добавление рекламы на стороне клиента. Атаки, направленные на пользователей. Проблемы, связанные со внешним содержимым.
Управление рисками безопасности веб-сайтов
Разные типы сайтов подвержены разным типам рисков информационной безопасности. Понимание целей и подходов злоумылшенников как ключ к эффективному снижению рисков. Методы монетизации атак на сайты.
Доступный инструментарий и методики для обеспечения безопасности
Открытые инструменты форензики для типовых и сложных проектов. Системы обнаружения вторжений, подходы к проектированию безопасности в архитектуре и процессах.
Построение собственного JS SDK — зачем и как?buranLcme
Многие разработчики любят делать свои велосипеды, но не все задумываются зачем. Мы расскажем о том, зачем вам может понадобится собственный JavaScript SDK и полезно ли кататься на велосипедах.
Мы делали собственный JS SDK для того, чтобы дать возможность создания плагинов в рамках большой enterprise системы - <b>Parallels Automation</b> и <b>Plesk Panel</b>. Сам SDK является частью общего стандарта <b>APS</b>, который является шиной, объединяющей все наши продукты по автоматизации. Обе панели брендируются и мы должны были сохранить брендинг при уже существующей кодовой базе верстки и существующих правилах оформления. И главное - надо было дать возможность создания UI сторонним девелоперам, которые могут иметь абсолютно разный уровень - от пришедших бекэндеров до профессиональных js-разработчиков.
Рендеринг может больше: vue.js vs React, Андрей СолодовниковDevDay
О том, как перестать вручную контролировать DOM, писать логику навигаций и почему DOM-шаблонизация — это классно, а так же немного самокритики и сравнительных тест-кейсов.
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10OdessaFrontend
Уже все знают о React и Angular, но что мы знаем о Vue.js? Андрей Стягайло рассказывает не только о Vue.js, но и о том что такое Nuxt.js и почему на него стоит обратить внимание в 2019 году.
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компанийYandex
БЭМ хорош не только для крупных проектов и больших команд. БЭМ — не про именование CSS-классов и i-bem. Он вполне подходит для прототипирования. В докладе пойдет речь о библиотеке для создания основных блоков (форма регистрации, список новостей и статей, категория товаров, карточка товара, форма заказа и т.д.), сборке статичной html-версии сайта и практике разработки.
Обилие устройств с высоким разрешением экранов подталкивает разработчиков к использованию пиктограмм в векторных форматах. Шрифтовые иконки так и не стали универсальным средством из-за проблем с отображением. В докладе Владимир расскажет об использовании SVG для пиктограмм: о том, как собрать файл с контурами, как добавить их на страницу и как избежать типичных проблем.
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)Roman Dvornov
Опенсорсный JavaScript-фреймворк с нестандартными подходами, ориентированный на разработку одностраничных приложений. Обновление шаблонов и стилей без перезагрузки страницы, развитые механизмы работы с данными, высокая производительность, инструменты разработчика и многое другое.
Доклад с конференции WSD, Санкт-Петербург, 8 июня 2013
Видео: http://www.youtube.com/watch?v=cVbbkwkhNQg
Тестировать регресс верстки скриншотами модно, этим никого не удивишь. Мы давно хотели внедрить этот вид тестирования у себя. Все время смущали вопросы простоты поддержки и применения, но в большей степени вопрос пропускной способности решений (производительности). Хотелось решения, простого в использовании и быстрого в работе. Готовые решения не подошли, и мы взялись делать свое.
В докладе расскажем, что из этого вышло, какие задачи решали и как мы добились того, чтобы тестирование скриншотами практически не влияло на общее время прохождения тестов.
Видео: https://youtu.be/ULwdj_Vr_WA
Слайды доклада о методологии вёрстки "БЭМ", придуманной в компании "Яндекс". Краткое описание методологии, принципов создания качественного css-кода, и применения "БЭМ" в WordPress
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов2ГИС Технологии
Как создать Front End-команду для высоконагруженного проекта? Спикер расскажет, как можно выстроить эффективный процесс фронтенд-разработки с упором на технические аспекты: — Команда фронтенд-разработчиков. Зоны ответственности между теми, кто программирует UI (верстальщики), и теми, кто отвечает за бизнес-логику (Javascript-программисты). Идеальный состав команды. — Настроенный технологический процесс. Модульная организация (подготовка дизайна → разработка формата данных → создание шаблона → навешивание событий → тесты). — Разработка вместе с тестированием Unit-/DOM-тесты и подход PixelPerfect. — Вёрстка независимыми блоками и встроенный в приложение режим для вёрстки блоков.
Вёрстка WordPress тем - WP Kharkiv Meetup #1dima_kuzovlev
Из чего состоит тема? Зачем нужна дочерняя тема? Что такое иерархия шаблонов? Какие есть тонкости подключения CSS & JS? Для чего не стоит использовать functions.php?
Построение собственного JS SDK — зачем и как?buranLcme
Многие разработчики любят делать свои велосипеды, но не все задумываются зачем. Мы расскажем о том, зачем вам может понадобится собственный JavaScript SDK и полезно ли кататься на велосипедах.
Мы делали собственный JS SDK для того, чтобы дать возможность создания плагинов в рамках большой enterprise системы - <b>Parallels Automation</b> и <b>Plesk Panel</b>. Сам SDK является частью общего стандарта <b>APS</b>, который является шиной, объединяющей все наши продукты по автоматизации. Обе панели брендируются и мы должны были сохранить брендинг при уже существующей кодовой базе верстки и существующих правилах оформления. И главное - надо было дать возможность создания UI сторонним девелоперам, которые могут иметь абсолютно разный уровень - от пришедших бекэндеров до профессиональных js-разработчиков.
Рендеринг может больше: vue.js vs React, Андрей СолодовниковDevDay
О том, как перестать вручную контролировать DOM, писать логику навигаций и почему DOM-шаблонизация — это классно, а так же немного самокритики и сравнительных тест-кейсов.
All you need is Vue, Nuxt is all you need | Odessa Frontend Meetup #10OdessaFrontend
Уже все знают о React и Angular, но что мы знаем о Vue.js? Андрей Стягайло рассказывает не только о Vue.js, но и о том что такое Nuxt.js и почему на него стоит обратить внимание в 2019 году.
Александр Баумгертнер — Преимущества БЭМ для небольших проектов и компанийYandex
БЭМ хорош не только для крупных проектов и больших команд. БЭМ — не про именование CSS-классов и i-bem. Он вполне подходит для прототипирования. В докладе пойдет речь о библиотеке для создания основных блоков (форма регистрации, список новостей и статей, категория товаров, карточка товара, форма заказа и т.д.), сборке статичной html-версии сайта и практике разработки.
Обилие устройств с высоким разрешением экранов подталкивает разработчиков к использованию пиктограмм в векторных форматах. Шрифтовые иконки так и не стали универсальным средством из-за проблем с отображением. В докладе Владимир расскажет об использовании SVG для пиктограмм: о том, как собрать файл с контурами, как добавить их на страницу и как избежать типичных проблем.
Basis.js - почему я не бросил разрабатывать свой фреймворк (extended)Roman Dvornov
Опенсорсный JavaScript-фреймворк с нестандартными подходами, ориентированный на разработку одностраничных приложений. Обновление шаблонов и стилей без перезагрузки страницы, развитые механизмы работы с данными, высокая производительность, инструменты разработчика и многое другое.
Доклад с конференции WSD, Санкт-Петербург, 8 июня 2013
Видео: http://www.youtube.com/watch?v=cVbbkwkhNQg
Тестировать регресс верстки скриншотами модно, этим никого не удивишь. Мы давно хотели внедрить этот вид тестирования у себя. Все время смущали вопросы простоты поддержки и применения, но в большей степени вопрос пропускной способности решений (производительности). Хотелось решения, простого в использовании и быстрого в работе. Готовые решения не подошли, и мы взялись делать свое.
В докладе расскажем, что из этого вышло, какие задачи решали и как мы добились того, чтобы тестирование скриншотами практически не влияло на общее время прохождения тестов.
Видео: https://youtu.be/ULwdj_Vr_WA
Слайды доклада о методологии вёрстки "БЭМ", придуманной в компании "Яндекс". Краткое описание методологии, принципов создания качественного css-кода, и применения "БЭМ" в WordPress
«Организация Frontend-разработки на крупном проекте» — Дмитрий Кузнецов2ГИС Технологии
Как создать Front End-команду для высоконагруженного проекта? Спикер расскажет, как можно выстроить эффективный процесс фронтенд-разработки с упором на технические аспекты: — Команда фронтенд-разработчиков. Зоны ответственности между теми, кто программирует UI (верстальщики), и теми, кто отвечает за бизнес-логику (Javascript-программисты). Идеальный состав команды. — Настроенный технологический процесс. Модульная организация (подготовка дизайна → разработка формата данных → создание шаблона → навешивание событий → тесты). — Разработка вместе с тестированием Unit-/DOM-тесты и подход PixelPerfect. — Вёрстка независимыми блоками и встроенный в приложение режим для вёрстки блоков.
Вёрстка WordPress тем - WP Kharkiv Meetup #1dima_kuzovlev
Из чего состоит тема? Зачем нужна дочерняя тема? Что такое иерархия шаблонов? Какие есть тонкости подключения CSS & JS? Для чего не стоит использовать functions.php?
Оптимальная архитектура масштабируемого плагина WordPress на Custom Post Type...Igor Sazonov
Доклад написан для WordPress Meetup #2 в Санкт-Петербурге. В докладе сравниваются файловые и логические архитектуры трех крупных плагинов на WordPress: WooCommerce, Easy Digital Downloads и Yoast WordPress SEO. Сравнив 3 архитектуры я взял наиболее оптимальные структуры и создал свою, при этом разместив ссылку на скачивание данного плагина. Скачав этот плагин Вы сможете понять его архитектуру. Много вещей конечно же можно улучшить, но самое главное посыл.
Робота з CSS. Методології, інструменти, оптимізаціяStfalcon Meetups
Антон Тимчук
Front-end developer компанії stfalcon.com
— Методології CSS, особливості переваг та недоліки
— Оптимізація завантаження CSS
— Огляд інструментів для оптимізації роботи з CSS
Сергей Бережной, Варвара Степанова "Как использовать БЭМ! вне Яндекса"Yandex
Есть мнение, что БЭМ! можно применять только в Яндексе и подобных больших компаниях для сложных проектов. Мы расскажем, почему это не так. Доклад ориентирован на любого веб-разработчика, а примеры будут основываться на таких задачах как: вёрстка HTML+CSS по PSD, написание JS компонент, сборка динамического сайта с использованием PHP/Django/RoR.
Я занимаюсь CSSO. В ходе работы над ним мне пришлось погрузиться в процесс парсинга CSS. В результате парсер (тот, что в CSSO) был не раз переписан. Пришло время сделать его отдельным инструментом.
Новый быстрый детальный парсер CSS, его AST, области применения и кое-что ещё.
Comparing Drupal CMS with Raw PHP coding. Presentation for AISEC conference ItEvent09 - http://aiesec-if.in.ua/news/88-it-event-anounce
inspired by Drupal Camp 2009 (http://camp09.drupal.ua/)
Back to Basics — Как подружить верстку с логикой? | Odessa Frontend Meetup #9OdessaFrontend
Верстать или не верстать? Многие фронтенд разработчики считают, что верcтка — это слишком «просто» и таким вопросом вообще не заморачиваются, а потому рассчитывают исключительно на готовые UI решения и костыли с !important. Но кто ты без своего Bootstrap’a? Константин Кулаксыз рассказывает о том, как знание верстки поможет сделать ваш код быстрее, лучше, сильнее и как не стать заложником JavaScript решений.
Структурированные данные, Юлия Тихоход, лекция в Школе вебмастеров ЯндексаYandex
Лекция Юлия Тихоход в Школе вебмастеров: «Структурированные данные на поиске»
https://academy.yandex.ru/events/webmasters_school/yawebm2015/
Что такое микроразметка и в чём её польза
Что такое микроразметка (семантическая разметка, семантическая микроразметка) и кому она нужна. Очень кратко — всё, что я знаю о применении семантической разметки поисковыми системами и другими веб-сервисами.
Передача данных в машиночитаемом виде
Какие ещё есть способы передать данные о сайте поисковым системам кроме микроразметки, особенности разных способов. Что бывает с плохими вебмастерами, которые пытаются обмануть поисковые системы и передать неверные данные.
Типы разметки
Из чего состоит микроразметка, какие бывают словари и синтаксисы. Популярные сочетания словарей и синтаксисов, как правильно выбирать нужную комбинацию для своего сайта.
Передача данных об интернет-магазине
Разбор семантической разметки: что в принципе доступно для разметки в интернет-магазине, что это даёт, а что можно не размечать вовсе.
Проверка правильности микроразаметки
Ошибки в микроразметке, способы их обнаружения и исправления. Популярные валидаторы микроразметки. Какие ошибки непременно нужно исправлять, а что можно игнорировать.
1. Bootstrap 3.2
быстрая адаптивная верстка (почти) без
знаний CSS и HTML
Igor Sazonov @tigusigalpa
04.10.2014 WordPress Meetup #3, Saint-Petersburg
http://wpspb.org
2. Этапы создания сайта
Бриф/ТЗ на дизайн и функционал сайта
Отрисовка дизайна в PSD
Верстка (HTML+CSS+JS)
Программирование или интеграция в CMS
3. Из чего состоит любой HTML-сайт
HTML
разметка
CSS
стили + эффекты CSS3
JS
эффекты + AJAX
4. Из чего состоит сайт на WordPress
HTML
разметка
CSS
стили + эффекты CSS3
JS
эффекты + AJAX
WordPress
5. Когда не было WordPress
• Самописная CMS (у каждого программиста была своя)
• Сайт на index.php (лапшекод, основанный на GET-параметрах,
например index.php?id=xxx)
• Разные мелкие CMS типа джумлы
• DreamWeaver и подобные программы
• ВЫВОД: WordPress на сегодняшний день унифицировал
управление сайтами, т.е. стал единым форматом (стандартом)
построения многих сайтов. По сути это уже фреймворк
6. Когда не было jQuery
• Скрипты писались на «голом» javascript
• Визуальных эффектов на сайтах было крайне мало и они были
простыми
• ВЫВОД: jQuery стал стандартом для визуальных эффектов на
javascript для большинства сайтов
7. А что же делать с CSS?
• Писать каждый раз свой CSS: долго, нудно
• Сделать свою наработку: лень, долго, нудно, трудно, много
• Тогда к Вам на помощь спешит Twitter Bootstrap!
8. Twitter Bootstrap
Самый популярный CSS-фреймворк для верстки (втч адаптивной) сайтов,
включающий в себя множество css-классов для быстрого построения
html-элементов. Включает в себя jQuery-зависимые эффекты.
Сайт с документацией: http://getbootstrap.com
GitHub: https://github.com/twbs/bootstrap
Текущая версия: 3.2.0
Дата разработки: август 2011, дата выпуска: февраль 2012
Разработчики: Mark Otto and Jacob Thornton (разработчики в компании
Twitter)
9. В чем преимущества Bootstrap
• Open-Source
• Экономия времени верстки
• Поддерживается мобильными устройствами
• Возможность адаптивной верстки
• Очень прост в применении
• Множество примеров
• Множество дополнений / плагинов / скинов
• Поддерживается всеми современными браузерами
• Много шаблонов и сайтов на WordPress используют Bootstrap
10. Что включено в Bootstrap
1. CSS-файл ядра Bootstrap (используйте
либо сжатый либо обычный)
2. JS-файл скриптов, они требуют
подключения jQuery
3. Файлы шрифтов для подключения иконок
как подключить: 3 файла
<link rel='stylesheet' id='bootstrap-css'
href='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/
css/bootstrap.min.css' type='text/css' media='all' />
<script type='text/javascript'
src='//yastatic.net/jquery/2.1.1/jquery.min.js'></scri
pt>
<script type='text/javascript'
src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js
/bootstrap.min.js'></script>
17. Сетка в Bootstrap (колонки сайта)
Как построить адаптивную верстку. Важные моменты
Максимум 12 колонок. Сумма префиксов должна быть равна 12 для строчки!
18. Сетка в Bootstrap (колонки сайта)
Как построить адаптивную верстку. Важные моменты
Документация: http://getbootstrap.com/css/#grid
.col-xx-n - <div class=“col-xx-n col-xx-n col-xx-n col-xx-n”>
Какими могут быть «xx»:
• «xs» – extra small (mobile portrait, мобильные телефоны вертик)
• «sm» – small (table portrait – например, iPad вертикально)
• «md» – средние размеры экрана (низкоформатн монитор, ноутбук)
• «lg» – широкие экраны мониторов
Как правило md = lg и можно обойтись только md (без lg)
Какими могут быть «n»:
Любыми от 1 до 12, главное чтобы в сумме своего xx они давали 12
(12 = 1 строчка!)
19. Сетка в Bootstrap (колонки сайта)
Как построить адаптивную верстку. Важные моменты
Все классы колонок .col-xx-n должны быть
внутри класса «row»!!!
Пример:
<div class=“row”>
<div class=“col-md-4”>1</div>
<div class=“col-md-4”>2</div>
<div class=“col-md-4”>3</div>
</div>
20. Адаптивная сетка
Как построить адаптивную верстку. Важные моменты
Делайте несколько классов, в
зависимости от размера устройства
например:
<div class=“col-xs-12 col-sm-
6 col-md-4 col-lg-3”>
На заметку: колонки можно делать внутри
ЛЮБОГО элемента, просто вставьте «row»
21. Полезные классы-помощники
• .container – один из основных классов в Bootstrap. Он делает сайт с
фиксированной шириной посередине, без него сайт расползается на всю
ширину
• .img-rounded – применяется для тега <img> (картинки). Скругляет углы
• .img-circle – делает изображение круглым
• .pull-left – «флоатит» элемент к левому краю с обтеканием справа
• .pull-right – то же самое наоборот
• .hidden-xs, .hidden-sm, .hidden-md, .hidden-lg – скрывает элемент для нужной
группы устройств
• .img-responsive – часто используемый класс для <img>. Делает картинку
адаптивной!
• .text-left, .text-center, .text-right – тексты и их расположение (слева, по центру,
справа)
22. Полезные ресурсы по Bootstrap
• http://expo.getbootstrap.com/resources/ - список проверенных плагинов
• http://bootstrapbay.com/blog/bootstrap-resources/ - куча всего!
• http://builtwithbootstrap.com/ - список красивых сайтов на Bootstrap
• https://wrapbootstrap.com/ - еще много шаблонов на Bootstrap
• + куча сайтов из Google!