Cross Linked Coder

How I turned Facebook Comments Plugin into a FREE Web Chat using Vue.js

noreply@blogger.com (Unknown) — Sun, 12 May 2019 18:49:00 +0000

Recently I was on the lookout for a reactive chat experience to integrate with my site songxy.com. It had to be free with a small visual footprint.

I tried disqus — it was great as a footer on a webpage but it didn’t look great as a chat box. A friend of mine mentioned chatango but the mobile experience wasn’t there.

Eventually I took a look at discord and slack but decided against it because I didn’t want to use a 3rd party embed such as chatlio.

Searching further I found out about Facebook comments plugin. Works on mobile, free and easy to integrate. Sounds great. Here is an official link to it: https://developers.facebook.com/products/social-plugins/comments/

I started the task of initializing the Facebook JavaScript SDK and setting up the comment plugin as an SFC (single file component) inside a Vue.js SPA framework.

These are the steps I came up with in order to pull this off.

Let’s take a look at how to initialize the Facebook JavaScript SDK inside of your index.html.

Here is the official link on initialization: https://developers.facebook.com/docs/javascript/quickstart

Next I attempted to insert the <div> structure of the FB SDK comments which is what we want to be reactive. In my implementation I went twith a refresh button to update the chat box. If you want to update the comments in realtime without a refresh button or timed auto-refresh you will need to use the webhook Facebook provides here: https://developers.facebook.com/docs/plugins/comments

Here is my SFC vue file with the reactive <div> for Facebook comments

The trick here to make the comments reactive in the way we expect is to initialize Facebook sdk whenever we mount the vue component. Without this step nothing will happen because the init brings in the JavaScript code that grabs the Facebook comments. Here is more about init: https://developers.facebook.com/docs/javascript/reference/FB.init/v3.3

Once we have that component setup in our Vue.js SPA we need to make sure we mount it when we hit our refresh button.

The trick with the button @click is to use the v-if directive. Here is some information about it: https://vuejs.org/v2/guide/conditional.html#v-if

I decided to use the Quasar Framework for my button example you can take a look at how the v-if directive is used with @click

I had to use the $nextTick function in order to toggle the reactive state of the v-if directive on the Facebook Comments Plugin component.

Visit my sandbox landing page at https://songxy.com to try out the chat. Overall I think it looks great and the q-slide-transition really works well.

I decided to write this article because I felt like there is minimal documentation on how to get Facebook Plugins to be reactive in Vue.js and calling FB.init at the right time was a challenge.

Please check out my personal blog to get more coder insight

Cross Linked Coder
You might be asking yourself why you would choose smaato to monetize with in-app ads. Firstly, smaato supports many…crosslinkedcoder.blogspot.com

Integrating New PayPal Smart Buttons with Vue.js Quasar and iOS

noreply@blogger.com (Unknown) — Mon, 22 Apr 2019 21:37:00 +0000

Integrating New PayPal Smart Buttons with Vue.js Quasar and iOS

Photo by Sharon McCutcheon on Unsplash

This is my personal experience integrating the new PayPal Smart Payment Buttons with a reactive Vue.js framework called Quasar — I ran into problems and found solutions.

Today let’s code a PayPal Smart Payment Button Checkout.

Photo by Nicole Wolf on Unsplash

At quick glance everything looks great; copy the code into your project and mission complete.

Easy…

What if you are using reactive UI components such as QBtnDropdown for a shopping cart list?

Some developer background: my sandbox songxy.com uses Quasar (thanks to creator Razvan Stoenescu) a reactive Vue.js framework. It supports many platforms and browsers out of the box.

Understanding my requirements I continued with the PayPal example to step 3: render the button into my UI element.

Attempt #1 call PayPal render button function to render <div id=“paypal-button-container” /> inside of the drop down box whenever @click event was triggered by drop down button.

As you can see from the screenshot and the error message below this did not work.

It turns out <div id=“paypal-button-container” /> in my dropdown box is rendered dynamically and reactive on click events meaning it only exists when it dropped down. The PayPal smart buttons cannot find the div to render into.

Attempt #2 clicking a checkout button inside the dialog box calling the PayPal render button.

Clicked!

That worked because the button and div existed in the drop down when clicked. However, an extra click reduces customer conversion rates.

There must be a better way…

Attempt #3 add some more code Vue function $nextTick with PayPal render button.

Works!

But what happens when you run this on an iOS device such as iPad or iPhone?

Photo by FuYong Hua on Unsplash

Broken…

Every time your drop down box drops you will get a new blank space at the top that pushes your new working button down.

It keeps moving down indefinitely.

