问:
Get certain elements in a variable with the same name as the id without writing getElementByID many times?
I have so many scripts that start like this (normally after a DOMContentLoaded event):

```<code>mythis      = document.getElementById("mythis");
mythat      = document.getElementById("mythat");
naming      = document.getElementById("naming");
isdev       = document.getElementById("isdev");
easier      = document.getElementById("easier");
remember    = document.getElementById("remember");
your        = document.getElementById("your");
stuff       = document.getElementById("stuff");
</code>```

But it's so bloated code. So I wondered if there wasn't an easier way without using eval().

This could be considered as using the benefits from 'named access on the window object' (explained here) (standard in some browsers), but safer and only for your choice of variables.

答:
```<code>["mythis","mythat","naming","isdev","easier","remember","your","stuff"].forEach(s=>{
        window[s]=document.getElementById(s)
    })
</code>```

Body:
I have so many scripts that start like this (normally after a DOMContentLoaded event):

mythis      = document.getElementById("mythis");
mythat      = document.getElementById("mythat");
naming      = document.getElementById("naming");
isdev       = document.getElementById("isdev");
easier      = document.getElementById("easier");
remember    = document.getElementById("remember");
your        = document.getElementById("your");
stuff       = document.getElementById("stuff");

But it's so bloated code. So I wondered if there wasn't an easier way without using eval().

This could be considered as using the benefits from 'named access on the window object' (explained here) (standard in some browsers), but safer and only for your choice of variables.


来源: stackexchange

问:
Ambiguous Mysql Column
I have this query

```<code>SELECT t.employee_id, t.timeinhour,t.timeouthour,
SEC_TO_TIME(SUM(TIME_TO_SEC(TIMEDIFF(t.timeouthour, t.timeinhour))))
AS Duration FROM timesheets t
INNER JOIN employeetimesheets et
ON t.employee_id=et.employee_id
WHERE employee_id='6748372'
AND timeinyear='2017'
AND timeinmonth='March'
AND isWeekNumber='1'
</code>```

It gives me this error

1052 - Column 'employee_id' in where clause is ambiguous

I have looked here and here but I'm not using all (*) so I don't understand why?

答:
You must specify which table you're referring to. Try this instead, and note the updated WHERE line:

```<code>SELECT t.employee_id, t.timeinhour,t.timeouthour,
SEC_TO_TIME(SUM(TIME_TO_SEC(TIMEDIFF(t.timeouthour, t.timeinhour))))
AS Duration FROM timesheets t
INNER JOIN employeetimesheets et
ON t.employee_id=et.employee_id
WHERE t.employee_id='6748372'
AND timeinyear='2017'
AND timeinmonth='March'
AND isWeekNumber='1'
</code>```

ContentLicense: CC BY-SA 3.0

Title: Ambiguous Mysql Column

Body:
I have this query

SELECT t.employee_id, t.timeinhour,t.timeouthour,
SEC_TO_TIME(SUM(TIME_TO_SEC(TIMEDIFF(t.timeouthour, t.timeinhour))))
AS Duration FROM timesheets t
INNER JOIN employeetimesheets et
ON t.employee_id=et.employee_id
WHERE employee_id='6748372'
AND timeinyear='2017'
AND timeinmonth='March'
AND isWeekNumber='1'

It gives me this error

1052 - Column 'employee_id' in where clause is ambiguous

I have looked here and here but I'm not using all (*) so I don't understand why?

Body:
You must specify which table you're referring to. Try this instead, and note the updated WHERE line:

SELECT t.employee_id, t.timeinhour,t.timeouthour,
SEC_TO_TIME(SUM(TIME_TO_SEC(TIMEDIFF(t.timeouthour, t.timeinhour))))
AS Duration FROM timesheets t
INNER JOIN employeetimesheets et
ON t.employee_id=et.employee_id
WHERE t.employee_id='6748372'
AND timeinyear='2017'
AND timeinmonth='March'
AND isWeekNumber='1'


问:
100% height SVG is pushing text out of the wrapper div
I have 6 icons I want to display 3 to a row.  The icon width should be 20% of the total row.  It looks alright, but the icon label is being pushed out of the wrapper div (blue dotted line).

How can I expand the wrapper to include the label?

html (pug)

```<code>#footer-menu
  each category in categories
    .icon
      .wrapper
        include ../../assets/images/icons/bank_icon.svg
        p
          =category.title
</code>```

#footer-menu {

  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 30px 0;
  width: 100%;
}
#footer-menu p {
  margin-bottom: 0;
}

  #footer-menu {
    padding: 30px 0;
    background: red;
  }
  #footer-menu .icon {
  box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    width: 20%;
    border: solid 1px yellow;
  }
  #footer-menu .icon img {
    width: 100%;
  }
  #footer-menu .icon:nth-child(3n+3) {
    margin-left: 20%;
  }
  #footer-menu .icon:nth-child(3n+1) {
    margin-right: 20%;
  }
  #footer-menu svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  #footer-menu .wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    border: dashed 2px blue;
  }```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="col-md-8"><div id="footer-menu"><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Banking</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Savings</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Loans</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Credit</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Budgeting</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Investing</p></div></div></div></div></code>```

答:
You easily solve this. Just remove the height 100% from #footer svg. You can solve this using calc method if you want the svg height 100%.  #footer svg{ height:calc(100% - 18px);} 18px is the height of p element  and set margin: 0 to #footer-menu p

Check the snippet for updated css
 Updated CSS: you don't  need all those css to get this done. basically you don't need svg height or width here. Live On Fiddle

body{
 margin:0;
}
#footer-menu {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 100%;
background: red;
}
   #footer-menu .icon{
flex: 0 1 25%;
margin: .5em;
align-self: center;
text-align: center;
border: dashed 2px blue;
}
#footer-menu p{
  margin:0;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="col-md-8"><div id="footer-menu"><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Banking</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Savings</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Loans</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Credit</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Budgeting</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Investing</p></div></div></div></div></code>```

Body:
I have 6 icons I want to display 3 to a row.  The icon width should be 20% of the total row.  It looks alright, but the icon label is being pushed out of the wrapper div (blue dotted line).

How can I expand the wrapper to include the label?

html (pug)

#footer-menu
  each category in categories
    .icon
      .wrapper
        include ../../assets/images/icons/bank_icon.svg
        p
          =category.title

#footer-menu {

  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 30px 0;
  width: 100%;
}
#footer-menu p {
  margin-bottom: 0;
}

  #footer-menu {
    padding: 30px 0;
    background: red;
  }
  #footer-menu .icon {
  box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    width: 20%;
    border: solid 1px yellow;
  }
  #footer-menu .icon img {
    width: 100%;
  }
  #footer-menu .icon:nth-child(3n+3) {
    margin-left: 20%;
  }
  #footer-menu .icon:nth-child(3n+1) {
    margin-right: 20%;
  }
  #footer-menu svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  #footer-menu .wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    border: dashed 2px blue;
  }

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>

  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>

 Banking

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>

  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>

 Savings

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>

  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>

 Loans

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>

  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>

 Credit

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>

  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>

 Budgeting

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>

  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>

 Investing

Body:
You easily solve this. Just remove the height 100% from #footer svg. You can solve this using calc method if you want the svg height 100%.  #footer svg{ height:calc(100% - 18px);} 18px is the height of p element  and set margin: 0 to #footer-menu p

Check the snippet for updated css
 Updated CSS: you don't  need all those css to get this done. basically you don't need svg height or width here. Live On Fiddle

body{
 margin:0;
}
#footer-menu {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 100%;
background: red;
}
   #footer-menu .icon{
flex: 0 1 25%;
margin: .5em;
align-self: center;
text-align: center;
border: dashed 2px blue;
}
#footer-menu p{
  margin:0;
}

<div class="col-md-8"><div id="footer-menu"><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Banking</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Savings</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Loans</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Credit</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Budgeting</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Investing</p></div></div></div></div>


问:
NodeJS UDP Multicast How to
I'm trying to send a UDP Multicast Packet to: 230.185.192.108 so everyone subscribed will receive. A bit stuck. I believe it's broadcasting correctly, but can't seem to pick anything up with any client.

Server:

```<code>var news = [
   "Borussia Dortmund wins German championship",
   "Tornado warning for the Bay Area",
   "More rain for the weekend",
   "Android tablets take over the world",
   "iPad2 sold out",
   "Nation's rappers down to last two samples"
];

var dgram = require('dgram');
var server = dgram.createSocket("udp4");
server.bind();
server.setBroadcast(true)
server.setMulticastTTL(128);
server.addMembership('230.185.192.108');

setInterval(broadcastNew, 3000);

function broadcastNew() {
    var message = new Buffer(news[Math.floor(Math.random()*news.length)]);
    server.send(message, 0, message.length, 8088, "230.185.192.108");
    console.log("Sent " + message + " to the wire...");
    //server.close();
}
</code>```

Client

```<code>var PORT = 8088;
var HOST = '192.168.0.102';
var dgram = require('dgram');
var client = dgram.createSocket('udp4');

client.on('listening', function () {
    var address = client.address();
    console.log('UDP Client listening on ' + address.address + ":" + address.port);
    client.setBroadcast(true)
    client.setMulticastTTL(128);
    client.addMembership('230.185.192.108');
});

client.on('message', function (message, remote) {
    console.log('A: Epic Command Received. Preparing Relay.');
    console.log('B: From: ' + remote.address + ':' + remote.port +' - ' + message);
});

client.bind(PORT, HOST);
</code>```

References More info on NodeJS Datagram

http://nodejs.org/api/dgram.html

答:
This answer is old, but shows up high on Google's search results.
With Node v4.4.3, the server example fails with error EBADF. The complete working block of code is listed below:

Server:

```<code>//Multicast Server sending messages
var news = [
   "Borussia Dortmund wins German championship",
   "Tornado warning for the Bay Area",
   "More rain for the weekend",
   "Android tablets take over the world",
   "iPad2 sold out",
   "Nation's rappers down to last two samples"
];

