Category: Web Development

Concise, Modular JavaScript

Working with JavaScript again at Treehouse, I went over the Arrow Syntax again1.

Before it really wasn’t making much sense. I mean, I thought I had it down, but really, it was too fast and too complicated for me at the time. I wanted to learn ES2015 and write, clean, concise, modular javascript.

So What’s Different?

I actually rewatched the videos with Andrew Chalkley this time2.

Take a look at this code:

Here we are taking no arguments passed to the function sayName()3. With arrow functions, we can write modular, clean code4. We can get rid of the function keyword and replace it with =>. Pretty nifty, eh?

Single Argument Functions

Take a look at this code:

When we have a single argument passed to a function, much like the no arguments function, we replace the function keyword with an =>. But we can also remove the curly brackets, the parens, and the return statement.5

This is getting pretty awesome.

Multiple Argument Functions

Take another gander at this gist:

Here, we can do pretty much the same thing as in the single argument function, only we need to keep the parens. Still, you can get rid of the curly braces, and the one line of code in the block.

It’s Really All The Same

Check out this gist:

It’s just a cleaner, more modular way to write code. I hear you can write modular JavaScript with Promises but I am not there yet.

Enrolled in Coursera Course

I am doing their Java Data Structures and Algorithms course. They waived the tuition and so I am starting soon. The capstone is what I am really looking forward to. I need to put in the work: 4-6 hours a week. Not too bad.

Thoughts?

Have anything to add? Leave me a comment. 🙂


  1. I called them lambda functions in this post. I don’t think they’re the same, however. 
  2. I actually rewatched them a couple times and downloaded the completed workspace. 
  3. Learning ES2015 and so we are now using const
  4. Much to the rejoicing of Uncle Bob Martin
  5. As stated in the comment, you can only do this when there is one line of code in the code block and one argument. 

100 Days of Code Log, Day 2

\"\"

Day 2: 1 October 2016

Today’s Progress:I worked on the index.html file. I added a different color navbar, added some more shepherd anchors. I also am going to be using slick jQuery plugin for the image slider and will be deleting most of the CSS from the template I downloaded.

Thoughts: Finding all kinds of libraries is cool but I do want to edit them for what I need. Shepherd, the way I installed it, isn’t as customizable as I’d like it to be and I am thinking of uninstalling it and starting over, creating a source file with the library and adding the script tag.

Link to work:You can find the update on Heroku

Piecing Things Together

I am piecing together different elements from templates and libraries but I am going to be scrapping most of the premed code. I am still thinking about where this is headed.

As I said up top, that I need to recreate Shepherd functions in a separate js file. I have the source code and I want to study it. Going to customize the color and positions of the tours. I need to look at the docs some more to see how to change the color and boxes of the anchors.

Starting Day 3

I\’ll be coding on day three but I may not get too much in. There are domestic things to do and errands to run so I don’t know how much code I’ll write.

We will have a checkin in CS 0134 to see where we are in the project. I have a skeleton but I am wanting to have more.

Working on the E-commerce Site for Class

\"commerce-min\"

 

I am going to be making a mock ecommerce site for my Web Development class final project.

It consists of two parts:

  1. The foundation with HTML and CSS, CSS animations, Bootstrap, etc., and
  2. The final project, with some meatier stuff, like JavaScript and jQuery.

I started a mockup of a Bootstrap site, which is inspired by w3layouts.

\"iPhone

Finding a Place to Serve and Host Static Files

When I got the assignment, I decided on using Heroku, much like our instructor did, to serve our static class website. I searched all over and found that you would need to have a php file, index.php with some very basic code that would point to your home.html file in order to serve up your site.

This worked and would have served me well. But I was talking to my pal Alex Gwartneyon Skype and I mentioned what I was working on and how I served up assets over Heroku with PHP. He told me you could do the same thing with an Express server and Node.

So we set off to get it set up. It was not easy.

Getting the Site Set Up

Alex and I spent two whole hours troubleshooting this. I knew from previous experience that you needed to have a Procfile and some npm dependencies. Alex helped me get a package.json file up by using npm init which I may have used once or twice but totally forgot about.

I installed Express into that directory, etc. I did not include a Procfile immediately, though I should have.

We worked on it for a while. He had trouble getting the Express server up on his end to show me what it could do. He got his end set up, then we worked on getting my site up on Heroku.

Two Hours Later…

Everything came up roses. There were certain things in the Procfile that needed to be added. Opening ports in the Express server for Heroku to look for was a pain, but all in all, it was successful.

Just in case you’re wondering how, here are a few gists. Edit them for what you need.

 

My site is The Lens Cap which is just a text file for now.

FCC Random Quote Generator

I finished the algorithm scripting at Free Code Camp on June 19th and started the Random Quote Generator on the 20th.

I have been working diligently for a few days on it. Usually we are instructed to use the Bootstrap CSS framework. When I went searching for an API I found Chris Coyer from CSS Tricks Quotes on Design API site and was enamored with the design and decided I wanted to do the same thing.

So I mocked it up in Sketch:

\"random_quote_generator\"

