How to check that javascript object contains the given key?

A wet man does not fear the rain.

Issue:-How do I check if an object has a key in JavaScript?

Example:-

// Sample Object
const REMINDER = "REMIND_ME";
reminderObj= {
INBOX:`${REMINDER}_INBOX`,
USERS:`${REMINDER}_USERS`,
GROUPS:`${REMINDER}_GROUPS`,
}

Problem1: Now we want to check that our object have “INBOX” as key or not?

Solution:- 

Object.prototype.hasOwnProperty.call(reminderObj,"INBOX");
Note:- We could directly use hasOwnProperty but to avoid eslint errors we have used the longer syntax as above.

Problem2: Now we want to check what is the value for given key say “INBOX” inside our object?

const reminderLocation = "INBOX";

reminderObj[reminderLocation];

or
reminderObj.INBOX;

 javascript object

Handy tips and Tools for working with wordpress -Part2?

“The best teachers are those who show you where to look, but don’t tell you what to see.”

1.How to add text-slider in wordpress pages ?
Solution:-
By using the “Text slider plugin

Activate the plugin > Add the Main and Sub text > Configure the settings > add the wp_text_slider();
?> in the code where you want to add this effect.

2.How to send contact email in wordpress ?
Solution:-
By using the “WCP contact” plugin

Activate the plugin > Add the Main and Sub text > Configure the settings > add the ;
?> in the shortcode like [wcp_contactform id=”wcpform_1″] where you want to add this form.

Note for sending the email to your email inbox you need to add the “SMTP plugin” else above plugin will show email messages inthe wordpress itself.

Not able to receive email using WCP contact plugin.

3.How to redirect page not found(404) to home page of website?
Solution:-
Incase you dont want to desing the 404 page, just follow the below code to redirect user to home page.

1.Open your 404.php page  (incase its not present use create one inside the themes folder )
2.Add the below lines of code, publish and you are done

<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: ".get_bloginfo('url'));
exit();
?>

4.How to add carousel slider for the featured posts?
Solution:-
1.Using “carosuel slider“, add the plugin and select the option as post.

5.How to add Team member page in wordpress?
Solution:-
1.Using “Team member showcase plugin“, add the plugin and explore the free styles available.

More wordpress tips.

How to install IE browser on Mac-OS?

The best time to plant a tree was 20 years ago. The second best time is now.

Pre-requisite:- Virtual Environment to run the windows OS (with IE) on Mac OS.

Step1:- Installing the virtual environment using VirtualBox (free option, we can use VMware also)
a)Download Virtual Box
b)Install the setup 
Double click the .dmg file and follow the instructions
install virtual box in mac
Note:- On mac sometimes “Verifying VirtualBox.pkg step is stuck”, in that case follow the below steps to install the virtual box
Open terminal on mac and run the command,

 sudo installer -package /Volumes/VirtualBox/VirtualBox.pkg -target /

verifying virtualbox.pkg stuck on mac

Step2:- Download the windows environment
 a)Download windows + IE from modern.ie
b)Select the required environment options and download the .zip file
download virtual machine in modern.ie
c)Extract the downloaded file, it will create .ovf file

Step3:-Launch the IE in Virtual Box
a)Virtual box, File > Import appliance (open the .ovf file)

import ovf file in virtualbox

b)Select the default options > import

appliance settings in virtual box

c)Turn on the windows environment from virtual box

verifying virtualbox.pkg stuck on mac

All set, our windows environment is up and running on mac now we can work with IE browser 🙂
running windows on mac

Keep learning keep sharing.

Working with React-Router?

“An investment in knowledge pays the best interest.” Benjamin Franklin

In our previous post we started with creating our first react app and than we learned about some basic terminologies in react. Today we are going to focus on creating the router behaviour using react library.

Incase you want to learn about filtering in react check the github code.

router example using react


Pre-requites:- 
Github for React Router

npm install --save react-router-dom

Key Terms:-

1) BrowserRouter, this component listens to changes in URL and display the correct screen on UI

  • Import Browser router in src/index.js  (Line 6 in the below code example)
  • Enclose component inside (Line 8)
 1
2
3
4
5
6
7
8
9
10
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './index.css';
import { BrowserRouter } from 'react-router-dom'

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>,
document.getElementById('root'));
registerServiceWorker();


2) Link, this component accepts the to property which directs the app to the given path. 

1
2
3
4
                    <Link
to='/create'
>Add Contact
</Link>

>Contact</Link>Link component fully renders a proper anchor tag (a) with the appropriate href, you can expect it to behave how a normal link on the web behaves.

3) Route Component, this component is a critical piece of building an application with React Router because it’s the component which is going to decide which components are rendered based on the current URL path.

1
2
3
 <Route path="/create"
component={CreateContact}
/>

Important terms when starting with React.

We already created our first react app using create-react-app cli. Now we’ll learn some of the core terminologies involved in react.

