Привет! Меня зовут Таня @vafelman, я верстальщик, в ближайшую неделю буду вести этот твиттер :-)

Хочу обсудить с вами курсы, стартапы, книги, ну и о себе немного расскажу.

Последние несколько месяцев я работаю в DriverPack Solution. Это продукт для Windows, устанавливает нужные драйверы (из отобранной базы).

Продукт состоит из нескольких проектов — сайты и десктопные HTA-приложения.

HTA – тот же IE с html-страницами, который можно запустить как отдельную программу.

В моей части разницы между версткой HTA и версткой сайта нет разницы. Только в HTA я фокусируюсь на верстке под IE.

Знаю, что для хрома есть Node Webkit и Electron для таких приложений. Для сафари тоже что-то есть — так сделан, например, Appstore для мака.

На Electron, например, сделан Slack и Avocode – electron.atom.io.

.@ru_rodweb Поддержка IE6+

@cssunderhood почему ie, а не chromium? есть же nw.js для этого.

.@gladkih_m HTA оказался быстрее

Расскажите, кто делал такие десктоп приложения? Что за продукт? И под какие движки?

@cssunderhood Писали софт на nw.js для будок печати фотографий из инсты аля Boft. Уровень боли которую пришлось терпеть не уместится в твитт

@cssunderhood я однажды делал приложение используя Mozilla Prism (ныне покойный). Это было ужасно. Почему я выбрал его - не знаю, не было mw

@cssunderhood Всё было бы хорошо, но нужен был в Flash-плеер из коробки в Mozilla Prism для видео- пришлось ухищряться чтобы его туда сунуть

@come_on_android @cssunderhood @cssunderhood камрад! я тем же самым занимался!

@notarseniy @cssunderhood Теперь у меня чувство как будто мы вместе воевали во Вьетнаме.

@cssunderhood online-сервис по учету money - подскажите. проскакивало здесь, но давно и не сохранил.

@cssunderhood есть ещё CEF его используют Adobe и Steam

Немного про инструменты. Один из самых популярных инструментов у меня в работе — виртуалки с разными IE.

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

@cssunderhood а средства типа SauceLabs?

.@radio_turkey не пробовала. Можно на таких сервисах запустить HTA с диска? На виртуалках я и сайт, и приложение сразу могу посмотреть

@cssunderhood по saucelabs - на сколько я знаю, там процесс строится на использовании урлов, так что с hta с диска могут быть проблемы

@cssunderhood например, вот настоящий IE8 - без всяких там виртуалок. жмяк и готово yadi.sk/d/onhHgRlYkBmUL

.@m_volkanin интересно :-) И можно будет выбрать, каким именно IE запустить HTA-апп на одном компе?

Еще из немного странных инструментов: для некоторых проектов был нужен Xcode + iOS Simulator для тестов.

Адаптивность можно проверить и в хроме, а для теста Smart App Banners (developer.apple.com/library/prerel…) открываю iOS Simulator.

Верстку писем иногда проверяла литмусом – litmus.com/email-testing.

А для сравнения верстки с дизайном у меня Uberlayer – twelvetwenty.nl/apps/uberlayer.

@cssunderhood а у вас для вёрстки ноут или десктоп. Если ноут - как верстается на таком экране?

.@kbytin десктоп 27″. Еще работала на двух 27″, но это не необходимость. На 13″ ноуте верстала в походных условиях: если ненадолго – терпимо

Ну и блокнот с ручкой у меня всегда где-то рядом :-) В заметки на смартфоне надоедает постоянно писать на встречах pic.twitter.com/Q9zIHhvr5K

@cssunderhood и правильно, что недоверяешь, у меня, например, в эмуляции ie9 флексбоксы работали(неожиданно). пришлось ставить ie tester (

@cssunderhood @kbytin тогда, простите за безстактный вопрос, какой для Вас самый идеальный размер?.. монитора

.@itshaman @kbytin да вот, пожалуй, 27 и идеальный. Не так много места занимает, как два по 21 или 27. И окон одновременно много видно

@cssunderhood @kbytin чем плоха вёрстка на 13 дюймах? Сам верстаю на 13 дюймах.

.@ardshock мне мало, если высота экрана 768. Медленнее работаю. Было когда-то и что-то среднее, но уже не вспомню, каково мне было

@kbytin У меня дома 15,4 без внешнего монитора — для большинства моих задач хватает. @cssunderhood

@cssunderhood @itshaman @kbytin а кто-нибудь уже верстал на iMac 5K который? как ощущения?

@cssunderhood Прикольно, если бы еще и на Linux такое

.@hiway_real а посмотрите тут: альтернативы Uberlayer под Linux и Windows – alternativeto.net/software/uberl…

@cssunderhood ещё есть удобный сервис putsmail. До того, как litmus его купил, можно было даже не регистрироваться. putsmail.com

@kuzvac @cssunderhood @itshaman @kbytin там сейчас вся линейка 27′ с 5К. На них больше элементов умещается. Но для глаз слишком мелко.

Привет :) Сегодня у меня наметился особенно загруженный день, поэтому хочу обсудить с вами легкую тему.

