teleren/devto huggingface dataset:
Emit attempted before Angular Webpack plugin initialization.
Published: 2022-11-28 17:05:47

I'm using Angular 14 ang webpack version: ^5.58.1.
**webpack.congif.js**
_const webpackPlugin = require('@ngtools/webpack').AngularWebpackPlugin;
module.exports = {
  mode: 'development',
  devtool: "source-map",
  entry: {
    main: "./js/main.js",
    mainDrawer: "./js/divdrawer/main.ts",
    polyfills: "./js/divdrawer/polyfills.ts",
    entry: "./js/entry.js",
    thirdpartylibs: "./js/thirdpartylibs.js"
  },
  output: {
    path: path.join(__dirname, "build/"),
    filename: "[name]bundle.js"
  },

module: {
    rules: [
      {
        parser: {
          system: true,
        }
      }
        test : /\.(tsx|ts)$/,
        use: [
               {
                 loader: '@ngtools/webpack',
                 options: {
                     configFile: path.resolve('./js/tsconfig.json')
                    },
               },
        ]
      },
    },

plugins: [
    new webpackPlugin({
      tsconfig: './js/tsconfig.json',
    }),
    new webpack.ContextReplacementPlugin(
      /\@angular(\\|\/)core(\\|\/)esm5/,
      path.resolve(__dirname, "./js/divdrawer")
    )
  ]
}_

While generating the build I'm getting below error:
ERROR in ./js/divdrawer/filterMappingRemover.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
 @ ./js/entry.js 10:30-97

ERROR in ./js/divdrawer/main.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

ERROR in ./js/divdrawer/polyfills.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18

ERROR in ./js/divdrawer/renderer.ts
Module build failed (from ./node_modules/@ngtools/webpack/src/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.
    at D:\MyProject\node_modules\@ngtools\webpack\src\ivy\loader.js:81:18
 @ ./js/entry.js 9:18-61

---
All the entries are throwing the errors with above message. As mentioned in webpack config we have multiple entries.

This is detected when I upgraded our project to angular 14.(Angular upgrade Steps: v10 --> v11--> v12--> v13/v14)

How to configure AngularWebpackPlugin correctly? Is there any alternative way?
Selenium- How to Automate web browser
Published: 2023-05-20 17:53:39

---
title: Selenium- How to Automate web browser
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukgqo52le8bhcdr9kgzb.jpg
published: true
date: 2022-11-28 16:59:52 UTC
tags: 
canonical_url: https://krishnakumar.hashnode.dev/selenium-how-to-automate-web-browser
---

## What is selenium?

Selenium is an open source tool that automates browsers. Selenium webdriver is one of the top web automation testing tool. it provides a single interface that let you write test scripts in programming languages.

### Main features of selenium web drivers are:-

  - Open source
  - Cross-platform 
  - Automates all major browsers like Chrome, Internet explorer, Microsoft edge, Firefox, Safari, Opera
  - We can write the tests in various languages like Java, Python, Node.js, PHP, Ruby, Perl, C# and many more
  - Runs on JSON webdriver protocols over HTTP

![selenium-web-driver-mc-slide1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669651162910/Rx-N-MSTB.png)

### Installing Selenium Weebdriver Package for Node.js

  1. First install Node.js from the official website
  2. Install selenium webdriver for node.js

### Writing and running the first script in node.js

### write the sample selenium code as shown in the below example and save it with first.js

```
  const webdriver = require("selenium-webdriver");

    // Declare driver and open web browser
  var driver = new webdriver.Builder().forBrowser('chrome').build();

  // it will open the URL which is passed as an argument
  driver.get('https://www.softpost.org');
  // here driver will stop and close the browser window
  driver.quit();

```
### After that you can run the above node.js code using the below command

```
      node first.js

```

> Thank you for reading feel free to give feedback! 🙂
Compress & Decompress An ArrayBuffer Client Side in JS
Tags: javascript, webdev, typescript
Published: 2022-11-28 16:36:56

The [Compressions Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API) is new and up and coming way to compress and decompress data in the browser. Please note the support for the API is not very wide so use at your own risk.

I am writing this because I did not find any good examples of just compressing/decompressing an `ArrayBuffer` which is what I needed the API to do. The following two code snippets show how to do exactly that.

## Compress An Array Buffer

```ts
const compressArrayBuffer = async (input: ArrayBuffer) => {
  //create the stream
  const cs = new CompressionStream("gzip");
  //create the writer
  const writer = cs.writable.getWriter();
  //write the buffer to the writer 
  writer.write(input);
  writer.close();
  //create the output 
  const output: Uint8Array[] = [];
  const reader = cs.readable.getReader();
  let totalSize = 0;
  //go through each chunk and add it to the output
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    output.push(value);
    totalSize += value.byteLength;
  }
  const concatenated = new Uint8Array(totalSize);
  let offset = 0;
  //finally build the compressed array and return it 
  for (const array of output) {
    concatenated.set(array, offset);
    offset += array.byteLength;
  }
  return concatenated;
};

```

## Deeompress An Array Buffer

```ts
const  decompressArrayBuffer = async (input: ArrayBuffer): Promise<Uint8Array> =>{
  //create the stream
  const ds = new DecompressionStream("gzip");
  //create the writer
  const writer = ds.writable.getWriter();
  //write the buffer to the writer thus decompressing it 
  writer.write(input);
  writer.close();
  //create the output
  const output: Uint8Array[] = [];
  //create the reader
  const reader = ds.readable.getReader();
  let totalSize = 0;
  //go through each chunk and add it to the output
  while (true) {
   const { value, done } = await reader.read();
   if (done) break;
   output.push(value);
   totalSize += value.byteLength;
  }
  const concatenated = new Uint8Array(totalSize);
  let offset = 0;
  //finally build the compressed array and return it 
  for (const array of output) {
   concatenated.set(array, offset);
   offset += array.byteLength;
  }
  return concatenated;
 }

```
Virtualize your grids with React and Virtualform
Tags: virtualization, windowing, react, grid
Published: 2022-11-28 16:31:19

---
title: Virtualize your grids with React and Virtualform
published: true
description: 
tags: virtualization, windowing, react, grid
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgpbrwc9fofivv6dc2zm.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-28 16:10 +0000
---

When you have a grid of an unknown amount of cells, it's a good idea to virtualize it, specially if you expect that grid to display a great amount of data.

Take your phone's photo gallery as an example: it renders hundreds of thousands of photos without a sweat, and that's mostly only possible because of virtualization (sometimes referred to as 'windowing').

In a nutshell, virtualization &mdash; or windowing &mdash; is a technique of "unloading" things that aren't visible to the user (because these things are supposed to be needless at that moment) thus making your application perform better.

I won't dive deep into what virtualization is in this post; rather, I'd like to introduce you to **[Virtualform](https://github.com/chiefGui/virtualform): an ultra-fast, responsive and headless virtualization engine I built for React.**

Long story short, at [Starchive](https://starchive.io), we were in need of a sophisticated way to virtualize our grids. The solutions out there were good, but we always felt that something was missing&mdash;which led us to build Virtualform, a solution that we love and satisfies all our needs, from the user experience to the bundle footprint.

To give you a glimpse of what `@virtualform/grid` looks like:

```tsx
import { useGrid } from '@virtualform/grid'

const App = () => {
  const { getRootProps, getWrapperProps, cells } = useGrid({
    cells: {
      amount: 1000,
      width: 100,
      height: 100,
    },
  })

  const { style, ...rootProps } = getRootProps()

  return (
    <div style={{ ...style, width: '100vw', height: 600 }} {...rootProps}>
      <div {...getWrapperProps()}>
        {cells.map((cell) => {
          return (
            <div {...cell.getProps()}>
              <div>I am cell {cell.index}</div>
            </div>
          )
        })}
      </div>
    </div>
  )
}
```

Want to learn more? [Read the docs](https://github.com/chiefGui/virtualform/tree/main/packages/grid) and become a virtualization ninja! 🥷
🔴 Save the date! Luos keynote live on Discord on November 29th 2022
Tags: opensource, eventdriven, news, luos
Published: 2022-11-28 16:30:22

🔴 Luos is hosting a live keynote tomorrow, the 29th of November on Discord at 9:00 am PT (6:00 PM CET)

⏩ [To participate](https://discord.gg/luos?event=1044974451055411261)

Join in, Nicolas Rabault will present the new version 2.7!
Feedback on Ethereum trust score application
Tags: feedback, ethereum
Published: 2022-11-28 16:28:25

Hi, I created [this page](https://dhxhzeifj85he.cloudfront.net/) to provide a summary of an Ethereum wallet ID to understand if it has normal account behaviours. Also, generate a trust score based on the behaviours, ie: if it is an automated account that's managed by code, the score will be lower. Let me know if you'd like me to add any new features. It is only a hobby project that runs on free tier of AWS, so, apologies for the slowness.
Micro-Service Example with Tech-Ads: SpringBoot + Distributed Tracking + Circuit Breaker
Tags: springboo, ads, distribute
Published: 2022-11-28 16:09:52

https://ozenero.com/micro-service-example-with-tech-ads-springboot-distributed-tracking-circuit-breaker

Adtech is an important part of running a digital advertising campaign. Advertisers use adtech to buy, manage, and measure digital advertising. If you’re looking to get started with adtech, read on to learn about the adtech basics, including common tools and services, and the benefits of creating an advertising strategy that leverages adtech.

In the tutorial, I just log how to build a simple micro-service system for Ad-Tech.
<h2>Technologies</h2>
- SpringBoot
- Java 8
- Spring-Cloud: Sleuth
- Lombok
- Spring Aspect
- Open-Feign
- Spring Actuator
- Docker
<h2>Epic Architecture</h2>

[caption id="attachment_196480" align="alignnone" width="1624"]<img src="https://ozenero.com/wp-content/uploads/2022/11/Screenshot-2022-11-28-at-21.58.43.png" alt="Epic Architecture Design" width="1624" height="456" class="size-full wp-image-196480" /> Epic Architecture Design[/caption]

1. Web-Parse Service: using to parse text from Web-URL
[caption id="attachment_196489" align="alignnone" width="902"]<img src="https://ozenero.com/wp-content/uploads/2022/11/Screenshot-2022-11-28-at-22.46.30-1.png" alt="Web-Parse Service Project Structure" width="902" height="1308" class="size-full wp-image-196489" /> Web-Parse Service Project Structure[/caption]

2. Ad-Tech Service: interact with Web-parse service and process to category a web-page.
[caption id="attachment_196488" align="alignnone" width="902"]<img src="https://ozenero.com/wp-content/uploads/2022/11/Screenshot-2022-11-28-at-22.46.30.png" alt="Ad-Tech Service Project Structure" width="902" height="1308" class="size-full wp-image-196488" /> Ad-Tech Service Project Structure[/caption]
Can AWS lambda secure your serverless app?
Tags: aws, devjournal, serverless
Published: 2022-11-28 16:09:20

Amazon’s serverless computing service, AWS Lambda, is considered the leader of today’s serverless computing. Enterprises all over the world are leveraging serverless computing to quickly build applications and APIs without the hassle of managing the infrastructure. However, as all of your resources are on the cloud, it makes it more susceptible to vulnerability. Although serverless computing is fairly simple, it is good to practice a few best practices in order to get the most out of the benefits of serverless security. 

##Best practices of Serverless Security

###Keep your lambdas separate

Data leaks are the most common type of threat encountered while working with [serverless computing](https://www.simform.com/blog/build-well-architected-serverless-apps/). In order to avoid such circumstances, it is recommended that all your user data, events, and other data, along with their security implications, be stored in the execution environment. Also, creating separate functions with different versions for different users is advisable for functions that rely on mutable states. 

###Secure API gateway

While using serverless computing, you are bound to use many APIs in your daily life. A lambda function is exposed to the outside world when an API is invoked via an HTTP request. Attackers can exploit this crack to create malware attacks. In order to safeguard, you can add an extra layer of security via the API gateway. You can add additional security functions like throttling, authentication, and encryption to your API gateway. 

###Prevent Injection attacks

Injection attacks are probably one of the oldest forms of attack on any software application. The attackers inject a malicious piece of code via user inputs. The most common attack surface for injection attacks is URL parameters, body parameters in POST requests, or HTTP headers. 

In a traditional infrastructure, a web application firewall or WAF can prevent most of the injection attacks. But as we are talking about the serverless situation, it is ineffective at protecting against cloud service execution. To protect this, you can limit access to lambda-connected cloud resources. By doing so, you will limit the attack surface for injection attacks. 

###Ensure continuous monitoring

No security in this world is picture-perfect. That’s why the best practice to secure your application is to monitor your application. Monitoring your application provides you with valuable insights about your application. Analyzing them allows you to identify potential security vulnerabilities and take swift action to neutralize the threat before the attack materializes.
Calling an activity from class PintService
Published: 2022-11-28 15:32:08

I created a class that extends PrintService .

I use the system dialog to print , everything is fine I see the service in print.

In onPrintJobQueued method I have this :

`@Override
protected void onPrintJobQueued(PrintJob printJob) {
 printJob.start();

    Log.d(TAG, "queued: " + printJob.getInfo());

    Intent i = new Intent(getApplicationContext(), PdfWiever.class);
    i.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
    String file = "file:///storage/emulated/0/Download/"+printJob.getDocument().getInfo().getName();
    i.putExtra("data", file);
    try {
        printJob.complete();
        Log.d(TAG, "queued: " + printJob.getInfo());
        startActivity(i);
    }catch (Exception e){
        e.printStackTrace();
    }

}`
I'm not getting any errors in both stackTrace and logcat. It's just that the business doesn't open.

I've seen other answers but I'm confused, in some I've read that there is a need for an interface to communicate between service and activity.

Or am I getting my intent call wrong?

I state that my activity is not running it is the service that must call it and put it into execution.

my AndroidManifest :

`<activity
    android:name="soget.com.it.bluetooth.sdk.PdfWiever"
    android:exported="true"
    android:label="SogetServizioStampa">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
        <data android:mimeType="application/pdf"   android:scheme="file" />
        <data android:scheme="text/plain" />
    </intent-filter>
    <intent-filter>
        <action android:name="android.intent.action.SEND" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:mimeType="application/pdf"   android:scheme="file" />
        <data android:scheme="text/plain" />
    </intent-filter>
    <intent-filter>
        <action android:name="android.intent.action.SENDTO" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:mimeType="application/pdf"   android:scheme="file" />
    </intent-filter>
    <intent-filter>
        <action android:name="android.intent.action.SEND_MULTIPLE" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:mimeType="application/pdf"   android:scheme="file" />
        <data android:mimeType="*/*"   android:scheme="mailto" />
    </intent-filter>
</activity>
<service
    android:name="soget.com.it.bluetooth.sdk.PdfPrint"
    android:permission="android.permission.BIND_PRINT_SERVICE">
    <intent-filter>
        <action android:name="android.printservice.PrintService" />
    </intent-filter>
</service>`
Can you direct me for a solution?
How Can I achieve this interaction?
Tags: javascript, webdev, react, nextjs
Published: 2022-11-28 15:52:34

Hello guys,

I saw this amazing website https://theadccawards.ca/ and I liked this "Text masked" interaction and I wanna know how to do something similar.

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

Hope if I can get some help, Thank you!
Racking up my PI Rack (MyElectronics.nl)
Published: 2022-11-28 15:14:52

---
title: Racking up my PI Rack (MyElectronics.nl)
published: true
description: Follow along as I install my new RaspberryPIs into a new PI Rack. The hardware was gracefully provided by Textalk.
tags:
cover_image: https://i.ytimg.com/vi/YrpEV4Lrh-M/maxresdefault.jpg
---

{% youtube YrpEV4Lrh-M %}

Follow along as I install my new RaspberryPIs into a new PI Rack. The hardware was gracefully provided by Textalk.
What are your goals for the week of November 28?
Tags: watercooler, discuss
Published: 2022-11-28 15:09:53

What are your goals for this week? 
 
- What are you building? 
- What will be a good result by week's end?
- Did you meet your goals last week?
- Advent of Code starts on the first are you joining?

**Last Week's Goals**
 How did I do? Short week I didn't touch the timer project.

- [:white_check_mark:] **Continue Job search.** 
- [:x:] Expand on Pomodoro timer. 
- [:white_check_mark:] **Write blog posts.** Wrote about Black Friday sales for Developers and Designers.
 
- [:white_check_mark:] Support VC members with monthly Challenge. We're at 83,000 for the month. Our collective goal is 100,000. We have three more days to do it. 
 You can see our progress on our [Monthly Challenge page.](https://virtualcoffee.io/monthlychallenges/nov-2022)

- Personal Monthly goal is to beat my word count for last year's blog challenge. It was 3,511. (Before this article I'm  at 3,419)


**This Week's Goals**  

- Continue Job search. 
- Expand on Pomodoro timer.  
- Write blog posts. Virtual Coffee has a blogging Challenge for the month. Inspired by NaNoWriMo we're trying to as a group hit 100,000 words for the month. I plan to write at least one blog post a week. 
- Support VC members with our Monthly Challenge.
- Look for a code challenge for December. There's the advent of code and a few others to try. I blogged on them last year I may do that again this year.
- Start on CSS ugly sweater art.


```
-$JarvisScript git push
```
How to debug : File is not `gofmt`-ed with `-s` (gofmt)
Tags: go
Published: 2022-11-28 14:59:00

While linting your project, you can have the following error :
```bash
pkg/apis/dogs.go:11: File is not `gofmt`-ed with `-s` (gofmt)
```

To resolve the issue, execute the following command :
```bash
gofmt -s -w .
```
It will simplify the code *(with the option `-s`)* and write the result back *(with the option `-w`)* on all the current folder *(with `.`)*.

---

I hope it will help you! 🍺

---

<center><h3>You want to support me?</h3></center>
<a href="https://www.buymeacoffee.com/mxguilbert7" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
Music Monday — What are you listening to? (Rock Edition 🤘)
Tags: watercooler, music, discuss
Published: 2022-11-28 14:56:31

_cover image source: [Maudit](https://giphy.com/gifs/maudit-lol-maudit-11-yxcv6D5Ltfomk)_

**I'm looking to rock out this Monday morning and could use some suggestions! So, give me your hardest rockin' tunes (soft rock also totally acceptable) and I'll give'em a spin. Let's rock'n'roll! 🤘**

![Marty from Back to the Future rocking out on guitar for the 50's school prom, getting really into it and playing like an 80's shredder, and then realizing that everybody is staring at him like he has lost mind.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubh9emv6wmu6ickt1cy9.gif)

***

## How we do 

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions.

If you like talking about music, consider following the org [#music discussions](https://dev.to/music-discussions) for more conversations about music!

{% embed https://dev.to/music-discussions %}

***

Y'all ready to rock?! _Note: you can embed a link to your song using the following syntax `{% embed https://... %}`. This should work for most common platforms!_

I look forward to listening to y'all's suggestions! 🎶