These are chat archives for thinkingmedia/iChrome

1st
Dec 2015
Mathew Foscarini
@thinkingmedia
Dec 01 2015 00:17
I see fontawesome in the project, but the fa css class isn't working. Is there a trick to getting fontawesome to work?
Avi Kohn
@AMKohn
Dec 01 2015 01:22
I never use the CSS files that come along with icon fonts because they're bulky and I rarely ever use even half the icons in a font. Instead I use the unicode codes listed on the website directly: https://fortawesome.github.io/Font-Awesome/icons/
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:23
I tried that but couldn't get it to work.
I'm having another issue. Sorry to bug you about this.
How can I trigger the view to update after an ajax operation?
Avi Kohn
@AMKohn
Dec 01 2015 01:25
The views are set to automatically re-render after the model changes. So saving with the saveData method will cause it to re-render.
I'm not sure what the problem is with FontAwesome.
It's only used in about 10 places though, so I'll probably remove it. I've been using the material design SVG icons from here recently: https://www.google.com/design/icons/
Sorry the system isn't documented, I never have enough time to get things right.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:27
            this.on('change', function(model, options) {
            $.ajax({
                url: this.config.provider,
                method: "GET",
                success: function(data, textStatus, jqHXR) {
                       self.saveData({....});
                }
            });
            }, this);
If I do anything like the above. I get an infinite loop.
I love the material design icons. I've used them in the past. My only complain is that they are too light.
The icons appear to have thin lines where as fontawesome appear more bold.
Either icon library works for me. I really don't care one over the over.
Avi Kohn
@AMKohn
Dec 01 2015 01:28
Yes. The change event is automatically bound to by the initialization function, which also checks for the widgetChange options property to avoid loops.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:28
So, I want to do the ajax after the user changes the settings.
Avi Kohn
@AMKohn
Dec 01 2015 01:28
I don't use the font with material icons (I probably should though), but I like them better.
The refresh method will be automatically called.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:29
what is "widgetChange" option
Avi Kohn
@AMKohn
Dec 01 2015 01:29
That's added by the saveData function.
Here's the initialize method:
    initialize: function() {
        if (this.refresh) {
            this.on("change", function(model, options) {
                if (options && options.widgetChange === true) return;

                this.refresh();
            }, this);
        }
    },
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:30
ah.. that's the fix i was looking for. thanks
Avi Kohn
@AMKohn
Dec 01 2015 01:30
But that should automatically be handled as long as everything's in the refresh method.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:31
what is refresh method?
oh..
Avi Kohn
@AMKohn
Dec 01 2015 01:31
The refresh method on the model is called any time data should be updated.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:31
:sparkles: aaaaahhhhh.... I'm doing it wrong then. thanks lol
Avi Kohn
@AMKohn
Dec 01 2015 01:32
There are certain conditions when its skipped (such as if a widget requires permissions from the browser) and you can set the refreshInterval property and the framework will automatically schedule everything.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:32
I've not used backbone is a few years. So this is kind of all new to me.
oh I could use refreshInterval to update the IP
You've done a lot of work on this. Very impressive. :)
Avi Kohn
@AMKohn
Dec 01 2015 01:33
The system doesn't really follow backbone patterns so closely... technically nested data should never be set on a model.
Thank you!
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:35
Shouldn't saveData merge data and not replace it? That would make it easier to update only a few properties at a time.
Avi Kohn
@AMKohn
Dec 01 2015 01:36
I didn't build it that way because it's faster in general to avoid it and the data property can be anything.
You should be able to set it as a plain string if you wanted.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:36
so to indicate a loading state. I do something like this.
            this.saveData(_.merge(this.data, {
                loading: true
            }));
