Launch School Notes !

In life, you need to have a goal. How to achieve your goal? You have to take action with a deep understanding of how reality works. Your brain needs to have a map of reality. To create this mental map, you need to do the damn thing. This will create neural links. Then, you have to calibrate your mental map with reality. How? By constantly reflecting on what is true, what went wrong , what went right, then figure out the root cause and design a plan on how to do it differently in the future. If you mental map is different from reality, your action will not be optimal. ie. You have the wrong belief. You need to have a deep understanding of how reality works. To get there, You can learn from others (including books and in-person) You can learn by yourself (through your own experience or reasoning) Learning by yourself can be slow. However, it will be a source of tremendous value because you reason from first principles. First principles are the basic truth, then you figure ...

I took the 219 assessment about 2 months ago. Kevin administered the test. It was a problem solving question whereby you are required to solve a problem using javascript while talking through the steps. The problem looks relatively simple, so I wrote some test cases and pseudo-code. I then proceeded to code the solution. 30 minutes passed, I was pretty confident my solution was right. It solve 5 of the test cases I wrote. I thought I nailed it. I decided to add in a few test-cases just because I have some time left. One of the test cases doesn't produce the required output. It was alright, this kind of things happens sometimes. I decided to tweak my code here and there, thinking it will produce the required output for that particular test case. To my horror, it didn't. Another 15 minutes passed. I begin to panic a little. I remember asking Kevin 'do I have to time myself for the test'. It was funny now when I think back. Of course I do, it was a 1 hour test. It tu...

I want to share with you my experience of burning out. After registering with Launch School, I am extremely excited about my programming journey. I studied for 10 to 12 hours a day, memorizing fact, trying out practice problems, understanding programming concepts. It was fun and exciting and I love seeing myself growing from nothing in programming to something more. After about 3 months, thing starts to change. I started noticing myself paying less attention to details. I find myself skimming through the course material. I skip "Further Exploration" in the practice problem. I am more interested to study just to pass the assessment rather than truly mastering the concept. It was a gradual burning out process but I continue to study for 10 to 12 hours a day through sheer grit. It felt like doing house chore or working a day job that you don't like. One particular morning I woke up, and I remember this deep feeling of dread because I can anticipate that the next 10 to 1...

1. Float If two column, one element float right and another float left , or you can float left for all element. If three column, three element float left. Note that all floated element u must specify width, if not, it will take whatever width necessary to fill the content. 2. Inline-block Need to specify width for them also , if not, they will take up whatever space necessary to fill the content. There are default spacing between inline-block, comment them out. Inline-block are vertical align in the bottom by default, you need to set vertical align property to top.

Static: the default position. Everything starts from top to bottom nicely according the document flow. Relative: still within normal flow of document. But accept offset position, relative to its original document flow position Absolute: out of normal flow. It doesn't interact with elements around it anymore. The reference point will be parent element that has relative positioning, if not, reference body element. Accepts offset position Fixed: out of normal flow. The element sticks to a corner of the page even if user scrolls. Reference the windows view.

There are three main ways to clear floats. 1. create and empty div at the bottom of the page. Then set 'clear: both' to that div. 2. create a pseudo element :after, then set 'display: block' 'content: ""' 'clear: both' properties to it. 3. set 'overflow:hidden' to the parent element. Overflow other than visible will create a block formatting context that will force the parent element to expand to fit the height and width of floated child.

Block element block element has width, height, border, padding and margin . The full box model is applied to them. It take up the whole width of the page. It break a newline before and after each element. Floated element are also block element but do not take up full width of page. Inline element Do not break a newline , but stay 'inline' with the rest of the content. Inline element do not have width and height dimension. Margin top and bottom are ignored. Padding top and bottom exist but won't push element above and below it away. Sideways margin and padding will push content away from it. Both inline and inline block element will have some spaces when there is whitespace between them. Inline-block element Behave like a block level element but do not break a new line. It will stay 'inline' with the rest of the content.

