Archive for the 'JavaScript' category

QuickSettings Version 3.0 released

Nov 11 2016 Published by under JavaScript, QuickSettings

Send to Kindle

I just pushed QuickSettings Version 3: https://github.com/bit101/quicksettings/releases/tag/3.0

I’m really happy with the changes in this version. I use QuickSettings myself all the time, so most of the changes stem very much from personal experience – seeing my own pain points and addressing them. The key motivation for changes in this release was making the library easier to use.

One of the annoyances I noticed was in getting values from a panel – you had to know what kind of control you were querying and use the correct get method, i.e. getRangeValue(title) or getColor(title) or getText(title). And the same for setting values. Since the panel knows what kind of control it is setting or getting via the title, there was no reason to force the user to specify it. So all that is gone. All controls can be set or get with setValue(title, value) and getValue(title).

Since all controls now used the same interface for getting and setting values, this allowed me to vastly simplify the getValuesAsJSON method, returning an object or JSON string of all the values in a panel. It also allowed me to easily create a corresponding setValuesFromJSON method. Since both of these methods utilize the same JSON format, you can grab the values at one point and reset the panel using that same object. The Reset Demo (source) shows one example of how to use that. You could also use this technique to create multiple presets for panels.

Having a single format to get and set all panel values opened up a solution for another situation that annoyed me. In working on some experimental piece, I’d create a panel, and adjust various values in it, and then need to change the code. When I re-ran the application, the panel was of course back to its original state. And I’d have to go adjust the values again. The solution is saveInLocalStorage(name). When you call this method on a panel, it immediately looks for an item in localStorage with the given name. If it finds one, it uses setValuesFromJSON to reset the panel to the values found there. It then listens for any changes that occur to any values in the panel and immediately saves them to local storage under the same name. This means that the next time you start the app, the panel will initialize with the same values it ended with in the last session. Check the Local Storage Demo (source) to see this in actions.

I’ve also been paying a lot of attention to the size of the library, trying to keep it as small as possible. This includes removing any code that is not vital to the project. So there were some removals in 3.0:

I noticed a while ago that setInfo and setHTML were almost exact duplicate methods. So I just made setInfo into an alias for setHTML. In version 3.0, setInfo is gone altogether.

A big removal was the parse method. This would take a JSON object and generate an entire panel from it. The idea being that you could build a panel declaratively with JSON rather than writing JavaScript code. I personally wound up never using this method and never heard from anyone who did. It was complex and took up a big chunk of the source code. So it is gone. If people really miss it, I’ll consider recreating it as a separate module.

Finally, I removed the whole snap-to-grid functionality. I found, personally, that I wasn’t moving panels around that often anyway, and when I did, I didn’t really care if they snapped to any kind of grid. It was a neat feature, but not essential.

Between the simplification resulting from the new get/set methods and the removal of the items mentioned, I was able to cut about 4k off the library size, making the minimized library about 20.5k.

Of course, these changes may break some existing apps. Hopefully not too badly. And I think the added simplicity and functionality is worth it.

One thing not as visible is that I’ve also started unit testing the library. This was long overdue. When I started changing the set/get methods, I saw that I was going to need to do a ton of manual testing on each and every control to make sure that I wasn’t breaking anything. Forget that. It’s all automated now. All the set and get methods are thoroughly and automatically tested now. In addition to making sure that the new functionality worked correctly, this testing also unearthed several pre-existing issues that I probably never would have noticed. Those are now fixed too. All the tests are checked into the repo, so if anyone wants to add additional tests in there, I’ll happily pull them in. I mainly concentrated on the value functions, but there’s a lot more in the library that needs to be added to testing.

Send to Kindle

No responses yet

Coding Math and egghead.io

Oct 16 2016 Published by under CodingMath, JavaScript

Send to Kindle

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.

Send to Kindle

One response so far

I made a Chrome Extension

Jul 16 2016 Published by under General, JavaScript, Technology

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 Published by under Components, JavaScript, Technology

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

QuickSettings CDN

Feb 24 2016 Published by under JavaScript

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

More Codes: Weave!

Oct 29 2015 Published by under JavaScript

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 Published by under Components, JavaScript

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

Comments are off for this post

New JS Library: QuickSettings

Oct 17 2015 Published by under Components, JavaScript

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

New JS Library: grid

Aug 02 2014 Published by under JavaScript

Send to Kindle

I’m continuing to dig through old code and consolidate and release it.

This new library, grid, is not a CSS layout util, but draws grids of various kinds on an HTML5 Canvas. Here’s a demo of the various kinds of grids it can currently draw. Click for full size.

demo

I could go into all the options and so forth, but it’s all pretty straightforward and you can just check the readme at the github site:

https://github.com/bit101/grid

There may be some minor bugs in this or some tweaks needed. If so, just let me know, and I’ll fix it up. There’s definitely a lot of optimization that can go on here. I may experiment with creating an offscreen canvas the size of one cell, drawing one cell there, and then blitting that across the rest of the grid. We’ll see. In the meantime, it mostly works. Enjoy.

Send to Kindle

Comments are off for this post

New JS Library: Shapes

Jul 21 2014 Published by under JavaScript

Send to Kindle

Another week, another JS library.

https://github.com/bit101/shapes

Again, I’m sure there are hundreds of other libraries that add improved functionality for Canvas drawing. There’s even CreateJS, which is super powerful, creating a Flash-like display list with animation, etc. That’s cool, but it kind of becomes a framework that you need to buy into fully. My goal was not to create a new paradigm, just make the existing one a bit easier to work with.

Almost everything in the library is stuff that I’ve created before. Again, I just decided to consolidate it all into one code base, clean it all up and put it up on github. If nothing else, I won’t need to write that stuff again. And if someone else finds it useful, either as a whole, or something to borrow bits and pieces from, that’s great.

Like the shaky library from last week, shapes wraps both the Canvas and Context2D. I’ve proxied most of the existing Context2D methods to the shapes object, so you can work directly from that for 99% of what you need to do. A lot of it is obvious stuff – circles, ellipses, rounded rects, polygons, etc. But there are some unique and fun items in there as well. Explore. The demo page will give you a few ideas of what’s possible.

http://www.bit-101.com/bitlib/shapes/

The source for the whole demo page is in the repo as well, so you can easily see the code that is used to create the examples.

Send to Kindle

2 responses so far

Older posts »