1.Component :- its the building block of react app, just like functions, we create components to perform some functionality. It takes the given parameters (called as props) and render UI in the browser by consuming the given parameters.

Example:- we need to display contact details of a person so we’ll create the below component which takes the props as parameter when we use this component.

a)Using class syntax to create component, 

1
2
3
4
5
6
7
Class componentName extends Component {
render(){
return(
<our plain html + props passed to component>
)}
}
export default componentname

b)Component uses the render method to return the UI component to the calling parent component.

c)Export the component and it will imported with this name and used inside calling parent component
d)Calling a component with props.

2.Props, its like parameters to components like we have arguments to a function, we use them to pass data to components.

a)How to pass data :-
b)Access the prop in the component by using this keyword (refering to the current context)

{this.props.contact.name}

c)Anything which is javascript expression in jsx is presented inside {} (curly brackets)

Note:- props refer to attributes from parent components. It represents “read-only” data that are immutable.

3.Stateless function component, incase our component just returns the UI component we can use function to create a component instead of creating a class

a)What changes we have to do? 

  • Function will take passing prop as argument
  • Returns the description UI
  • this keyword is not used in accessing the props inside function.
b)Example, we replaced the our class component with “stateless function component”
Class component:-

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
class ContactList extends Component{

render(){
console.log(this.props);
return(
<ol className="contact-list">
{
this.props.contact.map(contact =>
<li key={contact.id} className="contact-list-item">
<div className="contact-avatar" style={{
backgroundImage:`url(${contact.avatarURL})`
}}/>
<div className="contact-details">
<p>{contact.name}</p>
<p>{contact.email}</p>
</div>
<button className="contact-remove">
Remove
</button>
</li>
)
}

</ol>
)
}

}

export default ContactList;


Stateless function component for above class component:-

 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import React, { Component } from 'react'


function ContactList(props){
return(
<ol className="contact-list">
{
props.contact.map(contact =>
<li key={contact.id} className="contact-list-item">
<div className="contact-avatar" style={{
backgroundImage:`url(${contact.avatarURL})`
}}/>
<div className="contact-details">
<p>{contact.name}</p>
<p>{contact.email}</p>
</div>
<button className="contact-remove">
Remove
</button>
</li>
)
}

</ol>
)
}

export default ContactList;

4.State:-  represents mutable data that ultimately affects what is rendered on the UI. State is managed internally by the component itself and is meant to change over time, commonly due to user input (e.g., clicking on a button on the page).

a)To create state it should be declared inside a Class

1
2
3
4
5
6
7
8
state = {
contacts : [
{
"id": "test",
"name": "Rion flower",
}
]
}


b)How to pass state to a component

1
2
3
4
5
6
7
render() {
return (
<div>
<ContactList contact ={ this.state.contacts }/>
</div>
)
}


One of the key benefits of using State in React to build UI components: when it comes to re-rendering the page, we just have to think about updating state. We don’t have to keep track of exactly which parts of the page change each time there are updates. We don’t need to decide how we will efficiently re-render the page. React compares the previous output and new output, determines what has changed, and makes these decisions for us. This process of determining what has changed in the previous and new outputs is called Reconciliation.

Note:- In React UI is function of state, when state changes UI also changes.
More Tutorials

Up and Running with React in 10 minutes

“All great achievements require time…. Maya Angelou”
We already learned how to create our first Angular.io App in 10 minutes, this time we’ll repeat the same with React library.So lets get started.

Key terminologies in react app

Brush up :-
We already know that in React we play with Javascript and embed html inside the jsx files to create our components.

JSX is awesome, but it does need to be transpiled into regular JavaScript before reaching the browser. We typically use a transpiler like Babel . We can run Babel through a build tool, like Webpack which helps bundle all of our assets (JavaScript files, CSS, images, etc.) for web projects. 


Create React App Package:-
We are going to use this tool l to get started in building a React app, as it sets up everything we need with zero configuration.


npm install -g create-react-app

Note:- This will globally install the react app, containing the babel(for trans piling), web pack (for creating the build and hot reloading)
creating react app from CLI
create-react-app contact-app
cd contact-app
npm start

It’ll run our react app on localhost:3000

launching react cli

Modify src/App.js
This file contains the component (App) which is getting rendered in the browser. Incase we open and change this file the same will be reflected on the UI.

How is the App component rendered on the UI? If we open the “src/index.js” file it will show the binding to UI and its attached to “root” element inside the “public/index.html”.
index.js file in react

Creating our own Components:-
Components are the building blocks of react application.Thus it helps in breaking our UI into small applications that are working on DOT(do one thing) principle. Components give us the power of encapsulation ( hiding all the details).

Lets create our first component say “ContactList” inside “App” file and use it inside the App component and use it.

Lines 7-25 , shows the newly created component
Line 34, is where we have used the component
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';


