Archive for the 'Technology' category

BIT-101 Lab Visual Index

Jan 04 2017 Published by under JavaScript, Lab, Technology

Screen Shot 2017-01-04 at 9.28.46 AM

I just ticked off another feature on the BIT-101 Lab list. A visual index.

Back in the old Flash Lab the only way to find a specific experiment you wanted to look at again was to click through, one by one, trying to remember the approximate date and targeting items around that. I wanted to avoid that pain. The first thing I did was to add tags and the ability to search by tags. This should help a lot. But I think this visual index will help even more. You can just scroll until you see something that looks like the thing you want to check out, and click away. It will also be good for discovery, I think.

At any rate, I think it looks pretty cool. I test-populated it with about 15 future experiments and it really starts to look great when there are lots of images in the list. I can’t wait to see it grow.

No responses yet

Back to Basics

Jan 01 2017 Published by under General, JavaScript, Lab, Technology

TL;DR: Go here: https://bit101.github.io/lab/

Long time readers of this blog may recall what existed here before “blogging” was a thing – the BIT-101 Lab.

Back in the late 90’s / early 2000’s there were a bunch of people running Flash “experiment” sites. Basically, each day they would post some kind of visual, animated and/or interactive Flash piece, often open sourced. Josh Davis’s Praystation, Jared Tarbell’s Levitated, Robert Hodgin’s Flight 404 were some of my favorites. In August 2001 I decided to blatantly copy them… I mean… jump on that bandwagon. My site at the time was called “KP Web Design”. Sigh. I started doing some experiments and decided I needed a better domain, so I came up with bit-101 and moved all the experimental stuff over there. It went live on September 11, 2001. Yes, THAT September 11th. So nobody really noticed it for a while. But over the next four years I posted just shy of 700 open source Flash experiments that explored all kinds of neat techniques. The site won an award (FlashForward 2003 – Best Experimental Site) and really pretty much launched my career.

In 2003 I started this blog. And by 2005 the lab was retired. I blogged heavily for several years, but in the last few years, not so much. I’ve had other interesting projects over the years, but nothing was quite as exciting as those lab days. Recently Zach Lieberman posted about his 2016 project of posting a sketch each day (sketch/experiment, same concept). It inspired me to get back to basics.

Of course, I would not be doing Flash anymore. I haven’t opened that program on my own volition in several years. (I did need to use it to examine or fix a few things for work a few times.) My weapon of choice these days is HTML5 Canvas and JavaScript.

I’ve spent the last week or so creating a site and a workflow. All the source will be posted on github at https://github.com/bit101/lab. And the site uses github pages – https://bit101.github.io/lab/. So literally, the site IS the source IS the site.

I have template files and a script to create a new daily sketch / experiment based on the templates. This goes into a dev folder where I can work on it. When I’m ready to release it, I move it to the dailies folder, update the index.json file, add, commit and push. This updates the source and publishes the new file to the site. Because the site IS the source… etc.

One thing you’ll see in there is the use of a couple of libraries, bitlib and QuickSettings. You might be familiar with the latter. But the bitlib library is something I’ve been working on quietly for a while. It’s really just for my own use. It’s not something that I want to promote and convince other people to use and then have to wind up supporting. It’s just a compilation of the functions that I wind up using over and over. It’ll grow and change over time. Feel free to use it as much as you want – at your own risk. I make no claims for it’s production-readiness.

The site code is pretty rough. Again, I banged it all out over the last week in my spare time. But I’m quite proud of the calendar UI I created from scratch. And the tag searching and indexing. It’s even responsive and stuff. I have plans to take a screen shot of each experiment and present a visual index as well. And I’m thinking about ways to automate that index / tag generation portion. But it all seems pretty good right now for starters.

Anyway, I’m pretty excited about this. I know that on day one, there’s not a whole lot to be excited about from your end, but hopefully as the calendar fills up, it will become a fun place to visit and play with and learn from.

10 responses so far

Back to GNU/Linux

Sep 17 2016 Published by under General, Technology

My computing platform history in a nutshell.

1984 – First significant interaction with a computer. A Commodore 128 I inherited at work.

1989 – Bought my own Commodore Amiga.

Early 90’s – Was given a pc built from spare parts by a programmer friend. This was upgraded and evolved piece by piece, sometimes completely replaced throughout the 90’s / early 00’s. Eventually jumped over to laptops. This saw me through Windows 3.0, 3.1, 95, 98, 2000, NT, XP.

2007 – Got a Mac Book Pro. Fully switched away from Windows over to the Apple world.

2010 – After 3 years, while overall happy with the software and hardware experience on Mac, I was growing increasingly annoyed by Apple’s ever tightening grip over its users and developers. I moved back to Windows.

