Use Instafeed.js after Instagram policy update 2016

Hello world, yesterday i tried to integrate the Instagram feed of the male model Lukas Bachert into the rework i'm currently doing for his website. I stumbled upon the gorgeous api Instafeed. When i started to use it i had some trouble regarding the authentication so i wanted to just sum up what a did to get everything working.

Become an Instagram Developer

Login to your Instagram account and go to https://www.instagram.com/developer/. Create a client by filling out the form. Afterwards you need to invite the user whose feed you want to integrate to the website as a sandbox user. To do so "manage" the client you just created and go to the Sandbox tab. Please mind that the user won't get notified about this invitation. He needs to login to the developer page aswell and afterwards he can accept the invite using the "Sandbox Invites" tab in the header.

Generate a token

In order to not make your visitors login to their instagram account you need to generate a static token to access the Instagram api with. Go to https://instagramtoken.com/ and follow the instructions.

Retrieve User ID

A simple way to get the user ID is to visit https://smashballoon.com/instagram-feed/find-instagram-user-id/ and just fill out the form.

Making the call

Now that we prepared everything we are able to actually show the feed on our website and like the Instafeed description states: it's dead-simple! Add a div with the id instafeed to your website or just use the target property of the Instafeed configuration and run this javascript snippet:

feed = new Instafeed({
    get: 'user',
    userId: 'USER_ID',
    clientId: 'CLIENT_ID',
    accessToken: 'ACCESS_TOKEN',
});
feed.run();

That's all the magic. Like i said, dead-simple! Review the Instafeed documentation to see how you can configure Instafeed. Cheers, Loris

[JavaScript] One way to use Object Orientation Programming in JavaScript

It's been a long time since my last post but since i'm working a lot with javascript lately i wanted to tell you my impressions about object oriented programming (OOP) with JavaScript.
For now, none of the javascript projects i did were complex enough to really use OOP. But now i'm working on a pretty complex project so i decided to read a little about JavaScript and its ways to use OOP.

Before getting started i thought about what is important to me if i'm working with objects. The following points came to my mind:

• Encapsulation: Having the difference between private and public methods is a must have
• Safety: Public access to attributes only using getters and setters
• Inheritance: Since i'm trying to follow the DRY (Don't Repeat Yourself) principle i really wanted inheritance to prevent code duplicates

After some research i stumbled upon this neat way to model classes in JavaScript:

function Person() {
 // This attribute can be accessed outside the class
 this.name = "Everyone can see this";
 
 // This attribute cannot be accessed outside the class
 var age;
 
 this.getAge = function() {
  return this.name; 
 }
 
 // This is way more interesting. We can use the private attributes in public methods!
 this.setAge = function(newAge) {
  // We can even acces private function from public functions!
  if (isAgeValid(newAge)) {
   return;
  } else {
   // Here we are setting a new value for the private attribute.
   age = newAge;
  }
 }
 
 // This function is private
 var isAgeValid = function(someAge) {
  return someAge > 0;
 }
}

This is pretty cool, isn't it? But there is still one last topic i need to keep an eye on: the inheritance. Inheritance can be achieved like this:

function Politician() {
 // This is all we need to achieve inhertance
 Person.apply(this, arguments);
 
 var party;
 
 this.setParty = function(newParty) {
  party = newParty;
 }
}

Now we got a politician, which is of course a person. Since it's a person we keep all public attributes and all public function so we can do calls like:

var politician = new Politician();
politician.setAge(-1); // We can call this even though the age is not valid so it won't be set.
politician.setAge(30); // Here we go!
politician.setParty("This could be your party!")

The Downsides

There is not such a thing like protected methods when using this way of inheritance which is okay for me. If you really need protected methods or variables take a look at this one hour presentation by Douglas Crockford

Since the code i'm posting here is just one way to use OOP in JavaScript please let me know in the comments which way you prefer and why.

Cheers,
Loris

[Android Tutorial] 3. Setting up your system

I don't know if you skipped the last part and started right here so i'd like to welcome you to my tutorial about android development. Let's welcome back Mike, our little developer who wants to develop an android application.
Let's get stuff going!

Downloading Eclipse

Use this link to the official google android developing page. Click "Download Eclipse ADT" and follow the downloading procedure.
Extract the downloaded zip folder and navigate to the "eclipse" folder.
Run "eclipse.exe".

Some basics about android projects

Before Mike starts developing he needs to know some stuff about the project structure. He starts by reading this book. Fortunately Mike speaks german fluently. If you don't you can read the head first book about android development. I haven't read it but most of the head first books are great for beginners.

Structure of android projects

The sourcecode of android applications is located in the src folder like in every other java project.

Images are svaed in the res/drawable folder. Activites and fragments are located in the res/layout folder. Android is generating files inside the gen folder. NEVER TOUCH FILES IN THE gen FOLDER.

Activities and fragments

An activity describes one user interface. The official styleguide of google states that one activity should only be there for one specific task. E.g. one for logging in, one showing the main menu and another one showing some data.

A fragment is a reusable component which can be used in activites.

AndroidManifest.xml

The AndroidManifest.xml describes the android application. It contains most of the components like activities, the used android version,  and so forth. If you need to get access to system components like the file storage or the camera you need to mention that in the AndroidManifest.xml.

Now that Mike got an idea how android projects are structured he starts by creating an android project in Eclipse.

Creating your first project

Mike didn't use Eclipse yet so he's asking the his asian coworker Co Ding how to create a new android project:

[Mike] Hey Mr. Ding, i got a question about creating a new android project in Eclipse.

[Co Ding] Greetings Mr. Mike, the answer is pretty simple. Just navigate to "File - New Project - Project..." now a popup opens where you can select what kind of project you want to create. You need to select "Android - Android Application Project". Now you can set some options for your new project.

[Mike] Woaaah, that's really simple. But i have no idea which options i should choose.

[Co Ding] Of course it is. Well, let me set something straight first: NEVER LET ECLIPSE GENERATE AN ACTIVITY FOR YOU.

[Mike] But why shouldn't i let Eclipse generate an activity for me?

[Co Ding]  If you want to know this you can look at this post which explains the problem and shows  how to solve it.

[Mike] Alright, Mr. Ding. But how should i create an activity instead?

[Co Ding]  Have a look at this todo list:

1. Navigate to the "res/layout" folder
2. Create a "New Android XML File
3. Navigate to your "src" folder
4. Create a new class extending android.app.Activity
5. Open your "AndroidManifest.xml"
6. Add the following lines (The part in the brackets is only needed if the activity is you lancher activity!)

        
            [
           
                

                
            
             ]
        

[Mike] I guess i got it. I'll have a look at it by myself now. Thanks for your help, Mr. Ding.

[Co Ding] No problem, Mike. If you are having troubles or you didn't understand a thing you can ask me by writing an email to loris.bachert@gmail.com.

What are we going to do next?

In the next tutorial we will face the UI design and we start writing a HelloWorld. I hope you liked it :)

[Android Tutorial] 2. Getting stuff started

A story about Mike

I want to introduce you to Mike. Mike is a 40 years old, married man. He's working as a software developer in a company called WhyYouNoWork Inc. (WYNW). His daily work includes java development but Mike isn't comfortable in his company. A short time ago Mike got an idea of an android app to earn a lot of money. To ensure you get to know him take a look at this picture of him:

The problem is Mike does not have any idea what how android is working and how he could getting started with coding. Mike asks, like every developer, google.

History of Android

1.0 - SDK Release 12. November 2007
1.5 - Input without hardware keyboard
1.6 - Supports multiple resolutions
2.0 - Better account management
2.2 - Backup functions
2.3 - Voice over IP
3.0 - Actionbar
4.0 - Optimizations for smartphones and tablets
4.1 - Performance optimization
4.2 - Miracast support

Mike got that but he's bored and wants to know something more useful. He keeps on searching and finds the following graphic about the architecture of android.

Architecture of Android

Mike wonders what the application framework is used for. He finds the following facts to get a short overview:

The application framework:

• Simplifies the access to the device hardware
• e.g. camera, network, sensors
• Views
• views are the basics of android UIs (We are going to look at this later this tutorial)
• Content Provider
• rights management of applications
• Resource Manager
• access to graphics and layoutfiles
• Notification Manager
• access to the statusbar
• Activity Manager
• controls the lifecycle of applications

What we are going to do next

Finally Mike got that and writes it, like every good programmer, down for later studying. But now he wants to start coding. First of all he will set up his system.

[Android Tutorial] 1. Introduction

Hey there,
due to a workshop i gave in my company i thought i also introduce you to android development. This will be a most practical workshop but some theory is necessary to get your things done. To give this tutorial an overall relaxed apperance i will wrap it with a tiny neat story.

What are we going to do?

First of all you will get a theoretical introduction about the most important things in the world of our tiny little green helper. Afterwards i will explain how to set up you computer so you can develop apps by yourself. If you got that far we will start doing a lot of exercises. Starting with a simple hello world we will make our way to do an organizer app which saves lists of data.

Why should i learn android?

• Very similiar to java programming
• If you already developed in java you will have a good time
• Google loves every developer
• compared to iOS where you need to pay to be able to develop
• Uploading apps to the Play Store is really easy

What do i need to know to follow this tutorial?

You need to be familiar with Java. I will use a little bit of inheritance and maybe some generics aswell.

Let's get started. If you don't understand something or something is unclear just use the comments or email me to info@loris-bachert.de.

Have fun :)

Links to the parts:

• 2. Getting stuff started (If you don't like to hear the theory you can skip this part)
• 3. Setting up your system

[Review] Recording the Screen or just a single window using Screencastify

As part of a project  I did at the university I needed to record a single window of my screen to a video. I searched google and even made it to page 5 (I am not kidding!!!). Finally I found a tool which worked really well for my tasks.

The tool I am talking about is called Screencastify and is a Google Chrome plugin. You now may ask yourselfs "What? A Chrome plugin?". I asked myself the same question but Screencastify is fantastic. You just download it via the Chrome plugin store using this link. Just download it and start the plugin. Now a tiny window will open on the top right corner.

You can choose between recording a single tab or the desktop. Using the desktop recording will create another popup in which you can choose which window the plugin should record. Just select the window you want to record and Screencastify does the rest of the work.

This was just a short post but I thought Screencastify deserves this one :)

Cheers,
Loris

[Web Development] The ways of animating stuff using JavaScript, JQuery and CSS

Because a co-worker asked me how to fade something in and out I thought about making a short overview on the techniques you can use to achieve animations. I will present you 3 ways how you could fade elements in and out.

The Plain JavaScript Way

DON'T DO IT. I tried this once. Took me about 8 hours to create kind of a translate animation but it still wasn't very smooth. Better use one of the two ways following.

The JQuery Way

After I did a JavaScript animation not knowing of JQuery, I have seen that you can create animations in JQuery within a single line.

$("div").fadeIn();
$("div").fadeOut();
$("div").fadeToggle();

JQuery even comes with a fadeToggle() method which will fade the element in if it is hidden at the moment and fade the element out if its visible.
Each of the presented methods have callbacks you can use like this

$("div").fadeIn("slow", function() {
    // Animation complete
});

Another way to achieve fading in JQuery is the following one but I don't really know why you should use this one.

//Will fade out the div in 5 seconds
$("div").animate({
    opacity: 0,
}, 5000, function() {
    //Will be executed after the animation
});

//Will fade in the div in 5 seconds
$("div").animate({
    opacity: 1,
}, 5000, function() {
    //Will be executed after the animation
});

To come to an end I present you my favorite way.

The CSS Way

CSS3 comes with the so called transitions. Each browser supporting CSS3 supports these animations. They are easy to implement and don't enlarge your JavaScript code. You can use it like this.

-webkit-transition: opacity 500ms ease-out 1s;
-moz-transition: opacity 500ms ease-out 1s;
-o-transition: opacity 500ms ease-out 1s;
transition: opacity 500ms ease-out 1s;

Now every change in the opacity of the element is animated. You just need to adjust the opacity using a single JQuery line like this

$("div").css("opacity", 0);

And all the magic is done now. Let me know your thinkings of the 3 ways and what are you using.
Have a good day :)