Привет! На этой неделе с вами Андрей Романов (andrew-r.ru) из Омска.

План на неделю: pic.twitter.com/6iU9GMroMu

Коротко о себе. Мне 18 лет, работаю в офисе (в безымянной команде разработчиков) и удалённо (с inn.ru). Время от времени фрилансю.

Верстаю уже больше двух лет, последние полгода развиваюсь в сторону фронтенда (сейчас работаю с реактом). В планах также изучение дизайна.

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

Тема сегодняшнего дня — как следить за новостями фронтенда. Постараюсь рассказать о всех известных мне источниках информации и их +/-.

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

Информацию можно брать из первоисточников (подписываться на блоги), а можно пользоваться разными дайджестами и подборками.

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

Если вы хотите следить за первоисточниками, то есть смысл завести РСС-читалку и собирать в неё интересные блоги.

Кстати, если кто-то из подписчиков регулярно читает РСС-фиды, не стесняйтесь посоветовать удобную читалку.

@cssunderhood Newsflow (itunes.apple.com/us/app/newsflo…), если под MacOS. Самое удобное из того, что я пробовал. Есть интеграция с RSS-агрегаторами.

@cssunderhood давно пользуюсь reederapp.com

@cssunderhood feedly.com сразу нашёлся как гугл свой сервис стал прикрывать.

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

Самая известная подборка новых статей и инструментов еженедельно публикуется на хабре — vk.cc/4UrEcE.

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

В итоге половина ссылок отправляется в закладки, то есть в долгий ящик.

Немного удобнее читать еженедельные имейл-рассылки. Обычно у них есть какая-то узкая тематика, так что неинтересных ссылок в них меньше.

Четыре мои любимые рассылки:

…

Ещё парочка неплохих:
Sass News — sassnews.com
The Smashing Email Newsletter — vk.cc/4UrRTf

У «Академии HTML» есть хорошая ежемесячная рассылка с новостями и макетами для практики в вёрстке — htmlacademy.ru/email

Если знаете ещё хорошие рассылки, делитесь ими :)

@cssunderhood & more @umaar umaar.com/dev-tips/

@cssunderhood Вот, например: gist.github.com/sapegin/ed5b43…

@cssunderhood вот по дизайну и верстке: ewebdesign.com и css-tricks.com. А вот по ангуляру: ng-newsletter.com.

@cssunderhood с вашей помощью только что нашла Mobile Web Weekly – выглядит очень интересно mobilewebweekly.co

@cssunderhood По анимациям — valhead.com/newsletter/, webanimationweekly.com SVG — svgweekly.com

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

Из русскоязычных я время от времени слушаю frontflip.me, radiojs.ru и недавно появившийся soundcloud.com/web-standards

Раньше Артём Гринберг (более известный как Sorax) записывал крутые подкасты — vk.cc/4UuvFI, но сейчас он, видимо, занят другим.

Ещё из русскоязычных есть uwebdesign.ru/category/podca…. Советуйте другие русскоязычные подкасты, если я что-то упустил.

Англоязычные подкасты, которые я могу порекомендовать — fivejs.codeschool.com, devchat.tv/js-jabber, shoptalkshow.com.

@cssunderhood radio-qa.com 5minphp.ru devopsdeflope.ru

@cssunderhood Ещё youtube.com/channel/UCO1cg… и javascriptair.com

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

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

Так я создал сообщество в ВК и начал туда постить всякие интересности. Преимущества такого формата — теги, поиск, прикрепление файлов.

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

Собственно, развею миф о том, что в ВК мало пабликов по фронтенду.

Наиболее крупные и живые:

vk.com/htmlacademy
vk.com/forwebdev
vk.com/wtools
vk.com/jsraccoon

… vk.com/webstandards_ru
vk.com/webtackles
vk.com/uwebdesign
vk.com/agragregra
vk.com/frontendinspir…

… vk.com/postcss
vk.com/moscoding
vk.com/codehipsters

@cssunderhood можно еще в Tumblr залезть, там много англоязычных авторов по фронту, если не отвлекаться на порно-гифки =)

Захотел запилить опрос, разочаровался, увидев ограничение на количество вариантов (максимум 4). @sapegin, да, твиттер намного лучше вк! ;–)

В заключение дня держите старый сайт о том, как быть в курсе новинок фронтенда — uptodate.frontendrescue.org pic.twitter.com/QSj84lj5FB

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

@bladedances @cssunderhood поддержка старых IE называется «изящная деградация». Выкостыливание IE «под больших» — не поддержка, а изврат:)

Добрый день! Утром немного пообщались на тему флексбокса, пришла пора переходить к основной теме — образование.

Сразу опрос.

У вас есть высшее образование?

А теперь опрос для тех, кто ответил «Да» в прошлом :)

Вам пригодилось высшее образование?

@cssunderhood Тут важно уточнить: пригодился диплом, а не знания ;-)

@cssunderhood, на эту тему после получения диплома написал заметку → bizikov.ru/posts/diplom/

Уточняем: вам пригодился диплом или полученные знания?

@cssunderhood По опыту: диплом росвуза пригодится только если будешь устраиваться в крупную российскую (!) компанию на уровень Senior.

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

@cssunderhood Если говорить о знаниях, то никакого углубления, но база, позволяющая понять, чего хочешь, и пойти куда угодно в IT, пожалуй.

@cssunderhood по моему опыту, форм. наличие «левого» всё-таки дает пару очков при трудоустройстве. Но отсутств. целевого бьет по самооценке(

Поделюсь своим мнением насчёт высшего образования и образования в России в целом.

Для начала скажу, что в прошлом году поступил в технический ВУЗ в своём городе и через три месяца решил уйти.

Ушёл из-за обилия абстрактной математики, странно выстроенной программы и отсутствия желания тратить на всё это дело четыре года жизни.

@cssunderhood аналогично, только проучился год. На втором понял, что меня там не научат чему-то полезному, ушел.

Многие говорят, что всё зависит от ВУЗа. Однако проблема даже не столько в ВУЗах, сколько в самих студентах (абитуриентах).

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

Направление называется «Математическое обеспечение и администрирование информационных систем».

Проблема, собственно, в том, что люди поступают в ВУЗ без понимания того, зачем им это вообще нужно и что они будут делать дальше.

Если человек знает, что он хочет получить от ВУЗа и какие у него цели — он сам найдёт ВУЗ, в котором нормально учат тому, что нужно.

Конечно, в России сложно найти такой ВУЗ, но самообразование или зарубежные учебные заведения тоже никто не отменял :-)

@cssunderhood Стоить будет в районе 1000€ в год, можно на русском учиться. Магистратуру добьёшь уже в Германии, США или Англии.

Хорошие ВУЗы могут дать фундаментальные знания по программированию (алгоритмы, необходимый мат. аппарат).

Знания по специальности не даст ни один ВУЗ. Поэтому стоит идти учиться только если вы действительно хотите изучить основы.

Вообще в наше время основы программирования должны преподаваться ещё в школе.

К сожалению, во многих школах уроки информатики сводятся к изучению возможностей форматирования текста в Ворде.

@cssunderhood он хорош в плане алгоритмизации и читабельности. Но да, он должен умереть. Учиться надо на том, на чем потом реально писать.

@cssunderhood помню давно-давно учительница информатики (не моя) говорила, что «бейсик убивает программистов», там преподавали паскаль.

Знаете за что я не люблю школьный Паскаль? За «Найдите сумму всех кратных трём чисел в диапазоне от 1 до 100» и тому подобные задачи.

Авторам этих задач, видимо, было слишком сложно придумать что-нибудь более интересное и связанное с реальной жизнью.

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

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

