Gaya Kessler's Blog

Cleaner Code

Tue, 30 Jun 2020 00:00:00 +0000

One of the things I take pride in is writing simple, easy to follow, and clean code. My peers and clients appreciate the fact that I can write code in a way that the next person is able to understand what I am trying to convey.

This makes my work a lot more usable and makes it easier for future programmers to be onboarded into the product I worked on.

I want to share with you some principles I keep in the back of my mind when writing code.

Following are the key concepts that make my work better to understand and follow. This greatly improves the way I can teach people how to code or how they could think about writing code.

Write as if The Next Person Reading Has Zero Context of The Problem You’re Solving

Have you ever been asked to review a pull request and immediately saw a large portion of code that made your head hurt? This is an early warning the code is going to be hard to understand.

The author might understand it perfectly, and you yourself might have written code like this before too: a large complex block of code that is using all kinds of cool tricks to create a desired outcome. While this can be smart, it might be very hard to understand for the next person.

A simple trick I like to use is to write code so that the next person reading it will be able to follow it without context. This means I stay away from code that has the reader jump up and down in the code to be able to follow what’s going on.

Write in short blocks of code, use clear naming, break it in smaller digestible bits, and give all your functions names. Good names.

Code has to read like a story. When it reads like a story, when it has simple instructions, it is easier for the next person to go through.

So the next time you finish a piece of code, go back and think: “Would someone without any context understand this?”

Naming of Things

One of the hardest things in software engineering is naming things. Naming variables, functions, files, classes, folders, and the project itself.

It’s really important to pick correct naming. Especially for the next person who’s going to read your code. It helps to take the time to think about a good name, but do not overthink it. A function name or variable name taking up half the screen does not help either.

For variables, give it a name that reflects something in the real world, or simply put: tell what it is.

Instead of items.forEach((item) => item.drive()) try to use naming like cars.forEach((car) => car.drive()).

In that same regard, always try to avoid abbreviations and shortened names. Name things by their name, instead of using a single letter or a few letters.

Consider the following:

const list = getPersons();

list.forEach((i) => {
    doStuff(i.name);

    if (someCondition) {
        i.hire();
    }
})

Is hard to follow because you’d need to know what is in list to understand what i is. Only after you’ve seen getPersons() does the reader know there are persons in list.

The reader might not start reading code from the top!

You can make this easier to read when you formulate it like so:

const persons = getPersons();

persons.forEach((person) => {
    doStuff(person.name);

    if (someCondition) {
        person.hire();
    }
})

From looking at the variable name person I know I am looking at a list of persons. This creates a much smaller mental model to work with.

As for classes and functions. Try to keep the naming short and to the point. If the function is doing too many things to give it a short name, break the function up in smaller, easier to follow, parts.

Return Values Early

One simple trick to make your code much easier to follow is to return early. You can write every bit of code you want without using else by returning early.

When sorting objects in a list by age, you can use a compare function which can return 3 different outcomes: 1, -1, or 0.

function sortByAge(firstPerson, secondPerson) {
  if (firstPerson.age > secondPerson.age) {
    return 1;
  } else if (secondPerson.age > firstPerson.age) {
    return -1;
  } else {
    return 0;
  }
}

You can also read this code if you read all the if statements to understand the code fully. In order to make this code more readable you can return early. Make the function stop without having to create if else statements.

function sortByAge(firstPerson, secondPerson) {
  if (firstPerson.age > secondPerson.age) {
    return 1;
  }

  if (secondPerson.age > firstPerson.age) {
    return -1;
  }

  return 0;
}

This is but a simple example, but as your code and functions get more complex, this will greatly improve the readability of your code. It takes a while to get used to writing like so, but it will pay off.

Another thing you can avoid is creating temporary variables which get assigned and changed later on in your code. The reader has to track all the possible changes which can be made throughout the code.

let name;

if (user.loggedIn) {
  name = user.name;
} else {
  name = 'No name';
}

// VS

function getName(person) { 
  if (person.loggedIn) {
    return person.name;
  }

  return 'No name';
}

const name = getName(user);

It’s not the greatest example, but avoiding using mutable variables will make following your narrative a lot easier, especially in larger function bodies. If you have to keep track of changes to variables in conditions, loops, and loops within loops, it will become hard to follow fast.

On that note… let’s move on to working with pure functions.

Pure and Simplicity

When creating functions, have it do one thing, and one thing good. Using pure functions will help you in making your code much easier to understand and reuse.

It’s easier to reason about a function that does one thing instead of a function that manipulates data, does some calculations, and return something completely different.

A pure function always returns the same result based on what is given to it, and has no side effects. A side effect is when a function touches another part of your application and causes a mutation outside of the function.

Pure functions are fundamentally mathematical. You provide them with input, and they’ll return a result, without touching the input itself. That’s very important.

For instance, rather than looping over a list to fill a new one, you can use Array.map to create a new one. Rather than changing a property inside of an object, let a function take the original as input and return a copy with the property changed.

Immutability has a lot of advantages, and one of them is making the code easier to understand and follow. You’ll know for a fact that the input to functions will not be touched or changed in a way that’s not expected.

Writing in pure functions need some getting used to, but once you start using them you’ll never want to go back.

I know it’s a bit ironic I didn’t use 100% pure examples in this article, but I was trying to illustrate situations.

Keep it Short and Simple

I’ll close this article with one of the hardest things in programming. Keep your code short and simple. More often than not are we prone to write complex and large chunks of code.

By keeping your code in short and concise chunks you can digest it a lot easier. Even when going back to your own code later you’ll thank yourself for writing it in such a way.

So what if you can’t make your code readable? Write the code that will reach the goal you want to reach the way you would, be it not so readable. It is time to rethink what you just wrote. What is really happening in the code? Can I simplify?

Write once, then write the code again.

You’ll see that this time what you wrote it a lot easier to understand and follow. This trains your brain to think about future problems the same way and avoids making the same mistakes later. Making your code cleaner.

The best way to solve a complex problem is more often than not a clean and simple solution.

Better Understanding of JavaScript Through Debugging

Mon, 25 May 2020 00:00:00 +0000

The moment when I increased my understanding of JavaScript the most was when I started to use the debugging tools in my browser more efficiently.

When teaching JavaScript, I am surprised at how little developers seem to know about debugging or how to debug their code in a way that makes sense.

This guide will provide some of the tricks I use to quickly find out what is wrong with my code, or how to find out what is actually happening in your code.

Benefits of Debugging

When I started to write code, I’d check out what I could see in the browser, spot an error, change the code, hope for a better outcome, reload the page, check the browser again. Rinse and repeat.

While this strategy might work, I quickly found out that there are situations which are a bit harder to solve just using this method.

I wanted to know what value is stored in variables at a certain point in my code. Application code took a while to transpile, making the refresh of the page a long wait. Getting to some points in your application might also take a few actions, which can take up quite some of your development and debugging time.

If you get to know the debugging tools available in your browser, you can make your workflow a lot more efficient.

Getting to Know the Debugger

Most browsers ship with developer tools. In Firefox you can open the debugger by going to Tools > Web Developer > Debugger or by pressing ⌥⌘Z on MacOS.

What will show up in the debugger, the tool we can use to inspect parts of our code. By pressing esc you can show or hide the console input at the bottom.

Here we can enter JavaScript expressions directly (see below image) which are executed in the context of where you currently “are” in the code. So if you just have your web page opened and are not stopped at a breakpoint (I’ll get back to that later), it will just be another line of JavaScript executing.

Now that you have your developer tools open, we can use all kinds of tricks to dive into our code some more.

The Humble console.log

Putting console.log() in your code allows you to output values at any time in your developer tool’s console.

for (let i = 1; i <= 10; i += 1) {
  console.log(i);
}

You’ll see the following in your developer tool’s console.

This most likely is the most wide-used tool to debug code, but a rather overused one if you ask me. You’ll have to change the code and refresh the page when you want to log something else or want to inspect a different value.

console.log and it’s neighbour methods are great when you have a lot to output, and you can’t pause the execution of the code. It’s great for logging values that are based on events.

The console has a bunch of methods you can make use of. I’ll highlight time and timeEnd later on. Good ones to learn about are: console.dir and console.table, they display the provided data in a certain way that it might match your content better.

Clean up After Yourself

Avoid leaving in console methods in your code. They will be visible to everyone using the developer tools (so including the end user).

Browsers which don’t have console methods will also crash your code when you try to use them because console does not exist there. This used to be quite a common error in Internet Explorer.

A much better way to figure out values of variables is to use breakpoints.

Figuring out Your Scope Using the Debugger Statement

One of the things I teach the most to developers, also experienced ones, is the debugger; statement.

What it does is create a breakpoint in your code and makes the browser pause execution of the code when it comes across this line. You can also put breakpoints directly on lines using the browser’s debugger, but I find this method often to be quicker.

Say we have the following piece of code:

function callback(event) {
  // I would like to inspect what is in `event` here
  debugger;
}

document.getElementById('input')
  .addEventListener('change', callback);

This will make the debugger pause the code execution when the input with id “input” on the page will fire a change event. Now we are able to safely inspect what contents of event are.

By hovering over the variable you want to know at this point in time of your code the developer tools will show you the value in a nice little popup.

You can also type the variable name in the console, and it will output it if you execute it. Just putting the variable name will return the contents to the console which it will show.

You can continue execution by pressing the “play” or “continue” button on the top right.

Just like console methods, remove debugger statements from your code to prevent the end user’s browser from creating breakpoints.

Placing Breakpoints Directly in the Debugger

A safer way to create breakpoints, and not risk leaving debugger statements inside of your code is to put breakpoints directly in your code through the browser’s debugger.

Open your browsers developer tools and go to the debugger.

You might already have the JavaScript file you want to create a breakpoint in opened, if not: press ⌘P to look for the file by name. Your browser will look through loaded JavaScript files on the web page.

This even works when you have transpiled modern JavaScript through a tool like Webpack. The only thing you need to make sure is that you’re using sourcemaps.

To create a breakpoint, click on the line number next to the line you want your code to break.

Next time the browser comes across this line it will stop on this line of code and will pause execution.

If you open the secondary menu by right-clicking on the line number you’ll see that you can also make the breakpoint conditional and that you can add log points. This makes console.log even unnecessary as you can do it right there!

Measuring Performance

Most modern developer tools allow you to use console.time and console.timeEnd. This is a quick and easy way to measure the performance of pieces of code.

Find a part of the code you want to measure. Add console.time('calculation') the line above. 'calculation' is the label of our measurement. After the piece of code you want to measure, place console.timeEnd('calculation') with the same label.

In the console you’ll now see how long it took to go from time to timeEnd. Great for measuring how long function calls take or renders of your components.

console.time('calculation');

// some super complex code here

console.timeEnd('calculation');

How to Narrow Down Problems

I want to end with a technique I use to narrow down problematic parts of an application or when I want to figure out which part of the application is slowing everything down.

First I like to start with commenting out stuff that might be breaking by reading the error messages in the console or on the page. Especially in React it’s pretty clear which components make the application throw errors.

Piece by piece, enable lines of code again, and you’ll soon find that where the problem lies.

I do the same for performance improvements. I start by measuring the speed of a large chunk and then narrow it down to specific parts in the code. You’ll find that a lot of the times the slowness is in one particular part of the application.

Being able to pin point problematic areas like so makes it easier in the future to understand where problems come from and by using the debugging techniques in this article makes you understand the “why” more rather than the “how”.

Wrapping Up

These few tips will help you debug your code more easily from now on. There is a lot more you can do with your browser’s debugger, and it’s worth reading up about it more in-depth once you get used to the basics.

Feel free to reach out with questions or suggestions for techniques you think need to be included in this article.

Extending Create React App's ESLint config

Mon, 04 May 2020 00:00:00 +0000

Using Create React App you can easily start using React and develop your own web applications. It also includes a linter which helps you write consistent and quality code.

However, I really like to use a different style guide a top of the default. Luckily for us, Create React App enables us to extend ESLint to use other configuration presets.

This article goes into how to set up the Airbnb style guide in Create React App. It also includes a guide for when you’re using TypeScript.

Version disclaimer

At the time of writing, Create React App (react-scripts) is at 3.4.0, which is where this guide was written for. In the mean time things can have changed, so take that in mind.

No Config, No Problem.

I love the idea and project that is Create React App. No hastle, no config or setup, just start coding with the latest and greatest tools in React development.

It takes care of all config, but that also means it takes a bit away from customising the workflow to your liking. I do not mind this sacrifice since it takes a lot of trouble out of your hands.

However, Create React App enables us to extend their ESLint configuration. Which is exactly what I want to add Airbnb’s style guide rules to the project.

Adding Airbnb style guide to Create React App

For these steps I assume you’ve already created a Create React App project. If you haven’t, please read the getting started guide.

First thing we want to do is create an .env file in your project (if haven’t already.)

Enable extending in `.env`

In this .env file you’ll need to put the following line:

EXTEND_ESLINT=true

This tells Create React App you’re extending the ESLint config it provides. Without this, the next steps will have no effect.

The official documentation has a great article on how to and why you’d want to add environment variables to your project.

Install Airbnb style guide

Next we’re going to install the Airbnb style guide into our project. We can do this by running the following command:

npm install eslint-config-airbnb -D

There is no need to install peer-dependencies because they are already included in Create React App.

Add Airbnb to the ESLint config

In the root of your project open the package.json file. In it you’ll find a property called eslintConfig.

All you need to do here is add "airbnb" to the extends option.

{
  "dependencies": { ... },
  "scripts": { ... },
  "eslintConfig": {
      "extends": ["react-app", "airbnb"]
  },
  "browserslist": { ... }
}

And that’s it! Your project is now checked against the Airbnb JavaScript style guide.

First thing you might notice is that it will not want you to put JSX inside .js files, but rather in .jsx files.

If you do not use TypeScript, you’re done now.

Adding Airbnb style guide to a TypeScript project

If you’re using TypeScript with Create React App you’ll have to do a few extra steps.

Do all of the steps as described above to install the Airbnb style guide into your project.

Install TypeScript import resolver

The airbnb style guide will enforce that your imports resolve, and ESLint can’t automatically figure imports of TypeScript source.

Run the following command:

npm install eslint-import-resolver-typescript -D

Setting up the ESLint config

Open up your package.json and navigate to the eslintConfig property again. The following is a base config to make Airbnb work for TypeScript files:

{
 "eslintConfig": {
    "extends": [
      "react-app",
      "airbnb",
      "plugin:@typescript-eslint/eslint-recommended",
      "plugin:@typescript-eslint/recommended"
    ],
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "react/jsx-filename-extension": [
            1,
            { "extensions": [".tsx"] }
          ],
          "import/extensions": [
            "error",
            "ignorePackages",
            {
              "ts": "never",
              "tsx": "never"
            }
          ]
        }
      }
    ],
    "settings": {
      "import/parsers": {
        "@typescript-eslint/parser": [".ts", ".tsx"]
      },
      "import/resolver": {
        "typescript": {
          "alwaysTryTypes": true
        }
      }
    }
  }
}

It’s a bit more scary for TypeScript, but this enables everything for the Airbnb style guide to work properly with TypeScript.

Bonus: lint from command line

If you’re using TypeScript it is now possible to lint your code from the command line too! Execute the following command and it will lint all your TypeScript files:

./node_modules/.bin/eslint . --ext .ts,.tsx

Tip: add this as a script in your package.json so your can run it more easily next time.

{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx"  
  }
}

Wrapping up

I hope this guide helped you in adding your favourite style guide to your Create React App project.

It’s really cool to see that the project enables you to extend the ESLint config without having to eject the project, which you should avoid doing at all times.

Cleaning and Recycling Old Projects (or How I Simplified my Build)

Tue, 18 Feb 2020 00:00:00 +0000

Sometimes projects run for so long they get dusty. Not maintaining them will leave them to wither and slowly fade away. Even worse is when parts of your projects are too outdated to work and too scary to touch.

I was writing for my blog occasionally, but the system it was built on was terribly outdated and didn’t work properly anymore. I haven’t had the courage or time to actually fix the underlying system. It was time to change this.

In this article I want to take you through my process of dusting off and cleaning up an old project to breathe new life into it all without starting over completely from scratch.

The Reason for Cleaning up

Every time I wanted to write something on this blog, I had to make sure the conditions were perfect. The project ran on node.js version 0.10.35 and didn’t install locally a lot of the times because of old packages which were out of date too.

I was still able to deploy new content, but getting it all to work was a drag and made me dread writing new stuff. Such a shame, since I really like sharing knowledge.

A solution was to write something new or learn from my previous mistakes and clean up. I choose the latter as creating something completely new from scratch could potentially introduce the same problems I have right now.

The Goal

What I wanted to achieve is a much simpler build pipeline whilst not changing too much about the source material I had to work with.

I also wanted to clean the project of old and out-of-date dependencies and upgrade the required node.js version to a recent one.

The static site generator I am using, wintersmith, still serves its purpose perfectly, and I am not looking to replace it. This part will stay as is.

Too Complicated to Replace

Have you ever had that feeling in a project where you looked at a piece of code or pipeline and thought: “Well… I am not touching that.”

This is even more painful when that part of a project was introduced by yourself. But now imagine how complicated and confusing this must be for another person looking at it.

My blog had a pretty intricate way of building all its assets. All HTML content was statically generated, and that was perfectly fine to be honest. However, a large portion of the other assets were generated using various gulp tasks. Remember that? These were all painfully outdated and were not working anymore.

I needed to change this, because it’s better to write code that is easy to delete, rather than easy to extend.

Moving to NPM scripts instead on Gulp (or Grunt)

These days we have great web app bundlers like webpack which take a lot of manual pipeline building we used to do out of our hands. Every dependency is managed in our JavaScript bundles through importing. But that wasn’t the case before.

There used to be a great interest in task running tools like grunt and gulp. These tools were not a bad idea, and allowed us to streamline our development processes.

What happened is that we lost sight of what we were really doing. Most of the stuff we were writing for these task runners could easily be just a short CLI command.

And this is exactly how I plan to solve the generating of my assets. Your old projects could possibly benefit from this too. Simplifying these step and moving them to a more streamlined bundling strategy will prevent over complicating your build pipeline.

But what about watchers?

Yes, sure. Watchers are a nice to have, and grunt and gulp were mostly used for that, but can be replaced if you want.

Tools like webpack can be integrated with webpack-dev-server which allow to generate assets on change. You can also use file watchers in IDEs or in CLI to allow for a more streamlined development process.

For my blog this was not needed as the HTML, CSS, and the JS part of the project had already been written.

The static generator I use already has a watcher functionality build into their cli tool, so I can use that for writing.

Simplify JavaScript Bundles

First thing to fix was my JavaScript. I was inspecting what I was using and came to the conclusion that I could throw away everything except one small part which is handling how my header menu is rendered.

Previously it was bundling a couple of files using browserify and gulp. Then on release it was also minified using Uglify. This resulted in a bundle at a whooping 46kb. Just for some minor tweaks and polyfills which were not even that necessary.

The web is becoming more and more bloated, and I want to reduce the impact the best I can. So adding all this fluff didn’t make any sense. Especially since I was already putting a lot of effort in delivering content statically.

If you run a website, blog, or something alike. Have a good look at what you’re serving your visitors. Do you really need all these scripts you include on every page? I bet you there is a lot you can save by not adding useless stuff.

In the end I figured I could add a CLI command to Uglify the source file and place it in an output folder. The bundle is now 680bytes.

Oh my Sass

The Sass part of the project was something I dreaded doing, but in the end it was one of the easiest parts to do. I copied the settings and options I used in gulp and reused most of it.

To my surprise, even after updating all the sass dependencies, it worked just as expected.

Handling image assets

There were two parts to handling images. Copy static assets from the source folder to my /public folder and afterwards optimise all the images in the /public folder.

Because wintersmith automatically copies over post assets, these were all already in the correct folders. I added a simple cp -r ./src/images ./public to my NPM scripts to copy my other images to /public/images.

The most complicated part of this redo is how I optimise images. I am using imagemin and sadly it doesn’t allow to scan for files and replace those with the optimised version in the same folder structures.

So I wrote a script in node.js which looks for all images in /public, optimises them one by one and saves them in the same place.

The Result

In just a few hours I removed a lot of unneeded dependencies and am able to run my blog locally again. I didn’t replace every part, and I didn’t opt-in to use the latest shiny technology stacks. What I did do was get rid of a lot of complicated steps in building my blog.

I have a project right now that I know is easier to maintain since I chopped up the build pipeline is smaller easy to replace steps.

You can see all the steps needed in the package.json file of my blog’s repository. All the step required can be executed by running npm run build.

Now The project feels a lot cleaner and nicer to work with. You do not have to throw away all previous effort to refresh and clean up your projects.

Leveraging Hooks to Fetch Data Async in React

Tue, 25 Jun 2019 00:00:00 +0000

Most of the React mindset is thinking synchronous and has a lot of similarities with functional programming. Output is generated based on input and is calculated at each render. This means that handling information which is not available at the moment of rendering a bit harder.

This article aims to give a solution to this problem using React Hooks.

We’re used to using lifecycle methods to fetch data on component mount or when props change, and it’s always something you have to implement outside of your render function. We don’t want render functions causing side-effects.

Luckily for us, React Hooks came out not too long ago which allows us to have side-effects and local state for functional (pure) components.

Managing Data

In an ideal situation, we’d request data at render of a component, and re-render the component when the data has resolved. Without state, we could only rely on the parent components to pass the correct data to functional components.

The container / presentation component principle works for this situation, but made for kind of complex container components in the end. Data is fetched on mount, a loading state is managed, and when the data is received it had to be updated. It even gets more complex when working with a state management solution like Redux.

Wouldn’t it be cool if we could request the data in the render function itself?

Async Data Fetching is a Side-effect

A possible solution to handling async data is to threat resolving data as a side-effect. In the render function, we request the data using a hook. This hook will return the found data, if the data is still loading, and if there was an error fetching.

It’s a lot easier to reason about this information then having a lot of state triggering all over your app. The hook itself will handle the fetching, data resolving and error catching.

I tried to make the idea more clean using a flow diagram of how everything would play out using hooks:

First the component will request the data from the hook. It will return nothing, as it has nothing, but also tells the component it is loading.

The hook will fire a side-effect and remembers it is busy. When the data is resolved it will update its state internally with the data it resolved. It will also update itself to a non-loading state. Updating the local state of the hook will tell React to re-render the component using the hook.

The component renders and requests the data again, but this time the data will resolve immediately, resulting in rendering of the data.

Advantages of Lifecycle Hooks

You might ask yourself what the point is if we can do the same with state in the component and lifecycle hooks. The big difference here is that we can treat data fetching as a side-effect to data changing in the component.

If you want to fetch a profile based on the props, the profile data will be re-fetched once that information changes, automatically, without using lifecycle hooks. This is because useEffect is intelligent enough to trigger only when its dependency array changes.

Another great feature of hooks is that you can use it in any functional component without duplicating functionality across different component classes.

Hiding the handling of async data fetching in a hook makes the app a lot easier to reason about and prevents a lot of boilerplate code. A lot of Redux based applications suffer from this, which is not a problem of Redux, but the approach we take fetching data there.

A Simple Example

For the purpose of illustration I made a simple example app of how this hook can be implemented in your own applications.

Full code to this example can be found at https://github.com/Gaya/fetch-with-react-hooks/tree/master/src

The app has a component which displays profile information. It will request the data using a Promise. The profile will be loaded each time the requested profile id changes.

Writing the Data Fetching Mechanism

First, let’s write the profile fetching mechanism inside our functional component:

const id = 1;
const resolver = React.useCallback(() => fetchProfile(id), [id]);

We use useCallback to prevent React from creating a new function each time the component renders.

fetchProfile is a function which returns a Promise and resolves the requested profile information. Read the implementation on GitHub.

Preparing the Hook

We want to create a hook which will except the resolver from before and use it to return the data to use when it’s ready. It’s also good to have a loading state and error state would anything go wrong. The basis of the hook could look like the following.

import { useState } from 'react';

function usePromise(resolver) {
  const [isPending, setPending] = useState(false);
  const [error, setError] = useState(undefined);
  const [resolvedValue, setValue] = useState(undefined);

  return [resolvedValue, isPending, error];
}

I am not using useReducer to keep the example as simple as possible. In this case it might be better to use useReducer, but for now let’s stick with useState.

This hook will be called in our logic component after the resolver we created earlier:

const [profile, isPending, error] = usePromise(resolver);

If there is an error, we can render an error component. If the Promise is still pending, we can render a loader. If all is good, we can render the profile data. It’s as simple as that!

Writing the Resolve Mechanism

Now we want to resolve the Promise provided to the hook as a side-effect of the hook being called.

We’re going to introduce useEffect for this to actually resolve and handle the Promise.

Here you’ll see why the useCallback from earlier is important. We’re going to use the callback function to trigger the side-effect.

import { useState, useEffect } from 'react';

function usePromise(resolver) {
  // ... code from previous snippet

  useEffect(
    () => {
      // reset hook state values
      setPending(true);
      setError(undefined);

      // resolve the Promise
      resolver()
        .then((value) => {
          setValue(value);
        })
        .catch(e => {
          setError(e);
        })
        .then(() => {
          setPending(false);
        });
    },
    // if resolver changes, resolve again
    [resolver],
  );

  return [resolvedValue, isPending, error];
}

Each time the resolver changes, the side-effect will be triggered. If you didn’t use useCallback to wrap the resolver, it would trigger each render.

On each trigger of the side-effect we’ll reset the state values of the hook and set the pending state to true.

Next we try to resolve the Promise. If it succeeds it will update the value stored in the hook state. If it fails, it will set the error returned to the hook state. In the end, whether it failed or succeeded, we’ll tell the hook it’s no longer pending.

This will instruct React to re-render the component using the hook because the state inside the hook changed.

When the component calls the hook this next time, it will get the resolved data back.

Further Thoughts

The reason I came up with this strategy for fetching and handling async data was because I was finding different ways to handle Redux fetching and side effects.

I bet this way of fetching data async has been described before in a similar form, but I wanted to get it out here to share my thoughts on it.

The way I use it with Redux, or any context based approach is that the data to be fetched can also be cached. I wanted to have a selector which would result in: the data I selected, a loading state, or an error.

Redux in turn would fire the fetching of data as a side-effect when the data resulted from the selector proved non-existent. The resulting request would then fail or succeed.

Dispatching data received / fetch failed would happen as a side-effect just like my example before.

We can prevent the making complex constructions like this and make our apps easier to read and understand.

In Closing

I keep falling in love with React Hooks more and more. The way we can approach problems is so much more clear and easy to follow right now. It’s almost a crime how complicated we were making things before. Luckily we can reason about what we make a lot easier using hooks.

I hope you liked reading about this and started thinking about other great stuff you could solve using hooks and side-effects. Feel free to reach out if you have any questions regarding my solution.

The Value of Not Working

Wed, 06 Mar 2019 00:00:00 +0000

Since going freelance I learned about the value of not working at all, and how it affects me and my work when I actually do work for clients.

These are my insights in how I feel like I struck a good balance between working for clients and working on my own projects (or not working at all).

This article is not strictly meant for freelancers, but also people working on a payroll.

Short Attention Span

I’ve worked at quite a few companies, some better than others, but never have I worked at a single company for too long. I have never hit the five year mark anywhere I have worked.

A lot of times I felt stuck in the work I was doing, and could not get out of it. Of course there were times I could have talked about it more, but at the time I did not really know why I felt like I did.

I get bored way too easily when I solve the same problem repeatedly. Even if this problem is something other people were not so good at solving. I could not find joy in doing these tasks at a certain point.

This resulted in me searching for new challenges outside of what I was doing at the time. Meaning I switched jobs quite a few times.

How I Tried to Keep Myself Motivated

A possible solution to my problem was to work a lot more on my side-projects in my free time, which I started doing a lot more over the years. This rekindled the excitement for the work I was doing for a while.

This also made it quite clear that I love working on my own projects more than working on actual work I did at the office day in day out.

I asked to work a day less, and my employer at the time thought it was a great idea. The money which I earned was still enough to support my lifestyle, so I could afford to do this. Yes, I earned less money than I did before, but all that did not matter to me, because I valued my free time over time I spent at the office.

Picking Myself Over Job Security

After about two years of working less and working more on my own projects I felt like I still wanted to spend more time working on my own side-projects.

That’s when I decided it was time for me to get a more risky about my approach to work. Take on jobs as a freelancer and allow my side-projects to fill in the rest of the time I have left during the week.

Essentially giving up on the security a job at a company gave me, and making sure I could manage to get clients to hire me to support my life.

Say “No” More Often

I cannot stress this enough. Part of knowing what is good for you, is knowing when to say “no”.

When working at companies I’ve always felt like “no” was not an option most of the time. Saying “no” means refusing to work, and thus going against the contract you signed when you started working for them.

I know this is not entirely true as you can most likely talk about certain situations, but a lot of times saying “no” is actually not an option. A lot of decisions about where the company is heading are out of your hands.

It is important to share what you think with the company you’re working for. Being able to discuss the work you’re doing and steering it in an enjoyable direction is really important. Being able to say “no” to questions makes your wishes more clear, and people know what to expect from you.

The same goes for when you are a freelancer. For me right now, I could say “yes” to every job offer and can take on as much work as I possibly can, but I choose not to. Saying “no” has given me the room to know what is good for me, and what is not.

I’d rather be honest about not wanting to do something and telling them someone else can probably do it better and cheaper, than to take on a job I did not want to do in the first place.

Do Work Which Works in Your Favour

Saying “no” more often also leads to being able to pick work which you feel more comfortable with. I have found that I’d rather not take on any new clients for months than to take on work which I know will not improve me in some way.

If the job allows me to explore some new territories and if I can learn something on the job I am always more likely to find enjoyment in it. An ideal job at a company would look like this for me, but that is really hard to come by.

However, going freelance has allowed me to do this. I know I am in a lucky position as the things I do are quite niche and there is a lot of market for it, but to not take advantage of this situation would be foolish.

Side Projects Are an Investment

I grade the work I do on side-projects just as important as the work I do for clients. Sure, the work I do for clients brings in money on the short term, the time invested in side-projects will pay off in the long run.

Every minute I spend working on side-projects is a learning experience for me. I get to test out new unexplored technologies, I get to try some solutions to problems, I will take the time to actually learn something new.

What I learn from the failures and successes of these projects I will bring into the work I do for clients. This results in better work for my clients, which in turn will lead to better job offers.

I view working on side-projects as work too. Some might say you’re “not working”, but it is just as important as regular work to me, maybe even more important.

Strike a Good Work / Life Balance

It’s hard to invest a lot of time in side-projects when you have a full-time job. That’s the reason why I quit my job before. It’s possible to do both, sure, but in my case I had too little time to do all which I wanted to do.

Some people value free time away from the desk more than others, but it’s important to make sure you do not overwork yourself. Too much work leads to bad performance.

I can determine my own pace when I am working on side-projects which gives me a lot of room to not work at all. Taking time off from the desk job and doing something different. Something which can be hard when working with strict times.

Determining my own pace resulted in much better concentration and shorter bursts of inspiration for me. These little bursts of output and inspiration are super valuable to me now. Something which would previously cost me a day to do can sometimes be done in an hour, but at the same time the next day I might not be feeling it at all and get nowhere.

Being able to be more flexible about my schedule was allowed me to work more efficiently, but that might not be the case for others. I’ve seen it backfire for some.

That’s why I try to stop thinking in time and rather think in the value of the work that needs to be done. No matter how you get there and how long it takes, the value of the outcome is always the same to the client.

Value does not equal the time you put into it. Just make sure you provide the value you promise. If that means you need to take more time off, do it, live a little.

The Value of Not Working

Side-projects have helped me see what’s important in my work life. It’s not about working all the time, but finding the right things to do.

Short term money does not the weigh up to the long term benefits of working on myself. In a way you could say that not working is also working.

Not working helps me reflect and improve. Helps me do the things I love in my field of work. It shows me not to worry as much.

I am sure my opinion and approach will change over time, and that is what makes life and work exciting. There is always room for improvement and self-reflection.

What I hope is that we can all find a great balance in the work we do. Everyone works in a different way.

Presenting Thyme Premium

Tue, 18 Dec 2018 00:00:00 +0000

At the start of this year I started working on a little project called Thyme to make tracking my time easier.

Like a lot of services and apps, the idea came from having to manage data through Excel sheets, which did not really hold up in the long run.

Almost a year of improving the platform here and there in my spare time I am launching my fun project as a paid service!

Check out Thyme Premium

Why Thyme?

Thyme is a privacy centric time tracker which is 100% private from the start. You don’t share your data with 3th parties (and even Thyme itself!) by default, which in these days is a great thing to have.

Data is stored in the browser’s local storage, and can be exported at any time.

Thyme is focused on being as simple as possible without too many bells and whistles which distract you from what you want to do with a time tracker: just keep track of the time I spent doing stuff!

Why not a different service?

Back when I first started to take on freelance jobs, I started writing down the start and end time and the stuff I worked on for a client on paper.

A while later I started writing it down in Excel sheets, which made calculation a bit easier, but managing and entering the data didn’t feel right.

What I really wanted was a simple web based app where I could fill in the same information and create reports for clients for them to see how much time I spent on their projects.

While searching for the perfect time tracker, I didn’t really find one which suited me, so I thought it would be a fun challenge to build my own based on the techniques of local storage and progressive web apps.

What is Thyme Premium?

Apart from all the regular free features Thyme offers, Thyme Premium allows you to have unlimited syncing of timesheet data between devices. Data you enter is safely stored in an encrypted format only for you to read.

All data you enter is safely backed up every time you make a change.

Premium also offers a way to add hourly rates to projects you’re working on and have daily insights in the time you spent on projects.

I have many more features planned out which I want to share in a road map soon.

Completely open source

Why trust me on my word if I can also show you how Thyme works internally? I have open sourced all of Thyme on Github. Allowing me to be as transparent about what happens behind the scenes.

Here you can check out how the app works, how the backend works, and you can even see my planned work to start making plugins in Thyme possible.

More to come

I have a lot of nice things planned out for Thyme. If you have any suggestions or questions: feel free to reach out!

Two Sites on One Domain, with Netlify.

Fri, 03 Aug 2018 00:00:00 +0000

Recently I started hosting my open source projects on Netlify because of how easy (and free) it is.

One of the web app projects I made was in need of a website, but I didn’t want to pollute the app’s repository with the website’s source.

I found out that it’s possible to have Netlify show multiple sites on the same domain name. I’ll try to explain what the problem is I was trying to solve and how I solved it.

A note before I begin. Netlify is not sponsoring this article, nor did I ever have contact with them about it. All views and opinions in this article are my own.

The situation

At the beginning of this year I launched a time tracking web application called Thyme. This little web app was hosted on Netlify from the domain name usethyme.com.

Netlify allows you to create a “site” which is based off a git repository. The Thyme application is based on the public repository on Github. Because the application was bootstrapped using create-react-app it was fairly easy for Netlify to recognize how it should build and host the app.

Every time I update the master branch on the Github repository, Netlify will automatically release a new version of the app on usethyme.com.

The problem

After a while I decided that it would be good if the domain name usethyme.com was used as a front-face of the app. A website that details the functionality and has a bit of documentation on the project. The app had to make room for this to happen.

This meant I had to create a website that Netlify can update and publish to usethyme.com. I could add the website’s source to the application repository, but felt like it was best if I keep both projects in a separate repository since I didn’t want people working on the application to get the whole site too.

It also worked the other way around. I didn’t want the website to be in control of the application’s published version or have to update the website with an updated app each time.

Netlify can assign a custom domain name to a site so the built version of the repository is hosted on said domain. A solution to having two sites on a single domain name is using subdomains. Sadly this was not a possibility for Thyme.

Why not just a subdomain for the app?

Since Thyme heavily relies on the usage of localStorage, moving to a different subdomain would mean all the current users would loose their access to data already stored in the usethyme.com storage. If I were to put the application on app.usethyme.com the localStorage data from usethyme.com wouldn’t be accessible for good security reasons.

So what I had to figure out was if it was possible to have two separate Netlify sites, but have the application running in a sub path of the website.

The solution

When digging through the documentation of Netlify I found out you can proxy content through redirects. That’s exactly what I needed! I can have usethyme.com/thyme on my website act as if it is my app.

All I had to change to the app was that it was being served from /thyme/ instead of /. All the routing done in the app and the assets would have to be accessible through usethyme.com/thyme.

The application part

create-react-app and react-router allow you to do this quite easily, but you have to know where to change the source.

In order for react-router to work in a sub path of a domain, you have to pass it a “basename”. In my case, the following change was enough while setting up the “BrowserRouter”:

<BrowserRouter basename={process.env.PUBLIC_URL}>
  ...
</BrowserRouter>

WebPack and WebPack’s dev server provide process.env.PUBLIC_URL while building and serving your project. This will tell react-router what to root of your application is and will act accordingly.

For create-react-app you have to tell the application what its public path is, which they call a “homepage”. In your package.json of the app add a property called “homepage” and add the path where the app will be located.

{
  "homepage": "/thyme/"
}

If you’re not using create-react-app, you can provide the PUBLIC_URL to webpack through its config to have the same outcome.

The Netlify part

For Netlify I had to make sure my website was being built and hosted correctly. I removed my custom domain from my app’s site and added it to my website’s site in Netlify.

Right now my app was not available on usethyme.com anymore, but it would show my website. My app was now living at https://thyme.netlify.com. Using proxying I had to proxy all traffic to usethyme.com/thyme to https://thyme.netlify.com/.

Using the example I came up with the following content for _redirects (to be placed inside the website’s root folder):

