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>
[/code]

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

Code

Exploring the Broadcast Channel API: Inter-Tab Communication

Intercommunication between different contexts (like tabs, iframes or workers) of the same origin has often been a challenge. With the Broadcast Channel API, developers now have a powerful tool to easily communicate between browsing contexts. In this blog post, we’ll dive deep into the capabilities of the Broadcast Channel API, exploring its features, use cases, and how it can be effectively implemented in your projects.

computer, laptop, work place-2982270.jpg
Code

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.

Share This Post

small_c_popup.png

Need help?

Let's have a chat...


Login

Jump Back In!

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

Register

Begin Your Learning Journey Today!

Come back inside to continue your learning journey.