Joho the Blogtech Archives - Joho the Blog

June 17, 2015

Stylin’ Gmail

I use MailPlane to read my email (via gmail). Having some leisure time I decided to poke around its styling options.

MailPlane’s preferences let you override the default gmail styling with your own CSS. Here are three classes important to the listing of mail in your inbox:

.xY

The entire row

.y2

The message snippet

.zF

Who unread mail is from (other than yourself)

For example:

.xY{
color:white;
background-color: #045D9E;
}
.y2{
color:#8FD5FF;
}
.zF{
color: yellow;
}

That will produce this:

Example of styled inbox

Unfortunately, you never know when Google might decide to change these class names or restructure the entire damn thing. On the other hand, you can always just delete the CSS.

1 Comment »

June 3, 2015

[liveblog] Renee Hobbs on teachers as creators

Renee Hobbs from the Harrington School of Comm and Media is giving a talk about teachers as makers.

NOTE: Live-blogging. Getting things wrong. Missing points. Omitting key information. Introducing artificial choppiness. Over-emphasizing small matters. Paraphrasing badly. Not running a spellpchecker. Mangling other people’s ideas and words. You are warned, people.

The myth of the digital native has hurt teachers and students alike. Students come into classrooms feeling superior. Teachers think the students already know how to use tech.

The concept of literacy is changing. It means being able to go out in the world and do something. That means educators who have to learn concepts like open access, multitasking, transmediation, identity, curation, play. We have to think about who owns our data, how our community is represented, addiction, displacement, and propaganda. And there are more and more “stakeholders.”

There’s a big opportunity to connect culture and the classroom. E.g. minecraft. E.g., analyzing the news. Vital to make connections between school and the world. Popular culture is an important tool for connecting and relevancy. We need to make the “stand and deliver” method obsolete.

There is an art to creating a digital literacy learning environment. Renee has encountered several archetypes:

Teacher 2.0 helps students use media and tech to connect with and learn from others as networked digital citizens. Another teacher is a “spirit guide”: help students use media to support their social and emotional well-being.

So Renee’s group developed a “horoscope”: questions that show what sort of teacher you are, eg., trendsetter, taste-maker, watchdog. (see powerfulvoicesforkids.com), etc.

When teachers become media creators, they gain confidence. It’s important for them to learn how to use the relevant tools. E.g., a couple of teachers made a video about “how to solve a maht problem.” Another made a short video of children helping someone across the street. Another used Screencast-o-matic to capture interaction with a google doc to share a lesson plan. The teachers eventually got more playful and fun.

As teachers became more comfortable as media creators, they were better able to connect to students as creators.

“The same way that music is not in the piano, learning is not in the device.”

1 Comment »

[liveblog] Jeremy Roschelle

Jeremy Roschelle is at Stanford Research leading the Center for Innovative Research in Cyberlearning (Circlcenter.org) is going to talk about cyber-learning. But first he asks to take a deep breath and reimagine learning.

He shows images of places of learning. “What tech we think is good for leaning depends on what we think learning looks like.” Therefore, we need to imagine learning, not tech.

To advance education we need to advance both the science of deep learning and tech.

Jeremy studied with and was inspired by Seymour Pappert.

Learning sciences teach us some principles:


  • Learning is social, and we must design supports for collaboration


  • Learning is multi-representational: it’s important to onnect stories and pictures, and connect the everyday and the symbolic, and enable children to see the meaning among these


  • Learning is in a situation: Take advantage of the setting, the people, the physical world, not only the tech

  • 2 Comments »

September 30, 2014

[d’oh] CSS alpha makes me happy

After all these years, I just found out about CSS alpha as a way of adjusting the opacity of the backgrounds of elements on a Web page.

In the past, I’ve used the opacity setting to do the job. So, if you have, say, a div that’s overlaying another element, setting its opacity to, say, 0.7 will make the entire thing 30% transparent. Opacity, in other words, is inherited by all of an element’s children without the children having any way of contesting the will.

But yesterday the opacity setting wasn’t working on an element for some reason. So I googled around and stumbled upon the alpha setting, which did what I wanted even better. Alpha sets the opacity of the background of the element while leaving the text and border opaque. This is great if you’re putting a label with text over other elements.

Here are two divs that are exactly the same in all their settings except one has its opacity set to 0.5 and the other has the alpha of its background color set to 0.5.

opacity

Notice that the alpha setting has left the text and border un-alpha’ed.

To set the alpha, you have to specify it as part of the rgb color setting, using the keyword rgba. For example, here’s the relevant portion of the CSS of the alpha-ed box in the screen capture above:

#e3{
border: 6px solid #FF8000;
background-color: rgba(255,111,207,0.5);
color: black;
}

And here’s a site that will convert your hex colors into rgb colors.

So, I’m hereby giving myself a giant D’oh slap n the hope that you won’t have to.

Be the first to comment »

