teleren/devto huggingface dataset:
Using Hot Module Replacement in Angular 11
Tags: angular, webpack
Published: 2020-11-13 06:21:50

Angular 11 was released today and with it comes a large number of performance upgrades, bugfixes (including the third most popular issue) and improved logging.

Not only was the upgrade from Angular V10 to V11 painless but I wanted to share the new Hot Module Replacement feature. This has been exposed on the CLI if you hadn't tried it in previous versions, so now is a great time to dive in and give it a go.

For those unaware this feature is not native to Angular, rather webpack. If you'd like to read more about it you can find their documentation [here](https://webpack.js.org/concepts/hot-module-replacement/). In short you can think of Hot Module Replacement as a more advanced version of a file watcher, only replacing the modules that need replacement and (where possible) preserving state. So what does this look like in action? See the videos below (which are best viewed full screen).

# Classic Angular Reloading
{% youtube 2o4ADC26j0Y %}
The above should look very common for front end developers. We are testing out our model binding in our form. We decide that it's working well but we want to change the label on our input. Doing so forces a refresh of the page and we lose our state.

# Hot Module Replacement in Angular
{% youtube CMdNSYlEpZ0 %}
With the Hot Module replacement flag used we see a slightly different story. The initial flow is the same. We test our model binding and again want to change the label on the input. This time the Hot Module Replacement preserves our state and our input still has our user generated value. Nice!

# Adding Hot Module Replacement & Use Cases
In my current project I've nominated that we additively pick up this new feature. For most uses cases the standard watcher works just fine so retooling for a slightly better development experience for some might hurt others in the team. I propose you add a new script to your `package.json` while you're adopting this to see if it suits your needs. Perhaps something like `"serve:hmr": "ng serve --hmr"`. Then your team can either run `npm start` for their normal experience or `npm run serve:hmr`. This gives you the best of both options and allows you to pick and choose which reload strategy based on the functionality you are building out.

Consider using Hot Module Replacement when:
* You have a complex flow that you do not want to restart.
* You are making cosmetic changes and want to test on non-standard input (such as long strings).
* You are fixing / tweaking API calls and want to reuse the same form values.

What else do you like about the Angular 11 update? Let me know on Twitter or check out my content on my site.
Finally, completed hacktober fest 2020 with 6 prs.
Tags: hacktoberfest
Published: 2020-11-13 06:00:28

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### [Intro Heading]
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
Newbie hacking hacktober fest 2020
### Background
So the whole hacktober journey began like this. I got hacktober fest add on Instagram on 28 October. By night I was done researching what it is. Initially, I thought I am never gonna make it, since two days are left. But then I came to DEV community, got some motivation and started looking for issue.

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->
I made 8 contribution if I remember correctly, of which 6 were accepted


### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
I loved the energy of hacktober fest. I am all hyped up for hacktober fest 2021
#keephacking
#hacktoberfest2021
Whats your take on Webhooks?
Tags: webdev, opensource, javascript
Published: 2020-11-13 05:57:42

__Here is mine:__
![WEBHOOKS Vikas Singh](https://snipcart.com/media/203936/webhooks-explained-1.jpg)
Webhooks allows one web app to share real-time data to any other web app

__Comment out more about webhooks__
Thanks so much DEV team!
Tags: devnews, podcast, swag
Published: 2020-11-13 05:57:32

Today, I got these really cool stickers in my mail as a thank-you gift for leaving a review on the DevDiscuss!! 

![IMG_20201112_190359__01](https://dev-to-uploads.s3.amazonaws.com/i/o0kv0w1mpeafcaq1ten6.jpg)
 
Felt really happy cause I was having a depressing day, thank you so much for such heart-warming and cool stickers! 💜
Why React?

Tags: react
Published: 2020-11-13 05:47:30

React’s popularity today has eclipsed that of all other front-end development frameworks. Here is why:

Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it requires less coding and offers more functionality, as opposed to JavaScript, where coding often gets complex very quickly.

Improved performance: React uses Virtual DOM, thereby creating web applications faster. Virtual DOM compares the components’ previous states and updates only the items in the Real DOM that were changed, instead of updating all of the components again, as conventional web applications do. 

Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their logic and controls, and they can be reused throughout the application, which in turn dramatically reduces the application’s development time.
Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, developers often nest child components within parent components. Since the data flows in a single direction, it becomes easier to debug errors and know where a problem occurs in an application at the moment in question.

Small learning curve: React is easy to learn, as it mostly combines basic HTML and JavaScript concepts with some beneficial additions. Still, as is the case with other tools and frameworks, you have to spend some time to get a proper understanding of React’s library.

It can be used for the development of both web and mobile apps: We already know that React is used for the development of web applications, but that’s not all it can do. There is a framework called React Native, derived from React itself, that is hugely popular and is used for creating beautiful mobile applications. So, in reality, React can be used for making both web and mobile applications.

Dedicated tools for easy debugging: Facebook has released a Chrome extension that can be used to debug React applications. This makes the process of debugging React web applications faster and easier.
The above reasons more than justify the popularity of the React library and why it is being adopted by a large number of organizations and businesses. Now let’s familiarize ourselves with React’s features.
WHAT IS REACT JS?
Tags: react
Published: 2020-11-13 05:45:37

React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook. 

React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook. 

Now that we know what React is let’s move on and see why React is the most popular front-end library for web application development.
Solve "ReflectionException: Class env does not exist"
Tags: laravel, telescope, tdd
Published: 2020-11-12 20:13:25

---
title: Solve "ReflectionException: Class env does not exist"
published: true
description: How to solve error: "Class env does not exists" on Laravel.
tags: Laravel, Telescope, TDD
//cover_image: https://direct_url_to_image.jpg
---

* [Spanish version of this post](https://dev.to/arielmejiadev/evita-la-excepcion-ambiguous-column-en-eloquent-37el)

## The problem:

Run your tests with:

- old way:

```php
vendor/bin/phpunit
```

- new way:

```php
php artisan test
```

- Or using the PHPStorm UI.

Then in console throws this error:

```bash
ReflectionException: Class env does not exist
```

Below it says that something in test environment fails with Telescope, I didnt change any code base or environment so... this problem is always related with cache:

## Solution

- Step 1

Disable telescope for tests on your PHPUnit.xml add:

```XML
<env name="TELESCOPE_ENABLED" value="false"/>
```

- Step 2

Then go to the terminal and execute:

```php
php artisan clear
php artisan config:clear
```

## Note

I get the solution from two sites: 

- This [github issue] (https://github.com/laravel/telescope/issues/347)

- And from the [David Carr blog](https://dcblog.dev/laravel-telescope-error-when-running-tests-reflectionexception-class-env-does-not-exist)


I only facilitate the information in this platform because I had a few hours searching for a solution and with a descriptive title it would be easy to search for anyone in the future.


Thanks for reading!
Hacktoberfest 2020 
Tags: hacktoberfest
Published: 2020-11-13 05:45:02

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### Introduction 
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
Being an SDE the world of Open-Source has been exciting for me and Hacktoberfest is a great place to start your Open-source journey.

### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

I have been in touch with Git and GitHub since the starting of my journey to become an SDE, as soon as we joined college we were exposed to the world of open source through Software Freedom Day Celebration and I have been making open source contributions since then. 

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->
I have made 4 valid PRs for HF and made 5 extra contributions

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->

I contributed to a variety projects that were most suited to my interest, I am really glad to have been able to make valuable contributions to these repositories and solving their issues 
These are my first 4 + 5 contributions,

1. https://github.com/draco-malfoy/StartHub/pull/36
2. https://github.com/SHY-Corp/LeetCode-Solutions/pull/919
3. https://github.com/bighnesh0404/basic_programming/pull/46
4. https://github.com/FranRomerovedat/pdfcreator/pull/2
5. https://github.com/SHY-Corp/LeetCode-Solutions/pull/942
6. https://github.com/aditya109/git-osp-for-beginners/pull/266
7. https://github.com/SHY-Corp/LeetCode-Solutions/pull/1043
8. https://github.com/SHY-Corp/LeetCode-Solutions/pull/1057
9. https://github.com/aditya109/git-osp-for-beginners/pull/306

### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->

Seeing the overall participation in HF I wish to host more repositories on GitHub and welcome contributions from all over the world. The creative ideas as well as the diligence that people portray in HF is commendable and it making contributions to much bigger projects must be made simpler for more people to contribute to. 
I would try and find ways to bridge the gap between contributors and maintainers, ensuring that both the ends meet requirements.
Leverage GitHub Student Pack
Tags: github, student, computerscience, codenewbie
Published: 2020-11-13 05:42:31

🙋‍♂️Hi Fam!

👨‍🎓If you are a student and practicing software engineering. And want to showcase your project in the real world. 🌍

😊This post will help you to launch your project in production.

👨‍💻Let me introduce you to GitHub Student Developer Pack which offers you premium software development tools and courses for free for a limited time ( 1 year or 6 months ).
Let's see how do I host my todo app.

✅ ☁ Deciding the cloud server to host app (Azure or Heroku)
✅ 📚 We need a database ( Availed MongoDB Premium )
✅ 👨‍💻 I need a personal domain ( Avail from get[dot]tech )
✅ 📫 I need to notify users ( Avail mailgun or customerly)

![0](https://dev-to-uploads.s3.amazonaws.com/i/24r9blosqzyv7zu1xqlr.jpg)
Vanilla JavaScript detecting the operating system
Tags: javascript
Published: 2020-11-13 05:15:33

I'm sure you've ever seen this in action.
A website that states hey you're on MacOS download this specific Mac version. Or download the Windows EXE here.

It mainly comes down to downloads, but there can be some cool advantages of knowing a users browsers and system.

In today's article, we will be using the `navigator` API to get the `appVersion`.

The end result will look like this:

![JavaScript detect OS version](https://cdn.hashnode.com/res/hashnode/image/upload/v1604817590306/Yxv5_7KLG.png)

## HTML Document

For our demo we will be created a simple card that we can render some information in.

```html
<div class="card" id="os_card"></div>
```

## CSS Styling

Now let's make the card look more appealing by [centering it](https://daily-dev-tips.com/posts/css-flexbox-most-easy-center-vertical-and-horizontal/) and using some colors. 

```css
body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #f3c4fb;
}
.card {
  background: #e2afff;
  color: #fff;
  box-shadow: 0 10px 20px 0 rgba(0, 77, 115, 0.07);
  border-radius: 10px;
  padding: 30px 40px;
  font-size: 2rem;
}
```

## JavaScript detect Operating System

Now we can go ahead and find the users OS!

As mentioned, we make use of the `navigator` API.

Let's first declare our starting variables.

```js
const card = document.getElementById("os_card");
let os = "Unknown";
```

We also define a empty OS variable in case we can't find the right one.

Now we are going to check if the OS string returns something familiar.

```js
if (navigator.appVersion.indexOf("Win") != -1) os = "Windows";
if (navigator.appVersion.indexOf("Mac") != -1) os = "MacOS";
if (navigator.appVersion.indexOf("X11") != -1) os = "UNIX";
if (navigator.appVersion.indexOf("Linux") != -1) os = "Linux";
```

A full string would look something like this (MacOs)

```js
// 5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36
```

Now we are going to add our string to our card:

```js
card.innerHTML = "Your OS: " + os;
```

That's it, see the full result in this Codepen.

{% codepen https://codepen.io/rebelchris/pen/yLJxWgJ %}

## Browser Support

The Navigator API has very good support these days!
 
![JavaScript Navigator API support](https://caniuse.bitsofco.de/static/v1/mdn-api__Navigator-1604817528373.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
C# 9.0 Init-only Property
Tags: csharp, csharp9, dotnet, programming
Published: 2020-11-13 05:06:43

This init-only property solves a very unique problem of C#. Imagine you have a property which you want to make **readonly** then you can't have `set` defined in it to avoid setting it. Instead you need a parametrized constructor to set the value while initializing. If you want to have both a property readonly and no constructor, then this init-only solves both the problems elegantly.  

```csharp
public class Book
{
    public string Title { get; set; }
    public string Author { get; set; }
}
```

```csharp
var book = new Book { Title = "Indian Birds", Author = "Salim Ali" };

Console.WriteLine("{0} - {1}",  book.Title, book.Author);
```
If you mark the properties **readonly** by removing setter then you need a parameterized constructor. 
```csharp
public class Book
{
    public string Title { get;  }
    public string Author { get; }

    public Book(string _title, string _author) =>
        (this.Title, this.Author) = (_title, _author);
}
```

```csharp
var book = new Book("Indian Birds","Salim Ali");
```
By using `init` only you can achieve it easily

```csharp
public class Book
{
    public string Title { get; init; }
    public string Author { get; init; }    
}
```
```csharp
var book = new Book { Title = "Indian Birds", Author = "Salim Ali" };
```
This becomes both readonly and parameterized constructor-less class. 

I love this.
Are you seeking for reliable and online dissertation help? 
Tags: discuss
Published: 2020-11-13 05:00:58

The Dissertation Writers offer you the best and cheap dissertation writing services through qualified and experienced professionals who are highly trained from different universities in the UK. Their expertise in the dissertation writing helps them to produce the top quality and to maintain the standrds at the same time throughout the entire writing. The Dissertation Writers is not only keen about the quality but also believe in timely deliverance. All the revisions are free of cost and students can get a 100% refund in any case of dissatisfaction with the work.
Enjoy exceptional discounts. For more details, visit the website https://www.thedissertationwriters.co.uk/
How can I Display data on an online store from the app server?
Tags: laravel, shopify, datbase, shopifyapp
Published: 2020-11-13 03:42:40

How can I Display data on an online store from the app server? I got a guideline, app proxy. but I cannot understand that.

I have created an admin Dashboard for the app following your tutorial. I created successfully a snippet file on the current Shopify theme using asset API. I can pass any HTML code as a snippet file value. This means I can pass any HTML or liquid code in the snippet file. That snippet file was created from my app.

I've added some settings fields for my app. And I can save data into my database.https://prnt.sc/vf6fjp

Now I want to create a REST API to show the data for the Shopify client store. I created an API route.https://prnt.sc/vf6cjs
For API I have created a Controller. https://prnt.sc/vf6dlu

On the controller for the API, I need to run a query based on the same customer ID and the same Shopify shop name to get data from my database. In my database, I saved customer id and shop Name, and product id.

Now, How can I get a Shopify shop name and customer ID in the laravel controller?
So, I can run a SQL query using Shopify shop name and customer-id to get data from my database.

I can easily manage JavaScript to get the name of Shopify Shop. Example: <script>Shopify.shop</script>
But how can I customer ID? The customer who logged in and saved the wishlist product.

Also, How can I write javascript in laravel controller or how can I access javascript value in the laravel controller?

I really need this assistance, I am trying to for the last few days. But I cannot find a solution.

Please sir help me

Thank you
Expanding Search Bar using HTML CSS JQuery
Tags: jquery, html, css, webdev
Published: 2020-11-13 04:54:32

Hello Friends, Today, I share a project on expanding search bar animation using HTML, CSS, and jquery. The search box is one of the standard features of any website nowadays. search bars perform as the gateway of the contents available on your webpage. Using this, the user-friendliness of the website increases. Today we are making a search box animation where if a user clicks on the search icon, the search box will expand but closes again when we click on the same icon.<a href="https://www.codingflicks.com/2020/11/expanding-search-bar-html-css-jquery.html">Download the Code</a>
My Experience on Hacktober-fest 2020
Tags: hacktoberfest
Published: 2020-11-13 04:52:30

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### About Myself
I'm data-science intern and a self-taught person. I used to upload my projects on Git-Hub before but I was still new to these platforms. About 2 months ago I didn't had any idea 'bout coding and data-science. 
I shared my GitHub project to one of my friend and he introduced me to Hacktober Festival. I was like okay "I'll do that, not a big deal".

15 days later
Received mail "We are half way through" -Hackroberfest

Ohhh...
Then I complete all my pull request. Fun thing is that my friend who introduced me to Hacktober-fest isn't going to receive, but I do. 

### Contributions

Added python beginners exercises:
https://github.com/mukesh-srivastav/FirstTimersOnly/pull/5


Added python Guess Game:
https://github.com/ImanMohi/RTU-DigitalLibrary/pull/362
https://github.com/samyak360/python-coding/pull/5

Added my Titanic End-To-End Project:
https://github.com/UNO-Coders/Machine-Learning-Using-Python/pull/11


<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->


### Reflections
To be honest, I never won any of the competition or participated in online event. Therefore participating and getting swag meant a lot for me. I really wanna thank all the sponsors, community members, organizers for this event. Looking forward to participate next year as well. 
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
C# 9.0 - Record Type
Tags: csharp9, net5, programming
Published: 2020-11-13 04:44:20

In C# often we use class to create a structure for data. They were generic **reference** type in C#. Now we have a specialized `record` type for the same purpose. 

```csharp
public record Employee
{
    public int Id { get; set; }
    public string FullName { get; set; }

    public Employee(int _id, string _fullName)
    {
        (Id, FullName) = (_id, _fullName);
    }
}
```

To use as normal 

```csharp 
var emp = new Employee ( 1, "Wriju" );

Console.WriteLine("{0} - {1}", emp.Id, emp.FullName);
```

Compiler generates `class` in intermediate code (IL). The main purpose of the `record` type is to provide the semantics for equality. 

You can also use `Deconstruct` method to retrieve the values,

```csharp
public record Employee
{
    public int Id { get; set; }
    public string FullName { get; set; }

    public Employee(int _id, string _fullName)
    {
        (Id, FullName) = (_id, _fullName);
    }

    internal void Deconstruct(out int _id, out string _fullName) =>
        (_id, _fullName) = (this.Id, this.FullName);
}
```

To call use the normal `out` parameter assignment 

```csharp
var emp = new Employee ( 1, "Wriju" );

int _id;
string _fullName;
(_id, _fullName) = emp;
Console.WriteLine("{0} - {1}", _id, _fullName);
```

You can also create a copy of the `record` with changed property value using `with` keyword. 

```csharp
var emp2 = emp with { FullName = "Wriju Ghosh" };
```