Client-Side Web Project - Pt 1

Software Development
Written By Justin Beall

The ease of implementing REST webservices and the flexibility of JSON have transformed server side web projects. As a result, web browsers have adapted frameworks (using JavaScript) to leverage these technologies, such as Backbone, Ember, Angular, etc.

I recently have been bouncing around the idea of a pure client-side interface. The flexibility of JavaScript and modern browser implementations have made most features available without the need of traditional server side logic. Logical statements, iteration, and dynamic interfaces can all be achieved through JSON and REST service calls that leverage a MVC JavaScript framework. I have chosen AngularJS as my framework of choice.

As I continue on in the project, I will be sure to update the best practices and technologies lists.

The premises of this new project is: Zero usage of server side scriplets/tags of any form

In doing so, it should be able to run as a resource on the context path of any webserver container. The container can be any language and any implementation of that language. I am using Tomcat as my container, but similar "shared" directory pathing can be applied in an IIS environment.

<Host>
  <Context path="/${url_path}" docBase="${path_on_file_system}" />
  ...
</Host>

The set values I have for the url_path and the path_on_file_system are set to: path="/HtmlProjectPrototype" docBase="/SERVER/static_content/HtmlProjectPrototype" respectively.

In creating a new project, I had a couple of best practices I wanted to implement:

The technologies/libraries used in the project so far are:

  • CSS

    • Bootstrap
    • Less
      • Compiled CSS
        • Made it so the complementary colors from paletton.com are variables in Less file
        • Allows for easy changing of theme colors
        • Less

  • JS

    • jQuery
      • JavaScript extension
      • Use jquery.load to dynamically load HTML into content div's
        • Helps break up the app into modules
    • PreloadJS
      • Resource management
    • Less
      • Browser side compilation

In creating the project, I spun off into a dark place of trying to pick a color scheme for my project. I am sure almost every web developer (e.g., non-web designer) goes through this crisis. Traditionally, we plan APIs and integration of technologies, but when it comes to picking a pleasant palette of colors, we panic. I Googled search color themes and came across the following website: An Introduction to Color Theory for Web Designers.

As a result of reading this page, I found the following tool to help create a color scheme: Paletton.

By using this site and combined with my leveraging of Less I can easily switch out the theme:

/* Main theme colors */
/* http://paletton.com/#uid=10I0u0k86uLfMRoc4HZ7dnw3-hu */
/* "Color Table" Values from left to right */
@header_color: #FFC981;
@footer_color: #FFD69F;
@content_color: #F5DBB7;
@header_color_active: #BBA991;
@background_color: #8B857C;

Get In Touch

We'd love to hear from you! Whether you have a question about our services, need a consultation, or just want to connect, our team is here to help. Reach out to us through the form, or contact us directly via social media.

Justin Beall
Previous

What is Hadoop?
Next

Effective Java