14 Apr 2014

A simplified way to draw circles and arcs in HTML5 canvas

Leave a Comment
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.

The starting and ending angles were not defined in terms of angles in html5 canvas ,rather they were using radian based system. what the heck is radian i was too poor in maths so i could not remember learning something called radian.


so i decided  to google it and found out that one radian = 57.295° and so 1 degree =0.0174532925 radians. Using that info i decided to make a javascript function that would convert degree to radian; This would help me by freely giving the angle values as function arguments whenever i needed to draw arcs.

here is the function i  made :



function deg(rad){ var deg = rad*0.0174532925; return deg; }

Now if i want to draw an arc i can call the deg function  in place of the radian values

example:

ctx.arc(150,150,100,deg(0),deg(359));







Read More

20 Nov 2013

youtube channels Every web developer must subscribe to.

2 comments
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.

Ok lets get back to our business, here is my list :

1.Google Developers


 Yeah as you might have guessed this is the channel of the developer's of the big daddy of the internet, Google. This channel contains tons of videos which includes tutorials and sessions from Google's workshops and conferences. If you really missed any Google conferences you can watch them from this channel.

2.Gyrostorm

   

Gyrostorm is channel that teaches HTML5 game development video tutorials. This is channel doesn't have much videos as compared to others but their content is really awesome and organized .This is must watch channel if you are into html5 canvas and game development.


3.1stwebdesigner


 This is the channel of the webdesign blog 1stwebdesigner . The channel has more than 2 million views per month . so like the 1stwebdesigner blog this channel is never to miss one in collection of your list.



 Some might have at least heard that name? Chris Coyier is the developer and designer of very frequently used web apps like wufoo and codepen . This channel contains some really nice Q&A session based on his blog css-tricks. Also he conducts weekly podcast's and tutorials on css,jquery,html5 etc .
Do subscribe to this channel coz he's a real god when it comes to css3.



Adam khoury creates some really nice video tutorials on almost all sessions in design and development. He is a one man army who always make tutorials without using any libraries like codeigniter or jquery.He says that while learning web tech one must not try to attain everything with the help of code snippets or libraries .

His tutorials are based on pure javscript or php code. Do checkout the channel if you wanna learn what's actually happening inside a code library .


Phpacademy is a channel maintained by Alex garret. He is a UK based web developer who creates very useful tutorials mostly on php and css. he teaches every thing from a the basics explain things in a beginner friendly way. I came to know about php and it's uses from his channels.
If you are really wishing to learn some php from scratch then do checkout his channel.

6.Thenewboston
   

When it comes to video tutorials in youtube the first thing that comes in everyone's mind is this channel.This channel is maintained by Bucky Roberts. Bucky started with some video tutorials on basic HTML.
now this channel contains videos on many programming languages like c/c++,php,mysql,javascript,jquery.
Bucky keeps a very strong sense of humor in his tutorials while explaining everything in a simple manner by describing to everyday incidents .

7.Nettuts+


This is the channel of the tuts plus sibling netuts plus.You can find some really useful web development video tutorials in this channel .
Read More

19 Nov 2013

A lsit of Pure css3 buttons collected from codepen

Leave a Comment
1.simple push buttons 

 2. More info button
3.Music player 


4.Android like admin menu


5.push me buttons
6.pure css3 switch
7.Responsive css3 buttons
 

8.3d buttons with colored edge
                                       
9.dail button
                                    
1




10.css3 social button
                               


Read More

17 Nov 2013

11 handpicked free fonts from behance.

Leave a Comment
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;





      designed  by HVD fonts
                                         
3.Mojave 
   designed by Gumpita Rahayu
                                              


4.Canter 
   designed by Fontfabric&Christopher j .lee 
                                                  
5.Baron
   designed by Frank Hemmekam
                                                             

                 
6.Hagin 
   designed by  Fontfabric
                                                                   



   designed by  Frank Hemmekam
                                                  


   designed by Decade Type Foundry
                                                                  

                                                                     
9.Nooa
   designed by Antoine Pilette
                                     

10.Wamed
     designed by Laura pol
                                     




11.intro  
    designed by Fontfabric
                                      
                  Thanks for reading this post. i will be soon uploading some more wildly caught up fonts and designer  essentials! have a good time .

 AND! don't forget to comment out any font you know that should be on the list.                      
Read More

Pixelkit: thousands of premium UI kits!

Leave a Comment


pixelkit it an intensive collection of various elements of  UI design , it is a vast library of UI components consisting of icon packs,mobile UI & buttons ,graphics .

The kits are divided into diffrent themes, you can choose from the intense collection of themes.


With a one year membership you will get enormous amounts of  UI elements which you can place in your design projects. One good thing about pixelkit is that it is regularly updated repository.

 You will need only one account and membership to gain access to the library of modern UI elements.

If you are a designer who wants to keep up to date with the latest trends in UI design then pixelkit is a must.

Read More

How to make a super simple countdown using pure javascript

2 comments


Hi friends . In this tutorial  we will be making a super simple countdown using raw JavaScript and some Lil bit of CSS and HTML to add  to the UI.

This will be a very easy tutorial , so i will not be using a libraries like jquery or advanced features like getting the users time etc.

Demo

Lets begin by creating an a basic HTML file.

  <! doctype html>
<head>
 <title> hello</title>
 <link href ="style.css" type = "text/css" rel ="stylesheet"/>
</head>
<body>
   
</body>
</html>

Now insert a  div in the body. 

<div id = "cont"> </div>

We will be using this div as a  target to the javscript DOM.

Now add this javscript below the  the div tag . Dont worry about the code I'll explain it.

<script type="text/javascript">
    var b =100;
      var t = setInterval(function() {
        var a = document.getElementById("bt1");
          a.innerHTML =b;
          b--
          if(b%2==0){
              a.style.background = 'red';
              a.style.borderRadius= 20+"px";
            }
            else{
             
              a.style.background = 'yellow';
              a.style.borderRadius= 20+"px";
            }
          if (b == 0){
            clearInterval(t);
           
          return b;
          }
       },200);
    </script>

Ok that's all you need to make the countdown work; But I'm just going to add some basic CSS to make it look better. Insert the following css code
*{
 margin:0px;
 padding:0px;
}


.button{
    text-decoration: none;
    font-size: 30px;
    font-family: impact;
    margin:0px auto;
    background:#99defd;
    border: 2px solid black;
    border-radius: 0px;
}

.button  a:hover{
    background: yellow;
}


That's it ! now i'll explain the what happens inside the code block.
Firstly we use a variable called b to set the intial value of the countdown to 100 so that it will count back from 100-0.

 Next we use a setinterval function and target the element so each time within an interval of 200 microseconds the div will change it's innerHTML value.

 I used an if condition to change the div's css at very even intervals .Lastly  i added a clearInterval   function  to clear the timer when the value changes to 0.
Read More