teleren/devto huggingface dataset:
Javascript -- Array and useful methods
Tags: javascript, node, arrays, methods
Published: 2020-11-21 08:24:58

>**join() method joins an arrow using a delimiter.**
```
arr = [1,2,3,4];
var a = arr.join(' '); // a = 1234;
```
_join() method acts like the toString() except we can specify the delimiter._




>**pop() deletes the last element in the array **
_// returns the value that was popped._
>**push() pushes an element in the last grid of the array **
_// returns the new length of the array._

>**shift() removes the first element in the array **
_// returns the removed value._
>**unshift() pushes an element in the first grid of the array **
_// returns the new length of the array._



>splice(position, number of elements, new elements);
splice helps in deleting elements of the array and sending out the same array not a copy.

```
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
//returns [ Banana,Orange,Lemon,Kiwiz,Apple,Mango ]

fruits.splice(2,2, "Pom", "Straw");
//returns [ Banana,Orange,Pom,Straw,Apple,Mango ]

fruits.splice(2,2);
//returns [ Banana, Orange, Apple, Mango ]
```

> The concat() method creates a new array by merging (concatenating) existing arrays:

```
var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys); 
// concatenates (joins) myGirls and myBoys
```

_The concat() method also takes string as arguments. We can also use two arrays in the argument to concat three arrays._


>The slice() method slices out a piece of an array into a new array.
_This example slices out a part of an array starting from array element 1 ("Orange"):_
```
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
// returns [“Orange”, “Lemon”, “Apple”, “Mango”];
```
_It is important to understand that this method returns a new array!_
_The slice() method can take 2 arguments like slice(1,3)
The method then selects elements from the start argument, and up to (but not including) the end argument._
```
var citrus = fruits.slice(1,3); // returns [“Orange”, “Lemon”]
```

>**The sort() method sorts an array alphabetically. The reverse() method reverses the element in an array.**
_However, by default sort() method sorts values as strings. So, in order to sort numbers we have to use compare function. Let’s use an example._
```
var points = [20, 30, 10 4, 70, 44];
points.sort(); 
// returns [ 10,20,30,4,44,70 ] since the problem is 2 comes after 1 and so on.
```
_So using compare functions we can solve this problem._
```
var points = [20, 30, 10 4, 70, 44];
points.sort(function(a,b) {return a-b}); // ascending order.
// here two elements are pitted against each other. If the result //is negative, a is sorted before b, and if result is positive //then b is sorted before a.
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});
// sorts randomly
```

>Sorting object arrays.

```
var cars = [
	{type: ‘Volvo’, year:2016},
	{type: ‘BMW’, year:2018},
	{type: ‘Merc’, year: 2019}
];
cars.sort((a,b) => a.year - b.year);
```
#PureCSS - Responsive Chicken
Tags: codepen, purecss, css
Published: 2020-11-21 08:21:56

---
title: #PureCSS - Responsive Chicken
published: true
tags: codepen, purecss, css
---

<p>Pure CSS Responsive Chicken</p>

