Useful Web Development ToolKit

High-level advice and guidelines for writing sane, manageable, scalable CSS

http://cssguidelin.es/

Another area of web development that should be constantly going on in the background is the monitoring of a website’s performance. Uptime Robot does this for you. It checks 50 of your monitors every five minutes, including the HTTP(s), Ping, Port, and keywords. You can choose how to be alerted–for example, through email, SMS, or even Twitter. You’re able to view uptime, downtime, and response times as well.

For a chat facility on your website, Converse allows you to set up single-user chats or multi-user chat rooms. Users can send chat requests and accept or decline, plus add their chat status like “busy” or “available” and show their typing status.

It has the ability to translate into 15 languages and can be screencast to chat with friends on Gmail or jabber.org. Converse can be integrated with many web platforms, like WordPress and Roundcube, and since it’s written in Javascript, it runs directly through your browser.

This is another tool that lets your website users chat to each other. However, HumHub does this on a much grander scale since you can create your very own social networking site with it. It has a user-friendly interface and lets the website’s business, school, project group, or friendship club communicate and collaborate easily.

Every user of the site has their own “V card,” giving an overview of their profile, plus groups can be set up. Users can post, follow, comment, and like other people’s content, or simply share files and discuss them. It’s completely secure as it’s a self-hosted solution and it’s flexible since you can add in third-party applications. Also, as any good social network, it’s mobile-friendly.

This tool can create interactivity for your website, or specifically, dynamic physics based interactions. For example, you can create Chat Heads like Facebook’s, a pull-down menu, inertia scroll, Oridomi Cover, and Bouncy Scroll. They’re all designed to work with mobile devices.

Using Impulse to create dynamic content works better than CSS for example, as there ends up being a shorter delay between when the animation is generated and when it starts playing. CSS tends to be better for static animations. Impulse has created a variety of animations and is always working on more.

More – http://impulse.luster.io/

Monit is fantastic for monitoring your server and is used for error recovery – it’s one of those apps that you need to have to keep some weight off your mind. It conducts automatic maintenance and repair and can execute meaningful causal actions in error situations. For example, if sendmail stops working, Monit can start it again and send you a warning message so you can act quickly.

It can be used to monitor daemon processes or similar programs running on localhost, checking for changes, like timestamps changes, checksum changes or size changes. It monitors network connection to servers, which is useful if you work in the cloud. It also allows you to test programs or scripts. Both the free and open versions of BSD, many Linux distributions from .deb to .rpm packages, OS X and Solaris .pkg include Monit.

More – http://mmonit.com/monit/

A tool specifically for apps, Onsen UI has a large selection of web-based UI components and Java and CSS frameworks to build HTML5, PhoneGap, and Cordova apps. It works with jQuery and AngularJS and is customizable, for example, by using Font Awesome.

And of course, it has a responsive layout for all devices, switching between column sizes for mobiles and tablets. It makes the user experience of browsing apps superior and fast, and it’s incredibly simple to use.

Cinematico will create a responsive website for you, which is already elegant and sophisticated, but is customizable for your needs. You can add your logo and background image, for example, or spend a little money on a theme.

The main use of Cinematico, however, is that it updates your website whenever you publish a new YouTube or Vimeo video. It links to your YouTube and Vimeo playlist, channel or account and synchronizes automatically. All of this and it’s free, since it’s open source.

For images with a difference, Rollerblade is a brilliant app. It allows users on smartphones, tablets, and desktops to slide the image they see left to right, and this will show a 360-degree view of the image. It works to showcase a building or location, or simply a product shot. With online shopping such a huge business, it makes sense to give customers as “real” an experience as possible.

For web developers, all you need to do is include the code in the top of your page with your CSS and do a few tweaks to get the rotator how you want it. You can have as many image rotators as you like, plus change the sensitivity and choose whether it plays automatically or needs to be dragged by the user.

More – http://www.iamapioneer.com/plugins/rollerblade/

Icons and emoticons are everywhere these days and it’s easy to understand why: a simple smile can add warmth to any communication–even if it’s a little yellow face doing the smiling. With Icon Maker you can create your own icons to add to your website.

It’s easy enough for anyone to use and perhaps just a little bit of fun for the experienced web developers looking for their own, personalized icons. Create a flat or 3D icon with drop shadows and other design features in minutes.

This is at the end of the list as it looks towards the future–with robots! Although the Internet of Things has been around some time now, it’s not fully integrated into every home. This tool allows developers to create a web between its 35 supported platforms. This includes Nest and Pebble, plus your basics like your keyboard or for marketing purposes; Salesforce.

It has an NPM module so that it can be run in your browser directly, or you can run it via your mobile through a Chrome connected app or a PhoneGap mobile app. It supports HTTP and Socket.io APIs, allowing you to send commands, send real-time data, and monitor your robots.