teleren/devto huggingface dataset:
Commonly used npm commands
Tags: npm
Published: 2023-06-30 08:30:00

Initializing a project

```bash
npm init
```

Installing packages

```bash
npm install <package-name>      // Install package locally
npm install -g <package-name>   // Install package globally
npm install --save <package-name>    // Install package and save it as a dependency in package.json
npm install --save-dev <package-name> // Install package and save it as a development dependency in package.json
```

Uninstalling packages

```bash
npm uninstall <package-name>    // Uninstall package locally
npm uninstall -g <package-name> // Uninstall package globally
```

Running scripts defined in package.json

```bash
npm run <script-name>
```

Updating packages

```bash
npm update                     // Update all packages
npm update <package-name>      // Update a specific package
```

Listing installed packages

```bash
npm ls                         // List installed packages
npm ls -g                      // List globally installed packages
```

Searching for packages

```bash
npm search <keyword>           // Search for packages in the npm registry
```

Viewing package information

```bash
npm view <package-name>        // View details about a package
npm view <package-name> versions    // View available versions of a package
```
Publishing packages

```bash
npm publish                    // Publish a package to the npm registry
```

Managing package versions

```bash
npm version <new-version>          // Update the version of your package
```

Installing packages from a package.json file

```bash
npm install                // Install packages listed in package.json
```

Cleaning the npm cache

```bash
npm cache clean            // Clear the entire npm cache
```
What is client-Side Framework in Angular?
Tags: angular
Published: 2023-06-30 07:44:27

In Angular, a client-side framework, a client-side framework refers to the collection of libraries and tools that run on the client-side (i.e., the web browser) to facilitate the development of dynamic and interactive web applications. Angular itself is a popular client-side framework used for building single-page applications (SPAs).

**Angular provides a comprehensive set of client-side tools and libraries that handle various aspects of web application development, including:**

**1. Templating:** Angular offers a templating engine that allows developers to define the structure and layout of the user interface using HTML templates. These templates can include dynamic data bindings, conditionals, loops, and other features to create a rich and interactive user experience.

**2. Component-based architecture:** Angular follows a component-based architecture, where applications are built by composing reusable and modular components. Components encapsulate their own behavior, templates, and styles, making it easier to manage and maintain complex application structures.

**3. Data binding:** Angular provides powerful data binding capabilities, allowing developers to establish connections between the application's data model and the user interface. This enables automatic synchronization of data changes between the model and the view, eliminating the need for manual DOM manipulation.

**4. Routing:** Angular includes a robust routing system that enables developers to define and manage application routes. This allows for the creation of multi-page experiences within a single-page application, with different routes mapping to specific components and views.

**5. Dependency injection:** Angular utilizes dependency injection, a design pattern that helps manage dependencies and promotes modular and testable code. Dependency injection allows for the easy integration of services, modules, and other components into Angular applications.

**6. Form handling:** Angular provides comprehensive form handling capabilities, including form validation, input validation, form controls, and form submission handling. These features simplify the development and management of forms in web applications.

