iamfrntdv

7 марта 2016, Будапешт, Венгрия

# Понедельник 83 твита

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

5:57

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

6:01

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

6:02

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

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

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

7:05

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

7:07

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

7:09

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

7:10

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

7:14

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

7:15

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

7:16

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

7:21

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

7:25

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

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

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

8:05

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

8:09

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

8:13

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

8:15

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

8:26

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

8:27

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

8:28

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

8:30

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

8:31

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

8:34

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

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

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

8:44

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

8:46

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

8:47

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

8:48

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

8:50

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

8:53
@cssunderhood шутки не врут что ли pic.twitter.com/6sjtjCgFmV
8:54
Как узнать, вегетарианец ли ведущий коллективного твиттер-аккаунта? Подождите 5 минут, он сам об этом расскажет twitter.com/cssunderhood/s…
8:59

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

9:02

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

9:04

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

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

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

9:09

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

9:10

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

9:34

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

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

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

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

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

10:07
@cssunderhood мы Gulp только месяц назад прикрутили... Заказчик держит наш стэк технологий под строгим контролем, это мешает делать хорошо.

у нас Gulp в основном для билда @corsoul twitter.com/corsoul/status…

10:15

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

10:17

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

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

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

10:27

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

10:47

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

10:53

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

11:01

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

11:40

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

11:42
@iamstarkov так же как и к остальному оффтопу в @cssunderhood — положительно, т.к. интересно читать про людей, а не только технологии.
11:54
Фронтендеры, наступают смутные времена, история повторяется #IE #Chrome pic.twitter.com/gQHQ5PwG4Z
12:03

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

12:18

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

12:22
@cssunderhood что команда не должна быть многочисленной.

Чем это плохо? @Slaaless twitter.com/slaaless/statu…

12:58

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

13:21
@cssunderhood дали проект, там класы 1/1 1/3 2/6, что думаешь об этом?

Забавный случай. В этом нет ничего плохого если есть префикс. Если же просто цифры то сложно разобраться к чему они twitter.com/kostyandrew/st…

14:03
@corsoul, вообще, ваши тёрки не понятны. Если для повышения качества жизни нужны иснтрументы, то грех их не использовать. @cssunderhood
14:04
@cssunderhood коммитить первым :D
14:31
@ihorzenich @cssunderhood @iamstarkov Во-во. Мир же не ограничивается только работой.
15:12
@cssunderhood [class~="1/3"], [class~="2/6"], [class~="3/9"], [class~="4/12"] {width: 33.3333333% !important;}

А что наши читатели думают о таком? @kostyandrew twitter.com/kostyandrew/st…

15:30

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

17:54

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

17:56

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

17:58

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

18:03

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

18:04

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

18:06

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

18:09

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

18:14
@cssunderhood учет времени - это одно из худшего, что можно принести в разработку. Демотивирует на ура.

Согласен. Но для бизнесмена это вынужденный шаг. Как говорится время деньги. @rubyunderhood twitter.com/rubyunderhood/…

18:24
@cssunderhood не могу согласиться, работа программиста это не время и не место где он сидит. И для бизнеса не время приносит деньги

Есть бюджет на месяц - зарпалаты, сервисы ну и прибыл! если ты переработал, то бюджет ушел в минус. @rubyunderhood twitter.com/rubyunderhood/…

18:36
@rubyunderhood @cssunderhood не вижу ничего страшного, если разраб, после завершения тикета, проставит время выполнения.
18:37
@c01nd01r @cssunderhood Tempo Timesheets на сколько помню, работает только если ты не забыл нажать старт

Не только. можно когда угодно, что угодно, и сколько угодно добавлять в Tempo. @c01nd01r @rubyunderhood twitter.com/rubyunderhood/…

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

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

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

# Вторник 137 твитов

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

6:12

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

6:14
@cssunderhood а почему не используете Stylelint?

У нас много чего не используют.. Так уж завелось. Исправляю. @andrey_sitnik twitter.com/andrey_sitnik/…

6:17
@cssunderhood чем он плох? хорошее коробочное решение же

Медленный. У кого-то работал у кого-то нет. Много проблем, особенно на винде. @PostCSS не поддерживает. @GrawlCore twitter.com/grawlcore/stat…

6:21

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

6:59

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

7:01

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

7:03

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

7:05

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

7:06

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

7:08

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

7:13

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

