Всем привет! На этой неделе с вами @iamfrntdv.

На этой неделе мы поговорим про frontend, философию, всякие проблемы, полезные инструменты, саморазвитие..

Будет много музыки и картинок!

А начну я с этого замечательного трека youtube.com/watch?v=LBrCCK… ! Всем хорошего настроения!
P.S. Чуть позже детальней расскажу о себе...

@cssunderhood интригующе, особенно про философию)

Ну что ж.. расскажу немного о себе. Родом я из Украины. В данный период жизни живу и работаю в Венгрии.

Работаю я в, относительно небольшой компании (40-70 чел.), shiwaforce.com

Основная моя работа - верстка и шаблонизация. У нас есть своя CMS, под которую собственно мы и пилим шаблоны.

Работает наша CMS на XML технологиях.. когда-то это было круто, но сегодня уже не торт)

Я считаю, что как верстальщик/frontender, я начал формироваться задолго до того как я это осознал.

Всю сознательную жизнь я занимался той или иной формой искусства. Был диджеем, фотографом, дизайнером.

Хотя и сейчас стараюсь оставаться дизайнером)

Все это, и мое увлечение философией, бурно повлияло на мое мировозрение.

Вот уже 9 лет, как я вегетарианец. Не употребляю в пище: мясо, рыбу, яйца, желатин, чеснок, лук/цибулю..

а пока я иду на работу, предлагаю послушать, по моему мнению, один из самых гениальных электронных треков: youtu.be/NLoBZWA1xn8

Из-за поражения мозга он теперь уже 9 лет верстальщик. :) twitter.com/cssunderhood/s…

Супер! у всех есть чувство юмора а это самое главное)

Чтоб не отвечать каждому - я также не питаюсь в ресторанах и не покупаю готовую выпечку..

[ОПРОС] Как вы относитесь к вегетарианству?

Ну ладно хватит про лук)))

К слову о развитии. Диджейсто развивало во мне вкус, фотография и философия -перфекционизм.

После диджейства я начал увлекаться фото. И в какой-то момент решил, что мне нужен свой сайт..

Сторонние сервисы мне не нравились...

В то время мне казалось, что flash легче чем все остальное. Поэтому первые сайты делал на flash.

Быстро осознал, что flash не торт. И начал изучать HTML и CSS.

На протяжении 4х лет занимался фрилансом. От дизайна до релиза, всем занимался я.

В основном использовал Wordpress и Drupal, так как клиентам нужна была возможность менять контент.

@cssunderhood [ОПРОС] Как вы относитесь к обсуждениям вегетарианства в аккаунте про СSS?

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

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

Тут уже второй год работаю в Shiwaforce.com

Расскажу немного про нашу контору)))

Как я писал раньше у нас есть своя CMS. Которая работает на XML технологиях.

Вся контора разбита на команды по клиентам. В основном у нас крупные клиенты такие как: T-Mobile, OTP, Erste Bank и другие

@cssunderhood шутки не врут что ли pic.twitter.com/6sjtjCgFmV

Как узнать, вегетарианец ли ведущий коллективного твиттер-аккаунта? Подождите 5 минут, он сам об этом расскажет twitter.com/cssunderhood/s…

Алгоритм работы у нас такой: сначала верстка, потом JS, потом шаблонизация.

Сама шаблонизация состоит из двух этапов.. 1. верстка самого шаблона. 2. Трансформация XML в HTML

у всего этого есть свои преимущества и недостатки. но к сожалению уже сегодня недостатков больше.

@webholt Небось без лука употребляешь, да? Какой-то ты недостаточно агрессивный ;)

Все мы работаем по SCRUM. каждое утро Standa up-ы. Спринты разбиты на 2 недели. В конце спринта демо и ретроспектива

У нас также есть так называемые "mid sprint". В основном это тренинги с психологм. иногда интересно, иногда не очень)

Сейчас я работаю над одним из проектов T-mobile.

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

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

во многих проектах верстку и js мы делаем в node окружение.. раньше всюду был harp.js теперь по немногу сваливаем оттуда..

@vovudebosh @cssunderhood предыдущий ведущий рассказывал о свободном образовании, неужели это тоже никому не интересно?

некоторые проекты и вовсе без node окружения.. и там вовсе беда с оптимизацией и диплоем.

Для деплоя используем Bamboo. Много проектов покрыты автоматизированным деплоем. Там где того нет беда и мучение..

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

@cssunderhood Проект наш на ASP.NET, прикрутили PostCSS, но не можем избавится от MVC-го StyleBundle. Может имел кто опыт?

