teleren/devto huggingface dataset:
How to Install and Run Apache Kafka on Windows?
Published: 2022-03-01 19:31:18

Hi coders

## Apache Kafka

Apache Kafka is an open-source distributed event streaming platform used by thousands of companies for high-performance data pipelines, streaming analytics, data integration, and mission-critical applications.

[Download Apache Kafka](https://www.apache.org/dyn/closer.cgi?path=/kafka/3.1.0/kafka_2.13-3.1.0.tgz)

Save and extract file for example:
**C:\Software\Kafka\kafka_2.13-3.1.0**

Change the directory into file **zookeper.properties** and **server.properties** 

### zookeper.properties

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

Typing next command

`> zookeeper-server-start.bat ..\..\config\zookeeper.properties`

### server.properties

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

Typing next command

`> kafka-server-start.bat ..\..\config\server.properties`

# Topic

### Create

`>kafka-topics.bat --bootstrap-server localhost:9092 --create --replication-factor 1 --partitions 1 --topic test1`

Created topic test1.

### Describe

`>kafka-topics.bat --bootstrap-server localhost:9092 --describe --topic test1`

`Topic: test1    
TopicId: dhcREXgtS1e_047--6necw 
PartitionCount: 1       
ReplicationFactor: 1    
Configs: segment.bytes=1073741824
Topic: test1    
Partition: 0    
Leader: 0       
Replicas: 0     
Isr: 0`

### List

`>kafka-topics.bat --bootstrap-server localhost:9092 --list`

test1

### Update

`>kafka-topics.bat --bootstrap-server localhost:9092 --alter --topic test1 --partitions 10`

### Delete

`>kafka-topics.bat --bootstrap-server localhost:9092 --delete --topic test1`

# Producer

### Create

`>kafka-console-producer.bat --broker-list localhost:9092 --topic 
test1`
>holi
>qeu mas
>carlos
>hola

# Consumer

### Create

`>kafka-console-consumer.bat --bootstrap-server localhost:9092 --topic test1 --from-beginning`
holi
qeu mas
carlos
hola

`>kafka-console-consumer.bat --bootstrap-server localhost:9092 --topic test1 --from-beginning --property print.key=true --property key.separator=" - "`

- --property print.key=true 
- --property key.separator=" - "
 

[Source](https://kafka.apache.org/quickstart)
Problem Solving , Reality vs CS 
Tags: webdev, beginners, programming, tutorial
Published: 2022-03-01 19:25:45

One of the most important benefits of writing is making you think of every word and being precise. What is the relationship with problem solving ? Nothing , Keep reading !


Since the users of this site are developers ; i would like to 
talk about the thing called (_problem solving_)  because it is what seniors always advise juniors about , like saying  "Learn and Focus on problem solving" , i remember when i was really that total beginner i was always wondering : 
“Is there another hidden type of problem solving that I don't know ? “ And what kind of (problem solving) do they make geeky contests for ? 
I really don’t like this ‘geeky’ vibe but let's keep on . 

Over time with learning and reading and , i reached to a conclusion which is this article all about but let's start with some points: 

1-There is a “Computational” thinking and “Computational” problem solving , those are related to real life but not always , No one Adds this ‘Computational’ word because : 

2-Unfortunately most people repeat to others what they heard or were taught without thinking about it  .

3-Nowadays this Computational problem solving is like IQ tests. If you think of it as a measurement then you should know that people study IQ questions, question styles and memorize them . 

So if you are a ‘Computational’ problem solver you are not necessarily a real life problem solver , there is a big difference . 


 


Just let me tell you a final word (Conclusion i guess):  mixing technology with something real whether it is commerce or medical field or whatever is the best thing you can do if you really want to be helpful or real problem solver , otherwise I don't think so you are a problem solver !
Finding max value in a list might help you in your interview but it is not solving any real problem .
Class and Object in OOP
Tags: beginners, programming, class, tutorial
Published: 2022-03-01 19:15:27

## Class :
 A class is an entity that determines how an object will behave and what the object will contain. In other words, it is a blueprint or a set of instruction to build a specific type of object. It provides initial values for member variables and member functions or methods.

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

## Object :
An object is nothing but a self-contained component that consists of methods and properties to make a data useful. It helps you to determines the behavior of the class.


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

## Uses of Class :

- Class is used to hold both data variables and member functions.

- You can use class to inherit the property of other class.

- It enables you to create user define objects.

- It can be used for a large amount of data and complex applications.

## Use of Object :

- It is used to manipulate data.

- It enables data members and member functions to perform the desired task.

- It helps you to know the type of message accepted and the type of returned responses.

## Key Differences :

- A class is a template for creating objects in program whereas the object is an instance of a class.

- You can declare class only once but you can create more than one object using a class.

- Classes doesn’t have any values, whereas objects have its own values.

- A class does not allocate memory space on the other hand object allocates memory space.
Reflections: Culture as a Competitive Wedge in DevOps, with Google & Autodesk
Tags: culture, devops, teams
Published: 2022-03-01 22:47:28

---
title: Reflections: Culture as a Competitive Wedge in DevOps, with Google & Autodesk
published: true
date: 2022-03-01 19:02:07 UTC
tags: culture, devops, teams
canonical_url: https://www.armory.io/blog/reflections-culture-as-a-competitive-wedge-in-devops-with-google-autodesk/
---


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/002ofvxrq9ce8hsifml0.png)](https://resources.armory.io/featured-content/culture-as-a-competitive-wedge-in-devops)


Armory’s Stephen Atwell sat down recently with [Brandon Leach of Autodesk](https://www.linkedin.com/in/brleach/) and [Dave Stanke of Google](https://www.linkedin.com/in/davidstanke/) for a roundtable interview. During their far-reaching discussion, they explore various ways in which company and team culture can make or break modern DevOps teams.  I listened to the conversation, and a handful of takeaways struck me as elegant in their simple, yet genuine power to contribute to a culture of success.

- Seek to learn, not blame: seemingly small details in team culture can actually ripple out to have massive impacts on technical teams;
- Automate, then let go: identify and eliminate slow, outmoded manual processes, both in the development and deployment phases in order to build and take advantage of new systems that automate and accelerate workflows;
- Cross-team collaboration: [Generative culture](https://continuousdelivery.com/implementing/culture/) can often be found in mutually inclusive teams who are invested in each others’ success, and who unlock value by breaking down barriers and tackling common challenges via mutually developed systems and processes;
- Be a booster, not a laggard: it might seem obvious, but you can easily improve team morale (and your reputation) by showing with your code and yourself early, consistently; and
- Keep a beginner’s mind: those who think they know less about a topic—but throw themselves at learning and especially doing something about it—often become perceived by their peers as experts… potentially even more so than those who call themselves experts.

I hope you find this talk to be as impactful I did, and welcome your questions or comments. See you at the next one!

The post [Reflections: Culture as a Competitive Wedge in DevOps, with Google & Autodesk](https://www.armory.io/blog/reflections-culture-as-a-competitive-wedge-in-devops-with-google-autodesk/) appeared first on [Armory](https://www.armory.io).
Agile is cool but have you heard of Humane Development?
Tags: webdev, beginners, agile, career
Published: 2022-03-01 19:00:32

## Agile is great. 

In fact, that methodology drives many teams to create and deliver many successful products. 

However, at times it seems we can forget one of the MOST important things the Agile Manifesto champions: **"Individuals and Interactions over Processes and Tools"**. Many times we lose sight of who and what we're working on.

## Humane Development is also great!

Humane Development focuses on 4 main pillars.

1. Empathy
2. Honesty
3. Trust
4. Autonomy

The main axiom driving these these ideas forward is simple: 

```
We are humans
working with humans
to develop software
for the benefit of humans.
```

If we truly want meaningful progress then software should be (and can be) created with a minimum amount of pain. 

> The challenge is simple, strive for this in your workplace, strive for this in your career, and strive to become a Humane Developer.
 

Life is too short to work for a company, a team, a boss, a Project Manager, a Product Manager, that doesn't understand this. 

`/endrant`

https://humanedevelopment.org
CSSBattle | #10 Cloaked Spirits
Tags: css, cssbattle, challenge, cloakedspirits
Published: 2022-03-01 18:55:07

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for [CSSBattle - #10 Cloaked Spirits](https://cssbattle.dev/play/10) challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.

---

> #### Challenge:

![Cloaked Spirits Challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jloempwfiifgvbjkm5tx.png)

---

> #### Solution:

```html
<div class="container">
  <div class="parent">
    <div class="child left">
      <div class="outer-ring">
        <div class="inner-ring"></div>
      </div>
    </div>
    <div class="child center">
      <div class="outer-ring">
        <div class="inner-ring"></div>
      </div>
    </div>
    <div class="child right">
      <div class="outer-ring">
        <div class="inner-ring"></div>
      </div>
    </div>
  </div>
</div>

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    background: #62306D;
    display: flex;
    justify-content: center;
    align-items: end;
  }
  .parent {
    display: flex;
    align-items: end
  }
  .child {
    background: #F7EC7D;
    width: 100px;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
  }
  .left, .right {
    height: 150px;
  }
  .center {
    height: 250px;
  }
  .left, 
  .center, 
  .right {
    display: flex;
    flex-direction: column;
  }
  .left .outer-ring,
  .center .outer-ring,
  .right .outer-ring {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .left .inner-ring,
  .center .inner-ring,
  .right .inner-ring {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .left .outer-ring,
  .right .outer-ring {
    background: #AA445F;
  }
  .left .inner-ring,
  .right .inner-ring {
    background: #E38F66;
  }
  .center .outer-ring {
    background: #E38F66;
  }
  .center .inner-ring {
    background: #AA445F;
  }
</style>
```

---

> #### Key Takeaway(s):
- centering elements vertically and horizontally using flexbox layout

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Introducing frender: React in rust
Tags: webassembly, react, rust, webdev
Published: 2022-03-01 18:53:07

:sparkles: Four months ago, an idea came to me that maybe I could port React.js to rust with [`wasm-bindgen`](https://github.com/rustwasm/wasm-bindgen), regarding that functional components in React are just functions with special restrictions and `wasm-bindgen` supports casting between rust closures and js functions.

:tada: After 4 months of work, now I can proudly announce the alpha version of _**f**render_, standing for _functional rendering_. You can checkout some [examples](https://frender-rs.github.io/frender/), or follow the [guide](https://github.com/frender-rs/frender/tree/alpha#quick-start) in the GitHub README to write your first frender app! 

:memo: The future work will concentrate on the following goals:

- Make the api stable
- Integrate with webpack
- Server side rendering (Maybe frender can integrate with [Next.js](https://nextjs.org/))

:heart: _**f**render_ is still in alpha and not ready for production yet. Pull requests, issues and [donations](https://ko-fi.com/equalma) are welcomed. I will continue work on this project with the support and suggestions from the community.

{% embed https://github.com/frender-rs/frender %}
NestJS module for adding translations to the application, with a pipe for translating validation errors
Tags: nestjs, translate, i18n, validation
Published: 2022-03-01 18:40:34

# Installation
```bash
npm i --save nestjs-translates class-validator-multi-lang class-transformer
```

## Links

https://github.com/EndyKaufman/nestjs-translates - Source code

https://nestjs-translates.site15.ru/api - Demo application with nestjs-translates.

https://github.com/EndyKaufman/nestjs-translates-example - Example generated with nest cli

https://dev.to/endykaufman/nestjs-module-for-adding-translations-to-the-application-with-a-pipe-for-translating-validation-errors-2mf3 - Post in dev.to

https://twitter.com/KaufmanEndy/status/1498730314339954695?s=20&t=FwCcltTG-Vxut6M3JVPsCA - Twitter post

## Usage

Update file in **app.module.ts**

```typescript
import { HttpException, HttpStatus, Module } from '@nestjs/common';
import { ValidationError } from 'class-validator-multi-lang';
import {
  getDefaultTranslatesModuleOptions,
  TranslatesModule,
} from 'nestjs-translates';
import { join } from 'path';
import { AppController } from './app.controller';

@Module({
  imports: [
    TranslatesModule.forRoot(
      getDefaultTranslatesModuleOptions({
        localePaths: [
          join(__dirname, 'assets', 'i18n'),
          join(__dirname, 'assets', 'i18n', 'class-validator-messages'),
        ],
        locales: ['en', 'ru'],
        validationPipeOptions: {
          transform: true,
          validationError: {
            target: false,
            value: false,
          },
          transformOptions: {
            strategy: 'excludeAll',
          },
          exceptionFactory: (errors: ValidationError[]) =>
            new HttpException(errors, HttpStatus.BAD_REQUEST),
        },
      })
    ),
  ],
  controllers: [AppController],
})
export class AppModule {}
```

Create dictionaries **../assets/i18n/ru.json**

```json
{
  "word": "слово"
}
```
![example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34p0rro77ci4yt8lg1ki.png)
Shooting for the cloud

Tags: aws, beginners, cloud
Published: 2022-03-01 18:38:01

Hello,

I'm looking to see if I would enjoy working with the Cloud. The [**Cloud Resume Challenge for AWS**](https://cloudresumechallenge.dev/docs/the-challenge/aws/) seems like a good way to get hands-on experience in the quickest amount of time. How quick that will be, I'm not sure.

This blog is more to detail my process and what I learned as suggested. It's a good idea to log everything anyways. It's fun to look back at the past and to see previous struggles. I'll also try to remember to log how long some tasks take. 

I have access to a few resources thankfully. A lot of Udemy courses as well as the book from the author himself. If I get really stuck, I suppose I could take a look, but I feel like I should really use Google and try to find the answer on my own first. 

As far as steps, I think I will skip steps 1 through 3 for right now. At least, the full bit. I did take HTML and CSS back in college. I'm not 100% familiar but I'm sure it would not take me long to refresh. I can just put in some lorem ipsum or something as I figure out the actual hosting. Therefore, I will start with Step 4: Static Website.

My goal is to finish this in 2 months. Ideally, I would like to have it done by the end of March. However, I'll only have time to do this after my current job.
How to Setup Tailwind CSS with HTML
Tags: css, tailwindcss, webdev, opensource
Published: 2022-03-01 18:37:18

In this article, I'll show you how to install and setup the [Tailwind CSS](https://tailwindcss.com/) with your HTML project.

### Create a new project

Let's create a new folder `tailwind-html` and change directory to the newly created one.

```bash
mkdir tailwind-html

cd tailwind-html
```

### Create a package.json file

```bash
npm init -y
```

### Install the Tailwindcss dependencies

```bash
npm install tailwindcss@latest

npm install autoprefixer@latest

npm install @tailwindcss/forms
```

### Create the Tailwind configuration file

```bash
npx tailwindcss init
```

### Update the package.json file

Open the package.json file and make the following changes.

```javascript
"scripts": {
    "build-css": "tailwindcss build src/styles.css -o public/styles.css"
}
```

### Update the `tailwind.config.js`

Open the `tailwind.config.js` file and replace the content with the following code.

```javascript
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans]
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: [require('@tailwindcss/forms')]
};
```

### Add Tailwind plugins

Create a new folder `src` in the project root and new file `styles.css` in the `src` folder.

Add the following content to the `styles.css`

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

### Build the Tailwind CSS

You should run the command `npm run build-css` to build the css. This command create a new folder `public` with a file `styles.css`.

You should link `styles.css` in your HTML pages.

```html
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
```

I hope you found this article insightful.

**Let's connect** 🌎
- My blog [kirandev.com](https://www.kirandev.com/)
- Follow me on [Twitter](https://twitter.com/tokirankrishnan)
- Find me on [Github](https://github.com/devkiran)
Web 2 vs Web 3: What Exactly Sets Them Apart?
Tags: web3, blockchain, webdev, beginners
Published: 2022-03-01 18:23:16

One word. Ownership.

Web 2.0 - the internet as we currently know it-  is simply the interactive internet. Gone are the days of static web pages and users simply being consumers. In web 2, users now have the opportunity to generate large-scale content by interacting with and providing webpages information. The price of this interactivity is the rise of big data and [big tech leveraging off it](https://www.forbes.com/sites/joetoscano1/2021/12/01/data-privacy-issues-are-the-root-of-our-big-tech-monopoly-dilemma/). Platforms like Facebook, Google and YouTube have amassed vast amounts of user information and over the years, web 2 has been marked by innumerable data and privacy breaches, all thanks to targeted advertising, the thorn in our collective flesh. In a bid to make a profit off user-generated content, platforms have turned users into products, and today we have less and less control over how our data is being used.

To solve these data and monopoly concerns is web 3.0.

Web 3 is an iteration of the internet with the singular ideal of reclaiming user ownership by drastically minimizing data, privacy, and security concerns through a decentralized internet powered by one thing; blockchain technology. Decentralization is the core value of the ongoing third evolution of the internet. Unlike web 2.0, in web 3.0, the internet is for the people and by the people. You and I- the users- will become owners. We will own our data, our content and have the opportunity to make a profit off it. Because centralized authorities will not exist in web 3, there will be no censorship, fewer data privacy concerns, and more security.

The future with web 3 is one that amongst other things, promises complete ownership to its users, a stark difference from what we currently see in web 2. Perhaps with this evolution we can now justify the phrase, power to the people.

_**This article is my first task as a student in the [Zuri](https://zuri.team/) [Blockgames](https://blockgames.gg/) x [Nestcoin](https://nestcoin.com/) program.**_
💡 Animate newly added HTML elements with CSS
Tags: css, html, animation
Published: 2022-03-01 16:00:22

---
title: 💡 Animate newly added HTML elements with CSS
published: true
description: Using css to animate newly added HTML elements
tags: css,html,animation
//cover_image: https://direct_url_to_image.jpg
---

We all have been in a situation where we need to animate newly added HTML elements. We tinker with timeouts, initial state or any other scripting logic to add/remove classes etc.

If you want a simple solution, here is one for you. It only uses a single animation `keyframe` to take care of the newly added elements. CSS Animations with take care of the default state based on the initial element styles.

```css
@keyframes animate {
  100% {
    opacity: 1;
  }
}
```

You can also play with the properties using `css` transforms to achieve the animation you need. 

In the example below you have 2 versions.
Normal Item which uses `opacity` to create a fadeIn effect while the Fancy Item also has some `transform` properties attached to it. 

{% embed https://codepen.io/hunzaboy/pen/QWOJvzM %}

Enjoy! :)
React Hooks - Introduction
Tags: webdev, tutorial, react, productivity
Published: 2022-03-01 18:20:39

## A new month 'Thank you!'
I want to use this special opportunuity and medium, before I begin in writing this post, to say a big and wonderful 'thank you' to you all my dear readers, who started with me and are on this journey together; It's a pleasure writing as a developer, reseacher and philosophical analyst here on this platform.
🙌🙌 Happy New Month! 🎉🎉🎉.

## What are React Hooks

Before my deeper dive into React states and logics, whenever I heard the term '`React Hook`' the picture that would always pop up in my mind first is a kind of knitting tool with hooks on both ends that can connect from the two ends. Well I was not wrong either, just that React hooks are something more.