Eval in Python 3; or, how to restore a string to a dictionary or list

One of my students scraped a website and built a CSV from the data. Inadvertently, he had some columns that appeared to contain a list of Python dictionaries. To his surprise, he found he could not read these as lists or as dictionaries directly from his CSV.

I knew that they were stored as strings, and I knew there must be a way to restore the data to its original data types. Google led me to Stack Overflow (of course), and the solution could hardly be simpler:

from ast import literal_eval
result = literal_eval(my_string)

We were then able to pluck out the value of a given dictionary key-value pair with ease.

ast is a built-in module (see docs).

Python and pickle

So you’ve got a complex object in Python, and you want to write it out to a file. For example, a dictionary of dictionaries. You can’t just write it out as you would plain-text.

This article from DataCamp gives a great explanation of the pickle module, which not only solves that problem; it also goes the other way, enabling you to un-pickle the saved data and use it in its original complex form.

This writing out of a data object is especially important for journalists, because you’ll want to be able to check and re-check your results. If you re-scrape data, the new dataset might not be the same as the one you used in the first place.

Note that there is also something faster (for very large datasets) called cPickle, but for Python 3 it has changed to _pickle (see this post).

pickle is a built-in module (see the docs).

The hidden danger in target='_blank'

Now I know why I often see rel="noopener" inside <a> tags. But it turns out rel="noopener" is not enough! We really need this:

<a href="https://somesite.com/" target="_blank" rel="noopener noreferrer">

Read more here.

tl;dr — The page that is opened in a new tab or window can change the window.opener.location property so that a user who goes back to your page will fall into phishing-scam hell!

I’ve seen this happen from those annoying cover-all pop-up adds on mobile, and I’ve learned the only way out is to close the original window or page. Now I know why.

ES6: New things in JavaScript

Today I read 4 Modern JavaScript (ES6+) Features You Should Be Using Now, by Mosh Hamedani. He says these are “the 20% of features that you use 80% of the time.” Plus, they are all “natively supported in all modern browsers.” (Here’s a nice link to a chart showing which features are supported in which browsers.)

Aside: This is the best ES6 reference I know. It’s by Luke Hoban.

var message = 'Hi ' + name + ',';

var message = `Hi ${name},`;

Top: Old way to concatenate strings and variables. Bottom: New way, using “template literals.” Note the two backticks in the bottom line.

Use of let and const instead of var: Both of these define variables scoped to the containing block, such as a for-loop.

var square = function(number) { 
   return number * number; 
} 

Above, the old way of writing an anonymous function. Below, the new way, with the “fat arrow” (=>):

const square = (number) => { 
   return number * number; 
} 

Lots more about those fat-arrow functions in Mosh’s post.

Destructuring lets us “extract properties from an object, or items from an array.” The syntax is like this:

const { street, city, state } = address;

That creates three new variables, with the values of address.street, address.city, and address.state from an existing object, address, with those properties. Syntax for extracting from an array is similar; see the post for an example.

Intrinsic Web Design

Jen Simmons just ushered in this new name for the way(s) web design is changing. She has been adding great videos on her YouTube channel, Layout Land, for about the past two months. She gave this presentation at An Event Apart in Seattle yesterday. There are notes on what she said here and here.

Oh, yeah, her talk is titled “Everything You Know About Web Design Just Changed.”

Now we can use white space in web design, for real.

We can squish, or shrink, or stretch. Deliberately.

Even media queries are changing. This is beyond responsive design, which has been our paradigm for eight years (!) already.

See Simmons’s cool examples of grid and more.

Also this great video series of how to write CSS that works in every browser.

A new Flask tutorial for journalism students

This semester I’ve been gradually building out a single, comprehensive python-beginners repo at GitHub, and the latest segment is all about getting started with Flask — a popular Python framework for building web apps (and easier than Django).

I have tried to use various books and online tutorials to teach Flask for the past two years, but I’ve finally given up on that because there’s just so much extra stuff (confusing for my students), or they are outdated and largely wrong now, or both.

