teleren/devto huggingface dataset:
Can anyone help me why this error are show?
Tags: php, javascript, ajax, http
Published: 2022-01-25 14:16:49

`<?php 
    include_once "php/config.php";
    $fname = mysqli_real_escape_string($conn, $_POST['fname']);
    $lname = mysqli_real_escape_string($conn, $_POST['lname']);
    $email = mysqli_real_escape_string($conn, $_POST['email']);
    $password = mysqli_real_escape_string($conn, $_POST['password']);

    if (!empty($fname) && !empty($lname) && !empty($email) && !empty($password)) {
        // lets users email valid or not 
        if (filter_var($email,FILTER_VALIDATE_EMAIL)) {
           
        }
        else{
          echo "$email + this is not a valid email";
        }
    }
    else{
        echo "All input fields are required";
    }
?>`
`const form = document.querySelector("#form");
const continueBtn = form.querySelector("#conBtn");

form.addEventListener("submit", (e) => {
    e.preventDefault();//preventing form from submiting
});

continueBtn.addEventListener("click", () => {
    // let's start Ajax
    let xhr = new XMLHttpRequest();//creating xml object
    xhr.open("POST", "php/signup.php", true);
    xhr.onload = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                let data = xhr.response;
                console.log(data);
            }
        }
    }
    // we have to send the form data thourgh ajax to php
    let formData = new FormData(form);//creating new formdata object
    xhr.send(formData);//sending the form data to php
});`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hkgmpbsj4weduodad15.png)``
Paracetamol.js💊| #30: Explica este código JavaScript
Tags: javascript, beginners, spanish, webdev
Published: 2022-01-25 14:12:30

## **Explica este código JavaScript**

```js
[1, 2, 3].map(num => {
  if (typeof num === "number") return;
  return num * 2;
});
```

-     A: `[]`
-     B: `[null, null, null]`
-     C: `[undefined, undefined, undefined]`
-     D: `[ 3 huecos vacíos ]`


Respuesta en el primer comentario.

---
Paracetamol.js💊| #29: Explica este código JavaScript
Tags: javascript, spanish, webdev, beginners
Published: 2022-01-25 14:11:23

## **Explica este código JavaScript**

```js
const num = parseInt("7*6", 10);
console.log(num); //?
```

-     A: `42`
-     B: `"42"`
-     C: `7`
-     D: `NaN`

Respuesta en el primer comentario.

---
Tips to get FreeCodeCamp Responsive Web Design certificate faster
Tags: webdev, html, css, codenewbie
Published: 2022-01-25 14:09:38

FreeCodeCamp is a non-profit organization that provides various courses on Web Development and Machine Learning. There are several freeCodeCamp certifications offered in a broad range of studies and with over 1,800 hours worth of material.

Last month i completed my freeCodeCamp responsive web design course. most of the freeCodeCamp courses are approx. 300 hours long. Responsive web design course is an excellent course for beginners who are just getting into web development.

So, here are some tips that helped me to complete this course faster.

**1. After finishing basics, jump to building projects**

After completing the first 2 modules, go to the projects section and start working on your first project(Tribute Page). it'll help you to implement all the stuff you have learnt in those modules. Tribute page project is the most simple one and you can make it without using flexbox and grid.

**2. Get familiar with Responsive Design techniques**

Getting familiar with media queries and relative units will make work a lot easier for you. its better to use CSS for making page responsive instead of Bootstrap or any other framework.

**3. Do modules according to your needs**

You don't need to finish all the modules to work on those projects. after building the first two projects you will need flexbox for the next two and CSS grid for the last project.

**4. Don't multitask, pick one project at a time**

Complete one project and then move on to the next one. use google if you are stuck, there are several websites that you can use such as w3schools. w3schools provide source code to make navbar, sidebar and many other things.

**5. Stay consistent**

Working with CSS sometimes might be frustrating but more you work with it, more the things will get easier. staying consistent is very important, use a code editor to make things easier.
What's in it for me?
Tags: discuss, personal, improvement, growth
Published: 2022-01-25 13:58:22

