teleren/devto huggingface dataset:
Building Website from Scratch - Part 5
Tags: webdev, shriekdj, codewithshriekdj, beginners
Published: 2022-02-19 14:40:56

## Preface.

So Now I Made Some Changes About the Files related to `favicon.ico`.

Whenever I Opened the Google Chrome Devtools I Saw An Error Related to favicon.ico file.

---

## Section Addition in `<head>` tag.

I Added Given Code in `head` tag before my Stylesheet with `favicon.ico` related files.
```html
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
```

---

## Favicon.ico related file Is Created and Uploaded to Github Repo.

I Generated the favicon.ico related with an third party site named [favicon.io](https://favicon.io) you can use any website that you want.
> Given Below Is Image of List of New Files Added In Root of Repository.

![List of New Files Added In Root of Repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z28pxvf4vnh77a0fn77t.JPG)

```html
static/
  js/
    script.js
  styles/
    style.css
index.html
LICENSE
README.md
android-chrome-192x192.png
android-chrome-512x512.png
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
favicon.ico
site.webmanifest
```
---

### List Of New Files Added.

- Image Type Files
  - android-chrome-192x192.png
  - android-chrome-512x512.png
  - apple-touch-icon.png
  - favicon-16x16.png
  - favicon-32x32.png
  - favicon.ico
- File As Text for Settings of favicon.ico related files
  - site.webmanifest

---

## Pull Request

{% github https://github.com/shriekdj/site-from-scratch/pull/13 %}

---

## GitHub Repo

{% github shriekdj/site-from-scratch %}
Python is awesome
Tags: python, programming, showdev, productivity
Published: 2022-02-19 14:37:33

Hello i writtern a pdf python is awesome it covers variables functions detailed.If you are a beginner you can use it read it fully.In the coming days i covers how to create a qr code generator using python.Be ready for that only i write this pdf to understand most important things thank you this is my first pdf comment your feedback

PDF link:-https://docs.google.com/document/d/1MuS_hb9Mwv4PHIE-8Q6CCU5ep913my6iaQRyj6UrObQ/edit?usp=sharing
Paracetamol.js💊| #59: Explica este código JavaScript
Tags: javascript, spanish, webdev, beginners
Published: 2022-02-19 14:33:15

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

```js
function compareMembers(person1, person2 = person) {
  if (person1 !== person2) {
    console.log("Not the same!")
  } else {
    console.log("They are the same!")
  }
}

const person = { name: "Lydia" }

compareMembers(person)
```

-     A: `Not the same!`
-     B: `They are the same!`
-     C: `ReferenceError`
-     D: `SyntaxError`

Respuesta en el primer comentario.

---
Need Contributes ....
Published: 2022-02-19 13:56:00

Hi I am,Aromal.R.I hope to start a project in git hub.I hope to start a MERN Shopping Cart.I konw react and also learbing mongodb,express(backend) .So I need help for this Please Help me.I need backend devlopers (Also i don't konw to connect frontend and backend).github username aromal15 project name Shopping Cart.Plz share username
More Details
collction:'product,user'(mongodb)
need admin,login,signup
Use React Native Web's Pressable with Remix's Link magic
Tags: react, reactnative, remix, webdev
Published: 2022-02-19 13:09:59

I just released [`remix-react-native-pressable`](https://github.com/HorusGoul/remix-react-native-pressable), a small package that allows you to use React Native Web's `<Pressable>` component with all of Remix's `<Link>` properties and magic.

Essentially, it implements the same logic Remix uses in their `<Link>`, but adapted to React Native Web's `<Pressable>` props.

Here's a little example using the `to` property:

```tsx
import { View, Text } from 'react-native';
import { RemixPressable } from 'remix-react-native-pressable';

export default function MyRemixRoute() {
  return (
    <View>
      <RemixPressable to="/about">
        <Text>Link to /about</Text>
      </RemixPressable>
    </View>
  );
}
```

Just like that, you get a link rendered using `<RemixPressable>`. The main benefit of this is that you can now use this component like any other React Native Web's `<Pressable>` you have in your app.

Here's another example (extracted from my website's rewrite!), in which you can see another way of using this library. I have a design system with a Button that uses `<Pressable>` in its implementation, but the design system is platform agnostic, so it doesn't know about Remix. For cases like this, we can use the `<RemixPressableChildren>` component to get the props we need to pass to the platform-agnostic `<Button>`. 

```tsx
import { RemixPressableChildren } from 'remix-react-native-pressable';
import { Button } from 'ui/lib/Button';

...

export default function Index() {
  ...

  return (
    <>
          <RemixPressableChildren to="/blog">
            {(pressableProps) => (
              <Button {...pressableProps}>More publications</Button>
            )}
          </RemixPressableChildren>
    </>
  );
} 
```

Now that you've seen how `<RemixPressable>` works, here are both the repository and its npm page:

- [github.com/HorusGoul/remix-react-native-pressable](https://github.com/HorusGoul/remix-react-native-pressable)
- [npmjs.com/package/remix-react-native-pressable](https://www.npmjs.com/package/remix-react-native-pressable)

Also, I recently published an article about [How to Setup React Native Web in a Remix project](https://horus.dev/blog/react-native-web-remix-setup). If you're interested in using React Native with Remix, that's probably the best resource to get started!

---

I hope you liked this article! Don't forget to follow me on Twitter if you want to know when I publish something new about web development: [@HorusGoul](https://twitter.com/HorusGoul)
The simple and satisfiying art of executing a java file from the command line.
Tags: javaseries, handmade, java, noides
Published: 2022-02-19 12:52:02

---
title: The simple and satisfiying art of executing a java file from the command line.
published: true
description: Back to fundamentals(withoutIDEs).
tags: #javaSeries #handMade #java #noIDEs 
cover_image: https://images.unsplash.com/photo-1571008887538-b36bb32f4571?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=3600
---
Having the next java source

```java
public class Salad {
	
	public static void main(String[] args) {
		System.out.println("I'm the best salad in this neighberhood!");
	}
}
```

Run the command below, inside the folder source with `java` command:

```bash
java Salad.java
#it prints
I'm the best salad in this neighberhood!
```

Now let’s create another Java file in the same folder.

```java
public class Watermelon {
	
	public void talk() {
		System.out.println("I'm the best fruit!");
	}
}
```

and call its method `talk` in **Salad class** contained in **Salad file**.

```java
public class Salad {
	
	public static Watermelon watermelon = new Watermelon();
	
	public static void main(String[] args) {
		watermelon.talk();//here
		System.out.println("I'm the best salad in this neighberhood!");
	}
}
```

Let’s run the previous command once again.

```bash
java Salad.java
#it prints
Salad.java:3: error: cannot find symbol
        public static Watermelon watermelon = new Watermelon();
                      ^
  symbol:   class Watermelon
  location: class Salad
.\Salad.java:3: error: cannot find symbol
        public static Watermelon watermelon = new Watermelon();
                                                  ^
  symbol:   class Watermelon
  location: class Salad
2 errors
error: compilation failed
```

Because our **Salad class** doesn’t know any about the **Watermelon class**, thought the **Watermelon class** contained inside the **Watermelon file** knows how to talk, so let’s add some watermelon to our salad.

At first, is neccesary to process our **Watermelon file**  into our **processedFruits folder** with the `javac` command and `-d` option to indicate folder location name.

```bash
javac -d processedFruits Watermelon.java
```

And finally, let’s add our **processedFruits folder** to the original run command adding the `-cp` option to indicate where are compiled our java source of **Watermelon file.**

```bash
java -cp "processedFruits\" Salad.java
#it prints
I'm the best fruit!
I'm the best salad in this neighberhood!
```

That’s it, simple but effective:

- Run a standalone java file.
- Run a standalone java file adding compiled sources as need it.

### Command and options dictionary:

- `java` run .class and .java files.
- `javac`compile .java files and creates .class files.
- `-d`indicate output folder.
- `-cp`indicate compiled folders directory(classpath).

### Tech stack

- Java 11.
- Windows 10.

### Repo
- https://github.com/JesusIgnacio/salad-java-program
HackTrack Chrome Extension
Tags: javascript, webdev, html, css
Published: 2022-02-19 12:43:13

HackTrack is a Chrome extension I created during the UAcelt Winter of Mentorship 2.0 program. I tend to forget the deadlines or important dates of major Hackathons I'm interested in and sometimes I just bookmark the links of the application forms to fill them out later after careful consideration of the requirements and often forget to check them out which leads to me missing out on the programs. 

This is where HackTrack comes in handy as I can always see it on my Browser Tool bar. Through this I can keep a check on upcoming Hackathons and their important dates. 
![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqo8h2rk33ljnyjlv9ob.PNG)

I can cross the tasks out after registering for them and then delete them from the list as and when I'm done with them. The refresh button at the top lets me clear all the items from the list and start anew. 
![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qaw9ngtn82u1emusx4u.PNG) 

In future I plan on adding multiple input fields for date and the link to the forms or websites or the programs to make it more convenient. I would also like to add the feature to drag and drop the items according to their priority.

Tech Stack Used : HTML CSS JavaScipt
Project Repository: [Click Here](https://github.com/dee-ksha/HackTrack)
Website link : [Check this
](https://dee-ksha.github.io/HackTrack/)
In the first few weeks of the mentorship program I learnt about git and github basics, working with APIs and JSON. 

The first Chrome extension I created during this program is called 'Joke' which displays a random joke on each click. 

![Joke Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsxp8aim5ddp4lqyavn7.PNG)

Afterwards, with the help of my mentor I put together an extension called 'Dictionary' which fetches the meaning, pronunciation, example and synonym of the word we want to search.
![Dictionary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czmdqv2rlm1eraustp04.PNG)

I had fun during the course of this program and learnt networking and interpersonal skills along with the technical skills. Also, do tell me if you have any suggestions or if you would like me to add some features, please do let me know in the comments. Constructive criticism is appreciated.
Best Tips To Improve Website User Experience
Tags: ux, uiweekly, userexperienc, design
Published: 2022-02-19 11:39:05

Websites are the face of your business, and innovation attached to web interfaces is evolving faster than ever. It is because we need to improve our customers’ digital experiences and connect them with the things they are looking for. 
What is user experience(UX)?

The best user experience is the gist of the product design and that can be a website, a mobile app, or any digital interface.
User Experience Improvement Tips

Let’s take a look at the user experience improvement tips you can incorporate in your designs today. 

1. User Research
2. Speak your brand image with simplicity
3. Make use of white space
4. Make elements audio-visually accessible
5. Ask for customer feedback
6. Consistent user flow
7. Page load time
8. Make content the king

You can find the details and bonus [user experience improvement tips](https://websitevoice.com/blog/improve-website-user-experience/) to learn more.
Javascript Nullish Coalescing operator(??)
Tags: javascript, es6, webdev, beginners
Published: 2022-02-19 11:15:45

The nullish coalescing logical operator('??') in javascript returns its right-hand side operator when its left-hand side operator is either **null** or **undefined**.

```javascript
const result = null ?? "string";
console.log(result); // logs hi foo
```
Can be also written as:

`const result = (a !== null && a !== undefined) ? a : "string";`

It is often confused with '||' operator which returns its right-hand side operator when the left-hand side operator is **falsy**

Here is a list of all the falsy values we have in javascript:

- false (boolean)
- 0
- "", '', ``,
- undefined
- null
- NaN

**Problem nullish coalescing operator solves:**

The common use case for ?? is to provide a default value for a potentially undefined variable.

Suppose we want to check if a value exists or not, if it exists we want to assign that value or have a default value.

```
const response = {
  isSing: true,
  isDance: false
};

const isDance = response.isDance || true
```

We want the **isDance** variable to be whatever value comes from the response for isDance or have a default value of **true** if it does not exist. Now since response.isDance is false it will always be **true**. However our intention was to simply check if the isDance variable exists on the response object.

To solve this we can use nullish coalescing operator:

```
const response = {
  isSing: true,
  isDance: false
};

const isDance = response.isDance ?? true;
console.log(isDance); // false
```

It returns the default value only if the response.isDance results in undefined or null.

```
const response = {
  isSing: true,
};

const isDance = response.isDance ?? true;
console.log(isDance); // true
```

Thanks.
Семья и работа! Баланс жизни?
Tags: discuss
Published: 2022-02-19 11:31:46

Сегодня отдых лежим отдыхаем. А я хочу поделиться с вами с одной интересной мыслью.
Немножко Спойлера: _Речь пойдет о балансе с семьей и работе._

Сегодня утром была выступления одного психолога. Так вот она много рассказала примеров из жизни и работы. То есть как мы ведем себя с семьей и как они могут повлиять на продуктивность нашей работы. После этого приехал домой (недавно я стал отцом и второго ребенка(сына)). Смотрю на малыша и думаю: - А хороший ли я отец? - Уделяю ли достаточно времени семье или для меня важна моя ЛЮБИМАЯ РАБОТА? Есть замечательный редактор [Ильяхов Максим](https://www.instagram.com/glvrdru/), кто не читал его книгу ["Пиши сокращай"](https://alpinabook.ru/catalog/book-pishi-sokrashchay/) очень советую прочитать. Книга бомба, с первых страницы вы просто влюбитесь в него.

Как я люблю это слово. **Просто вдумайтесь в эту мысль**:

> -То как вы работаете сейчас, и есть ваш баланс работы и жизни. Он уже есть. Он отражает то, что вам сейчас важно: Если я отваливаюсь от компьютера в три часа ночи, а в шесть утра я уже за компьютером значить, эта работа мне сейчас важнее, чем другие аспекты жизни. И самое сложное: если я подыхаю на работе чтобы не подвести коллектив и своего босса, и из-за этого страдает моя семья и здоровье - значить, не подвести коллектив и босса мне сейчас важнее, чем не подвести семью и себя. Не "работа важнее", а "не подвести важнее". Почувствуйте разницу. Полезней посмотреть на свою жизнь и честно признать: "Да, сейчас именно это занятие мне важнее всего". Даже если это занятие - сидеть на берегу реки.

**Резюмирую:** -Да, походу я плохой отец, и может быть не совсем хороший работник для своего босса, но мне сейчас важнее не подвести коллектив и своего босса. Всех обнял, желаю, чтобы ваши важнее были сбалансированы и чтобы чувствовали любовь с обеих сторон.
Amazing Social Media Icons Hover Effect Using HTML & CSS.
Tags: webdev, css, html, tutorial
Published: 2022-02-19 11:30:52

We’ve all been there. You have a blog, a website, and all you need is social icons for people to follow you. You drag them but for some reason, your fancy little icon does not have the hover effect.

This is where this tutorial will come in handy (just for you!). I’ll show you an easy way to add a hover effect on top of those nifty social media icons!

In this tutorial, you will learn how to add a hover effect to social media icons that are placed in your website header.

Let’s get started.

To create Social Media Icons Hover Effect we have used Font Awesome. If you don’t know about Font Awesome then Font Awesome is a widely-used icon set that gives you scalable vector images that can be customized with CSS.

You have to add this to your HTML page in the head tag.

## How to get Font Awesome Kit’s Code

It’s very simple. You have to log in to Font Awesome site and they will provide you Kit’s Code. Just see the image it looks like that.

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

## HTML Code

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Media Icons Hover Effect</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/cad5595faf.js" crossorigin="anonymous"></script>
</head>

<body>
    <a href="#" class="card">
        <i class="fab fa-instagram"></i>
    </a>
    <a href="#" class="card">
        <i class="fab fa-facebook"></i>
    </a>
    <a href="#" class="card">
        <i class="fab fa-whatsapp"></i>
    </a>
    <a href="#" class="card">
        <i class="fab fa-twitter"></i>
    </a>

</body>

</html>
```
CSS

## CSS

```
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #171717;
}

.card{
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.144);
    border-radius: 10px;
    box-shadow: 0 20px rgba(0,0,0,0.205), inset 0 20px 20px rgba(253,253,253,0.205);
    margin: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 2em;
    color: rgba(255, 255, 255, 0.336);
    position: relative;
    transition: box-shadow .4s, color .8s, transform .4s; 
}

.card:hover{
    color: #ffffff;
    box-shadow: 0 20px 20px rgba(0,0,0,0.205),
                inset 0 20px 10px rgba(255, 255, 255, 0.287), 
                inset 10px 0 20px rgb(255,58,58),
                inset -20px 0 20px rgb(104,255,58),
                inset -30px 0 20px rgb(71, 58, 255);

    transform: translateY(-10px);
}
```
Code Organisation Strategy for GitOps
Tags: gitops
Published: 2022-02-19 11:01:42

One of the most often question is: Is GitOps just another way of doing CI/CD? The answer to this question is simply NO. GitOps only takes care of the CD part, the delivery part. To achieve this, one would think about organising the repo structure. So, you would maintain 3 different repos to main:

- GitOps Fleet 
- Project Deployment 
- Project/App Source

**GitOps Fleet Repository** to manage organisation wide deployments to Kubernetes with FluxCD. This repository would contain

- Cluster Configuration 
- Cluster Wide Infrastructure Components e.g. Ingress Controllers, Repository Secrets etc.
- Project onboarding configurations aka. tenants spec.

**Project Deployment Repository** (tenant). This repository would contain k8s manifests for 

- infra 
- app and 
- pipelines/tekton 

The code could be either 

- Helm charts source code
- YAML Manifests as either
  - Plain YAML
  - Kustomize Overlays

**Project/App Source Repository**

- Application Source Code
- Contains Source Code + Dockerfile etc. 


Now, the following diagram shows the code organisation strategy described above, above with a clear separation of the CI and CD stages.


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

note: I have taken encouragement from this [example](https://github.com/devopsfoo/flux-fleet/tree/02-onboard-instavote).
Triangles and rectangles
Tags: perl, python, theweeklychallenge
Published: 2022-02-19 10:59:57

## Weekly Challenge 152

[The challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-152/), [My solution](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-152/sgreen)

## TASK #1 › Triangle Sum Path

### Task

You are given a triangle array.

Write a script to find the minimum sum path from top to bottom.

### My solution

This one appear to be quick and easy. Take the input and using the [json](https://docs.python.org/3.8/library/json.html) module ([JSON](https://metacpan.org/pod/JSON) in Perl) turn it into an array of arrays. Then sum up the lowest number in each row, and display the result.

### Examples

```
$ ./ch-1.py "[ [1], [5,3], [2,3,4], [7,1,0,2], [6,4,5,2,8] ]"
8

$ ./ch-1.py "[ [5], [2,3], [4,1,5], [0,1,2,3], [7,2,4,1,9] ]"
9
```

## TASK #2 › Rectangle Area

### Task

You are given coordinates bottom-left and top-right corner of two rectangles in a 2D plane.

Write a script to find the total area covered by the two rectangles.

### My solution

Originally I thought this challenge was impossible, as two intersecting rectangles could have any shape intersecting it. But then realized from the examples that we were only talking about rectangles that aren't tilted.

For this task, I create a class (package in Perl) to represent a rectangle. It makes sure that `x1` and `y1` represents the bottom left and `x2` and `y2` represents the top right. It also has an `area` method that returns the area of the rectangle.

With that part done, the rest of the code works like this:

1. Take the first eight things that look like an integer from the command line.
1. Create `rect1` with the first four numbers.
1. Create `rect2` with the next four numbers.
1. Set `area` to be the area of the two rectangles, ignoring any overlap.
1. Calculate the overlap. The bottom left will be the maximum of `x1` and `y1` of the two rectangles. The top right will be the minimum of `x2` and `y2`.
1. If there is an overlap (`x1 < x2` and `y1 < y2`), create another rectangle object and subtract its area from step 4.
1. Print the number.

### Examples

```
$ ./ch-2.py "(-1,0), (2,2) (0,-1), (4,4)"
22

$ ./ch-2.py "(-3,-1), (1,3) (-1,-3), (2,2)"
25
```