The Software Programming Experience of a Tech Lead

How Floyd's Tortoise and the Hare Linked List Circle Detection Algorithm Works

noreply@blogger.com (TenEleven Inc.) — Sat, 11 May 2019 11:35:00 +0100

There are many ways of storing data when writing a computer program especially when it's a group of data that share the same property. Like the data of students under the age of 12 or People who love same category of movies. This can be store as an array or a slice into the memory but sometime you just want some that is very simple to work with when the data get massively large to go through. Cases like this are when linked list comes to play. It essentially just a sequence elements where one element links to the next element.

I won't dive deep into benefits of a linked list right now, We will leave that for another day, Rather we will look into one of the more efficient algorithm of detecting if there is a circle in any set of linked list. This algorithm is popularly know as Floyd's Circle detection algorithm and can sometimes be referred to as Tortoise and The Hare Algorithm.

The algorithm uses two pointers, The fast pointer called Hare and slow pointer called Tortoise. Hence forth I will be referring to element of a list as node. The first use-case is to find out if there is a loop in the linked list. To solve this problem we need to loop through the list and make the Hare move two nodes per iteration and the Tortoise move one node per iteration. If there is a loop the pointer are going to meet in the loop, In that case the Hare pointer will be equal to the Tortoise pointer if they are pointing at the same node. Otherwise if the Hare get to the end of the list and never point to the same node as the Tortoise then there is no loop in the list. Now that we have established that our list has a loop, The next common question is to find where the loop start. To solve this we need to know the numbers of moves the Hare and Tortoise make before they meet. Note that the part of the list that is not inside the loop is refer to as tail. The tail is amply the number of nodes before the first node in the loop.

package floyd;
private Node startNode;

public static void main(String[] args) {
DetectLoopInLinkedList detectLoopInLinkedList = new DetectLoopInLinkedList();

Node n1 = new Node(10);
Node n2 = new Node(20);
Node n3 = new Node(30);
Node n4 = new Node(40);
Node n5 = new Node(50);
Node n6 = new Node(60);
Node n7 = new Node(70);
Node n8 = new Node(80);

detectLoopInLinkedList.startNode = n1;

n1.setNext(n2);
n2.setNext(n3);
n3.setNext(n4);
n4.setNext(n5);
n5.setNext(n6);
n6.setNext(n7);
n7.setNext(n8);
n8.setNext(n6);

if(isLoopPresent(detectLoopInLinkedList.startNode)){
System.out.println("Loop is present in list");
}else{
System.out.println("No Loop present in list");
}
}

private static boolean isLoopPresent(Node startNode){
Node slowPointer = startNode; // Initially ptr1 is at starting location.
Node fastPointer = startNode; // Initially ptr2 is at starting location.

while(fastPointer!=null && fastPointer.getNext()!=null){ // If ptr2 encounters NULL, it means there is no Loop in Linked list.
slowPointer = slowPointer.getNext(); // ptr1 moving one node at at time
fastPointer = fastPointer.getNext().getNext(); // ptr2 moving two nodes at at time

if(slowPointer==fastPointer) // if ptr1 and ptr2 meets, it means linked list contains loop.
return true;
}
return false;
}

}

public class Node{

private int data;
private Node next;

public Node(int data) {
this.data = data;
}
public int getData() {
return data;
}
public void setData(int data) {
this.data = data;
}
public Node getNext() {
return next;
}
public void setNext(Node next) {
this.next = next;
}
}

Distance traveled by the slow pointer(Tortoise) before meeting =𝑥+𝑦
Distance traveled by fast fast pointer(Hare) before meeting =(𝑥+𝑦+𝑧)+𝑦 = x + 2y + z
Since fast pointer(Hare) travels double the speed of the slow pointer(Tortoise) and time is constant for both when the reach the meeting point. So by using simple speed, time and distance relation (slow pointer(Tortoise) traveled half the distance): For this case we will take distance moved by the fast pointer (Hare) as i and the distance moved by the slow pointer(Tortoise) as j.

Therefore:

2 * j = i

2(x + z) = x + 2z + (y - z)

2x + 2z = x + 2z + (y - z)

x = z

Hence by moving slow pointer(Tortoise) to starting of the linked list, and making both slow pointer and fast pointer(Hare) to move one node at a time, they both have same distance to cover. They will reach at the node where the loop starts in the list.

Why You Still Need Antivirus and Internet Security Software in 2018

noreply@blogger.com (TenEleven Inc.) — Mon, 24 Sep 2018 22:28:00 +0100

Technology has evolved rapidly since the last decade. If you think your devices is safe and secure enough to protect your data, I'm sorry to break it to you but you are wrong. You are more vulnerable than ever before. Its just that now you are blinded in lots of ways you hardly notice that something is not right. Computer viruses are now advanced, they only attack when necessary or when instructed to do so. More so, virus is no longer the only villain, there are hundreds of security-threatening software online seeking to exploit a fragile system. Even with Internet security software and anti-viruses, the best way to stay safe is to be conscious of what you are doing while online.

A global ransomware attack is holding thousands of computers hostage.

Cybercrime may now be costing businesses worldwide as much as $600 billion and it points to the ease of digital crime as the reason - McAfee

Brazil

It is the second leading source of cyber-attacks and the third most-affected target.

Germany

The country is home to the most sophisticated underground internet economy in the EU.

Japan

Previously protected from cyber-crime because of the language barrier and no infrastructure for money laundering. Japan is seeing an increase, especially in attacks targeting banks.

United Kingdom

Online fraud and cyber-crime account for nearly half of all crimes, amounting to more than 5.5 million offenses annually.

United Arab Emirates

It is the second most targeted country in the world with the cost of cyber-crime estimated at $1.4 billion per year.

Safety Recommendations

You need to be aware that malicious software needs to be downloaded, installed, and executed before it can cause harm to your devices.
To guarantee safety on your devices, we advise you avoid using outdated software. Ensure all software on your computer are from trusted sources. Don't accept download request prompt from a strange or an unknown website. If you're the kind that stumbles upon websites on the web you need to take extra measures. Most victims fall for to this trap by clicking a spam link in their email or by downloading an untrusted software via their mail. Note that not all spam emails are caught by the default spam filters. Stay Safe!

Top 10 Software Development Roles That Makes More Money

noreply@blogger.com (TenEleven Inc.) — Tue, 18 Sep 2018 16:58:00 +0100

Software development is becoming more wider and diverse as technology changes. Deciding what job-role to fill with respect to income is a bit puzzling for any individual. Here, we'll examine the roles that pay the most in the industry, that is, roles that earn more money than others. It's worthy of note that not all software roles write codes and the complex mathematical computations. As a matter of fact, research shows that the highest paying roles are more dependent on developer's experience. There are roles that only require the basic understanding of the technology stack and still pay more money than the more difficult roles. In this article, you'll find out how you can earn well working in a software development environment with or without the core coding skills.

Software field has evolved from the native Web developer, Desktop app developer, Mobile app developer and Database Admin realm. New roles like Back-end developer; Front-end developer; Full-stack developer; Mobile developer; and DevOps specialist have open up opportunities for new entrants in the industry. The 2018 developer report from StackOverflow illustrates this trend in the chart below;

The report confirmed a noticeable trend that there are more back-end developers globally over the past years. Stack Overflow's survey provides us a salary calculator which we can use to estimate the latest earning of any development field based on different variables. This varies based on Location, Education, Technologies, and Years of experience. By using the calculator, we were able to compile the list below. You should go ahead and try it yourself.

1. Engineering manager: $89,000

2. DevOps specialist: $72,000

3. Data scientist or machine learning specialist: $60,000

4. Data or business analyst

5. Embedded applications or devices developer: $59,000

6. Full-stack developer

7. Desktop or enterprise applications developer: $59,000

8. Back-end developer: $57,000

9. System administrator: $56,000

10. QA or test developer: $56,000

As mentioned earlier, the top earning roles in Engineering Manager and Devops Specialist does not require core technical skills. Instead, the earning capability is mostly determined by an individual's experience and quality of projects executed.

Stream Videos with Low Server Resource and Gzip compression using NodeJS

noreply@blogger.com (TenEleven Inc.) — Fri, 14 Sep 2018 11:25:00 +0100

Video streaming is more popular than it was a decade ago, More videos are played on Youtube, Netflix, and other online video streaming media. Netflix is the best example who leveraged the benefit of Node.js by implementing it for production and they achieved the tremendous result economically and in performance. Delivering almost 7 billion hours of videos to nearly 50 million customers in 60 countries per quarter. This tutorial will highlight how to efficiently stream video from a NodeJS server with less server resource and a compressed output to make it easier for browsers to download the content.

This tutorial assumes you have the basic knowledge on how to use NodeJS. If you are new to NodeJS, this article is a good way to start learning. We are going to harness the power of inbuilt NodeJS files-system library that is written in C++ to make content manipulation seamless, fast and easy. In Node fs module, all methods have asynchronous and synchronous forms; I/O tasks can take time and it might fail due to various reasons.
It's recommended to use the asynchronous methods, The asynchronous form always takes a completion callback as its last argument. The module can perform many I/O functions like rename, delete, move, create, watch, read, write and many more on files or folder.
In this example usage, we are using the ExpressJS framework as our server-side handle. ExpressJS gives the request and the response object as a parameter for each route (req, res). Using response object to feed the client with the stream data, we can use the Node fs module. Another useful library that we are going to be using is the Node zlib module. Zlib provides compression functionality implemented using Gzip and Deflate/Inflate. It makes it possible for the fs module to feed the response stream with a compressed content. It is recommended to first check if the client environment supports compression before serving it with a compressed content. Compression-support checks can be done with the request object header. Every client that accept compressed data will send an 'accept-encoding' header.
Handling video streaming on a server is different from how a regular request is handled; video streaming needs to be on demand to save both client and server resource and avoid blocking other useful processes.
NodeJS non-blocking I/O paradigm and JavaScript makes a good streaming service. Companies like Netflix, LinkedIn and Paypal use NodeJS in production for some aspect of their services to enable a seamless experience for users.
Why Netflix Implemented the Node.js by Yunong Xiao, Principle Engineer, Netflix.

The example in this tutorial demonstrate a simple and straightforward way of streaming video content from the server. In a large user-base environment, a lot of refactoring and more coding will need to be done to make sure it scales perfectly for the use case. Below code sample shows how to handle video streaming from an ExpressJS route.

router.get('/stream', function (req, res) {
const videoURI = path.join(__dirname, "videos", "myvideo.mp4");
var acceptEncoding = req.headers['accept-encoding'];
const stat = fs.statSync(videoURI);
const fileSize = stat.size
const range = req.headers.range
if (range) {
const parts = range.replace(/bytes=/, "").split("-")
const start = parseInt(parts[0], 10)
const end = parts[1]
? parseInt(parts[1], 10)
: fileSize-1
const chunkSize = (end-start)+1
const stream = fs.createReadStream(path, {start, end})

const head = {
'Content-Range': `bytes ${start}-${end}/${fileSize}`,
'Accept-Ranges': 'bytes',
'Content-Length': chunkSize,
'Content-Type': 'video/mp4',
}
if (/\bdeflate\b/.test(acceptEncoding)) {
head['Content-Encoding']= 'deflate';
} else if (/\bgzip\b/.test(acceptEncoding)) {
head['Content-Encoding']= 'gzip';
}
res.writeHead(206, head);

if (/\bdeflate\b/.test(acceptEncoding)) {
stream.pipe(zlib.createDeflate()).pipe(res);
} else if (/\bgzip\b/.test(acceptEncoding)) {
stream.pipe(zlib.createGzip()).pipe(res);
} else {
stream.pipe(res);
}

} else {

const head = {
'Content-Length': fileSize,
'Content-Type': 'video/mp4',
}
if (/\bdeflate\b/.test(acceptEncoding)) {
head['Content-Encoding']= 'deflate';
} else if (/\bgzip\b/.test(acceptEncoding)) {
head['Content-Encoding']= 'gzip';
}
res.writeHead(200, head)
var stream = fs.createReadStream(path);

if (/\bdeflate\b/.test(acceptEncoding)) {
stream.pipe(zlib.createDeflate()).pipe(res);
} else if (/\bgzip\b/.test(acceptEncoding)) {
stream.pipe(zlib.createGzip()).pipe(res);
} else {
stream.pipe(res);
}
}
});

The code snippet above simply checks if the browser supports compression as we recommended and stream the content of myvideo.mp4 to the client side. Required modules for this code includes fs, path, zlib and express.

5 Ways to Make More Money as a Mobile App Developer

noreply@blogger.com (TenEleven Inc.) — Mon, 10 Sep 2018 10:52:00 +0100

Mobile application development is a profession filled with potential income source. As a developer making money by building mobile applications can be used to improve personal income. Apart from your primary source, You can venture into various aspects of software development that can further earn more money. Here we are going to expose 5 different ways of making more money as a mobile app developer.

1. Making Money through Blogging

Blogging for any software developer is a way of documenting your personal research thereby enabling you to build up yourself. Overtime, blogging has proven a good money-making avenue for the developer. A developer can start earning from published articles by having a mobile app that will not only serve their audience with latest posts but can be accompanied by adverts from Admob/Adsense or personal adverts.

2. Off-the Shelf Software

As a mobile app developer, Ready-made software products can be built to meet a certain public demand. Software products like this are common-place nowadays. A software solution like an e-commerce app can be built and resold to various business that requires such services. This can also be given away completely free with some bonus features that requires an in-app purchase to unlock.

3. Mobile Games

The mobile game market is highly profitable. Building a mobile game is now very easy thanks to platforms like Unity Game Engine and Unreal Engine. Mobile games are addictive and huge fans can purchase units like coins or unlock feature via in-app purchase but if it's given away for free, ads can be included.

4. Software as a Service (SaaS)

Building app for user consumption is another incredible way of making side income as a mobile app developer. Your products will be online so that users can use it for the solution it provides and pay monthly or yearly subscription per usage. Unlike off-the shelf softwares, SaaS products are completely owned by the developer. All updates, maintenance, and features updates are quite easy to publish. SaaS can be subscription based or in-app purchase to unlock features.

5. Company Publicity Software

As part of many ways to increase your company coverage, a mobile app for your company can get you closer to your clients and improve accessibility. Notification on new offers and recent updates can be pushed to clients with ease.

These are some of the many ways to monetize a mobile app product. I hope you find this article helpful. If it does, please respond by clicking "Yes. thanks" below.

8 Simple Ways to Speed up React Native Apps to Make it Faster

noreply@blogger.com (TenEleven Inc.) — Sun, 26 Aug 2018 14:46:00 +0100

"A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps." Performance issues in React Native apps have been noticeable to developers, Even though the React Native team is trying their best, Most of these have to do with React itself and how it works. Rendering at 60FPS (Frame Per Seconds) is possible but due to some unethical coding style can make state and render very very expensive, Rendering and loading of assets can draw back React Native app Speed, Overall app performance will also take some hit. We are going to look into 8 simple ways we can increase the speed of React Native application, These are derived from what other developers have done and my experience with React Native.

1. Use PureComponent When Possible

Use stateless function or user Pure component to avoid unnecessary re-rendering, React.PureComponent changes the life-cycle method shouldComponentUpdate and adds some useful logic to automatically check whether a re-render is required for the component. This allows a PureComponent to call method render only if it detects changes in state or props, hence, one can change the state in many components without having to write extra checks like:

if (this.state.someVal !== computedVal)
{
this.setState({ someVal: computedVal })
}

PureComponent will save you time and help to avoid writing redundant code.

2. Avoid Inline StylesSheet

Inline stylesheet is good but to further reduce the rendering time of your components Object StyleSheet is better, According to documentation.

Making a Stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
It also allows to send the style only once through the bridge. All subsequent uses are going to refer an ID (not implemented yet).

3. Don't Declare Function Inside The Render Method

Function declared inside the render method will be redeclared each time the render method is called, this will make the view of your app lag and performance will suffer a big hit. Functions like this:

render(){
const setValue = (val) => this.setState({ search: val });

return (<TextInput onChangeText={setValue} placeholder="Type here to translate!" />);
}

The example above define such situation where rendering will be very expensive every time there is a need to re-render. It's better to handle it like this:

class MyApp extends React.Component{

constructor(props) {
super(props);
}
...
...
...
setValue = (val) => this.setState({ search: val })
render() {
return ( <TextInput style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={this.setValue}
/>);
}
}

4. Do expensive Tasks Asynchronously

React Native app views and functions are written in JavaScript, JS is single threaded but highly demanding tasks like API calls should be done asynchronously to avoid blocking other activities, It's recommended to use promise or use async.

5. Optimize Static Image Performance

When loading assets from the Javascript package, React Native requires the asset file from the package and then sends it across the bridge to the UI Layer to be rendered. Static images can be optimized by loading it from the app package via Xcode asset catalogs or in the Android drawable folder against the JavaScript package. When the asset is already within the app package, React can just tell the UI layer to render the specific image without having to require or transfer the image data across the bridge.

Adding Static assets for iOS

To add your static asset images, simply click on your asset catalog in Xcode i.e project (Images.xcassets) and drag your asset files into it. Or once the asset catalog is open in Xcode, you can use the plus button in the lower left-hand corner to add assets.

Adding Static assets for Android

Add your static asset images to the drawable folder of the android project (android/app/src/main/res/drawable). Keep this folder single level, anything placed in subdirectories android won't see. Make sure every file name starts with a letter or you will get an error when compiling the project.

Usage in Javascript

You can now load the image in your JS code like below:

Note: Without the extension.

6. Use Global State

Calls to setState can be very very expensive and your app performance can drop very fast, It's better to use libraries like Redux for managing states in your app, apart from making your app state sync with your views Redux state also update your props making your views render only when necessary. If you are writing a component where you only need the props an no state it better to use React.PureComponent.

7. Don't Bind Methods inside Render

Binding action/ function inside render method is as dangerous as declaring function inside the render method.

<TextInput onChangeText={this.textChanged.bind(this)} />
or
<TextInput onChangeText={()=>this.textChanged()} />

Such functions get created each time your view get re-rendered, It's better done inside the constructor like so:

class MyApp extends React.Component{

constructor(props) {
super(props);
this.setValue = this.setValue.bind(this);
}
...
...
...
setValue(val) {
this.setState({ search: val });
}
render() {
return ( <TextInput style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={this.setValue}
/>);
}
}

8. Use Immutable Attributes

When using React.PureComponent it only updates when props change, If you are using immutable it has an added advantage because object don't just change unless they need to, immutable data cannot be changed once created. Immutable Js provides many Persistent Immutable data structures including List, Stack, Map, OrderedMap, Set, OrderedSet, and Record. PureComponent only does shallow comparison which means it doesn't compare internal attributes of an object, Immutable attributes and PureComponents are the good matches when you only need to re-render views only when necessary.

Flutter vs React Native : What You Need to Know Before Diving

noreply@blogger.com (TenEleven Inc.) — Wed, 22 Aug 2018 00:11:00 +0100

About a Decayed ago, smartphones were not widely used. Since then, smartphones have become an essential tool to browse our everyday lives, Mobile Apps are the tools that made it so. Mobile app development has evolved, Since the last decayed, Ways of developing a mobile application has taken a new shape. Developers want to be more efficient without compromising on speed and performance, We want to ship code more quickly by leveraging on cross-platform nature.

Frameworks has been built to help facilitate and speed up Mobile Application Development Tech Companies want to write product code once for mobile instead of twice but most of us have issues choosing what framework to use when we are starting a new project. Firstly, Cross-Platform Mobile App Development frameworks have taken over the large portion of the market since it started. The three most debated frameworks for cross-platform development, Ionic, React Native and Flutter are more useful now more than ever for rapid Mobile Application development.
Should you user Flutter backed by Google or React Native backed by Facebook for your next project, Let's find out.

Flutter Pros

Performance

Flutter's engine, written primarily in C++. React Native has a Bridge that connects the Native side with Javascript, Communication between these two sides can be quiet expensive.

Getting Started

Undoubtedly, Flutter excels because Google knows how to write easy and detailed documentation for their frameworks and programming languages. It’s really pleasant and useful to explore. Learning React Native require dealing with Android and iOS specific setups.

Animations

Animations render more smoothly and Faster on Flutter compare to React Native Animations Library, Flutter does low-level rendering support using Google's Skia graphics library

Built-in navigator

Flutter comes shipped with built-in Navigator, Route creation is very seamless, unlike React Native where you need to connect any of native navigation packages or opt for a JS base Navigation.

Flutter Cons

Immaturity

React Native has been around longer than Flutter and RN has a larger community and grows rapidly more than Flutter as at the moment, It's safe to say React Native is more mature that Flutter as at the time of this posting.

Darts

Developers are like "Did you say Darts?", Darts has been around for a while, It was meant to be a replacement for Javascript at Google for dynamic rendering but OOP can be difficult to learn for a beginner with its inheritance, polymorphism and all OOP hurts, You need to write more to get things done in Darts.

Templating

Unlike React Native there is no division of Darts files into the template therefore data management and styling becomes unpleasant for Developers.

Animating

Flutter animation might be smoother but it requires more to get simple animations done in Flutter compare to React Native.

React Native Pros

React

React is simple yet powerful and scalable web Framework. React make it easy to maintain large codebases. Here are Some of the things it brought to React Native are:
Components: React Components enforce separation of concerns with well-defined props and state. This is a major contributor to React’s scalability.
Simplified Lifecycles: Android and, to a slightly lesser extent, iOS lifecycles are notoriously complex. Functional reactive React components fundamentally solve this problem and made learning React Native dramatically simpler than learning Android or iOS.
Declarative: The declarative nature of React helped keep our UI in sync with the underlying state.

IDE's

React Native has existed for long and it's now supported by almost every available IDE. Flutter is currently supported by Android Studio, VS Code, and IntelliJ IDEA.

Javascript

If not the easiest programming language, Javascript is beginner friendly compare to Darts and most developers coming from the web can ease into mobile development in React Native.

App Size

Though it's faster Dart Bridge is bigger than React Native bridge, If two apps were built with equal functionality on Flutter and React Native, The size ratio of the app bundle, in the end, will always favor React Native.

Flexbox

React Native handles layout with Yoga, a cross-platform C library that handles layout calculations via the flexbox API. Most Web App developers are used to using Flexbox, This makes it easy for developers to build layouts in React Native.

Development Time

Because of Maturity and Community Modules, Developer skills and JavaScript, App Development in with React Native can be faster than Flutter.

Redux

Though Redux usage is optional for React, Redux is mostly used to prevent the UI from ever getting out of sync with state and enabled easy data sharing across screens.

React Native Cons

Performance

One of the largest concerns around React Native was its performance. However, It's been worked on. moving business logic and layout off of the main thread actually improves render performance in many cases.

JavaScript Tooling

JavaScript is an untyped language. The lack of type safety was both difficult to scale and became a point of contention for mobile engineers used to typed languages who may have otherwise been interested in learning React Native.

Initial Render Time

Unlike with native screens, rendering React Native requires at least one full main thread -> js -> yoga layout thread -> main thread round trip before there is enough information to render a screen for the first time.

Upgrading React Native

Although most React Native upgrades were trivial, there were a few that wound up being painful. In particular, it was nearly impossible to use React Native 0.43 (April 2017) to 0.49 (October 2017) because it used React 16 alpha and beta.

Personal Recommendation to Mobile App Developers

Personally, I will recommend to a developer base on their skill-sets, the project requirement and Timeline. You only have to work with what will make you more efficient, give you less headache and consume less development time. However, If you are totally new to mobile app development and has no prior experience with JavaScript, I will recommend you go with Flutter. Meanwhile, If you have prior experience with React, Javascript, Android Development or iOS Development, I will recommend you go for React Native.

React Native Navigation v2 with Redux and Google Analytics

noreply@blogger.com (TenEleven Inc.) — Mon, 20 Aug 2018 00:00:00 +0100

