22 posts tagged

вёрстка

Инитум

В основе фронтендовых проектов Кодельной лежит Ини́тум — шаблон для быстрого старта вёрстки. Без него было бы грустно и медленно.

На скриншоте — первый запуск версии 2015 года. Сейчас работает pug-шаблонизация

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

Посмотреть на Гитхабе

Расскажу прям одним абзацем буквально, чё там. Шаблоны верстаются в pug-файлах — это бывший Jade. В стилях — PostCSS с минимальным набором плагинов. Пока нам нужны только вложенность и переменные. Исходные файлы живут с расширением .pcss, чтобы можно было отличить от боевых и заставить джейтбрейнсовские программы считать его SCSS-ом. Babel, конечно же. Для ретроградов — jQuery. Работает сбрасывалка кэша для стилей и скриптов. Картинки сжимаются.

Попробуйте и приносите пул-реквесты (там как раз туннель в интернет не всегда стабильно работает). Расскажите потом, если сделаете проект на основе Инитума. Или напишите мне письмо и приходите работать.

Спасибо Кириллу Чернакову, Олегу Алешкину, Алексею Чикину, Арсению Максимову и Ване Клименко.

2016   веб   вёрстка   проект   работа   технологии

Вакансии верстальщика и бекенд-разработчика в техническом отделе Гридли (закрыты)

Начинаю собирать технический отдел в Гридли. Это первые вакансии.

Команда помогает делать проекты агентствам, студиям и крупным брендам. Там графика, дизайн и вёрстка сайтов, запуск, поддержка проектов и продвижение после запуска: посмотрите работы. Я теперь, кроме прочего, работаю техническим директором агентства. Мы открываем офис в Калининграде и приглашаем разработчиков.

Гридли раньше аутсорсило разработку партнёрам, а теперь переносит часть разработки внутрь, чтобы делать больше проектов.

Требования такие же, как и к разработчикам Кодельной. Повторюсь коротко.

Верстальщик

ХТМЛ, ЦСС (ПостЦСС), Яваскрипт (ЕС 5 и 6, редко Джейквери), Галп (Инитум), Гит, Скетч, Фотошоп.

Бекенд-разработчик

ПХП или Питон. Яваскрипт на всякий случай.

Системные требования

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

Про офис

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

Это не офисная работа с 10 до 19: можно фигачить удалённо какое-то время, уходить в 12, если дело сделано, но лучше появляться в офисе, чем не.

Мы верим, что в офисе всё работает чуть лучше, чем по скайпу с чатиком.

Собеседование

Напишите мне письмо c рассказом о себе и ссылками на проекты на почту [email protected]. После мы созвонимся по скайпу: я задам несколько технических вопросов, а арт-директор Константин Жабинский расскажет о том, что надо будет делать.

Самое важное в верстальщике

Аккуратность и внимательность.

Это полный список важных качеств. На остальное пофигу: какая разница, как круто ты фигачишь на Экмаскрипте 6, чем собираешь проект и как сильно любишь ПостЦСС, если результат выглядит как дерьмо.

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

Развить внимательность и аккуратность помогают работа с очень требовательным дизайнером и чеклисты. Попробуйте поработать с бюрошниками.

2015   веб   вёрстка   команда   люди   работа   технологии

Валидация форм

Технологи изобрели маски, проверку на количество символов, домены и ещё чёрти что. На самом деле всё намного проще. Поле с номером телефона можно пропускать, если в нём есть хоть что-то, а почту — если есть собака, точка и текст вокруг них. Это всё.

2015   веб   вёрстка   принцип   работа   совет   технологии

Ищу верстальщика и программиста

Ищу крутых разработчиков, которые помогут мне делать клиентские проекты в Кодельной. Это перманентные вакансии.

Изобретательный верстальщик

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

Набор слов: HTML, CSS, JavaScript, jQuery, Gulp, PostCSS, Stylus, SVG, Git, Sketch.

Надёжный программист

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

Набор слов: PHP, Python, JavaScript, Node.js, MySQL, Git, HTML, CSS.


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

