WebAppers

/ best free open source web resources /

Shopify

Atomic – The Fastest Way to Design Beautiful Interactions

Posted · Category: Tools

As of today anyone can set up an account and start prototyping in seconds. Atomic approaches prototyping in the way designers think: design your different states as separate pages, then create automatic animations between them.

Create your designs from scratch in Atomic, or bring your assets in from another drawing tool. Draw Hotspots over elements in your design and link pages together into a prototype. You can choose to animate these transitions between pages. When the same object exists on both pages, Atomic will animate any changes automatically. These connections between objects are created when you copy-and-paste them from one page to another, or when you duplicate a page. Anything that only exists on one page will be faded in or out. Happy prototyping.

atomic

Requirements: –
Demo: https://atomic.io/
License: License Free

Apache Directory Index You’ll Ever Need

Posted · Category: MIT License, Tools

LastAutoIndex is a completely customizable auto index, and is designed to replace Apache’s pre-installed auto index. Installation is very simple, in your server root .htaccess, just disable Apache’s default indexer, and a add LastAutoIndex as a directory index. You can also customize the theme, checkout the src/public/themes directory.

directory-index

Requirements: –
Demo: https://github.com/Project-CleverWeb/LastAutoIndex
License: MIT License

Adds Interactive Programming Challenges to Any Page

Posted · Category: MIT License, Tools

Challenger is a drop-in JavaScript library that adds interactive programming challenges to any page. Challenges are flexible and expressive, and are super simple to write. A challenge has requirements based on code structure and program output, and gives users a code editor to experiment in. When new code is written, it’s run in a sandbox and the output is analyzed. Challenges can be presented as one-off tests or linked together to form courses.

challenger-js

Requirements: JavaScript Framework
Demo: http://rileyjshaw.com/challenger/
License: MIT License

Build Better Error Pages in 60 Seconds

Posted · Category: License Free, Tools

Better Error Pages helps you build free 404, 500-level, and maintenance pages in 60 seconds. Simply give them some info like your website URL, support email address, and whether or not you have a system status page. And then choose from one of the templates and then tweak the little things like colors, images, and shadows. At the end, they will zip up and email you all the files in a nice little package.

better-error-pages

Requirements: –
Demo: https://better-error-pages.statuspage.io/
License: License Free

The Marvel Comics API for Developers

Posted · Category: License Free, Tools

The Marvel Comics API is a tool to help developers everywhere create amazing, uncanny and incredible web sites and applications using data from the 70-plus years of the Marvel age of comics. The Marvel Comics API is a RESTful service which provides methods for accessing specific resources at canonical URLs and for searching and filtering sets of resources by various criteria. All representations are encoded as JSON objects.

You will only be able to call most services a certain number of times within a particular time period (calculated on a rolling basis). Most services default to 1000 calls per day but some services may have different rate limits. You can view your particular rate limits on your developer account page. If you attempt to make more API calls to a service than your allotted amount, the call will be rejected by the Marvel Comics API.

marvel-api

Requirements: –
Demo: http://developer.marvel.com/
License: See License Agreement

Learn to Type Faster with Ratatype Typing Tutor

Posted · Category: License Free, Tools

Ratatype is an online typing tutor and a great website for people who want to type better. Start mastering your skills with us, challenge your friends or simply get a typing certificate. Typing is a more important skill than writing nowadays. And if you do it slow you are just wasting your time. Your time deserves much more than this.

If you increase your typing speed by 30% you can save 20 minutes daily. That’s 1 year of your life saved in 20 years! That is why Ratatype is here. We want to save your life! At least part of it. So, Ratatype is a website for you to learn touch typing online. It is delightfully easy and completely free.

ratatype

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

Lazyr.js – A Small Library for Lazy Loading Images

Posted · Category: MIT License, Tools

Lazyr.js is a small, fast, modern, and dependency-free library for lazy loading images. Lazy loading boosts page speed by deferring the loading of images until they’re in (or near) the viewport. This library makes it completely painless – maximizing speed by keeping options to a minimum.

The scroll event has been debounced to minimize the weight on the browser, and images are revealed within rAF to ensure optimal rendering. For each image, put a placeholder in the src attribute, the regular image in the data-layzr attribute, and the retina image in the data-layzr-retina attribute.

layzr-js

Requirements: JavaScript
Demo: http://callmecavs.github.io/layzr.js/
License: MIT License

A Responsive, Magazine-like Layout with Animated Grid

Posted · Category: License Free, Tools

Today Codrops has shared a Grid Item Animation Layout with us. The responsive layout has a sidebar and grid items that animate to a larger content area when clicked. In the first demo the content area fills the grid and in the second demo, the whole layout moves to the left while the grid item is expanding. The expanding element is not animating in width and height but instead its original dimensions are already of the expanded size and we simply scale it down initially. By setting classes, we control the transitions of all the elements: the grid item elements’ disappearance and the content elements’ appearance.

The layout is responsive down to mobile using a media query technique that involves setting the breakpoints based on the grid item size and the sidebar. For this we use Sass, which allows us to set these kind of variables easily. The approach we are using here is mainly mobile-first, but we also do some specific restructuring for small screens.

grid-layout

Requirements: –
Demo: http://tympanus.net/Development/AnimatedGridLayout/
License: License Free

Google Prediction API with RESTful Interfce

Posted · Category: Tools

You can use Google’s Prediction API machine learning algorithms to analyze data and predict future outcomes using a familiar RESTful interface. You can easily predict future trends using historical data. Route messages, detect spam and recommend products for users by using Prediction API.

Your data is replicated across multiple data centers using Cloud Storage. Most prediction queries take less than 200ms. Greater performance is available. Prediction API can integrate with App Engine, and the RESTful API is available through libraries for many popular languages, such as Python, JavaScript and .NET. Limited usage is free for the first six months. Beyond that, Prediction API’s comprehensible pricing comes with a 99.9% availability service level agreement. Like other Cloud products, you pay for what you use.

prediction-api

Requirements: –
Demo: https://cloud.google.com/prediction/
License: See License Agreement

Rainyday.js – Rendering Raindrops with JavaScript

Posted · Category: GPL License, Tools

The idea behind Rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation of raindrops falling on a glass surface. Rainyday.js features extendable API, collision detection and is easy to extend with your own implementations of different animation components. It is a pure JavaScript library which uses HTML5 features so it’s supported by most of the modern browsers. It is licensed under GNU GPL license.

rainyday-js

Requirements: JavaScript Framework
Demo: http://maroslaw.github.io/rainyday.js/
License: GPL License

Page 1 of 49123456789»...
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons