Chrome OS / Chromebooks

Jul 16 2016

Send to Kindle

I’ve been curious about Chrome OS and Chromebooks for a while now. A couple of months ago I replaced my daughter’s dead laptop with a cheap Chromebook and she loves it. The only thing she really misses is Minecraft.

Then, the other week, I got interested in the idea of running Android apps on Chrome OS. This is a recent development that only works on a few specific devices as of this writing, but will be pushed out to a lot more in the coming months. I decided to dive in and get a Asus Chromebook Flip, as it’s one of the devices that do support Android apps out of the box at this time. It’s also got decent specs at a decent price. $260-$280 with 4GB RAM and 16GB storage, plus and SD card slot for more storage. It’s also got the Lenovo-Yoga-type-flip-around thing going on, which means you can use it as a tablet or other configurations. I never use my Yoga like that, but with the smaller size of the Asus, it’s actually workable.

First of all, I’ll say I’ve had pretty bad luck with hardware on this adventure. My first flip would not accept an SD card. It just wouldn’t click in. Popped right out. I really wanted the extra storage, so I got a replacement. Second one, card reader was fine, but the touch screen was not. Phantom touches all over the place. Amazon admitted they were having issues with their current inventory and suggested I get a refund and order from another supplier. So I returned that and reordered another one direct from Google. Hoping third time is a charm. I looked at a bunch of other models and the Flip is really what I want, and beyond the stuff that was broken, I really liked the device.

I won’t try to sell you on why you should get a Chromebook, because none of these arguments worked on me. I don’t think they are for everyone. But you won’t really know whether or not you like it until you experience it. What I really liked about it was:

A. The size. Small, lightweight. Like a tablet, but with a real keyboard.
B. Great battery life. Really amazing battery life.
C. Instant on. Even if you need to reboot, it’s seconds.
D. Virtually maintenance free. Nothing to install. I can grab any Chromebook anywhere, sign into Chrome, sign into LastPass, and it’s totally my computer with all my apps there. Sign out, remove the account, and it’s like I was never there.

As far as the Android apps side of things, this turned out to be a bit of a letdown for me. Not because they didn’t work, but because once I had all my apps set up and went into the Play Store to look for apps, I couldn’t think of any that I really needed. All my web apps and Chrome apps had me pretty much covered. I tried a few anyway and for the most part they were fine. One of the more intensive games I tried crashed a couple of times. Other than that, no issues, just not as much of a need as I thought there would be. Time will tell.

So what do I use this for? Mostly for web, email, youtube. Actually watched some Netflix and Amazon Prime shows on it, no problem. For web entertainment stuff, great. General productivity stuff, also great. Google docs, etc. works nice. If I were going to do more serious typing, I’d use an external keyboard and maybe a monitor. The Flip’s keyboard is a bit small, but feels pretty decent otherwise.

Of course, a lot of people would ask about coding on the device. For me, I’m not quite sure yet. Obviously, you’re not going to run Android Studio or any large web dev ide, Visual Studio or XCode on it. But there are several Chrome based coding IDEs which are half decent.

There’s the Chrome Dev Editor which is surprisingly nice. It actually creates a localhost server to test your in-dev app, has git integration, templates, projects, publishing capabilities, etc. The github page for the project says it’s no longer in active development, but the lastest update in the Chrome store says March of this year. This editor is especially useful if you are developing Chrome Apps or Extensions. That’s really what it’s made for, although it can do regular web apps as well.

Caret is another very popular and capable editor. It’s modeled after Sublime Text, so there’s a lot there you’ll find familiar. Very extensible.

Of course, if you need to work on more complex projects, that include specialized build systems, etc. You’re going to need to jump into cloud dev. Cloud9, Koding, Nitrous.io are some worth checking out. These all set up your projects on a server somewhere and give you a graphical IDE to edit and run that code on the server.

There’s also the possibility of running a different OS on the Chromebook itself. There is a way to get a special Linux build on there, which makes it capable of doing a lot more. Can’t speak for that myself yet, as I haven’t tried it. Here are some links on Chromebook dev:

https://divshot.com/blog/tips/using-a-chromebook-for-web-development/

http://www.eq8.eu/blogs/18-chromebook-for-web-developers

https://www.google.com/search?q=chromebook+development&oq=chrome+book+develo&aqs=chrome.2.69i57j0l5.6950j0j4&sourceid=chrome&ie=UTF-8

Send to Kindle

No responses yet

I made a Chrome Extension

Jul 16 2016

Send to Kindle

The other week I got a new Chromebook. Mainly just to see what the user experience was, but I surprised myself by liking it a lot more than I expected I would. But that’s another story.

I started being more interested in Chrome Apps, which work in Chrome on a regular PC or Mac as well, and started looking into the development process of Chrome Apps and Extensions. Pretty cool stuff. So here is my first extension, Chrome Apps Shortcut.

https://chrome.google.com/webstore/detail/chrome-apps-shortcut/eobiahopcndogkgfjedmneomoghnpjpp?hl=en-US&gl=US

It barely does anything. Literally a one liner in terms of code. But I made it as a solution to an actual problem I had. Your Chrome Apps are displayed in a special page in the Chrome. If you use the bookmarks bar, you can add a shortcut to that location there. Or, if you use the default new tab page, there’s a shortcut there. I don’t use either of those things. I use a custom new tab page. So the only way to open the Chrome Apps page was to type in “chrome://apps” in the url field. Furthermore, because this is a custom url scheme, most methods of creating a shortcut to a web page do not work with that. At least none of the methods that I usually use. I looked for an extension that would do what I wanted, and there wasn’t one, so I made this.

All it does is put an icon up in the extensions area at the top of Chrome. You click it, it opens the Apps page in a new tab. The Code to do this is here:

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript({
        code: chrome.tabs.create({url:"chrome://apps"})
    });
});

And even most of that is boiler plate. I just added the chrome.tabs.create({url:"chrome://apps"}) part.

There’s also the manifest, and all the icon files…

{
  "manifest_version": 2,
  "name": "Chrome Apps Shortcut",
  "short_name": "Chrome Apps Shortcut",
  "description": "Opens the Chrome Apps tab.",
  "version": "0.0.1",
  "minimum_chrome_version": "38",
  
  "icons": { 
    "16": "icon_16.png",
    "48": "icon_48.png",
    "128": "icon_128.png" 
  },
  "browser_action": {
    "default_icon": "icon_48.png"
  },
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions": [
    "tabs",
    "https://ajax.googleapis.com/"
  ]
}

And then in order to publish, you have to set up your Chrome Developer Account ($5 one time fee) and create screenshots, descriptions, blah blah blah.

All told though, from concept, to published in store, was maybe 2-3 hours. Most of that was looking up how to do stuff.

I want do dive more into packaged apps next. There are some great possibilities there. Learn more here:

https://developer.chrome.com/home

Send to Kindle

No responses yet

Quicksettings.js 1.3

Jul 15 2016

Send to Kindle

Did a bit of work on Quicksettings.js recently. Mostly based on some features suggested in issues and pull requests. A quick summary:

1. A few new controls:

  •  addNumber. Basically the same as addRange, but displayed as a numeric text field with up and down buttons. Actual render may differ per browser / platform.
  •  addDate. Where supported, will show a date field with a button to click that shows some kind of date picker. In Chrome you get an actual calendar. In some implementations, it’s just a text field. Input and output are both strings in the form “YYYY-MM-DD”.
  •  addTime. Like date, but for time. String format “HH:MM” or “HH:MM:SS”. 24 hour time.
  •  addPassword. Basically, addText, but text is hidden as asterisks, dots, or whatever the platform does with it.

All of those have corresponding bind, set and get methods as well.

2. Method chaining. Great suggestion. Now, all methods that do not actively return some value will return a reference to the panel itself. So you can do stuff like:

var panel = QuickSettings.create(10, 10, "Panel")
.addRange("x", 0, 100, 50, 1)
.addRange("y", 0, 100, 50, 1)
.addRange("w", 0, 100, 50, 1)
.addRange("h", 0, 100, 50, 1)
.setGlobalChangeHandler(myChangeHandler);

That makes me really happy.

