Трудоустройство на удаленную работу: документы, заявления и трудовой договор

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

Смотреть — https://youtu.be/gvTnJh5-D8I

Образцы заявлений и трудового договора — https://www.dropbox.com/sh/857k13viucnwt8x/AAD1_JFnAfQP-lNbjUbe5Xj_a?dl=0

Книг нет. Зато есть онлайн-документация по TypeScript

Ловите, пожалуй, одну из самых понятных документаций по TypeScript.

Ссылка — https://basarat.gitbooks.io/typescript/content/docs/getting-started.html

#typescript

Если Codepen, не всегда может помочь, то юзайте сервис Repl.itRepl.it

Как известно, Codepen используют для того, чтобы отобразить HTML, CSS, JavaScript и другие производные синтаксисы этих групп. Но что делать, если нужно показать код Питона или Руби?

Хоть это и не настолько актуально во фронтенд-среде, но ты можешь воспользоваться сайтом Repl.it, чтобы набросать код на языке Scheme, Lua, Python, Ruby, Quick Basic, Forth или JavaScript для общего просмотра. А также экзотические, такие как Brainfuck, CoffeeScript, Kaffeine, Move, Bloop, LOLCODE, Unlambda и Emoticon.

Ссылка — https://repl.it/

Кто уже пробовал создавать репу на GitLab?

В последнее время часто слышу хвалебные речи о GitLab, но поводов потестить не было. Сегодня создала там проект, поизучала интерфейс и самое крутое, что там есть — это онлайн IDE 😍

Признаватесь, сидите там уже? Как Вам?

Новый короткий адрес канала Anna Blok Note

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

Ссылка — https://t.me/annabloknote

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

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

Установка APACHE, PHP и mySQL на MacOS

Пришлось на целый день переквалифицироваться из типичного верстальщика в типичного бэкендера.

Вчера я познакомилась с GitLab (о нём рассказывала вчера). С этим сервисом проблем не было. По ощущениям — это модифицированный GitHub в положительными моментами.

Также, пришлось познакомиться с тем, как развернуть сервер у себя локально. Обычно мне хватало своих хостингов, чтобы отслеживать работу PHP с mySQL, но случай был особенный и проект хотелось видеть локально, через репозиторий.

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

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

Как оказалось, этот метод идеален для Windows, но ни как не для MacOS.

После мне порекомендовали другую ссылочку, но большинство команд для Terminal'a отрабатывало с ошибкой NOT FOUND (это нужно добавить для истории, бро).

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

Ссылка — https://youtu.be/4QtbV5D_X3k

Я, конечно, могла бросить все это дело на полпути, но я решила добраться до истины и выяснить как же все-таки  устаналивается сервер на компьютер. Поэтому учти - если ты маковод, то вот тебе 100% вариант.

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

Версии FontAwesome в одном посте

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

ver 4.7 — https://fontawesome.com/v4.7.0/icons/
ver 5.2 — https://fontawesome.com/icons

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

Кажется мы стали забывать, что не только learn javascript'ом мы едины

Если вам нужна база по JS, с простыми упражнениями, то кроме https://learn.javascript.ru/ есть еще и W3schools.

Ссылка — https://www.w3schools.com/js/

Само собой сайт на английском, но код JS вы тоже пишите на инглише, поэтому проблем в понимании теории быть не должно. Тем более, что предложения преимущественно построены на Present Simple.

Мне иногда кажется, что еще пару-тройку лет начинающие веб-разработчики будут считатать Bootstrap 4 НЕСТАБИЛЬНОЙ

Возможно, всё дело в том, что они смотрят видеоролики на ютубе 2-х годичной давности, где оратор говорит АТАТА! НЕ ИСПОЛЬЗУЙТЕ ЕЁ ПРОСТО ТАК! или же сами работают с заказчиками, которые готовы тестировать сайты вплоть до версии IE 6.

Если Вы всё же по каким-то причинам сомневаетесь, использовать Bootstrap 4 или нет, то посмотрите на поддержку свойства flex — https://caniuse.com/#search=flex
Потом посмотрите на свой сайт.
А потом снова на Can I Use.
Еще раз на свой сайт.
И обратно.

