How can I see what the funk is going on?

Use .debug() to get an HTML-like string of a wrapper.

You can then use console.log to view this output - handy for debugging issues with tests.

console.log(component.debug());  

How do I test Class methods?

To test internal class methods we can use .instance().

Take the following component

class Button extends Component {  
    constructor(props) {
        super(props);
        this.state = {
            toggle: false
        };
    }

    updateToggle = () => { 
        this.setState({
            toggle: !toggle
        });
    }

    getDoubled(value) {
        return value * 2;
    }

    render() {
        return <button onClick={this.updateToggle} />
    }
}

To test updateToggle, in Button.spec.js we need to use .instance().

test('updateToggle should update the state correctly', () => {  
    const component = shallow(<Button />);

    const instance = component.instance();
    instance.updateToggle();

    expect(instance.state.toggle).toEqual(true);
});

To test that a method/function returns the expected value you can call it in a similar way:

test('getDoubled returns a value doubled', () => {  
    const component = shallow(<Button />);

    const instance = component.instance();
    const value = instance.getDoubled(2);

    expect(value).toEqual(4);
});

or css color audit, for those in the US

Based on article by A list apart - CSS Audits: Taking stock of your code.

While working on a site refactor I found these tools useful in auditing the CSS colour values being used throughout a large e-commerce site.

CSS Colorguard

https://github.com/SlexAxton/css-colorguard

Run the node app against your css file(s) and get a list of colour similarity issues. Uses some complex maths to compare hex values.

Combotester

http://www.colorcombos.com/combotester.html
Add as many colours as you need and compare side-by-side. Useful to see large colour swatches for comparison.

Hextractor

https://hex.corvidworks.com/

Paste your generated css into the input field to get a visual list of all the colours you're using plus hex codes. Handy to visually compare.

Slide 41 onwards has a great explanation of rebase.

If you're on a feature branch, use git rebase to get all the changes from the main branch.

These will be added to your feature branch behind all your commits - your work remains the most recent items on your branch.

In these examples we will replace master with the content on develop

Maintain master history

You want to keep your previous progress on master, just move all code from develop across and wipe over the files on master.

git checkout develop 
git merge -s ours master
git checkout master 
git merge develop

Replace master completely

It's all gone wrong and you just want to wipe over master.

git checkout develop
git push -f origin master

CSS Tricks: A simple guide to Flexbox

To achieve a card layout:
Using Flexbox Today - Flexbox layouts - Card layout

Solved by Flexbox

I've used this to grab template files in a different directory within my grunt plugin, so that I can use them within the main task file.

e.g.
In this setup:

/grunt-plugin-PLUGIN_NAME
--/tasks
---- PLUGIN_NAME.js
--/templates
---- template.js
---- template.hbs
---- template.css

from a task within PLUGIN_NAME.js you could retrieve the content of template.hbs with

var template = __dirname + '/../templates/template.hbs';

Group page-wide events

When working in a modular way you may find you are writing the same event handler code in many different places:

$('window').on('resize', function () {
    // Do some resize code here
});

Instead of repeating this same window binding many times you can bind just once to the jQuery event and then make use of event triggers in each of your modules to run different code:

app.js

// Bind to jQuery events e.g. Window resize event
$('window').on('resize', function () {
    vent.trigger('window:resize');
});

childModuleA.js

this.listenTo('vent' 'window:resize', handleResizeFunction);
...
function handleResizeFunction () {
    // Do a thing on resize
});

childModuleB.js

this.listenTo('vent' 'window:resize', handleResizeDifferentlyFunction);
...
function handleResizeDifferentlyFunction () {
    // Do something else on resize here
});

I find this a useful way of grouping quite standard functionality together. You can apply the same principle to all kinds of other events.

To achieve this we place our responsive image in a container element. By setting the padding-bottom of this element to a percentage which matches the image's aspect ratio you'll ensure that it stays the same size.

To calculate this percentage just divide the natural width of your image by it's height and multiply by 100 to find the correct padding-bottom.

Example

Markup

<div class="image-wrapper">
    <img class="responsive-image" src="/path/to/img.jpg" />
</div>

CSS

.image-wrapper {
    position: relative;
    padding-bottom: 20%;
}

.responsive-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;    
}

Here we've set the padding bottom to 20% to replicate a ratio of 1:5 - our image would be 5 times as wide as it is tall. We could use:

padding-top: 56.25%;

to apply a 16:9 ratio (9 / 16 = 0.5625).

Credits

Thanks to @ihart and Rich Hallows for passing on this technique.

Assuming you have your user table already set up, open the tinker command line tool

php artisan tinker

Create a new user (use whatever fields you need e.g. username, email)