Сейчас я работаю в опен-спейсе. Была уверена, что мне будет тяжело, но оказалось, что это не так страшно. Хотя я очень даже интроверт.

Я работала и из дома, и в офисе, и в опен-спейсе, но только в какой-то компании.

Правда, так и не поняла, какое окружение мне больше нравится :) Интересно узнать про то, чего я не пробовала.

Фрилансеры, расскажите, как вы начали работать «самостоятельно»? Как-то постепенно уходили с основной работы? Чего-то боялись?

@cssunderhood Начал работать самостоятельно изначально. Потом уже ушел на основную работу в офис)

.@webholt доволен таким переключением? Такой и был план сразу?

@cssunderhood Считал (и продолжаю), что такой опыт необходим. Особенно, когда зажрался на фрилансе и смеешь выбирать, за что браться)

@cssunderhood самое сложное - найти первый заказ. Потом второй, третий. А потом — организовывать себя.

@cssunderhood Все было очень просто и вообще ничего не боялся.

@cssunderhood может замутишь опрос? :) интересно соотношение фрилансеров и тех, кто работает в компании (пусть даже удаленно)

.@li_rian о, да, я очень хочу опрос :) Узнать, кто тут у нас есть. Ребята, что вы еще хотите узнать об аудитории @cssunderhood?

@cssunderhood Люди-кони, которые ржут так, что никто работать не может.

.@sapegin все время боюсь, что мы с командой такие люди-кони и мешаем другим. Буду еще внимательнее следить за этим в офисе ↓

@cssunderhood я просто ушла. не советую делать так, а подготовиться, привести себя в конкурентноспособный вид, иначе раскиснешь совсем

@meuwka @cssunderhood А уходил так: работал на основной при этом заранее разрабатывал зоомагаз. Открылся, немного поработал, ушел с основной

@meuwka @cssunderhood При уходе на фриланс необходимо иметь минимальную финансовую подушку, в случае факапов, а они будут, не закиснуть.

@gearmobile к сожалению, секретного рецепта нет. можно собирать наработки для примеров и писать заказчикам (@cssunderhood)

@gearmobile изучить спрос, подтянуть портфолио под него, определиться с направлением, чтобы не хвататься за все подряд @cssunderhood

@sapegin @meuwka @cssunderhood Интервью с иллюстратором Александром Тяпочкиным. Там он задевает вопрос фриланса: molokotoday.com/tyapochkin-int…

@cssunderhood а подскажите примеры или туториалы - как грамотно составить свое портфолио.

Сегодня расскажу про наш стартап-акселератор. Мы работаем в акселераторе iidf.ru/startups/accel.

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

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

Им помогают люди, уже запустившие много бизнесов. Люди, которые разбираются в какой-то своей сфере.

@cssunderhood а что они от этого получают?

.@SilentImp сам акселератор получает долю в компании (но есть варианты), выступает инвестором. Консультанты, видимо, просто работают

Тут постоянно проходят мастер-классы, лекции и личные консультации. Неформальный разговор с экспертом на кухне – тоже источник знаний :)

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

Получается такой как бы очень практикоориентированный «курс» для основателей проектов.

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

По субботам стартапы и их «наставники» (трекеры) собираются и обсуждают результаты прошедшей недели, определяют фокус на следующую.

Подробнее про методологию HADI: vc.ru/p/hadi-growth.

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

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

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

Один из проектов рассказывает про такие субботние встречи, как это было год назад: witget.com/blog/kak-treks….

Мне кажется, из всего, что связано с экономикой продукта, сотрудникам проектов особенно полезно помнить о воронках продаж (sales funnel).

Воронка в контексте сайта – это такое многоступенчатое решето. Принимает на вход всех посетителей, и отдает тех, кто совершил покупку.

