Wednesday, 6 April 2016

Awesome Tools and Resources for Web Developers

Design

Bootstrap Studio

Bootstrap Studio is a powerful drag and drop builder for the Bootstrap framework. It has a rich library of components and tools for making responsive layouts. With it you can speed up your development and test on multiple devices at once. The app is not free, but it will pay for itself many times over. It is a great investment for every web developer.



Subtle Patterns

An amazing resource for high quality textured patterns. A lot of great artists have contributed there to create a collection of really sharp and versatile images. Oh, and browsing on their site is quite enjoyable as well.


Blokk Font

Blokk is a font specifically made for mock-ups and demos and is an excellent looking alternative to Lorem Ipsum. It could come in handy in the case of an edge of the art design that wouldn’t usually mix well with latin on it.

FreePik

Freepik offers a colossal collection of vector art, illustrations, SVGs, PSDs and stock photos. Everything is free and categorized neatly so you shouldn’t have any problem finding what you need, although you might have a hard time choosing, since there are over 1,4 Million items to date.


Awesome Images

This one is a priceless collection of stock photo material. It features over 20 resources – all of them free and with their licences politely explained.


Google Fonts

You probably know about this one by now but we couldn’t omit it anyway. It’s Google’s font library which is by far the best place to go to when in the search of web-friendly fonts.


By People

ByPeople.com is a content network of useful, constantly updated resources. By People gathers a big deal of beautiful, clean and up to date graphic freebies, Code Snippets and Useful Resources, organizing them into lists which can even be bulk downloaded from the site directly.


Snipplr

Snippler offers its users the ability to upload pieces of useful code and share it with the rest of the us. There are thousands of snippets in javascript, php, css, ruby and other languages. As an alternative, you might want to checkout CSS-tricks’s snippets, or github’s gists.

HailPixel

A fun to use color picker. It handles choosing the hue, lightness and saturation of colors in a unique and cool way.

Lokes HD Hakar

An awesome online service with a brilliant idea behind it. Color Thief lets you upload an image and get the color palette for it, as well as its dominating color. Very helpful for making design decisions.

Dribbble

Dribbble is a community of web designers, graphic designers, illustrators, icon artists, typographers, logo designers, and other creative types share small screenshots (shots) that show their work, process, and current projects. A great place to explore new design ideas.

Patternizer

This app makes creating stripe patterns easy as child’s play. Patterns can be saved and shared with anyone, allowing for collaboration and remixing.


Project Parfait

Project Perfait is an Adobe product that gives us the opportunity to get important info about a PSD right in your browser. However, it doesn’t support PSD editng (at least yet).


Coding

Emmet

Emmet is a plugin for many popular text editors which greatly improves the speed with which you write HTML by allowing you to transform CSS-like selectors into full-blown HTML very fast.


JavaScript Beautifier

On jsbeautifier.org you can find a tool that beautifies any scrambled or minified piece of JavaScript or HTML code. Another tool that you might find interesting, is this visual JSON editor.


CodePen

CodePen has grown into a platform for showcasing impressive CSS3 and JS demos. Whether you are on the hunt for cool buttons or simply looking for some inspiration, do check CodePen out.


W3 Validator

The Validator is a free service by W3C that helps check the validity of Web documents. It can process documents written in most markup languages and give you insight on what might be wrong with the code. This tool should be your first step when trying to find bugs with your HTML.


mincss

Mincss is a tool that when given a URL downloads that page and all its CSS and compares each and every selector in the CSS and finds out which ones aren’t used. The outcome is a copy of the original CSS but with the selectors not found in the document(s) removed. Some related tools that you will find interesting are refresh-sf for minifying CSS/JS/HTML, Prefixr and the autoprefixer library for adding vendor prefixes to CSS3 rules, and the CSS3 gradient editor.

Koala App

A wonderful cross-platform app that compiles your less/sass and coffee files automatically.


jsfiddle

Jsfiddle.net is an amazing place for writing and sharing code. It features panels for writing the CSS, Html and script of your project and also lets you include libraries such as jQuery, AngularJS and others. Then you can run the code in the app itself or save it and pass it around.

Hurl

This is a tool for testing APIs. You choose the request method, customize headers and POST parameters, add basic authorization or OAuth credentials, and even follow redirects. Then view the nicely formatted request and response.


SublimeText

Sublime Text is a sophisticated text editor that lets you type in and play around with text or code in amazing ways. It rose into prominence recently, but there are lots of alternatives for the “slickest code editor” crown. Some that are worth watching are github’s new Atom editor and Adobe’s Brackets. Not to mention VIM and Emacs, which have been around for quite a while and have large communities of developers using them.

Cloud9

Cloud9 is a cloud-based development environment that gives you a terminal to your private Ubuntu VM, among other powerful features. Alternatives include Nitrous.io and Codio and Code Anywhere, among others.


