Size: a a a

Типичный Верстальщик

2018 April 22
Типичный Верстальщик
О пользе ведения социальных сетей

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

Основная причина этого явления — продвинуть социальные сети проще, чем сайт. Поэтому всегда нужно следить за тем как выглядит ваш профиль со стороны в VK, FB, Telegram или другой соц.сети.

Осмотрите свои страницы критическим взглядом и ответьте на вопрос: «А вы бы отдали свой заказ человеку с таким профилем?». На все 100% работает правило «встречают по одёжке».

Что необходимо сделать?

• Отпишитесь от всех пабликов, которые могут понизить Ваш уровень интеллекта для людей со стороны (например, MDK);

• Не подписывайтесь на паблики, связанные с политикой или религией — ваши взгляды могут различаться и это станет причиной отказа в сотрудничестве с Вами;

• Подпишитесь на профессиональные паблики. В нашем случае это те, что связаны с вёрсткой или фронтендом;

• Почистите свой профиль от лишней и не нужной информации. Оставьте только то, что может заинтересовать заказчика. Ваша цель — не показаться быдланом с профилем 2008 года;

• Удалите неудачные, смазанные фотографии;

• Загрузите фотографии, где хорошо видно ваше лицо. По возможности сходите к профессиональному фотографу для обновления профиля;

• Оставьте ссылки на другие соц.сети, чтобы заказчик мог побольше узнать о Вас. Беспроигрышный вариант — инстаграм. Там и фотографии выложите и рассказать о себе или своей жизни что-то интересное;

• Если Вы не фанат инстаграма, тогда можно выкладывать фото на стене и добавить небольшое описание к ней. Живые истории всегда интересны. Это дополнительная возможность показать, что Вы не фейк, а настоящий человек со своими интересами;

• В профиле любого мессенджера роль играют только 2 вещи: хорошая фотография и лаконичное описание профиля. Распишите с какими-технологиями Вы знакомы или кем работаете. Этого будет достаточно.

Все советы я составила по личному опыту поиска специалистов. Попадались совершенно разные профили и по увиденному я составила данные рекомендации.

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

Это всё. Надеюсь, Вы примените что-то из этого списка и найдете еще больше заказчиков.
источник
2018 April 23
Типичный Верстальщик
Правки за дополнительную плату

Заказчикам порой не так важны правки, как может показаться на первый взгляд.

Если Вы сделаете милость и решите пойти на уступки при незначительных просьбах, например, сменить текст в заголовке, поправить кнопку в футере, поставить блок ниже и прочее, то будьте готовы к тому, что эти правки будут сыпаться постоянно. Возможно, Вы мне напишите: «Аня! Что сложного в том, чтобы поправить это, особенно, если попросили, а не приказали об этом?»

Да, действительно, это легкие задачи и Вас попросили. Однако не ждите, что всё ограничится этим. После может последовать что-то на уровне: «Хочу, чтобы при клике на эту кнопку, весь сайт загорался, мерцал! Да так, чтобы его было видно с МКС!».

Я, конечно, гиперболизирую, но нечто подобное встречалось. Самое главное, что всё это не по ТЗ.

Лучший способ остановить поток нескончаемых правок — назначить цену. Тогда то Вы и узнаете насколько всё это было принципиальным.
источник
Типичный Верстальщик
Хотела спросить «сколько nav можно использовать в документе», но гугол решил иначе.
источник
2018 April 24
Типичный Верстальщик
Про блокировку шрифтов от сайта Google Fonts

Думаю, многие уже слышали, что РКН заблокировал IP-адреса сервиса Google Fonts, на котором представлены стандартные шрифты для разработчиков.

На своих курсах я всегда говорила, что CDN использовать предпочтительнее и тому несколько причин:
1. Вероятность кэширования какого-нибудь jQuery или стандартного шрифта Open Sans крайне высока;
2. Если элемент кэширован, у пользователя он загрузится моментально;
3. Популярные сервисы, предоставляющие CDN слишком надёжны, чтобы их сайты могли упасть.

Действительно. Вообще кто-то мог раньше представить ситуацию, что Google упадёт? И только 2к18 кардинально меняет мнение обо этом…
источник
Типичный Верстальщик
Про делегирование задач от человека, который любит делать всё сам

