One-line web page tools - example: sorting text

Sometimes you need to quickly get a small job done, such as sorting text.

I created a few tools that are coded in just the URL alone.  The whole web page app is just entered into a data URL. These can be saved as a bookmark and the tool is ready to go quickly any time, offline, without sending data anywhere.

Coders are likely to handle this in their favorite text editor, or command line tool.  But why not in a new tab for the browser you're already in?

There are many online tools to do this type of work too, but there's always the risk that you don't know where the data is going.  These one line tools give me the confidence the text stays private.

To use these tools:

1. Copy one of the URLs below and paste into your browser (just like you'd enter a webpage URL).
2. Optionally bookmark it, so that you can get to it in the future easily.
3. Put text into the text box.
4. Click off the text area, or use Tab key, to move focus away.  The code runs and sorts the text.
5. Copy sorted text, ..., profit.

Sort Lines

data:text/html,<textarea autofocus style="height:100%; width:100%" onchange="value = value.split('\n').map(x => x.trim()).filter(removeEmpty => removeEmpty).sort().join('\n')" >

Sort Line by Commas

data:text/html,<textarea autofocus style="height:100%; width:100%" onchange="value = value.split(',').map(x => x.trim()).filter(removeEmpty => removeEmpty).sort().join(', ')" >

Sort Line by Spaces

data:text/html,<textarea autofocus style="height:100%; width:100%" onchange="value = value.split(' ').map(x => x.trim()).filter(removeEmpty => removeEmpty).sort().join(' ')" >

To Uppercase

data:text/html,<textarea autofocus style="height:100%; width:100%" onchange="value = value.toLocaleUpperCase()" >

To Lowercase

data:text/html,<textarea autofocus style="height:100%; width:100%" onchange="value = value.toLowerCase()" >

Once you've started, it's easy to make new ones for future needs.  Leave a comment if you've found a new variation helpful.

Credibility Bet Game

Current state of a game around 2004 at Studio Gigante

The Credibility Bet Game is a lighthearted game great for a medium sized work team or large group of friends. It's a playful way to challenge folks on knowledge, skill, or random outcomes.

I initially designed it to stop a lunch argument, saying something like, "stop arguing and just bet on it, and go test it."

One of the engineers replied that betting for money was against their religion... and thus the fake credibility currency was born!

1. Everyone starts with 100 credibility points.
2. At any time make a bet on anything except where people are put in danger, e.g. alcohol.
3. Bets must be whole positive numbers, the smallest bet is 1 point.
4. Bets can have odds E.G. "I bet 10 of my points for 1 of yours."
5. Multiple people can bet at once, just treat them all separately.
6. Don't disturb bets, others should stay quiet on a topic if a bet is forming up so as to not spook anyone from quitting the bet.

Keep a list somewhere of who's got how many points. For more fun, record each bet along with some trash talk.

GDC 2014 Schedule Highlights

My quick scan of the GDC 2014 Schedule:

• The Year in Free-to-Play Games - Monday 10:00
• Animation Bootcamp: An Indie Approach to Procedural Animation - Monday 16:00
• Turing Tantrums: AI Devs Rant! - Monday 16:30
• Google Developer Day (Presented by Google) - Tuesday 10:00
• This will be live-streamed.
• Antichamber: An Overnight Success, Seven Years in the Making - Tuesday 11:15
• The Connection Between Boys' Social Status, Gaming and Conflict - Tuesday 12:45
• From Indie to AAA to Indie: The Rebirth of Design - Tuesday 13:45
• Analysis and Lessons from the Global Free-to-Play Market - Tuesday 15:00
• Bringing Console Quality Lighting to Mobile (Presented by Imagination Technologies) - Tuesday 15:00
• Indie Soapbox - Tuesday 16:30
• ID@Xbox: Introduction to the Xbox One Console (Presented by Microsoft) - Wednesday 09:00
• Flash Forward - Wednesday 09:30
• Moving to the Next Generation: The Rendering Technology of Ryse - Wednesday 11:00
• Porting Realm of Empires from Facebook to Mobile HTML5 - Wednesday 11:00
• Creating Unique Interactive Experiences with the PlayStation4 (Presented by Sony Computer Entertainment America) - Wednesday 12:00
• ID@Xbox: What's New in Live for Xbox One (Presented by Microsoft) - Wednesday 13:00
• ID@Xbox: Faster, Better: An Overview of Tools and Performance for Xbox One (Presented by Microsoft) - Wednesday 14:00
• Mantle - Introducing a New API for Graphics (Presented by AMD) - Wednesday 14:00
• OpenGL ES 3.0 and Beyond: How To Deliver Desktop Graphics on Mobile Platforms (Presented by Intel Corp) - Wednesday 14:00
• Authoring Tools Framework: Open Source from Sony's Worldwide Studios (Presented by Sony Computer Entertainment America) - Wednesday 15:30
• Next-Generation AAA Mobile Rendering - Wednesday 15:30
• Mobile Programmers Roundtable: iOS - Wednesday 15:30
• Rendering Battlefield 4 with Mantle (Presented by AMD) - Wednesday 15:30
• The Last of Us: Human Enemy AI - Wednesday 17:00
• A Context-Aware Character Dialog System - Thursday 10:00
• Classic Studio Postmortem: Lucasfilm Games - Thursday 10:00
• Code Clinic: How to Write Code the Compiler Can Actually Optimize - Thursday 11:30
• Rant Apocalypse: The 10th Anniversary Mega Session - Thursday 11:30
• Approaching Zero Driver Overhead in OpenGL (Presented by NVIDIA) - Thursday 13:00
• Ask the Experts: Professional Programmer's Panel - Thursday 13:45
• Classic Game Postmortem: Robotron: 2084 - Thursday 14:30
• Ellie: Buddy AI in The Last of Us - Thursday 16:00
• Engine Postmortem of inFAMOUS: Second Son - Thursday 16:00
• Classic Game Postmortem: Zork - Thursday 17:30
• Distribution & Tools: Building your Game for the Modern Web and Finding an Audience (Presented by Mozilla) - Thursday 17:30
• Experimental Gameplay Workshop - Friday 14:30

I'd love to hear sessions that stand out to you.

(Regular Expression used on their CSV export:

^"([^"]*)","2014-03-.. ([^"]*):00","[^"]*","[^"]*","([^"]*)".*$

