With the ever-growing market of tech startups, Web apps and in-browser tools have become extremely popular among developers, designers, freelancers, and project managers. Over time these tools progressed and we now seen the release of desktop software, mobile apps, and even greater possibilities.

For this article I have collected dozens of various online resources from different topics which are useful to creative professionals. The tools are geared towards website projects, but can certainly be applied into almost any technology-based field.

You will find apps for e-mail marketing, task management, cloud IDEs, and so much more. The growth is practically endless and I would expect to see more evolution over the coming years.

Recommended Reading: Useful (Offline) Utensils and Toolkits for Designers

Code Management

In past releases of different open source projects the codes have been published on blogs and personal websites. But this method of sharing is not always the easiest, and it does not allow for contributions. I find these couple of tools for managing project codes are the absolute best solutions for a lone developer or teams of coders.

Github

Github and more specifically the Git version control system features an elegant way of managing project codes. Git is more lucrative than Subversion and provides an easier installation process for newbies. Creating new branches is very simple and there is no fear of accidentally losing your hard work.

One reason I highly recommend using Github for hosting your projects is because they have been doing it for so long. Their (free) tools are just simply the best – you have access to a user wiki, Q&A support, push requests, and free webpage hosting for your documentation files. The network is teeming with developers and it is an excellent resource for both submitting and checking out new projects.

Beanstalk

I do not see Beanstalk mentioned as frequently as Github, but it is still a really nice service for newer Internet launches. Their target is geared towards private repositories with a potential team of developers collaborating in the backend. They support Git, Mercurial, and Subversion to handle version control on your project. The features list is quite expansive and even includes multiple choices for live deployment onto a web server!

If you have never heard of Beanstalk I must recommend at least glancing over their website. I think any dev team could greatly benefit from their service, especially for more complicated projects which will need a large number of revisions after launching online.

Bitbucket

Another alternative to Github is Bitbucket which also has free unlimited repo hosting for open source projects. You can pay for a private API key and server space, but this is not required. Bitbucket is also multi-user and supports Git or Mercurial. The best reason to push for Bitbucket is when building with a team of developers who don’t want to shell out money. The amount of internal resources and their online guides make this product irresistible.

Task Management

Anybody who is familiar with managing any creative project will understand the necessity of a to-do list. Moving into the digital era we can expect not just a cool webapp, but connections with other members in our team. Think about shared project lists where tasks may be designated to specific users. These are the best tools-of-the-trade for getting your tasks organized.

Trello

Although I have only spent a short time using Trello it is currently all the buzz among digital task enthusiasts. Their dashboard is extremely easy to manage and the signup process is very quick. Although the terminology can get a bit confusing, the Trello tour page can answer a lot of common questions.

One thing I specifically like about Trello is the ability to work with other people in your team. New projects are designated their own Board which contains to-dos or internal sub-boards. Tasks can be classified as To-Do, Doing, and Done. The interface may seem strange at first but give it a shot and I promise you will not be disappointed.

Do

The name is really simple, but the concept of task management is no easy idea. The webapp Do is really easy to use and focuses greatly on team management. Delegate tasks out to different users on various projects. All of your calendars and contacts will sync to display for other members in your group.

Do isn’t necessary for just a single user; the UI might be a bit overkill. But their features are tremendous for any design agency or creative studio. Surprisingly you can integrate Google accounts like Gmail and Google Drive right into the application. If you want to demo their features just sign up using a free plan and test the waters.

Basecamp

Having used Basecamp for many years I still like to include this with the other solutions. The ability to create your own teams and organize tasks dedicated to specific users is very handy. And each project has discussions and calendars for everybody to access. You can host text docs or similar resources which need to be shared among members, and ultimately Basecamp is just the most notable way for bridging gaps for teams and single users.

More Resources:

• Interstate App
• Podio
• Wunderkit
• Orchestra

Payment Processing

Many new tech startups are handling payments from alternatives outside of PayPal. The realm of digital transactions now requires backend support for APIs on credit, or 3rd party vendors as well. These tools are made specifically for developers who need to handle online payments without building everything from scratch.

Stripe

The extremely popular payment API Stripe has been gaining a lot of recognition. In the past year I have seen this mentioned countless times by other CEOs and startup teams who have been struggling with alternatives for payment. Their API is very easy to understand and works well using any backend language.