В тех проектах, в которых есть node окружение мы используем EJS и LESS.

для внутренней коммуникации используем hipchat. Так как у нас и Jira и Bamboo, hipchat с этим делом очень удобный

Картинка про современную разработку pic.twitter.com/CUjhciviqZ

Какая методология управления проектами нравится вам?

из @PostCSS используем @autoprefixer.

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

@iamstarkov так же как и к остальному оффтопу в @cssunderhood — положительно, т.к. интересно читать про людей, а не только технологии.

Фронтендеры, наступают смутные времена, история повторяется #IE #Chrome pic.twitter.com/gQHQ5PwG4Z

Давайте поговорим немного про работу в команде. Какой ценный опыт принесла вам работа в команде?

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

Вот еще один очень крутой, по моему мнению трек youtu.be/Fk5OG5O3ZlE

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

@cssunderhood коммитить первым :D

@ihorzenich @cssunderhood @iamstarkov Во-во. Мир же не ограничивается только работой.

У нас рабочий день закончился еще в 17.00 местного времени. но мне пришлось доделывать работу..

А после работы время расслабиться. На этот случай есть хороший музончик youtube.com/watch?v=qEI1_o…

У нас так же принят учет времени. Делаем мы это с помощью хорошего плагина для @JIRA - Tempo Timesheets.

Пора подвести итоги сегодняшнего дня.

Сегодня я вам рассказал немного о себе. Рассказал о своей работе.

Рассказал о инструментах, которые мы используем: node окружение, EJS, LESS, Gulp, @autoprefixer, мы также используем JSPM и Browserify.

Bamboo для автоматизации деплоя где это возможно. Jira для задач, Hipchat для коммуникация и интеграции с Bamboo.

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

@rubyunderhood @cssunderhood не вижу ничего страшного, если разраб, после завершения тикета, проставит время выполнения.

@jsunderhood
Дорогие читатели, расскажите что вам нравится в @jsunderhood?

мы переписываем описание проекта и важно услышать мнения RT, pls

@jsunderhood @cssunderhood @backendsecret @rubyunderhood @abroadunderhood тоже самое по тематическим аккаунтам

Доброе утро всем! Всем бунтарской музыки в ленту))) youtu.be/bWXazVhlyxQ

Давайте сегодня поговорим об инструментах. Я расскажу какие я использую и почему. А вы делитесь своими;)

Но прежде чем я начну, пользуясь случаем, поздравляю всех девушек, программистов и не только, с 8 марта! ;) pic.twitter.com/H6zJeKQMDd

Ну что ж поехал! Начнем с рабочих лошадей, так как компьютеры неотъемлемая часть верстки ;)

Долгое время я был пользователем Windows. Не скажу, что я был в восторге и не скажу, что она мне сильно не нравилась. У нее свои + и -

В какой-то момент решил перейти на Mac. Это был абсолютно осознанный выбор. Моя машина - это MacBook Retina 15" mid 2012

Это мой домашний. На работе использую MacBook Pro 13" 2011. Не супер мощный, но пока хватает.

Вот вам фото моего домашнего рабочего места.
P.S. скидывайте свои ;) pic.twitter.com/66GwdvIJme

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

Конечно же самый основной инструмент верстальщика это редактор. Давайте обсудим их.

Долгое время я использовал Sublime Text. Но как-то он не очень развивается, поэтому начал искать альтернативы.

На данный момент я работаю в двух редакторах. Для простых задач Atom, для более сложных Webstorm.

@cssunderhood кто за vim ? :)

Atom, если честно, я использую только из-за 2х плагинов - Atom Commander и Sync Settings.

Webstorm использую из-за хорошей интеграции с node и gulp.

@cssunderhood (и нет, я иногда убираюсь) pic.twitter.com/4Wvu9M0KNl

@cssunderhood недавно на маке (pro 13 на работе и дома), до этого лет пять был linux. Windows не воспринимаю никак. pic.twitter.com/FgBJnkZp7n

Дома и на работе twitter.com/cssunderhood/s… pic.twitter.com/D5sHyFswmK

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

Пока я иду на работу, вот вам еще музончик в ленту youtu.be/4PkcfQtibmU
P.S. позже скину фото своего рабочего рабочего места)

@cssunderhood это здесь перепись маководов? pic.twitter.com/XuPhP8KuG9

@cssunderhood домашнее = рабочее pic.twitter.com/SSmpP2BIdv

