teleren/devto huggingface dataset:
Axile
Published: 2023-09-09 19:04:31

---
title: Axile
published: true
date: 2023-06-04 17:45:16 UTC
tags: 
canonical_url: https://themes.gohugo.io/themes/axile-hugo/
---

Axile Hugo Theme Simple modern Hugo theme. Demo site Usage config.toml with all settings baseURL = "https://axile.netlify.app/" languageCode = "en-us" title = "My New Hugo Site" theme = "axile" [params] icon = "https://github.com/Axorax/css-button-maker/blob/main/assets/img/axorax.png?raw=true" [params.navbar] patreon = "https://patreon.com/axorax" [params.navbarButton] Donate = "https://patreon.com/axorax" Front matter with all options --- title: "Article example" date: 2023-05-24T18:57:41+06:00 author: "axorax" thumbnail: "image-url(https://site.com/image.png)" alt: "nature image" tags: ["example"] --- Support me on Patreon — Check out my socials
Scaling Diagram Documentation
Tags: documentation, diagram, excalidraw, mermaid
Published: 2023-06-04 17:34:35

At Woovi we are adding more and more documentation for all domains of product. 
We have documentation for very specific implementation of the codebase to the higher level, to the high level of architecture and data modelling.
We are using different types of diagrams to describe some aspect of a domain, like state machines, sequence diagrams and flowchart.

## Unstructured diagram workflow