1. spaces between inline-block and inline element a. you can use zero font-size to eliminate the white space. Then reset back the font-size in the inner element to 1 rem. b. comments out the white space between the inline-block element. 2. methods to clear float. Method One .group:after {      display: block      content: ""      clear: both } Method Two add a empty div element after the floated element, then add a "clear: both" property. Method Three Use "overflow: hidden" within the parent container element. This creates a block formatting context that will cause the parent to expand to contain the width and height of the floated child element. 3. static, relative, absolute, fixed positioning Static element is the default position. All element are in the document flow. Relative position element are in the document flow. But accept offset property to move against its parent container. Absolute position is taken out...

1. Make a block element to contain both main content area and side area. Set a max-width to it . 2. Float the main content area to the left. Set its width to 70%. 3. Have the sidebar have the property with "overflow: hidden" . The sidebar will maintain its own block.

Naive Practice You stop improving when the thing you do becomes automated and you repeat mindlessly for years. Purposeful Practice - specific , well-defined goal , targeting some aspect of the skill. - focused , paying full attention - feedback, you know when you are right / wrong in a timely manner. - stetching out of comfort zone, not too much . If you are stuck, generally , the solution is try differently instead of try harder. It is natural when you are stuck . But it is temporary. - hard work and not fun. Mental Representation -mental structure that represents your understanding of something. Something that we just 'know' like riding a bicycle. -domain specific . No such thing as developing a general skill. - it bypass short-term memory limitation and allow processing of large amount of information quickly Deliberate Practice -requires a field that is well established. - requires a teacher who can provide specialize training.

HTTP Describe what HTTP is and the role of the request and the response. HTTP is just a text sent over the internet with a set of rules that governs how computer communicates with each other. It follows a model whereby a client makes a request and then wait for a response from a server. HTTP itself doesn't transmit data, it depends on TCP/IP protocol to get request/response from one machine to another.  What are the components of an HTTP request and an HTTP response? HTTP request and response has a header and body.  HTTP response will contain status code ( 200 OK)  and headers which is a metadata that contain information for content-type (text/html),  Content-Encoding:gzip (type of file compression), server (name of the server), Location (new resource location for redirects) and a HTTP body  HTTP request header contain information on HTTP method (GET/POST) , path and parameter to allow server to know how to find information, along with optional hea...

you store your username and password in the YAML file --- username: password Then we load the yaml file using YAML.load_file(file_path) This will create a hash of { 'username' => 'password' } Once we have the details, then request user to type in username and password. They are accessible via params[:username] and params[:password] if hash.key('username') return true && hash['username'] return the matching password then it is a match then we save the username into the session like so session[username] = username If we want to sign out , then we delete the username from the session via session.delete(username) If certain process you do not want user to do anything, just check if session[:username] is there or not, if not, then user is not log in, then you want to redirect them to homepage.

--- developer: letmein maintain a yaml file that look like above where developer is the username and letmein is the password Signin Create a form that generate a parameter called username, store the username in the session[:username] if the username and password are valid. Signout session.delete(:username) To determine whether to allow user to perform certain action, create a method def require_signed_in_user     unless session.key?(:username)   # which means whether there is a key name after 'username'        session[:message] = "You must be logged in to do that."        redirect "/"     end end Then put into whichever path that requires user login .

You need to create a separate /data folder to store all the files. You need to have a root to current folder file by calling this file_path = File.expand_path("..", __FILE__) This will create a file path from root until one level above current file, which is the folder that contains your file. When reading text file, you need to specify headers['Content-Type'] = 'text/plain' File.read(file_path) To edit an existing file or to create a new file, need to File.write(file_path , "content here") To delete a file, File.delete(file_path) To determine whether a file exist or not File.exist?(file_path) File.file?(file_path) To list down all file within a certain directory. The Dir.glob will create an array list of the matching file. File.basename will cut off the last part of the file name. Dir.glob(root + "/data/*").map do |path|     File.basename(path) end As you can see, most File class takes in the file_path as argument....