September 25, 2014

BoogyWoogy library browser

Just for fun, over the weekend I wrote a way of visual browsing the almost 13M items in the Harvard Library collection. It’s called the “BoogyWoogy Browser” in honor of Mondrian. Also, it’s silly. (The idea for something like this came out of a conversation with Jeff Goldenson several years ago. In fact, it’s probably his idea.)

screen capture

You enter a search term. It returns 5-10 of the first results of a search on the Library’s catalog, and lays them out in a line of squares. You click on any of the squares and it gets another 5-10 items that are “like” the one you clicked on … but you get to choose one of five different ways items can be alike. At the strictest end, they are other items classified under the same first subject. At the loosest end, the browser takes the first real word of the title and does a simple keyword search on it, so clicking on Fifty Shades of Gray will fetch items that have the word “fifty” in their titles or metadata.

It’s fragile, lousy code (see for yourself at Github), but that’s actually sort of the point. BoogyWoogy is a demo of the sort of thing even a hobbyist like me can write using the Harvard LibraryCloud API. LibraryCloud is an open library platform that makes library metadata available to developers. Although I’ve left the Harvard Library Innovation Lab that spawned this project, I’m still working on it through November as a small but talented and knowledgeable team of developers at the Lab and Harvard Library Technical Services are getting ready for a launch of a beta in a few months. I’ll tell you more about it as the time approaches. For example, we’re hoping to hold a hackathon in November.

Anyway, feel free to give BoogyWoogy a try. And when it breaks, you have no one to blame but me.

1 Comment »

September 15, 2014

Linux on an old Mac

It looks so far like Mint (a Linux distribution) is working on my 2006 MacBook — one of them old white plastic models. I wiped out the entire disk, so there’s no Mac left except what Apple burned into the hardware. As far as I can tell, everything is working, from audio, to trackpad, to wifi.

Here’s how I did it: I tried everything.

Unfortunately, I can’t quite remember what worked, except that I used Mac Linux USB Loader to create the USB stick from which I booted the Mac into Linux. I also used Iso 2 USB EFI Booter to get the Mac to boot into Linux, although I’m not sure I actually needed that since I wasn’t going for a dual boot.

But I do know that the thing that put me over the top were some commands listed in a comment on a page about how to manually install a bootloader. I was there because after I eventually got Linux installed, it still wouldn’t boot. The article on that page was helpful but I was stilling getting the weird-ass “canonical cow” error message when trying to install grub (the standard Linux bootloader) — you’ll know that error message when you see it. But the commands in the comment at the end by Zigilin got it working:

instead of running grub-install, run cmd below:

mount –bind /proc /mnt/proc

mount –bind /dev /mnt/dev

mount –bind /sys /mnt/sys

chroot /mnt

grub-install /sd#

update-grub