I remember they do support a wide variety of both webapps and mobile apps. You can check the documentation page if you want to read a bit more. They even offer a Stripe Connect feature which would provide a quick checkout process for any sales. Out of all the solutions available, I have been incredibly excited to see a company like Stripe getting some real attention.

Paymill

The Paymill website is definitely impressive along with their support docs. The payments are handled via credit or debit cards, along with more gateways coming in the near future. The greatest asset is their vast plugin library which supports Drupal and VirtueMart, among other services.

It certainly isn’t perfect but Paymill can fit into general eCommerce stores without much hassle during the installation.

Braintree

I think Braintree is one of the more adopted gateways for web developers. Their listed clients include Github, Angry Birds, 37Signals, and some other big-name tech brands. Very recently they published a new blog post about frontend JavaScript authentication which is even easier to setup.

The dashboard is also extremely easy to use for newcomers, and I would recommend Braintree as a perfect choice when digging for a simple payment solution.

More Resources:

• Balanced
• Recurly
• Spreedly

Data Logging

Admittedly data logs are certainly not useful to everybody. I feel that logging applications provide a deep analysis of traffic and issues within the server. It can help if you are testing updates or changes to your code. Or if you are expecting upticks in traffic and users on the frontend of your website.

These resources may be hosted externally and will procure all of your logs in an orderly fashion.

Sumo Logic

Sumo Logic is a newer startup in the field which offers a very nice service. The log data is presented in an easy-to-skim dashboard interface with charts and numbers. You can easily pinpoint related problems over the recent data queries and organize this information as needed.

And everything is stored within the cloud so you do not need to worry about local disk space. To answer further questions check out their FAQ page.

Logstash

The cute design of Logstash will stand out among the other data logging companies. Logstash is completely open source and free to distribute on any number of servers to manage. The installation will take some time, but their features are impeccable for a self-hosted solution.

You will get access to an entire dashboard area which holds all your past logs. This data can be reorganized in any fashion you like, and you can even search logs for a date or reference key. The latest documentation page is also full of great info. This logging system is not for the average user but it grants more control than other alternatives. Plus you cannot beat open source!

Papertrail

The Papertrail App has been mentioned a lot for producing very good quality logs. They are also a cloud-based hosting platform where you can login to access all the statistics from your web server. I feel their price ranges are generally higher than Sumo Logic because of the flat rate per month.

Sumo will only charge users for what they use, so lighter companies end up paying much less. Papertrail is better suited to handle intensive loads and working with a team of server admins or website developers.

More Resources:

• Logentries
• Loggly
• Splunk
• Woopra

Dashboard Analytics

I think dashboards are the most truly interesting web applications of 2013. These tools provide access to all the important data within your company. This may pertain to split testing, e-mail signups, monthly traffic, or any number of metrics. A dashboard is one useful product for measuring the overall success of your project based on hard numerical data statistics.

Mixpanel

When I think of dashboard applications I immediately think about Mixpanel. They have been online for a few years and have proven a great track records for analytics lovers. This is a wonderful service when you need to record visitor interactions on your website. Possibly checking for new signups or user retention rates. Their free account is very reasonable and quickly introduces you to the world of dashboard analytics.

DigMyData

The reason I had to include DigMyData into this list is for their ability to connect with a multitude of networks. Businesses need to access a majority of their stats by visiting different websites. However the dashboard from DigMyData can include payments from a number of services like PayPal, Google Checkout, and Stripe.

Plus you can include API keys for your MailChimp, Aweber, or Campaign Monitor accounts. Google Analytics also has a connection method and you can even import documents/spreadsheets from Google Drive. DigMyData is more of a colossus dashboard where you can go for all your company statistics at once. Pretty cool if you have the time!

Instrumental

The Instrumental dashboard app is a little more tech-savvy in comparison with the other two. Most of the charts will monitor your server usage and disk space, along with CPU speeds and other digitized information. This service will be useful to a few companies who value high-proficiency in technology.

However their prices are also not as forgiving. Instrumental is a tool which is nice to know exists, but certainly isn’t required in all projects.

More Resources:

• Ducksboard
• Segment.io
• Geckoboard
• Librato

Customer Support

Startups and newer websites which offer direct support may eventually become bogged down with requests. If you are selling products or services, you will need a way to handle issues from your customers.

This is a big area for webapps which includes at least a dozen or more choices, so don’t be afraid to experiment and try out products until you find one that works for you.

Intercom

