Analyze any URL and determine if the page has a mobile-friendly design.
Category: Hacking
Create or Update with a Django ModelForm
I recently had a use case where I needed to have a single form that could act as either a create or update form. The tricky part was that I wouldn’t know which one was necessary until the data was submitted by the user.
To solve this, I started with Django’s generic UpdateView and overwrote the get_object method so that it would either get the existing record or create a new one (using get_or_create) based on the data being submitted. In my case (and the example below), I had two values that determined whether a new record was necessary or if an existing one should be used.
The underlying ModelForm didn’t require any modification (you could even just use Django’s automatically generated ModelForm by specifying the model in your view).
Here’s the code:
Sort Django Query (Order By) Using Values Within IN()
In MySQL, you can use the FIELD() function to easily sort a result set by a list of ordered ids:
To accomplish this in Django, you can make use of the extra() QuerySet method to create an additional field in the SELECT statement which can then be using for sorting in the FIELD method.
Combine 2 Django Querysets from Different Models
If you’ve ever tried to concatenating two or more querysets from different models (i.e. combined = queryset1 | queryset2), you’ve hit this lovely error:
Cannot combine queries on two different base models.
The solution to this is to use itertools.
This allows you to not only combine the querysets into a single iterable, but it also allows you to sort the entire set by a shared field such as the date created:
Google Analytic’s API Using Python and a Service Account
I’m currently building out a metrics dashboard and I wanted to incorporate Google Analytics data along with my own data. Google maintains a Python client so I figured this would be easy. Grab some OAuth 2 keys and away we go.
Sadly that’s not the case. It took a bit of digging and piecing together numerous articles and blog posts to get everything working.
So here’s how to do it…
1) First you’ll need to login to the Google Developers Console and create a new project. If you’ve already got a project to use, you can skip this step.
2) Next, activate the Google Analytics API for your project.
3) Then create your credentials by creating a new service account.
4) When you create the credentials, you will automatically download a P12 key file (.p12). Save this with your Python application as you’ll be using it shortly.
5) The next step is SUPER important – even though you’ve created API credentials, you still need to give them permission to access your Google Analytics account. Follow the steps outlined here to add a new user to your Google Analytics account, using the email address generated as part of the service account above.
6) Now that we’ve got all of that set up, we’re ready to move over to Python. First step is to install the requirements:
7) Since we’re going to use the P12 key, we’ll also need to install pyOpenSSL:
8) Finally, it’s time for the code…
Apple Pay Website Integration – A Guess
Benedict Evans wrote a great post on Apple Pay and asked the question – what’s next?
Well here’s a guess (pulled from these tweets)…
1/12
I haven’t seen Apple Pay website integration discussed much yet
2/12
So here’s a guess as to how it will work…
3/12
At the beginning of a site’s checkout flow (i.e. before filling out any forms), you’ll click the Pay button
4/12
The site will ping Apple via the API which will in turn ping your iOS device (similar to 2-factor auth)
5/12
You’ll select the card to pay with and use your thumb to approve
6/12
The site will then receive a payment token to charge the order to
7/12
Ideally the site could then pull your billing / shipping info from Apple to skip those forms as well
8/12
The only step remaining will be to hit the checkout button (perhaps you tap your thumb a second time to confirm)
9/12
Simple, clean and no more credit cards online
10/12
Bonus – an obvious extension is to use the same system for 2-factor auth
11/12
Rather than enter the code shown in Google Authenticator or Authy, just press your finger
12/12
Which begs the question, could you even remove the password requirement?
Using Typekit CDN Web Fonts Locally While Offline (No Internet Connection)
I’ve got an important demo coming up in a few weeks (more on that at a later date) and like any good presenter, I’m going to assume that things won’t work. WiFi will be slow or non-existant (maybe I won’t upgrade to Yosemite just yet), my local web server will mysteriously stop responding and I’ll drop my laptop on the way there.
So at a minimum I’ll need two computers prepped with a site that will run 100% correctly without an internet connection. A backup screencap of the demo is probably a good idea as well.
For the majority of the application, running offline won’t be an issue – point the config files at a local database, turn off the CDN, etc. But there’s one resource that is strictly web-based – Adobe’s Typekit. As of this writing they only provide CDN access to the fonts so you can’t simply download the font files and use them.
Presenting without the fonts is not an option so either I purchase the actual font files for a few hundred bucks or I figure out how to hack Typekit.
Obviously I’m going with option two so here we go…
If you’ve used Typekit before, you’ll be familiar with the following snippet they provide to add fonts to your site.
This JavaScript file is responsible for loading the CSS that contains the font data from Typekit’s CDN (the URL is set in line 9 – “f”:”//use.typekit.net…”). So the first thing to do is download this file and save it locally.
The next step is to grab the CSS file that’s specified in the JavaScript file (the use.typekit.net address in line 9).
UPDATE: It appears that Typekit has changed the way the CSS file is loaded. You’ll need to use a tool such as Chrome’s network inspector to retrieve the full URL to the file. It will look something like this:
Now we’ve got the two files necessary to render the fonts, but we need to do a couple things before they’ll actually work.
First we need to update the HTML snippet to point to our local JS file.
Next edit the JS file so that it points to the local version of the CSS file (specifically, set the following to your local path – “f”:”/offline/fonts/”).
The important thing to note here is that I haven’t pointed directly to the CSS file (i.e. “f”:”/offline/fonts.css”). Unfortunately the JS file adds a slash to that URL based on some regex which prevents it from loading (i.e. /offline/fonts.css/).
So rather than figure out what to edit in the JS, I simply set up a new view in Django to serve the file at a path with a slash at the end (i.e. “f”:”/offline/fonts/”).
With that in place, I can now run the site completely offline without depending on Typekit’s CDN for font delivery.
And one last note, don’t forget to set Typekit to allow your local domain as explained here.
