teleren/devto huggingface dataset:
How to Solve the "Class constructor HTMLElement cannot be invoked without 'new'" Jest Error
Published: 2024-01-08 15:54:22

---
title: How to Solve the "Class constructor HTMLElement cannot be invoked without 'new'" Jest Error
published: true
date: 2023-11-11 18:42:28 UTC
tags: 
canonical_url: https://www.danywalls.com/how-to-test-custom-elements-with-angular-testing-library
---

I'm using the Angular Testing Library to test my components, and it works exceptionally wellI love it! However, I encountered a unique situation when using a Web Component within my component. This results in the error "`Class constructor HTMLElement cannot be invoked without 'new'.`" Typically, this issue arises when code is transpiled from ES6+ to ES5 in an environment where the custom elements specification isn't fully supported.

## Install the core-js Library

The first step is to ensure that your environment has the necessary polyfills to support the class constructors for HTML elements. This is where the `core-js` library comes in handy. To install it, open your terminal and run:

```
npm install -D core-js
```

The `-D` flag adds the package as a development dependency, ensuring its available during the build process.

## Create a Polyfills File

After installing `core-js`, you need to create a polyfills file that will import the necessary shims. In the src folder of your library, create a file named `polyfills.ts` and include the following imports:

```
import '@webcomponents/custom-elements/src/native-shim';import '@webcomponents/custom-elements';
```

These imports bring in shims for the custom elements, allowing you to use the `class` syntax to create elements that can be invoked with `new`, effectively eliminating the error.

## Update jest.config.ts File

Finally, to make sure Jest is aware of these polyfills when running tests, update your `jest.config.ts` file in the library to include the polyfills file:

```
setupFiles: ['<rootDir>/src/polyfills.ts'],
```

Add this line so Jest loads your polyfills before running tests. This makes the testing environment like the real one, giving you smooth testing.

## Conclusion

Follow these three easy steps to fix the "Class constructor HTMLElement cannot be invoked without 'new'" error, making your custom elements work properly in various settings. I hope this helps you save time later on.

Happy coding!
User Input() and Outputs
Tags: devjournal, python, coding, programming
Published: 2023-11-11 18:38:11

User `input()` is an interactive function that allows the user to insert a value into your program.

An Output is the resulting data produced from the input. 
`print()` is an example of an output function. It is used so the program can display the resulting data and/or communicate with the user.

Let's create the code for the photo banner above, as a user input example:

---

```python
name = input('PLEASE ENTER YOUR NAME')
message = f'HELLO {name}! AND WELCOME!'
print(message)
```
---
The program has asked for John's name in order to communicate a welcome message to him.

There are **implicit** and **explicit** data type conversions in python. Inputs will always produce a string unless otherwise stated, this is an implicit (automatic) conversion. 

If you would like an input to produce a different data type, it will need to be explicitly instructed, for example; 
`age = int(input())` - will convert the input into an integer. 
We can check data types with the type() function;
`print(type(age))` - will check what data type the value in your variable is. 


Other examples of implicit and explicit conversions:

**/** will implicitly produce a float and **//** will implicitly produce an integer. Also, math operations between an integer and a float will always produce a float. 

---
Automating my Blog
Tags: automating, github, mermaid, blog
Published: 2023-11-11 18:27:33

---
title: Automating my Blog
description: The journey I went thorough to automate publishing my blog.
tags: 'Automating, github, mermaid, blog'
cover_image: ''
canonical_url: null
published: true
---

I use [Github](https://www.github.com) to store the code that I write, and [Github Actions](https://github.com/features/actions) to automate my workflows. My [blog](https://dev.to/jonashdown) is hosted on a number of platforms including [Dev.to](https://dev.to/jonashdown), which accepts markdown as an input format and has an [api](https://developers.forem.com/api).

If I could store my blog in Github, I could do the following
 - Write blog articles off line and use git to keep them upto date.
 - Push completed articles to Github.
 - Take advantage of Github Actions to:
   - Publish to various blogging platforms
   - Grammar and spell check
   - Generate and store diagrams 
   - Inform social media platforms of new/updated articles
   - Display latest articles on my Github profile.

## Publishing to Dev.to
A quick search of the [Github marketplace](https://github.com/marketplace?category=&type=actions&verification=&query=dev.to) found [Publish to dev.to](https://github.com/marketplace/actions/publish-to-dev-to) maintained and owned by [sinedied](https://dev.to/sinedied) which seems to fit my needs. 

After following the config steps for this action, I was able to see articles being published to my blog. The default config worked fine for the way I work, which is to always create a Pull Request before I merge to main.

## Generating Diagrams
[Mermaid.js](https://mermaid.js.org/) seemed like the obvious choice as it integrates with Markdown and Github, and importantly has a [commnand line interface](https://github.com/mermaid-js/mermaid-cli), which means it can be used in a workflow file.

Any generated images can use the github raw urls, so a bit of `sed` magic will convert the local urls that mermaid generates into a full url. N.b to take advantage of Github as a hosting service, the repo will have to be set as public otherwise, there will be a need to play with tokens and their expiry. I will write about how the repo is secured in another post.

I will also need ot consider how the generated images are added to the repo.
React Playlist Manager: A Singly Linked Approach🌟🎶
Tags: javascript, react, programming, singlylinkedlist
Published: 2023-11-11 18:13:16


Introducing the React Playlist Manager, a novel application designed to organize your favorite tunes. Built with the robustness of React and the simplicity of a singly linked list.

### The Challenge: Managing Dynamic Data
When it comes to managing a collection of items that are constantly added or removed, traditional arrays may not always be the most efficient. That's where the singly linked list shines, with its ability to add and remove elements without reindexing the entire collection.

### The Solution: A Singly Linked List in React
The React Playlist Manager utilizes a singly linked list to manage the state of the playlist. Each song is a node in the list, containing the track's details and the reference to the next song. This approach optimizes operations like insertion and deletion, which are common actions for a playlist.

### Tech Stack and Structure
The tech stack is React-centric, with JavaScript underpinning the logic. The app is divided into components that handle different aspects of the playlist, such as track listing and input forms, promoting reusability and separation of concerns.

### Open to Collaboration
This project is not just a tool for music lovers but also a resource for developers interested in data structure implementation in frontend frameworks. It's open source, inviting contributions and improvements from the community.

Check out the project on [My GitHub Account](https://github.com/HunorVadaszPerhat/react-playlist-manager) and contribute to the ongoing development of this harmonious melding of structure and sound.

Feel free to use this as a base for your article, tailoring it to the style and depth of content you prefer for your audience on dev.to.
My Story of Leetcode Biweekly Contest 117
Tags: coding, programming, algorithms, leetcode
Published: 2023-11-11 17:57:18

Hi Everyone ✋🏻. Abhishek this side!
Today, 11 November 2023,  was _Leetcode Biweekly Contest #117_. This contest was unexpectedly hard, because the question they asked required some other approach of thinking and implementing.

I was able to solve **2 / 4** problems only! 🤔

Both the problem made me think about Permutation and combination concepts. I have not solved much problem related to PnC so, was bit hard to brainstorm, but at the end reached at the solution somehow.

**_Overall Verdict_**- Not happy with the performance.
I sometimes see other and always think, how can I become so good at Data Structure and Algorithms like they are.

But I know One day I will be, because I know I am honest to myself and working hard to reach to my personal goals.

Sincerely, 
Abhishek 😉

![Leetcode profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ek0an12wcjgx69p4jqqj.JPG)
Leetcode - 645. Set Mismatch
Tags: leetcode
Published: 2023-11-11 17:12:29

Basically we need to return duplicated item and the missing item in array .


since the numbers are from 1 to n 

their total sum will be n*(n+1)/2  (😅 mathematics)


Approach is simple just use a for loop and push each item in a new array only if its not in the new array , if its already present in new array then i don't push it instead store the duplicated item in a variable

i named the new array as - arrUnique
storing duplicated item in variable dup

the rest is understandable from code just have a look and try to understand

```javascript
/**
 * @param {number[]} nums
 * @return {number[]}
 */
var findErrorNums = function(nums) {
    const arrUnique = [] ;
    let dup = 0;
    let remainingSum = 0;
    const n = nums.length;
    nums.forEach((num)=>{
        if(arrUnique.includes(num)){
            dup = num
        }else{
            remainingSum+=num;
            arrUnique.push(num)
        }
    })


    const sum = (n * (n+1)) / 2
    return [dup,(sum-remainingSum) ]
};
```
Getting Started with Openshift on Windows
Tags: redhat, openshift, sandbox, windows
Published: 2023-11-11 17:02:21

# Step-by-Step Instructions
#### 1. Register account at [Redhat](https://www.redhat.com/en)
#### 2. Go [Console](https://console.redhat.com/openshift/create/local)
#### 3. Download OpenShift local
![console](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpvx8phyuyu5cz3wrvo0.png)
#### 4. Unzipped the downloaded folder at C:\Users\username\crc
#### 5. Open Powershell and run `crc setup`. Will take awhile to setup.
```bash
crc setup
```
![setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjoq9ihd0hdrt22msd17.png)
#### 6. After setup is down run `crc start`
 ```bash
crc start
// if face error
crc start --log-level debug
```
- It will eventually prompt you for the `pull secret`.
- Copy from the console and right-click to paste to the terminal.
- It will then take awhile to start up the container.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pj4jv28rc2hdxi9ngym0.png)

#### 7. Test that Openshift Cli oc is properly installed.
Copy and paste the following command:
```bash
oc login -u developer https://api.crc.testing:6443
```

#### 8. Head over to [Sandbox](https://developers.redhat.com/developer-sandbox) and start a 30-day trial sandbox account.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjybo3y180xxhwmkmdxl.png)
#### 9. Login to your sandbox once provisioned and download oc CLI
Extract the file and save it to "C:\Users\username\oc-folder" or any preferred location.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wcjwzi0wi4jswjb8bsil.png)

#### 10. Add the oc CLI file path to the environment variables
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ub8eb8ehj1f0g4r5ruhi.png)

#### 11. Open powershell and run `oc` to verify.
#### 12. Logging into sandbox via cli
Go over to sandbox console and copy login command
This will open a new tab with your API token and login command.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bajl89fyy44rbowp2ll.png)
Postmortem: Service Outage on MathEase Platform
Tags: sre, webdev, devops, beginners
Published: 2023-11-11 17:01:19

> _In a world not so far away, where APIs responded happily until they didn't... 😥_


![Rest in peace APIs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p890jhyc2w2b4b6pgusm.gif)

## Issue Summary.
* Duration - 1 hour 25 minutes (Start: 07-10-2023 10:21 GMT, End: 07-10-2023 11:46 GMT), coincided with my coffee break, lol.
* Impact - unsuspecting and happy users were unable to get answers to math questions, it just keeps loading without returning a response (like bro, what the...).
* Root cause - too much API calls to the WolframAlpha API, due to an increase in traffic after our marketing campaign blew off, i guess WolframAlppha was like, bro, this is way too much than we signed up for 😂.

## Timeline.
* The issue was detected at 07-10-2023 10:21 GMT by automated monitoring systems triggering an alert for external API failure and unusually high traffic.
* Actions Taken - Assumed the issue might be related to a recent code deployment that introduced a performance regression, but then ran tests on the codebase and found out the WolframAlpha API was not responding. Took the issue to the backend team for further investigation.
* Misleading Investigation - Investigated recent code changes extensively, diverting attention from the actual cause (if it was, I would have completely roasted Folarin, cause he pushed the last code to deployment, lucky him 😐).
* Escalated -  The issue was escalated to the backend team.
* Resolution - Increased rate limit and paid for premium service of the WolframAlpha API. Also implemented  emergency scaling of server resources to handle the unexpected traffic.

## Root Cause and Resolution.
* Root cause - The surge in number of external API calls and traffic was caused by a successful marketing campaign that brought in significantly more users than anticipated.
* Resolution - Upgraded the WolframAlpha external API service to a premium one. Reviewed and updated infrastructure capacity planning to accommodate sudden spikes in traffic.

## Corrective and Preventive Measures.
* Enhanced monitoring to provide early warnings for external API failures.
* Conduct regular capacity planning exercises to anticipate and handle increased user loads.
* Tasks.
1. Enhance communication strategies for informing users during service outages.
2. Conduct a thorough review of the incident response process for better coordination.
3. Implement the early warning alert system on DataDog.
Meme November: Day - 11
Tags: webdev, programming, beginners, discuss
Published: 2023-11-11 17:00:59

 
Hello there! I am excited to announce that we will be starting a series in November where we will be sharing some funny programming memes with you every day. We understand how important it is to have a good laugh, especially when you're a programmer, and we believe that these memes will give you just that. So, make sure to stay connected with us throughout November, and keep an eye out for some hilarious programming memes that we will be sharing with you every day!

---


[![How to end a frontend developers career](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pno3yqabweiag1gidti.jpg)](https://twitter.com/AlarmsSnooze)


---

---

Check my website [Demo coding](https://democoding.in/) for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : [Demo code](https://www.youtube.com/@democode)
Seed Stage Ideals - Organization and Productivity
Tags: startup, productivity, requirements
Published: 2023-11-11 16:54:37

I have worked in seed stage startups, mid-stage startups, and bootstrapped early stage startups. If I had to pick tools and methods for a new company, here is what I would choose.

## Initial Roles

Full stack product engineer - employee

UX/designer - 25% time contractor

Sales - 10% time contractor

Ops engineer - 10% time contractor

HR, Finance - minimal contracting

(burn rate: $0.25M/year)

## Development Method

Shape Up with 8 day cycle

## Requirements, architecture discussion tools

Notion - intuitive

Discourse - long term discussions

## Task Management

Asana - snappy UI, very intuitive to navigate, whole team (not just developers) will use happily

Github discussions - for tracking short term tech debt and having conversations spanning multiple PRs

## Chat

No chat system. Use notion, discourse, and asana only.
Diving into the Open Source Realm: My Qwik Journey Begins! 🚀🌐
Tags: opensource, qwik, webdev, javascript
Published: 2023-11-11 16:52:56

🚀 Excited to announce my open source debut with Qwik! My first pull request has been accepted and I couldn't be happier. 🎉

I have long pondered how I could contribute to open source projects, often putting it off because of fears regarding the approach and potential challenges. These weeks, I finally overcame those uncertainties by immersing myself in communities and opening issues on various open source projects. Today, I celebrate the creation and acceptance of my first pull request on Qwik, fixing a cache-related bug during development.

I would like to express my gratitude to @gioboa for his invaluable support during the pull request opening process. Your guidance was crucial.

This represents only the beginning of a broader journey in the open source universe. I am ready to face future challenges with determination and anticipation. 🌐💻
How to Learn Angular 17 Features with Angular.dev
Tags: angular, typescript, javascript, frontend
Published: 2023-11-11 16:45:38

Angular 17 has been announced and is set to release in the upcoming days. It comes with a list of impressive new features, such as control flow, deferred views, hydration, server-side rendering (SSR), signals, and many more.

One of the notable releases is the new website for learning Angular, which consolidates all new topics in a single location, [Angular.dev](https://angular.dev/).

The Angular.dev website is now live and offers a comprehensive collection of new tutorials and updated documentation, covering all the latest features.

* [Start with Angular](https://angular.dev/tutorials/learn-angular)
    
* [New Control Flow](https://angular.dev/guide/templates/control-flow)
    
* [Deffered Views](https://angular.dev/guide/defer)
    
* [Hydration](https://angular.dev/guide/hydration)
    
* [SSR](https://angular.dev/guide/prerendering)
    
* [Signals](https://angular.dev/guide/signals)
    
* [RxJS Interop](https://angular.dev/guide/signals/rxjs-interop)
    
* [Fresh API Reference](https://angular.dev/api)
    

The Angular team and the community have done an excellent job providing comprehensive guides with clear examples for each new feature.

## Angular Playground

Experience Angular today without installing it on your computer:

Go to [http://angular.dev/playground](http://Angular.io/playground)

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699333690283/32c230e9-0b50-4a19-9880-f8610ce61a11.png align="center")

## What about Angular.io?

If you are working with a previous version of Angular, don't worry, [Angular.io](https://angular.io/) will continue to be maintained and supported. At some point, all information will be part of [Angular.dev](https://angular.dev/), but a specific timeline has not been confirmed by the Angular team yet.

## Recap

It's time for you to learn and experiment with Angular 17 in the playground, follow the tutorials step by step, or explore the new API on your own.

`happy ng update!`
Empowered teams <> Better solutions
Tags: webdev, react, opensource, architecture
Published: 2023-11-11 16:39:08

"Team Topologies" is a masterclass in efficient team structures for tech. At WebCrumbs, we channel these lessons into plug-in development, embracing the power of small, focused teams to build modular pieces that empower your web projects.

## Small Teams, Big Impact

{% cta github.com/webcrumbs-community/webcrumbs %}
See our small teams' big impacts on our GitHub!
{% endcta %}

In the spirit of "Team Topologies," our plug-in developers are like mini-teams: nimble, skilled, and ready to tackle specific challenges, creating components that seamlessly integrate into your web environment.

## Each Plug-in, a Team Effort

{% cta webcrumbs.org %}
Join the community where every plug-in is a team effort at WebCrumbs.org.
{% endcta %}

The book outlines four team types—each one resembles how we approach plug-in development. Diverse yet unified, every plug-in reflects the collaborative effort of a dedicated team, crafted to fit perfectly into your project.

## Simplifying Complexity

{% cta github.com/webcrumbs-community/webcrumbs %}
Contribute to simplifying web development. Visit our GitHub page!
{% endcta %}

"Team Topologies" advocates for reducing cognitive load, and so does WebCrumbs. By assigning the right team to the right plug-in, we streamline complexity, making development smoother and more enjoyable.

## Building for Better Flow

{% cta webcrumbs.org %}
Discover a better flow in web development with WebCrumbs.org.
{% endcta %}

Both "Team Topologies" and WebCrumbs aim to create systems that are efficient and enjoyable to work with. By adopting a modular approach and supporting it with the right team structures, we set the stage for developers to innovate and excel.

Join us on this journey at WebCrumbs, where we’re coding and crafting a community of devs, one plug-in at a time.