MNUWORLD

First Commit

2014-05-15T00:00:00+00:00

"The beginning is the most important part of the work." Plato

I have been away from the blogging scene for quite a while now, suddenly today it dawned upon me that I need to start writing/posting again. My writing is a little bit rusty now, and I need to brush on that. Anyways, the moment I thought about blogging, Wordpress flashed in my mind. Well, I used Wordpress ¹ in the past and it worked well for a while, then I had to face issues like high-traffic and high CPU load and unexpected spikes in my server. Well, those weren’t too much trouble, I would avoid fixing those bugs if I was busy, and sometimes I would leave the system untouched for 2 days straight and let the server admins frown and try to mitigate the outage (I had a pretty straight forward deal with my hosting provider, that no matter what, they can’t shut down my website). The PHP runtime errors weren’t a big deal, the hundreds of thousands of SQL database queries weren’t a trouble, sometimes the site would run a tad bit slower than average, but it was OK overall for me. A sample of the emails I would receive from my hosting provider is given below:

tickets@hostgator.com
10/11/10

to hmfaysal 
Hello, 


I apologize, but I was forced to suspend the script "/home/hmfaysal/public_html/hmfaysal.com/index.php" as it was causing a high load on the server, and due to it affecting all of the other accounts on the system, I was forced to take immediate action for the health of the server.g 

I did notice that this was a Wordpress installation, and would recommend that you enable caching for it.

Please note that if you already have caching enabled, you will need to take more action such as looking into any high use modules or plugins, and seeing if there are any updates, or possibly any that you can disable to reduce the load that your site causes. 