@b3ard0m Вот мне не нравилась эта портянка gulp-задач поэтому точки входа я перенёс в npm scripts. @cssunderhood

@cssunderhood домашнее. pic.twitter.com/gGpBpHmvBC

@cssunderhood пробую сейчас vs @code. Пока напоминает более правильно укомплектованный плагинами атом из коробки.

А вот моё рабочее рабочее место))) pic.twitter.com/NAleQl4ztR

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

@cssunderhood дома я диванный разработчик pic.twitter.com/qLijR1UYTX

@juwain @cssunderhood @code вот тоже месяц на нем, пошустрей и приятней атома

Photoshop и illustrator отголоски прошлого. Перехожу на Sketchapp.

Для SketchApp использую Sketch Toolbox. И нашёл крутой плагин для документации дизайна marcosvid.al/sketch-noteboo…

Xcode для dev окружения. Использую встроенный Apache, PHP для Drupal и Wordpress.

Forklift в основном для ftp

Reeder, Pocket, Raindrop для хранения ссылок, сайтов, статей и вообще всего полезного.

Мой основной браузер Safari. Когда верстаю использую все доступные браузеры.

Вообще локальное окружения Mac можно настроить с помощью shell скриптов типа этого github.com/admdh/setup/bl… .

Также есть очень классная штука для homebrew caskroom.github.io тут вообще можно очень много программ установить из консоли

@cssunderhood когда приберусь обычно всё так pic.twitter.com/wLBjzId1Hn

@cssunderhood У меня Atom с vim-mode + jumpy. В терминале vim. @int16h @GrawlCore @MaxBorisov

Вот крутая статья как настроить Mac для Wordpress Drupal и им подобным штукам coolestguidesontheplanet.com/get-apache-mys…

в добавок я использую я еще настраиваю vhsot coolestguidesontheplanet.com/set-virtual-ho… чтоб можно было локально использовать mysite.com

вот еще парень описывает mallinson.ca/osx-web-develo… локальную среду. из этого мне понравился раздел о "A Custom Home Page"

Есть конечно же всякие mamp, wamp, xamp но они мне не нравятся. тем более на Mac есть нативные

@cssunderhood pic.twitter.com/fTMiCgBK7a

для верстки использую node окружение. об этом чуть позже.

Вообще если честно в свое время мне очень понравился Drupal. 8й еще круче. Поэтому познакомился с такой штукой как Drush.

*Кто не знает Drush это командная строка для Drupal

К слову о Wordpress и Drupal... 99% моего фриланса это Drupal и Wordpress.

Но вообще я больше предпочитаю Drupal он более гибкий. В нем много чего на много проще сделать чем в Wordpress, особенно в 8й версии

вот еще крутой менеджер снипетов renfei.org/snippets-lab/

Добавлю еще немного бунта в ленту youtube.com/watch?v=n8aJG1…

@serhey_shmyg почему атом, а не саблайм? Давай я сейчас набросаю пост в блог и кину ссылку. @cssunderhood @int16h @GrawlCore @MaxBorisov

@cssunderhood sync settings вещь, не раз выручало

@cssunderhood точнее вот рабочее pic.twitter.com/mDmPQZpets

Вообще я из тех людей, которые стремятся к улучшению своей работы. Поэтому всегда ищу альтернативы - "а нет ли чего то лучше чем это")

@cssunderhood pic.twitter.com/Ovx0TDR1j4

Это касается всего как и приложений так и всякие фреймворки, пре и пост процессоры.

Так однажды, изучая альтернативы SASS и LESS, я наткнулся на доклад @andrey_sitnik о @PostCSS и мне очень понравилась его идея

с тех пор я предпочитаю только @PostCSS

вообще если честно @PostCSS очень сильно повлиял на меня. я больше стал изучать технологии на JS. Но про обучение мы поговорим потом.

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

оптимизация и всякие такие штуки были для меня..... ну вообщем не особо интересовался

для верстки использовал codekit и sass

но за последние 2 года все очень поменялось... Мне стали интересны такие инструменты как node, gulp.. всякие оптимизации и фреймворки

и на самом деле все благодаря работе в команде..

А еще мне смешно, что на фрилансе я вообще не знал что такое git. Оглядываясь назад для меня еще та хохма)

Расскажу вам об инструментах в процессе верстки/разработки, проблемы с которыми я столкнулся и как я пытаюсь их решить..

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

Тогда мне в первую очередь не хватал git. Тогда я еще не знал, что такое есть и вообще как оно работает.. Сейчас проблем с этим нет)

Еще мне тогда не хватало автоматизированного деплоя..

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