Here’s a master demo showing all the controls: http://htmlpreview.github.io/?https://github.com/bit101/quicksettings/blob/master/demos/master_demo.html

And all the code that creates that demo: https://raw.githubusercontent.com/bit101/quicksettings/master/demos/masterdemo.js

When you figure that almost a quarter of that code is for making a canvas and drawing a circle in it, and the rest creates everything else on the page, that’s not bad.

You can check it out, download it from here, or just use the cdn links:

https://cdn.jsdelivr.net/quicksettings/1.3/quicksettings.min.js

Don’t forget to add one of the styles:
https://cdn.jsdelivr.net/quicksettings/1.3/quicksettings.css
https://cdn.jsdelivr.net/quicksettings/1.3/quicksettings_minimal.css
https://cdn.jsdelivr.net/quicksettings/1.3/quicksettings_minimal_dark.css

Send to Kindle

No responses yet

Amateur

Mar 28 2016

Send to Kindle

The word “amateur” has gotten a bad meaning over the years. Amateur is the opposite of professional. It has come to mean someone is sloppy, or someone who doesn’t care about what they are doing. But really the unprofessional part is more literal – you are doing something that is not your profession. You are not paid to do this for a living. This largely comes from the sports world. A professional athlete gets paid to play the sport. An amateur does not.

We’ve conflated this meaning of professional with another meaning of the word – to take pains to do something carefully and with good quality. Thus, we think of an amateur as someone who does shoddy work because they are inexperienced.

If you look back at the etymology of the word, amateur comes from the Italian “amatore”, from Latin “amator”, lover, from “amare”, to love.

So an amateur is someone doing something they love, without getting paid for it. This seems more like something we should praise people for, rather than using the word as an insult.

Of course, in this day and age, it’s far easier to move into a position where you can start getting paid for doing what you love. If you make stuff, you don’t have to do a long apprenticeship and open up a brick and mortar shop somewhere. You can just sell it on Etsy or wherever, or set up your own site with a shopping cart. The lines have blurred, but still useful to keep these definitions in mind.

Send to Kindle

No responses yet

QuickSettings CDN

Feb 24 2016

Send to Kindle

A few people were asking for the QuickSettings Library to be added to a CDN for ease of use in projects. I finally got around to doing this. It’s now hosted on https://www.jsdelivr.com/.

To use QuickSettings in a project, you can directly link to the main minified js file at:

https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings.min.js

You’ll also need to add one of the QuickSettings style sheets.

Plain:

https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings.css

Minimal:

https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings_minimal.css

or Minimal Dark:

https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings_minimal_dark.css

JSBin

You can add QuickSettings to JSBin semi-permanently. While on the JSBin page, open the browser’s console. Emphasis on browser’s console. NOT JSBin’s console section. And paste in this snippet:

libraries.add({text: "QuickSettings", scripts: [ {text: "QuickSettings", url: [ "https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings.min.js", "https://cdn.jsdelivr.net/quicksettings/1.0/quicksettings.css"]}]});

This will be saved via your browser’s local storage, so you don’t need to do this every time. Generally once per machine/browser. Now you can hit the Add Library dropdown and scroll down to see QuickSettings. Select that and QuickSettings is added to the current bin.

CodePen

This also works on CodePen. Create a new pen and go into the pen settings. In the JavaScript section, add the url to the quicksettings.min.js file above. And then in the CSS section, add the url to the CSS file of your choice. You’re good to go.

I’m not as familiar with CodePen to know if there is a way to save particular libraries to make them easier to use across multiple pens, or if you just need to paste the two urls in there every time. Maybe someone else knows.

Send to Kindle

No responses yet

Sublime Text Comment and Next Line Shortcut

Dec 10 2015

Send to Kindle

Just a quick tip. I’ve been using Android Studio extensively, daily, for the last year and a half. One minor editing feature I’ve grown to love is the way it handles commenting lines. You have your keyboard shortcut, Ctrl-/ or Cmd-/. This toggles the comment on the current line and then moves to the next line. So if you want to comment, or uncomment a bunch of lines, you can just hit that shortcut a few times and it will move through the lines and do its thing.

