Photo Syncing with BTSync for Mobile

Update: Since I wrote this article, I’ve been using the open source Syncthing app on android and all my other devices to sync documents, media files, etc. Use that instead!

Today I decided to setup BitTorrent Sync on my Android phone to sync my camera photos. I’m so happy I did!

BTSync is software based on the BitTorrent protocol which keeps folders syncronized between multiple devices. It supports iOS/Android as well as PC/Mac/Linux, and works well with large files such as full-resolution images and videos.

By sharing the DCIM folder from my Android phone with my laptop, I can ensure that the photos I take on my phone are always backed up, without relying on a cloud sync solution such as those promoted by Google, Microsoft, and Apple. There are plenty of reasons to avoid putting your data on the corporate cloud, including:

BTSync doesn’t have any of these problems, and is phenomenally robust (much moreso than any cloud solution).

Other use-cases for which BTSync is ideally suited:

I’d recommend giving BTSync a try. It’s going to be around for awhile.

2013-10-21

Articles

Notation

@Tangent

This is something that has occurred to me before. The idea is to invent some human-centric notation for embedding specific metadata within typed or written documents.

An example might look like:

todos:
  @Home Create a list of lists to create
  #Done Write blog post about writing a blog post
  1. extend Todo.txt syntax with a type field, different semantics per type
  2. then index and extract

Character development (Character sheet)

Daily Zen

a clue
to my brain division
a password
i sometimes cannot remember

Zurb Foundation

Whereas Bootstrap is somewhat opinionated about style, which leads to lots of boring-looking websites, Foundation components provide behavior and structure, which you can style however you want.

