Christian Engvall

Setting up Cypress for a React application

Wed, 11 Mar 2026 00:00:00 +0100

I took the lead on setting up Cypress for end-to-end testing in a React + Vite + TypeScript application. The app is a shipping logistics portal and the test suite now covers 31 test files across the application. Here is how I approached the setup.

Installing Cypress

pnpm add -D cypress

Then add scripts to package.json:

"cy:open": "cypress open",
"cy:open:frontend": "cypress open --env CYPRESS_BASE=frontend",
"cy:open:localhost": "cypress open --env CYPRESS_BASE=localhost",
"cy:run": "cypress run",
"cy:run:frontend": "cypress run --env CYPRESS_BASE=frontend"

This gives us different commands for different environments - more on that below.

Multi-environment configuration

One of the first things I wanted to get right was being able to run the same tests against multiple environments. In cypress.config.ts I set up a function that returns the correct base URL and API URL depending on an environment variable:

import { defineConfig } from "cypress";

function getBaseUrls(env: string) {
  switch (env) {
    case "frontend":
      return {
        baseUrl: "https://frontend.example.se:3000/",
        apiUrl: "https://frontend.api.example.se/",
      };
    case "localhost":
      return {
        baseUrl: "https://localhost:3000/",
        apiUrl: "https://localhost:44367/",
      };
    default:
      return {
        baseUrl: "http://dev.portal.example.se/",
        apiUrl: "https://dev.api.example.se/",
      };
  }
}

const env = process.env.CYPRESS_BASE || "dev";
const urls = getBaseUrls(env);

export default defineConfig({
  projectId: "your-project-id",
  e2e: {
    baseUrl: urls.baseUrl,
    setupNodeEvents(on, config) {
      config.env.apiUrl = urls.apiUrl;
      return config;
    },
  },
  env: {
    CYPRESS_BASE: env,
  },
  defaultCommandTimeout: 40000,
  requestTimeout: 40000,
  retries: 2,
  experimentalStudio: true,
  experimentalMemoryManagement: true,
  experimentalRunAllSpecs: true,
});

Now running pnpm cy:open opens Cypress against the dev environment, while pnpm cy:open:frontend targets the frontend staging environment.

Custom commands

I created reusable custom commands in cypress/support/commands.ts to avoid repeating common actions across tests.

Cypress.Commands.add("loginAsSuperAdmin", (visit: string = "/") => {
  cy.visit(visit);
  cy.get('[data-cy="username"]').type("test-admin@example.se");
  cy.get('[data-cy="password"]').type("testpassword", { log: false });
  cy.get('[data-cy="login-button"]').click();
});

Cypress.Commands.add("loginAsSupplier", (visit: string = "/") => {
  cy.visit(visit);
  cy.get('[data-cy="username"]').type("test-supplier@example.se");
  cy.get('[data-cy="password"]').type("supplierpass", { log: false });
  cy.get('[data-cy="login-button"]').click();
});

Test data reset

Cypress.Commands.add("resetTests", () => {
  cy.request("GET", Cypress.env("apiUrl") + "api/v2/test/reset-tests").then(
    (response) => {
      cy.log("Reset status: " + response.status);
    }
  );
});

This calls an API endpoint to reset the test data before test runs, keeping things isolated.

Reusable UI interactions

Cypress.Commands.add(
  "selectLocation",
  (type: string, locationName: string, locationId: string) => {
    cy.get(`[data-cy="${type}Location"] input`).type(locationName);
    cy.wait(2000);
    cy.get(`[data-cy="location-${locationId}"]`).click();
  }
);

Don’t forget to add type definitions in commands.d.ts so TypeScript is happy:

declare namespace Cypress {
  interface Chainable {
    loginAsSuperAdmin(visit?: string): Chainable<void>;
    loginAsSupplier(visit?: string): Chainable<void>;
    resetTests(): Chainable<void>;
    selectLocation(
      type: string,
      locationName: string,
      locationId: string
    ): Chainable<void>;
  }
}

Using data-cy attributes

We use data-cy attributes on React components to make selectors resilient to styling and markup changes:

// In the React component
<TextField data-cy="username" ... />

// In the test
cy.get('[data-cy="username"]').type("user@example.se");

This is one of Cypress best practices and saves a lot of headaches when the UI is redesigned.

API interception

One of the most useful Cypress features for us is cy.intercept(). We use it heavily to wait for API calls and assert on responses:

cy.intercept("POST", "/api/v2/search?query=&key=dashboard").as(
  "dashboardRequest"
);

// trigger the action that makes the API call
cy.get('[data-cy="search-button"]').click();

cy.wait("@dashboardRequest").then((interception) => {
  expect(interception.response?.statusCode).to.equal(200);
});

This is much more reliable than using fixed cy.wait(3000) calls since the test waits for the actual network request to complete.

CI integration with GitHub Actions

I set up a GitHub Actions workflow that runs the Cypress suite on every push to develop:

name: Cypress Tests
on:
  push:
    branches:
      - develop

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true

      - name: Setup pnpm
        uses: pnpm/action-setup@v2

      - name: Install dependencies
        run: pnpm install --no-frozen-lockfile

      - name: Cypress run
        uses: cypress-io/github-action@v6
        with:
          record: true
        env:
          CYPRESS_RECORD_KEY: $

We also connected it to Cypress Cloud for test recording, which gives us screenshots and video on failures plus historical trends.

Lessons learned

Start with data-cy attributes early. Adding them retroactively to a large codebase takes time.
Use cy.intercept() over cy.wait(). Waiting for network requests is more reliable than arbitrary timeouts.
Multi-environment support from day one. Being able to run the same tests against dev, staging and localhost has been very useful.
Keep custom commands small and focused. A few well-designed commands go a long way.
Enable retries. Setting retries: 2 in the config helps with flaky tests while you work on making them more stable.

Posted on https://www.christianengvall.se/setting-up-cypress-for-a-react-application/

Update pihole running in a Docker container

Sun, 03 Jul 2022 00:00:00 +0200

The Pihole web interface tells you to run pihole -up to get the latest version. But if you are running pihole as a docker container we need to do it a little bit different.

To update pihole; Open a terminal and do the following:

Stop the container:

docker stop pihole

Pull the latest Pihole

docker pull pihole/pihole

Remove your existing pihole container

docker rm -f pihole

Start container

#Depending on how you set it up you might run
./docker-run.sh

#or

docker run pihole/pihole

After updating this the custom blacklist was still intact.

Posted on https://www.christianengvall.se/update-pihole-docker/

Setting up NGROK to work with Litium apps

Wed, 06 Apr 2022 00:00:00 +0200

To be able to place orders locally using a payment app it needs to be able to communicate with the outside world. Lets have a look how to get that working with ngrok.

1. Download and register ngrok

Download ngrok and sign up free account. We will need that to use https. After you have signed up you will get an authtoken. Fire up you ngrok-terminal and type:

ngrok authtoken <my-token>

use ngrok.exe if you are using windows.

ngrok.exe authtoken <my-token>

2. Exposing a server

Open up your docker-compose.yaml-file and scroll down to the ports section of the desired app. Shown below is the direct-payment example, in which we are interested in knowing that it uses port 10011.

The direct-payment app doesn’t need ngrok to work. But since it is present in the default installation of Litium we will use it as an example. You are probably doing this for a payment app such as Svea or Klarna.

  direct-payment:
    ports:
    - "10010:80"
    - "10011:443"

Now go back to your terminal and run:

ngrok http https://localhost:10011

Or this in Windows:

ngrok.exe http https://localhost:10011

You will now see something looking like this:

ngrok by @inconshreveable                                                                                                                   (Ctrl+C to quit)                                                                                                                                                            Session Status                online                                                                                                                        Account                       My name (Plan: Free)                                                                                                Version                       2.3.666                                                                                                                        Region                        United States (us)                                                                                                            Web Interface                 http://127.0.0.1:4040                                                                                                         Forwarding                    http://61c5-1515-4-97kh-88.ngrok.io -> https://localhost:14001                                                                  Forwarding                    https://61c5-1515-4-97kh-88.ngrok.io -> https://localhost:14001                                                                                                                                                                                                                             Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                                                 0       0       0.00    0.00    0.00    0.00

Copy the ngrok-url using https and lets continue.

3. Using the ngrok url

Go back to your docker-compose.yaml-file and set the AppMetadata__AppUrl to your ngrok url.

  direct-payment:
    ports:
    - "10010:80"
    - "10011:443"
    environment:
    - AppMetadata__AppUrl=https://61c5-1515-4-97kh-88.ngrok.io

4. Docker time

Now stop your applications in docker and then run:

docker-compose up

And that is it. Thanks to Nils at Litium support!

Posted on https://www.christianengvall.se/setting-up-ngrok-to-work-with-litium-apps/

Client secret validation failed for client

Thu, 31 Mar 2022 00:00:00 +0200

fail: IdentityServer4.Validation.ClientSecretValidator[0]
      Client secret validation failed for client:

I got the error Client secret validation failed for client when using a Litium app one day. The reason was that Litium apps are not built to be used in a multiple development environment scenario and another developer has reinstalled an app on his machine. That way the app got new service account-credentials, that my environment did not know about.

To fix this you need to uninstall the app in question and remove the folder containing the app information as explained in the Payment and shipping documentation.

Litium apps are single install only, when you have installed your app once that apps install-link will not work again. If needed just follow the steps below to clear the app for re-installation:

Stop the container of the app you want to clear

Open the folder where you keep the docker-compose.yaml file from the docker-task

In the /data-subfolder of that folder you will find a direct-payment and a direct-shipment folder, delete the one you want to clear

Start the container again and the install link will work

Thanks to Nils at the Litium support for pointing this out to me.

Posted on https://www.christianengvall.se/litium-app-client-secret-validation-falied-for-client/

Litium fileshares when switching from IIS to Kestrel

Wed, 09 Mar 2022 00:00:00 +0100

One way to access the shared files folder that is used in some projects is to let the IIS application pool use the identity of the user that has access to that shared folder. That won’t work now when we are using the Kestrel web server.

Instead you can map that shared folder as a Network drive and reference that in appsettings.json. In Windows you right click in the explorer and select Add network location, on the mac you open Finder, select Go in the menu and click on Connect to server.

"Folder": {
  "Local": "..\\Files",
  "Shared": "\\\\network.path\\sharedfiles\\customer\\Files"
},

Posted on https://www.christianengvall.se/litium-fileshares-when-switching-from-iis-to-kestrel/

Configuring webpack to generate two or more css files

Wed, 09 Mar 2022 00:00:00 +0100

If you are going to use a multi-site setup where the sites should look a bit different to each other you need to change the default webpack configuration that is delivered with the Accelerator.

This is tested with the first version of the Litium 8 accelerator. Previous and later versions may differ.

1. Change entries

Add a new .scss file at Litium.Accelerator.Mvc/Client/Styles that we call secondsite.scss.

The existing site.scss has been renamed to firstsite.scss in this example.

Open up Litium.Accelerator.Mvc/Client/webpack/webpack.es6.js and find the entry points. At the time when I’m writing this post the entries looks like this:

entry: {
    app: [
        path.resolve(JS_DIR, 'index.js'),
        path.resolve(CSS_DIR, 'site.scss'),
    ],
},

Now lets split that up to add a second entry:

entry: {
    app: [
        path.resolve(JS_DIR, 'index.js'),
    ],
    firstsite: [
        path.resolve(CSS_DIR, 'firstsite.scss'),
    ],
    secondsite: [
        path.resolve(CSS_DIR, 'secondsite.scss'),
    ]
},

2. Update the MiniCssExtractPlugin

Scroll down to the MiniCssExtractPlugin settings in the same file as above. Right now it looks like this:

plugins: [
    new RemovePlugin({
        before: {
            include: [BUILD_DIR],
            log: false,
        },
    }),
    new MiniCssExtractPlugin({
        filename: '../css/site.min.css',
    }),
    // new BundleAnalyzerPlugin(),
],

Update this section to look like this instead:

plugins: [
    new RemovePlugin({
        before: {
            include: [BUILD_DIR],
            log: false,
        },
    }),
    new MiniCssExtractPlugin({
        filename: '../css/[name].min.css',
    }),
    // new BundleAnalyzerPlugin(),
],

If you have yarn run build:w running you should restart it. This will generate two separate .css-files in the output directory.

3.Reference the correct file

This is out of scope of the post so I leave this up to you. But you must reference the correct css-file in Litium.Accelerator.Mvc/Views/Framework/Head.cshtml

4. Read more

You can read more about Webpack Entry points in the official docs

Posted on https://www.christianengvall.se/configuring-webpack-to-generate-two-or-more-css-files/

Free gift campaign based on content in cart

Wed, 23 Feb 2022 00:00:00 +0100

The criteria for which product that needs to be present in the cart needs to be created as a target group. Then we need to create a campaign using that target group. Lets have a look at how to set it up.

1. Creating the target group

Go to Customers -> Target groups and add a new target group.

Litium target groups

Then create a Has product in cart filter condition and select the product that must exist in the cart to make the campaign valid.

Litium target groups condition

2. Creating the campaign

Head over to Sales -> Campaigns. Pick a descriptive Name, select Markets and channels where the campaign should be active and then select a Start date and an End date before saving.

Litium campaign

3. Add the discount

Click on the green Add discount button and select Free gift.

Add campaign discount

4. Setting target groups and selecting free product

In the modal that shows up you select our newly created target group in the field Target groups. Then in the field Free product you select the product you want to give away. Then click save.

Add free gifts

5. Active the campaign

Don’t forget to activate the campaign in the top right corner. It’s easy to forget that step in the process.

Add free gifts

Posted on https://www.christianengvall.se/litium-free-gift-campaign-based-on-content-in-cart/

SveaPayment app - Unable to obtain configuration from System.String

Thu, 17 Feb 2022 00:00:00 +0100

When setting up an existing dev site I got this error for the SveaPayment-app:

2022-02-17 10:32:44.1039 [App:01] [916919702a6a8343af56f989db5df72b] [ERROR] [] Microsoft.AspNetCore.Server.Kestrel - Connection id "", Request id "": An unhandled exception was thrown by the application. System.InvalidOperationException: IDX20803: Unable to obtain configuration from: 'System.String'. System.IO.IOException: IDX20807: Unable to retrieve document from: 'System.String'. HttpResponseMessage: 'System.Net.Http.HttpResponseMessage', HttpResponseMessage.Content: 'System.String'.
   at Microsoft.IdentityModel.Protocols.HttpDocumentRetriever.GetDocumentAsync(String address, CancellationToken cancel)
   at Microsoft.IdentityModel.Protocols.OpenIdConnect.OpenIdConnectConfigurationRetriever.GetAsync(String address, IDocumentRetriever retriever, CancellationToken cancel)
   at Microsoft.IdentityModel.Protocols.ConfigurationManager`1.GetConfigurationAsync(CancellationToken cancel)
   --- End of inner exception stack trace ---
   at Microsoft.IdentityModel.Protocols.ConfigurationManager`1.GetConfigurationAsync(CancellationToken cancel)
   at Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler.HandleAuthenticateAsync()
   at Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler.HandleAuthenticateAsync()
   at Microsoft.AspNetCore.Authentication.AuthenticationHandler`1.AuthenticateAsync()
   at Microsoft.AspNetCore.Authentication.AuthenticationService.AuthenticateAsync(HttpContext context, String scheme)
   at Microsoft.AspNetCore.Authorization.Policy.PolicyEvaluator.AuthenticateAsync(AuthorizationPolicy policy, HttpContext context)
   at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Authentication.AuthenticationMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication`1 application)

This app was installed on another machine before mine. So there is a credential missmatch in the configuration files of the app.

The solution is to uninstall the app. Then reinstall it again and add the configuration again in the Svea Payment Configuration field.

Posted on https://www.christianengvall.se/sveapaymentapp-unable-to-obtain-configuration-from-system-string-error/

SveaPayment app BIO_new_file:no such file error

Thu, 17 Feb 2022 00:00:00 +0100

I noticed that the SveaPayment app container kept restarting in docker. And at least I thought that I had set up my local dev certs the correct way, but this message showed up in the logs of the app:

