Day #3 on JFLAP

Today I read chapter 4 of Linz’s book. This chapter is about properties of regular languages and how to identify nonregular languages. I find the Pumping Lemma especially useful in differentiating nonregular languages from regular ones. I also realize that definitions and preconditions need to made crystal clear when using these kinds of theorems.

I then read the source code of FA.js and serializableGraph.js written by Sung-hoon and Martin last summer. There is no available documentation so I had to go through each of the functions to see what it does. They did an amazing job with the finite automaton class and I think all the functions I would need are already provided by them. Comments are nice too. With this new experience I improved the demo using their class. I am still having a little trouble understanding how FAEditor is implemented, but I should be able to figure it out in the next few days.

I also read the thesis by Ian. Formal reference and summary are below:


McMahon, I. C. Improving the Capabilities of JFLAP: Creating Effective User Interfaces in Learning for Theoretical Computer Science. Retrieved from

Ian first established that automata and formal languages theory are very important topics in computer science. Then he introduced the software JFLAP. JFLAP through over 20 years of development, is a mature software with widespread use. The author comprehensively improved the functionalities of JFLAP 7.0, such as boosting the user interface experience, adding useful buttons and inner structure improvement. This thesis tells me that user experience as important as functionalities in software development, and I will remember that during the development of online version of JFLAP.


I also read a little documentation of underscore.js. I realize that it can be used to simplify code in JFLAP development. It is heavily used in FA.js so it is essential to understand it.

Day #2 on JFLAP

Here’s the blog post I wrote for day 2 on JFLAP.

Today I read sections 3.2 and 3.3 of the Linz book. I understand the relationship between regular expression, regular language and regular grammar. I now know that they can be transformed to one another. I still not quite understand the proof for Theorem 3.5, specifically about the part where the author mentions the reverse of regular language. I did some more exercises relative to the material. Besides learning about the theories, I also learned more about JFLAP software usage. By following the tutorial on JFLAP tutorial, I now know how to transform NFA to DFA, minimize DFA and also transforming DFA to regular grammar and regular expressions.

I then read the independent study thesis written by James Cho last summer. Formal reference and summary are below:


Cho, James. Integrating JFLAP into OpenDSA. Retrieved from

In this paper, the author first established that algorithm visualization (AV) is tremendously helpful for data structure and algorithm (DSA) education. However, instructors find it time-consuming to integrate AV into their lectures. Therefore, some pioneer professors found the project OpenDSA which aims to create DSA educational softwares for computer science classes. There have also been other projects such as JHAVE and JFLAP, but they both require the installation of Java, which sometimes cause security and software compatibility problems. Due to such need, the author tried to integrate JFLAP into OpenDSA project to help with DSA education.

The project depends heavily on JSAV, an open-source JavaScript Library that supports the creation of algorithm visualizations. This allows JFLAP to be rewritten in html/css and JavaScript, which ideally makes it compatible to all devices and browsers. The author first created a prototype of DFA machine in Java and then rewrote the program in JavaScript with the help of JSAV API and Raphael library (a drawing library). As a result, the demo is able to let users follow how a string is processed in a DFA and view the result of acception or rejection.


This project indeed helps with OpenDSA development, but limitations abound. The most worrying limitation would be that the exercise is fully hardcoded, which makes it completely unable to provide a different DFA machine. Although part of JFLAP function is moved to web version, the project is still unable to support mobile devices for now, which was one of the main goals of the project. There are also some graphical limitations. During my internship this summer, I hope to overcome these challenges.

I then read the documentation for JSAV and also code written by Sung-hoon Kim last summer. Then I built this small demo as practice. I notice that Sung-hoon is using the function jsav.ds.fa to instantiate a graph. However I did not find that in the documentation and used jsav.ds.graph instead. One challenge that I encountered was nodes collapsed onto one another. This was resolved by calling graph.layout();. The simple demo can toggle highlight after mouseclick.

The demo that I built today is located on the very server that I am using WordPress, just under a different directory.

First day on JFLAP project

Today is my first day working on JFLAP project! JFLAP is an educational software that teaches students about automata and turing machines etc. As instructed by my supervisor, I created a blog here. I’m just going to copy and paste what I write there to here daily.

Here’s my first day blog:

Today is my first day of working on JFLAP, and I actually did quite a lot. I got two books in the morning: Formal Languages and Automata by Linz and JFLAP by Rodger and Finley. I finished reading the first two chapters of Linz’s book. The first chapter introduces some basic concepts that include language, grammer and automaton, while the second teaches me about deterministic finite automata (DFA) and nondeterministic finate automata (NFA). I learned that these two automata may seem different, but they are able to transform to one another.

