7 Image Editing Tools That Serve As Photoshop Alternatives

“This picture has been photoshopped”, is a very common phrase that we encounter when we see an image which we really don’t expect to. But, is “photoshopped” really the right word? Actually the correct term is “graphically modified” which is performed using image editing softwares and Photoshop, although the most popular, is just one among many.

Photoshop is an image editing software created and maintained by Adobe, but with such massive popularity, ease to use and mild learning curve, the verb “photshop” has taken over (much like verbs like “google” and “tweet”). However, when it comes to price, it seems that Photoshop is not that cheap. It ranges from Rs 5000 to Rs 20000 according to the suite you need. But the good news is that Photoshop isn’t the only tool.

So today we are going to list some amazing unheard tools which are almost at par with Photoshop when compared to features and they can help you do your image editing tasks without paying such a high price.Continue Reading

Must Have Chrome Extensions for Web Developers

Last time we wrote about HTML to PDF conversion tools and this time we came up with another list comprising of best Google Chrome Extensions for Web Developers.

Web Developer Checklist

web developer checklist

This tool has been made by webdevchecklist.com and it provides you a variety of characteristics of a webpage. This is necessary while testing a website. Starting with the Best Practices domain, it covers check points like broken link check, www subdomain check and spell and grammer check. It shows the page rank by Google Page Speed checking tool and lists it under Performance domain. It checks for code quality and syntax which tells you about the experience of the developer who made the website. It checks for other characteristics which determine the Alexa Rank too, namely SEO, UpTime, Monitoring, Mobile Browsing Capabilities, Custom 404 page, Friendly URLs and Social Media Buttons. Using this tool, you can precisely determine the accessbility and popularity of the page.

Responsive Web Design Tester

responsive web design tester

This is a life saving tool for the senior web developers or program managers to instantly test output in variety of screen sizes. It does not rate a page or determine scores but just shows how they look like on different screens.Continue Reading

Top 10 tools to convert HTML to PDF

PDF (Portable Document Formal) is a useful document format, and as the name portable. Once a document is converted to the PDF format, its formatting remains the same when viewed across a range of devices, irrespective of the platform. Due to its usability, there is often a need to convert documents from various formats to PDF. Webpages, which are basically HTML documents, belong to the same category.

Thus, we present 10 HTML to PDF converters with range of functionalites associated with each one.Continue Reading

Manipulating dates in JavaScript – a Moment.js Tutorial

Displaying date and time in JavaScript has never been an issue but manipulating them has never been an easy task. Earlier, programmers manually made date/time realted calculations but with time, analytics became important, with demand for more complex calculations. To match up those modern requirements, we have Moment.js.Continue Reading

How to Import CSV to MySQL database with PHP

CSV files, commonly known as Excel (.xls) files, are used as spread sheets to store information in a tabular manner. Modern CSV handlers are capable of most of the functions — like calculating sum, average, median to making graphs, charts and tables. But, at times we may need to store the data in SQL format to be parsed easily, or for secure storage. SQL is not doubt the best medium for such kind of jobs. But typing or even copy-pasting each data to SQL is a tiresome job.

This is where PHP comes in action. It has the ability to parse CSV files, which allows us to do further processing. Let us see how to import the CSV to MySQL database using PHP.Continue Reading

Using Highcharts to make charts

High Charts-js

Charts are used to represent mass data with the help of visual aids. Initially, they were created manually, using calculators to do the math. Then came softwares like MS Excel and charts became an inseparable part of Powerpoint presentations during 1990s.

In this decade, with the internet boom, browsers have taken over everything. The strengthening CSS3 boosted the math-loving-techies to develop libraries for charts so that one need not switch to heavy software by automating the system of creation of charts using dynamic data from database and visualize it on the browser. The biggest advantage of this was to bring down the requirements to a bare minimum- one just needed a computer connected to the internet and a web browser to view your creations.

Long story short, we have tons of libraries now. Some very advanced libraries like D3.js and some very simple libraries like Chart.js. However, Highcharts is a combination of both. It is extremely easy to use, thanks to the documentation and fulfills modern requirements.Continue Reading

Create a Responsive Portfolio using Twitter Bootstrap

Responsive Portfolio with Twitter BootStrap

Bootstrap is a frontend framework developed by Twitter for design purposes. Apart from being responsive, it has got different components ranging from grid systems to icons set and hence surely lead the all the other frameworks. Bootstrap is open source and is the most popular repository on GitHub.

Today we will make a responsive portfolio using Bootstrap while taking care that it renders smoothly on tablet and mobile devices too. The working demo of this tutorial can be found here.

Getting Bootstrap

Bootstrap can be downloaded or compiled to your needs from their ‘Getting Started‘ page but I would prefer using the CDN option, because it’s faster. Also, it is advised to go through the page and get yourself accustomed with some bootstrap terms, including common classes. This page also has some examples of how to use Bootstrap classes. Be sure to check them out. Observe the responsiveness by shortening your browser at various widths and noticing the difference (don’t be lazy, do that). See how the rendering differs at different widths.Continue Reading

Create a Flipcard using CSS3

Card Flip Tutorial - Featured Image - Red

With the introduction of CSS3, one little thing that you could do very well with just a few lines of code was animations. As you might have observed, there are various animations on new websites that have been created with the latest technologies of HTML5 and CSS3. Most of these animations are used to bring real life simulations.

Today, we will display how a flipcard can be made using the flipping feature of CSS3. It will have 2 sides – one with a logo or an image and another side having the company details. By default, it will show the image or logo, whereas on mouse hover, it will flip to the other side with the details. The two sides of our simple example will look like the following.Continue Reading

Create Social Buttons using CSS3 and Icon set

Social websites such as Facebook, Twitter, Google+ and others play an important role in marketing and publicity. Providing a social widget simplifies the task for the users visiting the page to share, like or rate your content, therefore helping in publicizing the same.

You have the option of using either standard social widgets or create your own social buttons using social icons on your website. However, icons are preferable as they can be customized to fit, unlike social widgets which have a standard look and dimensions, which makes them look common. We will make a simple set buttons (which can definitely be improved upon) which look like the following.Continue Reading

Easy image hover effects using CSS3

It is said that a picture is worth a thousand words. An image conveys a lot more than words but an interactive image with some extra glitter will make the user experience amazing. Earlier, images were displayed without much modification or if anything was done, it was done using JavaScript. JavaScript helped provide basic effects but never gave rise to creative ideas as it was difficult to implement. But, with the advent of CSS3, designers could deliver better experience with little effort as the implementation became easier.

In this post, we are going to enhance the viewing of an image by providing information and links on hovering mouse pointer above it in a beautiful way. Checkout the demo here.Continue Reading