Heroku

Heroku was the first major player in the platform as a service boom that hit developers by storm. Before it, we relied on cheap hosting providers with horrible reliability to host our websites (or setting up our own servers). But heroku introduced git push deployments and we were spoiled for life. If you want to be in full control of your servers, you might want to try dokku instead.


Vagrant

Vagrant is a tool for building complete development environments. With an easy-to-use workflow, Vagrant lowers development environment setup time to make the “works on my machine” excuse a relic of the past. There is another popular way for running virtual machines with other operating systems on your computer – VirtualBox.


Hosting and Browser

PingDom’s Website Speed Test

This is an online Website Speed Test to help you analyze the load speed of your websites and learn how to make them faster. The results and analysis it gives you are very in-depth and informative. Another tool that will help you with optimizing the speed of your site is Google’s Page Speed Insights, which will give you actionable advice.


Domai.nr

With domai.nr you can check the availability of a domain name and get suggestions on similar names. Works quite well, and fast too. One more tool that comes in handy is Lean Domain Search, which checks thousands of domains for availability for you.


Browser Shots

Browershots is an online tool that simulates how a webpage looks on different browsers and gives you “screen” shots to inspect.


Piwik

Piwik is an app that gives you extensive information about your users and their behavior on your website. You can use this in additional to the venerable Google Analytics.


Responsinator

Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices.

Whats my browser size?

Measures the size of your browser window. Simple as that but very useful nonetheless.


Image processing

Real Favicon Generator

This one is still in beta but still is a great tool for creating favicons. Instead of giving you just one basic icon, realfavicongenerator.net lets you create specific icons for every OS.


Pixlr

Pixlr is an amazing image editor with rich functionality. It works similarly to the way offline image editing software do, with the difference that this launches straight in the browser. Although it has been around for a number of years, it is still one of the best free online image editors out there.


Place it

Placeit.net is a tool for creating awesome mock ups for your website or demo by placing them on the screens of computers and devices in stock images. It includes hundreds of cool designs to choose from and is rather easy to use.


Place hold

Placehold.it helps you create dummy images for usage as placeholders in designs. After you select the size of your pic you can simply copy the provided link and put it in the img tag. And of course there is an alternative with images of kittens.


Pic Resize

This one is called picresize(.com) but what it can do goes beyond what its name suggests. This neat tool lets you apply filters, crop and convert the file format of your image.


Collaboration tools

HipChat

With HipChat you can team up with your coworkers in real time. Supports file sharing, video chat and real-time screen sharing.


GitHub and Bitbucket

Git made version control accessible to the masses, and Github revolutionized the way developers collaborate. Github is the most popular repository hosting website in the world and gives you an unlimited number of public repositories for free. If you need to host your private repos for free, though, you can take a look at Bitbucket.


Chrome extensions

Hasher

Hasher computes cryptographic hashes such as MD5 and SHA-1. It’s entirely implemented in JavaScript and all calculations are performed on the client side.


Visual Event

This extension shows all events bounded on each dom element. Could be of quite some help when dealing with complex JavaScript event handlers.


Page Ruler

A quick way to find out what the width, height and position of a screen segment is.


SONView

A Chrome and Firefox add-on for reading and validating JSONs in the browser.


SEO Serp Workbench

A chrome app that gives you detailed information about the search position of multiple sites according to a keyword.


ColorZilla

A Firefox plug-in that was recently made available to Chrome. It offers rich functionality when it comes to handling colors in the browser.


Learning Resources

Tutorialzine

Tutorialzine is the very site you are on right now. We publish awesome tutorials and articles on web development every week. Browse our large collections of tutorials and articles and be sure to subscribe for more!


Codecademy

A great place for beginners in coding or people who want to learn a new language. Features entertaining tutorials on the most popular programming languages and APIs.

CodeSchool

Video courses on Ruby, Javascript, HTML/CSS and iOS development. There are lessons and exercises here for both elementary and in-depth stuff.


Bento

Bento is a big collection of free coding tutorials. You can find information here, not only where you can study about the mainstream languages, but also about things like ‘elixir’ and ‘backbone.js’.



Misc

Coding soundtrack

There is nothing more soothing that writing code to the sound of rain. The two most popular sites are Rainy Mood and Raining.fm. The latter one gives you sliders to control the intensity of rain and thunder. Another site, that gives you the sounds of programmers at work as a background is Coding.fm.








Tuesday, 8 March 2016

80+ Free Web Design Resources

A. Free Design Resources

Freebbble: Should you want to have more freebies for your web design, visit Freebble. It offers a lot of high-quality designs that are for free.

AllFreeStock: Great place to find free stock photos, mockups, videos, sound effects and icons. And their site itself is beautiful and easy to use.

