Getting the Most Out of a Squarespace Website

Squarespace’s attraction is how artistic and balanced its landing pages look. Squarespace made my work look professional, but I had plenty of reservations about how flexible its platform was. Since I’m someone who does primarily data and visualization, the question was whether I could integrate many of the tools that were a part of my workflow in data science. Blogging is only effective when readers gain insight from your work. With the idea of improving the looks of my website, I migrated from Jekyll—a static website generator— to Squarespace. Jekyll was awesome in that it teaches you how webpages are put together and organized. But since I’ve started blogging in Squarespace, it’s made uploading images and messing around with document formatting a lot easier. The experimental part of the migration was whether I could incorporate third-party plugins. Below are some web services that help present content in the most effective way for readers.

Google Documents

When summarizing a document, many readers prefer to verify conclusions themselves. Thus, a document viewer that could be embedded into a a webpage was a necessity. There were two that were considered: Google Documents and Scribd. Eventually, Google Docs was given preference because it allowed for annotations to be made. The embedded document is included below.

 
 

Leaflet

Another service that dovetails with R—the language I’m most proficient in— is leaflet. You can assign locations to a map using the service and it allows for interactivity between the user and the location. Below is a map where Henderson, Kentucky, is set as the center point of the map and a marker where my house is located. The bounding box was set the width of the page but 400px in length to conserve vertical space.

Syntax Highlighting

When writing code, it is helpful if parts of it are colored to help distinguish, for example, variables from comments. To date, code has not been included in any of my blog posts, but I wanted the flexibility to write about issues in R. If code was included, syntax highlighting would help make it more readable and would allow for readers to copy it for their own uses. There are many open-source syntax highlighters available like prism.js , highlight.js and chroma to name a few. After experimenting a little bit, I went with what I liked which was a customized download from “highlight.js” because it included R and I chose the theme Xcode because it had a light background. (Dark backgrounds are great for seeing the code, but a pain if you actually ever have to print it.)


  #this is R code with syntax highlighting by highlight.js.
  #the theme is Xcode
  a <- 1:10
  b <- 1:10 #add for variable
  df <- data.frame(a = a, b = b)
  df$c <- df$b * df$a
  a <- 1:10
  b <- 1:10 #add for variable
  df <- data.frame(a = a, b = b)
  df$c <- df$b * df$a
  a <- 1:10
  b <- 1:10 #add for variable
  df <- data.frame(a = a, b = b)
  df$c <- df$b * df$a
  a <- 1:10
  b <- 1:10 #add for variable
  df <- data.frame(a = a, b = b)
  df$c <- df$b * df$a

Github Gist

Github is a version control system and their embedded code window was new to me but I first saw it here. The “view raw” button opens a new browser window with just the text portion of the code. That’s a nice feature because sometimes you end up with white space or line numbers included in a cut and paste. However, there were no problems with cutting and pasting the code from the highlight.js window above. So I’m not sure what you gain by using the github gist embed. (Feel free to comment below if you disagree!)

Plotly

Plotly allows for interactive charts and, again, plays well with R. You can do a plot in R and then upload it to Plotly. Plotly will then convert the R code and make it interactive for display on the web. The chart below took me about 20 min to make using another favorite utility of mine Tabula. (Tabula let’s you scrape a PDF table.) One fun thing about the Plotly line chart is that you can turn the different paths “off” and declutter the presentation. In a regular time series plot, three or more lines begin to look pretty busy. Feel free to experiment on Kentucky Community and Technical College System full time student enrollments. Notice that they’ve been trending downwards since the economic recovery in the 2008 recession.

Google Sheets as Tables

Originally, I went looking for a cheap, interactive table. “html” tables are static and a reader might want to sort a table based on a particular column. Plotly was tried first since they allow for embedding a table; however, it was also static. Then, a web search turned up google sheets. This solution seemed too easy since a google document fit the bill previously. The format and scrolling are definitely appealing. The viewing window was way too small so attributes were added to the iframe tag. “width: 100%;” and “height:400px” were added for the window below. Easy solution, but it’s still not interactive.

Mathjax

Mathjax is the mathematician’s way of inserting formulas and symbols into a webpage. The likelihood of using it in this blog is remote, but then again, it would be pretty cool to include some formulas. Some help could be found on this Squarespace bulletin board post, but the default website for coding challenges is stack overflow. They, too, had a post. There were some strategies for inserting LaTeX formulas inline but the delimiters were omitted each time I saved the text. Presumably that has something to do with the javascript parsing the code. As a workaround, I injected the same forumlas into squarespace’s code block and the MathJax formatting remained. Here’s an example below.

$$a^2 + b^2 = c^2$$ $$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$

Summary

Overall, the initial experimentation is encouraging: Squarespace makes my posts look more professional and allows me to incorporate a lot of third party applications. Having the right tools means relying on other web based vendors. It took a lot of work but by using Squarespace’s code injection option, a number of popular third-party services were incorporated. Some like google sheets, google docs, github gist and plotly were simple “embeds” while Leaflet, MathJax, Highlight.js, were javascript plugins. The code injection box did not have the functionality of a text editor, making the process difficult. I ended up using a text editor and copying and pasting the code into the code injection box for ease of reading. I also put as much of the .css into a separate document which was then incorporated as a style sheet. My portion of the header code can be viewed here. So far, so good.