teleren/devto huggingface dataset:
Django on Render
Tags: webdev, javascript, django, beginners
Published: 2023-06-01 13:24:44

To host a Django website on Render, follow these steps:

1). Sign up for an account on Render: Visit the Render website (https://render.com/) and create a new account if you don't have one already.

2). Create a new web service: Once you're logged in, click on the "Create a New Service" button.

3). Configure your service: In the "Configure Your New Service" section, select the following options:
   - Select "Web Service" as the type.
   - Choose a name for your service.
   - Select the deployment region.
   - Choose the appropriate runtime (e.g., Python 3.8).

4). Connect your code repository: In the "Get Code" section, choose the repository where your Django project is hosted (e.g., GitHub, GitLab, Bitbucket). Connect to your repository and select the branch or commit you want to deploy.

5). Set up the build command: In the "Build Command" section, enter the following command:
   ```
   pip install -r requirements.txt
   ```

6). Set up the start command: In the "Start Command" section, enter the following command:
   ```
   gunicorn your_project_name.wsgi
   ```

   Replace `your_project_name` with the actual name of your Django project.

7). Configure environment variables (if necessary): If your Django project requires any environment variables, you can add them in the "Environment" section.

8). Specify the port: In the "Port" section, select the appropriate port (usually 80 for HTTP).

9). Deploy your Django website: Click on the "Create Service" button to start the deployment process. Render will build your Django project, install the dependencies, and start the web server.

10). Monitor deployment status: Once the deployment process starts, you can monitor the progress in the Render dashboard. It may take a few minutes for the deployment to complete.

11). Access your Django website: Once the deployment is successful, you will be provided with a URL where your Django website is hosted. You can access your website using that URL.

<center>_________________</center>

<center>Static Settings</center>
1). Add the following lines of code to settings.py of your project

```
STATICFILES_DIRS = [BASE_DIR / "static"] # new
STATIC_ROOT = BASE_DIR / "staticfiles" # new
```

2). in the `urls.py`, add the following lines of code:
```
from django.contrib.staticfiles.urls import staticfiles_urlpatterns # new
urlpatterns += staticfiles_urlpatterns() # new
```
Some GKE pods are failing with strange error with Google Auth
Tags: kubernetes, googlecloud
Published: 2023-06-01 12:40:26

Recently, I found a strange Pod behavior in Google Kubernetes Engine - GKE

When Rolling-out deployment. Most pods are healthy and up, but some pod error with CrashLoopBack.

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


Digging down to Pod Event, everything good. Except unhealthy. Going more to The log of unhealthy pod. Some hint is showing

```
Error: Could not load the default credentials. Browse to https://cloud.google.com/docs/authentication/getting-started for more information.
    at GoogleAuth.getApplicationDefaultAsync (/usr/src/app/node_modules/google-auth-library/build/src/auth/googleauth.js:183:19)
```
---

