Andeers.com

DDEV

2025-02-22T23:01:00Z

I've been working with Drupal for about 12 years now and I've tried a lot of tools for local development: Vagrant, Mamp, Xampp, Docker and installing everything directly on my Mac.

All of these solutions worked, but they also had problems. The setup I liked the most was installing PHP, MySQL directly on my mac and set up a local domain with dnsmasq. This setup worked great for me but one big issue was that over time you work with a lot of different clients that all have different web servers, versions of stuff and requirements. My local setup required me to change the PHP version on my mac everytime I needed to test something specific (and change back when I was done). Figuring out bugs happening on a specific web server or database version was even more problematic.

Enter DDEV

DDEV is docker based, and I was quite skeptical in the beginning because of my earlier attempts at docker based development. Slow websites, much config and work to get the docker files to work as I wanted.

With DDEV all of the Docker stuff is abstracted away and for regular projects you only touch a single file config.yaml.

It can look like this:

# .ddev/config.yaml
name: example
type: drupal9
docroot: web
php_version: "8.3"
webserver_type: nginx-fpm
router_http_port: "80"
router_https_port: "443"
xdebug_enabled: false
additional_hostnames: []
additional_fqdns: []
database:
    type: mariadb
    version: "10.4"
nfs_mount_enabled: false
mutagen_enabled: true
use_dns_when_possible: true
composer_version: "2"
web_environment: []
nodejs_version: "16"

With this file in your project all you need to do is type ddev start to have a website running at example.ddev.site. If you need to switch to apache or use a different PHP version, edit the config and type ddev restart.

Many possibilities

DDEV works without configuring anything more than the above. But it can do so much more. You can specifiy custom docker images, add multiple hostnames and enable addons. There are addons for elasticsearch, varnish, mongodb++.

Good framework support

DDEV has a generic PHP project template so it could work with all kinds of PHP based projects. But it also comes with support for many popular frameworks like Drupal, WordPress, Statamic and more.

Installing DDEV

DDEV has very good documentation for many environments.

On a mac you can install it with brew like this:

# Install DDEV
brew install ddev/ddev/ddev

# One-time initialization of mkcert
mkcert -install

Bottom line

DDEV has made it so easy to work with multiple PHP-versions, packages, web servers and setups without having to juggle versions and install everything locally.

Can Prettier be used with Drupal?

2023-04-19T00:00:00Z

Prettier is a fantastic tool for JavaScript developers, and after reading about its PHP plugin, I decided to give it a try. Since I primarily work with Drupal, I was curious to see how well Prettier would work with it.

Setting up Prettier for PHP

To get started, I created a package.json file in the root of my Drupal project and installed Prettier:

npm init --yes
npm install --save-dev prettier @prettier/plugin-php

The Prettier PHP plugin comes with several options that can be configured in a .prettierrc.json file. To make it format code according to Drupal Coding Standards, I set the following options:

{
  "phpVersion": "8.1",
  "tabWidth": 2,
  "braceStyle": "1tbs",
  "singleQuote": true
}

Prettier's PHP plugin has excellent documentation for configuring it in various editors and IDEs.

Can it be used with Drupal?

The short answer is no.

The longer answer is that there are some Coding Standards rules that can't be configured according to Drupal:

TRUE, FALSE and NULL must be uppercase, not going to happen according to this issue.
Prettier wraps lines longer than the printWidth in a way that makes Drupal CS complain on some array elements.
Drupal requires an empty line before the closing bracket of a class, which Prettier removes.

While there may be other issues, these are the ones I encountered during my testing. It's a shame, because the "format on save" feature is so nice.

I think it can be a good fit for other PHP projects who follow the PSR-12 standard.

This is not a redesign, it's the beginning of one

2023-01-31T00:00:00Z

In the past all my redesigns have been a process of working hard for a while on a redesign, getting tired, and publishing it. Then I would not do anything about it until the urge for a redesign appeared again.

This is not a good approach I think, the process should be more continuous. A nice thing about websites is that it's easy to make adjustments. So this time my plan is to make it a longer process with iterations and adjustments from time to time.

I'm hoping this will make everything more motivating to me and let my website evolve into something I really like.

After all it is a personal website and not some super important website built for a client. Personal websites should be a place to show who you are, experiment with technologies and do whatever you want.

I hope to release the beginning of my redesign very soon, and then make adjustments and improve it from time to time.

So to quote Ted (yeah, I like How I Met Your Mother): "Make, Adjustments, Go, Get, It, Energized"

Simple drush with and without ddev

2023-01-27T00:00:00Z

I've recently started using DDEV for local Drupal development, it's very nice but the old way of using drush is very stuck in my muscle memory.

I decided too see if I could find a way to get the best of both worlds.

DDEV provides a cli that allows you to interact with the docker container, and also check the status of it (with json!). The command ddev status gives you information about the project you are in at the moment in your terminal.

So it should be possible to write a bash script/function that runs that command and checks if we are in a DDEV environment or not. Based on that we could either run the regular drush command or the ddev drush command.

It turned out parsing JSON is not that easy in bash, so I had to resort to a external dependency JQ. Installed with brew require jq.

It allows me to pipe the JSON output of the ddev command and extract the single property (status) that I'm after.

The solution

% function drush2 () {
  ddev_running=$(ddev st --json-output | jq -r '.raw.status')

  if [[ $ddev_running == "running" ]] then 
    ddev drush $@ 
  else 
    drush $@ 
  fi 
}

This is a ZSH function that I put in ~/.oh-my-zsh/custom/functions.zsh. After restarting the terminal I get a new command drush2 that works with regular drush and ddev drush.

2022

2023-01-05T00:00:00Z

2022 has come to an end. It feels like the year went by in a blink. My daughter turned two at the start of the year, work has had exiting challenges. This website though, has been left untouched.

Work

I've spent a lot of time this year making Drupal run in Kubernetes, since our hosting provider wanted to move us to the "cloud". It's been a steep learning curve and kind of outsite of what I usually do, but a fun experience nonetheless.

My colleagues and I went to Prague for Drupal Con Europe in october, which was my first conference since 2019.

I've also worked with e-commerce in Drupal and made som cli tools with Node.js.

Personal life

My daughter turned 2 years in January and is a big part of the non-work time. It's so exciting to see her grow and learn new things. I've been able to read a few books which is nice.

I startet jogging in November, doing a run or two per week. Feels good to be active so that's something I would like to continue doing.

Other stuff

My website has not been the most active place this year, I haven't had the time/motivation to neither write or work on it. And that has been ok. With a full time job and a family side projects has not been a priority.

With all the crazyness going on at Twitter I made the move to Mastodon in November. After the initial finding-a-nice-server struggle the experience so far has been really nice. I like my social media non-algorithmic. On twitter I always was quite passive, but on Mastodon I feel more motivated to actually participate and share stuff.

I ended the year closing 3 windows and loads of tabs on my computer, subscribing to RSS feeds where possible. Removing clutter feels really good and makes it easier to focus.

Plans for 2023

I hope to make a habit of jogging and becoming more active. Keep doing non-web activites with my family and keep a good work-life balance.

Not doing so much side-stuff and starting to use Mastodon has given me some motivation to write more and make this website my home on the internet. Another thing I want to do is to find a better way of writing and managing content. Right now I have drafts in notion and do my formatting/publishing in VS Code. I'm considering using some kind of CMS as a backend and keep my site static. But time will show.

To summarize my plans:

10 blog posts this year (at least more than 2022)
Update this website
Continue jogging

Create-react-app in Drupal

2022-02-08T00:00:00Z

Create-react-app (CRA) is nice to start a react project without messing with webpack and react setup. But CRA generates JS and CSS files with a hash in the name which makes it hard to include them in a Drupal library.

A libraries.yml entry looks like this:

module_name:
  js: 
    js/script.js: {}
  css:
    component:
      css/style.css: {}

To make it work with CRA we would have to update the file path each time we rebuild.

Hooks and a manifest to the rescue

To automate it we can use a file generated by CRA and a Drupal hook. But first we define the library with empty CSS and JS objects, We'll add the files from CRA later.

module_name:
  js:  {}
  css:
    component: {}

Luckily for us, CRA generates a asset-manifest.json file that is generated on build and looks like this:

{
  "files": {
    "main.css": "./static/css/main.e5894e93.css",
    "main.js": "./static/js/main.1c36d7cb.js",
    "index.html": "./index.html",
    "main.e5894e93.css.map": "./static/css/main.e5894e93.css.map",
    "main.1c36d7cb.js.map": "./static/js/main.1c36d7cb.js.map"
  },
  "entrypoints": [
    "static/css/main.e5894e93.css",
    "static/js/main.1c36d7cb.js"
  ]
}

Combining this file with the Drupal hook hook_library_info_alter() we can update the library definition when rebuilding the Drupal cache:

function module_name_library_info_alter(&$libraries, $extension) {
  // The library name as defined in libraries.yml
  $library_name = 'module_name';

  if (isset($libraries[$library_name])) {
    // Get the path to the module.
    $pathResolver = \Drupal::service('extension.path.resolver');
    $path = $pathResolver->getPath('module', $library_name);

    // Load the manifest file and decode it.
    $manifest = json_decode(file_get_contents($path . '/client/build/asset-manifest.json'), TRUE);

    // Relative path to the build directory of CRA.
    $cra_build_path = 'client/build/';

    // Loop through the manifest and build the library definition.
    foreach ($manifest['files'] as $key => $realpath) {
      if (substr($key, -strlen('css')) === 'css') {
        $libraries[$library_name]['css']['component'][$cra_build_path . ltrim($realpath, '\.\/')] = [];
      }
      else if (substr($key, -strlen('js')) === 'js') {
        $libraries[$library_name]['js'][$cra_build_path . ltrim($realpath, '\.\/')] = [];
      }
    }
  }
}

The code loads the asset-manifest, loops through each of the files and adds the files that passes the check to the library. We check for CSS and JS files since we don't want the index.html file and the map-files.

Now, we can clear the cache and the current CSS/JS files will be added to the library.

2021 in review

2022-01-13T00:00:00Z

Another year has passed, for me it's been a year of parental leave and Drupal. With a kid there hasn't been that much time for hobby projects, but I have learned a lot and expanded my knowledge of Drupal

Some stuff that happened:

Started the year with parental leave 👏
Started on a Unity course (refreshing to try something new and different)
Had a nice summer vacation hiking in the mountains
Amalie started kindergarten 😊
Held a presentation about Drupal in an internal work conference 😃
Wrote only two blog posts 😕

Plans for the next year

When christmas comes I always get motivated to work on this website. I haven't gotten to it yet, but some things I want do is:

Update the styling (get better at design tokens, font scales and such)
Set up NetlifyCMS or something similar to separate blogging and coding
Blog more (always a goal)
Improve the design (never get satisfied am I right?)

Workwise I want to continue working with Drupal, expand my knowledge and test out different ways of using it. I have also decided that I want to learn Typescript and figure out why everybody is talking about it.

The most important thing for the next year is to have a healthy work/life balance.

Permissions API

2022-01-06T00:00:00Z

Today I learned about a new browser api called Permissions API. It's a new API that allow you to check the current state of different API permissions such as Geolocation.

It can look like this:

navigator.permissions.query({name:'geolocation'}).then(function(result) {
  console.log('The current state of geolocation permissions are:', result.state);
  // result.state can be "granted", "prompt" or "denied".
});

Use cases?

I came across it when looking for a way to check the status of geolocation before prompting the user to allow it. If you know the user has approved it you can show a map or load some locations when the page loads without bothering the user.

It's a experimental API so it's not the safest to use in production. It's supported in most major browsers execpt Safari, and you can read more about it here.

How to disable FLoC on Netlify

2021-06-01T00:00:00Z

FLoC is Googles next attempt at tracking people online. You can read more about it in this nice article by Adactio.

Both WordPress and Drupal are discussing if they should disable it by default.

In the meantime, if you’re a website owner, you have to opt your website out of the origin trial.

Do opt out of it on Netlify all you have to do is add some lines to your netlify.toml:

[[headers]]
    for = "/*"
    [headers.values]
        Permissions-Policy = "interest-cohort=()"

This will add a header to your website that will tell Google Chrome that your website don't want to participate. It may not be necessary, but it's an easy fix.

10 years!

2021-04-25T00:00:00Z

This website is 10 years old! My first blog post was posted on the 18th of March 2011, as a part of a college course about social media.

There have been multiple changes since then:

Switching from Norwegian to English
Writing about web development
Removing Google Analytics in favor of Netlify Analytics
Many design attempts and iterations
Tech stack

My website has always been a place for me to test things, so it's gone through some changes over the years.

It started with WordPress (self hosted), moved to Jekyll (on Github Pages), and finally moved to Eleventy (on Netlify).

So far I've been really happy with Eleventy and see no reason to switch.

Quicktip: Github profile readme

2020-08-31T00:00:00Z

To make your Github profile page more interesting you can now create a readme file that will be displayed at the top of your profile.

This "feature" is kind of hidden, but it's straight forward to enable it. You just have to create a new repository with the same name as your username. For example my username is andeersg, so I created a repository called andeersg with a README.md.

Now I have a new section on my profile with the content of that README.md.

Setting up Nginx with PHP

2020-06-26T00:00:00Z

I'm not a server guy, but from time to time I have to setup a website for testing or development. Here are my steps for setting up nginx with PHP.

Installing nginx

Installing nginx is straight forward:

sudo apt update
sudo apt install nginx

Next is to verify that the firewall accepts nginx.

sudo ufw status

If "Nginx HTTP", "Nginx HTTPS", or "Nginx Full" is not listed you have to add the ones you need (Full is https and http).

sudo ufw allow 'Nginx HTTP'

Installing PHP

Using PHP with nginx requires PHP-FPM. If using Ubuntu 18, the repository must be added.

sudo apt-get update
sudo apt -y install software-properties-common
sudo add-apt-repository ppa:ondrej/php
sudo apt-get update

How to update to Drupal 9

2020-06-06T00:00:00Z

Drupal 9 was launched this week. So if your modules are ready it's time to update.

Updating betweeen major versions can be tricky, sometimes Composer won't update a package because another package have a common dependency, but with another version. And sometimes the conflicting package is the one you try to update.

That happened to me when I tried to update drupal/core from 8.8.6 to 9.0.0.

Drupal 9 required a version of a package that was not compatible with Drupal 8, and that stopped Composer from updating.

Are you ready?

I recommend using the Upgrade Status module to check if your site is ready for Drupal 9. It can scan both custom modules and contributed moduls for problems.

Be aware that unsupported modules won't stop composer from updating, so you could crash your site by updating if some of your code is not compatible.

My solution

Here are the steps I did to update. My project was made from Drupal Project and contained drupal/core, drupal/core-dev and drupal/core-composer-scaffold, all with ^8.8.6 as the version.

First I updated composer.json without actually running the updates:

composer require drupal/core-recommended:^9.0.0 drupal/core-composer-scaffold:^9.0.0 drupal/core:^9.0.0  --update-with-dependencies --no-update
composer require drupal/core-dev:^9.0.0 --dev --update-with-dependencies --no-update

Since it's a new major version, composer require is needed instead of update. The option --update-with-dependecies makes composer update dependecies of the specified packages. --no-update prevents Composer from actually updating the packages.

Then it should be safe to run

composer update

After this you should remove drupal/core since drupal/core-recommended is installed.

composer remove drupal/core

And that's it, run database updates and enjoy Drupal 9.

Generate many screenshots for inspiration

2020-04-22T00:00:00Z

Drafts and scheduled publishing

2020-04-14T00:00:00Z

A nice feature I had in Jekyll was drafts and the option to schedule publishing of content.

In Jekyll you placed drafts in a separate folder called _drafts and when you built the site with the flag --drafts they where included.

I have gone a different way in my Eleventy site, and keep the drafts in the same folder (_posts) as the published content. To mark something as draft I add it to the front matter: draft: true. Combined with that I have the following functions in .elevent.js.

These functions do things based on environment, you can read how to add environment variables to Eleventy in this other post I wrote.

const drafts = (item) => {
  if (!eleventyVars.development && item.data.draft) {
    // If not development, and draft is true, skip it.
    return false
  }
  // Return everything by default.
  return true;
};

This function is used as a array filter callback to skip the drafts if the current environment is not development.

Scheduled publishing

For scheduling content I do a similar approach, I check the defined date vs the current date, and skip the item in production if it's in the future.

const future = (item) => {
  // If item date is before now it's safe to publish it.
  if (item.date <= now) {
    return true;
  }

  // If it's in the future we can publish it in development.
  if (eleventyVars.development) {
    return true;
  }

  // In future and not development, skip it.
  return false;
};

The scheduling check only works when the site is deployed/built. So I have used ifttt.com to automatically rebuild my website hosted on netlify.com each night.

The complete solution

I have all of this in a helper function I use to generate the collection.

function getPosts(collectionApi) {
  const globs = [
    './_posts/*',
  ];
  const now = new Date();

  const drafts = (item) => {
    // See function above.
  };
  const future = (item) => {
    // See function above.
  };

  return collectionApi.getFilteredByGlob(globs)
    .filter(item => !!item.data.permalink)
    .filter(drafts)
    .filter(future)
    .reverse();
}

It's important that you add these checks to all collections you output, so your drafts are not published on the archive page or in the rss feed.

If you want to look at my whole code you can check it out on Github.

Possible changes

If you want to keep the drafts in a separate folder the getPosts function could be changed to include the drafts folder in the globs-array instead of checking the draft variable. I'm considering doing this my self.

Disable row in Drupal tableselect

2019-09-26T00:00:00Z

When you use the tableselect element there may be reasons you want to make a row not selectable:

Permissions
Missing properties on the element
Or any other reason to not make a row selectable

I had to do this recently and thought it should be a easy thing to do, since all form elements seems to support the #disabled property.

A tableselect element looks something like this:

$form['table'] = [
  '#type' => 'tableselect',
  '#multiple' => FALSE,
  '#header' => [
    'name' => 'Name',
    'age' => 'Age',
  ],
  '#options' => $options,
  '#empty' => 'No items available',
];

And then each entry (in $options) would look like:

$options['anders'] = [ // knowing the key is important for disabling.
  'name' => [
    '#markup' => 'Anders',
  ],
  'age' => [
    '#markup' => 30,
  ],
];

You would think the way to disable a row is to just add '#disabled' => TRUE; to the option entry, but no, nothing happens.

To actually disable a row you would need to target the same key outside the #options array. Like this:

$form['table']['anders']['#disabled'] = TRUE; // Added directly to tableselect element.

In my opinion this is quite confusing.

Refresh Service Worker

2019-07-21T00:00:00Z

Have you ever enabled a service worker and then realised that your updates are not showing because of caching. I have.

According to MDN a service worker will update every 24 hour or so or when all pages/instances are closed.

This can be a problem if you have made recent changes or the website is added to home screen. There could be reasons not to force update the service worker whenever a new one is available, so a better solution is to prompt the user to update (if they want to).

How to detect when a new worker is available

There are two parts to manage this. The service worker must listen for messages from the browser (client refreshing), and the browser must listen for new service workers.

Service worker

To listen for messages inside the service worker we need to add an event listener for the message event.

In my solution I send an object to the service worker with an action property. So when the service worker receives action: 'skipWaiting' it knows to activate the pending worker.