Anybody who has read into customer support webapps must know about Intercom. Their popularity is of no coincidence after checking out the product. The Intercom administration panel is super easy to use for beginners and experts. This means you do not need to bring techies on board to handle the support tickets and emails.

You can manage relationships with the company and specific conversations between customers. All of this communication is archived to access at a later date, as needed. You can also setup a small resolution message box for customers to send their thoughts about the website. If you get a chance to skim the documentation you will notice a whole collection of user-centric features.

GrooveHQ

GrooveHQ is another resource which may be considered one seriously cool application. They support mobile phones and tablets, along with desktop web browsers for accessing the support dashboard. Tweets, tickets, and chats can all be managed from within the same window.

Organizing new tickets and assigning them to various tasks will be a piece of cake. The pricing model can get expensive if you have a lot of employees handling tickets. but Groove is definitely perfect for a new smaller startup launch.

Tender Support

The Tender support app is a more slimmed version of the other two solutions. This is actually a good thing for people who are looking for simplicity. You quickly have access to the Knowledgebase and closing/responding to discussions. My particular quip is how they lack a free plan for new users or customers with a small userbase. But overall Tender is a distinct support app which does include all the core features you would need.

More Resources:

• Desk
• SupportFu
• Olark
• UserVoice

A/B Testing

A/B split testing has been around for years but the resources for performing these tasks are just getting into the spotlight. I do not think every website layout will require split testing. But playing around in your design can unearth UI/UX trends you had never even considered.

Visual Website Optimizer

I have spent time reading and toying around with Visual Website Optimizer and I am very impressed with the results. VWO has multivariate testing which split URLS along with JavaScript A/B models. You can track statistics like cross-domain visits and even generate screenshots of user activity. Their features are practically endless and it is a very handy application.

One other important feature to mention is the ability of collaborating in teams. VWO allows for multiple logins and setting permissions based on user accounts. This is the best optimization tool for working within a team of designers/developers.

Optimizely

Optimizely is another young contender in the market which can help move A/B testing off your server. Their backend has a nice drag-and-drop utility which makes handling your changes a breeze. Developers may want to double check codes before running, but it is a lot easier to maintain your website. I would say Optimizely is the best choice for beginners who are not super familiar with split testing. Their backend is quick to traverse and the UI just makes sense.

File Sharing/Storage

There will be times when you need to share files between computers or with a colleague online. There are Instant Messaging chat systems which allow for directly sending files, but cloud hosting solutions exist for this very reason. The market is still fairly small but growing rapidly.

Dropbox

Dropbox is a free solution which offers a decent amount of server space and great access on all Operating Systems. I feel that most people who need cloud storage are using Dropbox, so it is a very trusted solution. It is definitely more personalized where you can organize content into folders and share them with other users.

Dropbox is best used in a team environment where you need to keep multiple teammates in the loop together. But it can also work great for an individual, it just depends on your needs for a cloud hosting solution.

CloudApp

I currently use CloudApp every single day for transferring documents and photos between computers. It is a bit messier than Dropbox since all files are listed in a single root folder and organized chronologically. But the library UI allows you to sort contents by images, text, video, audio, archives, and other common filetypes. This is a more stripped-down version of cloud file hosting for quick and effortless uploading/downloading – even from mobile devices!

E-mail Marketing

Methods of contacting users & customers have been reinvented and re-imagined for many purposes, but e-mail is a timeless classic. Campaign marketing does not disrupt users when they are busy. Instead they receive a nice letter within their inbox waiting to be read. These tools will help you manage subscriber lists and to push out newsletters from an e-mail server.

MailChimp

I simply adore MailChimp over similar applications mostly for their amazing customer service and backend dashboard. They have been online for a while and more people have been flocking to the MailChimp crowd. Users will have full control over their e-mail lists and how frequently to send new campaigns.

Check out their features page if you want to get an overview. The MailChimp templating engine is very solid and it even provides free custom templates you can use as a base foundation. Anybody who knows the pains of coding your own e-mail newsletter from scratch can attest to the helpful nature of pre-built templates. And one of the most important considerations is that MailChimp will remain free if you signup for a free account. There is no trial period, or the trial is just free until you choose to upgrade.

Postmark

Postmark is a different kind of webapp which supports dynamic e-mails sent via APIs. These may be sent out when users purchase something, or sign up to your list, or send an error message after your application crashes. Postmark is a better system for handling automated e-mail which is to be sent out at various times, as opposed to a whole newsletter campaign sent out in bulk mass.