/thyme/*  https://thyme.netlify.com/:splat  200

And it works perfectly! All my localStorage is still available to the application and my application’s assets are proxied through to usethyme.com/thyme.

A little side note though. Since create-react-app uses service workers I had to put in a little extra proxy line because the browser was not able to find the service worker in the website’s root.

/service-worker.js  https://thyme.netlify.com/service-worker.js  200

Conclusion

In theory, you can create as many sites as you’d like and make them available on a single domain name using this method.

If you like to keep your repositories clean, this is a great way to do it.

React vs Vue pt. 1: JSX and Vue Template Syntax

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

For the last couple of years I’ve been working with React, and as of late I’ve been getting into Vue as well. A question lots of people ask me is:

“So tell me, which one is better?”

There is simply no short or correct answer to this question. There are a lot of factors which come into play. That’s why I wanted to start writing a mini-series on some topics which demonstrate differences between Vue and React and the pros and cons using either one of the frameworks.

In this first instalment of this “React vs Vue“ series, I want to get into how both frameworks allow you to render content.

How To Render?

Rendering content on the page is one of the most important things React and Vue do for us. Given some data and definitions of how to render will give the desired output. That is the promise they give us.

First I want to take a look at how React does things. Which is mainly two different approaches. You can either go 100% plain old JavaScript or use JSX to simplify the process.

JSX, createElement, and render() in React

React uses a render method in its components to create elements in the environment you’re running it in. I’ll take the browser and the DOM as the environment throughout this article.

Every time React thinks it should update a component (and its children) it will run the render() method of that component. In this method, you’ll return a React element which can, in turn, have nested children in it. Just like an HTML document is able to have.

You can do this by using the createElement function React provides. It creates the React element you need to return from the render method.

First it accepts what you want to create as its argument. Second is an object of props to pass to the element. And third is an array of children, all of which are React elements too.

A simple example of this would be:

class Hello extends React.Component {
  render() {
    return React.createElement(
      'p',
      null,
      `Hello ${this.props.what}!`,
    );
  }
}

class App extends React.Component {
  render() {
    return React.createElement('div', null, [
      React.createElement(
        Hello,
        { what: 'world' },
        null,
      ),
    ]);
  }
}

The HTML for this would look like:

<div>
  <p>Hello world!</p>
</div>

While this code looks very redundant, it’s the 100% JavaScript way of creating elements in React. Whenever render() is triggered, it will execute this method once again to create all the elements to show on the page. You can put JavaScript expressions anywhere you’d like in this code, just like any other part of your JavaScript code.

JSX is basically syntactical sugar around the React.createElement function. It’s a custom syntax which is not part of JavaScript, but can be transpiled by a tool like Babel. If you choose to use JSX, you need to have a build system in place to handle this.

The example above would look a bit different, but not that different if written in JSX.

class Hello extends React.Component {
  render() {
    return <p>Hello { this.props.what }!</p>;
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Hello what="world" />
      </div>
    );
  }
}

All JSX enables us to do is write shorter, easier to read and understand code to structure our React components. Your transpiler will eventually translate this code into something the browser can read, which is just using plain React.createElement.

You can use JavaScript expressions by using {} anywhere in your JSX. Want to pass a JavaScript variable as a prop? No problem. Want to do some map or reduce on an array? You can do that.

You only have to learn how JSX is transformed into plain JavaScript and that’s all there is to it.

Pros and cons to the React way

One con I have experienced when getting into React was the mental change I had to go through not to think in templates. I came from a Model-View-Controller approach using templates for my views. One of the things that got me the most, in the beginning, was creating lists. You can return an array of children just like you would in a for loop of a template language, but it just looked weird typing it like this.

class Example {
  render() {
    const names = ['John', 'Harry', 'Tom'];

    return (
      <ul>
        { names.map(name => <li>{ name }</li>) }
      </ul>
    );
  }
}

The map method of the names array will return a new array with React elements returned by the arrow function. It’s essentially the same for loop, but you have to get used to it.

Since data binding in React is just one way, you can not directly change values of a component, you have to explicitly tell React to update values of the state using setState. This makes React prefer immutability, which is kind of hard to get into if you’re not used to it.

A huge pro which evolved out of this con is that you’ll become a lot better at making your components clean and lean. Everything has to work in a pure functional way and should always return the same result given the same input. Given any state or props, the component will always turn out the same, at least that’s the philosophy behind React.

Another pro is that everything you write is JavaScript in the end. You don’t need to learn a new templating language, you’re only learning how to use the React API to your advantage. The fact that everything is just JavaScript makes this method very predictable.

A con, in turn, is that everything is JavaScript, so there is not much to help you out of the box. For instance, the way I am rendering the list of names, I pass an arrow function inside of the map method. This arrow function is created each time the render method gets called, which could lead to performance issues. You see this a lot too when people want to bind this on an event listener.
A solution to this is to bind or define all function before render is called. In the constructor of a component class for instance.

This is also a pro because it will teach you a lot about how JavaScript works. Maybe this a lot to take in when you first start out, but in the end, this will make you better understand how the language works and what its pitfalls are.

Vue templates and render

You can use Vue templates right in your HTML document. Which makes it super easy to get started with. When a Vue component thinks it should render it will read the template written on the page and render all the elements and binds all events it needs to.

A very basic example would look like:

<div id="app">
  Hello {{ what }}!
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    what: 'world',
  },
});
</script>

Vue allows you to do all kinds of great stuff in their templates. You can interpolate JavaScript values, you can set attributes with plain values or bind attributes to JavaScript values which live inside of the Vue component. You can do expressions too, to do some JavaScript calculation along the way.

It has its own way of rendering conditionally, rendering lists, binding events, and binding form inputs. Binding events and form inputs can come in quite handy as things like these are not build-in into React. It does introduce a little bit of magic, but since it’s a templating language, that’s fine a lot of the time.

However, if you feel like the template language is not suited for a case, or if you simply cannot achieve what you’d like using the template language, you can use the render method of a Vue component.

Yes. Vue too has a render method and it also uses the same concept as React by providing a createElement function.

Vue.component('hello', {
  render(createElement) {
    return createElement('h1', {}, 'Hello!');
  }
})

Instead of importing a function from Vue itself, Vue provides the createElement function to use as the first argument of the render method.

Providing props and other data to createElement works a bit different from React, as Vue is more of a complete framework which provides you with a lot of functionality out of the box.
You can read up on the Vue data object in details in their docs.

Two-way binding and Event binding

A concept which is used in Vue is two-way binding. People coming from Angular will definitely recognise this concept. Let’s say we have an input in our Vue component we keep track of the value. We want the input to be able to adjust the value in the Vue component’s data, but when the Vue’s data changes: the input value should change too. Vue does this through the v-model on inputs. Vue also allows components to use two-way binding using v-model.

Events on elements can be directed to a method inside of your Vue component or can execute a JavaScript expression. The thing that comes in handy here is that this is automatically bound to the current Vue component you’re in. So you do not need to go and bind this to the functions passed into event handlers.

<div id="app">
  Count: {{ count }}
  <button v-on:click="increment" value="Increment" />
  <button v-on:click="count = count - 1" value="Decrement" />
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    count: 0,
  },
  methods: {
    increment() {
      this.count = this.count + 1;
    },
  },
});
</script>

The benefit here is you have to write less code and know all is handled well under the hood.

Another great thing about event binding in Vue is that they allow you to use event modifiers. They give you a simple way to bind modified event handlers on components. For instance, automatically do event.preventDefault before executing the function you bound to an element.

Pros and cons of Vue template language

I want to start of with a pro off using Vue templates. It’s quite easy to get going pretty quick. Most developers are familiar with using template languages and it does kind of resemble the outcome you’re expecting in HTML.

The downside, however, is that you have to learn a new templating language. And that, in my opinion, is quite a big con. A lot of the times I am found reading the template language documentation pages over and over, to see what I am missing or just simply how to do something like a conditional rendering again. I know it’s part of learning a framework like Vue, but outside of Vue, this skill is kind of useless.

A pro I cannot ignore is the event binding on elements. It’s just so convenient. You have to accept the magic happening under the hood though. Everything inside Vue templates gets an automatic this reference. So instead of writing {{ this.name }} inside of the templates you just write {{ name }}.

What I also found is that using JavaScript expressions and references to data inside of my components always feel like a guessing game. I often times think to myself: “Will this work?”. Sometimes it does. sometimes it doesn’t. That’s because of all the magic happening out of sight and that can become a little dangerous. I consider this a con.

Small pro, some people like to keep their templates out of their JavaScript (and think JSX is also a template). Vue templates do that, so it gives the illusion of separation of concerns. I don’t see JSX as being the template, it’s just a way to structure createElement code.

I found myself reaching for the render method at some points. There where situations where the templating language didn’t have enough power to provide me with the functionality I needed, which is fine, but most of the times when I was using the templating language I just wanted to turn to the render function again. I know you can use JSX in Vue if you want, but I don’t really see it used a lot in examples or in the community’s code. I’d stay away from it and use templates as much as possible.

Conclusion

With this article, I hope to have giving you a clear look at how React and Vue handle the creation of documents.

To me there is no clear winner here, it all depends on what you like more. If you’re not afraid of learning a template language and don’t have too complex components, Vue is pretty sweet.

Vue helps the developer solve a lot of “hard” stuff which is not baked into React. React on the other hand allows the developer more control over how the code works.

My personal preference goes to React + JSX, not just because I don’t like templating languages in general, but because it’s just JavaScript, and it made me a way better developer than I used to be, being way more conscious about what I was doing.

Going Freelance Changed Me

Thu, 15 Feb 2018 00:00:00 +0000

As some of you might know, I quit my day job last September to focus on my own projects and go freelance at the same time.

A lot has happened in the meantime, so I thought it would be nice to share my experiences so far.

Before going freelance

Quitting my day job was a very hard decision. There were a lot of possible problems and challenges I had to take into account. I had just a little bit of extra funds to last me a few months, but I knew that when those funds were going to run out, I would have to have some sort of income to support my life.

I also had a job to leave which I also liked. The team I worked in was nice, the work I did was good. Leaving something like that behind is always a big risk, it’s possible you’ll never find anything like that again. And who is to say I’ll like freelancing better?

When I talked about the idea of quitting my job and going freelance on the side, people were saying: “Oh, you’ll do just fine! Do not worry.”. Which at the time made me even more nervous, what if it all doesn’t work out? What if I am going to be a complete failure at this?

The thing that got me to take the leap of faith was when I was talking with someone about a personal project I was working on. He ended up asking me how much I would need to start doing it full time, he was willing to invest that.

It really got me thinking: if people are willing to invest in an idea, why should I not believe in taking this opportunity to go totally freelance? And if all else fails… I could probably try and find myself a new job.

The period after quitting

The first few weeks after quitting I spent letting people around me and my professional network (whatever that is) know that I went freelance. The number of responses I got was overwhelming, which I never expected when I first made the decision to quit.

In the beginning, I wanted to focus working on my own projects, so I politely declined work. I was also feeling a bit insecure about accepting work from people I’ve never met and do not know personally.

In these two months of not accepting any jobs I discovered the amount of work which is out there for me to do, which made me worry less about my financial future, and in turn allowed me to focus on the work I was doing.

Accepting my first contract job

After a while, I got an email from one of my first employers to have a talk about possibly doing some work for them. They needed my expertise for an in-house project.

This was a perfectly scoped and low risk assignment, perfect to start out with. Familiar faces and people I already knew how to work with.

It felt really good to accept my first official job as a freelance web developer. It was all beginning to look like I made the right choice.

Responsibilities and being more responsible

Because I only worked a couple of days a week, it felt like I had to take a lot of responsibility moving the project forward. A feeling which has never been as strong before.

In my day jobs, I usually found myself struggling to find motivation and inspiration to give my absolute best for the tasks and features at hand. I had to take my own responsibility to make it the best I could, but the motivation just wasn’t quite there.

I always wished I could have given these jobs my best, but always found that my personal projects were the ones that got me at my best.

The intrinsic motivation to give it my best was lacking for projects I got from employers. A lot of times I got the feeling that whatever I wanted to change would have to pass a lot of layers of management and reviews before I was able move on.

At a point, it got tiring to work like this. Especially if you’re not really invested in the project and don’t truly stand behind what you’re doing. I could change the situation myself, but I just wasn’t putting in the effort anymore, which not helped anyone.

Excited about doing work

The added responsibility of making sure projects are a success and delivering the best I can for my clients has given me back the excitement I lost doing day jobs.

Work doesn’t feel like work I don’t really like doing anymore, it helps a lot. At the moment I am able to accept the projects and jobs that I find interesting and help me forward as a person.

Now I can focus on myself, my clients, and becoming better while also delivering much better work at the same time.

It feels great to feel like this again.

Remote work and travelling

One of the things which helped me find my motivation back is to work from home. I am able to fill in my work days as I see fit.

Sometimes I feel like working for just a few hours a day, while the next day I can be on a spree and go on for more than nine hours. My previous jobs were also pretty flexible, but it was always in the time I spent at the office.

Come in at eight in the morning, leave whenever. Right now I can have a lengthy lunch break and continue work later and not feel sorry about it. It really helps that I do not travel to work anymore.

Some clients prefer it if I am at the office, which I can understand, and I’ll visit them. I do feel that eliminating the travel time I used to have has helped me a lot in feeling free. It allows me to work at the times I feel comfortable.

Looking forward to the future!

As I write this post I am looking back on the last couple of months and am amazed by the progress I made in such a small period of time. Loving every second of it right now, and hope it will stay like this for long.

The most important thing for me is to keep validating the projects I am working on and if they work for me as a person. I’d rather spend my client’s money on things I get excited about than things I’d rather not be doing, losing motivation in the process.

Going freelance has been the best move I made in recent years, professionally and personally. I can truly say I live a better life.

Orchestrate Actions with Redux Listeners

Tue, 05 Dec 2017 00:00:00 +0000

There are multiple ways and libraries to handle asynchronous data flows in Redux. Some do a lot, some do just a little.

redux-listeners is a small middleware for Redux which makes handling async are orchestrating action in Redux a breeze.

It’s the sweet spot in-between redux-thunk and redux-saga

What is redux-listeners?

With redux-listeners I aim to make it easy to respond to actions being dispatched to the store without adjusting the action itself.

It allows you to listen in on action types being dispatched to the store and dispatching new actions afterwards. This way you can separate your action creators from the logic which follows the action.

The data flow can be described as such:

Action is dispatched to the store
redux-listener middleware sees type of action matches a registered listener
Listener is executed, which chooses to dispatch a new action to the store
Reducers of the original action are handled
New action will be dispatched to the store

Example usage

import { createStore, applyMiddleware } from 'redux';
import { createMiddleware } from 'redux-listeners';

// import your reducers
import rootReducer from './reducers';

// create action middleware
const listenMiddleware = createMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(listenMiddleware),
);

// registering the listeners
listenMiddleware.addListener('FETCH_DATA', async (dispatch) => {
  try {
    const response = await fetch('/some-data');
    dispatch({
      type: 'FETCH_DATA_SUCCESS',
      payload: await response.text(),
    });
  } catch (err) {
    dispatch({
      type: 'FETCH_DATA_FAILED',
      payload: err,
    })
  }
});

listenMiddleware.addListener('FETCH_DATA_FAILED', (dispatch, action) => {
  // display the error in console by reading the action
  console.error(action.payload.message);
});

// Make the listeners start fetching data
store.dispatch({ type: 'FETCH_DATA' });

Documentation

Visit redux-listeners on Github for a full explanation, how to install, and documentation.

Separating actions from logic

In my opinion, actions creators should only contain create action objects to be dispatched on the store. All side effects (like fetching data) should be handled elsewhere.

Most of the times you also want to keep logic like this out of your application to keep it as simple as possible and make the logic behind actions flexible and easy to replace without touching the application itself.

Possible use cases

Fetching data async is just one of the examples of how to use redux-listeners, but there are way more ways you can use and combine redux-listeners with other principles.

redux-listeners is great for handling parts of the program which live outside of the Redux cycle. You can orchestrate mutations on localStorage or other parts of the browser’s API.

Redirecting to other pages after an action is dispatched is also a use case I use myself.

Wrapping up

Use redux-listeners if you’re looking for something other then redux-thunk, but not as complex and big as redux-saga.

Introducing Formable - Beautiful forms for your websites

Tue, 24 Oct 2017 00:00:00 +0000

Today I am very pleased to reveal to you what I’ve been working on for the last couple of months.

Formable is a service I developed which will help you create forms and embed them on your websites. Without the hassle of coding the whole form yourself or installing another unnecessary plugin.

Why Formable?

When I create a website of any kind, I find that coding forms is always a tedious and boring task. Especially if you need to create a way to handle messages and their input.

It’s time-consuming, and overall a task I wouldn’t mind skipping.

Imagine assembling a form and then adding a snippet of embed code to your site is all you have to do: this is Formable.

Perfect for all types of websites

It doesn’t matter if you run a WordPress site, created your website with a service like Wix, or if you just have a static website. Formable will fit perfectly on all these platforms and will work the same everywhere.

Because Formable is embedded with a simple external script, you won’t need to add your own backend code or install a plugin. It will work out of the box!

Evolving possibilities

You can create contact forms, subscription forms, surveys, and more. With the online form builder, you can create forms to your liking.

Fields can be validated before they are sent to you. Make them required fields, have an email address check. _Remember, you don’t have to code anything for this_!

Formable is also easily adjusted with some plain CSS. You can even choose to exclude CSS from the embedded forms altogether.

I am working on improving the possibilities of Formable. If you have any suggestions: please reach out!

Try it now!

You can try Formable for yourself. Pick a plan and start working or start for free and try Formable.

In the meantime, follow Formable on Twitter and like Formable on Facebook to get updates and see where Formable is heading.

Replacing React with Preact in Your Projects

Fri, 01 Sep 2017 00:00:00 +0000

While React is becoming more popular by the day, so are alternatives to the JavaScript framework.

One of these frameworks is Preact, which does not aim to do things that much different per sé, but focuses on performance and bundle size.

This article will take you through the why and how of replacing React with Preact in your existing project.

A bit more about Preact

Preact is the 3kB alternative to React. They strive to provide the same ES6 as React and even provide an extra layer of compatibility with React, which will make most of the React project work as intended out of the box!

This compatibility layer is totally optional for using Preact, but is needed for the purposes of this article.

Even in already existing projects, it’s possible to start using Preact instead of React. For me, this brought instant performance improvements and my bundle size went down significantly.

Show me the code!

To switch to using Preact instead of React you only need to install Preact’s dependencies and adjust your WebPack configuration accordingly.

First, add Preact to your project:

npm install --save preact preact-compat

Now adjust your WebPack config to alias react to preact-compat. In webpack.config.js add:

{
  resolve: {
    alias: {
      react: 'preact-compat',
      'react-dom': 'preact-compat',
    },
  },
}

There is a more in-depth explanation of switching to Preact over at Preact’s docs. Give it a read if you don’t use WebPack for instance.

In order to get React Dev-Tools working nicely with Preact, I suggest you include the following snippet in your app’s entry point. At least as it’s before calling ReactDOM.render:

if (module.hot) {
  require('preact/devtools');
}

This will add devtools compatibility when you’re running your app in WebPack’s dev-server mode. If you require the devtools outside of the if-statement it will be included in the production bundle of your app, best avoid that!

And that’s all there is to it!

But, why switch?

There are many possible reasons one would choose to switch from using React, but the one I’ve been hearing a lot as of late is people having concerns around React’s license.

I can imagine people don’t want to be dependent on big software companies like Facebook or Google for their projects. Luckily, Preact has the MIT license.

Performance and size

While React is super fast on its own, Preact delivers an even faster experience. In my case, I couldn’t really tell much of a difference in the beginning, but I noticed Preact executed some bindings a bit differently. This made my components mount earlier than in React. Nice.

The biggest difference was in the size of the bundle. Using webpack-bundle-analyzer I compared the two bundles which were built with WebPack. Both cases used the --optimize-minimize flag to ensure they both got minified in the process.

Bundle with React

Bundle with Preact

Look at the difference compared to the other libraries living in the bundle! I was amazed by the decrease in size I was able to get.

The bundle went from 111.97KB gzipped to 57.47KB gzipped. That’s a whooping 54.5KB less.

Compatibility with other libraries and IDEs

The great thing about preact-compat is, is that it also provides compatibility with popular libraries you might already use in your project. For me, react-redux and react-router just worked after I applied the alias technique described earlier. You should test your app thoroughly though.

You could go without this compatibility layer and go plain Preact, but it might require some extra working making your components and 3th party libraries work.

Another thing I really like is how well eslint and flow work with this approach. They’ll still think you’re using React, which certain rules in eslint can check for.

When I added Preact as a standalone earlier in the project I couldn’t get eslint to stop telling me to include React in JSX files, but I was using Preact for that. Aliasing solves this.

Another really great win is compatibility with the IDE I use most: WebStorm. Same as for eslint it will still consider import React from 'react'; to be just React, while in truth it’s Preact which get included in your bundle in the end.

Jason Miller, the author of the library, reached out to me to tell that if you’re running a plain Preact without preact-compat setup you can also get these benefits by aliasing react to preact in your WebPack config. So that’s a pro-tip there!

Wrapping up

Hopefully, I got you excited to try and apply Preact to your current projects. It’s not too much work and you don’t actually need to adjust your code base, so that’s awesome.

Feel free to reach out if you have any questions!

I Quit!

Tue, 08 Aug 2017 00:00:00 +0000

More specifically: I quit my job, to start my own business.

For the last couple of years, I spent a lot of time working on personal projects next to my day time job. I even decided to work four days instead of five to spend an extra day doing what I love: getting my hands dirty on stuff I came up with myself.

Because it still feels like I still have too little time and I want to focus on building my own products, I decided to quit my job. Which is a really big step for me.

What will I be doing?

The last couple of months I have been working on a project which I will soon post more information about. Most of my time in the near future will be spent on this product’s launch and I hope to do so soon. I am really excited about this and is the main reason I decided to take the plunge and quit my job.

In the meantime, I want to focus some more on pet projects like Drammit and Open Source Software I have on my GitHub account. It’s been quite a while since I made the time to improve on them. I always loved to put effort in projects like these.

Also, blogging. I used to love writing about stuff I learned on my blog, but I quickly lost interest when development became a day to day thing. It felt like everything I could write about was already on the Internet, explained by much smarter people than I. Now that I can plan my own time, I will try to include blogging in my day to day tasks.

Expect articles about _React_, _Redux_, and how to tackle certain problems while making (web) apps.

Available for hire

Aside from all of the above, I will be available for hire. I plan on taking on some jobs to pay the bills and expenses made working on my projects.

Feel free to contact me if you’re looking for an expert in JavaScript, React, and web applications. I am available for freelance jobs.

For more information, please check out my company’s website at: https://theclevernode.com.

Onwards to a bright future

I am very excited to start working on all the ideas I have and figure out what my future is going to look like.

For now I am curious, excited, and calm at the same time. Only time can tell how well all will work out.

Using Flow instead of prop-types in React

Mon, 19 Jun 2017 00:00:00 +0000

One of the most used ways to check the “type” of a property which is passed to a React component is through prop-types. The main problem is that all the type checking is done on run-time, and not statically.

This article will explain how to go from type checking with prop-types to static type checking with Flow in React.

Why Flow?

The first and foremost reason for choosing Flow is that is opt-in. You can choose to type check a file or not.

When a project is already alive and well the last thing we want to do is rewrite everything. Flow enables you to add type checking step by step into your application.
This is also true for Typescript, but I choose Flow because it’s not a compiler, simply a checker. Babel can take care of the extra annotations.

Type checking is for some a missing part in JavaScript, which some developers might question. Is it really necessary? Does it make my code any better? Isn’t type checking just a tool for the developer? (Yes it is)

The main reason I choose to add a tool like Flow to my projects is to ensure I think about what goes in and goes out throughout my application. Type strictness helps my IDE understand what I type and what I should pass in function and props of React Components.
In a way I am already documenting my code, which makes my developer self quite happy if I look back at components I made a month ago.

Because Flow checks types statically it can be run outside of the run-time environment. This makes type checking errors in the browser a thing of the past and can be detected before building the application.

Type checking with prop-types

Consider the following setup, done with plain old prop-types.

import React from 'react';
import { bool, node } from 'prop-types';

const propTypes = {
    visible: bool,
    children: node.isRequired,
};

const Toggle = ({ visible, children }) => (
    <div style={{ display: visible ? 'block' : 'none' }}>
        { children }
    </div>
);

Toggle.propTypes = propTypes;

const otherComponent = () => (
    <section>
        <Toggle visible=true /> {/* Error at run-time! Missing children */}
        <Toggle visible="true"> {/* Error at run-time! Not boolean */}
            ...
        </Toggle>
        <Toggle visible> {/* Passes */}
            ...
        </Toggle>
    </section>
);

In my opinion, throwing this error at run-time, most of the time in the browser, is kind of too late.

Reporting the mistake a developer has made in the IDE or different tool he’s using is a lot more convenient. This also helps with components other developers made and how to use them.

Type strictness here would also be documenting the use of the component.

Type checking with Flow

Let’s rewrite the previous example using Flow.

// @flow

import React from 'react';
import type { Element, Children } from 'react';

// define the type of the props object which gets passed to the PureComponent
type toggleType = {
    visible?: boolean,     // visible is optional
    children: Children,    // children is mandatory
};

const Toggle = ({ visible, children }: toggleType): Element<any> => (
    <div style={{ display: visible ? 'block' : 'none' }}>
        { children }
    </div>
);

const otherComponent = (): Element<any> => (
    <section>
        <Toggle visible=true /> {/* Error! Missing children */}
        <Toggle visible="true"> {/* Error! Not boolean */}
            ...
        </Toggle>
        <Toggle visible> {/* Passes */}
            ...
        </Toggle>
    </section>
);

All the errors in the last example would have been reported in the IDE or when you run Flow. And yes: Flow supports JSX, so that’s pretty awesome!

In closing

Flow makes it easier for me to enforce the correct use of my components in my applications. Adding type checking on other parts of your application is also a great idea, as you might grow more aware of the code you’re writing.

There is a great getting started guide on Flow’s website. Also a page on how to get Flow up and running in your favourite editor.

Happy checking!

Uploading files with superagent in the browser

Sun, 16 Aug 2015 00:00:00 +0000

Sending files in the browser using XHR can give the user a great experience. I like to use superagent for sending requests, it’s a great light-weight API which doesn’t require other third party libraries and works great when bundling with CommonJS.

Uploading files using a multipart requests in the browser is sadly not supported through their API at the moment, but it’s possible following a few short steps. I’ll explain how I got multipart uploading to work using superagent in the browser in this article.

The way we are used to

Uploading files using a <form> in HTML takes a simple <input type='file' /> and an attribute on your form set to enctype='multipart/form-data'.

This will submit the file using multipart and you’re be able to receive the file on your server.

Luckily we can send a similar request using JavaScript.

Multipart and superagent

superagent enables multipart building on the server-side, but the browser implementation is sadly missing.

Because you can use superagent on both server-side and client-side it uses different implementations in both cases. The .attach() method is aimed to only work in the server at the moment.

Welcome, FormData

FormData is a simple way to construct a key value paired data object which can be send to the server. superagent accepts FormData, so we can send data using this method, and also files.

Constructing FormData is done like so:

var formData = new FormData();

formData.append('key', 'value');

Pretty straight forward.

Reading files from an input

Let’s say we have an element which looks like this: <input type='file' id='file_to_upload' />. We can read the files it contains using this .files property the element has.

For each file which is present in the FileList, we can append that data to FormData.

var files = document.getElementById('file_to_upload').files;
var formData = new FormData();

for (var key in files) {
    // is the item a File?
    if (files.hasOwnProperty(key) && files[key] instanceof File) {
        formData.append(key, files[key]);
    }
}

Sending it with superagent

To wrap things up, we can now send this data with superagent using .send().

superagent.post('/some-url/')
  .send(formData)
  .end(function(err, response) {
    //upload done!
  });

This is how I send my files using superagent. You can include an upload indicator and send other data in the FormData too.

Hope this article helped for those pulling out their hair.

Explore and improve your development skills

Sat, 18 Jul 2015 00:00:00 +0000

My jobs have always been focused on the technologies and stacks I was used to. This is a safe and efficient way to get work done, but what I didn’t realise is that it only hold me back on learning different ways.

In this post I am sharing my findings of joining a company which uses a different approach to development, stacks and work flows than I was used to.

Be not afraid of change

Change is hard, especially for people who tend to follow a strict pattern of applied methods. I am one of those people who likes to do the things I do following a strict way and thinks teams should all do that. It can improve team work and the quality of the products delivered.

The problem with this is that I forgot to take a look at other methods and thus not change my ways.

I was used to the most common PHP, HTML, CSS, JS stack. Made a lot of websites using WordPress, which I was never really fond of, but there were no better alternatives in my stack. I had grown to love and hate the stack at the same time.

After a while I grew to like Node.js and started working in the backend again, which opened my eyes to all the great things I was missing out on. This triggered my will or maybe even the need to change.

Learn from broken systems

Even if you’re not willing to learn a certain method a team is using, just try it out. Especially in JavaScript development there is an overload in different frameworks. Some you might not like, some you might want to use. Since I joined a team which already used frameworks I was not familiar with, I had to in order to be part of the team.

I started learning Angular because of a lot of projects were made using it. It opened my eyes to a lot of new possibilities, but also made me see the pitfalls of the system. This is a good thing. Learn from mistakes, and also if you made them yourself in the past.

It might take some time to get into something new, but it’s really worth it in the end. You’ll help yourself to a lot more knowledge and insights.

The problem of different programming languages

In the past, I always had trouble switching programming languages. The syntax was hard for me to learn, nothing really went right the first time and it frustrated me a lot. The problem was, which I recently realised, was that I was not an experienced enough programmer.

I was not used to solving complex problems and choosing the right architectures for my applications yet. No full understanding of programming principles makes it hard to learn a new language. You’ll get a lot of new principles and ways thrown at you before you can even make up your own mind about them.

Recently I started learning Python. In the beginning I couldn’t really read the code which was in front of me and it kind of gave me an headache. When I started learning the syntax I quickly learned how clean it is and not really that different from the languages I am used to write. The only hurdles I had to overcome were how to do certain things in the language which I already use in other languages.

In closing

Try something different. Learn a new language. Create something totally different. Not all the methods and principles have to be followed as strict as you’re used to, but try to apply what you’ve learned in the past on new information you’ll learn.

Testing JavaScript using BrowserSync, Mocha and PhantomJS

Wed, 18 Mar 2015 00:00:00 +0000

It’s a good idea to test your JavaScript applications using a testing framework. It improves the integrity of your software and enables you to do Test Driven Development.

You can do your testing in Mocha, but you can also expand it a bit further with browser specific behaviour testing. This article is aimed to get you started with testing using BrowserSync, Mocha and PhantomJs.

What we’re going to make

We are going to make a fairly straightforward test that can be tested in the browser and on command-line. This way we can also integrate our tests with services like Travis CI to automatically perform tests on future releases.

At the end of the article you’ll have a project where you can write your tests in. You’ll have JavaScript code that can be tested on command-line and an HTML page where the script you want to test will live. It will allow us to actually see the tests.

All changes will be watched and checked automatically. You can keep your focus on writing code while the test results get updated elsewhere.

We’re going to use Gulp for this workflow. You can also do without, but it comes in handy later when we want to watch our files for changes and automatically reload the tests in BrowserSync.

For bundling our code and not breaking the Mocha way of testing Node.js code we’re going to use Browserify.

Getting started

First off, create a project folder which will hold the files and navigate to that folder in your terminal.

Init an npm project:

npm init

Install Gulp globally if you haven’t already:

npm install -g gulp

Install all the dependencies we’ll be using:

npm install --save browser-sync browserify gulp gulp-mocha-phantomjs mocha-phantomjs mocha vinyl-source-stream

The reason I install gulp-mocha-phantomjs, mocha-phantomjs and mocha is for easier access later on.

Creating something to test

Let’s say we want to create a JavaScript library that changes the text inside a given DOM element to something else.

In order to know what to do next is to determine the way our module will be used and what the outcome should be.

We’ll call the module TextChanger which holds a method called replaceText. The replaceText method will accept two parameters: a DOM element and a string with text which will be placed inside.

If we’re going to follow a TDD approach we need to write tests for this method before even implementing the code of TextChanger.

Create a new folder called test and place a file called tests.js in it. Place the following inside the file:

var assert = require("assert");

describe('TextChanger', function(){
    var element = document.createElement("section");
    element.appendChild(
        document.createElement("span")
            .appendChild(
                document.createTextNode("Replace me")
            )
    );

    describe('#changeText(element, text)', function() {
        it('should replace the content of the element with given text', function() {
            assert.equal(false, true);
        });

        it('should throw and error if element is not a DOM element', function() {
            assert.equal(false, true);
        });
    });
});

These tests do not do anything yet. They fail because false is not true. I do this on purpose because we have to write correct tests first.

Would you run this test using just mocha test/tests.js, Mocha would complain ReferenceError: document is not defined. Mocha is not run in a browser environment, just like Node.js. In order to enable testing in a browser environment we need to use PhantomJS.

An HTML document to run the tests

In order to run the tests in a browser environment we’re going to need an HTML document which will load the necessary scripts and styles. While Mocha can test .js files, Mocha PhantomJS takes .html files. In this document we’re going to load Mocha and our tests.

Create a new file in the test folder called tests.html and place the following content in it.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>TextChanger tests</title>
    <link rel="stylesheet" href="../node_modules/mocha/mocha.css"/>
</head>
<body>
    <div id="mocha"></div>
    <script src="../node_modules/mocha/mocha.js"></script>
    <script>mocha.setup('bdd')</script>
    <script src="tests-browserify.js"></script>
    <script>
        if (window.mochaPhantomJS) {
            mochaPhantomJS.run();
        } else {
            mocha.run();
        }
    </script>
</body>
</html>

We are loading Mocha from the node_modules folder, our tests (which do not exist yet) and running the tests in the end.

The reason we need a different test file from the one we created earlier is because the browser doesn’t understand require(). We can solve this by using Browserify to bundle our script.

Watching and serving the tests

In this step we’re going to create our workflow. We’ll use Gulp as our runner, use BrowserSync as our web server which can automatically reload and Browserify to bundle our test script.

Create a gulpfile.js file in the root of your project. Add the following contents.

var gulp = require("gulp"),
    browserSync = require("browser-sync"),
    browserify = require("browserify"),
    source = require("vinyl-source-stream"),
    mochaPhantomJS = require("gulp-mocha-phantomjs");

gulp.task("browser-sync", function () {
    "use strict";
    browserSync({
        server: {
            //serve tests and the root as base dirs
            baseDir: ["./test/", "./"],
            //make tests.html the index file
            index: "tests.html"
        }
    });
});

gulp.task("browserify", function() {
    "use strict";
    return browserify("./test/tests.js")
        .bundle()
        .on("error", function (err) {
            console.log(err.toString());
            this.emit("end");
        })
        .pipe(source("tests-browserify.js"))
        .pipe(gulp.dest("test/"))
        .pipe(browserSync.reload({stream:true}));
});

gulp.task("test", function () {
    "use strict";
    return gulp.src("./test/tests.html")
        .pipe(mochaPhantomJS());
});

gulp.task("serve", ["browserify", "browser-sync"], function () {
    "use strict";
    //when tests.js changes, browserify code and execute tests
    gulp.watch(["test/tests.js", "src/text-changer.js"], ["browserify", "test"]);
});

The browser-sync task makes sure the test folder and the root of the project get served as a web server. It will also set tests.html as the index so it will open said file when browsing to http://localhost:3000. When this task is run it automatically opens the link in your browser.

The browserify task bundles the tests.js file and creates a browser runnable tests file.

The test tasks executes mocha-phantomjs and outputs the outcome in the terminal. This is the same output you get in your browser.

To start serving the tests and rerun them every time you make a change in the tests file you need to run the following command in your terminal.

gulp serve

Finishing the tests

If you have your web server running using the gulp serve command we just implemented you’ll see a web page with two errors complaining that true does not equal false. Which is good. Now we can make write some useful tests.

With the watcher in Gulp running it will run Browserify and reload the tests once you make a change. You don’t have to run the test command yourself.

Let’s create a file where the source of TextChanger will be defined. Create a folder called src and create a new file called text-changer.js. Leave it empty for now.

Open up the test/tests.js file, it’s time to fill in the tests.

First we need to require the TextChanger module. Do so after var assert = require("assert"); by adding:

var assert = require("assert"),
    textChanger = require("../src/text-changer.js");

Now that we’ve included our empty module, we can use it in our tests. The first test will check if the given element holds a textNode with a string value. The textChanger object will be a factory which returns an object which holds the method replaceText. Given this info the first test can be made.

it('should replace the content of the element with given text', function() {
    textChanger().replaceText(element, "test");

    assert.equal(element.childNodes[0].nodeValue, "test");
});

The second test checks if the method throws an error if no real DOM element is given. Which can be done by doing:

it('should throw and error if element is not a DOM element', function() {
    assert.throws(function () {
        textChanger().replaceText(null, "test");
    }, /DOM element/);
});

Now that the tests are ready to check our implementation we can continue to coding the module. The biggest advantage we have now is that we know what the implementation should look like.

Implementing your module

It is time to make our tests succeed. We know how the module has to work, now we have to make it work.

Open up the empty src/text-changer.js file.

At first we need a little base to fill in our implementation. Place the following content inside.

var textChanger = {
    replaceText: function (element, newText) {
        //check if element is a DOM element

        //remove all the children

        //add textNode to element
    }
};

module.exports = function () {
    return Object.create(textChanger);
};

Now that we have this basis, we see that we might need two extra methods. I’ll call them isDomElement and removeChildren. You could (and should) go back to the tests file and write some tests for these methods too. To keep this tutorial short, I’ll skip this part.

Add two extra methods in the textChanger object called isDomElement and removeChildren. Give them the following implementation:

isDomElement: function (element) {
    return (element && element.nodeType && element.nodeType === 1);
},

removeChildren: function (element) {
    while (element.firstChild) {
        element.removeChild(element.firstChild);
    }
}

So far we’re not doing anything in the replaceText method which gets called yet. It’s time to implement the first rule we defined in our tests: *”it should replace the content of the element with given text”*.

Place the following in the replaceText method and save the file:

this.removeChildren(element);

element.appendChild(
    document.createTextNode(newText)
);

Look at your browser and terminal. You’ll see that the first test is now succeeding. Great! Time to put a check for the given element in the method as well.

Put the following code at the beginning of the replaceText method:

if (!this.isDomElement(element)) {
    throw new Error("element is not a DOM element");
}

Save the file and… success! Both tests succeed and should be green in the future of your application. It’s okay to refactor your tests, as long the integrity stays the same.

The finished implementation should look like this:

var textChanger = {
    replaceText: function (element, newText) {
        if (!this.isDomElement(element)) {
            throw new Error("element is not a DOM element");
        }

        this.removeChildren(element);

        element.appendChild(
            document.createTextNode(newText)
        );
    },

    isDomElement: function (element) {
        return (element && element.nodeType && element.nodeType === 1);
    },

    removeChildren: function (element) {
        while (element.firstChild) {
            element.removeChild(element.firstChild);
        }
    }
};

module.exports = function () {
    return Object.create(textChanger);
};

Onwards

Now you can easily test your JavaScript modules and scripts in your terminal and browser at the same time. Without having to reload your browser or running a test task all the time.

Using the following command you can execute the test in your terminal: node ./node_modules/mocha-phantomjs/bin/mocha-phantomjs test/tests.html. Keep in mind that you still have to Browserify your code after you make changes to your tests and implementations.

