Всем доброго дня! На этой неделе аккаунт веду я, @juwain, смотритель нашего уютного @cssunderhood.

Я живу в Санкт-Петербурге, работаю в команде @htmlacademy_ru. В свободное время ищу авторов @cssunderhood и смотрю, чтобы всё было тип-топ.

Примерный план:

Пн знакомство
Вт образование, развитие
Ср баги в бро и тестирование
Чт технологии
Пт оффтоп, Спб, увлечения
Сб, Вс фристайл

Вкратце, мой «творческий» путь: переезд в Спб > turbina.ru > radario.ru > стартап gdeprofi.ru > 2nova.ru > фриланс > htmlacademy.ru.

Коротенько расскажу про прошлые проекты: чем занимался и чему научился.

Родился в «чащах юга» — городе Лермонтов, учился в Таганроге в радиотехническом универе, перебрался в Спб и прижился тут среди мхов и болот.

Начинающим: по возможности переезжайте в города побольше, где есть возможность работать в команде разработчиков или ищите удалённую команду.

turbina.ru: небольшая команда, занимался вёрсткой, говнокод JS, ошибки новичка, велосипедостроение, редизайн; HTML, CSS, jQuery, PHP, Smarty

turbina.ru: расстались плохо, из-за максимализма резко ушёл, до сих пор стыдно, но зато понял, что надо по-человечески к другим относиться.

radario.ru: HTML, LESS, .NET, Backbone, по сути стартап, пробы идей и ошибки, стократные переделки и как следствие много мусорного кода.

radario.ru: понял, что важна модульность при написании разметки и стилей, начал задумываться и разбираться нестихийном написании скриптов.

radario.ru: в итоге проект подзавис на некоторое время без денег, потом всё разрулилось, но я ушёл, так у меня не было денежной «подушки».

gdeprofi.ru: HTML, LESS, .NET, jQuery. Первый мой сервис «с нуля», велосипедостроение, много JS-кода, махина MVC от Microsoft.

gdeprofi.ru: проект закрылся, «съев» инвестиции. На фронтенде было всё ок вполне, но бекенд получился тяжёлый. И идея особо не выстрелила.

gdeprofi.ru: понял, что лучше не связываться со стеком .NET, препроцессоры — наше всё, а удалёнка — добро.

2nova.ru: после краха gdeprofi.ru был личностный кризис, решил попробовать себя в проектировании интерфейсов (UX). Было прикольно, но не моё

2nova.ru: UX не пошёл, было сложно общаться с заказчиками, решил вернуться во фронтенд со свежими силами и нырнул с головой во фриланс.

Зато работать надо много, в итоге перегорел на работе 😡 На Upwork (oDesk) знакомые хорошо зарабатывают, но там надо прокачаться, а зп в $.

@cssunderhood до сих пор не ругаю дизайнеров, как многие, а отношусь с сочувствием даже

В итоге захотелось делать что-то значимое, а не клепать сайты только ради денег.

Начал искать подходящие проекты в Спб и нашёл @htmlacademy_ru. Идея мне понравилась: нести ученья свет, помогать начинающим с вёрсткой.

В Академии я занимаюсь в основном интерактивными курсами по HTML и CSS: разбор по косточкам семантики HTML-элементов и CSS-свойств.

Также участвую в интенсивных курсах по вёрстке, с онлайн-консультациями и непосредственным личным наставничеством.

Интенсивы, образование и личностное развитие подробно обсудим завтра. А про курсы немного расскажу сейчас.

@meuwka @cssunderhood вот и я стал учить HTML именно по этой причине. Достали творческие заказчики. Хочется более конкретизированную среду.

Сначала пишется сценарий, собираются задания из HTML и CSS, затем создаются проверки на JS (сейчас уже vanilla), пишутся тексты.

Ещё в Академии делаю всякие прикольные и полезные штуки типа лендинга htmlacademy.ru/intensive/html… или кодгайда htmlacademy.github.io/codeguide/.

Привет. Вчера рассказал про себя и о работе, а сегодня пойдёт речь про образование и развитие.

