Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changed the CSS to use the "Minimal" Github Pages theme #34

Closed
wants to merge 2 commits into from
Closed

Changed the CSS to use the "Minimal" Github Pages theme #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
60ee1ae
added the awesome modernist theme by orderedlist actually meant for g…
kgrz Feb 8, 2013
da68101
Added vim swap files to the ignore list
kgrz Feb 9, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Expand Up @@ -5,3 +5,4 @@ config/database.yml

bin
.bundle
*.swp
1 change: 1 addition & 0 deletions Gemfile
View file
Open in desktop
Expand Up @@ -3,3 +3,4 @@ gem "sinatra"
gem "sass"
gem "rdiscount"
gem "rack-cache"
gem "thin"
186 changes: 63 additions & 123 deletions app.rb
View file
Open in desktop
Expand Up @@ -3,6 +3,7 @@
require 'erb'
require 'sass'

set :public_folder, File.dirname(__FILE__) + '/public'
configure :production do
sha1, date = `git log HEAD~1..HEAD --pretty=format:%h^%ci`.strip.split('^')

Expand Down Expand Up @@ -59,138 +60,77 @@
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>Sinatra Recipes</title>
<link rel="stylesheet" type="text/css" href="/style.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/styles.css" />
<link rel="stylesheet" type="text/css" href="/stylesheets/pygment_trac.css" />
<link rel="shortcut icon" href="https://github.com/sinatra/resources/raw/master/logo/favicon.ico">
<script
type='text/javascript'
<script src="javascripts/scale.fix.js"/>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'>
</script>
</head>
<body>
<a name='top' />
<div id="header">
<h2>Community contributed recipes and techniques</h2>
<h1><a href="/">
<img src="https://github.com/sinatra/resources/raw/master/logo/sinatra-classic-156.png" />
Sinatra Recipes
</a></h1>
</div>
<div id="menu">
<ul>
<% @menu.each do |me| %>
<li>
<a href='/p/<%= "#{me}" %>'>
<%= me.capitalize.sub('_', ' ') %>
</a>
</li>
<% end %>
</ul>
</div>
<div id="content">
<div id="post">
<%= yield %>
<% if @children %>
<div id="children">
<ul>
<% @children.each do |child| %>
<li>
<a href='/p/<%= "#{params[:topic]}/#{child}" %>'>
<%= child.capitalize.sub('_', ' ') %>
<div class="wrapper">
<aside>
<header>
<img src="https://github.com/sinatra/resources/raw/master/logo/sinatra-classic-156.png" />
<h1>
Sinatra Recipes
</h1>
<p>Community contributed recipes and techniques</p>
<p class="view"><a href="http://github.com/sinatra/sinatra-recipes">View the Project on GitHub <small>sinatra/sinatra-recipes</small></a></p>
<ul>
<li><a href="https://github.com/sinatra/sinatra-recipes/zipball/master">Download <strong>ZIP File</strong></a></li>
<li><a href="https://github.com/sinatra/sinatra-recipes/tarball/master">Download <strong>TAR Ball</strong></a></li>
<li><a href="http://github.com/sinatra/sinatra-recipes">Fork On <strong>GitHub</strong></a></li>
</ul>
</header>
<nav>
<h2>Topics</h2>
<dl>
<% @menu.each do |me| %>
<dt>
<a href='/p/<%= "#{me}" %>'>
<%= me.capitalize.sub('_', ' ') %>
</a>
</li>
</dt>
<% end %>
</ul>
</div>
<% end %>

<% if @readme %>
<div id="footer">
<h2>Did we miss something?</h2>
<p>It's very possible we've left something out, thats why we need your help! This
is a community driven project after all. Feel free to fork the project and send
us a pull request to get your recipe or tutorial included in the book.</p>
<p>See the <a href="http://github.com/sinatra/recipes/blob/master/README.md">README</a> for more details.</p>
</div>
<% end %>
</div>
</dl>
</nav>
</aside>
<section>
<div id="post">
<%= yield %>
<% if @children %>
<div id="children">
<ul>
<% @children.each do |child| %>
<li>
<a href='/p/<%= "#{params[:topic]}/#{child}" %>'>
<%= child.capitalize.sub('_', ' ') %>
</a>
</li>
<% end %>
</ul>
</div>
<% end %>

<% if @readme %>
<div id="footer">
<h2>Did we miss something?</h2>
<p>It's very possible we've left something out, thats why we need your help! This
is a community driven project after all. Feel free to fork the project and send
us a pull request to get your recipe or tutorial included in the book.</p>
<p>See the <a href="http://github.com/sinatra/recipes/blob/master/README.md">README</a> for more details.</p>
</div>
<% end %>
</div>
</section>