When I started doing a lot more personal JS work and dove back into Sublime Text, I really missed this feature. So I figured out how to re-create it.

First, you have to make a macro. Just put your cursor at the start of a line, and choose Tools -> Record Macro. Then hit your comment shortcut. Then hit down arrow. Then go to Tools -> Stop Recording Macro and then Tools -> Save Macro.

Now you just need to hook that up to your comment toggle keyboard shortcut. Go to Preferences -> Key Bindings – User and add this line:

{ "keys": ["ctrl+/"], "command": "run_macro_file", "args": {"file": "Packages/User/comment_next_line.sublime-macro"} }

Obviously, “ctrl” is for Windows / Linux. You’ll probably want “cmd” “command” for Mac. And the “file” argument is the path to where you saved the macro you just recorded.

Send to Kindle

4 responses so far

Two Pixels

Dec 09 2015

Send to Kindle

Say you are a designer tasked with creating an image. The only specs you have are that the size of the image needs to be one pixel high and two pixels wide. Seems pretty simple, right?

Just considering RGB colors, that gives you 16,777,216 color choices for the leftmost pixel. And another 16,777,216 for the rightmost pixel. Combined, that means that for that 1×2 pixel image, there are over 281 trillion different images you can create. 281,474,976,710,656 to be exact.

If you were to generate every possible image and lay them out in a grid, it would be large enough to fill over 271 million iPhone 6 Plus screens. Or almost 68 million 4K TV screens.

Two pixels.

Math:

RGB is 16,777,216 colors per pixel. Two pixels means 16 million per pixel, multiply them to get 281,474,976,710,656 different images.

Each image is composed of two pixels, so a grid of all possible images would take up 562,949,953,421,312 pixels.

An iPhone 6 Plus resolutions is 1920×1080, or 2,073,600 pixels. Divide the grid size by that, you get 271,484,352 (and a half) iPhone 6 Plus screens to display all the images.

4K resolution is 3480×2160, or 8,294,400 pixels. So 67,871,088 (and change) 4K screens to display the grid.

Send to Kindle

One response so far

More Codes: Weave!

Oct 29 2015

Send to Kindle

Just playing around and came up with a neat little library for drawing weave patterns on a canvas.

https://github.com/bit101/weave

Not a whole ton to say about it. Not sure how useful it would actually ever be to anyone except… those rare cases when… you just need a weave pattern… done in canvas. But anyway, it was fun to make, and I used QuickSettings extensively during the development to try out different parameters quickly and easily. And that gave me the ideas for several improvements to QuickSettings itself. If you could compare the code before and after the QuickSettings binding and global change handler features, you’d see how useful those are.

Anyway, check out the demo.

http://htmlpreview.github.io/?https://github.com/bit101/weave/blob/master/demos/demo.html

Send to Kindle

One response so far

Quick Settings Updates

Oct 28 2015

Send to Kindle

I’ve done some updates to QuickSettings over the last few weeks. First, I added quicksettings_minimal.css and quicksettings_minimal_dark.css style sheets, which bring everything down in size somewhat and get the range control sliders looking a bit more consistent across browsers and platforms. OK, OK, what I’m trying to say is that the whole thing looks more like good old MinimalComps. But it’s still all made with standard HTML controls and CSS.

I added a dropdown control that creates… well, a dropdown. Or an HTML Selection control, if you want to call things by their proper names.

There are now methods for setting values, changing range parameters and removing controls from the panel.

And the two most recent changes are really useful.

First, I added a setGlobalChangeHandler method. You pass a callback function to that and any time any control in the panel is changed, that callback will get called.

Secondly, I added a bunch of “bind” methods. These are analogous to the “add” methods, but rather than taking a callback function as the last argument, they take an object. When that control value changes, the property on that object that has the same name as the title you passed in will get assigned the new value of that control. Yeah… not sure that was very clear. Let’s try an example.

settings.bindBoolean("visible", false, model);

OK, so ‘model’ is an object that has a ‘visible’ property. This creates a checkbox. When the checkbox is clicked, model.visible will change to the value of the control. Simple, actually.

