Code&Travel

​Как верстать быстрее?

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

Установите плагины для быстрого набора HTML-тегов и CSS-стилей. Посмотрите на Emmet (комбинации здесь), если используете Sublime text. Либо включите набор кода через короткую комбинацию символов в Webstorm или Atom.

Обучитесь методу слепой печати. Я так делаю с 15 лет. Применяла «Соло на клавиатуре» (для Windows и онлайн) для русского и английского языка. Сначала нудно, ещё сложнее вспоминать расположение пальцев на практике, но уже через полгода производительность кардинально растёт. Мне эта программа спасла не одну ночь в универе, когда 100 страниц магистерского диплома я набрала за 1 день. В то время, как у других на это уходило по 2-3 недели.

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

При верстки сначала концентрируйтесь на разметке страницы, затем - на расположении блоков (что слева, что справа, а какие элементы стоят в один ряд), а потом подгоняйте под Pixel Perfect plugin. Я всегда накладываю оригинал на страницу, подгоняю актуальные стили в браузере, а затем копирую получившиеся CSS-свойства и вставляю их в файл.

Применяйте сборщики проекта, чтобы вам не пришлось копировать изменённые ссылки по 10 раз. Выносите повторяющийся функционал в отдельный файл и переиспользуйте их. В этом вам помогут gulp и Webpack. Используйте переменные не только в JS, но и в CSS с помощью LESS и SASS.

Чем быстрее вы делаете задачи, тем выше ваша стоимость на рынке. Особенно актуально при работе на фрилансе, где ваша часовая ставка зависит от объема работ, который вы делаете в единицу времени. Применяйте вышеуказанные инструменты, и у вас всегда будут свободные вечера.

Кстати, это был вопрос от подписчика. Задать свой можно мне лично или анонимно. Не бойтись спросить то, что интересно услышать!

www.tgoop.com/code_and_travel/179

2.11K viewsOct 16, 2019 at 05:20

​Как верстать быстрее?

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

Установите плагины для быстрого набора HTML-тегов и CSS-стилей. Посмотрите на Emmet (комбинации здесь), если используете Sublime text. Либо включите набор кода через короткую комбинацию символов в Webstorm или Atom.

Обучитесь методу слепой печати. Я так делаю с 15 лет. Применяла «Соло на клавиатуре» (для Windows и онлайн) для русского и английского языка. Сначала нудно, ещё сложнее вспоминать расположение пальцев на практике, но уже через полгода производительность кардинально растёт. Мне эта программа спасла не одну ночь в универе, когда 100 страниц магистерского диплома я набрала за 1 день. В то время, как у других на это уходило по 2-3 недели.

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

При верстки сначала концентрируйтесь на разметке страницы, затем - на расположении блоков (что слева, что справа, а какие элементы стоят в один ряд), а потом подгоняйте под Pixel Perfect plugin. Я всегда накладываю оригинал на страницу, подгоняю актуальные стили в браузере, а затем копирую получившиеся CSS-свойства и вставляю их в файл.

Применяйте сборщики проекта, чтобы вам не пришлось копировать изменённые ссылки по 10 раз. Выносите повторяющийся функционал в отдельный файл и переиспользуйте их. В этом вам помогут gulp и Webpack. Используйте переменные не только в JS, но и в CSS с помощью LESS и SASS.

Чем быстрее вы делаете задачи, тем выше ваша стоимость на рынке. Особенно актуально при работе на фрилансе, где ваша часовая ставка зависит от объема работ, который вы делаете в единицу времени. Применяйте вышеуказанные инструменты, и у вас всегда будут свободные вечера.

Кстати, это был вопрос от подписчика. Задать свой можно мне лично или анонимно. Не бойтись спросить то, что интересно услышать!

BY Code&Travel