teleren/devto huggingface dataset:
Create Google Clone using html css javascript | Google Clone code
Tags: javascript, css, html, googleclone
Published: 2021-12-24 07:30:25

In this blog, we learn that how we create a Google Clone. We use HTML, Css, and javascript for this Google Clone. Hope you enjoy our blog so let's start with a basic HTML structure for a Google Clone.

HTML code

```<body>  
  <ul class="nav nav-pills">  
   <li><a target='_blank' href="https://accounts.google.com/ServiceLogin?hl=en&passive=true&continue=https://www.google.co.uk/%3Fgws_rd%3Dssl" class="colorfix"><button class="btn" role="button">Sign in</button></a></li>  
   <li>  
    <a target='_blank' title="Google apps" class="firstsbuttons" href="#"><img class="quad" src="#" height="22" width="22"></a>  
   </li>  
   <li><a target='_blank' class="firstsbuttons" href="#">Images</a></li>  
   <li><a target='_blank' class="firstsbuttons" href="https://mail.google.com/mail/?tab=wm">Gmail</a></li>  
  </ul>  
  <div class="page">  
   <img class="logo" src="https://www.google.it/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">  
   <br><input id="searchme" class="search" title="Search" type="text"><br>  
   <div class="Bcontainer">  
    <div class="button left">Google Search</div>  
    <div class="button right">I'm Feeling Lucky</div>  
   </div>  
  </div>  
  <footer class="nav nav-tabs">  
   <ul class="bottomone rightone">  
    <li><a target="blank" href="#">Settings</a></li>  
    <li><a target="blank" href="#">Terms</a></li>  
    <li><a target="blank" href="#">Privacy</a></li>  
   </ul>  
   <ul class="leftone bottomone">  
    <li><a target="blank" href="#">About</a></li>  
    <li><a target="blank" href="#">Business</a></li>  
    <li><a target="blank" href="#">Advertising</a></li>  
   </ul>  
  </footer>  
 </body> 

```
There is all HTML code for the Google Clone. Now, you can see output without CSS, then we write css & javascript for Google Clone [read more](https://www.codewithrandom.com/2021/12/google-clone-html-css-javascript-google.html)
ETHme - your chic web3 identity
Tags: web3, ens, ethereum
Published: 2021-12-24 07:20:53

Everybody knows [ENS domains](https://ens.domains/). And everyone knows that you can also store text records (hopefully everyone knows it!). With those data dApps can easily enrich wallets. But what was missing for me: a web3 profile page, with which I can enrich my data without gas costs. Comparable with bio.link or linktree. Biggest difference: decentralized, and it's your data and not mine.

At first I asked myself the question: why do you actually need this? The answer was (at least for me) quite simple: identity is probably the most important asset, I want to have that completely under my control. Now before everyone starts screaming: sure, that ship has sailed. We're all on Twitter or LinkedIn. But well, you have to start somewhere! So why not now. And of course everyone can create their own page and then store the IPFS content hash under their ENS domain. But even for that you need some basic technical knowledge. Why not create a simple way to change text or URLs without gas costs. Here we go.

So how does the data get to the profile page? There are exactly two sources: ENS and IPFS. The ENS text records are available anyway and are read and displayed accordingly. The IPFS data is used for additional enrichment. You can set what you want with it. It is also possible to set an avatar and a header image.

This is the short story behind [ethme](https://ethme.at). I will also write a blog post in the next days, how [ethme](https://ethme.at) is technically implemented.

Have fun!

btw: just add your ETH address or ENS domain to see your profile! mine is: [https://ethme.at/urbanisierung.eth](https://ethme.at/urbanisierung.eth)
The C in PHP - Merry Christmas 🎄
Tags: php, webdev
Published: 2021-12-24 07:14:48

## So long and thanks for all the code!

It's Christmas time and we've seen a lot of different sides of PHP. If the C in PHP stands for Christmas, where does that C actually come from? Well, all this goodness that is PHP comes from everyone that contributes to the language, uses it, writes about it and talks about it. It's the **PHP community** that makes this a story of sharing and caring. In short: it's Christmas!

For this final article in the series we look back at previous articles. When I started writing this series I hoped to share all that I learned along the way, and hopefully learn something from you as well. I can happily say that I have grown.

All in all, I have written 24 articles, and I dare not think about how many hours of reading and writing that entail (*but WakaTime did that for me and counted 28 hours*). But let me share with you a bit of your participation in this series.

>![Engagement and read times per article in the series](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fbv0b9qhhy69zw1ec4gv.png)
>*Overall, the engagement rate has increased over time. If the articles were a bit longer then the engagement rate dropped a bit. (Engagement rate is interactions per views in percent)*

My most popular (or infamous) article is probably [Do they know it's C in PHP 🎄](https://dev.to/andersbjorkland/do-they-know-its-c-in-php-4ojh). It has been viewed 11907 times. This is however quite an arbitrary measurement as many views came from outside of DEV, which meant less engagement. Which article garnered the most engagement then?  

Well, it was [It's the most insecure code in the world](https://dev.to/andersbjorkland/its-the-most-insecure-code-in-the-world-1anb). It got 7% engagement rate (*that is likes and comments per view*). I like to see what you are interested in, and perhaps it was a strong title, or an engaging subject. Overall though, it was pretty fun to write but it got more attention than I expected.  

My personal favourite is [Is PHP search trends a WordPress phenomena?](https://dev.to/andersbjorkland/is-php-search-trends-a-wordpress-phenomena-a1m). I thought it intriguing to see how dependent the search popularity between the two are. If you haven't checked it out, I recommend you to.

Now, if you were to read all of my articles, DEV expects you to spend about 61 minutes reading them. Myself am quite a slow reader when it comes to technical subjects so it would probably be double that. 

And in closing, I want to thank all of you that have read my articles or commented. You have viewed my articles 40092 times, and reacted in some way 298 times. These are not astronomical numbers but they have meant a lot to me. 

Did you have a favourite or learned something new throughout this series?

🎅🤶 **Merry Christmas and a happy New Year!** 🐘🎁
ngx-joyride: how to skip null step
Tags: angular, ngxjoyride
Published: 2021-12-24 06:59:54

## problem
- ngx-joyride: in some case we want to skip null step

## solution
- create web-guide service and add skip step if current step is not found in document tree

```js
import { Injectable } from '@angular/core';
import { JoyrideService, JoyrideStepService } from 'ngx-joyride';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class WebGuideServiceCopy {

  // is joyride running
  isRunning$ = new BehaviorSubject<boolean>(false);

  get running() {
    return this.isRunning$.value;
  }

  constructor(
    private joyrideService: JoyrideService,
    private joyrideStepService: JoyrideStepService
  ) {}

  /**
   *
   * @param steps
   * @param showCounter
   */
  startTour(
    steps: string[],
    showCounter: boolean = false,
    startWith: string = steps[0]
  ): void {
    this.isRunning$.next(true);
    console.log('tours', steps);
    this.joyrideService
      .startTour({
        steps: steps,
        showCounter: showCounter,
        themeColor: '#003f9e',
        stepDefaultPosition: 'bottom',
        startWith: startWith,
      })
      .subscribe(
        (currentStep) => {
          const currentStepElement = document.querySelector(
            `[joyridestep='${currentStep.name}']`
          );

          if (!currentStepElement) {
            // skip this step
            this.joyrideStepService.next();
          }
        },
        (error) => {
          console.log(error);
        },
        () => {
          // when joyride close
          this.isRunning$.next(false);
        }
      );
  }
}

```
Optimize Shopify Store Without SEO App
Tags: shopify, seo, ecommerce
Published: 2021-12-24 06:55:59

If you are tired of Shopify SEO apps, this post is for you. If you don't know why people want to have less number of app on their Shopify store, then the reason is - they make your store load slow, and you certainly lose money when your product pages load slower than your competitors'.

Okay, let's get to the business. 

## Shopify SEO Best Practices
If you really want to get rid of SEO apps, then you must keep these following points in mind, while upload products to Shopify Store specially. 

If you are planning to launch your Shopify Store, then you can leverage the full benefits of this post, otherwise, if your store is already live, then you can make changes to your store and make sure that you follow these best Shopify SEO practices while uploading new products. 

0. Perform Keyword Research for Each Product (SEO)
1. Compress your images locally before upload (Performance)
2. Rename images accordingly (SEO)
3. Add alt tag to your product images (SEO)
4. Make your Product description scannable (UX)
5. Design Product page for better experience (UX)
6. Don't have email opt in product pages (UX)
7. Don't have Express Checkout on Product pages (UX)
8. Add Schema Markup on product page (SEO)
9. Add Open-graph Microdata Tags for Product page (SEO)
10. Use Lang attribute (SEO)
11. Create Internal Links (SEO)
12. Use Shopify OS 2.0 Theme (Performance & Security)
13. Use Shopify Sales Channels for More Visibility (SEO)
14. Hire Affiliates Through Affiliate Networks

### Product Images are Important
Here is another thing that you cannot manage once you have uploaded your products easily, that are images. So, compress images, rename them according to your product, and don't forget to perform keyword research for each product if you want visitors from search engines.

## Optimize for Small Screen First
Believe me or not. All the stores I have worked with, get more traffic and sales from small screen. I would always start theme design and performance optimization for small screen first and then desktop. 

## Choose Shopify Theme for Small Screen
There are two things that have noticed recently, there are a few Shopify themes that give you options to upload images for mobile too and also render content separately for mobile devices.

There are just a few themes that use modular design approach to building theme. This is important, because the modular design pattern only loads required files and assets, and that makes your pages load faster and code becomes easily maintainable.


I am a lazy person, I don't like to work, but if you really need a [Shopify SEO Expert](https://tubemint.com/product/shopify-seo-expert/). 

Thanks, Happy Coding!!
Select Your Hidden Gems of Oahu Tour
Tags: travelinhawaii, oahutour, paradise
Published: 2021-12-24 06:49:25

It is normal to feel frustrated when trying to secure their future. A daunting motivation and encouragement flourished all over the Internet as the American Dream simultaneously thrived.
The American Dream is an idea that people can achieve their highest hopes and dreams. It includes living a luxurious existence. While such endeavors may not be possible, they are achievable if someone is dedicated to their goals.

Working too much can only make it challenging to realize one’s dreams. Overworking oneself beyond their limits can result in sudden illnesses that pile up and even worsen mental health. These investments are not saved for the future but will pay hospital bills and other costs.

Because of its many benefits, a hardworking person should take a vacation. A person will not only feel better, but there will be an improvement in their relationships with friends, family, and colleagues. An individual will feel more motivated and ready for their next assignment.

How?
A vacation can be an excellent way to relax and recharge. A daily routine can become tiring, especially if the focus is on their goal rather than the minor changes caused by hard work. They'll feel discouraged and helpless because they don't see the whole picture.

A short break or a longer one can make a person happier and healthier mentally and physically. It's the ideal time to let go of all responsibilities and recharge batteries.
Hawaii is a popular destination for vacationers looking for peace and tranquility. In documented statistics created by hawaiitourismauthority.org, there was a total of 2,751,849 tourists creating memories in the first half of 2021 in Hawaii.

While this number is lower than in the first half of 2020, it still represents many tourists enjoying the wonders of Hawaii's natural beauty and activities like [sightseeing Waikiki](https://gohawaiitours.com/oahu-tours/) and other [fun activities Oahu](https://gohawaiitours.com/oahu-tours/).

Don’t wait for the perfect moment and seize each opportunity. Go sightseeing, experience a Luau, and so much more on Oahu with Go Hawaii Tours and read the [infographic](https://gohawaiitours.com/go-hawaii/things-to-do-in-oahu-a-travel-guide-to-byodo-in-temple-infographic/) to learn more about the Aloha State's treasures:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8c0o0iats4gl6rhblkt.PNG)
CRUD Operations
Published: 2021-12-24 06:49:11

The terms CRUD (create, read, update, and delete) stand for create, read, update, and delete. The four basic roles of persistent storage are as follows.
CREATE procedures: To create a new record, use the INSERT command. In the SQL relational database application, the Create function is called INSERT. In Oracle HCM Cloud, it is called create.
•	db.collection.insertOne() New in version 3.2 in MongoDB
•	db.collection.insertMany() New in version 3.2 in MongoDB

READ procedures: The primary keynoted within the input parameter is used to read the table records. The read function is like a search function
•	db.collection.find()


UPDATE procedures: Executes a UPDATE statement on the table based on the primary key supplied for a record in the WHERE clause. The update function is used to modify existing records that exist in the database. To fully change a record, users may have to modify information in multiple fields.
•	db.collection.updateOne() New in version 3.2 in MongoDB
•	db.collection.updateMany() New in version 3.2 in MongoDB
•	db.collection.replaceOne() New in version 3.2 in MongoDB


DELETE procedures: In the WHERE clause, deletes a specific record. The delete function allows users to remove records from a database that is no longer needed.
•	db.collection.deleteOne() New in version 3.2 in MongoDB
•	db.collection.deleteMany() New in version 3.2 in MongoDB
React v17 - Redirect route if the URL didn't exist
Tags: react, programming, webdev
Published: 2021-12-24 06:33:57

I'm practicing react v17 and react-router-dom v6 a bit lately and I stumbled to a simple problem.

> How to redirect a page when the URL doesn't exist in your application?

Kinda like this. Let say you went to localhost:3000/login and that URL doesn't exist in your react application. What I want to happen is to redirect to a certain URL, like localhost:3000/404

What I did to solve this problem was, first is to create MissingRoute.js

```jsx
import { Navigate } from 'react-router-dom';

function MissingRoute() {
   // pathname can be change based on what url you want to redirect to
   return < Navigate to={{pathname: '/404'}} / >
}

export { MissingRoute }
```

Then I use it in the routes:

```jsx
import { MissingRoute } from './path/to/file';

function App() {
  return (
    <BrowserRouter>
     <Routes>
      <Route path="*" element={<MissingRoute/>} /> 
     </Routes>
    </BrowserRouter>
  )
}
```

This way it would redirect to localhost:3000/404 each time you input an invalid URL.
How do I handle auth in this case?
Tags: help, nextjs, javascript, webdev
Published: 2021-12-24 06:12:23

From the backend, I'm getting a URL for Google login which looks something like this: `'https://somewebsite.com/api/v1/auth/login/google` clicking on this opens google login page & after login, it returns access_token.
I was thinking to use the NextAuth library for it https://next-auth.js.org/providers/google but it requires client_id & client_secret also which is not required in my case (it's being handled in the backend). 
How do I handle this login using NextAuth or any other bettor method someone can suggest?
A simple tool to create a Software Requirements Specification document
Published: 2021-12-24 06:07:11

I have been a UI/UX designer and have been an agency owner in my career.

Thanks to my past colleagues and managers, I've always had the good habit of communicating what I want or what needs to be built in a very detailed manner.

I've fished for projects within my network and on sites like Upwork and Freelancer. I've always found that most of the requests on those sites are very high level.

Even after getting in touch majority of the people don't have specific requirements and just make up features on the fly.

It's OK to get new ideas and change of plans but it's also important to document whatever you are trying to build. It helps you come up with a plan of action and more importantly, it helps people who are going to be working on the product to plan their work.

So I made a simple google form with some basic questions that I believed will help my clients to explain what they have in mind.

I wouldn't say it completely changed my life with clear cut specifications but it was a step in the right direction and it definitely saved time and efforts both for me and my clients.

So I decided to make a simple tool that would help anyone building a product to create a simple Software Requirements Specification document.

I wanted to make it as simple as possible for anyone to use it so I've avoided asking people to sign up to use it.

Anyone can use it without signing up and can download the document in PDF format and can access the document using the unique link generated for your document.

The only catch is that if you don't visit the link for 14 days, you can access the document again.

The tool can still be improved in a lot of ways and I hope this helps people in saving time and efforts during their building process.

Please [check it out](https://rqrmnt.com) and share your feedback.
A Note on JSX
Tags: tonmoytalukder, javascript, react, jsx
Published: 2021-12-24 06:00:07



## What is JSX?
JSX is an XML-like syntax extension to ECMAScript that was introduced in 2013 with React and has no stated semantics. It is NOT designed for engines or browsers to implement. It is NOT a proposal to add JSX to the ECMAScript specification. It's designed to be utilized by different preprocessors (transpilers) to convert these tokens to ECMAScript.

## JSX Syntax

`<Page index="1">
  <h1>About me</h1>
  <AboutMe content={aboutMeContent} />
</Page>`

transpiles to ⇒

`React.createElement(
  Page,
  { "index": "1" },
  React.createElement("h1", null, "About me"),
  React.createElement(AboutMe, { content: aboutMeContent })
);`

As we can see from the above example, JSX is an HTML-like syntax for creating JavaScript that is tied to the virtual DOM.
Under the hood, JSX is converted to a virtual DOM.

## Why use JSX?

- **It has a low barrier to entry.** JSX is the closest thing we have to pure HTML and CSS right now. Without learning another templating language or dealing with various layers of abstraction, you can quickly include parts of JavaScript in your templates with JSX. Anyone who is acquainted with HTML, CSS, and JavaScript should be able to read and comprehend JSX templates with ease.
- **TypeScript support.** The compilation of TSX files with type-checking is supported by TypeScript. This implies that if you misspell an element's or attribute type's name, the compilation will fail and an error message will appear, pointing to your error. TSX files are also supported by popular IDEs like VS Code, which provide code completion, refactoring, and other important capabilities.
- **Security.** To avoid attacks like cross-site scripting, JSX takes care of the standard output sanitization difficulties.

## Difference between JS and JSX
The JSX syntax is an HTML-like syntax that we can use with React to (theoretically) make creating React components simpler and more natural. The sole goal is to make creating React components simpler. There isn't much more to say. Creating huge, hierarchical HTML pages using JS syntax would be a pain in the neck without JSX; JSX merely simplifies the process.
Dutch National Flag Algorithm (or) 3 Way Array Partitions[Leetcode Sort Colors]
Tags: algorithms, programming, beginners
Published: 2021-12-24 05:41:41

## Dsa - Arrays

Hey devs hope you all are doing well!

Today we are going to learn an array based algorithm called dutch flag algorithm A.K.A 3 way parition algorithm.

Before going through this article make sure you are good with array basics.

Arrays basics : https://www.cs.fsu.edu/~myers/c++/notes/arrays.html#:~:text=An%20array%20is%20an%20indexed,therefore%2C%20the%20same%20size).

**Where is the Algorithm used ?**

The idea behind the algorithm is to partition an array into 3 parts using 3 pointers and can be used to sort arrays having 3 values (which can be repeated any no. of times) Ex: [0,2,1,2,0,2,2].(Sort array with 0s,1s and 2s).

**Procedure :**

1. Take an unsorted array with 0s,1s and 2s.(Or any 3 numbers).

2. Initialize 3 variables low , mid , high with the below values :

- low : 0
- mid : 0
- high: n-1  (Where n is the no. of array entries).

3.When the algorithm is completed elements from :

- index 0 -> low will have 0s.
- index low -> mid will have 1s.
- index mid -> high will have (0s/1s/2s).
- index high -> n will have 2s.

4.There are 3 cases in this algorithm as mid moves along the array until it crosses high.

5.IF list[mid] == 0 (list is our array)

- Swap the values of list[mid] and list[low].
- Increment low and mid by one unit.
- We do this to ensure all 0s are put to the front.

6.IF list[mid] == 1

- No swap is needed
- Increment only mid by one unit.

7.IF list[mid] == 2

- Swap list[mid] and list[high]
- Increment mid and decrement high.
- We do this to ensure all 2s are put to the end.

8.When mid crosses high the algorithm ends and we get a sorted array.

Time Complexity : O(n)

Space Complexity : O(1)

**Try out yourself**

https://leetcode.com/problems/sort-colors/

**Source Code**

```
class Solution
{
public void sortColors(int[] nums)
{
int mid = 0 , high = nums.length - 1 ,low = 0;
while(mid <= high)
{
int value = nums[mid];

            if(value == 0)
            {
                    int swapvalue = nums[mid];
                    nums[mid] = nums[low];
                    nums[low] = swapvalue;
                    mid++;
                    low++;
            }
            else if(value == 1)
                mid++;             
            else if(value == 2)
            {
                int swap = nums[mid];
                nums[mid] = nums[high];
                nums[high] = swap;
                    high--;
            }
    }
}
}
```