7:16

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

7:17

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

7:18
@cssunderhood кто за vim ? :)
7:19

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

7:21

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

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

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

7:24

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

7:26
@cssunderhood это здесь перепись маководов? pic.twitter.com/XuPhP8KuG9
8:11
@cssunderhood домашнее = рабочее pic.twitter.com/SSmpP2BIdv
8:13
@b3ard0m Вот мне не нравилась эта портянка gulp-задач поэтому точки входа я перенёс в npm scripts. @cssunderhood
8:13
@cssunderhood пробую сейчас vs @code. Пока напоминает более правильно укомплектованный плагинами атом из коробки.
8:13

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

8:15

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

8:17
@cssunderhood дома я диванный разработчик pic.twitter.com/qLijR1UYTX
8:27
@juwain @cssunderhood @code вот тоже месяц на нем, пошустрей и приятней атома
8:27

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

8:29

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

8:32
@cssunderhood как вы можете работать с лептопом? Неудобно же. Маленькое, долго думает...

У меня лично с этим проблем нет;) @betstep twitter.com/betstep/status…

8:32

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

8:34

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

8:35

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

8:36

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

8:41

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

8:46

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

8:49
@cssunderhood когда приберусь обычно всё так pic.twitter.com/wLBjzId1Hn
8:49
@cssunderhood @jsunderhood @rubyunderhood постоянно об одном и том-же: редакторы, здоровье, кто что жрет, у кого какое хобби... надоело

Предложи тему, обсудим. Я всегда открыт. twitter.com/antonfrolovsky…

8:50
@cssunderhood ну не знаю, про технологии давай :) какие примеряешь на работе что из этого нравится/не нравится/хочется/нехочется.

Мы к этому подходим) @antonfrolovsky twitter.com/antonfrolovsky…

8:55
@cssunderhood вот с этого места подробнее

Что именно тебя интересует? @GrawlCore twitter.com/GrawlCore/stat…

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

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

9:00

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

9:02

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

9:04

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

9:05

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

9:07

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

9:09

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

9:09

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

9:12

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

9:14

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

9:17

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

9:25
@serhey_shmyg почему атом, а не саблайм? Давай я сейчас набросаю пост в блог и кину ссылку. @cssunderhood @int16h @GrawlCore @MaxBorisov
9:45
@cssunderhood sync settings вещь, не раз выручало
9:56
@cssunderhood точнее вот рабочее pic.twitter.com/mDmPQZpets
9:56

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

9:58

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

10:00

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

10:01

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

10:02

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

10:03

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

10:05

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

10:07

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

10:07

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

10:09

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

10:10

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

10:11
@cssunderhood а какие еще нужные плагины для атома?

из основных Emmet, project-manager, autoclose-html, atom-beautify, sublime-style-column-selection @brdt_D twitter.com/brdt_D/status/…

10:17

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

10:51

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

10:52

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

10:54

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

10:54

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

10:56

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

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

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

11:01

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

11:17

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

11:20

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

11:21

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

11:22

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

11:23

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

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

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

11:26

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

11:27

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

11:29

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

11:31

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

11:35

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

11:36

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

11:39

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

11:40

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

12:01

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

12:02

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

12:07

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

13:11

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

13:37

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

13:38

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

13:51

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

13:57

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

14:00

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

14:01

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

14:02

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

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

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

15:00

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

15:01

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

15:03
@cssunderhood это совсем не изоляция :) изоляция, скорее, когда js скрипты есть, но друг другу не мешают)

Тогда пардон) @life_maniac twitter.com/life_maniac/st…

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

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

15:24

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

15:38
@cssunderhood для JS: webpack bundling + minifier
15:40
@cssunderhood WP/Drupal/любая статика – PostHTML modules + CSS Modules, JS через Webpack. Какие проблемы? :)
15:40
@cssunderhood ты это имеешь ввиду npmjs.com/package/gulp-u… (для css)?
15:41

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

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

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

15:48

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

15:51

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

15:52

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

15:54

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

15:58
@cssunderhood поэтому стоит использовать бандлеры
16:00
@cssunderhood я управляю bundle'ами CSS через Sass, если жопа растёт. в JS так же можно через Webpack, но чуть сложнее.
16:00

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

16:02

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

18:14

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

18:14

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

18:16

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

18:17

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

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

# Среда 139 твитов

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

6:18

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

