Alright, so diving in to the tables again. It turns out the grid on twitter bootstrap runs on flexbox. Flexbox is just css, no javascript. So we can remove the other javascript stuff we included yesterday, which was probably causing the video playback on the front page to not work.
Figuring out flexbox was an interesting process. The first step was to try to see any examples. This page was good for that, but at the bottom it mentioned something about prefixing. Prefixing is essentially like some css snippets that make sure the proper ‘word’ is used depending on the browser. It looks like a cumbersome process – involving compiling css. Good for web developers to dive in to, but not so good if you’re trying to get stuff done.
Looking at this page, it seems most of the web browsers are okay to use css flexbox. Then came across this stellar example — flexplorer by Bennett Feely, and started to make sense of it. Using their css as a template, was finally able to get a flexbox css and divs to work out for the instruction rows. Some of the rabbit holes we got stuck in was about margins, and the flex-basis percentage and sizing.
Overall, with patience it started to work out. It’s always a nice thing to see something come together once you get a better understanding of the variables. Here’s the result, and it’s responsive too:
Alright, so what next? The initial problem is about editing and formatting a lot of steps for the instructions. What if the data could be saved as a json format, then have a python script to transfer it to whatever format after that? For example, it could be transformed into html after, or maybe it could be used for an app later, or something else. It will be a very convenient way to store the data, however we will have to make sure that any edits that happen on wordpress – we would be manually updating the json. Came up with a quick json breakdown of what this could be. Here is is visualised using this site.
It still doesn’t exactly solve the next issue at hand though, which is displaying a bunch of images in a way that will make it easy to see and edit for writing the descriptions. What if there could be a way to program a script to make a csv, and then import that to google sheets? Would it be able to display images? This was a simple test of the csv, it will need the part number in the future too.
Turns out, yes! It can display images loaded from elsewhere. This will be beneficial to organise the steps for the trio of kits that need the written descriptions done. In order to automate this, the next step will be to write a python script that gets the contents of a directory (of the photos), finds only the thumbnails, and then outputs the csv rows. From there, import into google sheets and then be able to write the descriptions. Export those as csv, and then with another python script, transport that to the json format, and then another python script to transport that to the html.
For the next kit log, we will be diving in to the python scripts to get the images into google sheets for writing the steps.
At some point the work done in google docs for the brain kit will need to be transferred to this format as well. It can be scriptable too, otherwise it’s a lot of manual work.