More Resources:

• Mailgun
• Postage
• Customer.io
• Campaign Monitor

Issue Tracking

Another void to fill when building new projects is handling errors and bug tracking. There are lots of solutions you may install on your own server, but 3rd party alternatives can be just as good. It depends on your needs as a developer and how many tweaks/bugs you plan to deal with. When scaling a larger web application these error tracking services will save you a lot of headaches.

Sifter

Ever since the launch of Sifter I have been reading their updates on related blogs every so often. Their project management dashboard is quite useful for dealing with pesky bugs in your code. It is possible to implement many projects and once and designate bugs as being fixed by different users in your team.

The unfortunate part is that you only get a 14-day free trial when signing up. Otherwise their paid plans require a monthly charge of $29-$149 USD.

Sentry

Sentry is my personal recommendation because of their beautiful dashboard and quick installation for any type of business. Website projects and mobile apps can benefit from using Sentry’s features. Most notably you will receive updates in real-time as they are happening in the application. Plus it can work running on dozens of platforms including Java, PHP, Rails, Python, Objective-C, and more.

You may signup for a free 7-day trial period just for testing the waters. I have yet to be disappointed and Sentry runs a solid open source error catching architecture.

Coalmine

I had first noticed Coalmine mentioned in a blog post a few months back. Turns out they are another fantastic error handling service which also manages on PHP, Rails, Python, and even Google App Engine. The project is completely open source and hosted on Github if you want to take a peek.

The Coalmine free plan is an excellent place for beginners to get started who are unfamiliar with error handling services.

More Resources:

• Lighthouse
• Raygun
• Bugsnag
• Airbrake

Load Testing

Many social networking websites which scale too quickly often run into trouble. The servers and databases cannot manage an overload of traffic, and over many repeats this can be disastrous to your project with long periods of downtime. Note that viral content is often the cause, but this scenario could happen to nearly any type of website.

These testing tools are useful to developers who are expecting a lot of fluctuations in traffic and need to study how it should be handled.

Load Impact

One of the quickest solutions Load Impact is a testing suite for websites under heavy traffic. You can manage a dashboard of statistics pulled from your server after running distinct connection tests. Their features will help determine bugs in your code which may be causing issues with loading times. Check out their list of features to get a better idea of what Load Impact can offer.

Selenium

Selenium is not a cloud-based solution as Load Impact, but instead offers a totally different spin on testing for high bandwidth. You can download the Selenium plugin to install in your browser for automating specific tasks related to load management. Things like user logins, updating avatar photos, posting comments, or similar tasks. It is not as straightforward as a self-hosted application but Selenium is very popular among the development community.

Cloud-Based Code Editing

A lot of my small ideas for user interfaces are crafted within cloud environments. There are plenty of tools which allow you to build a fully customizable HTML/CSS/JS webpage, using nothing but an Internet connection and a web browser. These cloud IDEs are great for coding on-the-go and for sharing your quick ideas with other developers.

Cloud9

I don’t think that Cloud9 gets enough mention for all the features that they offer. You can signup for a free account and still use a small bit of server space for testing your applications. Cloud9 is a fully integrated IDE where you may connect into projects hosted on your Github or Bitbucket account.

But Cloud9 is even cooler when you consider that they offer full app hosting for beta testing and planning new features. The premium account costs $12/month and you will be granted access to a litany of additional member features, extra HDD space, and the ability to share codes with other members. You may build & test static HTML or even dynamic PHP webpages. Check out their features page to learn a bit more.

jsFiddle

The amazing jsFiddle is definitely not a replicate of Cloud9. But instead a simpler resource for building & testing website interfaces without desktop software. The signup is free and allows you to save projects online which you may revisit later. The publishing system is version controlled much like Git where you may update projects and reset the master root.

All new Fiddles are public by default so it is easy to share links with other developers or post them to your website/blog.

JS Bin

Another worthwhile mention is JS Bin which has a very similar interface as jsFiddle. The output panel will display your updates and you have the option of switching between the various display settings. The default setup only shows HTML and Output, but you can toggle CSS and JavaScript codes from the toolbar buttons. JS Bin is also free to signup and public for sharing your codes online.

Social Media Sharing

