Unused Domain Name and IP Addresses for Documentation

When writing documentation or blog posts it would be nice to include domain references which don’t link to real websites.

Fortunately the people who organised the domain DNS references set aside some domains specifically for this.

The domains won’t be made available and are to be kept purely for documentation.

There’s a document detailing Reserved Top Level DNS Names.

Of particular interest is the use of the following in documentation

  • example.com
  • example.net
  • example.org
  • .example

Well that’s the domain names sorted. What about IP addresses?

Yes, these have been thought about too.

There’s 3 series of the older ipv4 address blocks kept aside for this. Details are given in the document IPv4 Address Blocks Reserved for Documentation.

The address blocks available are:

  • 192.0.2.0/24 (TEST-NET-1)
  • 198.51.100.0/24 (TEST-NET-2)
  • 203.0.113.0/24 (TEST-NET-3)

And there’s the one for ipv6, covered by the document IPv6 Address Prefix Reserved for Documentation.

For ipv6 there’s a reserved prefix, given as 2001:DB8::/32

MailChimp Modify Line Spacing

On emails sent from MailChimp the line spacing and the gap between paragraphs may be too large.

Can the spacing be easily configured?

The line spacing, the height of each line of text, can be set within the template editing. However, the option to configure the spacing between paragraphs is not given.

Login to your MailChimp account and click on Templates in the menu at the top left of the screen.

The view changes to show your list of templates which have been created.

Its assumed that you wish to modify an existing email template. To avoid making uncorrectable changes to one of your templates – take a copy. From the list of templates click on the Edit drop down list at the right hand side. Select Replicate.

Rename the template appropriately.

Now click on Edit at the right hand end of the line.

Shown on the page on the right hand side are content features to be included (these can be dragged into the template and used). The second tab Design provides a number of options affecting the look of your Mailchimp email.

The image below shows the expanded Body Design section, with the line height set to 1 1/2 spacing.

MailChimp modify line spacing: body design

Your selection is reflected in the template view, on the left of the page.

Similarly the spacing for the headings can be set within the Page section.

For individual content blocks added to thetemplate further customisation of the spacing may be included. The text block includes a Line Height setting under the Style tab.

If the spacing options given above are not enough and you wish to edit your template to a finer degree the option is to edit the themes HTML.

Further Options

If you wish to modify other aspects of the email styling, for example the spacing after a paragraph, a different approach is required.

Paragraph Margins – Individual Approach

As an example, to modify the spacing after the paragraphs in a text block

Click on the text block in the template view to show its Content; Style; and Settings on the right hand pane.

Select the Content view.

MailChimp modify line spacing: text block

Within the editor click on the icon highlighted above, to show the HTML code view.

<h1>Designing Your Email</h1>

<h3>Creating an elegant email is simple</h3>

<p>Now that you’ve selected a template to work with, drag in content blocks to define the structure of your message. Don’t worry, you can always delete or rearrange blocks as needed. Then click “Design” to define fonts, colors, and styles.</p>

<p>Need inspiration for your design? <a class="mc-template-link" href="http://inspiration.mailchimp.com">Here’s what other MailChimp users are doing.</a></p>

Note in the updated code, below, I’ve modified the second paragraph to add a setting (style) for the bottom margin:

<p style=”margin-bottom:10px”>

<h1>Designing Your Email</h1>

<h3>Creating an elegant email is simple</h3>

<p style="margin-bottom:10px">Now that you’ve selected a template to work with, drag in content blocks to define the structure of your message. Don’t worry, you can always delete or rearrange blocks as needed. Then click “Design” to define fonts, colors, and styles.</p>

<p>Need inspiration for your design? <a class="mc-template-link" href="http://inspiration.mailchimp.com">Here’s what other MailChimp users are doing.</a></p>

Change the number of pixels set to suit your presentation.

A Global Approach

MailChimp doesn’t offer the global paragraph and line spacing settings as global settings

To make the changes globally will require editing of the HTML code of the template.

To edit the template’s HTML the theme is first exported, edited, and then once more imported for use.

On the list view of the templates this is offered as an entry in the dropdown list along with edit at the right hand side.

Select Export as HTML.

MailChimp presents this as an option with a warning that the imported template doesn’t allow visual blocks to be added, edited or moved.

Save the template.

You may find that copying the HTML view of the email template locally and making the edits a better way.

Open the file with an HTML editor such as Geany.

MailChimp modify line: HTML export

Within the MailChimp template there is styling at the top. This is used to set the appearance of the email. Covering elements such as the font colour; page background colour; and the font size.

Its within this styling section <style type=”text/css”> that the line-height and the margins will be edited.

As shown above its the section, below which is the base configuration for paragraphs.

p{
  margin:1em 0;
  padding:0;
}

In the above margin:1em 0; sets the margin above and below the paragraph to the default value. If you wish to make it greater or smaller modify this value to, for example,

p{
  margin:1em 0;
  padding:0;
  margin-bottom:20px;
}

The line-height for the content body is configured in the section:

.bodyContainer .mcnTextContent,.bodyContainer .mcnTextContent p

observe the content below:

/*
@tab Body
@section body text
@tip Set the styling for your email's body text. Choose a size and color that is easy to read.
*/
.bodyContainer .mcnTextContent,.bodyContainer .mcnTextContent p{
  /*@editable*/color:#606060;
  /*@editable*/font-family:Helvetica;
  /*@editable*/font-size:15px;
  /*@editable*/line-height:200%;
  /*@editable*/text-align:left;
}

Within the above modify line-height to a smaller percentage to bring the liens of text closer together. You may also add the paragraph top and bottom margins here.

Once the edits are completed theHTML cotnent can be added back as a template.

On the MailChimp Templates view click on the button Create Template, top right corner.

The new template will be created using code, click on the tab Code your own. within this tab click on Import HTML. Follow the instructions to upload your saved template HTML file.

Don’t forget to click on Save.

Unfortunately as already highlighted when exporting the HTML the visual block editing is now missing on the right hand side of the page.

References

MailChimp templates HTML email basics

W3Schools: HTML paragraphs

W3Schools: CSS line-height property

W3Schools: CSS margin property

Create reCAPTCHA API Keys

reCAPTCHA can be used to help prevent spam and abuse from the completion of the forms on your website.

If you, are registering a domain for your own use, or to provide the reCAPTCHA API keys details for your website developer this guide will be of interest.

In this example a new website will be registered with the checkbox style of reCAPTCHA.

Create reCAPTCHA API keys example checkbox type

To make use of the service, provided by Google, reference keys are created which are incorporated within the form code on the website.

Websites are registered with the reCAPTURA service using your Google account.

Its possible to register any website domain, but the details can only be used if you have access to the site’s files or form configuration through its website form administration.

A website designer is therefore able to administer the API keys on behalf of their clients.

Navigate to Google’s reCaptcha administration website. At the top right corner click on My reCAPTCHA.

Create reCAPTCHA API keys website

Once logged into the website you will see the API key management page

Create reCAPTCHA API keys site administration

On this page are listed the websites for which you have already configured reCAPTCHA API keys. You can click on these entries to manage the entry.

Below this is the beginning of the form for registering a new site.

Create reCAPTCHA API keys register new site

On the Register a new site form enter a name to distinguish the site.

In this example we are going to use the checkbox style. Select this from the options.

In the box Domains, add the address of your website. For illustration I’ve used www.example.co.uk.

Click on the checkbox for Accepting the reCAPTCHA terms. You may wish to read through the terms, just to be sure that you are happy.

Click on the blue button to Register your website.

Create reCAPTCHA API keys registering new checkbox type site

The next page shows some a summary view of the use of the reCAPTCHA on your website. Scroll down to view the details for adding the newly created reCAPTCHA keys to your website.

Create reCAPTCHA API keys adding reCAPTCHA to your site

The details on this page can be used to integrate a reCAPTCHA feature on your website, to help protect your site against spam for submission.

If you have been instructed to create the entry by your website developer the details on this page will be what they have asked for.

Of interest for your website developer will be the information given for either client side integration or sever side integration.

Client Side integration – provide the details in green, in the two grey boxes.

Server side integration – provide the value from the table for secret and response.

At the top left is a back arrow which will return you to your list of websites.

On the administration page you can click on one of the listed sites to return to this page to view the summary of settings.

To recreate the keys for a website will entail deleting its entry and starting afresh.

There’s a delete key button, in grey, top right above the Key settings table at the bottom of the page.

Create reCAPTCHA API keys key settings

On  this form the security settings for the site can be amended.

You will most likely find the default settings sufficient and can leave this section of the configuration alone.

A guide to creating reCAPTCHA API keys for either client side integration or server side integration of a reCAPTCHA validation for use with forms on your website.

Add Custom CSS to DNN Website

If you wish to add some custom CSS to your DNN website the Stylesheet Editor within the Admin pages offers easy editing.

Not wishing to edit your DNN skin but wanting to amend the rendering of your DNN website?

Using the Stylesheet Editor allows for overriding of the website’s skin and the presentation of modules without directly editing each of these.

It allows all of your modifications to be brought together in one place.

Its easy to make the changes through the DNN website, no need to FTP files to the server. testing of your changes is also rapid,

Open the page Admin Site Settings page.

Add custom CSS to DNN website: admin site settings

On this page select the tab Stylesheet Editor.

Add custom CSS to DNN website: admin site settings stylesheet editor

The default content has references to many of the standard DNN classes.

Either leave these in place or check to ensure that they’re not in use and delete the them.

You can add your new overrides within the textbox. I like to add them to the bottom to better ensure that they will override the existing settings. And to make it easier to see.

Shown in the image above are some example entries for the Header tags H1 to H6.

For clarity I’ve also added a division, date and owner for the additional content.

Content wrapped with /* and */ is not actioned. From my example:

/* ########## Custom CSS ######## */

save your amendments and view the relevant pages.

The Stylesheet is saved to the file

/portals/PortalID/portal.css

The file is loaded late in the sequence of CSS files, after the sites skin files. Its configurations will therefore be higher in terms of priority.

Because the file is easy to edit, do ensure you have a backup copy. Anyone with admin access to the website is able to amend the settings.

How to Refresh your Browser Cache

Sometimes  the browser needs to be refreshed.

When a web site’s files, images, CSS and JavaScript, have been changed its possible for the browser not to realise the change and to continue using its older cached version.

Many times I have made a change to a client’s website, advised them that the updates are completed only for them not to see the change.

Refreshing the page view will often not update the view.

To view the changes made to the associated website files can require a forced browser cache update.

What is the Browser Cache?

Browser website cache is the local storage of website components: images, scripts and CSS rendering files.

The aim is to store a local copy of the website components such that the next time the page is visited only one or two items may need to be downloaded.

This improves the load speed of the website.

Browsers and how to reset flush their cache:

Refresh browser cache typical website timeline

Caching

The image above shows the details regards the timing for the downloading of the various components of a website.

a web a page allows a browser to

By caching elements of a website the browser saves on time regards to the download of those elements.

However, if one of these elements has been updated it may mean that the change isn’t showing.

If the browser is still using its older cached version then the page will look the same as before.

So, how to force the browser to reload it’s cached items, just as if it was the first time visiting the web page?

Whilst updating customer’s websites I sometimes find that the changes are not visible in their browser when reviewing the update.

For example if an image hasn’t changed, or as shown in the image above one of the website rendering CSS files is still the same then this file doesn’t need to be downloaded.

This means that the browser can render the page much quicker – it hasn’t had to wait for the file to be downloaded.

Its also lighter on your Internet plan.

Browser shows an old version – but my file has changed

Simply refreshing your browser view of a page may not be sufficient.

Browsers tend to like to work from their cached copy of website static files. Files such as images, script files and styling are generally considered to be static.

Refreshing the browser page will allow the server to regenerate the content, perhaps with any differences. But the underlying files will be kept.

So, how do I force the browser to refresh its cache? Reloading all of the websites files as if I was visiting the site for the first time.

Force Browser Refresh

The browser will try to limit the files which it downloads. However, his can mean that files which have been updated are not realised. Rendering n older version of the file.

This effect is most visible when an image or the CSS layout file have been updated.

This is most notable during the development phase of a website.

Listed below are a number of browsers with how to force the browser to refresh its cache. Sometimes clicking on the browser refresh or pressing the often used f5 key are just not enough

Refresh browser cache Firefox refresh

We need to tell the browser to forget anything that has previously been downloaded from the website should be forgotten and download afresh.

Researching this I found that comparable methods don’t exist across all of the browsers.

FireFox

I have found with Firefox that if I follow the often stated recommendation to host down the shift key and to press the f5 key I usually open a new tab.

I have found that it is preferable to hold down the shift key and to then click on the refresh icon to the right of the address bar.

Whilst testing website I have found that server errors can be particularly irritating. Firefox will fail to get the note working content from the server, rather contributing to show the server error. This does eventually time out and function correctly indeed more.

Safari

For Safari versions 9 onwards pressing the command key and R will refresh the cache.

There is also the option to click on the reload icon (at the end of the navigation bar) whilst holding down the shift key.

Google chrome

Either CRTL + F5 or <SHIFT> + F5 will work.

This may also be done from the Settings. Having selected the settings, scroll down to the bottom of the list, expanding the section Advanced. Within Privacy and security click on the option Clear browsing data. The option we’re interested in is Cached images and files. Ensure this one is ticked, untick the remainder. click on the button CLEAR BROWSING DATA.

Internet Explorer

