14. May 2013

How to debug :hover pseudo class in Google Chrome Developer tool

Google Chrome developer tool is simply one of the best tools available for debugging of HTML5 applications.

It has one neat feature: possibility to inspect CSS of element and editing it on the fly.

That works fine for normal styles, but what about :hover state?

There is one “hidden” option which allows to switch element to :hover state.

Inspect element of HTML. You should see Styles on the right hand side. There are 3 icons. Click the middle one with arrow sign. It will pop up menu with checkboxes. You can select here CSS pseudo classes like :active, :focus, :hover or :visited.

google-chrome-dev-hover

To learn more about capabilities of Google Chrome developer tools I recommend to go through free course Discover Dev Tools from Codeschool.com.

6. May 2011

HTML5 API – File.slice changed

Promised glory and unity of HTML5 API is falling apart. API keeps breaking with every new version of browser. That’s sad.

Firefox and Google Chrome implemented File API for manipulating with files. It contained very useful function slice.

Slice allowed you to read part of file content. This was quite handy when dealing with big files.

Poorly chosen name for API function caused split in browsers unity. Here is explanation:

This method was removed in Gecko 5.0 (Firefox 5.0) because its syntax differs from that of Array.slice() and String.slice(). Work is ongoing on standardizing its replacement, but for now you can use the mozSlice() method on Gecko-based browsers.

Nice.

Method was replaced by:

  • mozSlice – in Firefox
  • webkitSlice – in Google Chrome

There is one important difference in the second parameter of function:

  • In case of slice it was length of block that should be loaded.
  • In case of *Slice it is the end position of block (length + start position).

6. March 2011

Standard Slide in 3D – WebGL

I was playing little bit with GLGE library.

Ermanno Balzi’s Standard Slide is now in 3D. You can test it here. Just wait few seconds after displaying stage. It will take some time to download model.

Requirements: browser with WebGL support. In these days it is Google Chrome or Firefox 4.

Here is sample screenshot:

Do you need more examples of WebGL in real world? Go to WebGL Earth.

  • Quick search

  • Links

  • Twitter

    Follow @jurajmichalek on twitter.

  • Comments

  • Tags

  • Topics