teleren/devto huggingface dataset:
Lazy Loading Images In Next.js
Tags: javascript, webdev, beginners, tutorial
Published: 2022-05-27 19:23:31

## Introduction
We have all heard this term before. Lazy Loading. What is it anyways?

Lazy loading postpones the loading of resources on a page, in this case an image, until they are actually required. Rather than loading these resources as soon as the page loads, as is usually the case, they are delayed until the user need them. They have numerous advantages. We can make our web pages load really quickly with lazy loading. In this guide, we will cover how to lazy load images using Next.js.

Next.js comes default with an `Image` component. Lazy loading is enabled by default in the Next.js `Image` component. It is not only useful to the end-user, but it is also beneficial to the server because it does not have to execute image generation for images that may or may not be required.

## Installation and Setup
You can create a new Next.js application using the following command:
```sh
npx create-next-app lazy-load-images
```

Let's start the application by running the following command
```sh
npm run dev
# or
yarn dev
```
We are running our application in the development server. Open your browser and navigate to https://localhost:3000.

## Lazy Loading
Add a new image file to the `public` directory. In the `pages` directory, create a new file `lazy-load.js`. This will be our Next.js page.

Add the following to the fil
```jsx
export default function ImagePage() {
    return (
        <h1>Image Page</h1>
    );
}
```
Visit https://localhost:3000/lazy-load to preview the page. Now that the page has rendered succesfully, we can continue to implement lazy loading.

First import the `Image` component from Next.js
```jsx
import Image from "next/image";
```

Next, replace the `<h1>` tag with this the `Image` Component
```js
<Image
  src="/github.jpg"
  alt="Github"
  width={600}
  height={450}
  layout="responsive"
  loading="lazy"
/>
```

Now preview it in the browser to see the results. Add a lot of images and see lazy loading in action as you scroll.
Librengine - Privacy Web Search Engine
Tags: cpp, showdev, opensource, privacy
Published: 2022-05-27 18:43:09

