simple web framework

LINK Flexbox

---

.hbox, .vbox { display: flex; }

.hbox { flex-direction: row; }

.vbox { flex-direction: column; }

.grow { flex: 1;  }

.scroll { overflow: auto; }

.fill { position: absolute; top: 0; bottom: 0; left: 0; right:0; }

/* put all inputs in the second column, except for radio & checkboxes */

input, textarea, select {  order: 2; flex: 1 1 auto;  }

input[type="checkbox"], input[type="radio"] { order: 1; flex: none; width: auto; margin-left: 10em; }

/* put all labels in the first column, unless after radio or checkboxes */

label { order: 1;  width: 10em; text-align: right; }

input[type="checkbox"] ~ label, input[type="radio"] ~ label { width: auto; }

---------------------------------

function $(selector) { return document.querySelector(selector);  }

function $$(selector) { return document.querySelectorAll(selector); }

$$("button").forEach(button => button.addEventListener('click', ($event)=>console.log($event.target.innerText)));

---------------------------------

<div class="hbox">

       <button>do</button>

       <button>stuff</button>

       <button>left</button>

       <span class="grow"></span>

       <b>Your CSS Framework </b>

       <span class="grow"></span>

       <button class="fa fa-cut"></button>

       <button class="fa fa-copy"></button>

       <button class="fa fa-paste"></button>

   </div>

<div class="vbox panel" id="sources">

           <div class="header">Sources</div>

           <div class="scroll">

               <ul>

                   <li>list item </li>

                   <li>list item </li>

                   <li>list item </li>

                   <li>list item </li>

                 ….

           </div>

       </div>

لاگ زدن خطای سمت کلاینت در سمت سرور

window.addEventListener('error', function (e) {
    var stack = e.error.stack;
    var message = e.error.toString();
    if (stack) {
        message += '\n' + stack;
    }
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/log', true);
    xhr.send(message);
});

لینک

تگ template در HTML5

لینک 

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>
<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template>

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
  // Instantiate the table with the existing HTML tbody and the row with the template
  var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";
  // Clone the new row and insert it into the table
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  
  // Create a new row
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";
  // Clone the new row and insert it into the table
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);
} else {
  // Find another way to add the rows to the table because 
  // the HTML template element is not supported.
}

Promise

سینتکس جدید promise در جاواسکریپت:

لینک و MDN

function httpGet(url) {
        return new Promise(
            function (resolve, reject) {
                var request = new XMLHttpRequest();
                request.onreadystatechange = function () {
                    if (this.status === 200) {
                        // Success
                        resolve(this.response);
                    } else {
                        // Something went wrong (404 etc.)
                        reject(new Error(this.statusText));
                    }
                }
                request.onerror = function () {
                    reject(new Error(
                        'XMLHttpRequest Error: '+this.statusText));
                };
                request.open('GET', url);
                request.send();    
            });
    }

siege ابزاری برای تست عملکرد web api

با استفاده از این ابزار در لینوکس که با دستور

sudo apt-get install siege

نصب می شود می توانید عملکرد سرور خود را بررسی کنید مثلا

siege http://3300.ir -c10 -t10s

یعنی شبیه سازی فراخوانی  صفحه http://3300.ir به مدت 10 ثانیه توسط 10 کاربر به صورت همزمان