teleren/devto huggingface dataset:
Angular - Wait for All Images to Load
Tags: angular
Published: 2021-08-15 12:49:42

I was recently engaged in a long discussion on [StackOverflow](https://stackoverflow.com/questions/68445744/run-code-after-window-load-event-in-angular10-directive) with some programmer who was having a problem. They wanted to run some process which was sensitive to the particular sizes and locations of the images on the page, so they had to find a way to wait for all the images to be done loading, before proceeding.

The naïve solution that was considered, was to subscribe to the `window.load` event, which fires when all images are loaded on initial page load. This would work only for the initial load of the Angular page, but thereafter, navigating within the app would not cause a page reload and there would be no obvious way to detect when new images were being added to the page.

The actual solution I came up with involved creating an Angular directive and a service. The directive attaches to all `<img>` tags, and subscribes to their `load` and `error` events, and the service coordinates and keeps track of all the events, and maintains a running list of images that are still being loaded.

Here's the directive:

```typescript
@Directive({
  selector: 'img'
})
export class MyImgDirective {

  constructor(private el: ElementRef,
              private imageService: ImageService) {

    imageService.imageLoading(el.nativeElement);
  }

  @HostListener('load')
  onLoad() {
    this.imageService.imageLoadedOrError(this.el.nativeElement);
  }

  @HostListener('error')
  onError() {
    this.imageService.imageLoadedOrError(this.el.nativeElement);
  }
}
```

Here's the service:

```typescript
@Injectable({
  providedIn: 'root'
})
export class ImageService {
  private _imagesLoading = new Subject<number>();
  private images: Map<HTMLElement, boolean> = new Map();
  private imagesLoading = 0;

  imagesLoading$ = this._imagesLoading.asObservable();

  imageLoading(img: HTMLElement) {
    if (!this.images.has(img) || this.images.get(img)) {
      this.images.set(img, false);
      this.imagesLoading++;
      this._imagesLoading.next(this.imagesLoading);
    }
  }

  imageLoadedOrError(img: HTMLElement) {
    if (this.images.has(img) && !this.images.get(img)) {
      this.images.set(img, true);
      this.imagesLoading--;
      this._imagesLoading.next(this.imagesLoading);
    }
  }
}
```

A brief recap of the mechanism, a directive attaches to all `<img>` tags, and registers them with the service, while listening to the `load` and `error` events. The service increments a counter every time a new image is registered with it, and decrements the counter whenever the directive tells it that the image has finished loading (or reached an error state, in case of a broken image link). Every time the counter changes, the service emits the number of loading images, and the consuming component subscribes to that observable and knows that all images have finished loading when it sees a value of 0.
Setting The Right Goals While Interning
Tags: learning, development, internship, career
Published: 2021-08-15 16:52:53

Often time, to me, people go for internships as a way gaining work experience (which is the key for boosting your employability) or networking. under which category would I place myself? 

Internship goals are the skills and insight you want to gain through your experience. You should set these when you first begin your internship so you know what you want to accomplish and can make sure you are actively working toward it. To get started with all these, you need to find a good internship and get the most of it.

I'm a product designer who recently started this virtual internship as a frontend developer where I'll be working alongside with other developers and designer to build amazing products. 

Knowing myself as a quiet person, at the end of this intenship (https://training.zuri.team. ) part of my goals will be going out of my shell to do the most. At the end of this internship, I'll be building my personal portfolio using all what I've learnt; and by doing that, my topmost goal is to make it to the finalist (definitely won't be an easy race but will be worth it at the end). Until the✌️


The internship: https://training.zuri.team. 
Figma tutorial(for those interested in UI/UX) - https://www.youtube.com/watch?v=RGOj5yH7evk 
Crash course tutorial on GitHub:- https://www.youtube.com/watch?v=RGOj5yH7evk
Add Cypress to New/Existing Angular Project
Published: 2021-08-15 16:52:09


This blog post demonstrates steps to setup Cypress with Angular. Cypress can be initialized using [@briebug/cypress-schematic](https://www.npmjs.com/package/@briebug/cypress-schematic) or manually. See the source code uploaded to [Github](https://github.com/pavankjadda/angular-cypress)


**Automatic Initialization @briebug/cypress-schematic**

1.  First, Install Cypress using the following command in Angular project

```
npm i -D cypress
```

2\. Initialize and Configure the Cypress with [@briebug/cypress-schematic](https://www.npmjs.com/package/@briebug/cypress-schematic) plugin. This will generate **cypress** directory, **cypress.json**, and updates **package.json** file

```
ng add @briebug/cypress-schematic
```

> This will ask to remove Protractor from project with prompt “**Would you like to remove Protractor from the project?”,** enter **Y** if want to do so.

4\. Create new test under cypress/integration directory

```
describe('Home Page Test', () =>{    
beforeEach(function () {      
cy.visit('/');    
});it('Show Error If failed to show Welcome message', () =>   
{       
    // Check if the word Welcome exists      
     cy.contains('Welcome');          
      
    // Visit Angular Website and Angular Blog      
    cy.contains('Learn Angular').click();      
    cy.contains('Angular Blog').click();    
});   
});
```

3\. Now run tests created under cypress/integration using the following command

```
ng e2e
```![](https://miro.medium.com/max/2000/1*p7n4OkF0sRID9hnE81B4tA.png)Home Page e2e Test

**Manual Initialization**

1.  First, Install Cypress using the following command in Angular project

```
npm i -D cypress
```

2\. Create minimal **cypress.json** file under project home directory as shown below

```
{    
   "integrationFolder": "cypress/integration",     
   "baseUrl": "http://localhost:4200",  
   "env": {  
     "username": "username",  
     "password": "password"  
   }  
}
```

3\. Create **cypress**, **cypress/integration** directories in the project directory. And create **tsconfig.json** file under cypress directory

```
{  
  "extends": "../tsconfig.json",  
  "include": \["../node\_modules/cypress", "\*\*/\*.ts"\],  
  "compilerOptions": {  
    "sourceMap": false  
  }  
}
```

4\. Create new test under **cypress/integration** directory

```
describe('Home Page Test', () =>{    
beforeEach(function () {      
cy.visit('/');    
});it('Show Error If failed to show Welcome message', () =>   
{       
    // Check if the word Welcome exists      
     cy.contains('Welcome');          
      
    // Visit Angular Website and Angular Blog      
    cy.contains('Learn Angular').click();      
    cy.contains('Angular Blog').click();    
});   
});
```

5\. Now run tests created under cypress/integration using the following command

```
ng e2e
```

Code uploaded to [Github](https://github.com/pavankjadda/angular-cypress) for reference
My Goals For HNGi8
Tags: webdev
Published: 2021-08-15 16:29:12

Technology, as we have it today is the bedrock of economic growth. It has catapulted people, companies, nations to record levels of economic prosperity not seen since the industrial revolution.
I have always loved tech and fascinated by the nitty-gritty of how it is been developed. 
I studied Accounting in my University days, it was boring at least to me of course. It didn’t seem to throw up much of a challenge. (P.S it is a respectable professional course of study.)
Anyways,I wanted a change, I needed a career break. I discovered web development.
I used to think to become a web developer or a programmer, you have to be good in mathematics, you have to be in the science class, and that you have to be extremely smart. 
 Through hard work, dedication, perseverance and the right attitude you can become whoever you want. You are your limitation!
The HNGi8 program is the opportunity I have been waiting for to further solidify my knowledge and put myself on the right path towards achieving my goals.
Listed are my goals and achievement for HNGi8.


In Eight (8) weeks being on this internship,I will be able to build websites on my own, learn and explore all areas of Programming. I’m sure of making friends here who may turn to be business partners someday and also prepare myself to be a mentor in the next coming HNGi9.
Below are links for tutorials on 

**Figma: https://youtu.be/eZJOSK4gXl4
**Html: https://youtu.be/dShKRmG3reg
**Github: https://youtu.be/RGOj5yH7evk
**Python: https://youtu.be/I2wURDqiXdM
**JavaScript: https://youtu.be/PkZNo7MFNFg
**Node Js: https://youtu.be/RLtyhwFtXQA




https://training.zuri.team/
https://internship.zuri.team/
https://zuri.team/
My Goals For Zuri Internship.😎🚀
Tags: zuri, hngi8xi4g, internship, developer
Published: 2021-08-15 16:27:11

Aout Me🤩
Hi, my name is Ukaoha Chizoba, a student of Nnamdi Azikiwe University Awka. I'm interested in web technologies and have taken interest in Frontend development.

About Zuri Internship.

The Zuri team in partnership with I4G is a nonprofit organization whoose sole aim is to onboarding more people into tech and growing young minds into solving and providing solutions for the society. You can know more about them here: https://internship.zuri.team/.

My Goals For HNGi8 X I4G😍
By the end of this internship,i hope to:
1. Improve more on my skills, learning new things needed for real world problems.
2. Improve on my communication skills and always be open to criticisms.
3. Learn and understand how to follow instructions.
4. Improve on my network and meet new people.
5. Have fun ,eat and sleep well😅.
 
Useful Resources.
Here are some useful resources for anyone who is interested in tech or want to blush up on their skills :
HTML and CSS crash course 
https://youtu.be/mU6anWqZJcc
Git and Github tutorial 
https://youtu.be/SWYqp7iY_Tc
JavaScript Crash Course
https://youtu.be/PkZNo7MFNFg
Ui/Ux tutorial for beginners
https://youtu.be/_Hp_dI0DzY4.

Thanks to HNGi8 x I4G for this wonderful internship 😊.
HNG Internship 8
Tags: hng8, internship, flutter, git
Published: 2021-08-15 16:24:15

---
title: HNG Internship 8
published: true
description: Journey through my internship at HNG
tags: HNG8, Internship, flutter, GIT
cover_image: https://www.mackinac.org/media/images/2019/sizes/960x504/asphalt-bitumen-empty-road-1197095.jpg
---
The HNG internship 8 Stage 1 kicked off today, ```Sunday, 15 August 2021.```
This is article is a task for the stage 1 interns to proceed to the next stage and it also entails the goals I aim to achieve with experience I want to gain as an intern in the HNG8 internship program.

I love programming and I have been very intrigued by things you could be able to do with it, but developing skills to get a job on your own can be very challenging without the necessary resources. Getting a job these days in the tech world without experience isn't easy and programs like HNG internship program at https://internship.zuri.team gives opportunity to be able to further in your skills and gain more experience. Developing mobile apps and other sort of graphical software programs as always been a drive to learn more, so last year I was able to learn React Native (a framework used in developing cross-platform app) and then got hooked up with Flutter (also a cross-platform developing tool) this year and the learning experience hasn't really been compensated without gaining experience by a practical real-world development project. I choose HNG internship as an opportunity to improve my skills and meet more people I can learn from, so I that I can be well equipped with the necessary job-like experience to add to my portfolio to become a flutter mobile developer.

By the end of this internship, I want to be someone who will be well confident in building software people can use and appreciate.

To learn and follow the part of developing mobile application as I have, here are some links to guide you.

Figma tutorial for beginners.
https://youtu.be/4W4LvJnNegA

Git tutorial for beginners.
https://youtu.be/SWYqp7iY_Tc

Flutter tutorial for beginners.
https://youtu.be/1ukSR1GRtMU

If you are in the Slack work space you can find with this name *Ajibola Akinmosin*, so see you there.
Responsive Dropdown Drop Shadow for Elementor
Tags: css, wordpress, mobile
Published: 2021-08-15 16:21:08

I created my website using the website builder Elementor and wanted to have my main menu in the header. Everything worked fine but I wanted to not have the box shadow on the mobile version of the header but at the same time keep the shadow effect on both desktop and tablet versions.

I reached out to some forums but their code did not work unfortunately. However, with some amendments to the code, I was able to create what I wanted! 

Now the box shadow on the dropdown cannot be seen on mobile but it is still visible on tablet and desktop.

Here is the code that I used:

@media (max-width: 1067px) {
        .elementor-nav-menu--dropdown {
        box-shadow: none!important;
    }
}
Is the spark still there or not?
Tags: learning, tutorial, spark
Published: 2021-08-15 16:20:43

  My web development journey started 2020.I have always enjoyed learning and growing. I was amazed by the things I could build. At the end of 2020 I got a job that didn’t require me to code, so I got extremely lazy and distracted which made me not write code for months. The guilty feeling of not coding as I used to drained me sometimes.
   Here I am, in the third quarter of the year(2021) joining HNG https://internship.zuri.team to see if I still have any spark left. I truly hope I still have it in me. 
  I wish to achieve a lot of things at the end of the internship: 
1) My confidence to write code like I used to.
2) A portfolio to enable get jobs.
3) Meet awesome people along the way.

I am a PERN(Postgres Express React Node) Stack developer

Tutorial for learning web development
Figma - https://www.youtube.com/watch?v=jk1T0CdLxwU
Git - https://www.youtube.com/watch?v=RGOj5yH7evk
JavaScript - https://www.youtube.com/watch?v=hdI2bqOjy3c
HTML - https://www.youtube.com/watch?v=UB1O30fR-EE
Starting an internship with the Zuri Team
Tags: javascript, frontend, internship, react
Published: 2021-08-15 16:17:49

## Hello World,
I'm **Ahmad Aroyehun**, I'm about to embark on an interesting journey with the [Zuri Team](https://zuri.team), and I hope to share my adventure with you all.
### Goals for the 8 weeks Internship
* Understand my frontend skills (HTML, CSS, Javascript and React) better.
* Learn Typescript and Graph ql.
* Build Real life Projects.
* Share the difficulties and the interesting part of the internship every Sunday of each week.
* Work and collaborate with other developers.
* By the end of the internship I hope to secure a remote frontend developer, javascript or fullstack developer job.

Thanks at [zuri team](https://zuri.team), [Zuri Internship](https://internship.zuri.team).
#### Here are some awesome beginner's tutorials
 {% youtube FTFaQWZBqQ8 %}
  [Figma tutorial](https://www.youtube.com/watch?v=FTFaQWZBqQ8)

 {% youtube RGOj5yH7evk %}
   [Version Control with Git](https://www.youtube.com/watch?v=RGOj5yH7evk)

{% youtube D-h8L5hgW-w %}
   [Learning HTML and CSS](https://www.youtube.com/watch?v=D-h8L5hgW-w)

 {% youtube W6NZfCO5SIk %}
[Using Javascript](https://www.youtube.com/watch?v=W6NZfCO5SIk).

> Nothing Good comes easy.
#100daysOfCode [Day - 05]
Tags: github, javascript, programming, webdev
Published: 2021-08-15 16:16:30

#100daysofcode [Day - 05]

Topic: Setting up GitHub Environment 

Today I've set up my GitHub profile and added some awesome features on my GitHub overview page. Make a visit for a better experience and suggest how can I improve more.

link: https://github.com/alsiamworld 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zo94gw3zenb4aw079ev7.png)
My Goals For The HNGi8 Internship
Published: 2021-08-15 16:08:13

HNGI8 is the 8th edition of the Hotels.Ng internship. It is operated by Zuri Internship.

HNG Internship is a long running, large scale virtual internship for people learning to code and design. It focuses on the post-training phase, and creates a virtual work environment for participants.

I heard of HNGi8 through a friend that participated in the last internship. All he said about the internship were amazing things. I got so interested, read as much as I could about it and headed to Zuri Internship ( https://internship.zuri.team ) to learn more.

The idea behind the structure of learning got me really interested and I signed up straight away. My already existing basic knowledge on Frontend Development was what drove me to select the Frontend Development track.

MY GOALS

I'm currently a student of Unilorin and second semester is on going, I'll use this as an opportunity to improve my time management skill. I'll also find the right balance between academics and internship.

My goal is to become an expert in frontend development by the end of the internship. I'm ready to strive as hard as possible to get to final stage.

Furthermore, I'll like to connect with like minded developers to work on project alongside with. The program has a lot of people in it, a lot of developers with better knowledge that I can collaborate with.

I've also found several tutorials that will be useful for me through the internship;

Figma: https://youtu.be/3q3FV65ZrUs

Git: https://youtu.be/8JJ101D3knE

Html: https://youtu.be/UB1O30fR-EE

Javascript: https://youtu.be/W6NZfCO5SIk
All your packages are belong to us. On npm, HTTP, and CJK.
Tags: npm, http, unicode
Published: 2021-08-15 16:00:24

This marks a month since my first weekly post in July. It's the end of week 32 of 2021 and 20 more weeks till end of the year, there should be 25 posts this year, if I managed to keep this up. Does collecting weekly posts count as hoarding? Like how we can hoard packages with npm Workspaces or improve webpage performance by letting browsers hoard caches.

- **Node.js & npm**: Workspaces is supported in npm v7, which ships with Node.js v15 and v16. It uses the `workspaces` field in `package.json` just like yarn. That's one more reason to look forward to Node.js v16 being LTS other than it ships with binaries prebuilt for Apple Silicone. Do note that npm v7 will convert existing `package-lock.json` to a new format.

- **Browser & HTTP**: the `Cache-Control` header in a HTTP request might be affected by browser settings, e.g. a browser might send `Cache-Control: no-cache` or even  `Pragma: no-cache` when caching is disabled, which instructs intermediaries to not use a stored response without successful validation on the origin server.

- **Encoding & languages**: Chinese, Japanese, and Korean characters are commonly referred to as CJK when it comes to character encoding. There are quite a number of blocks in Unicode for CJK but a Unicode character alone does not indicate which of the languages is in use, much like the character "A" does not indicate whether English or Malay is in used.

Thank you for reading and do let me know your thoughts about this post. If you want more content like this to be delivered to you, consider subscribing via Substack: [smallpotatodev.substack.com](https://smallpotatodev.substack.com/)

### Related Links

- GitHub blog on npm v7: [github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli](https://github.blog/2020-10-13-presenting-v7-0-0-of-the-npm-cli/)
- RFC 7234 on Cache-Control: [datatracker.ietf.org/doc/html/rfc7234](https://datatracker.ietf.org/doc/html/rfc7234#section-5.2.1)
- Unicode FAQ on CJK: [unicode.org/faq/han_cjk.html](https://www.unicode.org/faq/han_cjk.html)
Envoy-Dev docker image  
Published: 2021-08-15 15:57:34

Envoyproxy-Dev docker image already in hub. However Envoy-Dev offshore docker-image. On hub Envoy-proxy have lot of versions and some them have issue with protocol-buffer. So I build container for this purpose. Envoy-Dev add in your project with envoy-file 
https://hub.docker.com/r/ali2210/envoyproxy-dev0
Animating my illustration using animate.css
Tags: react, javascript, css, codenewbie
Published: 2021-08-15 15:46:56

Hi folks! few months ago I created a boombox illustration by only using css.
{% link https://dev.to/aneeqakhan/creating-illustration-using-css-20jk %}

Now I am looking forward to animate it.

As I am new to animation. I researched a little and found about `animate.css`. I decided to use it instantly because its pretty simple and easy. Like you animate your component with just one line of code.

So basically I wanted to animate the speakers as showing beat effect. For this I added this class to my inner speaker `div`.
```javascript
className="animate__animated animate__heartBeat animate__fast animate__infinite"
```
here I used `heartBeat` animation type and specifies its speed as `fast` for `infinite` time.
and here is the result

{% codesandbox animated-boombox-dl6f0 %}
I know its pretty raw right now and I am working on it still. My idea is to add music notes floating around and on and off button to start and stop the music.
Also It will be helpful if you suggest me animation articles or tutorials in comments.

Thanks for reading and keep creating! :sparkles:
My HNG x Zuri Goals
Published: 2021-08-15 15:43:48

Hi, My name is Temitayo, a front end web developer and I'll be participating in the 8th iteration of the HNG internship.
The Internship is a 3-month remote internship designed to surface the very best of candidates out of a large pool of participants. It is fast paced and challenging, and helps people learn how to work in teams, deal with pressure and quickly expand their knowledge. In this iteration, HNG has partnered with "Zuri" to bring us the best.
I'm writing this article as a means of documenting my progress and listing a bunch of things I would like to achieve and improve on (also because we are required to 😄).

<h2>Internship Goals</h2>
- I want to increase the pace at which I implement solutions 
- I want to meet with like-minded developers and designers
- I want to increase my chances during job applications with my experience in the internship
- I want to expand my pool of knowledge

If you wish to learn more about the internship, you should follow this <a href="https://internship.zuri.team">link</a>
<br>
Before we come to the end of this article, if you're a complete beginner that is looking to get started with design, programming and/or web development. Here are some resources that would definitely be of great use to you: 

1. Figma - figma is a design tool used by developers and designers for creating User Interface and other design elements. here's a crash course on figma: 
{% youtube Gu1so3pz4bA %}
<br>
2. Git - git is a version control tool used by developers and designers that enhances collaboration.
{% youtube SWYqp7iY_Tc %}
<br>
3. HTML - HyperText Markup Language is a language for structuring  web pages. Every webpage you see is literally made of HTML and other things.
{% youtube qz0aGYrrlhU %}
<br>
4. JavaScript - Javascript is the language of the browser. If you're hoping to become a web developer, you'll definitely need to be conversant with Javascript.
{% youtube PkZNo7MFNFg%}



Thank you for reading till the end ✌️😁