How to serve pre-gzipped static content

Extjs is great because it can provide rich functionality/UI from static js content.

Here's how I got my apache2 server to serve pre-gzipped static js and css content.

First, I'm on a Macintosh, so I needed to enable .htaccess

To do so, go to (using sudo vim) /etc/apache2/httpd.conf and change the following section:

<Directory />
Options FollowSymLinks
AllowOverride None
Order deny,allow
Deny from all
</Directory>

To enable .htaccess, change AllowOverride None to AllowOverride All. Also, change :<Directory "/Library/WebServer/Documents">, from AllowOverride None to AllowOverride All.

Now, restart the apache server to reflect the changes in httpd.conf

sudo apachectl -k restart

Now, we have .htaccess enabled. To check if it works, go to /Library/WebServer/Documents and make a .htaccess file. Inside, put 

RewriteEngine On 

and a random string on the next line. Go to localhost, and you should see

Internal Server Error

The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, you@example.com and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.

---

Apache/2.2.22 (Unix) DAV/2 Server at localhost Port 80

If this pops up, it's working.

Now, under RewriteEngine On put

AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

EDIT: The above .htaccess version doesn't seem to be working... The below version worked.
or




#Serve gzip compressed CSS files if they exist and the client accepts gzip.
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.css $1\.css\.gz [QSA]

# Serve gzip compressed JS files if they exist and the client accepts gzip.
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule ^(.*)\.js $1\.js\.gz [QSA]

# Serve correct content types, and prevent mod_deflate double gzip.
RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1]
RewriteRule \.js\.gz$ - [T=text/javascript,E=no-gzip:1]

Now, if you make gzipped versions of your files on the web document, with

gzip foo.js -c > foo.js.gz

and test it out, surprisingly it still won't work. You'll get some funny error about 

"Unexpected Token ILLEGAL"

The trick is to make another change to your httpd.conf file.

Simply enable 

AddEncoding x-gzip .gz .tgz

and you should be good to go!

References: 

how to modify .htaccess
https://blog.jcoglan.com/2007/05/02/compress-javascript-and-css-without-touching-your-application-code/
and

http://stackoverflow.com/questions/9076752/how-to-force-apache-to-use-manually-pre-compressed-gz-file-of-css-and-js-files

Add encoding on httpd.conf

http://drupal.stackexchange.com/questions/35073/javascript-aggregation-issue-with-new-server

enabling .htaccess
http://chibimagic.wordpress.com/2009/02/27/apache-htaccess-mac-os-x/

Install R on RedHat

I recently needed to install R environment on my aws server, and it took me awhile, so here's a pretty pain-free brain-free way to do it.

http://stackoverflow.com/questions/18747640/installing-r-on-rhel-6

yum install texinfo-tex

rpm -ivh http://mirror.unl.edu/epel/6/x86_64/epel-release-6-8.noarch.rpm

yum install R

Customizing Extjs Grids

Here's a fantastic tutorial!

Cheers

Theming in Extjs (Part 2)

Here's part 2!

Changing global CSS themes is nice, but we want more control.

A note: !default makes your css declaration the "earliest" declaration.

Also, you don't actually need to perform "sencha app build"s every time.

sencha ant sass

should be sufficient to reflect changes in your scss files and generate the css.

Custom Component ui's

Every component in the Ext JS framework has a ui configuration (which defaults to "default"). (Used in the to create different types of button types in ST.)

The ext-theme-neutral theme includes SASS mixins for many different Ext JS Components. You can call these mixins to generate new UIs for Components. These mixins go under the "src" folder.

@include extjs-panel-ui(
    $ui-label: 'highlight-framed',
    $ui-header-background-color: red,
    $ui-border-color: red,
    $ui-header-border-color: red,
    $ui-body-border-color: red,
    $ui-border-width: 5px,
    $ui-border-radius: 5px
);

This mixin call produces a new Panel UI named "highlight-framed". To use, configure a Panel with "highlight" as its ui property (the "-framed" suffix is added to the UI of a panel when you set the frameconfig to true).

Again, remember to build the app to see the reflected changes.