Чувствуйте как блоки вашего сайта стоят на месте? Если да, то хватит поддаваться панике 2-х годичной давности. Это уже не актуально. Выдохните.

Trello и работа с другими разработчиками

Бэкенд-разработчик поделился крутой методикой взаимодействия, чтобы никто не страдал.
Он создал доску в Trello для моего проекта и все задачи, которые необходимо было сделать он отметил в столбике To Do отдельными карточками.

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

Думаю, круто придумано. Не потребуется засорять чат сообщениями:
АААА ТУТ НЕ РАБОТАЕТ!!!!
(скрин)
АААА ПОЧЕМУ ВСЕ СЛОМАЛОСЬ?!
(скрин)
(скрин)
(скрин)

Теперь можно просто написать: я посмотрела сайт, глянь в трелло.
Заебись же, ну!

Ссылка на сервис — https://trello.com/

Шпаргалка по Flexbox CSS

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

Смотреть — https://tpverstak.ru/flex-cheatsheet/

Страница пока не адаптирована. Думаю, верстать и подглядывать в шпору не с мобилки же будете, верно?

Вопрос. Стоит ли добавить описание на русском для каждого свойства? Цель сделать шпаргалку, в которую будет не больно смотреть людям без знания инглиша.

Кстати все заметили новое свойство во флексах space-evenly?

С ним элементы распределяются так, что расстояние между любыми двумя элементами (и пространство до краев) было равным. Знали о нем?

Это хоть и не дизайнерский канал, но о Sketch знать нужно

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

Читать — http://sketchapp.me/polnoe-rukovodstvo-po-nachalu-raboty-v-sketch-s-besplatnoj-shpargalkoj/

Рекомендую. Тем более, что там реально изучать то особо не чего.

Обновления в шпаргалке Flexbox CSS

Доработала шпаргалку. Теперь есть:
— адаптив;
— описания свойств на двух языках: русском и английском;
— возможность копировать свойство, выделенное красным по клику на иконку копирования.

Надеюсь, что шпорой станет удобно пользоваться 😊

Ссылка — https://tpverstak.ru/flex-cheatsheet/

Если Вы заметили ошибку в тексте или в стилях, пишите мне @annblok

Копирование текста по клику на кнопку

Если кому-то интересно, как я реализовала копирование текста по клику на кнопку на сайте шпаргалки, то ловите легковесный скрипт.

Смотреть — https://clipboardjs.com/

Сайт-визитка для своих ссылок на соц.сети без хостинга

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

Типичный Верстальщик не исключение. Этот проект разросся и имеет множество аккаунтов в соц.сетях. Все сгруппировать помогает сервис TapLink.

Он делает удобный одностраничным без лишних дизайнов. Там будет:
— ваша аватарка;
— ссылки на соц сети в виде кнопок на всю ширину экрана

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

Ссылка на сервис — https://taplink.ru/

Ссылка на страницу tpverstak, созданную через этот сервис — http://taplink.cc/tpverstak

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

Монтаж видео о БЭМ затянулся

Уже на неделю затнулся монтаж видеоролика о БЭМ. Общее время дорожки после нарезки составило 30 минут. Сама в шоке, но думаю оно того стоит.

Делать из него сериал и выпускать по одному видео раз в неделю не планирую. Думаю сразу выкатить его одним видороликом. Поддерживаете?

Генератор отмазок, когда горят сроки

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

Ссылка — http://copout.me/

Вёрстка сайта по методологии БЭМ

Долгожданное видео о том, как верстать, используя методологию БЭМ. Если будут вопросы по данной тематике — пишите в комментарии. Обязательно ставьте лайк и подписывайся на канал, если еще не сделал этого. Ну Вы поняли... го смотреть!

Смотреть — https://youtu.be/Nb4Nw34eZxQ

Популярные названия классов HTML/CSS

В видео о БЭМ и показала новую страничку на сайте Типичного Верстальщика, которая поможет в придумывании классов. Особенно это актуально новичкам.

Смотреть — https://tpverstak.ru/common-css-class-names/

Если я что-то забыла добавить, пишите мне — @annblok. Дополним список вместе. Сделаем сервис максимально полезнам 👍