I hope this gave you a quick intro into testing your JavaScript code. It takes some time to get used to write your tests before your code, but it’s worth it in the end.

Migrating from WordPress to Wintersmith

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

Static websites load blazing fast and are fun to make. Having your website calculated for each request is getting out of style and is becoming less necessary.

I went through the process of turning the WordPress version of this blog into a statically served website. This article explains the process behind it and what I did to achieve the current static website.

##Why static?

WordPress was my platform of choice back in 2008 when I started writing and publishing articles. Back then I liked the comfort of not having to write my own content management system for posting blog posts. The amount of plugins available helped me implement stuff I didn’t really know how to make.

Years and a lot of web development related experience later I learned that WordPress is not for me. I explained why in a previous post about rebranding Gaya Design.

With a static approach I could make my blog behave the way I think it should behave. Calculate the content before it will is served, not at the time it is requested, like what happens on a typical blog system. You can kind of prevent calculations using caching tools, but it still is no holy grail.

It was a nice challenge for me, since I never really made a statically generated site before. My weblog was the perfect case for me to go and try it out. I was going to change my blog’s name anyway, so I might as well go ahead and create a new site along with it.

##Planning it all out

There were a few requirements my new weblog had to meet. Since I am quite picky on the quality of my own workflow I decided I wouldn’t make it easy for myself.

The things I really wanted were:

Generate everything from the source. Do not have any compiled or generated content in my repository.
Ability to write posts using MarkDown.
Being able to test and write for my site locally and deploy it with the same content.
Deployment from my weblog’s repository. No uploading through FTP.

This meant that I had to go and search for a static site generator that meets these needs. If it had blogging support it would be even better.

##Looking for a Static Site Generator

To be more specific, I was really looking for a static blog generator. I played around with a few, one was Jekyll. Which is pretty nice, but I came to the conclusion that I wanted to make a Node.js powered blog. Ruby gems were also driving me nuts, and I am no Ruby specialist, so I stopped there.

I quickly came across Hexo, Assemble and Wintersmith, which are all fine frameworks in their own way.

Before I used Gulp I was using Grunt, and in that time I’ve had some experience using Assemble. Which also has a bit of Gulp support, but it only works half of the time and is not recommended for production environments. This options went out of the window pretty quickly.

When I started using Wintersmith I completely fell in love. It’s so quick and has a great programmable interface to work with. So that works perfectly if I want to integrate Wintersmith in my Gulp streamline.

The templating looked easy enough, and there is a large variety of Wintersmith template plugins available. Along with the dynamically generated content I was going to need, Wintersmith looked like a solid choice. Sorry Hexo! Looks like I didn’t even give you a chance.

##Creating the templates

In order to go about and create the looks of the website I picked my typical workflow. First I setup my Gulp tasks to handle processing my Sass files, JavaScript and have BrowserSync serve it with the HTML to my browser.

To process my Sass I used gulp-sass. It runs on libsass, which makes it super fast too. That’s a great thing when you’re using BrowserSync because the newly generated assets will be available in the browser really quickly. Especially when you have two monitors where one holds a browser window and the other one your editor.

Frameworks I used for styling worth mentioning are: Neat for responsive layout grids and Bourbon for standard mixins.

##SVG

For my SVG images on the site I used a SVG sprite generator. I choose not to include the SVGs as images in my DOM so I could keep styling of icons out of my templates. This way I can keep my HTML clean. The only problem was that I needed a way to calculate the SVG sprite width and height for each element to scale dynamically.

To generate the SVG sprite from a source folder I used svg-sprite, a Node.js module that gathers the SVGS and optimises the output. It also allows you to output a .sass file to be used. So with that I generated a Sass file that calculated all the necessary widths and heights.

##Working with Wintersmith

The first thing I noticed about Wintersmith is that it, like a lot of other great Node.js projects, uses Jade. I don’t really like it that much, so I looked for an alternative. Nunjucks is a templating language heavily inspired by jinja2, which I was already familiar with. It looked fairly straight-forward, so I went with it. Looking at the examples of Wintersmith it was relatively easy to convert my HTML files to Wintersmith templates.

The only thing I had to do was to create a 404, about and contact page. That was it. Pretty harmless task since it already took care of most of my requirements.

As I said before, Wintersmith works really well as a Node.js module, so I created a watcher in Gulp that looks for changes and regenerates the whole blog on change. The great thing is that it only takes about 1 second for Wintersmith to do that.

##Converting content from WordPress to Wintersmith

Wintersmith is pretty clean in its article structure. It follows a convention that allow me to create a new article in a folder which contains the MarkDown file with the post. All the images that are used in the MarkDown file can be put in the same folder.

The challenge here was to get all the posts from WordPress, add the correct meta data in YAML format and convert the posts to MarkDown syntax while copying all the images. All the code snippets and internal URLs in the posts had to be changed as well.

I wrote a quick convert script for this and it saved me a lot of time. It was a dirty job, but I had to do it.

##Optimising all the assets

From the source folder all the assets had to be optimised before serving them to the browser. This happens after all the files are put in the folder that gets served. After which the server checks all the files and optimises them.

For image optimisation I used imagemin, a pretty quick module that minifies the images that get passed in. This way I don’t have to optimise the images myself before committing them.

For my JavaScript I used uglify after it had been bundled using Browserify and my CSS is shrunk with cssshrink.

To optimise the loading speed of my pages I extracted and inlined the critical-path CSS from my generated pages. This will allow the pages of my site to be loaded with visual content without blocking the loading with the external CSS file. To do this I used critical which scans my pages one by one and injects the correct inline CSS.

##Creating a server to serve my content

What I needed was a simple web server that could serve static files (which were build by my tasks), compress those files and create a fallback for pages that are not found. An easy way to get this done is to use express as the framework.

For serving content the serve-static middleware is really easy to use. For compression of the output I used compression. For the pages that are not found I wrote my own middleware that serves my own 404.html file I created.

All that was left was to build a middleware that handles my contact form submissions. I wrote up a little tool that handles the given data, puts it in an email and sends it to me. It responds with a simple JSON object telling the sender everything worked out.

##Deploying it all

I went a bit into deploying Node.js applications and came across dokku. It behaves like Heroku in a way that I can deploy my code on a repository that is hosted on my server and let dokku do the rest.

Once I push code to my dokku server through Git it will start to install all the dependencies defined in package.json. It will than execute the npm scripts I defined in my package.json file. It will build the site, optimise everything and test if it worked afterwards. Then it will switch my current running version with the new one. Perfect!

Now I can finally keep all my source the same on every machine and deploy my article whenever I want them to.

Have suggestions or found better ways to go static? Feel free to reach out on Twitter.

Hire Me

Mon, 23 Feb 2015 00:00:00 +0000

After a long time of hard consideration I decided to leave my current job. It’s an awesome place to work at and the management couldn’t be better, but I feel like I am moving in a different direction.

That said: ~~I am looking for a new job~~. I have found a fitting position. A big thank you to all who shared.

As I mentioned before, being stuck at my job is not something I want. Being unhappy is something I want to avoid and looking for something else seems like the best solution.

##What I am was looking for Currently I am largely interested in working on JavaScript applications, from in-browser web applications to server-side Node.js applications. I also love automating all the things and streamlining the development process, the less coders need to do, the better.

As much as I love working in offices, I am also open to working remote.

##Let me know if you know something If you might know a company that is looking for a JavaScript developer and wants to talk to me, please let me know by sending an email to hi@gaya.pizza. You can also reach me through my contact page or my Twitter profile.

Moving Gaya Design to Gaya Ninja Blog

Mon, 16 Feb 2015 00:00:00 +0000

Since 2008 I’ve been blogging with the name “Gaya Design”. Which is pretty weird since I am not even blogging about design and am not professionally a designer. It was time to make a move to a different domain and operate with a new name.

I am very proud to introduce to you: Gaya Ninja Blog.

##I am not a designer Ever since my blog took off I felt like I was stuck with the name I once choose to host my blog on. Even before gayadesign.com was a blog I kind of struggled with the name. It’s a name I made up a long time ago when I started getting into web design.

At that time I didn’t even know whether I’d go with a design or development career. I really liked both at the time, but went with development pretty soon, and I am glad I made that choice.

When I finally found the time to do something about this problem I began re-branding small parts of my online presence. My Twitter account has been renamed to @GayaNinja for a while now and I launched a website for my personal / professional profile at http://gaya.ninja.

##New looks The looks of Gaya Ninja Blog are not that different from what Gaya Design looked like. The logo is the same, and I basically use the same colours. I did change the layout and typography, making it more fluid using a grid system.

I believe that the new looks convey my message in a better and more readable way.

##Going static WordPress has been my blog engine on Gaya Design, but it felt like I was using it for the wrong reasons. I don’t like admin panels, configuring stuff in what seem to be endless forms and writing in a WYSIWYG editor.

Static website generators have become more popular over time, and since they come so close to front-end development work I took the plunge and dug into different generator.

The cool thing now is that I can write my posts in the editor I work mostly in and it’s blazing fast. No need for sluggish dynamic web pages to write my content in, but plain text in combination with Markdown.

##No traditional shared hosting One of the reasons I wanted to make something new was to experience deployment of applications in a very different way. Most shared hosting services just have simple FTP deployment and don’t support any custom packages you might want to use.

I wanted an environment where I could deploy code to and it would build and run my application, in my case my blog.

Writing my posts in static files also means I can add them to my git repository, making it an awesome way to see how a post evolved and not having to sync a local and remote database for my data.

##How I switched You can read about how I switched from WordPress to a static website in another article called Migrating from WordPress to Wintersmith.

##Let me know what you think I’d love to hear what you think about the new blog. If you have any suggestions you can tell my on Twitter or use my contact form.

Make Developing Front-end Projects in WordPress Work

Fri, 21 Nov 2014 00:00:00 +0000

Working as a front-end developer should be a job where you worry about the stuff you’re good at: creating HTML, CSS and JavaScript. In a perfect setting you don’t have to worry about the CMS or framework the website / app is going to use.
When the team chooses to use WordPress, you might be in for a struggle though. Separation between front and back-end development in WordPress is quite vague and is smeared all over the place.

This article is aimed to convince you why WordPress is bad to front-end developers, what has to be done about it, and finally how a better way of developing can be achieved.

TL;DR

Because of the lengthy nature of this article I am going to put the main point of the article in the following paragraph.

Front-end development for projects that will use WordPress is bad, but it can be fixed. You can do completely decoupled front-end development for WordPress without using or touching WordPress itself.

Why front-end development in WordPress is bad

There are a few things that smell when you dig into WordPress’ way of handling templates. The first thing that comes to mind when I think about front-end development is creating templates, styling them accordingly and making them interactive using scripts.

Idealy, the templates we create are generated after we’ve fed them with data and are compiled to some output. For browsers, this is HTML.

WordPress offers no real separation between data and template

Proven design patterns like the Model View Controller pattern preach that we keep our views away from collecting any data. The views, HTML templates with just a small amount of logic, are only fed with data which they can utilize. If it doesn’t have the correct data, it’s not up to the views to figure that out, it’s what the controller should do.

If you’d go about and request data from the system directly in your views you’re relying upon the system at hand. In WordPress we use PHP to get posts and loop through them, even requesting information about the posts as we go. This should have been done before the view was loaded.

We can’t move our code and use the templates in another project that doesn’t use WordPress. We’re too heavily coupled to WordPress.

Architecture in WordPress gets pretty awkward since we can’t really decouple front-end from server-side.

We’re front-end developers, and we’re using PHP

It’s rather strange that we’re being forced to use PHP when coding a theme in WordPress. This makes our project dependent not only on WordPress, but also on PHP. There is no way we can move our code to a Ruby on Rails project or a Node.js project that uses something like Handlebars to generate HTML.

We’re using a server-side only language, why keep stacking up different languages on top of our development work? Is keeping track of HTML, CSS, JavaScript, template languages and pre-processors not enough?

Where do you stop developing the front-end?

There is no real reason for a front-end developer to even have to use WordPress to work on a project. When the source of your templates have to be adjusted to the actual system it will be run on it’s not perfect.

Are you just going to deliver some HTML, CSS and JavaScript to a back-end developer and let them do the rest? That sounds a lot like the waterfall project method, just throwing stuff over the fence.

There is no way for you to simultaneously work on the same project without one of the parties having to integrate each other’s code.

WordPress forces us to follow their structure

The root of a theme has to at least contain a style.css file and an index.php file. It’s pretty weird that the information of the theme is stored in a CSS file in the root, while we might not want our stylesheet to live in this location. Why is there no configuration file that allows me to set these kind of parameters?

We can work around this problem, but still we’re forced to use this strange way of passing information. It’s cluttering our file structure.

Adjusting your work along the way is a pain

You’ll have to either work on the project that has been integrated in a WordPress theme directly, or deliver new lines of code and risk for the changes to be interpreted differently from what you meant them to be.

If there is one thing that’s bad, it’s having to run a complete WordPress install, import a database dump and setup WordPress to ‘just’ adjust a small problem in HTML, CSS or JavaScript.

Now imagine the project extending with new functionality. There we go again.

What we need for it to work

Ranting about a subject is rather easy if it’s in a really bad state, but saying what needs to be done is worth a lot more.

We need a way to template without using WordPress

There is a simple need to be able to start up a project from scratch without thinking about which Content Management System or framework will be used later. As a front-end developer you can decide to use a templating language which your tools can generate HTML out of.

This way we can prevent WordPress from even touching our work and still make our HTML powered templates and styling. You do have to keep in mind which templating languages can be used.

Have a way to create dynamic pages, generated from our templates

Without having WordPress to support generating our pages, we need a way to dynamically generate pages to be able to use a base template we can extend to generate different types of pages.

We want to be able to loop through simple data structures and output them dynamically through our templates. This test data we will provide ourselves.

Defining the data

Before we can start creating templates we have to define the data we want to use. This way we can create a layer between our views and the underlaying information. It helps the back-end developer too, since they will know what information you need on certain pages.

It’s also a good way to hand over your project to the back-end developers since they’re already informed of the information the pages need in order to work correctly.

This also be reversed if the back-end developer defined the available information beforehand.

All previous points have to work independent of any CMS or framework

The views, templates, styles, and JavaScript you make should be able to work in different environments.

When a change has to be made along the way, you only have to adjust your work and it has to be able to be applied in different environments without testing it there. In this case WordPress.

How to improve front-end development in WordPress

Luckily for us, more people struggle with seperation of data / logic and views in WordPress theming. Timber is a plugin that uses the Twig Template Engine to render HTML output.

Twig is heavily inspired by Jinja, which is also used by other templating languages used on different platforms. It makes for a good interchangeable way of templating.

Use Timber for view and logic separation

Timber will serve as a simple layer between WordPress’ theme approach and your templates. It will query data using its own methods in the theme’s PHP files and pass it to your templates.

The great thing about this is that we can forget about using WordPress altogether and let the back-end developer take it from here. We’ve finally created a separation between front-end and back-end.

Use Timber’s starter theme

In the plugin source of Timber you can find the starter theme. This gives you and the back-end developer a great way to start using Timber in WordPress.

I won’t go deep into the functionality of Timber. The documentation is very clear and the learning curve is quite low.

Twig.js to render templates

If we are going to stop using WordPress to render our templates, we have to start using another render engine. Since Timber uses Twig, we have to look for a front-end development stack friendly alternative.

With the popularity of build tools like Grunt and Gulp being used in development flows, it’s great to know that there is a JavaScript implementation of Twig. It’s called Twig.js and can be found on GitHub.

Use Twig.js to render your template files with mock-up data you provide.

An example of rendering with Twig.js

Node.js can utilize Twig.js, feed it mock-up data and save the *.twig files as *.html

Given the following Twig template file:

<html>
    <head>
        <title>{{ title }}</title>
    </head>

    <body>
        {% for item in arrayWithData %}
            {{ item }}
        {% endfor %}
    </body>
</html>

and the following script in Node.js:

var Twig = require('twig'),
    twig = Twig.twig;

var html = twig({
    path: 'path/to/template.twig',
    async: false
}).render({
    arrayWithData: ["Twig", "is", "fun!"]
});

Running the code would result in the following HTML in the var html.

<html>
    <head>
        <title>Title</title>
    </head>

    <body>
        Twig is fun!
    </body>
</html>

Use it in your workflow!

There is a Gulp plugin for Twig.js, and a Twig.js plugin for Grunt. You can use these to compile Twig files which can later be used in Timber.

This way you don’t have to use WordPress to create dynamic webpages.

My approach to developing front-end for WordPress and Timber using Gulp and Twig.js

In order to start working with Twig.js and Timber we need a way to convert our Twig templates to HTML and feed data to the templates while we do so. The next part shows an approach that can be used in combination with Gulp or just plain Node.js.

What the Gulp task will do

When creating templates for Timber I use the page template approach WordPress uses. This also means I’ll be naming my templates this way: template-*.twig. We only need to compile these files to see the pages we create.

We need a way to get these files, feed them some information about the site and optionally information about the page Twig is rendering at that point.

The task will do a few things:

Look for template-*.twig files.
Get the basic information.
Extend the basic information with template specific information if available.
Render the template file with the information it gathered.
Save the HTML version somewhere.

Installing dependencies

We need a few things in order for the script to work. Install them with npm.

npm install --save-dev twig underscore gulp

The gulp task

The following is the gulp task I came up with. Feel free to fiddle with it a bit and test is out by running gulp timber in the terminal.

I’ve placed an example of using only Gulp and Twig in a project on GitHub. It illustrates how to use the following task in Gulp.

var gulp = require('gulp'),
    Twig = require('twig'),
    fs = require('fs'),
    _ = require('underscore');

var paths = {
    views: "./views", //path where your .twig files are
    data: "./data", //path to the data .json files
    dest: "./dist" //destination of the html files
};

gulp.task('timber', function (cb) {
    "use strict";
    //standard function called in Timber templates
    Twig.extendFunction("function", function (name) {
        return "<!--- function called " + name + " -->";
    });
    Twig.cache(false); //disable cache to prevent HTML not updating

    var files = fs.readdirSync("./" + paths.views); //read all the files in 'views'
    files.forEach(function (file) {
        //if the file name doesn't match template-*.twig: skip this file
        if (file.substr(-5) !== ".twig" || file.indexOf("template-") === -1) {
            return; 
        }

        var template = Twig.twig({
            path: paths.views + "/" + file,
            async: false
        }); //read the file with Twig

        //read the base Timber .json file
        var data = require(paths.data + "/timber.json");

        //check it template-*.json exists
        var templateData = file.replace(".twig", ".json");
        if (fs.existsSync(paths.data + "/" + templateData)) {
            //if so, join its data with the base information
            _.extend(data, require(paths.data + "/" + templateData));
        }

        //replace .twig with .html in the file name, render the file and save the outcome
        fs.writeFile(paths.dest + "/" + file.replace(".twig", ".html"), template.render(data));
    });
    cb();
});

The basic timber.json file which is being referred to in the code can be used as a data template for the Twig template you can find in the Timber Starter Theme. It has the structure to get you going.

Adding your own data

You can add global data that has to be applied on all templates in the timber.json file in ./data/. To add template specific data you have to create a file with the same name in the ./data/ folder, but replace the extension with .json instead of .twig.

The bad parts about the solution

The only bad things I can say so far is that we’re tied to Twig since Timber uses that. It also follows a pretty stict data structure as can be seen in the timber.json file, but once you get to know the structure of the data Timber gives you, it’s not that hard to get used to it. Besides, Twig is almost 100% interchangeable with other template rendering solutions based on the same principles.

Conclusion and onwards

Using the approach discussed earlier you can separate yourself completely from the server-side of web development in WordPress. You can focus on creating templates, while the back-end developer can focus on providing the correct data using your crafted template files.

Now you can create a deployment flow with your back-end developer as to how he will receive your templates. The great thing is that is that you never have to fiddle with getting a WordPress setup running before you can test your own templates. Adjust, test and validate them so you can give them to your back-end developer to apply them on production.

Developing in a team that uses WordPress has just become a bit less painful.

Simple Node.js web server on DigitalOcean

Thu, 30 Oct 2014 00:00:00 +0000

With DigitalOcean you can deploy your very own cloud based server in a very short time. This makes is perfect for hosting web apps. You can use Node.js to run as a web server and serve files and responses to the client. Setting up a Node.js powered web server is relatively easy when using DigitalOcean.

In this article I’ll guide you from setting up a DigitalOcean droplet to running a simple HTTP static file server in Node.js.

You can use Node.js to act as a static file server. It receives a request for a file, and Node.js returns the file contents. It’s very basic and standard functionality you see in most HTTP servers like Apache and nginx.

In order to get the web server running we need to do four things:

Sign up for DigitalOcean
Create a Droplet from a predefined image
Install a Node.js web server on your droplet
Create startup script to run your application as a service

##1. Sign up for DigitalOcean

First things first, in order to follow this tutorial you’ll have to register for an account at DigitalOcean. With this referral link you’ll get $10 in credits for free!

You can skip this step if you’re already signed up.

Create a Droplet from a predefined image

Once you’re signed up and logged in to your account, you’ll end up on the list of droplets you own. If you’re new it should be an empty list.

Go ahead and press the big green ‘create’ or blue ‘create droplet’ button to create a new droplet.

Create new droplet in Digital Ocean

Enter a host name for your droplet. Choose a size and region.

The smallest size plan is big enough for most simple applications and the static server we’re making works great on this plan.

It’s probably smart to choose a region that is close to you or where the application is mostly used.

Now select the predefined Node.js image. It runs on Ubuntu 14.04 at the time of writing.

Select the Node.js image

Hit ‘create droplet’ at the bottom of the page and your droplet will be created.

Install a Node.js web server on your droplet

When DigitalOcean is done creating your droplet, you should receive an email with the ip address of the droplet, the username and the password. These are used to login to your droplet using ssh.

Open up terminal or something similar that enables terminal access to external server through ssh.

Connect to the server by executing the following line, replace username and ipaddress with the credentials in the email you got.

ssh username@ipaddress

Enter the password you got in the email. You should now be logged in to your droplet through ssh.

We need to make a place for the Node.js application and the folder with files that will be served. Create a folder called /var/www/ and navigate to that folder.

mkdir /var/www
cd /var/www

The application will be using npm for its dependencies. The application will essentially be a Node.js app which listens to incoming requests to the server while it’s running.

Connect is a perfectly fine middleware to handle those requests. We can add other middleware to connect so that it does more for us. In the example in the GitHub readme of connect you can see they use compression to compress the response. This is used as a middleware in connect. serve-static is the middleware that handles static file requests. We’ll use these packages in this example.

Init the project.

npm init

Answer the questions and then install the dependencies.

npm install --save compression connect http serve-static

The following simple server application script is based on connect’s readme, but stripped down for our needs.

Place to following code in a file called server.js. (By doing vim server.js)

var connect = require('connect');
var http = require('http');
var app = connect();

var compression = require('compression')
app.use(compression())

var static = require('serve-static');
app.use(static(__dirname + "/httpdocs"));

http.createServer(app).listen(process.env.PORT || 80);

To start the web server, execute the script using Node.js.

node server.js

All the files that are in /var/www/httpdocs will now be available publicly. You can adjust the folder name by adjusting it in the script. You can also put in an absolute path to a folder if you’d like.

To stop running the server (do so for the purpose of this tutorial) press ctrl + c.

Next up is making the server execute the script on startup or reboot. So when something goes wrong you don’t have to manually rerun the Node.js script.

Create startup script to run your application as a service

To run the Node.js powered web server as a service, we can use Upstart. Upstart provides an easy and scriptable way to add your own daemons.

It will run commands on startup and power down of the server, which will be perfect in this situation.

Create a file called node-server.conf in /etc/init/.

vim /etc/init/node-server.conf

The following script is an adjustment of Kevin van Zonneveld’s Upstart script.

Place the contents in the file that you just opened in vim.

description "node.js server"
author      "Your name"

# used to be: start on startup
# until we found some mounts weren't ready yet while booting:
start on started mountall
stop on shutdown

# Automatically Respawn:
respawn
respawn limit 99 5

script
    # Not sure why $HOME is needed, but we found that it is:
    export HOME="/root"

    exec /usr/local/bin/node /var/www/server.js >> /var/log/node.log 2>&1
end script

Note that at the end of the script /var/www/server.js is executed by Node.js. If you saved the file on a different location, you can change the path.

To start the service that was just created type the following command.

start node-server

That’s it!

Summary

You now know how to create your own droplet using DigitalOcean and how to run a simple HTTP server on it. To access the files through your Internet browser you can go to the ip address of your droplet directly.

Suggestions for a better, safer solution are welcome. Reach out on Twitter or use my contact form.

MarkPress: Markdown powered journal for WordPress

Tue, 05 Aug 2014 00:00:00 +0000

Markdown is used to quickly write a styled document with a simple syntax, great for taking notes or writing journals. MarkPress allows you to turn your WordPress install into an App to easily write and store Markdown notes.

What is MarkPress?

Starting as an idea by Coen Jacobs, and me wanting to do something with WordPress again, I started writing this little app.

Its requirements were simple:

Write some notes on findings you made.
Automatically save them somewhere
Enable tagging
Make it nice with Markdown
Available everywhere on every device

There were not a lot of apps that do all this, so the easiest thing was to quickly write a web app and let WordPress store the data.

And then, MarkPress was born.

Example of how you’d write a journal note.

How to install:

You can install MarkPress by searching for ‘MarkPress’ when adding a new plugin to your WordPress install.

The plugin is also available for download on WordPress.org’s Plugin Directory: http://wordpress.org/plugins/markpress/

Or download on GitHub:

Download the latest version
Upload contents of markpress to wp-content/plugins/
Activate plugin in wp-admin

How to use:

The app is really easy to use. Go to your WordPress install’s frontpage (not wp-admin), fill some Markdown content in the editor on the left and see the content marked up on the right.

Every 10 seconds the content of the post is automatically saved to the server, so no need to worry about that.

Hit the big ‘+’ button to add a new note.

Contributing

More information about how to contribute to this plugin can be found on GitHub:
https://github.com/Gaya/MarkPress

Having trouble?

You can shoot me an email with any questions on: hi@gaya.pizza or you can file issues on GitHub via: https://github.com/Gaya/MarkPress/issues

Better JavaScript Dependency Management with Browserify

Wed, 23 Jul 2014 00:00:00 +0000

Writing bundled JavaScript code for the browser tends to become a mess rather soon. We spend a lot of time arranging the code that has to be concatenated in the right order so every dependency gets loaded correctly.

Browserify can require dependencies for JavaScript like modules in node.js. This brings a lot of advantages to the way we can handle our required libraries.

What is wrong with plain JavaScript concatenation?

Most of the time when concatenating JavaScript files we’d list them all before running a concatenation task, making sure all the files are loaded in the correct order. We’d have to write out every single dependency by hand, especially when it comes to external libraries.

In a Gruntfile I’d first define a few paths to dependencies I got through Bower, npm or downloaded manually. Then I’d have to point to each file and make sure the order is correct.

src: [
    //libraries
    'bower_components/eventie/eventie.js',
    'bower_components/eventEmitter/EventEmitter.js',
    'bower_components/imagesloaded/imagesloaded.js',
    /* I DON'T LIKE DOING THIS! */

    //other files
    'src/!(base).js',

    //the base has to be last
    'src/base.js'
]

This might not look like such a big problem, but can be a pretty tedious task when you have to get new dependencies or when a dependency updates. The paths tend to leave a mess since most repositories have a different way of pointing to the main JavaScript files to include.

Another downside is that the files you want to include in your concatenation have to be “compiled” and include all the project’s code and its dependencies.

Requiring JavaScript modules in browsers with Browserify

Node.js uses CommonJS to include modules in your code. We can install packages using npm and require them in our projects as modules. We can put these modules in an object to use and we don’t have to worry about loading the correct files.

We can define which module the current file depends on so we can let CommonJS solve the rest. This, however, doesn’t work in the browser. Browsers can’t require files like node.js does.

This is where Browserify comes in and creates a wrapper around our required npm modules so we can use require() in the browser versions of our JavaScript.

var _ = require('underscore'); // > node_modules/underscore/underscore.js
var picturefill = require('picturefill'); // > node_modules/picturefill/picturefill.js

/* We can now use both objects as modules */

Browserify will bundle all the needed files into one and creates one output file.

Better coding through dependency management

Using Browserify also means we can use npm modules in our browser. If we, for instance, would want to use the package uniq: all we need to do is to install the package into our project executing the following line in your terminal:

npm install uniq

and place the following code in your JavaScript:

var uniq = require('uniq');

You can now use uniq as an object in your script.

Using Browserify from command line

You can choose to run Browserify from your terminal, but you can also choose to run Browserify as a task in your favourite task runner.

To use from CLI, install Browserify using npm:

npm install -g browserify

and bundle your package using:

browserify ./path/to/your/source.js -o ./destination/file.js

Using Browserify in Grunt

Install the grunt-browserify package.

npm install grunt-browserify

and setup the correct source and destination in the grunt config:

browserify: {
  dist: {
    files: {
      'destination/file.js':  ['path/to/your/source.js'],
    }
}

It gets even better using Browserify in Gulp

If you prefer to use Browserify in Gulp you can use the original package instead of a plugin. It’s even not advised to use the Gulp plugin for Browserify.

Add Browserify as a dependency to your project:

npm install browserify --save-dev

Require Browserify in your gulpfile.js and use the following code to add a gulp task:

var gulp = require('gulp'),
    browserify = require('browserify');

gulp.task('browserify', function() {
    return browserify('./path/to/your/source.js') //read the main javascript file
        .bundle()
        .on('error', function (err) {
            console.log(err.toString());
            this.emit('end');
        })
        .pipe(source('output-name.js')) //name the file
        .pipe(gulp.dest('./output/folder/')); //output directory
});

I added the .on('error') callback so that Browserify won’t break the loop when you’re using the task inside of a watcher.

Creating your own (local) modules

Let’s say we have a file called main.js. You can now include other files or packages with var package = require('name-of-module'), but we can also include our own modules pointing to the file.

If we’d have a module in a file called sum.js in the same folder as main.js we can require that module using var sum = require('./sum.js');. Note the ./ at the start of the path which is necessary for require() to know it’s a file and not a package which resides in node_packages.

We can make our object or function available as a module by using module.exports in our code. Here is an example of what sum.js would look like:

function Sum(a, b) {
    this.a = a;
    this.b = b;
}

Sum.prototype.calculate = function () {
    return this.a + this.b;
};

module.exports = Sum;

We can now use it in main.js like so:

var Sum = require('./sum.js');

var calculation = new Sum(400, 20).calculate();

This makes creating your own npm packages a lot easier and makes them available for Browserify use instantly.

It makes our code way more manageable and makes the writing of it a lot more structured.

A lot of libraries are also available through npm

Since the use of Browserify over Require.js or other methods is gaining a lot of ground, a lot of JavaScript libraries are also becoming available on npm. This is great news if you want to use Browserify, since it will improve our dependency management dramatically.

I am currently rewriting a few of my libraries to be available as modules through npm. Consider doing this too.

Wrapping up

With Ecmascript 6 around the corner and front-end development moving forward very fast, this way of dependency management is finally something to hold on to.

If you want to share your experience about creating npm packages and using Browserify for your module requiring in browsers, feel free to comment below.

Static Mockup Data for your Endpoints with Connect

Sat, 10 May 2014 00:00:00 +0000

While working on a frontend project you’ll easily come to a point where you need data from a webserver that will be retrieved through an Ajax call. Serving mockup data from those endpoints is a tricky thing when you don’t run your frontend project on a webserver.

Luckily there is a way to easily write middleware using Connect for NodeJS. Other great thing: works with task-runners!

Separation between front and back-end development becomes more important every day. We see projects grow bigger and tasks are assigned a lot better in development teams. While one developer can focus mainly on the front-end part of the project, the back-end developer will handle all the server requests.

We need mockup data for Ajax responses

When working on a front-end project which does a lot of Ajax calls to the server you might get stuck for needing mockup data.

We need a JSON response if we request information from an endpoint. Let’s say we need some user information when we do a GET request to /user/get/username.

We can write a script on our local development server to handle these requests for us, but we can also use NodeJS and Connect for this.

Using Connect as middleware to catch URLs

Connect can be used to intercept HTTP requests and give responses to the client. The great thing about this is that we don’t need to write a lot of code to intercept these requests.

We can use different task runners to run Connect and handle the middleware section for us. For the purpose of this tutorial I’ll be using Grunt.

Setting up Grunt

First you need to install Grunt. After that you must add grunt-contrib-connect as a dependency to your project.

Run in the terminal:

npm install grunt-contrib-connect --save-dev

Init a Gruntfile.js file. Now we can configure Grunt and use Connect.

Now we need to make it possible for Grunt to run Connect. The Connect task will start a webserver and serve your files through HTTP to your browser.

Load the task in Grunt using:

grunt.loadNpmTasks('grunt-contrib-connect');

Now we can use the Connect task. Enter the following basic configuration to make it work.

connect: {
    server: {
        options: {
            port: grunt.option('port') || 8000,
            hostname: "localhost"
        }
    }
}

Serving the server

When you let Grunt start Connect it will run the server as long as the Grunt task persists. So if we’d call Connect directly in the state we’ve set it up it will create a webserver and immediately ends it as well.

We can add a keepalive flag to the Connect task options, but we can also create our own Grunt task which starts the server and then starts a watch task. This will make sure the Grunt task keeps itself alive.

The reason I use watch instead of the keepalive flag is because I want to run the server as long as I am developing and changing the source.

By default Connect will serve the project root and its files as a webserver would. You can easily add dest: 'dist/' as an option value to serve the folder dist as the root for example. This will allows you to separate your source and distribution much better.

Creating the middleware

When you determine the endpoints to which your application can send Ajax calls to you can write a small middleware that will catch those endpoint URLs and serve static data. I choose to serve .json files from my disk, but I want to use endpoints like /user/get/1/ and /product/get/1/ and not put the files there.

It’s better for testing and separating front from back-end code to use the same endpoints in this stage as the ones your backend developer will implement. It’s also because I tend to forget to adjust the URLs later on.

Add the following template to handle middleware with Connect:

options: {
    port: grunt.option('port') || 8000,
    hostname: "localhost",
    middleware: function(connect, options, middlewares) {
        middlewares.push(function(req, res, next) {
            //stuff will go here
        }

        return middlewares;
    }
}

Connect will loop through a collection of middleware functions and handle then one by one. Before a middleware function has ended the developer can choose to either continue the chain or end it and give a response back to the client.

We’re pushing our own middleware function to the middlewares list. We get three parameters to work with: request, response and next.

Catching your endpoints

The only thing we have to do now is to read the response and act accordingly. We can get the requested url by reading req.url.

When the url is not an endpoint you want to catch you can let Connect continue in the middleware collection by returning next. That’s the last parameter Connect gives to your middleware function we pushed earlier.

Using res.end() we can give a response to the requesting client. The only thing you have to keep in mind is that you don’t return the next object.

I like to keep mockup data outside of my middleware code so I created JSON files that contain the data I want the webserver to serve. We can use grunt.file.read("/path/to/file.json") to get a file of your project as a string.

This all comes together to something in the line of this:

middleware: function(connect, options, middlewares) {
    middlewares.push(function(req, res, next) {
        var endpoints = {
            "/user/": "json-files/user.json",
            "/product/": "json-files/product.json"
        };
        var match = false;
        var fileToRead = "";

        Object.keys(endpoints).forEach(function(url) {
            if (req.url.indexOf(url) == 0) {
                match = true;
                fileToRead = endpoints[url];
            }
        });

        //no match with the url, move along
        if (match == false) {
            return next();
        }

        res.end(grunt.file.read(fileToRead));
    });

    return middlewares;
}

You can clone the example project I put on GitHub so you can run the webserver by entering the following command in the terminal:

grunt serve

Save time rewriting endpoints

With this example you can easily create your own endpoints and link JSON file responses to them. I hope this will give you a boost into trying more with Grunt and Connect.

Mocking up your data is a great way to start testing more easily and create a nice way to combine front with back-end later.

Compound Selectors for Better Class Names in Sass

Fri, 04 Apr 2014 00:00:00 +0000

There are a few class naming conventions you can live by, the problem with most of them is writing long class names that tend to give your CSS a messy look without compound selectors.

Luckily Sass now supports compound selectors which will make our stylesheets a lot easier and better to maintain.

Naming conventions

Web developers are always looking for a better way to create maintainable CSS for their projects. Giving class names to HTML elements can really get out of hand and reusable classes don’t always have the best names.

Semantics are just as important in HTML as they are in CSS. Making the CSS not dependent on the HTML structure, or at least as little as possible, is desirable.

Whatever convention you’re following, a structured one like BEM for example, really helps you in this process. Whether you like to construct class name by appending more segments, or following a pattern: Sass can now help you make your code even better.

Compound Selectors in Sass

Sass has the ability to compound selectors for your CSS. You probably already knew that you can append another class to a selector or a pseudo-element using the ampersand sign. Now we can also append parts of a class name.

.portfolio-items {
    margin: 1.5em 0px;

    &-item {
        border: 1px solid black;

        &-name {
            font-weight: bold;
        }
    }

    &-close-button {
        @extend .close-button;
    }
}

Will now become the following code:

.portfolio-items { margin: 1.5em 0px; }
.portfolio-items-item { border: 1px solid black; }
.portfolio-items-item-name { font-weight: bold; }
.button, .portfolio-items-close-button { /* styling */ }

This gives use the power of nesting our selectors without long selectors to match for the browser. It helps us maintain a modular approach to our styling without making a lot of clashing or duplicate style.

Nesting problem solved

Using this method we solve the problem of nesting to much in our Sass projects making long and a bit too specific selectors.

I hope you’ll start using this functionality more often. I have a lot of old code to refactor now!

Automating your JavaScript workflow using Grunt

Sun, 17 Nov 2013 00:00:00 +0000

Using tools like Grunt to improve your JavaScript development has been popular for quite a while. It’s not a surprise since it will truly improve your workflow and takes care of pesky tasks we so hate to do.

This article will go into detail about the way I like to use Grunt to improve my workflow and make it way easier to maintain and test my JavaScript projects.

Grunt manages tasks automatically which we would otherwise do ourselves with separate tools. Think in the lines of concatenation, minification and other tasks which can become a drag if we have to do them yourself. Grunt will solves this for us.

If you’re not familiar with using Grunt, there is a really good getting started guide on their site to get you going. It will immediately give you some insights.

What my workflow does.

It’s basically a way to separate my development and production versions of my script while not changing the source for either of them. There will be two versions of our JavaScript file in the end, one I include in the development version of the website, one for the production version.

While in development I want my script to give me as many debugging info as possible, run a few unit tests and is easy to debug when the console gives me an error.

I production I want the script to be reduced to minimal bytes, stripped of console.log messages but with the same complete functionality as the development version.

I’ll tell Grunt to watch my project. So it automatically concatenates my source scripts and runs a few unit tests every time something changes in my source files. Now I won’t have to tell Grunt to run each time I want to check the website if it’s working.

In the end, if I am happy with the result I’ll tell Grunt to build my project for production (and maybe even deploy it for me).

Setting up Grunt for development

In the development phase I only need to use concatenation and a tool which allows Grunt to watch my project.

I like to keep all my website’s assets in an “assets” folder. The following folder structure is used for this article:

assets/
    css/
    images/
    js/
    src/
        js/

In the root of your assets folder create a package.json file and a Gruntfile.js file. Grunt needs these to work. Put the following in the package.json file:

{
    "name": "project-name",
    "version": "0.1.0",
    "devDependencies": {
        "grunt": "~0.4.1"
    }
}

For the development part we only need two grunt packages: grunt-contrib-concat and grunt-contrib-watch.

Go to your assets folder in command line. Run the following commands to install these packages:

npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-watch --save-dev

You’ll see npm install all the dependancies of these packages. Great.

Concat setup in Gruntfile.js

Now we can move on to the Gruntfile.js. Place the following basics in the file:

module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });
};

This file is just basic JavaScript which is used as a configuration file. Let’s make Grunt load the tasks we need first.

Before the end of the modules.export function we need to include the following:

grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');

Now we can setup the tasks and how Grunt will be using them. First we’ll setup the concatenation. We’ll add configs to the object that is passed to the grunt.initConfig method. Add following configs after pkg: grunt.file.readJSON('package.json'),:

concat: {
    options: {
        separator: "\n", //add a new line after each file
        banner: "", //added before everything
        footer: "" //added after everything
    },
    dist: {
        // the files to concatenate
        src: [
            //include libs
            'libs/somelib/somelib.js',
            'libs/otherlib/otherlib.js',

            //own classes and files
            'src/**/!(base).js',

            //the last script I need
            'src/base.js'
        ],
        // the location of the resulting JS file
        dest: 'js/<%= pkg.name %>.js'
    }
}

What I like to do is to leave the options open but at least add a new line in between all the scripts which I want to concatenate. Banner and footer can become very useful, especially when creating jQuery plugins and you want to add noConflict compatibility.

Protip: Set banner to (function($){ and footer to })(jQuery); in grunt-contrib-concat to wrap your script with jQuery noConflict mode.

In dist we define the scripts which concat will combine for us and the path to where the script has to be distributed.

First I like to include all libraries I want to include in my script, then I include every file in my src folder except for the base.js file. I want this file to be included at the end since it handles my object creations and inits. You can easily adjust this to your liking.

When it’s ready the file will be compiled to js/project-name.js. <%= pkg.name %> will get the information we put in the package.json file for npm.

Watching the src folder

Like SASS and Compass, you can watch projects with Grunt. You can let Grunt perform tasks automatically for you when your source files change.

Add the following settings after the concat object we just added.

watch: {
    scripts: {
        files: ['src/**/*.js'],
        tasks: ['dev-watch'],
        options: {
            interrupt: true
        }
    }
}

You’re telling the watch package that it needs to watch for changes in all .js files in the src folder. If there is a change: execute the dev-watch task.

Note that we haven’t created the dev-watch task yet. So after loading the npm tasks at the end of the function register a new Grunt task:

//register the task
grunt.registerTask('dev-watch', ['concat:dist']);

The Gruntfile.js file should be looking like this by now. Check your file against this one.

Now, go back to your command line and run grunt watch. Adjust a file in your src folder. If you get something like this, you’re done with the first phase.

Example terminal output for grunt watch

If you want to can also add unit testing tasks to your watch task set. It’s a great time to run these so you immediately know if you messed up your scripts.

Optimizing the output for production

Once we’re ready with our development tasks we’ll move on to the production output. We want to combine and minimize our JavaScript files (also our external libs). You can read why minimizing round-trip times is a good practice.

We’re going to remove all the console.log since we don’t want those messages in our production version. After that we’re going to minimize the script and output it as the famous *.min.js file. We’re going to use grunt-remove-logging and grunt-contrib-uglify for this.

Execute these commands in the assets folder to install the packages:

npm install grunt-remove-logging --save-dev
npm install grunt-contrib-uglify --save-dev

Removing console.log messages

Sometimes we log messages in the console we don’t want the end user to read or there might be a certain browser which stops working when it comes across a console.log command. So let’s just remove them all in the production version of our script.

Let’s put remove-logging’s configuration in Gruntfile.js:

removelogging: {
    dist: {
        src: "js/<%= pkg.name %>.js",
        dest: "build/<%= pkg.name %>.js"
    }
}

We’re telling the task to pick our development version of the script and remove all the log messages and save the outcome to build/project-name.js. I am using a separate folder for my output so I can easily ignore this folder on deployment.

Uglifing the script

When all is ready we’re going to minimize the filesize and crop the script to it’s optimal size. We’re using UglifyJS for this. If you want to read more about how it works, check out the UglifyJS GitHub page.

Put the following in your configuration:

uglify: {
    options: {
        banner: ""
    },
    build: {
        src: 'build/<%= pkg.name %>.js',
        dest: 'js/<%= pkg.name %>.min.js'
    }
}

It tells UglifyJS to pick the file which has the console.log messages stripped and then save the outcome to js/project-name.min.js.

Combine it all in a new “build” task

First we need to load the newly used packages in Grunt:

grunt.loadNpmTasks('grunt-remove-logging');
grunt.loadNpmTasks('grunt-contrib-uglify');

Finish it of by registering a new task at the end:

grunt.registerTask('build', ['concat', 'removelogging', 'uglify']);

Go back to command line and let Grunt execute your newly created task.

grunt build

The complete file outcome can be found as a Gist.

Further improvement

From here you can start optimizing your front-end workflow. You can also add tasks for automatic image optimalisation, copying files, parsing SASS / Compass etc etc. There are a lot of great plugins available to use.

If you have your own workflow, or if you want to share your thoughts: leave them in the comments.

Happy Grunting!

Curse of the Open Source libraries and frameworks

Wed, 30 Oct 2013 00:00:00 +0000

The web development population has grown significantly over the past years. A lot of people are choosing development as their trade and make a good living out of it.

The number of people using frameworks or libraries to speed up their development, or solve the parts of development they can’t do themselves has increased as well.

Is it a good thing, or are we shooting ourselves in the foot? I will share my view on the matter in this article.

Learning to code

More and more students are choosing to go into development, but also people from other fields of work are switching to writing code. Webdesigners in particular are switching to be frontend-developer more and more.

Most good webdesigners know how to write HTML and CSS, so that’s a great foundation. The problem (in my eyes) is when people dive into learning Javascript by using jQuery immediately.

To me learning to code Javascript doesn’t work well when you start by using jQuery. jQuery helps you with a lot of cross-browser compatibility and will make coding Javascript a lot easier, but you’ll have to go back to plain Javascript some time in the learning process.

Go to Google and search for a Javascript question. Now replace the word “Javascript” with “jQuery”. People are clearly asking the wrong thing because they don’t know the fundamentals.

Missing out on the fundamentals

Learning through a library or framework brings with it a problem that arises a lot of the time; the separation between the foundation of the language they’re writing in and the library / framework they’re using seems to disappears.

You are, for instance, still writing Javascript when you’re using jQuery, and using jQuery’s way might not be the answer you’re looking for. In PHP we can say the same thing for the CMS’s and frameworks that encourage a certain way of working.

To me it’s important to understand how a website is build from the ground up. I tend to go deeper and deeper into web development technology to grasp the concepts of which our websites are build. This improves my understanding of what I am doing without just doing something and hoping it doesn’t break later.

When I started making websites I started from the beginning: writing HTML only pages, moving on to CSS, then PHP and from there I learned all the knowledge needed to create my own dynamic website. Much later in the process I started learning to use frameworks. For me this improved the understanding of what the frameworks do apart from the language and platform you’re writing in.

You can start learning through frameworks or libraries if you’d like, but at some point you’re forced to go back to the beginning and learn the true principles of programming.

Don’t get me wrong. Starting out learning using established frameworks like Symfony, Laravel and Grails will teach you some great principles. You’d have to know how to code before you dig into these frameworks.

Adding plugins to destroy your project

Before jQuery and similar libraries (which have been forgotten) we had to write most of our Javascript bottom up. This made it harder for webdesigners to get into coding Javascript next to their HTML and CSS. jQuery spawned a whole new group of coders who created their own Javascript powered pages.

This also unleashed a storm of plugins to the world. I too have released a few. These can help people with pieces of code they don’t know how to or have no time to solve. It’s very tempting to use them to solve your problem, but at the same time you don’t really know what the impact on your site is.

I am not only aiming at jQuery in this case, but also at software like WordPress, which has a large resource of plugins whom users can install. This gives the unexperienced user and builder the change to improve their site with a piece of code they don’t have to write themselves.

This means that you’ll most likely add some code and functionality to your site you don’t really need to have. This could make your site slower, bigger and break in some cases.

One of the worst cases I’ve come across.

This webpage loads 88 resources, counting 37 scripts. That’s an insanely large number. These guys have no clue what they’re doing.

Staying clear from them is better in some cases. It just gets hard to filter the good from the bad these days.

Paid themes and plugin overkill

I’ve bought templates on the internet to speed up the development process of a website. There are a lot of great ones out there. There is one problem though I run into every time, and that’s jQuery plugins overkill.

One of the themes loaded 15 (!) different jQuery plugins to empower the site. Ranging from menu / dropdown behavior plugins to table sorting plugins. They seemed to fix the problems at hand, but included way too much clutter and unneeded code to the webpage, making it very slow and heavy to load.

It also made the site hard to manage and adjust because it was very dependent on these libraries. And I am not even talking about updates that break the site.

Sticking with a library

The library or framework you’re working with may feel very safe and you know your way around it. Any problem you face you’ll reflect on the tools you’re used to working with. This doesn’t mean that it’s the best solution.

Take WordPress for instance. It’s a great tool for creating websites and has great plugins (also a lot of bad ones). It is however not the best solution for some projects I’ve heard about. I understand that a developer can get used to using a single CMS for everything, but there is really a lot more out there.

Cursing yourself

Plugins, development tools and everything alike have one common curse: a user base. People who will be using your product and apply it to their project. The problem here of course is that you’ll have to try and catch as many situations and exceptions as possible. This also makes it harder to improve your product when your users are not improving theirs.

You’ll see a handful of great products out there that I for one can not live without. The problem with some of them is that the people who use the package are not as experienced programmers as the rest. This might lead to the problem that the people behind the software product are holding themselves back for the sake of those inexperienced people. Backwards compatible is not the best choice here.

I understand that you can increase your user base by targeting the less experienced coders and providing them with support for all the previous applications, but how are you so supposed to improve your own product when you can’t get rid of the parts which are not as good?

Some closing words

I am not trying to tell you not to use frameworks and libraries. In fact: they can be super powerful if used correctly. Just use them wisely and do not go for a solution that might not be the best idea.

Go back to the basics and rethink your solutions so we can grow to become a better developers.

Using WordPress plugins as Symbolic Links

Thu, 10 Oct 2013 00:00:00 +0000

If you want to use a single plugin on different WordPress installs you might want to go for a symlinked plugin folder. That way we can have one codebase and apply it on multiple installs.

That would be great right? Sadly, WordPress doesn’t support this (yet). In this post I’ll explain how I got WordPress to accept my plugins as symbolic links.

The Problem

There are a few functions we use in WordPress when it comes to plugin development. The ones that are causing the problems we run into when using symbolic links are plugins_url, plugin_basename, register_activation_hook, register_deactivation_hook and register_uninstall_hook.

These functions break because they assume all the plugin files are physically in the plugin folder defined in WordPress. It will remove the path to the WordPress plugins directory from the file path we pass to above functions. __FILE__ is in a different folder physically on your system when you’re using symbolic links.

In the future we’ll surely see this solved in the core. You can follow ticket #16953 on Trac to see it’s progress. For now, you can use my solution.

When to Use Symbolic Links

Plugin development in WordPress can be a pain when it comes to testing. I like to have a single place to work on my plugin, but testing it on multiple installs at the same time.

Using symlinks can be the solution when you want to use one codebase and use it in different places.

In this case we’ve got a plugin in /Users/gaya/Git/awesome-plugin/ and want it available in /Users/gaya/Sites/wordpress-test/wp-content/plugins/

Open up terminal and run the following command (Mac OSX and Unix):

ln -s /User/gaya/Git/awesome-plugin/ /Users/gaya/Sites/wordpress-test/wp-content/plugins/awesome-plugin

Note that the target path has no trailing slash. Also change the paths to your situation.

The Solution: Symbolic Press

Download the Symbolic Press helper class on GitHub and place it somewhere in your plugin directory. I like to keep my external classes in a seperate folder from my own classes. Save the file as class-symbolic-press.php.

In this case my plugin is called awesome-plugin so I can assume a file called awesome-plugin.php is in this directory.

Include the Symbolic Press class in this file and create a new instance of the class passing __FILE__ as a parameter like so:

include "libs/class-symbolic-press.php";
new Symbolic_Press(__FILE__);

Every time you use plugins_url() it won’t include the path to your symlinked plugin folder. So first problem fixed!

What it does is this:

add_filter( 'plugins_url', 'plugins_symbolic_filter' );

public function plugins_symbolic_filter( $url ) {
    //set the path to the plugin file
    $path = dirname( $this->plugin_path );

    //get the basename of the path
    $basename = basename( $path );

    //check if this plugin is in the basename that is checked
    if ( preg_match( '/' . $this->plugin_name . '$/', $basename ) ) {
        $path = dirname( $path );
    }

    return str_replace( $path, "", $url );
}

It will check if the plugin name is found in the path and remove the file path (which won’t be removed by WordPress) from the URL. So now your assets will work again.

What about registration, deregistration and uninstall hooks?

Registration hooks in WordPress bind actions on it’s filenames. Since it uses the function plugin_basename it will bind it’s action on a filename which doesn’t exist.

What happens is that plugin_basename only removes the WP_PLUGIN_DIR and WPMU_PLUGIN_DIR from the file path, but since our plugin is not physically in either folders the path wont get stripped.

For this I created a small function in Symbolic Press: plugin_basename. Which can be called by using Symbolic_Press::plugin_basename(). Easy peasy.

The solution is a copy of the original plugin_basename but with two lines added before the preg_replace and a replacement for the preg_replace:

$sp_plugin_dir = dirname( dirname( $sp_plugin_dir ) );
$sp_plugin_dir = preg_replace( '|/+|', '/', $sp_plugin_dir ); // remove any duplicate slash
$file          = preg_replace( '#^' . preg_quote( $sp_plugin_dir, '#' ) . '/|^' . preg_quote( $plugin_dir, '#' ) . '/|^' . preg_quote( $mu_plugin_dir, '#' ) . '/#', '', $file ); // get relative path from plugins dir

How do I use the registration, deregistration and uninstall hooks?

When you’re using a registration or deregistration hook WordPress does no more than:

add_action( 'activate_awesome-plugin/awesome-plugin.php', $function );

For this you can use:

$plugin_basename = Symbolic_Press::plugin_basename( $file );

//bind the activation action
add_action( 'activate_' . $plugin_basename, $function );

Or the respectable static functions you can use to register these hooks.

Symbolic_Press::register_activation_hook( $filepath, $function ); Symbolic_Press::register_deactivation_hook( $filepath, $function );
Symbolic_Press::register_uninstall_hook( $filepath, $function );

Conclusion

It’s a workaround, but it works very good. Now you can go and test your plugins agains multiple installs without any problems.

You can also create a single place to update and maintain your plugins on your production environment. That might get a bit tricky, but that’s a completely different story.

Let me know what you think in the comments.

Looking back at WordCamp Europe 2013

Tue, 08 Oct 2013 00:00:00 +0000

Last weekend I went to WordCamp Europe in Leiden. It was my first WordCamp and I have to say; it was very awesome. Can’t believe I’ve never been to an event like this before and I should really start doing it more in the future.

I’ll fill you in on the experience, the speakers and give you my two cents of what I thought about the talks.

How I got into WordPress and going to WordCamp

When I started working at Merchandise.nl a while ago this conference was one of the things Richard (my boss) talked to me about. He encouraged me to go for the whole weekend and contributors day, even if I just wanted to go for the experience.

I didn’t know what to expect since the only things I had done with WordPress back then were a few themes, managing my blog and writing a few plugins here and there. Most of my experience was based of personal projects.

Since we have a lot of sites running on WordPress at Merchandise.nl it was quite logical for me to attend this kind of conference. So last friday, it was time to leave for WordCamp Europe in Leiden.

Day 0: Woo Ping dinner and whooping pubs

Friday was a little warmup for all that was to come. Headed out for some drinks at the English pub and for Chinese food at the Sponsor/Speaker/Volunteers dinner. It was a good lot of fun and I got to talk to a lot of interesting people from the WordPress community.

Of course we ended up at the English pub again and I stumbled back to the hotel at the end of the night. What a great start of the weekend!

Day 1: The Talks

After waking up with a huge headache and walking to the conference with Richard it was time to pickup our t-shirts (which we made in case you’re wondering). I decided that most talks in the “build” section would be most fit for me.

Unit Testing Like a Pirate - Ptah Dunbar

The first talk I joined was about unit testing in PHP like the title would suggest. It was a nice intro into unit testing in general but also how you could go about and write your own tests. Very interesting and important to people who are not doing it.

I’d like to see even more unit tests in my own projects, not only on WordPress projects. TDD is something that takes getting used to, but it’s important for the quality control of your product (if you have any).

For those who are interested here are the slides and resources to Ptah’s talk.

The Life of a Theme - Tammie Lister

A pretty straightforward talk from a designer’s perspective on how to take on a website project. She talked about the most logical waterfall approach to creating a website and it’s design.

Pretty good for people who don’t have a clue how to handle such projects. I expected a different approach though, but this method works for a lot of people.

Perfect Your Images Using WordPress - Marko Heijnen & Mike Schroder

Since WordPress 3.5 the image editor has been made into separate classes to encapsulate all the functionality. Two of those are specifically for the use of GD and Image Magick.

It makes resizing, cropping or manipulating images in your code just a bit easier. The great thing here is that it has integrated WordPress specific features like saving.

It was pretty interesting for me to see how they handled this because I am using Image Magick in one of our projects to gather the user’s input and create output images we can use to print on different products we sell. I’ll sure to be writing about that soon.

You can find the slides to perfecting image manipulation in WordPress on Mike’s blog.

Writing Secure WordPress Code - Brad Williams

Brad took us through the process of writing secure WordPress plugins and themes. He showed us the importance of sanitising input and escaping output in your themes / plugins.

I think stuff like this should be mandatory when writing plugins and I believe a lot of plugin developers are missing this kind of professionalism. As much as I knew most of the stuff Brad was telling us, I felt like it was the best talk of the day.

If we want to improve WordPress we should keep stuff like this and testing like Ptah explained in our workflows. The web is a scary place, we have to improve it so the foundation we stand on will be stronger.

You can find the slides to Writing Secure WordPress code here.

The after (and in between) party

WordCamp is a great place to meet people, which I did throughout the first day. I didn’t fill my time with going to all the talks, but I went to grab a beer now and then. It’s great to see so many people from different countries come together with a similar interest and have such a good time doing just that.

Had a lot of nice interesting conversations with people at the after party, but the music was kind of shitty and way too loud to have a normal conversation. The atmosphere was great though.

Day 2: The Speakers

Waking up the day after the after party was a lot easier than I had expected. I was ready for day two of WordCamp.

WordPress 3.7: Foundations - Andrew Nacin

Andrew is the lead developer of WordPress and was going through the changes that are going to talk place in the next release of WordPress.

One of the most interesting things Andrew told us about was that WordPress is going to have automatic updates. I am very glad security patches are getting pushed to some people’s websites, but I for one like to stage my projects before putting them on my production server. An update might just break a site, we’ve all been there.

We run over 30 WordPress websites at Merchandise.nl, so it’s not really an option for us to stage all our updates. So an auto updater might come in handy. Although I like how Infinite WordPress updates all our websites so I can instantly tell when one of the sites breaks.

Practical WordPress Accessibility - Bram Duvigneau

We tend to forget how important accessibility is on the web. Bram showed us the struggle he has to go through browsing the web. Bram was born blind and showed us how he uses his screenreader and let us actually see what he sees.

It’s hard to comprehend this part of the web for a lot of us. The best we can do is keep ourselves to coding clean and semantic HTML.

Bram didn’t have any slides (of course) and showed us what he talked about throughout the talk. It surely was one the most interesting talks to have attended this WordCamp.

To OOP or not to OOP - Nikolay Bachiyski

A great discussion, which has been going on for a long time. I tend to agree with Nikolay on this one.

A project can get out of hand pretty quickly and if you have been putting your functions over different files and try to get any logic in them things tend to get a bit messy and hard to follow. Everything gets named improperly with prefixes and data doesn’t really have a scope.

I don’t know if the WordPress development community is ready to elevate to a higher level of programming, but there are a lot of plugins (my older ones have the same problem) out there that are not meeting those standards.

View the slides to To OOP or not to OOP here.

Q & A - Matt Mullenweg

It was time for a round of questions to ask Matt Mullenweg who is the co-founder of WordPress.

Matt is a charismatic guy on stage and answered the questions very nice. It’s a pity the questions weren’t as good. I’d wish he had prepared a talk himself, but it was nice to hear the philosophy behind some discussions that were made.

Less is More: The Journey of happytables as a WordPress SaaS - Noel Tock

Noel Tock is the founder Happy Tables. A service that provides a way for restaurant owners to easily create a website specifically aimed for their audience with ease.

It’s interesting to see how they managed for change the looks and contenting process on WordPress in such way that it’s focused on the tasks of the restaurant owner. Very valuable information.

Real WordPress Security – Kill the Noise! - Dre Armeda

Dre went over some pointers on how you can increase the security of your website with just some simple techniques. He told us how important things like strong passwords, being careful with our information and updating your software are.

He also explained how some attacks go about and how we as WordPress users can prevent them, or at least make it harder to gain access to our websites.

It’s all pretty basic, but still very important. I found this talk very entertaining.

The Victory of the Commons - Joost de Valk

Joost ended WordCamp with a talk about keeping the open-source community a healthy place to live in.

It’s sad to see so many great developers contributing to the open-source community but not getting anything back. We give stuff away for free and we can’t make a living with it.

Joost presented us a way to change our strategy to make money off it while still providing to the open-source community.

Read more about the victory of the commons on his blog.

Day 3: Contributors day

On contributors day all the nerds got together to contribute to the WordPress project. What I mainly learned here was how to contribute and got some insights from the lead developers.

It’s great to see such a vibrant community and how we work to make the product better every day.

Closing words

I am so glad I went and I am sure I’ll be attending a lot more conferences in the future. It’s great that Richard is giving me the opportunity to go to events like this.

It was great meeting the speakers, crew, contributors and other attendees. You made this experience that much better.

How to start using Sass and Compass in 10 minutes

Fri, 20 Sep 2013 00:00:00 +0000

Lately I’ve been getting a lot of questions from people how to begin using Sass and Compass. Even though it’s pretty easy, a little push in the right direction is all you need to quickly start utilising Sass and Compass in your next project.

I’ll give you installing instructions, a bit of information on what happens and a sample project setup I use myself to get you started quickly.

What will Sass and Compass do for me?

With Sass and Compass you can generate optimised css output to use on your webprojects. It will take your .sass or .scss source files and compile browser readable CSS for you.

Since Compass helps a lot with handling other assets than just CSS, we’ll be using it to generate our CSS.

How does Compass work?

Most projects I’ve worked on have their images, CSS and other assets separated in different folders. Compass will help us organise our .sass or .scss code to work better with our other assets.

In a Compass project we’ll have a config file called config.rb in which the settings of the project are defined. Compass will read this and use the settings when compiling your css.

The difference between .sass and .scss

Only thing different about the two is the syntax. Both will be parsed by Compass. In this tutorial we’ll use .scss. A more in-depth article of which syntax to pick can be found here: http://thesassway.com/articles/sass-vs-scss-which-syntax-is-better.

What will we be doing?

This tutorial will take you through the following steps in understanding and setting up your project:

Install Compass on your computer
Use the test project
Watch Compass do its magic
Your first .scss
Trying out Compass’ helpers

##1. Install Compass on your computer

First we’re going to install Ruby. If you’re on OS X; Ruby is already installed (great!). If you’re working on a Windows machine you can grab RubyInstaller for Windows. Be sure to check the “export Ruby executables to PATH” box when installing.

More detailed instructions can be found in “Ruby for Newbies: Installing Ruby and Getting Started”.

Now we can install Compass. So let’s open up a Terminal (CMD on Windows).

On Windows:

gem install compass

On OS X

sudo gem install compass

Use the test project

Compass is installed and we can start using it to watch our projects.

Let’s create a folder somewhere on your computer. We’ll call it compass-demo for the purpose of this demo.

Download the Compass Boilerplate I created from Github and extract it in your compass-demo folder.

The folder structure of the project should look like this:

- compass-demo
    - assets
        - compass
            - sass
                style.scss
            config.rb
        - css
            style.css
        - images
            gaya-design-logo.png

assets is the root folder of all our assets. Later on you can for example add a Javascripts directory. compass is the directory we will be ‘watching’ for changes. Notice the config.rb file. That file holds all the settings Compass needs to compile the CSS correctly.

Watch Compass do its magic

We need to tell Compass to ‘watch’ our compass folder. This will make Compass look for changes to the files in the sass folder of the project. In this case we have a style.scss file.

Go to the compass-demo/assets/compass folder in your *Terminal *(or cmd). From here run the following command:

compass watch

It should say: >>> Compass is polling for changes. Press Ctrl-C to Stop.

Good, we’re now watching the compass folder because the config.rb file is in there. It’s contents look like this:

# Require any additional compass plugins here.

#Folder settings
relative_assets = true      #because we're not working from the root
css_dir = "../css"          #where the CSS will saved
sass_dir = "sass"           #where our .scss files are
images_dir = "../images"    #the folder with your images

# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded # After dev :compressed

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = true

# Obviously
preferred_syntax = :scss

You can see all the references to the different directories Compass will need in order to compile your CSS.

Your first .scss

Let’s open up the sass/style.scss file and add the following code:

@import 'compass/css3';

.shadow {
    @include box-shadow(#000 5px 5px 5px);
}

First we import Compass’ CSS3 mixins and then give the selector .shadow a nice box-shadow.

Now open the compiled css file in assets/css/style.css. You can see that Compass magically added all the CSS3 vendor prefixes for you.

Trying out Compass’ helpers

In the config.rb we also pointed out where our images are saved. This is because we can use Compass to get the url to our image, but also the width and the height. Pretty neat, right?

Add the following code to your style.scss:

.logo {
    background-image: image-url("gaya-design-logo.png");
    width: image-width("gaya-design-logo.png");
    height: image-height("gaya-design-logo.png");
}

You’ll see that the compiled CSS will point to the right image file and filled in the width and height in pixels.

.logo {
  background-image: url('../images/gaya-design-logo.png?1364137770');
  width: 102px;
  height: 87px;
}

Just start using Compass!

From here all I can tell you is to start using Compass and dig into Compass’ features.

It might be a good start to look for some in-dept tutorials, but you can also ask someone you know is great with Sass and Compass to fill you in.

I hope this quick tutorial made your Compass working environment possible.

An inspirational day at Yoast

Sat, 14 Sep 2013 00:00:00 +0000

Yesterday, friday the 13th, I went to Yoast for a day of coding, sharing knowledge and good old fun. It’s great to see that a company like Yoast can thrive when it’s most know for its WordPress plugin.

Let me tell you the impressions I got from Yoast, its people and a non standard environment.

Who is Yoast?

If you’ve ever made a website using WordPress it’s most likely that you’ve heard of the name Yoast. Joost is best known for his plugin WordPress SEO plugin. As the name suggests it’s a plugin that helps you have kick-ass SEO support on your WordPress website.

Yoast has grown to be a company that provides a lot of plugins for WordPress and started selling premium plugins a while ago. They also do website reviews and are working on releasing a lot of cool stuff later on.

What I did do there?

When I came in I was presented with a place to plug in my laptop (which is starting to feel older being from 2009) so I could start showing some projects I’ve been working on at Merchandise.nl. I showed Joost and his crew a WordPress plugin I had working on for a few days. More information on that pretty soon.

After a bit of talking we came to the subject of Sass and Compass. The developers at Yoast are coding stylesheets, but they’re not using enough Sass and Compass awesomeness to enhance their workflow.

Mini Sass and Compass workshop

Joost and his crew gathered around while I showed them some tricks and awesome Compass features. This really opened their eyes as to what is possible and I could see ideas pop up in their heads, which was a great thing to see.

After showing the great advantages of using Sass and Compass I did a hands-on part where showed them how to set up their development machines for Sass and Compass usage. What made it different was that I tried to solve an other developers’ use-case rather than the problems I face on my own.

It gave me room to try out some new tricks and show the developers how to go ahead and improve their CSS development using Sass and Compass.

Codeception try-outs

After that we got around to try Codeception for testing of websites. It helps you create acceptance tests, functional tests and unit tests.

We didn’t really have a lot of time to try it out, but it looks really promising. Can’t wait to get my hands dirty with it later. I bet I can make way better products using tests like these, not to mention updates on existing sites.

Wrapping up

At four ‘o clock it was time for a beer and reflect on the day. This surely is not the last time I’m visiting and I am sure to be collaborating with Joost on projects in the future.

Sass and Compass workshops

Returning home I got really excited thinking back about the short improvised workshop I gave earlier. I’d love to hold workshops for other development teams in the future.
Get in touch with me if you’re interested in such workshop.

Good design is not just the pretty picture

Wed, 28 Aug 2013 00:00:00 +0000

In the time I spend working in web development I had the chance to work on some great looking designs which were fun to work with most of the time. There is however a problem with many designs I see lately and that’s that they miss the fundamentals.

Maybe it’s weird to hear a design lecture from a developer, but I really think it’s good to see things from a different direction. I’ll give you my view on designs and how they lack some important things a lot of the time.

Let’s do the same thing the crowd does!

People tend to feel more comfortable in crowds and will act the same when they are together. This means that a lot of cultural elements we see every day are the same in some way.

Music sounds pretty much the same on every mainstream station. Fashion looks the same in different groups of people, making them easy to identify.

I’ve been seeing the same behaviour as far as design goes. Someone will create some new concept and it will get done a million of times over, one worse than the other. Choosing to copy someone is not bad, but just for the sake of it being “the latest thing”, that’s bad.

What I am aiming at are sites like dribbble and Awwwards. You’ll see a trend growing popularity on either of them and after that you’ll see a ton of websites with the same look and functionality without even considering if it will work properly for the target audience.

You’ll not be the one using the site

And your client is also not the target audience. Your client’s clients are the target audience. So whatever you might consider “useable” or “the way to go” may not apply to the end user. You’re not here to impress yourself, your designer buddies or the client. You’re here to impress and work your magic for the end user.

A lot of stuff that we come across on a daily basis might be very logical to use web makers, but not for the end user. A super large header carousel or a huge picture with a little caption on top of it has no function at all to the end user. You might impress some hip web making kids, but the end user won’t get it most of the time. He might even get confused and skip the website he just visited, just because he doesn’t know what he has to do with it.

The best working websites are the ones that are adjusted to their end users, not their creators. Design seems to loose focus on the target audience a lot of the time.

Stop overcomplicating things

Just because something looks better doesn’t mean that it’s better. Just because an important element looks better in a certain part of the page doesn’t mean it’s logical to put it there.

A good design always starts with some sort of wireframe where the layout and structure of the website is put together. In this layout you can see where the important parts of the page will be. You’ll also get a feeling of what the user will be drawn to. Huge headers and useless elements will not help the end user is most of the cases.

Something I also see happen a lot is changing the way people have to input information in a form. Users are used to filling out forms and picking choices in some ways that you just don’t want to change.

A form should be clear and all the elements should be clear at a glance. When an end user will struggle with a slider to pick an amount or if the user has problems filling the form out in any way there is a great chance that you lost that sale, and that’s not what you want.

Changing the user interface is fine, as long as it’s not too far from what they are used to. It shouldn’t be a puzzle how to use a website or app, it should be understandable just by looking at it.

Measure your design

There are tons of ways to see if your design works. One example are heat maps which track how many times users click on a part of the page. This will give a lot of insight in the importance of buttons and might bring parts to your attention that shouldn’t be clicked on as many.

Another way is to measure the path that users follow to get to the desired end you want them to go. This will help you understand how users find what you’d like them to find. If you want users to put products in their shopping cart, then you’ll have to track how users get to the point of adding the product to their carts. This will give you insights in how the design and structure flows.

Once you find a great way to measure your design you can start to improve it on functionality. Now you can test and feel the improvements you can make for your end users and see the visitors and sales rise instead of not getting your product of the ground at all.

Closing

A good design doesn’t need a pretty picture, but it will sure improve it if the fundamentals are good. It’s a shame when great artists make such nice elements but don’t put them to great use.

I am testing out multiple ways to measure design and website performance and will share my findings with you later.

Let me know what you think on what I wrote in the comments below the article.

Stuck at your web development job? Break your routine

Sat, 15 Jun 2013 00:00:00 +0000

Getting stuck in the same cycle at work can be fatal for your creativity and motivation to go on. If you’re doing the same trick over and over again, project after project, you will find yourself out of energy pretty soon. I’ll try to explain what might be going wrong and what to do about it in this article.

Sailing in the comfort zone

Back when you started your web development job everything was exciting and new. All kinds of new problems and challenges arose when you got projects to work on. This feeling of challenge will last for a few years until a point where you feel you’ve established your workflow.

When this happens you’ll feel good about doing projects and will probably deliver great stuff to your clients. I found that projects were even beginning to get dull and thought there was nothing left for me to improve or figure out. The challenge was gone, but the products were good.

The problem here is that you might have the feeling that you hit the ceiling when it comes to knowledge, and don’t know what you can do to improve your products.

Stop the routine, try something different

What most people do when they get the same kind of project that makes you go “Time to reinvent the wheel again.” is to read web development blogs that discuss the latest and greatest.

It’s a good thing to fool around with the demos that are available everywhere and get your hands on the code yourself. This doesn’t take away the fact that there are still projects on your to-do that you have no interest in doing, but you kind of have to. It does take away the edge.

If the company your work for allows it, you could try to get a completely different project from time to time.

Try to make a mashup of services, or try to make a service yourself.
Create a completely different website for once.
Start a blog and write down your thoughts and ideas to share them with the world.
Creating apps for devices and other applications can be a great step away from your routine too.

Is the company you work for only creating websites for clients with a CMS to back it and your only task is to convert design to code? Then you might be in trouble.

Is the company not willing to give you space for making your own stuff aside from what you normally do? Ugh.

From what I’ve experienced before is that it will kill your creativity massively. Your motivation will go down the drain as well. You’ll become a tool for the company, not an inspirator or activator you’d want to be.

Talk about being stuck

The hardest part for some to accomplish is to talk about what you’re feeling and doing. It will relieve you from the stress of worrying about stuff that bothers you at work. Talk to your co-workers on what you think is killing your creativity and that you want to try something new.

The most important people here are the ones that make the decisions about projects and what will be done. Most of the time this will be your boss(es) or project manager (if you have any.)

Trying to convince them you have to break the cycle shouldn’t be too hard if they know what is best for their company. It’s practically impossible to give a person the same thing to do every single time and expect them to be happy and motivated about it. If we wanted that, we probably would have chosen a different field to work in. For some people it works, but you can’t expect everyone to be like that.

Some will try to look for different project for you to work on, some will give you room to explore new trends / techniques around web development. Others will not see the problem and make you do your job the same as always, in that case they’re just idiots who refuse to listen.

Have meetings about projects

Like talking about being stuck, it’s oh so important to have meetings about the projects you’re working on. Especially when you’re working with a team that involves more than two people.

Plan meetings, or just walk over to each other and talk about what you’re doing. The best way to look for new solutions, tackle new problems and think about great new features is to talk and discuss a project with the whole team.

It’s no use when one part of the team is left out of meetings, especially in the beginning. Sure, when a meeting is about the design details a developer is less necessary, but when talking about solutions to the client’s wishes it’s more than usual to be part of the process.

Try and get things as clear as possible before even making a mockup, wireframe of design. A developer can help you see things from a different perspective and might even tell you a thing or two you never knew about. We can inspire designers to create something new, thus creating something new and exciting for the developer to do too. This also makes your work as a company stand out.

If you need to, change jobs

You feel you’ve tried everything and nothing is working to improve the diversity of your job, there is always one thing you can do: change jobs. A while ago I had to change jobs, which at the time I was really bummed about. Even though I was stuck and didn’t feel like I could get away from it I felt I could hang in there.

Change gives you room explore and try new things. The grass is always greener on the other side for sure, but it’s the truth when you feel like you’re stuck at your current job and nobody wants to listen or do something about it.

There are enough companies around that want to hire web developers, and not only agencies that create websites. Keep that in mind: you’re valuable.

Faking a top-level domain name for local development with Apache

Tue, 09 Apr 2013 00:00:00 +0000

Developing a website on your local webserver environment can become complicated when it comes to URLs. Not every CMS (looking at you Wordpress!) has relative paths to their content. These full paths get placed in the database, which makes it harder to test and create content with pointers to wrong URLs.

This guide will tell you how to fake a top-level domain name so you can redirect any domain name to your local development environment and keep your source code in separate folders.

What we will be doing:

It’s actually easier than I thought. There are a few things we need to do:

Have a folder where our source code is in. Basically the root of your website.
Have the virtual hosts file of your Apache installation point to these folders with a few rewrites.
Redirect a top-level domain name to your testing webserver’s ip address.

Before we start. Get a local development environment.

You’ll have to have a working local web development environment. An Apache environment in this case. Be it your native Apache on your machine, MAMP or WAMP. Just install one and have a development environment running.

Create a folder with the source.

I personally like to create a folder with all my web projects in a root folder. On OS X I went for: ~/Sites/www.domainname.com. This can be any domain name you want it to be. Let’s stick with this name for this example.

The name of the folder with the source will be the HTTP address later on. So; making a folder called: thisisawesome will be http://thisisawesome later on.

Let’s continue shall we. Put an HTML file in the source folder called index.html. I created a sample HTML file:

<html>Hi, I work!</html>

Adjusting the virtual hosts.

First we have to find the httpd.conf file of your Apache installation. On Mac OS X /etc/apache2/httpd.conf using MAMP it’s typically /Applications/MAMP/conf/apache/httpd.conf, with WAMP it should be in the installation folder too. Open that file in a text editor.

Find this line: # Virtual hosts and remove the # at the beginning of the next line so it says something like:
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf (this is obviously for the MAMP version)

Now open and edit the file in the line you just uncommented.

Replace the content for the following:

NameVirtualHost *:80

<Directory "/Users/username/Sites/*">
    Options Indexes MultiViews FollowSymLinks Includes
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>
<VirtualHost *:80>
    UseCanonicalName off
    VirtualDocumentRoot "/Users/username/Sites/%0"
    ServerName %0
</VirtualHost>

Fix the folder paths if you went with a different structure. Don’t forget Windows uses different slashes in folder paths!

Make sure you restart Apache after this so it can start using the vhosts configuration.

If you’re using MAMP; preventing port 8888 in URLs.

As you might have seen it says we’re listening to port 80 in the vhosts configuration, this is not by default in MAMP. So we’re going to map MAMP to port 80.

If you have a native install of apache running; open terminal and type: sudo apachectl -k stop

Now open MAMP and click on “preferences”. Go to the “ports” tab and change the the port number to 80.

Change Apache port to 80 in MAMP

Save and restart MAMP. No more port 8888 in your URLs.

Making your computer redirect domain names in the hosts file.

There are a lot of ways you can change the DNS to think any domain name belongs to another ip-address, but in this example we’re going to use the good old hosts file.

Open up your hosts file in a text editor.

On Mac: /etc/hosts

On Windows: %SystemRoot%\system32\drivers\etc\hosts

Add this line at the bottom:

127.0.0.1        www.domainname.com

Now open your browser and go to “www.domainname.com"

When you have Apache running you should see this now:

And that’s it! Easy and effective. Hope you enjoyed my method of local development for top level domains.

Vertical rhythm on DOM elements with dynamic heights – Keep the Rhythm

Tue, 02 Apr 2013 00:00:00 +0000

That is a lot in one sentence, but basically it explains it all. Maintaining a vertical rhythm is hard enough by itself and takes a lot of time and thinking to accomplish.

The problem with maintaining a proper rhythm are objects (like images) that have dynamic heights. Like the images on this blog, or when you have clients uploading their content which isn’t perfectly resized / cropped to your line-height.

For this I created a jQuery plugin that fixes the rhythm: Keep the Rhythm.

Rhythms are sexy and make the web a better place. It makes it way easier to read the page and it will look very balanced at the same time. It might be a bit of extra work to create a vertical rhythm, but it’s really worth the time.

What is a vertical rhythm?

Vertical rhythms make sure the text and elements on your page are aligned to a baseline rhythm. Look at it as if you had a notebook with line, these are the guides we write on.

You can get the concept of vertical alignment pretty quick when you take a look at the example.

How can I create a vertical rhythm?

There are tons of website where you can generate your vertical rhythm CSS so it does all the calculation for you. What I like to use is Compass’ vertical rhythm mixins. Still not using Compass? This might be a great opportunity to. Vertical rhythms are a breeze when you use Compass.

What does Keep the Rhythm do?

Maintaining a vertical rhythm using line-heights is pretty doable, but there are also inline and block elements that don’t have their heights set to a rhythm. Of course the most pesky ones in this case are images.

Imagine you have a baseline of 24 pixels and the image is 50 pixels tall, this means your image is 2 pixel too tall, or 22 pixels too short. Keep the Rhythm will fill this gap for you with paddings (or margins) so the elements has a perfect rhythmic height.

It fixes this:

Incorrect Rhythm, overlap marked in red.

To this:

It does not only fix images, it also fixes block elements like iframes. Which will come in handy when embedding media from Youtube or Vimeo.

Responsive.

This script fixes the vertical alignment of elements that get resized because of a responsive layout too. This will work on very object that changes size on the window’s resize() event.

How to use?

First thing you want to do is to include jQuery and Keep the Rhythm in your webpage. Place the following code in your tag or before the end of your.

<script type="text/javascript" src="path/to/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="path/to/js/jquery.keeptherhythm.js"></script>

Then, on $(document).ready(); or $(window).load(); call the function using a selector. Define the baseline in the options.

$(document).ready(function () {
    $("div.rhythm").keepTheRhythm({
        baseLine: 20
    });
});

$(window).load(function () {
    $("article img").keepTheRhythm({
        baseLine: 20
    });
});

That’s basically it! The padding will now be added automatically.

Use window.load event for images

Because images get their height and width set after they have been loaded it’s best if you use the .load() event of the window. It’s best to always perform the rhythm fixes after this event so you can be sure that the images have their heights set.

I want to use margin instead of padding

Well, you can. Just pass an extra option value to the function call:

$("element").keepTheRhythm({
    spacing: "margin"
});

The element shouldn’t be aligned to the center

There is also an option for that, it can be “top”, “center” or “bottom”:

$("element").keepTheRhythm({
    verticalAlignment: "top"
});

Conclusion

Hopefully this little plugin will help you maintain a perfect rhythm and keeps your readers happy. Let me know what you think and contribute on GitHub if anything is wrong with the script.

Documentation reference

A new life for Gaya Design, the redesign part 2

Wed, 27 Mar 2013 00:00:00 +0000

Since my blog is based around web development and I don’t want to be behind on things I decided it has time to kick new life into my blog. I needed a new format which would allow short posts and have a blog that loads fast.

I needed a redo of the website. From the ground up.

A while ago I started to regret the fact that there are so little posts on Gaya Design lately and realised I never got / made the time to create content for this blog. It takes a lot of time researching new stuff and getting to know cool new findings around web development.

As some of you might have already heard, I switched jobs and so far it has been awesome. Working here makes me realise just more and more how important it is to inspire myself to get to know new stuff about web development. You can get stuck in a pace at your job where you just do the same trick over and over again. It’s time to step out of that comfort zone.

Gaya Design has been a great escape from that before, and will be again, but I needed a different approach since I also learned a thing or two the last couple of years as a web developer. I will get back on the subject of getting stuck in your comfort zone in a later post.

Time for something fresh.

The signature chimneys of the old design

The previous design was made in a time when I wanted to show off what I could accomplish with CSS styling a few funky ideas. I really went all the way with cool gadgets and images not thinking about the main point of the website, which was the content. I am not a designer as profession, but I like to do it as a hobby, and that’s what the website portrayed.

I got a lot of great feedback at the time and make some changes along the way. Implemented some easter eggs (Konami code anyone?), included some third party api streams and fixed some styling along the way.

Since I’ve been working in this business I came across various trends and saw what worked and what did not. I summed up the good and the bad trends before creating my new website and came with a list of requirements:

No clutter.
Focus on the article, the rest is not so important.
Has to be very clean and subtle.
Needs good to read typography.
Must be responsive and adjust to screen sizes.
Retina optimized.
Need to be aligned to perfection.
Oh, and a new logo / style.

Where to start a redesign?

It was clear that I had to really take the time and dive into what makes a website work and what makes it clean and good to read. Just a while before starting on my redesign I got sucked into responsive webdesign (way too late!), but it immediately made it clear that I have been doing stuff the wrong way all along.

The one thing I learned was that composing to a vertical rhythm was one of the best things I could be doing to get a readable blog.

It became clear to me that it makes developing a responsive layout a lot easier. So I set a baseline grid on my new Photoshop document and started drawing some ideas for how the content would come to look like.

When I was done with typography and layout of posts I had to think of a theme for the blog. Since I’ve been into geometric patterns for a while I thought it would look great in a clean design. I started testing out some cool patterns I came across and my logo on accident when I was drawing patterns to test out. I quickly made a vectorized version to test it out in various sizes and positions. I love how simple and beautiful geometric shapes can be and choose to go with this style.

Switching to “design in browser”.

While Photoshop and any similar tool are great for drawing websites and making static content it also leaves a lot to the imagination when you consider it has to become a website some day. Photoshop doesn’t know what an element is in your web browser, it doesn’t know it can scale, it doesn’t know about paddings and margins and surely doesn’t know anything about viewports.

These tools are basically not made to do this, it has been used for this purpose though, thus creating layouts that work really great with the content used for the design, but get crappy 8 out of 10 times once the real content starts to fill the website. Best case scenario designs are easily made and look awesome, but sometimes the real functionality of a web browser is forgotten and contents end up being different in different settings.

If you keep these problems in mind while designing in Photoshop it’s fine, but you really have to find a way to illustrate how the design should react to the browser. I got to a point that made it kind of useless to align my designed content to the baseline over and over again when I changed an element or if I wanted to shift some content in-between elements. Why not design in a tool which knows all about the behaviour of browsers, the browser itself?

The perfect design companion.

Think about it. The browser knows about line-heights, stacking of elements, border, paddings and margins. The browser knows it’s limits and has the behaviour you are designing for.

I got to writing some simple HTML and started to structure my document one section at the time, making a flat and blank canvas for me to paint the ideas I made in Photoshop in the browser.

The layout and styling all happened through the mobile first principle, first making everything work in the smallest version (which is everything smaller than 420px in this case) and then scale it up one step at the time. For viewport sizes I picked an iPhone in portrait mode, one in landscape, an iPad in portrait and iPad in landscape. I set the start and endpoints around those widths, and maybe they’re not perfect, but I thought those were great points to scale the layout to another version.

I styled the elements one by one and ended up with a design that was already defined in my Sass files compiled to CSS. So that was covered. No double work here.

Javascript goods.

The new installation had to be smaller and better. I choose to use jQuery because a lot of Wordpress plugins choose to use it too, and why include another library if jQuery will be included anyway?

Things I know I would need to do in Javascript:

Fire events on breakpoints; let’s call this “responsive javascript”.
A slider that works on touch.
A syntax highlighter.
Something to maintain my vertical rhythm.

For the breakpoints callbacks I used jRespond. It allows you to register breakpoints and fire events once you enter or exit the width range. Will handle your Javascript events nicely.

As a slider I picked iosSlider. It works perfectly on all devices and does exactly what I need it to do. If you’re making sliders on your website, give this slider a try. It is one of the best ones out there and really worth the money.

The syntax highlighter I found was Prism. It’s really lightweight and was a nice way of styling. I also found a nice Monokai colourscheme to go with it.

For the vertical rhythm I needed something that fixed the breaking of vertical rhythm and but the elements that had the wrong height back in position. For this I wrote my own solution, which I am going to share with you very soon.

Redoing my Wordpress installation, from the ground up.

Because I made my old theme / website when I wasn’t as familiar with web development and Wordpress development as I am now I wanted to start over. I mean, start from the beginning with a totally new install.

I had some plugins running on my old install that I could easily do myself with some hooks and filters, but there are a few ones that I used in the new installation.

Yoast’s SEO plugin, Gravity Forms for my forms, WP Types for my custom posttypes and fields.

The future

I hope to have given you a closer look at how I solved the problems that go with creating a new blog. I also hope this new theme and total redo will breathe new life into my blogging and makes me write a lot more articles to share with you.

Let me know what you think about this layout and how I solved things.

Retina Sprites for Compass

Mon, 14 Jan 2013 00:00:00 +0000

Creating CSS rules for retina sprites and background images can be a drag. I wrote a quick mixin that will help you with this. It allows you to use sprites in Compass with added retina variants. Works just like the normal sprites helpers, but has been made a lot easier with these mixins.

Take a look at the example to see the results.

The problem:

You want your site to serve retina images to retina displays, but not to non-retina ones. This mixin / solution will make it very easy for you to use sprites and let Compass generate the mappings of the two different sizes.

Since we have to develop sites that serve retina images and background-images our sprites and background-image approaches might get a bit cluttered in our CSS. Using just one call, this mixin will know which image has to be served to the browser and will also resize it to show as if it was in your normal image dimentions.

How to use:

First thing you’ll need to do is to download the mixins and put them where your scss / sass files are located. Notice the underscore at the start of the filenames, this will prevent Compass from compiling these files to CSS.

Include the mixin in your SASS/SCSS file using:
@import "retina-sprites";
Create two folders in your images folder of your Compass project. By default there are icons and icons-2x.
Save your sprite images in the folders. The pixel-ratio 1 variant in ./icons and the retina variant in ./icons-2x. Make sure there have the same filename.
Use the sprite in your SASS/SCSS using: @include use-sprite(filename). (Note the missing .png, this is not needed.)

It’s really that easy!

What it does:

Compass will create a nice sprite image from the images you put in the folders. Make sure you only use PNG files for the best result.

Using just the name of the file Compass will know where the image is located in the huge sprite image it will generate. The mixin will also get the retina variant if the browser is running in a pixel-ratio 2 environment.

This is the generated CSS from the example:

SCSS:

.sprite2 {
    @include use-sprite("sprite2");
}

Becomes, CSS:

.sprite2 {
    background-image: url("../images/icons-s44ec97e90e.png");
    background-position: 0 -25px;
    background-repeat: no-repeat;
    overflow: hidden;
    display: block;
    height: 25px;
    width: 25px;
}

@media (-webkit-min-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 2) {
    .sprite2 {
        background-image: url("../images/icons-2x-s93dce01c9d.png");
        background-position: 0 -25px;
        background-size: 45px 95px;
        height: 25px;
        width: 25px;
    }
}

The nice thing about this is that the browser will only get the sprite image it needs:

Non-retina:

Retina:

Bonus: retina background-images

With the same principles of the sprites I created a mixin that sets the background-image and it’s retina version.

How to use retina background-images:

Include the mixin in your SASS/SCSS file using: @import "retina-background-image";**
**
Put a pixel-ratio 1 version and a retina version anywhere in your images folder.
Apply the style using: @include background-retina(file-normal.png, file-retina.png);

The following code will generate:

SCSS:

.background {
    @include background-retina("background.gif", "background-2x.gif");
}

Becomes, CSS:

.background {
    background-image: url('../images/background.gif');
}
@media (-webkit-min-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 3 / 2),
(min-device-pixel-ratio: 2) {
    .background {
        background-image: url('../images/background-2x.gif');
        background-size: 25px 25px;
    }
}

Conclusion:

Let me know what you think about the mixins and if they are useful to you.

If you have anything to add, put it in the comments or let me know on Github.

Happy Sassing, and tell people to stop using LESS ;)

Gaya

jQuery plugin: Fullscreen Background

Wed, 25 Apr 2012 00:00:00 +0000

If you’re a webdeveloper or designer I am pretty sure you’ve run into the problem of people wanting to have “fullscreen content” or just background images that will stretch in the most optimal way to the users screen.
Lately I found that a lot of people are asking for fullscreen backgrounds, videos and other types on stuff. So to prevent myself from reinventing the wheel over and over again I made a small jQuery plugin, and thought you guys might like it too.

So here it is: Fullscreen Background for jQuery.

How to use.

And using it is so easy; anyone can do it!

Oh, and it works in every browser I could test it in. (IE7 and higher, Firefox, Opera, Safari and Chrome)

Here’s a short step by step installation guide:

Put the following code in the section of your webpage:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fullscreenBackground.js"></script>

Have the following structure in your HTML (or something similar):

<div class="content">
 Content goes here
</div>
<div id="background-image">
 <img src="path/to/img.jpg" alt="" width="800" height="600" />
</div>

Remember to define the width and height of the images! This is important.
Then, in your CSS. Make sure the content (not the background image container) is absolute and has a higher z-index than 1.
Finally add this in a piece of Javascript, preferably in $(document).ready();

$("#background-image").fullscreenBackground();

Conclusion:

Quick and easy: it really does the trick here.

Absolutely no rocket science, but it will prevent you from coding it again in the future.

Let me know what you think!

Kickstart app development for Spotify

Thu, 26 Jan 2012 00:00:00 +0000

So you’ve decided to go ahead and develop an app for Spotify. Great! Starting off might be a pain though if you’re not well informed.
In this article I’ll give you a boost in developing for Spotify and warn you for common mistakes I’ve made.

App development for Spotify is not hard! It’s mainly HTML, CSS and Javascript, which you are probably already familiar with.

Here’s a list of things I will discuss in this article:

Before creating an app
Your first page
Debug!
manifest.json
The API
Store the info
Where to go from here

Before creating an app

When you decide to create an app for Spotify you’ll have to sign-up for a developers account. You can do that on this page: http://developer.spotify.com/en/spotify-apps-api/developer-signup/. If you already own a developers account you can move on to point 2.

If you don’t have an account yet you’ll have to wait until it has been activated. There’s no point to go on from here now, your application simply will not load in Spotify. Just be patient.

Spotify offers a special client for developers that has the latest API build in. It is useful to develop on this build since there might be some differences with the original client as to API calls etc, so get it here: http://developer.spotify.com/en/spotify-apps-api/preview/.

Oh, and since you’re probably designing the app in Photoshop or something first, this design resource might be of great help.

Your first page

Got your account activated? GOOD! You can now finally start working on stuff.

As the integration guidelines point out, you’ll have to create a folder in your home directory called **”Spotify”. **~/Spotify on Mac OS X and My Documents\Spotify on Windows.
In this folder we will create another folder with your app’s name.

The only thing you really need to create now is an index.html file which will load once you open up the app in Spotify. But since we’re creating an app that looks a lot like your typical web-app (technically speaking), we’re going to create the folders for all our assets.
What I like to do is just to create a folder for my javascript, images, and stylesheets. You know the drill.

Now put something funny in your index.html file. Go original and put “Hello World” in there! (no HTML needed! Whoop)

Now we can bring up the app in Spotify (have you already rebooted Spotify when you became a developer? If not: do it now.)

First: Go to the search field in Spotify
Type: spotify:app:your_apps_folder_name

You should see something similar to this:

You just included your app in Spotify. Nice.

The “add application to sidebar” button will put it in the sidebar until you close Spotify again. This will come in handy when you’re debugging the app.

Keep in mind that next time you’ll open up Spotify the app is not in the sidebar anymore. You’ll have to search for it again.

Debug!

The great thing about developing apps for Spotify is that it renders it’s pages with Chromium, so it kind of feels like you’re developing for Chrome. To quote the integration guidelines:

Spotify currently uses the Chromium rendering engine to run and display your applications. However, this is an implementation detail and may change in the future. Please do not assume anything about the browser other than it is WebKit based (so WebKit-only CSS attributes can be used).

This means that you can finally forget about Internet Explorer and get your HTML5 and CSS3 socks on! Isn’t that just nice. Keep in mind that there are a few HTML5 elements and functions that are not added out of security reasons.
To view the list of things that are available go to “Develop” in the taskbar and choose “Show HTML5 Support” and check if what you want to use is in there.

To open up the inspector just right-click anywhere on the app and choose “Show Inspector”. The familiar inspector pops up and gives you all the functionality we are used to use when developing websites in Chrome. The inspector will save your life.

manifest.json

This file contains important information about your app Spotify needs to know. It’s a JSON file which contains an object filled with variables.

Just create a new file in the root of your app’s folder called: manifest.json. The basic layout looks like this:

{
    "BundleType": "Application",
    "AppIcon": {
    "36x18": "tutorial.png"
},
    "AppName": {
    "en": "Tutorial"
},
    "SupportedLanguages": [
        "en"
    ]
}

A full list of variables you can set are available in the integration guidelines.

IMPORTANT: if you change anything to this file a simple “Reload Application” is not enough. You’ll have to restart Spotify and do a search for your app again. Keep this in mind.

If you’re going to include external resources (like doing an Ajax call or including images from a website) you’ll have to add the RequiredPermissions variable like so:

"RequiredPermissions": [ 
    "http://*.gayadesign.com",
    "http://gayadesign.com",
    "http://ws.audioscrobbler.com" 
]

Remember to restart Spotify and adjust the RequiredPermissions variable if Spotify won’t load the resource. It might not have been included in the permissions yet. You’ll just get 404 content.

The API

All interactivity in the app can be done in Javascript. You can even add jQuery to your app if you feel more comfortable using that. The Spotify API is just plain Javascript, so some might feel that this is a step too far, but people: it’s not hard.

To include the API you’ll only need to do this in your script (that you’ll include in the index.html file obviously):

var sp = getSpotifyApi(1);
var models = sp.require("sp://import/scripts/api/models");

This will first load the API and then require a Javascript file “models” that lets you create Spotify related objects in Javascript.
In the JSDoc of Spotify you can see which object you can create and what you can do with them.

You can control the player, get information about artists, tracks and albums, and configure the users’ library for example.

If you want to add searches to your app you can refer to Spotify’s Meta-data API. Remember to add http://ws.spotify.com to your RequiredPermissions array in `manifest.json`.

You can easily get the information you need using this API and do plain AJAX calls to retrieve XML files with information. Couldn’t be easier right?

Store the info

You can save settings of you app in HTML 5’s Locale Storage. A brief explanation is available here: http://www.webmonkey.com/2011/04/how-to-use-html5s-local-storage-tools-today/.

The biggest problem with this is that it can only store strings. I made a little script that takes care of this problem and allows you to also save arrays and objects. You can download it from GitHub here:
http://github.com/Gaya/Locale-Storager

Where to go from here

Now that you’ve got your app ready to be build; just go for it! It’s not harder than building your regular website, you’ll just have to look at the possibilities Spotify gives you with their API’s and go from there.

You can follow @SpotifyPlatform for updates concerning the API and go to Stack Overflow’s Spotify section to ask your questions or hop into the conversations.

I hope I tackled the start up problems and made everything a bit more clear.

If you have anything good going on: Let me know! I’ll be releasing an app myself. When it comes, you’ll know.

WordPress Plugin: Complete Language Switcher

Wed, 04 Jan 2012 00:00:00 +0000

A while ago I uploaded a new plugin to the Wordpress plugin directory called Complete Language Switcher. Using this plugin enables you to easily make a multilingual blog with Wordpress to give the user the best experience in a language you provide.

Complete Language Switcher provides an easy way to filter out posts in a certain language. It will only display content in the set language and also view the template in the language set by the user. If there is no language set the plugin will pick the standard language set in the config of your Wordpress blog.

What do I need?

A Wordpress blog (obviously.)
Xili-language, this is a very nice plugin which can separate posts into different languages. Use this in order to set languages to posts and link other versions of the post to itself.
Language files for Wordpress and your theme installed.
Complete Language Switcher

How do I install it?

Installing this plugin is easy.

Install and activate the xili-language plugin.
Upload the complete-language-switch folder to the /wp-content/plugins/ directory
Activate the plugin through the ‘Plugins’ menu in WordPress
Place <?php cls_langs_html(); ?> anywhere in your templates or hook it in your template using <?php add_action('hook_name', 'cls_langs_html'); ?>.

You are done and can use the plugin now!

A few notes:

Make sure you put en_US.mo files in the language folders when you use the default English language of Wordpress.

Check the /flags/ directory in the plugin folder to see if your flag is in there. Naming is the 2 last characters of the locale (eg. en_US) in lowercase in PNG format. So en_US would be: us.png

Future:

Got in contact with the creator of Xili-language to improve the functionality of my plugin. This will involve better overall taxonomy filtering and also filtering out standard functions such as wp_list_categories().
More on this soon.

Questions?

Let me know what you think in the comments.

If you have any questions you can let me know.

You can also file issues in the Wordpress Plugin directory.

Why SASS and Compass should be in your workflow

Thu, 17 Nov 2011 00:00:00 +0000

Admit it: CSS is awesome, but it’s default syntax is insanely stupid. Are you tired of the way CSS is written and proves to be quite useless and cluttered once the project grows and gets more styling? It just takes up way too much of our time to organize and it’s plain stupid if we stick with this kind of workflow.

That’s when CSS compilers came around, and it will change your life. This post will describe the benefits of CSS compiling and in which possible ways you can use it.

Time to keep it simple, no time for the stupid!

How many times have you done this?

ul { padding: 0px; margin: 0px; }
ul li { padding: 0px 5px; }
ul li a { color: #335345; }
ul li span { color: #434343; }

Then sighed and thought: Why the hell I am retyping “ul li” the whole time? IT’S JUST STUPID!

Yes it is. Let me go on.

What about colors that are used in a project or just font-sizes / line-heights / margins that are recurrent and appear all over your CSS file. Imagine that you want to change that and realize it’s all over your CSS file. Indeed, this is a pain.

How about styles that appear all over your stylesheet? Getting tired of reusing the same styles over and over again? And “oh oops!” There is a style change. Now the pain begins of changing that piece of style to a amount of times that it will make your stylesheet more cluttered and inuseable.

This is CSS hell.

For these problems. SASS.

Compiling CSS now? What?

Don’t be scared if you are not a developer that knows his around the terminal (or Windows’ ugly CMD.) There are a lot of solutions that prevent you from having to use the terminal to start watching projects, but let me take a step back.

SASS will give you the opportunity to change the way you code your CSS and generate the “real” CSS file for you. What it basically does is look at the SASS file and generate the correct CSS representation from it.

The thing is though, that once you want your CSS files to be generated you have to command SASS to “watch” your folder containing the SASS files. So once you save the SASS file, it won’t have the CSS ready instantaneously, sadly. But a few seconds later, it will be ready. This will take a few minutes to get used to, but you sure will.

Style nesting

The first thing I loved about SASS and SCSS as it’s syntax has nesting of the styles. This makes it way easier to work with your stylesheets. Imagine having this HTML:

<ul>
    <li>
        <a href="#">link 1</a>
    </li>
    <li class="last">
        <a href="#">link 2</a>
    </li>
</ul>

In SASS, you would be able to style this the following way:

ul {
    padding: 0px;
    margin: 0px;
    width: 210px;

    li {
        float: left;
        width: 100px;
        margin: 0px 10px 0px 0px;

        &.last {
            margin: 0px;
        }

        a {
            color: #232323;

            &:hover {
                color: #121212;
            }
        }
    }
}

Isn’t that just pretty? Finally you can nest your CSS the way you would in HTML. You can use any CSS selector to make the process even easier.

I also put in a nice little feature which I use a lot in SASS: the & notation. This tells SASS to set an extra rule for the element you’re in. So the li element with class .last is targeted through this method. Not having to create a new rule in the nesting for it.
The hover on the anchor tag is also targeted through this method. Very handy!

Variables, Mixins and Selector Inheritance

The reuse of pieces of styling and making the CSS dynamic, that is what SASS is good at.

Variables are simple. Define it and use it throughout your SASS file:

$background: #040404;
$text-color: #fefefe;
$standard-margin: 16px;

body {
    background-color: $background;
    color: $text-color;

    input {
        background-color: $background;
        color: $text-color;
        margin: $standard-margin;
    }
}

It’s simple. Define a variable using $varname: value and use it throughout with: $varname.

Mixins are like variables but for peaces of styling. You can just tell SASS to reuse a piece of code you wrote and include it in the style. You can even give parameters when including to make them dynamic. It’s almost as if you’re writing functions for your CSS.

@mixin ptsans {
    font-family: 'PT Sans', sans-serif;
}

@mixin absolute-positioned($top, $left) {
    position: absolute;
    top: $top;
    left: $left;
}

body {
    @include ptsans;
    position: relative;

    #notifier {
        @include absolute-positioned(20px, 100px);
    }
}

Defining a mixin with @mixin mixinname { styling in here } or @mixin mixinname ($parameter1) { anystyle: $parameter1; }. That is it. It is great for defining recurring styles and CSS3 fallback stuff. You can put a lot of styling in mixins and reuse it with very little effort.

Last but not least is selector inheritance. This allows you to grab a piece of styling like you would in a mixin, but just extending the style. So you’re putting the same CSS in the actual file but extending the CSS rules. Let me explain this through an example:

Plain CSS:

.error, .succes {
    border: 1px solid black;
    padding: 5px;
    color: red;
}

.succes {
    color: green;
    border-color: green;
}

SCSS:

.error {
    border: 1px solid black;
    padding: 5px;
    color: red;
}

.succes {
    .error;
    color: green;
    border-color: green;
}

Beautiful.

For an extended tutorial on how to use SASS and use ruby to compile your files I point you to SASS’ tutorial: http://sass-lang.com/tutorial.html

And now to make it even more awesome: Compass

The reason I didn’t explain how to compile SASS is because I recently found Compass to do this for me. And I have to say: I am sold.

As if SASS isn’t awesome enough on it’s own, Compass comes with an extra set of awesomeness. It’s a layer on top of SASS which has some extra nifty tricks inside of it. Compass will also compile your SASS files and has a lot of options.

To install Compass you can read their install page. And if you, like me, are too lazy to bother with the command line stuff, try this app: http://compass.handlino.com/. It’s just $7 or you can build the project yourself to save some money.

Why Compass?

It has build-in CSS3 mixins.
A lot of handly CSS workarounds included.
Lots of helpers to save work.
Option to output SASS file as compressed CSS.
Great docs.

There is a lot to Compass, and I learn more and more every day. There are a few things that sold me immediately.

Project workflow

When you start up a Compass project, it will create a few folders for you. According to your config file, it will generate the output that you desire.

In the config you can define the folder where the SASS files (.scss) are stored, it will then automatically watch that folder for changes. You can also define which folder contains your CSS images and where to output the generated CSS files. These can all be in different places.

The great thing about this is the image-url helper for example. Don’t you just hate stuff like this?

div { background: url(../../images/backgrounds/01.jpg); };

With Compass (and the right settings) it will turn into this:

div { background: image-url("backgrounds/01.jpg"); };

Now THAT is convenient! The generated CSS will be the same as above though, but your SASS files will be way more organized.

Stuff like image-width and image-height to get the width and height of an image in pixels, support for Sprites and an out-of-box sticky footer make our lives so much easier.

CSS3 mixins, no more -webkit -moz and all that crap!

The reason I hated CSS3 at first was the fact that a lot of times it involved having to set the properties for each browser using -webkit, -moz etc. This is a serious pain in the ass for us coders and always held me from using it.

Using SASS’ mixins and some parameters you can save yourself a lot of time when setting CSS3 properties. Compass has all of these CSS3 mixins ready.

This in particular convinced me to use Compass aside SASS. Imagine doing this from now on:

div { @include border-radius(4px); }

The way it supposed to if you ask me. Well it should have been in CSS in the first place. Luckily, SASS and Compass fix these problems for us.

Conclusion

There is a lot to say about SASS and Compass, and there is a lot more to Compass than explained in this post.

Using these compilers will save you a lot of work and make coding CSS fun again. Better syntax, managed code, dynamic parts, it’s all better now.

I hope to have convinced you into using SASS and Compass. Tell me what you think in the comments.

Cheers.

QueryLoader2 – Preload your images with ease

Wed, 26 Oct 2011 00:00:00 +0000

Gaya Design is back in business and hitting hard with a redo of the 2009 script QueryLoader. I kept getting e-mails and comments about it and thought I had left it just hanging there for way too long. It had become very outdated. So here it is: version 2 of QueryLoader!

A direct link to the zipfile:
https://github.com/Gaya/QueryLoader2/zipball/master

View the example here:
http://gaya.github.io/scripts/queryLoader2/

Reason behind v2

QueryLoader2 is a better version of the old script posted in 2009. It serves the main purpose of preloading the images on your website by showing an overlay and a loading bar. It automatically fetches all your images and background images and preloads them before showing the webpage.

Compatibility

QueryLoader currently works in IE version 9+, Chrome, Safari and Firefox.

No dependencies, so no jQuery / Zepto / MooTools needed.

Example usage:

Include the queryloader2.min.js script in the head section of your webpage.

<script src="queryloader2.min.js" type="text/javascript"></script>

Create a QueryLoader2 object like this for example:

<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
        new QueryLoader2(document.querySelector("body"), {
            barColor: "#efefef",
            backgroundColor: "#111",
            percentage: true,
            barHeight: 1,
            minimumTime: 200,
            fadeOutTime: 1000
        });
    });
</script>

Use with NPM / Browserify

First install QueryLoader as a dependency in your project:

npm install queryloader2 --save-dev

Use it in a node / browserify project:

var QueryLoader2 = require("queryloader2");

var loader = new QueryLoader2(document.querySelector("body"), {
    barColor: "#efefef",
    backgroundColor: "#111",
    percentage: true,
    barHeight: 1,
    minimumTime: 200,
    fadeOutTime: 1000
});

jQuery usage

Include jQuery and queryloader2.min.js scripts in the header.

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="queryloader2.min.js" type="text/javascript"></script>

Call QueryLoader in $(document).ready() like this:

$(document).ready(function () {
    $("body").queryLoader2();
});

Install using Bower

bower install queryloader2

GitHub

As you might have noticed I put my code on GitHub. This makes it easier for me to manage my code and give you updates if you or me find any bugs.
You can also file issues with the script here and fork it to make changes / fix bugs. If you send me pull requests I will take a look as to what you have changed and commit it if it is an addition.

Working on Siebstudio

Thu, 10 Feb 2011 00:00:00 +0000

Last week a friend of mine, Sieb, launched his new website for his design company called Siebstudio.
The website got mentioned on creattica and got some nice exposure through it.
This article will explain my part in the development and what we did to create a site like this.

As some of you might know, me and Sieb work at the same place and we get together from time to time.
We’ve created quite a lot of website in our time and I always like when we have to collaborate to make an awesome looking website that pops.

So a couple of weeks ago I got to see the new and in progress Siebstudio website which instantaneously blew my mind.
The one thing that wasn’t done yet (because it’s not Sieb’s specialty) was the advanced code behind the site. Sieb did get a nice base for me too work on and got the effects ready as he wanted it.
There were a couple of things missing though, and that’s where I came in, using my jQuery / javascript magic.

Let me just point out a few features of the site:

Sorting elements on screen using Masonry (animated)
Displaying different artwork and slides using Cycle
Loading the clicked items through AJAX
Dynamically change the visiting url with Javascript making it possible to share / like / tweet links even though the content is loaded dynamically without a new HTTP request
Different types of blocks so the content is not set to one layout

After hours of coding, having fun, drinking beers and having smokes the website was finally done. Most annoying stuff I encountered was obviously getting it to work in Internet Explorer (that freaking browser!) and getting that twitter/facebook like urls to work. But it works now.

Hope you like the website. I really think Sieb outdid himself again. My compliments.

Drop any comments below, much appreciated.

Take care,
Gaya

Text with Moving Backgrounds with jQuery

Fri, 08 Jan 2010 00:00:00 +0000

Personally, I am a huge fan of negative space in design. This got me thinking while I was trying to accomplish something different. Normally a textual caption would be positioned above a background, but I wanted to do it the other way around: place the background in the letters.
I also wanted to add some nice dynamic effects to enhance the effect. This was amazingly easy to accomplish in jQuery with the use of a little creativity.

This article will explain what you need to do create an effect like this yourself.

What are we going to do?

We are going to create a container which has a moving background, but only a set of letters will be visible of the background. It will be as if there are holes in your container.

To do this we need just a few things:

A nice background pattern or image
Letters punched out of an image
Just a little jQuery code

Normally you would create a PNG file containing anti-aliased letters and place it inside some container on top of a background. What we are going to do is place a full image over a background, covering parts that shouldn’t be seen. Just like a mask!

Then we’re going to make the background of the container move around to create a nice looking effect.

Step 1: Creating the “mask”

To create the overlaying mask I am going to use Photoshop. You can do this with any other image manipulation application, but I am going to explain what I did using screenshots of Photoshop.

*First create a new image and fill the background with the foreground of the mask. *This is the part that will be visible for the users. I used a black solid fill for this, so it stays clean.
Create a new text layer on the fill you just made.

This gives us the right impression, and we just have to imagine that the white letters will be punched out later.
Hold CMD / CTRL and click on the text layer icon

Doing this the text will get a selection around it which should look like this:
Click: Select > Inverse

Now the area that will be visible on the mask image is selected. It will look like this:
Select the fill layer and click on “Add mask”

This will create a mask for the fill and the letters have been punched out.
Hide the text layer

You have now punched out the letters of the fill!
Save as .png!
PNG handles transparency very well and looks right in almost all current browsers (nope, not IE6). It also support opacity per pixel, so it’s not like the the GIF transparency.

Step 2: A little documenting and styling

Now that you’ve got your own mask image, it’s time to create the HTML page for it to end up in.

Just for basics, use something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Some title</title>
    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

<body>
<div class='scrollBg'>
    <img src='overlay.png' alt='' />
</div>
</body>
</html>

We created a simple HTML page containing just two elements; the container “scrollBg” and the image that serves as the mask.

Make sure to fix the src of the image and the href to your stylesheet.

In the stylesheet we just need a little bit of styling:

body {
    background-color: #000000;
}

.scrollBg {
    background-image: url(background.jpg);
    background-color: #000000;
    width: 487px;
    height: 83px;
}

.scrollBg img {
    display: block;
}

You’ll have to fix the width and height of the scrollBg container. Adjust it to the width and height of the mask you created. This will prevent the background image from showing outside of the mask.

Also change the URL of the background image.

Step 3: Go jQuery crazy!

In the Javascript part of this tutorial we are going to make the background image shift in position at random.

To make jQuery able to move the background image, we need a plugin, since it’s not in the default behavior.

Go download this plugin: http://plugins.jquery.com/project/backgroundPosition-Effect

Include this script in on your page using:

<script type="text/javascript" src="url_to_moving_background.js"></script>

Now we can use backgroundPosition as a parameter in the jQuery animate effect! Pretty neat!

The following jQuery code will move the background around at random (put it in the part of the HTML page):

<script type="text/javascript">
$(document).ready(function() {

    moveBgAround();

});

function moveBgAround() {
    //give a random value from 0 to 400 for the X axis and the Y axis
    var x = Math.floor(Math.random()*401);
    var y = Math.floor(Math.random()*401);

    //random generated time it takes to move
    var time = Math.floor(Math.random()*1001) + 2000;

    //make the background image move!
    $('.scrollBg').animate({
        backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
    }, time, "swing", function() {
        moveBgAround();
    });
}
</script>

It’s that simple! You are now ready to experiment with the code I just created.

The X and Y values are the amount of pixels the background image will shift. He will not move that amount in pixel, but he will move to the generated coordinates.

If you would like to make it move more you can increase the number stated here:

var x = Math.floor(Math.random()*401);

If you want to create a background image that is not a pattern but rather just a large texture, you have to an image with the following width and height: Take the number that you entered in the script (amount after random()) and add the width of the mask to it: that is your width. Same goes with the height.
This will allow the background to move around without being repeated.

Done!

If you have any questions or was inspirited to create different crazy effects: let me know in the comments below.

Happy developing!

One year of Gaya Design

Mon, 28 Dec 2009 00:00:00 +0000

On this day, but about 365 days ago, I published my first article. From that day I devoted quite a lot of my free time to this weblog, and still doing it with a smile! It’s great to know where my little blog is after a year and I am very thankful for the people who made this possible.

The start

In the beginning I didn’t know anything about blogging, but I’ve always had the urge to go and spread the stuff that I made and share my knowledge with other people.
And as we know, the Internet is a great medium to do that, so I started this blog.
The idea to start a blog came from Marco of Marcofolio.net (at the time a classmate). He kind of made me want to do a blog myself. Seeing that his blog was a success, I wanted to start something myself. Thanks Marco for inspiring me!

After a few months of running my blog on a self made system (which was enough at the time), it was time to boost the action and convert the whole blog into a Wordpress blog, and then it started. Such a great platform to run a blog on, if you’re not yet running Wordpress: do it now!

Traffic boom

A few months in I saw that a lot of new comments appeared on my blog. I must have had a mention somewhere nice. And it was, not just somewhere! In an article on Nettuts!

I want to once again thank Drew Douglass for this. I believe he gave me a big boost into the developers community on the Internet, even though I wrote script.aculo.us scripts back then. He’s an awesome dude who like me just has a passion for web development and wants to share it with the world.

Few other thank yous

I want to thank everyone at Cybox (the place I work) for their support for what I do and giving me the opportunity to host this weblog on their servers.

We’ve experienced some crazy stuff thanks to this blog, but the servers will always survive!
Check out the websites of my co-workers: Sieb, Pim, Bas, Nando, Rutger.
You guys ROCK!

Also a HUGE thank you to YOU, my readers, you make this all happen! If it weren’t for you, I’d be eating some crisps and play Nintendo games in all the time I’ve spend in the social networks of this wonderful community.
I really love how a lot of people from all around the world are contacting me and talk about stuff I’ve written on my website. A lot of this conversing goes on on Twitter. Really love how fast stuff goes over there and the ease of just starting a conversation. Thank you all readers, followers and subscribers!

I’d also like to thank the people at FUEL for giving me the opportunity to write for one of their blogs. As some of you may know, I was an editor at FUEL Your Coding for a while and let them use my articles to give the website a kick start. Since it started to take up way too much of my time I had to stop, which was a bummer.
But as you can see, mister Douglass Neiner is doing a great job keeping that site alive!

Thank you Adelle, Doug, Josh, Michelle and all the other FUEL people for the great time at FUEL. You enlighten the community.

A look at 2010

In 2010 I want to bring you a lot of jQuery madness and I am planning on doing another blog along with some friends, but that’s just another surprise waiting for you in 2010.
Thank you all for reading my blog and I hope to make next year a great one!

How to start writing your own sweet jQuery scripts

Mon, 30 Nov 2009 00:00:00 +0000

Sometimes it can be hard to start writing a Javascript script when you don’t know what to do instantaneously. But luckily there is the Internet right?
Just go to Google and type in what you want in a script. Good chance some jQuery or Javascript solution will show in the results, and you are basically done.

The problem is that you still don’t know how to do such things.

In this article I’ll discuss the viral points of planning out a Javascript / jQuery script with ease.

Before I start talking about Javascript and jQuery I want to take the time to do some shameless self-promotion.
A few weeks ago I opened up a small blog on tumblr. I will be posting inspiration I’ve come by on the Internet, just to support the sharing of awesomeness on the web!

The url is: http://micro.gayadesign.com

Now on with the article!

Good to know

Before you start working with jQuery, it’s best you first understand Javascript and the difference with it and plain HTML and CSS.
Most HTML elements are static, they don’t move, they just sit there. A document (without any flash objects or gif images) looks like a still life. The only change you’ll probably get is when you hover over links. You can’t change the content of the page without generating a new document.
This is where Javascript (in this case in addition jQuery) steps in, which you probably already know.

The first thing I would like to advise is to start by learning basic Javascript and doing calculations in it. This will also help you experience the differences between browsers. But don’t worry; jQuery solves a lot of these problems!
I think that the following tutorials give you a great start in developing in Javascript: http://www.w3schools.com/JS/. For people who prefer books; I found that “Professional JavaScript for Web Developers (Wrox Professional Guides)” is a pretty neat book to understand the basics of Javascript.

If you’re already into Javascripting, the previous steps would be out of the question. So we’ll move on to jQuery.
Go to the jQuery website for the documentation. There is a lot of information about how jQuery works and which functionality is available.

In the next section I’ll explain what to do before starting to write your own script.

Before creating a script

The first thing you need (this is kind of a no-brainer) is a good idea. An idea for a nice effect, some sort of enhancement for your web page or effect of any kind.
Most of the scripts I wrote were made because there was functionality I wanted, but wasn’t available in plain HTML and CSS. Most of the things you’ll create with jQuery would have never been possible without the use of Javascript.

Once you’ve got an overall idea of what you want to achieve and which elements you want to adjust, you can start to create a layout in HTML and CSS.
It is important that you give the right classes and ids to the elements, this will benefit in the jQuery development process.

Elements that will be visible after a certain action can already be included in the document, but make sure to hide them from the user. A simple display: none in the CSS will suffice.
It is a lot easier to use HTML that is already generated rather than generating it all in jQuery.
I also like to keep “ghost elements” ready in the HTML, so I can copy a whole element and append / prepend the copied element with ease. This will minimize the jQuery scripting code.

Now that you have the layout ready and have a basic idea of what you want, you can start to map out everything the script will do to your page.
The basic idea is to list all events and happenings. I like to make short lists of different functions which the script will contain.
I’ll give an example of a very basic script; It displays thumbnails. When a user clicks on a thumbnail, the larger version is displayed. When a user hovers over a thumbnail some styling is added.
This example can be divided into separate function with ease, but separating the events first is the easiest. We’ll have an *onhover *and an *onclick *event which we have to lay out.
Now that we know which events will take place we can write what these events should do, eg:

Hover: Element should get a border and disposition a bit to the top. It should reset when the cursor leaves the element.

Click: Get the source to the larger version and append this image to the display element.

The actions can be easily scripted as functions. So that you’d only have to bind a function to the event.

Now we can create the code layout for this example. I like to keep all my scripts clean, and to achieve this I put the whole script inside a new Javascript array. The following code will serve as the template for this script:

var ScriptName = {

    init: function() {
    //function that will initialize the script and do all the bindings

    },

    openLargeVersion: function(obj) {
    //when a thumbnail is clicked, this will be executed, given the clicked element

    },

    hoverThumb: function(obj) {
    //given the object, we'll manipulate the css

    },

    mouseoutThumb: function(obj) {
    //given the object, we'll reset the styling here

    }

}

Using script layouts like these will really help in the development process. It gives a good idea of what every function should contain and will separate all the action (rather than putting all the Javascript in a file and summing up all functions and bindings.)

Keep it simple

Really! Keep it simple! Javascript can be used to adjust the presentation of the website, but please, please don’t overdo it. It won’t do any good on the experience, performance and goal of the script. On top of that the development process will probably be a killer. Just keep it simple (stupid!).

It’s good to plan out the different animations you want to achieve in the script. First move the element a bit and then change the colour and then and then… It’s important to keep animations and actions in line with what you expect.

Using the *init *function I created in the sample template code can really help you in separating different snippets of jQuery code. A simple

$("#element-id img.thumb").click(function() { ScriptName.openLargeVersion($(this)) });

would be enough to bind the openLargeVersion function to every img element with the class thumb.

When using functionality like .animate using callbacks can be really useful for chaining animations and keeping everything in line.

Another thing I started to like is the use of cheat sheets. They save a lot of time clicking around in the jQuery docs. They list all the functionality which jQuery contains and gives you a small example of how you should write the code.
I found the following cheat sheet very helpful: Visual Cheat Sheet by Woork.

Think of how you want to adjust your document’s layout. A lot can be achieved by only adjusting the CSS presentation. The *animate *function in jQuery enables you to make changes over an amount of time. Imagine increasing the padding, it will look as if the element is growing. Same can be said about margins, but then the element would move around.

Another little something: use Firebug in Firefox!
Firebug will help you in the development process and gives you a lot of handy options to keep an eye on your HTML. It is very interesting to see the style of an element change thanks to jQuery.
The possibility to execute Javascript code on the fly is also a really nice feature when writing Javascript code. It’s the easiest way to do trail and error coding without having to upload a file and refreshing the page.
This is a tool you cannot miss!

Conclusion

I hope this is a nice step into creating your own jQuery scripts with a few things to keep in mind. It really isn’t hard, just let your imagination run wild and try to translate it into logical steps.

If you have something to add, please let me know in the comments below!

Presentation Cycle: Cycle with a progressbar

Tue, 03 Nov 2009 00:00:00 +0000

Cycle is a script that supports image presentations to easily display multiple images. This script supports a lot of effects and the cycling of html elements.

Presentation Cycle is a variation on the functionality of Cycle. Instead of generating a list of numbers that are clickable Presentation Cycle generates a progress bar that shows when the new slide will appear.

In this article I’ll explain how to implement this on your web page and give you some tips on how to adjust the looks of the cycle elements and progress bar.

Download the source code here:
http://gaya.github.io/scripts/presentationCycle/presentationCycle.zip

View the example here:
http://gaya.github.io/scripts/presentationCycle/

As shown on the example page, this script generates a progress bar automatically instead of the developer adding some html. Depending on the settings of the script, it dynamically generates a progress bar adjusted to the number of slides in the Cycle container.

Features

Cycle through elements
Adjustable animation times
Generates a navigation bar that also shows the progress
Works in modern browsers

Implementing the script

The zip archive contains an example page to see how to get things to work, but the following steps will tell you how to make your own.

First we need to upload the contents of the zip archive to your web server (or local for testing).

Create a new html page and include the following code in the `` section:

<head>
    <!-- Stylesheets-->
    <link rel="stylesheet" type="text/css" href="css/presentationCycle.css" />

    <!-- Scripts -->
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
    <script type='text/javascript' src='js/presentationCycle.js'></script>
</head>

It’s time to create the container that will contain the html elements for the Cycle:

<div id="presentation_container" class="pc_container">

    <div class="pc_item">
        <div class="desc">
            <h1>Description title</h1>
            You can put your description in here.
        </div>
        <img src="images/slide1.jpg" alt="slide1" />
    </div>

    <!-- ... repeat the previous item -->

</div>

The container of the cycle elements has a default id of “#presentation_container“. This corresponds to the default settings of the script and the stylesheet.

The child elements have a class of “pc_item“, this also corresponds to the default settings in the stylesheet.

Have you uploaded all the files and images? Then you are ready to initialize the script.

Put the following below the Cycle container:

<script type="text/javascript">
presentationCycle.init();
</script>

This is all you need to do to get the default look going!

In the following section I will talk about how to configure the script to adjust the looks to your likings.

Adjusting the looks

The first thing I’ll explain is how to adjust the images that are used to generate the progress bar.

The Javascript file of Presentation Cycle contains the following code regarding images the script uses (line 18):

//progressbar options
barHeight: 14,
barDisplacement: 20,
barImgLeft: "images/pc_item_left.gif",
barImgRight: "images/pc_item_right.gif",
barImgCenter: "images/pc_item_center.gif",
barImgBarEmpty: "images/pc_bar_empty.gif",
barImgBarFull: "images/pc_bar_full.gif",

The bar height is defined in pixels, this is required for the script to work properly. The height is the same as the images that are contained in the images folder. As you can see the images are sprites. I’ve included the active and inactive version of the image in one image to reduce loading time and it makes the script work better.

To adjust the images you need to have two square images next to each other. Making the left part the inactive one and the right the active one.

The only requirement is that all the images have the same height, this is to position the bar the right way. Also make sure that you set the height in the script too.

barDisplacement is the combined value of padding + margin the bar has.

To change settings the following code might help; there is no need to change the Javascript file. This code is executed after the Cycle container defined.

presentationCycle.barHeight = 10; //different from the default
presentationCycle.barImgLeft = "images/pc_item_left_custom.gif"; //using a different image

presentationCycle.init(); //start the script

To adjust the settings of the cycle you can adjust the following settings:

//slide options
slideTimeout: 8000,
containerId: "presentation_container",

//cycle options
cycleFx: 'scrollHorz',
cycleSpeed: 600,

slideTimeout is the time it takes for a slide to go to the next one.
containerId is the container of the cycle elements.
cycleFx is the effect of cycle the script will be using, for all the effects visit the effect browser.
cycleSpeed is the speed of the animation.

I used <div> elements to add text to the slides, you can play around with the elements to make them fit your needs, that’s the great thing about Cycle!

For more examples on how to adjust the script you can take a look at the source of the different examples on the example page.

Good luck!

Notifications: the other approach

Tue, 20 Oct 2009 00:00:00 +0000

A normal problem: notifications or updates that have to be displayed on a website, but it’s kind of overloading the backend. But as long as the page is open: please update the status dynamically (if necessary) without reloading the page.

I can hear you think: AJAX! Yes, I’ll use AJAX for sure. But there is a little problem when it comes to how up-to-date you want these notifications to be without overloading the backend of the website.

In this article I’ll approach pushing notifications from another perspective, regulating them in the backend rather than the frontend.

Most of the applications that use AJAX to update the information that is on the screen use a simple request that fire every once in a while. This doesn’t really make the notification instant and can cause the Javascript to make more calls than necessary to the server.

Expanding the interval time of the calls would lessen the requests, but that would take away a bit of the notification functionality don’t you think? When there is something to notify: notify me!

With these problems in mind, there might be various solutions. A solution someone told me about got me interested; rather than letting Javascript determine whether to make a call to the server, let the server do it.

How it works:

How are we going to make the backend (in this case PHP) say when the frontend has to update?

The solution is quick and easy: only return information if PHP has some, and let PHP tell the frontend to reload. Simply put: if there is an answer: go and reload.
To make this a bit more clear, I’ve put together the following work flow:

Frontend notifies the backend that it wants information.
The backend goes in a loop waiting for information to give back to the frontend.
If in the meantime information is available: return the results.
The backend gives his answer (if available) and tells the frontend to do another request.

This approach is a bit different from letting Javascript interval the requests and making it load PHP the whole time.

Getting started:

In this example I am going to make a simple page that shows text from a txt file on the server and changes the text once changes are made on the server.

First we need a bit of code to get everything off the ground.

Start with this super easy HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Notification test</title>

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
    <script type="text/javascript" src="notification/notification.js"></script>
</head>
<body>
<div id='content'>
    <h1>Notification test</h1>

    <p>
        This example will notify the user when changes have been made to updates.txt.
    </p>

    <div id='notify'>

    </div>

</div>
</body>
</html>

Nothing too complicated right? I won’t go into details what I did here.

We are going to use jQuery for its AJAX functions (which are so convenient and make clean code.)

The next step would be to output information in the #notify element.

The Javascript code:

What do we need in the Javascript:

A function to make a request to the backend.
In the callback of the jQuest AJAX function we need to load the notifications and output them if they exist.
When callback is called: repeat the cycle.

Create a folder called notification and in that folder create the file: notification.js. From the root where the HTML file is in it would be: notification/notification.js. We’ll use this folder to add other files too.

The basic Javascript I got is:

var notification = {

    request_url: "notification/notification_request.php",

    do_request: function() {

    }

}

notification.do_request();

Notice that I separated the request URL from the actual AJAX call that will be the next step. I always to this so I can change this URL with ease, without changing all the code. Request URL change some times, and you don’t want to have to mess around in the code too much.

Now to fill the do_request function, we’ll make a post request to the URL and expect JSON back as its output. Also create a callback function that will be handling the output given by the server.

Now to fill do_request:

do_request: function() {
    $.post(notification.request_url, {},
        function(data) {
            if (typeof(data.updates) != 'undefined') {
                $("#notify").html(data.updates);
            }
            notification.do_request();
        }, "json");
}

It requests the file given in the URL. Waits for it. Looks if there are updates in the answer and then call the function again (recursive loop.)

That was all the frontend code there is. Pretty small don’t you think? That’s why we are going to put all the logic in the backend.

The backend:

To make the backend work I created a small (not that great) update condition: if a certain file on the server contains text; output it and empty the file again.

Your updates would probably be stored in a database and marked if the user has received them, but that’s up to you. I’ll use this simple case to show you a quick result.

Create two files in the notification folder: notification_request.php and updates.txt. Also make updates.txt chmod 777 so PHP can edit that file.

The PHP script has to do the following:

Determine the time the script can be put on hold.
Constantly check if there are changes. If there are any, output the result.
Wait a short while and check again. If the max time as been reach output an empty result.

The basic code will look like this:

//determine the starting time and the max execution time

//set default response

while(/* max time has not been reached */) {

    //check and determine update

    //if update is available; output and break script

    //if not: wait a little and clear the output
}

//output the default result if there is no update

To determine the maximum execution time of a PHP script you can get this information from the PHP settings using ini_get, which can get a lot of information found in phpinfo().

The first part of the script would look like this:

//determine the starting time and the max timeout
$start_time = time();
$max_timeout = ini_get('max_execution_time');

//set default data
$data = array();

It determines the start time of the request and the maximum time PHP can put the script on hold. Also the default ouput is set (an empty array.)

Next part contains a bit more code:

//go into the loop
while((time() - $start_time) < $max_timeout) {

    //set the updates available to false
    $update_available = false;

    //open the file and get its contents
    $updates = file_get_contents("updates.txt");

    //if there is any content, put it in the output
    if (strlen($updates) > 0) {
        //set update available
        $update_available = true;

        //set updates
        $data['updates'] = $updates;

        //empty file
        file_put_contents("updates.txt", "");
    }

    //if there was an update output it and exit the script
    if ($update_available) {
        echo json_encode($data);
        exit();
    }

    //go into sleep for a little while and try again
    sleep(1);
    flush();
}

//if there are no updates within the set time: echo the empty result
echo json_encode($data);

if (iam > you && you < iam) {

}

Simply put, this script will return an update once the the file on the server (“updates.txt”) has contents and gives this to the frontend.
If there is no update, it will give the frontend an empty response and the script will do the same request again.

The frontend script will output the contents of the file once it has been changed on the server, almost instantaneously!

The following clip will show you this functionality:

Future:

Now it’s time to customize the script to meet your needs, not reading a file on the server, but rather getting updates from your database and creating a better output on the frontend side.

I didn’t make this too fancy because I only wanted to show you another approach to the problem of pushing notifications to the frontend.
This example would work perfectly in cooperation with sNotify, which I made a while ago.

If you have any ideas, suggestions and like to discuss this solution, please comment below.

I hope this helped you in developing an application with notifications and made you look at updating information in another way.

QueryLoader – preload your website in style

Thu, 01 Oct 2009 00:00:00 +0000

There is always a minor problem when it comes to preloading image on a website. Nobody really has a full solution for it. There are a lot of preloaders available, but most of the time they only display the words: “Loading page” or have an animated image that spins. Why can’t there be a nice loading bar of some kind?
I’ve gotten a few request on how to make a preloader, or people asking me how to get all the images of a web page and preload them (even the images in CSS).

This preloader has it all. Loading bar, custom animations and getting all images included in the web page.

[ There is a new version of QueryLoader. Consider this one obselete!](/articles/queryloader2-preload-your-images-with-ease/)

[![QueryLoader - preload your website in style](/articles/queryloader-preload-your-website-in-style/qloader.jpg "QueryLoader - preload your website in style")](/articles/queryloader-preload-your-website-in-style/)

[ There is a new version of QueryLoader. Consider this one obselete!](/articles/queryloader2-preload-your-images-with-ease/)

(a special shout out goes to Sieb of [Siebdesign](http://www.siebdesign.nl) for coming up with the animation and the idea of building a preloader)

Download the source code here:
http://gaya.github.io/scripts/queryLoader/queryLoader.zip

View the example here:
http://gaya.github.io/scripts/queryLoader/

Example with percentage visible:
http://gaya.github.io/scripts/queryLoaderPercentage/ or download: http://gaya.github.io/scripts/queryLoader2/qL2.zip (thanks to Olivier Dumetz)

Features:

Preload a whole web page.
Preload a part of the page.
Gets all images, tags and background-image of your CSS
Easy to implement.
Adjustable loading bar.
Tested in Firefox, Safari, Opera, Chrome, IE7, IE8 and IE6 (script will be ignored in IE6 though).

Implementation:

To implement this script you don’t need any Javascript experience. Just follow these easy steps:

1. Download the zipped archive.

2. Upload the contents to your webserver.

3. Place the following code in thepart of your page:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<link rel="stylesheet" href="css/queryLoader.css" type="text/css" />
<script type='text/javascript' src='js/queryLoader.js'></script>

Remove the jQuery part if you have already included the file.

4. Place this code at the bottom of your page:

<script type='text/javascript'>
QueryLoader.init();
</script>

You are now done!

Customization:

If you only want one element / container to be preloaded you can setup a jQuery selector to only preload what you want.

Let’s say you have an element with an id. You only want the images inside that element to be preloaded. You can use the following code:

<script type='text/javascript'>
QueryLoader.selectorPreload = "#idOfTheElement";
QueryLoader.init();
</script>

Be aware that you can only preload a single element. So using a class selector could cause some problems.
To read more about selectors in jQuery you can read this page in the jQuery docs.

To adjust the animations of the loading bar, you can take a look in the following functions:
QueryLoader.animateLoader() and QueryLoader.doneLoad()

Adjusting these functions requires a bit of jQuery knowledge.

Any questions about QueryLoader and implementations can be posted in the comments below.

Good luck and happy developing.

Circular InterAction menu

Fri, 04 Sep 2009 00:00:00 +0000

It’s time for another jQuery script from Gaya Design. This time I created an interactive menu, which can be used in CMSes, applications or just on your own website.
This post will show you how this script works and how to apply it in your own environment.

Download the source code here: http://gaya.github.io/scripts/interaction/interaction.zip

View the examples here: http://gaya.github.io/scripts/interaction/

Have you ever run into this problem? You have a nice CMS with a list of items a client can edit, delete, move etc etc. The page becomes kind of cluttered with icons, problem!
Not anymore. This script offers a minor solution to that problem. It is a menu that opens once you click on an object of your choice. It loads the options and shows them in a circular way around the center of the object.
It took some math and a lot of thinking time, but the menu items seem to be positioning quite well.

If you take a look at the example, you see that I applied the InterAction script inside a small mini game. It shows that an object can have menu items, that the items can fire actions and that objects can get new sets of actions if needed.

Getting started:

First we have to include a few stuff scripts and CSS in the `` tag:

<link href='css/interaction.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script src="js/interaction.js" type="text/javascript"></script>

You can leave out the jQuery part if you have it included in your html already.

Now you need an object on which you to add the menu. I’ll use a sample object:

<img id="plant" src='images/flower.png' alt='' />

This will serve as our object in this tutorial. Note that you have to have an image flower.png ready for use ;-)

To add a menu to this object you’ll only need to execute the following Javascript code:

InterAction.init("#plant", Array(Array("test option", function() {})));

These are the method + parameters you have to perform to add a menu to the object. The object is now clickable and there is one menu option with an empty action.

The first parameter is the selector (use id) you’d use in jQuery. The second parameter is a multidimensional array filled with arrays that contain menu options + their actions.
Where the first item in the array is the text in the menu item and the second item the action itself. It is a callback for the menu item once it is clicked.

To prevent the code from getting cluttered, the second parameter can be set before the InterAction.init() method is called.
I like to separate both this way:

var plantMenu = Array(
    Array("Test option", function() {
        //you can enter js code here
    }),
    Array("Test option 2", function() {
        //you can enter js code here
    })
);

InterAction.init("#plant", plantMenu);

These are the basics of creating a menu with the InterAction script.

Filling it in:

Have you already noticed that empty actions will not automatically the menu once you’ve clicked on an item?
InterAction supports has a few options you can use in the action to make the development process a bit easier.

//this will close the menu
InterAction.forceClose();

//this contains the html object of the item you just clicked
InterAction.clickedElement;
//for jQuery:
$(InterAction.clickedElement);

//dynamically create a new menu for an object:
InterAction.init("#plant", nameOfActionArray); //will replace old menu if one exists

To change the looks of the menu, you can take a look in the CSS and replace the images of the menu if you want. They are also set in the InterAction.js file.

A quick example:

The following code will show you how to create an easy InterAction menu:

var plantMenu = Array(
    Array("Close menu"), function() {
        InterAction.forceClose();
    },
    Array("Hide me"), function() {
        $(InterAction.clickedElement).fadeOut();
    },
    Array("Create new"), function() {
        InterAction.init("#" + $(InterAction.clickedElement).attr("id"), plantMenu);
    }
);

InterAction.init("#plant", plantMenu);

Future:

I am already creating a standard Javascript file containing actions which are widely used in applications (such as going to an url and manipulating html). If you are creating actions yourself I’d be happy to hear what your ideas are, so I can use them in the future.

Drop any questions you have in the comments. Happy developing!

sNotify: Easy notifications in jQuery

Wed, 19 Aug 2009 00:00:00 +0000

There hasn’t been a jQuery tutorial / script on Gaya Design for a while. This is because I’ve been working on this particular script for a while and have a lot of other scripts in development.

sNotify is a script which is particularly handy for people who are developing web applications. sNotify allows the developer to display notifications in a fast and easy way.

Download the source code here: http://gaya.github.io/scripts/sNotify/sNotify.zip

View the examples here: http://gaya.github.io/scripts/sNotify/

The idea for sNotify struck me when I was playing the Sims 3. Its way of notifying the user of important events looked simple but effective. A message box slides in screen from the top right, containing just a small bit of information.
The thing I liked most was the way it sorted notifications and displayed them in an orderly way. By this I mean: When there is more than one notification, it displays them one after another.

Features:

Display notifications in the top right corner of the screen
Close the message with a click on a button
Automatically closes messages after 10 seconds (or whatever you’d like)
Disables auto close when you are hovering over a message
Puts messages in a queue to display them one after another
Easy to implement

Getting it to work:

First thing we need to do is to include the script on your web page. Upload the contents of the script somewhere, preferably in the folders you use for CSS and JS.

Put the following code in the `` section of the page:

<link href='css/sNotify.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script src="js/sNotify.js" type="text/javascript"></script>

You can remove the jQuery part if you already included it.

Now that you’ve included sNotify, you can start to test out the script.
Use the following Javascript code to display a message:

<script type='text/javascript'>
sNotify.addToQueue("You can add your message here.");
</script>

This will display the notification in the first possible cycle of the queue. You are basically putting the message in a queue so that messages won’t get mixed up.

By doing a simple sNotify.addToQueue call you can add your messages to the queue, so it is possible to add multiple messages at the same time but it won’t clutter the page:

sNotify.addToQueue("The first message.");
sNotify.addToQueue("The second message.");
sNotify.addToQueue("The third message.");

To change the amount of time a message a message stays on screen, use the following:

sNotify.timeOpen = 10; //change this number to the amount of second you want

Conclusion:

It’s that easy!
You can edit the CSS to adjust the looks (I guess this is required) according to the looks of your web page. You can also add HTML in the messages to add links or other elements.

Have fun!

PHP ORM: Models and PHP Object Generator

Mon, 27 Jul 2009 00:00:00 +0000

If you are a developer, especially in the object orientated parts, you must heard of the Model View Controller design pattern.
This post will tell you a bit about models and how you can use them to lift your code to a higher level and safe a lot of time in the development process.
I will also tell you about PHP Object Generator (POG) to use for implementing your models.

Models are the application’s place for storing information. If you have your model right, the application tends to work out better than applications without models.
In the model you can store properties of all your objects (tables) and apply rules to them.

Making the model

To make a model all you need is some paper and a pen. But if you prefer software, there are a lot of tools around that enable you to make your own Physical Data Model. These tools also have some reverse engineering options and code generation possibilities. I use: PowerDesigner.

The good thing about models is that you can use them to implement ORM in your PHP application. Models are also needed if you want to develop an application in a framework like CakePHP. ORM has been made to decouple the controller and model, so it doesn’t really matter where the information is saved, but rather that it will be saved. ORM will create the connection to the database and persist the object with the data source of choice.

Let’s say we want to make a small web application for a client to save some information. We will create a small application for a small real estate company who offers homes in the region.
The client explains the following: “We offer homes in a certain region to our visitors. A home has information about its sizes and price etc. A home is inside a town, and the town is inside a region.”
This information is enough to start drawing your first model. We don’t know very much, but the basics of the model can now be made. I got the following with only the information given above:

What it basically says is: “There is a region, it contains a town. A town contains a home.”

We also know there can be more towns in a region, and that a town has zero or more homes. Let’s add that in the model:

You are now thinking object oriented, so this makes it quiet easier for developers to understand how their application will work.

As you might note, there are no properties for these objects yet. Let’s say a region has a name and a description, the town and homes too. The only thing different is that the homes hold a lot more information like: the price, lot size, object size, build year etc.

With a few properties included, the model looks like this:

I hope this gives a clear view of what a model is to people who’ve never heard of them.

As you can see I already wrote the data types of the properties of the objects, this is to make sure you remember what goes in the field and you can also put a few restraints on the fields by doing this.
I used the {objectname}Id field because POG will generate objects with that field as the key. You don’t have to do this, but it makes your model look better and the software modeling tools might require you to do this.

Let’s move on to implementing the model inside your PHP application.

Implementing models inside PHP

I was looking for an easy way to implement ORM inside a PHP application without using a very large framework. I only needed a solution that knew what my model was and does the persistence with the database at the same time.
That’s when I found PHP Object Generator (http://www.phpobjectgenerator.com/), a project which is easy to use and easy to implement.
It’s not recommended to use this for super huge projects, but POG is quiet scalable, clean, contains CRUD methods (Create, Read, Update and Delete) for the objects, extensible with plugins and open source.

First thing you need to do is to create the objects we have just defined in our model. Take a look at the following image:

This will generate the code for the region object. Note that I set “Town” as its child, this is also defined in the model, so don’t forget this! Click submit and wait until the next screen comes.

Choose to download the zip, this contains the POG code base and the object you just generated. Unzip and upload the contents to your server.

Now it’s time to make an object for “Town”.

I’ve set “Region” as its parent and added “Home” as its child. Click submit again.

All you need to do is create a new file in a text editor and copy paste the code that in the text area that just came up.

Save the file as “class.town.php” inside the /objects/ folder.

Do the same for the “Home” object:

Now that we’ve got our objects ready it’s time to use POG and do some actions.

Using POG in PHP

If you have all your files uploaded the folder structure should look something like this:

Now it’s time to change the configuration of POG, this contains the database connection.
Open configuration.example.php and edit the following information:

$configuration['db'] = 'test'; // database name
$configuration['host'] = 'localhost'; // database host
$configuration['user'] = 'root'; // database user
$configuration['pass'] = 'pass'; // database password
$configuration['port'] = '3306'; // database port

and also:

//plugin settings
$configuration['plugins_path'] = '';

If you don’t know the full path to the plugins folder, you can try phpinfo() and search for “document_root”. Add “/plugins” to this variable (without a slash at the end.)

Save this file as “configuration.php” and upload it to the server.

Next thing we need to do is use POG to create our tables in the database. In your web browser; go to the root of the application and add /setup at the end of the URL. Click on “POG me up!” and you should see the following:

Yay! It worked! Basically, we can now start to use POG in our application, so let’s do that.

Let’s create a small test script to see how POG works and what it can do.
Create a file in the root called “test.php”. Add the following lines of code:

include('configuration.php');
include('objects/class.database.php');

include('objects/class.region.php');
include('objects/class.town.php');
include('objects/class.home.php');

This will include all the necessary files needed to make POG work and include the classes we’ve made.

In the next piece of code I am going to create a region, give it a name and a description, create a town that belongs to that region and put a home inside the town.

//create a region
$region = new Region();

$region->name = 'Super region';
$region->description = 'We are in love with this region!';

$region->Save();

//create a town
$town = new Town();

$town->name = 'Townsville';
$town->description = 'We don't need a description.';
$town->SetRegion($region);

$town->Save();

//create a home
$home = new Home();

$home->name = 'Superstreet 29';
$home->description = 'A house with a lot of windows.';
$home->objectSize = '100';
$home->lotSize = '120';
$home->price = '100000';
$home->buildYear = '2008';
$home->SetTown($town);

$home->Save();

Take a look at your database. All the information has been saved and the objects have been linked to each other.
Neat isn’t it?

In a later post I’ll explain how to use POG for getting information and build your own content management system around it. This article was an introduction to models and ORM. I hope you enjoyed it and if you have any thoughts or other frameworks / applications that do the same: let me know in the comments.

WordPress Plugin: Mark as Read

Tue, 09 Jun 2009 00:00:00 +0000

For the first time ever I created my own plugin. Starting out as a hacking attempt, it quickly changed into a prototype plugin.

What it basically does is list the articles that haven’t been read yet by a logged in user. Whenever a change to the post is made or a new comment is posted, the post moves to the top of the unread list.

Functionality:

Mark as Read makes it easy for your users to keep track of changes on your blog. Whenever a post is published or updated the post will show up in this list. When a new comment is posted, the post will also go up in this list and will be marked as “unread”.

Features:

Keeps track of which articles a logged in user has read.
Posts bump on new comments
Posts bump on published / updates
Customizable output
Lists per category or all categories
Usable non-output functions

Installation:

Download the plugin
Upload contents of the zip-archive (the folder) to the plugin directory of your WordPress installation (default: wp-content/plugins/)
Enable the plugin through the plugin admin panel
Paste code inside template file
Enjoy!

Usage:

To output the list all you need to do is to put the following code inside a template file of your theme:

<ul>
    <?php the_unread_posts(); ?>
</ul>

This will output all the unread content of all categories.

The following parameters are accepted:

the_unread_posts($categoryID, $noPostsMessage, $updateText, $rowStyle);

$categoryID (Optional, default: *”all”*):
Supply this parameter if you want to show unread messages from one category only. Give the string “all” if you want to display all categories.

$noPostsMessage (Optional, default: *”

No unread posts

“*):
Sets the output of an empty list.

$updateText (Optional, default: array(“New comment(s) and changes”, “Changes”, “New comment(s)”)):
Sets the output of the different types. Give an array with 3 values; first one being the output when a post has new comments and is updated, second for updates only and third for new comments only.

$rowStyle (Optional, default: *”

%type% on: %title%

“):
The HTML in which each post has to be shown. Use *%link%** to insert a permalink to the post, %title% for the post title and %type% for the type of change.

Puffing Smoke Effect in jQuery

Tue, 26 May 2009 00:00:00 +0000

Since the launch of the new looks, I’ve been getting some requests on how to make the puffing smoke effect that you can see in the header.

Thinking it might be a funny effect, I’d like to take this opportunity to discuss this effect.

Download the source code here: http://gaya.github.io/scripts/smokeeffect/smokeEffect.zip

View the examples here: http://gaya.github.io/scripts/smokeeffect/

As you can see on the example page, you can selected different types of smoke that will adjust the effect while keeping the code intact.

Creating this fun jQuery effect doesn’t take too much effort. I am going to quickly go through the steps of using this effect to show you how easy it can be.

Usage

Using this script takes just a few small steps. Enter the following code in the section of your HTML page (remove jQuery if you already included that):

<link href='css/smokePuff.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script src="js/smokeEffect.js" type="text/javascript"></script>

Next up is to put something in the page that will puff the smoke, I used the chimney from my home page. Include the following in your HTML:

<div id="smokeSpawnPoint">
    <img src='uri to your image' alt='chimney' />
</div>

Now it’s time to make the Javascript call and set up the smoke.

First we’re going to set the URI to the smoke / cloud image and the size in pixels.
Place this after the HTML from above:

<script type='text/javascript'>
    SmokeEffect.imgLocation = "http://www.yoursite.com/images/smoke.png";
    SmokeEffect.smokeWidth = 100;
    SmokeEffect.smokeHeight = 100;
</script>

Make sure the values match your smoke image. The smoke image is preferably a PNG image to make the effect look better and to be able to see the background. If you have a solid colour background, you can also use other formats.

Now start up the script by including the following code in the same <script> tag:

SmokeEffect.makeEffect("smokeSpawnPoint", 24, 12);

The first parameter is the id of the element the smoke has to come from. The next 2 are the position from the top-left of the element where the smoke has to start. First is X then Y.

So if you have an image of a chimney like me, the starting point is 24px to the right and 12px down from the top-left. Play with the values to get it right.

And that’s it! Another easy effect on your web page!

Extra!

If you want to change the kind of smoke coming out of the spawn point you can use this code to change it into another image:

SmokeEffect.imgLocation = "http://www.yoursite.com/images/otherSmoke.png";
SmokeEffect.smokeWidth = 90;
SmokeEffect.smokeHeight = 70;

You can change this dynamically whenever you want.

Good luck!

Caching external data in PHP

Thu, 14 May 2009 00:00:00 +0000

Caching data. If you are a developer you must have heard about it somewhere. Is it really that important? There is only one thing I can say to that: yes!
There are a lot of reasons why you should start caching data that has been calculated. The most common reason is to keep the owner of the data happy, saving him/her bandwidth and server capacity.

In this article I will be telling you how to cache data given from an external service, but can also be used to save local results.

Caching is also important for you! It can speed up your scripts and won’t bug your visitors with long loading times (which will get them walking.)
Imagine this: You have a very nice script which is very powerful but takes a while to load, since it calculates a whole lot of stuff. This action would take up about 4 seconds. Maybe it’s time to question if this action is really necessary every time a page is loaded, will this data fluctuate that much?

A great example of this problem is getting when you are getting your data from an external service. This will always require an other server to respond to your needs, slowing down the script. Wouldn’t it be better to get the information you need and save it on your server for the times you need that data?

There is also something else to keep in mind: How many times is the data updated and how many times do I need to refresh this data? If you are loading a list of things going on right at this moment, then you might not want to cache anything, for the information is real time. But if you want, let’s say, a weekly report on something. Then obviously you only need to update this data once a week.

To explain how to create your own caching method I am going to use another Last.fm API function. We are going to save last weeks favorite artist of a user and refresh this data once a week.

Getting the data to work with

First things first: create a folder using any FTP application. Make sure this folder is writable. I put a folder called “cache” in the root of my script folder. Make sure this folder is writable and readable for PHP, most people just CHMOD the folder to 777.
We’ll be writing our cached data in this folder. Also create the file you’ll be caching too, I used an empty file called “lastfm.xml”. Be sure to make it read and writable.

Next you want to go and grab any service you’d like. an XML provider, an RSS feed or even your own script. It doesn’t matter what you are caching. In this tutorial I am going to work with an XML providing service.

Next up is to create a new PHP class which is going to handle our caching and the gathering of data. Let’s create the class to do this for us. I created a file called “Caching.php” for the class to go in.

Take a look at this skeleton:

<?php
/*
* Caching A small PHP class to
*/

class Caching {

    var $filePath = "";
    var $apiURI = "";

    function __construct() {

    }

    function checkForRenewal() {

    }

    function getExternalInfo() {

    }

    function stripAndSaveFile() {

    }

}
?>

This piece of code will serve as the foundation of our class which will cache our information. We’ll be filling up each function step by step.

First we need a constructor which will accept the path to the file and a URI to the API. In this case, the XML data can be requested by only calling an URL.
The constructor will be executed the moment you instantiate the class.
A few things we’ll be doing in this function are:

Check the input variables.
Check if the local file needs to be updated.
Get new data if refresh is needed and save it.

I’ve set up the following piece of code for the constructor:

function __construct($filePath, $apiURI) {
    //check if the file path and api URI are specified, if not: break out of construct.
    if (strlen($filePath) > 0 && strlen($apiURI) > 0) {
        //set the local file path and api path
        $this->filePath = $filePath;
        $this->apiURI = $apiURI;

        //does the file need to be updated?
        if ($this->checkForRenewal()) {

            //get the data you need
            $xml = $this->getExternalInfo();

            //save the data to your file
            $this->stripAndSaveFile($xml);

        } else {
            //no need to update the file
            return true;
        }

    } else {
        echo "No file path and / or api URI specified.";
        return false;
    }
}

The process of this function is quiet self explanatory. So now we need to go and enable all the function calls within the constructor.

Making the functions work

First up is the time check called “checkForRenewal”. In this function we’ll be checking the file that has been set in the constructor and see if the last adjusted time has been a week ago. To accomplish this, we are going to compare the times using time() and filemtime(). These methods are extremely easy to use and can add any given amount of seconds to the time, which we need to check whether the file is a week old.

Use the following code for the “checkForRenewal” function:

function checkForRenewal() {
    //set the caching time (in seconds)
    $cachetime = (60 * 60 * 24 * 7); //one week

    //get the file time
    $filetimemod = filemtime($this->filePath) + $cachetime;

    //if the renewal date is smaller than now, return true; else false (no need for update)
    if ($filetimemod < time()) {
        return true;
    } else {
        return false;
    }
}

What this function does is get the time which the file was last modified and add the set seconds to it and see if that time is smaller than now. The cache time is defined in second, so 60 seconds * 60 minutes * 24 hours * 7 days would make a week worth of seconds. You can adjust this to any given time you want. For debugging I suggest setting the time to only 60 seconds.

The next function will be how to get the external of the URI we specified in the constructor. I’ve written a post about how to read XML in PHP before, so I’ll go over this function very briefly.

Reading the XML and saving it

In getExternalInfo() we are going to make the API call and just return the result as an XML set.

Take a look at the following code:

function getExternalInfo() {
    if ($xml = @simplexml_load_file($this->apiURI)) {
        return $xml;
    } else {
        return false;
    }
}

This must have been one of the shortest PHP function I ever wrote, this is all you need to do in order to get the XML you want (if the service provides XML through just doing simple URI calls.)

Next up is going through the XML and only keeping parts you want to save in your XML file.

Again: going to skip through some parts of the next function because you can read more about reading xml in an older article.

Looking at the XML returned by Last.fm I saw the first problem: unnecessary information. The name of the artist and play count are the only things I am interested in. Mbid? Don’t need that. Url? Not this time!
So the next function, “stripAndSaveFile”, will make us read XML, create our own and save it to a file. Sounds simple enough right?

Take a look at what I wrote:

function stripAndSaveFile($xml) {
    //put the artists in an array
    $artists = $xml->weeklyartistchart->artist;

    //building the xml object for SimpleXML
    $output = new SimpleXMLElement("<artists></artists>");

    //get only the top 10
    for ($i = 0; $i < 10; $i++) {

        //create a new artist
        $insert = $output->addChild("artist");

        //insert name and playcount childs to the artist
        $insert->addChild("name", $artists[$i]->name);
        $insert->addChild("playcount", $artists[$i]->playcount);
    }

    //save the xml in the cache
    file_put_contents($this->filePath, $output->asXML());
}

First thing it does is put the node inside a new variable to keep everything readable. The next lines are to create a new SimpleXML object you can work with.
new SimpleXMLElement(“”) means that I just created an XML document with as the root element. We’ll be filling up this element with elements. Sounds logical? It sure does!

In the the loop that comes next we’re looping through the first ten entries and create a new artist for every time you are in the loop.

$insert is a new node that will be inserted into the root. The and nodes are also inserted into the node with the information we got from the XML.

Pfew! Now it’s time to save the file on your file system! Which is the last line in this function. It will export the XML as a string and save it in the file.

Making the call!

Up until now we haven’t called the function once. So create a new script and put the following code in it:

<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);

include('Caching.php');
$caching = new Caching("cache/lastfm.xml", "http://ws.audioscrobbler.com/2.0/?method=user.getweeklyartistchart&user=xgayax&api_key=b25b959554ed76058ac220b7b2e0a026");
?>

I’ve put the first two lines in to ensure errors will be shown. If you have that by default; feel free to remove these lines.
Next is including the class file and then make a new instance of the class, giving the two required parameters: The path to the cache XML and the URL to the Last.fm API.

You won’t see anything if it’s correct. Now check out your cache to see if your XML is saved.

Congratulations! You just cached some information.

The source

Missed anything? Here is the source in it’s full galore!

The Caching class:

<?php
/*
* Caching A small PHP class to get data from Last.fm and cache it
* Author: Gaya Kessler
* URL: http://www.gayadesign.com/
*/

class Caching {

    var $filePath = "";
    var $apiURI = "";

    function __construct($filePath, $apiURI) {
        //check if the file path and api URI are specified, if not: break out of construct.
        if (strlen($filePath) > 0 && strlen($apiURI) > 0) {
            //set the local file path and api path
            $this->filePath = $filePath;
            $this->apiURI = $apiURI;

            //does the file need to be updated?
            if ($this->checkForRenewal()) {

                //get the data you need
                $xml = $this->getExternalInfo();

                //save the data to your file
                $this->stripAndSaveFile($xml);

                return true;
            } else {
                //no need to update the file
                return true;
            }

        } else {
            echo "No file path and / or api URI specified.";
            return false;
        }
    }

    function checkForRenewal() {
        //set the caching time (in seconds)
        $cachetime = (60 * 60 * 24 * 7); //one week

        //get the file time
        $filetimemod = filemtime($this->filePath) + $cachetime;

        //if the renewal date is smaller than now, return true; else false (no need for update)
        if ($filetimemod < time()) {
            return true;
        } else {
            return false;
        }
    }

    function getExternalInfo() {
        if ($xml = @simplexml_load_file($this->apiURI)) {
            return $xml;
        } else {
            return false;
        }
    }

    function stripAndSaveFile($xml) {
        //put the artists in an array
        $artists = $xml->weeklyartistchart->artist;

        //building the xml object for SimpleXML
        $output = new SimpleXMLElement("<artists></artists>");

        //get only the top 10
        for ($i = 0; $i < 10; $i++) {

            //create a new artist
            $insert = $output->addChild("artist");

            //insert name and playcount childs to the artist
            $insert->addChild("name", $artists[$i]->name);
            $insert->addChild("playcount", $artists[$i]->playcount);

        }

        //save the xml in the cache
        file_put_contents($this->filePath, $output->asXML());
    }

}

?>

Calling the scripts:

<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);

include('Caching.php');
$caching = new Caching("cache/lastfm.xml", "http://ws.audioscrobbler.com/2.0/?method=user.getweeklyartistchart&user=xgayax&api_key=b25b959554ed76058ac220b7b2e0a026");
?>

New design for Gaya Design

Tue, 12 May 2009 00:00:00 +0000

Yesterday I finally launched my new layout for the world to see! There are even new things to be done on the site now.

After about a month of hard work it’s done, ready to be shown in public.

I wanted to go for a retro, colourful and playful layout. With these things in mind I got working on an idea of the layout. I really like out of the box and semi 3D effects in web designs, looks different and so simple at the same time.

That’s why this layout looks like it does right now. After a few weeks of designing, coding the layout, designing again and coding again it was time to put the layout to the test. I got a lot of feedback from you guys and I am very thankful for that! You guys seriously rock!

A few things about the new design:

Advertisement spots are now available.
Chimneys on the roof that are smoking.
Oh, try and pick the chimneys up!
A few jQuery effects to give power to the design.
Tabbed content in the sidebar to see my top reads.
E-mail subscription on Feedburner.
Some navigational and page changes.

Thanks to everyone on Twitter too! You guys are amazing and gave me a lot of feedback! Thanks again!

Gaya Kessler, editor of Fuel Your Coding

Sat, 09 May 2009 00:00:00 +0000

You might have noticed, but for the ones that haven’t already read: I am now the editor of Fuel Your Coding; a new website by the Fuel Brand Group!

Visit the site for tutorials, tips, freebies and interview about coding, coders and tools! Along with the articles on this site, I’ll be posting development articles for you to read.

Website is located at http://www.fuelyourcoding.com and you can follow us on Twitter!

Subscribe to Fuel Your Coding via RSS for coding and dev tutorials, tips (inspiration as always), freebies and awesome interviews with amazing Front end & Back end developers. If you’d like to subscribe and get articles delivered to your email inbox as they are written, sign up here.

I want to thank everyone at Fuel Brand Group for letting me join their team!

Now in The Woods: Simulate Gravity with jQuery

Mon, 04 May 2009 00:00:00 +0000

I wrote a post a while ago about gravity in jQuery. Thinking it was a rather funny effect, I thought I’d submit this article to a famous weblog to see if they would accept it. And what do you know: it’s now on ThemeForest’s blog In The Woods!

The article will show you how to fake gravity using jQuery, creating real life simulation of objects falling.

Read the post here:
http://blog.themeforest.net/tutorials/simulate-gravity-with-jquery/

Animated tabbed content with jQuery

Sun, 26 Apr 2009 00:00:00 +0000

A lot of websites on the Internet have tabbed content now a days. The problem I find with most of them is that most of the time they can be quite dull. For my new looks I created a container which has the ability to switch content through tabs, but with an animation. This tutorial will show you how to create your own tabbed content step by step.

In this tutorial I am going to show you some web development techniques that can be used in your next projects. This will cover some CSS, HTML and jQuery tricks.

The sources of this tutorial are downloadable here: http://gaya.github.io/scripts/tabbed/tabbedContent.zip

Example of the outcome is found here: http://gaya.github.io/scripts/tabbed/

First thing we need is some basic HTML layout to fit what we are going to make.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Tabbed content</title>
    <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />

    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>

    <link href='css/tabbedContent.css' rel='stylesheet' type='text/css' />
    <script src="js/tabbedContent.js" type="text/javascript"></script>
</head>

<body>

</body>
</html>

I already included jQuery and other files in the head section. We’ll be making these files step by step in the next few minutes.

Next thing we need to do is create the structure of the document. What we need is a container with the tabs and a container which the content will that switch if we change tabs.
As a nice feature to enhance this all we’ll use a tab background that will move to the choice the user makes. While this tab moves, the content will also change to the selected tab.

For this we need a container containing the tabs and the background, a container containing the content and container that prevents the content to be shown prematurely.

Take a look at the following code:

<div class='tabbed_content'>
    <div class='tabs'>
        <div class='moving_bg'>
            &nbsp;
        </div>
        <span class='tab_item'>
        Tab one
        </span>
        <span class='tab_item'>
        Tab two
        </span>
        <span class='tab_item'>
        Tab three
        </span>
        <span class='tab_item'>
        Tab four
        </span>
    </div>

    <div class='slide_content'>
        <div class='tabslider'>

            <!-- content goes here -->

        </div>
    </div>
</div>

It’s time to do a little styling to the tabs section and the overall container. Note that in the next part I am going to use an image which is included in the source archive. This will enhance the looks of the tabbed container.

This following CSS will make the tabs appear as tabs:

.tabbed_content {
    background-color: #000000;
    width: 620px;
}

.tabs {
    height: 62px;
    position: relative;
}

.tabs .moving_bg {
    background-color:#7F822A;
    background-image:url(../images/arrow_down_green.gif);
    background-position: bottom left;
    background-repeat: no-repeat;
    left: 0;
    padding: 15px;
    padding-bottom: 29px;
    position: absolute;
    width: 125px;
    z-index: 190;
}

.tabs .tab_item {
    display: block;
    float: left;
    padding: 15px;
    width: 125px;
    color: #ffffff;
    text-align: center;
    z-index: 200;
    position: relative;
    cursor: pointer;
}

Note that the tab container has a position of relative to make the moving background position to it. Now we can easily move the moving background using the *left *property.

In the next part we are going to add the first few lines of Javascript to the tabbedContent.js file to create a mouseover effect on the tab items.

Use this code as a skeleton:

var TabbedContent = {
    init: function() {

    },

    slideContent: function(obj) {

    }
}

$(document).ready(function() {
    TabbedContent.init();
});

This code is will execute the init function once the page is loaded.

Now we need to make is so that the moving background moves to the tab item which is hovered on. Implement the following code:

$(".tab_item").mouseover(function() {

    var background = $(this).parent().find(".moving_bg");

    $(background).stop().animate({
        left: $(this).position()['left']
    }, {
        duration: 300
    });

    TabbedContent.slideContent($(this));

});

This will make all the items with the class tab_item behave as if it was a tab. It also moves the moving background to the right position, matching the *left *property with that of the tab.

TabbedContent.slideContent($(this)); will make the content switch in a few steps. We’ll get to that.

Next up is creating the content and it’s CSS. The content goes in the place we put **.

<ul>
    <li>
        This matches the first tab
    </li>
</ul>
<ul>
    <li>
        This matches the second tab
    </li>
</ul>
<ul>
    <li>
        This matches the third tab
    </li>
</ul>
<ul>
    <li>
        This matches the fourth tab
    </li>
</ul>

And the matching CSS:

.tabbed_content .slide_content {
    overflow: hidden;
    background-color: #000000;
    padding: 20px 0 20px 20px;
    position: relative;
    width: 600px;
}

.tabslider {
    width: 5000px;
}

.tabslider ul {
    float: left;
    width: 560px;
    margin: 0px;
    padding: 0px;
    margin-right: 40px;
}

.tabslider ul a {
    color: #ffffff;
    text-decoration: none;
}

.tabslider ul a:hover {
    color: #aaaaaa;
}

.tabslider ul li {
    padding-bottom: 7px;
}

Note that the content has two containers. One is for the overall wrapping and the other for making the content move as we hover over the items.

The top container has an overflow of hidden, which makes any content that goes out of it’s limits hidden. The container below that will hold the content that will be hidden.

Now we are going to make the content scroll to the right position as we did with the tabs.

It’s time to fill up the *slideContent *function:

var margin = $(obj).parent().parent().find(".slide_content").width();
margin = margin * ($(obj).prevAll().size() - 1);
margin = margin * -1;

$(obj).parent().parent().find(".tabslider").stop().animate({
    marginLeft: margin + "px"
}, {
    duration: 300
});

The margin needed for the slider to move is calculated in this function. It has been made so that you can change the widths of several containers in the result, it will scroll to the right position automatically.

Take another looks at the source for references.

Good luck with making your own tabbed content in your future projects.

New looks coming your way

Wed, 22 Apr 2009 00:00:00 +0000

The current design has been around for almost five months now. When I made that design, I didn’t really aim for it to be a weblog and didn’t pay much attention to its functionallity. I must say that in that time the design was kind of growing out of me and thought I needed a new one.

After a few days of thinking and many drafts I created a version suited better for my blogging needs. Read the post to see a large preview.

Tell me what you think about this concept. It’s not fully done yet, but it gives an idea of what the looks will be.
Thanks for watching!

jQuery convertion: Panoramic Photoviewer in Javascript

Thu, 09 Apr 2009 00:00:00 +0000

This is part two of my script convertions. From scriptaculous to jQuery in just a few minutes of work. This time it’s the Panoramic Photoviewer to get a jQuery makeover.

A few highlights:
From 200 to 80 lines of code (wow).
Works in more browsers.
Lightweight due to jQuery usage.

For all the jQuery lovers: Here is the Panoramic Photoviewer. Now in jQuery!

Since this article is a redo of Panoramic Photoviewer in Javascript I’ll just make it so that it fits jQuery.

The example page is located here:
http://gaya.github.io/scripts/jqueryphotonav/

And the archive is downloadable here:
http://gaya.github.io/scripts/jqueryphotonav/jqueryphotonav.zip

What is it?

This photo container has been adjusted to “move” with the cursor. To achieve this I used Javascript and a library called jQuery.

What do we have and what do we need to do?

Create a HTML layout for the picture to get in.
Adjust the CSS.
Make a call to PhotoNav in Javascript.

1. Create a HTML layout

This is the easiest step. It might just as well be a copy paste of the code below. But be aware of three things.
First give the overall container an id (so Javascript can grab the object).
Then make sure the div with classname fixed gets a second classname to correspond with the CSS (I used opt1 and opt2).
Determine if you want to have links inside of the container, if not; you can leave the container empty.

Take a look at the code below:

<div class='photo' style='display: none;' id='navigate'>
    <div class='fixed opt1'>
        <!-- this is optional -->
        <a href='http://gayadesign.com/post/' class='button1'>

        </a>
        <a href='http://gayadesign.com/portfolio/' class='button2'>

        </a>
        <a href='http://gayadesign.com/about/' class='button3'>

        </a>
        <a href='http://gayadesign.com/partners/' class='button4'>

        </a>
        <a href='http://gayadesign.com/contact/' class='button5'>

        </a>
    </div>
</div>

The overall container “navigate” will always be hidden prior to the actual Javascript call. I also gave the fixed div a second class. This classname will point to the options of the container; the height and the background image (the actual image that needs scrolling).
You can add <a> tags to the fixed container. I gave them all classnames so they can be positioned in the CSS. This part is optional.

Remember to include the jQuery library and the PhotoNav Javascript files in the header. Also include the CSS file photonav.css.

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/photonavjQuery.js" type="text/javascript"></script>
<link href='css/photonav.css' rel='stylesheet' type='text/css' />

2. Adjust the CSS

The top part of the CSS has to stay the way it is, do not adjust it if you don’t know what you are doing. I put a comment at the spot where you can start to edit the CSS.**
** I’ll describe what to do at each part of the CSS.

.photonav .photo:

.photonav .photo {
    width: 400px;
    margin: 10px;
    border: 1px solid gray;
}

Adjust the width of the total container. This has to be a fixed width in order for it to work in IE6. I have no idea why, but if the width was set to 100%, the height was 0px. You can do 100% in other browser with the !important trick.
The margin and border are optional, just make it as you’d like.

.photonav .photo .opt1:

.photonav .photo .opt1 {
    height: 100px;
    background-image: url();
}

This is the height of the photo container, at least, the fixed container. But notice the .opt1, it is the second classname we added to the fixed container in the HTML part.
The background image is the image that has to be viewed inside the container.

The next part is optional and only if you want buttons inside the container.

a.button*:

a.button1 {
    margin-left: 20px;
    margin-top: 30px;
    width: 100px;
    height: 90px;
    background-image: url();
}

a.button1:hover {
    background-image: url();
}

In order to create a menu navigation like I did on the preview page, you need to add a tags with different classnames. Define the pixels from the left side and the top of the container in the margin values. State the width and height of the button and the background image (if needed).
To create an onhover effect you can add an other image in the :hover part.
If you want a second a tag next to the other, subtract the *height *of the previous button from the margin-top.

3. Make a call to PhotoNav in Javascript
Now that you’ve got all the necessary HTML and CSS set, you can call the PhotoNav functionality. The following code can be put in a js file or in a strict tag.

document.getElementById('navigate').style.display = 'block';
PhotoNav.init('navigate', 758, 1412, false);

The specification is:
function **init(String id_of_container, **int *width_of_container, int *width_of_panorama_picture, bool*debugMode*);

String *id_of_container*:
The id of the container.

int *width_of_container:
Give the width in pixels of the *fixed container. For calculating reasons.

int *width_of_panorama_picture:
Give the width in pixels of the panoramic picture*. For calculating reasons.

bool*debugMode:
Enable debug mode. Outputting value to the HTML element with id *’status’. (default: false)

If you want to enable debug mode, you have to insert the following code somewhere in your HTML:

<div id='status'>
    &nbsp;
</div>

Now that everything is set, you can fire the thing up! Enable the navigation on loading a page or by triggering an event in Javascript. If you have implementations of this script, post your examples in the comment section, I’d like to see them.

I hope you like the second convertion to jQuery. Stay tuned for more!

Good luck!

jQuery convertion: Garagedoor effect using Javascript

Wed, 08 Apr 2009 00:00:00 +0000

Today I finally found the courage to go and try jQuery. After getting some people say: “You should use jQuery instead of scriptaculous.” I began thinking. What is the reason I choose script.aculo.us again? Must have been something I read in that time.
Anyway, today I found the time to look at jQuery a bit and thought: Let’s convert my very first posted script to jQuery!

After 5 minutes of reading about selectors in jQuery and 15 minutes of coding it was born. I am super amazed by the results! About 40%/50% less code and about 200% less time needed to write the script. I bet that in the future 400% less time is reachable!

For all the jQuery lovers: Here is the Garage Door effect. Now in jQuery!

Since this article is a redo of Garagedoor effect using Javascript I’ll just make it so that it fits jQuery.

An example of the GarageDoor effect in work is found here: http://gaya.github.io/scripts/jquerygaragedoor/

Download the following archive containing everything you need: http://gaya.github.io/scripts/jquerygaragedoor/jquerygarage.zip

*Unzip *the contents of the archive and upload the contents to your server, the set folders can be adjusted to your needs.

First we need to make the script ans style of the GarageDoor work. To make that happen, you’ll need jQuery. This library enables interface effects, so you don’t have to create it yourself. So grab jQuery and upload it to your server.

Add the following code in the **** tag of your page:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/garagedoorjQuery.js" type="text/javascript"></script>
<link href='css/garagedoor.css' rel='stylesheet' type='text/css' />

This will load the scripts and styles needed for the GarageDoor to work. *Adjust the paths where needed.
*

The next thing you want to do is to create the HTML layout for the garagedoors. The following code shows the structure you need to create for your document:

<div class='garagedoor' id='garagedoor'>
    <div title='linktofile' class='item'>
        <div class='underlay'>
            Caption text
        </div>
        <img src='uritooverlayimage' class='overlay' />
        <div class='mouse'><img src='images/nothing.gif' />&nbsp;</div>
    </div>
    <div title='linktofile' class='item'>
        <div class='underlay'>
            Caption text
        </div>
        <img src='uritooverlayimage' class='overlay' />
        <div class='mouse'><img src='images/nothing.gif' />&nbsp;</div>
    </div>
</div>

his contains two items that will be the garagedoor. The keywords linktofile and uritooverlayimage have to be adjusted in order to make it work. Linktofile is the URL of the page the button has to link to, might be confusing because it’s not an a tag, but Javascript fixes it for you.

The items have a default size of: 100px width *and *80px height. Create overlay images according to these dimensions. In order to change the size, take a look in the garagedoor.css file and adjust the width and height of several elements.

All there is left to do is call the GarageDoor to enable the effect!

<script type="text/javascript">
    GarageDoor.scrollY = -55;
    GarageDoor.scrollX = 0;
    GarageDoor.setBindings('garagedoor');
</script>

The first line in the <script> tag sets the amount of scrolling the overlay has to do when the cursor is floating over an item. In this example the overlay has to go 55 up, which means move -55px on the Y-axis. You can also make it scroll horizontal.

Give the id of the garagedoor container to the setBindings method and the GarageDoor effect will be initialized! Be sure to make the call after creating the html.

Hope you liked this jQuery version of the Garage Door. No more prototype conflicts!

Stay tuned for more jQuery convertions!

Image slider for displaying pictures or portfolios

Tue, 07 Apr 2009 00:00:00 +0000

I love image slideshows and portfolios with an extra bit of interaction and effects. The problem I found when I wanted to make one of my own was that I always ran out of ideas how to display portfolio items / pictures in a special way. But then it hit me, and the idea for this image slider was born.

Example of the image slider is located at: http://gaya.github.io/scripts/slider/

The slider and all its files can be downloaded here: http://gaya.github.io/scripts/slider/gdslider.zip

First I want to explain what this image slider does:
This image slider creates a slideshow of images and makes it look like the images have been cropped to only thin strokes. Once the user clicks on an image it will expand across the slideshow and show the picture in its full galore. Click of the left or the right side of the container to navigate to other pictures, the images will keep appearing as if there is an infinite loop of images. It also preloads the images that will be shown on the page.

The pictures in the example are all pictures from http://www.sxc.hu/ a nice site with free stock photos.

*Please note that this script does not work in IE6.
*

Implementing this script is fairly easy. The zip-archive contains everything you need except from Scriptaculous and Prototype. So let’s download that first.

Next, unzip the archive somewhere and upload the contents of the /src/ and /lib/ folders to you web server.

Great! Now that you have Scriptaculous uploaded, download the image slider and unzip it. Upload the contents to your web server (I used the js folder to put the Scriptaculous files in to keep things separated).

Now it’s time to make things work. Add the following code to your tag. Adjust the following code to your preferences:

<!-- include scriptaculous + prototype -->
<script src="js/scriptaculous/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous/scriptaculous.js" type="text/javascript"></script>

<script src="js/extraTransitions.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>

You can find the html code to put on your page in the example.html file which is the following:

<div id="items">
    <div id="loading">
        &nbsp;
        <div id="pictureLoadContainer"></div>
    </div>
    <div id="caption" style="display: none">
        <div class="background">&nbsp;</div>
        <div id="captionContent" style="display: none"></div>
    </div>
    <div id="overflow">
        <!-- put images with alt attributes here -->
    </div>
    <div id="SlideLeft" class="nav left">
        <img src="images/arrow_left.png" alt="Click to move left" />
    </div>
    <div id="SlideRight" class="nav right">
        <img src="images/arrow_right.png" alt="Click to move right" />
    </div>
</div>

The images you want to load inside the slider have to be 1000 x 620 by default. I’ll explain how adjust this later in the tutorial.

Put the images you want to load in the

called *”overlay”*, just like a normal image on your webpage.

<img src="uritoimage" alt="caption to go with the image" />
<img src="uritoimage" alt="caption to go with the image" />
<img src="uritoimage" alt="caption to go with the image" />
...

You are basically done with adjusting the script if you like the default looks.

To adjust the height and width of several elements take a look in the style.css file.

Define the height and width of the item container in: #container #items.
Define the size of the navigation buttons in: #container #items .nav.
Define the size of the items in: #container .item.
If you adjust the height also adjust it here: #container #items #overflow.

If you adjust the widths of elements you also have to change the slider.js file in the js folder. The code is at the top of the script:

/* edit these options according to your CSS */
itemWidth: 250, //width of an item
totalWidth: 1000, //total width of the container
navWidth: 112, //width of the nav including padding
/* end edit options */

Adjust the number to the amount of pixels you had it changed into. Easy not?

The script will load automatically and will only start once all the images have been loaded.

Have fun!

AjaxTwits – Load Tweets on your website with AJAX

Thu, 26 Mar 2009 00:00:00 +0000

Twitter is an amazing service to keep in touch with everyone on the Internet. It’s easy, fast and there are a lot of Twitter applications.

I came up with the idea to Ajaxify (is that even a word?) the tweets on my website. As you can see, it’s on the right, below the last.fm recently played. It’s called AjaxTwits!

This article will show you how to use AjaxTwits and how to install it on your website.

Example of AjaxTwits is located at: http://gaya.github.io/scripts/ajaxtwits/

AjaxTwits and all it’s files can be downloaded here: http://gaya.github.io/scripts/ajaxtwits/ajaxtwits.zip or the old version

Update notice:

There were a few things going from in the AjaxTwits class which have been fixed. Some tweets seems to make AjaxTwits stop working. I also included the date in the Javascript code.
Download the new zip to gain access to the improved code.

If you have an installation of AjaxTwits on your site you can replace the AjaxTwits.php class with the file from the new zip. The Javascript has changed to, but it’s not necessary to change.

What does AjaxTwits do?

Load a twitter timeline and / or the replies of a twitter account
Cache the results so you don’t stress the twitter servers
Avatar finder (auto update if user uploads a new one)
Load multiple timelines / replies from different accounts
AJAX support with JSON option or XML
Front-end Javascript output
Automatic hyperlink finder and @username linking
Easy to adjust to your likings

Why AjaxTwits?

The problem with loading twitter on the server side part of your website is that it will slow down the load time massively. Which means your pages will load pretty slow.

This is because of the use of external feeds and services, it takes some time to load them. The server will read the XML and RSS feeds very quickly, but PHP still has to load the files from the Twitter servers.

AjaxTwits keeps the load time separate from your website, meaning it will load after your page is loaded and not effecting the user experience. Yes, the services still need to be loaded. But the loading is done afterward.

The caching of results prevents the service to stop loading the feeds. Twitter has a build in limit of requests, so be gentle on their servers.
This also helps to load AjaxTwits very quickly and output tweets in a few milliseconds!

The twitter timeline is also limited to only your tweets and not those of other people. That’s why AjaxTweets also supports search queries performed on http://search.twitter.com/. AjaxTwits has an easy build-in option to get all the reply messages of a user and mix them into the timeline.

What do I need?

PHP with JSON and SimpleXML support (PHP 5.2.0 or greater)
A Twitter account to consume or a Twitter account of someone else
An FTP client to upload contents to the server

How to install:

AjaxTwits is fairly easy to install, the following steps will enable AjaxTwits on your website!

Step 1: Download and upload AjaxTwits

Download AjaxTwits here: http://gaya.github.io/scripts/ajaxtwits/ajaxtwits.zip.

Unzip the contents and upload them to your web server. Anywhere you’d like!

Step 2: Adjust the request file

In the “AjaxTwits“ folder you just uploaded***is a file called “AjaxTwitsRequest.php*” and “AjaxTwitsUpdate.php“. Open this file in an editor.

//include AjaxTwits and create an object
include('AjaxTwits.php');
$ajaxTwits = new AjaxTwits;

//set the cache to a writable folder, to save xml files
$ajaxTwits->cachefolder = "AjaxTwits/cache";
//the amount of minutes the feed is cached
$ajaxTwits->cacheTime = 15;

//the amount of items you'll show
$ajaxTwits->itemCount = 6;

//add your twitter account feeds
$ajaxTwits->addTimeline("gayadesign");
$ajaxTwits->addReplies("gayadesign");

//this will output the information, JSON is for the Javascript application
$ajaxTwits->outputFeed("json");

Adjust the following line to your likings:

*$ajaxTwits->cachefolder = “AjaxTwits/cache”;
This is the folder where the XMLs will be cached. Enter the folder starting in the root of your website. So if you have AjaxTwits installed in */blog/AjaxTwits/ the cache folder should be blog/AjaxTwits/cache.

*$ajaxTwits->cacheTime = 15;
*The amount of minutes the XML should stay on your server before it will be refreshed.**This means that every 15 minutes the timeline will be updated on your site. Adjust to your likings.

$ajaxTwits->itemCount = 6;
The amount of items you want to output on your website.

$ajaxTwits->addTimeline(“gayadesign”);
Load the public timeline of the given username.

$ajaxTwits->addReplies(“gayadesign”);
Load the replies of the given user. Every tweet on Twitter containing @gayadesign in this case.

Upload the adjusted file to your server if needed.

Step 3: Make the cache folder writable

Explore the server contents with an FTP client and make the cache folder (default: AjaxTwits/cache) writable using chmod 777.

This is for saving XML on the server.

Step 4: Include AjaxTwits on your webpage

In the header () of your HTML add the following code:

<script src="js/AjaxTwits.js" type="text/javascript"></script>
<link href='css/AjaxTwits.css' rel='stylesheet' type='text/css' />

This will load the necessary Javascript + the styling of the widget.

Add this to your HTML on the place you want to include the widget:

<ul id='AjaxTwits'>
    <li id='AjaxTwitsLoader'>
        <em>Loading tweets</em>
    </li>
</ul>
<script type="text/javascript">
    getAjaxTwits("AjaxTwits/AjaxTwitsRequest.php", 6);
</script>

The tweets that are loaded will be inserted into the unordered list with id AjaxTwits. The list item *AjaxTwitsLoader *will be deleted.

Adjust getAjaxTwits(“AjaxTwits/AjaxTwitsRequest.php”, “AjaxTwits/AjaxTwitsUpdate.php”, 6); to your preferences.

The first parameter is the location of the AjaxTwitsRequest.php file. The second parameter is the location of the AjaxTwitsUpdate.php file. The third parameter is the amount of items to show.

Conclusion:

That’s all you have to do! Not that much right?

You can adjust the CSS and mess around with the Javascript if you like.

Hope this will help you create a nice Twitter widget on your website.

What to do with AJAX and what not to

Fri, 20 Mar 2009 00:00:00 +0000

AJAX is one the nicest concept I’ve seen in web development. The basics are simple and quite easy to use.
There are a lot of AJAX frameworks around like jQuery, Prototype and backbase. These frameworks help you create an AJAX application with ease.
But is AJAX really that good? No, but if you use it correctly, it is!

In this article I wish to share my view on AJAX and the possibilities it gives to web developers and designers, and why AJAX is wrong in several situations.

[![What to do with AJAX and what not to](/articles/what-to-do-with-ajax-and-what-not-to/ajaxpost.jpg "What to do with AJAX and what not to")](/articles/what-to-do-with-ajax-and-what-not-to/)

Case 1: Page loading

What’s up with websites and dynamically loading pages through AJAX? Isn’t it a bit strange that when you want to switch to another page, there is no real page switch?
Sure, I like it when content is loaded into the website dynamically, saving me bandwidth, time and irritation. But a whole page? Isn’t that kind of missing the point?

First of all: What about the back and forward buttons of your browser? No use for them if you load a whole page in AJAX.
Second: Funny when a user tries to copy the URL and send it to a friend. Oops, the page is loaded without the content the user expected.
Third: Search Engines can’t pick it up since it is not really a new page.

A better way to load content through AJAX is to load only small parts of information on the page. If the users wishes to visit another page, let the browser go to another page.
Loading content in a small part of the page isn’t a bad thing. If you have a container with tabbed content, it’s easy to load the content of other tabs with AJAX, not a problem.

Loading a whole page in AJAX is just overusing the functionality and really missing the point of web browsing.

Case 2: The content manager

Being able to adjust the information of your web profile on a web page with the use of AJAX is cool. Fast feedback, fast loading times and convenient. But is it really secure?
I’ve seen sites where the HTTP calls to the server contained the key and value of the part they wanted to configure. Which means the record which will be adjusted is defined. This means you could also change information of other rows in the database. Why? You need to wonder what parts of the profile can be adjusted, and if it applies only to the user who is trying to configure their information, why do you need a key to tell the server which record to adjust?
In PHP, for example, it only takes little effort to remember a value in a session. With this, you know which user is using the website and if you open the session in the AJAX server side pages, you can still read that session. Makes it easy to tell which record to update and doesn’t give a user the opportunity to mess around in your system.

If you do want to send along a key + value, which could be needed in some situations (like inserting a comment), be sure to check the given values in the server side scripts. Can’t say this enough to people, but please be sure the user that is trying to insert / update data has access to that data. This also applies to normal usage of forms, but adjusting an AJAX request is harder for most users. Still it is possible! So be on your guard.

Case 3: One click update

This one is something I love about AJAX. The vote buttons on sites, the follow button on Twitter, delete entry buttons and many more of those. The convenience of just clicking once without having to refresh the page is awesome. It’s so simple, yet so powerful.
If you are using such a thing, keep case 2 in mind.

Case 4: Content loading

One of the most important things of dynamic loading: it has to be quick. Sending a request to a server doesn’t always have to take up most of the time, but loading the response can be a real pain.
Keep the response clean and small. I’ve seen examples (I’ve been guilty in the past) of people giving HTML back in the response. With this they’ll adjust the innerHTML of a container. In the worst case they’ll load a whole new page (like in case 1).

To solve this, please use JSON or anything of that kind. JSON helps you convert server side variables to Javascript variables. The response the server will give are Javascript variables for Javascript to read. JSON has been implemented in PHP since version 5.2.0 and is easy to use.

Don’t give HTML back to your web page, but arrays of information. This helps keeping the presentation of your site and the calculation apart from each other. Do the adjusting of the DOM in Javascript.

Case 5: External Services

When you use external services and feeds to build a web page in server side scripting, you rely on an external service. This can also result is pages loading slower than needed. The is why AJAX is ideal for loading external services.

You can see it in action on this very page. The last.fm loader actually makes a request to last.fm for an XML and I am reading the XML in PHP and give it back to Javascript. This will prevent slow loading of the rest of the page and let’s the information just easily slip in the page when it’s ready.

I hope I’ve given my point of view on AJAX and how to use it. If you wish to discuss the things that I’ve said; please do so!

Share your AJAX stories with me =)

Customize the default alert() function of Javascript

Wed, 11 Mar 2009 00:00:00 +0000

Web designers, developers and web users know them. We all have run across one of these; the Javascript alert message. Most of the time, I don’t even read them and click them away. But the more important thing is that they just look ugly, no matter which browser you use.

So why not remake the whole Javascript alert function? This article will give you the basics of my customization of the alert message.

[![Customize the default alert() function of Javascript](/articles/customize-the-default-alert-function-of-javascript/gdalertintro.jpg "Customize the default alert() function of Javascript")](/articles/customize-the-default-alert-function-of-javascript/)

While working on a new project which will launch in a few months (I hope!) I used a lot of alert messages in Javascript, just because it’s easy and quick to use. The problem still is that it looks ugly. So, I decided to overwrite the alert function and create my own version of it. Sweet, not?

What did I do?

First of all, I needed a way to overwrite the alert function because I didn’t want to go and refactor all of my code to call another function, you programmers understand me ;).
Next is how the message should displayed on the screen.

The first problem is surprisingly easy, you can just overwrite a function by declaring it again.

To display the message, I created a quick container which will be centered. There will also be a container beneath with message box to darken and disable the rest of the page.

Okay, so now for the things you need to do.

Go to http://script.aculo.us/downloads and download the latest version of scriptaculous.
Also download GdAlert: http://gaya.github.io/scripts/gdalert/gdalert.zip

Upload the contents to your server.

Now place the following code in the head section of your page.

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/gdAlert.js" type="text/javascript"></script>

So now that you’ve got the Javascript files ready, we now need to do one last thing.

Include the following code right after the **** tag:

<div id='alert_message' style='display: none'>
    <span>

    </span>
    <input type='button' value='ok' class='button' onclick='gdAlert.close()' />
    <br style='clear: both' />
</div>

That was it. Now all your alert function calls will be nicer and personalized.

Take a look in the CSS to configure the looks of the message box, I’d really like to see what variations you make of this script.

Good luck!

Album art which boosts my inspiration

Mon, 16 Feb 2009 00:00:00 +0000

Today I was scrolling through albums I got, and I thought that some album covers just look amazing.

Some of these album covers really want to make me listen to the album. I thought I’d share some with you. If you feel like you can add a nice one, put it in the comments below.

[![Album art which boosts my inspiration](/articles/album-art-which-boosts-my-inspiration/inspirationboosters.jpg "Album art which boosts my inspiration")](/articles/album-art-which-boosts-my-inspiration/)

Album art has been ordered in alphabetical order.

Animosity

[![animosity_animal](/articles/album-art-which-boosts-my-inspiration/animosity_animal.jpg "animosity_animal")](/articles/album-art-which-boosts-my-inspiration/attachment/animosity_animal/) Animal [2007]

[August Burns Red](http://www.augustburnsred.com/)

[![august-burns-red_thrill-seeker](/articles/album-art-which-boosts-my-inspiration/august-burns-red_thrill-seeker.jpg "august-burns-red_thrill-seeker")](/articles/album-art-which-boosts-my-inspiration/attachment/august-burns-red_thrill-seeker/) Trill Seeker [2005]

[The Blood Brothers](http://www.thebloodbrothers.com/)

[![bloodbrother_burnpianoislandburn](/articles/album-art-which-boosts-my-inspiration/bloodbrother_burnpianoislandburn.jpg "bloodbrother_burnpianoislandburn")](/articles/album-art-which-boosts-my-inspiration/attachment/bloodbrother_burnpianoislandburn/)

Burn Piano Island, Burn [2003][![bloodbrothers_young-machetes](/articles/album-art-which-boosts-my-inspiration/bloodbrothers_young-machetes.jpg "bloodbrothers_young-machetes")](/articles/album-art-which-boosts-my-inspiration/attachment/bloodbrothers_young-machetes/)

Young Machetes [2006]

[Circa Survive](http://www.circasurvive.com/)

[![circa-survive_on-letting-go](/articles/album-art-which-boosts-my-inspiration/circa-survive_on-letting-go.jpg "circa-survive_on-letting-go")](/articles/album-art-which-boosts-my-inspiration/attachment/circa-survive_on-letting-go/) On Letting Go [2007]

[Destroyer Destroyer](http://www.myspace.com/destroyerdestroyer/)

[![destroyerdestroyer_littered-with-arrows](/articles/album-art-which-boosts-my-inspiration/destroyerdestroyer_littered-with-arrows.jpg "destroyerdestroyer_littered-with-arrows")](/articles/album-art-which-boosts-my-inspiration/attachment/destroyerdestroyer_littered-with-arrows/) Littered with Arrows [2007]

[Duck Duck Goose](http://www.myspace.com/duckduckgoose/)

[![duckduckgoose_morenoise](/articles/album-art-which-boosts-my-inspiration/duckduckgoose_morenoise.jpg "duckduckgoose_morenoise")](/articles/album-art-which-boosts-my-inspiration/attachment/duckduckgoose_morenoise/) Noise, Noise and More Noise [2007]

[The Devil Wear Prada](http://www.myspace.com/tdwp/)

[![dwp_plagues](/articles/album-art-which-boosts-my-inspiration/dwp_plagues.jpg "dwp_plagues")](/articles/album-art-which-boosts-my-inspiration/attachment/dwp_plagues/) Plagues [2007]

[The Fall of Troy](http://www.thefalloftroy.com/)

[![fot_doppelganger](/articles/album-art-which-boosts-my-inspiration/fot_doppelganger.jpg "fot_doppelganger")](/articles/album-art-which-boosts-my-inspiration/attachment/fot_doppelganger/) Doppelgänger [2005][![fot_manipulator](/articles/album-art-which-boosts-my-inspiration/fot_manipulator.jpg "fot_manipulator")](/articles/album-art-which-boosts-my-inspiration/attachment/fot_manipulator/) Manipulator [2007][![fot_tfot](/articles/album-art-which-boosts-my-inspiration/fot_tfot.jpg "fot_tfot")](/articles/album-art-which-boosts-my-inspiration/attachment/fot_tfot/) S/T [2003]

[Fear Before the March of Flames](http://www.myspace.com/marchofflames/)

[![fbtmof_odd-how-people-shake](/articles/album-art-which-boosts-my-inspiration/fbtmof_odd-how-people-shake.jpg "fbtmof_odd-how-people-shake")](/articles/album-art-which-boosts-my-inspiration/attachment/fbtmof_odd-how-people-shake/) Odd How People Shake [2004][![fbtmof_the-always-open-mouth](/articles/album-art-which-boosts-my-inspiration/fbtmof_the-always-open-mouth.jpg "fbtmof_the-always-open-mouth")](/articles/album-art-which-boosts-my-inspiration/attachment/fbtmof_the-always-open-mouth/) The Always Open Mouth [2006]

[Fugazi](http://en.wikipedia.org/wiki/Fugazi/)

[![fugazi_redmedicine](/articles/album-art-which-boosts-my-inspiration/fugazi_redmedicine.jpg "fugazi_redmedicine")](/articles/album-art-which-boosts-my-inspiration/attachment/fugazi_redmedicine/) Red Medicine [1995]

[Genghis Tron](http://www.genghistron.com/)

[![genghis-tron-board_up_the_house](/articles/album-art-which-boosts-my-inspiration/genghis-tron-board_up_the_house.jpg "genghis-tron-board_up_the_house")](/articles/album-art-which-boosts-my-inspiration/attachment/genghis-tron-board_up_the_house/) Board Up The House [2008]

[Heavy Heavy Low Low](http://www.myspace.com/heavyheavylowlow/)

[![hhll_fuckit1](/articles/album-art-which-boosts-my-inspiration/hhll_fuckit1.jpg "hhll_fuckit1")](/articles/album-art-which-boosts-my-inspiration/attachment/hhll_fuckit1/) ...fuck it?! [2007][![hhll_turtle-nipple-and-toxic-shock1](/articles/album-art-which-boosts-my-inspiration/hhll_turtle-nipple-and-toxic-shock1.jpg "hhll_turtle-nipple-and-toxic-shock1")](/articles/album-art-which-boosts-my-inspiration/attachment/hhll_turtle-nipple-and-toxic-shock1/) Turtle Nipple and Toxic Shock [2008]

[HORSE the band](http://www.horsetheband.com/)

[![horsetheband_pizzaep](/articles/album-art-which-boosts-my-inspiration/horsetheband_pizzaep.jpg "horsetheband_pizzaep")](/articles/album-art-which-boosts-my-inspiration/attachment/horsetheband_pizzaep/) Pizza EP [2006]

[IAMERROR](http://www.myspace.com/iamerror/)

[![iamerror_trout-yogurt](/articles/album-art-which-boosts-my-inspiration/iamerror_trout-yogurt.jpg "iamerror_trout-yogurt")](/articles/album-art-which-boosts-my-inspiration/attachment/iamerror_trout-yogurt/) Trout Yogurt [2007]

[I Set My Friends On Fire](http://www.isetmyfriendsonfire.com/)

[![ismfof_you-cant-spell-slaughter-without-laughter](/articles/album-art-which-boosts-my-inspiration/ismfof_you-cant-spell-slaughter-without-laughter.jpg "ismfof_you-cant-spell-slaughter-without-laughter")](/articles/album-art-which-boosts-my-inspiration/attachment/ismfof_you-cant-spell-slaughter-without-laughter/) You Can't Spell Slaughter Without Laughter [2008]

[IWRESTLEDABEARONCE](http://www.myspace.com/IWRESTLEDABEARONCE/)

[![iwrestledabearonce_iwrestledabearonce](/articles/album-art-which-boosts-my-inspiration/iwrestledabearonce_iwrestledabearonce.jpg "iwrestledabearonce_iwrestledabearonce")](/articles/album-art-which-boosts-my-inspiration/attachment/iwrestledabearonce_iwrestledabearonce/) EP [2007]

[Maylene and the Sons of Disaster](http://www.mayleneandthesonsofdisaster.us/)

[![maylene_and_the_sons_of_disaster_-_ii](/articles/album-art-which-boosts-my-inspiration/maylene_and_the_sons_of_disaster_-_ii.jpg "maylene_and_the_sons_of_disaster_-_ii")](/articles/album-art-which-boosts-my-inspiration/attachment/maylene_and_the_sons_of_disaster_-_ii/) II [2007]

[The Number Twelve Looks Like You](http://www.itsnumber12time.com/)

[![tntlly_mongrel](/articles/album-art-which-boosts-my-inspiration/tntlly_mongrel.jpg "tntlly_mongrel")](/articles/album-art-which-boosts-my-inspiration/attachment/tntlly_mongrel/) Mongrel [2007]

[The Promise Ring](http://en.wikipedia.org/wiki/The_Promise_Ring/)

[![promisering_nothing-feels-good](/articles/album-art-which-boosts-my-inspiration/promisering_nothing-feels-good.jpg "promisering_nothing-feels-good")](/articles/album-art-which-boosts-my-inspiration/attachment/promisering_nothing-feels-good/) Nothing Feels Good [1997]

[Saetia](http://www.level-plane.com/saetia/)

[![saetia_a-retrospective](/articles/album-art-which-boosts-my-inspiration/saetia_a-retrospective.jpg "saetia_a-retrospective")](/articles/album-art-which-boosts-my-inspiration/attachment/saetia_a-retrospective/) A Retrospective [1998]

[Said and Done](http://www.saidanddone.org/)

[![saidanddone_endlessroads](/articles/album-art-which-boosts-my-inspiration/saidanddone_endlessroads.jpg "saidanddone_endlessroads")](/articles/album-art-which-boosts-my-inspiration/attachment/saidanddone_endlessroads/) Endless Roads [2008]

[See You Next Tuesday](http://www.myspace.com/seeyounexttuesday/)

[![see-you-next-tuesday_intervals](/articles/album-art-which-boosts-my-inspiration/see-you-next-tuesday_intervals.jpg "see-you-next-tuesday_intervals")](/articles/album-art-which-boosts-my-inspiration/attachment/see-you-next-tuesday_intervals/) Intervals [2008][![seeyounexttuesday_parasite](/articles/album-art-which-boosts-my-inspiration/seeyounexttuesday_parasite.jpg "seeyounexttuesday_parasite")](/articles/album-art-which-boosts-my-inspiration/attachment/seeyounexttuesday_parasite/) Parasite [2007]

[Sunny Day Real Estate](http://en.wikipedia.org/wiki/Sunny_Day_Real_Estate)

[![sunny_day_real_estate_diary](/articles/album-art-which-boosts-my-inspiration/sunny_day_real_estate_diary.jpg "sunny_day_real_estate_diary")](/articles/album-art-which-boosts-my-inspiration/attachment/sunny_day_real_estate_diary/) Diary [1994]

Download counter in PHP using .htaccess

Thu, 12 Feb 2009 00:00:00 +0000

Ever had this thought: “I want to fire something *extra *up when somebody downloads a certain file.”? This can be easily fixed by making all you download links link to a php page and output the download file for you. But what if the file is called directly in the browser, say http://gaya.github.io/scripts/photonav/photonav.zip? Apache will happily give the file to the user, without me noticing it. Luckily for us, .htaccess is a great place to mess around with Apache.

This article will explain how to make pre-download conditions in php using .htaccess. I’ll make a download counter in this one.

[![Download counter in PHP using .htaccess](/articles/download-counter-in-php-using-htaccess/downloadcounter.jpg "Download counter in PHP using .htaccess")](/articles/download-counter-in-php-using-htaccess/)

Think of the possibilities! You could build a download counter, a place to check if the user has rights to download a certain file, create a bandwidth limit, and the list goes on and on.

Keeping track of downloads is a feature many developers want, even firing *”something”* (read: doStuff()) before a file is requested for download is handy.

Okay, what do you need?

Apache web server with rewrite module enabled (probably the case)
a decent text editor (like notepad++)
optional: in this tutorial I’ll be using PHP

First, we need to get an .htaccess rule going. To do this you have to adjust your .htaccess file, or create a new one. To create a new .htaccess file in Notepad++ just open a new file and save as .htaccess. This is a hidden file on a unix system, but don’t worry.

Put the following lines in the .htaccess file:

#Let's do rewriting!
RewriteEngine on
RewriteRule ^(.*).(rar|zip|pdf)$ /download.php?file=$1.$2 [R,L]

This redirects every .rar, .zip and .pdf to the download.php file and include the file path as a parameter. I already hear developers think: “And what if I prompted it to output a .php file though a browser call?”. We’ll fix that in the PHP file.

To add more extensions, separate them with a | (shift + ).

A few notes on .htaccess:
The file will work from the root of the folder you’ll put this into at your web server. All folders beneath the root will be affected. If you place the file in say /files/, the path will not be included in the file parameter. You’ll have to either add this in the download.php file or .htaccess file.

Upload the file in your webroot.

Next up, we are going to create a table in MySQL. You can do this in phpMyAdmin, it’s a small table.

If you already have a table called download, you have to change the SQL code.

CREATE TABLE `download` (
`filename` varchar(255) NOT NULL,
`stats` int(11) NOT NULL,
PRIMARY KEY (`filename`)
)

Execute this SQL statement in the SQL window, it’ll create a new table.

Now it’s time to get the PHP to work.

The following code allows you to keep track of download requests in the table you created above:

<?php

    //put connection to database here
    mysql_connect("localhost", "username", "password")
    or die ("Sorry, can't connect to database.");
    mysql_select_db("dbname");

    $filename = mysql_real_escape_string($_GET['file']);
    $path = $_SERVER['DOCUMENT_ROOT']."/"; //path of this file
    $fullPath = $path.$filename; //path to download file

    $filetypes = array("rar","zip","pdf");

    if (!in_array(substr($filename, -3), $filetypes)) {
        echo "Invalid download type.";
        exit;
    }

    if ($fd = fopen ($fullPath, "r")) {
        //add download stat
        $result = mysql_query("SELECT COUNT(*) AS countfile FROM download
        WHERE filename='" . $filename . "'");
        $data = mysql_fetch_array($result);
        $q = "";

        if ($data['countfile'] > 0) {
            $q = "UPDATE download SET stats = stats + 1 WHERE
            filename = '" . $filename . "'";
        } else {
            $q = "INSERT INTO download (filename, stats) VALUES
            ('" . $filename . "', 1)";
        }

        $statresult = mysql_query($q);

        //the next part outputs the file
        $fsize = filesize($fullPath);
        $path_parts = pathinfo($fullPath);

        header("Content-type: application/octet-stream");
        header("Content-Disposition: filename=".$path_parts["basename"]."");
        header("Content-length: $fsize");
        header("Cache-control: private"); //use this to open files directly
        while(!feof($fd)) {
            $buffer = fread($fd, 2048);
            echo $buffer;
        }
    }
    fclose ($fd);
    exit;

?>

Let me explain what you can change in the code in short; in the first part of the file, you’ll connect to your database. Please change the values to match your settings.

You can change the $filetypes to your likings, this will contain the accepted file extensions.

The php script will eventually output the file to your browser, neat eh? Download the zip file for a quick look in the files.

I hope this will help you to create pre-conditions on your downloads.

Good luck!

Lightbox + PhotoNav = LightNav

Mon, 09 Feb 2009 00:00:00 +0000

If you’ve been around the web for a while, you might have heard of Lightbox. And if you used it, you might also know the limitations.

One of those limitations is of course the fact that an image wider than your screen goes out of bounds. Very annoying! And it creates ugly scrolbars.

As you might know, I have created a Panoramic Photoviewer in Javascript to fix the problem of images going out of bounds. And I thought to myself: “Why not try and implement PhotoNav on top of Lightbox?”. With this, even super large images would be viewable.

I created LightNav for this. It runs along Lightbox without changing the script, so you can always update Lightbox if needed.

[![Lightbox + PhotoNav = LightNav](/articles/lightbox-photonav-lightnav/lightnav.jpg "Lightbox + PhotoNav = LightNav")](/articles/lightbox-photonav-lightnav/)

The example page is located here:
http://gaya.github.io/scripts/lightnav/

And the archive is downloadable here:
http://gaya.github.io/scripts/lightnav/lightnav.zip

Using LightNav is easy! I’ll tell you what you need to do in this step-by-step guide:

Go to the Lightbox project page and download the zip: http://www.huddletogether.com/projects/lightbox2/#download

The files from the zip we are going to need are: lightbox.js, lightbox.css and the images in the images folder.

For this installation, we don’t need the prototype.js and scriptaculous.js file from this zip.

Now upload the files to your server. Check the lightbox.js file in the top section for the image paths. These settings are on line 49 and line 50. They have to be set correctly to get a good output on your page.

2. Download and use Scriptaculous.

Go to http://script.aculo.us/downloads and download the latest version of scriptaculous.

Upload the files to your server.

Now it’s time to make use of Lightbox and Scriptaculous on your webpage by placing this code in the head section of your webpage:

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />

Fix the paths to the files as they are on your server. Now you have included the technology which will make Lightbox work. Now it’s time to include LightNav to upgrade Lightbox!

Download LightNav here: http://gaya.github.io/scripts/lightnav/lightnav.zip

*Upload *the contents to your server.

Now place the following code in the head section of your page (under the previous tags!)

<script src="js/lightnav.js" type="text/javascript"></script>
<script src="js/photonav.js" type="text/javascript"></script>

<link href='css/photonav.css' rel='stylesheet' type='text/css' />

LightNav will overwrite some functionality of Lightbox and make use of PhotoNav to create a navigation feature.

You are basically done now! But if you can configure LightNav to your needs in the following part of the lightnav.js file:

//you can adjust this to your needs.
var LightNavOptions = {
    maxWidth: 800,
    maxHeight: 600
}

The maxWidth *and *maxHeight *give the maximum width and height (in pixels) of the LightBox window, making it impossible to get bigger than that.
If you set these variables to *0 LightNav will create a width and height according to the browse window of the user, which will also fix the out of bounds problem!

I hope I helped some people with this. Follow my feed if you wish to see more Javascript tweaks.

Happy tweaking your Lightbox!

Fight the spammers

Sun, 08 Feb 2009 00:00:00 +0000

In the first few weeks of my website’s existence, the spam machine left my website alone. But as soon as my site got linked on various webpages around the world. The spam started to slip in. Online casinos, free slot machines and oh-so-hot girls.
There had to be something to quickly protect my site against spam. I know captcha works quite well, but the problem with captcha is that users always have to read unreadable images. These impossible captchas annoy the hell out of me, so that was out of the question.

I know Wordpress****has a nice plugin called Akismet which is filtering spam quite good. I’ve been using it for some time on my DS article site, and it has been filtering a lot of spam.

[![Fight the spammers](/articles/fight-the-spammers/akismet.jpg "Fight the spammers")](/articles/fight-the-spammers/)

Here are the things I used to filter spam:

I already had the Wordpress API key because of my DS blog. You can also use one if you already have a Wordpress blog.

The main thing you need to do in order to filter spam content is to let Akismet check the content of the posted data. This can be for comments, short messages or just any content a user is able to post.

include('/path/to/akismet/class.php');
$WordPressAPIKey = 'aoeu1aoue';
$MyBlogURL = 'http://www.example.com/blog/';

$akismet = new Akismet($MyBlogURL ,$WordPressAPIKey);
$akismet->setCommentAuthor($name);
$akismet->setCommentAuthorEmail($email);
$akismet->setCommentAuthorURL($url);
$akismet->setCommentContent($comment);
$akismet->setPermalink("http://www.example.com/blog/alex/someurl/");

if($akismet->isCommentSpam()) {
    // store the comment but mark it as spam (in case of a mis-diagnosis)
} else {
    // store the comment normally
}

It’s just that easy! Include the PHP class, set some parameters and let Akismet do the checking.

Be sure to store the spam also! Sometimes regular messages can be marked as spam, which is a bad thing. I just used an easy field in my comments table to mark it as spam or a normal message.

If you want to implement Akismet on another platform you should check out: http://akismet.com/development/

Good luck giving the finger to spam without Captcha!

Groovy, baby!

Tue, 03 Feb 2009 00:00:00 +0000

The last six months I’ve been researching a fairly new programming language with some of my classmates. In this period we’ve come to learn a lot about the language and the community surrounding it.
Our task was to investigate Groovy, Grails, and their position in a SOA environment.

After lots and lots of hours of work we managed to finally complete our research study and hold a course day for approx. 20 people at HAN University of Applied Sciences.

[![Groovy, baby!](/articles/groovy-baby/grandeur.jpg "Groovy, baby!")](/articles/groovy-baby/)

I want to thank Bart van Zeeland, [Youssef El Messaoudi](http://koffieislekker.nl/), [Marco Kuiper](http://www.marcofolio.net/) and Jaap Mengers for being my colleagues during this study. I'd also like to thank Rody Middelkoop and Sander Leer for lecturing us.

Download it here:

http://gaya.github.io/scripts/uploads/researchpaper.pdf

This paper is aimed at answering the following question:

‘What are the characteristics of Groovy (and Grails) and what impact do they have for an implementation in an SOA within enterprise applications?’

Groovy is a dynamic language and utilizes the Java Virtual Machine. Its dynamic nature lies in the ability to alter its classes at runtime, thus allowing for constant change. Due to its foundation in Java, it can cooperate with and enrich the existing Java libraries. One of the more important features that Groovy provides, is the Meta-Object Protocol, which allows Groovy to perform its dynamic capabilities. In essence, each object has an accompanying Meta-Object which contains all properties in the form of a Map, thus allowing it to scale at runtime as needed.

When using Groovy for constructing webservices, some additional modules can be used. When using SOAP as the desired transport mechanism, the GroovyWS-module provides functionality that abstracts all of the low level transport operations through a simple interface. However, it is still in development and support is therefore minimal.Furthermore, only a very small part of the WS-Security stack is implemented which minimizes the developers choice for securing the webservices.

For RESTful webservices, Groovy’s webframework Grails can be used. It has full support for all of the HTTP-request methods and provides url mapping. For exposing the SOA to its target audience, the Grails framework offers a quick start for developing a web interface that can interact with the SOA. Scaffolding allows Grails to generate both controllers and views based on the domain classes in the model, enabling rapid development. By default, all domain classes are persisted to a datastore through Grails Object Relational Mapping.

We believe that Groovy is mature enough to be used in a production environment, however Groovy’s modules do not provide all needed functionality for SOA development, and therefor Java frameworks are still required.

(Source* http://wiki.icaprojecten.nl/pages/viewpage.action?pageId=3571717*)

All comments on the paper are welcome.

Panoramic Photoviewer in Javascript

Wed, 14 Jan 2009 00:00:00 +0000

As a webdesigner you might have had this problem: “I’ve got a nice looking wide image, but I don’t want my visitors to scroll horizontally.”

A colleague showed me a new project he was working on. A large image appeared and I had the ability to drag and move the image around in a container. Not super efficient if you ask me, I still had to grab the image and move it around holding my mouse button. Can’t there be an easier way?

This article will show you my solution to the problem and maybe even a different approach on navigation.

The example page is located here:
http://gaya.github.io/scripts/photonav/

And the archive is downloadable here:
http://gaya.github.io/scripts/photonav/photonav.zip

What is it?

This photo container has been adjusted to “move” with the cursor. To achieve this I used Javascript and a library called Prototype. Prototype is also needed in order to run script.aculo.us. I also applied script.aculo.us to achieve the smooth moving picture.

What do we have and what do we need to do?

Create a HTML layout for the picture to get in.
Adjust the CSS.
Make a call to PhotoNav in Javascript.

1. Create a HTML layout

Take a look at the code below:

<div class='photo' style='display: none;' id='navigate'>
    <div class='fixed opt1'>
        <!-- this is optional -->
        <a href='http://gayadesign.com/post/' class='button1'>

        </a>
        <a href='http://gayadesign.com/portfolio/' class='button2'>

        </a>
        <a href='http://gayadesign.com/about/' class='button3'>

        </a>
        <a href='http://gayadesign.com/partners/' class='button4'>

        </a>
        <a href='http://gayadesign.com/contact/' class='button5'>

        </a>
    </div>
</div>

The overall container “navigate” will always be hidden prior to the actual Javascript call. I also gave the fixed div a second class. This classname will point to the options of the container; the height and the background image (the actual image that needs scrolling).
You can add a tags to the fixed container. I gave them all classnames so they can be positioned in the CSS. This part is optional.

Remember to include the Prototype library and the PhotoNav Javascript files in the header (and script.aculo.us if you want to enable smooth scrolling). Also include the CSS file photonav.css.

<script src="js/prototype.js" type="text/javascript"></script>

<script src="js/scriptaculous.js" type="text/javascript"></script>

<script src="js/photonav.js" type="text/javascript"></script>
<link href='css/photonav.css' rel='stylesheet' type='text/css' />

2. Adjust the CSS

*.photonav .photo: *

.photonav .photo {
    width: 400px;
    margin: 10px;
    border: 1px solid gray;
}

.photonav .photo .opt1:

.photonav .photo .opt1 {
    height: 100px;
    background-image: url();
}

The next part is optional and only if you want buttons inside the container.

a.button*:

a.button1 {
    margin-left: 20px;
    margin-top: 30px;
    width: 100px;
    height: 90px;
    background-image: url();
}

a.button1:hover {
    background-image: url();
}

3. Make a call to PhotoNav in Javascript

Now that you’ve got all the necessary HTML and CSS set, you can call the PhotoNav functionality. The following code can be put in a js file or in a strict tag.

document.getElementById('navigate').style.display = 'block';
PhotoNav.init('navigate', 758, 1412, false, 0, false);

The specification is:
function **init(String id_of_container, **int *width_of_container, int *width_of_panorama_picture, bool *smoothScrolling, float *smoothLevel, bool*debugMode*);

String *id_of_container*:
The id of the container.

int *width_of_container:
Give the width in pixels of the *fixed container. For calculating reasons.

int *width_of_panorama_picture:
Give the width in pixels of the panoramic picture*. For calculating reasons.

bool *smoothScrolling*:
Enable script.aculo.us powered smooth scrolling (default: false)

float *smoothLevel*:
Level of smoothing, recommended to keep the default 0.1 (default: 0.1)

bool*debugMode:
Enable debug mode. Outputting value to the HTML element with id *’status’. (default: false)

If you want to enable debug mode, you have to insert the following code somewhere in your HTML:

<div id='status'>
    &nbsp;
</div>

Happy developing! And have fun.

Customize Eclipse to a webdeveloper’s IDE

Fri, 02 Jan 2009 00:00:00 +0000

There are a lot of ways to become a better, or at least faster, webdeveloper. For instance the use of a framework like CakePHP to make the developing process rapid.
One of the main things I found boosting my productivity is using a nice IDE.

This article will describe how to create a PHP developer’s IDE using Eclipse, Aptana and PDT.

What should we do? Download the Aptana standalone or Eclipse? I my case, Eclipse was already installed. So I already know how to work with it now.
I prefer having Aptana plugged into Eclipse because I also use Eclipse for other purposes than webdevelopment. This article will use the Aptana Eclipse plugin.

Follow the step by step guide to get a nice IDE for PHP developers.

1. Download Eclipse
An obvious step would be to download Eclipse. So get it at: http://www.eclipse.org/downloads/
Pick Eclipse IDE for Java EE Developers and choose your OS to the right.

![1](/articles/customize-eclipse-to-a-webdevelopers-ide/1.png "1")

**2. Extract Eclipse somewhere** Eclipse will be downloaded as an archive. Pick a location you want to unzip the folder *eclipse*. Startup *eclipse*.

![2](/articles/customize-eclipse-to-a-webdevelopers-ide/2.png "2")

**3. Get Aptana Eclipse Plugin** Go to [http://www.aptana.com/studio/download](http://www.aptana.com/studio/download) and choose *Eclipse Plugin* as the installation type. Click *download*, this will lead to an instructions page.

![3](/articles/customize-eclipse-to-a-webdevelopers-ide/3.png "3")

**4. Follow instructions** Follow the instruction on the page. Or read the quick plugin install guide I wrote.

In Eclipse go to: help > software updates
Click on the tab available software
Click on the + add site button to the right.
Enter the url from step 3 of the main guide (http://update.aptana.com/update/studio/3.2/)
Check the newly appeared box
Click install
next > I accept > next
wait… a while
restart eclipse

5. Aptana will ask you to install SVN
You’d probably want this! I tell you. SVN can save your projects.

6. Time to install PHP functionality
Go to: help > software updates

7. Add DLTK site
In the tab available software click on add site.
Enter the following url: http://download.eclipse.org/technology/dltk/updates-dev/1.0/

8. Add PDT site
Again, add site but now with this url: http://download.eclipse.org/tools/pdt/updates/2.0/

9. Select Dynamic Languages Toolkit checkbox
In the list to the left, two new sites should have appeared. Expand the Dynamic Languages site and check Dynamic Languages Tooltik (not the uncategorized).

![10](/articles/customize-eclipse-to-a-webdevelopers-ide/10.png "10")

**10. Select PDT update checkbox **Seach for *PDT* in the site list. Again do not check uncategorized.

![11](/articles/customize-eclipse-to-a-webdevelopers-ide/11.png "11")

**11. Install the plugins **Click *install*. Follow the instructions. Wait a while and restart Eclipse.

12. Open the Aptana perspective
Go to: *window *> *open perspective *> *other *> *aptana
*

13. Add an FTP site
In the file browser (bottom left of the IDE) right click on FTP *> *Add New FTP Site.

![14](/articles/customize-eclipse-to-a-webdevelopers-ide/14.png "14")

**14. Fill in information** Fill in your FTP account information. Preferably a test server for now, so you can mess around with the IDE a bit.

15. Start browsing your FTP folders
*You can now use the *file browser to browse your PHP projects online. When you open *a file it will be downloaded and when you *save one it will be uploaded to your server. This is simple and quick if you have to adjust something in a PHP project.

Now you can start experiencing a rich IDE customized to your webdeveloping needs. If you have any tips on how to improve the work flow even more or if you miss something in this guide; Please comment on this article.

Happy developing!

Reading XML with PHP

Mon, 29 Dec 2008 00:00:00 +0000

Since webservices and RESTful services are becoming more and more popular, XML is getting a common format to exchange information. XML is easy to read and has a nice tree structure, which can be easily interpreted.

This post will show you how easy it is to read XML in PHP.

In this tutorial I’ll teach you how to read information which a simple webservice provides. The webservice I choose is Last.fm. It’s quick, fun and has a lot of features. We’ll use the Recent Tracks information of a user profile.

According to the API of Last.fm the XML which will be returned will look something like this:

<?xml version="1.0" encoding="utf-8"?>
<lfm status="ok">
    <recenttracks user="xgayax">

        <track nowplaying="true">
            <artist mbid="1bc41dff-5397-4c53-bb50-469d2c277197">The Dillinger Escape Plan</artist>
            <name>Party Smasher</name>
            <streamable>1</streamable>
            <mbid></mbid>
            <album mbid="">Ire Works</album>
            <url>http://www.last.fm/music/The+Dillinger+Escape+Plan/_/Party+Smasher</url>
            <image size="small">http://userserve-ak.last.fm/serve/34s/19117171.jpg</image>
            <image size="medium">http://userserve-ak.last.fm/serve/64s/19117171.jpg</image>
            <image size="large">http://userserve-ak.last.fm/serve/126/19117171.jpg</image>
            <date uts="1230497786">28 Dec 2008, 20:56</date>
        </track>

        ...

    </recenttracks>
</lfm>

This is a part of the actual XML Last.fm gave me. We can see that is not too complicated, which is a good thing!

So what do we need to do now? First, we need that XML file in PHP. We can accomplish that by using the simplexml_load_file function in PHP (Introduced with PHP5).

It only needs the URI to the XML file and it will convert the string into an XML object. Pretty neat.

Create a new PHP file and place this code somewhere:

$completeurl = "http://ws.audioscrobbler.com/2.0/?method=&amp;user=xgayax" .
"&api_key=b25b959554ed76058ac220b7b2e0a026";
$xml = simplexml_load_file($completeurl);

This will load the given file into an object. The url can be adjusted to your needs, preferably the API key since I borrowed it from the Last.fm site.

All what’s left for us to do is to loop through the given object.

Take a look at the following code:

$tracks = $xml->recenttracks->track;

for ($i = 0; $i < 3; $i++) {
    $nowplaying = $tracks[$i]->attributes()->nowplaying;
    $trackname = $tracks[$i]->name;
    $artist = $tracks[$i]->artist;
    $url = $tracks[$i]->url;
    $date = $tracks[$i]->date;
    $img = $tracks[$i]->children();
    $img = $img->image[0];

    echo "<a href='" . $url . "' target='TOP'>";

    if ($nowplaying == "true") {
        echo "Now playing: ";
    }

    echo "<img src='" . $img . "' alt='album' />" . 
        $artist . " - " . $trackname . " @ " . $date . "
    </a>
    ";
}

To understand what is happening, I’ll explain some of the actions I did to get the right information.

Going through the XML tree is easy.** $xml** will refer to the root element, which is in this case. From this element we can navigate through the XML tree.
If you want: you’ll get $xml->recenttracks->track in PHP. And because recenttracks *contains multiple *tracks an array will be given.

The size of the loop is limited to 3, you can however replace this with sizeof($tracks) is you please.

Just like explained above, getting the information inside a tag is done like this: $tracks[$i]->tagname. You’ll get the text which is inside (if it contains text, or else you’ll get an object or an empty string.)

To read attribute information, you need to use the attributes() method. Like I did in this line: $tracks[$i]->attributes()->nowplaying. If the attribute doesn’t exist you’ll get an empty string.

I hope this gets you into reading XML’s using PHP. It is easy and takes little time to learn.
I’ve used XML reading for serveral purposes now like synchronizing information with a database and displaying upcoming event information.

The power of XML is now in your hands.

Garagedoor effect using Javascript

Sun, 28 Dec 2008 00:00:00 +0000

You might have noticed the menu at the top right corner of the website. That’s something what I like to call the GarageDoor effect.

Creating one has now been made easy! This tutorial explains everything you need to know on how to create the same effect yourself.

An example of the GarageDoor effect in work is found here: http://gaya.github.io/scripts/garagedoor/ Download the following archive containing everything you need: http://gaya.github.io/scripts/garagedoor/garagedoor.zip

*Unzip *the contents of the archive and upload the contents to your server, the set folders can be adjusted to your needs.

First we need to make the script ans style of the GarageDoor work. To make that happen, you’ll need Scriptaculous. This library enables interface effects, so you don’t have to create it yourself. So grab Scriptaculous and upload it to your server. Make sure you also upload the prototype.js file (in the lib folder).

Add the following code in the **** tag of your page:

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>

<script src="js/garagedoor.js" type="text/javascript"></script>
<link href='css/garagedoor.css' rel='stylesheet' type='text/css' />

This will load the scripts and styles needed for the GarageDoor to work. *Adjust the paths where needed.
*

The next thing you want to do is to create the HTML layout for the garagedoors. The following code shows the structure you need to create for your document:

<div class='garagedoor' id='garagedoor'>
    <div title='linktofile' class='item'>
        <div class='underlay'>
            Caption text
        </div>
        <img src='uritooverlayimage' class='overlay' />
        <div class='mouse'><img src='images/nothing.gif' />&nbsp;</div>
    </div>
    <div title='linktofile' class='item'>
        <div class='underlay'>
            Caption text
        </div>
        <img src='uritooverlayimage' class='overlay' />
        <div class='mouse'><img src='images/nothing.gif' />&nbsp;</div>
    </div>
</div>

This contains two items that will be the garagedoor. The keywords linktofile and uritooverlayimage have to be adjusted in order to make it work. Linktofile is the URL of the page the button has to link to, might be confusing because it’s not an a tag, but Javascript fixes it for you.

All there is left to do is call the GarageDoor to enable the effect!

<script>
    GarageDoor.scrollY = -55;
    GarageDoor.scrollX = 0;
    GarageDoor.setBindings('garagedoor');
</script>

You can also make it scroll horizontal.

Give the id of the garagedoor container to the setBindings method and the GarageDoor effect will be initialized! Be sure to make the call after creating the html.

You are now set to use the GarageDoor Effect. Good luck!

Gaya Kessler's Blog

Cleaner Code

Write as if The Next Person Reading Has Zero Context of The Problem You’re Solving

Naming of Things

Return Values Early

Pure and Simplicity

Keep it Short and Simple

Better Understanding of JavaScript Through Debugging

Benefits of Debugging

Getting to Know the Debugger

The Humble console.log

Clean up After Yourself

Figuring out Your Scope Using the Debugger Statement

Placing Breakpoints Directly in the Debugger

Measuring Performance

How to Narrow Down Problems

Wrapping Up

Extending Create React App's ESLint config

Version disclaimer

No Config, No Problem.

Adding Airbnb style guide to Create React App

Enable extending in .env

Install Airbnb style guide

Add Airbnb to the ESLint config

Adding Airbnb style guide to a TypeScript project

Install TypeScript import resolver

Setting up the ESLint config

Bonus: lint from command line

Wrapping up

Cleaning and Recycling Old Projects (or How I Simplified my Build)

The Reason for Cleaning up

The Goal

Too Complicated to Replace

Moving to NPM scripts instead on Gulp (or Grunt)

But what about watchers?

Simplify JavaScript Bundles

Oh my Sass

Handling image assets

The Result

Leveraging Hooks to Fetch Data Async in React

Managing Data

Async Data Fetching is a Side-effect

Advantages of Lifecycle Hooks

A Simple Example

Writing the Data Fetching Mechanism

Preparing the Hook

Writing the Resolve Mechanism

Further Thoughts

In Closing

The Value of Not Working

Short Attention Span

How I Tried to Keep Myself Motivated

Picking Myself Over Job Security

Say “No” More Often

Do Work Which Works in Your Favour

Side Projects Are an Investment

Strike a Good Work / Life Balance

The Value of Not Working

Presenting Thyme Premium

Check out Thyme Premium

Why Thyme?

Why not a different service?

What is Thyme Premium?

Completely open source

More to come

Two Sites on One Domain, with Netlify.

The situation

The problem

Why not just a subdomain for the app?

The solution

The application part

The Netlify part

Conclusion

React vs Vue pt. 1: JSX and Vue Template Syntax

How To Render?

JSX, createElement, and render() in React

Pros and cons to the React way

Vue templates and render

Two-way binding and Event binding

Pros and cons of Vue template language

Enable extending in `.env`