teleren/devto huggingface dataset:
Are you a Programmer? Then you must know this differences!
Tags: programming, codenewbie, codequality, webdev
Published: 2021-07-15 05:02:24

Without any further delay let's start with the common differences you must know if you are a programmer!

The First difference is about

**1 Front-end and Back-end**

**FRONT-END**

**Languages**
HTML, CSS, JAVASCRIPT.

**Frameworks**
ReactJS, Vue.JS, AngularJS, Bootstrap etc.

**User Administration**
Part of Website user can see and interact with.

**Database**
No Database needed.
Data stored in root directory.

**Application**
Client side Application.

**BACK-END**

**Languages**
PHP, Python, Java, Ruby etc.

**Frameworks**
DJango, NodeJS, ExpressJS, ASP.NET, Spring etc.

**Admin Adminstration**
In this everything happens behind the scene admin level.

**Database**
Database is needed and web server to manage data in DB.

**Application**
Server side Application.

Next is,

**2 IDE and Code editor**

**IDE**
Integrated Development Environment.
An integrated development environment (IDE) is a software application that provides to edit programming for software development.

**IDE = Editor + Compiler + Debugger**

Support specific set of language.

Heavy, it takes large space.

**CODE Editor**
Simply called code editor.

It is a computer program and software that allows user to enter, change, store and edit the programming code for software development.

**TEXT EDITOR = Editor**

Support coding in different languages.

Light weight takes less space.

Another is,
**3 Programming and Coding**

Programming is developing full fledged software.

Use set of specific tools for different tasks such as testing, debugging and others.

A person should expertise in Algorithms, project management and problem managing.

**Coding**
Coding is just taking part in programming.

A simple text editor is enough for coding and with good themes in it.

A person should good at basic knowledge of programming language and syntax.

Last but not the least--

**4 Algorithm and PseudoCode**

**Algorithm**
Steps to solve a problem in english language(you can use any) by following some particular rules.

Help to simplify and understand the problem so that a program can be made.

Example below--
**Swapping of number using Algorithm**
![Program to show Algorithm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2bgvc1zbfp3nyx6auxh.jpg)


**PseudoCode**
Code written to solve a problem which doesn't required proper syntax.

A method of developing an Algorithm by Writing a logical code to solve problems.

Example below--
**Swapping of number by PseudoCode approach**
![Algorithm to show swapping](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q7nhjaltvv7bjslhsyfl.jpg)

Thank for reading.
How Kanban Board Works in Task Management Software

Tags: productivity
Published: 2021-07-15 04:57:54

As a popular productivity tool, a Kanban board can help your team and project managers visualize the workflow and enable them to segregate a large project into smaller parts. A Kanban board is widely used in IT, healthcare, manufacturing, and other core industry sectors. Let’s understand the concept of the Kanban board online and see how it is useful in task management software.

<h2> Kanban Board- Brief History </h2>
A Toyota engineer Taichi Ohno has invented the first-ever physical Kanban task board back in the 1940s. The concept was taken from supermarkets as they replenish their stocks before they completely ran out of goods. The term ‘Kanban’ is a Japanese word that means ‘Visual card’. These visual cards were introduced to Toyota assembling lines with specific parts of the vehicle.

When a worker at the plant saw that their colleague drew one of the remaining cards of a specific type, they made a hurry to replenish the stocks of the part as denoted in the card. This visual scheme was highly popular and helped companies accelerate development cycles while reducing the amount of waste material.

Gradually, the form of the Kanban board online was changed as multicolored sticky notes were attached to it. At the beginning of the 21st century, David J. Anderson, a technology consultant, introduced this approach to software development and project management. Today, the Kanban board is considered one of the most important productivity tools.

<h2> Basic Principles of a Kanban Board </h2>
<b>The Kanban tool is based on the following rules and practices-</b>
- Never stimulate changes
- Avoid resistance
- Encourage team collaboration
- Formulate policies without unambiguity
- Decentralized approach
- More visualization of the workflow
- Install limits
- Regular monitoring
- Open for experiments
- Review progress periodically

<b>Original Source : <a href="https://www.taskopad.com/blog/all-need-to-know-about-kanban-board/"> Kanban Board Online </a> </b>
Easy definitions of Module, package and other common web development terms to remember!
Tags: module, javascript, webdev, terminology
Published: 2021-07-15 04:52:04

**1.Module**
It is structured and organised javascript code.It is independent of conflict caused by global or shared variables as code is compartmentalised.

**2.CommonJS Syntax**
It is the syntax such as `const https = require('https')` and `export` used to transfer modules of javascript code in a project. It is mainly used for writing code on server side. 

**3.ECMAScript**
It is the documentation of JavaScript in a more standardised format so that it is easy to implement across different browsers.

**4.Package**
It is a bundle of programs contained in a folder that is described by a package.json file. The file describes programs your project depends upon, their versions and other metadata related to running the project.

**5.DOM**
Document Object Model is a structured tree hierarchy of the HTML elements that comprise a web page. It provides the developer with an interface to manipulate HTML elements or CSS styles or perform a dynamic action when an event occurs on the web page.

**6.Javascript framework**
Js framework uses pre-written code to help speed up the process of writing code. It reduces the time required for writing code such as DOM manipulation or object creation from scratch.

**7.npm**
It is a package manager to install, update or uninstall software programs from its open online registry for building web projects.
How to Make a LinkTree of Your Own Code
Tags: html, css, javascript
Published: 2021-07-15 04:32:25

## What is linktree ?
Linktree works by creating a landing page on their site, which features multiple links to your site. You simply copy and paste your Linktree landing page URL into your Instagram bio to raise awareness of other parts of your site.
### Why should you make your own LinkTree, though?
- No watermark.
- Also why should you pay when you can make it by yourself.
- It's easy to make one.

#### Make one like this 
- Live [Demo](https://amrohan.ml)

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdv7l0g6ue4049d16cr5.png)


Before we begin, you should be familiar with the fundamentals of HTML and CSS.

#### So question is how you do it?
- Simply use html and CSS to make things simple. Although it won't be as dynamic as the original linktree, you may make it so by using a framework like react or nextjs.


#### Steps to create 
1. You can create a whole from scratch or you can use my source code [here.](https://github.com/amrohan/LinkTree-Alternative)
2. Now that you've downloaded the code, all you have to do is alter it to your liking.
3. Simply upload the code to your preferred static hosting platform, such as [netlify](https://www.netlify.com/), [vercel](https://vercel.com/), [github pages](https://pages.github.com), or [cloudflare pages](https://pages.cloudflare.com/).

✨ Please do not hesitate to contact me with any questions [Here](https://t.me/amrohan)
tmux popup windows
Tags: techtalks, tmux, linux
Published: 2021-07-15 04:14:11

---
title: tmux popup windows
published: true
description: 
tags: techtalks, tmux, linux
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pl0xqx7ep90ug81z384f.png
series: tmux
canonical_url: https://waylonwalker.com/tmux-popups/
---


``` bash
# open a popup scratchpad
bind -n M-g display-popup -E "tmux new-session -A -s scratch"
# open my blog in a scratchpad
```

---

Be sure to check out the full youtube playlist and subscribe if you like it.

https://www.youtube.com/playlist?list=PLTRNG6WIHETB4reAxbWza3CZeP9KL6Bkr


{% post https://dev.to/waylonwalker/how-i-navigate-tmux-in-2021-2ina %}

> Also check out this long form post for more about how I use tmux.
LaTeX & Maths: Tags
Tags: codenewbie, latex
Published: 2021-07-15 03:55:24

Hello how are you? :) 

In [this](https://dev.to/latexteada/latex-maths-equation-environment-and-labeling-equations-2j4b) post I tell you the differences of the displayed formulas and how to label equations.

In today's post I tell you how to *tag* an equation, this is like *giving a name to your equation* instead of a number.

We know  that the `equation` environment enumerates our equations, but what if we want to give a name to our equation instead of a number

## `Tags` in Equations
We can use the `\tag{}` command to put a name to our equation. We must put this command inside the `equation` environment 

```LaTeX
\begin{equation}
    \tag{The Name}
    Equation
\end{equation}
```

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4o1vo5fsysfx2rbpxw8.png)

Produces

![Screenshot from 2021-07-06 10-20-37](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2okwj2qf8839ye0r5dd.png)

## Labeling and calling elements

To label we need to put `\label{}` after the `\tag{}` command 

```LaTeX
\begin{equation}
    \tag{my Tag}
    \label{my Label}
    Equation
\end{equation}
```
To call an element, we do it as usual, with `\eqref{}`

![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/993dxe0jx648t9mnt0o7.png)

Produces 

![Screenshot from 2021-07-06 10-35-14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8oc64lafglnao6ak7gn0.png)

Thanks, this is all for today.

The next week I start with operations and commands to create formulas

Do not forget to follow me on Twitter `@latexteada` Greetings
How I learned to code (my entire coding journey) + some tips for the newbie developers
Tags: webdev, beginners, codenewbie, programming
Published: 2021-07-15 03:54:21

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

So it all started in September 2020 when I got in high-school

Our teacher introduced us to C++ and I wrote my first Hello World program

I was amazed by how what I wrote in the code editor was displayed on the console

When I got home that day I went on Google and I started learning more about C++ alone

A few months went by and we were at the end of 2019

I already knew some stuff in C++ because I went to a school contest

Just basic stuff like if, else, while, for loops. Things like that

At the end of 2019 I met with my uncle was is a senior web developer

He advised me to learn more about programming on my own

So the next week I started learning Python on my own from Codecamdey

During that week all I did was code, eat and sleep

At that time I realized that I fell in love with coding

Then after a few more months covid hit and suddenly realized that I have a lot of free time that I'm wasting

So what I did was to go on @freeCodeCamp and learn HTML and CSS

Why?

Because I realized that I want to build stuff that I can see and I couldn't do that with Python

So I taught myself HTML and CSS, built some projects with them, and one day...

I was on a local subreddit with developers when someone reached out to me and said that they want to hire me

That's when I got my first job as a developers

You can read more about that story here 

https://blog.vladpasca.dev/how-i-got-a-job-as-a-developer-at-16-1

So that's what I did for the next 3 months

I learned a little bit of JavaScript, Bootstrap and a lot of HTML and CSS

Then in September school started again and I left that job

At the time I decided to take some time off coding and focus on high-school

But after one month we went back home and I once again had too much free time

So I went back and revisit HTML and CSS

I decided to get this book to learn these 2 again and learn JavaScript the right way

https://gumroad.com/a/416027763

P.S: if you want to learn web dev, use this

So that's what I did for the next months until October 22 when I joined Tech Twitter

I joined this community just to document my journey but I soon realized that I love creating content so I started doing that

And from there my entire journey is on my Twitter profile

Right now I'm building projects with JavaScript and I'll soon start learning React

So, as I promised here are some tips for the newbie developers out there

1. Stay consistent
2. Choose one resource and stick with that
3. Learn the fundamentals first
4. Build projects

### The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5) ._
Understanding the array methods Array.some() and Array.every() in JavaScript 
Tags: javascript, tutorial, webdev
Published: 2021-07-15 03:43:31

There are lot of scenarios when we have an array of items and we need to check whether every item in that array satisfy a particular condition. 

We might think that, why not use a for loop and flag to check this? 

But there is an easier and much cleaner way to achieve this using Array.every().

Similarly, if we need to check if at least **some** items in an array satisfy a condition, we can use the Array.some() method. 

Let us understand this better with some examples - 

```javascript
// We have a sample Array of persons from country ABC
const sampleArray = [
  {
    name: "John",
    occupation: "Doctor",
    age: 31,
    sex: "male",
    country: "ABC"
  },
  {
    name: "Jane",
    occupation: "Doctor",
    age: 26,
    sex: "female",
    country: "ABC"
  },
  {
    name: "Roger",
    occupation: "Engineer",
    age: 28,
    sex: "male",
    country: "ABC"
  },
  {
    name: "Riya",
    occupation: "Engineer",
    age: 32,
    sex: "female",
    country: "ABC"
  }
]

// I want to find out if all of them are from country "ABC"

const countryCheck = sampleArray.every(person => {
  return person.country === "ABC"
})
console.log("All are from the same country? ", countryCheck)

// I want to check if all are engineers
const engineerCheck = sampleArray.every(person => {
	return person.occupation === "Engineer"
})
console.log("All are Engineers? ", engineerCheck)

// I want to check if at least some women are engineers
const womenEngineers = sampleArray.some(person => {
	return person.occupation === "Engineer" && person.sex === "female"
})
console.log("Do we have at least some women engineers?", womenEngineers)

// I want to check if any of them are advocates
const lawyerCheck = sampleArray.some(person => {
return person.occupation === "Lawyer"
})
console.log("Do we have any lawyers?", lawyerCheck)
```

Output
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymx1h6qlgbbjenf2vtjf.png)


##Syntax of Array.every() and Array.some()

```javascript
// Syntax
Array.every(callback)

const callback = (currentElement, index, array) => {
  // currentElement - current item in the array that we are iterating over over
  // index - index of the current item - optional
  // array - array that we are iterating over - optional
} 

// example usage
Array.every((currentElement) => {
	return currentElement > 1
})
``` 
```javascript
// Syntax
Array.some(callback)

const callback = (currentElement, index, array) => {
  // currentElement - current item in the array that we are iterating over over
  // index - index of the current item - optional
  // array - array that we are iterating over - optional
} 

// example usage
Array.some((currentElement) => {
	return currentElement > 1
})
``` 

Hope you guys learned something new today. Keep coding!!
Top 3 Ways to align item to center ( responsively )
Tags: css, webdev
Published: 2021-07-15 03:40:45

Hello 👋 Guys This is my first blog I am writing hope you found it useful and helpful. So in this blog we are going to learn how to center any item to the center responsively.

The most popular way to center is using flex in which you just need 3 lines of code to center it 

> Number One:-

```
 .center-item {
    display: flex;
    align-item: center;
    justify-content: center;
 }
```
This is method just uses 3 lines of CSS codes and BOOM! 🌟 your item is now centered Horizontally and vertically in the webpage ( responsively )

Now second way is using position absolute method in this method the parent element should have `position: relative` and then the item you are centering should have `position: absolute` to center it 

> Number Two:

```
 .parent-element {
    position: relative;
 }

 .center-item-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
 }
```

👆 Here you see that the parent element have position relative to it and the center item ( the item we need to center ) has position absolute if you not put this then it will not work

> Now if you want to see how to center the item to center by using just *2* lines of codes, then here it is 😊

```
 .center-item-container {
   display: grid;
   place-items: center;
 }
```

Thankyou!🥰 For Giving your time and reading this blog hope you found it useful i also have my own Youtube channel named Coding Fire please subscribe -

https://youtube.com/c/Codingfire?sub_confirmation=1
Dependency Inversion Principle
Tags: beginners, csharp
Published: 2021-07-15 00:34:08

Dependency Inversion Principle (DIP for short) states:

> One should depend upon abstractions and their concrete implementation.

The advantage of Dependency Inversion is that the classes do not need to know about the concrete implementation, just its abstraction.

```csharp
public class UserFileRepository
{
	void SaveUser(User user);
}

public class UserService
{
	public void CreateUser(User user)
	{
		UserFileRepository repository = new UserFileRepository();
		repository.SaveUser(user);
	}
}
```

The code above is totally fine, but it does not respect the Dependency Inversion Principle. The User class know about the concrete implementation of the `UserFileRepository`, making it too dependent, if anything needs to be changed in `UserFileRepository`, the `UserService` class will need to be changed.

We can solve this issue by changing the concrete reference to an `interface`.

```csharp
public interface IUserRepository
{
	void SaveUser(User user);
}

public class UserFileRepository : IUserRepository
{
	public void SaveUser(User user)
	{
		// Saves User to a file
	}
}

public class UserService
{
	private readonly IUserRepository _userRepository;

	public UserService(IUserRepository userRepository)
	{
		_userRepository = userRepository;
	}
	
	public void CreateUser(User user)
	{
		_userRepository.SaveUser(user);
	}
}

void Main()
{
	IUserRepository repository = new UserFileRepository();
	UserService userService = new UserService(repository);
	User newUser = new User();
	userService.CreateUser(newUser);
}
```

Now the `UserService` is not dependent on the concrete implementation of `UserDBRepository` but on its contract `IUserRepository`.
If the application needs to change from saving to a file and save it to a database, we can simply create another concrete implementation of the `IUserRepository` and pass it as an argument to the `UserService`.

```csharp
public interface IUserRepository
{
	void SaveUser(User user);
}

public class UserFileRepository : IUserRepository
{
	public void SaveUser(User user)
	{
		// Saves User to a file
	}
}

public class UserDBRepository : IUserRepository
{
	public void SaveUser(User user)
	{
		// Saves User to a database
	}
}

public class UserService
{
	private readonly IUserRepository _userRepository;

	public UserService(IUserRepository userRepository)
	{
		_userRepository = userRepository;
	}
	
	public void CreateUser(User user)
	{
		_userRepository.SaveUser(user);
	}
}

void Main()
{
	// Changed from File to DB repository
	IUserRepository repository = new UserDBRepository();
	UserService userService = new UserService(repository);
	User newUser = new User();
	userService.CreateUser(newUser);
}
```

In this example, this code can be changed even further, changing the `UserService` to have its interface and implement it.
Create Blazor Pie, Pyramid, and Funnel Charts in Just 10 Minutes
Tags: blazor, charts, tutorial, webdev
Published: 2021-07-15 03:21:07

Learn how easily you can create and configure Syncfusion [Blazor accumulation charts](https://www.syncfusion.com/blazor-components/blazor-charts "Blazor accumulation charts") in a Blazor WebAssembly app using Visual Studio 2019.

In this video, you will learn how to add a simple Blazor accumulation chart to a Blazor WebAssembly app. You will see how to populate list data and set series types to charts. You will also learn how to add legends and enable data labels and tooltips in Blazor accumulation charts. 

Explore our tutorial videos: https://bit.ly/36FAgBD

Download example from GitHub link: 
https://bit.ly/3xES1NA

TRIAL LICENSE KEY:
If you need a trial license key, you can start your Blazor trial from under your Syncfusion account. Then, you can obtain your trial license key from the downloads page.
https://www.syncfusion.com/account/manage-trials/start-trials

Check if you are eligible for a free license for all Syncfusion products on our Community License page.

https://www.syncfusion.com/products/communitylicense

Product overview: https://www.syncfusion.com/blazor-components/blazor-charts

Documentation: https://bit.ly/3wEw1kD

{% youtube ol8c_iH7ebk %}
3 DAY BOOT CAMP. Become a junior software developer. 
Tags: javascript, html, css, node
Published: 2021-07-15 03:20:38

Learn Html5,CSS,Javascript, nodejs this summer. Click
Reserve a space! 
https://chat.whatsapp.com/CqHg2Yz0QgkEwUQIVAkFZc
This program costs three thousand naira only. Limited space available


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twb6p7wi57fy1asxqzhh.jpg)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/soarj6cyfqij11rko9i8.jpg)
How to implement copy and paste in a web application
Tags: html, css, react, javascript
Published: 2021-07-15 03:05:04

   Ever wondered how to implement copy and paste functionality in any of your web applications?
      yes , I have
It is pretty much easier than it sounds , we only have to access the navigator.clipboard object to perform this.

1 copy

navigator.clipboard.writeText(e.target.value);

And that's all you need to copy whatsoever to the browsers clipboard

2 paste

This is almost same as the previous
navigator.clipboard.readText().then((text)=>console.log(text)) 
and there you have it , what you copied in your browsers console.

Easy peazy!!!