6:22

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

6:53

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

6:54

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

6:56

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

6:58

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

6:58

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

6:59

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

7:01

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

7:02
@cssunderhood бардака какого рода?

бардак в коде, в структуре файлов. Ну вообщем весь букет подарков для новичков в команде) @Sigiller twitter.com/Sigiller/statu…

7:03

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

7:04

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

7:06

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

7:08

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

7:09

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

7:18

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

7:19

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

7:21

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

7:22

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

7:25

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

7:25

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

7:26
@cssunderhood bem create расставляет в голове всё по местам. Ну и про методологию обязательно почитать.
7:26
@cssunderhood Слышал про Bemit? Вполне интересный способ обойти такого рода проблем

Да конечно. @w5html twitter.com/w5html/status/…

7:27

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

7:30

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

8:12

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

8:18

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

8:36
@cssunderhood IDE сама по себе неплохой линтер, если вы, конечно, не пишете код в notepad.

Не все используют IDE. да и настройки у всех свои. twitter.com/dshster/status…

8:46

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

8:52
@cssunderhood слабая коммуникация - это проблема команды, а не верстки.

я подразумевал проблему команды а не верстки.) twitter.com/krasivieglaza/…

9:12

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

9:16

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

9:19
@SiliconBangalor @vkryukov76 @cssunderhood одно время Гугл требовал от дизайнеров верстать, потом одумался и перестал. Инфа 100%. Им виднее
9:19
@cssunderhood понял, ну в таком случае должен быть кто-то, кто несет свет best practices. Это если всем не пофиг на то, чем они занимаются.

Полностью согласен! twitter.com/krasivieglaza/…

9:21

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

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

Но это еще старый)
blog.chromium.org/2014/09/respon… twitter.com/SergPro/status…

9:28
@cssunderhood Флексбоксы уже давно пора использовать, а не думать, что это bleeding edge.
9:29
@cssunderhood В одном файле должен быть один логический блок со всеми вариациями состояний.

и я о том же! очень сложно исправлять ошибки если это не так! twitter.com/mista_k/status…

9:31
@cssunderhood группировка медиавыражений никак не влияет на скорость парсинга стилей и отрисовки страницы.

А разве не влияет на размер файла из-за повторяющихся медиавыражений? twitter.com/mista_k/status…

9:50
@cssunderhood Как это исправить? Как усилить коммуникацию?

Объяснить почему это важно и развивать это культуру. Можно тренинги всякие проводить, чтоб было интересней twitter.com/mista_k/status…

9:51
@cssunderhood был хороший опыт - митапы на полтора часа в пятницу, тематические доклады. Ленивых мотивировали премиями за хорошие доклады.
9:56
@cssunderhood, не существенно. Оно же всё сжимается. Аналогично в схватке extend vs. mixin выигрывает по всем показателям CSS из миксинов.
9:57
@cssunderhood есть отличная статья про рендеринг CSS, ну и про работу браузера в целом - html5rocks.com/ru/tutorials/i…
10:23
@cssunderhood это сколько там уровней? покажи выборку `> p`

Лучше тебе этого не видеть;) twitter.com/grawlcore/stat…

10:49
@cssunderhood я видел 18. Показывай.
11:36

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

12:12

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

12:16

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

12:20

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

12:24
@cssunderhood верстальщик говорил так нельзя. Я ему говорил, что верю в него и оказывалось, что можно.
12:26
@cssunderhood Писал issue в багтрекер браузеров. Последнее время, возникающие проблемы других решений не имеют)
12:29

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

12:32

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

12:33

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

12:43
@cssunderhood лучше заставить всех пользоваться гитом и смотреть на коммиты

Да, но не всегда это возможно. Иногда нужно точно знать какая именно версия в продакшене twitter.com/Di_Ed_Seagull/…

12:45
@cssunderhood динамический ресайз iframe мне в своё время взорвал мозг. а потом нашёлся iframe-resizer и жить стало легче
12:54
@cssunderhood Обычно это делается через имя. Например, номер версии в пути или имя — хэш от содержимого.

а есть gulp плагин какой-то? twitter.com/ruGreLI/status…

12:55
@cssunderhood Обычно это делается через имя. Например, номер версии в пути или имя — хэш от содержимого.

Нашел плагин npmjs.com/package/gulp-v… twitter.com/ruGreLI/status…

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

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