Networking and marketing is a huge part of any successful business. And social media is currently the pinnacle of viral content. These tools are extremely beneficial to keep on top of your Facebook and Twitter feeds. Additionally you may signup to use other services, such as YouTube or Pinterest. Each product has its own benefits and you’ll have to consider a few options to weigh out the pros and cons.

Hootsuite

The HootSuite library has been around for a while and contains a lot of variety. You can schedule posts to publish in the future and organize content like retweets or new user comments. Even better is the introduction of HootSuite teams where you may incorporate different team members into a single account.

They offer a free plan which allows a basic level of 5 different social profiles. You can access the majority of their features just on the free plan, but consider the other options if you need HootSuite as an enterprise marketing system.

Buffer

An alternative is Buffer which performs many of the same capabilities as HootSuite. I really enjoy using Buffer App because of the simplicity of getting started. You can sign up very quickly and attach all of your related social profiles. Additionally they have extensions for Chrome, Firefox, and even offer mobile apps for Android and iOS.

SocialFlow

SocialFlow is an interesting product which handles marketing content a bit differently from the other services. You can track conversations and shared links in real time as they appear on networks. Users will have access to graphs and tables which correlate to your natural social marketing trends. The project is currently in beta testing, however you may request a demo to see what is coming in the very near future.

More Resources:

• Beevolve
• Crowdbooster

Closing Thoughts

The process of building and launching a website has changed quite a bit in the past decade. It is now much easier to handle development updates and sharing project changes with your teammates. The vast number of helpful resources online is a crucial step in the right direction towards garnering more control over your web projects.

But there is certainly no way that I could imagine every useful tool for online businesses. These resources are a huge guide looking forward into 2013 but it is only my collective experience. I would love to see additional suggestions and resources in the comments area. Plus if you are using any similar tools for your own projects it would be great to read personal reviews from developers and founders.

Everyone who works on a computer would know that it’s not easy to concentrate on work the entire time. This is especially apparent when working on your own computer where there’s no network restrictions to what websites you can visit, giving you the ease of access to social networks, non-work related news websites or watching tech channels on YouTube.

Doing any of the above distracts you, wastes time and ultimately you won’t be able to focus on your work, be it working at home or in an office environment. So here are a few apps that we think could help you focus and concentrate better. Although you may not like the idea of installing some of these apps, but giving it a try won’t hurt if you want to up your performance at work.

Recommended Reading: 5 Ways To Keep Yourself Focused At Work

Distractions Be Gone

Here are some tools for your web browsers to help you stick around in sites that take up all your valuable time. Installing these tools means you’ll be blocked from your favourite websites until work time is over.

1. StayFocusd

[Chrome Extension] StayFocusd is an extension for your Google Chrome browser that limits the amount of minutes spent on a list of ‘blocked sites’ determined by you. You can set the maximum allowed time per day for every blocked site and once you’ve used all of it, you won’t be able to access the sites until the daily reset time or when the active period (for example: 9am – 5pm) is over.

Once the timer is running, accessing these options is not easy as they require you to type in a paragraph of text without a single mistake. There’s also a Nuclear option for those desperate times for urgent deadlines – all blocked sites will be disabled and only sites on the Allowed list can be accessed (take note of all possible sites you could possible need before you turn this on). If you find yourself surfing on Facebook too often, you need this.

2. LeechBlock

[Firefox Add-on] Here’s one for Firefox. Like StayFocusd, LeechBlock has options like blocking sites for a set period of time, limiting the amount of minutes online in a day, and setting which day LeechBlock will be automatically enabled. They also allow you to redirect these blocked sites to a predefined page or just make it load really, really slow.

Once these options are set, you can prevent access to the settings. Parents can also set a password so their child will not be able to access it, or hide it from the Add-ons manager so it’s harder for them to find and disable it. They also give different sets of sites that you can block. These presets make it easy for you to block a set of sites while allowing another block for the same period of time.

Work & Play Balance

Balance is important, so give yourself a small reward when a job is finished. A small reward could be some time off work to read your favorite magazine or 5 minutes of surfing social networks after 25 minutes of non-stop work (read: Pomodoro technique).

3. Strict Workflow

[Chrome Extension] Strict Workflow is a Google Chrome extension that allows you to concentrate on work for a certain amount of time then reward you later on. It helps you concentrate by blocking a list of websites for a fixed period of time. Once that is over, it’ll unblock those sites to give you a break from work, then block it again after the break time is over.

