Coding ODD Foundry Site – Set up and Initial Tests

Initial Set up

I had previously registered the oddfoundry.com domain and hosting at the start of the project and had set up a temporary holding page that will show to users if they access the site before I have launched it. This allows me to work on the site directly online and very easily test the site on multiple devices as I progress through the coding. Knowing that I would want complete control over the design and functionality of the site I opted to build it using the WordPress content management system and extend it’s functionality via the use of plugins, in particular WooCommerce that allows me to run a self hosted shop that can sell digital and physical products.

Left. Setting up the hosting
Right. Setting up WordPress and WooCommerce

Installing WordPress is relatively easy and once set up on my hosting I began to install the required plugins and complete the set up procedure for WooCommerce. This involved creating a series of dummy products and pages of content so I that I could ensure the site was displaying content correctly. I also set up the site with an SSL certificate for security which will be needed if I plan to sell products on my site. During the Digital Media unit I had made use of the Bootstrap framework and I found it sped up my production time. As stated on their site, Bootstrap is “the world’s most popular front-end open source toolkit” (2021), html by itself doesn’t allow you to create, style and manipulate grids/buttons/drop down menus easily, by using Bootstrap as the basis I can make use of these components quickly and style them in the way I want them to display. Alongside Bootstrap I made use of a WordPress theme template generator called Underscores that produces all the standard starter templates for a WordPress site that I may need. By combining the Bootstrap framework with the Underscores starter templates I ensured I had a solid foundation to then build my custom site.

Above. The Bootstrap website showing examples of the different components built into it’s framework (2021)
Above. Integrating Bootstrap and the Underscores core coding required some work removing and recoding certain components, primarily the menus and headers. Both included some code to make these display correctly on mobile sites, in most cases I opted for the Boostrap code.

Typography and Layout

With a basic framework in place I began integrating my initial site designs into the site. The lefthand column is set to be static, so that it remains in place as the user scrolls down the page. The site is responsive, with the lefthand column and main content area resizing in relation to the screen size. When viewed on a smaller device, like a mobile phone, the design reconfigures to be a drop down menu from the top of the screen. Adobe fonts allows me to make use of various licensed typefaces, in this case Futura PT and Baskerville PT. The Bootstrap example page provides a list of dummy text to test the application of the different typestyles so this worked well as a sample sheet of how the type displays. Baskerville, visually appears very small even at a type size that would normally be standard for digital work so I increased the sizes proportionally.

P5.js

A primary component of my site will be the ability for users to explore the manipulation of letterforms. To do this I am going to use, the open source JavaScript library, p5.js. I have previously made use of this in my Digital Media unit, creating various prototypes for drawing on screen and arranging components via controls on screen. Using libraries like this within more complex hosting environments and more complex sites such as my planned site can be problematic, with different ways that hosting servers are set up interfering with the displaying of the p5.js code even before I’ve be able to test whether the code has be written correctly. With this in mind, once the site was set up with a basic design the next thing I did was attempt to duplicate some of the more basic p5.js experiments from the previous module on this new website. Each experiment that I made in the Digital Media module increases in complexity and use of different technical features of p5.js, so they will be a good way to test the new site. Each p5 experiment is made up of a few files, the experiment itself (called a sketch and saved as a .js file) and the html page where it is displayed. As my tests progressed the interactions between the .js and .html file become more complex

Above. The home screen of the original Odd Foundry site made use of a script that showed randomly sized squares over the gridded background, these squares followed the users cursor. Here you can see I have duplicated this code onto the new Odd Foundry site. Other than some sizing issues, it appears to have worked correctly. This would appear to indicate the server is set up correctly.
Above. For my unsuccessful second test I tried to integrate the most complex p5.js experiment I had created, Prototype-2, into the new site.

Unfortunately this was where I ran into my first major problems with only the basic outline of the experiment showing up with none of the sliders nor the canvas to draw upon displaying. This experiment needs the .js file to interact with the html file in a much more complex way than the last experiment as there are sliders that the user can alter to manipulate the size of shapes. Some further tests will need to be made to correct this. With that in mind I research some different ways to integrate p5.js into a WordPress site.

Problem Solving

p5.js Block

Searching on Google suggested using a plugin called p5.js Block (mapk 2020). The current version of WordPress uses a system called the Gutenberg Block editor to allow writers to add different blocks of content to a page (for instance a heading, an image, a gallery), the p5.js Block plugin adds a block specifically for holding the p5.js code. My first test involved me adding the same random squares experiment from the previous tests. This was unsuccessful.

Above. Using the p5.js block to add p5 code to page.

However with some adjustments to the code I was able to get it to run a different experiment, surface-3, in which a grid is generated on the page that a user can draw upon and edit the size of.

Above. Surface-3 experiment running on the new Odd Foundry site via the p5.js block plugin

As I gained confidence I moved to a more complex experiment, surface-4-1, which is based of the last experiment but with the inclusion of a slider that allows the user to change the size of the grid. This was also unsuccessful and didn’t render correctly. On scrutinising the code that is produced by the p5.js block I could see that it was misinterpreting parts of the code and converting the quotation marks that delineated named parts of the code into numbers, causing it to not render properly. All the more complex experiments make use of this ability to name components of the code so if p5.js block cannot make use of that feature I may need to try another option.

Above. Here you can see me highlight the code that p5.js block is misinterpreting

iFrame

When researching methods of adding p5.js to a site I checked the Processing forum (the language that p5.js is based on) and found a jobhas suggests making use of iframes (2017). An iframe is a component in html that allows you to view another pages content by embedding it on your own page. Initial tests seem promising with the embedded experiment from my old site showing up correctly.

Above. Using an iFrame to pull in content from my previous test site

I next tried to embed an experiment that was hosted on the current hosting. Although the sizing of the frame was cut off, the rest of the content displayed and functioned as expected. The only worry was that it was now showing the page as “not secure”, as indicated by the message in the address bar. The site is running with SSL certificate so this should not be showing. Thinking that it maybe because of the extra scripts running on the page I tried directing the iframe to a basic page on the site, however this still showed as “not secure” so it seems the issue is with the iframe itself.

Above. Using an iFrame to pull in content on the current site
Above. Using an iFrame to pull in content from my current site to test if the “not secure” notification is removed

Some further research into iframes and security, as presented in the article by Nada Rifiki (2020) on the subject, indicates that there can be issues with iframes showing a site as insecure. However she indicates that as long as the page to be embedded is accessed via HTTPS, as well as the main page being HTTPS there should not be an issue. Both pages are from what I can ascertain secure and accessed via HTTPS which makes me think this may be a server configuration issue that I need to question my host about.

That issue aside, the iframe method does appear to be successful in its application. Further testing with a very complex page with multiple controls all appears functional with all the main features of the page working even when embedded. With that in mind I will push on with designing the site using the iframe method where needed whilst I query the host on the “not secure” issue that’s noted above.

Above. Using an iFrame to pull in content from my previous test site with a high level of complexity.
References