2010/11 – I then spent almost two years immersed in the GNU/Linux world. It was my daily OS. Loved it probably more than anything else.

2012 – Intrigued by Windows 8, I jumped back over to the MS platform to see what that was all about. I wound up staying longer than I had intended. Note that even while I was back on Windows as my daily OS, I always maintained a Linux tower PC that I used as a file server, media server, etc.

2016 – No major complaints with Windows 10. But it was time to get back to my favorite over the years. GNU/Linux.

Actually, I had tried to jump back about a year or so ago, trying a couple of different distros – probably Ubuntu and Mint – on my Yoga 2 Pro. I ran into a couple of major hurdles.

One was the high dpi screen on the Yoga. 3200×1800. Even when I initially got the Yoga, Windows didn’t handle it too well. And even to this day, a lot of Windows programs just don’t handle high dpi screens well. You wind up with tiny text, tiny icons or controls that get chopped off. Ubuntu was just getting to the point of addressing it, but it needed some work.

The other issue was video production. I make videos for Coding Math, Egghead, and occasionally other customers. I need software that does decent audio recording and editing, full screen capture and decent video editing.

For audio, I use Audacity, so I was covered there. Screen capture generally worked well, but I couldn’t find a decent editor. Every one I tried either didn’t have the (fairly basic) set of features I needed, or – more commonly – just crashed about every two minutes. There were a couple of others that didn’t crash but the workflow was way too complex and the performance was abysmal. I gave up and went back to Camtasia on Windows.

But recently I’d heard some positive words about video editing on Linux and decided to give it another shot. Starting out on my tower pc, I tried OpenShot. Last year it was crashing constantly. It seemed relatively stable and has a nice workflow. I was excited.

I took the plunge and installed Ubuntu on my Yoga again. I was really impressed. 99% of everything worked perfectly out of the box. I did need to tweak the trackpad a bit. The high dpi support was great, but in the end, I wound up lowering my resolution to 50% – 1600×900 anyway. It looks just as good to my eyes, you get much better performance, and any lingering issues are totally handled. It felt dirty to misuse all those pixels like that, but after a day, I never thought about it again.

Did some screen recording, fired up OpenShot and started cutting up clips and … crash. Not as bad as last year, but often enough to make it not worth using. Discouraged. Well, let’s see what else is out there. Another top contender was Kdenlive. Crossed my fingers, and tried it out.

I liked it. Used it some more… liked it a LOT. Is it crash free? mmm…. I can’t say that. But I can get through a full video editing session with 0 to 1… maybe 2 crashes, which I can live with. And so far, every time I’ve had a crash, I reopen the file and it auto recovers it to the exact point where I left off. So it’s a minor 20 second annoyance rather than something that destroys work.

There was one issue I ran into with screen recording. The solution to this issue led to some really cool discoveries that I’ll go over in another post.

One response so far

Chrome OS / Chromebooks

Jul 16 2016 Published by under Technology

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

Comments are off for this post

I made a Chrome Extension

Jul 16 2016 Published by under General, JavaScript, Technology

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

Comments are off for this post

Quicksettings.js 1.3

Jul 15 2016 Published by under Components, JavaScript, Technology

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

Comments are off for this post

Sublime Text Comment and Next Line Shortcut

Dec 10 2015 Published by under Technology

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.

5 responses so far

Two Pixels

Dec 09 2015 Published by under Technology

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.

One response so far

Coding Math Application Series

Feb 10 2014 Published by under General, JavaScript, Technology

Last week I kicked off a new series on the Coding Math Channel. It’s the Application series.

I was thinking that it’s nice to present new concepts in each video, but there is a limited amount that I can do with them. I try to make the main episodes be 10-15 minutes long. I can explain a concept, do a few drawings, show some math, write some code, see it in action, and maybe iterate on that once or twice. And then, that’s it for that topic. Hopefully the brief example was good enough, because I’m moving on to something else now.

So my thought was to start another series where I actually build some simple app or game, or at least the barest outline of such. With some real world applications of the principles that are covered in the other videos. Each video will be in the five minute range, adding just one or two small features to the current app or game. Each feature may make use of one or more of the concepts from the other videos.

The first game is something I call Ballistics. It’s just a simple idea where you aim a gun and it shoots a cannonball that you try to hit a target. Like the old QBasic game, Gorillas.

gorilla2

In the first episode, we use a bit of trigonometry, including arctangent, to aim the gun using the mouse. In this week’s upcoming episode, we’ll actually get a cannonball firing, so that will use the particle class, with velocity and gravity, and lots more real world application of trigonometry. But each one is a bite sized piece of an application. We might hit the same concept over and over in different parts of the same app, or in different apps. But that’s the whole idea, to see many different ways you can use these concepts.

