This time, I am going to post about a bit of troubleshooting with GalliumOS in my Chromebook. A little detour from my regular NextBus Compare project progress posting. This is more about working with developer tools, I guess.
I don’t actually use Chromebook that often since most of my work is on Macbook. As a result, it is not charge everyday. A few day, I forgot to turn it off. Left to its sleep mode, the battery completed drained itself.
If I just have ChromeOS, it wouldn’t be a problem – but my system is dual-boot with a Linux OS. GalliumOS to be precise. To boot into GalliumOS, I typically just do a simple Ctrl-L. But this time, there is an angry, angry beep and no boot.
I am almost certain it have to do with the battery drain, but what happened?
A bit more research on the documentation and GalliumOS reddit revealed that because the crossystem flag used for booting is a firmware level setting, it is therefore stored in volatile memory. When there is a complete drain, there is a possibility for the flag to be lost. To solve it, here are the steps:
Boot into ChromeOS – yes, not GalliumOS, but ChromeOS. We need to access the developer mode! Usually, the command for ChromeOS booting is Ctrl-D.
You may have to configure wifi if it is not set up. My Chromebook still remembers it, so it was good to go.
Do a Ctrl-Alt-=> (=> is the right arrow on the first row your keyboard) – to boot yourself into the developer terminal.
Enter chronos as username with no password.
Enter sudo crossystem dev_boot_legacy=1. Some guides online may say dev_boot_usb, but as the GalliumOS documentation mentioned, that flag is not related to legacy boot issue. I should know – I tried it!
For today, I started working on the actions file with redux’s own action documentation as reference. It seems their sample tend to favor seperating actions types and action creators into different files, but I think I favor keeping them one file for now so it is easier for me to keep track of things. I only have 3 actions types and 4 action creator for now anyway.
I also using redux’s Writing Tests doc, so the action creators are tested. I didn’t work on the fetchJSON() one though, because there is a fetch() there, making the action create async. The doc do have a section for async action creator, but I think I will do that next.
While I love volunteering at Sunday Streets as route captain, when the event is hosted at Alamo Square, my leg muscle does not love it.
For those who don’t live in SF, Alamo Square is on quite the hill. Sunday Street is an open street event, so the only way to travel long distance is by bicycling. As a captain, I was going back and forth several times to check up or resolve issues the whole day. Got plenty of exercises and vitamin D – but also got plenty of muscle sore to last the week.
I didn’t got much done on Sunday, and I pass out from delayed tiredness on Monday – thankfully I don’t have work that day. Naturally, there were no post updated yesterday. I am somewhat recovered today, so here’s some updates:
Prismatic to CodeColorer
After the last few post, I realize I really would like to post the codes I wrote without having to take a snapshot picture each time. It is probably best to go with a WordPress plugin for code snippet display, possibly with syntax highlight. There are several in the market.
Prismatic seems like a popular one. It was recently updated. Documentations and options are rich. Reviews are quite positive.
Sadly, the plugin didn’t seem to work.
Using Firefox’s Inspector, I notice that there are inline css that overwrites the styles for <code> and <pre>. I suspected it was the Edit CSS feature of Jetpack. Jetpack’s CSS tends to be loaded later in the process, so it have a higher risk of overwriting other plugins.
Unfortunately, I don’t fancy removing my Jetpack plugin. I did attempted to increase the loading order by turning the minification off using Jetpack’s own filter – jetpack_implode_frontend_css -, but it didn’t seemed to have any effects. Trying to unset CSS in the child theme’s Editor and Jetpack’s Edit CSS didn’t work either.
In the end, I just tried another plugin called CodeColorer. Now, that one works! I had to change some of the CSS to correct width issues with the line numbering column, but once that’s done, it works fine!
After some thought, I decided to start a new repo instead of sticking with my old Nextbus Compare repo. I am starting from scratch, so it is more of a rewriting a new app instead of a refactor. Create a new repo for a fresh start makes sense and would be much more simpler. The new repo will be Nextbus Compare V2!
So, create-react-app got started, testing environment is set up, directory is organized. Time to write more code than just test placeholder files.
It’s been over a month. so my memory of Redux is a bit blurry – but it’s ok, redux.js.org to the rescue! Reading their Todo List example and some of my old codes jogged my memory.
Here is the latest directory structure, with all the new files in. At the right is the current state of action creator, action.js.
There is also a basic combineReducer in reducers/index.js. So far, the test file just check that the files in the components are outputting div. For now, I am mostly just setting up some empty functions.
So, I was creating the directory organization for NextBus Compare. Looking at my previous sketches of possible file structure for my project:
plus being so new to Redux, I am going to stick with the tradition method of organizing it by function/nature. For those who want to read about React file organization, there are 2 articles that I found useful:
They each called the typical organization method different name – function or nature centric. François also advocated for what he called a domain-centric approach, while Mikey went with a feature-centric approach. I have personally done domain-centric before, and did like it quite a bit. For this one though, I am going to play it safe because my focus is to learn Redux here.
So here is my current file structure:
Task Two: Writing Test Files
Once there are new files, I tried to write test files to make sure all the files are loading, even though they only load empty div at this point.
Then I slowly realize that every googled posting for Mocha/Chai/Enzyme seemed to have different but very similar syntax. Therefore, I have a lot of tabs open but is very confused.
Eventually, I just close every tab, and search for the documentation for Chai and Enzyme. Restricting my reference source made it easier. Here is one of my test file:
There is a saying. Job hunting is a full time job. God, were they correct. I have been splitting my time between reading postings, researching companies, applying jobs, updating job site portfolios, interview prep, code testing (recently did a React app in 5 days), networking in-person and online, helping out at startup Sponsorlane, and still staying updated with tech news.
By the time Labor Day rolled by, I realized I haven’t worked on my side project involving Redux and mocha for over a month! Not to say I haven’t learn anything – I have been studying algorithm and design pattern. My debug and Node skill have also noticeably improved thanks to my effort in Sponsorlane. But I set up the goal to learn Redux and mocha months ago, and I want to finish what I started, damn it!
Thus, I am setting a new goal. I am going to re-start my app, Nextbus Compare. A fresh start. This time I will record my process: I will update my app one day, and post the process the next day.
So, here is Day One! The topic is:
Create-React-App with Mocha and Enzyme – with No NPM Eject!
The last time I tried to do this, there were multiple different sources of guides, most of them either confused me with too many steps or didn’t worked. I ended up doing npm eject. I also wasn’t what I did and what package I installed to made it work. This time, I am much more prepared. So, here is what I did:
I started with Dave Schinkel’s blog post, Mocha + Enzyme with create-react-app. It is a good read, although there are some things that don’t work with my system. Here is essentially what I did.
Since I don’t have yarn installed and babel-preset-react-app kept giving me import errors, I did npm install –save-dev es2015 babel-preset-react preset-stage-0. While Dave stated es2015 is ignored by create-react-app, I ended up needing it. The use of babel-core compiler later on resulted in import error because babel-core don’t recognize jsx. As a babel newbie, I don’t know why my outcome was different. I just know that babel-preset-react-app doesn’t work on my system. Please comment if you know why……
Modify “test” command to: “NODE_ENV=development mocha –compilers js:babel-core/register –require ignore-styles src/test/*.spec.js” . Note that in Dave’s post, his test command is missing the double quotes. Not a big deal, but if you were a Node newbie like me, know that double quote is required! Also, there is an additional –require ignore-styles here. That’s because if I don’t, babel-core will try to compile css files as js files, therefore triggering “unknown token” errors:
There are ways to bypass it, but I don’t plan to test my styles at this stage, so I am just going to do a simple –require ignore-styles in my test command line.
For testing, depending on if you also want chai or sinon, you would do npm install –save-dev mocha enzyme chai sinon react-test-renderer. Note that react-test-renderer is a a dependency requirement for enzyme. Without it, you will get this error message:
Here is a very simple test script I did in src/test/App.spec.js:
Mainly, the issue was node-gyp. Node-gyp is a command-line tool written in Node.js for compiling addon modules for Node.js. It bundles Chrome’s team’s gyp project, which helps with cross-platform issues. Alas, the tool itself ended up causing its own issues!
For me, there are two problem:
It does not support Python 3.
It needs make – a build automation tool – with its variable CXX set to proper C/C++ compiler toolchain.
In my case, my system’s default Python is 3 and the CXX is not always set to the right toolchain. So, first remove the local directory’s node_modules folder if you did a failed npm install earlier, then input this in the command line:
“Damn, those kids are smarter than me!” I whispered to Jessica, who laughed and playfully slapped me in the arm. We watched in awe as the kids – middle schooler going to high school – talked about wanting to build their app in Java and the algorithm involved (“I didn’t know computer existed when I was in middle school!” “…We sound so old!”). The joy of hackathon – you see all sort of ideas and participants.
I was at DocuSign HQ for Hacking for Humanity, hosted by Girls in Tech and Hackbright and sponsored by DocuSign, Cisco, Kintone, Handshake, Memebox, and JINS. Topics we can select may include Homelessness, Sexual Assault, Domestic Violence, Human Trafficking, or Women’s Health.
The host decided to assign us into teams in advance. Like all events though, we have a bunch of MIA attendee – Missing In Action. So, those us missing members waited in line for reassignment. While there, I started chatting – which led me to me be invited into another team before the re-assignment.
We started as 4 person team – UI/UX designer Jessica and Tawny, software engineer Anoja, and myself as web developer. The host wanted a 5 person, so they assigned us Ryu, engineer and Kintone evangelist visiting from Japan.
Opening talk took the whole morning – Hackbright even did a Coding 101! For me, the most interesting part was listening to SF Safe House and Women Inc’s work and mission.
Since this hackathon didn’t have idea pitching, our team are formed without a project idea or even a common topic interest. My team eventually decided to go with Women’s Health: HerCare, a web app that extracts SFGov Opendata and list nearby free health care clinic, then help user to easily find transportation route.
Styling in React
fetch() and Component Lifecycle
For some reason, console.log revealed that the state is not setting with the data I retrieved in fetch() when I use the OpenData API. Looking into React’s fetch(), I learned that it returns a promise that must be waited. Meanwhile, render() is also setting state and mounting. To ensure the state are set in the mounted component befire re-rendering is trigger, API calls with setState() should be done in componentDidMount().
Latitude & Longitude via Google Map API
While trying to get Google Map working, I spent too much time on the wrong npm packages. I had picked one of the recently updated one with a simple example, thinking it would be a snap.
Fortunately, when I finally switch to a different one someone recommended in Reddit (react-gmaps), it worked almost right away. After that, I needed to get the latitude and longitude by address – regular user obviously wouldn’t be entering their latitude and longitude.
Having been working with bunch of npm packages lately, I jumped onto the npm-package-solution again. Silly, since it turns out Google have an API for that.
*Sigh* The precious hours… Almost submission time!
Controlling State Updates via componentWillReceiveProps() & componentDidUpdate()
When users clicked on the parent component, LocationList(), which holds the address, it should updates the child component, GoogleMap(). The update involves calling the Google API that detects latitude and longitude.
So, another API call. I would use componentDidMount(), right? I mean, the React doc say so itself:
If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
…yea, didn’t worked. The question is why?
Well, the thing is that the map component (GoogleMap in this case) was first mounted, then its states changes when the parent component (LocationList) holding it passed down a new prop that activates an update – not a new mounting. What I need was componentDidUpdate().
But when I did the API call in GoogleMap and use setState to update the states with latitude and longitude data, the component itself will update, again.
This is an infinite loop.
That’s where componentWillReceiveProps() came into use. I set up a flag variable, “updated”. In the constructor, it is initialize as false. Inside componentDidUpdate(), an if statement checks the flag. If false, we do the API call, setState, and set “updated” to true. After that, the subconsquent update from state change will not activate another API call because the flag variable is now true. Only if the component receive new props from the parent component LocationList(), – in another word, someone click one of the address listing – would the variable “updated” be set to false and thus activate the API call.
Deployment on Heroku
Unfortunately, I didn’t solve the infinite issue until after the submission. Fortunately, I have continuously deploy my site onto Heroku. Deploying React onto Heroku is acutally a snap. The Heroku team have a instruction page just for that: Deploying React with Zero Configuration. I do have do a npm run build to get it running, but after that, it’s smooth sailing.
The challenge of this competition was definitely communication and task distribution. It was a bumpy ride, but we eventually find our rhythm. Both Anojo and Jessica was inspired to do more hackathon, so I recommended July’s AngelHack in Silicon Valley to them – we will probably bump into each again as a result!
I managed to snatch a free ticket for the 2017 AngelHack, so I was off to another hackathon!
My team and I created HackGen, which grabs DevPost data and displays winning hackathon idea randomly, often resulting in quite hilarious results. Seriously, my team spent a good portion of time after code freeze in laughter. Some people’s hackathon idea makes no logical sense. I can only deduce that they wrote it after a long all-nighter and did not presented their project that way on stage.
For this hackathon, I participated predominately in the front-end features, making sure the data that my teammate, Ting-Wai To and Michael Snowden, are displayed in an aesthetic, user-friendly manner. Consistent with my coding habits, the site uses responsive design. The languages I used included HTML, CSS, JS, Ajax, and jQuery. The framework we used was Django. We started trying to host the site on AWS, but ended up using Heroku. The VCS was Git on both Github and Heroku. Our project works with Amazon Echo and also allows visitors to subscribe by using the SparkPost API.
The site started with the name HackPredict and was supposed to predict the chance of success for an hackathon idea:
However, the collected data wasn’t enough for an accurate prediction. No matter what was input, the result remained between 40%-50%. Eventually, it developed into an idea generator:
And this is its final outlook:
Now, for the struggles and lessons:
In this case, I was reminded that Anaconda and Virtual Environment don’t play well together. My team had a lot of trouble. I was able to solved it by doing a simple conda install python=2.7.8. I think it helped that I have previously set up everything to work once already last month while working on a Slackbot with Django as backend. All I needed was to switch from Python3 to Python2.7. The other guys sounded like they had bit more trouble.
I also ran into trouble with static file management in Django, which according to Michael, is a common problem. When Ting-Wai wanted to use Bootstrap with static url, Michael and I were all going “No! Just CDN it!” Yea, we didn’t get along with it.
Ting-Wai apparently hates the Bootstrap progress bar, but Michael really wanted a progress bar. So, I went with a customized dot progress bar. Fortunately, while I know Bootstrap, I often practice coding in raw CSS to build my foundation, so it was easy to whip one up:
My teammates were surprise that I didn’t use Bootstrap at all for the site. I actually did started with Bootstrap, but I wanted more customization on the input and buttons. Besides, almost everyone use Bootstrap with very few customization in a hackathon, so why not take a different approach? For a small site, raw CSS is pretty easy.
I also had trouble once my teammate set up mysql with Django. I first got “Did you install mysqlclient or MySQL-python?” error, which persisted even after installing those packages. Following online suggestion, I homebrewed mysql-connector-c, which turned out to be a Python3 suggestion. I got a “Segmentation fault 11” error and wasn’t able to do a runserver at all. I uninstalled mysql-connector-c and looked up for new solutions. The golden solution:
*Sighs* I swear, setting things up probably took more time from my team than coding. I am not the one in charge of set up, but I can tell by the way my teammates acted. If this is an anime or cartoon, they would probably had smoke coming out of their ear. One of them rushed to a couch for a nap right after demo. There were a lot of demos too. The hosts had to divide us and the judges into 2 rooms, and I think we were the last few teams to demo.
I got to brush up on my front-end skill during that weekend and hang out with a lot of cool people. Got a bunch of nice goodies:
Amazon have notebook, t-shirt, and ninja sticker – who don’t like ninjas!? IBM have cool hexagon sticker and external usb port, the later of which I totally need for my Chromebook (only 1 usb port there). SparkPost is my favorite since I am a sticker collector: they have grid notepad and awesome stickers. Apparently, they have all the languages they supported sticker-ify, plus one more design for our beautiful Golden Gate Bridge!
All in all, it was a good hackathon, with awesome people, good amount of API challenge choices, cool goodies, healthy food and plenty of coffee, and a lot of fun demos and ideas.
We started off with the Lightning Talks, and the first one up is Joshua Nelson from Atlassian. His original topic line is “Component libraries and React as a platform”. The final version of his topic? “Why Lego is Great”!
Lego have a rich history and culture, which Joshua started his talk with and eventually turned it around to Atlassan’s component library, discussing its 3 key advantages: Clean API, Reusable, and Platform.
Then Michael Leung and David Katz talked about their Reactathon project. Utilizing the OpenTable API, their project BrokenTable determines which bar is most likely to have bar fight.
Yep, bar fights.
All while the developers are students too young to even step into a bar.
Needless to say, the idea was hilarious, and the duo succeeded in giving a presentation that was both funny and educational. I particularly enjoyed their presentation of how their code works and how they implemented React Native and Redux in the fast-paced environment of a hackathon.
After a brief break, Feature Talks started, with the first one being on of my main goal for attending this Meetup: “Going GraphQL First on Web and Mobile” by Jon Wong from Coursera. I am considering GraphQL for the next on my to-learn list, so this is perfect timing!
Jon discussed about the task to implement GraphQL in an existing project – a task he found similar to what Justin Bachorik mentioned in the Reactathon talk regarding NPR’s transition from legacy code to React. Both are accomplished through the process known as incremental adoption.
Speaking of, I have been studying Redux, and I don’t envy the future me that will eventually adopt Redux for my React project. Incremental adoption indeed.
Jon touched on how Joshua talked API contract earlier in the Lightening Talk and stated that GraphQL inverts API contract back to client, who is the the one to actually build product. Such schema-first approach helps create better contract.
For someone planning to learn GraphQl, his description is helpful in giving me an idea of what and why I should learn it. His diagrams also did a great job in graphically representing how GraphQL works with React’s Component-focused system.
The last but not least (oh, definitely not least) is Berkeley Martinez, CTO at freeCodeCamp. Perhapes a reflection of his work, he is quite excellent in teaching – seriously, I have zero clue of what Observables when I started. Yet, I wasn’t lost with the amount of codes he displayed, and I came out with a pretty good understanding. He was very good at being precise yet informative and to the point.
I must say, this Meetup was one of my most satisfying I had. Meetup that shows lots of codes and teaching materials can be dull if it is not a tutorial everyone can follow. Not a lot can be fun, inspirational, and technically informative. This definitely hits all the spots. I can’t wait to attend another one!