Покупку в общем смысле. Например, покупкой на контентном сайте будет считаться клик по рекламному баннеру.

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

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

Это довольно очевидно, но некий «mind the funnel» помогает не забывать, что у ошибок есть своя цена.

Семинар про экономику стартапа и метрики – youtube.com/watch?v=OTsTk0… (ну и вообще гуглите статьи/лекции Ильи Красинского на эту тему).

Еще из интересного для меня в акселераторе – иногда тут проводит лекции и консультации Максим Ильяхов @perepisal.

Тексты – это не сколько про складывание слов в предложения, сколько про решение проблем.

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

Коротко говоря, для хорошего текста на сайте нужно:
– изучать проблемы клиентов; →

– думать о том, как опереться на чувственный опыт читателя/пользователя (пусть он вспомнит что-то из своей жизни); →

– говорить так, как бы ты рассказывал о своем продукте друзьям в баре; →

– не пропускать в текст незначимые слова (никаких пространных цифр, фактов и определений).

Многие знают блог Ильяхова, но я повторюсь. Посты про тексты о себе: maximilyahov.ru/blog/tags/teks…. Пригодится для того же портфолио/личного сайта

@cssunderhood Калькулятор! Самое важное — калькулятор. Большой, бухгалтерский.

.@ThyBzi по-моему, лучше счёты: щёлк-щёлк и рассчитал сетку. Я и фотоаппаратом аналоговым пользуюсь ;)

@cssunderhood если и верстальщика тоже все это интересует, то где тогда место дизайнера? Где тогда пространство автора текста?

.@vovanbo хорошо, если у тебя в команде есть отдельный писатель

.@vovanbo но если ты запускаешь свой сервис, разрабатываешь пет-проект, пишешь о себе на личном сайте, то, скорее всего, будешь писать сам

@cssunderhood дизайнеру всегда тесно в стенах обязанностей, в нём постоянно умирает художник. Ежесекундно ;)

.@vovanbo я обобщать не люблю :) Думаю, что в дизайне (и разработке) творчество именно в поиске решений конкретных задач

@cssunderhood это чистое творчество, не стоит загонять его в рамки "законов" извлечения прибыли.

.@vovanbo если не хочется думать о прибыли, можно думать о пользе для клиента. Но тогда тоже будут «рамки» – рамки и законы пользы

"Художникам" нечего делать в бизнесе, за это платить никто не станет. Там, где большие зп, всегда есть рамки @vovanbo @cssunderhood

Сегодня я хочу обсудить курсы, расскажу о тех, которые проходила. А вы рассказывайте о своих. Кто что проходил? Что понравилось и нет?

Я была на базовом интенсиве по верстке от @htmlacademy_ru, но с какой-то полуразвлекательной целью. На тот момент уже давно верстала.

Было интересно, что это такое, как проходит, к чему готовят верстальщиков, чего от них ждут.

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

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

Особо радующий меня критерий качества на курсе — проверка а-ля Константин Константинопольский. Сама за него часто заворачивала на ревью.

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

И от попыток верстать «слоями» – сначала каркас из спозиционированных блоков, потом «украшательства». Для новеньких, наверное, самое то.

Как будто ты пришел работать в проект с непривычным стайл-гайдом.

@cssunderhood решила,что их базовый интенсив - неплохое начало для человека, который решил перейти в верстку из другой области. Как думаете?

.@redhead_jules мне кажется, абсолютно подходящее место для этого. И пройденные на сайте курсы вам очень сэкономят время на самом интенсиве

@cssunderhood я взял и доволен :)

На интенсиве у каждого студента есть наставник, с которым вы будете работать лично. Мне вот повезло с @sergeytovarov :) Так что советую.

@cssunderhood проходил курсы @loftschool по веб-разработке. На выходе - три достаточно сложных проекта в портфолио и опыт работы в команде.

.@kirillmadorin @loftschool круто, не слышала об этих курсах. Ссылка – loftschool.com/course/web-dev…

@cssunderhood проходил продвинутый курсы htmlacademy - доволен, стоит своих денег. До курса мог сверстать простой неадаптивный макет.

@cssunderhood причина и цель создания всех этих "школ" - срубить много капусты. Много и по быстрому. Благо - спрос есть! )

@cssunderhood всем начинающим: учитесь в ютубе абсолютно бесплатно ;)