Each developer start adding their diagrams using their favorite tool, like [excalidraw](https://excalidraw.com/), [mermaid](https://mermaid.js.org/) or even [Figma](https://www.figma.com/).
It is great to have flexibility to build any diagram you want, but this flexibility is also hard to scale.

## Problems with image-based diagram tools

Excalidraw and Figma provides a lot of flexibility to create your diagrams.
The workflow to add an excalidraw/figma diagram to our documentation is:
- Create the diagram using excalidraw/figma
- export an image of the diagram
- add the image to the documentation

The problem with this approach is that we can't ensure consistency across diagrams, it is like if every developer writes their own CSS.
Another drawback of this approach is that it is not easy to edit the diagram. If you don't have the excalidraw/figma source, you would need to recreate the whole diagram by hand.
Also, you can't search on text inside diagrams, as they are images.

## Text-based diagram tool

To solve all these problems, we investigate some text-based diagrams, and the one that fits better in our workflow is [mermaid](https://mermaid.js.org/).
Mermaid renders Markdown-inspired text definitions to create and modify diagrams dynamically.
All our documentation is already in Markdown, so writing a diagram in mermaid is easy to learn.
Mermaid render on GitHub issues, so we can easily move diagrams from issues to our documentation.
Mermaid provides a [Live Editor](https://mermaid.live/)
You can easily copy, paste, edit and search diagrams.
We also solve the consistency problem, and we avoid recreating existing diagrams types.
It also works with ChatGPT and Show Me plugin.

## In Conclusion

We still use Excalidraw and other image based diagrams for drafts and discussions, but when everything is decided, we move them to text-based mermaid to add to documentation.
As we grow, we are adding just a bit more of structure to make sure we enable can scale without moving slow.

---
Thanks to [Eduardo](https://twitter.com/edumaciel10_) from Woovi that come up with this proposal.

---
Woovi
[Woovi](https://www.woovi.com) is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are [hiring](https://woovi.com/jobs/)!

---
Photo by <a href="https://unsplash.com/@nseylubangi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Nsey Benajah</a> on <a href="https://unsplash.com/photos/WaWV3DVqTA0?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Participating in Striver's SDE Sheet Challenge
Tags: striverssheetchallenge, algorithms, tutorial, interview
Published: 2023-06-04 17:05:06

Alright then, Welcome Back Everyone!

As my placements' are nearing, I am starting [ Striver's SDE Sheet Challenge.
](https://takeuforward.org/interviews/strivers-sde-sheet-challenge-2023/)

I'm thrilled to share that I'm taking on the demanding challenge of tackling around 180 data structures and algorithms questions. Although it won't be easy, I'm determined to succeed and grasp as much knowledge as possible throughout this journey.

My strategy for this challenge is to produce a blog post for every question I solve. These blog posts will serve as a tool to chronicle my progress and share my approach with others experiencing similar obstacles.

By breaking down each question and outlining my thought process, I'll cement my comprehension of the material and assist others who may be grappling with the same concepts.

I'm eager to observe where this challenge takes me, and my blog posts will be a valuable resource for those interested in expanding their knowledge of data structures and algorithms.

Stay tuned for updates on my progress and my first blog post!
Inicializando um projeto Ruby on Rails usando PostgreSql rodando em um container Docker
Tags: ruby, postgres, docker, rails
Published: 2023-06-04 17:01:48

primeiramente inicializamos o projeto
``` shell
$ rails new project_name --database=postgresql
```

em seguida configuramos o docker-compose.yml

``` yaml
version: '3.8'
services:
  database:
    container_name: project_name
    image: postgres
    restart: always
    environment:
      POSTGRES_USER: root
      POSTGRES_PASSWORD: root
      POSTGRES_DB: project_name_development
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
    ports:
      - '5432:5432'

  adminer:
    container_name: adminer
    image: adminer
    restart: always
    ports:
      - "8080:8080"

```

ps: Eu particularmente gosto de usar o adminer para visualizar as tabelas do banco, então essa imagem é opcional, para acessar ele basta entrar no endereço: localhost:8080, e colocar as credenciais: 
sistem: PostgreSql
host: database
user: root
password: root

Em seguida configuramos o arquivo de configuração do banco de dados para o ambiente de desenvolvimento
``` yaml
# config/database.yml
development:
  <<: *default
  host: localhost
  database: project_name_development
  username: root
  password: root
  port: 5432

```

Para testarmos basta criarmos um novo modal e uma migration

``` shell
$ rails g model User email: string

$ rails db:migrate
```
robots.txt
Tags: seo, webdev, react, webscraping
Published: 2023-06-04 16:51:49

**robots.txt** As a beginner in react , we all must have come across this robots.txt file when we create our react application. Most of us never bothered to know what it was and delete it , thinking it as a unnecessary file in our react app . Yaa I've also done it 😂 😂.


Now lets know what it is . 
**Robots.txt file is a file located on your server that tells web crawlers which pages they can and cannot access. ** 

The pages we blocked , when the web crawler crawls in it , we get soft 404 as error[](https://prerender.io/blog/soft-404/).

The two action we can do is 

1. Allow: /
2. Disallow: /

we can allow and disallow the pages to access.  
Adding robots.txt file in your application , positively increases your app's SEO Performance . So Know the stuff and increase your apps SEO Performance right away with robots.txt . ☮️
Unbug, The Free GPT-Powered Bug Finder for Your GitHub (MIT)
Tags: chatgpt, programming, github
Published: 2023-06-04 15:44:55

Today I'm releasing my personal CI bug finder GitHub application - called Unbug.

https://github.com/agamm/unbug

It uses openAI's GPT 3.5 to find bugs when you push code in your PRs.

You can install it for free on render (it's just an express application), then create a Github application and install it on any repo you want checked.

Unbug still needs some fine tuning and fixes, but it does work! - You're welcome to contribute to help make it even better :)

Here is the video showcase:
{% embed https://youtu.be/_rXUU6fTUcA %}
Joining a Bootcamp
Tags: webdev, beginners, career, learning
Published: 2023-06-04 15:33:09

## UT Coding Bootcamp

Tomorrow, I start the UT coding bootcamp to accelerate my learning for Web Development. I have been on my coding journey for about a year and a half so far. I've started and joined a few free bootcamps and other free online learning tracks. I've learned along the way that I'm not the best at self teaching myself and I need some form of live instruction/tutoring to keep me on track. To say I'm excited to start this new venture is an understatement. I've completed the prework and built a simple study guide this week with HTML, CSS, and JavaScript. Check it out here: [Study Guide](https://github.com/Kiararj/prework-study-guide).
The prework included learning soft-skills like developing a web developer mindset, how to debug, joining the web developer community, and commenting in your code. I'm excited to see what's in store for me for the next 6 months and what I will accomplish.
How to Start a Career in Technology!?
Tags: beginners, career, discuss, learning
Published: 2023-06-04 15:25:30

Hi,

This is a Medium post where we are going to look at some ways to really make it possible to get a first job or internship in the technology field.

To know more:

https://jlgjosue.medium.com/how-to-start-a-career-in-technology-70f7f2007e14

Thanks for reading; share this post! :)
All About IOptions Pattern in .NET.
Tags: softwareengineering, coding, dotnetcore, codenewbie
Published: 2023-06-04 15:24:00

In this series we will talk about **IOptions Pattern** in detail. how can we use it our application to configure strongly typed settings. the series will consist of three articles.

-  In the first one will talk about what is **IOptions Pattern** 
 and different types of it.
- In the Second article we will learn about **Validation** in **IOptions Pattern** 
- In the Third article we will talk about **Named and Typed IOptions** and different use cases of the them.

You can read about first article here [link](https://dev.to/ahmedshahjr/introduction-to-ioptions-pattern-in-net-8-58l4)

**References**
IOptions Patten Microsoft Documentation [Link](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/configuration/options?view=aspnetcore-6.0)
I lack a built-in method
Tags: javascript
Published: 2023-06-04 14:43:25

JS contains a filter method that returns an array of search items. I would very much like to have a similar method that returns an array of indices of suitable elements. I know the findIndex method, but it only returns the first suitable index, while it would be nice to get all the necessary indices in one row. 
This post is published as my personal wish.
JavaScript - Array with() method
Tags: javascript, kristiyanvelkov, webdev, react
Published: 2023-06-04 14:36:44

Well, forget about the old and ugly way to update the value of some array. 

```typescript
const people = ["Kristiyan","Emiliyan", "Sally"];

people[2] = "Simon";

Result: ["Kristiyan", "Emiliyan", "Simon"]; 
```

**Description**

The **with()** method changes the value of a given index in the array, returning a new array with the element at the given index replaced with the given value. The original array is not modified. This allows you to chain array methods while doing manipulations.

The **with() method** never produces a sparse array. If the source array is sparse, the empty slots will be replaced with undefined in the new array.

The **with() method** is generic. It only expects the this value to have a length property and integer-keyed properties.

---
**Example**

```typescript
const people = ["Kristiyan","Emiliyan", "Sally"];

people.with(2, "Simon");

Result: ["Kristiyan", "Emiliyan", "Simon"]; 
```
### Browser's compatibility


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


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


[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/kristiyan-velkov-763130b3/)

<a href="https://revolut.me/kristiyanvelkov" target="_blank">
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxmsw2d2ooukhdg8x5ar.png)
</a>

If you like my work and want to support me to work hard, please donate via:

<a href="https://revolut.me/kristiyanvelkov" title="Link to Revolut">Revolut website payment</a> or use the QR code above.                                                                                                                           


**Thanks a bunch for supporting me! It means a LOT 😍**
Web Scraping with Python, getting the table of countries and country codes from countrycode.org
Tags: webscraping, python
Published: 2023-06-04 14:20:07

Ever needed some data that is sitting on a webpage you cannot easily copy and paste from? 
I'm going to show you how to get data from webpages (webscraping, essentially) with Python. Specifically we'll be getting the countries, iso codes and phone number codes in the table found on this [page] (https://countrycode.org/)

Before we get into the code proper, we need to install some Python packages first (requests and beautifulsoup4)
`pip install requests beautifulsoup4`

Follow the following steps.

Import required packages
```
from bs4 import BeautifulSoup
import json
import requests
```

Get the webpages content using the requests package
```
url = "https://countrycode.org/"
r = requests.get(url)
r.raise_for_status()
```
The last line raises an exception if the request's response code is not a successful one, thus stopping the program.


Create the 'soup' and select all the rows found in the table's body. This 'soup' object helps us to get particular elements from the HTML page's content.
```
soup = BeautifulSoup(r.content, 'html.parser')
rows = soup.select("tbody>row") # select all the rows that are direct descendants of a tbody element
```

Get the countries from the table
```
list_of_countries = []
for row in rows:
    keys = ["name", "country_code", "iso_codes", "population", "area/km2", "gdp $USD"] # the different columns in the table
    country_object = {}
    for key in keys:
        country_object[key] = '' # creating a dictionary for the row

    for index, cell in enumerate(row.find_all('td')): # looping through the different td elements found in this row
        if index < len(keys):
            if index ==  0:
                # get the text found in the hyperlink in the cell
                country_object[keys[index]] = cell.find('a').text
            else:
                # get the text found in the cell
                country_object[keys[index]] = cell.text
    list_of_countries.append(country_object)
```

Save the list to a json file
```
with open("countries.json", "w") as _: # replace countries.json with whatever you want
    json.dump(list_of_countries, _)
```

VOILA! You have successfully gotten the list of countries, their ISO and area codes, surface areas and gdp.
How to commits to open source in GitHub. Step-by-step guide
Tags: opensource, github, beginners, guide
Published: 2023-06-04 14:17:52

The guides are written for the [github](https://github.com) service. You need to log in to your account or sign up.

All commands in these guides are entered in the **terminal**.

1. Make a **fork** (copy) of the desired project. Go to your account and go to the just created fork.

2. **Clone** the fork (copy) of the project from step 1 to your computer.
Example:
`git clone git@github.com:maxdzyubak/vite.git`

3. Configure the git config locally (**local**). It must be repeated for each project:
`git config --local user.name maxdzyubak`
`git config --local user.email maxdzyubak@gmail.com`
   Or **global**. Set up once for all projects
   `git config --global user.name maxdzyubak`
   `git config --global user.email maxdzyubak@gmail.com`

4. We make a pointer to the **original upstream repository** from which we made the fork. This is needed to download the latest code updates from the original repository. (Checking upstream: `git remote -v`).
Example:
`git remote add upstream https://github.com/vitejs/vite.git`

5. Create a new branch and go straight to it. Make all changes there. **This is considered good practice**
`git switch -c new_branch`

6. You can check the status of changes made with the command
`git status`

7. Add the changes to **staged**. Git starts tracking changes to the file(s)
`git add README.md`

8. Make a commit with the changes. If there is an issue number, the best way to commit is to write it like this: **[#123] fix bug**. If you just put a grid without parentheses, it will ignore it in the git rebase
`git commit -m 'Update README.md'`

9. Check the commit made
`git log`

10. Push the changes made to the outside world, because for now they are only on our local computer, indicating the created branch
`git push origin new_branch`

11. Create a **pull request** by clicking on the green button labeled **Compare & pull request** either in the original repository from which you made the fork, or locally in our github account.

-------------
Docs:
[git-clone - Clone a repository into a new directory](https://git-scm.com/docs/git-clone)
[Customizing Git - Git Configuration](https://git-scm.com/book/en/v2/Customizing-Git-Git-Configuration)
[git-remote - Manage set of tracked repositories](https://git-scm.com/docs/git-remote#Documentation/git-remote.txt-emaddem)
[Git Branching - Basic Branching and Merging](https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging)
[git-status - Show the working tree status](https://git-scm.com/docs/git-status)
[git-add - Add file contents to the index](https://git-scm.com/docs/git-add)
[git-commit - Record changes to the repository](https://git-scm.com/docs/git-commit)
[git-log - Show commit logs](https://git-scm.com/docs/git-log)
[git-push - Update remote refs along with associated objects](https://git-scm.com/docs/git-push)
[git-request-pull - Generates a summary of pending changes](https://git-scm.com/docs/git-request-pull)
What is a Webhook and how it works
Tags: http
Published: 2023-06-04 14:17:42

Let's imagine a crowded restaurant, the waiter's mission is to deliver customer's orders to the kitchen, and when the food is ready, take it to them.

The waiter needs to know when the food is ready, if he goes to the kitchen every 2 minutes to see if an order is ready, it would be a huge waste of time: maybe new customers will enter the restaurant in the meantime. Waiting to be served is never good!

Wouldn't it be amazing if the kitchen called the waiter when the order was ready? That way, the waiter would spend less time going to the kitchen and more time doing what matters.

A similar scenario happens when you're choosing an approach to handle real time data coming from external sources, such as an application that you don't have control over. You can call it many times at a given interval (pooling), or await for an event to be sent from source to your application (webhook).

Webhook is a common feature on products that heavily depends on integrations, like payment services providers, monitoring systems, CI/CD stuff and so on.

![webhook](https://media.discordapp.net/attachments/1048420478685028392/1114367074224050256/webhook.png?width=770&height=650)

This is how a webhook works, as simple as adding an endpoint to your application that listens to POST calls and reporting its address to the application where the events occur. Despite being simple, the possibilities from there are countless, providing a powerful integration.
How I got 1000+ followers! ⭐
Tags: productivity, javascript, webdev, beginners
Published: 2023-06-04 14:03:30

## Inception

In this post, I will share my Dev.to journey, and how I got 1000+ followers within 1 month.

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

<br>
I registered on Dev.to on 5th May, 2023. Previously, I used to take notes on notebooks and Notion. One day I thought that if I could write the notes in the form of blogs, there will be an online reference of my notes and other people could also read them. Hence, I researched about different blogging platforms like Hashnode, FreeCodeCamp, Hackernoon, Blogspot etc. But I found Dev.to is the best because of its widespread community. 

<br>
I write about Javascript, intitially my posts got 20 to 30 views and 2-5 likes. One day, when I sold one of my project to an international client, I decided to cover the story in form of a blog. Suprisingly, that blog went viral and I got 12000+ views, 37 comments and 38 likes. 

[Here is the link to that blog](https://dev.to/merudra754/how-i-sold-my-project-for-30-9l0)

<kbd>
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07b0zvqx0ralptf88k0t.png)
</kbd>

That post was also featured on Google Discover feed.

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

At that time, I was getting approx 100-120 new followers everyday.  

## New Plans

Now I love writing valuable posts on Dev.to, I am fond of this platform and people around here. They write constructive comments and help each other. 

I wish to develop consistency and write blogs daily.

**Blog topics**

- Javascript
- Nodejs
- Reacjs
- Typescript
- Javascript Daily Quiz
- Beautify valuable information in the form of blog post.

_Thanks for reading :)_