Kyle Goslan – Some stuff about stuff

Swift Type Casting

21/08/2017 Kyle Leave a comment

Swift is a Type Safe language. That means that it is obsessed with what type of data is associated with what

When we declare a variable or constant, there are a few ways we can do it:

let someNumber = 5 

let anotherNumber: Int = 8

let someNumber = 5

let anotherNumber: Int = 8

These lines essentially do the same thing (with the exception of the constant name and the actual number clearly). The extra syntax in the second example is simply declaring the type of data that ‘anotherNumber’ is going to be an Int value. One of the most useful bits of advice I got when I started learning swift is to read the colon as “is of type”. To that line would read as “The constant anotherNumber is of type Int and equals 8”.

That being said the preferred way is to leave the type declaration off and let swift infer the type itself. In this example its blatantly clear the ‘anotherNumber’ is an integer, so there is no need for the explicit type declaration.

Type safety is awesome! Why? Well it simply means that once a value is set we know what type of data it will contain. That means that A String will always be a String, never an Int or any other type of data.

Swift Variables & Constants

18/08/2017 Kyle Leave a comment

Variables

To create a variable in swift, you start with the keyword ‘var’, followed by your name (camel cased, because you’re a good developer) and then a value:

var someWords = "Hello World"

1	var someWords = "Hello World"

Variables, as the name implies, can change over time. For example at a later point you could reassign the ‘someWords’ value:

someWords = "Something else"

1	someWords = "Something else"

Constants

Constants are declared very similarly to variables, except instead of ‘var’, you use ‘let’:

let name = "Kyle"

1	let name = "Kyle"

Again, as the name suggests, constants cannot change. Once they are set, they keep the value until they are deallocated.

Notes

So why would you ever use a constant, they’re like variables, but with restrictions, right? Yes, but there are two main reasons. Most importantly, it makes your intent very clear. By making something a constant, you are explicitly stating that this value will not change, ever. By using a variable, you are stating that, yes, this may well change when I use it again at a later point in time. Secondly, the compiler can make some slight optimisations for constantly.

Xcode will actually inform you if you have declared a variable and never changes it, and suggest you change it to a constant, and if you try to change a constant it force you to change it’s declaration to a variable.

Tip

Basically, just declare everything with ‘let’. When you try and change it Xcode will force you to change the declaration.

Setting Up A Firebase Project in Xcode

02/08/201702/08/2017 Kyle 1 Comment

This short guide will go over the few extra steps needed to get your Xcode project up and running with Firebase. This guide follows on from a previous post that demonstrates how to install the Firebase libraries with CocoaPods.

You need to create a new Firebase account, the free plan aka ‘Spark’ is more than enough to get you up and running.

When you login you’ll be presented with an empty Firebase console, click “Create New Project”

Generally each of your apps will be associated with a different Firebase project. It makes sense to name them appropriately, but this doesn’t matter too much (it can also be changed at a later date).

The next part is important. You need to enter the bundle ID for the app your Firebase project is going to be linked to. You can find this by going to the ‘General’ tab in your app settings.

The next screen will present you with a link to download a ‘GoogleService-Info.plist’ file. Download this and drag it into your project navigator to add it to your project.

The rest of these steps discuss how to install the Firebase libraries using Cocoapods, a guide on how to do that can be found here.

That’s it, you should now have project ready to start using Firebase.

Installing Firebase with CocoaPods

01/08/201703/08/2017 Kyle 1 Comment

Installing Firebase with CocoaPods is much like installing any other pod.

First you’ll need a Podfile. If you’re integrating Firebase into a project that already uses libraries from CocoaPods, obviously you can use the existing file.

Fire up a new terminal window and navigate to the folder where your project is located. Mine is on my desktop in a folder called ‘FirebaseDemo’, so my terminal command will look like this:

cd ~/Desktop/FirebaseDemo

1	cd ~/Desktop/FirebaseDemo

Next you can create a new Podfile:

pod init

pod init

Open that file in a text editor of choice (do not use TextEdit) and you should see something like this

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'FirebaseDemo' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for FirebaseDemo

end

# Uncomment the next line to define a global platform for your project

# platform :ios, '9.0'

target 'FirebaseDemo' do

