HTML5 a menu tag

Jak postupně pronikám do tajů HTML5, narazil jsem na zajímavost kolem <menu> tagu. Dříve (XHTML) jsem tento tag používal kvůli vyšší sémantice při kódování layoutu pro navigaci/menu na stránce. Přišlo mi to vhodnější než nějaké <ul id="nav"> nebo <div id="nav">.

Jak však píše HTML5 Doctor dostal tag menu s příchodem HTML5 nový význam a je vhodnější použít konstrukci <nav><ul></ul></nav>.

Vlastní konfigurace v RoR aplikaci

Obvykle při vývoji aplikace časem dojdete k tomu, že potřebujete nastavit nějaké hodnoty, které použijete kdekoliv v aplikaci, např. storage pro upload souborů (local pro development a třeba Amazon S3 pro production) nebo cokoliv jiného co vás napadne.

Samozřejmě existuje spousta gemů (třeba Settingslogic), jak už bývá v Rails zvykem, kde si vytvoříte strukturu vaší konfigurace třeba v Yaml souboru apod. Mně se zalíbil jednoduchý způsob, který publikoval Mike Perham na blogu Carbon Five v článku Configuration for Rails, the Right Way.

Využívá stávající Rails konfigurační soubory config/application.rb a config/environments/*.rb a přidává vlastní kofiguraci k již fungující Rails.

Nastavení config.files_storage = :file  pak můžete v aplikaci použít přes AppName::Application.config.files_storage.

Formuláře v Ruby on Rails snadno a rychle

I když práce s formuláři je už tak celkem rychlá a pohodlná, doporučuji použít gem simple_form, který má několik dalších výhod, které oceníte:

• generuje HTML5 markup
• HTML atribut type u inputu je automaticky nastavan podle datového typu atributu objektu (email, text, file, password)
• validační hlášky jsou zobrazovány inline u konkrétních políček s chybou
• je možné jej komplexně konfigurovat
• podpora I18n

Ukázka použití 

<%= simple_form_for @user do |f| %>
  <%= f.input :username, hint: "Nápovědný text k formulářovému políčku" %>
  <%= f.input :password %>
  <%= f.button :submit %>
<% end %>

Tip na závěr
Pokud stejně jako já, budete chtít změnit pořadí generovaných prvků pro každý formulářový řádek, tak aby třeba validační hláška byla hned za inputem. V konfiguračním souboru config/simple_form.rb nastavte:

config.components = [ :placeholder, :label_input, :error, :hint ]

Syntax highlighter v Bloggeru

Pokud chcete mít na vašem blogu stejně pěkně obarvený zdrojový kód jako mám já, stačí postupovat podle návodu na http://www.cyberack.com/2007/07/adding-syntax-highlighter-to-blogger.html, je to snadné a zvýší to čitelnost článků.

Klikatelné odkazy v plain textu

Metoda auto_link slouží k převedení odkazů a e-mailových adres z plaintextu na klikatelné odkazy. Velmi užitečné např. pro výpis komentářů nebo jiných vstupních dat od uživatelů, když nechcete povolit WYSIWYG editor.

Options a příklady použití najdete na APIdock - http://apidock.com/rails/ActionView/Helpers/TextHelper/auto_link

Plaveme ve floatech

Zrušení tabulkového designu přineslo mnoho bezesných nocí všem začínajícím kodérům a webovým vývojářům, co se většinu času hrabou v backendu, ale občas jsou nuceni nakódovat i nějaké to UI. A opravdovou noční můrou bude především "floutování" nebo-li různé čáry a kouzla s pozicováním, obtékáním a celkově s layoutem stránky.

Napozicovat nejaký DIV přes float: left; obvykle není problém. Ta težší část je obvykle v "clearování floatování", např. přes clear: left; nebo jiné pokročilejší řešení. Často se setkávám s použítím následujícího (nebo podobného) řešení

.clearfix {
  display:block;
}
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}

Třídu clearfix obvykle nastavíme obalovému prvku, takže obalový prvek bude mít stejnou výšku jako prvek vnitřní floatovaný a to je to co obvykle potřebujeme.

Článek na CSSNewbie se touto problematikou zaobírá a nakonec uvádí velmi pěkné a jednoduché řešení, bez použití nějakého clearfixu. Stačí i obalový prvek, který obaluje floatovaný prvek, "zafloatovat" a již i výška obalu odpovídá výšce vnitřního floatovaného prvku.

Samozřejmě, že pro mnoho z vás zkušených kodéŕů je to jistě samozřejmost. Ale věřím, že se najde někdo komu se to bude hodit.

Zkusím. Padne to nebo ne?

Nedávno jsem narazil na pěknou věcičku, která řeší následný nepěkný kód:

@person ? @person.name : nil

Řešením je dle http://web.elctech.com/2009/11/12/if-in-doubt-try-try-again/ případně API tato konstrukce:

@person.try(:name)

Samozřejmě, že v API najdete případně více informací. Velmi elegantní že?