47 Постов

В Интернете, контент — это король. Он весь держится на контенте, то есть содержании.

Как мы недавно обсудили, HTML определяет структуру этого контента.

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

Тем не менее, это было бы большой ошибкой.

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

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

В этом разница между домом и простым укрытием от улицы.

И когда дело доходит до сайтов, одной структуры просто недостаточно.

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

Цвет, позиционирование и размер, среди прочих вещей, являются частью этого.

CSS — технология, предоставляющая эту возможность.

CSS является невероятно мощной технологией, она может изменить HTML-структуру до неузнаваемости.

Чтобы увидеть то о чем я говорю, можете посетить сайт CSS Zen Garden, он довольно-таки удивит вас.

CSS Zen Garden

Идея этого сайта проста.

Дизайнеры и веб-разработчики со всего мира могут представить свой проект. Они могут переделать дизайн этого сайта.

Но есть одна уловка. Они не могут менять HTML.

Так что единственное, что они меняют, это CSS.

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

Я покажу несколько скриншотов.

Везде меняется только лишь CSS. Неплохо, да?

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

Вкратце

Суть этого поста в том, что CSS является невероятно мощной технологией. Она не только стилизует контент, но и влияет на опыт взаимодействия пользователя.

Как модно говорить, «юзер-экспириенс» имеет значение.

В основе HTML находятся HTML-теги. Так что, довольно важно понимать из чего HTML-тег состоит и как правильно его составлять.

Обычно HTML-теги имеют открывающий и закрывающий тег, которые окружают какой-то контент.


<p>Контент</p>

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

Технически говоря, p сам по себе называется элементом, а вместе со скобками он называется тегом.

Но чаще всего, когда кто-то говорит об элементе p или о теге p, они могут иметь в виду одно и то же.

Большинство тегов имеют закрывающий тег соответствующий открывающему, но не все.

К примеру, теги <br> и <hr> имеют только открывающий тег.

Тег <br> служит для переноса строки, а <hr> означает горизонтальную линию.

Каждый HTML-тег имеет определенные атрибуты.


<p id="myId">Контент</p>

В этом примере мы назначаем myID в качестве значения атрибута id.

Каждый атрибут имеет свои правила для значения.

К примеру, значение атрибута id должно быть уникально в пределах страницы.

То есть, ни один другой элемент на странице не должен иметь значение атрибута id равное myId.

Если будет еще один элемент с таким id, ваш HTML не будет валидным и потенциально это может вести к ошибкам.

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

Итак:

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

2. Читайте на английском. Читайте материалы в Интернете на интересные вам темы, для начала можно переводить непонятные слова или части в Google Translate, далее вы будете уменьшать количество перевода и будете читать все свободнее.

3. Общайтесь с иностранцами и носителями языка. Вы можете зарегистрироваться, скажем, на форуме любителей оригами или в другом онлайн-сообществе интересной вам тематики. К тому же, возможно вы найдете там друзей и даже будете иметь с ними какие-то серьезные дела.

Для начала, опять же, будете использовать Google Translate, но все больше переходить на свободное общение, пока необходимость переводчика не отпадет.

4. Смотрите видео. Вы же и так часто смотрите видео на YouTube, смотрите какие-то сериалы и прочее, правда? Так что, неплохо было бы смотреть некоторые эпизоды в оригинале или смотреть англоязычные видео по интересным вам темам.

5. Общайтесь голосом. Последний пункт — это общение голосом или общение в реальной жизни. К примеру, вы можете общаться со своими друзьями из других стран по скайпу, либо вы можете найти кого-то в вашем городе.

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

Кроме того, я дам вам бонусный пункт:

6. Съездите заграницу. Довольно мощный совет, можно выполнять после первых пяти.

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

Это единственный затратный совет из всех приведенных. Правда, он может быть гораздо менее затратным если вас приглашают в целевую страну на работу.

Давайте вкратце поговорим об истории HTML.

Обычно история какой-то технологии не является особо захватывающей, и я бы не сказал, что история HTML это исключение.

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

История HTML

До 1997 не было стандартов сообщества, так что в основном браузеры делали что хотели. Они изобретали новые теги, реализовывали некоторые вещи по-разному. Это был в каком-то роде Дикий Запад для Сети.

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

Около 1997 года появился консорциум W3C, предложив стандарты, на которые действительно начали обращать внимание разработчики браузеров. Это был стандарт HTML4, который быстро обновили до HTML 4.01.