В команде темпы возросли и я на много быстрее освоил такие штуки как git, оптимизация, деплой и так далее

@cssunderhood Ага, один месяц с новой командой — это больше нового, чем годы фриланса.

Работа в команде также учит как развиваться в будущем, даже если опять окажешься на фрилансе..

Тут просят поделиться советами работы в команде.

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

Одна из главных вещей которые НЕ НАДО делать в команде - это стараться изменить всех и все да еще и сразу! это не получится!

Нужно изучить зачем команда выбрал свой путь в первую очередь. 100% есть свои причины.

Конечно же любой команде всегда есть к чему стремиться (улучшать те или иные процессы)..

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

@cssunderhood о, я как раз об этом написал заметку
blog.yumadilov.com/all/poka-bukme…

Только когда вас принимают и уважают люди начнут вас слушать и принимать ваши совет!

Не надо навязывать!

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

НИКОГДА не говорите в команде что что-то Г*НО.. или там что-то еще.. старайтесь всегда красиво объяснить проблему и обязательно ее решение.

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

Коллеги будут видеть, что вам важно их мнение! а это очень важно!

Уважайте мнение других и тогда будут уважать ваше!

Старайтесь учиться на чужих ошибках в первую очередь.

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

Знаю точно что агрессия ни к чему хорошему не приводит! поэтому стараюсь всегда быть спокойным..

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

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

Вот есть там всякие React, Angular, Webpack и др... в них классно реализована изоляция JS и CSS

Но по прежнему есть сайты, которые вовсе не нуждаются в React, Angular и так далее... как вы решили проблему изоляции JS и CSS?

Если изобразить то проблема выгладит вот так: pic.twitter.com/Qmrkv0a0iM

А пока всем в ленту трек, который у меня ассоциируется с рус/укр сериалами)) youtu.be/XW-ijt-cEUg

Проблема в том как изолировать CSS и JS без React, Angular, Webpack и тд..

То все еще есть сайты которым не нужен React, Angular, которые не могут быть SPA. как там делать изоляцию CSS JS?

Ты имел ввиду что-то типа этого? @iamstarkov pic.twitter.com/NMWPPce4Vr

На данный момент я для себя решил проблему вот таким образом github.com/admdh/adm-dev-…

@cssunderhood доклад @andrey_sitnik про изоляцию в CSS. thedotpost.com/2015/12/andrey… Изолировать можно все, даже если бэкенд на PHP.

Ближе к вечеру расскажу про организацию своей фриланс работы и пет проектов.

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

P.S. под изоляцией CSS JS я подразумеваю так же то, что на странице не должно быть лишнего CSS и JS. Зачем грузить лишнее?

@cssunderhood это в смысле оптимизация? Есть какие-то tricks по оптимизации?

А как вы оптимизируете CSS JS так, чтоб на странице было ровно столько сколько нужно, не больше не меньше?

но как решить эту задачу без webpack, react и тд..? css-modules на сколько я знаю с gulp не очень.. @iamstarkov pic.twitter.com/tMWebSMQ5B

@cssunderhood для JS: webpack bundling + minifier

@cssunderhood WP/Drupal/любая статика – PostHTML modules + CSS Modules, JS через Webpack. Какие проблемы? :)

@cssunderhood ты это имеешь ввиду npmjs.com/package/gulp-u… (для css)?

Что-то типа того.. но мне нравиться решения когда ты во время разработки решаешь что куда @baxazar_

@cssunderhood @iamstarkov кладёшь CSS в postcss-modules, он даёт JSON “.класс: ._класс_355ldls3_2”, потом в Jade: div(class=класс)

Объясню еще раз, может я не совсем правильно выразился.

В React когда создаешь компонент, в самом компоненте импортируешь CSS и JS на выходу получается CSS и JS ровно столько сколько компонентов.

В этом мне нравится то что не надо импортировать css и js черт знает где..

Но при верстке обычного сайта не важно SASS LESS PostCSS зачастую импорт происходит в одно месте. И получается один CSS на весь сайт

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

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

@cssunderhood я управляю bundle'ами CSS через Sass, если жопа растёт. в JS так же можно через Webpack, но чуть сложнее.

на сколько я знаю webpack бандлит все в один файл или уже есть плагин чтоб экспортировать HTML тоже как и CSS. @iamstarkov

К сожалению на работе у нас тут всякие дедлайны.. Поэтому не смог рассказать про свой фриланс.

Давайте подведем итоги сегодняшнего дня!

