Author Archives: Tony

{Code}

ReactJS – Componentize all the things

Posted on by Tony
07
Jun

Been taking a look at ReactJS over the last few days, which is an interesting view library from the folks over at Facebook.  What I really like about it so far is the “componentization” of  objects on a page.  The general idea being,  any part of the page should be able to stand on its own.  Think widgets.  In theory this is a nice idea until components need to interact.  For example, a list of items with a search box that filters the results.  Component 1 is the search box, Component 2 is the list of items.  In the traditional MVC pattern, the controller would be responsible for handling this interaction.  In react, you would create a parent component which would handle the passing of state change to the list component.  It doesn’t really matter what the parent component is, just that its children are the list and the search box.

Considering the issues I have with the traditional MVC pattern for front end web apps, I’m interested in how this approach by ReactJS performs in the real world at scale.  Especially on very interactive web apps.  In past large web apps, I’ve used an event bus to facilitate the communication between components and thereby reduce tight coupling.  My initial concern is that there will be hooks and callbacks being passed through each component in ReactJS, making the code a challenge.

Time to dig in and see the real world results.

{Code}

Prototypal inheritance of Instantiated vs Non-Instantiated Objects in Javascript

Posted on by Tony

I recently read The Principles of Object-Oriented JavaScript by Nicholas Zakas and was enthralled by his patterns for prototypal inheritance of both instantiated and non-instantiated objects.   As I put each of these patterns to practice I noticed an interesting “discrepancy” between the the way each was linked to its parent.  I thought it was interesting enough for me to dig into, so it might make an interesting blog post.

Example 1: Instantiated Object Inheritance

In the example below, we create our parent class “Animal” which is created via the function method.  We attach a simple method to the prototype which retrieves the private “species” variable.

Then we create a “Dog” subclass by creating it via the function method, then linking the two classes with

Dog.prototype = Object.create(Animal.prototype);

This overrides the default Dog prototype with the Animal prototype, resulting in the correct prototype chain.  Here is a very abbreviated version of the prototype chain.

Screen Shot 2014-05-14 at 4.43.33 PM

Note the very important constructor attachment required after we override the prototype.

Dog.prototype.constructor = Dog;

Pretty common sequence to chain these two classes together.  Any changes made to Animal will get automatically chained to Dog.  Now let’s take a look at the non-instantiated example.

Example 2: Non-instantiated Object Inheritance

In this example we’ll use a IIFE (Immediately-invoked functional expression) to create our parent class, with our retrieval function as above.  This pattern is common for singleton type use cases.

Now notice how we chain the prototypes of the Animal and Dog classes, specifically what is passed to the Object.create() function.

var myDog = Object.create(animal);

No mention of a prototype!  Why not?  Why are we attaching the object itself instead of its prototype?

The reason is because of what Animal is in this second example.  In example 1, Animal was created via the function literal resulting in an object with a full prototype chain inherited from Function. In the second example, animal was created via the inline object declaration “{}” resulting in an object with a prototype of “null”. To put it shortly, an object only has a prototype property if it was created via function literal.

Screen Shot 2014-05-14 at 4.43.40 PM

So if you called the following code, you would get a big fat error because animal has no prototype property.

var myDog = Object.create(animal.prototype); //TypeError

So in example 2, the Animal object itself is what gets chained to myDog. MyDog  can now add its own methods without modifying the original Animal object.

 

Uncategorized

Importing Issues from a CSV file in Youtrack

Posted on by Tony

Don’t get me wrong, I think YouTrack is a great tool. But when it came to importing data from my old bug tracking tool to YouTrack, I was banging my head against the wall. Their current instructions are lacking examples and the whole process seems to have holes. So for anyone looking for CLEAR instructions with examples on how to import data from a CSV file into YouTrack, here it is:

1.) Download the latest version of YouTrack’s Python Client Library and unzip it.

2.) Make sure you have Python installed on your computer

3.) Copy this blank CSV file to <unzipped library directory>\python\csvClient

4.) Add all of your data to the blank CSV file mentioned in step 3.

  • If you need to add new columns, make sure that the name matches exactly what’s in YouTrack. E.g. “Estimation” in the CSV matches with “Estimation” in YouTrack
  • The “Issue Id” column should just be auto incrementing numbers
  • The date fields must match the format specified in the “youtrackMapping.py” file mentioned below.  Feel free to update your file if needed

5.) Overwrite the “youtrackMapping.py” file in the <unzipped library directory>\python\csvClient directory with this one.

6.) Execute the following command from the <unzipped library directory>\python\ directory

python csv2youtrack.py csv_file youtrack_url youtrack_login youtrack_password

Here’s what mine looks like python csv2youtrack.py csvClient/import.csv http://test.myjetbrains.com/youtrack youtrack_login youtrack_password

7.) The script will probably take forever to run, but give it time.  If it error’s out, I’ve listed some common errors and solutions below.

Common Errors

Traceback (most recent call last): File "csv2youtrack.py", line 140, in main() File "csv2youtrack.py", line 20, in main csv2youtrack(source_file, target_url, target_login, target_password) File "csv2youtrack.py", line 31, in csv2youtrack source = Client(source_file) File "/Users/tony/Downloads/youtrack-rest-python-library-master 2/python/csvClient/client.py", line 8, in __init__ self._header = self._read_header() File "/Users/tony/Downloads/youtrack-rest-python-library-master 2/python/csvClient/client.py", line 11, in _read_header header = self._get_reader().next() _csv.Error: new-line character seen in unquoted field - do you need to open the file in universal-newline mode?

This occurs when the newline characters in the csv are ill formatted, usually due to Mac OS.  Resave the CSV using Unix or Windows line endings.

MTG, News, Site Launch

MTG Scavenger v3.0 Launched!

Posted on by Tony

promo_800

Introducing the completely rebuilt MTG Scavenger. Everything has been rebuilt from the ground up to provide a faster, more responsive user experience, tuned to exactly what you’re looking for. One of the biggest new features that’s been added is the ability to add your own custom card values. So if you feel the current card value is too high, you can change it!

Wait! What is this?
I built this to find cards ending soon on eBay, trimming out all the “fat” and showing only cards that are under valued / under priced. There are a ton of filters, so you can hone in the results to exactly what you’re looking for, then save/bookmark your filters to check in on only the auctions you care about. Basically it saves you tons of time, giving you a competitive advantage on buying magic cards.

http://mtgscavenger.com/

New Features:
* You can now set YOU OWN card values/prices
* Responsive design works beautifully on mobile devices
* Cleaned up interface put the most important information up front
* Improved search results
* Faster load times

Coming Soon
* Set custom pricing in other currencies
* Get notified when a card is ending below your custom price
* Lots more!

The site is in beta at the moment and is by invite only for now. If you’d like to get in on the beta, here’s a few invite codes to get you started. If these run out, ask a friend or hit me up. I’d also like to hear your feedback so feel free to contact me, tony@mtgscavenger.com. Cheers!

MTG, News, Site Launch

A Powerful Tool for Finding Amazing Deals on eBay

Posted on by Tony
24
Mar

Alright, I’ll admit it.  Even after 15 years, I’m still a huge fan of Magic the Gathering.  I love the game and I’m a huge collector.  So, like any other person looking to collect, I’m on eBay alot. But the problem with eBay is that I’m never quite sure what’s a good price for an item I’m interested in.  I’ve done the long, drawn out task of looking through completed listings, but it’s simply not scalable.  So, utilizing the WorthMonkey and eBay APIs, I created a “filter” for magic cards ending within the next 4 hours.  This filter shows the card auctions alongside their average selling price, so that I can quickly look for deals and know exactly how much I should bid to win.  I’m on this tool all day long and if your interested in giving it a try, it can be found here:

News

Killing It at AngelHack 2011 ~ San Francisco

Posted on by Tony
06
Feb

Having taken a recent interest in behavioral analytics, I devised a perfect hackathon project. The idea was simple; bring behavioral analytics to the masses by building a super lightweight platform with brain dead simple RESTfull event calls. Once the hooks were in place for any given website, we could monitor the site’s usage in real-time to alert the owner in the event of abhorrent behavior. Given that most website owners’ see their site as a black box, this product would give them huge insight into how their site is being used and abused. In addition, it would provide an audit trail for determining where vulnerabilities exist in the business logic layer. Already teamed up with Ben from Box, I discussed the idea with him and he, having a passion for security as well, was stoked. Later that evening, we begin thinking through the details of the platform. 

The morning of the hackathon we pulled together the final details of the project. We set up a server with the usual LAMP stack and memcache for speed. We utilized the Yii framework to facilitate the mundane aspects of creating a new website (Active Record, MVC, etc) and finalized the design of the database in MySQL. We left the designs until last because our main focus was creating an actual platform that would be demo-able in 24 hours. In the end, our final design resembled a standard dashboard with a “twitter” feed of hack alerts.

At 5 pm, the contest began and we immediately set to work on creating our platform. We had loaded up on sugar and caffeine, so we were amped up and ready to roll. Ben took the database implementation, creation of the models and set up of the REST hooks. I took the creation of the AJAX hook code, implementation of the dashboard and hooking the final pieces together.

The implementation of all pieces continued throughout the night with continued doses of caffeine and sugar. We began to see that our concept was too ambitious to complete in the time allotted, so we scaled back to only what was necessary for the demo and to illustrate the feasibility of the idea. This scale back ended up saving us in the end as we finished the implementation with 30 minutes to spare.

The long night was over and the presentations began at 6 pm. With over 35 teams competing, it took over 2 hours to get through all the presentations and there were some fantastic concepts being put forward. Ben and I were still enthralled with our own idea, but began to have doubts if we could truly take any award home. One after another the presentations continued. At 9 pm, it was time to announce the winners.

With great acclaim and response from the judges, our team won first prize to a roomful of applause. We had successfully killed it at the hackathon.

Check out the site here: bluedragonsec.com

Ben Trombley and I after winning the hackathon

{Code}, MTG, News, Site Launch

Extract All Images From a Webpage

Posted on by Tony
08
Jan

I occasionally read through discussion boards that show off various artwork, but often find myself sifting through pages of text till I finally find the images I’m looking for.  So rather than continually sift by hand, I build this tool to ease the process.

DEMO

Here’s how it works. First off, rather than download all images to my server and sort them out there, we simply generate a new “lens” on the existing page, then let the client’s browser verify the images in javascript.  Once we have the images loaded, we can remove all images smaller than 120×120 pixels (avatars and such) and display the results in a easy to view format.  Lastly, we show the original size artwork scaled down, so that we can easily “right click to save.” The other feature I threw in was the ability to navigate by pages, so if the discussion board your reading supports paging, the extractor should figure it out and let you view pages by using the right and left arrows.