Этот стандарт все еще был довольно слабым и у браузеров все еще оставалось довольно много свободы в реализации того как отображаются страницы.

Затем, около 2000 года, W3C сделали еще одну спецификацию под названием XHTML 1.0, она была основана на XML.

XML очень жесткий, но очень четкий язык разметки.

W3C хотели продолжить работу и издать XHTML 2.0.

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

Так что, в 2004 разработчики браузеров объединились и создали другую группу под названием WHATWG.

Эта группа значительно менее демократична по сравнению с W3C. Они имеют один центр и одного редактора, принимающего финальные решения.

Некоторое время эти организации не особо пересекались.

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

Это то что произошло в 2007-2009 годах.

Так что, WHATWG и W3C начали в какой-то мере сотрудничать.

Тогда они представили то что мы имеем сейчас, HTML5.

Что это означает для вас

Что имеет значение, так это то, что есть две организации, которые в какой-то степени отвечают за HTML.

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

W3C отвечает за стандарты, это то чем они занимаются. А WHATWG даже не дают версии своим HTML-стандартам, они просто называют это HTML который постоянно развивается.

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

И эти ребята действительно делают браузеры.

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

Так как следить за всем этим?

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

Спецификация HTML5

Я переводил некоторые спецификации на русский.

Кроме того, еще одним интересным сайтом является caniuse.com.

Это сайт, который сам отслеживает стандарты HTML5, SVG, CSS, JavaScript API и так далее, чтобы сказать вам какие браузеры их поддерживают.

К примеру, если вы введете srcset, то получите таблицу с информацией о том какие браузеры поддерживают этот относительно новый атрибут, а какие (как IE) — нет.

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

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

На данный момент первый по популярности браузер это Chrome, за ним идет Firefox.

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

Итак, поговорим о том что такое HTML.

Что такое термин «HTML» и как он относится к вебу? Немного ниже мы поговорим о большой тройке технологий, на которых держится Сеть: HTML, CSS и JavaScript.

Где в этом место для HTML? Другими словами, какую роль играет HTML в веб-разработке?

По мере прочтения вы найдете ответы на эти довольно простые вопросы.

HTML

Прежде всего, HTML расшифровывается как HyperText Markup Language.

Гипертекст (hypertext) это текст, который содержит ссылки на другие тексты. В принципе, это то чем является Веб. Один документ ссылается на другой документ, тот ссылается на следующие и так далее.

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

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

К тому же, HTML неплохо читаем человеком.

Последнее слово это язык (language). Язык имеет свой синтаксис, это означает что есть правильный и неправильный путь написания.

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


<h1>
  <div>Hello world!</h1>
</div>

А в этом примере показан правильный порядок.


<h1>
  <div>Hello world!</div>
</h1>

Технологии, на которых держится Веб

Давайте поговорим о технологиях, на которых держится Сеть: HTML, CSS и JavaScript.

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

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

Как если вы знаете что дом состоит из кухни и комнаты, но не знаете какого они цвета и как оформлены.

Цвет и стиль — это роль CSS. Цвета, макет, стиль и размер шрифта, и все прочие вопросы оформления.

Третий компонент, JavaScript, определяет поведение и функциональность. К примеру, что происходит после загрузки страницы или что просхойдет при клике на заголовок. Работа JS — предоставить эти функции.

Давайте посмотрим пример всего этого.


<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Структура HTML (до)</title>
  </head>
  <body>
    <h1>Структура HTML</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor. Donec commodo vestibulum tincidunt. </p>
    <footer>
      <hr>
      <p>Тех. поддержка: support@we-have-lunch.com</p>
    </footer>
  </body>
</html>

Заголовок, пара параграфов, футер с адресом (не работающей) поддержки…

Давайте добавим в тот же документ немного стилей и поведения.


<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Структура HTML (после)</title>
  </head>
  <body>
    <h1 style="text-align: center; color: green; font-size: 60px;">Структура HTML</h1>
    <p style="font-size: 1.5em; margin: 0 100px 0 100px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus elementum mauris eu auctor. Donec commodo vestibulum tincidunt.</p>
    <footer>
      <hr>
      <p style="text-align: center;" 
         onclick="alert('Отправка сообщений бесполезна...');">
         Тех. поддержка: support@we-have-lunch.com
      </p>
    </footer>
  </body>