I then downloaded version 7 of JFLAP and tested the software following the JFLAP intro book. The software is very easy to use and since I read the chapters in Linz’s book, the graphs were familiar to me. I find that there are also many other features besides DFA and NFA. Hope that I can learn about them later in the summer.

In the afternoon I was given access to a server. To my frustration my account is not a sudoer, which means for now I can only build this blog with html and css. I will see if I can install wordpress later. That will make this website much prettier. In either case there will be many changes to this page for sure.

A lot left to learn, wish myself best of luck.

Blog Post System using PHP

Today I would like to talk in a little bit more detail about my blog post system written in PHP.

The main page looks like this:

Screen Shot 2016-05-08 at 5.08.49 PM

First, the database structure:

Screen Shot 2016-05-08 at 5.28.27 PM

The structure is actually pretty straightforward: one table for user authentication, one for posts and one for comments. For user authentication, password hashed with md5 is stored in the database. When the users attempt to log in, their hashed input and the one in the database is compared, a traditional approach. For each post, two main pieces of information are topic and content. They form the body of a post. Author is stored simply as the username. Date is stored as a formatted string instead of UNIX timestamp because somehow I could not get that to work :(. For comment, its associated post is stored as articleId. When I present the comments of each article, I query the database for this articleId. This might be slower than other methods such as keeping references, but since I’m not storing a million blog posts, this works just fine.

Recently I finished paging and comment system. For paging, I first query the post table and get the total number of posts. Then according to articles_per_page variable set in config.php I query the table for more times with a LIMIT to present posts only for a specific page. Page index is given with a GET request. If there is not such information in $_GET, the default value is set as 1, obviously.

For now, comments can only be viewed after you click on each single article to see the details. At the bottom of the article, I query the comment table to look for the articleId. A helper method does this and returns the comments as an array of objects. I then simply use a loop to traverse the array and echo them out on the page.

Posting comment is a little bit different: the post request is handled by another php file which does not present anything. After storing the comment into the database, the script routes back to the earlier article. In the POST request, only content is passed. articleId is passed with the super global variable $_SESSION. I’m not sure if this is the best way, but it is surely easier to write than the curl method that I found online.

Several problems I encountered:

  1. For creating the post, not only do I need to verify the user is logged in when the page is presented, I also need to verify when the post request is received. Because softwares such as Postman can easily create a post request and flood the database.
  2. For frontend, I find that the CSS argument clear: both is amazingly useful. I used float a lot for my page design, so a lot of times I want to keep divs stable.
  3. Typo is a bitch, especially those inside double quotes. When coding on a server there is no nice IDE that reminds me there is a grammar mistake or a typo, so I really need to be careful about these. Sometimes one typo took me twenty minutes to debug.
  4. Security. When I gave my address to my friend to test it. He hacked the site with simple javascripts easily, which forced me to filter any input that the users are giving to the site. Now I blocked the word script completely, so evil people cannot alert me every time I get on the blog.

Things that I will be working on:

  1. Keep user input in session. In my project, when the user hit “comment” or “post” but they are not logged in, they are directed to the log in page and directed back but the input is lost. I definitely don’t want them to type all over again, so caching inputs is a good idea.
  2. Move log in/out to the main page as a small popup. Right now when the users click on login, they are directed to another page to put in their username and password. However, keeping them in the same page will save users’ attention loss.
  3. Adding styled text and images in post. Maybe I could add some buttons so the users can upload images for posts. I have to be careful though because some users such as my friend could upload bad things to my beloved server.

That’s pretty much it. I am just done with my finals yesterday and good news is I got a perfect score on the algorithm final! Yayyy. For this summer I plan to learn more about iOS and building projects with PHP, Swift and maybe a little Javascript. My friend told me modern websites are mainly written with Javascript so I want to learn about that.

It’s been a while

Yes it has been a long time without a post on here. To be honest I spent most of my spare time on League of Legends. This evil game…

It’s almost the end of the semester and I still have three finals left. Other than school, I learned some php, some Node and also a little bit iOS and Watch OS. I built this blog post system using php and am still updating it. I plan to introduce following features: editing posts if logged in, adding timestamp and author info, and display posts in separate pages. These will take some time but it will also be fun along the way!

I also ordered an Apple watch a couple of days ago. Hope that I can build some interesting apps with it! Maybe I’ll build a watch version app for Duke CSA, but it will be hard for sure.

There’s always so much to learn and so little time.