Unhandled exception. Interop+Crypto+OpenSslCryptographicException: error:2006D080:BIO routines:BIO_new_file:no such file
   at Interop.Crypto.CheckValidOpenSslHandle(SafeHandle handle)
   at Internal.Cryptography.Pal.OpenSslX509CertificateReader.FromFile(String fileName, SafePasswordHandle password, X509KeyStorageFlags keyStorageFlags)
   at System.Security.Cryptography.X509Certificates.X509Certificate..ctor(String fileName, String password, X509KeyStorageFlags keyStorageFlags)
   at System.Security.Cryptography.X509Certificates.X509Certificate2..ctor(String fileName, String password)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Certificates.CertificateConfigLoader.LoadCertificate(CertificateConfig certInfo, String endpointName)
   at Microsoft.AspNetCore.Server.Kestrel.KestrelConfigurationLoader.LoadDefaultCert()
   at Microsoft.AspNetCore.Server.Kestrel.KestrelConfigurationLoader.Reload()
   at Microsoft.AspNetCore.Server.Kestrel.KestrelConfigurationLoader.Load()
   at Microsoft.AspNetCore.Server.Kestrel.Core.KestrelServerImpl.BindAsync(CancellationToken cancellationToken)
   at Microsoft.AspNetCore.Server.Kestrel.Core.KestrelServerImpl.StartAsync[TContext](IHttpApplication`1 application, CancellationToken cancellationToken)
   at Microsoft.AspNetCore.Hosting.GenericWebHostService.StartAsync(CancellationToken cancellationToken)
   at Microsoft.Extensions.Hosting.Internal.Host.StartAsync(CancellationToken cancellationToken)
   at Microsoft.Extensions.Hosting.HostingAbstractionsHostExtensions.RunAsync(IHost host, CancellationToken token)
   at Microsoft.Extensions.Hosting.HostingAbstractionsHostExtensions.RunAsync(IHost host, CancellationToken token)
   at Microsoft.Extensions.Hosting.HostingAbstractionsHostExtensions.Run(IHost host)
   at Litium.Apps.SveaPayment.Program.Main(String[] args) in /_/src/Litium.Apps.SveaPayment/Program.cs:line 23

The solution was to generate a new one with the command below, in the same path as your docker-compose file, and then restart the containers. Thanks Anton Marklars for the solution.

dotnet dev-certs https -ep ./data/https/localhost.pfx -p PasswordThatShouldBeChanged
#...Then followed a message about an already existing certificate that could be ignored.

Read more at Mårten Wahlunds Github-repo About Litium, dev-certs and Docker

Posted on https://www.christianengvall.se/svea-payment-app-bio-new-file-no-such-file/

A collection of Litium posts

Wed, 16 Feb 2022 00:00:00 +0100

This post contains all posts targeting Litium in one place.

Litium 8

Posts written for Litium 8

Apps
SveaPayment app BIO_new_file:no such file error
SveaPayment app - Unable to obtain configuration from System.String
Client secret validation failed for client
Setting up NGROK to work with Litium apps

Campaigns
Free gift campaign based on content in cart

Clientside
Configuring webpack to generate two or more css files

Globalization
CurrentUICulture and CurrentCulture in Litium

Installation
Fileshares then switching from IIS to Kestrel

Litium CLI
Add an admin user to database

Litium 7

Posts written for Litium 7

Installation
Litium filesDirectory and commonFilesDirectory
Installing Litium Accelerator

Misc
Using middlewares with Litium
Using Papercut and StateServer

Posted on https://www.christianengvall.se/litium/

Add an admin user to database using Litium CLI

Wed, 16 Feb 2022 00:00:00 +0100

Add an admin user to database using Litium CLI with the litium-db command.

dotnet litium-db user --file .\Litium.Accelerator.Mvc\appsettings.Development.json  --login agoodusername --password anevenbetterpassword

By supplying –file the command picks up the connection string for us.
Don’t forget to change agoodusername and anevenbetterpassword to something else.

Read more about Database management at Litium docs

Posted on https://www.christianengvall.se/add-an-admin-user-to-database-using-litium-cli/

CurrentUICulture and CurrentCulture in Litium

Tue, 30 Nov 2021 00:00:00 +0100

You see a lot of CultureInfo.CurrentUICulture and CultureInfo.CurrentCulture references in the Accelerator. Those are connected to two channel fields called Language for pages and block and Language for products. Lets have a look at when to use which!

Language for pages and blocks and language for products on a channel

Usage

Language for pages and block sets the value for CultureInfo.CurrentUICulture. Language for products sets the value for CultureInfo.CurrentCulture. This means you can do like this when getting a value for a field that is multiculture for proucts:

var baseProductFieldValue = baseProduct.Fields.GetValue<string>("FieldId", CultureInfo.CurrentCulture);

And for blocks and pages you instead get field values like this:

var pageFieldValue = page.Fields.GetValue<string>("FieldId", CultureInfo.CurrentUICulture);

Conclusion

In the Litium projects I’ve worked these fields mentioned above are almost always pointing to the same language. So it often times won’t make much difference. However, if you only use CultureInfo.CurrentCulture when working with products and CultureInfo.CurrentUICulture when working with pages and blocks you’ll be future proof if an editor decides to change those fields.

Posted on https://www.christianengvall.se/cultureinfo-currentuiculture-and-cultureinfo-currentculture-in-litium/

Using middlewares with Litium

Sun, 26 Apr 2020 00:00:00 +0200

To use a Middleware with Litium we can create a startup class that inherits the IOwinStartupConfiguration interface and use it to insert a middleware into the OWIN pipeline.

A middleware is, put simply, a piece of code which can read information about the current request and add information to the response. And it’s a good place to put code that doesn’t really fit into controllers or services where we need to examine every request.

The example below will examine every request that comes into a Litium site. We are looking for a specific querystring and we want to store its value as a cookie. This is a real life example, but it has been modified and simplified.

This is tested with Litium 5 and 7 but probably works in more versions.
For the sake of simplicity this post will not take any project standards into consideration. But feel free to use the comments to suggest changes or improvements.

1. Creating a startup class

Since I’m using a fresh install of the Accelerator for demonstration purposes and not doing this in a customer project I’m just going to put this class in the Litium.Accelerator.Mvc root folder. Your project structure will probably be different depending on your project standards.

Start by adding a new class called Startup.cs and let this class inherit and implement IOwinStartupConfiguration. Then we would have a class that looks like this:

using System;
using Litium.Owin.Lifecycle;
using Owin;

namespace Litium.Accelerator.Mvc
{
    public class Startup : IOwinStartupConfiguration
    {
        public void Configuration(IAppBuilder app)
        {
            throw new NotImplementedException();
        }
    }
}

2. Creating a middleware

Create a new folder in the Litium.Accelerator project called Middleware and create a class called UtmCampaign.cs. Let this class inherit from OwinMiddleWare and implement that abstract class. (You need to install the nuget package Microsoft.Owin).

The UtmCampaign.cs class will now look like this:

using System.Threading.Tasks;
using Microsoft.Owin;

namespace Litium.Accelerator.Middleware
{
    public class UtmCampaign : OwinMiddleware
    {
        public UtmCampaign(OwinMiddleware next) : base(next)
        {
        }

        public override Task Invoke(IOwinContext context)
        {
            throw new System.NotImplementedException();
        }
    }
}

3. Adding logic to the middleware

For this example I want to save the campaign name sent by different ad campaigns into a cookie. (I could then use this value when communicating with other third party services, which I have done for some customers, but we won’t cover that in this tutorial).

The UtmCapaign.cs middleware will now look like this:

using System.Threading.Tasks;
using Microsoft.Owin;

namespace Litium.Accelerator.Middleware
{
    public class UtmCampaign : OwinMiddleware
    {
        private readonly OwinMiddleware _next;

        public UtmCampaign(OwinMiddleware next) : base(next)
        {
            _next = next;
        }

        public override Task Invoke(IOwinContext context)
        {
            if(context.Request.Query != null && string.IsNullOrEmpty(context.Request.Query["utm_campaign"]) == false)
                AppendCookieToResponse(context);

            return _next.Invoke(context);
        }

        private void AppendCookieToResponse(IOwinContext context)
        {
            context.Response.Cookies.Append("Campaign", context.Request.Query["utm_campaign"], new CookieOptions {
                HttpOnly = true,
                Secure = true,
            });
        }
    }
}

4. Adding the middleware to the owin pipline

Lets go back to Startup.cs and add the middleware we just created to the owin pipeline like this:

using Litium.Accelerator.Middleware;
using Litium.Owin.Lifecycle;
using Owin;

namespace Litium.Accelerator.Mvc
{
    public class Startup : IOwinStartupConfiguration
    {
        public void Configuration(IAppBuilder app)
        {
            app.Use<UtmCampaign>();
        }
    }
}

And if I now browse to http://accelerator.localtest.me/?utm_campaign=asdf I can see that my middleware is put to use and has created a cookie for me:

Litium middleware result

5. Other uses of IOwinStartupConfiguration

The IOwinStartupConfiguration class isn’t only to used register your own middlewares. You can also use it to, for example, setup signalR if you want to use that on your Litium site.

You can also use it to configure external login providers such as facebook or Google

Posted on https://www.christianengvall.se/using-middlewares-with-litium/

Litium filesDirectory and commonFilesDirectory

Fri, 23 Aug 2019 00:00:00 +0200

There are two folders where Litium stores files. The Files Directory and the Common Files directory. Both contains uploaded images, thumbnails, and search indices etc. But the Common files directory is used in multiserver environments, and it stores information that servers would share.

filesDirectory

You can set these paths in web.config. By default the Accelerator v 7.2.3 has the filesDirectory set to ..\Files. I do not want it in the project folder but somewhere else on my disk. It is up to you where you want to put it. Do not forget to add it to your .gitignore(or exclude it from your version control) if you keep it in the default folder.

Lets change this:

  <filesDirectory value="..\Files" />

To this: D:\filefolders\accelerator

  <filesDirectory value="D:\filefolders\accelerator" />

(Don’t forget to set permissions to allow the site to save files to it)

commonFilesDirectory

To set a commonfilesDirectory you can add it below the filesDirectory in web.config

  <commonFilesDirectory value="\\myserver\filefolders\customer\Files" />

You can read more about these directories at the documentation

Posted on https://www.christianengvall.se/litium-filesdirectory-and-commonfilesdirectory/

Using Papercut and StateServer

Mon, 05 Aug 2019 00:00:00 +0200

Lets take a look at using Papercut as SMTP-server during web site development. We’ll also take a look at StateServer. These tools works for any ASP.NET MVC-project but this post is a continuation of the Installing Litium Accelerator post.

1. Papercut

Papercut will act as an SMTP-server and will display every email sent from the website we are building. This is how the creators of Papercut explain it:

Papercut is a 2-in-1 quick email viewer AND built-in SMTP server (designed to receive messages only). Not only does it not enforce any restrictions how you prepare your email, but it allows you to view the whole email-chilada: body, html, headers, attachment down right down to the naughty raw encoded bits. Papercut can be configured to run on startup and sit quietly (minimized in the tray) only providing a notification when a new message has arrived.

Download and install the latest release of papercut and start it.

Papercut

Now open up web.config of your project and change this:

<smtpServer value="" username="" password="" enableSsl="false" />

To this:

<smtpServer value="127.0.0.1" username="" password="" enableSsl="false" />

Next start your site (mine is accelerator.localtest.me) and log in to Litium. Once logged in go to Settings -> Websites -> Websites. Then edit your site and update the Sender email address to an address of your choice.

Litium - Sender email address

Save the settings and order something from the accelerator and you will see an order confirmation email show up in Papercut.

Litium - Sender email address

2. Using StateServer sessionstate

By default the site is setup to use InProc mode. This is fine, But every time the site gets restarted the sessiondata will be lost and we loose information about the cart for example. If we change this to StateServer we save some time every time we rebuild the project since the cart will be saved in our StateServer instead.

Open web.config and change this:

<sessionState mode="InProc" stateConnectionString="tcpip=127.0.0.1:42424" />

To this:

<sessionState mode="StateServer" stateConnectionString="tcpip=127.0.0.1:42424" />

Then start the services app and start the ASP.NET State Service.

Services

If you do not you will get this error:

State server error

Posted on https://www.christianengvall.se/using-papercut-and-stateserver/

Installing Litium Accelerator

Wed, 31 Jul 2019 00:00:00 +0200

Litium is installed via a Nuget feed in Visual studio. You can install Litium without the Accelerator but in this tutorial we’ll take a look at installing Litium and Litium Accelerator.

Litium Accelerator

The Litium Accelerator is a pre-packaged Litium site which speeds up the development when starting new projects. It is delivered as source-code and you have the possibility to change what you need.

System Requirements

When this post is written the latest version of Litium is 7. The development environment system requirements are at the time:

Visual Studio 2017 running with elevated permissions (other versions may work but have not been tested. I’m using VS2019).
IIS 7 or later with the Web Sockets protocol enabled.
.NET Framework 4.7.2 Developer Pack.
Access to Litium NuGet feed. To get access you need an account at Litium Docs.
Microsoft SQL Server 2016 or later with database compatibility level 130.

This and more information can be found at the System requirements of the Litium docs.

1. Downloading Litium Accelerator

At this point I assume you’ve installed the IIS and the .NET framework, the nuget feed, and has created an account that has got download rights for the accelerator. (Linked to in the System Requirements above).

Go to Litium docs - Download and download the accelerator. If you have access to it the package will show up at the top at Latest accelerators. At the time the latest version is Litium Accelerator 7.2.3.

Downloading Accelerator

Extract the .zip into a folder where you want to work with the solution.

2. Install via Visual Studio

Open Accelerator.sln after extracting the package.
Go to View -> Other Windows -> Package Manager Console and run the command Update-Package -ReInstall
Wait for install to complete (This took around 3 minutes for me).

Running Update-Package -ReInstall

If you, like me, got an error saying: “Update-Package : Some NuGet packages are missing from the solution. The packages need to be restored in order to build the dependency graph. Restore the packages before performing any operations” Make sure you’ve set up the nuget feed correctly and click the restore button that has shown up at the top of the package manager console. (I had recently changed passwords to my account and needed to update it to get it to work)

3. Configuring the Accelerator

Now right click on the Litium.Accelerator.Mvc-project in the Solution Explorer and click on Set as startup project and run the project.

First run of Litium Accelerator

When the site has started we are redirected to the login page. Login with your windows account (ex: DOMAIN\Guybrush@organization.com or .\Crille)

Then click on the Cogwheel (top right) -> Deployment -> Accelerator

Select a name and a domain name for the site. I’m using accelerator.localtest.me in this case. By choosing a localtest.me-domain I do not need to add anything to the hosts-file.

Check the Create a set of example products and categories checkbox and the click Import. This will give us some example data.

Deploy accelerator

4. Moving database to Sql Server

By default the accelerator uses a LocalDb instance. Lets move that db to a MSSQLServer instance.

Open Microsoft SQL Server Management Studio as an administrator then right click on Databases and select Attach…

Attaching database

Then click on Add… and select the .mdf -file that is located in the Litium.Accelerator.Mvc/App_Data folder.

Attaching mdf

Then click ok and attach the database.

When this is done you need to update the FoundationConnectionString in web.config to point to your MSSQL-Instance instead (Not covered here).

5. Adding an IIS site

Next fire up the IIS and right click on Sites and then on Add Website… and select a name.

Point the Physical path to \Src\Litium.Accelerator.Mvc and add the hostname you selected. (in my case http://accelerator.localtest.me/)

You might need to run the Application pool as your local user to get access to the database. But I’ll leave the iis-configuration up to you.

Now browse to the site and you should end up with something like this:

Litium Accelerator

Posted on https://www.christianengvall.se/installing-litium-accelerator/

Updated Electron tutorial app to use Electron v5.0.8

Tue, 30 Jul 2019 00:00:00 +0200

The Electron tutorial app is now working with Electron version 5.0.8. After downloading the new version make sure to run:

npm install
npm install -g electron@5.0.8

The biggest difference in this version is enabling nodeIntegration:

webPreferences: {
  nodeIntegration: true
}

You can see the code on Github

Posted on https://www.christianengvall.se/updated-electron-tutorial-app-to-use-electron-v508/

Installing Visual Studio Code and ASP.NET Core on Linux Mint

Thu, 16 May 2019 00:00:00 +0200

In this post we’ll take a look at installing ASP.NET core and Visual Studio code on Linux Mint.

1. Installing .NET CORE

To install .NET Core I downloaded the X64 Binary and ran these commands in a console:

cd Downloads
mkdir -p $HOME/dotnet && tar zxf dotnet-sdk-2.2.202-linux-x64.tar.gz -C $HOME/dotnet
export DOTNET_ROOT=$HOME/dotnet
export PATH=$PATH:$HOME/dotnet

After that to verify the installation you can type dotnet:

$ dotnet --version
2.2.202

2. Install Visual Studio Code

Go to https://code.visualstudio.com/ and select the .deb package for installation.

Click on Install Package - Visual studio Code debian package

After installing the package Visual Studio code will show up in the menu:

Visual studio code in the menu

3. Install the C# Extension

Click on the extensions icon to the left and search for C#. Then click install.

Visual studio csharp extension

4. Creating an ASP.NET Core Project

Now its time to create an ASP.NET MVC project from the terminal. These commands are copied from the Microsoft documentation

dotnet new mvc -o MvcMovie

This creates a new mvc project in a folder called MvcMovie.

We can use the command line to open the newly created project in VS Code:

code -r MvcMovie

And to run the application run:

dotnet run --project  MvcMovie/

... omitted text from command

Hosting environment: Development
Now listening on: https://localhost:5001
Now listening on: http://localhost:5000

Running asp.net mvc project

Posted on https://www.christianengvall.se/visual-studio-code-asp-net-core-linux-mint/

Electron showSaveDialog tutorial

Sat, 03 Nov 2018 00:00:00 +0100

In this tutorial we’ll look at how to use Electron showSaveDialog. The save dialog will return a string containing a path which the user selected.

To only display a save dialog this is what is needed as a minimum:

const { dialog } = require('electron')

const savePath = dialog.showSaveDialog(null);
console.log(savePath)

But as with the other dialogs we can do more with it:

const { dialog, app } = require('electron')

const options = {
  defaultPath: app.getPath('documents') + '/electron-tutorial-app.pdf',
}
dialog.showSaveDialog(null, options, (path) => {
  console.log(path);
});

The code above proposes a path and a filename to the user when opening the save dialog with defaultPath. It uses app.getPath to get the path to our users document folder and then appends a filename.pdf

I’ve also changed so that the callback method is used which gives us the path. I’d recommend to look at the showSaveDialog documentation to see what more options you can use.

This code is added to Electron tutorial app and you can take a look at the dialog.js file to see this code.

In the next tutorial we’ll continue from here and save the pdf. But that post is coming soon.

Posted on https://www.christianengvall.se/electron-showsavedialog-tutorial/

Electron showMessageBox tutorial

Fri, 02 Nov 2018 00:00:00 +0100

With showMessageBox we can display a message with our without a set of buttons from which the user can choose from.

The minimum required code to show a message box is:

const { dialog } = require('electron')

const response = dialog.showMessageBox(null);
console.log(response);

But that would only display a box with no info and an OK-button. The dialog would return a response which contains the index of the button the user clicked.

An empty showMessageBox

Adding more info to the message box

Lets add more info the the box, A question and two buttons and use the callback method as well.

const options = {
    type: 'question',
    buttons: ['Cancel', 'Yes, please', 'No, thanks'],
    defaultId: 2,
    title: 'Question',
    message: 'Do you want to do this?',
    detail: 'It does not really matter',
    checkboxLabel: 'Remember my answer',
    checkboxChecked: true,
  };

  dialog.showMessageBox(null, options, (response, checkboxChecked) => {
    console.log(response);
    console.log(checkboxChecked);
  });

The code above would produce a message box looking like this:

Show message box

type displays different icons in the messagebox.
buttons is an array of strings that will be displayed as buttons.
defaultId sets which of the buttons should be selected when opening the box.
title displays a title on some platforms.
message displays a message.
detail displays more text below the message.
checkboxLabel the box can display a checkbox as well. this is the label for it.
checkboxChecked the initial value of the checkbox.

Checkout the dialog documentation to get more info and what values you can set for the different settings.

This code example is added to the electron tutorial app dialog on github.

Posted on https://www.christianengvall.se/electron-show-messagebox/

Electron showErrorBox tutorial

Sun, 21 Oct 2018 00:00:00 +0200

Use the Electron dialog showErrorBox to display an error message to the user. Not much to it:

Call it on the main process.
Require dialog.
Call showErrorBox() with a title and a message.

const { dialog } = require('electron')

dialog.showErrorBox('Oops! Something went wrong!', 'Help us improve your experience by sending an error report')

This is what the message will look like on macOS in Electorn tutorial app:

Electron error message

The file is called dialog.js in the github repo if you want to look at the code.

Posted on https://www.christianengvall.se/electron-showerrorbox-tutorial/

Electron dark mode with electron packager tutorial

Sun, 21 Oct 2018 00:00:00 +0200

At the time of writing this tutorial there is no support for dark mode in electron. But it’s on its way. Before it’s released we can use Electron-packager for any electron app we want dark mode support for.

The Electron tutorial app already uses Electron packager. If your app doesn’t you can check out the electorn-packager tutorial.

However we first need to update the packager version to 12.2.0.

1. Updating to version 12.2.0 of Electron packager

open up package.json and change:

"electron-packager": "^8.1.0",

"electron-packager": "^12.2.0",

and run

npm install

and to upgrade the global package use(when writing this it will give you v12.2.0):

npm update electron-packager -g

2. Update packager script to enable dark mode

Now all we need to do is add a new option to our build script in package.json. That option is called darwinDarkModeSupport.

currently the packager script for mac looks like this:

"package-mac": "electron-packager . --overwrite --asar=true --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",

And when adding darwinDarkModeSupport it looks like this:

"package-mac": "electron-packager . --overwrite --asar=true --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds --darwinDarkModeSupport=true",

3. Package app

To see the darkmode in action we need to package the app. use

npm run package-mac

to create the package and then start the app.

4. Switch to dark mode

Darkmode

Posted on https://www.christianengvall.se/electron-js-dark-mode-with-packager/

Update to latest Electron version

Sat, 20 Oct 2018 00:00:00 +0200

The electron tutorial app has not been updated to the latest version of electron. Lets take a look at how to do that.

At the time of writing the latest stable version is electron v3.0.5.

1. Updating the version used in package.json

Start a terminal and run this command:

npm install electron@latest

This will give me the currently latest stable version of electron. And I can see that by opening package.json and looking at the electron version which is now:

"devDependencies": {
  "electron": "^3.0.5",
  "electron-installer-dmg": "^0.1.2",
  "electron-packager": "^8.7.2",
  "electron-winstaller": "^2.4.1"
},

2. Updating the global electron version

I use the CLI a lot. So I also want to update the globally installed electron package. This can be done by adding the -g parameter to the install command.

npm install electron@latest -g

When this is finished you can check the version by running this in a terminal:

electron --version
v3.0.5

3. Test your app

Now it’s time to test that your app still does what it is supposed to be doing on all three platforms. But that is up to you. Maybe you need to update more packages to their latest version. The electron tutorial app only has three more packages, electron-installer-dmg, electron-packager and electron-winstaller. So I’ll update those.

Posted on https://www.christianengvall.se/update-to-latest-electron-version/

Electron showOpenDialog tutorial

Sat, 20 Oct 2018 00:00:00 +0200

With the showOpenDialog you can open files or folders. To show an open dialog all you need to do is:

const { dialog } = require('electron')

const selectedPaths = dialog.showOpenDialog();
console.log(selectedPaths);

the showOpenDialog returns an array of strings with the paths chosen by the user. If you instead decide to use the callback method it will return undefined.

There are more options to showOpenDialog to use. Take a look at the docs to se what the options are.

In the electron-tutorial-app this code is used to display a showOpenDialog. It also uses ipc to communicate between the main and renderer process:

const { ipcMain, dialog } = require('electron')

ipcMain.on('show-open-dialog', (event, arg)=> {

  const options = {
      //title: 'Open a file or folder',
      //defaultPath: '/path/to/something/',
      //buttonLabel: 'Do it',
      /*filters: [
        { name: 'xml', extensions: ['xml'] }
      ],*/
      //properties: ['showHiddenFiles'],
      //message: 'This message will only be shown on macOS'
    };

    dialog.showOpenDialog(null, options, (filePaths) => {
      event.sender.send('open-dialog-paths-selected', filePaths)
    });
})

As you can see above some ipc-stuff is used. Take a look at the dialog.js to see how the message is sent and how the response is handled.

Posted on https://www.christianengvall.se/electron-showopendialog-tutorial/

Electron dialog tutorials

Sat, 20 Oct 2018 00:00:00 +0200

In this Electron dialog tutorial we’ll take a look at using the different dialogs electron provides. With the dialog we can display native system dialogs for opening and saving files, alerting, etc.

Each dialog has its own post to make them easier to read.

Using showOpenDialog

With the showOpenDialog you can let the user select one or more files or folders. The selected paths are returned as an array of strings.

Electron showOpenDialog tutorial

Using showSaveDialog

The save dialog displays a dialog to the user and returns a path containing the path selected.

Electron showSaveDialog tutorial

using showMessageBox

showMessageBox could be used to display a question to the user, and depending of the answer do something.

Electron showMessageBox tutorial

using showErrorBox

showErrorBox is used to display an error to the user.

Electron showErrorBox tutorial

Posted on https://www.christianengvall.se/electron-dialog-tutorial/

Git cherry pick from another branch

Wed, 11 Jul 2018 00:00:00 +0200

This post takes a look at Git cherry-pick. We’ll cherry pick a commit from one branch to another.

The Git cherry-pick documentation explains cherry picking as:

Apply changes introduced by some existing commits.

Given one or more existing commits, apply the change each one introduces, recording a new commit for each. This requires your working tree to be clean (no modifications from the HEAD commit).

1. Git cherry-pick

Lets start with a cherry pick. I have a branch called feature/my-feature in a repo called a-repo-for-testpurposes. In that branch I have two commits called the second change and the first change. I want to cherry pick the commit called the first change into master.

git cherry-pick - feature branch

The commit hash of the first change is ea6128347797b9c268d95257ef17cb6ac0baaaab (you can find it by using git log). I’ve checked out master and ready to cherry pick by using this command:

git cherry-pick -x ea6128347797b9c268d95257ef17cb6ac0baaaab

By providing -x we get a message appended to the commit that says this commit was cherry picked:

(cherry picked from commit ea61283)

This creates a new commit with the changes from the cherry picked commit. If the changes introduced a merge conflict you must fix that first.

2. Merging the branch containing already cherry picked commits

Since the cherry pick above is a new commit, and not a merged commit from our feature-branch. We could get a conflict when merging the whole branch back to master. Which needs to be fixed before the merge can complete.

git checkout master
git merge feature/my-feature
Auto-merging code/my code.txt
CONFLICT (content): Merge conflict in code/my code.txt
Automatic merge failed; fix conflicts and then commit the result.

Sources

The plant icon used in the post image was made by Pixel perfect from www.flaticon.com is licensed by CC 3.0 BY

Posted on https://www.christianengvall.se/git-cherry-pick/

Check for changes on remote origin Git repository in shell script

Mon, 25 Jun 2018 00:00:00 +0200

In a build shell script I use I needed to check for changes on the remote of a git repo to make sure I’m deploying the latest version. To do that I use Git rev-parse. You could probably do this better and in some other way. But this worked for me.

To be more specific: I need to check if there are more changes/commits on the origin master than I have on my local machine. This is all done in a shell-script.

The script I’m adding this to is the one found in the switching to Jekyll post.

1. Check if on master

Before starting I want to check so that I have the master branch checked out. Since thats the branch i want to deploy from. You could do this with rev-parse –abbrev-ref head

git rev-parse --abbrev-ref HEAD

This would return master if on master branch. I could do a git branch but that would return a list of branches with the currently selected marked with a *. So this saves me from string manipulations.

Putting together a shell script that checks if you have master branch checked out could look like this:

 #!/bin/bash
 ACTION='\033[1;90m'
 FINISHED='\033[1;96m'
 READY='\033[1;92m'
 NOCOLOR='\033[0m' # No Color
 ERROR='\033[0;31m'

 echo
 echo -e ${ACTION}Checking Git repo
 echo -e =======================${NOCOLOR}
 BRANCH=$(git rev-parse --abbrev-ref HEAD)
 if [ "$BRANCH" != "master" ]
 then
   echo -e ${ERROR}Not on master. Aborting. ${NOCOLOR}
   echo
   exit 0
 fi

2. Git fetch

Now it is time to do a git fetch to download objects and refs from our remote master without merging anything to our local branch.

After that we can get the latest commit hash from our branch by running git rev-parse HEAD. Then to get the latest commit hash from the origin we run git rev-parse master@{upstream} and compare these two. If they do not match there is either changes in the origin master, or you haven’t pushed the latest local commit to origin master.

 #color variables here...

 git fetch
 HEADHASH=$(git rev-parse HEAD)
 UPSTREAMHASH=$(git rev-parse master@{upstream})

 if [ "$HEADHASH" != "$UPSTREAMHASH" ]
 then
   echo -e ${ERROR}Not up to date with origin. Aborting.${NOCOLOR}
   echo
   exit 0
 else
   echo -e ${FINISHED}Current branch is up to date with origin/master.${NOCOLOR}
 fi

3. Using ls-remote instead

If you have a large repo you could probably use ls-remote like this git ls-remote origin -h refs/heads/master which would return something like this:

fc94529726cf4c06039815bs447496b6768a6b94        refs/heads/master

But you would need to remove everything after the hash some way, not covered here, but hopefully you can continue yourself if you want to use it.

4. Thanks

Thanks to multiple Stack overflow threads for helping out. The Git documentation is hard to understand sometimes.

Posted on https://www.christianengvall.se/check-for-changes-on-remote-origin-git-repository/

Update to latest Jekyll version

Thu, 26 Apr 2018 00:00:00 +0200

Every now and then a new version of Jekyll is released. How do you go about to update to that version?

I found information in the Jekyll docs about it. This post covers minor updates. There is information about major versions in the link above as well. This might break your site so make sure to take actions so you won’t lose anything.

Minor version update

I needed to upgrade from 3.5.2 to the currently latest version which is 3.8.0. According to the docs i could open up a terminal and run:

bundle update jekyll

Most of the dependencies seemed to update when I ran this command. However this message was added just before the update was done:

......
Using minima 2.1.0
Bundler attempted to update jekyll but its version stayed the same
Bundle updated!

After a quick Google session ashmaroli told me how to fix it.

Update version in Gemfile

Ashmarolis solution was to open up the Gemfile and change the line gem "jekyll", "3.5.2" to the version you want (3.8.0 for me).

Then run:

bundle update

This worked for me. However i couldn’t run bundle exec jekyll serve after. This was because a plugin had updated its syntax. Maybe this was why Jekyll wouldn’t update on the first try? For those interested it was jekyll-assets.

Posted on https://www.christianengvall.se/upgrade-to-latest-jekyll-version/

Guest post about Knex, Bookshelf and PostgreSQL at Proposales

Thu, 26 Apr 2018 00:00:00 +0200

I’m currently helping Proposales to develop their platform and a while back I posted a guest post over at their blog. It’s about Knex migration, Bookshelf ORM, PostgreSQL and Boolean.

Posted on https://www.christianengvall.se/guest-post-about-knex-bookshelf-postgresql-proposales/

Git reset origin to commit

Wed, 11 Apr 2018 00:00:00 +0200

How do you reset a Git repository to a certain commit? This example will delete the commits made after the commit you want to reset to, and then we’ll push it to origin.

This is what my latest commit looks like on a testrepo, but lets say I want the signs? commit to be the latest commit.

repository before reset

Git reset

Make sure you are on the branch where the commit is. I’m doing this on master.

Then use git reset –hard <commit-hash> to set the current branch HEAD to the commit you want.

git reset --hard cedc856
git push --force origin master

When we push the change to origin when need to use force

This is how the commits looks on my testrepo origin now:

repository after reset

Background and source

A colleague asked me how to set the HEAD of a branch to an older commit. I thought of using revert. But that would save the changes in a revert-commit, which was not desired this time. So I didn’t know how. My colleague found a stack overflow thread containing the answer that we tried and was successful with.

Posted on https://www.christianengvall.se/git-reset-origin-master-to-commit/

Screenbar released on Mac app store

Mon, 08 Jan 2018 00:00:00 +0100

Screenbar is an application that takes screenshots for you when you need your hands to do something else, like playing a game. It has now been released on the Mac App store. It was also shipped with a new design.

Download and install

You can download and install it from the Mac app store

The new stuff

This version comes with two changes. It is sandboxed and has a new design.

Sandboxed

This version is Sandboxed.

App Sandbox is an access control technology provided in macOS, enforced at the kernel level. It is designed to contain damage to the system and the user’s data if an app becomes compromised. - Apple

This means the screenshots will be saved in the users Picture folder. The folder name needs to be called com.honkbarkstudios.screenbar.

Design change

The design changed to use a dark theme. Other devs might recognize it as vibrantDark. The two menus are also merged into one.

Screenbar screenshot

Posted on https://www.christianengvall.se/screenbar-released-on-mac-app-store/

Klarna CSCOE wrong url

Tue, 31 Oct 2017 00:00:00 +0100

On a project I’m working on there is an integration to the payment provider Klarna. I was having trouble to get it to work on my local development environment.

Everytime a purchase was made the visitor(me) was supposed to get redirected back to the dev-environment. I was… but to the wrong url: https://local-dev-env-url/+CSCOE+/wrong_url.html In my case this was connected to the validation_uri setting.

Validation uri

What is the validation_uri ?

“This checkout function will allow you to validate the information provided by the consumer in the Klarna Checkout iframe before the purchase is completed.”
– Klarna

You can read more about it and the use cases in the Klarna documentation

This is an example of what is sent to Klarna in my local environment, and you can see the validation_uri at the bottom.

"merchant": {
        "id": "id",
        "terms_uri": "https://local-dev-env-url/terms",
        "checkout_uri": "https://local-dev-env-url/checkout",
        "confirmation_uri": "https://local-dev-env-url/checkout?confirmed=true",
        "push_uri": "https://local-dev-env-url/checkout?push=true",
        "validation_uri": "https://local-dev-env-url/checkout?validate=true"
      }

Since I’m running this code locally the Klarna API can’t reach my validation uri. That was what was causing my problem. For debugging purposes you can skip to send the validation_uri since it is an optional setting according to the documentation. To also debug the validation logic you need to make sure the Klarna API can reach that url.

Hopefully this helps someone else in the same situation as I was. But I have a feeling you can encounter the same error but it’s being caused by something else.

A big thanks to the Klarna support for helping out with this!

Posted on https://www.christianengvall.se/klarna-cscoe-wrong-url/

Decrypt Bitlocker encrypted partition on Linux and macOS

Mon, 16 Oct 2017 00:00:00 +0200

By using Dislocker we can decrypt a Bitlocker encrypted partition on Linux and macOS. In this post we’ll be doing this on macOS.

1. Installing Dislocker and FUSE for macOS

Start by downloading Dislocker and extract the package. Then we can install Dislocker and FUSE for mac OS (which is a needed for dislocker) using Homebrew.

Enter the following commands in a terminal:

brew update
brew install Caskroom/cask/osxfuse
cd /Downloads/dislocker-master/src
brew install dislocker.rb

When I ran the last command to install dislocker this error showed up:

Last 15 lines from /Library/Logs/Homebrew/dislocker/02.make:
In file included from /tmp/dislocker-20171015-14904-gzgqvz/dislocker-0.7/src/config.c:30:
In file included from /tmp/dislocker-20171015-14904-gzgqvz/dislocker-0.7/include/dislocker/dislocker.priv.h:31:
/tmp/dislocker-20171015-14904-gzgqvz/dislocker-0.7/include/dislocker/metadata/metadata.priv.h:296:20: error: unknown type name 'VALUE'
void Init_metadata(VALUE rb_mDislocker);
                   ^
make[2]: *** [src/CMakeFiles/dislocker.dir/dislocker.c.o] Error 1
make[2]: *** [src/CMakeFiles/dislocker_bundle.dir/dislocker.c.o] Error 1
13 errors generated.
...
make[2]: *** [src/CMakeFiles/dislocker.dir/config.c.o] Error 1
make[1]: *** [src/CMakeFiles/dislocker.dir/all] Error 2
make[1]: *** Waiting for unfinished jobs....
make[1]: *** [src/CMakeFiles/dislocker_bundle.dir/all] Error 2
make: *** [all] Error 2

By unlinking ruby as explained by jricks92 on Github the install went through with no errors:

 brew unlink ruby
 brew install dislocker.rb
 brew link ruby

2. Drive identifier

Now we need to know the identifier of the bitlocker encrypted disk. In the terminal we’ll run the command diskutil list (on macOS).

$ diskutil list

/dev/disk2 (external, physical):
   #:      TYPE NAME                    SIZE        IDENTIFIER
   0:      GUID_partition_scheme        *500.1 GB   disk2
   1:      Microsoft Basic Data         500.1 GB    disk2s1

The identifier i’m interested in here is called disk2s1

3. Encrypt with dislocker

First we need to create a folder where a virtual NTFS partition called dislocker-file will be created. I’ll call mine externalhdd and i’ll create it in the mnt folder.

sudo mkdir /mnt/externalhdd

Now it’s time to use Dislocker to decrypt the disk.

sudo dislocker -V /dev/disk2s1 -u -- /mnt/externalhdd/

-V /dev/disk2s1 tells dislocker what disk to decrypt.
-u tells dislockers to ask the user for the password the disk is encrypted with. -- /mnt/externalhdd passes the path to the folder we created to store the virtual ntfs-partition.

4. Create a block device

Now we need to create a block device before mounting the disk.

$ sudo hdiutil attach -imagekey diskimage-class=CRawDiskImage -nomount /mnt/externalhdd/dislocker-file
....
/dev/disk3

hdiutil - manipulate disk images (attach, verify, create, etc)
attach - Attach a disk image as a device
imagekey - specify a key/value pair for the disk image recognition system. I can’t find information on what the diskimageclass=creatdiskimage means in the man pages of hdiutil.
nomount - indicate whether filesystems in the image should be mounted or not.

After running this command i got the line /dev/disk3 printed in the console. Now we’ll use that to mount the drive.

5. Mount

Start by creating a folder where the drive will be mounted

sudo mkdir /Volumes/ExternalHDD

Then we run this command to mount it (only readable):

sudo mount -t ntfs /dev/disk3 /Volumes/ExternalHDD/

And by now, if you haven’t encountered any errors, you should see the disk in Finder.

Documentation

There are more to dislocker than this post shows, take a look at the man pages to get more info:

man dislocker

Posted on https://www.christianengvall.se/decrypt-bitlocker-encrypted-partition-on-linux-and-macos/

Electron installer debian package

Wed, 04 Oct 2017 00:00:00 +0200

In this tutorial we will be using the Electron installer debian package to create a debian package. This tutorial expects you to have packaged your app already. If you haven’t, you can check out the Electron packager tutorial.

1. Installing the package

Start by installing electron-installer-debian package:

npm install -g electron-installer-debian

2. Create config file

Then create a new file called debian.json that will contain settings we need to create the package.

{
  "dest": "release-builds/",
  "icon": "assets/icons/png/1024x1024.png",
  "categories": [
    "Utility"
  ],
  "lintianOverrides": [
    "changelog-file-missing-in-native-package"
  ]
}

With dest we set where the .deb package will be saved.

The icon options points to an icon the app will get.

categories sets the category where the application will be seen in menus. I’ve choosen Utility for this app since there is no real good place for it. You can take a look at the available categories for your app.

lintianOverrides is used to quieten Lintian, which is a debian package checker.

There are a lot of other options you can set. You might want to check how to set for example dependencies. But this will currently be enough for the Electron tutorial app.

3. Package the app

Now we need to make sure we have a packaged app. First I need to make an update to the packager script since I’ve missed a setting there. Thank you Felipe Castillo for the help!

The package script called package-linux in package.json that currently looks like this:

"package-linux": "electron-packager . --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"

Needs to be updated with a setting called appname. So it will now look like this instead:

"package-linux": "electron-packager .  electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds",

Now we can run the package script:

npm run package-linux

4. Creating the debian package

When the electron-packager is finished, we can run the electron-installer-debian to create a .deb package.

electron-installer-debian --src release-builds/electron-tutorial-app-linux-x64/ --arch amd64 --config debian.json

src points to the folder where the packager saved the app.

arch tells electron-installer-debian which architecture to build for.

config points to the file containing the settings we defined in step 2.

5. Adding script to package.json

So that we don’t need to remember the electron-installer-debian command everytime we can add it to package.json below create-installer-win:

...
"create-installer-win": "node installers/windows/createinstaller.js",
"create-debian-installer": "electron-installer-debian --src release-builds/electron-tutorial-app-linux-x64/ --arch amd64 --config debian.json"

Now we can run

npm run create-debian-installer

This is what the package-installer looks like in Mint Linux when opening release-builds/electron-tutorial-app_0.1.0_amd64.deb

Electron tutorial app - debian package installer

Posted on https://www.christianengvall.se/electron-installer-debian-package/

Install Electron tutorial app

Mon, 28 Aug 2017 00:00:00 +0200

How do you install and run the Electron tutorial app?. This is a quick guide to get it running.

1. Install Node.JS and Electron

First you need to install Node.JS if you haven’t done that already.

Then run the following command to install electron globally.

npm install -g electron

2. Clone or download the repo from Github.

Clone the Github repo by running this command:

git clone git@github.com:crilleengvall/electron-tutorial-app.git

Or download the repo and extract the archive.

After cloning or downloading and extracting the application run:

cd electron-tutorial-app/

3. Install dependencies

Now we need to install dependencies, such as the electron winstaller or the packager. Do this by running:

npm install

4. Run Electron tutorial app

When the npm install is done you need to start the app by running:

electron .

This will start an application looking like this on Linux Mint, but it will work on Windows and macOS as well:

Electron tutorial app on Linux mint

Posted on https://www.christianengvall.se/install-electron-tutorial-app/

React Native No Bundle Url Present

Mon, 24 Jul 2017 00:00:00 +0200

In the latest post about React native - build for iOS App store deploy there was a step about removing NSExceptionAllowsInsecureHTTPLoads before publishing to the App store.

After doing that step I was happy and tired and didn’t add that key into the info.plist again before going on vacation. Bad move. I spent an hour figuring out why my app wouldn’t start when running react-native run-ios. Instead i got the error No bundle URL Present..

Info.plist

By adding the following to info.plist it started to work again:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>localhost</key>
    <dict>
      <key>NSExceptionAllowsInsecureHTTPLoads</key>
      <true/>
    </dict>
  </dict>
</dict>

However this is not the only thing that could produce this error. Checkout this Github issue if the solution above does not help.

Posted on https://www.christianengvall.se/react-native-no-bundle-url-present/

React Native - Build for iOS App store deploy

Mon, 26 Jun 2017 00:00:00 +0200

There are some steps that need to be taken in order to publish a React Native app to the iOS App Store. But first you need to know how to submit a native app to the app store. That is out of scope for this tutorial since there is a tutorial at Ray Wenderlich that covers that whole process. It helps you with setting up a developer account, create certificates and profiles and so on. After finishing those steps you can continue reading below.

1. Remove localhost from info.plist

First we need to remove the localhost exception from info.plist. By default all traffic over HTTP is rejected since iOS 9 with App Transport Security. React Native has added an exception to localhost to make development easier.

Open info.plist and expand the App Transport Security settings and Exception Domains. Under there you’ll find the localhost entry. Remove it.

Info plist - App Transport Security settings

2. Create a release scheme

When building an app for release the React Native Developer Menu will be disabled.

React Native Developer menu - borrowed from official docs

The Javascript files we’ve created for our app will be bundled and put locally in the app so we can test it without being connected to a computer.

Go to Product -> Scheme -> Edit Scheme in XCode. Select Run tab and set the Build Configuration dropdown to Release.

XCode release scheme

3. Build app with release scheme

Select Product -> Build from XCode or build the app from the command line using this command:

react-native run-ios --configuration Release

4. Documentation

To get to know more about this you can take a look at the React Native Documentation

Off topic on React native google maps

If you are using React native google maps in your app you might run in to problems when building an archive to publish on the app store.

I got an error “duplicate symbols for architecture…” and a friendly Github:er called se1exin posted a solution to the problem.

Posted on https://www.christianengvall.se/react-native-build-for-ios-app-store/

Install React Native

Sat, 03 Jun 2017 00:00:00 +0200

I’m interested in trying React native instead of Ionic for Dogwalk. And when doing this i’ll be writing the steps I take if someone else is interested in learning this as well. Now we’ll take a look on how to install React Native.

For React Native we need node, Watchman, React Native CLI and Xcode. Watchman is a service for watching changes in files and trigger actions when that happens. Reactive CLI is the command interface for React Native. Xcode is Apples IDE.

1. Install node and Watchman

Install node and watchman with Homebrew

brew install node
brew install watchman

2. Install React Native CLI

And then install React Native CLI with npm

npm install -g react-native-cli

3. Install Xcode and the Xcode Command line tools

Install Xcode from the Mac app store.

Then open the preferences of Xcode and install Command line tools.

Command line tools - Image borrowed from React native

4. Creating a React Native project

Run these commands in a terminal:

react-native init MyNewProject
cd MyNewProject
react-native run-ios

And we’ll end up with a screen like this:

React native start screen

React Native documentation

To continue to explore React Native take a look at the Learn the basics in the documentation.

Posted on https://www.christianengvall.se/install-react-native/

Git rebase

Sun, 28 May 2017 00:00:00 +0200

When running git rebase you reapply commits on top of another base tip. Ok, nice what does that mean? The official git docs provides a good explanation of this.

If we have a feature branch called topic created from master at commit E. And if master has new commits before our branches can look like this:

      A---B---C topic
     /
D---E---F---G master

To rebase this branch with master we would use this command:

git rebase master

Our branches would then look like this:

              A'--B'--C' topic
             /
D---E---F---G master

Git rebase interactive

We can also use rebase to, for example, squash or fixup commits that that fits better into an already made commit. This would come in handy after a code review is done and there are changes that fit in other commits.

Say i have this line added to my new feature branch:

the first commit of this new feature

And this line was commited with the message First commit of this new feature

After a code review a new line was added to that file, and a new commit was created

the first commit of this new feature
- This is a line that should have been in the first commit but was discovered missing in a code review

This commit got the message Fixing a code review.

To keep the branch nice and tidy you can squash or fixup these two commits into one.

when running:

git rebase -i master

I would get the following view in my terminal:

pick c7ffd6a First commit of this new feature
pick cfa6850 Fixing a code review
# Rebase cedc856..cfa6850 onto cedc856 (2 commands)
#
# Commands:
# p, pick = use commit
# r, reword = use commit, but edit the commit message
# e, edit = use commit, but stop for amending
# s, squash = use commit, but meld into previous commit
# f, fixup = like "squash", but discard this commit's log message
# x, exec = run command (the rest of the line) using shell
# d, drop = remove commit
#
# These lines can be re-ordered; they are executed from top to bottom.
#
# If you remove a line here THAT COMMIT WILL BE LOST.
#
# However, if you remove everything, the rebase will be aborted.
#
# Note that empty commits are commented out

When typing fixup before the code review commit and saving, the commit will meld into the previous commit.

pick c7ffd6a First commit of this new feature
fixup cfa6850 Fixing a code review

Do git rebase, sqash and fixups with a GUI

You do not need to do this in the terminal if you do not want to. You can use for example GitUp

GitUp Squash and fixups

If you right-click on a commit you get a lot of options for example Fixup with Parent and Squash with parent. But you also have the oiption to Swap with parent (Move down) and Swap with Child (Move up) which you can use before squashing or fixuping if there are other commits between the ones you want to combine.

To complement GitUp you can use the GitHub desktop app to see what your commits contains and which ones should be melded together.

Github Desktop

push and pull after rebase

I work with github as an origin to this repo. To push the repo now when you have done a rebase you need to force the push:

git push origin a-feature-branch -f

For other users that now want to continue to work on this branch they now need to do a:

git reset --hard origin/a-feature-branch

Posted on https://www.christianengvall.se/git-rebase/

Error Missing binding node in Visual Studio 2017

Sat, 01 Apr 2017 00:00:00 +0200

When working in a Visual Studio 2017 solution I started to get this problem when running sass.js task via task runner explorer.

>> File "ui\_checkout.scss" changed.
Loading "sass.js" tasks...ERROR
>> Error: Missing binding C:<path>\node_modules\node-sass\vendor\win32-x64-46\binding.node
>> Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 4.x
>>
>> Found bindings for the following environments:
>>   - Windows 64-bit with Node.js 5.x
>>
>> This usually happens because your environment has changed since running `npm install`.
>> Run `npm rebuild node-sass --force` to build the binding for your current environment.
Warning: Task "sass:dist" not found. Use --force to continue.
Aborted due to warnings.
Completed in 0.796s at Tue Mar 28 2017 13:44:11 GMT+0200 (Central Europe Summer Time) - Waiting...

When googling this problem I found this nice explanation by Ryan Hayes

However I ran into an issue today in which I updated Node.JS outside of Visual Studio, but since VS uses its own install that is separate from any outside installation, you can potentially run into a node_modules package dependency issue where one version of npm installs a package (which makes it rely on that version of Node/npm), and then you can’t run commands in the other version (they break).

Running npm install or npm rebuild node-sass –force, as the error message says, did not help.

How to solve it

Open Visual Studio 2017
Go to Tools -> Options…
Go to Projects and Solutions -> Web Package Management
move $(PATH) to the top of that list and close that window.

Web package management - Visual Studio 2017

Now close all running tasks (if any)
Restart Visual Studio

Task runner explorer

Posted on https://www.christianengvall.se/error-missing-binding-node-visual-studio-2017/

What is Redis

Sun, 26 Mar 2017 00:00:00 +0100

What is Redis and what is it used for? I’ve come across it in two of the projects I’ve been working on, but never had to do anything else than start it. It seems to be used along side a persistence database.

This is the first post in the What is series where I’m aiming to answer questions I’m thinking about but never take the time to answer. I got this idea from another Swedish developer, who I cant remember the name of right now. Inez or Ines maybe? If you know who i’m looking for, please let me know in the comments :)

How does redis explain itself

Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker. It supports data structures such as strings, hashes, lists, sets, sorted sets with range queries, bitmaps, hyperloglogs and geospatial indexes with radius queries. Redis has built-in replication, Lua scripting, LRU eviction, transactions and different levels of on-disk persistence, and provides high availability via Redis Sentinel and automatic partitioning with Redis Cluster. -Redis.io

Ok, so I guess it can be used as a database itself, and i do not need to have another one in my application, such as postgres, mysql or any other database.

It seems to be some kind of cache as well. Have to look into that.

Is it a cache, database or both?

After going through the FAQ I learned that using Redis together with an on-disk database is a good idea and a common design pattern that is used. Use Redis for write heavy small data and store big blobs of data into an sql on disk database.

But you can use redis as a stand alone database that keeps data in memory and eventually saves it to disk.

But what do they mean by using it as a cache? Well, since Redis keeps data in memory you can load data into it that is used and displayed often without getting the data from disk everytime, for example loading product data from an sql-database, making it very quick.

Installing redis

I used this guide to install Redis.

brew install redis

And then when it’s installed i ran this command to launch Redis when my computer starts.

ln -sfv /usr/local/opt/redis/*.plist ~/Library/LaunchAgents

To check if redis is running you can run:

redis-cli ping

This should reply pong if it’s running, else it says

Could not connect to Redis at 127.0.0.1:6379: Connection refused

Then you need to run this command in a terminal to start it:

redis-server

Posted on https://www.christianengvall.se/what-is-redis/

Screenbar version 0.3 released

Sat, 11 Mar 2017 00:00:00 +0100

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.

Posted on https://www.christianengvall.se/screenbar-version-0.3-released/

Proposales Electron app - My first freelance assignment

Thu, 02 Mar 2017 00:00:00 +0100

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.

Posted on https://www.christianengvall.se/proposales-electron-first-freelance-assignment/

Google map marker InfoWindow - Ionic

Mon, 06 Feb 2017 00:00:00 +0100

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.

Posted on https://www.christianengvall.se/google-map-marker-infowindow/

rsync example - ssh

Sun, 05 Feb 2017 00:00:00 +0100

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.

Posted on https://www.christianengvall.se/rsync-ssh-example/

Dogwalk app released

Fri, 27 Jan 2017 00:00:00 +0100

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.

Posted on https://www.christianengvall.se/dogwalk-app-released/

The snippet to create all snippets in Atom editor

Tue, 24 Jan 2017 00:00:00 +0100

After switching from Wordpress to Jekyll I got a lot faster load times. But I also got to type more to get a post published. This can be eased by using snippets in the Atom editor in which i write my posts.

A snippet is a small region of code that you use often. In Atom and many other editors these can be inserted by typing a few words and then let the editor fill in the rest by pushing tab.

Jekyll example

In Jekyll you start all posts with defining a few variables in front matter. This posts front matter look like this:

---
layout: post
title: The snippet to create all snippets in Atom editor
categories:
- Miscellaneous
image:
  source: /wp-content/uploads/2017/01/the-snippet-to-create-all-snippets-in-atom-editor.png
  width: 1200
  height: 627
excerpt: You can use a snippet to create snippets in Atom Editor. It's useful for long expressions you use often.
---

Instead of typing that every time I create a post I can create a snippet that automatically finishes all that text after i type --- and push tab.

Creating a snippet in Atom

Open up the snippets.cson file by clicking Atom->Snippets... in the menu.

Atom snippets menu

Now type snip and push tab to get a scaffold for creating your own snippet. When first pushing tab this is what we’ll get:

'.source.js':
  'Snippet Name':
    'prefix': 'Snippet Trigger'
    'body': 'Hello World!'

the .source.js is setting in which files the snippet will be active. In this case javascript files.
‘Snippet Name’ is the name of the snippet.
Prefix is what will trigger the snippet.
Body is what the trigger will be replaced with.

This is an example of a snippet that works in markdown files to add front matter variables:

'.source.gfm':
  'front matter':
    'prefix': '---'
    'body': """---
      layout: post
      title: Proposales Electron app - My first freelance assignment
      categories:
      - Miscellaneous
      image:
        source: /wp-content/uploads/2017/01/proposales-electron-app-first-freelance.png
        width: 1200
        height: 627
      excerpt:
      ---
      """

A snippet with tab stops

In this blog i also use a lot of code highlighting. To highlight code with Jekyll you type something like this:

{% highlight javascript %}    
  let variable = "text";     
{% endhighlight %}

instead of always adding a javascript snippet i can add a tab stop to this snippet so that i always get to type what language i am highlighting. That snippet would look like this:

'.source.gfm':
  'highlight':
    'prefix': 'high'
    'body' : """{% highlight $1 %}
    $2
    {% endhighlight %}"""

That was a quick introduction to snippets in Atom. Check out the documentation to learn more.

Posted on https://www.christianengvall.se/the-snippet-to-create-all-snippets-in-atom/

Add android platform in Ionic 2

Mon, 23 Jan 2017 00:00:00 +0100

When I used the Ionic CLI to create the Dogwalk project it came with an iOS project. Now it’s time to add the Android platform.

These are the steps i took to install the Android SDK and add the Android Platform. I ran into errors, maybe you’ll get them as well, so even though this was not a smooth install maybe it helps!

Ionic add platform Android

To add the android platform to your app you run the following command in a terminal:

ionic platform add android

Since I already had the Android SDK installed from when building another project I figured I could run it directly. But i got this error:

Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.

The solution according to stack overflow was to do this:

export ANDROID_HOME=/<installation location>/android-sdk-macosx
export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools

But that didn’t work. So I installed Android Studio.

Android Studio

After installing Android Studio I got a few questions to update and install SDK-components I didn’t have. I accepted them all.

After that i opened the platforms/android project in android studio and tried to run it in a Simulator. And in this step Android Studio wanted to install a simulator. So it did install the Android_Accelerated_X86. If you choose the other one it will be slow and not be able to start the ionic app. At least I got the error message that it couldnt find the folder android_asset.

Android Studio run app

But the simulator couldn’t open the app. At this point I figured I should delete the ionic android project and add it again. So close Android studio.

Delete an Ionic platform

To remove a platform run this command in a terminal:

ionic platform rm android

The next step was to make sure i’ve got the latest Ionic and Cordova version.

Updating Ionic and Cordova

Run this terminal in a terminal:

npm update -g ionic cordova

Adding and building Android platform again

Once again run some commands in the terminal:

ionic platform add android
ionic build android

No errors this time. Awesome!

So lets run the app in the emulator:

ionic build android

And this time it was successful!

Ionic 2 dogwalk android simulator

Posted on https://www.christianengvall.se/add-android-platform-in-ionic-2/

Ionic 2 splash screen and icon

Sun, 22 Jan 2017 00:00:00 +0100

Ionic CLI comes with a command to automatically generate splashscreen and icon with correct dimensions.

Splash screen and icon resources

Open the file resources/splash.png and edit it as you wish. The dimensions are 2208x2208 pixels. The icon is called.. you guessed it.. icon.png and is located in the same folder. The dimensions for the icon is 1024x1024 pixels.

I’m aiming to release Dogwalk quickly, and then update the app functions and look after the app is already published. So I put little effort into the design of the icon and splash screen. They turned out like this:

Ionic 2 dogwalk icon

Ionic 2 dogwalk splash screen

Now when the following command is executed Ionic will take care of generating the correct dimensions for the splash screen and icon.

ionic resources

If you run that command without having created a splash screen and icon yourself Ionic will use the default ones.

Posted on https://www.christianengvall.se/ionic2-splash-screen-and-icon/

Ionic2 Google maps markers

Sat, 21 Jan 2017 00:00:00 +0100

This tutorial covers how to add markers on a Google map in an Ionic 2 app. We’ll continue where we left of the last with a Google map that is displayed in our app. If you haven’t already got that take a look at that tutorial first.

1. Markers JSON

To keep it simple we’ll store the marker information in a json file. Add a file called markers.json in the folder src/assets/data/ (create the folder data since it is not created by default).

The data we need at this point for a marker is, latitude, longitude and name. If you need help to find the latitude and longitude for your markers you can use maapcoordinates.net. My markers.json looks like this:

[
  {
    "latitude": 57.77504388,
    "longitude": 14.18557048,
    "name": "Kålgårdens rastgård"
  },
  {
    "latitude": 57.77474066,
    "longitude": 14.25457835,
    "name": "Öxnegården"
  },
  {
    "latitude": 57.7630705,
    "longitude": 14.0808624,
    "name": "Västersjön"
  }
]

2. Loading JSON in Ionic 2 and Angular 2

To load our .JSON file we’ll be using angular http and something called an Observable which we’ll map with rxjs/add/operator/map. You can read more about these classes in the Http class documentation of Angular 2

Start by importing these into src/pages/home/home.ts

import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

Then we also need to add Http to our constructor:

constructor(public navCtrl: NavController, public http: Http) {
}

Now create a method called getMarkers in home.ts. In that method we’ll load the json file:

getMarkers() {
  this.http.get('assets/data/markers.json')
  .map((res) => res.json())
  .subscribe(data => {
  });
}

We are subscribing to an observable to get the markers. And in the subscribe method we will use the marker data to display them on the map.

3. Displaying markers on a Google map

Create a method called addMarkersToMap() in home.ts. In that method the markers will be looped through and added to the map.

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.title});
    dogwalkMarker.setMap(this.map);
  }
}

Now we need to call this method from the subscribe callback of getMarkers():

getMarkers() {
  this.http.get('assets/data/markers.json')
  .map((res) => res.json())
  .subscribe(data => {
    this.addMarkersToMap(data);
  });
}

That is all that is needed to display a marker on a Google map in Ionic 2 with Angular 2.

The finished home.ts looks like this:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

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

  constructor(public navCtrl: NavController, public http: Http) {
  }

  ionViewWillEnter() {
    this.displayGoogleMap();
    this.getMarkers();
  }

  displayGoogleMap() {
    let latLng = new google.maps.LatLng(57.8127004, 14.2106225);

    let mapOptions = {
      center: latLng,
      disableDefaultUI: true,
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
  }

  getMarkers() {
    this.http.get('assets/data/markers.json')
    .map((res) => res.json())
    .subscribe(data => {
      this.addMarkersToMap(data);
    });
  }

  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.title});
      dogwalkMarker.setMap(this.map);
    }
  }
}

4. Result

The Dogwalk app will now look like this:

Ionic2 Google maps markers - iOS Simulator displaying dogwalk app with markers

In the next tutorial we look at Ionic splash screen and icon. Or check this tutorial out if you are looking to add an infoWindow

Posted on https://www.christianengvall.se/ionic2-google-maps-markers/

Ionic2 Google maps

Fri, 20 Jan 2017 00:00:00 +0100

In this post we will look at implementing Google maps in an Ionic 2 app. The app I’m building is called Dogwalk. It’s going to display markers on a map where it’s a nice area to walk your dog.

This is a continuation of the Installing Ionic post, so start there if you haven’t already got an app to add the map to.

Adding Google maps API

Open up the src/index.html file and add a script reference to the Google maps API. Read the google docs to get an API key

<script src="http://maps.google.com/maps/api/js"></script>

Then open up src/pages/home/home.html and add a div which will contain the map so that the full .html file looks like this:

<ion-header>
  <ion-navbar color="secondary">
    <ion-title>
      Dogwalk
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-content>
    <div #mapContainer id="map"></div>
  </ion-content>
</ion-content>

Editing the home component to show maps

edit src/page/home/home.ts to look like this:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

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

  constructor(public navCtrl: NavController) {
  }

  ionViewWillEnter() {
    this.displayGoogleMap();
  }

  displayGoogleMap() {
    let latLng = new google.maps.LatLng(57.8127004, 14.2106225);

    let mapOptions = {
      center: latLng,
      disableDefaultUI: true,
      zoom: 11,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: [{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"lightness":20},{"color":"#ececec"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"on"},{"color":"#f0f0ef"}]},{"featureType":"landscape.man_made","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#f0f0ef"}]},{"featureType":"landscape.man_made","elementType":"geometry.stroke","stylers":[{"visibility":"on"},{"color":"#d4d4d4"}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"on"},{"color":"#ececec"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"lightness":21},{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#d4d4d4"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#303030"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"saturation":"-100"}]},{"featureType":"poi.attraction","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.business","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.government","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.medical","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"featureType":"poi.place_of_worship","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.school","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi.school","elementType":"geometry.stroke","stylers":[{"lightness":"-61"},{"gamma":"0.00"},{"visibility":"off"}]},{"featureType":"poi.sports_complex","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#dadada"},{"lightness":17}]}]
    }
    this.map = new google.maps.Map(this.mapContainer.nativeElement, mapOptions);
  }
}

I got this from Josh Morony. But I changed the ionViewLoaded event to ionViewWillEnter (which i couldn’t get to work, and isn’t documented). I also added a custom style to the map.

If you do not want the style just remove styles from the map options array. Or if you would like another look on your map take a look at Snazzy maps.

Then edit the src/pages/home/home.scss to look like this:

page-home {
  .scroll-content {
    height: 100%
  }

  #map {
    width: 100%;
    height: 100%;
  }
}

That will get the google map to work.

Ionic2 Google maps - iOS Simulator displaying dogwalk app

Next time we’ll look at how to add markers to your google map.

Posted on https://www.christianengvall.se/ionic2-google-maps/

Installing Ionic

Thu, 19 Jan 2017 00:00:00 +0100

Ionic is a cross platform tool to create mobile apps for iOS, Android and Windows Phones. Lets take a look at installing Ionic.

I thought I’d build an app called Dogwalk. I wanted it to run on both Android and iOS phones so I decided to learn Ionic. I also thought I’d blog about all the steps I take to create it. You will get to know more about the app as we go along.

Installing

Start by installing Node.js. After that open up a terminal and use npm to install cordova and ionic:

npm install -g cordova ionic

Creating an app

To create an app using Ionic there are three templates you can start with, blank, tabs and sidemenu. The name of the templates kind of explains themselves.

For dogwalk I’d like to start with the blank template by typing this in the terminal:

ionic start --v2 dogwalk blank

When this is done you can run an almost empty app in the iOS simulator or in your browser. Running it in the browser is a great way to speed up development since you do not have to wait for the simulator to start every time.

Command to run it in your browser:

cd dogwalk
ionic serve

To run the app in ios simulator: (make sure you have it installed)

cd dogwalk
ionic run ios

That’s it!

Ionic blank template in ios simulator

Posted on https://www.christianengvall.se/installing-ionic/

Debug javascript in Android browser

Sun, 15 Jan 2017 00:00:00 +0100

How to debug javascript in Android browser? The built in Android browser is very limited but this is how I solved the problem.

I had a javascript problem showing up on an old Android phone when using the old built in browser. When googling the problem i got a lot of answers that explained remote debugging with chrome. Which didn’t work out since no problem showed up in chrome.

There was also a few apps that I could install on my Android phone which provided an error console to the old browser or was a browser with a console on their own. But those didn’t work either.

Chromium

The Android browser is built on Chromium. If you type chrome:version into the address field you get to know what version of Chromium it is running.

This is what mine looked like:

Chromium version - android

So at this point I figured I wasn’t going to debug it in the Android browser at all. If you look at the screenshot above you can see i have a Chromium version from 2013 installed.

So I headed over to the Chromium site with all the releases of Chromium, downloaded an old one from 2013 for Windows, started it on my laptop and the same error as on the phone occurred. But this time i had a javascript console which logged the error and its stack trace for me.

Posted on https://www.christianengvall.se/debug-javascript-in-android-browser/

Yotpo initWidgets

Mon, 09 Jan 2017 00:00:00 +0100

You can use initWidgets to reinitialize ratings and reviews from Yotpo if you use javascript/ajax to load new content.

If you for example use javascript/ajax to display more products to the user you probably want to reinitialize Yotpo star- and review ratings as well.

Out of the box Yotpo only supports loading them on the first page load. But there is an undocumented method called initWidgets() that you can invoke instead of reloading the page.

javascript

You can invoke initWidgets() like this:

yotpo.initWidgets();

A big thanks to Richy who also had this problem, found a solution to it and went back to stack overflow to tell others how to solve it.

Posted on https://www.christianengvall.se/yotpo-initwidgets/

Jekyll sitemaps

Sat, 07 Jan 2017 00:00:00 +0100

This plugin extends Jekyll sitemaps and adds support for pages, posts, archives/categories, collections and images.

Before i switched to Jekyll I’ve been spoiled by the sitemaps of the Yoast SEO plugin. So I decided to try to get the same functionality from Jekyll. The goal was also to make it available for people who host their Jekyll sites on Github Pages.

Jekyll Sitemaps example

You can take a look at the sitemap for this site to see it in action.

Installation

Start by downloading Jekyll Sitemaps from Github.
Copy category-sitemap.xml, page-sitemap.xml, post-sitemap.xml, project-sitemap.xml and sitemap.xml to your root folder.
Copy _includes/single-post-sitemap.html to your _includes folder.
Edit images in single-post-sitemap.xml as described under Images below.
If you do not use jekyll-archives plugin disable that as described under Categories below.
Edit or remove collections sitemap as described under Collections below.

Images

Google supports adding images to the sitemap. You need to edit the image url of your post(if any) on line 5 in single-post-sitemap.html.
If you do not use images you can remove lines 4 to 8.

<image:image>
  <image:loc></image:loc>
  <image:title><![CDATA[]]></image:title>
  <image:caption><![CDATA[]]></image:caption>
 </image:image>

Collections

Since collections are dynamic only an example is added with jekyll-sitemaps. If you do not use collections you can delete project-sitemap.xml and the following from sitemap.xml:

<sitemap>
	<loc>https://www.christianengvall.se/project-sitemap.xml</loc>
	<lastmod>2026-03-11T21:05:00+01:00</lastmod>
</sitemap>

If you do use collections you need to change this:

Change site.projects to site.<name-of-collection> in project-sitemap.xml
Change filename of project-sitemap.xml to <name-of-collection>-sitemap.xml
Change the reference from project-sitemap.xml to <name-of-collection>-sitemap.xml in sitemap.xml:

<sitemap>
	<loc>https://www.christianengvall.se/<name-of-collection>-sitemap.xml</loc>
	<lastmod>2026-03-11T21:05:00+01:00</lastmod>
</sitemap>

Contribute to Jekyll Sitemaps

Jekyll sitemaps are open source and if you find a bug or something else to improve you are welcome to send pull requests.

Posted on https://www.christianengvall.se/jekyll-sitemaps/

Switching from Wordpress to Jekyll

Wed, 04 Jan 2017 00:00:00 +0100

I’m trying to get this site to load as fast as possible. One thing I wanted to try was to use Jekyll instead of Wordpress to achieve this.

I’ve finally made the switch now. The page loads are faster since the site does not go through the Wordpress loop anymore. Jekyll creates static HTML-files that are then uploaded to the web server.

Page loads before and after

Below you can see screenshots of the network tab in Chrome where Christianengvall.se is loaded while being served with Wordpress and with static files created by Jekyll.

You can see that the load time is marked in red. That is because i use Ghostery) to block trackers like Clicky and Google analytics and so on.

This is only two page loads. A better test would be to load it lots of times and compare the average load time. But this is enough to see that a nice change for the better has been accomplished.

Load times Wordpress:

Page load with wordpress

And load times with static files created by Jekyll:

Page load static page with Jekyll

The load time went from 2,04 seconds to 452 ms. It probably loads a bit slower if you do not block trackers.

When then switch to Jekyll was made I’ve also started to delete some Wordpress leftovers in the HTML-markup.

I also skipped the implementation of share buttons for the new site, i’ve never been a fan of their loading times so now I’m skipping them as a test.

I now also use an image lazy loader that is only using vanilla javascript, making it unnecessary to include jQuery or any other framework. That generates fewer bytes to download for the visitor.

Migration tool

I tried using the official tools to migrate posts and pages from Wordpress to Jekyll. That however left me with a lot of html-fixes to do in every post on the site. I ended up using exitwp instead. Still got to do some fixes, but a lot less of them.

Deploy

You can use Github pages to host your jekyll site. A lot of people do this. But i decided to stay with my current host and got the opportunity to write my own deploy script :)

I thought I’d share it with you if you want to build your own from this template. It uses secure copy to upload the files to the server.

It also gzips every html, js and css asset before deploying. I got the script from Dominic Watson But changed it a bit to fit my site.

#!/bin/bash
ACTION='\033[1;90m'
FINISHED='\033[1;96m'
READY='\033[1;92m'
NOCOLOR='\033[0m'

echo
echo -e ${ACTION}Removing _site folder
echo -e =======================${NOCOLOR}
rm -rf _site/
echo -e ${FINISHED}Done.${NOCOLOR}
echo

echo -e ${ACTION}Building site
echo -e =======================${NOCOLOR}
echo
jekyll build JEKYLL_ENV=production
echo
echo -e ${FINISHED}Done.${NOCOLOR}

echo
echo -e ${ACTION}Compressing all Html, css and js with GZIP
echo -e =======================${NOCOLOR}
find _site/ -iname '*.html' -exec gzip -k -n {} +
find _site/ -iname '*.js' -exec gzip -n -k {} +
find _site/ -iname '*.css' -exec gzip -n -k {} +
echo -e ${FINISHED}Done.${NOCOLOR}

echo
echo -e ${ACTION}Transfering files to host
echo -e =======================${NOCOLOR}
echo
scp -r _site/*[!wp-content] user@host:/path/to/send/site/
echo
echo -e ${FINISHED}Done.${NOCOLOR}
echo
echo -e ${READY}Site deployed.${NOCOLOR}
echo

exit 0

scp -r _site/*[!wp-content] user@host:/path/to/send/site/

This line takes care of sending the files to the host. The [!wp-content] excludes that folder so that i won’t upload all the images every time.

Update: I now use rsync to transfer the files instead of scp.

Other tools

To minify css and javascript i use the Jekyll assets plugin. And to minify the html i use the compress html layout by Anatol Broder.

ssl

I now also use Cloudflare to get hands on a free ssl-certificate that they also take care of renewing. All to get that marginal boost in the SERP.

Posted on https://www.christianengvall.se/Switching-to-jekyll/

Wordpress developer project portfolio plugin

Fri, 02 Dec 2016 14:44:24 +0100

Last week i put together a Wordpress developer project portfolio plugin. The target audience is developers and it’s open source and responsive.

Example

I use the developer project portfolio plugin on this site to display my portfolio.

What it does

This plugin adds a custom post type called Project. That post type has the following fields attached to it:

Name
Description
Project image
Project url
Short description
Customer/category
Programming languages
Tools & Technologies
Platforms

WordPress developer project plugin – project admin

The plugin also adds an editor plugin that makes it easy to add a list of projects to a page.

Wordpress developer project plugin - editor plugin

The project list looks like this:

wordpress developer project plugin - project list

And the detail view of a project looks like this:

Wordpress developer project plugin - project detail view

Contribute

I use github to host the repository and i’m very happy to receive pull request of bug fixes and new features from you.

Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY

Posted on https://www.christianengvall.se/wordpress-developer-project-portfolio-plugin/

Electron Windows installer tutorial

Sat, 12 Nov 2016 14:57:11 +0100

Last time we created a dmg installer for macOS. Now it’s time to look at an Electron Windows installer with Electron-winstaller. This tutorial expects you to build the installer on Windows.

This code will be added to the Electron tutorial app on Github. Before going through this tutorial you need to make sure you know how to package your app.

Adding description

Since i haven’t added it before now i needed to add a description of the app in package.json.

{
    "name": "electron-tutorial-app",
    "productName": "Electron tutorial app",
    "description": "Application for electron tutorials",
    "version": "0.1.0",
    ...

Installing package

Run this command in your terminal:

npm install --save-dev electron-winstaller

Setting up installer script

Create a new file called createinstaller.js in installers/windows/

const createWindowsInstaller = require('electron-winstaller').createWindowsInstaller
const path = require('path')

getInstallerConfig()
  .then(createWindowsInstaller)
  .catch((error) => {
    console.error(error.message || error)
    process.exit(1)
  })

function getInstallerConfig () {
  console.log('creating windows installer')
  const rootPath = path.join('./')
  const outPath = path.join(rootPath, 'release-builds')

  return Promise.resolve({
    appDirectory: path.join(outPath, 'Electron-tutorial-app-win32-ia32/'),
    authors: 'Christian Engvall',
    noMsi: true,
    outputDirectory: path.join(outPath, 'windows-installer'),
    exe: 'electron-tutorial-app.exe',
    setupExe: 'ElectronTutorialAppInstaller.exe',
    setupIcon: path.join(rootPath, 'assets', 'icons', 'win', 'icon.ico')
  })
}

The interesting thing here is the settings:

appDirectory: Tells the installer where to look for the packaged app.
authors: Who created the app.
noMsi: should we use an msi installer?
outputDirectory: where should the installer be saved?
exe: the name of the packaged exe file in the app directory
setupExe: the name of the installer exe
setupIcon: the iconf or the installer

You can find a complete list of settings here.

Running this with the following command would create an installer for us in release-builds/windows-installer.

node installers/windows/createinstaller.js

If you get an error complaining about to long path names, have a look at the asar tutorial.

Handling squirrel install events

Now the readme of electron-winstaller tells us to handle squirrel events inside our app. This will help us with the installation and also create shortcuts for us. The script below is copied directly from that readme. I’ve just wrapped it in module.exports so that we can require it from main.js

Start by creating a file called setupEvents.js in the folder installers/

const electron = require('electron')
const app = electron.app

module.exports = {
handleSquirrelEvent: function() {
 if (process.argv.length === 1) {
 return false;
 }

 const ChildProcess = require('child_process');
 const path = require('path');

 const appFolder = path.resolve(process.execPath, '..');
 const rootAtomFolder = path.resolve(appFolder, '..');
 const updateDotExe = path.resolve(path.join(rootAtomFolder, 'Update.exe'));
 const exeName = path.basename(process.execPath);
 const spawn = function(command, args) {
 let spawnedProcess, error;

 try {
 spawnedProcess = ChildProcess.spawn(command, args, {detached: true});
 } catch (error) {}

 return spawnedProcess;
 };

 const spawnUpdate = function(args) {
 return spawn(updateDotExe, args);
 };

 const squirrelEvent = process.argv[1];
switch (squirrelEvent) {
 case '--squirrel-install':
 case '--squirrel-updated':
 // Optionally do things such as:
 // - Add your .exe to the PATH
 // - Write to the registry for things like file associations and
 // explorer context menus

 // Install desktop and start menu shortcuts
 spawnUpdate(['--createShortcut', exeName]);

 setTimeout(app.quit, 1000);
 return true;

 case '--squirrel-uninstall':
 // Undo anything you did in the --squirrel-install and
 // --squirrel-updated handlers

 // Remove desktop and start menu shortcuts
 spawnUpdate(['--removeShortcut', exeName]);

 setTimeout(app.quit, 1000);
 return true;

 case '--squirrel-obsolete':
 // This is called on the outgoing version of your app before
 // we update to the new version - it's the opposite of
 // --squirrel-updated

 app.quit();
 return true;
}
}
}

And in main js we’ll require this file at the beginning:

 //handle setupevents as quickly as possible
 const setupEvents = require('./installers/setupEvents')
 if (setupEvents.handleSquirrelEvent()) {
    // squirrel event handled and app will exit in 1000ms, so don't do anything else
    return;
 }

const electron = require('electron')
// Module to control application life.
const app = electron.app
const {ipcMain} = require('electron')
var path = require('path')
...

Adding script shortcuts

As we have done with the packager and dmg installer scripts we will add a script shortcut to the Windows installer script in package.json:

 "scripts": {
     "package-mac": "electron-packager . --overwrite --asar=true --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
     "package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",
     "package-linux": "electron-packager . --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds",
     "create-installer-mac": "electron-installer-dmg ./release-builds/Electron\\ tutorial\\ app-darwin-x64/Electron\\ tutorial\\ app.app electron-tutorial-app --out=release-builds --overwrite --icon=assets/icons/mac/icon.icns",
     "create-installer-win": "node installers/windows/createinstaller.js"
 }

Now you can run the following to create a Windows installer:

npm run package-win
npm run create-installer-win

Signing installer

The readme of electron-winstaller tells you to sign your installer. Read more about why.

Posted on https://www.christianengvall.se/electron-windows-installer/

DMG installer for electron app

Tue, 08 Nov 2016 20:22:35 +0100

To create a DMG installer for our Electron app we can use the electron-installer-dmg package.

In this tutorial we’ll create a DMG installer for the Electron tutorial app. To create a DMG installer you first need to package the app. Read that tutorial first if you haven’t already.

1. Installing package

Open up a terminal and run these commands:

# For use in npm scripts
npm install electron-installer-dmg --save-dev

# For use from cli
npm install electron-installer-dmg -g

2. Creating the DMG installer

This is the basics that we need to create the DMG. First run the package-mac script that we created to create a package for the mac in the electron packager tutorial:

npm run package-mac

This will create a package for us in the release-builds folder. So now we can create the DMG with this command:

electron-installer-dmg ./release-builds/Electron\ tutorial\ app-darwin-x64/Electron\ tutorial\ app.app electron-tutorial-app

This will create a file called electron-tutorial-app.dmg in the root folder of the application. The dmg will use default settings. In the next step we’ll look at what settings we can do to it.

3. Usage

If we look at the file usage.txt we can see that we have some options to make when it comes to the installer:

Usage: electron-installer-dmg <path/to/.app> <appname>

Create DMG installers for your electron apps.

Usage:
  electron-installer-dmg ./FooBar-darwin-x64/FooBar.app FooBar

Options:
  --out=<path>         The directory to put the DMG into. [Default: `process.cwd()`].
  --icon=<path>        Path to the icon file that will be the app icon in the DMG window.
  --icon-size=<px>     How big to make the icon for the app in the DMG. [Default: `80`].
  --background=<path>  Path to a PNG image to use as the background of the DMG.
  --debug              Enable debug messages.
  --overwrite          Overwrite any existing DMG.
  -h --help            Show this screen.
  --version            Show version.

As you see above we can set the out path of the .dmg file that is generated. We can set an icon that the dmg-window will use (By default this was the electron icon when i tried). We can set the icon size and custom background for the window.

Since the packages are created in the release-builds folder we’ll create the installers there as well. We also already have the icon created for the application (this is done in the icon tutorial)

The command to run now looks like this:

electron-installer-dmg ./release-builds/Electron\ tutorial\ app-darwin-x64/Electron\ tutorial\ app.app electron-tutorial-app --out=release-builds --overwrite --icon=assets/icons/mac/icon.icns

4. Creating a script

I am one of those that won’t be able to memorize that string. So we can add it to our scripts package.json:

 "scripts": {
     "package-mac": "electron-packager . --overwrite --asar=true --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
     "package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/windows/icon.ico --prune=true --out=release-builds --version-string.CompanyName='CE' --version-string.FileDescription='CE' --version-string.ProductName='ElectronTutorialApp'",
     "package-linux": "electron-packager . --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds",
     "create-installer-mac": "electron-installer-dmg ./release-builds/Electron\\ tutorial\\ app-darwin-x64/Electron\\ tutorial\\ app.app electron-tutorial-app --out=release-builds --overwrite --icon=assets/icons/mac/icon.icns"
 }

And now you can run:

npm run create-installer-mac

Next post in this tutorial covers how to create a Windows installer.

Posted on https://www.christianengvall.se/dmg-installer-electron-app/

Electron asar

Thu, 03 Nov 2016 15:57:21 +0100

Packaging your app into an asar archive speeds up requires a bit, it conceals the source code and helps to avoid long path names on Windows. Asar is an archive format that concatenates files together without compression.

I got this error when building a Windows installer for an electron app with electron winstaller:

"The specified path, file name, or both are too long. The fully qualified file name must be less than 260 characters, and the directory name must be less than 248 characters."

This was because of a package in node_modules that created very long paths.This did however work on Linux and MacOS. The solution was to package my app with asar before creating the installer.

Asar and electron packager

Install the asar package globally:

$ npm install -g asar

In the Electron tutorial app we use electron packager. To the build script we can pass –asar=true in package.json:

 "scripts": {
     "package-mac": "electron-packager . --overwrite --asar=true --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
     "package-win": "electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/windows/icon.ico --prune=true --out=release-builds --version-string.CompanyName='CE' --version-string.FileDescription='Electron tutorial app' --version-string.ProductName='Electron tutorial app'",
     "package-linux" : "electron-packager . --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
 }

So now when we do a npm run package-mac our app will have a file called app.asar in it instead.

You can also do this without electron packager with this command:

asar pack your-app app.asar

Read the official docs about electron and asar to get to know more.

Next tutorial shows you how to create a dmg-installer for macOS

Posted on https://www.christianengvall.se/electron-asar/

IPCMain and IPCRenderer

Wed, 02 Nov 2016 22:44:52 +0100

Lets look at IPCMain and IPCRenderer in Electron. We can use it to send messages between main and renderer processes.

Over at the forums there was a developer who needed to open a second app window from the main process when the user had done something in the renderer process. So I thought we could look at a real world example. So in this tutorial we’ll wait for the user to click a button. Then we’ll send a message to the main process which in turn opens a new window.

1. Setting up a new window in main.js

Fire up the Electron tutorial app or your own app, and open main.js. The additions are highlighted in bold.

const electron = require('electron')
var path = require('path')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow
//Adds the main Menu to our app

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
let secondWindow

function createWindow () {
    // Create the browser window.
    mainWindow = new BrowserWindow({titleBarStyle: 'hidden',
    width: 1281,
    height: 800,
    minWidth: 1281,
    minHeight: 800,
    backgroundColor: '#312450',
    show: false,
    icon: path.join(__dirname, 'assets/icons/png/64x64.png')
 })

....

 secondWindow = new BrowserWindow({frame:false,
    width: 800,
    height: 600,
    minWidth: 800,
    minHeight: 600,
    backgroundColor: '#312450',
    show: false,
    icon: path.join(__dirname, 'assets/icons/png/64x64.png'),
    parent: mainWindow
 })

 secondWindow.loadURL(`file://${__dirname}/windows/secondWindowcontent.html`)

 require('./menu/mainmenu')
}

...

We create a new variable to hold our second window with let secondWindow and by now you know how to create a new BrowserWindow. But this time the size of the window has changed. And we also don’t show a frame, so we set that to frame:false. This is because we close the window from a button that we create ourselves instead of using the standard os-buttons. If the user closes the new window with the built in close button they wont be able to open it again because it’s not initialized anymore.

We also set mainWindow as parent so that secondWindow will stay on top of the parent window. There are some platform specific handling to the parent setting:

On macOS the child windows will keep the relative position to parent window when parent window moves, while on Windows and Linux child windows will not move.

On Windows it is not supported to change parent window dynamically.

On Linux the type of modal windows will be changed to dialog.

On Linux many desktop environments do not support hiding a modal window

The secondWindow also loads another .html file called ipcwindow.html that is located in a folder called windows. Lets look at that next.

2. IPCWindow content

Create a new folder called windows. In that folder you create ipcwindow.html. Add this content to the html file:

<!DOCTYPE HTML>
<!--
 Hyperspace by HTML5 UP
 html5up.net | @ajlkn
 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
    <head>
         <title>Electron tutorial app - ipc</title>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="stylesheet" href="../assets/css/main.css" />
    </head>
    <body>

    <!-- Sidebar -->
    <section id="sidebar">
         <div class="inner">
             <nav>
                 <ul>
                 </ul>
             </nav>
         </div>
    </section>

    <!-- Wrapper -->
    <div>
        <section id="welcome" class="wrapper style1 fullscreen intro">
            <div class="inner">
                <h1>Yes this is the second window!</h1>
                    <ul class="actions">
                        <li><a href="#one" id="close-me-button" class="button scrolly">Close me</a></li>
                    </ul>
            </div>
        </section>
   </div>

   <!-- Footer -->
   <footer id="footer" class="wrapper style1-alt">
       <div class="inner">
           <ul class="menu">
               <li></li>
           </ul>
       </div>
   </footer>

 <!-- Scripts -->
 <script>window.$ = window.jQuery = require('../assets/js/jquery.min.js');</script>
 <script>window.i18n = new(require('../translations/i18n'));</script>
 <script src="../assets/js/jquery.scrollex.min.js"></script>
 <script src="../assets/js/jquery.scrolly.min.js"></script>
 <script src="../assets/js/skel.min.js"></script>
 <script src="../assets/js/util.js"></script>
 <script src="../assets/js/main.js"></script>
 <script>
 require('../assets/js/translations')
 </script>
 </body>