15:16

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

15:18

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

15:20

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

15:21

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

15:23

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

15:25

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

15:29
@cssunderhood А еще брать предоплату

Если у вас хорошие отношение с клиентом и вы друг другу доверяете, то нет необходимости брать предоплату twitter.com/vbalabanovich/…

15:31

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

15:34

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

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

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

15:42

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

15:51

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

15:53

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

15:55
@cssunderhood, invision используете?

Пока не было необходимости в подобных сервисах. twitter.com/helloilya/stat…

16:07

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

16:09

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

16:09

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

16:12

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

16:13
@cssunderhood есть компании не использующие ни git, ни gulp, ни CI, а вот залезть по ftp и поправить код на продакшн проще простого!

Я имел ввиду, что для меня эти сервисы играю большую роль. поэтому для меня они очень важны ;) twitter.com/dshster/status…

16:15

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

16:17

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

16:20
@cssunderhood А что используешь тогда?

Иногда подсматриваю, чтоб улучшить свой CSS) а так в основном сам пишу) twitter.com/nemcik7/status…

16:21

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

16:25
@cssunderhood В каком редакторе?

Сейчас подсел на Webpack, параллельно использую Atom twitter.com/nemcik7/status…

16:26
@cssunderhood в вебпаке есть хороший плагин для генерации хэшей файлов(это к тому, что ты спрашивал есть ли такое для галпа)
17:06
@cssunderhood Как мне сориентироваться, если вокруг мне говорят, что bootstrap - говно,но знать надо.Нуно или не нуно?Пробовать его на вкус?

Я думаю стоит хоть немного изучить, тогда у тебя будет свое мнение по этому поводу. twitter.com/devnyse/status…

17:08
@cssunderhood Это, наверное, как emacs — и ОС заменит, и кофе сварит, только тексты редактирует плохо, так и у вебпака с бандлингом…
17:08
@cssunderhood 5 Гб не маловато? Или доплачиваешь?

Доплачиваю, сейчас там дешевле чем было раньше! twitter.com/GrawlCore/stat…

17:10
@cssunderhood Поставил емет и другие плагины и стал бомбический) А чем предыдущие лучше?)

В Webpack мне нравиться интеграция с node, gulp, git, jira и тд. А в Atom нравится Atom Commander twitter.com/nemcik7/status…

17:13
@devnyse @cssunderhood Нужно не просто попробовать, а понять для чего он и в какой ситуации можно и нужно его применить.

С этим тоже согласен! twitter.com/roma_milkovic/…

17:13
@cssunderhood Не понимаю, так как ещё не щупал это всё) Но наверное если юзаешь это то удобно.

Опять этот webpack, да что ж такое? Webstorm имел ввиду))) twitter.com/nemcik7/status…

17:18
@safinalexey @cssunderhood А, то есть то, что он редактор — это норм?

ребята опечатка вышла! я имел ввиду Webstorm @webholt @safinalexey twitter.com/webholt/status…

17:19

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

17:21
@cssunderhood @safinalexey Да ладно, отличный тред выходил же)

Блин! испортил я всю малину;) twitter.com/webholt/status…

17:23
@cssunderhood Заметил все таки))) Я ждал!) Если не бутстрап, то что новичку посоветуешь тогда?

Bootstrap попробовать стоит! Я же предпочитаю самому подобные штуки собирать. twitter.com/nemcik7/status…

17:27
@cssunderhood а как хотите сортировать?

по размерам) т.е. для моб. в одной группе, планшет. в другой и так далее twitter.com/Iprishvin/stat…

17:28

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

17:34

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

17:35

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

17:43
@cssunderhood а есть то, чего на сегодняшний день начинающим разработчикам учить не надо (front)? Ну, чтобы время не терять зря. Спасибо.

Даже не знаю! Тут скорее зависит от Вашего направления в Front-end-e... Но в любом случае лишнего знания не бывает twitter.com/devnyse/status…

17:46
@cssunderhood как получить первый заказ!?

Искать клиента!) Есть много сервисов. Также можно через друзей, знакомых. В Facebook и Vk тоже можно найти работу twitter.com/way2bariton/st…

17:48

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

17:51
@cssunderhood И скорость работы устраивает?

Проблем не было!) twitter.com/_nitive/status…

17:52
@cssunderhood типичные способы оплаты работы для украинских фрилансеров например - пейпел тут сами знаете.

