While putting some polish on the CSS and information architecture, I took a style hint from a favorite publication of mine, “Svbtle”. That hint was the inclusion of “watermarks”

WaterMarks

The point of a water mark is to provide a static background element that provides a a texture and depth to a document. Although subtle, it is an elegant way to make your work standout.

3 Parts

Producing the watermark effect that is currently on trend takes four lines of code at it’s most basic form. The rest are personal touches you can affect, as you want.

Z-index: -1;

The Z-index property of CSS refers to where a DOM element is stacked on the document in a 3-D representation of the DOM. It tells us how far or near the element is to the user. This is a great full explanation of the z-index but for now, just remember that the element that you want to watermark needs to have the lowest z-index of any element on your page. That way all the other elements are stacked above them and the watermark won’t interfere with the rest of your layout.

Position: fixed;

The point of a watermark is to provide a static background element that provides texture and depth to a document. By fixing the element’s position, it will become most visible when the user scrolls the document and provide a nice surprise as the user’s eye focuses on it. You can toy with relative or fixed but I suggest fixed for any type of text consumption site.

Color: #fafafa;

A watermark should be subtle and not obvious to every user when they first get to the site. If 15% of your users don’t even notice it, you have done a good job. Always pick a shade for the font that visible from an angle but may be overlooked when a user peers straight on. For light color backgrounds use shades just slightly darker like the grey white combo I used. Use light colors against darker backgrounds.

Experiment and you will find the right fit.Here is my favorite site to pick colors from.

The code for the vertical “Flatiron”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

h1#large_side {
  position: fixed;
  top: 7%;
  left: 95%; 
  font-size: 200px;
  line-height: 200px;
  font-weight: 900;
  letter-spacing: -1px;
  color: #fafafa;
  z-index: -1;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -o-transform-origin: top left;

Enjoy, and remember to polish the front-end when you work. Even just good HTML text hierarchy can do wonders to attract attention from a user.

Links

• The Flatiron Magazine
• Kuler Color Wheel
• Explnation of the Z-index

Packages in Sublime come in a variety of value and quality. Lets go over installing a side bar option enhancement pckage.

Installation

Package Control is a package manager that helps you extend and modify the Sublime editor. Lets get it installed, add a new package, and remove a package to get familiar with Package Control for Sublime.

1. Install Package Control – Get Package Control Here

2. Once here just copy and paste the correct Python code depending on which version of Sublime you have. Below is the code for Sublime Text 2.

1

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

