teleren/devto huggingface dataset:
Day 10 of my progress as a vue dev
Tags: webdev, vue, typescript, tailwindcss
Published: 2024-06-04 17:18:55

**About today**
Today was a little better than yesterday, I made progress with my DSA visualizer project and spent quite a few time learning new concepts practicing and trying to come up with new ideas by brainstorming. My thought process is simple at the point, implement whatever is easy to understand and good to visualize. 

**What's next?**
I will be done with my tree implementation by tomorrow and will move to refining the whole project and smooth up any rough edges to make it look visually appealing and a good experience functionality wise.

**Improvements required**
I still lack that touch that I'm looking for in order to make my visuals more appealing to the user, I need to spend more time studying the visual arts and human computer interaction concepts in order to get this right and make it better.

Wish me luck!
409. Longest Palindrome
Tags: php, leetcode, algorithms, programming
Published: 2024-06-04 17:18:40

409\. Longest Palindrome

Easy

Given a string `s` which consists of lowercase or uppercase letters, return the length of the **longest** palindrome[^1]
that can be built with those letters.

Letters are **case sensitive**, for example, `"Aa"` is not considered a palindrome.

**Example 1:**

- **Input:** s = "abccccdd"
- **Output:** 7
- **Explanation:** One longest palindrome that can be built is "dccaccd", whose length is 7.

**Example 2:**

- **Input:** s = "a"
- **Output:** 1
- **Explanation:** The longest palindrome that can be built is "a", whose length is 1.

**Constraints:**

- <code>1 <= s.length <= 2000</code>
- `s` consists of lowercase **and/or** uppercase English letters only.

[^1]: **Palindrome** `A palindrome is a string that reads the same forward and backward.`


**Solution:**

```
class Solution {

    /**
     * @param String $s
     * @return Integer
     */
    function longestPalindrome($s) {
        $ans = 0;
        $count = array_fill(0, 128, 0);

        foreach(str_split($s) as $c) {
            $count[ord($c)]++;
        }

        foreach($count as $freq) {
            $ans += $freq % 2 == 0 ? $freq : $freq - 1;
        }

        $hasOddCount = false;
        foreach($count as $c) {
            if($c % 2 != 0) {
                $hasOddCount = true;
                break;
            }
        }

        return $ans + ($hasOddCount ? 1 : 0);
    }
}
```

**Contact Links**