Navigation is one of the core aspects of Mobile app development, With the right navigation module your app will have the native look and feel it deserves. There are lots of Navigation Modules for React-Native out there but most of them are built on JavaScript, JavaScript base Navigations are only trying to fake the native navigation but you can get the real native navigation performance with the look and feel by using React Native Navigation for your Android and iOS app. React Native Navigation is written in native codes to give the best performance and the same look and feel you will get on a native mobile application. In this tutorial, we are using React Native Navigation with Redux and React Native Google Analytics Bridge. Redux and Google Analytics Bridge are just and added the bonus to our app, We use Redux to maintain our app state then we will use Google Analytics Bridge to Track our app and receive detailed usage information from the app.

Download Script Live Demo

Initiating React Native Google Analytics Bridge

The key difference with the native bridge is that you get a lot of the metadata handled automatically by the Google Analytics native library. This will include the device UUID, device model, viewport size, OS version etc.

Initialize Google analytics in our app with the following line of code:

import { GoogleAnalyticsTracker } from 'react-native-google-analytics-bridge';
const tracker = new GoogleAnalyticsTracker('UA-124024789-1');

For more info about React Native Google Analytics Bridge, you can visit the repo page here.

Using React Native Navigation

We are going to be using React Native Navigation API that is also available here. Starting Activity in React Native Navigation is event base, We need to listen for registerAppLaunchedListener(callback) This event is called once the app is launched. It's where you will initialize the app with the layout you want, via the SetRoot command.

Navigation.events().registerAppLaunchedListener(() => {
tracker.trackEvent('lunch', 'appLunched'); // Google Analytics tracker object
store.subscribe(this.onStoreUpdate.bind(this));
store.dispatch(appActions.appInitialized());
});

React Native Navigation Single Screen Activity

To create a single screen activity we are going to use the stack API:

Navigation.setRoot({
root: {
stack: {
id: 'Auth',
children: [
{
component: {
name: 'tlikes.WelcomeScreen',
passProps: {
str:
"This is a prop passed in 'startSingleScreenApp()'!",
obj: {
str: 'This is a prop passed in an object!',
arr: [
{
str:
'This is a prop in an object in an array in an object!',
},
],
arr2: [
['array of strings', 'with two strings'],
[1, 2, 3],
],
},
num: 1234,
fn: function() {
return 'Hello from a function!';
},
},
},
},
],
},
},
});

React Native Navigation Tabs Screen Activity

To create screen with multiple tabs using React Native Navigation we can use the Bottom Tabs API:

Navigation.setRoot({
root: {
sideMenu: {
left: {
component: {
name: 'tlikes.BottomTabsSideMenu',
},
},
center: {
bottomTabs: {
id: 'Dashboard',
options: {
bottomTabs: {
titleDisplayMode: 'alwaysShow',
barStyle: 'black',
translucent: true,
hideShadow: false,
},
popGesture: true,
statusBar: {
visible: true,
style: 'light',
},
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
drawBehind: true,
},
layout: {
orientation: ['portrait'],
topMargin: Navigation.constants().statusBarHeight,
},
},
children: [
{
stack: {
children: [
{
component: {
name: 'tlikes.TrendingScreen',
options: {
statusBar: {
visible: true,
style: 'light',
},
popGesture: true,
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
hideOnScroll: true,
title: {
text: 'Trending on T-Likes',
fontSize: 20,
color: 'white',
},
background: {
color: '#6B609A',
},

rightButtons: [
{
icon: require('../img/tlogo.png'),
id: 'tlogo',
color: 'white',
},
],
leftButtons: [
{
icon: require('../img/men.png'),
id: 'menu',
color: 'white',
},
],
},
bottomTab: {
fontSize: 12,
badge: 'New',
text: 'Trending',
icon: require('../img/trending.png'),
selectedIcon: require('../img/trending_selected.png'),
},
},
},
},
],
},
},
{
stack: {
children: [
{
component: {
name: 'tlikes.TalentsScreen',
options: {
statusBar: {
visible: true,
style: 'light',
},
popGesture: true,
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
hideOnScroll: true,
title: {
text: 'Discover Great Talents on T-Likes',
fontSize: 20,
color: 'white',
},
background: {
color: '#6B609A',
},
rightButtons: [
{
icon: require('../img/tlogo.png'),
id: 'tlogo',
color: 'white',
},
],
leftButtons: [
{
icon: require('../img/men.png'),
id: 'menu',
color: 'white',
},
],
},
bottomTab: {
fontSize: 12,
text: 'Discover',
icon: require('../img/discover.png'),
selectedIcon: require('../img/discover_selected.png'),
},
},
},
},
],
},
},
{
stack: {
children: [
{
component: {
name: 'tlikes.ContestsScreen',
options: {
statusBar: {
visible: true,
style: 'light',
},
popGesture: true,
topBar: {
visible: true,
hideOnScroll: false,
buttonColor: 'white',
hideOnScroll: true,
title: {
text: 'Compete With the Best of Bests',
fontSize: 20,
color: 'white',
},
background: {
color: '#6B609A',
},
rightButtons: [
{
icon: require('../img/tlogo.png'),
id: 'tlogo',
color: 'white',
},
],
leftButtons: [
{
icon: require('../img/men.png'),
id: 'menu',
color: 'white',
},
],
},
bottomTab: {
fontSize: 12,
text: 'Contests',
icon: require('../img/contest.png'),
selectedIcon: require('../img/contest_selected.png'),
},
},
},
},
],
},
},
],
},
},
},
},
});

You can view the complete source code or download the Demo App via the link above. If you have any question, Leave a comment below I will answer as soon as I can.

Quick and Fast Image Loading on Android and iOS with React-Native

noreply@blogger.com (TenEleven Inc.) — Tue, 14 Aug 2018 23:02:00 +0100

On this version of React-Native Tutorial we are going to look into how to load Images Quick, Fast and Easy with React-Native Module React-Native Fast Image, We are also going to add a little animation using React-Native Image Progress Module to allow users know when image loading is in progress and when it's completed. There are three Major modules Involve in this Project that is written by Trusted React-Native Developers and backed by the great community. The main Objective of this Project is to see how we can avoid loading Images twice on Android and iOS each time our app is launched therefore saving us some bandwidth data, React-Native Fast Image does this by caching the images that have been loaded by the app. As stated on the Repo, FastImage is a wrapper around SDWebImage (iOS) and Glide (Android), These are two powerful and efficient image caching libraries on Android and iOS platform.

React-Native Tutorial Platform Modules

Module	Version	Repo
react	16.4.1	React
react-native	0.56.0	React-Native
react-native-fast-image	0.15	React-Native Fast Image
react-native-image-progress	1.1.1	React-Native Image Progress
react-native-progress	3.5.0	React-Native Progress

Installing Required Modules

$ yarn add react-native-fast-image
or
$ npm install react-native-fast-image

$ react-native link react-native-fast-image

React-Native Progress Loader

$ yarn add react-native-progress
or
$ npm install react-native-progress

$ react-native link react-native-fast-image

For CocoaPod users

Add the ART subspec like so:

pod 'React', path: '../node_modules/react-native', subspecs: [ 'ART', ]

Or manually:

Add the ART.xcodeproj (found in node_modules/react-native/Libraries/ART) to the Libraries group and add libART.a to Link Binary With Libraries under Build Phases. More info and screenshots about how to do this are available in the React Native documentation.

React-Native Image Progress Loader

$ yarn add react-native-image-progress
or
$ npm install react-native-image-progress

Putting It All Together (Sample Usage)

import FastImage from 'react-native-fast-image';
import * as Progress from 'react-native-progress';
import { createImageProgress } from 'react-native-image-progress';
const FImage = createImageProgress(FastImage);

<FImage
style={{ height: 200, width: '100%' }}
source={{
uri: '<image_url_here>',
priority: FastImage.priority.normal,
headers: { 'accept-encoding': '' },
}}
resizeMode={FastImage.resizeMode.contain}
indicator={Progress.Pie}
indicatorProps={{
size: 80,
borderWidth: 0,
color: 'rgba(60,14,101, 1)',
unfilledColor: 'rgba(60,14,101, 0.2)',
}}
/>

There you go, The code above can be used in any component or directly in the Render Method of the View. The progress animation can also be changed by changing the indicator parameter i.e indicator={Progress.Circle} . Just play around and have fun with it. If you have any suggestions or question you can leave it in the comment box below.

Building Android and iOS Apps with React-Native in 5 Minutes.

noreply@blogger.com (TenEleven Inc.) — Mon, 13 Aug 2018 00:18:00 +0100

If you haven't read the previous post, Then head straight for it here, Why I Moved from Ionic to React-Native for Android and iOS Development, It will help you understand and appreciate the simplicity and the reason Framework matter in Mobile app development.
Now, We will design a mobile app for Android and iOS with React-Native in 5 Minutes. This app will run on both Android and iOS Devices, As go further in React-Native tutorial series, The magic in React-Native will reveal itself. We will demonstrate how to earnest the power of native module to create a robust Android and iOS app using React-Native.

Setting up your Environment

There are some software needed before an Android or an iOS app can be launched, To run Android app we need to download and Install Android Studios here. Running React Native app requires Node installed on your computer, Head to Nodejs Download Page to download and install the version that is suitable for your computer. Before you continue, Remember to join our Developers group by subscribing to our notifications list, to no miss out on latest tutorials on how to develop Interactive and Powerful and Interactive Mobile Applications.

Getting Started with React-Native

Hopefully, Android studios and Node has been installed as suggested above with no errors if you encounter any error while installing any of these products visit Getting Started with React Native for more instructions.

Building Android and iOS Application with React-Native

Firstly, Let's install React-Native (If you don't have it installed already) using the following command:

$ npm install -g react-native-cli

If the command above executed successfully, We are good to create a new React-Native Project but if you encounter an error while executing the command make sure you have an active internet connection and retry and make sure you follow the React-Native Getting Started Page carefully.

Building React-Native Project

Now we can create a new React-Native Project using this command on the terminal:

$ react-native init AwesomeProject

This will bootstrap a fresh React-Native project in a directory named after the project name.

Running React-Native Project

Running React-Native project can be done with a simple command depending on the platform. Firstly, Make sure to be in the project directory i.e by running:

$ cd AwesomeProject

This command will run the app on any connected device or an existing emulator.
For Android, In the the terminal run the following command, :

$ react-native run-android

For iOS, Application can be run using this command:

$ react-native run-ios

If you follow all the instructions well, Something similar to this should appear on your screen.

Why I Moved from Ionic to React-Native for Android and iOS Development

noreply@blogger.com (TenEleven Inc.) — Sun, 12 Aug 2018 13:18:00 +0100

Ionic has been my preferred for cross-platform mobile application development framework for about 2 years in a row, But lately, the most project I have work on is built with React-Native, I was a big fan of react but I haven't really looked into React-Native until recently. I love Ionic Framework a lot, Many can tell from my previous posts but there are just some projects that you really want to have access to the native APIs with ease and React-Native kind of provide that bridge out of the box. In this Blog post, I will explain my experience with Ionic Framework and why I switched to React-Native on my recent project and also share my opinion whether a beginner should start with Ionic Framework or just go directly to React-Native.

Ionic Framework

A little backstory, Ionic came to life in 2012 with a mindset of allowing Web Developers to use the same skill-set from the web to build mobile applications, Today it is used by thousands of Developers around the world, Ionic allows Developer to choose whether to use Cordova or PhoneGap as the underline technology for the building of Ionic Application, Most Ionic Developers prefers the former because not all the features of the latter were free. Cordova is an Apache product that allows building mobile apps to use standard web technologies i.e HTML, CSS & JS for cross-platform development. Cordova works by executing applications within wrappers targeted to each platform and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc.

In short, Cordova works by rendering application inside a Webview by implementing the application itself as a web page. Cordova provides access to native API via plugins written by Developers and the community, They provide an interface for Cordova and native components to communicate with each other and bindings to standard device APIs. This enables you to invoke native code from JavaScript.

Who uses Ionic in Real World

MarketWatch, Pacifica, Sworkit and many more apps like Joule: Sous Vide by ChefSteps, McDonald’s Türkiye are all built using Ionic Framework.

