Understanding Middleman - the static site generator for faster prototyping - benfrain.com - blog of technology writer and web designer Ben Frain.
To get something from this, you’re probably a front-end focused coder (HTML/CSS) with absolutely zero Ruby knowledge and only cursory knowledge of the command line (I’m using OS X so sorry Windows users for the bits that make no sense). It will help a lot if you are already familiar with Sass and Compass. Do you create lots of mockups (HTML/CSS templates) for sites/apps? If so, perhaps at present you create flat HTML/CSS/JS pages (if a corporate site, imagine ‘home page’, ‘about -us’, contact-us’, ‘product1’, ‘product 2’ and on and on). This practice is fine until after creating 10–15 pages something common to all pages needs to change (perhaps the navigation for instance). There are a few ways to solve this problem, PHP or similar can do ‘includes’ (allowing you to have a header.php, footer.php for example and then include them on the current page). Static site generators are becoming more and more popular. Middleman is one such ‘static site generator’. gem install middleman The yield or:
reveal.js - The HTML Presentation Framework
Hacking up sites with Middleman | Miscellanea
TL;DR - I’m going to walk through how I rebuilt this blog using a static site generator. In the first half I walk through my decision for moving to a static site. You can skip down to the tech talk if you want. When re-designing/building my portfolio site in 2007 I did the tried and true geek thing: I hacked up my own custom CMS using CakePHP backed by MySQL. It was pretty standard stuff, complete with a blog engine modeled after WordPress. Putting it together was a great learning experience, similar to the “15 minute blog” videos from the Rails heyday of 2005-2007. It was also complete overkill. I got 99 reasons… Speed: Nothing loads faster than static HTML. To be honest tooling was the most important. Nanoc (Ruby) Jekyll (Ruby) Hyde (Python) Hakyll (Haskell) Phrozn (PHP) And many, many more… I settled on Middleman, which is a self-contained Ruby Gem, because it’s written in Ruby and relies on Sinatra, both of which I already have experience with. Hackety hack hack Philosophy Re-usability
S5: An Introduction
It's a Simple Standards-based Slide Show SystemOne XHTML document provides all of the slide show's contentCSS handles the layout and look of the slidesJavaScript handles the dynamic aspects of the showThat's all there is to it! Opera 4 introduced Opera Show, a projection-mode style sheet technologyAllows a single XHTML document to be turned into a PowerPoint-like slide showAdding screen and print style sheets allows for multi-medium views of a single documentHighly efficient, but highly browser centric... When Opera 7.5 for OS X came out, the banner ads persisted in projection modeTantek Çelik created a JavaScript-driven slide show technique that worked on multiple browsers Unfortunately, it required each slide to be ID'ed ahead of time, making additions and rearrangement difficultNavigation was only linear; no way to jump to an arbitrary slideThere was also no facility to "switch off" the slide show styles short of killing all CSSMotive and opportunity combined to point the way...
Building a Middleman Blog | Design by Joel
HTTP KeepAlive Considered Harmful | mockyblog
Isn’t that a wonderfully alarmist title? A better one would be “HTTP KeepAlive harmful for modern high-traffic low-latency low-footprint websites”. But then you’d have fallen asleep by now, wouldn’t you. This was written to expand on an idea I touched on in the last piece about webservers – the idea that when a browser on a modern PC takes 250 milliseconds to fetch a web page, hanging around for a further thirty seconds just in case another request gets made is just plain selfish. What’s All This KeepAlive Nonsense? Remember when Internet Cafes weren't full of tramps? We’ll start with a history lesson. After finding your server the conversation went something like this: *START* Client connects to port 80 on server. With such a powerful and simple concept it’s easy to see how the web caught on. As the web exploded it became evident that HTTP/1.0 had a few limitations. Virtual Hosting – so more than one domain could be served from a single server. HTTP/1.1 made a big difference. Footnotes
Twitter Bootstrap navbar tutorial
<<PreviousNext>> Using Twitter Bootstrap, you may create static navbar. In this tutorial you will see how to do that. Note: An example of Navbar with Twitter Bootstrap 3 is added. We will take an HTML5 page with content and see how to add a top navigation bar into it. And Here is the HTML5 code of the page without any content. <! <! To create the basic structure to contain the navigations, you may insert the following code right after the <body> tag into the HTML5 code shown above: Now, let's replace the <! <ul class="nav"> <li class="active"> <a class="brand" href="#">w3resource</a> </li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> <ul class="nav"><li class="active"><a class="brand" href="#">w3resource</a></li><li><a href="#">About</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Contact</a></li></ul> Help us to serve you with Better content. Wish to create a dropdown menu now? And this is the final code <! <!
How to Create An Amazing Blog About Page
I’ve said it before, and I’ll say it again… The most important page on your blog is your about page. And if you don’t give that page the love it deserves, you’re losing fans—and customers—hand-over-fist. Dramatic, I know, but… Here’s Why About Pages Are So Important If you fire up your Google Analytics account, you’ll find that your About page is one of your most highly-trafficked pages. It makes sense, too. Now ask yourself this: When’s the last time you updated your about page? If you’re like most bloggers, you’ll likely say ages ago. I know I haven’t updated mine… and after looking at my stats… it appears my about page is the 5th most visited page on my site. And then, in some cases, there are blogs that don’t even have about pages. (Yes, I know DIYthemes falls into that category, but stand by. But here’s the deal: You can spend hours creating new content, and hope that content generates some traffic… …Or you can simply optimize your about page. How to Create an Amazing About Page One More Thing…
A visual guide to Webpacker - rossta.net
Confused about how Webpacker works in Rails? Let's unpack it with some diagrams. First, we'll take a look at the "classic" way of bundling assets with Rails: the Rails asset pipeline. Let's see how things look when requests are served with the Rails asset pipeline in development. Struggling with webpack and Webpacker? HTML request with the asset pipeline With the asset pipeline, when an HTML request is processed (1), bundling takes place within your Rails server (2). Note: Please consider the diagrams in this post as approximations of how the pieces fit together. Asset request with the asset pipeline As the browser parses the HTML response and finds that script tag, it must make an additional request to fetch the linked JavaScript resource from your Rails server. Good so far? Understanding Webpacker With Webpacker, things work differently. Rails needs some "glue" to help it communicate with webpack. For the purpose of illustration, we'll focus on how Webpacker works in development. Dev server