Dribbble: Dribbble search results for “freebie”. An absolute freebie treasure.

Graphic Burger: Graphic Burger offers tasty design resources that are high resolution.

Pixel Buddha: If you are working on websites for professionals, you should consider Pixel Buddha. It is loaded with premium resources that are for free.

Premium Pixels. Is your website meant to showcase your creative works? If yes is your answer, then, you should download Premium Pixels for free.

Fribbble. This offers you PSD resources that you can use in more ways than one.

Freebiesbug. If you want to incorporate the latest PSDs and other resources in your website, you should download Freebiesbug.

365 PSD. You can have numerous PSDs and use a different one every day as you can download a new one on a daily basis.

Dbf. This is Dribbble & Behance best design freebies that can help you in more ways than one.

Marvel. These are free resources from designers who have the respect of their colleagues and clients. Certainly, you need to check this resource out.

UI Space. You can get excellent quality freebies that are hand-crafted.

Free Section of Pixeden. You can get free design resources from here.

Free Section of Creative Market. You can get freebies every Monday.

Teehan+Lax. This is the best resource for DiOS 8 GUI PSD for iPhone 6 and iPad.

Freepik. You can get iFree graphic resources here.

Tech&All. This offers PSD, Tech News, and other resources without any charge at all.

Tethr. Without question, this is the most impressive IOS design KIT ever.

B. Color Pickers

With the following free color pickers, getting the best color for the images, fonts, or background of your web design is a walk in the park.

Material Palette: This is very helpful for you in generating and exporting the color palette of your material design.

New Flat UI Color Picker: Without question, this is a must-download, especially if your UI makes use of the trendy flat design. The colors can simply make your website more attractive despite its flat design.

Flat UI Colors: This is another must-download for the believers of the flat design. The colors are simply amazing.

Coolors: Without question, you should download Coolors if you are the kind of designer who wants to get the colors of your website done not just impressively but fast, too. This is a must-download for cool designers.

Skala Color: If you want the color of your images and fonts to stand out and contribute to the overall appeal of your website, you should not dilly-dally in downloading Skala Color.

Couleurs: This resource makes it easy for you to grab and tweak the colors you see on screen. Playing with colors has never been this easy and fun with this app.

Material UI Colors: Whether the website that you are working on is for the web, iOS, or Android, you can easily use this Material UI Colors. This will not only make things easy for you; your web design can be a standout, too.

Colorful Gradients. This is another must-have because you can effortlessly have color gradients that are generated automatically by a computer.

Adaptive Backgrounds. If you have this resource, you can easily extract and copy dominant colors from the images that you have.

Brand Colors. If you go for this resource, you can easily achieve the look, especially the colors, of the famous brands.

Paletton. Coming up with your website’s own color scheme will be a lot easier with Paletton.
0 to 255. Finding any color variation becomes a lot easier for web designers with this resource.

Colour Lovers. With this resource, you can easily come up with your own colors, color palettes and patterns. You can share what you have created, too.

Adobe Color CC. This gives you color combinations that have been created by the Kuler community.

Bootflat. If you are working on a website that has flat designs, you should try this resource.
Hex Colorrrs. Converting Hex to RGB is easy with this resource.

Get UI Colors. You can have awesome UI colors with this tool.

Coleure. This is a nifty color picker tool.

Colllor. Useful color palettes generator.

Palette for Chrome.This enables web designers to create a color palette extracted from any image.

C. Inspiration

At times, the most difficult part of any project is to start it. You may already have ideas floating in your head. Of course, banging your head against the wall won’t help. Hence, why not take inspiration from some of the best design resources on the web? With these sources, coming up with a trendy and standard web design is a piece of cake.

MaterialUp. Get your daily material design inspiration from MaterialUp.

FLTDSGN. Are you working on a flat design website? This resource gives you a bountiful of inspirations daily with the exceptional showcase of the UI apps and design websites.

Site Inspire. Are you running out of creative juices on how to make the best website for your client? Go to Site InspireWeb design inspiration.

UI Cloud. You should check this out as it is the world’s largest UI design interface database in the world. This can really help you come up with a good UI design that will provide a great deal of ease to the users of the website you have designed.

Moodboard. This resource can help you create an impressive and useful moodboard, whose result can be shared to others.

Crayon. Are you working on a website design that is meant to market a product or a service? Check out Crayon to get the most important and helpful ideas with your design.

Land-Book. If you are working on the product landing page gallery of a website, Land-Book can surely help you come up with a design that will surely entice prospective clients to go for the products that the website is offering.

Ocean. Aren’t you sure of the design that you are contemplating on using? Visit Ocean and learn from other web designers as it is a community where designers let their thoughts known.

Dribbble. This resource can also help you learn from or teach other web designers regarding various design issues.

Behance. This is another resource where you can showcase your works or learn from the works of other web page designers.

