Coding in Python in the Browser

Nov 20 2013

I made this video in the summer and Python Fiddle back in 2010. It is still the best Python IDE on the web running in a browser. So here is a demo if you’re new to Python:

No responses yet

Course Planner Book Links and Share Bar

Nov 17 2013

First up on the list is the bad news: the old share bar is permanently gone as Google has shut it down. That’s right! Google has shut down a competitor’s service after buying it. At least the meebo team is honest and left us a message:

Meebo was acquired by Google on June 4, 2012.

Our team is now working just a few miles down the road with the Google+ team, where we continue to focus on creating delightful experiences for our users, developers, and publishers.

Meebo’s products are no longer available, but you can find all the latest and greatest things that we’re working on at https://developers.google.com/+/.

Thanks,
The Meebo Team

Elsewhere on the internet, you can find news reports about the shutdown. That gives credence to the “Google is Evil” motto.

On the course explorer side, there has recently been a change to Amazon’s Ecommerce API, breaking code for getting book titles and URLs that I wrote several years ago. Basically, most of the responses returned changed from single item ones to

<?xml version="1.0"?>
<ItemLookupResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2011-08-01">
<OperationRequest>
    <RequestId>cd6bd87d-046c-4a07-a99e-16fc600ebe31</RequestId>
    <Arguments>
        <Argument Name="Operation" Value="ItemLookup"/>
        <Argument Name="Service" Value="AWSECommerceService"/>
        <Argument Name="AssociateTag" Value="yuguzhan-20"/>
        <Argument Name="SearchIndex" Value="Books"/>
        <Argument Name="Signature" Value="a6ZCkXLOYFw8xTYH8gaBl/K5YGeTlQdGxtDKwY2YuaU="/>
        <Argument Name="ItemId" Value="9780470392164"/>
        <Argument Name="IdType" Value="ISBN"/>
        <Argument Name="AWSAccessKeyId" Value="AKIAIZLBWTLA3LJJZ2MA"/>
        <Argument Name="Timestamp" Value="2013-11-17T19:21:08.000Z"/>
    </Arguments>
    <RequestProcessingTime>0.0220990000000000</RequestProcessingTime>
</OperationRequest>
<Items>
    <Request>
        <IsValid>True</IsValid>
        <ItemLookupRequest>
            <IdType>ISBN</IdType>
            <ItemId>9780470392164</ItemId>
            <ResponseGroup>Small</ResponseGroup>
            <SearchIndex>Books</SearchIndex>
            <VariationPage>All</VariationPage>
        </ItemLookupRequest>
    </Request>
    <Item>
        <ASIN>0470392169</ASIN>
        <DetailPageURL>http://www.amazon.ca/How-Read-Proofs-Introduction-Mathematical/dp/0470392169%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D0470392169</DetailPageURL>
        <ItemLinks>
            <ItemLink>
                <Description>Add To Wishlist</Description>
                <URL>http://www.amazon.ca/gp/registry/wishlist/add-item.html%3Fasin.0%3D0470392169%26SubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3D0470392169</URL>
            </ItemLink>
            <ItemLink>
                <Description>Tell A Friend</Description>
                <URL>http://www.amazon.ca/gp/pdp/taf/0470392169%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3D0470392169</URL>
            </ItemLink>
            <ItemLink>
                <Description>All Customer Reviews</Description>
                <URL>http://www.amazon.ca/review/product/0470392169%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3D0470392169</URL>
            </ItemLink>
            <ItemLink>
                <Description>All Offers</Description>
                <URL>http://www.amazon.ca/gp/offer-listing/0470392169%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3D0470392169</URL>
            </ItemLink>
        </ItemLinks>
        <ItemAttributes>
            <Author>Daniel Solow</Author>
            <Manufacturer>Wiley</Manufacturer>
            <ProductGroup>Book</ProductGroup>
            <Title>How to Read and Do Proofs: An Introduction to Mathematical Thought Processes</Title>
        </ItemAttributes>
    </Item>