I needed to really think about how to write the CSS and code for this design. I am still working on that. I have traversed the web in search of layout advice and CSS tricks 1 to move the bottom quotes to the left and at the bottom.

Originally, when I built the HTML, I had both the quotes at the top right. I kept forgetting that the <div></div> tags can place elements, nest elements, etc in the places you want them to go.

So I placed the ending quotes below the Tweet This button.

Buttons

I want to either emboss the buttons or create a drop shadow to cue the user into it being a button and not just some random text. I know it says Tweet This but people like my mom have a hard time understanding that the Login button on her bank app is actually tappable and that’s how she logs in. So I need to give visuals cues that will allow the user to intuit this.

Layout

Still working on an adequate layout. I don’t want to totally rip off Chris’s site but the design is so fresh that I want to at least rip off some of the components.

I’ve gone into Chrome’s Dev Tools and poked around on his site and have gotten a feeling of how to build it.

WIP

You can see the pen at the bottom of the page. It looks weird because it is a work in progress.

  1. Pun not intended ↩︎

Free Code Camp Portfolio: Unlocked

\"JPEGSo I started the portfolio project on March 10th and finished it today. I had help from the Gitter chat but not as much as last time.

I took the example code and re-engineered it to fit what I wanted to do. I added an unordered list, a cover photo, a mailto: link and a few other things.

The thing I struggled with the most was horizontal scrolling on mobile with Bootstrap. When looking at the Pen on mobile, you had some overflow, which totally defeats the purpose of a responsive design! So I went to Google and found a few Stack Overflow articles and found the right media query along with some other css that I edited to fit my project. I used:

@media screen and (max-width: 767px) {
  body {
  overflow-x: hidden !important;
}
.container {
   max-width: 100% !important;
   overflow-x: hidden !important;
   margin-left: auto;
   margin-right: auto;
   padding-left: 0px;
   padding-right: 0px;
   }
}

This allowed me to negated the overflow on the x axis part of the page which is horizontal. You essentially hide the overflow. But that wasn’t enough. Adjusting the margins and padding really made the responsiveness on my iPhone so much better.

You can find the Pen below.

FCC Front-End Programming Project

\"front-end_programming\"

So I started the second front-end programming project for Free Code Camp which is the portfolio. I shared a Pen from a former Free Code Camp alum who built an interesting portfolio, which is what Free Code Camp uses as their example, which is high-praise.

I had trouble with getting my background image to show. I had this as my html:

<div class=\"container-fluid\"><img class=\"\" src=\"https://4.bp.blogspot.com/-pigPfRWS3Sw/VWX-feGd7II/AAAAAAABjLE/K3JemRkjclI/s0/Coding_with_Style_wallpaper.jpg\" alt=\"\" />

This didn’t make it responsive, however. So I did this:

<div class=\"container-fluid\"><img class=\"img-responsive\" src=\"https://4.bp.blogspot.com/-pigPfRWS3Sw/VWX-feGd7II/AAAAAAABjLE/K3JemRkjclI/s0/Coding_with_Style_wallpaper.jpg\" alt=\"\" />

It still didn’t work.So I went to the Gitter chat and asked around. Someone suggested adding the image to a div and not inside a container inside another div.

So I did this:

<div id=\"mySection\" class=\"container-fluid\">

padding-top: 50px;
display: block;
height: 200%;
background: url(“https://4.bp.blogspot.com/-pigPfRWS3Sw/VWX-feGd7II/AAAAAAABjLE/K3JemRkjclI/s0/Coding_with_Style_wallpaper.jpg”) no-repeat center fixed;
background-size: cover;
text-align: center;
padding-bottom: 100px;
color: #fff;

Someone gave me this suggestion in the Gitter chat. This made the background a sliver across the screen. He told me to play with the padding at the bottom. So I ended up with:

padding-top: 50px;
display: block;
height: 200%;
background: url(“https://4.bp.blogspot.com/-pigPfRWS3Sw/VWX-feGd7II/AAAAAAABjLE/K3JemRkjclI/s0/Coding_with_Style_wallpaper.jpg”) no-repeat center fixed;
background-size: cover;
text-align: center;
padding-bottom: 2000px;
color: #fff;

I also found a stray div with my navigation. Now it’s starting to look good.

http://codepen.io/twhite96/pen/dMbwyM

Completed The First Front-End Project

\"front-end\"
So I finished the first front-end project for Free Code Camp in a couple days. It doesn’t render really well on mobile. I can’t seem to get the button I have at the bottom to do the following with the jQuery I have:

$(‘.center_button’).click(function() {
$(‘.center_button’).css({
‘position’ : ‘fixed’,
‘bottom’ : 0,
‘left’ : 0,
‘right’ : 0
});
$(‘p’).toggle(“slow”);
});

Minimal jQuery to achieve a nice effect. It works on tablets though not quite the way it is intended.

I will probably work on it some more during the coming weeks.

On To The Next One

Our next front-end project will be a little bit more difficult and will probably take me a lot more time. Here is what the example like, down below. The scrolling of the images is janky and I am not crazy about the design but I like what he did.