teleren/devto huggingface dataset:
How to disable in-line style adding at runtime
Tags: angular
Published: 2023-11-24 11:48:05

Hello,

Today I have noticed that some in-line styles are being added to my angular page during runtime, specially angular material related styles. I wanted to include all those CSS in my style.css file instead. Is there a way to disable this in-line styling behaviour? Can someone please help me in this?

I have add the below options in my angular.json file, but still not working

"optimization": {
                "scripts": true,
                "styles": {
                  "inlineCritical": false
                },
                "fonts": false
              },

Kind regards,
Sibin
How to Open Visual Studio Code (Vs Code) Online in Browser
Tags: webdev, beginners, programming, productivity
Published: 2023-11-24 11:44:57

# How to Open Visual Studio Code in Your Browser

Are you tired of switching between your GitHub repository and your local development environment? Well, we have good news for you! In this article, we will show you how to open Visual Studio Code (VSC) in your browser online. This means that you can access VSC from any GitHub repository with just a click of a button.

So, let's get started!

[![how to open and use Vs code in browser Online](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ur1d9z9go9ltt8irarfq.jpg)](https://www.youtube.com/watch?v=i6t5mB7CVLA)

## Step 1: Navigate to Your GitHub Repository

First, open your preferred web browser and navigate to the GitHub repository you wish to work on. Once you're there, make sure you are logged in to your GitHub account.

## Step 2: Click the "Shift" Key + "." key 

Now comes the exciting part. Simply click on the "Shift" key, and voila! Visual Studio Code will open right there in your browser. It's as easy as that!

## Step 3: Enjoy the Full Online Experience

Once you have opened VSC in your browser, you will notice that it offers the same functionalities as the version installed on your MacBook or Windows system. You have all the familiar tools and features at your disposal.

You can select any term, utilize plugins, and customize your workspace according to your preferences. It's like having your local development environment available online.

## Bonus Tip: Explore the Mern-stack Open-Source 

In addition to VSC, we also want to introduce you to our open-source project called PCLM. This project is based on the powerful Merstag technology. We encourage you to take a look at PCLM and see if it resonates with your needs.

**Here  Github Repo :** [https://github.com/idurar/idurar-erp-crm](https://github.com/idurar/idurar-erp-crm)

[![Open Source ERP CRM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqrwd7j495tzd06h7sl0.png)](https://github.com/idurar/idurar-erp-crm)

We hope you find this guide helpful in leveraging the power of VSC in your browser. Give it a try and don't forget to share your feedback with us! Happy coding!
Difference Between onBlur vs onTouched
Tags: javascript, webdev, react, programming
Published: 2023-11-24 11:29:41

> Short Answer is:

**onBlur** is an event that occurs when a field loses focus, which _can be used to trigger validation at that moment._

**onTouched** is a state indicating whether a field has been interacted with and then left, _often used to control when to display validation messages._

> - What is onBlur?

**Definition and Triggering Event:**

onBlur is an event handler that is activated when an input field loses focus. This occurs when a user moves away from an input field after interacting with it.

**Use in Form Validation:**

It's commonly used in form validation to check a field's value against validation rules only when the user moves away from that field. This approach is less intrusive than validating every keystroke.

**Practical Application:**

This event is particularly useful when you want to validate a field after the user has finished entering data, avoiding constant validation during the typing process.

> - What is onTouched?

**Definition and Role in Validation Libraries:**

Unlike onBlur, onTouched is not an event but a state or property used in form validation libraries, like React Hook Form. It flags whether a user has interacted with a field.

**Functionality:**

A field is considered "touched" once the user has focused on it and then moved away. It's instrumental in determining when to display validation errors.

**Enhancing User Experience:**
onTouched improves user experience by delaying error messages until the field has been interacted with, preventing an overload of messages upon form load.

Understanding the roles and differences of onBlur and onTouched is vital in form design. While onBlur triggers validation when a field loses focus, onTouched indicates interaction with the field, helping in strategic display of validation messages. Together, they ensure a balance between providing immediate feedback and not overwhelming users with premature validation errors. Implementing these effectively can significantly enhance the user interaction and experience with your forms.

Both onBlur and onTouched are essential tools in a developer’s arsenal for creating responsive and user-friendly web forms. Knowing when and how to use them can make a substantial difference in how users perceive and interact with your web forms.
Excel Your Success with the Top Executive Coach in the UAE
Tags: businesscoach, careercounselling, careercoaching
Published: 2023-11-24 11:17:39

Experience unparalleled success with Binod Shankar, renowned as the best**[ executive coach](https://binodshankar.com/)** in the United Arab Emirates. As a distinguished business coach, Binod specializes in corporate training programs, offering expert guidance in executive coaching, leadership development, and career coaching. Unlock your full potential with personalized business coach training that encompasses career planning, corporate coaching, and executive leadership coaching.

Explore tailored career training programs designed to enhance your skills and propel your career forward. Binod Shankar's expertise extends to providing comprehensive **[business coaching services](https://binodshankar.com/executive-coaching/)**, including career development planning and executive career coaching. Discover the transformative impact of corporate coaching training, where strategic insights and personalized coaching converge to redefine your professional journey.

Binod Shankar is your trusted partner in corporate coaching, offering business coaching that goes beyond the ordinary. Benefit from career counseling that aligns with your aspirations, and tap into the wealth of experience that makes Binod the go-to executive coach in the UAE.

Invest in your success with Binod Shankar – your beacon in executive coaching, leadership development, and career planning. Embrace the journey of growth and achievement with the guidance of the best business coach in the UAE.
Fix fatal ambiguous argument 'HEAD^ in Zsh with HEAD^
Tags: zsh, troubleshoot, git, console
Published: 2023-11-24 11:11:57

When using `git reset HEAD^` in your Zsh terminal, you may receive this error "fatal: ambiguous argument 'HEAD^': unknown revision or path not in the working tree."

If you do, you will have to add `setopt NO_NOMATCH` in your `~/.zshrc` file to allow unmatched wildcard expressions. 

Open your `.zshrc`, then add the following
```bash
# Allow unmatched wildcard expressions in Zsh
setopt NO_NOMATCH
```

Then, just reload `.zshrc` by typing `source ~/.zshrc` in your terminal, and you shouldn't face any other issues when using `git reset HEAD^` with the caret `^` symbols.


Happy Coding 🤠 Enjoy 😊
Caffeine chemical formula using html css no image
Tags: freecodez, react, html, blog
Published: 2023-11-24 11:07:56

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**Caffeine chemical formula using html css no image**

![Caffeine chemical formula using html css no image](https://res.cloudinary.com/freecodez/image/upload/v1700824033/images/xgcdjvbeg2nh6lwa3lg0.webp)

For full source code visit : [https://freecodez.com/post/vty5w4p](https://freecodez.com/post/vty5w4p)


```
<!-- https://freecodez.com -->
<div class="component" role="img" aria-label="Caffeine chemical formula: "></div>
```

Source Code : [https://freecodez.com/post/vty5w4p](https://freecodez.com/post/vty5w4p)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
5 CSS Techniques Every Developer Should Master
Published: 2023-11-24 11:02:20

Cascading Style Sheets (CSS) play a pivotal role in web development, allowing developers to style and structure web content. Understanding key CSS features is fundamental for creating visually stunning and responsive websites. Let's explore five essential concepts along with additional insights and examples:


### 1. Using Variables

CSS Variables, also known as Custom Properties, offer a way to store and reuse values throughout a stylesheet. They enhance code consistency and make it easier to update multiple elements at once.

**Example:**
```css
/* Define variables */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

/* Use variables */
.element {
  color: var(--primary-color);
  background-color: var(--secondary-color);
}
```

### 2. Importance of `!important`

The `!important` declaration overrides other styles and gives precedence to a specific rule. However, it's essential to use it judiciously as it can lead to specificity conflicts.

**Example:**
```css
.element {
  color: red !important;
}
```


### 3. Utilizing Media Queries

Media queries enable the creation of responsive designs by applying styles based on device characteristics such as screen size, resolution, or orientation.

**Example:**
```css
/* Media query for smaller screens */
@media screen and (max-width: 768px) {
  .element {
    font-size: 14px;
  }
}
```


### 4. Implementing Animations

CSS Animations allow the creation of captivating visual effects and transitions. Keyframes define animation sequences for elements.

**Example:**
```css
/* Define animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Apply animation */
.element {
  animation: fadeIn 2s ease-in-out;
}
```


### 5. Understanding `@import`

The `@import` rule is used to import external style sheets into another style sheet, aiding in modularizing and organizing CSS code.

**Example:**
```css
/* Import an external stylesheet */
@import url('styles.css');
```


Mastering these CSS concepts empowers developers to create engaging and user-friendly web experiences. By combining these techniques with creativity and innovation, one can build aesthetically pleasing and functional websites.

Keep practicing and experimenting with CSS to enhance your web development skills and create remarkable web experiences!

Thank you for Reading!
Procrastination Trick - Create Large Pull Requests
Tags: engineering, codereview, programming
Published: 2023-11-24 10:50:17

I know this is an unpopular opinion: Large PRs are a good way to mask procrastination.


Change my mind. No seriously. I've yet to see a solid example of why bundling many changes in the same PR is a good thing; versus having those changes introduced in smaller PRs.


---



Is your team suffering from the "Large PRs" syndrome? In my opinion, large PRs are hurtful in many ways:


* Lower Code Quality: Due to the complexity and volume of changes in large PRs, there's a higher likelihood of compromising on code quality just to get the PR merged.
* Integration Issues: Large PRs often touch multiple parts of the system, which can lead to unexpected integration issues, especially if the changes aren’t properly isolated or modularized.
* Increased Merge Conflicts: The longer a PR remains open, the higher the chance of merge conflicts with other changes being merged into the same codebase. Resolving these conflicts can be time-consuming and error-prone.
* Knowledge Silos: When a single developer or a small group works on a large set of changes without regular integration, it can lead to knowledge silos, where only a few people understand certain parts of the codebase.
* Demotivation and Overwhelm: Reviewers might feel overwhelmed or demotivated by the sheer size of the PR, leading to less effective reviews or reluctance to review at all.
* Blocking Other Work: Large PRs can block other work from being merged, especially if they involve core parts of the system that other developers need to work on.
* Rollback Complexity: If a problem is discovered after merging a large PR, rolling back the changes can be complex and risky, especially if multiple features or fixes are entangled.
* Delaying user value: Large PRs delay delivering small increments of value to the end users, which is at the core of agile software development practices.
* Hiding procrastination: Lazy engineers can use large PRs to hide the actual time it took to work on individual parts of the code. Because it's so big, it's difficult to spot periods of procrastination somewhere in the middle. That's why - from an organization perspective - it's important to discourage large PRs.

---

What size are the Pull Requests in your organization? Can you relate to any of these?
Getting Started with the React Range Slider Component
Tags: webdev, react
Published: 2023-11-24 10:46:54

Learn how to create and configure the Syncfusion React Range Slider component in a React application using Visual Studio Code. The React Range Slider is an HTML5 input control that is used to select a value or range of values. You can select a relative quantity value by moving a thumb along a bar. 

The control has major and minor ticks, thumbs, and tooltips that can be fully customized. It can also be aligned horizontally or vertically. In this video, you will see how to add the Range Slider component to a React application with a few of its basic features like types, ticks, tooltips, format, and limits. I will also show you how to customize the range slider using CSS classes. 

The React Range Slider is a user interface component designed for React applications. It allows users to select a range of values by dragging the slider's handles. It is commonly used in scenarios where users need to set a range of values, such as selecting a price range or a date range. The range slider's appearance, behavior, and functionality can be customized to match the requirements of the application. 

This includes customizing the slider's appearance, orientation, step, and more. The range slider component provides built-in tooltip support, which displays the selected range values as users interact with the slider. Tooltips help provide real-time feedback to users. Add ticks and labels to the range slider to mark specific values or intervals. This is useful for showing predefined values or categories along the slider. 

The range slider offers a set of events that allows you to respond to user interactions, such as when the value changes or when the user releases a handle. It also has a comprehensive API for programmatic control and manipulation. 

**Tutorial video:** https://www.syncfusion.com/tutorial-videos

**Download the example from GitHub:** https://github.com/SyncfusionExamples/getting-started-with-the-react-range-slider-component

{% youtube B0rPxt5tOSE %}
Typescript Integrating Prettier VsCode
Tags: prettier, webdev, programming, typescript
Published: 2023-11-24 10:45:35

Run the following command in the terminal:

```js
npm install --save-dev prettier
```

```

// now a create a file of this=> .prettierrc.json
{
  "semi": false,
  "singleQuote": true

}
```

Next, we are going to start formatting our code using Prettier in the command line:

```js
npx prettier --write src/app.ts
# src/index.ts 37ms
```

// package.json

```js
{
  // ...
  "scripts": {
  // ...others code..
    "prettier": "prettier --ignore-path .gitignore --write \"./src/**/*.+(js|ts|json)\"",
  },
  // ...
}

```

```js
//to run prettier
npm run prettier

```

```
// settings.json =>tthis is vscode setting then paste
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  ...
}

```
=>install direct extesnion app

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

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

**Avoiding conflicts when working with ESLint and Prettier
**

```js
npm install --save-dev eslint-config-prettier
```

```
// .eslintrc
{
  // HERE and relace with previous estends
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
}

```

```
  "scripts": {
    "prettier": "prettier --ignore-path .gitignore --write \"./src/**/*.+(js|ts|json)\"",
    "prettier:fix": "npx prettier --write src",
  },

```

```
npm run prettier:fix
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uio9fqhl50spskj1tkwn.png)
Seeking Community Feedback for Open Source CI/CD Platform
Tags: opensource
Published: 2023-11-24 10:41:58

:rocket: **Hello everyone!**
 
We're excited to share **FusionHub**, our new open-source platform in its early development stages. FusionHub aims to offer a more integrated approach to managing CI/CD pipelines from GitHub, GitLab, and Jenkins.
 
:star2: **Key Features of FusionHub:**
- **Seamless Integration:** Currently compatible with GitHub, GitLab, and Jenkins. Plans are underway to include Google Cloud Build, Azure DevOps, and more, based on community demand.
- **Unified Pipeline View:** Manage multiple pipelines from different platforms in one dashboard. Start, retry, or stop pipelines directly within FusionHub.
- **Enhanced Customizable Parameters:** Extending the current functionality in GitHub and GitLab, FusionHub allows various types of parameters with dependencies among them, offering greater flexibility and control.
- **Role-Based Access Control:** Create and assign custom roles for different pipelines and users.
- **Pipeline Access Requests:** Allow users to formally request access to specific pipelines.
 
**Current Stage:**
We’re in the early stages of development and have implemented three authentication methods: Local, CAS, and AD. We're focusing on gathering community feedback to make FusionHub more robust and user-friendly.

:mag: **We Need Your Help!**
We're eager to have you try out FusionHub and hear what you think about it. Your honest opinions, ideas, or any helpful feedback would be incredibly valuable to us. We welcome all your thoughts and look forward to your input!
 
:point_right: Try FusionHub: [https://fusionhub.app](https://fusionhub.app)
:closed_lock_with_key: **Demo Credentials for Access:**
- **Admin User:**
- Email: admin@fusionhub.app
- Password: demo
 
- **Normal User:**
- Email: normal@fusionhub.app
- Password: demo
 
:pray: **Share Your Experience**
We invite you to use the demo credentials to explore our platform and share your feedback here in the comments or by dropping a mail at alex.krumov@alpha-devs.com. Your thoughts and suggestions are crucial for our improvement and growth.

 
Thank you for joining us on this journey! :star2:
Mastering Problem Solving in JavaScript
Tags: finance, webdev, javascript
Published: 2023-11-24 10:38:28

Introduction:
JavaScript, as the backbone of web development, empowers us to build dynamic and interactive applications. However, the journey to becoming a proficient JavaScript developer often involves mastering the art of problem-solving. In this article, we will explore effective strategies and techniques to tackle problems and enhance your problem-solving skills in JavaScript. [carx street apk](https://carxstreat.com/)

**1. Understand the Problem:
Before diving into code, ensure a solid understanding of the problem at hand. Break it down into smaller components and identify the input, output, and any edge cases. A clear understanding of the problem lays the foundation for an effective solution.

**2. Plan Your Approach:
Take a moment to plan your approach. Consider different algorithms and data structures that might be applicable. Pseudocode can be a helpful tool in outlining your solution before translating it into JavaScript.

**3. Use Built-in Methods:
JavaScript provides a rich set of built-in methods that can simplify complex operations. Familiarize yourself with array methods like map, filter, and reduce, as well as string methods like split, join, and substring. Leveraging these methods can lead to concise and efficient solutions.

**4. Optimize for Readability:
Clear, readable code is not only easier to debug but also enhances collaboration. Use meaningful variable names and break down complex operations into smaller, well-named functions. A well-structured codebase aids in understanding and maintaining your solutions.

**5. Handle Edge Cases:
Consider potential edge cases and handle them explicitly in your code. This includes scenarios where input might be unexpected, such as empty arrays or null values. Robust solutions account for a variety of inputs and provide meaningful outputs or error messages.

**6. Debugging Techniques:
When facing issues, leverage the debugging tools available in your browser or use console.log statements strategically. Understand the flow of your code and identify where unexpected behavior occurs. This iterative debugging process is a crucial aspect of problem-solving.

**7. Learn from Others:
Explore solutions to similar problems on coding platforms like GitHub, Stack Overflow, or other developer forums. Analyze different approaches and understand the reasoning behind them. Learning from others' experiences can broaden your problem-solving toolkit.

**8. Practice Regularly:
Problem-solving is a skill that improves with practice. Challenge yourself with coding exercises on platforms like LeetCode, HackerRank, or CodeSignal. Regular practice exposes you to a variety of problem types and hones your ability to devise efficient solutions.

Conclusion:
Bk8trangchu
Published: 2023-11-24 10:37:23

[BK8](https://bk8trangchu.com/) Trang Chủ - BK8 là địa điểm lớn nhất và duy nhất cho tất cả những người đam mê giải trí trực tuyến tại châu Á. Cung cấp truy cập vào hàng loạt các trò chơi trong Thể thao, Sòng bài trực tuyến, Slots và nhiều trò chơi khác.
Có trụ sở tại Malta, đội ngũ chuyên gia của chúng tôi trên toàn cầu cố gắng xây dựng một trang web giải trí tích hợp đầy đủ bằng công nghệ tiên tiến.
#bk8 #bk8trangchu #nhacaibk8 #bk8uytin #songbacbk8
Website: https://bk8trangchu.com/
Phone: 097292929
Mail: bk8trangchu@gmail.com
Địa chỉ: Triệu Xá 1, Đông Tiến, Đông Sơn, Thanh Hoá, Việt Nam

https://bk8trangchu.com/lien-he/
https://bk8trangchu.com/gioi-thieu/
https://bk8trangchu.com/chinh-sach-bao-mat/
https://bk8trangchu.com/dieu-khoan-su-dung/
https://bk8trangchu.com/chinh-sach-cookie/
https://bk8trangchu.com/choi-co-trach-nhiem/
https://bk8trangchu.com/huong-dan-dang-ky-bk8/
https://bk8trangchu.com/huong-dan-nap-tien-bk8/
https://bk8trangchu.com/huong-dan-dang-nhap-bk8/
https://bk8trangchu.com/huong-dan-rut-tien-bk8/
https://bk8trangchu.com/tai-app-bk8/
https://bk8trangchu.com/khuyen-mai-bk8/

Xem thêm:

https://www.youtube.com/channel/UCI9O_-BdYVxnKWulrl1cfoQ
https://twitter.com/Bk8trangchu
https://www.pinterest.com/bk8trangchu/
https://www.twitch.tv/bk8trangchu/about
https://social.msdn.microsoft.com/Profile/bk8trangchu
https://www.facebook.com/profile.php?id=61553889840129
https://500px.com/p/bk8trangchu?view=photos
https://www.flickr.com/people/199587246@N03/
https://gravatar.com/bk8trangchu
https://www.kickstarter.com/profile/178112513/about
Typescript ESLint rules Variables
Tags: webdev, javascript, eslint, typescript
Published: 2023-11-24 10:20:17

```js
    "rules": {
        "no-unused-vars": "error",
        "no-unused-expressions": "error",
        "prefer-const": "error",
        "no-console": "warn",
        "no-undefined": "error"
    },
```