Thursday, April 2, 2015

jQuery Animated Dropdown Mega Menu Plugin

An Animated Dropdown Mega Menu a jquery plugin that uses Animate CSS/HoverIntent with CSS only fallback.



  • Javascript Based menu with CSS only fallback

  • Uses CSS3 animation when available (fallback to js)

  • Works in IE7+


The post jQuery Animated Dropdown Mega Menu Plugin appeared first on jQuery Rain.




by Admin via jQuery Rain

Printemps du Polar


Printemps du Polar by Arté

by via Awwwards - Sites of the day

Wednesday, April 1, 2015

GBR Graphics Business Registered

GBR is a brand identity, creative, web design and graphic design studio based in Venice and Milan. We work for clients in Italy and throughout the world.




by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

Getting Started with Wintersmith: A Node.js-based Static Site Generator

I've spoken and written on the topic of static site generators a lot lately. Generally speaking, I tend to recommend going with Jekyll as the most stable and feature-rich option for building static sites available today. However, the fact that Jekyll is Ruby-based can be a deal-breaker for some developers, especially those not familiar with Ruby. The single most frequent question I get is: "Is there a good option based upon JavaScript and available via npm?"


In this article, we'll cover one such option, Wintersmith. Wintersmith is a robust static site generator with one biggest impediment being (in my opinion): a lack of detailed documentation. Hopefully this article will help anyone interested in a JavaScript-based option available via npm to get started building static sites with Wintersmith.


The Sample Site


For this article, we'll use the sample site I built and that you can find at my Static Site Samples repository. The sample is an Adventure Time! fan site that looks like the image below.


Sample Adventure Time! Site

The goal of the project was to rebuild this site using a number of static site generators to compare them. While the site is intentionally simple, it contains a number of key features that we'll look at in Wintersmith:



  • Custom global metadata - the ability to set custom metadata global to the site that can be accessed and used in templates;

  • Custom post metadata - the ability to set custom metadata on a per post basis that can be accessed when listing the post or in the display of the post itself;

  • Data sets - the ability to add content that is not a post or page, but rather a custom data type (in the case of this sample that is the character data).


All of the character data, content and images used in the sample are from the Adventure Time! wiki. The design was based upon a free template from HTML5UP.


How to Set up Wintersmith


