teleren/devto huggingface dataset:
How to copy an Object in Javascript?
Tags: javascript
Published: 2021-01-05 19:41:48

Any change made in captain object will also reflect in person object.

 
 

```
const person = { name: 'Wes Bos', age: 80 };
console.log(person);
//{name: "Wes Bos", age: 80}
const captain = person;
console.log(captain);
//{name: "Wes Bos", age: 80}
person.age = 90;
console.log(captain);
// {name: "Wes Bos", age: 90} 
 
```
 
See We didn't even made any change to captin but the changes made to person object reflects on captain object as well.
This is because captain is not a copy of person object but it is rather a reference to the person object.
So Any change made in captain object will also reflect in person object.

```
const cap2 = Object.assign({},person,{age:12,number:99});
console.log(cap2);
const cap3 = {...person};
console.log(cap3);
```
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-01-05 19:33:42

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round-up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Tuesday, we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

### 2021 Resolution: Accessibility. Full Stop. 

@jaketracey shares a super helpful roundup of the top resources, development tools, continuous integration, and screen readers you’ll want to take a look at to improve the accessibility of your sites in 2021.

{% link https://dev.to/jaketracey/the-best-web-accessibility-tools-for-developers-in-2021-8c8 %} 


### Forecast: Word-cloudy


@alvaromontoro shared an awesome tutorial for building a word cloud for your blog. As Alvaro said, word clouds are  “a nice way to visualize the overall content of a site or article.”

{% link https://dev.to/alvaromontoro/create-a-tag-cloud-with-html-and-css-1e90 %} 

### Philosophies on focus 

@carmenhchung learned a few learnings from reading "Deep Work" by Cal Newport. What are you looking to get done in 2021?

{% link https://dev.to/carmenhchung/how-to-improve-your-focus-in-2021-1cce %}

### Enter the penguin

@lucasmc64 explains why Linux is “only a 7-headed monster if you want it to be.”

{% link https://dev.to/lucasmc64/linux-the-right-choice-39fj %}

### You don’t have to be Dale Carnegie to  get the attention of recruiters

@shaundai explains why making use of video was the game-changing prospecting tactic that they attribute their career-switching success to

{% link https://dev.to/shaundai/one-thing-that-made-my-job-application-stand-out-3dik %}

### Using Mongoose and saved user data to enable password resets.

@kelvinvmwinuka demonstrates how to handle password resets in ExpressJS.

{% link https://dev.to/kelvinvmwinuka/how-to-handle-password-reset-in-expressjs-ipb %}

### “It’s ok to ask yourself a hmmm…”

Yep — Especially when it comes to JavaScript. @snigo shared a few common JS “tips” that should make you go “hmmm” instead of “sign me up!”

{% link https://dev.to/snigo/5-javascript-tips-that-might-bite-you-back-2gie %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
3 Reasons Your Workplace Should Get on the Cloud With Microsoft 365
Tags: offers, officesetup, office365
Published: 2021-01-05 19:22:04

Cloud computing is all the rage these days, and in the workplace, it is increasingly becoming a de-facto standard. The ability to access your key data, and documents, from anywhere, and collaborate with team members seamlessly and securely provides great benefits to businesses as they seek to become more streamlined and efficient. Microsoft 365, the latest Office product from Microsoft, helps businesses in these ways by letting you work “on the cloud”.

The Agility to Work Anywhere
With Microsoft 365 you can access your key data and documents anywhere that you have an internet connection. Data hosted “on the cloud” isn’t stored on your local machine. It is stored in a central repository, remote from your location. This means you will be able to, for example, access key Excel spreadsheets anywhere, anytime, even from your smartphone. Whenever you can access the internet, you can access your information

Team Collaboration on Steroids
With the addition of Sharepoint, a collaboration between team members becomes a breeze. You can easily keep team documents, lists, and calendars synced, in addition to staying up to date on key business updates, news and events. Real-time communication with colleagues can be enabled directly and easily. Instantly respond to challenges in a team-based environment with Microsoft 365.

Enterprise-Class, Robust Security
One benefit of the cloud is that it makes enterprise-level security and reliability available to smaller businesses with tighter budgets. The simplicity of the cloud models simplifies IT management, allowing you to have more control over your data, and confidence that it is being kept safe.
Summary
In this era, businesses need every edge they can get to remain competitive. Microsoft 365 helps your business in this by allowing you to use enterprise-level technology, even on a small budget.

Microsoft 365 promises to be a boon to the business of all sizes, but especially small and midsized ones. With Microsoft 365 you can be “on the cloud”, with increased business agility, enhanced ability to collaborate, and peace of mind knowing your critical data is safe and secure. Get your Microsoft 365 from <a href="https://w-w-office.com/setup/">office com setup</a>
<a href="https://www.officecommsetup.com">www office com setup</a>
<a href="https://www.office-help-setup.com">www office com setup</a>
Generalist or Specialist: To the Vincis
Tags: career, writing, books
Published: 2021-01-05 19:20:21

How do you throw your dart? Everywhere or in the middle?


![rangebook](https://dev-to-uploads.s3.amazonaws.com/i/g44p912855pvyd66yz9k.jpg)

David Epstein in this book suggests throwing your dart everywhere even though the world expects you to focus on the target.

Here are my few thoughts on the topic.
 
Being a generalist is not about knowing more of everything but rather connecting more of everything.

Connecting is not as hard as it seems. It simply means putting the brain in a state of chaos. Chaos because it is not normal to connect more in an over-specialized world.

For instance, you are to watch a series of 10 videos to understand a new concept. Let's take 2 case studies of possible ways in accomplishing this task. 

Case Study A: Watches first video, second video serially up to the last video.

Case Study B: Watches randomly. Probably video 8, then video 6,4,3,2,7,1,9,10,5.

At the end of the video session, Case Study A would probably "know" more as his connection of the concept would be what is popular, expected, and the measure of judgment.

Case study B would probably "know" less or nothing as his connections may differ from the original intent of the author of the video but his connections are *his* - original. Case study B also would be in a position to make a lot more possible connections in a bid to find a structure to his now chaotic brain. Some of these connections may not make any sense while one or more could be that game-changing thought. Well, this is actually what creativity is.

However, the world is an over-specialized space and can't afford more people like Case study B especially in making decisions and proferring solutions. As it's time-wasting and largely experimental. We would rather settle for what we are used to. So, we are mostly forced to connect less. And be less brain chaotic.

Who doesn't want to make money lol?

Now.... **To the Vincis**

To the Vincis:

The passionate but not disciplined. 
The ones who start with the brightest flame. 
And stop at the middle when something else excites their brain. 
And then again. 
Start again. 
And a client is lost again. 

But then again. 
There are many other clients again. Because you know little of everything as they claim. 
Medicine. Music. Art. Science. Technology. 

To the Vincis: 
Aren't you going to be wretched? 
Because when discipline meets passion, passion feels pain. 

When the Michaelangelos meet the Vincis, the Vincis feel pain. 
Because the Michaelangelos are Angels, But the Vincis are controlled by their demons. 
Their lust, their passion is their sodomy. 

To the Vincis: 
You aren't geniuses. 
You only don't want to feel pain. 
You think work should be a pleasure.
And pleasure shouldn't be a pain. 

You are ridden by your pleasure and lust over everything. 

The horses- You lust. 
The money- You lust. 
Monalisa- You lust. 
And in all- You lost. 
And none- You love. 

Because love means commitment. 
Love means focus.
Love means dedication. 
Love means special. 
Love means pain. 

**To the Vincis**
Making a successful Battlesnake
Tags: javascript
Published: 2021-01-05 19:00:11

# What is battlesnake?
Battlesnake is a programming competition, and they have an amazing community. What you need to do is implement the battlesnake API in a webserver, and then let it play games!

## Step 0
Follow the quick start guide [here](https://docs.battlesnake.com/guides/getting-started) and get your snake up and running. 

## Step 1
For this series I'm going to be using javascript for the code examples, but you can use any language. The first thing to do is make sure that your snake is always online, you can use many methods of doing this (sorted from easiest to most difficult)
1. [uptimerobot](uptimerobot.com)
2. use Heroku's always online (requires a credit card, but doesn't bill you).
The always online allows your snake to participate in global arena 24/7. 

## Stopping collisions
The starter snake moves randomly, and will most of the time hit its own body. So lets fix that. The `gameData` variable sent to the api (JSON) has 2 major components, the `board` and `you`. `you` is just a [battlesnake object](https://docs.battlesnake.com/references/api#battlesnake) that is your snake. This is extremely useful, as you will eventually need to know for sure what your snake's id is. But for now we'll be dealing with the `board.snakes` list. 
`board.snakes` is just a list of battlesnake objects, so we'll be iterating through it, and adding all of the positions within the snakes' bodies (`{x:xPos, y:yPos}`) to a list to see which locations are invalid moves. 
We'll then be checking to see if a certain move's outcome is within that list. If it is, then we wont be moving there. In javascript you need the `lodash` library to use the `_.indexOf(objlist, obj)` function, because direct object comparison doesnt work, and im lazy. You then can either randomly pick a move from either of those 2 or use some other heuristic (ie distance to food, or distance to snakes.


function to get the list of taken positions.
``` js
function getSnakeBodyList(gameData){
    let ret = [];
    for(let x = 0; x <gameData.snakes.length; x++){
        for(let y = 0; y < gameData.snakes[x].length; y++){
            ret.push(gameData.snakes[x].body[y]);
        }
    }
    return ret;
}
```

Get list of valid moves:
``` js
function add(p1, p2){
    return {x: p1.x+p2.x, y: p1.y+p2.y};
}
function getValidMoves(gameData, nogoplaces){
    let l1 = [{x:0, y:1},{x:0, y:-1},{x:-1, y:0},{x:1, y:0}]; 
//Notice that the moves in l1 match up with the possibleMoves list. The y axis is inverted, so be careful.  
    var possibleMoves = ['up', 'down', 'left', 'right'];
    let ret = [];
    for(let x = 0; x < 4; x++){
        if(_.indexOf(nogoplaces, add(gameData.you.head, l1[x])) == -1){
            ret.push(possibleMoves[x]);
        }
    }
    return ret;
}
```

One way to use these 2 functions is to just go 
`let validMoves = getValidmoves(gameData, getSnakeBodylist(gameData));`
and then choose which move you wanna use.
Thanks, and look out for part 2 where I'll explain how to not crash into walls.
Material UI Theme for JetBrains Rider
Tags: csharp, tooling, dotnet, webdev
Published: 2021-01-05 18:41:29

From the evolution of the dark theme, developers now have a wide choice of color themes in most modern development IDE's that go beyond *Light* and *Dark*.

Ever since the release of Visual Studio Code, I have become a sucker for a nice color theme in my IDE's. To a point where I change my mind every other day. When using other IDE's such as Visual Studio 2020 you don't have to use it long to realize that the ecosystem of themes is pretty outdated.

However, I have been using JetBrains Rider for some time and have accepted their default themes as ones that are nice to develop in. But I've been wondering recently as to whether there are more advanced and customized themes out there.

## Custom theming discovered...

After doing some digging around I realized that there is actually a huge ecosystem of themes out there for JetBrains Rider. With it being in parity to JetBrains IntelliJ a lot of similarities persist which has enabled theme building.

## Material UI Theme

Having used Material UI in other IDE's such as Visual Studio Code I was amazed that we also have a port of this for JetBrains Rider. Meaning that my development in C# can be done in an IDE that now looks even more visually pleasing! You can download and install it via the plugins menu in Rider or read more here: [https://www.material-theme.com/](https://www.material-theme.com/) .

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/mcej537sk3u7byo3otgp.png)

Above you can see what this theme looks like in practice. It's a beautiful implementation of the Material theme into the Rider IDE. Syntax highlighting isn't off and the icon pack is really minimalistic.

Just like for many developers, a setup that consists of a ***mechanical keyboard*** that suits them is very important. Selecting the right theme for your ***development IDE*** that you will go to ***battle*** with ***every day*** is just as ***important***.

Thanks for reading, let me know in the comments below which theme's you like to use in your IDE 👇
How to copy one array to another in javascript?
Tags: javascript, arrays
Published: 2021-01-05 18:31:34



```
const name1 = ['Sujal','Nitin','Aman','Harshit'];
const name2 = name1;
// this does not copy rather it gives a reference meaning that any change made in either of the array would also reflect in other as well. 
const name3 = name1.slice();
const name4 = [].concat(name1);
const name5 = [...name1];
const name6 = Array.from(name1);
```
Python has entered the room @ Codr
Tags: beginners, python, programming, algorithms
Published: 2021-01-05 18:23:34

I am happy to announce that Python has been added to Codr.

You can switch between JavaScript and Python editions by clicking the link on the bottom of Codr: https://nevolin.be/codr/

![python edition on codr](https://dev-to-uploads.s3.amazonaws.com/i/6cbavnokd2dxna0uwy2m.png)

## codr?
Codr is a mobile friendly coding app. Learn how to read, understand and write code. Participate in coding competitions and climb the leaderboards. A great exercise for complete beginners and challenging to experts. Codr can be installed or used in the browser.

We bring simpler coding exercises to **kids, students and professionals**. *Writing code* is monkey business, instead you solve challenges in multiple choice style. This means you have to read and understand the code, this trains you on pattern recognition, abstract thinking and math.

Codr can also be used by **recruiters and hiring managers** to assess candidates. Instead of using time consuming coding projects, you can use Codr to check whether your candidate is a junior, middle, senior or genius developer.

Website: https://nevolin.be/codr/

## details
It has been a while since we made any major updates, but Python was definitely a feature many users were waiting for. 

It was quite an engineering challenge to automate code conversion from the existing JS challenges to a Python equivalent. We currently have over 100 templates and more are added.

**Challenge templates** are used to generate actual challenges from, the ones you get on the Ranked Mode. The number of actual unique challenges ranges in the millions, so you won't run out of exercises anytime soon.

Another great thing is that there may be different answers to a challenge. This is thanks to the nature of our real-time answer validation and multiple choice combinations.

Some challenges require you to solve for a single variable, but to prevent cheaters, many more challenges include bugs which you have to fix. The bugs make you learn more about the syntax, possibilities and correctness of programming languages.

Finally we've bumped up the points and bonus rules. More experienced users can climb much quicker to their deserved difficulty and continue improving from there.

## Screenshots
Below are a few screenshots from the Ranked Mode. These are advanced examples; if you're a beginner you will learn how to solve these in no time!

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

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

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


Enjoy, have fun and join our Discord server https://discord.gg/ZBmvXdf
Website: https://nevolin.be/codr/
Learn web dev with these 24 lessons on GitHub
Tags: beginners, webdev, javascript, tutorial
Published: 2021-01-05 18:11:34

---
title: Learn web dev with these 24 lessons on GitHub
published: true
description: Whether you are new to webdev or just wanting to strengthen your skills, there's something for you in these 24 lessons.
tags: beginners, webdev, javascript, tutorial
cover_image: https://github.com/microsoft/Web-Dev-For-Beginners/raw/main/6-space-game/2-drawing-to-canvas/partI-solution.png
series: for-beginners
---

It's 2021. Want to learn webdev?

Here's your chance. Microsoft created 24 lessons on Web Development. It covers HTML, CSS and JavaScript. There are also quizzed and challenges.  

> [Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners)

There are various projects in there so you can dive deeper on things such as: 

- [Typing game](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/4-typing-game), this puts your skills to the test as it teaches you how to programmatically change CSS, keep track of time and also ensure you understand how HTML, CSS and JavaScript work together 
- [Space Game](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/6-space-game), it teaches you game development, using the Canvas and patternsns like pub-sub and composition
- [Banking app](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project), it's possible to develop a SPA like application without a single framework using the template tag and more. 
- [Browser extension](https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/5-browser-extension), have you ever considered writing an extension? It's easier than it sounds.
Day 3 :100DaysOfCode

Tags: 100daysofcode, cpp, codenewbie, productivity
Published: 2021-01-05 18:05:29

Day Started well with leetcode daily challenge .
Then classes , studied about oracle db(crud)operations.

studied queue ds from gfg.
completed daily scrum at intern.

tried div2 cf but was able to do only one today.
Will try to do some more leetcode problem today till off!


You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Day 2 - 100DaysOfCode 🤖🦾
Tags: 100daysofcode, webdev, coding, devjournal
Published: 2021-01-05 17:58:56


Today wasn't really that productive. So I thought of doing something small, then taking a look at my boring old Github profile I realized it needed a refresh. So, I thought of making it a little less boring.


![prof.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1609869007509/b9VkeBVTf.gif)

#### Here's the [Github repo](https://github.com/rahi-khan/rahi-khan). Feel free to copy and customize it as your own.

<br>

#### I followed [this](https://www.youtube.com/watch?v=ECuqb5Tv9qI) and [this](https://www.youtube.com/watch?v=n6d4KHSKqGk) video from [codeSTACKr](https://www.youtube.com/channel/UCDCHcqyeQgJ-jVSd6VJkbCw). His channel got more awesome coding related videos/tutorials.
My first React project - Instagram clone
Tags: react, firebase, materialui, firstpost
Published: 2021-01-05 17:57:39

I'm a C++ and C# programmer, but I've wanted to try the JavaScript library - React for a long time. I only have a little prior knowledge of javascript itself. For my first demo project, I chose to make a simple Instagram clone. I created this Instagram clone with React, Firebase (Auth, storage, and deploy), and Material-UI. After implementing this project, I am extremely surprised by the simplicity of React. The material-UI gave me a nice look, and the firebase gave me easy manipulation with backend, authentication, and deploying. The Instagram clone is demanding enough, exciting, and scalable for the first demo app, and I recommend this challenge to others. This demo project inspired me to take on new challenges with React soon. 

This project is available on this [page](https://instagram-clone-react-29e41.web.app/), where you can test some of the functionalities (do not upload or post inappropriate content). 
Also, you can see the code on [Github](https://github.com/nejcgalof/instagram-clone). You can reuse code on your projects, add issues if you see some problems, or have some suggestions.

![Instagram](https://dev-to-uploads.s3.amazonaws.com/i/idgwhgg890ksxmjt5mqi.png)
sitePage.js 3.0.2-rc released
Tags: sitepagejs, javascript, typescript, webdev
Published: 2021-01-05 17:51:05

Hello mates,
I just release sitePage.js 3.0.2-rc version. sitePage.js is the JavaScript library with which you can build beautiful full page scrolling website. You can visit www.pixelbyaj.com or https://pixelbyaj.github.io/sitepage for further details.

Thanks,
pixelbyaj
Can you live without Undo & Redo?
Tags: discuss, watercooler, programming, webdev
Published: 2021-01-05 17:48:26

The very idea of living without Undo & Redo may sound a little scary to some of you (including me). Because we as humans are prone to making error so often that Undo & Redo comes out as a lifesaver. Without them, the daily usual coding job will become an extremely focused job & even a single mistake caused may lead you to change the code manually.

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

This is just one scenario but as we know there can be infinite possibilities (or difficulties) when it comes to making mistakes you manually have to fix!

# Discuss

---

**Feel free to share your own opinion on:**

- How often you think you use **Undo & Redo**?
- What will you do if **Undo & Redo** suddenly disappeared one day?
- And do you think it's possible to live without **Undo & Redo**?
Dom element | Dom crash course - Js Dom manipulation - frontend
Tags: javascript, webdev, react, angular
Published: 2021-01-05 17:47:21

This is one of best video on javascript Dom please do 💨 watch and 
❤️ subscribe ❤️

https://m.youtube.com/watch?v=hr5yQ1VwF0I&feature=youtu.be


DOM + Javascript
• Javascript can change and add nodes in the DOM
•  Javascript can delete elements from the DOM tree
• Javascript can add or change the style (CSS) of the DOM element
• Javascript can set new attributes to the DOM element and can remove and modify older attributes.

HTML DOM

There are 3 parts of W3C DOM standard:
• Core DOM
• XML DOM
• HTML DOM
• When a webpage has loaded the browser creates a Document Object Model, which is an object-oriented representation of HTML document, called HTML, DOM.


DOM introduction:

The DOM stands for Document Object Model, it is an interface that allows developers to interact and control the Elements of the web.

The Document Object Model is a model that defines HTML and XML documents as a tree structure.

HTML DOM uses Javascript to interact with the document.