var PORT = 41848;
var MCAST_ADDR = "230.185.192.108"; //not your IP and should be a Class D address, see http://www.iana.org/assignments/multicast-addresses/multicast-addresses.xhtml
var dgram = require('dgram');
var server = dgram.createSocket("udp4");
server.bind(PORT, function(){
    server.setBroadcast(true);
    server.setMulticastTTL(128);
    server.addMembership(MCAST_ADDR);
});

setInterval(broadcastNew, 3000);

function broadcastNew() {
    var message = new Buffer(news[Math.floor(Math.random()*news.length)]);
    server.send(message, 0, message.length, PORT,MCAST_ADDR);
    console.log("Sent " + message + " to the wire...");
}
</code>```

Client:

```<code>//Multicast Client receiving sent messages
var PORT = 41848;
var MCAST_ADDR = "230.185.192.108"; //same mcast address as Server
var HOST = '192.168.1.9'; //this is your own IP
var dgram = require('dgram');
var client = dgram.createSocket('udp4');

client.on('listening', function () {
    var address = client.address();
    console.log('UDP Client listening on ' + address.address + ":" + address.port);
    client.setBroadcast(true)
    client.setMulticastTTL(128);
    client.addMembership(MCAST_ADDR);
});

client.on('message', function (message, remote) {
    console.log('MCast Msg: From: ' + remote.address + ':' + remote.port +' - ' + message);
});

client.bind(PORT, HOST);
</code>```

For the novices like me, client.bind(PORT,HOST); is the important bit. I couldn't get the client to receive anything when bound to HOST=127.0.0.1, but worked when the IP address was used. Again, HOST if excluded, the example won't work when testing using a single machine (client will throw EADDRINUSE error)

Title: NodeJS UDP Multicast How to

Body:
I'm trying to send a UDP Multicast Packet to: 230.185.192.108 so everyone subscribed will receive. A bit stuck. I believe it's broadcasting correctly, but can't seem to pick anything up with any client.

Server:

var news = [
   "Borussia Dortmund wins German championship",
   "Tornado warning for the Bay Area",
   "More rain for the weekend",
   "Android tablets take over the world",
   "iPad2 sold out",
   "Nation's rappers down to last two samples"
];

var dgram = require('dgram');
var server = dgram.createSocket("udp4");
server.bind();
server.setBroadcast(true)
server.setMulticastTTL(128);
server.addMembership('230.185.192.108');

setInterval(broadcastNew, 3000);

function broadcastNew() {
    var message = new Buffer(news[Math.floor(Math.random()*news.length)]);
    server.send(message, 0, message.length, 8088, "230.185.192.108");
    console.log("Sent " + message + " to the wire...");
    //server.close();
}

Client

var PORT = 8088;
var HOST = '192.168.0.102';
var dgram = require('dgram');
var client = dgram.createSocket('udp4');

client.on('listening', function () {
    var address = client.address();
    console.log('UDP Client listening on ' + address.address + ":" + address.port);
    client.setBroadcast(true)
    client.setMulticastTTL(128);
    client.addMembership('230.185.192.108');
});

client.on('message', function (message, remote) {
    console.log('A: Epic Command Received. Preparing Relay.');
    console.log('B: From: ' + remote.address + ':' + remote.port +' - ' + message);
});

client.bind(PORT, HOST);

References More info on NodeJS Datagram

http://nodejs.org/api/dgram.html

Body:
This answer is old, but shows up high on Google's search results.
With Node v4.4.3, the server example fails with error EBADF. The complete working block of code is listed below:

Server:

//Multicast Server sending messages
var news = [
   "Borussia Dortmund wins German championship",
   "Tornado warning for the Bay Area",
   "More rain for the weekend",
   "Android tablets take over the world",
   "iPad2 sold out",
   "Nation's rappers down to last two samples"
];

var PORT = 41848;
var MCAST_ADDR = "230.185.192.108"; //not your IP and should be a Class D address, see http://www.iana.org/assignments/multicast-addresses/multicast-addresses.xhtml
var dgram = require('dgram');
var server = dgram.createSocket("udp4");
server.bind(PORT, function(){
    server.setBroadcast(true);
    server.setMulticastTTL(128);
    server.addMembership(MCAST_ADDR);
});

setInterval(broadcastNew, 3000);

function broadcastNew() {
    var message = new Buffer(news[Math.floor(Math.random()*news.length)]);
    server.send(message, 0, message.length, PORT,MCAST_ADDR);
    console.log("Sent " + message + " to the wire...");
}

Client:

//Multicast Client receiving sent messages
var PORT = 41848;
var MCAST_ADDR = "230.185.192.108"; //same mcast address as Server
var HOST = '192.168.1.9'; //this is your own IP
var dgram = require('dgram');
var client = dgram.createSocket('udp4');

client.on('listening', function () {
    var address = client.address();
    console.log('UDP Client listening on ' + address.address + ":" + address.port);
    client.setBroadcast(true)
    client.setMulticastTTL(128);
    client.addMembership(MCAST_ADDR);
});

client.on('message', function (message, remote) {
    console.log('MCast Msg: From: ' + remote.address + ':' + remote.port +' - ' + message);
});

client.bind(PORT, HOST);

For the novices like me, client.bind(PORT,HOST); is the important bit. I couldn't get the client to receive anything when bound to HOST=127.0.0.1, but worked when the IP address was used. Again, HOST if excluded, the example won't work when testing using a single machine (client will throw EADDRINUSE error)


问:
How to set active menu option with Vue
I have a two column layout.  The left column has a stacked menu, and when the user selects an option the content displays in the right.  What's the best way to set the active class on the selected menu link?

I have come up with a solution below, but it seems kind of verbose.  Each menu item has a class assignment which is conditional upon data.activeTab.  A click event handler updates the value of data.activeTab.

```<code><template>
    <div>
        <div class="row">
            <div class="col-md-3">
                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation" :class="{active : activeTab == 'option1'}">
                        <a :href="'/#/sales/' + uuid + '/option1'" @click="updateMenu">Option 1</a>
                    </li>
                    <li role="presentation" :class="{active : activeTab == 'option2'}">
                        <a :href="'/#/sales/' + uuid + '/option2'" @click="updateMenu">Option 2</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-9">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data : function () {
            return {
                activeTab : 'option1'
            }
        },
        props : [
            'uuid'
        ],
        methods : {
            updateMenu : function (event) {
                var str = event.target.toString();
                this.activeTab = str.substr(str.lastIndexOf('/') + 1);
            }
        }
    }
</script>
</code>```

答:
Use router-link instead of your manual anchor tags and set the linkActiveClass in your router construction options.

I can't see your routes object, so this is a best guess based on what you have above. Refer to the router link documentation I linked above to determine the best way to set up your to attributes.

```<code><router-link tag="li" :to="{ path: 'sales', params: { uuid : uuid, option: "option1" }}">
    <a>Option 1</a>
</router-link>
<router-link tag="li" :to="{ path: 'sales', params: { uuid : uuid, option: "option2" }}>
    <a>Option 2</a>
</router-link>
</code>```

Then, wherever you initialized your router,

```<code>new VueRouter({
    routes,
    linkActiveClass: "active"
});
</code>```

Title: How to set active menu option with Vue

Body:
I have a two column layout.  The left column has a stacked menu, and when the user selects an option the content displays in the right.  What's the best way to set the active class on the selected menu link?

I have come up with a solution below, but it seems kind of verbose.  Each menu item has a class assignment which is conditional upon data.activeTab.  A click event handler updates the value of data.activeTab.

<template>

                        Option 1

                        Option 2

                <router-view></router-view>

</template>

Body:
Use router-link instead of your manual anchor tags and set the linkActiveClass in your router construction options.

I can't see your routes object, so this is a best guess based on what you have above. Refer to the router link documentation I linked above to determine the best way to set up your to attributes.

<router-link tag="li" :to="{ path: 'sales', params: { uuid : uuid, option: "option1" }}">
    <a>Option 1</a>
</router-link>
<router-link tag="li" :to="{ path: 'sales', params: { uuid : uuid, option: "option2" }}>
    <a>Option 2</a>
</router-link>

Then, wherever you initialized your router,

new VueRouter({
    routes,
    linkActiveClass: "active"
});


问:
Weird Behavior when using between? method for dates
Open up a Rails console and enter this:

```<code>2.weeks.ago.between? 2.weeks.ago, 1.week.ago
</code>```

Did it give you true or false? No really, try it a few more times and it will give you different answers.

Now, I'm thinking that because we're comparing 2.weeks.ago with 2.weeks.ago, the time between evaluating the two statements is causing this behavior.

I can't say for sure, but I am guessing that the between? method is not inclusive and so if a few milliseconds elapsed between the two statements, the above code will evaluate to true because it will be in between the two dates compared.

However, if the CPU manages to process this quickly enough such that the time elapsed is ignorable, then it will evaluate to false.

Can anyone shed some light on this? It is an edge case at best in a system where this might be critical, but it was giving me a headache when my tests passed and failed seemingly at random.

Oddly enough, this doesn't happen when doing:

```<code> Date.yesterday.between? Date.yesterday, Date.tomorrow
</code>```

答: Definitely due to the fact thwt 2.weeks.ago is called twice, each time returning a different response, due to processing time.  But does it matter.  The between function works exactly as intended.  The behaviour is not weird because if you stepped into the code with a debugger, you would see it operating exactly as it should.  </p>

OwnerDisplayName: Jaryl

ContentLicense: CC BY-SA 2.5

Body:
Open up a Rails console and enter this:

2.weeks.ago.between? 2.weeks.ago, 1.week.ago

Did it give you true or false? No really, try it a few more times and it will give you different answers.

Now, I'm thinking that because we're comparing 2.weeks.ago with 2.weeks.ago, the time between evaluating the two statements is causing this behavior.

I can't say for sure, but I am guessing that the between? method is not inclusive and so if a few milliseconds elapsed between the two statements, the above code will evaluate to true because it will be in between the two dates compared.

However, if the CPU manages to process this quickly enough such that the time elapsed is ignorable, then it will evaluate to false.

Can anyone shed some light on this? It is an edge case at best in a system where this might be critical, but it was giving me a headache when my tests passed and failed seemingly at random.

Oddly enough, this doesn't happen when doing:

 Date.yesterday.between? Date.yesterday, Date.tomorrow

LastEditorDisplayName: Jaryl

OwnerDisplayName: Kibbee


问:
using XML files in Windows Phone 7 and XNA 4.0
I'm working on a basic tiling engine for XNA 4.0 on Windows Phone 7. I have a bunch of mapdata xml files with all the tile positions, powerup positions etc.

I was wondering what the best way of using these? I've read that if I want to use them with the Content then I have to alter the layout of the xml files.

Is there any way to load these files on to the device within the project and read the data from them?

Many thanks,
ant.

答:
The way I did it was make the XML file an embedded resource, not content, then I could access them in code:

```<code>Assembly app = Assembly.GetExecutingAssembly();
        XmlSerializer ser = new XmlSerializer(typeof(xmlType));
        string[] resources = app.GetManifestResourceNames();

        foreach (string resourceName in resources)
        {
         xmlObject = (xmlType)ser.Deserialize(new StreamReader(app.GetManifestResourceStream(resourceName)));
        }
</code>```

xmlType is a class that represents my XML Format

Body:
The way I did it was make the XML file an embedded resource, not content, then I could access them in code:

Assembly app = Assembly.GetExecutingAssembly();
        XmlSerializer ser = new XmlSerializer(typeof(xmlType));
        string[] resources = app.GetManifestResourceNames();

        foreach (string resourceName in resources)
        {
         xmlObject = (xmlType)ser.Deserialize(new StreamReader(app.GetManifestResourceStream(resourceName)));
        }

xmlType is a class that represents my XML Format


问:
Create group ID for runs of non-zero values
I would like to find contiguous runs of non-zero elements in a vector (separated by at least one zero), and to assign an ID to each group (subsequent integer).

Toy vector:

value <- c(1, 1, 2, 3, 4, 3,   0, 0, 0,   1, 2, 3, 9, 8,   0, 0,   3, 2)

In this example, there are three runs of non-zero values: [1,1,2,3,4,3], [1,2,3,9,8], [3,2], separated by chunks of one or more zeros.

Each non-zero run should have a unique ID: 1, 2, 3... Runs of zero should have NA as ID:

```<code>   value id
1      1  1
2      1  1
3      2  1
4      3  1
5      4  1
6      3  1
7      0 NA
8      0 NA
9      0 NA
10     1  2
11     2  2
12     3  2
13     9  2
14     8  2
15     0 NA
16     0 NA
17     3  3
18     2  3
</code>```

答:
You could also do this:</p>

```<code>id <- (value>0)^NA
x <- rle(value>0)$lengths[c(TRUE, FALSE)]
id[!is.na(id)] <- rep(seq_along(x), times=x)

#[1]  1  1  1  1  1  1 NA NA NA  2  2  2  2  2 NA NA  3  3
</code>```

ContentLicense: CC BY-SA 4.0

Body:
I would like to find contiguous runs of non-zero elements in a vector (separated by at least one zero), and to assign an ID to each group (subsequent integer).

Toy vector:

value <- c(1, 1, 2, 3, 4, 3,   0, 0, 0,   1, 2, 3, 9, 8,   0, 0,   3, 2)

In this example, there are three runs of non-zero values: [1,1,2,3,4,3], [1,2,3,9,8], [3,2], separated by chunks of one or more zeros.

Each non-zero run should have a unique ID: 1, 2, 3... Runs of zero should have NA as ID:

   value id
1      1  1
2      1  1
3      2  1
4      3  1
5      4  1
6      3  1
7      0 NA
8      0 NA
9      0 NA
10     1  2
11     2  2
12     3  2
13     9  2
14     8  2
15     0 NA
16     0 NA
17     3  3
18     2  3

Body:
You could also do this:

id <- (value>0)^NA
x <- rle(value>0)$lengths[c(TRUE, FALSE)]
id[!is.na(id)] <- rep(seq_along(x), times=x)

#[1]  1  1  1  1  1  1 NA NA NA  2  2  2  2  2 NA NA  3  3


问:
C# serialize private class member
```<code>class Person
{
    public string m_name;
    private int m_age; // << how do I serialize the darn little rat?
}
</code>```

Simple question yet it seems like a big mess when trying to answer it.

Everyone suggest to use public getter/setter but my app is too big and making a getter/setter for each member would just cause maintainability issues.

Am I forced to create a custom serialization here or is there a magic attribute for such members?

How do I serialize private class members?

Edit #1:

Ok everyone, sorry for the unclarity, I was a bit upset when I wrote this question, it was several hours after trying to find the solution.

Anyway, here are more facts:

 1. I'm trying to XML serialize this class. Currently I'm using System.Xml.Serialization.XmlSerializer.

 2. I'm serializing into XML to have version compatibility, which as far as I understand binary doesn't offer me that.

 3.I was hoping that there's a certain attribute like:

```<code>class Person
{
    public string m_name;
    [SerializeThat(ElementName="Age")]
    private int m_age; // << how do I serialize the darn little rat?
}
</code>```

OR (continue of fact #3) an attribute that goes on the class which would look like:

```<code>[Serializable(DoPrivate = true, DoProtected = true)]
class Person
{
    public string m_name;
    private int m_age; // << how do I serialize the darn little rat?
}
</code>```

Now, what can I do to achieve it?

答:
You better write custom serializer

http://msdn.microsoft.com/en-us/library/system.runtime.serialization.iserializable.aspx

Title: C# serialize private class member

Body:
class Person
{
    public string m_name;
    private int m_age; // << how do I serialize the darn little rat?
}

Simple question yet it seems like a big mess when trying to answer it.

Everyone suggest to use public getter/setter but my app is too big and making a getter/setter for each member would just cause maintainability issues.

Am I forced to create a custom serialization here or is there a magic attribute for such members?

How do I serialize private class members?

Edit #1:

Ok everyone, sorry for the unclarity, I was a bit upset when I wrote this question, it was several hours after trying to find the solution.

Anyway, here are more facts:

 1. I'm trying to XML serialize this class. Currently I'm using System.Xml.Serialization.XmlSerializer.

 2. I'm serializing into XML to have version compatibility, which as far as I understand binary doesn't offer me that.

 3.I was hoping that there's a certain attribute like:

class Person
{
    public string m_name;
    [SerializeThat(ElementName="Age")]
    private int m_age; // << how do I serialize the darn little rat?
}

OR (continue of fact #3) an attribute that goes on the class which would look like:

[Serializable(DoPrivate = true, DoProtected = true)]
class Person
{
    public string m_name;
    private int m_age; // << how do I serialize the darn little rat?
}

Now, what can I do to achieve it?


问:
Deleting Safari cookies programmatically
OSX Sierra 10.12.1 Safari 10.0.1

I am attempting to reproduce the behaviour of the MacOS Safari->Preferences->Privacy->ManageWebsiteData->RemoveAll button programmatically in deleting all website data, however, the data always seems to persist. A number of SO threads suggest something along these lines using the HTTPCookieStorage class:

```<code>if #available(OSX 10.11, *) {
    cookieJar = HTTPCookieStorage.sharedCookieStorage(forGroupContainerIdentifier: "Cookies")
} else {
    cookieJar = HTTPCookieStorage.shared
}
cookieJar.removeCookies(since: Date(timeIntervalSince1970: 1))
</code>```

Using this binary cookie reader python script I can validate the expected result in ~/Library/Cookies/Cookies.binarycookies

I have also validated operations such as cookieJar.setCookie() and cookieJar.deleteCookie() makes changes within this store and that cookieJar.cookies is as expected.

I also added this call based on a couple of other SO threads I came across:

```<code>URLCache.shared.removeAllCachedResponses()
</code>```

After executing this code, website data continues to be persisted. Safari->Preferences->Privacy->ManageWebsiteData is seemingly uneffected.

I've also tried following guidance from here and performed this operation with Safari closed since this could be achieved programmatically using the FileManager class:
https://www.macissues.com/2015/06/22/how-to-fully-reset-safari-on-your-mac/

The website data still persisted. Does anyone know of any further steps that need to be taken to fully remove all website data?

答:
You could use AppleScript to click the Remove All button.

```<code>tell application "System Events" to tell process "Safari"

    -- Display the preferences privacy tab
    keystroke "," using command down
    delay 1
    click button "Privacy" of toolbar 1 of window 1

    -- Display the cookie list
    click button "Manage Website Data…" of group 1 of group 1 of window "Privacy"
    delay 3
    click button "Remove All"
    click button "Done"

