…

,

,

,
, ,

Ошибка

Ошибка

Привильно

По стандарту

Неправильное использование списков

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

Использование стилей в коде

Вы наверняка уже слышали, что использование стилей в коде это плохо. Вы не задумывались, почему это так? Причина в том, что CSS и семантический HTML задуманы именно для отделения контента от его оформления. Такая модель обеспечивает гораздо большую гибкость и удобство работы с документами.

Ошибка

Ваш замечательный текст

Игнорирование тегов заголовков

Теги заголовков предназначены для того, что бы выделить заголовки в отдельный раздел на странице. Стандарт предполагает использовать для этого теги от

до

. Оформление и расположение текста в них может быть любым, но пусть документ будет структурирован верно!

Ошибка Ваш замечательный заголовок

Текст вашей статьи.

Привильно

Ваш замечательный заголовок

Текст вашей статьи.

Неправильное использование тега FORM

Мы все часто ошибаемся создавая формы и таблицы в HTML. Помните, что таблицу нужно создавать уже внутри формы!

Ошибка

...

Привильно
...

Неиспользование аттрибута ALT

При работе с изображениями вы должны использовать аттрибут ALT. Это необходимо, так как пользователи смогут определить, что же должно быть на месте изображения, даже если используют очень медленное подключение. Это значение должно описывать суть используемого изображения. Никогда не используйте alt=«картинка». Если же изображение выполняет чисто декоративные функции, то используйте alt="*" .

Ошибка Привильно

Неправильные теги для выделения жирным или курсивом

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

Бесполезное использование переноса строки

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

Ошибка Первый абзац.


Продолжение текста. Привильно

Первый абзац.

Продолжение текста.

Теги: HTML, ошибки

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

Создание приложения

1. Генерим приложение без тестов и запуска bundle install : rails new devise_modal -B -T
2. Добавляем нужные гемы в Gemfile :

   И устанавливаем всё: bundle install

3. Запускаем нужные генераторы
   rails g bootstrap:install static , «static» так как ничего менять в стилях bootstrap "а не будем
   rails g devise:install; rails g devise User; rake db:migrate - устанавливаем devise и создаём пользователя
4. Создаём контроллер, который будет отображать главную страницу:
   rails g controller welcome index --no-helper --no-assets
   В config/routes.rb привязываем index к главной странице:
   root "welcome#index"
В конце этого этапа есть приложение, с формами входа/регистрации на стандартных ссылках для devise : users/sign_in и users/sign_up .

Модальные окна для форм

В формах нету ничего примечательного - используем стандартные devise "овские сделав их remote и поменяв формат на json . Дальше делаем их модальными, обернув в соответствующие классы bootstrap "а. В итоге получились такие partial "ы:


x
Sign in
<%= form_for(User.new, url: session_path(:user), html:{id: "sign_in_user", :"data-type" => "json"}, remote: true) do |f| %>
<%= f.label:email %>
<%= f.email_field:email, autofocus: true %>
<%= f.label:password %>
<%= f.password_field:password, autocomplete: "off" %>
<% if Devise.mappings[:user].rememberable? -%>
<%= f.check_box:remember_me %> <%= f.label:remember_me %>
<% end -%>
<%= f.submit "Sign in" %>
<% end %>



x
Sign up
<%= form_for(User.new, url: registration_path(:user), html: {id: "sign_up_user", :"data-type" => "json"}, remote: true) do |f| %>
<%= f.label:email %>
<%= f.email_field:email, autofocus: true %>
<%= f.label:password %>
<%= f.password_field:password, autocomplete: "off" %>
<%= f.label:password_confirmation %>
<%= f.password_field:password_confirmation, autocomplete: "off" %>
<%= f.submit "Sign up" %>
<% end %>