So now, we have the main episode each Monday, a Mini episode – shorter 5-minute simple concept – on Wednesday, and these Application episodes on Friday.

I want to thank all of you who have supported me on Patreon.com. It really makes doing these videos more justifiable in terms of the time I spend on them. And if you are a supporter, know that only the main Monday episodes are Patreon sponsored episodes. The Minis and Applications are on the house.

Comments are off for this post

Announcing Coding Math Video Series

Dec 12 2013 Published by under Educatioon, Technology

Those who know me personally, or have followed my work on this site for the last twelve and a half years (has it really been that long???) know that I go in and out of all kinds of programming subjects. From the early Flash experiment days I was always into math and physics and interactivity. I’ve created some fairly popular games (Falling Balls, Gravity Pods). I’ve enjoyed creating algorithmic art at www.artfromcode.com, of which several pieces have been published or used in various contexts. And I’ve had a couple of gallery shows with my art. I’ve coded various other mobile apps. I’ve created a couple of very popular UI component sets – BitComponents, which were purchased by a company called BeamJive and published under their own name, and later the open source MinimalComps, which enjoyed huge success and popularity. I’ve worked on various build and process management tools, such as STProjectMaker, which has been pretty popular itself. I’ve revived my love of electronics from my youth and have posted a few things on that, which people have found useful. And of course I’ve written a dozen or so books on coding and spoken at dozens of conferences around the world. This is all above and beyond any coding I’ve done in my day job. Not a bad hobby!

So I jump around a lot, but as time goes on, I’ve been struggling to figure out that one thing that really drives me. When all is said and done, I think it comes down to teaching and educating others. That’s the one thing that I keep coming back to. I love to learn something and distill it down to its basics and then teach others in a way that is way more clear and easy to understand than all the stuff I had to wade through to learn it in the first place. Even when I create some piece of art or a game, and don’t publish the source code for that, I still have an urge to explain to others how to achieve the same effect, or mechanic, or whatever.

That’s one of the things I initially loved about conference speaking. But more and more, conferences are highlighting the more inspirational speakers. “Look at all this cool stuff I did. Work hard and someday maybe you can be like me.” Even the more technical speakers are generally just promoting some methodology they subscribe to or framework they created. There’s generally little room for teaching or education other than the few full or half-day workshop spots that some conferences do.

Writing books is awesome, but is a long, drawn out, several-month process before anyone but yourself sees anything that you write. This is true whether you’re working with a publisher or just doing self-publishing. And then people need to go buy the book to get anything out of it. I’ll probably do some more self-published books, but they will be shorter form I think.

Blogging is awesome. Or was awesome. I guess I just got burnt out on blogging. Does it show? 🙂

Earlier this year I was dabbling in woodworking. Set up a basement workshop and started watching videos by this guy Steve Ramsey on his Youtube channel, Woodworking for Mere Mortals. I don’t do so much on the woodworking front now, but I still watch every video he puts out, because he is so freaking awesome.

So I got thinking, maybe I could do something vaguely similar with coding. And thus was born…

The Coding Math Channel!!!

That’s http://www.youtube.com/user/codingmath

I cover a lot of the whys in the first video, but from what I’ve seen, a lot of coders struggle with math. They understand the language they are writing in, but when they are doing a layout or an animation or some kind of effect, they get bogged down in what formulas to use or what numbers to feed in, or what to apply those formulas to. This is something that, for some reason, has always clicked for me. And apparently, once it clicks for me, I’m able to explain in a way that helps it click for other people. I realize I’m tooting my own horn here, but this is what many people have said about my books and talks and blog posts. So I believe them.

Anyway, I figured I’d try to go over some useful math concepts, particularly as they relate to coding – the bits of math that coders need to know and will find useful. And not just cover the math as a disconnected, abstract thing, but use that math in code to demonstrate some kind of effect that you could really use in your own day-to-day programming. The video format is great for being able to draw rough sketches in real time while explaining some concept, and then switching over to demonstrate that concept while coding in real time, then showing the results in the browser – in real time. A flow that is not nearly as smooth in a book or blog post.

As of this writing, I’ve got four videos up there. I held off promoting this until I had at least a bit of useful content up there. I’m hoping to do minimally one video per week, probably publishing it on Monday mornings. I have a nice list of topics to cover, and if there’s any specific things you’d like to see covered, shout it out.

I know the production quality on these isn’t awesome. But I’m a noob here. Learning a bit more about the recording and editing process every time I do one, so bear with me. I think it will improve. 🙂

Also covered in the first episode is the rationale behind using HTML5/JavaScript as a base for these lessons. I’m not counting out the possibility of using other languages in some episodes though, as appropriate.

So, there you have it. Hope you find it useful.

2 responses so far

Older posts »