Doing infinite-scroll properly in AngularJS

Recently I wanted to make infinite scroll with Angular Material for project that I'm working on. I wanted to have header and footer with content area which is going to host content in md-list.

Note: This post is using md-list and md-list-item for demonstration purpose but you can ng-repeat anything you'd like.

I stumbled upon ng-infinite-scroll, which offers infinite scroll for AngularJS. And it worked great when I had a

Read More

Using logger with Electron and AngularJS

Angular provides $log for logging, but if you'd like to use different logger (and use it throughout your Electron app), you will have to handle it bit more differently.

Motivation

I'd like to have single logger to output logs to console and external file. It has to work in both AngularJS files and Electron files.

For my project, I've chosen to go with Winston which seems pretty powerful and stable,

Read More

Proper tray icon

I've been playing around with tray icon so I thought to write down couple of thoughts.

Not to repeat the code, you can check out how to use it in documentation.
BUT, be aware of couple of things though...

Straight to the point

var platform = require('os').platform();  
var trayImage;  
var imageFolder = __dirname + '/assets/images';

// Determine appropriate icon for platform
if (platform == 'darwin') {  
    trayImage = imageFolder + '/osx/trayTemplate.png';

Read More

Transparent window

To create transparent window in Electron, two steps are required:

  • When creating BrowserWindow, set transparent property, i.e.:
const BrowserWindow = require('electron').BrowserWindow;
myWindow = new BrowserWindow({
    name: "My app window",
    width: 500,
    height: 250,
    transparent: true,
    frame: false,
    toolbar: false
});
  • For your main window HTML file, define CSS to make background transparent:
html, body {
    background: rgba(0, 0, 0, 0);
}

That's it!

Read More

Sublime build for Electron apps

If you use Sublime Text, you can define your own build to run Electron app. In Sublime you can create new build configuration with navigating to Tools -> Build Systems -> New Build System...

Paste following code and save the file as Electron.sublime-build:

{
    "cmd": ["node_modules/.bin/electron", ".", "--enable-logging"],
    "working_dir": "${project_path:${folder}}",
    "path": "/usr/local/bin/"
}

If you installed Electron globally, use:

"cmd": ["electron", ".", "--enable-logging"]

Note: Option

Read More

Electron + AngularJS - Packing and distribution

Update: This post was written for electron-builder v2. Time passed and stuff changed, so I wrote another series for electron-builder v3.

This is fourth part of introduction series to create application with Electron and AngularJS.

If you've missed, check how to add automatic updates.

Dive right in

As a final step in application development, we'll need to provide binaries for users to install. The easiest way is to use electron-packager

Read More

Electron + AngularJS - Adding automatic updates

Update: Stuff changed, so I've wrote a series on implementing auto-update with Squirrel.

This is third part of introduction series to create application with Electron and AngularJS.

If you've missed, first create sample application.

One of the requirement for developing desktop application nowadays is ability to provide automatic updates.

Let me tell you a story...

I used NW.js for some time, but I missed this functionality. I went on

Read More

Electron + AngularJS - Creating sample application

This is second part of introduction series to create application with Electron and AngularJS.

If you've missed, check out how to prepare dev environment.

For demonstration purposes, through the course of this introduction series I'll be progressively build Todo application.

The big picture

This Todo app does not (and probably) will not be perfect. What I want to concentrate is to go through underlying structure and how it works on

Read More

Electron + AngularJS - Preparing dev environment

This is first part of introduction series to create application with Electron and AngularJS.

Before starting to write any application code, we should install some prerequisites for running Electron apps as well as necessary libs.

Installing Node.js

First we need to have Node installed. This is required since we need npm (Node Package Manager) to run things. I suggest installing version 0.12.9 because of this and this

Read More