If you reply back to this with your IP address (http://www.hostgator.com/ip.shtml) we will be more than happy to go ahead enable HTTP access for you, so that you can safely work on the script without it causing further issues. Please let me know how you would like to proceed.

But the game was changed when my site got hacked. Wordpress is notorious in getting hacked. The PHP code libraries are huge, and while Automattic tries to keep it relatively clean and bug free, bugs do persist among the thousands of lines of codes and every once in a while a bug gets discovered by the code breakers. If the bug can be exploited in some way to gain access of the site, the code breakers tend to do some serious damage. While I wasn’t been exclusively targeted by such individuals, I was part of a victimized group who used the same version of Wordpress, and all of our sites got defaced by some mass defacing software. Although it didn’t do serious damage, as I have daily off-site backup, I became dubious about the Wordpress platform.

So, this time around, while I was still brainstorming for ideas and theme designs and what not, I decided to go back to Jekyll, or you may say, rather old school. Why not use plain static HTML files with some CSS styling and JS animations? Static sites are impossible to hack, as there are no codes needed to be run on the server. The only way a static site can be compromised if the code breakers have access to your FTP account. I have used Jekyll in the past during my college years. I was working as a Teaching Assistant in the Mathematics Dept, and I was supposed to post weekly course materials on the course website. The trouble was my Alma maters IT dept didn’t allow dynamic sites to run on the nodes, and I wasn’t going download the HTML files, edit them with Sublime text, and push them back onto the server every week. So I used Jekyll and GIT Version Control to do that for me. And it was so efficient that I would post materials daily instead of weekly. It was like love on first use. But Wordpress had lots of theme choices and for my personal site I decided to use Wordpress anyways disregarding the simpleness and speed static sites provided. After the takeover of my Wordpress powered blog happened, I turned to self written PHP sites and static sites completely. I have built a social network based on PHP for my peer group which is highly secure but when it comes down to speed it lags behind. So I built this site using Jekyll, a blog aware static site generator. I hope this site will perform as envisioned.

This domain previously hosted a Wordpress blog. ↩

First Commit was originally published by Md Nasir Uddin at MNUWORLD on May 15, 2014.

ABOUT HMFAYSAL OMEGA

2014-01-12T00:00:00+00:00

HMFAYSAL OMEGA is a minimalist, beautiful, responsive theme for Jekyll designed for engineers as well as writers who want their content to take front and center. This theme elegantly wraps each page and post with featured images complementing the content. HMFAYSAL OMEGA (named after the Greek Alphabet) complements Jekyll’s minimalist, content-first approach with gorgeous typography and subtle design elements.

Write well, write beautifully, write responsively!

Features

Twitter Bootstrap 3
Option to set Parallax featured image that wraps your post in header and footer
Variable templates for articles, link, quotation and status updates
Responsive images and Magnific Popup Lightbox
Plugin-free/Github Pages Deployment Ready
Read time Calculator: Calculation of post read-time based on word count
Simple search that overlays results based on post title
Display mathematical equations beautifully via MathJax
CSS3 transitions and SVG graphics for better performance
Ability to turn of animations in _config.yml
Readable typography to make your words shine
Google Fonts
Other features
Designed by an Electrical Engineer
- Questions?
- Requests?
License

Twitter Bootstrap 3

Based on the latest Bootstrap its easy to update and customize to your own needs. Plus the power of the mobile first front-end framework adds to faster and easier web development.

See the list of theme elements.

Option to set Parallax featured image that wraps your post in header and footer

I always thought an article should wrap up in the end. What better way to do it other than wrapping it around with pictures? As we all know, a picture is worth a thousand words. Why not put 500 of those in the header and the rest in the footer to help writers tell their story?

Variable templates for articles, link, quotation and status updates

HMFAYSAL OMEGA Theme employs "post.type" to assign variable templates article entries, link posts, quotation and status updates. No other Jekyll theme offers this functionality. In the future, more "post.types" will be included.

This theme supports responsive images and uses a responsive lightbox to showcase larger images. Images also use CSS3 transitions to turn to B&W when not hovered.

Plugin-free/Github Pages Deployment Ready

Although featuring a mind-boggling number of features, this theme has been coded in such a way that it can be compiled without the usage of any plugins whatsoever. You do not have to worry about compatibility. Its ready for deployment on the Github Pages immediately.

Read time Calculator: Calculation of post read-time based on word count

I have been enjoying Medium.com as of lately and I simply love their Estimated Reading Time (ERT) of an article feature. What it does, it takes the word count of an article and calculates the ERT based on the average reading speed (ARS). While ARS is simply an estimation and it differs from person-to-person, Medium uses 180 Words-Per-Minute (WPM) as their ARS. I figured out that ARS in general is around 200 WPM. You can turn on or off this feature in the _config.yml file. Very recommended to use this feature as it increases user engagement.

Simple search that overlays results based on post title

HMFAYSAL OMEGA Theme provides search using Christian Fei’s Simple Jekyll jQuery plugin if you choose to enable search functionality in the _config.yml file. Clicking search will trigger a fullscreen overlay that searches post titles’ using an autogenerated JSON file.

Display mathematical equations beautifully via MathJax

Both inline and displayed equations can be rendered via MathJax. HMFAYSAL OMEGA Theme supports MathJax natively.

CSS3 transitions and SVG graphics for better performance

This theme uses subtle CSS3 transitions and SVG to showcase subtle animations for viewer pleasure. This ensures that optimal performance is guaranteed during page viewing.

Ability to turn of animations in _config.yml

HMFAYSAL OMEGA Theme avoids Javascript animations to increase website performance. But if you are still facing some lag in your test device, you can turn off the animations in the _config.yml file.

Readable typography to make your words shine

HMFAYSAL OMEGA Theme is a minimal, simple and responsive Jekyll theme built for maximum readability. The main design focus of HMFAYSAL OMEGA Theme is the typography and the clean design.

Google Fonts

This theme uses Google Webfonts instead of Adobe Edgefonts for performance.

Other features

Disqus comments if you choose to enable.
Simple and clear permalink structure
Footer Menu
361 Fontawesome icons
Tags for Open Graph and Twitter Cards for a better social sharing experience
Beautifully crafted 404 page
Custom categories and tags pages for viewers pleasure
Stylesheets for Pygments and Coderay to make your code examples look snazzy.
Sitemap for search engines

Designed by an Electrical Engineer

HMFAYSAL OMEGA Theme was designed by Hossain Mohd Faysal – an Electrical Engineer. I have to confess I am not a designer. So when you download this theme, you have to know you are not getting the best designed elements out there, but instead what you are getting is extremely clean code even though the site uses some highly complex liquid logic expressions.

Questions?

Having a problem getting something to work or want to know why I setup something in a certain way? Read the theme documentation or ping me on Twitter @hmfaysal or file a GitHub Issue.

Requests?

If you have some specific requests for this theme, or if you need help custom coding some elements, message me on Twitter @hmfaysal or email me at hmfaysal@alum.mit.edu

License

This theme is free and open source software, distributed under the The MIT License. So feel free to use this Jekyll theme on your site without linking back to me or using a disclaimer.

If you’d like to give me credit somewhere on your blog or tweet a shout out to @hmfaysal, that would be pretty sweet.

ABOUT HMFAYSAL OMEGA was originally published by Md Nasir Uddin at MNUWORLD on January 12, 2014.

Sample Status Post

2014-01-11T00:00:00+00:00

Oh Hello. This is a status post. Click here to learn about it more :-)

Don’t worry, you can enter additional details about your status update. Only the first paragraph [p:first-child] will be shown in the home page :-)

To start a status post, simply run rake newstatus['Some Status Title'] in the command line. Or if you want to create the post by yourself, make sure your post contains the following contents in your post’s Front Matter YAML:

---
layout: post
type: status
title: "Sample Status Title"
description: 
headline: 
modified: YYYY-MM-DD
category: status
image: 
  feature: 
comments: true
mathjax: 
---

Sample Status Post was originally published by Md Nasir Uddin at MNUWORLD on January 11, 2014.

Theme Elements

2014-01-10T00:00:00+00:00

I’ve put together a little post to introduce you to the HMFAYSAL OMEGA theme and get you started with Markdown. Go ahead and edit this post to get going and learn how it all works!

Elements

ELEMENTS

ELEMENTS

Writing in markdown is really easy. In any editor like notepad, you simply write as you normally would. Where appropriate, you can use formatting shortcuts to style your content.

LISTS

For example, a list:

Item number one
Item number two
- A nested item
A final item

or with numbers!

Remember to buy some milk
Drink the milk
Tweet that I remembered to buy the milk, and drank it

LINKS