</html>

Теперь давайте посмотрим на оба этих документа в браузере.

В первом нет ничего особенного. Заголовок, пара параграфов и т.д.

Но во втором примере очевидно добавление стилей. Заголовок стал зеленым, расположенным по центру, стал крупнее. Первый параграф тоже немного изменил свой вид, как и футер.

И если мы кликнем по адресу e-mail внизу, появится сообщение.

Что, кстати, соответствует опыту большинства людей по поводу текстовой поддержки…

Как вы видите, добавились некоторые стили и поведение, но структура осталась точно той же.

Вкратце

HTML размечает контент и определяет структуру документа.

Как и любой язык, он имеет правильный и неправильный синтаксис.

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

Этот пост представляет собой небольшую заметку о компонентах, которыми нужно владеть Ruby on Rails разработчику.

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

Что такое ORM

ORM сопоставляет объект и реляционную базу данных.

Object-relational mapping — объектно-реляционное сопоставление.

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

Также ORM упрощает написание кода для доступа к базе данных.

В Rails, Модель обычно использует какой-то ORM-фреймворк.

Фреймворком по умолчанию является Active Record.

Базы данных

SQLite довольно легкая и простая база данных, но для большинства проектов вам могут понадобиться такие базы данных как PostgreSQL или MongoDB.

Postgres является объектно-реляционной базой данных, она хорошо подходит для хранения разнообразной информации.

MongoDB является NoSQL базой данных, она использует JSON-подобные документы. Она также подходит для хранения больших объемов данных или медиафайлов.

Иногда вам могут встречаться прочие БД, например MySQL.

CRUD

CRUD (create, read, update, delete) — четыре базовые функции, используемые при работе с базами данных и прочими хранилищами информации:

  • Создание
  • Чтение
  • Редактирование
  • Удаление

Пример:

Операция SQL-оператор HTTP-операция
Создание (create) INSERT POST
Чтение (read) SELECT GET
Редактирование (update) UPDATE PUT или PATCH
Удаление (delete) DELETE DELETE

Также CRUD может означать пользовательский интерфейс с такими функциями.

AngelList — это американский сайт для стартапов, людей ищущих работу и инвесторов.

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

На сайте много стартапов из Кремниевой Долины, США, Европы и других стран. Они ищут разработчиков, инженеров, учёных, менеджеров.

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

Как я искал работу

Так как на сайте много технологических компаний, которым нужны талантливые разработчики, поиск не составлял труда. По запросу «Ruby on Rails, Europe» на сайте около 200 вакансий.

В основном кроме RoR для такой работы нужно владеть: AngularJS (иногда React), HTML5/CSS3, RSpec, навыками работы с базами данных и прочим.

То есть, что неудивительно, Ruby on Rails разработчики чаще всего должны владеть полным стеком.

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

Пока что я проявил заинтересованность к различным компаниям из Амстердама, Берлина, Барселоны, Парижа и т.д.

Многие компании готовы сотрудничать удаленно, некоторые предпочитают пригласить работника в офис.

В этом посте я расскажу о своем опыте поиска работы веб-разработчиком в странах ЕС.

Для начала, я написал резюме в формате PDF. Затем начал искать в Google «ruby on rails jobs germany», «ruby on rails remote jobs» и т.п.

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

Первый ответ

По второй заявке со мной связался CTO (и заодно владелец/директор компании), это было агентство из Берлина.

Меня попросили выполнить тестовое задание: небольшое приложение с использованием Ruby on Rails и AngularJS/React (я выбрал Angular). Оно имело небольшой функционал (регистрацию, аутентификацию, загрузку изображений и их просмотр), но при этом покрывало большинство основных навыков.

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

Третья страница была самой интересной: на ней было несколько десятков технических вопросов по Ruby on Rails, а также вопросов для понимания моего мышления в профессиональном плане.

Было интересно, заняло некоторое время на полное заполнение.

В общем, отправил заполненный опросник и готовое тестовое задание обратно.

Первое интервью

CTO понравилось мое выполнение, он пригласил меня на интервью — для начала с HR.

Мне пришлось написать этому коллеге самому, он предложил skype-интервью. Договорились о времени.

В назначенное время он мне позвонил. Разговор длился около 20-30 минут.

Мы обсуждали общие вопросы, такие как зарплата, то как мы будет работать и т.д.