Я редко беру дополнительные проекты, потому что мне с головой хватает работы на удалёнке и проекте «Типичный Верстальщик».
Однако если это случается, то на это, скорее всего, повлияла одна из трёх причин:
1. Мне нравится макет сайта;
2. Мне нравится идея проекта, который предстоит делать с нуля под ключ;
3. Это мои знакомые или бывшие заказчики, с которыми приятно сотрудничать.

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

Буквально несколько дней назад я искала исполнителя на доработку проекта и этот экспириенс прошёл успешно. Всё было сделано качественно и в срок, как обещано.

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

Поэтому я не исключаю того, что на канале переодически будут появляться «вакансии» по поиску специалистов на маленькие и большие задачи. А на сегодня пока всё.
источник
2018 April 25
Типичный Верстальщик
Про редизайн сайта РЖД

Буквально месяц назад я выкатывала скриншот с сайта РЖД и уже сегодня у нас снова есть повод поговорить о нем. Спустя много лет сайт обновил дизайн и пока находится на стадии тестирования.

С первого взгляда создается впечатление, что ты попал на сайт авиаперевозчика. Дизайн во многих аспектах напоминает дизайн сайта Ural Airlines (https://www.uralairlines.ru/).

Также хотела посетовать на не способность сайта определять мою геолокацию, потому что текст на английском языке, но думаю, сделано это всё-таки из-за предстоящего Чемпионата Мира по футболу 2018.

Посмотреть сайт можно тут — https://ticket.rzd.ru/

И последнее.
Я, конечно, ни на что не намекаю, но на какие мониторы рассчитан сайт: на квадратные или квадратные?
источник
2018 April 26
Типичный Верстальщик
Разработка игры на React + SVG

Случайно наткнулась на интересный гайд по разработке игры на React с использованием SVG. Хочу оставить это для себя, чтобы не потерять. Надеюсь, Вам это тоже будет интересно.

Есть две версии. Статья на английском:
Part 1 —  https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-1/
Part 2 — https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-2/
Part 3 — https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-3/

И перевод на русский:
Часть 1 — https://habr.com/post/350274/
Часть 2 — https://habr.com/post/350278/
Часть 3 — https://habr.com/post/350946/

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

#react
источник
2018 April 27
Типичный Верстальщик
Сегодня ночью буду бугуртить в сторис из-за проектов, которые надо доделать, поэтому если не лень, подпишись, смотри, ну или не смотри, дело твоё — https://www.instagram.com/annablok.frontend/
источник
2018 April 30
Типичный Верстальщик
Книга «PHP7 для начинающих с пошаговыми инструкциями» — Майк МакГрат (ru,  2018)

Посвященная самому популярному на сегодняшний день языку программирования, эта книга помогает освоить азы РНР7 даже тем новичкам, которые не знакомы с этим языком, а также с программированием вообще. Благодаря традиционно доступному изложению, присущему всем книгам серии «Программирование для начинающих», обилию иллюстраций и примеров, а также множеству полезных советов, эта книга – лучшее пособие для начинающих программистов.

И да, верстальщикам тоже не помешает немного узнать о PHP :)

Скачать — https://goo.gl/cDB3nS

#php
источник
2018 May 01
Типичный Верстальщик
1 мая - день труда, а мы отдыхаем. Вроде бы всё логично, но что-то здесь не так...
источник
Типичный Верстальщик
Сайт-портфолио для верстальщика

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

а) Мои вкусы могут отличаться от ваших. Это субъективное «красиво» для каждого означает разное. Допустим, мне могут нравится сайты с тёмным бэкграундом, а вы бы хотели для себя светлый с няшным розовым;

б) В бесплатном доступе практически невозможно найти макеты, отвечающие всем трендам веб-дизайна текущего года. Вероятнее всего, вы найдете что-то в стиле 2014-го года.

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

Источником вдохновения для дизайна могут послужить сайты, которые продают шаблоны. Обычно, я начинаю свой поиск с https://themeforest.net/, потому что этот портал поистине огромен. Но если этого мало, то захожу еще и на https://www.templatemonster.com/

Иногда использую https://ru.pinterest.com/, работает лучше гугла в этом направлении.

