Ruby on Rails c нуля!

BOM — Browser Object Model — объектная модель браузера
BOM — представляет собой древовидную структуру, иерархию объектов браузера. Во главе этой структуры стоит объект window и представляет он собой само окно браузера. window также является глобальным объектом, то есть внутри него расположена глобальная область видимости и любая глобальная функция или переменная является соответственно методом или свойством объекта window.

Наиболее интересными функциями и свойствами window являются следующие:

window.navigator — информация о браузере.

window.innerHeight, window.innerWidth — внутренняя высота и ширина браузера, то есть размер области, которая отображает сайт.

window.outerHeight, window.outerWidth — внешняя высота и ширина, то есть размер самого окна браузера.

window.load() — функция-обработчик события загрузки сайта.

window.location — объект предоставляет информацию об адресе страницы и методы для редиректа, обновления страницы и т.д.

screen — объект предоставляющий информацию о пользовательском дисплее.

screenLeft(screenX), screenTop(screenX) — положение верхнего левого угла окна браузера.

scrollY, scrollX — положения горизонтальной и вертикальной полос прокрутки.

В этой статье мы рассматриваем BOM достаточно поверхностно так как для разработки веб-приложений нам это не сильно нужно знать. Интерес представляют только свойства дающие информацию о браузере пользователя, размерах экрана/браузера и локация.

DOM — Document Object Model — объектная модель документа.

DOM является структурой вложенной в BOM. DOM содержит дерево всех элементов страницы и методы для работы с ними. Самыми популярными методами являются:

document.getElementById() — позволяет получить элемент по его ID.

document.getElementsByClassName() — позволяет получить элементы по их классу.

document.getElementsByName() — позволяет получить элементы по их имени.

document.getElementsByTagName() — позволяет получить элементы по имени тега.

document.getElementsByTagNameNS() — позволяет получить элементы по их имени, которые содержатся в определенной области видимости (оптимизированная версия getElementsByTagName).

Прежде, чем мы продолжим знакомится с остальными методами и свойствами для работы с DOM давайте подробнее рассмотрим что это такое и из чего DOM состоит. DOM описывается сразу тремя спецификациями разработанными W3C (W3C Level 1 DOM, W3C Level 2 DOM, W3C Level 3 DOM), которые были разработаны в разное время и соответственно в разной степени поддерживаются браузерами. В этой статье мы в первую очередь будем обращать внимание на DOM Level 1 так как он поддерживается полностью (или почти полностью) всеми современными (и не очень современными) браузерами. Вообще каждый Leve l является наслоением над предыдущим и добавляет определение новых свойств и методов для работы с DOM.

DOM состоит из узлов (node). О типах узлов позже.

<div>
  <p>
    <a>link</a> some text
  </p>
</div>

Можно изобразить так:

Read the rest of this entry »

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

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

Не правильно

if (true)
  alert(true);

Правильно

if (true){ alert(true); }

2. Всегда ставьте точку с запятой.
В JavaScript ставить точку с запятой в конце каждой строки является необязательным, однако, что произойдет если мы минифицируем код? — Правильно, код поломается.

Неправильно

function myFunction(a,b) {
  var sum = a + b
  alert(sum)
}

Правильно

function myFunction(a,b) {
  var sum = a + b;
  alert(sum);
}

3. Всегда используйте var для объявления переменных и избегайте глобальных переменных.
Если вы не используете var для объявления переменных, то такие переменные объявляются как глобальные переменные. Глобальные переменные несут различные опасности связанные с некорректной работой кода.

Read the rest of this entry »

Сразу оговорюсь о том, что JavaScript не самый удобный язык программирования — в нем много чего сделано неправильно или недоделано, много простейших вещей отсутствует, много неочевидных моментов, например начать программировать на Ruby можно уже через день почитав созданные кропотливым трудом статьи на RubyDev, а для того, чтобы научиться программировать на JavaScript необходимо большее время. Под «научиться программировать» я не подразумеваю умение организовывать архитектуру и создавать большие приложения, но подразумеваю знание синтаксиса и философии языка.

Несмотря на множество недостатков JavaScript — чудесный язык программирования. Если бы не проблемы с кроссбраузерностью и нормальная поддержка браузеров современных стандартов (я о HTML5 JavaScript APIs) то удовольствие от программирования на JavaScript можно было бы сравнить с удовольствием программирования на Ruby.

В этой огромнейшей статье я постараюсь вам поведать об объектах в JavaScript, наследовании на прототипах и прочих вещах, а также познакомить вас с философией языка, точнее с тем, как ее понимаю я. Статья не будет раскрывать тему программирования на JavaScript всецело, я не ставлю целью написание еще одного справочника по языку — это глупо, вместо этого данная статья научит вас понимать то как и почему JavaScript работает так, как работает, как организовать код и т.д. Также оговорюсь, что в статье приводится не кроссбраузерный код, он работает в FireFox и Chrome о том, работает ли он в остальных браузерах я не знаю.

Read the rest of this entry »

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

1. Мне очень не нравится зависимость JavaScript от окружения. Это не есть недостатком самого языка, но есть большим недостатком технологии. Вместо того, чтобы писать код, программист вынужден бороздить просторы интернета в поисках документации о различиях браузеров и решении возникающих из этого проблем. Часто разработчики пишут код под какой-то один браузер (javascript движок), например под FireFox, а затем тестируют и допиливают его для работы в остальных браузерах. К счастью имеюттся различные фреймворки вроде jQuery, которые решают многие проблемы с кроссбраузерностью.
Read the rest of this entry »