self.addEventListener('message', function(event) {
  if (event.data.action === 'skipWaiting') {
    self.skipWaiting();
  }
});

Browser

First you need a button to click.

<button class="refresh-worker hidden">A new service worker is available, click to reload</button>

I recommend to hide it with CSS. If JS or service workers are not supported it has no purpose and can stay hidden.

const refreshButton = document.querySelector('.refresh-worker');
let newWorker = null;
    
refreshButton.addEventListener('click', (event) => {
  event.preventDefault();
  newWorker.postMessage({ action: 'skipWaiting' });
  window.location.reload();
});

First we need a reference to the button (for click handler) and a variable to put the service worker in when it's available.

When the button is clicked we send a message to the worker telling it to skip waiting and activate the new worker. Then we refresh the page.

Next we must listen for service worker updates so we know when to display the button and prompt the user to update.

// Register service worker:
navigator.serviceWorker.register('service-worker.js')
  .then(function(registration) {
 		// Listen for updates:
    registration.addEventListener('updatefound', () => {
      newWorker = registration.installing;
			// Listen for when the new worker is ready:
      newWorker.addEventListener('statechange', () => {
        switch (newWorker.state) {
          case 'installed':
            if (navigator.serviceWorker.controller) {
 							// Display button:
              refreshButton.classList.remove('hidden');
            }
            break;
        }
      });
    });
  });
}

When the worker is ready to be activated we can display the button and inform the user that a new version is available.

Eleventy tip: Markdown template engine

2019-04-23T00:00:00Z

You can use helpers, filters and template logic in your markdown files. And by default the template language for markdown files is liquid. This can lead to interesting results when you use a different template language that looks the same.

To fix this and ensure correct results you can define which template engine should be used for markdown files like this (in .eleventy.js):

module.exports = function(eleventyConfig) {
  return {
 		htmlTemplateEngine: 'hbs', // Engine for html files.
 		markdownTemplateEngine: 'hbs' // Engine for markdown files.
  };
};

Eleventy Essentials

2019-03-31T00:00:00Z

I switched my personal site to Eleventy recently. It's a very good static site generator. Here are some tips and tricks I have discovered that are nice to have when you are creating a site.

Start using the _data folder

If you come from Jekyll you are used to different kinds of variables being available in your templates (site.time, site.posts). Eleventy does not have these by default, but it's quite easy to add them (and more).

Each JSON/JS file in the _data folder will become available under the filename namespace in your templates. So _data/meta.json becomes available as meta.some_key_inside_file.

eleventy.js

The first file I create contains things related to the engine and environment.

module.exports = {
  production: process.env.ELEVENTY_ENV === 'production',
  development: process.env.ELEVENTY_ENV === 'development',
  env: process.env.ELEVENTY_ENV || 'development',
  notReady: false, // Flag to prevent something from rendering.
  time: () => {
    return new Date(); // Simplest example, could use Moment.js to return another format.
  },
};

This gives me access to information about environment so I can exclude Google Analytics if it's not production, or print more information in development.

metadata.json

{
  "title": "Andeers.com",
  "description": "Personal site of Anders Grendstadbakk",
  "url": "https://andeers.com/",
  "feed": {
    "subtitle": "I mainly write about web development and tech.",
    "filename": "feed.xml",
    "path": "/feed/feed.xml",
    "url": "https://andeers.com/feed/feed.xml",
    "id": "https://andeers.com/"
  },
  "author": {
    "name": "",
    "email": ""
  }
}

The metadata.json contains information about this site and me. I also have some fields for the RSS feed. It's nice to collect all this information in one file so when you make changes you have it all together.

.eleventy.js

This file is where you define collections, filters, and shortcodes.

A hot tip is that since this is node.js you can require() your data files here and access the variables. This way you can use content from metadata in helper functions, or output something different in development.

const eleventyVars = require('./_data/eleventy');

Create a collection based on a folder of files

eleventyConfig.addCollection('posts', function(collection) {
  return collection.getFilteredByGlob('./_posts/*').reverse().filter(function(item) {
    // Only include items with a permalink.
    return !!item.data.permalink;
  });
});

This gives you a collection of all items in the _posts folder.

Latest posts

eleventyConfig.addCollection('latestPosts', function(collection) {
  const posts = collection.getSortedByDate().reverse();

  let items = [];
  for( let item of posts ) {
    if(!!item.inputPath.match(/\/_posts\//)) {
      items.push( item );
      if( items.length >= 5 ) {
        return items;
      }
    }
  }
});

This snippet gives you a variable with the 5 latest posts you can use on your front page.

Date functions

eleventyConfig.addFilter('readableDate', dateObj => {
  return DateTime.fromJSDate(dateObj).toLocaleString(DateTime.DATE_FULL);
});

// Used in Handlebars like this: {{readableDate post.date }}

This function renders the date in a specific way, but it could easily take another argument that specifies format, or use Moment.js in stead of Luxon.

Meta functions

eleventyConfig.addFilter('pageTitle', title => {
  if (title && title !== '') {
    return `${title} | ${metadata.title}`;
  }
  return metadata.title;
});

eleventyConfig.addFilter('pageDescription', (description, opt) => {
  const {content, excerpt } = opt.data.root;

  if (description && description !== '') {
    return description;
  }
  else if (excerpt && excerpt !== '') {
    return excerpt;
  }
  else if (content && content !== '' && !opt.data.root.isFront) {
    return snippetGenerator(content);
  }

  return metadata.description;
});

I have two functions I use for <title> and <description>. The first one renders the page title with the site name appended, and if a page title is not available it just returns the site name.

The pageDescription check multiple places for a description, first if one was specifically defined, then it tries to generate one from the content of the page. If that does not work it falls back to the generic site description.

Other stuff

In the root index.html I add a isFront: true to the front matter, this makes it possible to do conditional stuff when rendering the front page:


<section>
  {{#if isFront}}
    <p>This paragraph is only written to the front page.</p>
  {{/if}}
  <p>This paragraph is rendered on all pages.</p>
</section>

Since my website is a work in progress I will probably find other useful snippets to make Eleventy even better, so check this site out on Github.

The CSS Widows

2019-01-14T00:00:00Z

If you are like me you have probably been annoyed when your editor autocompletes wid to widows and you wanted width or something similar.

I have always wondered why my editor is not smarter, since this is something I have never used. And I have to admit that up until I started writing this I have thought it said windows.

But the last time I saw it I had more time and started to wonder. What does it do?

What are widows?

The word comes from print, and references the last line of a paragraph if ends up on a new page. If on the other hand a paragraph starts at the very bottom of a page (and continues on the next) it's called a orphan.

The widows CSS property sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.
Widows at developer.mozilla.org

In CSS this can work on not only print, but also CSS columns. It works the same way in CSS, you control how much of a block (typically a paragraph) will continue on the next page/column before the whole block follows over.

Example

/* Apply the widows property to the parent element of paragraphs. */
.paragraphs-container {
  widows: 2;
}

And thats everything you need. If the page breaks or the text spans across multiple columns no more than two lines of a paragraph will continue over to the next page/column.

Different front page for logged in users in Drupal 8

2018-09-16T00:00:00Z

Sometimes we have the need to show logged in users something different than the regular visitors. It could be a dashboard for logged in users and a landing page for regular users. Or anything.

How to solve it

At first I tried using the configuration override system to override the front page setting, but this does not work. It looks like that setting cannot be overridden on a per user role basis.

I thought about checking the current user and if they are logged in redirect to /dashboard, but redirecting seems unnecessary for this.

So created a module with a route called /front, and my own controller with a method that looks something like this:

public function frontpage() {
  $current_user = \Drupal::/currentUser/();

  $output = [
    '#cache' => [
      'contexts' => [
        'user.roles',
      ],
    ],
  ];

  if ($current_user->isAuthenticated()) {
    $output[] = $this->userDashboard();
    return $output;
  }
  else {
    $config = \Drupal::/config/('custom_module.setup');
    $id = $config->get('visitor_front_page');

    $node = Node::/load/($id);
    if ($node) {
      $output[] = node_view($node);
      return $output;
    }
  }

	return ['#markup' => 'Something went wrong'];
}

First I check if the visiting user is logged in, and if they are I return the render array for a dashboard. If they are not logged in I load a node specified in my modules config and return this. If the node is not found I return a simple text.

Improvements

You could extend the check to do different stuff based on the role or permission of the user. Maybe return better fallback content than in my example.

Use DigitalOcean and home computer to update domain IP

2017-02-25T00:00:00Z

Using DigitalOcean(DO)'s API, a domain and a script on your home computer, you can have a subdomain pointing to your home network all the time.

If you just want the script, here it is (remember to to replace [token], [domain] and [record_id]):

#!/bin/bash

PUBLIC_IPV4=$(curl ifconfig.co)

curl -X PUT -H "Content-Type: application/json" -H "Authorization: Bearer [token]" -d '{"data":"${PUBLIC_IPV4}"}' "https://api.digitalocean.com/v2/domains/[domain]/records/[record_id]"

Put this script with your values somewhere inside your network and call it from time to time and you should be good to go.

For more details, please read on.

Prerequisites

To set this up you need the following:

Configure your domain to use DigitalOcean's name servers
Create a A-record for your subdomain and point it to your external IP (What is my IP?)
Generate a API token in the dashboard at DigitalOcean

Find the domain record id

As far as I've seen, is there no way to find the domain record id from the web interface. So the easiest solution is to use their API and the terminal.

If you execute the following script (with replaced values):

curl -X GET -H "Content-Type: application/json" -H "Authorization: Bearer [token]" "https://api.digitalocean.com/v2/domains/[domain]/records"

You will get back a JSON object will all entries for your domain. In here you will find the id.

Run the script automatically

Since you don't want to run this script manually, we should set up some automation. This differs from OS to OS, but here are some options:

Linux

If you have a Raspberry Pi or some other computer with a linux OS you can use cron:

0 * * * * /path/to/script/update_digital_ocean.sh >/dev/null 2>&1

This example will run update_digital_ocean.sh every hour and not generate any output. You can use this generator to create your script.

To configure it on your computer type crontab -e inside your terminal to open the crontab file. Here you can just copy in your line at the end of the file and save.

OSX

Apple don't use cron anymore, they use something called launchd. I'm not that familiar with it, but found this launchd-generator you can use to create a launchd.plist file.

After you generate a file this website also tells you where to place it.

Windows

For Windows I really don't know (I'm sorry), but I found this StackOverflow thread that has an answer which lists a couple of tools for different versions of Windows.

Why is this necessary?

Most internet providers don't give you a static IP at home, so your IP address may suddenly change. This will break your domain and you will not be able to connect anymore.

This script will update the domain with the correct IP every time it's executed.

Remember to configure your router

Even if your domain points towards your home, you will have to do some changes to the router configuration to be able to serve websites or connect with SSH.

If you want to serve a webpage at port 80, you need to port forward external port 80 to the local IP of your computer. The same for every other port you want to use.

Ideas for what you can do with it

Set up Home-Assistant
Some torrent clients have a web ui, you could access it from everywhere and manage your downloads
Enable SSH access to your computer
Probably you could run a Minecraft (or many other games) server

Credit should go to DigitalOcean community where I found the script.

Entity API in Drupal 8

2017-02-13T00:00:00Z

A quick walkthrough of the most common entity operations in Drupal 8.

Changes from Drupal 7

Everything is different from Drupal 7, but if you really want to you can still use [core_entity]_load and [core_entity]_load_multiple. You should note that they are marked as deprecated in the code and will be removed (In Drupal 9), so you should just use the new ways right now.

Load a node in Drupal 8

To load a node in Drupal 8 you have to use the Node class:

use Drupal\node\Entity\Node;

$node = Node::load(1);

Update: A good friend of mine Zaporylie, told me of a better way of loading nodes (and other entities):

$entity = $container->get('entity_type.manager')->getStorage('entity_type')->load($entity_id);

Doing it this way makes it easier to extend functionality and override original node class.

Working with fields

To get values from your node you can either use some of the defined methods:

$node→getTitle();
$node→getOwner();
// There are a lot more of these methods, and you can inspect the with dpm().
dpm($node);
// To see all methods just switch to the "Available methods" tab.

Or you can just specify the field name:

$field = $node->field_name;

Most fields will be an instance of FieldItemList, but images and attachments for example will be of FileFieldItemList.

There are multiple ways you can get the field values, in this example the field is a formated text field (with format and value).

// Array of values, if you don't have multiple values it will be an array with one item.
$value = $field->getValue();
echo 'My value is: "' . $value[0]['value'] . '", it uses the format: ' . $value[0]['format'];

// Or you can fetch a specific value, you specify the index for the value you want.
// This will return a field class instance.
$value = $field->get(0);
$value->value; // Text.
$value->format; // The format.

Updating and saving entities

To update a node you can use the set method of the node class:

$node->set('field_text', [
  'format' => 'full_html',
  'value' => '<p>Updated text is better than old text.</p>',
]);

You can also update values directly like this:

$node->body->value = 'body';
$node->body->format = 'full_html';

But in my opinion it’s much cleaner to use the set method.

To actually store your changes you have to call the save method:

$node->save();

Creating a new entity

To create a new entity you have to use the static method create:

$node = Node::create([
  'title' => 'My programmatically created node is amazing',
  'created' => time(),
  'changed' => time(),
  'type' => 'page',
  'langcode' => 'en',
  'uid' => 1,
  'body' => [
    'format' => 'full_html',
    'value' => '<p>Welcome to my node.</p>',
  ],
]);

And after creating the node object you have to save it with the save method.

Deleting entities

Deleting a entity is quite easy. You just need to call the delete method.

$node->delete();

What's next?

There is a lot of functions available for the different entities, I really recommend you to look into the entity class file to see what methods are available.

Programming advent calendars

2016-12-03T00:00:00Z

If you like coding and advent calendars I can really recommend Advent of Code. Every day up until Christmas you get access to a new two-part task you have to solve with programming.

Here is my solution to day 3 if you want to get inspired/see what it can be:

var fs = require('fs');

var triangles = fs.readFileSync('./input-triangles.txt', 'UTF-8');
triangles = triangles.split("\n");

var possibles = 0;
var possibles2 = 0;

var i = 1;
var cols = [];

triangles.forEach(function(line) {
  line = line.replace(/^-/, '');
  
  var a = parseInt(line.substr(0, 3).trimLeft());
  var b = parseInt(line.substr(5, 3).trimLeft());
  var c = parseInt(line.substr(10, 3).trimLeft());
  
  if ((a + b > c) && (a + c > b) && (b + c > a)) {
    possibles = possibles + 1;
  }

  if (i < 3) {
    cols.push([a, b, c]);
    i++;
  }
  else if (i == 3){
    cols.push([a, b, c]);
    for (var k = 0; k < 3; k++) {

      var aa = parseInt(cols[0][k]);
      var bb = parseInt(cols[1][k]);
      var cc = parseInt(cols[2][k]);
      if ((aa + bb > cc) && (aa + cc > bb) && (bb + cc > aa)) {
        possibles2 = possibles2 + 1;
      }
    }
    cols = [];
    i = 1;
  }
});

console.log(possibles);
console.log(possibles2);

I really enjoy these kinds of challenges, because they make me think about solving stuff I normally wouldn’t. And when I try to solve the problems I often come across things I can use later in my regular work.

So if you have some spare time and enjoy challenges I really recommend programming advent calendars.

24 days of Christmas

2016-12-01T00:00:00Z

December is here. Enter the advent calendars and gingerbread cookies.

This Christmas I have decided to try to write a blog post every day. I haven’t made any specific plans on what to write about, but it will be related to web development, open source and productivity.

So to kick it off I want tell you about this small library I made at work. I had to import some documents from a Norwegian service that gives municipalities texts for services they are required to provide on their websites (quite the niche service).

“Surprisingly”, there was no open source library for this integration available in PHP, so I decided to create one. I were going to use this integration in a Drupal 8 site, but decided to split out the library since the rest of the project is closed source.

Drupal 8 has really good composer support, so it’s very easy to include PHP libraries into Drupal. So now I have a composer package on Github that anyone can use, and a Drupal module that uses the library to integrate everything into Drupal.

Another benefit of separating the API and platform specific code is that multiple platforms can re-use the library. No need to reinvent the wheel and it may be easier for other people to contribute, since developers of Drupal, WordPress and other frameworks may want to use it.

The best thing about open source is that maybe someone else will have need for what you have made. The library I mentioned earlier is very specific, so maybe nobody will need it. But if a PHP developer is looking for a way to integrate with Norwegian service directory, there is a library for that.

Optimizing websites

2016-06-01T00:00:00Z

I have recently done some optimizations to my blog to improve the loading speed of it, and thought I should write it down, because a faster web-site is a happier web site.

If you want to take a closer look at the examples in this post you can take a look at my website's repo on Github.com.

JavaScript

Every website that showcases code samples need some syntax highlighting, but not all pages have code, so loading the syntax highlighting library on all pages is unnecessary.

To optimize this I found a simple lazy-load function created by David Walsh. It allows you to load CSS and JavaScript after the rest of the page has loaded. To only load prism.js when there is code to highlight I have this simple snippet

if (document.querySelectorAll('pre').length) {
  load.js('/assets/js/prism.js', function() {
    Prism.highlightAll();
  });
}

Fonts

If there is one thing page speed test complain about it’s web fonts. So to improve the performance of them I started with an article I found on The Filament Group blog about optimizing font performance. It suggested base64-encoding the font files and place them in separate CSS-files which then are lazy loaded. And that approach worked. If the web font took some time to load it was quite noticeable when the font switched from the fallback to the web font.

But then I came across this newer article from The Filament Group where they have found a better way by using font events.

By using this approach you don’t have to base64-encode your font files or do anything else with the fonts. Just define them as usual in @font-face, and split your font-family declaration into two blocks, the regular body and one with a special class.

body {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.loaded-fonts body {
  font-family: 'Ubuntu';
}

Then you can use a FontFaceObserver library to load the fonts and append the special class to your page. By doing it this way, the class is only appended to the page when the font is ready to use, so there should be no FOIT at all.

if(typeof Promise !== "undefined" && Promise.toString().indexOf("[native code]") !== -1) {
  if (localStorage.webfontsLoaded) {
    document.documentElement.className += ' loaded-fonts';
  }
  else {
    new FontFaceObserver( "Ubuntu" )
      .check()
      .then(function() {
        document.documentElement.className += ' loaded-fonts';
      });
    localStorage.webfontsLoaded = true;
  }
}

I choose to use a version of the FontFaceObserver library without a Promise polyfill. So if the visitor does not support Promises they get the fallback. I also store a variable in localStorage when the web font have been loaded, so the next page load we just use the web font immediately.

Inline scripts

Since I don’t have that much JavaScript I didn’t want to have an extra JS-file. So all my JS is inline, and then I had the problem that if I had my Javascript un-minified it was not as optimized as possible, and if I minified it, it was not that easy to work with.

Since I use a static site generator it’s more limited what can be done compared to something like WordPress or Drupal.

I already have Gulp to preprocess Sass, so I looked for something to minify inline scripts and found gulp-minify-inline. Next I created a folder _pre_build and configured Jekyll to ignore it.

exclude: [_pre_build]

Inside that folder I can put any file that exists in my Jekyll folder, like the _includes/head.html file I use for my <head> section.

In the _pre_build folder I can have html files with un-minified scripts and then let Gulp minify them and move them to the “real” folders that Jekyll uses.

var minifyOptions = {
  jsSelector: 'script[data-minify="true"]',
  cssSelector: 'style[data-minify="true"]',
  js: {
  "vars": [ "load" ]
  }
};

gulp.task('minify-inline', function() {
  gulp.src('_pre_build/**/*.html')
    .pipe(minifyInline(minifyOptions)).on('error', function(err) {
      console.log(err);
    })
    .pipe(gulp.dest('./'))
});

Future enhancements

Could I have done more? Absolutely. A lot of people split up their CSS into critical and non critical, and then inline the critical and lazy loads the non critical.

I should probably look into using a CDN like Cloudflare.

CSS Calc is pretty neat

2015-10-29T00:00:00Z

With a centered layout it can be hard to have full with elements without a hassle.

In this post will I show you a neat trick to get full width sections in a layout that are centered. If you just want the demo check out this CodePen.

The snippet should work in Internet Explorer 9 and up and the other major browsers.

.full {
  left: calc((100% - 100vw)/2);
  position: relative;
  width: 100vw;
  min-height: 1px;

  // Optional (center padding both sides):
  padding-left: calc((100vw - 100%)/2);
  padding-right: calc((100vw - 100%)/2);
}

{: .language-scss}

The how

The vw unit is the width of the viewport. 100vw is the width of your browser window, 50vw is half.

The left property is where the magic happens:

calc((100% - 100vw)/2)

100% is the full width of the element.
100vw is the width of the screen.
So a screen that is 1200 pixels wide and a element that is 700px wide gives this equation: (700px - 1200px) / 2.
The result of this is -250, so we move the element 250 pixels to the left.
Then we set the width of the element to the full with of the viewport.

Extra options

To center the content inside the full width element we add padding to both sides by flipping the calc function:

padding-left: calc((100vw - 100%) / 2);

I have created a simple demo on CodePen you can explore, with examples for right and left padding only.

See the Pen CSS Calc examples by andeersg (@andeersg) on CodePen.

CSS Grid Layout

2015-10-26T00:00:00Z

If you have worked with the web, grids are nothing new to you. The grid layout specification is a different take on grids than the numerous grid frameworks that exist.

Much like Flexbox does the Grid Layout allow us to control the html in a new and simpler way.

Even though Bootstrap has made it quite easy to set up a grid, there is a still a battle of negative margins, paddings, floating and clearfixes going on.

The Grid Layout specification tries to make it easy to generate grids with rows and columns. With it you can use the space available in a smart way.

You can easily set a column to a fixed with, and another one to take up the rest of the width available. And you have the same options for height, a row can be set to take up all remaining vertical space.

The only way you can test it is with Chrome Canary and a experimental flag turned on.

Unfortunatly Grid Layout has a really poor browser support at the moment. The only way you can test it is with Chrome Canary and a experimental flag turned on. For more updated information on this you can check caniuse.com.

Technical stuff

We need a parent element to get started:

#grid-parent {
  display: grid;
  grid-template-columns: auto minmax(min-content, 1fr);
  grid-template-rows: auto minmax(min-content, 1fr) auto
}

Here we see that the display property has a new value, and that we have two new properties defining the rows and columns in the grid.

The rows and columns are separated with a space, so here we have two columns and three rows.

The various rows and columns can be defined with various values:

CSS Length value (like px),
Percentage
Flex factor (defined with the value fr)
min-content (make the column at least as wide as the content)
max-content (don't make the column larger than the content)
minmax() (takes both a minimum and a maximum value)

Elements in the grid

After we have defined the grid we can take control of the elements inside.

<div id="grid-parent">
  <div id="logo"></div>
  <div id="stats"></div>
  <div id="board"></div>
  <div id="score"></div>
</div>

Here we have a simple markup for a game board. To place these elements in the grid we use the following CSS:

#logo   { grid-column: 1; grid-row: 1 }
#stats  { grid-column: 1; grid-row: 2 / span 2; align-self: start }
#board  { grid-column: 2; grid-row: 1 / span 2; }
#score  { grid-column: 2; grid-row: 3; justify-self: center }

The logo goes top left, below the logo we place the stats. Since we don't have anything to put below, the stats use two rows.

The board also takes two rows in the other column, with the scores underneath.

Since all the grid layouts are defined in the CSS we can easily alter the grid at different breakpoints or with just a parent class.

@media (max-width: 600px) {
  #grid-parent {
    grid-template-columns: auto;
    grid-template-rows: auto min-content auto auto;
  }
  #grid-parent * {
    grid-column: 1;
  }
  #logo   { grid-row: 1; }
  #stats  { grid-row: 4; }
  #board  { grid-row: 2; }
  #score  { grid-row: 3; }
}

Here we completely alter the grid at a small breakpoint, we change it to one column and add some more rows. We also change the order of the elements.

Summary

This was a very short introduction to CSS Grids, and I really recommend the specifications for more examples.

Getting started with Jekyll

2015-09-28T00:00:00Z

A couple of days ago I moved my blog from WordPress to Jekyll, a static site generator. Jekyll has a simple structure that allows for easy theming and styling.

In this post I will go through:

What Jekyll is
How to get started
Features of Jekyll
Hosting your site on Github

What is Jekyll

Jekyll is a static site generator created by Tom Preston-Werner in 2008. It’s written in Ruby and compiles all your source files to a static HTML site.

Since it’s a static site generator you don’t need a database, so it’s fewer “things” to take care of.

And combining it with Github gives you a dead simple awesome blog engine. But more on that later on.

Why should I consider Jekyll?

Fast
No database is needed, so when users visit you don't have to query and handle the data.
Simple
A folder with posts, a couple of layout files, and that is all you need.

The setup

After you have installed Jekyll:

gem install jekyll

You can generate a sample site with the following command:

jekyll new awesome_blog

This command will generate a folder awesome_blog with a working Jekyll site inside.

To see your freshly generated site in action type:

jekyll serve

This will make your blog accessible from localhost:4000 (if you would like another port you can add -P 4242 to the command).

The structure

The main Jekyll file is called _config.yml and contains global settings and variables.
All blog posts are located in the _posts folder.
Layouts are located in the _layouts folder.
Jekyll has builth-in support for SCSS, but more on that later.

Files and folders starting with an underscore will not be part of the generated site. Everything else will.

SCSS

If you are familiar with Compass, Gulp og Grunt tasks this approach may look weird at first.

There are two folders _sass and css, and if you go the Sass folder you would expect a style.scss and some partial files. But in Jekyll the partial files are stored in the sass-folder, and the main sass file that imports them are located in the css-folder. Weird right?

These Sass files will be compiled automatically with the jekyll build or jekyll serve commands, but there is nothing that stops you from using your own CSS preprocessor and folder setup.

Templates

Templates use a templating language called Liquid, if you are familiar with Handlebars or Underscore.js they are kind of similar.

A really simple index page could look something like this:


---
layout: default
---
<div class="home">
  <h1 class="page-heading">Posts</h1>
  <ul class="post-list">
    {% for post in site.posts %}
      <li>
        <span class="post-meta">\{{ post.date | date: "%b %-d, %Y" }}</span>
        <h2>
          <a class="post-link" href="\{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a>
        </h2>
      </li>
    {% endfor %}
  </ul>
</div>

The first part between the dashes is the YAML, and a funny thing I just learnt is that YAML is short for:

YAML Ain't Markup Language

"YAML is a human friendly data serialization standard for all programming languages."

We tell Jekyll that we want to use the default template located at _layouts/default.html. There are a couple of variables you can add to the YAML to configure the output:

permalink - Set the url where this post is located (will override the site setting)
title - The post/page title should be added, this way it is available to the layout and can be displayed in the title tag.

Includes

In Jekyll you have includes, you can think of them as reusable blocks of code.

In the starter theme the header and footer are includes. They are located in the _includes folder and are referenced like this:

{% include header.html %}
{% include footer.html %}

Includes are great for things you repeat on multiple pages and across layouts.

Writing posts

To write a post you simply:

Add a file to the _posts folder with the name pattern yyyy-mm-dd-some-text.md.
Start the file with the YAML block, and add a title and what layout you want to use.
Write your blog post with markdown (or html).
Run the build command or just look at the blog if you use the serve command.
Your first post is visible on your blog!

Hosting on Github

A very cool feature of Github is that you can host your Jekyll powered website for free.

There are two ways you can set this up:

Create a repo called username.github.io and keep your Jekyll site in the master branch.
Site available at username.github.io.
Create another repo and create a branch called gh-pages.
Site available at username.github.io/repo_name.

If you have your own domain it's also very easy to use it. Just add a file called CNAME to your Jekyll folder with the domain you want to use.

Then you just have to point your domain to Github.

Local development with Vagrant

I have created a Vagrant with Ruby and Jekyll that you can use if you don't want to hassle with Ruby on your local computer.

If you have Vagrant installed just do:

git clone https://github.com/andeersg/jekyll-vagrant jekyll
cd jekyll
vagrant up
vagrant ssh
jekyll new my_blog
cd my_blog
jekyll serve

What next?

You could for example take a look at the source code for this blog. Or you could visit Jekyll's homepage to get a more extensive look at Jekyll.

To learn more about hosting on Github I reccomend the Github Pages site.

A new WordPress theme – Part 1

2015-06-18T00:00:00Z

I have for long wanted to improve my site. I was not happy with the old design and I felt like I had locked myself in a corner. The theme used a big banner image (inspired of Medium) and I never felt I could create a nice image for it.

And also the code was a mess and I was not motivated to improve it. So I decided to start working on a new theme. For months I have crawled the web looking for inspiration since I haven’t been sure what kind of style I wanted for this blog.

I also have a habit of not getting satisfied with my own private work (guess most developers are like that), so I decided that I should get the theme working, enable it and improve it afterwards.

So in this blog entry, and hopefully a couple of more I will document the stuff I have done to make this site better.

Getting started with a theme

I use _s as a template/starting point so I know that I have best practice WordPress code as a base, then I set up my Gulp config.

In my wp-config.php I have added a constant:

define('ENVIRONMENT', 'development');

That way I can do this in my functions.php to automatically get the unminified CSS in development environments:

if (ENVIRONMENT == 'development') {
  wp_enqueue_style( 'adams-style', get_stylesheet_directory_uri() . '/assets/css/style.css' );
}
else {
  wp_enqueue_style( 'adams-style', get_stylesheet_directory_uri() . '/assets/css/style.min.css' );
}

And this technique can be used for javascripts and other “things” that should have different setups in development.

Publishing it

I have put this theme on Github, you can look at it here. May plan is to create a develop branch, and keep the master branch like the live site at all times. I really like this Git workflow, and plan to use it for this theme.

So if you find any bugs or see room for improvements, feel free to create an issue or a pull request.

What’s next?

I have a long list of stuff that needs to be fixed, here are some of them:

Archive (I don’t like/want the pagination, so I must create some archive display)
Icons (I want to use some icons for different stuff)
Post types (Post types for image, link, maybe aside also)
Speed optimization (I want this page to load fast and be effective, so optimizing CSS, JS)
Server optimization (Find a good setup for Varnish and Nginx)
Improve the theme in general (Styling)

I already feel that this approach as encouraged me to develop and write more.

WordPress SEO and relative links

2015-06-16T00:00:00Z

I really like WordPress SEO, it’s a nice plugin that does everything I need for SEO. But for long I have had a problem with the sitemap feature. My posts did not show up in the post-sitemap.

I did not look into it anymore until today, when I looked through webmaster tools and figured I should get everything to work.

I opened class-sitemaps.php in the WordPress SEO plugin and started to go through the code.

At line 818 I found this snippet:

if ( false === strpos( $url['loc'], $this->home_url ) ) {
  continue;
}

For some reason this continue always triggered. At first I did not see what the problem was, since all my posts have urls. But then I realized (as you probably have guessed from the title) that all of them where relative links.

And WordPress SEO treats them as external links.

The solution

The fix was quite easy. WordPress SEO have a alter hook right before this check, so with a small function in my functions.php I re-added the domain part of the url.

function andeersg_fix_urls($url, $post) {
  if (substr($url, 0, 1) == '/') {
    return home_url() . $url;
  }
  else {
    return $url;
  }
}
add_filter('wpseo_xml_sitemap_post_url', 'andeersg_fix_urls', 10,  2);

I do a small check to see that the first character is a forward slash so I don’t “fix” actual external urls if there are some of those.

And with that snippet enabled the sitemaps work again.

The actual problem

I have a plugin called Root Relative URLs enabled, and that plugin removes the domain part from all urls.

I found this blog entry from Yoast, the team behind WordPress SEO that talks about how relative urls are not good. So I guess that may be the reason they treat relative urls this way.

I’m actually not sure why I have that plugin enabled, but I guess it has something to do with local development and broken/wrong image links.

Anyhow, disabling plugins that create relative urls will fix this problem, or you could use my code snippet. I will continue to use it until I know why I have that relative links plugin enabled.

New tools are not scary

2015-04-15T00:00:00Z

Being a developer is not the same as it was a couple of years ago. It was HTML, CSS and JS you had to cope with. These days it’s completely different.

Every day there are new tools and technologies coming out that can help and improve our workflows. New stuff can often look scary and it’s easy to feel like todays workflow and way of doing stuff is the best.

Why should i spend time learning all this new stuff when I get my work done now?

— Probably some developer

And if we try all the tools out there we probably will spend all our time learning stuff. But there are really some good tools that can improve our workflows.

Don’t be afraid

One thing I have learned from my self is to not be afraid of stuff only because it’s new or different. You can’t have a real opinion on stuff without trying it first.

Being afraid of change is not a uncommon thing, just take a look at every change Facebook has done the last years. For each change we have multiple groups with people wanting to revert it and there are news articles about it.

But usually no change is reverted, people stop complaining and just learn to use the site with the new changes. Maybe was it a good change if they think about it.

It’s the same about preprocessors, gulp, grunt, yeoman, bower, travis-ci, backbone, angular or mocha. When you first hear about them they sound scary and difficult. But probably you will benefit from using a couple of those. Next I will share a couple of the tools I use.

Tools I use

1. SCSS
I’m not sure when, but I started to use the preprocessor SCSS for my CSS a long time ago, I used it with Compass. You probably know what SCSS is, but here is the short summary from sass-lang?

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

It allows you to split your CSS into multiple files, use variables and functions (mixins).

2. Grunt and Gulp
Grunt and Gulp are task runners written in Node.js. They do not to much on their own, but when you give them tasks to do they get really powerful.

I started with Grunt, but now I mostly use Gulp. I think they both can accomplish the same, but I prefer the shorter config of Gulp.

The first task I made was for SCSS, so instead of having to run compass watch, I now write gulp watch. But the magic of Gulp is that I also have some extra plugins, like the Autoprefixer. After Gulp has compiled my SCSS it sends it to this plugins that check if it should prefix some CSS for me.

I also have a Javascript task in Gulp that “lints” my files and notifies me of errors, merges files together and minifies it for me.

All of this happens inside Gulp, and it has become a tool I don’t want to live without.

3. Yeoman
Yeoman is one of the latest tools I have looked at. It’s also written in Node.js and is a scaffolding tool. I use it to create folder structures and files for Drupal modules at work, and I also have a Gulp workflow it can set up for me.

It’s a command line tool, so to use it you have to be a little familiar with the command line.

Yeoman is a good example of a tool I thought was scary for a long time, I had heard about it but never looked at what it really was.

4. Travis CI
I had heard about automatic testing from colleagues and really thought it sounds smart, but I never looked at it myself. The idea that a external service automatically checks your code and reports back if it finds problems or if everything is ok sounds amazing.

And it really is. When I created a generator for Yeoman, I decided that I also should add tests for it. Since my generator is pretty simple, my test (for now) only checks if the correct files and folders are created. Travis provides you with a badge you can have in your readme file on Github that updates itself according to the test results.

So with a successful test you get this green nice badge:

What’s next?

All of this tools looked scary in the beginning, but have proved to be invaluable for me. I really recommend you try them out.

So I really recommend you find some tools you thought was scary and try them. Maybe you find your perfect tool.

And, don’t forget to actually do some work as well 😉

currentColor

2015-03-16T00:00:00Z

currentColor is a quite unknown CSS value with good browser support, and i thought i should check it out and see if i could use it for something useful.

It’s supported in all major browsers according to caniuse.com, except Internet Explorer 8 (of course).

Example usage:

.element { color: #e6e6e6; border: 1px solid currentColor; /* #e6e6e6 / } .element a { color: currentColor; / #e6e6e6 / } .second-element { color: currentColor; / Not #e6e6e6 / } .third-element { border-color: #ff88aa; color: currentColor; / Won't work */ }

Both the border and the links inside the element will have the same color as defined on the first line.

For the second element currentColor will go up the dom until it finds another defined color, and if it doesn’t it will take take the browser default color (usually black).

For the third element it won’t work, since currentColor needs a color: #somecolor; before it to work. It won’t work with background-color or border-color.

This also mean that you cannot use it for a sibling element, it has to be a parent or the same element.

What can it be used for?

The only thing i can think of is if you have some objects that should always be in a certain style. For example the comments of your site has been designed to have a orange border and orange links inside it. Then you have defined the color once and styled all elements inside your comment with currentColor.

I think its value is quite small when you probably already are using preprocessors for your CSS and have variables there.

But i like the idea of it and think i would have used it if i hadn’t preprocessors available.

Writing CSS with ITCSS

2015-03-01T00:00:00Z

Inspired by Harry Roberts’ talk about ITCSS at Trondheim Developer Conference in October, i decided to use it for a redesign/optimization i was going to work on for a client at work.

What is ITCSS?

ITCSS stands for Inverted Triangle CSS and is a way of structuring your CSS. The inverted triangle means that you start off in the wide end (low specificity) with base styling of html tags and the more you go down the triangle the narrower it gets and you have more specificity and complex rules.

Settings – SASS/LESS variables and default values.
Tools – Mixins and helper functions
Generic
Base
Objects
Components
Trumps

The first two are only relevant if you use a preprocessor (and you should use a preprocessor), afterwards you place your reset/normalize, declare fonts and start on the selectors.

When you get to step 5 you start defining classes and writing CSS for specific elements.

But you can read more about the structure in Harry Roberts’ slides, here i want to tell about my experiences while testing it.

Something about the old site

The site i was going to work with suffered from almost three years of development and the CSS was a mess. There were no structure, so when a new feature was added it either was added to the end of some file, or in a new file appended at the end. At the end you almost had to search to find the parts you were going to work on.

And this was my main motivation to try to put everything into a system, so when i got the opportunity to rewrite this CSS, ITCSS was a logical choice.

Getting started

I started with the main SASS file and just wrote down the steps of the triangle. The settings, base, tools and generic steps i created files for. Components, objects and trumps i created as folders since this is where most of the code would end up. Inside each folder i have a _all.scss file that contains all imports for this folder, by doing this the main SASS file is kept clean and tidy.

In this project the “object”-step was not used. We did not have any defined objects, so everything got sorted into the components step. I split things up into files like “buttons”, “form”, “header” and so on.

Rules for grid, clearfix, screen readers and visibility where put into the trumps step. They are put last so that no other class can mess with them.

Combining it with BEM

BEM (Block, Element & Modifier) is a way of naming classes. And instead of nesting you have classes that tell the hierarchy. For example:

.navbar { CSS-rules here. } .navbar__item { CSS } .navbar__item--active { CSS }

I feel like this approach is really good. And with SCSS you can “nest” it by using the &:

.navbar { &__item { &--active {} } }

This code will compile to the code in the previous example. So you can still “nest” in SASS to keep the working code organized, but the compiled code is flat.

Here you can read more about BEM.

Problems?

This site was built with Drupal and the main problem was basically being able to add classes to all the elements i wanted (so the problem was not related to ITCSS at all). There were a lot of extra work because i had to create functions and use hooks to override Drupal.

The result, and was it worth it?

Comparing the old site with the new site add cssstats.org we see that:
Number of rules went from 506 to 703.
Selectors went from 623 to 975.
File size went from 77kb to 62kb.

I think one of the reasons there are so many more selectors is because of the bootstrap-grid. But also the redesign were more extensive.

The most interesting is when you look at the visualisation of the specificity graph:

There have been major changes in the specificity of the CSS. And that is one of the goals of ITCSS.

While writing i felt i spent much more time moving and organizing the CSS than i would normally do, but i think i have much more control over the CSS now. I know where to go when i need to change something or add something new.

I really like it, and i’m going to continue to use it on my projects.

When ideas become an obstacle

2015-01-20T00:00:00Z

Everyone has ideas and it’s a good thing we have them. But for me they can sometimes become an obstacle.

That’s because i always see stuff i want to improve in the solutions i use and get ideas of things that would be cool to create.

So i have figured out that i must suffer from IID, an pretty unknown problem(mainly because i just made it up) that is called Instant Idea Development. When i get an idea i feel the need to start working on it immediately, so i create a folder and some files, maybe download some modules from NPM, write some code. But then i need to continue my “real work”, so i leave this newly started project in one of my projects folders (i have a lot of them).

Even if i don’t start creating a project for my ideas, i have it in my head and think about it. And that can be very unproductive. It makes me distracted.

And when i get home and should have the energy and time to work on some side-projects i usually don’t do anything, because my growing folders of started projects takes away my motivation.

Of the ideas i have, some are way too complex for spare-time work, some requires learning a lot of new stuff (i like learning new stuff, but there is a time for everything) and some ideas wasn’t that good. But when i don’t do any of that i get more stressed that i don’t work on anything. So it’s a bad circle.

One thing that is quite ironic is that i have 3-4 projects for different todolist/project management tools to manage all my ideas.

Changing the workflow

To avoid this from happening i have forced myself to write down ideas and “forget” them. By writing it down i don’t get afraid of losing my ideas, and i don’t go around and think about them all the time.

To manage this i have created a Trello board for my ideas. With every idea as a “card” it’s easy to label them, comment on them to add more information and eventually move them from “idea” to “work in progress”, another list on my board.

I can absolutely admit that it still happens that a folder is created and some code is started on, but it doesn’t happen all the time anymore, and i don’t feel stressed because of all the things i want to do.

It’s also good to get some distance to the ideas. It’s much easier to see the really bad ones when you have had some time to think about it.

Creating a command line tool with Node.js

2014-11-24T00:00:00Z

Command line tools are always useful. They can help you do stuff faster and be more productive. And with Node.js it’s really easy to create them yourself.

The easiest command line tool may be something like this:

#!/usr/bin/env node console.log(process.argv);

The first line tells that it’s Node that should be used for this.
The second line just outputs every argument back to you.

To make this work just type node index.js arg1 arg2 arg3 and your console will print:

['node', '/path/to/js/file', 'arg1', 'arg2', 'arg3']

Slightly more advanced

If you want to make it even more like a command line tool:

Rename it to cmdtool (without the .js ending).
Make it executable (sudo chmod +x cmdtool)

Then we can do the same as before, only we now just need to type ./cmdtool arg1 arg2 arg3 and the result will be the same.

Fancyness increasing

To make it even more fancy either put your script in /usr/local/bin or make a symlink to it from there (ln -s /source/cmdtool /usr/local/bin/cmdtool).

Then you can just type cmdtool arg1 arg2 without anything extra for the real command line feel.

So now we have a working command line tool with input arguments. Now you could go on and loop through the arguments and parse them for option flags and input and everything yourself, or you could use a node.js package made for this.

Commander reporting for duty

I have tried a package called commander that’s really easy to setup. Here is an example:

#!/usr/bin/env node

var program = require('commander'); var chalk = require('chalk');

program .version(require('./package.json').version) .usage(' [options]') .option('-o, --output [type]', 'Add output format [html, csv, json]', 'html') .option('-s, --screen', 'Add this to output file to console instead of creating file') .option('-f, --filename [filename]', 'the output filename');

program.parse(process.argv);

if(!program.args.length) { console.log( chalk.red('n No input file specified.') ); program.help(); } if (program.filename) { console.log(program.filename); } else { console.log('No filename specified.'); } {: .language-javascript}

This code snippet actually requires two packages, commander and chalk. Chalk makes it easy to output text in different colors, like red for errors.

The first part of the code defines options and format of the command line tool.

The usage line is a textual way to describe how the program works.
The option lines is different options, with a short syntax, full syntax, helping text and optionally a default value.
program.parse reads input (like we did with console.log in the first example).
Next we check if there are any arguments, and if there isn’t we show an error and print the help (usage + options).
Next we can check for the values of the different options and use them in our script.

So there we have a working command line tool, now you can make something awesome. And also, with NPM you can publish your scripts to npmjs.org so other people (and yourself later) can install it with npm install -g cmdtool. This will put your script in a “bin” and make it executable for you.

I haven’t tried publishing to npm yet. But you basically just type npm publish with some arguments and stuff in your package.json file. You can read more about it here.

And if you make something cool, leave a comment!

Trondheim Developer Conference 2014

2014-11-04T00:00:00Z

Last week I attended Trondheim Developer Conference #tdconf in Trondheim. It was the first conference I have attended and I must say it was fun and inspiring. I really liked going, and it was a nice way to learn new stuff and see interesting people you usually only see on Twitter.

The conference consisted of 5 venues with 8 talks on each during the day plus three talks for everyone. It was a long day with lots of talks, and here are some of my favorites.

The better parts

Douglas Crockford talked about the better parts of javascript and the new stuff in ECMAScript6.

Managing CSS Projects with ITCSS

Harry Roberts held the first talk about his new approach for managing CSS projects, ITCSS. To optimize CSS you should structure it in a way where low specificity comes first. Harry has written more about that in his article The Specificity Graph.

How HTML5 missed its graduation day

Christian Heilmann talked about HTML5 and that we should not be afraid to use it. People with old browsers who don’t support new features does not expect to get fancy awesome features and we should not try to create the same experience for everybody.

Designing with Sensors: Creating Adaptive Experiences

Avi Itzkovitch talked about designing apps and user interfaces that uses sensors and data to adapt its behavior to the users needs. It was a very interesting talk about how we can use the data we have about the user to create a better experience.

SVG is for everyone

Chris Coyier talked about SVG, and it was one of the talks i was looking forward to upfront. SVG has a lot of advantages over icon fonts and regular images and i really look forward to try it on a project soon.

Hacking the Creative Brain

Denise Jacobs talked about how developers are creative and how to trigger the creative parts of the brain.

I had a good time and i look forward to next year, i also hope i get to go to some other conferences in the future as well.

Creating patches for Git

2014-07-04T00:00:00Z

Today i had to fix some bugs in a contributed drupal module in a project i’m working on, and to make sure my changes was not lost in a module upgrade i created a patch for them, and here is how i did it.

What is a patch?

A patch is a single file which can contain modifications for multiple files. A patch can for example rename a variable in every file in your project.

How do i do it?

The first thing you have to do is to clone the branch you want to patch:
git clone http://url.of.your.project.git

You don’t have to use git to create and apply patches, but here i use git.

Then you go into your repo:
cd folder_name

Next you can create a new branch for your modifications (i don’t know if this is necessary):
git branch my-awesome-patch

Switch to the new branch:
git checkout my-awesome-patch

Now you are good to go, and can code away. When you are finished with your changes and are ready to create the patch, commit everything in your branch.
git add --all (Only use this if you want to add every modification you’ve made).
git commit -m "commit message"

If you want to compare your changes against the original code you can type:
git diff [branch-name] (The branch name is not the one you created but the existing one).

When everything looks great you can create the patch file:
git diff [branch name] > my-awesome-features.patch

And voila, you have a patch file with all your modifications.

How do i apply a patch?

git apply -v [patch-name.patch] (this will apply your changes).

Why patches?

Drupal uses patches for when people want to fix bugs or add features to modules. I think this is mainly because drupal.org doesn’t have forking and pull requests.

There are probably other uses for patches than this, maybe you want to fix some stuff from a development branch without merging in the whole branch.

Patching is not something i have used very much, but it was easy to understand and it may come in handy some day.

Configuring Varnish for WordPress

2014-05-08T00:00:00Z

Varnish is a very effective caching software, it can cache every part of your WordPress site. But when you turn it on you loose some nice features of WordPress.

Varnish works by sitting in front of your web server, and giving the visitor a cached version of your page if it has any, and only if there is no cached version available send the visitor to the web server.

But without some configuration you can't access your admin area without going to the port your web server is listening (example.com:8080). The same for preview of posts.

Disclaimer: I don’t know everything about Varnish so something here may not be done in the recommended way. But for me it works.

Note: If you just want the config scroll down to the bottom.

Step 1: default.vcl

Default.vcl is the configuration file for varnish, this is were you tell it what to do. This file is located in /etc/varnish/default.vcl. By default it is just a large file with commented out functions.

Since we want Varnish in front of the web server we must specify on what port our web server listens:

backend default { .host = "127.0.0.1"; .port = "8082"; }

This tells Varnish that our web server is listening to port 8082.

Step 2: sub vcl_recv

Sub vcl_recv is a varnish function, it responds to incoming request. This is the function where most of the stuff goes. We start by adding the client ip-address so that WordPress can read the users real ip-address.

remove req.http.X-Forwarded-For; set req.http.X-Forwarded-For = client.ip;

This is necessary if you use plugins such as Limit Login Attempts.

This next step is important if you want to login to your site:

if (req.url ~ "wp-(login|admin)" || req.url ~ "preview=true" || req.url ~ "xmlrpc.php") { return (pass); }

It also allows previews and xmlrpc requests.

This snippet strips away cookies unless your logged in to WordPress:

if (req.http.cookie) { if (req.http.cookie ~ "(wordpress_|wp-settings-)") { return(pass); } else { unset req.http.cookie; } }

This works great for me, since i’m the only one logging in, but if you have a blog where users log in you probably want something else.

Then we unset cookies from files:

if (req.url ~ ".(gif|jpg|jpeg|swf|css|js|flv|mp3|mp4|pdf|ico|png)(?.*|)$") { unset req.http.cookie; }

This way files are served without cookies which is good for speed.

At last we strip every get-parameter:

set req.url = regsub(req.url, "?.*$", "");

Maybe you want to alter this if you need some get-parameters.

That was everything in sub vcl_recv.

Step 3: sub vcl_fetch

Vcl_fetch is a function that is called after a request is sent from the web server.

First we check if the user went to admin or login areas:

if ( (!(req.url ~ "(wp-(login|admin)|login)")) || (req.request == "GET") ) { unset beresp.http.set-cookie; set beresp.ttl = 1h; }

If the user did not go to admin areas, or the request is a get-request, we unset the cookies and tell varnish to keep this request cached for 1 hour.

Next we tell Varnish how long it should cache files:

if (req.url ~ ".(gif|jpg|jpeg|swf|css|js|flv|mp3|mp4|pdf|ico|png)(?.*|)$") { set beresp.ttl = 365d; }

My blog is fairly static, so i cache everything for a year. I’m not sure if that is the best way, but it works for me.

And that’s all in sub vcl_fetch. Now you are finished with the important part.

Step 4: sub vcl_deliver

sub vcl_deliver { if (obj.hits > 0) { set resp.http.X-Cache = "HIT"; } else { set resp.http.X-Cache = "MISS"; } }

When Varnish delivers content to the user it also adds a header telling if it was cached (HIT) or not (MISS).

Wrapping things up.

If you followed my steps you should now have a working Varnish config for WordPress. And if you don’t want to go through the steps, here is the whole config:

backend default { .host = "127.0.0.1"; .port = "8082"; }

sub vcl_recv { if (req.http.host == "about.andeers.com") { set req.backend = aboutnode; }

remove req.http.X-Forwarded-For; set req.http.X-Forwarded-For = client.ip;

if (req.url ~ ".(gif|jpg|jpeg|swf|css|js|flv|mp3|mp4|pdf|ico|png)(?.|)$") { unset req.http.cookie; set req.url = regsub(req.url, "?.$", ""); }

if (req.url ~ "?(utm_(campaign|medium|source|term)|adParams|client|cx|eid|fbid|feed|ref(id|src)?|v(er|iew))=") { set req.url = regsub(req.url, "?.*$", ""); }

if (req.url ~ "wp-(login|admin)" || req.url ~ "preview=true" || req.url ~ "xmlrpc.php") { return (pass); }

if (req.http.cookie) { if (req.http.cookie ~ "(wordpress_|wp-settings-)") { return(pass); } else { unset req.http.cookie; } } }

sub vcl_fetch { if ( (!(req.url ~ "(wp-(login|admin)|login)")) || (req.request == "GET") ) { unset beresp.http.set-cookie; set beresp.ttl = 1h; }

if (req.url ~ ".(gif|jpg|jpeg|swf|css|js|flv|mp3|mp4|pdf|ico|png)(?.*|)$") { set beresp.ttl = 365d; } }

sub vcl_deliver { if (obj.hits > 0) { set resp.http.X-Cache = "HIT"; } else { set resp.http.X-Cache = "MISS"; } }

If you want to test your configuration for errors you can use this command:

varnishd -C -f /etc/varnish/default.vcl

If you have errors, this command will give you a error message and the corresponding line number. If everything is okay it will print a lot of code (the generated config).

Featured image as background image

2014-05-02T00:00:00Z

If you have a theme with the custom background image feature enabled it’s pretty easy to replace it with the featured image of your posts.

First you need to add the wp-head-callback-attribute to your add_theme_support('custom-background')-function:

add_theme_support( 'custom-background', array(
        'wp-head-callback' => 'change_custom_background_cb',
    ) );

This tells WordPress to use our function “change_custom_background_cb” to output the image.

Switch to featured image

function change_custom_background_cb() {
    $background = get_background_image();
    $color = get_background_color();
    if (is_single()) {
      $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );
      if (isset($image[0])) {
      $background = $image[0];
      }
    }

    if ( ! $background && ! $color )
        return;

    $style = $color ? "background-color: #$color;" : '';

    if ( $background ) {
        $image = " background-image: url('$background');";

        $repeat = get_theme_mod( 'background_repeat', 'repeat' );

        if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
            $repeat = 'repeat';

        $repeat = " background-repeat: $repeat;";

        $position = get_theme_mod( 'background_position_x', 'left' );

        if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
            $position = 'left';

        $position = " background-position: top $position;";

        $attachment = get_theme_mod( 'background_attachment', 'scroll' );

        if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
            $attachment = 'scroll';

        $attachment = " background-attachment: $attachment;";

        $style .= $image . $repeat . $position; //  . $attachment
    }
?>
<style type="text/css">
body.custom-background .site-header { <?php echo trim( $style ); ?> }
</style>

The important part here is the first lines (4-9); we check if it’s a single post and if that post has a featured image, and if it has we replace the regular background image.

Another important part is the css line at the bottom. In my theme i use the background image on my header element, so if you want your image on another element you have to change this part: body.custom-background .site-header.

The rest of the function configures the css snippet according to the settings on the custom background page.

If you don’t want those there you can safely remove them and keep all the styling inside your css (but then you can’t change them from inside WordPress). Read more about this at the WordPress Codex.

What else can you do?

Have a folder of images? Display them randomly.
Display different images based on the time of day.
Or different images for different seasons.
Be creative.

WordPress development with Vagrant

2014-04-10T00:00:00Z

Vagrant is a tool for creating virtual development environments. It allows you to setup a environment with the OS you want and all the functionality you want without messing with your computer.

Why vagrant?

Up until recently i used xampp on my mac to setup local sites. It works pretty good, but sometimes there were trouble like when some tools did not understand which php they should use (xampp or osx), and stuff like that. With vagrant everything happens inside a sandbox and your computer is left alone. You’re also more certain everything will work on your server if the development environment is the same.

I really like that you can install everything from web servers to database engines and not risk messing with OSX (or Windows).

How does Vagrant work?

Vagrant installs a operating system and executes a file containing commands bootstrap.sh. Inside this file you can tell Vagrant to install Apache, MySql, PHP, Node.js, Git and so on.

You can remove your virtual machine by typing vagrant destroy, or temporary disable it by typing vagrant halt.

Want to try it?

I have created a repo at Github with my setup, check it out and try for yourself. This vagrant installs Ubuntu 12.04, nginx, Mysql, PHP, Git, Node.js (with Grunt and Gulp), and WordPress 3.8.

Atom.io

2014-03-11T00:00:00Z

Github just released a beta version of their new editor Atom, and i must say it looks good.

It has a very clean user interface, and i must say i like what i see.

Atom editor displaying functions.php

The editor is highly flexible with loads of packages you can download. A package can be a theme for the editor or new features and functions. A couple of packages highlighted on the atom.io site:

Another small feature i like is that if your working on files inside a git repository, it displays the current branch, and how many lines changed from whats currently in git.

Atom displaying current branch and diffs.

The editor also have a shortcut cmd+shift+p which opens a search-form that allows you to search in every function available.

For example if your writing markdown you can search for a function that gives you a preview:

Search for whatever function you like.

My impression so far

I like the possibilities and that there are lots of customization and plugins for it. The one thing i miss most from Coda is the built-in SFTP-file manager, i love being able to open remote files from inside the editor and not have to use another program for that.

I don’t think it has any killer features that would instantly make me switch from Coda, but it’s a great editor and i will absolutely recommend it, you can apply for beta access at Atom.io.

Grunt – The JavaScript task runner

2014-02-08T00:00:00Z

Grunt is a command line tool that’s running tasks for you. It can automate all the things you have to do manually (at least many of them).

You can for example make it compile your SASS-files, check your JavaScript syntax, combine the JS-files and minify them with one command.

What is Grunt really?

In itself Grunt does nothing, you have to add plugins to actually do stuff. Right now there are over 2000 plugins at GruntJS.com.

You have a file where you define the plugins you want to use, which folders they should work on and what you want them to do. You can define multiple environments and have the plugin to different things.

My configuration

I have structured my Grunt tasks for web development and i have plugins for Compass(SASS), validating JS, merging JS-files, minifying JS and optimizing images. I also use a plugin called Grunt Watch that watches my files and run the tasks when files are changed, something like “compass watch” only it works for all the files.

When i have this setup i can work in smaller files and keep my development environment organized. As i work Grunt compiles my css and javascript-files and optimizes my images.

Alternatives

Until now have i used CodeKit, a Mac desktop app that does most of the tasks i have described here. CodeKit monitors folders and can merge JavaScript, CSS and check JS-files for syntax errors. I like CodeKit very much, but it was annoying that i could not use it on remote servers.

Recently another JavaScript task runner has appeared, it is called gulp.js and is supposed to be much faster than Grunt. I have not tried gulp.js yet, so i cannot say to much about it, but it looks cool and i’m going to check it out.

Example

Here is a part of my Gruntfile.js (the file you define what tasks you want to execute):

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['dev/js/.js'], dest: 'assets/js/script.min.js' } }, uglify: { options: { banner: '/! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> /\n' }, dist: { files: { 'assets/js/script.min.js': ['<%= concat.dist.dest %>'] } } }, jshint: { files: ['Gruntfile.js', 'dev/js/.js'], options: { globals: { jQuery: true, console: true, module: true, document: true } } } });

grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-concat');

grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

};

In this file i have defined what plugins to use, i have registered the default task (what happens when you write “grunt” in the terminal), and i have told the different plugins where my files are and what i want them to do.

Moving my blog to DigitalOcean

2014-01-08T00:00:00Z

I have been looking for another host for my blog for some time now, and in december i found DigitalOcean. I decided to move my blog there yesterday.

DigitalOcean

With DigitalOcean you get a server, a linux OS and then you are on your own. Luckily for people without server knowledge (me) they also have lots of guides for setting up various things. I spent my Christmas holiday configuring and trying different things before i decided to move it. Previously i had my blog on a Norwegian host which i found very limiting, i did not have ssh access and could not use tools such as Compass, Git or Node.js. This blog is now running on Nginx with Varnish in front of it. I have also experimentet with node.js, and have set up a Ghost blog.

WordPress

I choose nginx for my wordpress blog mostly because i was curious and wanted to test it. This blog does not have so much traffic so i don’t think it was necessary for the user experience. But i like trying new stuff, and if nginx is faster than Apache there probably won’t be any large downsides (i hope).

Ghost

Ghost is a new blogging platform created by John O’Nolan, it’s a very minimalistic blogging platform stripped of everything but the essentials for writing. You write your posts with markdown and you have a live preview on your right side.

