diff --git a/_posts/2023-03-21-web-workers-in-angular.md b/_posts/2023-03-21-web-workers-in-angular.md index 98c298a..1a3196c 100644 --- a/_posts/2023-03-21-web-workers-in-angular.md +++ b/_posts/2023-03-21-web-workers-in-angular.md @@ -26,8 +26,6 @@ The [Web Workers API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Worke Web Workers are now supported in [all major browsers](https://caniuse.com/webworkers) except Opera Mini, which is mostly used on feature phones with limited processing power. -> Hint: check [here](https://caniuse.com/webworkers) if your browser supports Web Workers. - ## How to Add a Web Worker in an Angular Component Adding a web worker in Angular is surprisingly easy -- just run one [Angular CLI](https://angular.io/cli) command: @@ -53,7 +51,9 @@ This will generate an `app.worker.ts` file beside `app.component.ts` In this next section let's create a basic demo angular application that sorts a list of super hero names -- just to make the example familiar if you followed [Angular's tour of heroes tutorial](https://angular.io/tutorial/tour-of-heroes). -> Hint: this emoji 👨🏻‍💻 means you are going to write some code! +All the code for the demo application we built in this blog can be found on [this Git repository](https://github.com/ayoayco/ng-web-worker-demo). + +> This emoji 👨🏻‍💻 means you are going to write some code! First, let's create a new app `web-worker-demo` with the defaults (i.e., no routing and using CSS for styling). @@ -111,20 +111,21 @@ export class AppComponent { {% raw %}

{{ title }}

- - - + + + + {% endraw %} ``` -👨🏻‍💻 Let's now make it look a bit fancy with by putting the following in the App component stylesheet `app.component.css`: +👨🏻‍💻 Let's make it look a bit fancy with by putting the following in the App component CSS `app.component.css`: ```css h1 { @@ -192,9 +193,9 @@ If your browser is now showing a blank white page, unfortunately, this is becaus Don't panic. You just have to restart (i.e., stop and start) your development server. -> Hint: Most operating system terminals allow this by pressing [CTRL]+'C' and running `ng serve` again. +> Most operating system terminals allow this by pressing [CTRL]+'C' and running `ng serve` again. -👨🏻‍💻 Now open `app.component.ts`, create a `sortHeroes` method that accepts a `flag` string as argument in the `AppComponent` class. +👨🏻‍💻 Open `app.component.ts`, create a `sortHeroes` method that accepts a `flag` string as argument in the `AppComponent` class. 👨🏻‍💻 Next, move all the generated code for using the web worker in it, and you should have this: @@ -269,6 +270,8 @@ Your `sortHeroes` method should now be: This sends a message to our `worker`, letting it know that we want to sort the `heroes` list using the `flag` property. +After the `worker` instance is done processing, it will then send a message back to its creator and this will trigger the `onmessage` callback where we assign the processed data back to our `heroes` list. + 👨🏻‍💻 Now let's program our `worker` to do the sorting. Open `app.worker.ts` and replace its contents with the following: ```ts diff --git a/assets/main.scss b/assets/main.scss index 4c7df2e..78f1f1d 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -455,7 +455,7 @@ table.image caption { padding-top: 20px; font-weight: bold; } - p:not(blockquote p):first-of-type::first-letter { + p:not(blockquote *):first-of-type::first-letter { font-weight: 900; font-size: 75px; line-height: 60px; @@ -477,7 +477,6 @@ table.image caption { p, ul li, ol li, - blockquote p:first-of-type::first-letter, li p:first-of-type::first-letter { --x-height-multiplier: 0.375; --baseline-multiplier: 0.17;