Pttrns. This is one of the best resources that you can check out, should you be in doubt about your ability on using mobile user interface patterns.

Flat UI Design. This a useful inspiration board that can help you in more ways than one.

Awwwards. Learn and take inspiration from the awarded websites for their creativity and innovation. For all you know, your work will be the subsequent multi-awarded website design as you learn from those that have been recognized.

The Starter Kit. This is another helpful resource for both web designers and web developers.

One Page Love. If you are working on the design of a one-page website, you should check out One Page Love and be inspired on how to make your work more visually appealing and user-friendly.

UI Parade. Apart from knowing various interface design tools that you can use, User interface design tools and design inspiration.

The Best Designs. This is another resource where you can find only the best web designs.

Agile Designers. Whether you are a designer or a developer, this is one of the best resources that you should consider checking out.

Niice. Without question, this is a search engine with taste. With only one search, you can already gather hundreds of sources. You can search the best sites in just one place. Coming up with smart and impressive moodboards that can make your concepts stand out is a breeze with Niice. It is so nice, indeed.

D. Free Stock Photography

Stock Up. This is one of the best stock photo websites that offer a wide range of appealing images.

Pexels. Without question, Pexels has the best free photos in one place-from summer, business, abstract, sunset, art, black-and-white, car, building, people, vintage, technology, street city, nature, and many more, you can surely find an image that you can use for the website that you are working on.

All the Free Stock. This website offers not only free stock images and videos, but music and icons as well. As this website is also listed under the Creative Commons Zero license, you are free to use its photos even for commercial purposes, even without spending a single centavo.

Unsplash. Again, this is another stock photo website that enables you to use its high resolution stock images. For every 10 days, you can download 10 new photos.

Splashbase. Finding the photo that you need and discovering other high resolution images and videos are all possible with this website. They are free, too.

Startup Stock Photos. You can easily start something and go with the free photos that you find in this website.

Jay Mantri. Apart from being free, you can do anything that you wish to do with the downloaded pics from Jay Mantri. With its high resolution photographs and a little imagination, creating magical images is a breeze.

Moveast. There is no need for you to worry about using photos from this website for free as this is about the journey of a Portuguese man traveling East, who believes that every photo on the Internet should be used by anybody without any cost at all.

Stokpic. If the other mentioned stock photography websites cannot give you the photos that you are looking for, you might just find it here. They’re totally free, as well.

Kaboompics. Without question, this is the best way to download free photos that are absolutely stunning.

Function. This website offers free photo packs.

MMT. This website offers some of the most impressive free stock photos on the Internet as the photographs are taken by Jeffrey Betts.

Travel Coffee Book. This website abounds with high resolution images taken from travels around the world. Yes, they are for free, too.

Designers Pics. You can easily find engaging photographs here, whether for your personal or business use.

Death to the Stock Photo. This website sends you great images every month for free.

Foodie’s Feed. Working on a food-related business website? Foodie’s Feed has a lot of high resolution food pictures that you can use and make your website users salivate.

Mazwai. High definition video clips and footages are available for free in this website.

J├ęshoots. If you want to avail of new and modern photos for free, this is the ideal stock photography website for you.

Super Famous. This stock photography website features the works of Folkert Gorter, a Dutch interaction designer.

Picography. This website, likewise, features free hi-resolution photographs.

Pixabay. This is another website where you can get free high-quality images.

Little Visuals. You can get 7 hi-res photos in your inbox every week. That’s one new high-resolution photo every day.

Splitshire. Mouth-watering free stock photos.

New Old Stock. If you want to use vintage photos from the public archives, check out this site.

Picjumbo. This is another site where you can download completely free photos.

Life of Pix. The photos from this website are not only for free; they are high resolution, too.

Gratisography: If you can’t find the free high-resolution photos that you want, this website might just have it.

Getrefe. More free photos that might just be of big help to the design that you are working on.

IM Free. This website boasts of a curated collection of free photograph resources.

Cupcake. This is, without question, a photographer’s treat, specifically by Jonas Nilsson Lee.

The Pattern Library. If you are looking for free patterns for your projects, this is the website worth checking.

Public Domain Archive. This website offers new 100% free stock photos.

ISO Republic. This stock photography site offers high-quality photos that are for free.

Paul Jarvis. Paul does not just give you valuable tips on design, but his site also teems with a lot of high-resolution photos which you can use for free.

Lock & Stock Photos. Before deciding on what photographs to use, check this website for more free stock photos that you can choose from.

Raumrot. This website also offers a wide array of choices for free high-resolution images.

Bucketlistly. This website offers a wide array of travel photos that can surely make your web design more visually appealing.

Magdeleine. You can get a free high-resolution photograph every day.

Snapographic. You can pick from a wide array of photos featured in this website and use your choices either for personal or business use. Free stock photos for personal & commercial use.

