teleren/devto huggingface dataset:
Returing Part of an Array Using the slice Method
Tags: javascript, programming, beginners, devops
Published: 2021-06-26 22:07:23

* The `slice` method as we have already learned about returns a copy of certain elements of an array. It can take two arguments, the first gives the index of where to begin the slice, the second is the index for where to end the slice (and it's non-inclusive). If the arguments are not provided, the default is to start at the beginning of the array through the end. The `slice` method does not mutate the original array, but returns a new one.

* Here's an example:
```
var myarr = ["PS5", "Switch", "PC", "Xbox"];
var myConsoles = myArr.slice(0, 3);
```
* `myConsoles` would have the value `["PS5", "Switch", "PC"]`.

* Alright then let's use the `slice` method in the `sliceArray` function to return part of the `anim` array given the provided `beginSlice` and `endSlice` indices. The function should return an array.
```
function sliceArray(anim, beginSlice, endSlice) {
  // Only change code below this line


  // Only change code above this line
}
var inputAnim = ["Cat", "Dog", "Tiger", "Zebra", "Ant"];
sliceArray(inputAnim, 1, 3);
```
* Answer:
```
function sliceArray(anim, beginSlice, endSlice) {
return anim.slice(beginSlice, endSlice);

}
var inputAnim = ["Cat", "Dog", "Tiger", "Zebra", "Ant"];
console.log(sliceArray(inputAnim, 1, 3)); will display ['Dog', 'Tiger']
```

Larson, Quincy, editor. “Return Part of an Array Using the slice Method.” Https://Www.freecodecamp.org/, Class Central, 2014, twitter.com/ossia.
Functional Programming: Implementing the filter Method on a Prototype
Tags: javascript, devops, beginners, programming
Published: 2021-06-26 21:58:59

* Continuing forward. You might learn a lot about the `filter` method if you implement your own version of it as well. It is recommended you use a `for` loop or `Array.prototype.forEach()`.

* Ex:
```
var s = [23, 65, 98, 5];

Array.prototype.myFilter = function(callback) {
  // Only change code below this line
  var newArray = [];
  // Only change code above this line
  return newArray;
};

var new_s = s.myFilter(function(item) {
  return item % 2 === 1;
});
```
* Answer:
```
var s = [23, 65, 98, 5];

Array.prototype.myFilter = function(callback) {
 
  var newArray = [];
  for (let i = 0; i < this.length; i++) {
    if (callback(this[i]) === true) {
      newArray.push(this[i])
    }
  }
   return newArray;
};

var new_s = s.myFilter(function(item) {
  return item % 2 === 1;
});
```
* `new_s` equals [23, 65, 5]

* Helpful Links:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

















Larson, Quincy, editor. “Implement the filter Method on a Prototype.” Https://Www.freecodecamp.org/, Class Central, 2014, twitter.com/ossia.
টেকনিকাল লিডারশীপ
Published: 2021-06-26 18:40:11

টেকনিকাল লিডারশীপ বলতে আমরা বুঝি কোন এক ব্যাক্তি অথবা কোন এক টিম যখন একটি অথবা একাধিক টেকনিকাল প্রফেশনাল টিমের তদারকির দ্বায়িত্বে নিয়োজিত থাকে। এই লিড বা লিড টিম এর মুল দ্বায়িত্ব সফটওয়ার ডেভেলপমেন্ট এর প্রত্যক ধাপ সকল ভাবে পালন হচ্ছে কিনা। এই রোলের দ্বায়িত্ব অনেক। একজন টেক লিড ম্যানেজমেন্ট এবং টেকনিকাল টিমের মধ্যে সমন্নয়সাধক। একজন টেকলিড নিশ্চিত করে যাতে যে আইডিয়া টপ লেভেল থেকে এসেছে সেটা যেন একটি পরিপুর্ন প্রোডাক্ট এ পরিণত হয় এবং একটি অর্গানাইজেশন এর বিভিন্ন পর্যায়ে টেকনিকাল কমউনিকেশন গুলা যেন বাধাগ্রস্থ অথবা লাইনচুত না হয়ে পড়ে।

একজন টেকলিডের অবশ্যই টেকনিকাল নলেজ থাকা প্রয়োজন। একটি টেক এর মাল্টিপল রোল গুলা কিভাবে কাজ করে তা সম্পর্কে ভালো জ্ঞান থাকা প্রয়োজন। মনে রাখবেন কোন সমস্যা হলে একজন ডেভেলপার আপনার কাছেই আসবে তাই একজন টেকলিড হিসেবে আপনার ওই সমস্যা সমাধান করার ক্যালিবার থাকতে হবে। টেকলিড কে অবশ্যই বুঝতে হবে তার টেক টিম কেমন হবে, তাকে হায়ারিং প্রসেস এ জড়িত থাকতে হবে। তাকে বুঝতে হবে তার টিম কে সে কিভাবে অর্গানাইজড করবে।

একজন টেকলিডকে অবশ্যই উদাহরণ দেখাতে হবে, তার টিমকে এবং তার ম্যানেজমেন্ট কে। সে টিমের রোল মডেল, তাকে সেই রকম উদাহরণ দেখাতে হবে, শুধু মাত্র টেকনিকাল নয়, একজন টিমের সিনিয়র হিসেবে, এবং একজন মানুষ হিসেবে অবশ্যই তাকে উদাহরণ দেখাতে হবে।

একজন টেকলিডকে ক্লিয়ার এবং রেস্পন্সিভ থাকতে হয়। তাকে খুব দ্রুত নিজের জন্য এবং সবার জন্য সঠিক ডিসিশন নিতে হয় যেটা অনেক সময় খুবই কঠিন হয়ে পড়ে। এটা একজন টেকলিডের জন্য একটি কঠিন দ্বায়িত্ব।

যে প্রজেক্ট এ টেকলিড কাজ করতাছে তার অদ্যপান্ত তার জানা উচিত। প্রজেক্ট এর ছোট থেকে অনেক ছোট পরিবর্তন তার মাথায় থাকা উচিত। এবং সর্বোপরী পুরো টিমকে মোটিভেট রাখাও তার একটি বড় দ্বায়িত্ব।

পরবর্তি কোন এক দিন আমি টেকনোলোজি লিডার এর দ্বায়িত্ব নিয়ে আরো বিশদ আলোচনা করবো। কিন্তু আজ এ পর্যন্তই থাকুক।

<a href="https://faysalahmed.info/2021/06/26/bangla-technical-leadership/">Original Post </a>
Functional Programming: Implementing map on a Prototype
Tags: javascript, devops, beginners, programming
Published: 2021-06-26 21:29:50

* Alright so continuing where we left off last time, `map` is a pure function, and its output depends solely on its inputs. Plus, it takes another function as its argument.

* You might learn a lot about the` map` method if you implement your own version of it. It is recommended you use a `for` loop or Array.prototype.forEach().

* Ex:
```
var s = [24, 55, 96, 4];

Array.prototype.myMap = function(callback) {
  var newArray = [];
  // Only change code below this line

  // Only change code above this line
  return newArray;
};

var new_s = s.myMap(function(item) {
  return item * 2;
});
```
* The `Array` instance can be accessed in the `myMap` method using `this`.

```
var s = [24, 55, 96, 4];

Array.prototype.myMap = function(callback) {
  var newArray = [];

for (let i = 0; i < this.length; i++) { // <---
  newArray.push(callback(this[i]))
}
  return newArray;
};

var new_s = s.myMap(function(item) {
  return item * 2;
});
```
* `new_s` should equal [48, 110, 192, 8].

Larson, Quincy, editor. “Implementing map on a Prototype.” Https://Www.freecodecamp.org/, Class Central, 2014, twitter.com/ossia.
LinkedList Questions: Delete a given node in constant time
Tags: algorithms, cpp, datastructures, codenewbie
Published: 2021-06-26 21:04:34

In this series of posts, I will discuss coding questions on the `LinkedList` Data structure. 
The posts in this series will be organized in the following way,
1. Question Link ❓
2. Possible Explanation 📝
3. Documented C++ Code 🧹
4. Time and Space Complexity Analysis ⌛🌌

## The Question
Write a function to delete a node in a singly-linked list. You will **not** be given access to the `head` of the list, instead you will be given access to the node to be deleted directly.

It is guaranteed that the node to be deleted is **not a tail** node in the list.

https://leetcode.com/problems/delete-node-in-a-linked-list/

>💡 Give yourself atleast 5 mins to figure out the solution :)

