Yesterday, the internet was buzzing with articles about the Heart Bleed Bug which is a serious vulnerability in OpenSSL that allows stealing data (passwords, credit cards, etc) that should be secured over SSL. Some sources say that as many as 2 out of 3 servers in the world use OpenSSL which means that a lot of websites have been affected. Large websites like Yahoo, Flickr, Imgur, and Lastpass have already confirmed that they have been affected and they have also updated their servers to fix the security bug. But, what websites are still vulnerable to the heart bleed bug?
I am on a mission to create an amazing HTML5 image editor and want to write a little about zoom, crop, and drag or pan. These are 3 features with a lot of overlap, depending on the design choice and implementation, so I would like to first consider the user experience. Panning or dragging the image, or a selection of the image, is going to be a clear need that is shared by both zoom and crop. If I click on an image and drag, am I moving the image or selecting an area to crop? One way to fix this dilemma is to only allow one of these operations at a time, but that requires extra user clicks. An alternative is to drop a special “crop selection area” on the image at all times and allow resize or drag of that element while dragging outside of that area moves the image. What is the best user experience?
Zoom could be implemented with plus or minus buttons that change the scale of an image or a canvas object. I have also seen dropdowns that let you set a zoom level in percentages but both of these implementation require extra unnecessary clicks. They also require shifting the mouse between clicking and dragging of the image, so the act of zooming in and out seems to have a better user experience with a mousewheel implementation. Cropping an image, in my opinion, should also work using a mouse selection and personally, I would vote for enable/disable action instead of keeping a persistent selection area on the image at all times. So, you can use zoom at all times but cropping an image requires selecting the crop tool. Finally, how do you zoom to a mouse cursor and does the zoom actually change image data via html5 CANVAS or should it just manipulate the CSS transform property and if so, how would the CSS change affect cropping?