//Creating our own component
class ContactList extends Component{
//our render method
render(){
//array of contact list
const people = [
{ name : "Rion"},
{ name : "Roy" },
{ name : "Ron" }
];
return(
<ol>
{people.map((person,index) =>
<li key={index}>{person.name}</li>
)}
</ol>
)
}

}
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to ContactList App</h2>
</div>
<ContactList />
</div>
);
}
}

export default App;



Playing with Props:-
Now in above case we hard coded the values of “people” array inside the contactlist component, incase we want that each component should show different contacts so we can use props feature available in React.

a)Replace the code for const people = this.props.people  (Line 6)
b)Pass props inside the contactlist component. (Line 25 & 31)

Now we can see that we used “ContactList” component twice (line 25 & 31) inside the App component and its displaying different contacts based on the “prop” parameters.

Using react component


 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//Creating our own component 
class ContactList extends Component{
//our render method
render(){
//array of contact list
const people = this.props.people
return(
<ol>
{people.map((person,index) =>
<li key={index}>{person.name}</li>
)}
</ol>
)
}

}
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to ContactList App</h2>
</div>
<ContactList people={[
{ name : "Rion"},
{ name : "Roy" },
{ name : "Ron" }
]}
/>
<ContactList people={[
{ name : "More"},
{ name : "Mor" },
{ name : "Mori" }
]}
/>
</div>
);
}
}


With this tutorial we are up and running with React App, we learned about components, how to use them and how to pass property to a component and making them reusable.

Learn more 

Creating your first app using Angular.io

Do something today that your future self will thank you for


We have created this tutorial to make you up and running with Angular.io in 10 minutes. This is not a very detailed tutorial incase you are not familiar with Angular basics, please refer Angular.io documentation to get more details on the core concepts.

Expectation:- 
We’ll create our working app in Angular2 and it will look as below

example of angular2 app


Step1:-Starting with quickstart to create the setup for Angular2
a)Clone Quickstart into given folder ( say frontend)

git clone https://github.com/angular/quickstart.git learning

Cloning into ‘learning’…
remote: Counting objects: 1352, done.
remote: Total 1352 (delta 0), reused 0 (delta 0), pack-reused 1352
Receiving objects: 100% (1352/1352), 1.11 MiB | 0 bytes/s, done.
Resolving deltas: 100% (745/745), done.
Checking connectivity… done.


b) cd into the folder and install all the dependencies.
npm install 

c) Run the default angular App
npm start
running angular cli

Now we are good with our angular setup, lets go ahead and create our own component. app.


Step2:-Creating our first Component

What is a component?
Components allow us to create different views, an angular app is a tree of angular components. These are subsets of directives ( from Angular -1) but unlike directives, components always consists of a template and only 1 component per selector ( like message selector that we’ll use in further steps) is instantiated. Each component need to be registered in ng-module ( the main component in angular) so that it can used by another components in a application.

Creating component:-
Add new file under apps folder with .ts extension

adding ts file in angular2

  • import components library inside this file
  • create template
  • create decorator 

creating component in angular

Using this component:-

Export this component in the component where we want to use
Register the component in the ng-module 
using component in angular2

Adding dummy data into component like 

//Taking dummy data
messages = [
{
text : ‘Text1’,
owner : ‘Tim’
},
{
text : ‘Text2’,
owner : ‘Paul’
}
]


Step3:-Making our UI look better
We’ll add material library from Angular.

a)Add material lib

npm install --save @angular/material @angular/cdk

b)Import the .css into index.html file

c)Add newly installed library into ng-module 
adding material component in ng-module

d)Add this into module loader ( systemjs)
adding material component in systemjs of angular2

Learn more JS

Cross Browser CSS style Tips

“Rules for happiness: something to do, someone to love, something to hope for.” …Immanuel Kant

What is cross browser testing?

Cross browser testing is the practice of making sure that the web sites and web apps you create work across an acceptable number of web browsers. Refer MDN to read cross browser testing.

cross browser testing

How to make CSS work across different browsers?

1.CSS reset:-
Web browser engine adds defaults css to each html element. For example p tag will have differnt padding across various browsers, to avoid this we can use CSS reset.

Example1 CSS reset
Example2 CSS reset

2.Validate HTML and CSS, it will help in rectifying minor errors.
Tools that can be used:-Firfox addon, HTML validator, CSS validator, CSS lint

3.Use Vendor Prefixes, to support the browser specific CSS.
For example:- 
As of now CSS grid is not supported in all the browsers, so we can add:-
-webkit-display: grid;

Various Prefix :-
1. Safari and Chrome (-webkit-)
2. Firefox (-moz-)
3. Opera (-o-)
4. Internet Explorer (-ms-)

4.Use tools to test web-application across different browsers, example tools like saucelabs, browsershots

5.Font size measurement, px – em – rem – percentage
Generally 1em = 12pt = 16px = 100%.
px and pt, will remain static when the base font size is changed (let say body {font-size: 120%}) but em and rem values will change.
As we need our application responsive and font to be readable on different screen resolution we need to be particular about using font-size.