teleren/devto huggingface dataset:
Avoid this when using Date/Time functions in PHP
Tags: timezone, php, datetime
Published: 2021-08-28 16:37:31

---
title: Avoid this when using Date/Time functions in PHP
published: true
description: A trick issue when handling Date/Time functions in PHP when working on projects with Time Zones above GMT-0 
tags: timezone, php, datetime
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6zqqyaqv2m52xm09j8g.png
---

Is there any difference between getting the current date/time in the following ways in PHP?

```php
(new \DateTimeImmutable())->format('Y-m-d H:i:s');
```

```php
\DateTimeImmutable::createFromFormat('U', (string) time())
    ->format('Y-m-d H:i:s');
```

Imagine that you are inserting data into a database table using the first way, but when querying the same database table you use the second option.

While the first option will return the current date/time of your server taking into account its Time Zone configuration, the second way will return the current date/time of your server based on UTC time zone.

After creating just a single user into a users table with this data

```php
$user->name = 'Sebastian';
$user->createdAt = (new \DateTimeImmutable())
    ->format('Y-m-d H:i:s');
```

and querying the user table in this way

```php
$dql = <<<EOT
        SELECT u FROM App\Entity\User u
        WHERE u.createdAt <= :createdAt
    EOT;

$now = \DateTimeImmutable::createFromFormat('U', (string) time())
    ->format('Y-m-d H:i:s');

$users = $this->entityManager()
    ->createQuery($dql)
    ->setParameter('createdAt', $now)
    ->getResult();
```

you will receive an empty array of `$users` if the server which hosts your application is located in any country with Time Zone configuration greater than 0 (Austria, Denmark, Germany, and so on).

It will happen because the data which will be inserted into your user table will have the `createdAt` field filled with `18:14` while when you will try to query the database, you will use the time `16:14`.

> You didn't create any user before 16:14!

You will never find the users that you have recently created.

