Веб-стандарты

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Ольга Алексашенко, Вадим Макеев, Алексей Симоненко

Темы

00:00:00 Интро
00:00:13 События
00:01:06 Вертикальный ритм
00:07:22 Sass разрешил
00:16:03 Переменные в препроцессорах
00:30:16 Susy жива
00:32:56 Экономия на классах
00:41:06 Чёрная магия CSS
00:46:02 ES 2017
00:50:30 Полезный npx

События

• UralJS №4 в Екатеринбурге 20 июля
• WebDev Meetup №3 в Новосибирске 19 августа

Вертикальный ритм

• CSS line-height-step introduced to control vertical rhythm

Sass разрешил

• Sass 3.5 is Released

Переменные в препроцессорах

• Переменные в препроцессорах Less и Sass

Susy жива

• Understanding Spread in Susy3

Экономия на классах

• Reducing CSS bundle size 70%
• Минимизация классов в HTML

Чёрная магия CSS

• CSS Isn’t Black Magic

ES 2017

• ES8 вышел и вот его основные новые возможности

Полезный npx

• Представляем npx: утилиту для запуска npm-пакетов

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Ольга Алексашенко, Вадим Макеев, Алексей Симоненко

Темы

00:00:00 Интро
00:00:13 События
00:05:33 Так пора гриды?
00:18:45 Edge и IE
00:23:52 Сетки и стримеры
00:30:39 Будущее CSS
00:39:12 CSS is Awesome
00:46:52 Примеры ARIA
00:49:38 Фокус и аутлайн
00:58:12 JS-импорты
01:04:10 Подкасты

События

• LvivJS во Львове 26 августа
• Moscow Frontend Conference в Москве 2 сентября
• CSS-Minsk-JS в Минске 10 сентября
• FrontTalks в Екатеринбурге 16—17 сентября
• Frontend Dev Conf в Минске 30 сентября
• Fronteers Conference в Амстердаме 5—6 октября
• FrontFest в Москве 18 ноября
• HolyJS в Москве 10—11 декабря

Так пора гриды?

• Правда ли уже пора использовать CSS Grid Layout?

Edge и IE

• New Microsoft Edge features
• An update on disabling VBScript in IE 11

Сетки и стримеры

• Building a Grid System with CSS Custom Properties
• Lessons from my first year of live coding on Twitch

Будущее CSS

• What’s next for CSS?
• W3C: CSS current work

CSS is Awesome

• CSS is Awesome

Примеры ARIA

• WAI-ARIA Authoring Practices

Фокус и аутлайн

• Как фокус помогает

JS-импорты

• Intent to Implement: JavaScript module import

Подкасты

• Подкасты про фронтенд

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Ольга Алексашенко, Вадим Макеев, Алексей Симоненко

Темы

00:00:00 Интро
00:00:15 События
00:03:25 Разнообразие браузеров
00:12:57 HTML для людей
00:23:23 PE и GD в Шортах
00:25:40 Гриды с фолбэком
00:33:06 Фокус с клавиатуры
00:38:54 Трюки со шрифтами
00:47:31 Рефакторинг и ответственность
00:51:39 Uber в браузере
00:57:12 Фича из CS в ES

События

• Ru Frontend Events
• Typetersburg 5—6 августа
• Pitercss_meetup в августе-сентябре
• WSD осенью-зимой

Разнообразие браузеров

• Release Notes for Safari Technology Preview 34
• Because Browser Diversity Is Good For The Web

HTML для людей

• The Developer’s Edition of HTML makes a comeback
• HTML Living Standard (WHATWG)
• HTML 5.2 Draft (W3C)

PE и GD в Шортах

• Прогрессивная деградация

Гриды с фолбэком

• От бутстрапа — к CSS-гридам
• CSS Grid in production on the Mozilla website!

Фокус с клавиатуры

• Keyboard-Only Focus

Трюки со шрифтами

• Font Aliasing, or How to Rename a Font in CSS
• Unquoted font family names in CSS

Рефакторинг и ответственность

• Front End Center: Single Responsibility Components
• React: Why Accessibility?
• Create-react-app now warns if JS bundles exceed 500KB

Uber в браузере

• Engineering a High-Performance Web App
• Каждое обновление Убер 270 мегабайт

Фича из CS в ES

• Optional Chaining Operator (Stage 1)

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Вадим Макеев, Алексей Симоненко

Темы

00:00:00 Интро
00:00:35 События
00:07:52 Firefox
00:17:06 Гриды в Edge
00:19:30 Зачем флексы
00:21:58 JS-модули в HTML
00:25:37 Webpack 3
00:34:40 CSS-фрагменты

События

• Как прошёл Питер-ЦСС
• PiterCSS Conference Review
• OdessaJS в Одессе 1—2 июля
• LvivJS во Львове 26 августа
• FrontTalks в Екатеринбурге 16—17 сентября
• JSConf Budapest 2017 26—27 октября