Помните, Вы НИКОГДА не найдете шаблон, который полностью бы удовлетворял Ваши запросам. Если бы это так работало, веб-дизайнеры были не нужны. Это всего лишь шаблоны и ориентированы они под типичные задачи.

Сайт-портфолио — это нечто творческое. Это рассказ о Вас и он может быть любым. Дизайн тоже может быть скорректирован под Ваши вкусы.

Разбавьте будущий сайт интересными или забавными фактами о Вас. Может Вы в тайне поклоняетесь мастеру Джедаев Йоде? Напишите об этом! Почему нет?

В этом плане, мне безумно нравится сайт http://www.adhamdannaway.com/ (пример взят отсюда из раздела «рандомные факты»)

Если вы не знаете какую цветовую гамму подобрать для сайта, то рекомендую 2 сервиса:
https://colorscheme.ru/ (позволяет подобрать и сгенерировать любую цветовую схему)
palettable.io (инструмент для подбора цвета, основан на принципе «Нравится — Не нравится»)

Если этого мало и Вы бы хотели чтобы Ваш сайт-портфолио или макет покритиковали и дали дельные советы, то можете писать мне @annblok, постараюсь помочь.
источник
2018 May 04
Типичный Верстальщик
Замена жесткого диска на SSD Samsung Evo 860

Возможно, кому-то покажется что эта тема мало относится к вёрстке сайтов, но это не так.

Во-первых, все мы работаем на технике, которая со временем имеет свойство тормозить, особенно если у Вас стоит жесткий диск.
Во-вторых, сложно отделить тему сайтов и техники как таковой, поэтому на моем канале можно увидеть обзоры и на девайсы.

Записала этот ролик для тех, кто не готов расставаться со своим ноутбуком и хотел бы оживить его, особенно если характеристики девайса более чем чудесные.
Замена HDD на SSD будет верным решением. Всё делается за считанные секунды. Если бы знала об этом раньше, возможно, не стала бы покупать Macbook Air в своё время. Но это уже совсем другая история…

Смотреть — https://youtu.be/VlQbK9UI_iY
Читать — http://tpverstak.ru/hdd-ssd-samsung-evo-860/
источник
Типичный Верстальщик
А теперь к действительно важным новостям

Всем причастных поздравляю! Снова что-то новое коснулось фронтенда.

Вчера вышла 6-я версия Angular — https://github.com/angular/angular/blob/master/CHANGELOG.md
источник
2018 May 07
Типичный Верстальщик
Какая зарплата у начинающего верстальщика?

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

Ни для кого не секрет, что ЗП (заработная плата) зависит от региона, в котором Вы находитесь. Бесспорный лидер в этом плане — Москва. Средний показатель — от 50 000 в месяц.

Все вакансии по запросу «Верстальщик» в Москве можно посмотреть тут — https://hh.ru/search/vacancy?text=%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA&clusters=true&enable_snippets=true&area=1&from=cluster_area

Но не все хотят и могут перебрать в столицу поэтому смотрим дальше.

Санкт-Петербург. В среднем от 40 000 в месяц, но есть не мало вакансий и с более высокими ЗП. Но и знать Вам потребуется больше, чтобы столько получать.

Все вакансии по запросу «Верстальщик» в Санкт-Петербурге можно посмотреть тут — https://hh.ru/search/vacancy?text=%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA&clusters=true&enable_snippets=true&area=2&from=cluster_area

Екатеринбург. Это город, в котором я живу. В 2015 году на момент стажировки (первые 2 месяца) получала 20 000 руб., после — 25 000 руб. Сейчас этот показатель в среднем от 30 000 в месяц. Вакансий по городу не так много, если смотреть по сайту hh, но есть региональные, в которых любят размещаться работодатели из-за более лояльных условий.

Все вакансии по запросу «Верстальщик» в Екатеринбург можно посмотреть тут — https://ekaterinburg.hh.ru/search/vacancy?text=%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA&clusters=true&enable_snippets=true&area=1261&from=cluster_area

В целом в остальных городах, которые считаются областными центрами ситуация схожа с Екатеринбургом. Почти везде заработная плата верстальщиков начинается от +- 30 000 руб. в месяц. Искать вакансии советую не только на известном hh, но и региональных. К тому же выделить свое резюме лучше всего получится именно там.
источник
2018 May 08
Типичный Верстальщик
Что должен уметь фронтенд-разработчик по меркам США?

