Week 26 plan

A Study Plan To Cure JavaScript Fatigue – by Sacha Greif

== 30 days of React: chapter 1-2, NEXT: chapter 3

== Learn Javascript – Codecademy: finish all the free content

== FreeCodeCamp

==== Finish the HTML & CSS of Front End Development Certification




Thanks to Sergey, I know about diff-so-fancy

Inheritance vs. Composition


UX, Usability

UX toolkits – from Thoughtworks

Codrops playground: open-source CSS & Javascript for many interactive website, from Mary Lou. It’s such a fantastic work.

10 usability heuristics – from Nielson Norman Group

Usability applied to life – for fun




git clean

The documentation for git clean is clear, but still it’s long. So here comes the summary

git clean -n # Dry run, show list of untracked files to be deleted
git clean -n -x # Dry run, show list of untracked + ignored files to be deleted

git clean -f # Remove untracked files

git clean -x -f # Remove untracked + ignored files

The order of middlewares matter

Despite having working with Ruby for more than 6 months, I have never really understood the usage of middlewares inside a Rack application.

We are working on a problem to set the X-Request-Id header for the incoming request, and we would like to have that header in the response as well.

So for setting the header, we use a middleware layer, named RequestId. Initially I thought we would need another middleware to set a header for a response as well, but no, we do not need it.

A request is coming to Rack app with its set of headers. Then whenever we modify the headers for the Rack app

This is the sample response from Rack app. It’s an array with 3 elements:

  • an Integer: HTTP status code
  • a Hash: Some headers
  • an Array: The response body
map <span class="hljs-string">'/posts'</span> <span class="hljs-keyword">do</span>
run Proc.<span class="hljs-keyword">new</span> { |env| [<span class="hljs-string">'200'</span>, {<span class="hljs-string">'Content-Type'</span> => <span class="hljs-string">'text/html'</span>}, [<span class="hljs-string">'first_post'</span>, <span class="hljs-string">'second_post'</span>, <span class="hljs-string">'third_post'</span>]] }

Each Rack app is required to return the array with 3 elements. Hence once we have a middleware to modify the response of Rack app, then it’s there.

To read more: Proper Rack Middleware Ordering | Verbose Logging – this is really useful website that help me to understand how the chain of middlewares are interacting with each other.


non-breaking space

non-breaking space is a space that does not allow a line break to be inserted in that space.

In Sublime, you can find whether your document has a non-breaking space by hitting Ctrl + F, then type in Alt + Space. This is a non-breaking space. And Sublime will highlight if we have that in our document.


What I learnt today [4]

def test(name)
name =~ %r(\A[\[\]]*([^\[\]]+)\]*)
k = $1 || ''
after = $' || ''
puts "******* name = #{name}"
puts "_______ k = #{k}"
puts "....... after = #{after}"


# We get
******* name = p[][a]
_______ k = p
....... after = [][a]


What I learned this week [3]

A. Ruby Metaprogramming: class_eval and instance_eval

class_eval creates an instance method
instance_eval creates a class method

B. Eigenclass

Integralist has a exceptional article about Eigenclass

Eigenclass methods is accessible by class <<. It is a class containing the singleton methods, and class methods.

First example: define a singleton method for an instance.

class Foo; end
foo = Foo.new
class << foo

Second example: define a singleton method for a class. Actually class Foo is an instance of class Class. And foo is an instance of class Foo

There are 4 ways to create a class method:

  1. Use self.method
  2. Use Class Open technique inside a class definition class << self
  3. Use Class Open technique outside of class definition class << Foo
  4. Use Foo.instance_eval
class Foo
def shout; end

def self.whistle; end

class << self
def sing; end

class << Foo
  def speak; end

Foo.instance_eval {
def talk; end
Foo.methods false
# [:speak, :talk, :sing]

Foo.instance_methods false
# [:shout]

And there are 2 ways to create an instance methods

class Bar
def fly; end

Bar.class_eval {
def soar; end

Bar.instance_methods false
# [:fly, :soar]


What I learned this week [2]

A. I’m reading

JQuery Fundamentals: after realizing that I don’t know the syntax of jquery well enough, I decided to self-educate myself on that matter. And I made a decision to start by reading a book, to at least have the basic knowledge.

B. Something new

Using the localization in jquery-ui-datepicker

//= require datepicker-it when written in a *.js file, that line is first parsed by Sprocket in Rails. This line tells rails to preload some external javascript files.

And in order to use a datepicker, we need to include all the languages that we’re going to use.

New gems

spreewald: from makandra, predefine most frequently used cucumber steps.

consul: from makandra again, to restrict the access right to data.

&& vs. andin ruby

use && for the task when you need only the boolean output. && has high precedence.

The and usage is more complicated, in a sense that it connects two parts of the evaluation. Use and in control flow. and has low precedence.

False value

Ruby: false, nil

Javascript: false, NaN, 0, empty string, undefined. In short, this article says, only object is truthy.

C. Something to remember

  • To deploy the code, vagrant ssh, and then bundle exec cap playground deploy. Since we need the ssh private key, and we can only have access to that key while we are still inside the local environment. Deploying from the terminal in vagrant would not work.

My mistakes