1 Jul 2014

Connecting to remote MySQL database from windows: A beginners guide

If you are having a cloud server or may be shared hosting you might have used databases like MySQL  to store data in most cases if you are having a shared hosting you might get a control panel such as phpmyadmin for managing the databases .

 But if you are having a cloud hosting or if you feel the admin tool is feature lacking then the best way to connect to a database is by using a remote database admin tool.

Of course ,you can use the command line but that's not beginner friendly! this article is those want a GUI environment to manage their database remotely.

Tools 

database admin tool

There are so many tools available for database administrator like sequel pro,navicat,mysql workbech,sql squirrel etc. But im gonna use MySQL workbench here . You can download whatever tool you like, the connection procedures are almost similar.

Downloading&installation

You can download workbench from the MySQL website

Install the setup file that's all 

connecting to a database

open the MySQL workbench application.You might see a welcome screen like this :


MySQL workbench home

click on the Database menu from the menu bar and select connect to a database option .
You will see a popup window, enter you MySQL connection details there. 

contact the hosting provider if you don't know your ssh details. In most cases it is available on the control panel of your hosting.Click OK and wait for some to let the connection happen. 


form to enter mysql connection details




Once it is connected you will get a screen like this:



dba admin main


You can use this menu to create tables and databases.


menu bar


The side bar on the right can be used to manage the database, tables ,records and the server.


dba admin sidebar

That's all you don't have to use any bit of commands to connect! its easy and beginner friendly! If you have any other great tool like this do mention it in the comments!.Don't forget to subscribe on Facebook and twitter to get all the updates

24 Jun 2014

free web loading animations and progress bars collected from codepen


In this post im gonna show you some cool loading animations & progress bars  you can use  in your next app or site here is some . most of them are pure css animations which wont eat your bandwidth or make your site slow.

These animations are made by great guys on codepen so if you could then please mention there names whenever you get a chance

Windows 8 loading animation



This is a windows 8 style animation made by using pure css3 .By Jan rubio


Simple loading text



A simple text animation mostly seen on Microsoft's apps By suffick

See the Pen Loading by arjun (@arjunsreekumar) on CodePen.

Simple loading circle



This is one div a simple circular animation By Burak can

See the Pen A simple one div loading by Burak Can (@neoberg) on CodePen.

Loading bars



Realistic  3D like loading  bars made with js & scss By MaxStalker

See the Pen Loading bars by MaxStalker (@MaxStalker) on CodePen.

Spinner loader



A spinning loader for modern web.Madewith pure javascript and css3 By geekben 
See the Pen Spin Loader by geek ben (@geekben) on CodePen.

Minimal circle loading animation



Android like circular animation made with scss By Fran├žois Lesenne
See the Pen Loading animation with keyframe for SCSS & Jade. by Fran├žois Lesenne (@macreart) on CodePen.






Simple css loading bar



A very minimalist and light wieght loading bar made with css only
See the Pen CSS3 Loading Bar by JustAnotherCoder (@JustAnotherCoder) on CodePen.

facebook like CSS only loading animation



popular style of loading animation that can be used to preload videos and images
See the Pen CSS Only Loading Animation by Filipe Kiss (@filipekiss) on CodePen.

Flat progress bar



A flat progress bar with progress indicator By shankarcabus
See the Pen Flat Progress Bar by Shankar Cabus (@shankarcabus) on CodePen.

Bentley systems progress bars



Standard Progress Bar & sliders By Jonathan Graft

See the Pen Bentley Systems Progress Bar & Sliders by Jonathan Graft (@FlyersPh9) on CodePen.

 follow me on twitter or like the facebook page to get all the new updates!

11 Jun 2014

top bookmark managers for great collectors

Managing bookmarks are one of the tedious task for tech savvy people and and especially for those who are working with the internet, the default book mark manager that comes with Google chrome is really nice however its really difficult to filter through the book marks once its filled with a huge list .

