RSS Feed

Tag Archives: CSS

CSS3 and @font-face: A personalized web experience

Posted on

I love tablet PCs. I worked on them for 3 years, fixing a bunch of HPs and gateways, and I own my own, an HP tx2510us, which is going on 2 years old now. I loved playing with one note, and the power toys, and taking notes in class, drawing diagrams and pictures right in with my notes in any color I needed, without carrying around a backpack full of markers and pens.

I discovered a Microsoft font tool, which allows you to make your own TTF (true type fonts) our of your handwriting on a tablet PC. I took the time and be nice and neat (my handwriting it not good as you will see) And make a few fonts, which I used in Onenote to allow my to type my notes, and make them look like they were handwritten.

Recently, I have been working on web development, especially CSS3 and HTML5. Among the many other feature, I’ve come to love the new (sort of, since IE has actually supported it since IE4) @font-face css tool.   Read the rest of this entry

How to use google chrome as a web develpment tool

With Google chrome now support official extensions, Chrome is becoming a pretty sweet web development tool. I had always used it to test my pages on Chrome, as well as Safari, Arora, IE8, Firefox 3.5, Firefox 3.6 or 3.7, and Opera whatever the latest was. I try to test on Safari Mobile when I can, but do not own any apply products.

I develop for HTML5 so I’m including all the HTML5 goodness too.  Now of course you have to be able to code yourself and understand how to use each of these to help you, but there’s some great addons to help with HTML, CSS and JS web development.

Among the great extensions for web development are:

HTML Validation — http://goo.gl/Hg7E

Pendule — http://goo.gl/xqZy

HTML5 Outliner — http://goo.gl/9RlA

HTML5 Markup Detector — http://goo.gl/oHkD

Firebug Lite — http://goo.gl/Z01q

Web Developer Mini — http://goo.gl/ehYf

Chrome Web Developer Tools —http://goo.gl/qW44

(Google) Analytics  Helper — http://goo.gl/s8m5

Inline Code finder — http://goo.gl/PFpR

Javascript Console — http://goo.gl/WiTI

BuiltWith Technilogy Profiler — http://goo.gl/ckLk

If you have any more, please add them in the comments.

But some of it is also built in, with google chrome dev tools.

Devtools allows you to inspect a document in every way imaginable.

Console

Storeage (offline data storage and cookies)

CPU profiling

Timeslines of rendering

Scripts with debugging

Resource monitor, which is an amazing tool for tracking images and scripts loading, along with style sheets and just about everything.

And the best of all Elements, which shows you every element, the css that goes with it, and even lets you test out removing certain css commands to see what it effects on the page.

The best part is the ability to edit actually CSS elements as a user style, to test out better styles or different sizes, etc.