teleren/devto huggingface dataset:
Classes, Super, and You
Published: 2024-01-29 04:46:11

---
title: Classes, Super, and You
published: true
date: 2023-07-18 13:37:20 UTC
tags: 
canonical_url: https://alex.party/posts/2023-07-18-classes-super-and-you/
---

Last week [Chris and Dave mentioned](https://shoptalkshow.com/573/#t=30:21) that they don’t get why you have to call `super` when you’re in a class.

### Let’s learn you a thing

So first let’s just cover what I’m gonna be talking about here. We’re talking about the [`super`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super) keyword that can be used in JS classes. This keyword is most commonly used in the constructor of a class, and Dave asks:

> “Why doesn’t class auto-imply super?”

The answer is: **Function Signatures.**

### I Don’t Autograph My Functions

Function signatures tend to be talked about in other languages more, but the general idea is that a function signature is the name of the function, the arguments and their types, and the return type. this creates a unique identifier for the function you have written also known as its signature.

That definition is probably an over simplification, but in other languages with types, you can [overload a function/method definition](https://en.wikipedia.org/wiki/Function_overloading) by redefining it with a different signature, and it can be used multiple ways. Since JavaScript doesn’t have this concept built in (and TypeScript won’t do this either) we tend to not talk about it… Until you need to extend a class.

### Extending classes

When you extend a class, the original class will have a constructor definition. We’ll use this example from [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super#using_super_in_classes) as our basis:

```
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  get area() {
    return this.height * this.width;
  }
  set area(value) {
    this._area = value;
  }
}
```

Our `Rectangle` class has a constructor that takes in a width and a height. This makes sense because a rectangle can have a width that is different from its height.

So what happens when we do this?

```
class Square extends Rectangle {
  constructor(length) {}
}
```

The JavaScript engine doesn’t know how to “auto-imply” a super call. There is 1 argument. the extended class constructor needs 2.

### Enter `super`

The fix for this is that the developer must be explicit in how the extended class is constructed.

```
class Square extends Rectangle {
  constructor(length) {
    super(length, length);
  }
}
```

Rather than trying to add some AI LLM to every JavaScript engine to try and figure out what your auto implied constructor signature is, you as the developer need to say what the call will be.

### Conclusion

Dave, Chris, you have to call super because the engine cannot guess what you are trying to do. I hope this helps.
Automated Code Migrations MUST USE FOR DEVELOPERS
Tags: webdev, beginners, programming, tutorial
Published: 2023-07-18 13:30:00

Second Home is an AI-powered tool that can help you modernize your codebase by automating code migrations.

**[JUMP STRAIGHT TO THE TOOL](https://www.aiforme.wiki/ai/tools/Second%20Home)**

Second Home is built for developers, and it offers a number of features that make it easy to use, including:

**AI-powered code change strategies:** Second Home uses AI to determine the best way to migrate your code, which can save you a lot of time and effort.

**Prompt drift resistant:** Second Home is designed to prevent prompt drift, which is a common problem with generic AI agents. This means that your code migrations will be more accurate and consistent.

**Human in the loop:** Second Home offers a number of tools that allow you to review and approve code migrations before they are merged into your codebase. This gives you the peace of mind knowing that your code is being migrated correctly.

**Pull requests:** Second Home integrates with GitHub, Bitbucket, and GitLab, so you can easily review and approve code migrations using your favorite tools.

**Secure:** Second Home is completely stateless and can run on premise or in your own VPC. This means that your code is secure and private.

**Supports over 50 languages:** Second Home supports over 50 languages, so you can use it to migrate code written in any language.

**Works with modern frameworks:** Second Home understands both legacy and modern libraries and frameworks, so you can use it to migrate code written in any framework.

If you're looking for a way to modernize your codebase without having to spend a lot of time and effort, Second Home is a great option. It's easy to use, secure, and supports a wide range of languages and frameworks.

**Use cases for Second Home:**

**Modernizing legacy codebases:** Second Home can help you modernize your legacy codebases by migrating them to newer languages and frameworks.

**Upgrading to new versions of libraries and frameworks:** Second Home can help you upgrade to new versions of libraries and frameworks without having to manually migrate your code.

**Refactoring code:** Second Home can help you refactor your code to make it more maintainable and efficient.

**Improving code quality:** Second Home can help you improve the quality of your code by detecting and fixing errors.

**[JUMP STRAIGHT TO THE TOOL](https://www.aiforme.wiki/ai/tools/Second%20Home)**

Sign up for a free trial today and see how Second Home can help you modernize your codebase!
WEBSITE DESIGN
Tags: beginners, website
Published: 2023-07-18 13:28:59


<p>This is a tribute page for Charlotte Bronte I designed way back in 2018. I would like you to take and share some tips that could help me improve the overall design of this page.Thank you soo much</p>

[https://codepen.io/shumaila27/full/oZqzLN](url)
Angular's Transform Option for Input Values: Say Goodbye to Setters and Getters
Tags: angular, javascript, typescript, webdev
Published: 2023-07-18 13:21:51

In Angular, input properties are used to pass data from a parent component to a child component. The @Input decorator is used to define input properties.

Traditionally, input properties have been transformed using setter and getter methods. However, starting from Angular v16.1.0, a new helpful feature has been introduced to provide an alternative and easy way to transform input values, eliminating the need for using setter and getter methods.

**The transform option**

The @Input decorator now includes a `transform` option, which accepts a function that takes the passed input value and returns a new value. For example, the following code shows how to use the `transform` option to convert a string value to a number:

```
import { Input } from '@angular/core';

@Component({
  selector: 'app-rect',
  template: ``,
  standalone: true,
})
export class FooComponent {
  @Input({ transform: toNumber }) width: number;
}

function toNumber(value: string | number) {
  return isNumber(value) ? value : parseInt(value);
}
```

In the above code, the `toNumber` function is used to transform the input value. If the input value is a string, the `toNumber` function will convert it to a number. If the input value is already a number, the `toNumber` function will simply return the value.

**Benefits of using the transform option**

There are a few benefits to using the `transform` option instead of using setter and getter methods.

* **The code is cleaner.** The `transform` option allows you to write cleaner code by eliminating the need for setter and getter methods.
* **The code is more maintainable.** The `transform` option makes the code more maintainable by making it easier to understand how the input value is being transformed.
* **The code is more extensible.** The `transform` option makes the code more extensible by allowing you to easily customize the transformation logic.

**Conclusion**

The `transform` option is a new and helpful feature in Angular that can be used to simplify the process of transforming input values. The `transform` option allows you to write cleaner, more maintainable, and more extensible code.
Crowdsourced Open Source Knowledge + Impactful Innovation
Tags: productivity, opensource, web3, community
Published: 2023-07-18 13:12:18

When I said earlier that innovation and the idea of creating

[OBJECTIVE CREATION vs IMPACTFUL CREATION](https://www.linkedin.com/posts/na5h_society-project13-vtcxyz-activity-7069790900456992768-eYH-?utm_source=share&utm_medium=member_android)

This becomes more true to life when the creator goes from birds eye view to within...

If you tap into your higher senses or what some describe as intuition; you realize that: what you make for you is for others as well therefore,

What makes open source, crowd sourced learning a likely possibility is because it inspires this way of creating things & thinking. 

By default you have no other choice but to go within from day one: as, it is; within in a network of similar like minds, 

You also realize that learning comes easier as result, as you have collaboration partners at your disposal for peer to peer knowledge exchange.

This is the beauty of learning as a collective while open sourcing the channels of information for others to very as well -->

Think of this entire idea like as an organic human blockchain itself: 

It does staking (critisizing what the group is exposed to)  doing individual analysis + collective evaluation how important is that information to know. 

Another thing is: crownd sourced, open source learning helps you specialize right away instead jack of all trades...
Dependency Injection with Injector Service in Angular
Tags: angular, javascript, typescript, webdev
Published: 2023-07-18 13:08:12

Dependency injection (DI) is a design pattern that allows you to separate the **creation** of an object from its **usage**. This can make your code more modular and easier to test.

In Angular, DI is used to inject dependencies into components. A dependency is simply an object that is used by a component. For example, a component might need to use a service to access data from a database.

Angular provides a number of ways to inject dependencies into components. One way is to use the `@Injectable` decorator. The `@Injectable` decorator tells Angular that a class can be injected as a dependency.

Another way to inject dependencies into components is to use the `providers` property of the `@Component` decorator. The `providers` property specifies a list of providers that will be used to inject dependencies into the component.

**Using the Injector Service**

In Angular, you can also use the `Injector` service to inject dependencies into components. The `Injector` service is a global service that provides access to all of the dependencies that have been registered in the application.

To use the `Injector` service, you need to inject it into the component's constructor. Once you have injected the `Injector` service, you can use it to get instances of any of the dependencies that have been registered in the application.

For example, the following code shows how to use the `Injector` service to inject a `Service` instance into a component's constructor:

```
import { Component, OnInit } from '@angular/core';
import { Service } from './service';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html',
})
export class MyComponent implements OnInit {

  constructor(private injector: Injector) {}

  ngOnInit() {
    const service = this.injector.get(Service);
    service.doSomething();
  }

}
```

In this code, the `MyComponent` class injects the `Injector` service into its constructor. Then, in the `ngOnInit` method, the `MyComponent` class uses the `Injector` service to get an instance of the `Service` class.

**Advantages of Using the Injector Service**

There are a few advantages to using the `Injector` service to inject dependencies into components.

* **It makes your code more modular.** When you use the `Injector` service, you can inject dependencies into components without having to modify the component's class definition. This makes your code more modular and easier to maintain.
* **It makes your code easier to test.** When you use the `Injector` service, you can inject mock dependencies into components during unit testing. This makes it easier to test your components in isolation.

**Conclusion**

In this article, we discussed how to use the `Injector` service to inject dependencies into components in Angular. We saw how the `Injector` service can make your code more modular and easier to test.
Hero Images
Tags: css
Published: 2023-07-18 13:06:07

You can play with here : [Hero](https://flems.io/#0=N4IgtglgJlA2CmIBcBWA7AOgEwBYA0IAzvAgMYAu8UyIGphhIBAZhAo0gNqgB2AhmERJaAC3JhYTEKQD2PSvJoAeKBABuAAlKw+DALwAdaXPJ8IPeACcjAPgM8NGleq079R8hHIJb9x44AJAFEAJQB5PycAelU1Ox4lGPUbKWIyTzkOEABGJGyAThAAXzxeASFaACtGAll5eEVhYtKQfkEaOgYpOoVyGgAjGSgATw1gSLA+SwBzcyQABgBuSIAHPhhzaYXlniL7ezoTMwtLMcjdFfgKAFpLPgykDWyANg0ojXydxwB3aHIRPLzeYAUi+GkmAA9riJ4BBpmIkDh5moRGDJjM5vMNHwAK7kGQ7SKqQgrHTDJDMBAQsGVHGETzMYbXHoNchIEl8Ujwa5TGQ4nhQMF8WBwnjXLzwMCEJBc+qWMH9TkAa2mlj5AuuKxkhC8EDkj1llFOhqsGgVytV6qg1x1AC94DKZGorObSCq1fzrRBJtMHSKLFNrqr1hBWQAKGaKsPzPAaGNx2PzDDzACUscjfGjiezcYwz1TaY0OMssDDAHIxOQVtKolFIGqMIJVDiwIcwFE1FgopZ4HaHaw2WgsPMovMAFTMACqKCC9oCONIAHEIAA1b48Z7TMsp13uq23eCXe5IHgyA9H8iLfyOex7HgHTzeeBnBwaZgmG0Qe0GnRgFZh7IezAWN8jUb5Y2yLAgJ3SJZFgGRLCQb4RAlHYilSEgrgyHgsjQPJsmKABdIogA)

```css
body {
  margin:0;
  padding:0;
}

.container {
  aspect-ratio: 16 / 9;
  width:100%;
  max-height:40vh;
  margin:0 auto;

  display:flex;
  justify-content:space-around;
  align-items:center;
  background-position: center center ;
  background-size:cover;
  background-image:linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.60)), url('https://miro.medium.com/v2/resize:fit:720/0*fU5EzeHucGiVwn6g');
  background-repeat:no-repeat;     
}

.title {
  font-size: clamp(1rem, 9vw, 12rem);
  color:white;
}
```
Repo manager
Tags: refinehackathon
Published: 2023-07-18 13:00:49

## What I built : Repo manager , simple github dashboard for quick updates to the viewer profile and repos.


### Category Submission: 
- Best Overall Project
- Most Visually Pleasing
- Most Technical Impressive
- Best Project built using Material UI as the main UI framework 

-------------------------
### App Link
https://repo-manager-seven.vercel.app/
----------------------
### Screenshots 
![repo manager homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypfpluhysb5uj26yri07.png)

![reopo manager repos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81cc3ti3dhrz2jaqbnq1.png)

![reopo manager update repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bt8x8cjtf390fxwexp0f.png)

![repo manager edit profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ce6lczntb006pqwbmmv.png)


![repos bulk delete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lrkxc7a8o32z3kk78a9.png)

-----------------------------

### Description 
I built a github dashboard that lets you quickly edit/delete your profile info or repository details

feature include 
- quick viewer profile overview
- view list of repositories 
- sorted by last pushed to descending 
 order by default , but options to sort by name , stargazers , created_at and updated at (desc or ascending) , sorting by forked repositories only is supported.

- hint that informs you if your forked repository is out of sync with it's parent
- a search bar that lets you quickly search for new repositories and filter your through own 
- select multiple repos and bulk delte them ⚠ use with caution
- view the package.json for your javascript projects and add topics to your repo from your dependancies

### Link to Source Code 
[repo-manager](https://github.com/tigawanna/repo-manager)

### Permissive License 
MIT licence

## Background (What made you decide to build this particular app? What inspired you?) 

i feel like it will come in handy as i approach apply to jobs phase , need something that will help me in tidying things up , adding proper names descriptions andtags for repositories an daso deleting redundant ones

i also disliked the current hops you have to jump through to delete repositories 

### How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)
 
Really love the way refine halped me scafold out the project , one of the biggest pain of setting up a SPA is setting up the router,state management,stying and setting up the API structure .

I wasn't a big fan of MUI before but after building this app i feel like it was all outof prejudice because the consistent UI + accessible components is quite the productivity boost. 
The data providers were also really great and even though i had to use some escape hatchesi can see myself suing them more often, the inferencer is a great prototyping tool and lets you immediately view the API you just wired up
it's all great dx all the way
Rubyist Hangout Thread
Tags: discuss, ruby, watercooler
Published: 2023-07-18 13:00:00

Hey folks, this is a weekly hangout thread.

This is an area for **Rubyists to discuss _Ruby_**, but since Ruby is 28 years old, and things don't change so quickly, this is also just **a hangout thread for Rubyists to share whatever you feel like** within our community guidelines.

So what's up this week?
Weekly AI News and Discussion Thread
Tags: ai, discuss, news
Published: 2023-07-18 13:00:00

Hey everyone, the past few months have been pretty electric in terms of advancements in AI and actual/imagined changes to our workflow and industry.

This is a regular open thread where everyone is encouraged to share...

* Notable news in the field of AI
* Personal experiences and insights
* Concerns and fears
* Success stories and demos
* And any other related discussions you'd like to bring to the table

This thread will go out every week.
Mastering Component Communication in Angular
Published: 2023-07-18 12:57:20

Angular is a powerful framework for building web applications. One of the things that makes Angular so powerful is its ability to facilitate communication between components. In this article, we will discuss some advanced techniques for component communication in Angular.

**Parent to Child Communication**

The most common way to communicate between components is from a parent component to a child component. This can be done using the `@Input` decorator. The `@Input` decorator allows you to pass data from a parent component to a child component.

For example, let's say we have a parent component called `AppComponent` and a child component called `CounterComponent`. We want to pass the current value of a counter from the `AppComponent` to the `CounterComponent`. We can do this by decorating a property in the `CounterComponent` with the `@Input` decorator.

```
import { Component, Input } from '@angular/core';

@Component({
  selector: 'counter-component',
  templateUrl: './counter.component.html',
})
export class CounterComponent {

  @Input()
  count: number;

  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;
  }

}
```

In the `CounterComponent` template, we can access the `count` property that was passed from the `AppComponent`.

```
<h1>{{ count }}</h1>
<button (click)="increment()">Increment</button>
```

**Child to Parent Communication**

In addition to parent to child communication, Angular also supports child to parent communication. This can be done using the `@Output` decorator. The `@Output` decorator allows you to emit events from a child component to its parent component.

For example, let's say we have a child component called `CounterComponent` that emits an event when the counter value is incremented. We can do this by decorating a property in the `CounterComponent` with the `@Output` decorator.

```
import { Component, Output } from '@angular/core';

@Component({
  selector: 'counter-component',
  templateUrl: './counter.component.html',
})
export class CounterComponent {

  @Output()
  incrementEvent = new EventEmitter();

  constructor() {
    this.count = 0;
  }

  increment() {
    this.count++;
    this.incrementEvent.emit();
  }

}
```

In the `AppComponent`, we can subscribe to the `incrementEvent` event to be notified when the counter value is incremented.

```
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-component',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {

  count: number;

  constructor() {
    this.count = 0;
  }

  ngOnInit() {
    this.counterComponent.incrementEvent.subscribe((event) => {
      this.count = event.count;
    });
  }

}
```

**Conclusion**

In this article, we discussed some advanced techniques for component communication in Angular. We covered parent to child communication and child to parent communication. We also saw how to subscribe to events emitted from child components.

I hope this article was helpful. Please let me know if you have any questions.
Firebase Testing with MobX
Tags: firebase, testing, mobx, webdev
Published: 2023-07-18 12:55:36

**Introduction:**

Firebase has become a popular back-end platform for building web and mobile applications. Real-time database, authentication and cloud functions offer powerful features that streamline the development process. When the state management library is integrated with MobX, Firebase becomes more secure. In this article, we will explore effective strategies and best practices for testing Firebase applications integrated with MobX.

1. **Understanding Firebase and MobX:**

- Firebase: An overview of the key features of Firebase and how 
  it simplifies backend development.
- MobX: A brief introduction to MobX and the basic concepts of state management in JavaScript applications.

2. **Check the Firebase Application:**

- Unit Testing: Writing focused tests for individual components, functions, or services.
- Integration Testing: Ensure seamless integration between Firebase and MobX in the application.
- Final Testing: Testing the entire application workflow, including Firebase interactions.

3. **Set up the test environment:**

-  Test Runners and Frameworks: Explore test runners and frameworks 
   compatible with Firebase and MobX.
-  Firebase Mocking: Mocking Firebase services to isolate 
   connections and create reliable tests.
-  Generating test pairs for MobX: Methods for generating test 
   pairs for MobX observations and actions.

4. **Firebase and MobX Testing Strategy:**

- Firebase Interaction: Test Firebase-specific code independently 
  of MobX stores and actions.
- Mock Firebase Responses: Simulate different responses from 
  Firebase for different test scenarios.
- Validating MobX Actions: Validating MobX Actions interacting with 
  Firebase Services.
- Integration Testing: Wrote comprehensive tests to ensure seamless 
  interaction between Firebase and MobX.

5. **Best Practices for Firebase and MobX Testing:**

- Test Coverage: Provide an adequate test environment to spot 
  potential bugs and issues.
- Continuous Integration: Integrate testing into the development 
  process for early bug detection.
- Test Data Management: Manage test data and create a consistent 
  test environment.
- Test Maintenance: Strategies for maintaining tests as the 
  Application and Firebase evolve.

6. **Tools and Libraries:**

- Testing Libraries: Popular JavaScript testing libraries and 
  frameworks for Firebase and MobX.
- Firebase Emulator Suite: Uses Firebase's Emulator Suite for local 
  development and testing.
- MobX Test Tool: Using the MobX Test Tool to facilitate MobX 
  stores and transactions.

**The results:**

By combining the power of Firebase and MobX, developers can create scalable and responsive applications. An effective testing process is essential to ensure the stability and reliability of these applications. By following the strategies and best practices outlined in this article, developers can confidently test Firebase and MobX integrated apps, catch early bugs, and deliver high-quality software to end users.