#100DaysOfCode Weekend Update: The Hardest Part About This Challenge

Almost forgot to post an update of what I did over the weekend. Sorry. I have no excuse other than the fact that I was busy with other things besides coding and writing.  Sneaking in my own coding sessions during my breaks at work has become difficult. I’m now working through them and have been for the last week.  Just to give you guys a glimpse into my personal life: I was recently promoted at work.  With the promotion, I’ll be responsible for leading the team in charge of building our district’s new website and app that is to be launched this Spring.  Though I’m grateful and excited about the opportunity, much work lies ahead for me, and staying organized is my priority.  I’ve set goals for myself outside of work that I don’t intend to give up on.  Even as I write this as my eyes are bleed with exhaustion, just know that #100DaysOfCode will continue.  As I said in earlier posts, the hardest thing about this challenge is not coding, but writing about it.  I hope you all forgive me if the posts become more sporadic.

Besides studying jQuery this past week, I also worked on the Bootstrappin’ Portfolio site.  I say I spent probably a total of 6 hours of the challenge on it so far, and it’s turning out well.  Over the weekend, I worked on the index and services.html pages.  I imported web fonts, fixed the hover animations on the navigation bar, worked on alignment of the column grid, changed the button structure, and incorporated some icons.  Here’s what the two pages now look like:

new home (index.html) page

new home (index.html) page

 

port_three

new services page with icons and center-aligned content

A cool thing I learned to do that I always wanted to incorporate on a site is a blinking cursor effect that you can see above in the first pic. I just like the way it looks and it reminds me of writing (my first creative passion).   I shared the sample code below:

/* BLINKING CURSOR */
.blinking-cursor {
   font-weight:100; 
   color:#fff; 
   -webkit-animation:1s blink step-end infinite; 
   -moz-animation:1s blink step-end infinite; 
   -ms-animation:1s blink step-end infinite; 
   -o-animation:1s blink step-end infinite; 
   animation:1s blink step-end infinite;
}
@keyframes "blink" {
   from, to {color:transparent;}
   50%{color:#fff;}
}
@-moz-keyframes blink {
   from, to {color:transparent;}
   50%{color:#fff;}
}
@-webkit-keyframes "blink" {
   from, to {color:transparent;}
   50%{color:#fff;}
}
@-ms-keyframes "blink" {
   from, to {color:transparent;}
   50%{color:#fff;}
}

I’m using the CSS class blinking-cursor, so place the following code <span class=”blinking-cursor”> | </span> where you want the cursor to be in your HTML file, and walla!

To finish the project off, I plan on adding a section for a developer’s bio to the services page, and including some additional page options for the portfolio section of the site.  Even though the Bootstrap grid is responsive, I haven’t tested what my latest additions look like in mobile view, so I’ll probably spend a day of the challenge on that.  I also want to refactor the code as a single page site, maybe with AngularJS since I’m more comfortable with routing views. That’s the future though, and I’ll just be thankful to get through this week.  Course 4 of the full stack web development specialization I’m in just started, so lookout for more and frequent posts on using Cordova and Ionic framework capabilities for building hybrid mobile apps.

You can check out the code I did over the weekend at the #100DaysOfCode Github repo.

*** Day 18 & 19 Recap ***

  1. Added font awesome icons to services.html page
  2. Changed font options for the entire site
  3. Fixed the alignment issues on the services.html and index.html pages
  4. Added code to create a blinking cursor effect
Advertisements

#100DaysOfCode: Day 16 & 17: jQuery CSS Selectors + Sample Code

Continuing with Day 15, I want to add more details about what I’ve learned and worked on in Module 1 of Microsoft’s jQuery course.  After instruction on initial project setup like where to download jQuery and options for a CDN (which I recommend), Chris the instructor went over how to use CSS selectors with jQuery.  Today’s post will be quick guide on this subject.

jQuery and JavaScript are often used interchangeably because jQuery is one of the most widely used libraries in JS.  Some would even say it’s easier to learn than JavaScript because it takes less code to do the same functions. I first heard about jQuery as it was described as an alternative to Flash for animation, interactivity, and easy manipulation of the DOM.  As someone who wants to focus on web design and front-end development, I’m getting accustomed to using it more often.

Adding jQuery to a Page

jQuery can be added to a project as a separate .js file or within the HTML doc using tags.  If you want to download it, the minified, lightweight 1.12 and 2.2 versions are available here at the official site. An alternative is to run npm or bower install commands if using one of these package managers to setup your project. The beta version 3.0 has also available been made available this week, but if keeping your load as lean as possible is important to you, you may want to stick to 1.12 or 2.2. I prefer using the CDN available for it, which I listed below:

https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

Cloudfare has also posted a CDN for the version 3:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js

Ready Your Doc

First, jQuery code is prefaced with $ to define it. To “ready” your document, you will need to use one of the two options for executing code on the DOM.

$(document).ready(function() {
   ...code...
});

 

or

$(function(){
   ...code...
});

Using CSS Selectors

The basic syntax for using CSS selectors is $(selector).event( ).  Selectors can be HTML elements, classes, ids, or utilize the keyword this.  There are multiple event handlers and methods that can be called on selectors. The w3 Consortium has a list of the most common ones available here, but for this guide, I’ll be using .text( ) and .click( ) as examples.

With the .text( ) event handler, it sets or returns content to the matching selector it’s applied to. The actionable code comes after the event.  In my example below, I use .text( ) on all <h1> elements in my doc to add a string:

 $(function(){     
    $('h1').text("hello world!");
});

The result in HTML is that the string is placed within <h1> tags. If there is content already in the tags, the content is replaced with .text( ) string.  Run the code and try it for yourself on jsfiddle here.

Likewise, the .click( ) event handler applies actionable code after the selector has been clicked on. For my example below, I used the .addClass( ) method to apply a class to the selector after it has been clicked.  CSS styles for that class are then set to the selector. For the html, I just created a paragraph inside <div> tags and added a <button> underneath

 

jquery_one

before

CSS styles for the class boxed

.boxed {
   border: 3px solid #33cccc;
   padding: 5px 5px;
   text-align: center;
   background-color: #ebfafa;
   color: #33cccc;
}

The class boxed is set to the <div> that contains the paragraph and styles it

$(document).ready(function() {
     $('button').click(function(){
           $('div').addClass('boxed');
   });
});

The results are shown below:

after button is clicked

after button is clicked

There’s tons more you can do with jQuery, and I’ll have more posts on the language in the future.  You can play around with my code examples on jsfiddle here, or download the demos I added to the #100DaysOfCode Github repo in the IntroJQ project folder.

*** Day 16 & 17 Recap ***

  1. Added demo2 to IntroJQ project folder
  2. Created buttons exercise and added to IntroJQ project folder
  3. Added buttons exercise to CodePen (available here)
  4. Tested for Module 1 in the jQuery course– Passed!
  5. Started Module 2

 

 

#100DaysOfCode Day 15: Getting into jQuery

I decided to do take *another* course, this time on jQuery.  I know I’m already enrolled in more than one MOOC at the moment, but after finishing up my recent AngularJS tut, I feel I have room to expand.  Plus, I want a supplement to Duckett’s book I’m reading, and since I learn well by watching video tuts, taking a course seems right.

Not that it was planned. I had actually went to EdX to download a honor certificate I earned on cloud computing last year, but I saw Microsoft had made their latest jQuery course self-paced and shortened it to 4 modules. So In enrolled and have completed the first module which I will detail in later posts.

Now I know I have to do my best not to overwhelm myself.  Passing the last two courses in the Full Stack Web Dev Specialization is a priority for me, and I don’t want to get myself mixed up.  Anything JavaScript-related is doable for me though, and the more projects I can get into, the better.

Check out the #100DaysOfCode GitHub repo and click on Day 15 to follow my progress.

*** Day 15 Recap ***

  1. Finished module 1 of Microsoft’s Dev208x course on jQuery
  2. Created an IntroJQ project folder on GitHub and added a demo file

#100DaysOfCode Day 14: MLK Day with AngularJS

Had a day off from work with it being Martin Luther King, Jr. Day on Monday.  I didn’t want to lay about, so I scheduled a hangout via CodeBuddies that went very well.  What was originally a 2 hour session, turned into 3.5 hours and I was able to finish up the Udemy course on AngularJS that I had started.

The course was short and sweet, but didn’t go into much detail about how to use AngularJS other than doing a basic project setup and using directives and Controllers to create a few simple apps.  The last and most detailed section was on form validation with Angular which I grew bored of quickly.  I’ve already detailed how to do form validation with HTML5/JavaScript and with jQuery using a Bootstrap script that you can check out here and here if interested.

Nonetheless, I can always use a refresher, as I know my style of learning requires lots of repetition, even of concepts that I think I have a grasp of.  I forgot to login to GitHub while finishing up the course, so I had to upload the files at the end.  In all, I created two versions of a todo list, a interactive contact directory, and a grocery list for the course.  All 4 programs have the same base code: an HTML list powered by objects in the Controller with data stored in key-value pairs.  Very basic and super easy to replicate.

You can see and play with my interactive ToDo List on jsfiddle here.  To see all 4 of the programs I created for the course, go to the Day 14 IntroAngular project folder in my #100DaysOfCode repo.

#100DaysOfCode Weekend Update: jQuery, Form Validation, and Using Google Maps in Bootstrap

I didn’t do much coding this weekend. Probably not more than an hour on Saturday and Sunday to be honest.  I did more reading and studying from Duckett’s “JavaScript and JQuery” than anything, which is like a break considering how hard I’ve been going on this challenge.  I also made sure all the code in the challenge repo was updated (refactoring) and popped in on a few hangouts via CodeBuddies.

I’m almost finished with the Bootstrappin’ Portfolio project as well.  I added a contact page that includes a form utilizing Bootstrap Validator and a map powered by Google.  A simple BS Validator script works nicely with the project and there was no need for me to disable HTML5 validation. Here’s how to use it on your form.

Get the CDN.  Rather than downloading packages and adding extra weight to a project, I try to use a Content Delivery Network, or CDN links as much as possible.  There was one available for BS Validator powered by jQuery, and I pasted it before the closing </body> tag.  Here is the CDN you can use:

http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js

Next, make sure <input> fields in your form are labeled by name and id.  My form took the user first and last name, email, phone number, and message, but I only wanted the first name, email, and message required for submitting the form.  I gave those fields names and ids of name, email, and message. Using key value pairs on #contact-form, the id I gave my form, I set the error messages of what should be shown to the user.  I also set feedback icons for validating input using glyphicons.  Here’s the complete script:

$('#contact-form').bootstrapValidator({ 
    //live: 'disabled',
    message: 'This value is not valid',
    feedbackIcons: {
       valid: 'glyphicon glyphicon-ok',
       invalid: 'glyphicon glyphicon-remove',
       validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
       name: {
          validators: {
             notEmpty: {
                message: 'The Name is required and cannot be empty'
             }
          }
       },
      email: {
         validators: {
            notEmpty: {
               message: 'The email address is required'
            },
            emailAddress: {
               message: 'The email address is not valid'
            }
        }
      },
      message: {
         validators: {
            notEmpty: {
               message: 'The Message is required and cannot be empty'
            }
         }
      }
   }
 });

I placed the entire form inside a Bootstrap <div> using the well class which was easy to apply styles to.  For the map of “my office location”, I used a Bootstrap <div> with the panel class, putting the address in the <div> with the class panel-body and the map in a separate <div> right under that.  I assigned the div for the map an id of map1.  For the jQuery script to create the map, I followed Google Developers’ tutorial on the subject, making sure the longitude and latitude components were accurate for the address and city I wanted displayed.  Here’s the complete script:

jQuery(function ($) {
    function init_map1() {
        var myLocation = new google.maps.LatLng(41.858608, -87.660395);
        var mapOptions = {
            center: myLocation,
            zoom: 16
        };
        var marker = new google.maps.Marker({
             position: myLocation,
             title: "Property Location"
        });
        var map = new google.maps.Map(document.getElementById("map1"),
            mapOptions);
        marker.setMap(map);
    }
    init_map1();
 });

Overall, I pretty happy with the look of the Contact page so far.  Here’s a screenshot of what I created:

contact form on the left, map on the right

contact form on the left, map on the right

I’m keeping the portfolio project simple, so I’ll work on fonts and adding assets this week.  Since it’s on Github, anyone can fork it, customize it, and make it their own.  I see it particularly being useful for noobs interested in a starter site.

To see the complete changes I made to Bootstrappin’ Portfolio project, check it out in the #100DaysOfCode repo, or click here to go directly to the code for the Contact page.

#100DaysOfCode Day 10 & 11 Progress Report

Because I’ve been working on the same projects this week, as well as completing the same tutorials, I thought I share a progress report.

Completing Frontend JavaScript Frameworks: AngularJS

At the beginning of the challenge, I was in the last week of this course.  I successfully finished it with a score of 100% and earned a certificate. This means I can continue on with HKU’s full stack web development specialization!  Course 4 starts next week and the majority of my future posts will cover what I learn daily.

See my post on the finished project

Finishing Jon Duckett’s “JavaScript and JQuery”

Since beginning to read this book a week ago, I’m more than half-way finished with the book.  Currently, I’m in jQuery section, which is Part II of the book.  Not only does this section cover jQuery, it also goes into detail on using Ajax and APIs as well.

Worked example one: OrderForm

Worked example two: HotelOffers

Github project folder: JSDuckett

Open sourcing the Bootstrappin’ Portfolio project

I started reading “Bootstrap Site Blueprints” by Cochan & Whitley.  The first project was to create a simple one-page portfolio site.  I completed it by the book, then went back and customized it.  The project is so completely different from what was advised that I was able to to remove Cochan & Whitley’s credits from the project repo.

I completed first drafts the Home page and Portfolio page.  I also began the Services page and will start on the Contact page this weekend.  My list of what still needs to be done grows by the day, but I’m confident I can get it done:

  1. The original footer was removed, I need to replace it. It will be simple with just copyright info and social media links
  2. I want to add social media icons to the home page under the “see my work” button
  3. Fonts need to be added. I’m leaning towards Raleway or Open Sans
  4. I’m playing with the option of adding an interactive resume to the services page
  5. Contact page needs to be added

Once I style the pages and complete the components, the project will be finished and I might release it as a template so others may use it (if it’s good enough).  Here’s some screen shots of the first drafts:

made a splash page for the home.html, users click the button to go to the site

made a splash page for the home.html, users click the button to go to the site

 

the portfolio page will have screenshots of projects and allow the developer to write a summary of their work

the portfolio page will have screenshots of projects and allow the developer to write a summary of their work

 

the services page is pretty bare, I still have components to add

the services page is pretty bare, I still have components to add

Even though I ventured away from the book, I really like that the authors did something different by teaching how to customize the LESS and Sass files. I know a lot of developers have done this to create their own responsive grid framework. I’m going to continue with the book and see what else can be done with LESS.

My post on customizing LESS and Sass

Github project folder: BSPortfolio

Learning Test Driven Development

I made it a goal to learn more about testing throughout the challenge. I now have working knowledge of integrating Jasmine and Angular ngMock for testing.  Being able to have your project pass unit and end-to-end tests is not only important, but a vital part of the development process.  I want to expand my work with Jasmine and become more comfortable using it on all my Angular projects for here on out.  In the future, you may see a post (or two) about other agile processes too.

See my post on Jasmine and testing

My Jasmine and Angular ngMock scripts on Github

AngularJS course via Udemy

I started and finished the first hour of this course. I’ve been lazy about completing it, though. It’s only about 6 hours and I have no reason for why I can’t dedicate time to it. The funny thing is I have about 5-7 tutorials and “just-for-fun” courses in my queue that have gone ignored. We’ll see how much I can get this weekend.

My post on this course and sample code

Personal Goals and Self-care

I’ve mentioned in a prior post I’m starting to experience fatigue.  To remedy this, I’ve been spending at least 30 minutes in the morning before work dedicated to reading, coding during my breaks, scheduling study sessions online for accountability, getting at least an hour or two of coding in after dinner, and posting to the blog when I can instead of daily.  This works as far as productivity is concerned, but to combat fatigue I’ve been going to bed early and taking B-complex supplements.  I’m not an energy drink nor a coffee-everyday person, so I find taking B-vitamins to be a safe and healthy alternative.  It’s too early to tell, but I do see a difference

That’s it for my report!  You can follow the #100DaysOfCode Github repo here to keep up on my daily progress (I’m currently on Day 12 as I write).  I posted a new hangout on CodeBuddies to study a framework of your choice. Come join me this Monday, or just stop by and say hi. Click here to join and RSVP.

 

 

#100DaysOfCode Day 9: Review of JavaScript Built-in Objects

Just now catching up with blogging what I’ve been doing for the past couple of days.  If you all are following the challenge repo, you’ll see I’m actually on Day 11.  The challenge involves documenting what I’ve learned and worked on too though, so here’s a quick update on what I did this past Tuesday (Day 10 and 11 soon to come).

Working through Duckett’s book, I made sure to bookmark the chapter on built-in objects. I always forget the main methods you can call on the models. To review, there are three object models JavaScript is used on: (1) the browser object model, (2) document object model, and (3) global JS objects.  I summarized few common methods for each type below:

BOM —> creates a model of the browser or window tab

  • window.alert( ) : creates a pop up box with a message, the user has to click the X to exit
  • window.open( ) : opens a new browser window, the URL is specified as a parameter
  • window.print( ) : prints content entered by the user to the current page

DOM —>the topmost model that represents the current page in the browser

  • document.write( ) : writes text to the page
  • document.getElementById( ) : returns an element from the HTML script, the id is specified as the parameter
  • document.createElement( ) : creates a new element in the HTML script, element is specified as the parameter

Global objects —> objects not formed as model, represented as a string, number, or boolean

  • .toUpperCase( ) : transforms string text to uppercase
  • .split( ) : splits a string and indexes the characters in an array, useful for data wrangling
  • .replace( ) : takes a string or character as the first parameter, replaces it with the string or character in the second parameter

There are dozens more.  To get a comprehensive list of built-in objects in JavaScript, I recommend Mozilla’s Developer Network’s reference.

I’ve made it to Part II of the book which covers jQuery.  I’m pretty familiar with using the jQuery library for web interactivity, but I look forward to covering this section.  To see some short programs I’ve built with jQuery in the past, you can check out my CodePen account and fork what you wish under my jQuery collection.  Here’s the link to my Go Mario Go! program and my simple to-do list.  It’s looking like I should be finished with the book by Sunday.

Of course, I couldn’t forget to get some coding in! I updated my Bootstrappin’ Portfolio project as well adding more assets, pages, and content. Go to the repo and click on Day 9.

*** Day 9 Recap ***

  1. Finished Part I of Jon Duckett’s “JavaScript and jQuery”
  2. Resized, edited, and added custom images to the portfolio project
  3. Created a portfolio.html page and added 4 sections for showing work
  4. Added more custom styles to main.css file