Christian Engvall

Screenbar version 0.3 adds a feature to enable and disable sound while taking automated screenshots.

Update

Screenbar is now available for download on the Mac app Store

What is new in version 0.3

A user called btecu opened an issue on Github asking for a feature to disable the sound in Screenbar. I thought that sounded like a nice feature to have in the app.

This is what the setting looks like:

Play sound when taking screenshot

Upcoming features

In the next version the GUI will be reworked. As it is now it’s not looking very good. It has got a menu and a setting screen, but I think these will work better when merged together.

In recent days Proposales released a new version. And with that version came an Electron app which I was hired to develop.

Proposales

Proposales is an award-winning startup by Joakim Green that helps you to create, deliver and monitor business proposals online.

This is how Proposales explain their business:

Replaces the traditional PDF proposal. Proposales is a new standard for interactive and mobile-friendly business proposals that is presented for the recipient via a webpage.

Electron

Electron is a cross platform tool for creating desktop apps with Javascript, HTML5 and CSS3. You’ve got access to the platform that the user is running on through an API that takes care of doing platform specific things. In the background Electron is running a Node.JS app in one or more Chromium browsers.

Proposales electron app

Proposales is testing a new alternative to support old browsers. Instead of supporting outdated browsers they offer this desktop app. But it’s also available for all their users so that they can keep it in the dock or start menu to be able to start sending proposals without starting a browser.

This tutorial walks you through how to add an info window when a user clicks or taps on a Google map marker. The tutorial starts where the Ionic 2 Google map markers left off.

Open up src/pages/home/home.ts and add a new method in that class called addInfoWindowToMarker.

addInfoWindowToMarker(marker) {
  var infoWindowContent = '<div id="content"><h1 id="firstHeading" class="firstHeading">' + marker.title + '</h1></div>';
  var infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent
  });
  marker.addListener('click', () => {
    infoWindow.open(this.map, marker);
  });
}

An info windows displays HTML of our choice. I add the title of the marker wrapped around some divs in the infoWindowContent variable. Then assign variable to the infoWindows content property.

This method also adds an eventlistener that listens for user taps och clicks, and when this happens a call to the infowindows method open is called.

We’ll call this method from the addMarkersToMap method which we created in the markers tutorial Now it looks like this:

addMarkersToMap(markers) {
  for(let marker of markers) {
    var position = new google.maps.LatLng(marker.latitude, marker.longitude);
    var dogwalkMarker = new google.maps.Marker({
      position: position,
      title: marker.name,
      icon: 'assets/images/marker.png'});
    dogwalkMarker.setMap(this.map);
    this.addInfoWindowToMarker(dogwalkMarker);
  }
}

Now when running the app this is how the infoWindow looks:

InfoWindow Google map marker

Closing other info windows when opening a new one

To close an InfoWindow we need to call its close() method. To do that we also need to keep a reference to our windows.

Add a property called infoWindows in home.ts, and initialize it as an array in the constructor.

export class HomePage {

  @ViewChild('mapContainer') mapContainer: ElementRef;
  map: any;
  infoWindows: any;

  constructor(public navCtrl: NavController, public http: Http) {
    this.infoWindows = [];
  }

We’ll use this property to store references to infoWindows. Right before closing the addInfoWindowToMarker we’ll push an infoWindow to the new array. We’ll also call a new method called closeAllInfoWindows() in marker.addListener.

addInfoWindowToMarker(marker) {
  var infoWindowContent = '<div id="content"><h1 id="firstHeading" class="firstHeading">' + marker.title + '</h1></div>';
  var infoWindow = new google.maps.InfoWindow({
    content: infoWindowContent
  });
  marker.addListener('click', () => {
    this.closeAllInfoWindows();
    infoWindow.open(this.map, marker);
  });
  this.infoWindows.push(infoWindow);
}

This is what the closeAllInfoWindows method looks like:

closeAllInfoWindows() {
  for(let window of this.infoWindows) {
    window.close();
  }
}

Now when clicking on another marker all other infoWindows will be closed. Read more about the InfoWindow at the official docs.

This rsync example sends folder contents to a remote server using ssh. It also shows how to exclude multiple files or folders.

I recently switched to jekyll. And in that switch i created my own deploy-script using secure copy. It seemed to work well but I recently discovered that some of my files wasn’t being deployed at all. Not sure why, possibly because of a crappy folder exclude technique I was using. Knowing that many recommend rsync I decided to switch to it.This blog post explains the command I use to deploy my Jekyll site.

rsync

What is rsync? This is how the creators themselves explains it:

Rsync is a fast and extraordinarily versatile file copying tool. It can copy locally, to/from another host over any remote shell, or to/from a remote rsync daemon. It offers a large number of options that control every aspect of its behavior and permit very flexible specification of the set of files to be copied. It is famous for its delta-transfer algorithm, which reduces the amount of data sent over the network by sending only the differences between the source files and the existing files in the destination. Rsync is widely used for backups and mirroring and as an improved copy command for everyday use.

rsync ssh example that excludes multiple folders

rsync -avzuh -e ssh folder-to-copy/ username@host:remote-target-folder/ --progress --exclude '.git' --exclude '.DS_Store'

What does those -avzuh -e options do?

• -a, archive: it is the short alternative for all these options: rlptgoD
• -v, verbose: Displays more information about what is happening when running the command.
• -z, compress: Compresses the files during transfer.
• -u, update: Skip files that haven’t changed.
• -h, human readable: Output numbers in a human readable format.
• -e, rsh: specify the remote shell to use.
• --progress : Shows progress during the transfer.
• --exclude: Folder or file to be excluded.

There are a lot more options to use.

Dogwalk app has been released for Android and iOS Devices

What does it do?

This summer I got a Bernese mountain dog. About now both him and me got tired and bored of the places we went for walks. So I got online and found new spots. This app collects these spots on a map and hopefully you can find some new places to go from it.

Dogwalk screenshot

Minimum viable product

The version released is a minimum viable product of an app that helps dog owners find new places to walk their dog. This means it is as simple as it can be at the moment. Right now there are 5 spots on the map and all are located in and around Jönköping.

Upcoming features

Before I’ll start marketing the app i want to add more features. Every time I’ve got a new feature added to the app it will be released. Big or small. The list below are things I think about adding to the app:

• More spots
• Rating system
• User added spots
• Is the spot an illuminated track
• Are there more than one track to walk at the spot and how long are they?
• is it a fenced area?
• Sort by type of spot
• Switch from Ionic to React native

By spring/summer it might be an app worth marketing to new and old dog owners.

Built with Ionic

Dogwalk is built with Ionic which is a crossplatform framework. This makes it possible for me to write one codebase for the two platforms i target which is Android and iOS.

I want some of that internet money

In my last app project I tried ads as an income source. I wasn’t really happy about myself creating an app with such an abomination in it :) This time I added a price tag to the app instead. So no ads this time.