While UI mixins are a handy way to configure multiple appearances for a component, they should not be overused. Because each call to a UI mixin generates additional CSS rules, gratuitous calls to UI mixins can produce an overly large CSS file.

Changing Images

Place the desired image in "my-custom-theme/resources/images/" and give it the same name as the image it is intended to override. For example, let's change the info icon of the MessageBox component. Save the following image as "packages/my-custom-theme/resources/images/shared/icon-info.png"

Now modify your test application to show a MessageBox that uses the custom icon.

Style for App-Specific Classes

Go to ".sencha/package/sencha.cfg", and set this as blank:

package.sass.namespace=

With this set, the file you need to create to correspond with Ext.panel.Panel is "sass/src/Ext/panel/Panel.scss".

Similarly, make "sass/src/MyApp/etc/etc.scss" to customize app-specific classes.

App-level Styling

Styling that is not shared between applications belongs in the application itself, not in the theme. The application acts as the final level in the theme hierarchy. Applications can change theme variables, and they can add their own custom variables and rules for styling the application's views.

Simply use "theme-demo-app/sass/var/view/Viewport.scss"!

Again, you need to build the app again for the changes to take effect.

Also, notice that we use Viewport.scss not Component.scss. This is because Component.js class is not necessarily called in the application

Notice how we did not use !default when setting the $base-color variable. !default is used for setting variables in themes, because those theme variables might need to be overridden in a derived theme, or in an application. !default is not needed here because the application is the end of the line in the theme inheritance tree.

CSS style rules for your application's views should go in the app's "sass/src/" directory in a scss file that has the same path and name as the view it is styling.

Final notes:

• I think you're supposed to perform an "app refresh" everytime you perform a "package build".
• Note: we skipped a section on creating sprites for legacy browsers and performing overrides... Check the original doc for more.
• I don't really know what the section on "Adding Custom Utility SASS" is about...
• I don't look at app migration from earlier versions of Extjs
• Didn't look at section "Organization of Generated SASS"

Theming in Extjs (Part 1)

Theming an Extjs Application with SASS and Compass

It's break, so I decided to play around with Extjs :).

I wanted to look at theming an application using SASS and Compass.

It took me awhile to realize that the correct documentation for doing so on Sencha CMD 3.1 and Extjs 4.2 was here: http://docs.sencha.com/extjs/4.2.1/#!/guide/theming. (For some reason they didn't make finding this doc easy...)

Here's Part 1 of a summary of that tutorial...

Setup:

Generate a workspace for your theme generation

sencha -sdk ~/ext-4.2.0 generate workspace my-workspace

Make a test app to see your theme when you modify it

sencha -sdk ext generate app ThemeDemoApp theme-demo

Then, build the app, and generate a new theme with

sencha generate theme my-custom-theme

Then, this summary gives a good overview of what goes where:

• "package.json" - This is the package properties file. It tells Sencha Cmd certain things about the package like its name, version, and dependencies (other packages that it requires).
• "sass/" - This directory contains all of your theme's SASS files. The sass files are divided into 3 main sections:
  1. "sass/var/" - contains SASS variables
  2. "sass/src/" - contains SASS rules and UI mixin calls that can use the variables defined in "sass/var/"
  3. "sass/etc/" - contains additional utility functions or mixins The files in "sass/var/" and "sass/src" should be structured to match the class path of the Component you are styling. For example, variables that change the appearance of Ext.panel.Panel should be placed in a file named"sass/var/panel/Panel.scss".
• "resources/" - contains images and other static resources that your theme requires.
• "overrides/" - contains any JavaScript overrides to Ext JS Component classes that may be required for theming those Components.

First thing you want to do is inherit from the correct theme.

Go to the package.json file, and modify the "extend" tag to the one you want. For example: 

"extend": "ext-theme-classic"

Now you need to refresh the application.

Do this from the "theme-demo-app" directory. Also use the .sencha/app/sencha.cfg to change the theme to your custom theme.

sencha app refresh

Start playing around:

Now, for play. One of the big advertising points of Sencha was the ability to easily change color schemes of the whole application. Let's try it. Create Component.scss under /my-custom-theme/sass/var/ with the following.