Это вопрос? не совсем понятно.. twitter.com/grim_juz/statu…

17:53
@cssunderhood когда знакомые идут, но ты не знаешь этот их drupal, например, и не можешь ничего сказать по срокам. Стоит ли вообще браться?

Если у вас не получается или вы не хотите лучше красиво объяснить, чем потом друг на друга обижаться! twitter.com/octowed/status…

18:01
@cssunderhood когда знакомые идут, но ты не знаешь этот их drupal, например, и не можешь ничего сказать по срокам. Стоит ли вообще браться?

Если вы все же возьметесь объясните почему долго и какие могут возникнуть проблемы. Всегда важна коммуникация! twitter.com/octowed/status…

18:03
@cssunderhood да =) какие инструменты для оплаты вы использовали за время работы фрилансером?

В основном банковские переводы или наличные. Другими сервисами пользоваться не приходилось) twitter.com/grim_juz/statu…

18:04
@cssunderhood а, ок. я так понял банковские переводы без открытия счета. а какие именно системы? Western union дерет совершенно безбожный %.

Да с этим беда особенно с %. Но на сколько я знаю в Украине уже можно снимать деньги с PayPal. twitter.com/grim_juz/statu…

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

Ясно. Вспомнил что еще есть liqpay.com но не знаю на сколько большие там % twitter.com/grim_juz/statu…

18:18
@cssunderhood да =) какие инструменты для оплаты вы использовали за время работы фрилансером?

Ребята подсказывают, что еще есть skrill.com/ru/ . Говорят работает везде! twitter.com/grim_juz/statu…

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

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

18:46
@cssunderhood как грамотно поставить ценник, так чтобы потом об этом не пожалеть?

Мне кажется лучше в начале по времени считать. Например 8 часов N денег, 10 дней - 10*N. Как-то так.) twitter.com/cherry_off/sta…

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

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

19:04

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

19:06

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

19:08

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

19:09

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

19:15
@cssunderhood Как оценивать свою работу, если она не фиксирована? Как не спугнуть клиента))

Оценить свою работу можете только вы сами. Чтоб не спугнуть клиента нужно знать рыночные цены. twitter.com/nemcik7/status…

19:17
@cssunderhood Как не потерятся в кучи информации опять таки начинающему?)

Это сложно! Возможно сначала изучить все варианты - что, как, зачем, почему. А потом выбрать что вам больше подходит twitter.com/nemcik7/status…

19:20
@cssunderhood Как узнать эти цены, где искать(гугл не ответ)?

Узнать какие цены в локальных агентствах. оценить на сколько вы сможете работать лучше накинуть к цене или снизить twitter.com/nemcik7/status…

19:23
@cssunderhood А то учишь одно, читаешь что это уже плохо, и нужно другое, третий говорит третье, как-то так)

А с чем у вас проблема? twitter.com/nemcik7/status…

19:24
@cssunderhood А то учишь одно, читаешь что это уже плохо, и нужно другое, третий говорит третье, как-то так)

У каждого свой опыт, поэтому каждый советует свое. twitter.com/nemcik7/status…

19:25
@cssunderhood Главное чтоб тебе было удобно и результат получался достойный. Клиенту пофиг на чем вы пишете. Он хочет видеть результат
19:25
@nemcik7 @cssunderhood правильней будет сосредоточиться на задачах, которые ты должен выполнять как специалист. А инструменты подтянутся
19:26
@cssunderhood Ключевое слово - опыт, наверное да, тот кто многое уже повидал и знает, советует своё.

Но проблема в том, что не весь опыт применим ко всем остальным. twitter.com/nemcik7/status…

19:29
@cssunderhood Ключевое слово - опыт, наверное да, тот кто многое уже повидал и знает, советует своё.

Но есть знание оно применимо ко всем, но не все от него отталкиваются. Большенство советует из своего опыта. twitter.com/nemcik7/status…

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

Тут был немного другой контекст! Но да, я согласен! twitter.com/SheVasya/statu…

19:37
@cssunderhood наборы так же имеют ранжировку по сложности в освоении для новичка: наиболее популярные легче учить, наименее - сложнее.
19:38
@cssunderhood Основы всему голова.
19:38
@cherry_off @cssunderhood оценивать свою работу мне помогла книга "Дизайн это работа". Это важно – знать себе цену
22:51
@way2bariton @cssunderhood нетворкинг решает, много общайся, вживую, конференции, группы по интересам, все что угодно
22:51

