Tag Archive: Internet Explorer

My hatred of Microsoft and Adobe as a GNU/Linux user and a web developer

I had used Dreamweaver, Flash, Fireworks, and other Adobe products long before Adobe acquired Macromedia. At that time, I didn’t know the existence of GNU/Linux and open source communities. I didn’t even decide on my career as a web developer yet. Thanks to Microsoft’s announcement of Windows Vista, I decided to look for other Operating Systems beyond Windows that are able to run on the older hardware eternally (by the way, I didn’t know other OSes besides Windows back then), meaning that the future version of OS will still be able to work on old hardware. I found GNU/Linux, specifically Ubuntu.

After one year of switching back and forth between GNU/Linux and Windows, I finally made the decision to stick to GNU/Linux. However, I still would test the browser compatibility in IE through VirtualBox. And here comes my hatred of MSIE. During the course of my web development, I’ve read numerous articles about how Microsoft doesn’t follow the W3C standards for their Internet Explorer to make web developers suffer from browser incompatibility issue. I had enough struggle for the Internet Explorer, I decided to use some jQuery to encourage those who view my website to ditch their Internet Explorer.

I have become to hate Adobe since the day I switched to the Eclipse and NetBeans IDE to develop my projects. After Adobe announced that Flash Builder and ColdFusion Builder are based on the Eclipse, I was excited to know that Adobe finally makes their development tools available on all of the major OSes. It disappointed me when I went to download the beta version of these two builders, it only offers Windows and Mac versions, no GNU/Linux version anywhere. Since Eclipse uses its own EPL license instead of GPL license to govern the use of Eclipse, Adobe can make modification to its code and sell it as their own products. This doesn’t mean that Adobe can discriminate against GNU/Linux users from using their products since Adobe uses Linux on their Adobe.com website.

As an opposite effect, these hatreds actually make me become more involved with open source technologies, such as HTML 5 and Ogg theora. I use open source ColdFusion engine Railo to develop ColdFusion websites as well. I think that ActionScript will be replaced by jQuery and other JavaScript frameworks and FLV will be replaced by either H264 or Ogg Theora depending on which side will win the online video wars.

jQuery CSS Browsers Compatibility

Different browsers require different CSS property syntax, especially in CSS 3. In CSS 2, the only property that I know of requires different syntax is opacity property. Firefox called opacity, and IE called filter. You need to set values for opacity and filter properties at the same time. Not only this is inefficient, but it also adds up the size of the CSS file.

Fortunately, jQuery has a css function to make the CSS cross-browser compatible. For example:

$("#thing").css({
   opacity: 0.5
});

It will auto changed to filter CSS property if the user is running IE.

However, since the new CSS 3 is in the draft mode right now, jQuery has not implemented CSS 3 standard yet. It means that border-radius and other properties that are different from each browser needs to write all of the possible style properties into the CSS file.

For more information about jQuery CSS and a jQuery plugin to support CSS 3 syntax, please read original article.

Learning HTML5 Canvas

Recently, I’m interested in learning about the use of HTML 5 canvas element. The canvas element in HTML 5 simply uses JavaScript to draw pictures and animations, as well as develop games. It basically uses setTimeout or setInternal JavaScript function to create an animation in the canvas element. This feature is available on all modern browsers, except Internet Explorer.

I followed some basic tutorials on the Mozilla Developer Center website and created the simple image below:

Click the image to enlarge (http://robbychen.com/canvas/)

I wrote the following JavaScript statements to form the picture above:

var ctx = canvas.getContext("2d");
// Background
ctx.fillStyle = "rgb(200,255,50)";
ctx.beginPath;
ctx.rect(0, 0, 500, 500);
ctx.closePath();
ctx.fill();

// Face
ctx.fillStyle = "rgba(125,222,152,0.5)";
ctx.beginPath();
ctx.arc(200,150,100,0,Math.PI*2, true);
ctx.closePath();
ctx.fill();

// Left eye hair
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(170, 75);
ctx.arc(160,75,10,0,Math.PI,true);
ctx.stroke();

// Left eye
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(170, 85);
ctx.arc(160,85,10,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();

// Right eye hair
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(250, 75);
ctx.arc(240,75,10,0,Math.PI,true);
ctx.stroke();

// Right eye
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(250, 85);
ctx.arc(240,85,10,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();

// Nose
ctx.fillStyle = "rgb(0,0,255)";
ctx.beginPath();
ctx.moveTo(190, 120);
ctx.lineTo(210, 120);
ctx.lineTo(200, 140);
ctx.closePath();
ctx.fill();

// Mouth
ctx.fillStyle = "#FF0000";
ctx.beginPath();
ctx.rect(150, 170, 100, 50);
ctx.closePath();
ctx.fill();

// Body
ctx.beginPath();
ctx.moveTo(200, 250);
ctx.lineTo(200, 400);
ctx.closePath();
ctx.stroke();

// Left Arm
ctx.beginPath();
ctx.moveTo(200, 325);
ctx.lineTo(130, 340);
ctx.closePath();
ctx.stroke();

// Right Arm
ctx.beginPath();
ctx.moveTo(200, 325);
ctx.lineTo(270, 340);
ctx.closePath();
ctx.stroke();

// Left Leg
ctx.beginPath();
ctx.moveTo(200, 400);
ctx.lineTo(130, 450);
ctx.closePath();
ctx.stroke();

// Right Leg
ctx.beginPath();
ctx.moveTo(200, 400);
ctx.lineTo(270, 450);
ctx.closePath();
ctx.stroke();

As I commented out the code for creating various parts of the image, the basic code structure for each part is very easy to understand. The getContext function on the first line of the code is to get the dimension of the image I’ll be creating. The fillStyle function is to give shapes different colors. The beginPath function begins with a new shape. The rect function is to draw a rectangle on the page. The closePath function is to connect the lines together to form a shape. If you want to draw multiple lines that don’t connect together, you simply don’t put the closePath function at the end of the process just like I did to the left and right eyes hair. The fill function simply fill the shape using the color specified in the fillStyle function. The arc function draws an arc on the page. You can draw a circle using this function as well. The lineTo function draws a line on the page.

You can read more about these functions as well as other functions that used on the canvas element at WHAT Working Group website.

CSS 3 Transition Effect

When I first learned about the transition effect of CSS 3, I was not very surprised because I was using Firefox 3.5 at that time. I viewed CSS 3 transition effect again in Chrome today and finally know the benefits of using transition effect.

Unlike other web developers, I hate Flash. One reason is because there is no good Flash IDE available for GNU/Linux, another is that Flash is a proprietary and monopoly format, just like Windows and PDF. After I saw the smooth animation using CSS 3 transition effect in Google Chrome, I decided to implement this effect as replacement for Flash. For those browsers that don’t support CSS 3 yet, such as IE, I might use jQuery to create same effect.

CSS 3 specification is still at early draft stage. Right now web developers have to define two versions of each CSS 3 property: one for Gecko, another for Webkit. However, the Webkit-based browsers have already have CSS 3 animation engine, such as Safari and Chrome. I believe that CSS 3 spec will standardize the syntax for these properties in the future.

CSS3 @font-face property

CSS3 introduces a new method for formatting the font on the web page using the font files stored on the local server instead of using the font installed on the user’s computer. By using @font-face property for CSS3, web developers could use their own fonts to format the web page in order to make the same page layout across browsers without worrying the cross-browser page layout. Of course, Internet Explorer doesn’t support CSS3 yet. Below is the syntax for the @font-face property:

@font-face {
font-family: 'NotethisRegular';
src: url('fonts/Note_this.eot');
src: local('Note this Regular'),
local('Notethis'),
url('fonts/Note_this.woff') format('woff'),
url('fonts/Note_this.ttf') format('truetype'),
url('fonts/Note_this.svg#Notethis') format('svg');
}
body {
font-family: NotethisRegular, Verdana, Arial, sans-serif;
}

As you can see from above code, the @font-face property acts like a function. It defines font-family and file location. To use it, simply add the font-family name into the font-family list in the element that needs to be formatted. This is great for logo design which uses some creative fonts.

CSS 3 Rounded Corner Effect and its Problem

CSS 3 is the next version of CSS. It introduces many cool effects for web developer to use. I learned about CSS 3 long time ago, but had never tried it. As I read more and more about CSS 3 and HTML 5 tutorials around the web, I decide to try to learn CSS 3 first. The problem with CSS 3 and HTML 5 is that Internet Explorer doesn’t support these specifications. My personal solution to this problem is to display a warning message through PHP to encourage IE users to completely give up Internet Explorer and switch to other browsers.

When I first learned about CSS 3, I felt that the language is harder to learn than CSS 2. In fact, it is easier to understand once I tried it through hands-on. As far as I know, CSS 3 relies on two different engine: Mozilla and Webkit. That means that to make it cross-browser compatible (except IE), I need to add two CSS properties with same values but slightly different property names. One for the Mozilla engine, another for the Webkit engine. For example, the following produces a black rectangle that has three rounded corners with drop shadow:

width:550px;
height:500px;
background-color:#8a2bcd;
-moz-border-radius-topleft:200px;
-webkit-border-top-left-radius:200px;
-moz-border-radius-bottomleft:200px;
-webkit-border-bottom-left-radius:200px;
-moz-border-radius-topright:200px;
-webkit-border-top-right-radius:200px;
-moz-box-shadow:10px 13px 20px #000;
-webkit-box-shadow:10px 13px 20px #000;

Below is the result:

The problem with this effect is that it only displays the rounded corners as a background image. When I add content inside this div tag, the content overlays above the rounded corners instead of appear inside of the corners, as the following screenshot illustrates:

I haven’t found the solution to this problem yet, but I think I will find the solution eventually as I go through CSS 3 tutorials one by one. To learn more about the properties mentioned above and other CSS 3 properties, just google “CSS 3 tutorials“.

First Time experiencing with GNU/Linux

I just came across an interesting article that talks about Fedora vs. Ubuntu. It makes me remember the first time I was experiencing with different GNU/Linux distros.

Back in the summer of 2009, I was frustrated with the slowness of Windows Vista. I was searching for the solution on how to fix this. Unintentionally, I watched a film from Discovery that talked about the history of the Internet. From the film, I learned that Bill Gates illegally avoided the competition between Internet Explorer and Netscape Navigator and other illegal activities that Bill Gates did to avoid competition, as well as to avoid being sued. I thought that it’s time to switch the operating system.

Initially I was planning to switch to Mac. Because of the high price of the Macbook and Mac OS X only woks on the Apple products (I tried the Hackintosh hack and my laptop doesn’t support it), I downloaded two of the main GNU/Linux dstros, burned them to CDs, and tried them out. First I tried Ubuntu. I booted the OS with live CD many times and it kept go into the terminal. I looked for the problem online and found out that it’s the ISO problem. At that time, I didn’t have enough connection speed to re-download the ISO, so I continued to try Fedora live CD. It booted successfully. After playing around inside the live CD, I decided to install it. The installation process was very easy,. I chose to use the whole hard drive and removed Vista. The installation took about 10 minutes. After the installation, I could easily install my preferred web development tools right from its repositories, Netbeans, Apache, and PHP & MySQL. Later I upgraded to Fedora 12 when it came out.

During my later usage of GNU/Linux, I involved with Open Source movement to promote software freedom and fight against proprietary software. It enabled me to learn more about the bad side of proprietary software, especially Microsoft.

The layout of the website updated again

The layout of my main website has updated once again. Here are the changes:

  • Rewrote page layout CSS to accommodate Internet Explorer
  • Horizontal menu now only contains this semester’s courses to accommodate 800×600 screen

As you can see, I also changed background color for each element. I plan to change background images on EACH page in the near future, too.

Microsoft Gazelle – a new browser OS based on Internet Explorer

Microsoft announced Gazelle secure web browser Operating System concept back in 2009. When I first came across an article that talks about it on buntfu.com, I realized that Microsoft might borrow some code from Internet Explorer to build the OS. Whether MS does borrow the code or not, Internet hackers as well as online criminals will find a way to discover many security flaws just as IE since it’s a Microsoft product. As Ronnie Whisler stated in the article, “Internet Explorer is a virus, adware, spyware, and malware delivery device [as well as Windows]“. Now Microsoft is planning to kill Google Chrome OS through this new OS just as Internet Explorer did to Netscape in the past. We will see how this new OS concept is going as IE’s reputation continues to decrease.