Сегодня мы обсудили всякие инструменты, поделились фото рабочих мест. Я дал немного советов работы в команде. И немного было об css и js

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

Ну и конечно же музончик вам в ленту youtu.be/4aeETEoNfOg

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

@cssunderhood pic.twitter.com/y82aMidqzg

@cssunderhood pic.twitter.com/SWp7c4dJcr

Доброе утро! Сегодня поговорим о верстке и фрилансе.

Ну и конечно же я начну с музыки))) youtu.be/prZYhE-3QC0

@cssunderhood pic.twitter.com/Gogh1Qz9Xh

Верстка делится у меня на рабочую и на домашнюю) На работе верстаю согласно уставу, а дома так как считаю более правильным)

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

Сначала ребята проверяли пиксели в фотошопе. Т.е. делали скриншот браузера потом накладывали на дизайн в фотошопе.

Мне такой расклад не понравился и я быстро нашел для этого дела решение - PixelPerfect для Chrome и XScope для mac.

Так как приходится работать с дизайном мы пользуемся фотошопом. Часто сами оттуда экспортируем иконки и картинки сами.

Для сверки дизайна ребята у нас также собрали свой gulp task для по пиксельного сравнения двух изображений.

Верстаем мы в основном в node окружении. Используем EJS и Less. Честно признаться сильно это нам не помогает из-за бардака.

У нас к сожалению ребята еще пока не пришли к тому, что надо использовать codestyle styleguide и так далее.

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

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

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

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

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

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

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

Вложенности сложно контролировать. Сегодня маленькая - завтра огромная.

Вот вам ситуация. Какой-то Вася обрадовался и вложил все что можно куда можно. Приходи баг. Вам исправлять. Вы CSS видите впервые.

После этого Вася ваш лучший друг. сарказм

Вообщем вам будет очень сложно разобраться что куда к чему.

@cssunderhood bem create расставляет в голове всё по местам. Ну и про методологию обязательно почитать.

Из всех допустимых вложенностей, я считаю не так страшны :hover, :active и т.д., before after и media query

Если вы ещё не используете css линтеры, то самое время начать их использовать. Ну и js линтеры тоже)

Ещё одной из проблем вижу разбитие файлов на медиа квери. Когда в одном файле только один размер. Это не очень удобно, особенно при дебаге

сейчас media query мы используем приблизительно таким образом и конечно же нужен плагин для их сортировки pic.twitter.com/E9tUltApXS

Еще одна из проблем верстки в команде - это слабая коммуникация. Иногда это может увеличить время верстки и потратить чьи-то нервы)

Пример, как по мне, очень плохой практики. Доп.: к этому все делу где-то внизу есть не менее красивые media query) pic.twitter.com/s6rptbY2Uw

Как вам обновленный инструмент тестирования резиновых сайтов в chrome?

@SiliconBangalor @vkryukov76 @cssunderhood одно время Гугл требовал от дизайнеров верстать, потом одумался и перестал. Инфа 100%. Им виднее

К слову о flex box. Мы их очень даже используем. Для многих правда это еще как из области фантастики)

@cssunderhood Есть хороший список sass best practices. В данном случае только три уровня вложенности. css-tricks.com/sass-style-gui…

@cssunderhood Флексбоксы уже давно пора использовать, а не думать, что это bleeding edge.

@cssunderhood был хороший опыт - митапы на полтора часа в пятницу, тематические доклады. Ленивых мотивировали премиями за хорошие доклады.

@cssunderhood, не существенно. Оно же всё сжимается. Аналогично в схватке extend vs. mixin выигрывает по всем показателям CSS из миксинов.

@cssunderhood есть отличная статья про рендеринг CSS, ну и про работу браузера в целом - html5rocks.com/ru/tutorials/i…

@cssunderhood я видел 18. Показывай.

Подводя итоги работы в команде важна коммуникация, документация включая code style и style guide и всякие линтеры.

Считаю, что команда сама должна решить как должен выглядеть код и как лучше, для проекта, его оптимизировать отталкиваясь от best practices

немного музыки всем в ленту youtu.be/ElvLZMsYXlo

Расскажите какие проблемы с версткой возникал у вас? и как вы их решали?

@cssunderhood верстальщик говорил так нельзя. Я ему говорил, что верю в него и оказывалось, что можно.

@cssunderhood Писал issue в багтрекер браузеров. Последнее время, возникающие проблемы других решений не имеют)

Над некоторыми проектами наших клиентов также работают 3ие фирмы. и иногда можно встретить 23451341 css и js файлов на странице. это печаль