Miguel Grinberg’s new, fully updated mega-tutorial for Flask is comprehensive and thorough — but it’s just too thorough, really, for journalism and communications students who only learned Python about four weeks ago.

Workout with flexbox

I started and completed the Code School flexbox course today, and then started and finished the surprisingly fun Flexbox Froggy exercises to reinforce what I’d just reviewed. It was very helpful to do this combination.

I wrote some Flexbox notes here back in August. Now I’ve got a more complete set of notes (offline) and a new Pen to remind me how to use flexbox the next time I need it.

Leaflet for interactive maps

The latest update I’ve made to a handout for students is Introduction to Leaflet.js. Leaflet is a JavaScript library for creating very flexible interactive maps, using a variety of tile sets — which enables you to make a map that looks quite different from a Google Map. There are lots of options for customization.

The Leaflet Quick Start Guide is good, but it doesn’t walk a beginner through how to enable the use of Mapbox tile sets, even though Leaflet recommends using them. Mapbox changed drastically about a year back, and those changes made it necessary to rewrite my tutorial.

Separately, I have a Leaflet assignment for students in their seventh week of working with JavaScript.

Highcharts for data charts and graphs

I had to update my resource document Getting Started with Highcharts because the library has been updated, and jQuery is no longer required. The document covers:

  • Installation
  • Your First Chart
  • Changing Colors and Styles
  • Setting and Changing Chart Options
  • Licensing and Payments
  • Interactive Demos with jsFiddle
  • Which Chart Type Should I Use?

Separately, I have a Highcharts assignment for students in their third week of learning JavaScript. It includes a GitHub repo.

Accessibility resources

Last night I went to a local developers meetup. Two people spoke about accessibility and shared these tips and links.

Web Content Accessibility Guidelines (WCAG)

These guidelines come from the W3C, and there are three levels of compliance. Level A is the minimum, and level AAA is the highest standard.

How to Meet WCAG 2.0 is the most user-friendly guide (there are several, with various amounts of complexity and details).

Web Content Accessibility Guidelines (WCAG) Overview is much more detailed (and less user friendly).

General tips to make sites accessible

  • Indicate errors (e.g. in a form submission) with icons and/or text — not only with color.
  • Popups and overlays must be able to be closed with a keyboard action, and not require a mouse click.
  • Field labels must be provided as readable text; do not use only the overwritable placeholder text inside a form field.
  • Use focus as well as hover if you have popup information. That is, make it appear on focus as well as on hover.
  • Line-height should be 1.5x (ugh — I prefer 1.4x).
  • Use @media print { } to write CSS specifically for printing — this might help with accessibility for some users (media queries).
  • I always tell students: “Don’t use click here as a link.” A good way to explain why: Make sure the purpose of the link can be determined by the link text alone.

Tools and sites to help you make your pages, apps accessible

Audits in Chrome Developer Tools — this is awesome! Use it to test your pages.

tota11y.js “helps visualize how your site performs with assistive technologies.” It is “a single JavaScript file that inserts a small button in the bottom corner of your document. (It’s on this very page.)” Go there, click the small button, be amazed.

Color Safe — this site generates color palettes! “Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

WAVE, an online website analyzer — open this, paste in a URL, and see what happens. Also mind blowing.

ChromeVox is a free screen reader. Blind people use a screen reader to read the web out loud to them. If you install this Chrome extension, you can hear how a screen reader reads your page.

The A11Y Project: “A community-driven effort to make web accessibility easier.” Nice resources! Just take a look and you’ll see at a quick glance how helpful this can be.

Use an a11y linter — this advice applies especially if you’re using grunt or gulp in your workflow. If not (e.g. you only make small projects), the tools listed above will suffice.

aXe Chrome extension — not sure we need this if using Audits (see above), but it will find accessibility defects on your site.

NOTE: Accessibility is often abbreviated as a11y, where the number 11 refers to the number of letters omitted. It is often pronounced like alley.