teleren/devto huggingface dataset:
Backend Essentials-Jack of all trades OR King of one?
Tags: backendessentials, webdev, series, course
Published: 2021-05-11 09:29:11

### 1. Overview

> This series is all about making the basics Web Development strong. This series is not a tutorial about NodeJs, React, Django or any other fancy frameworks/libraries, although some articles may contain code written using these frameworks/libraries.

### 2. What this series is about 🤔🤔?

> This series explores basics of different skills/fields of back end engineering. For example "what is UPD and TCP?", "what is HTTP 1.0, 2.0 and 3.0?, what is HTTPS?", rather than talking about "How to use simple-peer and socket.io for video chat application" we will explore "what is WebRTC?", "What are proxies and reverse-proxies?" and many more...

### 3. Intended audience

> A. Much of the content in this series is for **Everyone**, some articles may contain codes written in JavaScript using node, express...
> **B. If you have tasted some of the back end engineering and want to make the basics more strong and also want to choose a particular field to dive deep into it, than this series is very helpful for you.**

### 4. What this series do not cover??

> Throughout this series we will focus mainly on theoretical aspects. This series does not focus on teaching any back end frameworks or libraries, I will try to provide codes wherever possible but will not be explained deeply it would be the reader's choice to get basic understanding of back end frameworks and libraries used in that code.

### 5. Different Back End Engineering Skills

> Format=> Fields: Some topics in those fields
> A. Communication Protocols: TCP, UDP, HTTP, WebSockets...
> B. Servers: Dynamic and Static WebServers, ETags, Caching, ...
> C. Database Engineering: Relational, NoSQL, ACID, ...
> D. Proxies: Proxy, Reverse Proxy, Load Balancers, ...
> E. Caching: Staefull, stateless, ...
> F. Messaging Systems
> G. Web Frameworks: Express, Django, Rest API'S ...
> H. Message Formats: JSON, ...
> I. Security: TLS, Encryption, Firewalls, ...
> and others...

### 6. Jack of all trades OR King of one??

> You can either be an integrator knowing something of every thing and your work is to integrate different stuffs together to make something useful and stable. But if someone wants to make a new database according to their needs they will not hire you they will hire a database engineer specialized in that field. In short you could either know some about every stuff maybe the "The Full Stack Developer" or Choose one field become expert(⚠️) and be known for that field.

### 7. Conclusion
> Through this series we will get into basics of most of the fields discussed in *point 5* and your work is to note everything you like and get deep into those things. *I will post an article weekly on this series.*

---
<p> [1]: <a href="https://youtu.be/V3ZPPPKEipA">How to Become a Good Backend Engineer (Fundamentals)[Hussein Nasser]</a></p>
---
Live pair programming: Python Flask + Pytest
Tags: python, programming, webdev
Published: 2021-05-11 09:27:05

---
title: Live pair programming: Python Flask + Pytest
published: true
description: 
tags: python, programming, webdev
//cover_image: https://direct_url_to_image.jpg
---

I've been running [live pair programming session](https://code-maven.com/live) for some time now. In this session I worked with Rachel Normand on her workout application. It has a back-end written in Python Flask and uses SQLAlchemy with an SQLite database.

In this episode we started to implement one of the API routes then went on writing tests.


{% youtube tSf2G4W1tcA %}

The whole "series" with Rachel can be found [here](https://code-maven.com/workout-app)
PHP MySQL Country State City Dropdown using Ajax Example Tutorial

Tags: php, laravel, programming, tutorial
Published: 2021-05-11 09:05:24

<p>Today, I will learn you how to engender php mysql country state city dropdown utilizing ajax.dynamic country state city database utilizing ajax in mysql php. in this tutorial, we will show you how to dynamically populate country state city dropdown list in php utilizing jquery ajax from mysql database.</p>

<p>We will guide you step by step on how to populate country state city in dropdown list onchange in PHP from MySQL utilizing Ajax or populate the first, second, and third dropdown predicated on the first, and second cull of dropdown in PHP. As well as learn, how to fetch data from the database in the dropdown list in PHP utilizing jQuery ajax.</p>

<p>I will dependent country state city dropdown utilizing ajax in PHP MySQL, we will show states and cities in the dropdown list predicated on culled country and verbally express value in PHP utilizing ajax from the database.</p>
<h3>Country State City Dropdown List in PHP MySQL using Ajax</h3>
<p>Now, follow below given simple and facile steps to retrieve and exhibit country, state, and city dropdown list onchange in PHP utilizing jQuery ajax from MySQL database:</p>
<ul>
   <li><strong>1</strong>Create Country State City Table</li>
   <li><strong>2</strong>Insert Data Into Country State City Table</li>
   <li><strong>3</strong>Create DB Connection PHP File</li>
   <li><strong>4</strong>Create Html Form For Display Country, State and City Dropdown</li>
   <li><strong>5</strong>Get States by Selected Country from MySQL Database in Dropdown List using PHP script</li>
    <li><strong>6</strong>Get Cities by Selected State from MySQL Database in DropDown List using PHP script</li>
</ul>

<strong class="step">Step 1: Create Country State City Table</strong>
<p>In this step,open your database and run the following sql queries to engender country, state and city table into the database.</p>
<pre class="prettyprint">
CREATE TABLE `countries` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
</pre>
Next, Run this following sql query to engender state table into your database:
<pre class="prettyprint">
CREATE TABLE `states` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `country_id` int(11) NOT NULL,
 `name` varchar(250) COLLATE utf8_unicode_ci NOT NULL,
 `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
</pre>
<p>Here, Run this following sql query to engender city table into your database.</p>

if you want to see full example follow bellow link..

https://codingtracker.blogspot.com/2021/05/php-mysql-country-state-city-dropdown.html
Angular 6 ElasticSearch example – simple Full Text Search
Tags: angular, elasticsearch, fulltextsearch
Published: 2021-05-11 08:52:56

https://grokonez.com/elasticsearch/angular-6-elasticsearch-example-simple-full-text-search

Angular 6 ElasticSearch example – simple Full Text Search


In the previous posts, we had know how to get All Documents in Index and show them with pagination. This tutorial show you way to implement a simple Full Text Search in an Angular 6 Application.

Related Posts:
- <a href="https://grokonez.com/frontend/angular/angular-6-elasticsearch-example-quick-start-how-to-add-elasticsearch-js">Angular 6 ElasticSearch – Quick Start – How to add Elasticsearch.js</a>
- <a href="https://grokonez.com/elasticsearch/angular-6-elasticsearch-example-add-document-to-index">Angular 6 ElasticSearch example – Add Document to Index</a>
- <a href="https://grokonez.com/elasticsearch/angular-6-elasticsearch-example-get-all-documents-in-index">Angular 6 ElasticSearch example – Get All Documents in Index</a>
- <a href="https://grokonez.com/elasticsearch/angular-6-elasticsearch-example-documents-pagination-with-scroll">Angular 6 ElasticSearch example – Documents Pagination with Scroll</a>

<!--more-->

Elasticsearch Tutorials:
- <a href="https://grokonez.com/elasticsearch">Elasticsearch Overview</a>
- <a href="https://grokonez.com/elasticsearch/elasticsearch-filter-vs-query-context-overview">ElasticSearch Filter vs Query</a>
- <a href="https://grokonez.com/elasticsearch/elasticsearch-full-text-query-basic-queries">ElasticSearch Full Text Queries – Basic</a>

<h2>Elasticsearch full text Search</h2>
<h3>Add ElasticSearch to Angular 6 Project</h3>
Please visit <a href="https://grokonez.com/frontend/angular/angular-6-elasticsearch-example-quick-start-how-to-add-elasticsearch-js">Angular 6 ElasticSearch – Quick Start – How to add Elasticsearch.js</a> for details.

With the post, you will know how to:
- Add ElasticSearch to Angular 6 Project
- Use it in the project
<h3>Add Document & Get All Documents in Index</h3>
- Add Document:
>> Please visit <a href="https://grokonez.com/elasticsearch/angular-6-elasticsearch-example-add-document-to-index">Angular 6 ElasticSearch example – Add Document to Index</a>.

<img src="https://grokonez.com/wp-content/uploads/2018/08/angular-6-elasticsearch-example-add-document-to-index-add-document.png" alt="angular-6-elasticsearch-example-add-document-to-index-add-document" width="397" height="628" class="alignnone size-full wp-image-14185" />

- Get All Documents:
>> Please visit <a href="https://grokonez.com/elasticsearch/angular-6-elasticsearch-example-get-all-documents-in-index">Angular 6 ElasticSearch example – Get All Documents in Index</a>.

<img src="https://grokonez.com/wp-content/uploads/2018/08/angular-6-elasticsearch-example-show-documents-in-index-result.png" alt="angular-6-elasticsearch-example-show-documents-in-index-result" width="419" height="609" class="alignnone size-full wp-image-14228" />

More at:

https://grokonez.com/elasticsearch/angular-6-elasticsearch-example-simple-full-text-search

Angular 6 ElasticSearch example – simple Full Text Search
_b00t_ - a startup environment
Published: 2021-05-11 08:47:40

The idea behind _b00t_ is a framework to build a startup properly and provide tooling & infrastructure, devops pipeline, vs code environments, "startup kit", mostly python & typescript with optional libraries such as ai, crypto, ecommerce, etc. necessary for building *and* testing *and* deploying those.

I'm still very early into the process, I'm presently building heavily into the Azure Cloud,  OpenID and the authentication middleware in Vue.JS, using the Vittesse framework.  The final product can give you a Vue.JS interface to push a button that runs an authenticated function, and then builds a plurality of messaging layers MQTT, Redis, etc. At least that's the dream.

Presently the docker and fzf menuing system is coming along nicely.  This is a massive cloud-stack span of knowledge will ultimately come together in a crescendo of pre-configured bash scripting & menuing environment, thereby compressing the first 100 hours of action required for "creating a startup" into a few commands and reducing operational costs substantially by starting from a functional template.  

http://github.com/elasticdotventures/_b00t_
pointers
Published: 2021-05-11 08:32:55

#pointers:

A pointer is a variable whose value is the address of another variable, i.e., direct address of the memory location. Like any variable or constant, you must declare a pointer before using it to store any variable address. The general form of a pointer variable declaration is −

syntax:

type *var-name;

>example:
include <stdio.h>

int main () {

   int  var = 20; 
   int  ip;        

   ip = &var;  

   printf("Address of var variable: %x\n", &var  );

   /* address stored in pointer variable */
   printf("Address stored in ip variable: %x\n", ip );

   /* access the value using the pointer */
   printf("Value of *ip variable: %d\n", *ip );

   return 0;
}

#Types of Pointers

There are different types of pointers which are as follows −

    Null pointer

    Void pointer

    Wild pointer

1.Null Pointer:

You create a null pointer by assigning the null value at the time of pointer declaration.

This method is useful when you do not assign any address to the pointer. A null pointer always contains value 0.

syntax:

Begin.
   Declare a pointer p of the integer datatype.
      Initialize *p= NULL.
   Print “The value of pointer is”.
      Print the value of the pointer p.
End.

>example:
include <stdio.h>
int main() {
   int *p= NULL;//initialize the pointer as null.
   printf("The value of pointer is %u",p);
   return 0;
}

2.Void Pointer:

It is a pointer that has no associated data type with it. A void pointer can hold addresses of any type and can be typecast to any type.

It is also called a generic pointer and does not have any standard data type.

It is created by using the keyword void.

syntax:
Begin
   Declare a of the integer datatype.
      Initialize a = 7.
   Declare b of the float datatype.
      Initialize b = 7.6.
   Declare a pointer p as void.
   Initialize p pointer to a.
   Print “Integer variable is”.
      Print the value of a using pointer p.
   Initialize p pointer to b.
   Print “Float variable is”.
      Print the value of b using pointer p
End.

>example:
include<stdlib.h>
int main() {
   int a = 7;
   float b = 7.6;
   void *p;
   p = &a;
   printf("Integer variable is = %d", ( (int) p) );
   p = &b;
   printf("\nFloat variable is = %f", ( (float) p) );
   return 0;
}

3.Wild Pointer:

Wild pointers are also called uninitialized pointers. Because they point to some arbitrary memory location and may cause a program to crash or behave badly.

syntax:
include <stdio.h>
int main(){
   int *p; //wild pointer
   printf("\n%d",*p);
   return 0;
}

>example:
include <stdio.h>
int main(){
   int *p; //wild pointer
   printf("\n%d",*p);
   return 0;
}
Overview of the best FTP client solutions for Mac in 2021
Published: 2021-05-11 08:26:52

FTP is a very useful protocol for transferring files over the Internet. It is often used by developers to make changes to servers and that's why there is so much FTP software for Mac available. Even if you've never used Mac FTP tools before, you shouldn't have any problem the first time you use them. However, let's take a look at one of the best FTP clients - Commander One.  The app has many useful and important features for perfect file management, supporting protocols such as FTP / SFTP / FTPS and WebDAV, as well as cloud services. You can also check out a list of the best FTP clients and learn more about them in this article.
https://mac.eltima.com/best-ftp-mac.html
First Post
Tags: machinelearning
Published: 2021-05-11 08:24:26

*asterisks* or _underscores_
**double asterisks** or __double underscores__

[I'm an inline link](https://dev.to/)
      ## Table Of Contents
        * [Chapter 1](#chapter-1)
        * [Chapter 2](#chapter-2)

      ### Chapter 1 <a name="chapter-1"></a>
    
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2a7bm4llij8lmxcfc0h.gif)
What profession would you change to?
Tags: watercooler, discuss, career
Published: 2021-05-11 08:22:37

---
title: What profession would you change to?
published: true
description: If you could change your career to anything, what would it be?
tags: watercooler, meta, discuss, career
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/at7k8spmqypgm9xtnusq.jpg
---

## It's one of those days... 
My motivation is low and I'm thinking of changing my profession. I tent to make that joke: __"this internet thingy will not succeed and than I'll become a carpenter"__.

---
But realistically I would become a __Technical Recruting Consultant__. The reason is simple. I gained a lot of knowledge in that area. Also I believe I can do something good with it. Fighting for diversity & inclusion. Instead of being a rolemodel. Advise companies on: *how best to hire a hetrogenic mass of developers*. And ensure that more equal opportunities are being created.

---

### Do you know those days? What profession would you change to and why?
Postman error: unable to verify the first certificate
Published: 2021-05-11 08:17:05

When requesting the new token for OAuth2 in postman there's an error showing in the console log as below

```console
Error: unable to verify the first certificate
```

To fix the error, just turn off the highlight option 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63hnp24qt3c5ep6durip.PNG)
Character Arrays and Strings
Published: 2021-05-11 08:16:35

#Arrays:
An array is a collection of data items, all of the same type, accessed using a common name. A one-dimensional array is like a list; A two dimensional array is like a table; The C language places no limits on the number of dimensions in an array, though specific implementations may.

1-Dimensional array: It is a linear array that stores elements in a sequential order. Let us try to demonstrate this with an example: Let us say we have to store integers 2, 3, 5, 4, 6, 7. We can store it in an array of integer data type. The way to do it is:

syntax:
 dataType nameOfTheArray [sizeOfTheArray];  
int Arr[6];

>example:
dataType nameOfTheArray [ ] = {elements of array };


   int Arr [ ] = { 2, 3, 5, 4, 6, 7 };

Multidimensional array: It can be considered as an array of arrays. The most commonly used multidimensional array is 2-dimensional array. It stores the elements using 2 indices, which give the information, in which row and which column a particular element is stored. A 2D array is essentially a matrix.

Declaration:

char A[ 3 ] [ 2 ] ;

 >example:
include<stdio.h>
include<iostream>

using namespace std;
int main( ) {
    int Arr[6]; // declaring Arr
    Arr[ ] = { 2, 3, 5, 4, 6, 7 }; // Initializing Arr by storing some elements in it.
    char A [ 3 ] [ 2 ]; // declaring a 2D array
    A [ 3 ] [ 2 ] = { { ‘P’, ‘I’} , {‘O’, ‘M’ } , {‘G’, ‘D’} } ;

 
    printf(“The third element of Arr is\n ”,  Arr[ 2 ]);

   
   for (int i = 0; i < 6 ; i ++ )
       printf(“%d “, Arr[i]);
   printf(“\n”);
   printf(“All the elements of 2D array A[ ][ ] are : \n”);

   for( int i = 0 ; i < 3; i++ ) {
      for(int j= 0 ; j < 2 ; j++ ) {
            printf(“%c “, A[i][j]);
   }
   printf(“\n”);
  }
  return 0;
}

#String:
String is a sequence of characters that are treated as a single data item and terminated by a null character '\0'. Remember that the C language does not support strings as a data type. A string is actually a one-dimensional array of characters in C language. These are often used to create meaningful and readable programs.

>example and syntax:
Declaring and Initializing a string variables:

char name[13] = "StudyTonight";        
char name[10] = {'c','o','d','e','\0'};      

char ch[3] = "hello";    
char str[4];
str = "hello"; 

String Input and Output:
%s format specifier to read a string input from the terminal.

But scanf() function, terminates its input on the first white space it encounters.


edit set conversion code %[..] that can be used to read a line containing a variety of characters, including white spaces.

The gets() function can also be used to read character string with white spaces.

>example:

char str[20];
printf("Enter a string");
scanf("%[^\n]", &str); 
printf("%s", str);
React Fragment VS Div
Published: 2021-05-11 08:00:37



##Div tag
```html
<div>
   Hello world
</div>
```

A div has the prototype chain HTMLDivElement - HTMLElement - Element - Node - EventTarget, whereas a document-fragment has DocumentFragment - Node - EventTarget. This means a div has more methods and properties available (like innerHTML).



##React Fragment Tag
```html
<React.Fragment>
   Hello world
</React.Fragment>
```

- The fragments eliminate the wrapper div which can cause problems with invalid HTML and with styling of the components plus the fact that they are faster and the DOM is less cluttered, I’d say they are worth using.

###Short syntax:

```html
<>
   Hello world
</>
```

You can't add properties like key with this syntax.

##React Fragment advantages
- Code readability
- Added features not possible before with JSX
- Better semantic jsx markup. Wrapper elements are used when needed not because they are forced to.
- Less overall dom markup (increased render performance and less memory overhead)

###Conclusion:

It’s a tiny bit faster and has less memory usage (no need to create an extra DOM node). This only has a real benefit on very large and/or deep trees, but application performance often suffers from death by a thousand cuts. This is one cut less.
Some CSS mechanisms like Flexbox and CSS Grid have a special parent-child relationship, and adding divs in the middle makes it hard to keep the desired layout while extracting logical components.
All Clusters Must Serve, All Clusters Must Die
Tags: cloudnative, serverless, bigdata
Published: 2021-05-11 07:52:33

When I started my career at professional development, *real servers* came from Sun, or IBM, or maybe Silicon Graphics if you were cool. 

Much has changed since (and mostly for the better! forget nostalgia), but a lot of the hype around big data and scale didn't quite materialize yet. I think we can do some things about it - [here's my take at it](https://elad-rosenheim.medium.com/all-clusters-must-die-9a332bd93ccc).
webpack 5 - lazy load library in application
Tags: webpack, javascript
Published: 2021-05-11 07:48:57

Have you ever seen your app load very slow, just because you added a big, 3rd party library? A neat solution for that kind of case, it's to use lazy load - delaying a download of big chunks of code. This approach allows having some part of the application already working, while the rest is being loaded.

# non lazy-load 

example of application loading a big, pdf before starting the application:

```js
import { PDFDocument } from "pdf-lib"; // synchronous import

// ...

pdfButton.addEventListener("click", async () => { 
  const pdfDoc = await PDFDocument.create();
  const page = pdfDoc.addPage([350, 400]);
  page.moveTo(110, 200);
  page.drawText("Hello World!");
  const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
  document.getElementById("pdf").src = pdfDataUri;
});
```

# lazy load in webpack
```js
import(/* webpackChunkName: "pdf-lib" */ "pdf-lib").then(({ PDFDocument }) => {
  // ..

  pdfButton.addEventListener("click", async () => {
    const pdfDoc = await PDFDocument.create();
    const page = pdfDoc.addPage([350, 400]);
    page.moveTo(110, 200);
    page.drawText("Hello World!");
    const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
    document.getElementById("pdf").src = pdfDataUri;
  });
});
```

`import()` is a dynamic import from javascript. Webpack translates `"pdf-lib"` to a new asset it creates dynamically. `/* webpackChunkName: "pdf-lib" */` allow us to name the new asset. When I was removing this line, my lazy-loaded chunk was called `55.js` - not the best name if ever somebody would have to troubleshoot some issues around it.

# Interested in more?

* [webpack video course](https://bit.ly/WebpackCourse)
* repository where I played with this example - https://github.com/marcin-wosinek/webpack-pdf-example
* video where I go through the example:
{% youtube jhBmOugUBg0 %}