code blog

What?

[katepdonahue]

Basics of Backbone

In the past month I've learned too much about Backbone to write in one blog post, but just figuring out how all the files talk to each other was the main challenge and so I've summarized that here. DISCLAIMER: This is an untested example just meant to show how the various Backbone components hook up.

Firstly, Backbone is an MVC style framework but like Django it's more MTV. No, I'm not talking about Music Television, what I'm saying is the models are still called models but the view is called a template and the controller is called a view. Please relax.

Assume we have a book api. We can get a single book's attributes with a GET request to /api/book/:id or we can GET all of the books at /api/book. Sending a POST request to /api/book creates a new book object. Sending a POST request to /api/book/:id updates an existing books attributes.

A basic book model.

Important features:

url —> tell the model how to get it’s attributes from the api

book.js

define([ 'jquery' , 'backbone' ], function ($, Backbone) { var Book; Book = Backbone.Model.extend({ defaults: { // not necessary but a good way to keep track of the attributes we expect to get back from the api response id: null, title: null, author: null } , url: function () { if (this.get('id')) { return "/api/book/" + this.get('id'); } else { return "/api/book"; } } }); return Book; });

The url tells the model where to send it's get/post requests. These requests will be sent with all of the models attributes to the api.

A basic book collection. This is just a handy way of packaging up a bunch of book models.

Important features:

model —> tell the collection what model to use

url —> tell the collection how to get the models from the api

bookCollection.js

define([ 'jquery' , 'backbone' , 'modules/book/models/book' // tell backbone where to find the model ], function ( $ , Backbone , Book // tell backbone what we'll be calling the model ) { var BookCollection; BookCollection = Backbone.Collection.extend({ model: Book, url: function () { return '/api/book'; }, onInitialize: function(models, options) { // here you have access to all the models // any options we passed when we created the collection in app.js are also accessible here. } }); return BookCollection; })

Use onInitialize to add to but not overwrite the initialize function of the backbone class you are extending. onInitialize runs right after the parent class's initialize.

A basic book view.

Important features:

tagName --> tell the view what html element to render the model in

className --> tell the view what class to give the model element

template --> tell the view where to render the model

bindings --> tell the view to listen for changes in the model

bookView.js

define([ 'jquery' , 'backbone' ], function ( $ , Backbone ) { var BookView; BookView = Backbone.View.extend({ tagName: 'div' // the model will be rendered in a div , className: 'book' // the class of the div will be .book , events: { 'click .like': 'like', // you can add events but I'm not going to get into this } , template: 'book-template' // tell the view what template to use , bindings: function () { // the view listens for changes in the model and updates when the model changes this.listenTo(this.model, "change", this.render); } , like: { // do some stuff when the user clicks the like button } }) return BookView; });

A basic book collection view.

important features:

className —> tell the colection view the class name to give the div that holds the collection

modelView —> tell the collection view which view to use for each model in the collection

template —> tell the collection view which template to render everything in

contentSelector —> tell the collection view which html element to render the collection in

bindings —> add a listener to tell the collection view to listen for changes in the collection

bookCollectionView.js

define([ 'jquery' , 'backbone' , 'modules/book/views/bookView' // tell the collection view about the model view ], function ( $ , Backbone , BookView ) { var BookCollectionView; BookCollectionView = Backbone.View.extend({ className: 'book-list' // since no tagName is specified, backbone defaults to div, this will be the class for the div , options: { cutoff: 10 } , modelView: BookView // tell it about the model view , template: 'book-collection-template' // tell it where to render , contentSelector:'.book-container' // tell it what part of the template to render in , bindings: function () { this.listenTo(this.collection, "reset", this.render); // re-render the collection when the collection model changes, e.g. we could filter the books to only show books by a certain author } , onRender: function () { // similar to onInitialize, you can add functionality on render without overwriting backbone's View render } , events: { // you can have events } }); return BookCollectionView; });

templates just need an id matching the string given in the view.

_book.jade

script(type='text/template', id='book-template') // template code goes in here

_bookCollection.jade

script(type='text/template', id='book-collection-template') .book-container // collection will render in here

Tell everything to grab it's stuff in app.js.

Basically, initialize an empty BookCollection when the app loads and then fill it with a book model for each book in the database. Also, start up the router so that our backbone app can respond to different routes.

app.js

define([ 'backbone' , 'domReady' , 'router' , 'modules/followable/collections/bookCollection' ], function (Backbone , domReady , Router , BookCollection ) { // I'm not exactly sure how this works but I think // it's making all of this stuff available globally in the page window window.Delve = _.extend(window.Delve, { Models: {} , Collections: {} , Views: {} , Routers: {} , Constructors: {} , Utils: Utils , init: function (options) { var that = this; // Grab book objects this.Collections.BookCollection = new BookCollection([], {user_id: 1}); // takes models and options as params. this.Collections.BookCollection.fetch(); // grabs all the models from the api specified in the collection url // Create new app router domReady(function () { that.Routers.App = new Router(); Backbone.history.start({ root: '/' }); }); } }); });

Tell it when to do all this in router.js.

Important features:

routes —> tell the router which function to run when it hits a given route

bookCollection —> this is the function I’ve written to be run for the book route

initialize —> I’m not sure how much is built into Backbone and how much you need to set up, for now I’m going to ignore this part but I assume it is important.

router.js

define([ 'jquery' , 'backbone' , 'modules/followable/views/bookCollectionView' ], function( $ , Backbone , BookCollection ) { var Router; Router = Backbone.Router.extend({ initialize: function( collection ) { console.log("In router.js"); // Instantiate new view this.view = // I didn’t set up this part so I’m going to ignore it for now this.view.render(); } , bookCollection: function (id) { this.relevantIds.book = id; // you can pass in extra info from the url this.view.showPage(new BookCollection(this.relevantIds, window.AppName)); } , routes: { ‘book(/:id)': ‘bookCollection' } }); return Router; });

Ok, that was a lot so here is my favorite cat gif:

[katepdonahue]

Foundation Reveal

Foundation is a front-end framework similar to Bootstrap, but with less css baked in. It includes a great tool called Reveal, which helps you create and manage modal popups.

This post is about how to get a url that would send the user to a page with a specific modal already open. Basically, I wanted a sign up link that I could use in an email. When the user clicks the link, it takes them to the home page with the sign up modal already open. Like this.

Two Steps:

How do I open the modal?

How do I tell javascript to respond when I pass the 'signup' parameter?

Look for the modal's id. If you inspect the signup modal you'll see this:

<section id="signup" data-reveal="data-reveal" data-options="animation:fade;" class="reveal-modal medium open" style="display: block; opacity: 1; visibility: visible; top: 100px;">...</section>

So you can open this modal by running this code:

$('#signup').foundation('reveal', 'open');

Add this to your javascript:

if (getParameterByName('signup') == "true") { $('#signup').foundation('reveal', 'open'); }

You can link to your page with the modal already open with this url format: /?signup=true

Here it is on Wiser: http://getwiser.com/?signup=true

See if you can get the forgot password modal to open by passing the right parameter in the url.

[katepdonahue]

Django Database Call Optimization

Did you know that it takes longer to grab 1 piece of data from the database 100 times than it does to grab 100 pieces of data from the database 1 time? Apparently it takes a lot longer.

In a bit of code I was working on I was making two database calls within an iteration. It turns out it is much more efficient to make a slightly more complicated database call outside of the iteration and then access the prefetched information within the iteration without hitting the database again each time.

But it’s not just about fitting your query into one line or what looks like one call. When you build a query set the corresponding SQL is built but it is not run until one of 7 things happens. Here are the most common of the list, at least in the code I have been writing.

iteration -the first time you iterate through the query set it will evaluate the results in order to iterate through them. If you iterate through a second time it does not hit the database.

len() -evaluates the query set in order to figure out how many objects it returns.

list() -force the query set to become a list object/ force evaluation.

bool() -test whether or not a query set returns any objects (some=True, none=False).

repr() -this is called whenever you run a query in the python shell so you can see your results right away. Similarly, print() runs the SQL as well.

What does this mean?

You can do all sorts of stuff and still only hit the database once!

queryset1 = Article.objects.filter(title__startswith=“The”) queryset2 = queryset1.filter(publication__in=publication_list) queryset3 = UserArticleShare.objects.filter(article__in=queryset2)

I still haven’t hit the database!

# print names of users who have shared articles starting with ‘The’ # and belonging to publications on the publication_list: for uas in queryset3: # now I finally hit the database one time! print(uas.user.name) # but this also hits the database! And since this happens within # the iteration, that's a lot of database calls

Why does uas.user hit the database?

Once queryset3 is evaluated I can access all of the data it grabbed from the database without hitting the database a second time. But it turns out user is not among that data. That's because user is not actually a field on UserArticleShare, in fact, the field is user_id. Calling user runs the SQL to grab the User object's fields given it's id.

What can be done?!

Well, you could just print the user_id and it won't run any extra SQL:

for uas in queryset3: # hit the database once print(uas.user_id) # doesn't hit the database. But that's no fun!

So there's something called prefetch_related.

for uas in queryset3.prefetch_related('user'): # hit the database once print(uas.user.name) # DOES NOT hit the database because # we have prefetched all the user objects in the original query.

Quiz: Why doesn't it hit the database when you call name on user? We didn't prefetch that!

Think about it...

Answer: Because name is not a relationship to another model, it's just a field on the UserArticleShare model just like user_id.

P.S. Don't use len() on a query set. It will have to grab all the data and then count in in Python Use count(). This will count in in the SQL instead, which is much faster.

[katepdonahue]

Sending Messages in JS

Last week I worked on a small feature for the Wiser chrome extension. I added functionality such that when a user highlights text on the webpage and then opens the extension, the selected text gets pulled into the excerpt field in the extension.

The tricky part was, there are three layers to the extension, the webpage, the popup, and the iframe within the popup. Neither the popup nor the iframe could see the highlighted text. So I set up a series of listeners and sent the message (the selected text) from the webpage, to the popup, and finally to the iframe.

I sent these messages using two different methods: the chrome extension api and javascript's postMessage function. The latter allows you to send cross-origin messages, which I needed to do in order to get the text from the popup to the iframe.

Here's a picture of how the message flow works:

Here is the javascript from the three layers. The numbers in the comments correspond with the numbers in the picture.

content_script.js (runs in the webpage)

// (5) sends a message to popup.js using chrome extension api function tell (message) { chrome.extension.sendRequest({message: message, data: "from content_script"}); }; // (4) grab the selected text and send it using the tell function tell(window.getSelection().toString());

popup.js (runs in the extension popup)

// (7) calls tell function if response has a non-empty message function onPostMessage (request) { if (!request.message) { return; } else { tell(request.message) return; } }; // (8) sends message to iframe using postMessage function tell (message) { chrome.tabs.getSelected(null, function (tab) { if (!tab) { return; } iframe.contentWindow.postMessage(message, "*"); }); }; // (3) runs content_script.js using chrome extension api function iFrameReady () { chrome.tabs.executeScript(null, { file: "content_script.js" }); }; // (6) listener for message from content_script.js using chrome extension api // it's important that this listener is set up before we run content_script, // otherwise the message from content_script will arrive before the listener exists chrome.extension.onRequest.addListener(function(request) { onPostMessage(request); }); // (2) listener for message from iframe // (not using chrome extension api here because the message is sent using postMessage window.addEventListener("message", function(request) { if (request.data.data == "ready") { // when iframe is ready, run content_script iFrameReady(); } }, false);

in the iframe

// (1) send a message to popup.js saying we're ready using postMessage window.parent.postMessage({message: "", data: "ready"}, "*") // (10) gets a message from popup.js with the quote text in it // fills the excerpt form field with the text function receiveMessage (event) { $(“#selection").val(event.data); }; // (9) listener for message from popup.js window.addEventListener("message", receiveMessage, false);

[katepdonahue]

Mocking Python

This week, Spencer (one of my coworkers) and I wrote my first test in Python. I guess I just didn't think of it before but It turns out you don't really need a testing framework, although we did use Python's mock package.

I had just added some code to the save_article static method to incorporate functionality for checking for an article's double in the database before created a new object for it. The method already had the capability to find any article with the same url, but now I was checking to make sure two articles having different urls but the same title and summary would both save to the database as the same object (basically whichever came first would be the one saved to the database).

Here's the test we wrote:

from app import models as m import mock @mock.patch("app.utils.MetadataScraper.prepare_for_share") def test_save_article_found_duplicate(share): share.return_value = {'title': "this is my title", "summary": "some summary"} article1 = m.Article.save_article(url="http://google.com/path1") article2 = m.Article.save_article(url="http://google.com/path2") assert article1.id == article2.id

Here's the breakdown:

from app import models as m

Import all of our models so that we can create article objects to call the method on. Probably could have just imported Article. Oh well.

import mock

Import mock. We'll use this to prevent the code from actually going to the url and trying to pull in data about the article, and instead return a fixed value for the article data.

@mock.patch("app.utils.MetadataScraper.prepare_for_share")

MetadataScraper's prepare_for_share method (which is called in save_article) goes to the article's url and tries to grab all the information about the article, including title and summary. We want to assign our own return value for this method, so here we're letting mock know to not actually run the code in the method.

def test_save_article_found_duplicate(share):

Define the method which will test your code. The parameter name you put in here is automatically assigned to the method that you mocked out.

Just a side note example, if you mock out multiple methods, the parameter assignment is not as you would expect:

@mock.patch("app.utils.MetadataScraper.prepare_for_share") @mock.patch("app.utils.MetadataScraper.prepare_for_disco") def test_save_article_found_duplicate(disco, share):

That assigns the prepare_for_share method to be called "share" and the prepare_for_disco method to be called disco. Weird, I know.

share.return_value = {'title': "this is my title", "summary": "some summary"}

This assigns the return value of the prepare_for_share method. This way, both articles will get the same info assigned the them when we run save_article, so they will appear to be the same article with different urls.

article1 = m.Article.save_article(url="http://google.com/path1") article2 = m.Article.save_article(url="http://google.com/path2")

Save the duplicate articles with different urls.

assert article1.id == article2.id

This will return False if the articles are not the same in the database.

So what happened?

The test failed! It turns out that the method I had added to save_article to check for the duplicate returned a duplicate article id, not a duplicate article object, as I had expected. So the assertion check was calling .id on what was already an article id and was failing.

So I fixed the code so that it returned an article object if there was a duplicate.

This was great because it would have been nearly impossible to test this with real articles because I don't know how to find two identical articles with different urls!

Next step: putting it all in a Django transaction so any additions to the database will be removed at the end.

[katepdonahue]

How to Go Back in Time With Git

I’ve had some issues with deleting my own code in the past because of improperly dealing with merge conflicts in Pycharm's conflicts resolve interface. When this happens, or when I just want to go back to an earlier version of my code, I take to my terminal.

Here’s how you can take a look at the past:

git log

Shows you your past commits with the most recent at the top.

Here’s an example of what one of the commits in the output would look like

commit b3f1cb491f22f0c71505776e275ca52ed40f0cb4 Merge: 1671b62 29b7fd3 Author: kate <[email protected]> Date: Mon Jun 9 18:27:12 2014 -0400 This is a commit message.

Checkout the commit to go back in time!

git checkout b3f1cb491f22f0c71505776e275ca52ed40f0cb4

Now you can explore the code in your text editor at its state at the time of this commit.

or run a

git diff <branch_name>

to compare it to the present state of the branch, or any other commit or branch.

When you’re ready, go back to the present with

git checkout <branch_name>

What if you want your code to go back to looking like a previous commit?

You can make one of your old commits into a new branch so that the past version and the present version coexist.

git checkout -b <new_branch_name> b3f1cb491f22f0c71505776e275ca52ed40f0cb4

Or if you don’t care about keeping the current state of your branch and none of these commits have been pushed yet, you can revert your current branch back to the commit in question.

git reset —hard b3f1cb491f22f0c71505776e275ca52ed40f0cb4

Just know that all changes you’ve made since this past commit are now lost. The old present state is lost.

[katepdonahue]

My Life on the Internet

I wrote a blog post about my experience learning to code for Wellesley Underground's Wellesley in Tech Series. Check it out.

[katepdonahue]

Ajaxing it up

Last week I finally “finished” the chrome extension (nothing is ever really finished). Just for some context, what it does: when you open the extension on an article page and click the ’share’ button, the article will share to your Wiser account. Though the main functionality was working, it was really really slow. So, in order to speed it up, I used an ajax post request to our api to save the article to the database after the page has loaded instead of this happening in the Django view before page load.

An overview of how it was built before:

When the user would open the extension for the first time on a given page, it would take 15 seconds for anything to show up in the blank extension window. This was because, on opening I was sending a request to get the extension page in an iframe from our Django app. Before the page could load, the Django extension view (the controller, I still want this to be called the controller) would find or save the article in the database. Not until it had completed that, would it render the page.

Here was the basic flow:

Find matching url in urls.py and send the article url to the corresponding view

In the view, make sure the user is logged in, if not send to login view

In the view, decode the article url and check the database for it

In the view, save the article if it is not found in the database (this is the slow part)

Send the response data, including the encoded url, from the view to the template.

The page renders

An overview of the changes I made:

Now, saving an article could be faster, but a more immediate fix to this problem is to take the article save out of the view and move it into an ajax post request fired when the extension page loads. This way, the user can interact with the extension while the article is saving instead of confusing the user with a blank page.

The new flow:

Find matching url in urls.py and send the article url to the corresponding view

In the view, make sure the user is logged in, if not send to login view

In the view, decode the article url and check the database for it

Send the response data, mainly the encoded url, from the view to the template

The page renders (now the user can see something!)

Hit the Article Api with an ajax post request, passing the encoded article url

When the post response comes back the extension now has access to the article id

The final step was to make sure that if the user clicked the share button before the Article API response had come back, that the share would wait for the article id until sending it’s own post to the User Article Share API.

I set up a flag grabbed_article in my Article API post to tell me whether the article id has come back yet:

$.ajax({ type: 'POST', url: article_api_url, data: JSON.stringify(article_settings), contentType: "application/json", success: success }); function success (response_data) { // set article_id from response data article_id = response_data['article_id']; grabbed_article = true; };

And then created a function to check grabbed_article and share the article when it is true:

// checks to see if we've gotten a response from the article api yet function readyToShare() { if (grabbed_article == false) { setTimeout(readyToShare, 100); return; } else { $.ajax({ type: 'POST', url: share_url, data: JSON.stringify({'settings': settings}), contentType: "application/json", success: shareWorked, error: shareFailed }); } };

Then added a click handler to call my function when the share button is clicked:

$("#btn_submit").on("click", function(e) { readyToShare(); });

Is it synchronous?

It's Ajax!

Ok, I just wanted to use that gif.

[katepdonahue]

Debugging Strategy

I'm back to working on the chrome extension again and been doing a lot of debugging. Here's my strategy for debugging the Python backend which is hit in an iframe in the extension. (Here’s my blog post on how to get the web inspector tools up and running for the extension)

Step1: The first place to look is in the Network tab of the web inspector. Click on the post request that went wrong (it’ll be red).

Step2: Click on the Headers tab and take a look at Request Headers to make sure you are sending what you think you are sending with the request.

Step3: Check the Response tab to check the response from the post request to the server. This error message could be helpful.

Step4: If there’s an error and the response doesn’t make it obvious where the issue is, read the traceback. Start with the parts in your own code but if you still can’t figure out what is wrong, take a look at the parts in Python’s code to see what is being called, which may not be what you expected.

Example:

Here’s the last couple lines of a traceback I got when testing my chrome extension.

File "/usr/local/lib/python2.7/dist-packages/haystack/signals.py", line 47, in handle_save index.update_object(instance, using=using) File "/usr/local/lib/python2.7/dist-packages/haystack/indexes.py", line 266, in update_object backend.update(self, [instance]) File "/usr/local/lib/python2.7/dist-packages/haystack/backends/elasticsearch_backend.py", line 170, in update self.log.error(u"%s while preparing object for update" % e.__name__, exc_info=True, extra={ AttributeError: 'ConnectionError' object has no attribute ‘__name__’

I immediately looked at the parts of the traceback referencing code I had written (not shown here) and couldn’t figure out how they would cause this error. I didn’t even know we had a ConnectionError object!

But when I looked at the very last line in the traceback I saw that the error was actually coming from a logger error message not rendering correctly. It was expecting ‘ConnectionError’ to be an object when it was really a string. Which means that the error I should have been trying to diagnose was: why was there a Connection Error while preparing object for update?

Step5: If there’s no traceback or not enough of one, take a look at the logs for more details. We use Python’s logger tool. The HTTP server we use is Gunicorn, so the logs I’ve been looking at are in the var/log/gunicorn directory. You can either look at the last few lines (e.g. last 100 lines) by running this command in your terminal

tail -n 100 /var/log/gunicorn/my_project.log

or you can leave it open while you run your code to watch the errors appear as they happen

tail -f /var/log/gunicorn/my_project.log

Step6: Wrap the offending code in a try/except block. In the except, throw in a logger.error with as much info in it as you can.

Example: Here is the last half of a traceback similar to one I was getting

File “/my_project/app/api.py", line 1504, in add_share UserArticleRelationship.objects.get_or_create(user=user, article_id=article_id) File "/usr/local/lib/python2.7/dist-packages/django/db/models/manager.py", line 146, in get_or_create return self.get_query_set().get_or_create(**kwargs) File "/usr/local/lib/python2.7/dist-packages/django/db/models/query.py", line 491, in get_or_create obj.save(force_insert=True, using=self.db) File “/my_project/app/models.py", line 5537, in save article, user = self.article, self.user File "/usr/local/lib/python2.7/dist-packages/django/db/models/fields/related.py", line 384, in __get__ rel_obj = qs.get(**params) File "/usr/local/lib/python2.7/dist-packages/django/db/models/query.py", line 404, in get self.model._meta.object_name) DoesNotExist: Article matching query does not exist.

I started by looking at the line

UserArticleRelationship.objects.get_or_create(user=user, article_id=article_id)

At first I was confused, how could a get_or_create throw a matching query error? If there’s no match, it would create an object. Then I realized it wasn’t the UserArticleRelationship object that was the problem, it was the Article, so I focussed my attention on the article_id variable.

I wrapped the line in a try/except like this

try: UserArticleRelationship.objects.get_or_create(user=user, article_id=article_id) except Article.DoesNotExist: logger.error(“Couldn’t find article with id %d.” % article_id)

Then I ran the code again while watching my logs. Turned out article_id was 0, not what I was expecting, which was a big clue of where to look to solve the problem.

Step7: Google the error. Maybe obvious, but after getting absorbed in the trace I sometimes forget this is an option.

Hopefully you don't need anymore steps!

[katepdonahue]

Django Admin Commands

which I thought were called management commands, but not so, according to the Django documentation which I trust. But don't look at that yet! Because I'm about to tell you how to do it right now.

It's like Rails rake tasks!

create a file/ the necessary folders inside your project like this:

app/management/commands/name_of_command.py

In the file put this:

from django.core.management.base import BaseCommand, CommandError from app.models import Model_That_You_Need class Command(BaseCommand): help = “Description of what the command does” def handle(self, param1, param2): # all the code you want to run when you call this command

Then run the command from your project directory in your terminal:

./manage.py name_of_command

Ok, now you can do look at the Django documentation. It really is quite good.

[katepdonahue]

Markdown?

You can edit your tumblr posts in markdown

go to your settings (the gear up top)

select 'dashboard' on the right side

select 'markdown' from the 'Text Editor' dropdown

Tab in your code:

cd /delvenews ./manage.py migrate app --list

The code is monospaced! But other than that it wasn't so good in my previous theme (Ashley), so I changed my theme to 'Strict' with a few minor css edits.

From a brief browse, some themes that show code snippets well when you edit in markdown are:

Linear

Strict

Pink Touch 2

I'll have to go back and fix my other posts to really use this markdown.

[katepdonahue]

Django: Querying the Database

Django: Querying the Database

Here are the two basic ways to query the database in Django. get and filter:

<ModelName>.objects.get(<unique_attribute>=<value>)

—> returns a <ModelName> object

<ModelName>.objects.filter(<nonunique_attribute>=<value>)

—> returns a Django QuerySet object

for example:

Article.objects.get(id=2)

—> returns the article with id=2

Article.objects.filter(author=“Kate”)

—> returns a QuerySet object with all the articles Kate has written

What can you do with a QuerySet object? It’s a bit like a Python list (a Ruby array).

You can access particular article objects by index

Article.objects.filter(author=“Kate”)[0]

—> returns the first article object from the QuerySet

You can chain further queries:

Article.objects.filter(author=“Kate”).filter(source=“New York Times”)

—> returns the articles written by Kate from the NY Times or just write the same thing like this:

Article.objects.filter(author=“Kate”, source=“New York Times”)

except…

Article.objects.filter(author=“Kate”).except(source=“New York Times”)

—> returns articles written by Kate not for the NY Times

You can order by an attribute:

Article.objects.filter(author=“Kate”).order_by(‘-pub_date’, ’source’)

—> QuerySet will be ordered from most recent to least recent (descending because of minus sign) and objects published on the same day will be sorted alphabetically by source (ascending because no minus)

Lookup Types: You can get more complex with your queries by using lookup types.

<ModelName>.objects.filter(<nonunique_attribute>__<lookup_type>=<value>)

Note: that’s a double underscore before the lookup type.

For example the ‘startswith' lookup:

Article.objects.filter(author__startswith=“K”)

—> returns the articles written by authors who start with “K"

A lookup type can also be an attribute: .objects.filter(__=)

For example, what if instead of just a name, the author field was a foreign key which pointed to an Author object.

Article.objects.filter(author__name=“Kate”)

—> grabs the articles written by the Author object with the name “Kate”

What if there’s a many-to-one field. The ‘contains' lookup:

<ModelName>.objects.filter(<has_many_attribute>__contains=<value>)

For example, if articles have many authors.

my_author = Author.get(id=3) Article.objects.filter(authors__contains=my_author)

—> returns the articles written by my_author (co-written, perhaps)

The ‘in’ lookup is the opposite: articles_i_want_to_read = a list or QuerySet object, for this example it’s a list of article names

Article.objects.filter(name__in=articles_i_want_to_read)

—> returns the article objects for the articles I want to read

More lookup types:

__contains   (case sensitive) __icontains  (case insensitive) __in __year          (for datetime attributes) __startswith __lte             (less than or equal to) __gte            (greater than or equal to) __exact        (assumed to be exact if no “lookup type”) __iexact       (case insensitive lookup, __exact is default lookup) __isnull=True/False

And pk = primary key interchangeable with id.

Django docs on queries.

Complete lookup types here.

[katepdonahue]

Switching Branches and Merging with Schema Migrations (Django and Vagrant)

This is specific to working with Django and Vagrant, which runs a virtual Ubuntu Linux server on my local computer.

If you have created a schema migration and migrated, you must roll back the migration before you switch branches.

If you have created a schema migration you must delete it (and rollback if you've migrated) before merging your branch or merging another branch into your branch.

Example:

You are on branch extension.

You have added a has_parent attribute on the Organization model.

You've created a new migration for this attribute

You've run the migration.

Now you want to merge your extension branch into master and push master.

Show a list of migrations:

cd /delvenews ./manage.py migrate app --list

It will look something like this:

(*) 0289_auto__add_analyticsevent (*) 0290_auto__add_field_organization_has_parent

Rollback to migration 0289 to rollback the migration you created (migration 0290).

./manage.py migrate app 0289

Now if you look at the migrations list...

./manage.py migrate app --list

...it will look like this:

(*) 0289_auto__add_analyticsevent ( ) 0290_auto__add_field_organization_has_parent

The steps up to this point should be run any time you want to switch to a different branch. The following steps apply only if you want to merge your branch.

Delete the schema migration file.

cd app/migrations rm 0290_auto__add_field_organization_has_parent.py

Switch to master branch and pull to make sure it's up to date.

git checkout master git pull origin master

Merge in extension branch.

git merge extension

Migrate any schema migrations that may have come with the git pull on master.

./manage.py migrate app

Create schema migration for the has_parent attribute that you created on extension.

./manage.py schemamigration app --auto

Migrate again.

./manage.py migrate app

Push.

git push origin master

Done!

[katepdonahue]

I Work for Wiser

Just wanted to say that the company I've been working for for 4 weeks now (can't believe it) just launched on Monday --and with a new name. So now it's easier for me to tell people where to work.

I work at Wiser. It's a social news reader for teams and organizations. I will probably say that sentence the same way every time I say it.

[katepdonahue]

Editing Django's Admin Site

Django has a built in Admin framework that creates a GUI for messing around with the objects in your database. 

The home page of the admin section is a list of all your class names, which each links to a list of all the instances of that class. From this page you can add or delete instances, or click on an existing instance to go to the edit page.

There are a lot of ways to customize your admin site by adding specifics to an <ObjectName>Admin class for your Object. This method is useful if you want to add columns to the class page for the object or if you want to add more editable information on the instance edit page. But if you want to do something completely different you can also overwrite blocks of code or even whole pages (though this last one is not recommended).

I wanted to add a link that would show up on the edit page for each instance of the Email class. Here’s how I did it.

1. Figure out the name of the file you want to add to. Do this by going to the django github and checking out the admin files. To me it wasn’t obvious straight away what each of these files did, so I opened them up for some context. Once you think you have the right file, do step 2 and 3, repeat until you actually have the correct file. I needed change_form.html, which is the edit/create page for a class instance.

2. Create your file that will overwrite the old one by adding a file here:<django_project>/templates/admin/app(this may need to be the name of your app)/<class_name>/<filename.html> (if you want your changes to affect all class instances don’t have the class_name directory) my file path was delve news/templates/admin/app/Email/change_form.html

3. Each admin file is built up of blocks of code titled 'block whatever'. Choose a block name that looks like it takes up a lot of the page by looking at the file on the django github. I chose the block ‘content', because it sounded important. Add this to your file:

4. Check out your admin page locally and see if “Hello World” appears. If not, try another block name, or another filename until you are affecting the correct file.

5. Once you have the right file, play around by changing the block name until you are overriding the block that you want to edit. For me this was the 'objects-tools-items’ block.

6. Copy and paste the code from your target block on django’s usual change_form page and put it in your block on your change_form.html file. The code I copied was:

7. Add to the code so that you get what you want. I added a list item with a link in it:

8. If it’s not working: Bad news, the file you were looking at on github may not be what your django file actually looks like because of different versions so you have to find the version of this file in your local django. Mine was  /usr/local/lib/python2.7/dist-packages/django/contrib/admin/templates/admin/change_form.html. Open that up and copy the target block of code over and make your changes.

The End.

[katepdonahue]

Quick Guide to Debugging Your Chrome Extension

1. Right click on your icon, select 'inspect popup'.

2. The chrome web inspector will appear, click the 'Source' tab.

3. Set some breakpoints in your javascript by clicking the code line numbers.

4. Type 'location.reload(true)' into your web inspector console. The extension will reload and hit the breakpoints.

5. Play around in the code at the breakpoint.

This is all very well documented in google's chrome extension debugging documentation but I stopped reading when I hit the word 'breakpoints' thinking I could figure it out from there-- which I didn't-- so this guide is for impatient people like me.

Google has great chrome extension tutorials and documentation, but that doesn't stop me from running into problems! More soon.

[katepdonahue]

Django Guidelines

I just finished my second week of my first Web Development job. It’s a full stack position and I’m using Python for the first time since before the Flatiron school and Django for the first time ever. I constantly have a million questions but I’ve been getting better at struggling to find the answer on my own before asking anyone. Never have I come up with so many ways to Google the same phrase.

Anyway, this post is about the first things I learned about Django:

This is the first Django project I’ve ever looked at so it’s hard not to generalize everything I see as THE way to do things, which is not good because it turns out Django is not as strict in its file structure as Rails is. In Django the rules are more like guidelines.

With that in mind I will still try to generalize.

The good news is every Django project follows the MVC pattern that we know and love. But here’s where things get confusing. MVC stands for Model View Controller. In Rails, the Models are called models, the Views are called views and the Controllers and called controllers. How nice. Well in Django the Models are called models (ok, hear me out), the Views are called templates (I’m ok with it, it still makes sense), and the Controllers are called views (WHYYYYYYYY). But now I know, and even though I will still call them the wrong names for I don’t know how much longer, I have moved pass denial and grief and am in the period of acceptance.

Now, more specifics about the files:

A Django project will always have a urls.py file for the routes, a views.py file for all the “views”, a templates folder for all the templates, and models.py file for all the models. These will all be in the same file structure related to each other so that Django can find them.

So let’s walk through the typical flow of a Django app.

Django uses Regex to match the url and names the capture of the book id to use in the view. More on why the url has the line "name = 'book'" in a later post.

Jade is an alternative to the Django templating language (which is called "the Django templating language") which is pretty similar to HAML.

And that's all for now.