We found some [interesting fix](https://github.com/googleapis/google-auth-library-nodejs/issues/1236) by adding Environment variable to pod.

```
DETECT_GCP_RETRIES=3
```

🎉🎉🎉 Now pods are fully up without error.

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

---

Cause of this issue is when rolling deployments, multiple pods made request to GCP for authentication, sometime it timeout without retry then fail.
Typescript: How to use Generics to make your own Type Templates?
Tags: typescript, webdev, beginners, productivity
Published: 2023-06-01 13:20:29


After we talked about types utilities the last post, let's extend and see more advanced usage of generics in typescript and we could build our own type templates that can be reused across your projects:


let's say that we will type a social tweet/post data…


```ts

interface postProps {
  name: string;
  relativeTime: string;
  tweet: string;
  retweets: number;
  likes: number;
  comments: number;
  userImg: string;
  liked: () => void;
  likedUsers: Array<{ name: string; img_src: string; id: number }>;
}

```


we are familiar now w/ interfaces in typescript and to put it in simple quick words, interfaces are type contracts that an entity/object should conform to.

Now..

```ts

type readOnlyProps<T> = {
  readonly [P in keyof T]: T[P];
};

``` 

Here we go.. This is a type template of a `readonly` that converts any type props into readonly mode using the keyword `readonly`:

1. We use `<T>` as our parameter of props.

2. And then we use this syntax `[P in keyof T]` to loop through props keys and re-print them w/ the prepended keyword `readonly`

3. `T[P]` is so obviously bringing in the value of the key for each prop

Now we can use this template, like this:

```ts

type readOnlyPostPorps = readOnlyProps<postProps>;
//readOnlyPostPorps is our new type
//readOnlyProps is our type template/converter we defined b4
//postProps us our original interface

```

### As you see how generics:

1. makes things handy

2. generates from already existing types,

3. prevents us from repeating/re-typing props (reusability)

4. opens possibilities for more complex flows

Now..

Try out the example and play around w/ the template and see what you can come up w/ new:

{% embed https://codesandbox.io/embed/typescript-typing-hacks-w-generics-l6u9o6?fontsize=14&hidenavigation=1&theme=dark %}


till next time.. keep ur type tight.
Open Source Youtube Downloader - Hitomi Downloader
Tags: python, opensource, youtube, downloader
Published: 2023-06-01 13:14:51

There are many youtube downloader programs on the market, but none of them are this easy to use.

Features
🍰 Simple and clear user interface
🚀 Download acceleration
💻 Supports 24 threads in a single task
🚥 Supports speed limit
📜 Supports user scripts
🧲 Supports BitTorrent & Magnet
🎞️ Supports M3U8 & MPD format videos
🌙 Dark mode
🧳 Portable
📋 Clipboard monitor
🗃️ Easy to organize tasks


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

**Download**
<a href="https://github.com/KurtBestor/Hitomi-Downloader">Https://github.com/KurtBestor/Hitomi-Downloader</a>
Python vs. The World: The Language that Tells Computers What to Do
Tags: python, programming, beginners, codenewbie
Published: 2023-06-01 13:14:05

"Speak softly and carry a big stick; you will go far" said Theodore Roosevelt. Well, in the realm of programming languages, Python seems to have taken this advice quite seriously. It's got the charm to enchant developers, the power to automate mundane tasks, and enough modules to make an IKEA employee feel under-equipped. Let's see how Python does it.

**Python, the charmer**

Python is the guy at the party who tells jokes that everyone gets, even if they've never met him before. He makes you feel comfortable and at ease - no cryptic punchlines or complex setups. Python's code is straightforward, easily readable, and generally less prone to causing aneurysms than the syntax of other languages. *It’s the dad joke of coding languages*, simple, yet entertaining enough to bring a smile on your face. 

**Python, the workhorse**

Python is like a hard-working parent who just won't stop doing chores. Whether it's web development, data analysis, AI, or scraping the dark corners of the web, Python's got a module or package for it. You know, Python's kind of like a Swiss Army Knife. Except instead of a knife, a corkscrew, and a weird little pair of scissors, it's got Pandas, NumPy, and BeautifulSoup.

**Python, the showoff**

Python likes to keep up with the Joneses. When Java discovered the joy of object-oriented programming, Python was like, "I can do that." When C decided that procedural programming was cool, Python was like, "Me too." And when JavaScript figured out it could be used outside of a web browser, Python chuckled and said, "Hold my beer."

**Python vs. the world**

But is Python truly a silver bullet? *Well, does a one-legged duck swim in circles?* The answer is no. Python, despite its many charms, is not always the perfect solution. It's slower than a snail on a hot day compared to languages like C or Java. It's also not the best choice for mobile development or low-level system programming. And let's face it, no matter how much we love Python, we wouldn't use it to create the next AAA video game.

**The Conclusion**

In a nutshell, Python is like a really good utility infielder - it may not always hit home runs, but it's super handy to have around and usually gets the job done. So, while it may not replace every other language, it certainly makes a darn good case for being the first one you learn.

So, is Python the language that tells computers what to do? Well, not any more than any other programming language. But it does tell them in a more friendly, straightforward way. And in this high-stakes game of whispering sweet nothings to a hunk of silicon, sometimes that can make all the difference.

Feeling Python-curious now? Time to dive in and let the Python charm you. But beware, as its simplicity might lead you to believe that all programming languages are this welcoming. Just remember, all that glitters is not Perl... er... gold! 

---

*Got a Python joke or pun? Leave it in the comments. We all need a little light-hearted humor to break the monotony of deciphering cryptic code!*
XPaths in the modern age
Tags: vue, xpath, webcomponents, lit
Published: 2023-06-01 13:07:53

XPaths are selectors you can use to query the elements in your document (HTML, XML etc). They are similar but complex and more featureful versions of CSS query selectors many are used to.

This is an example XPath which can find the Google Search button by starting from the search input. It's a roundabout way of doing this but it shows the powers of XPath over normal query selectors which can't do this.

```js
$x(`//textarea/ancestor::form//input[@value="Google Search"]`);
```

---

## XPath with Web components

Since XPath is a pretty old specification ([created in 1999](https://www.w3.org/TR/1999/REC-xpath-19991116/) and last updated in 2016). It doesn't specify how to operate with Web components and shadow DOM.

So if you want to write an XPath which selects an element inside the shadow DOM of a component you simply can't. The only solution is to find the component with the XPath. Then use the `shadowRoot` node to then further drill down into the component. For nested components it quickly becomes impractical.

To be fair this problem with shadow DOM is also present in querySelectors which don't work with it either. Lit has it's [own section](https://lit.dev/docs/components/shadow-dom/) dedicated to using custom `@query` decorators to find elements.

----

## XPath with Vue 3

There is a very specific and peculiar problem that you face when using XPaths with Vue 3, which took me a long time to debug and find out.

Vue 3 when rendering child slots appends what's called "anchor" nodes to help it optimise it's updates. For example if you have a component like this:

```jsx
<Text>
   Hello World!
</Text>
```

And you render it in Vue 3 like this.

```jsx
<span>
    <slot />
<span>
```

What Vue 3 will do is output the following DOM structure

```jsx
<span>
    ""
    "Hello World!"
    ""
</span>
```

Here `""` is an empty text node. This trips up the `contains(text())` API of XPath. So if you were relying on your elements containing a specific text you won't be able to do that anymore.

Here is a Github issue with examples. [vue/core/issues/8444](https://github.com/vuejs/core/issues/8444)

----

## A workaround

To solve both of the problems above, I had to ponyfill XPath in our application.

There was an excellent `xpath` polyfill library which I forked and modified to add support for both Shadow DOM and Vue 3 text nodes.

This makes it "non spec" but it solves our needs and doesn't impact our development velocity.

It's published here [xpath-next](https://github.com/NikhilVerma/xpath-next)

```js
import { parse } from 'xpath-next';

const expression = "//span";
const contextNode = document.body;

const nodes = parse(expression).select({ node: contextNode, isHtml: true });
```

---

My key takeaway from this experience is reliable technologies stop being so because the ecosystem moves on and makes them incompatible.

One could argue that Vue 3 behaviour should be fixed. But the fact that Web components don't work transparently with XPaths makes it hard to justify using it in it's original specification.
Flowbite Guide - Frontend Development
Tags: javascript, beginners, tutorial, programming
Published: 2023-06-01 13:06:36

Who am I:
I am Ganesh Patil (Developer + Educator). Tech enthusiast and sharing the best of my knowledge by creating content. Love to document journey ♥ Let’s connect and grow together!

📌 Flowbite - https://flowbite.com/
📌 Flowbite Discord - https://discord.com/invite/4eeurUVvTy
📌 Flowbite Github - https://github.com/themesberg/flowbite

Timestamps 🕥

00:00 - Intro
00:42 - Flowbite Documentations
1:05 - Flowbite Components
2:30 - Flowbite Progressbar Example
3:31 - Flowbite Pro Version
4:04 - Flowbite Supported Languages/Frameworks
5:26 - How to add Flowbite to the website
7:15 - Thanks for Watching

____________________________
▶ Connect with me
1. Gmail - ganeshpatil.work@gmail.com
2. Twitter - https://twitter.com/ganeshstwt
3. Linkedin - https://www.linkedin.com/in/ganeshpat...
4. GitHub - https://github.com/ganeshpatil386386

_____________________________
- Become Full Stack Developer @Codedamn🎯
https://codedamn.com/referred-by/ganeshpatil1010
DOCKER - Criando um docker compose utilizando a imagem oficial do Wordpress.
Tags: wordpress, devops, docker
Published: 2023-06-01 13:05:58

Criar um docker compose utilizando a imagem oficial do Wordpress. Mas antes vamos saber a definição.

O WordPress é um “Sistema de gerenciamento de conteúdo” de código aberto e livre com o objetivo de facilitar a criação de sites e blogs, sem a necessidade de ter um conhecimento prévio em programação.

O código do WordPress utiliza o PHP como linguagem back-end, e MySQL (ou MariaDB), como gerenciador do banco de dados.WordPress é uma ferramenta de blog gratuita e de código aberto e um sistema de gerenciamento de conteúdo (CMS) baseado em PHP e MySQL, utilizei o MariaDB como gerenciador executado em um serviço de hospedagem na web. O WordPress é o sistema de blogging mais popular em uso na Web, com mais de 60 milhões de sites.

Links:🌐

https://br.wordpress.org/

https://hub.docker.com/_/wordpress

<h1>Docker compose.</h1>

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

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

<h1>O código está versionado no meu github.</h1>
https://github.com/andreelidio/desafio-profissional-docker/tree/main/Questao%2005

<h1>Container.</h1>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hlp6ex40p44wfg9qve9.png)
<h1>Instalação e acesso ao WordPress.</h1>

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

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

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

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

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

Espero que você tenha gostado deste post e tenha aprendido algo novo🆙
Qualquer feedback será bem-vindo, é só deixar nos comentários.😀
Curta, compartilhe, siga-me em:
✅ https://linktr.ee/andreelidio
Fundamentals Concepts of Web Development
Tags: webdev, javascript, beginners, programming
Published: 2023-06-01 13:03:41

These concepts are fundamental and should be known if you want to enter the field of web development.

1) Web: a collection of interconnected resources and documents It means all the public websites or pages that users can access on their local computers and other devices through the internet.

2) Development: It means creation—websites (static, read-only) and web applications (dynamic, user-interactive) are developed.

3)Three layers of Web applications are -> (i) the Front end ( HTML,CSS , JavaScript), (ii) the Back end - logic and working of web application [ Brain ], (iii) the database layer - where all the data is managed of the web application  
 
4) A popular full stack is the MERN stack: It stands for MongoDB, Express JS, React JS, and Node JS.

5) Network: It is the connection of a computer system for the sharing of data and resources through a medium. Interconnection of different resources (computer, printers, laptop) within a single system.

6) Internet: It is a global system that exists billions of devices interconnected with each other (network of networks) or (Global Network) 

7) IP Address: Address for identifying each device uniquely.

8) Browser: It is a tool to access documents, websites, and web applications available on World Wide Web or simply Web
Ex. (Chrome(Google), Safari(Apple), Firefox, Opera)

9) Browser Engine: It is an application that is used to access resources [websites, web applications]. 
Ex. (Chrome(V8 JS Engine), Firefox(Quantum)

10) Client: Who asks for resources (for example, Get, Put, Put, Delete) 
Ex. Laptop, PC, App

11) Server: Who full-fill requests of clients for resources
Ex. App, Web, DB, File

12) DNS [Domain Name System] : It converts a domain name into an IP address or is used to map a domain name to the IP address of a web server. A domain name system (DNS) turns domain names into IP addresses, which allow browsers to get to websites and other internet resources. Every device on the internet has an IP address, which other devices can use to locate the device.


![Notes of Fundamentals of Web Development Note 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9fw3nl9z7ej99tqf7e8.png)
![Notes of Fundamentals of Web Development Note 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn7olu8vjghxvvi031g7.png)
![Notes of Fundamentals of Web Development Note 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhllwqnw5deciegobobd.png)
DOCKER - Criando o banco de dados Redis e a ferramenta de interface Redis Commander usando docker compose.
Published: 2023-06-01 12:57:34

Criar o banco de dados Redis e a ferramenta de interface Redis Commander usando docker compose, mas antes vamos saber a definição de cada um.

Redis é um armazenamento de chave-valor de código aberto que funciona como um servidor de estrutura de dados.

O Redis Commander é uma interface gráfica de usuário (GUI) para o Redis, um banco de dados em memória usado para armazenamento de chave-valor. O Redis Commander fornece uma maneira conveniente de visualizar, gerenciar e interagir com as chaves e valores armazenados no Redis.

Links:🌐

https://redis.io/

https://hub.docker.com/r/rediscommander/redis-commander

<h1>Docker compose.</h1>

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

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

<h1>O código está versionado no meu github.</h1>
https://github.com/andreelidio/desafio-profissional-docker/tree/main/Questao%2004

<h1>Container.</h1>

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

<h1>Console do redis-commander.</h1>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6nrh8m34qjiz5eqo0a70.png)

Espero que você tenha gostado deste post e tenha aprendido algo novo🆙
Qualquer feedback será bem-vindo, é só deixar nos comentários.😀
Curta, compartilhe, siga-me em:
✅ https://linktr.ee/andreelidio
DOCKER - Criando o banco de dados PostgreSQL e a ferramenta de interface pgAdmin usando o docker compose.
Published: 2023-06-01 12:51:32

Criar o banco de dados PostgreSQL e a ferramenta de interface pgAdmin usando o docker compose, mas antes vamos entender o conceito de cada um.

O PostgreSQL é um poderoso sistema de banco de dados objeto-relacional de código aberto com mais de 35 anos de desenvolvimento ativo que lhe rendeu uma forte reputação de confiabilidade, robustez de recursos e desempenho.

O pgAdmin é a plataforma de desenvolvimento e administração de código aberto mais popular e rica em recursos para PostgreSQL, o banco de dados de código aberto mais avançado do mundo.

Links:🌐

https://www.postgresql.org/

https://www.pgadmin.org.

<h1>Docker compose.</h1>

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

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

<h1>O código está versionado no meu github.</h1>
https://github.com/andreelidio/desafio-profissional-docker/tree/main/Questao%2003


<h1>Container.</h1>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvtioxfveammiwcpswrb.png)

<h1>Acessando a console do pgadmin.</h1>

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

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




Espero que você tenha gostado deste post e tenha aprendido algo novo🆙
Qualquer feedback será bem-vindo, é só deixar nos comentários.😀
Curta, compartilhe, siga-me em:
✅ https://linktr.ee/andreelidio
DOCKER - Criando um docker compose com o banco de dados MariaDB e a ferramenta de interface phpMyAdmin
Tags: dockercompose, mongodb
Published: 2023-06-01 12:47:14

Crie um docker compose com o banco de dados MariaDB e a ferramenta de interface phpMyAdmin, mas antes vamos saber a definição de cada um.
MariaDB Server é um dos servidores de banco de dados mais populares do mundo. É feito pelos desenvolvedores originais do MySQL e com garantia de código aberto.

PhpMyAdmin é uma ferramenta de software livre escrita em PHP , destinada a lidar com a administração do MySQL na Web. O phpMyAdmin suporta uma ampla gama de operações em MySQL e MariaDB.

Links:🌐

https://hub.docker.com/_/mariadb

https://docs.phpmyadmin.net/pt_BR/latest/

https://www.phpmyadmin.net

<h1>Docker Compose.</h1>

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

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

<h1>O código está versionado no meu github.</h1>
https://github.com/andreelidio/desafio-profissional-docker/tree/main/Questao%2002

<h1>Container</h1>

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

<h1>Acessando o phpMyAdmin.</h1>

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

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

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

Espero que você tenha gostado deste post e tenha aprendido algo novo🆙
Qualquer feedback será bem-vindo, é só deixar nos comentários.😀
Curta, compartilhe, siga-me em:
✅ https://linktr.ee/andreelidio