WordPress Website Security

Below are the important points that needs to be taken care to make your website fully secure.

1. Don’t use admin as a username

A majority of today’s attacks target your wp-admin / wp-login access points using a combination of admin . As admin is very common so it can be easily gueesed. Always try to use different username.

2) Use updated wordpress Always

Make your wordpress updated to the latest version. As the latest version always comes with updated security features.

3. Use a less common password

Make use of complex password that is difficult to guess. It makes your website very secure as the intruders cannot easily enter to your website.

4. Add Two-Factor Authentication

Use two factor authentication. Now a days all the latest websites are using this to make it secure. Gmail , paypal all are using the same two factor authentication to make the website secure.

5. Hide wp-config.php and .htaccess

Use the below code to make the wp-config.php and .htaccess hidden so that intruders cannot access these important files.

<Files wp-config.php>
order allow,deny
deny from all
</Files>

6. Use WordPress security keys for authentication
7. Disable file editing
8. Limit login attempts

React Native Important Concepts

In this tutorial we will learn about important concepts of react native. The important concept of react native that we will discuss in this tutorial are:

  • State
  • Props
  • Styling
  • Flexbox
First we will discuss about State in React Native
State :
  • State in react native is used to manage the data inside the component.
  • State can be updated at any time. So we call state as mutable.

Example of State :

  1. import React, { Component } from ‘react’;
  2.  import { Text, View } from ‘react-native’;
  3. class Stateexample extends Component {
  4. state = {
  5. myState: ‘Testing’
  6. }
  7. render() {
  8. return (
  9. <View> <Text> {this.state.myState} </Text> </View> );
  10. }
  11. }
Props :
  • The difference between props and state is that props can not be updated
  • State can be updated at any time in the react native code.

Styling in React Native :

1.You can style your component in react using inline style as well as using stylesheet

2 . Just like we do in other languages

  1. import React, { Component } from ‘react’
  1. import { Text, View, StyleSheet } from ‘react-native’
  2. const testcomp= (props) ⇒ {
  3. return (
  4. <View>
  5. <Text style = {styles.mystyle}> {props.myState} </Text> </View>
  6. )
  7.  }
Styles Example :
  • 1.const styles = StyleSheet.create (
  • 2.{
  • mystyle:
  • 4.{ marginTop: 20, textAlign: ‘center’, color: ‘blue’, fontWeight: ‘bold’, fontSize: 20 }
  • 5.}
  • )
Flexbox in React Native :

1.It is used to accommodate different screensize in react native.

2.flexbox offers three main properties − flexDirection justifyContent and alignItems.

  1. 3.const styles = StyleSheet.create (
  2. 4.{
  3.  maincont: {
  4. flexDirection: ‘column’, justifyContent: ‘center’, alignItems: ‘center’, backgroundColor: ‘grey’, height: 600 },
  5. })

Javascript Introduction To advanced concepts

Javascript Object Oriented Concept:

  • A JavaScript object is, in that sense, a collection of named properties and methods .
  • Objects are a way to categorize behavior and data, making large amounts of code easier to design and think about.
  • An object can be stored in a variable, and the properties and methods accessed using the dot syntax.
  • Variables can hold objects, and creating an object is done using a special syntax signified by braces:

Example of Object in javascript:

  1. var per= {
  2. name: “sha”,
  3. age: 32,
  4. getage: function () { alert(“hello world”);
  5. }

In order to access items , we use dot operator like
  • per.name
  • per.age
  • per.getage();
  • You can also assign values
  • per.name=“john”
  • per.age
Creating an empty object
  • var obj={};
  • obj.mov=function(){ alert(“hello”);};

Prototypal inheritance:

JavaScript uses prototypal inheritance. This means that, when an object inherits from another, the parent object is known as the child’s prototype.

Javascript Closure:
  • closureis a function that returns a function.
  • The function that is returned (the innerfunction)
  • is created inside the called function (the outer) so – due to the

Example :

  1. var sub= function (a) {
  2. return function (b) { return a -b; }; };
  3. var addFive = sub(4);
  4. alert(addFive(10))

 

HTML 5 Graphics Components

HTML 5 Provides two graphic Components:

  • CANVAS
  • SVG

HTML 5 Canvas :

  1. Canvas is used to draw graphics on web.
  2. It is basically the container of the graphicsF

Example :

  1. <canvas id=“mycan”width=”200″ height=”100″></canvas>
  2. var c = document.getElementById(“mycan”);
  3. var ctx = c.getContext(“2d”);
  4. ctx.moveTo(0, 0);
  5. ctx.lineTo(200, 100);
  6. ctx.stroke();

SVG :

  • Scalable Vector Graphics
  • The HTML <svg>element is a container for SVG graphics.
  • <svgwidth=”100″ height=”100″>
    <circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />
    </svg>
  • <rect x=”50″ y=”20″ rx=”20″ ry=”20″ width=”150″ height=”150″
    style=”fill:red;stroke:black;stroke-width:5;opacity:0.5″ />

HTML 5 API tutorial for beginners

HTML 5 GEOLOCATION API

  • HTML5 Geolocation API
  • It is used to Locate the User’s Position
  • The HTML Geolocation API is used to get the geographical position of a user.
  • Since this can compromise privacy,
  • User will have to give permission in order to get his/her location

We use navigator.geolocation.getCurrentPosition to get the user location

2) HTML 5 Drag and Drop

  • You can “grab” an object and drag it to a different location.
  • Any element in HTML 5 can be drag and drop
  • First make Draggable attribute to true of the html element
  • <img draggable=”true”>
  • There are two things :
  • What to drag Where to drag

Example of Drag and Drop:

<div id=”divdrop” ondrop=”dropevtn(event)” ondragover=”allowDrop(event)”></div>

<img id=”drag1″ src=”img_logo.gif” draggable=”true”
ondragstart=”drag(event)” width=”336″ height=”69″>

3) HTML 5 Web Storage

  • It is used to store the user data locally
  • Earlier we use cookies to store data in which we can only store limited amount of data
  • With web storage large amount of data can be stored without any performance effect and also it is more secure
  • 5mb of data can be stored
  • Cookies can store very less data

Two types of Web Storage:

  • window.localStorage- stores data with no expiration date
  • window.sessionStorage- stores data for one session (data is lost when the browser tab is closed)
  • Store item in localstorage
  • localStorage.setItem(“subject”,“maths”);
  • Retrieve items from local storage
  • localStorage.getItem(“subject”);

4) Web Workers in HTML 5:

  • A web worker is a JavaScript that runs in the background independently of other scripts, without affecting the performance of the page.
  • You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

Example :

w = new Worker(“latest_workers.js”);

5) Server Side Events :

  • To update the page automatically from the server
  • The server sends messages automatically to update the page
  • One way messaging