There are difference in the calculation of modulo and remainder: Modulo is governed by the following equation x % y q = floor(x / y) x = q * y + r if x = 13 and y = 4 13 % 4 q = floor(13/4)    = 3 13 = 3 * 4 + r 13 = 12 + r r = 1 Remainder is governed by the following equation: x.remainder(y) x - y * (x/y).truncate  (truncate means to cut off the decimals) if x = 13 and y = 4 r = 13- 4 * (13/4).truncate r = 13 - 4 * 3 r = 13 - 12 r = 1

get "/" do pattern = File . join ( data_path , "*" ) @files = Dir . glob ( pattern ) . map do | path | File . basename ( path ) end erb :index end def data_path if ENV [ "RACK_ENV" ] == "test" File . expand_path ( "../test/data" , __FILE__ ) else File . expand_path ( "../data" , __FILE__ ) end end data_path will check if ENV hash with key "RACK_ENV" has the value of "test". If yes, then return the path from root to cms2/test/data folder. If not , then return the absolute path from root to the folder cms2/data Then, in get "/" block , join the data_path with * . If in development environment, then data_path is home/cms2/data then the return value is home/cms2/data/* We use File.join is good because it will detect the OS, then join with appropriate character.  With the pattern in place, we use Dir.glob to find the files. Here it return home/...

  def sort_lists(lists, &block)        complete_lists, incomplete_lists = lists.partition { |list| list_complete?(list) }        incomplete_lists.each { |list| yield list, lists.index(list) }        complete_lists.each { |list| yield list, lists.index(list) }   end <ul id="lists">       <% sort_lists(@lists) do |list, index| %>           <li class="<%= list_class(list) %>">                <a href="/lists/<%= index %>">                     <h2><%= list[:name] %></h2>                     <p><%= todos_remaining_count(list) %> / <%= todos_count(list) %></p>                </a>         ...

[ 1 , 2 , 3 ] . map do | num | num + 1 end = > [ 2 , 3 , 4 ] ~ [1,2,3] is the calling object ~ .map is the method ~ do....end is the block ~ [2,3,4] is the return object So the block is a kind of argument passed into the method. This chunk of code will add to the individual element in the array by 1. [1,2,3].map(&block) You are passing in the block as an argument. What map does is take each element in the array, run it through the block . It is like the array#include? function, which take each element in the array, then compare it against the argument [1,2,3].include?(2) then return true. In this case, the argument is just a single number. But in our case, the argument is a whole chunk of code. the Map function is to pass in each element into the chunk of code, then make the return value of each block into a new array. Then, return the new array.

HTTP Describe what HTTP is and the role of the request and the response HTTP is a system of rules , that serve as a link between application and the transfer of hypertext documents.  It is an agreement of how machines communicate with each other  HTTP follows a model, where client make a request and the server make a response (ie. it is a request response protocol).  What are the components of an HTTP request and an HTTP response? Identify the components of a URL. Construct a URL that contains a few params and values. Explain the difference between GET and POST, and know when to choose each. What is the difference between client-side and server-side code? For each file in a Sinatra project, be able to say which it is. Web How does an HTML form element interact with the server-side code that processes it. Why is user-entered content a security risk? Be aware of how to mitigate this risk. Sinatra Start a new Sinatra project and write simple routes...

def load_list(index)   list = session[:lists][index] if index   return list if list      session[:error] = "The specified list was not found."   redirect "/lists" end # View a single todo list get "/lists/:id" do @list_id = params[:id].to_i @list = load_list(@list_id) erb :list , layout: :layout end load_list method will take in an index of the todo list in the session[:lists]'s array. If there is an index provided, then find the list item in the session[:lists] array. Store the retrieve list in the list local variable. If the list is not nil/false, then return the list and terminate the method. Then store the list hash into @list instance variable.  If list is nil/false, because there is no such index in the session[:lists] array, then list will be nil. So the return function won't be executed. Then, we create a error message and store it in the session[:error] hash. Then we redirect to "/lists" which will render ...