# Четверг 58 твитов

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

6:52

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

6:54

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

8:02

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

8:06

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

8:08

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

8:10

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

8:11

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

8:14

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

8:15

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

8:17

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

8:19

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

8:20

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

8:31

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

8:33

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

8:35

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

8:36

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

8:37

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

8:38
@cssunderhood тебе не кажется что всё это имеет очень мало общего с реальным положением вещей и так как ты написал — просто не работает?

Это просто мое мнение. У меня оно работает. Еще все зависит от того как мы ко всему этому относимся ;) twitter.com/SilentImp/stat…

8:43
@SelenIT2 думаю ты и сам понимаешь что я тебе могу массу примеров привести, которые показывают что предложенное тобой не выход @cssunderhood

Конечно же деньги важны! Но клиент ценит тебя не за твою цену, а за качество твоей работы. twitter.com/silentimp/stat…

9:13
@cssunderhood Качество (как совокупность факторов) является одним из факторов формирования стоимости твоего времени.

Понятное дело, что у качества есть своя ценна. Но есть много чего ещё, что может больше мотивировать чем деньги twitter.com/silentimp/stat…

9:39
@cssunderhood например? И озвучь ситуацию когда этой мотивации достаточно _без_ денег?

Например изучить новую технологию, фреймворк и т.д. twitter.com/silentimp/stat…

9:46
@mourner так что деньги — первостепенная мотивация, в частности, что бы можно было пол года заниматься музыкой. @cssunderhood

Ну не знаю.. если я хочу заниматься музыкой, то точно не деньги в первую очередь меня мотивируют! twitter.com/SilentImp/stat…

10:08

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

10:13

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

10:15
@cssunderhood философия это вообще не про деньги. Или отношения :D

есть много разных философий, в каждой есть что-то хорошее) twitter.com/SilentImp/stat…

10:16
@webholt @vbalabanovich @cssunderhood wp более оптимизированая и шустрей работает?

Думаю если навесит плагинов, то и wp не такой шустрый;) twitter.com/IgorDTP/status…

10:17
@IgorDTP @vbalabanovich @cssunderhood С любой CMS приходится бороться, если надо выйти за рамки, установленные разработчиками.
10:19
@vbalabanovich @cssunderhood в начале друпал это боль и боль и ещё боль, а потом оказывается, что многие вещи в нём делаются проще, чем в wp
10:19
@webholt @vbalabanovich @cssunderhood ок, joomla и wp выкидиваем, что выбирать в качестве движка? именно для сайтов не блогов :)

Мне нравится Drupal) twitter.com/IgorDTP/status…

10:21
@uwebdesgn @vbalabanovich @cssunderhood Это крайности всё. Понятно, что зачастую небольшой сайт удобно на WP сделать.
10:31
@SilentImp @cssunderhood полеты и конференции играют незначительную роль в саморазвитии. А изучение статей и кода онлайн не требует денег.
10:44

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

10:51
@mourner другие формы мотивации начинают играть роль когда о деньгах ты можешь не думать. Думаю такая формулировка вернее @cssunderhood
10:57
@mourner Достоинство конференций в том что ты получаешь лучшее из лучшего и уже разжованное в кашку. @cssunderhood
11:03

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

11:09

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

11:11

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

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

Увлечение, хобби, сайд проект.. Может перерасти во что-то большее чем просто хобби. twitter.com/senja006/statu…

11:20

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

11:39

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

12:31

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

13:49

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

14:11
@cssunderhood Все идеи и наработки уже фейсбук купил;)

Ну не прям все) twitter.com/nemcik7/status…

14:22

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

14:37

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

14:42
@cssunderhood пробовал Jekyll

И че как? twitter.com/bvvell/status/…

14:56
@bvvell @cssunderhood пробовал jekyll, ушёл чз три года к галпу
15:02
@cssunderhood и можно развернуть на github pages
15:02

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

15:20
@cssunderhood ноуп. Интересно.

Тогда завтра будем обсуждать! ;) twitter.com/SilentImp/stat…

