teleren/devto huggingface dataset:
Tutorial practico de Python en español
Published: 2022-08-20 02:14:00

## Recibe la inicializacion


1. Descarga e instala Python: Download Python from the official Python web site: https://python.org

2. Inicializate en Python:  print("Aloha, World!")


Python es uno de los mas populares lenguajes de programación hoy en dia, creado por  Guido van Rossum, en 1991.

## Es usado para

web development (en el lado del servidor),
desarrollo de software
matemáticas,
scripts para el sistema.

## Que puede hacer Python?
Python se puede utilizar en un servidor para crear aplicaciones web.
Python se puede utilizar junto con el software para crear flujos de trabajo.
Python puede conectarse a sistemas de bases de datos. También puede leer y modificar archivos.
Python se puede utilizar para manejar big data y realizar matemáticas complejas.
Python se puede utilizar para la creación rápida de prototipos o para el desarrollo de software listo para la producción.


## Por que Python?

Python funciona en diferentes plataformas (Windows, Mac, Linux, Raspberry Pi, etc)..
Python tiene una sintaxis simple similar al idioma inglés.
Python tiene una sintaxis que permite a los desarrolladores escribir programas con menos líneas que otros lenguajes de programación.
Python se ejecuta en un sistema intérprete, lo que significa que el código se puede ejecutar tan pronto como se escribe. Esto significa que la creación de prototipos puede ser muy rápida.
Python se puede tratar de una manera procedimental, una forma orientada a objetos o una forma funcional.



La versión principal más reciente de Python es Python 3, que usaremos en este tutorial. Sin embargo, Python 2, aunque no se actualiza con nada más que actualizaciones de seguridad, sigue siendo bastante popular.

En este tutorial, Python se escribirá en vscode, es tan simple o complejo como lo adaptemos. 


## Sintaxis de Python en comparación con otros lenguajes de programación

Python fue diseñado para la legibilidad, y tiene algunas similitudes con el idioma inglés con influencia de las matemáticas.


Python usa nuevas líneas para completar un comando, a diferencia de otros lenguajes de programación que a menudo usan punto y coma o paréntesis.
Python se basa en la sangría, utilizando espacios en blanco, para definir el alcance; como el alcance de bucles, funciones y clases. Otros lenguajes de programación a menudo usan corchetes rizados para este propósito.
Ejemplo

## El ritual de inicialización

Dos formas, con la linea de comandos interactiva o

Creando un archivo .Py y correrlo con python.exe
How to automatically inject tokens in postman calls without copy pasting it in every request call ??
Tags: postman, api, apicall
Published: 2022-08-20 01:41:12

One of the annoying task while making postman calls , is to generate the access token and then copying it and pasting it in every request call. I have shared in my blog steps to store the token in a variable and use the token instead of copying the token every time

