Backtrack Time – Coding Math

So, a few days ago, I announced that all future Coding Math episodes would be released on egghead.io.

The first one was released there, and it turns out that this arrangement is not going to work out the way I hoped it would. Let me say at the outset that there is no problem between myself and the company. I’ll continue to produce egghead.io-specific videos for them. But I thought that moving the Coding Math stuff over there would be a simple matter of uploading it and publishing it there. And that’s not the case. Naturally, egghead.io has a brand and certain standards and style guidelines necessary for keeping consistency when dealing with so many different instructors. Actually, it’s not so much of a “style” as a stripped-down, “just the facts” concept, which is great. I wholeheartedly agree with that concept. But the Coding Math videos, as-is, break too many rules and would have to undergo surgery on a video-by-video basis in order to fit in to that universe. Also note that egghead.io was not refusing to publish them. They were very accommodating, even offering help in terms of manpower to do that editing.

In the end though, after a night and day of soul-searching, I have decided to keep the Coding Math “brand”, such as it is, independent. This decision makes absolutely no sense financially. I’m walking away from lots of easy money. But Coding Math has always been more of a labor of love than a money-making operation. So for better or worse, the channel will now live on as-is, YouTube only, Patreon supported, assuming not too many of you have jumped ship.

On a related note, I would like to do more in the sphere of teaching. I’d like to gauge the interest in a live “Coding Math” or “Making Things Move” course. A one- or two-day, in-person course held somewhere in the Boston area. If successful, maybe occasional road shows. Or possibly a live on-line course, or (though I despise the term) “webinar”. Are these things that people would be interested in? What would such a course be worth to you? If anyone has any experience, resources or contacts in any of those areas, let me know.

Posted in CodingMath | 5 Comments

Coding Math and egghead.io

I’m happy to announce that Coding Math videos will now be available on egghead.io.

Since I started making videos, it has been a great source of joy for me. I love teaching, whether it is writing, speaking or making videos. It’s very fulfilling to spend time learning a subject and then be able to distill that subject down into simple enough terms that others can understand it and actually USE it. And the tons of positive comments I have received on the videos have totally defied my previous views of what YouTube comment sections were supposed to look like. I don’t answer all of them, but I do read every single one and it’s always a nice pick-me-up to get one of your great comments.

At the same time, making videos takes a lot of time and energy. I usually think over the script in my head – often on long walks with my dog – for a couple of days. Then I try to come up with good, simple code examples. This is key, in my opinion. It’s where a lot of other educators and authors fall down, I think. The example needs to be realistic enough that you can see how you could use that in a real project. But at the same time, you don’t want a full fledged application with all kinds of other junk that’s obscuring the one principle you are trying to teach. I remember seeing a tutorial for parsing XML some years ago, that went on for ages on pixel-level details on how to build the UI for displaying the XML. Utterly irrelevant. The code examples usually take me from one to a few hours. Then I start writing the script explaining the concepts and going through the code. That’s generally a couple of hours minimum. Screencasting all of the code and any diagramming, gathering other graphics and screenshots, etc. is another hour or two. Recording the audio is pretty quick. I do it in one take and just back up and start talking again if I make a mistake. Editing the audio for a 10-15 minute video takes around an hour. Then, putting it all together – making all the audio match up to all the video, all the cuts and transitions, etc. can be anywhere from 2-4 hours. So we’re usually talking a minimum of around 8 hours for the full production of a 10 minute video. Maybe twice that for a more complex one.

So, while the praise and thanks are nice, it would also be good to get remunerated for that time somewhat. My approach to this so far has been through my Patreon campaign. Many of you have contributed to Patreon, and I am grateful beyond words at the fact that you have gone ahead and given money that you didn’t have to give to support my efforts. Thank you all who have donated. Seriously.

However, while Patreon is a great service, it is more suited for some types of content than others. A lot of podcast producers use it to great success. In those cases, it makes a ton of sense. Most traditional podcasts are fairly topical – they talk about current events and happenings. A few weeks later, an individual episode has lost 90% of its value. However, in the case of the videos I’m producing, they’ll all continue to have the same value as the day they were produced – at least for some years, until JavaScript itself becomes obsolete. Even then, the principles will still be usable.

As it stands, I make about $90 to $100 from Patreon each time I release a Coding Math video. Given the time I put into them, that’s somewhere close to minimum wage. If, a week AFTER I release a video, that video goes viral and 100,000 people watch it, I will get… $0. If that video continues to get thousands of hits per week for the next 5 years, I will get … $0. It’s not that I don’t appreciate the Patreon contributions, but it’s really not the best system for this type of content.

There’s also Youtube ad revenue. This does reflect ongoing views, but with almost 15,000 subscribers, this results in an average of about $20 a month. Not really worth discussing.

Enter egghead.io

I’ve also been making videos for egghead.io. I’ve kept these quite separate. So far they’ve been series on specific subjects. The egghead.io platform is great – both for customers and instructors. If you are a web development professional, it’s possibly the best resource to stay up to date on current technologies. For something like $199 a year, you get an amazing wealth of ongoing, current, as well as archived material. egghead.io also has a library of free videos. As an egghead.io instructor, I continue to earn revenue on older videos, as long as they are still being watched. And unlike YouTube, it’s actually a significant amount.

So it’s been a struggle for me on which to concentrate on. I love creating the Coding Math series and letting people learn for free, but also like doing the egghead.io specific videos that earn me money. Fortunately, there is a way to combine both.

Coding Math videos will now be published first on egghead.io. The will be released for free, and will remain free for anyone to watch, any time, ever. Just like on YouTube. But I’m sure you’ll rest much easier knowing that I’m being well compensated! 🙂

Here’s the first one:

https://egghead.io/lessons/javascript-dot-product-in-javascript

As for the future, I’ll slowly be adding the back catalog of Coding Math episodes to egghead.io. I won’t be removing them from YouTube though. They’ll stay right there. New episodes will premiere on egghead.io, and probably eventually go up on YouTube at some point. I’m not entirely sure on how I will schedule that. Since I will now be paid for the content through egghead.io, I will no longer be publishing through Patreon. Once again, though, I thank all of you who have contributed there. It just wouldn’t feel right to “double dip” that way. Finally, I will continue to do paid series for egghead.io. I recently finished an intermediate series on coding WebGL in JavaScript, as a follow up to the beginner series I did earlier. This should be published there soon.

And as I said earlier, if you like the free stuff you see on egghead.io, I highly recommend signing up. Maybe get your company to get a subscription.

Posted in CodingMath, JavaScript | 1 Comment

Arch Linux, i3wm

Well, this post has been some time in the making. As I mentioned a week or so ago, I’m back on Linux full time on my main personal machine. That machine, by the way, is a 3 year old Lenovo Yoga 2 Pro. Probably my favorite computer ever so far. The only thing that is showing its age is the battery. It was never that great to begin with, now, you can practically watch it drop by the minute. But since I mainly use it at home, it’s not been a huge issue.

Anyway, I initially fired up Ubuntu 16.04 on it. Because that’s like the default. Ubuntu is great. You literally just put a disk in the drive, or a USB drive in the slot, boot into it, click a few buttons, enter your name, password, time zone, and about 10 minutes later, you’re up and running. Everything just works. The only thing I had to tweak was my touchpad, which involved writing a config file with the various settings. And tweaking that config file until it felt just right. Sounds like a pain, but on Windows I also had to tweak it. And to do that I had to go into the device manager and get the device id and then go into the registry editor and find the right key, then find the right option to make it do what I wanted. All told, the text-based config file is far easier.

One thing about running Gnu/Linux is choice. You can change just about anything. I’m not a big fan of the Unity interface in Ubuntu, so I swapped that out for Gnome. This involves installing the Gnome desktop and choosing that at login. But it bugged me that all that Unity code was still there under the hood, taking up space, and doing God knows what. So I wiped the whole install and installed UbuntuGnome. This is Ubuntu, minus Unity, plus Gnome. On the surface, not at all different than what I had. But I felt better about it.

OK, all would seem to be good. Then I started doing videos. First problem. I found that while doing screen casting, the recordings would have all kinds of tearing and glitching. This was indicated to be an issue with Gnome 3. OK. Dropped into the earlier version of Gnome which installs along with 3. Same problem. OK, maybe it’s just a Gnome thing. I liked Gnome, but if I can’t screencast with it, it’s no good to me.

So, wiped things again and installed Mint. Mint is a beautiful OS. It’s an Ubuntu derivative, but has it’s own desktop environment called Cinnamon. It used to be my OS of choice and after I installed it, I remembered why. It’s so nice. Even better than Gnome.

Unfortunately, I had the same issues with tearing while screencasting. After some more research, it has to do with “compositing”. When you have a window manager that can show different windows on top of each other, behind each other, over a desktop with other things on the desktop, maybe certain elements have shadows and transparency, the act of arranging all of these elements correctly is compositing. And such a window manager is known as a compositing window manager. Most window managers are compositing. Mac, Windows, Ubuntu, Mint. It’s what you are used to. But this can cause a problem with screencasting in some cases. I don’t know the details, but I guess when the screen recorder is capturing frames, the timing can be off and it starts capturing things at the wrong level, maybe capturing things as they are in the middle of being drawn. There are probably solutions to this, but learning about this brought up the question, “what is a ‘non-compositing’ window manager?”

It turns out there are a few popular non-compositing window managers on Linux. Most of these are called “tiling window managers”. A couple of the most popular ones are xmonad and i3wm (or just i3).

The way these work is when you create your first window, it is automatically sized to fill your entire screen. When you create another window, the two windows are tiled, so one fills one half of the screen and the other fills the other half. More windows split up the screen further, either vertically or horizontally. There’s no wasted space. There’s no overlap. Once you have anything running, there’s no desktop. Only your apps, filling virtually every pixel of the screen. Tiling window managers are usually very keyboard based, with shortcuts for moving between windows, moving windows around, switching between multiple workspaces, opening and closing programs, etc. This is a good demo for what this looks like in i3:

Now I’ll admit. This sounds HORRIBLE. It sounds like going back to the 90’s and Windows 1.0 or something. But I’d heard glowing reports of people using these things. So I tried it out. At first, yes, awkward. Then I learned a few tricks. Got used to the workflow a bit. And literally started smiling. I tried both xmonad and i3. I went with i3 because it uses a text-based config file, whereas for xmonad you have to configure it with a Haskell script. And I don’t know the first thing about Haskell.

Here’s an example of my current desktop running on i3:

1. Chrome_003

Good news: screencasting was flawless. And the more I used i3, the more I absolutely love it.

Bad news: i3 is tiny and lightweight. Which made me unhappy again about all the crud that was installed under the hood to support Unity or Gnome or Cinnamon, etc. I really just wanted a distro that only had the bare minimum stuff in it to allow me to boot up and launch i3.

After searching around some, I discovered Arch Linux. OK, I’d heard of Arch before. It’s one of the main distros out there. What I didn’t know is how minimal it is. For comparison, when you boot up the Ubuntu installation media (CD or USB), this is what you get:

VirtualBox_Ubuntu_27_09_2016_10_12_15

A nice pretty installer with nice, pretty, big buttons to guide you through the steps. It does most of the work for you, requiring just a bit of input from you.

In contrast, when you boot up the Arch installation media, here’s what you get:

VirtualBox_Ubuntu_27_09_2016_10_16_43

I thought it failed at first. But no, you get a command prompt. And no instructions on what to do. It’s ALL up to you. And it’s pretty much all command line. You start by manually partitioning your disk(s), making file systems on them, mounting them to the proper spots, then installing the system to the right place on the right partitions, setting up various config files, installing the boot loader, etc.

If you do everything right, you reboot, Arch launches, and you get… another command line. The default install adds almost nothing beyond what the system needs to boot. Probably the first thing you need to do when you get it running is set up your network – wifi drivers, etc. Then you can start installing other stuff off the net.

To run i3, you need something more than a console. You need a graphical UI. This usually means installing Xorg and configuring that. Then you need to install the programs that will run there. You don’t even get a default terminal emulator. You have to choose one and install it. You want a web browser? Choose one and install it.

If this sounds horrible and tedious to you, I understand. It’s not for everyone. For me, it made me very happy. I know almost every piece of software that’s installed on my system now. Because I installed every one. I know exactly how the boot loader and graphics system and wifi devices are configured. Because I configured them.

The Arch Wiki is an amazing repository of knowledge. And combined with the Arch Forums, there’s no problem that can’t be solved. My Yoga 2 Pro, for example, has a few hardware issues that were causing major problems. One with the wifi. There is a module that winds up blocking wifi, and had to be blacklisted so that module doesn’t load. But I found the solution for that in the forums. Likewise, the Intel video on the machine has all kinds of issues. But there are solutions for them, documented in the wiki and the forums. Bit by bit, I picked away at them, and I think I have a really solid, really minimal machine now. There’s nothing on it that I didn’t put there and not much that I didn’t fine tune by hand.

Another side note about Linux installs. It might seem really drastic when I say that I wiped the OS and reinstalled another one three or four times. Actually it was more than that, as there were several experiments in between. Distros I didn’t like and went back to something else. But when you install Linux, you are in control over what partitions are created. I create a home partition that stores all my personal files, and most of the config stuff gets stored there too. In addition to that, there is the root partition where the OS gets installed and a swap partition (and sometimes a boot partition). When doing a new install, you keep your home partition intact. The new OS overwrites the root and boot partitions. You fire up the new OS and reinstall your programs. All your data is still there, and all the config files for the programs are still there, so they function just as they did when you left them – even remembering stuff like previously opened files, options, settings, themes, etc. So reinstalling an Ubuntu-based distro takes 10-15 minutes max. Then you install the programs you want either all at once, or as you need them. At most 1-2 minutes per program. Of course, were I to re-install Arch, that’d be a different story. It was an all-day affair the first time. But most of that was figuring stuff out. It might take me an hour or two now.

Posted in Linux | Comments Off on Arch Linux, i3wm

Back to GNU/Linux

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.

Posted in General, Technology | 1 Comment

Chrome OS / Chromebooks

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

Posted in Technology | Comments Off on Chrome OS / Chromebooks

I made a Chrome Extension

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:

[code language=”javascript”]chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: chrome.tabs.create({url:”chrome://apps”})
});
});[/code]

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…

[code language=”javascript”]{
“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/”
]
}
[/code]

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

Posted in General, JavaScript, Technology | Comments Off on I made a Chrome Extension

Quicksettings.js 1.3

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

Posted in Components, JavaScript, Technology | Comments Off on Quicksettings.js 1.3

Amateur

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.

Posted in General | Comments Off on Amateur

QuickSettings CDN

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.

Posted in JavaScript | Comments Off on QuickSettings CDN

Sublime Text Comment and Next Line Shortcut

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.

Posted in Technology | 5 Comments