nice shadow

width: 100%;
background: #fff;
padding-left: 0;
color: #8b8b8b;
font-size: .9rem;
border: none;
border-radius: 4px;
-webkit-box-shadow: 11px 12px 30px -4px rgba(0,0,0,.3);
-moz-box-shadow: 11px 12px 30px -4px rgba(0,0,0,.3);
box-shadow: 11px 12px 30px -4px rgba(0,0,0,.3);
margin-top: -6px;

nice shadow

Aplicarea ca ierarhie a componentelor

O aplicație web este prezentată prin definirea unui DOM structural care urmează să fie redat. Când starea aplicației se modifică, probabil datorită unui eveniment de utilizator, structura DOM se modifică pentru a reprezenta noul stat. React.js împarte rendering-ul DOM și interactivitatea în componente, fiecare component fiind responsabil pentru propria sa stare și prezentare.

Componentele
O componentă depinde de trei containere de stare: context, recuzită, stare
Componentele fac ca un DOM virtual să fie aplicat interfeței utilizator
Ori de câte ori se modifică containerul de stare al unei componente, acesta este reîncadrat
Pot fi recepționate mesaje și schimbări de stare declanșate
Componentele pot avea apeluri setate în context sau elemente de recuzită

  The web application as a hierarchy of components 

A web application is presented by defining a structural DOM to be played back. When the application status changes, perhaps due to a user event, the DOM structure changes to represent the new state. React.js splits DOM rendering and component interactivity, each component being responsible for its own status and presentation.

The components
One component depends on three status containers: context, props, status
The components make a virtual DOM to be applied to the user interface
Whenever the status container of component changes, it is re-engineered
Messages and status changes can be received
Components can have context-settled or prompted calls

Javascript INTRO

Javascript code is the most portable, reusable code around. It is the single language that lets you write code that runs natively on both client and server

Typical modern JS Application Infrastructure 

DATA STORE 

a VPN OR A  FIREWALL  for protection   

 JSON Web service layer

- various 3rd party API
               |
an app server / cms to route requests and deliver pages to client 

a static CND - CONTENT DELIVERY NETWORK - for cached files (img css js clientside templates)

the client - browser 

JSON 

The format is nearly identical to javascript's object literal syntax with a couple important differences

• All attributes names and string values must be enclosed in double quotes. Other values may appear in their literal form.
• JSON records cannot contain circular references.
• JSON cannot contain functions.

NOSQL  DATA STORES 

Before XML and JSON narly all web services were 

c# constructors

add a constructor to your class and then initialize there your property. public class News { // properties goes here public News() { Date=DateTime.Now; } } A far better constructor would be the following public News(int newsId, string title, string content) { NewsId=newsId; Title=title; Content=content; Date=DateTime.Now; } That way you could create an object of type News in a single line of code. News news = new News(1,"title1","whatever");

css cheat sheet

1 keep text onn the same line

.class{

  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis 

 }

 2 boostrap toggle area item

a .jobfilter_h1:before {
    /* symbol for "opening" panels */
    font-family: FontAwesome;
    content: "\f067";
    float: right;
    clear:both;
    padding:0.4rem;
}

a.collapsed .jobfilter_h1:before {
    /* symbol for "collapsed" panels */
    content: "\f068";
    clear: both;
    padding: 0.4rem;
}




        <div class="jobfilter_h2item">
            <a data-toggle="collapse" href="#SecondaryFurtherEducation" role="button" aria-expanded="false" aria-controls="SecondaryFurtherEducation">
                <h5 class="jobfilter_h2"> Secondary & Further Education (346) </h5>
            </a>
            <div class="jobfilter_h3area  pt-1 pb-1 pl-3 collapse multi-collapse" id="SecondaryFurtherEducation">
                <div class="jobfilter_h3item">
                    <h6 class="jobfilter_h3"> Secondary Teaching (294)  </h6>
                </div>
                <div class="jobfilter_h3item">
                    <h6 class="jobfilter_h3"> Secondary Support Staff (30)   </h6>
                </div>
                <div class="jobfilter_h3item">
                    <h6 class="jobfilter_h3"> Secondary Senior Leadership Team (16)   </h6>
                </div>
                <div class="jobfilter_h3item">
                    <h6 class="jobfilter_h3"> Further Education (5) </h6>
                </div>
            </div>

        </div>
        <div class="clearfix"></div>