Salient Soft

I was unable to access a couchDb from another computer on the local network.

There were 2 issues that needed resolving to address this:-

1/ By default, CouchDb binds to 127.0.0.1:5984, and therefore is only accessible if you use this address (i.e. the loopback adapter) explicitly. Other adapters, such as the lan adapter which has the local ip address, will not work, so you can’t enter the server machine’s own IP address as this won’t work. To fix this, edit local.ini in <couchdb home dir>/etc, and bind to 0.0.0.0 instead of 127.0.0.1, as  follows:-

[chttpd]
port = 5984
; Options for the MochiWeb HTTP server.
;server_options = [{backlog, 128}, {acceptor_pool_size, 16}]
; For more socket options, consult Erlang’s module ‘inet’ man page.
;socket_options = [{recbuf, 262144}, {sndbuf, 262144}, {nodelay, true}]
bind_address = 0.0.0.0

Note the use of the [chttpd] section in the ini file, not [httpd]

Editing local.ini will override settings in default.ini, and these settings will also be preserved across upgrades, whereas edits to default.ini will not.

This is described in this post here. Note that you can also edit configuration parameters in fauxton in the configuration section. Clicking on the value of a parameter will expose an edit box to allow changes.

Once changes have been made you need to bounce the service.

2/ My other issue was to do with Kaspersky firewall settings. To ensure that you can access a machine from elsewhere on the lan, make sure your network type for the lan adapter is set to trusted and not public. Public will force you to enter explicit rules for every address/application/port etc. that you use, which is a complete pain on a lan. Trusted just allows all machines on the lan to interoperate freely. This is detailed here under how to change the network status.

No Comments »

When adding a menu button to an ion-navbar, there is a styling issue whereby the menu toggle gets the wrong styling.
This depends on whether the menuToggle attribute is present.

If the attribute is present and the toggle is placed inside an ion-buttons group, it gets the wrong styling via a special case for menu toggles (flex rather than inline-block like the rest). This (incorrectly) puts it on a separate line above the others. Putting it separately above the ion-buttons group, with an explicit left on the button, fixes the problem.

If the menuToggle attribute is NOT present, then the button needs to go inside the ion-buttons group as otherwise for example for a left group the other left buttons go to its left. The rules for all this styling seem a bit quirky and not clearly defined.

This post discusses this issue.

No Comments »

This is described in the theming docs here.

The above mentions using the color function to apply a color to an element.

The $colors defines a sass map of the color variants for Ionic. You can use the sass map-get() function to get colors from the map, as posted here:-

ion-menu ion-item span {       
 color: map-get($colors, primary);
}

However the correct way uses the color function as per the above theming docs and the comment in the above post:-

ion-menu ion-item span {
  color: color($colors, primary, base);
}

No Comments »

I wanted to try showing a centered title with a back button on the left, in the NavBar.

I tried various ways of doing this with css hacks, using floated <h1> and <div> combinations, but could not get it all to line up correctly.

The correct way is just to include an <ion-title> in the NavBar, as follows. This can be centred via the text-center attribute.

<ion-header>
  <ion-navbar>
    <ion-title text-wrap>
      {{place.localisedName}}
    </ion-title>
  </ion-navbar>
</ion-header>

Whilst text-center worked correctly in the title, note that text-wrap did not and was ignored.

As I did not take this pattern any further (I decided not to use titles in the toolbars but to put titles immediately underneath) I did not investigate this further.

This highlights an important issue. Too much CSS hacking breaks the encapsulation of the CSS model used by Ionic/Angular which is a bad thing – other things are in danger of breaking even if it does work initially.

it is obviously better to go with the tools/tags provided and investigate this way thoroughly first for a solution – in this case I did not and initially went down a blind alley which took time as well as being a suboptimal approach which did not work and broke encapsulation.

No Comments »

I hit issues with Webstorm, pregnant pauses and hanging for a few seconds.

The following points/posts offer help on tweaking:-

