23 заметки с тегом

веб

Вакансия фронтендера в Кодельной

В Кодельную нужен ещё один фронтендер для сдельной работы над клиентскими проектами (а со знанием React — для развития внутреннего продукта).

Набор слов

HTML, SCSS, JavaScript, Gulp (Initium), Sketch, Git.

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

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

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

Напишите письмо c рассказом о себе и ссылками на проекты на почту inbox@codecode.ru. После мы созвонимся по скайпу: обсудим какие-то вещи подробнее, и если всё будет хорошо — сразу расскажем про первую задачу.

Что касается аутлайна

Предостерегаю от ошибки тех, кто использует Инитум в своих проектах.

У некоторых ХТМЛ-элементов есть аутлайн: такая уродская голубая подсветка (или как там ваш браузер это показывает) вокруг поля. Я убеждён, что в настоящих сайтах для людей её использовать нельзя и она существует только как напоминание — «эй, не забудь полям состояния сделать». К сожалению, многие думают, что это что-то готовое и нормальное — ну и выпускают сайты.

input, textarea, button {
  outline: none;
}

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

Так вот. Ребята! Посмотрите, что происходит у вас на фокусе и не забудьте застилить свою замену аутлайну. Запишите в чеклист куда-то себе, бумажечку на монитор приклейте. За своими-то я услежу, а у вас может случайно выпуститься сайт с косячной доступностью (придёт Вадим Макеев и наругает).

Не болейте.


Добавлено 6 июля 2017. Вадим рассказал об аутлайне в «Шортах»

Инитум

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

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

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

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

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

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

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

Как показывать скриншоты и макеты

Илья пишет:

Я больше всего люблю Дроплер и пользуюсь только им. Ещё хорошо себя ведёт Кибако. В крайнем случае можно Гязу — она хоть и с рекламой, но картинку даёт увидеть.

Пипец, как можно было обойти вниманием Моноснеп?

Короче, щас научу вас. Проблема Дроплера и остальных — интерфейс, он зачем-то есть. Там можно дать ссылку на какую-то страницу, куда вставлена картинка. От этого все страдания. А надо показывать только картинку:

http://share.straykov.ru/20170221021005.jpg

Моноснепу нужен доступ к серверу:

Картинки не потеряются и не затрутся со временем. Ребята увидят нормальный адрес, а не какую-то чубакку. Имя файла тоже настраивается: у меня это полная дата и время до секунды.

На здоровье.

Вакансия: технический директор Кодельной (закрыта)

Год назад я открыл Кодельную — аутсорсную команду разработки. Первые полгода выпали, в основном, на проекты со сложным бекендом, в это время с нами по очереди работали трое сильных техдиректоров, во втором полугодии мы сконцентрировались на фронтенде и вордпрессе — разработкой руководил я.

Сейчас мне хочется уделить больше внимания своим проектам и работе над принципами и системой работы команды. Для этого нужно отойти от ручного управления. Я ищу нового технического руководителя.

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

Основная задача — не пропускать говна. Техрук — это фильтр, после которого лажа не попадёт ни к клиенту на презентации, ни, тем более, в продакшен.

Нужно организовывать техническую сторону работы десяти разработчиков (фронтендеров, питонистов, вордпресс-пхпшников), ревьють код, помогать стажёрам, работать с менеджерами и дизайнерами. За план проекта и сделанность у нас отвечает отдельный менеджер проектов. Одновременно мы делаем три-четыре проекта, в том числе флагманский — Тинькофф-журнал.

Технический руководитель — наполовину админ. Управляет гитлабом, настраивает деплой на демосайты, админит сервер.

В день на эту работу уходит 2-3 часа. У вас может быть по-другому.

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

Напишите мне письмо на ilya@straykov.ru с рассказом о себе и об опыте работы. Дальше мы созвонимся втроём с директором Кодельной Алексеем Проворовым и обсудим условия работы.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

Напишите мне письмо с рассказом о себе, ссылками на собственные и клиентские проекты, свой блог или твитер про технологии:
ilya@straykov.ru

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

Подключение к вайфаю в метро

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

Вот у меня дома есть вайфай: ноутбук и телефон про него помнят. Захожу в квартиру — подключаются. Красота.

И есть вайфай в метро. Я к нему каждый раз подключаюсь через страшный экран в браузере. Ладно бы он сам открывался ещё, но нужно вручную пингануть какую-нибудь страницу. Почему телефон не запоминает сеть? Почему нельзя подключить меня в фоне, а рекламу и сайт «В метро» показывать, когда пойду в браузер?

Это злой умысел или сеть косорукие ребята настраивали?

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

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

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

border-bottom-style: inset;

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

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

Ctrl + ↓ Ранее