Entries Tagged as 'Uncategorized'

How To Create SVG Paths Easily Using The GIMP

April 26th, 2013 by zoltan · 6 Comments

When writing my blog post about Clicking Through Clipped Images Using CSS Pointer Events, SVG Paths and VML, I needed to create SVG paths. The problem is that they look so complicated and are not intuitive enough to produce by hand. However, I came across a cheap and simple way of creating SVG paths using the GIMP. People tell me I am also cheap and simple, so maybe that is why I love this solution so much (It takes only six simple steps!) So, for the rest of you like-minded people, I would like to share it this solution with you.

[

Tags: Uncategorized

Clicking Through Clipped Images Using CSS Pointer Events, SVG Paths and VML

April 26th, 2013 by zoltan · 3 Comments

In HTML documents, setting a DOM object’s pointer-event property to none will result in any mouse event to pass through that node to the nodes positioned underneath. This, along with SVG Paths and some VML fallbacks for IE, can be used to make some very interesting effects. This article covers how to do this in depth, along with some interesting gotchas in even modern browsers that affect performance. You’d be surprised what eye-candy you can produce today, in both older versions of Internet Explorer to the most modern mobile device.

[

Tags: Uncategorized

CSS3 Pseudo-Classes and HTML5 Forms: Their Limitations and a Possible Solution

November 5th, 2012 by zoltan · 2 Comments

I have been playing around with HTML5 Forms for a while now, and one of my favorite parts of the HTML5 Forms spec is the use of CSS3 pseudo-classes to show the validation state of the form fields to the user. I believe these validation hints make a better user experience and makes the process of filling out the form less frustrating. However, I think there are some shortcomings in the existing psuedo-classes that produce these validation hints. I hope that this article will start a discussion for a possible solution that could be easily added to the CSS3 UI specification.

[

Tags: CSS3 · forms · HTML5 · psuedo-classes · standard proposal · Uncategorized

Cross Browser GPU Acceleration and requestAnimationFrame in Depth

September 23rd, 2012 by zoltan · 4 Comments

Animations made with requestAnimationFrame appear less jumpy and stuttery than those using setTimeout or jQuery.animate by ensuring that animation frames are generated at the most optimal times according to the CPU load, what the browser is doing, what the graphics card is doing, etc. Recently, I researched a bit about how it works, how different browsers behave with it, and how well browsers are at animating both Canvas and SVG. This article will be a brain dump of all I have learned so far. Some of what I discovered may surprise you.

[

Tags: canvas · HTML · HTML5 · jQuery · Polyfills · SVG · Uncategorized · VML · XML

A Developer I Admire — Walter Zorn

August 26th, 2012 by zoltan · 12 Comments

In his recent blog post Developers We Admire, Paul Irish called out to the web development community to blog about the developers they found important and inspirational. My contribution to that list is the late Walter Zorn who created a JavaScript library that allowed developers to create simple 2D graphics at a time before canvas and SVG were practical technologies. He has been one of my role models and has shown me that awesome and seemingly impossible things are possible with a bit of JavaScript, a little creativity and a lot of testing.

[

Tags: Uncategorized

Cross Browser Styling of HTML5 Forms — Even In Older Browsers.

May 17th, 2012 by zoltan · 11 Comments

I have updated my html5Widgets package (now called html5Forms.js) so developers can create great looking, easy-to-use forms that can validate each field as a user types. It also has updated validation widgets so older browsers can display error messages like native HTML5 Form implementations do, and even allows developers to style error message bubbles in all browsers even in browsers like Firefox that don’t allow it natively.

[

Tags: CSS3 · Forms · HTML5 · Uncategorized

Help Free Saeed Malekpour: Sentenced To Death For Writing Code.

January 23rd, 2012 by zoltan · 2 Comments

Imagine you create software for a client. You do a good job, you are proud of your work, and you put your name and contact info in the heading of the code’s comments. I’ve done it many times with both code that I have been paid for as well as stuff I open-source and share with the community. If you are a web developer (or any type of developer for that matter) you probably have done the same thing. Who would have thought you could be sentenced to death for it? Please read this article and find out how you can help a web developer who is in this unfortunate situation.

[

Tags: Uncategorized

Caching Images With JavaScript and HTML5 progress Bars

January 16th, 2012 by zoltan · 5 Comments

HTML5 Progress Bars are cool, but where would you use one? If you are have a page with a lot of images that are being animated, you may not want to the content to be visible until is all loaded into memory, so why not use a progress bar to show the load progression? This article will show how to make a simple slideshow with a progress bar that updates as images are loaded. Proof that HTML5 progress bars are useful and not just a bunch of eye-candy with a fancy name.

[

Tags: Uncategorized

Clipping JPEG Images Into Non-Rectangular Polygons Using polyClip.js

October 29th, 2011 by zoltan · 24 Comments

Up until now, if a developer needed to clip an image in a non-rectangular shape, it was necessary to save the image as a PNG with an alpha channel. If the image is a photograph, the file-size balloons up to unacceptable levels. My new library, polyClip.js, allows developers to clip these images using photograph friendly JPEGs instead. This article guides you step by step on how to use it yourself.

[

Tags: canvas · HTML5 · Images · JavaScript · jQuery · Uncategorized · VML

Fixing oninput in IE Using html5Widgets

May 12th, 2011 by zoltan · 2 Comments

Even though onforminput is deprecated, oninput will allow developers to do dynamic calculations on forms with little JavaScript knowledge. Unfortunately, it doesn’t work in IE8 and lower, and there are some small bugs in IE9’s implementation when trying to delete characters inside a form field. So I implemented a fix for these issues with an update to my cross-browser HTML5 Forms polyfill, html5Widgets.

[

Tags: Events · Events · Forms · HTML · HTML5 · JavaScript · Polyfills · Uncategorized