@GruZZ @cssunderhood @htmlacademy_ru так что с вакансиями? Я готовый;)

Откуда брать годную информацию? У меня сейчас это тематические рассылки и твиттер. Раньше собирал всё в RSS, но сейчас уже неактуально.

Тут важный момент: однажды я смирился с мыслью, что всего не запомнишь и не прочитаешь, так что новой инфы не должно быть слишком много.

Обычно просто слежу, что новое появилось во фронтенде. Если как-то можно применить для моих текущих процессов — тыкаю подробнее.

Я к чему клоню: за всеми технологиями не угнаться, всего не суметь и не запомнить одновременно.

Если вам, что-то понадобится, в нужный момент можно найти подходящие материалы. Не нужно стараться разом прочитать и запомнить все ленты.

Попытки вычитать все ленты будет больше похожи на «отстрел по мишеням», как сказал один знакомый. Полезного в таком мало.

Тематические еженедельные рассылки тем и хороши, что приходят раз в неделю и их читаешь как газету: что там с мире произошло.

@cssunderhood в data.css

Ладно, я за работу. Позже продолжу вещать ✌️

@neonick @cssunderhood 36 которые прославились)

@cssunderhood @kost @dshster был скриншот, где одна картинка грузится быстрее, чем 10 мелких. Суммарный размер одинаковый.

@cssunderhood @kost тут как раз свежая статья про http2 smashingmagazine.com/2016/02/gettin…

@kost @cssunderhood @dshster еще как нужны. Http2 не отменяет время на загрузку картинки по ховеру.

@cssunderhood лучше не спрайт, а data:uri в отдельном CSS – меньше памяти выжрет при более-менее крупных спрайтах

@iamakulov_ @cssunderhood где-то читал, что скрытые части CSS-sprite’ов грузят оперативку, тогда как в data:uri их нет

@iamakulov_ @GrawlCore @cssunderhood браузер рендерит картинки uncompressed и 20Кб спрайта могут 10Мб памяти занять (ради 1-2 иконок)

верстальщик из Sketch найдись. @cssunderhood помоги ретвитом

@cssunderhood ретвитни, пожалуйста twitter.com/VovanR/status/…

Привет. Сегодня поздно, работа. 😬 Вчера поговорили про обучение и развитие, а сегодня затронем тему ошибок в браузерах.

Я сейчас готовлю доклад про ошибки в реализации спецификаций HTML и CSS в браузерах, и мне нужна ваша помощь.

Я закину несколько опросов, поголосуйте, пожалуйста. 🙏

[Опрос] Сталкивались ли вы с багами в реализации спецификаций HTML и CSS в современных браузерах?

[Опрос] Как вы поняли, что браузер неправильно отображает HTML/CSS?

[Опрос] Сообщали ли вы о багах HTML/CSS в браузерах их разработчикам?

[Опрос] Какой современный браузер «багует» с HTML/CSS больше всего по вашему мнению?

А пока идёт голосование, расскажу что-нибудь по теме.

Вот хорошая (но немного олдовая) статья Лиа Веру на тему как и зачем репортить баги браузеров smashingmagazine.com/2011/09/help-t…

Не вспоминая об ужасах старых IE, мне в современных браузерах баги встречаются.

Чаще всего баги бывают в Сафари, к сожалению. Ну и традиционных глюки в IE11.

Полтора года назад начал работать на маке, до этого не тестировал в Сафари вообще.

Так как разрабатываю на маке, то всё тестирую визуально в основных браузерах: Chrome/Opera, FF, Safari.

Так мак не особо мощный (эйр), то не заморачиваюсь с виртуалками.

Для винды есть отдельный ноут просто. Там тоже есть основные браузеры + IE11 и Edge.

Но вот вопрос, как полноценно тестировать вёрстку в Сафари, если есть только Виндоус, для меня так и не решён. Виртуалка с OSX?

На маке стоят «ночные» версии браузеров. Бывает, что глюки в стабильном билде часто бывают пофикшены в ночной сборке.

@cssunderhood пробовал виртуалку vmware, работает очень медленно и крайне нестабильно. Проще browserstack использовать.