How do we solve this problem?

The solution here is to clear out the empty dynamic code that was left over by the PayPal Smart Button and not cleared for us by iOS. You can do it with the code below:

Next… Show me the money

Creating the checkout experience with UI customization — here we have itemized billing controlling item name, quantity, sku#, tax, price and currency.

The documentation at PayPal was difficult for me to navigate through. I eventually worked out a way to do it.

How did I do it?

I passed the function paypal.Button() a dictionary it can understand.

Let’s begin with “style” — we wanted a responsive pill shaped button with a checkout label and no tagline. Gold was a nice color and our view was horizontal giving us a basic button. If you want to try different UI shapes and designs take a look at the link below for inspiration:

Customize the PayPal Checkout Button - PayPal Developer
PayPal Checkout offers several style options to customize the look and feel of your smart payment button. You can also…developer.paypal.com

Follow the code gist below demonstrating style and itemized billing in the checkout window:

If you see Amazon AWS Amplify references in there it’s because that is my current backend and I wanted a way to store identifiable customer data within the checkout process and keep track of who paid what, when, where, and how.

I hope this helps people integrate with the new PayPal Smart Buttons.

If you know any other gotchas or special cases like the ones above please let me know and I’ll add them to the list.

Here is the official integration guide from PayPal

PayPal Checkout Overview - PayPal Developer
Checkout Add checkout buttons to your page and moredeveloper.paypal.com

If I helped you in some way please clap and subscribe below:

Sign up for the newsletter!
Get solid gold sent to your inbox. Every week!

How to get Aptana Studio 3 to run on Yosemite 10.10.1

noreply@blogger.com (Unknown) — Tue, 18 Nov 2014 22:55:00 +0000

I was getting a very cryptic Java error message when attempting to start Aptana Studio 3 on Yosemite 10.10.1

The key to solving the problem was found here:

http://support.apple.com/kb/DL1572?viewlocale=en_US&locale=en_US

This is the official Java that is supported by Apple and fixed the issue after it was installed.

How to Fix Gradle Build Errors with Android Studio

noreply@blogger.com (Unknown) — Fri, 17 Jan 2014 01:22:00 +0000

Hi Cross Linked Coders,

I was trying to build an old ADT project for Android with Android Studio 0.4.2 and I faced a whole bunch of error messages.

The errors were all related to an older gradle version.

Essentially deleting the gradle 1.8 folder and placing the gradle 1.9 folder was one of the many steps to fix this.

Build.gradle needed to be changed to:

classpath 'com.android.tools.build:gradle:0.7.+'

and

buildToolsVersion "19"

The final error message was the most cryptic essentially the build was error free but when attempting to run the application there was a gradle sync error message. What solved this was clicking on the "Sync Project with Gradle Files" button. Which looks like this on the toolbar:

After going through all this I found a somewhat interesting list to fix the gradle issues here:
http://tools.android.com/recent/androidstudio040released

However 0.4.2 is the latest Android Studio so their list is a little out of date but is still helpful.

One thing to note is adding external .jar libraries to projects that don't use gradle you can drag the jar files into the project and then right click on the file and add as a library to the project. If the project is using gradle simply create a "libs" folder in the project and add all the .jar libraries to that folder.

Update 1:
If you have multiple modules in your project to solve gradle errors it is best to use the same version for the following structures:
dependencies {
classpath 'com.android.tools.build:gradle:0.12.+'
}
android {
buildToolsVersion "20.0.0"
}

Update 2:
If you get an error such as:
UNEXPECTED TOP-LEVEL EXCEPTION: com.android.dex.DexException: Multiple dex files define...

Any Dex errors in my case have always been because a library has been included twice in the module or project, either through copying the .jar file to the project file space or through module library linking.

Update 3 -- Slightly off-topic:
If you have any Android SDK Manager errors when either downloading from a repository or repository information is not showing up or is out of date -- then the best thing to do is to delete all termporary files which is done through the JAVA settings of your computer.

New Syntax to Array Indexing with C++

noreply@blogger.com (Unknown) — Sun, 18 Sep 2011 18:22:00 +0000

I was amazed to find a new syntax for indexing into arrays.

#include <iostream>

int a[] = {1, 12, 2, 8};

int b[] = {23, 11, 2, 3};

int main()
{
    int ind = 3;
    int c = ind[b][a];

    int d = 2[a][b];

    cout << "c = " << c << std::endl <<"d = " << d;

    return 0;
}

The Magic here is that the arrays are evaluated and indexed from left to right using integer variables or intrinsic integers.

c = 8
d = 2

