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("http://cors.io/spreadsheets.google.com/feeds/list/PUT-KEY-HERE/od6/public/values?alt=json", function(data) {
  //first row "title" column
  console.log(data.feed.entry[0]['gsx$title']['$t']);
});

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="http://website.com/style.css">
http://website.com/script.js

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="http://twitter.com/share"
 class="twitter-share-button"
 data-text="This is what we want to change dynamically"
 data-count="none" data-via="chris_camps">Tweet</a>

<script> 
$(document).ready(function(){
    $('a[data-text]').each(function(){
      $(this).attr('data-text', "This works!");
    });
    $.getScript('http://platform.twitter.com/widgets.js');
});

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.

 

Advertisements

The Execution of All Things

It was an hour past midnight, New Year’s Eve at a friend’s party. I was grilling a guy about his “startup” idea knowing that he about to move to Seattle, WA. I was jealous. Another app? Riveting. Another guy leaving Milwaukee? That’s great. I always end up asking the same question, “How did you know what you want to do?” A field research staple, collecting data points as though all these answers were going to help me answer that question myself.

In absolute NYE drunk phase, I remember staring at a moving mouth and the sound of his voice and chatter, once fading, were starting to get louder and louder. “What do you want to do? What are you passionate about?” He was staring straight at my blank face. Trying to force out an answer, I took a deep breath and exhaled, “I see all these horrible things in the world, and I realize it was just a guy who chose to do something about it. Well, I have ideas too, and I want to be able to do something with them!”

Simple as that. I finally answered that age-old question, 25 years later.

That’s the long story no one asked for. And that’s why I’m learning how about web development and how to code. It’s more than just the buzzword for me.

I started in healthcare, shuffling between the pharmaceutical industry and healthcare facilities, churning out financial reports and dashboard analyses without a lick of intellectual ground and aesthete. I became absolutely immersed in the automaticity and acceptability of my performance. It was great.

But I remained distracted. Certain themes do persist in my habits outside of work, which is where all the play takes part. I always loved to read about the design of everyday things, but I always found it really hard to relate the topics with other people. 80/20 rule? That’s cool. To me, it was mind blowing. There are rules that every single thing in this world obeys and it made the world so beautiful. Similar to the fundamentals of my science background, there were so many elements begging to be broken down into pieces and putting it back together to see something new. (This is the part in my writing where I realize Science is Design!)

Moving to the presidential election, and well, all the shit that has been happening in the world. I was in inspired by the few who were able to be the voice of reason. To be able to be so consumed by the world around them and turn it into their work. What was it that was different about them? They were all designers. Visionaries. The movers and shakers. The ones that make the world a better place.

I simply wanted to take part in changing the world, at least, increase my understanding of how the world works and how or why certain people feel the certain way. The next step to take was learning what tools I needed. It was only necessary and inevitable that I learned how to code. Code is the medium of the digital age. No, the digital age is no longer the future, it’s the present. It’s going to be (and it has been) a big change on the tools I already use.

My journey towards web development, and design and everything that I am not, has only begun but I’ve never felt more motivated and optimistic. The resources and the community of web design may be unlimited and generous, but it’s going to take time, as I learn how to learn and unlearn. It’s been a rough start, it feels like I’m doing some black magic. It’s the web! It holds so much opportunity. A platform to communicate, and of course, to finally execute my ideas.