teleren/devto huggingface dataset:
Cloak of visibility
Tags: cloaking, cloak, visibility, web
Published: 2022-09-24 19:39:31

Cloaking of Visibility is a concept of using different webpages for Google Bot and a User for the same web address.Wikipedia

The Research Paper Cloak of Visibility deals with the competitive character of misuse that has given rise to a heated conflict in online masking. Here, criminals are trying to bypass the difficulty of obtaining user traffic to be used as a vehicle by search engines. And advertising networks for spreading viruses, unwanted software, and con artists’ views of clientele. Although spiders try to monitor content quality and remove unsafe URLs, there is a fundamental restriction to web browsing. Not every user will see the same thing. Split views happen naturally due to personalisation, but geo miscreants use responsive web design and SEO, using comparable targeting strategies in a blackhat capacity. To provide attractive and law-abiding material only for crawlers while also putting them at risk of assault.


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

**Research on Cloak of Visibility**
There has been a ton of earlier research on cloaking’s ubiquity and the material hidden behind cloaked entrances, but none has exactly quantified the range of cloaking techniques as it relates to search engines and ad networks. In fact, past research based their analyses on a small number of well-known cloaking methods. These consist of search visitor profiling based on the User-Agent and Referer of HTTP requests or redirect cloaking in search engine results.

**research**
There has been a ton of earlier research on cloaking’s ubiquity and the material hidden behind cloaked entrances, but none has exactly quantified the range of cloaking techniques as it relates to search engines and ad networks. In fact, past research based their analyses on a small number of well-known cloaking methods. These consist of search visitor profiling based on the User-Agent and Referer of HTTP requests or redirect cloaking in search engine results.
A short story about my first time contributing to somebody's repo
Published: 2022-09-24 18:36:51

## Overview
The objective of the second lab was to contribute to the repository of one of my classmates with my implementation of the markdown file processing.

