Megan Taylor

web developer, hack-n-slasher, freelancer, news & data junkie, bibliophile, Flyers fan, sci-fi geek and kitteh servant

post

This month, CSS turned 17 and JavaScript turned 18

Much has happened, both to CSS and the Web, since those days. But on its 17th birthday, I’d like to acknowledge the creators, custodians and champions of CSS in those early days. These were the days before blogging (in any mainstream sense), twitter, and other social media. Indeed, these were the days of newsgroups, the water cooler of the web for its first decade at least. And many of the most important figures in the development, and success, of CSS (and as a consequence the modern web) are little known, though they are the giants whose shoulders we all stand on.

by John Allsopp via Web Directions.

The JavaScript community is moving ahead, often with its usual dramatic “two steps forward one step back” dance, with detractors now being more vocal. JavaScript is no longer the underdog, but the establishment. Keeping that upstart “everything is possible” mentality going for as long as possible will be the challenge of the next 18 years of the language, as it heads into adulthood with a new-found confidence.

via Resin.io.

post

Stupid, Lazy Programmers?

“It may sound amazing, but you could be a better programmer if you were both lazier and more stupid.

First, you must be stupid, because if you are smart, or if you believe you are smart, you will stop doing two of the most important activities that make a programmer a good one: Learning and being critical of your own work…Second, a good programmer must also be lazy because only a lazy programmer would want to write the kinds of tools that might ultimately replace much of what the programmer does…Perhaps paradoxically, the road toward effective stupidity and laziness can be difficult and laborious, but it deserves to be traveled in order to become a better programmer.”

By Mario Fusco via Be Stupid and Lazy – Programmer 97-things.

Related:

Why Good Programmers Are Lazy and Dumb by Philipp Lenssen.

How to be Lazy, Dumb, and Successful by Jeff Atwood.

post

Link Roundup!

Because I’ve been lazy and just posting links on Facebook and Twitter…Pardon the emphasis on ScriptEd and computer science education, this week is CSEdWeek.

“Nationwide there are 3.3 million seniors in high school but in 2012 only 26,000 took the AP Computer Science Test. Wouldn’t it be great if students could try programming while in high school? Why aren’t more high schools teaching computer science?” Why Teach Computer Science in High Schools? | Brian Heese.

“There is also the expert noob, who still haven’t mastered the subject but is already able to get through the most common problems without external help. The expert noob might even be able to teach others.” Being a noob | Blog | Miller Medeiros.

Want to teach kids code? Apply to volunteer with ScriptEd! In particular, we’re looking for Brooklyn folks!

“If we behave like facts don’t matter, then one day they won’t.” Why facts matter — Inside MATTER — Medium.

This is a great list of tips for educators looking to incorporate computational thinking into their curriculum. Also, not just for girls. Beautiful Pixels: Preserving Girls’ interest in Computer Science.

“Even if we taught every disadvantaged young person to code, they would still not have access to the opportunities that today’s successful programmers and technology experts enjoy.” Learn to Code Switch Before You Learn to Code – Anil Dash.

This blog post by one of my ScriptEd students. “I think the one thing I like best about learning to code is the different possibilities for study it provides. Aside from just “coding,” or creating websites, there’s Artificial Intelligence, Computer Engineering, Robotics, and Web Design, among many other topics. It shows that computer science is not just about numbers, but can include Art, writing, problem solving, and multiple ways of thinking.” Not Just About Numbers: A Young Woman’s Perspective on Computer Science Education | Kendra Farrell.

Infographic: “The Job/Student Gap in Computer Science.

“The core of the idea is this: teach others as a way to teach yourself.” My free degree  — Medium.

This video in which ScriptEd students, volunteers and internship providers speak about their internships with ScriptEd.▶ ScriptEd Summer Internship Program – YouTube.

“The Processing Hour of Code was designed to inspire new programmers to try their hand at programming, and what better way than to write some real code that will help other people and improve the tutorial?” An Hour of Code spawns hours of coding.

