Unminify HTML, CSS, and JS Code with JavaScript

Online Tool to Unminify HTML, CSS, and JS

There are a few reasons to minify code, the major one being web performance. Browsers don’t need whitespace and comments to process your files. But, it’s not fun to work obfuscated code and I find myself often using jsbeautifier to uncompress source code. Today, I decided to implement this tool myself show how you can unminify and reformat HTML, CSS, and JS code with a JavaScript function. Since js-beautify is open source and supports JavaScript, this was an easy task.
Read more

Client-Side JavaScript to Node.js

JavaScript is mostly used on the client-side and in the browser, enabling all kinds of dynamic interactions on the page. When Brendan Eich created the language for Netscape in 1995, there were already server side implementations but node.js made it really popular. Node is a cross-platform runtime environment that is event driven and non-blocking and uses the Google V8 JavaScript engine to execute code. So, if you already know JS, you can now code on the server. There are a ton of use cases that this enables but today I want to focus on a simple concept of moving your client-side JavaScript code to Node.JS so that you can hide or protect your JS functions from being visible to end users.
Read more

HTML5 Photo Browser for Local Files and Directories

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

Weekly Roundups and Aggregators on Web Development

A lot of blogs and sites have a weekly roundup, a collection of articles and links that you might have missed over the week. I have been a big fan of HTML5 Weekly which is an awesome email newsletters with interesting links on web development. Aggregating content in our times of information overload can be helpful and many websites are now built for the purpose of gathering and organizing bookmarks around a topic. Today, I want to aggregate the aggregators, the weekly roundups, and other useful and free resources on web development that you should be following for staying up to date.
Read more

CodeMirror vs Ace Editor

There are a lot of online code editors out there and I have aggregated 30 Code Playgrounds in the past. There are also mini code editors, all kinds of browser editors, and some cool ways to write, save, and preview code with developer tools. Since HTML, CSS, and JS is all processed on the client side it makes sense to bring code editing to the browser. Today, I am going to take a look at two JavaScript libraries that enable online code playgrounds with all kinds of code editing features: CodeMirror and Ace Editor. I am also going to create my own mini code playground with these tools to see which one I like more.
Read more

Extract Zip and Rar Files with HTML5

Here is the HTML5 Online Archive Viewer

A while ago, I blogged about using the Imgur API to upload images via file, directory, or zip archive. Today, I want to dig a little deeper into processing archive files with JavaScript and reading their contents, the files inside the archive, on the client side. I will explore zip and rar archive files and leverage the HTML5 FileReader API and Blob objects to read the files inside the archives. This will allow you to not only see what is inside these archive files but you can actually read and view the data inside, all within a browser.
Read more

Creating a WordPress Plugin Admin Page

If you are building a WordPress plugin, there is a high chance that you want to create a backend page, perhaps a place for Admin settings or options. This post will cover how to do that and I will also build a WP Plugin which has an Admin page that interacts with the WordPress database. The plugin will render a mySQL table in a HTML table with dynamic JavaScript features like sorting, searching, etc. I will show how to include specific JavaScript and CSS files for the plugin Admin page and how to interact with WordPress mySQL tables. The cool think about a plugin admin page is that you can use it test all kinds of WordPress Database queries.
Read more

Convert Images to Video with JavaScript

How do you make a video programmatically? Sending images to a server side program like FFmpeg is one option but how do you make a video from images in HTML5, all on the client side? In the past, I have converted html5 canvas frames into an animated GIF and now I am looking to do something similar but finish with a video file. You need a video encoder and today I just happened to stumble on Whammy, a real time JavaScript WebM Encoder. It even comes with a demo which shows how CANVAS frames are encoded into a webm video file. So, today, I am going to create an online video creator that lets you upload some images which get converter into a picture slideshow in video format.

Here is the Online Image Slideshow to Video Converter
Read more

Save SVG as an Image

SVG is awesome but sometimes you want to convert it into an image format like a JPG or PNG. If you created some chart or graph with D3.js, you might want to offer the option of saving that graph in an image format. Looking around, I landed on this Save SVG as PNG article and while it provides a good solutions to the problem, I wanted to expand on it and provide some other options. First of all, I want to go through an example where you are creating something in D3 and then want to make this conversion using a button and a JavaScript function. I think you could provide 3 types of image files: an SVG converted to a dataurl and inserted into an image tag (this is still technically SVG), a SVG converted into a PNG using HTML5 CANVAS and inserting that base64 data into an IMG tag, and finally, converting the SVG into a PNG binary data and loading that into a blob url so that you can provide an actual filename inside of an IMG tag.
Read more

List of Autocomplete Plugins and Libraries

I have been searching around for some good jQuery autocomplete plugins or any other JavaScript autocomplete micro frameworks and wanted to share my results. I initially wanted to use datalist since it is part of the HTML5 spec but lack of Safari support is not ideal. I’ve also had some issues with click events on a datalist and my needs really require a database with the autocomplete so I started looking for some other scripts. If you are not using a database and the list is relatively small, you could implement something like jQuery live search, flexselect, or a searchable dropdowns but this list focuses on a more complete solution where you need to query a backend to retrieve and filter results. Here is a list of over 30 of the best jQuery and pure JavaScript autocomplete scripts, plugins, and libraries:
Read more