Want to link to a source? No problem. If you put the url in this format, like [http://alum.mit.edu/www/hmfaysal](http://alum.mit.edu/www/hmfaysal) - it’ll automatically be linked up like http://alum.mit.edu/www/hmfaysal. But if you want to customize your anchor text, you can do that too! Here’s a link to the my website. Neat.

WHAT ABOUT IMAGES?

Images work too! And they are responsive! Already know the URL of the image you want to include in your article? Images are responsive and uses lightbox.

Check out this post to learn about including images in your post.

AND VIDEOS?

Video embeds are responsive and scale with the width of the main content block with the help of FitVids.

EQUATIONS

Are you an engineer? Or a mathematician? Want to post some equations in your Jekyll blog for the world to see? No problem. HMFAYSAL OMEGA has MathJax built in to beautifully render your equations in the browser. To use MathJax simply turn on the MathJax feature by declaring in the Front YAML Matter like mathjax: true, then wrapping your equation between $$...$$ will produce something like this:

f (a) = \frac{1}{2 π i} \oint_{γ} \frac{f (z)}{z - a} d z

THE LOGO

Not sure which image you want to use yet? That’s ok too. Leave yourself a descriptive placeholder and keep writing. Come back later and change the image in the _config.yml.

ICONS

This theme includes over 360 fontawesome icons. To use an icon go to Fontawesome website and click on the desired icon to find the appropriate tag.

QUOTING

Sometimes a link isn’t enough, you want to quote someone on what they’ve said. It was probably very wisdomous. Is wisdomous a word? Find out in a future release when I introduce spellcheck! For now - it’s definitely a word.

Wisdomous - it’s definitely a word. Hossain Mohd Faysal

WORKING WITH CODE

Got a streak of geek? We’ve got you covered there, too. You can write inline <code> blocks really easily with back ticks. Want to show off something more comprehensive? 4 spaces of indentation gets you there.

.awesome-thing {
    display: block;
    width: 100%;
}

Learn more about syntax highlighting in this post.

READY FOR A BREAK?

Throw 4 or more dashes down on any new line and you’ve got yourself a fancy new divider. Aw yeah.

FANCY SOME COLUMNS?

For more column combinations, visit this post.

BUTTONS

ADVANCED USAGE

There’s one fantastic secret about Markdown. If you want, you can write plain old HTML and it’ll still work! Very flexible.

That should be enough to get you started. Have fun - and let me know what you think @hmfaysal or at hmfaysal@alum.mit.edu :)

Theme Elements was originally published by Md Nasir Uddin at MNUWORLD on January 10, 2014.

Sample Gallery Post

2014-01-09T00:00:00+00:00

Here is an example of what a post with a gallery might look like. If you want to display two or three images next to each other responsively use figure with the appropriate class. Each instance of figure is auto-numbered and displayed in the caption.

Photos from my Japan trip.

Sample Gallery Post was originally published by Md Nasir Uddin at MNUWORLD on January 09, 2014.

Sample Quotation Post

2014-01-08T00:00:00+00:00

"Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius - and a lot of courage - to move in the opposite direction." Albert Einstein

HMFAYSAL OMEGA theme now supports Quotation posting, made famous by some premium WordPress themes. To make a quotation post, specify the post type as quote in the Front Matter YAML. So the Front Matter YAML should look like something like the following:

---
layout: post
type: quote
title: "Sample Quotation Post"
description: 
headline: 
modified: YYYY-MM-DD
category: quote
image: 
  feature: 
comments: true
mathjax: 
---

Or you can simply run the rake task command rake newquote["Some Quotation Title"] to generate a skeleton quotation post. Include the intended quotation in Markdown format in your post. A sample quotation in markdown looks like the following:

> "The Quotation Goes here"
> <small><cite title="Name of the Person">Person</cite></small>

You can add additional details about the quotation in the post. Just make sure the posted quotation goes first in the post, meaning it is the first paragraph of the post. Additional paragraphs can only be seen in the post page. You can also assign a featured image for the post page in the post’s Front Matter YAML.

Albert Einstein was born at Ulm, in Württemberg, Germany, on March 14, 1879. Six weeks later the family moved to Munich, where he later on began his schooling at the Luitpold Gymnasium. Later, they moved to Italy and Albert continued his education at Aarau, Switzerland and in 1896 he entered the Swiss Federal Polytechnic School in Zurich to be trained as a teacher in physics and mathematics. In 1901, the year he gained his diploma, he acquired Swiss citizenship and, as he was unable to find a teaching post, he accepted a position as technical assistant in the Swiss Patent Office. In 1905 he obtained his doctor’s degree.

During his stay at the Patent Office, and in his spare time, he produced much of his remarkable work and in 1908 he was appointed Privatdozent in Berne. In 1909 he became Professor Extraordinary at Zurich, in 1911 Professor of Theoretical Physics at Prague, returning to Zurich in the following year to fill a similar post. In 1914 he was appointed Director of the Kaiser Wilhelm Physical Institute and Professor in the University of Berlin. He became a German citizen in 1914 and remained in Berlin until 1933 when he renounced his citizenship for political reasons and emigrated to America to take the position of Professor of Theoretical Physics at Princeton*. He became a United States citizen in 1940 and retired from his post in 1945.

After World War II, Einstein was a leading figure in the World Government Movement, he was offered the Presidency of the State of Israel, which he declined, and he collaborated with Dr. Chaim Weizmann in establishing the Hebrew University of Jerusalem.