</Items>
</ItemLookupResponse>

to multiple item ones

<?xml version="1.0"?>
<ItemLookupResponse xmlns="http://webservices.amazon.com/AWSECommerceService/2011-08-01">
<OperationRequest>
    <RequestId>cc114a2f-75e9-419a-81a4-fc7e98f6df13</RequestId>
    <Arguments>
        <Argument Name="Service" Value="AWSECommerceService"/>
        <Argument Name="Operation" Value="ItemLookup"/>
        <Argument Name="Signature" Value="cfstltrmlmtQHrzz5s9t130uhLWZFG3Y7It9EqBQ/pA="/>
        <Argument Name="AssociateTag" Value="yuguzhan-20"/>
        <Argument Name="ItemId" Value="9780201350883"/>
        <Argument Name="IdType" Value="ISBN"/>
        <Argument Name="AWSAccessKeyId" Value="AKIAIZLBWTLA3LJJZ2MA"/>
        <Argument Name="Timestamp" Value="2013-11-17T19:19:46.000Z"/>
        <Argument Name="SearchIndex" Value="Books"/>
    </Arguments>
    <RequestProcessingTime>0.0407320000000000</RequestProcessingTime>
</OperationRequest>
<Items>
    <Request>
        <IsValid>True</IsValid>
        <ItemLookupRequest>
            <IdType>ISBN</IdType>
            <ItemId>9780201350883</ItemId>
            <ResponseGroup>Small</ResponseGroup>
            <SearchIndex>Books</SearchIndex>
            <VariationPage>All</VariationPage>
        </ItemLookupRequest>
    </Request>
    <Item>
        <ASIN>0201350882</ASIN>
        <DetailPageURL>http://www.amazon.ca/Algorithms-Parts-1-4-Fundamentals-Structure/dp/0201350882%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D0201350882</DetailPageURL>
        <ItemLinks>
            <ItemLink>
                <Description>Add To Wishlist</Description>
                <URL>http://www.amazon.ca/gp/registry/wishlist/add-item.html%3Fasin.0%3D0201350882%26SubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3D0201350882</URL>
            </ItemLink>
            <ItemLink>
                <Description>Tell A Friend</Description>
                <URL>http://www.amazon.ca/gp/pdp/taf/0201350882%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3D0201350882</URL>
            </ItemLink>
            <ItemLink>
                <Description>All Customer Reviews</Description>
                <URL>http://www.amazon.ca/review/product/0201350882%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3D0201350882</URL>
            </ItemLink>
            <ItemLink>
                <Description>All Offers</Description>
                <URL>http://www.amazon.ca/gp/offer-listing/0201350882%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3D0201350882</URL>
            </ItemLink>
        </ItemLinks>
        <ItemAttributes>
            <Author>Robert Sedgewick</Author>
            <Manufacturer>Addison-Wesley Professional</Manufacturer>
            <ProductGroup>Book</ProductGroup>
            <Title>Algorithms in C++, Parts 1-4: Fundamentals, Data Structure, Sorting, Searching (3rd Edition)</Title>
        </ItemAttributes>
    </Item>
    <Item>
        <ASIN>B001FWIJFA</ASIN>
        <DetailPageURL>http://www.amazon.ca/Algorithms-Parts-1-4-Fundamentals-Structure-ebook/dp/B001FWIJFA%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3DB001FWIJFA</DetailPageURL>
        <ItemLinks>
            <ItemLink>
                <Description>Add To Wishlist</Description>
                <URL>http://www.amazon.ca/gp/registry/wishlist/add-item.html%3Fasin.0%3DB001FWIJFA%26SubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3DB001FWIJFA</URL>
            </ItemLink>
            <ItemLink>
                <Description>Tell A Friend</Description>
                <URL>http://www.amazon.ca/gp/pdp/taf/B001FWIJFA%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3DB001FWIJFA</URL>
            </ItemLink>
            <ItemLink>
                <Description>All Customer Reviews</Description>
                <URL>http://www.amazon.ca/review/product/B001FWIJFA%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3DB001FWIJFA</URL>
            </ItemLink>
            <ItemLink>
                <Description>All Offers</Description>
                <URL>http://www.amazon.ca/gp/offer-listing/B001FWIJFA%3FSubscriptionId%3DAKIAIZLBWTLA3LJJZ2MA%26tag%3Dyuguzhan-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386005%26creativeASIN%3DB001FWIJFA</URL>
            </ItemLink>
        </ItemLinks>
        <ItemAttributes>
            <Author>Robert Sedgewick</Author>
            <Manufacturer>Addison-Wesley Professional</Manufacturer>
            <ProductGroup>eBooks</ProductGroup>
            <Title>Algorithms in C++, Parts 1-4: Fundamentals, Data Structure, Sorting, Searching (3rd Edition)</Title>
        </ItemAttributes>
    </Item>