@iamakulov_ Я вообще считаю, что колледж дал мне два навыка: слепой набор и умение пользоваться Майкрософт Офисом. @cssunderhood

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

Иначе получается ситуация аля «вот тебе молоток, можешь им гвозди забивать». А зачем забивать гвозди никто тебе не объясняет.

@cssunderhood так получился пинхед pic.twitter.com/EFwOctu0xh

@cssunderhood есть мысль, с которой я склонен согласиться, что высшее образование не является источником практических навыков 1/2

@cssunderhood а в первую очередь служит для формирования соответствующего мышления. а навыки за это время всё равно устареют 2/2

11 лет школы плюс 4 года ВУЗа — не многовато ли для того, чтобы «научиться учиться»? По-моему это уж слишком.

@cssunderhood у меня в ВУЗе появились некоторые мысли которые привели к более глубокому осознанию проф. деятельности 1/2

@cssunderhood ВУЗ закладывает различные полезные вещи в различных (около)IT-шных областях, сегодня тебе IT интересен, завтра ты философ 2/2

В нашей сфере деятельности спасает только самообразование. Как вы предпочитаете учиться? Я люблю интерактивные курсы и в идеоуроки.

Если говорить о курсах для начинающих, не могу не упомянуть «Академию HTML» — htmlacademy.ru.

Если вы не знали, у Академии есть продвинутый интенсив для верстальщиков, и недавно появился интенсив по JavaScript.

Прикольный практический курс для быстрого старта в вёрстке — dash.generalassemb.ly pic.twitter.com/B2f7AP88gK

Из зарубежных сервисов наподобие «Академии HTML» знаю teamtreehouse.com и codeschool.com.

В своё время проходил разные курсы на codeschool.com, и мне они очень нравились. Но они не для глубокого изучения чего-либо.

Очень наглядная и приятно оформленная книга по HTML/CSS — htmlandcssbook.com pic.twitter.com/jVV2n2euco

@cssunderhood есть ещё codecademy.com

Кстати, книга в том же стиле оформления есть и по JS/jQuery — javascriptbook.com pic.twitter.com/2InJzJOtli

@cssunderhood пожалуй, самая полезная книга по CSS из тех, что мне попадались — «CSS Secrets» amazon.com/CSS-Secrets-So…

Онлайн-книга по вёрстке, от основ до флексбокса, способов раскладки блоков и разных трюков — vk.cc/4I98qj pic.twitter.com/CzZcROHFej

Ещё одно руководство, от основ работы веба до использования Sass — marksheet.io pic.twitter.com/In84a2rrYT

«Магия CSS», годная книга по CSS, в которой также уделено внимание дизайну и анимациям — adamschwartz.co/magic-of-css pic.twitter.com/WHahKo4tYo

Серия книг «A Book Apart» это вообще вечная классика — abookapart.com

Новые книги до сих пор выходят. pic.twitter.com/r5Xt8oiCcu

@cssunderhood Некоторые переведены mann-ivanov-ferber.ru/books/book-apa…
Благодаря причастности одной широко известной личности даже неплохо.

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

Недавно нашёл пару интересных сервисов для изучения английского.

babeleo.com — можно читать классику и одновременно слушать её, плюс в любой момент посмотреть перевод/произношение нужного слова

voriginale.ru — просмотр фильмов в оригинале с субтитрами, перевод субтитров можно посмотреть как только понадобится.

Буду признателен, если поделитесь подобными сервисами для изучения английского :)

@cssunderhood ororo.tv фильмы и сериалы с субтитрами

@cssunderhood Вот такой сервис - делает практически все + отличная штука по запоминанию слов. lingualeo.com

@cssunderhood Duolingo самый лучший

Стоит дизайнеру немного отступиться от сетки, и придётся городить какие-нибудь костыли (в случае использования готовой сетки).

@cssunderhood никогда не парюсь про сетки

@mr_roose сетка является опорным элементом в процессе дизайна, а не рамками в которые загоняют все элементы. @cssunderhood