end tell
</code>```

Obviously this has the disadvantage that the user can see exactly what is happening.

Body:
OSX Sierra 10.12.1 Safari 10.0.1

I am attempting to reproduce the behaviour of the MacOS Safari->Preferences->Privacy->ManageWebsiteData->RemoveAll button programmatically in deleting all website data, however, the data always seems to persist. A number of SO threads suggest something along these lines using the HTTPCookieStorage class:

if #available(OSX 10.11, *) {
    cookieJar = HTTPCookieStorage.sharedCookieStorage(forGroupContainerIdentifier: "Cookies")
} else {
    cookieJar = HTTPCookieStorage.shared
}
cookieJar.removeCookies(since: Date(timeIntervalSince1970: 1))

Using this binary cookie reader python script I can validate the expected result in ~/Library/Cookies/Cookies.binarycookies

I have also validated operations such as cookieJar.setCookie() and cookieJar.deleteCookie() makes changes within this store and that cookieJar.cookies is as expected.

I also added this call based on a couple of other SO threads I came across:

URLCache.shared.removeAllCachedResponses()

After executing this code, website data continues to be persisted. Safari->Preferences->Privacy->ManageWebsiteData is seemingly uneffected.

I've also tried following guidance from here and performed this operation with Safari closed since this could be achieved programmatically using the FileManager class:
https://www.macissues.com/2015/06/22/how-to-fully-reset-safari-on-your-mac/

The website data still persisted. Does anyone know of any further steps that need to be taken to fully remove all website data?

Body:
You could use AppleScript to click the Remove All button.

tell application "System Events" to tell process "Safari"

    -- Display the preferences privacy tab
    keystroke "," using command down
    delay 1
    click button "Privacy" of toolbar 1 of window 1

    -- Display the cookie list
    click button "Manage Website Data…" of group 1 of group 1 of window "Privacy"
    delay 3
    click button "Remove All"
    click button "Done"

end tell

Obviously this has the disadvantage that the user can see exactly what is happening.


问:
Is this layout possible in Flexbox?
I have been trying to achieve following layout with Flexbox layout mode, but without success and now I am wondering is it even possible.

I can make layout like in picture but need to use two more containers inside main container for columns but that way I can't control position of items in a way that I want when the width of screen changes.

Link to picture: https://www.dropbox.com/s/yxuf253ywzsr831/desired_effect.png?dl=0

答:
I wasn't sure of the exact behavior you were after so I made this one pretty flexible if you wanted to have the left column of a different width than the right column when they are in the "wide screen" mode. This uses a media query to change the "order" of the divs in the flexbox. It also uses javascript to  manage the widths and heights of the elements throughout. It is difficult to play with the width of the window below, so you can play with it here instead:
https://jsfiddle.net/FrancisMacDougall/srgmpgx0/

var ids = {
  flex1: { hmul:0.32 },
  flex2: { hmul:0.32 },
  flex3: { hmul:0.32 },
  flex4: { hmul:0.64 },
  flex5: { hmul:0.32 }
};
function resize() {
  var container = document.getElementById("container");
  var xoff = container.offsetLeft;
  var yoff = container.offsetTop;
  var w = container.offsetWidth;
  var h = (window.innerHeight - yoff) - 8;
  var big = (window.innerWidth>500);

  document.getElementById("dimensions").innerHTML =
    "Size: "+ window.innerWidth + " x " + window.innerHeight;

  if(big)
    container.style.maxHeight = h + "px";
  else
    container.style.maxHeight = (h*3) + "px";

  Object.keys(ids).forEach(function (id) {
    var el = document.getElementById(id);
    el.style.height = (h * ids[id].hmul) + "px";
  });
}
window.onload = function(e) {
  resize();
}
window.onresize = function(e) {
  resize();
}```
<pre class="snippet-code-css lang-css prettyprint-override"><code>*, *:before, *:after { box-sizing: border-box; }
body { color: black; background: gray; font-size: .1in }

@media screen and (min-width: 501px) {
    body { background: yellow; }
    .flex1 { order:1; width:40%;}
    .flex2 { order:2; width:40%;}
    .flex3 { order:3; width:40%;}
    .flex4 { order:4; width:60%;}
    .flex5 { order:5; width:60%;}
    .flex-container{ flex-wrap:wrap; }
}
@media screen and (max-width: 500px){
    body { background: green; }
    .flex1 { order:1; width:100%;}
    .flex2 { order:3; width:100%;}
    .flex3 { order:4; width:100%;}
    .flex4 { order:2; width:100%;}
    .flex5 { order:5; width:100%;}
    .flex-container{ flex-wrap:nowrap; }
}
.flex-container {
  display: flex;
  flex-direction:column;
  align-items: center;
  overflow-y:auto;
  overflow-x:hidden;
  background-color: #ccc;
}

.flex-item {
  border: 1px solid red;
  background: tomato;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}</code>```

1

2

3

4

5

```

Title: Is this layout possible in Flexbox?

Body:
I wasn't sure of the exact behavior you were after so I made this one pretty flexible if you wanted to have the left column of a different width than the right column when they are in the "wide screen" mode. This uses a media query to change the "order" of the divs in the flexbox. It also uses javascript to  manage the widths and heights of the elements throughout. It is difficult to play with the width of the window below, so you can play with it here instead:
https://jsfiddle.net/FrancisMacDougall/srgmpgx0/

var ids = {
  flex1: { hmul:0.32 },
  flex2: { hmul:0.32 },
  flex3: { hmul:0.32 },
  flex4: { hmul:0.64 },
  flex5: { hmul:0.32 }
};
function resize() {
  var container = document.getElementById("container");
  var xoff = container.offsetLeft;
  var yoff = container.offsetTop;
  var w = container.offsetWidth;
  var h = (window.innerHeight - yoff) - 8;
  var big = (window.innerWidth>500);

  document.getElementById("dimensions").innerHTML =
    "Size: "+ window.innerWidth + " x " + window.innerHeight;

  if(big)
    container.style.maxHeight = h + "px";
  else
    container.style.maxHeight = (h*3) + "px";

  Object.keys(ids).forEach(function (id) {
    var el = document.getElementById(id);
    el.style.height = (h * ids[id].hmul) + "px";
  });
}
window.onload = function(e) {
  resize();
}
window.onresize = function(e) {
  resize();
}

*, *:before, *:after { box-sizing: border-box; }
body { color: black; background: gray; font-size: .1in }

@media screen and (min-width: 501px) {
    body { background: yellow; }
    .flex1 { order:1; width:40%;}
    .flex2 { order:2; width:40%;}
    .flex3 { order:3; width:40%;}
    .flex4 { order:4; width:60%;}
    .flex5 { order:5; width:60%;}
    .flex-container{ flex-wrap:wrap; }
}
@media screen and (max-width: 500px){
    body { background: green; }
    .flex1 { order:1; width:100%;}
    .flex2 { order:3; width:100%;}
    .flex3 { order:4; width:100%;}
    .flex4 { order:2; width:100%;}
    .flex5 { order:5; width:100%;}
    .flex-container{ flex-wrap:nowrap; }
}
.flex-container {
  display: flex;
  flex-direction:column;
  align-items: center;
  overflow-y:auto;
  overflow-x:hidden;
  background-color: #ccc;
}