</Items>
</ItemLookupResponse>

As with many of these bugs, they are easy to fix once cause of the problem is found. If you know XML, an exercise for you is to spot the difference between the top one and the bottom one.

No responses yet

Wijmo UI Book – the Right Timing

Nov 04 2013

Finally with help and support from my hosting service setting up a newer version of Django to run with a newer version of Python, Building UIs with Wijmo’s official site has been launched. It is just in time for the lucky winners of free copies of the book to join in the party. I spent the last Saturday writing the site and the ideas over the last month just came together.
Building UIs with Wijmo site

No responses yet

Too Lazy to Click: A Decline in Traffic with a Tips Panel

Oct 17 2013

After launching the a new tips panel on Fiddle Salad that shows on top of other dialog windows whenever a fiddle is opened, I found a decline in traffic. Specifically, page views decreased. Does that mean the tips were poorly done? To investigate, I compared the views in the past 30 days to the previous period and looked at the traffic for different pages. The top pages ranked by page view saw an increase in ratio compared to the rest. My hypothesis is that when opening a saved fiddle, users were deterred by the tip panel that opened. I found the data to back up the hypothesis.
google analytics traffic
The analysis is that there were 0 visitors to the pages in the past 30 days because they just didn’t bother to check off “Show tips on startup”. This made sense, as the tips panel often blocked pieces of code. My plan is to just show the tips panel once a day so that opening saved fiddles wouldn’t show it.

Update:
I found out that the new tab page in Chrome stable was changed, removing the apps. This would explain the decline in traffic on the CoffeeScript IDE page. This change has been there for 4 months on the Chrome beta channel that I use on Windows.

No responses yet

Building UIs with Wijmo

Oct 11 2013

Right after I finished my classes at Waterloo, I started writing my book on Wijmo. Wijmo is an advanced widget library based on jQuery UI, which is the most popular UI toolkit in the community. The preface to my book explains what the book is about:

Wijmo is a new JavaScript library focusing on user interface widgets. It builds on jQuery UI, enhancing existing widgets, and adding new ones. In this book we examine the Wijmo widgets essential for web development. The useful configuration options for 15 widgets are covered along with their usage scenarios. Most of the chapters take a code recipe approach for tasks that occur often in web development. Whenever you come across a widget or user interface component that you’ve implemented before, chances are that Wijmo widgets have you covered. The chapters in this book are designed to get you started using the widgets in no time. On the other hand, Chapter 6, Dashboard with Wijmo Grid, takes a different approach in building an application and explaining how it works.

I would recommend buying this book if you’ve already purchased a license for Wijmo or you plan to be using Wijmo for development. On my project at work and while writing this book, I have used Wijmo in combination with Knockout to put together UIs.
Wijmo book cover
Building UIs With Wijmo was just published last month. I was originally contacted by the publisher to write the book because I had used Wijmo on one of my Github projects. The best thing is one favourite pet project leads to another. I will save that for another post, but for now there is a contest running on Fiddle Salad if you want a free copy.

5 responses so far

Linux kernel config to fix high pitch noise from CPU

Sep 30 2013

On one of the computers I was using, I started noticing a high pitched noise after I moved into a quieter room. At first, I thought I heard it after I turned off the computer. It must have been one of those ghosts. I haven’t bothered with it until today because I rarely turn off my computer. Also, it didn’t have support for suspend compiled into the kernel, which often requires a lot of modules to be built. I am using a minimal kernel seed from http://kernel-seeds.org/, so I didn’t bother adding those modules.
You can tell the high pitched noise is coming from your CPU if running a computationally intensive process suddenly silences it. First, I tried adding more CPU power management and adjusting fan speeds in the BIOS. They are related. If the CPU is using less power and running cooler, the fan also spins slower with less noise. I didn’t expect Intel’s market dominating CPU to be producing the noise. However, just like Windows or any market leader, there’s not enough competition for such things to be a threat. Next, typing a simple search query for “linux kernel config high pitch” lead me to http://www.thinkwiki.org/wiki/Problem_with_high_pitch_noises, and I tried the first solution by recompiling my kernel. I had a similar problem with my old Dell laptop when it went to sleep. I ended up never using sleep so that I could sleep at night.
The solution is to set CONFIG_ACPI_PROCESSOR=n under ACPI options. If you’re new to compiling a kernel, a good guide is Linux Sea.

— ACPI (Advanced Configuration and Power Interface Support)
[*] Deprecated /proc/acpi files
[*] Deprecated power /proc/acpi directories
< > ACPI 4.0 power meter
[*] Future power /sys interface
[*] Deprecated /proc/acpi/event support
<*> AC Adapter
<*> Battery
<*> Button
<*> Video
<*> Fan
< > Processor
<*> Thermal Zone
[ ] Debug Statements
< > PCI slot detection driver
< > Smart Battery System

No responses yet

Using Encapsulation to Make an Awesome Angular JS Editor in Fiddle Salad

Sep 26 2013

Angular JS is a popular MVC framework by Google, and I received a bug report that Fiddle Salad wouldn’t reload the preview as it does in all other cases. This problem was noticed before, but it wasn’t a priority since pressing the refresh button as required in all other web development methods solves the problem. However, this was because I was attempting to solve it at the wrong level by modifying a method. As I’ve learned, there are dependencies between the execute, reset, and initiation of the class involved.

Fiddle Salad’s CodeRunner class has just 5 public methods. They are

  • execute()
  • add_file()
  • remove_css()
  • reset()
  • debug()

as in the class diagram on the wiki at https://github.com/yuguang/fiddlesalad/wiki/2.-Classes. Therefore, any implementation of a CodeRunner just needs to support these 5 methods. The debug method could be refactored into a super class because it would generate the template for the new execute() method.

debug: ->
  ###
  Debug opens a new window with the code loaded in the page. External CSS and JS files are loaded through head tags.
  It assumes all external resources are stored in the view model.
  ###

  template =
    css: _.template '<link rel="stylesheet" type="text/css" href="<%= source %>" />'
    js: _.template '<script type="text/javascript" src="<%= source %>"></script>'
    html: _.template """
          <!DOCTYPE html>
          <html>
            <head>
              <title>Fiddle Salad Debug View</title>
              <script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
              <style>
                <%= css %>
              </style>
            </head>
            <body>
              <%= body %>
              <%= headtags %>
              <script type="text/javascript">
                <%= javascript %>
              </script>
            </body>
          </html>
          """

  # initialize array of head tags
  headTags = new Array
  # for each external resource in view model
  _.each viewModel.resources(), (resource) =>
    # get the file type of the resource, call mapped template with resource, and append generated HTML to head tags
    headTags.push template[@filetype resource.source()](source: resource.source())
  headtags = headTags.join('')
  # get JavaScript and CSS code from the engine
  javascript = engine.get_code LANGUAGE_TYPE.COMPILED_PROGRAM
  body = engine.get_code LANGUAGE_TYPE.COMPILED_DOCUMENT
  css = engine.get_code LANGUAGE_TYPE.COMPILED_STYLE
  # call the template for the window with the head tags and code
  html = template.html {javascript, css, body, headtags}
  # open window with generated HTML
  window.open = 'data:text/html;charset=utf-8,' + encodeURIComponent(html)

