Web-Development on Janik von Rotz

More commands for the terminal navigation

Mon, 27 Apr 2026 17:24:30 +0200

Last Friday I added the terminal navigation. In the meantime I have added a few more commands.

These are the new commands:

rg <pattern>: Opens the search page passes the pattern as search term.
cd footer: Lists navigation items of the footer.
quit/q: Close the window.
doom: Play doom.

Terminal navigation

Fri, 24 Apr 2026 08:52:27 +0200

Inspired by my brothers new navigation I created my own custom navigation. In fact it is already live on my website. Once I my brother sees it, he will roll his eyes and think “What else did I expect!”. The new navigation is a terminal prompt!

Here is a recap of how I built the new navigation.

Specification

My initial thought was to simply show a a terminal screen instead of the navigation list. What I had in mind was something like this:

user@debian:/~$ ls
Home/ About/ Projects/ CV/ Contact/ Archive/ Tags/ Categories/

Instead of implementing a fully fetched terminal, I wanted to start easy and only support these commands:

cd <path>
ls
help

Changing into a directory should switch the page. Processing the inputs will most likely require some javascript. However, I know the no-javascript folks out there and wanted to make is sure there is a fallback to the normal navigation if javascript is disabled or not supported.

Mockup

Instead of prompting the entire thing, I started out with simple mockup.

In my Hugo theme I updated the file layouts/partials/header.html with this:

<header>
    <h1>{{ .Site.Title }}</h1>
    <nav>
      <style>
        #terminal-screen {
          background-color: black;
          color: white;
          font-family: monospace;
          font-size: 1.1em;
          padding: 1em;
          padding-left: 1.3em;
          margin-top: 1.5em;
        }
        #terminal-screen input {
          font-size: 0.8em;
          border: none;
          margin: 0em;
          background: black;
          color: white;
          border-bottom: 1px solid white;
          border-radius: unset;
        }

        form > input:focus {
          border: none;
        }
      </style>
      <script>

      </script>
      <div id="terminal-screen">
        <form>
          <span>user@arch:/~$ </span><input type="text" placeholder="help" />
        </form>
        <p>Write 'ls' and hit enter to list navigation items. Use 'cd &lt;item&gt;' to open the link.</p>
        {{ range .Site.Menus.main }}
          <a href="{{ .URL }}">{{ .Name }}</a>/
        {{ end }}
        {{ if .Site.Params.search }}
          <a href="{{ .Site.Params.search.url }}">Search</a>/
        {{ end }}
      </div>
    </nav>
</header>

And in result got this:

There is no functionality, it just shows what the entire thing should look like.

Implementation

Maybe it could have been implemented without javascript. Some people build entire compilers with html/css only! But I am not one of them. My initial prompt along the with the mockup code was this one:

Update the form and the help text to be hidden. Then add javascript that reveals the form and hides the navigation items. I want to make sure that the navigation works with and without javascript. Further add javascript to process the form input. If the user enters help then show the help text. If the user enters list then show the navigation item. If the user enters cd <item> open the link of the item. The input should not care about upper and lowercase letters.

The output not ok and the code and prompt required some tweaks. I updated my mockup:

Set an id on every element.
Replace the p tag with span

And extended the prompt:

Ask to not add comments to javascript code
Use attribute hidden and not the style

Then the output was good enough and I could further reine the code. The final result is: https://codeberg.org/janikvonrotz/hugo-new-css-theme/src/branch/main/layouts/partials/header.html

I very much like that the javascript code and style is embedded into this file. Of course I have many ideas on how to improve this thing, but I would like to hear from you the readers. So please share your though in the comments.

Hide native tabs with Tree Style tabs for Firefox

Mon, 20 Mar 2023 17:15:22 +0100

As the workspace for developers has moved almost entirely into the browser, browser extensions have become an integral part for customizing the workflow. Recently, I started to the use the Tree Style addons: https://addons.mozilla.org/en-US/firefox/addon/tree-style-tab/

When using this extension, the native tab bar becomes obsolete. The following part of the post is an instruction on how to hide the native tab bar (which is a bit difficult).

Type about:support into the address bar.
Look for the Profile Folder entry and click on Open folder.
Create a file named chrome/userChrome.css in the directory:

mkdir chrome && touch chrome/userChrome.css

Populate the file with the following CSS code:

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar>.toolbar-items {
    opacity: 0;
    pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    display: none;
}

.tab {
    margin-left: 1px;
    margin-right: 1px;
}

Then type [about:config] into the address bar and set toolkit.legacyUserProfileCustomizations.stylesheets to true.
Restart Firefox

Now the native tab should be hidden. To reset the change simply remove the userCrhome.css file.

Convert markdown wiki Links to html links

Thu, 03 Sep 2020 11:35:27 +0200

Wiki-Links [[ ]] are not part of the markdown specification, but are often used by markdown editors such as Obsidian. As they are not supported by most markdown converters we need to convert the wiki links on our own.

To generate beautiful documentations from my markdown files, I’m using docsify. Docsify is a singe page application that reads and converts the content from markdown files inside a folder. It allows to plugin code in the the markdown render process via hooks. The code I’ve written to convert wiki links can be used for other platforms as well. So there is no need to use docsify in order to understand what is going on.

Let’s have a look on how I have converted to wiki links to html a-tags. Create a folder on the command line and have the latest node version at your hand.

Create JavaScript file as showed below:

convert.js

const convert = function (content) {

    // convert wiki image links
    const wikiImage = /!\[\[([^\]]*)\]\]/g
    content = content.replace(wikiImage, '<img src="/assets/$1" \/>')

    // convert wiki links
    const link = /\[\[([^\]]*)\]\]/g
    let matches = content.match(link) || []
    for (i = 0; i < matches.length; i++) {

        let match = matches[i]
        let title = match.match(/\[\[([^\]]*)/)[1]
        let href, anchor

        if (match.indexOf('#') > 0) {
            anchor = match.match(/#([^\||\]]*)/)[1]
            // Convert to docsify id
            anchor = anchor.toLowerCase().replace(/ /g, "-")
        }

        if (match.indexOf('|') > 0) {
            href = match.match(/\[\[([^\||#]*)/)[1]
            title = match.match(/\|(.*)\]\]/)[1]
        }

        // build the a-tag
        content = content.replace(match, `<a href="/#/${href ? href : title}${anchor ? ('?id=' + anchor) : ''}">${title}</a>`)
    }

    return content
}
module.exports = convert

The convert.js export a function that expects markdown content and then converts all the wiki links.

Here follows short demonstration on how to use this function.

Create a markdown file in the same folder.

content.md

[[Lorem ipsum#dolor|Lorem dope]] dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est [[Lorem ipsum]] dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et [[dolore|lorem]] magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est [[#dolor|Lorem]] ipsum dolor sit amet.

And this test file as well.

test.js

fs = require('fs')
convert = require('./convert')

fs.readFile('./content.md', 'utf8', function (err, data) {
    if (err) {
        return console.log(err);
    }
    console.log(convert(data))
})

Finally, run the test with the command node test.js and you should get these results:

<a href="/#/Lorem ipsum?id=dolor">Lorem dope</a> dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <a href="/#/Lorem ipsum">Lorem ipsum</a> dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et <a href="/#/dolore">lorem</a> magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est <a href="/#/Lorem?id=dolor">Lorem</a> ipsum dolor sit amet.

The links have been converted according to my custom a-tag build.

My Webapp Tech Stack

Mon, 01 Jul 2019 11:38:43 +0200

In this post I am going to present you my personal tech stack for web development. I want to tell more about the technologies and methodologies I am using to build web applications. In that sense it would be glad if you share your stack and methodologies in the comment section.

Methodology

My technology-independent methodology and approach to software development:

Web apps over native apps (aka progressive web apps)
The twelfe-factor app
Serverless compute manifesto

Technology

For every layer of a modern web application I focus on one technology.

Language: JavaScript

JavaScript has become an ubiquitous programming language for web development.

UI Framework: React

React is the most popular user interface framework. Whereas Angular dominates the enterprise domain, React is the first choice for consumer apps.

UI Components: Material-UI

Material-UI unites Google’s design principles and React’s versatile components. Designing components and implementing a visual design that adheres to best practices has become a major challenge. Using Material-UI components makes it trivial to build an attractive UI within a short amount of time.

Client State: Apollo Client

Apollo is a GraphQL implementation. The Apollo client makes it easy to manage the local state of a React app.

Backend: Apollo Server

Apollo provides the flexibility and versatility required for designing and implementing complex APIs. The schema language makes it easy to define a solid and coherent data model. Whereas resolvers offer the necessary flexibility to connect the schema to the business and persistence layer.

Database: MongoDB

The NoSQL approach has become outdated. However, if you design the schema with GraphQL there is no need in applying a schema to the database.

Platform: Zeit Now

Zeit’s Now offers serverless deployments with little overhead for configuration. It supports monorepos and makes deployments automatically globally available.

DB Platform: mLab

mLab is the most popular MongoDB hosting platform. I especially appreciate their sandbox plan.

Minor Tech

Package manager: yarn
Auth Token: JSON Web Token
App Config: dotenv

Autodeploy to Github Pages with Travis CI

Wed, 11 Nov 2015 09:37:05 +0000

Github pages are a common way to create a website for your open-source project. Github provides a website generator tool which simply reads the README file from your repository. The big disadvantage is that there’s no auto deployment for your this kind of website. You always have to run the generator manually. To solve this problem we need a third-party computing engine that automatically updates our page. This is the perfect job for Travis CI. Travis CI is a Github integrated continuous testing platform that runs tests for different development frameworks. It triggers a test whenever you make a commit on your Travis registered repository. We will use Travis to update our page whenever we make a commit to our repository.

Now I will show you how you can setup this kind of autodeploy. This guide assumes you have a repository on Github that uses npm and gulp to create a website into a folder named out. Make sure to update <> tags in the instruction steps.

First create a deploy.sh file in your repository.

This script will be executed by Travis CI later. The idea of the script is to create an out folder which holds the website that is deployed to the Github page repository.

#!/bin/bash
set -e # exit with nonzero exit code if anything fails

# clear and re-create the out directory
rm -rf out || exit 0;
mkdir out;

# run commands to build the website in the out folder
npm install -g gulp
npm install
gulp

# go to the out directory and create a *new* Git repo
cd out
git init

# inside this git repo we'll pretend to be a new user
git config user.name "Travis CI"
git config user.email "<name>@<domain>.com"

# The first and only commit to this new Git repo contains all the
# files present with the commit message "Deploy to GitHub Pages".
git add .
git commit -m "Deploy to GitHub Pages"

# Force push from the current repo's master branch to the remote
# repo's gh-pages branch. (All previous history on the gh-pages branch
# will be lost, since we are overwriting it.) We redirect any output to
# /dev/null to hide any sensitive credential data that might otherwise be exposed.
git push --force --quiet "https://${GH_TOKEN}@${GH_REF}" master:gh-pages > /dev/null 2>&1

As already mention this script uses npm to installs gulp and dependencies and also runs the gulp tasks that will in result create the website.

Next register your repository on: https://travis-ci.org/
Then go to https://github.com/settings/tokens and create a access token with default rights for Travis CI.
Now format the token like this: GH_TOKEN=<your_github_username>:<your_token> Travis will use this token to update the git repository. To provide the token to Travis we can set environment variables. This environment variables are declared in the .travis.yml file.
Install the Travis cli. You can either install it with npm: https://www.npmjs.com/package/travis-encrypt Or as ruby gem: https://github.com/travis-ci/travis.rb Either way the Travis cli can encrypt strings by using the Travis ssl certificate of your repository.
Open a command line in your repository (you have to be in your repository otherwise Travis cannot encrypt anything).
Run travis encrypt GH_TOKEN=<your_github_username>:<your_token> and copy the encrypted string.
Create a .travis.yml in your repository and paste the code below with your encrypted string.

script: bash ./deploy.sh
env:
  global:
  - GH_REF: github.com/<username>/<repository>.git
  - secure: "<encrypted_token>"

This configuration file will tell Travis what to do and set environment variables which will passed to our deploy.sh script file.

Make a commit on your repository, go to https://travis-ci.org/username/repository and make sure the build is successful.

If you want to see an example in action open this repository: https://github.com/HaloCustomEdition/Halo

Finally WhatsApp has grown up

Thu, 26 Feb 2015 17:31:00 +0000

Since the dawn of the internet I’ve been waiting for this feature. After every other chat app competitor (see line or telegram) have launched their web app, WhatsApp finally is available for your browser. Simply go to https://web.whatsapp.com/, scan a QR-code and start chatting with your friends.

Let’s write a Laravel application - Fulltext search

Fri, 13 Feb 2015 09:59:27 +0000

This time I want to show you how you add a search functionality to your Laravel application that accomplishes the following features:

Fulltext search in Eloquent model
Define searchable columns
Define result relevance for searchable columns
Customize the look of the search results based on the model
Independent search bar.

To search in Laravel models we will use this searchable trait from Nicolás López. Install it with composer.

First add a new route to handle our search requests.

app/routes.php

Route::get('search', [
    'as' => 'search', 'uses' => 'MemberController@search'
]);

app/models/*.php

For every model that will be searchable you have to add the searchable trait and define the searchable columns and their result relevance. You can get the details of this step from the searchable trait documentation (link above).

You can use any controller of your app to handle the search requests as long you’ll add the following function to this controller.

app/controllers/MemberController.php

	public function search()
	{
		$query = Input::get('q');
		$route = Input::get('route');

		if(preg_match( '/^members.*/', $route)){
			$model = 'Member';
			$route = 'members';
		}elseif(preg_match( '/^categories.*/', $route)){
			$model = 'Category';
			$route = 'categories';
		}elseif(preg_match( '/^boats.*/', $route)){
			$model = 'Boat';
			$route = 'boats';
		}elseif(preg_match( '/^damages.*/', $route)){
			$model = 'Damage';
			$route = 'damages';
		}elseif(preg_match( '/^trips.*/', $route)){
			$model = 'Trip';
			$route = 'trips';
		}elseif(preg_match( '/^users.*/', $route)){
			$model = 'User';
			$route = 'users';
		}else{
			$model = 'Member';
			$route = 'members';
		}

		$results = $model::search($query)->get();
		return View::make('search.index', compact('results', 'model', 'route'));
	}

For every route you want to provide the search functionality you have to add a case and define the model and redirect route.

Now add a new view to display our search results and customize the look of the search results for every model type.

app/views/search/index.blade.php

@extends('default.master')

@section('content')
  @foreach($results as $result)
    <a href="{{ URL::to($route.'/' . $result->id . '/edit') }}">

    @if($model=='Member')
    <article>
      <h2>{{$result->firstname.' '.$result->lastname}}</h2>
      <p>{{$result->id.' '.$result->email}}</p>
    </article>
    @endif

    @if($model=='Category')
    <article>
      <h2>{{$result->name}}</h2>
      <p>{{$result->id}}</p>
    </article>
    @endif

    </a>
  @endforeach
@stop

Finally we add the search bar to a default blade template.

app/views/default/navigation.blade.php

  {{Form::open(['url' => 'search', 'method' => 'GET','class' => 'navbar-form navbar-right', 'role' => 'search'])}}
      <div class="form-group">
        {{ Form::hidden('route', isset($route) ? $route : Route::getCurrentRoute()->getPath())}}
        {{ Form::text('q', null, ['class' => 'form-control', 'placeholder' => 'Search'])}}
      </div>
      {{ Form::button('', ['type' => 'submit', 'class' => 'btn btn-default glyphicon glyphicon-search']) }}
    {{Form::close()}}

If done you’re are ready to run.

O3M 56 - TripTrap

Fri, 13 Feb 2015 09:43:36 +0000

Nope this isn’t a trap playlist. That’s a delicious series of relaxed tracks to make your day even more pleasant.

Let’s write a Laravel application - Form validation for your backend and frontend

Tue, 10 Feb 2015 00:18:29 +0000

Form validation is always part of your data process workflow. With Laravel you can to validate the input on the controller or the eloquent model. To provide a seamless user experience it’s better to validate a form with JavaScript in the frontend. However due to security reasons you have provide a backend validation, otherwise it would possible to inject non valid data.

Luckily Bilal Gültekin came up with this awesome solution.

The ideas is simply avoid writing validation rules twice (backend and frontend) and rather reuse the backend validation rules by adding them as parameter to our frontend form. The extension requires the jquery validation plugin.

Let’s get started by installing the required assets.

Install the Laravel extension with composer.

composer.json

"require": {
	"bllim/laravel-to-jquery-validation": "*"
}

app/config/app.php

'providers' => array(
	 'Bllim\LaravelToJqueryValidation\LaravelToJqueryValidationServiceProvider',
)

The extension comes with a configuration file and two assets. You have to publish them first.

php artisan config:publish bllim/laravel-to-jquery-validation
php artisan asset:publish bllim/laravel-to-jquery-validation

In the folder public/packages/bllim/laravel-to-jquery-validation/ you’ll find now two JavaScript files. Include them in your form view. You can also use bower to maintain the jquery validation plugin. In addition you have to add this piece of JavaScript to enable the frontend validation for your form.

$('form').validate();

Now that we are ready let’s add the validation rules to our model.

app/model/Member.php

class Member extends Eloquent{

  public static $rules = [
      'firstname' => 'required',
      'lastname' => 'required',
      'email' => 'required|email'
  ];
}

As I’ve said we have to validate the input data in backend anyway, so here’s an example of the store function.

app/controllers/MemberController.php

class MemberController extends \BaseController {
	public function store()
	{
		$validator = Validator::make($data = Input::all(), Member::$rules);
	
		if ($validator->fails()) {
			return Redirect::back()->withErrors($validator)->withInput(Input::except('password'));
		}
	
		$member->create($data);
	
		Session::flash('message', 'Successfully created Member!');
		return Redirect::to('members');
	}
]

In your form view you can now set the validation rules from your model.

{{Form::setValidation(Member::$rules);}}

Here’s an example of an compatible form definition for this kind of validation.

{{ Form::open(array('url' => 'members')) }}
  <div class="form-group">
  {{ Form::label('firstname', 'Firstname') }}
  {{ Form::text('firstname', Input::old('firstname'), array('class' => 'form-control')) }}
  </div>
  <div class="form-group">
  {{ Form::label('lastname', 'Lastname') }}
  {{ Form::text('lastname', Input::old('lastname'), array('class' => 'form-control')) }}
  </div>
  <div class="form-group">
  {{ Form::label('email', 'E-Mail') }}
  {{ Form::text('email', Input::old('email'), array('class' => 'form-control')) }}
  </div>
  {{ Form::submit('Save', array('class' => 'btn btn-primary')) }}
{{ Form::close() }}

From now on the input of your form will be validated in the front- and backend with the same rules.

Let’s write a Laravel application - Sortable table

Wed, 04 Feb 2015 14:33:28 +0000

I want to show how you can create a sortable table and reuse the code with any model you want to display. As we don’t want to write any function or definition twice or more, let’s extend the BaseController class with the function to get sorted items from a variable model.

app/controllers/BaseController.php

class BaseController extends Controller {

  protected  $sortby;
  protected  $order;

  protected function getSortedItems($model)
  {
    $this->sortby = Input::get('sortby');
    $this->order = Input::get('order');
    if ($this->sortby && $this->order) {
      return $model::orderBy($this->sortby, $this->order)->get();
    } else {
       return $model::all();
    }
  }
}

You can now call this function in every controller. Here’s an example with a Member controller.

app/controllers/MemberController.php

class MemberController extends \BaseController {

  public function index()
  {
    $items = $this->getSortedItems('Member');
    $sortby = $this->sortby;
    $order = $this->order;
    
    $action = Route::currentRouteAction();
    $columns = Member::$columns;
    
    return View::make('members.index', compact('items', 'sortby', 'order', 'columns', 'action'));
  }
}

The default.index view is supposed to be used by multiple controllers with different models to display. This requirement leads to variable header definitions for our sortable table. That’s why we define the columns we want to display in the model as showed below.

app/models/Member.php

class Member extends Eloquent{

  public static $columns = [
    "ID"=>"id",
    "Firstname"=>"firstname",
    "Lastname"=>"lastname",
    "E-Mail"=>"email"
  ];
}

From now on you can use the next piece of code to create a sortable table in your views.

views/members/index.blade.php

<table class="table">
<tr>
  @foreach(array_keys($columns) as $column)
    <th>
    @if ($sortby == $columns[$column] && $order == 'asc')
    {{link_to_action(
      $action,
      $column, ['sortby' => $columns[$column],'order' => 'desc']
    )}}
    @else
    {{link_to_action(
      $action,
      $column, ['sortby' => $columns[$column],'order' => 'asc']
    )}}
    @endif
    </td>
  @endforeach
</tr>
@foreach($items as $member)
    <tr>
      <td>{{$member->id}}</td>
      <td>{{$member->firstname}}</td>
      <td>{{$member->lastname}}</td>
      <td>{{$member->email}}</td>
    </tr>
@endforeach
</table>

Let’s write a Laravel application – Project template

Fri, 30 Jan 2015 10:28:03 +0000

In web development there are tons of programs and tools and due to that also complex and very different development strategies. Luckily dependency handling got a lot easier. For my Laravel project setup we will use 3 different package managers. Every package manager of course manages a different resource, we will use composer for php packages, npm for everything related to Node.js and Bower for web packages.

By following the instructions of this guide you’ll get a very advanced Laravel project template with the following features:

Live Reloading of your browser.
Twitter Bootstrap included.
Automatic minification and bundling of CSS and JavaScript files.
The most recent web technologies at your hand.
A default blade template ready to run.

Install

1. Bitnami Nginx Webstack

First of all we need a php executable and a MySQL server. The most convienient way to deploy these services is by installing a predefined stack. Actually we don’t need a webserver, however if you’re using phpmyadmin it’s already onboard.

Get Bitnami Nginx Webstack

2. Composer

As I’ve said composer is a php package manager. As Laravel is a composer package we need this tool to deploy the Laravel project. You can get composer here.

Get Composer

3. Node.js

The npm package manager, which will provide us Grunt and Bower is part of Node.js.

Get Node.js

4. Atom.io

As a web developer you might have heard of Sublime, well suck that! Atom.io is out of question way better. It’s opensource, it’s customizable down to the core and runs on the most promising technologies. If you’re using Sublime and reading this, the time has come to flush your workflow and get startet with Atom.io.

Get Atom.io

Configure

We assume you have installed all the tools above properly and ready to run.

1. Install Laravel

First download the Laravel package with composer. It doesn’t matter where you’ll do this. This package will globally available on your host.

composer global require "laravel/installer=~1.1"

Navigate to a directory with your command line where you want to install your first Laravel project.

composer create-project laravel/laravel <project name> --prefer-dist

2. Install Bower and Bootstrap

Navigate into your project directory.

cd <project name>

Create a npm configuration file.

npm init

Then install Bower with npm.

npm install -g bower

Create a Bower configuration file.

bower init

And install Bootstrap and jQuery.

bower install bootstrap jquery --save-dev

3. Install and Configure Grunt

Install the Grunt command line tool with npm.

npm install -g grunt-cli

Then install the Grunt packages.

npm install grunt --save-dev

Now add the additional Grunt packages to your npm config file package.json.

"devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-copy": "~0.7.0",
    "grunt-contrib-cssmin": "~0.11.0",
    "grunt-contrib-uglify": "~0.7.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-bg-shell": "~2.3.1"
}

If you did so run the npm installer.

npm install

Create a Grunt task file Gruntfile.js in the root directory of your project.

And add this content.

module.exports = function(grunt){

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    cssmin: {
      files: {
        src: [
          'public/style.css',
          'bower_components/bootstrap/dist/css/bootstrap.css'
        ],
        dest: 'public/all.min.css'
      }
    },

    uglify: {
      files: {
        src: [
          'public/app.js',
          'bower_components/jquery/dist/jquery.js',
          'bower_components/bootstrap/dist/js/bootstrap.js'
        ],
        dest:  'public/all.min.js'
      }
    },

    bgShell: {
      _defaults: {
        bg: true
      },
      runLaravel: {
        cmd: 'php artisan serve'
      }
    },

    watch:{
      css:{
        files: [
          '/public/style.css'
        ],
        tasks: ['cssmin']
      },
      js: {
        files: [
          '/public/app.js'
        ],
        tasks: ['uglify']
      },
      livereload: {
        options: {
            livereload: true
        },
        files: [
            'app/views/**/*.php',
            'public/*.css',
            'public/*.js'
        ]
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-bg-shell');

  grunt.registerTask('default', ['cssmin','uglify','bgShell:runLaravel','watch']);

};

This file provides the following features:

Bundling and minifcation of your Bootstrap and custom CSS files and Bootstrap, jQuery and custom JavaScript files.
It will start Laravel webserver.
Provide the Live Reload feature.

As always you can extend the Grund configuration according to your requirements. Some my want to recompile the Bootstrap less files with an updated fonts folder or add php unitiy testing.

4. Configure Laravel

In order to make use of the Live Reload feature, you can either add this JavaScript to your template.

<script src="//localhost:35729/livereload.js"></script>

Or (what I recommend) download and install following blade template files.

Download template files or get the latest version here.

Add these files to a new folder called default in the app views folder <project name>\app\views\default

Then delete the file <project name\app\views\home.php and add a new file <project name>\app\views\home.blade.php with the following content.

@extends('default.master')
@section('content')
Content goes here
@stop

This template assumes that you distinct between a local and a productive environment. You have to update two configuration files before you’ll run your project.

In the file <project name>\boostrap\start.php add your hostname to the detect environment array.

$env = $app->detectEnvironment(array(
	'local' => array('<yourhostname>','<anotherhostname>'),
));

If you want to connect to a MySQL database you also of to update the local environment database config file <project name>\app\config\local\database.php.

5. Run the Application

Now we are ready to run the whole project. You can start the development server by typing Grunt into your command line. Navigate to http://localhost:8000 and you should see a simple Boostrap site.

Let’s write a Laravel application - Introduction

Wed, 28 Jan 2015 18:36:10 +0000

I’m going to develop a Laravel application with my friends. The application is called RowBook. It will be a simple tool to log all the trips of the row club Lucerne.

As I’ve never used Laravel or another php framework before, I will share my first time experience here on my blog. Whenever I have to learn about a new technology I’m looking for some basic books and videos. For Laravel I’ve found the perfect beginners eBook, where you’ll learn the most fundamental basics.

Download - Getting Started with Laravel 4

And I also recommend to watch the YouTube videos from phpacademy. They’ll tell you how you can build a simple blog engine from scratch.

Watch - Simple Laravel Blog

In the next post I’ll show you how I’ve setup my first Laravel project. Despite it’s the first time I’m using Laravel you can expect a pretty good project template ;)

Thank you internet for: Peek by UserTesting

Thu, 15 May 2014 12:44:00 +0000

Peek is a free service offered by User Testing where you can get real people to test your websites usability.

I have to admit, first I didn’t really believe that there will be real person visiting my site and give my a feedback. But within in one hour I have been suprised.

Here’s the video done by a random guy from the internet:

Your browser does not support the video tag.

Thank you UserTesting for this awesome service!

Disable WordPress plugins manually

Tue, 29 Apr 2014 08:05:06 +0000

With the WordPress 3.9 Update I also received several plugin updates for my blogs.

One Update was for WP-Piwik. As I’ve updated the plugin I got several errors and the site become unreachable.

So the only way the to disable this malicious plugin was either via ftp or with phpMyAdmin.

I’ve decided to do it with phpMyAdmin.

The settings for the plugin activation are stored in the wp_options table.

To get the data for the activated plugins run this sql statement:

SELECT * FROM wp_options WHERE option_name = 'active_plugins';

By editing the option_value field you’ll get a semicolon separated list of plugins and by simply removing a value you’ll deactivate the plugin.

For WP-Piwik it was:

i:8;s:21:"wp-piwik/wp-piwik.php";

Project Naptha - OCR well done

Thu, 24 Apr 2014 07:59:02 +0000

On the Project Naptha homepage you can download a Google chrome extension that extends your browsers text copy function.

With the said extension you can copy text within images. Naptha recognises text inside images in real-time.

This is truly amazing, isn’t it? They went even further! You can erase text from images and translate text in images to different languages.

Update Hostfile with Chrome/Firefox Plugin

Mon, 10 Mar 2014 10:56:12 +0000

Domain-ip mapping is essential in developing new websites as you have to test URLs without changing DNS entries.

Yet I’ve always update the local host file which requires in most cases a restart of the browser. This is a busy an troublesome issue.

Luckily there’s for everything a plugin, tool or script, this also goes for host file updates via Chrome/Firefox plugin.

The HostAdmin plugin enables you to update the local host file in you browser in real time without the need to restart the browser. This plugins saves a lot of time when switching domain-ip mappings for different environments.

Here’s a screenshot of the Chrome extension which shows how easy it is to switch on/off an domain-ip mapping.

Disable Trackbacks and Pingbacks in WordPress

Thu, 27 Feb 2014 08:24:50 +0000

Trackbacks and Pingbacks can be abused for spam and even DDOS attacks.

Settings>Discussion>Allow link notifications from other blogs (pingbacks and trackbacks)

This will disable trackbacks and pingbacks for all future posts, but not for existing posts.

Unfortunately I couldn’t find a way to do this in bulk, or via the “Quick Edit” screen, so you’ll have to go through each page and manually uncheck the option under the “Discussion” tab.

Or if you’re able to access the MySQL server with phpMyAdmin or a MySQL CLI you can run this SQL statement.

-- Globally disable pingbacks/trackbacks for all users
UPDATE wp_posts SET ping_status = 'closed'

Don’t be confused by the column name wp_posts it also contains pages.

After completing these 3 steps, you should have no more trackbacks or pingbacks on your WordPress site.

Update Url within WordPress Post Content

Mon, 10 Feb 2014 13:06:55 +0000

Recently I’ve change the url for one of my GitHub projects.

As you might know, I’ve used this url in several posts. In order to make this obsolete links I have to replace them in every posts.

This easy done with the following SQL query:


UPDATE wp_posts SET post_content = REPLACE (post_content, 'https://www.oldsiteurl.com', 'https://www.newsiteurl.com')

To run this SQL script you have to able to access the WordPress MySQL database.

To get you further into the possibilities of manipulating the WordPress database content with queries, I’ve collected the most useful queries in a gist: https://gist.github.com/8914414