Вот и дошли мои руки, ноги и сознание до изучения такой штуковины, как SASS / SCSS.

SASS — это синтаксический сахар для CSS. Аббревиатура SASS расшифровывается как Syntactically Awesome StyleSheets.

SCSS — это новое название SASS начиная с 3й версии и расшифровывается как Sassy CSS. Основное отличие SCSS — это улучшенная поддержка CSS3 и то, что в SCSS можно писать на каноническом CSS (можно сказать, что SCSS является надмножеством CSS).

SCSS позволяет писать стили вашего приложения с использованием очень мощных расширений стандартных возможностей CSS: возможности использовать переменные в стилях, подмешивания примесей, удобный синтаксис объявления стилей вложенных элементов и т.д. Все это мы рассмотрим в нашей статье, но не просто рассмотрим, а рассмотрим на примере использования в приложении на Rails.

Я уже писал на RubyDev об использовании языка HAML в Rails и с тех пор я стал его активно использовать вместо стандартного ERB. В этой статье я расскажу об SASS / SCSS. SASS / SCSS является проектом созданным под вдохновением от HAML, кроме того, чаще всего SCSS и HAML используются вместе. Эту статью о SASS / SCSS и статью о HAML можете считать предисловием к грядущим статьям по Compass и AssetsPipeline в Rails 3.1. Конкретно в данной статье рассматривается использование SASS / SCSS в приложении на Rails 3.0.9.
Read the rest of this entry »

HAML — очень удобный язык разметки который призван заменить HTML. HAML это также шаблонизатор, который компилирует код на HAML + Ruby  в HTML, который представляется пользователю.

Мне надоел стандартный ERB, надоели закрывающие теги, надоело, что порой бывает сложно понять что во что вложено, и я решил полностью перебраться на HAML. Если вы еще не слышали о HAML, то это не означает, что HAML — это что-то экзотическое, напротив, HAML использует большинство Rails разработчиков, так активно используют, что даже удивились, почему Rails Core Team невключили HAML в Raila 3.1. как шаблонизатор по умолчанию.

Начать работу с HAML совсем просто!

Read the rest of this entry »

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

Проверяем имеют ли элементы определенный класс:

$('p:first').hasClass('super'); // проверяем имеет ли первый параграф класс super.

Добавляем класс определенному элементу (объекту DOM):

$("p.super").addClass("some-class"); // объявляем элементу p.super второй класс - some-class.

Удаляем определенный класс у определенного элемента:

$("p.some-class").removeClass("some-class");

Read the rest of this entry »

jQuery ч.2: Введение в jQuery Селекторы
Селектором могут быть свойства тега, стили тега, имя тега, имя класса и идентификатора.
В этой статье мы будем использовать следущий HTML/CSS код:

<!DOCTYPE html>
<html>
  <head>
    <title>RubyDev.ru</title>
    <style>
      div.mega-div{width:640px;margin: 0 auto;background:#c00; border:10px solid #a22;padding:10px;overflow:hidden}
      ul{list-style-type:none;margin:0;padding:0;}
      a{color:#fff;font-size:11px;}
      div#nav{width:200px;background:#333;padding:10px;border:10px solid #222;float:left;margin-right:10px;}
      div#content{width:350px;background:#333;padding:10px;border:10px solid #222;float:left}
      #content p{color:#ddd;padding:0;margin:0;margin-bottom:10px;text-indent:20px;}
    </style>
    <script src="jquery-1.6.2.min.js"></script>
  </head>
  <body>
    <div class="maga-div">
      <div id="nav">
        <ul>
          <li><a href="/">RubyDev</a></li>
          <li><a href="#" style="link-style">This page</a></li>
          <li><a href="http://rubyonrails.org/">Ruby on Rails</a></li>
          <li><a href="http://rubyflow.ru">RubyFlow.ru</a></li>
          <li><a href="http://rubyflow.com" id="link-id">RubyFlow.com</a></li>
        </ul>
      </div>
      <div id="content">
        <p>Content content content Content content content Content.</p>
        <p>Content content content Content content content Content.</p>
        <p>Content content content Content content content Content.</p>
        <p>Content content content Content content <a href="#">content Content</a>.</p>
      </div>
    </div>
  </body>
</html>

Давайте сначала выберим все ссылки:
$(«a»)
Read the rest of this entry »

jQuery: jQuery(document).ready()
Поскольку это первая статья о jQuery, позвольте рассказать у ней о том, что же такое jQuery.

jQuery — это фрреймворк написанный на JavaScript и ориентирован на использование на стороне клиента. Заходя на ваш сайт пользователь скачивает jQuery вместе со всеми вашими скриптами, которые содержатся в отдельных файлах. jQuery необходим для следующих целей:

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

Read the rest of this entry »

Я программировал на JavaScript много лет и за это время наплодио много кода. Даже сейчас с моим большим опытом я продолжаю бороться за красоту JavaScript. В этом посте я хочу исследовать почему писать крассивый JavaScript код сложно и как эти сложности исправить с помощью CoffeeScript — маленького языка компилируемого в JavaScript.

Что есть красивый код?
Описание того, что есть красивый код субъективно, по этому я хочу предоставить вам несколько тезисов касательно того, что я подразумеваю под крассивым кодом:

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

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

Read the rest of this entry »