All you have to do is list down websites which you want blocked. You can then set a timer to how long you want to these sites blocked (work timer), and then set the break timer duration. This lets you keep track of time so you don’t spend too much time on non-work related sites.

4. Simple Timer

[Firefox Add-on] Simple Timer for Firefox does not have the ability to block websites like Strict Workflow. However, it still gets the job down by way of a countdown time. The countdown timer is the main thing you should set up, e.g. for each 25 minutes of work give yourself 5 minutes of break time.

Once these countdown timers are set, you can save the list for future use. The timer sits on the bottom right corner of the browser letting you know how much time you have left. There are options like desktop notifications and alarms for you to configure, giving you a lot of flexibility to how you want the timer to help you focus on getting things done.

Create A Peaceful Environment

If all you need is a conducive environment to collect your thoughts then here are three more tools to create that peaceful work bubble for a smoother brainstorming session.

5. Ommwriter

[Mac OS] If you’re a freelance writer and need to focus on just writing something without any distractions then you can try Ommwriter. This is a free text editor app for Mac OS that runs in full screen. The only text formatting you can find here is to change the font type and size. The text box floats on top of a serene picture in the background, which can be changed to suit your writing mood.

If you are someone who likes to work with music, there are also ambient sounds to help you sooth your senses, and even keypress sounds for that friendly tapping on the keyboard sound some of you love. Once you are done, save your work on a simple .txt file to be used elsewhere.

6. CreaWriter

[Windows] CreaWriter is a free program for Windows that where you can customize the background ambient sound and background picture. Unlike Ommwriter, you cannot change the font, text size or add formatting in the free version, but you can in the paid version.

The full program is ‘donationware’: a donation as low as 6 Euros will get you the full program and all its features. While the free version suffices, the full program allow you to change things like the text box color, and font color to suit your needs.

7. Soundrown – Ambient Sounds To help You Relax

There are some of us who may doze off if we work in total silence but then find it hard to focus when listening to songs. Here’s where Soundrown can help. It provides ambient sounds instead of lyrical songs to accompany your work session.

You can choose the calming sound of waves crashing on the beach which sets up the lovely illusion, or the sound of raindrops, coffee shop chatter, a passing train, kids and even crickets. Going to the site gives you a random ambient noise and can also mix the sounds by opening 2 tabs on your browser, giving you a combinedeffect like coffee shop chatter on a rainy day.

We have always been able to view a whole webpage in fullscreen mode. To do so, you can hit F11 key in Windows, while in OS X you can hit Shift + Command + F. However, there are times when we, as a web developer, want to add a trigger on the webpage to perform the function rather than use those keys.

In addition to providing several new elements, HTML5 also introduced a set of new APIs including one that we are going to discuss in this post, called Fullscreen API. This API allows us to put our website or just a particular element on the webpage in fullscreen (and vice versa) using the browser’s native functionality.

• View Demo

As far as implementation is concerned, this API would be useful particularly for videos, images, online game, and HTML/CSS-based slide presentations.

So, let’s see how it works.

Recommended Reading: More HTML5 / CSS3 Tutorials

Browser Support

At the time of the writing, this API only works for Google Chrome, Safari and Firefox. Similar to CSS3, the syntax is prefixed as it is still in experimental stage.

Webkit	Firefox	Description
webkitRequestFullScreen	mozRequestFullScreen	The method to send the webpage or specified element fullscreen.
webkitCancelFullscreen	mozCancelFullscreen	The method to exit fullscreen mode.
mozFullScreenElement	webkitFullScreenElement	The method to whether the element is in fullscreen mode.

It is worth noting that the Fullscreen API is subject to change in the future.

Usage Example

One of the best way to learn a new thing is by example. In this post, we will run a simple project. The idea is we will have an image and a button that will put the image fullscreen or change it back to normal view with a click.

HTML

Let’s start with the HTML markup. We have a <div> element to wrap the image and a <span> element for the button.

 <div id="fullscreen" class="html5-fullscreen-api"> <img src="img/arokanddedes.jpg"> <span class="fs-button"></span> </div> 

CSS