Two 24ways articles on accessibility: Why Bother with Accessibility? and Coding Towards Accessibility.

post

Support my fundraising team for ScriptEd!

hackathon4-52852ce1f13ecScriptEd is the nonprofit I work with to teach HTML, CSS and JavaScript (the basic languages of the web) to high school kids in low-income schools.

From now until January 9th, we’re competing with other nonprofits to raise money. Nonprofits that raise the most money will be awarded additional funding from Crowdrise!

Make your holiday donation to ScriptEd.

Our students are currently getting ready for ScriptEd’s end-of-semester hackathon, where they will build web apps using the skills they’ve learned and compete for prizes.

These kids are really amazing. ScriptEd is an after-school program, so this is in addition to their normal courses and they work really hard!

Make your holiday donation to ScriptEd.

post

Questions About APIs and Dirty Data and Best Practices

So I’m working on this Farmers Market Locator project, and I’ve got a pretty basic version up and running. Everything is client-side. And I’m using the New York State Open Data API to get the information on the farmers markets. Right now, all that happens when you use the site is a query to Google to find out where you are, and then a query to the NYSOD API to get the nearest markets’ info, and then some Google Maps API stuff. But some of the data is a little dirty: missing spaces in addresses, that kind of thing.

More complications: There’s a bunch of features I want to add, some of which involves incorporating data from the USDA Farmers Market API. Now the USDA API has a little more info about the markets, like what kind of products are sold at each market. This data might also be pretty dirty. And as far as I can tell, the only way to match up markets between the two APIs is to do string matching. (Meaning that, having determined that the Union Square Farmers Market is the closest to your location, I then have to search the USDA API for “Union Square Farmers Market”)

Is there a better way to approach matching up the markets between the two different APIs? Do I need to switch to a back-end solution? What’s the best way to clean up the dirty data? Should I be pulling this info into something else, like a Google Spreadsheet, clean it up there, and make queries to the spreadsheet instead of NYSOD?

I don’t even know how to approach this.

Edit: Adding links to raw JSON.

http://data.ny.gov/resource/qq4h-8p86.json

http://search.ams.usda.gov/farmersmarkets/v1/data.svc/zipSearch?zip=10008

Edit: Some suggestions have been made…but as usual they only spawn new questions.

  • Best way to match markets:
    • search name (problem: not standard)
    • search address (problem: not standard)
    • use URLs as keys (problem: what URLs??!!)
  • Cleaning up dirty data:
    • You can use a back-end solution with some data store OR you could do it all in JS. If you were to do it all in JS you would just have to call a few API’s, compare the data returned, fill in missing data from one API with data from another. You would also need to decided which would have priority if there was a conflict. (problem: wouldn’t doing all that matching, comparison, and cleaning on the client-side make it slower?)
    • I think you are wise to consider grabbing the data, cleaning it up and storing it under your own backend. This allows you to keep your app up and running even if they change their format. (sure your data might get stale, but probably not by much, and it would buy you time address any new formatting from your sources) You could pull down the source data, create your combined json set, and just use that. (depending on how huge all the data was) While a backend solution might sound really complicated, it doesn’t have to be. A google spreadsheet could work, or Google Fusion tables, or Parse.com, FireBase.com, or Tableau.

So far the best suggestion is pretty close to my initial idea, but I’m hoping to get some more feedback on this before I commit myself. Chime in!

post

Getting Rid of Blue Links in Emails for iOS

I recently put together an email for JNF regarding a fancy event in NYC. The email was pretty great-looking, medium blue background color, white copy, black NYC skyline image at the bottom, really different from what we normally send out. Unfortunately, after hitting “Send,” I was almost immediately bombarded with complaints that on iOS devices, certain parts of the text were turning blue – a shade of blue that really didn’t show up well against the medium blue background color. Whoops.

