teleren/devto huggingface dataset:
Getting Started with Django
Tags: django, python, programming, ubuntu
Published: 2021-06-26 13:28:07

##<u>Takeaways from this article:</u>
1. Setting up python in Ubuntu system.
2. Creating a virtual environment in python.
3. Creating a sample application with Django Framework.
<hr>

###1. <u>Setting up python in Ubuntu system.</u>
####1.1 Check if python exists in your system.
```python
python3 --version
```
If Python is not installed, continue to the next step, else skip to point 2.

#### 1.2 Update and refresh repository list.
```python
sudo apt update
```
#### 1.3 Install supporting softwares.
```python
sudo apt install software-properties-common
```

#### 1.4 Install python 3.8
```python
sudo apt install python3.8
```
#### 1.5 Check installed python version
```python
python3 --version
```
<hr>
###2. <u>Creating virtual environment in python.</u>

#### 2.1 Install python-pip
```python
sudo apt install -y python3-pip
```
#### 2.2 Install python virtual-environment
```python
sudo apt install -y python3-venv
```
#### 2.3 Create virtual-environment
```python
python3 -m venv <virtual_enviornment_name>
```

#### 2.4 Activate virtual-environment
```python
source <virtual_enviornment_name>/bin/activate
```
Your command prompt will now be prefixed with the name of your environment:
```python 
(virtual_enviornment_name) raghu:~/Projects
```
#### 2.5 Test your virtual-environment
```python
python3
```
This will open a python shell for you.

Congratulations your virtual environment has been created, let's create our first Django app.
<hr>
###3. <u>Creating a sample application with Django Framework.</u>
#### 3.1 Check if Django exists.
```python
django-admin --version
```
If Django is not installed, continue to the next step, else skip to step 3.3.
#### 3.2 Install Django
```python
sudo apt install python3-django
```
#### 3.3 Setting up Django and starting your server.
```python
django-admin startproject <project_name>
```
This command would have created a folder with your project name. Navigate to the folder using the "cd" command.

Inside the folder you will see the file "manage.py", a key file in Django projects.
Run the following command to migrate the database(Django uses SQLite by default) and sync your changes.
```python
python3 manage.py migrate
```
This will create some migrations and extra files, which we will discuss in the upcoming blogs.

For now you can start your webserver using the following command:
```python
python3 manage.py runserver
```
In the terminal you will see the development server starting at http://127.0.0.1:8000/

You can open the same URL in the browser to see your project
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6633htsr8zmr21kljd3.png)
<hr>
###4. <u>Conclusion</u>
In this blog we learned about how to setup a Django Application.
In the upcoming blogs we will learn to create a fully functional application.
MLH INIT 2022
Published: 2021-06-26 12:59:15

MLH is organizing INIT 2022, where you will get an opportunity to learn and network with like minded people!

## What is INIT?

INIT is a celebration for the start of the 2022 Hackathon Season! This is the first time MLH is running INIT, the format will feel familiar to those who have participated in Local Hack Day. You can expect to complete challenges, hear about BIG community announcements, chat at hacker hangouts, enjoy fun live sessions,network with people, make new memories (and memes) and of course our favorite SWAGS!!

So If you are Interested, then Register here:

Registration

1. Register for the whole week - https://hackp.ac/init
2. Complete the swag form - https://hackp.ac/INITswag
3. Update your address - https://hackp.ac/address
4. Join Discord and a Guild - https://discord.mlh.io/

And  **Eddiehub**  would be participating in INIT this season. Join Eddiehub guild!! You will get to learn and network with some awesome folks out there so do not miss this one!!

Join our guild- https://discord.mlh.io/ (Select EddieHub as your guild)

Join our community on discord also- https://discord.gg/jgfaD56B
learn DNS
Published: 2021-06-26 12:52:42

