Верстаю сайты всего около полугода, практически все методы которые были здесь упомянутые, изучал практически сразу, и сейчас их активно использую. Тот же препроцессор я начал использовать уже в третьем своем учебном проекте, 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 настроить оборачивания коментариями, как говорил чувак из зала?) как начинающий могу лишь сказать огромное спасибо за это видео. теперь я знаю на что потратить первые деньги, когда заработаю их на вёрстке)
Roman Trilo Спасибо Роман. Установил CS5, там этой опции нет. Почитал-полистал, она должна быть в CC, CS6. Поставил CS6, там её "с ходу" не оказалось. Поставил css hat. Отлично! Только не всегда clip2net.com/s/3gXI04h Как видим, слой имеет градиент, а о нём ни строчки. На ином блоке с градиентом ОК. Кто сможет подсказать. Лечится или смириться?
+Дмитрий Тадышев Можно конечно, но только в последних версиях, и все еще гораздо неудобней чем в CSS Hat. Как и SVG сохранять, тоже можно нативным фотошопом, но только если не очень любишь себя :)
CSS Hat очень хорош, но не всегда корректен. Например: разночтения с фоошопом фонтов clip2net.com/s/3hagOZm Кроме этого подмечал нюансы. Инструмент отличный,бесспорно. но не идеальный.
+Кирилл Кузецов Если еще актуально :)) gist.github.com/akella/9757676 это сниппет для sublime text вот так он устанавливется: Sublime Text > Tools > New Snippet. - вставляете сниппет - сохраняте в файле. Теперь можно использовать аббревиатуру di нажимая TAB(как в эммете)
подскажите пожалуйста как всё таки подключить комментарии.Делаю всё написано и ввожу ди и жму таб и ничего не происходит.Объясните как пользоваться этим снипетом и как его добавлять,куда добавить файл в архиве,пожалуйста.
классный чувак, интересные вещи рассказывает, но из за заикания и тороторства не могу досмотреть, очень старался, передышки делал, но не могу, прям голова раскалывается. Лайки, репосты и т.д._)
Ничего полезного. Стандартные инструменты и приемы которые используются во 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, что ли)
Добрий вечір
Полезно, спасибо
- Используйте ссд, это прям вещь, без него никак.
- "Некоторые школы предпочитают огнестрельное оружие. Это слабые школы, они не понимают принципа "рубит врага любыми средствами""
так говорил древний японец. Не заморачивайтесь на какой-то один инструмент.
Про спрайты в 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 ?)
А где ссылка на иконку sublimetext? В видео обещали дать.
Даже в 2019 году есть пару лайфхаков)))
Говард Воловиц?
Скорость на 1,5 и вперед!
Поставьте сюда еще html-шаблонизатор jade, и вы еще на 50% ускорите верстку
Вот у кого весь мир как ключница в кормане
бред, можно и без всяких дополнений скопировать CSS стили в Фотошопе!
Дмитрий Тадышев Дмитрий, как?
Владимир Максименко take.ms/hktT0
Roman Trilo Спасибо Роман. Установил CS5, там этой опции нет. Почитал-полистал, она должна быть в CC, CS6. Поставил CS6, там её "с ходу" не оказалось. Поставил css hat. Отлично! Только не всегда clip2net.com/s/3gXI04h Как видим, слой имеет градиент, а о нём ни строчки. На ином блоке с градиентом ОК. Кто сможет подсказать. Лечится или смириться?
+Дмитрий Тадышев Можно конечно, но только в последних версиях, и все еще гораздо неудобней чем в CSS Hat. Как и SVG сохранять, тоже можно нативным фотошопом, но только если не очень любишь себя :)
CSS Hat очень хорош, но не всегда корректен. Например: разночтения с фоошопом фонтов clip2net.com/s/3hagOZm
Кроме этого подмечал нюансы.
Инструмент отличный,бесспорно. но не идеальный.
Ощущение, что смотрю StandUp, а не выступление. Не пошло.
И кстати, комбинация "fs" разворачивается Emmet'ом в "font-style", а не в "font-size".
Потому что это hayaku а не emmet.
А что про Adobe Assets? Там же можно тоже весь код из файла дергать
+Артур Бадретдинов Да, но это недавно появилось, а презентации уже полтора года. И даже на данный момент это все еще неудобно, CSS Hat таки удобней.
Надо попробовать, на СС встает без проблем? Триал не нашел на сайте правда. Хотя если он плагин, то и не получится)
+Артур Бадретдинов Если очень захотеть можно найти "триал" на торрентах, но я вам этого не говорил ;-)
ссылка на снипет для sublime (который блоки подписывает)
gist.github.com/akella/9757676
Подгоните кто CSS Hat Бедному front-end`y))))
А Photoshop? :D
То чувство, когда человек не ставит пробел перед открывающей скобкой. И что у нас забыли все про вектор? Какого * дизайнеры рисуют в растре.
Кстати да, какого?
Он вроде говорил, сохраняй в svg, Png генерируй автоматически. Svg вроде и есть тот самый ламповый вектор.
На 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.
Ответ: "Никак".
На 14:10 я так и не понял... как comments добавлять
лучше верстать через Gulp и Pug так быстрее
Кто нить мне объяснит как он на 15:28 ставит так быстро комментарии?, чтобы они в начале и в конце блока записывались.?
Это сниппет. Вот ссылка: gist.github.com/akella/9757676
Ребята дайте силку на snippet для саблайма
gist.github.com/akella/9757676
Vladislav Balabanovich Спасибо)
Vladislav Balabanovich А для WebStorm чего-то похожего нету?
Vladislav Balabanovich а как его установить ?
классный чувак, интересные вещи рассказывает, но из за заикания и тороторства не могу досмотреть, очень старался, передышки делал, но не могу, прям голова раскалывается. Лайки, репосты и т.д._)
Чорт подери - это же Воловиц!
Все, о чем он здесь говорит, уже не актуально.
а почему этот гений верстки даже не смог догадаться микрофон ближе к своему носу поднести
Ничего полезного. Стандартные инструменты и приемы которые используются во Front-end повседневно. Было бы гораздо лучше если бы он рассказал для новичков про препроцессоры (jade stylus и тд.) и сборщики проектов, такие как Gulp и Grunt.
стендапер типо...
Очень малоинформативная презенташка. К тому же,
1) Avacode избавляет от необходимости в перечисленных костылях для Фотошопа.
2) Compass не может в генерацию svg спрайтов. Зачем он нужен? Незачем. Gulp/Grunt -- в помощь.
+Alex Gubarev так то видосу уже полтора года, ну да ладно.
+Alex Gubarev :) Я как раз был первым бетатестером этого приложения и придумал часть фич, только правильно писать Avocode ;-)
Переименуй ролик в: как быстро засрать мозги
у меня hhd и он работает так быстро что быстрее просто не бывает, вообще не вижу смысла sdd в вёрстке, ибо он полезен только в играх.
сплошное блаблаблабла