WebAppers

/ best free open source web resources /

Graphic Resources

Deal of the Week: Spy on Your Competitors

Posted · Category: Information

Keeping up with the latest and greatest Web features is an exhausting experience, though. You can check out tons of forums, blogs, newsletters and more just to read up on the latest releases. The best way, though? Just browse. Check out what your competition’s doing. If only it were that easy to look beneath the hood. Well, it is. Thanks to SpyBar, you can pull in tons of useful data about any site, and you can do it all right from your Firefox or Chrome browser.

With just a single click, SpyBar will instantly spit out a list of WordPress themes and Plugins used on whatever website you’re currently on. So surf over to your competition’s site or some of the industry leaders’ pages, and take a peek at what’s working for them. SpyBar normally sells for just $12.95, but for a limited time only, you can purchase this incredible browser extension for only $7! That’s nearly 50% off the original price.

spybar

How to Create Realtime Multi-player Games in HTML5

Posted · Category: Information

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer.

Multiplayer and browsers

When you consider making multiplayer games, there are many methods available for creating a game that friends can play online. There is a good variety of multiplayer game types – take for example a card game you play synchronously with friends. Turns are made, information is exchanged in (semi) real time and the game progresses in discrete steps. Another example, Chess, can be asynchronous. Players take their time, contemplating possible actions and play their next move one week from now. These types of multiplayer games exist in browsers, and have for a long time. The nature of the browser itself makes it easy to make semi real time games, but we want more-visceral real time action.

Card games and Chess both usually require communication with a server and communication with the other players in order to work online. This is the foundation of a multiplayer experience to be possible – and for a long time this has existed via HTTP, where POST and GET have always been used to manage games.

The trouble with these methods is the delay, posting a message and waiting for a response each time is just too slow. It works for the semi real time and asynchronous games, but real time games require messages sent and received sometimes in the region of 33~66 times per second, something that is not quite possible with HTTP alone.

Luckily, in modern browsers we can take one step higher, and have a real time connection between a server and clients. The purpose of this discussion is to present one overview of how multiplayer games are made. We will look at input prediction, lag compensation, client interpolation and more importantly – how to do this in your normal browser using websockets. The article will present a playable demo with parameters to play with, showcasing the concepts discussed.

The technologies that we have chosen and why

Socket.io

socket.io is a powerful and flexible server-side and client-side component that enables real time networking in your browser. Not only does it support newer technologies like web sockets, but it also falls back safely onto a Flash networking layer, XHR or JSON long polling and even an HTML file transport layer. Most appealing about it perhaps is the simplicity and inherently asynchronous nature it brings, which is extremely useful when writing server and client code.

Another benefit of using socket.io is the fact that it ties into Node.js seamlessly. When coupled with Express, on connection, it can serve the client-side includes, game files, and data, making the integration clean and easy. Once you set it up, the amount of code between first connection and communication with a client is nothing short of amazing. And it would work in all browsers, mobile included.

Read the rest of this entry »

Create an Amazon-like Navigation Menu with jQuery

Posted · Category: Menu, MIT License

menu-aim is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu’s contents. This problem is normally solved using timeouts and delays. menu-aim tries to solve this by detecting the direction of the user’s mouse movement. This can make for quicker transitions when navigating up and down the menu. The experience is hopefully similar to amazon.com/’s “Shop by Department” dropdown.

menu-aim assumes that you are using a menu with submenus that expand to the menu’s right. It will fire events when the user’s mouse enters a new dropdown item and when that item is being intentionally hovered over. You can take a look at the detailed explanation here.

amazon-navigation

Requirements: jQuery Framework
Demo: https://github.com/kamens/jQuery-menu-aim
License: MIT License

Open Source Interactive App Framework for HTML5

Posted · Category: Framework, License Free

The iio Engine (pronounced ‘ee-oh’) is an extensive application framework that helps with the creation and deployment of HTML5 applications. The framework provides a feature rich SDK, an advanced debugging system, and a cross-platform deployment engine. The iio Engine has no dependencies and can be interfaced with Box2D. The core platform is open source and totally free.

iio was designed from the ground up to be as lightweight as possible. Most data is ‘undefined’ by default, so your app will never be carrying any extra weight. No application is too simple to benefit from utilizing iio. The iio Engine is not a bulky framework – its about 1/70th the size of an average mp3 file.

iio-engine

Requirements: –
Demo: http://iioengine.com/
License: License Free

Protect Yourself from Copyright Infringement Claims

Posted · Category: Information

Copyright regulations exist to ensure that the owners of intellectual property, such as images, text and other creative works, are protected should their work be used without their permission.

The Copyright, Designs & Patents Act 1988 gives the creators of literary, dramatic, musical, artistic works, sound recordings, broadcasts, films and typographical arrangement of published editions, the right to control the ways in which their content may be used.

Although it’s designed to protect content producers against malicious use, creative professionals such as web designers need to be careful not to breach copyright.

What does the act include?

Written content and articles

Copying articles or content from third parties can constitute a copyright breach, even if the content is modified or adapted. The use of scrapers could also be constituted as a breach, as can placement of ‘dummy text’ that is used on another website, even if it is only used on a development server.

Photography and graphics

Photography and images are one of the most common areas of copyright infringement for web designers. The copyright for any image usually lies with the photographer or website that you purchased the image from. If you use stock images from sites such as iStockphoto, ensure that the licence you purchase on behalf of your client is the correct one. It can be all to easy to purchase a ‘Standard’ licence, when in fact extended rights are needed – so be sure to read up on the licence agreement before you make the purchase. Read the rest of this entry »