E. Free Typography

TypeGenius. With TypeGenius, you can easily find the most suitable font combo for your next project.

Font Squirrel. This offers 100% free commercial fonts.

FontFaceNinja. This browser extension enables you to find what type of web font a particular site uses.

Google Fonts. This is a free and open-source fonts that are optimized for the web.

Canva – Know more about your fonts with this concise but helpful glossary about fonts

Beautiful Web Type. You can find the best typefaces from the Google web-fonts directory here.

DaFont: This site houses fully downloadable fonts that are for free.

1001 Free Fonts. This site has a wide selection of free fonts that can make the website that you are working on more user-friendly and visually appealing.

FontPark. Without question, this is the web’s largest collection of free fonts.

Font-to-width. This source contains fit pieces of texts that are neatly within their containers.


F. Free Icons

Fontello. This site generates icons.

Flat Icon. This is a search engine for 16000+ glyph vector icons that can help you choose the best icons to make your website standout.

Material Design Icons. This site offers 750 open-source glyphs by Google that are for free.

Font Awesome: Without question, this is the best resource for the iconic font and CSS toolkit.

Glyphsearc. This is meant to help you search for icons from other icon databases.

MakeAppIcon. With just a simple click, you can already have app icons of all icons.

Endless Icons. If you are into flat design, you should visit this resource as it offers free flat icons and other creative stuff.

Ico Moon. This is an icon generator that can generate more than 4000 free vector icons.

The Noun Project. This offers thousands of glyph icons made by different artists.

Perfect Icons. This is a tool for the creation of social icons.

Material Design Icons. This features 750 open-source glyphs by Google that are for free.

Icon Finder. This offers free icon section of the website. Without question, this is a must-try.

Free Round Icons. This includes a Doodle Set, Flat Set, and Vector Line Set. Very useful, indeed.

Icon Sweets. This includes 60 free vector Photoshop icons that can, without question, make your website more fun and entertaining.

G. Other Useful Stuff

UI Names. This generates names for use in designs and mock-ups randomly.

UI Faces. With this, you can find and generate sample avatars for user interfaces with ease.

UI Blurbs. This offers quick user bios that you can use for your mockups.

Copy Paste Character. This enables you to come up with an easy click-to-copy.

Window Resizer. This can help you monitor how your design works on various screen resolutions.

Sourcehttp://1stwebdesigner.com/free-web-design-resources/

Tuesday, 23 February 2016

100+ Awesome Web Development Tools & Resources

Awesome Web Development Tools & Resources

Javascript Libraries

jQuery: A fast, small, and feature-rich JavaScript library
BackBoneJS: Give your JS app some backbone with models, views, collections, & events.
D3.js: A JavaScript library for manipulating documents based on data.
React: Facebook’s Javascript library developed for building user interfaces.
jQuery UI: A curated set of user interface interactions, effects, widgets, and themes.
jQuery Mobile: HTML5-based user interface system designed to make responsive web sites.
Underscore.js: Functional programming helpers without extending any built-in objects.
Moment.js: Parse, validate, manipulate, and display dates in JavaScript.
Lodash: A modern utility library delivering modularity, performance, & extras.

Front-end Frameworks

Bootstrap: HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
Foundation: Family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device.
Semantic UI: Development framework that helps create beautiful, responsive layouts using human-friendly HTML.
uikit: A lightweight and modular front-end framework for developing fast and powerful web interfaces.

Web Application Frameworks

Ruby: Ruby on Rails is a web-application framework that includes everything needed to create database-backed web applications, with the MVC pattern.
AngularJS: Lets you extend HTML vocabulary for your web application. AngularJS is a framework, even though it’s much more lightweight and sometime referred to as a library.
Ember.js: A framework for creating ambitious web applications.
Express: Fast and minimalist web framework for Node.js.
Meteor: Full-stack JavaScript app platform that assembles all the pieces you need to build modern web and mobile apps, with a single JavaScript codebase.
Django: High-level Python Web framework that encourages rapid development and clean, pragmatic design.
ASP.net: Free, fully supported Web application framework that helps you create standards-based Web solutions.
Laravel: A free, open-source PHP web application framework to build web applications on MVC pattern.
Zend Framework 2: An open source framework for developing web applications and services using PHP.
Phalcon: A full-stack PHP framework delivered as a C-extension.
Symfony: A set of reusable PHP components and a web application framework.
CakePHP: A popular PHP framework that makes building web applications simpler, faster and require less code.
Flask: A microframework for Python based on Werkzeug and Jinja 2.
CodeIgniter: Powerful and lightweight PHP framework built for developers who need a simple and elegant toolkit to create full-featured web applications.

Task Runners / Package Managers

