What is react ?

React is Javascript library for building user interfaces (UIs). React is the V (View) in MVC.

React is declarative, efficient, and extremely flexible. What’s more, it works with the libraries and frameworks that you already know like jQuery’s UI plugin.

Why React ?

React is probably one of the best choices for building UI. Good design, support and community.

React was built to solve one problem: building large applications with data that changes over time. To simplify the process of building complex UIs.

How was the idea to develop React conceived ?

Short: Conceived at Facebook. Heavily used on products made by Facebook and Instagram. Built to simplify the process of building complex UIs.

The story of React started within the confines of Facebook. React was created by Jordan Walke, a software engineer at Facebook. Jordan deserves all the credit for creating React. He was influenced by XHP, a PHP-based component system that is still in use at Facebook, but also by functional programming ideas.

Pete Hunt wanted to use React at Instagram, so he helped to extract React from Facebook-specific code. This prepared React to be open sourced.

Later, Facebook put a team of engineers behind React and also received great contributions from the open source community. Significant contributors include Sebastian Markbåge and Ben Alpert, among many others. Source

Sites Using React

Facebook, Instagram, Dropbox, NETFLIX, Airbnb, PayPal and More.

Prerequisites to use react :

Javascript basics

• Declaring variables
• Creating and invoking functions
• DOM the Document Object Model (basically how Javascript Talks to the Browser)

ES2015

• Class syntax
• Arrow functions
• spread operator

To understand some of the concepts under which React operates.

• Declarative

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Source

I.e React is the V (View) in MVC that is used to render views like HTML pages dynamically based on some Props/state, which is often in the form of data. React then updates the generated views whenever the original state changes.

Declarative views make your code more predictable and easier to debug.

• The virtual representation of views in memory

For the browser’s case, we write HTML using JavaScript in React relying on the power of JavaScript to generate HTML that depends on some data, rather than enhancing HTML to make it work with that data. Enhancing HTML is what other JavaScript frameworks usually do (for example, Angular.js extends HTML with features like loops, conditionals, and others). Source

• Component-Based

Build encapsulated components that manage their own state, then compose them to make complex UIs.Source

Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

• Learn Once, Write Anywhere

You can develop new features in React without rewriting existing code.

React can also render on the server using Node and power mobile apps using React Native.

In order to write your first react components you have to be familiar with some of the features react offers like How to:

• Write React components
• Render data to the page
• Communicate components i.e pass data from one component to another?
• Handle user events
• Capture user input
• Talk to remote servers.

Now that we know what React is and what you have to covre to write React first component. Let’s start exploring how to build things in the next article.

Intro To React Javascript Library was originally published in TreeNodes on Medium, where people are continuing the conversation by highlighting and responding to this story.

Now that we know what React is and what you have to cover in the first article ( Intro to React ). Let’s set and prepare our fist react component.

When using React, we solve problems using component based architecture. So We have to start thinking in term of components to build our application. First we create components, and if a component gets too complex we break it into smaller, simpler components.

Let’s try to imaginary identify some components we might use in comment widget.

• The First component is what brings everything together. Let’s call it ( MainBox ).
• This will be the root component.
• The second component we have is the picture. Let’s call it (PhotoBox).
• Third box will be the comment form let’s create it and call it (CommentForm). And this will allow users to add new comment to our feed.
• The 4th will be (CommentBox) and We will reuse (commentBox) component over and over again but with different data each time.

It will look like this after we apply our visuale boxes. You can call your component StoryBox / StoryImage / StoryForm / Story or whatever you like.

Now after we used and identified our components.

What is a component in react ?

Components and Props

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs called props and return React elements describing what should appear on the screen i.e They ultimately generate what becomes our HTML code.

Functional and Class Components

The simplest way to define a component is to write a JavaScript function:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

This function is a valid React component because it accepts a single “props” object argument with data and returns a React element. We call such components “functional” because they are literally JavaScript functions.

You can also use an ES6 class to define a component:

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

The above two components are equivalent from React’s point of view. Classes have some additional features that we will discuss in later in another blog post.

Let’s look at this simple component.

When the render method is call on it, it return output #1.

<div> 
<P>Hello,Wold!</p>
<P>10:00AM</p>
</div>

Later on we will call this same component’s render method again and we will generate output #2. But with 10:30AM. So we create a new component but it doesn’t mean that the whole DOM has changed. That’s where the virtual DOM comes in. Wait a second.

What is the virtual DOM?

The virtual DOM is an in-memory representation of the real DOM elements generated by React components before any changes are made to the page.

It’s a step that happens between the render function being called and the displaying of elements on the screen.

A component’s render method returns some markup, but it’s not the final HTML yet.

It’s the in-memory representation of what will become real elements.

This is step 1.

Then that output will be transformed into real HTML, which is what gets displayed in the browser.

This is step 2.

<div> 
<P>Hello,World!</p>
<P>10:30AM</p>
</div>

So why go through all this to generate virtual DOM?

Simple answer — This is what allows react to be fast. It does this by means of virtual DOM diffing. Comparing two virtual trees — old and new — and make only the necessary changes into the real DOM in our case only this paragraph will be replaced.

<P>10:30AM</p>

Virtual DOM diffing allows React to minimize changes to the DOM as a result of user actions — therefore, increasing browser performance.

Useful reading:

• What is Virtual DOM?
• The one thing that no one properly explains about React — Why Virtual DOM
• The difference between Virtual DOM and DOM
• Code school Powering Up With React
• How to write your own Virtual DOM

Intro To React.JS and how to set React component and the virtual DOM was originally published in TreeNodes on Medium, where people are continuing the conversation by highlighting and responding to this story.

Many many articles online talking about when, why and how to use DateTimeOffset.

On the top list:

• Choosing Between DateTime, DateTimeOffset, TimeSpan, and TimeZoneInfo
• DateTime vs DateTimeOffset
• DateTimeOffset Structure

I have used it myself in many projects, last one is a website used by different distributors in many different countries with thousands of customers under each distributor, and I found DateTimeOffset is the solution for managing datetime between different time zones.

You can find many examples online on how to use it in details, but the one I wanted to list here as a reminder for my self is how to initialise it with a certain time zone offset and read from the DateTimeOffset the current date time based on this time zone.

DateTimeOffset Simple initialising and usage with different TimeZones was originally published in TreeNodes on Medium, where people are continuing the conversation by highlighting and responding to this story.

Is is declared like a field but with a get and set blocks inside, get is to read the property value and must return the same property type, set is to write to the property, using an implicit parameter called value.

Typically properties read and write from/to fields,

private int _salary;
public int Salary
{
  get { return _salary; }
  set { _salary = value; }
}

but we can also declare properties without depending on a field “automatic properties — introduced in C# 3.0”, when an automatic property is use, the compiler generates a private field for this property.

public int SalaryAutomaticProperty { get; set; }

From MSDN:

A property is a member that provides a flexible mechanism to read, write, or compute the value of a private field. Properties can be used as if they are public data members, but they are actually special methods called accessors. This enables data to be accessed easily and still helps promote the safety and flexibility of methods.

Read Only Properties:

We can make a property read-only by not adding a set accessor to the property body:

public int ReadOnlySalary { get; }

private int quantity;
private int price;
public int ReadOnlyTotalPrice { get { return quantity * price; } }

myClass.ReadOnlyTotalPrice = 10; // compile error

We may also mark the set accessor as private, while this will prevent class consumers from changing the property value but this doesn’t mean that this property is a read only, it just means that the property set accessor is not accessible out side this class.

public int PrivateSetTotalPrice { get; private set; }

… And also note, that if we started to add a body for the get accessor, we will have to add a body for the set accessor as well, which may not make sense with read only purpose properties.

We can also make the property private field a readonly, which will make sure that the field will never change after initializing.

how to implement a read only property

Starting from C# 6.0 we can declare a read only property as an expression-bodied property

public int ReadOnlyExpressionTotalPrice => quantity * price;

Which can contain more logic:

public string Config { get; } = string.IsNullOrWhiteSpace(
  string connectionString =
    (string)Properties.Settings.Default.Context?["connectionString"])?
  connectionString : "<none>";

Initializing properties:

To initialize a property we can do this using the container class constructor or give the property’s private field value on deceleration.

Starting from C# 6.0 we can initialize the property inline like this:

public int InlineInitProperty { get; set; } = 10;

and it can be used on read only properties as well

public int ReadOnlyInlineInitProperty { get; } = 10;

Finally, It is highly recommended to read “Why Properties Matter”!

examples used

Properties — the basics was originally published in TreeNodes on Medium, where people are continuing the conversation by highlighting and responding to this story.

<div> 
 <p>Line 1</p>
 <p class="hide">Line 2</p>
 <p>Line 3</p>
 <p>Line 4</p> 
</div>

We need to hide p.hide element, so the user can’t see it.

Display:

Display css property, display is the most important and most used css property to control HTML elements layout.

display:none; can be used to hide an HTML element from the view and it will appear as if it was not there on the page, means the HTML element will be hidden without blocking any space.

Example: Text 1 | Text 2 | Text 3

If we apply display:none; on Text 2, it will be: Text 1 | | Text 3

So to hide p.hide element using display property:

p.hide{
   display:none;
}

Visibility:

Visibility property is the CSS property to manage HTML visibility, unlike display which has different values to control the element layout, visibility is used jut for show and hide elements

visibility: hidden can be used to hide an element from the client, but it will keep the element space visible like this: Text 1 | | Text 3

When to use which? based on requirements and the case you have, you just need to test it on all browsers, and there will be an unrecognizable performance differences between different ways

Performance differences between visibility:hidden and display:none

Opacity:

Opacity property is controlling the transparency of the html element, so we can use it to make the element fully transparent and this will hide the element from the client view.

Just make sure to test it on all browsers because on older IE browsers it had some special ways to implement. (hope that no one still using old IE browsers, because the wont see many things any way :) )

And the same as Visibility property, it will hide the element but will keep blocking its space, so the client will see an empty space instead of the element.

Background color and color

While it is rarely used, but we can change the background-color element css property and all child elements to be the same as the background color of the page or the same as container background.

Will need to change the text color as well to make sure that text is not visible as well.

And on some elements we may need to remove borders, that’s why this way is not common to use.

Font size:

We can hide text elements by setting font-size property to 0

Position:

Using the position property and top left we can make the control appear outside the client view.

Clip-Path (Clip):

Last way I want to mention on this post is using clip-path css property

References:

Using CSS clip as an Accessible Method of Hiding Content

https://snook.ca/archives/html_and_css/hiding-content-for-accessibility

• How to hide elements without having them take space on the page?
• how to hide the content of the div in css

Different ways to hide an HTML Element was originally published in TreeNodes on Medium, where people are continuing the conversation by highlighting and responding to this story.

When it comes to files hosting I trust amazon based on my previous experiences, and based on the cheap offers they have.

Also there are many file hosting web services are bases on Amazon cloud hosting and file hosting such as Dropbox which is built on Amazon S3.

So when Amazon released the Cloud drive, I signed up and started using their website, but it is not allowed to upload big files (larger than 2GB) through the website.

And for that reason I download the windows client application,

Downloaded and installed successfully on a windows 8.1 machine.

BUT: when I started to upload or download a file:

- If the file is big or trying to upload a folder, the application get closed without any error messages.

- If I am uploading a single small file an error message appear “this folder/file failed to upload”. http://screencast.com/t/RPU2kiC9SQNP

-If I am downloading a file, nothing happen, it just don’t download it.

On this windows 8.1 machine there are just windows defender anti virus running which is not blocking anything.

To solve this Issue we need to allow this application in Firewall like this http://www.wikihow.com/Add-Exceptions-to-Windows-8-Firewall

or using the following steps:

1- Open control panel

2- Windows Firewall

3- Turn windows firewall on and off

4- Select Inbound rules

5- From the right side actions click: New Rule

6- Select Program and next

7- Browse for “C:\Users\USERNAME\AppData\Local\Amazon\Cloud Drive\AmazonCloudDrive.exe”

8- Allow connections.

9- Based on security needs select from or all “Domain”, “Private” and “Public”

10- Add a name, something like “Amazon Cloud Drive Rule” and finish

11- Go to Outbound Rules

12- Do the same as we did for Inbound Rules starting from point #5

These steps will make a rule in your Firewall to allow Amazon Cloud Drive to upload and download files.

Now start uploading/downloading files and It should work.

Also I believe that others may face the same issue because of their antiviruses and should create an exception rule to allow this application.

Amazon Cloud Drive Windows Client was originally published in TreeNodes on Medium, where people are continuing the conversation by highlighting and responding to this story.

- Create a discount from the cms admin

- Add a requirement for that discount and select “Must be assigned to customer role” and choose a role.

The next steps can be done anywhere in the website, I will use the CommonController to show the role name inside the website header beside the user email

- Go to CommonController and inside the HeaderLinks method add these lines:

// Added by treenodes 10 Oct 2012
            string discountRoleName = string.Empty;
            if (discount !=null && discount.DiscountRequirements != null)
            {
                var requ = discount.DiscountRequirements.FirstOrDefault();
                foreach (var customerRole in customer.CustomerRoles.Where(cr => cr.Active).ToList())
                    if (requ != null && requ.RestrictedToCustomerRoleId == customerRole.Id)
                        discountRoleName = customerRole.Name;
            }

So the method will look like this

- You will need to declare the _discountService, so declare it in the Fields region

and then initialize it in the controller constructor:

- Add DiscountRoleName property inside the HeaderLinksModel

- Inside the HeaderLinks view, inside the IsAuthinticated check, add this:

<li><a href="#">@Model.DiscountRoleName</a></li>

- Login to the store and apply a coupon code you just created, you will see the role name of this applied discount coupon in the header.

nopcommerce: How to get Role Name from applied discount coupon? was originally published in TreeNodes on Medium, where people are continuing the conversation by highlighting and responding to this story.

I faced this confusing issue more than a year ago and solved it by the help of some articles online, but recently I faced the same issue I faced 1 year ago, and totally forgot how to fix it.

So I wanted to list here the URL which solved all my issues a year ago, and solved it recently as well:

Telerik Uploading Large Files , This article contain everything which helps to edit the web.config and IIS to make uploading large files a nice task.