JNF-GoE-blueJNF-GoE-white
Apparently, iOS devices highlight pieces of text that might be useful in your calendar or mapping application: dates, times, locations, etc. So all that copy was now practically illegible. I did some digging around the internets, and this article turned up repeatedly as the definitive solution: Update: Banning Blue Links on iOS Devices. Great! The email was scheduled to be resent in a couple of weeks anyway, so I would implement the fix for the resend.

Whomp Whomp. None of the suggestions in the article worked for me. After hours of testing, I finally gave up, got rid of my lovely blue background, and applied the same color (nearly indistinguishable from the color iOS uses) for the text. If anybody out there has an alternate solution for the blue link problem, I’d love to hear about it.

After this experience, I have several questions: How do other people conquer the blue link demon? Why does email (easily the most used form of communication for the past decade) still rely on technology and standards from the early 90s?

post

Thinkful Unit 3 Comprehension Checks

Lesson 1

Assignment 1

Describe what event binding is and how it can be used to make your pages interactive.

Event binding attaches a handler to an event for the DOM elements.

Events can be:

  • A mouse click
  • A web page loading
  • Taking mouse over an element
  • Submitting an HTML form
  • A keystroke on your keyboard

So you can have elements appear, disappear, animate, etc., based on events.

What are the advantages of using the first block of code over the second?