Вы используете готовые сетки в вёрстке?

@SilentImp, я знаю другую проблему этих ваших дизайнерских сеток — у них все макеты под конкретную ширину заточены. @cssunderhood [1/2]

@SilentImp Начинаешь верстать «резину» и все дизайнерские отступы накрываются медным тазом. :-) @cssunderhood [2/2]

У Яндекса сетка есть, но она достаточно нестандартная, и всеми любимые12-колоночные сетки точно не подойдут

Поэтому с точки зрения вёрстки у Яндекса тоже нестандартный дизайн с нестандартной сеткой, где бустрап или фаундейшн не подойдут.

А изначально речь шла как раз о готовых сетках вроде бустраповской.

*бутстрап, какое же неудобное для набора с клавиатуры название

@cssunderhood и вообще она у них странная😊 вроде сетка, а сами абс. поз. за сетку вылазят, а еще у них там классы типа text_black_yes 😊

Лучшая в мире адаптивная сетка в 97 байт — chrisnager.github.io/ungrid pic.twitter.com/xKSR5gCQvU

@cssunderhood кстати, кроме шуток. Интересно, остались ли сейчас причины для дисплейтейблофобии, не являющиеся мифами?

Кстати, советую статью об использовании display: table; в CSS — htmlacademy.ru/blog/29 pic.twitter.com/00lT9LE0mw

@cssunderhood и небольшое дополнение к ней, где оно выиграло у флексбоксов: css-live.ru/articles-css/f… :)

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

Важно не путать бутстрап (который по большей части является набором готовых UI-компонентов) и микробиблиотеки/примеси для вёрстки.

На месте бутстрапа может быть любой другой CSS-фреймворк. К сожалению, фреймворки зачастую сводятся к набору готовых кнопочек и т. п.

Compass даёт набор инструментов, упрощающих вёрстку, при этом не привязанных к внешнему виду того, что ты верстаешь.

Не рассматривайте мои слова как призыв переходить на Compass, он уже мёртв. Он здесь лишь в качестве примера :)

@cssunderhood Почему-то вся суть Compass мне представляетс вот этим миксином compass-style.org/reference/comp…

Посмотрел примеси фаундейшена (foundation.zurb.com/sites/docs/sas…). Весьма полезно, но их как-то мало

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

В офисе с командой делаем собственный продукт для автоматизации бизнеса. До недавнего времени у нас всё было на метеоре.

Сейчас метеор постепенно переходит на серверную сторону, а на стороне клиента начали использовать реакт.

Для меня это хороший стимул попробовать перейти полностью на PostCSS и начать использовать CSS-модули.

Особенно привлекательно @PostCSS стал выглядеть после релиза github.com/postcss/sugarss

Я очень люблю Stylus и использую его в тех проектах, где нет жёсткой привязки к каким-либо технологиям.

У меня есть стартовый шаблон для проекта, который сильно вдохновлён шаблоном от @csssr_dev — github.com/andrew--r/star…

Правда, мои запросы к нему с каждым днём растут, а времени на доработку нет, что уж говорить о документации.

Наверняка у вас есть свои стартовые шаблоны для вёрстки. Делитесь ссылками, всегда интересно подсмотреть что-нибудь новое :)

@cssunderhood tamiadev.github.io/tamia/ — недавно тут всё переделал.

@cssunderhood кстати, вот мои слайды, что ещё добавить к CSS-модулям для большей изоляции ai.github.io/postcss-isolat…

@cssunderhood github.com/gladkih/tabula — мой шаблон, так же частично вдохновленный csssr

Новая методология ECSS, выглядит интересно — ecss.io pic.twitter.com/mP4KOaObBC

Я в вёрстке использую БЭМ-нотацию, но она не решает всех возникающих проблем или решает их не очень изящно.

Поэтому я последний месяц задумываюсь о том, чтобы найти альтернативу БЭМу либо самому попытаться исправить его недостатки.

