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
Sometimes I go to my saved links and the website is no longer there or it has been parked, sold, or transformed into another project. This has recently happened when I wanted to revisit a neat air traffic controller game called Air Strike (notice the link goes to Wayback Machine). This game was submitted to the 10K Apart competition where participants show off some amazing web experiences written in under 10k of JavaScript code. It looks like the competition is happening again but the old demos are all gone.
Thanks to the Internet Archive, you can find a lot of static content that once existed and today I want to show 20 amazing JavaScript projects from the older JS10k competition that you can still check out (Some of these require clicking “Load Unsafe Scripts”):
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
Imagine a table of data, perhaps car data with columns: ID, Model, Make, Color, Age, etc. How do you process this data so that you can answer some simple questions or visualize it with JavaScript charts? Some questions, like “how many cars are red?” can be processed by looking at a count of rows that meet your criteria (rows where column color is red).
Other questions, like “what is the distribution of colors in your data set?”, requires shifting or pivoting the data, as you want to evaluate a specific column instead of rows. Charting will often need this data pivot and doing it optimally is crucial if you are working with a large amount of data on the client side.
Read more
Last year I wrote an article on Gravity Forms and now I want to follow up with something on Formidable Forms. Instead of doing a comparison between these two WordPress plugins, I will write about two problems that I have encountered with FormidableForms and explain how I have resolved them. The first one is based on the backend, PHP code that will create repeatable fields inside a form and the second one goes into the front end, JavaScript code that helps hooking into “in-place” edit.
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
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
Here is a list of the top jQuery plugins for alerts and messages and the best JavaScript notification libraries. Some are enhancements to console log messages or alert messages and some are full JS notification systems. There are many options: you have plain JS solutions, jQuery alert plugins, BootStrap versions, alert modules for Angular, BackBone alert systems, and other notification frameworks for ReactJS, Meteor, UI Kits, etc. Here are the top 50 alerts and notification libraries with a some organization:
Read more
Dragging or resizing elements or divs on the screen is a pretty popular feature of modern user interfaces. It’s pretty awesome that there is a resize property in CSS3 and drag and drop in HTML5. However, both are pretty limited, and modern designs for such functions require JavaScript solutions. Many end up implementing Resizable and Draggable from jQuery UI (example) but that library is really bloated and today I will cover some jQuery UI alternatives to resizing and dragging elements on the page.
Read more
Create GitHub Repo with Folder Upload
GitHub has a ton of awesome repositories and it hosts most of the top libraries, frameworks, and plugins. People sometimes ask me to put code on GitHub and today I wanted to look into optimizing that process. It’s not hard to create a git repo, pull it, authenticate, and commit from the command line but it would be great to just have it all work with just a folder upload. If you are working on a project, it probably lives in a folder on your hard drive, so lets create a page where you can upload folders and it automatically creates a repository using the GitHub API.
First, I will pick up from my last post on the Gist API and explain how you can create and add files to GitHub repos with Ajax. Then, I will create an online page that supports repo creation with client-side folder input and API calls with Ajax.
Read more