$(‘#my-div’).on(‘click’, function() { ...do stuff...; });
vs.
$(‘#my-div’).click( function() { ...do stuff...; });

the ability to bind to multiple events at once
use “namespaced” events

What does .preventDefault() do, and when would you use it?

prevents the default action of an event, like clicking on a link or a button

What does .stopPropagation() do, and when would you use it?

prevents ‘event bubbling’ – when an event is triggered for a nested element and then is triggered for every element up the DOM.

How and why would you use this in an event handler?

this allows you to target a specific element, while still binding to a high-level element. This is called event delegation.

Give an example of event delegation and explain its advantages.

Event delegation lets you bind fewer event handlers, which can be a big performance gain. It also lets you bind to parent elements and know that event handlers will fire as expected even if the contents of that parent element change.

Assignment 2

How can you set the fast and slow speeds for jQuery animations?

The predefined speeds are specified in the jQuery.fx.speeds object; you can modify this object to override the defaults, or extend it with new names:

// re-set an existing predefined speed
jQuery.fx.speeds.fast = 50;
// Since we've re-set the 'fast' speed, this will now animate over the
// course of 50 milliseconds
$( '.hidden' ).hide( 'fast' );

Why might you be further ahead using CSS animations instead of jQuery for mobile devices?

In modern browsers, and especially on mobile devices, it is often much more efficient to achieve animations using CSS rather than JavaScript.

What must you do to the spelling of properties like font-size that have hyphens if you want to reference them in a jQuery animation method?

If you want to animate a CSS property whose name includes a hyphen, you will need to use a “camel case” version of the property name if you do not quote the property name. For example, the font-size property must be referred to as fontSize.

How can you stop a jQuery effect?

.stop() will stop currently running animations on the selected elements.
.delay() will pause before the execution of the next animation method. Pass it the number of milliseconds you want to wait.

Lesson 2

Assignment 1

Memorize both syntactically correct ways you can call jQuery’s .ajax() method.

$.ajax({
 url: '/data/people.json',
 dataType: 'json',
 success: function( resp ) {
 $( '#target').html( resp.people[0].name );
 },
 error: function( req, status, err ) {
 console.log( 'something went wrong', status, err );
 }
});
$.ajax( '/data/people.json', {
  type: 'GET',
  dataType: 'json',
  success: function( resp ) {
    console.log( resp.people );
  },
  error: function( req, status, err ) {
    console.log( 'something went wrong', status, err );
  }
});

What are success and error callbacks, and how do they work with .ajax()?

Success Callback: A function to be called if the request succeeds.
Error Callback: A function to be called if the request fails.

Make sure you understand that how and why the return command of an ajax() call will return before the server to which the request was made has responded.

AJAX requests run asynchronously —  the $.ajax method returns before the request is finished, and this function’s return statement runs before the request is complete.

What is JSON and what can you use it to represent?

JSON is a string representation of data.

What are the .get() and .post() methods?

If we’re just making a simple request — and if we don’t care about error handling — jQuery provides several “convenience methods” that let us use an abbreviated syntax. Each of these methods takes a URL, an optional data object, and an optional callback for handling a successful request.

$.get( '/data/people.html', function( html ){
  $( '#target' ).html( html );
});
$.post( '/data/save', { name: 'Rebecca' }, function( resp ) {
  console.log( JSON.parse( resp ) );
});

We can send data with our request by passing an object as the second argument to one of the convenience methods.
For a GET request, this data will be appended to the URL as a query string; for a POST request, it will be sent as form data.

How can you use jQuery to serialize and submit form data?

The .serialize() method converts form input to a query string format.

.ajax() calls return a jqXHR object. What are the .then(), .done(), .fail(), and .always() methods on jqXHR objects for?

.then() - attach success and error callbacks
.done() – attach success callback
.fail()- attach error callback
.always() -  attach callback that runs on success or failure

What is JSONP and what does it allow you to do?

Allows you to use data even though it is hosted on another server.

What does an ajax call with JSONP look like in jQuery?

$.ajax({
 url: '/data/search.jsonp',
 data: { q: 'a' },
 dataType: 'jsonp',
 success: function( resp ) {
 $( '#target' ).html( 'Results: ' + resp.results.length );
 }
});

What is the .getJSON() method?

A convenience method to make a JSONP request; if the URL includes callback=? or similar, then jQuery will treat it as a JSONP request.

$.getJSON( '/data/search.jsonp?q=a&callback=?',
 function( resp ) {
 $( '#target' ).html( 'Results: ' + resp.results.length );
 }
);

How can you use $.Deferred() to return a promise?

The deferred.promise() method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request.

Lesson 3

Assignment 1

What is JSON?

JSON (or JavaScript Object Notation) is a lightweight, easy and popular way to exchange data.

What’s a callback and how does it work in the context of a jQuery .getJSON() request?

A callback is a function that is passed to another function to run.

What is JSONP and what does it allow you to do?

JSONP (or JSON with padding) allows a script to fetch data from another server on a different domain.

Assignment 2

What is encapsulation and why is it important?

Encapsulation in an important organization concept for code. It separates code into distinct pieces.
Broadly, encapsulation does one or both of these:

  • restricts access to some of the object’s components
  • facilitates the bundling of data with the methods (or other functions) operating on that data

How can you use object literals to namespace functions?

An object literal is perhaps the simplest way to encapsulate related code. It doesn’t offer any privacy for properties or methods, but it’s useful for eliminating anonymous functions from your code, centralizing configuration options, and easing the path to reuse and refactoring.


// An object literal
var myFeature = {
    myProperty: "hello",
    myMethod: function() {
        console.log( myFeature.myProperty );
    },
    init: function( settings ) {
        myFeature.settings = settings;
    },
    readSettings: function() {
        console.log( myFeature.settings );
    }
};
myFeature.myProperty === "hello"; // true
myFeature.myMethod(); // "hello"
myFeature.init({
    foo: "bar"
});
myFeature.readSettings(); // { foo: "bar" }

The object literal above is simply an object assigned to a variable. The object has one property and several methods. All of the properties and methods are public, so any part of your application can see the properties and call methods on the object. While there is an init method, there’s nothing requiring that it be called before the object is functional.

Explain the DRY concept.

Don’t repeat yourself; if you’re repeating yourself, you’re doing it wrong.

post

Food Walk

food-walk-08-13I have a wonderful friend who lives in NJ and is a passionate foodie. She comes into NYC once every other month or so and takes me on a journey of foot and mouth, walking up to 12 miles in a day to find interesting and delicious things to eat. This is a map of our August walk. Stops included Eataly, Joe’s Shanghai, and Taim, among many others.