teleren/devto huggingface dataset:
Switch LLMs Instantly, New Shortcuts and bug fixes — Griv
Tags: chatgpt, productivity, ai, macos
Published: 2024-02-05 22:40:20

[Griv](https://grivhq.com) 2.4.0 is out 🥳. Thank you all for your feedback. Keep it coming. Here is what’s new in this release

## 1. Switch LLM — Instantly ⚡️

In our latest release, we introduced a feature that lets you choose the LLM you prefer (GPT 3.5 or GPT 4). Some of you mentioned that having this switch easily accessible would be helpful, as you frequently switch between GPT 4 and GPT 3.5 to save costs. Well, the wait is over. In this latest release, you can switch the LLM with just one click (the button is located right next to the input box).

![Switch LLM Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9niy6jijq9zpo7oo1q57.png)

## 2. Shortcut List ⌨️

Griv is built for your keyboard. To explore the available shortcuts in Griv, we have included a convenient shortcut list accessible from the menu.

![Shortcut list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80w2e5zq2vof41o6umrd.png)

## 3. Shortcuts for ‘Settings’ ⚙️

We have added new shortcuts for easy navigation to the ‘Settings’ and ‘Chat’ sections.

Navigate to Settings: ⌘+, (Cmd + Comma)
Back from Settings to Chat: ⌘+[ (Cmd + Left Square Bracket)

## 4. Bug Fixes 🐞

- Sending the first message in a new conversation would crash the app at times.
- Http links wouldn’t open in the external browser.

Ready to unleash your productivity? Download Griv at [https://grivhq.com](https://grivhq.com).

In case you have any questions or feedback for us, do contact us at support@starlabs.ai.
Kafka
Tags: kafka, pipeline, jenkins, devops
Published: 2024-02-05 22:31:46

Kafka is an open-source distributed event streaming platform called "Apache Kafka."

**Apache Kafka:**
Apache Kafka is a distributed streaming platform designed for building real-time data pipelines and streaming applications. Developed by the Apache Software Foundation, Kafka is widely used for its durability, fault tolerance, and ability to handle high-throughput, real-time data streams.

Key features of Apache Kafka include:

1. **Publish-Subscribe Model:** Kafka follows a publish-subscribe model where producers publish messages to topics, and consumers subscribe to these topics to receive the messages.

2. **Scalability:** Kafka is horizontally scalable, allowing it to handle large amounts of data across multiple nodes.

3. **Durability:** Messages in Kafka are persisted, providing durability and fault tolerance even in the event of node failures.

4. **Real-time Processing:** Kafka supports real-time stream processing, enabling the development of applications that can react to data in real-time.

Organizations often use Apache Kafka for scenarios like log aggregation, event sourcing, and building data pipelines due to its reliability and scalability in handling high volumes of streaming data.
Issue Adding C3 Chart Into Component
Published: 2024-02-05 22:14:37

I have a react question. I am trying to add in a c3 chart using the docs found here: https://c3js.org/samples/chart_donut.html and I used someone with a similar problem on stack over flow here: https://stackoverflow.com/questions/51362924/c3-chart-not-rendering-in-react-project . My c3 pie chart is not rendering. I threw in some console logs but couldnt see any printed so I figured out that the chart is not initiating (even though I set up a const to initiate).  Any ideas?  Here is my use effect as well as where it is inside the return

`useEffect(() => {
    const initializeChart = () => {
      console.log("Initializing chart...");

      // Extract data from expenses for the initial chart
      const chartData = budget.expenses.map((expense) => [
        expense.name,
        expense.amount,
      ]);

      console.log("Chart data:", chartData);

      const newChart = c3.generate({
        bindto: '#chart', // Specify the element where the chart will be rendered
        data: {
          columns: chartData,
          type: 'donut',
          onclick: function (d, i) {
            console.log('onclick', d, i);
          },
          onmouseover: function (d, i) {
            console.log('onmouseover', d, i);
          },
          onmouseout: function (d, i) {
            console.log('onmouseout', d, i);
          },
        },
        donut: {
          title: 'Expenses Distribution',
        },
      });

      console.log("Chart initialized:", newChart);

      // Unload some data after another delay (2500 milliseconds in this example)
      setTimeout(() => {
        const idsToUnload = budget.expenses.slice(0, 2).map((expense) => expense.id);
        newChart.unload({
          ids: idsToUnload,
        });
        console.log("Data unloaded from chart:", idsToUnload);
      }, 2500);

      setChart(newChart); // Set the chart instance in the state
    };`       


And this is the part thats within my return

`{budget.expenses && budget.expenses.length > 0 ? (
      <div className="grid-md">
        <h2>
          <span className="accent">{budget.name}</span> Expenses
        </h2>
        {chart && <div id="chart">{chart}</div>}
        <Table expenses={budget.expenses} showBudget={false} />
      </div>`
The History of the iGaming Business: From Humble Beginnings to Global Prosperity
Published: 2024-02-05 22:10:29



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

The online gaming industry, often referred to as iGaming, is a captivating sector that has undergone a long and fascinating journey since its inception. In this article, we'll explore the key stages in the history of the iGaming business, starting from its early steps and ending with its current state of global prosperity.

**1. Emergence of the First Online Casinos**

The era of iGaming began in the early 1990s with the emergence of the first online casinos. In 1994, Antigua and Barbuda became the first countries to grant licenses for online gambling businesses. Microgaming, one of the leading casino software developers, launched the first online casino, marking a significant milestone in the history of iGaming.

**2. Technological Advancements and Mobile Gaming Experience**

With the advancement of internet technologies and mobile devices, the iGaming business rapidly evolved. Online casinos and sports betting platforms became more accessible to a wide audience, leading to the growth in popularity of this industry.

**3. Regulation and Legislation**

In recent decades, many countries have introduced regulation and legislation related to online gambling. This has created a more stable and secure environment for players and online casino operators, contributing to the growth of the industry.

**4. Global Expansion and Popularity**

Today, the iGaming business has become a global phenomenon, attracting millions of players from around the world. Major gambling operators offer a wide range of games and sports betting options, as well as innovative features and bonus programs to cater to a diverse audience.

**5. The Future of the iGaming Business**

With the constant development of technologies, including virtual reality and artificial intelligence, the future of the iGaming business promises to be exciting. Operators will continue to innovate to offer players new and exciting gaming experiences, while regulatory bodies will strive to create a safer and more responsible gaming environment.

In conclusion, the history of the iGaming business is a fascinating journey from its humble beginnings to today's global prosperity. With ongoing technological advancements and growing interest from players, this industry will continue to attract attention and remain one of the most dynamic and promising entertainment sectors.




_Source: https://www.parimatch2023.com_
Troubleshooting: Deno Extension Activation in VSCode with Monorepo Environments
Tags: deno, vscode, formatter, javascript
Published: 2024-02-05 22:07:40

## Troubleshooting Deno Extension Activation in VSCode

I faced an issue when enabling the Deno extension in VSCode and I decided to take notes for future reference.

### Enabling Deno Extension

To enable the [Deno extension](https://docs.deno.com/runtime/manual/references/vscode_deno/)  in VSCode, you need to place `.vscode/settings.json` in the workspace root.

The contents of `settings.json` are as follows:

```json
{
  "deno.enable": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "denoland.vscode-deno"
}
```

### Issue in Monorepo Environment

In a monorepo environment, placing the `project-root` directory in the workspace root will not work as expected.

```shell
project-root/
    -- backend/
        -- .vscode/
            -- settings.json
    -- frontend/
```

Conversely, placing `settings.json` in a subdirectory of `project-root` will activate the Deno formatter in the frontend directory as well:

```shell
project-root/
    -- .vscode/
        -- settings.json
    -- backend/
    -- frontend/
```

However, adding `.vscode/setting.json` to overwrite settings didn't work, still causing activation in the frontend directory.

```shell
project-root/
 	-- .vscode/
  		-- settings.json
 	-- backend/
 	-- frontend/
 		-- .vscode/
     		-- settings.json
```

```settings.json
{
  "deno.enable": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
```

### Solution 1: Configure `deno.enablePaths` in `settings.json` in the project root

This solution seems to be more appropriate since it's mentioned in [the official article](https://docs.deno.com/runtime/manual/references/vscode_deno/)

The directory structure is;
```shell
project-root/
 	-- .vscode/
  		-- settings.json
 	-- backend/
 	-- frontend/
```

And the contents of `setting.json ` is here;
```settings.json
{
  "deno.enable": true,
  "deno.enablePaths": [
    "./backend"
  ],
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "denoland.vscode-deno"
}
```

This enables Deno extension only in the backend directory.

### Solution 2: Open VSCode workspace with the backend directory as the root

Only "Solution 1" is enough for this troubleshooting but I want to leave a trail of things I've tried. That's why I'll write down this solution 2 so you probably don't have to look through this one.

By placing `settings.json` in a subdirectory of the backend directory and opening the VSCode workspace with the backend directory as the root, it will work properly:

```shell
// move to the backend directory from project root
$ cd backend

// open the VScode workspace
$ code .
```

The directory structure would be like this.

```shell
-- backend/
    -- .vscode/
        -- settings.json
```

The frontend directory needs to be developed separately in VSCode as a separate workspace.
SwiftLint disable
Published: 2024-02-05 21:34:44

I got 97 warnings from SwiftLint when I build the app, most of which are easy to fix, but there are a few that are hard to kill.

Swiftlint disable to the rescue!

For example: 

```
// swiftlint: disable type_name
// swiftlint: disable line_length
// swiftlint: disable comma
```
git set up to track remote branch
Tags: git
Published: 2024-02-05 21:30:54

I create a new branch locally, commit the code, now would like to push it to origin and track remote branch with the same name.

Example

create and check out new local branch called dev

```
git co -b dev

```

set up to track remote branch 'dev' from 'origin'
```
git push -u origin dev
```

`git co` is my alias for commit.
The Best Neural Networks for Validating Page Code
Published: 2024-02-05 21:04:16

In the fast-paced world of web development, ensuring the integrity of your website's code is paramount. Validation of page code helps guarantee a seamless user experience and optimal performance. As technology evolves, neural networks have emerged as powerful tools for automating this validation process. I've made some research of the best neural networks designed to validate page code, with a special focus on how they contribute to the success of my website [https://www.casacomunelaudatoqui.org/](https://www.casacomunelaudatoqui.org/). 

The Importance of Code Validation
Code validation involves checking if a webpage's code complies with industry standards and best practices. As websites grow in complexity, manual code validation becomes a daunting task. Neural networks, with their ability to learn patterns and make predictions, have proven to be valuable assets in automating this process.

Neural Networks in Code Validation
1. HTML Validators:
HTML is the backbone of web pages, and errors in HTML code can lead to rendering issues. Neural networks like Tensorflow and PyTorch are utilized to create models that analyze HTML code, identifying syntax errors, missing tags, or incorrect attributes. These models can learn from large datasets of valid HTML and efficiently validate the code of a webpage.

2. CSS Linters:
CSS is responsible for styling web content, and errors in stylesheets can result in inconsistent layouts. Neural networks like Keras and FastAI can be trained to recognize patterns in CSS code, ensuring proper styling and layout consistency. These networks can identify unused styles, missing declarations, or conflicting styles that might impact the visual presentation of a webpage.

3. JavaScript Validators:
JavaScript adds interactivity to web pages, and errors in JavaScript code can lead to broken functionalities. Neural networks, such as TensorFlow.js, are applied to assess JavaScript code quality. These models can identify potential issues such as undefined variables, syntax errors, or inefficient code, ensuring smooth functionality.


Leveraging the power of neural networks for code validation enhances the overall quality and reliability of a website. By automating the detection of errors in HTML, CSS, and JavaScript, developers can save their time and money!
Observability for DevOps and SREs - free certificate course on Feb 8th
Tags: devops, sitereliabilityengineering, sre, observe
Published: 2024-02-05 20:57:33

Join Mike West, Solutions Engineer, and Kyle Champlin, Product Manager, for a hands-on observability workshop for DevOps, SREs and Platform Engineering teams. Walk away from this free, 2-hour session with an Observability certificate to add to your LinkedIn profile, plus high-value knowledge on how to:

- Build dashboards from logs, metrics and traces
- Graphlink directly from a set of unhealthy pods to the Github commit
- Use O11Y GPT for a Regex extract to parse a Nginx log
- Use schema-on-demand to extract values into columns on the fly
- Set up alerts that show customers impacted, then use schema on demand to pull in the technical owner.

Details:
February 8 @ 3 pm PT
[Register here](https://view.observeinc.com/devops-sre-observability-workshop/?utm_campaign=we2401-0009-Observability-Workshop&utm_medium=paid&utm_source=dev&utm_content=sponsoredpost)
Best Time to Buy and Sell Stock - Leetcode 121 - TypeScript
Tags: typescript, leetcode, algorithms, dsa
Published: 2024-02-05 20:47:51

Here's the Leetcode 121 solution using TypeScript.

[Watch on Youtube](https://youtu.be/nMpwYY-EqYU?si=M4b-GhXIS2UzJ_Nj)

## Leetcode 121 - [Best Time to Buy and Sell Stock](https://leetcode.com/problems/best-time-to-buy-and-sell-stock/description/):

You are given an array prices where `prices[i]` is the price of a given stock on the `i`th day.

You want to maximize your profit by choosing a single day to buy one stock and choosing a different day in the future to sell that stock.

Return the maximum profit you can achieve from this transaction. If you cannot achieve any profit, return `0`.

## Approach

The goal is to find the maximum profit that you can obtain by buying and selling a stock given it's prices over time. 

You can use a simple one-pass algorithm with two pointers, `l` and `r`, and track the buying and selling days.

Initialize `l` and `r` to the first and second days, respectively. 

Then iterate through the array using a `while` loop. 

In each iteration, check if the price on day `l` is less than the price on day `r`. If true, calculate the profit by subtracting the buying price (`prices[l]`) from the selling price (`prices[r]`) and update the maximum profit (`max`) only if the calculated profit is greater than the current maximum.

On the other hand, if the buying price is not less than the selling price, it means a better buying opportunity is found, so move the `l` pointer to the current selling day (`r`). This way you can ensure that the algorithm always looks for the lowest buying price before searching for a selling opportunity.

The final result is the maximum profit obtained by buying and selling the stock.


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

[View on Excalidraw](https://excalidraw.com/#json=ZRKj1Q4wJ1CUDfhHxaij6,AZ4A6hX7Yjf-2yNdTlyYlQ)

## Code Implementation

```TypeScript
function maxProfit(prices: number[]): number {
  let l = 0
  let r = 1
  let max = 0

  while (r < prices.length) {
    if (prices[l] < prices[r]) {
      const profit = prices[r] - prices[l]
      max = Math.max(profit, max)
    } else l = r

    r++
  }

  return max
}
```

## Time Complexity

The time complexity is `O(n)`, where `n` is the length of the input array `prices`. The algorithm iterates through the array once, and each iteration involves constant-time operations.

## Space Complexity

The space complexity is `O(1)` or constant. The algorithm uses only a constant amount of extra space for variables like `l`, `r`, `max`, and `profit`. 

It doesn't require additional memory that grows with the size of the input array.
Hiring Bazel Engineers
Tags: career, programming, productivity, bazel
Published: 2024-02-05 20:39:11

Hello there! Modus Create is looking for Bazel Engineers to join our team! This is a remote position from anywhere in Europe. (+5 years of experience in functional programming required) 
If you want to learn more or apply please visit the following link: 

**Bazel Engineer**
https://grnh.se/1676d2543us
Why you should avoid Percentile 99th for your users
Tags: programming, devops, backend, beginners
Published: 2024-02-05 20:29:17

The 99th percentile is the highest percentile you can get. It means you are among the top scorers since you scored higher than 99% of the group who took the test. Only 1 in 100 the group scores in this range, so it places you at the very top of the pool.

Most of us want to be in the 1% percent that scored the highest. We want to be the top earners, performers, the fastest, the fittest, and generally the best in our crafts.

However, in application performance metrics, the users in the 99th percentile have the highest latency score (or response time, first contentfull paint, etc.…). Therefore, they had the worst experience in the measured period.

## Why you should care?

You probably think, okay, it's only 1% who experience some shitty performance. Why should I care about 1%?

- The 1% percent could happen where your system doesn't scale, for example, when working on too much data - which usually occurs for the top clients.

- The 1% can be the edge cases when one user's action might affect other users' experience when the system runs on shared resources.
- The 1% percent could lead your way through capacity planning. By analyzing this metric, you can determine the level of infrastructure, compute power, or database capacity needed to handle the occasional high-latency requests without sacrificing overall performance.
- Outliers can skew the mean score. Removing them can give a more accurate representation of the average user experience.

---

Monitoring this metric is only the first step; the next step is finding the root cause of the score and fixing it for good. But it is only sometimes straightforward. 

In my newsletter ["Percentile 99th"](https://percentile99th.substack.com/), I'll cover, every other week, the principles, how-to's, and deep dive analysis into different technologies, including real-life examples from my experience and top companies, to help you decrease the percentile 99th metric and help you become the top 1% percent of engineers who knows to improve the system to work like magic (and design new systems better), a real performance speedster.

See you there, at [Percentile 99th](https://percentile99th.substack.com/)
Episode 24/05: Q&A with Mark & Jeremy, Nx 18, TypeScript 5.4
Tags: webdev, javascript, programming, angular
Published: 2024-02-05 20:18:34

Jeremy and Mark from the Angular Team were quite busy answering questions. Nx 18 arrived with its new Project Crystal, and TypeScript 5.4 is also on the horizon.

{% embed https://youtu.be/zIYIyhu6S_w %}

## Q&A with Mark & Jeremy

The monthly Q&A session with Mark & Jeremy took place. This time, Jeremy had the passive role of not writing code and used this opportunity to answer many questions.

The Angular team is moving more and more parts of their API to Signals. Upcoming features are the queries for ViewChildren and ContentChildren. They will return a Signal in one of the upcoming versions.

There is still some misunderstanding in terms of testing tools. Jasmine is not the same as Karma. Web Test Runner will replace Karma. Jasmine gets active maintenance and will stay.


According to Jeremy, communication skills are very underrated, especially technical writing. Improving that definitely pays off. A short and free course is available on Google: 
{% embed https://developers.google.com/tech-writing %}


{% embed https://www.youtube.com/watch?v=GicfqGvwQsU %}

## Nx 18

Nx, an alternative to the Angular CLI, released its new major version, 18. It comes with Project Crystal, which is also known as task inferring.


That means if a plugin detects a certain configuration file from a tool that the plugin knows, then it will automatically register the appropriate Nx tasks.


For more information, a launch event lasts half a day on Thursday this week.

{% embed https://youtu.be/wADNsVItnsM?si=D0NaVBeIV7PWUCLb %}


https://github.com/nrwl/nx/releases/tag/18.0.0

{% embed https://nx.dev/concepts/inferred-tasks %}

## TypeScript 5.4 Beta

TypeScript 5.4 was released in a beta version, which traditionally contains all the major features already. With NoInfer, we get a new utility type, which is useful for generic types and allows us to define those places where type inference should happen and where not.

{% embed https://devblogs.microsoft.com/typescript/announcing-typescript-5-4-beta/ %}
Single Responsibility Principle
Tags: computerscience, beginners, solidprinciples, programming
Published: 2024-02-05 20:12:04

_Scene-0_: In a restaurant customer orders meatballs. Chef Carlos chopped and baked the meat, onward that he fried the meat and served that.

_Scene-1_: Likewise, the same customer orders meatballs again, and this time, Chef Carlos chops the meat, Chef Steve bakes and fries, and waiter Alex serves the dish.

Considering these two scenarios, `scene-1` has much better work efficiency than `scene-0`. This `scene-1` is optimized by following **SRP** principle. It has three people for different tasks to be the work done.



---

SRP, aka single-responsibility-principle dictates that a class should have a single responsibility, ensuring modular and maintainable software design.

## 1. FileHandler Class:


```python
class FileHandler:
    def read_file(self, filename):  # Responsibility: File reading
        # Code to read file content

    def write_file(self, filename, content):  # Responsibility: File writing
        # Code to write content to a file

```

## 2. Employee Class:

```python
class Employee:
    def calculate_salary(self):  # Responsibility: Salary calculation
        # Code to calculate salary

    def generate_pay_slip(self):  # Responsibility: Pay slip generation
        # Code to generate pay slip

```
Each class has a clear and distinct responsibility in these examples, adhering to the Single Responsibility Principle. The `FileHandler class` focuses on file-related operations, while the `Employee class` has separate methods for salary calculation and pay slip generation.