Connect With WRD
feed via e-mail
feed via e-mail

Archive for the ‘Goodies’ Category

CSS3 provides us lots of styling options to create good-looking form elements.

Fancy Input, a jQuery plugin, doesn’t focus on the styling part but makes the fields attractive (and fun-to-use) by adding CSS3-powered effects.

Fancy Input

The plugin hides the input field, places a span element containing the character pressed and applies CSS3 transitions to each element (letter).

There are multiple built-in effects and it works with both input + textarea fields.

  • Tags:
  • Filed under: Forms, Goodies, MIT License
  • 2 Comments
  • A high-quality photo has the power of converting any design into something beautiful. And, that’s usually where the stock photo providers come in.

    Depositphotos, one of the biggest stock photo providers, has a huge database of photos and vector images from thousands of contributors.

    I remember their launch ~3 years ago, had used them those dates and now see that they grew to 12+ million images.

    Depositphotos

    Well, such many images can look hard to browse but they have a good categorization and search system for narrowing the results.

    It is possible to include/exclude keywords, choose orientation and filter by color (which I think is the greatest option).

    Lately, they announced the acceptance of videos from their contributors as well, so, stock videos under the same service doesn’t seem so far.

    Depositphotos Sample Image

    Pricing

    Once, stock images were costing hundreds of dollars it was hard to use them for every project. But, the pricing of Depositphotos is very reachable.

    Images have different prices for their sizes but, as a short info, web-ready images would cost ~$2-4/each dollars and print-ready ones will be ~$8-10/each which is so reasonable for the result they help us to create (the even become cheaper with the subscription plans).

    Depositphotos Sample Image

    Become a contributor

    For any photographer, becoming a Depositphotos contributor is a great way of presenting and sharing the work you created.

    They have a pretty straightforward revenue-sharing model, have a modern uploader and you can always view the stats of your inventory.

    Also, if you are shooting videos, this may be a good time to submit them in order to catch their launch of the videos section.

    Depositphotos Sample Image

    Conclusion

    You should definitely check Depositphotos, browse through their repository and see how easy + good-priced the service is.

    The dynamic column grid layouts are so popular not only because it is used by Pinterest but also because it is a great way of displaying content with different sizes.

    Wookmark, a Pinterest alternative, has released a jQuery plugin for creating such layouts, that work well on each browser, instantly.

    Wookmark jQuery Plugin

    The plugin has very few options to set: the container element, offset (vertical/horizontal distance) and width of the items, that’s all.

    Once initialized, it gets the size of the window and auto-arranges the grid (yes, it is responsive).

    For NoSQL fans, MongoDB is definitely the most popular solution with the simplicity and cross-platform support offered.

    In order to manage MongoDB databases easily, Genghis, a single-file, self-hosted and web-based solution is pretty handy.

    Genghis MongoDB Admin

    It can be installed either as a Ruby gem or as a standalone PHP script.

    Genghis is capable of managing any number of databases on any number of servers with support for managing databases, collections and documents.

    The interface of the application is responsive and works well down to mobile.

    Maplace.js is a jQuery plugin that simplifies integrating Google Maps into websites.

    It works with the latest Google Maps API (v3) and has methods for adding markers + custom content and drawing paths, polygons or routes.

    Maplace.js

    There are options for defining the zoom level or controls to be displayed (zoom, map/satellite..).

    The plugin allows customizing almost everything from the icons used to texts and colors.

    It has callbacks on each action and comes with a very well documentation.

    Spectrum is a jQuery colorpicker plugin that probably comes with all the features you are looking for.

    It is image-free (only CSS and JS) and can be used for all browsers or only as a polyfill for the input[type=color] of HTML5 .

    The picker is actually familiar to designers/developers as it is the same one that comes with WebKit DevTools (created by the same developer) but now available as a jQuery plugin.

    Spectrum - jQuery Colorpicker

    It has support for color palettes by storing/displaying the colors you chose, the default selected color can be set or it can be configured to only display the palette with pre-defined colors.

    Alpha transparency selection is available, can be always visible (without clicking to a picker icon) and supports multiple color formats.

    Spectrum can be customized with CSS and it works on mobile as well.

     

    When working on mobile web apps, you may have experienced that browsers have differences in their gesture APIs.

    DeepTissue.js is a library that removes such differences (of MSPointer, WebKit Touch and mouse pointer APIs) and provides a cross-browser gesture handling library.

    DeepTissue.js

    It has support for all the major events like tap, double tap, tap and hold, rotate, scale or swipe.

    The library is standalone but a jQuery-friendly version is also under development.

    Twitter has open sourced a very nice project named Typeahead.js for building smart auto-complete form fields.

    It comes as a jQuery plugin, shows suggestion as-users-type and can feature top suggestions with the help of styling.

    Typeahead.js

    The plugin can work with both local or remote datasets and it is optimized for speed as it can prefetch the dataset, store it on the client-side and run the queries quickly.

    Typeahead.js simply converts any textfield into an auto-complete field, accepts JSON as the data source and has various settings for optimizing remote requests (rate limiting, maxConcurrentRequests, etc.).

    Lots of content is produced on social networks and using that content inside websites is usually a smart choice.

    That is usually common with Twitter as “displaying the latest tweets” (check jQuery Twitter Plugins) and you may want to do the same for Instagram as well.

    Here is a collection of jQuery plugins for fetching images, presenting them and even interacting with the Instagram API much more when needed:

    Spectagram

    Spectagram - jQuery Instagram Plugin

    A feature-rich jQuery plugin that can fetch photos from Instagram.

    It has support for getting photos of a specific user or popular or recently tagged ones.

    The HTML format can be easily customized and images can be retrieved in pre-defined sizes.

    Instajam

    Instajam

    Instajam is an almost complete JavaScript wrapper for the whole Instagram API.

    It makes use of jQuery for working with JSONP requests and comes with features like getting:

    • user: likes, general info, feed, followers/following, search and relationships
    • media: search, popular ones, likes/comments of a specific item
    • tag: feed, meta and search
    • location and geography: getting media from a specific location/geography and search

    jQInstaPics

    jQInstaPics

    A to-the-point jQuery plugin for only displaying images of a user.

    There are very few things to setup and the images are retrieved as an unordered list.

    InstaLib

    InstaLib

    This jQuery plugin, similar to InstaJam, wraps the (almost) complete Instagram API.

    It can pull images, likes follows/followers of users and photos.

    Also, InstaLib can push data as well (liking and commenting)

    InstaStream.js

    InstaStream.js

    A simplistic plugin for only getting the images of a user and displaying them as a gallery.

    Just define the number of images to be pulled and that’s it.

    jQuery Instagram

    jQuery Instagram

    The plugin is only supports getting images but supports fetching by user, popular, tags and location.

    Also, the image quality can be defined as well.

    Instafeed.js (non-jQuery)

    Instafeed

    Instafeed.js is a standalone Instagram JavaScript library.

    It can get photos with each possible method (user’s photos, photos by tags/location/popular) and sort them as well.

    And for templating, it has functions for easily displaying the meta items of a photo.

     

    jui_datagrid is a jQuery plugin, making use of jQuery UI, that comes with lots of features for presenting and managing data.

    It has built-in pagination, sorting, editing, deleting and advanced searching.

    The datagrid can be used with any scripting language (a PHP class comes with the download package) and its look can be totally customized (Themeroller-friendly).

    jui_datagrid

    A “preferences” option enables users to choose which columns and features to show/hide.

    And, a powerful API exists for controlling/integrating the datagrid however wanted.

    Uptime Robot
    feed-holder
    FeedBurner
    PSD2HTML.com
    HotScripts Marketplace