It provides a bunch of reusable patterns such as Block Grid, [Inline List(http://foundation.zurb.com/docs/components/flex-video.html)

References

2013-10-18

Today’s Articles

Things I’m reading

Youtube in a Floating Window

I like to watch conference talks and engineering lectures while I'm working, in a small unobtrusive window. This is great on a retina display. Here's how.

Floating Youtube video in VLC

Youtube in VLC

  1. VLC can open Youtube URLs (drag from URL bar to App icon or paste into open dialog)
  2. By default VLC uses the highest quality stream available, which is bad for cafes etc. You can adjust the quality in Prefs > Show All > “Input / Codecs”

Floating VLC video

To have a floating video window:

Voila!

This is my first journal post. In previous iterations of my primary writing platform (my wiki) my daily (sometimes weekly) journal has served as the first stop in my workflow for developing new ideas, and I’m hoping to apply the same process as a workflow component for blogging. I outline how it works below.

Browser Tab Cleanup > Key research links and thoughts into Journal (or directly into existing articles) > Edit journal > Factor out articles

This workflow happens during the active lifecycle of the journal article, ideally the same day but always within a day or two of the journal entry creation. This is to avoid things falling off, and also the provide a natural mechanism for trivial ideas to EOL early on (by simply never making out of the journal phase).

Below are ideas that I am following today.

Bootstrap Magic, a slick Bootstrap 3 theme creator with support for LESS vars and the whole sheebang!

Jade and LESS: Preprocessors!

Part of my motivation for [moving to DocPad]() is the availability of many preprocessor plugins. Less f****g <div> bulls**t/tag matching hell. - Plunker now supports preprocessors (my test case), as does CSSDeck.

Resolution: attempt port site to DocPad

First commit and push everything (clean WC)

New stories:

Streams #Tech:

I definitely feel like I need to learn more about streams, so I’d like to find ways to work them into my projects (using node will encourage this!)

Let’s make my site work offline Retrospective

I need to remember my original reason for starting this site: writing.Time spent actually blogging is really good for me. I also enjoyed the productive technical work in support of the blogging, but at some point it got to be too risky - I could end up spending a lot of time and not ending up with a working system.

Workflow Work

Break site into:

Journal - Day and title Articles - In-depth

Apply original workflow: call out changes in journal

Classify things by their level of noteworthiness, so I can knock off impulses and not block the stream.

Start small, as writing and editing a post takes time! Publishing messy, unreadable posts draft posts alienates readers.

UX (do this as a “thing”): - Whiteboard a flow diagram for browsing the site - Card exercises - Optimize the navigation - clean up main pagemain page, then out (remove global links to about, tags) - optimize nav on main page Favicon

Idea: circle of things: do them in a rotation so I don’t get stuck in a rut

… > Tech > Writing > Graphics > Writing Editing Content

Organize things under themes/initiatives/projects?

My cosmology

In the beginning there was a dull throb

Around the periphery of the throb, there arose the Ur-desire,

the desire for coffee…

desire blossomed into vacuum, and with it the expanse of space

the vacuum was filled with tiny pores

through the pores seeped the coffee

and from the coffee sprang all else

Automatic Site Rebuilds with Travis CI

Background

Conclusions after creating a few sites with Github Pages’ stock Jekyll compiler

  1. Automatically recompiles are darn convenient.
  2. Constraints can be liberating. However,
  3. My clientside projects often hit Jekyll’s limits.

Jekyll does 3 things when processing a file:

  1. Extract metadata from the file’s YAML header.
  2. If the file is markdown, transform it into HTML
  3. Apply the layout specified in the YAML (recursively).
  4. Evaluate any Liquid template directives.

Support for additional preprocessor languages, such as HAML, SCSS, and Coffeescript, can be added using plugins - but these aren’t available with Github Pages’ Jekyll.

I’ve been looking at alternatives.

The big barrier to moving away from Jekyll is the need to replace the automatic recompiles provided by Github Pages.

that I will have to take care of building the site and pushing the build back to ghpages myself. There are two ways to do this: - manually, from my local development environment - automatically whenever there are changes, by using Github’s repo hooks to kick off an external build process, which would pull the changes, run the build, and then commit + push the output.

This article is about using Travis CI to implement the second option. Specifically, I’m going to be building a site using Docpad.

Walkthrough

Create a new project, using one of the Docpad skeletons. I used the HTML5 Boilerplate one.

Get it building locally, and then push it to a new Github repo.

Setup Github pages on the repo, then update it from your local copy and verify that it is working.

Enable Travis CI for the repo. This won’t do anything until you add a .travis.yml file to the repo.

References

In-page source editor

Idea

In-page content editor using github to store changes

Workflow

click edit
  fetch source from (public) github repo
  make changes to file
click save
  if don't have token
    oauth flow
  if don't have write access
    if don't have fork of repo
      fork repo
    *hand wave*
    create pull request
  else
    commit change

References

Emoji on Webpages

Emoji are pictograph characters with well-defined conventional meanings used for messaging especially in Asia. They are also part of the Unicode standard, opening the possibility of using them all over the Internet, an incredibly exciting prospect for a visual thinker like myself.

A few emoji-supporting fonts are available, such as those included with messaging applications from Apple, Microsoft, and Google. For the web, Emoji Symbols from Japanese font designer blockworks is a free option. The font is woff format (supported by nearly all browsers) and weighs in around 280k compressed.

Example

/*
EmojiSymbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/

@font-face {
  font-family: "EmojiSymbols";
  src: url('/font/EmojiSymbols-Regular.woff') format('woff');
  text-decoration: none;
  font-style: normal;
}
.emoji {
  font-family: "EmojiSymbols";
}
<span class="emoji">&#x1F520;</span>

Next step

Support the text codes used on Github etc.

References

Forum thread discussing emoji fonts at length.

Symbola font contains most (all?) of the emoji, as well as many, many other symbols and is permissively licensed.

iemoji.com offers a sort of dictionary of the meanings of each emoji.

Windows, iOS/OSX, and Android all come with an Emoji font for use in chat programs, but these fonts aren’t licensed for use on web pages. For web use it is necessary to use a font for which you have an appropriate license.

List of emoji characters

🔠 🔡 🔤 🌀 🌁 🌂 🌃 🌄 🌅 🌆 🌇 🌈 🌉 🌊 🌋 🌌 🌍 🌎 🌏 🌐 🌑 🌒 🌓 🌔 🌕 🌖 🌗 🌘 🌙 🌚 🌛 🌜 🌝 🌞 🌟 🌠 🌰 🌱 🌲 🌳 🌴 🌵 🌷 🌸 🌹 🌺 🌻 🌼 🌽 🌾 🌿 🍀 🍁 🍂 🍃 🍄 🍅 🍆 🍇 🍈 🍉 🍊 🍋 🍌 🍍 🍎 🍏 🍐 🍑 🍒 🍓 🍔 🍕 🍖 🍗 🍘 🍙 🍚 🍛 🍜 🍝 🍞 🍟 🍠 🍡 🍢 🍣 🍤 🍥 🍦 🍧 🍨 🍩 🍪 🍫 🍬 🍭 🍮 🍯 🍰 🍱 🍲 🍳 🍴 🍵 🍶 🍷 🍸 🍹 🍺 🍻 🍼 🎀 🎁 🎂 🎃 🎄 🎅 🎆 🎇 🎈 🎉 🎊 🎋 🎌 🎍 🎎 🎏 🎐 🎑 🎒 🎓 🎠 🎡 🎢 🎣 🎤 🎥 🎦 🎧 🎨 🎩 🎪 🎫 🎬 🎭 🎮 🎯 🎰 🎱 🎲 🎳 🎴 🎵 🎶 🎷 🎸 🎹 🎺 🎻 🎼 🎽 🎾 🎿 🏀 🏁 🏂 🏃 🏄 🏆 🏇 🏈 🏉 🏊 🏠 🏡 🏢 🏣 🏤 🏥 🏦 🏧 🏨 🏩 🏪 🏫 🏬 🏭 🏮 🏯 🏰 🐀 🐁 🐂 🐃 🐄 🐅 🐆 🐇 🐈 🐉 🐊 🐋 🐌 🐍 🐎 🐏 🐐 🐑 🐒 🐓 🐔 🐕 🐖 🐗 🐘 🐙 🐚 🐛 🐜 🐝 🐞 🐟 🐠 🐡 🐢 🐣 🐤 🐥 🐦 🐧 🐨 🐩 🐪 🐫 🐬 🐭 🐮 🐯 🐰 🐱 🐲 🐳 🐴 🐵 🐶 🐷 🐸 🐹 🐺 🐻 🐼 🐽 🐾 👀 👂 👃 👄 👅 👆 👇 👈 👉 👊 👋 👌 👍 👎 👏 👐 👑 👒 👓 👔 👕 👖 👗 👘 👙 👚 👛 👜 👝 👞 👟 👠 👡 👢 👣 👤 👥 👦 👧 👨 👩 👪 👫 👬 👭 👮 👯 👰 👱 👲 👳 👴 👵 👶 👷 👸 👹 👺 👻 👼 👽 👾 👿 💀 💁 💂 💃 💄 💅 💆 💇 💈 💉 💊 💋 💌 💍 💎 💏 💐 💑 💒 💓 💔 💕 💖 💗 💘 💙 💚 💛 💜 💝 💞 💟 💠 💡 💢 💣 💤 💥 💦 💧 💨 💩 💪 💫 💬 💭 💮 💯 💰 💱 💲 💳 💴 💵 💶 💷 💸 💹 💺 💻 💼 💽 💾 💿 📀 📁 📂 📃 📄 📅 📆 📇 📈 📉 📊 📋 📌 📍 📎 📏 📐 📑 📒 📓 📔 📕 📖 📗 📘 📙 📚 📛 📜 📝 📞 📟 📠 📡 📢 📣 📤 📥 📦 📧 📨 📩 📪 📫 📬 📭 📮 📯 📰 📱 📲 📳 📴 📵 📶 📷 📹 📺 📻 📼 🔀 🔁 🔂 🔃 🔄 🔅 🔆 🔇 🔈 🔉 🔊 🔋 🔌 🔍 🔎 🔏 🔐 🔑 🔒 🔓 🔔 🔕 🔖 🔗 🔘 🔙 🔚 🔛 🔜 🔝 🔞 🔟 🔢 🔣 🔥 🔦 🔧 🔨 🔩 🔪 🔫 🔬 🔭 🔮 🔯 🔰 🔱 🔲 🔳 🔴 🔵 🔶 🔷 🔸 🔹 🔺 🔻 🔼 🔽 🕐 🕑 🕒 🕓 🕔 🕕 🕖 🕗 🕘 🕙 🕚 🕛 🕜 🕝 🕞 🕟 🕠 🕡 🕢 🕣 🕤 🕥 🕦 🕧 🗻 🗼 🗽 🗾 🗿 😀 😁 😂 😃 😄 😅 😆 😇 😈 😉 😊 😋 😌 😍 😎 😏 😐 😑 😒 😓 😔 😕 😖 😗 😘 😙 😚 😛 😜 😝 😞 😟 😠 😡 😢 😣 😤 😥 😦 😧 😨 😩 😪 😫 😬 😭 😮 😯 😰 😱 😲 😳 😴 😵 😶 😷 😸 😹 😺 😻 😼 😽 😾 😿 🙀 🙅 🙆 🙇 🙈 🙉 🙊 🙋 🙌 🙍 🙎 🙏 🚀 🚁 🚂 🚃 🚄 🚅 🚆 🚇 🚈 🚉 🚊 🚋 🚌 🚍 🚎 🚏 🚐 🚑 🚒 🚓 🚔 🚕 🚖 🚗 🚘 🚙 🚚 🚛 🚜 🚝 🚞 🚟 🚠 🚡 🚢 🚣 🚤 🚥 🚦 🚧 🚨 🚩 🚪 🚫 🚬 🚭 🚮 🚯 🚰 🚱 🚲 🚳 🚴 🚵 🚶 🚷 🚸 🚹 🚺 🚻 🚼 🚽 🚾 🚿 🛀 🛁 🛂 🛃 🛄 🛅 © ® 🀄 🃏 🅰 🅱 🅾 🅿 🆎 🆑 🆒 🆓 🆔 🆕 🆖 🆗 🆘 🆙 🆚 🈁 🈂 🈚 🈯 🈲 🈳 🈴 🈵 🈶 🈷 🈸 🈹 🈺 🉐 🉑 ‼ ⁉ ⃣ ™ ℹ ↔ ↕ ↖ ↗ ↘ ↙ ↩ ↪ ⌚ ⌛ ⏩ ⏪ ⏫ ⏬ ⏰ ⏳ Ⓜ ▪ ▫ ▶ ◀ ◻ ◼ ◽ ◾ ☀ ☁ ☎ ☑ ☔ ☕ ☝ ☺ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏ ♐ ♑ ♒ ♓ ♠ ♣ ♥ ♦ ♨ ♻ ♿ ⚓ ⚠ ⚡ ⚪ ⚫ ⚽ ⚾ ⛄ ⛅ ⛎ ⛔ ⛪ ⛲ ⛳ ⛵ ⛺ ⛽ ✂ ✅ ✈ ✉ ✊ ✋ ✌ ✏ ✒ ✔ ✖ ✨ ✳ ✴ ❄ ❇ ❌ ❎ ❓ ❔ ❕ ❗ ❤ ➕ ➖ ➗ ➡ ➰ ➿ ⤴ ⤵ ⬅ ⬆ ⬇ ⬛ ⬜ ⭐ ⭕ 〰 〽 ㊗ ㊙ 

Firebase + Angular Dive

The app in this dive talks to a Firebase instance and renders using Angular.js.

I've built things with Angular before but this is my first dive into Firebase. Some of the characteristics which make it interesting are:

NoBackend
It does both kinds of auth (Z and N!) so you can dispense with backend code entirely and write your app on the client. The only exception is a simple, flexible language for specifying authorization rules.
Realtime sync
Data is synced automatically to connected clients when changes occur, enabling realtime updates in collaborative apps.
Structured data
Data in Firebase is basically a tree of JSON.

There are several other backends which have similar characteristics, including the open source deployd, which I'll be exploring in a future dive.

You can check out the source on Github using the edit link above.

First things first

I wanted to first get the stack working, so I did the basic Firebase tutorial app as a page in a Jekyll site.

I ran into one silly issue with Jekyll's Liquid processing eating my mustaches before they got to Angular, which was solved by wrapping the whole page in a{% raw %}tag.

{{msg.name}}: {{msg.text}}

Sign In

Next I added authentication. Firebase has social signin built in so it's really easy to get started.

Sign in with Twitter or Github.

You are signed in as {{user.name}} | Sign out

Access restrictions

Being signed in is great, but I wanted to add some protected actions. I modified the chat app so that you are only allowed to post a message if you are signed in.

This would be an input field if you were signed in.

All together now

Here is the finished app.

{{msg.name}}: {{msg.text}}