Само обидно когда команда парится над оптимизацией, а 3ие лица так просто впихнут тучу сss js

А есть какой-то способ добавить в начале самого css версию, чтоб в продакшене легко проверить можно было? или как это делать лучше?

@cssunderhood динамический ресайз iframe мне в своё время взорвал мозг. а потом нашёлся iframe-resizer и жить стало легче

@cssunderhood а вот и пост: “Why I use Atom intead of X” twitter.com/denysdovhan/st… @brdt_D @serhey_shmyg @int16h @GrawlCore @MaxBorisov

@cssunderhood мы просто дописываем timestamp в конец имени файла, например example.com/plugin.js?v=14…

Перед тем как начну рассказывать про фриланс, музыку вам в ленту youtu.be/BjLBB-TMa84

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

Так что пользоваться сервисами для фрилансеров не доводилось. Но недавно наткнулся вот на этот сервис toptal.com

Чаще всего я брался за работу от дизайна до релиза и дальнейшей поддержки, если это требовалось.

В основном верстал под Wordpress и Drupal.. но последнее время больше под Drupal так как он мне больше нравится.

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

Очень важно наладить с клиентом дружеские отношение. И скорее всего в будущем он обратится именно к вам с новой работой.

Не надо бояться уточнять у клиента если вы что-то не понимаете.

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

@cssunderhood ещё важно договаривать «на берегу» и проговаривать ожидания с обеих сторон. договор тоже не помешает

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

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

Много разных сервисов перепробовал, остановился на Jira. Нравится возможность разбития на Epic, Story, Subtask

Для хранения дизайна использую iCloud Drive, а для самих проектов использую Bitbucket, у которого хорошая интеграция с Jira

Если честно первое время практически не использовал сервисы(типа bitbucket и тд) и всякие инструменты(типа gulp и тд)..

Но сегодня без сервисов и инструментов ни как!

Сегодня моим основным инструментом для верстки является вот этот велосипед github.com/admdh/adm-dev-…. я же его для себя и собрал

HTML - Jade. А в качестве CSS пост/препроцессора использую @PostCSS

По поводу всяких Bootstrap и тому подобных CSS фреймворков. Вообще не очень люблю CSS фреймворки. Как по мне слишком много лишнего.

Единственное, что я использовал из CSS фреймворков это сетка Foundation. Но сейчас использую свой @PostCSS плагин

Рабочий день закончился! надо идти домой! пока я в пути, музыка вам ленту youtu.be/rFpeLlmfZ0w

@cssunderhood в вебпаке есть хороший плагин для генерации хэшей файлов(это к тому, что ты спрашивал есть ли такое для галпа)

@cssunderhood Это, наверное, как emacs — и ОС заменит, и кофе сварит, только тексты редактирует плохо, так и у вебпака с бандлингом…

Если у кого есть на примете хорошие сервисы с фриланс работой скидывайте, может кому пригодится ;)

@helloilya @cssunderhood kwork, вот.

Вообще считаю, важнее чтоб инструмент/сервис удовлетворял ваши личные желание и потребности. все остальное не так важно.

Конечно есть best practices если от этого отталкиваться будет немного лучше или много)

Какие еще вопросы по фрилансу интересуют вас?

По поводу поиска клиентов. Первые заказы всегда сложно найти, но потом немного легче. Главное не опускать руки ;)

@grim_juz @cssunderhood upwork & freelancer > вывод на skrill > вывод $ по номеру карты на долларовую карту укр.банка.комиссия минимальная

Классный плагин для Chrome muz.li. Для тех кто ищет вдохновение или идеи!

@cssunderhood я беру стоимость часа и время с запасом процентов 30-45. Предоплата за 10 часов. В конце расчет по факту.

Ну что ж день подходит к концу! Давайте подведем итоги! Сегодня мы обсудили верстку и фриланс! я поделился некоторыми из своих инструментов

также обсудили некоторые проблемы верстки и фриланса) Если у вас остались еще какие-то вопросы, буду рад на них ответить;)

Если у вас есть предложения по темам для обсуждения, смело пишите! Обязательно обсудим!

Завтра поговорим про пет проекты, философию и саморазвитие ;)

а пока всем немного музыки в ленту) youtu.be/6drfp_3823I

@cssunderhood Главное чтоб тебе было удобно и результат получался достойный. Клиенту пофиг на чем вы пишете. Он хочет видеть результат

@nemcik7 @cssunderhood правильней будет сосредоточиться на задачах, которые ты должен выполнять как специалист. А инструменты подтянутся

