teleren/devto huggingface dataset:
Question about Project Structure (Possibilities) [Newbie]
Published: 2022-01-03 11:25:34

Hello dear community,
I am quiet a beginner in the whole Angular world and was just thinking of a project I need to submit for my job-training exam.

So my employer gave me a rough plan of what he wishes me to do and I thought about it and tried to come up with a structure for the whole thing.

My question now is not how exactly to implement XYZ as I want to learn it... I just want to ask if my thoughts of structure and used technologies are suitable for this or if i am missing out something.

So basically I draw a raw plan of it as follows:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsu6razcwn761qqwcess.png)

So the plan is:
- Have an Angular Frontend to display local HTML files filtered with a search functionality (e.g. searching for "XYZ" is then only displaying the local HTML files that contain the word "XYZ")
  -> It should basically be a website for the technical 
     documentation.
- Also it should be possible to send an update request to a file server via the frontend which checks if there are any new HTML files on the server and then be able to download them into the directory on the local computer to replace the old ones. 

So I thought this should all be possible with Angular FE and nodejs for the server/file stuff, right? Or do I need any other technologies between? As a server I thought of an NGINX. 

Just wondering if these technologies sufice or I need anything else to have a look on. Also, if there are more elegant ways, I wouldn't mind getting a hint^^

Thanks in advance!
Step-by-step mini snippet to set up a blog post SEO
Tags: writing, webdev, html
Published: 2022-01-03 11:16:32

## How to optimize a blog post

1. Select the keyword and searcher intent you want for the page. One core keyword = One page. Google rank pages not domains. Use keywords tools: [Ahrefs](https://ahrefs.com/), [KW finder](https://kwfinder.com/), [Keysearch](https://www.keysearch.co/), [Keywordseverywhere](https://keywordseverywhere.com/).
2. Optional: find related non-core keywords to write sub-sections.
3. Write the content of the page without worrying about optimization. Write for users.
4. Optimize page title with the chosen keyword. Use dates, numbers, power words in titles. Use [HeadlineStudio](https://headlines.coschedule.com).
5. Optimize URL slug: include keyword, use hyphens, keep it short, max 3 levels of path nesting.
6. Optimize meta Description: include keyword, google shows it on the search page, so make it readable and attractive.
7. Optimize page content: set up a single H1 tag, include core keyword in the first 100 words, use synonyms and LSI keywords (Latent Semantic Indexing keywords are words that are commonly used within the context of the main topic, e.g. coffee: water, machine, recipe...).
8. Structure your document: H1, H2, H3. Make it readable: keep paragraphs short, break up text with images and headings.
9. Optimize images filenames and alt attributes: use human-friendly namings.
10. Include internal and external links. Your page must be a part of the whole net. Link to already well-ranked pages, competitors, authorities.
11. Use semantic markup, use specific HTML tags such as \<article>, \<p> and others instead of universal one like a \<div>.
12. Set up robots.txt, sitemap.xml, [google search console](https://search.google.com/search-console).
13. Use appropriate microformats and rich snippets. Set up Facebook Open Graph tags and support for Twitter cards.
14. Include canonical meta tag: \<link rel="canonical" href="https://..." /> and consider to cross-post your content on various platforms.
15. Optimize page load speed, make it mobile-friendly and make sure to use https.
16. Apply writing tips and tricks: give some value at the very beginning, use "So what?" and "Why should I care?" mindset, use humor, make it controversial, use cliff-hangers, make it personal, end with a call-to-action.
Using acts_as_list for easy ordering of items
Tags: rails, beginners
Published: 2022-01-03 11:08:35

##`acts_as_list`
acts as list is a ruby gem designed for easy ordering and reordering of object contained in a list. I have recently become a little familiar with this gem while working on a project management board application. 

##Set up 
This tutorial/guide assumes you already know some basics of using ruby on rails like setting up a database, creating migrations and resources, etc.. 

The first thing that needs to be done is installing the gem. This can be done by adding `gem acts_as_list` to your gemfile within your RoR application and running `bundle` in the command line. 

Once finished with the installation, you are going to need a special column of "position" on any resource you want to be organized like a list. If you are creating a resource from scratch, be sure to have a column called position that takes in an integer datatype. To add this to existing resources, create a new migration for adding this column to a resource and run the migration(this code from the official docs): 

```
rails g migration AddPositionToTodoItem position:integer
rake db:migrate
```
After adding this column to a resource, you then need to go into the model for that resource and add the `acts_as_list` method inside the model. You can also set the scope of this method to relate to another resource. Here is an example from my code: 

```
class Card < ApplicationRecord
  acts_as_list scope: :list
  belongs_to :list
end

class List < ApplicationRecord
     acts_as_list scope: :project_id
     has_many :cards, ->{ order(position: :asc) }, dependent: :destroy
end
```
Here I have set up a has_many -> belongs_to relationship with Cards and Lists. I then have the scope of acts_as_list set to the lists so the position of the cards is tracked only within a single list.

After this, you're pretty much good to start creating instances of your resources and using other methods that come with this gem. Keeping with the example I have, if I create a new card with a reference to a list, the position column is populated automatically starting with position of "1". If I create more cards with the same list as reference, it will increment the position for each card on its own. 


Once you have a few things with their position created, you can use various methods to change/ manipulate the position. Here is a list of methods from the documentation: 

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

If you use `move_higher` on an Object, it will decrease its position(moving it higher in the list) and will subsequently move all others it moved above lower (increasing their position in response). This makes it effortless to update your lists order server-side, as well as display information about your lists to the user with the attribute returning methods. 

Hopefully you find this useful, there are a ton of possibilities with this simple but powerful gem. 

Sources: 
[Github](https://github.com/brendon/acts_as_list)
Socket.io или игра в дурака
Tags: react, game, socket, nestjs
Published: 2022-01-03 11:00:22

Всякий раз, когда я что-то новое узнаю, мне хочется для закрепления материала написать какой-нибудь более или менее полезный проект. Вот где-то год назад я узнал как сделать сокет на веб-сервере, сделанном на nestjs. Как видно из заголовка, я для реализации своих планов и хотелок сделал игру в дурака, а точнее- в подкидного дурака. Просто потому что обычный чат все делают, это не интересно и пусть уж лучше будет лежать не особо активная игра, чем не особо активный чат.
Поскольку серверная часть игры держится на NodeJS, то есть риск при большом количестве игроков и одновременных игр повесить сервер и тeм самым растерять этих самых игроков _(ха-ха, большое количество игроков на проекте с одним человеком, который следит за моими проектами)_. Поэтому основная часть сделана на PostgreSQL, а бэкенд просто делает авторизацию, организовывает игровой чат и вызывает функции базы данных.
К клиентской части у меня было меньше энтузиазма, чем к серверной, может поэтому игра выглядит так, как будто пришла прямиком из ... сказал бы из 90х, но в 90х не было реакта и игры были сделаны на коленках и паскале.
В этой игре игрок играет не с ботом, а с каким-то другим человеком и с этим партнёром по игре можно даже общаться в чате.
Сейчас для регистрации можно использовать какие-нибудь несуществующие адреса, например test@test.com, но кто знает, может в будущем будет приходить оповещение по почте или напоминание о пароле. Так что какую почту использовать- решать Вам.
Причём из-за того, что я не стал вкладываться в поддержку этого всего у меня серверная часть развёрнута на Heroku, а клиентская на vercel. Вот, кстати, адрес этой самой игры: https://card-game-fool.vercel.app/

Исходники [клиента](https://github.com/SLKarol/card-game-fool-client) и [сервера](https://github.com/SLKarol/card-game-fool-api) можно взять у меня на гитхабе.
Python - Interactive Console
Tags: python, console, opensource, webdev
Published: 2022-01-03 10:57:59

---
title: Python - Interactive Console
published: true
description: Getting started with Python Interactive Console, a simple way to learn how to code in Python.
tags: python, console, opensource, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1gc176tu8g2svj8hszl.jpg
canonical_url: https://blog.appseed.us/python-interactive-console/
---
Happy new year! 

This article is a short introduction to Python shell, the Interactive console where we can fully interact with Python magic. For newcomers, **Python** is a popular language that we can use to code many types of projects: web apps, games, OS system programming, or even data analytics and machine learning. Once Python is properly installed and accessible in the terminal windows, we can start writing code using the **[Python Interactive Console](https://blog.appseed.us/python-interactive-console/)**. 

> Thanks for reading!

---

```bash
$ python --version
Python 3.8.4       <--- The output
``` 

In case the above command returns an error, probably **Python** is not installed or not present in the execution `PATH` of your operating system.  

--- 

> 👉 Python - Launch the console

```bash
$ python
Python 3.8.4 [MSC v.1924 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
```

--- 

> 👉 Working into the Python Console

```bash
$ python
>>>       
>>> my_name = 'Bill'    # define a variable
>>> my_name             # uses the variable 
'Bill'
>>>
>>> 1 + 2               # return the addition of two numbers 
3 
```

---

> 👉 Python Console - Use Modules

Before using any module, we need to install it first via `PIP`, the official package manager for Python.

```bash
$ pip install webbrowser
```

The above command will install `webbrowser` module, a popular web browser controller.

```bash
$ python                                  # start the Python Console
>>> 
>>> import webbrowser                     # import the module
>>> webbrowser.open('https://appseed.us') # open a web page
True
```

---

> 👉 Python Console - Exit

```bash
$ python        # start the console
>>> 
>>> 1 + 1       # coding stuff     
2 
>>>
>>> quit()      # exit from the console   
```

---

> **Thanks for reading!** For more resources, feel free to access:

- AppSeed for [support](https://appseed.us/support) via eMail and [Discord](https://discord.gg/fZC6hup)
- [Free Dashboards](https://appseed.us/admin-dashboards/open-source) crafted in Flask, Django, and **React**
Major Difference Between UI/UX
Tags: design, productivity, webdev, beginners
Published: 2022-01-03 10:27:47

## UI (User Interface) Contains:

- Visual Aspect
- Graphics
- Color
- Layout

## UX (User Experience) Contains:

- Psychology
- Placements
- Wireframes
- Accessibility

In short, UI is the element which the user interacts with. UX is the experience the user has while using the system.

---

### Let's connect 💜 You can follow me on

[Twitter](https://twitter.com/MrDanishSaleem), [Instagram](https://www.instagram.com/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)

![Buy Me a Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fefzbxbnwww7tkght33w.png)
Amazing Flask Resources FOR FREE!
Tags: python, webdev, programming
Published: 2022-01-03 10:26:27

We live in a world full of resources and data. Being a Python Developer can't escape the trend. That being said, in this article you're going to get all the resources you need to get started for the Journey.

After learning Python basics, you'll find yourself being overwhelmed with a lot of information, and this can be very hard to go on. It becomes easier to get trapped in the Tutorial Hell 🔥.

# Brief Description of Flask

Flask is a micro web framework written in Python. It is classified as a microframework because it does not require particular tools or libraries. 

In other words, The Flask Framework is a Python platform that provides a foundation for developing software applications using Python Programming language. 

If your goal is to use Python for Web Development apps, Flask is what you need (sort of) for the Journey. Flask helps you set the Backend of your Web App. It's equivalent to Django (Another Python Backend Framework), NodeJS, Ruby on Rails, and so on.

**What is Special about Flask is its simplicity, there are not many things to get overwhelmed, You only get what you need, simply. 🤙**

That being said, using your favorite front-end technology (React, Vue, Angular, Svelte, or whatever you prefer), before jumping to read on the resources, you really have to determine what you need, exactly. Because, as we just said at the beginning, there are tons of resources and information you don't need, but still it makes you overwhelmed... 


# Check these Resources

As they are plenty of them, here are the two main resources you can use as references to go and check according to what you need:

### Refresh the memory with the Fundamentals
Without the fundamentals, there is no way to bring innovation, meaning there is a necessity of getting a foundation. Here are the main resources:

 ⚡ [The Flask Mega-Tutorial](https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world)

 ⚡ [Five Best Python Flask Courses You need](https://medium.com/javarevisited/5-best-python-flask-courses-for-beginners-2f262f8e23da) 


### Get the Resources you need to Build Real-world Projects
Knowing the Fundamentals isn't sufficient for real-world projects, you need to know topics like plugins (to avoid reinventing the wheel). Get the resources here:

⚡ [Awesome Flask Links](https://github.com/humiaozuzu/awesome-flask) 

⚡ [Flask for your Project](https://github.com/realpython/discover-flask) 


### Get the Benefit of the Flask Community

Coding, but Stuck with some bugs? Here is the Solution, Go and ask the Community:

 [Flask Subreddit Community](https://www.reddit.com/r/flask/)
 [Python Subreddit Community](https://www.reddit.com/r/Python/)



Thanks for reading this article, many others are coming very soon, Feel free to subscribe 🤙.

### 🌎 Let's connect
- [Twitter](https://twitter.com/CodeWithKenn) 
- [Github](https://github.com/KennStack01) 
- [LinkedIn](https://www.linkedin.com/in/kennkibadi/) 
- [Instagram](https://www.instagram.com/codewithkenn_/)
Multi Tenant Architecture
Tags: multitenantarchitecture, cloudcomputing
Published: 2022-01-03 10:18:40

---
title: Multi Tenant Architecture
published: true
description: Cloud Computing is now an essential technology with more benefits continuously emerging and driving up usage with every passing day. By some estimates, the cloud market is worth over 300 billion USD with SaaS offerings being on the top of the charts followed by IaaS and PaaS solutions respectively. Some reports say that by 2022, the SaaS, IaaS, and PaaS global market size will be 172 billion USD, 122 billion USD, and 101 billion USD respectively. Single-tenant architectures dedicate infrastructure to specific users. Multi-tenant architectures utilize advanced scheduling algorithms and virtualization to divide infrastructure amongst multiple users whilst maintaining strict isolation between tenant workloads and strive to impart “single tenant” experience to the tenants. That leads to greater scalability and flexibility.
tags: Multitenantarchitecture, cloudcomputing
cover_image: https://www.thinksys.com/wp-content/uploads/2021/10/Multi-tenant-Architecture.jpg
---
What if CSS libraries were countries? - ⚔️ Game of Codes project 🛡️
Published: 2022-01-03 10:15:56

🐉 Hi to all! My name is Michał and apart from being a web developer adn MDB founder I am also a huge fan of history, maps and fantasy 

⚔️ Over the years, observing the world of technologies, I could not help but feel that it is a great material for creating a separate universe that could become the basis for an extremely interesting story 

🗺️ This project is purely for fun. Using real data, such as the number of NPM downloads, stars on github or website traffic, I tried to measure the "power" of a given technology and visualize it with quasi-historical maps.

🛡️ Anyway - if you're curious about what front-end technologies visualized as states would look like, read on.

And if you have any idea how this story and this universe could become more interesting, or more in line with real statistics related to the front-end - let me know in the comment!

https://gameofcodes.art/css.html
Working with AWS CloudFormation - Part 1
Tags: webdev, tutorial, programming, beginners
Published: 2022-01-03 09:41:20

Hey Dev's

I promised i will publish my first article today. Going through my previous article you will note the list of the contents i will be starting with [here](https://dev.to/kevin_odongo35/contents-for-2022-2cib) covering.

We are going to start with CloudFormation and break it down so you are comfortable working with it. Having good knowledge in any of the products used to build Infrastructre as Code is an added advantage when you are aspiring in working with cloud products. 

Terraform allows you to provision your services in almost all the major cloud services. When provisioning products to any cloud services, Infrastructure as Code allows you to have a better strategy of building and destroying. When cleaning up you will be certain you have cleared all the resources you had provisioned. 

I will be publishing my articles on medium and dev.to to ensure we reach more users. Here is the link to the first article about CloudFormation.

https://medium.com/@davyod/cbca8403bc8e

Enjoy the article.
Show Progress Bar In The Terminal - Laravel
Tags: php, laravel, programming, beginners
Published: 2022-01-03 09:40:52

Let's start quickly. If you want to create a Progress Bar and see it in the Terminal, let us show you the steps so that it can be used in any project idea
First, we create a command
```php
php artisan make:command ProgressBarTestCommand
```
Inside app/Console/Commands/ProgressBarTestCommand.php
```php
<?php

namespace App\Console\Commands;

use Illuminate\Console\Command;

class ProgressBarTestCommand extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'progressbar:test';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Command description';

    /**
     * Create a new command instance.
     *
     * @return void
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * Execute the console command.
     *
     * @return int
     */
    public function handle()
    {
        $items = range(1, 3);

        $progressbar = $this->output->createProgressBar(count($items));

        $progressbar->start();

        foreach ($items as $item) {
            // perform some operation
            sleep(1);

            $progressbar->advance();
        }

        $progressbar->finish();

        return 0;
    }
}
```
Let's choose it and see the result and tell us about it in the comments
```php
php artisan rogressbar:test
```
I hope you enjoyed the code.
Source :- https://laravel.com/docs/8.x/artisan#progress-bars
Source :- https://www.youtube.com/watch?v=H4mxFUlR1vc
String Slicing in Python, Explained
Tags: python, programming, codenewbie, tutorial
Published: 2022-01-03 09:35:33

String slicing lets you slice into Python strings, and work with their `slices`, or `substrings`—instead of the whole string.

As strings in Python are *immutable*, you cannot change them in place. In this tutorial, you'll learn to slice Python strings and work with substrings.

----


## Python String Slicing Syntax
```py
<str>[start:stop:step]
```
The above line of code:
- Returns a slice of the string `<str>`—starting at index `start`, extending up to `stop-1` in steps of `step`.
- The `start` index is _optional_: the slice starts from the beginning of the string by _default_.
- The `stop` index is also *optional*: the slice extends up to the end of the string by _default_.
- The `step` value is optional too. The default value of step is `1` and includes all characters in the string.

----


## Python String Slicing Example
```py
my_str = "Python3"
```
▶ Let's use `enumerate()` and examine the characters at each index in the string.
```py
for idx,char in enumerate(my_str):
  print(f"At index {idx}: letter {char}")

# Output
At index 0: letter P
At index 1: letter y
At index 2: letter t
At index 3: letter h
At index 4: letter o
At index 5: letter n
At index 6: letter 3
```
In the above code, you've used the `enumerate()` function in conjunction with the `for` loop. This lets you loop through iterables, and access items along with their indices simultaneously—without having to use the `range()` function to get the indices.

▶ Let's now use string slicing.
```py
# With `start` and `stop` indices
print(my_str[1:6])
# Output: ython

# Without `stop` index
print(my_str[1:])
# Output: ython3

# Without `start` index
print(my_str[:5])
# Output: Pytho

# With `step = 2`, slice includes every second character
print(my_str[::2])
# Output: Pto3

# Without `start`, `stop` and `step`: slice is entire string
print(my_str[::])
# Output: Python3
```
----

## Python String Slicing with Negative Step
When you set `step` to a negative value, you can get slices starting from the end of the string—reverse substrings.

If `step = -1` you get a slice starting from the end of the string, and including every character.

This can be super handy when you'd like to _reverse_ a string, like this:
```py
print(my_str[::-1])

# Output: 3nohtyP
```
----

## Conclusion
To sum up, `<str>[start:stop:step]` is the syntax to obtain string slices or substrings in Python.

Now that you've learned how to slice strings, it's time to put your skills to practice, maybe? Happy learning and coding!


-----
Cover image: Photo by Tamanna Rumee on Unsplash
No Dice. A random challenge drinking game!
Tags: python, beginners, computerscience, codenewbie
Published: 2022-01-03 09:10:11

Having worked in the plumbing and heating industry for nearly 20 years, I recently started to feel a need to change my career. So, I enrolled in a computer science course.

As part of that course, I had to code a Python terminal game. Within my friendship group we have a few games that we play at parties, I decided to roll all of these into a single game.

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

The game uses a random number generator ranged between 1 and 6. These are portrayed as dice rolls. Each number has a different challenge assigned to it. If you complete the challenge, you receive a point. First to 10 wins!

Here is the link to the code https://github.com/I-Rosco-I/no-dice.git

I've only been coding for approx. a month, feedback on how I could improve my code would be much appreciated!