Einstein always appeared to have a clear view of the problems of physics and the determination to solve them. He had a strategy of his own and was able to visualize the main stages on the way to his goal. He regarded his major achievements as mere stepping-stones for the next advance.

At the start of his scientific work, Einstein realized the inadequacies of Newtonian mechanics and his special theory of relativity stemmed from an attempt to reconcile the laws of mechanics with the laws of the electromagnetic field. He dealt with classical problems of statistical mechanics and problems in which they were merged with quantum theory: this led to an explanation of the Brownian movement of molecules. He investigated the thermal properties of light with a low radiation density and his observations laid the foundation of the photon theory of light.

In his early days in Berlin, Einstein postulated that the correct interpretation of the special theory of relativity must also furnish a theory of gravitation and in 1916 he published his paper on the general theory of relativity. During this time he also contributed to the problems of the theory of radiation and statistical mechanics.

In the 1920’s, Einstein embarked on the construction of unified field theories, although he continued to work on the probabilistic interpretation of quantum theory, and he persevered with this work in America. He contributed to statistical mechanics by his development of the quantum theory of a monatomic gas and he has also accomplished valuable work in connection with atomic transition probabilities and relativistic cosmology.

After his retirement he continued to work towards the unification of the basic concepts of physics, taking the opposite approach, geometrisation, to the majority of physicists.

Einstein’s researches are, of course, well chronicled and his more important works include Special Theory of Relativity (1905), Relativity (English translations, 1920 and 1950), General Theory of Relativity (1916), Investigations on Theory of Brownian Movement (1926), and The Evolution of Physics (1938). Among his non-scientific works, About Zionism (1930), Why War? (1933), My Philosophy (1934), and Out of My Later Years (1950) are perhaps the most important.

Albert Einstein received honorary doctorate degrees in science, medicine and philosophy from many European and American universities. During the 1920’s he lectured in Europe, America and the Far East, and he was awarded Fellowships or Memberships of all the leading scientific academies throughout the world. He gained numerous awards in recognition of his work, including the Copley Medal of the Royal Society of London in 1925, and the Franklin Medal of the Franklin Institute in 1935.

Einstein’s gifts inevitably resulted in his dwelling much in intellectual solitude and, for relaxation, music played an important part in his life. He married Mileva Maric in 1903 and they had a daughter and two sons; their marriage was dissolved in 1919 and in the same year he married his cousin, Elsa Löwenthal, who died in 1936. He died on April 18, 1955 at Princeton, New Jersey.

Sample Quotation Post was originally published by Md Nasir Uddin at MNUWORLD on January 08, 2014.

A Post with a Video

2014-01-07T00:00:00+00:00

Video embeds are responsive and scale with the width of the main content block with the help of FitVids.

Not sure if this only effects Kramdown or if it’s an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the <iframe> tags and remove allowfullscreen. Example below:

<iframe width="940" height="529" src="//www.youtube.com/embed/CQJByFp7H38?theme=light&amp;color=white" frameborder="0" allowfullscreen> </iframe>

A Post with a Video was originally published by Md Nasir Uddin at MNUWORLD on January 07, 2014.

Fancy Some Columns?

2014-01-07T00:00:00+00:00

Some Premium WordPress themes feature multi-column text entries, which is quite important for academics and engineers like myself for content presentation. HMFAYSAL OMEGA is the first Jekyll Theme to showcase multi-column text entries. HMFAYSAL OMEGA features four types of multi-column configuration, the first being the single column, the others are two, three and four columns. To insert a two-column text entry, simply enter this markup:

<div class="col-md-6">  
<p class="lead">Some Content Here for Column One</p>  
</div>  

<div class="col-md-6">  
<p class="lead">Some Content Here for Column Two</p>  
</div>
<br>

Which results in two columns with your content and looks like the following:

For three-column text entry, simply enter this markup:

<div class="col-md-4">  
<p class="lead">Some Content Here for Column One</p>  
</div>  

<div class="col-md-4">  
<p class="lead">Some Content Here for Column Two</p>  
</div>  

<div class="col-md-4">  
<p class="lead">Some Content Here for Column Three</p>  
</div> 
<br>

Which results in three columns with your content and looks like the following:

For four-column text entry, simply enter this markup:

<div class="col-md-3">  
<p class="lead">Some Content Here for Column One</p>  
</div>  

<div class="col-md-3">  
<p class="lead">Some Content Here for Column One</p>  
</div>  

<div class="col-md-3">  
<p class="lead">Some Content Here for Column One</p>  
</div>  

<div class="col-md-3">  
<p class="lead">Some Content Here for Column One</p>  
</div>
<br>

Which results in four columns with your content and looks like the following:

You can also have multiple layouts.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi condimentum, placerat eros sit amet, lacinia purus. Ut sed euismod mauris. Morbi vitae diam quis diam egestas scelerisque a a ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean sed nisi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed rutrum velit quis magna iaculis lacinia. Aenean

For any layout, make sure in the <div class="col-md-#"> the "col-md-#" numbers add up to 12. the You can include any type of elements between the <div> tags, like texts, images, videos etc.

Fancy Some Columns? was originally published by Md Nasir Uddin at MNUWORLD on January 07, 2014.

Sample Mathjax Post

2014-01-06T00:00:00+00:00

