levlaz

Posts tagged: javascript

Do not Install Karma Globally

2017-04-15 12:00:07 ][ Tags: hacking testing javascript

Wow, I spent so long trying to figure out why the hell karma was not working for me, it turns out its because it was installed globally. For instance. In my projects package.json I had:

"scripts": { "test": "karma start karma.conf.js" } ...

When I ran npm test - it told me sh 1: karma not found Every other possible combination also did the same thing. i.e.

node_modules/karma/bin/karma

./node_modules/karma/bin/karma

node ./node_modules/karma/bin/karma

I could totally execute this myself from the shell, so I had no idea what was wrong. Then I finally stumbled upon this GitHub Issue. After uninstalling karma globally, npm uninstall -g karma I was able to run npm test without any issues. I still have no idea why this works or didn't work. But at this point I just want to go back to writing tests.

Javascript ES6

2016-08-02 19:10:25 ][ Tags: hacking javascript

I've spent more time in the last few weeks learning more Javascript. This has resulted in a whole bunch of random inconsistent apps, hacks, and scripts floating around GitHub authored by me. My go to resource whenever I want to get a better idea of how something works and what "good" Javascript looks like is Todo MVC. This is a great site that provides tons of sample code in essentially every flavor of Javascript. I was especially excited to see that they updated the examples in their repo to include ES6 examples in Vanilla JS. Another great general resource for me has been the Mozilla Developer Network site. Which provides really nice documentation and code snippets.

Starting to write Javascript today can be pretty overwhelming. There are so many different dialects, frameworks, tools, and practices. I like that ES6 took a bunch of the things that were missing from the previous versions of JS and made them more standardized. I hope that in the future we will be able to shed away some of the tooling around writing sane javascript since it will be included in the language (and more importantly supported on server and browsers) natively.

One of the most frustrating things is that a lot of the samples and StackOverflow posts that you see are riddled with anti patterns. So trying to find the proper way to do something can be a bit challenging. I hope that by continuing to standardize JS and develop best practices that some of the less desirable solutions will stop making the front page on search results.

I have been babeling, grunting, gulping, bowering, and package.jsonsing all month. It's actually kind of fun, I feel more confident being able to reason about how JS fits into the overall picture of my application and also how to structure more complex applications.

Hacking an Angular.JS game for Fun and (fake) Profit

2015-07-12 18:12:47 ][ Tags: hacking javascript

Last night I came across an interesting game called Giant Shaft Enterprises. In this game you play the role of a CEO of a fictitious company and the goal is to maximize your profits and reduce costs. You do this by performing business opportunities such as “Network with business leaders”, “Push the envelope”, and “Streamline workforce”. You also can hire employees, purchase buildings, establish various departments, and motivate your workforce with seasoned upper managers. The last thing that you can do in the game is purchase upgrades such as health benefits, electric car charging ports or allow upper managers to hold useless meetings. These upgrades maximize the performance of your workforce. All of these things make more money for your company and allow you to get achievements. This is pretty much like any other point, click, and wait game that you would find in the “Top 10 Free Games” section in an App store, but the difference is that this game does not take any real money from you. The game is very entertaining and kind of trolls the world. For example, buying more cubicles for your company provides a higher ROI than hiring additional upper managers. The game is also strangely addictive, I found myself clicking on the same button thousands of times to get more money and increase the profitability of my company. I must have played for a few hours before I began filling a bit silly for wasting my time clicking on a button. A few hours later not only was I feeling silly I was also beginning to get an repetitive stress injury in my wrist. That is when I realized that clicking on the button to watch my company sore to greatness was not providing me with the highest ROI. Then I decided to streamline my efforts and opened up the Chrome Javascript Console to see if I could outsource me clicking this button to a simple Javascript program. Luckily, this was pretty straightforward. The app is written in Angluar.JS and all of the various buttons that you click to do things are exposed in the DOM. Using JQuery you can access these buttons a simulate a click through the Javascript console that can be found in the Developer Tools of most browsers. For example, the button that lets you take advantage of business opportunities (and instantly raise more money) calls a function called doBusiness. You can select it, and send it a click() like this:

$('div[ng-click="doBusiness(opportunity, $event)"]').click();

You can also send it 10, 100, or 1000 clicks by wrapping this in a loop.

for ( i=0; i < 100; i++ ) { $('div[ng-click="doBusiness(opportunity, $event)"]').click(); }

All of the things that you buy in the game use the same function called buyStoreItem, but the individual items (such as employees, cubicles, and harware) are referenced by index. Using the similar method you can purchase things in various multiples by wrapping the function in a for loop like so:

# Buy Cubicle   for ( i=0; i < 100; i++ ) { $('div[ng-click="buyStoreItem($event, item)"]')[1].click(); }

I found that if I try to send more than 1000 clicks at once, the app tends to freeze and bomb out. Looking in htop, chrome is using up 100% of my CPU so it looks like 1000 is the magic number. Javascript is fast and it looks like it sends all 1000 clicks pretty much at once which confuses the app and makes it very sad. I realize this goes against the spirit of the game, but nonetheless it was a fun little exercise and games should reward cleverness. A full list of ~~Cheats~~ Synergistic ROI Optimizers is listed below:

# Giant Shaft Cheats   The lines below simulate clicks, to run then open up the Javascript Console (in Chrome this is Ctrl+Shift+i) and enter them. To change the amount of simulated clicks change the second value in the for loop ( i < 100 ) to something other than 100. Going above 1,000 will probably crash the app :)   # Do Business Opportunities   for ( i=0; i < 100; i++ ) { $('div[ng-click="doBusiness(opportunity, $event)"]').click(); }    # Buy Minium Wage Worker   for ( i=0; i < 100; i++ ) { $('div[ng-click="buyStoreItem($event, item)"]')[0].click(); }   # Buy Cubicle   for ( i=0; i < 100; i++ ) { $('div[ng-click="buyStoreItem($event, item)"]')[1].click(); }   # Buy Salary Employee   for ( i=0; i < 100; i++ ) { $('div[ng-click="buyStoreItem($event, item)"]')[2].click(); }   # Buy Hardware   for ( i=0; i < 100; i++ ) { $('div[ng-click="buyStoreItem($event, item)"]')[3].click(); }   # Buy HR Department   for ( i=0; i < 100; i++ ) { $('div[ng-click="buyStoreItem($event, item)"]')[4].click(); }   # Buy Accounting Department   for ( i=0; i < 100; i++ ) { $('div[ng-click="buyStoreItem($event, item)"]')[5].click(); }   # Buy Benefits Package   for ( i=0; i < 100; i++ ) { $('div[ng-click="buyStoreItem($event, item)"]')[6].click(); }   # Buy (Useless) Upper Management   for ( i=0; i < 100; i++ ) { $('div[ng-click="buyStoreItem($event, item)"]')[7].click(); }   # Buy Executive   for ( i=0; i < 100; i++ ) { $('div[ng-click="buyStoreItem($event, item)"]')[8].click(); }   # Buy Office Building   for ( i=0; i < 100; i++ ) { $('div[ng-click="buyStoreItem($event, item)"]')[9].click(); }

Thanks to this little hack I am the king of Giant Shaft Enterprises. Thank you to Eric Freeman for making this awesome game! **UPDATE 1: ** I was curious to see what the max number of clicks I could pass through was. I enabled logging to show me when the loop made the 100th click.

for ( i=0; i < 1000; i++ ) { $('div[ng-click="doBusiness(opportunity, $event)"]').click(); if (i % 100 == 0 ) {console.log('Click #' + i)}}

It looks like the app actually does not crash … but becomes super slow after about 3000 clicks. So to optimize ROI you should only cheat with around 1000 fake clicks at a time. **UPDATE 2: ** The final step of this was obviously to automate the automated clicks. Using Javascripts setInterval method, we can have the script run indefinitely. For example the following code, does 100 business opportunities every 3 seconds, forever.

setInterval(function() {for ( i=0; i < 100; i++ ) { $('div[ng-click="doBusiness(opportunity, $event)"]').click(); if (i % 10 == 0 ) {console.log('Click #' + i)}}}, 3000);

ezBadge v2: Now in Stunning Javascript HD

2015-07-11 17:56:30 ][ Tags: hacking javascript

If you have ever wondered what it looked like to convert an application from Python to Javascript, you are in luck. After finishing ezbadge yesterday, I came to the realization that the entire thing could and should have been written in Javascript. There is absolutely no reason for this thing to send any requests to a server in order to process the URL and render the markdown. So, I did just that. Introducing, ezBadge v2 [caption id="attachment_188" align="alignnone" width="500"]Screen Shot of EZ Badge Screen Shot of EZ Badge[/caption] After removing all of the Flask, I was able to create two Javascript functions that essentially did the same thing as the Flask app was doing for me.  The added benefit is that other than serving the initial HTTP request, I do not have to handle any additional requests and the entire thing now runs in the browser. This was a fun little exercise, and I think the Javascript version of this application is a bit more elegant. Rather than appending the template with Jinja as I was doing before, I am now spawning a modal (after doing some for m validation) and then using the Marked library to render the preview of the badge markdown. I could have done all of the UI stuff with Flask without any issues, but the fact that the entire thing now runs in the browser saves bandwidth, computing resources, and time. You can see the transformation for yourself in the ezBadge GitHub repo. In the next iteration of ezBadge I plan on adding more choices for the types of badges that you can make. If you have any suggestions please feel free to leave a comment here or open up a github issue.