Верстаю сайты всего около полугода, практически все методы которые были здесь упомянутые, изучал практически сразу, и сейчас их активно использую. Тот же препроцессор я начал использовать уже в третьем своем учебном проекте, gulp где то с 10-12. Когда пришел на работу, и узнал что здешние верстальщики , а их было пару человек, не используют эти инструменты, был сильно удивлен как так, в итоге не смотря на их опыт работы, от года и выше, я делал сайты гораздо быстрее, позже по моей системе начали делать все проекты. Спустя время из верстальщиков в компании остался только я один, зп есстественно существенно выросла, и при этом нет ощущения того что много работы, так как она выполняется быстро и не напряжно
А где учился верстке или откуда узнал про все фишки. Я, слышал про эти препроцессоры и тд, но вот так в одном видео собрать и немного рассказать обо всем - не встречал. Хотя специально и не интересовался.
Доклад офигенный, говорю как победитель в конкурсе верстальщиков на фл.ру, очень многое из сказанного уже использую, но вот про css hat и прочие плагины для фотошопа первый раз слышу)) вообщем чувак, ты не зря выступил это однозначно)) По поводу жабы покупки css hat скажу так: я иногда дома стройкой занимаюсь (строю блоками(div)) и я очень поздно для себя задавил жабу и купил бетономешалку, которая сэкономила мне много сил и времени. вроде бы и без нее можно, но с ней быстрее. Какой вывод из этого? бетономешалка стоит дороже чем css hat поэтому советую его брать однозначно!!))))
+Evgeniy Flamberd Спасибо на добром слове :) Про бетономешалку в точку, просто наши люди как-то привыкли экономить на инструментарии, надо чаще инвестировать в себя :)
Он про то, что у себя на даче строит дом из блоков. Кладёт их на раствор. А раствор мешал вручную. Потом купил бетономешалку и стал мешать раствор с ее помощью. Благодаря этому ускорилась стройка.
Спасибо. Очень полезный доклад для меня, как для совсем-совсем начинающей. Только закончила второй уровень курсов по html и css. Все, о чем говорил Юрий для меня было ново и непонятно. В процессе просмотра много гуглила. Подумать только - я даже гуглила, что такое сниппет, и как его "ставить" ))) Препроцессоры тоже... нам на курсах об этом не говорили. Возможно, мы еще не "доросли" до них.. но, мне кажется, о плагине emmet уж точно должны были сказать. Еще раз спасибо за хаки, за наводки. Знаю теперь, что еще можно почитать,чему поучиться в верстке )
Спасибо, Юрий! Очень информативное выступление, много нового подчерпнула для себя. Наконец-то поняла, кого вы мне издали напоминаете - Говарда Воловица из Теории большого взрыва, гения инженерии:))))
- Используйте ссд, это прям вещь, без него никак. - "Некоторые школы предпочитают огнестрельное оружие. Это слабые школы, они не понимают принципа "рубит врага любыми средствами"" так говорил древний японец. Не заморачивайтесь на какой-то один инструмент.
Про спрайты в Compass. Также можно еще упростить себе жизнь, просто используя функцию sprite-map, чтобы через запятую не перечислять все имена из папки. Например: $icons: sprite-map("icons/*.png", $layout: smart) i background: $icons display: inline-block @each$i in sprite_names($icons) &.icon-#{$i} background-position: sprite-position($icons, $i) +sprite-dimensions($icons, $i) Все :)
Все верно, они так по умолчанию и предлагают использовать спрайты в компасе, но это просто значит что icon придется вставлять в HTML, и там появится куча классов вроде icon-logo, icon-toparrow icon-that_useless_shit_over_there и все будут с этим префиксом, а мне лично это не нравится :) Но дело вкуса
а кто в курсе, как в emmet'e настроить оборачивания коментариями, как говорил чувак из зала?) как начинающий могу лишь сказать огромное спасибо за это видео. теперь я знаю на что потратить первые деньги, когда заработаю их на вёрстке)
+Кирилл Кузецов Если еще актуально :)) gist.github.com/akella/9757676 это сниппет для sublime text вот так он устанавливется: Sublime Text > Tools > New Snippet. - вставляете сниппет - сохраняте в файле. Теперь можно использовать аббревиатуру di нажимая TAB(как в эммете)
подскажите пожалуйста как всё таки подключить комментарии.Делаю всё написано и ввожу ди и жму таб и ничего не происходит.Объясните как пользоваться этим снипетом и как его добавлять,куда добавить файл в архиве,пожалуйста.
Roman Trilo Спасибо Роман. Установил CS5, там этой опции нет. Почитал-полистал, она должна быть в CC, CS6. Поставил CS6, там её "с ходу" не оказалось. Поставил css hat. Отлично! Только не всегда clip2net.com/s/3gXI04h Как видим, слой имеет градиент, а о нём ни строчки. На ином блоке с градиентом ОК. Кто сможет подсказать. Лечится или смириться?
+Дмитрий Тадышев Можно конечно, но только в последних версиях, и все еще гораздо неудобней чем в CSS Hat. Как и SVG сохранять, тоже можно нативным фотошопом, но только если не очень любишь себя :)
CSS Hat очень хорош, но не всегда корректен. Например: разночтения с фоошопом фонтов clip2net.com/s/3hagOZm Кроме этого подмечал нюансы. Инструмент отличный,бесспорно. но не идеальный.
классный чувак, интересные вещи рассказывает, но из за заикания и тороторства не могу досмотреть, очень старался, передышки делал, но не могу, прям голова раскалывается. Лайки, репосты и т.д._)
Ничего полезного. Стандартные инструменты и приемы которые используются во Front-end повседневно. Было бы гораздо лучше если бы он рассказал для новичков про препроцессоры (jade stylus и тд.) и сборщики проектов, такие как Gulp и Grunt.
Очень малоинформативная презенташка. К тому же, 1) Avacode избавляет от необходимости в перечисленных костылях для Фотошопа. 2) Compass не может в генерацию svg спрайтов. Зачем он нужен? Незачем. Gulp/Grunt -- в помощь.
Это Говард Воловиц из Теории Большого Взрыва :)?
Верстаю сайты всего около полугода, практически все методы которые были здесь упомянутые, изучал практически сразу, и сейчас их активно использую. Тот же препроцессор я начал использовать уже в третьем своем учебном проекте, gulp где то с 10-12. Когда пришел на работу, и узнал что здешние верстальщики , а их было пару человек, не используют эти инструменты, был сильно удивлен как так, в итоге не смотря на их опыт работы, от года и выше, я делал сайты гораздо быстрее, позже по моей системе начали делать все проекты. Спустя время из верстальщиков в компании остался только я один, зп есстественно существенно выросла, и при этом нет ощущения того что много работы, так как она выполняется быстро и не напряжно
А где учился верстке или откуда узнал про все фишки. Я, слышал про эти препроцессоры и тд, но вот так в одном видео собрать и немного рассказать обо всем - не встречал. Хотя специально и не интересовался.
@@Tokamame Хороший вопрос, жаль, нет ответа. Тоже интересно.
Благодарю! Выступил клево с юмором!) поднял настроение!))
Доклад офигенный, говорю как победитель в конкурсе верстальщиков на фл.ру, очень многое из сказанного уже использую, но вот про css hat и прочие плагины для фотошопа первый раз слышу)) вообщем чувак, ты не зря выступил это однозначно))
По поводу жабы покупки css hat скажу так: я иногда дома стройкой занимаюсь (строю блоками(div)) и я очень поздно для себя задавил жабу и купил бетономешалку, которая сэкономила мне много сил и времени. вроде бы и без нее можно, но с ней быстрее. Какой вывод из этого? бетономешалка стоит дороже чем css hat поэтому советую его брать однозначно!!))))
Evgeniy Flamberd вы являетесь победителем на fl.ru?) круто
+Evgeniy Flamberd Спасибо на добром слове :) Про бетономешалку в точку, просто наши люди как-то привыкли экономить на инструментарии, надо чаще инвестировать в себя :)
+Evgeniy Flamberd что за бетономешалка? поясните пожалуйста. Интересно стало.
css hat ))
Он про то, что у себя на даче строит дом из блоков. Кладёт их на раствор. А раствор мешал вручную. Потом купил бетономешалку и стал мешать раствор с ее помощью. Благодаря этому ускорилась стройка.
Спасибо.
Очень полезный доклад для меня, как для совсем-совсем начинающей.
Только закончила второй уровень курсов по html и css.
Все, о чем говорил Юрий для меня было ново и непонятно.
В процессе просмотра много гуглила. Подумать только - я даже гуглила, что такое сниппет, и как его "ставить" ))) Препроцессоры тоже... нам на курсах об этом не говорили. Возможно, мы еще не "доросли" до них.. но, мне кажется, о плагине emmet уж точно должны были сказать.
Еще раз спасибо за хаки, за наводки. Знаю теперь, что еще можно почитать,чему поучиться в верстке )
+Наташа Гончарук На здоровье :) значит не зря рассказывал
Спасибо, Юрий! Очень информативное выступление, много нового подчерпнула для себя.
Наконец-то поняла, кого вы мне издали напоминаете - Говарда Воловица из Теории большого взрыва, гения инженерии:))))
Для тех, кто начал верстать два месяца назад. Но всё равно не пожалел, что посмотрел. Юра приятный.
Спасибо вам, Юрий! Много полезного почерпнул!
Дмитрий Борщов
это ж Dendi
Очень понравилось, спасибо
Спасибо, крутой выступающий
Спасибо, очень познавательно!
Блин это Stand Up, что ли)
- Используйте ссд, это прям вещь, без него никак.
- "Некоторые школы предпочитают огнестрельное оружие. Это слабые школы, они не понимают принципа "рубит врага любыми средствами""
так говорил древний японец. Не заморачивайтесь на какой-то один инструмент.
А где ссылка на иконку sublimetext? В видео обещали дать.
Про спрайты в Compass.
Также можно еще упростить себе жизнь, просто используя функцию sprite-map, чтобы через запятую не перечислять все имена из папки.
Например:
$icons: sprite-map("icons/*.png", $layout: smart)
i
background: $icons
display: inline-block
@each$i in sprite_names($icons)
&.icon-#{$i}
background-position: sprite-position($icons, $i)
+sprite-dimensions($icons, $i)
Все :)
Все верно, они так по умолчанию и предлагают использовать спрайты в компасе, но это просто значит что icon придется вставлять в HTML, и там появится куча классов вроде icon-logo, icon-toparrow icon-that_useless_shit_over_there и все будут с этим префиксом, а мне лично это не нравится :) Но дело вкуса
Добрий вечір
Полезно, спасибо
Говард Воловиц?
а кто в курсе, как в emmet'e настроить оборачивания коментариями, как говорил чувак из зала?)
как начинающий могу лишь сказать огромное спасибо за это видео. теперь я знаю на что потратить первые деньги, когда заработаю их на вёрстке)
на ssd ?)
А что про Adobe Assets? Там же можно тоже весь код из файла дергать
+Артур Бадретдинов Да, но это недавно появилось, а презентации уже полтора года. И даже на данный момент это все еще неудобно, CSS Hat таки удобней.
Надо попробовать, на СС встает без проблем? Триал не нашел на сайте правда. Хотя если он плагин, то и не получится)
+Артур Бадретдинов Если очень захотеть можно найти "триал" на торрентах, но я вам этого не говорил ;-)
Скорость на 1,5 и вперед!
Даже в 2019 году есть пару лайфхаков)))
Поставьте сюда еще html-шаблонизатор jade, и вы еще на 50% ускорите верстку
На 12 минуте говорить об хаке который оборачивает блок в комментариев
> Как такое получить?
+Кирилл Кузецов Если еще актуально :))
gist.github.com/akella/9757676
это сниппет для sublime text
вот так он устанавливется:
Sublime Text > Tools > New Snippet. - вставляете сниппет - сохраняте в файле.
Теперь можно использовать аббревиатуру di нажимая TAB(как в эммете)
подскажите пожалуйста как всё таки подключить комментарии.Делаю всё написано и ввожу ди и жму таб и ничего не происходит.Объясните как пользоваться этим снипетом и как его добавлять,куда добавить файл в архиве,пожалуйста.
+Axest Raid вот тут подробно написано как подключить его в Sublime Text sublimetext.info/docs/en/extensibility/snippets.html
Вот для тех кто не нашел ответа
Just create a new snippet Sublime Text > Tools > New Snippet.
Then type di and press the TAB key.
Ощущение, что смотрю StandUp, а не выступление. Не пошло.
И кстати, комбинация "fs" разворачивается Emmet'ом в "font-style", а не в "font-size".
Потому что это hayaku а не emmet.
На 14:10 я так и не понял... как comments добавлять
Ребята дайте силку на snippet для саблайма
gist.github.com/akella/9757676
Vladislav Balabanovich Спасибо)
Vladislav Balabanovich А для WebStorm чего-то похожего нету?
Vladislav Balabanovich а как его установить ?
Вот у кого весь мир как ключница в кормане
То чувство, когда человек не ставит пробел перед открывающей скобкой. И что у нас забыли все про вектор? Какого * дизайнеры рисуют в растре.
Кстати да, какого?
Он вроде говорил, сохраняй в svg, Png генерируй автоматически. Svg вроде и есть тот самый ламповый вектор.
Кто нить мне объяснит как он на 15:28 ставит так быстро комментарии?, чтобы они в начале и в конце блока записывались.?
Это сниппет. Вот ссылка: gist.github.com/akella/9757676
Подгоните кто CSS Hat Бедному front-end`y))))
А Photoshop? :D
лучше верстать через Gulp и Pug так быстрее
бред, можно и без всяких дополнений скопировать CSS стили в Фотошопе!
Дмитрий Тадышев Дмитрий, как?
Владимир Максименко take.ms/hktT0
Roman Trilo Спасибо Роман. Установил CS5, там этой опции нет. Почитал-полистал, она должна быть в CC, CS6. Поставил CS6, там её "с ходу" не оказалось. Поставил css hat. Отлично! Только не всегда clip2net.com/s/3gXI04h Как видим, слой имеет градиент, а о нём ни строчки. На ином блоке с градиентом ОК. Кто сможет подсказать. Лечится или смириться?
+Дмитрий Тадышев Можно конечно, но только в последних версиях, и все еще гораздо неудобней чем в CSS Hat. Как и SVG сохранять, тоже можно нативным фотошопом, но только если не очень любишь себя :)
ссылка на снипет для sublime (который блоки подписывает)
gist.github.com/akella/9757676
CSS Hat очень хорош, но не всегда корректен. Например: разночтения с фоошопом фонтов clip2net.com/s/3hagOZm
Кроме этого подмечал нюансы.
Инструмент отличный,бесспорно. но не идеальный.
Ответ: "Никак".
классный чувак, интересные вещи рассказывает, но из за заикания и тороторства не могу досмотреть, очень старался, передышки делал, но не могу, прям голова раскалывается. Лайки, репосты и т.д._)
стендапер типо...
Чорт подери - это же Воловиц!
а почему этот гений верстки даже не смог догадаться микрофон ближе к своему носу поднести
Все, о чем он здесь говорит, уже не актуально.
у меня hhd и он работает так быстро что быстрее просто не бывает, вообще не вижу смысла sdd в вёрстке, ибо он полезен только в играх.
Ничего полезного. Стандартные инструменты и приемы которые используются во Front-end повседневно. Было бы гораздо лучше если бы он рассказал для новичков про препроцессоры (jade stylus и тд.) и сборщики проектов, такие как Gulp и Grunt.
Очень малоинформативная презенташка. К тому же,
1) Avacode избавляет от необходимости в перечисленных костылях для Фотошопа.
2) Compass не может в генерацию svg спрайтов. Зачем он нужен? Незачем. Gulp/Grunt -- в помощь.
+Alex Gubarev так то видосу уже полтора года, ну да ладно.
+Alex Gubarev :) Я как раз был первым бетатестером этого приложения и придумал часть фич, только правильно писать Avocode ;-)
Переименуй ролик в: как быстро засрать мозги
сплошное блаблаблабла