About a year ago in the office, my life changed forever when I first started using ChatGPT.
I work for a web development firm based in Prince George, BC, called ABC Web Link. We specialize in developing ConcreteCMS websites for individuals and organizations. While we host a variety of content management systems (CMS) like WordPress, we prefer to develop websites on ConcreteCMS due to its ease of use and reliability.
Another one of the major reasons we heavily use ConcreteCMS is its high customizability. From the ground up, it’s designed to be modified in any way a capable web developer desires. However, I'm not yet a skilled web developer. I obtained an internship at ABC Web Link while in college working on a Cyber Security degree with zero real experience in the field. After my internship concluded, my employer opted to let me continue working and learning web development. Since we mostly develop ConcreteCMS websites, even someone with very little coding knowledge can put together websites for clients using the in-context editor. But for more advanced tasks, you need to understand ConcreteCMS’s inner workings and the coding languages that comprise its source code.
Going from zero to a full-time web developer has been a steep learning curve. My days are filled with trying to absorb as much information as possible. I often spend my evenings and weekends learning new coding techniques and exploring various web development frameworks. This continuous learning is necessary because web development is a rapidly evolving field. New technologies and methodologies emerge regularly, making it essential to stay updated.
The initial phase of my journey involved understanding the basics of HTML, CSS, and JavaScript. These are the building blocks of web development, and mastering them is crucial for any aspiring web developer. I spend countless hours working on small projects, experimenting with different concepts, and trying to understand how various elements interact on a webpage. Each new concept I learn opens up new possibilities and gives me a better understanding of how web development works.
One day, ChatGPT entered the scene, and my career changed forever. AI models like ChatGPT, when paired with an open-source and customizable CMS like ConcreteCMS, create a powerful web development suite. ChatGPT can handle tasks like summarization, text and image generation, and advanced coding. This dramatically speeds up the production of high-quality ConcreteCMS websites that rival even the most advanced WordPress sites. The best part is ConcreteCMS offers a standardized user interface and dashboard that is easy to integrate.
While WordPress is a popular choice for many developers, it comes with its own set of challenges. One significant issue is the inconsistency in the user interface, which can vary greatly depending on the theme, editor, and plugins used. Customization can often be messy and time-consuming to figure out. In contrast, ConcreteCMS offers a more streamlined and consistent experience, making it easier to manage and customize websites.
Depending on the functionality you're trying to achieve, you often just need to code a new HTML block, block template, or single page. With advances in AI technology, getting a Large Language Model (LLM) like ChatGPT to code projects for you is straightforward. You just need to know what to ask it.
ChatGPT already knows everything about ConcreteCMS, including its documentation, source code, and how to write the code that puts it all together. You simply need to nudge it along and ask the right questions.
When I begin a project, I lay out a few basic rules for the LLM to follow when generating code. First, include elements in your initial prompt to integrate CSS, HTML, and JavaScript into blocks within a singular file. This makes it easier for the model to understand if it's all a single continuous block of code. Later, if needed, you can separate the concerns, but the finished code will function the same. For our purposes of AI generating an HTML block, Block Template, or Single Page, these entities within ConcreteCMS should be self-contained files within the file hierarchy.
Next, give direction regarding CSS and JavaScript selectors. Since ConcreteCMS uses Bedrock, generic selectors might cause conflicts. In your initial prompt, tell it to uniquely name CSS and JavaScript selectors in camel case, based on the project's function, avoiding generic selectors unless they are descendants of a uniquely named class or ID.
Lastly, specify the version of ConcreteCMS you are working with. Often the language model may become confused and generate code solutions that are for previous versions of the CMS. If you are working on a ConcreteCMS version 9 website, let the language model know this information to avoid wasting prompts on techniques and methodologies that have gone out of style and become deprecated on newer versions of Concrete.
From my experience, understanding a bit of terminology helps when planning projects. Large language models don’t read minds; you need to communicate with them descriptively, explaining what you need. You might need to repeat your request several times, making changes and feeding the entire code base back into the prompt window. Including browser console errors in the prompt is also helpful.
For example, if you want to make an accordion HTML block using ChatGPT, you need to know what an accordion block is and communicate this to the model. Describe what it should look like and how it should function. The more detailed your prompt, the more detailed the model’s response will be.
Recently, I integrated moon phases into a ConcreteCMS calendar block template. The calendar uses the FullCalendar JavaScript library and integrations like Magnific-Popup for event popups.
Feel free to view the finished project: https://www.echenhealing.ca/calendar.
ChatGPT was instrumental in developing that single page and the calendar block template. The build process involved learning how the calendar functions, its components, and how to modify them. I also had to learn how to hook into elements of ConcreteCMS and set up custom attributes for the calendar events and popups.
Without AI technologies like ChatGPT, it would have taken weeks, if not months, to gather enough information and knowledge to build something that nice. But with ChatGPT, which has access to the documentation and source code for most open-source projects, you just need to ask it about parts of the code, and it will summarize the design and elements for you. Armed with this terminology, you can build prompts that generate your code base.
For example, instead of saying, “I need to integrate the moon cycle into the ConcreteCMS calendar block,” you should say, “I would like to integrate LunarPhase.js into FullCalendar.js used in ConcreteCMS version 9 and into Magnific-Popup used in the calendar's event popups.” And by including the code for the calendar's default block template or its view.php below the prompt, you get something useful code-wise. It may take a few tries, but with guidance, the model will slowly refactor the code to production quality. Remember, the language model won’t make creative decisions; you need to interactively test the code, report browser console errors, and suggest changes or ask questions.
Another project I built recently was a ConcreteCMS website for the Deka Lake District Ratepayers, incorporating a dynamic business index single page.
You can view the completed business index here: https://www.dekalake-district.ca/advertisers.
This project involved creating Express database management pages for backing up and importing the database, and a graphical interface for individuals to edit entries and upload images. The business index includes features like letter links, a search bar, and a button to download a dynamically generated PDF version of the masonry grid. ChatGPT was instrumental in coding approximately 95% of these single pages, significantly reducing development time and ensuring a high-quality outcome.
The implementation process began with thorough planning, identifying key requirements and functionalities. Leveraging ChatGPT's capabilities, the coding work for various components was completed efficiently. The AI-generated code included Express database management, graphical entry management, and advanced search functionalities. Extensive testing and refinement ensured all features worked as intended, followed by integration and deployment on the live site.
The result is a dynamic, interactive business index that meets the needs of the Deka Lake District Ratepayers. This project demonstrates the potential of AI in streamlining web development processes and delivering high-quality results.
In my free time, I have experimented with ConcreteCMS and ChatGPT to create a few interesting projects, from an HTML Hero block featuring matrix rain text, to an online gaming website using ConcreteCMS as the front end.
Examples include:
HTML Matrix rain text hero block
With AI and ConcreteCMS, you can take your web development projects to the next level. If you can conceptualize it in your mind and put it into words and context, ChatGPT can interactively code almost anything. This combination of technology provides a powerful canvas for web development projects, limited only by your imagination and ability to ask the right questions.
When beginning a new project with AI, it's essential to establish a solid framework. Here are some tips to help you get started:
The combination of AI and ConcreteCMS is not just theoretical. Here are some real-world applications and success stories that showcase its potential:
By leveraging these capabilities, developers can harness the full potential of AI and ConcreteCMS to create innovative, efficient, and user-friendly web solutions.
The integration of AI in web development is just beginning. As AI models like ChatGPT become more advanced, their ability to assist with complex coding tasks will only improve. This opens up new possibilities for developers, making it easier to create sophisticated and highly customized websites. For those new to the field, AI offers a valuable learning tool, providing guidance and support as they navigate the complexities of web development.
In conclusion, the combination of AI and ConcreteCMS has the potential to revolutionize web development. By leveraging the power of AI, developers can streamline their workflow, enhance their productivity, and produce high-quality websites with ease. As technology continues to evolve, the possibilities are endless, and I am excited to see where this journey will take me.
Through continuous learning and experimentation, I aim to master the art of web development, using AI as a powerful ally in my quest. The future of web development is bright, and with the right tools and mindset, there are no limits to what we can achieve.