$base-color: #317040 !default;

Then, they say:

Be sure to include !default at the end of all variable assignments if you want your custom theme to be extensible. Without !default you will not be able to override the variable in a derived theme, because Sencha Cmd includes variable files in "reverse" order - most-derived theme first, base theme last. For more information on the use of !default see Variable Defaults

base-color is one of many global css variables. The rest are listed here Global_CSS.

Generate the CSS:

Now, to generate the CSS, go to my-custom-theme and 

sencha package build

Then, inside "my-custom-theme/build/resources" a file my-custom-theme-all.css is generated.

Then, 

If you have already run a build of the app using the classic theme, you should clean the build directory. From the theme-demo-app directory run:

sencha ant clean

This is a step that could be easily forgotten!

Finally, go back to your test application and perform a 

sencha app build

You should see the green theme!

That's all for this post; happy theming!

Loading Extjs Stores

Ok, so I spent about 45 minutes on a really dumb problem.

I needed to do an Ajax request with different parameters in a single extjs store, and for some reason, the store kept on using the first parameters and displayed the same data.

The fix is to call the load method and pass the load method your params!

Yes, you can do this. I probably knew, but I forgot. Hopefully writing this will help me remember.

store.load({
    params:{
        //put params here.
    }
});

Notes about iframes

I've thought iframes were a security threat: what if the whole page you're visiting is an iframe to some rogue site?

I guess you can't really prevent that one, but it just seemed somewhat scary. What if someone iframed to your site willy nilly?

Well, I figured out they can't do that, at least not easily.

I tried to iframe to google's OAuth site, but I got the following js console message:
Refused to display 'https://accounts.google.com/AccountChooser?...' in a frame because it set 'X-Frame-Options' to 'DENY'.

So clearly there are ways to stop this iframe activity via X-Frame-Options.

It looks like this is a setting on Apache.
https://developer.mozilla.org/en-US/docs/HTTP/X-Frame-Options

Anywho, I haven't looked in to it much, just wanted to take note of it for future reference.

How to change themes in extjs sencha cmd

To change to the neptune theme modify line 33 of your sencha.cfg file located in.sencha/app/sencha.cfg to

app.theme=ext-theme-neptune

After doing this run sencha app refresh in your terminal or cammand line

OAuth continued

I ran into another small problem: I was trying to do a POST request to get access to the API using the access token. This is a GET. I wasted about an hour.

After you get everything back, I needed to have everything stored into my application.
My question was how to redirect the user to the appropriate location.

Here's how you do it

Usually, the method that receives the Rest call says
@Produces("application/xml")
or
@Produces("application/pdf")

@Produces("text/plain")

turns out, you can do 

@Produces("text/html")

(for more on producible MIME types, see this)

Then, when your response is served to the client, it tells the browser to interpret it as an html. This is pretty neat! You can include a script tag inside the response and do a location.href = '/location_here'

I realized that this is just like saving the file with a .html extension. Neat!

So, we get a little lesson about how browsers read files.

That's about it! Everything seems pretty clear to me now. It's just a bunch of mop up work.

Google OAuth 2

Well, this is the thing I've been trying to avoid for awhile.
I finally got it figured out (mostly)

I've found that the documentation is really annoying, since it's trying to sell you the APIs when you're just looking for simple authentication and authorization. (Incidentally, I'm only using OAuth for authentication, and I'm authorizing on my own). The pages are each written nicely, but the links are a mess.

I've found the following two links to be most useful:
Overview
Playground

Of course, Google also gives you some "help" by providing example java clients (or your preferred fill in the blank back end service)

Turns out the first step to getting the access code is stupid. You just put a link with the right queryparams and Google pulls through that part for you, giving you the auth code as a get query parameter in the redirect uri. The next part was the annoying part for me.

Since I have a restful web service, I needed to do another post request with the auth code that Google gave me and send my client id and secret back to Google. I bootlegged a vanilla java post request thing from the web and muscled through it. It uses HttpsUrlRequest or something.

Be sure that your parameters are correct here, Google likes to throw 400s when you misbehave.
Two examples:

