I’ve been reading some articles about CSS3 animations for the past few days and I have used two animations so far. First is the rotate() function and the other one is the scale() function.

The first thing I do when creating a CSS animation is declare the keyframes

1
2

@-webkit-keyframes spin { 100% { -webkit-transform: rotate(0deg); } }	
@keyframes spin { 100% { -webkit-transform: rotate(0deg); transform:rotate(0deg); } }

Keyframes for me are like functions. The name of the keyframe above is spin, which I used in my rotate() animation below.

1
2
3
4

-webkit-transform: rotate(-111deg);
-webkit-animation: spin 1s linear;
-webkit-animation-fill-mode:forwards;
-webkit-transform-origin:0% 100%;

Note: This animation only works for Chrome browsers.

PHP and JavaScript

I’ve been using JavaScript a lot for the past month and I just finished another course in codeacademy which is PHP and I think it’s a good idea to compare the two languages.

Most PHP commands and functions are nearly the same with JavaScript like the if/else statement switch statement, creating classes and functions, etc. But there are things that you can do in PHP that you can’t do in JavaScritp and there are things that you can do in JS that you can’t do in PHP. PHP is often used to access data in the database. It is used as a backend language while JS is often used in the frontend side.

Code comparison

1
2

$my_string = "one";
$my_number = 24;

This is how you declared a variable in PHP, while in JS you can do it like this:

1
2

var my_string = "one";
var my_number = 24;

”$” in PHP is the same as “var” in JS. It tells the interpreter that it’s a variable

Switch statement

Switch stament in PHP is done exactly the same way as you do it in JS, the only thing here is in PHP, there are two ways two write a switch statement.

this is the conventional way to write switch statement

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$num = 3;

switch($num) {
	case 1:
		echo "one";
		break;
	case 2:
		echo "two";
		break;
	case 3:
		echo "three";
		break;
	default:
		echo "four";
}

and the other way is using ‘endswitch’ or alternative systax.

1
2
3
4
5
6
7
8
9
10
11
12
13

switch($num):
	case 1:
		echo "one";
		break;
	case 2:
		echo "two";
		break;
	case 3:
		echo "three";
		break;
	default:
		echo "four";
endswitch;

Classes

You can also create Classes and Objects in PHP. The major difference here between PHP and JS is the way how you access properties. You can access properties of Classes in JS by means of dot notation while in PHP you can do it like this:

1
2
3
4

$objName = new className(params);

$objName->propertyname;
$objName->method();

I took Ruby lessons in codeacademy last week. Some functions are the same with JavaScript and some are not like variable declaration, the “unless” statement, and many more.

This is how you declare a variable in JavaScript:

1
2

var my_num = 25;
var my_string = 'Bryan';

This is how it’s done in Ruby:

1
2

my_num = 25
my_string = 'Bryan'

SASS is a css extension that makes writing CSS fun. Not just fun but it makes you work a little bit easier. This is because it has features that lessen the works of the developer. These are the ‘magics’ that SASS do:

Nesting Rule

In a regular CSS, you can’t nest your codes. If you do, there will surely be an error in your code. But in SASS, nesting is allowed. Here’s an example of SASS nesting rule:

1
2
3
4
5
6
7
8

.container {
	.content {
		height:200px;
		width:200px;
		background-color:black;
	}

}

and this is how you do it in regular css.

1
2
3
4
5

.container .content{
	height:200px;
	width:200px;
	background-color:black;
}

What I like about nesting is you can see that this particular element is a descendant of this element. Looking at the example, you can edit the properties of .container and .content at the same time because they are at the same block of codes unlike in regular CSS.

Variables

1
2

$margin: 0 auto;
$paragraphColor: #ff0000;

Another feature that helps developer in debugging. Let’s say you have 30 elements with the same font color of blue. Then in the middle of your work you decided to change it to red. Of course in regular css you’ll have to do it one by one. But in SASS there is this thing called variables. Like what I did in my example, I stored the color #ff0000 in a variable called $paragraphColor. So with the help of variables, you’ll no longer have to change a property of an element one by one. All you have to do is change the value of the variable and you’re done.

Indention is important…

Python is a very unique programming language compared to other languages that I know. Most of the languages I know rarely cares about the indention you made in your code. Yes, proper indention and spacing is a good practice when you’re a programmer but in Python, indention and spaces are parts of the code itself. “Wrong indention/spacing == wrong code” that’s the Python rule.

If web design is your thing, then you should have a “Compass” in your pocket. It’s not what you think it is so let me just explain myself.

I’ve been doing a lot of web development for the past month now and learned about this Compass thing(a CSS framework). My OJT supervisor recommend it to us and said that it will make a lot of things easier for us. It does make things easier and it orginizes our files and it works well with SASS.

What it does…

1. It automatically creates file directory(css,sass, etc)
2. Automatically convert SASS to CSS.
3. Create sprites

That’s just some of the things that compass do and all you have to do is install it, download the files needed and type this in your terminal(OS X users):

1
2

compass create <projectname>
compass watch

Octopress Fixed

Finally fixed my octopress blog. Will start blogging for real soon.

Still Lost

I am still finding my way here in octopress. Don’t know why my first post looks like that but I’ll figure this out, eventually. Anyway, I learned new things again when I’m on the process of configuring this blog. Learning new things makes me feel good. And I hope I can fix whatever error/s I’ve made.

My First Octopress Post

My name is Bryan Nikko G. Gamotea. You can call me Bryan or Nikko for short. I’m a 4th year BSIT student from College of the Immaculate Conception and currently a trainee of Favorite Medium and this is my “STORY”. Before we became a trainee here at Favorite Medium, we took a test to see if we are good enough to work for them as trainees. We we’re given a .jpeg file(a picture) of a web page and asked to copy it and our work should look exactly like the picture. Fortuntely, we passed(barely) the test. Was the test easy? Yes, it looks easy for me, and I did finished it. But when you look at my code back then, first thing you want to say is “This thing is a mess.” Before I got here(Favorite Medium), I consider myself as a “Good” web developer because I can create simple web pages but after I took that test I can now say that I’m not even close to “Good”. That was one month ago. Being a trainee here in Favorite Medium is not easy because they will bring out the best in you. After weeks of training there’s no doubt that I’ve improved from “nothing” to “something”. Other than developing websites, our other task here is “learn new things”. And thaks to that other task, I have learned so many things that I haven’t learn in school. One important thing that I’ve learned here is to go beyond your confort zone because staying in it will not give you anything. Currently I’m way outside of my comfort zone and I can’t even see where it is now but one thing for sure is it is nice to live outside of it because here’s where the real fun and learning starts. Just want to thank the Favorite Medium family for giving us this opportunity. It’s one of the biggest blessing I’ve recieved.