Set up a PostgreSQL database at Heroku

For whatever reason, I’ve been slow to embrace Heroku. Its charms are growing on me, though. For a project I made for an online course, creating a PostgreSQL database at Heroku was required. These are the instructions, and they worked perfectly.

  1. Navigate to Heroku, and create an account if you don’t already have one.
  2. On Heroku’s Dashboard, click “New” and choose “Create new app.”
  3. Give your app a name,* and click “Create app.”
  4. On your app’s “Overview” page, click the “Configure Add-ons” button.
  5. In the “Add-ons” section of the page, type in and select “Heroku Postgres.”
  6. Choose the “Hobby Dev – Free” plan, which will give you access to a free PostgreSQL database that will support up to 10,000 rows of data. Click “Provision.”
  7. Now, click the “Heroku Postgres :: Database” link.
  8. You should now be on your database’s overview page. Click on “Settings”, and then “View Credentials.” This is the information you’ll need to log into your database.

* This app name will appear in the URL if later you deploy an online app using this database. So do not name it something generic like “database1.” If your app is about cities in Europe, for example, name it europe-cities. A hyphen is fine. Do not use spaces or other marks of punctuation.

Now, how will you use that database? That will be the topic of a future post. Stay tuned.

Could regex’s days be numbered?

Regex lets us find anything, check for patterns, format accurately — and drives us crazy with anxiety and deepest discomfort. Regex stands for regular expressions, and my fave regex editor for Python is Pythex (I could not possibly write regex without it).

But there’s hope for the future! Check out Rosie and the Rosie Pattern Language (RPL) for Python!

I watched this video (the whole thing) and it just made me feel so happy. Oh, and Rosie works with other languages too!

This post will help me remember “What was that thing I heard about that can replace regex?” when I need to.

See also: Getting Started with RPL in 15 minutes

5-minute JavaScript tutorials

So many tutorial videos are so darned long! This summer, I set out to make a new series of videos for absolute beginners in JavaScript. They are free on YouTube, and here is the playlist:

JavaScript Beginners

Most of these video are shorter than 5 minutes. Only one is longer than 6 minutes (6:43), and I might try to go back and make that one shorter.

I have tried to title each video very specifically so that you can scan the playlist and pick a focused topic without thinking too hard.

The idea was to demonstrate characteristics of JavaScript, as well as the most basic programming concepts, in the JavaScript console — which every modern web browser has. I hope this will encourage beginners to play along and try things out in the console themselves.

Beginner JavaScript Resources

Eloquent JavaScript, 3rd edition (2018), by Marijn Haverbeke: This free online book is available as a PDF, EPUB or MOBI (Kindle) download. I recommend it highly (as do many others).

I urge you to seek out resources at Mozilla Developer Network (MDN) and NOT at W3schools. Here are some great MDN resources for finding answers about JavaScript:

The excellent book series You Don’t Know JS is fully available online to read for free.

These two recently updated Codecademy courses are interactive, hands-on, and really great for beginners:

If you learned jQuery back when it was truly necessary, you might (like me) appreciate this resource for doing all those things using pure vanilla JavaScript instead: plainJS – The Vanilla JavaScript Repository

.

How to get started with Node and Webpack

This is a great guide:

Writing Modular Code: A Starter Guide to Node & Webpack for Web Developers

“This repo was designed to teach news developers about the power of modular development using Node and Webpack. It is not an extensive dive into the merits or philosophies of modular code, nor is it an in-depth lesson on the complexities both Node and Webpack offer. Instead, this guide aims to be a first step for web developers unfamiliar with potentially daunting world of Node and Webpack.”

Written by the great @brizandrew

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.

css.php