atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title><![CDATA[benIT&#039;s notebook]]></title>
    <link href="/atom.xml" rel="self"/>
    <link href="/"/>
    <updated>2021-10-11T14:01:44+00:00</updated>
    <id>/</id>
        <generator uri="http://sculpin.io/">Sculpin</generator>
            <entry>
            <title type="html"><![CDATA[ssh proxy jump]]></title>
            <link href="/blog/2021/10/11/ssh-proxy-jump"/>
            <updated>2021-10-11T00:00:00+00:00</updated>
            <id>/blog/2021/10/11/ssh-proxy-jump</id>
            <content type="html"><![CDATA[<h2 id="context">Context</h2>

<p>2 machines:</p>

<ul>
<li>one public, available on internet: <code>bastion-server</code></li>
<li>one private, not available on internet: <code>private-server</code></li>
</ul>

<p>The public machine is allow to connect the private with ssh protocol.</p>

<h2 id="setup-ssh-config">Setup ssh config</h2>

<p>The trick is to make use <code>ProxyJump</code> directive in <code>.ssh/config</code>:</p>

<pre><code>Host bastion-server
    User pi
    Hostname bastion-server.com
    Port 22

Host private-server
    User ben 
    Hostname private-server.com
    ProxyJump bastion-server
</code></pre>

<p>NB: public ssh keys must be added to these 2 servers with <code>ssh-copy-id</code> command for instance.</p>

<h2 id="usage">Usage</h2>

<p>We can now execute remote commands on the private server jumping from the bastion server.</p>

<pre><code>ssh private-server hostname
</code></pre>

<p>You can use that to add your computer @IP to the private server. This can be useful when working with a mobile phone as access point:</p>

<pre><code>IP=$(curl -s ifconfig.me) &amp;&amp; DATE=$(date +%Y-%m-%d_%T) &amp;&amp; echo "adding $IP to ufw at $DATE" &amp;&amp; ssh private-server sudo ufw allow from $IP comment ben-sosh-$DATE &amp;&amp; ssh private-server sudo ufw status numbered
</code></pre>

<h2 id="source">Source</h2>

<p>https://www.syloe.com/rebonds-ssh/</p>
]]></content>
        </entry>
            <entry>
            <title type="html"><![CDATA[symfonycasts course notes - The Delightful World of Vue]]></title>
            <link href="/blog/2021/07/22/sfcast-vuejs"/>
            <updated>2021-07-22T00:00:00+00:00</updated>
            <id>/blog/2021/07/22/sfcast-vuejs</id>
            <content type="html"><![CDATA[<h1 id="about">About</h1>

<p>This is raw notes from the great symfony cast course "The Delightful World of Vue". 
Content have been fully copied/pasted from the official <a href="https://symfonycasts.com/screencast/vue">public resource</a>.</p>

<h1 id="notes">Notes</h1>

<p>...</p>

<h2 id="21----where-should-a-piece-of-data-live%3F">21  - Where should a Piece of Data Live?</h2>

<p>https://symfonycasts.com/screencast/vue/data-location#play- 
Earlier, I said that you should never, ever change the value of a prop. Props are meant to be read but not modified</p>

<p>What is the purpose of the special mounted() function in Vue?</p>

<p>https://symfonycasts.com/screencast/vue/ajax/activity/376</p>

<p>That's right. It's a special event callback that you can define in your components to do stuff just after a component is mounted in the DOM.</p>

<p>https://symfonycasts.com/screencast/vue/loading/activity/380</p>

<h2 id="28---loading-component">28 - Loading Component</h2>

<p>https://symfonycasts.com/screencast/vue/loading</p>

<p>created will execute as soon as the component is instantiated. Even though the DOM structure still isn't mounted, you can still perform any other operations that deal with reactive data!</p>

<p>mounted, on the other hand, will be executed once the component has been mounted in the DOM. This is useful for any edge case when you need to manipulate the DOM directly!</p>

<h2 id="39---hoisting-data-up">39 - Hoisting Data Up</h2>

<p>https://symfonycasts.com/screencast/vue/hoist-data#play</p>

<p>This is a fairly common situation: you start by putting your data in one component, then later you need to move it higher so that more parts of your app can use it. We did this once earlier: we moved the collapsed boolean data from Sidebar up to Products so that we could use it in more places.</p>

<h2 id="47---watchers%3A-the-good%2C-the-bad-%26-the-useful%21">47 - Watchers: The Good, The Bad &amp; The Useful!</h2>

<p>https://symfonycasts.com/screencast/vue/watcher#play</p>

<p>watcher! Very simply: a watcher is a function that's called by Vue whenever a specific prop or data changes.</p>
]]></content>
        </entry>
            <entry>
            <title type="html"><![CDATA[NFS setup]]></title>
            <link href="/blog/2021/05/18/nfs-setup"/>
            <updated>2021-05-18T00:00:00+00:00</updated>
            <id>/blog/2021/05/18/nfs-setup</id>
            <content type="html"><![CDATA[<p><a href="https://www.digitalocean.com/community/tutorials/how-to-set-up-an-nfs-mount-on-ubuntu-20-04">Source</a>.</p>

<p>In this article, there are 2 linux machines: <code>desktop</code> &amp; <code>laptop</code>.</p>

<p>The desktop machine can be accessed via @IP or using <code>desktop.local</code> alias.</p>

<h2 id="host">Host</h2>

<h3 id="%C2%A0install"> Install</h3>

<pre><code>sudo apt install nfs-kernel-server
</code></pre>

<p>Configure clients access to host share in <code>/etc/exports</code> :</p>

<pre><code>/home  192.168.1.0/24(rw,sync,no_root_squash,no_subtree_check)
</code></pre>

<p>restart service:</p>

<pre><code> service nfs-kernel-server restart
</code></pre>

<h2 id="client">Client</h2>

<h3 id="install">Install</h3>

<pre><code>sudo apt install nfs-common
</code></pre>

<h3 id="create-a-directory">Create a directory</h3>

<pre><code>sudo mkdir -p /mnt/nfs_share_desktop
sudo chown $USER: /mnt/nfs_share_desktop/
</code></pre>

<h3 id="mount">Mount</h3>

<pre><code>sudo mount desktop.local:/home/ben/ /mnt/nfs_share_desktop/
</code></pre>

<p>or via <code>/etc/fstab</code>:</p>

<pre><code>desktop.local:/home               /mnt/nfs_share_desktop      nfs auto,nofail,noatime,nolock,intr,tcp,actimeo=1800 0 0
</code></pre>

<p>finally:</p>

<pre><code>sudo mount -a    
</code></pre>
]]></content>
        </entry>
            <entry>
            <title type="html"><![CDATA[symfonycasts course notes - JavaScript for PHP Geeks: ES6/ES2015 (New JavaScript)]]></title>
            <link href="/blog/2021/05/07/ES6"/>
            <updated>2021-05-07T00:00:00+00:00</updated>
            <id>/blog/2021/05/07/ES6</id>
            <content type="html"><![CDATA[<h2 id="1---ecmascript-2015-%2F-es6-%2F-harmony-%2F-cookies">1 - ECMAScript 2015 / ES6 / Harmony / Cookies</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/ecmascript-es6-harmony</p>

<p>JavaScript is not a language like PHP that has one core code. In reality, JavaScript is nothing more than a standard. When a new version of JavaScript is released, it simply means that the core group has said:</p>

<pre><code>Here are some functions and language changes that we think would make JavaScript more hipster. Now, quick, everyone go and implement these!
</code></pre>

<p>And guess what? The language isn't even called JavaScript! It's called ECMAScript. And there is a group of smart people that work on new versions of ECMAScript. But unlike PHP, that doesn't mean they're writing code: they're simply deciding what should be included in the next version. Then, it's up to each browser and JavaScript engine to implement that. But as we will learn later... some smart people in the JS world have found a way around needing to wait for browser support...</p>

<h2 id="2---arrow-functions">2 - Arrow Functions</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/arrow-functions#play</p>

<p>You will see the first big feature or ES2015 used everywhere... and at first, it looks weird. Very simply, there is a new, shorter syntax for creating anonymous functions.</p>

<p>In ES2015, we can remove the word function, and add an "equal arrow" (=>) after the arguments:</p>

<pre><code>$.ajax({
            url: Routing.generate('rep_log_list'),
        }).then(function(data) {
            $.each(data.items, function(key, repLog) {
                self._addRow(repLog);
            });
        })
</code></pre>

<p>equivalent:</p>

<pre><code> $.ajax({
            url: Routing.generate('rep_log_list'),
        }).then((data) =&gt; {
            $.each(data.items, function(key, repLog) {
                self._addRow(repLog);
            });
        })
</code></pre>

<h3 id="%C2%A0the-arrow-function%27s-secret-superpower-this"> The Arrow Function's (Secret) Superpower (this)</h3>

<p>It turns out, a classic anonymous function and the new arrow function do have one difference: when you use an arrow function, the this variable is preserved. That's awesome news, and it's why I now use the arrow function everywhere in my code.</p>

<p>We can finally remove this silly var = self thing. And instead, below, use this</p>

<h3 id="arrow-functions-everywhere%21">Arrow Functions Everywhere!</h3>

<p>Here, we're not using this, but I like to stay consistent and use the arrow function everywhere.</p>

<h3 id="arrow-function-without-a-body">Arrow Function without a Body</h3>

<p>In this case, the arrow function is nothing more than a single return statement. In this situation, to be extra fancy, you can remove the function body and return statement entirely:</p>

<pre><code>       swal({
            preConfirm: () =&gt; {
                return this._deleteRepLog($link);
            }
</code></pre>

<p>equivalent to:</p>

<pre><code>swal({
        preConfirm: () =&gt; this._deleteRepLog($link)
});
</code></pre>

<p>When you don't have the curly braces, it means that this value will be returned. It looks weird at first, but it means the same thing that we had before. You will see this kind of stuff in code examples.</p>

<h2 id="4---var-versus-let%3A-scope%21">4 - var Versus let: Scope!</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/var-let-scope#play</p>

<p>And this is the difference between var and let. With var - just like with any variable in PHP - a variable's scope is the function it's inside of, plus any embedded functions.</p>

<p>But let is different: it's said to be "block-scoped". That means that anytime you have a new open curly brace ({) - like an if statement or for loop - you've entered a new scope for let. In this case, let is equal to 42, only inside of the if statement. Outside, it's a completely different variable, which is set to 10.</p>

<h2 id="5---var-versus-let%3A-hoisting%21">5 - var Versus let: Hoisting!</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/var-let-hoisting#play</p>

<p>When you use var to initialize a variable, when JavaScript executes, it basically finds all of your var variables, goes to the top of that variable's scope - usually the top of whatever function it's inside of, but in this case, it's the top of the file - and effectively does this: var aGreatNumber. That initializes the variable, but doesn't set it to any value. This is called variable hoisting: and it's the reason that we get undefined instead of an error when we try to use a variable that's declared with var... before it's declared.</p>

<p>But when we change this to let, we already saw that this does throw a ReferenceError. And that's kinda great! I mean, isn't that what we would expect to happen when we reference a variable that hasn't been created yet!</p>

<h2 id="6---const-versus-let">6 - const Versus let</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/const#play</p>

<p>As far as scope goes, const and let work the same. So really, const and let are identical... except that you can't modify a const variable.</p>

<p>Here's the truth: when you use const, it's not that the value of that variable can't change. The object can change. Instead, using const means that you cannot reassign the aGreatObject variable to something else in memory. It must be assigned only once, to this object. But after that, the object is free to change.</p>

<h2 id="7---object-literals-%26-optional-args">7 - Object Literals &amp; Optional Args</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/object-literals-optional-args</p>

<h3 id="object-keys...-without-the-key">Object Keys... without the Key</h3>

<p>Well, in ES2015, if your key and your value are the same, you can just leave off the key:</p>

<pre><code>            $.ajax({
                url: url,
                method: 'POST',
                data: JSON.stringify(data)
            })
</code></pre>

<p>is equivalent to :</p>

<pre><code>            $.ajax({
                url,
                method: 'POST',
                data: JSON.stringify(data)
            })
</code></pre>

<h3 id="short-method-syntax">Short Method Syntax</h3>

<pre><code>loadRepLogs: function() {
},
</code></pre>

<p>is equivalent to :</p>

<pre><code> loadRepLogs() {
    },
</code></pre>

<h3 id="optional-args">Optional Args</h3>

<pre><code>getTotalWeightString(maxWeight = 500)
</code></pre>

<h2 id="8---legit-javascript-classes">8 - Legit JavaScript Classes</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/class-syntax#play</p>

<pre><code>class Helper {
    constructor($wrapper) {
        this.$wrapper = $wrapper;
    }
    calculateTotalWeight() {
        let totalWeight = 0;
        this.$wrapper.find('tbody tr').each((index, element) =&gt; {
            totalWeight += $(element).data('weight');
        });
        return totalWeight;
    }
}
</code></pre>

<h2 id="%C2%A09---static-class-methods"> 9 - Static Class Methods</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/static-class-methods#play</p>

<p>declare a static method:</p>

<pre><code>    static _calculateWeights($elements) {
    }
</code></pre>

<p>call it referencing the class name:</p>

<pre><code>Helper._calculateWeights(this.$wrapper.find('tbody tr'));
</code></pre>

<h2 id="10---class-inheritance-and-super-calls">10 - Class Inheritance and super Calls</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/extends-super-calls#play</p>

<pre><code>class AGreatClass {
    constructor(greatNumber) {
        this.greatNumber = greatNumber;
    }
    returnGreatThings() {
        return this.greatNumber;
    }
}
class AnotherGreatClass extends AGreatClass{
    constructor(greatNumber, greatWord) {
        super(greatNumber); //call parent constructor
        this.greatWord = greatWord;
    }
    returnGreatThings() {
        let greatNumber = super.returnGreatThings();
        return [greatNumber, this.greatWord];
    }
}
const aGreatObject = new AnotherGreatClass(42, 'adventure');
console.log(
    aGreatObject.returnGreatThings()
);
</code></pre>

<h2 id="11---destructuring">11 - Destructuring</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/destructuring</p>

<pre><code>        let {id, itemLabel, reps} = repLog;
</code></pre>

<p>Yep, this weird line is actually going to create three new variables - id, itemLabel, and reps - set to the values of the id, itemLabel and reps keys in repLog.</p>

<h2 id="12---the...-spread-operator">12 - The... Spread Operator</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/spread-operator#play</p>

<pre><code>let printThreeThings = function(thing1, thing2, thing3) {
    console.log(thing1, thing2, thing3);
};
let yummyThings = ['pizza', 'gelato', 'sushi'];
printThreeThings(...yummyThings)
</code></pre>

<h3 id="%C2%A0spread-operator-as-an-array-merge"> Spread Operator as an Array Merge</h3>

<pre><code>let yummyThings = ['pizza', 'gelato', 'sushi', 'cheeseburger'];
let greatThings = ['swimming', 'sunsets', ...yummyThings, 'New Orleans'];
</code></pre>

<h3 id="spread-operator-for-creating-a-new-array">Spread Operator for Creating a new Array</h3>

<pre><code>let yummyThings = ['pizza', 'gelato', 'sushi', 'cheeseburger'];
let greatThings = ['swimming', 'sunsets', ...yummyThings, 'New Orleans'];
let copyOfGreatThings = greatThings;
copyOfGreatThings.push('summer');
console.log(greatThings);
console.log(copyOfGreatThings);
</code></pre>

<p>Here's the question: we know summer now lives in copyOfGreatThings(). But does it also now live inside of greatThings? Try it! It does! Summer lives in both arrays! And this makes sense: arrays are objects in JavaScript, and just like in PHP, objects are passed by reference. In reality, greatThings and copyOfGreatThings are identical: they both point to the same array in memory.</p>

<pre><code>let yummyThings = ['pizza', 'gelato', 'sushi', 'cheeseburger'];
let greatThings = ['swimming', 'sunsets', ...yummyThings, 'New Orleans'];
let copyOfGreatThings = [...greatThings];
</code></pre>

<p>And that is it! This will create a new array, and then put each item from greatThings into it, one-by-one.</p>

<p>Try it! Yes! We can see summer in the copy, but we did not modify the original array.</p>

<h2 id="13---template-strings">13 - Template Strings</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/template-strings#play</p>

<p>This is the way we used to do things in JavaScript. But no more! Thanks to ES2015, we now have something called Template Strings. And it's awesome. Instead of quotes, use a tick. And as soon as you do that, you're allowed to put variables inside of your string! Remove this single quote plus garbage. Replace it with ${, the variable name, then }</p>

<pre><code>const favoriteFood = 'gelato';
const iLoveFood = `The year is ${(new Date()).getFullYear()} and my favorite food is ${favoriteFood}`;
console.log(iLoveFood);
</code></pre>

<h3 id="%C2%A0turning-our-template-into-a-function"> Turning our Template into a Function</h3>

<pre><code>    const rowTemplate = (repLog) =&gt; `
&lt;tr data-weight="${repLog.totalWeightLifted}"&gt;
    &lt;td&gt;${repLog.itemLabel}&lt;/td&gt;
    &lt;td&gt;${repLog.reps}&lt;/td&gt;
    &lt;td&gt;${repLog.totalWeightLifted}&lt;/td&gt;
    &lt;td&gt;
    &lt;a href="#"
       class="js-delete-rep-log"
       data-url="${repLog.links._self}"
    &gt;
        &lt;span class="fa fa-trash"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;/td&gt;
&lt;/tr&gt;
`;


const html = rowTemplate(repLog);
</code></pre>

<h2 id="14---the-for-of-loop">14 - The for of Loop</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/for-of-loop#play</p>

<pre><code>for (let repLog of data.items) {
    this._addRow(repLog);
}
</code></pre>

<h2 id="15---map-and-weakmap">15 - Map and WeakMap</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/map-weak-map</p>

<pre><code>let foods = new Map();
foods.set('italian', 'gelato');
foods.set('mexican', 'tortas');




foods.set('canadian', 'poutine');
let southernUsStates = ['Tennessee', 'Kentucky', 'Texas'];
foods.set(southernUsStates, 'hot chicken');
console.log(
    foods.get('italian'),
    foods.get(southernUsStates),
    foods.size
);
</code></pre>

<h2 id="16---private-variables-%26-weakmap">16 - Private Variables &amp; WeakMap</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/private-vars-weak-map#play</p>

<p>For us it means we should use Map in normal situations... and WeakMap only if we find ourselves with this problem.</p>

<h2 id="17---array%2C-set-and-es2016">17 - Array, Set and ES2016</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/array-setf</p>

<pre><code>let foods = []; //same as  new Array();
foods.push('gelato');
foods.push('tortas');
foods.push('gelato');
console.log(foods);
</code></pre>

<h3 id="introducing-set">Introducing Set</h3>

<pre><code>let foods = new Set();
foods.add('gelato');
foods.add('tortas');
foods.add('gelato');
console.log(foods);
</code></pre>

<p>That's the key difference between Array and Set: Set should be used when you need a unique collection of items. It automatically makes sure that duplicates aren't added.</p>

<h2 id="18----yarn-%26-npm%3A-installing-babel">18 -  yarn &amp; npm: Installing Babel</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/npm-yarn#play</p>

<p>In a nut shell, Babel reads new JavaScript code, i.e. ES2015 code, and recompiles it to old JavaScript so that all browsers can understand it. Yea, it literally reads source code and converts it to different source code. It's wild!</p>

<p>yarn add babel-cli --dev</p>

<h2 id="19---babel%3A-transpiling-to-old-javascript">19 - Babel: Transpiling to Old JavaScript</h2>

<p>https://symfonycasts.com/screencast/javascript-es6/babel#play</p>

<pre><code>yarn add babel-preset-env --dev
</code></pre>

<p>.babelrc:</p>

<pre><code>{
  "presets": ["env"]
}
</code></pre>

<h3 id="%C2%A0babel-and-the-polyfill"> babel-and-the-polyfill</h3>

<p>abel's job is to convert all the new language constructs and syntaxes to the old version. But if there are new objects or functions, it leaves those. Instead, you should use something called a polyfill. Specifically, babel-polyfill. This is another JavaScript library that adds missing functionality, like WeakMap, if it doesn't exist in whatever browser is running our code.</p>
]]></content>
        </entry>
            <entry>
            <title type="html"><![CDATA[symfonycasts course notes - JavaScript for PHP Geeks]]></title>
            <link href="/blog/2021/03/24/sfcast-javascript"/>
            <updated>2021-03-24T00:00:00+00:00</updated>
            <id>/blog/2021/03/24/sfcast-javascript</id>
            <content type="html"><![CDATA[<h1 id="about">About</h1>

<p>This is raw notes from the great symfony cast course "JavaScript for PHP Geeks". 
Content have been fully copied/pasted from the official <a href="https://symfonycasts.com/screencast/javascript">public resource</a>.</p>

<h1 id="notes">Notes</h1>

<h2 id="1---lift-stuff%21-the-js--prefix">1 - Lift Stuff! The js- Prefix</h2>

<p>https://symfonycasts.com/screencast/javascript/js-class-prefix
Our goal is the second, and by prefixing the class with js-, it makes that crystal clear. This is a fairly popular standard: when you add a class for JavaScript, give it a js- prefix so that future you doesn't need to wonder which classes are for styling and which are for JavaScript. Future you will... thank you.</p>

<p>https://symfonycasts.com/screencast/javascript/js-class-prefix</p>

<pre><code>&lt;a href="#" class="js-delete-rep-log"&gt;
    &lt;span class="fa fa-trash"&gt;&lt;/span&gt;
&lt;/a&gt;

    &lt;script&gt;
        $('.js-delete-rep-log').on('click', function() {
            console.log('todo delete!');
        });
    &lt;/script&gt;
</code></pre>

<h2 id="2---document.ready-%26-ordering">2 - (document).ready() &amp; Ordering</h2>

<p>https://symfonycasts.com/screencast/javascript/document-ready-ordering</p>

<p>put js at the bottom surrounded by  a <code>$(document).ready(function()</code>:</p>

<pre><code>    
    &lt;script&gt;
    $(document).ready(function() {
        $('.js-delete-rep-log').on('click', function () {
            console.log('todo delete!');
        });
    });
    &lt;/script&gt;
</code></pre>

<h2 id="3---all-about-event-bubbling">3 - All about Event Bubbling</h2>

<p>https://symfonycasts.com/screencast/javascript/event-bubbling#play</p>

<p>So the $ in $table isn't doing anything special, but it is a fairly common convention to denote a variable that is a jQuery object.</p>

<pre><code>    
    &lt;script&gt;
        $(document).ready(function() {
            var $table = $('.js-rep-log-table');
            $table.find('.js-delete-rep-log').on('click', function () {
                console.log('todo delete!');
            });
            $table.find('tbody tr').on('click', function() {
                console.log('row clicked!');
            });
        });
    &lt;/script&gt;
</code></pre>

<h2 id="4---the-event-argument-%26-stoppropagation">4 - The Event Argument &amp; stopPropagation</h2>

<p>https://symfonycasts.com/screencast/javascript/event-propagation</p>

<p>It turns out that when you return false from a listener function, it is equivalent to calling e.preventDefault() and e.stopPropagation(). To prove it, remove the return false and refresh:</p>

<pre><code>    
    &lt;script&gt;
    $(document).ready(function() {
        var $table = $('.js-rep-log-table');
        $table.find('.js-delete-rep-log').on('click', function (e) {
            e.preventDefault();
            console.log('todo delete!');
        });
        $table.find('tbody tr').on('click', function() {
            console.log('row clicked!');
        });
    });
    &lt;/script&gt;
</code></pre>

<p>e.preventDefault() versus e.stopPropagation()</p>

<p>The e.preventDefault() says: don't do the default, browser behavior for this event. Normally, when you "click" a "link", your browser navigates to its href... which is a #. So cool, e.preventDefault() stops that! But e.stopPropagation() tells your browser to not bubble this event any further up the DOM tree. And that's probably not what you want. Do you really want your event listener to be so bold that it decides to prevent all other listeners from firing? I've literally never had a use-case for this.</p>

<pre><code>    
    &lt;script&gt;
    $(document).ready(function() {
        var $table = $('.js-rep-log-table');
        $table.find('.js-delete-rep-log').on('click', function (e) {
            e.preventDefault();
            console.log('todo delete!');
        });
        $table.find('tbody tr').on('click', function() {
            console.log('row clicked!');
        });
    });
    &lt;/script&gt;
</code></pre>

<h2 id="5---the-dom-element-object">5 - The DOM Element Object</h2>

<p>https://symfonycasts.com/screencast/javascript/dom-element-object#play</p>

<p>Using e.target</p>

<p>Because there's another way to find out which element was clicked... a better way, and it involves our magical e event argument. Just say $(e.target). target is a property on the event object that points to the actual element that was clicked. Then, .addClass('text-danger'):</p>

<p>Actually, no... our browser is kinda lying to us: e.target is a DOM Element object. Google for that and find the W3Schools page all about it. You see, every element on the page is represented by a JavaScript object, a DOM Element object.</p>

<pre><code>$(e.target).addClass('text-danger');
</code></pre>

<p>&lt;=>
    e.target.className = e.target.className+' text-danger';</p>

<h2 id="6---the-magical-this-variable-%26-currenttarget">6 - The Magical this Variable &amp; currentTarget</h2>

<p>https://symfonycasts.com/screencast/javascript/this-current-target#play</p>

<p>this is equivalent to e.currentTarget, the DOM Element that we originally attached our listener to.
Ultimately that means that we can say, $(this).addClass('text-danger'):
So, use the this variable, it's your friend. But realize what's going on: this is just a shortcut to e.currentTarget. That fact is going to become critically important in just a little while.</p>

<pre><code>    
    &lt;script&gt;
    $(document).ready(function() {
        var $table = $('.js-rep-log-table');
        $table.find('.js-delete-rep-log').on('click', function (e) {
            e.preventDefault();
            $(this).addClass('text-danger');
            $(this).find('.fa')
                .removeClass('fa-trash')
                .addClass('fa-spinner')
                .addClass('fa-spin');
        });
        $table.find('tbody tr').on('click', function() {
            console.log('row clicked!');
        });
    });
    &lt;/script&gt;
</code></pre>

<h2 id="7---a-great-place-to-hide-things%21-the-data--attributes">7 - A Great Place to Hide Things! The data- Attributes</h2>

<p>https://symfonycasts.com/screencast/javascript/data-attribute</p>

<p>Adding a data-url Attribute</p>

<p>This is a really common problem, and the solution is to somehow attach extra metadata to our DOM about the RepLog, so we can read it in JavaScript. And guess what! There's an official, standard, proper way to do this! It's via a data attribute. Yep, according to those silly "rules" of the web, you're not really supposed to invent new attributes for your elements. Well, unless the attribute starts with data-, followed by lowercase letters. That's totally allowed!</p>

<pre><code>    
    &lt;script&gt;
    $(document).ready(function() {
        var $table = $('.js-rep-log-table');
        $table.find('.js-delete-rep-log').on('click', function (e) {
            e.preventDefault();
            $(this).addClass('text-danger');
            $(this).find('.fa')
                .removeClass('fa-trash')
                .addClass('fa-spinner')
                .addClass('fa-spin');
            var deleteUrl = $(this).data('url');
            var $row = $(this).closest('tr');
            var $totalWeightContainer = $table.find('.js-total-weight');
            var newWeight = $totalWeightContainer.html() - $row.data('weight');
            $.ajax({
                url: deleteUrl,
                method: 'DELETE',
                success: function() {
                    $row.fadeOut();
                    $totalWeightContainer.html(newWeight);
                }
            });
        });
        $table.find('tbody tr').on('click', function() {
            console.log('row clicked!');
        });
    });
    &lt;/script&gt;
</code></pre>

<h2 id="8---organizing-with-objects%21">8 - Organizing with Objects!</h2>

<p>https://symfonycasts.com/screencast/javascript/javascript-objects</p>

<p>Don't Call your Handler Function: Pass It</p>

<p>There's one teenie detail I want you to notice: when we specify the event callback, this.handleRepLogDelete - we're not executing it:
I mean, there are no () on the end of it. Nope, we're simply passing the function as a reference to the on() function. If you forget and add (), things will get crazy.</p>

<pre><code>    
    &lt;script&gt;
    var RepLogApp = {
        initialize: function($wrapper) {
            this.$wrapper = $wrapper;
            this.$wrapper.find('.js-delete-rep-log').on(
                'click',
                this.handleRepLogDelete
            );
            this.$wrapper.find('tbody tr').on(
                'click',
                this.handleRowClick
            );
        },
        handleRepLogDelete: function(e) {
            e.preventDefault();
            $(this).addClass('text-danger');
            $(this).find('.fa')
                .removeClass('fa-trash')
                .addClass('fa-spinner')
                .addClass('fa-spin');
            var deleteUrl = $(this).data('url');
            var $row = $(this).closest('tr');
            var $totalWeightContainer = this.$wrapper.find('.js-total-weight');
            var newWeight = $totalWeightContainer.html() - $row.data('weight');
            $.ajax({
                url: deleteUrl,
                method: 'DELETE',
                success: function() {
                    $row.fadeOut();
                    $totalWeightContainer.html(newWeight);
                }
            });
        },
        handleRowClick: function() {
            console.log('row clicked!');
        }
    };
    $(document).ready(function() {
        var $table = $('.js-rep-log-table');
        RepLogApp.initialize($table);
    });
    &lt;/script&gt;
</code></pre>

<h2 id="%C2%A09---%22static%22-objects-%26-the-this-variable"> 9 - "Static" Objects &amp; the this Variable</h2>

<p>https://symfonycasts.com/screencast/javascript/static-objects-this#play</p>

<p>When this is not this</p>

<p>Here's the deal: whenever you are in a callback function, like the success callback of an AJAX call, the callback of an event listener, or even when passing a callback to the setTimeout() function, the this variable in your callback changes to be something else. And we already knew that! We know that this in our event handler is actually a reference to the DOM Element object that was clicked. So the this variable in handleRepLogDelete is not our RepLogApp object, even though we're inside of that object. Creepy!</p>

<p>We're going to talk a lot more about this situation... in a moment.
Referencing your Object "Statically"</p>

<p>Fortunately, for now, the fix is easy. If you think about it, the RepLogApp object is very similar to a class in PHP that has only static properties and methods. I mean, could we create multiple RepLogApp objects? Nope! There can only ever be one. And because of that, each property - like $wrapper - acts like a static property: you set and access it, but it's attached to our "static", single object: RepLogApp, not to an individual instance of RepLogApp.</p>

<pre><code>    
    &lt;script&gt;
    var RepLogApp = {
        initialize: function($wrapper) {
            this.$wrapper = $wrapper;
            this.$wrapper.find('.js-delete-rep-log').on(
                'click',
                this.handleRepLogDelete
            );
            this.$wrapper.find('tbody tr').on(
                'click',
                this.handleRowClick
            );
        },
        updateTotalWeightLifted: function() {
            var totalWeight = 0;
            this.$wrapper.find('tbody tr').each(function() {
                totalWeight += $(this).data('weight');
            });
            this.$wrapper.find('.js-total-weight').html(totalWeight);
        },
        handleRepLogDelete: function(e) {
            e.preventDefault();
            $(this).addClass('text-danger');
            $(this).find('.fa')
                .removeClass('fa-trash')
                .addClass('fa-spinner')
                .addClass('fa-spin');
            var deleteUrl = $(this).data('url');
            var $row = $(this).closest('tr');
            $.ajax({
                url: deleteUrl, 
                method: 'DELETE',
                success: function() {
                    $row.fadeOut('normal', function() {
                        $row.remove();
                        RepLogApp.updateTotalWeightLifted();
                    });
                }
            });
        },
        handleRowClick: function() {
            console.log('row clicked!');
        }
    };
    $(document).ready(function() {
        var $table = $('.js-rep-log-table');
        RepLogApp.initialize($table);
    });
    &lt;/script&gt;
</code></pre>

<h2 id="%C2%A010---getting-to-the-bottom-of-the-this-variable"> 10 - Getting to the bottom of the this Variable</h2>

<p>https://symfonycasts.com/screencast/javascript/understanding-this-magic#play</p>

<p>How do I Know what this Is?</p>

<p>Here's the deal: when you call a function in JavaScript, you can choose to change what this is inside of that function when you call it. That means you could have one function and 10 different people could call your function and decide to set this to 10 different things.</p>

<p>Now, in reality, it's not that bad. But we do need to remember one rule of thumb: whenever you have a callback function - meaning someone else is calling a function after something happens - this will have changed. We've already seen this a lot: in the click functions, inside of .each(), inside of success and even inside of $row.fadeOut():</p>

<pre><code>    
    &lt;script&gt;
        var RepLogApp = {
            initialize: function($wrapper) {
                this.$wrapper = $wrapper;
                this.$wrapper.find('.js-delete-rep-log').on(
                    'click',
                    this.handleRepLogDelete
                );
                this.$wrapper.find('tbody tr').on(
                    'click',
                    this.handleRowClick
                );
                var newThis = {cat: 'meow', dog: 'woof'};
                this.whatIsThis.call(newThis, 'hello');
            },
            whatIsThis: function(greeting) {
                console.log(this, greeting);
            },
            updateTotalWeightLifted: function() {
                var totalWeight = 0;
                this.$wrapper.find('tbody tr').each(function() {
                    totalWeight += $(this).data('weight');
                });
                this.$wrapper.find('.js-total-weight').html(totalWeight);
            },
            handleRepLogDelete: function(e) {
                e.preventDefault();
                $(this).addClass('text-danger');
                $(this).find('.fa')
                    .removeClass('fa-trash')
                    .addClass('fa-spinner')
                    .addClass('fa-spin');
                var deleteUrl = $(this).data('url');
                var $row = $(this).closest('tr');
                $.ajax({
                    url: deleteUrl,
                    method: 'DELETE',
                    success: function() {
                        $row.fadeOut('normal', function() {
                            $(this).remove();
                            RepLogApp.updateTotalWeightLifted();
                        });
                    }
                });
            },
            handleRowClick: function() {
                console.log('row clicked!');
            }
        };
        $(document).ready(function() {
            var $table = $('.js-rep-log-table');
            RepLogApp.initialize($table);
        });
    &lt;/script&gt;
</code></pre>

<h2 id="11---fixing-%22this%22-with-bind">11 - Fixing "this" with bind()</h2>

<p>https://symfonycasts.com/screencast/javascript/fixing-this-bind#play</p>

<p>But wow, that's a lot of work, and it'll be a bit ugly! Instead, there's a simpler way. First, realize that whenever you have an anonymous function, you could refactor it into an individual method on your object. If we did that, then I would recommend binding that function so that this is the RepLogApp object inside.</p>

<p>But if that feels like overkill and you want to keep using anonymous functions, then simply go above the callback and add var self = this</p>

<p>Use bind() to make sure that this is always this inside any methods in your object.
Make sure to reference your object with this, instead of your object's name. This isn't an absolute rule, but unless you know what you're doing, this will give you more flexibility in the long-run.</p>

<pre><code>    
    &lt;script&gt;
        var RepLogApp = {
            initialize: function($wrapper) {
                this.$wrapper = $wrapper;
                this.$wrapper.find('.js-delete-rep-log').on(
                    'click',
                    this.handleRepLogDelete.bind(this)
                );
                this.$wrapper.find('tbody tr').on(
                    'click',
                    this.handleRowClick.bind(this)
                );
            },
            updateTotalWeightLifted: function() {
                var totalWeight = 0;
                this.$wrapper.find('tbody tr').each(function() {
                    totalWeight += $(this).data('weight');
                });
                this.$wrapper.find('.js-total-weight').html(totalWeight);
            },
            handleRepLogDelete: function(e) {
                e.preventDefault();
                var $link = $(e.currentTarget);
                $link.addClass('text-danger');
                $link.find('.fa')
                    .removeClass('fa-trash')
                    .addClass('fa-spinner')
                    .addClass('fa-spin');
                var deleteUrl = $link.data('url');
                var $row = $link.closest('tr');
                var self = this;
                $.ajax({
                    url: deleteUrl,
                    method: 'DELETE',
                    success: function() {
                        $row.fadeOut('normal', function() {
                            $(this).remove();
                            self.updateTotalWeightLifted();
                        });
                    }
                });
            },
            handleRowClick: function() {
                console.log('row clicked!');
            }
        };
        $(document).ready(function() {
            var $table = $('.js-rep-log-table');
            RepLogApp.initialize($table);
        });
    &lt;/script&gt;
</code></pre>

<h2 id="%C2%A012---immediately-invoked-function-expression%21"> 12 - Immediately Invoked Function Expression!</h2>

<p>https://symfonycasts.com/screencast/javascript/immediately-invoked-function-expression</p>

<p>There are two things to check out. First, all we're doing is creating a function: it starts on top, and ends at the bottom with the }. But by adding the (), we are immediately executing that function. We're creating a function and then calling it!</p>

<p>Why on earth would we do this? Because! Variable scope in JavaScript is function based. When you create a variable with var, it's only accessible from inside of the function where you created it. If you have functions inside of that function, they have access to it too, but ultimately, that function is its home.</p>

<p>Before, when we weren't inside of any function, our two variables effectively became global: we could access them from anywhere. But now that we're inside of a function, the RepLogApp and Helper variables are only accessible from inside of this self-executing function.</p>

<p>This means that when we refresh, we get Helper is not defined. We just made the Helper variable private!</p>

<h2 id="13---the-window-object-%26-global-variables">13 - The window Object &amp; Global Variables</h2>

<p>https://symfonycasts.com/screencast/javascript/window-global-vars#play</p>

<p>Inside of our self-executing function, we - of course - also have access to any global variables, like window or the $ jQuery variable. But, instead of relying on these global variables, you'll often see people pass those variables into the function. It's a little weird, so let's see it.</p>

<pre><code>(function(window, $) {
    //...
})(window, jQuery);
</code></pre>

<p>Forget var? It goes Global!</p>

<p>To tell JavaScript to stop being such a pushover, at the top of the RepLogApp.js file, inside quotes, say 'use strict':</p>

<pre><code>'use strict';
</code></pre>

<h2 id="15---the-object-prototype%21">15 - The Object prototype!</h2>

<p>https://symfonycasts.com/screencast/javascript/object-prototype</p>

<p>Introducing the Prototype</p>

<p>To fix this, instead of adding the method via Helper.calculateTotalWeight, we need to say Helper.prototype.calculateTotalWeight:</p>

<pre><code>Helper.prototype.calculateTotalWeight = function() {
...
};
</code></pre>

<h2 id="16---prototype-versus-__proto__">16 - prototype Versus <strong>proto</strong></h2>

<p>https://symfonycasts.com/screencast/javascript/prototype-proto</p>

<p>Here's the point of all of this: you do want to setup your objects so that they can be instantiated. And now we know how to do this. First, set your variable to a function: this
 will become the constructor:</p>

<pre><code>var Helper = function ($wrapper) {
};
</code></pre>

<p>And second, add any methods or properties you need under the prototype key:</p>

<pre><code>Helper.prototype.calculateTotalWeight = function() {
    var totalWeight = 0;
    this.$wrapper.find('tbody tr').each(function () {
        totalWeight += $(this).data('weight');
    });
    return totalWeight;
    };
</code></pre>

<h2 id="17---extending-the-prototype">17 - Extending the Prototype</h2>

<p>https://symfonycasts.com/screencast/javascript/extend-prototype#play</p>

<p>From now on, we'll pretty much be adding everything to the prototype key. But, it does get a little bit annoying to always need to say Helper.prototype.something = for every method.
No worries! We can shorten this with a shortcut that's similar to PHP's array_merge() function. Use $.extend() and pass it Helper.prototype and then a second object containing all of the properties you want to merge into that object. In other words, move our calculateTotalWeight() function into this and update it to be calculateTotalWeight: function:</p>

<pre><code>$.extend(window.RepLogApp.prototype, {
    updateTotalWeightLifted: function () {
        this.$wrapper.find('.js-total-weight').html(
            this.helper.calculateTotalWeight()
        );
    },

...
}
</code></pre>

<h2 id="18---ajaxify-the-form">18 - AJAXify the Form</h2>

<p>In general, there are two ways to AJAXify this form submit. First, there's the simple, traditional, easy, and lazy way! That is, we submit the form via AJAX and the server returns HTML. For example, if we forget to select an item to lift, the AJAX would return the form HTML with the error in it so we can render it on the page. Or, if it's successful, it would probably return the new <tr> HTML so we can put it into the table. This is easier... because you don't need to do all that much in JavaScript. But, this approach is also a bit outdated.</p>

<p>The second approach, the more modern approach, is to actually treat your backend like an API. This means that we'll only send JSON back and forth. But this also means that we'll need to do more work in JavaScript! Like, we need to actually build the new <tr> HTML row by hand from the JSON data!</p>

<pre><code> window.RepLogApp = function ($wrapper) {
    ...        
    this.$wrapper.find('.js-new-rep-log-form').on(
        'submit',
        this.handleNewFormSubmit.bind(this)
    );
}


(function(window, $) {
    $.extend(window.RepLogApp.prototype, {
    handleNewFormSubmit: function(e) {
        e.preventDefault();
        var $form = $(e.currentTarget);
    }
    });
})(window, jQuery);
</code></pre>

<h2 id="19---old-school-ajax-html">19 - Old-School AJAX HTML</h2>

<p>https://symfonycasts.com/screencast/javascript/old-school-ajax-html</p>

<pre><code>        if ($request-&gt;isXmlHttpRequest()) {
            return $this-&gt;render('lift/_repRow.html.twig', [
                'repLog' =&gt; $repLog
            ]);
        }
</code></pre>

<p>$.ajax({
                url: $form.attr('action'),
                method: 'POST',
                data: $form.serialize(),
                success: function(data) {
                    $tbody.append(data);
                    self.updateTotalWeightLifted();
                },
                error: function(jqXHR) {
                    $form.closest('.js-new-rep-log-form-wrapper')
                        .html(jqXHR.responseText);
                }
            });</p>

<h2 id="20---delegate-selectors-ftw%21">20 - Delegate Selectors FTW!</h2>

<p>https://symfonycasts.com/screencast/javascript/old-school-ajax-html</p>

<p>Your New Best Friend: Delegate Selectors</p>

<p>But there's a much, much, much better way. AND, it comes with a fancy name: a delegate selector. Here's the idea, instead of attaching the listener to DOM elements that might be dynamically added to the page later, attach the listener to an element that will always be on the page. In our case, we know that this.$wrapper will always be on the page.</p>

<p>Here's how it looks: instead of saying this.$wrapper.find(), use this.$wrapper.on() to attach the listener to the wrapper:
        this.$wrapper.on(
            'click',
            this.handleRepLogDelete.bind(this)
        );</p>

<p>So always use delegate selectors: they just make your life easy</p>

<h2 id="27---all-about-promises%21">27 - All About Promises!</h2>

<p>https://symfonycasts.com/screencast/javascript/all-about-promises</p>

<p>We all know that in JavaScript, a lot of things can happen asynchronously. For example, Ajax calls happen asynchronously and even fading out an element happens asynchronously: we call the fadeOut() function, but it doesn't finish until later. This is so common that JavaScript has created an interface to standardize how this is handled. If you understand how it works, you will have a huge advantage.</p>

<p>This article describes the two sides to a Promise. First, if you need to execute some asynchronous code and then notify someone later, then you will create a Promise object. That's basically what jQuery does internally when we tell it to execute an AJAX call. This isn't very common to do in our code, but we'll see an example later.</p>

<p>The second side is what we do all the time: this is when someone else is doing the asynchronous work for us, and we need to do something when it finishes. We're already doing stuff like this in at least 5 places in our code!</p>

<p>Whenever something asynchronous happen, there are two possible outcomes: either the asynchronous call finished successfully, or it failed. In Promise language, we say that the Promise was fulfilled or the Promise was rejected.</p>

<h2 id="28---catching-a-failed-promise">28 - Catching a Failed Promise</h2>

<p>https://symfonycasts.com/screencast/javascript/promises-catch#play</p>

<p>The second way - and better way - to handle rejections, is to use the .catch() function. Both approaches are identical, but this is easier for me to understand. Instead of passing a second argument to .then(), close up that function and then call .catch()</p>

<h2 id="29---promise-catch%3A-catches-errors%3F">29 - Promise catch: Catches Errors?</h2>

<p>https://symfonycasts.com/screencast/javascript/promise-catch-error#play</p>

<p>Here's the deal: in reality, .catch() will be called if your Promise is rejected, or if a handler above it throws an error. Since our .then() calls _addRow() and that throws an exception, this ultimately triggers the .catch(). Again, this works a lot like the try-catch block in PHP!</p>

<h2 id="30---making-and-keeping-a-promise">30 - Making (and Keeping) a Promise</h2>

<p>https://symfonycasts.com/screencast/javascript/create-your-own-promise#play</p>

<pre><code>_saveRepLog: function(data) {
    return new Promise(function(resolve, reject) {
    $.ajax({
        url: Routing.generate('rep_log_new'),
        method: 'POST',
        data: JSON.stringify(data)
    }).then(function(data, textStatus, jqXHR) {
        $.ajax({
            url: jqXHR.getResponseHeader('Location')
        }).then(function(data) {
            // we're finally done!
            resolve(data);
        });
    }).catch(function(jqXHR) {
        reject(jqXHR);
    });
    });
},
</code></pre>

<h2 id="31---promise-chaining">31 - Promise Chaining</h2>

<p>https://symfonycasts.com/screencast/javascript/promise-chaining#play</p>

<p>That's a long way of saying that other chained listeners, will wait until that internal Promise is resolved. In our example, it means that any .then() handlers attached to _saveRepLog() will wait until the inner AJAX call is finished. In fact, that's the whole point of Promises: to allow us to perform multiple asynchronous actions by chaining a few .then() calls, instead of doing the old, ugly, nested handler functions.</p>

<h2 id="32---sweetalert%3A-killing-it-with-promises">32 - SweetAlert: Killing it with Promises</h2>

<p>https://symfonycasts.com/screencast/javascript/sweet-alert-more-promises</p>

<pre><code>    handleRepLogDelete: function (e) {
        e.preventDefault();
        var $link = $(e.currentTarget);
        var self = this;
        swal({
            title: 'Delete this log?',
            text: 'What? Did you not actually lift this?',
            showCancelButton: true
        }).then(function () {
            self._deleteRepLog($link);
        }).catch(function(arg) {
            console.log('canceled', arg);
        });
    },
</code></pre>

<h2 id="33---sweet-alert%3A-create-a-promise%21">33 - Sweet Alert: Create a Promise!</h2>

<p>https://symfonycasts.com/screencast/javascript/sweet-alert-create-promise#play</p>
]]></content>
        </entry>
            <entry>
            <title type="html"><![CDATA[GITEA 503 after changing RPI @IP]]></title>
            <link href="/blog/2021/03/24/gitea-503"/>
            <updated>2021-03-24T00:00:00+00:00</updated>
            <id>/blog/2021/03/24/gitea-503</id>
            <content type="html"><![CDATA[<p>After moving RPI from a lan to another lan, service gitea failed with a 503 error.</p>

<p>This error comes from the new @IP of the device on the lan, this is now <code>192.168.0.13</code></p>

<h2 id="edit-%2Fmnt%2Fgitea%2Fcustom%2Fconf%2Fapp.ini">Edit /mnt/gitea/custom/conf/app.ini</h2>

<pre><code>[database]
DB_TYPE  = postgres
HOST     = 192.168.0.13:5432
</code></pre>

<h2 id="edit-%2Fetc%2Fpostgresql%2F11%2Fmain%2Fpostgresql.conf">Edit /etc/postgresql/11/main/postgresql.conf</h2>

<pre><code>listen_addresses = '192.168.0.13'
</code></pre>

<h2 id="restart">Restart</h2>

<pre><code>service gitea restart

service gitea status
</code></pre>

<h2 id="check">Check</h2>

<pre><code>curl localhost:3000
</code></pre>
]]></content>
        </entry>
            <entry>
            <title type="html"><![CDATA[Fix static @IP on RPI]]></title>
            <link href="/blog/2021/03/24/rpi-static-ip"/>
            <updated>2021-03-24T00:00:00+00:00</updated>
            <id>/blog/2021/03/24/rpi-static-ip</id>
            <content type="html"><![CDATA[<h2 id="get-dns-servers-%40ips">GET DNS servers @IPs</h2>

<pre><code>cat /etc/resolv.conf 
</code></pre>

<p>=></p>

<pre><code>nameserver 89.2.0.1
nameserver 89.2.0.2
</code></pre>

<h2 id="set-up-fix-%40ip">Set up fix @IP</h2>

<p>In <code>/etc/dhcpcd.conf</code>, add the following lines:</p>

<pre><code>interface eth0
static ip_address=192.168.0.13
static routers=192.168.0.1
static domain_name_servers=89.2.0.1 89.2.0.2
</code></pre>
]]></content>
        </entry>
            <entry>
            <title type="html"><![CDATA[Apache log analysis]]></title>
            <link href="/blog/2021/02/22/apache-log-analyze"/>
            <updated>2021-02-22T00:00:00+00:00</updated>
            <id>/blog/2021/02/22/apache-log-analyze</id>
            <content type="html"><![CDATA[<h2 id="installation">Installation</h2>

<pre><code>apt-get install -y  gnuplot goaccess jq
</code></pre>

<h2 id="bash-script">BASH script</h2>

<pre><code>RESULT_FILE=results.csv

&gt;$RESULT_FILE
for LOG_FILE in access-*.log
do
    echo $LOG_FILE
    OUTPUT_FILE=${LOG_FILE//access-/}
    OUTPUT_FILE=${OUTPUT_FILE//_00_00_00.log/}
    goaccess $LOG_FILE --log-format=COMMON -o $OUTPUT_FILE.json --ignore-panel=REQUESTS --ignore-panel=REQUESTS_STATIC --ignore-panel=NOT_FOUND --ignore-panel=HOSTS --ignore-panel=OS --ignore-panel=BROWSERS --ignore-panel=VISIT_TIMES --ignore-panel=VIRTUAL_HOSTS --ignore-panel=REFERRERS --ignore-panel=REFERRING_SITES --ignore-panel=KEYPHRASES --ignore-panel=STATUS_CODES --ignore-panel=REMOTE_USER --ignore-panel=GEO_LOCATION
    HITS=$(jq '.visitors.data[0].visitors.count' $OUTPUT_FILE.json)
    DATE=$(jq '.visitors.data[0].data' $OUTPUT_FILE.json | tr -d '"')
    echo -e $DATE,$HITS &gt;&gt; $RESULT_FILE
done

gnuplot &lt;&lt;- EOF
    set datafile separator ","
    set timefmt '%Y%m%d'
    set format x '%m-%d'
    set xlabel "time"
    set ylabel "visitors"
    set title "Visitors over time"
    set term png size 800,400
    set output "${FILE}.png"
    set xdata time
    set boxwidth 0.5
    set style fill solid
    set xtics rotate

    plot "$RESULT_FILE" using 1:2 with boxes
EOF
</code></pre>

<p><img src="/images/apache-log-analyse/gnuplot.png" alt="screenshot" /></p>

<p>Here, we find there is a rush on <code>2021_01_29_00_00_00</code>, let's analyse time distribution with:</p>

<pre><code>goaccess  access-2021_01_29_00_00_00.log --log-format=COMMON -o report_29_01.html --ignore-panel=REQUESTS --ignore-panel=REQUESTS_STATIC --ignore-panel=NOT_FOUND --ignore-panel=HOSTS --ignore-panel=OS --ignore-panel=BROWSERS --ignore-panel=VIRTUAL_HOSTS --ignore-panel=REFERRERS --ignore-panel=REFERRING_SITES --ignore-panel=KEYPHRASES --ignore-panel=STATUS_CODES --ignore-panel=REMOTE_USER --ignore-panel=GEO_LOCATION
</code></pre>

<p><img src="/images/apache-log-analyse/time-repartition.png" alt="screenshot" /></p>

<p>Max at 15:00, let's dig further</p>
]]></content>
        </entry>
            <entry>
            <title type="html"><![CDATA[wireshark basics]]></title>
            <link href="/blog/2021/02/17/wireshark"/>
            <updated>2021-02-17T00:00:00+00:00</updated>
            <id>/blog/2021/02/17/wireshark</id>
            <content type="html"><![CDATA[<h2 id="install">install</h2>

<pre><code>sudo apt install wireshark -y
</code></pre>

<p>answer yes to allow wireshark execution question for non super user.</p>

<pre><code>sudo usermod -aG wireshark $(whoami)
</code></pre>

<p>logout and login</p>

<h2 id="add-src-%26-destination-port-columns">Add src &amp; destination port columns</h2>

<p>right clock "column preferences" and add "source port" &amp; "destination port"</p>

<h2 id="sniff-post-request-on-a-uri-pattern">sniff post request on a uri pattern</h2>

<pre><code>http.request.method == "POST" &amp;&amp; http.request.uri contains login 
</code></pre>

<h2 id="scan-lan">Scan LAN</h2>

<p>Let's use nmap to san lan and choose the @IP machine to listen. Here it's a RPI.</p>

<pre><code>sudo nmap -sT -O 192.168.1.0/24
</code></pre>

<p>=></p>

<pre><code>Starting Nmap 7.60 ( https://nmap.org ) at 2021-02-17 10:09 CET
Nmap scan report for XYZ-eth0 (192.168.1.68)
Host is up (0.0030s latency).
Not shown: 994 closed ports
PORT     STATE SERVICE
21/tcp   open  ftp
22/tcp   open  ssh
80/tcp   open  http
443/tcp  open  https
3000/tcp open  ppp
5432/tcp open  postgresql
MAC Address: B8:27:EB:39:1D:77 (Raspberry Pi Foundation)
</code></pre>

<h2 id="wireshark-over-ssh-via-sshdump">Wireshark over ssh via sshdump</h2>

<h3 id="install-tools-on-the-remote-server">Install tools on the remote server</h3>

<pre><code>apt install -y tcpdump
</code></pre>

<h4 id="allow-tcpdump-execution-for-non-superuser">Allow tcpdump execution for non superuser</h4>

<pre><code>sudo groupadd pcap
sudo usermod -a -G pcap $USER
sudo chgrp pcap /usr/sbin/tcpdump
sudo chmod 750 /usr/sbin/tcpdump
sudo setcap cap_net_raw,cap_net_admin=eip /usr/sbin/tcpdump
</code></pre>

<p>logout &amp; login</p>

<p>check this command is running without error:</p>

<pre><code>tcpdump -A port '(80 or 443)'
</code></pre>

<p>When this part is ok, we can now use wireshark to use tcp dump over ssh. This can be checked with an ssh command:</p>

<pre><code>ssh XXX@192.168.1.68 "sudo tcpdump"
</code></pre>

<h2 id="configure-wireshark-to-listen-over-ssh">Configure wireshark to listen over ssh</h2>

<p>From the main menu, select ssh remote capture: sshdump</p>

<p>Fill in the windows</p>

<p>We can now capture packets.</p>

<h2 id="wireshark-filters">Wireshark filters</h2>

<pre><code>http
ip.dst == 192.168.1.68
ip.src == 192.168.1.68
http.request.method == "POST" 
http.request.method == "POST" &amp;&amp; http.request.uri contains login
tcp.port==80
tcp.port==443
</code></pre>
]]></content>
        </entry>
            <entry>
            <title type="html"><![CDATA[PHP 7]]></title>
            <link href="/blog/2021/02/16/php7"/>
            <updated>2021-02-16T00:00:00+00:00</updated>
            <id>/blog/2021/02/16/php7</id>
            <content type="html"><![CDATA[<h1 id="php-7%3A-the-important-stuff">PHP 7: The Important Stuff</h1>

<p>Basic PHP 7 cheat sheet from <a href="https://symfonycasts.com/screencast/php7">symfonycasts</a>.</p>

<h2 id="throwable">Throwable</h2>

<p>Both <code>\Exception</code> and <code>\Error</code> implements <code>\Throwable</code>:</p>

<pre><code>&lt;?php
try {
    undefinedFunction();
} catch (\Throwable $error) {
    echo 'Now if you write bad code, you can catch it! ' . $error-&gt;getMessage();
}
echo "\n\nContinue processing file...";
</code></pre>

<h2 id="scalar-type-hints">Scalar Type Hints</h2>

<p>string, int, float, bool, array, callable, iterable</p>

<pre><code>public function setName(string $name)
</code></pre>

<p>Weak Mode (defaut mode) versus Strict Mode</p>

<pre><code>declare(strict_types = 1);
</code></pre>

<h2 id="return-types">Return Types</h2>

<p>string, int, float, bool, array, callable, iterable</p>

<pre><code>public function getName(): string
</code></pre>

<h2 id="nullable-types">Nullable Types</h2>

<pre><code>public function getFunFact(): ?string
</code></pre>

<h2 id="void-types">Void Types</h2>

<pre><code>public function setFunFact(?string $funFact): void
</code></pre>

<h2 id="private-constants">Private Constants</h2>

<pre><code>private const AVATAR_FILE_PREFIX = '/images';
</code></pre>

<h2 id="the-iterable-pseudo-type">The iterable Pseudo-Type</h2>

<pre><code>public function feed(iterable $food): string
</code></pre>

<h2 id="the-multi-exception-catch">The Multi Exception Catch</h2>

<pre><code>    try {
        if (random_int(0, 1)) {
            throw new NoCookieForYou();
        }
        throw new NoCookiesLeft();
    } catch (NoCookieForYou | NoCookiesLeft $e) {
        $whisper = sprintf('Crazy Dave whispered "%s"', $e-&gt;getMessage());
    }
</code></pre>

<h2 id="spaceship-operator-">spaceship operator &lt;=></h2>

<p>It returns -1, 0 or 1 when first expression is respectively less than, equal to, or greater than second expression.</p>

<pre><code>print( 1 &lt;=&gt; 1);print("&lt;br/&gt;");
print( 1 &lt;=&gt; 2);print("&lt;br/&gt;");
print( 2 &lt;=&gt; 1);print("&lt;br/&gt;");
</code></pre>

<p><a href="https://www.tutorialspoint.com/php7/php7_spaceship_operator.htm">source</a></p>

<h2 id="null-coalescing-operator-%3F%3F">Null Coalescing Operator ??</h2>

<pre><code>$username = $_GET['username'] ?? 'not passed';
</code></pre>

<p>Equivalent code using ternary operator:</p>

<pre><code>$username = isset($_GET['username']) ? $_GET['username'] : 'not passed';
</code></pre>

<p><a href="https://www.tutorialspoint.com/php7/php7_coalescing_operator.htm">Source</a></p>
]]></content>
        </entry>
    </feed>