Category Archives: web-standard

Don’t lose the ability to be surprised

Suprise

Any fair-experienced CSS developers know that, if we want to be sure that a parent-div truly contains a child-element, we should put “overflow:hidden” in the parent div.

I was told that, too.

Ok, that solved the problem. And we continue going without truly knowing the reason “WHY”?

“Don’t fix what ain’t break” – people say.

In fact, I’m type of people who don’t like to invest time into things that aren’t useful. So I accept that trick as it is. Until today.

I was surprised (or remember that I was surprised) – like the first time I heard the trick. It took no more than 10 minutes to find an answer… but the question is that WHY I didn’t ask that question any sooner. How can I let the “magic” slip without wondering???

I suddenly remember a lot of other things that I take for granted. When I first come to this field, everything is new and shiny. After a while, things get normal bit by bit. And gradually I forgot my ability to wonder.

I remember the time when I was assigned to do OAuth 2.0 for a Facebook application. Instead using a library, I “silly” re-wrote the whole authentication process by Servlet/ HttpRequest & Response. By now I’m nearly sure that there must be pre-built library to do that thing somewhere. Whatever, I don’t regret. The time I put in studying how OAuth 2.0 works let me confidently say that I fully understand it, and I can (and did) manually write authenticate process for both Twitter & FB… They are all HTTP requests, basically.

What’s the way of your choice: learn just enough to do things – or learn intensely to truly understand how things work?

P/s: I have some ideas about “Key Concepts” (to overflow:hidden, it’s Document flow). But this post’s long enough.

A quick experiment on HTML5 Canvas

Photobucket

/** Vietnamese: một thử nghiệm nhỏ lên trang canvas của HTML5 **/

HTML5 is out for a while, and many people have already play with it. Inspired by the great article here, I managed to make a simple dirty experiment.


<!DOCTYPE html>

<html lang="en">

  <head>

    <title>Good night</title>

  </head>

  <body><script type="text/javascript">
  if ( !window.requestAnimationFrame ) {

    window.requestAnimationFrame = ( function() {

      return window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

        window.setTimeout( callback, 800 / 60 );

      };

    } )();

  }
</script><script type="text/javascript">
var canvas, context;
var xx = new Array();
var yy = new Array();
for (var i = 0; 40 > i; i++) {
   xx[i] = Math.random()*600;
   yy[i] = Math.random()*150;
}

init();
animate();
function init() {
  canvas = document.createElement( 'canvas' );
  canvas.width = 600;
  canvas.height = 400;
  context = canvas.getContext( '2d' );
  document.body.appendChild( canvas );
}
  
function animate() {
  requestAnimationFrame( animate );
  draw();
}
function draw() {
  var time = new Date().getTime() * 0.001;
  var x = Math.cos( time ) * 250 + 300;
  var y = Math.sin( time ) * 250 + 300;
  
  if(150 >= y) {context.fillStyle = 'rgb(250,250,250)';}
  else {
    if (200 >= y) {
      context.fillStyle='rgb(200,200,200)';
    } else {
      context.fillStyle='rgb(14, 14, 14)';
    }
  }
  
  context.fillRect( 0, 0, 600, 400 );
    
  context.fillStyle = 'rgb(255,255,0)';

  context.beginPath();
  
  context.arc( x, y, 15, 0, Math.PI * 2, false );
  context.closePath();
  context.fill();
  
  context.fillStyle = 'rgb(0,0,255)';
  context.fillRect(0, 215, 600, 400);
  
   for (var i = 0; 15 > i; i++) {
      
      context.fillStyle = 'rgb(255,255,255)';
      context.beginPath();
      context.arc(xx[i], yy[i], 1, 0, Math.PI * 2, false );
      context.closePath();
      context.fill();
  
      if (y > 200) {
          if (Math.floor(time) % 2 == 0) {
            context.fillStyle = 'rgb(255,255,255)';
            context.beginPath();
            context.arc(xx[i], yy[i] + 215, 1, 0, Math.PI * 2, false );
            context.closePath();
            context.fill();
          } else {
            context.fillStyle = 'rgb(255,255,255)';
            context.beginPath();
            context.arc((yy[i] / 150) * 600, (xx[i] / 600)*150 + 215, 1, 0, Math.PI * 2, false );
            context.closePath();
            context.fill();
          }
        }
      } 
    }
    </script>
  </body>
</html>

You can view the example online here.

Free ads: thanks for the start-up Handcraft for letting me quickly “craft” this product.

Lorem Lipsum

Lorem Lipsum

Source: http://www.lipsum.com/

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.”

Do you find the above passage familiar? If yes, can you guess what language it’s written by?

“Lorem lipsum” is simply a dummy passage which often appears on mocking website. Since the first appearance at 1500s, it soon become the standard text for printing and typesetting industry. Surprisingly, such an old standard still survive till today.

There are 3 reasons to use “Lorem lipsum”. First, it looks more like natural English than “Content here Content here …” text. Reading it give the customers a more accurate image of how the text look like when the site is complete. Second, the content on mocking website shouldn’t be uP/nderstandable, because many studies have point out that people are inclined to be distracted by readable text. And finally, since it has become a standard, it’s a shared background for any content layouters.

And… in case you don’t know, the content of “Lorem lipsum” actually has a meaning. It’s a Latin text taken from ”de Finibus Bonorum et Malorum” (The Extremes of Good and Evil) by Cicero, written in 45 BC – a popular book during the Renaissance.

I have been developeing website for more than a year, and such simple things always make people surprised…

P/s Thanks bro Lai Huu Nhon – a senior from my company (Evolus) – for this piece of knowledge. And by the way, I think his layout is cool.

Text

Fav-icon – the simple trademarks of website

Facebook Favicon

God is in the details, said the architect Ludwig mies van der Rohe. Our world is built from billions of tiny elements, which is impossible to recognize if we just look on the surface. But coming closer, even a dust may have its history.

And a fav-icon has a history itself, too.

Did you ever notice that tiny icon which appears on top of your browser page/tab, whenever you visit a website? Yes, it has a name – a favicon. I’m not going to tell you about how the standard established. I’m going to tell you what I feel: about how it’s easy to miss these icons.

As a young web developer, I did not too much, but at least some real website. And yet it’s unbelievable that I doesn’t know about the favicon until recently. Maybe my teachers in university have mention it while I’m sleeping? Don’t know.

And one beautiful day, I suddenly realize how difficult to move among my chrome tabs without seeing their icons. Then I learn about favicon and how to make them. All that costs not more than 15 minutes. Now I know how to make a favicon myself.

@sagisou: this post is for you.