JS Questions: What is JSON?

This is the fourth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is JSON?

JSON, or JavaScript Object Notation, is a syntax that is useful for sending and receiving server data. Since a server can only send and receive data as text, JSON is used to convert data into text, as well as transform text received from a server into an easily readable format for developers. These transformations are made using the JSON.stringify() and JSON.parse() methods, respectively.

Modern webpages frequently make requests using the AJAX request and response cycle. Once a response has been received, it can be parsed to JSON. From there, a developer can access data in the JSON object.

JSON is compatible with many programming languages (not just JavaScript). A ruby developer can treat the JSON object like a ruby hash, for example, using dot or bracket notation to access nested key-value pairs. A JavaScript programmer would treat the JSON object like a JavaScript object.

The data types that can be converted with JSON are:

  • number
  • string
  • boolean
  • array
  • object
  • null

Sources

 

 

JS Questions: What is AJAX?

This is the third in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc. 

What is AJAX?

Websites used to be composed of static HTML pages. Each time a user interacted with the DOM, the entire page reloaded. AJAX, short for Asynchronous JavaScript and XML, is a bundle of technologies that allow web pages to be updated without completely reloading.

AJAX uses a functionality built into modern browsers called the XMLHttpRequest object, which has certain methods and properties that let web pages get data from a server.

The flow of an AJAX request and response cycle begins with an XMLHttpRequest object being created. Then the .open method is called on the object, which takes in three parameters:

  1. the type of request, GET or POST
  2. a URL to the requested data
  3. a boolean value of whether to send the request asynchronously. An asynchronous request means that other JavaScript functions can run while the response is being prepared and sent back from the server.

The .send method is then called on the XMLHttpRequest object, sending it to the server. The server processes the request and creates a response, returning data to the browser.

The data can be returned as XML (hence the XML part of the acronym), though it’s now more common to convert the data to JSON format, which simply allows developers to interact with data as if it’s a JavaScript object.

Using that JSON data, a portion of a web page’s HTML could be updated. For example, a JavaScript function could use HTML to create an unordered list, and append list items with text from the data.

Sources

JS Questions: What is the DOM?

This is the second in a series of posts I’m writing that aims to provide concise, understandable answers to Javascript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc. 

What is the DOM?

The DOM, or Document Object Model, is the structure of HTML elements that make up a web page. It’s often described as a tree, with the document object (or whole HTML document) being the root, and the head, body, div, etc nodes as branches.

The DOM is not a Javascript-specific interface, but Javascript is the language most commonly used to access and modify DOM elements. With scripts, web pages can be made to react to user inputs, such as mouse clicks, for example, by–let’s say–removing or adding elements or modifying the css. We call these interactions client-side events.

Originally, short scripts were added to otherwise static HTML pages, but now Javascript can be used as the main source code for entire web sites.

Sources:

 

 

JS Questions: What is a Dynamic Programming Language?

This is the first in a series of posts I’m writing that aims to provide concise, understandable answers to Javascript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc. 

I’m starting with the basics: what is a dynamic programming language?

A dynamic programming language is a high-level language that compiles at run time. Run time is the moment when a program is executed. Compiling means translating the higher-level code (such as the js code written by a programmer) into a lower-level code–machine code–that the computer can run.

Dynamic languages lend themselves to certain types of behaviors, such as metaprogramming–code that can manipulate code. In dynamic languages, variables can be reassigned, and values can even be coerced into different types (such as using parseInt() on the string “1”).

In general, programs written in dynamic languages can be developed more quickly, but won’t run as quickly as those written in static languages.

Some examples of dynamic languages are:

 

  • Javascript
  • Python
  • Ruby
  • Perl
  • PHP

Sources

 

Rails: Rendering a File

This past week, I started building out a solo Rails project, and one of my first steps was to create a general layout for my nav bar, footer, and columns, so that I could use a cohesive structure across my site.

Since I wanted the layout to be pretty standard for all pages (and since the nav and footer are static html), I decided to use Rail’s built-in render file method, so that I wouldn’t have to house my bulky html on the application.html.erb file (or within individual pages, if I ever decide not to use them across the whole site.)