## DNS records
 [Understanding PTR MX SRV SPF AAAA DNS Records](https://www.howtouselinux.com/post/linux-dns-ptr-mx-srv-spf-aaaa-dns-records)
 - NS record - The Name Server record simply specifies the other name
   servers for the domain, or maps a domain name to that of the primary
   server for the zone.
 - A record The Address record holds the IP address of the name.
 - CNAME record The Canonical Name record is an alias field allowing you
   to specify more than one name for each TCP/IP address.
 - MX record The Mail Exchange record specifies the name of the host   
   that processes mail for this domain.
 - HINFO record The Host record is the record that actually specifies   
   the TCP/IP address for a specified host. All hosts that have static  
   TCP/IP addresses should have an entry in this database.
 - PTR record Pointer records are used for reverse lookup entries. They 
   specify the IP address in reverse order and the corresponding host   
   name.

## Dig DNS records
[Using Linux Dig to Query DNS Records](https://www.howtouselinux.com/post/linux-command-use-dig-to-query-dns)
 - Simple lookup : dig howtouselinux.com
 - Lookup Name Servers: dig @8.8.8.8 howtouselinux.com NS
 - Lookup using external DNS Server: dig @8.8.8.8 howtouselinux.com
 - Lookup MX record: dig @8.8.8.8 howtouselinux.com MX
 - Lookup CNAME record: dig @8.8.8.8 howtouselinux.com CNAME
 - Lookup TXT record (e.g will it will return SPF records, google verification methods): dig @8.8.8.8 howtouselinux.com TXT

reference:

[DNS port](https://www.howtouselinux.com/post/dns-port)
[Query DNS Txt Records with Dig Command](https://www.howtouselinux.com/post/dig-dns-txt-record)
[Linux dig DNS](https://www.howtouselinux.com/post/linux-dig-dns)
Express routes with Builder pattern
Tags: node, express, advanced
Published: 2021-06-26 12:48:26

In the last post, we were creating a common interface for creating express routes, thereby improving reusability. 

We now want to take it up a notch. How about having some fun with _Builder Pattern_, using plain old Javascript Functions.

## Creating express routes with Builder Pattern

So, I created a file RouteBuilder.js and it looks like this. 

```javascript
// RouteBuilder.js
const express = require("express");

const RouteBuilder = function () {
  this.path = undefined; //string
  this.method = undefined; //string
  this.middlewares = undefined; //array of middlewares
  this.controller = undefined; //final request handler
  this.router = express.Router();

  this.setPath = function (path) {
    this.path = path;
    return this;
  };
  this.setMethod = function (method) {
    this.method = method;
    return this;
  };
  this.setMiddlewares = function (middlewares) {
    this.middlewares = middlewares;
    return this;
  };
  this.setController = function (controller) {
    this.controller = controller;
    return this;
  };
  this.build = function () {
    this.router
      .route(this.path)
      [this.method.toLowerCase()](...this.middlewares, this.controller);
    return this.router;
  };
};

module.exports = RouteBuilder;
```

and you can invoke this RouteBuilder like this

```javascript
const RouteBuilder  = require('./RouteBuilder');
const authMiddleware = require("../authMiddleware")
const validateMiddleware = require("../validateMiddleware")
const actionMiddleware = require("actionMiddleware")
const serviceMiddleware= require("serviceMiddleware")

const routeBuilder = new RouteBuilder();

const userController = (req, res, next) => {
  res.send({});
};

//build the route
let route = routeBuilder
  .setPath('/')
  .setMethod('GET')
  .setMiddlewares([
    authMiddleware,
    validateMiddleware,
    actionMiddleware,
    serviceMiddleware,
  ])
  .setController(userController)
  .build();

//Finally set the route to the app
app.use("/users", route); // here app is the express app. 
```
What are Arrays
Tags: algorithms
Published: 2021-06-26 12:22:39

##Why array was introduced?
*So that we don't have to create multiple variables for storing data , example for storing 10 student marks can be stored as variable but the same cannot be replicated for 100 or 1000 marks*

##How is array stored in memory ?
*It is a continuous segment of bytes for example one block will have 1 byte
and 1 address*


##How much time will it take for below operation?
###To access
*Array stores the starting address and if we want to fetch ith index
then internally array will do*

`A[i]-> address of A[0] + i*bytes`

*so above operation is of constant time as it is basic multiplication
O(1)*

###To insert
* Usually, it will take O(n) but for a large number this is not the case as
amortized complexity ->  O(1)
Here array size will be increasing by 2X as size will be doubled whenever an array is fully occupied if memory is filled then Memory out of bond exception will be thrown*

###To Remove
*Removal again takes O(N) time as if one element is removed from the middle of the array then the entire element has to shift and in the worst case, it may take O(N).*

##What is Sub-Array?
*A continuous segment  is defined as Sub-array 
(i,j) → A[i], A[i+1]....A[j]*

##What is Sub-sequence?
*In this even if some element is removed it will keep the order of remaining elements same is called sub-sequence.number of*
`sub-array → n*(n+1)/2` 
*aka summation of natural number*
Задача для программистов
Tags: programming, idea
Published: 2021-06-26 11:54:38

Есть интересная задача среднего уровня для прокачивания навыков: Написать приложение RealWorld. Проект описан на [гитхабе](https://github.com/gothinkster/realworld). Суть его в том, чтобы написать свой блог, включая авторизацию. На этом сайте можно найти [спецификацию api](https://github.com/gothinkster/realworld/tree/master/api), [стили к отрисовке содержимого](https://github.com/gothinkster/realworld-starter-kit/blob/master/FRONTEND_INSTRUCTIONS.md). Ну и конечно же [многочисленные примеры реализации](https://codebase.show/projects/realworld) на чём только можно реализовывать.
Так что если у Вас есть желание что-то написать-потренироваться, но не т идеи, то вот одна из них.
Веб сайт который вы должны посетить, если вы разработчик
Tags: developers, developer
Published: 2021-06-26 11:53:03

#1. Получите Avataaars 👱‍♂️
Один из моих самых любимых веб-сайтов, который генерирует потрясающие векторные аватары, которые вы можете использовать в своих проектах или приложениях, или можете создать аватар, похожий на вас. У него есть несколько вариантов: от цвета глаз до аксессуаров для вашего аватара. Вы также можете создать случайный аватар. Вы можете экспортировать сгенерированное изображение в формате PNG или SVG. Все эти аватары использовать.

ссылка: [getavataaars](https://getavataaars.com/)

#2. Haikei.app 🎨

Потрясающий веб-сайт, который генерирует красивые фоны, состоящие из различных шаблонов волн, капель, размытых градиентов, низкополигонального искусства и прочего, для ваших веб-сайтов и презентаций, чтобы придать невероятный вид. На этом веб-сайте есть множество опций и функций, которые вы можете выбрать, от цветов до подсчета. У него даже есть опция, которая генерирует для вас случайное искусство, если вы не хотите тратить время зря. Есть возможность скачать сгенерированный паттерн в формате PNG или даже в формате SVG. Вы можете скачать выкройки для 🅵🆁🅴🅴.

ссылка: [haikei] (https://app.haikei.app/)
Node.js microservices for dummies
Tags: microservices, node, express, mongodb
Published: 2021-06-26 11:46:40

---
title: Node.js microservices for dummies
published: true
description: Did you had trouble introducing your more junior team members into microservices? There could be your solution!
tags: microservice,node,express,mongodb
cover_image: http://zizit.lt/men_docker.png
---

## Tip

As team-lead you often have task to introduce your fellow team members into advanced concepts and way you want implementations to be delivered.

I use this combo of example project (I recommend to use it as template until person fully understands what he is doing) plus leading article, and usually that's totally enough to kickoff new colleague, and turn him into effective team member within a few days.

### Template project

https://github.com/Rayvid/men-microservice-skeleton

### Article

https://medium.com/@cramirez92/build-a-nodejs-cinema-microservice-and-deploying-it-with-docker-part-1-7e28e25bfa8b
Making a game: Engine considerations (Unreal vs Godot)
Tags: gamedev, beginners
Published: 2021-06-26 11:43:38

When you want to make a game, one of the first things that you’ll need to consider is whether or not you want to use a game engine for it, and then if you do, which game engine you actually want to use.

It’s quite easy to spend an excessive amount of time worrying about which engine you’re going to use, and comparing them all down to the last little detail. But at the end of the day the engine isn’t going to make the game – you are. This is something you should keep in mind.

Everybody has their own opinions on which game engine is best for them, and that’s absoloutely fine. You should always go for the choice that best suits you and your use case. However, in this article I’m going to give a brief overview of my prefered engines to work with. Over the last few years, I have made games using Unity, Godot and Unreal Engine and I have learnt a fair amount about each of these engines, although I would not call myself an expert user in any of them.

The full article is freely avaliable over here: https://www.saluki.tech/2021/06/14/making-a-game-engine-considerations/

I hope you enjoy it, and find something useful there. As always, I'm open to feedback.
How to create cross repository milestones in Github
Tags: github, sprint, milestone, project
Published: 2021-06-26 11:40:47

---
title: How to create cross repository milestones in Github
published: true
description:
tags: github,sprint,milestone,project
//cover_image: https://direct_url_to_image.jpg
---

In this article, I'll show how to use Github's API to create milestones/sprints across multiple repositories.

If a person or organization is using multiple repositories under single project and doing sprint planning through Github Project, it requires creating same milestones (to name sprint) across multiple repositories.

Currently, creating milestones across repos is not supported. But one can search using the milestone across multiple repos to display assigned issues in Github Project. Of course, there are plenty of paid tools that do this and many more things.


At my current organization, we were using Asana to manage sprints and tasks. The recent acquisition of Github by Microsoft gave tones of useful features including the Github Project. 

It was more convenient for us to connect sprints & tasks with the code through linked issues, but we are using multiple repositories for different micro-services and creating sprint through milestones in each repo was painful.

I believe many of you who are using multiple repos for a single project facing a similar issue. 

Enough talk, let me show code to copy-paste 😂.

```
// script.js
import { Octokit } from "https://cdn.skypack.dev/@octokit/core";

const token = "YOUR_GITHUB_PERSONAL_ACCESS_TOKEN"
const octokit = new Octokit({ auth: token});
const repos = await octokit.request('GET /user/repos');
const milestones = [{
    "title": "Sprint 1",
    "description": "June 1 to June 7"
    "due_on": "2021-06-01T00:00:00Z"
}, {
    "title": "Sprint 2",
    "description": "June 7 to June 14"
    "due_on": "2021-06-07T00:00:00Z"
}];

for (let r=0; r < repos.length; r++) {
    let repo = repos[r];
    for (let m=0; m < milestones.length; m++) {
        let milestone = milestones[m];
        let payload = {
            owner: repo.owner.login,
            repo: repo.name,
            title: milestone.title,
            description: milestone.description,
            due_on: milestone.due_on
        };
        await octokit.request(`POST /repos/{owner}/{repo}/milestones`, payload);
    }
}
```
Follow steps mentioned in the [documentation](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token#creating-a-token) to get access token.


I've built a small web application to achieve this through the user interface. Feel free to use it and modify it as per need.

Link - [hardiksondagar.github.io/cross-repository-milestones](https://hardiksondagar.github.io/cross-repository-milestones/)
Stop using '!important' in css - css specificity explained in shortest possible way
Tags: html, css, cssspecificity, stylesheet
Published: 2021-06-26 11:38:20

Most of the time I have seen developers using `!important` in css without any necessity. Using `!important` just for a simple override is *always a bad practice*. This is because it makes debugging more difficult by breaking the natural cascading in your stylesheets.

You might be asking, "then how do I avoid it"?
Answer is, you can do it using greater "specificity". 

For the next few minutes I am going to explain CSS specificity in the shortest way possible.
 
CSS specificity is the value provided to each selector so that the browser can understand how much priority to be given to a specific selector.
Below are the selector types in decreasing priority order. The top one having the highest priority and the bottom one has the lowest.

* `!important` - this one is given the highest priority, overriding everything else, including inline styles (`style` attribute). If there are multiple CSS selectors with `!important` mentioned for same element, the last declaration found in the CSS is applied to the element.
```css
h1 {
  color: blue !important
}
```

* `Inline styles`
```html
<h1 style="color: red">Hello reader</h1>
```

* `ID Selector` 
```css
#headline {
  color: green
}
```

* `Class, pseudo class and attribute selector`
```css
// class selector
.headline {
  color: red
}

// pseudo class selector
h1:hover {
  color: red
}

// attribute selector
[type="input"] {
  color: red
}
```
* `Type Selectors and pseudo elements`
```css
// type selector
h1 {
  color: red
}

// pseudo element selector
h1:before {
  color: red
}
```
Other than the above type of selectors there are Universal selectors `*`, combinators `+`, `>`, `~`, `' '`, `||` and negation pseudo-class `:not()` which does not have any specificity value.

Now we need to know how the browser calculates the specificity value and what happens when they are combined. The total value for a given combination of selectors is calculated by the priority of the selectors present and the number of occurrence of that selector. You can visualize it from the below image.

![CSS Specificity values map](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjvgr47n7r9801b5z4bw.jpg)

![CSS Specificity values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qvvrctrqgk1ghsbx0k7.jpg)


![CSS Specificity values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0oy983cxd015spa2au41.jpg)


![CSS Specificity values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eml1shnfu6k85ct0d8j4.jpg)
Here we have 2 elements `body` and `div` and 2 classes `parentClass` and `ChildClass`. That is why we get 2 in each selectors position, because number of occurrences are added along with priority.

You can check [this](https://specifishity.com/) for more examples.
For more details, you can refer [this](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)

If you have reached here, I hope you will be able to avoid `!important` and use higher specificity instead. 
Thank you, happy styling!
Making gradient text with Tailwind CSS
Tags: tailwindcss, css
Published: 2021-06-26 10:47:06

Gradient texts are super cool, I love the vibe it gives off, and I made this [CSS gradient text effect](https://daily-dev-tips.com/posts/css-gradient-text-effect/) before.

Today we'll explore how we can do this in Tailwind CSS without adding any custom styles 👀.

## Tailwind CSS gradient text

Let's get started by creating our heading and adding the tailwind classes we need.

```html
<h1
  class="font-extrabold text-transparent text-8xl bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600"
>
  Tailwind CSS
</h1>
```

This will be all we need to create this super cool gradient text effect. However, let's look at what these elements do.

The general styling

- `text-8xl`: Makes the text font-size 6rem, so quite big
- `font-extrabold`: Created a bigger font weight, so the effect pops more

The above styles are not needed for the actual effect. However, the classes below are needed to get the gradient effect we want.

- `text-transparent`: This makes the actual text transparent and shows the background (which has the gradient)
- `bg-clip-text`: This makes the background only show on the text outlines
- `bg-gradient-to-{flow}`: This is used to state what direction the gradients flows too. ([All directions](https://tailwindcss.com/docs/background-image))
- `from-{color}`: Set the beginning color in our case to purple-400
- `to-{color}`: This sets the end color, in our case pink-600

I've created this Codepen to demonstrate how it works.

{% codepen https://codepen.io/rebelchris/pen/NWpmEJg %}

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
The no-stress Django continuous deployment on Amazon Web Services - no terminal
Tags: django, aws, amazon, python
Published: 2021-06-26 10:35:43

I had a lot of problems when it came to deploying Django apps on Amazon Web Services, but I finally solved the problem.

And the best part in this is that

**There is no code or terminal needed.**

1 - First of all, go to your AWS Console, press <code>Option + S (Mac)</code> and type <code>CodeStar</code>

![Screenshot 2021-06-26 at 13.19.56](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1d5sq1b6xkd7qe717l8.png)

2 - Then, press the **Create project** button

![Screenshot 2021-06-26 at 13.21.40](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8hce28855oh28asj4eg.png)

3 - Select your options, these are the ones that worked well for me

![Screenshot 2021-06-26 at 13.23.58](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42d9oc00uruxfp54lel6.png)

4 - Select (click) the platform that showed up and press **Next**

![Screenshot 2021-06-26 at 13.24.14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4thbpi777bk9brpkr91g.png)
  
5 - Enter your project name & id, and select your repo (I'm using Github - btw it supports continuous deployment)

![Screenshot 2021-06-26 at 13.24.51](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldtb4m4aogh919pt8n2t.png)

6 - If you chose Github, you will have to enter these details. AWS will automatically create a repo for you.

![Screenshot 2021-06-26 at 13.26.26](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpijsi31t1hlabv6qchg.png)
 
 7 - Quickly configure your EC2 Instance

![Screenshot 2021-06-26 at 13.29.10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzdw8tt2pqvxek8wnjwd.png)

8 - Review your project information and click on **Create project**

![Screenshot 2021-06-26 at 13.30.13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy11g14e78tvukw29brm.png)
 
At this point, you will have to wait 3-4 minutes for AWS to make everything for you.

When you push something to your repo on Github, the CodePipeline will automatically update your website.

The default Django version that AWS installs is 3.1.5, but you can modify the common.txt requirements-file from /requirements to 3.1.7, if you want.
 
Hope it helps you!

Good luck deploying Django (perfect) apps ❤️

Robert