teleren/devto huggingface dataset:
Array.Map() - for mapping items in an array
Tags: javascript
Published: 2022-04-07 07:37:51

This article is the start of a series where I explain different array methods, how they work, and use cases.

I'll be starting with the Map method.

Here's the video version: [Array.map() YouTube](https://youtu.be/QYNYveJj0Ak)

## What is the Map method?

The `map` method of arrays is a higher-order function that loops through each item in the array, performs some operations on the item, and returns it to make up the resulting array.

As a higher-order function, it takes a function as an argument. During the loop, this function receives an item (and its index position in the array), does something with the item, and returns a new item that makes it to the new array.

The returned output of the map method is a new array containing the same number of items but with new items.

## Syntax of the Map method

```js
someArray.map(function(item, index, array) {
  // something with item and/or index
  // return new item
})
```

The `item` argument is the item being looped on.

The `index` argument is the position in the array. For example, the first item has an `index` of 0, and the second, 1.

The `array` argument is the array itself.

## Without the Map method

The map method is a declarative abstracted function that literally "maps through an array". Here's an example showing how you can map through an array without this method:

```js
const array = [...]

const newArray = []

for(let i = 0, i < array.length, i++) {
  const item = array[i]
  const newItem = ?? // do something with item
  newArray.push(newItem)
}
```

This loop approach is similar to what the `map` method does in the background.

## One use case of the Map method

There are many use cases of the map method. The general idea is to map through the items in an array, do something with those items and return a new array.

But let us look at one use case.

### For making an immutable duplicate of an array

Arrays in JavaScript are objects which are reference data types. What this means is that:

```js
const array1 = [1, 2]
const array2 = array1

array2.push(5)
console.log(array2)
// [1, 2, 5]
console.log(array1)
// [1, 2, 5]
```

Because it's a reference and not a direct value, modifying `array2` also affects `array1`.

To create an immutable duplicate, you can use the `map` method like so:

```js
const array1 = [1, 2]
const array2 = array1.map(item => item) // arrow functions

array2.push(5)
console.log(array2)
// [1, 2, 5]
console.log(array1)
// [1, 2]
```
PHP PDO Insert Multiple Rows Example
Tags: php, pdo, mysql, tutorial
Published: 2022-04-07 07:21:03

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/php/php-pdo-insert-multiple-rows-example

In this post, I'm sharing an example of how to **insert records in PHP PDO in multiple rows**. If you have a task on saving multiple records then this is for you. All you need is to set up your database and table.

 

In this example, I'm using an array that consists of records for each row. See below code of **PHP PDO multiple insert** example:

```php
<?php

$host     = 'localhost';
$db       = 'demos';
$user     = 'root';
$password = '';

$dsn = "mysql:host=$host;dbname=$db;charset=UTF8";

try {
     $conn = new PDO($dsn, $user, $password, [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);

} catch (PDOException $e) {
     echo $e->getMessage();
}

$data = [
     [
          'title' => 'test title 1',
          'content' => 'test content 1'
     ],
     [
          'title' => 'test title 2',
          'content' => 'test content 2'
     ],
     [
          'title' => 'test title 3',
          'content' => 'test content 3'
     ]
];

$sql = 'INSERT INTO posts(title, content) VALUES(:title, :content)';

$statement = $conn->prepare($sql);

foreach($data as $row) {
    $statement->execute($row); 
}

echo "Posts saved successfully!";
```

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/php/php-pdo-insert-multiple-rows-example if you want to download this code.

Happy coding :)
Why would you NOT pick Meteor for your next project?
Tags: discuss, javascript
Published: 2022-04-07 07:27:01

As some of you might know, I write [articles on Meteor](https://dev.to/search?q=jankapunkt%20meteor) since I joined dev.to and I am a big advocate pro Meteor.

However, I am very very biased here and I want to get some thoughts from "outsiders" or ex-Meteorites why Meteor would not be a technological choice for the next project.

Give me all your input :-)
My perspective on Chakra UI
Tags: chakra, uiux
Published: 2022-04-07 07:24:41

Chakra UI is a collection of beautifully made React components that includes all of Tailwind's stylistic benefits and handles all of the complexity.First and foremost, Chakra UI has a light and dark mode configuration for your application which can be configured in easy manner. It has the convenience of Tailwind as well as all of these additional advantages right out of the box.

Styles may be passed as props because all styles are prop-based.It is quite simple to have access to responsive styles.Chakra UI supports Frameworks such as React , Next , Gatsby and many more.

Each component can be imported and can be customized by passing props. Chakra UI provides pre-built components to assist you in completing your projects as quickly as possible.Layouts, forms, typography, overlay, disclosure, navigation, media, icons, and many more are among the components.

There are various pre-built hooks that extend the application's capability significantly.The good part about Chakra UI is the community that has sprung up around it.You may also discover some themes that look fantastic and were created using Chakra UI.Despite the fact that it is still tiny for the time being, it is expanding on a daily basis and everyone are very helpful to improve Chakra UI's speed, performance, and developer experience.

You may visit the Chakra UI website by clicking [here](https://chakra-ui.com/)
Introduction to Jenkins Pipeline
Tags: jenkins
Published: 2022-04-07 07:23:27

Jenkins Pipeline is a collection of plugins that aid in the implementation and integration of continuous delivery pipelines into Jenkins.Pipeline offers an extendable collection of tools for modelling basic to complex delivery pipelines "as code" using the Pipeline Domain Specific Language (DSL).

A pipeline's purpose is to allow builds to flow through it constantly, similar to how water flows through a plumbing system; fluid and always available. The goal is to deploy and/or release the modifications contained in the builds into production.

A continuous delivery pipeline is an automated representation of your software delivery process, from version control to your users and clients. Every update to your program (committed in source control) through a rigorous procedure before it is released. This process involves constructing the software in a dependable and repeatable manner, as well as advancing the developed software (referred to as a "build") through various phases of testing and deployment.

The specification of a Jenkins Pipeline is often written into a text file (known as a Jenkinsfile), which is then checked into a project's source control repository. Creating a Jenkinsfile has a lot of obvious advantages:

- Create Pipelines automatically for all Branches and Pull Requests 
- Code review/iteration on the Pipeline 
- Audit trail for the Pipeline 
- Single source of truth for the Pipeline that can be seen and changed by different project members
```ts
// Declarative //
pipeline {
    agent any ①
    stages {
        stage('Build') { ②
            steps { ③
                sh 'make' ④
            }
    }
    stage('Test'){
        steps {
            sh 'make check'
            junit 'reports/**/*.xml' ⑤
        }
    }
    stage('Deploy') {
        steps {
            sh 'make publish'
        }
    }
}
}
```

- ① Jenkins should allocate an executor and workspace for this segment of the Pipeline, as indicated by the agent.
- ② This Pipeline's stage is described by stage.
- ③ steps summarises the steps that will be performed at this stage
- ④ sh executes the given shell command
- ⑤ The plugin provides junit as a Pipeline step: junit is a JUnit plugin for collecting test results.

```js
//sample
node {
    stage('Build') {
        sh 'make'
    }
    stage('Test') {
        sh 'make check'
        junit 'reports/**/*.xml'
    }
    stage('Deploy') {
        sh 'make publish'
    }
}
```

Reference : Jenkins User Handbook , Mastering Jenkins
Overview of ST-LINK/V2
Published: 2022-04-07 07:21:16

Overview of ST-LINK/V2
The ST-LINK/V2 is an in-circuit debugger and programmer for the STM8 and STM32 microcontrollers. The single-wire interface module (SWIM) and JTAG/serial wire debugging (SWD) interfaces are used to communicate with any STM8 or STM32 microcontroller located on an application board. In addition to providing the same functionalities as the ST-LINK/V2, the ST-LINK/V2-ISOL features digital isolation between the PC and the target application board. It also withstands voltages of up to 1000 Vrms.


Product contents
• USB standard A to Mini-B cable (A)
• ST-LINK/V2 debugging and programming (B)
• SWIM low-cost connector (C)
• SWIM flat ribbon with a standard ERNI connector at one end (D)
• JTAG or SWD and SWV flat ribbon with a 20-pin connector (E)

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

If you want to learn more, try to follow the below link to see the [article about ST-LINK/V2](https://www.utmel.com/components/st-link-v2-programmer-debugger-emulators-stm8-and-stm32-microcontrollers-datasheet-pinout?id=1171).

If you are interested in these products, try to follow the below link to see [ST-LINK/V2](https://www.utmel.com/productdetail/stmicroelectronics-stlinkv2-7749631).
PHP PDO Insert Tutorial Example
Tags: pdo, php, tutorial, mysql
Published: 2022-04-07 07:18:38

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/php/php-pdo-insert-tutorial-example

In this post, I'm sharing a simple **PHP PDO insert, create, save record tutorial example**. If you are new to PHP we have many available functions on saving to the database with PHP we can you the method of MySQLi Object-Oriented, MySQLi Procedural, then PDO which we tackle in this post.

 

Take note that before saving to your database you must double-check and validate the data if clean and prevent the potential SQL Injection.

 

## MySQL Insert

Anyway, let's continue. When doing an insert statement with MySQL the below code will show like this:

```php
INSERT INTO table_name (column1, column2, column3,...)
VALUES (value1, value2, value3,...)
```

## PHP PDO & MySQL Insert

But when PHP & MySQL interacting with each other on saving records to our database this it should be like this:


```php
<?php

$host     = 'localhost';
$db       = 'demos';
$user     = 'root';
$password = '';

$dsn = "mysql:host=$host;dbname=$db;charset=UTF8";

try {
     $conn = new PDO($dsn, $user, $password, [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);

} catch (PDOException $e) {
     echo $e->getMessage();
}

$data = [
     'title' => 'test title',
     'content' => 'test content'
];

$sql = 'INSERT INTO posts(title, content) VALUES(:title, :content)';

$statement = $conn->prepare($sql);

$statement->execute($data);

echo "Post saved successfully!";
```

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/php/php-pdo-insert-tutorial-example if you want to download this code.

Happy coding :)
peekABar - jQuery plugin for a Notification Bar
Tags: jqueryplugins, jquery, javascript, php
Published: 2022-04-07 07:13:03

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery-plugins/peekabar-jquery-plugin-for-a-notification-bar

In this post, I'm sharing how to implement a **peekABar Simple Customizable jQuery plugin for a sticky notification bar**. This is useful to implement in your product that needs notifications when the request has been processed successfully. And it is customizable with your own design you like.

 

## Install and Download

Run the following command below:

```php
npm install jquery-peek-a-bar --save
```

## Sample peekABar Working Code

```php
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Basic on TinyMCE with Custom Dialog Box</title>

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script type="text/javascript" src="dist/js/jquery.peekabar.min.js"></script>
	<link rel="stylesheet" type="text/css" href="dist/css/jquery.peekabar.min.css">

	<style type="text/css">
		.custom-bar {
			color: white;
		}
	</style>
	<script>
		$(document).ready(function() {
			// Default
			var defaultBar = new $.peekABar();
			$('.btn-default-show').click(function () {
			    $('.peek-a-bar').hide();
			    defaultBar.show();
			});

			$('.btn-default-hide').click(function () {
			    defaultBar.hide();
			});

			/**
		   	* Autohide Bar
		   	*/
		  	var autohideBar = new $.peekABar({
		    	autohide: true,
		  	});

		  	$('.btn-autohide-show').click(function () {
			    $('.peek-a-bar').hide();
			    autohideBar.show();
			});

		  	$('.btn-autohide-hide').click(function () {
		    	autohideBar.hide();
		  	});

		  	/**
		  	 * Custom bar
		  	 */
		  	var customBar = new $.peekABar({
		        autohide: true,
				backgroundColor: '#5892fc',
				color: '#fff',
				padding: '2em',
				cssClass: 'custom-bar',
				html: '<span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Test message with custom bar style.'
		    });

		    $('.btn-custom-show').click(function() {
		        $('.peek-a-bar').hide();
		        customBar.show();
		    });

		    $('.btn-custom-hide').click(function() {
		        customBar.hide();
		    });
		});
	</script>
</head>
<body>
	<div class="container" style="margin-top:250px; text-align:center">
		<button class="btn btn-success btn-default-show">Default Bar</button>
		<button class="btn btn-danger btn-default-hide">Hide the Default Bar</button>
		<button class="btn btn-success btn-autohide-show">Auto Hide Bar</button>
		<button class="btn btn-success btn-custom-show">Custom Bar</button>
	</div>
	
</body>
</html>
```

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery-plugins/peekabar-jquery-plugin-for-a-notification-bar if you want to download this code.

Happy coding :)
Serverless backend service that uses Typescript & Golang - Automated. Well, mostly
Tags: aws, backend, typescript, go
Published: 2022-04-07 07:12:00

---
title: Serverless backend service that uses Typescript & Golang - Automated. Well, mostly
published: true
description: Introducing g-zippy - High-performance framework to facilitate rapid server-side development with clean, pragmatic & security-first design; that embraces serverless for deployment. g is for golang.
tags: #AWS #backend #typescript #golang
---
https://gitlab.com/1x-eng/g-zippy
Is it mandatory to do Google Web Stories? 2022
Tags: digital, web
Published: 2022-04-07 07:11:58

How to SEO for Google Web Stories?: Web Stories of some people are becoming very popular and some people are not getting even Web Stories Index, if you also have some issues regarding web stories then this guide is for you, today we will learn that How to do SEO for Web Stories ? And how do we bring our Web Stories to the Google home page ?

Before this, if you do not know what is Web Stories ? And how to create web stories for your blog? So you read this article:-

## Make sure the Web Story is valid AMP

First of all, you have to see whether the web stories you are creating is AMP valid or not, if it is then it is a good thing and if not then you have to solve the AMP issue of your web stories. Only then your web stories will be indexed well and will be shown in google.
Read here more [seo for google web stories](https://aitechtonic.com/how-to-seo-for-google-web-stories/)
visitor-counter: tracking the amount of visitors on your website
Tags: express, javascript, node, webdev
Published: 2022-04-07 06:51:00

Hello friends,
I'm happy to be back !

Disclaimer: I'm not the author of [visitor-counter](https://github.com/erikthalen/visitor-counter) but I think it needs some attention.

I started using `visitor-counter` as a Fastify plug-in with minor tweaks as it is intended to integrate Express apps. Nevertheless, I think it's an amazing plug-in to talk about, as some nice repos might go and age unseen.

I talked with author about supporting other web (API/routing) libraries like Fastify, Koa, Nest ... So this post is to have a little kick back to the author. You may give him a star, and better if you could test it and advance support of other libraries.

Demo: https://counter.xxxxxxxxxx.xyz/

The reason why I'm liking it very much, is because I was looking for a visitors analytics solution; Well, I couldn't find any solution to integrate to my web-app, all other solutions are big tech, docker based, with so much constraints (separate service, so CORS, certificates, DB... ).

This is it for `visitor-counter`, I hope you like it, give him a star if you do :)

Have a nice day!
Optimize Docker Size Image with Python Environment
Tags: docker, python, size
Published: 2022-04-07 06:20:01

Building Docker image with Python can be well quite heavy. 

For a multistage build for example, instead of building wheels at each, you can specify a path for the python environment once it's initialized at the first stage of the build.

```docker
ENV PATH="/opt/venv/bin:$PATH"
```
Make sure you have created the virtual environment tho.👀

```docker
RUN python -m venv /opt/venv
ENV PATH="/opt/venv/bin:$PATH"
```

Here's an example with two steps:

```docker
# first stage
FROM python:3.10-slim as builder

WORKDIR /app

ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

RUN pip install virtualenv

RUN virtualenv /opt/venv
ENV PATH="/opt/venv/bin:$PATH"

COPY requirements.txt .
RUN pip install -r requirements.txt

# another stage
FROM python:3.10-slim

COPY --from=builder /opt/venv /opt/venv

WORKDIR /app

ENV PATH="/opt/venv/bin:$PATH"
```
## Summary

In conclusion, here are the steps again 🚀: 
- Create the virtual environment in the builder image
- Copy the virtual environment to the final image

*Article posted using [bloggu.io](https://bloggu.io). Try it for free.*
Alternative for docker desktop (windows WSL)
Tags: docker, wsl, ubuntu
Published: 2022-04-07 06:08:56

## Install ubuntu from Microsoft Store
- Go to store and download **Ubuntu 18.04 LTS** (you can also try latest version)
![Ubuntu logo from Microsoft Store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xak6zuotlfm6e2s0sr9.png)
 
- Once installation is complete open **Ubuntu 18.04 LTS** from startup menu and set a username and password (username can be you systems username without '.' and password can be same as your system password)


## Install docker in ubuntu
- Open PowerShell in this directory and execute following commands
``` bash
$ wsl -u root
$ sudo apt-get update
```
``` bash
$ sudo apt install docker.io
$ sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
$ sudo chmod +x /usr/local/bin/docker-compose
$ sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
```
- Once docker and docker-compose is installed, verify it by executing the command 
``` bash
$ docker -v
$ docker-compose -v
```

## Start docker daemon
- Execute below command in `cmd` to start daemon
``` bash 
$ wsl -u root ^ dockerd
```
NOTE: Do not close this window. 

Whenever you turn on your system repeat step **Start docker daemon** to start the daemon.
Engineering Management Tip #2
Published: 2022-04-07 05:54:32

This second-order tip is about honesty, empathy, psychological safety, the [ladder of inference](https://www.mindtools.com/pages/article/newTMC_91.htm) and listening: while you have the energy, explore until you're very confident each team member feels happy and inspired. Unblock until they're in that state. And then step back and let project/product/people growth happen.
Engineering Management Tip #1
Published: 2022-04-07 05:35:11

_Know the three management roles in most companies_.

Rands explains it well here: https://randsinrepose.com/archives/tear-it-down/

The importance of understanding these hats is really critical to becoming an effective engineering manager in an organization. Every successful company that I've seen has been involved with that cosmic interplay between tactics and strategy (it sounds so stereotypical and hackneyed but we keep coming back to it because the model is useful).

Even solo entrepreneurs (of growing tech companies) can be evaluated like primordial big bang singularities with these three roles running around inside them: a lead focused on tactics, a director focused on strategy, and the bridge between them (the lead of leads). And again managers keenly aware of these roles can then move in and out of them ever so carefully to smooth things out when there are gaps in the organization. Is there a temporary gap in executive leadership? Know to dialup strategy and look for ways to lead this informally. Is there a gap in communication between strategy and tactics? Know which role to temporarily assume or which people to talk to and help grow (i.e., 'manage' upwards/sideways/downwards).

EM tip #1: to be a great engineer it helps to work backwards from what a manager is focused on as well. And to be a great manager within an organization it helps to work backwards from what directors and managers of managers are doing. Know the structure of modern companies that follow this paradigm so that friction in strategic or tactical areas doesn't slow you down.

Second-order tip: this applies beyond engineering organizations. You can practice the strategy and tactics duality within your own life or career. It's only within a larger organization that differentiation of the roles across multiple people happens.