@cssunderhood наборы так же имеют ранжировку по сложности в освоении для новичка: наиболее популярные легче учить, наименее - сложнее.

@cssunderhood Основы всему голова.

@cherry_off @cssunderhood оценивать свою работу мне помогла книга "Дизайн это работа". Это важно – знать себе цену

@way2bariton @cssunderhood нетворкинг решает, много общайся, вживую, конференции, группы по интересам, все что угодно

Доброе утро друзья! Начнем мы с музыки youtu.be/hdnNDceNWeM. А пока вы слушаете, я напишу что мы будем сегодня обсуждать)

Сегодня мы поговорим на одну из самых сложных тем - философию. Я постараюсь объяснить зачем нам это надо и как она нам может помочь.

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

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

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

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

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

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

Как дизайнер, верстальщик или разработчик может быть успешным?

У дизайнера, верстальщика или разработчика должна быть цель в гармонии.

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

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

Есть разное понимание успеха. Кто-то утверждает, что успех - это деньги, положение в обществе...

Восточная философия не отрицает эти формы успеха. Она делит успех на внутренний и внешний. Деньги и положение в обществе это внешний успех.

Внутренний успех - это выполнение свой работы качественно, чтоб это приносило внутреннее удовлетворение.

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

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

Человек становится решительным, сосредоточенным. У него нет врагов. Для него все дороги и он дорог всем.

Философия это не только про деньги! это также про отношения с другими.

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

@IgorDTP @vbalabanovich @cssunderhood С любой CMS приходится бороться, если надо выйти за рамки, установленные разработчиками.

@vbalabanovich @cssunderhood в начале друпал это боль и боль и ещё боль, а потом оказывается, что многие вещи в нём делаются проще, чем в wp

@uwebdesgn @vbalabanovich @cssunderhood Это крайности всё. Понятно, что зачастую небольшой сайт удобно на WP сделать.

@SilentImp @cssunderhood полеты и конференции играют незначительную роль в саморазвитии. А изучение статей и кода онлайн не требует денег.

После обсуждения философии предлагаю отдохнуть под этот трек youtu.be/zIRXoxwGZcw. А затем обсудить пет проекты)

@mourner другие формы мотивации начинают играть роль когда о деньгах ты можешь не думать. Думаю такая формулировка вернее @cssunderhood

@mourner Достоинство конференций в том что ты получаешь лучшее из лучшего и уже разжованное в кашку. @cssunderhood

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

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

Иногда, конечно же, пет проекты превращаются в инструменты каждодневного использования) у кого-то может чаще чем иногда)

@cssunderhood Обучение, да. И кроме того — помочь кому то тем или иным способом. Например дать инструмент разработки или обучения.

Пет проекты также могут помочь активно учавствовать в open source, найти новый друзей возможно даже будущих коллег.

Один из моих маленьких и скромных пет проектов вот такой маленький плагин, который помогает в тесте на моб. устр. npmjs.com/package/my-ip-…

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

У кого какие есть интересные наработки, идеи?

Как-то пробовал такую штуку делать github.com/admdh/posthtml…, но потом правда забросил)

А пробовал кто-то генераторы статических сайтов, например из этих staticgen.com? Что посоветуете?

@bvvell @cssunderhood пробовал jekyll, ушёл чз три года к галпу

@cssunderhood и можно развернуть на github pages

А кто-то помнит с предыдущими ведущими обсуждалась тема визуального тестирования верстки?

@cssunderhood Среди меня сейчас популярно решение React + renderToString (или renderToStaticMarkup) + webpack + html-webpack-plugin + HMR

@cssunderhood fronteers.nl/congres/2015/s… А вот презентация (видео и транскрипт) о последних трендах в генерации статических сайтов.

@denswor @cssunderhood @bvvell ага, но на работе мы генерируем статические лендинги и простые сайты галпом, так можно и с блогом делать

@cssunderhood metalsmith.io зачетный

День подходит к концу! Пора подвести итоги! Сегодня мы затронули сложную тему - философию и немного поговорили про пет проекты..

А вот вам и вечерний музончик youtu.be/v73aXqbPes4

@senja006 @cssunderhood Вот полифил Флексбокса — чисто на CSS его не сделать на 100% надёжно github.com/10up/flexibili…

@SilentImp @cssunderhood у меня похожие мысли по поводу жизни и всё это отлично работает

Доброе утро все! Начнем с вот такого вот трека youtu.be/LL8zaINhxfY

