teleren/devto huggingface dataset:
Los cepillos de dientes originales que cuentan con un 30% menos de plástico y un mango 100% reciclable
Tags: webdev
Published: 2022-01-26 19:05:49

El cuidado bucal es fundamental para mantener un buen estado de salud: De hecho, varios estudios han demostrado la relación entre las enfermedades periodontales y otras patologías del organismo. Una adecuada higiene bucal, que incluye un correcto cepillado después de cada comida, puede prevenirlas.

Para que el proceso de cepillado sea efectivo, es fundamental contar con cepillos de dientes de buena calidad y que cumplan con la función de retirar los restos de comida y placa bacteriana sin maltratar las encías. Un buen ejemplo de ello son los cepillos de dientes MyOwn, los cuales han sido especialmente diseñados por dentistas y, además, están elaborados con material de excelente calidad y 100 % sostenible.
[https://institutinternet.org/](https://institutinternet.org/)
HTML ⇒ The color Cape
Tags: beginners, programming, webdev, html
Published: 2022-01-26 18:48:17

Hello tribe, how are you? Today we're going to talk about how to start giving colour to all this stuff we've been talking about since this madness started! give it sugar baby! 👻😈

## Give colour?
Yes, I mean using css in html! so, from this post on, we are going to rotate the Wednesday topics between html and css.

## Very nice but how do we do it? 🤔

There are three ways to incorporate css into html documents: 

- Inline styles(deprecated)
- Styles in the head(deprecated)
- Styles in a style sheet

Inline styles have this form and their use is not recommended:


```html
<p style="color: red;"> red text</p>
``` 



Styles that were placed in the head of the document did so in this way and their practice is also discouraged: 



```html
<style>
    p{
        color:red;
      }
</style>
``` 
Styles with a link: 

```html
 <link rel="stylesheet" href="mydoc.css">
``` 

This last one is recommended as it allows a huge improvement when loading the page as it means fewer lines in the html document as opposed to the first ones that I mentioned, so the performance of the page goes up like crazy.😜

Well guys raise your swords because CSS is coming! .⚔😎
Thanks for reading today's post and remember to be the best version of you
Haskell secure messenger - SimpleX Chat v1 has been released!
Tags: haskell, swift, kotlin, messenger
Published: 2022-01-26 18:27:47

[SimpleX](https://simplex.chat/) is a new platform for distributed Internet applications where the privacy of the messages and the network matters most.

The current version is stable, robust and can be used from the terminal (command line) on [all major desktop platforms](https://github.com/simplex-chat/simplex-chat) (Linux/Mac/Win) and on [Android phones in Termux](https://blog.devgenius.io/how-to-compile-haskell-on-termux-for-aarch64-architecture-cc15375d3595)!


![screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rikr3rcxc9jd50nu7v3.png)

There is currently no messaging application that respects user privacy and guarantees metadata privacy - in other words, messages could be private, but a third party can always see who is communicating with whom by examining a central service and the connection graph. SimpleX, at its core, is designed to be truly distributed with no central server. This allows for enormous scalability at low cost, and also makes it virtually impossible to snoop on the network graph.
Javadcript Prototype Property
Tags: javascript, programming, webdev, react
Published: 2022-01-26 18:08:20


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ir466tj6en6xpk1518yn.jpeg)Prototype is like some kind of inheritance concept but it's totally different from other languages. Mainly it comes for this purpose, when we are creating an object using by function constructor, we can not change property outside from that. But we can modify this functions constructor using the prototype. The condition is every time must be needed to use a new keyword.Prototype mainly works when we need to use extra object method or any object property then prototype gives access with a specific object or something where we need to get access. But you think you can add an extra method or property using '.'.Like
```javascript
 let x = {};
x.play = function(){
//console.log('using method')
};
``` 
In here have a condition, you can create this method but if you want using this same method another function or object creator or etc. You need to define the code again and again. So if we are using the prototype, we can call a method or property top of the code and we can use that where we want, In this process, we do not need to write code again and again.
Remember that function creates an object using by constructor though it's working behind the scene. 
```javascript 
let x= {  name:"mahin"} // x.__proto__
let y = [12,2,4]  // y.__proto__
function func(){ } // func.prototype
```

When we are initialization a function, array, object. Every time javascript is added by default some hidden property. which one is a prototype or __proto__. prototype only working with function. Other time working __proto__. Those are the same things.

```javascript 
let ss = {
    say:function(x){
        this.adress = x;
        return this;
    }
}
function Person(first) {
  this.firstName = first;
}
Person.prototype = ss;
const myFather = new Person("John");
console.log(myFather.say('dhajka'));
// its different for __proto__
let ss = {
    say:function(x){
        this.adress = x;
        return this;
    }
}
let Person = {
    names:'mahin'
}
Person.__proto__ = ss;
const myFather = Person;
console.log(myFather.say('mahin'));


```
Remember we need to use this keyword for creating an object. actually, this means an object and we know if we are want to create a new object we need to call the object. property. If you want to learn more you can explore Object.create.
sometimes, when we are completely using prototype then if we can console the object/function/array we can find a  children prototype inside a parent prototype that's mean parent object data inside the first prototype and the last prototype is chield prototype.
Dockerfile : how-to output the result of a command when building an image
Tags: docker
Published: 2022-01-26 18:00:54

It can be useful to "see" the filesystem content at a building step, to make sure that previous steps have been really successful.

To list the content of the `/user/bin/` folder for example you can add this instructions : `RUN cd /usr/bin/ && echo $(ls)`

After that you may need to run your docker build command with these extra flags to see an output : `docker build --progress=plain --no-cache ...`
Custom pipeline extension error
Tags: nimmalegacy, pipelineextension, modulenotfound, spectralcore
Published: 2022-01-26 17:53:05

Hello,

I developed a new custom pipeline extension following the guide from https://docs.microsoft.com/en-us/azure/devops/extend/develop/add-build-task?view=azure-devops that does a linting on some files. For that I used the spectral-core library and everything worked perfect locally but when I tried to test the extension inside a test azure pipeline I get the following error: " ##[error]Unhandled: Cannot find module 'nimma/legacy'" 

I investigated a little and all node modules are there.

I found out that inside spectral core path for nimma is redefined inside tsconfig.json :

   "nimma/legacy": ["node_modules/nimma/dist/legacy/cjs/"]

Now my guess is that this is not correctly evaluated inside the pipeline but I just started to work with node and not sure about it.

Did someone encountered this issue or has any tips?
How-to extract nginx.conf of a nginx-ingress-controller pod ?
Tags: kubernetes, nginx
Published: 2022-01-26 17:52:17

It can be useful sometimes to take a look at the final .conf file generated after having combined all Ingress rules, this command can help you copy that file locally :

`kubectl cp YOURPOD-nginx-ingress-controller-UUID:nginx.conf ~/Downloads/my-nginx.conf`
Responsive travel website using tailwindcss & alpinejs | Datepicker | CodeF
Tags: tailwindcss, alpinejs, html, ux
Published: 2022-01-26 17:47:39

Hello everyone, here a tutorial how to build responsive website using tailwindcss and alpinejs.

I have modified and used [Mithicher](https://codepen.io/mithicher/pen/VwvZaxm) datepicker which is available in codepen.

Here's the link to [tutorial](https://youtu.be/xaY-Z8C5j8o)
CodeWars Kata: Mumbling
Tags: python, beginners
Published: 2022-01-26 17:41:13

For today's challenge, I want to focus on python's enumarate() function. Here's the challenge :

**_Instructions_**

Write a function that produces the following output.

```
accum("abcd") -> "A-Bb-Ccc-Dddd"
accum("RqaEzty") -> "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy"
accum("cwAt") -> "C-Ww-Aaa-Tttt"
```

**_Approach_**

Note that each first letter is capitalized in the output even if it was in lowercase in the input.

An idea that may be apparent to you first is to loop through the string, capitalize the first letter and add the lowercase letters depending on its index+1 in the string.

The solution can be implemented as follows

```python
def accum(s):
    str = ""
    for i in range(0, len(s)):
        str += s[i].upper()
        str += s[i].lower()*i
        if i != len(s)-1:
            str += "-"
    return str
```

**_Use enumerate()_**
However you can use enumerate() which takes a iterable and returns an enumerate object. It adds a counter as the key of the enumerate object.

Syntax `enumerate(iterable, start)`

Start is an optional parameter that provides the index value where the counter should start. The default is 0.

```python
def accum(s):
    output = []
    for count, letter in enumerate(s):
        output.append(letter.upper() + letter.lower()*(count))
        print(output)
    return '-'.join(output)
```
Let me know other solutions you develop.
Hi👋
Published: 2022-01-26 17:28:40

 

## Introducing myself
I'm _Zeynal Mardanli_. Currently I'm a CE student💻 who tries to learn front-end development(and probably also back-end in the future). I love to listen anime musics, rap (however most of time Eminem), lofi and nightcore (i know that is a weird playlist🎧). If you didn't listen **Persona 5**❤️ musics, go and check it out. If you did, then go and listen again. They're pretty crazy.

 I try to learn front-end development everyday at least 1 hour since the beginning of the 2022. Now it's the 26th day and I'll post the new things that I learn because I don't want to forget even a little knowledge which can be useful. That's why I'll post them there and maybe I can add them into my website in the future. 
 
 I want to write these notes as possibly as informative, that's why probably I'll just write some draft at first and then publish it.

## Links
GitHub: https://github.com/Lshiroc
Frontend Mentor: https://www.frontendmentor.io/profile/Lshiroc

## Useless info
I probly will change the date and education status on this post after finish my goal, if there is a setting like that:)

Yeah there is🥳
Ethernaut Hacks Level 17: Recovery
Tags: solidity, ethereum, openzeppelin, smartcontract
Published: 2022-01-26 17:13:50

This is the level 17 of OpenZeppelin [Ethernaut](https://ethernaut.openzeppelin.com/) web3/solidity based game.

## Pre-requisites
- Basic [Etherscan](https://rinkeby.etherscan.io) inspection
- [Determining address of a new contract](https://swende.se/blog/Ethereum_quirks_and_vulns.html)

## Hack
Given contract:
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

import '@openzeppelin/contracts/math/SafeMath.sol';

contract Recovery {

  //generate tokens
  function generateToken(string memory _name, uint256 _initialSupply) public {
    new SimpleToken(_name, msg.sender, _initialSupply);
  
  }
}

contract SimpleToken {

  using SafeMath for uint256;
  // public variables
  string public name;
  mapping (address => uint) public balances;

  // constructor
  constructor(string memory _name, address _creator, uint256 _initialSupply) public {
    name = _name;
    balances[_creator] = _initialSupply;
  }

  // collect ether in return for tokens
  receive() external payable {
    balances[msg.sender] = msg.value.mul(10);
  }

  // allow transfers of tokens
  function transfer(address _to, uint _amount) public { 
    require(balances[msg.sender] >= _amount);
    balances[msg.sender] = balances[msg.sender].sub(_amount);
    balances[_to] = _amount;
  }

  // clean up after ourselves
  function destroy(address payable _to) public {
    selfdestruct(_to);
  }
}
```

`player` has to retrieve the funds from the lost address of contract which was created using the `Recovery`'s first transaction.

If the address of the lost `SimpleToken` address is retrieved it's funds can be retrieved using the `destroy` method.

The easiest way to solve this would be to copy the address of `Recovery` in [Etherscan](https://rinkeby.etherscan.io/) (on Rinkeby network) and inspect transactions in **Internal Txns** tab. Find the latest **Contract Creation** transaction and click through the same to get the address of created contract.

Now simply call `destroy` method at that address.
So, if `tokenAddr` is the retrieved address then:
```javascript
functionSignature = {
    name: 'destroy',
    type: 'function',
    inputs: [
        {
            type: 'address',
            name: '_to'
        }
    ]
}

params = [player]

data = web3.eth.abi.encodeFunctionCall(functionSignature, params)

await web3.eth.sendTransaction({from: player, to: tokenAddr, data})
```
That'd do the job.

Another way to get the lost address is by utilizing the fact that creation of addresses of Ethereum is deterministic and can be calculated by:
```
 keccack256(address, nonce)
```
where `address` is the address of contract that created the transaction and `nonce` is the number of contracts the creator address has created. You can read more [here](https://swende.se/blog/Ethereum_quirks_and_vulns.html).

That's it!


_Learned something awesome? Consider starring the [github repo](https://github.com/theNvN/ethernaut-openzeppelin-hacks)_ 😄

_and following me on twitter [here](https://twitter.com/heyNvN)_ 🙏
Build personal GitHub Showcase
Tags: javascript, web, html, beginners
Published: 2022-01-26 17:07:19

**Note:-** at the end of this article I shared free tool for Git Showcase don't forget to check.

## What is GitHub Showcase ?
GitHub is version control system and GitHub showcase is personal showcase of your project work or recent work you developed. Its similar to portfolio but it is not portfolio. Its showcase of your personal project work which you want share with others.
#### Build your Personal GitHub showcase 
you can develop your personal GitHub showcase with basic knowledge of web development. You can Customize your showcase with your own creativity and development or another way to build your showcase is prebuild feature provide by GitHub showcase platform which allows you to make your showcase with some basic steps.

#### I developed my own GitHub showcase 
[Check Live Demo](https://ganesh-githubshowcase.netlify.app/)

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

### Build your showcase without code
Yes you can also build your GitHub showcase without single line of code for this follow steps mention below :-

Step 1] Visit [Gitshowcase](https://www.gitshowcase.com/)

Step 2] Sign up with GitHub account

Step 3] Filled required data

Step 4] Select projects you want to share with your GitHub Showcase.

Step 5] You're Done.

 [Free tool for Git Showcase](https://www.gitshowcase.com/)
if you build your Git Showcase using this tool tag me on twitter I help you to improve your showcase.

Thankyou for reading and share your views in comment section and follow if you get this helpful. Connect with me on  [ twitter](https://twitter.com/PatilGanesh1010) I shared content which helps you to become developer.
Flexbox Froggy for CSS (a fun way to learn flexbox)
Tags: beginners, css, codenewbie, webdev
Published: 2022-01-26 17:01:16

So, recently I've been getting into learning CSS box model and flexbox and I came across this amazing little website.

#[Introducing Flexbox Froggy!](https://flexboxfroggy.com/)

Flexbox Froggy is a free-to-play, interactive browser game that teaches you how to align and move flex boxes around on your webpage. 

The game consists of 24 coding lessons to get you to help move little frogs onto their respective lilypad.

![Froggy on a lilypad](https://media1.giphy.com/media/r7QiDunxBlEVVUgtfh/giphy.gif)

I personally love websites like these that teach coding through interactive games (bonus if it includes little characters).

Let me know what resources you find helpful for learning flexbox!

![happy coding](https://data.whicdn.com/images/352403374/original.gif)
Why Markdown?
Tags: programming, webdev, tutorial, discuss
Published: 2022-01-26 16:50:28

Here's the rationale behind our decision to base our docs' format on Markdown. 

Why Markdown? 
- COMPATIBILITY! For example, if you're using Notion and Confluence to document your code, you can easily import to Swimm
- GitHub and the IDEs know how to parse & render Markdowns
- Markdown has become a standard and ultimately makes documentation easier 

Why we moved?
- We [used to store content](https://swimm.io/blog/docs-as-code-understanding-swimm-sw-md-markdown-format/) as .swm files in JSON format. So yes, it was easier for computers to read, but it wasn't readable as text and it didn't render in editors
- .swm was not user friendly 
- we struggled to review changes
- JSON's curly bracket format made editing harder than it needed to be 

First things first, here is what sw.md looks like in: 
**Github**
![sw.md-github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5nvqpfpidvjj174humj.png)

**VSCode**
![sw.md-vscode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oyzhhf325023rlui6bhv.png)

[Learn more about docs as code here. ](https://swimm.io/blog/docs-as-code-understanding-swimm-sw-md-markdown-format/)
Simple nested JS Ternary
Tags: javascript, ternary, productivity, fasterconditions
Published: 2022-01-25 07:55:10

Sometimes it's really hard to grasp the idea of nested ternary in JavaScript, so I decided to present the simplest way of it, because I also struggled in the past when I just was too lazy to use if statements and wanted something handy and short. So this is it!

Suppose we have [this](https://www.codewars.com/kata/5ce9c1000bab0b001134f5af/train/javascript) task from codewars.com. Here what it says:

> Given a month as an integer from 1 to 12, return to which quarter of the year it belongs as an integer number.
> For example: month 2 (February), is part of the first quarter; month 6 (June), is part of the second quarter; and month 11 (November), is part of the fourth quarter.

Let's implement it in ternary:
First we are checking whether month is less than 4:
```javascript
const quarterOf = (month) => {
  return month < 4 ? 1   
}
```
Then like always in ternary we are adding a colon
```javascript
const quarterOf = (month) => {
  return month < 4 ? 1 : 
```
But instead of just adding the value in case of false we are adding the next condition which works just fine: 

```javascript
const quarterOf = (month) => {
  return month < 4 ? 1 : 
  month < 7 ? 2 :
```
And we can do it many times: 

```javascript
const quarterOf = (month) => {
  return month < 4 ? 1 : 
  month < 7 ? 2 : 
  month < 10 ? 3 : 
  4;  
}
```
And at the end we put the value like in else case.
How do you become a 10x developer, and is the game worth the candle? 
Tags: productivity, programming, discuss, watercooler
Published: 2022-01-26 16:40:18

As the internet tells us, a **10x developer** is someone who's 10 times more productive and efficient than an average member of their team. 
The question is: Can you acquire such a superpower through lots of hard work and years of experience, or does it emerge from a sort of natural talent one is born with?
And most importantly: Do 10x developers even exist? 
What do you think? 🙂
How to install Kubernetes in Rocky Linux using Ansible
Tags: kubernetes, devops, ansible, rockylinux
Published: 2022-01-26 16:32:45

Ansible project for the automated installation of a Kubernetes clúster on-premise (bare-metal) on Linux.

The playbooks has been tested in operating systems of Red Hat family: Centos 7/8, [Rocky Linux 8](https://rockylinux.org/), RHEL 7/8

## Network Diagram of Kubernetes Infraestructure
![network diagram](https://johnruizcampos.com/wp-content/uploads/red_kubernetes_ansible.jpg)

## Ansible project estructure
![arquitectura ansible](https://johnruizcampos.com/wp-content/uploads/proyecto_ansible_kubernetes-1024x391.jpg)

Full Post: [https://johnruizcampos.com/como-instalar-kubernetes-en-linux-con-ansible/](https://johnruizcampos.com/como-instalar-kubernetes-en-linux-con-ansible/)
GitHub Project: [https://github.com/jruizcampos/kubernetes-deploy](https://github.com/jruizcampos/kubernetes-deploy)
Furniture store responsive landing page with HTML CSS
Tags: webdev, beginners, tutorial, todayilearned
Published: 2022-01-26 16:12:52

This is my 2nd website of the "10 responsive websites with HTML CSS" challenge. This challenge is inspired by the [florin pops](https://www.florin-pop.com/) ["10 websites with HTML CSS"](https://www.youtube.com/watch?v=Rz-rey4Q1bw&t=207s) challenge which is currently published on YouTube.

{% youtube 6Az1D22fN6E %}

Furniture – Single page website template HTML CSS Theme is an elegantly designed and versatile Product theme that gives you smartly optimized page layouts and sections so you can easily create a stunning Product store for a multiple product. It incorporates a clean and modern design to give your website a professional look in little to no time.

{% link https://dev.to/atulcodex/headphone-responsive-landing-page-with-html-css-5fi0 %}

#### Features
- HTML5 & CSS3
- No framework
- Responsive Template
- Free icons used
- Pixel Perfect
- Clean & Unique Design
- Easy to customize
- Retina Ready
- Unlimited Colors
- Boxed or Wide layout
- SEO friendly
- Super fast loading speed


{% github https://github.com/atulcodex/furniture %}


[![Headphone - Responsive landing page](https://i.ibb.co/vwN8cgW/live-demo.png)](https://furniture-atulcodex.netlify.app/)

.
.
.
##### Support me and my work to see more such projects
[![Atul - Buy Me A Coffee](https://i.ibb.co/7rR9S4L/buy-me-a-coffee.png)](https://www.buymeacoffee.com/atulcodex)
And We DID IT! || J.A.R.V.I.S Reached 400+ 🌟 and 100+ forks || GauravSingh9356
Tags: python, github, opensource, showdev
Published: 2022-01-26 16:02:26

**Hi All!** 👋
This is a appreciation post to all the open source lovers out there, **J.A.R.V.I.S** has now crossed over **400+ ⭐ and 100+ fork**s on GitHub. I am overwhelmed with this amazing response. 

If you have not checked it please check it out once, I promise this will be one of the amazing beginner project that will take your python skill to **NEXT Level!**. You will understand how cool things you can make with python!

Recently I have added **Optical Text Recognition (OCR)** with it.

<a href="https://github.com/GauravSingh9356/J.A.R.V.I.S">GitHub Link</a>


![JARVIS Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwin0mhnwczyunfmnh11.jpg)

**Again Big THANKS!**
Gaurav Singh