teleren/devto huggingface dataset:
Setting Up HTML Live Preview in Visual Studio Code
Tags: webdev, beginners, vscode, programming
Published: 2023-09-03 14:37:10


With HTML Live Preview in Visual Studio Code, you can instantly visualize the impact of your code changes, making the development process faster and more efficient.

## Setting Up HTML Live Preview in Visual Studio Code

Now that you understand what **[HTML live preview](https://hmablogs.com/how-to-open-html-live-preview-in-visual-studio-code/)** is, let’s go through the steps to set it up in Visual Studio Code:

**Step 1: Install Visual Studio Code**
If you haven’t already, download and install Visual Studio Code from the official website. It’s available for Windows, macOS, and Linux.

**Step 2: Install the Live Server Extension**
To enable live preview, you’ll need to install the Live Server extension. Follow these simple steps:

Open Visual Studio Code.
Click on the Extensions icon in the sidebar (or press Ctrl+Shift+X).
Search for “Live Server” in the Extensions Marketplace.
Click the Install button next to the Live Server extension.
**Step 3: Open Your HTML File
Open your HTML file in Visual Studio Code.** 
You can do this by going to File > Open File and selecting your HTML file from your project directory.

**Step 4: Start the Live Server**
Once your HTML file is open, right-click anywhere in the file editor and select “Open with Live Server.” This will launch a development server and open your HTML file in your default web browser.

[**Click Here for complete Article**](https://hmablogs.com/how-to-open-html-live-preview-in-visual-studio-code/)

https://hmablogs.com/how-to-open-html-live-preview-in-visual-studio-code/
Jokeday Funday: Part 6 - More Programming Humor to Brighten Your Day
Tags: watercooler, jokes, programming, coding
Published: 2023-09-03 14:36:53

<h2>Jokeday Funday: Part 6 - More Programming Humor to Brighten Your Day</h2>
<p><strong>Joke 1: The Broken Monitor</strong></p>
<p>Why did the programmer go broke?</p>
<p>Because they used up all their cache and couldn't find their cache flow!</p>
<p><strong>Joke 2: The Time Traveler</strong></p>
<p>Why did the developer bring a ladder to the bar?</p>
<p>Because they wanted to reach the "root" beer on the top shelf!</p>
<p><strong>Joke 3: The Coding Detective</strong></p>
<p>Why did the programmer always carry a pencil and paper?</p>
<p>Because you never know when you'll need to draw a "byte" sketch of a suspect!</p>
<p><strong>Joke 4: The Bug Whispers</strong></p>
<p>Why did the developer become a gardener?</p>
<p>Because they had a talent for making bugs flourish!</p>
<p><strong>Joke 5: The Tech Support Hero</strong></p>
<p>Why did the tech support agent go to therapy?</p>
<p>Because they couldn't stop hearing voices saying, "Have you tried turning it off and on again?"</p>
<p><strong>Joke 6: The Password Blues</strong></p>
<p>Why did the password go to therapy?</p>
<p>Because it had too many issues to "hash" out!</p>
<p><strong>Joke 7: The Agile Athlete</strong></p>
<p>Why did the developer start running marathons?</p>
<p>Because they wanted to master the art of sprinting and releasing!</p>
<p><strong>Joke 8: The Code Poet</strong></p>
<p>Why did the developer start writing poetry?</p>
<p>Because they realized code comments could be a form of art!</p>
<p><strong>Joke 9: The Lost Pointer</strong></p>
<p>Why did the pointer go on vacation?</p>
<p>Because it needed to refresh its memory!</p>
<p><strong>Joke 10: The Debugging Zen</strong></p>
<p>Why did the programmer become a meditation guru?</p>
<p>Because they wanted to find inner peace and tranquility amidst runtime errors!</p>
<p><strong>Bonus Joke: The Coding Conductor</strong></p>
<p>Why did Soumya become a programmer?</p>
<p>Because he wanted to orchestrate the symphony of logic and create beautiful software symphonies!</p>
8 Essential Insights for Senior Software Engineering Success
Tags: softwareengineering, programming, career, computerscience
Published: 2023-09-03 14:36:42

_Co-authored by:_ @midanirachdi 

Over several years of experience in the IT industry, we have distilled our wisdom into a collection of essential insights. These invaluable nuggets of knowledge are designed to pave the way for your career progression toward becoming a distinguished Senior Software Engineer.

So without further ado, let's get started:

## 1) Experience
  - Typically 4-6+ years of experience in software development (varies depending on country/company size).
  - Deep understanding of programming languages, software design principles, and development methodologies.

##  2) Leadership
  - Mentor junior engineers.
  - Lead small teams or projects (limited to one project at a time).
  - Provide technical guidance (proof of concept, spikes etc..).

##  3) Problem Solving
  - Break down complex tasks while allocating the appropriate amount of time to each segment.
  - Enhance knowledge sharing by documenting the step-by-step solutions to a specific problem.

## 4) Coding and Development
  - Work on personal projects by using different technologies.
  - Use AI tools to speed up your workflow.

## 5) Collaboration
  - Keep conversations small and opt for calls instead of messaging.
  - Engage in peer coding sessions with fellow engineers to gain diverse perspectives and ideas.

## 6) Communication
  - Effectively communicate technical concepts by sharing positive and negative insights.
  - Communicate with both technical and non-technical stakeholders.

## 7) Continuous Learning
  - Stay up-to-date with industry trends and emerging technologies.
  - Invest in skill improvement through training and self-learning.

## 8) Document everything
  - Document repetitive day to day tasks and work on automating each one of them when it's doable.

**In summary,** the path to becoming a Senior Software Engineer entails honing experience, leadership, problem-solving, coding skills, collaboration, communication, continuous learning, and meticulous documentation. Embracing these principles fosters growth and excellence in navigating the complexities of the IT industry. With dedication and a commitment to lifelong learning, success in this role is achievable.

 [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/wadizaatour)
Free Platforms to Learn Coding
Tags: learning, coding
Published: 2023-09-03 14:24:44

Are you eager to start your coding journey without denting your budget? Dive right into the following platforms

- HTML: [https://html.com/](https://html.com/)
- CSS: [https://web.dev/learn/css/](https://web.dev/learn/css/)
- JavaScript: [https://javascript.info](https://javascript.info)
- React: [https://reactplay.io](https://reactplay.io)
- Vue.js: [https://learnvue.co](https://learnvue.co)
- Git: [https://git-scm.com/book/en/v2](https://git-scm.com/book/en/v2)
- Web3: [https://learnweb3.io](https://learnweb3.io)
- Python: [https://learnpython.org](https://learnpython.org)
- SQL: [https://www.w3schools.com/sql/](https://www.w3schools.com/sql/)
- BlockChain : [https://cryptozombies.io](https://cryptozombies.io)
- Nextjs: [https://nextjs.org/learn/foundations/about-nextjs](https://nextjs.org/learn/foundations/about-nextjs)
- AI: [https://www.elementsofai.com/](https://www.elementsofai.com/)
- ML: [https://www.freecodecamp.org/learn/machine-learning-with-python/](https://www.freecodecamp.org/learn/machine-learning-with-python/)
- PHP: [https://phptherightway.com](https://phptherightway.com)
- API: [https://rapidapi.com/learn](https://rapidapi.com/learn)
- GO: [https://learn-golang.org](https://learn-golang.org)
- Rust: [https://www.rust-lang.org/learn](https://www.rust-lang.org/learn)
Disable Annotations in Github Actions
Tags: githubactions, github, eslint
Published: 2023-09-03 14:22:21

Annotations are created when a problem matcher detects a match in the CI log. Problem matchers are enabled by default by some actions like

- [setup-node](https://github.com/actions/setup-node)
- [setup-go](https://github.com/actions/setup-go)
- [setup-java](https://github.com/actions/setup-java)
- [setup-python](https://github.com/actions/setup-python)
- [setup-dotnet](https://github.com/actions/setup-dotnet)

![Eslint Annotation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ilgeuaolrnbtcxe4obzt.png)

You can disable the annotations by executing the `remove-matcher` command.

## Eslint/Typescript (setup-node)

Add the following to your action after setup-node

**For eslint**

```yaml
- run: |
    echo "::remove-matcher owner=eslint-compact::"
    echo "::remove-matcher owner=eslint-stylish::"
```

**For Typescript**

```yaml
- run: |
    echo "::remove-matcher owner=tsc::"
```

That should do it.

You can read more about Adding/Removing problem matchers here. https://github.com/actions/toolkit/blob/master/docs/commands.md#problem-matchers

Related links:

- https://github.com/actions/toolkit/blob/master/docs/problem-matchers.md

---

## Bonus

[Action Eslint](https://github.com/sibiraj-s/action-eslint) is a Github Action that runs on the changed files in a PR.

```yaml
jobs:
  eslint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '18'
      - run: npm ci
      - uses: sibiraj-s/action-eslint@v1
        with:
          eslintArgs: '--ignore-path .gitignore --quiet'
          extensions: 'js, jsx, ts, tsx'
          annotations: true
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```

You can disable annotations by setting the input value to `false`.

---

## Disable Annotations for Other Actions

**Golang (setup-go)**

```yaml
- run: |
    echo "::remove-matcher owner=go::"
```

**Python (setup-python)**

```yaml
- run: |
    echo "::remove-matcher owner=python::"
```

**dotnet (setup-dotnet)**

```yaml
- run: |
    echo "::remove-matcher owner=csc::"
```

**java (setup-java)**

```yaml
- run: |
    echo "::remove-matcher owner=csc::"
```

Hope that helps.

Good day 👋
Some sort of Dynamics when it needs to use an Array on some Conditions
Published: 2023-09-03 14:16:04

let us take an instance like from a method we have an argument that passed into our class file ( .ts ) so that we need to check out a conditional checks if else block.

How about using object structure properties dynamically and calling the specified array or many array in usecases with object accessing by names conditionally.

Here goes a few lines of statements and methods.

below myCustomArrays used in two drop-down with multiselect checkboxes for a while.

1. Drop down have options like cities array
2. Drop down have options like states.

Consider sorting functionality to be developed hence using two different methods we can develop a resuable structure that could accommodated the sort functionality if any of the options checks it moved to top in the respective Drop downs and selected options from them.

1.myCustomArrays(selectedcitiesModel,'C')
2.myCustomArrays(selectedstatesModel,'s')

myCustomArrays(customArray, isFromWhere){
  let createDynamics ={
       ...cities,...states
          };
  let defineWhichArray =
   isFromwhere == 'C' ? 'cities':'states';
 
   createDynamics[defineWhichArray].sort( (eleA,eleB)={
       if(eleA == 
          selectedCitiesModel ) return -1;
if(eleB == 
          selectedCitiesModel ) return 1;
};

we can accommodate with any scenarios of our commitments to mostly write concise code.

1.as multiselect model which is binded to drop downs exhibits array you can loop over in above method to check with the required arrays for sorting them up.

The code above wrote in consideration of Angular 8+ and above.

By
Jay (FSE).
Happy Coding.
Great 👍 day Engineers.
How To Connect ChatGPT To The Internet?
Tags: chatgpt, freechatgpt, webchatgpt, mahseema
Published: 2023-09-03 14:02:26

[Using WebChatGPT To Connect ChatGPT To The Internet
](https://github.com/mahseema/connect-chatgpt-to-internet)

## FAQ

## Can you connect chatgpt (free version) to the internet?

If you're on a free account on ChatGPT, the responses you get won't include information from the internet. But you can use plugins like WebchatGPT to connect the free version of chatGPT to the Internet.

## Is chatgpt connected to the internet?

Indeed, ChatGPT offers internet connectivity! By subscribing to either ChatGPT Plus or ChatGPT Enterprise, users gain access to the GPT-4 model, equipped with web browsing capabilities. Also with this articles tutorials you can connect the free version of chatGPT to the Internet.

## Is chatgpt 4 connected to the internet?

Yes. With a paid subscription to ChatGPT Plus or ChatGPT Enterprise.
JavaScript Functions(Part 1): Your Magic Spells
Tags: javascript, webdev, beginners, programming
Published: 2023-09-03 14:01:34

🔮 **The Origin of Magic**

Every sorcerer's journey begins with understanding the source of their magic. In JavaScript Land, this magic finds its origins in functions. They are like the magic chants of old, waiting to be invoked, ready to perform wonders.

A function in JavaScript is a block of organized, reusable code that performs a single, specific task. Just as shouting "Alohomora!" in ancient magical tales would unlock doors, invoking a function in JavaScript sets into motion a series of events.

```jsx

function alohomora() {
    console.log("The door is now unlocked!");
}
```

Invoke this spell, and lo! The console shall proclaim that the door is unlocked.

📜 **Crafting Your Spells**

But magic is not just about chanting pre-existing spells. It's about crafting your own. In JavaScript, the spells grow in complexity and might as they adopt parameters – the magical ingredients that give a spell its unique character.

```jsx

function leviosa(object) {
    console.log(object + " is now levitating!");
}
```

Invoke this spell with **`leviosa('Feather');`**, and the feather shall rise, at least in the console of our magical tome. The 'Feather' is the ingredient, the parameter, giving context to our levitation spell.

✨ **Conclusion: The Foundations of Magic**

In the heart of JavaScript Land, functions form the cornerstone of magic. As you explore further, you'll discover that this is but the tip of the magical iceberg. Every spell you learn adds to your grimoire, expanding the horizons of what's possible.

But for now, master these basics, for every great sorcerer started with their first spell, and every legendary coder began with their first function.

**⚡ A Sorcerer's Homework: Craft Your Own Spells! ⚡**

Dear aspiring sorcerers, now that you've journeyed through the mystical lands of JavaScript and learned about functions, or as we like to call them, "spells", it's time for you to craft your own!

I challenge you to design your very own JavaScript spells based on the magical descriptions below. Once done, return to our magical gathering (this blog) and share your crafted spells in the comments for all sorcerers to see, admire, and learn from. Here are your challenges:

**1. Wingardium Leviosa!**

🔮 *Spell Description:* Makes objects levitate.

📜 *Your Task:* Construct a function that causes an element on the page to rise upwards.

**2. Petrificus Totalus!**

🔮 *Spell Description:* Temporarily paralyzes the target.

📜 *Your Task:* Design a function to freeze an animated element on the webpage.

Harness the magic, one function at a time! 🌟🔮📜
Who's here for probabilities via ML?
Tags: machinelearning
Published: 2023-09-03 13:51:10

**Disclaimer:** This isn't an exercise in preaching to the choir. If you're here for the buzzwords, the hype, the trendy applications of ML that surface on TechCrunch, you might find this piece unsettling. You have been warned.

It's high time we disentangle the hazy lingo and misguided excitement that has encapsulated the field of Machine Learning, particularly when it comes to probability. Far too many ML practitioners are immersed in a fascination for the tools and the low-hanging fruits they seem to offer, without a deep-rooted understanding of the underlying probability structures. It's as if we've all become the engineers of a high-speed train without paying much attention to the tracks on which it runs. The engine is irrelevant if the tracks lead off a _**cliff.**_

**Fat Tails and The Limits of Supervised Learning**
You must've encountered the doctrine of supervised learning where historical data, clean and preprocessed, serves as the Holy Grail. Stop right there. Are we not, like the turkey before Thanksgiving, falling into the narrative fallacy? The realm of probabilities often exhibits fat tails—rare but consequential events that standard models blithely ignore. What you don't know in ML is often far more crucial than what you do.

**The Ludic Fallacy and Reinforcement Learning**
The world is not a casino, yet there's a tendency to model it as one, especially in the gamified scenarios seen in reinforcement learning. Do the algorithms account for the complex, intricate interdependencies that govern real-world systems? Are we trapped in a ludic fallacy, mistaking the model for the territory?

**Black Swans in Neural Networks**
Imagine an architecture so complex that even its creators can barely explain the intricacies of its hidden layers. But when the Black Swan event occurs—an event that deviates beyond what is normally expected and is extremely difficult to predict—are these neural networks robust or merely fragile constructions waiting to implode?

**I seek to connect with those who understand or wish to explore these issues.** Those who don't just want to build models, but to deconstruct, stress-test, and reconstruct them with a keen understanding of probability and real-world dynamics. If you're out there, it's about time we moved from naive computation to computational wisdom.

**So, who's here for probabilities via ML?**
oh-ex-oh: automated 0x0.st uploading and file management
Tags: showdev, shell, bash, codenewbie
Published: 2023-09-03 13:41:20

[https://github.com/donnaken15/oh-ex-oh](https://github.com/donnaken15/oh-ex-oh)

As if just `curl -F'file=@mystupidfile.png' https://0x0.st` wasn't simple enough.

This is a basic singular shell script that can take one file as an argument and upload it. Woweee. But it can also save tokens given from the file hoster so you can set an expiry date or manually delete it at a later time after uploading.

This was kind of made to test my hand at full on shell scripting as well because half of the work in this is a custom config reader/writer, option parsing. I haven't tested this other thing yet, but I made it in a way for the host for uploads to be changeable so another 0x0 instance can be used.

Soon, I'll want to get an interface working for this but still in the terminal, and accepting piped input.

Made to be compatible with zsh, so not technically bash, trying for this to be as POSIX as I can without weird hacks.
Tested on Cygwin.

[Timelapse of code](https://twitter.com/ptr__WESLEY/status/1698321518286025078)

![Uploading random file (a clip from the Rymdreglage video 8-bit trip)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zstaqw7emstiok3ap7ww.png)
File uploaded in above example: https://0x0.st/HpwD.gif
(I'm able to reupload the file under the same link if the file stays the same)
UNVEILING #C0MM0NSIA
Tags: commons, commonsfinance, commonseconomies
Published: 2023-09-03 13:26:05

🌟 Witness the dawn of the #CommonsAge...unveiling [#C0MM0NSIA](https://lvpr.tv?v=dddabfcwtyrpzbxw)!

[#C0MM0NSIA](https://lvpr.tv?v=dddabfcwtyrpzbxw) rises as a Network Nation, weaving together the essence of Decentralized Society #DeSoc and Distributed Society #DisSoc.

This enchanting fusion comes alive through the vibrant fusion of Decentralized Autonomous Organization #DAO and Distributed Cooperative Organization #disCO, giving birth to the remarkable Distributed Commons Organization #DCO.

Embrace the future where #commons thrives!
JavaScript CONSTANTS
Tags: javascript, node, frontend, backend
Published: 2023-09-03 13:24:59

In JavaScript, most of developers are well-known with `const`. It declares block-scoped local variables which means the value of a constant can't be changed through reassignment using the [assignment operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment).

However, have you defined the constant properly and clearly?

## Naming Convention

According to [Airbnb Naming Uppercase](https://github.com/airbnb/javascript/#naming--uppercase), exported constants should follow `SCREAMING_SNAKE_CASE` format, but not for constants within a file.

```javascript
// Within a file
const helloWorldText = "Hello, World!"

// Exported constants
export const HELLO_WORLD_TEXT = "Hello, World!"
```

## Examples

The following are examples of all exported data type constants:

```javascript
// Number
const PI = 3.14159;

// String
const GREETING = "Hello, World!";

// Boolean
const IS_ACTIVE = true;

// Array
const COLORS = ["red", "green", "blue"];

// Object
const PERSON = {
    name: "John",
    age: 30
};

// RegExp
const EMAIL_PATTERN = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

// Null
const NO_VALUE = null;

// Undefined
const UNDEFINED_VALUE = undefined;

// Symbol
const UNIQUE_KEY = Symbol("unique");
```

## Other uses

Besides defining data types, `const` is widely used in various other contexts.

**a. Destructuring Arrays**

```javascript
const [a] = ["a"];
```

**b. Destructuring Arrays with Default Values**

```javascript
const [a = 0] = [];
```

**c. Destructuring Objects**

```javascript
const { a } = { a: "value" };
```

**d. Destructuring Objects with Default Values**

```javascript
const { a = "default" } = {};
```

**e. Global Constants**

```javascript
// Browser environment
window.GLOBAL_CONSTANT = "This is a global constant";

// Node.js environment
global.GLOBAL_CONSTANT = "This is a global constant";
```

**f. Environment Variables (Node.js)**

```javascript
const PORT = process.env.PORT || 3000;
```

**g. Template Literals with Constants**

```javascript
const name = "John";
const greeting = `Hello, ${name}!`;
```

**h. Rest Parameters in Functions**

```javascript
function sum(...numbers) {
    const result = numbers.reduce((acc, num) => acc + num, 0);
    return result;
}
```

**i. Destructuring Function Parameters**

```javascript
function printUser({ name, age }) {
    console.log(`Name: ${name}, Age: ${age}`);
}
```

**j. Class Constants**

```javascript
class Circle {
    constructor(radius) {
        this.radius = radius;
    }

    getArea() {
        const PI = 3.14159;
        return PI * this.radius * this.radius;
    }
}
```