One of the benefits of Wintersmith being based on Node.js and npm is that the installation process is super simple. You have to execute the command below to install it (note: the sudo isn't necessary on Windows):


Continue reading %Getting Started with Wintersmith: A Node.js-based Static Site Generator%




by Brian Rinaldi via SitePoint

7 Ways to Optimize Jenkins

This article was sponsored by *CloudBee*s. Thank you for supporting the sponsors who make SitePoint possible!


The Jenkins Logo

Jenkins is a great tool for continuous integration and continuous delivery. In previous articles we’ve learned how to set up Jenkins for quality assurance and looked at one particularly useful plugin for supercharging your processes. In this article, we’ll guide you through seven ways to make sure you use Jenkins efficiently.


This article is based on a presentation given by Jenkins contributor Andrew Bayer at a 2014 Jenkins User Conference and is adapted here with permission.


1. Make sure Jenkins is stable and working correctly


Jenkins releases new versions frequently. It’s recommended to always use the latest Long-Term Support (LTS) release and avoid the updates in-between. The LTS release is tested by the Jenkins project.


The same kind of rule also applies to plugins. They don’t have LTS releases, but many updates can occur. In general you should stick to the rule: If it’s working, don’t update it. New updates can make features unstable. Furthermore, any given plugin may behave differently than expected.


Also make sure you create backups of your Jenkins server. You could back-up all data, but that will cost you a lot of time and resources. Instead, you could decide to only back-up your config files through scripts like this.


2. Don’t fill Jenkins with bloat


There are a couple of simple things you can do to avoid being the owner of a bloated Jenkins installation:




  1. If you have a lot of teams or projects, you might create multiple Jenkins masters. For example, you could create a master for PHP projects and a separate one for Android projects. Doing this will ensure that changes don’t affect all projects and that you have only the plugins needed on a specific master for each project.




  2. Break your jobs into multiple smaller jobs. Nothing is more annoying than a long build failing somewhere at the end. If you break your jobs into smaller jobs, you can easily restart one if it fails. The Workflow plugin is useful for this purpose. If you’re interested in a more in-depth explanation of the Workflow plugin, have a look at our recent product review.




3. Automate Jenkins


Jenkins comes with an integrated script console, allowing you to execute commands on the server. It’s a handy tool to debug Jenkins or to find information you need.


An interesting plugin is the Scriptler plugin. With this plugin, you can save your favorite scripts for later reuse. You can also find an online script catalog here with predefined scripts like clearing the job queue.


For each build, you can also write your own build steps in the Groovy language. This gives you more flexibility within your job, but it also means you’ll need to be more careful, because it gives you more control. You can also run scripts from the Scriptler catalog as a build step.


If you have a lot of projects, consider generating jobs automatically. Jenkins comes with a great REST API and a CLI tool to create new jobs. You can also dive into plugins like Workflow which we discussed recently to automate certain parts of the process, or the Cloudbees Templates plugin that let’s you easily generate jobs from a pre-defined job skeleton.


4. Carefully consider your plugins


Jenkins has a rich collection of plugins; it’s easy to get lost in the huge number that are available. It’s important to decide if you really need a given plugin. Plugins can potentially break functionality within Jenkins in places you might not expect. They can also slow down your build jobs. Make sure to pick the right plugin for the right job. Don’t just install them if you don’t really need them.


Keep track of your list of plugins and uninstall any plugins which are no longer used. This will help to keep Jenkins in good shape and free of bloat.


Also remember that some plugins come with global configuration settings. Don’t forget to check the global configuration after installing a plugin, as the default settings may not be what you want and could lead to unexpected behavior.


Continue reading %7 Ways to Optimize Jenkins%




by Peter Nijssen via SitePoint

Responsive Sprite Animations with ImageMagick and GreenSock

CSS Sprites are not new. Since being popularized on A List Apart in 2004, the humble sprite has become a staple technique in many a web developer’s toolkit. But while the speed benefits afforded by sprites are well-understood, their uses in modern web animation are rarely discussed. The principle remains the same: combine multiple images into a single ‘master’ graphic, of which only selected portions are displayed at a time.


In this article, we’ll explore an easy way to create responsive CSS sprite animations that are lightweight, mobile-friendly, and even interactive. You don’t need any special graphics software, just a bit of CSS and JavaScript know-how. Let’s get started.


Building A Sprite


Sprites originate from the world of video games, so we’ll pay tribute to their heritage and animate Ryu from Street Fighter. Needless to say, all artwork belongs to Capcom.


We need to combine each frame of our animation into a single image. There are dozens of tools out there to aid with the creation of sprites, many of which will even generate an accompanying stylesheet for you. Compass’s built-in spriting features are immensely powerful, and SpritePad is a good example of a web-based generator. For our purposes, however, a simple command-line approach works fine.


ImageMagick, the ‘swiss army knife’ of image processing, is a free and open-source image manipulation tool that’s perfect for automating tasks that could become laborious, such as combining images. ImageMagick is also available for just about every operating system. Mac users can install it via Homebrew, Windows adherents can download an executable installer from the official website, and Linux devotees probably don’t need me to explain anything.


Save the identically-sized frames of your animation in a folder as a sequence of PNGs. Break out a command-line terminal, navigate (cd) to the directory where your images are saved, and execute the following command:


[code language="bash"] convert *.png -append result-sprite.png [/code]

This command instructs ImageMagick to vertically concatenate all the .PNG files in our directory (since ‘*’ is essentially a wildcard) into one complete sprite called “result-sprite.png”. This is the graphic that we will apply as a background-image in CSS to the element we want to animate, altering its position to cycle through each frame in sequence.


Continue reading %Responsive Sprite Animations with ImageMagick and GreenSock%




by Tom Bennet via SitePoint

Build a Node.js-powered Chatroom Web App: Express and Azure

This Node.js tutorial series will help you build a Node.js-powered real-time chatroom web app fully deployed in the cloud. In this series, you’ll learn how to setup Node.js on your Windows machine (or just learn the concepts if you’re on Mac), how to develop a web frontend with Express, how to deploy a node express apps to Azure, how to use Socket.IO to add a real-time layer, and how to deploy it all together. This is a beginner- to intermediate-level article – you’re expected to know HTML5 and JavaScript.



Part 1 ­- Introduction to Node.js


Part 2 - Welcome to Express with Node.js and Azure


Part 3 - Building a Backend with Node, Mongo and Socket.IO


Part 4 – Building a Chatroom UI with Bootstrap


Part 5 - Connecting the Chatroom with WebSockets


Part 6 – The Finale and Debugging Remote Node Apps



Part 2: Welcome to Express with Node.js and Azure


Welcome to Part 2 of the hands-on Node.js tutorial series: Build a Node.js-powered chatroom web app.


In this installment, I will show you how to start a new Express-based Node project and deploy it to Azure.


What is Express?


Express is a minimal, open source and flexible Node.js web app framework designed to make developing websites, web apps and APIs much easier.


Why use Express?


Express helps you respond to HTTP requests with route support so that you may write responses to specific URLs. Express supports multiple templating engines to simplify generating HTTP responses.


You will want to make sure Node.js is properly installed and ready. See part 1 of this tutorial series: Introduction to Node.js.


Let’s Get Started


Starting a new Node.js project is fairly straightforward.




  1. Start Visual Studio. On the File menu, click New , and then click Project.


    Getting Started


  2. You will want to go to Installed > Templates > JavaScript menu item on the left and select Basic Windows Azure Express Application on the right. Choose a location and name for your project and click OK.


    New Project Page


  3. A message will notify you that dependencies defined in package.json need to be installed using npm the package manager. Take a look at an explanation of npm here.


    npm Download Window


  4. A project will be generated that includes a file called app.js. We will start there.




Explanation of app.js


[code language="js"] // /** * Module dependencies. */ var express = require('express'); var routes = require('./routes'); var user = require('./routes/user'); var http = require('http'); var path = require('path'); var app = express(); // all environments app.set('port', process.env.PORT || 3000); app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade'); app.use(express.favicon()); app.use(express.logger('dev')); app.use(express.json()); app.use(express.urlencoded()); app.use(express.methodOverride()); app.use(app.router); app.use(require('stylus').middleware(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'public'))); // development only if ('development' == app.get('env')) { app.use(express.errorHandler()); } app.get('/', routes.index); app.get('/users', user.list); http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); }); [/code]

Lines 6 through 10


Lines 6 through 10 load various modules including express, http and path. What’s interesting is that we also load a module called routes (which will be explained later) and a module in the routes folder called user.


Line 12


On this line, we called the function express() which will create our app this app will be used when we decide to create a HTTP Server and it will be the object containing all the properties of our web application as well as the mapping between the URL received in a request and the function handling its response.


Line 15 through 17


On these lines, we set various configuration parameters such as what port the server will run on (line 15) and in which directory the template html files will be found (line 16). On line 17, we specify the templating engine that we want to use, in this case Jade. Jade is a popular templating engine that makes writing HTML extremely easy and without the extraneous syntax requirements of angle brackets (<>). You can change the templating engine to simply return HTML as is and not do anything further by replacing Line 17 with the following code:


Line 18 through 23


On these lines, we set various configuration parameters. You can find the meaning of each individual parameter by taking a look at the API documentation. The explanation of these configuration parameters is not required for this tutorial.


Line 24 and 25


These lines are interesting as it is where we specify middleware to handle Stylus CSS sheets and HTML. Middleware is a layer that is automatically inserted into the function calls between receiving the request and returning a response. In this case, we are asking Express to run the stylus middleware and the static middleware for all requests in which the URL specificies a path inside the public folder of our project. We use to this server CSS and JavaScript verbatim and not execute a request function for that URL.


Line 27 through 30


In these lines, we are specifying to Express to handle errors if the environment is set as development and not production. You don’t have to worry about these lines.


Line 32, 33


In these lines, we are finally mapping a URL path in a HTTP request to a specific function to handling the response. We will get back to this shortly.


Line 35 through 38


In these lines, we create a HTTP server and specify the port, along with a callback on success to say the server has been started.


Routing


Routing and how to properly do routes is a controversial topic and there is no correct answer. There are plenty of modules implementing routing for Express and Node.js, each with a different flavor and structure. We will stick to the routing engine packaged with Express. In app.js, we already specified the routing engine and we import the route modules from the route directory. We added the routes in line 32-33. In other words, we mapped the URL in the browser to the function on the server that will respond to that request. Those functions that will handle the requests are in the routes directory. Let’s take a look at index.js.


[code language="js"] /* * GET home page. */ exports.index = function(req, res){ res.render('index', { title: 'Express' }); }; [/code]

It’s just three lines but those three lines do a ton of work. Line 1 adds a function called index to the exports variable. The exports variable is created by Node.js every time a module is loaded to allow you to pass functions and variables to other modules, in this case, the app.js module.


The function index takes two parameters, req and res. If you recall from Part 1, the req parameter held the request received and the res parameter holds a variable to which you write your response. In this case, we are executing the render function in the response variable which takes two parameters. The first is the parameter that specifies the view to use (the view is a file in the views directory) and the extension of the file is not required so index will make to index.jade. The second parameter is an object containing data that can be inserted into the jade template.


Continue reading %Build a Node.js-powered Chatroom Web App: Express and Azure%




by Rami Sayar via SitePoint