Coding: Random Writing Prompt Generator

I’ve been working on this project for the last three days. I admit, the first day was spent looking for a good theme/idea and the last two was dreading to start the Javascript portion. I was really happy how it all came together, I can spend more time fixing the font sizes and playing around with it, but I think it’s time to move on to my next project. I appreciate any feedback!

Creative Writing Prompt Generator

  • A random quote generator that spits out a new creative writing prompt every time you click on ‘next’
  • When ‘write on!’ is clicked, the current prompt can be shared via twitter in a new window.
  • The back end is connected to Google Sheets.
  • Prompts are from SF Grotto’s 642 Things to Write About
  • I wanted the theme to be minimalist, exuding those millennial vibes that I love to hate. That means, peachy pink gradients, Roboto fonts, and contrasting bold blue blocks

Randon Writing Prompt Generator

Concepts I learned and problems I overcame during this project:

HTML: Open Links in a New Window or Tab by using adding a target=”_blank” attribute to your links (anchor tags). It’s worth noting that this method primarily works in desktop browsers. target=”new” can be used on mobile browsers.

Use a Google Spreadsheet as your JSON backend. I didn’t exactly use an API for this project because I had a specific idea of what I wanted the prompts to be (creative writing prompts for 642 Things to Write About). I used Google Sheets to create a list that would be pulled and linked  to my JSON backend. Doing so, I can add and quickly edit the growing list of creative writing prompts. First publish the sheet and obtain the Key from the URL and pasting it on ‘Put Key Here’. CoderWall had a great resource, I didn’t need to obtain the API from Google. (I have yet to experiment with API, yikes!)

For my own development, I broke down the pure JSON data into objects, until I found the column and item I wanted from the array.

$.getJSON("", function(data) {
  //first row "title" column

Add JQuery script in Codepen’s JS Settings. At first I was wondering why my Jquery code was not working, and then I learned how to ‘quick-add’ JQuery in the settings, no need to write a single line of code. However, codepen, will still allow us to just SCRIPT up resources, as well. (That means, adding the resources to the HTML in the head section.) Super helpful, here’s additional resources on Adding External Resources on CodePen.

<link rel="stylesheet" href="">

Twitter’s Dev Documentation on the Tweet Button.  Twitter has an amazing documentation on adding the Tweet Button. While I started using the Tweet Button on my project, I ended up just breaking it down to opt for a simpler anchor to be able to parse the links in text and add to the minimalist feel.

Dynamically change Tweet Button “data-text” attribute. This can only be done once, as discussed here, where changing the data-text attribute can be done before loading the script.

<a href=""
 data-text="This is what we want to change dynamically"
 data-count="none" data-via="chris_camps">Tweet</a>

      $(this).attr('data-text', "This works!");

Getting a random number between two values

function getRandomArbitrary(min, max) {   
return Math.random() * (max - min) + min; 

Additional Resources:

See the Pen freeCodeCamp: Random Writing Prompts by Angel Certeza (@acertz) on CodePen.



Projects: Setting Up a Local Server Environment

Alright, well this morning was off to a slow start. While the world anticipated Labor Day Weekend and getting the last modicum of work done, I read a chapter from a novel by Elizabeth Gilbert while drinking a hot cup of coffee and spent hours improving my chess notation. It was unproductive, alright.

After wrestling with the paralysis of being able to do anything and everything, I decided on a simple goal: make a WordPress site from scratch!

So far, I’ve only learned HTML, CSS and Javascript and stayed in the realm of the front-end and the comforts of the browser. I kept finding myself in situations and projects where I simply did not have any idea of what to do, where to start or what it entails. It was only evident that I develop a working knowledge of server environments and the back-end. Eventually, i’ll walk the walk and talk the talk as a web-developer.



How to get started: Set up local server environment on the computer

  1. Set up a local “LAMP Stack” style environment – http://localhost:8080
    • LAMP stands for Linux, Apache, MySQL, PHP(/Python/Perl). It’s an open source bundle of software applications that creates a dynamic web server environment. There is also MAMP and WAMP, for Mac and Windows, respectively.
    • Whether you have a PC or a Mac, just download MAMP and install it on your computer.
  2. I had a hiccup opening port 80 for Apache, administering as occupied, and found a simple solution on Stack Overflow:
    • Run MAMP
    • Click Preferences
    • On Preference window click Ports
    • While on Ports change Apache & Nginx Port to 8080.
      click ok
    • Start Servers.
  3. Along the way, I learned that Port 8080 is a place to host a secondary or alternate web server. It is commonly used for proxy and caching.
    • The computer has 65535 potential ports to use over the internet.
    • Your web browser works on port 80. Port 8080 is typically used for a personally hosted web server, when the ISP restricts this type of usage for non-commercial customers. If you were going to host your own website from your computer, you would prefer to be able to do so on port 80, since this would mean that anyone connecting to your computer wouldn’t have to add a port number to the end of the WWW address you paid for. They could just connect to it, or to your specific IP address, and they’d have the website visible in their browser, while being served from your desktop or laptop.
    • Some ISPs want to avoid people paying for a cheaper home connection, but using it for commercial webservice. So, they restrict access on port 80. To get around this, you can use whatever port you like. You could use port 12345 if you wanted to. Port 8080 is the just the default second choice for a webserver.
  4. Test PHP
    • I saved my html file to a php and opened it on the local server.
    • To test PHP, we can insert the pho tag anywhere into html. Anything that goes inside the opening tag of <?php and the closing tag of ?> work it’s magic on your server and return HTML.
      <p>Hello, world! The year is <?php echo date('Y'); ?>.</p>

      The code <?php echo date(‘Y’); ?> uses a date function to find the year. The HTML interpreted is just “2017”.

Yay, I  now have a local server and run all the PHP code I want!!!



Next Step: Setting Up Virtual Hosts

I’ve successfully added a virtual host from allowing virtual hosts on Apache, allowing SymLink Override and to adding a virtual host path. But I got absurdly stuck on removing the :8080 from the end of the URL.

The problem can be reframed from my inability to open up port :80 for Apache. Since I’m not focusing on working on multiple websites yet, which the Virtual Hosts allows me to do, I decided to move on and focusing on my local host. I was comforted by the fact that there was an absurd amount of people who were facing the same problem as I. Unfortunately, I didn’t find any solutions after disabling countless Services and Programs and playing with the configuration files. If you guys have any fail proof ideas on how to open up port 80 for Apache, let me know!

Now that I’ve set up the local server environment and I can pretend like I know that back-end like the back of my hand, it’s time to move on to the main event, WordPress. Stay tuned, self! Can’t wait to see what I come up with.