teleren/devto huggingface dataset:
The trick to learning to program
Tags: cybersecurity, devops, programming, privacy
Published: 2021-12-09 21:11:43

Some time ago I was working on a project with certain people who have a degree in systems engineering from the university. well ... what was the trick that I used to learn to program in basically any language.

Draw several conclusions that I am going to name.

1. ** Know the logic of programming **

logic is fundamental, and I will put it for you with a phrase taken from a philosopher that I like very much "... Therefore the ideology of empiricism cannot be functionally dispersed from the ideology of rationalism, since without logic as a foundation it is very difficult for you to empirically know the basis, the foundations of things, something that pure empiricism ignores and that pure rationalism exaggerates "basically what the phrase means is that the logic of programming is the initial foundation of all programming languages since all without exception use the same programming logic base and change some main phrases.

2. ** Create your own tools **

The great advantage of programming and more in my cybersecurity sector is that you have the possibility of programming ideas, example: a person manages to sneak a reverse shell, good with your experience and your programming logic, you know you are going to pull netcat to see what port you got the reverse shell sneaked in, you are going to use metasploit to try to sneak a remote powershell into the adjacent device to emit ddos ​​packets and evade the reverse shell ..

Well now, knowing the commands you are going to use, you are going to program a small tool that will automate that for you.

For this work specifically, we can go through two lines of work, the easy and the difficult

the easiest is to work with the BASH language
The difficult one is to work with R and assembler a small emulation of BASH and on that emulation pull bash commands

Without more, as I always say Good Luck Have Fun
El truco para aprender a programar
Tags: cybersecurity, devops, privacy
Published: 2021-12-09 21:09:55

Hace un tiempo estuve trabajando en un proyecto con ciertas personas que poseen un titulo de ingenieria de sistemas de la universidad, me parecio algo interesante el hecho mas bien el fenomeno de que los conocimientos tecnicos de programacion eran efimeros asi que me puse a pensar y dije bueno... cual fue el truco que yo use para aprender a programar en basicamente cualquier lenguaje. 

Saque varias conclusiones que las voy a nombrar.

1. **Conocer la logica de la programacion**

la logica es fundamental, y te lo pondre con una frase extraida de un filosofo que me gusta mucho "...Por ende la ideologia del empirismo no puede ser dispersada funcionalmente de la ideologia del racionalismo, ya que sin la logica como fundamento es muy dificil que empiricamente conozcas la base, los fundamentos de las cosas, cosa que el empirismo puro ignora y que el racionalismo puro exagera" basicamente lo que quiere decir la frase es que la logica de la programacion es el fundamento inicial de todos los lenguajes de programacion ya que todos sin excepcion usan la misma base de logica de programacion y cambian algunas main phrases.

2. **Crear tus propias herramientas**

la gran ventaja de la programacion y mas en mi sector de ciberseguridad es que tienes la posibilidad de programar ideas, ejemplo: una persona logra colarte una reverse shell bueno con tu experiencia y tu logica de programacion sabes vas a tirar de netcat para ver en que puerto te colaron la reverse shell, vas a usar metasploit para intentar colar una powershell remota en el dispositivo adyacente para emitir paquetes ddos y evadir la reverse shell..

Bueno ahora sabiendo los comandos que vas a usar vas a programarte una pequeña tool que te automatice eso.

para este trabajo especificamente podemos irnos por dos lineas de trabajo la facil y la dificil

la facil se trata de trabajar con el lenguaje BASH 
la dificil se trata de trabajar con R y ensamblador una pequeña emulacion de BASH y sobre esa emulacion tirar de comandos bash

Sin mas, como siempre digo Good Luck Have Fun
Basic NPM Packages  for Javascript Developers
Tags: javascript, node, webdev, npm
Published: 2021-12-09 20:14:09

**Dotenv:** .env is  zero dependency module that loads enviorment variables from a .env file into process.env .

ex-  const key = process.env.secretkey
this secretkey is declared in our .env file and that file will not be public.

**Bcrypt:** Bcrypt is a library that help you easily hash password and compare them in node.js


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

**UUID:** UUID is a unique random number ids values generator . It generate string random values.


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

**Axios** Axios is a popular promise based HTTP client for the browser and node.js .


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

**Socket.io :** Socket.io enables real time bi-directional communication between web clients and servers.
DRY Approach to CSS Sizing for Media Queries
Tags: dry, mediaqueries, css, responsive
Published: 2021-12-09 20:10:12

