teleren/devto huggingface dataset:
Backend and frontend
Tags: webdev
Published: 2022-04-15 17:36:40

The backend of a web development project is responsible for the server-side of the application, including the database, security, and any other back-end processes. 

The frontend is responsible for the client-side of the application, including the user interface, interactivity, and any other front-end processes.

## Backend 

The backend developer must have a strong understanding of server-side technologies such as [Python](https://www.python.org/), [PHP](https://php.net), [Ruby on Rails](https://www.ruby-lang.org/en/), or [Node.js](https://nodejs.org/). 

They must also be able to work with databases such as MySQL or MongoDB. In addition to these technical skills, they must also be able to communicate effectively with the frontend developers and understand their needs.

![backend frontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr4q3izctlt6yshe2v1i.png)

## Frontend

The frontend developer must have a strong understanding of client-side technologies such as [HTML5](https://developer.mozilla.org/en-US/docs/Web/HTML), CSS3, and JavaScript. They should also be familiar with frameworks such as [AngularJS](https://angular.io/) or [ReactJS](https://reactjs.org/). In addition to these technical skills, they must also be able to communicate effectively with the backend developers and understand their needs.

## Python for webdev?

If you work with Python, a common choice is [Flask](https://www.python-me.org/python-flask) for the backend. [Flask](https://flask.palletsprojects.com/) is a microframework for creating web applications in Python. 

It includes everything you need to get started, such as a development server and built-in debuggers. Flask is also very lightweight, which makes it perfect for developing smaller applications or prototypes.

Typically the frontend communicates with the backend using an API. An API can be created in [Python](https://pythonflask.xyz/blog/api) and many other languages.
Short-circuiting in JavaScript
Published: 2022-04-15 17:36:26

   Ever heard of short-circuiting in JavaScript? It's not something strange, believe me. You might have even interacted with some parts of it at one point. Well, short-circuiting is a way of simplifying conditionals while making code more readable. In most cases, short-circuiting is utilized in place of if-else expressions. It can be used for both single and multiple if-else statements.

   There are various operators used in short-circuiting. They include OR and AND. OR which is denoted by ||  is used to test a single condition. If one condition is right, then the code executes successfully. Check out the example below;

``
const response = "Foo";
const username = response || "guest";
console.log(username);
`` 
The code above checks if there is a response. If there is one, it returns the response. If not, it returns *guest* as the username.
 
AND which is denoted by && is used to test for multiple conditions. For the code to run, all of the requirements must be met. Look at the following illustration;

``
const response = "Foo";
const isEmailVerified = true;
const username = isEmailVerified && response ;
console.log(username);
`` 

This code evaluates when there is a response and the email is verified.
Both AND and OR operators can be used in one operation. For example;

``
const response = "Foo";
const isEmailVerified = true;
const username = isEmailVerified && response || "guest";
console.log(username);
``
In such a scenario, the AND is executed before the OR. 
There is a technique to 'override' this and allow the OR to run first. This is accomplished by the use of parenthesis. Which operators are run first are specified by parentheses. Here is an example;

``
const response = "Foo";
const isEmailVerified = true;
const username = isEmailVerified && (response || "guest");
console.log(username);
`` 
In this case, the OR is executed before the AND operator.

   In conclusion, short-circuiting should not be used as a way to shorten code but as a way to make code more readable.
Elixir Wizards Podcast S8E1
Tags: elixir, podcast
Published: 2022-04-15 17:28:21

---
title: Elixir Wizards Podcast S8E1
published: true
description: Elixir Wizards Podcast S8E1
tags: elixir, podcast
canonical_url: https://blog.miguelcoba.com/elixir-wizards-podcast-s8e1
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60mhz6tijzzcblizqchg.png
---

A couple of weeks ago I was invited to talk on the [Elixir Wizards](https://smartlogic.io/podcast/elixir-wizards/) podcast by [Smartlogic](https://smartlogic.io/).

We talk about Elixir in polyglot environments (that is, where you have a lot of languages used at the same time), my beginnings in the software field, my books, and other sideprojects.

I had a lot of fun chatting with [Sundi Myint](https://twitter.com/sundikhin) and [Owen Bickford](https://twitter.com/owenbickford) who were amazing in guiding my ramblings to a coherent discussion.
Thank you so much for having me.

You can listen to the podcast here:

[Elixir Wizards S8E1](https://smartlogic.io/podcast/elixir-wizards/s8e1-coba/)


## About

I'm [Miguel Cobá](https://miguelcoba.com). I write about Elixir, Elm, Software Development, and eBook writing.

- Follow me on [Twitter](https://twitter.com/MiguelCoba_)
- Subscribe to my [newsletter](https://newsletter.miguelcoba.com)
- Read all my articles on my [blog](https://blog.miguelcoba.com)
- Get my books:
    - [100 Elixir Tips](https://store.miguelcoba.com/l/100elixirtips) [FREE]
    - [Deploying Elixir](https://store.miguelcoba.com/l/deployingelixir) [FREE]
    - [Deploying Elixir: Advanced Topics](https://store.miguelcoba.com/l/advancedtopics)
    - [eBook Writing Workflow for Developers](https://store.miguelcoba.com/l/ebookwriting)
NULL, from Radiolab 🎧
Tags: discuss, watercooler, podcast
Published: 2022-04-15 17:20:26

I listen to an astonishing volume of podcasts. I wanted to share today's episode of [Radiolab](https://www.wnycstudios.org/podcasts/radiolab) with the DEV Community—I think you'll appreciate it!

{% embed https://www.wnycstudios.org/podcasts/radiolab/articles/null %}

_Photo by Ben Hershey via [wnycstudios.org](https://www.wnycstudios.org/podcasts/radiolab/articles/null)_

Let me set the stage for you, without spoiling any of the episode's twists and turns:

A security engineer in the US thought that putting "NULL" on his car's vanity license plate might prevent him from getting speeding tickets. He was wrong.

What follows is a dive into the digital (and systemic) challenges faced by people whose names present complications in online databases.

Give it a listen, I'd love to hear what you think! 🎧
What the Hell is a JWT Token??
Published: 2022-04-15 17:18:47



When I first heard the jwt token name, it gave me a headache. I can still remember how terrified I was that day. I was telling myself what the hell is this new  thing that I need to implement in order to verify the user and api. 

However, after working on a few projects, I feel forced into making this statement 

> 
Jwt token is an excellent approach to validate any user against a database.

> 


**What is jwt token??**

Jwt is an abbreviation for Json Web Token. A JWT is a mechanism to verify the owner/user. It’s encoded. When a server receives a JWT, it can guarantee the data it contains can be trusted because it’s signed by the source. No middleman can modify a JWT once it’s sent.

**Creating JWT token**

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

If you take a look at the above picture closely, you will get an idea how developers generate the jwt token.

When a developer creates a JWT token with a method called jwt.sign(), it contains elements such as the user id, JWT_SECRET, and expiration date. JWT_SECRET helps to make a sign token that won't work anywhere unless the secret is given. The expiration date will determine how long this token will be valid.
After successfully generating a jwt token, All you have to do now is transmit the jwt token to the frontend and save it in localstorage or Cookie.
.

**How does JWT Token work ?**



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


Let's have a look at how it works now. Let's say you need to access your data from the dashboard, but how will that website validate your identity and prevent a hacker from gaining access to your information?
 
Simply said, the provided jwt token will be checked against the database. 
If that website discovers a user id associated with the jwt token, it will grant you access to the dashboard.

So, I used the jwt.verify() function, which accepts two parameters: token and JWT SECRET, to check the jwt token. It will allow you to enter if both input values are true.
 
Take a look at the above picture to better understand.
Common Mistakes by Django Developers and How to Avoid Them
Tags: javascript, webdev, beginners, programming
Published: 2022-04-15 17:16:47

As a Django developer, it’s important to be aware of the most common mistakes made in this coding language. By knowing what these mistakes are and how to avoid them, you’ll be able to write code that is efficient, effective, and error-free. In this blog post, we will discuss five of the most common mistakes made by Django developers, as well as how to prevent them from happening. Let’s get started!

## Not Understanding the Django Framework
One of the most common mistakes made by Django developers is not understanding the Django framework. This can lead to inefficient and ineffective code, as well as errors that are difficult to troubleshoot. To avoid this mistake, it’s important to take the time to learn about the different aspects of the Django framework. This includes learning about the different modules, how to use them, and how they work together.

## Not Planning Ahead
Another common mistake made by Django developers is not planning. This can lead to code that is difficult to maintain and update, as well as errors that are difficult to troubleshoot. To avoid this mistake, it’s important to take the time to plan your code before you start writing it. This includes thinking about how the different modules will work together, what data you will need, and what steps need to be taken to complete the task at hand.

## Not Testing Code Thoroughly
One of the biggest mistakes made by Django developers is not testing their code thoroughly. This can lead to errors that are difficult to troubleshoot and fix. To avoid this mistake, it’s important to test your code carefully before deploying it into production. This includes testing for both functionality and accuracy.

## Writing Poor Quality Code
Another common mistake made by Django developers is writing poor-quality code. This can lead to code that is difficult to read and understand, as well as errors that are difficult to troubleshoot. To avoid this mistake, it’s important to take the time to write clear and concise code. This means taking the time to properly format your code, use meaningful variable names, and comment on your code thoroughly.

## Not Following Best Practices
The final common mistake made by Django developers is not following best practices. This can lead to inefficient and ineffective code, as well as errors that are difficult to troubleshoot. To avoid this mistake, it’s important to familiarize yourself with the best practices for coding in Django. This includes learning about the different design patterns, how to use them, and when they should be used.

By avoiding these five common mistakes, you’ll be able to write code that is efficient, effective, and error-free. Happy coding!
Code execution: explain like I'm five
Tags: webdev, javascript, tutorial, beginners
Published: 2022-04-15 17:12:29

We write code for computers, using programming languages that are easy to read for us but impossible to understand by a computer. So we translate that code into `machine code` and then computers can read it and do something with it. That something is often refered to as `executing` or `running` the code. But what does that mean?

The code we write is usually just a list of instructions for the computer the carry out. So, if for example we create a program that is supposed to show us a blue triangle on the screen, `running` the code will do exactly that: it will `try` and show us a blue triangle on the screen.

**IMPORTANT**
Notice the word `try`. As mentioned in the previous post, just because the code `compiled`, it doesn't mean the `execution` of the program will be successful. We can get `execution errors`, which happen while the computer is trying to run our code. These errors are refered to as `runtime errors`. 

An execution error occurs when a program is asked to do something that it cannot and results in a `crash`. The most used example of a run time error is asking a program to divide by 0. The code contains no syntax or logic errors but when it runs it can't perform the task that it has been programmed to carry out - you can read more about this [here](https://www.zmescience.com/science/news-science/divide-zero-mechanical-calculator/#:~:text=Division%20by%20zero%20is%20a,the%20answer%20i
Typetta, the TypeScript ORM for type lovers
Tags: graphql, mongodb, node, typescript
Published: 2022-04-15 16:47:24

I would like to introduce **[Typetta](https://twinlogix.github.io/typetta/)**, an open-source ORM written in TypeScript that aims to allow seamless access to data in a typed fashion to **MongoDB** and all main **SQL databases**.

Following some of its unique features:

- Plain GraphQL model definition
- MongoDB full support, from embedded documents to full text search
- Data access security policies
- Completely type-safe
- Mocking
- Auditing
- Multi-Tenancy

Please check it out, we are looking for feedbacks and contributors!

[Find more info on Medium](https://blog.devgenius.io/typetta-470c627631af)
Multiple MySQL Router Client in Single Server/Nodes
Tags: mysql, innodb, router, client
Published: 2022-04-15 16:38:22

## Introductions

![High-level architecture of your application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weavk730u5o04rc19teu.png)

As shown as example of above architecture diagram, your application servers require to connect to 3 different InnoDB MySQL Cluster. 

Are you Planning to connect to multiple Cluster at once from a single server? heres the plan...

- MySQL InnoDB Cluster 1 
  - c1-node-1
  - c1-node-2
  - c1-node-3
- MySQL InnoDB Cluster 2
  - c2-node-1
  - c2-node-2
  - c2-node-3
- MySQL InnoDB Cluster 3
  - c3-node-1
  - c3-node-2
  - c3-node-3


## Prerequisite
- install the mysqlrouter as usual
- do not bootstrap anything yet
- set your /etc/hosts files containing all the relevant servers
- always set different base port so it doesnt clash to each other
- always set different https port so it doesnt clash to each other

## Configuration
- run the command for bootstrapping the servers
  ```
  ##boostrap the Cluster 1
  
  $> mysqlrouter --boostrap <boostrap-user>@<c1-node-1> -d <c1-conf-directory> --user=mysqlrouter --conf-base-port=6446 --https-port=18443
  
  
  ##boostrap the Cluster 2
  
  $> mysqlrouter --boostrap <boostrap-user>@<c1-node-2> -d <c2-conf-directory> --user=mysqlrouter --conf-base-port=7446 --https-port=28443
  
  
  ##boostrap the Cluster 3
  
  $> mysqlrouter --boostrap <boostrap-user>@<c1-node-3> -d <c3-conf-directory> --user=mysqlrouter --conf-base-port=8446 --https-port=38443
  ```

- once the boostrap is done, you can start using the nohup command to make it run on the background
  ```
  $> nohup mysqlrouter -c <c1-config-directory> &
  $> nohup mysqlrouter -c <c2-config-directory> &
  $> nohup mysqlrouter -c <c3-config-directory> &
  ```
- to check your setup is working just check the `ps` command
  ```
  ps -ef | grep mysqlrouter
  ```
- the command above should show 3 of the instances of mysqlrouter processes has been successfully started.

Thats All, Thanks for reading!
Dev Journal Entry
Tags: webdev, javascript, journey, courses
Published: 2022-04-15 16:36:19

Where I am at in my developer journey. Learning backend things with NodeJS , Express , and using databases with MongoDB. Learning all this through a Udemy course called Web Developer 2022 by Colt Steele (I am sure I am missing some other keywords in the course title but that is the general synopsis of what the course contains.)

I would say the course is decent. The one thing that I want to see added to this course to make it better would be more exercise to test students understanding of the material. Coming from another course that costed $8,000 (I left that course due to not being able to make the payments for it) it included a lot more exercises to test the students understanding of the material with quizzes and projects that we did on our own and then submitted to a senior developer for review. 

Anyways, I could go on a tangent about the differences and qualities that each course has. Back to what I was saying which is where I am at in my developer journey.

Learning backend stuff and then moving into a code along project that will put everything together. Database with MongDB, backend with Express and NodeJS, and frontend with HTML , Javascript and Bootstrap.

Coding up another project that is a fighter management system. Aims to give fight managers a single hub for organization and communication for all   their fighters they manage. Coding this project up with React. So far I understand how components work and how to pass props to those components. Using a learning platform called Scrimba to learn React. 

Biggest things for me is to keep working on projects that are not code alongs.

In the comments below, where are you at in your developer journey? All experience is welcomed!
function or const, which do you prefer? (TypeScript/JavaScript)
Tags: typescript, javascript, webdev, discuss
Published: 2022-04-15 15:38:12

When it comes to writing a function, which style do you prefer?

**const**
```ts
const doSomethingCool: string = () => 'yes'
```

OR

**function**
```ts
function doSomethingCool(): string {
  return 'yes';
}
```

### My Thoughts
Personally, after years of using **const**, I have recently switched back over to **function** for a few reasons.
* The intent is clear and concise, so that readers quickly differentiate between variables and functions. The faster you know what is going on, the better right?
* Function hoisting, meaning it lets you use a function before you declare it in your code, where with **const** it will be `undefined` until it has been reached in the execution.
  * Also hoisting issues related to using **function** in bundling tools is no longer the issue it once was
* Named functions show up in stack trace messages, which is handy


### Edge-cases
While I have switched to using **function** in most cases, arrow functions still serve a important purpose in my codebase. Such as providing callbacks to high order functions, such as `map`, `reduce`, `forEach`, etc...

```ts
function iStillLikeArrows(users: Array<User>): Array<string> {
  return users.map(u => u.name);
}
```

### What Are Your Thoughts?
I would love to hear other opinions on this topic, and see different reasons/viewpoints as to why to favor one side more than the other.

Also remember, no one is wrong choosing one or the other, it's a personal preference.
Best Discrete Mathematics resources that all should know
Tags: computerscience
Published: 2022-04-15 16:24:52

Let's know about some best resources about Discrete Mathematics.

## Important books 📒

- Discrete Mathematics And Its Application By Kcnncih H. Rosen 
- Discrete Mathematics: An Open
- Introduction By Oscar Levin
- Concrete Mathematics By Donald Knuth

## Youtube Channels 🎬

- [Dimik Computing (Bangla)](https://youtube.com/playlist?list=PLYx-Huwyr19hDr9_9eZ4RJVEUlqvgfWBj)
- [Anisul Islam (Bangla)](https://youtube.com/playlist?list=PLgH5QX0i9K3rYy9DVhk28m8enSo8xxiZ3)
- [Neso Academy (English)](https://youtube.com/playlist?list=PLBlnK6fEyqRhqJPDXcvYlLfXPh37L89g3)
- The trev Tutor (English)
  - [Discrete math 1](https://youtube.com/playlist?list=PLDDGPdw7e6Ag1EIznZ-m-qXu4XX3A0cIz)
  - [Discrete math 2](https://youtube.com/playlist?list=PLDDGPdw7e6Aj0amDsYInT_8p6xTSTGEi2)
- [Dr. Trefor Bazett (English)](https://youtube.com/playlist?list=PLHXZ9OQGMqxersk8fUxiUMSIx0DBqsKZS)

## Great Websites 🌐

- [Codecademy- Discrete Math](https://www.codecademy.com/learn/discrete-math)
- [Brilliant. org](https://brilliant.org/wiki/discrete-mathematics/)
- [Elsevier Journals](https://www.journals.elsevier.com/discrete-mathematics)
- [javatpoint](https://www.javatpoint.com/discrete-mathematics-tutorial)
How I build my first NPM package and you can, everything from starting, updating, using.
Tags: tutorial, node, javascript, beginners
Published: 2022-04-15 16:21:48

<!-- title: How I made first NPM  -->



```javascript
npm init -y
```
onces the package is created, make a main.js file

```javascript
touch main.js
```

> add main.js file in bin section, if it is not then create one.

```javascript
#!/usr/bin/env node
// at the top of the main.js file.
```

> go write the logic of your package, what you want to do.
> our simply write.

```javascript
console.log('hello world this is my First Package.')
```
> after doing this open command palete and type

```bash
npm login
# you will be propmt for username and password and OTP
```

```bash
npm publish
# this will publish your package to npm.
# make sure you are have unique name for your package.
```

## Updating Package:

> for updating package go to your root file (main.js) and make your update.
> After, this will update your package.

```bash
npm version patch/minor/major
# Patch: is nominal edits version updates last decimal.
# Minor: is minor bug fixed version, updates second last.
# Major: is major version updates Main.
```


## Using Package:
> for using packages in your local machine type

```bash
npm i -g <package-name>
# -g is for global package, so you can access it from anywhere in you computer
```

```bash
<package-name>
#  to run your package.
# console.log('hello world this is my First Package.')
```

## What Package I have built ? and how can you use it

This is my first package, and accutally I don't have any proper use case of this, but I am built for learning purpose

> with this package you can convert you text to slug

```bash
makeslug convert this into slug
# convert-this-into-slug
```

### How to use it
```bash
npm i -g makeslug
```

```bash
makeslug <your-text>
```

So, this is simple story of my first package.

[![View on NPM](https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Npm-logo.svg/100px-Npm-logo.svg.png?20140904162625 "title")](https://www.npmjs.com/package/makeslug)

**🤝🏾Connect me on:**
**Twitter**: 🕊️[`@Abhayprajapati_`](https://twitter.com/Abhayprajapati_)
**Github**: 🐧[`@theabhayprajapati`](https://github.com/theabhayprajapati)
**Linkedin**: 📌[`@abhayprajaapati`](https://www.linkedin.com/in/abhayprajaapati/)
**Youtube**: 📺[`@Abhayprajapati`](https://www.youtube.com/channel/UCUrQHSjXEAyboKLN_M0w0Mg)