.@gearmobile @meeecrobe для кого-то самообразование – самый отличный вариант. Но деньги приходят и уходят. И я пробую, если есть интерес

.@cssunderhood Видеокурсы – моё всё. @lynda и её конкуренты – лучший формат образования. Но чтобы их оценить, нужен свободный английский.

Буквально на прошлой неделе в @htmlacademy_ru же закончился интенсив «Базовый JavaScript» – htmlacademy.ru/js_intensive.

Это был первый, пилотный поток. Я не могла его пропустить.

На курсе понравилось, что все шло эволюционно, мы хоть и делали один проект, но сложность самих задач нарастала постепенно.

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

Речь про оффлайновый курс в центре Специалист – specialist.ru/course/oprveb-a. Не могу его всем посоветовать.

@cssunderhood Фиг знает. Мне кажется, что за эти деньги лучше к Илье Кантору learn.javascript.ru/courses

.@c01nd01r а расскажите, кстати, там какая форма? Отдельные задачи решаются или тоже целый проект на выходе?

@cssunderhood завидую) я не успел записаться, пошел на другой очень известный курс по js, но там печалька.

В проекте на интенсиве HTML Academy будет: работа с cookies и local storage, загрузка данных через xhr, подгрузка «ленты» по скроллу…

…работа с канвасом, основы ООП, прототипы, конструкторы и другие штуки.

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

Следующий js-интенсив у них начнется 10 ноября, но на него уже не попасть. А третий поток должен запуститься в январе.

@cssunderhood, многие критикуют курсы за подобную «лестницу» — в жизни так не бывает.

@cssunderhood пеар-пеар :D

.@_sashashakun да, а вчера весь день пиарила наш акселератор, завтра еще что-нибудь буду пиарить :))

@cssunderhood @htmlacademy_ru а вот @yandex_ui проводит бесплатную и очень полезную ШРИ, там тоже интересно! academy.yandex.ru/events/shri/

@cssunderhood в общем ты осталась довольна? подтянула знания?

.@meuwka нового узнала много. Я сидела и натурально копалась в видео с вебинаров. Довольна, но не стала бы повторять – я ничего не успевала

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

.@meuwka у этих интенсивов один минус – они очень уж интенсивные для меня. Мне вообще впору брать отпуска для поучиться и почитать.

@cssunderhood а, простите за вопрос, вы верстаете без знания javascript? )

.@antonplankton конечно. Не будем же мы считать знанием js навешивание классов на элементы, условия в шаблонах или jQuery-анимацию

@meeecrobe @cssunderhood с хтмл, как бы согласен, а js где? Может канал какой посоветуеш? Для совсем неведующих.

@baxazar_ @cssunderhood неплохие курсы фронтенду, в т.ч. js на codecademy.com. Только не смотрите уроки Евгения Попова 🙏

@baxazar_ @cssunderhood из русскоязычных был такой Артем Гринберг (sorax). Отличные снимал видосы. Сейчас забросил это дело, кажется

.@meeecrobe @baxazar_ видимо, вот эти видео – Основы JavaScript youtube.com/playlist?list=…. Сама ничего не могу сказать о них.

React для начинающих, видеокурс Уэса Боса: 47 $ за первые 18 видео и 59 $ за все 29 — reactforbeginners.com pic.twitter.com/pSKsGNlwsP

Мне часто приходится обращаться к аналитике сайта.

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

С аналитикой не должно возникнуть много сомнений «поддерживать ли IE8». А в идеале можно посчитать, сколько денег приносят пользователи с IE

Я не имею ввиду, что считать это должен разработчик :)

На мегаплане есть «история успеха» про аналитику и изучение аудитории – thebigplans.ru/target-audience.

Для проверки отправки событий в Google Analytics пользуюсь расширением для хрома. Показывает события в консоли – chrome.google.com/webstore/detai….

Бывает такая задача – выложить на сайт лицензионное соглашение/документ. А исходник – в .docx с абзацами, выделением текста и т.д.

Для конвертации из .docx в .html, .md и прочее использую Pandoc pandoc.org.

У них очень наглядный туториал по работе в консоли: pandoc.org/getting-starte….

@cssunderhood @SilentImp MS Word же → сохранить как html с фильтром → HTML Tidy → готово и всего 2-3 минуты делов.

.@delaz @SilentImp о, отлично, если есть Word

@cssunderhood @SilentImp А это настройки HTML Tidy под причесывание текста из Word: twitter.com/delaz/status/6…