Grunt: JavaScript task runner all about automation.
Gulp: Keeps things simple and makes complex tasks manageable, while automating and enhancing your workflow.
npm: Pack manager for JavaScript.
Bower: A web package manager. Manage components that contain HTML, CSS, JavaScript, fonts or even image files.

Languages / Platforms

PHP: Popular general-purpose scripting language that is especially suited to web development.
NodeJS: Event-driven I/O server-side JavaScript environment based on V8.
Javascript: Programming language of HTML and the web.
HTML5: Markup language, the latest version of HTML and XHTML.
Python: Programming language that lets you work quickly and integrate systems more effectively.
Ruby: A dynamic, open source programming language with a focus on simplicity and productivity.
Scala: Scala is a pure-bred object-oriented language allowing a gradual, easy migration to a more functional style.
CSS3: Latest version of cascading style sheets used in front-end development of sites and applications.
SQL: Stands for structured query language used with relational databases.
Golang: Open source programming language that makes it easy to build simple, reliable, and efficient software.
Rust: Systems programming language that runs blazingly fast, prevents segfaults, and guarantees thread safety.
Elixir: Dynamic, functional language designed for building scalable and maintainable applications.

Databases

MySQL: One of the world’s most popular open source databases.
MariaDB: Made by the original developers of MySQL. MariaDB is also becoming very popular as an open source database server.
MongoDB: Next-generation database that lets you create applications never before possible.
Redis: An open source, in-memory data structure store, used as database, cache and message broker.
PostgreSQL: A powerful, open source object-relational database system.

CSS Preprocessors

Sass: A very mature, stable, and powerful professional grade CSS extension.
Less: As an extension to CSS that is also backwards compatible with CSS. This makes learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS.
Stylus: A new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.

Text Editors / Code Editors

Atom: A text editor that’s modern, approachable, yet hackable to the core. One of our favorites!
Sublime Text: A sophisticated text editor for code, markup and prose with great performance.
Notepad++: A free source code editor which supports several programming languages running under the MS Windows environment.
Visual Studio Code Beta: Code editing redefined and optimized for building and debugging modern web and cloud applications.
TextMate: A code and markup editor for OS X.
Coda 2: A fast, clean, and powerful text editor for OS X.
WebStorm: Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.
Vim: A highly configurable text editor built to enable efficient text editing.
Brackets: A lightweight and powerful modern text editor; written in JavaScript, HTML and CSS.
Emacs: An extensible, customizable text editor with built-in functions to aid in quick modifications of text and code.

Markdown Editors

StackEdit: A free online rich markdown editor.
Dillinger: An online cloud-enabled, HTML5, buzzword-filled Markdown editor.
Mou: Markdown editor for developers on Mac OS X.
Texts: A rich editor for plain text. Windows and Mac OS X.

Icons

Font Awesome: Scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
IconMonster: A free, high quality, monstrously big and continuously growing source of simple icons. One of our favorites!
IconFinder: Iconfinder provides beautiful icons to millions of designers and developers.
Fontello: Tool to build custom fonts with icons.

Git Clients / Services

SourceTree: A free Git & Mercurial client for Windows or Mac. Atlassian also makes a pretty cool team Git client called Bitbucket.
GitKraken (Beta): A free, intuitive, fast, and beautiful cross-platform Git client.
Tower 2: Version control with Git – made easy. In a beautiful, efficient, and powerful app.
GitHub Client: A seamless way to contribute to projects on GitHub and GitHub Enterprise.
Gogs: A painless self-hosted Git service based on the Go language.
GitLab: Host your private and public software projects for free.

Local Dev Environments

XAMPP: Completely free, easy to install Apache distribution containing MariaDB, PHP, and Perl.
MAMP: Local server environment in a matter of seconds on OS X or Windows.
WampServer: Windows web development environment. It allows you to create web applications with Apache2, PHP and a MySQL database.
Vagrant: Create and configure lightweight, reproducible, and portable development environments.

Diff Checkers

Diffchecker: Online diff tool to compare text differences between two text files. Great if you are on the go and quickly need to compare something.
Beyond Compare: A program to compare files and folders using simple, powerful commands that focus on the differences you’re interested in and ignore those you’re not.

Code Sharing / Experimenting

JS Bin: Tool for experimenting with web languages. In particular HTML, CSS and JavaScript, Markdown, Jade and Sass.
JSfiddle: Custom environment to test your JavaScript, HTML, and CSS code right inside your browser.
codeshare: Share code in real-time with other developers.
Dabblet: Interactive playground for quickly testing snippets of CSS and HTML code.

Collaboration Tools

Slack: Messaging app for teams that is on a mission to make your working life simpler, more pleasant, and more productive. One of our favorites, we use this at KeyCDN!
Trello: Flexible and visual way to organize anything with anyone. We also use this as KeyCDN.
Glip: Real-time messaging with integrated task management, video conferencing, shared calendars and more.
Asana: Team collaboration tool for teams to track their work and results.
Jira: Built for every member of your software team to plan, track, and release great software or web applications.