React-Native

React-Native started at Facebook as an internal hackathon project, in the summer of 2013 and it was announced at React.js Con. In March of 2015, Facebook announced at F8 that React Native is open and available on GitHub.
React Native a platform that let Developers build native mobile applications using JavaScript and ReactJS, ReactJS is a library whereas React Native is a framework, React Native is inspired by React, so the basic idea of the information flow is similar.
The flow in React is one-directional.
React Native reduce developers work considerably by allowing developers to maintain a single codebase even when targeting multiple mobile platforms.

Who uses React-Native in Real World

Facebook and Instagram use React Native. Other companies or products using it include Bloomberg, Pinterest, Skype, Tesla, Uber, Walmart, Wix, Discord, Gyroscope, SoundCloud Pulse, Tencent QQ, Vogue, and many more.

Why switch from Ionic to React-Native for Android and iOS Apps Development

Firstly, Most of the time my choice of technology is based on client demand and application requirements.
Lately, Apps I have worked on requires access to the native APIs of both iOS and Android platform, Accessing native APIs is quiet easy with React-Native compare to Ionic Framework, Writing a Native module is a thing linking it to JS is another thing.
React-Native make this process easy for developers because regular React-Native Modules are built using the same technic.
Secondly, After building my first React-Native app, I fell in love with the way it works. I notice the change in frame rate and the Native look n feel. I love apps that are fast and also the animation on React-Native are just exceptional.
So thats it for me, Thats how I move from Ionic to React-Native, Of course it doesn't mean I won't use Ionic on projects again but I will think about it first before I do.
Ionic is still winning in terms of community support also that doesn't mean React-Native community is not growing but because of AngularJS and TypeScript, Ionic is still leading on that aspect.
If you have any questions or opinion about this, Feel free to leave a comment below.

Build your first Ionic 3 Mobile App, Detailed Beginner's Guide

noreply@blogger.com (TenEleven Inc.) — Fri, 10 Nov 2017 00:24:00 +0100

Ionic is the Leading Cross-Platform development framework. Ionic let you build Mobile application for Android, iOS and Windows with just a single codebase.
The first issue that beginner's have when they want to build an Ionic App is that they don't have previous experience with the technologies behind the Ionic Stack.
Ionic 3 uses Angular, Typescript and HTML5 for it main components.
The first two stack technologies are both based on javascript.
Therefore, To truly understand this tutorial you should be able to write basic JavaScript. You are expected to understand functions, Objects, arrays and variable declarations.

Download Script
Typescript is a superset of JavaScript, It easy and scales your JavaScript codes. Angular 5 is currently in beta, It's now faster and smaller,
Angular application production build are now minimized and work faster.

Software Requirements for Building Ionic 3 Mobile App

For our final source code, You will need Android Studio install on your machine before we can build the Android Version of our Ionic 3 mobile app.
Secondly, To build the iOS version of our Ionic 3 Mobile app we will need to install Apple xCode on your MacBook.
Finally, To build the Windows Mobile version or our Ionic 3 App we will need to install Microsoft Visual Studio.

Installing NodeJs and NPM

In case you are hearing about Nodejs for the first time, NodeJs is a JavaScript runtime that uses an event-driven, non-blocking I/O model that makes it lightweight and efficient.
Simply put, A JavaScript on the server side as most developers like to see it.
To build our first Ionic 3 Mobile App we need to install Nodejs.
If you don't have NodeJs installed on your machine already.
Visit NodeJs Website Download Page. to download and install NodeJs in your machine.
NPM also know as Node Package Manager is a JavaScript package manager that is hosting thousands of JavaScript reusable modules.
Firstly, If you are running on Windows PC, NodeJs has been bundled with NPM but if your are running on **nix Machine you will need to install NPM separately.
Follow this link for instruction on how to install NPM.

Installing Cordova

Ionic can be used with Phonegap or Cordova but for this tutorial we will be building Ionic 3 Mobile App with Apache Cordova.
Install Cordova, Open your terminal and input this command.

npm install -g cordova

The command below uses NPM to install Cordova to your Machine.

Getting Started with Building Ionic 3 App

Firstly let's install Ionic and all it dependencies using NPM, Open your terminal and run the code below.

npm install -g ionic

The command above will install ionic-cli, IOnic, Ionic-Agular, Ionic-Material and other necessary module your machine needs to create Ionic Mobile app.
For this tutorial, We are going to build a TODO APP with Ionic 3.

Building a TODO Mobile APP with Ionic 3

Firstly, Open your terminal and run he following code.

ionic start todoApp sidemenu

The command above will create a folder todoApp and install and ionic sidemenu starter project into the folder.
This process will take some minutes before it completes.

After the process is done use your terminal to navigate into the project folder by running the following command.

cd todoApp

or Open the project folder in any editor of your choice, Microsoft Visual Code is Recommended it's a free, perfect and lite code editor.

From the Image above you could see the folder structure of our IOnic 3 TODOAPP. It look like this.
Let's run the todoApp by running the following command in the terminal. To open terminal in Visual Code press Ctrl+`.

ionic serve -l

See the expected output below

According to my terminal, our Ionic todoApp is running at port http://localhost:8100
If we open http://localhost:8100/ionic-lab it should look like below.

/node_modules

/src

  /app

  /assets

  /pages

  /theme

  /index.html

  /manifest.json

  /service-worker.js

Above are the files and folders you should be introduced to for now.

Folder	Description
node_modules	In node_modules, all modules used by our ionic app is saved in this folder. This folder is managed by NPM so hands off.
src	The src directory contain our raw, uncompiled code.Most of the work for an Ionic app take place in src. When we run ionic serve, our code inside of src/ is transpiled into the correct Javascript version that the browser understands (currently, ES5). That means we can work at a higher level using TypeScript, but compile down to the older form of Javascript the browser needs. src/app/app.module.ts is the entry point for our app.
./src/app/app.html	This is the main template file. In this template,ion-menu is used as a side menu, and then an ion-nav component to act as the main content area. The ion-menu’s [content] property is bound to the local variable nav from our ion-nav, so it knows where it should animate around.
../pages	This folder contains all the pages in our ionic app, we will be creating a TodoPage for our ionic app.
../theme/variables.scss	This contains all .scss predefined variables used by Ionic. i.e font-folder and default color scheme

Lastly, let's create our TodoPage. Open your terminal use Ctrl+c to stop the current process than input the following command.

ionic g page todo

This command instruct Ionic to create a new page called todo in our current App. Ionic stores all pages under the pages folder, Check the src/pages/ foldersee our new page called todo. Ionic create three files for every page it generates and put them in a folder. In our case todo.html, todo.module.ts, todo.ts and todo.scss. Our page will not be visible yet until we add it to the src/app/app.module.ts file, like below.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TodoPageModule } from '../pages/todo/todo.module';

@NgModule({
declarations: [
   MyApp,
   HomePage,
   ListPage
],
imports: [
BrowserModule,TodoPageModule,
    IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp,
    HomePage,
    ListPage
],
providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

In the above code for src/app/app.module.ts, We import the TodoPageModule so that our new page TodoPage will be recognized by our Ionic App. Next, Let's make our page TodoPage the welcome page for our Todo App. To do that we will need to edit the src/app/app.component.ts file to look like below.

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import {TodoPage} from '../pages/todo/todo';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;

rootPage: any = TodoPage;

pages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
   this.initializeApp();

   // used for an example of ngFor and navigation
   this.pages = [
    { title: 'Home', component: HomePage },
    { title: 'List', component: ListPage }
   ];

}

initializeApp() {
  this.platform.ready().then(() => {
   // Okay, so the platform is ready and our plugins are available.
   // Here you can do any higher level native things you might need.
   this.statusBar.styleDefault();
   this.splashScreen.hide();
});
}

openPage(page) {
   // Reset the content nav to have just this page
   // we wouldn't want the back button to show in this scenario
   this.nav.setRoot(page.component);
  }
}

Secondly, Here is our todo.html below.

<ion-header>

<ion-navbar>
<ion-title>Todo Page</ion-title>
</ion-navbar>

</ion-header>

<ion-content padding>
<ion-list-header>
MY TODO LIST
</ion-list-header>
<ion-list>
<ion-item>
<ion-label>Todo</ion-label>
<ion-input [(ngModel)]="todoBox" type="text"></ion-input>
<button item-right secondary outlined ion-button small (click)="addTodo()" >Add</button>
</ion-item>
<ion-item *ngFor="let do of allTodos; let i=index; ">
{{do}}
<button item-right color="dark" icon-only round ion-button small (click)="removeTodo(i)" >
<ion-icon name="remove"></ion-icon>
</button>
</ion-item>
</ion-list>
</ion-content>

Finally, Here is our final todo.ts .

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, AlertController } from 'ionic-angular';

@IonicPage()
@Component({
selector: 'page-todo',
templateUrl: 'todo.html',
})
export class TodoPage {

public todoBox:string="";
public allTodos:Array<string>=["Install Android Studio","Install Visual Code"];
constructor(public alertCtrl: AlertController, public navCtrl: NavController, public navParams: NavParams) {
}

addTodo(){
let self=this;
/*
*check if the todoBox input is no empty
*/
if(self.todoBox !=="")
self.allTodos.push(self.todoBox); //add the string to all todos array

self.todoBox="";//clean the todoBox
}
removeTodo(index){
let self=this;
let toRemove = self.allTodos[index];
if(toRemove){
let alert = this.alertCtrl.create({
title: 'Are you have completed this task?',
subTitle: "'"+toRemove+"' will be remove from the list!",
buttons: [{
text: 'Yes',
handler: () => {

self.allTodos.splice(index,1);
}
},'No']
});
alert.present();
}
}

ionViewDidLoad() {
console.log('ionViewDidLoad TodoPage');
}

}

To compile our Ionic 3 Mobile app for android run the command below.

ionic cordova build android --prod

Secondly, To compile for iOS devices run this command.

ionic cordova build ios --prod

You can download the demo(TodoApp) source code below

Download Script Please check the readme.txt file for instructions

Why Ionic Framework is Leading Cross-Platform Development Stack

noreply@blogger.com (TenEleven Inc.) — Wed, 8 Nov 2017 23:14:00 +0100

Ionic Framework is a mobile app stack that let web developers build apps for all major app stores and the web with a single code base. At the same time, your app looks and feels awesome on every device, Isn't that great?
In fact , All you need to know is Angular, JavaScript, Typescript and HTML5.
Arguably, All these are things you can learn through a normal weekend if your'e a newbie.
Above all, Ionic Framework makes it easy for web developers to build mobile and web apps for Android, Windows, IOS, Electron and Browser without stress.

No doubt, Hybrid mobile apps also know as Cross-Platform mobile apps are not performing the same as Native mobile apps but it's closer than you can imagine.
Presently, According to recent survey nearly 80% of developers building mobile apps identify as web developers, Which is what leads us to our first point.

Ionic Framework Technologies

No doubt, Ionic stack contributes a lot to what make it the leading cross platform development stack.
Firstly, Angular is currently the most popular JavaScript framework among web developers.
Secondly, Typescript is a widely know type superset of JavaScript and it's growing fast.
In Addition, Material Design makes Ionic User Interface look good making your app look the same across all platforms.
In fact, Ionic Team create their own version of Material Design called Ionic Material for faster User Experience.

Ionic Framework Components

Actually, Ionic apps are made of high-level building blocks called components, Components make Ionic learning curve easier and faster.
Even so, Components allow you to quickly construct an interface for your app. i.e Tabs, modals, popups, Virtual Scroll and cards. It's very easy to learn Ionic if you have web development skill, For a newbie Ionic is simple to learn.
As a result, Ionic apps look clean, simple, and functional, It displays beautifully on all current mobile devices and platforms.
You can view Ionic Component Documentation Here.

Supported Platforms ( Android, iOS & Windows )

In my opinion, Platform support contributes a lot to widely usage of Ionic Stack.
Ionic uses Cordova or Phonegap to deploy natively, or runs in the browser as a Progressive Web App.
Therefore, Ionic apps can be build to Android, iOS, Windows, Browser and Electron.

