Data, Maps, Usability, and Performance

API canvas d3 data geo GeoJSON html5 image JavaScript json maps mysql PHP WordPress

Top 10 Free Templates for API Documentation

Templates for API documentation

Do you need to create API docs for your RESTful API? Want to automatically generate API documentation? Today, I am going to share some free templates that are designed to showcase your API. Good documentation is really important so start with a good foundation. These API resources are simple, clean, leverage best practices, and will make your API users happy.
Read more

Online Image Editor and Photo Collage Maker

Online Image Editor

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

Map Maker and Editor with D3.js

map creator and map designer

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

20 Free Clean and Minimalist Portfolio WordPress Themes for Seamless Web Development

If you are an artist, photographer or other creative personality, running a portfolio site is essential. Otherwise, what’s the purpose of doing your job if you don’t show your achievements to the world? If you share this point of view, then our blog post today should prove useful to you. Ordering a custom-made design can cost you a fortune. If you are on a limited budget or simply not ready to spend much on a custom-made design, then a freemium website template is just what you need to achieve success.

Today, we have handpicked 20 beautifully designed free portfolio WordPress themes that you can safely download and use for different purposes. Why did we decide to share a compilation of WP themes, you might ask? Well, the answer is simple. According to CMS Usage Statistics by BuiltWith, the WordPress market share has reached 49.47%, and this percentage is only expected to grow with time. The world’s most popular companies have chosen WP from among thousands of other Content Management Systems with which to build their sites. For instance, TechCrunch, The New York Times, Coca-Cola France, Fortune, The New Yorker, and many other well-known names have trusted their online presentation to WordPress. So, if you want your business to gain international recognition, then choosing WP for building an online portfolio would be the right solution.
Read more

Top 50 Free Stock Photography Sites

free stock photography sites

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

Resources for Icons and Buttons

icons and buttons

I was looking at some icon Pinterest boards and it inspired me to start a collection of Icon and Button resources. I have found some neat icon and button sets but I have also found some new websites that specialize in creating your own icons from web fonts. I am focusing on only free resources below but I did want to mention ShiftIcons, as it is pretty cheap and very easy to create your own custom icon web fonts. Pictos is another good example and their server offering is currently free for the first 10 days. Here are all the other custom font and icon resources:
Read more

Online Screenshot Generator with Imgur

wp screenshot service

As I have mentioned previously, WordPress has a great screenshot service that allows you to make quick screenshots from any valid url. The image above is a WordPress generated screenshot, just look at the source of this page. People like to visualize things, so screenshots in articles can improve the user experience and it’s nice to offload the work to a third party (WordPress). However, dynamically generated screenshots have a performance cost and it’s kind of wasteful to keep asking WordPress to regenerate the same screenshot when my use case only needs a screenshot generated once.
Read more

2012 Advent Calendar Articles

top programming links of 2012

Every year, a handful of websites publish daily articles on some interesting subjects for the first 24 days of December. I have first seen this advent calendar of tech posts on 24ways a couple of years ago. This year, 24ways has once again delivered some great posts on web design and development goodness. A few days ago, I was also introduced to a great HTML5 and CSS3 advent calendar from DigitalPaint. Even my favorite magazine, The Economist, does a seasonal christmas countdown of the most popular maps and charts in December. Below, I am going to give you a quick summary, or alternative title with links, of all the 2012 Advent Calendar Articles on Development and Design:
Read more

Starter Themes and Frameworks for WordPress

Best WordPress Starter Themes

Do you use any frameworks or starter themes when creating a new WordPress theme? In the past, I would usually start with Twenty Ten or Twenty Eleven and slowly strip things out before adding my own HTML and CSS. Recently, however, there has been a lot of development into frameworks and starter themes which are designed to put you in a better starting point in theme development. Many of these frameworks are based on HTML5, better SEO, and blank structure which lets you just focus on the essentials. Here are the best 5 of these free WordPress frameworks:
Read more

Design Tools and Resources Online

Design Resources

If you do any web design or graphics work, you will find many of the following online resources very helpful. I have been bookmarking these for a while and wanted to share my collection. Below you will find 35 online design tools:

Dribble - show and tell for designers. Image inspiration.

COLOURlovers – creative community where people share colors, palettes and patterns. – helps with font selection process by quickly displaying font previews. – A quick and simple image placeholder service.

Lorempixel – Placeholder Images for every case.

Read more