Напишите мне письмо с рассказом о себе, ссылками на собственные и клиентские проекты, свой блог или твитер про технологии:
[email protected]

После письма я захочу созвониться по скайпу или встретиться в Москве.

Сломанное тонкое подчёркивание в Сафари: фиксед

В конце лета в Сафари сломалось подчёркивание ссылок через бледный бордер-боттом: линия в некоторых случаях размывалась в два пикселя и становилась страшной.

Я страдал, пробовал подчёркивать однопиксельным градиентом, с надеждой смотрел в черновики ЦСС, ныл в твиторе. А решение помог найти Дима Дорошев. Он написал какой-то жёсткий хак на Джейквери, но помогло не это. В фидле для примера есть ссылка с инсетом:

border-bottom-style: inset;

Выглядит как solid, но не размывается. То, что нужно!

Может показаться, что groove делает то же самое. На самом деле он ещё и затемняет линию, осторожнее с этим.

2015   браузер   веб   вёрстка   дизайн   сайт   технологии

Открыть в браузере

Вот письмо, в ПВУ ссылка «В браузере»:

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

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

2015   вёрстка   дизайн   письмо   почта   ссылки

2014

В уходящем году я очень часто менял работу.

2014 начался в рекламном агентстве «Медиапронет». Мы с Вадимом пилили проект для правительства Мособласти, редизайнили и верстали новый Новострой-М. В апреле я поехал в Оренбург (в это время мы сделали Питомник хвойных культур), а вернулся в мае в Москву уже безработным.

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

Начало июня встретил в Аппликатуре: команда делала сервис про магазины и цены «Майкономи». Сначала с Леной (наймите её, кстати, технологом к себе) фигачились в телефонную вёрстку, потом я писал гайдлайны, потом сделали админку для партнёров. Мы почти доделали веб-версию приложения, но в конце лета у инвестора кончились деньги. Это была очень крутая команда. Спасибо Мише, Андрею, Арсению, Диме, Насте и остальным ребятам за хорошо проведённое время и кучу опыта.

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

Два осенних месяца мы с Мишей и Стасисом пытались стартапить.

Заканчиваю год технологом в Неткэте. Коля начал учить меня запускать проекты и не лажать. В 2015 надо будет ускориться и не тупить.

Как жить без Адоби

В предпоследнюю неделю августа я уволился из Аппликатуры и сразу удалил Фотошоп, Иллюстратор и Индизайн. С тех пор они со мной замечены не были.

Вру, пару раз открывал в ноябре всё-таки

Жить без них оказалось сначала больно, а потом приятно :–) Сначала приходилось верстать по адским джипегам с подписями (прости, Стасис), потом я стал умный и устроил всё по-человечески.

Весь ваш декстопный Адоби мне заменили три штуки.

Во-первых, Скетч. Я несколько раз пытался надизайнить что-то в Фотошопе (один раз даже открыл Иллюстратор, но ничего не понял и закрыл), но каждый раз это заканчивалось провалом. В Скетче я нарисовал два жирных проекта и очень сильно его полюбил.

Во-вторых, Пиксельматор. Он круто работает, когда надо что-то очень быстро прогрессивно наджипежить.

Но дизайнеры с ПСД никуда не делись, а верстать как-то надо. Сначала я придумал просить Фотошоп у соседских ребят, а потом узнал, что сайт Адоби (проект Парфе) умеет показывать ПСД с размерами, шрифтами, даёт нарезать и экспортнуть. Это третья штука. Парфе работает так же ужасно, как и декстопный Фотошоп, но за неё хотя бы не надо платить каких-то неоправданно больших денег (то есть вообще никаких). Пользуйтесь на здоровье.

И в заголовке наврал. Простите меня, пожалуйста

Программа для больших скриншотов

Это Папарацци:

Делает скриншот страницы в интернете или на локалке целиком. Можно указать минимальный размер и обрезать. Для страниц с кучей яваскрипта я включаю задержку перед снимком в 5 или 10 секунд.

Пользуйтесь на здоровье.

Earlier Ctrl + ↓