9/17/2018

SOLVED React Native android build error GC overhead limit exceeded

Problem

Today I recently encountered an error while building four react native android applications, the error was:

* What went wrong:
Execution failed for task ':app:mergeReleaseResources'.
> GC overhead limit exceeded
and
* What went wrong:
Execution failed for task ':app:transformClassesWithMultidexlistForRelease'.
> GC overhead limit exceeded

Solution

It appears it has something to do with the memory of the machine or pc, all I did was restart my pc to clear all the previous processes and clean up the memory usage and then build the app again.

I also noticed that while I was developing for 5 hours, my machine was slowly slowing  down which gave me the hint to restart my pc. Anyways, restarting your machine or pc should fix this issue 95% of the time. Hope this helps.

9/13/2018

SOLVED ReactNative WebRTC update issue | Android O (--min-api 26)

Problem

I recently upgraded my ReactNative WebRTC version from "1.58.3" to "1.67.1" which causes my app to fail when building or even running it. The exact error I encountered is:

D8: Invoke-customs are only supported starting with Android O (--min-api 26)
D8: Static interface methods are only supported starting with Android N (--min-api 24): org.webrtc.EglBase org.webrtc.EglBase.create()

Solution

1. In your project root directory go to "android/app/" and open the file build.gradle

2. Copy and paste the code below within the android config.

compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
}

Example:

Build you react native app again and it should work.

9/07/2018

SOLVED Cabal ArenaKnights unable to open client

1. Download Cabal ArenaKnight here (You need to login first) and choose GoogleDrive Mirror since it is faster than the torrent (at least in my experience).

2. Install the downloaded AKCNAsetup.exe file.

3. Go to the folder you selected during the game installation process. This is the folder where you chose to install the game.

Note: Inside the folder you will see the cabalmain.exe file and if you open it, it will just launch the game guard and after that it closes and nothing will happen.

4. In the folder you should see a file "AKCNAmerica.exe".

Cabal ArenaKnights private server unable to open client SOLVED


Note: This file exist because I chose North America as my server. There are two options (North America and Europe), if you choose Europe as your server, the filename I think would be "AKCEurope.exe".

5. Open "AKCNAmerica.exe" or "AKCEurope.exe" and it should download the files / assets required to run the game based on these servers.

SOLVED Cabal ArenaKnights unable to open client

6. After downloading the assets / patch click the button "Finish" and it should launch the client perfectly. This will create a shortcut in your desktop called "AKC NorthAmerica" or "AKC Europe". This shortcut will be used if you to want launch the game again and this time, it will just download two files.

SOLVED Cabal ArenaKnights unable to open client
Relaunch game

SOLVED Cabal ArenaKnights unable to open client
Launching the game login

SOLVED Cabal ArenaKnights unable to open client
Selecting in-game server

SOLVED Cabal ArenaKnights unable to open client
Starting the game
Hope it helps.

9/06/2018

Get string values from Android strings.xml in React Native

Problem

I am working on a mobile app project that contains multiple app builds in React Native. Whenever I build a specific app, the string called "app_name" inside my

/android/app/src/main/res/values/strings.xml 

keeps on changing. I intended to do this so that the native part of my code knows what app I was building.

My goal here is to get the value of the string "app_name" so that can be able to render a specific asset(s) or use a specific java function intended for that app.

Solution

I have my strings.xml looks like this:


All I did was create a String function and inside that function I use getResources() and getString() to get the string value of app_name inside strings.xml;

Here is the code:


Using this approach, I am now able to pass the values inside strings.xml to my react native app. I was able to compare the value of the function appName() using appName().equals("appone") that return either true if match or false if not match.

Hope it helps.

8/29/2018

Mobile-First, Responsive and Adaptive design differences

Due to the amount of people who are using smart phones these days, people (
entrepreneurs) realize that they can expand their market if their websites can be used properly in both mobile and desktop. Because of this, the development of "mobile-friendly" websites came in and later on until this day it is commonly called responsive websites.

Due to the term "responsive" is being widely used these days for websites that has built-in mobile display. New developers get confused if they are being introduced to these other mobile design terms such as "adaptive" and "mobile-first".

In this topic we will clear that one out in order for us to have a better understanding on what type of websites we are developing.

What is mobile-first design?

Mobile-first design is a "development strategy" wherein you consider first how your website displays in mobile. This development strategy uses two different approach called "responsive" and "adaptive" design.

What is responsive design?

Responsive design is a technical approach where the developer is more focused on how the website element behaves in different device platforms by using specific CSS sizing unit or relative length such as percentage (%), vw (viewport width), vh (viewport height) . . and so on or certain display type such as flex.