Так как нам приходиться каждый день использовать разные сервисы, хостинги, ftp и тд., предлагаю поговорить про безопасность!

На сколько вопрос безопасности важен для вас? Как вы защищаете свои данные?

Неплохая статья по настройке безопасности mac lifehacker.ru/2015/07/16/sam…

Недавно открыл для себя tutanota.com/ru/. End-to-end encryption, все дела. думаю на него переходить.

А кто-то на Mac OS X пользуется FileVault? Влияет ли FileVault на производительность HDD/SSD?

@cssunderhood пароли в keypassx,VPN через свой сервер,облако owncloud с шифрованием, шифрование домашнего каталога /home/user+плагины для FF

@cssunderhood Пользуюсь на твердотельном. Специально замерял до шифрования и после: разницы практически никакой.

Что вы думаете по поводу сложившейся ситуации между FBI и Apple?

Лично я на стороне Apple! FBI и так фильтрует все что только двигается.

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

Для хранения паролей использую 1password.. в Webstorm также использую мастер пароль)

@cssunderhood я однозначно на стороне Apple, да только FBI всё равно найдут рычаги давления, это вопрос времени

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

А пользуетесь ли вы антивирусами?

И вообще как вы относитесь к антивирусам и подобному софту?

Классный плагинчик для sketchapp и photoshop invisionapp.com/craft

@cssunderhood ты угрожал автоматизированным тестированием визуального соответствия макетам верстки.

@cssunderhood а ещё было бы неплохо поговорить про трехмерные трансформы и их место в нашей работе.

@cssunderhood а еще про браузерные игрушки без использования canvas. И как подтему — purecss игры.

Давайте поговорим про визуальное тестирование.

Одной из проблем визуального тестирования является автоматизация!

Первая проблема это экспорт дизайна так чтоб можно было легко по пиксельно сравнить с версткой!

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

Очень хорошо когда дизайнер подготовит дизайн так чтоб легко можно было экспортировать отдельные элементы..

Ещё проблема - автоматически как связать скришот и экспортированную картинку? Чтоб потом можно было их сравнить по пикселям.

Вообще полностью автоматизированного визуального теста я не встречал.

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

Для скриншотов самой верстки мы используем phantom.js. для сверки пикселей node-pngjs.

Много всяких штук для визуального теста я смотрел. Почти во всех основная проблема - автоматизация. Слишком много настроек вручную

У нас пробовали galenframework.com , ранее упомянутый github.com/2gis/makeup

@webholt да, но от тестирования то избавляться не нужно. Его обычно нужно наоборот — добавлять в воркфлоу. @lazy_frontend @cssunderhood

@SilentImp @cssunderhood Тестирование в данном случае нужно лишь потому, что есть две сущности: верстка и макет.

@SilentImp @cssunderhood Заменить дизайнера и верстальщика парой верстающих дизайнеров — дело проще и быстрее, тестеры свободны.

@webholt фронтендер-дизайнер это существо мифическое в общем то. Я за 16 лет таких не встречал. Разве что «типа фронтендер». @cssunderhood

А что вы думаете по поводу таких штук macaw.co ? и дизайн и верстка! Лично для меня можно немного поиграться, не более

@SilentImp @cssunderhood я знаю пару ребят, которым есть что сказать про PUREcss игры :) selenit.freeoda.com/experiments/no… css-live.ru/tricks/pure-cs…

Вот пример нашего графического diff! pic.twitter.com/J6zZxauWj4

@voischev @cssunderhood на практике.. все верно говоришь:актуальный "дизайн" для большинства сайтов счс максимально прост в визуальном плане

Так как сегодня уже пятница, надо бы немного соответствующей музыки youtu.be/dopNJoU2ebQ

@biercoff_enn @cssunderhood That’s the way to do it. Keep up with the secure habit. 😎

Copy, paste and remade youtu.be/rPshqgONTP4

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

@Vitalianez @cssunderhood вот-вот, а для pixel perfect это несколько проблематично (муторно просто и не всегда оправданно)

Доброе утро, друзья! сегодня выходной день! Давайте поговорим на свободные темы, а также css игры 3d и т.д.

Кто-то из вас пробовал делать PURE CSS игры? Делитесь опытом!

А вот и субботний музончик youtu.be/zuzBl2flM8s

Вообще считаю, что такие штуки как игры, картинки, шрифты на чистом CSS это хороший способ прокачать свои скилы.

Все привет! сегодня воскресенье - время подвести итоги прошедшей недели!

Было много оффтопа, ведь жизнь верстальщика это не только HTML и CSS!

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