Then, we place the image at the center of the window as well as add a few decorative styles to make it look nicer.

 .demo-wrapper { width: 38%; margin: 0 auto; } .html5-fullscreen-api { position: relative; } .html5-fullscreen-api img { max-width: 100%; border: 10px solid #fff; box-shadow: 0px 0px 50px #ccc; } .html5-fullscreen-api .fs-button { z-index: 100; display: inline-block; width: 32px; height: 32px; position: absolute; top: 10px; right: 10px; cursor: pointer; } 

Image by Arief Bahari

I decided to display the icon in the <span> element using :after pseudo-element, so that later we can change the icon easily through CSS using the content attribute.

 .html5-fullscreen-api .fs-button:after { display: inline-block; width: 100%; height: 100%; font-size: 32px; font-family: 'ModernPictogramsNormal'; color: rgba(255,255,255,.5); cursor: pointer; content: "v"; } .html5-fullscreen-api .fs-button:hover:after { color: rgb(255,255,255); } 

JavaScript

We will use jQuery to make the code a little bit leaner.

As we mentioned, we will send the image fullscreen upon a click. We wrap the function under the jQuery .on method.

 $('.fs-button').on('click', function(){ } 

We first check whether the element is already in fullscreen mode, if this condition returns we will execute the webkitCancelFullScreen to send it to normal view. Otherwise, we will turn it to fullscreen using the webkitRequestFullScreen method, like so.

 $('.fs-button').on('click', function(){ var elem = document.getElementById('fullscreen'); if(document.webkitFullscreenElement) { document.webkitCancelFullScreen(); } else { elem.webkitRequestFullScreen(); }; }); 

Click on the fulllscreen icon, and our image will go fullscreen, as shown in the following screenshot.

Fullscreen CSS

Webkit (as well as Firefox) also provides a set of new pseudo-classes that allow us to add style rules when the element is in fullscreen mode. Say we want to change the background, we can write the style rules this way.

 #fullscreen:-webkit-full-screen { background-image: url('../img/ios-linen.jpg'); width: 100%; } 

Now, you should see the iOS linen texture in fullscreen mode.

That’s it. You can head over to the demo page to see it in action. Since, we do not specify the function with the Firefox syntax, this demo will only work in Webkit Browsers, Google Chrome and Safari

• View Demo

Further Reference

• Fullscreen API Draft — W3C
• Using Full Screen Mode — MDN
• HTML5 Fullscreen API — Sitepoint

As website or app owners, we all most likely want clear and precise statistics on who visits our website, where they are from, how long they stayed, what they clicked and more. And we want this without the app selling your data to third parties and invading you and your visitors online space as Google Analytics and other services do.

Ladies and gentlemen, may I introduce to you: Piwik. In this article I will be showing you the features and all the cool tools this self-hosted, decentralized, open source Web analytics platform has to offer.

Recommended Reading: Real Time Web Analytics Services – Best of

Getting Piwik

To get started using Piwik, start by installing the latest version on the project website here. Almost any server will work with Piwik since it is open source, and it is always being updated to work on the latest hardware and software versions. Having that said, you can install Piwik on as many servers as needed, free of charge.

To be sure your server meets the requirements of Piwik, check here.

After uploading the necessary files to your server, all that is needed to finish your installation is to visit your Piwik directory in a web browser and complete the easy step-by-step install.

Dashboard

When you first use Piwik you may notice that it looks extremely similar to other popular analytic applications such as Google Analytics.

The dashboard is a hub for all your stats of the most importance. You can also add, replace or move widgets, giving you fast access to stats and widgets you need most.

Stats

When digging into the app even deeper you will find that Piwik has so many advanced and useful statistics available for you. It gives pretty well detailed statistics regarding your most recent visitors and organized information about them you may want to know as a website operator.

Even though Piwik's main design and stats are very minimalistic, it is easy enough for even the newest beginners to read and interpret. Also, when you use Piwik your data is not being sent off to third parties unlike other popular services.

Advantages

• Free and Open Source
• Own your website data
• Multiple websites can be setup on one install
• Easy setup and installation
• Advanced browser plugin identification
• Site Search stats
• Open Source Community
• Advanced Real-Time Visitor Stats

Disadvantages

• Requires a server to be set up on. Not always convenient for some people.
• Somewhat weak design compared to other services
• With a self-hosted app, you get new features after you manually update it. You're also prone to forget about checking to see if they have updated it.
• Limitations on registering your team for analytics viewing
• No features to share your statistics

Conclusion

Piwik has a lot of neat and useful features and is on my recommendation list for any website or analytic needs, and being open source makes an even bigger recommendation as I am a big fan of active open source projects.