Data, Maps, Usability, and Performance
A while ago, I played around with a cool Perspective Transformation using SVG and matrix3d CSS transform. It made sense to turn it into a mockup generator like Magic Mockups or PLaceIt. But, I ran into some issues when overlaying an SVG with matrix3d transforms on HTML5 canvas. I found an JSfiddle example of just using HTML5 CANVAS and transformed it into a full mockup generator.
Read more
Bookmarklets, or the ability to execute your own JavaScript code on any page, allows you to customize your browsing experience in many ways. A while ago I wrote some JS code that would simply remove all content from any page and only show images with zoom on click functionality. It works well as a bookmarklet but I wanted to see how easy it is to package this into a Chrome Extension. I am doing this for fun but there are some strong reasons like access to cross domain resources, access to network requests, and ability to share with others via the Chrome Store.
Here are some simple steps that show how to convert JavaScript code into a Chrome Extension
Read more
CanvasEdit – the HTML5 Photo Editor and Collage Creator
Recently, a few image editors have been created with HTML5 and Canvas. Today, I decided to build by own Photo Editor by using UI Kit for layout, FabricJS for Canvas manipulation, Color Thief for retrieving a color palette from an image, Spectrum for a color picker and other libraries like Say Cheese for integrating pictures from a webcam and noUiSlider for a nice range slider. Since I have previously covered building Instagram photo filters with HTML5, these are also included in the image editor.
Read more
After building a bunch of D3 map demos, I wanted to combine them all into a Map building tool, a Map Creator based on GeoJSON or TopoJSON with many design features, editing capabilities, and proper export to SVG or PNG. It started out as an enhancement to this GeoJSON and TopoJSON Visualizer and D3 Map Starter Template. I wanted to finally use dat.GUI as a visual controller for map creation. I added some preselected maps of the world, individual countries, and even states as well as the ability to add your own map data. You can change the map projection, resize the map container, and control various design elements from colors, opacity, stroke, and even textures via Textures.js.
You also have some powerful editing capabilities: ability to remove individual objects from the map and ability to merge objects together. The best thing is that you can edit the shape of any object by clicking on it and and zooming in. This exposes small green circles on object borders that can be dragged around and the drag event changes the object shape by automatically editing the SVG path data. My previous examples on working with SVG graphics helped in adding this feature. The final image can be saved as SVG or PNG using code from the Save SVG as PNG article. Finally, I integrated SimpleModal which has a textarea where you can add points (latitude, longitude, and location name) that get added as markers on the map.
Read more
I have been a big fan of Google App Scripts. This service allows you to build powerful scripts that can be scheduled and integrated with Google (email, Google Docs, Excel) and external APIs. You write in JavaScript, within a browser based code editor right in Google Drive and the script can even be published as a web app. The quotas or limits are pretty good so you can quickly build something powerful for free.
Today, I will show how to create an Image Proxy with Google App Scripts which would allow you to grab images from other domains or go around the browser’s same-origin policy. Basically, the Google App Script is a server side proxy for your client side request. So, if you are exporting SVG as an image with images hosted on another domain or saving HTML5 Canvas with toDataURL() method, this could help you avoid tainted canvas and browser security errors. But, really, it’s just a simple example of a Google App Script published as a web app.
Read more
How do you pin photos on Pinterest automatically? I have covered some elements of the Pinterest API before, but I did not expose the endpoints necessary to pin via the API. None of that is yet publicly available but it got me thinking about doing more programmatically on Pinterest in general. What would it take to automate the process of pinning an image automatically? I think a simple solution is to use a headless browser and recreate the steps to make that happen. Lets go over a simple script that will login into Pinterest, retrieve an image from an external source, add pin it to a board with a pin description.
Read more
I was recently playing around with dat.gui and the cool FizzyText animation made me consider the concept of exporting HTML5 Canvas to video. I have previously covered canvas to video conversion but it was specific to making a photo slideshow. Today, I want to create a simple script in JavaScript that will grab any CANVAS element, on any website, retrieve the image frames, and compile them into a video file.
Read more
Are you searching for high quality free stock photography websites and resources? There is a reason why imagery today accounts for over 60% of the page size and high-quality photos are needed in all aspects of design, for web or print. It’s true that websites like iStock or Shutterstock can be relatively inexpensive, but nothing beats free. Some of these require attribution but many others are in the Public Domain and good for commercial use. These photos without watermarks are a perfect way to upgrade your blog or website for free.
Here is a list of the best resources, websites, and search engines for amazing free stock photography.
Read more
Online Image Browser for Local Files
I was browsing old photo albums yesterday and it made me want to build an image viewer with HTML5. I want it to work with directories that have many files and this raises a question on browser performance. A gallery of pictures can easily consist of hundreds if not thousands of images. Loading all of them at once would probably crash the page or make it terribly slow and unresponsive. The DOM is not built to support so many elements with good speed. Plus, loading everything is wasteful as the screen size can only show a limited amount of images at one time.
Read more
Preset photo filters are nothing new but Instagram has certainly made them very popular in recent times. While Instagram and it’s many clones are manipulating pixels with native technologies, the web has HTML5 CANVAS which enables all kinds of image editing with JavaScript. There are many image processing libraries today that could be used to recreate Instagram photo effects in the browser. Today, I am going to explore some of these scripts, evaluate how they can be used to recreate the actual Instagram filters, and create a demo that combines HTML5 drag and drop, webcam photo capture, and lots of various preset photo effects.
Read more