Author Archives: Chutong Wang

Realize Interaction: How JavaScript Executes on the Web

Chutong Wang

Abstract

Click the plus button to add some game cards to your shopping cart, press the Play button to start a song, scroll down the web page to enjoy dynamic web transition, play a weird web game … We browse on the web every day. It has become a daily part of modern life, just like we brush our teeth every day.  But interestingly, unlike everyone can explain the reason why we have to brush our teeth and how toothbrushes help us to clean remnants, most people can hardly illustrate how we realize these interactions. That is because these interactions are based on numerous layers of abstraction and numerous technological black-boxes. Among these black-boxes, JavaScript is the one which directly affects the web interaction and user experience. In this essay, I will focus this essential part of web development – how JavaScript makes the webs come “alive” to accept our requests and return the results we want.

Client, Server, Browser and Internet

To understand how JavaScript enhances our experience of web browsing, we could start at a quick glance of the working principle of the web.

The first web page – World Wide Web (WWW), was invented by Tim Berners-Lee in 1989. The original purpose of building this web was to sharing information between scientists in universities and institutions around the world. To achieve this goal, Tim also created HyperText Markup Language (HTML) to provide the structure of a web page and identify links for rendering other web pages so we can jump through different web pages easily; web browser for collecting requests from the client and displaying documents from the server; and HyperText Transfer Protocol (HTTP) for transferring the request and service between the server and the browser through internet. This mode is known for the client-server architecture (see Figure 1) and we still follow this pattern today.

Figure 1: Client-server architecture. Files are stored in the server, waiting for requests from the client side. HTML for structuring the whole web page, define what is title, subtitle, paragraph and etc. CSS for styling, define the font, font-size, color and etc. JavaScript for making animation and interaction on the web page. [From https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works]

Client and Server: Computers connected to the web through internet are called clients or servers. The tablets, PCs, and smartphones we use every day are all clients. While servers, on the other hand, are computers that store web pages. For example, if I click a hypertext called “For More Information”, a new web page will pop up to show more of what I am searching for. This action from the client side will send a request to the server, and the server will find the site or html file mapped with “For More Information” and send back to the client. The process is much like when you borrow a book from a librarian and the librarian brings you the one you want out of thousands of books. A server can locate anywhere in the world, we can send request to different servers just like we can borrow books from different libraries all around the world.  

Browser: Firefox, Safari, IE or Google Chrome, almost all of us have at least one web browser installed on our computers. Browsers are installed on the client computer and all the web browsers function as client, they play an essential role on building connection.  Browser can simply be regarded as an interface. It fulfills the client-server architecture so we, as clients, have a place to send requests and servers have a place to show the results. This process is controlled by the browser render engine inside the browser, which could turn the HTML documents it receives into commands for the operating system and the operating system will display the content on the screen.

Internet: Internet is a link that connects all the servers and clients together. If using the same analogy of borrowing books from the library, the Internet is the road from home to the library, while the HTTP could be regarded as traffic regulation.

<!– fail to embed the video here–>