Firefox

• Новинки Firefox 54 для разработчиков
• Инспектор раскладок в Firefox Nightly

Гриды в Edge

• Новые гриды в Edge Insider Preview

Зачем флексы

• Кому нужны флексы, HTML Шорты

JS-модули в HTML

• Intent to ship script type=module in Blink

Webpack 3

• Webpack 3: Official Release

CSS-фрагменты

• Черновик CSS Overflow L4

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Ольга Алексашенко, Вадим Макеев, Алексей Симоненко

Темы

00:00:00 Интро
00:00:14 События
00:05:23 DirecTV
00:11:16 Safari
00:23:35 Chrome
00:29:48 Edge
00:35:14 Гриды
00:39:32 Шорты
00:43:55 Стример Юра
00:46:45 Stylelint
01:02:03 Node.js

События

• pitercss_conf 16 июня
• NodeSchool в Новосибирске 17 июня
• DevConf 17 июня
• OdessaJS 1—2 июля

DirecTV

• DirecTV Now will only support Chrome on desktop starting in July

Safari

• What’s new in Safari 11
• Auto-Play Policy Changes for macOS
• Assembling WebAssembly
• JSC Loves ES6

Chrome

• What’s New In Chrome 59 DevTools

Edge

• Edge web platform features
• Grids: still behind a flag

Гриды

• Как работает функция minmax в гридах

Шорты

• HTML Шорты: зачем нужны заголовки

Стример Юра

• Logo animation
• Responsive landing page

Stylelint

• Autofixing in stylelint
• Prettier 1.4.0

Node.js

• Node.js canary builds

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Вадим Макеев, Алексей Симоненко

Гости: Валерий Сорокобатько

Темы

00:00:00 Интро
00:01:50 События
00:09:44 Safari TP
00:16:42 Нативный календарик
00:20:53 Разработка на телефоне
00:26:39 Гриды на практике
00:28:15 Кастомные свойства
00:35:14 Магия лейблов
00:37:23 Флексы вглубь
00:42:32 Node.js и npm
00:51:00 CSS-in-JS

События

• HolyJS 2—3 июня
• UralJS: Code Retreat 10 июня
• JS Party в Новосибирске 7 июня
• RND.JS №3 в Ростове-на-Дону 24 июня
• OrelJS №1 в Орле 24 июня

Safari TP

• Release Notes for Safari Technology Preview 31

Нативный календарик

• Date picker in Firefox Nightly

Разработка на телефоне

• Writing software using a phone!

Гриды на практике

• Learning CSS Grids

Кастомные свойства

• Зачем кастомные свойства?

Магия лейблов

• Label-to-Input States

Флексы вглубь

• 11 вещей, которые я узнал, читая спецификацию flexbox

Node.js и npm

• Обзор изменений в новом мажорном релизе Node 8
• npm@5 теперь npm@latest

CSS-in-JS

• The new CSS workflow in Webpack
• Письмо любви CSS
• CSS в JS: будущее компонентных стилей
• Rockey. Motivation and Requirements
• I swore never to use CSS in JS, here are 6 reasons why I was wrong
• A Unified Styling Language

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Ольга Алексашенко, Вадим Макеев, Алексей Симоненко

Темы

00:00:00 Интро
00:00:12 События
00:07:57 Маркетинг Firefox
00:16:44 Npm 5 догоняет
00:29:00 Доступность
00:36:12 Почему шорты и шоу
00:41:10 CSS-in-JS
00:49:51 Webpack и SPA
00:58:02 Гриды
01:01:13 Новичкам

События

• Front-Trends
• Drone hijacked on stage
• HolyJS 2—3 июня
• Frontend Conf 5—6 июня
• Pitercss_conf 16 июня
• Fronteers 5—6 октября
• DevConf 17 июня
• OdessaJS 1—2 июля
• FrontTalks in English?

Маркетинг Firefox

• Browse Against the Machine

Npm 5 догоняет

• Npm: v5.0.0

Доступность

• Just landed behind a flag in Canary: inert
• Why headings and landmarks are so important

Почему шорты и шоу

• Зачем нужен БЭМ вне Яндекса?

CSS-in-JS

• A Unified Styling Language
• Let There Be Peace On CSS
• London CSS Meetup, January 2017
• Андрей Оконечников на pitercss_conf
• Андрей Оконечников в 42 выпуске

Webpack и SPA

• Введение в философию Webpack
• Custom Elements v1: Reusable Web Components
• Shadow DOM v1: Self-Contained Web Components

Гриды

• Learn CSS Grid
• Accurately checking for CSS Grid support in Edge

Новичкам

• Статьи Артёма Горбунова про типографику и вёрстку
• Открыть папку или файл из терминала

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Вадим Макеев, Алексей Симоненко

Темы

