WebAppers

/ best free open source web resources /

Graphic Resources

Build Custom & Enterprise Node.js Apps with Sails.js

Posted · Category: Framework, MIT License

Sails.js makes it easy to build custom, enterprise-grade Node.js apps. It is designed to resemble the MVC architecture from frameworks like Ruby on Rails, but with support for the more modern, data-oriented style of web app development. It’s especially good for building realtime features like chat.

Sails.js API scaffolding is nothing like Rails scaffolding. Instead, Sails automatically builds a RESTful JSON API for your models. And here’s the thing, it supports HTTP and WebSockets. By default, for every controller you create, you get the basic CRUD operations created automatically.

sails

Requirements: Node.js Framework
Demo: http://balderdashy.github.com/sails/
License: MIT License

Security of Mashup Applications for Enterprises Part II

Posted · Category: Information

In the first article in this series, I covered cross-origin resource sharing (CORS) and building iframe sandboxes and described how to use these techniques in mashup applications to consume data from other domains and provide a layer to a defense-in-depth strategy. In this article, I’ll start exploring how to consume data from CORS connections (or any Ajax connection) by defining a level of trust and then sanitizing accordingly. To do this, I’ll build on top of the guidance provided by Project Silk. First, let’s discuss trust and how mashup applications in the enterprise provide a unique challenge to the existing paradigm.

Trust or the Lack Thereof

In Writing Secure Code, the authors put forth an excellent mantra: “All input is evil.” In the world of enterprise mashup applications, this is true, but some input is more evil than others. As an example, does a data feed from your company’s human resources system pose the same threat as a data feed from Twitter? Another common expression about software security is “all external systems pose a threat.” Again, this is true, but security is about risk management, which needs to stay a central focus in your mashup development process. Risk is a combination of the impact of a threat (a threat is an exploitation of a vulnerability in the system) and its probability of execution. The types of threats that a HR data feed present probably have a lower impact than threats that could be realized by consuming a Twitter feed. A Twitter feed can be any text content provided by any user, while the HR feed would be a structured set of data points provided and verified by members of the HR department. This gives the HR system a lower risk (assuming the probability of execution is lower or equal to Twitter). When considering the trust of systems, extend your vision of input to include the content coming from your mashup providers and also weigh trust for internal vs. external providers.

Here are some questions to consider when building your input validation for mashup providers:

  • What is your organization’s culture toward risk? Are you risk adverse or less concerned about risk when functionality is at stake?
  • What is the history of the provider? As an example, if you know that an internal provider has had malicious code posted to its site by disgruntled employees, you would obviously want to keep an eye on this provider.
  • What kind of data are you receiving from the provider? Take Twitter vs. Bing Maps, for example. The type of content coming from Bing Maps is different from the content coming from Twitter (depending on the API). How does that impact your trust of the provider?
  • Does the data cross a trust boundary in your threat model?

Mashup Data = Input

Overall, your goal is to securely consume data from various sources, some trusted and others not as trusted. “Data from various sources” is a long way of saying “input,” which means you need to consider the three elements of input validation: constrain, reject and sanitize. Constraining input is not only limiting what is permitted. It also means reducing the possible entry points into the system. (In information security, we call this “reducing the attack surface.”) You need an input chokepoint through which all consumed data must pass. Fortunately, the nice folks at Microsoft patterns & practices have provided a great design to do just that with the Data Manager in Project Silk. Read the rest of this entry »

CSS Matic: The Ultimate CSS Tools for Web Designers

Posted · Category: License Free, Tools

CSSmatic is a non-profit ultimate CSS tools for web designers. There are four useful tools at the moment. You can use the Gradient Generator which supports multiple colors and opacity stops to get amazing gradients. By using the gradient tool you can create gradients with smooth color changing effects and subtle transparencies.

Border Radius is super easy to use and a super time saver. Change all the borders selected at the same time. Noise Texture helps you create subtle background patterns with dirty pixels and noise, changing the color and values and previewing the results in real time. Box Shadow supports Blur radius changes, color changes, shadow size. Everything that you need to create great drop shadows in a single place.

css-matic

Requirements: –
Demo: http://www.cssmatic.com/
License: License Free

Arrange Images into Flexible Grid with Photoset Grid

Posted · Category: Gallery, License Free

Photoset Grid is a simple jQuery plugin to arrange images into a flexible grid, based on Tumblr’s photoset feature. Originally the plugin was created for the Style Hatch Tumblr themes as a way to use the photoset grid in responsive layouts, but they have since expanded it and released a jQuery plugin for us.

Beyond the basic usage, you can set a number of optional arguments including callback functions that are useful for adding a lightbox for high resolution images. You can download Photoset Grid jQuery plugin on Github.

photoset-grid

Requirements: jQuery Framework
Demo: http://stylehatch.github.com/photoset-grid/
License: License Free

iCheck: Super Customized Checkboxes & Radio Buttons

Posted · Category: Forms, MIT License

iCheck is super customized checkboxes and radio buttons with jQuery. iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods can be used to easily handle and make changes at customized inputs.

iCheck is verified to work in Internet Explorer 7+, Firefox 2+, Google Chrome, Safari 3+ and Opera 9+ browsers. Should also work in many others. Mobile browsers like Opera mini, Chrome mobile, Safari mobile and others are also supported. Tested on iOS, Android, BlackBerry and Windows Phone devices.

icheck

Requirements: jQuery Framework
Demo: http://damirfoy.com/iCheck/
License: MIT License

Getting More Through Polyfills with HTML5