C++ polymorphic shock of passing derived object arrays into a base object pointer function parameter

noreply@blogger.com (Unknown) — Mon, 02 May 2011 04:54:00 +0000

Code example:

#include <cstdio>

class Mammal
{
public:
    virtual bool IsFurry() = 0;
};

class Dog : public Mammal
{
    bool isFurryBreed;
public:
    Dog() { isFurryBreed = false; }

    virtual bool IsFurry()
    {
        return isFurryBreed;
    }
};

//the line below didn't compile
//int FindFurryMammal(Mammal pMammals[], int arraySize)
int FindFurryMammal( Mammal *pMammals, int arraySize)
{
    for( int i = 0; i < arraySize; i++ )
    {
        if( pMammals[i].IsFurry() )
        {
            return i;
        }
    }
    return -1;
}

int main(int argc, char * argv[])
{
    Dog dogs[10];
    int found;

    found = FindFurryMammal(dogs, 10);

    printf("Furry mammal found at index %d\n", found);
    
    return 0;
}

The code above suffers from polymorphic shock. Indexing through pMammals would be ok if polymorphism downcasted all the indices of Dog into the Mammal base class. However, polymorphism can only cast one index at a time even if passed as a parameter to a function.
So two issues ensue where only the first index of Dog is casted to Mammal, and therefore, any indexing beyond index 0 of pMammals will result in the indexing of incorrect memory location. This results in an exception error thrown at run-time when the function IsFurry is called since that function does not exist at that memory location.

The dangers of C++ string literals and non-const pointers

noreply@blogger.com (Unknown) — Mon, 02 May 2011 02:17:00 +0000

Foreword: I originally gained insight into this issue from Pete Isensee's blog post "When it Rains".

For years I used to take this line of C++ code for granted:

const char* str = "abcdef";

However, const protects you from altering the defined string literal values which is a good programmer habbit.

Question:
Why is this important, and why do most programmers use it?

Answer:
It's very important because according to the standard 2.13.4/2 "the effect of attempting to modify a string literal is undefined"

Question:
What is the correct way to alter strings?

Answer:
If you want to dynamically change string values use a character array because it creates a copy of the string. Moreover, the character array will terminate nicely with the null character '\0'.

Correct declaration and defintion:
char str[] = "abcdef";

Don't do this because it is undefined:
char* str = "abcdef";
str[0] = 'k';

Do this instead:
char str[] = "abcdef";
str[0] = 'k';

C++ post and pre-increment operator overloading does not behave like intrinsic type operators

noreply@blogger.com (Unknown) — Mon, 02 May 2011 01:19:00 +0000

//C++ post and pre-increment operator overloading does not behave like intrinsic types
//Version: 1.00

#include <iostream>
using std::cout;
using std::endl;
using std::ostream;

class IntWrapper
{
friend ostream & operator<<( ostream&, const IntWrapper& );

public:
IntWrapper( int val = 0 ) : i(val) {;}

IntWrapper operator+( const IntWrapper& rhs) const
{
    //use RVO
    return IntWrapper( this->i + rhs.i );
}

IntWrapper& operator++()
{
    ++this->i;
    return *this;
}

IntWrapper operator++(int)
{
    IntWrapper tmp(*this);
    this->operator++();
    return tmp;
}

private:
int i;

};

ostream &operator<<( ostream &, const IntWrapper & );

int main()
{
//interesting results of the post and pre increment operators

IntWrapper test;
int i = 0;

IntWrapper test1 = test + test++;
int test2 = i + i++;

//test1 should be the same as test2 but they are not

cout << test1 << " for intrinsic types test1 should be the same as test2 but is not since they are not intrinsic types " <<
test2 << endl;

cout << i << i++ << test << test++ << endl;

system("pause");
}

ostream &operator<<( ostream &output, const IntWrapper &r )
{
output << r.i;
return output;
}

The conclusion to this experiment is that due to the unspecified behavior according to clause [5/4]
of the standard the assumption that overloading post and pre increment operators will behave in the same manner as the intrinsic type operators is incorrect and not waranted by the standard.

Setup Windows Phone 7 apps with Smaato ads for Microsoft XNA framework

noreply@blogger.com (Unknown) — Sun, 01 May 2011 01:12:00 +0000

You might be asking yourself why you would choose smaato to monetize with in-app ads.
Firstly, smaato supports many countries and it has the SOMA SDK that is compatible with XNA.
Secondly, it allows for transfering of ad revenue through http://www.paypal.com/.

Note: this tutorial is for Windows Phone 7 XNA framework and not for Silverlight framework.

