nascro

A Simple HTML/jQuery Progress Bar and Steps Sequence

| Comments

If you have sequence of steps in your web app and want to visually indicate progress, try this progress bar using HTML and jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

<!doctype html>
<html lang="en">
<head>
  <title>Progress Bar</title>
  <style type="text/css">
    /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {  margin: 0;    padding: 0; border: 0;  font-size: 100%; font: inherit;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {   line-height: 1;}ol, ul {  list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after {   content: '';   content: none;}table {   border-collapse: collapse;  border-spacing: 0;}
    body {
      font-family: "Helvetica", sans-serif;
    }

    #bin {
      width: 400px;
      margin: 0 auto;
      margin-top: 40px;
      padding: 40px 20px;
      background: #f9f9f9;
    }

    #major {
      width: 200px;
      height: 15px;
      margin: 0 auto;
      background: #eee;
      border-radius: 15px;
    }

    #minor {
      height: 15px;
      background: #00d582;
      border-radius: 150px;
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
    }

    ul {
      width: 100px;
      margin: 0 auto;
      margin-top: 40px;
      background: #fff;
    }

    .active, a:hover {
      background: #f1f1f1;
    }

    a {
      display: block;
      padding: 10px;
      color: #333332;
      text-align: center;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div id="bin">
    <div id="major"><div id="minor" width=""></div></div>

    <ul id="steps">
      <li><a href="#" data-step="1" class="active">Step 1</a></li>
      <li><a href="#" data-step="2">Step 2</a></li>
      <li><a href="#" data-step="3">Step 3</a></li>
      <li><a href="#" data-step="4">Step 4</a></li>
      <li><a href="#" data-step="5">Step 5 </a></li>
    </ul>
  </div>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
    $(document).ready(function() {
      var totalListItems = $('#steps li').length;
      var baseWidth = 1 / totalListItems * $('#major').width();

      $('#minor').css('width', baseWidth);

      $('a').on('click', function() {
        var currentStep = $(this).data('step');
        var newWidth = currentStep / totalListItems * $('#major').width();

        $('ul').find('a').removeClass('active');
        $(this).addClass('active');
        $('#minor').css('width', newWidth);
      });
    });
  </script>
</body>
</html>

Partials

| Comments

Rails partials are much like PHP’s includes files. Partials that are on every page as part of a site layout are best stored in app/views/layouts and identified by using the filename _filename.html.erb. The underscore is the universal convention for naming partials and distinguishes them from view files.

You can render a partial named _nav.html.erb like this:

1

<%= render 'layouts/nav'%>

Ruby will evaluate this code and use the render method to render whatever code is in _nav.html.erb in your layout file.

Partials keep things DRY. More about Partials can be found in Michael Hartl’s Rails Tutorial or the Ruby on Rails Guides.

Models

| Comments

The past two weeks have been dedicated to client work, but I found some time today to finish Chapter 6 of the Rails Tutorial. This chapter has been the most challenging chapter of the book. It focuses on modeling the users of the sample application we’re building. You can read the Ruby on Rails Guides for more on models.

I learned that models require planning and appear to be the most important part to get right in a Rails application. They represent the data of the application and the rules to manipulate that data in a corresponding database table. Because each user of the sample app must be unique, the user model must reflect and enforce that. This includes validating the presence, uniqueness, length and format of (some of) a user’s information. Email addresses are a good way to identify a user’s uniqueness.

When I began this tutorial, I did not expect to be testing so much. Looking back, I don’t see it happening any other way. It seems so natural to teach development this way because the tests allow a developer to think through every bit of code written. Forgive me for being so naive, but it’s awesome to learn that there are tools written in Ruby (i.e., RSpec) for testing Ruby code.

Weekly Review

| Comments

This post is part of series of weekly personal web development reviews meant to chart my educational progress

Between Script

I wrote a quick script in Ruby that counts the days between two dates. It’s stupidly simple, but good exercise.

Rails Tutorial

I spent a considerable amount of time working through chapter 5 and 6 of the Rails Tutorial. In the past I have been overwhelmed by the mountain of information available on Ruby and Rails. I needed a starting point but couldn’t decide on one, so I kept going in circles. The Rails Guides seem to be a good starting point for developers, but they lack the bigger picture of web development in general that I didn’t realize I needed to learn (specifically, Git for version control, deploying to Git, and deploying to Heroku). The up-and-running introduction that the Rails Tutorial provides on these topics was/is priceless for me.

Hungry Academy’s Personal Weather Tutorial

I took a break from the Tutorial to read and implement Hungry Academy’s Personal Weather blog post and weather API tutorial. The application uses the Wunderground API to access specific weather information. I signed up for a Wunderground API key, followed the blog’s instructions and launched my version of the application. I also built on it by accessing more data from the dataset and displaying it in the application. Quick, bare bones tutorials like this are a great way for me to learn. More please, Hungry Academy!

Website customization and configuration

In the past, website configuration has meant opening up cpanel and clicking through a web interface to make changes. Or opening up Transmit and drag/dropping some files. Or logging into Wordpress. This week, I added a custom domain to my Heroku app (the Octopress installation you’re looking at now) and configured my domain name registrar to send traffic that way. Now, you can reach this blog by visiting http://nascro.com. Most of this work was done on the command line. I absolutely love it.

Pair Programming

| Comments

Pair programming is a technique in which two programmers work together at one workstation. I’ve heard about this. Some Ruby on Rails shops, like Hashrocket, work in an environment where every developer is paired all the time. I would love to see a solution that allows me to experience similar benefits online.

Ruby Scripting: Days Between Two Dates

| Comments

Many times, I’ve wanted to find the number of days between two dates. I made a quick Ruby script that lets me find these dates easily. It’s quite simple.

I required the date library to utilize Ruby’s date class, then created a method called wrangler that accepts two parameters: x and y. The method parses the parameters using Date’s parse method, which creates a new date object with a uniform date format. The values are subtracted and the result is assigned to the span variable. The next line simply concatenates a human-readable string including the variables to display to the user on the command line. The chomp method is used to eliminate carriage return characters on x and y to nicely format the text.

The next few lines write (puts) a prompt to the command line and collect (gets) the date values from the user. These values are then passed as parameters into the wrangler method, which is being called below it.

You can run the script by downloading the file, open up your terminal, navigating to the file’s location and typing

1

./between.rb

I didn’t need to write a method for this to work, but it’s good practice for me. I’m open to doing this better, too. Suggestions are welcome.

Looking deeper, a couple of questions that I haven’t answered: - Why do I need to require the date library? Why isn’t it “built in” to Ruby? - Why do I need to use the chomp method? What is the advantage of including a carriage return after the strings?

Rails Tutorial Notes: Hashes and Arrays

| Comments

Although hashes resemble arrays, one important difference is that hashes don’t generally guarantee keeping their elements in a particular order. If order matters, use an array.

Changed App Name

| Comments

I changed the name of my Heroku app (which is this blog) from “nascropress” to “nascro.” This post is to ensure I made proper background functionality changes.