1. Firstly it helps to see current VM usage. This is not on by default but if you tick Show Memory Indicator in Settings/Preference/Appearance it will then show at the bottom right of the status bar.
2. VM can be tuned by editing the VM options as per this post here, but note that bigger is not necessarily better. Some of the hanging can be caused by excessive Garbage Collection when too much memory has to be GCd in one go. This post here goes into this. The tuning process can be informed by checking the memory indicator to see what you actually use.
3. Excluding unwanted directories from indexing is important – see this post for details on doing this.

No Comments »

This isn’t obvious when you browse the documentation, at least when starting out.

I’m coming from having used for example ThemeRoller with PrimeFaces, where structural css is defined by the components, to give size, shape, layout etc. Theming css   is defined by the theme, using common style classes etc. used by all components, to give colours, textures and fonts etc. The two concepts are mutually orthogonal, so you can use any theme with any component, and create your own theme.

I’ve seen theming and themes mentioned on a number of Angular/Ionic related sites, but without the same concept of orthogonality – themes are mentioned along with specialised components which are deemed to be part of a theme. Therefore, theming in Angular appears to encompass more than just the look and styling of components, but also the actual components and their functionality.

This could be summarised simply as follows:- ThemeRoller encompasses the look of an application, with components such as Primefaces encompassing the feel of the application.

With Angular/Ionic, the concept of theming is broader and appears to encompass both look and feel.

Some excellent posts by Josh Morony on how to theme an ionic application help to get under the hood on all this, and are available here:-

https://www.joshmorony.com/a-guide-to-styling-an-ionic-2-application/

https://www.joshmorony.com/a-list-of-common-css-utility-attributes-in-ionic-2/

https://www.joshmorony.com/tips-tricks-for-styling-ionic-2-applications/

https://www.joshmorony.com/hacking-css-in-ionic-2/

No Comments »

Whilst Angular 2 routing is handled via routers, Ionic takes a different approach with the use of the NavController and related components based on it like Nav and Tab.

Ionic navigation allows views to be pushed and popped from a navigation stack, and allows a root page to be established for a particular navigation stack.

A useful tutorial on Ionic Navigation may be found here.

No Comments »

There is no specific feature for doing this in Fauxton – you can upload attachments but not specifically delete them.

You can delete the attachment programmatically by issuing an HTTP DELETE to the attachment’s URL

This post here states that removing the stub reference to the attachment in “_attachments” in the document actually does the same as deleting programmatically as above.

In both cases, the stub is deleted, and the actual attachment is marked for delete. It will only actually be deleted when the database is compacted. However, the important point is that both methods apparently do the same thing.

Therefore, in Fauxton, you can just edit the JSON for the document to remove the attachment stub, and save the change.

No Comments »

An <ion-item> is used (among other things) as the child of an ion-list and has a number of options, detailed here.

A particular issue I hit was that by default text in an item is truncated with an ellipsis on the end, whereas I wanted it to wrap and grow the item height.

Points on this:-

1. The item is set to have a min-height and so is capable of expanding down.
2. By default, it is set to have white-space:nowrap which prevents wrapping, and text-overflow:ellipsis which gives the ellipsis.
3. Wrap can be enabled per the text alignment section in the above ion-item page, using a utility attribute documented here. These attributes are useful as they allow general types of text transformation on a variety of components. In this case, adding the text-wrap attribute to the ion-item allows the text to wrap – it triggers a css attribute selector to set white-space:wrap (a neat use of custom attributes on a custom tag to trigger a css style rule directly).
4. Note that the container for the ion-item and its various parent containers are all set to overflow:hidden, but this does not prevent text wrapping when white-space:wrap is in effect as above.

No Comments »

It is useful to enable CORS when using CouchDB for development, as this avoids the need for workarounds such as installing e.g. the CORS plugin in Chrome to bypass CORS issues.

As CORS is enabled/allowed on the Server Side, this needs to be enabled in CouchDB. This post details approaches to this. The easiest way (which is mentioned in the post comments) is just to do it in Fauxton. Just pick configuration on the left, and select CORS. You can enable for all domains (simplest for a closed development environment) or create a list. This github commit here can also do it but appears long winded compared to just doing it in Fauxton for simple cases.

No Comments »