Video: How the internet works. [From: https://www.youtube.com/watch?v=7_LPdttKXPc]

A Brief Introduction of JavaScript

As mentioned in Figure 1, while HTML and CSS are for structuring and styling, JavaScript is for making animation and interaction on the web page to engage the users. Most dynamic elements we could see on the web these days are written by JavaScript.

However, the first web browser created by Tim Berners-Lee can’t support any client-side scripting, which means the visual effects of web pages rendered by this browser are simple and monotonous to some extent. But HTML is a markup language could “easily be extended to support passing program code to a web browser”.

So in order to achieve client-side scripting, Netscape Communications released JavaScript in 1995 and developed Navigator 2.0 beta 3 browser with the ability of reading and executing JavaScript codes. It became so popular that it gradually phased out other scripting languages, and no other scripting language ever took its special place. Today, it is still one of the most popular languages in the world, widely used in web development, building web server, creating web and mobile application, game development and etc.

There are several factors that make this language so successful. First, it is the only programming language native to the web and can be used in both the front-end and back-end. Second, there is an incredibly low threshold to get start. It is easy to insert a piece of JavaScript codes in the HTML document with a <script> tag. And the browser with a JavaScript engine (all the mainstream web browsers have JavaScript engine) could then parse these codes and make them work. Third, the snowball effect makes JavaScript a language difficult to be replaced temporarily. Programmers developed numerous frameworks and libraries that helped developers to create excellent web interactions quickly. This makes the language very supportive since it already has a mature and vibrant community worldwide.

 

Interaction: Examples of How JavaScript Manipulate HTML Tags

Let’s use a piece of codes in W3Schools as example to explain how JavaScript works on the web:

Figure 2: Example of JavaScript Object Properties from https://www.w3schools.com/js/js_object_properties.asp . The left part is an HTML document with JavaScript in the <script> tag, and the right part is the corresponding web page.

The first line of the code <! DOCTYPE html> is a Document Type Declaration. It informs the web browser that “Hey! This is an HTML file” so the browser render engine will start to work to turn HTML text and tags into commands to the operating system and then display the web page on the screen. Every HTML tag has a close tag with slash to demarcate the range of this tag. <body> tag includes all the content that will show on the web page. Everything in the right part of Figure 2 is all belongs to <body>. And tags like <p> and <h2> are for identifying the function of the text, <p> for paragraph and <h2> for subtitle (abbreviation of heading 2). What’s more, there is a <p> tag with an id which could make this paragraph different from others. Each HTML file can contain many ids, but each id name must be unique. We can see although there is nothing inside the <p id = “demo”> </p>, the final web page still shows a line of text said “John is 50 years old.” That is because the JavaScript is taking charge of this part.

As we mentioned before, we could simply insert JavaScript codes in HTML document by using <script> tag. So, the code between <script> and </script> is JavaScript code. The “var” stands for variables. Variables are used for storing data values. If the code goes like:

        var person = “John Doe”;

Then we can say “person” is a variable. However, in this example, there is a set of variables. We have variables named “firstname”, “lastname”, “age” and “eyecolor” inside the “person”. Thus, we called “person” an object. In JavaScript, object stands for variables with many data values. Object is easy to use when we have to define a set of features. For example, a gallery website might need an object called “work” or “artwork” or whatever you what to name it with a set of variables like “artisit”, “size”, “creatingDate” and “price”. This makes the content more structured and saves a lot of time for boring repetitive coding.

Below our object “person”, we have a line – ‘document.getElementById(“demo”).innerHTML’. This is one of the most adorable part of JavaScript. The syntax of JavaScript is quite beginner-friendly compared to other programming languages since the semantic meaning of many JavaScript components are quite obvious. This line basically means grab the element with the id “demo” in the HTML document. And here the manipulation starts. JavaScript controls the element in HTML file with id “demo”, to make it display the “firstname” in object “person”, followed by string “ is ”, followed by “age” in object “person” and then followed by string “ years old.”. In this way, JavaScript accomplish its goal of making change in HTML file.

This example seems have nothing to do with interaction or animation. Although it uses JavaScript to display a line of text which is not existed in HTML, it is still displaying text, which doesn’t enhance our user experience at all! But if we think deeper of this example, this actually shows us an exciting function – JavaScript could change the appearance of HTML content readily and could insert programs in plain HTML web page. We all know that programming languages are able to make mind-blowing effect. HTML can’t make lovely animation, but we could make animations by JavaScript since it is a programming language, and insert them on the heading, next to a button or anywhere we want.

I will take JavaScript libraries using as example to further illustrate the interactions made by JavaScript. Libraries can be regarded as small programs already written by other programmers. What we have to do is to copy and paste code from the library to initiate functions in the library. In this website(https://ustaobao.glitch.me/), I insert two JavaScript libraries – AOS and Shine.js in the head of the html file, so the libraries could be loaded in advance and I could use the functions inside the libraries wherever I call them (see Figure 3).

Figure 3: HTML head of https://glitch.com/~ustaobao. Line 15is the CDN link of AOS, which is used for triggering animation when you scroll down. All the animations in this web page are created by AOS. Line 18 is the CDN link of Shine.js, which is used for making creative font style.

Then I initiate them in JavaScript file:

Figure 4: initiate shine.js in JS file.

Since AOS is a JavaScript library for creating quick CSS animation with simple principles, we could add it directly on the HTML tags:

Figure 5: Part of the HTML tags with AOS.

While shine.js, on the other hand, need more specific description of what I want what to do. So I use getElementById as the previous example (see Figure 4, line 81), to endow the element <h1 id=“tryshine”> with Shine.js function (see Figure 5, line 48) make the sentence looks like this:

In this example, I create scroll down animation and cool font style easily with JavaScript. Whether it’s a complex effect or a simple style, referencing methods are basically the same in JavaScript.

How Browser Understand JavaScript Code

Figure 6: Process of executing JavaScript code. [From: https://medium.com/@mustafa.abdelmogoud/how-the-browsers-understand-javascript-d9699dced89b]

Since JavaScript is written in human-readable way, we need to make the browser understand JavaScript code as we do. So, just like the HTML is understood by the browser through browser render engine, JavaScript could be parsed through JavaScript engine inside the browser. The first step is tokenization, engine maps each element of code to a token and an array of tokens of the JavaScript file. The second step is to convert this array of tokens into an Abstract Syntax Tree. The Tree represents the logic of our code and turn them into byte code. In this process, the engine analyzes data types (categorize what this data is used for) and hot functions (functions that appears many time in the code) to optimize the code through optimization complier in the engine (see Figure 6). And finally, translated into machine code by the complier (see Figure 7).

Figure 7: Transfer JavaScript code to Machine code. [From https://medium.com/@mustafa.abdelmogoud/how-the-browsers-understand-javascript-d9699dced89b]

A Side Note of Web Design

Although JavaScript can bring a lot of great visual effects to our websites, the reality is that overly complex visual design doesn’t improve the user experience. Conversely, miscellaneous interaction design may cause key information to be ignored or visual fatigue. How to ensure that the content of the website is modest and attractive without cluttered interaction is a problem that web developers often need to face.

The interactions that we take for granted today are actually carefully designed. Throughout human history, human interaction with the media has been largely one-sided [KGPDM1976]. From writing on slate or paper in ancient times to watching TV shows today, input and output are usually unilateral. Thus, web designers don’t have many direct patterns to draw from. Instead, all these designs have to borrow from the ways we use sign and symbol systems. When you click a button, the button will change the light and shade slightly just like when you press a button in real world. That’s a visual sign we detected for assuring valid click. Plus symbol for adding items, trash can icon for deleting. These are symbols refer to specific meanings. How to use these signs and symbols to make the appropriate interaction effect is crucial to the performance of the web page.

Conclusion

Thanks to the development of JavaScript, it has become easier and easier to add diverse interactions to the websites. But when it comes to web design, there’s a risk of putting the cart before the horse when it comes to flashy effects. Therefore, familiarity with JavaScript is almost as important as mastery of design concepts in building a website.

References: 

Aaron. (2009, February 19). How the Internet Works in 5 Minutes. https://www.youtube.com/watch?v=7_LPdttKXPc

Alen Kay and Adele Goldberg, (March 1977). “Personal Dynamic Media” in Computer, vol. 10, no. 3, pp. 31-41, doi: 10.1109/C-M.1977.217672.

Client/Server, the Internet, and WWW. (n.d.). Retrieved December 13, 2020, from http://www.robelle.com/www-paper/paper.html#servers

How the Web works. (n.d.). MDN Web Docs. Retrieved December 13, 2020, from https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works

Martin Irvine, Introduction to Symbolic-Cognitive Interfaces: History of Design Principles 

Martin Irvine, (new) From Cognitive Interfaces to Interaction Designs with Touch Screens

Mustafa Abdelmogoud, (2019, September 27). How the Browsers Understand JavaScript. Medium. https://medium.com/@mustafa.abdelmogoud/how-the-browsers-understand-javascript-d9699dced89b

Mustafa Abdelmogoud, (2019a, September 27). How the browser renders HTML & CSS. Medium. https://medium.com/@mustafa.abdelmogoud/how-the-browser-renders-html-css-27920d8ccaa6

Peter J. Denning and Craig H. Martell, (2015). Design in Great Principles of Computing. The MIT Press. 

Ron White, (2008). How Computer Works, 9th edition. Que Publishing. 

Shan Plourde, (2019, March 19). Why are we creating a JavaScript-only World Wide Web? ITNEXT. https://itnext.io/why-are-we-creating-a-javascript-only-world-wide-web-db8c3a340b9 

 

Chutong, Week 13

Part One

Major Learning Achievements & New Knowledge

  • Basic knowledge of semiotics
  • Human symbolic cognition & symbolic representation
  • The essence of nature languages and a brief history of symbol evolvement
  • Basic history of computer science and how it related to human symbolic cognition
  • How computer works and why it works in that way
  • Operation principle of “programming”
  • Basic knowledge of HTML, CSS, JavaScript and Python

 

 

Part Two

Discoveries

【How we turn into this?】

Before I learned this course, the development of computer seems like a mystery for me. As someone with a great interest in zoology, I have always been curious about how to define the boundaries between humans and other animals, and how homo sapiens evolved from the poor omnivorous mammals to what we are now. If a person uses a time machine to travel from Han Dynasty (206 BC – 220 AD) to Ming Dynasty (1368 – 1644), he might struck by the splendor of the Ming Dynasty and some of its novel designs and civic activities. But if he travels from late Qing Dynasty (1901 – 1912) to now, that will be MIND-BLOWING! He might be deranged~

How did we come out of our caves to build city-states, and how did we move from the age of monarchs to the age of information and globalization?

The answers of these questions are in the black-box before.

I feel the readings of semiotics and nature language in the course shed a light on these black-boxes. I can’t say they solve all my confusion, but they provide a terrific approach to think about our human development. Our progress towards the information age began when our ancestors began to paint on the rock walls and carve symbols on the stones. We add layer after layer of abstraction from generation to generation, and with the development of engineering, the computer comes out!

【Our ability of learning language is a superpower! 】

It’s hard to realize that language is actually a part of symbolic representation, and also, hard to realize that the complexity of nature languages is a superpower of human beings. That is because we live with language everyday since we born, we just take that for granted. It’s hard for us to see the inherent connection between language (or let’s say, symbolic system) to computer development.

I was shocked when I learn how human babies deal with language information and weave the information in their little brain to create new expressions. I still feel that part is a miracle.

【Programming】

Punch cards and punch tap, the important component of programming in early age. After I learned how programming evolve from physical things to codes, programmers didn’t look like magicians anymore. And thanks for all the efforts our predecessors made, we can just type in symbols belong to human cognition community to communicate with machine is all because of their hard work on UNICODE, complier and high level languages.

 

So basically: [BEFORE] Everything is cool and mysterious [NOW] Everything is cool but reasonable!

 

 

Part Three

How the methods, key concepts and approaches that we have used will apply to other topics, disciplines, or courses that you want to study in CCT

【Web Development】

This semester I also take a course called Creative Web Development (by Professor Undeen). In this course I have to learn HTML, CSS, JavaScript and also JS libraries like jQuery. But it confused me at the beginning that who am I writing these codes for? And the most essential one, why browser can understand the English I write? These questions are slowly being answered in the study process of Computation and Meaning of Code. This helped me to build confidence on code learning, and now I found coding is quite interesting, not a barrier impossible to overcome. So I might try to learn some Python next semester.

【Communication and UX Design】

Before came to CCT, I was a graphic designer in a Shanghai company. I really had issues with our web developers since I don’t know what is they can do and what is they can’t, or what is difficult what is easy. Now, with an overview of computer science and understanding of many terminologies, I believe I could communicate with them in better way. One of the CCT learning goal is to help students to be a bridge between technical and non-technical staff, I think that’s exactly what is course is for.

【Art】

Without any knowledge of art, I have to say most of the time I could not understand what all those art works are for, especially modern arts. I love David Hockney’s swimming pool, love Dali’s dream-like painting, Edward Hopper’s city life, Georgia O’Keeffe’s flower, but I don’t really get the beauty or meaning of Andy Warhol, Mondrian, Henri Matisse and etc.Their works look so simple. Are they just fish for fame? And more importantly, why some people are willing to pay so much money for art? What can art do?

But semiotics really, really change my view of art. Painting on the rock wall is the start of art, the start of symbol using, the start of language and everything related to human symbolic cognition. The letters in English, or the characters in Chinese are fixed form of art work (not that fixed maybe, we still have calligraphy art). Now I feel that art is like an extension of our primitive ability. We use our creativity to create different symbols, express emotions with colors, and express rhythm with lines. I want to quote Mr. Keating from the film Dead Poet Society:

We don’t read and write poetry because it’s cute. We read and write poetry because we are members of the human race. And the human race is filled with passion. And medicine, law, business, engineering, these are noble pursuits and necessary to sustain life. But poetry, beauty, romance, love, these are what we stay alive for. To quote from Whitman, “O me! O life!… of the questions of these recurring; of the endless trains of the faithless… of cities filled with the foolish; what good amid these, O me, O life?” Answer. That you are here – that life exists, and identity; that the powerful play goes on and you may contribute a verse. That the powerful play *goes on* and you may contribute a verse. What will your verse be? 

He is talking about the poetry, also a form of art, and I believe his words apply to any kind of art. These are what distinguished us from other animals.

Many art works always look abstract is because symbols are on many layers of abstraction. They look simple might just because audiences usually take everything for granted.

Combined with digital technology, art now has more forms of expression. Among them, I am particularly attracted by Net Art, and I hope to research further in this field.

Chutong, Week 12

My notes are too long to paste, so I shared a OneNote link here: https://1drv.ms/u/s!Atq3ENSdA8wjaDjRqa_hssxJDos

As Evans said, “what distinguishes a computer from other machines is its programmability”. Programming makes computer could be trained and developed for different purposes, unlike telephones are just for calling or radio just for listening broadcast. The crash course videos provide an interesting interpretation of the history of programming from punch card to high level programming language, which give me a clear view of how the “program” evolve. Connected to everything we learned previously, I think I somehow deblackbox the meaning of “program” in engineering level and computer science level. Programs convey ideas into instructions that a computer can understand and execute. And that’s the reason why at the beginning programming is so difficult — we have to make the machine to understand us! And that’s also the reason why at the beginning programming are just the game for a few experts, even most experts and scientists could not take the fully advantage of computer. Not everyone has the superpower to talk to machine for sure. Thus, making a standard for translation is quite essential. UNICODE serves for this purpose, compiler, interpreter and translator serve for this purpose as well. UNICODE standardize our common used symbols into fixed code and embed in computer system (actually I stuck when I wrote this sentence, is this standard really embed in system? I’m not sure), while compiler makes human readable high-level programming language into machine language, so human won’t struggle with learning machine language any more, just primary school English is enough!

PS: new to know that compiler is actually a bunch of codes, not a physical part in computer’s mainboard like transformer in electric power grid.

As it shows in the video courses, programming languages share some common logic, understanding Python could help us understanding the basic syntax of Java and Ruby as well. I think that is because all the programming languages are for human. Human community shares the same logic system, that’s the reason why all languages have something in common (also the native languages as well). And just like native languages, programming languages have their flexibility as well. We can express the same meaning in different way. This sense of flexibility and multipath feature of language is distinct even in the most basic practice. For example, the Challenge part of IN-LEARNING course, I wrote (a little bit) different codes with the Solution it provides:

#my code

#solution the course provides

Chutong, Week 11

Video lessons notes: 
 
WHAT IS PROGRAMMING
 
Programming is a process that conveying ideas into instructions that a computer can understand and execute. 
 
Sequential: the order of the steps will impact your final product
Wrong sequence might cause bugs and crash
 
WHAT IS A PROGRAMMING LANGUAGE? 
 
syntax is important. Different language has different syntax. 
Each programming language has its own strength and weakness. (Good at deal with different part of the computer) 
 
Machine language: just consist of 0 and 1
High level language: what we learn right now
 
Make your codes running: 
Compile it or interpret it or combination of both
 
Compiled languages: C, C++, Objective C
Interpreted languages: PHP, JavaScript
Combination: Python, C#, Java
 
IDE (INTEGRATED DEVELOPMENT ENVIRONMENTS)
Enhanced text editors, have features that speed up code development
syntax highlight
 
Xcode: development of apple products (iPhone, Mac, iPad)
 
 
Questions: 
  1. It mentioned in the video, that we have many different programming languages since we have to operate different parts of the computer. Some are good at communicating with web browser and some are good at communicating with memory and etc. But this answer does not solve the basic confusion — why we have to use different languages for different computer components? They will finally break into machine language (0 and 1) after interpreter and complier processing anyway! Why they have to be different? 
  2. Does it mean that IDEs have interpreter and compiler inside, so they can run the code directly? 
  3. Could we discuss more about Computational Thinking? Despite the examples give in the reading, is there any other field (especially fields related to CCT) highly related to computational thinking? For example, big data analysis in Marketing maybe? 
 
 

Chutong, Week 10

Computer at the beginning is just for calculating. The idea of “Augmenting Human Intellect” expanded the ability of computer as well as our understanding of what a machine can do. Now we have the information interaction between human and machine. And we can intuitively (based on physical perceptible images/sound/etc, and human symbolic cognition) understand these interactions through the interface. The inputs and outputs, the sockets, the screens are all parts of interface. 
 
PS:
The section on symbols in the reading reminds me of a website https://historyoficons.com/. This is a website about the evolution of icons. We can see people use different images to interpret same meanings. 
 
Example: WeChat
 
WeChat’s logo is a very typical chat application logo. Compared with iMessage and WhatsApp, they all have this speech bubble (has a long history in inset and comics) inside. 
 
Understand the icons: 
The main page of WeChat is quite clear even you don’t read Chinese. The first logo below refers to message; second refers to contact list; third refers to exploration Moments (like twitter), this icon looks like a compass ( similarity: logo of Apple browser Safari ); and the forth is for profile setting. Understanding these icons are based on our previous experience and shared cognitive knowledge in our community. For example, why we can distinguish your own profile and contact list is because we usually use three or more lines as an image index of “list”, thus, we can quickly understand why they design the icon that way. 
How we sense all the elements on our screen:
Images that are visible to the human eye need the power of pixels to appear on the screen. Each pixel is made up of three colors, red, green and blue, which are arranged densely on the screen, presenting any graphics with different color values. The screen is made up of a number of pixels, each of which has red, green and blue filters (CRT) behind it. The filter filters the white light from the back of the screen, leaving a single color to pass through. The white light passes through three filters and is broken down into red, green and blue rays that enter the eye. Because a pixel is extremely small and the filters are so close together that when the light passing through them enters the human eye, we cannot distinguish the three beams of light. In other words, the light mixing in the human eye endow a pixel to “have” color.
A complete process from an input device to an interface display information to human eyes goes like this :(application/input device) data and instructions — >CPU — > graphics card driver — > graphics card — > display on your screen — > eyes.
 
Question 1: 
The reading about touch screen satisfied my curiosity of how touch screen works. Now I can understand why fingers can work well with touch screen while gloves can’t. But I still have questions about it. In a lot of experiments that I’ve done (as a Tap Tap Fish fan, I’ve done a lot of experiments with all kinds of touch-screen materials for saving my time), I’ve found that oranges work, pens don’t, although pen is conductive. And any conductive pointy shape things don’t work. Does this mean that the touchscreen sensor will also be affected by the stressed area? Can I regard this as “the orange on the screen has a large stressed area so it can effectively touch the screen, while the pen is too sharp so it can’t” ? If yes, why Apple Pencil works?
 
Question 2: 
People always say Apple has closed system, this term appears in the reading as well. And in the reading said the Macintosh PC is “the beginning of black-boxed, closed software systems” (Irvine, p.10). Could you explain more what is the closed system in computer science? Cause if I didn’t study this course, Microsoft PC is also a blackbox for me, for me it is also a closed box with mysteries. 
 
 
References:
Crash Course Computer Science: Technical Background on PCs and GUI Interfaces

Chutong, Week 9

A Human-Readable Language
When I studied HTML and CSS, the first thing came into my mind is: this is totally human-readable!!! How can a computer language be human readable? Doesn’t it suppose to serve for machine? 
 
Take these codes as example：
body {
  font-family: sans-serif;
  margin: 2em;
  background-color: black;
}
 
img.rounded-corners {
  border-radius: 20px;
  margin-left: 40px;
  margin-right: 40px;
  width: 200px;
  height: 140px;
}
/* These instructions can be easily read by anyone who knows English, even without any programming knowledge, to figure out what the coder wants to do. */
 
Now based on what we learned in previous weeks, I understand that markup languages is based on many layers of abstraction. The tags still need to be decode to machine language. And the reason why we can use all these human-readable tags directly, is because they are formatted command for the web page. They already be formatted. What we do when we write codes is call them, use them to markup, and the machine can decrypt these formulary tags into information that it can understand.
 
 
HTML Tags
I was surprised by how detailed the HTML tags are. The words That I used to think were typed directly are actually wrapped in tags <p>, and we do not use copy and paste from Microsoft Word to bold text, but <strong> or <bold> or <span> tags. Lists should contain <li> (again, not copy and paste from Word), tables should contain <tr> <th> <td> (not copy and paste from Excel). And we don’t drop the media directly in a magic box, but use <img> <audio> <video> tags. With these tags, our browser could understand what we want to do semantically. They help explain the properties, attributes and functions of the content. 
 
Questions: 
I do understand <meta charset=”utf-8″ /> is telling the browse to use the UTF-8 character encoding (Unicode standard), but I do not quite clear why we always add these in the <head>:
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
 
 

Chutong, Week 8, CPU

 
Background: how binary works
 
All electronic devices have their own circuits and switches, and electrons flow in and out of the circuit, which are completely controlled by the switch. Setting the switch to OFF, the electrons will stop flowing; setting it to ON, the electrons will continue flowing. This switch between ON and OFF is controlled only by electronic signals. In this way, the transistor’s ON state is represented by “1” and its OFF state by “0”, thus forming the simplest binary number. Many transistors produce a special order and pattern of “ones” and “zeros” that represent different situations and define them as letters, numbers, colors, and etc.
 
Three Main Components of CPU
 
  1. Arithmetic Logic Unit
  2. Registers
  3. Control Unit
<! – – from Google image – ->
 
 
Procedures
 
  1. Extract: Extract and retrieve instructions (for values or a series of values) from memory or cache memory. The location of memory is specified by the Program Counter, which holds the value that identifies the current Program location. After the instruction is extracted, the program counter increases the memory location according to the instruction length.
  2. Decode: The CPU determines its execution behavior based on the instructions extracted from memory. The instructions are consisted of codes which indicate what operations are to be performed as well as codes which give the instruction the necessary information, such as the target of an operation. 
  3. Execution: After the extract and decode phase, the execution phase follows. This phase needs to connect to various CPU parts capable of performing the required computation. For example, if an addition operation is required, the Arithmetic Logic Unit (ALU, Arithmetic Logic Unit) will connect to a set of inputs and a set of outputs. The input provides the value to add, and the output will contain the result of the sum.
  4. Write back: Writes back the results of the execution phase in a format. The results are often written into the CPU’s internal memory for quick access by subsequent instructions.

 

References:

Crash Course Computer Science: Video Lessons

Kahn Academy: Introducing Computers

Chutong, Week 7

My example is an image in my website created through Glitch (a web development platform): 

The code of this image in my html doc:

<div align=“center“>
      <img
        alt=“cute red panda”
      />
    </div>
 
 
What this image looks like in Glitch assets: 
 

But I am not sure does the assets equals to cloud or something? Cause not only in Glitch, but also in CodePen and many other web development coding platforms we can see this term assets. So I guess it is a conventional name for media storage in these platforms? 

And we can actually see the pixels when you zoom in the website, you will find the details of image start to blur if you zoom in a lot, while the text of the website still keep sharp (bitmap vs. vector)

All computer files (also include this image) are stored in our computer as E-information (0 and 1, machine language). The complier translates them into digital code for storage and the translator translate them back to display when we call these information through operating system.  And when I upload this image to WordPress, I am actually transmitting the digital information of this image from my computer to a larger system. So this chunk of data of this image is now storing in both my computer system memory and the cloud of this WordPress website waiting for re-instance. (Actually I’m not very sure it is in the cloud or something else, still not very clear about the definition of cloud.)

Question: 

As we know how the bitmap work from this week’s reading (pixels, RGB), I wonder how the vector images work and how they display in our screen

If our screen is consist of small dots, then how can vector image display? For example in web development we use Adobe Illustration to create SVG image, because SVG image doesn’t change because of the resolution or zoom in. 

 

References: 
 
Digital Character Sets: ASCII to Unicode (video lesson, Computer Science)
How do Smart Phone Cameras Work? (video lesson, Branch Education)
Images, Pixels and RGB (video lesson from Code.org, by co-founder of Instagram)

Chutong, Week 6

Meaningful symbolic signals are transformed by a transmitter into electronic signals that can be read by a machine, and then transformed by a series of programs into symbols displayed on an interface which can be perceived by humans. 
 
Since our devices are binary based, we need to convert all physical information into machine-readable signals for transmission and storage. A single binary value has two states, which can be called as 1 and 0, or true and false or etc. And if we want to represent larger things we just need to add more binary digits to form more complex logical relationships. 
 
And to transmit and recompose these signals units in another place or time, we need to connect devices in physical layer (through mediums like fiber optics, cables, etc), datalink layer (Ethernet protocol, MAC address), network layer (IP) and transport layer (port). And for these information signals can be expressed on the device in human perceptible way, we need to specify the formatting rules for these data before we can interpret the rendering.Eventually, these signals will be restored and presented on our interfaces. 
 
In the whole transmission process, meaning is not transmitted as an essential property. For example, in ASCII, each letter and symbol has a corresponding token for “correspondence mapping”. The machine does not need to understand the meaning contained in a piece of information, it only needs to faithfully execute the program corresponding to each symbol.
 
Now our devices are full of complex symbols, and this brought to my attention some problems that were not present when electronic devices were not so developed. For example, I’ve noticed that people may have different understanding of how an emoji should be used. Some see 🙏 as a high five, some regard it as a prayer, and in some cultures it is used as a blessing or greeting. I don’t think the developers of emoji anticipated every meaning. And the device itself doesn’t convey exactly what the emoji means. It’s all based on human interpretation – we can have different interpretations of the same symbol and disaggregate different information. This is the ambiguity of the symbol, and the reason why it is so powerful. I believe all the communication behaviors involving people are symbolic, rather than pure signals. 

 

Reference: 

Martin Irvine, “Introducing Digital Electronic Information Theory”

Chutong, Week 5

What is natural language:
  • human language (eg: English, Chinese, Japanese, etc)
  • contrast to artificial language (eg: programming languages) or other animal communication (eg: bee dance, whale whistling, bird singing)
What is a language
  • consist of words (lexicon, dictionary of symbols) and rules (syntax, semantics, morphology, phonology, etc), as well as interfaces (connect to the objective world)
  • Creativity, productivity, combinatorial system (can create sentences never exist before)
Essential features of language:
  • Symbolic: based on human symbolic cognitive system, a layer of abstraction
  • Arbitrary: vague, ambiguous, dynamic
  • Recursion and combinatoriality
  • Generative and productive
  • Discrete infinity: limited units, but unlimited expressions, indefinitely extended)
  • Intersubjectivity: collective cognition
  • Reflexivity
 
This is the Tree Diagram I draw followed the instruction of Tree Diagramming Practice video: 
 
” The future of health is on your wrist. ” — Apple Watch’s slogan, 2020
 
And this is the screen shot of XLE-Web:
 
I am really bad at grammar. Even now, I still can’t tell the attributive or predicative of a sentence. Surprisingly, I can speak fluent Chinese without knowing these rules. For me, it looks like a superpower I never noticed before, just like human beings weren’t aware of the existence of air for a long time. And the mastery of language rules is not entirely acquired. As the reading (Linguistics: An Introduction, p8) mentioned, grammatical correctness is not parent’s target when teaching language. But every little baby scans the expression rules of the people around and almost spontaneously master the language that the most advanced computer could not crack!
After the readings I was still confused and captivated by human’s ablitiy of learning language. So I want to discuss more on:
  1. Does the readings mean that our ability to learn languages is rooted in our genes and body structure (such as gray matter in our brain)？
  2. Could we discuss more about Ray Jackendoff’s “parallel architecture” in class? Does this model means we mix pragmatics, semantics, syntax, morphology and phonology simultaneously when we understand a sentence?  Hope I understand this model in the right way.
  3. Could we discuss more about efforts on Natural Language Processing? What stage have we reached and what is the biggest barrier right now? And does machine need to learn both C-structure and F-structure?

References: 

Irvine, M. Linguistics, Language, and Symbolic Cognition: Key Concepts

Intoduction, Linguisitcs: An Introduction

Words and Rules: The Ingredients of Language

Pinker, S. (1999). The Infinite Library. In Words and rules: The ingredients of language.

Natural language processing. (2020). In Wikipedia. https://en.wikipedia.org/w/index.php?title=Natural_language_processing&oldid=976226143

Steven Pinker: Linguistics as a Window to Understanding the Brain | Big Think. (2012, October 6). https://www.youtube.com/watch?v=Q-B_ONJIEcE

Tree Diagramming Practice. (2014, October 31). https://www.youtube.com/watch?v=jmrmHnXruFw