teleren/devto huggingface dataset:
Avoid Magic Numbers to Increase Code Readability
Tags: javascript, refactoring, python, java
Published: 2021-03-03 17:29:33

### What are magic numbers?

Magic numbers are any numeric constant declared in your code. They could help you convert minutes to seconds, set limits for the number of all records in a database, or repeat a process a constant number of times. In any case, you'll see things like `for(const i = 0; i < 10; i++)` or `return x * 60`. 

### Why should you avoid them?

On their own, these numbers carry no explicit meaning, the developer has to *infer* what they are from the context they are used. This might be easy, everyone knows there are 60 seconds in a minute. Others, like the example for converting kilometres to miles below, are more obscure. 

### What should you do instead?

Consider this example. On its own, `0.6213712` carries very little meaning. We can establish from the method name that this might be the number of miles in a kilometre but without looking it up or a code comment, we can only assume. 

By giving this value its own variable with a helpful name, we're writing self-documenting code that gives the next person to read this code all the information they need to know exactly what a value is.

**Example one**

```js
// Before: large float in the middle of a function
const convertKilometersToMiles = (distanceInKm) => {
	return distanceInKm * 0.6213712;
}

// After: The function is easier to read at a glace. 
// Anyone reviewing the code can clearly see the intent of the function
const MILES_IN_KILOMETER = 0.6213712;

const convertKilometersToMiles = (distanceInKm) => {
	return distanceInKm * MILES_IN_KILOMETER;
}
```

**Example two**

```js
// Before
if (users > 10) {
	throw new Error("too many users");
}

// After
const CONCURRENT_USER_LIMIT = 10;

if (users > CONCURRENT_USER_LIMIT) {
	throw new Error("too many users");
}
```
Go Update Your GitHub.... NOW!!
Tags: beginners, github, codenewbie, career
Published: 2021-03-03 17:28:12

*If you are a code newbie and haven't heard of GitHub.... chiiilllle you betta get with the program right now!*

Ok, so you guys know that I like to be as honest and transparent with you all of the time. So here is my new confession: **I just now started updating my [GitHub](https://github.com/xoshly) account.** Why now? Because I didn't understand it or the importance of it until now. (*insert face-palm*)

### Backstory:
I started coding in July 2020. I had and **still have no mentor.** I have been doing this coding journey on my own ever since as a new mom and well within the first year of my marriage.... well, a little over a year. 
I have always heard about [GitHub](https://github.com/), but even with the [Youtube](https://www.youtube.com/) videos and such, I still didn't understand the concept. (I'm ignorant, I know.)
I would play around with it and make some commits every now and then but that was it. I still had all of my notes and code files on my laptop and that's how I would do it.

### Fast Forward to the Present:
I'm strolling around on [LinkedIn](https://www.linkedin.com/) and I saw someone who made a post about his struggles on finding a job. He had a lot of feedback from his post and one particular person commented with her feedback from his profile. 

She listed 3 things and amongst those things, she talked about his [GitHub](https://github.com/) account and ***how quiet it was.*** Quiet meaning that he hasn't been active on it and hasn't had a lot of ***commits(activities).*** She said that it was important to ***"light up your profile with green commits"*** because it:
- showed employers the quality of your code, 
- how often you code, 
- how well you work with others on their code and vice versa.

### Where's the green?

So I went to my [GitHub](https://github.com/xoshly) account knowing damn well that I haven't made any kind of commits on there, and it literally shows that I only had activity in October (one green square), January (one green square), and February (two green squares). 

***I freaking panicked!!***

I didn't want employers to look at my account and judge it as I'm not serious about coding or that I was a fraud, or a lazy ass... you get the drift?!

So, the only thing I can do is to "commit" to [GitHub](https://github.com/), upload all of my code projects back from August 2020 to their own reps, and also upload my notes to their own reps. 

### What if I'm still learning? 

Because I am still learning, and there are times where I am not coding, but I am taking notes from my studies.

Uploading your notes will also show your commitment to coding and will also **"light up"** your account green for that day. 



##### Question: When did you start using GitHub and when did you start taking it seriously?
Start using fields in C#. Using properties is not a good habit and won't do you any good...
Tags: csharp, dotnet, beginners, backend
Published: 2021-03-03 17:24:32

A field is a variable of any time declared in the class. The fields are usually private, which means that they cannot be accessed from outside the class.

Field could be exposed by a public property - however, it's not recommended in every case.

Exposing a field by setter and getter might lead to an unwanted state of the system - that's because it's harder to keep control over what is assigned to a field.

Let's take the Address class as an example. If we expose just properties - we can write whatever we want into the zip code.

```csharp
public class Address
{
	// Other properties
	public string ZipCode { get; set; }
}

static void Main(string args[])
{
	var address = new Address();

	address.ZipCode = "I can type whatever I want here!";
}
```

Let's refactor it and see if we can do it better.

```csharp
public class Address
{
	// Other parts of Address class

	private string _zipCode;

  public void SetZipCode(string zipCode)
  {
    if(!string.IsNullOrEmpty(zipCode) && zipCode.IsValidZipCodeFormat())
			_zipCode = zipCode;
		else throw new ArgumentException(nameof(zipCode));
  }
}

static void Main(string args[])
{
	var address = new Address();
	
	address.SetZipCode("81-840");
	
	address.SetZipCode("abcdefgh"); // throws Argument Exception
  
	// Not possible anymore
  // address.ZipCode = "I can type whatever I want here!";
}
```

We encapsulated the knowledge of how to set the zip code and what rules have to be fulfilled within the SetZipCode method. Now, anyone calling this method will have to fulfill those rules.

### Summary
Don't get me wrong, properties are awesome and they have their place. But I often see them misused and they're often a reason for lacking encapsulation. If possible - limit the possibility to modify your data with carefully crafted methods.

Join [dotnetcoreschool.com](https://dotnetcoreschool.com) and learn C#
Persist Scroll Positions with Hotwire Turbo
Tags: javascript, rails, tutorial
Published: 2021-03-03 17:20:43

{% youtube yRH6ezEAfF8 %}

Persisting the scroll position of an element is a nice way to keep users not get lost on your website. In this tutorial I go through how to implement a persisted scroll position using Hotwire Turbo.

We do this by hooking into the lifecycle events of Hotwire Turbo, then cache the current scroll position of each element we want to persist.

```html
<!--
src/_components/navbar.liquid

We added the "data-turbo-permanent" attribute to this element, along with a unique ID.
-->
<nav class="navbar__nav" data-turbo-permanent id="navbar">
  {% for i in (1..10) %}
    <ul>
      <li>Item {{i}}</li>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
        <li><a href="/posts/">Posts</a></li>
      </ul>
    </ul>
  {% endfor %}
</nav>
```

```javascript
// frontend/javascript/turbo-scroll.js
// This JavaScript saves the scroll position of each element with the "data-turbo-permanent" attribute.
// When the next page is renders, we restore the scroll position.
(function(){
  var scrollPositions = {};

  addEventListener("turbo:before-render", function(){
    document.querySelectorAll("[data-turbo-permanent]").forEach(function(element){ 
      scrollPositions[element.id] = element.scrollTop;
    });
  });

  addEventListener("turbo:render", function(){
    document.querySelectorAll("[data-turbo-permanent]").forEach(function(element){ 
      element.scrollTop = scrollPositions[element.id];
    });
  });
})();
```
Nevertheless, Pachi Coded in 2021!
Tags: wecoded
Published: 2021-03-03 17:14:56

Hello freeends!
This is one of my favorite time of the year here on [Dev.to](http://dev.to/)!  
I get to read from other awesome women, connect with allies and learn more about the work they are doing, and I get to write about myself LOL

First, it is almost unbelievable how much my life life has changed since the last March, and no, I am not talking about pandemic related changes.
I found a career within tech that I truly love, 
I got a job that I have absolutely no complains about, 
and I am growing every day, being challenged without being overwhelmed.

## My most recent achievement was…
My new job! Actually, it has been 3 months since I started, so it is not super new anymore.
But I am a developer relations engineer at New Relic, where I get  to [stream live code](https://twitch.tv/pachicodes), create content for other developers, and build connections with awesome people!

## Advocating for myself looks like…
- Saying NO when I need,
- Taking breaks, and respecting my body signs to slow down,
- Being true to myself, even when it is not "female" behavior

## My biggest goal is…
Ready for the cliché?
To make a difference!

Coding and [Live coding changed my live, for the better!](https://dev.to/pachicodes/how-streaming-live-coding-made-my-life-better-10cl) 

And I want to share it with people, specially women of color. It is interesting how many women I chat with that never thought they could be programmers, and I was them one day.

Honestly, if I can help one person to get a career that better their lives, I will feel great. But I won't stop on that one!

## My advice for allies to support underrepresented folks who code is...
First, thank you Dev.to, for the extra step of having someone reading the #shecoded posts before accepting it to make sure they are safe.

And my advice is simple.
We don't need you to say you are an ally.
**We need you do the work.**

### How?
- Call out people when you hear/read them with sexist and discrimination BS,
- DO NOT give us advice without being asked, specially if we are not close, if you have to say "I hope I don't sound condescending" it is because you are being condescending.
- The base minimum is step out of our way! Sometimes if is better if you say nothing than Twitte about how great an ally you are, when you are doing nothing to help.


*Note that while I am a bubbly happy person, when I walk about being a women in tech I get mad, because there is so much wrong! I used to apologize for this rage, but not anymore.*

Xoxo,
Pachi C.
Contact Us Form UI In HTML/CSS
Tags: css, html, uiweekly, webdev
Published: 2021-03-03 17:11:07

In this contact us form we simply made basic and minimal user-interface in HTML and CSS. Here we used background images and form to make these contact our elements.

We use one section and input fields to make this element & also used one send button. To make it more attractive we used border-radius property. To make it mobile-friendly and fully responsive we used media queries.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/contact-us-form-ui-in-html-css/)
i18n in web components
Tags: webcomponents, i18n, a11y
Published: 2021-03-03 17:09:18

I18N is short for Internationalization which means the process of designing projects to be [more accessible to a global audience](https://www.investopedia.com/terms/i/internationalization.asp). I've worked on large open source projects before and contributed to others (Drupal, Sakai) and know that i18n is a big deal for multiple reasons:
- It helps on-board those of languages other than your own
- It allows users of languages other than your own to adopt
- It is part of [Section 508 accessibility standards](https://www.section508.gov/content/guide-accessible-web-design-development#language)
- It helps improve diversity of who can be involved
- It signals software / platform maturity and encourages more participation as a result of the previous bullets.

The [HAXTheWeb](https://haxtheweb.org/) project team was faced with a unique problem with regards to i18n which caused us to have it on the back burner awhile (longer than we should have).
- Time: We were busy putting out other fires / building architectural underpinnings. i18n for a very small project team was always a "We'll get there"
- How: Web components provided a unique forefront to attempt to solve i18n which is exciting but also daunting as there is little work in this area to reference
- State: We needed HAX, our editor of the future, to have solid state management (which is does now, shout out to MobX). When State management was solidified, I knew it opened up pathways to solving i18n holistically.
- unbundler: We fundamentally do not believe in building one-off applications. The web is made of thousands of lego pieces, and our [unbundled approach to development](https://dev.to/btopro/part-1-how-penn-state-unbundles-web-components-for-cdn-deployments-20di) keeps everything as small parts. *All i18n solutions in the space we were reviewing, assuming a singular application*.

## But no longer...
Introducing a series of posts that discuss the considerations when applying i18n to web components. This will document in written, code samples, and video form how we went about solving this problem in a way that tries to find the right balance of developer experience and end user performance. This is not THE solution, it's one of several, so first we'll start with a review of solutions and why we didn't go with them.

Enjoy and hope to [HAXing on our project](https://bit.ly/haxslack) soon!
Nevertheless, Angelfirenze Coded...
Tags: wecoded, teamtreehouse, twitch, 100daysofcode
Published: 2021-03-03 16:43:02

So last summer, while battling an extensive tooth abscess, I partook in the #100DaysOfCode challenge through Team Treehouse.  As much as I would love to say that it was an endlessly joyful experience, it wasn't, to be honest.  

I suffer deeply from Imposter Syndrome and I believe that's what made this so difficult for me.  I tried to get out of my own way, as Tyrese Gibson wrote, but it was intensely difficult at times because my brain was trying to figure out what to do first, when.  

Every time I wandered away from my learning style (typing along with the code shown in the video), I immediately ran into difficulties and a lack of motivation.

Being socially isolated, in general, for a very long time didn't exactly help -- when I post on Facebook, no one really responds.  Those that do are a scant amount of relatives.  As thankful as I am to have a large family, it doesn't really help an autistic person like myself if a branch of it views you as being too weird and many other things.

In the end, it took losing my favorite aunt to sepsis to spur me on to finally cross that #100DaysOfCode threshold.  I really did feel like devoting my finish line banner to her, both on Facebook and Twitter.

Hacktoberfest2020 was extremely difficult because, right at that moment, I became employed in an extremely taxing job at my local major grocery store that took such a huge toll on my body that I really feel like I injured myself.  So when I would get off work at eleven and had to get a ride home -- even though this was a part-time job -- there was absolutely no energy left in me to even attempt #Hacktoberfest2020.  I prioritized sleeping, resting, eating, and doing yoga to try to cope with said utter depletion.

On the last day, I finally busted out some additions to people's projects because all month long, resources like RaiseDevs:

{% twitch RaiseDevs %}

A site I came across, with the host of the videos I was watching on Twitch. The developer who specifically told me that issues and other, non-pull request-related actions would be accepted because WOW, were the rules changed to the point where I was completely perplexed and rather dejected because I never feel like I've learned enough.  In the end, I didn't qualify because while I made the contributions, they weren't counted because the accounts I was trying to help didn't seem to be tracking anything going on in a timely fashion.  

'Whatever', I told myself, 'I tried BLOODY HARD and I'm going to be fine with not getting swag this year because I had a situation that actually injured me', as I later discovered.  I'm satisfied with my efforts even without the yearly t-shirt.

I'm on Social Security Disability, so learning programming from sites that I love, such as Team Treehouse, is not always an option, though they were willing to extend my account so I could finish.  So I guess my entry is about how I do make attempts to continue my programming journey even when I am in intense situations.

So, yes, I guess: nevertheless, I coded.
What is Open Graph Protocol and how to create Twitter Cards?
Tags: html, webdev, tutorial
Published: 2021-03-03 16:10:18

Link to original article with code snippets (recommended): https://gabriellazcano.com/blog/what-is-open-graph-protocol-and-how-to-create-twitter-cards/

Have you ever seen Twitter links that have a preview to the content? Those links are using Open Graph Protocol. This is something that I literally found out today, as I was asking a fellow blogger Flavio Copes, recommended btw. Apparently is a very common practice but it doesn’t get used so often by new web developers and can make your content stand out.

## What is Open Graph Protocol?
Open Graph is an internet protocol that was originally created by Facebook to standardize the use of metadata within a webpage to represent the content of a page.

Within it, you can provide details as simple as the title of a page or as specific as the duration of a video. These pieces all fit together to form a representation of each individual page of the internet.

## Why to use it?
As I said before it makes your content stand out, which is obviously what we want on the internet. Not using a content rich link can make us lose potential traffic we could have had.
Testing a Screen with React Native Testing Library [Live Coding]
Tags: reactnative
Published: 2021-03-03 16:35:38

---
title: Testing a Screen with React Native Testing Library [Live Coding]
published: true
description: In this video I walk through my process for writing tests, using React Native Testing Library, on a React Native screen. We write tests for the client side validation and form submission.
tags: reactnative
//cover_image: https://direct_url_to_image.jpg
canonical_url: https://www.reactnativeschool.com/testing-a-screen-with-react-native-testing-library-live-coding
---

{% youtube VuNPrFH9H0E %}

- [@testing-library/react-native](https://github.com/callstack/react-native-testing-library)
- [@testing-library/jest-native](https://github.com/testing-library/jest-native)
- [Code from Video](https://github.com/ReactNativeSchool/testing-screen-react-native-example)
Closures in JavaScript
Tags: javascript, beginners
Published: 2021-03-03 16:28:43

In JavaScript we can pack a function inside another function. When one function A is inside another function B then function A is called outer function while function A is called inner function and this phenomenon is called a closure.
In closure the inner function can have access to the outer function scope.

```
function B() {
  let x = 7;
  function A() {
     console.log(x);
  }
  return A;
}

var c = B();
c();

>7
```
Closures are used to make private function or variables that has limited access. The outer function of a closure cannot access the inner function scope so it can be used to hide data.


Apart from this use closure do have drawbacks where as long as closure is running memory cannot be garbage collected resulting to memory leaks. This can be avoided by making them null force fully after the use.
12 Tips To Help You Stay Motivated While Learning To Code
Tags: 100daysofcode, codenewbie, javascript, tutorial
Published: 2021-03-03 16:22:38


#### How To Keep Motivating Yourself While Learning To Code

![](https://cdn-images-1.medium.com/max/900/0*bqGCnAocaaDimChB)

Photo by [Cristofer Jeschke](https://unsplash.com/@cristofer?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

As the new year starts we take some resolutions and think we will fulfill this resolution no matter how many hurdles I need to face or no matter how much I need to give my favorite things.

**For example,** there are more than 13% of people who make resolutions to do exercise. but do you think how many of them might fulfill that?

The exact same thing happens when we decide to learn to code. We quickly take some courses available in Udemy or freeCodeCamp and start practicing them.

After some weeks, sometimes you feel that the course you took might not have all content you were looking for and you buy some other courses and as all courses have different content, we might lose in the courses itself.

![](https://cdn-images-1.medium.com/max/900/0*j8etBT6k5YSiGq6K.gif)

After several months, we might feel that you are nowhere as you have lack knowledge in all the topics and this can lead to disappointment and basically giving up on learning new stuff.

But do you think what you missed when you start coding? What if someone guided you in the right direction? or someone motivated you throughout this journey?

If you’re trying to teach yourself how to code, you are probably pretty familiar with the struggles in the story.

![](https://cdn-images-1.medium.com/max/900/0*IEYrkQJrh4rxKt5Z)

Photo by [Severin Höin](https://unsplash.com/@sevhoein?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

**_In this article, I would like to discuss some of the actionable tips to keep you motivated in your learning journey._**


[Continue reading »](https://javascript.plainenglish.io/12-tips-to-help-you-stay-motivated-while-learning-to-code-ee450f9ab951?source=rss-795bd33d705------2)