teleren/devto huggingface dataset:
Paracetamol.js💊| #188: Explica este código JavaScript
Tags: javascript, webdev, spanish, beginners
Published: 2022-10-08 13:56:16

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark></center>

**Dada la siguiente clase, ¿Cuáles atributos son públicos?**

```js
class Dog {
  #peso;
  constructor({ color, tamanio, peso=10, cola=true}){
    this.color = color;
    this._tamanio = tamanio;
    this.#peso = peso;
    this.cola = cola;
  }
}
```

A. `Todos`
B. `Ninguno`
C. `Solo #peso`
D. `Todos menos #peso`

Respuesta en el primer comentario.

---

Respuesta:
D. Todos menos `#peso`

Por defecto en JavaScript, todos los atributos de una clase son públicos sin necesidad de usar una sintaxis especial.

Desde ES2020 podemos declarar variables privadas usando `#` seguido del nombre del atributo. como por ejemplo `#peso`.

Antes de esta sintaxis los programadores se limitaban a usar un `_` como en `_tamanio` para denotar que esa variable era "privada", pero solo era una convención entre programadores puesto que la variable en si no era privada, solo denotaba serlo.
Why should you learn Python?
Tags: python, programming
Published: 2022-10-08 13:41:34

Hello everyone today we want know why we should learn python.


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

**1.Python is the <u>Easiest</u> Programming Language to Learn**

The great thing about Python is that anybody can learn how to use it, even entry-level coders.

**2.Code <u>Libraries</u>**

Python has a vast amount of free code libraries that make your life easier.If you have never coded before, a code library is like an extension to your code. A library comes with a bunch of useful pre-written code modules you can use.

**3.Big and Helpful <u>Community</u>**

Python has a 30+ years old community.This is a long period of time and during these years the Python community has matured well.

_IMPORTANT QUESTION_

**Is Learning Python Worth it in 2022?**

**Yes, learning Python is worth it in 2022 because some of the hottest fields in tech – including machine learning and artificial intelligence – rely heavily on programmers with Python skills.**

[Reference](https://www.fdmgroup.com/blog/why-learn-python/)
[Reference](https://www.codingem.com/is-it-worth-learning-python/)
[Reference](https://brainstation.io/career-guides/how-long-does-it-take-to-learn-python)
Count Elements With Strictly Smaller and Greater Elements
Tags: javascript, leecod
Published: 2022-10-08 13:40:53


Given an integer array nums, return the number of elements that have both a strictly smaller and a strictly greater element appear in nums.

https://leetcode.com/problems/count-elements-with-strictly-smaller-and-greater-elements/

Example 1:

Input: nums = [11,7,2,15]
Output: 2
Explanation: The element 7 has the element 2 strictly smaller than it and the element 11 strictly greater than it.
Element 11 has element 7 strictly smaller than it and element 15 strictly greater than it.
In total there are 2 elements having both a strictly smaller and a strictly greater element appear in nums.
Example 2:

Input: nums = [-3,3,3,90]
Output: 2
Explanation: The element 3 has the element -3 strictly smaller than it and the element 90 strictly greater than it.
Since there are two elements with the value 3, in total there are 2 elements having both a strictly smaller and a strictly greater element appear in nums.

```js
/**
 * @param {number[]} nums
 * @return {number}
 */
var countElements = function (arr) {
  // sorting elemnt
  let nums = [...arr].sort((a, b) => a - b);
  // if length is less than 2 then no need to check as both elements are on extreme end of Array
  if (nums.length <= 2) {
    return 0;
  }
  // keeping count of element
  let count = 0;
  // moving from 1 to n-1 becoz start element will not have any element smaller than it & last element will not have any element greater than it
  for (let i = 1; i < nums.length - 1; i++) {
    let firstHalf = nums.slice(0, i);
    let secondHalf = nums.slice(i + 1, nums.length);
    let current = nums[i];
    if (Math.min(...firstHalf) < current && current < Math.max(...secondHalf)) {
      count++;
    }
  }
  return count;
};
countElements([11, 7, 2, 15]);
countElements([-3, 3, 3, 90]);
countElements([-71, -71, 93, -71, 40]);
```
Responsive Coffee Shop Website Using HTML CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-10-08 13:05:42

{% youtube xrBDp8mUmog %}

Responsive Coffee Shop Website Using HTML CSS JavaScript

This video will show you how to build a responsive coffee shop website using html css javascript

[Github Repo](https://github.com/codewithsadee/keofi)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[Download the starter file to practice](https://drive.google.com/file/d/128TwFjGZdCx8NS3n69dvMcIF5SWYv7J8/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
4:33 - File structure
5:02 - Project initial
12:22 - Header
34:13 - Hero section
41:28 - About section
47:47 - Service section
52:50 - Menu section
1:02:35 - Feature section
1:09:02 - Blog section
1:17:06 - CTA section
1:19:00 - Footer
1:28:30 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
PostgresSQL unit-1
Tags: postgres, sql, javascript, database
Published: 2022-10-08 13:04:03



> ## 1-dars


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

PostgesSQLning commandlarini korsatish uchun 

```
\h
```

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

PostgresSQLda nechta DATABASE borligini bilish uchun 


```
\l
```

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

PostgresSQLda DATABASE yaratishda katta harflardan foydalangan maqul databasenamedan keyin nuqta-vergul (;) qo'yilishi kerak

```
CREATE DATABASE learning;
```

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

Databasega ulanish

```
\c learning;
```




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


Databaseni o'chirib yuborish
```
 DROP DATABASE learning;
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/copwyadg516w0ur94976.png)
DMs do not scale your company
Tags: productivity, career, writing, startup
Published: 2022-10-08 13:02:52

Your startup won't grow while your employees discuss things in direct messages. Every discussion should be public. Every piece of knowledge should be shareable with everyone inside your company.

## Discuss everything in public channels

Discord, Slack, or even mailing lists, all discussions inside your company should be public. Everyone inside it should be capable of giving an opinion about the theme that was discussed if they want, and you should promote a culture where all employees have an idea about it.

Your employee should know about the following:

- What other people are talking about that theme;
- Why other people are talking about that theme;
- What is the opinion from everyone about that theme;
- What is the path and the strategy that they are taking based on what has been discussed about that theme;

## Promoting a culture of learning in public

Do you know what issues your coworkers are solving? If someone asks you what the people next to you are solving, can you explain it in some detail? Do you know what progress has been made? If, for some reason, your coworker needs to stay off for some days, maybe because sick, can you take their issue and finish it in a few days, or will you need to take time to understand what was the pieces of the puzzle that your friend found?

Promoting a culture where each other knows what is going on, what is their issues and the issues of their coworkers and how and why they did some decisions is a way to turn your company more antifragile, stronger, and goes faster than your competitors.

## How could I  create this culture in my company?

- Create an environment where everyone can ask any question and everyone can help solve the doubt; questions should be in your public channels;
- Every time that doubt was solved, incentive them to create an article on your internal documentation* about the issue and how they can solve it and a blog post talking about the problem;
- Promote events where everyone can interacts with each other, in some way can improve what they know about each other and improve the "general-knowledge" context about your company, codebase or anything else.

---

Here at [Woovi](https://woovi.com/), we promote a culture of shareable knowledge from each other in the company, every discussion is made on public channels and we have a internal documentation with a lot of notes about issues and other internal things, like architecture decisions, etc. We need it to move faster than our competitors.

If you think that fits into this culture and wants to work in a place like that, [we are hiring](https://woovi.com/jobs/)!
Carrer Meaning
Tags: webdev, beginners, programming, javascript
Published: 2022-10-08 12:24:03

Carrer Meaning is to have respect from people like Jeffrey , Bill , Mark If they say your good everyone like😱
If they say your bad everyone like😏Yeah he dont deserved it . When they like your food everyone like😱But if they don't like food everyone like😏They eat from 7 star hotel He again don't deserved it . What the fuck . There is another meaning that is Respected by a Woman . When you see a new Girl what your friends ask . What she look like . Ladies when you see a new guy what your friends ask what did he do . Fun Fact Only Women, Children and Dog's are loved unconditionaly . A man is only loved under a condition that he provides .

Article End 

Edit:This half article is based on a speech .
[Python]Telegram Automation
Tags: beginners, tutorial, python, programming
Published: 2022-10-08 12:16:23

# Telegram Automation
## Overview
It is a sample of using Python code to control the Telegram Windows client and send messages to contacts and the Telegram channel. 

## Step by Step 
1. [Set up Clicknium](https://github.com/clicknium/clicknium-docs#set-up-clicknium-visual-studio-code-extension) 
    - Install VS Code Clicknium [Extension](https://marketplace.visualstudio.com/items?itemName=ClickCorp.clicknium)
    - Use the extension to install Clicknium Python [SDK](https://pypi.org/project/clicknium/) 

2. Log in to your Telegram client.

3. Capture the search bar  
    - Click `Capture` button  
    ![capture button](https://s1.328888.xyz/2022/10/08/fW1Rm.png)  
    - Use `Ctrl + Click` to capture search bar   
    ![search bar](https://s1.328888.xyz/2022/10/08/fWKVk.png)   
    - Get the search bar locator  
    ![search bar locator](https://s1.328888.xyz/2022/10/08/fWcpE.png)  
    - Validate the locator  
    ![validate locator](https://s1.328888.xyz/2022/10/08/fW2FJ.png)
    The validation would be failed. The most simple way to debug this issue, we can use a new feature provided by Clicknium: `Recapture & Compare`
    ![recatpure](https://s1.328888.xyz/2022/10/08/fWJpo.png) 
    After recapturing the search bar, we can get the compared model to check the difference between the old and new. 
    ![compare](https://s1.328888.xyz/2022/10/08/fWyOF.png)  
    It's easy to get the difference between the old and new is the `name` attribute. There is a number that follows the word "Telegram."
    We can use the [wildcard](https://www.clicknium.com/documents/concepts/locator#wildcard-locator) to fix it by changing the number `383784` to `*` and saving the locator. 
    Validate again, and it will succeed. 

4. Set text into the search bar
- Include the Clicknium package into your Python code and set the contacts name into the search bar using Clicknium API.
```Python
from clicknium import clicknium as cc, locator

cc.find_element(locator.telegram.contact_search).set_text("DK H")
``` 

5. Select the contacts by pressing the `Enter` key. 
More codes of the key can be found at [the page](https://learn.microsoft.com/en-au/dotnet/api/system.windows.forms.sendkeys?view=windowsdesktop-6.0#remarks) 
```
    cc.send_hotkey("{ENTER}")
``` 

6. Capture the message text input and send messages button using the same way as step 3. 
7. Code the workflow into Python. You can check the sample in the sample.py file. 

## Source code
Github: https://github.com/automation9417/TelegramAutomation
Proxycurl - Accessing Data
Published: 2022-10-08 12:05:37


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

Proxycurl is a private company with ranges of product and services for building and scaling of data-driven applications on people and companies with our API without worrying about scaling a web scraping and data-science team.

The need for data for business decision making is evolving and the cost of hiring data science teams and web scrapping of data is what one has to consider, that's where proxycurl comes in. 
We abide by strict standards of legal compliance in obtaining data.

On top of that, our security and compliance feature sets rigorous policies in place to safeguard data, uphold information security, and ensure our API is designed with a high bar of security and privacy in mind. 
To find out more about our product, clients and services, checkout 
[our products](https://nubela.co/blog/linkdb-an-exhaustive-dataset-of-linkedin-members-and-companies/)
Here's why you need to start learning in public!
Tags: programming, productivity, codenewbie, beginners
Published: 2022-10-08 11:57:18

You have been trained your entire life to learn in private. You go to school. You do homework. You get grades. And you keep what you
learned to yourself. Success is doing this better than everyone else around you, over and over again. It is a constant, lonely, zero-sum race to get the best grades. To get into the best colleges. To get the best jobs. If you’ve had a prior career; chances are that all your work was confidential. And of course, you don’t share secrets with competitors!


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


LEARNING IN PUBLIC:
• The 1% Rule: “Only 1% of the users of a website add content, while Appendix: Why It Works 9 the other 99% of the participants only lurk.” You stand out simply by showing up.

• Cunningham’s Law: “The best way to get the right answer on the Internet is not to ask a question; it’s to post the wrong answer.” Being publicly wrong attracts teachers, as long as you don’t do it in such high quantity that people give up on you altogether. Conversely, once you’ve gotten something wrong in public, you never forget it.

• Positive Reinforcement: Building in a social feedback mechanism to your learning encourages more learning. As you build a track record and embark on more ambitious projects with implicit future promise, your public activity becomes a Commitment Device.

• Availability Bias: People confuse “first to mind” with “the best”. But it doesn’t matter — being “first to mind” on a topic means getting more questions, which gives the inputs needed to become the best. As Nathan Barry observed, Chris Coyier didn’t start out as a CSS expert, but by writing CSS Tricks for a decade, he became one. This bias is self-reinforcing because it is self-fulfilling.

• Bloom’s Taxonomy is an educational psychology model which describes modes of learning engagement — the lowest being basic recall. Learning in Public forces you toward the higher modes of learning, including applying, analyzing, evaluating, and creating.

• Inbound Marketing: Hub spot upended the marketing world by proving you didn’t have to go out in front of people to sell. Instead, you can draw them to you by making clear who you are and what you do, offering valuable content upfront and leaning on the persuasive power of Reciprocity and Liking.

• Productizing Yourself: By creating learning exhaust, you can teach people and make friends in your sleep. This disconnects your networking, income, and general Luck Surface Area from your time. Don’t end the week with Nothing. This is Portable Personal Capital that compounds over time and that you can take with you from company to company.

RESOURCES:
TO GET THE BOOK BY SHAWN SWYX WANG
https://www.learninpublic.org/

THE
CODING
CAREER
HANDBOOK
Guides, Principles, Strategies and Tactics
from Code Newbie to Senior Dev
A game recommendation system
Tags: python, algorithms
Published: 2022-10-08 11:42:30

This program has been made following the Computer Science portfolio of Codecademy. The subject of matter here was Data Structures and Algorithms, so the focus was to make a basic recommendation program, that would take user inputs and provide results based on the words/letters the user was looking for.

The topics to suggest were of free choice. We went with a set of some praised videogames which would get recommended based on the genre of the games.


![Animated preview running the program](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehh4v3ysiu2ypqx3hazm.gif)

**Explanation of the code**:
The repository is composed of three Python files:

- The raw data (gamesData.py): Consists of two lists, one with the strings of genres available, the other contains 40 selected games, each one is another sublist with different attributes as strings (title, genre, score, etc.)
- The data structure (BinarySearchTry.py): Here we have the class defining a Binary Search Tree. The class will be used to introduce the data and provide methods to search for a genre or to traverse the tree.
- The main program (Recomm.py): Everything will be glued together here, to set in motion the user prompts, store the data into the BST and retrieve it according to the user choices.

You can view the full code on [GitHub](https://github.com/Albron-droid/Game_Recommendation).

**Conclusion**:
The goals of the project were using a data structure to store the data and searching data within the structure with an algorithm, altogether while making use of the control version Github and the CommandLine.

These have been fulfilled. The efficiency of the algorithm can be improved though.
You need to start reading documentation now!
Tags: beginners, programming, codenewbie
Published: 2022-10-08 11:27:27

You are inspired and enthusiastic to learn some new technology so you pull out one of your media-consuming devices and crank up a new tutorial to learn the technology you're passionate about. There's nothing wrong with this approach as there is a huge amount of media resources that can help you but have you ever stopped, and wondered what will you do if you are working with a less common technology?

## Reasons to read the documentation

When you start to learn programming through video tutorials, you get addicted to them and whenever you find yourself in a problem it's natural to pull up another video and start watching it but if you come across a library that isn't widely used you will fall into a lot of problems because you have never actually read documentations before due to which you have no idea what you're doing. In most cases, it is difficult to quickly pick up on the docs and work effectively with them.

## Benefits of reading documentation

There are a number of benefits of reading documentation. One being the most sensible is that no matter what, you'll be able to understand and work with a library that does not have a big community, but the hidden benefit of reading the docs is that you'll be able to distinguish between good and bad documentation. Honestly, this is a blessing in disguise because sooner or later you'll be the one writing the documentation either for your next big thing or for your job but one thing is certain every developer ends up writing the docs and when you have enough experience to distinguish between good and bad documentations, you can write good and effective docs that will help you and any other developer that's going to use your code.
Simple FAQ Collapse
Tags: javascript, webdev, tutorial, react
Published: 2022-10-08 10:40:24

Was in the process of making collapsable divs with NextJS when building a FAQ page so I figured I’d share it here with you guys aswell! 

Libraries used:
- React-Icons
- TailwindCSS
- React

So for starters I made a FAQ component which I put inside /components, this is the resulting code:

```js
import { RiQuestionLine } from "react-icons/ri";
import { useState } from "react";

export function FaqList(props) {
  return <div className="faq-list">{props.children}</div>;
}

export function FaqItem(props) {
  const [open, setOpen] = useState(false);
  return (
    <div className="faq-item">
      <div onClick={() => setOpen(!open)} className="faq-header">
        <div className="faq-icon-wrap">
          <RiQuestionLine className="faq-icon" />
        </div>
        <h3 className="faq-title">{props.title}</h3>
      </div>
      {open && (
        <div className="faq-body">
          <p className="faq-text">{props.children}</p>
        </div>
      )}
    </div>
  );
}

```

And then I import the respective component into my FAQ page to be able to build the FAQ’s, and this code is structured like this:
```js
<FaqList>
    <FaqItem title="Why is the apprentice role prioritised in developer list?">
      Because we believe in giving apprentice developers a chance to get a
          foot into the industry.
    </FaqItem>
    <FaqItem title="What is this?">
      This is a demo of the ReactJS framework.
    </FaqItem>
</FaqList>
```

Here’s the CSS:

```css
/* FAQ COMPONENT */
  .faq-list {
    @apply flex flex-col space-y-2;
  }
  .faq-item {
    @apply flex flex-col gap-2;
  }
  .faq-header {
    @apply flex items-center gap-2 cursor-pointer bg-indigo-100 rounded-md p-2 select-none;
  }
  .faq-icon-wrap {
    @apply flex items-center justify-center p-1.5 rounded-md bg-indigo-500 text-white;
  }
  .faq-icon {
    @apply w-4 h-4;
  }
  .faq-title {
    @apply font-medium text-indigo-500;
  }
  .faq-body {
    @apply flex flex-col gap-2 py-3 px-5;
  }
  .faq-text {
    @apply text-xs italic text-gray-700 max-w-3xl;
  }
```
Keep in mind that you will need to use Tailwinds built in compiler using postcss and so on so you’ll be able to use the @apply function inside of your css. This will also only work in globals.css and not the module based css files.

The result should be something like this:
![FAQ Collapse Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnwuf3ruwxoe3v6kyj0c.png)

Feel free to correct me below if I’ve said something wrong or if you want to give feedback to this.

Regards, etcroot.
Quick Example on using LocalStorage in React
Tags: javascript, react, api
Published: 2022-10-08 10:38:48

In this example, I would quickly show you how to store the state of an item in React with LocalStorage.

## Usage in Vanilla vs. React
The difference between using localStorage in React compared to Vanilla javascript is that we have to make use of two React hooks. 
I would assume you already know what these are but if you don't you can visit these links below.
[useState](https://reactjs.org/docs/hooks-state.html)
[useEffect](https://reactjs.org/docs/hooks-effect.html)

## Example
I am trying to toggle the state of an item between 'On' and 'Off' and want to store that state in the browser. Here's how I would go about it.
```html
<button onClick={() => changeOn(!isOn)}>
```
```js
const [isOn, setisOn] = useState(localStorage.getItem('Status') === 'true');

useEffect(()=> {
    localStorage.setItem('Status', JSON.stringify(isOn));
}, [isOn])

function changeOn(status){
    setisOn(status);
}
```
That's it!
If you're still confused I would be happy to explain my solution to you in the comments.

Goodluck!