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:
6 Plugin for Impressive HTML Slideshow And Presentation - Javascript Making a presentation with HTML, CSS and Javascript is no longer an impossible task. With the development of CSS3 and support on most modern browsers, the slide transition no longer limited to fading, sliding, blinding. It allows us to achieve cool effects such as rotation, 3D transform and transition. The following is 6 javascript plugins that allow you to do that. Some potentially can be a good script to make your own portfolio website. I particularly impressed by impress.js. You will need latest browsers that support CSS3 3D transform. impress.js It’s a presentation tool inspired by the idea behind prezi.com and based on the power of CSS3 transform and transition in modern browsers. About Kevin Kevin Liew is a web designer and developer and keen on contributing to the web development industry. CSS4 Sneak Peak
No More Powerpoint I Have Impress.js In this tutorial you will learn how you don't need to use the old powerpoint presentation software now we have Impress.js. What Is Impress.JS Impress.js is a presentation framework which uses all the new features of CSS3 transforms and CSS transitions to create unique presentations. The idea of Impress.js came from viewing new unique presentations from prezi.com. Lately on Github Impress.js has become very popular and I believe you will start seeing many companies create presentations by using this framework. Impress.js Demos The best way to understand what Impress.js can do is to see some of the presentations that have already been created using the framework. Here is a list of presentations for you to enjoy, they are all much better than using the boring old powerpoint presentations. Official Impress.js Demo CSS 3D transforms CSS 3D Transforms What The Heck Is Responsive Web Design? What The Heck Is Responsive Web Design? Digibury Digibury Wakame Wakame Download
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
Slideshow with jmpress.js Today we will create a slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides. View demo Download source You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The icons used in the demo is by Artcore Illustration and they are licensed under theCreative Commons BY-NC-ND 3.0 license. So, let’s start! The Markup We will have a main container which is a section with the class jms-slideshow. Let’s take care of the style. The CSS Since we want to make the slideshow responsive, we will give the main container a percentage width, with some min and max values: The next wrapper is dynamically added, and this will be the visible slideshow wrapper: The background color classes will be applied to the previous wrapper. The steps will have the following style: Inactive steps will have 0 opacity. The inner parts of the slides will have the following style:
Oublions Powerpoint avec Reveal.js Pour se passer de Powerpoint, il y a Impress de LibreOffice bien sûr. Mais il existe aussi de nombreuses solutions web issues du trio gagnant : JavaScript, HTML5 et CSS3). Nous avons choisi avec cette traduction de mettre en valeur Reveal.js, avec une méthode de geek pour assurer l’archivage et retrouver facilement les différentes versions de vos présentations. Enseigner avec l’application de présentation libre Reveal.js Teaching with open source presentation service Reveal.js Luis Ibanez - 30 octobre 2013 - OpenSource.com(Traduction : Penguin, Genma, audionuma, cyrille, Omegax, Garburst) OpenSource.com a un programme pour les modérateurs de communautés, et je suis fier d’en faire partie. « C’est ce que les gens cool utilisent »dit-elle. Un rapide détour par la page d’exemples et de présentations permet de convaincre les plus sceptiques. Les principales caractéristiques qui sortent du lot sont : Pour ceux à qui écrire du code HTML plaît, la façon la plus facile de commencer est la suivante :
Building a Middleman Blog | Design by Joel Using Impress.js : Tony Thomas March 9, 2012 11:08 am Published by admin Update II: I updated the init method needed in the HTML. Update: There is at least one WYSIWYG impress.js editor available now. I came across Impress.js a while back and I was, well, impressed. Right now you can only learn how to use Impress.js by reading the comments and experimenting. The first thing is that you have to have a story to tell. Assuming you know what you want to say, let’s move on. First you’ll need to download the JavaScript. The slides need to go into an element with the id of “impress.” Options Now things get interesting. You can give you slides ids so you can link to a particular slide. The next dimension we can control is scale: Note the data-scale attribute above. We can also control rotation: For this, use data-rotate. And now we go 3d: The data-z attribute above places this slide 3000 pixels away along the z-index. Finally, we can control rotation along axes: Those are the options. Similar Posts:
Presentations With Reveal.js and HTML5: Better Than PowerPoint Oct 10 2012 Presentations are PowerPoint, you say? Well, think again. Most people I know start yawning as soon as PowerPoint gets mentioned. You don’t want your clients to yawn. Reveal.js: The demo presentation Reveal.js consists of one single JavaScript file and two style sheets. Slide Markup via HTML5 The markup of the presentation slides ist done by using HTML5 elements of the type SECTION. Inside each section arbitrary content is allowed. Pressing ESC shows an index of all slides from where you can target each slide individually. Index of the presentation demo Reveal.js: Extended Navigation Possible If you’d like to enable mouse navigation in addition to keyboard control, you can do so by implementing a small operating element into your presentation. In long presentations you might like to have a progress bar shown, just to make sure you don’t get lost or bend your speaking time too much. Reveal.js: Capable Of Markdown This one is for me. (dpe) Homepage
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
reveal.js - The HTML Presentation Framework 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