HTML CSS id vs class

Working on some websites again, been away from HTML and CSS for a while and having to remind myself the difference between ids and class's.

id is for unique elements on a page. There should only ever be one of each id on a page.

< d i v id="navigation">< / d i v>

class is for many elements which you want to apply a custom style

< p r e  id="prettyprint">Code1< / p r e>
< p r e  id="prettyprint">Code2< / p r e>

CSS for id:

div#navigation {background-color: white;}

CSS for class:

div.prettyprint {background-color: white;}

Original Source :
http://www.tizag.com/cssT/cssid.php

Disable Visio Auto Connect

I think it was in Visio 2007 a new feature called auto connect was added which adds blue triangles on the side of visio objects (Shown in image below) and if pressed will auto connect to some other object/shape. This can get quite furstrating as they are very easy to accidentally click.



To switch off this feature choose:
Visio -> Tools -> Options -> General Tab
Deselect the 'Enable AutoConnect' option

.vimrc tweaks

Improving the Status line in Vim, get current file, directory, position etc.

~/.vimrc

"Setup the Status line
set showcmd             " shows the command in the status line
set ch=2                " make command line 2 lines high
set ls=2                " status line always on

set statusline %<%f\ %h%m%r%=%{getcwd()}\ \ \ %-14.(%l,%c%V%)\ %P

Java right click menu example

I have just setup a new github project for java examples first source file is the basic structure of a right click menu.

PopupMenu.java

Sinartra limit blog posts displayed on a page

To limit the number of database elements returned in ActiveRecord is trivial but there is a little bit of work involved with getting the links setup to jump forward and backwards.

I have decided to use these [1,2,3] URLs to navigate the list of blog posts
[1] /blog : always the latest
[2] /blog/older : The next page of blog posts
[3] /blog/older/integer : a page of blog posts starting at integer the links provided will increment this by a fixed amount, but the route can accept any value.

NB: as allways I have inserted some extra space in to the code to get it to display rather than render, you may have to delete spaces after <.

My app.rb:

require 'rubygems'
require 'sinatra'
require 'active_record'

$blogpath = "blog"
$blogs_per_page = 10

ActiveRecord::Base.establish_connection(
  :adapter   => 'sqlite3',
  :database  => './db/blog.db'
)

class Posts < ActiveRecord::Base
end

get '/blog/?' do
   @offset = 0
   @posts  = Posts.find(:all, :order => "id DESC", :limit => $blogs_per_page)
   erb :'blog/all'
end

get '/blog/older/?' do
   #This probably should be a redirect to /blog/older/$blogs_per_page
   @offset = $blogs_per_page
   @posts  = Posts.find(:all, :order => "id DESC", :limit => $blogs_per_page, :offset => @offset)
   erb :'blog/all'
end

get '/blog/older/:offset/?' do
   @offset = params[:offset].to_i
   @posts  = Posts.find(:all, :order => "id DESC", :limit => $blogs_per_page, :offset => @offset)
   erb :'blog/all'
end

The views/blog/all.erb

< %# This section adds control on top  %>
< p>
< a href="/<%=$blogpath%>"> latest <%=$blogpath%>< /a> 

<% if @offset>($blogs_per_page-1) %>
 | < a href="/<%=$blogpath%>/older/<%=@offset-$blogs_per_page%>"> newer <%=$blogpath%>< /a>
<%end%>

 | < a href="/<%=$blogpath%>/older/<%=@offset+$blogs_per_page%>"> older <%=$blogpath%>< /a> 
< /p>

<%# This section lists all the Posts passed to it %>
<% for post in @posts %> 
  < h2>< a href="/<%=$blogpath%>/<%=post.id%>"> <%= post.title %>< /a>< /h2>
  < p><%=post.body%>< /p>
<% end %>

Hyperlink to submit html forms

Some times you need a hyperlink to submit hidden form data. Example taken from javascript-coder.

< form name="myform" action="handle-data.php">
Search: < input type='text' name='query' />
< a href ="javascript: submitform()">Search< / a>
< / form>
< script type="text/javascript">
function submitform()
{
  document.myform.submit();
}
< / script>

This is a suggestion from VelocityReviews, just change the look of the button:

< input type="submit" value="Submit" style="Border: none; background: none">

I ended up using a hyperlink to an URL that could then be intelligently parsed in my sinatra route, I would have had to have seperate get and post routes any way if I wantyed to stop the form appending ?lots=of&variab=les to the URL.

Sinatra layouts vs templates

I must have missed this on my first pass of the Sinatra (sinatrarb) book. There is a very nice way to create a site template, called a layout.

Just create a file in views called layout.erb (or layout.haml if using haml) output yield where you want the body of the templates to be inserted. Class @variables can also be used.
This allows the basic layout of your site Headers, Footers and navigation panes to be controlled independently, a change in layout.erb is instantly applied across your whole site.

layout.erb

< h t m l>
   < h e a d>
      < t i t l e><%= @title %>< / t i t l e>
   < / h e a d>
   < b o d y>
      <%= yield %>
   < / b o d y>
< / h t m l>

you app.rb (NB: no refference to layour.erb is made)

get '/about/?' do
   @title = "About"
   erb :about
end

/views/about.erb

<p>Example about page</p>