Here is the solution,use a custom 3rd party bookmarking application.I have compiled a list of top 10 book marking apps that i have personally used so far to arrange the bookmarks effectively.

The  applications are listed here based on my personal preference and if you have a suggestion please comment them below



 raindrop.io



This is one of the best apps . and i have been using it.It gives us a web magazine feel to our bookmarks it sorts the bookmarks based on the content like videos, articles,documents etc into separate sections automatically .The app also sports a very smart search that sorts down pages using hash tags. this Google chrome extension is the best when you are collecting  data for your next project.we can create collections and share it with other users and also we can create private bookmarks .



pocket 







This was my old favorite and it was really minimal and easy to use. pocket was formerly called read it later and it provided a simple way to collect all the bookmarks and save them in the cloud. One of the keyfeatures of this app was that it was cross device and cross browser combitable .Pocket has an android app whichcan be used to get all the bookmarks in your mobile or tablet..
The app also had a premium account which had features like saving a bookmark permanently and better search and library etc .



Dewey




This app is only available for google chrome it helps us to save bookmarks as tiles with  screenshots.The reason why i have added this chrome only app is because of it's minimal feel and awesome features.we can create and organise the bookmarks in folders and search for them using tags and labels . 


Readablity


This is a real good app when it comes to text articles.articles. Readability converts webpages into a clean view for easy reading. I use this app to collect news and article that i keep to read later. Readability removes all the extra stuff from a page like the buttons navigation ads etc and gives a well typed comfortable reading environment.

Thanks for reading the post and don't forget to subscribe via facebook & twitter. and.. if you have any suggestions pls comment it below.

10 Jun 2014

Icons fonts over png?Free icon fonts for your next web project.

what is it?

Back in old days whenever we designed a website we sliced up all the psd templates and grabbed the icons and placed them in a separate folder.This is really a time consuming process and also it just decreases the page load speed.If you have noticed , most of the new sites are using icon fonts instead of old school png's or gifs,One of the pouplar and free icon set is the fontawesome it's a free project and it available on github






The perks

 here is why you must use icon fonts
  • first of all icon fonts are much lesser in size than a  regular png .The complete fontawesome package is just 401 kb while a single png can be more than that . 
  • You get better control over the icons. Icon fonts are way more customisable than the regular fonts we can change the color,the shadow,background,and virtually anything that's possible with css
  • Free in all means unlike png's these icons are mostly open source projects so you have lesser copyright issues and hence you can use then in your commercial projects .Even if it's paid you will a get a whole bunch of icons for just the half price.
  • Much,much scalable  icon fonts are mostly like your illustrtor files they can be easily resized to any platform without having the fear of making your icons looked blured out or bulged up.
  • Retina ready  if retina display is going to be the future then these icons are just fine for them.

How to use it?

  there are many icon packages avialable for free download if you wanna checkout them then this github page  has some nice set free icon fonts hosted in github all of them are free.

So here i will just show you how to install fontawesome into your website or app:
  1.  downlod the icon package from the fontawesome homepage http://fortawesome.github.io/Font-Awesome/
  2. link the font awesome css/scss into your site. example
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  3. Once you are done with that , you insert an icon to anywhere like this:
    <i class="fa fa-camera-retro"></i> fa-camera-retro The class name is specific to each icon , in this example we are calling a camera icon with the class " fa fa-camera-retro" . To find out the class name of other icons you can use this link http://fortawesome.github.io/Font-Awesome/icons/
  4. for example if we call that icon we would get an ouput like this : other examples: fa-adjust fa-cog fa-folder-open fa-taxi fa-cutlery fa-bookmark-o fa-coffee fa-check-square-o fa-bolt

That's all hope you can use fontawesome for your next big project. if you wanna learn more about icon fonts you can checkout this link https://github.com/showcases/icon-fonts

Do follow our twitter and Facebook pages to keep updated with all the new posts!




18 May 2014

Full page repeating grid pattern with pure HTML5 canvas