БЭМ имеет сильный уклон в сторону компонентов. Он прекрасен для описания независимых блоков.

Страница состоит из множества компонентов, этаких строительных блоков, «кирпичей».

БЭМ удобен для вёрстки эти строительных блоков, но не для сборки их воедино.

То есть грубо говоря раскладку блоков на странице не всегда удобно делать следуя БЭМу.

Иногда хочется воспользоваться минимальным каскадом и контекстом, а не опираться только на БЭМ-классы.

Кстати, вот хороший пример того, что можно использовать вместе с БЭМом — nano.sapegin.ru/all/opor-metho…

Мне в БЭМе не хватает как раз примесей, состояний и JS-хуков.

Примеси — вещь очень спорная. Сейчас попробую объяснить.

По-хорошему примеси должны использоваться в стилях, т. е. на уровне препроцессора.

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

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

Многие атомарные классы по-хорошему в БЭМе должны заменяться модификаторами

Та же ерунда с состояниями элемента. На каждое состояние приходится создавать отдельный модификатор, используемый как в стилях, так и в JS

При этом суть многих состояний можно объединить одним классом .js-active, и использовать его вместо .secondary-nav__link--active и т. п.

@cssunderhood для раскладки подойдет подход atomic.css, а компоненты разбивать по минимуму и сбрасывать стили, чтобы не унаследовать лишнего

Также интересен подход с разделением проекта на слои, используемый в MCSS — operatino.github.io/MCSS

Пожалуй, лучший обзор существующих CSS-методологий — habrahabr.ru/post/256109

Очень удобно для сравнения. pic.twitter.com/TFQcGStYFJ

Гарри Робертс предложил интересный подход, привносящий в БЭМ немного больше смысла — frontender.info/bemit-taking-t… pic.twitter.com/JTK5bipg6k

Я очень сильно страдаю из-за дизайнеров, никогда не слышавших о компонентом подходе к дизайну. Впрочем, все фрилансеры страдают из-за этого.

Из-за таких дизайнеров никакой БЭМ не спасает, всё равно в итоге мешанина выходит.

Для тех, кому сложно придумывать названия классов: готовые названия для БЭМ-элементов — vovanr.com/frontend-eleme… pic.twitter.com/vhfqJI6u0Y

Вместе с Jade я использую набор миксинов bemto от @kizmarh, очень облегчает жизнь — vk.cc/4V2xM7 pic.twitter.com/ligs7aE20i

Если вы вдруг не знаете о Jade или всё никак не соберётесь попробовать, то самое время — jade-lang.com pic.twitter.com/O4wUJ2e4Jk

Если вы используете БЭМ, то с Jade будет очень удобно разбивать проект на блоки и хранить разметку каждого блока в отдельном файле.

А вместе с препроцессорами вообще удобно получается — можно создавать отдельную директорию с разметкой и стилями для каждого блока.

@cssunderhood использую Jade, Stylus и самописный скрипт для совмещения атомарного дизайна и бэм-синтаксиса. Они очень хорошо сочетаются

@cssunderhood github.com/ddsgll/quark . Пока сыровато, конечно, но если будут предложения или критика - всегда рад выслушать

А как часто вы используете в проектах #jQuery?

Интересно, если вы используете jQuery, то из-за чего? Нужно поддерживать IE или просто потому что привыкли и так проще?

Нет смысла делать с помощью джейквери то, что не хуже умеет делать чистый JS.

Зачем использовать полифиллы вместо библиотек: когда-нибудь то, что полифиллится, будет везде поддерживаться — полифилл можно будет выпилить

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

Аналоги часто используемых методов jQuery на чистом JS, если вы вдруг растерялись — vk.cc/2dSpDq pic.twitter.com/GS0i4rsWUt

Ну и подробное руководство по замене jQuery чистым JS (есть перевод на русский) — github.com/oneuijs/You-Do… pic.twitter.com/yLuzuVbQPz

