25 useful tools, libraries and resources for web developer

    25 useful tools, libraries and resources for web developer

     

    25 Useful Tools Libraries And Resources For Web Developer

    Now a day the look and feel of the website are more important than development. so it is important to provide a user-friendly and robust front end. In the market, there are various plugins and frameworks available which are very useful in our development. You can start using them very easily. Main benefits using such tools and libraries are that you don’t need to worry about functionality and don’t need deep knowledge of specific technologies - that’ll save your time.

    In this article i am going to share some useful tools and libraries for javascript and css.

    You might know some of these and I’m glad if someone discovers new features or other useful information one didn't know till now.

    Javascript libraries

    Javascript Libraries

    Source : superdevresources.com/free-javascript-libraries-web-apps/

     

    Fullpage.js

    This library allows you to create fullscreen scrolling websites as well as adding landscape sliders in multiple sections of your website. This is a very useful library for One-Pagers.

    Download | Demo

     

    Owl Carousel

    This is personally my favorite slider plugin of all slider jQuery plugins. This library is useful to easily create simple sliders. It’s very easy to integrate and to use in your HTML Template.

    Download | Demo

     

    jQuery custom content scroller

    A very useful tool when you need custom scrollbar in your template. This library is highly customizable custom scrollbar jQuery plugin. It provides vertical scrollbar as well as horizontal scroll bars. This library provides also a wide variety of built in option for scrollbars. Different Themes are available also!

    Download | Demo

     

    matchHeight.js

    If you need to equalize heights of different columns or floating boxes, this library is useful for you.

    Flexboxes and css grids are the latest trends so if you are using flexboxes then i think this plugin is helpful for you.

    Main features of this plugin are :

       

    • match the heights for groups of elements automatically
    • anywhere on the page and anywhere in the DOM
    • responsive (updates on window resize)
    • row aware (handles floating elements and wrapping)
    • handles images and other media (updates after loading)
    • data attributes API
    • tested in IE8+, Chrome, Firefox, Safari, Android, iOS
    •  

    Download | Demo

     

    fancyBox

    Most used library for image popup from all other image popup plugin.

    Main features of this plugin are :

       

    • Mobile first: Supports most of the common touch gestures - double-tap, pinch-in and pinch-out for image viewing; horizontal swipe for navigations.
    • Responsive: Fully Responsive and all graphics, including loading icon, are created with CSS only.
    • Quick & Easy Setup : Just two files. Can be implemented without writing a single line of JavaScript.
    •  

    Download | Demo

     

    Highcharts

    A library for charts.

    Main features of this plugin are :

       

    • Highcharts : Create interactive charts easily for your web projects.
    • Highstock : Highstock lets you create stock or general timeline charts in pure JavaScript.
    • Highmaps : Interactive map charts with drill down and touch support.
    • Highcharts Cloud : Online charts for non-techies.
    •  

    Download | Demo

     

    Animsition

    It’s a simple and easy jQuery plugin for CSS animated page transitions. It provides easing and css animations to page when you reload page.

    Download | Demo

     

    TwentyTwenty

    The best jQuery plugin for two image comparison using draggable slider.

    Main features of this plugin are :

       

    • Responsive and functional on all devices
    • Doesn't require images to work
    •  

    Download | Demo

     

    Wow.js 

    Cool Animations for page scrolling.

    Download | Demo

     

    Dragdealer.js 

    This library for 2d dragging and tapping, mouse and touch.

    Download | Demo

     

    Select2 

    This library is too much helpful for developers. It will replace select box by jQuery. Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

    Download | Demo

     

    CSS libraries / Design stuff

    CSS Libraries Design Stuff

    Source : medium.com/ux-power-tools/sketch-libraries-how-they-work-and-the-crazy-stuff-you-can-do-with-them-fc10f142ac80

     

    Animate.css

    It’s CSS Animation library.

    Download | Demo

     

    Flat UI Colors 

    It provide list of cool colors.

    Download | Demo

     

    Material design lite

    Latest trending Google’s material design Framework

    Download | Demo

     

    Materialui.co 

    Provides resources for material design Framework

    Download | Demo

     

    Colorrrs

    It generates random cool and decent colors.

    Demo

     

    CSSpin 

    Provides wide range of CSS spinners.

    Download | Demo

     

    Font awesome

    Provides wide range of CSS spinners.

    Download | Demo

     

    Bootstrap

    Widely used Framework. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.

    Download | Demo

     

    Foundation

    Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable.

    Download | Demo

     

    Useful online tools

    CSS Libraries Design Stuff

     

    Cleancss

    This is provide many functionalities like CSS Formatter, CSS Minify, HTML Formatter, Javascript Formatter, Javascript Minify, JSON Editor, JSON Validator, JSON Formatter, JSON Minify and many more…

    Visit Link

     

    Fontie

    Widely used online tool for converting web fonts.

    Visit Link

     

    Tinypng

    Best tool for optimizing image without any image distortion.

    Visit Link

     

    RealFaviconGenerator

    Provides favicons for all devices from one image file.

    Visit Link

     

    CSS Triangle

    It’s not a any online tool but this one very useful to create different triangles using CSS only

    Visit Link

    Leave A Comment

    Categories

    • TYPO3 CMS

      Categories

      • TYPO3 Security
      • T3BD DAY
      • iTUG Usergroup
      • T3EXT DAY
      • T3BLOG DAY
      • T3VIDEO DAY
      • T3POLL DAY
      • TYPO3 Extension
      • TYPO3 Template
      • TYPO3 Translation
      • TypoScript
    • Neos CMS
    • TYPO3 Flow
    • WordPress
    • jQuery
    • Responsive