Using render is simple. Create a file containing the html to be rendered (check out render partial if you need to render more than just static content) and place it in a folder in the views directory. Then, in application.html.erb (or wherever you’d like to render your code), simply render the file in erb tags, like this:

Check out the Rails docs for more extensive info about rendering partials and templates.

Using Regular Expressions to Convert Text to “Cat Mode”

This week, I added “cat mode” to my personal website, rachelsalois.com. Essentially, I used jQuery to create a page that would dynamically load text. If a visitor clicks the “cat mode” link, the text reloads, replacing all words with “meow,” except for links. I also decided to maintain punctuation and capitalization.

While building out the feature, I created a few helper functions–isPunct, isLink, and isWords–that would return boolean responses and help determine whether to leave a text segment in its current state or convert it to meows using my meowify method. (You can check out the methods on my Github.)

This lead me to revisit Regular Expressions, a programming tool I’ve sometimes been wary to use because–let’s face it–compared to the readability of Ruby, Regular Expressions are hieroglyphic. In reality, though, they’re not that tricky to use, and sometimes extremely helpful.

Today, I checked out Britt Ballard’s excellent blog post about Regular Expressions, and was inspired to clean up the Regular Expressions I used in my functions, for practice and perhaps future reference. My project didn’t require particularly complex expressions, so be aware that there’s much more that can be done with Regular Expressions than I’m covering here. (Check out Britt’s post for some examples, keeping in mind that his use Ruby while mine were incorporated into a Javascript project.)

Four Easy and Useful Regular Expression

  1. Letters
JS letters
Return an array of all letters, case insensitive.

The [a-z] in this example could be replaced with any string or letters. Removing the “i” from the statement would make it case sensitive, so that, in this example, only [“y”, “a”] would be returned. Removing the “g” from the statement would mean only the first match would be returned.

2. Punctuation

JS match punct
Return the first punctuation found in a string.

This can be customized by adding or removing any punctuation or special characters.

3. All Punctuation

JS globally match punct
Return an array of all punctuation in a string.

I used this to save all punctuation from a string before splitting that string at punctuation.

4. Finding a link

JS match index
Return the starting index of a match in a string.

This could be used to find the start of a link in a string of text.

Using these regular expressions I was able to majorly simplify my code (though I’m finding that trying to convert my sentences while maintaining proper spacing and formatting is still quite a challenge!) I’ve still got some work ahead of me with the site, but I’m hoping that the work I’m putting in to automate my cat mode conversion will be helpful in later parts of my project as well.

 

 

 

Ruby’s Object Ancestors

Two weeks ago, I completed the Flatiron School web development immersive (woot!), and three weeks from now, I’ll be starting a position as an instructor at Flatiron, coaching students through Ruby  fundamentals (among many other topics) that I was learning four months ago.

51qtp4nzjrl-_sx258_bo1204203200_In the meantime, I’ve been taking a deeper dive into Ruby and reading The Well-Grounded Rubyist to make sure I’ve solidified the most foundational information in my mind.

That’s how I stumbled across Object ancestors again, and more specifically, became curious about Kernel.

Don’t know what Kernel is? Open up irb in your terminal and type Object.ancestors. This is what you should see (as long as you have ruby installed):

Object ancestors

So, what is Kernel (and, while we’re at it, what is BasicObject)?

David Black first mentions Kernel in chapter 4, Modules and Program Organization, of The Well-Grounded Rubyist. This is a hint to answering the question I posed, because, first of all, Kernel is a module. As Black says, Kernel is “the module where the majority of the methods common to all objects live.”

Just like any other module, Kernel is mixed in to a class to extend that class’s functionality. More specifically, Kernel contains the instance methods such as integer, loop,  rand, and puts, which every Ruby object has access to upon creation.

Meanwhile, BasicObject is a parent class. As the Ruby documentation plainly puts it, “BasicObject is the parent class of all classes in Ruby.” It only has a few methods, such as equals (“==”) and new.

So, essentially, when you create a new object in Ruby, what you’re doing is inheriting methods from BasicObject and then mixing in Kernel methods. Cool, right?

 

For a closer look at “puts” in the Kernel module, check out this cool blog post by Vaidehi Joshi.