@cssunderhood Даже самые элементарные вещи вроде делегирования событий. Всё это сводится к написанию своего джейквери или десятку библиотек.

@cssunderhood на Хабре был эпичный комментарий: «Не думая подключаю jQuery», это многое и объясняет.

@dshster К сожалению, сейчас в моде обратное: не думая выпиливаю Джейквери. @cssunderhood

Классика pic.twitter.com/XHXLWocwTT

@cssunderhood Боже, да это не шутка. Их реально гуглят. pic.twitter.com/a9N2fL5cuP

Думали, существуют только jQuery-плагины? Как бы не так! Куча аналогов на чистом JS — youmightnotneedjqueryplugins.com pic.twitter.com/fJO1fvpcgk

@cssunderhood Их ещё больше тут: npmsearch.com

@cssunderhood избавляюсь от jquery на проектах, где нет тяжелых обязательных плагинов. Одно удовольствие.

Но в большинстве случаев, если не использовать библиотеки, заточенные под производительность, нативное работает быстрее.

В проекте , над которым я работаю с inn.ru, вся логика пишется на чистом JS, а jQuery подключен ради фоторамы. [1/2]

Недавно мы начали писать свою фотогалерею, заточенную под потребности проекта, так что скоро фоторама и джейквери будут выпилены. [2/2]

Интересная статья: как «We Are Colony» отказались от jQuery год назад и что из этого вышло — blog.wearecolony.com/a-year-without… pic.twitter.com/ArxmDu5wSw

Если выбора нет, то следуйте лучшим практикам и стандартам по использованию jQuery — lab.abhinayrathore.com/jquery-standar… pic.twitter.com/81YLYSyitI

Вообще, я считаю, что на каждую конкретную задачу должен быть конкретный инструмент, который её решает. Без лишнего.

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

Веб-компоненты можно попробовать уже сегодня, но пока что не очень понятно, что там со спецификацией и когда её наконец утвердят.

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

Примеры микробиблиотек можно посмотреть на microjs.com. pic.twitter.com/kORRTmv927

Ещё одна коллекция [микро]библиотек с сортировкой по популярности, размеру и категории — weightof.it. pic.twitter.com/nVArD1zqw8

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

Имхо, jQuery полезен сам по себе только если вам нужно IE10- поддерживать.

@cssunderhood кроме всех тех, кто пользуется компьютером из офиса или довольно беден и не может обновить железо (студенты)?

@cssunderhood Но в любом случае это не проблема. Так как все новинки должны реализовываться как прогрессивное улучшение или предусматривать…

@cssunderhood …мягкую деградацию.

@cssunderhood а больше не всегда хуже. Названия должны быть self-descriptive и человекочитаемые. И DOM API в этом плане весьма не дурно.

…при условии, что этот JS-код не написан теми, кто всю жизнь программировал на джейквери.

Давайте поговорим об автоматизации. Чем меньше рутины, тем больше времени на решение интересных задач.

Во фронтенде большую роль играют всякие таск-менеджеры вроде галпа. Кстати, интересно, кто-нибудь использует грант?

@cssunderhood просили в битриксе нажимать кнопки, что начал или что-то там с работой. Автоматизировал — не использовать битрикс никогда.

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

Галп довольно хорош в работе с файлами, но неподготовленному человеку трудно начать писать что-то своё, а не использовать готовые плагины.

В inn.ru я работаю над проектом, в котором галпфайл размером в ~1700 строк кода.

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

Когда я только-только начинал работу над проектом, было очень сложно (да и сейчас не всегда просто :-)) именно из-за незнания Node.js.

Недавно @iliakan записал серию продвинутых уроков по галпу, за что ему большое спасибо — learn.javascript.ru/screencast/gulp pic.twitter.com/8oK2awipqv

@cssunderhood @iliakan и по webpack learn.javascript.ru/screencast/web…