This allows the website app elements to automatically adjust in any screen sizes without any delay. In some cases this approach is a bit slower in terms of performance since you will be using the same assets all over specially if you are browsing the website app using older devices. But hey! there are lots of ways to optimize this type of approach such as asset caching and proper data handling.

What is adaptive design?

From the word "adapt" meaning, something suitable for a new use or purpose. Adaptive design is sometimes misunderstood as responsive but they are totally different in terms of how they behave and being presented to the user.

In a simple explanation, adaptive design is a technical approach where you create different components that will render in different platforms or devices using media query or user agent. This type of design approach is quite expensive and hard to maintain because of different components that you have to look in to. But in most cases this is a lot faster compared to responsive because you will be using or rendering specific assets in a specific platform or device.

One good example of this is when you decide to provide better user experience to your users who are using older phones. That means you have to create a component and use lightweight assets so it can render fast in older devices.

Visual Presentation of Adaptive and Responsive design

Mobile-First, Responsive and Adaptive design differences

What to use?

This depends on the available resources you have but in most cases, responsive design is preferred by many due to these general reasons:

  • Google friendly
  • Fast development at lower cost
  • Single code base which means easy to maintain
Hope it helps.

8/06/2018

Enabling your blogger blog SSL certificate without custom domain

This guide is pretty simple and straight forward. While most topics talk about enabling free SSL certificate to custom domains, I would like to tell you also that there is free SSL certificate to the default blogger domain such as:

https://sampleblog.blogspot.com/

It is amazing how Google give their users the ability to have such an expensive features for free and if you are using blogger I would encourage you to make the most out of this amazing free feature by enabling it now.

To enable it all you need to do is go to Settings > Basic and under HTTPS section, there you can see a drop down menu. Just select YES then save the changes and you are all good to go. The SSL will work in almost immediately.

Enabling your blogger blog SSL certificate for encrypted and secure connection without custom domain
Enabling SSL from the drop down option

Enabling your blogger blog SSL certificate for encrypted and secure connection without custom domain


I would like to add that for custom domains, there is an additional option which is the HTTPS AVAILABILITY. Normally for custom domains you have to purchase and SSL certificate from a third party vendors and connect it to your custom domain manually. But with blogger's free SSL, this option allows you to connect blogger SSL to your custom domain without any hassle in to your end.

Enabling your blogger blog SSL certificate for encrypted and secure connection without custom domain
Enabling SSL to custom domains

All the images you posted or uploaded in to your blog will also resolve to HTTPS. Hope it helps.

8/03/2018

Error running 'app': Default Activity not found on Android with Kotlin

Problem:


I started learning Android and decided to use Kotlin instead of Java so I setup my first project and added MainActivity.kt and started running it in debug mode. I was so excited to run my first native app and see the output but this error killed my excitement.

Error running 'app': Default Activity not found on Android with Kotlin

It felt like I am in between two planets colliding when seeing this error so I took time to do some research and got a solution.

Solution:


Inside AndroidManifest.xml you have to add the code below within activity tag.

It should look like this:


I ran the code again and it worked perfectly.

8/01/2018

Deploying React JS App to Firebase Hosting

Firebase hosting was launched on May 13, 2014 and it is one of my favorite firebase features because it allows you to deploy your static web files such as CSS, HTML, Javascript and other files, as well as dynamic Node JS apps.

Today I will be providing steps on how to deploy your React JS app so it can be live online through Firebase hosting.

Assuming that you already have your React JS app ready to be deployed, but if not you can create a new project just for testing purposes.

STEP 1:


Login to your firebase account and click GO TO CONSOLE at the top right corner of the page.

deploying-react-js-app-to-firebase-hosting

STEP 2:


Click the box ADD PROJECT to setup a new project. Each project account has its own hosting feature.

deploying-react-js-app-to-firebase-hosting-add-project

STEP 3:


Enter the name of your project (project ID will be generated automatically, you can change it but I prefer to use the generated one to keep it unique). Check all the three(3) boxes and click the button "Create project" to finish setting it up.

deploying-react-js-app-to-firebase-hosting-add-project-proj-name

Once the project is ready, it should display like this:

deploying-react-js-app-to-firebase-hosting-add-project-proj-name

Click "Continue" so you will be redirected to Firebase control panel or console panel.

STEP 4:


Open your terminal and change your directory to where your React project is located.

$cd Documents/reactjs/awesomeproj/

STEP 5:


Make sure to install Firebase Tools CLI globally.

$sudo npm install -g firebase-tools

Make sure it is successfully installed by checking the version:

$firebase --version
3.19.3

STEP 6:


Login to your Firebase account through firebase CLI in the terminal by entering the command:

$firebase login

When asked "Allow Firebase to collect anonymous CLI usage and error reporting information?" type Y and press enter.

$firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? (Y/n) Y

This will going to open a page and allows you to select the Google account you want to link to your firebase project.

After selecting an account it will ask for permission that Firebase CLI will access your Google account. Just click button "Allow" to proceed.

Once successful the page will display:

firebase CLI successful access

And your terminal should display:

$ Success! Logged in as testemail@gmail.com

STEP 7:


Build your React JS app in order for it to run in Firebase hosting environment. To build your app just run the command below inside your React JS project root directory.

$npm run build

STEP 8:


Initialize firebase inside your app by running:

$firebase init


  • When asked "Which Firebase CLI features do you want to setup for this folder?". Just choose "Hosting: Configure and deploy Firebase Hosting sites".
  • When given an option to "Select a default Firebase project for this directory:". Choose the project name we created in step 3.
  • When asked "What do you want to use as your public directory? (public)", just type "build" and enter.
  • When asked "Configure as a single-page app (rewrite all urls to /index.html)?", type "y" and enter.
  • When asked "File build/index.html already exists. Overwrite? (y/N)", type "N" and enter.

Below is how my setup looks like:

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? build
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File build/index.html already exists. Overwrite? No
i  Skipping write of build/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...


  Firebase initialization complete!

After initializing firebase hosting, you can now deploy your app by running the command below:

$firebase deploy

Once you successfully deploy your app, the Hosting URL will be provided to you. If you go to your Firebase account's console page and click Hosting on the left side under Develop category, you can see your temporary website URL which can be changes later on if you decided to purchase a domain and connect it to your app by clicking the button "Connect domain".

3/20/2018

Remove bootstrap text input outline when focused in Meteor React

Recently I installed the bootstrap v4.0 and used some of the components and noticed this slightly transparent shadow or outline around text input and also in some other components such as buttons and so on.

I am using MeteorJS React so I was a bit puzzled on how to remove it. Did some search and tried possible solutions using JQuery but got no luck so I tried the simple CSS in react way and add the {outline: 'none', boxShadow: 'none'} and it worked. Here is the code:

Hope this helps.

2/11/2018

RF Online Server Setup INI config Generator


This RF online server INI generator is based on Rigzone's [Guide] ** RF v2.2.3.2 Server SetUP **. Please check the link for the database configuration and further details on how to use the generated INI. Thanks





Server Setup Name:

Your Host IP Address:

Your Port:

Your MS SQL Server Name:

Your MS SQL Server Username:

Your MS SQL Server Password:

Your ODBC Driver:

Your User Database Name:

Your Billing Database Name:

Your World Database Name:

Your HBK Path:

Your History Path:

Select Nation Code:

AccountSystem.ini


BillingSystem.ini


No Data Yet

LoginSystem.ini


Login_Filter_Dev.ini


rfacc.ini


No Data Yet

WorldInfo.ini


No Data Yet

WorldSystem.ini


No Data Yet

fg.ini


No Data Yet

fgrs.ini


No Data Yet

1/21/2018

Javascript Email format validation checker, check @ and dots

Question

I have done some searching on how to capture email address top level domain name dots and the number of @ sign. Most codes I found returned true if I enter like.

testemail@domain.com.co.uk.gov.info.org

I want a maximum of two dots and one @ sign only which caters domain such as:

domain.co.uk
domain.gov.info
domain.info.org

and so on.


Answer


Below is a code I created that will caters your email validation needs.


If you want to increase the number of accepted dots (.) just increase the value 4.

Hope it helps.

Display an array of texts using alert with line break in javascript

Question:


I have an array of string messages / texts and I want to display it using alert function in javascript. I managed to display them using join() function but I can not display them with line break at the end of each message / text and remove all the commas in between each text / message. Basically I want to display these texts like a list, below is my sample code:


Answer

What you did on your "test2" code is that you join all the texts and then added a break line at the end of it. Regarding the commas in between, you need to use the replace() function and regex to remove them. I believe what you are looking for this:

Copy and paste the code above in your browser console and press enter. It should display like a list.

10/20/2016

Show Remote MySQL Database Table List in Ubuntu

Question


I would like to know how to connect to MySQL database remotely and display the list of tables of my database. I tried doing it in my terminal through:

mysql -u USERNAME -pPASSWORD -h HOST_NAME DATABASE_NAME

and

mysql -u USERNAME -p PASSWORD -h HOST_NAME DATABASE_NAME

But nothing works, all it shows are the help options and variables.

Answer


All you need to do is use the mysqlshow instead of mysql like:

mysqlshow -u USERNAME -pPASSWORD -h HOST_NAME DATABASE_NAME

It should give you the list of table of your database like this:

Note:
 Password should be -pPASSWORD not -p PASSWORD.

Show Remote MySQL Database Table List in Ubuntu
MySQL Table list in Ubuntu terminal


10/14/2016

Steps in uploading your MeteorJS project to Heroku with GitHub CI

Assuming that you already have a MantraJS or a MeteorJS project and you are wondering how to make your project available online because you are tired of running it on localhost. Well today, I will show you the step by step guild on how to deploy your Meteor or Mantra JS application to Heroku.

Why Heroku?

There are 2 reasons why:

1. They have a free plan that is good enough for testing or starter projects.

2. They have an easy to use interface.

So let's get on with it. Since we will be using GitHub as our CI (Continuous Integration), it is important that you push your project to GitHub, here is the guide on how to do it.


Creating a GitHub Repository


1. Login to your GitHub account or sign up if you do not have an account yet.

2. Create a new GitHub Repository by clicking the button "New Repository" on the right hand side of your GitHub dashboard.

Uploading your MantraJS or MeteorJS project to Heroku and GitHub Step by Step Guide
Creating Repository 1.1


3. Fill out the Create New Repository Form

4. You can use either public or private option; however, the private option has payment.

5. Make sure the "Initialize this repository with a README" is UNCHECKED so that the repository will not be initialized or created automatically.

Uploading your MantraJS or MeteorJS project to Heroku and GitHub Step by Step Guide
Creating Repository 1.2: Step 3, 4  and 5
Just leave the "Add .gitignore" and "Add a license" option below to None.

6. Then click the button "Create Repository".

7. You will be given a guide on how to add the created GitHub repository to your project. (DO NOT CLOSE THE WINDOW YET)

Uploading your MantraJS or MeteorJS project to Heroku and GitHub Step by Step Guide

Uploading Project to GitHub


1. Open your terminal or CMD if you are using Windows Operating system.

2. Go to the folder or directory where your project is located via terminal or CMD.

3. Once you are inside the project folder, go back to your web browser and open the guide on how to create GitHub repository to your project. Follow the steps highlighted on the screenshot below.

Uploading your MantraJS or MeteorJS project to Heroku and GitHub Step by Step Guide
Creating Repository 1.3
NOTE: If you are using MantraJS or any project that has or uses NODE MODULES, you need to create a ".gitignore" file inside your project folder and inside the file just put "node_modules" (without double quotes). This will make the push or upload faster.
  • echo "# SampleProject" >> README.md - This will create a file named README.md inside your project folder.
  • git init - this will create a folder ".git" where your GitHub configuration is being set up.
  • git add README.md - You are notifying GitHub that you made changes to your git repository by adding a README.md file. However, since we will be adding our whole project files to git, you have to use "git add --all" instead of "git add README.md".
  • git commit -m 'first commit" - You are saving those changes you added. You can change the string "first commit" to any message you want (of course it has to be related to changes you made).
  • git remote add origin https://github.com/neilakoh/SampleProject.git - you are adding and connecting your remote git repository to your local git repository.
  • git push -u origin master - You are now uploading your files to your remote git repository (GitHub).
You will be asked to enter a username and password, just enter your GitHub username and password and it should go through.

Deploying your project from GitHub to Heroku

1. Login to your Heroku account

2. Click the button "Create New App" / "Create App".

3. Enter the name of your app (I named it "aboutonline") and select a runtime region (choose United States if you are outside Europe).

4. Click the button "Create App". You will be redirected to the "Deploy" page.

5. Under the "Deployment method" section click the option "GitHub". See screenshot below.

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Selecting the GitHub CI

6. Under the section "Connect to GitHub", just search the repository of your application. In this guide I created the repository with the name "SampleProject".

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Searching the GitHub Application Repository

7. Click the button "Connect" on the right hand side of the search result if your app is successfully located.

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Search Result if the repository is successfully located

8. Click the "Settings" at the top menu.

9. Under the section "Config Variables" click the button "Reveal Config Vars". This is where you add the ROOT_URL and the MONGO_URL of your application.

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Location for MongoURL and RootURL configuration

10. On the first box enter "ROOT_URL" or "MONGO_URL" and on the second box enter the value of your"ROOT_URL" or "MONGO_URL" and then click the "Add" button. See image below.

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Connecting your application to your domain name or web address and database

NOTE: Your domain name or web address is located at the bottom under the section "Domains"