</html>

When this tutorial is being written the navigation menu and who we are section looks like this:

Navigation menu - who we are

Change the name of the menu-item to IPC/Remote in the en.js and sv.js translations

{
    ....
    "Who we are": "IPC/Remote"
    ....
}

Also rename sections/whoweare.html to ipcremote.html. Then update link=rel and the sidebar menu in index.html:

....
<link rel="import" href="sections/ipcremote.html">
....
<li><a id="welcome-menu" data-section="welcome" href="#">Welcome</a></li>
<li><a id="whoweare-menu" data-section="ipcremote" href="#">Who we are</a></li>
<li><a id="whatwedo-menu" data-section="whatwedo" href="#">What we do</a></li>
<li><a id="getintouch-menu" data-section="getintouch" href="#">Get in touch</a></li>

In ipcremote.html we also need to update the id of the section to ipcremote and adding some information about what will happen if we click the button:

<template class="section-template">
<section id="ipcremote" class="wrapper style2 spotlights">
    <section>
        <div class="content">
            <div class="inner">
                <h2>IPCRenderer and IPCMain</h2>
                    <p>Click the button below to send a message that is picked up in the main process and open a new window</p>
                    <ul class="actions">
                        <li><a href="#" id="open-secondwindow-button" class="button">Open Window</a></li>
                    </ul>
            </div>
       </div>
 </section>

4. IPCRenderer

Now we’ve got our app set up and it’s finally time to move on to sending and receiving messages with IPC. This will be done asynchronous.

Create a file called ipc.js in assets/js/. To start with you can add this content to it:

const {ipcRenderer} = require('electron')

window.ipc = window.ipc || {},
function(n) {
    ipc.messaging = {
        sendOpenSecondWindowEvent: function() {
            ipcRenderer.send('open-second-window', 'an-argument')
    },

    init: function() {
        $('#open-secondwindow-button').click( function () {
             ipc.messaging.sendOpenSecondWindowEvent()
        })
    }

 };

 n(function() {
     ipc.messaging.init();
 })

}(jQuery);

init() is called on documentready. That in turn hooks up an onclick event on the button in the ipc section with id #open-secondwindow-button. Now to the ipc stuff. When that button is clicked ipcRenderer.send is invoked like this: ipcRenderer.send(‘open-second-window’, ‘an-argument’) The first value sent as a parameter is the name of the event. The second one is an argument of your own choice.

and add a require statement to the file in index.html:

 <script>
 require('./assets/js/menu')
 require('./assets/js/translations')
 require('./assets/js/ipc')
 </script>

5. IPCMain

Now it is time to listen for this event in main.js. Start by adding a require statement for ipcMain at the top of the file:

const electron = require('electron')
const {ipcMain} = require('electron')
....

And to listen to the event and showing the second window just add this code:

...

ipcMain.on('open-second-window', (event, arg)=> {
    secondWindow.show()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

And at this point the tutorial on ipc main and renderer is over. But we’ll do it once more just to be able to close the secondwindow again.

6. Closing a BrowserWindow

Open up ipc.js again and add another on click event that sends a closing message to main:

const {ipcRenderer} = require('electron')

window.ipc = window.ipc || {},
function(n) {
     ipc.messaging = {

         sendOpenSecondWindowEvent: function() {
             ipcRenderer.send('open-second-window', 'an-argument')
         },

         sendCloseSecondWindowEvent: function() {
             ipcRenderer.send('close-second-window', 'an-argument')
         },

        init: function() {
            $('#open-secondwindow-button').click( function () {
            ipc.messaging.sendOpenSecondWindowEvent()
        })

        $('#close-me-button').click( function () {
            ipc.messaging.sendCloseSecondWindowEvent()
        })
    }
 };

 n(function() {
     ipc.messaging.init();
 })

}(jQuery);

And in main we add another event listener:

....
ipcMain.on('open-second-window', (event, arg)=> {
    secondWindow.show()
})

ipcMain.on('close-second-window', (event, arg)=> {
    secondWindow.hide()
})
....

Ipc also needs to be required from ipcwindow.html:

 ...
 <script>
     require('../assets/js/translations')
     require('../assets/js/ipc')
 </script>
 </body>
</html>

That’s it for this tutorial. Check out the official documentation on IPCMain and IPCRenderer

In the next tutorial we look at electron asar

Posted on https://www.christianengvall.se/ipcmain-and-ipcrenderer/

Main process and Renderer process in Electron

Sat, 29 Oct 2016 11:29:06 +0200

You might have come across the main process and renderer process in Electron. This is a simple explanation of them.

Main process

The main process takes care of starting and running your app. In the electron tutorial app you can see this line in package.json:

 "main": "main.js"

This is the primary entry point to an electron app. And this is running in the main process. All the files you require from this file will be running in the main process as well.

If we would call process.type and log it with console.log() the word “browser” would turn up in the terminal running the app.

 console.log(process.type)

console log in main process

Renderer process

The renderer process takes care of showing your app in the Chromium browser. When the app is ready to show the electron tutorial app runs this command in main.js:

 mainWindow.loadURL(`file://${__dirname}/index.html`)

The javascript files you include from index.html or any other html-document is running in the renderer process. If we would run the same console.log() call as above, the word “renderer” would show up. But this time in the developer tools of chromium:

console log in renderer process

Documentation

So what API calls can we do from the different processes? The official documents are kind to us and list them under Main Process and Renderer process. But there are also api-calls that work in both processes.

Communicating between the processes

The api allows us to communicate between the processes. You can do that with remote which provides a simple way to do inter-process communication between renderer and the main process.

IPCRenderer and IPCMain

The api also allows us to use ipcRenderer and ipcMain to help us send events between the different processes. We can then listen to these events and implement the functionality we need.

Posted on https://www.christianengvall.se/main-and-renderer-process-in-electron/

Electron localization

Thu, 27 Oct 2016 13:24:14 +0200

Let us add localization to the electron tutorial app. We will look at translating both in the main and renderer process.

I tried some of the already existing npm-packages that helps with translating your app. They were good but didn’t feel 100% right to me. Some of them used .po-files, some of them were too advanced. So I decided to write a simpler one on my own. This is just a matter of taste. If you find another way that suits you better you should do it like that instead.

The localization script will store translations in .js files with a json-structure. It will use english as a fallback language, and try to use the users language by default. If no translation is found the original phrase will be sent back to be used.

1.Adding the script

Create a new folder in the project called translations. Create a new .js file and copy the contents below and save the file as i18n.js (why i18n?)

const path = require("path")
const electron = require('electron')
const fs = require('fs');
let loadedLanguage;
let app = electron.app ? electron.app : electron.remote.app

module.exports = i18n;

function i18n() {
    if(fs.existsSync(path.join(__dirname, app.getLocale() + '.js'))) {
         loadedLanguage = JSON.parse(fs.readFileSync(path.join(__dirname, app.getLocale() + '.js'), 'utf8'))
    }
    else {
         loadedLanguage = JSON.parse(fs.readFileSync(path.join(__dirname, 'en.js'), 'utf8'))
    }
}

i18n.prototype.__ = function(phrase) {
    let translation = loadedLanguage[phrase]
    if(translation === undefined) {
         translation = phrase
    }
    return translation
}

In the i18n constructor the script first checks if a language file for the current users locale exists. If it does that file is loaded. If the file does not exist the script loads the fallback language in en.js.

the __ function takes a phrase as an argument and checks if that is translated in the loadedLanguage. If it’s not it returns the phrase sent to the function.

This line takes care of loading app from either the main(mainmenu.js) or renderer(from index.html) process.

let app = electron.app ? electron.app : electron.remote.app

2.Adding translation files

Since i am from Sweden I will locate the tutorial app into Swedish. So I will create en.js and sv.js in the translations folder. To know what you should name your file so that the i18n script will find it and load it you can add this to main.js which will log the locale to the terminal(just add .js to it):

console.log(app.getLocale())

This is how the structure in the translation files should look. This is what en.js will look like:

{
 "Edit": "Edit",
 "Undo": "Undo",
 "Redo": "Redo",
 "Cut": "Cut",
 "Copy": "Copy",
 "Paste": "Paste",
 "Delete": "Delete",
 "Select all": "Select all",
 "View": "View",
 "Speech": "Speech",
 "Start speaking": "Start speaking",
 "Stop speaking": "Stop speaking",
 "Actual size": "Actual size",
 "Zoom in": "Zoom in",
 "Zoom out": "Zoom out",
 "Toggle fullscreen": "Toggle fullscreen",
 "Window": "Window",
 "Minimize": "Minimize",
 "Close": "Close",
 "Help": "Help",
 "Learn more": "Learn more",
 "About": "About",
 "Services": "Services",
 "Hide": "Hide",
 "Hide others": "Hide others",
 "Unhide": "Unhide",
 "Quit": "Quit",
 "Zoom": "Zoom",
 "Bring all to front": "Bring all to front"
}

And this is what my sv.js looks like:

{
 "Edit": "Redigera",
 "Undo": "Ångra",
 "Redo": "Gör om",
 "Cut": "Klipp ut",
 "Copy": "Kopiera",
 "Paste": "Klistra in",
 "Delete": "Radera",
 "Select all": "Markera allt",
 "Speech": "Tal",
 "Start speaking": "Börja tala",
 "Stop speaking": "Sluta tala",
 "View": "Visa",
 "Actual size": "Faktisk storlek",
 "Zoom in": "Zooma in",
 "Zoom out": "Zooma ut",
 "Zoom": "Zooma",
 "Toggle fullscreen": "Helskärmsläge",
 "Window": "Fönster",
 "Minimize": "Minimera",
 "Close": "Stäng",
 "Help": "Hjälp",
 "Learn more": "Läs mer",
 "About": "Om",
 "Services": "Tjänster",
 "Hide" : "Göm",
 "Hide others": "Göm övriga",
 "Unhide": "Visa alla",
 "Quit": "Avsluta",
 "Bring all to front": "Flytta fram alla"
}

As you might have guessed when reading the translation they look like menu items. So let us translate the menu that was added in the last tutorial.

Open up mainmenu.js that is located in the menu folder and add this require statement to the top of the file:

const {Menu} = require('electron')
const electron = require('electron')
const app = electron.app
var i18n = new(require('../translations/i18n'))

Now all we need to do is call i18n.__() for every menu item. These are what the first three looks like, here is the fully translated menu file.

const {Menu} = require('electron')
const electron = require('electron')
const app = electron.app
var i18n = new(require('../translations/i18n'))

const template = [
 {
     label: i18n.__('Edit'),
     submenu: [
     {
         role: 'undo', label: i18n.__('Undo')
     },
     {
         role: 'redo', label: i18n.__('Redo')
     },
....

What you do is add the label: attribute to the menu item, which gets the translated value from i18n__().

Create a new file in assets/js/ called translations.js. In this one we’ll use jquery to set the translated strings to our html-markup.

Open index.html and add i18n int the list of scripts.

 <!-- Scripts -->
 <script>window.$ = window.jQuery = require('./assets/js/jquery.min.js');</script>
 <script>window.i18n = new(require('./translations/i18n'));</script>
 <script src="assets/js/jquery.scrollex.min.js"></script>
 <script src="assets/js/jquery.scrolly.min.js"></script>
 <script src="assets/js/skel.min.js"></script>
 <script src="assets/js/util.js"></script>
 <script src="assets/js/main.js"></script>
 <script>
 require('./assets/js/menu')
 require('./assets/js/translations')
 </script>
 </body>
</html>

In translations.js it’s plain jquery to set the text of the elements that you wish to translate:

window.localization = window.localization || {},
function(n) {
     localization.translate = {

     menu: function() {
         $('#welcome-menu').text(i18n.__('Welcome'));
    },

   welcome: function() {
       $('#welcome .inner p').text(i18n.__('Hopefully this helps someone to get up to speed with electron.'));
   },

   init: function() {
         this.welcome();
         this.menu();
   }
 };

 n(function() {
     localization.translate.init();
 })

}(jQuery);

This is just two translations that are added. You can see the full file here.

The app now looks like this when running it on an os set to Swedish language:

electron tutorial app windows - translated to swedish

Posted on https://www.christianengvall.se/electron-localization/

Electron menu

Mon, 24 Oct 2016 13:19:35 +0200

This tutorial shows you how to add an Electron menu to your app. It will also make standard keyboard shortcuts, like copy and paste, work on MacOS.

We’ve actually got our work pretty much done for us thanks to the Electron documentation giving us a good template to use. We just need to implement and do some changes to it (If you want to that is). As always this tutorial uses Electron tutorial app as a canvas so you can download and/or look at the code on github.

Open up a new file and paste this menu definition to it (this is the code from the documentation, with minor adjustments):

const {Menu} = require('electron')
const electron = require('electron')
const app = electron.app

const template = [
  {
    label: 'Edit',
    submenu: [
      {
        role: 'undo'
      },
      {
        role: 'redo'
      },
      {
        type: 'separator'
      },
      {
        role: 'cut'
      },
      {
        role: 'copy'
      },
      {
        role: 'paste'
      },
      {
        role: 'pasteandmatchstyle'
      },
      {
        role: 'delete'
      },
      {
        role: 'selectall'
      }
    ]
  },
  {
    label: 'View',
    submenu: [
      {
        label: 'Reload',
        accelerator: 'CmdOrCtrl+R',
        click (item, focusedWindow) {
          if (focusedWindow) focusedWindow.reload()
        }
      },
      {
        label: 'Toggle Developer Tools',
        accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
        click (item, focusedWindow) {
          if (focusedWindow) focusedWindow.webContents.toggleDevTools()
        }
      },
      {
        type: 'separator'
      },
      {
        role: 'resetzoom'
      },
      {
        role: 'zoomin'
      },
      {
        role: 'zoomout'
      },
      {
        type: 'separator'
      },
      {
        role: 'togglefullscreen'
      }
    ]
  },
  {
    role: 'window',
    submenu: [
      {
        role: 'minimize'
      },
      {
        role: 'close'
      }
    ]
  },
  {
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click () { require('electron').shell.openExternal('http://electron.atom.io') }
      }
    ]
  }
]

if (process.platform === 'darwin') {
  const name = app.getName()
  template.unshift({
    label: name,
    submenu: [
      {
        role: 'about'
      },
      {
        type: 'separator'
      },
      {
        role: 'services',
        submenu: []
      },
      {
        type: 'separator'
      },
      {
        role: 'hide'
      },
      {
        role: 'hideothers'
      },
      {
        role: 'unhide'
      },
      {
        type: 'separator'
      },
      {
        role: 'quit'
      }
    ]
  })
  // Edit menu.
  template[1].submenu.push(
    {
      type: 'separator'
    },
    {
      label: 'Speech',
      submenu: [
        {
          role: 'startspeaking'
        },
        {
          role: 'stopspeaking'
        }
      ]
    }
  )
  // Window menu.
  template[3].submenu = [
    {
      label: 'Close',
      accelerator: 'CmdOrCtrl+W',
      role: 'close'
    },
    {
      label: 'Minimize',
      accelerator: 'CmdOrCtrl+M',
      role: 'minimize'
    },
    {
      label: 'Zoom',
      role: 'zoom'
    },
    {
      type: 'separator'
    },
    {
      label: 'Bring All to Front',
      role: 'front'
    }
  ]
}

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

Save this in a new folder called menu, and why not name the file mainmenu.js

If you take a look at the two last lines in mainmenu.js you see two calls, one to buildFromTemplate(), which basically takes the array defined above, and creates a menu from it. Then we pass the menu to setApplicationMenu()

Now open up main.js and add require(‘./menu/mainmenu’) after creating the window. In the Electron tutorial app it is added to line 45, right before closing the createWindow function. We add it there because the call to setApplicationMenu needs to been done after the ready event is fired. Which it has in createWindow.

function createWindow () {
    ...

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
       // Dereference the window object, usually you would store windows
       // in an array if your app supports multi windows, this is the time
       // when you should delete the corresponding element.
       mainWindow = null
    })

    require('./menu/mainmenu')
}

If you start the app now, you can see that you have a different menu already.

Let us look at what the mainmenu.js contains. It’s an array that defines MenuItems.

Label

Labels are what the menu item will say when it is displayed. It is required to set when you are defining a menu item that does not use Role(which we will look at soon). You can use this when localizing your menu items.

Submenu

A submenu is what you think it is. It is an array containing menuitems for a submenu.

Role

Electron provides us with roles that are predefined for Platform specific menu items such as undo, redo and those standard functions. The existing roles are:

undo
redo
cut
copy
paste
pasteandmatchstyle
selectall
delete
minimize - Minimize current window
close - Close current window
quit - Quit the application
togglefullscreen - Toggle full screen mode on the current window
resetzoom - Reset the focused page’s zoom level to the original size
zoomin - Zoom in the focused page by 10%
zoomout - Zoom out the focused page by 10%

On macOS role can also have following additional values:

about - Map to the orderFrontStandardAboutPanel action
hide - Map to the hide action
hideothers - Map to the hideOtherApplications action
unhide - Map to the unhideAllApplications action
startspeaking - Map to the startSpeaking action
stopspeaking - Map to the stopSpeaking action
front - Map to the arrangeInFront action
zoom - Map to the performZoom action
window - The submenu is a “Window” menu
help - The submenu is a “Help” menu
services - The submenu is a “Services” menu

When specifying role on macOS, label and accelerator are the only options that will affect the MenuItem. All other options will be ignored.

Accelerator

If you scroll down a bit in mainmenu.js to line 43 you can see something called accelerator. With the accelerator you can add keyboard shortcuts to your menu item. Built in accelerators are:

Command (or Cmd for short)
Control (or Ctrl for short)
CommandOrControl (or CmdOrCtrl for short)
Alt
Option
AltGr
Shift
Super

One interesting accelerator to look at is the CommandOrControl. It uses the command button on macs, but on windows it maps to control instead since Windows doesn’t use the command button.

click

When a menuItem is clicked you can define what code will be executed by defining a click event.

Type

You can se a type to a menuitem, a type can for example be a separator. If you look at line 56 in mainmenu.js you can see it being used. But there are more types defined:

type String - Can be normal, separator, submenu, checkbox or radio.

To learn more about this topic you can read about Menu and MenuItem in the official docs. You can also take a look at the implemented menu on the Electron tutorial app repository on github

Next step in this tutorial series walks you through how to translate the menu and the rest of your electron app

Posted on https://www.christianengvall.se/electron-menu/

Electron packager tutorial

Tue, 18 Oct 2016 14:13:32 +0200

In this electron packager tutorial we will look at how to create MacOS, Windows and Linux executables with an app icon. This is also a continuation of the Electron app icon post, so start there if you haven’t read it (It’s short, i promise).

I add this code to the Electron tutorial app on github. Just look at that repo if you want to see all the code.

In this tutorial I package the application on Windows, macOS and Ubuntu Linux. There are some information about building Windows apps from non-Windows platforms in the Electron packager readme.

1. Install Electron packager

Electron packager is created by electron-userland and this is what they say about it:

"Electron Packager is a command line tool and Node.js library that bundles Electron-based application source code with a renamed Electron executable and supporting files into folders ready for distribution."

So lets go ahead and install it. Run these commands in the terminal in the app folder:

# for use in npm scripts
npm install electron-packager --save-dev

# for use from cli
npm install electron-packager -g

2. Setting productname and electron version

Electron packager looks for a product name in package.json, so lets go ahead and add one. We also need to add what version of electron to package the app with.

Lets begin with the electron version. We’ll add that from the terminal with this command:

npm install --save-dev electron

Now when that is done open up package.json and add a productname:

{
 "name": "electron-tutorial-app",
 "productName": "Electron tutorial app",
 "version": "0.1.0",
 "main": "main.js",
 "devDependencies": {
 "electron": "^1.4.3",
 "electron-packager": "^8.1.0"
 }
}

3. Building MacOS, Windows and Linux package from the terminal

To get to know what all these flags do, and what more flags exists you can read the electron-packager api.

MacOS

Now you can run this command from the terminal to build a package for mac:

electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds

Electron packager mac

Windows

And to build for Windows you can run this from the git bash:

electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Electron Tutorial App"

Electron packager windows

Linux

electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds

Electron packager ubuntu linux

overwrite: replaces any existing output directory when packaging.

platform: The target platform to build for

arch: the architecture to build for

icon: sets the icon for the app

prune: runs npm prune –production before packaging the app. It removes unnecesary packages.

out: the name of the directory where the packages are created.

4. Shortcuts

To make it easier to create new builds we can create scripts in package.json so that we don’t have to remember all these settings. Add the scripts below, making your package.json look like this:

{
 "name": "electron-tutorial-app",
 "productName": "Electron tutorial app",
 "version": "0.1.0",
 "main": "main.js",
 "devDependencies": {
 "electron": "^1.4.3",
 "electron-packager": "^8.1.0"
 },
 "scripts": {
 "package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
"package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\"",    
"package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/1024x1024.png --prune=true --out=release-builds"
 }
}

Now you can run:

npm run package-mac

npm run package-win

npm run package-linux

Installer tutorials

DMG installer for macOS tutorial

Windows installer tutorial.

Debian package installer tutorial

Coming soon: Red-hat package.

Next tutorial

The next tutorial in this series is Electron menu. It explains how to add a menu to your app.

Posted on https://www.christianengvall.se/electron-packager-tutorial/

Electron app icons

Tue, 18 Oct 2016 14:12:15 +0200

It’s time to add Electron app icons to the Electron tutorial app. For this we need a png-icon, a .icns for macs and a .ico for windows. For Linux we only need the pngs.

This code is added to the Electron tutorial app on github. Have a look at that repository if you would like to see all the source code.

The icons need to be set when creating a new BrowserWindow. But they need also be set when packaging the app. So by setting it in the code won’t make any difference when debugging your app with electron . That’s why we’ll first take a look at the code. Then we’ll take a look at packaging our app with electron-packager. But don’t worry, it’s an easy task.

1. Creating our icns and ico-files

First we need an icon that is 1024x1024 pixels large and saved in PNG. I’ve got one looking like this:

Electron tutorial app icon

Now go to ICONVERT ICONS and upload the PNG and the service will take care of creating the other icon-formats.

2. Folder structure

Now create a folder structure that looks like this:

electron icon folder structure

Create a folder called icons in the assets folder. And in that folder create one folder called mac, one called png and one called win. Put the .icns-file into the mac folder, the pngs in the png folder and the .ico file in the win folder.

3. Updating main.js with path to icon

Open main.js and add icon: path.join(__dirname, 'assets/icons/png/64x64.png') when instantiating the BrowserWindow. But also var path = require(‘path’) at the top of the main.js.

const electron = require('electron')
var path = require('path')

...

 mainWindow = new BrowserWindow({titleBarStyle: 'hidden',
     width: 1281,
     height: 800,
     minWidth: 1281,
     minHeight: 800,
     backgroundColor: '#312450',
     show: false,
     icon: path.join(__dirname, 'assets/icons/png/64x64.png')
 })

At this point you can see the icon when running the app in Ubuntu. (Read how to get going with electron in ubuntu).

Electron icon ubuntu

The next step is to create an executable for MacOS and Windows with the icon we need to package the app. This next step is covered in Electron packager tutorial.

Posted on https://www.christianengvall.se/electron-app-icons/

Electron white screen app startup

Fri, 09 Sep 2016 12:14:27 +0200

This post will cover how to fix the electron white screen app startup. If you start the electron tutorial app you can see it flashes white and then loads the css setting the correct color. The electron API currently allows two ways of fixing this.

This is what the the tutorial app looks like when it starts before applying this fix.

Electron - flashing white on startup

Setting backgroundColor

One way is to let the app flash before load, but setting the white color to something else. In this case it would be #312450. This is a setting on the BrowserWindow and in our tutorial app we set it on line 13 in main.js.

 mainWindow = new BrowserWindow({titleBarStyle: 'hidden',
     width: 1281,
     height: 800,
     minWidth: 1281,
     minHeight: 800,
     backgroundColor: '#312450'
 })

If this works well with your app this is a good alternative because it will appear to load your app faster than the other one we will look at now. If your app has more than one background color, like the tutorial app does (the menu background and the main container background), setting the startup background color is not enough. But this is a matter of taste, there is no right or wrong. This is what the official docs say:

"Note that even for apps that use ready-to-show event, it is still recommended to set backgroundColor to make app feel more native."

ready-to-show event

This technique waits for the event ready-to-show to fire. When that happens we take care of showing the window. But before doing that we need to tell the mainWindow to not show when we init a new BrowserWindow.

 mainWindow = new BrowserWindow({titleBarStyle: 'hidden',
     width: 1281,
     height: 800,
     minWidth: 1281,
     minHeight: 800,
     backgroundColor: '#312450',
     show: false
 })

Now we need to tell it to show on the ready-to-show event. Put these lines in the function createWindow in main.js.

 mainWindow.once('ready-to-show', () => {
     mainWindow.show()
 })

Now the app looks like this when starting

electron - using ready-to-show event

You can read more about this in the official docs

Next tutorial is about Electron app icons.

Posted on https://www.christianengvall.se/electron-white-screen-app-startup/

Midi from Reason to Logic

Fri, 02 Sep 2016 08:57:11 +0200

I had a few piano songs recorded in Reason. But i wanted to copy the midi from Reason to Logic because that’s the software I use to record things now.

Last time I used Reason was when version 3 was released. So it was quite a long time ago. Could it have been around 2006? However… my first thought was to get hold of Reason 3 somehow and see if i could manually copy the midi tracks. Turns out that wasn’t needed at all.

Reason 9

Propellerhead has made Reason 9 available to use as a trial for 30 days. So i installed the trial version and tried to open my old recordings. And thankfully it worked well! Even if i used some plugins or instruments that didn’t exist in the new version i could still see that the song was there, but i couldn’t listen to it. If you get this window when opening your song you can just close it.

Missing sounds

Next click the File menu and select Export midi file… and save it where ever you like.

File export midi

Logic

Now open up a new project in Logic and go to File-> import -> Midi file and select the midi file you just exported from Reason.

File import midi

Logic will add the tracks for you. You will get a question about the tempo of the song. i choose not to import the tempo. Not sure why though… i’m a developer… not a producer… don’t ask me those hard questions!

Logic

Posted on https://www.christianengvall.se/midi-reason-logic/

Electron frameless window

Mon, 29 Aug 2016 09:18:03 +0200

Now it’s time to look at the Electron frameless window functionality. Using a frameless window removes the menu and menubar in your app. The electron documentation defines it as:

"A frameless window is a window that has no [chrome](https://developer.mozilla.org/en-US/docs/Glossary/Chrome), the parts of the window, like toolbars, that are not a part of the web page."

Alternatives

There are two alternatives to choose between. Either remove the frame for all three platforms using frame: false when initializing the browserwindow in main.js. Or you can use titleBarStyle: ‘hidden’. This alternative is only for macOS. Lets look at them both.

If you remove the frame around your app, the user also looses the ability to move the application around on the desktop. So we need to give that functionality back to the user. We do that with draggable regions. But more on that later.

Frame:false

mainWindow = new BrowserWindow({frame: false, width: 1281, height: 800, minWidth: 1281, minHeight: 800})

This removes all the chrome around the application on all platforms. Then it is up to you to handle how the application closes, minimizes and maximizes. Electron provides api’s for this. so you can add buttons and style them the way you like. and then hook them up to the correct handler. Look at the BrowserWindow class and the methods called minimize, maximize, unmaximize, and close. For macOS you don’t use maximize, instead you use setFullScreen.

This is what the Electron tutorial app would look like when setting frame:false

Electron frame false

titleBarStyle Hidden

This is the macOS only alternative. It removes the titlebar but leaves the stop light buttons.

mainWindow = new BrowserWindow({titleBarStyle: 'hidden', width: 1281, height: 800, minWidth: 1281, minHeight: 800})

Using this setting the app would look like this on macOS from Yosemite(10.10) and newer. On Windows and Linux there will be no change at all.

Electron titlebar hidden

I like the option to remove the titlebar on macOS and leaving it as is on Linux and Windows. So i’m going for the titleBarStyle: ‘hidden’ setting.

Hidden-inset

There is also a titleBarStyle: ‘hidden-inset’. The docs explain it like this:

"results in a hidden title bar with an alternative look where the traffic light buttons are slightly more inset from the window edge."

Draggable region

As said earlier, when using frameless window the user looses the ability to drag your application around the desktop. Let’s fix that. Electron handles this with css.

To make the whole window draggable you can set -webkit-app-region: drag on the body element. To do that in the electron tutorial app open up assets/sass/base/_page.scss and add this to the body.

body {
    -ms-overflow-style: scrollbar;
    -webkit-app-region:drag;
}

This makes our window draggable again. But it makes it a little to much draggable. For example the buttons will be draggable and the user won’t be able to click them. We’ll fix this with -webkit-app-region: no-drag; open up assets/sass/components/_button.scss and that property to button, textarea and input types submit, reset, button and text.

input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="text"],
button,
textarea {
	-webkit-app-region: no-drag;
}