Вы используете какие-то инструменты для генерации шаблонных файлов? Я пока что обхожусь bash-скриптом, но наверняка есть что-то поудобнее.

Подумываю попробовать plop для генерации всякого бойлерплейта, но пока что руки не дошли — github.com/amwmedia/plop pic.twitter.com/rQGIt3gqLl

@cssunderhood Написал когда-то на коленке, что б добавлять файлы в проект по БЭМ из консоли github.com/c01nd01r/b_add/

@cssunderhood собираю все проекты либо с brunch.io, либо webpack + gulp. Всем советую посмотреть brunch! :)

Зашёл в книжный. Вот по таким книгам нужно учить основам программирования, а не по бездушным математическим задачам. pic.twitter.com/BhExUQlWbp

Из одного чатика (диалог абсолютно серьёзный):

— Ребят, с чего начать изучение адаптива?
— С бутстрапа

Чужой код полезно смотреть уже имея определённую теоретическую подготовку. Начинать изучение чего-то с инструментов — не самая лучшая идея.

А о том, что существуют медиазапросы, он даже и не подозревает. Замечательно научился!

Есть замечательная книга, которая намного лучше всяких бутстрапов и чужих сайтов расскажет об отзывчивой вёрстке. pic.twitter.com/Fl48l1uzCw

Читатели пишут, что книги уже не круто, а гадать по чужим сайтам — круто. Отстал я от жизни, однако

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

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

Поделитесь историями. Вёрстка — ваша первая работа, или был опыт до неё? Я вот начинал с вёрстки.

@cssunderhood а я вот решила наоборот - из JS програмирования в верстку, всегда хотелось больше времени ей отдавать :)

@cssunderhood надо было на вечер оставить, зазубриться в пивнуху всем твитером (каждый в свою) и рассказывать ламповые истории

@cssunderhood Я Я начинала как Flex разработчик, затем PHP, затем JS и верстка. Но первая книга по верстке была еще в школе, это знак :)

@cssunderhood в 10 классе появился телефон с интернетом. Через пару недель наткнулся на wen.ru Собирал сайты приложением, смотрел код

@cssunderhood оттуда через форумы перебирался на учебники html и css, сверстал сайт для класса с расписанием и играми. Этакий mobile-first

@cssunderhood Открыл для себя HTML в журнале «Подводная лодка» в 1998-м или 1999-м.
sapegin.me/history
museum.sapegin.ru

@cssunderhood работал проект-менеджером в seo-компании, потом надоело, уволился, за лето освоил азы вёрстки и устроился на первую работу

А я учился в школе и вечерами учился по разным книгам и (не очень хорошим) онлайн-курсам. От учебных материалов многое зависит.

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

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

То же самое относится и к освоению других сфер деятельности.

Верстальщики чаще всего идут во фронтенд (программирование) или в дизайн. Возможно, кто-то идёт в менеджеры, но о таких случаях я не слышал.

В дизайн верстальщику пойти сложнее, чем во фронтенд как минимум из-за двух причин.

1. Верстальщик по долгу службы так или иначе имеет дело со скриптами и программированием. В этом плане фронтенд уже роднее.

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

Относительно недавно Артём Горбунов опубликовал книгу «Типографика и вёрстка» — artgorbunov.ru/projects/book-… pic.twitter.com/Z4sDGH1Ae3

Ничего лучше по дизайну в рунете я не видел.

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

Почему в России всё так плохо с дизайном прекрасно объяснил Лебедев — artlebedev.ru/kovodstvo/sect… pic.twitter.com/1sE17nxQmR

Если вам интересна история формирования дизайна в целом, советую книгу «Культура дизайна» — dc.exmachina.ru pic.twitter.com/HYbckzarWU

Многие считают дизайн чем-то вроде «сделать красиво», хотя на самом деле дизайн — это «сделать удобно» или «решить задачу».