Добавим отображение этих файлов и ссылок для их вызова в layout :
<%= link_to "Sign in", "#sign_in", "data-toggle" => "modal", :class => "btn btn-small" %> <%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => "btn btn-small" %> <%= render "shared/sign_in" %> <%= render "shared/sign_up" %>
А после этого облагородим немного, сделав проверку на наличие юзера:
app/views/layouts/application.html.erb
<% if current_user %> <%= "Hello, #{current_user.email}" %> <%= link_to "Sign out", destroy_user_session_path, :method => :delete %> <% else %> <%= link_to "Sign in", "#sign_in", "data-toggle" => "modal", :class => "btn btn-small" %> <%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => "btn btn-small" %> <%= render "shared/sign_in" %> <%= render "shared/sign_up" %> <% end %>
Чтобы всё это работало нужно добавить несколько методов в application_helper , которые определяют resource и связанные с ним для данного контекста:
app/helpers/application_helper.rb
def resource_name:user end def resource @resource ||= User.new end def devise_mapping @devise_mapping ||= Devise.mappings[:user] end
Как заметили в комментариях printercu и DarthSim переопределять глобальные хелперы для resource имеет мало смысла, лучше напрямую задать в формах вместо resource - User.new , а вместо resource_name - :user . Также в app/views/shared/_sign_in.html.erb укажем Devise.mappings[:user] заместо devise_mapping . В целом, можно вообще избавиться от этого условия: <% if devise_mapping.rememberable? -%> основываясь на том, указуем ли мы в модели пользователя(app/models/user.rb ) :rememberable . Кроме того, в app/views/shared/_sign_up.html.erb ещё был хелпер devise_error_messages! , который использует resource , но поскольку текст ошибок берётся из json "а ответа, то просто удалим из формы <%= devise_error_messages! %> за ненадобностью.
Теперь есть модальные формы, которые доступны с любой страницы и позволяют входить и регистрироваться. Осталось только сделать, чтобы devise на эти запросы в ответ не отправлял html страницы.

JSON ответы от devise

В геме devise за ошибки связанные со входом отвечает FailureApp . При возникновении ошибки в SessionsController "е, который отрабатывает запросы на вход, вызывается respond , где с помощью http_auth? проверяется: нужно слать 401 статус или же переадресовывать на другую страницу. Так как по умолчанию у devise "а:
config/initializers/devise.rb
config.http_authenticatable_on_xhr = true то и возвращается 401.
RegistrationsController же в ответ на AJAX запрос присылает html страницу, чтобы это исправить переопределим его немного - укажем явно, какие форматы нас интересуют:
rails g controller Registrations --no-helper --no-assets --no-views
config/routes.rb
devise_for:users, controllers: {registrations: "registrations"}
app/controllers/registrations_controller.rb
class RegistrationsController < Devise::RegistrationsController respond_to:html, :json end
Теперь при неудачной попытке регистрации будет отдаваться 422 статус с текстами ошибок в responseJSON["errors"] , а при удачной - 201. Аналогично для SessionsController "а при удачном входе нужно отдавать статус, а не html-страницу, поэтому «научим» и его правильно реагировать на json запросы:
rails g controller Sessions --no-helper --no-assets --no-views
config/routes.rb
devise_for:users, controllers: {sessions: "sessions", registrations: "registrations"}
app/controllers/sessions_controller.rb
class SessionsController < Devise::SessionsController respond_to:html, :json end
Также можно написать javascript , который будет обрабатывать ответы от модальных форм, например такой:
app/assets/javascripts/welcome.js.coffee
$ -> $("form#sign_in_user, form#sign_up_user").bind("ajax:success", (event, xhr, settings) -> $(this).parents(".modal").modal("hide")).bind("ajax:error", (event, xhr, settings, exceptions) -> error_messages = if xhr.responseJSON["error"] "
" + xhr.responseJSON["error"] + "
" else if xhr.responseJSON["errors"] $.map(xhr.responseJSON["errors"], (v, k) -> "
" + k + " " + v + "
").join "" else "
Unknown error
" $(this).parents(".modal").children(".modal-footer").html(error_messages))
При входе оборачиваем ошибку в alert , а при регистрации - ошибки по каждому параметру, после чего выводим полученное сообщение в footer "е. При успешном запросе просто убираем модальную форму (можно ещё обновлять блок в layout "е, в котором проверяется наличие пользователя, чтобы отображать данные пользователя (они также приходят в ответе)).
Теперь контроллеры отдают ответы в правильном формате, как и для модальных форм - json , так и для стандартных(users/sign_in , users/sign_up ) - html . И всё, что понадобилось для этого понадобилось - переопределить контроллеры, расширив набор форматов:
respond_to:html, :json

Примечание

Приложение писалось на rails 4, но отличия для 3.2 будут минимальны: запустится bundle install при создании приложения, нужно будет удалить public/index.html а также путь на главную будет выглядеть чуть иначе:
config/routes.rb
root to: "welcome#index"