## Explanation
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6q3d37pb48a2r63p250i.png)
 
It is a warm-up question, there's not much to explain,
1. Copy the data of the next node into the given node.
2. Make the given node point to the next's neighbor.
3. Free up the old neighbor of the given node. 

## C++ Code

### Definition of LinkedList
```cpp 
//Definition for singly-linked list.
struct ListNode
{
    int val;
    ListNode *next;
    ListNode() : val(0), next(nullptr) {}
    ListNode(int x) : val(x), next(nullptr) {}
    ListNode(int x, ListNode *next) : val(x), next(next) {}
};
```

### Solution
```cpp
#include <bits/stdc++.h>
#include "../linkedlist.h"
using namespace std;

/*
-Time:O(1)
-Space:O(1)
*/
class Solution
{
public:
    //! given node isn't the "tail" node
    void deleteNode(ListNode *node)
    {
        ListNode *temp = node->next;

        //I can do this only because node isn't the tail node
        //and "node->next" will not null therefore
        node->val = node->next->val;
        node->next = node->next->next;

        delete temp;
    }
};

```
## Complexity Analysis

### Time Complexity: O(1) 
No iteration or recursion is done.

### Space Complexity: O(1)
No extra space is used.
A Logging System
Tags: architecture, logging, swift, uml
Published: 2021-06-26 20:47:48

---
title: A Logging System
published: true
description: A small logging system based of Apple's Swift Log package
tags: architecture, logging, swift, uml
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91by877qhdijymnll1cr.png
---

This is a small logging system based of [Swift Log](https://apple.github.io/swift-log/docs/current/Logging/index.html) which is a _Swift_ logging API package.

## UML
![Logging System UML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91by877qhdijymnll1cr.png)

## Main Components
### [LoggingSystem](https://apple.github.io/swift-log/docs/current/Logging/Enums/LoggingSystem.html)

The main façade. It can only booted once with a Logger instance.

### [Logger](https://apple.github.io/swift-log/docs/current/Logging/Structs/Logger.html)

This will call the _LogHandler_ instance with the proper log level and other params provided by the caller.

### [LogHandler](https://apple.github.io/swift-log/docs/current/Logging/Protocols/LogHandler.html) 

A protocol which the log handlers must implement. It mainly contains a log function to pass the params.

### [MultiplexLogHandler](https://apple.github.io/swift-log/docs/current/Logging/Structs/MultiplexLogHandler.html)

An implementation of the LogHandler protocol. Can pass the log message to other log handlers. Useful if you wish to log messages to local and remote systems using different handlers.

### [StreamLogHandler](https://apple.github.io/swift-log/docs/current/Logging/Structs/StreamLogHandler.html)

An implementation of the LogHandler protocol that sends the messages to standard output or standard error.
3D with Javascript?
Tags: overview, javascript, 3d, learn
Published: 2021-06-26 20:37:08

![Mobile showing the 3d of castle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/buejso883w2g632kb7fi.jpg)
Are you a JavaScript developer? interested to explore another face of the ***World's Popular Language***? Even if not, if you would like to know what else can you conquer with this language, this post is for you! Anyone interested in 3D, with no knowledge of JavaScript, this still is for you!:)

When its 3D, Maya, Autodesk,and more recently Blender, Unity, Unreal come to our minds. Doing 3D stuffs with JavaScript becomes a point of notice, to only those who come across it, and I did! 

Below are few platforms which use JavaScript to make 3D object or games or even use for rendering. 

They can definitely be of help by integrating in your app or website, or even having **fun exploring!**
1. Three

   Three (https://threejs.org/ )

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser. You can find some cool games and websites on their official site.

2.Babylon

    Babylon (https://www.babylonjs.com/ ) 

Babylon.js is a real time 3D engine for displaying 3D graphics in a web browser via HTML5.Babylon brings in the difference by using HTML5 instead of WebGL.

3.Zdog

    Zdog( https://zzz.dog/ ) 

Really cool Round, flat, designer-friendly pseudo-3D engine for canvas & SVG. The tutorial is even friendly and entertaining!

4.Phoria

    Phoria (http://www.kevs3d.co.uk/dev/phoria/)

Another great site to find simple 3D graphics on a canvas 2D renderer with some wonderful examples. It is been developed by Kevin Roast and you can find the GitHub repo too.

5.Xeogl
    
Xeogl ( https://xeogl.org/ )

Developed by Xeolabs, it focuses on 3D visualization in the browser without using **plugins**! Also does it have various examples to explore!

That's it folks. Make sure to let me know if you enjoyed this post and do shower hearts as appreciation, as this is my first post🥳  Also let me know which of these is your favorite one or if you think that I have missed any, please share in the comments🙏
Cheers!
June 21 - June 28 Weekly Status

Published: 2021-06-26 20:33:18

This week I tested the dependency of speed on resolution of the video. So far, results seem strange because downsampling from 4k to 2k didn’t affect much speed of the algorithm (approximately 1.2-1.3x faster). 
Then I measured the time complexity of downsampling alone. Inside the video frame reading function, I set the loop for 10000 iterations - at each of them the memory was allocated for a new frame of smaller size and the planes to which downsampling was applied were copied to the new frame valuable. It turned out to be about 200 iterations per second, which is way faster than 4k videos regular scenechange detector processing speed (2.5 frames per second). So the downsampling itself shouldn't affect the speed much. So, here's the problem to solve. 
I made an output of the metric of the algorithm to the json file and visualized it in a few charts. I made a [blog post] (https://dev.to/aleksandrgushchin/metric-visualization-and-analysis-590o) about it. Based on visualization I made some conclusions for future work, which are written at the end of the post.
Generate German laws
Tags: machinelearning
Published: 2021-06-26 20:08:52

In this series, I am going to describe, how to build a generator of German laws.

**First things first:**

1. I am doing this for my own amusement.
2. Because of **1.**, I will not necessarily seek simple ways to do things.
3. You will most probably facepalm repeatedly reading the articles from this series.
4. Given enough time, you will learn to enjoy **3.**

## The goal

… consists of four parts:

1. Fetch German laws from https://www.gesetze-im-internet.de
2. Build text corpus from the downloaded laws
3. Train a char-RNN with the text corpus
4. Create an easy to use generator of German laws

The prototype for XML conversion was done in the [previous article](https://ofdigitalwater.postach.io/post/convert-german-laws-from-xml-to-text) on this blog.

## Next step

In the next post, we are going to create the code that fetches all the law texts.

Stay tuned!
What to do if you publish a beta build as @latest
Tags: npm, packaging, javascript, publishing
Published: 2021-06-26 19:30:51

---
title: "What to do if you publish a beta build as @latest"
published: true
description: "Fixing incorrect npm version tags quickly!"
tags: npm, packaging, javascript, publishing
canonical_url: "https://www.hughrawlinson.me/posts/2021/06/04/what-to-do-if-you-publish-a-beta-build-as-latest"
---

I recently published a beta build of [Meyda] to the npm registry, with the intention of having one of our longest running users test it out to make sure it worked in their project. I hadn't done a manual release in a long time, since we use `semantic-release`, so I skimmed the output of `npm publish --help`, and figured out what command I would run. I
set the version field of package.json to `5.1.7-beta.0`, as instructed built the bundle, ran our test suite, and ran `npm publish . --dry-run`, to verify that the manifest of files that _would_ be published was correct. It was correct, and so I ran

```
npm publish .
```

When I checked [Meyda's page on npm], I was rather surprised to see that `5.1.7-beta.0` had been published as the `latest` tagged version of Meyda. I had incorrectly been assuming that the magic incantation required to publish a beta package was the `-beta.*` suffix in the package version. In fact, the way to publish a beta version of an npm package is

```
npm publish . --tag beta
```

At this point, I became worried. Had I published a beta build of a package that might inadvertently contained breaking changes to all my users? While yes, technically I had done that (for the second time that week, but that's another story), I needn't have worried. Some research revealed that while packages once published to the registry in most cases cannot be removed or modified, tags can. The `npm dist-tag` command saved the day! I'll leave you to read the `npm dist-tag --help`, and instead show what I did to resolve my situation. The previous "good" latest version of my package was `5.1.7`.

```
# Tag the previous version as latest
npm dist-tag add meyda@5.1.7 latest

# Tag the beta as a beta
npm dist-tag add meyda@5.1.8-beta.0 beta
```

Once the tags were properly set, none of our users were at risk of getting broken code they hadn't opted in for, and the user who agreed to test our beta release was able to install it with `npm install meyda@beta`.

No need to worry if you find yourself in this situation. Like most things, it's completely recoverable, and everything will be ok. We all lived happily ever after!

[meyda]: https://meyda.js.org/
[Meyda's page on npm]: https://www.npmjs.com/package/meyda
JavaScript: Async/Await Wrapper
Tags: javascript, pattern
Published: 2021-06-26 19:29:49

Reusable function to run any Promise that returns an array of data and error.

Using Async/Await is great, but when working with multiple Promises it often clutters your code with multiple try/catch statements. I wrote this wrapper to easy encapsulate the try/catch and return an array with the data in the 1st index and the error in the second index. 

## Source code
[GitHub Respository](https://github.com/dewald-els/javascript-async-wrapper)

## Wrapper function
```javascript
export const asyncWrapper = async (asyncFunction, params = null) => {
	try {
		const data = await asyncFunction(params)
		return [data, null]
	}
	catch (error) {
		return [ null, error ]
	}
}
```
## Implementation
```javascript
// Use them all together! <3 
const handleFetchAllClick = async () => {
	// No gross try/catch everywhere
	const [users, usersError] = await asyncWrapper(fetchUsersRequest)
	const [todos, todosError] = await asyncWrapper(fetchTodosRequest)
	const [user, userError] = await asyncWrapper(fetchUserByIdRequest, 1)
	const [newUser, newUserError] = await asyncWrapper(createUsersRequest, mockUser)
}
```

----

<center>
🤓 Thanks for reading 🙏
</center>
can someone help me ,why my code not give any output ,only for this array it gives correct output  v[1,3,2,4]........
Published: 2021-06-26 19:20:29

#include<iostream>
#include<bits/stdc++.h>
using namespace std;
   void great(int v[],int n){
   vector<int>k;
    stack<int>s;
    for(int i=n;i>=0;i--){
        if(s.size()==0){
       k.push_back(-1);
       s.push(v[i]);
        }
        else if(s.size()!=0 && v[i]<s.top()){
            k.push_back(s.top());
            s.push(v[i]);
        }
        else if(s.size()!=0 && v[i]>s.top()){
            while(v[i]>s.top() && s.size()!=0){
                s.pop();
            }
            if(s.size()==0){
                k.push_back(-1);
                  s.push(v[i]);
            }
            else{
                k.push_back(s.top());
                s.push(v[i]);
            }
        }}
    reverse(k.begin(),k.end());
  // for(int c:k){
    for(int c=0;c<k.size();c++){
  cout<<k[c]<<" ";  
    }
    }
    int main(){
        int v[]={1,3,2,4} ;
        int n=4;
        great(v,n);
    }
Intro to React Select pt. 1
Tags: react, ui, libraries
Published: 2021-06-26 19:17:11

Today is the first part of my series on [React Select](https://react-select.com/home).  This intro is perfect if you are completely new to React Select or React in general.

##Setting things up
I started by setting up a base project using [create-react-app](https://github.com/facebook/create-react-app).  I called my app "demo-app".
`npm create-react-app demo-app`

Once my app is ready to use, I installed React Select and got to work!
`npm i --save react-select`

##Utilizing React Select
Now that I have React Select installed, I can begin to use it by importing it and referencing it.
![A simple implementation of React Select with a placeholder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acxskhd5f6dq8g9et5u9.png)
 
##Adding Options
Next, we can add an option to the select in the format of: 
`{ value: 'value1', label: 'Label 1'}`
![Now the React Select has a single option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i45sbjfbzyfiln1q63os.png)

Now that we have a simple implementation ready, I used [GitKraken](https://www.gitkraken.com/invite/62u1vDsC) to view & commit my changes.

And there you have it! Keep an eye out for my follow-up articles that show you more advanced usages of React Select.
 
You can view of video walkthrough of this on [YouTube](https://www.youtube.com/watch?v=3ad2684PA4Y)!
A few CSS tricks that frontend developers should know
Tags: webdev, css, tricks, tips
Published: 2021-06-26 19:08:29

Here is a few tricks that I encountered in the process of making CSS and learned how to solve it in a simple way.

###1. Vertical alignment
I offten use this in a CSS Navigation Menu.
![vertical-alignment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44lgx4zzqnybr5axiany.png)
###2. Remove white space below image
![remove-white-space-below-image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dawvrgucrahx4n2xux45.png)
<strong>Solution</strong>
.img-css {
    width: 300px;
    height: 200px;
    display: block;
}
<strong>or</strong>
.img-css {
    vertical-align: middle
}
###3. Using display: flex, the icon is distorted when the text is long
![using-display-flex-the-icon-is-distorted-when-the-text-is-long](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aezv16jmt50yc0vpjv9c.png)
<strong>Solution</strong>
.cc {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  margin-right: 20px;
  <strong>flex-shrink: 0;</strong>
}
###4.  Truncate Text
<strong>Solution</strong>
{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
![truncate-text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8df7skeoc5k8cjutk4m.png)
###5. Disable Text Selection Highlighting
If we want to disable the highlight effect.
<strong>Solution</strong>
user-select: none;
![Disable-Text-Selection-Highlighting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecncyctsdvrqz31crm2p.gif)
###6. Make a Textarea Unable to Resize
![Make-a-Textarea-Unable-to-Resize](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvzlsbu3foxmc3kj1vrp.png)
###7.  Math with Calc
![Math-with-Calc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mnluduilys4poc10rf0.png)
###8. Change an HTML5 Input Placeholder Color
![Change-an-HTML-Input-Placeholder-Color](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pom55y4ralmdzdhuc71p.png)

The article will still be updated with more cool things about CSS. Thank you for your support and reading until now. 
My blogs [hoangkhanh.tech](https://www.hoangkhanh.tech)
Thank you!