teleren/devto huggingface dataset:
Application Scenarios of Pylon CLI —— A Client Tool that Controls the Dev Environment Locally
Tags: programming, productivity, devops, javascript
Published: 2022-01-06 10:06:56

As a front-end engineer, Node is an essential development tool for java. Currently, most projects I am in charge of are based on Node 12.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xy1ob80ej0sb4cxrwtz.png)
But currently, I am designated for a new project that requires building its own blog site based on Javascript, I chose gatsby-starter-blog as the frame to develop, which requires Node 14. The problem is that this version will conflict with other projects that I manage. I started brainstorming and searching for solutions.

At this time, I thought of TeamCode, a cloud collaborative development platform that I used before. It provides some high-performance and lightweight tools. I just thought of their official updates on Facebook which notifies me that the product Pylon has a new tool called Pylon CLI, which seems has features that could satisfy my demands. 

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

I went to its official website and started to check the documents of Pylon CLI: It is a client tool that controls the Pylon development environment locally. You can build a development environment locally through the Git repository address and manage all locally created development environments.

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

Then I started to download and install the CLI according to the guidance, and created the latest version of Node 16.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yj98dgpnxoiiw3utwvts.png)

Download Node 16;
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lti9v20nyk8nqc4c58k4.png)

And created gatsby-starter-blog successfully.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27ovd9pvv6g8myfr9hb9.png)

Open the gatsby-starter-blog with VSCode.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yd9w5wa7dfi9tpi6bopz.png)

In this way, I ran and started gatsby-starter-blog on your computer without worrying about environmental conflicts or coordination issues.

For most developers, the local computing power is sufficient, and there is no additional cost to set up a cloud-based development environment. However, there will be some adaptation and compatibility problems in the local development environment. The most obvious issue is that there is no environment isolation, and the versions of dependencies required by different projects are inconsistent, resulting in the failure to run projects. Pylon CLI is designed to solve these problems. It can build and manage multiple local development environments quickly. Different sub-development environments are isolated from each other, meeting the requirements of the operating environment for different projects, that's the reason I chose it.
JavaScript
Tags: javascript, programming
Published: 2022-01-06 09:18:19


**what ES6 features did you use?**
	
	Some of common feature did i use :

	(i) Default parameters
	(ii)Handelig parameters extended
	(iii)Promises
	(iv)Classes
	(v)Modules
	(vi)Collectiontions


**What are the differences between var, let, and const? **

Let and const are block scope while var is global scope.
Var and let can be updated but const never can be updated.


**Why will you use default parameters?**

We can use default parameters when our function initializes with default value if no value or undefined is passed.


**
How does the Spread operator work?**

The spread operator (...) is used to get all the elements of an array. I.e.
Const numbers = [73, 67, 69, 79, 90];


** Difference between class and object?**

 Class is a building block that leads to object-oriented-programming. It is a user defined data type.An object is the instance of classes.object has a physical existence.


**How does inheritance work in JavaScript?**
Prototypes are the functionality by which javascript inherits features from one place to another place.
Mezon PHP Framework : results of the 2021 year
Tags: php, framework, microservices, router
Published: 2022-01-06 09:52:28

Hi all! New Year and Christmas have passed and now is a good time to remind all achivements within the [Mezon PHP Project](https://github.com/alexdodonov/mezon) and think what to do in 2022.

Let's start!

1. Mezon PHP Framework have gathered about 100 more stars (spread on different packages) on github.com Hope next year will give us at least 150 new stars.

2. Unit-test were improved and made more stable. Now we have 1220 unit-tests wich gives us 98% of code coverage.

3. Mutation testing was implemented. MSI is rather low (about 57%), but it will grow.

4. One new developer have joined the project and now he develops [Mezon CLI tool](https://github.com/alexdodonov/mezon-cli).

5. Here is the TOP-10 of articles from this blog:

- [New PHP router wich is 30 to 50 times faster then Laravel router](https://dev.to/alexdodonov/new-php-router-wich-is-30-to-50-times-faster-then-laravel-router-2o97)
- [New PHP framework for creating microservices](https://dev.to/alexdodonov/new-php-framework-for-creating-microservices-3ljo)
- [New PHP router wich is 7 to 15 times faster then Symfony router](https://dev.to/alexdodonov/new-php-router-wich-is-7-to-15-times-faster-then-symfony-router-2o5c)
- [New php router is 25 times faster then Klein router](https://dev.to/alexdodonov/new-php-router-is-25-times-faster-then-klein-router-4ap0)
- [Real life comparison of Symfony router and Mezon router](https://dev.to/alexdodonov/real-life-comparison-of-symfony-router-and-mezon-router-1hb5)
- [Mezon PHP Router is up to 82 times fatser then Bramus Router](https://dev.to/alexdodonov/mezon-php-router-is-up-to-82-times-fatser-then-bramus-router-4obn)
- [New benchmark shows that Mezon PHP Router is up to 60 times faster then Slim one](https://dev.to/alexdodonov/new-benchmark-shows-that-mezon-php-router-is-up-to-60-times-faster-then-slim-one-130o)
- [POP3 PHP Client](https://dev.to/alexdodonov/pop3-php-client-c5h)
- [Benchmark of PHP Altorouter](https://dev.to/alexdodonov/benchmark-of-php-altorouter-3k12)
- [PSR-7 routes processing in Mezon Router](https://dev.to/alexdodonov/psr-7-routes-processing-in-mezon-router-3gi4)

And what is next?

First of all - **I want to find a couple of new developers for this project. If you want to join the project - just contact with me.** You can choose any package of [these ones](https://github.com/alexdodonov?tab=repositories). You can implement new featuers, write unit-tests or update documentation. Any help will be appreciated )

And certanly me and the team will implement new features and new code wich you can use in your PHP projects )

Good luck in a new 2022 )
Build a Video Conference App from Scratch using WebRTC,Websocket,PHP +JS Day 1
Tags: webdev, webrtc, php, javascript
Published: 2022-01-06 09:46:55

In this video we'll cover creating the necessary files and folder for our project.

{% youtube 9emSlybt7ZU %}

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Quick Start into OpenStack on AWS
Tags: openstack, terraform, aws, devops
Published: 2022-01-06 09:45:17

Want to install OpenStack in just one click on top of AWS/own-premises? 

Want to kickstart your carrier on OpenStack. Know more about OpenStack services. Also, set up a mini-environment using terraform.

https://faun.pub/quick-start-into-openstack-on-aws-b66c2edad95a
Some new java code
Published: 2022-01-06 09:33:50

Here is some new java code to check which is a leap year

	// Method to check leap year
	public static void isLeapYear(int year)
	{
		// flag to take a non-leap year by default
		boolean is_leap_year = false;

		// If year is divisible by 4
		if (year % 4 == 0) {

			// To identify whether it
			// is a century year or
			// not
			if (year % 100 == 0) {
			
				// Checking if year is divisible by 400
				// therefore century leap year
				if (year % 400 == 0) {
					is_leap_year = true;
				}

				else {
					is_leap_year = false;
				}
			}

			// Out of if loop that is Non century year
			// but divisible by 4, therefore leap year
			is_leap_year = true;
		}

		// We land here when corresponding if fails
		// If year is not divisible by 4
		else

			// Flag dealing- Non leap-year
			is_leap_year = false;

		if (!is_leap_year) {
			System.out.println(year + " : Non Leap-year");
		}

		else {
			System.out.println(year + " : Leap-year");
		}
	}

	// Main Driver Code
	public static void main(String[] args)
	{
		// Calling our function by
		// passing century year
		isLeapYear(2022);

		// Calling our function by
		// passing Non-century year
		isLeapYear(2024);
	}
}
Create a Modal with Tabs in React using Reach UI
Tags: react, javascript, webdev, beginners
Published: 2022-01-06 09:29:06

Get started with Reach UI by creating a Dialog with Tabs inside it. Reach UI has the goal to "become the accessible foundation of your React-based design system." This video is a code-along introduction to the UI framework.

{% youtube 9kYsUjb5qd4 %}
Bubble Sort - Typescript
Tags: typescript, programming, beginners, algorithms
Published: 2022-01-06 08:54:52


Bubble sort algorithm is simple and easy. In bubble sort every pair of adjacent value is compared and swap if the first value is greater than the second one. By this with every iteration the greatest value goes to the right side making it ascending order.

![Bubble Sort](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asfmbhsv8q0r7ltfc2sk.gif)

## Time Complexity
 - Best: O(n)
 - Average: O(n^2)
 - Worst: O(n^2)

## Code

```
const bubbleSort = (arr: number[]): number[] => {
    const len = arr.length;

    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len; j++) {
            if (arr[j] > arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
            }
        }
    }

    return arr;
}

bubbleSort([5, 3, 1, 4, 6])
```

## Output

```
Output: [1, 3, 4, 5, 6]
```

Here how the code is working

- Iteration 0 (unsorted array): [5, 3, 1, 4, 6]
- Iteration 1, key is 3 (was at index 1): [5, <u>3</u>, 1, 4, 6] → [<u>3</u>, <u>5</u>, 1, 4, 6]
- Iteration 2, key is 1 (was at index 2): [3, 5, <u>1</u>, 4, 6] → [<u>1</u>, <u>3</u>, <u>5</u>, 4, 6]
- Iteration 3, key is 4 (was at index 3): [1, 3, 5, <u>4</u>, 6] → [1, 3, <u>4</u>, <u>5</u>, 6]
- Iteration 4, key is 6 (was at index 4): [1, 3, 4, 5, <u>6</u>] → [1, 3, 4, 5, <u>6</u>] — because 6 was already in the right place, no changes are made

That’s all for the bubble sort, thanks for reading!
WooCommerce Magento 2 Integration
Tags: wordpress, webdev, php, javascript
Published: 2022-01-06 08:17:34

The [Woocommerce Magento Integration](https://cedcommerce.com/magento-2-extensions/woocommerce-magento-2-integration?utm_source=Dev.to&utm_medium=sonker) extension is a Magento-specific eCommerce extension. This connector connects Woocommerce to your Magento 2 store, allowing you to manage orders from one place. They can also use it to import orders and receive real-time updates on the status of shipments. Furthermore, the extension's primary goal is to automate manual operations so that sellers can save time and focus on other vital responsibilities.

The Magento 2 Woocommerce Connector is a useful tool that connects the two channels and streamlines the order management procedure. It can be advantageous for sellers because it saves them time by eliminating manual labour.

## `Woocommerce Magento Extension Key Features`

**Bulk Orders Import:
**The Magento 2 Woocommerce extension has a functionality that allows sellers to import bulk orders with a single click. To make things easier for them, this process is both automated and manual.

**Order Management**
This plugin connects your Woocommerce store to your Magento 2 store. As a result, instead of switching between platforms, merchants can manage all orders from an one location.

**Cron Scheduler:**
The most creative aspect of this Integration extension is the Cron scheduler, which is primarily responsible for automating the store. It imports orders from the Woocommerce store to the Magento store at a predetermined period.

**Failed Orders:**
Sellers can also keep track of failed orders using the Woocommerce extension. As a result, they don't miss any changes and are always up to date on all order-related information.

[Woocommerce magento Connector](https://cedcommerce.com/magento-2-extensions/woocommerce-magento-2-integration?utm_source=Dev.to&utm_medium=sonker) will help you selling on both the platfroms simultaneously. it make you efficient seller.
What is Learn in Public ?
Tags: programming, webdev, tutorial, beginners
Published: 2022-01-06 08:06:13

 Learn in Public is not only limit to open source or its not mean to share content to others definitely not. 

> if you are sharing and expecting return is not sharing, its transaction.

<p align:"justify">The actual goal of learn in public is sharing the journey of your process and the path you're going through to the other peoples who start learning or beginners to the journey. Its help you to interactive with other people and Collab with people and also its improve your confidence and skills share the little thins like <br>
what you going to learn today? <br>
what you completed? </p>

> The Complete documentation of your journey is Learn in Public.

<p style=align: "justify"> You can start Learn in Public with different ways with different social platforms the best way you can start with #100DaysofCode. </p>

<p style=align: "justify">The another best ways to find groups or communities who actively support Learn in Public and participate with them. You can easily find this communities with Twitter, LinkedIn and discord. </p> 

Keep updating and sharing content with people and keep doing consistently without expecting anything its only for learning purpose.
 
Used social platforms Liked twitter and LinkedIn for your learning and you also get some amazing people on this platforms.

If you started your Learn in Public journey tag me on [Twitter](https://twitter.com/PatilGanesh1010).
Template Literals || ES6
Tags: javascript, webdev, programming, tutorial
Published: 2022-01-06 07:14:00

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

Bismillah,


Hello all friends, back again with me Syafiq. Here I want to write down what I have learned about EcmaScript 6. I want to document my learning results in this platform

---
In this article I want to talk about something new again in ES6, namely something called Template Literals. Let's discuss them one by one.

---
**What is Template Literals ?**

So before there was a literal template in javascript developers found it difficult to combine a string and a string or commonly called string concatination using the primitive way, namely using the (+) sign, take a look at the example below:

```javascript
// Prior to ES6 string concatenation in Js using operator (+)
// example
const user = {
    firstName: "Syafiq",
    lastName: " Rizky",
    age: 18
}

console.log("Name : " + user.firstName + "" + user.lastName + ", Age : " + user.age);

```
See how complicated it is to write that way?

Indeed, if it is only a little value, it is easy for us to write it, but if it is long then it will make us complicated ourselves as developers. So in ES6 came a simple but powerful way to overcome this, namely with a function called template literals.

Maybe you ask what is template literals?

Template literals is a new function in ES6 where we can insert an expression into a string. Let's compare how fast and effective it is when we write code using template literals or primitive ways.

Let's see the difference in the code below

```javascript
// Prior to ES6 string concatenation in Js using operator (+)
// example
const user = {
    firstName: "Syafiq",
    lastName: " Rizky Fauzi",
    age: 18
}

console.log("Name : " + user.firstName + "" + user.lastName + ", age : " + user.age);

// template Literal || ES6
// Using backtick(``) to shorten string concatenation
const userNew = {
    firstName: "Syafiq",
    lastName: " Rizky Fauzi",
    age: 18
}

console.log(`Name : ${userNew.firstName} ${userNew.lastName}, age ${userNew.age}`);


```
Now, there is a very big difference between string concatination using the primitive method and the modern method. When we use the modern method, it looks cleaner code and easier to read, whereas if we use the primitive method it is quite difficult to read.

---

**Then what should I use in my coding?**

For that I give you the choice to choose the primitive or modern way, it's up to you. But my suggestion is to use template literals because in addition to making our code cleaner, it certainly saves writing code to be shorter but denser.

---


Hope it helps!

## **Like this post ?**

- You can follow me, like and share this article 
- You can also follow my github account : [Syafiq's github](https://github.com/syafiq1331)

Thank for reading !
What is SDK ?
Tags: sdk, android, ios, backend
Published: 2022-01-06 07:50:03

An SDK is a set of software tools and programs used to create apps for specific platforms or programming languages.


**What's inside an SDK ?**
SDKs include tools that developers can used and integrate into their own apps, such as:
- Ready- made pieces of libraries

- API's

- Code Samples

- Documentation

- Process Workflow

- Runtime/ development environment and guides. etc


**Why should we use an SDK ?**
_Software Development Kits_ help add functionality to your apps. SDKs make building standard components of your app faster and easier. _SDKs_ allow developers to build applications without writing every line of code from scratch.

_SDKs_ are used for simple functions, Like Logging in, location services, mobile payment, inside analytics and more.

Thus, you would need an Android SDK toolkit to build an Android App. an IOS SDK to build an IOS App and use SDKs for backend as well.

**Example of _SDKs_ are:** 
Segment, firebase, analytics, braze, facebook and so on.




**What factor would be checked ?**
What are the factors, that would be checked after integrating SDKs. 

- Licensed: _SDK_ should be licensed [for most of part]. 

- Documentation: An SDK should include clear documentation of code and sample examples.

- Uniformity: An _SDKs_ features and methods should be uniform to work on cross platforms.

- Use of Resource: _SDK_ shouldn’t affect your app’s performance negatively, maximum functionality and minimum resource usage should be ideal. 

- Transparency: _SDK_ should be transparent with what it is doing, what data capture on background and also with permissions.

- Update: _SDKs_ should be compatible with latest OS versions and architecture.

- Security: _SDKs_ must be safe from malware or leaked unsupported data.


(The entire content is copyright by author all rights reserved. The article may not be copied or duplicated in whole or part by any means without express prior permission.)
Backend Golang Developers (Fulltime, Remote) 
Tags: go, cloudskills, webdev, database
Published: 2022-01-06 07:37:52

We're on the lookout for an experienced, driven Go developer who is ready to be part of our exciting start-up journey. As a Golang developer, you will be a key member of the development team that develops and enhances Golang based products. 
 
Interested? Drop your resumes at hr@mangtas.com 

Know more about the Job: https://bit.ly/3ePY7D0

Know more about Mangtas: https://mangtas.com/about
How to change the app name in react-native(in android and IOS):

Tags: ios, android, react, javascript
Published: 2022-01-06 07:36:40

## **In Android:**
To change the app name in react native first go to your project folder and open this path in VScode,
android/app/src/main/res/values/string.xml
Now you can easily change the app name in the string tag.
For example:
`<string name="app_name">YOUR_APP_NAME</string>`

After changing the app name, uninstall the previous app from your device and run these commands:
`$ cd android 
 $ ./gradlew clean 
 $ cd ..
 $ react-native run-android`

## **For IOS:**
 Open info.plist, change the value after the key to your app name. Eg.
`<key>CFBundleDisplayName</key>
 <string>My New App Name</string>`
Now uninstall the previous app from your device. Run 
`$ npm install
 $ pod install`
Now simply, you can install the new app on your device.
Or you can also change the app name from Xcode. 
Go to Xcode, open your project in Xcode, and find the targets tab. Select your project and change the hostname with your app name.


![IOS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suae19gqu40dzunv2l4q.png)
Intersection Observer in JavaScript | Infinite Scrolling | Lazy Loading
Tags: javascript, lazyloading, infinitescrolling
Published: 2022-01-06 07:30:42

<b>Intersection Observer</b> is the amazing API using which we can implement Scroll Animation, Infinite Scroll , Lazy Loading and other excellent features.
Timeline : 🔥🔥🔥
00:00 what is in video ?
01:14 What is Intersection Observer ?
02:30 Intersection Observer Entry
04:14 Scroll Animation
08:08 unObserve method
09:26 rootMargin
10:33 Infinite Scrolling
17:00 Lazy Loading 

{%youtube rSeXJw6pZK4%}
Awesome Blog Post2!
Published: 2022-01-06 07:19:42

# This is my first awesome post!

Hello **brave world**!!

<!-- <img src="https://images.unsplash.com/photo-1526470608268-f674ce90ebd4" alt="world"> -->

![intro](https://urbanisierung-blogs.s3.filebase.com/0.jpg)

## Again...

hello! world!
More about JavaScript Functions!
Published: 2022-01-06 07:14:30

We all know functions are group of statements that perform a specific task. Functions in JavaScript exhibit various forms .We have a variety of types in functions in JavaScript , like function expression, Anonymous functions, Arrow functions and IIFE.
Lets get started with some basic function pattern which we normally see in other programming languages as well i.e. normal/regular function definition.
Syntax:

```
function function_name(){
//statements
}
```

![function 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ir02s63lfdfamjlt62nu.JPG)

This was pretty easy! Now lets have a look at some other types.
**Function Expressions**
In JavaScript we can create functions and can assign them to variables as well!
Yes , you read it right! We can assign functions to variables.
Syntax:

```
var variable_name =function function_name(){
//statements
}
```

![function variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vqo28yeh45fkjme13jn7.JPG)
We cannot call sayhi() directly, it results into reference error.

![function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsc1ef70552seq8w9ylp.JPG)

Also remember , function expressions are never hoisted!
So we cannot do something like this.

![function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx5l88g0yw30nz73oniv.JPG)

This results into TypeError.
**Anonymous Functions**
Anonymous functions are functions with no specific name.

- They can be stored in a variable.
- Can be returned in a function .
- Can be passed in a function.


```
function(){
 //body of function
};
```
Store an anonymous function in a variable.

```
var variable_name = function(){
    //body of function;
}
```

![function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ib7e5ln3j0kf289jk5bs.JPG)
Passing anonymous functions as an argument in JavaScript.

![anonymous functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gycarwykc8fc1woanisu.JPG)

Now if we call myfunc inside show we get,

![function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n34vvpxdv7hy2l6morus.JPG)



Returning anonymous function

![function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx2ep2diab3udzraoxxu.JPG)


**Arrow Functions!**
Arrow functions were introduced from ES6.

![arrow functions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jct5kw5fo7ppd9dnw1mj.JPG)


This was all for this blog!
Hope it helps!
Happy learning!