Everyone…”Go to Your Room!”

In today’s post, I want to address a concept entitled, ‘Separation of Concerns’. This is a programming concept to make maintenance of your application easier. First let’s go back in history…

In the early days of web sites, everything was jumbled up. All web applications have three basic parts…

  1. Content (HTML)
  2. Presentation (CSS)
  3. Functionality (JavaScript)
In the ‘old days’, these three legs of a web app were jumbled together. Let me illustrate this with an HTML tag that is now deprecated.

There used to be an HTML tag called, “font”. This tag has now been deprecated (in fact, this tag is not supported in HTML5), although you might run across it on sites that are ancient and have not been updated. This tag was used for content to control the styles of text. So while this tag is no longer in use, it is a good way to illustrate the need for separation of concerns. Here is an example…

[code lang="html"]
<font size="3" color="red">Some Text</font>

So in the aforementioned example, you can see how the font tag was used to set the size and color of the text. Why was this a problem?

Imagine your company site contains 72,000+ pages (I used to oversee such a site). Now imagine your company goes through a merger...again...this happened to me. The marketing department comes to you and says, "We used to have red as our primary header color and we are switching to blue. Can you please make that change to the web site and do it for the press release tomorrow?" Well, if you used the font tag, then you have to go through every page and every header and make the change. Yes, we could use find and replace, but still a headache...an expensive one.

If we would have separated our style from our content and utilized a css style, then all we would have to do is make the change in the css and it would be replicated across the site.

Note: When I took over that 72,000+ site, it was commingling thses items. One of my first projects was separating these. It made life so much easier and we were able to make changes much quicker. So work to separate your applications into those three areas as much as possible. It is more work on the front end, but saves so much in the long run.

Happy Coding!

Clay Hess

More To Explore

computer, laptop, work place-2982270.jpg

Unlocking Wireless Communication: A Dive into the Bluetooth API

Wireless communication has become an integral part of our daily lives, and Bluetooth technology is at the forefront of this revolution, enabling devices to exchange data over short distances and creating a world more interconnected than ever before. At the heart of this technology lies the Bluetooth Application Programming Interface (API), a powerful tool for developers looking to harness the capabilities of Bluetooth in their applications. In this blog post, we’ll explore what the Bluetooth API is, how it works, and the possibilities it opens up for innovation in wireless communication.

lighthouse, beacon, atlantic-8578318.jpg

Understanding the Beacon API: Simplifying Asynchronous Data Transfers

In today’s data-driven world, web applications often need to send data back to the server. Traditionally, this has been done using AJAX requests or similar methods. However, these techniques can come with a cost, especially when dealing with data that needs to be sent during the unload phase of a document, such as tracking and diagnostic data. This is where the Beacon API shines by allowing developers to send data to a server more reliably and efficiently.

Share This Post


Need help?

Let's have a chat...


Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 


Begin Your Learning Journey Today!

Come back inside to continue your learning journey.