@Bizi @cssunderhood не понимаю людей, которые мучаются на винде. 16 ГБ оперативки + SSD и всё летает.

@cssunderhood @Bizi тут нужен более радикальный подход. Почек на долго не хватит. Предложу продавать умения работать ;-)

@cssunderhood Я когда-то собрал хакинтош по руководствам остюда tonymacx86.com и дополнительно поставил виртуальную винду. ТестилIE

Ок, завтра тогда дообсудим результаты голосования. А пока продолжим про образование 🎓

@cssunderhood ну давай я начну. Я четвертый год подряд участвую внутри Яндекса в определенных образовательных активностях

@cssunderhood сначала это было ШРИ, теперь мы немного сместили акценты в Екб и сотрудничаем с УрФУ

@cssunderhood в 2014 проводили экспериментальный спецкурс на основе лекций из ШРИ, получилось комом, но результат был. Даже взяли стажера

@cssunderhood в этом году читаем очень сильные курсы. Стартовало 120 человек, до 2-го семестра дошли 32

Считаю, что залог качественного обучения — практика. Чем больше практикуешься, тем быстрее чего-то достигаешь.

Важен наставник. Когда учишься персонально с кем-то, появляется больше ответственности, хочется не лажать, а делать успехи.

При этом, когда набиваешь шишки или заходишь в тупик, наставник растолкует и подбодрит. Самостоятельно можно в моменте неудачи приуныть.

Насчёт предмета практики: круто сразу учиться на проекте, который по душе, а не каких-то абстракциях.

В интенсивном курсе Академии студент верстает свой личный проект с самого начала, паралл-но изучая теорию и разбирая типовой учебный макет.

Собственно, подход «личный проект + мелкие прикладные примеры + теория» не какое-то откровение, он везде применяется.

Когда я учился играть на басу, у нас было большое произведение к экзамену, много мелких технических разборов + необходимый минимум теории.

На сегодня всё. Завтра разберём результаты голосования и перетрём за технологии. Ну и про образование продолжим 😀

@wgetus @cssunderhood ещё saucelabs.com: дешевле, но поддерживает меньше браузеров.

@cssunderhood 1 семестр – HTML/CSS и JavaScript с нуля

@cssunderhood 2 семестр – применение оного в реальном веб-сервисе, т.е помимо прикладных тем разные деплои, тесты, инфраструктура...

@olmokhov @cssunderhood Как попасть на эти курсы?

Решила внести свой скромный вклад в @htmlacademy_ru в качестве наставника HTML/CSS. Может еще кто-то хочет - решайтесь) Люди требуются.

Привет. Пройдёмся по результатам вчерашних голосований.

Примерно две трети опрошенных сталкивались с багами HTML/CSS в современных браузерах. Всё так. War never changes. pic.twitter.com/JRZ29n2qyP

Как заметить баг? Самое простое — проверить, как ведёт себя вёрстка в разных браузерах. pic.twitter.com/QH6hTW4NVj

Если в каком-то бро вёрстка «ломается», самое то — почитать спецификацию или погуглить, как должно быть на самом деле.

Лучше всего — прочитать спецификацию, т.к. возможно в неё были внесены изменения, которые ещё не внедрили во все браузеры.

Например, раньше align-content распространялось только на многострочные флекс-контейнеры.

А теперь align-content действует и на однострочный флекс-контейнер. В Сафари это изменение спецификации учтено, а во всех остальных — нет.

Вот изменение в спеке w3.org/TR/css-flexbox….

@cssunderhood Показательный пример: philipwalton.com/articles/how-t… pic.twitter.com/yu8SGG4jkq

Примерно половина опрошенных не хочет или ленится писать багрепорты разработчикам браузеров. pic.twitter.com/ZvsAqFAt6g

Радует, что кто-то всё таки заботится о багах. Хотя очень часто бывает, что когда вы нашли баг, он уже описан и ждёт решения в трекере.

Чемпион по багам сегодня — Сафари. На мой взгляд это потому, что у них очень длинный цикл релизов. pic.twitter.com/K8iEcOVZz2