{% codepen https://codepen.io/AsyrafHussin/pen/QWEXgrZ %}
Write Operation / MongoDB
Tags: mongodb, node, database
Published: 2020-11-21 08:13:08

```db.<collection>.insert([{},{}], {ordered:false})```

If we set ordered to false, then inserting a set of documents (some of with same id as previously inserted docs) will not completely bring the insertion functionality to a halt. It would rather look for other documents as well hoping to find new ids to insert.

```db.<collection>.insert([{},{}], {w:1, j: undefined})```

 
`w` simply means to write. And the number indicates to how many instances, in case we are using multiple instances on one server, we want this write to be acknowledged. `w : 1` is the default and it says hey the mongodb server should have accepted that write. The storage engine is aware of it and will eventually write it to the disk. This basically acts like an acknowledgement; after the write is successful, the server sends out an acknowledgement.
If `w: 0` , then the write is superfast, but you dont receive any acknowledgement if the write was successful..

The `j` stands for the journal.The journal is a separate to-do file used by the storage engine to write on before actually writing it to the disk. This ensures security if the server fails writing to the disk in case of a failure. Writing to the journal has less overhead because it simply stores the query.

The above will only be done if we set `j : true`.

There is also the option of `wtimeout`, which indicates a timeout during the write operation.. Say you have a network failure in the event of a write, the `wtimeout` gives the option to hold on to the query till the network reconnects. This also is a security feature, that ensures a smooth write operation.

```db.<collection>.insert([{},{}], {w: 1, j: true, wtimeout: 100})```
AWS Re:Invent Con - One-Pagers
Tags: aws, reinvent, onepager, cloud
Published: 2020-11-21 08:10:14

Like every year, I will publish my "One-Pager" recap of all pre / re:Invent launches and announcements.

This year will be more collaborative as the Markdown files are on GitHub. Any volunteers to help me to catch them all?

- https://github.com/zoph-io/awscon-onepager/blob/master/reinvent/reinvent-2020.md
GitHub Profile README : Animated Dynamic Quote Generator
Tags: javascript, node, github, markdown
Published: 2020-11-21 07:58:38

As everyone must be aware of the feature launched by GitHub around 6 months back called **[Github Profile README]()**, where GitHub allows you to create a special profile for adding simple developer portfolio based on your creativity.

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

Inspired by [@anuragharza](https://dev.to/anuraghazra)

---


This article is about the release of v1.0 of the [github-readme-quotes](https://github.com/shravan20/github-readme-quotes).

# GitHub Dynamic Quote Generator

GitHub Dynamic Quote Generator simply allows you add an image link in the markdown (README.md) and it will show you dynamic quote for every user visiting your GitHub account.

##### Example Post:

![ Example Post](https://dev-to-uploads.s3.amazonaws.com/i/f5z8ge2bvs53bvqmtlbr.png)

## Features

- Quotes Layout
- Quotes Design
- Quotes Animation
- Quotes Themes
- Customization

 <a href="https://github.com/shravan20/github-readme-quotes">
    <img align="center" src="https://github-readme-stats.vercel.app/api/pin/?username=shravan20&repo=github-readme-quotes&theme=gotham" />
  </a>

## Live Demo:

**Default Theme**:

![Quote](https://github-readme-quotes.herokuapp.com/quote)

**Dark Theme**:
![Quote](https://github-readme-quotes.herokuapp.com/quote?theme=dark)

There are more themes you can explore in the [repo](https://github.com/shravan20/github-readme-quotes)

**Default Animated Dark Theme**:

![Quote](https://camo.githubusercontent.com/0be5e2412bd0df6265d733da866550d1db0f65b64983e240f13fa5000b050967/68747470733a2f2f6769746875622d726561646d652d71756f7465732e6865726f6b756170702e636f6d2f71756f74653f7468656d653d6461726b26616e696d6174696f6e3d67726f775f6f75745f696e)

**Socrates Layout**:

![Quote](https://github-readme-quotes.herokuapp.com/quote?theme=dark&layout=socrates)

### Stack

| Stack / Platform Used  |
|:-:|
| Node.js  |
|  Express.js |
|  Heroku |


[Deployed Link](https://github-readme-quotes.herokuapp.com/quote) : https://github-readme-quotes.herokuapp.com/quote

[GitHub Link](https://github.com/shravan20/github-readme-quotes) : https://github.com/shravan20/github-readme-quotes

{% github shravan20/github-readme-quotes %}

Check out the [docs to learn more](https://github.com/shravan20/github-readme-quotes#github-readme-quotes)

We hope you guys liked the project. And make 
sure to give it a star on GitHub.

Featured on Twitter:

{% twitter 1330469327540264963 %}
200 HTTP Response Abuse
Tags: discuss, watercooler, api, webdev
Published: 2020-11-21 07:53:04

Let's be honest and real, I'm sure that I'm not the only one experiencing this. 

Are you or your co-worker, especially the backend developer, made all the responses always to be `200` even though it returns an error message like the server's internal error or the client's validation error?

What is your or their intention to make it that way? while there are standardized and appropriate http codes for specific cases out there.

If you wonder how to find these http codes and their respective meaning, I use the symfony http foundation as reference: [Symfony HTTP Foundation component](https://github.com/symfony/http-foundation/blob/5.x/Response.php)


_________________________

cover image from: https://www.youtube.com/watch?v=nSKp2StlS6s
How to Install Ubuntu on Windows 10 (WSL)
Published: 2020-11-21 07:41:22

1)Open control panel on your pc/desktop.
2)Click on programs and then click on programs and features.
3)Now, click on windows subsystem for linux.
4)Then it asks to reboot your pc then click reboot now.
5)After restart go to command prompt.
6)Write bash and press enter
7)Copy the link given there to go to website and download.
                      (or)
Go to microsoft store and search "ubuntu" and press get and wait for installation.
8)After installation go to ubuntu terminal.
9)It asks us to give UNIX username and password.
10)After successful registration clear the terminal and write a command cd Desktop/.
11)Now create your first file using unix command like text.txt and press enter.
12)Then you can see a file on desktop.
13)This is how you can dual boot windows alongside ubuntu.
Monitor Competitor Prices on eBay with Python and BeautifulSoup
Published: 2020-11-21 07:29:47

One of the most significant applications of Web Scraping in retail and e-commerce is in monitoring competitor price movements. This, when done well, can mean extra revenue and also will allow the retailer to ensure that they are always in the game and are not taken by surprise by anything the competition is doing.

Here is a simple script that does that. We will use BeautifulSoup to help us extract information, and we will track the prices on eBay.

To start with, this is the boilerplate code we need to get a page on Amazon and set up BeautifulSoup to help us use CSS selectors to query the page for meaningful data.
We are also passing the user agent headers to simulate a browser call, so we dont get blocked.

Now let's analyze the eBay site for players in the iPhone market, specifically the iPhone 8 with 64 GB storage.
And when we inspect the page, we find that each of the items HTML is encapsulated in a

Tag with the class s-item
We could just use this to break the HTML document into these cards, which contain individual item information.
And when you run it.
You can tell that the code is isolating the cards HTML

on further inspection, you can see that the Title of the product always has the s-item__title class and the price has the s-item__price class. Let's also get the number of reviews and ratings while we are at it.
We have also tried to get the location and the shipping costs, all crucial pieces of information.

And when run.
Produces all the info we need.

In more advanced implementations, you will need to even rotate the User-Agent string, so eBay cant tell it the same browser!

If we get a little bit more advanced, you will realize that eBay can simply block your IP, ignoring all your other tricks. This is a bummer, and this is where most web crawling projects fail.

Overcoming IP Blocks

Investing in a private rotating proxy service like Proxies API can most of the time make the difference between a successful and headache-free web scraping project, which gets the job done consistently and one that never really works.

Plus, with the 1000 free API calls running an offer, you have almost nothing to lose by using our rotating proxy and comparing notes. It only takes one line of integration to its hardly disruptive.

Our rotating proxy server Proxies API provides a simple API that can solve all IP Blocking problems instantly.

With millions of high speed rotating proxies located all over the world
With our automatic IP rotation
With our automatic User-Agent-String rotation (which simulates requests from different, valid web browsers and web browser versions)
With our automatic CAPTCHA solving technology
Hundreds of our customers have successfully solved the headache of IP blocks with a simple API.

A simple API can access the whole thing like below in any programming language.
My First MERN APP
Tags: node, mongodb, react, firstpost
Published: 2020-11-21 07:28:35

After learning from course, I wanted to create something to check how much i have learned.
So i came up with creating a anime site, which allow users to watch their favourite anime also like,comment,bookmark for watching later

Its also has a dashboard for adding content
 ![Dashboard](https://dev-to-uploads.s3.amazonaws.com/i/d0udm6svtpyrdchnwdi3.png)

if you got error on signup ignore it, my mailgun account got blocked thats why it showing error while sending a signup email.
site : https://animebeatfree.herokuapp.com/
source: https://github.com/C-A-Y-D-E/anime
React Router Tutorial for React Beginners
Tags: react, javascript, beginners, tutorial
Published: 2020-11-21 07:19:26

---
title: React Router Tutorial for React Beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/o551pkalrcby71h10acj.png
published: true
description: Quick beginner tutorial on react router
tags: react, javascript, beginners, tutorial
---

In this quick tutorial I cover all the fundamentals that react beginners need to know to understand how react router works, how to set it up and how to use it in your projects! You'll learn about the Link, Route, and Switch components , dynamic routing, programmatic navigation with history, and how to implement 404 page routing.

Let me know what you think! 

{% youtube wNXVTKP7t-U %}
Why Python ?
Tags: python
Published: 2020-11-21 07:11:06

There are many different programming languages available for the modern computer,and some still available for older 8 and 16-bit computers too. 
Some of these languages are designed for scientific work, others for mobile platforms and such. So why choose Python out of all the rest? 

Ever since the earliest home computers were available, enthusiasts, users and professionals have toiled away until the wee
hours, slaving over an overheating heap of circuitry to create something akin to magic.

These pioneers of programming carved their way into a new
frontier, forging small routines that enabled the letter ‘A’ to scroll across the screen. It may not sound terribly exciting to a generation that’s used to ultra high-definition graphics and open world, multiplayer online gaming. However, forty-something years ago it was brilliant. 

More general-purpose programming is used to create programs,
apps, software or whatever else you want to call them. They’re
widely used across all hardware platforms and suit virtually every
conceivable application. Some operate faster than others and some
are easier to learn and use than others. Python is one such general purpose language.

Python is what’s known as a High-Level Language, in that it ‘talks’
to the hardware and operating system using a variety of arrays,
variables, objects, arithmetic, subroutines, loops and countless
more interactions. Whilst it’s not as streamlined as a Low-Level
Language, which can deal directly with memory addresses, call
stacks and registers, its benefit is that it’s universally accessible and easy to learn. 

Python is free to download, install and use and is available for Linux, Windows, macOS, MS-DOS, OS/2, BeOS and IBM i-series machines. 
It has been voted one of the top five programming languages in the world and is continually evolving ahead of the hardware and Internet development curve.

So to answer the question: why Python? Simply put, it’s free, easy to learn, exceptionally powerful, universally accepted, effective and a superb learning and educational tool.
Deploying React App to Netlify
Published: 2020-11-21 07:10:23

Steps
1. Login/Signup to your netlify account from your browser
2. Go to your project directory
3. `npm run build`
4. push the code to github
5. Install netlify-cli `npm install netlify-cli -g`
6. Run `netlify deploy`
7. Select `Create and configure a new site`
8. Enter a site name as your choice otherwise it will create a random site name.
9. Enter your build folder name `./build`
10. Finally run `netlify deploy --prod`
11. Once it will again ask for build folder name. Then enter `./build`
How Google Sheets and Webhooks made my life easier
Tags: appscript, javascript, googlecloud, googlesheets
Published: 2020-11-21 06:50:53

I work in Tech Support and Google Sheets helped me  automate repetitive tasks!

This helped me push messages to various teams who use __Google Chats__, the Webhook option present in Google Chat is amazing. 

The Goal was to track Incidents(Outages) and then push notifications to various teams which was manual before I found out about __Google Sheets Simple Triggers__.

Here are few links that might help you get started.

[How to Build Apps using Google App Script](https://www.google.com/script/start/)
[Read more about Google Sheets Triggers here](https://developers.google.com/apps-script/guides/triggers/)
[Read more about Google Chat Incoming webhooks](https://developers.google.com/hangouts/chat/how-tos/webhooks)


Now all we had to do was enter the data in a specific Cell and the `onEdit()` function would read it and post it to the necessary chat rooms.

You will need to add the trigger from
[Google Scripts](https://script.google.com)

Enough talk! Show me the code! 


```
function myEditNew(e) {
// The e is an event Object
//https://developers.google.com/apps-script/guides/triggers/events

if (e.value)
{
Logger.log(e.range);

Logger.log("Data: "+e.value);

var val=e.value;
// This function is to get the current user that created the task its documented in the Gist at the end of the post
var cur_user=getCurrentUserEmail();

var text = Utilities.formatString('Incident created by *%s*: ```%s``` <users/all>',cur_user,val);
}

//1. Bot Test room
// [Args[Webhook URL, Space Name, Thread Name]]

// To get the Thread ID read this Stackoverflow answer

// https://webapps.stackexchange.com/questions/117392/get-link-to-specific-conversation-thread-and-or-message-in-a-chat-room-in-google

var urls = [
  [
   "https://chat.googleapis.com/v1/spaces/room_id/messages?key=Webhook_ID",
   "spaces/room_id/messages/space_name.space_name",
   "spaces/Thread_ID/threads/Thread_ID"
   ],
  
];

// Lots of Logging to see if Things are working properly.
Logger.log(e.range.getA1Notation());
Logger.log(e.range.getColumn());
Logger.log(val);


if (e.range.getA1Notation().startsWith('C') && val != "")
{
// Synchronously Post it to the Rooms
for(i=0;i<urls.length;i++)
{
var payload={
  "name":urls[i][1],
  "thread":{
    "name":urls[i][2]
  },
  "text":text
};
var options = {
  'method' : 'post',
  'contentType': 'application/json',
  // Convert the JavaScript object to a JSON string.
  'payload' : JSON.stringify(payload)
};
Logger.log(options);

// UrlFetchApp Documentation
// https://developers.google.com/apps-script/reference/url-fetch/url-fetch-app
var response = UrlFetchApp.fetch(urls[i][0], options);
Logger.log(response);

}

}
}
```
[Github Gist of the entire code](https://gist.github.com/afro-coder/ebf01c3718f9be47f530168ed62fc13e)



Thank you for reading, if you like this article feel free to share it as always I'm open to constructive feedback and criticism, feel free to leave a comment or message me.
Linux Rice (Coder edition)
Tags: linux, i3, ricing, productivity
Published: 2020-11-21 06:27:54

Operating System: MX Linux
Desktop Environment: XFCE
Window Manager: i3wm
Status bar: i3status
Launcher: dmenu / rofi
Notification: dunst
File Manager: Thunar / NNN / Ranger
Browser: QuteBrowser / Chrome / Firefox
Text Editor: NeoVim / VS Code / Geany
Terminal: xfce4-terminal / Hyper
Shell: ZSH / BASH
Word Processor: FeatherPad
Document Viewer: mupdf
Video Player: MPV / VLC
Music Player: CMUS
Podcast: Clementine
Music Visualizer: CAVA
Audio Controller: Pavucontrol
Image Viewer: FEH / NOMACS
Password Manager: ButterCup
Screen Recorder: Kazam
Screenshot: Flameshot
System Info: Neofetch
Process Viewer: htop
Version Control: git
Color Schemes: pywal
Wallpapers: [IG acc: codingwitharman](https://www.instagram.com/codingwitharman/) [Wallpaper Drive](https://drive.google.com/drive/folders/1xUwXUqFqshs3da1ppzOfecJM55AEhBxH)


DOTFILES: [Linux rice Coder Edition](https://github.com/VishnuDileesh/linux-rice-coder-edition)


![Vishnu Dileesh Linux rice screenshot](https://dev-to-uploads.s3.amazonaws.com/i/whl9ylwyuc1s1wjeltsu.png)
Best browser  extensions
Tags: discuss
Published: 2020-11-21 06:18:37

Good morning! I discovered a new helpful Addon for Firefox, it is called Onetab. If you need to use a lot of tabs Onetab can convert all of them into clickable links in one tab. This saves RAM too.

Which are your favorite browser extensions and what do they do? :)

Onetab Addon: https://addons.mozilla.org/en-US/firefox/addon/onetab/
17 Beginner Tips For Software Engineers
Tags: programming, python, android, codenewbie
Published: 2020-11-21 06:14:20

Software engineering is a branch of computer science that includes the development and building of computer systems software and applications software. Computer systems software is composed of programs that include computing utilities and operations systems.

 As popular as it is today, beginners tend to lose interest in the process of learning. The following will help you gain a depth understanding of what the field entails. Let's get started!

##1. Write it down before you code
Understand the problem before choosing a way to solve it, Write it down on a paper, or design the UI for better understanding. 

##2. Ask Google for answers 
 Yeah, "Google is the best teacher." as quoted. Always ask Google before you ask anyone. 

##3. Learn the best way to do things 
 Don't stick to the awful method of problem-solving. Deal with your weakness.

##4. Stay updated
 Remember that technology always changes.

##5. Document your code
 It explains the reliability of your project. Neat code without documentation is not complete.

##6. Don't be afraid of bugs
 I have learned more by fixing bugs. Stackoverflow is there to rescue you. Don't abandon the project too soon.

##7. Finish undone projects 
Laziness, lack of motivation, inability to find solutions to problems will lead to this.

##8. Don’t sell yourself short 
Software engineer is probably the job with the highest demand. Companies need you. Aim higher! 

##9. Work on your LinkedIn profile 
 A poorly maintained profile is worse than no profile.

##10. Make use of version control 
 It makes it easy for other developers to work with you on the same project. It also helps to share and reuse your project. Github is widely used to achieve this. 

##11. Train your communication skills 
One of the biggest threats for any project is miscommunication amongst the team. 

##12. Exercise regularly 
I do this often to stay energetic. It's a great way to refresh my body system. 

##13. Invest in Learning
Udemy, Coursera, Youtube, FreeCodeCamp Khan Academy, Udacity, Medium. etc..contains helpful resources to help you improve. 

##14. Plan before you work 
List out the technologies needed in the project, set a deadline, and checklist your progress daily. 

##15. Don't hesitate to ask for help 
It doesn't make you unprofessional. It's right to ask for help when stuck. You don't know it all.

##16. Trends don't matter 
A new framework or technology might not be necessary to learn.

##17. Get enough sleep to stay active
 Staying up all night decreases your motivation. Spending donkey hours coding will not make you a pro. Don't stress your brain.


Happy Coding!  🙂