While working on an app recently, and possibly making the third revision on content and container spacing as well as font sizes the client was asking for, it dawned on me that we could save a fair bit of time by adjusting _where_ we put the logic for these updates. It was so simple. How could I have overlooked this solution for so long?

The pattern below is one I'm sure we've all seen in apps and websites.

```scss
.element {
  padding: 12px;

  @media screen and (min-width: 768px) {
    padding: 16px;
  }

  @media screen and (min-width: 1024px) {
    padding: 20px;
  }
}
```

Of course, you can accomplish this with a preprocessor by changing your variables in a single place. That's a common pattern we all use.

```scss
$padding-sm: 12px;
$padding-md: 16px;
$padding-lg: 20px;

.element {
  padding: $padding-sm;

  @media screen and (min-width: 768px) {
    padding: $padding-md;
  }

  @media screen and (min-width: 1024px) {
    padding: $padding-lg;
  }
}
```

However, one approach I began to take was conditionally changing CSS variables. Because the browser does not need to call a different variable name, this is more flexible than using preprocessed variables such as `-sm`, `-md`, and `-lg`. 

```scss
:root {
  --padding: 12px;

  @media screen and (min-width: 768px) {
    --padding: 16px;
  }

  @media screen and (min-width: 1024px) {
    --padding: 20px;
  }
}

.element {
  padding: var(--padding);
}
```

For common concerns like padding, margins, font-sizes, and a few others, this can reduce the need to use `@media` statements throughout multiple files within your app. At least for common concerns and a few advanced ones. We used this to change other things like `--grid-columns: repeat(3, 1fr);` for instance.

## Codepen Example
  
{% codepen https://codepen.io/itsfreshmade/pen/GRNwmwx %}

> _Feel free to play with these techniques in your current or next project, the only real caveat is that if you **must support** Internet Explorer (pre Edge) you'll need to add a polyfill._
Day 85/100 Ternary Operator
Tags: 100daysofcode, programming, javascript, motivation
Published: 2021-12-09 20:03:23

There are endless possibilities if one would try to do great to achieve a particular goal and put tons of trial and error to the test.  

![banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ac1hd7of1li1rooni0in.png)

We can use a ternary operator to perform this same functionality:

```
isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!');
```
In the example above:

- The condition, `isNightTime`, is provided before the `?`.
- Two expressions follow the `?` and are separated by a colon `:`.
- If the condition evaluates to `true`, the first expression executes.
- If the condition evaluates to `false`, the second expression executes.

## Code Snippets

```
let userName = 'Teddy';

if(userName) {
  console.log('Hello There!');
}

let userQuestion = 'Why is the sky blue?';
console.log(`${userName}, I have a question for you. ${userQuestion}`);

let randomNumber = Math.floor(Math.random() * 8);
// console.log(randomNumber);

let eightBall = '';
eightBall = randomNumber;

switch (eightBall) {
  case 8:
    console.log('It is certain');
    break;
  case 7:
    console.log('It is decidedly so');
    break;
  case 6:
    console.log('Reply hazy try again');
    break;
  case 5:
    console.log('Cannot predict now');
    break;
  case 4:
    console.log('Do not count on it');
    break;
  case 3:
    console.log('My sources say no');
    break;
  case 2:
    console.log('Outlook not so good');
    break;
  case 1:
    console.log('Signs point to yes');
    break;
  default:
    console.log(eightBall);
    break;
}

console.log(eightBall);
```

## a11y myths

**Accessibility is only about adding alternative text to images**

> In fact, missing alternative text for images is one of the biggest accessibility issues. But besides this, there are many things to be considered while making accessible website - headline structure, functional controls, color contrast and much more. 

[![resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgskmyizyv0vzzlyzdha.png)](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)
Strange Bugs 1: The Fussy Controlled Form
Tags: react, webdev, devjournal
Published: 2021-12-09 19:48:00

# Welcome to Strange Bugs!

In this post I will go over a bug I encountered while creating a controlled form in the app I'm working on.

Here is the layout for the component I was building: 

```
const Card = () => {
   const [showFront, setShowFront] = useState(true)
   const [formData, setFormData] = useState({
      input1: value1,
      input2: value2,
      ...
   })

   function handleInputChange(e) {
      const name = e.target.name;
      const value = e.target.value;
      setFormData({ ...formData, [name]: value });
   }
   ...
   
   const CardFront = () => {
      return <form>
         <input name="input1" value={formData.input1}
         <input name="input2" value={formData.input2}
         ...
         <button>Submit</button>
      </form>

   }

   const CardBack = () => {
      return <div>
         <p>{formdata.input1}</p>
         <p>{formdata.input2}</p>
         ...
      </div>
   
   }

   return (
      { showFront ? <CardFront /> : <CardBack />
   )

}
```

**The Bug:**

   When attempting to type into one of the inputs, I was only able to enter one character, and then I would be tabbed out of the input, and would have to re click the input over and over to continue typing.

**The Struggle:**

   This bug had me stumped for a good few hours, unsure what was causing the issue. After some time, I was convinced there was something going on with the state, as this issue had only came up after I turned the inputs into a controlled form by giving them state.

**The Realization:**

   While taking a look and breaking things down line by line with a fellow peer, we finally discovered what was going on. On each keystroke while typing in one of the inputs, the state for the formData would be updated in the parent / wrapper component, which would re-render the child component, causing it to forget that we we're writing in one of the inputs.

**The Solution:**

   My hack to fix this, was to simply break the nested components out of themselves, and put the jsx into react fragments instead.

```
return (
      { showFront ? 
         <> 
            <form>
               <input name="input1" value= {formData.input1}
               <input name="input2" value={formData.input2}
            ...
               <button>Submit</button>
            </form>
         </> 
         : 
         <> 
            <div>
               <p>{formdata.input1}</p>
               <p>{formdata.input2}</p>
               ...
            </div>
         </>
   )
                    
```
Passing Array elements through Props in React
Tags: react, webdev, javascript, programming
Published: 2021-12-09 19:43:14


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

I want to pass elements of arrayList to the **User** Component, through Props, and render them in a list.

The array must preset in the parent Component (let say app.js)

In App.js →
`<User userList={arrayList}/>`

Now We need to pass the Props through the User functional Component.

If you console.log(props) in the User.js You can see all elements of App.js And We want only arrayList of App.js,We declared the arrayList as UserList var . So If I console.log the Props.userList.I can see the arrayList elements.

Now time to render the arrayList. For this we will use Map function(know more about Map function in javascript)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pr1ai9c6w0gzvm0dqo9i.png)
Redis on Laragon
Tags: php, windows, redis, webdev
Published: 2021-12-09 19:32:43

