ChatGPT, Tableau, HTML, CSS, and JavaScript

Over the past few days, I was updating my portfolio because I wanted to try embedding a Tableau dashboard into my webpage. In order to do this, I needed to change my slider toggle to be toggle tabs. I chose not to do it with ChatGPT because I wanted to gain a better understanding of the languages (HTML, JavaScript, and CSS). It’s not that I’m opposed to using generative AI for coding, but it’s simply because I wanted to understand the parts of the language and code organically.

I see generative AI as a calculator. I can’t immediately say what 73x19 is and would probably choose to use a calculator for speed and efficiency. If I needed to perform that calculation without assistance, I could because I learned the concepts of multiplication.

Changing from a Slider to Tabs

Once I finished getting the page to look how I wanted it to, I asked ChatGPT to “Help me change a slider bar on my webpage to tabs.”

• Using ChatGPT's code template was indeed faster.
• It provided an explanation of the code even if I wasn't using the same code.
• It ignored the “slider” part of the instruction. To give ChatGPT some credit though, it didn’t know the existing code for the slider.

But

• There wasn’t a list of options/”switches” I could toggle (e.g., font-family, the auto option, border, text-align, transition, etc.) in the CSS.
• There was no image of what the end result should be. I didn’t know what it was supposed to look like and whether it was what I envisioned. If the code provided by ChatGPT wasn’t what I was looking for, then I would have to start the process from scratch.

The two points above effectively meant I needed to have a “sandbox” to build the code and test it with. I would need to go back and forth with ChatGPT until it provides me with all the code I need to build the working parts. This meant I would have to understand the process of how to build what I envisioned and I couldn’t “window shop.” It didn’t give me various options of tabs (e.g., animated tab bars, closable CSS tabs, tabs that were aligned vertically rather than horizontally). If I didn’t know the vocabulary of what type of tab I wanted, or if I didn’t know that it was a design I preferred but wasn’t thinking of, I wouldn’t know to ask ChatGPT for that. All I needed to do was type in “html toggle tabs” into my search engine and I’d get results with example images, a variety of tab displays, and code templates to copy and paste. I’d argue it would be faster and to copy and paste these code templates because I knew how they were supposed to look when displayed and I didn’t have to wait for ChatGPT to finish loading the results. I didn’t have to engineer multiple prompts, just open multiple tabs and synthesize the information together. Instead of synthesizing the code and text ChatGPT returns, the traditional method of learning would involve synthesizing the code from a variety of websites.

Embedding the Tableau Dashboard

I then asked ChatGPT “How do I embed a Tableau dashboard in my webpage?”

• Step-by-step instructions were helpful.
• They aligned mostly with what the Tableau’s guide on how to embed views into webpages.

But

• The instructions sometimes didn’t align to what I was actually seeing (e.g., it assumed there was an iframe code to embed).
• The instructions on the Tableau website were simple and straight-forward. It was even more concise than what ChatGPT returned.

The biggest problem was debugging. The Tableau view just wouldn’t display. My website is just my portfolio. It only contains text, some CSS to alter the style of the website looks like, and JavaScript to make the toggles work. It was too simple of a website so I knew that if I could get the Tableau view to display on a blank HTML document, I should be able to figure out what was wrong. I figured out that the reason my dashboard wasn’t displaying was because it needed to be the first tab that was displayed. There wasn’t a typo in the code, a permission issue, or an API issue. I couldn’t find out why this problem existed even after searching the internet. When asking ChatGPT, it also didn’t contain the answer likely because its training data didn’t contain my specific problem. But because it didn’t know my problem, it couldn’t give me the solution.

The workaround in my head was easy: make sure that the dashboard was on the first tab, use JavaScript to automatically click on the tab I wanted to be displayed once the user entered the website. I then figured out if this was done too quickly, it still wouldn’t display, so I’d need additional JavaScript to make it wait a second before clicking on the other screen.

In the end, I reverted my website back to a slider display. I added the dashboard as a project and had it direct to the Tableau page.

• I could not have multiple dashboards embedded if each of the dashboards needed to be on the first page to load. I may have one dashboard now, but I expect to add more in the future.
• The published Tableau dashboard itself didn’t reflect the look of the dashboard as I was working on it. For some reason, some of the fonts were not the same when it was pushed to Tableau’s Public server. I could have images on it explaining what I was seeing when I opened the packaged workbook with the embedded dashboard, but it would’ve looked out of place.
• My friends liked the look and feel of the slider better.

This might sound like it was a futile 4-days of effort but I ultimately learned so much more about HTML, CSS, JavaScript, Tableau, and the peculiarities that arise when integrating all of them. ChatGPT wouldn’t have taught me all of this, and because I struggled learning the difficult way, I had more options available to me and gained a deeper understanding of every single letter of code I typed. It’s like sending a multiplication worksheet home for an elementary school students and being told not to use a calculator. When the student understands the concepts, whether they use a calculator or not to solve the problem will become irrelevant.