How to Create 3D Social Media Buttons with CSS3

Posted · Category: Buttons, License Free

Social media buttons are presented today on every website design. They are used to promote your business on social networks and get in return potential customers. There are plenty of free social media icons sets out there but in this tutorial show us how to Create 3D Social Media Buttons with CSS3. It’s free to use these buttons into your projects and create new ones.

social-buttons-css3

Requirements: CSS3
Demo: http://flashuser.net/tutorial/css3-social-media-buttons/
License: License Free

How to Create High-Performance Code

Posted · Category: Information

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer.

16 milliseconds is not a lot of time. Try eating a hotdog that fast – though I swear I’ve seen our dog go through a beef sausage in under 100 milliseconds.

If you want your game to run at 60 frames per second, 16 milliseconds is all you have to get everything done: moving bullets around, creating new entities, drawing sprites, checking collisions, tracking and changing states, handling input and playing sound. Whatever happens regularly in the main game cycle needs to operate as efficiently as possible. Even at a lower-performing frame rate of 30 per second, you’ll still only have 32 milliseconds to get everything done. Speed and efficiency are important, and that importance increases over time as you add more things to your game.

What’s garbage collection, and why do I care?

If you’re developing a game that has many things happening at the same time, say a weapon that fires missiles 5 times per second – not an unreasonable weapon fire rate for a high-speed shooter – you’ll quickly discover that one area of substantial impact to performance is object construction and subsequent garbage collection.

As your classes grow in size, and possibly in complexity, you’ll begin to notice lag introduced when you construct something new; this is exacerbated if you’re doing complex setup of sprites and sounds (even if they are cached in static resources). Creating lots of objects also has the side effect of generating garbage collection.

For those new to the concept, JavaScript, like many other interpreted languages, frees you from having to manage memory; you can create objects at will, without really having to keep track. The browser (or to be more specific, the JavaScript Virtual Machine running inside the browser) will come along periodically and clean up anything you’re not using anymore. This part of the system is the garbage collector (GC) – you can think of it like the ultimate housemaid.

Depending on the browser, and number of objects you have in use, the process of garbage collection can take anywhere from 10ms to 2000ms. The more things it has to check to be cleaned, and the more cleaning it has to do, the longer it will take. If you’re writing a game with independently moving objects, like an action game, this pause is going to at best noticeable, or, at worst, a series of frustrating stalls that kills the experience.

Read the rest of this entry »

How to Create a Youtube Menu Effect with CSS & JS

Posted · Category: License Free, Menu

Codrops has shared a Simple Youtube Menu Effect Tutorial, which teach us how to recreate the little menu effect that you can see in the left side-menu on YouTube when watching a video (where it says “Guide”).

The menu is made of a little menu icon, a label and a list of menu items that appears when the label or menu icon is clicked. Once it’s clicked the menu icon slides to the right and the label moves up while the list items fade in sequentially. We’ll add some more style and effects to it in order to make it a bit more interesting.

youtube-menu-effect

Requirements: JavaScript Framework
Demo: http://tympanus.net/Tutorials/YouTubeLeftSideMenu/
License: License Free

Helios: An Extensible Mobile Backend Framework

Posted · Category: Framework, MIT License

Helios is an open-source framework that provides essential backend services for iOS apps, from data synchronization and push notifications to in-app purchases and passbook integration. It allows developers to get a client-server app up-and-running in just a few minutes, and seamlessly incorporate functionality as necessary.

Helios is a constellation of mobile backend components – Mix and match to meet the specific needs of your app. Built on the Rack webserver interface, Helios can be easy added into any existing Rails or Sinatra application, or used by itself. It is released under MIT License.

helios

Requirements: –
Demo: http://helios.io/
License: MIT License

Global Composite Operations – Your Canvas Utility Belt

Posted · Category: Information

This article recently appeared on BuildNewGames.com, a collaboration by the teams at Bocoup and Internet Explorer.

The past year has seen wonderful growth in the popularity of 2D Canvas; it’s been great to see so many people getting comfortable with the 2D context. Canvas is almost synonymous with HTML5 gaming and supported in all modern browsers including Chrome, Firefox, and Internet Explorer 10 and 9.

One thing that many people take for granted is the “bottom to top” canvas drawing order; putting down the background first, then objects in the middle of the scene, and finally drawing the foreground.

It’s true that this is how canvas works by default, and there’s a specific name for it; it’s called the source-over global composite operation (GCO).

What many people don’t know is that you can reverse this order – by setting ctx.globalCompositeOperation = destination-over, you can actually draw the background last, and it will go under what’s already been drawn on your canvas.

There are a total of eleven total GCOs at your disposal. There used to be an even dozen, but the black sheep of the bunch – darker – has unfortunately been abandoned.

Canvas Global Composite Operations

In general, you should use source-atop, because it has been the focus of much optimization and is relatively fast. However, there are times when the scene you’re trying to create is difficult or impossible to pull off with source-atop alone.

The GCO modes apply to every pixel that goes onto the canvas. Whether drawn via fillRect, stroke, drawImage, fillText, or anything else – they are all subject to the active GCO. Happily, as the GCO is set on the canvas context, it is subject to the same save/restore (push/pop) behavior as all the other contextual fields (scale, rotation, fill style, global alpha, etc).

This article will explore two of the lesser known GCOs – source-atop and destination-out – and show how they can help you solve some common problems in game graphics programming. Read the rest of this entry »

Page 125 of 322...«121122123124125126127128129»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons