teleren/devto huggingface dataset:
Chrome Built-in AI Doesn't Require The Internet
Tags: llm, javascript, chrome, ai
Published: 2024-07-03 04:47:58

I tried out the Built-in AI that apparently works on Chrome Dev or Canary v127+.
https://developer.chrome.com/docs/ai/built-in


{% twitter 1807976909847818477 %}

### Enable the flag
chrome://flags/
Prompt API for Gemini Nano: enable
Enables optimization guide on device: enable BypassPrefRequirements
![flags](https://storage.googleapis.com/zenn-user-upload/22bd60f9485a-20240702.png)


### Download the model
chrome://components/
After enabling the above flags and restarting the browser, you can access the components and download the model.
![before download](https://storage.googleapis.com/zenn-user-upload/2f6c148ce377-20240702.png)

The model download itself takes a bit of time. (It took about 1-2 minutes for me.)

![after download](https://storage.googleapis.com/zenn-user-upload/4894fc2cc7af-20240702.png)


Try it from the console.

```js
jsCopywindow.ai
const ts = ai.createTextSession()
const gemi = await ts
const output = gemi.prompt('can you tell me the capital of Japan?')
```

output  
![output](https://storage.googleapis.com/zenn-user-upload/0ca889141cb0-20240702.png)

also, it worked as expected in Japanese
![japanese](https://storage.googleapis.com/zenn-user-upload/c12c69356c11-20240702.png)
InspNote - AI Assistant for Transforming Fleeting Ideas into Structured Content
Published: 2024-07-03 04:43:51

Have you ever experienced moments like these?

- A brilliant idea strikes in the shower, but it's gone by the time you dry off
- Inspiration hits while driving, but you can't safely record it
- You wake up with an amazing concept, but don't want to fully wake up to write it down

If you're nodding, InspNote is the perfect tool for you.

🎙️ **One-Click Recording, Instant Capture**
Simply tap the record button to voice your ideas. No typing, no searching for pen and paper. It's that simple.

🤖 **AI Assistant, Smart Processing**
Our AI immediately processes your recording, extracting key points and generating various content formats based on your choice:
- ✅ To-do lists: Transform ideas into actionable tasks
- 📝 Blog posts: Expand your thoughts into full-fledged articles
- 🐦 Tweets: Compress core ideas for social media sharing
- 📧 Emails: Turn inspirations into professional email content

🔒 **Privacy First**
We understand the value of your ideas. Your audio is not stored, ensuring your thoughts remain secure.

🔄 **Multiple Version Generation**
For each idea, AI can generate multiple versions of content. Pick the one that best fits your style, or mix and match to create the perfect expression.

🎯 **Key Point Extraction**
AI automatically highlights the core concepts in your ideas, ensuring no important detail is lost in processing.

💡 **Why Choose InspNote?**
1. Save time: No need to manually organize ideas, let AI assist you
2. Boost creativity: Knowing every idea will be captured, you'll think more freely
3. Increase efficiency: Quickly turn inspirations into executable plans or content
4. Anytime, anywhere: Record ideas whenever and wherever inspiration strikes
5. Privacy-focused: Your ideas belong only to you

🚀 **Get Started Now**
Try InspNote today! Let's ensure no good idea is forgotten or buried.

https://inspnote.com?utm_source=devto
100 free web tools you should build today
Tags: webdev, javascript, programming, beginners
Published: 2024-07-03 04:43:14

[Niche Tools](https://www.nichetools.net/) is a database of web tools you can build and scale your existing company OR build a standalone product from the data. 

I have spent years searching the web for an idea when in reality it was right in front of me. Now I help others build awesome stuff on the internet. 

Make sure to check out the [100 Free Keywords](https://nichetools.net/100-free-keywords) and start building!
Kazi Byte: Empowering Digital Solutions for a Connected World.
Tags: softwareengineering, programming, productivity, security
Published: 2024-07-03 04:36:28

Kazibyte is Founded in 2022 by Zobaidul Kazi, a Full Stack Developer with a passion for technology, Kazi Byet is a software development company committed to delivering excellent results for clients. We are a young team that embraces challenges, seeks growth opportunities, and prioritizes customer satisfaction. Our mission is to provide flexible and cost-effective software solutions tailored to meet individual needs. We value continuous learning, take on diverse projects, and offer innovative solutions to clients. Whether you're a startup or an established enterprise, our developers are ready to assist you with technical questions and transparent communication.

We believe in the joy of the development journey, holding steadfast to our core values of learning and patience. Our team stays up-to-date with industry trends to deliver contemporary solutions. At Kazi Byte, we cherish patience, attention to detail, and enthusiasm in every project we undertake. Let us accompany you on your journey to success. Explore our services, meet our consultants, and experience the Kazi Byte difference. Contact us today and embark on this exciting adventure!
Demystifying the Ellipsis (...): Spread Operator vs Rest Operator in JavaScript
Tags: javascript, es6, webdev, beginners
Published: 2024-07-03 04:35:47

The ellipsis `(...)` in JavaScript might seem like a simple punctuation mark, but it unlocks two powerful operators: the Spread Operator and the Rest Operator. Both utilize the ellipsis but serve distinct purposes. Let's delve into their functionalities and explore how they can elevate your code!

**1. Spread Operator `(...)`: The Art of Scattering**

Imagine you have an array of tasty ingredients and want to share them across multiple recipes. The Spread Operator allows you to unpack the elements of an iterable (like arrays, strings, or objects) and scatter them into individual elements within another expression.

**Common Use Cases:**

Merging Arrays:

```javascript
const fruits = ['apple', 'banana'];
const vegetables = ['carrot', 'potato'];
const allIngredients = [...fruits, ...vegetables]; // allIngredients = ['apple', 'banana', 'carrot', 'potato']

```
Copying Arrays (to avoid accidental modification):

```javascript
const originalArray = [1, 2, 3];
const copyArray = [...originalArray]; // copyArray = [1, 2, 3] (independent copy)

```
Spreading Function Arguments:

```javascript
function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
const result = sum(...numbers); // result = 6 (spreads numbers array as individual arguments)

```

**2. Rest Operator `(...)`: The Art of Gathering**

Think of the Rest Operator as the opposite of the Spread Operator. It gathers the remaining elements from an iterable into a single array. Imagine collecting leftover ingredients after preparing a dish.

**Common Use Cases:**
Creating Functions with Variable Arguments:

```javascript
function logNumbers(...numbers) {
  console.log(numbers); // logs all passed arguments as an array
}

logNumbers(1, 2, 3, 4); // logs [1, 2, 3, 4]

```
Destructuring Arrays:

```javascript
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4] (rest captures remaining elements)

```

**Choosing the Operator:**

The choice between Spread and Rest depends on your intention. Use Spread to unpack iterables and distribute elements, while Rest gathers the remaining elements into a single array.

_**Remember, the Spread Operator can also be used to spread object properties when creating new objects or merging existing ones.**_

**Embrace the Ellipsis!**

By mastering the Spread and Rest Operators, you'll enhance your ability to manipulate data structures, write concise code, and improve code readability. So, the next time you encounter the ellipsis (...), wield its power with confidence!
Graphql Fundamental
Tags: graphql
Published: 2024-07-03 04:07:28

GraphQL provides a complete and understandable description of the API, including both "API endpoints" and response data schema.

It empowers clients to request exactly what they need, ensuring that the server returns only the requested fields instead of a fixed response schema in RESTful API.

To do that, GraphQL declares a schema that includes types, queries, mutations,...

## Schema
A schema will look like this
```graphql
type Author {
    id: ID
    name: String
    books: [Book!]
}

type Book {
    id: ID
    author: [Author!]
}

type Query {
    getBooks: [Book!]
    getBook(id: ID): Book
}

type Mutation {
  addBook(name: String, author_id: String): Book
}
```

## Client request
Graphql uses POST method to communicate between client and server.

A request body looks like this

```json
{
  "query": "query whatever_name {\n  getBooks {\n    name\n  }\n  \n  getBook(1) {\n    name\n  }\n}",
  "variables": {}
}
```

Output will look like
```json
{
  "data": {
    "getBooks": [
      {
        "name": "Hello world"
      }
    ],
    "getBook": {
      "name": "Hello 1"
    }
  }
}
```

### Query
Let's zoom in on to the `query` field:

```graphql
query whatever_name {
  getBooks {
    name
  }
  
  getBook(1) {
    name
  }
}
```

A request can call more than one query. To make it easier to imagine, with GraphQL, you can call multiple RESTful APIs in one request. As you can see, the response will consist of corresponding responses in a key-value format, with the key being the query name and the value being the response data.

## Variable
For reusability, a query can declare dynamic arguments and then inject the values by declaring variables in the request body.

Let's rewrite the query above appling dynamic arguments:
```graphql
query whatever_name($id: String) {
  getBooks {
    name
  }
  
  getBook($id) {
    name
  }
}
```


Request body:
```json
{
  "query": "query whatever_name($id: String) {\n  getBooks {\n    name\n  }\n  \n  getBook($id) {\n    name\n  }\n},
  "variables": { "id": 1 }
}
```

### Explore a Graphql Endpoint
You can request the following query to receive types of any Graphql. 

_(I extracted it from Postman)_

https://gist.github.com/huantt/3d8db80c878082e1237ab531a8e7ee26
when i was fix the tag i was have loss google toporanking
Published: 2024-07-03 03:49:42

how to created the SEO Code 
the SEO Optimize i was just input Head but the content less 1000 word  the Google seacrh only index little word 
How i will to fix that 

visit mysite 
with Keyword [รับทำ SEO](https://www.allconnective.com/) [บริษัททำSEO ](https://www.allconnective.com/)....
PCI-E SSD
Published: 2024-07-03 03:08:44

PCIe SSDs (Peripheral Component Interconnect Express Solid State Drives) represent the pinnacle of high-speed data storage technology, offering unparalleled performance for both consumer and enterprise applications. Leveraging the PCIe interface, these SSDs deliver exceptional data transfer speeds and significantly lower latency compared to traditional SATA SSDs. This results in faster boot times, quicker application loading, and enhanced overall system responsiveness.

PCIe SSDs utilize advanced NAND flash memory technology, ensuring superior durability and reliability. They are available in various form factors, including M.2 and U.2, catering to a wide range of device compatibility requirements. Key features of PCIe SSDs include high throughput, enhanced error correction, and advanced data protection mechanisms, making them ideal for demanding environments such as gaming, video editing, and large-scale data processing.

When selecting a PCIe SSD, considerations include the specific performance needs of your applications, compatibility with your system's motherboard, and the balance between cost and storage capacity. PCIe SSDs are an excellent choice for users seeking to maximize their system's potential, offering scalable solutions that can grow with your data storage needs.

Integrating PCIe SSDs into your computing environment ensures a significant boost in performance, making them a vital component for modern high-performance systems and enterprise storage solutions.

Elsewhere on the net:

[PCI-E SSD
](https://serverorbit.com/solid-state-drives-ssd/pci-e-ssd/)
What Chat GPT thought of me over the entire time I used it at work.
Tags: resume, chatgpt
Published: 2024-07-03 02:52:51

  Nowadays, the questions that a person asks also become a criterion for his assessment. After all, by the understanding a person demonstrates in his question on a topic that interests him, you can also say a lot about a person. I found it interesting what Chat GPT thought of me over the entire time I used it at work. (and I started using it from the moment it appeared)

{% embed https://youtu.be/Ld7B-21ysu4 %}

It is known that the quality of communication depends on the questions on which the person who asks them demonstrates his understanding of the topic and his awareness. I talked to Chat GPT on various topics, to summarize, I ask Chat GPT to write a short (one A4 page) summary about me, taking into consideration all the chats he had with me and the questions I asked. I am only interested in the technical side of the issue, to highlight my knowledge in the field of IT, web development and devops
Testing SAW (Scrape Any Website
Tags: testing, saw, qualityassurance, webdev
Published: 2024-07-02 16:38:10


SAW, which stands for Scrape Any Website, is a Windows application designed to facilitate web scraping tasks. It allows users to scrape and extract data from various websites efficiently, providing a user-friendly interface for organizing and gathering information from the web.


**Key Features of SAW**
- User-Friendly Interface
- Efficient Data Extraction
- Customizable Scrape Jobs
- Support for Multiple Websites
- Organized Data Storage


**Testing Overview**
We conducted thorough testing on a Windows 10 Pro machine using SAW version 1.0.0. Our testing aimed to uncover any bugs, usability issues, performance bottlenecks, and security vulnerabilities. We focused on both typical user scenarios and edge cases to ensure comprehensive coverage.


**Key Findings**
**- Inconsistent Data Extraction:** We observed inconsistencies in the data extraction results, with some elements missing from the output. Additionally, some large websites displayed binary data instead of the actual scraped content, making the extracted data unusable. Ensuring accurate and reliable data extraction is paramount for the application’s core functionality.

**- Invisible Text Input:** The text input field for adding a new scrape job has white text, which blends with the white background, making it difficult for users to see what they are typing. This is a usability issue that needs to be addressed to improve user experience.

**- Lack of URL Validation in Add URL Form:** The 'Add URL' form allows users to submit non-URL inputs without displaying any validation error. This can lead to confusion and potential misuse of the application. Users should receive a validation error and be prevented from submitting the form if the input is not a valid URL.

**- Static Cursor on Interactive Elements:** The cursor remains the default arrow even when hovering over interactive elements like links and buttons. The cursor should change to indicate that the element is clickable, enhancing the user experience and intuitiveness.

**Conclusion**
Overall, SAW has the potential to be a powerful web scraping tool. Addressing the identified issues will significantly enhance its stability, usability, and reliability.

You can download SAW from the Windows Store by following this link: [Scrape Any Website](https://apps.microsoft.com/detail/9mzxn37vw0s2).

For a detailed report on the bugs identified, please refer to our comprehensive bug report [here](https://docs.google.com/document/d/1NVi0R4tQ-VlLDVY9dVk4716HJ83uLuGtNqD0x_IdkxE/edit?usp=sharing) and the excel sheet [here](https://docs.google.com/spreadsheets/d/19MzkZomVraGGLstePE407luCfqPMYyX0jIhnoT3-MC4/edit?usp=sharing).
Set GitHub Actions timeout-minutes
Published: 2024-07-03 02:46:43

In this article I introduce a GitHub Actions' setting `timeout-minutes` and tools related to `timeout-minutes`.

- What's timeout-minutes?
- Why should you set timeout-minutes?
- Linters to enforce timeout-minutes
- A command line tool to set timeout-minutes to all GitHub Actions jobs
- Set timeout-minutes to your all repositories

## What's timeout-minutes?

[timeout-minutes](https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idtimeout-minutes) is the maximum number of minutes to let a job run before GitHub automatically cancels it.
The default value is 360.

## Why should you set timeout-minutes?

The default value of timeout-minutes is 360, but this is too long for most GitHub Actions jobs.
Even if processes are stuck for some reason, jobs keeps running until the timeout.
This wastes resources uselessly.
By setting timeout-minutes properly, you can notice the issue and resolve it by retrying jobs quickly.

https://exercism.org/docs/building/github/gha-best-practices#h-set-timeouts-for-workflows

## Linters to enforce timeout-minutes

There are linters to enforce timeout-minutes.

1. [ghalint](https://github.com/suzuki-shunsuke/ghalint) is a GitHub Actions linter
1. [lintnet](https://lintnet.github.io/) is a general purpose linter powered by Jsonnet

### ghalint

From ghalint [v0.2.12](https://github.com/suzuki-shunsuke/ghalint/releases/tag/v0.2.12), ghalint enforces timeout-minutes.

https://github.com/suzuki-shunsuke/ghalint/blob/main/docs/policies/012.md

### lintnet

ghalint is ported to lintnet as a module.

https://github.com/lintnet-modules/ghalint

So you can enforce timeout-minutes using the module.

https://github.com/lintnet-modules/ghalint/tree/main/workflow/job_timeout_minutes_is_required

## A command line tool to set timeout-minutes to all GitHub Actions jobs

It is very bothersome to set timeout-minutes to a lot of jobs by hand.
But you can do it easily using a command line tool [ghatm](https://github.com/suzuki-shunsuke/ghatm).
It finds GitHub Actions workflows and adds timeout-minutes to jobs which don't have the setting.
It edits workflow files while keeping YAML comments, indents, empty lines, and so on.

For details, please see https://github.com/suzuki-shunsuke/ghatm .

## Set timeout-minutes to your all repositories

ghatm is useful, but it is very bothersome to run ghatm and create and merge pull requests to a lot of repositories by hand.
But you can do it easily using ghatm and [multi-gitter](https://github.com/lindell/multi-gitter).

1. Create pull requests by `multi-gitter run`

```sh
multi-gitter run ./ghatm-set.sh \
	--config config.yaml \
	-O "$org" \
	-t "ci: set timeout-minutes using ghatm" \
    --skip-forks \
	-b "$body" \
	-B ci-set-timeout-minutes-by-ghatm
```

ghatm-set.sh

```sh
ghatm set
```

config.yaml

```yaml
git-type: cmd # Use git to sign commits
```

2. Merge pull requests by `multi-gitter merge`

```sh
multi-gitter merge \
	-O "$org" \
	-B ci-set-timeout-minutes-by-ghatm \
	--skip-forks
```
Issue with NPM Package Installing Globally
Tags: node, npm, nodemodules
Published: 2024-07-03 02:36:34


I was not able to install npm packages globally in mac os(using npm install -g), but able to install locally in the project. Installing locally in every project will increase the total node_modules folder size and for every project we need to install the same packages that will be tedious and unnecessary.

Here are the steps I performed.

I was using Homebrew to install node and npm. So, 

1.  Used command `npm config get prefix`  - check where the npm actually points to. If this points to /opt/homebrew 
	
2. Check if node_modules are installed in cd `/usr/local/lib`

3. If (2) is true, `brew remove npm` and then `brew install npm`

4. Now see if `npm install -g  express works`


ref: https://stackoverflow.com/questions/22562041/global-installation-with-npm-doesnt-work-after-mac-os-x-mavericks-update
Hello
Published: 2024-07-03 02:26:08

Hi, I'm Mike Selva, I am a Self-Learning Full Stack Developer, I am   17 years old now. I have been coding for over two weeks,
I have joined Github and am Creating, editing and updating my projects,

You can find my own GitHub at [My Github Account](https://github.com/mikeselva123)

Well,

See you next time,

Bye
Leetcode Day 2: Palindrome Number Explained
Tags: leetcode, python, beginners, codenewbie
Published: 2024-07-03 02:19:12

The problem is as follows:
Given an integer `x`, return `true` if `x` is a **palindrome**, and `false` _otherwise_.

Example 1:
```
Input: x = 121
Output: true
Explanation: 121 reads as 121 from left to right and from right to left.
```

Example 2:
```
Input: x = -121
Output: false
Explanation: From left to right, it reads -121. From right to left, it becomes 121-. Therefore, it is not a palindrome.
```

Example 3:
```
Input: x = 10
Output: false
Explanation: Reads 01 from right to left. Therefore, it is not a palindrome.
```

Here is how I solved it:
- Let's convert the given integer into a string
- In Python we can reverse a string by slicing: create a slice that starts at the end of the string and moves backwards. The slice statement `[::-1]` means start and end of the string and end at position 0, move with the step `-1`, which means one step backwards. https://www.w3schools.com/python/python_howto_reverse_string.asp

```
rev = str(x)[::-1]
```
- Let's compare the reversed string to the given integer (again, convert it to string: we can only compare same datatypes). Return True if it matches, else False.

```
if rev == str(x):
    return True
return False
```

But hey, we can actually write just one line of code using ternary operator! To be honest, I am not sure if it's bad design, but it seemed more readable to me.
Here is the complete solution:

```
class Solution:
    def isPalindrome(self, x: int) -> bool:
        return True if str(x)[::-1] == str(x) else False
```
Day 1: Error: "Module not found: Error: Can't resolve '@angular/core'"
Tags: angular, webdev, javascript, errors
Published: 2024-07-03 02:16:14


#### Scenario:
This error often occurs when you try to run your Angular application after installing or upgrading Angular packages and it can't find the `@angular/core` module.

please subscribe to my [YouTube channel](https://www.youtube.com/@DevDivewithDipak?sub_confirmation=1
) to support my channel and get more web development tutorials.

#### Solution:
1.**Ensure Dependencies are Installed Correctly:**
   Make sure all dependencies are properly installed by running:
   ```sh
   npm install
   ```

2.**Check `package.json`:**
   Ensure that `@angular/core` and other Angular dependencies are listed in your `package.json`. It should look something like this:
   ```json
   "dependencies": {
     "@angular/core": "^12.0.0",
     "@angular/common": "^12.0.0",
     ...
   }
   ```

3.**Clean npm Cache and Reinstall Node Modules:**
   Sometimes, npm cache can cause issues. Clear the cache and reinstall the node modules:
   ```sh
   npm cache clean --force
   rm -rf node_modules
   npm install
   ```

4.**Check the `tsconfig.json` Configuration:**
   Ensure the paths in `tsconfig.json` are correctly configured:
   ```json
   {
     "compilerOptions": {
       "baseUrl": "./",
       "paths": {
         "@angular/*": ["node_modules/@angular/*"]
       }
     }
   }
   ```

5.**Update Angular CLI:**
   Ensure your Angular CLI is up-to-date:
   ```sh
   npm install -g @angular/cli
   ```

6.**Restart the Development Server:**
   Sometimes, simply restarting the development server can solve the issue:
   ```sh
   ng serve
   ```

If you've followed all these steps and the problem persists, you may want to check for any specific issues related to your project setup or Angular version. 

Feel free to ask for another error and its solution tomorrow!

please subscribe to my [YouTube channel](https://www.youtube.com/@DevDivewithDipak?sub_confirmation=1
) to support my channel and get more web development tutorials.

### Follow and Subscribe:
- **Instagram**: [devdivewithdipak](https://www.instagram.com/devdivewithdipak)
- **Website**: [Dipak Ahirav] (https://www.dipakahirav.com)
- **Email**: dipaksahirav@gmail.com
- **YouTube**: [devDive with Dipak](https://www.youtube.com/@DevDivewithDipak?sub_confirmation=1
)
- **LinkedIn**: [Dipak Ahirav](https://www.linkedin.com/in/dipak-ahirav-606bba128)

Happy coding! 🚀