HMFAYSAL OMEGA theme supports both inline and displayed equations via MathJax. The theme keeps MathJax turned off by default to improve page load speed. MathJax can be turned on from the post’s Front Matter YAML. Simply put the following statement in the post’s Front Matter YAML:

mathjax: true

Here are some examples collected from the MathJax page:

The Lorenz Equations

$\begin{aligned} \dot{x} & = \sigma(y-x) \\ \dot{y} & = \rho x - y - xz \\ \dot{z} & = -\beta z + xy \end{aligned}$

The Cauchy-Schwarz Inequality

$\left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$

A Cross Product Formula

$\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix}$

The probability of getting (k) heads when flipping (n) coins is:

$P(E) = {n \choose k} p^k (1-p)^{ n-k}$

An Identity of Ramanujan

$\frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\ldots} } } }$

A Rogers-Ramanujan Identity

$1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for $|q|<1$}.$

Maxwell’s Equations

$\begin{align} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{align}$

Finally, while display equations look good for a page of samples, the ability to mix math and text in a paragraph is also important. This expression $(\sqrt{3x-1}+(1+x)^2)$ is an example of an inline equation. As you see, MathJax equations can be used this way as well, without unduly disturbing the spacing between lines.

In MathJax I use $$...$$ or (\begin{equation(*)}...\end{equation(*)} also works) for displayed equations and $....$ for inline equations. Take care of >,< and &, because they have special meanings in .html files. If your post/page is not displaying the equations properly, try to wrap the equations between {% raw %}...{% endraw %} tags.

Sample Mathjax Post was originally published by Md Nasir Uddin at MNUWORLD on January 06, 2014.

Sample Link Post

2014-01-05T00:00:00+00:00

HMFAYSAL OMEGA Theme now supports link posts, made famous by John Gruber. To activate just add link: http://url-you-want-linked to the post’s YAML front matter and you’re done.

Sample Link Post was originally published by Md Nasir Uddin at MNUWORLD on January 05, 2014.

Syntax Highlighting Post

2014-01-04T00:00:00+00:00

Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.¹

Pygments Code Blocks

To modify styling and highlight colors edit /assets/less/pygments.less and compile main.less with your favorite preprocessor. Or edit main.css if that’s your thing, the classes you want to modify all begin with .highlight.

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

<nav class="pagination" role="navigation">
    {% if page.previous %}
        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
    {% endif %}
    {% if page.next %}
        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
    {% endif %}
</nav><!-- /.pagination -->

module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

Standard Code Block

<nav class="pagination" role="navigation">
    {% if page.previous %}
        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
    {% endif %}
    {% if page.next %}
        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
    {% endif %}
</nav><!-- /.pagination -->

Fenced Code Blocks

To modify styling and highlight colors edit /assets/less/coderay.less and compile main.less with your favorite preprocessor. Or edit main.css if that’s your thing, the classes you want to modify all begin with .coderay. Line numbers and a few other things can be modified in _config.yml under coderay.

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

<nav class="pagination" role="navigation">
    {% if page.previous %}
        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
    {% endif %}
    {% if page.next %}
        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
    {% endif %}
</nav><!-- /.pagination -->

module Jekyll
  class TagIndex < Page
    def initialize(site, base, dir, tag)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'
      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
      self.data['tag'] = tag
      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
      self.data['title'] = "#{tag_title_prefix}#{tag}"
      self.data['description'] = "An archive of posts tagged #{tag}."
    end
  end
end

http://en.wikipedia.org/wiki/Syntax_highlighting ↩

Syntax Highlighting Post was originally published by Md Nasir Uddin at MNUWORLD on January 04, 2014.

A Post with Images

2014-01-03T00:00:00+00:00

Here are some examples of what a post with images might look like. If you want to display two or three images next to each other responsively use figure with the appropriate class. Images are responsive and are opened in a Magnific Popup lightbox if you link a larger image to the entry. Also if you link a larger image, the image thumbs uses CSS3 transitions to turn B&W and change back to color on mouse-hover. Each instance of figure is auto-numbered and displayed in the caption.

Figures (for images or video)

One Up

A day at Disneyland, Tokyo.

Two Up

Apply the half class like so to display two images side by side that share the same caption.

<figure class="half">
	<img src="/images/image-filename-1.jpg">
	<img src="/images/image-filename-2.jpg">
	<figcaption>Caption describing these two images.</figcaption>
</figure>

And you’ll get something that looks like this:

Two images.

Three Up

Apply the third class like so to display three images side by side that share the same caption.

<figure class="third">
	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a>
	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a>
	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg"></a>
	<figcaption>Caption describing these three images.</figcaption>
</figure>

And you’ll get something that looks like this:

Three images.

A Post with Images was originally published by Md Nasir Uddin at MNUWORLD on January 03, 2014.

Testing Readability with a Bunch of Text

2014-01-01T00:00:00+00:00

Portland in shoreditch Vice, labore typewriter pariatur hoodie fap sartorial Austin. Pinterest literally occupy Schlitz forage. Odio ad blue bottle vinyl, 90’s narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney’s. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.

Vero laborum commodo occupy. Semiotics voluptate mumblecore pug. Cosby sweater ullamco quinoa ennui assumenda, sapiente occupy delectus lo-fi. Ea fashion axe Marfa cillum aliquip. Retro Bushwick keytar cliche. Before they sold out sustainable gastropub Marfa readymade, ethical Williamsburg skateboard brunch qui consectetur gentrify semiotics. Mustache cillum irony, fingerstache magna pour-over keffiyeh tousled selfies.

