Website Development in 2022

Website development has shifted quite a bit over the past few years and new technologies have emerged to help market to the world in 2022. As this post is relevant now, in a year these technologies may have shifted again. Much of web based development has changed due to the evolution of the techniques due to the separation of much of web based technologies into purely technical and non-technical roles.

Many technologies go into the creation of a modern website. In previous days there were only a few options open to developers to build a website. In the beginning, there was HTML. HTML was great in that it was a simple language to build very simple websites. The trouble was that HTML in itself did not contain any way to make the designs look different. So, at the same time, HTML was produced, CSS was also added. CSS then allows HTML to be formatted and styled to show content using different sizes, colors, fonts, and various other layout features. CSS and HTML are not enough to do a full design, so images were added to the mix that could be designed using tools such as Photoshop. Thus, the world of the internet was born.

At some point along the way very soon after HTML can CSS was produced, JavaScript became the supported actual programming language of browsers. Now, after over 30 years of web development, Javascript remains the most powerful language for browsers. Javascript makes websites do very interesting things. Through the years, some other languages have been introduced into browsers in the form of active X controls, Silverlight, Adobe Flash, and various other technologies attempting to extend the functionality of a browser by using the browser as a way to deliver applications. However, in the end, JavaScript has stood the test of time as being the primarily supported technology in browsers.

JavaScript as a language has significantly evolved. Many millions or billions of websites use JavaScript to some degree. The more advanced websites are nearly 100% composed of JavaScript. JavaScript can also be used as a server-based technology. Many 10s of thousands of developers also know JavaScript and can make use of the other technologies supporting the development. NodeJS, a very powerful JavaScript technology was built to support modularizing JavaScript and adding powerful features to make the development of web technologies easier and more featureful. However, the browser has still not fully caught up with the advances in JavaScript. Therefore, a separate process is added to many web applications to "transpile" or convert JavaScript into a language that a browser understands. This makes development slightly more complex, though that alone does not lead to the depth of the challenge in building new websites.

The main issue with Javascript is that it is a programming language and far more complex for search engines to read. Search engines are designed to automatically and very quickly "look" at a website, understand the purpose, and then use keywords to categorize a website for including in the search results list. This technology is fascinating and will be included in a future article. This does present a challenge for modern web applications because while they are complex, they also need to be friendly to search engines. Also, we have many dozens of tools to build "dynamic" websites. This means websites that can update the content without necessarily needing a developer to update and redeploy that content. This also makes the data and content real-time. For instance, that is how this website is built.

The following tools are being used:

1. ReactJS: A fantastic powerful javascript based technology for building applications.

2. Gatsby: A framework for building applications that compiles ReactJS code back into basic HTML / CSS for the search engine

3. Firebase: A data store, hosting, and automation engine for deploying and hosting a website.

4. WebStorm: A full-featured integrated development environment used to build Javascript, HTML, and CSS

5. Prismic.io: The dynamic headless content engine for building content.

6. NodeJS / NPM: Package management and build

7. Git: Source code repository for managing the versioning of the source code.

8. Canva: A design tool for images

This stack is incredibly powerful and used together can accomplish the main goals of a modern website and allow for content management and deployment of search engine optimization / rending far better than tools used before now.