teleren/devto huggingface dataset:
Mastering Google Search
Tags: webdev, beginners, tutorial, productivity
Published: 2022-12-24 16:30:35

**1.Quotation Marks**

Using quotation marks means search exactly for the words in the search terms.

**_Example:_** "Best ios apps 2022"

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

**2.Dashes**

Using dashes will help you to exclude a term from your search, include a hyphen before that word.

**_Example:_** Best mobile apps -android.
It will ignore all the "-android" from the search results.

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

**3.Site:**

Use this : operator to search within the specific website only.

**_Example:_** site:mkbhd.com

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

**4.Vertical bar**

This query will search websites that have any one / two / all of the terms.

**_Example:_** Hello world | Java Program

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

**5.Imagesize**

If you want to search images of a particular size, then use the tag _imagesize:_ in your search query, along with the width and height in pixels.

**_Example_** candle imagesize: 500px*500px

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

**6.Filetype**

If you want to get search results that contain a particular file type, such as PDF or PPT, then we can use _filetype:_

**_Example:_** filetype:pdf

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

**7.Two Periods**

You can include two periods when you want to search within two number ranges.

_**Example**_ movies 1950..1970

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

**8.Wildcard**

The Asterik(*) works as a wild card within the searches. 

It can be used in place of a missing word or part of a word, which is useful for completing phrases.

**_Example:_** *oriented programming

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

**9.Search**

You can use the keyword search: to search within a website.

If you want to find something related to web development on a particular website, you can use the search.

_**Example:**_ Web development search: freeCodeCamp.com
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of8x648qwk7t5vekpn98.png)

**10.OR**

You can use the OR term, so that it can search for one or another term, not just all the terms.

It can be useful for finding things you're not sure which term will be used from a known list.
 
**_Example:_** environmentalist OR treehugger.

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

Thanks for reading till the end❤️  
Please do like and subscribe for more such content!!
Crazy Rat Blowing in the Wind (CSS Only)
Tags: codepen
Published: 2022-12-24 16:27:22

<p>Here is Rizzo the rat is hanging on for dear life to a rope being blown in a strong wind!</p>

