Tips for Building Effective HTML/CSS/JS Web Applications
I want to share just a few tips and resources for web developers creating their own webapps. It is a very difficult process and will require weeks if not months of study & practice. But I have to agree that it is worth the effort, because web apps are becoming very popular among google searchers. Build something great and then share it out to see how many people will care to bookmark or save your links.
Working over APIs
One of the coolest solution I have made was built on top of an API reference. There are lots of online networks you may use such as Etsy, eBay, Instagram, and others. It is important to note that using an external 3rd party API will save you the worry of storing local data. You will not need a database because all of the content will be pulled out of the service’s database.
Recently I had created an API instant search using DeviantArt posts. This will query the most recent signature banners related to any keywords you search, and all the data will be pulled instantly. The reason this helps so much is because the original DeviantArt search page requires a lot of extra settings. It can get annoying when you are waiting around for the results – and my solution is definitely a bit quicker.
This is ultimately the purpose of working on top of APIs. Obviously the service-in-question may choose to do things their own way. But if you do not like it then you can go ahead and build your own solution! It is a great idea and the open source movement has really pushed for this in larger quantities. jQuery and other JS libraries are totally compatible with reading XML/JSON response data, so almost any API is a valid choice for your webapp.
Static Template Designs
Many web applications will follow the MVC Model-View-Controller programming hierarchy. This is a method of splitting your backend codes from the frontend display views, and using the controller to behave like an organizer between the two. This is also just as possible when writing frontend web applications, but I think the concept is unnecessary for smaller ideas.
Instead you may consider building a single basic HTML/CSS template page without any major content. Then you can duplicate the page, setup your JS libraries and include all the codes you need for dynamic content. Unless you are using a CMS backend then this solution is definitely an option. Frontend developers should already be familiar with the design trends and you will not need to manage complicated .tpl files.
Cloud-Based Code Editors
How many times have you been on another computer without your work to access? Or even without a code IDE to write scripts? If you still have that itch for coding I would recommend visiting any of the free online code editors. jsFiddle is a personal favorite which allows you to sign up for a free account and store all your applications under a single profile page.
The ability to share your fiddles or keep them private is also tucked away in the account settings. I think this is an excellent method for practicing new ideas without worrying about creating new documents on your HDD. You will not even need to open a single program other than your web browser. And these codes are accessible in the cloud from any computer with Internet access.
Another solution is JS Bin which has a slightly more open layout design. You will find a lot of the same features and a simple library patch for including any other JS scripts into your code. Cloud-based editing is taking the web design community by storm. You may quickly prototype ideas in your spare time with just a basic Internet connection. Keep these tools in mind since you never know when you may need them in the future.
Make Something Useful!
The purpose of making any web application is to offer something of value to the Internet. It could be an instant search, or a puzzle solver, or a translator, or some type of drag-and-drop interface. The ideas are practically endless but that is precisely why you should analyze your ideas to make sure they are worth something. Will you ever go back and use this application?
Even just 2 or 3 people who love what you have built will make it all worthwhile. And if you can find a lot of use for creating, say, a WordPress functions.php generator then, it will be worth any time spent coding. But the worst feeling is when you are 1-2 weeks into a project and you lose all motivation because the idea is lacking direction. Keep yourself motivated and follow through on projects which you know have a sense of purpose.
- Important Considerations When Building Single Page Web Apps
- Ember.js – Web Applications Done Right
- Building Single Page Applications With jQuery’s Best Friends
- Building Large-Scale jQuery Applications