1. you try to post twice. It'll only work if you get it right on the first try. If you mess up, you have to re-authorize.
2. if you mess up the redirect uri. I'm dumb.

Finally, you get the access_token.

You do another call with that to get the info. This call is easy (finally).

You celebrate, as you've gotten the info from Google that you need. Now everything is handed back to your application.

More to come! As I figure the rest out.

ST2.2.1 bug with the New Chrome 29.0.1547.57

The new Chrome 29.0.1547.57 doesn't handle the default css from ST2.2.1.

The fix can be found below
here

ST2 screws you! (rhyme intended)

For some reason, when I had

store: 'Storename',

as a config, it kept on messing up, saying
[WARN][Ext.dataview.List#applyStore] The specified Store cannot be found

Turns out, you need to use

store : { xclass : 'SenchaTest.store.Storename'},


Also, you need to use a UUID identification strategy in your model:
        identifier: {
            type: 'uuid'
        },


Again, ST 2 screws you!

JS Compilation

So you have lots of options,

• YUI,
• Closure,
• UglifyJS.

Since I'm a noob at javascript minification, I've been using the default Sencha CMD yui compressor to minify my scripts. Apparently I think Sencha hacked up the compressor to be Sencha framework aware or something (so claims Sencha themselves).

When I tried using Sencha CMD to compress one of my all-classes.js scripts, it threw some js errors when I deployed.

I then tried to use Google Closure compiler online at http://closure-compiler.appspot.com/home
but it told me my file was too large. I guess I could download closure to run on my local machine, but I didn't feel like learning how to use closure at the moment.

Then I remembered earlier in the morning I crossed the site http://www.freeformatter.com/ which had a butt load of formatters and, whoop dee doo, a js compressor. They said it was also yui based, and had no effect anywhatsoever on your code.

I gave it a shot by linking my url.
Bingo!
No size limitations, no problems, and it worked during deployment. Better yet, it compressed my file just as well as the Sencha one did, so I'm not sure where Sencha went wrong.

In any case, go to http://www.freeformatter.com/javascript-minifier.html#ad-output. It's awesome!

sencha cmd findings

1. Trailing commas are crap. Remove them from your js laziness habits.
2. Do not use Ext.create(myclass) ?! For some reason, it gets angry at me.


3. If for some reason, sencha cmd v3.1.2.342 does not include your controllers when you compile to all-classes (and you happen to go crazy) here is the solution! (which I finally found, after a full day's worth of fiddling about)

http://www.sencha.com/forum/showthread.php?264130-sencha-compile-does-not-resolve-controller-dependencies

Yes, Sencha is trying to screw us all! You have to include which SDK you are using, because apparently sencha cmd works differently for different sdks. Yes, shoot me now, but that's how it works.

So, I'm running the command

sencha -sdk ../../ext compile -classpath=../../ext/src,. page -yui -in index.html -out build/index.html

Horrid!

Ext grid reconfigure function

This is what everyone was dreaming for in terms of reusing their grids!

You can pass in a new store and new column definitions. Awesome!

function: initComponent()

In Extjs, sometimes you want to create a component, and use it immediately after creation.

If you're using Ext.define('app.view.blah', {});
it can be really hard find a way to reference an instance of the class you just created.

It took me forever, but all you do is use the
function: initComponent() when placing items into your view.
Since the scope this of the whole function is an instance of the class, you can use the this keyword at the end of the initComponent function.

Interestingly, there is also an afterrender function

Agh Ext!

http://stackoverflow.com/questions/7316967/extjs-4-problems-with-jsonstore-post-request

Sillyness!

I've had a lot of trouble with xml loading too, and I learned some stuff that I might post later on.

But ewy ew ew

Using @Consumes("x-www-form-urlencoded")

For all the newbies out there (like myself :-)

When you use @Consumes("application/x-www-urlencoding")
you use @FormParams not @QueryParams.

Silly silly!

Tomcat/JAX-RS

I'll have a lot to write about my experience with JEE and creating restful services later.

However, for now, I'd like to talk about the following problem that I've had twice:

After making some changes to the Resource files, I've started to get this response:

exception

javax.servlet.ServletException: Servlet.init() for servlet ServletAdaptor threw exception
 org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:103)
 org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:293)
 org.apache.coyote.http11.Http11AprProcessor.process(Http11AprProcessor.java:879)
 org.apache.coyote.http11.Http11AprProtocol$Http11ConnectionHandler.process(Http11AprProtocol.java:617)
 org.apache.tomcat.util.net.AprEndpoint$Worker.run(AprEndpoint.java:1760)
 java.lang.Thread.run(Thread.java:619)

