teleren/devto huggingface dataset:
First Django App For Beginners Part1 (setup & installation)
Published: 2021-10-24 06:39:47

What is Django?
Django is a high-level Python web framework that encourages  clean development and fast, with pragmatic design.

Why Django?
1. Ridiculously fast.
Django was designed to guide developers take projects from intellection to completion as quickly as possible.

2. Reassuringly secure.
Django takes security seriously and helps developers avoid many common security mistakes.

3. Exceedingly scalable.
Some of the busiest sites on the web ascendancy Django’s ability to quickly.

**Before You Start make sure you have python installed on your computer.**

You must have Python installed on your system if you don't have check out [link to python.org](https://python.org)

**Let's Start!**

>Step 1: Installation `pip install django`
>So step 1, will install django on your system

>Step 2: To start a project use this command `django-admin startproject mysite` then `cd` to wherever the project folder is in and run this command to create a app `python manage.py startapp sites` to create a app 

Project Folder Structure:
```
mysite/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        asgi.py
        wsgi.py
```

App Forlder Structure:
```
sites/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py
```

Then run your server with this command: ` python manage.py runserver`
You will see a success page like this:
![Success Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz652dfwtmg10wfm5oge.jpg)

>**for you to make changes in your app folder and for it to work you will have to register your app inside your settings.py like this below**

>Line 34 in your settings.py file
```
# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    'your_app_name_here', # your app(s) goes inside this list
]
```

>#Part two will contain views and urls
【Please check my code】React bad pattern
Published: 2021-10-24 06:11:45

I wrote `createIdentifier` for solving React famous bad pattern ‘Using indexes as a key’.
But I’m not sure is it OK.
If you would like, please check my code and give me some comments. Or give me example code that you think the best way.

```tsx

const createIdentifier = (index: number):string => {
  return index.toString() + Math.random().toString();
}

return(
  <div>
    <ul>
      {items.map((item, index) => (
        <li key={createIdentifier(index)}>
          {item}
        </li>
      ))}
    </ul>
  </div>
)

```
Free tailwind templates for your next project
Published: 2021-10-24 06:08:21

###Problem: Cant find tailwind templates
In-case your looking to start a new front-end project using tailwind css , a popular utility first CSS framework, but looking for a starter template. Here is a list of starter templates i have discovered.
### Why this list
So every time i am starting a new project, i prefer to use tailwind but most of the times, there is no good template that i can use to get started pretty fast. 
I therefore decided to compile a list of free tailwind templates out there than can enable you and I get started quickly.
`Ps:` This is not a complete list, i will keep adding new items as i discover them. if you know of good templates please comment with its github link

## 1. [Cleopatra](https://github.com/moesaid/cleopatra)
![cleopatra dashboard preview](https://github.com/moesaid/cleopatra/raw/master/dist/img/index.png)
🔥 Trending Repositories This Week 🔥
Tags: github, trending, repositories
Published: 2021-10-24 06:01:16

Hey Coders!!

Today, I'm gonna be giving you a list of the top trending repositories this week!

I'm going to start making a series of trending repositories every week!

Well, what are we waiting for? Let's hop right in!

<h2>1. TheAlgorithms/Python</h2>

This Repository has all of the Algorithms implemented in Python. 

![Repo Embed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i28uruyq2e4bizkajc7j.png)

<a href="https://github.com/TheAlgorithms/Python">Repo Link</a>

<h2>2. reactjs/reactjs.org</h2>

This Repository contains the The React documentation website. 

![Repo Embed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g50fg8ndv6mh1oho2g8f.png)

<a href="https://github.com/reactjs/reactjs.org">Repo Link</a>

<h2>3. mastodon/mastodon </h2>

This Repository contains the source code of a self-hosted, globally interconnected microblogging community

![Repo Embed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7umo4ksmcas4fxp8opkp.png)

<a href="https://github.com/mastodon/mastodon">Repo Link</a>

<h2>4. IntelLabs/control-flag </h2>

It is a system to flag anomalous source code expressions by learning typical expressions from training data

![Repo Embed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3lirwnjmeyi640fp048.png)

<a href="https://github.com/IntelLabs/control-flag">Repo Link</a>

<h2>5. Dusk-Labs/dim </h2>

Dim is a media manager and you can access content such as videos and photos from there.

![Repo Embed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2m6c1lywcgqr6g45z1l.png)

<a href="https://github.com/Dusk-Labs/dim">Repo Link</a>

Hope you liked this list that I compiled!

And Remember...
<h2>Keep Coding Y'All 👨🏻‍💻</h2>
3 ways to import node modules in deno
Tags: javascript, deno, node, tutorial
Published: 2021-10-24 05:54:33

Migrating to Deno can be hard when you depend on Node modules. Until those Node modules get ported to Deno, you can use these three methods to import Node modules in Deno.

## Method 1: Using the [compatibility layer](https://deno.land/std/node)

There is a Node compatibility layer in Deno standard library, which allows you to `require()` anything which is in `node_modules`.

```js
import { createRequire } from 'https://deno.land/std/node/module.ts';

const require = createRequire(import.meta.url);

const path = require('path');
const cjsModule = require('./my_mod');
const leftPad = require('left-pad');
```

It was buggy for me as I wasn't able to import every module, and the need to have `node_modules` is also a downside, which brings me to...

## Method 2: Import the source code

If you are lucky, the authors of the library may have the source code using ES6 imports (and doesn't import any node builtins) and you can import the source code directly from the URL (remember, you can import any URLs!)

For example, you could import lodash like so:

```js
import cloneDeep from 'https://raw.githubusercontent.com/lodash/lodash/master/cloneDeep.js';
```

I got that URL by going to the [file on GitHub](https://github.com/lodash/lodash/blob/master/cloneDeep.js) and then clicking the raw button.

But sometimes, you also need to support all those node builtins. That brings me to...

## Method 3: jspm.io

[JSPM](jspm.io) is a module CDN which allows you to `import` any node module in the browser, and by extension that means that you can use it to import to deno too! 

JSPM is the most reliable method so far, it is used in my Web Framework [Sleek](https://github.com/sleekjs/sleek) too!

So if you want to import the wonderful [recast](https://npmjs.com/package/recast) library, you can do this:

```js
import recast from 'https://jspm.dev/recast';
```

And that's it, you can now use recast!

---

If you found this post helpful, [spread the word!](https://twitter.com/intent/tweet?url=https%3A%2F%2Fdev.to%2Fsiddharthshyniben%2F3-ways-to-import-node-modules-in-deno-3fo4&text=One%20of%20the%20reasons%20many%20people%20don%27t%20use%20Deno%20is%20because%20they%20depend%20on%20node%20packages.%20Here%20are%203%20ways%20to%20bypass%20that%20and%20import%20Node%20modules%20in%20Deno%20by%20@SiddharthShyn%20%21&hashtags=javascript%2Cnode%2Cdeno) or [follow me on twitter](twitter.com/intent/follow?screen_name=SiddharthShyn) or over here to stay updated on my blog posts!
Common HTTP status codes you'll see on Web
Tags: server, webdev, web
Published: 2021-10-24 04:34:29

Http status codes are a thing that we see a lot, in memes, while using a websites or while developing (whenever an api is involved). 

So in this blog these are some common status codes you might encounter.

## 🌟 200: 

- It is a standard OK status code. whenever server fulfills an http request.
The response varies according to the request like GET or PUT

- e.g, For GET request the response comes in message body which will the data which was requested

## 🌟 204: 

- If server returns 204 code that means the request was fulfilled and there is no need for any data to return with response

- e.g, For DELETE operation it returns the status code to confirm that request was fulfilled but than there is no need to return any data with it

## 🌟 400:

- This is an error code, returned whenever user tries to request something the server cannot process

- This happens whenever user tries to request something that server does not know about or it is unconventional to the server

## 🌟 401:

- This status code is returned when user gives some kind of invalid authentication details

- Generally happens when user tries to login with wrong username or password

## 🌟 403: 

- A little similar to 401, this status code is returned when server pressed the request but user is not eligible to access the requested data

- This happens when the username and password is correct but the user is authorized to access that data

## 🌟 404:

- The most common http status code known to end user,

- This status code is returned when server cannot find the target resource that was requested

- **The code does not indicate that the resource is unavailable temporary or permanent.**


> If you want to learn more and different types of status code you can check out [HTTPstatuscodes](https://httpstatuses.com) site

**If found the content i share useful than share it with your developer friends and also follow me on [Instagram](https://www.instagram.com/gaurav_vaala/) and [Twitter](https://twitter.com/gaurav_vaala)**
Resize a cross domain iFrame (the hackiest way)
Tags: javascript, node, react, webdev
Published: 2021-10-24 03:35:30

### Situation 🤔

Some time ago, I was implementing a cross domain iFrame in Next.js and ran into a slight problem when it came to dynamically setting its height. Due to limitations imposed by the browser, we're prevented from using JS magic to access the page and getting the actual height of the document. A library, [iframe-resizer](http://davidjbradshaw.github.io/iframe-resizer/) promised to solve the issue however it required a small script to be placed on the page hosting the iFrame. Unfortunately that wasn't an option 🚫

### Task 📃

Fortunately, at two redbulls deep, [Poros](https://www.theoi.com/Daimon/Poros.html) had mercy and an ✨*idea*✨ came outta no where. What I wanted to accomplish was, on page load, assign a height to the iFrame that will display all it's contents without unneeded whitespace. Why not do it in the most straight forward way possible? Remotely load the URL that will get displayed in the iFrame, get the height of the loaded contents then apply that height to the iFrame. 

### Lights, Camera... **Action!** 🎬

One way to do this was through browser automation. There's [Selenium](https://www.selenium.dev/) but I went with [Puppeteer](https://developers.google.com/web/tools/puppeteer). I made an API endpoint that when hit, uses Puppeteer to load the site then get & return the height using [this method I saw on stackoverflow](https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript). 

### Results 💯

The result was a page that takes a little longer to load but has an iFrame that correctly shows all the contents! Check out the code sample below
```
// npm i puppeteer
const puppeteer = require('puppeteer')

async function getContentHeight({ clientWidth, clientHeight }) {
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();
    await page.setViewport({ width: clientWidth, height: clientHeight })
    await page.goto('my-url-was-here-b4-yours');
    const contentHeight = await page.evaluate(() => {
        let body = document.body,
            html = document.documentElement;

        let height = Math.max(body.scrollHeight, body.offsetHeight,
            html.clientHeight, html.scrollHeight, html.offsetHeight);
        return height
    });
    console.log(contentHeight);

    await browser.close();
}

getContentHeight({ clientWidth: 1366, clientHeight: 768 })
```

### Disclaimer

Pleaaase don't use this in prod! But, if you do.. let me know how it goes 😂 

### Attribution
Cover image: <a href="https://www.instagram.com/andyparkart/">Andy Park Art</a>
AI isn't the end of your job
Tags: ai, webdev, programming, codenewbie
Published: 2021-10-24 03:29:24

#Hey, did you hear? AI's are going to replace our programming jobs.
Alright, so over the past few months, I've had developer friends come to me and say: "look at this new software, it's automating so much stuff now; we wont have a job before too long because AI will just write all the code for us"

I looked at him on the call, and pondered the possibility for a moment carefully before I also had a point: "but, it is developers who make that software"

Now, if you're a guy who's scared of his own AI, perhaps this post wont end your fear, but personally I believe that AI being able to self-adapt in the ways it has already to a point beyond imagine. (I mean, look at google -- smartest AI on the face of the planet in my opinion)

As developers, we are always going to have our place in this revolution of AI development, and perhaps it might replace web developer jobs, but it is us, the developers, who make these said AI. 

Once our jobs are taken away by AI, we simply should move into developing the AI for a more complex self-learning AI.

Let's consider another possibility: let's create AI which can become the developer. The thought of this is what would scare me personally. It almost goes into sci-fi type movies because the potential for a self-learning AI to get to this point is all too-real. 

A lot of work as developers, we perform programming -- which is a set of instructions to in the end of the day no matter how complex it might be: perform a task. 

Imagine an AI being able to perform the same task. We see it time and time again through data collected for advertisers. One day I google shoes, I see shoe ads on websites I visit. I purchase a product on amazon or even so much as view it, I get thousands of those type of things flooding my page.

An example of AI working in its finest form in a bit more physical manner escaping the web development jobs would be more boring jobs such as Tesla's Self-Driving features. Every day, people entrust their lives to AI to drive them to work in these self-driving automobiles. 

It's the, "I Robot" movie happening slowly. Inevitably, we're going to produce robot prototypes which will perform all of our jobs with 1 rule: protect humanity (lots of theories as to what the machines could interpret this as). I predict within the next 10 years or less, because we haven't fully automated our homes without a physical presence. Anyways, but this is just a theory (so take it with a grain of salt and do your own research).

##Conclusion
In conclusion, no -- AI and robots are not taking over our world as we know it, only enhancing what we currently have. For example, I would rather view a more relevant advertisements of shoes instead of women's clothing. Your job is safe for now, and even if it's not, then you can always adapt because you learnt programming concepts to adapt to new languages/frameworks easily.

##Let's theorize together
If anyone works with AI development, we could always learn from one another from comment threads/posts and theories.
Typescript Static Class Blocks
Tags: programming, tutorial, typescript
Published: 2021-10-24 02:57:26

Class `static` blocks came to Typescript in v4.4, and is on the roadmap for becoming an official ECMAScript feature as well! It's used to contain any initialization for the class. The reason this feature is so helpful is because it can access all private internals of the class it's in, as well!

```ts
class Unicorn {
  static #isShiny = false;
  static #shinyLevel = 0;

  static {
    const { hasRainbowHorn, hasRainbowTail } = getData(Unicorn);
    if (hasRainbowHorn || hasRainbowTail) {
      // access and modify internals!
      this.#isShiny = true;
      this.#shinyLevel = Math.random();
    }
  }
}
```

You can create multiple `static` blocks in a class, which will be executed in sequential order.

This feature is definitely small - but I thought it was cool and wanted to share it with you all. However, since this post would be so short, I though I should add a...

## Half Related Tip ✨

While we're talking about static classes: do you know the best way to make a class unconstructable? This might come in handy for a utility class with only static methods. The most popular method is:

```ts
class Util {
  public constructor() {
    throw new Error('Do not initialize this class!');
  }
}
```

However, you can shorten it by just extending `null`:

```ts
class Util extends null {}

new Util(); // TypeError!
```

💖
How to integrate between viber bot and viber app.
Published: 2021-10-24 01:23:15

hello everyone.
I am full stack web developer.
I am integrating viber bot and viber app. Do you know about viber?
It's real time communication app.
It's so difficult for me. I don't know well how viberbot is invoked or connect with app.
I am looking forward to hearing from everyone.
thanks.
Dual booting Ubuntu and windows 10
Tags: opensource, computerscience
Published: 2021-10-24 01:18:21

First, download the latest version of Ubuntu from their website https://ubuntu.com/#download,then inject your SanDisk Pendrive with more than 8Gb (I used 16Gb) to your pc. After downloading Ubuntu we need Rufus (The Reliable USB Formatting Utility, with Source) is a free and open-source portable application for Microsoft Windows that can be used to format and create bootable USB flash drives or Live USBs.

Open the Rufus, there we can see the SanDisk Pendrive, also we can see the partition scheme I choose GPT and my target system is UEFI

After that on the status section click on start to begin the process

Then restart your computer and open the boot menu option using the shortcut f9 in case if it didn't work (for me it was pretty daunting but after a couple of google searches I found the solution) go to the settings-->update and security-->recovery--> on the recovery choose to restart on advanced setup

After a couple of seconds there will be three options go for the Troubleshoot -->Advanced options-->UEFI firmware settings and last choose restart now

That's all you will see the boot menu options then you have to choose the one with Sandisk

After that, you will be redirected to the ubuntu installation

Now enter all the user credentials, setting up the accounts, etc after that, you will be asked to restart when you go for it you can safely eject your Pendrive

Now you can dual boot Ubuntu and windows :)
Signals in Deno
Tags: todayilearned, deno, terminal, tutorial
Published: 2021-10-24 00:33:42

Yesterday I learned a few things about signals in Deno and how to use them to gracefully terminate a (sub-)subprocess including a running Oak server

## Don't panic if your signal panics

```bash
thread 'main' panicked at 'called `Result::unwrap()` on an `Err` value: Custom { kind: Other, error: "Refusing to register signal 9" }', runtime/ops/signal.rs:185:67
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
```

That's what I got trying to listen to `SIGKILL`, though thanks to [this comment](https://github.com/denoland/deno/issues/12515#issuecomment-949043049) I learned that `SIGKILL`, `SIGSTOP`, `SIGILL`, `SIGFPE`, and `SIGSEGV` cannot be registered, as per [Rust docs](https://docs.rs/signal-hook-registry/1.4.0/signal_hook_registry/constant.FORBIDDEN.html), which is of interest, because Deno runs on Rust 🚀

Fortunately there's more signals we can choose from and in my case I'm using `SIGQUIT` which also sounds much friendlier 🥰

## Let's get to the actual code

So I changed the listening part of my Oak server to

```ts
const controller = new AbortController();
const sig = Deno.signal("SIGQUIT");
sig.then(controller.abort); // abort the controller when receiving the signal
const { signal } = controller;

export const server = async () => {
  await app.listen({ port, hostname, signal });
};
```

And the `shutDown` function which I'm using in my custom CLI to stop after a set duration, to get my break and hold my promises to my partner that I'm ready in 25m 😅

```ts
function shutDown(reason?: string | void) {
  p.kill("SIGQUIT"); // `.kill()` sends the provided signal to the subprocess
  p.close(); // closes the subprocess and frees the memory
  console.log(reason ?? red(bold("Gracefully shutting down")));
  Deno.exit(); // finally terminates the CLI with everything cleaned up
}
```

I wrote a much more detailed article about all this on my freshly started blog running on Deno, Oak, SSR, Go & Fly.io
[Gracefully close sub-subprocess using signals in Deno](https://www.canrau.com/en/gracefully-close-sub-subprocess-using-signals-in-deno) 🦕

Many more articles are in the pipeline, so stay tuned 📻

Also please let me know if you have any feedback or question, here in the comments or on Twitter [@CanRau](https://twitter.com/CanRau)
Hey, Thanks for checking in!
Tags: welcome
Published: 2021-10-24 00:14:58

# Hey there!
I'm new here, and wanted to introduce myself. My name is Alexis and I like to share my knowledge around. I created this account mostly to have all my blog posts in one Github repo. There's some more info about me on [my website](https://alexistrudeau.me). Anyways, thanks for reading and hope to see you soon!