If I just change the last line, the debug method turns into a reset method.

@window.location = 'data:text/html;charset=utf-8,' + encodeURIComponent(html)

The rest of the class still needs to be completed, but they are as obvious as appending to an array when adding JS/CSS files.

No responses yet

e17 Menu Icons

Aug 27 2013

After installing e17 on Gentoo and a few applications, I noticed that some of the applications in the menu had icons while others did not. The same icons were missing in the IBar and other places. At first, I checked the wiki page on e17, it suggested to install evas_generic_loaders with SVG support. Contrary to what it suggests, evas_generic_loaders does not affect menu icon display it is used for tooltip previews in the file browser.
The way to set is to navigate to Settings -> All -> Look -> Application Theme and open the Icons tab. Once I selected Gnome, all the icons appeared. “Enable icon theme for applications” was already checked by default. If you do not see Gnome icons in the Icons tab, make sure you have installed x11-themes/gnome-icon-theme if you’re using Gentoo.

No responses yet

Show tips on startup in 4 lines of code

Aug 17 2013

Fiddle Salad has accumulated many features, but where are they? In keeping with one of its principles, features are hidden until the situation calls for them. One example is the JavaScript errors that are shown on hover over the results window. Recently, I’ve decided showing an unobtrusive tips window is as good as hiding features to reduce UI clutter. So, let’s start with 4 lines of Knockout code.

TipsPanel = ->
  @startup = ko.observable(not store.get('hideTipsOnStartup'))
  @startup.subscribe((checked) ->
    store.set('hideTipsOnStartup', not checked)
  )

I start by setting startup to a storage value using store.js. It uses HTML5 local storage with cookies for fallback. Since I want to show the tips panel by default and hideTipsOnStartup would not be set, startup is set to the opposite hideTipsOnStartup. JavaScript’s ! and CoffeeScript’s not casts an expression to a boolean, as required by Knockout’s checked binding.
Next, I add a manual subscription to the observable so that its value is stored each time the checkbox is checked or unchecked.
Finally, the checkbox is bound to tips.startup where tips is a TipsPanel instance.

<label><input data-bind="checked: $root.tips.startup" type="checkbox"/> Show tips on startup</label>

No responses yet

Grabbing a Share of the Pie – Marketing Fiddle Salad Correctly

Aug 01 2013

The idea of running Fiddle Salad came in a weird way. At first, I was just making a Python to JavaScript compiler and putting it on a website. It was simple enough, as the compiler was already built for it. The back-end for saving and authentication through Google, Twitter, and Facebook used the same one as Python Fiddle. After the site was launched, I noticed that not many people were interested in writing Python. Also, I got a taste of CoffeeScript, which is now my favorite language.

I think the demise of the Python-only fiddle came as a combination of low traffic and no saves. If nobody ever sees it or uses it, then it is better gone. Fortunately, I had the chance to design and develop the next generation of Fiddle Salad to support other languages.

6067OT_3_13

The real Fiddle Salad was launched in April of 2012. I remembered calling the previous version Python Fiddle. Last January, I decided to do an experiment with the CoffeeScript page by creating a separate app in the Chrome App Store. It turned out to double my number of daily visitors. Last May, it was featured on Lifehacker as one of the best apps for development. So why not do it again?

I waited until the right time. Last month and the previous one, the project received major updates which I will be discussing on the Fiddle Salad blog. Meanwhile, I published more apps in the Chrome App Store.

The difference now is that instead of an app supporting more features that show up in searches, I’ve limited the features that are marketed. This way it targets specific audiences. JavaScript programmers don’t want to find out about the features built for CoffeeScript, and a programmer looking for a CoffeeScript IDE won’t bother with an app that doesn’t have CoffeeScript in the title.

 

No responses yet

« Newer - Older »