Описываешь баг во всех красках, тратишь время на это, а кто-то в комментах выдает #1894. Досадно. 🙂 twitter.com/cssunderhood/s…

Традиционно много багов замечают в Edge или IE. На мой взгляд, это всё плохое наследство. Edge будет со временем хорош.

@cssunderhood помню что в фф раньше(не знаю как сейчас) overflow:hidden не убирал скролл у мультипл селекта. в багтрекере даже была ветка...

@cssunderhood pic.twitter.com/XHfSY81PH3

@cssunderhood мне Edge на удивление понравился(не по части dev tools). А для Firefox LiveEmmet существует?

Привет, сегодня оффтоп и cssundehood.

Сразу опрос, чтоб понять куда мы идём и надо ли туда идти вообще. 😄

[Опрос] Нужен ли ещё @cssunderhood?

Напишите, пожалуйста, что бы вы хотели изменить в этом бложике. Что нравится, а что нет. Можно в реплаи или личку.

@cssunderhood Нужен, у вас упоротых меньше, чем в @jsunderhood.

Предложите, кого бы вы хотели увидеть автором @cssunderhood?

Если хотите провести неделю, напишите в реплай, личку или @juwain. ✌️

@cssunderhood периодически лажают на том, что завязано на железе, мб из-за широкого диапазона устройств.
Пример - летом border-radius и тени

@cssunderhood нужен. Хочется читать, как люди стали такими. А чувак, который говорил, что версталы отстой просто сделал так неделю! Бест эва

Крутая конференция у @webstandards_ru wsd.events.

В Петербурге @pepelsbey недавно организовал митап @pitercss. Рекомендую!

Ещё хочу выделить ребят @frontendfellows @spb_frontend. Добра вам и успехов!

Большая конференция ещё была в прошлом году @frontend_union. Смотрел трансляцию, интересно было и

@cssunderhood @fronttalks_en @FrontTalks не забываем, Яндекс Суботник #yasubbotnik

@_nezed @cssunderhood Или вот ещё баг (делал воркэраунд для него): github.com/alexandersimoe…

@koderhan @cssunderhood, мы будем записывать и транслировать следующее в марте

@sapegin на мой взгляд верстка — прикладная специальность. Ты ее совмещаешь с разработкой или с дизайном
@cssunderhood @dshster @juwain

@cssunderhood @sapegin приди, спешл going to jsunderhood

@cssunderhood однозначно нужен, потому что этот акк гораздо ближе к реальности, чем @jsunderhood

Результат вчерашнего опроса: 85% за продолжение @cssunderhood. Всем спасибо! Значит продолжаем.🤘

Как мне кажется, @cssunderhood больше о людях, а @jsunderhood больше о технологиях. О людях узнавать интереснее.

@sapegin нет, ну правда @jsunderhood часто выглядит так, что соберутся олдскульные фронты и говорят о высоких материях @cssunderhood

@Bizi @cssunderhood @jsunderhood технологии бывают слишком специфичны

@myjsalterego @cssunderhood @sapegin @dshster @juwain забавно, что только в России существует роль участника в проекте "верстальщик"

@kofeeanon Как раз хотел пошутить, что верстальщиков не существует ;–) @myjsalterego @cssunderhood @dshster @juwain

@kofeeanon @cssunderhood @myjsalterego @sapegin @dshster @juwain на Западе верстальщики тоже есть, хоть и без собственного названия.

@kofeeanon @myjsalterego @cssunderhood @sapegin @dshster @juwain не только в России

@sapegin @cssunderhood наше выделение верстальщиков в отдельную профессию я нахожу исключительно честным и правильным.

@sapegin @cssunderhood главное преимущество верстальщиков в том, что они могут начать работать после двухмесячных курсов.

@sapegin @cssunderhood и уже по пути могут изучать достаточно большой объём информации по JS

@sapegin @cssunderhood верстальщик — как профессия — значительная причина такого огромного количества отечественных фронтендеров.

Моя смена подходит к концу. Буду раз продолжить общение в твиттере @juwain и инстаграмме instagram.com/juwain/. Счастья вам и добра! ✌️