<a href="http://github.com/sinatra/sinatra-recipes">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub" />
</a>
</div>

<a href="http://github.com/sinatra/sinatra-recipes">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub" />
</a>
</body>
</html>

@@ style
body
font-family: 'Lucida Grande', Verdana, sans-serif
margin: 0 auto
max-width: 800px

h1, h2, h3, h4, h5
font-family: georgia, 'bitstream vera serif', serif
font-weight: normal
font-size: 2em
line-height: 160%

a:link, a:visited
color: #3F3F3F

a:hover, a:active
color: #8F8F8F

.small
font-size: .7em

#header
margin: 10px 0px
a
text-decoration: none
h1
float: left
width: 250px
font-size: 2.65em
line-height: .75em
h2
text-align: right
font-style: oblique
font-size: 1em
float: right
width: 450px
img
float: left
width: 100px
margin-right: 15px
border: 0

#menu
float: left
max-width: 200px
word-wrap: break-word
font-size: .9em
clear: left

#children
clear: both
ul li
float: left
width: 275px
height: 40px

#content
float: right
max-width: 600px
pre
padding: 10px
max-width: 600px
overflow: auto
overflow-Y: hidden
background: #EEE
line-height: 100%

#post
line-height: 110%

#footer
clear: both
margin-top: 20px
113 changes: 113 additions & 0 deletions asset_management/README.md
View file
Open in desktop
@@ -0,0 +1,113 @@
# Asset Management
There are quite a few reasons why a production app should have proper
asset management (CSS, JS, Image files).


## Why Asset Management
"Why should I care about asset management?"

A typical app ends up with many `.css` and `.js` (or `.coffee` for that matter)
especially if you use a lot of external plugins such as the excellent Compass
framework or say, Ember.js

Serving uncompressed/minified assets is a crime in itself and that's one reason
why many libraries like jQuery and Ember provide a minified version of the library.

Even if you have a minifed version of those vendor plugins, you probably follow
best practices and write your `.css`|`.sass` and `.js`|`.coffee` code in a modular
fashion and end up with a bunch of those files that need to be served to the end-user.

There are many tools available that would optimize the assets for you. Some of the tools
available in Ruby are:

* Sinatra-Assetpack
* Sprockets
* Rake-pipeline

In general, these tools do the following:

* Compile (If they are written in, say, Sass or Coffeescript)
* Concatenate
* Compress
* Cache busting


### Compile

If you use sass/scss/less/coffeescript in your app, before serving the files, they
need to be compiled into CSS/Javascript.

### Concatenate

Multiple files may be concatenated into a single file and so, instead of having:

script src="jquery.js"
script src="foundation.js"
script src="home.js"
script src="feed.js"
script src="collections.js"
script src="ember.js"
script src="app.js"

you'll end up with:

script src="application.js"


### Compress

The compress step involves minifying the Javascript files (and CSS files) by removing extra
whitespaces which add to the file size and replacing long variable names with shorter ones
inside function bodies. Note that it won't change the API – only internal variables will
be changed. This step reduces the sizes of JS and CSS files by a huge margin.

### Cache busting

Browser-caching can be used to ensure the files won't be downloaded from the server for
every request. Many browsers check for the availability of the static files in the local
cache before sending the request to the server.

Cache busting is a procedure where the assets are numbered with a unique number that lets
the browser download the latest version of the assets. For example, assume that the
name of the compressed javscript file as "app.js" for a version of your production app
that was pushed yesterday. If you enabled caching by sending a "Cache-Control:public",
the "app.js" gets stored in the browser cache.

Now, if you've changed the "app.js" file today and pushed the new change to the server, the
browser may still load the cached "app.js" and not the new one.

This problem may be avoided by having a unique number after the name that changed per commit
that lets the browser know the latest version of the asset.



All the above steps are handled by the tools mentioned previously.


## Thinking in pipelines in Sinatra


A typical app consists of many assets usually stored in the public directory
which is the default for Sinatra application. The structure is something similar
to this:

app.rb
|
|public/
|css
|js
|images

The files then are accessible in the views with the urls: `css/app.css`,
'js/app.js` etc. If your app uses other plugins such as the excellent Compass
framekwork or Ember.js, you'll find that the number of files and the file sizes
increase which slows the download of your app/site when deployed in production.

For this reason, a lot of tools have been developed to ensure that the files are
concatenated and compressed. Some of the tools are:

* Sinatra-assetpack
* Sprockets
* Rake-pipeline