Please check - [https://belowthemalt.com/2022/08/19/how-to-automatically-inject-tokens-in-postman-calls-without-copy-pasting-it-in-every-request-call/](https://belowthemalt.com/2022/08/19/how-to-automatically-inject-tokens-in-postman-calls-without-copy-pasting-it-in-every-request-call)/
Node Vs Element, know the difference
Tags: javascript, programming, tutorial, webdev
Published: 2022-08-20 01:32:00

If you've always wondered but never took the time to learn it, the time is now. 

First start here, Steve Griffith does a great job explaining the difference between a Node vs an Element.

[Steve Griffith: Nodes Verses Elements in the DOM](https://www.youtube.com/watch?v=y3itGTCseAk)

Then for knowing how to traverse the two and understanding the subtle differences, head over to DigitalOcean.

DigitalOcean has a great tutorial that will do a much better job explaining it in detail than I could. 

[DigitalOcean how to traverse the dom](https://www.digitalocean.com/community/tutorials/how-to-traverse-the-dom)

If you prefer to just read the quick answer, then head here. https://stackoverflow.com/a/9979779/3247016

Let me know if this was helpful.

- DeChamp
- [DeChamp.dev](https://dechamp.dev)
Chat App with WebSocket: Message to Server
Tags: javascript, webdev, react, node
Published: 2022-08-20 01:29:00

{% embed https://dev.to/sokhavuth/table-of-contents-3m2h %}
GitHub: [https://github.com/Sokhavuth/chat](https://github.com/Sokhavuth/chat)
Heroku: [https://khmerweb-chat.herokuapp.com/](https://khmerweb-chat.herokuapp.com/)
<br/>

<p>After a connection was established between socket server and socket client, the latter can send messages to socket server anytime by using emit( ) method with “chat message” event and message object as arguments.</p>

<p>To receive message object from client, socket server need to define an event handler on “chat message” event.</p>

```html
<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <title>Khmer Web Chat</title>
    <link rel="stylesheet" href="/base.css" />
    <link rel="stylesheet" href="/chat.css" />
    <link href="/fonts/setup.css" rel="stylesheet" />
    <link href="/logo.png" rel="icon" />
  </head>
  <body>
    <section class="Chat region">
        <div class="main">
            <div class="title">
                <input type="button" value="Leave chat" />
            </div>
            <div class="outer">
                <div id="messages">Chat messages</div>
                <form action="" onSubmit="submitHandler(event)">
                    <input type="text" id="chat-name" 
                    required placeholder="Chat name" />
                    <input id="input" autocomplete="off" required 
                    placeholder="Type your message here" />
                    <input type="submit" value="Send" />
                </form>
            </div>
        </div>
        <div class="sidebar">
            <div class="title">All people</div>
            <div class="content">Users</div>
        </div>
    </section>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        let socket = io();

        function submitHandler(e){
            e.preventDefault();
            const chatName = document.getElementById('chat-name');
            const input = document.getElementById('input');
            const obj = {
                chatName: chatName.value, 
                message: input.value,
            };

            if (input.value) {
                socket.emit('chat message', obj);
                input.value = '';
            }
        }
    </script>
  </body>
</html>
```

```js
// index.js
// npm install express
// npm install socket.io
// npm install nodemon

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const path = require('path');
const { Server } = require("socket.io");
const io = new Server(server);


const port = process.env.PORT || 3000;
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.sendFile(`${__dirname}/index.html`);
});

io.on('connection', (socket) => {
    console.log('a user connected');
    socket.on('chat message', (obj) => {
        console.log(`message: ${JSON.stringify(obj)}`);
    });
});

server.listen(port, () => {
    console.log(`listening on *${port}`);
});
```
I Built Bitly Clone with Redis, Express Svelte and Node ( RESN)
Tags: redishackathon, javascript, svelte, webdev
Published: 2022-08-20 01:13:31

### Overview of My Submission

I always wanted to build my own URL shortener that could give metrics like how many times the URL was visited. I had always been busy to try, but redis hackathon felt like perfect opportunity for me to work on this. So I decide to use this opportunity to build myself a URL shortener. I built it using redis as primary database where it uses Redis JSON to store URL details and RedisTimeSeries to store usage metrics.

The project has two parts a server, provides REST API and is built using ExpressJS. The server is also responsible to interface with Redis. I'm using official Javascript redis package and Redis OM for Node.js to interface with redis database to save and retrieve data.

And, another is the client, that is build with Sveltekit. It provides web UI where users can create short URLs and view the metrics in beautiful looking charts.

You can view the live demo of client at [https://urlui.vercel.app](https://urlui.vercel.app)

### Submission Category:

MEAN/MERN Maverics

### Video

{% embed https://www.youtube.com/watch?v=lssFG92i9hA %}

### Language

JS/TS/Node.js


### Link to Code

{% embed https://github.com/lohanidamodar/redis-hack-urlshortner %}


### Additional Resources / Info

![Architecture Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9z159kfbwdv06bqp7d2o.png)


| ![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dt2wr5ufuse1zvwmvjk.png) |
|----|
| Home Page |

| ![Create new](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sj33yjz63jzqngbfwvwp.png) |
|----|
| Create new Short URL |

| ![URL History](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4jg8gz7g3yh52j967k6.png) |
|-----|
| History |

| ![QR Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1i7lzt2ilmv3j7z9m5w1.png) |
|----|
| QR Code |

| ![Metrics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmdghh6x81zb6tzm0jdj.png) |
|----|
| Hourly and Daily Metrics using RedisTimeSeries |


- - - 

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
Empire of Sight blockchain MMORPG Game trailer!
Tags: blockchain, mmorpg, gamedev, erc
Published: 2022-08-20 00:45:02

It’s finally time to share the trailer!

EOS the worlds first MMORPG built on multichain technology, collect NFTs, level up, join a guild, craft, and adventure. No mint to earn just good old fashioned gaming brought to Web3.

Hope you guys enjoy and follow for some more content to come ^.^

https://youtu.be/STs-EEqMcg4

Twitter: https://twitter.com/EmpireOfSight

Discord : https://t.co/AHSELD7UeB

Website : https://www.empireofsight.com/

This will be the worlds first MMORPG built on blockchain technology and its been nearly 8 months in the making between me and a friend who’s a backend developer. We’ve been grinding away at it with ERC-1150 using ETH/Ethereum, Matic/Polygon , BNB/Binance networks to get this all situated.

Feel free to check out the website, twitter, and the discord! Would love to see some new faces around to chat with and get feedback!

EOS
Day 132: The Coursera course
Published: 2022-08-19 22:42:00

Hi!
Today was just another day at the office with usual project working where I set up an Express Project with Typescript and I was working through setting up a testing environment with Jasmine and I think I will be publishing a guide article about it maybe by this weekend
One of the exciting thing is that I started a google UX course on Coursera for the past weeks I have been learning UI and UX but I haven't been following any official course but I landed to Google UX course and I deciided to give it shot and little by little I will try to advance with it and improve my UI and UX skills 

Tomorrow I will be focusing on some of the work unfinished tasks I expect it to be a busy one since I have been lazy on the work tasks for several weeks now so I hope I will make some progress tomorrow

see you there 

Signing off...
Introducing Pic Placeholder
Tags: redishackathon, redis, javascript, nextjs
Published: 2022-08-20 00:03:46

## 📝Introduction

So I saw this hackathon for a while and wanted to participate, mainly because I needed an excuse to get started with reddis, the issue now was what to build.

I spent some time trying to figure that out but nothing came to mind...until sometime this week I was helping a friend with a project where he needed to get placeholder images for a real estate app.

In doing that, I realised that my goto site [lorem picsum](https://picsum.photos/) didn't have a way to sort images by categories...and thus pic placeholder was born.

![demo gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isb89fjpiy2o4mixxvj2.gif)
 
The idea was to build a service that primarily allows the fetching of easy-to-use and stylish placeholders 😉 while allowing some filtering for specific use cases. Currently, a simple UI exists, here's a link: https://picc.vercel.app/

## 💭 What's next??
In the subsequent post(s), I'll go over the building of the API and submission of the project. Stay tuned for more 👍
Chat App with WebSocket: Socket Connection
Tags: javascript, webdev, node, css
Published: 2022-08-20 00:01:00

{% embed https://dev.to/sokhavuth/table-of-contents-3m2h %}
GitHub: [https://github.com/Sokhavuth/chat](https://github.com/Sokhavuth/chat)
Heroku: [https://khmerweb-chat.herokuapp.com/](https://khmerweb-chat.herokuapp.com/)
<br/>

<p>The functioning of chat application is that all sockets need to be connected - one socket is on the server, other sockets is on the client-side or on the browser. Those sockets will be connected with each other when the application starts to run.</p>

<p>When socket on the server is connected with which on the client, an event called “connection” is fired. If an event handler for this event has been created, it will be called, and the client-side socket object will be passed as an argument to the handler.</p>

```js
// index.js
// npm install express
// npm install socket.io
// npm install nodemon

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const path = require('path');
const { Server } = require("socket.io");
const io = new Server(server);


const port = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
    console.log('a user connected');
});

server.listen(port, () => {
  console.log(`listening on *${port}`);
});
```

```html
<!--index.html-->

<!DOCTYPE html>
<html>
  <head>
    <title>Khmer Web Chat</title>
    <link rel="stylesheet" href="/base.css" />
    <link rel="stylesheet" href="/chat.css" />
    <link href="/fonts/setup.css" rel="stylesheet" />
    <link href="/logo.png" rel="icon" />
  </head>
  <body>
    <section class="Chat region">
        <div class="main">
            <div class="title">
                <input type="button" value="Leave chat" />
            </div>
            <div class="outer">
                <div id="messages">Chat messages</div>
                <form id="form" action="" onSubmit="">
                    <input type="text" required placeholder="Chat name" />
                    <input id="input" autocomplete="off" required 
                    placeholder="Type your message here" />
                    <input type="submit" value="Send" />
                </form>
            </div>
        </div>
        <div class="sidebar">
            <div class="title">All people</div>
            <div class="content">Users</div>
        </div>
    </section>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        let socket = io();
    </script>
  </body>
</html>
```
Chrome插件开发 - 新标签
Published: 2023-08-13 13:32:20

---
title: Chrome插件开发 - 新标签
published: true
date: 2022-08-20 00:00:00 UTC
tags: 
canonical_url: https://manon.icu/blog/translate/build-chrome-extensions/new-tab
---

在上一篇文章[【First Theme】](https://manon.icu/blog/translate/build-chrome-extensions/first-theme)学习了创建第一个主题。

这篇文章学习创建一个新标签插件，类似如图：

![F2yKhw](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/F2yKhw.jpg)

## 结构

```bash
mkdir new-tab-extension && cd new-tab-extension
```

将以下内容吸入`manifest.json`，这是任何浏览器扩展的主入口。

```json
{
  "manifest_version": 3,
  "version": "1.0",
  "name": "New Tab Extension",
  "description": "A demo first new tab experience",
  "action": {
    "default_icon": "icons/icon-48.png"
  },
  "icons": {
    "48": "icons/icon-48.png"
  },
  "chrome_url_overrides": {
    "newtab": "new-tab.html"
  }
}
```

新标签扩展插件的核心在于`chrome_url_overrides`，它告诉浏览器使用哪个页面打开新标签。

创建`new-tab.html`

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>DDT New Tab</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
  </head>
  <body>
    <h1>Hello world 👋</h1>
  </body>
</html>
```

```css
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html,
body {
  height: 100%;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: grid;
  place-items: center;
  background-color: rgb(238 242 255);
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
h1 {
  font-size: 10vmin;
  color: rgb(218 0 96);
}
```

## 测试插件

![F2yKhw](https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/F2yKhw.jpg)
How to read copied text from Clipboard using JavaScript?
Tags: javascript
Published: 2022-08-19 23:43:55

---
  title: How to read copied text from Clipboard using  JavaScript?
  published: true
  tags: JavaScript
  date: Sat Aug 20 2022 05:13:55 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/read-copied-text-from-clipboard-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-b661f94405f136580bd71536f64d5ca8.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/read-copied-text-from-clipboard-javascript)
  
To read a copied text from a clipboard in JavaScript, you can use the `readText()` method in the `navigator.clipboard` object.

```javascript
// copy the text from clipboard
navigator.clipboard.readText().then((copiedText) => {
  console.log(copiedText); // copied text will be shown here.
});
```

- The `readText()` method returns a [`Promise`](https://melvingeorge.me/blog/promises-javascript).

## Example on reading copied text

For example, suppose we want to display the copied text in the `paragraph` tag when we press a button.

Let's see how it's done.

First, let's create an empty `paragraph` tag and a `button` element.

```html
<!-- Paragraph tag -->
<p id="textSpace"></p>
<!-- Button -->
<button id="btn">Click here to show the copied text in the paragraph</button>
```

Now let's use JavaScript to listen for the `click` event in the `button` element and display the text in the `paragraph` tag.

```javascript
// get reference to paragraph
const paragraph = document.getElementById("textSpace");

// get reference to the button
const button = document.getElementById("btn");

// add click event handler to the button
// so that after clicking the button
// the copied text will be displayed in the paragraph tag
button.addEventListener("click", () => {
  // copy the text from clipboard
  navigator.clipboard.readText().then((copiedText) => {
    paragraph.innerText = copiedText;
  });
});
```

### Feel free to share if you found this useful 😃.

---
Git bash for Windows : cwd
Tags: webdev, programming, node, regex
Published: 2022-08-19 23:38:00

Print current working directory (hereinafter in – cwd) in Unix fashion :

```diff
pwd # C:\Users\<user-name>
```

Print current working directory in Windows fashion :

```diff
cmd //c cd # e.g. /c/Users/<user-name>
```

---

We could even write a small Node.js utility that checks type of OS & depending on the OS print its corresponding CWD :

<--- WILL INCLUDE THE CODE BASE LATER [LIVE:DRAFT so STAY TUNED] ---->
Lazy Day, Blockers, Bleh - Day (3&4) of Coding
Tags: 100daysofcode
Published: 2022-08-19 23:09:00

### Yesterday 
I'm feeling pretty under the weather today (right only on day 3 lol), so thought I'd relax and take things a little easy today.

Done!
* played around with the styling more
* went through more svelte tutorials

### Today
I felt reinvigorated (if not a bit guilty) starting fresh, with lots of new features to work on.

One of my main goals today was to implement context menus to make certain actions more available. The plan is to put "edit", "delete", and "create" button into these. Sadly, the solution was not as easy as a prepackaged library, and I'm still facing some blockers.

I wanted to do this as simply as possible, so I'm just doing:

```
<div on:contextmenu={setPosition}
 Aida
</div>

<div class="context-menu" style="top: pos.x; left: pos.y">
  <button>Edit</button>
</div
```

This succeeds in making the context menu come up, but has an issue. The context menu needs to close whenever another one opens so the logic can't be contained in just one Friend component. This means I'll need to lift up the context menu state to track which one is open. It will also be a challenge if they select a place from the page outside or regular click somewhere else.

Also because I was planning on having clicking on a empty space be the "Create" context menu, I'll need to have two different context menu trackers going. 

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

For now, I'm happy with my basic buggy lil context menu, but will work on it this next week.
Javascript Tagalog - String padEnd Method
Tags: javascript, tagalog, philippines, padend
Published: 2022-08-19 23:08:53

**Ano ngaba ang String padEnd method sa Javascript?**
Actually etong method nato maiintindihan mo agad pag tinignan mo yung picture sa baba. Basically mag a-add lang siya ng string padding sa end ng string mo

**Pano gamitin:**
**First Argument** - yung target na string length mo para mabigyan ng padding
**Second Argument** - kung ano yung string na gagamitin as a padding

![Javascript padEnd padStart Tagalog Philippines Pinoy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qzs35aaoe13kjaqoi8s.png)

![Javascript padEnd padStart Tagalog Philippines Pinoy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuul1hl1sd0k9l253t4u.png)

Return Value is yung bagong string na may padding.

---
**More tagalog Javascript Learning Resources:**
https://javascript-methods-in-tagalog.vercel.app/