Why Students Should Blog

Reflection

In all aspects of life (especially as student), we are constantly absorbing information, sometimes not even consciously. But how often do we actually take the time to make sense of this bombardment of information and put the pieces together? The linking of ideas and bridging of concepts is fundamental to our creativity and exploration of knowledge. Blogging is the opportunity to sit down and make these connections.

Process

Blogging by nature, encourages the recognition of process. It takes a step back from performing a task, handing it off as “complete” and then waiting for feedback without another thought. Blogging is a process in itself, but can help to identify steps in processes that you’ve gone though, some that worked and others the hindered.

Positive Digital Footprint

There are usually two things that will happen when a prospective employer receives your application. It will rapidly make its way to the trash, or your name will make its way into the search box of their web browser.  Blogs are a way to take some control of what happens next. They offer interesting insights into your thought process and that hopefully you have some interesting observations about your chosen area of work. More than that they can display you as a well rounded interesting person, if you’ve involved with interesting projects, tell people.

Create An Open Culture Of Learning

Blogs encourage an open culture of learning and discussion. Many blogs encourage comments, which, gives others the opportunity to tell you that you’re wrong. This is absolutely something that you should welcome. Many of our thoughts stay safely locked in our minds and we go forth under the assumption that we’re correct. We need to embrace a culture that encourages peers to tell us that we’re wrong and offer a different perspective on our thinking.

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 “hook” 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. 

This is an incredibly useful resource for finding all the events and information you can extract from a media object: https://www.w3.org/2010/05/video/mediaevents.html

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.