Open Sublime and pop open the Sublime console by pressing crl + `.

Paste the code snippet into the console, press return, and restart your editor.

Channels and Package Installation.

Sublime Packages generally are found in the “Default Channel”. This is channel is the open source forum where developers add their packages and they can be easily searched and downloaded.

The option to create custom channels exists but we won’t touch on that here.

Package Control is evoked through the command palate.

1. Open the Command Palate: cmd + shift + p will pop open the command palate.

2. Type Install into the text area and you will see that package install option will be available.

3. Select the option Package Control: Install Package

4. You will now be able to search by Package name. Even if you don’t know if a package exists that you are looking for. Just type in a few terms and see what comes up.

5. We are going to install a package called SideBarEnhnacements. This extension will give us some extra options when we are working on applications that have a robust directory structure.

A concrete example would be that we wouldn’t need to switch to the terminal to type out mkdir when we need a new folder.

1. Restart your editor after you hit return on SideBarEnhnacements.

2. Open any application you are working on and ctrl click on the side bar. You will see the enhanced options that the SideBarEnhnacementspackage we just installed now gave us.

Remove a package

1. If for any reason you want to remove a package. Just open the Command Palate again with cmd + shift + p but now type remove and then select Package Control: Remove Package This will allow you to select for your package library what you would like to remove.

Editing Packages

Many packages such as Gist require some sort of configuration. If so, you can browse your packages by selecting browse packages from the Sublime Text preferences dropdown.

There are ton of usefull packages out there and a solid community of people that are interested in pushing the Sublime development tool forward.

Check out the links below for a few that I am currently using and also a search on the Package Control site for all Ruby related packages.

My Packages

Ruby Packages Search Ruby Package Search.

SideBarEnhancements The one we installed.

HTML5 HTML5 Snippit library.

Gist Create github gists from highlighted texts.

GitGutter See the git status of each line of code.

My group – Team High Five – spent the day putting together a picture matching game as a way to practice working with the Nokogiri gem as well as ERB files and HTML template generation.

Yesterday, we had our first look at Modules during lecture. Modules are a Ruby construct that allows us the ability to share features and method sets between objects. Unlike classes, which only allow for singe inheritance in Ruby,modules can be required as need. Interestingly enough, classes actually inherit from modules. Per my command line just a moment ago:

1
2
3

ruby -v -e "p Class.ancestors"
ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-darwin12.3.0]
[Class, Module, Object, Kernel, BasicObject]

Up until this point at Flatiron, we have been including methods within the body of our classes that we have had to repeat again and again. Modules help us to avoid this an allows us to share methods between multiple classes.

when to use which

Since the construct class describes an object and a module describes abilities, the first rule of thumb we can use is that if we find ourselves building classes that never are used to create an instance of that class, then we should be using a module. Another use case for a module is when we have built a method set we know many classes are going to need. We can encapsulate these behaviors in a module. I like to think of modules as gems for our classes. Let’s take a look at some code from last week.

1
2
3
4
5
6
7
8
9

class Student
  def self.find_by_name(name)
    @@all.select { |s| s.name == name }
  end

  def self.find(id)
    @@all.select { |s| s.id == id }.first
  end
end

The code above represents two methods of a 70-line Student class. We had been using a class level variable all to store every instance of the Student class. As our domain would be expanding throughout the assignment, this same functionality would be desired for many objects in the domain such as Teachers or Lectures. Since I want to share these methods among many classes but don’t want to build a rigid inheritance chain, I can create a module called findable and mix it into my classes as needed.

1
2
3
4
5
6
7
8
9

module Findable
  def find_by_name(name)
    @@all.select { |s| s.name == name }
  end

  def find(id)
    @@all.select { |s| s.id == id }.first
  end
end

Now as my school domain project grows, I can just include the Module Findable .

1
2
3

class Teachers
include Findable
end

Going forward, the use of modules will help us keep our inheritance structure succinct and extendable.

The ternary operator is a conditional that will return one value if the condition is true and another value if it is false. It is a common computer science operator in many languages and afforded to us Rubiest as well.

The ternary allows us programmers to inject a binary conditional into our code in a single line and can be a handy way to keep methods small and effective by avoiding ‘if/else’ blocks.

Some Latin

The term “ternary” is derived from the Latin term “termarius”. It is an adjective that means, “composed of three items”. In reference to the Ruby ternary operator, the three parts are the “Conditional” and the “True Return” and the “False Return”.

The format of the operator looks like this:

1

Condition ? Return if true : Return if false

As you may have noticed, the logical decision tree behind the operator is the same as a general “if/else” statement. Because of this, it is true that the ternary operator is not generally needed but it is nice to know about it.

Here is a code example from earlier in our semester.

We had been asked to create a method that returned true if an object of the person class had an age value that was between 13-19.

1
2
3
4
5
6
7
8
9
10
11
12

class Person
  attr_accessor :age

  def initialize(age)
    @age = age
  end

  def is_a_teenager?
    age.between?(13,19) ? true : false
  end

end

This method could also have easily been coded as an if/else statement.

1
2
3
4
5
6
7

def teen(age)
  if age.between?(13,19)
    true
  else
    false
  end
end

So as a curious novice, I wanted to know if the ternary had a more potent use.

variable assignment

We can use the ternary operator to quickly select between two values for assigment. In this case, the return of the expression would be the assigned value.

1

variable = conditional ? value_if_true  : value_if_false

This is helpful so as doing this assigment in if/else block would be a bit more typing or we would need to employ a case statement.

Sort

Outside of the transformative enumerable methods such as .select and .map, arrays are responsive to a variety of methods that allow us to sort and manipulate them very quickly without passing the method a block.

As we add elements on top of an array’s stack with the push method. The items are ordered based on the sequence in which we pushed them onto the stack.

1
2
3

array = []
array.push(2,6,4,3,1,5)
array = [2,6,4,3,1,5]

In order to get a sorted copy of the array returned to us, we simply would need to type.

1

array.sort # => [1, 2, 3, 4, 5, 6]

but what if we wanted them sorted in a descending order. We can use a little method chaining here to produce the desired effect.

1

array.sort.reverse # => [6, 5, 4, 3, 2, 1]

chars

Often times we are passed a string or array and we need to break it apart at a chosen delimiter. The .chars method allows us to break apart a string into the individual characters. The return of this is an array of the individual characters.

1
2

test = "hello how are you"
test.chars # => ["h", "e", "l", "l", "o"," ", "h", "o", "w"," ", "a", "r", "e"," ", "y", "o", "u"]

excluding characters

Now that we have returned an array of each indiviudal character in the string, we may want to work with the new data but because we used the .chars method we also have " " character in our return array.

subtraction:

We have several options here such as using a .reject method call but I am going to touch on a simple way of doing this that I have used. We can subtract the characters we don’t want from the array. This works for any character as well and does not modify the reciever.

1

chars = test.chars # => ["h", "e", "l", "l", "o"," ", "h", "o", "w"," ", "a", "r", "e"," ", "y", "o", "u"]

1

chars - [" "] #=> ["h", "e", "l", "l", "o", "h", "o", "w", "a", "r", "e", "y", "o", "u"]

practice

There are many more basic work flows that I find myself repeating through out the semeester and it has helped me to be able to just run them quickly when I have some free time so that when presented with a task, it is second nature to move through a given work flow.

Next post I am going to go over a few simple ways to convert arrays into hashes with some concise and simple iterations.