## Selecting the repository to contribute in
I decided to partner up with Taiomoor again and contribute to his repo [siteit](https://github.com/SerpentBytes/siteit) because he uses the javascript, which I am familiar with and his code style is decent.

## Issue
The first step was to create an [issue](https://github.com/SerpentBytes/siteit/issues/12) in his GitHub repository to let him know that I will work on it and describe what I plan to accomplish.

## Implementation
The implementation of [PR](https://github.com/SerpentBytes/siteit/pull/13) didn't take me a lot of time I performed the following changes in it: 
- made tool proccess not only '.txt' extension files, but also '.md'
- made tool handle the bold text and italic text markdown syntax and translate it into the correct HTML form with respectful HTML syntax
-update readme.md with the description of markdown files handling support

## Working with feedback
After I craeted the PR Taimoor provided me some comments about my updates and showed some cases where my updates might not work as expected. I followed his advice and made proper update in order to make tool work as expected.
What is Z-Index in CSS3 and why we use it?
Tags: css3, webdev
Published: 2022-09-24 18:28:41

## What is Z-index?

Z-index is a CSS property that is used to define the order or priority to stack the HTML elements. Elements with higher z-index values will be given more priority and elements with less z-index values(Negative values like -1,-2) will have less priority.

Elements with negative z-index(z-index: -1) values can be stacked under the elements with higher z-index(z-index: 1 or 99) values. _Here, one important point to note about the z-index is that it only works on position values(relative, absolute, fixed, sticky) other than static and it also works on the elements of direct children of display: flex or display: grid._

## Why Z-Index is ignored for the position: static?

Position: static means ignoring all the position instructions from the top, left, and z-index.

## What are the possible values that we can use for Z-Index?

If we don't specify the z-index, it will take the default values as auto.

If we want to explicitly specify the z-index values using CSS selectors, we can specify them in Integer format or Global format.

`- Values for Integer format:
`
z-index: 1; -> This will have a higher priority

z-index: -1; -> This will have a lower priority

_`- Values for Global format:
`_
z-index: inherit; -> By using inherit we are telling the element to take the computed value of the property from the parent element.

z-index: initial; -> It is always set to the default value of a property to an element.

z-index: unset; -> If we use the unset property, it will set the value to a property in 2 cases. In the first case, it will check for inherited property and behave likes an inherited keyword and in the second case, it will check for initial property and behaves like an initial keyword.

let's understand with an example:

HTML:

```
<div class="container">
          <div class="card" id="card1"></div>
          <div class="card" id="card2"></div>
         <div class="card" id="card3"></div>
  </div>
```

CSS:

```
.card{
            position: relative;
            top:34px;
            border: 2px solid #000;
               }

#card1{
            position:relative;
            top:39px;
            z-index:2;
           }
```

**Note**: As z-index works only with position(other than static), we should include position property with values in CSS styles.

## Summary of Z-Index:

We can use z-index with position(relative, absolute, fixed, or sticky) and flexbox and grid. It is used to stack one element on another element.
I made a scroll animation using Recoil and GSAP's ScrollTrigger - with tailwindcss
Tags: javascript, react, gsap, tailwindcss
Published: 2022-09-24 18:27:13

Hi, there.

I have created a scroll animation using Recoil and GSAP's ScrollTrigger and would like to introduce it to you.


I also posted it on Twitter.

{% embed https://twitter.com/napzak5/status/1573730116038930432 %}


[demo site](https://react-marked-caption-line-javascript.onrender.com/)

[demo code](https://codesandbox.io/s/nwibc9)


{% embed https://codesandbox.io/embed/youthful-minsky-nwibc9?fontsize=14&hidenavigation=1&theme=dark %}

Cheers.

Higashi Kota
Oncall ou o famoso plantão para engenheiros de software na Irlanda
Tags: braziliandevs
Published: 2022-09-24 18:22:10

Quando se trabalha no desenvolvimento de algum produto com clientes externos é comum a prática do “oncall” (plantão). O formato varia de time para time mesmo dentro da mesma empresa. É importante notar que indiferente da empresa, ela ainda precisa seguir o [Organisation of Working Time Act, 1997](http://www.irishstatutebook.ie/eli/1997/act/20/enacted/en/html).

Nas duas empresas que trabalhei na Irlanda, elas me forneceram celular (para eu instalar o aplicativo que notifica de problemas em produção). Na Amazon, o formato do meu oncall era de 8 horas por dia, pois o plantão era divido entre o time nos EUA, Austrália e Europa. Todo final de semana que ficavamos oncall era recompensado com dois dias de folga. Independente do tempo que gastamos ativamente trabalhando. Esses dias podiam ser retirados a qualquer momento.

Outros amigos que ficavam oncall por 24 horas na Amazon recebiam um valor adicional no salário.

Na Stripe o formato do oncall é de 24 horas também, mas sem nenhum incentivo financeiro. Porém as horas trabalhadas podem ser recuperadas. Por exemplo: recebi uma notificação que tenho que trabalhar e demorou uma hora para consertar o problema, então tenho direito de pegar uma hora em algum outro dia.

Um ponto importante da lei irlandesa é que todo empregado tem o direito de 11 horas consecutivas de descanso em um período de 24 horas (“11.—An employee shall be entitled to a rest period of not less than 11 consecutive hours in each period of 24 hours during which he or she works for his or her employer”).

Nas duas empresas, estar de plantão nunca significou resolver o problema sozinho, mas avaliar o que está acontecendo. Se você consegue resolver, ótimo, mas caso não saiba ou precise de ajuda dado o volume de problemas, sempre há um caminho claro de quem você deve notificar. No geral, o conselho era: se em dúvida, notifica outra pessoa.

Normalmente as soluções ou dicas de como debugar o problema estão em documentações internas, “runbooks”, essas documentações normalmente explicam como confirmar qual o problema e possíveis soluções.

A melhor dica para o plantão é: mantenha a calma, procure o runbook ou uma ocorrência do problema no passado, em caso de dúvida, “escale” o problema.

PS: Originalmente publicado em [aqui](https://br.elias.sh/posts/oncall/).
Call Stack in JavaScript
Tags: javascript, webdev, beginners, programming
Published: 2022-09-24 18:19:26

What is a call stack ?
A call stack is a mechanism for an interpreter (such as a JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions - which function is currently running and which functions are being called from that function, etc. — MDN Web Docs

The call stack keeps record of the all functions to be executed. When a function is called , it is added on to top of the call stack. When the function returns, it is removed or removed from the call stack. Any asynchronous functions (fetch, setTimeout, async, etc.) are moved to the event queue (more on that later).

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

How does the call stack work?
As JavaScript is single-threaded. This means that it has only one call stack and can only handle one command at a time. The call stack follows the LIFO (Last In, First Out) principle, which means that it always processes the call at the top of the stack first.

When a function is called, it is added to the stack. When a function calls another function, it is added to the calling function.

Callback queue


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

When the browser is done with the timer (or any other API which it provides for JS), it doesn't transfer the codes to be executed back to Javascript immediately. When the browser finishes, it adds  the code in a callback queue. As the name implies, it is a queue containing some functions or codes which would be called back at a later time.

The callback which was passed as an argument to setTimeout is written in JavaScript. So the JavaScript interpreter needs to run the code, which means it needs to use the call stack, which again means we have to wait for the call stack to be empty to make the callback.




The setTimeout call triggers the Web API execution, which adds the callback to the callback queue. The event loop then takes the callbacks from the queue and adds them to the stack once it's empty.
Event Loop: This is followed by an Event Loop which runs continuously and checks the main stack if it has any frames to execute, if not it checks the callback queue, if the callback queue has codes to execute then it pushes the message from it to the main stack for execution .


Job Queue: In addition to the Callback Queue, browsers have introduced one more queue, which is the "Job Queue", reserved only for the new Promise() function. So when you use promises in your code, you add a .then() method, which is a callback method.
UPDATE - NEW GUY
Tags: beginners, css, html, git
Published: 2022-09-24 18:17:31

It's been a week since i started the full stack bootcamp. Although the pace is very time demanding and rigorous im excited to say I am making steady progress. I started out not knowing a thing about HTML and CSS. Now I'm able to deploy websites like this one using minimal HTML. I am still struggling a bit with the CSS but i find it amazing how a minimal change in CSS can make major changes to the website.
[Gitpage Deployed Site](https://jbxamora.github.io/CSS-CHEAT-SHEET-9000/)
[Github](https://github.com/jbxamora)
5 Best Tips for Responsive Design in CSS
Tags: webdev, css, beginners
Published: 2022-09-24 17:38:55

-
Hey there, hope you are doing well. There are a couple of tips that I personally use when I am making websites responsive that I would like to share with you in this article.


-  Padding/Margin - We usually use a lot of padding when we make websites for desktops, to make them more attractive. While making it responsive for mobiles, tablets try decreasing the existing paddings and margins.


-  Use em/rem/ percentages - Always try using em/percentage/rem instead of px, so that the text, images size adjust with respect to the device width.

👉 An example could be:

```
body { font-size:60%; }
div { font-size: 2.4em; }
p { font-size: 1.4rem; }
```

- Flex-wrap - Using flexbox to align your HTML elements such as <div>,<p> etc provides the force elements onto one line or can wrap onto multiple lines according to their width.

- Media query - Media query should be used to set width and height according to the breakpoints. Breakpoint refers to the width at which the website starts looking distorted.

```
@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}
```

- Box-Sizing - It resolves a lot of problems padding causes, using box-sizing on HTML elements with a percentage width will take padding into account rather than having to adjust the width due to padding.

```
`{box-sizing : border box;}`
```


Feel free to add other tips/tricks in the comments section. Thanks for reading :)
Getting started with TailwindCSS
Tags: webdev, beginners, tailwindcss
Published: 2022-09-24 18:03:31

**Tailwind CSS can be used to make websites in the fastest and the easiest way.**

Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.  The beauty of this thing called tailwind is it doesn’t impose design specification or how your site should look like, you simply bring tiny components together to construct a user interface that is unique. What Tailwind simply does is take a ‘raw’ CSS file, processes this CSS file over a configuration file, and produces an output.

**Installation**
In this project, we will install Tailwind CSS via Node Package Manager (npm), but you could also use the CDN. If you choose the latter approach, you will not be able to use some features like extracting custom CSS classes. But if you just want to give it a spin, then go for it.

/* Tailwind CSS CDN */
`<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">`

To install Tailwind, we will first create a folder:

`$ mkdir mytailwindcsssite`
Now, change to the newly created folder and initialise npm to install Tailwind:

`$ cd mytailwindcsssite
$ npm init -y`

After initialising npm in the folder, a package.json file will be created. Now we can install the tailwindcss package easily by running the following command:

`$ npm install tailwindcss `

**Adding Tailwind to the project**

The next step is to add Tailwind to our project. For that, we will create a file called src/styles.css in which we will inject all three Tailwind directives to import base, components, and utilities styles:

`@tailwind base;
@tailwind components;
@tailwind utilities;`

You could also add a Tailwind configuration file within the project that lets you create your own CSS classes or import fonts via the @import rule. To install the tailwindcss configuration file, run the following command:
`
$ npx tailwindcss init`

This will create a new file called 
> tailwind.config.js
Vlog - Colombian Nature
Tags: nature, wellness, rest, colombia
Published: 2022-09-24 17:49:44

---
title: Vlog - Colombian Nature
published: true
description: A walk inside a natural park in Medellin Colombia
tags: nature, wellness, rest, Colombia
# cover_image: https://firebasestorage.googleapis.com/v0/b/champi-landing.appspot.com/o/Untitled%20design%20(2).png?alt=media&token=e2955d79-716b-4030-8433-9dc36de2aecc
# Use a ratio of 100:42 for best results.
---

Beautiful and charming developers on this platform, excuse me for this spammy post, just wanted you to relax for a second and look at this video of me hiking through a cool location in Medellin - Colombia

Video:
{% embed https://youtu.be/Z5CluWcmT0s %}
Portfolio
Tags: portfolio, react, sass, css
Published: 2022-09-24 17:12:51

My newly design portolio create using react js.
Here is the link [Portolio Website](https://soumyasahu.vercel.app/)


![Portfolio Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g13nbhw1yx9izasktmk.png)
How to use SSH with Git and ssh-agent on Windows
Tags: windows, ssh
Published: 2022-09-25 00:46:43

---
title: How to use SSH with Git and ssh-agent on Windows
published: true
date: 2022-09-24 17:12:33 UTC
tags: #windows #ssh
canonical_url: https://www.darraghoriordan.com/2022/09/24/git-ssh-agent-windows/
---

I needed to run git natively in windows (no wsl) for a recent project. I use ssh certificates with passphrases to authenticate with my git provider.

Ssh requires the certificate passphrase every time you use a connection. It's annoying typing this passphrase in to terminal when using a `git` command.  

<!-- end excerpt -->

## The Problem

On most *nix systems there is an ssh-agent installed that will store your pass phrases so you don't have to enter them when using Git with ssh. 

Ssh-agent is harder to configure on windows because some of the default settings and paths are different to *nix systems.

I didn’t want to use Git for Windows because it uses GitBash. I couldn’t use WSL because I wanted git to work on any terminal in windows.

These are the steps I had to research to use Git on Windows with the built in Windows ssh-agent.

Note: You must be an administrator to perform the required actions.

## Open ssl on Windows

If you use Windows 10 or higher there is a built-in openssl instance. You can turn it on in the Optional Features settings pane.

Microsoft provide more instructions here: [https://learn.microsoft.com/en-us/windows-server/administration/openssh/openssh\_install\_firstuse?tabs=gui](https://learn.microsoft.com/en-us/windows-server/administration/openssh/openssh_install_firstuse?tabs=gui)

Follow the instructions to install it if you don’t have it.

## A note on certificates

I’ll assume that you have ssh certificates available and any ssh aliases are set in the config file

The default location for the config file on windows is

```
$HOME\.ssh\config
```

You should create that file if you need ssh aliases. You can read more about this in my article on ssh for git accounts - [https://www.darraghoriordan.com/2021/05/04/configure-multiple-github-accounts-one-computer/](https://www.darraghoriordan.com/2021/05/04/configure-multiple-github-accounts-one-computer/)

## Enabling Ssh agent

Open a powershell terminal as administrator and run the following to have ssh-agent available.

```
# Have ssh agent start automatically
Get-Service ssh-agent | Set-Service -StartupType Automatic

# Start ssh agent now
Start-Service ssh-agent

# Should work successfully
Get-Service ssh-agent
```

## Configure git to use Windows ssh

```
# tell git to use ssh.exe
git config --global core.sshCommand "'C:\Windows\System32\OpenSSH\ssh.exe'"

```

## Load keys into ssh agent

Copy your keys into a folder that ssh-agent can access. Anywhere in the `$HOME/.ssh` should be ok.

Then add the key to ssh-agent. You will be prompted for a password and ssh agent will remember it for you.

```
ssh-add "C:\Users\darragh\.ssh\authorized_keys\darraghPersonalGithub"
```
😎 imposter of "this". apply(), call(), bind()
Tags: javascript, beginners
Published: 2022-09-24 12:39:57

## 💎 Imposter of 'this'
At first show you this sample of `call()`, it's ok if you don't get it so far

```javascript
class MyHouse {
  constructor() {
    this.ownerName = 'Kaziu'
  }
  enter() {
    console.log(`${this.ownerName} enter house`)
  }
}

class Thief {
  constructor() {
    this.ownerName = 'Thief'
  }
}

const myHouse = new MyHouse()
myHouse.enter()
// => "Kaziu enter house"

const thief = new Thief()
// ⭐ Thief class doesn't have enter method, but it can invoke by call
myHouse.enter.call(thief)
// => "Thief enter house"
```

Why gets like this result? at first `this` in `enter()` shows MyHouse instance.

```javascript
class MyHouse {
  constructor() {
    this.ownerName = 'Kaziu'
  }
  enter() {
    console.log(this)
    // ⭐ "MyHouse {ownerName: 'Kaziu'}"
  }
}

const myHouse = new MyHouse()
myHouse.enter()
```

but when executes call(), we can change this `this`

```javascript
class MyHouse {
  constructor() {
    this.ownerName = 'Kaziu'
  }
  enter() {
    console.log(this)
    // ⭐ "Thief {ownerName: 'Thief'}"
    // 😳 now instance of Thief !!!!!!!!!!!!!!!!!!!!!
  }
}

class Thief {
  constructor() {
    this.ownerName = 'Thief'
  }
}

const thief = new Thief()
myHouse.enter.call(thief) // ⬅ here invoke call()

```

basic pattern of `call()` is like that, actually `apply()` as well
```javascript
someFunction.call(imposter of "this");
```

> 🙄 So what is difference between call() and apply() ???

difference between call and apply is apply can takes array in second argument

```javascript
class MyHouse {
  constructor() {
    this.ownerName = 'Kaziu'
  }
  // ⭐ add arguments date and age
  enter(date, age) {
    console.log(this) // Thief {ownerName: 'Thief'}
    console.log(date) // 2021-8-21
    console.log(age) // 76
  }
}

class Thief {
  constructor() {
    this.ownerName = 'Thief'
  }
}

const thief = new Thief()
myHouse.enter.call(thief, '2021-8-21', 76) 

// ⭐ In case of apply, need to add array in second argument
myHouse.enter.apply(thief, ['2021-8-21', 76])
```

This is simple sample of `call()` and `apply()`, They can control of `this`, it's keyword

---

## bind()
There is similar method `bind` in javascript. Between `call`, `apply` and `bind` is that `bind` doesn't invoke function immediately.
Elasticsearch - analyzers and tokenizers in a human words - part 2 - practice
Published: 2022-09-24 17:01:30

Hi,

I would like to represent the 2d article devoted to analyzers and tokenizers. That time we will apply theory at practice and create custom analyzer and custom filter

Hope that you will find it to be interesting and useful. Have a pleasant reading

"[Elasticsearch - analyzers and tokenizers - part 2 practice](https://sergiiblog.com/elasticsearch-analyzers-and-tokenizers-part-2-practice/)"
Run Multiple Laravel Sail Projects on Same Machine
Tags: laravelsail
Published: 2022-09-24 16:53:55

Add the following to the **.env** file and make sure the following ports are different from each app

```ini
APP_PORT=81
FORWARD_DB_PORT=33061
FORWARD_MAILHOG_PORT=12051
FORWARD_MAILHOG_DASHBOARD_PORT=8027
FORWARD_REDIS_PORT=63791
FORWARD_MINIO_PORT=9001
FORWARD_MINIO_CONSOLE_PORT=8091
FORWARD_MEILISEARCH_PORT=7701
```
Tree Maker
Tags: webassembly, tooling, webdev, go
Published: 2022-09-24 16:52:14



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

https://ddddddo.github.io/gtree/

- This page calls a function that outputs tree. This function is a Go package compiled as WebAssembly.
- You can change the branches like in the image below.
- Also, once loaded, you can enjoy offline!