$user = new User;
$user->username = 'admin';
$user->name = 'admin';
$user->password = Hash::make('password');
$user->save();

That's it!

I've followed the standard instructions from linode's hosting a website docs which are excellent. The script just replaces the example.com entries with a domain that you pass in as a parameter - it's really easy.

Set up bash script

First log into your linode server

Then create a new script file

sudo vim new-site.sh

In this file paste the following

#!/bin/bash

# Add a new site

# If you've got a domain and you want to set up a new site with it
# run this script and pass the new domain as a parameter without a subdomain
# e.g ./new-site.sh -url google.com

# Get address from paramter
DOMAIN=$1
# Set www root directory
wwwroot="/var/www/"

# Create directories
mkdir $wwwroot$DOMAIN

mkdir $wwwroot$DOMAIN/public_html
mkdir $wwwroot$DOMAIN/backups
mkdir $wwwroot$DOMAIN/log

# Create virtual host
cat > /etc/apache2/sites-available/$DOMAIN.conf << EOF

# domain: $DOMAIN
# public: $wwwroot$DOMAIN/public_html/

<VirtualHost *:80>
  # Admin email, Server Name (domain name), and any aliases
  ServerAdmin webmaster@$DOMAIN
  ServerName  www.$DOMAIN
  ServerAlias $DOMAIN

  # Index file and Document Root (where the public files are located)
  DirectoryIndex index.html index.php
  DocumentRoot $wwwroot$DOMAIN/public_html
  # Log file locations
  LogLevel warn
  ErrorLog  $wwwroot$DOMAIN/log/error.log
  CustomLog $wwwroot$DOMAIN/log/access.log combined
</VirtualHost>
EOF

# Enable new site
a2ensite $DOMAIN.conf

# Finally restart apache
service apache2 restart

then save the file and close vim

:wq

All done!

Run new site script

To run it just type

sudo ./new-site.sh [domain_name]

e.g.

sudo ./new-site.sh pitchfork.com

All directories should be set up for you and apache restarted. Assuming you've set up the DNS correctly you should then be able to see your new site in your browser.

Using vhosts

<Directory "/var/www/[path_to_site]">
    AllowOverride All
</Directory>
<Location />
    AuthType Basic
    AuthUserFile /srv/auth/.htpasswd
    AuthName "Enter details to log in"
    Require valid-user
  </Location>

Then create the /srv/auth/.htpasswd file which stores the user/password combo:

htpasswd -c /srv/auth/.htpasswd [user_name]

Enter your password and it's saved. Restart apache to complete the process.

If you have an existing file, omit the -c option. The -b option allows you to enter the password as the last parameter of the command, as in this example :

htpasswd -b /srv/auth/.htpasswd username pa55w0rd

See Linode Docs for more details.

The issue seemed to be related to the nodejs-legacy package available via apt-get which didn't really work very well.

I ended up uninstalling this and manually installing node via these instructions:

sudo apt-get update
sudo apt-get --yes --force-yes install git
sudo apt-get --yes --force-yes install build-essential openssl libssl-dev pkg-config
wget http://nodejs.org/dist/v0.10.31/node-v0.10.31.tar.gz
tar zxvf node-v0.10.31.tar.gz
cd node-v0.10.31
sudo ./configure
sudo make
sudo make install
sudo npm install -g forever
sudo rm -rf ~/.npm

from https://www.digitalocean.com/community/questions/ubuntu-repo-nodejs-require-symlink-to-node-to-use-forever

npm start --production

However the blog will stop running as soon as you close your ssh session. To fix this you can add ghost as a service, which gives you further control over the blog and automates restarts should your server restart or node server crash.

To set this up first create a service file for it (where <blog_name> is your blog):

sudo vim /etc/init/<blog_name>-ghost.conf

Next, edit this file and add the following:
Be sure to replace <blog_name> and <path_to_blog> with your details

#/etc/init/<blog_name>ghost.conf
description "Ghost Blog"
author "Full Name"
# Start the service after everything loaded
start on (local-filesystems and net-device-up IFACE=eth0)
stop on shutdown
# Automatically restart service
respawn
respawn limit 99 5
script
    # Navigate to your app directory
    cd /var/www/<path_to_blog>/public_html

    # Run the script with Node.js and output to a log
    export NODE_ENV=production
    exec /usr/local/bin/npm start /var/www/<path_to_blog>/public_html 2>&1 >> /var/www/<path_to_blog>/log/ghost.log
end script

Then control the service using:

sudo service ghost start
sudo service ghost stop
sudo service ghost restart
sudo service ghost status

All done!

Credit due to:

https://ghost.org/forum/using-ghost/453-stupid-question-how-do-i-keep-ghost-running/10/ http://ghost.pellegrom.me/installing-ghost-on-ubuntu/