11. Below, under the section "Buildpacks" click the button "Add Buildpack"

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Adding buildpack necessary to run your application on the web

12. A pop-up box will show up, just add the line below and click "Save changes":

https://github.com/AdmitHub/meteor-buildpack-horse.git

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Adding the buildpack URL

13. After adding the buildpack, go back to Deploy page.

14. Click the check box "Wait for CI to pass before deploy".

15. Click the button "Enable Automatic Deploys".

16. Click the button "Deploy Branch".

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Final Stage in deployment process. Step 14 to 16

This will build the application from your GitHub repository and point it to your ROOT_URL (web address) and MONGO_URL (database). Once it is done deploying your application you should be able to see your website when you access your domain name.

Uploading your MantraJS or MeteorJS project to Heroku using GitHub CI Step by Step Guide
Finish result
17. Done

Please comment below if you have questions, thanks.

10/05/2016

Unable to Access Localhost when running Webpack Dev Server

Question


In my sample React JS project I have a file called "webpack.config.js" and in it I specified the port where to run my localhost to 6000. My "webpack.config.js" looks like this:

When I try to run the webpack-dev-server it gives me the page "This site can't be reached".

Unable to Access Localhost when running Webpack Dev Server
Unable to Access Localhost when running Webpack Dev Server
Answer

I have encountered this issue as well and the cause of it is the port (in my experience). Granting the fact that you have setup everything properly (from react files, javascript files to node modules), something somewhere in your PC is already using the port 6000 so all you need to do is change the port to something else and it should work.

9/27/2016

Adding custom domain to your blogger blog the simple way.

Blogger is the most common online blogging platform out there today being used by many,  because it is easy to use, easy to add a theme, lots of free themes available online, easy to tweak, and of course it is connected to Google.

Having all that is not enough if you do not have a good domain name for your amazing blog. Today I will teach you the 6 simple steps on how to get your domain name connected to your blogger.

1. Go to your blogger dashboard

2. On right hand side of the page beside the button "View Blog" click the arrow pointing down.

3. Click the option "Settings" from the drop down menu.

How to connect your blogger to your external domain name the simplest way
Step 2 and3 Locating the settings of your blog

4. On the Settings page under the section Publishing click the link "Setup a 3rd party URL of your blog".

How to connect your blogger to your external domain name the simplest way
The link where you can add your external domain name

5. A box will show up where you can type in your domain name. On the box just type in your domain name that you bought from  a hosting company or somewhere. Note: There should be a "www" before the domain name like "www.sampledomain.com".

6. Click the button "Save" and this should give you an error saying "We have not been able to verify your authority to this domain. Error 12".

How to connect your blogger to your external domain name the simplest way
Step 5 and 6 Screenshot
Below the error is where you can find the instruction and the information you need to connect your domain name to your blogger.

How does these two information work?

The "www" and "ghs.google.com" is the hosting space of your blogger, this is where your domain name will point to when people view your blog.

The "kofxljfghpnr" and "gv-ijme7b7ro4yfk3.dv.googlehosted.com" are random IDs used for domain verification and monitoring. These IDs will be used to monitor your domain name if it is still active or not.

How do I use these information to my domain name?

The easiest way to use it is through setting up a subdomain name. Here are the steps on how you can do it. Let say you have a domain name called "amazingblog.com" registered under Godaddy or 1and1 or CrazyDomains and so on, what you need to do is:

1. Create or setup a Subdomain name called "www" under "amazingblog.com". The subdomain name should now look like "www.amazingblog.com" after it is created.

2. Access the DNS Settings of your subdomain "www.amazingblog.com".

3. Change the CNAME of the subdomain "www.amazingblog.com" to "ghs.google.com".

4. Create another subdomain and name it "kofxljfghpnr" so the second subdomain should now look like "kofxljfghpnr.amazingblog.com".

5. Access the DNS Settings of your subdomain "kofxljfghpnr.amazingblog.com".

6. Change the CNAME of the subdomain "kofxljfghpnr.amazingblog.com" to "gv-ijme7b7ro4yfk3.dv.googlehosted.com".

7. Done

NOTE: Each hosting or domain registrar company has different control panels and different ways of handling CNAME and subdomain names. If you are not familiar on how to create a subdomain name or setting up CNAMES, you have to contact their support for assistance or walk-through.

How long does it takes for the domain name to go live with my blog?

Most of the time it is instant after you click the button "Save". If your domain name or blogs does not go live after a day then you might need to check your subdomain names and CNAMEs for typos and then check your domain name status if it is active or being on hold due to some company policy issues.

Hope this topic helps, if you have further questions regarding this topic, please comment down below. Thanks