To know more about these properties you will edit in the web.config, I recommend to take a look at this msdn page

Large file upload — asp.net was originally published in TreeNodes on Medium, where people are continuing the conversation by highlighting and responding to this story.

But while using this technique I faced an issue, I wanted to call more than one init function on the same page load, for example if I have my page as sections: header, login popup, inner form, footer. And each section needs to have its own init functions which load automatically when this section DOM-ready.

In Extending Paul Irish’s comprehensive DOM-ready execution article
He used the body element to run the selected action in the selected controller

<body data-controller="<%= controller_name %>" data-action="<%= action_name %>">

And since body element is always one in any page, so we can’t call more than one controller action.

I extended this technique to use any html element in the page, something like that:

<i class="initializer" data-controller="<%= controller_name %>" data-action="<%= action_name %>"></i>

Like that i can use this element multiple times in the page for different controllers and actions.
But this required to edit JASON GARBER javascript UTIL function to fit this change.
Using the body element code was:

UTIL = {
 exec: function( controller, action ) {
 var ns = SITENAME,
     action = ( action === undefined ) ? "init" : action;
 if ( controller !== "" && ns[controller] && typeof ns[controller][action] == "function" ) {ns[controller][action]();}
 },
 init: function() {
   var body = document.body,
       controller = body.getAttribute( "data-controller" ),
       action = body.getAttribute( "data-action" );

UTIL.exec( "common" );
    UTIL.exec( controller );
    UTIL.exec( controller, action );
   }
 };

$( document ).ready( UTIL.init );
And using my way it required changing the code to be:

var SiteName = SiteName || {};

SiteName.Common = {
 init: function () {
 // generic event bindings
 }
};

SiteName.UTIL = {
 exec: function (controller, action) {
 var ns = SiteName,
 action = (action === undefined || action == null) ? "init" : action;

if (controller !== "" && ns[controller] && typeof ns[controller][action] == "function") {
 ns[controller][action]();
 }
 },

init: function () {
    SiteName.UTIL.exec("Common");

var initializers = $('.initializer');
    $('.initializer').each(function () {
       var controller = this.getAttribute("data-controller"),
           action = this.getAttribute("data-action");

SiteName.UTIL.exec(controller, action);
    });
 }
};

$(document).ready(SiteName.UTIL.init);
And as you see in my code I loop on all elements which use class 'initializer' and read/call from them one by one controllers - actions.

By applying this edit, you will be able to assign multiple different controllers in the same page based on the page sections.

Download Demo

Organize JavaScript and jQuery events — DOM-ready execution was originally published in TreeNodes on Medium, where people are continuing the conversation by highlighting and responding to this story.

In some cases it is a real pain, but in most of cases it is simple, and the problem come when the designer start to implement the simple menu the hard wrong way, it will take ages from him to implement a simple menu while it just need few lines of css code.

Also he may think it can’t be done without javascript and jquery.

Try to think simple while writing your next menu and may be you will need my code as a starting point for a more complex menu.

What I am listing here is a very simple menu, putting in mind that this menu may contain infinite number of submenus.

Lets start with html:

<ul>
        <li>Main 1 >
            <ul>
                <li>Sub 1 >></li>
                <li>Sub 2 >>
                    <ul>
                        <li>Sub SUB 1</li>
                        <li>Sub SUB 2</li>
                        <li>Sub SUB 3</li>
                    </ul>
                </li>
                <li>Sub 3</li>
            </ul>
        </li>
        <li>Main 2 >
            <ul>
                <li>Sub 1</li>
                <li>Sub 2</li>
                <li>Sub 3</li>
            </ul>
        </li>
        <li>Main 3 ></li>
        <li>Main 4 ></li>
    </ul>

This html use UL and LI to draw the menu html, you can use divs instead of UL and LI, this will not cause a problem.

The only hint I can point about the previous html code is that the sub menus html are inside the parent menu html.

Such as ‘Sub 1 >>’ is inside the parent ‘Main 1’, this will make our job easier.

Next CSS:

[sourcecode language=”css”]
ul li ul li
{
clear: both;
}

li
{
list-style-type: none;
float: left;
margin: 0 10px;
cursor: pointer;
width:100px;
}

li ul
{
display: none;
padding: 0;
}

li:hover > ul
{
display: block;
}
[/sourcecode]

The most important lines for us are starting from line 15, everything before this is just for making things looks better and formatted better.

As you see it is just 4 lines of code to make the menu functional, the trick exists in line 21, which will show the UL which exists under any LI and the user hovered on it, and the ‘>’ means that we will show just the first level of UL not all nested UL.

Feel free to add more nested submenus and see how simple it is.

Demo

Simplest menu using CSS was originally published in TreeNodes on Medium, where people are continuing the conversation by highlighting and responding to this story.