Developers and Community Support ( GitHub, Ionic Forum, StackOverflow )

In fact , As at the time of writing Ionic has 32106 Stars and 9304 Forks on Ionic Github Repo with thousand of questions on Ionic Support Forum with different answers, Ionic Framework has evolve a lot/
No doubt, The great Support Forum contributes to wide usage of the Framework because i'ts growing.
As a result, Most of the question receive fast response and community members are always there to help out their fellow developers.

Native Plugins and Custom Components

Ionic Native is a TypeScript wrapper for Cordova/PhoneGap plugins that make adding any native functionality needed to Ionic mobile app.
No doubt, Plugin make it easy for developers to access native API on Hybrid apps.
Presently, Ionic has more than 50 plugins e.g SQLite, Toast, Vibration, Geo Location, Firebase, Push Notification and more.
Furthermore, Ionic has a lot of custom component built by developers to help create views that are not available in Ionic component doc.
In conclusion, Ionic is an incredible tool in right hands, It an awesome Framework to work with.
In addition,With my years of experience in mobile application development, A Framework like Ionic is hard to come by.
Ionic just do it better than others, Ionic make a newbie build like a professional with little time to spend.

Apple-1 PC hand-built by Steve Wozniak and Steve Jobs in 1976 sold for $355,000

noreply@blogger.com (TenEleven Inc.) — Tue, 20 Jun 2017 09:29:00 +0100

Who could imagine such a machine still exists and it's still working, A working 1976 Apple-1 Personal Computer was sold for $355,000 last week in an auction hosted by Christie's New York. This is the first Apple's Personal Computer, This particular version was hand-built by Steve Wozniak and Steve Jobs in the confines of Steve Jobs' garage. A similar version of this 1976 PC is sold for $671,400 in 2013 and $905,000 in 2014, This makes $355,000 sales the cheapest Apple-1 sales till date, It comes without a casing and power supply, it's the first to have its own motherboard, which set it apart from competitors. Apple-1's success at the time is credited as the force that catapulted Apple into the personal computing industry. The Apple-1 originally retailed for $666.66, and now only 66 computers still exist. Sound like a coincidence? Maybe!

Meet Bixby Samsung New Voice Assistant

noreply@blogger.com (TenEleven Inc.) — Sun, 18 Jun 2017 23:01:00 +0100

Bixby digital assistant was absent from the initial release of Samsung Galaxy S8, Samsung promised would be coming at a later date. On the 1^st of May, 2017, Bixby was released for S8 and S8 Plus owners in South Korea. Before now, S8 owners have the ability to use Bixby features like Vision augmented reality, Bixby Home, and Reminders features since launch. But the full voice control recognizes the major selling point of the new virtual assistant, which Samsung claims will allow users to accomplish anything they could do with regular touch controls through voice commands. The English version was delayed due to the company’s difficulty in optimizing it for English commands- according to report, Samsung has announced that S8 and S8 Plus owners can test Bixby’s voice features before anyone else.

The Preview of Bixby is now available to limited number of S8 and S8 Plus owners, Only a limited number of people will receive this early access, Samsung says, so there are no guarantees even if you sign up. Still, you can try your luck here. This early access will let users send a text, change their settings, or make phone calls with their voice.

Facebook Using over 150 People and Artificial Intelligence For Counter-Terrorism

noreply@blogger.com (TenEleven Inc.) — Sun, 18 Jun 2017 08:21:00 +0100

Recent Announcement by Facebook that most accounts removed for terrorism-related activity are uncovered by the company itself, and that it’s using artificial intelligence to find more threats. People have questioned the role of tech companies in fighting terrorism online, Facebook is using image-matching for terrorist photos and videos, and detecting “clusters,” where terrorist content is posted across related accounts. We want to find terrorist content immediately, before people in our community have seen it. Already, the majority of accounts we remove for terrorism we find ourselves. But we know we can do better at using technology — and specifically artificial intelligence — to stop the spread of terrorist content on Facebook

Theses action are no only taken on Facebook alone, According to the report.

Because we don’t want terrorists to have a place anywhere in the family of Facebook apps, we have begun work on systems to enable us to take action against terrorist accounts across all our platforms, including WhatsApp and Instagram. Given the limited data some of our apps collect as part of their service, the ability to share data across the whole family is indispensable to our efforts to keep all our platforms safe.

With all this in place Facebook is having 150 People on this because-

AI can’t catch everything. Figuring out what supports terrorism and what does not isn’t always straightforward, and algorithms are not yet as good as people when it comes to understanding this kind of context. A photo of an armed man waving an ISIS flag might be propaganda or recruiting material, but could be an image in a news story. Some of the most effective criticisms of brutal groups like ISIS utilize the group’s own propaganda against it. To understand more nuanced cases, we need human expertise.

We want Facebook to be a hostile place for terrorists. The challenge for online communities is the same as it is for real world communities – to get better at spotting the early signals before it’s too late. We are absolutely committed to keeping terrorism off our platform, and we’ll continue to share more about this work as it develops in the future.

Smart Keyboard that Reads Fingerprints by Microsoft

noreply@blogger.com (TenEleven Inc.) — Sat, 17 Jun 2017 22:49:00 +0100

New smart Keyboard that reads Fingerprint unveiled by the tech giant Microsoft is the latest keyboard in town, With maximum security guaranteed, Microsoft has turned you to your own password. The Modern Keyboard is the successor to the Surface Keyboard, and looks identical. The only changes are a new fingerprint reader and the ability to use a cable for a wired connection instead of wireless. This super brilliant Keyboard can be used to log into Windows 10 or websites using Windows Hello. The new Modern Keyboard will work with Windows 10, MacOS, and the latest versions of Android.

Unfortunately this keyboard is yet to be released by Microsoft,Some users complain that it is release way too early because many has purchased Microsoft Surface keyboard. This Brand new innovation from Microsoft will be available on the market soon. Stay tuned for latest Updates.

Killer Tips to Improve Website PageSpeed Performance and Optimization

noreply@blogger.com (TenEleven Inc.) — Wed, 7 Jun 2017 21:06:00 +0100

PageSpeed is the amount of time it took web server to respond to the requests of the browser and how long it takes for it to serve all page Resource(Images, Audio, Videos, Flash Animations, e.t.c.), Content (HTML, CSS and Texts) and Meta Information (HTTP info i.e Author, Content-Type, e.t.c) to be fully downloaded and rendered by the web browser. Modern browsers have been optimized to handle page loading efficiently with time, They do have their own drawbacks but not as expensive as a slow webpage. A slowly loading webpage is not good for user experience, most users just click away or close the tab before the loading completes, These can make any potential buyer leave before the get to see any product on the website. PageSpeed improvement is a way of gaining more power above market competitors, People can browse through contents faster, make payments and review / comments. It encourage them so browse around more categories and purchase more items.

Don't code today what you can't debug tomorrow.

This article of focuse on Improving and Optimizing PageSpeed Performance of your website, I am going to be sharing with you how fast loading webpages get users to stay and read / view more web pages of their website. Nobody like a slowly loading page on their browser, I can make users loose interest in the web page content and affect the entire website.
The loading time of any webpage is determined by the Server Response Time and Page Contents. HTTP state header information contribute little to the weight of page resource , Therefore it will not in the scope of this article.

How Loading Speed is Calculated?

Page loading speed is measured by the resource, contents and server response time of the website, There are other factors added as a way of making sure that your page loads on time and it's visible and appealing to users.
Some of these is the prioritization of the above the fold contents, Above the fold contents are the contents that are seen before the browser-cut( before scrolling down ) by user immediately the page is visible on user browser, This contributes a lot to user experience, Your page will look very different and unfamiliar to users when the CSS and JavaScript are not fully loaded, Only HTML elements are visible in this situation. The presentation of the above the fold contents of any webpage encourages users to stay and continue on that page.

How to Improve Page Loading Speed?

Loading speed improvement has many approach but the most popularly practiced and effective ways are:

Resource Compression, Minification & uglification

Minification is a method of compressing source codes mostly JavaScript, CSS and HTML by reducing the variable lengths, remove empty spaces and removing necessary semi-colons, spaces and new lines. Uglification is more like a security / compression in one package, It joins sentences in source code using comma, changes property access to dot-notation(object.property) instead of square bracket method (object['property']), All these to reduce number of characters, remove dead code and remove console logs. It also simplifies conditional statements (if) to negation method ( condition ? true : false), Boolean operations, constants, function declarations.
All these make source codes extremely difficult to read in return for better performance. Image can be compressed by shrinking images to use less bandwidth and load faster.
This is better done on PNG files, It is recommended to use PNG images in your web pages because it’s the only widely supported format that can store partially transparent images. In PNG (Portable Network Graphics) file, similar colors in your image are combined.
This technique is called “quantization”. By reducing the number of colors, 24-bit PNG files can be converted to much smaller 8-bit indexed color images. All unnecessary metadata can also be stripped. This is exactly what TinyPNG does, You can use TinyPNG to compress your images before upload to your webpage, They are no limited to PNG file JPG file are also compressible.
Gzip compression is enabled via webserver configuration, it's a method of compressing files for faster network transfers(between client and server).
Enabling Gzip makes web server to provide smaller file sizes which load faster for your website clients (user browsers).
Gzip compression can be apply via .htaccess file, If you're no familiar with this read : Secure your web applications through .htaccess file

Asynchronous Resource Loading

Loading web resource asynchronously popularly known as async method is a way of importing web resource after page contents has been fully loaded, Using this method allow the importand parts of the page to load before they async resource kicks in. Not all resource can be loaded asynchronously but most resource can be loaded using this method. Part of things that slows down page loading are banners, images and JavaScript files.
Google AdSense and most popular ads company have their default loading style asynchronous.
To stop Scripts from consuming loading time make sure the are placed at the bottom of the page and are loaded asynchronously. Like weight JavaScript Libraries can be loaded in no time if their minified version are imported but there are some plugins that import necessary scripts, If your page has such plugin make sure they are loading resource with async method.
These can be done for audio, video and Images as well.

Lazy Loading

An alternate method is known as Lazy Loading method, Special thing about lazy loading is that contents are no loaded until they are needed.
Lazy loading is the same method Facebook timeline utilized.
It works by loading contents as user is scrolling through them, This way loading time is reduced ad contents are not downloaded from the server until they are required.

Resource Caching

Caching is used in speeding up dynamic web applications by alleviating database load. It is treated as a temporary storage area for page contents, to avoid duplicate data query from the database. Cache store contents in the memory thereby making it easily accessible by the server. Resource like Scripts (JS, CSS) and database result can be cached for a certain period of time to make the page load faster for web server.
Most popular caching engine is memcached

Reduction of Page HTML Tags & Elements

Making use of less tags in pages is part of making the page portable and lite to deliver to clients, Large page contents will leade to more page tags.
It is recommended to paginate the webpage or add "redmore" button for longer contents so that page loading and navigation will be easier for visitors.

Use CSS above Images

CSS is liter than images, Try to use CSS instead of image whever possible. Things like background image, button image can take time to load. Try using CSS background style or color instead of images. If it necessary to use an image make sure it is compressed.

Conclusion

These recommendations is not a silver bullet, There are lots of thing that affect page loading speed, These are just the most common and recommended methods. Try to test and understand things that are really slowing down your page then use one of the methods above to solve the problem.

Getting started with Google Material Design ( Materialize ) an HTML5 Responsive Framework

noreply@blogger.com (TenEleven Inc.) — Wed, 10 May 2017 09:00:00 +0100

Google Materialize is a CSS framework but the special thing about this powerful library is that it gives your page the look and feel of material properties(colors, typography, shapes, patterns and layout). If you have ever come across any Material Design CSS you will understand what Google is trying to archive by creating this powerful library. Materialize has it own unique characteristics( Motion and Stacking ) which is why developers don't see it as another Twitter Bootstrap duplicate, It follows Google Material Design Documentation.
Material Design is a design language that combines the classic principles of successful design along with innovation and technology.:

We want to create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform.

