teleren/devto huggingface dataset:
Ready to Conquer or Ready to Throw in the Towel?
Published: 2023-12-17 18:24:21

Hey JavaScript Rockstars! 🌟

Hope your weekend is filled with good vibes and maybe a sprinkle of coding magic! 🎉 Quick check-in: Is your project giving you a high-five or a headache? 😅

1: If it's high-fiving you back, awesome! 🚀
2: If it's playing hard to get, no worries! We've got your back. Let's turn those coding challenges into victories!
Ready for a quick chat to sprinkle some code-fu wisdom? 🧙‍♂️ Hit reply and let me know if you're up for it! 💬

Remember, debugging is a bit like detective work, but with more coffee. ☕️ Let's crack the code together!

Happy coding! 🚀👩‍💻👨‍💻
How to remove things from docker
Tags: docker, devops, developers, development
Published: 2023-12-17 18:02:11

Hello,

I have created a short video on How to remove things from Docker Please share and like, also subscribe for more interesting IT Content including shorts. 

{% embed https://youtube.com/shorts/NbrTldJQiPs?si=DD3_xLX-2CsxAR6O %}

Thanks
YouTube: [http://youtube.com/@valters_eu](http://youtube.com/@valters_eu)
Twitter: [http://twitter.com/valters_eu](http://twitter.com/valters_eu)
Website: [https://www.valters.eu](https://www.valters.eu)
How to build docker image from code
Tags: docker, devops, developers, development
Published: 2023-12-17 18:00:59

Hello,

I have created a short video on How to Build Docker image from code Please share and like, also subscribe for more interesting IT Content including shorts. 

{% embed https://youtube.com/shorts/jTxpshs4CEA?si=tOPqwtkMDjbuayuy %}

Thanks
YouTube: [http://youtube.com/@valters_eu](http://youtube.com/@valters_eu)
Twitter: [http://twitter.com/valters_eu](http://twitter.com/valters_eu)
Website: [https://www.valters.eu](https://www.valters.eu)
Fallen in love with Ruby 💖
Tags: ruby, rails, rails7, programming
Published: 2023-12-17 17:55:34

Hello all rubyists 👋, In this blog post I will share what made me to fall in love with Ruby programming language. I'm not the expert still just sharing my views here.

Initially I have started my career in web development as a PHP Developer. 🐘 -> 💎

As the docs says Ruby A Programmer's Best Friend. It offers more **readability** and **elegant syntax** that is easy to read and write not very cryptic see in action.

**PHP Example code 🐘:**

```php
<?php
class Student {
    public $name;
    public $age;
    public $grade;

    function __construct($name, $age, $grade) {
        $this->name = $name;
        $this->age = $age;
        $this->grade = $grade;
    }

    function display() {
        echo "Name: " . $this->name . "\n";
        echo "Age: " . $this->age . "\n";
        echo "Grade: " . $this->grade . "\n";
    }
}

$student1 = new Student("John", 18, "A");
$student2 = new Student("Jane", 19, "B");

echo "Student 1:\n";
$student1->display();

echo "\nStudent 2:\n";
$student2->display();
?>


```

**Ruby Example code 💎:**

```ruby
class Student
  attr_accessor :name, :age, :grade

  def initialize(name, age, grade)
    @name = name
    @age = age
    @grade = grade
  end

  def display
    puts "Name: #{@name}"
    puts "Age: #{@age}"
    puts "Grade: #{@grade}"
  end
end

student1 = Student.new("John", 18, "A")
student2 = Student.new("Jane", 19, "B")

puts "Student 1:"
student1.display

puts "\nStudent 2:"
student2.display

```

For me the ruby version looks cool and feels more readable than PHP and easy to understand with less lines of code as well. Not only readability there is often more than one way of doing things in Ruby. If you know some other interesting stuffs in Ruby let me know in comments section. Thanks for reading 🤝.
Architectural Trade-Off
Tags: softwareengineering, architecture, development, programming
Published: 2023-12-17 17:50:12

🔍 Architectural Decisions: The Queue vs. Topic Trade-Off

In the realm of software architecture, each decision carries its weight in trade-offs. A prime example is the design of a bidding system's messaging communication. Do you opt for queues, embracing the point-to-point pattern that guarantees a message is consumed by only one receiver? Or do you choose topics, which allow messages to be broadcasted to multiple subscribers, enhancing decoupling and scalability?

🚀 Queues offer:

- Clear message delivery paths
- Tight coupling, which can simplify certain scenarios
- Potential challenges in extensibility and flexibility

✨ Topics provide:
- A publish-subscribe model that's inherently scalable
- Decoupling of services, allowing for system growth
- Challenges around data security and controlled access

Making the right choice hinges on your system's specific needs, your security requirements, scalability goals, and the overall architectural vision.

As we navigate these waters, remember: there are no right or wrong answers in architecture—only trade-offs.




![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7ojnmx3a53irvxx2ziz.jpg)
My 1-week SDLC marathon
Tags: marathon, sdlc
Published: 2023-12-17 17:10:43

Coming back after a gap of 4 months, today I start a full-fledged project out of necessity as well as for representing me.

The aim of this 1 week is not just to deliver a project but to utilize each day non-stop completing the gaps that I have and learn the missing points.

`Dec 17 2023 04:11 PM IST`

this is the current state

### projects
Issue Tracker with Git

### ecapsulated events
   Dec 17: start,
   Dec 17-18: a separate supabase project,
   Dec 24: an exam
   Dec 25: end

### tech stack
Js/Ts, Node/Expressjs or Nestjs, Reactjs, Git, tailwindcss, a UI library

All of these including the scope of everything are supposed to be heavily modified in the coming days.
Carousel / Slider - Approaches for building custom carousel component
Tags: html, css, javascript
Published: 2023-12-17 17:06:03

## Slides carousel using anchor links

The first approach is based on the use of anchor links, although they are only used to change the slide. The magic behind most all approaches is utilizing the __window__ through which user see some slide. Let's understand this approach, In the picture below we have 3 axes that help us to get an initial position of slides and __window__ through which a user sees one slide: 

![initial position of slides](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nj57wd2yk4o0hlqwkhu7.png)

Now that a user performs a scroll the slide changes to the next one. 

![after index change position of slides](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0irsjivysihc6hksq3l.png)

however, just a simple scroll won't make the slide be centred inside the window to achieve this we cant use [`scroll-snap-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type) CSS property. For the navigation to the desired slide we will use combination with id property for `<img />` tag and href for `<a>` tag.

{% codepen https://codepen.io/cookieMonsterDev/pen/ZEwdPxp %}

## Slides carousel using slide index-offset

In the second approach, the logic is built around the current slide's index and the offset is applied to a container with slides.
Simple increasing or decreasing the index triggers the change of the `translateX` value for `slider` container.

{% codepen https://codepen.io/cookieMonsterDev/pen/vYbqMEP %}

The index-offset approach gives us more flexibility for slide changing, however, it is not so beautiful when It comes to cycled change. Cause when reach the end of the slides next slide will be the first one, which means that the index will be equal to 0. From an animation perspective, we will see the scroll of all slides till the first one... To solve this problem, need to slightly change the work with index.

## Slides carousel with cycled offset

In the previous approach with index, we only made offset of the whole container with images which means we had all images in the viewport even when we could not see them. But now I suggest that we have only 3 images in viewport, in general, It will look like:

![slides position with index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3hhtf9qommauk5yrm8m.png)

From here we can change the image we will see next to the needed one without returning to the start when we reach the end... Sounds confusing, doesn't it? What I mean is that next image as prev image is always be rendered depending on the index. 

{% codepen https://codepen.io/cookieMonsterDev/pen/JjxgKzp %}

These are the most basic approaches to creating a custom carousel. All of them can be adapted to and used with any framework you like)
KMP算法
Published: 2023-12-15 06:21:01

在探索文本串以前，模式串要先了解自己

## 一、介绍

KMP主要应用在字符串匹配上。

主要思想是当出现字符串不匹配时，可以知道一部分之前已经匹配的文本内容，可以利用这些信息避免从头再去做匹配了。

next数组就是一个前缀表（prefix table）。前缀表是用来回退的，它记录了**模式串**与**主串(文本串)**不匹配的时候，模式串应该从哪里开始重新匹配。

## 二、前缀表

### (一）例子

模式串：

![模式串](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hq1vxht7vzc4m0drbo4g.png)

我们假设有这样的文本串，`？`表示的字符我们并不关心：

![文本串](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbq8d0rbbbcdb1xp9eb9.png)

将文本串和模式串进行匹配：

![文本串和模式串进行匹配](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isdhnn4iaivwi9cbc6jj.png)

我们发现，在`*`-`f`匹配时不对应，我们只知道`*`和`f`匹配不对应，并不知道`*`是除`f`外的什么字符。

此时，一个很显然的减少匹配次数的思路是将模式串后移，让`*`和`b`进行比较:

![文本串和模式串进行匹配](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1ltbcd27afws8vqcgh1.png)

再在文本串中寻找算法有与模式串匹配的部分。

### （二）前缀表

通过前面的例子，我们很容易发现，我们的目标是：在当前的字符匹配失败的情况下，给出模式串应该从什么位置开始，和当前文本串的字符匹配。

为此引入前缀后缀概念，**前缀**是指不包含最后一个字符的所有以第一个字符开头的连续子串；**后缀**是指不包含第一个字符的所有以最后一个字符结尾的连续子串。

例子：
字符串`aab`，最长相同前后缀的长度为0。
字符串`aaba`，最长相同前后缀的长度为1，即前缀：`a`aba和后缀：aab`a`。
字符串`aabaa`，最长相同前后缀的长度为2，即前缀：`aa`baa和后缀：aab`aa`。
字符串`abcfabc`，最长相同前后缀的长度为3，即前缀：`abc`fabc和后缀：abcf`abc`。

那么模式串中从第一个字符到当前字符的子串的最长相同前后缀的长度就是对应前缀表的数值。

例子：

![模式串和对应前缀表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pvrr48hucawaud5rhy6g.png)

可以看出模式串与前缀表对应位置的数字表示的就是：在此字符之前的的模式串子串中，有多大长度的相同前缀后缀。

## 三、next数组

next数组就可以是前缀表，但是很多实现都是把前缀表统一减一之后作为next数组。

其实这并不涉及到KMP的原理，而是具体实现，next数组即可以就是前缀表，也可以是前缀表统一减一。

我们**以next数组即前缀表为例**：

```C++
    void getNext(int* next, const string& s) {
        int j = 0;
        next[0] = 0;
        for(int i = 1; i < s.size(); i++) {
            while (j > 0 && s[i] != s[j]) { // j要保证大于0，因为下面有取j-1作为数组下标的操作
                j = next[j - 1]; // 注意这里，是要找前一位的对应的回退位置了
            }
            if (s[i] == s[j]) {
                j++;
            }
            next[i] = j;
        }
    }
```

对于while循环，每次while循环实际上就是，在当前的字符匹配失败的情况下，给出模式串应该从什么位置开始，和从开头到i位置的模式串子串的字符匹配，找出最长相同前后缀。

通过上面while循环的条件有两个：

- 1、没有匹配的前缀和后缀

![没有匹配的前缀和后缀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r31qru1u2spyn0br2x9x.png)

- 2、可以从当前位置继续匹配前缀和后缀

![继续匹配](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13nvp758pjyo45elpl3p.png)

## 四、KMP代码

```C++
class Solution {
public:
    void getNext(int* next, const string& s) {
        int j = 0;
        next[0] = 0;
        for(int i = 1; i < s.size(); i++) {
            while (j > 0 && s[i] != s[j]) {
                j = next[j - 1];
            }
            if (s[i] == s[j]) {
                j++;
            }
            next[i] = j;
        }
    }
    int strStr(string haystack, string needle) {
        if (needle.size() == 0) {
            return 0;
        }
        int next[needle.size()];
        getNext(next, needle);
        int j = 0;
        for (int i = 0; i < haystack.size(); i++) {
            while(j > 0 && haystack[i] != needle[j]) {
                j = next[j - 1];
            }
            if (haystack[i] == needle[j]) {
                j++;
            }
            if (j == needle.size() ) {
                return (i - needle.size() + 1);
            }
        }
        return -1;
    }
};
```
The difference between clean code and clean architecture?
Tags: cleancoding, cleancode, android, flutter
Published: 2023-12-17 16:53:06


I've been exploring clean code and clean architecture lately and wanted to share what I've discovered about their differences.

Firstly, it's important to understand that clean code and clean architecture are distinct concepts.


![what?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8vz1m6obwqtvottgfws.jpeg)

Initially, when I aimed to write code that was easy to understand, I followed advice from articles on organizing folders, and classes, and dividing projects into sections. However, as my projects grew, I encountered a problem: my code started getting messy, and I couldn't figure out why.


![clean code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/spjzfgpkmditg7d9asel.png)

Let's define clean Architecture:

> Clean Architecture, introduced by Robert C. Martin (Uncle Bob), focuses on building software systems that are maintainable, scalable, and testable. It highlights the separation of concerns, independence from frameworks, and using abstractions for a clear and understandable architecture in applications.

On the other hand,

> Clean code refers to well-structured, easily understandable, and maintainable code that adheres to best practices and coding standards. Also emphasized by Robert C. Martin, it revolves around writing code that's clear and straightforward to work with.

These concepts complement each other. Achieving readable software isn't solely about choosing the right software architecture. For instance, in Android development, there are various architectures like MVC, MVP, and MVVM, and in Flutter, options like BLoC or Provider State Management. These serve as guidelines to simplify software development by segregating concerns. Your choice depends on your team and software requirements.

But why does code still become messy despite using these architectures? The answer is simple: neglecting the basics of writing clean code. Choosing an architecture pattern is just one aspect. Lengthy functions, unclear variable names, poorly named classes, and disorganized code structures are the real issues.


To address this:

Before delving into software architecture debates, focus on writing readable code.
Consider the practical tips for writing cleaner code from resources like:

1. [Clean Code — A practical approach
](https://medium.com/clarityai-engineering/clean-code-a-practical-approach-896546435235)

2. [Dev.to Article](https://dev.to/favourmark05/writing-clean-code-best-practices-and-principles-3amh)

3. [Java GitHub repository](https://github.com/leonardolemie/clean-code-java)

4. [Dart GitHub repository](https://github.com/williambarreiro/clean-code-dart)

Once you grasp the basics of clean code, then proceed to choose a suitable software architecture for your project. You can explore further by reading the "Clean Code" book by Uncle Bob and apply your knowledge to build cleaner, more maintainable software.
FlatList & SectionList in React Native
Published: 2023-12-17 16:51:59

In React Native, `FlatList` and `SectionList` are components provided by the React Native framework for efficiently rendering lists of data. They are optimized for performance and memory usage, especially when dealing with large datasets.

1. **FlatList:**
   - `FlatList` is used to render a scrollable list of data. It is suitable for long lists of data where the number of items might change over time.
   - It is a versatile component that efficiently renders only the items that are currently on the screen, recycling and reusing components as the user scrolls through the list.
   - It is commonly used when you have a simple list of items and don't need to organize them into sections.

   Example of using `FlatList`:

   ```jsx
   import React from 'react';
   import { FlatList, Text, View } from 'react-native';

   const MyFlatList = () => {
     const data = [
       { key: 'item1', text: 'Item 1' },
       { key: 'item2', text: 'Item 2' },
       // ... more items
     ];

     return (
       <FlatList
         data={data}
         renderItem={({ item }) => <Text>{item.text}</Text>}
       />
     );
   };

   export default MyFlatList;
   ```

2. **SectionList:**
   - `SectionList` is similar to `FlatList` but is designed to render lists with sections. Each section can have its own header and contains an array of items.
   - It is useful when your data can be logically grouped into sections, and each section has its own header.
   - Like `FlatList`, `SectionList` also efficiently renders only the items that are currently on the screen.

   Example of using `SectionList`:

   ```jsx
   import React from 'react';
   import { SectionList, Text, View } from 'react-native';

   const MySectionList = () => {
     const data = [
       {
         title: 'Section 1',
         data: [{ key: 'item1', text: 'Item 1' }, { key: 'item2', text: 'Item 2' }],
       },
       {
         title: 'Section 2',
         data: [{ key: 'item3', text: 'Item 3' }, { key: 'item4', text: 'Item 4' }],
       },
       // ... more sections
     ];

     return (
       <SectionList
         sections={data}
         renderSectionHeader={({ section: { title } }) => <Text>{title}</Text>}
         renderItem={({ item }) => <Text>{item.text}</Text>}
       />
     );
   };

   export default MySectionList;
   ```

Both `FlatList` and `SectionList` take advantage of the VirtualizedList abstraction to efficiently manage the rendering of items and sections, providing a smooth scrolling experience in React Native applications.
How to Run any Docker container
Tags: docker, devops, developers, development
Published: 2023-12-17 16:45:24

Hello,

I have created a short video on How to Run any Docker Container Please share and like, also subscribe for more interesting IT Content including shorts. 

{% embed https://youtube.com/shorts/p4AEqNhVGv8?si=vh3ViA4X_KP82xpW %}

Thanks
YouTube: [http://youtube.com/@valters_eu](http://youtube.com/@valters_eu)
Twitter: [http://twitter.com/valters_eu](http://twitter.com/valters_eu)
Website: [https://www.valters.eu](https://www.valters.eu)
How to Setup Docker Portainer
Tags: docker, devops, developers, development
Published: 2023-12-17 16:41:20

Hello,

I have created a short video on How to Setup Docker Portainer Please share and like, also subscribe for more interesting IT Content including shorts. 

{% embed https://youtube.com/shorts/IPFJvAM7xXQ?si=d7EwLmBIK3bmAziL %}

Thanks
YouTube: [http://youtube.com/@valters_eu](http://youtube.com/@valters_eu)
Twitter: [http://twitter.com/valters_eu](http://twitter.com/valters_eu)
Website: [https://www.valters.eu](https://www.valters.eu)
Day 99: Match Pair
Tags: webdev, frontend, javascript, angular
Published: 2023-12-17 16:30:00

## Question
Create React or Angular code snippet that should allow the user to play [match pair](https://en.wikipedia.org/wiki/Matching_game#:~:text=Participants%20need%20to%20find%20a,pair%2C%20by%20using%20their%20memory.) game


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lwkgk9rnrozpnyxkjah.gif)


{% collapsible **Show Hint** %} 

1. Create an array of card symbols, shuffle it for randomization.
2. Implement a click handler to flip cards and check for matches.
3. Use CSS or animations for visual feedback, and track matched pairs to determine game completion.

 {% endcollapsible %}



Check the comment below to see answer.
Seed Stage Ideals - Tech Stack
Published: 2023-12-17 16:04:10

I have worked in seed stage startups, mid-stage startups, and bootstrapped early stage startups. If I had to pick tools and methods for a new company, here is what I would choose.

## Ecosystem

Typescript - large ecosystem, one of the few isomorphic options (besides elixir + liveview, c#/blazor, laravel, or rails)

## Front end
 
Nextjs

Tailwind

react-query

zod(?)

trpc client

## Back end

Expressjs trpc server

Prisma (postgres)

Email?

Background jobs?

Lodash
Using cva (Class Variance Authority) to scale TailwindCSS
Tags: frontend, tailwindcss, css, webdev
Published: 2023-12-17 15:41:37

While TailwindCSS is a great styling solution, it has a scalability issue and it may quickly go out of hand when writing huge components with a lot of different states. Even when using clsx utility it's still hard to maintain and extend, and this is when cva (Class Variance Authority) library shines. 

If you are using shadcn/ui—which is a fantastic component library, by the way—then you're already using cva,  shadcn/ui uses it for managing different component states and configurations, for example, the button component has multiple variants (default, secondary, outline...), if you try to implement it by doing conditions manually, the code will quickly start to look ugly and hard to extend, but with cva, it's quite simple!

let's try to write the same component with those three ways: no-libraries, with clsx, and with cva.
No-libraries:
```jsx
export const Button = ({ variant = "default", className, ...props }) => {
  return (
    <button
      {...props}
      className={`inline-flex items-center justify-center ${
        variant === "default" ? " bg-primary text-primary-foreground hover:bg-primary/90" : ""
      }${
        variant === "secondary"
          ? "bg-secondary text-secondary-foreground hover:bg-secondary/80"
          : ""
        // ...
      } ${className}`}
      // 🟥 Hard to maintain and looks ugly.
    />
  );
};
```

clsx:
```jsx
export const Button = ({ variant = "default", className, ...props }) => {
  return (
    <button
      {...props}
      className={clsx(
        "inline-flex items-center justify-center",
        variant === "default" && " bg-primary text-primary-foreground hover:bg-primary/90",
        variant === "secondary" && "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        // ...
        className
      )}
      // 🟧 More readable but still not very scalable.
    />
  );
};
```

And now with cva!:
```jsx
const buttonVariants = cva("inline-flex items-center justify-center", {
  variants: {
    variant: {
      default: "bg-primary text-primary-foreground hover:bg-primary/90",
      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
    },
    size: {
      default: "h-10 px-4 py-2",
      sm: "h-9 rounded-md px-3",
      lg: "h-11 rounded-md px-8",
    },
  },
  defaultVariants: {
    variant: "default",
    size: "default",
  },
  // 🟩 Readable and pretty easy to maintain and scale.
});
export const Button = ({ variant, size, className, ...props }) => {
  return <button {...props} className={buttonVariants({ variant, size, className })} />;
};
```


### Reference
- [cva](https://cva.style/docs)
- [shadcn/ui](https://ui.shadcn.com/docs)
- [clsx](https://www.npmjs.com/package/clsx)
Seed Stage Ideals - Continuous Delivery
Published: 2023-12-17 16:01:28

I have worked in seed stage startups, mid-stage startups, and bootstrapped early stage startups. If I had to pick tools and methods for a new company, here is what I would choose.

## Cloud

Production: AWS fargate, ecr

Automation: Cdk or terraform

## Deployment

Merging: 0. run packaged build in codespace and publish to container registry. 1. run staging deploy, automated deployment test, destroy staging 2. run prod deploy.

## Observability

Splunk w/structured logging (forgo tracing)

Sentry

Datadog/cloud watch metrics

## Instances

Demo/Sandbox: use production with isolated demo account data
Seed Stage Ideals - Continuous Integration/Dev Env
Published: 2023-12-17 15:58:01

I have worked in seed stage startups, mid-stage startups, and bootstrapped early stage startups. If I had to pick tools and methods for a new company, here is what I would choose.

## CI/Dev Env

Preview Environment: PR previews from codespace port forwarding

Database Provider: Neon (postgres)

Developer Environment: Codespace + vs code remote

CI: no Github actions for tests, developers run tests inside of codespace before merging

Test time monitoring: buildpulse; add script which uploads junit formatted results after each complete local build of main branch

Build time monitoring: send data to elasticache

Source repo: Github (prefer open source codeberg to or gitlab, but start with github)