DEV Community: mattiatoselli

How I created a PHP function to transform a Local DateTime to UTC

mattiatoselli — Tue, 31 Aug 2021 12:19:41 +0000

Today I had to resolve a problem at work, at first sight it could be simple, but hands on, it was not so.

Probably You will find another solution, but to me this was simple to code and enough easy to maintain. The idea is to use the functions that starting from PHP 5.4 we have to solve this problem.

I had an API which received the DateTime and the timezone, and I had to transform it in UTC before sending it to the DB, using Unix timestamp was not an option.

<?php
//we can specify GMT or for example a timezone name, under the snippet I'll provide the link to de documentation to find the names of the different timezones

$userTimezone = new DateTimeZone('GMT+2');

$myDateTime = new DateTime('2021-08-31 10:48', $userTimezone);

//get the offset of the selected timezone from UTC
$offset = $userTimezone->getOffset($myDateTime);

//create the corresponding DateTime in UTC
$myInterval=DateInterval::createFromDateString((string)$offset . 'seconds');
$myDateTime->sub($myInterval);

//print the result
$result = $myDateTime->format('Y-m-d H:i:s');
Echo $result;

Usefull links

I have to mention this article which helped me very much, my snippet is an adaptation of this one here.

Also, for a better implemantation, i suggest to use the strings accepted by the method, you can consult the list in the PHP DOC here

Two way data binding in Vue

mattiatoselli — Sun, 25 Jul 2021 20:16:45 +0000

Sometimes we need to bind the value of a field and we need to change the data on the Vue instance in real time. If we use the standard bind we used in a tutorial of this series before, it would not work. In order to do that, we must use the v-model directive:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
  <div id="demo">
    {{ realTimeString }}
    <br>
    <input type="text" name="string" v-model="realTimeString">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script type="text/javascript">


  new Vue({
  el: '#demo',
  data: {
    realTimeString : ""
  }
});

</script>

</body>
</html>

We'll see how the string over the field will change according to what we type in that field.

Event Handling in Vue

mattiatoselli — Fri, 09 Jul 2021 10:39:24 +0000

As expected from any respectable Javascript framework, Vue provides a way to handle DOM events such as mouse movements, clicks, keystrokes, etc.
What is very interesting and enjoyable is the quick and easy way in which such events can be managed.

By using the v-on: syntax, and providing an handler method, we can handle events easily. Here are some example:

Handling click event

<div id="app">
  <!-- `sayHello` is the name of a method -->
  <button v-on:click="sayHello">Hi</button>
</div>

and of course the handler:

var example2 = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    sayHello: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        //this will show the tag which fired the event
        alert(event.target.tagName)
      }
    }
  }
})

// you can invoke methods in JavaScript too
example2.greet() // => 'Hello Vue.js!'

The Double Click

    <div id="app">
        <button v-on:dblclick="handleDoubleClick">Pssst. Double click me ;)</button>
    </div>

and this is the double click handler:

        var app = new Vue({
          el: '#app', 
          methods : {
            handleDoubleClick : function() {
                console.log("Hi, here we are dealing with a double click it seems....");
            }
          }
        })

Handling the event object

We can obviously access the entire event as we saw in previously, by launching the event handler and passing the entire object like in vanilla javascript.

<button v-on:click="handleEvent($event)">We'll do it the old way</button>

Of course Vue provides a simple way to handle common tasks, like for example the preventDefault() function when we submit a form, here is the link to the official guide's paragraph.

Rendering HTML code in Vue

mattiatoselli — Wed, 07 Jul 2021 20:08:30 +0000

Let us suppose that we want to pass to the page as an attribute, a variable containing html code.
Like a clickable link. Following the previous tutorials one could think this is the right way.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- importing vue js dev library -->
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>My vue Test</title>
</head>
<body>
    <div id="app">
        <a href="{{ link }}">This is the link</a>
    </div>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app', 
          data: {
            link: 'https://www.google.com' //this is the link
          }
        })
    </script>
</body>
</html>

Actually this will lead to an error. Vue is unable to link the value of the attribute. In order to accomplish the task, we have to use the bind directive.

<a v-bind:href="link">This is the link</a>

For some reason, we may want to render html code instead of just saving the link in the data key of the vue instance and injecting it in the anchor tag, Vue provides the "v-html" directive.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- importing vue js dev library -->
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>My vue Test</title>
</head>
<body>
    <div id="app">
        <p v-html="link"></p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
          el: '#app', 
          data: {
            link: '<a href="https://www.google.com">This is the link</a>' //this is the link
          }
        })
    </script>
</body>
</html>

Data binding in Vuejs

mattiatoselli — Mon, 05 Jul 2021 15:12:36 +0000

In this article we are going explore a particularly interesting feature that has many applications. What is referred to as data-binding. Basically, through the framework, we can map the attributes of our html tags with values provided by our Vue instance. We could bind for example the value of an input field:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- importing vue js dev library -->
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>My vue Test</title>
</head>
<body>
    <div id="app">
        What's your name?
        <br>
        <input type="text" name="name" v-bind:value="name">
        <br>
        <button v-on:click="changeName()">
            change name
        </button>
    </div>
    <script type="text/javascript">
        var app = new Vue({ //instantiating the vue instance
          el: '#app', //we select where vue is going to work in the DOM
          data: {
            name: 'Mattia'//this are the data
          },
          methods: {
            changeName: function() {
                this.name = "Martino";
            }
          }
        })
    </script>
</body>
</html>

this is the resulting page:

If we click on the button, the name shown as value in the field will be changed immediately.

An introduction to methods in VueJs

mattiatoselli — Sun, 04 Jul 2021 17:45:03 +0000

In the last article we began our journey with Vue, going deeper, we'll introduce methods, which are going to be very useful for us. In this article we are only going to see a simple method.

In vue we can launch a method even without an event, like this for example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- importing vue js dev library -->
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>My vue Test</title>
</head>
<body>
    <div id="app">
        {{ sayHello() }}
    </div>
    <script type="text/javascript">
        var app = new Vue({ //instantiating the vue instance
          el: '#app', //we select where vue is going to work in the DOM
          data: {
            name: 'Mattia'//this are the data
          },
          methods: {
            sayHello: function() {
                return "Hello there, " +this.name;
            }
          }
        })
    </script>
</body>
</html>

this is the resulting page:

Handling events

We can change datas or call functions with the directive "v-on:". Directives in Vue are like attributes that we can assign to different HTML elements.
This particular button for example, is going to change the name shown by our sayHello method:

<button v-on:click="name = 'Miyazaky'">My name is Miyazaky!</button>

Of course, methods can have multiple lines of code, in this case, we can call a function using the name:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- importing vue js dev library -->
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>My vue Test</title>
</head>
<body>
    <div id="app">
        {{ sayHello() }}
        <br>
        <button v-on:click="changeName()">My name isn't {{ name }}!</button>
    </div>
    <script type="text/javascript">
        var app = new Vue({ //instantiating the vue instance
          el: '#app', //we select where vue is going to work in the DOM
          data: {
            name: 'Mattia'//this are the data
          },
          methods: {
            sayHello: function() {
                return "Hello there, " +this.name;
            },

            changeName: function() {
                if (this.name === "Mattia") {
                    this.name = "Miyazaki"; 
                } else {
                    this.name = "Mattia";
                }
            }
          }
        })
    </script>
</body>
</html>

Beginning with Vuejs

mattiatoselli — Sun, 04 Jul 2021 13:25:13 +0000

The easiest way to try out Vue.js is using it by importing the library from a CDN, in order to do this, we create a simple html document.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- importing vue js dev library -->
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>My vue Test</title>
</head>
<body>
    <div id="app">
        {{ message }}
        <br>
        {{ sum }}
        <br>
        {{ array }}
    </div>
    <script type="text/javascript">
        var app = new Vue({ //instantiating the vue instance
          el: '#app', //we select where vue is going to work in the DOM
          data: {
            message: 'Hello Vue!', //this are the data
            sum: 2+2,
            array: [1,5,6, "Rome", "Italy", "cookies", 10]
          }
        })
    </script>
</body>
</html>

And this is the resultant page:

as we can see, at the end of the body, once all the html code has been loaded, we call our script and instantiate the vue instance. If we did it before, it wouldn't work.

A gentle introduction to Vuejs

mattiatoselli — Sun, 04 Jul 2021 10:41:42 +0000

VueJs is a Javascript front-end framework, it merges together some of the most interesting features of other frameworks such as ReactJs and AngularJs, the first was created by Facebook, the second by Google. Vue, on the other hand, does not have any major of the computer industry behind it, but over time it managed to carve out an important space, and is increasingly preferred to others for a variety of reasons.

Easy

Compared to other frameworks it has roughly the same functionality, but has a much more linear learning curve for a newbie.

Rapid

VueJs has borrowed a pretty cool feature from React: the virtual DOM.
Put simply, the DOM is a light copy of the web page, when every change is made by the user action, Vue compares the new DOM with the saved virtual one, and only makes the required changes, without having to completely redesign the page.

Light

Vue, when compared with the other frameworks, turns out to be the lightest ever, the core functions library weighs only 16 Kb!

Useful resources

The official documentation should be a must read at all.

Meet with firebase and vuejs

mattiatoselli — Tue, 29 Jun 2021 16:06:58 +0000

In this series we are going to meet with firebase, the cloud service provided by Google. In this series we are going also to use a little bit of Vuejs, which i hope you are able to use, by the way it won't be difficult at all.