Materialize is the web implementation of Material Design to web which was initially made by Google for Android.

Download Materialize Download Demo Script Live Demo
According to Materialize Documentation , If you will prefer the Sass version of the framework you can download it from the Getting Started Page.
The team working on this wonderful framework are a team of students from Carnegie Mellon University in Pittsburgh, Pennsylvania.

I had to share their picture, this team did a very incredible job, The team include Alvin Wang (Far right), Alan Chang(Middle left), Kevin Louie(Middle Right), Alex Mark(Far Left).

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet"></link>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

The needed framework files can be imported as above, the first line import the CSS file while the second line imports the JavaScript needed.
To install Materialize using Bower, Use the code below.

bower install materialize

Sample markup with all needed resource should look close to this:

<!DOCTYPE html>
<html>
<head>

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>


<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>

This video best explains the quality designs that can be done with Materialize

Programming Languages and Frameworks used to build Top Nigeria Websites.

noreply@blogger.com (TenEleven Inc.) — Fri, 5 May 2017 19:07:00 +0100

Nigeria websites are programmed using different languages and frameworks from Education, E-commerce, News, Music & Entertainment, Sports Betting & Updates and Banking are the top most popular websites in Nigeria. Some scale well but I believe scalability has to do with the code and the database structure, This are what most visited websites fail to implement which added to the bounce rate and reduce active user capacity. All this is due to the Developers and the maintenance team of the project. I have decide to take some time out and do a research on which framework / programming languages the most popular websites in Nigeria are using and how do they affect their performance and capacity. Let choose a couple of popular Websites in Nigeria we are going to be reviewing.

Considering the recent attacks on many Nigeria portals and creation of fake web portals, Most attacks happens when web server are brought to their knees by massive users, Some site will just stop responding to users requests. After looking at the statistics of this report shows that most traffic ready portals in Nigeria includes JAMB, NYSC e.t.c. Kudos to bet9ja for using ASP .NET for their website, That has brought lot of growth to the company, That is the reason why they are able handle huge traffic and their site load faster. This is the major reason why their daily pageview is outstanding.

Websites	Popularity / Unique Visitors. month	Front-End (Client Side)	Back-End (Server Side)	Database	Notes
bet9ja.com	2,057,220	Javascript	ASP .NET Framework	MSSQL	Sport Betting website
Naij.com	1,592,841	Javascript	PHP	MySQL	News Portal
Jumia.com.ng	371,813	Javascript	Nodejs	MySQL	Online Shopping Mall
Nairaland.com	589,095	Javascript	PHP	MySQL	Online Forum
Vanguardngr.com	515,110	JavaScript	PHP / JavaScript (NodeJs) ( Wordpress )	MySQL	News Portal
Lindaikejisblog.com	336,366	JavaScript	Java	BigData	News Blog
Punchng.com	300,894	JavaScript	PHP	MySQL	News Website
Naijaloaded.com.ng	137,147	JavaScript	PHP / JavaScript (NodeJs) ( Wordpress )	MySQL	News / Entertainment
Jamb.org.ng	77,718	JavaScript	ASP .NET Framework	MSSQL	Government / Education
Nysc.org.ng	40,238	JavaScript	ASP .NET Framework	MSSQL	Government / Education
Konga.com	110,736	JavaScript	PHP , JavaScript (Node.js)	MySQL	Online Shopping Mall
Gtbank.com	115,311	JavaScript	PHP / ASP .NET Framework	MSSQL / Oracle DB

It not a surprise that Nigerians love to bet and read News. If you have any website you will like to be added to the list you can drop it in the comments.

Programming Languages and Frameworks Nigeria Programmers Should Learn in 2017

noreply@blogger.com (TenEleven Inc.) — Fri, 23 Dec 2016 13:27:00 +0100

The web and Software Development industry is growing fast at an unpredictable rate, Nigerian Programmers need to relentlessly be marching forward each day. Lots of popular Programming Languages, Frameworks and Tools were released in 2016 which gives us more power and change the way we work. It is difficult to keep track of everything that is new, so I decided to give you my take on what is important and what you should learn during the next twelve months of 2017. So am going to be talking about the Trends, Frontend, Backend, Tools, Databases and Tech.

The Trends

2016 Top Tech Trends includes the The Progressive Web App Concept, The Bots, The Cloud and Frontend Frameworks.

Progressive Web Apps (PWA)

In 2016 we saw the rise of the Progressive Web App concept. It represents web applications that works Supports all Browsers, Responsive to support most popular screen sizes(desktop, mobile, tablet, or whatever is next),Safe and Secure to use with the help of HTTPS to prevent snooping and to ensure content hasn't been tampered with, User friendly URL e.t.c. They can be added to your smartphone homescreen and can even send Push Notifications, bridging the gap with Native Mobile Apps. I think that in 2017 Progressive Web Apps are going to become even more important and are well worth investigating. Luckily Konga a Nigerian Ecommerce Company has started moving towards PWA.

The Bot Hype

Everybody is talking about bots right now. A chatbot is a service or tool that you can communicate with via text messages. The chatbot understands what you are trying to say and replies with a coherent, relevant message or directly completes the desired task for you. . Bots are the new mobile apps, and if you hurry up you can catch the wave while everyone is excited. Modern chatbots do not rely solely on text, and will often show useful cards, images, links, and forms, providing an app-like experience. Once the novelty wears off, bots will probably be relegated to some boring role such as automated customer support. But hey, we can dream!

Consolidation of Frontend Frameworks

In the JavaScript community we have an incredible churn of frameworks and tools, with new ones being born almost every week. Until recently, the expectation was that the old tools would just be replaced by the new, but this is not what we saw in 2016. Instead, we saw the popular frameworks exchanging ideas and incorporating the innovations put forth by newcomers. So in 2017 it won’t matter much which of the major JS frameworks you choose, their features are mostly comparable.

The Cloud

Companies and developers everywhere are embracing the cloud. This is virtualized computer know as Virtual Private Server(VPS), It is an infrastructure that is available on demand and fully configurable from a control panel. The most popular cloud companies on the web are Amazon Web Service popularly known as AWS, Google Cloud and Microsoft Azure. Thanks to their ongoing competition prices have been falling, bringing it within the budgets of smaller companies and individual developers. Familiarizing yourself with the cloud workflow would be a good investment for 2017.

Machine Learning (ML)

Machine Learning (ML) has exploded in popularity during the last twelve months. And with the historic AlphaGo vs Lee Sedol match in March, it entered the mainstream. It’s been almost 20 years since IBM’s Deep Blue supercomputer beat the reigning world chess champion, Gary Kasparov, for the first time under standard tournament rules. Since then, chess-playing computers have become significantly stronger, leaving the best humans little chance even against a modern chess engine running on a smartphone. Smart computer systems that learn from raw data are revolutionizing the way we interact with our mobile devices. By the looks of it, ML will be an even bigger factor in 2017.

The Techs

The cloud has won over the entire software industry, with large companies closing down their datacenters and moving their entire infrastructure there. The three main platforms are AWS, Google Cloud and Azure. All three have powerful, ever expanding feature sets, including virtual machines, hosted databases, machine learning services and more. Prices are going down rapidly, and the cloud is within reach of small companies and individual developers. For 2017, it would be a good learning experience to deploy a side project to one of these providers.
Artificial Intelligence was the buzzword of 2016. Speech recognition and image recognition and classification are only two of the user facing applications of the technology, with machines reaching and even surpassing human level performance. AI has been used to make Facebook recognize your friends faces automatically when you upload pictures and There are a lot of new startups that apply AI and Machine Learning to new domains. And a lot of open source projects were released like Google’s Tensor Flow and Microsoft’s Cognitive Toolkit. Machine Learning is a very math-heavy topic, and for those just starting out there are comprehensive online courses available.
Virtual Reality (VR) and Augmented Reality (AR) have been around for a while, but finally the technology is mature enough to offer a compelling experience. Facebook (Oculus Rift), Google (Daydream) and Microsoft (Windows Holographic) all have virtual reality platforms that welcome third party developers. VR headsets still face challenges like eliminating nausea and offering compelling use cases outside of gaming, but they are getting there.
Learn one of these: Cloud deployment, a Machine Learning library, VR Development.

Languages

In 2016 we witness the domination of powerful programming languages that make work easy for programmers, Node.Js really gain much recognition in the year, With powerful tools like Gulp, Grunt and Socket.io there are endless things you can achieve with such flexibility and project flow. Which is why JavaScript is at the top of the list.We have some already excellent languages on the list.

JavaScript

JavaScript continues its incredible pace of innovation. Catalyzed by the quick release schedules of web browsers, the JS standard is updated every year. The next edition, ES2017, is expected to be finalized in mid 2017. It will bring the dream feature of many JS developers – аsync/аwait for working with asynchronous functions. And thanks to Babel, you can write ES2017 in every browser even today.

TypeScript

TypeScript 2.1 was released in late 2016, as it tagline says "JavaScript that scales". Typescript is a strong tools for large apps bringing async/await for old browsers and improved type inference. TypeScript is a statically typed language which compiles to JavaScript. It adds powerful features like a classic OOP model and optional static typing to make large codebases easier to maintain. It is the preferred language for writing Angular 2 apps, and we recommend giving it a try. Here is our quick start guide about it.

C# 7.0

C# 7.0 is expected in 2017 and will enhance an already excellent language. C# 7.0 adds a number of new features and brings a focus on data consumption, code simplification and performance. Microsoft surprised everyone when they introduced the open source Visual Studio Code editor and .Net Core. Both of these run on Linux, Windows and macOS and allow you to write faster and efficient applications in C#.

Python 3.6

Python 3.6 was released in December. It is bundled with major improvement on Windows, Security and CPython implementation plus and upgrade in it standard libraries. It is solidifying its place as the scripting language of choice for devs, IT pros and scientists. It is suitable for automation, web development, machine learning and scientific computing. The Python 2/3 split has been an years-long struggle for the community, but these days you can confidently choose 3 and enjoy full library support. For those in need of extra performance, they can take a look at PyPy, an alternative JIT enabled Python runtime.

Ruby 2.3

Ruby 2.3 was released earlier this year with a number of performance improvements. This is the first stable release of the Ruby 2.3 series. It introduces many new features. Ruby is also a good choice as a general purpose scripting language, but it shines when paired with Rails. The Ruby 3×3 initiative was announced, which will attempt to make the upcoming Ruby 3 release 3 times faster that the current version, opening the doors to using Ruby in more contexts.

PHP 7.1

PHP 7.1 was released in December, and brings minor enhancements to the language such as Nullable types, Square bracket syntax for array destructuring assignment , Class Constant Visibility e.t.c. This builds upon the major performance improvements that were had in version 7.0 last year, turning PHP into a fast platform for building web applications. We recommend PHP The Right Way for good practices and a modern take on building web apps in the language.

Java 9

Java 9 is expected in 2017 and will come with welcome new features like a repl for evaluating code, HTTP 2.0 support and new APIs.The official HTTP 2.0 RFC was approved just a few months ago, building on top of Google’s SPDY algorithm. SPDY has already shown great speed improvements over HTTP 1.1 ranging between 11.81% to 47.7% and its implementation already exists in most modern browsers.Java 9 will have full support for HTTP 2.0 and feature a new HTTP client for Java that will replace HttpURLConnection, and also implement HTTP 2.0 and websockets. There is a strong demand for talented Java developers and a breadth of exciting projects that use the language. If Java is not your thing, there are a number of JVM based languages like Kotlin and Scala that you can check out. Twitter has started transiting into Scala.

Swift 3

Swift 3 was released earlier this year. This is Apple’s vision for a modern programming language that eases the development of apps on iOS and macOS. The biggest update in Swift 3 involves the standard library adopting consistent naming conventions across libraries. Swift is open source and has attracted a large community. Version 4 is planned for 2017, which will improve the language and introduce server APIs, making it a good choice for writing web apps and backends. The API Design Guidelines contain the rules that the team settled on as they were building Swift 3, which place a high value on readability and accessibility to new programmers.
If you are looking for something more exciting, you can try out Crystal and Elixir, which both combine a friendly ruby-like syntax with superior performance. Or you can look into a functional language like Haskell or Clojure. Two other fast languages are Rust and Go which we recommend.
Learn one or more of these: JS (ES2017), TypeScript, C#, Python, Ruby, PHP7, Java/Kotlin/Scala.