Cupidatat 90’s lo-fi authentic try-hard

In pug Portland incididunt mlkshk put a bird on it vinyl quinoa. Terry Richardson shabby chic +1, scenester Tonx excepteur tempor fugiat voluptate fingerstache aliquip nisi next level. Farm-to-table hashtag Truffaut, Odd Future ex meggings gentrify single-origin coffee try-hard 90’s.

Sartorial hoodie
Labore viral forage
Tote bag selvage
DIY exercitation et id ugh tumblr church-key

Incididunt umami sriracha, ethical fugiat VHS ex assumenda yr irure direct trade. Marfa Truffaut bicycle rights, kitsch placeat Etsy kogi asymmetrical. Beard locavore flexitarian, kitsch photo booth hoodie plaid ethical readymade leggings yr.

Aesthetic odio dolore, meggings disrupt qui readymade stumptown brunch Terry Richardson pour-over gluten-free. Banksy american apparel in selfies, biodiesel flexitarian organic meh wolf quinoa gentrify banjo kogi. Readymade tofu ex, scenester dolor umami fingerstache occaecat fashion axe Carles jean shorts minim. Keffiyeh fashion axe nisi Godard mlkshk dolore. Lomo you probably haven’t heard of them eu non, Odd Future Truffaut pug keytar meggings McSweeney’s Pinterest cred. Etsy literally aute esse, eu bicycle rights qui meggings fanny pack. Gentrify leggings pug flannel duis.

Forage occaecat cardigan qui

Fashion axe hella gastropub lo-fi kogi 90’s aliquip +1 veniam delectus tousled. Cred sriracha locavore gastropub kale chips, iPhone mollit sartorial. Anim dolore 8-bit, pork belly dolor photo booth aute flannel small batch. Dolor disrupt ennui, tattooed whatever salvia Banksy sartorial roof party selfies raw denim sint meh pour-over. Ennui eu cardigan sint, gentrify iPhone cornhole.

Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.

Tote bag asymmetrical elit sunt. Occaecat authentic Marfa, hella McSweeney’s next level irure veniam master cleanse. Sed hoodie letterpress artisan wolf leggings, 3 wolf moon commodo ullamco. Anim occupy ea labore Terry Richardson. Tofu ex master cleanse in whatever pitchfork banh mi, occupy fugiat fanny pack Austin authentic. Magna fugiat 3 wolf moon, labore McSweeney’s sustainable vero consectetur. Gluten-free disrupt enim, aesthetic fugiat jean shorts trust fund keffiyeh magna try-hard.

Hoodie Duis

Actually salvia consectetur, hoodie duis lomo YOLO sunt sriracha. Aute pop-up brunch farm-to-table odio, salvia irure occaecat. Sriracha small batch literally skateboard. Echo Park nihil hoodie, aliquip forage artisan laboris. Trust fund reprehenderit nulla locavore. Stumptown raw denim kitsch, keffiyeh nulla twee dreamcatcher fanny pack ullamco 90’s pop-up est culpa farm-to-table. Selfies 8-bit do pug odio.

Thundercats Ho!

Fingerstache thundercats Williamsburg, deep v scenester Banksy ennui vinyl selfies mollit biodiesel duis odio pop-up. Banksy 3 wolf moon try-hard, sapiente enim stumptown deep v ad letterpress. Squid beard brunch, exercitation raw denim yr sint direct trade. Raw denim narwhal id, flannel DIY McSweeney’s seitan. Letterpress artisan bespoke accusamus, meggings laboris consequat Truffaut qui in seitan. Sustainable cornhole Schlitz, twee Cosby sweater banh mi deep v forage letterpress flannel whatever keffiyeh. Sartorial cred irure, semiotics ethical sed blue bottle nihil letterpress.

Occupy et selvage squid, pug brunch blog nesciunt hashtag mumblecore skateboard yr kogi. Ugh small batch swag four loko. Fap post-ironic qui tote bag farm-to-table american apparel scenester keffiyeh vero, swag non pour-over gentrify authentic pitchfork. Schlitz scenester lo-fi voluptate, tote bag irony bicycle rights pariatur vero Vice freegan wayfarers exercitation nisi shoreditch. Chambray tofu vero sed. Street art swag literally leggings, Cosby sweater mixtape PBR lomo Banksy non in pitchfork ennui McSweeney’s selfies. Odd Future Banksy non authentic.

Aliquip enim artisan dolor post-ironic. Pug tote bag Marfa, deserunt pour-over Portland wolf eu odio intelligentsia american apparel ugh ea. Sunt viral et, 3 wolf moon gastropub pug id. Id fashion axe est typewriter, mlkshk Portland art party aute brunch. Sint pork belly Cosby sweater, deep v mumblecore kitsch american apparel. Try-hard direct trade tumblr sint skateboard. Adipisicing bitters excepteur biodiesel, pickled gastropub aute veniam.

Testing Readability with a Bunch of Text was originally published by Md Nasir Uddin at MNUWORLD on January 01, 2014.

Installing Jekyll on Windows