Я сегодня отдыхаю, смотрю интересные видео. Найти полезное видео сейчас – не большая проблема, но иногда пугает его продолжительность :)

Я только недавно привыкла пользоваться ускорением на ютубе pic.twitter.com/MVUnuZKOMA

А чтобы ускорить видео на вимео, поставила расширение для хрома – chrome.google.com/webstore/detai….

@cssunderhood посоветуйте фреймворк для мобильной версии сайта.

.@SplinTop7 кому-нибудь доводилось использовать фреймворки для отдельной версии сайта?

Еще я хочу немного рассказать про книги. Я люблю читать научпоп.

Сейчас читаю «Майндсайт». Кажется, по основной мысли это похоже на концепцию осознанности. + Много нейробиологии, описаний структуры мозга.

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

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

Теперь, когда я работаю и понимаю, что меня что-то начинает бесить, до меня быстрее доходит, что нужно сходить и размяться, отдохнуть.

Для 5-минутной разминки среди рабочего дня, оказывается, очень круто подходит баланс-борд youtube.com/watch?v=yjvRXh… :)

Перед этим дочитала «Мозг: краткое руководство». В начале книга похожа на статьи с AdMe.

Но позже становится интереснее – говорят и про механизм влияния сахара на мозг, и про предупреждение старческих проблем.

Разностороннее развитие мозга сформирует когнитивный резерв и поможет лучше соображать и противостоять нарушениям типа болезни Альцгеймера.

Повреждения одного участка не будут такими критичными, потому что другие, «прокаченные» участки частично возьмут работу на себя.

Подтверждено многолетним исследованием со вскрытием черепов у респондентов и другими интересными вещами. Гуглить по «Nun study».

@cssunderhood Последние три книги, которые вы прочитали?

.@psyw «Мозг: краткое руководство», «Понедельник начинается в субботу». И, наверное, «Глаз разума» Оливера Сакса (уже не помню точно)

.@psyw читаю я вообще хаотично – если в процессе чтения попадается книга интереснее, то без сожалений откладываю первую. Не убежит :)

Я так понимаю, что особенно хорошо, если есть регулярное хобби, непохожее по активности на основную работу. Всем игры на гитаре и танцев :)

Но у меня work–life balance – слабая сторона. Я даже собираю вдохновляющие статьи о карьере и здоровье в отдельном месте – @human_in_it.

@cssunderhood если тема работы мозга интересна, рекомендую увлекательную книгу невролога Рамачандрана — «Что делает нас людьми».

@cssunderhood как выделяете время на чтение?

.@newyorrker «насильно» выделяю время :) В дороге провожу мало времени, читаю перед сном несколько раз в неделю.

@cssunderhood А посоветуйте плз какие-нить книги (только не классику типа "Войны и мир" и иже с ними) для расширения кругозора?

.@psyw вспомнилась «Вселенная внутри нас». И может вся серия – elementy.ru/bookclub/serie…. Я сама оттуда пока мало прочла

Книга «Вселенная внутри нас» очень романтичная – селит в голову мысль о том, что мы со звездами состоим из одного и того же :)

@cssunderhood какие книги на тебя больше всего повлияли? и какие ты чаще всего советовала друзьям?

.@filipovskii наверное, из сознательного возраста нет таких. Советовала, разве что, Мэг Джей «Важные годы» про возраст от 20 до 30.

.@filipovskii примерно суть книги – в этом видео с TED: ted.com/talks/meg_jay_…

Вы используете menu тег? Как toolbar? @cssunderhood

Я читаю медленно и обычно у меня нет проблемы «что бы почитать». В крайнем случае, есть пара мест с книгами.

У Людвига Быстроновского можно найти интересную книгу: ludwigbistronovsky.ru/storage/books.

Еще люблю зайти на сайт @mifbooks и полистать раздел про саморазвитие: mann-ivanov-ferber.ru/samorazvitie-b….

Следующая в очереди на прочтение – «Галлюцинации» Оливера Сакса. Жду не дождусь. О ней узнала где-то случайно.

@cssunderhood я последнее время читаю краткие изложения на getabstract. Помогает понять на что не надо тратить сил

Ок, пора сворачиваться. На этой неделе на дежурстве была Таня @vafelman.

Очень интересно было пообщаться с вами. Спасибо :) Пока. pic.twitter.com/Zyvmon4wTb