It occurs because when you use `U` to format the date/time values, you get a Unix Timestamp date/time format which gets the date/time always based on [Coordinated Universal Time](https://en.wikipedia.org/wiki/Coordinated_Universal_Time), and never takes into account the Server's Time Zone configuration.

This concept looks pretty basic, but maybe you have never had this issue because you have been working bellow UTC Time Zone (Denmark, South America, Canada, USA, and so on). 

Pay attention to that, and you will never suffer trying to solve this issue.
Upgrade react-script 3.x.x to 4.x.x
Published: 2021-08-28 15:35:14

## Fix to `unexpected token issue`

### Issue log
```
src/components/CommonStyles.tsx
  Line 4:41:  Parsing error: Unexpected token, expected ","

  2 | import { SunsetOrange, rem, xsmall } from 'styled/config';
  3 |
> 4 | export const Error = styled.p<{ noMargin?: boolean }>`
    |                                         ^
  5 |   color: ${SunsetOrange};
  6 |   font-size: ${rem(12)};
  7 |   line-height: 1;

src/components/Graphs/DataTable.tsx
  Line 28:37:  Parsing error: Unexpected token, expected ","

  26 | `;
  27 |
> 28 | const TableCell = styled.th<{ sticky?: boolean }>`
     |                                     ^
  29 |   background: ${White};
  30 |   border-bottom: 1px solid ${Plaster};
  31 |   font-size: 13px;

src/components/Icon/Icon.tsx
  Line 5:25:  Parsing error: Unexpected token, expected ","

  3 |
  4 | const Icon = styled.div<{
> 5 |   width: number | string;
    |                         ^
  6 |   height: number | string;
  7 |   color?: string;
  8 | }>`
```

### Fix
Add this below code to your `package.json` after upgrading `react-script` from 3 to 4
```JSON
"eslintConfig": {
   "extends": [
     "react-app",
     "react-app/jest"
   ]
 },
```
Javascript inheritance
Tags: javascript, inheritance, prototype
Published: 2021-08-28 15:33:35

```javascript
function Person(name, email, mobile) {
  this.name = name;
  this.email = email;
  this.mobile = mobile;
}

Person.prototype.getFirstName = function () {
  return this.name.split(' ')[0];
}

Person.prototype.getLastName = function () {
  var nameArr = this.name.split(' ');
  return nameArr[nameArr.length - 1];
}


function Student(name, email, mobile, age) {
  /**
   * This inherits all methods and properties from Person 
   * class and assign to this, similar to super in es6
  */ 
  Person.call(this, name, email, mobile);
  this.age = age;
}
```
We have achieved inheritance, now `Student` instance will have access to the `Persons` method. But there is one problem here.
`Student` will not have access to the `prototype` methods.

To do that we have to add the following lines of code.

```javascript
/**
* Assign `Student` prototype with `Person` prototype
* Now `Student` has `Person` class proto methods
*/
Student.prototype = Object.create(Person.prototype);

/**
* Here setting proper constructor name for Student class
*/
Object.defineProperty(Student.prototype, 'constructor',
 {
    value: Student,
    enumerable: false,
    writable: true,
 });

Student.prototype.getAge = function() {
  return this.age;
}

var student = new Student('Jyoti Prakash', 'myemail@example.com', '89xxxxxxxx', '25');
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1pro3ewdzt4esrmg7fp.png)
PowerShell365
Tags: github, windows, dev, security
Published: 2021-08-28 15:21:03

I've created https://github.com/edoardottt/powershell365.
It's a GitHub repository with the goal of sharing useful tips and tricks to learn PowerShell.
The tips will be 365, so, one per day.
If you find this project useful, these are my handles where I will publish updates, so if you want, follow me :)

https://github.com/edoardottt
https://twitter.com/edoardottt2
Cara Membuat Output dari Query MongoDB Shell Menjadi Berwarna
Tags: mongodb
Published: 2021-08-28 15:12:17

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mf77bpednitct5b3v8v0.png)
Halo guys! Kali ini saya akan sharing tentang bagaimana cara merubah output dari query MongoDB Shell menjadi berwarna agar lebih nyaman untuk dibaca. Untuk melakukan itu kita akan menggunakan sebuah shell extension yang bernama [Mongo-Hacker](https://github.com/TylerBrock/mongo-hacker). 

Untuk menginstallnya, kita hanya butuh 4 langkah berikut:

Step 1: Clone repository dari Mongo-Hacker
```
git clone https://github.com/TylerBrock/mongo-hacker
```
Step 2: Masuk kedalam folder mongo-hacker
```
cd mongo-hacker
```
Step 3: Install package
```
make install
```
Step 4: Bersikan folder
```
cd ..
rm -rdf mongo-hacker/
```
Selesai!
Frontend Testing With Typescript - Workshop
Tags: softwaretestingtrain, softwaretesting, functionalprogrammin, typescript
Published: 2021-08-29 13:50:59

---
title: Frontend Testing With Typescript - Workshop
published: true
date: 2021-08-28 14:43:58 UTC
tags: softwaretestingtrain,softwaretesting,functionalprogrammin,typescript
canonical_url: https://www.matechs.com/blog/frontend-testing-with-typescript-workshop
---

_This course is for Typescript developers who are eager to learn how to build modern, robust, and testable front-end applications._

![](https://cdn-images-1.medium.com/max/1024/1*3nuyTzolzgi6p0djo2mmgA.png)<figcaption>Front-End Testing with Typescript — Workshop</figcaption>

In this 5-day (4h/day) workshop we will explore a handful of techniques to test frontend applications using pure typescript in combination with jest, testing-library and cypress, we will primarily use react apps as examples but the techniques are generally usable with any other framework.

👉 Grab your ticket below — November 2021:

1. [London Edition](https://www.eventbrite.co.uk/e/frontend-testing-in-typescript-london-edition-tickets-160606210499?aff=erelpanelorg)
2. [Berlin Edition](https://www.eventbrite.co.uk/e/frontend-testing-in-typescript-berlin-edition-tickets-160608571561)
3. [NYC Edition](https://www.eventbrite.co.uk/e/frontend-testing-in-typescript-nyc-edition-tickets-160609171355?aff=erelpanelorg)
4. [San Francisco Edition](https://www.eventbrite.co.uk/e/frontend-testing-in-typescript-san-francisco-edition-tickets-160840429053?aff=erelpanelorg)

Regardless of the environment or the language, you are developing in testable code can be described by the sentence “program to an interface, not to a concrete implementation”.

In fact, every time we program-to an interface we can provide multiple implementations of the same contract (the “interface”) and this property comes in handy when we write our tests.

At the architecture level, testable applications tend to look like an onion, where each layer glues together functionalities from outer layers and provides functionalities to inner layers up to the very core of the app.

In the front-end, this concept can be viewed as the separation between UI and business logic, and separation between business logic and integration logic.

In react we will make use of pure functional components to represent the view layer and we will make utilities around the context API to carry business logic and integration logic to our components.

In the tests we will see how to test each component individually from the core UI up to the integration with the external world, we will discuss what properties to assert on each layer and we will see how to use code coverage tools to better understand the branching of our code and to spot what needs further testing.

* * *
Work life balance
Tags: devjournal
Published: 2021-08-28 14:24:06

I am a multi tasker.

When you have a day job, a blog and a family, you need to be one anyways.

Every week is not the same. Sometimes everything works fine as per schedule but some times the schedule gets messy because the one or the other require more priority. 

Maintaining a schedule is not easy.

And when tasks gets pushed from weeks to the next, you can't figure out what to take up first.

This is a very weird feeling to not complete something you wanted to because of other priorities and that bugs your mind every now and then.

It happens because the priorities are not set by us, well not all of them. I mean for the blog I can decide what are the priorities but a job comes with it's own priority and family priorities are never ending. 

Setbacks are inevitable.

So you need to adjust. You need to slow down a bit. Having a plan B will always helps.
Form Validation using Javascript | Create Form using HTML CSS 
Tags: javascript, webdev, html, css
Published: 2021-08-28 14:17:33

Creating a Form is very regular requirement in web development.

And form should be very attractive and have good logic to validate it.

In this session, I explained how to create a Form from scratch and explained each step in beginners prospective.

Covered Below
* Create Form using Html
* Style Form using CSS
* Validate Form using Javascript

You can check the description of the video for source code.

Do subscribe to channel if you found the video is helpful.

{% youtube YMBGvvE47I8 %}
Why is Facebook Still relevant today ?
Published: 2021-08-28 14:11:37

When asked to list any social media ,it common you'd probably start with the most popular of them, Facebook!. So what makes this interactive technology still relevant to people despite its competition and old Age. 

#####Login with Facebook

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds91v56hj0wmj7qlpmsg.png)

you have definitely come across that well placed button that says "sign up using Facebook" on other websites and you'd admit it takes the stress from having to fill in text fields and trying to remember passwords 
this little service is why people still keep Facebook around,one click and you are in.

##### Facebook as a phone book

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/di3slfcpy6478f7rij62.jpg)

We do miss people and sometimes lost contact with them. Again you'd admit whenever you are looking for a long lost buddy you'd hit that that social media phone-book called Facebook. Facebook has down tools that can help you find and keep in touch ,even if that loved one doesn't have a Facebook account, they probably have friend of friends who can help you get in touch.I guess for some reason it keep Facebook relevant.

#####Facebook Business tools

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sco2deukp3xeysb5shv.png)

Facebook has grown to become a digital market place, Facebook has over *2.79 billion users* in 2020 cut that number in half and you would have potential customers.Advertising your business or products to reach your specific target audience by either age,gender,occupation,location,inter is a benefit.
Facebook business tools keeps it on the scale of relevance.

#####Facebook is not just an app

![Products](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l9gidzexjxqj9hkia9r.png)

Facebook is not just an app like back in 2004. Now they have over
61 product and service. Let say the "*Facebook mobile and web app*" where to some how disappear from earth.They would still be in business because of it other products like *WhatsApp or Instagram* and services like *analytics or audience Insight*.
here is list of their services [Facebook products and services](https://www.matrics360.com/facebook-products-and-services/amp/)

##### India is a Big fan

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nl8hw1w3bm60ben4itr.jpg)

Among countries with Active Facebook users, India has *375 million* users and growing . That is a huge fan love, and guessing if the rest of the world should dump Facebook India would still keep it relevant for years.

## Will Facebook live Forever ?

Facebook has built contingencies leaning form where other social media and businesses have failed. It is safe to say  their idea is to win  and provide futuristic tech services, which people will heavily need to relay on. Take Facebook Oculus for instance, a dive into argument-ed reality (AR). All these ideas will keep Facebook around for along while.
Login form with CSS
Tags: css, codenewbie, showdev
Published: 2021-08-28 14:04:08

In this tutorial, I’ll show you how to create a login form with pure CSS. First, look the video above to see how I make the login form. Then after the video, there’s a preview and the code of the result.

## Video

{% youtube 9X6kUu20OjE %}

## The HTML
```xml
<form action="#!" id="main">
    <h2>Login to your account</h2>

    <div class="input-parent">
        <label for="username">Username or Email</label>
        <input type="text" id="username" />
    </div>

    <div class="input-parent">
        <label for="password">Password</label>
        <input type="password" id="password" />
    </div>

    <button type="submit">Login</button>
</form>
```

## The CSS
```css
*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    font-family: inherit;
    box-sizing: border-box;
}
#main {
    width: max-content;
    margin: 40px auto;
    font-family: "Segoe UI", sans-serif;
    padding: 25px 28px;
    background: #151414;
    border-radius: 4px;
    border: 1px solid #302d2d;
    animation: popup 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes popup {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 400;
    color: #e7e7e7;
}
.input-parent {
    display: block;
    margin-bottom: 20px;
}
label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    color: #a4a4a4;
}
.input-parent input {
    padding: 10px 8px;
    width: 100%;
    font-size: 16px;
    background: #323131;
    border: none;
    color: #c7c7c7;
    border-radius: 4px;
    outline: none;
    transition: all 0.2s ease;
}
.input-parent input:hover {
    background: #404040;
}
.input-parent input:focus {
    box-shadow: 0px 0px 0px 1px #0087ff;
}
button {
    padding: 10px 18px;
    font-size: 15px;
    background: #1a3969;
    width: 100%;
    border: none;
    border-radius: 4px;
    color: #f4f4f4;
    transition: all 0.2s ease;
}
button:hover {
    opacity: 0.9;
}
button:focus {
    box-shadow: 0px 0px 0px 3px black;
}
body {
    background: #1c1b1b;
}
```

## Preview

[Click me](https://www.tronic247.com/trycode/?name=login_frm)

So, I have nothing to write here because there’s a video how I am doing it.
Wanna see more like this ? Then, subscribe me on [YouTube](https://www.youtube.com/tronic247?sub_confirmation=1)
QuickSort Algorithm in Javascript
Tags: javascript, html, css, react
Published: 2021-08-28 14:02:00

Hello Everyone Today I am going to show you how to write QuickSort Algorithm in Javascript.


QuickSort is a Divide and Conquer algorithm. It picks an element as pivot and partitions the given array around the picked pivot. There are many different versions of quickSort that pick pivot in different ways. 

Always pick first element as pivot.
Always pick last element as pivot (implemented below)
Pick a random element as pivot.
Pick median as pivot.
The key process in quickSort is partition(). Target of partitions is, given an array and an element x of array as pivot, put x at its correct position in sorted array and put all smaller elements (smaller than x) before x, and put all greater elements (greater than x) after x. All this should be done in linear time.

![IQKUC SROT (1)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2pf2xaorp3mgjsmhyi7.png)


Here is The Code Part - 
```javascript
function QuickSort(Arr){
  if(Arr.length <= 1){
    return Arr;
  }

  const pivot = Arr[Arr.length - 1];
  const leftArr = [];
  const rightArr = [];

  for(let i=0; i < Arr.length-1;i++){
    Arr[i] < pivot ? leftArr.push(Arr[i]) :  rightArr.push(Arr[i])
  }

  return [...QuickSort(leftArr) ,pivot,...QuickSort(rightArr)];

}