Databases

In 2016 scaleable database are what big tech companies are after,I personally have tried MongoDb in as lot of applications with scalabiliy issues and it worked fine, It has Simplified data governance with document validation, coupled with GUI-based schema discovery and visualization, We have also seen how such database can be used to manage session in PHP.

MongoDb 3.2

MongoDB 3.2 is a gian release in Early November. MongoDB is an open-source document database and the leading NoSQL database. MongoDB was developed by the company 10gen (now called MongoDB Inc) in October 2007. MongoDB has been used by many high-trafficked highly-scalable websites such as Craigslist, eBay, Foursquare and SourceForge. MongoDB 3.2 is a giant leap forward that helps organizations standardize on a single, modern database for their new, mission-critical applications.MongoDb 3.2 was shipped with new pluggable storage engines optimized for in-memory computing and the most security-sensitive applications, Faster business insight with enhanced real-time analytics and search, coupled with seamless connectivity to industry-standard SQL-based BI tools for sophisticated data exploration.

PostgreSQL

PostgreSQL saw two whole releases this year – 9.5 and 9.6. They brought the long awaited UPSERT functionality that we know from MySQL (aka ON DUPLICATE KEY UPDATE), better full text search and speed improvements thanks to parallel queries, more efficient replication, aggregation, indexing and sorting. Postgres is used for massive, terabyte scale datasets, as well as for busy web apps, and these optimizations are welcome.

MySQL 8.0

MySQL 8.0 is going to be the next major release of the database. It is expected sometime in 2017 and it will bring a lot of improvements to the system. MySQL is still the most popular database management system and the entire industry benefits from these new releases.
For NoSQL fans, we can recommend CouchDB. It is a fast and scalable JSON storage system which exposes a REST-ful HTTP API. The database is easy to use and offers great performance. PouchDB is a spiritual counterpart to CouchDB that works entirely in the browser and can sync with Couch. This allows you to use Pouch in an offline ready web app, and get automatic syncing once internet connectivity is available.

Redis

Redis is developers favorite key value store. It is small, fast and versatile. You can use it as a smart memcache alternative, as a NoSQL data store or a process messaging and synchronization channel. It offers a large number of data structures to choose from, and the upcoming 4.0 release will have a module system and improved replication.

Learn one of these: MongoDb, Postgres, MySQL, CouchDB, Redis.

Frontend

The web platform made two major advancements recently – Web Assembly and Service Workers. They open the gates for fast and performant web applications that bridge the gap with native compiled applications. Service Workers in particular are the enabling technology for Progressive Web Apps and bring support for Notifications to the web platform, with more APIs to follow in the future.

Angular.js

Angular.js 2 was released this year. The framework is backed by Google and is very popular with enterprises and large companies. It has a vast number of features that make writing everything from web to desktop and mobile apps possible. The framework is written in TypeScript, which is also the recommended language to write applications in. There is a lot to read about, but we think learning Angular 2 in 2017 would be a good investment.

Vue.js

Vue.js also saw its 2.0 release this year. It borrows the good ideas from Angular, React and Ember, and puts them into an easy to use package. It is also quite a bit leaner and faster than the first two. We suggest that you give it a try this year, by starting with one of our Vue.js tutorials.

Ember

Ember is another solid choice for a JavaScript framework. It supports data bindings, auto-updating templates, components and server-side rendering. One benefit that it has over its competitors, is that it is more mature and stable. Breaking changes are much less frequent and the community values backwards compatibility. This makes the framework a good choice for long-lived applications.
Two other frameworks that are worth a look are Aurelia and React. The ecosystem around React has grown considerably more complicated in the last year, making it difficult to recommend for beginners. But experienced devs can combine the library with GraphQL, Relay, Flux and Immutable.js into a comprehensive full stack solution.
No frontend compilation would be complete without mentioning Bootstrap. Version 4 is currently in Alpha and a release is expected in 2017. Notable changes are the new versatile card component and the flexbox grid (see our comparison with the regular grid here), which modernize the framework and make it a joy to work with.
SASS, LESS and Stylus remain the three most popular CSS preprocessors today. Although vanilla CSS is finally getting support for variables, SASS and LESS are still superior with their support for mixins, functions and code organization. If you haven’t already, take a look at our SASS and LESS quick start guides.
Learn one or more of these: Angular 2, Vue.js, Ember, Bootstrap, LESS/SASS.

Backend

There is plenty of choice for the backend, all coming down to your preference of a programming language or specific performance needs. An ongoing trend in web development is business logic to move away from the backend, turning that layer into an API which is consumed by the frontend and mobile apps. But a full stack framework is often simpler and faster to develop in, and is still a valid choice for a lot of web apps.

Node.js

Node.js is the primary way for running JS outside the browser. It saw many new releases this year, which increased performance and added coverage for the entire ES6 spec. Node has frameworks for building fast APIs, servers, desktop apps and even robots, and a vast community creating every kind of module imaginable. Some frameworks that you may like to look into: Express, Koa, Next, Nodal.

PHP

PHP is a web language first and foremost, and has a large number of web frameworks to choose from. Thanks to its excellent documentation and features, Laravel has formed an active community. Zend Framework released version 3, which marks a great upgrade for this business oriented framework. Symfony also saw a lot of new releases this year, making it an even better choice as a full stack solution.

Ruby

For Ruby, the Rails framework is the premier choice. Version 5.0 was released in 2016, bringing support for Web Sockets, API mode and more. Sinatra is also a good choice for small apps, with version 2.0 expected sometime in 2017.

Python

Python has its own full stack/minimal framework combo in the form of Django and Flask. Django 1.10 was released in August introducing full text search for Postgres and an overhauled middleware layer.

Java

The Java ecosystem also has popular web frameworks to choose from. Play and Spark are two solid choices, and as a bonus they can be used with Scala as well.
For the enthusiasts there is also Phoenix, which is written in Elixir and attempts to be a feature complete alternative to Rails with superior performance. If Elixir is one of the languages you would like to learn in 2017, give Phoenix a try.
Learn one of these: A full stack backend framework, a micro framework.

Interactive & Animated Checkout Payment Design with Card

noreply@blogger.com (TenEleven Inc.) — Sat, 17 Dec 2016 20:23:00 +0100

You website Checkout Payment Page is should be one of the most inviting pages of your website either your running a large E-Commerce Site or Mini-Store. Card is a tiny vanilla JavaScript project (with a JQuery version) that will make your credit card forms much more fun and interactive. After a quick installation, the library will take your form and transform it into an animated CSS-only credit card that gets filled as users input their data. With Card.js and animation that will make your Store Payment Page interactive and attractive to buyers is as easy and simple as it can get.

Download Script Live Demo

How to use without JQuery

var card = new Card({
// a selector or DOM element for the form where users will
// be entering their information
form: 'form', // *required*
// a selector or DOM element for the container
// where you want the card to appear
container: '.card-wrapper', // *required*

formSelectors: {
numberInput: 'input#number', // optional — default input[name="number"]
expiryInput: 'input#expiry', // optional — default input[name="expiry"]
cvcInput: 'input#cvc', // optional — default input[name="cvc"]
nameInput: 'input#name' // optional - defaults input[name="name"]
},

width: 200, // optional — default 350px
formatting: true, // optional - default true

// Strings for translation - optional
messages: {
validDate: 'valid\ndate', // optional - default 'valid\nthru'
monthYear: 'mm/yyyy', // optional - default 'month/year'
},

// Default placeholders for rendered fields - optional
placeholders: {
number: '•••• •••• •••• ••••',
name: 'Full Name',
expiry: '••/••',
cvc: '•••'
},

masks: {
cardNumber: '•' // optional - mask card number
}
// if true, will log helpful messages for setting up Card
debug: false // optional - default false
});

Using with Jquery

$('form').card({
// a selector or DOM element for the container
// where you want the card to appear
container: '.card-wrapper', // *required*

// all of the other options from above
});

How to use Database ( MongoDb ) as session Handler PHP - 2016

noreply@blogger.com (TenEleven Inc.) — Wed, 10 Aug 2016 15:43:00 +0100

By default PHP has an inbuilt session handler that stores session variable by saving session variables into a file. The native sessions just depend on writing a small cookie and file on the server. Database based session allows you to add security functionality to the session layer, Any performance lose or gain by putting your sessions in a database won't be noticeable for the vast majority of applications, however it's more secure if you put your sessions in the database, that being the most developers primary reason for doing so. Database-based sessions are also perfect in server farm environments because a user could visit each server in the course of their visit; file-based sessions would only be valid on that one server. But we can override PHP's built-in session handlers by using session_set_save_handler . When your app gets big and you start thinking of scaling Database based session makes things easier. MongoDB (from humongous) is a free and open-source cross-platform document-oriented database. You can read more about MongoDB at http://www.mongodb.org. Using MongoDb is a way of separating the session management database from the primary sever Database, It is well known that most PHP websites use MySQL as their primary database. I prefer not to let the session handler implementation affect the primary database performance. MongoDb can also store some special data format and an Object as a whole without any data loss.

Download Script
To properly overide the default PHP session handler we need to use session_set_save_handler . It is necessary for the costume session handler method implement SessionHandlerInterface Interface so as to incorporate the required session handling methods like open() , close(),read(),write(),destroy() and finally the garbage collection method gc() these methods are useful to complete our session handler class.

session_set_save_handler($this, true);
session_set_save_handler(array($this, 'open'),array($this, 'close'),array($this, 'read'),
array($this, 'write'),array($this, 'destroy'),array($this, 'gc'));
register_shutdown_function('session_write_close');

We are going to implement the open() method like so:

public function open($savePath=null, $sessionName=null)
{
$this->_link->connect();
return $this->_link->_isConnected;
}

The open() method is a simple method, It ensures that our database is set to receive data, it enable connection to the database (MongoDb). Now let write the close() method:

public function close() {
$this->gc(get_cfg_var("session.gc_maxlifetime"));
$this->_link->disconnect();
return !$this->_link->_isConnected;
}

Let see the write and read method :

public function read($id) {
$result = $this->_link->from($this->_schema)->where("active = ?",true) ->where("id = ?",$id)->where("expires > ?",New \MongoDB\BSON\UTCDateTime(time()))->first();
if($result){ return $result->data;}
else {return null;}
}

public function write($id, $data) {
$diff = 60 * $this->_increment;
$mongotime = New \MongoDB\BSON\UTCDateTime(time()+$diff);
$result = $this->_link->from($this->_schema)->where("id = ?", $id)->where("active = ?", true) ->save(array("id" => $id, "active"=>true, "expires" => $mongotime, "data" => $data,"ip" =>$this->_ip));
return $result;
}

public function destroy($id) {
$result = $this->_link->from($this->_schema) ->where("id = ?",$id)->delete();
return $result;
}

Finally to make use of our session handler class in any PHP file:

include "include/session.php";
/*inject your session database as parameter
*if database dosent exists Mongodb will create it for you.
*/
/*Initiate session */
$session = new Session("myAppSession");
/*
*Add item to session
*/
$_SESSION["foo"]="Bar";
/*
*get itemfrom session */

/*Regular string from session*/
var_dump($_SESSION["foo"]);
/*
*adding object to session
*/
class user { public $name="Peters"; public $hobbies=array("coding"); }
$olduser = new user();

/*Username before saving to session*/
echo $olduser->name;
/*
*Save user object inside database
*/
$_SESSION["user"] = serialize($olduser);
/*
*Get user object from session
*/

$newuser = unserialize($_SESSION["user"]);

/*Username after retreiving from session*/

echo $newuser->name;

Amazon aws EC2 'Elastic Cloud' Setup with Ubuntu, PHP, Apache, Node.js, MySQL and PHPMyAdmin Installation

noreply@blogger.com (TenEleven Inc.) — Thu, 26 May 2016 14:07:00 +0100

