Deep Work

All students should read this book!

Deep Work by Cal Newport

Human beings it seems; are at their best when involved in something challenging.

Please consider reading/listening to this book. Modern society has enforced so many distractions on us, that our ability to actually perform cognitively difficult tasks has been completely overridden. Deep Work, highlights these distractions and offers some practical advice on how to overcome them.

I would suggest that this book could easily be about each and every one of us and how we go about our work.

The best moments usually occur when a person body or mind is stretched to its limits in a voluntary effort to achieve something difficult and worthwhile.

Media Events jQuery

A common thing to want to do is respond to the state of some media (audio of video) playing on your page. You can tie into a number of events on the media object, like when the video is playing, when it is paused, even find out the current time of the video.

However, we’ll start by looking at probably the most common scenario, which is to do something when a video (or audio) comes to a stop, the is the “ended” event.

We’ll first set up a simple video in our HTML. Most importantly, we need to give it an id attribute. Here, I’ve called it “myVideo”:

 

Note: As always we’ll be working inside our $(document).ready() runction. 

 

jQuery Scroll Event

The jQuery scroll event works just the .click() event, the main difference is that we usually want to bind it to the whole document (the webpage) rather than a specific div or img tag.

So the event declaration will look like this:

Note: This should be within the document ready function.

In this function, the first thing we’ll do is work out the current scroll position of the page and save it in a variable to use later:

The .scrollTop() function returns where the scroll bar is for our selected element, in this case, we’re asking for it in regards to our body tag. Our scrollPosition variable will now contain a number which is where the user currently is on the page, so at the very top, this will be zero.

We’re then just printing out that value to our console. So, if you open your page in a browser and pull up your console, you should see numbers being output as you’re scrolling your page.

You can now use a simple if statement to test if a user is past a pont:

 

jQuery Change Image

Changing an image in jQuery is pretty straight forward. First of all, you need an image to change. This is just a usual html image in your page with an id on it:

We know that the image being displayed comes from the “src” attribute of the image tag, so this is what we want to change using some jQuery magic which, looks like this:

This can happen in any usual event. For example, to change an image when a user clicks something on our page with an id of “change-image” we would do this:

 

 

 

jQuery Intro

In your scripts file, you should always start with the following:

This makes sure your page is fully loaded before any further interaction takes place.

Selectors

Selectors are how you select what element on your page that you want to interact with (element referring to the part of you html, an image for example). This interaction might be a click, hover or something else. You can select elements in a number of ways, most commonly you’ll use the element based on its class or id.

Selecting by class

Selecting by id

There are a number of ways that you can select elements, refer to this link for some more examples: jQuery Selectors

Events

Once you’ve selected your element, the next thing to do is bind an event to it. An “event” is basically, what user interaction do you want to respond to. The most common events are click and hover events. After you define the event you need to provide a function that will happen when that event occurs. which looks like this:

You can find more events here: jQuery Events

What happens next?

The body of the function (that is what occurs on the provided event) is completely up to you. This may range from a single line to show or hide something on the page, to a far more complex function spanning many many lines.

To simply hide something, you can do the following:

Some of the most basic built-in functionality in jQuery are:

There are also counterparts to each of these which will show it if it’s hidden and hide it if it’s showing:

Changing Classes

jQuery makes it easy to change the css classes on our elements in a number of ways.

We can add or add a class to an element like this:

And remove one like this:

There is also a toggle class function to remove a class if it is on the object and add it if it is:

 

Cake API Setup

Installing CRUD plugin

Setup some database tables.

Update the config/app.php file with your database details.

Generate the database files with the bake command

Hash User Passwords

Update App Controller

Update Users Controller

Add Login Template File

Update Routes

Create Api Controller

Create Posts Api Controller

 

Installing CakePHP 3 On Digital Ocean Ubuntu 14.04

Update: Guide to install CakePHP on Ubuntu 16.04 Digital Ocean

Summary

  • How to install  a CakePHP 3 app on a new droplet running Ubuntu 14.04.

This guide assumes you’ve set up a Ubuntu 14.04 server and have MYSQL up and running. This guide uses the “PHPMyAdmin” from the “One Click Apps” available on Digital Ocean.

 

Installing Composer

First, update you package manager:

Install cURL:

You’ll be asked if you want to use the extra space, type ‘yes’ and hit enter.

Finally, install composer:

You should now be able to just type ‘composer’ and see the list of available commands.

Enable the rewrite module

Make sure the rewrite module is enabled

Restart the server:

Install the intl extension:

Restart the server:

Install Cake

This is all the requirements for CakePHP to run. We are now ready to use composer to download and setup our application. First off we need to change to the directory that we want it installed to. This will most likely be your public folder:

You can now use composer to setup your project, giving your application some kind of relevant name:

You’ll be asked if you would like to set the folder permissions, type “Y” and hit enter.

Enable AllowOverride

Navigate to the “/etc/apache2” directory, download and open the “apache2.conf” file. Around line 166 within the “<Directory /var/www/>” tags, change the that says “AllowOverride None” to:

You’ll need to restart the server for the change to take effect:

Update The Web Root For Our Droplet

At the moment when we visit our droplet via a browser, we are taken to the “html” folder. If you look in the CakePHP there is a “webroot” folder. This is actually the folder we need to point our droplet to. We can do this in one of the apache config files.

Navigate to the ‘/etc/apache2/sites-enabled’ directory and download and open the ‘000-default.conf’ file. You need to just change one line (around line 12):

Upload the modified file, replacing the old one. You’ll need to restart the server for the settings to take effect:

You should now be able to visit your droplet IP and see the default CakePHP page.

Debug Kit

Debug kit (the very useful debug toolbar that CakePHP comes with) is turned on by default in this initial installation, however,  it requires sqlite to be installed on our server for it to work.

To install sqlite run these few commands:

And finally restart the server one last time:

 

 

Installing Composer On Digital Ocean Ubuntu 14.04

Summary

  • How to install composer on a new droplet running Ubuntu 14.04.

Installing composer on a Digital Ocean droplet is a pretty straight forward process and only needs a few commands. Log in to your droplet.

First, update you package manager:

Install cURL:

You’ll be asked if you want to use the extra space, type ‘yes’ and hit enter.

Finally, install composer:

You should now be able to just type ‘composer’ and see the list of available commands.

Log in To Digital Ocean Droplet Ubuntu 14.04

Summary

  • How to log in and change the default password of a new droplet running Ubuntu 14.04.
  • Finding the default MYSQL password.

You will have been emailed your droplet details, most importantly a password (which you will need to change in a moment), so have this email open.

Open a new terminal window and log in to your droplet:

You will be asked if you want to continue, type ‘yes’ and hit enter.

On your first log in you will be required to change the default password emailed to you. First, enter the default password:

Then your new password twice:

Note: These are secure fields, so it won’t look like you’re typing anything. 

If you scroll up slightly, you should be able to find you MYSQL password output somewhere in the text, take note of this:

You should be able to go to your droplet IP in a browser and see the default apache page.

You should be able to go to http://YOUR_DROPLET_IP/phpmyadmin and see the familiar looking phpMyAdmin login screen. You can log in with the username of ‘root’ and the password you took note of in the above step.

Login With FileZilla

You should now be able to login with an FTP program as well. The host is the droplet IP, prefixed with ‘sftp://’ username and password are the same as above (with whatever password you set up).

By default, you should be taken to a folder called ‘root’. Come out of this folder by clicking the top icon in the directory (the two dots). The public directory is the /var/www/html folder. In there you’ll see the default apache html file and an info php file. Feel free to delete both of this if you want. This is the folder where you should upload you website files.

Digital Ocean WordPress Permalinks

Summary

  • How to fix permalink issues on a Ubuntu 14.04 Digital Ocean server

Setting up custom permalink on a Digital Ocean server is something that I’ve had to do time and time again. And each time I come to do it, I’ve forgotten how. So I’ve decided to document it, mostly for my own benefit to stop me losing my mind when I inevitably come to do it 6 months from now, but also in the hope it will help out someone else.

So perquisites:

  • Firstly, this is not about how to set up MySQL, phpMyAdmin etc.
  • Nor is it about how to install WordPress from stat to finish, only about setting up custom permalinks.
  • This is on a clean Ubuntu 14.04 x64 server, not going down the auto setup option for wordpress that Digital Ocean offers. I would assume that image would come already configured appropriately, but haven’t tried it myself.
  • This should work with both the ip url or a custom domain url.

Firstly make sure the root directory of your install (where your wp-config.php file lives) contains a .htaccess file. . The contents of the file should look like this:

If for some reason it doesn’t, you can just create a new file in your chosen script editor and save it as ‘.htaccess’.

You need to enable the server rewrite module. To do this log into your droplet in the terminal and run the following command:

You need to make a small change to the apache2.conf file. You can do this via the terminal or logging into the server with an FTP client editing the file with a text editor. Either way the file you need is located in the /etc/apache2/ directory and called apache2.conf.

Full path: /etc/apache2/apache2.conf

You need to make a subtle but important change. Locate the block of code that looks like this:

Make sure you’re in the correct code block as there are three that look similar, make sure it starts with ‘Directory /var/www’ as this is the public root of the server. In my case the block started at line 164.

Change the AllowOverride line to:

Finally, any changes made to the server servings require a server restart in order to take affect. Do this with this command:

With that done, your “pretty urls” should now work. One final note is sometimes its worth going into the permalink setting and hitting save, even if its just reapplying the same settings.

References