teleren/devto huggingface dataset:
Angular - building apps without modules
Tags: webdev, javascript, programming, beginners
Published: 2023-01-29 16:13:01

Building Angular applications without modules is not recommended as modules play an important role in organizing and structuring the code in an Angular app. Modules provide a way to encapsulate related components, services, pipes, and directives into a cohesive unit that can be easily reused and imported into other parts of the application.

However, it is possible to build small, standalone Angular applications without modules, by using the Angular CLI to create a new project with a minimal setup and writing all the components, services, and other functionality directly in the app component. This approach is useful for small projects or for understanding the basics of Angular before moving on to more complex applications.

Here's an example of how you could build a standalone Angular application without modules:

Create a new Angular project using the Angular CLI:
Use the ng new command to create a new Angular project with a minimal setup.

```
ng new my-standalone-app

```
Remove the unnecessary modules:
Navigate to the app.module.ts file and remove the unnecessary imports, including the CommonModule and the FormsModule.

```
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

```
Write the components and services directly in the app component:
Write the components, services, pipes, and other functionality directly in the app.component.ts file. You can use the component decorator to define the component and its template.

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Hello, Angular!</h1>
  `
})
export class AppComponent { }

```
Run the application:
Use the ng serve command to run the application and see the results in a browser.

```
ng serve

```
This is a basic example of how to build a standalone Angular application without modules. However, as your application grows in size and complexity, it's important to structure your code using modules for better organization and maintainability. Additionally, modules make it easier to reuse code and manage dependencies in your application.
Publish site with Netlify and GitHub repo
Tags: deploy, netlify, github, tutorial
Published: 2023-01-29 16:10:03

I am writing this because this is the same problem I keep facing again and again when I am deploying a site through GitHub repo and Netlify. 

Here to not the same happening again and smooth process. 