---
title: What's in it for me?
published: true
description: Giving without expecting something in return is one of the nicest feelings
tags: discuss, personal, improvement, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osr9dela8oqjy781jg8v.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/whats-in-it-for-me/)._

> Giving without expecting something in return, or having a plan for why you're doing it, is one of the nicest feelings. However, as a bonus, in the long run, it almost always also opens doors for you.

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
Things To Plan Before Hiring a Website Development Company for Your Business

Published: 2022-01-25 13:50:21

𝐓𝐡𝐢𝐧𝐠𝐬 𝐓𝐨 𝐏𝐥𝐚𝐧 𝐁𝐞𝐟𝐨𝐫𝐞 𝐇𝐢𝐫𝐢𝐧𝐠 𝐚 𝐖𝐞𝐛𝐬𝐢𝐭𝐞 𝐃𝐞𝐯𝐞𝐥𝐨𝐩𝐦𝐞𝐧𝐭 𝐂𝐨𝐦𝐩𝐚𝐧𝐲 𝐟𝐨𝐫 𝐘𝐨𝐮𝐫 𝐁𝐮𝐬𝐢𝐧𝐞𝐬𝐬
Click here to know 👉 https://www.bluwebmedia.co.in/blu-ocean/things-to-plan-before-hiring-a-website-development-company-for-your-business/
[BTY] Day 2: Make image's link from the server's hard drive via FAST API
Tags: python, fastapi, betterthanyesterday
Published: 2022-01-25 13:42:18

When I think about "image link", I only know about a link generated after uploading an image to a hosting service. But thank @vietnhh, now I have found another solution: make an image link from the server's hard drive via FAST API. 


```
...
@router.get("/get-image", tags=["get image from disk"])
async def get_image_from_disk(image_path: str):
    image_name = os.path.basename(image_path)
    _, ext = os.path.splitext(image_name)

    if os.path.exists(image_path):
        return FileResponse(image_path, media_type=f"image/{ext}", filename=image_name)
    return {"error": "File not found!"}

```

And the image's link will be something link: `http://your_ip:your_port/get-image/mnt/data/images/vietnhh.jpg`


Any disadvantages?
WHY DO QR CODES HAVE 3 BIG SQUARES?
Tags: qrcode, technology
Published: 2022-01-25 13:33:26

Almost all of us have seen QR codes before, they are like everywhere now, from making payments, or packaging gadgets or on business cards. Companies and even people nowadays use QR code to give information that is quickly accessible and can be seen even with a smartphone. But have you ever wondered why there are 3 big squares in each and every QR code we have come across. 

First, let's take a look at what are these QR's actually?

So, basically, the term QR stands for Quick Response Code. QR codes are square barcodes (two-dimensional barcodes) that were first developed and used in Japan. Like any other barcode, a QR code is nothing more than a way to store information in a machine-readable optical label. The data contained by a QR code can be anything from simple text to email addresses, phone numbers, and so on.

QR codes store data using patterns of black dots and white spaces arranged in a square grid. These patterns can be scanned and translated into human-readable information, with the help of an imaging device, like a camera or a scanner. 

##But why these 3 big squares?
We can do an experiment to understand this:

Attached below is a reference key. You don't have to remember it, you can always look at it any time you need. 



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


Now, I want you to compare the below character to the key and identify it. 


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

Well, that was pretty easy! Yes, you got it right !! It's number 5. (Even if you didn't find, there is nothing to be worried about, you can crosscheck now.)

Now, I want you to try this:


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


It's not that easy anymore, isn't it?
But now check the image below.


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



You can clearly see when the QR code has the squares, the smartphone or any scanning device and quickly figure out a way to rotate and resize the code, turning it to this(below image).


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

And now you can guess it, right?
Yes, absolutely, it's number 3.
This is why there are these 3 big squares. 
They ensure the codes can be correctly read. 

Hope you read something interesting and informative!
>Follow for more much informative content.
>Share your thoughts and suggestions if any.
NTS Jobs

Tags: nts, jobs, tests
Published: 2022-01-25 13:23:52

Latest Pakistani Jobs/Results/Admissions/Tenders/Tests/Advertisement
Latest Information about education, jobs, business and money in Pakistan. Find jobs in Quetta find new newspapers advertisement AIOU Matric Results and check latest NTS Jobs/ NTS Roll No Slips more in details are on 
[https://ntsresultbycnic.blogspot.com](https://ntsresultbycnic.blogspot.com)
Hosting Next.JS on Plesk
Tags: nextjs, plesk, javascript, tutorial
Published: 2022-01-25 13:21:41

I recently needed to host a Next.js application on a Plesk shared hosting server running on Amazon Lightsails and could not find a detailed tutorial on how to achieve this.

Below are the step I used to get Next.js SSR and SSG working on my plesk server.

##Install Node.js extension on Plesk

Log in to Plesk, go to “Tools and Settings”, and click “Updates and Upgrades”. Next, go to “Add/Remove Components”. Find the “NodeJS support” component. Select it, and continue with the Node.JS installation. In a few minutes, all the necessary components will be installed and you’ll be ready to go!

##Create custom server.js file
This file will be used to start up the Next.js application via Node.

Create a file called `server.js` in the root directory of your app with the following code.

```javascript
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true)
      handle(req, res, parsedUrl)
  }).listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})
```

##Setup GIT *
** *Highly recommended but optional**

Read more on how to do that here: https://docs.plesk.com/en-US/onyx/customer-guide/git-support/using-remote-git-hosting.75848/#clone-git-repository

##Setup the Node.js Server
In the domain panel click the Node.js option.


![Click the Node.js option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae8o48ugg4c47dzdz3f4.png)

Set the Node.js setting as the following:

![Node.js setup view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vs4o4gj96hduarypk61z.png)

Node.js Version: `14.18.3`
Application Root: `/httpdocs`
Application Startup File: `server.js`
Custom environment variables: Any production env needed.

Leave all the rest as is for now.

Click on **Enable Node.js**, then **NPM Install**. When the install is done **Restart App** and finally click **Run script**.

In run script dialog add the following script and parameter:

`build --scripts-prepend-node-path`


![build --scripts-prepend-node-path](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0du1pieqv8p0zjj85s2c.png)

Once the build script is complete change the **Document Root** to `/httpdocs/.next/static`.


![Document Root](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nu3k0od8tdpr9lz2sgn.png)

Then finally **Restart App** and your Next.js app should be running on your domain!
TDD and Publish-Subscribe pattern implementation via TDD
Tags: tdd, testing, designpattern, typescript
Published: 2022-01-25 13:12:55

### My understanding of TDD
TDD is a practice that follows red-green-refactor circles:
1. Red: write a minimal and straightforward test first, one at a time. The test fails hence the name 'red', because the code is not written yet.
2. Green: write **just enough** code to get the test, be it a shortcut that doesn't make any business sense, for example, hard coding a string. The aim here is to get the test to pass i.e. turning green.
3. Refactor: refactor both tests and code and keep the test green
4. Repeat with more tests, one at a time, as simple as possible, edging closer to the business requirements

TDD requires an accurate understanding of business requirements. TDD is the process of constantly expressing business requirements in the form of tests, one small step at a time.

TDD is the ultimate weapon for highly maintainable software. However, from what I learned so far, it is not practical to apply TDD to all codes or you will get burned and give up. 

The most effective way is to separate the business logic from other noises to become an input/output based structure. TDD the business logic. 

Testing is hard. Sticking to testing is all about forcing ourselves to design our code in such a way that testing is not hard anymore. It is the design that is hard.

### What is publish-subscribe pattern
Definition from Wikipedia:

> **publish–subscribe** is a [messaging pattern](https://en.wikipedia.org/wiki/Messaging_pattern "Messaging pattern") where senders of [messages](https://en.wikipedia.org/wiki/Message_passing "Message passing"), called publishers, do not program the messages to be sent directly to specific receivers, called subscribers, but instead categorize published messages into classes without knowledge of which subscribers, if any, there may be. 
> 
> Similarly, subscribers express interest in one or more classes and only receive messages that are of interest, without knowledge of which publishers, if any, there are.

The essence of the pattern is the decoupling of publishers and subscribers. 

This blog post will show an attempt to implement a topic-based publish-subscribe pattern using Typescript and Jest.

### Behaviours
1. publishers can send messages with a topic and payload
2. subscribers can subscribe to any topics and provide a call back function
3. subscribers' call back function gets called with the payload if any publishers publish any of the subscribed topics

### Constrains
Publishers and subscribers do not know the existence of each other

### Code
{%gist
https://gist.github.com/rexebin/58d94a0e33f594f575e74d6285b3d380
%}
Learning C# Variables in Public  
Tags: csharp, dotnet, programming, webdev
Published: 2022-01-25 13:12:53

Variables are used to store data in a program. The name and type of variables in C# must be declared before they can be used. Implicitly typed variables can be declared without knowing its type using var.


![Code snippet on how to declare variables in C#](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lwpq0vnkl9x1c7f3zziw.png)
Learning C# in Public
Tags: csharp, dotnet, programming, webdev
Published: 2022-01-25 13:09:54

I'm committing to learning C#/.NET in public. Hopefully my posts will help anyone who's interested in learning more about the language. The first post shows how to print "Hello World" to the console.

![Code snippet of how to print "Hello World!" to the console in C#.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hc313kix1fu8of1q0mk.png)
Driving a robot with a neural network [free meetup online]
Tags: ai, neuralnetwork, robot
Published: 2022-01-25 13:02:52

Have you ever wondered what it takes to drive a robot with a neural network? Take part in a free online meetup: 

https://www.meetup.com/TWF-Meetup/events/283478382/

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irefyav4nnms7drq8n8p.jpg)
](https://www.meetup.com/TWF-Meetup/events/283478382/)
RoadMap To Become Frontend Developer
Tags: webdev, programming, beginners, tutorial
Published: 2022-01-25 12:52:48

Their are so many languages, frameworks, and libraries to choose from, often beginners find themselves scratching their heads on how to start off their development journey. This article aims to help them and provide you the perfect roadmap to becoming the Amazing Front End Developer.

## 🚀 Let's Get Started :-

## Table Of Contents
  * [Html](#html)
  * [Css](#css)
  * [JavaScript](#js)
  * [Git](#git)
  * [Rest API](#rest-api)

### Html <a name="html"></a>

![Html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytpniekcyg5kk4mawv6z.png)
 
HTML is the foundation of Front End Web Development. One thing I notice is beginners trying to learn all HTML tags; you DON'T need to know all tags, just remember some important tag's .

🎥 Some Tutorial's To Learn :-

1 . YouTube
2 . CodeCademy
3 . FreeCodeCamp

And So On.....

### CSS <a name="css"></a>

![Css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q3a6tbmulrj4ws9y5y7x.png)
 
Once you learn HTML, you will be able to create a website, but it will definitely look unprofessional. Now it's time to add Design to it using CSS. For starters, you could focus on only the basics:

And This Also Same You Can Learn From :-

1 . YouTube
2 . CodeCademy
3 . FreeCodeCamp

And So on......

### JavaScript <a name="js"></a>

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

Now, you would like to make your website interactive as well. JavaScript is the tool you need. 

You Can Learn From [w3c School](https://www.w3schools.com/js/)

### Git <a name="git"></a>

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

Whenever we work on a large project, maintaining different versions of the application is a difficult task. We are lucky to have software like **Git** to sort it out for us.

To Learn Git You Can Prefer It's [Documentation](https://git-scm.com) .

### REST API <a name="rest-api"><a/>

When you are working on any real-world application, you would require data from other servers, APIs provide end-points to share data between your application and the various services hosted on the web.

And That's All For Now ....

Their Are Many More Languages , You Can Explore Them At Your Interest 😊
One Way to Cheat Wordle using Javascript
Tags: javascript, gamedev, programming, challenge
Published: 2022-01-25 12:44:40

After creating [my own version of Wordle](https://ozboware.co.uk/one-way-to-make-a-wordle-type-game-using-javascript) I took a look at the code behind the [original Wordle game](https://www.powerlanguage.co.uk/wordle/) to check for similarities and found that it's pretty easy to cheat the game and get not only the word of the day, but every word for the next 5 years. Now, the simplest way to cheat is to just look at the script, but the dev in me just wanted to do more, so I created a function that will push an alert to the screen showing the player the word of the day. It's a simple enough function, you can either paste it in the console (F12, click console, paste and then enter), or you could use it in a browser extension and have the alert each time you go onto the page, you could possibly even wrap it up in a .exe file and run it locally.

So the code is

```javascript
let date = new Date();
let dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let dayName = dayNames[date.getDay()];
let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();
let today = month + "/" + day + "/" + year;
let startDate = new Date("06/19/2021");
let endDate = new Date(today);
let days = Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
fetch ("https://www.nytimes.com/games/wordle/main.4951a4aa.js")
    .then(x => x.text())
    .then(y => {
        let wordArray = y.slice(y.indexOf('var Ma='), y.indexOf(',Oa='))
            .replace('var Ma=', '')
            .replace('[', '')
            .replace(']', '')
            .replace(/"/g, '')
            .split(',');
        alert('The word for today (' + dayName + ' ' + day + '/' + month + '/' + year + ') is ' + wordArray[days].toUpperCase());
    });
```

go to the [Wordle screen](https://www.powerlanguage.co.uk/wordle/), paste that code into the console, submit it and an alert will pop up telling you the wordle of the day or something like

![Wordle cheat demonstration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs2nrzidbljirgraj6c5.png)
Database Cache for Laravel
Tags: laravel, php, database, cache
Published: 2022-01-25 12:39:18

---
title: Database Cache for Laravel
published: true
description: Enable database cache on Laravel queries from Models on the easy way.
tags: Laravel, PHP, Database, Cache
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcaqcgosc3iien2g49tp.png
---

Today I have released my new Laravel package `Laravel Database Cache` https://github.com/eusonlito/laravel-database-cache

This package allow to cache database queries from Models without pain.

You can configure the cache to use tags (on `redis`) and flush all database caches at once: https://github.com/eusonlito/laravel-database-cache#flush-caches

You can install the package via composer:

```
composer require eusonlito/laravel-database-cache
```

Publish the default configuration in `config/database-cache.php`:

```
php artisan vendor:publish --tag=eusonlito-database-cache
```

Add this lines to `.env` file:

```
DATABASE_CACHE_ENABLED=true
DATABASE_CACHE_DRIVER=redis
DATABASE_CACHE_TTL=3600
DATABASE_CACHE_TAG=database
DATABASE_CACHE_PREFIX=database|
```

And configure your models to use the `cache` method with:

```php
<?php declare(strict_types=1);

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Eusonlito\DatabaseCache\CacheBuilderTrait;

class User extends Model
{
    use CacheBuilderTrait;
```

Now, the simple way to use is:

```php
$articles = Article::latest('published_at')->take(10)->cache()->get();
```

The results will be cached every time you will call this query.

Also you can set a custom cache time for this query:

```php
$articles = Article::latest('published_at')->take(10)->cache(60)->get();
```

Or a custom cache name:

```php
$articles = Article::latest('published_at')->take(10)->cache(60, 'latest_articles')->get();
```

You have more info at package https://github.com/eusonlito/laravel-database-cache

Enjoy!
Track Scroll event in reactjs
Tags: react, javascript, html, programming
Published: 2022-01-25 12:37:53


Code...
```
 import { useState } from "react";
import "./styles.css";

export default function App() {
  const [scroll, setScroll] = useState(0);
  const onScroll = () => {
    const scrollY = window?.scrollY;
    const scrollTop = document.getElementById("test").scrollTop;

    setScroll(scrollTop);
  };
  return (
    <div className="App">
      <h1>Scroll Position {scroll}</h1>
      <div
        id="test"
        onScroll={onScroll}
        style={{
          backgroundColor: "white",
          zIndex: "100",
          height: "200px",
          overflowY: "scroll"
        }}
      >
        content...
      </div>
    </div>
  );
}

```
[Codesandbox](https://codesandbox.io/s/autumn-framework-yn2tj?file=/src/App.js:0-2554)