I had mentioned previously that I had taken up markdown blogging. At that time, I was writing my post in markdown, converting it to HTML, and then injecting it into blogger. This last week, I have done a good bit of work to convert my site to a "static site" using Pelican. A static site is made up entirely of static files - no database, no php includes, just your basic collection of html, javascript, css, and images. I write content in Markdown on my laptop. I develop my theme locally as well. Then I run "make html" and pelican will process my configuration file, my content, and my theme to generate all of the pages, posts, archive pages, and various rss feeds. The end result is a directory full of files that can be dropped onto pretty much any webserver.
There were a few hic-cups. Many of my older pages were not originally written in markdown, but rather using whatever CMS editor I had at the time. Pelican has an import feature, but some things got lost in translation. Any preformated code blocks had to be re-created manually (amusingly enough, copying and pasting from the old web page into vim, then indenting them properly).
The biggest loss is a search engine. A CMS like Wordpress or a hosted solution like Blogger stores your content in a database and provides a search interface to that content. With static pages, not so much. Most of the web gets around this using Google's CSE, which I am trying as well. As of yet, almost nothing appears to be indexing on this page. If this continues, I will setup a stanadlone search engine that simply indexes the pages on this site. (UPDATE: Google has a nice fresh index of the website, covering everything except this page I wrote yesterday.) I'm still researching possibilities on that. Ten years ago, ht://dig was the premier application to use, but development on that seems to have stopped in 2004. Sphider looks like a good product, but again, development stopped in 2007. Small search engine development seems to have dropped off significantly with the rise of Google's popularity.
A copy of the website content and theme can be tracked on github.
This weekend I decided to takle both learning Ruby and working with AWS via the Ruby API. Having only played with both of these in the past, this presents two learning challenges at once. However, from past projects, this is how I learn best. I am somewhat familiar with AWS terms and once made a script in Python to fire up an instance. This was before Amazon came out with their management console, so I imagine things have come a long way since then (hopefully easier). I also played with Ruby for a while, but didn't have a decent project for it. Having a project with goals will hopefully keep me on track and give me a way to measure my progress.
My goals for this project are as follows:
First off, I need to setup a ruby development environment. Since I have used PyCharm in the past, I will try JetBrain's RubyMine for my editor environment. After installing this, the first thing I learned is that rails is not installed. I could install using apt-get, but Jetbrains recommends using RVM. It looks like a nice way to manage different versions of Ruby, rails, and gems. I know when I have installed Ruby applications requiring gems, gem versions was always a source of concern. It is very easy to get mismatched gem versions in the wild.
RVM install locally to \~/.rvm on linux, which is nice - you don't mess up any system wide ruby installations and keep everything local to your development environment. After installation, I had to figure out a couple bits with rvm.
rvm install 1.9.2 # installs ruby 1.9.2rvm list # lists versions of ruby installedrvm use 1.8.7 # use ruby 1.8.7First, your terminal has to be setup as a login shell. This tripped me up for a while until I changed the settings in my terminal emulator. terminator has this as checkmark option.
ytjohn@freshdesk:~$ rvm list rvm rubies ruby-1.8.7-p371 [ x86_64 ] ruby-1.9.2-p320 [ x86_64 ] # => - current # =* - current && default # * - default ytjohn@freshdesk:~$ rvm use 1.8.7 RVM is not a function, selecting rubies with 'rvm use ...' will not work. You need to change your terminal emulator preferences to allow login shell. Sometimes it is required to use `/bin/bash --login` as the command. Please visit https://rvm.io/integration/gnome-terminal/ for a example.
After switching to login
ytjohn@freshdesk:~$ rvm use 1.8.7 Using /home/ytjohn/.rvm/gems/ruby-1.8.7-p371
Finally, once you get ruby and rails working, you can create your rails project. I'm starting with a rails project because it's "all the rage" and gives you a decent running start. Later, I'll work on switching the supplied templates with boilerplate + bootstrap based ones.
This gets me started. Next up, I'll actually create the project from within RubyMine and just work on basic web functionality.
Yesterday, I ran into a small, but confusing issue converting from markdown to html for a post. A markdown process will convert html in a code block to html escaped entities. That way, when you use the resulting html, your html example code doesn't get interpreted as html.
For example:
<p>This is a <strong>strong</strong> example.</p>
Gets converted to:
<pre><code><p>This is a <strong>strong</strong> example.</p> </code></pre>
In the "dingus" I made, this didn't appear to be happening. The above example rendered as:
<pre><code>This is a <strong>strong</strong> example.</p></code></pre>
Furthermore, it worked perfectly fine using the "official" php-markdown dingus. I was using their library, and it's incredibly simple to implement. After some digging, I discovered that in my dingus, the code was being converted properly in my preview section, but not in my HTML Source textarea. I was printing the same $render variable in both sections, but getting different results in my browser.
As it turns out, most html elements are "CDATA" and a textarea is "PCDATA". When all is said and done, this means that instead of needing to send <, I need to send < to the browser. Fortunately, php has a function called htmlspecialchars() that does this for me. For my HTML Output, I just needed to change print $render to print htmlspecialchars($render).
20120920
Often when creating a "modern" web page, it's very common to find yourself reinventing the wheel over and over again. I know any time I wanted to create a two-column layout, I would have to look at previous works of mine or search the Internet for a decent example. However, I recently came across Twitter's Bootstrap framework. At it's core, it's just a css file that divide your web page into a 12-column "grid". You create a "row" div, and inside that row you place your "span*" columns. Each span element spans from 1 to 12 columns, and should always add up to 12 for each row. You can also offset columns. There are css classes for large displays (1200px or higher), normal/default displays (980px), and smaller displays such as tablets (768px) or phones (480px). Elements can be made visible or hidden based on the device acessing the site (phone, tablet, or desktop). There is also a javascript component you can use for making the page more interactive.
If you download bootstrap, you get a collection of files to choose from. There's js/bootstrap.js, img/glyphicons-halflings.png, img/glyphicons-halflings-white.png, css/bootstrap.css, css/bootstrap-responsive.css. There is also a compress .min. version of the javascript and css files. You can read further about the responsive version of the css, or how to use the icons.
Normally, one would take these downloaded files and put them into their own web application directory tree. However, there is a better way. Unless you are planning to use this on an Intranet with limited Internet access, you can use a copy of these files hosted on a "content delivery network (CDN)". A good example of this is the jQuery library hosted on Google's CDN. Google has a number of hosted libraries on their network. This has several advantages, one of which being caching. If everyone is pointing at a common hosted library, that library gets cached on the end-user's machine instead of being reloaded on every site that uses that library.
While bootstrap is not hosted on google, there is another CDN running on CloudFlare called cdnjs that provides a lot of the "less popular" frameworks, including bootstrap. Here are the URLs to the most current version of bootstrap files (they have version 2.0.0 through 2.1.1 currently).
All one has to do in order to use these is to add the css and the javascript (optional) to their page. Since most CDNs support both http and https, you can leave the protocol identifier out.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Here's an example you can use on your own.
<!DOCTYPE html> <html lang="en"> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12 label label-info"> <h1>Header</h1> </div> </div> <div class="row-fluid"> <div class="span2"> left column <i class="icon-arrow-left"></i> </div> <div class="span6"> <p>center column <i class="icon-tasks"></i></p> <div class="hero-unit"> <h1>This is hero unit</h1> <p>It is pretty emphasized</p> </div> <p>still in the center, but not so heroic</p> </div> <div class="span4"> right column <i class="icon-arrow-right"></i> </div> </div> </div><!-- end container --> <!-- load everything at end for fast content loading --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </body> </html>
Finally, I found that NetDNA also hosts bootstrap on their CDN at [www.bootstrapcdn.com]. I would say that either CDN would be fairly reliable, as they are both sponsored by their CDN they are running on. One advantage of this site is that they provide a lot more than just the basic bootstrap hosting such as custom themes and fonts.
To use them, you can simply swap out your css and js scripts.
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
UPDATE: I added jquery into the above examples because several parts of bootstrap rely on it (such as the Modal dialogs).
20120918