1) Sign up for a smaato account at http://www.smaato.com/

2) Generate AdSpace under the tab My Sites & Apps

3) Select - App (Windows Phone 7)
Note: This will generate your PublisherID and AdSpaceID -- these are very important and will be required as identifiers for you and your app.

4) Download the SOMA SDK for Windows Phone 7

5) From the SOMA SDK zip file place the SOMAWP7.dll and SOMAWP7.pdb files into your Windows Phone 7 project where the projectname.csproj file is located.

6) In your Windows Phone 7 project Right click on References in your Solution Explorer and ad SOMAWP7.DLL from Add Reference Browse tab and Microsoft.Phone from Add Reference .Net tab

7) Create a 480x79 png file called sampleAd.png in the project content folder and add sampleAd.png into the project's Content area inside the Solution Explorer.

8) In your project.cs file place the following line of code at the top your file

using Microsoft.Phone.Tasks;

using System.IO.IsolatedStorage;

using SOMAWP7;

9) In your project class that inherits the XNA framework place the following code

namespace Project
{    public class Project1 : Microsoft.Xna.Framework.Game
    {
       SomaAd somaAd;
       Texture2D textureSomaAd;
       SpriteBatch spriteBatch;

10) Initialize SOMA SDK using the AdSpaceID and PublisherID

protected override void Initialize()
{
//Set up SomaAd to get ads
somaAd = new SomaAd();

somaAd.Adspace = 12345678;

somaAd.Pub = 12345678;

//gets user location from device
somaAd.LocationUseOK = true;

//information about the app running
somaAd.Kws = "games, windows phone, entertainment";
//search string for ads to show
somaAd.Qs = "games, windows phone, entertainment, fun, exciting";

//Ask the user this informaton about them
//somaAd.Age = 30;
//somaAd.Gender = "m";
//By default, the SDK sets this to the current location
//somaAd.City = "Fremont";
//somaAd.State = "Ca";
//somaAd.Zip = "94539";
//somaAd.Country = "United States";
//somaAd.Countrycode = "us";

//By default, adInterval will deliver ads after 60 seconds.

//somaAd.adInterval = 60000;

somaAd.GetAd();
base.Initialize();
}

11) Load content into app for SOMA

protected override void LoadContent()

{

// Create a new SpriteBatch, which can be used to draw textures.

spriteBatch = new SpriteBatch(GraphicsDevice);

textureSomaAd = null;

// setup touch

TouchPanel.EnabledGestures = GestureType.Tap;

12) Make sure to Dispose SOMA with the UnloadContent function

protected override void UnloadContent()

{

somaAd.Dispose();

}

13) Check for screen touch in the SOMA image. Get the file name of the SOMA image and load up browser with link if touch detected.

string currentAdImageFileName = "";

protected override void Update(GameTime gameTime)

{

// if the back button is pressed then go back to the main menu

if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

{

Exit();

}

Vector2 somaAdPosition = new Vector2(0, GraphicsDevice.PresentationParameters.BackBufferHeight - 80);

Vector2 somaAdSize = new Vector2(GraphicsDevice.PresentationParameters.BackBufferWidth, 80);

while (TouchPanel.IsGestureAvailable)

{

GestureSample gestureSample = TouchPanel.ReadGesture();

if (gestureSample.GestureType == GestureType.Tap && somaAd.Uri != "" && textureSomaAd != null)

{

Vector2 touchPosition = gestureSample.Position;

if (touchPosition.X >= 0 &&

touchPosition.X < somaAdSize.X &&

touchPosition.Y >= somaAdPosition.Y &&

touchPosition.Y < (somaAdPosition.Y + somaAdSize.Y))

{

WebBrowserTask webBrowserTask = new WebBrowserTask();

webBrowserTask.URL = somaAd.Uri;

webBrowserTask.Show();

}

// if there is a new ad, get it from Isolated Storage and show it

if (somaAd.Status == "success" && somaAd.AdImageFileName != null && somaAd.ImageOK)

{

try

{

if (currentAdImageFileName != somaAd.AdImageFileName)

{

currentAdImageFileName = somaAd.AdImageFileName;

IsolatedStorageFile myIsoStore = IsolatedStorageFile.GetUserStoreForApplication();

IsolatedStorageFileStream myAd = new IsolatedStorageFileStream(somaAd.AdImageFileName, FileMode.Open, myIsoStore);

textureSomaAd = this.Content.Load<Texture2D>("sampleAd");

textureSomaAd = Texture2D.FromStream(this.GraphicsDevice, myAd);

myAd.Close();

myAd.Dispose();

myIsoStore.Dispose();

}

catch (IsolatedStorageException ise)

{

string message = ise.Message;

}

base.Update(gameTime);

}

14) Draw the texture of the SOMA image
protected override void Draw(GameTime gameTime)

{

// draw ad

//cubeToDraw.RenderToDevice(GraphicsDevice);

if (textureSomaAd != null)

{

this.spriteBatch.Begin();

this.spriteBatch.Draw(textureSomaAd, new Rectangle(0, GraphicsDevice.PresentationParameters.BackBufferHeight - 80, GraphicsDevice.PresentationParameters.BackBufferWidth, 80), Color.White);

this.spriteBatch.End();

}

base.Draw(gameTime);

}

15) Create your app on Microsoft App Hub and submit it.

16) Go to http://www.smaato.com/ and click on Add New App. For the Download URL field copy and paste the Deep link example from your App Hub app information page.

17) Something to be aware of is that your phone must have 3G or a WIFI connection to the internet for your ads to show up.
Note: when you are debugging your app and the phone is connected to Visual Studio 2010 Express for Windows Phone the ads do not show up even with a working internet connection on the phone. You must disconnect the phone from the computer in order for the ads to appear.