[![https://raw.githubusercontent.com/liameno/librengine/master/demo.png](https://raw.githubusercontent.com/liameno/librengine/master/demo.png)]()

https://github.com/liameno/librengine

#Librengine
#### This is a privacy search web engine with RSA encryption and with its own web crawler.
#### No ranking, tracking, cookies.

## Features
#### Crawler
- Cache
- Robots.txt
- Update info after time
- Proxy
- Queue (BFS)
- Detect trackers
- Http to https
- Normalize url (remove #fragment, ?query)

#### Website / CLI
- Encryption (rsa)
- API
- Proxy
- Node Info
- Nodes
- Rating (min=0, max=200, def=100)

License: AGPL 3.0
Hello World? - IT Support
Tags: beginners, writing, productivity, codenewbie
Published: 2022-05-27 18:30:33

Hi friends,

My name is Wilson and I want to improve my writing as well as educate myself and others on technology.

I've recently started diving into the IT Industry, and I want to interact with like-minded people who want to grow and learn.

Throughout this month, I have been working on obtaining a true technical support job through a help desk or an MSP type environment, and that is still in progress.

Currently, I am working on obtaining the Google IT Support certification (I understand it does not hold its weight up to CompTIA A+ but it is a stepping stone to get there). Once I finalize that, I will be off to the races on A+ to finalize that before the current version expires.

I would like to build the foundation of knowledge to ultimately end up a career in Cybersecurity, but first I must learn how to crawl/walk before I can full on sprint on that site.

A recent quote I came upon was, “**We don't have to do all of it alone. We were never meant to.**”.

Thanks for taking the time to read this, if you have any advice on writing or IT Support in general it would be greatly appreciated.

One thing I have been working on lately is seeking out help and resources.
![Asking for Help](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dfwbq8qrv9jbluk23d6.jpg)

Have a great week ahead. May we succeed in our endeavor and help educate others along the way. 

Cover Photo: [Alexandre Debiève](https://unsplash.com/photos/FO7JIlwjOtU)
Second Image: [Brett Jordan](https://unsplash.com/photos/erLrY4aKztg)
Chrome Extension you’ll fall in 💚 with
Tags: extension, developers, webdev, productivity
Published: 2022-05-27 18:26:58

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


Welcome to My series _“One New Thing I Learned Today”_. In this series i’ll be sharing unique websites, apps, technologies, places, facts or any other amazing thing that I find.

So today I am here with an amazing chrome extension for you, especially if you are someone who is interested in tech and development.

## daily.dev | The Homepage Developers Deserve
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d40lzzl73ozb5sx5sfsi.png)

**daily.dev** will give you a **feed full of the hottest developer news all in one place as well as personalized according to your interests.** With this you can read more Quality articles, Stay up to date and Save time. This extension curates a list of best articles from more that 400 sources and you can see all those by just opening up a new tab. **You can also have discussions with other developers, upvote posts and even bookmark the ones that you like.**

https://chrome.google.com/webstore/detail/dailydev-the-homepage-dev/jlmpjdjjbgclbocgajdjefcidcncaied

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

This extension is **completely Free** and once you start using it, pretty soon it’ll become your **favorite place to find all developer related news and articles**. So I definitely recommend you to check this one out.

---
Img Src- unsplash and chrome web store
> **I Hope You Found The Post Helpful😄**
> _Follow Me For More Such Content!_
Firebase
Tags: firebase, firestore, react
Published: 2022-05-27 18:24:48

Backend as a Service (BaaS) is what comes to my mind when a front end developer says they want to integrate backend services without actually writing code. This is to allow them concentrate on the front end. React is a front end javascript library for building user interface components. It has gained so much popularity due to its declarative nature, eliminating most of the heavy lifting from the developer.
To integrate Firebase into our React app, we need to first get the web configuration object and then use it to initialize Firebase in our react app. Firebase includes services such as authentication and authorization and provision of firestore database to store data.
pg_stat_statements in YugabyteDB
Tags: yugabytedb, postgres, monitoring, sql
Published: 2022-05-27 18:14:26

In YugabyteDB, [distributed SQL](https://www.yugabyte.com/tech/distributed-sql/) database [using PostgreSQL](https://www.yugabyte.com/tech/postgres-compatibility), the pg_stat_statements extension is installed by default. However, statements are gathered locally in each node, which mean that you need to query `pg_stat_statements` or call `pg_stat_statements_reset()` on each node. YugabyteDB is cloud native, you can add and remove nodes. With [YugabyteDB Managed](https://www.yugabyte.com/managed/) or [YugabyteDB Anywhere](https://www.yugabyte.com/anywhere/) this is done automatically. If you are using YugabyteDB for free, you have to automate it.

I'm showing an easy way to do it here.

First, let's create a table that will hold the statements gathered from all nodes, with the `host` it comes from and `ts` the timestamp when it was gathered:
```sql
drop table if exists ybwr_statements ;
create table ybwr_statements  as
select now() as ts,'' as host, * 
from pg_stat_statements where null is not null;
```
Using a Create Table As Select makes it independent on the table structure which may evolve though versions.


Now, the plpgsql code to gather from all nodes, as an example.
- I query the list of servers from `yb_servers()`
- I use COPY TO PROGRAM to execute `ysqlsh`, the `psql` equivalent that is present on each node
- I find it from the `postmaster.opts` file. You can also `find` it or get it from the `yb-tserver` working directory
- I run an `insert into ybwr_statements select '%s','%s',* from pg_stat_statements` which I pass as STDIN to `ysqlsh` though the COPY TO as I need an input query input anyway
- I also reset with `pg_stat_statements_reset()` is the gathering is successful (calling `ysqlsh`with `-v ON_ERROR_STOP=1`)
- to debug it, I add ` > /tmp/log.txt 2>&1` at the end of the command line. You may prefer to use COPY FROM PROGRAM, passing the queries with `-c`, and store the output in a table.

Here it is:
```sql
do $DO$
declare i record;
begin
for i in (select now() as ts, host from yb_servers()) loop
 execute format(
  $COPY$
  copy (select $SQL$ insert into ybwr_statements select '%s','%s',* from pg_stat_statements; select pg_stat_statements_reset(); $SQL$ ) to program
   $BASH$ $(awk '{sub("/postgres/bin/postgres .*","");print}' ./postmaster.opts)/bin/ysqlsh -h $(hostname) -v ON_ERROR_STOP=1 $BASH$
  $COPY$
 ,i.ts,i.host);
end loop;
end;
$DO$
;
```

Then, you can query `ybwr_statements`:
```sql
select ts, host, calls, total_time, query 
from ybwr_statements 
order by total_time;
```

Here is an example on an idle database where I captured only my capturing queries:
![screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03bgyboi8k3tu7uo0jnc.png)

This is an example to show the technique. You can schedule it, like every hour, and you will have hourly snapshots of queries in the `ybwr_statements` table. You may choose not to call `pg_stat_statements_reset()` and will diff the snapshots on querying.
GIAY U2
Tags: javascript, beginners, programming, tutorial
Published: 2022-05-27 18:04:18

**Giày U2**
Địa chỉ: 320/14 Trần Bình Trọng Phường 4 Quận 5 TPHCM
Email: giayuhigh@gmail.com
Liên hệ: 0909872689
[https://giayu2.com/danh-muc-tin-tuc-u-high/](https://giayu2.com/danh-muc-tin-tuc-u-high/)
[https://giayu2.com/le-thanh-toan/](https://giayu2.com/le-thanh-toan/)
[https://giayu2.com/customer-feedback-u-high/](https://giayu2.com/customer-feedback-u-high/)
[https://www.facebook.com/giaydecaou2/](https://www.facebook.com/giaydecaou2/)
[https://twitter.com/uhigh_giayu2](https://twitter.com/uhigh_giayu2)
[https://about.me/giaytangchieucaonu](https://about.me/giaytangchieucaonu)
[https://www.youtube.com/c/u2store](https://www.youtube.com/c/u2store)
[https://www.instagram.com/giaynu_tangchieucao_catinh](https://www.instagram.com/giaynu_tangchieucao_catinh)
Hack to download Source Code of any Website 🔥⚠️
Tags: coding, hacks, programming, productivity
Published: 2022-05-27 17:34:12


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1usg7gqiotu003e9xd9.jpg)
## Steps to do:

- First Download this Extension: Save All Resources from Chrome Web Store.
- Now go to any Website. (e.g. https://www.instagram.com )
- Then press the F12 key for Developer Options.

![Refresh the tab if not showing.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yge9eiap6jwm4wbue2da.png)

- Then find and click on the “ResourceSaver” tab on your system.
- Then check all options.
- And click on “Save All Resources”.
- Done! Your Downloaded File has an index.html file and other supported files of your chosen website.

Thanks for reading till here. ❤️

If you like this blog please don’t forget to share and also give some suggestions as this is going to be my first medium blog.


➡️ For more checkout: https://bio.link/known4tech
🎉 Another interview is out, what a week 🎉
Published: 2022-05-27 17:31:53

I have recently been invited to Mateusz Bogolubow's podcast [DevMentor.pl](https://devmentor.pl/b/od-juniora-do-regulara). This podcast aims to provide help and support for those just starting their journey in tech.

We covered a lot of topics in our chat, among them:

✅ How to make the transition from junior software engineer to mid level engineer.
✅ What advice I would give to someone just starting their first job in tech.
✅ What career development looks like for software engineers in large tech companies like Intercom.

It was a lovely experience, and I am pleased to observe that I no longer get that stressed out about giving interviews and public speaking in general. Ah, the joy of continuous self-improvement and the underestimated power of tiny steps 💖

It was also my first podcast recorded in Polish! Hopefully, not the last one 🤞

{% embed https://youtu.be/klGEg9lc4xs %}
Loop through Object in Javascript
Tags: javascript, beginners
Published: 2022-05-27 17:31:35

One of my colleague asked me today on how to loop through objects in javascript, and I thought it will be a good opportunity to put in on a short article. 🤓

There are several of methods of looping through object in Javascript:

- `Objects.keys()`

- `Objects.values()`

- `Objects.entries()`

- `for ... in` loop

Let's look an object below

```js
const superHeroNicknames = {
  'IronMan': 'Mecha Man 🚀',
  'Thor': 'Thunder Bro 🌩',
  'Hulk': 'Green Guy 🟩'
}
```



We will use this data for the rest of this article. Let's jump to the explanation!

## 1. `Objects.keys()`

`Objects.keys()` was introduced within the release of ES6. As the name of the method says "keys", this methods will returns an array of object's keys.

```js
const keyRes = Objects.keys(superHeroNicknames);
for (let key of keyRes) {
    console.log(key + " ==> " + p[key]);
};

// Result:
// IronMan ==> Mecha Man 🚀
// Thor ==> Thunder Bro 🌩
// Hulk ==> Green Guy 🟩
```

This method is useful to get a list of the object properties quickly.

## 2. `Objects.values()`
`Objects.values()` was the opposite from `Objects.keys()`. instead returning a keys, it will returning an array of object's values. This method is very useful to get a list of all property values quickly.

```js
const keyVals = Objects.value(superHeroNicknames);
for (let val of keyVals) {
    console.log(val);
};

// Result:
// Mecha Man 🚀
// Thunder Bro 🌩
// Green Guy 🟩
```

## 3. `Object.entries()`

`Object.entries()` was introduced in ES8. This method will returns a list of an array of keys and values. This method is very useful to convert an object into an array. ✨

```js
const res = Objects.keys(superHeroNicknames);
for (let [key, val] of res) {
    console.log(`${key} ==> ${val}`);
};

// Result:
// IronMan ==> Mecha Man 🚀
// Thor ==> Thunder Bro 🌩
// Hulk ==> Green Guy 🟩
```

Please note that, this method is still not supported natively by Internet Explorer, if you are targeting those browsers polyfill may be required to do.

## 4. `for ... in` loop

`for ... in` loop method is an another way to loop through an object. This method is already supported for all browser, including Internet Explorer.

```js
for (let key in superHeroNicknames) {
      if (!superHeroNicknames.hasOwnProperty(key)) {
        //The current property is not a direct property of p
        continue;
    }
    console.log(`${key}: ${superHeroNicknames[key]}`);
}

// Result:
// IronMan ==> Mecha Man 🚀
// Thor ==> Thunder Bro 🌩
// Hulk ==> Green Guy 🟩
```

One caveat when using `for ... in` loop is **it will loop all the properties along the prototype chain**. Therefore, always make use of the `Object.hasOwnProperty()` to determine if the current property in iteration is really a property of the object. ❗️

---

That's it for this article. One final note, if you are only needed to check whether an object has a specific property, you can use `Object.hasOwnProperty()` rather than to do a loop through object and check it's properties one by one.
MUI 5 and react 18. How to mask the entered date with (*) asterisk symbol in mui datepicker
Published: 2022-05-27 17:25:50

In my application, there is an option for capturing date of birth of user. Once user entered date or selected from calendar, I want to show number as asterisk. 

**Package version:**

"@mui/material": "^5.6.2",
"@mui/lab": "^5.0.0-alpha.71",
"date-fns": "^2.24.0",
"react": "^18.0.0",

Example:

If user enter DOB 05/11/1990(mm/dd/yyyy), then need to show like * * / * */ 1990.


Actual
[Actual result in screen][1]

Expected:
[Expected result in screen][2]

Code: 
[Datepicker Code][3]


  [1]: https://i.stack.imgur.com/VZjHH.png
  [2]: https://i.stack.imgur.com/Qp6ta.png
  [3]: https://i.stack.imgur.com/9QcFX.png
How to Debug Reactjs App running on iPhone in Safari
Published: 2022-05-27 17:03:27

Sometimes Chrome and Safari dev tools mobile view for a web app aren't perfectly accurate so it's important to test it on a real mobile device.

This is how to debug a Reactjs application running on an iPhone.

## Step 1) Start your application locally
This usually entails running `yarn start` or `next dev`

## Step 2) Start ngrok 

This allows you to access your local app on your phone and edit files in real-time.

## Step 3) Allow Web Inspector on iPhone

This can be turned on in Settings > Safari > Advanced

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r2mdfxt0u9z7yp0chdg.jpg)
 

## Step 4) Open Reactjs app on Safari

Instead of using http://localhost:3000/ open your app using the ngrok url in Safari on your phone

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

## Step 5) Open Dev Tools in Safari

If you've correctly followed the previous steps now you can open Safari on your laptop by opening Safari > Develop > Device > ngrok

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rg7xq4827xhq1c0y4dpz.png)
 
## Step 6) Debug!

With your React app running locally from Safari on your phone and dev tools opened in Safari you can now debug your app with the same visibility you could from Chrome dev tools.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0h3j303n546e1wwyezs.png)
Day-96 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-05-27 17:03:05

Date:27/05/2022
Day:Friday

Today, I started at about at 10:30 am as I was in progress to complete the java script cource and the bidding project so, today I started with the java script cource s firstly I started with  inheriting a constructor function in JavaScript. Constructor functions define the prototype of the properties an object will contain. Using the constructor function, we can create a new object after passing the required parameters.Inheriting a previously defined constructor function means using the parameters of the previously defined function along with adding some new parameters to the newly defined constructor function.after this I started with encapsulation Encapsulation is when we define the access level of our classes. The public access modifier doesn't impose any restrictions. The private access modifier only allows members to be accessed within the current class, not outside of it.this way my day ended up and I got to learn many new things.
Resolving PostgreSQL issues when switching OS's
Published: 2022-05-27 16:53:22

When switching from using Ubuntu on my Virtual Machine to using it as my primary operating system, I ran into a fun error and thought I might as well document my process in case anyone had a similar problem. 

I got my system up and running, and cloned a Rails app I was working on previously. After running `bundle install` the local server seemed to boot up, but openiing the browser I saw this fun error: 
 
`PG::ConnectionBad: could not connect to server: No such file or directory
	Is the server running locally and accepting
	connections on Unix domain socket "/var/run/postgresql/.s.PGSQL.5432"?`

After a couple of hours of scouring the internet to get a better understanding of what was happening, I realized that PGSQL.5432 was referring to a port number - and decided to check if my app's current TCP port on the app's config/database.yml file matched with what postgres was actually running. 

So: Navigate to the file, and in the terminal type in `pg_lsclusters`. They were missmatching! So I corrected the mistake in the database.yml 
file, and was greeted with a new error:

`We could not find your database: facebook_clone_development. Which can be found in the database configuration file located at config/database.yml.
To resolve this issue:
Did you create the database for this app, or delete it? You may need to create your database.
Has the database name changed? Check your database.yml config has the correct database name.
To create your database, run:
bin/rails db:create`

Running the database creation, I was now told that `ActiveRecord::StatementInvalid: PG::InsufficientPrivilege: ERROR:  permission denied to create database`

Progress! This gave me an idea based off of the information I read thus far about PostgreSQL trying to wrap my head around the problem: A user, with the proper 
privileges, and a password, are normally needed to create a database. 

So away we go, starting with `sudo -u postgres createuser mgrigo`. This uses postgres to create the user you wish to use to create the database. Next, let's give ourselves the ability to create databases `ALTER USER mgrigo CREATEDB;`. Now we should be able to create the database!

Hope back into your terminal, and run `rails db:create`, which should create the database. Now all you need to do is migrate your database, and you should be all set. 

Starting out I didn't fully understand the complexity of PostgreSQL, but this experience definitely humbled me and gave me a newfound appreciation for it.
Fastify - your next Web Framework
Tags: node, javascript, performance, architecture
Published: 2022-05-27 16:50:43

---
title: Fastify - your next Web Framework
published: true
description: 
tags: node,javascript,performance,architecture
cover_image: https://images.unsplash.com/photo-1587654780291-39c9404d746b?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=5070
---

Recently I started to develop some API's using Fastify and I really impressed.

Basically, Fastify is a modern web framework that was built to be high performant, extensible with concepts about decorators and plugins, schema-based, logging, developer-friendly, and typescript ready. This framework has a big active community that for me is really important when I choose a library. 

What really impressed me was the big ecosystem with a hundred core and community plugins, the philosophy behind decorators and plugins that really give us powerfully on our applications, and how fast Fastify handles requests. 

The best thing about it is if you want to not use their plugin, like fastify-mongodb, is not a problem. The framework allows you to use mongodb in your way. Seriously, I really like the plugins, it is awesome. 

But, and the Express?

Yes, Express is a big web framework and exists a lot of projects stable in production. In case you use or like express, it is ok, no problem. But I suggest that in your next project, give a chance to Fastify and I believe that it will surprise you.

As I said, I developed some products using Fastify, and to help me with the basic configurations and other stuffs, I decided to create a base project on my [Github](https://github.com/leandroandrade/fastify-cjs) in my own way. Feel free to use it.

https://github.com/leandroandrade/fastify-cjs


Anyway, I continue studying Fastify and how to create great solutions using this framework. I don't know everything about the framework, but I in continuing to learn to do my best job.

I hope that it helps you.
Give feedback for my portfolio
Tags: python, webdev, programming, discuss
Published: 2022-05-27 16:47:01

So I'm not really good at front-end development, you can tell by seeing my portfolio...
But can you rate it out of 10, and tell me how I can make it look better.

---

Here is my portfolio link: 
https://vulcanwm.is-a.dev

---

I used Python for the back-end of the portfolio website (yes it needed backend) and used HTML, CSS, JS for the front-end.