teleren/devto huggingface dataset:
How to create Environment Variable on Windows & use it inside ASP.NET Web Form
Tags: windows, environmentvariable, net, webform
Published: 2020-12-28 05:26:40

ASP.NET Web Form may not be as sexy as those new web stacks such as MERN and JAM stack. But Web Form is still widely used in many enterprise-level systems.

In this short article, I will walk you through how to implement environment variables inside Web Form on Windows. This can come handy if you open source your Web Form project. Preventing your precious secrets from leaking to strangers.


## Create an Environment Variable in Windows
1. Open System panel & Click on __Advanced system settings__
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u9kwhndvvpcqt3l4dnyc.png)
2. Navigate to the __Advanced__ tab & click on __Environment Variables__
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3c0pxjt2f27r34cy77lm.png)
3. Click on the __New__ button to create an environment variable
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n5ic4zqbutvk8916zw4n.png)
4. In this case, the variable name is __Hello__, the variable value is __World__
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8pmu0ke6cpz1u7m12tdy.png)
5. Click __ok__ to save
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/joxly43y4xls2qr6negb.png)
6. Great, you have just created an environment variable on Windows!

## Using the environment variable inside ASP.NET Web Form
1. __[Attention]__ Restart your Visual Studio. Otherwise, you will face an error like below
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mo18v6w0t9g8uiozqii5.png)
2. In this case, we will retrieve the value from the environment variable, and insert it to a label component
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ipa71g96q3ww2r3il11s.png)
3. Start the application and navigate to the page where the label is located. You should be able to see the value of the variable be displayed!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n6nje23o721c8lyejccm.png)

## Summary
Nice! There is all you need to do, in order to 
- Create an environment variable on Windows
- Use the environment variables inside ASP.NET Web Form

Thanks for taking time to read this article. If you have any questions or I missed out something important. Please feel free to comment below. Stay hacking! :)
Animated Bottom tabs, new way for more interactive feedback
Published: 2020-12-28 04:58:47

Animated bottom tabs, New way for more interactive feedback

Animated bottom tab not only gives pleasure feel it also helps the color blinded people to easily detect the tab switch and a button click.


Click on the below video to learn how you can easily convert a normal plain bottom tab to animated one in a single line of code.


{% youtube 8gTaXwmnuNE %}
Wine Mastery  trên 500p
Published: 2020-12-28 04:39:46

Nếu như bạn hiện đang mong muốn tìm kiếm 1 chai rượu vang hảo hạng mà ko biết làm sao thì cứ đến ngay với Kobi Wine Mastery. Chúng tôi là đại lý kinh doanh rượu vang vô cùng uy tín mà người yêu rượu người nào cũng biết đến. Không những bán rượu vang chất lượng giá cả tốt, chúng tôi còn đào tạo hàng ngũ nhân viên tư vấn hiểu biết rất rộng về rượu chát và luôn luôn tận tình giúp người tiêu dùng tìm kiếm được chai rượu chát đúng ý nhất có thể. Bạn còn đắn đo gì nữa mà không đến ngay Kobi Wine Mastery.

Xem thêm tại: https://500px.com/p/masterykobiwine
Fundamentals of Client Side Javascript (navigator, window, document, etc.)
Tags: javascript
Published: 2020-12-28 04:35:08

## Why read this?

Often when learning client-side javascript people skip right to DOM manipulation with the native DOM API (document.querySelector) or with jQuery. While these are important and pivotal skills to have there are several javascript browser APIs that can be used to solve all sorts of problems.

The ones I'll be covering

- navigator
- window
- customElements
- document
- localStorage

- [FULL LIST OF WEB APIS](https://developer.mozilla.org/en-US/docs/Web/API)

## navigator API

- [navigator documentation](https://developer.mozilla.org/en-US/docs/Web/API/Navigator)

The navigator object has several functions that can be used to determine

- what browser is being used (navigator.userAgent)
- whether there is an internet connection (navigator.online)
- register service workers

## window API

The window object really bundles most of the APIs I'll be talking about but one of the parts of it people may not be aware of but is quite useful is the location property.

- [window API] (https://developer.mozilla.org/en-US/docs/Web/API/Window)

- window.location gives you access to the URL bar to redirect users to other pages or parse URL queries from the URL

## customElements

the customElements registry allows you to register elements with HTML tags, also known as web components.

- [custom elements API](https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements)
- [All About Web Components](https://tuts.alexmercedcoder.com/2020/WebComponentLibs/)

## document

The document object allows us to manipulate, create, and remove elements from the DOM (document object model). This is how we make sites dynamic, exciting, and interactive. jQuery is a popular abstraction over this API, the most downloaded javascript library of all time. Modern Frontend frameworks like React, Vue, Angular, and Svelte also provide a large amount of abstraction over this API.

- [DOM Manipulation Reference - Plain Vanilla/jQuery](https://tuts.alexmercedcoder.com/2020/jQuery/)
- [document API](https://developer.mozilla.org/en-US/docs/Web/API/Document)

## localStorage and sessionStorage

The storage API allows you to store data as strings in the browser.

- localStorage: saves the data until you remove it
- sessionStorage: saved the data until the browser is closed

They both work the same way.

- [Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Storage_API)

## Adding Data

```js

const data = {
    name: "Alex",
    age: 35
}

localStorage.setItem("data", JSON.stringify(data))
sessionStorage.setItem("data", JSON.stringify(data))
```

## retrieving data

```js

const extractedData = JSON.parse(localStorage.getItem("data"))

const extractedData2 = JSON.parse(sessionStorage.getItem("data"))

```

## Removing Data

```js

localStorage.removeItem("data")
sessionStorage.removeItem("data")

```
Gradient Boost for Regression
Tags: datascience, machinelearning, beginners
Published: 2020-12-28 04:15:51

<span>Photo by <a href="https://unsplash.com/@billjelen?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Bill Jelen</a> on <a href="https://unsplash.com/s/photos/rocket?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

**Gradient Tree Boosting**

Gradient Tree Boosting is an ensemble algorithm that could be applied to both classification and regression problems. Here I will describe how gradient boost works for regression. Gradient Boost uses Decision Trees as weak learners, and each Decision Tree predicts pseudo-residual values, and all Decision Trees have the same 'weight' in the final decision (described by the learning rate). 

There are a few key components in the Gradient Boosting algorithm:

a) Loss function - the natural choice for regression is 'Least Squares' 
(Note: similar to the linear regression but commonly used with coefficient 1/2*(True-Predicted)^2, to avoid pseudo-residuals and computing actual residuals = (True-Predicted).

b) Hyperparameters:
learning rate (used to scale each weak learner prediction), and parameters related to the weak learners themselves (e.g. number of weak learners, maximum depth of each tree, etc.) 

**Algorithm steps**

Let's dive into the details of the algorithm itself. This is the mathematical description of the Boosted gradient Trees.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mp00a2bfvqxk7s258849.png)
Source is [here](https://en.wikipedia.org/wiki/Gradient_boosting).

Below is the simplified explanation of the above steps when using 'Least Squares' Loss Function L(y,F(x)):

1) Get the initial prediction, it is equal to the mean of the target column. 
2) m is the number of weak learners. So we do the below steps for each decision tree (e.g. m=1 to m=100, when n_estimators=100):

a. Compute residuals (True-Predicted) for each tree iteratively (meaning previous residuals used as a target for the next decision tree).
note: for the first tree, Residual = True - Target_Mean (Predicted in the previous step)
    b. Fit decision tree to the residuals
    c. Compute output value for each leaf in the tree (in this case = mean of the residuals in this leaf)
    d. Update the predicted values; new_prediction = previous_prediction + learning_rate * output_value.
    e. Repeat steps 2a to 2e till all weak learners constructed.

3) Compute the final prediction F(x)


**Summary**

From the short description above we can see that there are some similarities with AdaBoost (like iterativeness - next trees depends on the previous predictions), and differences(each tree has the same learning rate vs different weights in AdaBoost). 


References:
1. [Video material](https://www.youtube.com/watch?v=3CC4N4z3GJc)
2. [scikit-learn](https://scikit-learn.org/stable/modules/ensemble.html#gradient-tree-boosting)
3. [Wikipedia](https://en.wikipedia.org/wiki/Gradient_boosting)
Maps (Hashmaps) in Javascript
Tags: javascript, programming, webdev, codenewbie
Published: 2020-12-28 04:08:11

### MAPS
A map is a data structure which maps values (keys) with other values.  
In Javascript we can use an Object for this purpose.

Suppose we've to store student's marks, we can use an object for this purpose.

```javascript
let marks={
  "John": 98,
  "Arun": 87,
  "Robert": 91
};

console.log(`Arun scored ${marks["Arun"]} marks.`);
// → Arun scored 87 marks.
console.log("Are Julie's marks known?", "Julie" in marks);
// → Are Julie's marks known? false
console.log("Are toString's marks known?", "toString" in marks);
// → Are toString's marks known? true
```

Although the first 2 results were expected, we certainly didn't expect the 3rd result as we didn't add any key with the name of 'toString' to our marks object.
But this is the downside of using an `Object` as a `Map`.
Along with the key-value pairs we define the plain object also derives properties from `Object.prototype`

![Example 1](https://dev-to-uploads.s3.amazonaws.com/i/7ov9b9b43yqjvnttuk57.PNG)

Hence using plain objects as maps could be dangerous. So suppose we want an object without it inheriting from `Object.prototype`, we can do this in many ways:
One of the way is to pass `null` to `Object.create()` method. In this way the resulting object will not derive from `Object.prototype` and can be safely used as a map.

```javascript
console.log("toString" in Object.create(null));
// → false
```

Also if we're using a plain object as our map, we can avoid using `in` keyword for finding whether key is present in object or not; instead we can use `hasOwnProperty()` method which ignores the object's prototype.

```javascript
console.log({x: 1}.hasOwnProperty("x"));
// → true
console.log({x: 1}.hasOwnProperty("toString"));
// → false
```

There's another problem with using plain objects. It only accepts strings as it's keys. And if suppose we want suppose an object as a key, we cannot do this.

Don't worry, Javascript also provides us with `Map` class which is written for this exact purpose.
The methods `set`, `get`, and `has` are part of the interface of the Map object.

```javascript
let marks = new Map();
marks.set("John",98);
marks.set("Arun",87);
marks.set("Robert",91);
console.log(`Arun scored ${marks.get("Arun")} marks.`);
// → Júlia scored 87 marks.
console.log("Are Julie's marks known?", marks.has("Julie"));
// → Are Julie's marks known? false
console.log("Are toString's marks known?", marks.has("toString"));
// → Are toString's marks known? false
```


References:
1. https://eloquentjavascript.net/06_object.html
2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create
3. http://adripofjavascript.com/blog/drips/creating-objects-without-prototypes.html
JavaScript: Difference between functions and arrow functions
Published: 2020-12-28 03:51:32

There are many ways you can define functions in JavaScript. First is using the function keyword. There is function expression, function declaration

    // function declaration
    function(name) {
      return "Hello, ${name}!"
    }
    
    // function expression
    const greeting = (name) {
      return "Hello, ${name}!"
    }

Second is using the ES2015 arrow function syntax.

    // arrow function
     const greeting = (name) => {
      return "Hello, ${name}!"
    }

How do you know which one to use? Of course, depending on how you want to use it, think of 1. **this** value 2. Constructors 3. Implicit returns.

In regular functions and arrow functions, **This** values are dependent on how the function is called(invoked). *"A function's this keyword behaves a* little differently in JavaScript compared to other languages. *It also has some differences between strict mode and non-strict *mode.*

*In most cases, the value of this is determined by how a function is called (runtime binding). It can't be set by assignment during execution, and it may be different each time the function is called. ES5 introduced the bind() method to set the value of a function's this regardless of how it's called, and ES2015 introduced arrow functions which don't provide their own this binding (it retains the this value of the enclosing lexical context)."(MDN, this keyword)* 

Regular functions can handle constructors well, as for arrow functions, when you use the *new* keyword to create a constructor it will throw an error.

Regulars functions, you must use the returns keyword to explicitly return your value. As for arrow function, you can implicitly return, if its a simple **num+1** you can remove the curly braces and it will still know to return the value.

These are just some differences between using functions. If the reader(you) think there should be more information that I should add or alter, please let me know. Thank you for reading!
Military to Software Engineer Journey Day 1
Tags: newbie, military, 100daysofcode, coffeebreakpython
Published: 2020-12-28 03:48:00

Must read for beginners:

***“Coffee Break Python”*** **by Christian Mayer**

This is honestly some decent reading material for learning Python that I would **HIGHLY** suggest. It focuses on active learning rather than passive. The fundamental objectives it has to absorb the material is quite interesting. The objectives are:

**1. Overcome the Knowledge Gap** 
**2. Embrace the Eureka Moment**
**3. Divide and Conquer** 
**4. Improve From Immediate Feedback**
**5. Measure Your Skills**
**6. Individualized Learning**
**7. Small is Beautiful**
**8. Active Beats Passive Learning**
**9. MakeSourceCodeaFirst-classCitizen**
**10. What You See is All There is** 

After reading roughly 50 - 60 pages that explained the fundamentals, the real learning began. Basically utilizing the ELO score in chess as a measurement tool in measuring your skills/development while working through simple then complex puzzles.

The first puzzle was “Hello World” figuring out the output:

    print(“hello world”)

This took microseconds to figure out. The next was ***“variables and float division”***.  

     x = 55 / 11 
     print(x) 


and understanding that when division is utilized you get an “xxxxx” output. 

After that, it was ***“Basic Arithmetic Operations”***. It brought me back to basic math “Please Excuse My Dear Aunt Sally”

    x = 50 * 2 + (60 - 20) / 4
    print(x)

The next puzzle for the day was  ***“Comments and Strings”***. This one I couldn’t figure out until I was actually writing it out in the terminal itself: 

    # This is a comment
    answer = 42  # the answer
    # Now back to the puzzle
    text = "# Is this a comment?"
    print(text)

Lastly, the final puzzle for the day was ***“Index and Concatenate Strings”*** before I called it a quits. I figured it out in an odd way compared to how it should’ve been solved. Then I thought to myself there’s always more than one way to get the answer. 

    x = ‘silent’
    Print (x[2] + x[1] + x[0] + x[5] + [4])

As I don’t want to provide the answer to the puzzles, seems like a fun task for anyone to try. Total there’s 50 puzzles altogether. Give it a shot and tell me what you think.
Tips for learning a new programming language
Tags: javascript, css
Published: 2020-12-28 03:24:18

---
title: Tips for learning a new programming language
published: true
description: 
tags: #javascript #css
//cover_image: https://direct_url_to_image.jpg
---
(this post is wrote for myself, and text is just translate by deepL Japanese to English)

Methods
Understand the words: functions in JS, properties in CSS, etc.
→Read references in dictionary format as many times as possible.
Understand the text: block of code in JS, chunk of function in CSS.
→Read the code in the textbook and write it without reading it repeatedly.
For JS and CSS, it's a block of code per function; for CSS, it's a design idiom.
→Increase the list of things you can do. Increase the list of things you can do. Once you can do them, combine them with JS and actually incorporate and use them.
Create an environment that can be easily executed.
→In CSS, prepare HTML and the data (text, images, SVG) to be inserted into it in advance to complete the setup stage.

Others
Make a list of what you can't do and what you can do.
→If you make a list of what you can't do, and move it to a list of what you can do, you will at least be able to create something with the list of what you can do.
Increase the number of solutions when you get stuck.
→For JS, use chrome's debugger; for CSS, use background-color to indicate the range of elements, etc.
Create a task in your mind "I want to make something like this" and build it in your mind. Read the document if you don't understand the part in advance.
→Read the documentation for the parts you don't understand.
Make it small and simple.
→If you want to understand 100 different APIs, create 100 of them.
Even when you don't feel like it, work on it.
→When you are not motivated to do something, you can do it even if the quality is low, even if it is very short, even if it is just copy-paste. Write to keep the habit of moving your hands.
Prepare a method for when you are not motivated.
→If you are using JS, type document.querySelectorAll("any") in console on a page opened in chrome and process it appropriately; if you are using CSS, use animation to move something around.

https://gist.github.com/taroyanaka/0c1fd3665a12f15044a43ec3ce158c87
Sev to Dev: Website Wireframe
Published: 2020-12-28 03:22:42

The holiday season was a little hectic this year (when is it not?! lol) and of course 2020 was no exception, but I'm back on track. I felt compelled to work on my wireframe for my portfolio website design to keep this project going strong into the new year. 

First I took a look at the sitemap I created at the end of November to refresh what I had wrote down. Check out my previous [Planning My Site](https://dev.to/sevrinn/sev-to-dev-planning-my-site-397i) post for details on how I created this.

I settled on these sections:

**Home**
* catchy tagline (tbd)
* interesting  img

**Work**
* code
* design

**About**
* picture of me
* short bio

**Contact**
* contact form
* social media links

I started with a hand drawn version that I made on my ipad pro and procreate. Ive seen a website before and I've designed a couple before too so this stage was relatively easy. 

Next, I placed my hand drawn wireframe into Photoshop for some refinement. Once I got all the sections in place, I slapped a grid on that bad boy and was able to even it out a bit so it looks balanced. 

Here are the three side by side for comparison:) On the left is the hand drawn, in the center is the non-gridded photoshop recreation, and on the right is the final wireframe spaced out proper with a grid. 

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

My next step is to turn this solid wireframe into a properly organized design comp in photoshop with the proper use of color theory, typefaces, images, and spacing. 

Stay tuned for more!
Wine Mastery  trên articleted
Published: 2020-12-28 03:07:28

Kobi Wine Mastery chúng tôi chính là đơn vị có uy tín & nhiều năm kinh nghiệm bên trong ngành nghề kinh doanh rượu vang. Những mặt hàng mà cửa hàng chúng tôi cung cấp cực phong phú với chất lượng sản phẩm bảo đảm chất lượng nhất. Từ các dòng rượu nho Pháp truyền thống cho đến những chai vang ở thế giới mới. Ngay từ những chai vang trung bình tới các loại vang thượng hạng sang trọng đều được Kobi Wine Mastery tìm, coi trọng và lưu giữ thật tốt để đưa tới tận tay khách mua hàng. Chính vì thế các bạn bảo đảm yên tâm khi lựa chọn rượu vang tại Kobi Wine Mastery.

Xem thêm tại: https://www.articleted.com/p/83246
Public Code Review
Tags: dohackathon, help, discuss, react
Published: 2020-12-28 02:06:30

---
title: Public Code Review
published: true
description: 
tags: dohackathon, help, discuss, react
---

Learning is much easier for me when it's relevant to something that I've been working on. In the spirit of learning in public, I want to crowdsource some knowledge on what can be done better in my DigitalOcean project. 
Here's the project submission: [Tic Tac Toe Arena](https://dev.to/adrfoong/tic-tac-toe-arena-4cb9)

The project is functionally complete, and I'm pretty happy with how it has turned out, but there are definitely some decisions I made that might not be the best.

I've created a few issues (and will probably create more later) on some code that I feel like I need guidance on:

1. [Rerendering with a model-based approach](https://github.com/adrfoong/t3/issues/1)
2. [Evaluate custom code](https://github.com/adrfoong/t3/issues/2)

There are probably other issues lurking in there as well that you feel you can teach me about. If so, feel free to comment below or create an issue in the repo.
|YelpCamp| Basic Authorization
Tags: javascript, html, css, webdev
Published: 2020-12-28 01:30:54

---
title: |YelpCamp| Basic Authorization
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---

                    -Adding Author to Campground 
                    -Showing and Hiding Edit/Delete
                    -Campground Permissions 

   





###Adding Author to Campground 
The purpose of adding authentication to the campground is to make sure that the user who is creating the review is who they say they are. The content that is generated by the user can be edited and deleted by the same user and not another user. 


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


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

###Showing and Hiding Edit/Delete
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ohojvohus2l5joj42d9w.png)


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


###Campground Permissions 

```javascript 

router.put('/:id', isLoggedIn, validateCampground, catchAsync(async (req, res) => {
  const { id } = req.params; 
  const campground = await Campground.findById(id); 
  if (!campground.equal(req.user._id)) {
      req.flash('error', 'You do not have permission to do that!');
      return res.redirect(`/campgrounds/${id}`); 
     }
  req.flash('success', 'Successfully updated campground!'); 
  res.redirect(`/campgrounds/${campground._id`)
 })); 

```
#PHPStorm tip: Create UUID value easily
Published: 2020-12-28 01:16:07

---
title: #PHPStorm tip: Create UUID value easily
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
1. Create new 'Live Template' from File->Settings
2. Set the template text to $VALUE$
3. Click "Edit Variables"
4. Set the VALUE to groovyScript("java.util.UUID.randomUUID() as String")

Now type uuid and press tab, and get a UUID generated

[How to](https://media-exp1.licdn.com/dms/image/C4D22AQFG_SeNlHPk1A/feedshare-shrink_1280-alternative/0/1609117891592?e=1611792000&v=beta&t=U10COlQzaHtN68dbm_wZ2ePPTU_1oXcYVNCfPBuHXis "How to")