Adding locally hosted code to GitHub [Using Git](https://docs.github.com/en/get-started/importing-your-projects-to-github/importing-source-code-to-github/adding-locally-hosted-code-to-github#adding-a-local-repository-to-github-using-git)
The GitHub docs explains it simply. 

After choosing the repo from Netlify and starting the deploy process and getting a error, in **build and deploy** -> **build settings** -> in **build command**  write

`CI= npm run build`


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

and it works and the site is deployed!!
best way to format a USB stick such that this stick can be used with both Linux and Windows 10?
Tags: linux, windows, usb, command
Published: 2023-01-29 16:09:19


What is the best way to format a USB stick such that this stick can be used with both Linux and Windows 10?

Also what is the best practice for formatting a USB stick?  Is it best to format the USB stick only for Linux use rather than for both Linux and Windows use?

wich filesystem you would use here!?

And besides this: Which Fileystem you would choose if you are wanting to to share content between Windows and Linux is exFAT. I have heard that many of my friends use this in order to be able to use the stick on Win and linux - on both systems.

Well this said i guess that on USB pendrives and SD cards we should be able to use this FileSystem: exFAT 

roughly speaking, this exFAT can be called a revision of FAT32 without the 4GB max file size limitation. 
Since kernel version 5.4, exFAT is a native filesystem for Linux and does not rely on FUSE anymore.


how to do that!? how to get this things done: 

Well i guess that we need to have support: Support for the exFAT: 
so - if not installed, you will have to install exFAT support.


`$ sudo apt install exfatprogs # Debian/Ubuntu
$ sudo dnf install exfatprogs # Red Hat/Fedora/CentOS
$ sudo pacman -S exfatprogs # Arch Linux/Manjaro
`

**Note**: On systems with older kernels (previous to 5.4), we should make use exfat-utils instead of exfatprogs. From here, i guess that we ought to have several options

Now i guess that we have the option to:

a. use a graphical tool like gparted or - even better
b. the command line (which is much much more fun). 

any ideas how to do this concrete
The Directive Composition API in Angular
Tags: webdev, angular, javascript, programming
Published: 2023-01-29 16:03:44

The Directive Composition API in Angular provides a way to create custom directives that can be used to manipulate the behavior and appearance of elements in your templates. It allows you to define custom logic and use it to interact with elements in your views.

Here's a step-by-step guide on how to use the Directive Composition API in Angular:

Import the necessary classes:
In order to use the Directive Composition API, you'll first need to import the Directive and ViewContainerRef classes from the @angular/core module. These classes will be used to define your custom directive and manipulate elements in the view.

```
import { Directive, ViewContainerRef } from '@angular/core';

```
Create a directive class:
Next, create a class for your custom directive and use the @Directive decorator to provide metadata about the directive. The selector property in the metadata should be a CSS selector that you'll use to apply the directive to elements in your templates.

```
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private viewContainer: ViewContainerRef) { }

}

```
Implement the directive logic:
In the directive class, you can implement the logic for the directive using the ViewContainerRef to manipulate elements in the view. For example, you can create an embedded view and use it to wrap the content of an element in your template with a yellow background.

```
@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private viewContainer: ViewContainerRef) { 
    this.viewContainer.createEmbeddedView(this.template);
  }

  private get template() {
    return `
      <ng-template>
        <div style="background-color: yellow;">
          <ng-content></ng-content>
        </div>
      </ng-template>
    `;
  }

}

```
Register the directive in your module:
Finally, you'll need to register the directive in your module's declarations array. This will make the directive available for use in your templates.

```
@NgModule({
  declarations: [
    HighlightDirective
  ],
  ...
})
export class AppModule { }

```
Use the directive in your templates:
You can now use the directive in your templates by applying the selector (in this case appHighlight) to any element. When the directive is applied, the content of the element will be wrapped in a yellow background.

```
<p appHighlight>This text will be highlighted</p>

```
This is just a basic example of how to use the Directive Composition API in Angular. You can use it to create more complex custom directives as needed to fit your specific use case. The ability to manipulate elements in the view and interact with templates gives you a lot of flexibility and power when building Angular applications.
# My first web design😃🦾
Tags: webdev, beginners, programming, html
Published: 2023-01-29 16:03:04

Web design is a field that requires a solid foundation in HTML and CSS. Without a proper understanding of the fundamentals, it can be challenging to grasp complex concepts and make the most of cutting-edge tools. That's why after struggling with advanced technologies like React, I realized that I had missed the most important part of web development - the foundation. I made the decision to start over and focus on building a solid foundation in HTML and CSS.

I am proud to present my first project [](https://esogargar.github.io/temp1/)[https://esogargar.github.io/temp1/](https://esogargar.github.io/temp1/), created using only HTML and pure CSS. The project showcases my newfound understanding of HTML and CSS, create visually appealing and responsive websites, with a touch of Google Fonts and Font Awesome icons, I was able to add a unique look and feel to the site, and of course the use of media queries ensured that the website remains user-friendly on different devices and screen sizes. The project was hosted for free on GitHub Pages.

## Lesson learned

-  `CSS Variables and Components:` One of the best practices in CSS is to make use of variables and components. This makes it easier to maintain and update the website, as all changes can be made in one place, this not only helps in reducing the amount of code but also ensures that the website remains consistent.

![CSS Variables and Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cpqprjbtv88bjlsi53c.png)

-   `CSS Flex and Grid:` Flexbox is made for one-dimensional layouts, and the Grid is made for two-dimensional layouts. It means Flexbox can work on either rows or columns at a time, but Grids can work on both. 

![CSS Flex and Grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7711d12iyxm138bgjpdu.png)

![CSS Flex and Grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/25g7z8vkoyw4wb9q8x6d.png)

- `CSS Selector:`
    -   nth-child selector

![CSS Selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3w2v0kpugiu9snpczbku.png)

- `Generating shapes with ::before and ::after`

![CSS Selector](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6cmn3btwnxc0ieo60n1.png)

-   `CSS animation :` 
   - Add a smooth scrolling effect to the document

![CSS animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j92fds8cr58yqgy5py15.png)

  - Use transform and transition when action (Hover)

![transform ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyfrw3p980xribnxw24v.png)


- `Use CSS browser prefixes :`

![prefixes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxi8o9nrjvnwwhk3zrkb.png)
-   `GitHub Pages:` I used to host my first website for free

In conclusion, this project showcases the use of HTML and CSS to create a visually appealing and responsive website.
CodePen Designs - 28 : CSS Only Cubes Hover Effects
Tags: codepen, css, webdev, design
Published: 2023-01-29 15:52:06

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---


#### Codepen Design - 28
---
{% codepen https://codepen.io/gvissing/pen/QWBrzdB %}



---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
Generating React native code using chat GPT.
Tags: chatgpt, reactnative, javascript, webdev
Published: 2023-01-29 15:40:27

Generating React Native Code using **ChatGPT**: A Game-Changer for Mobile App Development

React Native is a popular framework for building cross-platform mobile applications. It allows developers to write code once and run it on both Android and iOS platforms. However, writing code for a React Native app can be time-consuming, especially for complex features.

Enter **ChatGPT**, a state-of-the-art language model developed by OpenAI. With its ability to generate text based on patterns learned from a massive amount of data, ChatGPT can now generate React Native code, making the process of mobile app development faster and more efficient.

ChatGPT uses natural language processing to understand the user's intent and generate code that meets their needs. The model has been trained on a wide range of programming languages, including JavaScript, which is the language used for React Native development. This means that developers can now generate React Native code simply by describing the feature they want to implement in natural language.

For example, a developer could type in "I need a button component that navigates to a new screen when tapped" and ChatGPT would generate the relevant code for a button component in React Native.

Not only does this save time, but it also reduces the risk of human error and ensures that the code generated is up to industry standards. This can be especially useful for developers who are less experienced in React Native or for those who are working on a tight deadline.

In addition, ChatGPT can also generate code for complex features such as animations, integrations with APIs, and even complete screens. This allows developers to focus on the more important aspects of the app such as design and user experience.

In conclusion, the ability to generate React Native code using ChatGPT is a game-changer for mobile app development. It streamlines the process, reduces the risk of error, and allows developers to focus on more important aspects of the app. If you're a React Native developer, try it out today and see the difference it can make to your workflow.

**Youtube** : Generating code using react native:
https://youtu.be/9P32K0Ck3xs
Reading file in nodejs with use of module fs and path
Published: 2023-01-29 15:32:37

Hi!

## By asynchronously

```
const  fs = require("fs");
const path = require("path");

const fileUrl = path.join(__dirname, "test.txt");
fs.readFile(fileUrl,(err,data)=>{
    console.log("fileData: ",data)
});
```
## By synchronously
```
const  fs = require("fs");
const path = require("path");

const fileUrl = path.join(__dirname, "test.txt");
const fileData = fs.readFileSync(fileUrl);
console.log(fileData )
```
Npx, c'est quoi ?
Tags: npx, npm, dlx, node
Published: 2023-01-29 15:30:32


**Npx** est un outil développé par **npm** qui facilite l'exécution de packages _Node.js_.  
Il est livré avec **npm** à partir de la version _5.2_.

Avant l'arrivée de **npx**, il était nécessaire d'installer des packages en tant que dépendance pour pouvoir les utiliser dans un projet.  
Grâce à lui, il est maintenant possible d'exécuter des packages sans devoir les installer de manière permanente.

## Comment fonctionne npx ?

Lorsque vous utilisez **npx** pour exécuter un package, celui-ci vérifie d'abord s'il existe déjà dans votre projet ou s'il est installé globalement :

- S'il existe, il l'exécute.
- S'il n'existe pas, **npx** l'installe temporairement et l'exécute.

Cela permet de tester des packages sans devoir les installer dans votre projet.

Pour utiliser **npx**, il suffit de taper la commande `npx` suivie du nom du package que vous souhaitez exécuter.

Par exemple :

```cmd
npx mon-super-package
```

## Npx vs npm

**Npm** est un gestionnaire de packages qui vous aide à installer vos dépendances en lisant votre fichier package.json (à l'instar de **yarn** et **pnpm**) à l'aide des commandes :

```cmd
npm install
```

ou

```cmd
npm i
```

Il permet également d'exécuter des commandes déjà définies dans votre projet.  
A la différence de **npx**, vous pouvez également lancer des commandes de package mais uniquement issues des packages déjà installés.

## Et dlx ?

A l'instar de **npx**, **dlx** vous permet d'exécuter des packages sans les installer.  
Utilsable avec **pnpm** ou **yarn**, c'est l'équivalent de **npx** avec ces _packages manager_.

Cependant, **dlx** n'utilisera jamais vos packages locaux pour l'exécution de commande.

## Conclusion

Avant la version _5.2_. de **npm**, on devait installer nos packages pour les utiliser.

Aujourd'hui, c'est beaucoup plus simple et ça permet de tester des packages avant de les installer.
On peut également utiliser **npx** ou **dlx** pour lancer des _scaffolding_ d'application :

```cmd
// init d'un projet nuxt
pnpm dlx nuxi init <project-name>
```

```cmd
// init d'un projet react
npx create-react-app my-app
```

______

Merci d'avoir lu cet article ! 
Il a été posté initialement sur mon [site](https://necraidan.com) : https://necraidan.com/blog/npm-npx-dlx

______
Cover par [Jiawei Zhao](https://unsplash.com/@jiaweizhao) sur [Unsplash](https://unsplash.com/photos/BsXeYX3efOI)
Developing a Web Application with PowerShell - Pode, the PowerFul Module
Tags: powershell, tutorial, webdev, pode
Published: 2023-01-29 15:25:14

{% embed https://youtu.be/N-yjDGzEYak %}

Web Applications are popular, and often require to either knowing some front-end development or using some other products which allow to build some applications. What about PowerShell, can you actually build a web app using only PowerShell language? 

Yes, you can write a web app in PowerShell, and I'm going to show you how in this video.

It comes down to two PowerShell modules - Pode and Pode.Web - all you need to do is to run Install-Module Pode,Pode.Web and you can start building your applications.

I will be writing a simple password generation and management web app during video, and source code is available on GitHub - so that you can either follow me, or just grab source code and see how this whole Pode module works yourself. And since the video touches only briefly what Pode is capable of, I'm really looking forward your views and feedback.

###
Code: https://github.com/thekamilpro/About-PowerShell/tree/main/PowerFul%20Modules/Pode
Pode website: https://badgerati.github.io/Pode
Pode.Web website: https://badgerati.github.io/Pode.Web/
Pode Discord: https://discord.gg/fRqeGcbF6h
PowerShell Error Handling - One error at the time please
Tags: powershell, tutorial, errors
Published: 2023-01-29 15:23:22

{% embed https://youtu.be/-rQTBuaIVS8 %}

Code fails - whether because of reasons out of our control, or because we didn't consider the situation it might fail. Expired credentials, timeout connections, lack of permissions go genuine software bug - each of these are potential problem which might fall our code over. And if we don't handle the error, our script will simply throw and terminate. It's certainly not desired state.

In this video I'll show you different ways PowerShell can error, how to debug such errors and how to handle them - so that we are in control.

Code: https://github.com/thekamilpro/About-PowerShell/tree/main/PowerShell%20Error%20Handling
2023 neco timetable
Published: 2023-01-29 14:53:51

[https://multischolar.com/neco-timetable/](https://multischolar.com/neco-timetable/#utm_source=backlinks&utm_medium=search&utm_campaign=darry+ring+us&utm_content=Michelle)
https://plaza.rakuten.co.jp/chenlee/diary/202301290002/
https://www.provenexpert.com/2023-neco-timetable/
https://www.producthunt.com/@dateneco1
https://www.divephotoguide.com/user/dateneco/
https://wakelet.com/@dateneco
https://vocal.media/authors/dateneco
https://www.lifeofpix.com/photographers/dateneco/
https://seedandspark.com/user/dateneco
https://rosalind.info/users/dateneco/
http://phillipsservices.net/UserProfile/tabid/43/userId/196350/Default.aspx
https://app.roll20.net/users/11567898/dateneco
https://speakerdeck.com/dateneco
https://social.msdn.microsoft.com/Profile/dateneco
https://camp-fire.jp/profile/dateneco
https://plazapublica.cdmx.gob.mx/profiles/dateneco/activity
https://www.metal-archives.com/users/dateneco
https://storium.com/user/dateneco
https://trabajo.merca20.com/author/dateneco/
https://www.intensedebate.com/people/dateneco
https://www.mifare.net/support/forum/users/dateneco/
https://pinshape.com/users/2563453-dateneco
http://foxsheets.com/UserProfile/tabid/57/userId/119248/Default.aspx
https://www.kompasiana.com/dateneco
https://www.credly.com/users/date-neco/badges
https://www.myminifactory.com/users/dateneco
https://www.sqlservercentral.com/forums/user/dateneco
https://www.longisland.com/profile/dateneco
https://guides.co/a/date-neci
https://myanimelist.net/profile/dateneco
https://www.iheart.com/podcast/269-2023-neco-timetable-107998724/
Difference between call, bind and apply methods in javascript
Tags: javascript, beginners, webdev, programming
Published: 2023-01-29 14:52:14

Call(), bind() and apply() are javascript methods used to call a function with a specific this value and arguments where required. They are often used to set the context of a function and make it easier to reuse functions.

Asumming you have two objects, one contains a name and an annonymous function and the other only has a name like this;

```
let person1 = {
  name: "John",
  sayHi: function(hobby) {
    return "Hi, I'm " + this.name + " and I love " + hobby;
  }
};

let person2 = {
  name: "Frontend Jedi"
}
```

but you'd to call the sayHi method for `person2`. This is where the call(), bind() and apply() methods come in, to do this, you simply set the `this` value of the method or function to point at the object it is referencing.

Here's how to go about it ;

### Call() method
The call method recieves the new context i.e the new object, as the first argument followed by the function's arguments if any like so;

```
console.log( person1.sayHi.call(person2, "writing code") )
```

### apply() method
The apply method also recives the new context as the first argument but unlike the call method, the function's arguments are passed in as an array and seperated by comas if more than one. Like so;

```
console.log( person1.sayHi.apply(person2, ["writing code"]) )
```

so if we had more than one `hobby`, our apply method would now look like this;

```
console.log( person1.sayHi.apply(person2, ["writing code", "designing"]) )
```

### bind() method
The bind method is a lot more different from the call and apply methods. To use the bind method, you need to first of all declare a variable and initialize it with the method or function you are referencing followed by the bind keyword and then the context object is then passed in as argument to the bind method. After initializing the variable like so;

`let newSayHi = person1.sayHi.bind(person2)`

the newly declared variable is then called as a function and the required arguments are then passed to it.

`console.log( newSayHi("writing code")`

In conclusion, bind(), call(), and apply() are important methods in JavaScript that allow us to control the value of the 'this' keyword and reuse functions more effectively. Understanding how to use these methods can greatly improve your ability to write more efficient and reusable code.

follow me on twitter @[Frontend Jedi](https://twitter.com/excel_bill) to stay updated. thanks.