Category: Web Development

Develop an Information Architecture for a complex website

admin

Information Architecture

From: Information Achitecture Resource Pack

Information Architecture involves the organisation of information into a structure that helps people find the information they need. To achieve this on a website, the designer needs to consider:

  • The purpose of the website
  • How the website content can achieve this purpose
  • How to organise the content to ensure it is easy to navigate
  • How to ensure that the website content can be easily maintained

Developing website Information Architecture is an important early step in the overall design and development process. Read More

Grunt

admin

So, people seem to be exited about something called ‘Grunt’…

Let’s explore.

From the Grunt website:

  • Why should you use a task runner like Grunt?
    In one word: automation. Automation of what? Well, such repetitive tasks as: minification, compilation, unit testing, linting etc.
  • Why Grunt?
    The Grunt ecosystem is huge with hundred of plugins. Coffeescript, handlebars, jade, JS Hint, {less}, require.js. SASS, Stylus etc.

Read More

Don't make me think (Kruger)

Don’t make me Think

admin

Steve Krug’s ‘Don’t make me think’  is a classic in the world of web design. I recently pulled the 2006 print from my book shelf to give it a (first) read. And it was worth it!

This is what stayed with me the most (ordered by chapter):

  1. Don’t make me think

    – Remove as much as possible the ‘question marks’ (Where am I, Where can I find, What does this mean
    – Make things self-evident, or if this is not possible, self-explanatory

  2. How we really use the web

    – We don’t read, we scan. (I like this analogy: web users tend to act like sharks: they have to keep moving or they’ll die)
    – We satisfice (choose the first reasonable option)
    – We muddle through
    Read More

Rockstar WP – Theming

admin
  • When designing a theme in PS, use different layers for different WP elements (e.g logo, page, featured_blog, featured, homecontent, footer, header etc)
  • Flow: design mockup -> transform to HTML -> add WP functionality
  • To show the boxes you can temporarily use a 1px red border
  • Quote: Finally because our <div> element has position:relative, we can now use  absolute positioning inside and set right:0px for the menu and it will be aligned to the right. This is great for a WordPress theme because as the person creates new pages the menu will extend, and this way it will stay right aligned.

Rockstar WP – A start

admin

Setup a WP site:

  • Set permalink to/%category%/%postname%/   (make sure rewrite_mod is enabled in Apache)
  • Choose a spam filter. Akismet is free for personal use, but minimal 5,-/m for business use
  • Install sitemap plugin: The Sitemap plugin automatically creates an XML sitemap prepared to Google’s specification and then contacts the Google servers every time you create a new post or change the sitemap.

Setup SSH

admin

Follow the steps in this post on bitbucket.org

https://support.atlassian.com/bitbucket-cloud/docs/set-up-an-ssh-key/

There is also a script in there to configure your bash shell to automatically start the agent when launch the shell.

Local: go to .ssh directory

ssh-keygen

Name your key and give a password

Add the key to the ssh-agent:

ssh-add ~/.ssh/id_rsa # or whatever the name of the key is

tip: create an alias sshaddxx

How to add the public key to bitbucket:

  • From Bitbucket, choose Personal settings from your avatar in the lower left.

  • https://bitbucket.org/account/settings/

  • Click SSH keys.
    If you’ve already added keys, you’ll see them on this page.

  • In your terminal window, copy the contents of your public key file. If you renamed the key, replace id_rsa.pub with the public key file name.

    On Linux, you can cat the contents:

    $ cat ~/.ssh/id_rsa.pub

  • Select and copy the key output in the clipboard.
    If you have problems with copy and paste, you can open the file directly with Notepad. Select the contents of the file (just avoid selecting the end-of-file characters).

  • From Bitbucket, click Add key.

  • Enter a Label for your new key, for example, Default public key.

  • Paste the copied public key into the SSH Key field.
    You may see an email address on the last line when you paste. It doesn’t matter whether or not you include the email address in the Key.

  • Click Save.
    Bitbucket sends you an email to confirm the addition of the key.

  • Return to the terminal window and verify your configuration and username by entering the following command:

    $ ssh -T git@bitbucket.org

    The command message tells you which of your Bitbucket accounts can log in with that key.

  1. conq: logged in as emmap1.
    You can use git or hg to connect to Bitbucket. Shell access is disabled.

    If you get an error message with Permission denied (publickey), check the Troubleshoot SSH issues page for help.

Now that you’ve got an SSH key set up, use the SSH URL the next time you clone a repository. If you already have a repository that you cloned over HTTPS, change the remote URL for your repository to use its SSH URL.

Edit an SSH key

After you add a key, you can edit the key’s Label but not the key itself. To change the key’s contents, you need to delete and re-add the key.

How to add public keys to the server: Read More