Договорились, что для начала я буду работать удаленно, и если всё пойдет хорошо, они пригласят меня в Берлин.

Если бы им всё понравилось, меня ждало бы второе интервью с CTO/CEO.

Отказ

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

Как я мог ожидать, я получил вежливый отказ:

I´m very sorry for answering that late. After talking to my customer he
decided not to go on with you at the moment. But we hope to cooperate
with you to an other time.

Что дальше

Пока я ожидал ответа, я продолжал рассылать заявки. Опять же, часть из них была отправкой резюме на e-mail, часть заявок оставлялась на сайтах компаний.

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

Пара примеров ответов:

Hi Kirill,
Thank you for your application! Unfortunately we’ve reviewed your application and have decided we won’t be moving forward with you for this role you applied. This is mainly because we are at the moment looking developers with a bit more experience.
Thanks again for your in interest in working with us. We’ll be sure to keep you in mind if anything new comes up that’s a good fit.
Best regards,
Tiina / Codemate HR

Ищут чуть более опытного разработчика — ответили как есть.

Вот последний ответ:

Dear Kirill,
Thank you for submitting your application and showing interest in Clark.
After careful examination of your application, we regret to inform you that we cannot take it into further consideration. We receive many great applications and therefore decisions are often based on minor differences. Please be assured therefore, that we do not question your qualifications or you as a person.
We appreciate your time and interest in Clark and wish you the best in your current job search. Please note that this email only counts for this position, if you applied for several openings, you will get separate feedback for all of your applications.
Kind regards,
Your Clark Recruiting Team

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

Поиск продолжается

Продолжаю отправлять заявки в европейские страны.

Европа не маленькая:

Карта Европы и ЕС

На карте отмечены страны европейского союза.

Кроме прямого поиска, я начал искать работу на AngelList. Примерно так выглядит мой профиль:

Kirill Topolyan, AngelList

Работает AngelList довольно интересно. К примеру, я вбиваю в поиск «Ruby on Rails, Germany» или «Ruby on Rails, Europe», и вижу список компаний/вакансий, для которых выбираю «интересно» или «пропустить».

Если компания, которая мне интересна, тоже отмечает заинтересованность ко мне, мы общаемся дальше и возможно они меня нанимают.

Немного напоминает сервисы знакомств, кстати.

Что удивило

Показалось слегка интересным, что в вакансиях часто указано «m/f». К примеру, «Ruby on Rails Developer, m/f», «Full-Stack Web Developer, m/f».

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

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

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

В этом посте я расскажу о развертывании приложения на Heroku.

Прежде всего, что такое Heroku? Heroku — это PaaS. Платформа как услуга (Platform as a Service). Некоторые люди называют это облаком.

Они позволяют развертывать приложения на своей платформе.

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

Так что, вы можете зарегистрироваться бесплатно на heroku.com.

Heroku CLI

Heroku имеет CLI — интерфейс командной строки (command line interface). Он позволяет вам управлять вашими приложениями на Heroku.

Раньше он назывался Heroku Toolbelt.

Установка довольно простая и описана на их сайте: https://devcenter.heroku.com/articles/heroku-cli.

Последние шаги

Heroku использует Postgres и рекоммендует gem rails_12factor.

Так что, нужно перенести gem sqlite в режим разработки, а нужные gem’ы добавить в режим production.

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

Пишем в терминале heroku login, вводим e-mail/пароль.

После успешной авторизации, выполняем heroku create name, где name — имя приложения. Если вы не вводите его, Heroku выберет свободное имя для вас.

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

Можете это проверить с помощью git remote -v или git branch -av.

Это практически всё. Далее вы делаете git push heroku master и наблюдаете за результатом.

Не забудьте убедиться, что корневая папка вашего репозитория содержит папки и файлы Rails-приложения (такие как app и т.д.). Это то как Heroku узнает какое это приложение.

Можно выполнить heroku open, это откроет ссылку в браузере.

Теперь ваше приложение не на локалхосте, ваше приложение работает в реальном вебе.

В итоге

Зарегистрируйтесь на Heroku и скачайте их CLI.

Не забудьте сделать изменения в Gemfile.

В этом небольшом посте мы рассмотрим интеграцию Rails с HTTParty.

Для начала добавляем HTTParty в Gemfile.

Затем выполняем команду bundle install или просто bundle.


(…)

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

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