Beginner programming project: an interactive blog

Richard Murphey, 2/17/2018


One of the reasons I started blogging is that I like to talk about my work more than my friends want to listen. Most of my friends don't know anything about the field I work in (biotech), so blogging was a way to share my thoughts and find more like-minded people.

I've met some interesting people through blogging, but blogging is the ultimate one-way conversation. If the goal is to share and discuss ideas, blogging only gets you half the way there.

So as a Saturday-morning project, I decided to implement some interactive features in this "test post" and get some feedback, and potentially include some of these in future posts.

I'm sure there are wordpress widgets with all these features, but I self-host my blog as a static site. I'm a noob hobbyist programmer, and this was a way for me to experiment with a web app structure that has always seemed interesting to me: building a simple API as a backend to a static site.


Interactive things


If you see the icon in the bottom corner of the screen, that's like an "active" status on slack / gchat. It means I'm at my computer and will get a notification if someone sends me a message, and will try to respond just like with any other chat software.

I also decided to play around with a few other interactive things. Like these "instant polls":


Interactive blogs are a good idea

Interactive blogs are a bad idea

Thanks :)



You can also make quizzes:


What is the biggest component of healthcare spending in the United States (click to submit your answer)?

Prescription drugs

Hospital care

Nursing care facilities and retirement communities

Physician and clinical services

:( The correct answer is "Hospital care", comprising 32.4% of national health expenditures in 2017

Correct! Hospital care accounted for 32.4% of national health expenditures in 2017


Do you have any suggestions for other ways to interact with a blog? Vote for ideas you like below, or type your own suggestion (after you click "add suggestion" it will be added to the list so other people can vote for it).


Thanks!


Ideas for other interactive features

Click the smiley face if you like a feature






I think this is a good intro project for beginner programmers

For me, making static sites was a good introduction to programming. I managed a wordpress site for a biotech startup I worked for, and I started learning HTML and CSS because I wanted more control than what Wordpress offered, and then started learning Python and JS because I wanted more power than HTML / CSS.

While HTML / CSS obviously aren't true programming languages, they allow you to make simple, useful websites very easily. You can go from no prior knowledge to having a personal website or blog online in hours with HTML, CSS and frameworks like Bootstrap. I really don't like Wix, Wordpress etc, and really enjoy learning about programming, so building super simple static sites for my work has been fun.

A site like this, which is just a static site with a javascript file that calls a simple Flask API, seems like a good intro to actual web programming. For a beginner like me, this is very easy to deploy and minimizes the use of more complex hosting services like Heroku. You can just start with a static site on Netlify, and then gradually add backend functionality.

It's also conceptually simpler than a Flask or Django app or an SPA. No JS frameworks, no templating languages, no complex directories, no need to ping a Heroku or AWS server every time you want to load a blog post.

I don't think it's a huge step for someone with only html / css knowledge to build something like this. You probably need a basic understanding of HTTP and the client-server concept, but you can get pretty far with just extending the code from the Flask-RESTful docs and then banging your head against the wall a bit trying to figure out CORS. You also need super-basic JQuery knowledge, mostly knowledge of axios or an AJAX library. The most confusing part would probably be setting up the ORM and database. I personally found the SQLAlchemy docs quite challenging as a beginner programmer.

As a way to record how I did this for my personal use and also to experiment with displaying PDFs using an i-frame, I made a PDF outlining how I did this. I just saved the PDF as a static resource on Netlify rather than serving the PDF from the Flask app on the Heroku server; for some reason I feel like that's not a great idea but I don't know why.

These instructions are actually probably not at all useful to anyone other than me. If anyone is interested, I can potentially clean up these instructions -- let me know with the "contact" link at the top of the screen.