Вот поэтому я и не люблю дриббл и беханс. Там публикуют именно работы в духе «сделать красиво», которые не решают практических задач.

Классическая статья про «дрибблификацию» дизайна: blog.intercom.io/the-dribbblisa…

@cssunderhood

Ни в коем случае не хочу сказать, что нужно делать что-то в ущерб красоте. Лишь говорю, что многие дизайнеры жертвуют смыслом ради красоты.

@cssunderhood редкий заказчик оченит смысл. Обычно 3-4 переработка макета делается ради клиентского "чувства прекрасного (ужасного)"

Если вы вдруг решите развиваться как дизайнер, советую приглядеться к «Школе стажёров» — artgorbunov.ru/school pic.twitter.com/SeXIX7BSHv

«Школа стажёров» даёт целый набор необходимых дизайнеру навыков и знаний кроме обычного рисования картинок.

Выпускник Школы поделился впечатлениями о прохождении всех трёх ступеней — smartis.ru/school-1level pic.twitter.com/T4NNnno09N

Более распространённый путь, чем из вёрстки в дизайн — это из вёрстки во фронтенд. Часто верстальщики выбирают его, и я не исключение.

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

Считаю, что прежде чем идти во фронтенд, нужно познакомиться с базовыми вещами вроде алгоритмов, структур данных (если вы их ещё не знаете).

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

…и, соответственно, решать практические задачи вам будет проще и вы будете видеть разные пути их решения.

Курсы по фундаментальным штукам есть на stepic.org и intuit.ru. Например, по алгоритмам — intuit.ru/studies/course…

Ещё хорошие курсы по основам и не только есть на ru.hexlet.io. pic.twitter.com/NnN6aqS0Bk

Не так давно появился портал «Открытое образование» с курсами от разных российских ВУЗов — openedu.ru pic.twitter.com/bsRMY6TByM

После изучения основ программирования можно и к самому JS перейти. Лучший учебник в рунете — learn.javascript.ru pic.twitter.com/9jpdbC3n3K

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

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

Чтобы контролировать свой уровень, погуглите список вопросов для собеседования на должность фронтендера. Например, github.com/h5bp/Front-end…

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

Да, кстати: сразу учите ES6. И пожалуйста, забудьте о джейквери/зепто/etc, в процессе обучения пользуйтесь только чистым JS.

Когда я сказал «забудьте о джейквери/зепто/etc», я имел в виду подавление в себе желания использовать эти инструменты потому что так проще.

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

И новички могут этим злоупотреблять, не понимая того, как это работает «под капотом», что весьма плохо.

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

Если вы уже изучили сам язык и хотите двигаться дальше…

…держите подборку лучших ресурсов и материалов по разработке поддерживаемых приложений — superherojs.com pic.twitter.com/9356djkk4F

Насчёт «нельзя писать велосипеды» — да можно, если вы учитесь. Если вы работаете — да, нельзя. Если учитесь — это как раз полезно.

Написание своих велосипедов в процессе обучения даёт возможность попрактиковаться на интересных задачах без ущерба для кого-либо.

Многие спрашивают — «не могу придумать практических задач по JS, что делать, как жить дальше без практики?».

Да возьмите и запилите свой аналог какой-нибудь известной библиотеки. Слайдер какой-нибудь сделайте, или библиотеку для работы с DOM.

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

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

Я вижу, что у многих тут бомбит, когда я говорю «откажитесь от джейквери/бутстрапа».

Напоследок хочу поделиться небольшой статьёй о том, каково настоящее предназначение сайтов — fuckingwebsite.ru pic.twitter.com/DqItPUe3ES

От этой статьи, возможно, у некоторых бомбанёт ещё сильнее :)

На этом прощаюсь с вами. Спасибо за интересные холивары и за то, что терпели меня целую неделю! :)

Напомню, на этой неделе раздражал любителей джейквери и бутстрапа Андрей Романов (andrew-r.ru) из Омска.