By using the Angular client-side framework, developers can leverage these built-in tools and features to build robust, scalable, and maintainable web applications. By obtaining [Angular Course](https://www.edureka.co/angular-training), you can advance your career in Angular. With this course, you can demonstrate your expertise in applications using React concepts such as Angular Modules, Components, Databinding, Angular Forms, Angular Directives and Pipes, Services and Dependency Injection (DI), many more fundamental concepts, and many more critical concepts among others.

The framework promotes best practices, modular development, and efficient code organization, enabling developers to create high-quality user experiences while enhancing productivity and code reusability.
Why pay to write source code? Paid software alternatives.
Tags: java, javascript, developer, softwareengineering
Published: 2023-06-30 08:28:05

While organisations and employees both continue to reduce their expenditure, there is a cost of licensing the software used by software engineers in their day to day work. This takes up a huge amount of money that an organisation spends on its employees, just to enable them to do their work.

In this article I have compiled a list of paid software alternatives that an organisation can use to reduce their licensing cost effectively.

**Base Machine**

An employee could be using a desktop or a laptop for their work. The configuration varies based on the work the employee does. For a typical software developer an i5 or Ryzen 5 CPU, 8 GB RAM and 256 GB SSD storage should be sufficient. It's better to spend money on a 4K monitor with 60Hz or higher refresh rate rather than spending it on i7 or other premium CPU or extra storage unless it's really required. A 13 inch screen would be an excellent choice to carry easily while the external monitor will make the office work station stressless.

**Operating System**

While MacBooks come with MacOS for free forever but Windows based devices require license to be purchased separately or bundled with the new device. Furthermore for every major upgrade the Windows  license need to be repurchased for every employee.

An alternative is to use Linux based machines but this doesn't motivate most of the employees as they struggle to learn the Linux commands.

**Software License**

An organisation's job is not done by just purchasing the laptop or desktop with just an operating system. They need to buy more software licenses like antivirus, office application suite, email service, collaboration software, task tracker, source code versioning tools, source code editors etc. This is growing rapidly and most them require a licence to be purchased for every user.

Most of the software are now provided with subscription based license. We can no longer buy a software and use it forever. This means every month we need to pay a huge amount of money for every employee just to get software subscription licenses for them.

**Source Code Editor**

There are mix of source code editors available in the market which include both free and paid licenses. While a free editor can somehow get the job done but the paid editor makes developer's life and work much easier. In order to attract the best talents an organisation is forced to buy these editors with a huge licensing cost.

There is an alternative to it. [CoreIDE](https://coreide.com) editor comes with the features that a paid editor or an IDE provide but at no cost. It's a completely free forever editor with support for Java, JavaScript, Node.js, TypeScript, Spring, Spring Boot, React, Express, J2EE, Vue, Backbone, AngularJS and many more. If an organisation starts using it then they can save a huge amount of money.

Download CoreIDE- https://coreide.com


![CoreIDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ej50ne1zbd21ttlbnro.png)

Thanks!!
The Apache AGE REMOVE Clause.
Published: 2023-06-30 08:27:57

Apache AGE(AGE) is a PostgreSQL extension that enables hybrid queries using PostgreSQL. The AGE `REMOVE` clause is used to delete a property from nodes and relationships. In [this](https://dev.to/chidera/apache-age-set-clause-41m7) previous blog post I wrote about the `SET` clause which can be used to delete a property as well.

The graph that is being queried in this tutorial has been created in a previous tutorial [here](https://dev.to/chidera/understanding-age-skip-and-limit-clauses-3n2a) and its contents it as follows.

![An image showing the vertices we are working with](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1te3ahhrfzb2yaq8xyd.jpg)

Now let's make a query, to remove the property `Description` from the vertex `food`.
```
SELECT * FROM cypher('food', $$ MATCH (food_blog {name: 'Tasty Delight'})REMOVE food_blog.Description RETURN food_blog $$) as (food_blog agtype);
```

![Image showing the returned query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iwl9od84ck7tmamjzzr.jpg)

The query returned the Vertex `food_blog` with just the `name` property, as seen in the image above.

**Conclusion**
The AGE `REMOVE` just like the `SET` clause is quite useful in deleting properties from Nodes and Relationships.

**References**
https://age.apache.org/age-manual/master/clauses/remove.html

**Further Reading on AGE**
https://dev.to/chidera/a-simple-guide-to-graph-databases-for-beginners-3log
https://dev.to/chidera/creating-your-first-graph-database-7mm
https://dev.to/chidera/understanding-age-skip-and-limit-clauses-3n2a
https://dev.to/chidera/apache-age-set-clause-41m7
https://dev.to/chidera/understanding-the-apache-age-delete-clause-5704
The Ultimate Guide To End-to-End Testing With Cypress
Tags: cypress, testing, qa, javascript
Published: 2023-06-30 08:19:35

Today’s software applications are getting more complicated, thus every testing team needs to focus on expanding test coverage. To achieve this goal, it is important to use a combination of testing types, such as unit testing, integration testing, system testing, and end to end testing, depending on the software application’s complexity and requirements.

[Please follow the link to see about End-to-End Testing With Cypress](https://applitools.com/blog/the-ultimate-guide-to-end-to-end-testing-with-cypress/)

End to End (E2E) testing is designed to ensure that all components of a software application are working together correctly and that the system as a whole meets the desired functionality, performance, and reliability requirements.
LGBTQIA+ ally flag in pure CSS
Tags: css, lgbtq
Published: 2023-06-30 08:07:10

I was experimenting with `linear-gradient`, `clip-path` and `aspect-ratio` in CSS, and was able to create an LGBTQIA+ ally flag using nothing but CSS. Since the `html`, `head`, and `body` elements are always implicitly present in the browser DOM, you don't even have to include them in an HTML file. The full **index.html** file looks like this:

```html
<style>
html {
  display: flex;
  flex-direction: row;
  inset: 0 0 0 0;
  position: absolute;
  margin: 0;
  background: linear-gradient(180deg,
    black 0%, black 16.7%,
    white 16.7%, white 33.3%,
    black 33.3%, black 50%,
    white 50%, white 66.7%,
    black 66.7%, black 83.3%,
    white 83.3%, white 100%);
}

body {
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 66.7% 100%, 50% 66.7%, 33.3% 100%);
  background: linear-gradient(180deg,
    red 0%, red 16.7%,
    orange 16.7%, orange 33.3%,
    yellow 33.3%, yellow 50%,
    green 50%, green 66.7%,
    blue 66.7%, blue 83.3%,
    purple 83.3%, purple 100%);
  aspect-ratio: 7/4;
  margin: 0 auto;
}
</style>
```

An ally flag is a flag to show allyship with the LGBTQIA+ community. The colors in the middle are the normal rainbow flag colors, representing the LGBTQIA+ community itself. The black and white stripes on the outside represents me, as the normative, cis-gendered, heterosexual, embracing the rainbow flag in a hug, shaped like an "A" for "ally". In this implementation, the black and white stripes are the `background` of the `html` element, and the rainbow colors are the `background` or the `body` element, which has a `clip-path` to provide its shape.

{% codepen https://codepen.io/atornblad/pen/bGmqPNJ %}

As this year's LGBTQIA+ Pride Month is coming to an end, it provides an opportunity for introspection. As a cis-gendered, heterosexual, white man of privilege, it's important to me to reflect on my position in respect to the LGBTQIA+ community, particularly given the rising challenges faced by trans people.

I try to be an ally. I voice my support in LGBTQIA+ issues on social media, I go to Pride events, and I have a little "Ally Flag" sticker on my computer. It may not be much, and despite best intentions, I might stumble, but aiming to be an LGBTQIA+ ally is a journey of learning and engagement.

This month, the past year _(and years)_ have been transformative. Listening to narratives different from my own, unlearning subconscious biases, and engaging in conversations have all been part of my journey. This isn't for applause, but to help dismantle oppressive systems that benefit me, simply because of who I am.

Allyship isn't confined to a month; it's a call to action that requires empathy, patience, and humility. It's about trying to make the world a more inclusive space, one conversation, one unlearned bias at a time. As Pride Month ends, my commitment as an ally continues, promising to learn, grow, and stand firm with the LGBTQIA+ community.
#LearnedToday: padStart()
Tags: learnedtoday, javascript, webdev
Published: 2023-06-30 08:01:00

The `padStart()` method is a built-in function in JavaScript that allows you to pad a string with specific characters at the beginning of the string. 

I wish it had existed 15 years ago when I was working on a digital clock for a website. I would have written something like this:

```javascript
const hours = 3;
const minutes = 43;
const seconds = 9;

const time = [hours, minutes, seconds]
                  .map(el => String(el).padStart(2,'0'))
                  .join(":");

// time -> '03:43:09'
```

...and of course there is a sister method called `padEnd()`

🗄 Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

ℹ Browser support: https://caniuse.com/?search=padStart
What Are The Different Types Of Mobile Applications
Tags: mobiledevelopment, development, softwaredevelopment, design
Published: 2023-06-30 07:55:25



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

Many different [types of mobile applications](https://seattlesbest.software/types-of-mobile-applications/) are available, from social media apps to productivity tools to games. Mobile apps have become a vital part of our lives. We use them for everything from connecting with friends and family to shopping, banking, and entertainment. But with so many types of mobile applications available, it can be difficult to know which ones are right for you.

This blog post will discuss the different types of Mobile applications and help you choose the right ones for your needs.

**Types of Mobile Applications
**
Native Apps
Web Apps
Hybrid Apps

Native apps are built specifically for a mobile device’s operating system (OS). These types of mobile applications can take advantage of the device’s unique features and capabilities. For example, native iOS types of mobile apps can use the iPhone’s Touch ID sensor, while native Android types of mobile apps can use the Android’s notification system.

Web apps are accessed via a web browser on your mobile device. These types of mobile applications are typically built using HTML, CSS, and JavaScript. They can be accessed from any device with an internet connection.

Hybrid apps are a combination of native apps and web apps. These types of mobile applications are built using web technologies, but they are wrapped inside a native app shell. This gives them the look and feel of a native app, while still being able to access the web.
How to Automate Configurations for Chrome Extensions: Seeking Suggestions for Using JavaScript, Selenium, or Hammerspoon
Tags: help, selenium, chrome, hammerspoon
Published: 2023-06-30 07:32:37

In our modern world, it's easy to get sidetracked by online diversions. To combat this, I've been using a couple of Chrome extensions - [Video Speed Controller](https://github.com/igrigorik/videospeed) and [Vimium](https://github.com/philc/vimium) - to improve my productivity to do more important things, like watching cat videos. However, I find that manually configuring these extensions can be time-consuming.

To solve this, I'm working on a project to automate the process of opening the configuration page of these extensions and executing JavaScript to set their configurations. I've considered using AppleScript, but recent changes in Chrome's handling of JavaScript injection via AppleScript have made it less reliable.

I'm exploring alternatives like Selenium and Hammerspoon, but I'm not sure how to best use them.

Has anyone had experience with automating the configuration of Chrome extensions? Any insights, recommendations, or alternative tools would be greatly appreciated. Code examples or resources would also be helpful.
Exploring the Character Approach Method in System and Software Development
Tags: discuss, softwareengineering
Published: 2023-06-30 07:19:58

The character approach method is a concept that emphasizes the importance of understanding and incorporating human characteristics, behaviors, and needs into the design and development of systems and software. This discussion thread aims to delve into the merits and potential challenges of adopting the character approach method in system and software development. Join the conversation by sharing your thoughts and experiences on the following aspects:

## Understanding Users

- _How does the character approach method help in gaining a deeper understanding of the end-users?_
- _Have you seen instances where considering user characteristics has led to more intuitive and user-friendly systems or software?_ 

Share examples that highlight the impact of user-focused design.

## User-Centered Design

The character approach method advocates for placing the user at the center of the design process.

- _What techniques or methodologies have you found effective in implementing user-centered design?_
- _Are there any specific frameworks or principles you follow to ensure a user-centric approach?_

## Tailoring Experiences

By considering the characteristics and needs of different user personas, systems and software can be tailored to provide personalized experiences.

- _How have you witnessed this approach enhancing user satisfaction and engagement?_ 

Discuss the benefits and potential challenges in implementing personalized experiences.

## Ethical Considerations

In the character approach method, ethical considerations play a significant role.

- _How can incorporating ethical considerations into system and software development help create more responsible and inclusive products?
_
Share your thoughts on the importance of addressing ethical concerns when designing for human users.

## Limitations and Challenges

While the character approach method brings valuable insights, it may also present challenges. Discuss any limitations or difficulties you have encountered when adopting this approach.

- _How can these challenges be mitigated to ensure a successful implementation?_

## Collaboration and Feedback

Effective collaboration and continuous feedback from users are essential components of the character approach method.

- _How can developers and designers actively involve users throughout the development process?_

Share your experiences or strategies for fostering user collaboration and gathering feedback effectively.

Whether you have firsthand experience with the character approach method or are interested in its potential impact on system and software development, join the discussion to share your insights, perspectives, and success stories. Let's explore the value of integrating user characteristics into the design and development process to create more human-centered and impactful solutions.

Answer using the discussion format as follows, to make it easier for the reader to understand the context presented:

[CONTEXTUAL ASPECT]
YOUR RESPONSE
CORS(Complete-Guide)
Tags: cors, javascript, preflight, fetch
Published: 2023-06-30 07:13:41

> By default, browser follow same origin policy and it blocks all cross-origin communications. example if user is browsing on https://abc.com and wanted to load resources from https://xyz.com by default it is not allowed. This is browser’s same origin policy.

> Cross Origin Resource sharing or CORS is http header-based mechanism to communicate with different origins. 

> An origin is made up of PROTOCOL : DNS :PORT 

> If Protocol is different than origin is different . if DNS is different ,origin is different , if Port is different ,origin is different. Example
o	 http://abc.io & https://xyz.io are different origin.
o	 http://localhost:5000 and http://localhost:3000 are different origin.

> **Access-Control-Allow-Origin** :  if you set Access-Control-Allow-Origin header as *  all cross-origin communication is possible. But this is not recommended because of security reasons. Better to declare only origins which should be allowed to communicate in place of *. Example if a user is browsing on https://abc.com and wanted to load resources from https://xyz.com to enable cross origin communication ,declare   Access-Control-Allow-Origin : https://abc.com  on the server of https://xyz.com.

> **Preflight request** : Browser make an additional OPTIONS network call in case of PUT, DELTE, POST cross origin requests. This request is called preflight request.

> Preflight request will have **Access-Control-Request-Method** header. Example if http://abc.com wants to update data on http:// xyz.com . The preflight request will have **Access-Control-Request-Method : Put**

> Preflight response will have **Access-Control-Allow-Methods** header. It will have all the methods which are allowed.
 
![CORS preflight communication](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xydql0wen7ahfoih25i0.png)

> By default, cookies are blocked on browser . to make it work we need to set **Access-Control-Allow-Credentials** as **true** in response header.