root cause

java.lang.IllegalArgumentException: java.text.ParseException: End of header
 com.sun.jersey.core.header.MediaTypes.createMediaTypes(MediaTypes.java:224)
 com.sun.jersey.core.header.MediaTypes.createMediaTypes(MediaTypes.java:191)
 com.sun.jersey.server.impl.modelapi.annotation.IntrospectionModeller.addConsumes(IntrospectionModeller.java:152)
 com.sun.jersey.server.impl.modelapi.annotation.IntrospectionModeller.workOutSubResourceMethodsList(IntrospectionModeller.java:338)
 com.sun.jersey.server.impl.modelapi.annotation.IntrospectionModeller.createResource(IntrospectionModeller.java:120)
 com.sun.jersey.server.impl.application.WebApplicationImpl.getAbstractResource(WebApplicationImpl.java:623)
 com.sun.jersey.server.impl.application.RootResourceUriRules.<init>(RootResourceUriRules.java:114)
 com.sun.jersey.server.impl.application.WebApplicationImpl._initiate(WebApplicationImpl.java:1013)
 com.sun.jersey.server.impl.application.WebApplicationImpl.access$600(WebApplicationImpl.java:153)
 com.sun.jersey.server.impl.application.WebApplicationImpl$11.f(WebApplicationImpl.java:652)
 com.sun.jersey.server.impl.application.WebApplicationImpl$11.f(WebApplicationImpl.java:649)

What the heck is that? The first time I fixed it by making a new project and redoing everything (!)

The second time, I tried restarting and copying all the Resources files from the old project to the new one. Turns out, it still messes up.

Later, I found that the problem is in the @Produces and @Consumes annotation.

For one of the services, I had written @Produces("x-www-form-urlencoded") instead of @Produces("application/x-www-form-urlencoded)

In conclusion, the root problem 

java.lang.IllegalArgumentException: java.text.ParseException: End of header
is usually a stupid annotation problem.

Load Ext grid with store

So I wasted about an hour trying to load a grid with a store, and nothing ever showed up. Turns out I needed to do Ext.create('Namespace.store.storename') for it to work. Stupid!

A git tutorial

Here's a quick git tutorial. Helpful for complete noobs.

Getting Ruby for Mac

I was working on a project with a friend and needed to get Ruby on Rails for my mac, and this was an incredibly helpful tutorial to do so. here. I would like to add that if you get the error

Can not find compiler and 'make' tool - make sure Xcode and/or Command Line Tools are installed.

, in order to get command line tools (assuming you've downloaded Xcode) do the following: go to Preferences>Downloads, and click install on the row for "Command Line Tools". After this, you should be all set! Note: it'll take awhile. 20-30 minutes is my estimate?

How to alert a treepanel's node text

Took me awhile to find on stack overflow, but here's how you access the node's text

itemclick: function(s,r) {
                alert(r.data.text);
        }

metric completion of a graph

I had trouble naming the following scenario: turn a graph G into a complete graph with weighted edges such that each edge's weight represents the distance between the two vertices (ie, a distance matrix except for on a complete graph).

Turns out, this is called metric completion of a graph. Now we can google away!

mixins

Mixins are "donor" classes that can be included in "recipient" classes, merging the members (properties and methods) of the "donor" class into the "recipient" class.

This is actually a form of multiple inheritance, as the "donor" class's (ie the mixin class) methods and properties can be accessed as if they were of the parent class.

The point of mixins is usually to add functionality from an encapsulated class into the current class without having to make the current class a subclass of the encapsulated class that has the functionality we want.

a good interview

Jud Bowman's Interview

test post

let's see how this looks.