I must say i like messing around with the terminal and editing config files, so i think there may come some posts about servers and setting up various stuff.

Getting started with Backbone.js

2013-12-12T00:00:00Z

I have wanted to look at JavaScript frameworks for some time now. I like the idea to only send JSON data from the server and let the client do the rest. But there is a jungle of frameworks, so it is hard to get information about which one you should choose.

I started on a small project for a client at work where they wanted to list courses and let people sign up. It was going to be a one-page application with courses listed on the left and the selected course on the right. This page is built with Drupal and my usual way of solving this would be to create all the markup with PHP and output it. Then i would use jQuery to switch between courses and do stuff. It was also important that you could link to a single course, so this would mean GET-variables or something.

I have been using sites like Wunderlist and Godt.no (Norwegian site) and i like how they work. Both use Backbone.js. So because of this i choose Backbone.js for my project. With Backbone.js i can have templates for the project and it has built-in router functionality with hash-urls (and pushState when older browsers no longer needs to be supported).

When i started with Backbone.js i took a look at the TodoMVC project. They have lots of example apps written with lots of frameworks. It’s a good resource for lots of JavaScript frameworks. My first thoughts when looking at Backbone code was that it was very cryptic and hard to understand. It took a while do dissect the code and understand the different parts.

I learned that the best way to understand it (for me) was to break down the examples, modify them and create small projects. For me this works way better than reading the documentation (but i think the documentation is important for reference).

I plan to write about the different parts of a Backbone application here on my blog. The first one will be about the “model”.

A new blog theme

2013-11-13T00:00:00Z

Today i changed my blog theme to a new theme i have created. It’s a theme heavily inspired by Inside Envato and Bensmann.no. It’s a work in progress, and changes will come.

I’m also trying something new by writing in english. I want to do this to improve my writing skills and also get a potentially greater audience.

iOS7 – et førsteinntrykk

2013-06-11T00:00:00Z

I går lanserte Apple iOS7 på sin WWDC-konferanse. Et operativsystem det ble sagt at skulle være det største som har skjedd med iPhone siden iPhone ble lansert. Min mening er at det stemmer. Det har blitt en helt annen telefon, og foreløpig liker jeg det jeg ser.

De har redesignet alt fra låseskjermen, til menyene, animasjonene og ikonene.

Ikonene

Alle appene til Apple har fått oppdaterte ikoner med et mye “flatere” design enn tidligere. Personlig syns jeg det fungerer på enkelte av appene, mens på andre ser det ikke så bra ut.

Mine favoritter er: Kalender, Kalkulator, Passbook og Musikk. Og de verste syns jeg er Game Center og Safari.

Kontrollsenter

Kanskje den enkelt-tingen jeg syns er mest kjekk foreløpig. Bare ved å dra fingeren opp fra bunnen av skjermen får jeg opp et panel som gir meg tilgang til de fleste innstillinger jeg måtte ha behov for å endre kjapt.

Lysstyrke.
Wifi, Bluetooth, Flymodus, stillemodus og låsing av skjermrotasjon.
Lommelykt, kalkulator, kamera og klokke.
AirDrop
Musikkspiller

Mange av disse elementene måtte man inn i innstillinger, inn på et par undermenyer før man kunne slå de av og på før.

Foreløpige bugs

Har faktisk oppdaget svært få bugs med tanke på at det er en beta det er snakk om:

Endel animasjoner hakker litt innimellom.
Apper som krasjer(hendt ca. 3-4 ganger).

****Tilgang til iOS7 beta

Ønsker du også å teste iOS7 beta, må du gå til Apple sine utviklingssider og registrere deg som utvikler.

Har du testet iOS7? Hva syns du?

Oppdatering

De siste dagene har jeg lagt merke til en kjekk liten ting. Når noen skriver til meg, sender meg en epost eller noe annet med push-varsler så vises det som vanlig på skjermen til jeg låser opp telefonen.

Om jeg åpner eposten/facebook-chatten på pcen, forsvinner varslet på mobilen med en gang. Liten detalj, men veldig kjekk.

Har også inntrykk av at batteritiden er litt bedre, men det har jeg ikke fått undersøkt nok enda.

Angrep mot WordPress

2013-04-18T00:00:00Z

I det siste har det vært flere artikler om store angrep mot WordPress-installasjoner. Derfor er det veldig viktig å ta noen forhåndsregler sånn at din WordPress er sikker.

Angrepene prøver brukernavnet “admin” sammen med veldig mange passord. “admin” er et brukernavn veldig mange har satt som standard og derfor er det dette angrepet prøver på.

Har du “admin” som brukernavn?

Ta det med ro, det er ikke vanskelig å løse dette problemet.

Opprett en ny bruker med det brukernavnet du ønsker (Sørg for at den nye brukeren har administrator-rettigheter).
Logg inn med den nye brukeren og slett den gamle.
Da vil du få et spørsmål om hva du vil gjøre med postene til den gamle brukeren, du kan enten overføre de til den nye brukeren eller slette de.

Da skal du ha fått deg en ny bruker med alle dine gamle innlegg.

Andre måter for å forhindre angrep mot WordPress

Jeg bruker alltid å legge inn Limit Login Attempts når jeg setter opp en WordPress-side. Den blokkerer brukere som prøver å logge inn for mange ganger på kort tid. Standardinnstillingen er at 4 feilaktige innlogginger fører til en “lockout”.

Til nå er det 1367 lockouts på denne siden. Man får også se en lang liste med IP-adressene som har prøvd og med hvilket brukernavn de har brukt. I listen min ser jeg at admin er en gjenganger, over 90% av forsøkene er gjort med admin som brukernavn.

En annen plugin jeg har begynt å ta i bruk er Google Authenticator. Denne gjør at du må oppgi en kode i tillegg til brukernavn og passord når du logger på siden din. Koden får du via en app Google har laget, denne er tilgjengelig til iOs, Android og Blackberry. Dette fungerer på samme vis som bankID, koden er kun gyldig i ca 1 minutt. Dermed har det blitt veldig vanskelig for en person som prøver å bryte seg inn, selv om de har passordet ditt må de også ha telefonen din.

Nyheter i WordPress 3.6

2013-04-15T00:00:00Z

WordPress 3.6 har blitt tilgjengelig i betaversjon, og har man lyst kan man allerede nå teste den ut ved å aktivere WordPress Beta Tester. Da får du mulighet til å laste ned de aller nyeste versjonene av WordPress. NB: Det er ikke anbefalt å gjøre dette på en produksjonsside da det er større sjangse for at det forekommer bugs.

Hva er nytt?

En av de største forandringene jeg la merke til er at “Post Formats” har fått et helt eget grensesnitt på sidene hvor man skriver innhold.

Nytt grensesnitt for å velge format.

Det som også skjer når man velger foreksempel “Sitat” er at man får frem felter som passer til formatet. Det kommer:

Felt for sitat
Sitatkilde
Lenkefelt til kilde
Også er det vanlige tekstfeltet tilgjengelig

Dette vil gjøre det veldig mye enklere å for brukerne å ta i bruk formatene. For bilde-innlegg, galleri-innlegg, video og lyd-innlegg får man frem felt for å laste opp mediefiler eller lime inn url eller “embed”-kode.

Andre nyheter i WordPress 3.6

Innhold du skriver på lagres lokalt.
Du vår varsel om noen redigerer en post du er inne i, med mulighet til å kaste de ut av den.
Grensesnittet på meny-innstillingene har blitt litt annerledes.
Bedre håndtering av innholdsversjoner.

Mitt førsteinntrykk

Jeg må si jeg likte veldig godt at de har laget et grensesnitt for de forskjellige post-formatene. Jeg har klødd meg mye i hodet og lurt på hvordan jeg best mulig skal løse implementeringen av en “lenke-post” før, nå har det kommet dedikerte felter. Det at innlegg man skriver på lagres lokalt er ikke noe man tenker så mye over, men det er nok kjekt den dagen noe skjer og man ikke fikk lagret.

Det er mye spennende som skjer med WordPress og jeg gleder meg bare til å se hvilke nye funksjoner som kommer etterhvert.

Har du testet WordPress 3.6? Hva syns du? Liker du de nye grensesnittene?

Mailboxapp – skaper liv rundt lanseringen

2013-02-11T00:00:00Z

For noen dager siden ble Mailboxapp tilgjengelig på App Store, og i løpet av de første timene appen var tilgjengelig fikk den veldig mye omtale og oppmerksomhet.
Mye av oppmerksomheten kom av den noe spesielle måten de valgte å gi tilgang på. Før lansering kunne man oppgi telefonnummer og sette seg på venteliste. Når lanseringen kom fikk man tilgang til appen etter rekkefølgen man meldte seg på ventelisten.

Når jeg åpna appen lå jeg ca på plass nr. 170.000, nå i dag 5 dager senere ligger jeg på plass 103.800. Det som var mer spennende å se var hvor kjapt telleren på hvor mange som lå bak i køen økte, i løpet av disse 5 dagene har den gått fra 150.000 til over 630.000.

De har helt sikkert fått veldig mange nedlastninger etter omtalen i helga(det ser man på telleren), men personlig tror at de har overdrevet ventetiden betraktelig. Jeg tror mange kommer til å slette appen eller glemme den. Jeg må si selv at ikke er så veldig motiverende å sjekke appen nå og se at det fremdeles er over 100.000 foran meg.

Men, det skal mailboxapp ha, de har klart å skape blest rundt appen sin. Nå gjenstår det bare å se hvor mange som faktisk vil bruke den.

Hva tror du? Har du fått tilgang til mailboxapp, hva syns du?

Facebook Graph Search

2013-01-24T00:00:00Z

Det skumle Graph Search

Januar lanserte Facebook sin nye funksjon Graph Search, og sånn som alltid når Facebook gjør endringer eller kommer med noe nytt begynner folk å klage.

Denne gangen er det snakk om at Facebook gjør data om deg tilgjengelig for alle og flere aviser har dratt frem eksempler på folk som blir hengt ut med at de “liker voldtekt”, “unge jenter med store bryster” også videre.

Det man ikke tenker over er at dette er sider man aktivt har likt og som er offentlig tilgjengelig. For dette nye søket gjør ingenting nytt med personvernet. Det er bare en ny måte å vise informasjon som allerede er tilgjenglig på profilen din.

Dette betyr:

Har du bilder kun venner kan se, kan kun venner av deg få opp disse bildene i søk.
Har du offentliggjort bostedet ditt, kan du komme opp i søk over hvem som bor på det aktuelle stedet.

Hva kan man gjøre?

Det første du bør gjøre er å gå på din egen profil, klikke på tannhjulet under coverbildet og velge “Vis som …”. Da får du se din egen profil som en ikke-venn. Ser du at for mange ting om deg er synlig bør du ta en gjennomgang av sikkerhetsinnstillingene på profilen din. Og, er du redd for at du skal dukke opp i sjenerende søk bør du ta en gjennomgang av hva du har likt opp gjennom årene og kanskje vurdere å “unlike” useriøse ting.

jQuery og Google Analytics for å spore klikk

2013-01-06T00:00:00Z

Har du lenker eller knapper som kjører AJAX-innhold kan det være kjekt å spore hvor mange som klikker på elementene. Det kan hende du er nysgjerrig på hvor mange som klikker på logoen din kontra HJEM-knappen. Ved å bruke Google Analytics kan du sette opp at klikk på disse elementene skal spores. Dermed kan du se hvor mange klikk logoen din får og hvor mange klikk hjem-knappen har fått. Dermed kan du finne ut hva brukerne foretrekker og om det er poeng å ha en hjem-knapp.

Google Analytics Event Tracking

For å spore klikk brukes en kode som ser ca sånn ut:
_gaq.push(['_trackEvent', 'Kategori', 'Hendelse', 'Tittel']);

“Kategori” er en samlebetegnelse for flere “Hendelser”. Disse to er obligatoriske og må være med for at det skal fungere. I tillegg er det mulig å sette en Tittel, dette kan for eksempel være målet om det er lenker man sporer.

I eksempelet med HJEM-knappen vil da kodene se sånn ut f.eks:
_gaq.push(['_trackEvent', 'Hjemlenke', 'Logo']);
_gaq.push(['_trackEvent', 'Hjemlenke', 'Menyelement']);

Da vil du etter hvert få opp statistikk i Google Analytics om hvor mange som har klikket på de forskjellige lenkene.

Google plasserer disse kodene i et onClick-element på lenkene i sin dokumentasjon.

jQuery

Ved å bruke jQuery til dette vil du få en mye mer oversiktlig kode, pluss at du slipper å redigere html-koden.

For å spore klikk på logoen kan du da bruke denne koden:

$('#logo').click(function(){
_gaq.push(['_trackEvent', 'Hjemlenke', 'Logo']);
});

I dette tilfellet er IDen til logoen “logo”. Denne koden kan du ha i <head></head>-seksjonen eller i en ekstern javascript-fil. Dermed får du en ryddig kode og du får samlet alle tracking-kodene på en plass.

jQuery og denne sporingskoden er en veldig kraftig kombinasjon, du kan spore alt mulig.

Forslag til sporing:

Hva en bruker velger i en nedtrekksliste.
Hvor mange som flytter musa over logoen ($.mouseover).
Eller alt annet du måtte føle for å vite om og som du kan bruke jQuery på.

Bruker du Google Analytics på en lur måte? Fortell gjerne om det i kommentarfeltet.

Nyttige Google Analytics widgets

2012-11-19T00:00:00Z

Google Analytics kommer med veldig gode widgets som standard, men man kan sette opp egne widgets som kan gi enda fyldigere informasjon om de besøkende. I dette blogginnlegget har jeg tenkt å dele noen jeg bruker.

For å lage egne widgets til Google Analytics må man trykke på fanen Startside (Home på engelsk) også trykke på “Ny oversikt” i venstremenyen. I vinduet som dukker opp velger du “Tomt lerret”, gir det et navn og trykker “Opprett oversiktspanel”.

Om du valgte “Tomt lerret” vil du automatisk få opp vinduet for å legge til en ny modul på siden.

Oversikt over mobilbesøkende

For å lage en pen oversikt over mobil-besøkende på siden din gjør du følgende:

Velg “Tabell”.
For første kolonne velger du “Mobil (innebefattet nettbrett)”.
I andre kolonne velger du “Besøk” eller “Unike besøkende”.
Du kan legge til en tredje kolonne med foreksempel “Sidevisninger”.
Videre velger du hvor mange resultater du vil vise.
Til slutt er det bare å sette en tittel og lagre.

I punkt 3 og 4 kan du velge andre kriterier etter hva du ønsker å se, unike besøkende er viktigere enn sidevisninger. Du får mer ut av å vite at det har vært 30 personer innom siden din, enn at en person har oppdatert siden din 365 ganger på mobil.

Oversikt over skjermoppløsninger

Å vite hvilke skjermoppløsninger dine besøkende bruker kan være nyttig for utviklingen av siden din. Har du en small side og veldig mange besøkende med store skjermer kan det være lurt å utnytte plassen du har tilgjengelig.

Velg “Tabell” her også.
Velg “Skjermoppløsning” i første kolonne.
Velg “Unike besøkende” i andre kolonne.
Velg hvor mange resultater som skal vises.
Sett en tittel og lagre.

For fyldigere informasjon om Google Analytics kan du lese her.

Dette var to av mine widgets som jeg bruker i mitt oppsett. Har du noen andre kjekke widgets i Google Analytics må du gjerne dele dem i kommentarfeltet.

SCSS – Mer effektiv CSS

2012-11-12T00:00:00Z

CSS3 har blitt godt implementert i de fleste nettlesere nå og det har mange kjekke muligheter som animasjoner, skyggelegging og avrundede hjørner. Men likevel kan du ta CSS enda et steg videre og gjøre utviklingen enklere. Say hello to SCSS.

SCSS er et skriptspråk som kompileres til CSS. SCSS skrives på samme måte som CSS men det har muligheter som ikke er mulig med vanlig CSS. Du har foreksempel mulighet til å nøste css-tagger sånn at du slipper å skrive like mye:


.mainmenu{
  width: 600px;
  margin: 0 auto;
  ul{
    background: #412eeb;
    li{
      display: inline;
      padding: 5px;
      a{
        color: #ca2828;
      }
    }
  }
}


.mainmenu{
  width: 600px;
  margin: 0 auto;
}
.mainmenu ul{
  background: #412eeb;
}
.mainmenu ul li{
  display: inline;
  padding: 5px;
}
.mainmenu ul li a{
  color: #ca2828;
}

Her vil SCSS kompileres til CSS-eksempelet over, ved å bruke SCSS sparer man litt unødvendig skriving og personlig mener jeg det blir mer oversiktlig.

Variabler

SCSS gir også muligheten til å lage variabler. Variabler i CSS kan du foreksempel bruke til å angi 3-4 farger, dermed kan du bruke disse variablene gjennom CSS-dokumentet. Skulle du få lyst til å forandre noen av fargene på nettstedet kan du nå bare forandre variablene istedet for å måtte gå gjennom dokumentet og forandre alle forekomstene.

Mixins

Mye CSS-kode skrives mange ganger gjennom dokumentene og kan ikke alltid plasseres i klasser for gjenbruk. Der har SCSS en kjekk ting som kalles mixins.

En mixin er som en variabel, bare at du kan skrive hele CSS-biter du bruker ofte:


@mixin centered {
  margin-left: auto;
  margin-right: auto;
}
.box{
  @include centered;
  /* Annen CSS */
}


