teleren/devto huggingface dataset:
Tutorial Hell 101✅✅
Tags: programming, codenewbie, webdev
Published: 2021-09-07 18:32:41

**What is Tutorial Hell🔥?**
Well this is a situation in which the learner always feels incompetent or scared to implement things out on their own and relies heavily on tutorials.

**How does one land up in Tutorial Hell?🤔**
There's no one answer to this, but usually this situation is common in beginners or people trying to master a new skill. At that point they need quick explanation and depend on video tutorials which is a good idea.But over consumption of tutorials leads to a form of dependency which becomes hard to overcome in future.

**How do I know if I am in Tutorial Hell or not?😨**
These are some of the situations that might be an indicator of the same - 
- You find yourself busy watching video tutorials most of the time
- You think you will not be able to code without an instructor's guidance
- You keep course shopping or spend time on course websites thinking of getting that one course that might teach you the topic the best way possible

**Looks like I am in hell, any idea how to move out of it?🏃**
No issues. Firstly don't panic and get yourself a glass of water. Now showing you the way out of this place. Well there's only one way I know of which is - *"start doing things on your own"*.You will make mistakes, and this might seem very hard at the beginning and even at later stages, but the key 🔑 is to never,ever give up.Am I saying you should never watch tutorials? Absolutely not! You should always go for tutorials whenever you feel like, but its just that the frequency should be lesser than what it was previously.

**How I got myself out of the hell?**
Like many of you budding developers out there, I was in the same place. Was finding it very hard to get out of the same. I was trying to learn front-end web development. Although I had previous knowledge of computer programming, still I faced lot of issues and fear in initial days. Gradually I made up my mind to take on projects on my own and started with the simplest of projects. This helped🎉.

**Important Note👈**
If you are in the process of moving out of tutorial hell, you are basically trying to move out of your comfort zone which can be extremely hard. Make sure to not over stress yourself ,take ample rest, drink water, workout and rejuvenate yourself from time to time. This might help make the process a little easier.

P.S - This is my first ever blog.There are surely tons of things I missed and many places I went wrong. Do let me know in the comments.😄
Days of code [1]
Tags: beginners, csharp, dotnet
Published: 2021-09-07 18:20:39

On leetcode.com - practicing on a daily basis, I was reviewing "Introduction to the Array"

And today I solved this one:

[Find Pivot Index](https://leetcode.com/explore/learn/card/array-and-string/201/introduction-to-array/1144/)


The code is on my github:
##
 * [Challenges LeetCode](https://github.com/ronaldoperes/Challenges/tree/master/LC)

Also this project has Test Project since I am doing TDD to practice.
Strings to Numbers Function
Tags: python, programming, computerscience, functional
Published: 2021-09-07 18:15:06

```python
# stings_to_numbers_function.py
#   This program converts a list of strings which are numbers and converts
#   them to numbers.
# by: Scott Gordon

def main():
    string_numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]
    numbers = []

    def to_numbers(array):
        """Takes a list of string numbers and converts them to integers."""
        for item in array:
            numbers.append(int(item))
        return numbers

    print(to_numbers(string_numbers))


main()
```
Photo by <a href="https://unsplash.com/@cdr6934?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Chris Ried</a> on <a href="https://unsplash.com/s/photos/python?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
How to create Infinite Scroll with Svelte
Tags: svelte, javascript, frontend, nelsoncode
Published: 2021-09-07 18:14:27

For this example we will use the Intersection Observer API

### Component in svelte

```javascript
<script>
  import axios from "axios";
  import { infiniteScroll } from "../../functions/infiniteScroll";

  let pageNumber = 0;
  let characters = [];
  let Loading = false;
  
  const fetchData = async () => {
    try {
      Loading = true;
      const response = await axios({
        method: "GET",
        url: "https://rickandmortyapi.com/api/character/",
        params: { page: pageNumber },
      });
      // SAVE NEW RESULTS
      characters = [
        ...new Set([...characters, ...response.data.results.map((b) => b)]),
      ];
      Loading = false;
    } catch (error) {
      console.log(error);
    }
  };
  const load = () => {
    setTimeout(() => {
      pageNumber = pageNumber + 1;
      fetchData();
    }, 300); // WE WAITED A FEW SECONDS
  };
  // REACTIVE DECLARATIONS
  let elementRef = null;
  $: {
    if (elementRef) {
      infiniteScroll({ fetch: load, element: elementRef });
    }
  }
</script>

<div class="box-shawdow">
  {#each characters as character}
  <div class="grid-games">
    <div class="box-game">
        {character.name}
      </div>
    </div>
  {/each}

  {#if Loading}
    <h1>Cargando...</h1>
  {/if}
<!-- ELEMENT OBSERVER -->
  {#if Loading === false}
    <li bind:this={elementRef}>Cargando</li>
  {/if}
</div>
```

### Function of Intersection Observer

```javascript
export const infiniteScroll = ({ fetch, element }) => {
  if (element) {
    const observer = new IntersectionObserver(
      (entries) => {
        const first = entries[0];
        if (first.isIntersecting) {
          console.log("Is Intersecting");
          fetch();
        }
      },
      { threshold: 1 }
    );
    observer.observe(element);//Element of DOM
  }
};
```

[Code of example in Github 🔗](https://github.com/NelsonCode/svelte-infinite-scroll)
Trigger an onClick event outside the child element, works for nested child components too.
Tags: outsideclick, react, onclick, javascript
Published: 2021-09-07 18:08:48

Say, you have a non-modal component like dropdown or the menu and I'm sure one thing you'd definitely need is to close/hide the content of the component when user clicks outside the component too, not just on the dropdown or menu button.

It is one of the common requirements and here's how its achieved:
1. Add click eventListener to the parent div.
2. Exclude the child div.
3. Remove the click eventListner on component unmount.

**1. Add click eventListener to the parent div**
Assign a id to the parent and top-level child div element, if not already. On componentDidMount() of the child element, add a click event listener as shown in the below code.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rv6mtx3a1f06kuu3tvb5.png)

**2. Exclude the child div**
Exclude the child component, otherwise we end up closing the dropdown/menuitems even when these items are clicked.
 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zw1p89dq6akod0qzf8r.png)

Make sure we use **!topLevelChild.contains(e.target)** and not **topLevelChild !== e.target** because all the nested child elements are also supposed to be excluded. Choosing the later works fine if there is only one child div element.

**3. Remove the click eventListner on component unmount**
An important step not to leave behind is removing the event listener when the child unmounts from the DOM, to avoid unnecessary addition of the event listners every time its expanded. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/siiwgdvn0bx4gcs1nz3v.png)
 
Happy coding:)
Introduction
Tags: opensource, beginners, webdev
Published: 2021-09-07 17:57:31

Hello, My name is Japneet Singh. I am taking this course OSD 600 to get knowledge on Open Source and working with others.  Historically, It was developed in 1998 as an educational, advocacy, and stewardship organization at this important moment in the history of collaborative development.
[https://opensource.org/history]. 

I have gained little knowledge about Open Source that this helps contribute to one another's projects and also to Work within the open source community. Not to forget to give others credit when they offer help and be open to helping others.

I am currently living in Toronto, Ontario. I am international student from India. I cam here two years ago. I worked as System Support Officer at Tribunals Ontario during my Co-op Term. I met DPS909/OSD600 community which is like meeting new people from different origins getting together to do something fruitful this semester. 

Well, I am hoping to get practical experience on working under development team and not only do coding, but trying to communicate and express my ideas. This would generally help  to listen to others about the work I have been doing myself.
I have researched about different projects in git but the one I really liked is Contributing to the content of MDN Web Docs.
Forked: [https://github.com/japneetsingh035/content]
Original: [https://github.com/mdn/content]

I have been personally using these webpages during my early stages of learning web developments and now becoming part of it. It is great feeling and and would like to contribute like others to make it more better for new developers.
What's in a Software Dev degree anyway?
Tags: codenewbie
Published: 2021-09-07 17:55:09

 - What should I learn first? 
 - What should I learn next? 
 - Okay, I know some stuff, what now? 
 - Are you self taught? 
 - Ever wonder what everyone was learning in school?

Did you answer “yes” to any, most, or all of these? Yep, me too. I started [learning to code](https://dev.to/vickilanger/i-ve-never-finished-a-learn-to-code-program-4il8) 2ish years ago. For over a year, I’ve been teaching code stuffs to kids and rewriting curriculum. This still hasn’t seemed to be enough to catch the eye of many interviewers.

I started thinking about going back to school. I was pretty interested in going to one school but they never responded to some questions I had. After a few more months of looking, I found the right fit, applied, and got accepted. Though I am choosing to go back to school, I wish it were more obvious what to learn and in what order.

I have seen a few places try to do this. The [developer roadmap](https://roadmap.sh/roadmaps) has done an awesome job laying out a learning path.

With as helpful as those charts are, it might still be helpful to see what a degree program includes. Expect another post for each class with a list of things learned and resources.

## Degree Program

This degree is an MS in Software Development and a certificate in Software Engineering. Here are the classes in the curriculum.

### Software Development major
1. Information Structures with Python
1. Data Structures and Algorithms 
1. Advanced Programming Techniques
1. Software Designs and Patterns (also part of certificate)
1. Software Engineering (also part of certificate)

### Software Engineering certificate
1. Information Technology Project Management 
1. Software Quality, Testing, and Security Management 

### single elective
 1. TBD, there are options.
3 Super Easy Tips To Create Better UI Instantly
Tags: uiweekly, design
Published: 2021-09-07 17:36:09

Hey, devs! If you're like me, you probably don't want to spend too much (if not any) time learning how to create good-looking UI. In this article, I'll show you some quick tricks that can help you to instantly up your UI game.

###[1] Just Go with Black, White, and Box Shadow 
Really. Using black and white color scheme makes your app very pleasing, but just make sure that the design looks like you put effort into it. To implement a box shadow, just head over to this site (https://getcssscan.com/css-box-shadow-examples) and copy any box shadow template you like. 
![Mohmed Ishak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6dsvrzao283j1fhsq0c.PNG)

###[2] Don't Spend Too Much Time Deciding The Font Color
Don't. All you need to do is go to this site (https://coolors.co/) and randomly generate a dark color. Then just throw some white text on it, and it works every time. Take a look at the screenshot below. 
![Mohmed Ishak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8t0c2saa9op0nxmr1gsv.PNG)

###[3] Steal Colors
![Mohmed Ishak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7ndxdwm6bq1whi0vem4.png)
The color scheme looks school because it is copied (not for commercial purpose) from Grab's color scheme. Grab is the largest e-hailing company in southeast Asia by the way. Go ahead to any site that looks cool and copy the color scheme using any color picker (just don't overdo it).
Top 7 Featured DEV Posts from the Past Week
Tags: top7
Published: 2021-09-07 17:23:56

---
title: Top 7 Featured 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._ 


## A daily refactoring habit 

@nombrekeff has been refactoring as a daily habit for a while now — here's why it's been so effective in helping them work less.

{% link https://dev.to/nombrekeff/i-work-hard-in-order-to-avoid-work-my-view-on-refactoring-1kd6 %}

## Sisterhood in tech

@josefine describes how "the fight for more equality, the passionate discussions and dance parties" shared with other women in tech helped make the industry feel more like home — and worth being a part of.  

{% link https://dev.to/josefine/the-unexpected-powers-of-sisterhood-in-tech-3jko %}

## Let's talk about mentors 

As @antoomartini explains, finding a good mentor early on the learning process can help build confidence. Did you have someone like this in your journey? If so, here's why you should consider paying it forward. 

{% link https://dev.to/antoomartini/be-the-person-you-needed-when-you-started-in-the-it-world-4450 %}


## An inside look at developer advocacy

... From @deekob: a Developer Advocate at Amazon Web Services!

{% link https://dev.to/deekob/10-things-i-ve-learnt-being-an-aws-developer-advocate-37ck %}

## Start positive rituals to manage your energy 

@sumusiriwardana explains the power of having positive rituals to helps you perform at your very best.

{% link https://dev.to/sumusiriwardana/why-you-should-manage-your-energy-not-your-time-3p1l %}

## The four methods of Next.js fetching

@theodorusclarence does a great job at familiarizing us with the terms involved in data fetching in Next.js to make the rest more digestible. Take a look!

{% link https://dev.to/theodorusclarence/understanding-next-js-data-fetching-csr-ssr-ssg-isr-1nff %}

## A straightforward and self-developed approach to user authorization

In this post, @shreshthgoyal walks us through the process of creating REST APIs using NodeJS and PostgreSQL to solidify the fundamentals of authentication.

{% link https://dev.to/shreshthgoyal/user-authorization-in-nodejs-using-postgresql-4gl %}



_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!_
New features: Text tags and word doc support
Tags: webdev, css, html
Published: 2021-09-07 17:21:19

We're excited to announce two new features today that go hand-in-hand:

1. Word document (docx) support
2. Text tags

Word documents are often used as the source of truth for agreements, disclosures, contracts, and more. MS Word is seen as more accessible than PDFs for a large number of people across industries. And it's easy to see why; updating a Word doc is much easier than updating a PDF.

At Anvil we're committed to making paperwork automation accessible, which is why we're excited to announce the inclusion of Word document support and text tags. With the combination of Word doc support and text tags, you can now directly upload your Word documents to Anvil and we will automatically find fields that need to be filled.

![docx to PDF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlgm7aqsid0ukoq3d4w1.png)

## MS Word support

Word document support is simple: anywhere Anvil supports uploading a PDF, you can now also upload a Word document. You can upload Word documents to your template library, to a workflow, to signature packets, and via the API.

Behind the scenes, Anvil will convert your Word document into a PDF so it can be filled, signed, and used just like your uploaded PDFs.

## Text tags

[Text tags](/help/definitions/text-tags) are pieces of text you can include in your document to indicate where someone should sign, initial, where their name should be filled, and more. Anvil will look for text tags in your document and convert them into fillable fields. Fields created from text tags can be attached to signers, or filled, just like fields you'd draw in Anvil.

For example if your document contained:

```
This agreement between {{signerName}} and AcmeCo. .....
```

Anvil would recognize the text between `{{` and `}}` as a text tag. When uploaded, Anvil would create a field from `{{signerName}}` that could be assigned to a signer.

Text tags work in both PDFs and Word documents uploaded to Anvil. See the [text tags documentation](/help/definitions/text-tags) for more information on how to use text tags, formatting, and their capabilities.

Text tags also work with the API, notably with Etch e-sign API, where you can automatically assign fields to signers through text tags. See the [e-sign API docs](/docs/api/e-signatures#using-text-tags) for usage information.

## Resources

Go forth and upload your text-tag laden Word docs! These resources should help you get up and running:

* [Text tags formatting documentation](/help/definitions/text-tags)
* [Text tags API documentation](/docs/api/e-signatures#using-text-tags)

If you have questions, let us know at [support@useanvil.com](mailto:support@useanvil.com). We'd love to hear from you!
Squared Numbers Function
Published: 2021-09-07 16:33:53

```python
# squared_number_function.py
#   This program uses a function to square each entry in a numbers list.
# by: Scott Gordon

def main():

    numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    squared_numbers = []

    def square_each(numbers):
        """This program uses a function to square each entry in a numbers list."""
        for number in numbers:
            squared_numbers.append(number ** 2)
        return squared_numbers

    print(square_each(numbers))


main()

```
Photo by <a href="https://unsplash.com/@volkanolmez?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Volkan Olmez</a> on <a href="https://unsplash.com/s/photos/numbers?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Restoring AWS System after messed up
Tags: aws, serverless, android, linux
Published: 2021-09-07 16:15:13

While many of developers are focusing on RAD (Rapid Application Development), preferable to go with AWS systems.
Well, this is pretty much best solutions at ever.
But in case if you've messed up with the firewall or permissions of the filesystem, then I got something for you.
Recently I stuck in scenario where I misconfigured the Firewall & changed the OS level files User Group.
But fortunately I found a solution,
Here it is.

For a case where I set the permissions for /home/ubuntu to 777, my OS is Ubuntu 18.06

1. Go to EC2 Instances
2. Stop the instance with which you've played & dumped it down.
3. Right Click on the instance & go to **Edit User Data**
4. Paste the below command

```#cloud-config
bootcmd:
- cloud-init-per always fix_broken_ufw_1 sh -xc "sudo chown root:root /home >> /var/tmp/svc_$INSTANCE_ID 2>&1 || true" 
- cloud-init-per always fix_broken_ufw_1 sh -xc "sudo chmod 755 /home >> /var/tmp/svc_$INSTANCE_ID 2>&1 || true"
- cloud-init-per always fix_broken_ufw_1 sh -xc "sudo chown ubuntu:ubuntu /home/ubuntu -R >> /var/tmp/svc_$INSTANCE_ID 2>&1 || true"
- cloud-init-per always fix_broken_ufw_1 sh -xc "sudo chmod 700 /home/ubuntu /home/ubuntu/.ssh >> /var/tmp/svc_$INSTANCE_ID 2>&1 || true"
- cloud-init-per always fix_broken_ufw_1 sh -xc "sudo chmod 600 /home/ubuntu/.ssh/authorized_keys >> /var/tmp/svc_$INSTANCE_ID 2>&1 || true"
```

In brief
Consider your 
```
- cloud-init-per always fix_broken_ufw_1 sh -xc "your entire command with sudo as you do it on normal ubuntu >> /var/tmp/svc_$INSTANCE_ID 2>&1 || true"
```

Just start & boom.
Agrippa v1.1.0 introduces base directories and post commands
Tags: react, javascript, webdev
Published: 2021-09-07 16:06:34

About a month ago, the first production version of [Agrippa](https://github.com/NitzanHen/agrippa) was published, and I announced it in my first post on dev.to, [Meet Agrippa, the React CLI for component generation](https://dev.to/nitzanhen/meet-agrippa-the-react-cli-for-component-generation-26pk). I was honored at the amount of positive feedback for the project (thank you all!!), and had immediately started working on improving the tool further. 

# v1.1.0

A few days ago, [v1.1.0 of Agrippa was officially released!](https://github.com/NitzanHen/agrippa) 🎉

The new version introduces two important new features for the React CLI:

- **Base component directory:** projects can now specify a base directory, under which all components be generated! this makes Agrippa much more convenient to use in real projects, and can prevent developers from accidentally generating components in the wrong places.
Read more about the base directory in the wiki page, [using baseDir and dest](https://github.com/NitzanHen/agrippa/wiki/Using-baseDir-and-dest).
- **Post command:** users can now also specify a command to be run after generating a component, with the ability to inject into it dynamic paths (e.g. the component's path). For example, users use the post command to open new components in their favorite IDE automatically after generating them!
For common recipes and more info, refer to the [Post Command cookbook 🍲](https://github.com/NitzanHen/agrippa/wiki/Post-Command-cookbook-%F0%9F%8D%B2).

v1.1.0 also improves logging of info, debug information (with `--debug`) and errors.
Additionally, dependency versions were bumped (though this should have no impact on usage).

*To update, call `npm i -g agrippa` (or, to use the new version directly, call `npx agrippa [...]`).*

Also, [we have a wiki now!](https://github.com/NitzanHen/agrippa/wiki)

# What's next?

Agrippa is still growing; I have some ideas in mind about how to improve Agrippa further, including more options and features, more standardized testing, more docs, etc. 

That being said, Agrippa is meant to be useful to many React developers in many environments, including you! therefore, if you use Agrippa, and have found a bug or want to suggest an improvement, please [open up an issue on GitHub](https://github.com/NitzanHen/agrippa/issues)!

One of the features currently in the works is [support for styled-components](https://github.com/NitzanHen/agrippa/issues/2). I, personally, am not too familiar with `styled-components`, so if you're using it, any suggestion or input about what can be useful for you is most appreciated! to join the discussion, see [Add support for styled components](https://github.com/NitzanHen/agrippa/issues/2) on GitHub.

Also, we're considering opening a Twitter account for Agrippa, so be on the lookup for that!

Finally, if you like Agrippa, please spread around its word!