teleren/devto huggingface dataset:
Personality of the Beginner Programmer
Tags: webdev, beginners, codenewbie
Published: 2020-08-02 11:23:30

Here are some of the personality traits needed to learn programming:

 attention span
 obsessive personality
 Patience
 Focus
 Perseverance
 love what you are doing (passion)
 dedication to the cause


What kind of personality do we need to become a programmer?

A short attention span won't cut it. We need to be dedicated and willing to sit in front of a computer for hours at a time. You also need to be somewhat obsessive. In other words you need to repeatedly execute code until it works, without getting impatient.

In the beginning we encounter many opinions out there, if you go in 20 different directions then I guarantee you won't cut it as a programmer. Focus is needed especially in the beginning and willingness to trust yourself in the direction you choose is very important.

Patience is a must because we make a lot of mistakes as a beginner. We need to be willing to google everything and sift thru all the noise to find the most relevant and most current posts. I call this Research Hell.

You must persevere in what you are doing because I will tell you that I personally gave up on this endeavor many times and this is why it took me 7 years before I actually got a job in the field.

Love it or leave it.


And oh...BTW...get off those cell phones and get on a desktop because u will need to download lots of stuff to ur programming platform.


Choose any programming language u like, but for beginners in Java, I recommend learning both Java and SQL together so u have more to work with in the beginning. At my website u can check out FREE java tutorials for beginners.



Are we having fun yet?
Interesting naming you have come across?
Tags: discuss, watercooler, naming, cat
Published: 2020-08-02 11:04:47

Just to say, today I came across a package,

[![forcats](https://github.com/tidyverse/forcats/blob/master/man/figures/logo.png?raw=true)](https://www.rdocumentation.org/packages/forcats/versions/0.5.0)

And it is not a typo.

<small>Also, NaN Monthly downloads</small>
Coding Daily!
Tags: productivity, codenewbie
Published: 2020-08-02 11:01:10

Hi all,

So procrastinating and feeling guilty about it the next day is very common. All of us face it, irrespective of the field we are in. To achieve something in life you have to keep working hard and keep working smart. 
I would like to focus on developers because that is my field and this would be my way of giving back to the community.
So is coding everyday important for a programmer? Yes.
There is no harm in spending one hour daily to learn something new and that counts as coding/learning every day.
Do you need to give yourself a hard time if you don't code on some days or you feel like taking a break? NO. 

You have to understand that overthinking leads to a bigger loss than you estimate and it becomes a habit.
You don't have to breathe code. You have a life other than just a computer and the programming world. Learn to enjoy that.
It is possible that you don't feel like coding for 5 days in a row but never lose sight of your goal. Take breaks, enjoy your life but always keep working towards your goal.
If you take a break from coding but you don't stop giving yourself a hard time then you're not relaxing. You're just stressing yourself more.
Always focus on what you're doing at the time you're doing it and that includes enjoying life.

Also, the United Nations estimated a global average life expectancy of 72.6 years in the year 2019. That gives you around 26499 days.
Personally I feel 26499 is a very small number to own.That is the time I have on earth and I need to use it wisely.

I hope you all can get some help by reading this small blog of mine which has the sole purpose of telling you what you already know but from a different perspective.
10 Cool React Tips
Tags: react, javascript, webdev
Published: 2020-08-02 10:35:51

---
title: 10 Cool React Tips
description: React, Javascript, Webdev, Webpack, React testing lib
canonical_url: https://blog.alexandrudanpop.dev/posts/10-cool-react-tips-4cca/
---
Hello Dev Community! 👋

Today I will talk about some React tips I want to share with you. Those will be in the form of some [tweets](https://twitter.com/alexandrudanpop) that I posted.

Leave a 🧡 & 🦄 if you like this article. 

## 10 Cool React Tips ⚛️

### 1. Create a Webpack config in a conveniant way using [createapp.dev](https://createapp.dev/webpack)
{% twitter 1285621896906670080 %}

### 2. Learn to automatically check Accessibility with [Axe](https://github.com/nickcolley/jest-axe) 
{% twitter 1285838237739692032 %}

### 3. Use [Parcel](https://parceljs.org/) for 0 config builds, even with Typescript
{% twitter 1286199543416193024 %}

### 4. React testing library debug function
{% twitter 1286563013491716096 %}

### 5. How to handle errors in React
There is a cool package created by on of the React core team members for Error boundaries. 
You can check it out [here](https://github.com/bvaughn/react-error-boundary). 
{% twitter 1286693721325608960 %}

### 6. Use function components and Hooks ✔️
There are many reasons apart from just this being the trend. If you use function components it is much more probable to find libraries that expose hooks APIs. 

Probably in the future a lot of libraries will **only** expose hooks APIs. You won't be able to use hook APIs with class components.
{% twitter 1287452662741512192 %}

### 7. Use the React Context API for shared / global state
Simply put - I am seeing less and less use cases for Redux or other state management libraries considering in React we have [the Context API](https://reactjs.org/docs/context.html).

With the Context API you are using the same paradigm as with regular `useState` or `useReducer` hooks. This is lowering the learning curve for new React developers as they don't need to learn Redux or some other state management library.

{% twitter 1288077056711024641 %}

### 8. Distinction in React Testing lib for getBy* vs queryBy* 
{% twitter 1288553858302713857 %}

### 9. Learn to use React testing library correctly 🚀
Doing this can skyrocket the confidence you have in writing tests and the production code that you write. 
{% twitter 1289465909938139137 %}

### 10. Correctly handling async await in React components
Learning how to correctly handle asynchronous code in React is difficult and can lead to a bugfest. I explain all the concepts and how to deal with it in a simple way in one of my other [dev articles](https://dev.to/alexandrudanpop/correctly-handling-async-await-in-react-components-4h74):
{% twitter 1247128869355872256 %}

If you are like me and always searching for better ways to improve your **React**, Javascript and Typescript experience, consider following me on [Twitter](https://twitter.com/alexandrudanpop) where I post more cool content. 

## 👇 Comment below 👇 
Let me know if this is valuable for you and share some cool stuff you learned about React lately.
ZigZag (Spiral) Level Order Traversal 🔥 | Amazon Interview Question
Tags: algorithms, javascript, computerscience, dsinjs
Published: 2020-08-02 10:33:54

Binary Tree Zig-zag Level Order Traversal a.k.a. Spiral Level Order Traversal has been frequently asked in Coding Interviews of Amazon, Google, Microsoft, Facebook, Apple, LinkedIn, Samsung, Walmart, and a lot of other tech giants. 

Do give it a try, but what if you're stuck somewhere?
No need to worry. This article contains a working solution to this Leetcode Medium problem using Javascript. ❤️

Towards the end of this post, I also have a Youtube video attached, you can also watch a step by step solution there if needed. All the best for your coding Interviews. 👍🏾
<br />
**Problem Statement:**

Given a binary tree, return the **Zigzag Level Order Traversal** of its nodes' values. *(ie, from left to right, then right to left for the next level and alternate between)*.   

Example:
Given binary tree [3,9,20,null,null,15,7],
```
   3
  / \
 9   20
    /  \
  15    7
```   
Return its zigzag level order traversal as:
```
[
  [3],
  [20,9],
  [15,7]
]
```  
<br />
**Javascript Code:**

Below is the Javascript code for this Leetcode Medium problem of Spiral Level Order traversal.

```javascript
var zigzagLevelOrder = function(root) {
    let results = [];
    const lot = (root, level) => {
        if(!root) return;
        
        if(results[level]) results[level].push(root.val);
        else results[level] = [root.val];
        
        lot(root.left, level+1);
        lot(root.right, level+1);
    }
    lot(root, 0);
    return results.map((b,i)=>(i%2) ? b.reverse(): b);
};
``` 

<br />
**Step by Step Explanation in below Youtube Video:**

Below is the Youtube video explaining this frequently asked Interview question of Binary Tree Spiral Level Order Traversal.

{% youtube 4u--XDffIZM %}

If you like this initiative of solving DS/ Algo Coding Interview Problems from Leetcode using Javascript then do give it a thumbs up and comment down your feedback. 

You can also check out this [Github Repository](https://github.com/akshaymarch7/leetcode-javascript/) for all the code and video links in this #DSinJS series on Youtube. 

Cheers, 
Akshay Saini
[https://akshaysaini.in](https://akshaysaini.in)
Building spreadsheet based search engine, first project evers......
Published: 2020-08-02 10:00:31

Hello everyone! I'm beginning my writing journey on Medium the reason for that is I wanna talk to people about how I go through those problems. The first series would be "How to build a spread sheet based search engine which takes user input and return the result found in the format of csv , xlxs using Flask". Here is the medium links https://link.medium.com/GBISNMEtC8. If you guys find any mistakes please let me know.
Learning with books vs. tutorials
Tags: discuss, beginners, learning, rust
Published: 2020-08-02 09:39:51

I'm currently re-learning Rust - I picked it up a while back to be able to better debug issues at work, but didn't have the chance to write a lot of production-ready code with it.

In order to fully understand all the intricacies of the language, I picked up an open-source side project to participate in. But before that, I'm going to go deep on the language's syntax and methodology by reading [The Book](https://doc.rust-lang.org/book/), i.e. The Rust Programming Languge.

What is your preference? Do you run through tutorials and then reach out for project, or do are you a bookworm like me?
SCSS Mixins and snippets you must use in all projects
Tags: scss, mixins, frontend
Published: 2020-08-02 14:08:52

---
title: SCSS Mixins and snippets you must use in all projects
published: true
date: 2020-08-02 00:00:00 UTC
tags: SCSS,MIXINS,FRONTEND
canonical_url: https://yogeshwaran.in/scss-mixins-you-must-use-in-all-projects/
---

We all should accept css preprocessors like scss/less makes our(developer) life easier. Variables and nestings helps us to maintain a quality code and we are not yet using the most powerful feature of all MIXINS.

Mixins are really helpful in lot of ways. But when to use mixin is the key and if you are creating a mixin. you must follow the golden rule.

> Mixins without arguments are bad

Here are the few mixins that can be used in all projects.

## 1.Ellipsis

Adding a ellipis to your website text is not simple. but when you have this handy mixin you just need to include the mixin with the number of lines as a argument.

`@include text-shorten(2);`

For single line ellipsis you have to pass null.

`@include text-shorten(null);`

Note : Line clamp is not supported in internet explorer.Don’t use if you are supporting IE 11 or below.

<iframe height="265" style="width: 100%;" scrolling="no" title="@mixin ellipsis" src="https://codepen.io/yoyo/embed/OJVXKze?height=265&amp;theme-id=dark&amp;default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yoyo/pen/OJVXKze">@mixin ellipsis</a> by yogeshwaran
  (<a href="https://codepen.io/yoyo">@yoyo</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
## 2.Linear gradients

Linear gradients are fancy and adding all those syntax with fallback is little tricky.

<iframe height="265" style="width: 100%;" scrolling="no" title="wvazwjd" src="https://codepen.io/yoyo/embed/wvazwjd?height=265&amp;theme-id=dark&amp;default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yoyo/pen/wvazwjd">wvazwjd</a> by yogeshwaran
  (<a href="https://codepen.io/yoyo">@yoyo</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
## 3.Generate dynamic classes for icon fonts

If you are using custom iconfont like icomoon you may require to use the classes generated from the iconfont generator. instead you can add all icons in a key value pair and use @each function in scss to create icon classes and add the respective unicode to them.

Click view compiled to see the compiled css results.

<iframe height="300" style="width: 100%;" scrolling="no" title="Dynamically generate icon font classes in scss" src="https://codepen.io/yoyo/embed/preview/LYGKPob?height=300&amp;theme-id=35149&amp;default-tab=css" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/yoyo/pen/LYGKPob">Dynamically generate icon font classes in scss</a> by yogeshwaran
  (<a href="https://codepen.io/yoyo">@yoyo</a>) on <a href="https://codepen.io">CodePen</a>.
</iframe>
The minimal server setup guide.
Tags: security, aws, googlecloud, beginners
Published: 2020-08-02 09:36:00

Setting up a server could be painful especially when you are in a hurry. Also, you can't just create an instance on cloud-like AWS or GCP and put your content and serve it. A server needs to be properly set up to secure it from attacks and serve content that you want.

In this post, we will go step by step to set up the server with minimum required things or you can say the right way. So without wasting any time let's get started.

At this point, I'm assuming that you have an instance created on cloud providers like AWS, GCP, or Digital ocean.

1: SSH to your server.

```
$ ssh -i location/to/your/private_key username@ipv4
```

This command allows you to `ssh` or `login` to your server.

2: The first thing after login into the server is update and upgrade the packages.

```
$ sudo apt update

$ sudo apt upgrade
```

Run these commands respectively.

3: Now to secure your server `you should always disable root login` to do so run this command.

```
$ sudo adduser user_name
```

Now, this command just asks for a password and all fill the required information. The command output will look like this.

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

4: After creating the user we need to add the user to sudo group and grant permission to perform superuser tasks.

```
$ usermod -aG sudo user_name

// This command will switch user to newly created user.
$ su user_name
```

5: Now change directory to home and add your ssh key for logging in into new user.

```
$ cd ~

$ mkdir -p ~/.ssh

// paste your local system public key here and save.
$ sudo nano ~/.ssh/authorized_keys
```

6: As we added new user we should disable root login now.

```
$ sudo nano /etc/ssh/sshd_config
```

This will open a file, find the line `PermitRootLogin`, and change `yes` to `no`.

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

7: To see these changes in action restart the ssh demon.

```
$ sudo service sshd restart
```

That's it for setting up and securing the server quickly.

Now for better security, you should configure your firewall too.

By default, the fireball is inactive you need to activate it first.

8: to see the fireball status.

```
$ sudo ufw status
```

9: To enable fireball.

```
$ sudo ufw enable
```

10: By default, fireball rejects all requests on all ports so you have to explicitly allow the ports you want to access.

```
$ sudo ufw allow ssh

$ sudo ufw allow http
```

These are the common services you need to allow.

After allowing these two fireball status should look like this.

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

That's it. Now your server is ready, install 'nginx' or `apache` and start serving your content.

I hope you will find this useful. I'll be back with another post until then Goodbye.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ovs3x9p679qp2mp8cagr.gif)
Old Dog Learning new Tricks
Tags: beginners, webdev, codenewbie, discuss
Published: 2020-08-02 09:00:28

Hello there Forever Devers !!

I am a retired Data Engineer from GE and new to this community.

Last year I started redesigning my website which offers free Java and SQL tutorials for beginner programmers. And, I kid u not, but this was my first time I ever used JQuery. Because I was primarily on the back end with boring SQL, over the many years, I used Java Servlets to connect to my data. Originally back in the late 1990s when the Servlet spec first came out I was using JDBC for my front end development and got stuck with it over the years. I was 44 years old back then. During my early years as an Oracle Developer we also used JSP for our presentation layer. But then more modern Javascript replaced JSP making its big moves into the forefront and webdev was forever morphed. Frontend JDBC was old technology as PHP became all the rage for both front and back end javascripting and connecting to data.

Now fast forward and I am 66 and have a lot of time to be on the web with my redesign.

I knew all about this front end stuff but since I was all about SQL I was kind of stuck. JQuery now comes to the rescue. During my redesign I used Ajax to call up my backend servlets, and here is where I am right now.

I know for most of u that JQuery is for dinosaurs like me but I chose it because it is easy to learn for a beginner. Then we can become more sophisticated later on with most up to date javascript. PS, Angular killed us all at GE.

So it is never too late to learn coding at any age.

We should share stories of our humble beginnings, so the older u are please do add some comments and we can all have a bit of fun reminiscing.

That's all for now, thanks for reading
How to set the default route in ReactJS?
Tags: react, html, css, beginners
Published: 2020-08-02 08:38:04

This article was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-2/#how-to-set-default-route-in-react-js

---

{% youtube 3AxpdKbffno %}

Some time ago, we had an opportunity to use the component named “DefaultRoute” in the react routing.

Now, its depreciated method, and it’s not so popular to use it, you can create the custom route named default or whatever, but still, it’s not how we do it in modern React.js development.

It’s just because using the “DefaultRoute” route, we can cause some rendering problems, and its the thing that we definitely would like to avoid.

But don’t worry!

We have a solution to that problem, and I’d say its much more comfortable, but what more important, its a good practice.

To handle the default routing now, we can use two methods, one of them will be “*“, like routing, and the second one is “/”, that will redirect us to the defined component on the “default” path.

I’d recommend going with the “/” and set up the 404 component for the non-found pages instead of auto-redirect to the “default”.

Let’s see on the code example how it can be created.

```js
<Switch>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/contact/:id">
    <Contact />
  </Route>
  <Route path="/contact">
    <AllContacts />
  </Route>
  {/* The default route */}
  <Route path="/">
    <Home />
  </Route>
</Switch>
```

<a href="https://www.duomly.com/?code=lifetime-80">![Duomly - Programming Online Courses](https://dev-to-uploads.s3.amazonaws.com/i/bde89cw4h64z765g2l4r.png)</a>

Thank you for reading,
Radek from Duomly
My career
Tags: node
Published: 2020-08-02 08:21:41

Mining and petroleum engineer
With 3-years experiment in light weight innovation production and maintenance 
Possess B.S in petroleum engineering from Malaysia
Seeking to leverage my solid works expertise, leadership and abilities and materials
Development competency in the role of senior mining and petro-engineering 
Reach out at
✉️nhialthouk804@gmail.com
📞+249991388854
Svelte XKCD chart
Tags: svelte, npm, javascript
Published: 2020-08-02 08:10:56

The charts library already have vue and react wrappers so it lacked the svelte version of the library.

Introducing [chart.xkcd-svelte](https://www.npmjs.com/package/chart.xkcd-svelte)

All chart examples can be found [here](https://peopledrivemecrazy.github.io/chart.xkcd-svelte/)

General usage for svelte and check out the [REPL](https://svelte.dev/repl/cee23c3a75ff45298460d5a408c093be?version=3.24.0)

```js
<script>

	import Chart from 'chart.xkcd-svelte';
 	import chartXkcd from 'chart.xkcd';
	
let options = {
		title: 'What people think', // optional
		data: {
			labels: ['work', 'sleep', 'social'],
			datasets: [{
				data: [30, 10, 60],
			}],
		},
		options: { // optional
			innerRadius: 0,
			legendPosition: chartXkcd.config.positionType.upLeft,
		},
	}
let type = "bar";
</script>
<Chart type={type} options={options} />


```


Thanks to awesome people at [svelte's discord](https://svelte.dev/chat) I was able to do this ❤️❤️
Effective Java: #7 Obsolete object and memory leak
Tags: java, effectivejava, memory
Published: 2020-08-02 07:47:54

Java is the Garbage Collector programing language. What does that mean to you?

I mean that the language will take care of cleaning the unused objects in your program. If you come from a language like C/C++ you will feel that this is like a superpower because you don't have to manually clear the memory for the objects that you don't use anymore (the task that the developer keeps forgetting a lot).

Java did the magic through its Garbage Collection algorithm. There are a lot of them currently but basically it will check for the reference of the currently executed program with the objects that exist in the heap. If there is any object that wasn't referenced by the program, it will clear those objects as it considers those objects as garbage.

Let's consider this example, that I took from the book:

```java
class PoolObjects {
   private static int DEFAULT_POOL_SIZE = 100;
   private int size = 0;
   private static Object[] pools;

   public PoolsObjects() {
      this.pools  = new Object[DEFAULT_POOL_SIZE];
   }

   public void add(Object o) {
      this.ensurePoolSize();
      this.pools[this.size++] = o;
   }

   public Object pop() {
      if (this.size == 0) {
         throw new EmptyPoolException();
      }
      Object r = this.pools[--size];
      return r;
   }

   private void ensurePoolCapacity() {
      if (this.pools.length = this.size) {
         this.pools = Arrays.copyOf(this.pools, 2 * size + 1);
   }
}
```

In the above example, there is a leaking memory point that is very subtle. As you can reason, as we decrease the size of the array, the element that has an index less than the size value will be inactive or should be discarded and clear by the GC. But actually it won't be because that object still gets referred by the `pools` variable.

One way to fix the problem is nulling out the element that hasn't been referred anymore.

```java
public Object pop() {
      if (this.size == 0) {
         throw new EmptyPoolException();
      }
      Object r = this.pools[--size];
      this.pools[size] = null; // Explicitly nulling out the element at size index.
      return r;
   }
```

I would like to conclude the blog with some commonplace that memory leak could happen.
1. The application that manages the memory by itself. The example above
2. The application that uses caches. The object cached could stay in the memory forever.
3. The listener or callback that registers but not dis-register.