const items = [1,5,2,99,81,100,144,121,91,85,74,10];
console.log(QuickSort(items));
```

1. So, First we will check the length of the Array and if it is 1 then we will return the array as it is.
2. Then we will select a pivot element which is last element in our case.
3. Then we will create two empty arrays leftarr and rightarr to compare elements with pivot and place the element accodingly.
4. Then we will iterate the array using for loop and inside for loop we will check each element that it is smaller than pivot or greater than pivot
5. If the Element is smaller than pivot, then we will push it into left array and if the element is greater than pivot then we will push the element into right array.
6. Then we will recursively call QuickSort for left and right array to partition the arrays until it get sorted completely.

```
Output - 
[1,2,5,10,74,81,85,91,99,100,121,144]
```

I am New to Data Structures and Algorithm.So, if you find any mistake in this post please correct it in the comment section
THANK YOU

Instagram - https://instagram.com/w_a_a_d_u__h_e_c_k
Need advice
Tags: android, java, discuss
Published: 2021-08-28 13:58:01

I have been learning android dev in android studio for the past 20 days from the book "Head First Android Development" and as I am starting new chapters, there are always new methods, inner classes... of new widgets getting introduced to me and it's getting hard to memorize all these stuff! 

Can someone give me some advice? In serious need of help. 

Do all the professional android developers keep a guide with them while they are developing apps?
Google Cloud Log severity in Django deployed on Cloud Run
Tags: django, devops, googlecloud, python
Published: 2021-08-28 13:50:39

When deploying a Django/python application to Google Run, logs sent to console will automatically get picked up by [Google's Ops agent](https://cloud.google.com/logging/docs/agent/logging) (based on Fluent Bit).

![Screen Shot 2021-08-28 at 10.31.47](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1mle6x7gbgfbw508jxl.png)
 
The only problem is that log severity does not get picked up automatically if you are using python's `logging` library.

Even when logging like the following:
```python
logging.warn('This should have WARNING level');
```
Logs on Google's Log Explorer will all appear with level `default`.

To fix this, you will have to configure Django/python's `LOGGING` settings to use `CloudLoggingHandler`:

```python
LOGGING = {
    'handlers':
        'console': {
            'level': get_env('LOG_LEVEL', 'WARNING'),
            'class': 'logging.StreamHandler'
        }
    },
    'root': {
        'handlers': ['console'],
        'level': get_env('LOG_LEVEL', 'WARNING'),
    }
}

// When running in an environemnt without gcloud auth credentials
if get_env('GOOGLE_LOGGING_ENABLED', False):
    try:
        import google.cloud.logging
        from google.auth.exceptions import GoogleAuthError

        client = google.cloud.logging.Client()
        client.setup_logging()

        LOGGING['handlers']['google_cloud_logging'] = {
            'level': get_env('LOG_LEVEL', 'WARNING'),
            'class': 'google.cloud.logging.handlers.CloudLoggingHandler',
            'client': client
        }

        LOGGING['root']['handlers'].append('google_cloud_logging')

    except GoogleAuthError as e:
        logger.exception('Google Cloud Logging handler could not be setup.')
```

Now we successfully get to parse the severity metadata to create alarms and metrics dashboards.

![Screen Shot 2021-08-28 at 10.49.55](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/womzkl88m6k9edumt00k.png)
Resolved error: Unable to use proxy: URL http_proxy formatted incorrectly, in composer
Tags: composer, laravel
Published: 2021-08-28 13:31:37

Assalamualaikum warahmatullahi wabarakatuh, hello everyone, this time I will share my experience with the composer error, which is Unable to use a proxy: malformed http_proxy URL.

If you are experiencing the same problem, you can check out this article. So I haven't coded Laravel for 6 months and my laptop had Windows reinstalled. When I install laravel via composer there is an error.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifnv2ieo38ber07tg3kj.png)
 
This problem arises because on our laptop / computer there is an environment variable http_proxy which contains the code http_proxy, the way to solve this is to delete the environment variable.

Open the control panel on our laptop / computer.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j14bc7vx132m00qkdn9l.png)

Then select system and security, then select system.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6vkw7b372yb257drlt11.png)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yamzdyhjvtloplrg3p7q.png)

Select advanced system settings

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gxfb9cja84r5wu9fql1x.png)

Select environment variables

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jbxyzsyc5c8098qlgsr.png)

If there are user variables with the name http_proxy, click and delete. Then your problem is solved.
So many articles, hopefully useful and thank you.