> Redis is no longer supported in Windows, but the version `3.2.1` is still available to use [(ref)](https://redis.com/blog/redis-on-windows-8-1-and-previous-versions/#:~:text=Officially%2C%20Redis%20is%20not%20supported,ported%20to%20Windows%20by%20MSOpenTech.), so that's why laragon contain version `3.*` only. If you want to taste the latest redis version, using Docker through [Laradock](https://dev.to/dendihandian/redis-in-laradock-4jo4) would be an alternative.

## Installing PHP Redis Extension

If you right-click on the dashboard & check on `PHP > Extensions`, you will not find redis extension because it doesn't come up with Laragon by default. So you have to add it manually, but yet it so easy.

### Downloading The PHP Redis Extension DLL File

Go to [https://pecl.php.net/package/redis](https://pecl.php.net/package/redis) and find the right match your current PHP version but also use the latest stable available. In my case, it was version `5.3.4` at the moment and it supports PHP `8.0`, `7.4`, `7.3`.

![php redis version list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzo51n67z2bie78alk13.png)

Click the `Windows` icon DLL link to get the available distribution for the version. Download the archive that match with your PHP version. You might be confuse which one between Non-Thread-Safe (NTS) and Thread-Safe (TS) should you pick to download. To find out, just check on your Laragon dashboard and see the php version along with NTS or TS indication.

![TS or NTS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk0d3uh81pnesfe8mr9q.png)

### Adding the DLL File to the PHP Extension Folder
On the downloaded archive, you should find the `php_redis.dll` file.

![phpredis dll](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fz0x6x9s76wf910vzzwh.png)

copy or move the file to the `C:\laragon\bin\php\php-7.4.19-Win32-vc15-x64\ext` (change to your own path), and then add the line `extension=php_redis.dll` to the `C:\laragon\bin\php\php-7.4.19-Win32-vc15-x64\php.ini` file.

> the `php.ini file` was generated after a version of php in laragon was run for the first time.

you should see that Redis extension is available now.
![php redis menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tb6qwzws6afyo744ul6.png)

## Starting The Redis Server

If you installed the full laragon, redis is availabe in this path `C:\laragon\bin\redis\redis-x64-3.2.100` (change to your own path). To run the redis server, you can use Command Prompt to execute the `redis-server.exe`.


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

And you can also stop it later using `Ctrl + C`.

## The phpRedisAdmin

The phpRedisAdmin also available in the full laragon installation and can be accessed at [http://localhost/redis](http://localhost/redis)
Living in the Shell #10; find (File/Directory Search) (Part 2)
Tags: python, devops, linux, javascript
Published: 2021-12-09 19:22:51


## `find` 🔍

Finds files matching given criteria.

## Detailed result `-ls`

```sh
find /home/babak -name "*bash*" -ls
```

> ```text
> 11053679      4 -rw-r--r--   1 babak    babak        3772 Nov 25 12:45 /home/babak/.bashrc
> 11010465     28 -rw-------   1 babak    babak       24763 Nov 16 12:26 /home/babak/.bash_history
> ```

## Evaluate by executing a command on files `-exec`

### Example 1: looking for a word within files

```sh
find ~ -name '*.txt' -exec grep -q "hello" {} \; -print
```

> - Finds all `.txt` files that contain word "hello" in their content.
> - The `-print` option is necessary to print file names.
> - `{}` is the placeholder for the file path.
> - `\;` indicates the end of the command string.

### Example 2: looking for damages ZIP archives

```sh
find ~ -name '*.zip' -not -exec zip -qT {} \; -print
```

> - `zip -qT` quietly checks ZIP archive integrity.
> - `-not` negates the logical expression.

### Example 3: detect unformatted code files in a Python codebase

```sh
find . -type f -name '*.py' -not -path '*/venv/*' -not -path '*/__pycache__/*' -not -exec sh -c 'python3 -m autopep8 {} >/dev/null' \; -print
```

> - `autopep8` applies Python PEP8 standard formatting.
> - `>/dev/null` avoids cluttered/unnecessary output.
> - `-not -path '*/venv/*'` and `-not -path '*/__pycache__/*'` exclude `venv` and `__pycache__` directories.

### Example 4: detect unformatted code files in a JavaScript codebase

```sh
find . -type f -name '*.js' -not -exec sh -c 'eslint --no-eslintrc {} >/dev/null' \; -print
```

> - `eslint` is the ESLint CLI.
> - `--no-eslintrc` is for safety, to eliminate the need for a `.eslintrc` file.
Why Matplotlib Figure Inches Don’t Match Your Screen Inches and How to Fix it
Tags: matplotlib, datascience, datavisualization, python
Published: 2021-12-10 12:59:20

---
title: Why Matplotlib Figure Inches Don’t Match Your Screen Inches and How to Fix it
published: true
date: 2021-12-09 19:17:44 UTC
tags: matplotlib,datascience,datavisualization,python
canonical_url: 
---

[![](https://cdn-images-1.medium.com/max/600/1*LIeYNeqW6bcI5IWvpflrlA.png)](https://medium.com/dunder-data/why-matplotlib-figure-inches-dont-match-your-screen-inches-and-how-to-fix-it-993fa0417dba?source=rss----c2aa71d9ec41---4)

If you’ve worked with the matplotlib data visualization library before, then you’ll be familiar with the term figsize, which is measured…

[Continue reading on Dunder Data »](https://medium.com/dunder-data/why-matplotlib-figure-inches-dont-match-your-screen-inches-and-how-to-fix-it-993fa0417dba?source=rss----c2aa71d9ec41---4)
Interserf 
Published: 2021-12-09 18:59:52

[](https://photos.app.goo.gl/FsyTPJ1Y1Bf72sq77)
[](https://sites.google.com/d/1eV6EM-2_6r3RtZX7si0vXtMbCtaixZ41/edit?ouid=101548971618870594405)
Pure CSS "Matrix code" effect
Tags: css, styles, webdev, html
Published: 2021-12-09 18:54:35

[](url){% codepen https://codepen.io/tetragius/pen/RwLRqpd %}

## Step 1
Create CSS property (better for animation)
```css
@property --timer {
     syntax: '<integer>';
     inherits: false;
     initial-value: 1;
}
```
Or just
```css
:root { --timer: 1; }
```

## Step 2
Animate property
```css
 @keyframes animate-letter {
     to {
         --timer: 26; /*26 -  the number of letters of the English alphabet*/
     }
 }
```

## Step 3
Add some counter magic
```css
.letter {
     counter-reset: timer var(--timer);
     animation: animate-letter 2s linear infinite running;
}

.letter div:before{
     content: counter(timer, lower-alpha);
}
```
`lower-alpha` - [predefined counter styles](https://www.w3.org/TR/predefined-counter-styles)

Now, at each step of the animation, the variable `--timer` will increase by `1` until it reaches `26`. For each digit, the corresponding letter of the alphabet will be selected.

## Step 4
Add more counters
```css
.letter {
      counter-reset: timer-1 calc(var(--timer) + 1) timer-2 calc(var(--timer) + 2) timer-3 calc(var(--timer) + 3) timer-4 calc(var(--timer) + 4) timer-5 calc(var(--timer) + 5) timer-6 calc(var(--timer) + 6) timer-7 calc(var(--timer) + 7) timer-8 calc(var(--timer) + 8) timer-9 calc(var(--timer) + 9) timer-10 calc(var(--timer) + 10);
     animation: animate-letter 2s linear infinite running;
}
/*Add new counters, shifting each subsequent one by one*/

.letter div:before{
      content: counter(timer-1, lower-alpha) counter(timer-2, lower-alpha) counter(timer-3, lower-alpha) counter(timer-4, lower-alpha) counter(timer-5, lower-alpha) counter(timer-6, lower-alpha) counter(timer-7, lower-alpha) counter(timer-8, lower-alpha) counter(timer-9, lower-alpha) counter(timer-10, lower-alpha);
        writing-mode: vertical-rl; 
        text-orientation: upright;
}
/*Also directing text from top to bottom*/
```
## Step 5
Add other effects and animations on the bite. And it's ready!
how to make age calculator with html
Published: 2021-11-28 19:27:07


Add bookmark
#1
Here are the features I try to incorporate into the age calculator.what does age calculator ?
Age calculator age calculator
1. You can estimate the age of your child in terms of days
2. age calculator calculates age in seconds.
3. age calculatorhttps://pkdeveloper.in/age-calculator/ calulates age in minutes.
4. The 4 age calculator calculates the age in months.
5. age calculatorcalculates in years,
<html>
<head>
<title>Exact Age Calculator</title>
<link rel='stylesheet' href='style.css'/>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src='script.js'></script>
</head>
<body>
<div id="main_container">
<div id="birth_date_input">Birth Date*: <input type="date" id="birth_date"></div>
<br/>
<div id="calculate">Calculate your age**</div>

<div id="age_container"><span id="exact_age">Age</span></div>
<p><em>* The year here is 365 days and the month here is 30 days, that means your birthday may not mean you will be 0 days old.</br>
**Don't worry I will not share your input.</em></p>
</p>
</div>
</body>
</html>
#main_container {
width: 400px;
margin: 20px;
margin-left: auto;
margin-right: auto;
padding: 30px;
font-family: sans-serif;
border-radius: 20px;
border: 3px solid #999;
}

#birth_date_input, #age_container {
text-align: center;
margin: 20px;
margin-left: auto;
margin-right: auto;
}

#age_container {
margin: 40px 5px;
padding: 20px;
border-radius: 50px;
border: 1px solid #000;
font-weight: bolder;
background: #EEE;
font-size: 20px;
line-height: 40px;
}

#calculate {
cursor: pointer;
text-align: center;
width: 200px;
padding: 5px;
margin: 10px;
margin-left: auto;
margin-right: auto;
border: 1px solid #999;
border-radius: 10px;
background: #FFD119;
background: -webkit-gradient(linear, left top, left bottom, from(#FFD119), to(#E6B800));
background: -moz-linear-gradient(top, #FFD119, #E6B800);
font-weight: bold;
height: 28px;
box-shadow: 0 -8px inset;
}

#calculate:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#E6B800), to(#FFD119));
background: -moz-linear-gradient(top, #E6B800, #FFD119);
margin-top: 13px;
height: 25px;
box-shadow: 0 -5px inset;
}

#calculate:active {
background: #403300;
padding-top: 10px;
height: 20px;
box-shadow: 0 5px #000 inset;
}

#age {
padding: 5px;
border: 3px dashed #AAA;
background-color: green;
}
html{
background:rgb(100, 100, 1000);
}
Why we need age calculator ?
Let's first learn about what is the age calculator, age calculator is a term that has multiple meanings. Different people use age calculator differnetly. Some call the age calculator, Some calls birth calculator,Some uses the term date of birth calculator, Some calls dob calculator, while others call date of birth calculation.