.box{
  margin-left: auto;
  margin-right: auto;
  /* Annen CSS */
}

Mixins med argument

Du kan også la mixins motta argumenter og sette standard-argumenter om ingenting blir angitt.

Bruker du ofte 1px ramme rundt bokser og avrundede hjørner er du kanskje lei av å skrive alle prefixene for de forskjellige nettleserene.

Ved å bruke SCSS kan du da lage deg en mixin som gjør dette veldig enkelt:


@mixin rounded($val) {
  -moz-border-radius: $val;
  -webkit-border-radius: $val;
  border-radius: $val;
}
.box{
  @include rounded(10px);
  /* Annen CSS */
}


.box{
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /* Annen CSS */
}

Komme i gang med SCSS

For å komme i gang med SCSS må du enten ha litt kunnskaper om Ruby og terminal(mac), være god til å søke og lese deg frem eller gå for et program som tar seg av alt.

Personlig har jeg valgt å gå for det siste alternativet. Jeg bruker et program som heter CodeKit, det lar meg administrere alt på en behagelig måte, også slipper jeg å styre med ruby og kommandoer jeg fort glemmer.

CodeKit overvåker de mappene du angir og kompilerer SCSS-koden til gyldig CSS. CodeKit har også en nyttig funksjon hvor det oppdaterer nettleseren med endringene du gjør uten at siden oppdateres. CodeKit har veldig mange funksjoner og muligheter og det fortjener et eget innlegg for å få med alt, så kanskje jeg skriver et innlegg om det senere.

Nytt standardbilde på kommentarer

2012-07-21T00:00:00Z

I dette blogginnlegget skal jeg vise hvordan man enkelt kan sette en personlig avatar som standard på kommentarer. Alt som kreves er en liten kodesnutt og et nytt bilde.

Bilder på kommentarene på en blogg kalles avatarer og WordPress benytter en tjeneste som kalles Gravatar for å la folk ha sine egne bilder på kommentarene uten å måtte registrere seg på hver enkelt blogg. For personer som ikke benytter gravatartjenesten vises enten WordPress sin “Mystery Man” eller autogenerert pixelart:

Avatarene man kan velge som standard

Vil man ha et eget bilde som standard, noe som kan ta seg bedre ut om man har lagd et pent design, krever det kun en liten kodesnutt som må limes inn i functions.php.

add_filter( 'avatar_defaults', 'ny_avatar' );

function ny_avatar ($avatar_defaults) { $ny_avatar = get_bloginfo('template_directory') . '/images/gravatar.png'; $avatar_defaults[$ny_avatar] = "Ny avatar"; return $avatar_defaults; }

Det denne kodesnutten gjør er å:

Kjøre funksjonen vår når WordPress skal vise avatarene.
Angi hvor vår avatar ligger (I dette tilfellet ligger avataren i “images”-mappen i tema-mappen).
Legge til vår avatar sammen med resten og gir den navnet “Ny avatar”.

Resultatet av dette er at det på administrasjonsiden “Settings – Discussion” har dukket opp et nytt valg for avatarer:

Min nye avatar.

Da skulle det være enkelt å lage din egen avatar for bruk på WordPress-siden, skulle noe være uklart er det bare å slenge igjen en kommentar.

Gode plugins til WordPress

2012-03-24T00:00:00Z

Har du din egen WordPress-blogg på eget domene? I såfall finnes det tusenvis av plugins(innstikk) som kan gjøre hverdagen din enda bedre. Iallefall for bloggingen din.

På wordpress.org finnes det per dags dato(20.03.12) 18.821 plugins. Det er plugins som kan gjøre alt mulig for bloggen din, fra små ting som å legge til widgets, slideshows eller vise populære innlegg til mer avanserte ting som deling av kladder, spam-filter på kommentarer og muligheter for å lage forum av bloggen.

Ikke alle plugins som ligger der er like gode, enkelte fungerer ikke i det hele tatt. Dette ser man heldigvis godt da alle plugins får en vurdering basert på hva brukerne syns, en stjerne er lav kvalitet og fem stjerner er god kvalitet.

Man kan søke, sortere etter kategori eller se de mest populære, nyeste eller senest oppdaterte. Videre får man opp installasjonsveiledning, beskrivelse, ofte stilte spørsmål(faq) og statistikk over hvor ofte den er er lastet ned når man går inn på en plugin.

Her kommer et par plugins jeg syns er veldig nyttige og som gjør WordPress bedre for meg:

Jetpack by WordPress.com

Jetpack gir en WordPress-blogg på eget domene mye funksjonalitet som man vanligvis kun får på WordPress.com. Funksjonalitet som:

Statistikk.
Gravatar Hovercards.
Shortcodes for Youtube, Slideshare, Vimeo.
Ekstra widgets som foreksempel kan vise tweets.
Mulighet for å lage korte url-adresser med WP.me
Og enda noen flere kjekke…

Jeg personlig er veldig glad i statistikken. Den viser meg enkelt om innleggene mine har hatt noen sidevisninger.

Popular Posts

Popular Posts gir deg en widget som lar deg vise de mest populære innleggene dine i en widget. Veldig kjekk for å la leseren finne mer lesestoff og holde de på siden din lengre.

Du har mange muligheter til å stille inn hvilke innlegg som skal vises, om sider skal inkluderes, om innlegg eldre enn x antall måneder skal fjernes også videre…

Share a draft

Ofte når man skriver innlegg skulle man ønske man kunne få tilbakemelding på det før man legger det ut, og det er ikke alltid man har andre tilstede.

Med Share a draft får man sendt en epost til ønsket adresse med en link som vedkommende kan trykke på for å lese innlegget. En veldig kjapp og enkel måte å få tilbakemelding fra andre på.

Man har muligheter til å trekke tilbake tilgang om man ikke vil at noen skal kunne lese lengre og man kan forlenge tiden en person har tilgang. Man har altså full kontroll på tilgangen.

Nytt design på siden min!

2012-03-18T00:00:00Z

Da har jeg endelig fått tid til å lage et eget tema til nettsiden min!

Jeg har til nå brukt et tema som heter Standard Theme, men har lenge hatt en plan om lage et eget tema når jeg har hatt tid. Min største hobby er webutvikling og av den grunn syns jeg det passer seg å ha noe jeg har laget selv som design på bloggen min.

Det er fremdeles mange ting som må gjøres før temaet kan kalles fullstendig, men for å se hvordan det fungerer har jeg valgt å prøve det i en periode nå.

Funksjonalitet

Jeg har hatt som mål å lage et tema med mye funksjonalitet som kan være kjekke å ha i et tema. Foreløpig har jeg lagd:

Mulighet til å bytte ut standard RSS-link med f.eks Feedburner
Mulighet til i bytte layout mellom en kolonne og to kolonner, høyre eller venstre sidebar.

Videre er planen å legge til:

Mulighet for å legge inn tracking-kode(Google Analytics).
Post-formats(Video, bilde, link, status).
Ajax-innhenting av innlegg på forsiden.
Responsive Design(Siden tilpasser seg skjermstørrelse).
Fikse css på enkelte elementer som ikke ser helt bra ut enda.

Så, hva syns du om temaet? Noe som ikke fungerer? Noe som er lite gjennomtenkt? Jeg er veldig interessert i å høre tilbakemeldinger på temaet og hva din mening er.

Path – et nytt sosialt nettverk

2012-02-16T00:00:00Z

I det siste har jeg prøvd et nytt sosialt nettverk, Path. Det er veldig spennende og jeg liker absolutt ideen, men har jeg bruk for det?

Path er på mange måter som Facebook, man legger til venner, skriver statusoppdateringer og legger ut bilder. Den store forskjellen ligger i at Path kun kan brukes på mobil, og at det er en maksgrense på 150 venner.

En grei ide, man får ett nettverk der man kun har sine nærmeste venner, men er det noe mer? Jeg kan vite at det jeg deler kun deles med de jeg virkelig kjenner, men det kan jeg da allerede kan i Facebook ved hjelp av lister. Path har også den supernyttige funksjonen at du kan si fra når du legger deg og står opp. Personlig syns jeg Facebook allerede har for mange som deler alt for mye unyttig, de trenger ikke flere funksjoner for å dele sånt.

Så min konklusjon er at det er bra det kommer sosiale nettverk som prøver på nye ting, men Path har ikke nok nytt til at jeg ser fordeler med det.

Introduksjon til WordPress

2012-01-20T00:00:00Z

WordPress har blitt et av de mest brukte cms og bloggverktøyene på internett. Det brukes av alt fra små personlige blogger, til store sider som Spotify.com. WordPress er derfor et veldig bra alternativ om man vil starte sin egen blogg eller personlige nettside. I denne artikkelen går jeg gjennom de forskjellige alternativene og hva forskjellen mellom de er.

Hvordan komme i gang?

Det er veldig enkelt å komme i gang med WordPress. Man har i utgangspunktet **to **muligheter:

WordPress.com (WP.com)
WordPress.org (WP.org)

Hvilken versjon man velger kommer helt an på tekniske ferdigheter, økonomi og hva man vil gjøre. Her kommer en gjennomgang av de to alternativene.

WordPress.com

WP.com er den aller enkleste måten å komme i gang med WordPress på. På WP.com registrer man seg og får tildelt sin egen blogg på bloggnavn.wordpress.com. Denne varianten er veldig enkel og det tar noen minutter å registrere seg og få bloggen tilgjengelig. Den største fordelen med WP.com er at man har muligheten til å få support om man skulle oppleve problemer. WP.com har også flere nyttige funksjoner innebygd som ikke finnes i WP.org-utgaven, blandt annet statistikk og facebook/twitter-innlogging for kommentarsystemet.

Samtidig som WP.com har endel funksjonalitet WP.org ikke har, mangler også WP.com endel funksjonalitet og muligheter WP.org har. WP.com mangler muligheten til å:

Legge inn egne temaer (themes).
Installere plugins.
Bruke verktøy som krever tilgang til kildekoden, f.eks Google Analytics.

Selv om man ikke kan legge inn egne themes så har WP.com mange themes tilgjengelig, slik at man kan få en blogg med et personlig preg.

WordPress.org

Alternativet til WP.com er WP.org. Her laster man ned WordPress-filene også må man laste de opp på et eget webhotell. Å gjøre dette krever litt mer teknisk innsikt enn å registrere seg på WP.com, men de fleste vil klare det med litt hjelp.

Å bruke dette alternativet krever at man har et eget domene (nettadresse) og et webhotell man kan lagre filene på. Dette koster som regel penger så om man kun er ute etter å komme i gang med blogging er WP.com et enklere og raskere alternativ. De største fordelene med denne løsningen er:

Total kontroll over nettstedet ditt.
Mulighet for å legge inn egne temaer (themes).
Mulighet for å legge inn plugins, noe som kan gi mye fancy funksjonalitet.
Mulighet til å bruke verktøy som Google Analytics.
Du får “dittdomene.com” istedet for “dittdomene.wordpress.com”

Legger du inn WordPress på ditt eget domene er du mye friere enn du er med WP.com. Du kan modifisere på kjernefilene til WordPress om du føler for det, og du kan skreddersy din egen blogg om du har kunnskaper innen html, css og php.

Oppstår det problemer har du ikke de samme support-mulighetene som du har med en blogg hos WP.com. Det finnes mange nettsteder med folk som hjelper hverandre, men du er aldri sikret svar eller en løsning.

Hva skal man velge?

Hvilken løsning man ender opp med kommer veldig an på hva man har planer om tror jeg. Er du en web-utvikler vil du helt sikkert ha muligheten til å lage egne tema, utvikle plugins eller gjøre andre ting på nettstedet. Jeg personlig syns det ser mye mer proft ut med en nettadresse som ikke har “wordpress.com” i seg.

Er du kun ute etter å blogge og ikke er opptatt av tekniske ting har du kanskje ikke like stor nytte av wordpress på eget domene.

Andre ressurser

Dette er ment som en kort introduksjon av de alternativene som finnes. Skulle du ha flere spørsmål må du bare legge igjen en kommentar.

Hvorfor analysere?

2012-01-15T00:00:00Z

Det er enkelt å legge inn Google Analytics eller andre analyseverktøy og det er enkelt å se på tallene etterhvert som besøkende ankommer. Men hva skal man egentlig med dataene man samler inn?

Hva kan være nyttig informasjon?

La oss si man har en nettside med endel artikler om bedriften sin, forskjellige produkter, nyheter og kanskje en blogg. Det vil jeg kalle en ganske fyldig nettside. Men som eier av nettsiden kan det være vanskelig å vite hvordan de besøkende ankommer siden. Det er mange måter en person kan finne siden på, foreksempel:

Søker etter produktene
Er en ivrig bloggleser
Søker på firmanavnet
Kommer fra Facebook (firmaside f.eks)

Uten analysedata vet man veldig lite om dette, og det er nesten umulig å finne det ut.

Begynner man å se mer på dataene man får ut av Google Analytics kan man finne ut hvilke sider brukerne først ankommer og hvor de kommer fra. Med Analytics kan man se hva slags enhet brukerne sitter på, om det er veldig mange mobil/tablet-brukere og hvor i verden de besøkende er fra.

Her kommer et eksempel på data man kan få ut fra Analytics:

40% av de besøkende bruker tablets(iPad, Galaxy Tab…)
De besøkende kommer stort sett fra Norge(55%) og England(30%)
De fleste besøkende kommer til nettstedet fra søkemotor og kommer til produktsidene.

Hva kan man så få ut av denne informasjonen?

Siden en så stor andel av de besøkende bruker tablets må man begynne å vurdere om man skal modifisere nettstedet og gjøre nettsiden mer touchvennlig om den ikke er det. Siden en forholdsvis stor andel besøkende kommer fra England kan det kanskje være lurt å lage en engelsk variant av nettsidene, og iallefall av produktsidene siden det er disse folk besøker.

Ved å bruke analyseinformasjonen på denne måten kan man oppdage at enkelte forandringer kan gjøre opplevelsen bedre for brukerne, få flere besøkende og finne ut hva besøkende liker ved nettstedet ditt.

PayPal, sosiale medier og sinte kunder

2012-01-12T00:00:00Z

Sosiale medier er en veldig fin plass å være, det er lett å nå ut til veldig mange og man kan ofte klare seg uten store utgifter. Man kan få mye ut av sosiale medier, men man kan også brenne seg skikkelig.

Veldig mange firmaer bruker sosiale medier aktivt til promotering, kundeservice og generelle tilbakemeldinger. Rimi bruker Facebook som support for sin app og tjeneste, Netcom brukeraktivt som kundeservice hvor de svarer på alle slags problemer folk måtte ha med Netcom.

Men det finnes også mange eksempler på bedrifter som har brukt sosiale medier på dårlige måter. Folk er flinke til å si fra når de er misfornøyde og i sosiale medier er det veldig enkelt å ytre sin mening. Sosiale medier har uante krefter, noe som Paypal oppdaget på den harde måten før jul.

PayPal stengte kontoen til en nettside som gav vekk leker til fattige barn. PayPal mente at nettsiden brøt med deres retningslinjer. Denne artikkelen fra Mashable summerer opp hendelsen veldig godt.

Etter hvert som folk fant ut hva som hadde skjedd begynte innleggene å komme på veggen til PayPal på Facebook. Det kom 10-20 nye innlegg hvert sekund og ingen av de hadde noe spesielt pent å si. Hva gjorde PayPal? Nesten ingenting, helt i starten slettet de enkelte innlegg men dette ble ikke mulig etterhvert når strømmen av innlegg ble større. Det mest fornuftige ville nok vært å stengt veggen for kommentarer, gitt en offisiell forklaring, forklart hvorfor det skjedde og hva som kom til å skje videre.

Har man fått så mange innlegg på siden sin at man ikke klarer å svare på alle, bør man iallefall legge ut en generell offentlig forklaring. Ingenting ser verre ut enn at alle som kommer med kritikk blir ignorert.

Det gikk nesten to døgn før PayPal ga etter, gjenåpnet kontoen og la ut et blogginnlegg med en beklagelse. På denne tiden hadde de nok fått flere tusen innlegg på veggen sin.

Jeg sjekket Facebook-veggen til PayPal i dag (12.01.12) og det er nesten bare **negative **innlegg der. PayPal selv har noen innlegg med linker til forskjellige nyheter som omhandler PayPal, men det er det eneste. PayPal har ikke svart på et eneste innlegg på veggen sin.

Enten så skjønner ikke PayPal nytten av Facebook og muligheten til å komme i kontakt med brukerne, eller så har de bestemt seg for å ikke bruke Facebook til kundekontakt. Uansett mener jeg de har mye å tjene på å vise kundene sine at de hører på de.

Kort om Google Analytics

2011-12-24T00:00:00Z

Uansett om det er en blogg, en nettbutikk eller en info-nettside man har er man interessert i å vite hvor mange besøkende man har. Det kan også være greit å se hvor i verden de besøkende kommer fra.

Har man en norsk blogg, men får veldig mange treff fra utlandet kan det kanskje være lurt å vurdere om man skal blogge på engelsk istedet for norsk. Det kan også være greit å finne ut når på døgnet og på hvilke dager man har flest besøkende.

Hva kan så gjøres?

For å overvåke trafikken på et nettsted kan man ta i bruk verktøy som foreksempel Google Analytics(GA). Det er et verktøy utviklet av Google som viser deg statistikk over de besøkende på nettstedet ditt. GA er gratis å bruke og krever kun en Google-konto. For at man skal kunne ta i bruk GA må man ha tilgang til kildekoden på sitt nettsted, dette betyr at foreksempel personer som har en blogg på wordpress.com ikke vil ha muligheten til å legge inn GA da de ikke har tilgang til html-koden.

Hva slags muligheter finnes det?

I GA kan man få se hvor mange besøkende man har hatt totalt, på spesifikke dager, fra spesifikke plasser og på hvilken tid av døgnet det er flest besøkende. Man har også muligheten til å se hva slags operativsystem, nettleser og enhet(mobil, iPad, data) som brukes.

Alt sammen vises i oversiktlige grafer og diagrammer.

Hva kan det brukes til?

Man kan bruke GA til å se hva slags målgruppe man har. Er flesteparten av leserne på mobil, kan det være lurt å vurdere om man skal gjøre nettsiden mer mobilvennlig.

Man kan få veldig mye forskjellig ut av å analysere trafikken, alt etter hva man ser på og etter.

Har du noen erfaring med Google Analytics eller lignende?

Et alternativ til Google Analytics

2011-12-24T00:00:00Z

I denne oppgaven i faget Sosiale Medier skulle vi se nøyere på et valgfritt analyseverktøy. Jeg prøvde å tenke meg om, men kom ikke på at jeg viste om noen andre enn Google Analytics. Jeg søkte derfor litt rundt og fant Clicky.

Alle bildene og informasjonen her har jeg funnet ut i fra demoversjonen på deres side.

Førsteinntrykket av det jeg ser er veldig bra. Clicky har et veldig oversiktlig og greit brukergrensesnitt.

Clicky fokuserer veldig på “live”-resultater. De viser brukeren i sanntid hvem som er inne på siden. Jeg må si jeg ikke helt ser vitsen med det, de brukerne som er inne på siden akkurat nå får man ikke gjort så veldig mye med likevel. Skal man analysere en side må man se på den over tid.

Sammenlignet med Google Analytics(GA)

Når jeg søkte på alternativer til GA var det Clicky som dukket opp veldig ofte. Derfor går jeg ut fra at folk flest også mener at det er en sterk konkurrent. Og jeg må si at jeg skjønte kjappere hvordan ting fungerte i Clicky, veldig oversiktlig og enkelt å komme i gang. Brukergrensesnittet er veldig behagelig uten for mye dilldall som forstyrrer.

Jeg vurderer derfor sterkt å teste Clicky en periode på min nettside og se hvordan det er.

Har du erfaring med Clicky? Eller andre alternativer til Google Analytics?

Julefreden senker seg

2011-12-20T00:00:00Z

**Eksamen er ferdig, leiligheten er ryddet og ordnet til jul, jeg er hjemme i Surnadal, treet er pynta og det har blitt julaften. **

Endelig er det skikkelig juleferie (jeg har forsåvidt en øving som skal inn og en rapport som skal leveres i Januar), men nå er det juleferie en stund.

Etter et langt semester med mange innleveringer, rapporter og øvinger er det godt å endelig komme hjem og kunne slappe av litt. Ikke ha skole å tenke på hele tiden, men bare slappe av sammen med familie. Nå skal jeg nyte ferien så lenge jeg kan før det blir skole igjen i Januar. I semesteret som har gått har jeg hatt mange forskjellige fag:

Endringsledelse
Formidlingsteknikk
Prosjektledelse av store IT-prosjekter
It, miljø og samfunn
Sosiale Medier
Webprogrammering i PHP

Av disse fagene er det definitivt PHP og Sosiale medier som har vært de mest spennende. Har virkelig fått sansen for PHP og har begynt å lage et lite system for administrering av timer i prosjekt. Hovedsaklig for læringens del, men kanskje kan jeg bruke det til noe fornuftig også. Jeg var også innom biblioteket og lånte meg en bok om PHP som jeg har tenkt å se på om jeg får tid.

Sosiale medier er et veldig spennende tema, det er så veldig mange muligheter der. Twitter har vist seg å bli en plass jeg tilbringer mer tid enn Facebook i det siste. Ved å følge mange spennende personer får jeg mye interessant lesestoff og spennende synspunkter på ting.

Blogging for min egen del har også blitt mye mer interessant etter hvert som jeg har lært mer om sosiale medier. Jeg har blitt mer bevist på markedsføring av meg selv og har blitt mye mer bevist på hvordan jeg opptrer på nett.

2012

****2012 blir et spennende år (ikke minst for å se om Mayaene får rett :P), men også fordi jeg mest sannsynlig skal ende opp i en jobb i løpet av året. I Mai er planen å være ferdig med en bachelor i IT-støttet bedriftsutvikling.

Vårsemesteret har jeg også planer om å ta Html5 som et bonusfag, har fått det inntrykket at man ikke kan drive med webutvikling uten å kunne html5 nå.

Sånn utenom skole har jeg planer om å fortsette å bruke php og utvikle nettsider, sette meg enda mer inn i WordPress, trene og være snill og grei.

Ca halvveis i semesteret!

2011-11-09T00:00:00Z

I det siste har alle blogginnlegg her vært svar på forskjellige oppgaver i sosiale medier-faget jeg tar. Nå tenkte jeg at det er på tide å blogge litt om andre ting også.

Dette semesteret er veldig forskjellig fra de andre semestrene jeg har hatt på høgskolen. Fra å ha ca en forelesning om dagen hver dag, har jeg dette semesteret hatt ca 15 forelesninger totalt. Dette semesteret er veldig mye mer opp til oss selv med rapporter og øvinger som skal inn hele tiden.

I Webprogrammering med PHP har jeg også et prosjekt, noe som er veldig mye mer morsomt enn de andre fagene til sammen dessverre. Hadde jeg bestemt alt her i verden hadde jeg bare brukt tid på det, for det er morsomt. Dessverre er ikke livet sånn og jeg må også prioritere andre oppgaver.

Ser frem til juleferie nå, slappe av uten innleveringer og prosjektarbeid. Da skal jeg fokusere mer på WordPress, jeg har planer om å lage et theme fra bunnen av.

Komme i gang med Sosiale Medier

2011-10-21T00:00:00Z

Har du en bedrift? Har du planer om å ta i bruk sosiale medier for bedriften din? Om svaret på begge spørsmålene er ja er dette blogginnlegget for deg.

1. Planlegging

Før man registrer seg på Facebook og Twitter er det veldig **viktig **å tenke på:

Hva vil du oppnå? (få flere kunder, skape dialog med kunder, reklamere.)
Hvordan skal du gå frem? (Hva skal skrives, hvem skriver, hvor ofte?)
Hvordan skal du behandle negativ kritikk eller dårlig omtale?
Hvordan kan du måle at du lykkes?
Hvilke nettverk skal du starte med? (Bare Facebook?)
Hva slags regler og retningslinjer har nettverkene?

Når du har tenkt gjennom og svart på alle spørsmålene her er det lurt å utarbeide en strategi for sosiale medier. Med en strategi har du full oversikt over planene for sosiale medier, noe som gir ansatte en enkel måte å sette seg inn i strategien på.

Det er veldig viktig å ha en strategi

2. Etablering

Når du har tenkt gjennom punktene i steg en og laget en strategi er det neste steget å registrere seg på et (eller flere) nettverk. Før du faktisk registrerer deg vil jeg anbefale at du bruker litt tid på å sette deg inn i funksjoner og sånn slik at du alt klart for deg. Når du registrer deg er det viktig at du har tenkt på et ordentlig navn på profilen. På en Facebookside lønner det seg å ha fullt firmanavn som tittel på siden og en forkortet versjon av navnet som “shortname” (facebook.com/shortname). På Twitter lønner det seg å angi et kort navn som brukernavn, også kan man ha det fulle navnet på firmaet som navn.

Når du har registrert siden og fått logget deg inn, er det bare å legge inn logo, beskrivelse og annen informasjon med en gang. Jo kjappere informasjonen ligger der, jo bedre ser det ut for besøkende. Skriv også et åpningsinnlegg sånn at besøkende ser at det faktisk skjer noe.

3. Når man har kommet i gang

Når man har hatt Facebooksiden og/eller Twitter-kontoen en stund ser du hvordan det har gått i starten. Går det greit å publisere innlegg med jevne mellomrom? Får du respons? Det er viktig at du ser på utviklingen til siden din og vurderer hvordan det går.

Om du ikke får noen tilhengere er det noe galt, kanskje finner ikke folk siden din eller så vet de ikke at den eksisterer. For å sjekke sånt, få venner og bekjente til å søke etter firmasiden din. De kan fortelle deg om de finner den lett eller ikke. Gjerne få venner og bekjente til å like siden din også, for når de liker den vil alle vennene deres få informasjon om siden også. Slik kan informasjon på Facebook spre seg veldig kjapt.

4. Ansvarsforhold

Når du legger ut informasjon på Facebook fra din bedrift så må du tenke på at kanskje ikke alle ansatte ønsker å være med på bilder eller få mye informasjon lagt ut. Om andre ansatte også bruker kontoen må de tenke på at de skriver på vegne av bedriften og ikke seg selv, deres meninger vil tolkes til at det er bedriftens meninger. Det er også viktig at man ikke legger ut konfidensiell informasjon fra firmaet.

5. Har du lykkes?

Det er et veldig vanskelig spørsmål. Det er vanskelig å måle effekten av sosiale medier, men du kan sjekke om folk har fått et bedre inntrykk av firmaet ditt, om du har fått flere kunder, kritikk på ting du ikke var klar over eller ting du virkelig er god på. For å kunne måle effekten av sosiale medier må du nesten sette deg mål selv også vurdere mot disse.

6. Noen ting å passe seg for

Det finnes flere bedrifter som har brent seg på Facebook fordi de ikke satte seg inn i reglene før de satte i gang. De feilene som mange bedrifter gjør er:

Ikke opprette en side, men en vanlig person-profil (Mot Facebooks reglement).
Opprette konkurranser som baserer seg på at folk skal “like” noe (Mot Facebooks reglement).
Opprette en firmagruppe istedet for side (Ikke ulovlig, men ser ikke like bra ut).
Legge ut innhold som bryter mot Facebooks retningslinjer (Så klart ulovlig).

Bryter man retningslinjene eller reglene risikerer man at kontoen blir slettet. Kontoen i seg selv er det ikke så farlig med, man kan alltids opprette en ny konto. Det er tilhengerne og innleggene som er viktige, har du opparbeidet deg 15.000 tilhengere er det veldig surt å måtte opprette en ny konto med 0 tilhengere. Det kan være veldig vanskelig å samle så mange en gang til.

Til slutt vil jeg si at det er viktig å ikke tenke at Sosiale medier skal være et mål for bedriften, sosiale medier må heller ses på som et verktøy for å oppnå andre mål.

Noe annet bedrifter på Facebook/Twitter må tenke på?

Bedrifter og Facebook!

2011-10-20T00:00:00Z

De fire siste årene har flere og flere av oss mennesker registrert oss og brukt ganske så mye tid på Facebook. Bare i Norge har Facebook over 2,5 millioner medlemmer, det er en veldig stor del av befolkningen. Flere og flere bedrifter oppretter også sider på Facebook, alt fra store bedrifter til lokale avdelinger av matvarekjeder. Bedrifter som befinner seg på Facebook har dermed veldig mange potensielle personer tilgjengelige.

**Hva kan bedrifter bruke Facebook til? **

Det finnes forskjellige måter en bedrift kan bruke Facebook på. Du kan bruke Facebook for å reklamere for produkter og fortelle om nyheter. Du kan bruke Facebook for å få tilbakemeldinger, ris og ros eller bruke det som enkel kundeservice. Facebook er også veldig grei om man har et budskap som man vil skal nås ut til mange. Det er mye større sjangse for at noen ser det på Facebook, enn at de ser det på hjemmesiden til bedriften.

Rimi foreksempel lanserte for en stund siden appen Rimi+. En app som lar brukeren lage handlelister fra sortementet til Rimi. Samtidig oppdaterte de Facebooksiden sin og lagde seg Twitterkonto. På Facebook har de også opprettet en supportfunksjon for appen sin. Her kan brukerne stille spørsmål og beskrive sine problemer med appen samt hjelpe andre med problemer, Rimi er også veldig aktive selv med å hjelpe brukerne.

Europris Surnadal bruker Facebooksiden sin til å reklamere for nyheter, både varer og forandringer i butikken.

Sagatun Grendahus derimot, bruker Facebook for å informere. Her finner man stort sett kontaktinformasjon og beskrivelse av lokalene. De bruker også Facebook til å svare på spørsmål angående huset.

Mange bedrifter bruker Facebook

Er Facebook bare positivt?

Det er ikke bare for en bedrift å opprette en side på Facebook også blir dette automatisk en suksess. Det er viktig at de har en plan/strategi for hvordan siden skal brukes. Det er også viktig å tenke på at «alle» ser hva man gjør, sånn at man hele tiden holder en saklig tone og tenker på at man fremstår på vegne av bedriften. Og svarer man på ros er det viktig at man også svarer på kritikk.

**Ikke gjør som Altibox… **

Alitbox har en Facebookside de bruker til å reklamere for nyheter og for å gi support til kundene sine. For en stund siden bestemte de seg for at Discovery Channel og noen flere kanaler ikke skulle være en del av grunnpakken deres. Noe som er greit. Problemet var at de ikke varslet om det på forhånd (noe som er ulovlig) og når irriterte kunder henvendte seg til dem på Facebook ble alle klager ignorert. Det mest usaklige var at det svarte på alle andre kundesupportspørsmål og henvendelser.

En sånn oppførsel gir et veldig dårlig inntrykk av en bedrift, og er ikke en måte å oppføre seg på nett. Er man mottakelig for positiv respons må man være det for negativ respons også. Etter å sett mye på Altibox sin vegg, så ser det ut som de er virkelig serviceinnstilte nå, så det var kanskje en enkeltepisode.

*Har du eksempler på god eller dårlig bruk av Facebook? *

Komme i gang med Twitter

2011-10-11T00:00:00Z

Twitter ble lansert i 2006 og er en mikrobloggingtjeneste som lar brukere legge ut oppdateringer på maks 140 tegn. Selv om det er enkelt å komme i gang med mikrobloggingen kan twitter være uoversiktlig og litt vanskelig å sette seg inn i. Twitter har i overkant av 200 millioner brukere og det kan være ganske overveldende om man akkurat har logget inn for første gang. For det skjer ikke en verdens ting før man begynner å “følge” andre.

1. Hva gjør man så på Twitter?

Når man følger andre vil det de legger ut dukke opp i din nyhetstrøm. Etterhvert som andre begynner å følge deg vil det du skriver også dukke opp i deres nyhetstrøm. Hele Twitter handler egentlig om nyhetstrømmen og det er hovedsaklig det Twitter er. Når andre legger ut et innlegg har du muligheten til markere innlegget som en favoritt, “retweete” eller svare på innlegget.

Å merke et innlegg som en favoritt betyr bare at innlegget lagres i en egen liste på profilen din, sånn at du får tak i innlegget senere. Jeg bruker stort sett funksjonen til å lagre innlegg med nyttige linker eller annet nyttig innhold når jeg har dårlig tid. Det er ikke alltid jeg rekker å gå inn på linken, sjekke innholdet og lagre bokmerke.

Retweet betyr enkelt å greit at du tar innlegget til noen andre og legger det ut på din egen nyhetstrøm. For alle andre vil det vises at du retweeter innlegget til den andre personen. Retweeting brukes til å videreformidle morsomme eller nyttige innlegg.

Reply betyr jo rett oversatt “svar”, men i twitter-sammenheng betyr det faktisk å legge ut et eget innlegg hvor personen du svarer er tagget. Det vil si at svaret du gir vil være synlig for alle.

2. Noen spennende personer å følge

Som tidligere sagt er ikke Twitter noe morsomt om man ikke følger noen. Siden jeg tar et fag som heter “Sosiale Medier” vil det være mest interessant å følge personer med interesse for sosiale medier.

Dette er fem personer som er anbefalt å følge i denne øvinga. Flere av de dukker opp ved et søk på “sosialemedier” og ser man på beskrivelsen deres ser man at alle sammen jobber / interesserer seg for sosiale medier.

Siden jeg hadde et fag i fjor som også omhandlet bruk av Twitter litt, har faktisk fulgt hele gjengen en god stund nå. Og kan absolutt bekrefte at de skriver veldig mange gode innlegg om sosiale medier og teknologi. Så jeg kan anbefale andre å følge disse også.

3. Hvorfor bruke Twitter?

Jeg husker ikke helt hvorfor jeg opprettet en konto på twitter, men jeg kan tenke meg det var av nysgjerrighet. Nå har det blitt en naturlig del av min dag. På samme vis som jeg sjekker facebook sjekker jeg også twitter. Men twitter er absolutt hva du gjør det til. Følger du tre-fire kjedelige personer får du heller ikke noen god opplevelse. Følger du derimot folk og bedrifter som jobber med ting du interesserer deg for, vil twitter bli mye mer spennende.

Start med å finne noen personer som har de interessene / fag-feltene du interesserer deg for, sjekk så hvem disse følger. På den måten kan du finne veldig mange interessante personer.

4. Litt om meg!

Som du kanskje har sett på høyresiden her, så har jeg også Twitter. Om du vil følge meg er brukernavnet mitt @andeersg. Jeg twittrer ikke så ekstremt mye, men prøver da å dele nyttige ting når jeg finner noe. Og blir alltid glad for å oppdage nye og spennende mennesker.

Hva er ditt inntrykk av Twitter?

Sosiale medier – Itfag

2011-10-02T00:00:00Z

I år tar jeg et fag som heter Sosiale Medier hos Itfag mens jeg studerer 3. året på Bachelor i IT-støttet bedriftsutvikling.

Sosiale medier er et nyoppstartet fag som kjøres for første gang dette semesteret. Opplegget ser veldig spennende ut med leksjoner, videoer og masse artikler om sosiale medier. Faget skal gi oss en bedre forståelse for hvordan sosiale medier kan tas i bruk av bedrifter, hvordan de forskjellige tjenestene og verktøyene kan utnyttes på best mulig måte. Faget kan absolutt anbefales til personer som er interessert i sosiale medier i bedriftssammenheng.

I Sosiale Medier er opplegget sånn at vi skriver alle oppgavene som blogginnlegg på hver vår blogg. Dermed vil det bli mye godt lesestoff for den som interesserer seg for sosiale medier, her finner du linker til mange av bloggene:

(Legger til flere etter hvert som folk kommer igang med faget)

Tilslutt må jeg si jeg gleder meg til å komme skikkelig i gang med dette faget, sosiale medier er et veldig spennende tema.

Pure Fiction – Strategi for sosiale medier

2011-09-26T00:00:00Z

Pure Fiction ble startet i 1999 i Trondheim. Vi jobber med rådgivning og strategi for bedrifter. Vi har siden oppstart opparbeidet oss noen faste kunder og bortsett fra det kommer det noen nye kunder via de gamle. Vi har nå vurdert en stund hvordan vi kan etablere oss på sosiale medier og dermed skape mer interesse for firmaet.

Vi har et ønske om å vises bedre på nett, skape en dialog med brukere og øke kunnskapen om firmaet. vi føler de kan øke folks kunnskap om oss ved at vi er mer aktiv på sosiale medier som f.eks Facebook. Vi kan også tenke oss å ha en blogg hvor ansatte og ledelsen kan dele kunnskap, fortelle mer om hva firmaet driver med og gi kunder og andre et inntrykk av oss.

Her kommer vår strategi for sosiale medier presentert via Slideshare:

Pure Fiction er et fiktivt firma oppdiktet for bruk i faget Sosiale Medier. Dette er også mitt første forsøk på en slideshare-presentasjon, hva syns du om den? **Kunne noe vært gjort annerledes (bedre)? **

Hva er en strategi?

2011-09-20T00:00:00Z

Hvordan skal man lage en strategi for bruk av sosiale medier, og trenger man en strategi for sosiale medier?

Situasjonen i dag

De fleste er å finne på forskjellige sosiale nettverk nå, bare i Norge har facebook over 2,4 millioner medlemmer. Dermed sier det seg selv at man når ut til veldig mange om man har en profil på et (eller flere) sosiale nettverk. Mange bedrifter har opprettet side på facebook, opprettet twitter-konto og opprettet blogg allerede, og man ser flere og flere komme etter.

Hva skal man så gjøre da? Opprette en facebook-side, gi ansvaret til en ansatt og la han styre siden? **NEI. **Skal man etablere seg på sosiale nettverk er det viktig at man har en plan. Man må sette seg mål man vil oppnå, hvem som skal delta, sette retningslinjer for hva som skal deles og hva man vil oppnå.

Hva er det man egentlig vil?

Hvorfor skal man etablere seg på sosiale nettverk? Hva vil man oppnå? Hvordan vet vi at vi har oppnådd det? Sånne spørsmål kan man finne 100 av om man bare tenker seg godt om. Og det er kanskje lurt, for hva skal man egentlig med en bedriftsblogg? Har bedriften i det hele tatt tenkt på det?

Jeg tror at det er veldig lurt å sette ned konkrete planer, mål og fremgangsmåter i starten. For eksempel kan dette være en fremgangsmåte i starten:

Det skal skrives ca to innlegg hver uke den første måneden.
De ansatte i avdeling-X skal skrive disse.
Etter en måned undersøker vi trafikken, hva leserne syns og hvilke grupper som leser bloggen.

Jeg tror at det er viktig å sette seg både kortsiktige og langsiktige mål for hva man vil oppnå. Et kortsiktig mål kan f.eks være at iløpet av første måneden skal facebook-siden få 100 “likes”. Langsiktige mål kan være å få økt trafikken på hjemmesiden til bedriften med x antall prosent, selge mer, kutte ned på reklamekostnader eller lignende. Jeg tror det er viktig at målene man setter seg faktisk kan måles.

Langsiktig

En ting som er veldig viktig er at man ikke “glemmer” de sosiale nettverkene. Det er lite som gir meg et dårligere inntrykk enn en firmaside på facebook der man ser veldig tydelig at bedriften var aktive i tre uker etter de lanserte siden, for så å glemme siden helt.

Skal man være tilstede på sosiale nettverk må dette inkluderes i rutinene til bedriften, sånn at det ikke glemmes vekk. Om man ikke tror man klarer å holde de sosiale profilene aktive er det bedre å ikke begynne.

Til slutt vil jeg si at det viktigste er å tenke nøye gjennom hva man vil oppnå.

Hva syns du om bedriftsblogger?

Automatiser internett

2011-09-19T00:00:00Z

I dag oppdaget jeg en ny tjeneste på nett med det spennende navnet ifttt eller “If this then” that som bokstavene står for. En tjeneste som lar deg sette opp automatiske rutiner basert på hendelser i forskjellige nettverk. Tjenesten kan du sjekke ut her.

Hva brukes det til?

Denne tjenesten har veldig mange muligheter, man kan foreksempel koble WordPress-bloggen sin til tjenesten og sette opp at hver gang du poster et nytt innlegg skal dette postes på Twitter.

Totalt så teller jeg nå 35 forskjellige tjenester man kan koble opp til ifttt, noe som gir store muligheter til å automatisere mange kjedelige ting.

Her er en annen prosedyre jeg har satt opp:

Blider jeg blir tagget i, lagres i Dropbox

Det er veldig mange og spennende muligheter og kombinasjoner, så jeg anbefaler alle å prøve tjenesten. Den koster heller ingenting, så det er bare å gå hit og prøve.

Har du prøvd? Hva syns du?

Forventningsfaktorer i sosiale medier

2011-09-18T00:00:00Z

Veldig mange bedrifter skaffer seg blogg, og begynner å blogge. Men hvordan opptrer man på en fornuftig og god måte?

Når man tar i bruk soiale medier er det viktig å fremstå ordentlig, sånn at leserne får et bra inntrykk av bedriften. Man kan bruke** forventningsfaktorer** for å gi et bra og ordentlig bilde av bedriften sin.

Lar man medarbeidere få skrive innlegg og komme med meninger gir man bloggen mye mer troverdighet enn at bare sjefen og pr-avdeling skal blogge. Å være god til å svare leserne, ta i bruk facebook, og twitter gir leserne et inntrykk av at de blir hørt, og de får et bedre inntrykk av firmaet.

Skal man ha en bedriftsblogg er det veldig viktig at man fremstår seriøst og ikke bare tuller. Her har jeg funnet noen eksempler på bedriftsblogger som er flinke på forventningsfaktorer:

Sparebank1:

Når jeg leser gjennom Sparebank1 sin blogg får jeg et stort inntrykk av at dette er troverdig. De har sju navngitte personer som jobber med bloggen, noe som for meg gir hele bloggen mye mer kvalitet enn at alle innlegg skulle hatt en forfatter med brukernavn “admin” eller lignende.

De har veldig mange nyttige artikler som f.eks omhandler id-tyveri, håndtrykk og omdømme, men også mer morsomme artikler som denne som forteller at de har samlet masse musikk de omtaler som “bankmusikk” på Spotify. Sånne artikler som det gir meg litt innsikt i hverdagen deres føler jeg, jeg får det inntrykket at man kan ha det morsomt selv i et stort seriøst firma.

Penger og Livet

En annen blogg jeg vil trekke frem er NRKBeta, NRK sin blogg om internett, nye teknologier og sosiale medier:

Som Sparebank1 sin blogg så er det her også flere navngitte personer som tar seg av skrivingen. NRKBeta omhandler teknologi, utvikling, sosiale medier og andre spennende tema innenfor teknologi, media og web 2.0.

NRKBeta er veldig gode på respons til leserne sine i kommentarfelt og på Twitter. I dette innlegget foreksempel ser man at artikkelforfatteren er raskt ute med å bli med i samtalene som oppstår i kommentarfeltet. Han svarer raskt, er saklig og bidrar videre til diskusjonen rundt temaet.

Det gir meg et veldig godt inntrykk av NRKBeta.

NRKBeta

Generelt kan man vel si at når bloggene blir brukt på gode måter med nyttige artikler og ikke fremstår som bare reklame for bedriften så får man straks et bedre inntrykk. At man lar ansatte skrive artikler hjelper også veldig på troverdigheten til bloggen. Men det viktigste, iallefall det jeg syns er viktigst, er at forfatterne er flinke til å følge opp artiklene sine, kommentere, bidra med mer enn å bare skrive selve innlegget. Da får jeg virkelig et inntrykk av at de legger ned en innsats i bloggen.

Facebook med Subscribe-button

2011-09-15T00:00:00Z

De siste dagene har Facebook gitt brukere muligheten til å aktivere en “subscribe”-knapp som man kan ha på siden sin.

Før måtte man være venn med personene for å ha mulighet til å se statusoppdateringer, nå gir facebook deg muligheten til å følge andre brukere uten å være venn med de.

Det eneste som kreves er at de har slått på muligheten for subscribers. Noe man kan gjøre her. Når du har aktivert det vil brukere som ikke er venn med deg få opp en knapp ved siden av “venneforespørsel” som lar brukeren “subscribe” eller følge deg. Da vil personene som følger deg få opp alle statusoppdateringer du skriver med personverninnstilling “Public” på sin egen vegg.

Jeg syns dette er en nyttig funksjon som gir mye muligheter for brukerne på Facebook. Vil du følge meg, trykk her.

Hva syns du om funksjonen?

Anbefaling: Instapaper

2011-09-14T00:00:00Z

Instapaper gir deg muligheten til å lagre artikler du finner på nett på en enkel måte, spare deg for hundrevis av bokmerker og du slipper å fylle nettleseren med faner.

Jeg har en stor uvane, etter jeg tar en nettleser i bruk går det maks 3 dager så har jeg minimum 15 faner oppe. Som regel er det artikler jeg har planer om å lese, guider jeg skal følge eller noe annet jeg skal sjekke når jeg får bedre tid. Resultatet blir dermed at jeg etter hvert når fanene er så mange at man ikke lengre kan lese hva de inneholder, putter de sidene som jeg har tenkt å lese i bokmerker. Noe som resulterer i at jeg får hundrevis av bokmerker i forskjellige mapper.

Bokmerker tenker jeg at egentlig skal de brukes til å lagre nettsider man bruker ofte, ikke til å lagre alle slags artikler man har tenkt å lese senere.

For å forandre på dette begynte jeg å søke litt rundt, og etter litt fant jeg Instapaper. Instapaper er en nettside som lagrer artikler for deg, på en veldig enkel måte. Du får et bokmerke som det lønner seg å plassere lett tilgjengelig i en bokmerkelinje eller lignende. Og dermed er det bare å trykke på bokmerket mens du er på en side du kan tenke deg å lese senere.

Instapaper lagrer deretter siden i kontoen din, sånn at du bare kan logge inn og lese artiklene senere. Du har også mulighet til å laste ned artikler til Kindle eller lignende, noe som gir deg mulighet til å lese artikler uten internett.

Itfag sin blogg – Liten analyse

2011-09-08T00:00:00Z

Itfag er en blogg skrevet av lærere ved HiST. På bloggen deler de informasjon om fag de kjører, tips og triks innen teknologi og annen nyttig informasjon for it-studenter og andre interesserte.

Itfag-bloggen ble startet opp i Juni 2010, og har siden da vært en aktiv blogg med flere bidragsytere. Det er hovedsaklig lærere og ansatte ved Aitel som er forfattere. Bloggen inneholder mange artikler om fag man kan velge, erfaringer og oppgaver fra fagene, teknologi-tips og anbefalinger av programmer, metoder og operativsystem.

Denne bloggen henvender seg mot studenter, folk i jobb som tenker å utvide kunnskapen sin, lærere og andre med interesse for nettbasert læring, teknologi og utdanning. Jeg kan tenke meg den har tre hovedfunksjoner:

Reklamere for Itfag
Gi informasjon til studenter
Dele nyttige tips og triks med andre

I blogginnlegget som omhandler webinaret om metoden “Getting Things Done” ser man at det er hovedsaklig lærere og andre folk som driver med læring som har kommentert. I blogginnlegget om jenter og ingeniørstudier er det derimot flere studenter som har svart. Hvem som kommenterer kommer veldig an på hva innlegget handler om, noe som er ganske naturlig da forskjellige målgrupper interesserer seg for forskjellige ting.

Kommentarer gir leserne en mulighet til å gi tilbakemeldinger til bloggeren. Lesere kan være med å diskutere innholdet i innlegget, de kan si sin mening om saken og det er en fin plass for diskusjon rundt temaer. Itfag er veldig gode til å ikke glemme innleggene sine etter at de er publisert, de følger hele tiden opp kommentarer som kommer og svarer leserne. I disse to eksemplene over ser man at forfatterne av innleggene er flinke til å følge opp og svare på kommentarer.

Bloggen bruker WordPress som bloggplatform, en gratis løsning som blir brukt av veldig mange bloggere. Den enkleste måten å sjekke hva slags plattform en blogg bruker er ofte å sjekke hva som står skrevet i footeren (Nederste delen av nettsiden). På Itfag ser man wordpress-logoen helt ned til venstre. Om man ikke finner noen kjennetegn åpenlyst kan man ta en titt på kildekoden.

I kildekoden kan man lete etter denne linjen: <meta name=”generator” content=”WordPress 3.0.1″ />. Den skal ligge i head-seksjonen om det er en WordPress-blogg. Et annet kjennetegn på at det er WordPress er at mange linker inneholder mapper som begynner på wp, f.eks wp-content.

Grunnen til at de har valgt WordPress er nok at det er en av de beste plattformene for blogging nå. Veldig mange store firmaer har blogger drevet av WordPress, og det er jo et tegn på at det fungerer veldig godt. WordPress har også veldig god funksjonalitet og masse funksjoner som gjør blogging enkelt. Blant annet kan flere brukere være knyttet til samme blogg, det er lett å plassere bilder i innlegg og det er lett å administrere alle innlegg, kommentarer og sider.

Når jeg ser på valget av tema til bloggen syns jeg de heller skulle lagd et eget tema. De heter Itfag og jeg vil tro de har kunnskapen til å designe et tema som er unikt for dem. Personlig syns jeg det er mye mer interessant når jeg kommer inn på en blogg og ser noe unikt ( Fullt klar over at jeg ikke har laget temaet jeg bruker heller ). Iallefall syns jeg de kunne byttet ut faviconet med et mer unikt og gjenkjennelig. Bortsett fra dette har de absolutt valgt et tema med god funksjonalitet, funksjonen som lar meg redusere alle innleggene på fremsiden til bare overskrifter er veldig kjekk når man leter etter innlegg.

Jeg syns bloggen er en viktig ressurs for Itfag. De selger nettbaserte fag og bloggen er en smart måte å reklamere på. Interesserte personer kan gå inn og lese mer om fagene de har lyst til å ta, kommentere og dermed sitte igjen med et veldig godt inntrykk.

Siden du har kommet ned hit betyr det at du nå har lest deg gjennom mine tanker rundt blogg.itfag.hist.no. Grunnen til at jeg har skrevet dette er fordi jeg tar et fag som heter Sosiale Medier hos Itfag, og dette har vært en del av den første øvinga. Den første øvinga kan du lese her om du er interessert.

Har du synspunkter rundt det jeg har skrevet? Sleng gjerne igjen en kommentar.

Anders Grendstadbakk

Skolestart!

2011-09-05T00:00:00Z

skoleår, 5. semester, snart ferdig med bachelor-grad.. Tiden går kjapt!

Nest siste semester har herved startet og etter mye vurdering er jeg ganske sikker på fagene jeg har valgt.

Bortsett fra standardfagene jeg må ha har jeg valgt Sosiale Medier og Webprogrammering med PHP. Så denne høsten skal jeg også bruke bloggen min i faglig sammenheng. Sosiale Medier benytter blogg i fagopplegget.

PHP ser jeg virkelig frem til å lære meg. Har brukt html/css og litt javascript i flere år nå, og gleder meg til å lære et språk som virkelig kan gi nettsider mer funksjonalitet.

Ellers så begynner jo spørsmålet om hva som skal skje om ca ett år å komme, master eller jobb? Absolutt ikke godt å vite, men jeg tenker at det sikkert lønner seg å prøve å finne en master og ta denne.

En annen ny ting er temaet jeg har på bloggen min. Jeg har valgt å kjøpe meg ett, og gikk for Standard Theme. Likte dette temaet veldig fra første gang jeg så det. Så nå blir det litt justeringer og fiksing til jeg blir helt fornøyd.

Planlegge et nytt design

2011-07-10T00:00:00Z

Selv om det ikke er lenge siden jeg lagde dette designet som jeg har på siden nå, så er jeg ikke fornøyd og har begynt å planlegge et nytt ett.

Noe som ikke er så enkelt, jeg vet ikke helt hvordan jeg vil ha det. Så de siste dagene har jeg brukt på å lete rundt på internett etter blogger og nettsider for å få litt inspirasjon.

Jeg har satt meg det målet at det nye designet skal bli litt mer innholdsrikt i forhold til dette her.

Etter å ha sett litt rundt om kring på nett har jeg begynt å planlegge litt mer. Jeg skriver ned en liste over forskjellige ting jeg vil ha med som farger, bilder og andre elementer også begynner jeg så smått å redigere et tomt theme jeg har.

Videre har jeg bestemt meg for at jeg skal prøve å holde meg til det jeg har notert nå og ikke forandre ting absolutt hele tiden som jeg ellers gjør. Så får vi håpe at det kommer noe godt ut av dette.

Hva skal man velge?

2011-06-09T00:00:00Z

Eksamensresultatene fra vår-semesteret har kommet og jeg kan kalle semesteret for ferdig. Men nå begynner tankene rundt hva slags fag jeg skal velge til høsten. Foreløpig står det mellom:

De to webprogrammeringsfagene er valgfag vi kan velge mellom som en del av studiet, de to andre vurderer jeg å ta som bonusfag. Jeg ser for meg at det kan bli krevende å skulle ha flere av de samtidig, men alle ser virkelig interessante ut.

Personlig syns jeg PHP ser mye mer spennende ut enn ASP.Net, men jeg vet ikke hva som kan være mest taktisk med tanke på fremtidig jobb?

Sosiale medier og html5 skal jeg ta, må bare finne ut når det passer best.

Html5 tar for seg mulighetene man har og hvordan man kan utnytte html best. Faget ser også på css3, noe som virker veldig spennende. Jeg bruker css3 litt på denne nettsiden også.

Sosiale Medier ser på bruken av Facebook og Twitter i bedriftssammenheng.

Planen fremover er å lese mye om de forskjellige språkene, også prøve å finne ut når de forskjellige fagene passer best i forhold til andre fag.

Blogging på mobil

2011-05-30T00:00:00Z

Nå har jeg installert WordPress for Android og begynt å teste dette så smått.

Jeg kan med en gang si at det ikke er det samme som å bruke en pc, men det fungerer for små innlegg eller kladding.
Det som er mest genialt er mulighetene til å skrive uten tilgang til internett. Man kan begynne på et innlegg og når man får internett igjen kan man laste opp det man har skrevet.

Ellers har man muligheten til å laste opp bilder, formatere teksten og legge til tags. Så man kan lage fullverdige blogginnlegg med mobilen.

Personlig vil jeg nok si at jeg foretrekker å skrive på pc med litt større skjerm og bedre tastatur enn mobiler, men absolutt kjekt å ha om man føler for å kladde litt på et innlegg.

Forandringer!

2011-05-22T00:00:00Z

Nå går semesteret mot slutten og da begynner jeg endelig å få litt tid til nettstede mitt igjen. Jeg har derfor bestemt meg for å lage et helt nytt design, da jeg jeg ikke var helt fornøyd med det gamle.

Nå er det 33 timer til det er skoleferie og det skal feires sammen med klassen på kvelden. Så er planen for resten av sommeren å skaffe seg jobb i Trondheim. Så forhåpentligvis blir det mye tid til å fikse og trikse med nettstedet.

Snakkes 😉

#SoMeWebinar

2011-03-18T00:00:00Z

I dag hadde vi en forelesning utenom det vanlige. Vi skulle ha forelesning om sosiale medier i faget Samarbeidsteknologi og skulle derfor prøve noe nytt.

Vi brukte Adobe Connect, en nettbasert løsning for foredrag. Ved hjelp av Twitter hadde læreren fått tak i 5-6 personer som holdt forskjellige fordrag om sitt forhold til sosiale medier.

Adobe Connect lar foredragsholderne dele skjermen sin, vise en powerpoint-presentasjon, snakke og bruke webcam. Noe som fungerte veldig bra hele tiden, med unntak av enkelte tilfeller hvor lyden falt vekk.

Men, det beste med hele greia er at om man kobler dataen til tven, så kan man sitte i sofaen, spise frokost og slappe av mens man er på forelesning. Absolutt min type forelesning.

Andeers.com

DDEV

Enter DDEV

Many possibilities

Good framework support

Installing DDEV

Bottom line

Can Prettier be used with Drupal?

Setting up Prettier for PHP

Can it be used with Drupal?

This is not a redesign, it's the beginning of one

Simple drush with and without ddev

The solution

2022

Work

Personal life

Other stuff

Plans for 2023

Create-react-app in Drupal

Hooks and a manifest to the rescue

2021 in review

Plans for the next year

Permissions API

Use cases?

How to disable FLoC on Netlify

10 years!

Quicktip: Github profile readme

Setting up Nginx with PHP

Installing nginx

Installing PHP

How to update to Drupal 9

Are you ready?

My solution

Generate many screenshots for inspiration

Drafts and scheduled publishing

Scheduled publishing

The complete solution

Possible changes

Disable row in Drupal tableselect

Refresh Service Worker

How to detect when a new worker is available

Service worker

Browser

Eleventy tip: Markdown template engine

Eleventy Essentials

Start using the _data folder

eleventy.js

metadata.json

.eleventy.js

Create a collection based on a folder of files

Latest posts

Date functions

Meta functions

Other stuff

The CSS Widows

What are widows?

Example

Different front page for logged in users in Drupal 8

How to solve it

Improvements

Other solutions?

Use DigitalOcean and home computer to update domain IP

Prerequisites

Find the domain record id

Run the script automatically

Linux

OSX

Windows

Why is this necessary?

Remember to configure your router

Ideas for what you can do with it

Entity API in Drupal 8

Changes from Drupal 7

Load a node in Drupal 8

Working with fields

Updating and saving entities

Creating a new entity

Deleting entities

What's next?

Programming advent calendars