Как быстро верстать (нужен совет как быть дальше)?
Занимаюсь созданием своих сайтов и изучаю фронтенд уже несколько лет, знаю HTML5/CSS3 на приличному уровне, также уже неплохо пишу на JS. За это время успел сделать несколько страничек на заказ и сверстать минимум 5 макетов для портфолио и пройти в финал чемпионата UA Web Challenge.
Теперь пробую устроиться на работу в IT-компанию джуниором, но как показала реальность - компаниям нужны не только те, у кого есть опыт и он хорошо знает HTML/CSS, JS, компаниям в первую очередь нужны те, кто быстро верстает. При чем быстрота верстки стоит, наверное, на первом месте. У меня к сожалению с этим проблема. Я делаю долго, но качественно. Например адаптивный лэндинг могу делать 2-3 дня, а как мне сказали на собеседовании - это делается за день и меньше. Теперь думаю, может фронтенд-разработка - это не мое, больше хобби, нежели работа... и лучше мне устроиться на работу по другой специальности, ну а в свободное время подрабатывать на фрилансе, верстая простенькие странички.
Собственно нужен совет - мне пробовать дальше устраиваться на работу или бросать это дело? Ну или поделитесь опытом, как повысить свою продуктивность? Просто вряд-ли кто-то захочет взять меня на работу с такой скоростью работы.
P.S. При верстке использую Gulp, Sass, Emmet, Avocode.
Естественно, гонят. За день делается либо простой, либо повторяющийся, либо некачественный лендинг. Качество верстки заключено в десятках мелочей, и я уверен на 99%, что если мне покажут результат такой несколькочасовой работы - я найду множество косяков.
Другой вопрос, что в некоторых случаях особое качество и не нужно! Есть огромный пласт рынка, который занимается дешевым фастфудом, там действительно все нужно как можно быстрее и дешевле. Хочет ли автор работать в этой области - это решать ему.
Препроцессоры на полную мощь (попробуйте jade для html), gulp, библиотека снипетов, опыт, опыт и ещё раз опыт.
Так же важно: мощный компьютер, хорошие мониторы в достаточном количестве удобное рабочее место и позволяющая состредоточиться атмофера.
Ну и самое главное:
Позиционируйте себя, находите своего клиента.
Быстро хотят все, но есть и те кто понимает, что лучше подождать немного дольше и получить готовый, кроссбраузерный, качественный продукт. Чем кривую поделку, которую потом в 2 раза дольше править.
NotLogo:
Jade - полноценный препроцессор для HTML, шаблонизатор.
include, extend, mixins
переменные, функции и прочие прелести
Приятный минималистичный синтаксис и море возможностей писать меньше, делая больше.
Вот к примеру такой средненький проект, на 20 страниц.
Если писать простой HTML, сколько копий секции HEAD у нас будет?
20.
И тут бац! Надо добавить какой-нибудь meta(name="format-detection" content="telephone=no").
Пошел ручками по 20 файлам.
Или с автозаменой чегонибудь придумал.
(да, я знаю что есть возможность использовать инклюды с помощью того же gulp, но этого не достаточно.)
Используя jade я просто добавлю эту строчку в _head.jade
Такое меню в виде табов, встречается в этом проекте (50+ страниц) ну очень часто, в каждом разделе своё.
Я просто вызываю в нужном месте +tabbar([{title:'Ссылка1',url:'1.html'},...], 'big')
Главное меню, есть вообще на всех страницах, 1 строка:
+globalNav(getData('nav'))
Сами пункты меню лежат в отдельном файле data/nav.json
Ещё пример:
В header есть блок профиля. Либо "вход/авторизация", либо ссылка на личный кабинет, например.
Оба блока в _header.jade с условием if/else (или в отдельных файлах если header и так большой)
А на странице объявляю:
block header
- authorized = false;
Значит дляэтой странички будет показан блок неавторизованного пользователя.
Ну и т.д.
Очень много мелочей, которые упрощают жизнь. Но нужно научиться их готовить.
Кому-то - "попрёт", кому-то - нет. Мне вот поперло и теперь HTML, даже с emmet, радости не приносит ну вообще.
но как показала реальность - компаниям нужны не только те, у кого есть опыт и он хорошо знает HTML/CSS, JS, компаниям в первую очередь нужны те, кто быстро верстает. При чем быстрота верстки стоит, наверное, на первом месте. У меня к сожалению с этим проблема. Я делаю долго, но качественно.
Вас же не удивляет, что есть разные рынки авто (подешевле и получше).
Что бывает разная одежда.
Фотоаппараты.
Рестораны/кафе.
С версткой так же.
Верстка тяп-ляп дешево и быстро лишь бы работало, или быстро на готовых шаблонных решениях - это такой же обычный и распространенный ширпотреб.
Есть и другие, более требовательные, заказчики.
Если вы используете Gulp/Sass, то не думаю, что дело в вашей личной скорости. Просто Вы не в те конторы ходили.
На самом деле, я сейчас тоже задаюсь этим вопросом.
Поделюсь своими наработками:
1) Любимый редактор Sublime Text
- plugins : emmet, JQuery, Sass, less, CSS, автопрефилы. Есть ещё несколько полезных которые подставляют пути к файлам подсвечивают цвета.
В нете полно статей. Ну сам редактор это предпочтение.
2) gulp на самом деле использую как нубло, вот буду делать boilerplate для старта. На sass. Несколько хаков в HTML типа мета тегов обёртки шапки, контента и футер. JQuery с фолбеком если вдруг с CDN не пройдет. Даже в дефолтном джиес написал $(document).ready();
3) Пока не добрался до автогенерации sprite картинок но думаю это отлично сэкономит время в тех местах где нету шрифта.
4) Собираюсь уйти от препроцессоров на пост процессор, а также использование Angular/Ember.js/React для решений крупнее Landing Page :)
5) Cейчас думаю поработать также над архитектурой (как бы пафосно не звучало для вёрстки) розбивка на блоки продумать всякие проблемы и работу функционала.
6) Подобрать готовые решения, имею ввиду плагины, слайдер/карусель/работа с таблицами.
К примеру owl'Carousel/ data tables / animate.CSS / wowjs ну и тому подобные)))
7) Самый маленький пункт - сокрость/качество печати как такова :)
8) Ну и опыт :)
Как-то так, если есть советы, может упустил.
По поводу скорости вёрстки лендинга:
Вёрстка Landing Page в четыре блока то там нечего верстать, просто сетку надо. И исходники нормальный, все шрифты и элементы (лого, гайдлайн от дизайнера) грид например Susy для Sass.
А вот если присутсвуют анимации, фулскрин видео, дизайн под девайсы продуман дизайнером, стейты на поля форм, а плюс ещё и одеть на CMS то пусть не ВЫЕ своим "Г" :)
Был у меня один случай: заказчики перед тем, как услышать о цене, намекнули, мол, сайт-визитка сейчас делается тысячи за три. И что в итоге? Кинули. Теперь я сразу таких лесом посылаю.
То что хотят скорость при верстке это понятно, как вы можете этого достичь: да просто, верстайте, верстайте и оптимизируйте свой код. Кроме того используя тот же gulp, найдите оптимальный по сочетанию тасков и производительности, возможно даже сами напишите его. Одним словом делая 30-ый одностранничник, вы уже будете как минимум шустрее чем есть сейчас. Кроме того не забывайте, наработав свою базу, вы можете использовать куски кода в дальнейших работах, это же очевидно. Сохраняйте свои наработки на github.
Например адаптивный лэндинг могу делать 2-3 дня, а как мне сказали на собеседовании - это делается за день и меньше.
Боюсь себе представить качество лендинга, и качество этой верстки за 1 день.
Все у вас хорошо со скоростью, ищите адеватных работодателей и интерсных и сложных проектов.
Оставьте какие-то свои контакты, у меня есть идеальное для вас предложение по работе ;)
Вообще мне, конечно, показывали как на WP с плагином каким-то можно накликать себе лендинг за пару часов. Но так-то можно и в Muse сразу мутить и тогда верстальщик вообще не нужен.
Не падай духом! После 25 лендинга скорость сама подрастет.
И вообще, не забывай, что один ленгинг, где всего 6 блоков и 9 мелких элементов - это один срок, а другой лендинг-колбаса на 15 страниц А4 (условно), со скажем 10 блоками и 30 мелких элементов + куча всяких эффектов + какой-нибудь кастомный калькулятор - это совсем уже другой срок.
Попытайтесь найти компанию, которая делает какой-то свой сервис, можно стартап, там требования к кандидатам другие, да и работать над своим приятнее, чем по проектам скакать.
Я бы не сказал, что компания, которая делает свой сервис, лучше компании, которая "скачит" от проекта к проекту. Устроился джуном на свою первую работу. Свой сервис компания делает. Но ставить задачи абсолютно не умеют. Сначала "да делайте уже быстрее", а потом "вон видишь сколько у тебя косяков"
Тоже озадачен этой проблемой. Все хотят быстро, дёшево и качественно, а это нереально. Во всяком случае до тех пор, пока не появятся роботы, которые заменят людей разных профессий, в т.ч. верстальщиков и фронтендеров.
Я не робот и быстро не могу. Для меня "быстро" - синоним к "некачественно". Сам ещё новичок и учусь. Но уже знаю одно - не надо равняться на кого-то, нужно найти свой удобный и комфортный ритм, в котором способен конструктивно трудиться. Всё остальное - от лукавого. ;-)
Всем привет) это не ответ а скорее продолжение вопроса)
Тоже задался таким же вопросом.
Юзаю vscode с кучей снипетов и заготовками, scss, своя 12-16 сетка, файл типографики.
Дабы как то ускорить процесс верстки да и по дизайну чтоб совпало создаю файл типографики где прописываю классы и стили блоков и элементов. Однако на скорость это повлияло мало.
Адаптив дизер рисует (от болды в 3х разрешениях) и требуют пиксель перфект.
Однако находятся все таки индивиды на фрилансе которые верстают 25+ страниц со всеми адаптивами за 2-3 дня. Открываю код - все тривиально. Так как такое делается тоже непонимаю..
Подумал я и собрал еще больше заготовок ( слайдеры, офферы, хедеры разных вариаций.)
Однако быстро верстается тупо с нуля..
Пс: быстро - не качественно и вовсе не продумано
попробуйте такую вещь как объектно-ориентированный CSS
в некоторых случаях очень сильно ускоряет верстку, иногда можно верстать целые страницы вообще не залезая в цсс-файл
Делайте качественно, каким бы Ваш начальник не был, я думаю он это оценит. Скорость - это хорошо. Главное в сроки всё делать. Я думаю Вам жостких дедлайнов никто не будет ставитьна должность джуниора.
Простой