00:00:00 Интро
00:00:16 События
00:03:45 Samsung
00:12:48 Safari
00:20:07 Google I/O
00:21:49 Git в Atom
00:32:31 GitHub Desktop
00:40:32 Box Alignment
00:46:58 Lazy Image
00:53:07 Лия и Mavo
00:59:33 ППК и формы
01:07:44 Фронтенд заговорил
01:10:09 Perf.HTML
01:12:11 ES-модули

События

• Видео с pitercss_meetup №13
• Pitercss_conf 16 июня

Samsung

• Announcing Samsung Internet v5.4 stable!
• Hacker News readers as Progressive Web Apps

Safari

• Safari Technology Preview 30
• Responsive Design for Motion

Google I/O

• Google I/O 2017 All Sessions

Git в Atom

• Git and GitHub Integration comes to Atom

GitHub Desktop

• How Four Native Developers Wrote An Electron App

Box Alignment

• Box alignment: justify-content: space-evenly
• Свойства для выравнивания всего и их новые тайны
• Наклейки для бейджей WSD

Lazy Image

• Lazy-image

Лия и Mavo

• Introducing Mavo: Create Web Apps Entirely By Writing HTML!

ППК и формы

• Native form validation — part 3

Фронтенд заговорил

• Как правильно вставлять SVG?
• Frontend Weekend

Perf.HTML

• Understanding the network bottleneck
• Identifying the JavaScript slowdown
• Profiling Paint Perf

ES-модули

• Module specifiers: what’s new with ES modules?
• Native ES Modules — Ready for Prime Time?

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Ольга Алексашенко, Вадим Макеев, Алексей Симоненко

Темы

00:00:00 Интро
00:00:28 События
00:02:28 Edge
00:08:22 Opera
00:10:36 Electrino
00:16:10 Автопрефиксер
00:26:18 Меню-кнопка
00:33:53 Ирония
00:38:05 Валидация форм
00:48:51 Логичные размерности

События

• Pitercss_meetup №13 в Питере 17 мая
• Moscowcss №3 в Москве 18 мая
• MinskJS в Минске 18 мая
• ITsubbotnik EPAM в Москве 27 мая
• UralCSS №1 в Екатеринбурге 9 июня
• Pitercss_conf 16 июня

Edge

• Edge: What’s new and what’s next
• What’s new in EdgeHTML 15
• PWA discoverability on Windows: Bing, Store
• PWA manifest to create the Store listing
• PWA on Windows 10 as WebAPK on Android

Opera

• What’s new in Chromium 58 and Opera 45

Electrino

• Put your Electron app on a diet with Electrino

Автопрефиксер

• Autoprefixer 7.0 and Browserslist 2.0

Меню-кнопка

• Menus & Menu Buttons
• Inclusive Menu Button
• React Menu Button

Ирония

• HTML сломан!
• Прогрессивное улучшение меня расстраивает

Валидация форм

• Native form validation — part 1
• Native form validation — part 2

Логичные размерности

• CSS Logical Properties and Values

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn

Простой способ сказать нам «спасибо» и попасть в закрытый чат:

• Boosty
• Patreon

Ведущие: Вадим Макеев, Алексей Симоненко

Темы

00:00:00 Интро
00:00:29 События
00:04:17 Бета Chrome 59
00:11:12 Safari TP 29
00:18:18 Samsung на десктопе
00:26:28 WebP торт
00:33:01 HTML Шорты
00:35:26 Normalize.css
00:39:59 CSS 5 уровня
00:44:15 CSS-in-JS
01:15:16 ES-модули

События

• Видео с UralJS №3 в Екатеринбурге
• Видео с PiterJS №14 в Питере
• Pitercss_meetup №13 в Питере 17 мая
• Pitercss_conf 16 июня
• FrontDays в Тольятти 20 мая
• Front-Trends в Варшаве 24—26 мая
• HolyJS в Питере 2—3 июня
• Frontend Conf в Сколково, 5—6 июня

Бета Chrome 59

• Chrome 59 Beta
• Getting Started with Headless Chrome

Safari TP 29

• Release Notes for Safari Technology Preview 29
• The :focus-within pseudo class

Samsung на десктопе

• Samsung DeX brings a new Dimension to the Mobile Web

WebP торт

• Wait, WebP is actually worth it

HTML Шорты

• Зачем задавать картинку через background-image

Normalize.css

• Normalize.css v6/v7 diff
• Postcss-normalize

CSS 5 уровня

• Первый черновик CSS 5-го уровня

CSS-in-JS

• Stop using CSS in JavaScript for web development
• Ran it on Safari it’s like 380x times worse
• Is CSS-in-JS really bad for UX?
• A Unified Styling Language
• With real empathy for CSS devs

ES-модули

• ES6 Modules in Chrome Canary (M60+)
• ES Modules in Browsers

Читайте новости

• Telegram
• X
• VK
• Facebook
• Mastodon
• Bluesky
• LinkedIn