- **[LinkedIn](https://www.linkedin.com/in/arifulhaque/)**
- **[GitHub](https://github.com/mah-shamim)**
Nvidia's 1000x Performance Boost Claim Verified
Tags: ai, machinelearning, marketing, hardware
Published: 2024-06-04 17:14:45

Nvidia's keynote at the recent Computex was full of bold marketing and messaging, bordering on complete BS.

![CEO Math Lesson](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmalbg9nc20p4jrks92m.png)

The "CEO Math" lesson with the "The more you buy, the more you save" conclusion has reminded me of another bold claim (and play with the numbers) from earlier this year.

At Blackwell's intro, one of the [slides](https://www.youtube.com/watch?t=2521) stated there's a 1000x boost in the compute power of Nvidia GPUs. Though many noticed the comparison was not apples-to-apples: FP16 data type performance for older generations was compared against FP8 and FP4 smaller data types introduced in the newer hardware. Apparently, lower precision computation is faster. The graph would be much nicer if the FP16 line continued. Like that:

![Blackwell FP16 performance](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vzepoog14hp6xattd7x.png)

It is great that the new hardware has acceleration for smaller data types. It follows the trend of quantized language models - trading off slight LLM performance degradation for smaller size and faster inference. Though presenting the figures in the way they were presented:
- not explaining the difference in datatypes, 
- hiding the baseline and breaking consistency
- not highlighting the downside of decreased precision...

... that seems like a sketchy move worth of "How to Lie with Statistics" book.

![How to Lie with Statistics](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl9sret4vqg7likyky4v.png)

Anyways... To come up with the above numbers for the FP16 performance for Hopper and Blackwell I found the specs for the products that had 4000 TFLOPS FP8 and 20000 TFLOPS FP4. 

They are:

- [H100 SXM](https://www.nvidia.com/en-us/data-center/h100/) FP8 3,958 teraFLOPS and FP16 1,979 teraFLOPS

![H100 SXM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w85boiif5e1w0wbtksl5.png)

- [GB200 NVL2](https://www.nvidia.com/en-us/data-center/gb200-nvl2/) dual GPU system with FP4 40 PFLOPS and FP16 10 PFLOPS (5000 FP16 teraFLOPS per GPU)

![GB200 NVL2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pb2sh9a4q8xm8dhjeppx.png)

The improvement in performance is still impressive, yet 1000x is way nicer than a mere 263x ;)
Learning AWS Day by Day — Day 80 — Amazon Cloud Directory
Tags: aws, beginners, cloud, cloudcomputing
Published: 2024-06-04 17:11:44

Exploring AWS !!

Day 80

AWS Cloud Directory

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

A directory-based store in AWS, where directories can scale to millions of objects. No need of managing the directory infrastructure, just focus on your development and deployment of the application. There is no limit to organize the directory objects in fixed hierarchy.
We can use Cloud Directory to organize directory objects in multiple hierarchies supporting many organizational pivots and relationships across directory information. For example, a directory of users may provide a hierarchical view based on reporting structure, location, and project affiliation. Similarly, a directory of devices may have multiple hierarchical views based on its manufacturer, current owner, and physical location.

We can do following with Cloud Directory:
Create directory-based applications easily and without having to worry about deployment, global scale, availability, and performance
Build applications that provide user and group management, permissions or policy management, device registry, customer management, address books, and application or product catalogs
Define new directory objects or extend existing types to meet their application needs, reducing the code they need to write
Reduce the complexity of layering applications on top of Cloud Directory
Manage the evolution of schema information over time, ensuring future compatibility for consumers

Cloud Directory is not a directory service for IT Administrators who want to manage or migrate their directory infrastructure.
Lost your README?
Tags: git, push, github, origin
Published: 2024-06-04 17:10:44

When this happens, this is kind of a loss of a mojo as well and this has happened to me a lot.
I am had to do a `git push -u origin master` and then the commit was rejected. Has this happened to you too[](url)? Fret not.

Image courtesy of [http://Studytonight.com](url).

I stumbled upon a post on Stackoverflow on how this should be done: 
[https://stackoverflow.com/a/59790434/11083275](url). which irons out the problem entirely.

1. Can't push.
2. What did I do?
`git push -f origin master`
3. Why did I do that?
   To upload my last commit!
4. What was the consequence?
Well everything was loaded 
__but for__ 
every readme I did from my last lot of commits!
5. How to put that right?
As per the article above, the next steps would be...
```
- git fetch origin master
- git pull origin master
- git add .
- git commit -m 'your commit message'
- git push origin master
```
If you now check your github you should find that master to master was successful.✅

Ok everyone, have fun 😂!!
Top 10 Youtube channels to follow if you're a Programmer 🚀
Published: 2024-06-04 16:40:49

PS: nothing fancy in the blog; Just listing here, some of the best youtube channels that will make you fall in love with software development.

(i) ThePrimeTime -- This guy reacts to programming blogs, videos, etc, sharing his opinion and insights.
(ii) ByteByteGo -- Videos on System Design concepts and case studies.
(iii) Gaurav Sen -- Videos on System Design concepts and case studies.
(iv) Theo - t3.gg -- Videos on whats happening in programming world.
(v) Perfology -- Videos on Scaling systems and Performance testing.
(vi) Scaler -- Podcasts with top developers.
(vii) Beyond Coding -- Podcasts with top developers.
(viii) Honeypot -- Documentaries on different technologies and their origin.
(ix) GO TO Conferences -- Sessions from Software Conferences.
(x) NDC Conferences -- Sessions from Software Conferences.
(xi) Arpit Bhayani -- Videos on System Design concepts, case studies and podcasts.

Some honorable mentions: Just me and open source, FastAI, Deeplearning.ai.

Show some love by sharing, liking and commenting ✌️

Cheers, let's meet next time with a next cool blog 😃
เริ่มต้น Quarkus 3 part 2.3 Renarde
Tags: quarkus
Published: 2024-06-04 16:34:08

Renarde เป็นอีกตัวช่วยในการทำ SSR ในรูปแบบ MVC เช่นเดียวกับ Spring MVC ที่มีเครื่องมือให้พร้อมหยิบมาใช้งานเลย เช่น form validator,csrf,routing,email,htmx support,barcode,gen pdf,security.... 

เริ่มต้นใช้งานก็เพิ่ม dependency ใน pom.xml จากบทความก่อนๆได้เลย โดยคง web-bundler ไว้เหมือนเดิม แต่สามารถเอา qute-web ,rest-qute ออกได้เลยเพราะมี transitive dependency จาก renarde ไปแล้ว
```xml
        <dependency>
            <groupId>io.quarkiverse.renarde</groupId>
            <artifactId>quarkus-renarde</artifactId>
            <version>3.0.12</version>
        </dependency>
```

จากนั้นจะต้องไป disable proactive authen ก่อน เพราะว่าเรายังไม่ได้ config security จะเข้า endpoint ไม่ได้เพราะมัน enable by default
```
quarkus.http.auth.proactive=false
``` 

ที่เหลือก็เหมือน Action based MVC ทั่วๆไปนะครับ รยละเอียดแนะนำให้ไปโหลด เดโมมาลองที่
https://github.com/ia3andy/quarkus-blast จะเป็น Renarde+HTMX ครับ
Day 5 of 30
Published: 2024-06-04 16:24:05

This is one of those days I was very overwhelmed and decided I needed to set one thing straight and come up with a friendly schedule I actually got a nice schedule from Monica AI:

## **Phase 1 (Weeks 1-3):**

- Focus on learning React.js fundamentals, building various React projects, and becoming proficient in React.

## **Phase 2 (Weeks 4-6):**

- Shift your focus to learning Flask, build a few Flask projects, and work on integrating your React and Flask skills to create full-stack web applications.

## **Phase 3 (Weeks 7-10):**

- Once you have a good grasp of React and Flask, and can build functional full-stack projects, then start learning data structures and algorithms.
- Allocate time to practice DS&A concepts and solve coding challenges.

## **Phase 4 (Weeks 11-14):**

- Introduce the TryHackMe platform and start learning about cybersecurity and ethical hacking.
- Spend time working through TryHackMe modules and challenges, ensuring you maintain a strong ethical and legal approach.


**But I also managed to learn some new concepts but I will post them tomorrow together with more stuff I will be learning next**
Learn Rust by building a real web application.
Tags: rust, learning, webapplication
Published: 2024-06-04 16:22:09

I heard about Rust few years back but was hesitant to learn it mainly due to its unique syntax. But i kept stumbling on it ever since either on podcasts or YouTube channels or talks on how major companies are embracing it for C++. 

I finally decided, I want to learn the language. I started reading the book but in no time got lost in the new terminology or the syntax. I reset my learning and decided, i will build a real world application. This is not a simple hello world or a todo list. I am going to be building a real world application which has all the features.

I am building a blog website which will have all these features.

1. Authentication.
2. Email verification
3. Oauth Sign in 
4. Image Upload to server
5. Upload Images to S3
6. Static files for html rendering.

Lets get to it.
OpenSSF Case Study: Enhancing Open Source Security with Sigstore at Stacklok
Tags: siggstore, openssf, opensource, security
Published: 2024-06-04 16:15:57

Stacklok was founded in 2023 by Craig McLuckie (co-creator of [Kubernetes](https://kubernetes.io/)) and Luke Hinds (creator of the OpenSSF project [Sigstore](https://www.sigstore.dev/)), with the goal of helping developers produce and consume open source software more safely.

As malicious attacks on open source software continue to grow in number and become more sophisticated (like the recent [XZ Utils incident](https://stacklok.com/blog/the-good-the-bad-and-the-ugly-of-the-xz-vulnerability)), governments and organizations are calling for increased security and protection against these attacks. Yet open source maintainers—who are often unpaid volunteers, with other full-time jobs—lack the time to stay up to speed on security best practices, and access to freely available tools that can proactively keep their software secure.

To help open source communities and developers produce and consume open source software more safely, Stacklok is harnessing the power of Sigstore, highlighted in this case study. 

Read the rest of the case study [here](https://openssf.org/blog/2024/06/04/openssf-case-study-enhancing-open-source-security-with-sigstore-at-stacklok/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pce7p76wimm08p36lzxk.png)
How to find FunCaptcha | By using CapSolver Extension
Published: 2024-06-04 15:57:43

## Understanding FunCaptcha
FunCaptcha is a security solution that uses a variety of advanced technologies to enhance security and user experience, including:

- **Behavioral Analysis**: This feature tracks user behavior during the challenge, such as mouse movements and click patterns, to differentiate between humans and bots.
- **Dynamic Challenges**: The challenges are constantly updated and differ each time, making it more difficult for bots to learn and solve them.
- **Adaptive Mechanisms**: The system adjusts the challenge's difficulty based on the user's risk profile and behavior, ensuring minimal disruption for legitimate users.
- **Device Fingerprinting**: It gathers and analyzes device and browser information to identify potential threats.
- **Machine Learning**: It uses machine learning models to analyze large amounts of data and improve the accuracy of distinguishing between human and automated traffic.

## Identifying FunCaptcha Usage with CapSolver Extension

In addition to finding the FunCaptcha Site Key, it may sometimes be necessary to determine if FunCaptcha is in use.

### Steps to Detect FunCaptcha Parameters:

1. **Installation**:
   * For Chrome users, install the [Captcha Solver Auto Solve](https://chrome.google.com/webstore/detail/captcha-solver-auto-bypas/pgojnojmmhpofjgdmaebadhbocahppod) extension.
   * For Firefox users, install the [Captcha Solver Auto Solve](https://addons.mozilla.org/en-US/firefox/addon/capsolver-captcha-solver/) extension.

2. **CapSolver Setup**:
   * Go to [CapSolver](https://www.capsolver.com/).
   * Press "F12" on your keyboard to open the developer tools.
   * Go to the **CapSolver Captcha Detector** tab.

3. **Detection**:
   * Keep the CapSolver panel open and visit the website where you want to trigger the CAPTCHA.
   * Trigger the captcha.
   * Note: **Do not close** the CapSolver panel before triggering the CAPTCHA.

### Identifying FunCaptcha Parameters:

The parameters for FunCaptcha that can be detected are:

* Website URL
* Site Key
* funcaptcha
* funcaptcha api js subdomain
* data blob

Once the CAPTCHA parameters are detected, CapSolver will provide a JSON detailing how to submit the captcha parameters to their service.

### Identifying FunCaptcha Usage:

1. **Open Developer Tools**:
   Press `F12` to open the developer tools or right-click on the webpage and select "Inspect".
 
2. **Open the CapSolver Panel**:
   Go to the Captcha Detector Panel.

3. **Trigger the FunCaptcha**:
   Perform the action that triggers the FunCaptcha on the webpage.

4. **Check the CapSolver Panel**:
   Look at the CapSolver Captcha Detector tab in the developer tools. If the `FunCaptcha` parameter is set to `true`, then FunCaptcha is being used on the site.

By following these steps, you can easily determine if FunCaptcha is being used on a website. Always use such tools responsibly and ethically, respecting the terms of service of the websites you interact with. For further assistance, you can contact CapSolver via email at [support@capsolver.com](mailto:support@capsolver.com).
I need help in node ,anyone up?
Tags: help
Published: 2024-06-04 15:57:10

sequelize
  //.sync({ force: true })it's task to overide the table.
  .sync()
  .then((result) => {
    return User.findByPk(1);
    // app.listen(3000);
  })
  .then((user) => {
    if (!user) {
      console.log("ankuuser", user);
      return User.create({  name: "Max", email: "test@test.com" });
    }
    return user;
  })
  .then((user) => {
    console.log("user of nishant", user);
    app.listen(3000);
  })
  .catch((err) => {
    console.log(err);
  });

error:  original: Error: Field 'id' doesn't have a default value
What is zoom in Web Design? A funny story.
Tags: webdev, design, css
Published: 2024-06-04 15:54:44

Almost every software engineer comes across a time where they start designing. And when you are designing your own product you want to make sure that it is close to perfection!

But something terrible happened which made me realize the importance of setting browser's zoom to 100% when designing on web lol.

Since I have a habit of zooming out of most of my frequently visited websites so that everything on the screen looks tiny, I accidently designed my website in 85% zoom in Safari and made a huge blunder by killing UX as the elements and images were too huge on my client's laptops. 🤯

And yeah I discovered this after 4 months of development.

I also came across an interesting fact that it is better to design in the 'em' unit in CSS but since I was using TailwindCSS I just needed to adjust the styling of my entire website which took me two entire days. But it was a good encounter. I love it when new things pop up and makes you more experienced that ever. 

Cheers guys, have a great day! 🚀
How to build a chrome extension in 2024
Tags: extensions, chrome, howto
Published: 2024-06-04 15:52:05

Happy to be here!

This is a walkthrough on creating the 'Scrolling Zombie' chrome extension which tracks the amount of scrolling a user does to make them aware of their browsing behavior and help them fight dark UI patterns.

In this guide I walk you through my typical approach to bringing an idea to life. I cover:
* Problem statement
* Use Cases
* Architecture
* Implementation
* A few Observations (Gotchas)

Read the full guide:
https://www.jeromethibaud.com/en/blog/how-to-build-a-chrome-extension/

Link to the extension in the store:
[Scrolling Zombie extension in Chrome Web Store](https://chromewebstore.google.com/detail/scrolling-zombie/jihbnbebcilifidcodopcibcaeiegmab)

Have a great day!
Jotai atomWithStorage
Tags: react, webdev, typescript, javascript
Published: 2024-06-04 15:47:17


## What is atomWithStorage?
Basically to put it simply `atomWithStorage` is a cool way for you the developer to persist data in your application, it's a function that will automatically store the data of the atom in `localStorage`, `sessionStorage` for React or `AsyncStorage` for React Native.

That means you can persist your application data even if the user refreshes, closes or crashes the page or application and when the user comes back the data will still be there. 
The only way to remove the data is if the user manually clears their browser cache, local storage, session storage and cookies.

## How to use atomWithStorage
To use `atomWithStorage` you need to import it from `jotai/utils` and then you can use it like you would use `atom`

```jsx
import {useAtom} from "jotai";
import {atomWithStorage} from "jotai/utils";

const themeAtom = atomWithStorage("theme", "dark");
const userSettingsAtom = atomWithStorage("userSettings", 
  {language: "en", country: "us", accentColor: "blue"}
);

export default function Page() {
  const [theme, setTheme]=useAtom(themeAtom);
  const [userSettings, setUserSettings]=useAtom(userSettingsAtom);

  return (
    <div>
      <h1>Theme: {theme}</h1>
      <h1>User Settings</h1>
      <p>Language: {userSettings.language}</p>
      <p>Country: {userSettings.country}</p>
      <p>Accent Color: {userSettings.accentColor}</p>
    </div>
  );
}
```

As you see you can use `atomWithStorage` just like you would use `atom`, it really is as easy as that. It will automatically default to persisting the data in `localStorage` but you can also pass in a second argument to specify where you want to store the data.

```jsx
const themeAtom = atomWithStorage("theme", "dark", sessionStorage);
```

### Learn more about Jotai
You can find out more about why I love Jotai in my post [Why I love Jotai](/blog/why-i-love-jotai/) and you can find the official documentation [here](https://jotai.org/docs/introduction)
Buzz Off Expert Bee, Wasp, and Hornet Exterminator in Greenwich
Tags: pest, home, control
Published: 2024-06-04 15:40:27

[](urlhttps://greenpestmanagementct.com/pest-control-greenwich/)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmmkvjgh1fuofmvjetg6.jpeg)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48qyyjtjdr0qbsvuvhlm.png)
respinix
Published: 2024-06-04 15:39:21

Discover the limitless possibilities of Respinix. At [respinix.com](https://respinix.com/), you'll have access to an impressive collection of over 20,300 demo slot machines from 457 leading software providers. This unique platform allows you to try a wide variety of slot themes and styles for free and without any obligation, from classic fruit machines to innovative 3D machines with exciting storylines. Explore over 100 different themes to find the games that perfectly match your preferences and mood.