Inspiration

CodePen: Show off your latest creation and get feedback. Build a test case for that pesky bug. Find example design patterns and inspiration for your projects.
Dribble: A community of designers sharing screenshots of their work, process, and projects.

Website Speed Test Tools

Website Speed Test:  A page speed test developed by KeyCDN that includes a waterfall breakdown and the website preview.
Google PageSpeed Insights: PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster.
Google Chrome DevTools: Set of web authoring and debugging tools built into Google Chrome.
WebPageTest: Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.
Pingdom: Test the load time of that page, analyze it and find bottlenecks.
GTmetrix: Gives you insight on how well your site loads and provides actionable recommendations on how to optimize it.

Web Development Communities

Stack Overflow: Community of 4.7 million programmers, just like you, helping each other.
Front-end Front: A place where front-end developers can ask questions, share interesting links, and show their work to the rest of the community.
Hashnode: Global community for software developers to connect and learn programming from each other.
Refind: Community of founders, hackers, and designers who collect and share the best links on the web.
Google+ Web Developers Group: Web developers, web designers, and web coding.
Google+ Web Developers Group: Java, PHP, Ruby, JavaScript and Python Resources
Facebook WordPress Front-end Developers Group: WordPress Front End Developers is a group for devs to ask questions, share their work, discuss emerging trends, and collaborate.
LinkedIn Web Design and Development Professionals Group: Networking and information sharing resource for professional Web Designers, Web Developers and Web Masters.
LinkedIn Web Site Development Group:  Website design & programming.
LinkedIn PHP Developer Group: PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
LinkedIn WordPress Developers Group: WordPress Codex. Using WP as CMS and CMF.
Webdeveloper.com: Where web developers and designers learn how to build web sites, program in HTML, Java and JavaScript.
Sitepoint Forums: Web development discussion.
/r/webdev: What’s new for web developers.

Web Development Newsletters

wdrl.info: A handcrafted, carefully selected list of web development related resources. Curated and published usually every week.
webopsweekly.com: A weekly newsletter for Web developers focusing on web operations, infrastructure, deployment of apps, performance, and tooling, from the browser down to the metal.
web tools weekly: A front-end development and web design newsletter with a focus on tools. Each issue features a brief tip or tutorial, followed by a weekly round-up of various apps, scripts, plugins, and other resources.
freshbrewed.co: A weekly reading digest for front-end developers and UX designers.
smashingmagazine.com: Smashing Magazine is an online magazine for professional web designers and developers. Useful tips and valuable resources, sent out every second Tuesday.

Sourcehttps://www.keycdn.com/blog/web-development-tools/



Monday, 22 February 2016

25 Best Web Design Software

25 Best Web Design Software

Editing Tools

KompoZer
Aptana Studio

Inspiration

Dribble
Concept Feedback

Debugging Tools

Firebug
YSlow

Wireframing And Mockup Tools

Balsamiq
GoMockingbird

Responsive Design Frameworks

Bootstrap
Foundation framework

Multimedia And Image Editing Tools

GIMP
AJAX Animator 
Inkscape

Color Experiments And Tools

Adobe Kuler
ColorZilla

Fonts Resources

Google Webfonts
Font Squirrel

Collaboration Tools

Cage
Trello

Web Publishing/Authoring Tools

WordPress
Drupal

FTP And SFTP Clients

FireFTP
FileZilla

Analytics Tools

Google Analytics
Piwik

Sourcehttp://www.fromdev.com/2013/06/top-web-design-software.html

Thursday, 18 February 2016

List of Web Browsers

1991

WorldWideWeb

1992

ViolaWWW
Erwise
MidasWWW
MacWWW

1993

Mosaic
Cello
Lynx
Arena
AMosaic

1994

IBM WebExplorer
Netscape Navigator
Slipknot
MacWeb
IBrowse
Agora
Minuet

1995

Internet Explorer
Netscape Navigator 2.0
OmniWeb
UdiWWW
Internet Explorer 2
Grail

1996

Arachne
Internet Explorer 3.0
Netscape Navigator 3.0
Opera 2.0
PowerBrowser 1.5
Cyberdog
Amaya
AWeb
Voyager
Amaya
AWeb
Voyager

1997

Internet Explorer
Netscape Navigator 4.0
Netscape Communicator 4.0
Opera 3.0
Amaya 1.0

1998

iCab
Mozilla

1999

Amaya 2.0
Mozilla M3
Internet Explorer 5.0

2000

Konqueror
Netscape 6
Opera 4
Opera 5
K-Meleon 0.2
Amaya 3.0
Amaya 4.0

2001