Amazon EC2 stands for Amazon Elastic Compute Cloud it is a ~~Amazon~~ web service (aws) that provides resizable compute capacity in the cloud. It will be really selfish of me not to share the benefits of this wonderful cloud platform. We are not only going to setup an EC2 Server instance but I will educate you on the benefits of this great cloud platform that comes almost free to developers, If you have been wasting your time with hosting companies this is your chance to save money and pay for just what you use. Amazon EC2 provides developers the tools to build failure resilient applications and isolate themselves from common failure scenarios. After reading this amazon aws tutorial You should know How to setup Amazon EC2 Instance , Install Apache , PHP, Node.js MySQL, PHPMyAdmin and lastly we are going to setup a website on the Instance. The good part is that Amazon give you the chance to start using this wonderful platform free for 12 months with 1GB RAM.

Creating Amazon AWS Account

The first step is to login to register on Amazon AWS page, You will require a valid credit card and a reachable mobile number don't worry you will not be charged for the first 12 month they are just using your card detail for record purpose and for future billing. Goto Amazon AWS Hompage and sign up.

Step 1: Setup EC2 Instance

On completing your registration, The next page will display Amazon AWS console HomePage as below: Click on EC2 under The Compute Category.

Step 2: Lunch An Instance

Click the Lunch Instance button to create new EC2 instance.

Step 3: Select An Operating System(OS)

For more advantages we are going to be using Ubuntu as the OS on our new instance, I should be listed under free tier.

Step 4: Choose Server Type

We need to choose the server type this time we are to use the t2.micro : free tier

Step 5: Create EC2 Instance Key File for Authentication

Skip all steps till the step 6 .Configure Security Group by clicking Next.
Now here is where things get confidential , You key file serves as you login credential to you instance, without the key file you may not be able to login to your instance. What we are doing in this step is to generate a new key file for our new instance, If you already have a key file you can choose to use it but be sure you still have it, But in this tutorial I assume you are creating your first instance so let generate a new key file. Remember to to add rules for accepting connection from HTTP, SSH and HTTPS[optional] from anywhere on specified ports so that we can have access to the instance anywhere on the internet with web browser and terminals. Lastly click the Review and Lunch button You can review your setting to see if it correct then click the Lunch Button.

Download Key Pair

After clicking the lunch button a pop-in window should display for the option to download key pair, Name your key then click Download Key pair Button before clicking the Lunch Instances button. If you do not download the Key Pair you will not have access to your instance .

Then let the magic happen in the background:

Scroll to the bottom of the page and click the View Instances Button.
By now you should see the running status on your instance.

Now that the creation of our EC2 instance is completed, We need to create and Elastic IP so that we can connect to our instance, Amazon Generates Elastic IP address randomly so let do it.

Create an Elastic IP Address

Click Elastic IP on the left menu under NETWORK & SECURITY . Click the Allocate New Address button.

This newly allocated IP address will not automatically connect to our instance, we need to associate them together to have a perfect connection to the right instance. To do this mark the newly generate Elastic IP and click Associate Address on the Action Menu Drop Down.

Immediately you click on the instance field you should see all the available instances by their ID, You have to click the ID of your new instance so that it can be selected and then click the Associate Button . And we are good to go.

Connect to our EC2 Instance from the Terminal

Secure Shell (SSH) is a network protocol for secure data communication, remote shell services or command execution and other secure network services.{wikipedia}

Connect to EC2 Instance with Windows OS

If you are using Windows OS your browser should save it in your Download Folder by default if not you can move it there. You will most likely be using PuTTy for SSH commands. PuTTy uses the extension .ppk for its key files, while Amazon creates a .pem file. You will need to run this .pem file through the PuTTygen tool to use it.
Lunch Puttygen -> File -> Load Private.
Key Under Type of key to generate select SSH-2 RSA then click the Load button.
By default PuTTYgen displays only files with the extension .ppk. To locate your .pem file File Types to All Files on the select dialog. Select your .pem file and click Open. Click OK to dismiss the selection dialog box. Click Save private key button.
Sometimes, PuTTYgen displays a warning about saving the key without a pass phrase. Click Yes.

Connect using PuTTY

Download PuTTY. We will be needing the .ppk file we saved earlier to complete the SSH connection.
1. Start PuTTY (from the Start menu, click All Programs -> PuTTY).
2. In the Category pane, select Session and complete the following fields:
In the Host Name box, enter ubuntu@IP_ADDRESS.
Be sure to use your own IP address (The one generated above).
In the Category pane, expand Connection, expand SSH, and then select Auth.
Complete the following: Click Browse .
Select the .ppk {i.e myFirstInstance.ppk} file that was generate by PuTTYgen Earlier from our instance key pair and click Open.
Optional: If you plan to start this session again later, you can save the session information for future use.
Select Session in the Category tree, enter a name for the session in Saved Sessions, and then click Save.
Click Open to start the PuTTY session.
If this is the first time you have connected to this instance, PuTTY displays a security alert dialog box that asks whether you trust the host you are connecting to.
Click Yes A window opens and you are connected to your instance.

Connect to EC2 Instance with MAC OS X

If you are using MAC the pair key we downloaded (myFirstInstance.pem) is possibly in the Download folder you need to move it to the Home folder for easy access. after doing this, Open the Terminal Window (it can be found under Application in Utilities). Now type this command with the generate IP Address in the terminal. Remember to replace this IP address with your own generated IP address

ssh -i myFirstInstance.pem ubuntu@IP_ADDRESS

80% of the time you will get permission error on MAC such as this

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

@ WARNING: UNPROTECTED PRIVATE KEY FILE! @

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

Permissions 0644 for 'myFirstInstance.pem' are too open.

It is required that your private key files are NOT accessible by others.

This private key will be ignored.

Load key "myFirstInstance.pem": bad permissions

Permission denied (publickey).

or it might be

Permissions 0640 for 'myFirstInstance.pem' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
Load key "myFirstInstance.pem": bad permissions
Permission denied (publickey).

The solution is to Give only READ permission for key pair .pem file, Which is in our case myFirstIntsnace.pem using this code.

sudo chmod 400 myFirstInstance.pem

To make sure we are working on a good environment let use this code to update Ubuntu OS Packages.

sudo apt-get update

Install Apache Server to EC2 Instance

First of all let update and upgrade. In the terminal type:

sudo apt-get update && sudo apt-get upgrade

Now let install Apache, its documentation, and a collection of utilities.

sudo apt-get install apache2 apache2-doc apache2-utils

Now you can test if your server is running by typing your IP_ADDRESS in the browser URL to see if "it works!".
Here is how it look like with the instance and IP address created for this tutorial.

Install PHP on EC2 Instance

To install the latest version of PHP PHP7 for faster performance use the command below.

sudo apt-get install python-software-properties
sudo LC_ALL=C.UTF-8 add-apt-repository ppa:ondrej/php
sudo apt-get update

Then we will now install PHP7:

sudo apt-get install php7.0 php7.0-fpm php7.0-mysql -y

Optionally clean up unneeded packages afterwards:

sudo apt-get --purge autoremove -y

To check the PHP version you can type:

php -v

Install Node.Js on EC2 Instance

You should know that if you only want to run Node.js code on your instance and not PHP there is no reason to install PHP and Apache. Node comes with it own server. To install node to our EC2 instance :

sudo apt-get install nodejs

Install Node Package Manager:

sudo apt-get install npm

Create a symbolic link for node, as many Node.js tools use this name to execute.

sudo ln -s /usr/bin/nodejs /usr/bin/node

Now let check the installed version:

$ node -v
v0.10.25
$ npm -v
1.3.10

Install MySQL on EC2 Instance

To install MySQL on our instance we make use of this command:

sudo apt-get install mysql-server

MySQL terminal will ask you to choose the root user password. Remember to choose a password that you can remember and make sure it a safe password.

We can check our MySQL version with

mysql --version

Install PHPMyAdmin on EC2 Instance

To install PHPMyAdmin input this command into the terminal.

sudo apt-get install phpmyadmin

You will be prompted to choose a sever, Apache is chosen as default you can just press the Enter Key to proceed.

At the second screen, which asks “configure the database for phpmyadmin with dbconfig-common?”, select Yes, then hit enter to continue.

At the third screen enter your MySQL password, then hit enter to continue.

And finally at the fourth screen set the password you’ll use to log into phpmyadmin, hit enter to continue, and confirm your password.

To finalize the installation of PHPMyAdmin we need to make apache load it configuration file. Let edit Apache configuration file through the vim editor. using this code

sudo vim /etc/apache2/apache2.conf

Add the following to the bottom of the file:
hint: press i or insert button to enable edit then press the Esc button to stop edit.
Press :wq and then press enter to save.

# phpMyAdmin Configuration
Include /etc/phpmyadmin/apache.conf

Then Restart apache

sudo service apache2 restart

Now navigate to you server IP_ADDRESS/phpmyadmin using your browser just like mine below:

After login using the password set during installation of PHPMyAdmin:

Setup Website on Amazon aws EC2 Instance

Before we can setup a website on our instance we need to have access to our files directory to do that we are going to use an FTP software. for this tutorial we are using Filezilla Client. Lunch Filezilla after completing the installation.
Edit (Preferences) -> Settings-> Connection -> SFTP, Click Add key file.

Browse to the location of your .pem or .ppk file and select it. i.e myFirstInstance.pem or the file we generate using PuTTYgen myFirstInstance.ppk Note: If you are selecting a .pem file a dialog box will appear asking your permission to convert the file into ppk format. Click Yes then give the file a name and store it somewhere. If the new file is shown in the list of Keyfiles, then continue to the next step. If not, then click Add keyfile... and select the newly converted file.

Now to create profile for our instance on Filezilla:
Goto Files->Site Manager-> New Site in the host field enter your IP_ADDRESS leave the port and password blank.

In the Logon type set it to Normal on the protocol select SFTP - SSH File Transfer Protocol set the username as ubuntu and leave the password and port field blank. Click Connect Button - If saving of passwords has been disabled, you will be prompted that the logon type will be changed to Ask for password. Say OK and when connecting, at the password prompt push OK without entering a password to proceed past the dialog.

Now Your should have access to your instance files.

Uploading Files to EC2 Instance After login you will find yourself in the ubuntu directory you need to go up the directory tree twice to get to the root folder Navigate into the var directory -> www -> html. The html directory is your server public directory.

Setting up Domain for EC2 Instance

We can not hand out ugly IP_ADDRESS to visitors before they can have access to our instance on the web, We need to purchase a Domain name and connect it with our instance. Read: How to buy and Setup a Custom Domain Through Blogger in 2 minutes It should give you some information on how to setup a domain
Now I will assume you have already registered a domain name, go to domain DNS(Domain name settings). Add host value @ points to IP_ADDRESS.

Now visit your domain, Your Amazon instance will show up.

How to Create Computer Based Assessment Test Interface with AngularJs

noreply@blogger.com (TenEleven Inc.) — Mon, 16 May 2016 11:00:00 +0100

AngularJs is young powerful and efficient, It is a very good framework for javaScript design and a flexible client side framework it let you write less code and do more things. Read 5 Minutes Head-start on How to use AngularJs for web Design to know more about AngularJs, You can also read Real Time live data Graph Plotting Application with AngularJs and PHP (Google Analytics, Adsense Style) to see how you can use this powerful MVC library to create a real time graph for your websites and other web based applications. The point off this tutorial is to design a simple user interface assessment page.

Download Script Live Demo
This will allow users to do their computer base tests and exams on your web application. We are less concerned about the user interface design (CSS) this time around what we are focusing on is the powerful small lines of Angular code that are responsible for the superb actions that are done on the UI structure(HTML).
The interface will have Next and Previous button so that users can navigate from one question to another but another incredible feature is that we are going to be calculating the remaining time , Time spent per question and we are also going to use a small line of code in our timer to recommend the time user should be spending on answering each test question.
For the demo we are using a 3 minute test with five questions as practice you can add more questions to see how it will work out. Here is the angularJs code we use to do the magic , If you want to see all the codes, Download it from the link above.

Have fun!