React on Rails, Rails Asset Pipline

Got to import react libraries with React On Rails. Have imported react-bootstrap into the app, and got some of the bootstrap components working.

Read about the Rails Asset Pipeline. Basically it is a compiler and bundler. It process files such as .sass and .coffee files, and also bundles all the files into a single .js, and .css files so that only a single file needs to be sent to the server.

Advertisements

Programming Javascript Applications Book, Chapter 2 on Functions

Reading some of Eric Elliots Javascript Applications book.

Nice article on first order functions. Basically in javascript functions are first class objects, which means we can pass them around as variable to other functions. Functions are actually Objects. A first order function is where we get a function to return another function.

Some good articles on using let and const v.s var. Basically in ES6 there is no longer any reason to use ‘var’. Either use ‘const’ for constants, or ‘let’ for variables.

Also some good articles on closures.

  1. Finished chapter 2 of the book.

Ruby on Rails and HTTP Requests

Ruby on Rails

Completed the official RoR tutorial. I like the framework so far. It seems very powerful. It packs a lot of functionality without having to write much code, and the structure it forces on you makes it seem like it can be quite simple to write quite complicated apps. It reminds me a little of Django also, the way it is opinionated and structured as an MVC framework.

Javascript and Rails

Reviewed how Javascript is meant to be used with Rails also. They use unobtrusive javascript, which is basically where parameters and functions are defined through data- attributes in the HTML tags. These data- tags activate certain javascript functions, which we can then intercept and modify.

This gives a separation of JS and HTML. The HTML communicates to the JS via these data attributes. The data attributes make ajax calls. In our Js and files we intercept these AJAX calls, e.g. via

$(“a[data-remote]”).on “ajax:success”,  (e, data, status, xhr) -> alert “submitted”

And so the JS and HTML appear in different files, and this is what is called Unobstrusive Javascript.

According to their description this Unobtrusive scripting adapter for jQuery has these function:

  • force confirmation dialogs for various actions;
  • make non-GET requests from hyperlinks;
  • make forms or hyperlinks submit data asynchronously with Ajax;
  • have submit buttons become automatically disabled on form submit to prevent double-clicking.

Also it seems all the javascript we are writing to intercept the ajax calls is written in CoffeeScript.

React and Rails

These guys have developed a nice stack for React and Rails. And one of its core developers has a long article on how and why it started also.

This guy talks about 3 ways to integrate React with Rails, including the pros and cons of each way. These 3 ways are:

  1. Using the react-rails gem. This is the oldest and simplest method which essentially lets you integrate react components into Ruby templates. However you dont get the full benefits of React or the javascript Development Environemnt here, because you are essentially just plugging in react components into your ruby templates. For example use of other react libraries via this technique is limited as it is difficult to imort them.
  2. Using react-webpack-rails which is the stack described above. This basically gives you a way to combine a Rails backend and Javascript Framework React Front end into the same app. Eg use RVM in the back, and NPM in the front. This is more advanced than the previous setup, but much more powerful also, giving you full advantage of both frameworks.
  3. BUild 3 separate apps. A Rails App which functions as the API backend, and a node/React app which works as the front end. Apparenlty this can be cumbersome as you need to maintain two separate apps, and lose out on some of the advantages you would get by having a single app.

React Virtual DOM vs DOM

The standard Document Object Model, takes a HTML file and turns it into a DOM, where each of the elements become a node in this DOM, and the entire thing has a tree structure. The DOM is an abstraction of the HTML text.

This is great for traversing all the elements in a DOM, but does not do it so quickly.

For example imagine the call var item = document.getElementById(‘item’). To get this it would have to go through all of the nodes in the DOM.

React used the virtual DOM which creates a sort of abstraction of the DOM. In the virutal DOM the nodes are made up of React Elements, and these are stateless. The React Elements are generated by the rendering of React Components. The React components are stateful, and whenever they change on the React Elements referring to them is updated. And finding those Elements is easier than traversing the whole DOM, which gives the virtual DOM performance advantages.

Here are 3 react-rails tutorials.

HTTP Requests

Ok, so evert HTTP request and reponse contains a header.

For requests, tt is in the Header where you put the type of request, e.g Get/Post/Head/Put/Delete.

The request header also contains other information such as browser type, last modified parameters, OS type, e.t.c

We can post data to the server using a post request, and it will appear in the first GET url parameter, with the data appended to the URL. However the amount of data we can put here is limited.

When we send data with a POST request, the data goes in the ‘content’ section and we can fit much more information there.

Also the url in the request is only listed as a suburl, with the main domain not being mentioned. I think that is how cross domain requests are detected, because we are making a request to another domain, and that is specfied in the header.

A HTTP response is what the server sends based on the request. Different info can also be contained in the response header, such as the data type it is sending, the time the file was last modified,  and server information.

Font App on Product Hunt!

Screen Shot 2017-04-09 at 12.51.15 PM (2)

Posted product on product hunt today. It has been doing well. Got 82 upvotes till now. And it has been in the top 5 for most of the day. I boosted it also by getting freinds to upvote of course, but most of the upvotes have come from organic sources, which is great. Obviously it is an interesting app.

It is also featured on the Google Font page on product hunt as a related app.

Spend most of the day building the layouts proposal.

Have filtered out the CSS files. Now just need to turn them into style objects. Shouldn’t take too long. Once I am done, Ill send it over to the guys.

Got Thickness, Slant, and Width data by scraping website. Put sliders in Google Font App.

To scrape the contents of the website I first got all the elements with attribute ‘gf-font-style’ using this code.

The value of the attribute was a string which contained the font family, weight and style information. I parsed the string to extract these as three separate variables. This function helped for parsing the string also.

I then built up a list of functions which I could put in the console, and it would extract the weight, family and style of all the fonts on the page. I did this on each page for all the thicknesses, widths, and slants, and so I have all this data saved in arrays.

I built sliders in the extension to filter the data by thickness, width and slant using this new data.