Internet Explorer 6
Galeon 1.0
Opera 6
Amaya 5.0

2002

Netscape 7
Mozilla 1.0
Phoenix 0.1
Links 2.0
Amaya 6.0
Amaya 7.0

2003

Opera 7
Safari 1.0
Epiphany 1.0
Amaya 8.0

2004

Firefox 1.0
Netscape Browser
OmniWeb 5.0

2005

Safari 2.0
Netscape Browser 8.0
Opera 8
Epiphany 1.8
Amaya 9.0
AOL Explorer 1.0
Maxthon 1.0
Shiira 1.0

2006

SeaMonkey 1.0
K-Meleon 1.0
Galeon 2.0
Camino 1.0
Firefox 2.0
Avant 11
iCab 3
Opera 9
Internet Explorer 7

2007

Maxthon 2.0
Netscape Navigator 9
NetSurf 1.0
Flock 1.0
Safari 3.0
Conkeror

2008

Konqueror 4
Safari 3.1
Opera 9.5,
Firefox 3
Amaya 10.0
Flock 2
Chrome 1
Amaya 11.0

2009

Internet Explorer 8
Chrome 2–3
Safari 4
Opera 10
SeaMonkey 2
Camino 2
Firefox 3.5
Surf

2010

K-Meleon 1.5.4
Firefox 3.6
Chrome 4–8
Opera 10.50
Safari 5
xxxterm
Opera 11

2011

Chrome 9–16
Firefox 4-9
Internet Explorer 9
Maxthon 3.0
SeaMonkey 2.1–2.6
Opera 11.50
Safari 5.1

2012

Chrome 17–23
Firefox 10–17
Internet Explorer 10
Maxthon 4.0
SeaMonkey 2.7-2.14
Opera 12
Safari 6

2013

Chrome 24–31
Firefox 18–26
Internet Explorer 11
SeaMonkey 2.15-2.23
Opera 15–18
Safari 7

2014

Chrome 32–39
Firefox 27–34
SeaMonkey 2.24-2.30
Opera 19–26
Safari 8

2015

Microsoft Edge

Sourcehttps://en.wikipedia.org/wiki/List_of_web_browsers

















Friday, 12 February 2016

Top 15 Mozilla Firefox Addons for Web Developers

Top 15 Mozilla Firefox Addons for Web Developers

Firebug

Mozilla Firefox Addons Firebug








Linkhttps://addons.mozilla.org/en-US/firefox/addon/firebug/

Ghostery


Mozilla Firefox Addons Ghostery









Linkhttps://addons.mozilla.org/en-US/firefox/addon/ghostery/

Flagfox

Mozilla Firefox Addons Flagfox








Linkhttps://addons.mozilla.org/en-US/firefox/addon/flagfox/

Web Developer

Mozilla Firefox Addons Web Developer








Linkhttps://addons.mozilla.org/en-US/firefox/addon/web-developer/

User Agent Switcher

Mozilla Firefox Addons User Agent Switcher









Linkhttps://addons.mozilla.org/en-US/firefox/addon/user-agent-switcher/

ColorZilla

Mozilla Firefox Addons ColorZilla







Linkhttps://addons.mozilla.org/en-US/firefox/addon/colorzilla/

iMacros

Mozilla Firefox Addons iMacros









Linkhttps://addons.mozilla.org/en-US/firefox/addon/imacros-for-firefox/

Colorful Tabs

Mozilla Firefox Addons Colorful Tabs










Linkhttps://addons.mozilla.org/en-US/firefox/addon/colorfultabs/

JavaScript-Debugger

Mozilla Firefox Addons Javascript Debugger








Linkhttps://addons.mozilla.org/en-US/firefox/addon/javascript-debugger/

Live HTTP Headers

Mozilla Firefox Addons Live HTTP Headers







Linkhttps://addons.mozilla.org/en-US/firefox/addon/live-http-headers/

Awesome Screenshot Plus


Mozilla Firefox Addons Awesome Screenshot Plus









Linkhttps://addons.mozilla.org/en-US/firefox/addon/awesome-screenshot-capture-/

Cookies Manager + 

Mozilla Firefox Addons Awesome Cookies Manager +






Linkhttps://addons.mozilla.org/en-US/firefox/addon/cookies-manager-plus/

JSonView
Mozilla Firefox Addons JSonView








Linkhttps://addons.mozilla.org/en-US/firefox/addon/jsonview/

Hackbar


Mozilla Firefox Addons Hackbar








Linkhttps://addons.mozilla.org/en-US/firefox/addon/hackbar/

BuiltWith

Mozilla Firefox Addons BuiltWith








Linkhttps://addons.mozilla.org/en-US/firefox/addon/builtwith/

Sourcehttp://codecondo.com/top-15-mozilla-firefox-addons-web-developers/