<CTRL> + refresh ought to suffice. But its not guaranteed. With IE the better option is to clear the cache either via the tools menu or F12 key.

You may find you need to use the tools options to properly clear the cache.

Click on the gear icon and in the popup window Internet Options within the sections Browsing History click on the Delete button. This opens a new window. Untick all items except Temporary Internet files and website files. Click on Delete.

IceWeasel

IceWeasel is effectively Firefox. It therefore acts the same.

Opera

Opera doesn’t have the equivalent of clearing the cache for the current web page. Opera settings then select delete private data. Cache empty is for all.

Click on the menu in the top left corner. And click on Settings.

The Privacy & Settings page includes the option to Clear browsing data near the top, within the Privacy section.

Clicking on the link opens a pop-up window allowing selection of the items to clear. There’s an option to select how far back in time the selection shall affect.

Whilst not giving the option to select the current page this does give a good approximation.

Konqueror

From the Settings menu, select Configure Konqueror.

On the pop-up window Cache is shown in the left menu as a child item of Web Browsing. Click on this.

For me I was shown the message: This configuration section is already opened in Choqok.

I closed Choqok and tried once more.

There’s a single option, a button Clear Cache.

Midori

This is one of the <SHIFT> key plus toolbar refresh icon ones.

Vivaldi

Click on the Vivaldi icon in the top left corner and select Tools and then Clear Private Data.

On the pop-up window select cache only and set the time to Past Hour. Click on Clear Browsing Data at the bottom of the window.

References

How to clear the Firefox cache

Opera Help: Cache

Midori Browser FAQs

Wikipedia: Bypass your cache

Suite CRM Change Initial Quote Number

Using the quotes and invoices within Suite CRM I wished to set an initial number.

The base number was to be a minimum of 4 or 5 digits making the quote, or invoice, number more visible. There’s also the possibility to set the two numbers as a reflection of the year.

Subsequent numbers issued will be incrementally larger.

Searching the Internet I found references to editing the database table values using SQL.

Surely there’s a better way than this! Whilst not averse to such actions I’m aware that updates can potentially over write such amendments.

I also read about changes within the studio admin section, which covers the field types, text values and the like.

Here’s the Studio general view

Suite CRM change initial quote number: Admin Studio

with the more detailed numbers view

Suite CRM change initial quote number: Admin Studio numbers view

Unhappy with both of the above two options I looked for a better solution.

So how did I set the base value for the quote number?

Lets start from the dashboard and select the admin screen.

Suite CRM change initial quote number: select Admin

In the top right hand corner hover over the encircled person icon to show the drop down menu. Select Admin.

Suite CRM change initial quote number: Admin page

On the admin page scroll down to passed the Developer tools section, which includes Studio, which we observed earlier, to the Advanced OpenAdmin. Within this section click on AOS Settings.

Suite CRM change initial quote number: AOS settings

On this page set your base quote number value and if desired one for the invoices.

The number needs to be greater than the current maximum value in the database, as its the highest value from the table which is referenced for the next value.

Don’t forget to click on Save.

Configure User Agent in FireFox

Setting the browser agent in Firefox allows the browser to pretend to be something else.

Traditionally the user agent string was changed to make the browser appear to be IE6. Without this some websites wouldn’t work.

FireFox hides the User Agent configuration in the about:config settings.

I guess is one of those less frequently configured options – why clutter and confuse the existing configuration options with an item such as this.

To set the user agent string in Firefox. Enter the configuration using about:config in the address bar.

There’s a confirmation that changing the settings can be harmful to the application and that you should only continue if you know what you are doing.

Configure FireFox user agent about:config warning

The configuration parameter to be modified is general.useragent.override. To see if its available enter useragent in the search box.

Its likely that its not listed as a configurable option.

To add it right click in the window (I placed the mouse within the white space below the listing).

On the pop-up menu select New > String

add general.useragent.override as the name of the preference.

The user agent can then be added.

You may prefer to use an Add-On to manage the User Agent. This will allow a list of agents to be maintained with easy switching. Much simpler to checkout websites than to keep returning to the about:config options.

With your FireFox browser configured to allow easy switching off the user agent you are able to test the reason of website to different browsers and bots.

Of particular interest maybe the response of one of your websites to different robots.

One of the website hacks (so called Pharma Hack) is to detect whether the visiting browser is the google-bot or a human visitor. The content of the website is then amended accordingly. If it’s the google-bot then it looks like it’s showing and referencing pharmaceutical products.

Maybe you have configured your website to block the bad robots by their user agent, for example one of the spam bots.

To test whether your website is rejecting these bad bots you can configure Firefox to appear to be one of them by setting the user agent string.

To review and check that your website is presenting itself as you would expect change the user agent in your Firefox browser and visit your website.

Export Lotus Notes Contacts

I was working recently with someone who wished to export their Lotus Notes contacts for use with either a Gmail or Apple account.

These are the steps I followed to export the contacts from Lotus Notes:

  1. Open the Contacts page in Lotus Notes.
  2. In the menu select My Contacts
  3. From the menu bar select More and then export
  4. Choose the save location and enter a file name
  5. Choose whether to export as a csv file or a vcard

Your contacts can now be imported into Gmail, iCloud or other applications.

You may find that saving the file as a vcard is more universal. Allowing for easier import some of the contacts.

Blend two Images with the GIMP

I use the Gimp to edit and produce artwork. For a project I wished to blend the edge between two images.

Whilst working on a recent slider for a website. The images I had to work with were either the wrong orientation or just not quite long enough to be used as single images.

I wanted to join a couple of images together to create a composite image, the full width of the slider. This would also allow me to convey more information on a single slider image view.

Blending two images together to get a smooth transition rather than a hard edge makes it more appealing. Even if the edge is only a few pixels it will be easier on the eye.

Using the Gimp I took two images for a slider and blended the join between the two to create a fade between them.

Here I am using two pictures from Bergen. To begin with in a new image I added the two images, one per layer, leaving the background untouched. To make this work best an overlap of the two images is required.

Blend images with the Gimp: initial layers

The layers are shown in the Layers Window: the image of the troll, the view of Bergen from Mount Fløyen and the generic background layer.

Blend images with the Gimp: layers window

In the layers window, for each of the layers, right click and select to Add Layer Mask.

Blend images with the Gimp add layer mask to layer

Ensure that the option White (full opacity) is selected

Blend images with the Gimp add layer mask

With the layer masks added again right click to view the properties, check to ensure that the check box for Edit Later Mask is ticked.
image here

Blend images with the Gimp confirm edit layer mask set

From the tools window select the blend tool. The foreground and background colours should be black and white respectively.

Blend images with the Gimp select blend tool

Between the transition of the two images drag the blend tool line, if horizontal of vertical holding down the ctrl key helps to keep it at 0, 90, 180 or 270 degrees.

Drag as far as you need to create the blended transition. The longer the line the great the overlapping transition.

Blend images with the Gimp layers blended

Link your Twitter Android app to your Twitter Account

Create a Twitter application to link your Android Twitter app with your Twitter account, enabling the posting of tweets from your Android phone or tablet.

Most of the Android Twitter apps make use of their own Twitter application by default.

Whilst this makes the configuration of the app easy, Twitter imposes a limit on the number of clients using a given application. A number of these clients have previously reached their client limit.

With your own Twitter application you are not reliant upon the configuration and maintenance of details by someone else.

Also the security keys which you use are unique to your application – much safer. And as many of the Twitter Android apps are at, or near the limit imposed by Twitter using your app allows someone else to make use of the default.

Create your own Twitter application, linking your Twitter Android app. Its easy to do and avoids any potential issues from using the default application associated with one of the Android apps.

The Twitter application provides two encrypted keys to enter in the Twitter app.

In this example I used Twidere, of coarse other apps are available.

In the Twidere app slide in from the left edge of the screen to show the configuration options.

From the settings select network, then scroll down to select default API settings.

On this page it is the consumer key and consumer secret which we shall be entering from our Twitter application.

twitter-auth-twidere

Rather than the usual Twitter public website, we’ll start from is the development website dev.twitter.com

At the top of the page click on my apps in the navigation at the top. This goes to https://apps.twitter.com/. No doubt you have a Twitter account – sign in with the details..

Create Twitter Application: Login

After logging in the shown page has a list of your existing Twitter apps.

create-twitter-app-list

Click on Create New App button

create-twitter-app-create

Enter the relevant details. It’s worth describing your app properly in the description, in case you wonder what it is in 6 months time. Ensure that your website link contains the full reference, including the http://

create-twitter-app-details

Select the tab for Keys and Access tokens

create-twitter-app-keys

The consumer key and consumer secret values and shown.

Create Twitter application: Keys and Access Token

Whilst not needed at the moment I often create the access tokens at this time. Click on the button Create my access token to populate the values of the token and token secret.

Copy the application setting values of consumer key (API key) and  consumer secret (API secret) into the Twitter Android app. In our example we are using Twidere. Click OK to save.

Create Twitter Application: Twidere Android Client API Authorisation Settings

Your Android Twitter client app should now be good to go. Return to the list of tweets and try adding a new one.