Пока в России потенциальные работодатели не видят разницы между верстаком и фронтенд-разработчиком, американцы ушли далеко вперед и под ФРОНТЕНДОМ понимают целый ряд навыков: от умения проектировать UI интерфейсы до владения JS фреймворками.

Интересно, много таких специалистов?

Если нужны пруфы, то Вам сюда — https://www.monster.de/en/search/?q=frontend&where=&intcid=swoop_EN_HeroSearch_us&cy=us&rad=20
источник
2018 May 13
Типичный Верстальщик
Давно я стикерами не делалась. Ловите скрепочку Windows.
источник
Типичный Верстальщик
источник
2018 May 15
Типичный Верстальщик
Про ревью Вашего сайта

Каждому новичку важно, чтобы его сайт оценили и указали на ошибки, если таковые имеются.

Именно поэтому я запускаю тег #обзор, которым Вы можете воспользоваться в чате, чтобы Ваш сайт оценили другие верстальщики. И не обязательно это буду я. В нашем чате не мало опытных мастеров своего дела. 👨‍💻

Ваше сообщение должно выглядеть примерно так:
#обзор плиз, оцените мою верстку на сайте www.exaple.com и если не трудно подскажите как исправить первый блок.

Наш чат: https://t.me/tpverstakchat

Го помогать друг другу. Вместе мы сила! 💪
источник
2018 May 17
Типичный Верстальщик
Ловите ультрагодный сайт для интерактивного изучения git команд.

Ссылка — https://try.github.io/levels/1/challenges/1
источник
2018 May 19
Типичный Верстальщик
Про веб-дизайн

Не устану повторять, что верстальщик должен не только отлично верстать, но и уметь создавать макеты для себя.
Рано или поздно Вы придете к тому, что за сайты «под ключ» платят больше. Значительно больше.
Так Вы сможете взять один заказ как минимум на месяц и забыть о поиске очередного клиента.

Достаточно часто заказчики хотят сайт с нуля. Как правило, это включает в себя следующий этапы:

1) Веб-дизайн;

2) Вёрстка;

3) Натяжка вёрстки на CMS (чтобы у заказчика была возможность управлять им).

Если со вторым и третьим пунктом можно справиться на техническом уровне, то с веб-дизайном дела обстоят иначе. Вам потребуется научиться простым основам типографики, теории цветовой гармонии и подбору иконок.

Чтобы научиться этому, Вы можете начать читать книги, изучать статьи или смотреть на макеты веб-дизайнеров, с которыми Вам приходилось работать или ещё придётся. Старайтесь работать только с теми, чьи макеты Вам нравятся на визуальном уровне. Макеты хороших веб-дизайнеров — это лучшие учителя. Верстая их, Вы в живую прикоснётесь ко всему, что можно изучить в теории по книгам.

Если решитесь на отрисовку простого лендинга (а начинать лучше с него), то помните о простых истинах, которые я почерпнула из хороших макетов:

1) Используйте 2-3-4 размера шрифта. Например, важный заголовок h1 — 50px, заголовок уровня h2, который будет дублироваться в каждом блоке — 30px, заголовок уровня h3 — 25px, простой текст — 18px;

2) Используйте одно (максимум два) шрифтовое семейство. Например, Open Sans — основной и Marck Script — для отдельных элементов. Если нет нужды во втором семействе шрифта, то лучше откажитесь от него;

3) Используйте 1-2-3 оттенка. Например, черный — основной (для шрифтов), синий — акцентный (для ссылок и элементов, которыми будет управлять пользователь), серый — добавочный (для фонов блока);

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

Читать — http://tilda.education/design-mistakes

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

К сожалению, я до сих пор не могу утверждать, что я хороший веб-дизайнер (наверно, у всех так, кто занимается творческой деятельностью), но я учусь и постоянно совершенствуюсь. Самое прекрасное время — утро. Именно утром, взглянув на свой макет Вы увидите все свои ошибки. Поэтому не старайтесь сразу скидывать своё творение заказчику. Лучше дождитесь утра, чтобы на свежую голову еще раз всё обдумать и поправить все недостатки.
источник