.flex-item {
  border: 1px solid red;
  background: tomato;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

<div id="dimensions"></div>
<div id="container" class="flex-container">
  <div id="flex1" class="flex-item flex1">1</div>
  <div id="flex2" class="flex-item flex2">2</div>
  <div id="flex3" class="flex-item flex3">3</div>
  <div id="flex4" class="flex-item flex4">4</div>
  <div id="flex5" class="flex-item flex5">5</div>
</div>


问:
Updating a MySQL table with the COUNT of another
I'm trying to update a column in table Profiles with a COUNT from another table Videos.  All videos are stored in the Videos table, and I want to create a column in Profiles called VideoCount which shows the COUNT of that user's videos in the Videos table.

Basically, I want to run a cron job - so I need to know how to find the COUNT of a user's videos in the Videos table and then UPDATE that user's VideoCount in Profiles with this count number.

To identify who's uploaded which video, Videos.Owner and Profiles.ID should be made to match.  Does anybody know the SQL which I need to run for the PHP file cron job?

答:
If you want to update video count that you can upadate video count at the time of upload, so as i think there is no need for the cron job for this.</p>

```<code>update profiles set videocount=(select count(*) from videos where profileid =$profileid )
where profileid=$profileid
</code>```

Body:
If you want to update video count that you can upadate video count at the time of upload, so as i think there is no need for the cron job for this.

update profiles set videocount=(select count(*) from videos where profileid =$profileid )
where profileid=$profileid


答:
You need define table alias in where section, like this

SELECT t.employee_id, t.timeinhour,t.timeouthour,
SEC_TO_TIME(SUM(TIME_TO_SEC(TIMEDIFF(t.timeouthour, t.timeinhour))))
AS Duration FROM timesheets t
INNER JOIN employeetimesheets et
ON t.employee_id=et.employee_id
WHERE t.employee_id='6748372'
AND t.timeinyear='2017'
AND t.timeinmonth='March'
AND t.isWeekNumber='1'
```

If column from table employeetimesheets set et alias

Title: Ambiguous Mysql Column

Body:
I have this query

SELECT t.employee_id, t.timeinhour,t.timeouthour,
SEC_TO_TIME(SUM(TIME_TO_SEC(TIMEDIFF(t.timeouthour, t.timeinhour))))
AS Duration FROM timesheets t
INNER JOIN employeetimesheets et
ON t.employee_id=et.employee_id
WHERE employee_id='6748372'
AND timeinyear='2017'
AND timeinmonth='March'
AND isWeekNumber='1'

It gives me this error

1052 - Column 'employee_id' in where clause is ambiguous

I have looked here and here but I'm not using all (*) so I don't understand why?

Body:
You need define table alias in where section, like this

SELECT t.employee_id, t.timeinhour,t.timeouthour,
SEC_TO_TIME(SUM(TIME_TO_SEC(TIMEDIFF(t.timeouthour, t.timeinhour))))
AS Duration FROM timesheets t
INNER JOIN employeetimesheets et
ON t.employee_id=et.employee_id
WHERE t.employee_id='6748372'
AND t.timeinyear='2017'
AND t.timeinmonth='March'
AND t.isWeekNumber='1'

If column from table employeetimesheets set et alias


问:
When press button, python script runs automatically on Raspberry Pi
Can't find tutorial online.

When I press a button, I want some python script to run. I don't want to run the python script first on the Raspberry Pi's terminal and then wait for the button to be pressed like some tutorials mention. I also want the whole script to run after I press the button, not that I have to press the button for the whole duration of the script to run.

Basically, I want the script to run without having to have a HDMI monitor or mouse connected to Raspberry Pi or a GUI thing. Just the press of a button.

Also if anyone has diagrams on how to set up the button with the GPIO and code that would be really helpful.

How do I do this?? I can't find anything on it and it seems so simple.

答:
A more efficient alternative to polling is to use interrupts:

```<code>#!/usr/bin/env python2.7
# script by Alex Eames http://RasPi.tv/
# http://raspi.tv/2013/how-to-use-interrupts-with-python-on-the-raspberry-pi-and-rpi-gpio
import RPi.GPIO as GPIO
GPIO.setmode(GPIO.BCM)

# GPIO 23 set up as input. It is pulled up to stop false signals
GPIO.setup(23, GPIO.IN, pull_up_down=GPIO.PUD_UP)

print "Make sure you have a button connected so that when pressed"
print "it will connect GPIO port 23 (pin 16) to GND (pin 6)\n"
raw_input("Press Enter when ready\n>")

print "Waiting for falling edge on port 23"
# now the program will do nothing until the signal on port 23
# starts to fall towards zero. This is why we used the pullup
# to keep the signal high and prevent a false interrupt

print "During this waiting time, your computer is not"
print "wasting resources by polling for a button press.\n"
print "Press your button when ready to initiate a falling edge interrupt."
try:
    GPIO.wait_for_edge(23, GPIO.FALLING)
    print "\nFalling edge detected. Now your program can continue with"
    print "whatever was waiting for a button press."
except KeyboardInterrupt:
    GPIO.cleanup()       # clean up GPIO on CTRL+C exit
GPIO.cleanup()           # clean up GPIO on normal exit
</code>```

(from http://raspi.tv/2013/how-to-use-interrupts-with-python-on-the-raspberry-pi-and-rpi-gpio)

Body:
A more efficient alternative to polling is to use interrupts:

#!/usr/bin/env python2.7
# script by Alex Eames http://RasPi.tv/
# http://raspi.tv/2013/how-to-use-interrupts-with-python-on-the-raspberry-pi-and-rpi-gpio
import RPi.GPIO as GPIO
GPIO.setmode(GPIO.BCM)

# GPIO 23 set up as input. It is pulled up to stop false signals
GPIO.setup(23, GPIO.IN, pull_up_down=GPIO.PUD_UP)

print "Make sure you have a button connected so that when pressed"
print "it will connect GPIO port 23 (pin 16) to GND (pin 6)\n"
raw_input("Press Enter when ready\n>")

print "Waiting for falling edge on port 23"
# now the program will do nothing until the signal on port 23
# starts to fall towards zero. This is why we used the pullup
# to keep the signal high and prevent a false interrupt

print "During this waiting time, your computer is not"
print "wasting resources by polling for a button press.\n"
print "Press your button when ready to initiate a falling edge interrupt."
try:
    GPIO.wait_for_edge(23, GPIO.FALLING)
    print "\nFalling edge detected. Now your program can continue with"
    print "whatever was waiting for a button press."
except KeyboardInterrupt:
    GPIO.cleanup()       # clean up GPIO on CTRL+C exit
GPIO.cleanup()           # clean up GPIO on normal exit

(from http://raspi.tv/2013/how-to-use-interrupts-with-python-on-the-raspberry-pi-and-rpi-gpio)


问:
Map Reduce/Sum using Underscorejs
I am trying to convert the following dataset:

```<code>var data = {
"csrf": "token",

"items": [
{"category": "product1", "image": "image1.jpg", "cost": "$6", "item_totals": [
    {"category": "discount", "amount": "-$1.0"}]
},
{"category": "product2", "image": "image2.jpg", "cost": "$8", "item_totals": [
    {"category": "discount", "amount": "-$1.2"}]
}],

"totals": [
{"category": "shipping", "amount": "$0.00", "name": "Shipping", "is_zero": true},
{"category": "taxes", "amount": "$0.00", "name": "Taxes", "is_zero": true}
],
"total": "$1234", "subtotal": "$1234", "id": abc123, "currency_code": "USD"}
</code>```

into a single value, being the sum of all 'amount' values in the item_totals array(s). I cannot seem to do this whilst accounting a varying amount of records in 'items' & for empty 'item_total' arrays. Any help would be great!

答:
var data = {
  "csrf": "token",

  "items": [{
      "category": "product1",
      "image": "image1.jpg",
      "cost": "$6",
      "item_totals": [{
        "category": "discount",
        "amount": "-$1.0"
      }]
    },
    {
      "category": "product2",
      "image": "image2.jpg",
      "cost": "$8",
      "item_totals": [ // multiple item_totals
        {
          "category": "discount",
          "amount": "-$1.2"
        },
        {
          "category": "discount",
          "amount": "-$1.2"
        }
      ]
    },
    {
      "category": "product2",
      "image": "image2.jpg",
      "cost": "$8",
      "item_totals": [] // empty item_totals
    },
    {
      "category": "product2",
      "image": "image2.jpg",
      "cost": "$8"
      // absent item_totals
    }

  ],

  "totals": [{
      "category": "shipping",
      "amount": "$0.00",
      "name": "Shipping",
      "is_zero": true
    },
    {
      "category": "taxes",
      "amount": "$0.00",
      "name": "Taxes",
      "is_zero": true
    }
  ],
  "total": "$1234",
  "subtotal": "$1234",
  "id": "abc123",
  "currency_code": "USD"
}

var totalAmount = _.chain(data.items)
  .map(item => item.item_totals || []) // emit totals
  .tap(console.log)
  .reduce((memo, bucket) => memo.concat(bucket), []) // collect (flatten)
  .tap(console.log)
  .map(total => parseFloat(total.amount.replace('$', ''), 10)) // emit amounts
  .tap(console.log)
  .reduce((ret, amount) => ret + amount, 0) // collect (sum)
  .value();
console.log(totalAmount);```
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="http://underscorejs.org/underscore.js"></script></code>```

Title: Map Reduce/Sum using Underscorejs

Body:
I am trying to convert the following dataset:

var data = {
"csrf": "token",

"items": [
{"category": "product1", "image": "image1.jpg", "cost": "$6", "item_totals": [
    {"category": "discount", "amount": "-$1.0"}]
},
{"category": "product2", "image": "image2.jpg", "cost": "$8", "item_totals": [
    {"category": "discount", "amount": "-$1.2"}]
}],

"totals": [
{"category": "shipping", "amount": "$0.00", "name": "Shipping", "is_zero": true},
{"category": "taxes", "amount": "$0.00", "name": "Taxes", "is_zero": true}
],
"total": "$1234", "subtotal": "$1234", "id": abc123, "currency_code": "USD"}

into a single value, being the sum of all 'amount' values in the item_totals array(s). I cannot seem to do this whilst accounting a varying amount of records in 'items' & for empty 'item_total' arrays. Any help would be great!

Body:
var data = {
  "csrf": "token",

  "items": [{
      "category": "product1",
      "image": "image1.jpg",
      "cost": "$6",
      "item_totals": [{
        "category": "discount",
        "amount": "-$1.0"
      }]
    },
    {
      "category": "product2",
      "image": "image2.jpg",
      "cost": "$8",
      "item_totals": [ // multiple item_totals
        {
          "category": "discount",
          "amount": "-$1.2"
        },
        {
          "category": "discount",
          "amount": "-$1.2"
        }
      ]
    },
    {
      "category": "product2",
      "image": "image2.jpg",
      "cost": "$8",
      "item_totals": [] // empty item_totals
    },
    {
      "category": "product2",
      "image": "image2.jpg",
      "cost": "$8"
      // absent item_totals
    }

  ],

  "totals": [{
      "category": "shipping",
      "amount": "$0.00",
      "name": "Shipping",
      "is_zero": true
    },
    {
      "category": "taxes",
      "amount": "$0.00",
      "name": "Taxes",
      "is_zero": true
    }
  ],
  "total": "$1234",
  "subtotal": "$1234",
  "id": "abc123",
  "currency_code": "USD"
}

var totalAmount = _.chain(data.items)
  .map(item => item.item_totals || []) // emit totals
  .tap(console.log)
  .reduce((memo, bucket) => memo.concat(bucket), []) // collect (flatten)
  .tap(console.log)
  .map(total => parseFloat(total.amount.replace('$', ''), 10)) // emit amounts
  .tap(console.log)
  .reduce((ret, amount) => ret + amount, 0) // collect (sum)
  .value();
console.log(totalAmount);

<script src="http://underscorejs.org/underscore.js"></script>


问:
Is there a way to disable the initialization timer in Office.js?
We came across an issue when testing our Office.js add-in under poor network conditions. The following error is thrown even before our script is loaded:

Uncaught Office.js has not been fully loaded yet. Please try again later or make sure to add your initialization code on the Office.initialize function.

After debugging for hours we found the following piece of code in Office.js:

```<code>g.waitForFunction(function() {
    return Microsoft.Office.WebExtension.initialize != undefined
}, function(a) {
    if (a) {
        if (h.prepareApiSurface)
            Microsoft.Office.WebExtension.initialize(h.getInitializationReason(b));
        else
            h.prepareRightBeforeWebExtensionInitialize(b);
        h.prepareRightAfterWebExtensionInitialize && h.prepareRightAfterWebExtensionInitialize()
    } else
        throw "Office.js has not been fully loaded yet. Please try again later or make sure to add your initialization code on the Office.initialize function."
}, 400, 50)
</code>```

The waitForFunction method takes 4 parameters:

function - State check function that returns a boolean.

function - Callback function called when the state check function returns true or the method fails.

Number - Number of retries.

Number - Milliseconds between tries.

Based on the source code we found, an Office add-in has ~20 seconds to initialize before the framework times out and simply gives up. This is specially problematic on Office 365 online and slow connections.

The following add-in reproduces the issue:

```<code><head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Test Init</title>
    <script src="//appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
</head>

<body class="ms-font-l" style="width:100%;height:100%;overflow:hidden;position:relative;">
<div id="app" style="height:100%"></div>
<script>
    console.log('Our script loaded...');
    setTimeout(function () {
        Office.initialize = function () {
            console.log('Our App Initialized!!!')
        };
    }, 15000);
</script>
</body>

</html>
</code>```

My question is, is there a way to bypass this timeout? or at least increase it? Maybe use something like:

Office.initialize(function() { /* ... */ });

rather than:

Office.initialize = function() { /* ... */};

If not, would the office team consider changing the timer to instead use a property:

```<code>Object.defineProperty(Office, 'initialize', {
    get: function() { return Office._initialize; },
    set: function(value) { Office._initialize = value; Office.triggerCodeDependantOnInitialize(); }
});
</code>```

答:
There currently is no way to avoid the timeout. That said, you should always call Office.initialize before anything else is executed. In general my guidance is to place this call at the bottom on your HEAD.

```<code><head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Test Init</title>
    <script src="//appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
    <script>
        Office.initialize = function () {
            console.log('Office Initialized!!!')

        };
    </script>
</head>
</code>```

I then use an event to trigger any additional initialization code I need when the document is ready (i.e. document.addEventListener("DOMContentLoaded", function(event){ }) or JQuery's $(document).ready)

Body:
We came across an issue when testing our Office.js add-in under poor network conditions. The following error is thrown even before our script is loaded:

Uncaught Office.js has not been fully loaded yet. Please try again later or make sure to add your initialization code on the Office.initialize function.

After debugging for hours we found the following piece of code in Office.js:

g.waitForFunction(function() {
    return Microsoft.Office.WebExtension.initialize != undefined
}, function(a) {
    if (a) {
        if (h.prepareApiSurface)
            Microsoft.Office.WebExtension.initialize(h.getInitializationReason(b));
        else
            h.prepareRightBeforeWebExtensionInitialize(b);
        h.prepareRightAfterWebExtensionInitialize && h.prepareRightAfterWebExtensionInitialize()
    } else
        throw "Office.js has not been fully loaded yet. Please try again later or make sure to add your initialization code on the Office.initialize function."
}, 400, 50)

The waitForFunction method takes 4 parameters:

function - State check function that returns a boolean.

function - Callback function called when the state check function returns true or the method fails.

Number - Number of retries.

Number - Milliseconds between tries.

Based on the source code we found, an Office add-in has ~20 seconds to initialize before the framework times out and simply gives up. This is specially problematic on Office 365 online and slow connections.

The following add-in reproduces the issue:

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Test Init</title>

My question is, is there a way to bypass this timeout? or at least increase it? Maybe use something like:

Office.initialize(function() { /* ... */ });

rather than:

Office.initialize = function() { /* ... */};

If not, would the office team consider changing the timer to instead use a property:

Object.defineProperty(Office, 'initialize', {
    get: function() { return Office._initialize; },
    set: function(value) { Office._initialize = value; Office.triggerCodeDependantOnInitialize(); }
});

Body:
There currently is no way to avoid the timeout. That said, you should always call Office.initialize before anything else is executed. In general my guidance is to place this call at the bottom on your HEAD.

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Test Init</title>
    <script src="//appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>
    <script>
        Office.initialize = function () {
            console.log('Office Initialized!!!')

        };
    </script>
</head>

I then use an event to trigger any additional initialization code I need when the document is ready (i.e. document.addEventListener("DOMContentLoaded", function(event){ }) or JQuery's $(document).ready)


问:
Pass custom escape sequences from iTerm2 to Emacs
I spent quite some time reading about ANSI escape codes (e.g. wikipedia, in particular the sequence on generic format) and how terminal emulators capture and translate key combinations into escape sequences (e.g. a great thread here).

I (think I) understand that the escape sentence syntax allows for arbitrarily long private/non-standard escape sequences; in particular iTerm2 (a terminal emulator for macOS) has defined a set of proprietary escape sequences (link).

First, am I right about private escape sequences?

And if so, is it possible (and then how) to define a private escape sequence, bind it to some key (say Command-z) in iTerm2, so that iTerm2 would not catch it and directly pass it to the active program (e.g. Emacs)?

The ultimate goal would be to allow Emacs to catch key combinations based on Command in a terminal emulator...

答:
The escape sequences recognized by iTerm2 are irrelevant.  While special keys are often set up to send characters beginning with an escape character, those are actually not escape sequences (they have no meaning to the terminal).

What you want is done by configuring the keys/modifiers in iTerm2's preferences dialog to send characters that you can then configure Emacs to recognize.  Here is a screenshot of the preferences dialog:

In a different preferences dialog, you can tell iTerm2 to do different things (e.g., shortcuts to actions that may/may not already be on a menu):


问:
spring cron for running every hour at 35th minute
I have a job that is scheduled to run every hour and I am using spring cron (0 0/35 * * * ). I am expecting the job to run at the 35th minute every hour but I noticed that the job gets triggered at the 35th minute and also at top of the hour. I am not sure why, any suggestions?

Thanks,
Karthik

答:
Yes. Cron starts minutes at beginning of each hour (as we mention * for hour field). An alternative way of achieving your goal (executing a task at every 35th minute)can be as follows -

Make your cron trigger for every 5 minutes and increment a counter
  everytime the cron is triggered. Once the counter reaches 7 (i.e. 35
  mins in your case), execute your goal and set the counter back to 0.

And if you want your goal to be executed at 35th minute of each hour, you should try

```<code>35 * * * *
</code>```

Hope this helps!

Body:
Yes. Cron starts minutes at beginning of each hour (as we mention * for hour field). An alternative way of achieving your goal (executing a task at every 35th minute)can be as follows -

Make your cron trigger for every 5 minutes and increment a counter
  everytime the cron is triggered. Once the counter reaches 7 (i.e. 35
  mins in your case), execute your goal and set the counter back to 0.

And if you want your goal to be executed at 35th minute of each hour, you should try

35 * * * *

Hope this helps!


问:
Dropzone.js post request in laravel 5.4
I am not receiving any request at controller's uploadGallery method. Although, the post request is received correctly.

gallery.blade.php

```<code><div class="row">
    <form action="{{ url('file-upload') }}" method="post" class="dropzone" id="my-awesome-dropzone">
                            {{ csrf_field() }}
                            <div class="dz-message">
                                <h3>Drop images here or click to upload.</h3>
                            </div>
                        </form>
                    </div>
    <script type="text/javascript">

        $(function (){

            Dropzone.options.myAwesomeDropzone = {
                paramName: "files",
                uploadMultiple:true,
                maxFilesize:6,
                autoProcessQueue: true,
                uploadMultiple: true,
                addRemoveLinks: true,
                acceptedFiles: ".png, .jpg, .jpeg",
                dictFallbackMessage:"Your browser does not support drag'n'drop file uploads.",
                dictRemoveFile: "Remove",
                dictFileTooBig:"Image is bigger than 6MB",

                accept: function(file, done) {
                    console.log("Uploaded");
                    done();
                },

                init:function() {
                /*  var submitButton = document.querySelector('#submit-all')
                        myAwesomeDropzone = this;

                    submitButton.addEventListener("click", function(
                        myAwesomeDropzone.processQueue();
                    ));

                    this.on("addedfile", function(){
                        $('#submit-all').show();
                    });*/

                },
                success: function(file,done){
                    console.log("All files done!");
                }
        }
        });
    </script>
</code>```

web.php

```<code>Route::get('/gallery', 'PagesController@Gallery');
Route::post('/file-upload', 'ImagesController@uploadImages');
</code>```

ImagesController.php

```<code><?php

namespace App\Http\Controllers;

use App\User;
use App\Image;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class ImagesController extends Controller
{
    public function __construct() {
        $this->middleware('auth');
    }

    public function uploadImages(Image $request) {
        $images = request()->file('files');
        dd($images);
        return view('Gallery');
    }
}
</code>```

Anything inside the uploadImages function is not running. Why?

答:
You have wrong type hinting in your uploadImages() function.

Change your uploadImages() from

```<code>public function uploadImages(Image $request)
</code>```

to

```<code>public function uploadImages(Request $request)
</code>```

Now you should be able to use request() to grab files.

Title: Dropzone.js post request in laravel 5.4

Body:
I am not receiving any request at controller's uploadGallery method. Although, the post request is received correctly.

gallery.blade.php

    <form action="{{ url('file-upload') }}" method="post" class="dropzone" id="my-awesome-dropzone">
                            {{ csrf_field() }}

Drop images here or click to upload.

                        </form>

web.php

Route::get('/gallery', 'PagesController@Gallery');
Route::post('/file-upload', 'ImagesController@uploadImages');

ImagesController.php

<?php

namespace App\Http\Controllers;

use App\User;
use App\Image;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class ImagesController extends Controller
{
    public function __construct() {
        $this->middleware('auth');
    }

    public function uploadImages(Image $request) {
        $images = request()->file('files');
        dd($images);
        return view('Gallery');
    }
}

Anything inside the uploadImages function is not running. Why?

Body:
You have wrong type hinting in your uploadImages() function.

Change your uploadImages() from

public function uploadImages(Image $request)

to

public function uploadImages(Request $request)

Now you should be able to use request() to grab files.


问:
Configure sink elasticsearch apache-flume
This is my first time here, so sorry if I don't post fine, and sorry for my bad English.

I'm trying to configure Apache Flume and Elasticsearch sinks. Everything is ok, it seems that it runs fine, but there are 2 warnings when I start an agent; the following ones:

```<code>2015-11-16 09:11:22,122 (lifecycleSupervisor-1-3) [ERROR - org.apache.flume.lifecycle.LifecycleSupervisor$MonitorRunnable.run(LifecycleSupervisor.java:253)] Unable to start SinkRunner: { policy:org.apache.flume.sink.DefaultSinkProcessor@ce359aa counterGroup:{ name:null counters:{} } } - Exception follows.
java.lang.NoSuchMethodError: org.elasticsearch.common.transport.InetSocketTransportAddress.<init>(Ljava/lang/String;I)V
    at org.apache.flume.sink.elasticsearch.client.ElasticSearchTransportClient.configureHostnames(ElasticSearchTransportClient.java:143)
    at org.apache.flume.sink.elasticsearch.client.ElasticSearchTransportClient.<init>(ElasticSearchTransportClient.java:77)
    at org.apache.flume.sink.elasticsearch.client.ElasticSearchClientFactory.getClient(ElasticSearchClientFactory.java:48)
    at org.apache.flume.sink.elasticsearch.ElasticSearchSink.start(ElasticSearchSink.java:357)
    at org.apache.flume.sink.DefaultSinkProcessor.start(DefaultSinkProcessor.java:46)
    at org.apache.flume.SinkRunner.start(SinkRunner.java:79)
    at org.apache.flume.lifecycle.LifecycleSupervisor$MonitorRunnable.run(LifecycleSupervisor.java:251)
    at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
    at java.util.concurrent.FutureTask.runAndReset(FutureTask.java:308)
    at java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.access$301(ScheduledThreadPoolExecutor.java:180)
    at java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.run(ScheduledThreadPoolExecutor.java:294)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at java.lang.Thread.run(Thread.java:745)
2015-11-16 09:11:22,137 (lifecycleSupervisor-1-3) [WARN - org.apache.flume.lifecycle.LifecycleSupervisor$MonitorRunnable.run(LifecycleSupervisor.java:260)] Component SinkRunner: { policy:org.apache.flume.sink.DefaultSinkProcessor@ce359aa counterGroup:{ name:null counters:{} } } stopped, since it could not besuccessfully started due to missing dependencies
</code>```

My agent configuration:

```<code># Name the components on this agent
a1.sources = r1
a1.sinks = k1
a1.channels = c1

# Describe/configure the source
a1.sources.r1.type = netcat
a1.sources.r1.bind = localhost
a1.sources.r1.port = 44444

# Describe the sink ES
a1.sinks = k1
a1.sinks.k1.type = elasticsearch
a1.sinks.k1.hostNames = 127.0.0.1:9200,127.0.0.2:9300
a1.sinks.k1.indexName = items
a1.sinks.k1.indexType = item
a1.sinks.k1.clusterName = elasticsearch
a1.sinks.k1.batchSize = 500
a1.sinks.k1.ttl = 5d
a1.sinks.k1.serializer=org.apache.flume.sink.elasticsearch.ElasticSearchDynamicSerializer
a1.sinks.k1.channel = c1

# Use a channel which buffers events in memory
a1.channels.c1.type = memory
a1.channels.c1.capacity = 1000
a1.channels.c1.transactionCapacity = 100

# Bind the source and sink to the channel
a1.sources.r1.channels = c1
a1.sinks.k1.channel = c1
</code>```

It starts the netcat and all is fine, but I'm afraid about theses warnings, I don't understand it.

答:
Added below 2 JARs only in flume/lib dir and it worked, do not have to add all other Lucene JARs:

elasticsearch-1.7.1.jar

lucene-core-4.10.4.jar

command to start flume:

```<code>bin/flume-ng agent --conf conf --conf-file conf/flume-aggregator.conf --name agent2 -Dflume.root.logger=INFO,console
</code>```

make sure to add below to flume-env.sh

```<code>export JAVA_HOME=/usr/java/default

export JAVA_OPTS="-Xms3072m -Xmx3072m -XX:MaxPermSize=48m -XX:+UseG1GC -XX:MaxGCPauseMillis=20 -XX:InitiatingHeapOccupancyPercent=35 -Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.port=5445 -Dcom.sun.management.jmxremote.authenticate=false -Dcom.sun.management.jmxremote.ssl=false"

FLUME_CLASSPATH="/usr/flume/flume1.6/apache-flume-1.6.0-bin/;/usr/flume/flume1.6/apache-flume-1.6.0-bin/lib"
</code>```

Flume aggregator config to load data in ES : flume-aggregator.conf

```<code>agent2.sources = source1
agent2.sinks = sink1
agent2.channels = channel1

################################################
# Describe Source
################################################

# Source Avro
agent2.sources.source1.type = avro
agent2.sources.source1.bind = 0.0.0.0
agent2.sources.source1.port = 9997

################################################
# Describe Interceptors
################################################
# an example of nginx access log regex match
# agent2.sources.source1.interceptors = interceptor1
# agent2.sources.source1.interceptors.interceptor1.type = regex_extractor
#
# agent2.sources.source1.interceptors.interceptor1.regex = "^(\\S+) \\[(.*?)\\] \"(.*?)\" (\\S+) (\\S+)( \"(.*?)\" \"(.*?)\")?"
#
# # agent2.sources.source1.interceptors.interceptor1.regex = ^(.*) ([a-zA-Z\\.\\@\\-\\+_%]+) ([a-zA-Z\\.\\@\\-\\+_%]+) \\[(.*)\\] \\"(POST|GET) ([A-Za-z0-9\\$\\.\\+\\@#%_\\/\\-]*)\\??(.*) (.*)\\" ([a-zA-Z0-9\\.\\/\\s\-]*) (.*) ([0-9]+) ([0-9]+) ([0-9\\.]+)
# # agent2.sources.source1.interceptors.interceptor1.serializers = s1 s2 s3 s4 s5 s6 s7 s8 s9 s10 s11 s12 s13
#
# agent2.sources.source1.interceptors.interceptor1.serializers = s1 s2 s3 s4 s5 s6 s7 s8
# agent2.sources.source1.interceptors.interceptor1.serializers.s1.name = clientip
# agent2.sources.source1.interceptors.interceptor1.serializers.s2.name = datetime
# agent2.sources.source1.interceptors.interceptor1.serializers.s3.name = method
# agent2.sources.source1.interceptors.interceptor1.serializers.s4.name = request
# agent2.sources.source1.interceptors.interceptor1.serializers.s5.name = response
# agent2.sources.source1.interceptors.interceptor1.serializers.s6.name = status
# agent2.sources.source1.interceptors.interceptor1.serializers.s7.name = bytes
# agent2.sources.source1.interceptors.interceptor1.serializers.s8.name = requesttime
#

################################################
# Describe Sink
################################################

# Sink ElasticSearch
# Elasticsearch lib ---> flume/lib
# elasticsearch/config/elasticsearch.yml cluster.name clusterName. data/clustername data.
agent2.sinks.sink1.type = org.apache.flume.sink.elasticsearch.ElasticSearchSink
agent2.sinks.sink1.hostNames = 10.20.156.16:9300,10.20.176.20:9300
agent2.sinks.sink1.indexName = pdi
agent2.sinks.sink1.indexType = pdi_metrics
agent2.sinks.sink1.clusterName = My-ES-CLUSTER
agent2.sinks.sink1.batchSize = 1000
agent2.sinks.sink1.ttl = 2
#this serializer is crucial in order to use kibana
agent2.sinks.sink1.serializer = org.apache.flume.sink.elasticsearch.ElasticSearchLogStashEventSerializer

################################################
# Describe Channel
################################################

# Channel Memory
agent2.channels.channel1.type = memory
agent2.channels.channel1.capacity = 10000000
agent2.channels.channel1.transactionCapacity = 1000

################################################
# Bind the source and sink to the channel
################################################

agent2.sources.source1.channels = channel1
agent2.sinks.sink1.channel = channel1
</code>```

Body:
This is my first time here, so sorry if I don't post fine, and sorry for my bad English.

I'm trying to configure Apache Flume and Elasticsearch sinks. Everything is ok, it seems that it runs fine, but there are 2 warnings when I start an agent; the following ones:

2015-11-16 09:11:22,122 (lifecycleSupervisor-1-3) [ERROR - org.apache.flume.lifecycle.LifecycleSupervisor$MonitorRunnable.run(LifecycleSupervisor.java:253)] Unable to start SinkRunner: { policy:org.apache.flume.sink.DefaultSinkProcessor@ce359aa counterGroup:{ name:null counters:{} } } - Exception follows.
java.lang.NoSuchMethodError: org.elasticsearch.common.transport.InetSocketTransportAddress.<init>(Ljava/lang/String;I)V
    at org.apache.flume.sink.elasticsearch.client.ElasticSearchTransportClient.configureHostnames(ElasticSearchTransportClient.java:143)
    at org.apache.flume.sink.elasticsearch.client.ElasticSearchTransportClient.<init>(ElasticSearchTransportClient.java:77)
    at org.apache.flume.sink.elasticsearch.client.ElasticSearchClientFactory.getClient(ElasticSearchClientFactory.java:48)
    at org.apache.flume.sink.elasticsearch.ElasticSearchSink.start(ElasticSearchSink.java:357)
    at org.apache.flume.sink.DefaultSinkProcessor.start(DefaultSinkProcessor.java:46)
    at org.apache.flume.SinkRunner.start(SinkRunner.java:79)
    at org.apache.flume.lifecycle.LifecycleSupervisor$MonitorRunnable.run(LifecycleSupervisor.java:251)
    at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
    at java.util.concurrent.FutureTask.runAndReset(FutureTask.java:308)
    at java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.access$301(ScheduledThreadPoolExecutor.java:180)
    at java.util.concurrent.ScheduledThreadPoolExecutor$ScheduledFutureTask.run(ScheduledThreadPoolExecutor.java:294)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at java.lang.Thread.run(Thread.java:745)
2015-11-16 09:11:22,137 (lifecycleSupervisor-1-3) [WARN - org.apache.flume.lifecycle.LifecycleSupervisor$MonitorRunnable.run(LifecycleSupervisor.java:260)] Component SinkRunner: { policy:org.apache.flume.sink.DefaultSinkProcessor@ce359aa counterGroup:{ name:null counters:{} } } stopped, since it could not besuccessfully started due to missing dependencies

My agent configuration:

# Name the components on this agent
a1.sources = r1
a1.sinks = k1
a1.channels = c1

# Describe/configure the source
a1.sources.r1.type = netcat
a1.sources.r1.bind = localhost
a1.sources.r1.port = 44444

# Describe the sink ES
a1.sinks = k1
a1.sinks.k1.type = elasticsearch
a1.sinks.k1.hostNames = 127.0.0.1:9200,127.0.0.2:9300
a1.sinks.k1.indexName = items
a1.sinks.k1.indexType = item
a1.sinks.k1.clusterName = elasticsearch
a1.sinks.k1.batchSize = 500
a1.sinks.k1.ttl = 5d
a1.sinks.k1.serializer=org.apache.flume.sink.elasticsearch.ElasticSearchDynamicSerializer
a1.sinks.k1.channel = c1

# Use a channel which buffers events in memory
a1.channels.c1.type = memory
a1.channels.c1.capacity = 1000
a1.channels.c1.transactionCapacity = 100

# Bind the source and sink to the channel
a1.sources.r1.channels = c1
a1.sinks.k1.channel = c1

It starts the netcat and all is fine, but I'm afraid about theses warnings, I don't understand it.

Body:
Added below 2 JARs only in flume/lib dir and it worked, do not have to add all other Lucene JARs:

elasticsearch-1.7.1.jar

lucene-core-4.10.4.jar

command to start flume:

bin/flume-ng agent --conf conf --conf-file conf/flume-aggregator.conf --name agent2 -Dflume.root.logger=INFO,console

make sure to add below to flume-env.sh

export JAVA_HOME=/usr/java/default

export JAVA_OPTS="-Xms3072m -Xmx3072m -XX:MaxPermSize=48m -XX:+UseG1GC -XX:MaxGCPauseMillis=20 -XX:InitiatingHeapOccupancyPercent=35 -Dcom.sun.management.jmxremote -Dcom.sun.management.jmxremote.port=5445 -Dcom.sun.management.jmxremote.authenticate=false -Dcom.sun.management.jmxremote.ssl=false"

FLUME_CLASSPATH="/usr/flume/flume1.6/apache-flume-1.6.0-bin/;/usr/flume/flume1.6/apache-flume-1.6.0-bin/lib"

Flume aggregator config to load data in ES : flume-aggregator.conf

agent2.sources = source1
agent2.sinks = sink1
agent2.channels = channel1

################################################
# Describe Source
################################################

# Source Avro
agent2.sources.source1.type = avro
agent2.sources.source1.bind = 0.0.0.0
agent2.sources.source1.port = 9997

################################################
# Describe Interceptors
################################################
# an example of nginx access log regex match
# agent2.sources.source1.interceptors = interceptor1
# agent2.sources.source1.interceptors.interceptor1.type = regex_extractor
#
# agent2.sources.source1.interceptors.interceptor1.regex = "^(\\S+) \\[(.*?)\\] \"(.*?)\" (\\S+) (\\S+)( \"(.*?)\" \"(.*?)\")?"
#
# # agent2.sources.source1.interceptors.interceptor1.regex = ^(.*) ([a-zA-Z\\.\\@\\-\\+_%]+) ([a-zA-Z\\.\\@\\-\\+_%]+) \\[(.*)\\] \\"(POST|GET) ([A-Za-z0-9\\$\\.\\+\\@#%_\\/\\-]*)\\??(.*) (.*)\\" ([a-zA-Z0-9\\.\\/\\s\-]*) (.*) ([0-9]+) ([0-9]+) ([0-9\\.]+)
# # agent2.sources.source1.interceptors.interceptor1.serializers = s1 s2 s3 s4 s5 s6 s7 s8 s9 s10 s11 s12 s13
#
# agent2.sources.source1.interceptors.interceptor1.serializers = s1 s2 s3 s4 s5 s6 s7 s8
# agent2.sources.source1.interceptors.interceptor1.serializers.s1.name = clientip
# agent2.sources.source1.interceptors.interceptor1.serializers.s2.name = datetime
# agent2.sources.source1.interceptors.interceptor1.serializers.s3.name = method
# agent2.sources.source1.interceptors.interceptor1.serializers.s4.name = request
# agent2.sources.source1.interceptors.interceptor1.serializers.s5.name = response
# agent2.sources.source1.interceptors.interceptor1.serializers.s6.name = status
# agent2.sources.source1.interceptors.interceptor1.serializers.s7.name = bytes
# agent2.sources.source1.interceptors.interceptor1.serializers.s8.name = requesttime
#

################################################
# Describe Sink
################################################

# Sink ElasticSearch
# Elasticsearch lib ---> flume/lib
# elasticsearch/config/elasticsearch.yml cluster.name clusterName. data/clustername data.
agent2.sinks.sink1.type = org.apache.flume.sink.elasticsearch.ElasticSearchSink
agent2.sinks.sink1.hostNames = 10.20.156.16:9300,10.20.176.20:9300
agent2.sinks.sink1.indexName = pdi
agent2.sinks.sink1.indexType = pdi_metrics
agent2.sinks.sink1.clusterName = My-ES-CLUSTER
agent2.sinks.sink1.batchSize = 1000
agent2.sinks.sink1.ttl = 2
#this serializer is crucial in order to use kibana
agent2.sinks.sink1.serializer = org.apache.flume.sink.elasticsearch.ElasticSearchLogStashEventSerializer

################################################
# Describe Channel
################################################

# Channel Memory
agent2.channels.channel1.type = memory
agent2.channels.channel1.capacity = 10000000
agent2.channels.channel1.transactionCapacity = 1000

################################################
# Bind the source and sink to the channel
################################################

agent2.sources.source1.channels = channel1
agent2.sinks.sink1.channel = channel1


问:
How can I insert a line break into a <Text> component in React Native?
I want to insert a new line (like \r\n,
) in a Text component in React Native.

If I have:

```<code><text>
<br />
Hi~<br />
this is a test message.<br />
</text>
</code>```

Then React Native renders Hi~ this is a test message.

Is it possible render text to add a new line like so:

```<code>Hi~
this is a test message.
</code>```

答:
I needed a one-line solution branching in a ternary operator to keep my code nicely indented.

{foo ? `First line of text\nSecond line of text` : `Single line of text`}
```

Sublime syntax highlighting helps highlight the line-break character:

Body:
I want to insert a new line (like \r\n,
) in a Text component in React Native.

If I have:

<text>

Hi~

this is a test message.

</text>

Then React Native renders Hi~ this is a test message.

Is it possible render text to add a new line like so:

Hi~
this is a test message.

Body:
I needed a one-line solution branching in a ternary operator to keep my code nicely indented.

{foo ? `First line of text\nSecond line of text` : `Single line of text`}

Sublime syntax highlighting helps highlight the line-break character:


问:
Modify CSS to hide
I need to hide the "Actions" menu from a document library's toolbar. I know in CSS I can use this "{display: none}" syntax to hide.

Can someone please help find me the right place where I need to put this? I found this .ms-actionbar but dont know if this guy belong to list toolbar or site toolbar.

For example:  http://www.xsolive.com/Shared%20Documents/Forms/AllItems.aspx

答:
I always go with experimentation. Just start hiding stuff.

Also if you use chrome, open up the page in question, right click on the element, and select "Inspect element" this will show you it's id/classes etc.

There are similar tools in FF, but I don't really use FF except for testing.

Title: Modify CSS to hide


问:
How to make the left margin "appear" outside the container div?
Notice how when using Bootstrap, the row div inside the container div have the left margin "appear" outside the container div (the left margin is the yellow part):

I tried to replicate this behavior using the following code:

```<code><!DOCTYPE html>

<html>
    <head>
        <style>
            #div1
            {
                width: 500px;
                height: 400px;
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
            }

            #div2
            {
                width: 500px;
                height: 200px;
                background-color: red;
                margin-right: 100px;
                margin-left: 100px;
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <div id="div2">
            </div>
        </div>
    </body>
</html>
</code>```

But it did not work (the left margin stayed inside the container div):

答:
You can do that by using margins with negative value like this:</p>

```<code>.row {
    margin-left: -15px;
    margin-right: -15px;
}
</code>```

Body:
Notice how when using Bootstrap, the row div inside the container div have the left margin "appear" outside the container div (the left margin is the yellow part):

I tried to replicate this behavior using the following code:

<!DOCTYPE html>

But it did not work (the left margin stayed inside the container div):

Body:
You can do that by using margins with negative value like this:

.row {
    margin-left: -15px;
    margin-right: -15px;
}


问:
How to see untrimmed logs on Heroku Local
I'm running a NodeJS app on heroku local, however all my console.log statements and error messages get trimmed.

For example:

```<code>forego | starting web.1 on port 5000
web.1  | module.js:339
</code>```

I don't see the full error logs. How to avoid this trimming of error messages?

答:
heroku local will run whatever processes you tell it to in the Procfile. If you'd like to stream your development log, simply add something like log: tail -f log/development.log to your Procfile. You'll also want to make sure that you create a second Procfile (I use Procfile.dev) for this. Replace the log file path with wherever your desired log file is located.

Cheers!

Body:
I'm running a NodeJS app on heroku local, however all my console.log statements and error messages get trimmed.

For example:

forego | starting web.1 on port 5000
web.1  | module.js:339

I don't see the full error logs. How to avoid this trimming of error messages?