Posted · Category: Information

One of the most stubbornly persistent misconceptions about HTML5 is that it’s effectively unusable for years to come. With that myth and the uncertainty over fragmented browser support for HTML5’s new features, it’s easy to find someone with reasons for avoiding HTML5 right now.

But while some features are legitimately not ready for use in production, many of the new APIs in HTML5 have solidified enough to be relied on in newer browsers like Chrome, Firefox 4 and Internet

Explorer 9. In fact, even Internet Explorer 6 includes support for one of HTML5’s “new” features, contentEditable. More importantly, many of the new features in HTML5 are compelling enough that waiting another decade to begin using them doesn’t make sense.

Cross-Browser Support

The most nagging issue with making the leap to HTML5 is that most of us have no choice but to support a variety of older browsers that have little or no support for the most useful new APIs. The thought of adopting a new Web technology conjures up nightmares of cross-browser inconsistencies, unmaintainable branching code, browser sniffing and a host of other problems. However, there’s an underappreciated technique that can entirely mitigate those problems for certain new features of HTML5 and still allow you to develop against the new APIs as though all your users had upgraded their browsers overnight: polyfills.

Polyfilling is a term coined by Remy Sharp to describe an approach for backfilling missing functionality in a way that duplicates the missing API. Using this technique allows you to write application-specific code without worrying about whether or not each user’s browser implements it natively. In fact, polyfills aren’t a new technique or tied to HTML5. We’ve been using polyfills such as json2.js, ie7-js, and the various fallbacks for providing transparent PNG support in Internet Explorer for years. The difference is the proliferation of HTML5 polyfills in the last year. Read the rest of this entry »

Feedly: The Best Alternative of Google Reader

Posted · Category: License Free, Tools

Google has announced it’s going to retire Google Reader. If the service has been an essential part of your media diet, don’t despair. Feedly is the best alternative of your Google Reader, partially because it’s free, cross-platform, and available on multiple devices. Plus, they make importing your Google Reader subscriptions so ridiculously easy that it’s worth a try.

You can easily organize your favorite blogs, news sites, podcasts and Youtube channels and access them all in one place or sync with Google Reader. There are multiple layout options, auto-mark as read, tagging, advanced sharing, keyboard shortcuts.

If you do not like RSS Feeds anymore, you can always follow us on Facebook, Twitter, and Google Plus. You can also subscribe to our newsletter with freebies and exclusive deals from webappers.

feedly

Requirements: –
Demo: http://www.feedly.com/
License: License Free

Create Step by Step Guide for Your Website with Intro.js

Posted · Category: Demo Tour, MIT License

Intro.js is better introductions for websites and features with a step-by-step guide for your projects. User have the ability to navigate with the mouse, or the keyboard – ←, →, ENTER and ESC to exit. It’s fast and small, with only 4 KB JavaScript and 2 KB CSS.

Better compatibility is on the roadmap, but currently it should work in recent versions of Firefox and Chrome (probably IE10, too!). It’s Free and open-source (including commercial use). It is released under MIT license.

intro-js

Requirements: JavaScript Framework
Demo: http://usablica.github.com/intro.js/
License: MIT License

Security of Mashup Applications for Enterprises

Posted · Category: Information

Beyond the buzz of Web 2.0, mashup applications (also called hybrid or situational applications) bring the promise of creating meaningful experiences by feeding other people’s data to your application. For businesses, this means consuming data without the overhead of infrastructure or data storage and being able to tap into established technology vendors such as Bing Maps, LinkedIn or Twitter. While combining components from all over the web can help you quickly build a powerful application, it can also expose your users to malicious content that sneaks into your application from your providers. How can you protect your users and still realize the potential of mashup applications for the enterprise?

In this series, I’ll investigate how to mitigate security issues that can come along with a mashup application. To frame the discussion, we’ll build an application for the fictional Vision Sciences Corporation, leveraging risk management, good-old input validation and the muscle of modern browsers to keep users safe. Each article will focus on one of these elements, starting in this article, where I’ll examine how modern browsers help isolate content. At the end of this article, you’ll understand how the browser is the first layer in your defense-in-depth strategy against malicious mashup madness.

What Are We Building?

I always find a sample project helpful to illustrate development issues. Talking about the sample lets me dive into a narrative, not just detached code. So to start, imagine the following scenario:

You are a developer at Vision Science Corporation, and your product team has requested that you build an HTML5 application for the company’s office locations around the world that shows news about health and safety risks combined with medical information distilled from Twitter.

Being a savvy developer, you know that you can get this data from a variety of sources in your organization and through external providers like Bing Maps and Twitter. Here is a breakdown of the data sources and systems for the application: Read the rest of this entry »

Deal of the Week: Ninja Graphics Kit with 60% Savings

Posted · Category: Information

Looking to better monetize your site? Having some serious issues with conversions? If you’ve got the traffic but aren’t making the profits, then you could certainly use some help. Now, don’t go throwing thousands of dollars down the drain by paying an agency to simply analyze your site and come up with some new creatives for you. Instead, do it all yourself at a fraction of the cost.

With the Ninja Graphics Kit, you’ll get all of the essential conversion-boosting graphics you’ll ever need. We’re talking one massive, ginormous bundle of high-quality, professional graphics that cater towards increasing sales on your site. And thanks to this Mighty Deal, you can convert a 60% savings for yourself!

This massive collection of conversion-exploding graphics currently sells for $39, but for a limited time only, you can get it all for a mere $14!

Page 1 of 41234»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons