teleren/devto huggingface dataset:
JavaScript Array Methods
Tags: javascript, beginners, computerscience, codenewbie
Published: 2021-01-14 15:52:09

**concat( )** - Merges two or more arrays into one new array.

**copyWithin( )** - Copies array elements within the array, to and from specified positions.

**indexOf( )** - Returns the first index at which the given element is found.

**lastIndexOf( )** - Gives the last index from the end of the array.

**includes( )** - Checks if the array contains the specified element

**join( )** - Concatenates all the elements of an array into a new string and returns the string.

**entries( )** - Returns a key/value pair array iteration object

**every( )** - Executes a given function on every item of an array and returns true only if the callback function returns true for every element of the array.

**fill( )** - Changes all the elements in an array with a provided static value.

**filter( )** - Creates a new array with every element in an array that passes a test.

**find( )** - Returns the value of the first element in an array that passes a test.

**flat( )** - Creates a new array with all the sub arrays elements concatenated into it.

**forEach( )** - Executes a given function on every element in an array.

**from( )** - Creates an array from an object.

**pop( )** - Removes the last element of an array.

**push( )** - Adds a new element at the end.

**shift( )** - Removes the first element in the array.

**unshift( )** - Adds a new element to the beginning.

**slice( )** - Returns a shallow copy of a portion of an array into a new array object.

**splice( )** - Removes or replaces elements in an array in a specified way and position.

**sort( )** - Sorts the elements of an array by manipulating the array.

**reverse( )** - Reverses an array, as suggested by its name.

**reduce( )** - Executes a callback function on every element of an array and returns a single output value.

**reduceRight( )** - Reduces the values of an array to a single value (right-to-left).

**map( )** - Executes a given function on every element of the array and returns a new array.

I hope you found this list of array methods helpful. Don’t forget to post your queries, doubts in the comment section below. I will be more than glad to help!

Thank You!
Myths about IT Staff Augmentation
Tags: staffaugmentation, itservices
Published: 2021-01-14 15:51:22

[IT Staff Augmentation] (https://www.sundevs.com/staff-augmentation) has become a trendy way of outsourcing, but there are still common impressions about it that are wrong and don't allow corporations to see the conveniences of this strategic solution. Some of these are:

#### **1. Is too expensive:**
There is an idea that a company doesn't save money by employing developers for a project, however, when comparing the hourly rate that the augmented staff could get and the staff’s salary, it continues to be less expensive than hiring a permanent employee. The costs an employer can save include fixed wages, legal, premiums, corporate aids, and social security benefits. 

####**2. Can't control the projects:**
Not true. The project director from the hiring corporation will be able to be in contact with the developers and their dedicated team, which is why he will have complete command in the development of the project. The incorporated developers will work exclusively in these activities and the company’s vision will be faultless.

####**3. Communication problems:**
It's typical that these services are offered with offshore dedicated teams that are located in different countries  that the subcontracting company. It's believed that there will be a limitation of matching time zones, but communication can be very efficient with the right tools implemented to the project. Tools that help having great communication: Confluence, Slack, Jira. 

####**4. Cultural differences impact the project:**
This myth has to be denied. When a company in the United States hires staff to work with a development team in Latin America, one of the pluses is the time zone similarity. Also, culture isn't a reason for struggle. Before hiring the developers, the company can explain the internal culture and determine how the developers will adapt to it. 

####**5. Don't get high quality:**
There are successful cases that have been evidence staff augmentation helps the operating efficiency. Also, remote employers are found to be more dedicated to their job. The partner that offers offshore services work on different shifts, they adapt to their work and time zone and offer an alternative vision of the processes with high quality.

####**6. It’s too risky:**
Before hiring an IT resource, a pre-selection and selection process is done, those who adapt appropriately to the profile needed. Staff Augmentation also offers long term welfare by hiring staff to cover instant and particular business needs. 

###**How to break these myths?**
A way of breaking the myths and that companies start thinking about the IT Staff Augmentation model as an effective answer for their projects is clarify the concepts and the types of services of staff augmentation that exist and determine which is the one that better match their requests and projections.
Patterned Text Effect
Tags: html, css, javascript, beginners
Published: 2021-01-14 15:47:51

Hello, guys in this tutorial we will create a patterned text effect using HTML & CSS.

{% youtube Fo22cj4Ks6g %}
<a href="https://blog.stackfindover.com/patterned-text-effect/" rel="dofollow">Download Source Code</a>
Enough JavaScript to get you Started : #8 Loops
Tags: beginners, webdev, 100daysofcode, javascript
Published: 2021-01-14 15:45:28

### how to not write your code 🎃
👉 okay ! this is going to be a funny story , when i started programming someone challenged me to print 1 to 20 on console. i laughed because it was too easy 

👉 completely out of logic i started typing `console.log() for 20` times and yelled **i'm done**

👉 this is how i wrote progam
```
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
console.log(6)
console.log(7)
console.log(8)
console.log(9)
console.log(10)
console.log(11)
console.log(12)
console.log(13)
console.log(14)
console.log(15)
console.log(16)
console.log(17)
console.log(18)
console.log(19)
console.log(20)
```

👉 this looks stupid right? 😂 there's a principle in coding world known as **DRY (don't repeat your self)** and what i did was exact opposite of it 😂

### Concept of Loops came in picture
👉 After i showed code to my colleagues they said there's something known as loop

👉 Loops are condition based iterative blocks which repeats themselves n number of time based on condition

### Types of loop

1. **For loop (we'll be learning this ✅)**
1. While Loop
1. Do...while Loop
 
### Logical flow of Loops

![Artboard – 6.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610011071740/voRVolcVR.png)

### For Loop Syntax
```
for(intial value;exit condition;update statement)
{
    // loop body | block
}
```

### Refactoring our old code
```
for(var i=1;i<20;i++)
{
      console.log(i);
}
```
👉 This syntax makes much more sense then previous one , and follows DRY principle

👉 meaning of this code : _"start from 1 , increase by 1 every time and exit from loop when it becomes greather than 20"_

<p>Let me know in comment section if you have any doubt or feedback. it's always worth to give time to thriving developer community :) <br>
<br>
Keep Coding ❤
</p>

#### Hey , Let' Connect👋
 [Twitter](https://twitter.com/codarsh) / [Github](https://github.com/WhoAdarshPandya/)
Converting a KML to GeoJSON
Tags: tutorial, javascript, node, mapbox
Published: 2021-01-14 15:42:07

> This post is part of my [**Building Interactive Maps with React**](https://gumroad.com/l/mapbox-handbook) course - a course for anyone wanting to learn how to build interactive maps and integrate them into their React applications. If you enjoy this guide, then chances are you will enjoy the course too!

Spatial data formats can be a pain to work with, especially if you need to convert between them. On a recent project, I needed a way to easily convert a user uploaded KML or GPX file to GeoJSON in my app so that I could upload it to Mapbox. The solution was surprisingly straightforward. Enter the [togeojson](https://www.npmjs.com/package/@tmcw/togeojson) package. This project was originally created and maintained by Mapbox but has since been abandoned. Luckily, [Tom MacWright](https://macwright.com/work/) (the original author of the Mapbox package), has been maintaining his own fork of the package.

This guide is going to be short and sweet which is a testament  to the ease of use of `togeojson`. This guide will walk you through how to use the package in a Node.js project.

## Before You Start

- Setup a new project directory and run `yarn init -y`
- Make sure you have a KML file to convert. If you don't, here is one you can [download](https://drive.google.com/file/d/1W4Tv30qlUlPiyovFcvrmxzw4x5-k1lrT/view?usp=sharing).

## Converting Our KML

To begin, we need to install `togeojson` along with `xmldom` for xml parsing.

```bash
yarn add @tmcw/togeojson xmldom
```

After verifying that it installed correctly, we will create a new file called `index.js` and add the following to it, replacing `<PATH_TO_KML>` with the path to your KML.

```jsx
// index.js
const converter = require("@tmcw/togeojson");
const fs = require("fs");
const DOMParser = require("xmldom").DOMParser;

// read in our KML file and then parse it
const parsedKML = new DOMParser().parseFromString(fs.readFileSync("<PATH_TO_KML>", "utf8"));

// convert our kml to geojson and store the results
const geojson = converter.kml(parsedKML);
```

And that is it! Now that you have the converter setup, there is a whole slew of other things you can do with the output like....

- write the converted GeoJSON to disk
- transform the GeoJSON, adding or subtracting properties based on the need of your project
- upload the GeoJSON to a platform like Mapbox or Gaia
- add it to a map in your own app
- and the list goes on....

I could go on all day with that list and all things map in general but will leave it here.

If you found this post useful, please retweet, share, or pick up a copy of [The Mapbox Developer's Handbook](https://gumroad.com/l/mapbox-handbook)!
Top-Down Object-Oriented Architecture: Why it is the most flexible, reusable, extensible, and robust approach to web middleware.
Tags: webassembly, javascript, webdev, gamedev
Published: 2021-01-14 15:36:06

Today's web as a distributed application platform still could not be extricated from the past 50 years of software development model born out of a single, standalone computer.  That is, software are still built from bottom up and designed from the single perspective of a service provider.  As a result, web service subscriptions implicitly bind developers to rigid information models.  Integration becomes a major problem in modern web development and is completely dictated by third parties, both feature and time-wise.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fvhywo53qwwm2nrlg3ja.jpg)
           Figure-1: Programming Models Comparison 

What if we can turn this antiquated software development model on its head?  Giving web developers the power of software modeling via Unified Modeling Language(UML)-like approach from the top down, while simultaneously allowing them to integrate commercial REST API and/or compiled opern source software (WebAssembly) into micro-service providers form below, web developers can now assume complete control in creating their own semantic web, with added ability to mix and match unlimited feature sets independent of any third party.

oTakhi CloudFormation Platform features a top-down object-oriented programming model (See Figure 1).  It is composed of a object repository server and a UML client, called Condenser.  Web developers use Condenser to assemble molecules into reusable components called droplets.  Published droplets are stored in the repository for others to browse and reuse.

(1) Condenser and Micro-Service Providers
{% youtube FGp-frG6u_4 %}

(2) Dynamic Object Composition
{% youtube rl5t3BNJyQ4 %}

(3) Create Plug & Play Components from C++/C
{% youtube CaKEV9s4o1w %}

(4) Building Distributed Web Applications
{% youtube yUzTdXldTSE%}

(5) Managing Multiple WebGL scenes using CSS Grid
{% youtube fANKuWUcn_M %}

Please share your opinion.
MACH
Tags: mach, machalliance, machathon
Published: 2021-01-14 15:34:42

When looking for a best-in-class vendor or system integrator, be sure you’re working with an organization that understands what the future of composable software looks like.

They MUST be full compliance with MACH principles based on being Microservices-based, API-first, Cloud-native SaaS and Headless.

The ecosystem technology is: 

Micro Services
API First
Cloud Native
Headless
What is MACH?

M: Individual pieces of business functionality that are independently developed, deployed, and managed.

A: All functionality is exposed through an API.

C: SaaS that leverages the cloud, beyond storage and hosting, including elastic scaling and automatically updating. 

H: Front-end presentation is decoupled from back-end logic and channel, programming language, and is framework agnostic.

[Lear more](https://www.truongbui.com/2021/01/mach.html)
optimization with cluster
Tags: node, javascript, cluster
Published: 2021-01-14 15:33:58

hallo, today i though why not i actually show off something that's pretty nice that's been in nodejs, cluster. Now, yes cluster has been around for a very long time ( been around since node 0.10.48 to be exact ), and it has been one of the most useful modules for me imo. but, what exactly does it do, and why is it useful you might say?


well, there's many reasons. 
one could be to optimize a multi-thread CPU and run with more speed.
another could be you want to keep your database controller apart from the main process to speed things up.

no matter what it is, cluster is a wonderful choice.

My most recent project, quick-scripts ( You will learn more about this next month ), uses 3 threads total. it's as simple as this:
```js
import express from "express";
import cluster from "cluster";

if (cluster.isMaster) {
  const expressServer= cluster.fork() //express server (id 1)
  const dbc= cluster.fork() //database manager (id 2)
}
```

now, it may not look like much, but this is splitting up resources and optimizing speed.
now, each worker ( this is what you call the child of a parent process ), listens to the master ( the master is the parent of the cluster ), it's extremely simple to communicate between the two. all it takes is
```js
expressServer.send("deny all r")
```

and on the worker's end,

```js
process.on('message', message => {
    //...
})
```

and bam! you have a working communication between the two.

another thing cluster is useful for, is just clearing out a bit of clutter that normal processes make. it's simplistic, and denies the fame of childprocess, which imo is absolutely horrific to use.

now, lets go get cluster some rep it deserves for doing what it does.
First Project : Build a CLI app with External Data
Published: 2021-01-14 15:24:19

My first application ever before.Half success, half failure. But It was a precious project where I could learn a lot.

###Brief introduction of the application:
The CLI application I built for the first project at Flatiron is a very simple app that can list the menu of Dunkin' donut's espresso and coffee. By scraping the list of menu from the website, user can see more details about the menu chosen.

###How I scrape the data?
require 'nokogiri'
require 'open-uri'
URL = open("https://www.webpage") 
doc = Nokogiri::HTML(open(URL))
doc.css("class").
puts doc

By this way, I could get messy data that is difficult to read. The problem has begun here. I misjudged the data and I believed I could scrape the text I want. Without analyzing the data in details, I started to code my project, enjoyed CLI time for several days. The problem occurred at last. There were data not "scrapable". All 'Ingredients', 'calories' and 'Allergens' text data were unable to scrape. I struggle with scraping the data for several days because it seemed like just normal text data. What i learned a few days later was that it happened because the web page used 'JavaScript' for the certain data: which I needed.

I have not learnt JavaScript yet so I had to minimize and simplify my project finish up on time. As I mentioned before, there was actually a bigger plan than what this application I coded shows now. I should have scraped the data and see the details of it very carefully before I start to code. 

For this project, scraping external data might give more sources to build various applications. However, since the way 'scraping' has certain risk, for instance, each website may have different designs and use different languages with special styles, it will affect the application and someday the app will be no longer useful. 

So, next time? Definitely APIs rather than scraping web data.

### What I learned from the first project
1. creating/ editing ruby project files using gems.
2. Coding CLI class method and testing by bin/filename and binding.pry
3. The use of web scraping and what risk it has. Also why programmers are more likely to use APIs 
4. How to use github

  git status => if I want to check the status
  git add .<file path> = > add file
  git commit -am "any commit message" => to save my changes to the local repository. 
   -a 
     Includes all currently changed files in this commit
   -m <message>
     Sets the commit's message
  git push => to upload local repository content to a my github repo
What is a Good Code?
Tags: codequality, codenewbie, programming
Published: 2021-01-14 15:14:07

When I started with programming, to me, it was all about getting the job done. I was clueless about things like readability, scalability, commenting and all. Adding to this, I strongly believed in this idea - "_If it works, don't touch it._"

![If it works, don't touch it](https://dev-to-uploads.s3.amazonaws.com/i/zf6x0vnjxztksp5p7prj.png)

This ignorance was so evident in my code that anyone who would have read that could have told that either I don't know about it or I don't care, both are signs of a naive programmer. Because of this, I always found myself in situations where even I couldn't understand my code.

![The only god understands my code meme](https://dev-to-uploads.s3.amazonaws.com/i/oxymqjkcz59xayz1aair.jpg)

Well, it was all until one day when I came across this meme.

![Code Review meme](https://dev-to-uploads.s3.amazonaws.com/i/b92h3lorhx0tjszjku6k.png)

I got curious about this code review thing and did some google. That's when I came to know about things like code quality, efficiency, data structures and other necessary elements of a **Good Code**.

So, what exactly does it take for a snippet to be a Good Code? From what I understood, in a broad context, it should meet the following criteria.

1. It should be readable.
2. It should be scalable.

### What does it mean for a code to be readable?

By saying that the "_code should be readable_", what I mean is that is should be understandable. Not just to the computer or you. But also to people who are working on your code and who will manage your code in future. It should have a consistent coding style.

![Psychopath manages your code meme](https://dev-to-uploads.s3.amazonaws.com/i/ivjycc1d0o8l0indmii9.png)

### What does it mean for a code to be scalable?

By saying that the code should be scalable, what I mean is that the code should perform at par with the load. It should be able to manage user requests efficiently and accurately. It should be able to compensate in case the load increases and should utilize the hardware. In a broad context, it should be adaptable to change. Higher the adaptability, the more is the scalability.

![Writing good code](https://dev-to-uploads.s3.amazonaws.com/i/c2f8336x8j45qvslwruu.png)

What do you guys think makes a Good Code? Share your views in the comments. And if you liked this post or found this post meaningful, do hit ❤ .

See you next time. Until then, keep learning, keep hustling.
“Como C@*+^ … con Git y no romper producción.”
Published: 2021-01-14 15:12:17

Todos alguna vez pusheamos un commit que no era, rompimos todo y sentimos pánico. Por suerte, git nos permite reparar esos errores y volver el tiempo atrás a donde todo funcionaba perfectamente.
Hoy vamos a hablar de **CHERRY-PICK** un comando que permite elegir uno o más commits de una rama y aplicarla en otra.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4y7ayxk49fer78hb2osk.png)

##¿Cómo usar git cherry-pick?

Lo único que necesitamos es saber el hash del commit específico que queremos aplicar a nuestra rama. ¿Cómo hacemos eso? en la terminal vamos a revisar <git log> 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/amly8djl896qy683ry9f.png)

* Vamos a buscar el hash (número del commit) que acabamos de hacer y lo vamos a anotar en un block. En ese mismo log, buscamos el hash del commit al que queremos traer a nuestra rama.También lo podemos buscar en github/gitlab/
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n9uuj071tvx3kcc7acov.png)

* Ahora en la terminal, vamos a escribir:
→ git reset --hard **n° commit que necesitamos**
→ git checkout tu-rama
→ git cherry-pick **n° commit que hicimos --no-commit**


¡Y ya podemos volver a trabajar! Aunque no se trata de una de las herramientas más usadas de git, puede resultar muy práctica y nos puede ahorrar mucho tiempo cuando trabajamos en varias ramas.
Tawk.to - Monitor and chat with the visitors on your website
Tags: opensource
Published: 2021-01-14 15:08:46

**Hello Dev's,**

**Tawk.to** is a good tool or simply say API for a website. I am using this service on my website to monitor and chat with the visitors on my website. It is a **free** and **easy** way to communicate with your customers. It provides a great dashboard where you can monitor customer activity in real-time.

#### Read here why tawk.to is free - It's probably not what you think...
**Link:-** https://www.tawk.to/why-free/

**GO create your account here:-** https://www.tawk.to/
**Visit my portfolio to see how it looks:-** https://arwazkhan189.github.io/

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/59mqp4r9n89yhftial7i.png)