{% codepen https://codepen.io/orvilleChomer/pen/eYjmMJy %}

Just messing around for a CodePen Challenge with CSS animations a bit, trying to get a better handle on:

```
transform-origin
```

I'm definitely not an expert... but it was fun!
Cpanel Git: Notes for Windows users
Tags: git, github, react, laravel
Published: 2022-12-24 16:15:38

If you are using windows (no WSL) purely for your development. There are things you need to put in place.

### Setting up nodejs
You can grab an installer from https://nodejs.org/ to setup nodejs. Follow the guide at https://pnpm.io/installation#using-npm if you would also like to install `pnpm`.

### Setting up PHP
Regardless of the stack you are using e.g XAMPP or WAMP, php needs to be added to PATH. This should automatically be taken care of when installing composer.

After setting up your stack, get composer installer at https://getcomposer.org/. You can follow the guide at https://mehulgohil.com/blog/install-composer/ to setup composer. Ensure to tick the box that says "Add PHP to PATH" when prompted.

### Generating ssh keys
To generate ssh keys you can follow the guide at https://phoenixnap.com/kb/generate-ssh-key-windows-10
Push local repository to another user remote repository
Tags: git, github
Published: 2022-12-24 16:11:40


To push changes from your local repository to another user's repository, you will need to have push access to that repository. If you do not have push access, you will need to ask the owner of the repository to grant you access.

If you have push access to the repository, you can follow these steps:

Clone the repository to your local machine using git clone and the repository's URL.

```
git clone https://github.com/user/repo.git
```
Change into the repository's directory.

```
cd repo
```
Make the necessary changes and commit them to your local repository.

Add the remote repository as a remote for your local repository. Replace user and repo with the appropriate values.

```
git remote add upstream https://github.com/user/repo.git
```
Push your changes to the remote repository.

```
git push upstream
```
Alternatively, you can also use a GUI client for Git such as GitHub Desktop or GitKraken to push changes to a remote repository.
CodePen Designs - 10 : Just Ice
Tags: codepen, css, design, codependesigns
Published: 2022-12-24 15:57:26

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---


#### Codepen Design - 10

<p>Noise gives the impression of ice. </p>

{% codepen https://codepen.io/atzedent/pen/eYKPGQr %}


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
How to Find Duplicate Elements in a Given Array?
Tags: html, css, javascript, webdev
Published: 2022-12-24 15:48:10

In this article, we are going to discuss “How to Find Duplicate Elements in a Given Array?”. Duplicate elements could be a great problem, so finding these kinds of elements becomes necessary, and also in many JS interviews, this can come into frame as a question. As a developer and a JS beginner, we should have answer of this question.
[Read More](https://rocoderes.com/how-to-find-duplicate-elements-in-a-given-array/)
How to Find The Count of Duplicates in an Array?
Tags: html, css, javascript, webdev
Published: 2022-12-24 15:46:50

In this article, we are going to discuss “How to Find The Count of Duplicates in an Array?”. Previously, we have discussed finding duplicate values from an array, and now we will see the number of duplicate values. This problem can be solved in multiple ways, but here we will see the most optimized way to solve it.
[Read More](https://rocoderes.com/how-to-find-the-count-of-duplicates-in-an-array/)
Slidebar from mini-sidebar
Tags: django, html, javascript, css
Published: 2022-12-24 15:22:19

Can't do **sidebar from mini sidebar**! Can anyone help me with this? I am currently working on dang and have added all the files. But still not working. 


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

From this to this one

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73b73lxlp36hnmrmwoxf.png)
Autofill plugin for Figma
Tags: design, figma, tooling, uiweekly
Published: 2022-12-24 15:10:31

I recently built [Autofill Figma Plugin](https://www.figma.com/community/plugin/1186090405060894565). It fills "Text" nodes with data automatically using dynamic variables. 

## See how it works

{% youtube m9IVdefvimA %}

## Data categories and dynamic variables

* Name - generate people's names and titles
* Internet - generate internet related entries
* Finance
* Animals
* Addresses
* ...and more

List of all available dynamic variables can be found [here](https://melmahdi.me/projects/autofill-figma-plugin).
Marketing Data Visualization: Definition and Example
Tags: datascience, marketing
Published: 2022-12-24 14:54:05

> Data visualization in digital marketing is the process of eliciting insights and visualizing them based on marketing raw data. 

The marketing data that you can represent in the different forms of graphs and charts includes:

- website analytics (page views, conversions, bounce rate, etc.)
- email marketing (open rate, click-through rate, unsubscribes, etc.)
- social media (shares, subscribers, approval rate, etc.)
- advertising (clicks, impressions, cost per click, etc.)
- video marketing (views, likes, sign-ups, etc.)
- Other marketing activities

## Example of data visualization for marketers

When talking about data visualization for marketing analysis, the first thing that comes to mind is a chart of any form: line chart, column chart, funnel chart, and so on. 

However, data visualization is not only about charts and graphs. Pivot tables allow you to elicit valuable insights without actually visualizing data. So, we can include them in data visualization in digital marketing as well. Here is an example of marketing website performance in the form of a pivot table in Google Sheets:

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

And, of course, the most advanced way to present your marketing data visually is a dashboard. Dashboards can accumulate multiple metrics in different forms and even let you filter or group the data. Here is an example of a customer base built by data experts at Coupler.io using PowerBI.

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

So, as you understand, marketing data visualization can be very different depending on your goals. But is it possible to do analytics without any visualizing data? Check out [the full article](https://blog.coupler.io/marketing-data-visualization/) to dive into this.
Chamada HTTP em Rust
Tags: rust, beginners, programming, aigenerated
Published: 2022-12-24 14:15:48

Para fazer uma chamada HTTP em Rust, você pode usar a biblioteca **_reqwest_**. Você pode adicioná-la como uma dependência no seu arquivo Cargo.toml:

```rust
[dependencies]
reqwest = "0.10.8"
```
Em seguida, você pode importá-la no seu código e usá-la para fazer uma chamada HTTP. Aqui está um exemplo de como fazer uma chamada GET simples para a URL "https://www.example.com":


```rust
extern crate reqwest;

fn main() {
    let res = reqwest::get("https://www.example.com")
        .expect("Falha ao fazer a chamada HTTP");
    println!("Status: {}", res.status());

    let body = res.text().expect("Falha ao ler o corpo da resposta");
    println!("Corpo: {}", body);
}

```

Isso faz uma chamada GET para a URL "https://www.example.com" e imprime o status da resposta e o corpo da resposta.

Você também pode fazer chamadas HTTP usando outros métodos, como POST, PUT e DELETE. Aqui está um exemplo de como fazer uma chamada POST com um corpo de solicitação JSON:

```rust
extern crate reqwest;
extern crate serde_json;

use serde_json::Value;

fn main() {
    let client = reqwest::Client::new();

    let mut json = Value::new_object();
    json.insert("name".to_string(), Value::from("John"));
    json.insert("age".to_string(), Value::from(30));

    let res = client.post("https://www.example.com/api/users")
        .json(&json)
        .send()
        .expect("Falha ao fazer a chamada HTTP");

    println!("Status: {}", res.status());
}

```

*** post gerado via AI e revisado por mim.**
Merry Christmas Developers!
Tags: webdev, javascript, programming, python
Published: 2022-12-24 14:07:30


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xl3a9pux25x6lwlcodi7.jpg)## **Merry Christmas / Happy Holidays to everyone!!!**
img. source: https://www.reddit.com/r/Python/comments/kjr446/python_christmas_tr_ee_warningnoobish/_
( Chat GPT ) Chat Bot App UI Design Using Figma
Tags: figma, tutorial, uiweekly
Published: 2022-12-24 14:05:04

{% youtube fGCM0puIIZ4 %}
Hi guys, today we want to show How To create ( Chat GPT ) Chat Bot App UI Design Using Figma
Please, if you love it, support us with Like & Subscribe.🙏🙏❤️❤️

Let's be friends and connect
📩 Subscribe:https://shorturl.at/BCTV8
📷 Instagram: https://www.instagram.com/soudemy/
📱 Behance: https://www.behance.net/soudemy
🐦 Twitter: https://twitter.com/SoudemyAcademy

In the comments, you can say what design you want so that we can prepare the video for you.
Personal Web Archive and How I Archive Single Web pages
Tags: archive
Published: 2023-01-05 22:46:28

---
title: Personal Web Archive and How I Archive Single Web pages
published: true
date: 2022-12-24 14:01:16 UTC
tags: Archive
canonical_url: https://brandonrozek.com/blog/personal-simple-web-archive/
---

The [Internet Archive](https://web.archive.org/) is great for providing a centralized database of snapshots of websites throughout time. What happens though when you want to have your own offline copy during times of little to no internet access? [Archivebox](https://archivebox.io/) is one solution to such problem. It behaves similarly to the Internet archive and also allows importing of RSS feeds to save local copies of blog posts. To install it, you can use `pipx`.

```
pipx install archivebox

```

For the rest of this post, however, I want to talk about a simpler tool. A combination of `wget` and `python -m http.server`. In the past, I’ve used `wget` to [mirror entire websites](/blog/archivingsites/). We can adjust the command slightly so that it doesn’t follow links and instead only looks at a single webpage.

```
wget --convert-links \
     --adjust-extension \
     --no-clobber \
     --page-requisites \
     INSERT_URL_HERE

```

Now assume we have a folder full of downloaded websites. To view them, we can use any HTTP server. One of the easiest to temporarily setup currently is Python’s built in one.

To serve all the files in the current directory

```
python -m http.server OPTIONAL_PORT_NUM

```

If you leave the port number field empty, then this returns

```
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

```

A few nice side-effects of using `wget` and `python`.

- Python’s default webserver shows a list of files in the directory. This can make it easier to browse around the web archive.
- The `wget` flags make it so that if you want to archive `https://brandonrozek.com/blog/personal-simple-web-archive/` then all you need to access is `http://localhost:8000/brandonrozek.com/blog/personal-simple-web-archive`. In other words, it preserves URLs.

Now this approach isn’t perfect, if a webpage makes heavy use of javascript or server side features then it’ll be incomplete. Though for the majority of the wiki pages or blog posts I want to save for future reference, this approach works well.

My full script is below:

```
#!/bin/sh

set -o errexit
set -o nounset
set -o pipefail

ARCHIVE_FOLDER="$HOME/webarchive"

show_usage() {
    echo "Usage: archivesite [URL]"
    exit 1
}

# Check argument count
if ["$#" -ne 1]; then
    show_usage
fi

cd "$ARCHIVE_FOLDER"

wget --convert-links \
     --adjust-extension \
     --page-requisites \
     --no-verbose \
     "$1"

# Keep track of requested URLs
echo "$1" >> saved_urls.txt

```
Tracking Delivery App UI Kit Design In Figma ( 7 Screens )
Tags: figma, tutorial, uiweekly, beginners
Published: 2022-12-24 14:01:11

{% youtube 3uajHZTBYdk %}
Hi guys, today we want to show How To Create Tracking Delivery App  UI Kit Design In Figma ( 7 Screens )
Please, if you love it, support us with Like & Subscribe.🙏🙏❤️❤️

Let's be friends and connect
📩 Subscribe:https://shorturl.at/BCTV8
📷 Instagram: https://www.instagram.com/soudemy/
📱 Behance: https://www.behance.net/soudemy
🐦 Twitter: https://twitter.com/SoudemyAcademy

In the comments, you can say what design you want so that we can prepare the video for you.
Help! !! Angular Issue.
Tags: webdev, beginners, angular, visualstudiocode
Published: 2022-12-24 13:49:30

Hello, please am a beginner. I try to run Angular code on my windows but it does not work.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bk1mo9j99zuuaytx9gs.PNG)
Refactor. Improving Types.
Tags: beginners, programming, typescript, javascript
Published: 2022-12-24 13:45:03

Hi! 
Today we will take a look on [the planets](https://exercism.org/tracks/typescript/exercises/space-age/solutions) and age on them (relative).

### Instructions

> _Given an age in seconds, calculate how old someone would be on:_
> _Mercury: orbital period 0.2408467 Earth years_
> _Venus: orbital period 0.61519726 Earth years_
> _Earth: orbital period 1.0 Earth years, 365.25 Earth days, or 31557600 seconds_
> _...[omitted, full list in the task]_
> _So if you were told someone were 1,000,000,000 seconds old, you should be able to say that they're 31.69 Earth-years old._

### First solution
As a basement we will take quite nice solution and will see what can be improved from the types perspective (i.e. make them more restrictive and "extracted") as well as we will apply clean code practices: 
```typescript
const RATIOS: {
  [key: string]: number
} = {
    mercury: 0.2408467,
    venus: 0.61519726,
    earth: 1,
    mars: 1.8808158,
    jupiter: 11.862615,
    saturn: 29.447498,
    uranus: 84.016846,
    neptune: 164.79132
}
export function age(planet: string, seconds: number): number {
    return Number((seconds / 31557600 / RATIOS[planet]).toFixed(2))
}
```

#### What to improve
- Extract `[key: string]: number` to a separate type;
- Update `age` function `planet` parameter type to more specific;
- extract fix of result in the separate function;
- add `31557600` as constant;
- change function to an arrow function (just love it!);

some typing.. and...
### Second solution

Here I've tried to reflect all the above mentioned points. There is a result:

```typescript
type PlanetCoefsType = {
  [key: string]: number
};

const PlanetCoefs: PlanetCoefsType = {
  mercury: 0.2408467,
  venus:  0.61519726,
  earth: 1.0,
  mars: 1.8808158,
  jupiter: 11.862615,
  saturn: 29.447498,
  uranus: 84.016846,
  neptune: 164.79132,
}

type Planet = keyof typeof PlanetCoefs;

const YEAR_ON_EARTH_IN_SEC = 31557600;

const fixToTwo = (rawValue: number): number => Number(rawValue.toFixed(2));

export const age = (planet: Planet, seconds: number): number => {
  const planetCoef = PlanetCoefs[planet];
  const result = seconds / YEAR_ON_EARTH_IN_SEC / planetCoef;
  return fixToTwo(result);
}
```

All the changes I would assume quite trivial and easy to follow, except maybe this one (at least for me it took some time to understand): 
`type Planet = keyof typeof PlanetCoefs;`

In this case the intention is to extract on programmatic level all already listed in `PlanetCoefs` object names of planets and strict our code to this list as we do not support others, i.e. "pluto", "solaris" and so on. 


Hope it was a bit useful and interesting!
In the next post I will put an example with **RegExp** (how to add them or remove if too scared:)). 

Meanwhile you can take a look on interesting example from **[the previous post](https://dev.to/dnim/refactoring-the-beginning-1ij5)** (crazy one-liner and easy readable solution).
How to make newline for bash output on CGI/bash
Tags: webdev, html, bash
Published: 2022-12-24 13:29:24

## Use CGI for dynamic web site
In case of Web site that using CGI not static html we can show contents dynamically.
Like showing result of Linux command.
Put this sample to /var/www/cgi-bin/ as test.cgi

```
!/bin/bash
echo “Content-type: text/html”
echo “”
echo “Hello World!”
```

This is same as static html.

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

```
#!/bin/bash
echo “Content-type: text/html”
echo “”
echo “Hello World!”
echo “<br>”
date
```

If use date command it can showing date dynamically.


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

## If the command produces multiple lines of output when executed

if use command ifconfig eth0

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5sggyy6urfi42m9otdar.png)
There are no newline.

## How to resolve?

```
#!/bin/bash
echo “Content-type: text/html”
echo “”

echo “Hello World!”
echo “<br>”
date
echo “<br>”
echo “<br>”

sudo /usr/sbin/ifconfig eth0 > /var/www/html/ifcofigeth0

while read line
do
echo $line
echo “<br>”
done < /var/www/html/ifcofigeth0
```
Output to file once and read the file 1 line by 1 line using while.
Using echo for output and use br for make newline.
Repeat this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dkgbp6uuvs8eyripp2zw.png)
It is showing with newline.

In case of using echo command I found article on this.
it will use \n for make newline.

But It seem there are no article in case of If the command produces multiple lines of output when executed.

If you have any other good ideas please let me know.
Cover Letter generator Using AI
Published: 2022-12-24 08:07:42

With the ever-increasing number of job applications in the current market, writing a cover letter can be a tedious task. As a result, many job seekers find themselves spending a lot of time and energy crafting the perfect cover letter to stand out from the competition.

Enter the C[over Letter Generator](https://lazyapply.com/cover-letter-generator) by LazyApply, an AI-powered tool that helps job seekers write a perfect cover letter in just a few minutes. The Cover Letter Generator is designed to save you time and energy by automating the process of writing a [cover letter](https://lazyapply.com/cover-letter-generator).

The [Cover Letter Generator](https://lazyapply.com/cover-letter-generator) starts by asking you a few basic questions about your job profile and the job you are applying for. Based on your answers, the Cover Letter Generator then uses AI to generate a personalized cover letter for you in just a few minutes.

The Cover Letter Generator also provides you with personalized advice on what you should include in your cover letter and other tips to help you stand out from the competition. Additionally, you can use the Cover Letter Generator to customize your cover letter, using one of its pre-made templates or creating your own.

The Cover Letter Generator is easy to use and requires no prior knowledge or experience. All you need to do is provide a few details and the Cover Letter Generator will do the rest, providing you with a perfect cover letter in just a few minutes.

If you are looking for a fast and efficient way to create a perfect cover letter, then the Cover Letter Generator by LazyApply is the perfect tool for you. It's quick and easy to use, and will help you write a cover letter that stands out from the competition. Try it out today and see the difference it makes in your job application process.