2013-12-31T00:00:00+00:00

Welcome to HMFAYSAL OMEGA Theme for Jekyll. In this tutorial, I will show you how you can install and get started with Jekyll in 10 easy steps. While Jekyll itself is very easy to get started with, Jekyll has several dependencies which needed to be installed in order for Jekyll to work properly. The process of installing these requirements can be a little frustrating on any system, and it can be a tad bit more frustrating if you own a Windows PC. In this article, I will provide step-by-step details about installing Jekyll on windows and all its dependencies properly and will try to elaborate on the errors that one might encounter during the steps.

Step 1: Installing Ruby
Step 2: Installing Jekyll Gem
Step 3: Enabling Syntax Highlighting
- Step 4: Re-installing Pygments.rb
Step 5: Initializing a new blog
Step 6: Knowing the _config.yml file
Step 7: Knowing the Jekyll folder structure
Step 8: Adding new posts/Modifying posts
Step 9: Compiling the site for deployment
Step 10: Deployment

Step 1: Installing Ruby

Jekyll is a Ruby-Gem. So obviously you’d need Ruby to be installed in your Windows PC, you’d also need the Ruby DevKit in your system too. There is an easy way to install Ruby on Windows, its called the RubyInstaller. So head over to RubyInstaller webpage and grab of copy of the latest Ruby. Select x86 or x64 based on your PC configuration. Then scroll down and to find the corresponding DevKit for your Ruby and download that too. Double click on the RubyInstaller to begin installing Ruby. There are a few caveats here. The directory name (string) should not have any spaces(whitespaces), though numbers, dash and underscores are acceptable. Also check Add Ruby to Path to make your life easier. Finish installing Ruby, then click on the DevKit extractor. Extract it to some convenient location like ~ C:. Finally open up Command Prompt and change your directory to the extracted DevKit folder. Typing the following commands will initialize the Ruby Installation:

~ $ ruby dk.rb init
~ $ ruby dk.rb install

Step 2: Installing Jekyll Gem

Now that Ruby is installed, you can proceed to install Jekyll Gem. To do so, run the following Command:

~ $ gem install jekyll

Wait for a while for Jekyll to get downloaded and installed. Your command window might not show anything for upto half a minute as the Ruby-Gem server might be busy. Have a little patience, soon the download will start and Jekyll will download itself and all of the required gems in your system. In another note, the latest version of Jekyll is quite buggy. If you face any trouble in future running Jekyll, you can run the following statements to revert back to the last known stable version of Jekyll(1.2.1):

~ $ gem uninstall jekyll
~ $ gem install jekyll --version(="1.2.1")

Step 3: Enabling Syntax Highlighting

If you’re an engineer or a mathematician, occasionally you’d want to post code snippets in your blog. Jekyll utilizes a Gem called Pygments.rb to highlight your code snippets, which does not require any Javascript or client-side computation to show the Syntax Highlighting. Pygments.rb is dependent on Python. If you don’t have Python installed in your system, go the Python Download page, and download Python 2.7.x. Install it and make sure it has been added to the PATH. If you opt for not using syntax highlighting or use client-side implementation, make sure to turn pygments off by explicitly calling it off in the _config.yml file.

pygments: false

Step 4: Re-installing Pygments.rb

The latest version of Pygments.rb(0.5.4) seems to have trouble when compiling with Jekyll. Now the latest version of Pygments.rb will be automatically downloaded in Step 2 along with Jekyll. To revert back to the last known stable version of Pygments.rb(0.5.0) simply run the following commands:

~ $ gem uninstall pygments.rb
~ $ gem install pygments.rb --version(="0.5.0")

Step 5: Initializing a new blog

By this step, you’ll have all the necessary gems to initialize a new blog. In my last post, I posted the codes to start a new blog. I will post them here again, simply type in the following commands:

Open up a browser window, navigate to http://localhost:4000 to see your site. In the CMD, press CTRL + C to stop the server.

~ $ jekyll new my-awesome-site
~ $ cd my-awesome-site
~ $ jekyll serve

Step 6: Knowing the _config.yml file

The _config.yml file in the my-awesome-site folder contains all the essential information about your new blog. When you run any Jekyll commands, the first file it reads is the _config.yml file, then proceeds to compile the site according to the instructions provided in the _config.yml file. A very basic _config.yml file would contain the following:

name: Your New Jekyll Site
markdown: redcarpet
pygments: true

You can add many more statements to make you Jekyll site more versatile and user friendly. I will discuss them in another post.

Step 7: Knowing the Jekyll folder structure

Jekyll utilizes a certain folder structure to store and compile the site. When you first initialize a new site, your new site structure will look something like the following:

my-awesome-site/
|   .gitignore
|   index.html
|   _config.yml
|
+---css
|       main.css
|       syntax.css
|
+---_layouts
|       default.html
|       post.html
|
+---_posts
        2013-12-21-welcome-to-jekyll.markdown

The folder names that proceed with an underscore(_) tells Jekyll not to directly include those folders in the final compilation. Like the css folder that does not start with an underscore will be directly copied in the final compilation. This method helps to distinguish between the development environment and the production environment.

Step 8: Adding new posts/Modifying posts