is that the right place to hold a loading state? this needs to update the template {{#loading}}....{{/loading}}
Avi Kohn
@AMKohn
Dec 01 2015 01:37
Not quite. In that case you can skip the argument to the saveData function and it'll save whatever's in this.data.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:37
oh!
okay that's easier.
Avi Kohn
@AMKohn
Dec 01 2015 01:37
You can also pass { loading: true } directly to the render method to render custom data.
The render method on the view.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:38
maybe i'll do that, because things in saveData are serailized to storage, correct?
Avi Kohn
@AMKohn
Dec 01 2015 01:38
Yes.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:38
ah okay.
Avi Kohn
@AMKohn
Dec 01 2015 01:38
Widgets usually render off of the cached data initially and then update.
Without showing a loading state of any kind.
They also work offline that way.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:39
I wanted to have a small icon to the left of the IP address that indicates if it's updating.
correct, make things offline friendly is important. I'm offline on my laptop often.
Avi Kohn
@AMKohn
Dec 01 2015 01:39
Won't it usually refresh fast enough to make that unnecessary?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:40
Loading indicator isn't important (it's fast), but a little indicator that it failed would be good.
Avi Kohn
@AMKohn
Dec 01 2015 01:40
Failed to update....
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:41
yeah. Which is what will will happen when offline.
Avi Kohn
@AMKohn
Dec 01 2015 01:42
One second, I'm writing something up
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:43
I pushed what I have so far.
Avi Kohn
@AMKohn
Dec 01 2015 01:43

I'd do this in the model:

$.ajax().fail(function() {
    this.trigger("refresh:failed");
})

and then this in the view:

initialize: function() {
    WidgetModel.prototype.initialize.call(this);

    // listenTo so when the view's destroyed (that can happen while the mode persists) the listener is removed
    this.listenTo(this.model, "refresh:failed", function() {
        this.render({ error: true })
    })
}
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:44
oh okay, that's perfect. thanks
Avi Kohn
@AMKohn
Dec 01 2015 01:44
You need to call the original initialize or replicate it's contents:
        this.listenTo(this.model, "change", _.ary(this.render, 0));

        this.render();
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:46
        initialize: function() {
            WidgetView.prototype.initialize.call(this);
        },
Like this? you mean in the view.js
Avi Kohn
@AMKohn
Dec 01 2015 01:46
Yes, you can also skip that and add the listener and render call.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:46
ah okay
Avi Kohn
@AMKohn
Dec 01 2015 01:46
Whatever the imported view's variable name is.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:48

can the template engine update CSS classes in the HTML?

<div class="address {{#loading}}loading{{/loading}} {{#error}}error{{/error}}">
    <span>{{address}}</span>
</div>

Is that valid?

Avi Kohn
@AMKohn
Dec 01 2015 01:49
Yup
I moved them out of the HTML so you can do exactly that without having to worry about anything validating
You can also pass { status: "loading" } and then just do {{status}}
Mustache gets a bit messy, but it's fast.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:50
ah that's better.
I've used Mustache before, but if I remember if had issues with nested blocks or something like that.
Avi Kohn
@AMKohn
Dec 01 2015 01:52
Well you end up with things like this from the analytics widget that just shows 5 statistics:
{{#noProfile}}
    <div class="no-profile">
        <h2>{{i18n.noprofile_title}}</h2>

        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M10 6.35V4.26c-.8.21-1.55.54-2.23.96l1.46 1.46c.25-.12.5-.24.77-.33zm-7.14-.94l2.36 2.36C4.45 8.99 4 10.44 4 12c0 2.21.91 4.2 2.36 5.64L4 20h6v-6l-2.24 2.24C6.68 15.15 6 13.66 6 12c0-1 .25-1.94.68-2.77l8.08 8.08c-.25.13-.5.25-.77.34v2.09c.8-.21 1.55-.54 2.23-.96l2.36 2.36 1.27-1.27L4.14 4.14 2.86 5.41zM20 4h-6v6l2.24-2.24C17.32 8.85 18 10.34 18 12c0 1-.25 1.94-.68 2.77l1.46 1.46C19.55 15.01 20 13.56 20 12c0-2.21-.91-4.2-2.36-5.64L20 4z"></path>
        </svg>

        <p>{{{i18n.noprofile}}}</p>
    </div>
{{/noProfile}}
{{^noProfile}}
    <header {{#tiny}}{{#title}}class="has-title"{{/title}}{{/tiny}}>
        <a href="https://www.google.com/analytics/web/" class="title">{{title}}</a>

        {{#medium}}
            <div class="select" tabindex="-1">
                <span class="selected">{{activeView}}</span>

                <ul class="options">
                    {{#views}}
                        <li data-id="{{id}}"{{#active}} class="selected"{{/active}}>{{name}}</li>
                    {{/views}}
                </ul>
            </div>
        {{/medium}}
    </header>

    {{#loading}}
        <div class="loading">
            <svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
            </svg>
        </div>
    {{/loading}}

    {{^loading}}
        <div class="sessions">
            <span class="value"{{#tiny}} data-tooltip="&lt;b&gt;{{i18n.pageviews}}&lt;/b&gt;: {{pageviews}}&lt;br /&gt;&lt;b&gt;{{i18n.pagesvisit}}&lt;/b&gt;: {{pagesVisit}}&lt;br /&gt;&lt;b&gt;{{i18n.bouncerate}}&lt;/b&gt;: {{bounceRate}}&lt;br /&gt;&lt;b&gt;{{i18n.completions}}&lt;/b&gt;: {{completions}}"{{/tiny}}>{{visits}}</span>

            <span class="label">{{i18n.sessions}}</span>
        </div>

        {{#medium}}
            <div class="details">
                <div data-label="{{i18n.pageviews}}">{{pageviews}}</div>
                <div data-label="{{i18n.pagesvisit}}">{{pagesVisit}}</div>
                <div data-label="{{i18n.bouncerate}}">{{bounceRate}}%</div>
                <div data-label="{{i18n.completions}}">{{completions}}</div>
            </div>
        {{/medium}}
    {{/loading}}
{{/noProfile}}
Sorry, I thought that would be smaller
It should've scrolled.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:52
no problem :)
brb
Avi Kohn
@AMKohn
Dec 01 2015 01:53
No problem. There are nested tags everywhere and blocks negating each other like this: {{^noProfile}} <header {{#tiny}}{{#title}}class="has-title"{{/title}}{{/tiny}}>
Something like dust would probably be far more elegant, but engines like that are slow and iChrome uses a lot of templates.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 01:59
I think the issue I had was with foreach blocks, but I can't remember now. Something to do with with nested foreach and objects that had the same property names.
I can't remember how to do a foreach with Mustache
Avi Kohn
@AMKohn
Dec 01 2015 02:00
Yeah, if the property name doesn't exist on the nested object it'll be inherited.
{{#things}}{{/things}}
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:00
It had something to do with it not handling that correctly.
Avi Kohn
@AMKohn
Dec 01 2015 02:01
It also works for existence checks
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:01
something like {{#things}} {{#those}} {{bug}} {{/those}} {{/things}} when both things and those has a property called bug.
you can't use the one from things
the property name id is a good example.
Avi Kohn
@AMKohn
Dec 01 2015 02:03

Here's an example:
Data:

{
    prop: 1,
    things: [{
        id: 1,
        prop: 2
    }, {
        id: 2
    }]
}

Template:

{{#things}}
    <li data-id="{{id}}">{{prop}}</li>
{{/things}}

Output:

<li data-id="1">2</li>
<li data-id="2">1</li>
You can't check to see if prop is this.prop or an inherited prop.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:03
correct
Avi Kohn
@AMKohn
Dec 01 2015 02:04
Otherwise it's fine
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:04
yeah, I think I was doing a lot of work with tables for reports.
There was an alternative that I used that was compatible with Mustache.
Avi Kohn
@AMKohn
Dec 01 2015 02:04
It gets annoying sometimes, but I haven't found anything solid enough that gives a clean separation and is as fast or faster.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:04
I think it was Handlebars?
Avi Kohn
@AMKohn
Dec 01 2015 02:05
Handlebars adds logic, but it's slow(er).
Or was when I last tried it.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:05
I know nothing of it's speed.
Avi Kohn
@AMKohn
Dec 01 2015 02:05
I'm a bit of a performance maniac.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:05
I just know it fixes the above problem.
Anyway, I went off topic :)
Avi Kohn
@AMKohn
Dec 01 2015 02:07
I just checked a jsperf and Handlebars actually runs faster when compiled. I'll have to look into switching, Hogan can really be a pain.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:08
Hogan is the name of the engine?
Avi Kohn
@AMKohn
Dec 01 2015 02:08
Yeah, AFAIK it's the fastest Mustache one out there.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:08
Have you thought about using SASS or LESS?
Writing pure CSS makes me feel naked.
Avi Kohn
@AMKohn
Dec 01 2015 02:09
Yes, I looked into that a bit but it was looking more and more complicated to get it working with the individual widget stylesheets.
Plus, until now, I've been able to keep everything working without needing to build.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:09
maybe.
I can look at doing a pull for that.
Avi Kohn
@AMKohn
Dec 01 2015 02:10
I do like SASS very much though.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:10
It should be straight forward to use SASS
You would still use the CSS files, but just have a SASS file for each widget.
Avi Kohn
@AMKohn
Dec 01 2015 02:10
Each widget stylesheet would have to be compiled in place though, and then excluded from commits.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:11
You don't have to exclude the CSS from git.
Avi Kohn
@AMKohn
Dec 01 2015 02:11
No?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:11
You can do that later, but for now I would include them.
The reason is that the app folder is kind of a mix of many things.
Maybe when you have a chance you'll want to separate it out more.
Avi Kohn
@AMKohn
Dec 01 2015 02:12
Probably. But the more it's separated the more complicated things get.
As it is the internal system needs a 40 page document explaining what happens.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:12
Well, the last thing I want to do is complicate someone elses project and walk away. lol
Avi Kohn
@AMKohn
Dec 01 2015 02:12
I haven't written it yet.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:13
complicated is relative to what you know.
Avi Kohn
@AMKohn
Dec 01 2015 02:13
Yes... but I think iChrome is up there
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:13
it's hard to do things on any scale with backbone.
that's always been an issue with that library. it's great for rabittedly prototyping an idea but taking it further gets messy.
Avi Kohn
@AMKohn
Dec 01 2015 02:14
I went with Backbone because it has an easy learning curve and is lightweight.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:14
exactly.
if you went with something else it would be more complicated and bigger, but still do exactly the same thing.
Avi Kohn
@AMKohn
Dec 01 2015 02:15
Angular seemed good, but slow and I wasn't sure if everything was possible in it (root > tabs > tab > columns > column > widget).
Things get pretty nested.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:16
I've worked on to many angularjs projects to know that people always get lost in how to implement it.
you might have dudged a bullet by not picking it.
Avi Kohn
@AMKohn
Dec 01 2015 02:17
I hope so
Backbone's main issue is nested data structures.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:18
or nested views
Avi Kohn
@AMKohn
Dec 01 2015 02:18
Yeah, Marionette seems good, but I don't think it fixes the data problems.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:19
your data has to be reference based and not nested.
Avi Kohn
@AMKohn
Dec 01 2015 02:19
What do you mean by reference based?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:20
instead of data.child where child is an object. You would data.child_id as a id.
then you would have to lookup that child in a collection of children.
Avi Kohn
@AMKohn
Dec 01 2015 02:21
Adding collections slows things down though.
I don't think there's a perfect framework out there.
Also it can be very heavy for something like a list of files in Google Drive. You don't really need a model for each file if the whole collection is reset on refresh and you don't use events.
Anyway, Backbone is easy to extend and the source is simple so it works pretty well.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:25
it's all good. I like trying other people's projects. Helps me keep an open mind about how people solve problems.
I like seeing what can be done with different libraries.
Avi Kohn
@AMKohn
Dec 01 2015 02:27
Definitely! There is no right or best way, every library has its own great features.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:28
any idea why
                    self.data.address = _.first(matches);
Avi Kohn
@AMKohn
Dec 01 2015 02:28
??
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:28
sorry
one sec
any idea why
                    self.data.address = _.first(matches);
do that in refresh causes refresh to get called repeatedly
Avi Kohn
@AMKohn
Dec 01 2015 02:30
I don't see why it would.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:30
hmm...
Avi Kohn
@AMKohn
Dec 01 2015 02:30
I almost never have issues with refresh loops and I use roughly the same patterns.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:30
yeah, not sure what I've done wrong.
Avi Kohn
@AMKohn
Dec 01 2015 02:31
I think the issue is that you set loading to false in the complete callback.
Data changes without the widgetChange flag trigger a refresh.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:31
ah okay
Avi Kohn
@AMKohn
Dec 01 2015 02:32
The same thing with the error attribute. Backbone doesn't have a mechanism to avoid that.
Usually I just emit events like "error" or "articles:loaded" to avoid having to set anything.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:33
okay, I'll do that. I usually do state variables.
Avi Kohn
@AMKohn
Dec 01 2015 02:34
You could also set things like this.state directly instead of using the model data if you don't want the view to refresh in response.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 02:35
okay
Avi Kohn
@AMKohn
Dec 01 2015 13:22
Hi
Have you done a product launch before? The kind with a press release.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:22
There are channels that you can send your press release to for distribution.
But I have no idea how well they work.
There are free channels, and then there are paid channels.
Some work and some are a scam.
Avi Kohn
@AMKohn
Dec 01 2015 14:23
I saw them, but from what I could tell a lot just get their releases sent to spam.
I can find reporter email addresses manually, but I don't know if that's enough.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:24
It's better in my mind to write personal emails direct to the right people.
You don't need a lot.
Avi Kohn
@AMKohn
Dec 01 2015 14:24
That's what I was thinking. Once one outlet picks something up it seems all the rest follow.
But, I've never done anything like this before.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:25
If you could get someone at Mashable to write about iChrome that would be huge.
Once a major blog picks up the story. It will spread like fire to all the other blogs.
It takes time.
The key is to try.
As the saying goes.. Never try. Never fail
Avi Kohn
@AMKohn
Dec 01 2015 14:26
It got picked up in early 2014 for a little while
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:26
There you go. Hit them again and tell them there are new features or stuff like that.
Avi Kohn
@AMKohn
Dec 01 2015 14:26
Lifehacker, AddictiveTips, I think Gizmodo
A couple of big ones, but it was still in the early stages.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:26
that's awesome. I never get press like that.
the key is to keep track. Next time it happens. Send each blogger a thank you letter in the mail. Keep in contact them. Make friends.
Avi Kohn
@AMKohn
Dec 01 2015 14:27
got it.
I wasn't looking for it. I had actually kind of dropped iChrome because it didn't have many users.
Here's the article on Lifehacker in late 2013, iChrome had about a dozen widgets: http://lifehacker.com/ichrome-turns-your-new-tab-page-into-an-igoogle-lookali-1473108222
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:28
The key to success is to do what you love, and not do it for the users. If you build something you would use then others will like it too.
Avi Kohn
@AMKohn
Dec 01 2015 14:28
And the weather was broken.
I was thinking of adding the dev tools I use, but most iChrome users are more focused on social networks, and the news.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:28
That is the life of software. Nothing is ever finished or perfect.
Avi Kohn
@AMKohn
Dec 01 2015 14:29
A lot of them are students.
Yes
So, have you run something like that before (a launch)?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:29
true, but dev tools would be used by people with \$\$\$. Students have less \$\$\$.
Avi Kohn
@AMKohn
Dec 01 2015 14:29
True
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:30
just in my personal experience. The projects that I do that are focused on the things I like. Are way more likely to be successful.
You tent to do a better job and quality on that kind of stuff anyway, and it shows in the final product.
Avi Kohn
@AMKohn
Dec 01 2015 14:30
I was wondering if it's possible to try too hard to generate buzz.
Could it be disregarded if I market it as something along the lines of "this will change the way you use the internet"?
Or something to the effect of "your entire web experience in a page".
People might be disappointed by a lack of features then, but I don't know.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:32
hmm..
I use the clock and weather the most, but the coolest feature is the Google Analytics widget.
Avi Kohn
@AMKohn
Dec 01 2015 14:32
For some people it does do that. A lot of users pin it and keep it open all day
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:32
Those are my top 3
Avi Kohn
@AMKohn
Dec 01 2015 14:33
Very few people use the analytics widget
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:33
Ah.. you should push that feature then.
What you need to do is show the possibilities.
One tab that shows all your websites current visitor traffic.
Avi Kohn
@AMKohn
Dec 01 2015 14:34
They know about it, but most people don't run websites.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:34
you're missing the point.
Avi Kohn
@AMKohn
Dec 01 2015 14:35
Market it as an analytics dashboard?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:35
You can send an email to a major wordpress blogger explaining how to create an analytics tab for all your wordpress installs.
Avi Kohn
@AMKohn
Dec 01 2015 14:35
They'd want a wordpress widget, but I might be able to do that.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:35
You can send it to a travel blogger explaining how to create a weather tab for all the great vancation spots.
Avi Kohn
@AMKohn
Dec 01 2015 14:35
IDK if they have an API, but a simple statistics widget shouldn't be too hard.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:35
That's what we call "dialog" where they give you feed back of what they want.
Avi Kohn
@AMKohn
Dec 01 2015 14:36
I can control their tabs remotely and set it up for them once they install it.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:36
How about tab wizards?
Avi Kohn
@AMKohn
Dec 01 2015 14:36
BTW, I just gave the analytics widget a time selection menu yesterday: http://i.imgur.com/9Y5DD3k.png
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:36
cool!
Avi Kohn
@AMKohn
Dec 01 2015 14:36
I was considering that, but I haven't had time to try to do it right
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:37
I love watch my daily visitors on my blogs.
that's a major feature.
Avi Kohn
@AMKohn
Dec 01 2015 14:37
That's a bit of the problem when designing these
Every feature is huge for a percentage of users, but I don't want to clutter things
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:39
When Facebook was started they had a grown to 1 million users and stailled. They struggled to get more users.
Someone had the idea of adding support for photos and tagging.
After they pushed that update the user base exploded.
Sometimes you just don't know what the hot feature will be.
You just have to keep trying.
Avi Kohn
@AMKohn
Dec 01 2015 14:39
Yeah
I'll see how things go!
When I build the Pro billing system, I might be able to put something together to give people in press fully set up Pro pages.
Anyway. I have a question about Github. I noticed that you created a branch for the widget and I've seen many developers do that. Is it better to work in a branch and make more commits for a single widget/feature?
Avi Kohn
@AMKohn
Dec 01 2015 14:48

For each widget I tend to work in a few stages:

First I figure out what the widget should show to provide its basic function, where the data should come from, and as part of that, what's available.

Then I put together the framework, design a static "demo" directly in the HTML (maybe with a little JS if necessary for the design), make it pull data, add functionality (such as making the time selection menu actually change the date range), get settings together, and then finish off with a description, icon, etc.

Usually I work offline and commit the entire widget once. Should I be working in a branch and doing 6+ commits per widget? Do you squash them before merging back to master?

Sorry for the long message
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:49
so for you the process might be different then for me.
Avi Kohn
@AMKohn
Dec 01 2015 14:50
But I easily commit 1,000+ lines at once. Is that a bad practice?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:50
For me, I created a branch because each pull request is limited to 1 branch.
That means, that I could make a pull request to give you a new widget but you may not review or accept it.
So I don't want to be blocked from working on another widget. So I put them into different branches.
It's your repo. You can do what you want :)
Avi Kohn
@AMKohn
Dec 01 2015 14:51
Yeah, but I'm inexperienced. I'd like to learn and do things better.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:51
Generally, it's a good practive to have the branches that are ment to be stable.
Avi Kohn
@AMKohn
Dec 01 2015 14:51
I try to keep things 100% functional in every commit
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:51
So you might want to have a "pro" branch, but this is like the trunk for the next version
You could then have a features branch like "features/pro/weather" which is broken
you just push commits to that branch every day.
If your harddrive dies you still have all your source code save
When the weather update is done. You merge to "pro" and delete the feature branch
Avi Kohn
@AMKohn
Dec 01 2015 14:52
I run separate real time backups also
Do you squash your commits? Or keep the process intact?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:52
that's a good practive
I keep the process intact.
The fewer steps the better.
The commits are not important.
The branches are more important then the commits.
When you update the pro. I'll fetch the remote origin and update my fork.
I'll check out whats new in pro, and merge it to my feature branch if it doesn't break anything
That way when I do a pull request for my feature it merges successfully.
Avi Kohn
@AMKohn
Dec 01 2015 14:54
I meant with individual commits for a feature.
Like your commits at the right.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:54
You can do many many commits to a feature branch.
Avi Kohn
@AMKohn
Dec 01 2015 14:54
Are you going to squash them into "Added a WhatsMyIp widget" before pulling?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:55
No.
Avi Kohn
@AMKohn
Dec 01 2015 14:55
OK
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:55
That would destroy the history.
One day. You might want to look back on something you did.
For example; I don't commit out source code. If the code is no longer needed. I delete it from the source files.
This way the source code is kept clean, and if you want to go back and reuse that source code. It's in git history.
Avi Kohn
@AMKohn
Dec 01 2015 14:56
Got it
I should probably switch to something like that so I don't have commits like this: AMKohn/iChrome@d818452 with 2,300 changed lines
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:57
yeah, thats what I call a super push.
it's actually really hard to fix merge conflicts when the commit is that large.
I commit so often that I wrote a script to do it.
Avi Kohn
@AMKohn
Dec 01 2015 14:58
In that commit I also finished support for maximizable widgets since I didn't know what was necessary until I built a widget using the system. Is it necessary to keep the changes to the widget system completely separate from the rebuilt widget itself?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:58
All I have to do is write gitty "message"
And it will commit and push.
General no. The work to separate the fix in another branch adds to the time it takes to complete the work.
The only time you would do that is if you know another developer was blocked waiting for the fix.
Avi Kohn
@AMKohn
Dec 01 2015 14:59
OK
I use the UI. I know how to use git itself directly, but I have a few small changes I need to exclude occasionally.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 14:59
It's all about work with other "people" and now about best practives to work with git.
Avi Kohn
@AMKohn
Dec 01 2015 14:59
And it's easy to remove specific lines from the UI
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:00
I use like 5 git tools at the same time
I like to use sourcetree.
It makes branching so much easier.
Everyone has their own personal preference when it comes to git
Avi Kohn
@AMKohn
Dec 01 2015 15:01
So I've seen, but I'd like to get things more together to work with other devs
If the pro release goes well, I hope that I'll be hiring a few people
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:01
oh you're ambitious! I wish you all the best of luck.
Avi Kohn
@AMKohn
Dec 01 2015 15:02
Shoot for the moon...
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:02
Shoot for mars... this is 2015
Avi Kohn
@AMKohn
Dec 01 2015 15:02
True.
lol
Space travel has practically halted though, so we (as a species) aren't shooting anywhere.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:03
we as a species just shoot each other
Avi Kohn
@AMKohn
Dec 01 2015 15:03
Last moon landing was 1972 I think
Yes
Unfortunately
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:04
true, but China just landed a drone on the Moon last year. So we still visit the thing in one way or another.
Avi Kohn
@AMKohn
Dec 01 2015 15:05
Yeah, but no people. No one but a few thousand scientists seems to care at all
And America has gotten relatively poor
You're in Canada?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:05
it only takes 1 scientist to change the world and 1 made man to distroy it.
I'm near Toronto, Ontario, Canada. Where are you at?
Avi Kohn
@AMKohn
Dec 01 2015 15:05
Yup. Amazing that we're still here.
Hollywood, FL
USA
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:06
Nice. Lots of sun :)
Avi Kohn
@AMKohn
Dec 01 2015 15:06
And rain
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:06
raining here too
Avi Kohn
@AMKohn
Dec 01 2015 15:06
Not yet here, it's just overcast
Soon
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:07
Do you work or go to school?
Avi Kohn
@AMKohn
Dec 01 2015 15:07
I'm homeschooled. So I can work on iChrome or other projects a few months at a time and then catch up
16 now
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:08
wow. I'm often amazed at how young people get into programming.
Avi Kohn
@AMKohn
Dec 01 2015 15:08
I'm planning on trying to finish high school after this release is out
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:08
I should introduce you to another young coder I know. He does Android apps.
Avi Kohn
@AMKohn
Dec 01 2015 15:08
I've spoken to people that started way younger than I did
Interesting!
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:09
Let me see if I can find his info.
Avi Kohn
@AMKohn
Dec 01 2015 15:10
It's fine, I have lots of work to get to anyway.
I have this to do: http://i.imgur.com/Me0YW7l.png
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:13
WAIT. You can't work on Christmas!
Avi Kohn
@AMKohn
Dec 01 2015 15:14
I take some breaks, but usually work almost every day
And I'm not Christian...
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:14
No tree? no presents?
Avi Kohn
@AMKohn
Dec 01 2015 15:14
Besides, that's an easy day.
Nope
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:14
:(
Avi Kohn
@AMKohn
Dec 01 2015 15:15
Jewish, we have way more holidays
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:15
ah
you get 1 present per day for a week?
Avi Kohn
@AMKohn
Dec 01 2015 15:15
We usually don't do presents for anything actually. Mostly it's lots of food
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:15
Food is good :)
Avi Kohn
@AMKohn
Dec 01 2015 15:15
We basically have Thanksgiving dinner every Friday night. For real.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:16
The company I work for is all Jewish management. So I basically get those days off too :)
Because they don't show up for work. So it's an easy day.
Avi Kohn
@AMKohn
Dec 01 2015 15:17
Cool!
And your holidays as well I assume
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:17
Yeah, I hope to take some time off work this year.
Avi Kohn
@AMKohn
Dec 01 2015 15:17
Is the company Thinking Media or is that yours?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:17
That's my company, but I'm now working for a start up in the city.
I've wanted to turn thinking media into a developer blog.
Avi Kohn
@AMKohn
Dec 01 2015 15:18
I know nothing of blogging
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:19
It's kind of like system logs but more readable.
Avi Kohn
@AMKohn
Dec 01 2015 15:19
lol
Sounds about right
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:19
lol
Avi Kohn
@AMKohn
Dec 01 2015 15:19
And -vvvvv -h
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:22
iChrome question - how can I show iChrome on new tabs in Google Chrome. Right now it only works for the home page.
Avi Kohn
@AMKohn
Dec 01 2015 15:22
I had to make a separate extension for that because Chrome doesn't have a programmatic API
That's in the new tab branch, but the pro branch is the main extension
I don't know if they're safe to merge
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:23
oh
Avi Kohn
@AMKohn
Dec 01 2015 15:23
I don't think they are, I'd have to make a bunch of manual changes.
But you can apply the manifest changes from that branch and it'll load fine.
"chrome_url_overrides" : {
    "newtab": "index.html"
}
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:24
cool thanks
Avi Kohn
@AMKohn
Dec 01 2015 15:24
No problem.
I've got to go though.
It was nice chatting with you. I'll keep the window open, let me know if you have questions about anything.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:25
cool, thanks.
I added that to the manifest. but new tabs still open regular google
sorry, to bug about it :)
Avi Kohn
@AMKohn
Dec 01 2015 15:26
You also need to reload it from chrome://extensions
No problem
Manifest changes require a reload
As do background page (background.js) changes
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:26
that did it. thanks! :)
all the widgets should use em font sizes.
That way you can adjust the font size based upon the width of a column the widget is in.
Avi Kohn
@AMKohn
Dec 01 2015 15:33
Doesn't that work the other way? (column widths in ems are dependent on font size)
And the columns are flexbox, only the fixed ones have hardcoded widths
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:34
You would have javascript with a binding to window.resize that would adjust the font size.
So things scale properly when the width of the browser changes.
it's a pain i know
Avi Kohn
@AMKohn
Dec 01 2015 15:35
Right now columns wrap when the windows width is too small.
I was going to say that
I haven't worked with em (or rem) before either
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:35
i don't use rem
Avi Kohn
@AMKohn
Dec 01 2015 15:35
rem are probably better since iChrome is modern-only.
I get to use the cutting edge stuff :smile:
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:36
You can to use sub-pixels :)
You can do this border-width: 1.25px and it's valid
Chrome supports high density displays.
Avi Kohn
@AMKohn
Dec 01 2015 15:36
My screen isn't retina so it doesn't make a difference, I've stuck with full pixels so far
Plus they can get blurry that way
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:37
my too. that's what I do. I'm to cheap for a retina display
I figure people with a retina display are to busy shopping at apple.ca to care about anything we do.
Avi Kohn
@AMKohn
Dec 01 2015 15:37
lol
I still use 2x images for everything
They usually look better at 1x anyway
But I get things like the fetch API (I've been thinking of replacing jQuery's AJAX since it's bulky), beacons, no prefixes, etc.
Still waiting on ServiceWorker though
That'll make a huge difference
Mathew Foscarini
@thinkingmedia
Dec 01 2015 15:47
what is ServiceWorker?
Basically it can intercept and handle web requests
It didn't work for extensions before Chrome 46 (the latest release, so I can't make iChrome only available for 46+ users, I need to wait 3-4 versions or so because schools and companies manually review updates so they're slower)
That will let me do things like load the compiled JS file from ichro.me/app/v{{clientVersion}}/app.js and get updates out instantly (it takes days with the webstore), load themes directly from the server and have them available offline without having to write custom logic for that, maybe even load widgets remotely, etc.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:02
cool :)
Avi Kohn
@AMKohn
Dec 01 2015 16:02
Plus things like themes that work off of RSS feeds that need fancy logic to refresh and cache properly could be moved to the server so you can just load themes.ichro.me/images/bing.jpg and the worker will cache it for offline use
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:03
sounds like a version 3 thing
Avi Kohn
@AMKohn
Dec 01 2015 16:03
Yes...
Pro will actually be V3. I was thinking V2.2, but the new widget system is a sort-of breaking change.
Although there aren't really any in a web app
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:04
think about using version branches.
rename pro to just v3.1
that will make tracking releases easier
Avi Kohn
@AMKohn
Dec 01 2015 16:04
I should probably do that
I tag them all
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:05
yeah, but you can automate that with grunt with the branch name is a version too
Avi Kohn
@AMKohn
Dec 01 2015 16:05
I never saw anything to rename a branch. Is there a place to do it?
I didn't put together a release task because everything in the webstore needs to be manual (and the interface stinks)
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:06
git checkout -b "new name"
you don't rename. you just create a new one and delete the old one
Avi Kohn
@AMKohn
Dec 01 2015 16:06
OK...
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:06
what you put in the store doesn't have to alone to the versions in git
you might do v3.1, v3.2 and v3.3 before it goes to the store
the store is for the offical release I guess that users get
it's up to you
one sec..
this is what I use. it works great
https://github.com/vojtajina/grunt-bump
Avi Kohn
@AMKohn
Dec 01 2015 16:11
OK pro is now v3 and I updated the default branch from master
Hopefully that won't mess with your fork
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:17
not at all, i'll just change the remote origin to point to the new branch
Avi Kohn
@AMKohn
Dec 01 2015 16:17
So what's your workstation?
3 monitors?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:18
4 monitors
lol
Avi Kohn
@AMKohn
Dec 01 2015 16:18
Better!
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:18
2 are for my PC, 1 for a server and 1 for an extra PC
Avi Kohn
@AMKohn
Dec 01 2015 16:18
I work on a laptop
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:18
I have it one a 4 monitor stand. looks like the metrix :)
Avi Kohn
@AMKohn
Dec 01 2015 16:18
lol
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:18
I'm on a laptop right now too.
Avi Kohn
@AMKohn
Dec 01 2015 16:19
I wish I could have three, they would work perfectly with the way I work (Sublime text vertical, Chrome at the top right, and the Chrome devtools at the bottom left)
But I only have a small desk and I'd need a new computer with a real GPU for that.
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:20
I would like just 2 29" curved 4K monitors :)
I need a new GPU too.
Avi Kohn
@AMKohn
Dec 01 2015 16:20
Just 2?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:20
Yeah, at 4K two is enough
my eyes are as good as they use to be... to many years sitting infront of a monitor
Avi Kohn
@AMKohn
Dec 01 2015 16:21
Resolution is quickly becoming irrelevant
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:21
Reality double so.
Avi Kohn
@AMKohn
Dec 01 2015 16:22
At that density I don't think you can tell the difference
lol
Did you rewatch them recently?
Mathew Foscarini
@thinkingmedia
Dec 01 2015 16:22
I have 2K at work on a 32" (which is too big, but I didn't pick the monitor).
You can put one app on the left and another on the right and work comfortably.
I haven't watched the matrix in a while.
Avi Kohn
@AMKohn
Dec 01 2015 16:23
Sounds good