FCC Zipline Series by strongeleeroyNov 19, 20157:21 pm

FCC Zipline Series 102: Build a Random Quote Machine | The JS Way

This time, we are going to be building a Random Quote Machine. We must code a page that replicates the functionalities present here. The user stories that we must fulfil are the following:

As a user, I can click a button to show me a new random quote.

Bonus: As a user, I can press a button to tweet out a quote.

I’m going to take you through the process of setting up the JS code necessary for this app to work. If you want to give React a chance, go ahead and visit this other post, where we’ll build this same app using Facebook’s React framework.

FCC Zipline Series by strongeleeroyNov 18, 20158:54 pm

FCC Zipline Series 101: Build a Personal Portfolio Webpage

What better way to get started with the front-end than creating your own portfolio? This first Zipline will have you build up your portfolio website from scratch. I’m going to go dead basic on this, no external tools or bundling bonanza. Just HTML, CSS, JS and a few few libraries.

Building stuff, anything really, as vague as it may seem, is the best way to keep your skills sharp. For this particular project, we’re asked to fulfill the following user stories:

As a user, I can access all of the portfolio webpage’s content just by scrolling.
As a user, I can click different buttons that will take me to the portfolio creator’s different social media pages.
As a user, I can see thumbnail images of different projects the portfolio creator has built (if you haven’t built any websites before, use placeholders.)
Bonus: As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.

Now, get scared. I won’t be using Bootstrap or jQuery at all. For heavens sake, it’s a static, single page site. It has two advantages, it’s easy to navigate, and it is fast. Having to include Bootstrap and jQuery will just slow it down and spoil you (feel free to use them though 🙂 ).

CSS & Sass by strongeleeroyNov 5, 20159:51 am

Sass. What is it? Why should I learn it?

Sass, or Syntactically Awesome StyleSheets. You may have heard about Sass or Less before. They are both extensions of CSS that add power and organization to stylesheets. Anything that you write in Sass get’s compiled to perfectly valid CSS.

Sass code comes in two flavors, an older -just- “Sass” that uses indentation and no curly braces, and the newer, more awesome SCSS (Sassy CSS). Today, we’ll be taking a look at the latter.

But first and foremost, why should you care?

Maintenance by strongeleeroyNov 4, 20153:51 pm

Page Stability Issues

Due to the extremely poor service that the hosting company is providing at the moment, I have decided to move onto the future! I will be migrating the domain to an AWS EC2 instance over the […]

FCC Algorithm Challenges by strongeleeroyOct 30, 20158:14 am

FCC Bonfire Series 147: Friendly Date Ranges

Sad but true. Today, we’ll be tackling Friendly Date Ranges, the last bonfire in the entire FCC Bonfires Series. If you’ve made it up to this point, this next exercise shouldn’t pose much of a problem, but we’ll go through it anyway.

This time, we must write a function that given an array containing two strings that representing two dates (in ‘YYYY-MM-DD’ format) returns a human friendly date range. What the hell does that mean?

According to Free Code Camp, it’s a date range with no redundant information, in other words, if both dates are in the same year and month, only display the day range within that month etc. Keep in mind that if starting in the current year, the following year can be inferred by the reader and thus, should not be displayed. But I’ll stop babbling nonsense and show you some examples so we can get started:

['2015-10-04', '2015-10-20'] -> ['October 4th', '20th']
['2015-12-24', '2016-01-03'] -> ['December 24th', 'January 3rd']
['2020-01-21', '2021-05-25'] -> ['January 1st, 2020', 'May 25th, 2021'];