15:28
@cssunderhood Среди меня сейчас популярно решение React + renderToString (или renderToStaticMarkup) + webpack + html-webpack-plugin + HMR
17:29
@cssunderhood fronteers.nl/congres/2015/s… А вот презентация (видео и транскрипт) о последних трендах в генерации статических сайтов.
17:29
@denswor @cssunderhood @bvvell ага, но на работе мы генерируем статические лендинги и простые сайты галпом, так можно и с блогом делать
17:29
@cssunderhood metalsmith.io зачетный
17:29

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

18:20

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

18:57

# Пятница 68 твитов

@senja006 @cssunderhood Вот полифил Флексбокса — чисто на CSS его не сделать на 100% надёжно github.com/10up/flexibili…
6:00
@SilentImp @cssunderhood у меня похожие мысли по поводу жизни и всё это отлично работает
6:00

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

6:09

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

6:11
Узнал, что у Safari тоже есть режим отзывчивости. Приятный. @cssunderhood pic.twitter.com/8VjdZTBoxO

Мне очень нравится он ;) twitter.com/GrawlCore/stat…

6:11

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

6:40

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

6:41

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

6:45

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

6:49
@cssunderhood protonmail?

Видел и этот сервис тоже) Тоже достойный кандидат;) twitter.com/absoluteaffect…

6:53
@cssunderhood пароли в keypassx,VPN через свой сервер,облако owncloud с шифрованием, шифрование домашнего каталога /home/user+плагины для FF
6:56
@cssunderhood Пользуюсь на твердотельном. Специально замерял до шифрования и после: разницы практически никакой.
6:56

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

8:16

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

8:17

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

8:19

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

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

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

9:17
@cssunderhood боже да всем пофиг.

В этом и беда! Всем всегда пофиг, а правительство скоро у нас в голове жить будет. Хотя возможно у кого-то уже там. twitter.com/krasivieglaza/…

9:19
@cssunderhood парольный менеджер в WebStorm??

В Webstorm можно подключаться ко всяким сервисам. Поэтому из соображений безопасности можно установить мастер пароль twitter.com/sherlaimov/sta…

9:54

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

10:25

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

10:25
Верните нормальный @cssunderhood. Заебало читать оффтоп. @juwain

Вы всегда можете предложить тему для обсуждения! twitter.com/life_maniac/st…

10:56

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

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

Это тоже обсудим! twitter.com/SilentImp/stat…

10:57
@cssunderhood ты угрожал автоматизированным тестированием визуального соответствия макетам верстки.
10:58
@cssunderhood а ещё было бы неплохо поговорить про трехмерные трансформы и их место в нашей работе.
10:58
@cssunderhood а еще про браузерные игрушки без использования canvas. И как подтему — purecss игры.
10:58

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

11:12

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

11:14

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

11:16

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

11:18

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

11:20

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

11:23
@cssunderhood Часто такое бывает? ))) Берегите такого дизайнера, из него может что-то получиться

В том-то и проблема, что пока что таких не встречал) twitter.com/voischev/statu…

11:24

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

11:25
@cssunderhood sketch?

У нас в основном Photoshop. Хотя мне больше нравится sketch) twitter.com/silentimp/stat…

11:27
Попиксельная верстка — миф, выдуманный и поддерживаемый педантичными дизайнерами и monkey-верстальщиками. twitter.com/cssunderhood/s…

А что если клиент требует? В таком случае этот миф очень даже становится реальностью.. twitter.com/lazy_frontend/…

11:29
@cssunderhood У дизайнера на выходе картинка. У тебя — рабочий экземпляр. Если там есть текст, то либо ты его картинкой вставишь, либо мимо.

У нас, на работе, очень даже получается пиксель в пиксель верстать. понятное дело что у этого есть своя цена! twitter.com/webholt/status…

11:39

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

11:42
@SilentImp @lazy_frontend @cssunderhood И говорил о том, что соответствие верстки макету должен проверять тот самый дизайнер.

а если в компании 40 чел., а дизайнеров всего 2е. то кому проверять? есть тестировщики они пусть и проверяют.) twitter.com/webholt/status…

11:43
Время, нервы, неподдерживаемые стили и разметка, деньги заказчика. twitter.com/cssunderhood/s…

Заказчик знает. Поэтому и платит ;) twitter.com/webholt/status…

11:44
@cssunderhood если дизайнера волнует качество, он всё равно придёт и проверит. Тестировщик не панацея.

Когда дизайнер = конвейер, сильно много его не волнует. twitter.com/Yumadilov/stat…