This is most probably the most essential part that gives Jekyll its name. Jekyll is a blog aware static site generator, and without the blog part it would be useless. To add a new post, simply navigate to the _posts/ directory and create a new file with this structure YYYY-MM-DD-Title-Of-Your-New-Post.markdown. You can have the file in different extensions as per your choice, like *.md, *.textile etc. If you fail to name the file in this structure, Jekyll will ignore that post in the final compilation. Open up your newly created file, and fill out the Front matter YAML. This enables Jekyll to properly recognize the post and get essential information regarding the post, like its categories and tags. A simple post file should have the following Front matter YAML embedded on top:

---
layout: post
title:  "Title of the Post"
date:   2013-12-21 15:47:09 #YYYY-MM-DD HH:MM:SS
categories: articles
---
Content goes here

The lines in between the triple dashes (—) provide the essential information about that post to the markdown/textile parser during Jekyll compilation.

Step 9: Compiling the site for deployment

After you’ve added one or few posts and you’re feeling ready to offload the site to a deployment environment, run the ~ $ jekyll serve command to see you site live at http://localhost:4000. Additionally you can run ~ $ jekyll serve -w to view the site live while you add/edit something and see the changes reflected instantly on the local server. When you’re quite happy with the results, press CTRL + C to stop the local server and run the following command:

~ $ jekyll build

This will generate the site in the _site/ directory inside your Jekyll site folder, which is ready for deployment.

Step 10: Deployment

Deployment is painless with Jekyll. At this step, you can simply copy over the contents of the _site/ folder to your web-hosting over FTP. There are other novel approaches of deployment using Git and SSH, but that’s a matter of discussion for another day. Jekyll is a highly flexible platform, and it lets you do things in your way, a feature no other platforms can even offer.

If you’ve enjoyed this post, feel free to like it or share it on facebook, or give me a shoutout in twitter @hmfaysal

Installing Jekyll on Windows was originally published by Md Nasir Uddin at MNUWORLD on December 31, 2013.

Post with Large Feature Image and Text

2013-06-30T00:00:00-00:00

This is a sample post with a large feature image[^1] up top and tons of text. Odio ad blue bottle vinyl, 90’s narwhal commodo bitters pour-over nostrud. Ugh est hashtag in, fingerstache adipisicing laboris esse Pinterest shabby chic Portland. Shoreditch bicycle rights anim, flexitarian laboris put a bird on it vinyl cupidatat narwhal. Hashtag artisan skateboard, flannel Bushwick nesciunt salvia aute fixie do plaid post-ironic dolor McSweeney’s. Cliche pour-over chambray nulla four loko skateboard sapiente hashtag.

Cupidatat 90’s lo-fi authentic try-hard

Sartorial hoodie
Labore viral forage
Tote bag selvage
DIY exercitation et id ugh tumblr church-key

Forage occaecat cardigan qui

Whatever velit occaecat quis deserunt gastropub, leggings elit tousled roof party 3 wolf moon kogi pug blue bottle ea. Fashion axe shabby chic Austin quinoa pickled laborum bitters next level, disrupt deep v accusamus non fingerstache.

Hoodie Duis

Thundercats Ho!

Post with Large Feature Image and Text was originally published by Md Nasir Uddin at MNUWORLD on December 30, 2013.

MNUWORLD

First Commit

ABOUT HMFAYSAL OMEGA

Twitter Bootstrap 3

Option to set Parallax featured image that wraps your post in header and footer

Variable templates for articles, link, quotation and status updates

Responsive images and Magnific Popup Lightbox

Plugin-free/Github Pages Deployment Ready

Read time Calculator: Calculation of post read-time based on word count

Simple search that overlays results based on post title

Display mathematical equations beautifully via MathJax

CSS3 transitions and SVG graphics for better performance

Ability to turn of animations in _config.yml

Readable typography to make your words shine

Google Fonts

Other features

Designed by an Electrical Engineer

Questions?

Requests?

License

Sample Status Post

Theme Elements

ELEMENTS

LISTS

LINKS

WHAT ABOUT IMAGES?

AND VIDEOS?

EQUATIONS

THE LOGO

ICONS

QUOTING

WORKING WITH CODE

READY FOR A BREAK?

FANCY SOME COLUMNS?

BUTTONS

ADVANCED USAGE

Sample Gallery Post

Sample Quotation Post

A Post with a Video

Fancy Some Columns?

Sample Mathjax Post

Sample Link Post

Syntax Highlighting Post

Pygments Code Blocks

Standard Code Block

Fenced Code Blocks

A Post with Images

Figures (for images or video)

One Up

Two Up

Three Up

Testing Readability with a Bunch of Text

Cupidatat 90’s lo-fi authentic try-hard

Forage occaecat cardigan qui

Hoodie Duis

Thundercats Ho!

Installing Jekyll on Windows

Step 1: Installing Ruby

Step 2: Installing Jekyll Gem

Step 3: Enabling Syntax Highlighting

Step 4: Re-installing Pygments.rb

Step 5: Initializing a new blog

Step 6: Knowing the _config.yml file

Step 7: Knowing the Jekyll folder structure

Step 8: Adding new posts/Modifying posts

Step 9: Compiling the site for deployment

Step 10: Deployment

Post with Large Feature Image and Text

Cupidatat 90’s lo-fi authentic try-hard

Forage occaecat cardigan qui

Hoodie Duis

Thundercats Ho!