# Comment the next line if you're not using Swift and don't want to use dynamic frameworks

use_frameworks!

# Pods for FirebaseDemo

end

The few instances of ‘FirebaseDemo’ will obviously be replaced with the name of your Xcode project. Lines starting with a hashtag are commented out. I’ll remove them for clarity, you can do the same of leave them as they are.

Replace the line ‘# Pods for FirebaseDemo’ with the following:

pod 'Firebase/Core'
pod 'Firebase/Database'
pod 'Firebase/Auth'

pod 'Firebase/Core'

pod 'Firebase/Database'

pod 'Firebase/Auth'

As you can see the Firebase library is broken into parts. It’s a substantial library, and you may not need all of it, this gives you flexibility to only include the parts that you want. Including the Core, Database, and Auth component is probably a fairly common setup to get started.

Finally, back in terminal (making sure your still in the correct folder) run:

pod install

1	pod install

CocoaPods will go and install the relevant dependancies you’ll see something like the following:

The important part of this, as with all projects using Cocoapods is that you need to open the .xcworkspace (the white icon) file in Xcode from now on.

Using Firebase in your project requires that you setup a project in the Firebase console and “link” it with an app. For a guide on that process can be found here.

Why Students Should Blog

13/02/201706/03/2017 Kyle 2 Comments

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

13/12/201606/03/2017 Kyle Leave a comment

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

24/11/201628/11/2016 Kyle Leave a comment

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”:

<video id="myVideo" autoplay>
  <source src="videos/sample.mp4" type="video/mp4">
</video>

</video>

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

$("#myVideo").on("ended", function(){
  //Do whatever you want...
});

$("#myVideo").on("ended", function(){

//Do whatever you want...

});

jQuery Scroll Event

17/11/201618/11/2016 Kyle Leave a comment

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:

$(document).scroll(function() {
  //All your code will go here...
});

$(document).scroll(function() {

//All your code will go here...

});

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:

var scrollPosition = $("body").scrollTop();
console.log(scrollPosition);

1 2	var scrollPosition = $("body").scrollTop(); console.log(scrollPosition);

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:

if(scrollPosition > 500) {
  //Do something...
}

if(scrollPosition > 500) {

//Do something...

}

jQuery Change Image

03/11/201618/11/2016 Kyle Leave a comment

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:

<img id="my-image" src="images/image-name.jpg">

1	<img id="my-image" src="images/image-name.jpg">

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:

$("#my-image").attr("src", "images/new-image.png");

1	$("#my-image").attr("src", "images/new-image.png");

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:

$("#change-image").click(function(){
  $("#image").attr("src", "images/new-image.png");
});

$("#change-image").click(function(){

$("#image").attr("src", "images/new-image.png");

});

jQuery Intro

03/11/201621/02/2017 Kyle Leave a comment

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

$(document).ready(function(){
  //Everything else should go in here...
});

$(document).ready(function(){

//Everything else should go in here...

});

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

$(".my-class")

1	$(".my-class")

Selecting by id

$("#some-id")

1	$("#some-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:

$("#some-id").click(function() {
  //Whatever you want to happen when a user clicks on this element...
});

$("#some-id").click(function() {

//Whatever you want to happen when a user clicks on this element...

});

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-id").click(function() {
  $("#another-id").hide();
});

$("#some-id").click(function() {

$("#another-id").hide();

});

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

//Show or hide an element
.show();
.hide();

//Show hide an element with a slide animation
.slideUp();
.slideDown(); 

//Show hide an element with a fade animation
.fadeIn();
.fadeOut();

//Show or hide an element

.show();

.hide();

//Show hide an element with a slide animation

.slideUp();

.slideDown();

//Show hide an element with a fade animation

.fadeIn();

.fadeOut();

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

.toggle(); 
.slideToggle(); 
.fadeToggle();

.toggle();

.slideToggle();

.fadeToggle();

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:

$("#some-id").addClass("my-class");

1	$("#some-id").addClass("my-class");

And remove one like this:

$("#some-id").removeClass("my-class");

1	$("#some-id").removeClass("my-class");

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

$("#some-id").toggleClass("my-class");

1	$("#some-id").toggleClass("my-class");