11:45

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

11:51
Экстенсивный путь развития, всё понятно. Низкоквалифицированный тестировщик сверяет верстку с макетом. twitter.com/cssunderhood/s…

к сожалению пока так.. twitter.com/webholt/status…

11:52

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

11:54
@cssunderhood а что вы получаете в результате сверки? число обозначающее степень соответствие? графический diff?

И степень соответствия и графический diff! twitter.com/SilentImp/stat…

11:55

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

12:00
@webholt да, но от тестирования то избавляться не нужно. Его обычно нужно наоборот — добавлять в воркфлоу. @lazy_frontend @cssunderhood
12:03
@SilentImp @cssunderhood Тестирование в данном случае нужно лишь потому, что есть две сущности: верстка и макет.
12:03
@SilentImp @cssunderhood Заменить дизайнера и верстальщика парой верстающих дизайнеров — дело проще и быстрее, тестеры свободны.
12:03
@webholt фронтендер-дизайнер это существо мифическое в общем то. Я за 16 лет таких не встречал. Разве что «типа фронтендер». @cssunderhood
12:05

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

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

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

12:13
@cssunderhood @lazy_frontend если грамотный верстальщик и дизайнер с большой буквы, можно добиться результата 99% особенно еслимакет в скетч

Согласен! Но если качественно сделан дизайн, то не обязательно только sketch. twitter.com/oxanaboki/stat…

12:15
@cssunderhood а че дримвьювер уже не модный?)

У нас один ветеран еще пользуется) twitter.com/betstep/status…

12:17
@cssunderhood да и я бы не принял, заголовки и кнопки гуляют как хотят

У нас тоже такое не принимают. Верстальщики потом исправляют! twitter.com/kbytin/status/…

12:40
@cssunderhood а какая степень соответствия? у вас есть какой то порог после которого тестировщика/верстальщика уведомляет/бьет током?

насколько я помню не менее 90%. twitter.com/SilentImp/stat…

12:47
@voischev @cssunderhood на практике.. все верно говоришь:актуальный "дизайн" для большинства сайтов счс максимально прост в визуальном плане
16:46
@jsunderhood @cssunderhood кстати, мы тут игры на CSS обсуждаем. А вы еще про реакт не заводили в эту неделю?

Надо подумать над этим) twitter.com/jsunderhood/st…

16:47
Это еще что. У нас две недели назад разработчик сделал вместо попап на отдельную страницу, потому что он так видит. twitter.com/cssunderhood/s…

это пример diff-а верстки и дизайна) twitter.com/jsunderhood/st…

16:48
@Vitalianez @cssunderhood многие дизайнеры (все, с которыми я работал) делают отступ от нижней строки, а в браузерах всё совсем не так

бывает и хуже! бывает когда отступы от букв типа "а,б,в,г,т,л" точнее от их самой нижней точки, несмотря на "руф" twitter.com/b3ard0m/status…

16:51
Я про то, что можно только порадоваться, что все куски верстки хотя бы на той странице. И более-менее рядом twitter.com/cssunderhood/s…

Ну это надо! но обычно у нас это считается визуальным багом и подлежит дальнейшему исправлению. twitter.com/jsunderhood/st…

16:52

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

16:54
@biercoff_enn @cssunderhood That’s the way to do it. Keep up with the secure habit. 😎
17:02

Copy, paste and remade youtu.be/rPshqgONTP4

17:05

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

19:22

# Суббота 7 твитов

@cssunderhood нужна помощь опытных. Что использовать: sass, less, scss. По всем пунктам, что лучше??

Все они чем-то похожи! Изучи все, а потом выбери что тебе больше нравится! Мне например больше нравится @PostCSS twitter.com/nemcik7/status…

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

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

8:09

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

10:55

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

11:00

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

11:04
@cssunderhood шрифт на чистом css? Это как и зачем?

yusugomori.com/projects/css-s… Зачем, сложно ответить. Может для общего развития))) twitter.com/discotune/stat…

17:14

# Воскресенье 4 твита

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

9:58
@cssunderhood не знаю, обсуждали раньше эту тему или нет, но.. Angular VS React. Что предпочитаете вы?

В соседнем @jsunderhood, там больше про это! В каждом из них есть свои + и -. twitter.com/iGlitchime/sta…

10:01

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

10:14

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

10:17

youtu.be

github.com

other