If you implement your own titlebar and the user tries to move your app by dragging it the text in the titlebar may become selected. And we don’t want that. we can set this with -webkit-user-select: none; The electron tutorial app uses h1 as some kind of titlebar. Let’s remove the users ability to select headers.

Open up assets/sass/base/_typography.scss and go down to line 57 where you add this:

h1, h2, h3, h4, h5, h6 {
    -webkit-user-select: none;
    ...

You can read more about Frameless window at the official docs or you can continue this tutorial with the Electron white screen app startup.

Posted on https://www.christianengvall.se/electron-frameless-window/

Electron app navigation

Fri, 26 Aug 2016 09:44:55 +0200

It’s time to implement an electron app navigation in the Electron tutorial app. Not the main kind of menubar but a left menu kind. For this step some use react or some other framework. But i wanted to keep it simple so this tutorial does not use a UI framework. This is the way the navigation is implemented in the Electron api demos application.

The name of the app is now called Electron tutorial app instead of electron hello world as it was before. I thought that name suits it better since it’s not only a hello world from now on. To get the source code of this application as it looks at the end of this tutorial you can download it from github.

1. Adding a design

First off the app looks pretty dull and does not have a menu. Since the design is out of scope for the tutorial we will use a template from HTML5up called hyperspace. Go ahead and download it.

Electron tutorial app - dull look

Once you’ve downloaded and unpacked hyperspace, copy the folder called assets into the root folder of our electron app. Then copy this HTML-markup into our index.html.

This is the hyperspace markup but with two differences

Internet explorer specific css has been removed. Electron uses chromium.
The import of jquery at the bottom has been changed

<!DOCTYPE HTML>
<!--
 Hyperspace by HTML5 UP
 html5up.net | @ajlkn
 Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
 <head>
 <title>Electron tutorial app</title>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" href="assets/css/main.css" />
 </head>
 <body>

 <!-- Sidebar -->
 <section id="sidebar">
 <div class="inner">
 <nav>
 <ul>
 <li><a href="#intro">Welcome</a></li>
 <li><a href="#one">Who we are</a></li>
 <li><a href="#two">What we do</a></li>
 <li><a href="#three">Get in touch</a></li>
 </ul>
 </nav>
 </div>
 </section>

 <!-- Wrapper -->
 <div id="wrapper">

 <!-- Intro -->
 <section id="intro" class="wrapper style1 fullscreen fade-up">
 <div class="inner">
 <h1>Electron tutorial app!</h1>
 <p>Hopefully this helps someone to get up to speed with electron.</p>
 <ul class="actions">
 <li><a href="#one" class="button scrolly">Learn more</a></li>
 </ul>
 </div>
 </section>

 <!-- One -->
 <section id="one" class="wrapper style2 spotlights">
 <section>
 <a href="#" class="image"><img src="images/pic01.jpg" alt="" data-position="center center" /></a>
 <div class="content">
 <div class="inner">
 <h2>Sed ipsum dolor</h2>
 <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p>
 <ul class="actions">
 <li><a href="#" class="button">Learn more</a></li>
 </ul>
 </div>
 </div>
 </section>
 <section>
 <a href="#" class="image"><img src="images/pic02.jpg" alt="" data-position="top center" /></a>
 <div class="content">
 <div class="inner">
 <h2>Feugiat consequat</h2>
 <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p>
 <ul class="actions">
 <li><a href="#" class="button">Learn more</a></li>
 </ul>
 </div>
 </div>
 </section>
 <section>
 <a href="#" class="image"><img src="images/pic03.jpg" alt="" data-position="25% 25%" /></a>
 <div class="content">
 <div class="inner">
 <h2>Ultricies aliquam</h2>
 <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p>
 <ul class="actions">
 <li><a href="#" class="button">Learn more</a></li>
 </ul>
 </div>
 </div>
 </section>
 </section>

 <!-- Two -->
 <section id="two" class="wrapper style3 fade-up">
 <div class="inner">
 <h2>What we do</h2>
 <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet imperdiet est velit quis lorem.</p>
 <div class="features">
 <section>
 <span class="icon major fa-code"></span>
 <h3>Lorem ipsum amet</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 <section>
 <span class="icon major fa-lock"></span>
 <h3>Aliquam sed nullam</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 <section>
 <span class="icon major fa-cog"></span>
 <h3>Sed erat ullam corper</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 <section>
 <span class="icon major fa-desktop"></span>
 <h3>Veroeros quis lorem</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 <section>
 <span class="icon major fa-chain"></span>
 <h3>Urna quis bibendum</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 <section>
 <span class="icon major fa-diamond"></span>
 <h3>Aliquam urna dapibus</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 </div>
 <ul class="actions">
 <li><a href="#" class="button">Learn more</a></li>
 </ul>
 </div>
 </section>

 <!-- Three -->
 <section id="three" class="wrapper style1 fade-up">
 <div class="inner">
 <h2>Get in touch</h2>
 <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet imperdiet est velit quis lorem.</p>
 <div class="split style1">
 <section>
 <form method="post" action="#">
 <div class="field half first">
 <label for="name">Name</label>
 <input type="text" name="name" id="name" />
 </div>
 <div class="field half">
 <label for="email">Email</label>
 <input type="text" name="email" id="email" />
 </div>
 <div class="field">
 <label for="message">Message</label>
 <textarea name="message" id="message" rows="5"></textarea>
 </div>
 <ul class="actions">
 <li><a href="" class="button submit">Send Message</a></li>
 </ul>
 </form>
 </section>
 <section>
 <ul class="contact">
 <li>
 <h3>Address</h3>
 <span>12345 Somewhere Road #654<br />
 Nashville, TN 00000-0000<br />
 USA</span>
 </li>
 <li>
 <h3>Email</h3>
 <a href="#">user@untitled.tld</a>
 </li>
 <li>
 <h3>Phone</h3>
 <span>(000) 000-0000</span>
 </li>
 <li>
 <h3>Social</h3>
 <ul class="icons">
 <li><a href="#" class="fa-twitter"><span class="label">Twitter</span></a></li>
 <li><a href="#" class="fa-facebook"><span class="label">Facebook</span></a></li>
 <li><a href="#" class="fa-github"><span class="label">GitHub</span></a></li>
 <li><a href="#" class="fa-instagram"><span class="label">Instagram</span></a></li>
 <li><a href="#" class="fa-linkedin"><span class="label">LinkedIn</span></a></li>
 </ul>
 </li>
 </ul>
 </section>
 </div>
 </div>
 </section>

 </div>

 <!-- Footer -->
 <footer id="footer" class="wrapper style1-alt">
 <div class="inner">
 <ul class="menu">
 <li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
 </ul>
 </div>
 </footer>

 <!-- Scripts -->
 <script>window.$ = window.jQuery = require('./assets/js/jquery.min.js');</script>
 <script src="assets/js/jquery.scrollex.min.js"></script>
 <script src="assets/js/jquery.scrolly.min.js"></script>
 <script src="assets/js/skel.min.js"></script>
 <script src="assets/js/util.js"></script>
 <script src="assets/js/main.js"></script>
 </body>
</html>

The media query that show the menu in hyperspace is defined to be over 1280 pixels. So go into our main.js file and go to line 13 and make it look like this:

mainWindow = new BrowserWindow({width: 1281, height: 800, minWidth: 1281, minHeight: 800})

We change the startup width to 1281, the startup height to 800 and setting the minWidth and minHeight to the same values. You can read more about the BrowserWindow Class and it’s properties at the official documentation.

If you fire up the electron app now it looks very fancy ! (Read the hello world if you need help firing it up)

Electron tutorial app - new look

You can download the repo at this stage from this commit.

Hyperspace is a single page layout. So it works as it is now. But that’s not what i’m going for. If you scroll the main window you can see all the pages in our app. And if you click on a menu item you will be scrolled down to that section. An app with a lot of menu items will create a lot of markup in index.html this way. In this step we’ll make all the menu items load it’s own .html file with the markup we want.

2.1 Extract sections

Create a new folder called sections and add four new files to it that are called: getintouch.html, welcome.html, whatwedo.html and whoweare.html

The contents in these files are the different sections you can find in index.html at this point. But when they are extracted i also wrap a template tag around the sections. They will be used in the javascript later on. I’ve also deleted the fade-in classes on the sections because the didn’t work that well. They also got new id’s.

getintouch.html

<template class="section-template">
<section id="getintouch" class="wrapper style1">
 <div class="inner">
 <h2>Get in touch</h2>
 <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet imperdiet est velit quis lorem.</p>
 <div class="split style1">
 <section>
 <form method="post" action="#">
 <div class="field half first">
 <label for="name">Name</label>
 <input type="text" name="name" id="name" />
 </div>
 <div class="field half">
 <label for="email">Email</label>
 <input type="text" name="email" id="email" />
 </div>
 <div class="field">
 <label for="message">Message</label>
 <textarea name="message" id="message" rows="5"></textarea>
 </div>
 <ul class="actions">
 <li><a href="" class="button submit">Send Message</a></li>
 </ul>
 </form>
 </section>
 <section>
 <ul class="contact">
 <li>
 <h3>Address</h3>
 <span>12345 Somewhere Road #654<br />
 Nashville, TN 00000-0000<br />
 USA</span>
 </li>
 <li>
 <h3>Email</h3>
 <a href="#">user@untitled.tld</a>
 </li>
 <li>
 <h3>Phone</h3>
 <span>(000) 000-0000</span>
 </li>
 <li>
 <h3>Social</h3>
 <ul class="icons">
 <li><a href="#" class="fa-twitter"><span class="label">Twitter</span></a></li>
 <li><a href="#" class="fa-facebook"><span class="label">Facebook</span></a></li>
 <li><a href="#" class="fa-github"><span class="label">GitHub</span></a></li>
 <li><a href="#" class="fa-instagram"><span class="label">Instagram</span></a></li>
 <li><a href="#" class="fa-linkedin"><span class="label">LinkedIn</span></a></li>
 </ul>
 </li>
 </ul>
 </section>
 </div>
 </div>
</section>
</template>

welcome.html

<template class="section-template">
<section id="welcome" class="wrapper style1 fullscreen intro">
 <div class="inner">
 <h1>Electron tutorial app!</h1>
 <p>Hopefully this helps someone to get up to speed with electron.</p>
 <ul class="actions">
 <li><a href="#one" class="button scrolly">Learn more</a></li>
 </ul>
 </div>
</section>
</template>

whatwedo.html

<template class="section-template">
<section id="whatwedo" class="wrapper style3">
 <div class="inner">
 <h2>What we do</h2>
 <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus, lacus eget hendrerit bibendum, urna est aliquam sem, sit amet imperdiet est velit quis lorem.</p>
 <div class="features">
 <section>
 <span class="icon major fa-code"></span>
 <h3>Lorem ipsum amet</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 <section>
 <span class="icon major fa-lock"></span>
 <h3>Aliquam sed nullam</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 <section>
 <span class="icon major fa-cog"></span>
 <h3>Sed erat ullam corper</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 <section>
 <span class="icon major fa-desktop"></span>
 <h3>Veroeros quis lorem</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 <section>
 <span class="icon major fa-chain"></span>
 <h3>Urna quis bibendum</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 <section>
 <span class="icon major fa-diamond"></span>
 <h3>Aliquam urna dapibus</h3>
 <p>Phasellus convallis elit id ullam corper amet et pulvinar. Duis aliquam turpis mauris, sed ultricies erat dapibus.</p>
 </section>
 </div>
 <ul class="actions">
 <li><a href="#" class="button">Learn more</a></li>
 </ul>
 </div>
</section>
</template>

whoweare.html

<template class="section-template">
<section id="whoweare" class="wrapper style2 spotlights">
 <section>
 <div class="content">
 <div class="inner">
 <h2>Sed ipsum dolor</h2>
 <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p>
 <ul class="actions">
 <li><a href="#" class="button">Learn more</a></li>
 </ul>
 </div>
 </div>
 </section>
 <section>
 <div class="content">
 <div class="inner">
 <h2>Feugiat consequat</h2>
 <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p>
 <ul class="actions">
 <li><a href="#" class="button">Learn more</a></li>
 </ul>
 </div>
 </div>
 </section>
 <section>
 <div class="content">
 <div class="inner">
 <h2>Ultricies aliquam</h2>
 <p>Phasellus convallis elit id ullamcorper pulvinar. Duis aliquam turpis mauris, eu ultricies erat malesuada quis. Aliquam dapibus.</p>
 <ul class="actions">
 <li><a href="#" class="button">Learn more</a></li>
 </ul>
 </div>
 </div>
 </section>
</section>
</template>

2.2 Empty index.html wrapper

Now the sections are extracted into their own respective files we can empty the div with the id wrapper in index.html. This is not the full index.html, only what the wrapper looks like. the HTML above and under should be left as is.

index.hml

 <!-- Wrapper -->
 <div id="wrapper">
 </div>
 <!-- Footer -->

3.1 data-section

In index.html there is a navigation in the sidebar section. Update the anchor tags to look like this:

 <li><a id="welcome-menu" data-section="welcome" href="#">Welcome</a></li>
 <li><a data-section="whoweare" href="#">Who we are</a></li>
 <li><a data-section="whatwedo" href="#">What we do</a></li>
 <li><a data-section="getintouch" href="#">Get in touch</a></li>

We’ve added a data-section attribute with the value of the file names that we created in step 2. We’ll later use this when loading the sections with javascript.

3.2 Importing section html files

Update the head-section in index.html to look like below. We use import so that chromium can load the contents before we need to use them in our javascript. You can read more about how the rel=”import” works on html5rocks.

 <head>
 <title>Electron tutorial app</title>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" href="assets/css/main.css" />
 <link rel="import" href="sections/getintouch.html">
 <link rel="import" href="sections/welcome.html">
 <link rel="import" href="sections/whatwedo.html">
 <link rel="import" href="sections/whoweare.html">
 </head>

Add a new script to the assets/js folder called menu.js and import in in index.html with the require function.

 <!-- Scripts -->
 <script>window.$ = window.jQuery = require('./assets/js/jquery.min.js');</script>
 <script src="assets/js/jquery.scrollex.min.js"></script>
 <script src="assets/js/jquery.scrolly.min.js"></script>
 <script src="assets/js/skel.min.js"></script>
 <script src="assets/js/util.js"></script>
 <script src="assets/js/main.js"></script>
 <script>
 require('./assets/js/menu')
 </script>
 </body>

And now to the contents of menu.js:

 window.navigation = window.navigation || {},
function(n) {
 navigation.menu = {
 constants: {
 sectionTemplate: '.section-template',
 contentContainer: '#wrapper',
 startSectionMenuItem: '#welcome-menu',
 startSection: '#welcome'
 },

 importSectionsToDOM: function() {
 const links = document.querySelectorAll('link[rel="import"]')
 Array.prototype.forEach.call(links, function (link) {
 let template = link.import.querySelector(navigation.menu.constants.sectionTemplate)
 let clone = document.importNode(template.content, true)
 document.querySelector(navigation.menu.constants.contentContainer).appendChild(clone)
 })
 },

 setMenuOnClickEvent: function () {
 document.body.addEventListener('click', function (event) {
 if (event.target.dataset.section) {
 navigation.menu.hideAllSections()
 navigation.menu.showSection(event)
 }
 })
 },

 showSection: function(event) {
 const sectionId = event.target.dataset.section
 $('#' + sectionId).show()
 $('#' + sectionId + ' section').show()
 },

 showStartSection: function() {
 $(this.constants.startSectionMenuItem).click()
 $(this.constants.startSection).show()
 $(this.constants.startSection + ' section').show()
 },

 hideAllSections: function() {
 $(this.constants.contentContainer + ' section').hide()
 },

 init: function() {
 this.importSectionsToDOM()
 this.setMenuOnClickEvent()
 this.showStartSection()
 }
 };

 n(function() {
 navigation.menu.init()
 })

}(jQuery);

Lets go trough it. Start by looking in the init() function. This function will run when the document is loaded. It calls importSectionsToDOM(), setMenuOnClickEvent() and showStartSection().

importSectionsToDom()

This function loads all the rel=”imports” that we added to the head section in index.html and adds it to the div with id #wrapper in index.html.

setMenuOnClickEvent()

This function adds an eventlistener and looks for events where the data attribute section is set. If it is it calls hideAllSections() and showSection(event). More on these soon.

showStartSection()

We need to show a section when the app is started the first time. That is what this function does. Line 36 make sure that the first menu item is clicken, 37 and 38 makes the start section show.

hideAllSections()

This function is called before a new sections is shown. As the name hints it hides all the other sections so they are not in the way of the one that is about to show.

showSection(event)

If the user has clicked a menu item this function will be called on line 24. it takes the id of the section to be shown and uses jquerys show to display it.

This makes our menu work. But the hyperspace template needs some updates to make it work better.

Hyperspace uses sass so we’ll continue to do that. If you don’t want to do that. you can do the changes directly to assets/css/main.css or just download the css from the repo and replace the your own file with it.

5.1 Adding config.rb

Add this content to a file and name it config.rb to get the correct paths to sass files. Save it in the same directory as index.html

css_dir = "assets/css" # by Compass.app
sass_dir = "assets/sass" # by Compass.app
images_dir = "assets/css/images" # by Compass.app
output_style = :compressed # :expanded or :nested or :compact or :compressed
relative_assets = false # by Compass.app
line_comments = true # by Compass.app
sass_options = {:debug_info=>false} # by Compass.app
sourcemap = false # by Compass.app

5.2 Updating some styles

open the file assets/sass/components/_section.scss and add this:

#wrapper {
	section {
		display: none;
	}
}

Next go into assets/sass/layout/_intro.scss and change #intro to .intro and add .inner:

.intro {
	background-attachment: fixed;
	background-image: url('images/intro.svg');
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.inner {
		padding-top:255px;
}

5.3 Updating hyperspace javascripts

Hyperspace uses scrollex on some pages, that does not work to well now when we split the sections to separate files. open up assets/js/main.js then go to line 149 and comment out that function all the way to line line 185:

// Spotlights.
/*$('.spotlights > section')
	.scrollex({
		mode: 'middle',
		top: '-10vh',
		bottom: '-10vh',
		initialize: function() {

		// Deactivate section.
			if (skel.canUse('transition'))					
                            $(this).addClass('inactive');
			},
			enter: function() {
			// Activate section.
				$(this).removeClass('inactive');
			     }
			})
			.each(function() {
				var	$this = $(this),
				$image = $this.find('.image'),
				$img = $image.find('img'),
				x;

				// Assign image.
				$image.css('background-image', 'url(' + $img.attr('src') + ')');
				// Set background position.
					if (x = $img.data('position'))
					    $image.css('background-position', x);
					// Hide .
						$img.hide();
});*/
// Features.

Thats it for this short(oh my satan it’s to long!) tutorial.

Posted on https://www.christianengvall.se/electron-app-navigation/

Screenbar version 0.2 released

Mon, 22 Aug 2016 18:54:11 +0200

Screenbar is a Mac os Menubar application that helps you to set a timer to take screenshots. I recently did a minor update to it.

Update

You can now download Screenbar from the App Store

Settings

The settings popup has been updated with a setting to select save path for your screenshots.

Screenbar v0.2 settings

Icon

The Screenbar icon is nothing fancy at all. Nevertheless the icon has been added in all the different sizes a mac os application needs.

Screenbar v0.2 icon

Posted on https://www.christianengvall.se/new-version-screenbar/

Testing electron app on Ubuntu linux

Mon, 08 Aug 2016 10:03:08 +0200

Testing electron app on Ubuntu linux is easy with VirtualBox and an Ubuntu ISO. All you need to do is some configuration to share your electron app between the host (your machine) and the guest (Ubuntu). The app we’ll be testing is the Electron hello world app that is covered in another tutorial.

1. Installing ubuntu

The installation process took a lot of space so it’s been published in its own Install Ubuntu on VirtualBox tutorial.

This is one way to do it. You could also add the electron app to a git repo and push it from the host and pull it down to guest machine. The approach described below makes it possible for you to test the app on Linux before committing the changes to the repo.

Make sure you have installed the guest additions as explained in step 1.

Click on the folder icon at the bottom of the virtual machine window and select Shared Folder Settings…

Shared folder settings - ubuntu

Then click on the green plus sign to the left. And set the Path to your electron project in Folder path. If you followed the Electron hello world the folder name will be called electron-hello-world

Shared Folders - VirtualBox add folder

Create an empty directory in your home folder of Ubuntu. We will use this to mount our share folder in. I called mine electron-hello-world and added it to my home folder with the terminal:

mkdir electron-hello-world

next it is time to mount the share:

sudo mount -t vboxsf electron-hello-world electron-hello-world/

3. Install node.js and electron

To install Node.js on Ubuntu, type this in the terminal:

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt-get install npm

When done, run this command in a terminal to install electron globally:

sudo npm install -g electron-prebuilt

4. Running you Electron app

Now you are ready to fire up the electron app.

type the following in the terminal:

cd electron-hello-world
electron .

Electron app - ubuntu

That’s it for now. Next tutorial in this series is Electron app navigation.

Posted on https://www.christianengvall.se/testing-electron-app-on-ubuntu-linux/

Install Ubuntu - VirtualBox

Sun, 07 Aug 2016 09:30:04 +0200

How to install Ubuntu on a VirtualBox virtual machine. It’s very simple and won’t cost you a dime. Don’t forget to install the guest additions at the end.

Virtualbox

Virtualbox is a virtualization software that is free and open source. Start by downloading and installing it. It runs on Windows, MacOS, Linux distributions and Solaris.

Install virtualbox

Ubuntu

Ubuntu is a popular Linux distribution for desktops. It’s free and open source. So go ahead and download Ubuntu.

1. Creating a virtual machine in Virtualbox

Fire up VirtualBox and click on the New button in the top left menu. When i started to type Ubuntu, VirtualBox automatically set type to linux and version to Ubuntu.

Name and operating system - VirtualBox

Next step is to set the amount of memory that will be allocated. VirtualBox will recommend you a number. But you can choose anything you’d like. This can be changed later if the virtual machine runs slow.

Memory size - VirtualBox

Next you select a size of the hard disk. 8 gb that VirtualBox recommends will work fine. Now click Create.

Harddisk size - VirtualBox

Select VDI as hard disk file type

Hard disk file type - VirtualBox

Next use dynamically allocated when asked.

Storage on physical hard disk - VirtualBox

Set the disk size to the standard 8GB

Ubuntu file location - VirtualBox

2. Installing Ubuntu on the new virtual machine

Now when the virtual machine is created it’s time to mount the Ubuntu ISO and install it.

Click on settings with the newly created virtual machine selected.

Settings - VirtualBox

Now go to the storage pane and select the IDE controller, then click on the CD-icon to the right and click Choose Virtual Optical Disk File… and select the ubuntu ISO.

When you are done you can click on OK to go back to the main screen of VirtualBox.

Select iso - VirtualBox

Now start the virtual machine and the ubuntu ISO will be booting up to something like this:

Install Ubuntu - VirtualBox

Now you click on… wait for it…. Install Ubuntu. I’m not going to guide you through this install. For 99%(this number was picked out of the blue) of you it’s only to click on continue until it’s installed.

When the installation is done Ubuntu will be asked to be restarted. Click on that button. Then when the message “please remove installation medium” is displayed, VirtualBox has already unmounted the ISO, so you can hit ENTER directly.

Ubuntu installation is done!

3. Installing VirtualBox guest additions

To share folders between the host and the guest machine we will need to install the guest additions.

Go to Devices in the VirtualBox menu and click on Insert guest additions CD image.

Click on run when Ubuntu asks you if you want to install the software.

Insert guest additions - VirtualBox

Posted on https://www.christianengvall.se/install-ubuntu-virtualbox/

Electron hello world

Sat, 06 Aug 2016 12:05:47 +0200

Thought i’d make a simple Electron hello world tutorial application. Electron is a framework for building desktop apps with CSS, Javascript and HTML. The apps will be cross platform and work on Windows, MacOS and Linux distributions.

You can download this application from Github if you’d like. After this blog post was written i decided to rebrand it to the electron tutorial app because that name suits it better when adding more electron tutorials to it.

An electron app is built using the node.js framework and is brought to us by Github. Maybe you’ve already tested a few electron apps now. For example slack is a well know application built on electron. If you’d like to test one i can recommend Atom. In fact, why don’t you try this tutorial with that IDE?

Video introduction

1. Installing Node.js

First we need to install node.js. So go ahead and do that.

2. Installing electron prebuilt

Now that we have Node.js installed, let’s install electron prebuilt globally.

sudo npm install -g electron

Install electron

This makes us able to test run our electron application by running this command in our terminal. But more on this later.

electron .

2. File structure

In its most basic form an electron app needs three files. package.json, main.js, and index.html. Making the folder structure look like this:

electron-hello-world/

index.html
main.js
package.json

Create a folder and add those files and let’s walk trough them one by one.

3. package.json

Let’s add content to package.json. We need a name, a version and a main setting that points to a script that will handle the starting up of the app. If main is not present electron will look for a file called index.js.

{
  "name"    : "electron-hello-world",
  "version" : "0.1.0",
  "main"    : "main.js"
}

4. Main.js

As mentioned above the we pointed out main.js to handle the startup of our application. Lets add this content to it. This code is borrowed from electron quick start.

const electron = require('electron')
// Module to control application life.
const app = electron.app
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`)

  // Open the DevTools.
  mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  // On OS X it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (mainWindow === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

5. index.html

The index.html takes care of the gui.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Electron Hello World!</title>
  </head>
  <body>
    <h1>Electron Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

6. Running the Electron hello world app

Now let’s get back to the electron . command. That will start electron and run the app that we are currently building.

electron .

This fires up an app looking like this:

electron hello world running

As you can see we also have the chromium developer tool window opened inside our app. This is opened with this call in main.js.

mainWindow.webContents.openDevTools()

7. Read more

Next tutorial covers testing your electron app in Ubuntu. If you are not interested in testing it in Ubuntu the next tutorial after that is Electron app navigation.

Read more about electron at the official site, and check out the API.

Posted on https://www.christianengvall.se/electron-hello-world/

Record audio with Soundflower

Mon, 11 Jul 2016 12:49:47 +0200

Record audio with Soundflower on Mac. It’s free and open source. I use this as an alternative to Loopback, which is great but has a limitation to record only 20 minutes in the free version. But you can also buy it but it was to expensive in my opinion. To record audio we also use Quicktime player in this tutorial.

Installation

Download the latest release from Github which is 2.0b2 when this post is written, and run the installer.

Soundflower - installation

If you alt click on the sound icon you can see 4 new devices has been added for us to use.

Soundflower - menu

Set up audio device

Go into Audio midi setup and click on the plus sign in the bottom left corner and select Create multi output device

Audio midi setup

Now select Built in output and Soundflower (2ch). Next click on the gear in the bottom left corner and select Use this device for sound output.

Multi output device

Record with quicktime player

Start quick time player and select File -> New audio recording. Next click on the down arrow next to the record button. Then select Soundflower (2ch).

Quicktime player

Now start the audio you’d like to record and click on the record button in quick time and you are done!

Uninstall Soundflower

To uninstall Soundflower you open or download the .dmg that Soundflower came in again.

soundflower dmg

This time double click on Uninstall Soundflower.scpt and the script editor will open it. Then click on run script and enter administrator password when prompted. A reboot may be required to get rid of the audio devices after the uninstall.

Script editor

Posted on https://www.christianengvall.se/record-audio-soundflower/

Open source repositories generated during game development

Sat, 04 Jun 2016 10:37:50 +0200

Last week I released a game called Friendsheep, and open source repositories generated during game development. It’s a project I’ve been working on from 2015 until now. It is a mobile game for iOS- and Android phones. When this post is being written the game has got around 300 installs (rounded down). I got help releasing this game from Science Park here in Jönköping. Thank you very much!

Story

"A deranged professor and farmer wanted to grow his two pigs, Baconesse and Porky, larger because of his unstoppable food cravings. But in his lab, the professor accidentaly spilled the bottle of toxic waste into the pigs' food supply. The pigs mutated into Supersheeps with the amazing ability to fly. At first everything seemed alright, except for the pigs being mutated into Supersheeps. As time went on the Supersheeps needed constant feeding to stay alive and the professors food was running out. It was in this time of chaos the sheeps bond and friendship grew stronger. When the food was completely gone they decided to fly away to find food elsewhere. Now you must help them survive for as long as you can! That is where you, as a player, comes in. The two supersheeps are out hunting for superfood in the form of clovers. They can only be gathered up in the air since they are very light weight. The mission is to keep both sheeps in the air at the same time, if you miss a clover the sheep will loose energy and loose their ability to fly. The clover is also color coded so the sheep with the red cape can only eat red clovers, and the sheep with the blue cape can only eat blue clovers. They are allergic to each others clovers." Friendsheep presskit

Trailer

Open source

Although not all of the code from Friendsheep is open source, some components from the game has been released into the wild. You can check out the Object pooler and an example project (containing three tutorials now but more to come) on Github.

Object pooling

Object pooling is used to tuck away already instantiated game objects instead of destroying them.instantiating and destroying objects cost a lot of resources for the device running them, this i specially important on phones. So instead of instantiating a game object you as the object pooler to do it for you. When you are done using the object all you need to do is deactivate it. An example where this is used could be when firing bullets from a gun. When the bullet has hit its target(or not), the bullet is disabled and put into the object pool until the player fires again.

Unity examples

The unity examples repository currently contains three different examples: Saving and loading data in unity tutorial, Toggling sound on and off tutorial, DontDestroyOnLoad tutorial - Keep music playing when reloading scene.

Posted on https://www.christianengvall.se/open-source-repositories-generated-during-game-development/

Automate screenshots in mac os x with Screenbar

Tue, 17 May 2016 14:04:32 +0200

You can automate screenshots in mac os x with screenbar. It’s a menu bar application from where you can start and stop a timer that takes a screenshot on a set interval of seconds.

Update 2018

A newer version with updated GUI and functions can be found on Mac app store

Screenbar screenshot

Continuing post

I’ve written before about a terminal script that takes a screenshot every 5 seconds and saves it to your desktop. That is what Screenbar does but you get a user interface in the menu bar where you can start and stop. You can also set how many seconds the program should wait before taking the next one. I needed this program myself when taking screenshots for a game i’m working on.

Screenbar

Screenbar settings v 0.1

Installation

You can either download Screenbar from the app store or you can download the repo and build it yourself with Xcode.

Usage

To start taking a series of screenshots you click on the Screenbar icon and select Automatic Screenshot. They will we saved on your Desktop.

Screenbar automate screenshot

To stop the automatic screenshots go back to Screenbar and click Stop automatic screenshot.

Screenbar - stop automatic screenshot

Posted on https://www.christianengvall.se/automate-screenshots-mac-os-x-screenbar/

Sublime Text productivity plugin

Sat, 14 May 2016 12:01:03 +0200

Need to check your twitter feed without anyone noticing? Tell your IDE to display the tweets as a python class! Sublime Text productivity plugin shows your twitter feed inside Sublime text without having to browse twitter.com.

The Problem to be solved

This plugin started as a joke between me and a colleague. We sit in an open office at work. I’ve always had my desk in a corner before, and no one could see whats on my computer monitors. One day this changed and i got a desk in the middle of the room, with my monitors facing a way so that all prying eyes could see what i did all day. How do i check my social medias without being caught? Well… you mask the tweets as a class in your IDE of course :=)

What it does

This plugin adds a new menu called “Productivity”, and asks twitter via oauth to get your twitter home feed. Then the plugin creates a python class(that is trying to follow the PEP8 standard). This way you don’t have to open a browser and go to twitter.com.

Sublime productivity plugin

Installing and testing it

At the time of writing this post the plugin needs to be installed manually. But don’t worry, adding it to the package manager of sublime is to be done.

1. Download the repo from Github.

2. Extract the repo into the sublime plugin path of Sublime:

(OSX): Users\”Username”\Library\Application Support\Sublime Text 3\Packages
(WIN7): C:\Users\”Username”\AppData\Roaming\Sublime Text 3\Packages

3. This step will be unnecessary in the future, but for now you need to create a twitter app.

Open up the the file \Sublime Text 3\Packages\Productivity\twitterapicall.py and add the consumer key, consumer secret, access token and access token secret to the lines 8 - 11.

4. Currently there is a bug that stops the plugin from running the first time starting Sublime. But the work around this is to open \Sublime Text 3\Packages\Productivity\productivity.py and just resave it. This should be working in the latest version now.

Now you are done and can use the menu Productivity -> Twitter

Contributing

This plugin is open sourced at Github and i’ve got a few issues that needs to be fixed. You are very welcome to fork it and help me with them. Or you are just as welcome to add your own ideas to the plugin.

I’d like to thank Sam Mello for posting this tutorial and Will Bond for this one to help me get started on creating this plugin.

Screenshot from the plugin

Sublime productivity screenshot

Posted on https://www.christianengvall.se/sublime-text-productivity-plugin/

Adding Flattr button to markdown

Sat, 30 Apr 2016 11:30:24 +0200

You can add Flattr button to markdown on your github repo’s (or any other service that uses markdown). Here is how.

Form for creating Flattr markdown

I found this service created by Christopher Käck. You enter your username, url to the repo, and set a project name. Which then gives you markdown looking like this:

Support this open source repo by using
[![Flattr this git repo](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=ChristianEngvall&url=https://github.com/crilleengvall/GitUndo&title=GitUndo&language=&tags=github&category=software)

And this will give you a Flattr button looking like this:

Readme - Adding Flattr button to markdown

I myself has started using flattr, if you want to support the posts shared on this blog you can use the Flattr button at the top of this post.

Posted on https://www.christianengvall.se/adding-flattr-button-markdown/

Git undo

Thu, 28 Apr 2016 19:34:20 +0200

Git undo is an extension for git that adds convenient,and easy to remember, commands to undo commits, applied stashes and pushed merges.

Currently there are three commands you can run to undo things. git undo commit, git undo stash-apply and git undo pushed-merge <merge-commit-hash>.

Installation

The installations is quite simple right now, download the project and copy git-undo to /usr/local/bin/ if you are running Linux or mac.

On Windows you put the file into C:\Program Files\Git\mingw64\libexec\git-core or C:\Program Files (x86)\Git\mingw64\libexec\git-core depending on where git is installed.

Commands

git undo commit

the undo commit command undos the latest commit made and stages the changes from that commit, so you will not lose the changes, but can for example add files you forgot before committing. You can also do changes before committing again. To read more about how this command works you can read this post.

git undo stash-apply

the undo stash-apply, does what it says, if you have applied a stash on for example the wrong branch you can use this command to undo that, this command comes from this blog post where you can read more.

git undo pushed-merge <merge-commit-hash>

the undo pushed-merge helps you undo a git merge that is already pushed to the origin. run a git log to get the merge commit hash. Read more about how this works.

Contribute

This is an open source project, if you would like to add some undo method you can fork the project and send a pull request!

Posted on https://www.christianengvall.se/git-undo/

Encrypt emails that wordpress send you

Thu, 21 Apr 2016 12:53:10 +0200

If you use Wordpress and forms, or any other plugin that sends you an email, it could be a good idea to encrypt emails that Wordpress send you. For example Google scans through your inbox looking for words they can use to show ads that is more interesting to you. Or if someone gets hold of your password and can get information on your site via your email. Encrypting the emails will make it harder to extract information from them. And if those arguments are not enough here is another one: it’s fun to work with encryption.

This tutorial expect you to have set up your own private and public keys for email encryption already, if not this will take you around 5 minutes if you follow any of these guides: Encrypt emails for mac, windows and linux.

Install plugin

As Wordpress has such a nice community that provides so many plugins already, there was already a plugin for this as well. So no need to do any coding. Meitar Moscovitz provides us with a plugin called WP PGP Encrypted Emails. So go ahead and install this plugin on your Wordpress site.

Generate PGP Signing key

After activating the plugin a notification shows up that wants you to Generate PGP Signing key. Click that button. That will create a private and public key that is used to encrypt the mail.

Generate PGP signing key

Adding your own public key

After you click Generate PGP signing key-button you will be taken to wp-admin/options-general.php. There you must add your own public key (the one that you generated when following the tutorials above, before installing the plugin) to the field Admin Email PGP Public Key.

Subjects are not encrypted in emails, therefore you have the option to empty them before sending by checking: Always empty subject lines for PGP-encrypted emails

Settings - encrypt mail

At the time this post is being written this plugin does not support attachments being encrypted. You can either wait for it to happen or code it yourself since the plugin is open sourced. Also, i suggest you read a bit on Meitar Moscovitz, he sounds like a very interesting developer.

Posted on https://www.christianengvall.se/encrypt-emails-that-wordpress-send-you/

Upload large file to wordpress

Sat, 13 Feb 2016 12:57:13 +0100

If you have ever tried to upload large file to wordpress and got the HTTP error when using the the multi-file uploader, Or when using the browser’s built-in file uploader and got a ERR_CONNECTION_RESET error message, you can solve the problem with a plugin. This tutorial requires that you have FTP access to the wordpress installation.

This is more of a quick fix than a solution. But it will get the problem out of the way for those single large files one needs to be uploaded.

HTTP Error

ERR_CONNECTION_RESET

How to upload a large file to Wordpress

1. Start of by installing the Add from server plugin.

"The heart of a CMS is the ability to upload and insert content, WordPress does a fantastic job at this, unfortunately, some web hosts have limited servers, or users simply do not have the ability to upload large files through their web browser. Add From Server is designed to help ease this pain, You can upload a bunch of files via FTP (Or your favourite transmission method) and simply import those files from the webserver directly into WordPress."

2. Upload your large file via FTP to your Wordpress upload folder. If you haven’t changed this it’s located in wp-content/uploads.

3. Now go to Media->Add from server and browse to the path of the file you uploaded.

Media add from server

4. Click on the checkbox of the file and click import.

Click import

5. Now it’s done!

Done

Posted on https://www.christianengvall.se/uploading-large-files-to-wordpress/

Wordpress plugins

Wed, 27 Jan 2016 10:02:18 +0100

I finally reached that point where I was satisfied with the development of Honkbark Studios new website. So i released it last week. I wanted a site that was playful with a lot of colors but also had some features that will lead the visitor to install Friendsheep or any other game that i will release after.

A few years ago when I released a new Wordpress-site I posted a list of different plugins to add after a wordpress install (It’s written i Swedish so you english speaking people won’t have to read the horrorful piece). It was a really bad idea to do that, because when i read it now i shake my head and think “I would never install these plugins today”… But I am a man of many talents, and one of them is to learn from my mistakes… so this time i’ll do the same mistake but i’ll fix it by using the duct tape equivalent for the written word and advertising; the asterisk. It allows you to write anything you want and bail you out of anything at all at the end of the post, so you don’t have to stand by your words. Great huh?! :)

Four plugins to add after a wordpress installation *

WP Code Highlight.js
This plugin makes code pretty readable using highlight.js. Just put your code inside a <pre> and <code> tag and the plugin fixes the rest.

WP Smush
Smush all the unnecesarry shit of the pictures you upload to your Wordpress installation. And it does it automatically after upload. Saving space and making your images load faster.

WP Super Cache
This plugin caches your site and saves static html files which it serves instead of going through the whole Wordpress lifecycle to get the markup.

Yoast SEO
Helps with on-page SEO. Also tells you how to write your blogpost to get the best possible rankings for specific focus keywords.

* = If this post is more than a day old i probably can’t stand by these plugin suggestions.

Posted on https://www.christianengvall.se/wordpress-plugins/

Setup an Apache Cordova project

Tue, 12 Jan 2016 18:39:39 +0100

To setup an Apache Cordova project you need NPM. When you’ve done that you open a terminal.

1. Installing Cordova

sudo npm install -g cordova

2. Create a project

When this is done it’s time to create a project. This is done with the create command. Run the following line but replace CordovaAndGoogleMaps with the name of your project.

cordova create CordovaAndGoogleMaps

3. Add platform

Next it’s time to add platform. At the time when this is being written you can choose from these available platforms: amazon-fireos, android, blackberry10, browser, firefoxos, ios, osx, webos

Lets go for the ios platform, but first go in to the directory of your new project

cd CordovaAndGoogleMaps
cordova platform add ios

4. Running the app

cordova run ios

This will start the iOS simulator and fire up your app, looking like this:

Setup an apache cordova project - first run

Posted on https://www.christianengvall.se/setup-an-apache-cordova-project/

Disabling Sitecore search index update

Mon, 11 Jan 2016 10:00:11 +0100

Disabling Sitecore search index update during package install will speed up the installation, making it noticable quicker for large packages. We found a good blog post about this by Alex Shyba. During the implementation of that solution we found an enhancement to do.

Instead of enabling the indexing again after the user clicks “close” in the installation wizard this tutorial will re-enable it directly after the installation is finished (before the user clicks close). This will avoid having the indexing disabled if you open another window or browse away from the sitecore gui directly after installing and not clicking close.

This code is tested in Sitecore 8.

1. Custom packager class

Add a new class that will handle enable and disable indexing and make it look like this (code borrowed from Alex Shyba)

namespace SCUSAINC.Custom.Packager  
{
    using System;
    using Sitecore.Reflection;
    using Sitecore.Web.UI.HtmlControls;
    using Sitecore.Web.UI.Sheer;
    using Sitecore.Shell.Applications.Install.Dialogs.InstallPackage;

    public class CustomInstallPackageForm : InstallPackageForm
    {
        [HandleMessage("installer:setTaskId")]
        private void OnSetTaskId(Message message)
        {
            var obj = this as InstallPackageForm;
            ReflectionUtil.CallMethod(typeof(InstallPackageForm), obj, "SetTaskID", true, true, new object[] { message });
        }

        [HandleMessage("installer:commitingFiles")]
        private void OnCommittingFiles(Message message)
        {
            var obj = this as InstallPackageForm;
            ReflectionUtil.CallMethod(typeof(InstallPackageForm), obj, "OnCommittingFiles", true, true, new object[] { message });
        }

        protected Checkbox DisableIndexing;

        protected override void OnLoad(EventArgs e)
        {
            DisableIndexing.Checked = false;
            base.OnLoad(e);
        }

        protected override void OnNext(object sender, EventArgs formEventArgs)
        {
            base.OnNext(sender, formEventArgs);
            if (Active == "Installing" && DisableIndexing.Checked)
            {
                Sitecore.Configuration.Settings.Indexing.Enabled = false;
            }
        }

        protected override void EndWizard()
        {
            base.EndWizard();
            if (DisableIndexing.Checked)
            {
                DisableIndexing.Checked = false;
                Sitecore.Configuration.Settings.Indexing.Enabled = true;
            }
        }
    }
}

2. Copy install package wizard

Copy /sitecore/shell/Applications/Install/Dialogs/Install package/Install Package.xml to /sitecore/shell/override Open that file and edit the codebeside attribute to this:

<WizardForm Application="Tools/Installer/InstallationWizard" CodeBeside="SCUSAINC.Custom.Packager.CustomInstallPackageForm,SCUSAINC.Custom ">

Also add a checkbox to that xml markup between GridPanel and WizardFormIndent

...
</GridPanel>

<Checkbox ID="DisableIndexing" Header="Disable search index update during the install" Checked="True" />

</WizardFormIndent>
...

3. Enhancing functionality

The code above is, as said before, borrowed from Alex. Now to enhance this code to re-enable the indexing directly after package is installed but before clicking the close button. Open web.config and search for packageinstall:ended and edit it to look like this:

 <event name="packageinstall:ended">
     <handler type="SCUSAINC.Custom.Packager.CustomInstallPackageForm, Website" method="OnPackageInstallEnded" />
 </event>

Now go back to the CustomInstallPackageForm and lets edit it to look like this instead:

namespace SCUSAINC.Custom.Packager  
{
    using System;
    using Sitecore.Reflection;
    using Sitecore.Web.UI.HtmlControls;
    using Sitecore.Web.UI.Sheer;
    using Sitecore.Shell.Applications.Install.Dialogs.InstallPackage;

    public class CustomInstallPackageForm : InstallPackageForm
    {
        private static Checkbox IndexingIsDisabledCheckbox;

        [HandleMessage("installer:setTaskId")]
        private void OnSetTaskId(Message message)
        {
            var obj = this as InstallPackageForm;
            ReflectionUtil.CallMethod(typeof(InstallPackageForm), obj, "SetTaskID", true, true, new object[] { message });
        }

        [HandleMessage("installer:commitingFiles")]
        private void OnCommittingFiles(Message message)
        {
            var obj = this as InstallPackageForm;
            ReflectionUtil.CallMethod(typeof(InstallPackageForm), obj, "OnCommittingFiles", true, true, new object[] { message });
        }

        protected Checkbox DisableIndexing
        {
            get { return IndexingIsDisabledCheckbox; }
            set { IndexingIsDisabledCheckbox = value; }
        }

        protected override void OnLoad(EventArgs e)
        {
            DisableIndexing.Checked = false;
            base.OnLoad(e);
        }

        protected override void OnNext(object sender, EventArgs formEventArgs)
        {
            base.OnNext(sender, formEventArgs);
            if (Active == "Installing" && DisableIndexing.Checked)
            {
                Sitecore.Configuration.Settings.Indexing.Enabled = false;
            }
        }

        protected void OnPackageInstallEnded(object sender, EventArgs args)
        {
            if (DisableIndexing.Checked)
            {
                DisableIndexing.Checked = false;
                Sitecore.Configuration.Settings.Indexing.Enabled = true;
            }
        }
    }
}

The EndWizard() method and contents is removed and replaced by another method called OnPackageInstallEnded(). This method is referenced from web.config. And as said before, it’s a smaller risk that the indexing will be left disabled with this approach. The checkbox needs to be static as well, because the wizard and the callback is run by different threads.

 private static Checkbox IndexingIsDisabledCheckbox;

  protected Checkbox DisableIndexing
  {
       get { return IndexingIsDisabledCheckbox; }
       set { IndexingIsDisabledCheckbox = value; }
  }

Something to think about is that both these solutions might enable indexing for another user if more than one is installing packages at the same time. Thanks to Peter Grace for the ideas!

Posted on https://www.christianengvall.se/disabling-sitecore-search-index-update-during-package-install/

Dribbble debut - Honkbark studios logo

Mon, 04 Jan 2016 10:46:38 +0100

While waiting for the santa to come i took the time to update the Honkbark Studios logo and make my Dribbble debut.

Why the monkey?

The name Honkbark Studios comes from the sound of the Kipunji monkey. It’s a species that was first discovered in 2003. And how cool isn’t it that after so long time on this earth we still discover new species? Inspired by this i needed to discover something new myself so i went from playing games to create my own. With this in mind i created the monkey with a pair of gamepad shades. It turned out pretty nice i think!

Tools used

This logo was made using Pixelmator. It’s an alternative to Photoshop for people like me who doesn’t have that kind of budget and does not want to borrow it from the internet with a pirate bay license :) . At the time of writing this blog post Pixelmator costs 319 SEK on the mac app store.

Upcoming Dribbble shots

I will fill the dribbble account with some graphics from the upcoming game Friendsheep. And hopefully from the upcoming games.

Thanks to Urban Sandén for the invite to Dribbble!

Posted on https://www.christianengvall.se/dribbble-debut/

Friendsheep

Mon, 21 Dec 2015 08:07:21 +0100

As i’ve mentioned before , I’ve picked up game development. But i haven’t told you what i’m working on. It’s a game called Friendsheep. The game will be released on iOS and Android phones in 2016. The game is my first game for the mobile market and I’ve put a lot of effort into it.

The plot

It’s about to Sheeps, supersheeps, who are friends. They need to eat something otherwise they will starve. That’s your mission as a player to make sure they can continue flying. But it’s not as easy as it sounds. You have to use both you brain halves to get somewhere in this game as mutlitasking is a key thing to be able to handle.

Here is a screenshot from the alpha 7-version:

Friendsheep alpha 7

Beta testing

Right now it’s being beta tested by around 30 players. It’s about 50% testers on each platform. And this has been a great way for me to get input on the game. When building a game you have a different perspective than your players. They also see a lot more bugs and have a lot of comments on how to improve the game. When i released it for beta i thought, wow, i’m getting very close to finishing this game. Now two weeks after i think i’ve got a few more fixes to do before i release. About 35 new issues were added to the issue tracker of the game. Which is awesome and means I will release a better product.

Open source

Working with this game under my own company Honkbark Studios is something that gives me freedom to release code as open source. During the development of Friendsheep i’ve written tutorials and released example code for them, and also library that pools objects so they can be reused without being instantiated again, and both are released on github.

Next post about Friendsheep is hopefully about the game being released! Stay tuned at honkbarkstudios.com for news and updates.

Posted on https://www.christianengvall.se/friendsheep/

Using git commit amend

Mon, 14 Dec 2015 10:03:49 +0100

By using git commit amend you can add files if you forgot to do that to your most recent commit. I’ve written about undoing a commit before, and also about undoing pushed commits. which you also could use in this scenario. But this is a bit faster.

Say you’ve made changes in asdf.txt, and added a new file called fdsa.txt with very important stuff in it. You are very happy with the results and commit it.

git commit -a -m 'Doing changes'

Exactly after hitting enter you realized you forgot to run git add – . to begin to track and stage fdsa.txt This is where amend comes in. But first run add.

git add -- .

to add this file to the commit you just recently made all you got to do is run this command:

git commit --amend

Git commit official docs

This trick amends the new commit to the latest one made. Read more about the git commit command at the official Git site.

Posted on https://www.christianengvall.se/using-git-commit-amend/

Commit changes to new branch with git

Mon, 07 Dec 2015 10:02:07 +0100

To commit changes to new branch with git you can use the following three steps:

Create a new branch

 git checkout -b mynewbranchname

This will leave your current branch unedited, create a new branch called mynewbranchname, and you still have your uncommitted changes. It’s the parameter -b that tells git to create a new branch with a selected name.

Add files

 git add -- .

This adds your new files for git to track in the new branch.

Commit changes

git commit -a -m 'Adding my files'

This commits the files, and you’re done! The parameter -a tells git to automatically stage files that have been modified and/or deleted. and -m tells git that you provide a commit message.

Serialize and deserialize dictionary

Mon, 30 Nov 2015 10:50:42 +0100

A few years back i needed to serialize and deserialize a dictionary. The solution turned out to be Adar Wesleys SerializeableDictionary. I can’t find the source blog post by Adar Wesley anymore but only the classes that you need to import into your project. If those files has been deleted as well i have a backup of those files here: serializabledictionary. This is an example on how to do it with C#.

Serialize and deserialize dictionary example

Once the files are included into your project you can use this example to serialize and deserialize a dictionary:

/// <summary>
/// Loads a Serializable dictionary which holds a saved values
/// </summary>
private void LoadExistingFile()
{
    SerializableDictionary<string, int> data = new SerializableDictionary<string, int>();
    if (File.Exists("file.xml"))
    {
        XmlSerializer s = new XmlSerializer(typeof(SerializableDictionary<string, int>));
        using (StreamReader sr = new StreamReader("file.xml"))
        {
            data = s.Deserialize(sr) as SerializableDictionary<string, int>;
        }
    }
}
/// <summary>
/// Saves existing KeyValuePairs to disc
/// </summary>
private void SaveDictionaryToDisc()
{
    SerializableDictionary<string, int> data = new SerializableDictionary<string, int>();
    XmlSerializer s = new XmlSerializer(typeof(SerializableDictionary<string, int>));
    using (StreamWriter sw = new StreamWriter("file.xml"))
    {
        s.Serialize(sw, data);
    }
}

This post is a translation of a blog post that i wrote in Swedish a long time ago. I finally got my thumb out and translated it to English.

Posted on https://www.christianengvall.se/serialize-and-deserialize-dictionary/

Schedule script in OSX

Thu, 26 Nov 2015 10:01:53 +0100

To schedule script in OSX to run every now and then you can use launchd. Add a scheduled job by saving a .plist in folder **/Users//Library/LaunchAgents**. This example will run a php script every 10 seconds.

1. Example .plist

This example is saved as se.christianengvall.dostuff.plist in the folder mentioned above.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
   <dict>
       <key>Label</key>
       <string>se.christianengvall.dostuff</string>
       <key>ProgramArguments</key>
       <array>
           <string>/usr/bin/php</string>
           <string>/Users/<my-user>/Sites/dostuff.php</string>
       </array>
       <key>StartInterval</key>
       <integer>10</integer>
   </dict>
</plist>

Set the label value to the same name as the file. In ProgramArguments we set the path to php and the path to the script we want to run. The StartInterval sets how often to run the script, set in seconds.

2. The php script

<?php
 syslog(LOG_WARNING, "printing value to log");

Nothing much going on here, just add a message to the system log.

3. Schedule script in OSX

Now to schedule the script run this in a terminal:

launchctl load  /Users/<my-user>/Library/LaunchAgents/se.christianengvall.dostuff.plist

Now start the Console utility and watch your script print: “printing value to log” every ten seconds.

4. Stopping the script

launchctl unload  /Users/<my-user>/Library/LaunchAgents/se.christianengvall.dostuff.plist

Posted on https://www.christianengvall.se/schedule-script-in-osx/

Untrack files in local repository but keep at origin with git

Mon, 23 Nov 2015 12:27:49 +0100

To untrack files in local repository but keep at origin, as our scenario needed; to keep folder or files in git origin repository but untrack any local changes made in this folder, You can use “git update-index –assume-unchanged”. This will enable new developers to get all the files in the repository when cloning. The application can make all the changes it wants in the specified folder, but locally they won’t be committed an pushed to the origin. The only minor problem with this solution is that you have to do this on every new machine that clones the repo. But something positive that comes out of this is that when you need to update files in the untracked folder you can.

1. Preparing the repo

Make sure you add the folder with all the containing files(that you later want to untrack) to the repo. And then commit and push it to your origin. In this example my folder is named Library.

git add -- .
git commit -a -m 'adding library folder'
git push

2. Add this folder to .gitignore

/library/*

And then commit this update. If you need more information about how to use the .gitignore file you can look at git online documentation.

At this stage the folder library and its contents are still tracked by git. Any changes to a file in this folder will therefor be marked as changed still. Lets take care of that next.

3. Untrack files in local repository but keep at origin

Now run the following command to untrack the library folder and its contents:

git update-index --assume-unchanged library/*

Make a change to a file in this folder and git will assume it has not been changed, so you won’t commit anything in this folder.

4. Undo this change

Say you need to update a file in the library folder after a while. Then you need only one command to start track this folder again:

git update-index --no-assume-unchanged library/*

5. Make alias of these commands

If you like you can create aliases for these commands to something simpler:

git config --global alias.assume-unchanged 'update-index --assume-unchanged'
git config --global alias.assume-changed 'update-index --no-assume-unchanged'

This makes you able to run:

git assume-unchanged library/*

and:

git assume-changed library/*

Posted on https://www.christianengvall.se/untrack-files-local-repository-keep-origin-git/

Validating C-sharp made JWT signature with PHP

Mon, 16 Nov 2015 09:06:49 +0100

When validating C-Sharp made JWT signature with PHP, or the other way around, you may run into some problems. What can happen is that the hash will be different but the data still won’t be tampered with. I noticed this when sending a JWT from a server using C# to a server using PHP. This code example will create the same signature with both PHP and C#.

C#:

public static string CreateToken(string sharedSecret) {
    var encodedHeader = Base64Encode("{\"typ\":\"JWT\",\"alg\":\"HS256\"}");
    var encodedClaims = Base64Encode({"score": "12","name": "Crille"});
    var signingInput = encodedHeader + "." + encodedClaims;
    var token = signingInput + "." + Base64Encode(SHA256Sum(signingInput, sharedSecret));
    return token;
}

This is what the method SHA256Sum looks like:

private static string SHA256Sum(string signingInput, string sharedSecret) {
    var encoding = new System.Text.UTF8Encoding();
    var keyByte = encoding.GetBytes(sharedSecret);
    using (var hmacsha256 = new HMACSHA256(keyByte))
    {
        hmacsha256.ComputeHash(encoding.GetBytes(signingInput));
        return ByteToString(hmacsha256.Hash);
    }
}

Base64 encode method looks like this:

private static string Base64Decode(string encodedString) {
    var textBytes = System.Convert.FromBase64String(encodedString);
    return System.Text.Encoding.UTF8.GetString(textBytes);
}

Base64 decode method:

private static string Base64Encode(string plainText) {
    var plainTextBytes = System.Text.Encoding.UTF8.GetBytes(plainText);
    return System.Convert.ToBase64String(plainTextBytes);
}

And a method to create a byte array to a string

private static string ByteToString(byte[] buff)
{
    string sbinary = "";
    for (int i = 0; i < buff.Length; i++)
        sbinary += buff[i].ToString("X2");
    return sbinary;
}

PHP:

This is a class that will encode, decode and validate a JWT-token and will return the same signature as the C# methods. If the data has not be tampered with that is.

<?php

class JWT {

    private $shared_secret = "thesharedsecret";

    function encode($payload) {
        $encoded_header = base64_encode('{"alg": "HS256","typ": "JWT"}');
        $encoded_payload = base64_encode($payload);
        $header_and_payload_combined = $encoded_header . '.' . $encoded_payload;
        $hash = $this->create_signature($header_and_payload_combined);
        $signature = base64_encode($hash);
        $jwt_token = $header_and_payload_combined . '.' . $signature;
        return $jwt_token;
    }

    function is_valid($token) {
        $is_valid = false;
        $token_parts = explode('.', $token);
        $header_and_payload_combined = $token_parts[0] . '.' . $token_parts[1];
        $recieved_signature = $token_parts[2];
        $new_signature = base64_encode($this->create_signature($header_and_payload_combined));
        if($new_signature == $recieved_signature) {
            $is_valid = true;
        }
        return $is_valid;
    }

    private function create_signature($message) {
        $hash = hash_hmac('sha256', $message, $this->shared_secret);
        $hash = strtoupper($hash);
        return $hash;
    }
}

Posted on https://www.christianengvall.se/validating-c-sharp-made-jwt-signature-with-php/

JSON web token - JWT

Fri, 13 Nov 2015 10:10:44 +0100

When sending data from an application to a backend server you can use json web token (JWT) to make sure the data has not been tampered with. The token is compact making it quick to send to the backend.

Here is an example of a token:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

A token is separated into three parts; Header, payload and signature. And, as you can see in the example above, these parts are separated by a “.” All three parts are base64 encoded. Let’s go trough what the different parts contains.

Part 1 - Introduction

The header mostly consists of two parts alg, and typ.

{
  "alg": "HS256",
  "typ": "JWT"
}

Alg defines what hashing algoritm has been used to create the signature(which we will look at soon). And typ defines type of token, which is JWT.

Payload

The payload contains the data that you want to send to your backend. Example:

{
  "score": "12",
  "name": "Crille"
}

Signature

The signature consists of a base64 encoded HS256-hash built on the first two parts of the token. And this is signed with a shared secret that the app and the backend has.

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)

Part 2 - Example: Creating a JWT with PHP

<?php

$encoded_header = base64_encode('{"alg": "HS256","typ": "JWT"}');
$encoded_payload = base64_encode('{"score": "12","name": "Crille"}');

$header_and_payload_combined = $encoded_header . '.' . $encoded_payload;

$secret_key = 'thisismysecretkey';

$signature = base64_encode(hash_hmac('sha256', $header_and_payload_combined, $secret_key, true));

$jwt_token = $header_and_payload_combined . '.' . $signature;

echo $jwt_token;

Line 3: This line base64 encodes the header json.

Line 4: This line base64 encodes the payload json.

Line 6: Here the the base64 strings are concatenated to one that looks like this:

eyJhbGciOiAiSFMyNTYiLCJ0eXAiOiAiSldUIn0=.eyJzY29yZSI6ICIxMiIsIm5hbWUiOiAiQ3JpbGxlIn0=

Line 10: Here the signature is created. It creates a hash with the s256 algoritm with the secret key that you can see on line 8. This is string is also base64 encoded.

Line 12: This line concatenates the signature with the rest of the values, and creating a jwt token looking like this:

eyJhbGciOiAiSFMyNTYiLCJ0eXAiOiAiSldUIn0=.eyJzY29yZSI6ICIxMiIsIm5hbWUiOiAiQ3JpbGxlIn0=.Or5OIu2KjpE6/rQeg0yDyAjBX7KGlHqRJBBTZYgi3I0=

Part 3: Example: Verifying signature

This code checks so that the signature that was received checks out.

#recieved_jwt would in real life be populated from a $_POST['values'] but for this example this will work
$recieved_jwt = 'eyJhbGciOiAiSFMyNTYiLCJ0eXAiOiAiSldUIn0=.eyJzY29yZSI6ICIxMiIsIm5hbWUiOiAiQ3JpbGxlIn0=.Or5OIu2KjpE6/rQeg0yDyAjBX7KGlHqRJBBTZYgi3I0=';
$secret_key = 'thisismysecretkey';

$jwt_values = explode('.', $recieved_jwt);

$recieved_signature = $jwt_values[2];
$recieved_header_and_payload = $jwt_values[0] . '.' . $jwt_values[1];

$what_signature_should_be = base64_encode(hash_hmac('sha256', $recieved_header_and_payload, $secret_key, true));

if($what_signature_should_be == $recieved_signature) {
	// signature is ok, the payload has not been tampered with
}

Line 2: $recieved_jwt contains the jwt. This would be received from a $_POST value in real life.

Line 5: $jwt_values is an array with the jwt values in it.

Line 7: $recieved_signature contains the signature from the original jwt

Line 8: we separate the header and payload an concatenates them.

Line 10: We create a new signature with the new header and payload.

Line 12: Check if the signature we created is the same as the one we received. If it is the data has not been tampered with.

Part 4 - A quick checklist

Base64 encode a header JSON Object.
Base64 encode a payload JSON Object.
Concatenate the header and payload strings with “.” separator
Compute the signature of the header and payload.
Base64 encode the signature.
Concatenate the signature to the header and payload string.

Conclusion

A json web token is quite easy to create yourself. And it’s easy to validate the signature as well. If the shared key (or $secret_key as its called above) gets in the wrong hands you can not trust the signatures anymore and need to change it.

Posted on https://www.christianengvall.se/jwt-json-web-token/

Automate screenshots in mac os x

Sat, 24 Oct 2015 13:19:17 +0200

Update

You can do this with Screenbar. It gives you a user interface instead of running it in the terminal.

Automate screenshots with shell script

I needed to automate screenshots in mac os x, but i needed to use both my hands to play a game at the same time as i was taking screenshots. So i found this gem at TrickyWays. The following script will take a screenshot with a unique name and save it on your desktop. Just copy and paste it into a terminal window:

while [ 1 ];do vardate=$(date +%d\-%m\-%Y\_%H.%M.%S); screencapture -t jpg -x ~/Desktop/$vardate.jpg; sleep 5; done

Just edit the number 5 to a interval in seconds that fit your needs.

Automate screenshots in mac os x terminal

Posted on https://www.christianengvall.se/automate-screenshots-in-mac-os-x/

Game development

Sun, 17 May 2015 21:28:55 +0200

The last months i’ve picked up game development i Unity. Every week on Fridays I have a day off to work with this project. That project also comes with a new site and developer blog.

Honkbark studios

If you are interested in following that progress you can check it out at Honkbark studios

Posted on https://www.christianengvall.se/game-development/

Problem when downloading pdf from Sitecore site

Wed, 01 Apr 2015 11:03:17 +0200

I had a Mime-type problem when downloading pdf from Sitecore site the following error showed up in the log:

8368 10:31:54 ERROR Application error.
Exception: System.ArgumentOutOfRangeException
Message: The UTC time represented when the offset is applied must be between year 0 and 10,000.
Parameter name: offset
Source: mscorlib
   at System.DateTimeOffset..ctor(DateTime dateTime)
   at Sitecore.Resources.Media.Streaming.Preconditions.IfRangePrecondition.CheckRequestPreconditionAndSetResponseStatus(HttpContext context)
   at Sitecore.Resources.Media.Streaming.RangeRetrievalResponse.ExecuteRequest(HttpContext context)
   at Sitecore.Resources.Media.MediaRequestHandler.DoProcessRequest(HttpContext context, MediaRequest request, Media media)
   at Sitecore.Resources.Media.MediaRequestHandler.DoProcessRequest(HttpContext context)
   at Sitecore.Resources.Media.MediaRequestHandler.ProcessRequest(HttpContext context)
   at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

Sitecore MimeConfig

This turned out to be a problem with MIME-types, and to solve it download the MimeConfig and add a reference to it in web.config as described in this Sitecore documentation.

Open the file and make sure that a mime entry for PDF exists and make sure it is not commented out.

Posted on https://www.christianengvall.se/problem-when-downloading-pdf-from-sitecore-site/

git rename branch

Wed, 21 May 2014 12:16:21 +0200

This operation is pretty simple, all you need to use is the branch commando with a -m flag to git rename branch:

git branch -m <oldbranchname> <newbranchname>

example:
git branch -m feature/humanreadable feature/translation

git rename branch

Or if you already checked out the branch you want to rename all you need to do is:

git branch -m <newbranchname>

example:
git branch -m feature/translation

Read more at the git branch documentation

Posted on https://www.christianengvall.se/git-rename-branch/

Undo a pushed merge with git

Tue, 13 May 2014 22:34:58 +0200

How to undo a merge that has been pushed to origin? Use Revert. After merging my develop branch into the master branch i realized i didn’t want to release the code i just merged. But it was already pushed to origin. What do do?

Update: I’ve made an easy extension to git that makes this command more easy to remember, i call it gitUndo. With that extension all you need run is: git undo pushed-merge <merge-commit-hash>.

first checkout the master branch:

git checkout master

then run a git log and get the id of the merge commit.

git log

then revert to that commit:

git revert -m 1 <merge-commit>

With ‘-m 1’ we tell git to revert to the first parent of the mergecommit on the master branch. -m 2 would specify to revert to the first parent on the develop branch where the merge came from initially.

Now commit the revert and push changes to the remote repo and you are done.

Getting back the reverted changes

This changes the data to look like before the merge, but not the history. So it’s not exactly like an undo. If we would merge develop into master again the changes we reverted in master wont be applied. So if we would like these changes back again we could revert our first revert(!).

git revert <commit-of-first-revert>

To get more information about this check out the git revert documentation or read Linus Torvalds explanation of this behavior

Posted on https://www.christianengvall.se/undo-pushed-merge-git/

Picking up game development

Sat, 15 Feb 2014 12:31:36 +0100

A while back me and some friends figured we should make a game now when indie games is such a hot topic and we have a few game ideas of our own that we would like to implement. To do this we need to learn some new technologies, for example 3D modeling and the engine that we have chosen because it allows us to publish games on multiple platforms, and that is unity. Hopefully this post is just the start of many ones covering the progress of making an indie game.

Tutorials

So this first post about game development i thought i’d share some nice tutorials that makes you get a hang of how unity works quite fast. They also bring a feeling of curiosity to dig deeper into the unity api.

Make a game
Create a survival game
How to make a 2D game

Thanks to Asbjørn Thirslund at brackeys for releasing these videos for free.

But unities own tutorials is also a good place to start.

I would be happy if anyone would like to share some other great resources to learn unity, if so, why not add a link to them in the comments!

Posted on https://www.christianengvall.se/picking-up-game-development/

Error when installing cocoapods on mavericks

Sat, 30 Nov 2013 15:13:00 +0100

When following the instructions to install cocoapods the following error occured:

Building native extensions. This could take a while…

ERROR: Error installing cocoapods: ERROR: Failed to build gem native extension.

Command line tools

The solution was to install the command line tools with this command:

xcode-select –install

and then again run: sudo gem install cocoapods

Posted on https://www.christianengvall.se/error-when-installing-cocoapods-on-mavericks/

Undo git stash apply

Sat, 31 Aug 2013 10:03:18 +0200

Sometimes we may need to undo a git stash apply, maybe we didn’t mean to apply it at all or we just applied it to the wrong branch.

Update: I’ve made an easy extension to git that makes this command more easy to remember, i call it gitUndo. With that extension all you need run is: git undo stash-apply.

Git stash commands

To un-apply the most recent stash this command is used:

git stash show -p | git apply -R

now to add this as an alias we run this command in the terminal:

git config --global alias.stash-unapply '!git stash show -p | git apply -R'

Now when un-applying is needed we will be able to run:

git stash-unapply

Posted on https://www.christianengvall.se/undo-git-stash-apply/

Aliasing git reset --soft HEAD^ as git undo

Mon, 24 Jun 2013 22:19:31 +0200

I keep forgetting how to undo a commit with git because i very rarely need it. But i figured if i aliased it to git undo i wouldn’t need to google the command every time. Now how does one do that? It turned out to be pretty simple actually.

Update: I’ve made an easy extension to git that makes this command more easy to remember, i call it gitUndo. With that extension all you need run is: git undo commit.

Git reset

The command to undo a commit and reset to the commit before HEAD and keeping the changes is:

git reset --soft HEAD^

And to add this as an alias to the .gitconfig file use this command:

git config --global alias.undo 'reset --soft HEAD^'

Now when running git undo in the terminal your commit will be reset.

Posted on https://www.christianengvall.se/aliasing-git-reset-soft-head-as-git-undo/

Xpath and default namespaced xml

Thu, 30 May 2013 07:38:32 +0200

When using a default namespaced xml an xpath-expression need to look a bit different than when the xml uses namespace prefixes. Lets have a look at this namespaced XML:

<?xml version="1.0"?>
<bk:bookstore xmlns:bk="urn:xmlns:25hoursaday-com:bookstore">
 <bk:book>
    <bk:title>Lord of the Rings</bk:title>
    <bk:author>J.R.R. Tolkien</bk:author>
 </bk:book>
</bk:bookstore>

The xpath used to get the title of the book would look like: /bk:bookstore/bk:book/bk:title

Now lets look at this default namespaced XML, it has no prefixes so we need to take another aproach to get the title of the book this time:

<?xml version="1.0"?>
<bookstore xmlns="urn:xmlns:25hoursaday-com:bookstore">
 <book>
    <title>Lord of the Rings</title>
    <author>J.R.R. Tolkien</author>
 </book>
</bookstore>

This time the xpath would look like: _/[local-name()=’bookstore’]/[local-name()=’book’]/*[local-name()=’title’] _The xpath matches any namespace and looks for the local name bookstore and after that book and title.

PHP Example

The following code shows how to use it, and the code including the xml files can be downloaded from github.

<?php
  $xml = simplexml_load_file('namespaced.xml');
	$result = $xml->xpath('/bk:bookstore/bk:book/bk:title');
	echo $result[0];
	echo "<br />";
	$xml = simplexml_load_file('default-namespaced.xml');
	$result_from_default_namespace = $xml->xpath("/*[local-name()='bookstore']/*[local-name()='book']/*[local-name()='title']");
	echo $result_from_default_namespace[0];

Posted on https://www.christianengvall.se/xpath-and-default-namespaced-xml/

My first Ruby on rails experience

Fri, 24 May 2013 12:40:03 +0200

I recently released Husvisningar.se with my friends Simon and Jacob. It has been, and is continuing to be a really fun project. We decided to use Ruby on rails for this, just to learn something new.

Ruby on rails is an open source mvc-framework that is used to build web applications with, some famous sites using it are Github and Twitter. According to it’s creator, David Heinemeier Hansson, the framework is optimized for programmer happiness and beautiful code. But this wasn’t the only good thing about it. There are tons of gems out there making it faster to create a site, and in almost every case there is someone else who has solved what you are trying to implement and shared the code. So I thought i’d share some good gems that we’ve used on our site.

Gems used on Husvisningar

Asset sync This gem syncs images, css and javascript assets to S3. This helps to load assets faster when serving them from a cookieless domain.

Chronic Chronic is a natural language date/time parser. So to get the date for next tuesday at 5 you can use Chronic this way:

Chronic.parse(‘this tuesday 5:00’) #=> Tue Aug 29 17:00:00

Stringex Stringex adds some useful extensions to the string class of ruby. For example it helps to remove unwanted chars when converting a string to use in a url.

“simple English”.to_url => “simple-english”

aws-sdk This gem is the official gem for amazon web services. Can be used for example if asset sync doesn’t fit your needs all the way.

MiniMagick A lightweight alternative to RMagick to scale images with ImageMagick. Using it is as simple as this:

image = MiniMagick::Image.open(“input.jpg”) image.resize “100x100” image.write “output.jpg”

RailsConfig RailsConfig helps you easily manage environment specific Rails settings in an easy and usable manner.

time_diff Gem which calculates the difference between two dates and returns a hash of time difference in terms of years, month, week, day, hour, minute and second.

Dalli Dalli is a high performance pure Ruby client for accessing memcached servers.

Posted on https://www.christianengvall.se/my-first-ruby-on-rails-experience/

Using IMCE with CKEditor and Drupal 7

Tue, 21 May 2013 15:00:59 +0200

“IMCE is an image/file uploader and browser that supports personal directories and quota.” - http://drupal.org/project/imce

This post describes how to use IMCE with CKEditor. If you haven’t installed CKEditor yet you can follow these steps.

1. Download and install

Download the IMCE module install it and activate it.

2. Enable filebrowser

Go to /admin/config/content/ckeditor/edit/Full and scroll down to FILE BROWSER SETTINGS and choose IMCE as the file browser type.

File browser settings

3. Create content

Now go to /admin/content and create a new node. Make sure text format is set to Full HTML then click on the image icon and the button on the right to URL. My button says Bläddra på server since my installation uses swedish.

Image properties

4. Add image

Now the IMCE-window will appear and you can upload, delete, resize and insert file/image to your content.

IMCE Window

Posted on https://www.christianengvall.se/adding-imce-to-ckeditor-and-drupal-7/

Unable to recreate feature in drupal 7

Mon, 20 May 2013 07:45:56 +0200

In my drupal developer environment i had a problem which made it impossible to recreate features. When clicking the recreate tab all i would see was a blank page.

First it’s hard to troubleshoot without an error message. So adding this code to index.php will display the error.

<?php
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

Now when reloading I could see the following error message:

Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 115619 bytes) in /var/www/drupal/public/includes/common.inc on line 5849

Memory leak

This probably is happening because of a memoryleak somewhere. But since this only occurs in my dev environment and at this point a quick fix is needed, so i decided to override the maximum amount of memory that scripts can use with this line in index.php:

ini_set(‘memory_limit’, ‘-1’);

So the index.php now looks like this:

<?php

error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);
ini_set('memory_limit', '-1');
/**
 * @file
 * The PHP page that serves all page requests on a Drupal installation.
 *
 * The routines here dispatch control to the appropriate handler, which then
 * prints the appropriate page.
 *
 * All Drupal code is released under the GNU General Public License.
 * See COPYRIGHT.txt and LICENSE.txt.
 */

/**
 * Root directory of Drupal installation.
 */
define('DRUPAL_ROOT', getcwd());

require_once DRUPAL_ROOT . '/includes/bootstrap.inc';
drupal_bootstrap(DRUPAL_BOOTSTRAP_FULL);
menu_execute_active_handler();

I would not recommend doing this on a production server though

Posted on https://www.christianengvall.se/unable-to-recreate-feature-in-drupal-7/

Gitignore exclude folder but include a subfolder

Wed, 15 May 2013 07:55:04 +0200

In a project using Git i have a folder that is added to .gitignore. But i needed to include a subfolder that is tracked by git.

What the folder structure looked like:

Sites
-all
- - -files
- - - - -private
- - - - -newspilot
-default
- - -files
- - - - -private
- - - - -newspilot

I needed to keep files in the newspilot folder but the files folder and its subfolders was ignored like this in the .gitignore: sites/*/files

I also didn’t want the files that exists in files and private. And this was the solution:

Git ignore and exclude

sites/*/files/*
!sites/*/files/private
sites/*/files/private/*
!sites/*/files/private/newspilot

The first line ignores all files and folders in files.
The second line excludes the private folder.
The third line ignores all files and folder in private.
And finally the last line excludes the newspilot folder.

Posted on https://www.christianengvall.se/gitignore-exclude-folder-but-include-a-subfolder/

Using ckeditor with drupal 7

Thu, 02 May 2013 12:35:38 +0200

1. Download and install module

Download and install the ckeditor module. Do not enable it yet.

2. Download the standalone editor

Now we need to add the latest ckeditor files to the module. Download it and extract the contents of the zip file into the folder ckeditor in the newly installed module directory. (My module was installed in sites/all/modules/ckeditor)

3. Enable module

Now go to Administration panel -> Modules -> User Interface and enable CKEditor.

User interface

4. Permissions

Grant permission for the users that need to use the editor at people -> permissions.

Permissions

5. Create content

When creating content for the standard basic page the text area is now a ckeditor instead.

Permissions

Posted on https://www.christianengvall.se/using-ckeditor-with-drupal-7/

SEO-friendly urls in drupal 7

Wed, 24 Apr 2013 12:48:15 +0200

To get seo-friendly urls in drupal 7 we need three modules.The first one we need is pathauto which takes care of the job to create the urls, but that doesn’t really get us all the way, we also need transliteration to get rid of, for example, åäö in the urls created. The last one we need is token, which is a dependency for pathatuto. This quick tutorial requires that you know how to install a drupal module.

1. Installation

Download and install pathauto and token

2. Activate modules

Active these modules by check the boxes and push save configuration.

Activate modules

3. Update pathauto settings

Now go to Configuration -> search and metadata -> URL-aliases (/admin/config/search/path)

Url

Now click on the patterns tab in the top right corner to. This is where you can set at default url-pattern for all your content types or define a pattern for each type. The image below shows an example:

Patterns

the pattern for all Article paths is myarticles/[node:title] and the pattern for Basic page is basicpages/[node:title]. A bit further down that page you can also set the pattern for taxonomy and users. When you are happy with the patterns just hit Save Configuration.

Now if you create new content(Content-> add-content -> pagetype) your pages will have seo-friendly urls.

4. Transliteration

Transliteration helps out with chars you don’t want in a URL, for example åäö. Download the module, install it and activate it.

Go to Configuration -> search and metadata -> url aliases -> settings

Transliteration

Scroll down to Transliterate prior to creating alias _and activate it, then click _Save configuration.

Transliterate prior to creating alias

Now when creating new content the urls will contain valid characters.

5. Updating already added content

To update urls for already existing content just go to Configuration -_> search and metadata -_> url aliases -_>Delete aliases Check the all aliases checkbox and click _Delete aliases now!

Url aliases

Now click on the BULK UPDATE tab and check all checkboxes you want to create an alias for and click Update

Bulk update

Posted on https://www.christianengvall.se/seo-friendly-urls-in-drupal-7/

Updating ruby version in ruby on rails app

Mon, 08 Apr 2013 07:55:42 +0200

To update ruby version used by a ruby on rails app we need to start with installing the ruby version we want. This can be accomplished very easy with Ruby Version Manager (RVM).

RVM Terminal

Start a terminal window and run this to install RVM and Ruby 1.9.3:

$ \curl -L https://get.rvm.io | bash -s stable --ruby=1.9.3 --autolibs=enabled

When the install is done quit the terminal and start it again, then run this command to set ruby version:

rvm --default use 1.9.3

Next update the gemfile with the new ruby version:

ruby '1.9.3'

And we’re done!

Posted on https://www.christianengvall.se/updating-ruby-version-in-ruby-on-rails-app/

Clear cache with after deploy hook on pagodabox

Mon, 11 Mar 2013 08:00:31 +0100

pagodabox is a good alternative to host a Symfony2 site. When updating it all you need to do is commit to your master branch and push it to pagodabox, then clear the cache via ssh to deploy the site. But the last step can be automated with an after deploy hook.

An after deploy hook is is added in the boxfile and all we need to add is this:

~~after_deploy:~~ ~~- “rm -R app/cache/”~~

Update: Tobias Sjösten (thanks for the tip!) had an improvement to the hook, and it is to use symfonys console tool to clear the cache like this:

after_deploy:

“php app/console cache:clear –env=prod –no-debug”

Boxfile example

An example of a boxfile with after_deploy hook included:

web1:
  ################################################
  ## GENERAL SETTINGS
  ################################################
  shared_writable_dirs:
      - app/cache
      - app/logs

  ################################################
  ## WEB SPECIFIC SETTINGS
  ################################################
  document_root: web
  default_gateway: app.php
  index_list: [app.php]

  ################################################
  ## PHP SPECIFIC SETTINGS
  ################################################
  php_version: 5.3.5
  php_extensions:
    - intl
    - mbstring
    - xsl
    - apc
    - mysql
    - posix
    - iconv
    - tokenizer
    - xml
    - pdo_mysql
  php_session_autostart: Off
  php_short_open_tag: Off
  magic_quotes_gpc: Off
  after_deploy:
    - "php app/console cache:clear --env=prod --no-debug"

Posted on https://www.christianengvall.se/clear-cache-with-after-deploy-hook-on-pagodabox/

Developer resources # 2 - videos

Mon, 14 Jan 2013 09:51:48 +0100

How to build a github by Zach Holman

Zach Holman talks about how github has changed since the start but also interesting parts how github works to get employees to stay at their company, and so far no employee has left. The most interesting part was about how they automate tasks and deploy new things every day.

Clean code by Robert C. Martin

Robert C. Martin gives an introduction of how to write clean code at Oredev 2008.

Keep your goals to yourself by Derek Sivers

This 3 minute TEDtalk is not developer specific but what Derek has to say helps getting things done. It doesn’t matter if it’s a work related goal, a goal to run a marathon or getting a side project deployed.

Posted on https://www.christianengvall.se/developer-resources-2-videos/

Add tab to facebook page

Wed, 09 Jan 2013 08:54:05 +0100

With Static HTML: iframe tabs you can add static html to a Facebook page. This simple walkthrough(hello world) assumes you know how to create a page or already have a page to add a tab to and also simple html and css knowledge.

1. Add static HTML:iframe tabs to your page

Log in to your facebook account where you are admin for a page. Then browse to this url: http://apps.facebook.com/static_html_plus/ and click Add static html to a page. Then choose which of your pages to add it to.

Add static html

When this is done you will be redirected to your page and a tab name welcome has been added. In the next step we will change the picture and rename the tab.

Startpage

2. Update name and image of the new tab

Go to Admin Panel -> Edit Page -> and click on Update Info. Then click on apps in the menu to the left.

Admin panel

When you’ve clicked on apps you will se all the added apps for your page. Click on Edit Settings for the _ Static HTML: iframe tabs _ app.

Static html settings

A new window will appear where you can set Custom tab image and Custom tab name. When you are done with uploading a image and setting the name of the tab click Save and then click OK.

iframe tabs settings

3. Adding content

Go to the start of the page and click on the new tab, which you just renamed and edited the image of. In this case My own tab.

My own tab

You will now see the startscreen of the new tab. Where you can edit settings and add more tabs if you want to. But you can also choose to edit public content and fan content. Public content is shown for everyone and fan content is shown for people who has clicked like on your page. Click on Edit next to Public content.

Edit tab

Next we will get a question which kind of tab/app we want to create. In this tutorial we choose HTML i recommend you play around with the other ones to but for now click on Use this app under html and click on _done _ at the top of the page.

apps

In the _ index.html tab_ we add this code and click on save and publish : the [[style.css]] tag indicates that we want to use the css found in the style.css tab.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="sv">
 <head>
 <title>Something</title>
 [[style.css]]
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 </head>
<body>
<div class="crappyredtext">Hello world!</div>
</body>
</html>

And in the style.css tab you add this simple css class and click on save and publish:

.crappyredtext
{
  color:red;
}

Content

Now if you go back to the start page and click on your tab you will see Hello World! in red.

Posted on https://www.christianengvall.se/add-tab-to-facebook-page/

Developer resources - Books

Mon, 07 Jan 2013 10:02:20 +0100

I’m always looking for resources that can help me become a better developer. This is a list of books that i’ve read or planning to read. The books are interesting to any developer regarding what language they use.

Developer books

Clean Code: A Handbook of Agile Software Craftsmanship - Robert C. Martin “Even bad code can function. But if code isn’t clean, it can bring a development organization to its knees. Every year, countless hours and significant resources are lost because of poorly written code. But it doesn’t have to be that way.”

Clean coder - Robert C. Martin “In The Clean Coder: A Code of Conduct for Professional Programmers, legendary software expert Robert C. Martin introduces the disciplines, techniques, tools, and practices of true software craftsmanship. This book is packed with practical advice–about everything from estimating and coding to refactoring and testing. It covers much more than technique: It is about attitude.”

Domain driven design quickly - Eric Evans ”Domain Driven Design is a vision and approach for dealing with highly complex domains that is based on making the domain itself the main focus of the project, and maintaining a software model that reflects a deep understanding of the domain. This book is a short, quickly-readable summary and introduction to the fundamentals of DDD; it does not introduce any new concepts; it attempts to concisely summarize the essence of what DDD is, drawing mostly Eric Evans’ original book, as well other sources since published such as Jimmy Nilsson’s Applying Domain Driven Design, and various DDD discussion forums. The main topics covered in the book include: Building Domain Knowledge, The Ubiquitous Language, Model Driven Design, Refactoring Toward Deeper Insight, and Preserving Model Integrity.”

Refactoring - Martin Fowler “Refactoring is about improving the design of existing code. It is the process of changing a software system in such a way that it does not alter the external behavior of the code, yet improves its internal structure. With refactoring you can even take a bad design and rework it into a good one.”

The art of unit testing - Roy Osherove “The Art of Unit Testing builds on top of what’s already been written about this important topic. It guides you step by step from simple tests to tests that are maintainable, readable, and trustworthy. It covers advanced subjects like mocks, stubs, and frameworks such as Typemock Isolator and Rhino Mocks. And you’ll learn about advanced test patterns and organization, working with legacy code and even untestable code. The book discusses tools you need when testing databases and other technologies. It’s written for .NET developers but others will also benefit from this book.”

97 things every programmer should know - Kevlin Henney “Tap into the wisdom of experts to learn what every programmer should know, no matter what language you use. With the 97 short and extremely useful tips for programmers in this book, you’ll expand your skills by adopting new approaches to old problems, learning appropriate best practices, and honing your craft through sound advice.”

Posted on https://www.christianengvall.se/developer-resources-books/

Clean code

Thu, 06 Dec 2012 12:52:35 +0100

I recently held a presentation about Clean code at Sogeti and thought i’d recap the important parts in a post. The slides can be found on prezi.

The length of a method

A method should be as small as possible, about 3 to 6 lines of code. The method should never be more the 10 lines of code. It should also only do one thing.

Names

The name of a method should explain what the method does, and this gets simple since the method should only do one thing. Don’t be afraid to make the method name long, make sure to use a naming convention that allows multiple words in it.

The name of a variable should explain what the contents of the variable is. Bad name:

int d; //Elapsed time in days

good name:

int =  elapsedTimeInDays;

Do not use any abbrevations, they might be simple for you to understand but when another developer comes into your code he might not know what the abbrevation means.

Arguments

A method should not accept more than three arguments, if you go over that number maybe you should think about making an object that contains these arguments as a property.

Don’t use out arguments. When we read code we usually dont expect information to comeback from the arguments.

Don’t use booleans as arguments. if you do the method you’re writing will probably do more than one thing, depending if the boolean is true or false. And if you se a call to a method like this:

DeleteEmployee(“Bob”, false, true);

you will have to go into the method to know what it does with the true and false, instead of continue reading.

Comments

Do not comment code. The method name should explain what the method does. A comment will probably not get updated when the code is changed therefore the comment will be outdated and only confuse other developers. If you se outocmmented code just delete it. If you need it later it will always be in the version control.

If, else, while, foreach and try catch

The body of a if/else, while foreach and try catch should always be one line long and it should call another method. This is to keep the method small and the code will document itself with the methodname. Examples:

if(myBool){
    callToMethod();
}
else{
    callToAnotherMethod();
}

try{
    DeleteCustomer();
}
catch(Exception error){
    logger.log(error);
}

Do not return null

If a method encounters a problem and you decide to return null you’re going to have a lot of null checks in the code that calls this method. This is unnecessary, instead return a variable that is empty, for example:

List<Employee> employees = getEmployees();
if(employees != null){
    foreach(employee in employees){
        employees.raiseSalary();
    }
}

if getEmployees() would return a empty list of employee when an error occured in that method we wouldn’t need to check for null and our methodcall could look like this:

List<Employee> employees = getEmployees();
foreach(employee in employees){
    employees.raiseSalary();
}

These are only a few tips from clean code, i recommend you buy the book or take a look at Robert C. Martins code-cast about clean code.

Posted on https://www.christianengvall.se/clean-code/

A quick git commands refresh

Thu, 15 Nov 2012 23:20:03 +0100

When using git i like to work with Vincent Driessen’s a successful git branching model. But since my projects varies i switch between git and another version control system, and sometimes need a quick refresh to get up to speed with git again. So this is the short version of the successful branching model.

Create feature branch

$ git checkout -b myfeature develop
Switched to a new branch "myfeature"

Merge feature branch

$ git checkout develop
Switched to branch 'develop'
$ git merge --no-ff myfeature
Updating ea1b82a..05e9557
(Summary of changes)
$ git branch -d myfeature
Deleted branch myfeature (was 05e9557).
$ git push origin develop

Create release branch

$ git checkout -b release-1.2 develop
Switched to a new branch "release-1.2"
$ ./bump-version.sh 1.2
Files modified successfully, version bumped to 1.2.
$ git commit -a -m "Bumped version number to 1.2"
[release-1.2 74d9424] Bumped version number to 1.2
1 files changed, 1 insertions(+), 1 deletions(-)

Finish release branch

$ git checkout -b release-1.2 develop
Switched to a new branch "release-1.2"
$ ./bump-version.sh 1.2
Files modified successfully, version bumped to 1.2.
$ git commit -a -m "Bumped version number to 1.2"
[release-1.2 74d9424] Bumped version number to 1.2
1 files changed, 1 insertions(+), 1 deletions(-)

Create hotfix branch

$ git checkout -b hotfix-1.2.1 master
Switched to a new branch "hotfix-1.2.1"
$ ./bump-version.sh 1.2.1
Files modified successfully, version bumped to 1.2.1.
$ git commit -a -m "Bumped version number to 1.2.1"
[hotfix-1.2.1 41e61bb] Bumped version number to 1.2.1
1 files changed, 1 insertions(+), 1 deletions(-)

Finish hotfix branch

$ git checkout master
Switched to branch 'master'
$ git merge --no-ff hotfix-1.2.1
Merge made by recursive.
(Summary of changes)
$ git tag -a 1.2.1

$ git checkout develop
Switched to branch 'develop'
$ git merge --no-ff hotfix-1.2.1
Merge made by recursive.
(Summary of changes)

$ git branch -d hotfix-1.2.1
Deleted branch hotfix-1.2.1 (was abbe5d6).

successful git branch model

Image from http://nvie.com/posts/a-successful-git-branching-model/

Posted on https://www.christianengvall.se/a-quick-git-commands-refresh/

Unable to publish page containing URL to image

Fri, 05 Oct 2012 14:34:54 +0200

This error occurred after an upgrade from Episerver CMS 5 to CMS 6 R2. When trying to publish a page this error message was shown: “urltoimage.jpg” is not a valid value for “imageproperty”

Vladimir Terziyski wrote the following about why this error is happening:

“I’ve had the same problem some time ago. I’ve narrowed it down to using Native or other custom Virtual path provider. Seems it comes from the new base class for url properties called PropertyFileUrl, from which PropertyImageUrl and PropertyDocumentUrl inherit. It has one method called ValidateUri which throws an exception when the VirtualPathProvider you use doesn’t implement IFileResolver interface. For example - VirtualPathNativeProvider. Here is what is happening:

The user saves & publishes the page.
A call to Set accessor for the PropertyUrl.String property is made. Inside it, a call to PropertyFileUrl.ValidateUri method is made
ValidateUri throws an exception which says that the url is not absolute on the following line:
GenericHostingEnvironment.VirtualPathProvider.FileExists(uri.LocalPath))
This exception however is masked behind the text “[imagepath] is not a valid value for [imagepropertyname]”. This text is shown as error in the Edit interface.
If the selected VirtualPathProvider implements IFileResolver, call to ValidateUri will not be made if the file is resolved.”

How to solve the problem

Download the latest release of Episerver CMS 6 R2 from episerver world.
Backup your site and database
Uninstall EPiServerFramework from the control panel
Uninstall EPiserverCMS
Uninstall EPiServershared
Install EPiServerShared.msi from the latest release of CMS 6 R2
Install EPiServerFramework.msi
Install EPiServerCMS.msi
Copy assemblies from Program Files (x86)\EPiServer\CMS\6.1.379.0\bin to the site’s bin folder.
Copy assemblies from Program Files (x86)\EPiServer\Framework\6.2.267.1\bin to the site’s bin folder.
run an iisreset

These instructions + instructions for Relate can be found here.

Posted on https://www.christianengvall.se/unable-publish-page-containing-url-image/

Upgrading to episerver cms 6

Thu, 27 Sep 2012 12:34:34 +0200

I recently ran into the same problem as Jamie Dixon when upgrading a episerver site from cms 5 to cms6. But the solution was a little different.

The error message is:

Cannot resolve dependencies for the following module(s) EPiServer.Cms.Shell.UI.InitializableModule EPiServer.Cms.Shell.UI.InitializableModule EPiServer.Web.InitializationModule EPiServer.Web.InitializationModule

And the problem was the same as Jamies post explained:

“After some digging around and much testing, it turns out that not all of the required DLLs are present in the “6.0.530.0″ folder (C:\Program Files\EPiServer\CMS\6.0.530.0 – on my machine).”

Installing a site without database

And it was solved by installing a site without database from EPiServer Deployment Center. Use all the standard settings and click next until the site is installed.

Episerver deployment center

When the installation has finished copy the contents of the bin folder of the site to this folder: C:\Program Files (x86)\EPiServer\CMS\6.0.530.0\bin

When this is done just run the Upgrade site with SQL Server database again on your site.

Posted on https://www.christianengvall.se/upgrading-episerver-cms-6/

cache in csharp

Mon, 17 Sep 2012 21:16:46 +0200

This is a wrapper around HttpRuntime.Cache i use when some object is to expensive to get from its source every time. For example a RSS-feed which might only need to get updates from its source every minute.

using System;
using System.Web;
using System.Web.Caching;

public class HttpRuntimeCache
{
    private DateTime _Expiration;

    public DateTime Expiration
    {
        get
        {
            return this._Expiration;
        }
        set
        {
            this._Expiration = value;
        }
    }

    public HttpRuntimeCache()
    {
        this._Expiration = DateTime.Now.AddHours(4);
    }

    public void Add(string key, object objectToCache)
    {
        this.ValidateKey(key);
        this.ValidateCacheObject(objectToCache);
        HttpRuntime.Cache.Add(key, objectToCache, null, this._Expiration, Cache.NoSlidingExpiration, CacheItemPriority.Normal, null);
    }

    public object Get(string key)
    {
        this.ValidateKey(key);
        return HttpRuntime.Cache.Get(key);
    }

    public void Remove(string key)
    {
        this.ValidateKey(key);
        HttpRuntime.Cache.Remove(key);
    }

    private void ValidateKey(string key)
    {
        if (key == null)
        {
            this.ThrowNullKeyError();
        }
        if (key.Length == 0)
        {
            this.ThrowEmptyKeyError();
        }
    }

    private void ValidateCacheObject(object objectToCache)
    {
        if (objectToCache == null)
        {
            this.ThrowObjectError();
        }
    }

    private void ThrowObjectError()
    {
        throw new ArgumentNullException("objectToCache");
    }

    private void ThrowNullKeyError()
    {
        throw new ArgumentNullException("key");
    }

    private void ThrowEmptyKeyError()
    {
        throw new ArgumentException("Input cannot be empty", "key");
    }
}

This code shows how to add and remove a string from the cache. If it’s not removed it will stay there for 4 hours which is set in the contstructor of HttpRuntimeCache class.

string simpleString = "this string will be cached";
HttpRuntimeCache cache = new HttpRuntimeCache();
cache.Add("simpleString", simpleString);
string fromCache = cache.Get("simpleString") as string;
cache.Remove("simpleString");

Change cache expiration

To change the expiration the Expiration property can be set before adding the object to the cache:

string simpleString = "this string will be cached";
HttpRuntimeCache cache = new HttpRuntimeCache();
cache.Expiration = DateTime.Now.AddHours(1);
cache.Add("simpleString", simpleString);

Posted on https://www.christianengvall.se/cache-in-csharp/

Check if page in episerver is opened from edit/admin mode

Tue, 11 Sep 2012 12:39:51 +0200

This code can be used to check if a page in episerver is opened in edit mode. It uses HttpContext.Current.Request.UrlReferrer.LocalPath to see if the word admin or edit exists in the url.

Check edit mode code example

private bool IsOpenedInEditMode()
{
    bool isInEditMode = false;
    If(HttpContext.Current.Request.UrlReferrer != null)
    {
        isInEditMode = Regex.IsMatch(HttpContext.Current.Request.UrlReferrer.LocalPath, "/admin/|/edit/", RegexOptions.IgnoreCase);
    }
    return isInEditMode;
}

Posted on https://www.christianengvall.se/check-page-episerver-opened-editadmin-mode/

Xcode breakpoint actions

Fri, 10 Aug 2012 09:20:13 +0200

The simple way to use a breakpoint in Xcode is just to click on the line number next to the line of code that needs to be debugged and start to step through the code. But an action can also be added to the breakpoint to speed up the debugging. This post covers three out of the six available actions, as those are the ones i felt are most useful.

To add actions to a breakpoint click on it while holding option(alt) + command When the breakpoint settings are open you click on add action.

Debugger command

A debugger command is useful when wanting to know what values an object holds while the breakpoint is hit. We can use it to print the values to the debugger output without having to step through the code or write code to output it with NSLOG.

Edit a breakpoint using the shortcut above and select debugger command as action.
In the textbox that shows up a debugger command can be entered. like po foo. foo is changed to a object in the scope of where your breakpoint is located.
Also check the “automatically continue after evaluating” checkbox as we don’t want to stop at this breakpoint.

In the example below I have a breakpoint which outputs the values of a NSDictionary called DeviceData to my debugger window.

Debugger window

Log Message

You can also log a message to the debugger console, if you for example want to know how many times a breakpoint is being hit.

To do this select Log message in the action dropdown
Select “Log message to console”.
Type “_%B has been hit %H_ times”
And as we did before we check the “Automatically continue after evaluating”

Log message to console

Sound

This action can be used if we are only interested in to see if a message is sent to a method when we run our project.

Sound

Posted on https://www.christianengvall.se/xcode-breakpoint-actions/

Sort and remove duplicate objective-c import directives

Thu, 26 Jul 2012 14:20:15 +0200

With automator you can add scripts to your right click menu in xcode. We can use this to create a script that helps us keep our #import directives in order. In this example the directives will be sorted in alphabetical order and removing duplicates. Lets start automator and begin.

In automator go to File -> New choose Service as the type and click Choose

Automator

Drag a Run shell script action to the drag actions here… area. Select text in the services recieves selected dropdown. select any application in the in dropdown. Check the Output replaces selected text checkbox
This is where the magic happens. Type the following in your run shell script:

sort | uniq

the automator window should now look like this:

Automator

Choose File -> Save… **and save the service as **Sort and remove duplicates
Restart Xcode, open a file with messy #import directives, select them and right click and choose Sort and remove duplicates.

Sort and remove duplicates

Sort and remove remove duplicates result

These #import directives now looks like this:

Sort and remove duplicates

Posted on https://www.christianengvall.se/sort-remove-duplicate-objective-c-import-directives/

Embed gist from github on a wordpress blog

Sun, 24 Jun 2012 14:06:00 +0200

I found this snippet of code at Robert O’Rourkes blog. It easily lets you embed a gist from github to your wordpress posts. Up til now i’ve been using Syntax highlighter evolved which has not been working well all the time. And with this implementation you also get version control.

PHP code

Start of by adding the following to the functions.php file of your theme:

<?php
/**
 * Usage:
 * Paste a gist link into a blog post or page and it will be embedded eg:
 * https://gist.github.com/2926827
 *
 * If a gist has multiple files you can select one using a url in the following format:
 * https://gist.github.com/2926827?file=embed-gist.php
 */
wp_embed_register_handler( 'gist', '/https:\/\/gist\.github\.com\/(\d+)(\?file=.*)?/i', 'wp_embed_handler_gist' );
function wp_embed_handler_gist( $matches, $attr, $url, $rawattr ) {
	$embed = sprintf(
			'<script src="https://gist.github.com/%1$s.js%2$s"></script>',
			esc_attr($matches[1]),
			esc_attr($matches[2])
			);
	return apply_filters( 'embed_gist', $embed, $matches, $attr, $url, $rawattr );
}

And when you’re done all you have to do is add a link to a post :

Wordpress editor

2015-11-05 Update: I don’t use this approach anymore. Github limits the usage for this service. I now use a wordpress highligher plugin instead.

Posted on https://www.christianengvall.se/embed-gist-from-github-on-a-wordpress-blog/

NSDate to NSString with NSharpDate

Fri, 01 Jun 2012 16:13:22 +0200

Converting an NSDate to NSString can sometimes be not as simple as one would hope. NSharpDate is a NSDate category that can help you with this. It adds easy to use methods and properties to the NSDate object.

Example of a method

To get a NSString from a NSDate you need to use a NSDateFormatter. The following code is how you could do it without NSharpDate which would produce a string looking like this: 5/27/12 if the IOS device locale is US, or like this if the locale is Sweden: 2012-05-27.

NSDate *date = [NSDate date];
NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
[formatter setDateStyle:NSDateFormatterShortStyle];
[formatter setTimeStyle:NSDateFormatterNoStyle];

NSString *dateString = [formatter stringFromDate:date];

With NSharpDate you only need one line of code to do this:

NSDate *date = [NSDate date];
NSString *dateString = [date stringByShortDateFormat];

This is only one of the five methods added to NSDate, to see the other methods head over to the NSharpDate site.

Example of a property

To get the day of week from an nsdate you would use the following code without NSharpDate. This would give you a string like “Sunday” or “Söndag:

NSDate *date = [NSDate date];
NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
[formatter setDateFormat:@"EEEE"];

NSString *dateString = [formatter stringFromDate:date];

To get the same result with NSharpDate you do the following:

NSDate *date = [NSDate date];
NSString  *day = date.DayOfWeek;

There are a few more properties added to NSDate which you can find here.

Download and setup

there are only three steps involved to get started with NSharpDate.

Contributing

If you find a bug or want to add a feature to the project you are very welcome to add this code to the category. You can head over to github to fork the project and send me a pull request when you are done.

Posted on https://www.christianengvall.se/nsdate-to-nsstring-with-nsharpdate/

Phonegap gitignore

Mon, 16 Apr 2012 17:07:00 +0200

I’ve started working on a gitignore file for Phonegap projects. The .gitignore file can be used with the folder structure explained in Phonegap and multiple platforms. But also with projects only containing one platform.

If you have any improvements to the file you are welcome to update it on Github. That is also the location where you can download Phonegap.gitignore.

If you don’t want to follow the folderstructure described in the post that i linked to above you can delete the following lines:

generated files - android project subfolder

Android/bin/
Android/gen/
Android/assets/

Posted on https://www.christianengvall.se/phonegap-gitignore/

Phonegap and multiple platforms

Mon, 16 Apr 2012 17:06:02 +0200

This post provides an example of how to work with phonegap and multiple platforms. What folder structure to use and how to share the www folder between projects. Platforms used are iOS and Android. This example project can be downloaded at github but i recommend reading the post first.

Folder structure

The www folder is located in the top folder and linked in under android and iOS folders (windows phone and blackberry too if you’d like, but thats not covered here) -www
-Android
-IOS
(–WP)
(–Blackberry)

Starting with iOS

Start with creating a new Cordova-Based Application following these instructions on the phonegap wiki. But stop when the instruction tells you to copy the www folder and continue here. Save this application in your IOS folder.

You’re back? Good! let’s continue. Open Finder and navigate to your application. You should see a folder called www in the folder where you created the cordova based application. After copying it to the root folder your folderstructure should look like this:

Folderstructure

Now drop the www folder into the xcode project(images borrowed from phonegap wiki):

Cordova project

Choose the following options and click finish:

Cordova project options

Now click on run and your cordova application is working!

Cordova project in iOS simulator

Now we’re done with the IOS part, Let’s continue to Android and Eclipse.

Continuing with Android

Follow this guide to set up your Phonegap project with Eclipse for android. Skip the part with creating the www folder and continue here when you’re done.

Now our folder structure should look like this:

Folderstructure - Android

Now if you try to run the project in the simulator you get the following error, which we will deal with next:

Folderstructure - Android

Now let’s link the www folder in the assets folder. Open a terminal and navigate to your assets folder and create a symbolic link to the www folder:

ln -s ../../www/ www

Or if you are working with the Android project on windows you have to open a console and create a link with this command:

mklink /D c:\pathtoproject\Android\assets\www c:\pathtoproject\www

Note: If you’ll be using git you want to add assets/www to your .gitignore file to avoid having trouble with commits on Windows. You can get my phonegap gitignore file here.

And we are almost done, but first we must add a reference to the cordova.js file for android. In the phonegap archive you downloaded when you first installed it, you got a folder called lib. And inside that folder you another one called Android/example. If you go navigate to the www folder for that example project you see a file called cordova-1.5.0.js.

Copy that file to your own www folder and rename it to cordova-1.5.0-android.js

Open up index.html and go to the line that now contains this:

<script charset="utf-8" type="text/javascript" src="cordova-1.5.0.js">// <![CDATA[

// ]]></script>

and replace it with this:

<script type="text/javascript">// <![CDATA[
if (navigator.userAgent.toLowerCase().match(/android/)) {
document.write('<script charset="utf-8" src="cordova/cordova-1.5.0-android.js"><\/script>');
}
else if (navigator.userAgent.toLowerCase().match(/iphone/) || navigator.userAgent.toLowerCase().match(/ipad/)) {
document.write('<script charset="utf-8" src="cordova/cordova-1.5.0-ios.js"><\/script>');
}
// ]]></script>

And now you are ready to run the project on your emulator or android phone. As i wrote at the top of this post you can download the example project from github to see how i have done it if you’re having trouble.

Posted on https://www.christianengvall.se/phonegap-and-multiple-platforms/

Phonegap and Google maps

Mon, 16 Apr 2012 00:00:00 +0200

How to show a Google map in your Phonegap app using Google Map api V3, and what whitelist urls to add to your project. This post expect you know how to set up a new Phonegap project.

1. Start by adding a reference to Google maps api in index.html

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

Then add a div that will contain the map. Choose an id like “map_canvas”. That id will be used to add our map from our javascript later on.

<div id="map_canvas">
</div>

##2. Create a new javascript file called googlemap.js in the www folder and add the following content

function GoogleMap(){

this.initialize = function(){
var map = showMap();
}

 var showMap = function(){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

return map;
}
}

and add a reference to it in index.html

<script type="text/javascript" src="googlemap.js"></script>

the mapOptions variable contains information about zoomlevel, where the center of the map is and what kind of map we want to show. And the line containing the map variable uses getElementById to get our map_canvas and adding the map.

3. Whitelisting google urls

Now we must add the following urls to our Cordova.plist under externalHosts if using Xcode:

*.google.com
*.googleapis.com
*.gstatic.com

4. Showing the map

To show the map we must run the initialize function in googlemap.js. Since we are using the example index.html from phonegap we add these lines to the onDeviceReady function in index.html

function onDeviceReady(){
    var map = new GoogleMap();
    map.initialize();
}

Now run the app and you should se a map over Australia.

5. Adding markers

To add markers to our map we use the LatLng and Marker object from Google API. Edit the initialize function in googlemap.js to look like this:

function GoogleMap(){

this.initialize = function(){
var map = showMap();
addMarkersToMap(map);
 }

and add the following function, called addMarkersToMap:

var addMarkersToMap = function(map){
var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});

var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});
 }
}

Here we added a function called addMarkersToMap and called it from the initialize function. What it’s doing is adding two markers on our map at the given latitude and longitude. And when we create a new marker object, like markerOne, we give the object the position and which map we want to add the marker to.

But if we run the app now we only see one marker. Let’s fix that.

6. Zooming out the map to show all markers

to zoom out the map without knowing which zoomlevel to use we are going to use the LatLngBounds object from the Google Map API.

Start off by adding the following line first in the addMarkersToMap function:

var mapBounds = new google.maps.LatLngBounds();

and before the closing tag of the function add these lines:

mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);

map.fitBounds(mapBounds);

The addMarkersToMap function now looks like this:

var addMarkersToMap = function(map){
var mapBounds = new google.maps.LatLngBounds();

var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});

var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});

mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);

map.fitBounds(mapBounds);
 }

Now we’re done, run the app and the map now zooms out so you can see the marker which we added in Sweden.

I’ve created an example application of this and pushed it to a repository on Github, have a look at it if you want to see the code.

Posted on https://www.christianengvall.se/phonegap-and-google-maps/

Continuing in English

Sun, 15 Apr 2012 12:22:06 +0200

From now on posts will be in English. Hopefully my posts can provide help for more people that way. The posts will be translated one by on but let me know if i forgot to translate something on the site.

Spelling errors

If you find any spelling or any other errors please let me know.

Posted on https://www.christianengvall.se/continuing-in-english/

Schemalägga php-script i OSX Lion

Wed, 01 Feb 2012 12:32:01 +0100

För att schemalägga script i OSX Lion används launchd. Lägg till ett jobb genom att spara en .plist i mappen /Users/%användare%/Library/LaunchAgents. Ett exempel på en .plist är:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
 <dict>
 <key>Label</key>
 <string>se.christianengvall.phptelldus</string>
 <key>ProgramArguments</key>
 <array>
 <string>/usr/bin/php</string>
 <string>/Users/%användare%/Sites/Telldus/hello.php</string>
 </array>
 <key>StartInterval</key>
 <integer>10</integer>
 </dict>
</plist>

Under Label namnger man sitt jobb, som man sedan kan se genom att skriva “launchctl list” i terminalen. I ProgramArguments anges att vi vill använda php för att köra filen hello.php. StartInterval anger i sekunder hur ofta jobbet kommer att köras.

i hello.php finns logiken man vill utföra, här är ett exempel som skriver ut ett meddelande i Systemmeddelanden:

<?php
 syslog(LOG_WARNING, "meddelande som syns i sysstemmeddelanden");
?>

Starta jobb med launchctl

För att köra jobbet läggs det till genom att skriva följande i ett terminalfönster:

launchctl load  /Users/%användarnamn%/Library/LaunchAgents/se.christianengvall.phptelldus.plist

Starta sedan Systemmeddelanden och klicka på “Alla meddelanden” så kommer texten “meddelande som syns i sysstemmeddelanden” dyka upp var tionde sekund.

Stoppa samma jobb med launchctl

Stoppa sedan jobbet genom att skriva:

launchctl unload  /Users/%användarnamn%/Library/LaunchAgents/se.christianengvall.phptelldus.plist

Posted on https://www.christianengvall.se/schemalagga-php-script-i-osx-lion/

hockeyligan.se nästan helt obefintliga api

Mon, 03 Oct 2011 19:54:55 +0200

Jag håller för tillfället på att vidareutveckla en mjukvara som skulle behöva visa lite sportresultat, och lite mer precist ska den visa hockeyresultat. Jag hade hoppats på att hockeyligan.se hade ett publikt api som man kunde använda. Tyvärr fanns det inget sådant men om någon vill visa resultaten i de senaste matcherna så hittade jag en url på hockeyligan.se som returnerar just detta i JSON. Förhoppningsvis kan den här informationen hjälpa någon!

URL:en är: http://www.hockeyligan.se/elitserien-arena/currentstandings och det används på hockeyligan.se för att skriva ut det som visas till höger i denna bild:

Current standings

JSON-svar

i json strängen finns följande information:

Current standings JSON

id : matchens id, kan användas i följande url: http://www.hockeyligan.se/elitserien-arena/37713
isaId : ?
homeTeamCode : Hemmalagets förkortning
awayTeamCode : Bortalagets förkortning
startDateString: Startdatum för matchen
startDateTime : datum med tid för matchstart
arenaActive: ?
status : Status på matchen, avslutad match, ej spelad match eller pågående match.
statusString: Samma som status fast översatt text
homeTeamGoals : antal mål hemmalaget gjort.
awayTeamGoals: antal mål bortalaget gjort.

Posted on https://www.christianengvall.se/hockeyligan-se-nastan-helt-obefintliga-api/

HVTV Boxee app

Mon, 19 Sep 2011 13:05:37 +0200

I sommras skapade jag en Boxee app som äntligen har publicerats i deras app-repository så att den blir tillgänglig för alla Boxee-användare. Appen visar hvtvs avsnitt hämtade från deras youtube-kanal. HVTV Följer HV71 och lägger upp dessa avsnitt för fans att kolla på.

Boxee-app

Kolla gärna in appen här.
Uppdatering: Denna app finns ej kvar längre.

Posted on https://www.christianengvall.se/hvtv-boxee-app/

Google analytics på ett intranät

Tue, 13 Sep 2011 12:46:03 +0200

När jag googlade “google analytics intranet” fick jag som första svar att “JavaScript-koden fungerar inte om du får åtkomst till intranätet med ett icke-fullständigt domännamn (t.ex. http://intranet)” vilket var precis det jag ville. Dock visar det sig att svaret var felaktigt. Genom att lägga till _gaq.push([‘_setDomainName’, ‘none’]); innan _gaq.push([‘_trackPageview’]) började Google Analytics snappa upp besök även om man använder sig av ett icke FQDN.

Google tracker med setDomain none

<script type="text/javascript">

var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-XXXXX-X']);
 _gaq.push(['_setDomainName', 'none']);
 _gaq.push(['_trackPageview']);

(function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 })();

</script>

Posted on https://www.christianengvall.se/google-analytics-pa-ett-intranat/

Max objektorienterar (okänd upphovsman)

Thu, 08 Sep 2011 21:36:24 +0200

Orginalet må vara bra, men denna är bättre. (Jag är inte upphovsman till detta guldkorn).

Max objektorienterar

Titta klass

Titta arv

Max objektorienterar i text

Titta polymorphism, där klasserna som repsresenterar ätbarheter alla ärver den abstrakta basklassen Mat. Detta gör att de alla kan användas av klienten Max, som enbart anropar metoden Ät() i interfacet Mat. Max behöver alltså inte känna till att det finns olika typer av Mat, utan kan utan extra programkod hantera dem alla.

Posted on https://www.christianengvall.se/max-objektorienterar/

Fem plugin att lägga till efter en Wordpress-installation

Tue, 02 Aug 2011 10:04:59 +0200

Dessa plugin hjälpte mig att komma igång bra med Wordpress. Artikeln är gammal nu, men någon kanske hittar ett intressant plugin.

Förslag på Wordpress-plugins

W3 Total Cache hjälper dig att snabba upp din wordpress-installation genom att minifiera och komprimera den html, css och javascript som skickas till användaren från din site. Det ser också till innehållet cacheas och på så sätt kan laddas snabbare. Jämför hur snabbt din site laddas på Blame Stella före och efter pluginet är installerat.

WP-SEO hjälper till att sökmotoroptimera siten genom att du bestämmer hur dina titlar och description sätts. Det skapar även sitemaps som sökmotorerna kan använda för att indexera dina sidor. Jag har i en föregående inlägg gått igenom hur man ställer in pluginet.

WP-Touch För att få din Wordpress-site att bli mer användarvänlig i dagens smartphones finns ett plugin vid namn WP-Touch som kontrollerar vilken webbläsare besökaren använder och anpassar siten efter den. Enheterna som stöds för tillfället är: iPhone, iPod touch, Android, Palm Pre, Samsung touch and BlackBerry Storm/Torch mobile devices. (OBS, Detta pluginet kan sluta fungera om man använder W3 Total Cache)

Disqus Comment System är ett kommentars-system med vilket besökaren kan logga in med flera olika konton som Facebook, Google, Twitter, Yahoo, OpenID och disqus-konton.

WP-Socializer lägger till dela funktionalitet på inläggen på t.ex Facebook, twitter, linkedin och tumblr, men även många fler nätverk finns att lägga till.

Posted on https://www.christianengvall.se/fem-plugin-att-lagga-till-efter-en-wordpress-installation/

301 Redirect i PHP och ASP.NET

Mon, 18 Jul 2011 08:22:59 +0200

En 301 redirect betyder att man har flyttat en sida permanent till en annan URL. Om man använder 301-redirecten kommer den mesta länkkraften att flyttas över till den nya webbplatsen och man kommer inte tappa för många placeringar på Google. På följande sätt kan man göra en redirect i PHP och C#:

301 redirect med PHP

<?
    Header( "HTTP/1.1 301 Moved Permanently" );
    Header( "Location: http://www.nyurl.se" );

301 redirect med ASP.NET

private void Redirect()
{
    Response.Status = "301 Moved Permanently";
    Response.AddHeader("Location","http://www.nyurl.se");
    Response.End();
}

Posted on https://www.christianengvall.se/301-redirect-i-php-och-asp-net/

Att välja rätt datatyper vid databasdesign

Thu, 14 Jul 2011 14:43:13 +0200

Att välja rätt datatyper för sina kolumner är viktigt när man designar en databas för att slippa ändra dom senare och för att en stor databas inte ska bli onödigt seg. Det kan t.ex innebära:

Se till att använda den datatypen som använder minst utrymme. T.ex en int istället för bigint ifall man vet att man inte kommer behöva en bigint i framtiden.

Använd inte en datatyp du vet kommer behövas ändras i framtiden vilket ökar utvecklingstid och serverns workload.

Använd inte datetime och smalldatetime om du använder en MSSQL2008databas. använd istället date och time eller datetime2 då de andra tar mer utrymme.

Använd bara float eller real ifall decimal inte räcker till.

Dokumentation datatyper för mssql och mysql

Kolla in datatyperna för mysql och Mssql för att se hur mycket utrymme varje datatyp använder. De ger även mer specifika tips om de olika databasernas best practices vid val av datatyp.

Posted on https://www.christianengvall.se/att-valja-ratt-datatyper-vid-databasdesign/

Serialisera och deserialisera ett Dictionary

Mon, 16 May 2011 16:34:21 +0200

Behövde i dagarna xml-serialisera och deserialisera ett dictionary för att spara information på disk. Lösningen blev Adar Wesleys SerializableDictionary. När filerna är inkluderade i projektet går det använda Serializable Dictionary såhär:

Kodexempel serialisering och deserialisering av dictionary

/// <summary>
/// Loads a Serializable dictionary which holds a saved values
/// </summary>
private void LoadExistingFile()
{
    SerializableDictionary<string, int> data = new SerializableDictionary<string, int>();
    if (File.Exists("file.xml"))
    {
        XmlSerializer s = new XmlSerializer(typeof(SerializableDictionary<string, int>));
        using (StreamReader sr = new StreamReader("file.xml"))
        {
            data = s.Deserialize(sr) as SerializableDictionary<string, int>;
        }
    }
}
/// <summary>
/// Saves existing KeyValuePairs to disc
/// </summary>
private void SaveDictionaryToDisc()
{
    SerializableDictionary<string, int> data = new SerializableDictionary<string, int>();
    XmlSerializer s = new XmlSerializer(typeof(SerializableDictionary<string, int>));
    using (StreamWriter sw = new StreamWriter("file.xml"))
    {
        s.Serialize(sw, data);
    }
}

Posted on https://www.christianengvall.se/serialisera-och-deserialisera-ett-dictionary/

HttpOnly-cookies i .NET

Mon, 28 Mar 2011 12:58:17 +0200

Gästbloggning på Webbsäkerhet

Jag fortsätter att gästblogga på webbsäkerhet.se, denna gången om att skydda sina användare ifrån cooke-theft via xss genom att använga sig av HttpOnly.

Posted on https://www.christianengvall.se/httponly-cookies-i-net/

AntiXSS och MVC

Sat, 19 Mar 2011 09:13:54 +0100

Gästblogginlägg

Gästbloggade i veckan på webbsäkerhet.se om cross site scripting och mvc, gå gärna över dit och läs inlägget!

Posted on https://www.christianengvall.se/antixss-och-mvc/

Cross-site request forgery och ASP.NET MVC

Tue, 15 Mar 2011 07:53:08 +0100

Cross-site request forgery, även kallat CSRF och XSRF, är ett sätt att lura en användare att utföra saker den inte vill göra. T.ex kan någon ha postat följande som en kommentar på en sida som en inloggad användare går in på:

<img src="http://forumsite.com/?action=logout" />

Resultatet kommer bli att användaren loggas ut varje gång han går in på sidan och inte förstår varför då en GET-request gjordes mot http://forumsite.com/?action=logout. Detta är en ganska ofarlig handling men tekniken kan användas för andra saker så som att komma över användarnamn och lösenord vilket Johan Rydberg Möller har som exempel på webbsäkerhet.se. Jag läste hans inlägg om Cross Site request forgery där han visade PHP-kod för att motverka ett sådant försök att stjäla information och jag tänkte dra mitt strå till stacken och visa hur man gör samma kontroll i ASP.NET MVC:

AntiForgeryToken

Lägg in en AntiForgeryToken med hjälp av <%=Html.AntiForgeryToken()%> så att formuläret ser ut något likande detta:

    <% using (Html.BeginForm()){ %>
        <%=Html.AntiForgeryToken()%>
        Username: <%: Html.TextBox("username") %>
        Password: <%: Html.TextBox("password") %>
        <input type="submit" value="login" />
    <%} %>

I ActionResultet som tar emot postningen från formuläret läggs Action Filtret [ValidateAntiForgeryToken] till:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(FormCollection formValues)
{
    return View();
}

Tas <%=Html.AntiForgeryToken()%> bort ifrån formuläret kommer det inte att gå att posta.

läs mer på CSRF på cgisecurity.com

Posted on https://www.christianengvall.se/cross-site-request-forgery-och-asp-net-mvc/

Inställningar för Wordpress-SEO by Yoast pluginet

Thu, 03 Mar 2011 15:45:06 +0100

Wordpress SEO är ett verktyg för att ställa in titlar och descriptions mm till din Wordpress installation för att optimera den för sökmotorer. Detta pluginet tipsade Simon Wall mig om. När man precis har installerat pluginet måste man göra vissa inställningar. Ta fram inställningarna för title och descriptions genom att klicka på SEO -> Titles. Gör sedan följande inställningar:

Se till att alla titlar och descriptions inte blir mer än 64 respektive 150 tecken då det är antalet som visas i Googles sökresultat.

Homepage

Title template: Systemutveckling och Webbutveckling | %%sitename%% Meta description template: %%sitedesc%%

Förklaring: Denna egenskap sätter title och description på din förstasida. Här har jag valt att skriva ut de två ord som bloggen handlar om samt namnet på webbplatsen. I description skrivs sloganen för webbplatsen ut. %%Sitename%% och %%sitedesc%% ställs in under allmäna inställningar och heter “Titel för webbplats” samt “slogan”.

Post

Title template: %%title%% | %%sitename%% Meta description template: %%excerpt%%

Förklaring: Egenskaperna för post sätter title och description för inläggen. %%title%% är titeln på posten och detta följs av namnet på webbplatsen. På inläggets description sätts utdraget för posten, finns det inget sådant autogenereras ett.

Page

Title template: %%title%% | %%sitename%%
Meta description template: %%excerpt%%

Förklaring: Page-egenskaperna sätter title och description för en sida i wp. Även här används %%title%%, %%sitename%% och %%excerpt%%.

Post_tag

Title template: %%tag%% | %%sitename%%
Meta description template: %%tag_description%%

Förklaring: egenskaperna för post_tag sätter title och description när en användare kollar på taggar. Numera börjar det mest bli upprepning, du förstår säkert vad koderna står för.

Search Pages

Title template: Sökresultat för %%searchphrase%% | %%sitename%%

Förklaring: Search pages title visas när en besökare gör en sökning på webbplatsen. %%searchphrase%% ersätts med den sökningen besökaren gör.

Gå till sist in på Dashboard och klicka i “check this box to enable XML-sitemap functionality”

Posted on https://www.christianengvall.se/installningar-for-wordpress-seo-by-yoast-pluginet/

Lista över kodstandarder, konventioner och stilguider

Mon, 28 Feb 2011 08:33:58 +0100

När man arbetar med kod är det bra att följa standarder och stilguider för att kunna samarbeta eller lämna över ett projekt. Men följ dom inte religiöst. Nedan följer en lista på kodstandarder, konventioner och stilguider för diverse språk. Guiderna från Google är ganska omfattande och kan vara ganska svåra att ta sig igenom då de bara innehåller text rakt upp och ner, men är ändå bra ifall man vill kolla upp något specifikt för det språket man intresserar sig av.

Php + zend

Google Javascript styleguide

Google jSON styleguide Google Objective-c styleguide

Google XML styleguide

IDE-Plugins

Till .NET och Visual studio finns även två plugins som ser till att man skriver korrekt, de heter ReSharper och StyleCop.

I föregående inlägg har jag också skrivit om att hålla sin kod ren.

Följer du några kodstandarder, konventioner och stilguider som passar in i listan?

Posted on https://www.christianengvall.se/lista-over-kodstandarder-konventioner-och-stilguider/

Ren kod!

Wed, 27 Oct 2010 19:25:40 +0200

Efter att ha jobbat som systemutvecklare i ett år nu har jag märkt hur viktigt det är att ha kodstandarder. Med tipsen som Robert C. Martin ger i nedanstående video får man kod som är mer läsbar, lättare att komma tillbaka till efter att man påbörjat något annat projekt, och lättare för andra utvecklare att ta över.

Hur lång ska en metod vara?

På 80-talet skulle en metod vara så lång att den fick plats på skärmen. På den tiden fick man plats med 24 rader varav 4 av dom användes av programmet man utvecklade i. Idag får vi plats med hundratals rader. Martin anser att metoden ska vara så liten att den endast gör en sak, och att man då kan hålla ner radantalet mellan 3 till 10 rader.

Metodnamn

Se till att metodnamnet förklarar vad metoden gör och den ska endast göra en sak. Var inte rädd för att namnet ska bli för långt, se till att använda en namnkonvention som tillåter flera ord i namnet.

If, else, while-satser, foreach och try catch

Koden i en if, else, while-sats, foreach och try catch ska vara max 1 rad lång och kalla på en annan metod. Detta för att hålla metoden liten och för att man dokumenterar vad som händer med hjälp av metodanropets namn.

Hur många argument ska en metod ta emot?

Det idealiska antalet argument en metod har är 0, och max är 3. Över detta antalet ska man se till att man passar runt ett objekt med värdena i istället.

Outargument

Använd inte out-argument alls. Man är van vid att man skickar in argument i en metod och tar emot det som returneras av den. Normalt förväntar vi oss inte att information kommer tillbaka genom argumenten.

Booleans i argument

Använd inte booleans i en metods argument. Då kommer metoden med stor säkerhet göra mer än en sak. En sak ifall du passar in true, och en annan ifall du passar in false. Även anropen till denna metod kommer bli svår att tolka. Martin använder exemplet DeleteEmployee(“Bob”, false, true); Man måste gå in i metoden för att se vad den gör beroende på de booleans man skickar in.

Kommentarer

Kommentera inte koden, metodnamnet ska förklara vad metoden gör tillräckligt bra. Kommentarer riskerar att bli utdaterade när man gör ändringar i metoden och lurar utvecklaren som kommer tillbaka till metoden efter en tid. Martin beskriver kommentarer som lögner just för att de sällan uppdateras när metoden uppdateras.

Bortkommenterad kod ska tas bort direkt. Den är bara i vägen. Den finns fortfarande i versionshanteringen och går att hämta ut när du vill.

Variabelnamn

Använd inte förtkortningar i namnen på variablar. Använd samma princip som i metodnamn

Posted on https://www.christianengvall.se/ren-kod/

Twitter instant

Sun, 03 Oct 2010 19:38:40 +0200

För några dagar sedan utvecklade jag en egen version av Twitter instant. Den uppmärksammades på bland annat pusha och av Tommy K Johansson. Den är inspirerad av Feross Aboukhadijeh sökfunktion youtube instant.

Twitter instant search

Tekniker

Teknikerna som används i söken är jQuery, JSON och Javascript. På sökrutans OnKeyUp-attribut kallas en javascript funktion som i sig gör ett anrop till twitters api och får tillbaka ett JSON svar som sedan visas på sidan. Twitter instant finns att testa ~~här~~

Posted on https://www.christianengvall.se/twitter-instant/

Christian Engvall

Setting up Cypress for a React application

Installing Cypress

Multi-environment configuration

Custom commands

Login commands

Test data reset

Reusable UI interactions

Using data-cy attributes

API interception

CI integration with GitHub Actions

Lessons learned

Update pihole running in a Docker container

Setting up NGROK to work with Litium apps

1. Download and register ngrok

2. Exposing a server

3. Using the ngrok url

4. Docker time

Client secret validation failed for client

Litium fileshares when switching from IIS to Kestrel

Configuring webpack to generate two or more css files

1. Change entries

2. Update the MiniCssExtractPlugin

3.Reference the correct file

4. Read more

Free gift campaign based on content in cart

1. Creating the target group

2. Creating the campaign

3. Add the discount

4. Setting target groups and selecting free product

5. Active the campaign

SveaPayment app - Unable to obtain configuration from System.String

SveaPayment app BIO_new_file:no such file error

A collection of Litium posts

Litium 8

Litium 7

Add an admin user to database using Litium CLI

CurrentUICulture and CurrentCulture in Litium

Usage

Conclusion

Using middlewares with Litium

1. Creating a startup class

2. Creating a middleware

3. Adding logic to the middleware

4. Adding the middleware to the owin pipline

5. Other uses of IOwinStartupConfiguration

Litium filesDirectory and commonFilesDirectory

filesDirectory

commonFilesDirectory

Using Papercut and StateServer

1. Papercut

2. Using StateServer sessionstate

Installing Litium Accelerator

Litium Accelerator

System Requirements

1. Downloading Litium Accelerator

2. Install via Visual Studio

3. Configuring the Accelerator

4. Moving database to Sql Server

5. Adding an IIS site

Updated Electron tutorial app to use Electron v5.0.8

Installing Visual Studio Code and ASP.NET Core on Linux Mint

1. Installing .NET CORE

2. Install Visual Studio Code

3. Install the C# Extension

4. Creating an ASP.NET Core Project

Electron showSaveDialog tutorial

Electron showMessageBox tutorial

Adding more info to the message box

Electron showErrorBox tutorial

Electron dark mode with electron packager tutorial

1. Updating to version 12.2.0 of Electron packager

2. Update packager script to enable dark mode

3. Package app

4. Switch to dark mode

Update to latest Electron version

1. Updating the version used in package.json

2. Updating the global electron version

3. Test your app

Electron showOpenDialog tutorial