An inexperienced coder can also create Web applications with 32 handy tools later

I am a Ruby programmer (Rubyist) who does not have design skills, I recently tried a Web application as follows.

The application name is "Reminderr", which reminds users when important unread information appears on Pocket or feedly.


My information on Pocket and RSS is always dense and chaotic, so I really want an app that shows me which information is important among them, so I decided to try it myself.

I think we need a list of support tools for those times when we need to do it ourselves.

So today I will list all the tools that I used to make the above reminderr application and some other tools that I think are convenient as below.

Just using these tools well, a coder doesn't know anything about design, nor does it have an aesthetic eye as I can also create a Web service box like the one above. There must be many other convenient tools that I don't know yet.

Hope it will be valid for you.


Bootstrap (Newest: flat design)

Free Design Template (Recommend)

If you pay, use it

CSS animation

Animate.css (Recommend)

Very light and very easy to use!

Create a logo

Squarespace (Recommend) #


Create components of HTML

coveloping (Recommend)

A collection of many tools used to generate parts in HTML pages such as the price page and so on.

Create a member page team in a very simple way.


Born a top page akin to that page.


The specialized page for search references UI components.

Compress photos

The following two great tools can compress the image size to nearly half that almost does not reduce image quality.

JPEGmini (Recommend)

TinyPNG (Recommend)

Edit photo


SeaShore (Mac)

Name the application

Dislexicon: The English Language Extender

The tool proposes service names based on the keyword we entered, the suggestions sound very good and sound.

This tool has the Android app, which helps us save the name we like to use later.

Web service naming idea tool

Export any service name based on the connection of the words stored in the DB. The method is simple but quite convenient.

Nice picture

Free high-resolution photos.10 new photos every 10 days.

There is no search function, but on this image full strokes that use free.

List photo on MEDIUM blog

Beautiful video

Summary of beautiful videos used as background (for personal use as well)

All videos look cool.

jQuery plugin for creating video background

Super simple usage.



SNS avatar generator


Used in case you want to create a series of avatars used for demo etc.

Having integrated API, it is worth the try.

Multi language

Turn all pages into multiple languages ​​by writing exactly one line of code!

Choose color

Adobe Kuler (for pro use)

HUE / 360 (for simple use)

Web Color Data

Summary of color code of famous Web services.

Service introduction video


The tool can create service introduction videos like Power Point.

Social plugin

General button tool associated with social networks.


Ninja omatome button



A very famous cloud server can be used for free.

Extremely suitable for making prototypes.

New Relic (add-on for Heroku)

A simple, free server management tool that can be added to Heroku.

Using this tool can know exactly how the server is loading and there is an error reporting.

Send mail


More convenient to use as an add-on for Heroku.

HTML mail

BeeFree (Recommend)

Generating HTML mail is extremely simple by dragging and dropping, that's free!

There are templates available for all types of mail or use, so we just need to select the template, edit a bit, after export, then customize it again is fine.

The tool also supports sending mail for testing very simple.


The divine tool not only allows you to create HTML mail but also allows you to send a series of mail messages in step mail.


Provide a template for creating responsive HTML mail in a simple way.

There are documents that guide the code for each part in detail.


If I want to create an HTML mail that I customize myself, I think this is a convenient tool.


Favicon Generator

The tool generates the favicon.ico file when we upload the image.

The tinycon – js library can export alert numbers for favicon

A small js library capable of exporting alert numbers for favicon, we just need to write 1 more line of code.

The above tools for personal use are also very convenient, please make good use of them.

I almost summed up what is not related to the technique. There are also many tools on Rails, Heroku or API as below.


Sign in, sign up management


facebook ロ グ イ ン

Asynchronous processing

Redis & Resque


Batch processing





Share the news now