(Replace the # in sd# with the letter of the partition you installed the Linux into. Better: read the article.)

After you get it working, you might want to check this post about how to add some finishing touches.

Thank you, kind Internet strangers!

Be the first to comment »

August 17, 2014

fadeOut, fadeIn jQuery-style

Time for another in my series of occasional posts over-explaining simple programming tasks that took me longer to figure out than they should have.

Let’s say you’re writing a bit of JavaScript and want to fade the text of a component out, change the text, and fade it in. Assume you’re using jQuery to handle the fades. Assume that the component has an ID of “fader” and you want its initial text of “First” to be replaced by the text “Second.” Ok?

Here’s the simple HTML:

<div id="fader">First</div>

With jQuery, you fade an element out by first selecting the particular element. which you can do by putting its ID in quotes and prefixing it with a #: $("#fader"). Then you tell that element what method you want to execute, which in this case is the jQuery “fadeOut” command, with a duration expressed in microsecondsmilliseconds. Put ’em together and you get the simple-but-powerful jQuery statement: $("#fader").fadeOut(500);. Likewise for the fadeIn command.

If you’re me, the first thing you’ll try will be:

1

function fadeMe(){

2

$(“#fader”).fadeOut(500);

3

$(“#fader”).text(“Second”);

4

$(“#fader”).fadeIn(500);

5

}

Click here to give it a try on the following sample text:

First

That’s not right. At least in my browser (Chrome). Instead of fading out “First” and fading in “Second,” the word “Second” fades out and then in. Presumably that’s because Javascript isn’t waiting for jQuery to complete the fadeout before moving to the instruction to substitute “Second” for “First” as the element’s text.

So here’s a way that works. (Note that I’m not saying it’s the best or right way. If it’s worse than that, if it’s actually the wrong way, please leave a comment and I’ll link to it at the top of his post. Thanks!)

1

function fadeMe(){

2

$(“#fader”).fadeOut(500, function(){

3

    $(“#fader”).text(“Second”);

4

    $(“#fader”).fadeIn(500);

5

});

6

}

Click here to to try it on the text below:

First

The difference is that the second way adds a function to the jQuery’s fadeOut command that is invoked only after the fadeOut is completed. That function changes the text of the element and fades it in.

(Click here to reset both examples.)

(PS: I created the tables for the code by pasting it in here.)

Be the first to comment »

May 19, 2014

Popup balloon help: cheap, easy, sort of working

The right way to add popup help balloons to your javascript app is to download Qtip, a jquery library that works and gives you excellent control over how your popup balloons work. I’ve used it in other apps, but last night I couldn’t get it to work with my Google Books -> Harvard Library mashup — it uses the Google Books API to do full text searching of books, and then tries to find the results in the Harvard catalog — I think because I need to use an older version of jquery because another set of tools in this app requires it. So, I decided to scribble together a very simple balloon help.

This html page demos it and contains in its source the very simple javascript and css. NOTE: I’m sure that I’ve implemented it in a boneheaded way and that it won’t actually work except under ideal conditions. Best I can do.

The basic way this works:

  • The element that will get a popup help should have an attribute called “help.” The content of that attribute will be the content of the balloon. E.g. <p help=”This is some <em> help</em>.”>

  • Declare the elements getting a balloon to be position:relative.

  • Create the help balloons using the CSS styling you’d like, but make their position absolute. Use margin-top and margin-left to position them relative to the element they’re explaining. Don’t forget about negative margins.

  • Change the mouseenter event for elements with the “help” attribute. Also the mouseleave event.

Remember, I probably did some things very very wrong. Use Qtip or some other library that works and works reliably. But, having written this for myself, I figure I ought to share it. (And, by the way, the Google Books -> Harvard Library code is here. Have pity on a poor amateur.)

Be the first to comment »

September 2, 2013

Merging my Google Plus accounts

I made the mistake many years ago of creating a Google Accounts email address in addition to my existing Gmail account. Thus I have been plagued (granted, it’s an excellent example of a First World Problem plague) with two out of sync accounts.

Gmail works fine because “self@evident.com” is my public-facing email address and has been since about 1994 when first I took the evident.com domain. (Yes, children, there was a time when you could register an existing word with all its vowels just by being the first to claim it.) When you send mail to that address, it shows up in my evident@evident.com Google Account. It also shows up at my dweinberger@gmail.com account, which now has 12,722 unread messages in it. Nevertheless, the “system” works for me.

But it does not work for me at YouTube.com, where I have two accounts that cannot be merged. I’ve tried.

And I thought it didn’t work at Google Plus. But recently I’ve been getting friend requests (or Circle requests, I guess) at G+ for evident@evident, whereas my social network (such as it is) is at dweinberger@gmail. Since I do very little with G+ anyway, it only bothers me because I hate rejecting friends’ requests, even though they’re trying to join a G+ that I don’t ever check and that currently has a total of 7 people in it. So, I googled for info, and found that Google Takeout promises to move my dweinberger Circles over to evident. Google seems quite serious about it: access is limited during the first 48 hours, the transfer takes up to 7 days, and you can only request one transfer every six months.

We’ll see how it works. In any case, I do appreciate the Google Data Liberation Front commitment.

And perhaps now my Circles will be unbroken.

56 Comments »

August 7, 2013

When push buttons destroyed civilization

Rachel Plotnick has an article in Technology and Culture called “At the Interface: The Case of the Electric Push Button, 1880-1923″[1] that begins by recounting the early reaction to push buttons. She cites a book by “educator and activist Dorothy Canfield Fisher”:

Fisher recognized how use of push-button interfaces had contributed to making electrical experiences effortless, opaque, and therefore unquestioned by consumers. She and others worried that if button-pressers could not envision the mechanical processes that happened behind buttons, they would lose all ability to navigate in the world. [p. 814]

We obviously didn’t get perpetually lost, but that doesn’t mean that Fisher was wrong to raise the alarm, especially if the alarm was raised by slamming down on a big ol’ button.

The rest of the article is about the educational strategies used by manufacturers, journalists, advertisers and others, starting in 1880, to “make button interfaces intelligible to consumers.” [815] She notes a split between those who thought customers would be more comfortable with electricity if they understood what happened on the other side of the button and those who thought it best to keep electricity as uncomplicated to the user as possible. Business was at stake here: Rachel notes that by 1915, push buttons were letting us take electricity for granted, which meant “the electrical industry faced an apathetic populace” that didn’t appreciate the complexity or expense of their service.[835]

Fascinating…


..And slightly reminiscent of a 1950 instructional video from AT&T on how to dial a rotary phone.

In fact, here’s an earlier public service announcement:


[1] Rachel Plotnick, “At the Interface: The Case of the Electric Push Button, 1880รข??1923,” Technology and Culture, Volume 53, Number 4, October 2012, pp. 815-845 DOI: 10.1353/tech.2012.0138

Be the first to comment »

Next Page »