In this article iam going to show you a technique i use to generate pattern backgrounds without using images.
The patterns are dynamically generated using html 5 canvas.


To see the demo of a sample html5 pattern click here

Ok lets get started with a making a similar one.

first of all open up a basic html file like this

<html>
 <head>
  <title>canvas</title>
 </head>
 <body>
 <canvas id = "canvas">
     </canvas>
   
 </body>
</html>

The html 5 canvas tag is called in this page with an id of "canvas". Now,for resolving browser issues lets add a very basic css reset to eliminate margins and padding's that are predefined in the browsers.
*{ margin:0px; padding:0px; }

Ok now the core code comes in , this some basic JavaScript to control the canvas elements

      var a = document.getElementById("canvas");
      var ctx = a.getContext("2d");
        var width = window.innerWidth;
        var height = window.innerHeight;
         a.width = width;
         a.height= height;
         var i;
         var x,y;
         x=0;
         y=0;
         var  limit_h = height/10;
         var  limit_w = width/10;
         console.log(limit_h,limit_w);
        setInterval(function(){
                    for(i=0;i<limit_w;i++){
                         ctx.strokeStyle = "white";
                          ctx.fillStyle = "#acd200";
                        ctx.strokeRect(i*10,y*10,10,10);
                        ctx.fillRect(i*10,y*10,10,10);
         }
        y+=1;
           },0.1);
         
       
lets understand what is actually happening here first of all we use a built in JavaScript selector to select the element with the id "canvas", next retrieve the necessary drawing context for the canvas element.

After that we stored the height and width of the current browser window in  two variables called height and width.

we set the width and height of the canvas equals to the width and height of the canvas so that the grid must not appear handicapped when the users have different screen resolutions

Now we got the width and height of the canvas,but we need to set  a limit for the grid or else the loop will go on continuously and it will keep on eating the system resources. We cannot set the limit to static number since it would make our grid appear differently on various resolutions , moreover it would give our page a handicapped feel.

To fix that problem we used two variables limit_h and limit_w which basically means the gap between the each block , which is dynamically calculated by dividing the height and width of the page by 10, so that it would give a 10px margin .

Next we use a for loop to fill each block with a block and eventually fill the whole page with such grids/
The limit of the for loop is set to limit_w so that the loop should stop after the page is filled.

you can  play with values on the code pen demo page to get your own results.

Thanks for reading the tutorial . don't forget



14 Apr 2014

A simplified way to draw circles and arcs in HTML5 canvas

Hi folks, i recently found a new technique of drawing arcs and circles without using the confusing radian system. The arc drawing function of the html5 canvas API has the following  syntax;

contextVariable.arc(x,y,radius,startAngle,endAngle, clockwise);
where contextVariable refers to the the variable in which you stored the getcontext("2d") thing and  arc is the function name x,y are the coordinates and radius as it should be, the radius of the circle and
startAngle,endAngle being the staring and ending angles; initially when i saw the syntax i too thought hey? it's very easy. But the problem really started when i decided to test it out.

20 Nov 2013

youtube channels Every web developer must subscribe to.

Hi friends today i will list out some really awesome and useful channels from youtube that helped me a lot to learn new stuff related to webdesign and development.

I was a subscriber and regular viewer of these channels ever since i started to learn web development.
You can get regular screen cast's and sessions that are really useful for quickly understanding things off.

One of the good features of video tutorials are that they are most often taught by industry professionals or people who are really dedicated to this field so while watching those videos you can quickly grasp some workflow techniques or really useful tips n tricks or even shortcuts they use.

17 Nov 2013

11 handpicked free fonts from behance.

Here is a list of some really nice typefaces i collected from behance. i regularly keep a nice collection free fonts with me to use in my design works.

Most of these fonts are completley free to commercialy use. They were developed by indivudual artist's and by some mini design studios.

If you have any good list of  free typefaces dont forget to mention them as comments!

here is my list:


1. London on beach 
    designed by : Antonio Rodrigues Jr;