So these two latest changes make using the panel much more concise. You create a single model object, bind controls to properties on the model and set a global change handler. In the handler, you read the properties of the model. You can see it all in action in the binddemo.js file in the demos folder.

I’ve been using the panel myself in some personal projects, and I do really enjoy it. So the changes are coming from (my own) real world use.

Send to Kindle

No responses yet

New JS Library: QuickSettings

Oct 17 2015

Send to Kindle

Let’s recall the glory days of Flash and ActionScript. Initially, ActionScript was a scripting language with built in graphics and animation capabilities. There was a simple button object, but no other high level ui controls built in to the language.

movie_clip_new_symbol

Before long though, people figured out how to code them and all kinds of UI component libraries popped up. Macromedia created their own component set, which eventually evolved into Flex.

components

A stumbling block with virtually every ui component set created was styling and skinning, that is, making the controls look the way you wanted them to. This involved assigning multiple bitmaps to individual controls or classes of controls, or some kind of half-baked, compiled-in pseudo-CSS, and in many cases, in order to style a control, you had to subclass it and override the rendering methods.

For the most part, ui controls are fairly simple. Until you get into lists and data grids, and calendars, they’re all pretty straightforward views that respond to input and trigger events. But the styling aspect tended to bloat these component libraries all out of proportion to their usefulness and complicate them beyond belief.

ss3

I was doing a lot of experiments with math and physics,that often involved changing parameters at run time. I needed some simple buttons and sliders and checkboxes and a few other things that I could create quickly and easily to be able to do this. But I wasn’t happy with anything out there. So I created MinimalComps.

light_theme

This was my own UI component set. It was designed to be drop dead simple to use. Generally, you could create and configure any control with a single line of code. Create it, pass in the parameters and an event callback. An important aspect of them was that I totally ignored all styling considerations. I gave them what I consider was a fairly attractive minimal look, and that’s what you got. Later I added support for dark and light themes, but that’s as far as that went.

dark_theme

MinimalComps were not designed to build websites or enterprise applications with. They were designed as an easy and very lightweight way to add standard user interaction to some kind of experimental, art or engineering piece. And they were hugely successful. People tell me they still use them to this day. They wound up being used in games and sites and all kinds of apps. If you do a Google image search for “MinimalComps”, you’ll see a bunch of examples. They were even spotted in an Adidas video for the Megalizer app made with them.

In short, they filled a niche and even outgrew that niche.

It’s been a long time since I’ve even touched Flash, and some years since I did any recreational programming with ActionScript. I do all that stuff with JavaScript and HTML5’s Canvas now. But I’ve always missed the ease of MinimalComps in JavaScript. I know that there are a few similar libraries out there, but if you know anything about me, you know that I like to create my own tools from the ground up.

I made several attempts to port MinimalComps to JavaScript, using Canvas and custom elements to make the components. But I was never happy with the result. A big difference between HTML and Flash is that HTML does have its own UI controls built in. It didn’t feel right to reinvent the wheel.

However, going into the HTML, creating a control and configuring it, then going back into the JavaScript and getting reference to it and adding listeners was always enough of a pain that I just never did it. Instead I just tried to get by with straight up mouse or keyboard handlers that I could do in code alone. The invisible user interface. Not ideal.

Finally, I decided to try to combine the two approaches. Make a JavaScript library that creates the HTML controls for you. So you say, “give me a slider with these parameters and this callback.” And bang, it exists and it works. One line of JavaScript code.

So I did it. And with that long-winded intro, I present QuickSettings.js

I consider QuickSettings the JavaScript spiritual successor to MinimalComps. It is not anywhere near what you’d consider a port, but it fulfills many of the same original purposes. It probably won’t fulfill many of the extended purposes that MinimalComps evolved to have.

Rather than going through a long explanation of how to use them, I’ll just refer you to the github page, where the readme outlines all of the main methods.

https://github.com/bit101/quicksettings

And here’s a demo of the QuickSettings panel in use.

http://htmlpreview.github.io/?https://github.com/bit101/quicksettings/blob/master/demos/demo.html

I’m also working on a video that will walk through the process, though honestly, it’s drop dead simple.

Send to Kindle

3 responses so far

Older posts »