Written by: Paul

How to compile STLport with Visual Studio 7 (.NET)

noreply@blogger.com (Unknown) — Thu, 28 Apr 2011 03:24:00 +0000

STLport is a fast, portable, free, multi-featured and opensource version of the standard library. In this tutorial I will demonstrate how to get it working under Visual Studio C++ 7 (.NET).

1. Download the windows version of STLport from www.stlport.org.

2. Unzip it into any directory go to the src directory and rename the file vc7.mak to makefile.

3. Go to your command prompt and change directory to the Visual C++ bin directory like this "cd Program Files\Microsoft Visual Studio .NET\Vc7\bin " this is where you find the vcvars32.bat file. Now enter in vcvars32.bat. Then change to the directory where you unzipped STLport.

4. Now enter "nmake clean all" and STLport will build itself as a release build. To get a debug build enter "nmake debug_static" and then "nmake debug_dynamic".

5. After building enter "nmake install" and it will install all necessary headers, libs and dlls into their appropriate directories.

6. Now open Visual Studio. Then go to the "Options" menu and find the "Projects" heading, click on that and go to the "VC++ directories" heading. There you select "Include Files" and you add the STLport header directory which should be "Program Files\Microsoft Visual Studio .NET\Vc7\include\stlport". Then click on the up arrow and make sure that the directory goes all the way to the top of the list.

7. To get STLport to run in debug mode for debug builds write the following preprocessor code before including any stl headers. Also you have to get rid of windows.h macros max and min because they interfere with numeric limits max and min functions. Here is how you can setup your headers.

#ifdef NDEBUG
# undef _STLP_DEBUG
#else
# define _STLP_DEBUG 1
#endif
#ifdef WIN32
# undef max
# undef min
#endif

//STL includes
#include <limits>
#include <vector>
#include <map>
#include <string>
#include <set>
#include <memory>

//Stream includes
#include <fstream>
#include <iostream>
#include <iomanip>

namespace
{
//C Library includes
#include <stdio.h>
#include <stdlib.h>
#include <time.h>
}

#include <assert.h>

using namespace _STL;

8. If you want to use stream includes from STLport you have to get rid of Microsoft's std libs from the build. You do this by going to the property sheet for the project you are building and go to the headings "Linker" and then "Input" and use the ignore specific library feature and type "libcmt.lib" for Release builds and "libcmtd.lib" for Debug builds. Other useful self defining features of STLport are:

//changes its namespace _STL into std
#define _STLP_NO_OWN_NAMESPACE
//with this define you don't need to rely on using namespace_STL;
#define _STLP_NO_NAMESPACES
#define _STLP_USE_SYSTEM_ASSERT
//define this with MFC and include <stl/_config.h> then include <afx.h> instead of <windows.h>
#define _STLP_USE_MFC
//bounds checker needs this defined but makes your app run slower
#define _STLP_USE_MALLOC
//bounds checker needs this defined but makes your app run slower
#define _STLP_USE_NEWALLOC
//set this if you don't want multithreading
#define _STLP_NO_THREADS
#define _STLP_USE_STATIC_LIB
#define _STLP_USE_DYNAMIC_LIB
//debug for memory allocations
#define _STLP_DEBUG_ALLOC
//does not initialize allocated memory to zero like release builds
#define _STLP_DEBUG_UNINITIALIZED
//if you are having trouble building in debug mode try this
#define _STLP_USE_ABBREVS

Written by: Paul