\1 - \3 \2

)

Tablet and Google Hangouts Screenshare as KVM secondary monitor

Main display on KVM showing Linux workstation,
while monitoring Mac on tablet

I use a single 30" monitor while working across several workstations, but I'd like to know when some long running operations (e.g. building Chrome, or running tests) complete. Robert Ginda suggested using a spare tablet and Google video hangouts with screenhare. Works great!

- From source machine: open a hangout with yourself (I typed my own email address into the gmail hangout panel)

- Start a video chat, and from there a screenshare.

- Open hangouts on phone or tablet, join the existing video chat, have a second view!

- Flip back to other workstation on main display while you wait.

Preserving Girls' interest in Computer Science

My wife put together a great list of tips recently for educators asking for advice on incorporating computational thinking into their curriculum. I heartily agree with these thoughts:

1. Appeal to a variety of interests by presenting a wide range of computer science applications. Provide lots of answers to the question "Why do I want to learn to program? What can I do with programming that I'm interested in?" Not all students may be motivated to make games. Help them find an application they are passionate about.
2. Make the point that computer science isn't just relevant for "computer people". You can be a great programmer and love it without knowing everything about computers.  Also, programming skills are applicable to many careers, not just software engineer.
3. Provide encouragement. There are a lot of forces pushing girls away from computer science. Help combat this by encouraging students. You may provide the crucial support a vulnerable individual needs to persist. 
4. Recognize that there can be a tendency to attribute academic shortcomings to lacking intrinsic ability. If a student believes she is "failing" in a class (keep in mind this is in her eyes, which may be a B), she may conclude that she is not smart enough for the subject as a whole. Emphasize that other factors such as study skills (and sleep!) can have a huge impact on performance.
5. Don't take lack of interest in a subject at face value. Perceived self-efficacy affects interest. A student may not be interested, in part, because the student does not feel confident. 
6. When stress is too high, the ability to learn decreases. If a student is feeling insecure, incapable, or otherwise stressed, performance may decrease. Don't assume that low scores indicate lack of potential. 
7. Feeling "out of place" can be very distracting. Instead of listening to the course material, a student may be focused on her minority status or how uncomfortable she feels (imagine trying to listen to a teacher with loud static in the background). The student may need a different environment, in which she feels comfortable, in order to focus. 
8. Provide actual programming practice. Show that programming isn't mysterious or too complicated to comprehend. You don't need secret "computer knowledge" to succeed. Demonstrate what to do when you don't know the answer. 
9. Understand the reasons that the pipeline is leaky. For one, staying in it is exhausting. If a student doesn't know why this is the case, she might be more likely to think it is just her and give up. It might take awareness of the factors involved and the deliberate decision to stay anyway.
10. Encourage students not to rule out any careers due to expectations about difficulty achieving acceptable work-life-family balance. There are a lot of options out there. 
11. Don't try to "weed students out". Instead, encourage students to sign up for another class. Students don't have to commit to a life of programming; just stay in computer science a little bit longer. 
12. Have female teachers and role models. Show that you don't have to be the stereotype. 

GDC Sessions for HTML5 games on web and mobile

GDC sessions that caught my eye related to building games on web tech:

Native Apps? With HTML5? Yes You Can! (Presented by Google)
Joe Marini  |  Developer Advocate, Google
... Chrome Packaged Apps platform allows the creation of native app experiences using HTML5 technologies that work offline by default, have access to native platform features, and can run across a variety of operating systems.

Fast and Awesome HTML5 Games (Presented by Mozilla)

Vladimir Vukicevic  |  Engineering Director, Mozilla Corporation
Alon Zakai  |  Senior Researcher, Mozilla Corporation

... JavaScript tooling and execution allow near-native-code speeds. Combined with standards such as WebGL, Web Audio, and the rest of the HTML5 stack, the modern web is emerging as a platform for high-quality games ...

Multiplatform C++ on The Web with Emscripten
Chad Austin  |  Technical Director, IMVU
Emscripten is a compiler of LLVM bitcode into JavaScript. With Emscripten, programs written in C++ can run straight from your web browser, and no plug-ins are required. ... why IMVU has chosen Emscripten as part of its multi-platform engine strategy ...
(Tragically, a time conflict with 'Fast and Awesome HTML5 Games' by Mozilla, which overlaps content wise)!

Nintendo Wii U Application Development with HTML and JavaScript

Ryan Lynd  |  Senior Software Engineer (NST), Nintendo Software Technology
Kevin McCullough  |  Software Engineer, Nintendo of America
Takeshi Shimada  |  Deputy General Manager, Software Environment Development 
... HTML and JavaScript have empowered a whole new wave of developers that have previously been excluded from Nintendo console development - until now! This session will introduce a new way of rapidly developing Wii U applications that takes full advantage of unique Wii U features while reducing development times significantly.


Game Development with Google Cloud Platform (Presented by Google)

Yanick Belanger  |  Server Architecture Lead, Electronic Arts

Ryan Boyd  |  Developer Advocate, Google

Chris Elliott  |  Solutions Architect, Google

Dan Holevoet  |  Developer Programs Engineer, Google

Momchil Kyurkchiev  |  CEO, Leanplum

Michael Manoochehri  |  Developer Programs Engineer, Google

Luca Martinetti  |  Founder and CTO, Staq Inc.

Google Cloud Platform provides everything you need to build, run, and scale social, mobile, and online games. Already, tens of thousands of popular applications like SongPop, Angry Birds, SnapChat, and Legend of Monsters ...

Supercharge Your Game With YouTube (Presented by YouTube)

Satyajeet Salgar  |  Product Manager, YouTube Live & Sports
Ibrahim Ulukaya  |  Developer Programs Engineer, YouTube
Jarek Wilkiewicz  |  Developer Advocate, YouTube
... By integrating your game with YouTube, you can share rich and authentic game experiences that are more likely to convert viewers into gamers than any other medium. In this session, we will highlight integration examples and best practices with special focus on mobile. We will also give you a sneak peek at our latest live streaming platform APIs. ...

HTML5 Cross-Platform Game Development: The Future is Today (Presented by Ludei)
Ibon Tolosana  |  CTO, Ludei
HTML5 is finally ready for cross-platform game development. We'll explain best practices for HTML5 game development, case studies and how to overcome issues to make HTML5 games work.

Rapid Development of High Performance Games for Mobile and Web
Ricardo Quesada  |  Software Architect, Zynga
This talk will be about the cocos2d JS, a complete toolchain for developing multi-platform games for both the Web and Mobile, which goes all the way from rapid prototyping to a finished high performing game. There are three main components: a game engine (cocos2d), a physics engine (Chipmunk), and a visual editor (CocosBuilder). For the web, no plugins are required. For mobile, it uses JavaScript bindings for the C/C++ version of cocos2d and Chipmunk, and achieves a performance 10 times faster than other JS engines/JS accelerators. ...

HTML5 Audio: Coming to a Mobile Game Near You!
Jory Prum  |  Sound Guy, studio.jory.org
... possibilities the new Web Audio API enables audio developers when building games for the web. ... With the adoption of the new W3C's new Web Audio API (available in Chrome, Safari, and iOS 6), tremendous possibilities exist, ranging from simple audio playback to object- and event-triggered audio. There are advanced filtering and reverb capabilities built in, 3D positional panning, and all available with extremely low latency. ...

Have fun at GDC!

Chrome's FPS Histogram

Eberhard Gräther has improved the FPS meter in Chrome. I particularly like the histogram added on the right hand side. It allows you to easily see how long your frames are taking, and if your frame rate is bouncing around between different values.

You can check it out by

1. Opening up Chrome's developer tools (3 bar menu in upper right, Tools, Developer Tools)
2. Opening up the options (gear menu in bottom right)
3. Enabling 'Show FPS Meter' in the rendering section.

Or, in about:flags you can enable it always.

It's handy to see, e.g. when you are missing some frames and oscillating between 30 and 60fps: