teleren/devto huggingface dataset:
Kicking off Otomato Blog on Dev.to
Tags: otomato, devops, blog
Published: 2021-10-04 08:38:53

---
title: Kicking off Otomato Blog on Dev.to
published: true
description: Kicking off Otomato Blog on Dev.to
tags: otomato, devops, blog
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21ap06lzi2h31gachh8i.jpg
---
*Cover Photo by Leah Kelley from Pexels*

I've always loved blogging. And was never consistent about it.
Nevertheless in the 5 years of Otomato we've published numerous technical and conceptual posts on all kinds of online media: the official [Otomato website](https://otomato.io), LinkedIn, Medium, [DevOpsCon newsletter](https://devopscon.io/blog/do-we-need-a-service-mesh/) and even our clients' dev [blogs](https://blog.taboola.com/scaling-out-jenkins-based-ci-with-docker-and-nomad/)

In the last year I grew more and more in love with Dev.to as a platform for engineering-oriented blogging.

And it's time we started growing our presence here.

From now on the plan is to publish blogs on our website and republish everything here - where more engineers can actually access and enjoy this content.

A series of exciting new posts on CircleCI from @spiroman is coming up very soon! 

Stay tuned!
Content matters
Tags: hacktoberfest, webdev, javascript, programming
Published: 2021-10-04 08:27:02

These days the best way to create an audience and let people know what - we are doing is by content creation. Like there are tons of wonderful projects going on but very few of them actually appeal to people because there's not much going into branding. As a result a lot of great projects remain un-noticed. 
So me being a Graphic & Content Designer primarily, if I can help with that someway that would be great.
TaskForce Week 5
Published: 2021-10-04 08:18:06

last week was awesome we have learned different connection of backend and frontend known as integration not only that we have learned we also agile communication.

**Front-end and Back-end Registration**

![front-end integration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/my8tjsj0bg2q473hz4pc.png)
 
fetching the api is always awesome part for the front-end developers where you integrate with api response and status and you decide what to show the client and handle errors that comes from the backend(api).
we have integrated LoT Dashboard with its backend where we had worked on CRUD functionalities. I personally at the end of the week I have integrated authentication process and consumed all data from the backend.

**Agile Project Management**

![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gx0umqy7qybc8hfwbqgq.png)
 
 
Thursday we had an interesting session with Thomas which was about agile project Management.
we have played a game where we had to act the role that we are given, I had a developer role in this game where I had to as a lot of question to the scrum master and project owner so that  as a team of developers we can understand well what the client(project owner wants).

Friday is always awesome this is where we wrap up what we did for the whole week and also plan for another.
As we approach approach the last week of the taskforce we have to brainstorm our final project where we have to demo on the graduation day.

We have reached the end of week 5 and started week 6 which is the last week of our task force and we are working on the final project.

hands crossed let's meet this Friday in project presentation.
thank you.
Hacktober Fest Project #1
Published: 2021-10-04 07:59:59

Hacktober fest has began !. 

As my first project I have decided to try out VueJs 3.
So lets talk about project ideas...

I had different suggestion starting from simple calendar which syncs with Google Calendars or GitHub contribution graph. 

However I looked at my old outdated ME website which I hosted on GitHub Pages for a while. Decided its time to refresh it.

My older page was previously written in Angular and it was pretty outdated in terms of design and functionality.
(I am a back-end geek so any front-end work is like black magic for me) 

Because I heard and tried a lot of VueJS 2 within my professional career life. I decided VueJS 3 will be nice fresh touch. So I went out there read about VueJS CLI and how to structure a VueJS project. 

End result can be found here. 
https://kbuczynski-nashpl.github.io/


I have supported my self using VueJS-Bootstrap components since I am not a front-end wizard.

Project #2 next. What it going to be... time will tell.
In-house or off-the-shelf anti-bot solutions?
Tags: programming, security, webdev
Published: 2021-10-04 07:25:51

As I was working on my [latest project](https://botmenot.com/) I wondered what was everyone’s experience in this category regarding in-house vs. off-the-shelf solutions.

As you most likely already know bots can have a negative impact on your website in a variety of ways:
* Wasting server resources, thus slowing down response times for human visitors
* Scraping the website content, which was made to be unique
* Faking human-generated content (eg. customer reviews)
* Performing various malicious action

Also, in the world of eCommerce bots are able to monitor prices, fake orders and monitor stock levels. 

So, if you’ve been using an anti-bot solution, did you have it “tailor-made” or was it off-the-shelf? How satisfied are you with it? Were you able to measure if it was a good investment? How did you come to the conclusion that you should use one in the first place?

Let me know!
Python Frameworks for Game Development
Tags: python, gamedev, computerscience
Published: 2021-10-04 07:06:19

With the increase in live industries, Python programming is a notably very good choice of the developers for immediate prototyping of video games.

Here’s a list of <a href="https://externlabs.com/blogs/top-10-python-frameworks-for-game-development/">Python frameworks for Game development</a> that would be helpful for Developers:

- Pygame
- Pykyra
- Pyglet
- PyOpenGL
- Kivy
- Panda3D
- Python-Ogre
- Ren’py
- Cocos2D
- Soybean plant bean3D
My first contribution to open source!
Tags: hacktoberfest
Published: 2021-10-04 06:45:50

Hello! I'm a student developer and I'm pursuing computer science engineering.


### Contributed my project
I've learned mostly from open source communities like freecodecamp and Khan Academy. I also wanted to be part of open source and to do something from my side! I came to know about Hacktoberfest this year and took this opportunity to contribute my project.

### Background

I'm brand new to open source and this would be my first contribution. I've earned 5 stars in C++ and 4 stars in Python and Java from Hackerrank. I've also developed some small projects on native app in Flutter and my most recent project was on Draft Automation.

### Progress

I've created a basic API which can detect and predict faces. In technologies I've used Python, facerecognition library, OpenCV, FastAPI and Uvicorn. 

### Contributions

I've contributed this project apart from it I've also contributed in various data structures and algorithms libraries. But unfortunately most of them has been excluded from Hacktoberfest 2021. 


### Reflections
I've came to know that #hacktoberfest provides opportunity for everyone from beginner to expert and it give you a chance to connect people like you. Currently I've 6 contributions and I would love to participate next year too!
Can anybody suggest a starter course or blog for newbie's?
Tags: beginners, codenewbie
Published: 2021-10-04 06:41:51

Hi there!

I have been working in the internet industry for more than 10 years now, currently as product owner and before that as online marketer / SEO specialist. I have worked with developers for almost ten years now and understand how to do CSS editing with Webtools and I did some PHP editing in Wordpress. I kind of understand what rule based programming means, but that's where my knowledge ends.

I want to learn how to code and do not really know where to start. I can look at some youtube video's or find some courses, but maybe some of you have some other tips as well?
tattoo design ideas

Tags: android, mobile, programming
Published: 2021-10-04 06:26:56

Tattoo photo editor is a quality tattoo design ideas app with realistic tattoos for applying it on your photo virtually before getting an ink. The tattoo maker app contains different types of tattoos such as Abstract,Insects, Pets, pattern,symbols,flower ,Gothic, hyper-realistic,Kat ,decorative heart ,Animal tattoos.
Download:
https://play.google.com/store/apps/details?id=com.sortscript.tattoo.on.my.photo.editor.tattoo_photo_editor
I have 6 months to prepare for placement. Basically, I'm a Computer Science student. How and what do I study?
Tags: codenewbie, programming, computerscience, javascript
Published: 2021-10-04 06:17:18

Let’s first look at what all skills you need to have for campus placements. Assuming that the companies are hiring for a software developer role, you would need:

1. Proficiency in any one programming language.
2. Very good problem solving skills and knowledge about data structures and algorithms like stacks, linked lists, searching, dynamic programming, etc. For complete list, can visit the syllabus at [Programming Pathshala’s website](https://renaissance.programmingpathshala.com/crack-coding-interviews#Learning) and can follow that
3. A good project for your resume. Would suggest a full-stack project.
4. Maintaining a good CGPA (>=8/10 in Indian context) would be a good idea.
5. Clean coding skills, design principles and patterns (Part of Low-Level Design)
6. Subjects in Computer Science like Operating Systems, Computer Networks, DBMS.

For roles different from SDE, there might be some other things you need to do. Statistically speaking, SDE roles are the most common. So, it is a good idea to stick to those.

Now, all this might seem a little daunting, specially if you have to do it by yourself in 6 months. But, ideally it is very much possible if you put in the efforts.

Apart from that, if you think you would require guidance from alumni of top tech companies, do selected problems from each topic that cover all the subpatterns of a topic, give mock interviews and/or need referrals, you can also opt in for a 6-month interview preparation course with us at [Programming Pathshala.](https://renaissance.programmingpathshala.com/crack-coding-interviews)

Note: 
After considerable discussion with [Bharat Khanna](https://www.linkedin.com/in/bharat-khanna-717b4817b/), co-founder of Programming Pathshala, I was able to formulate this response. Who also happened to be an ex-SDE at Tower Research and a codeforce candidate master.
How I maintain large-scale dataset in react
Tags: javascript, typescript, react, webdev
Published: 2021-10-04 06:08:12

Frontend technology turns in robust at current decades. Modern web technology now more dynamic, more interactive seems like more realistic then earlier. Business owners want more engaging of user and there is a cold-war among companies to, how provides more realistic feel, more efficient user-experience for potential customers. And here data plays a big game. If we are on frontend side then terms going like how efficiently maintain data at frontend. Today we are going to explore, how productively we could maintain large-scale data-set at frontend.

[Live Preview](https://large-dataset-with-react.netlify.app/)
[Source Code](https://github.com/menomanabdulla/large-dataset-with-react)

## Pagination: 
Pagination is one of conventional and proven way of handling large-scale of dataset. We can reduce pressure from DOM tree by using pagination in large data context. As well as it’s also favorable for makes   frontend UI organized and clean. For paginate I use react-paginate npm package. It’ s really highly customizable and super simple to use. For customization it has a large list of props,  personally  I found it handy for dealing with large-scale data-set. 

## Infinite-scroll: 
Infinite-scroll is more trendy approach of maintain large-scale of data-set at frontend. I love infinite-scroll for its smoothness. Infinite-scroll is a bunch handy for news-feed component for this a large amount if popular platform are using infinite-scroll like facebook, twitter, linkedin most of the social-media platform are using infinite-scroll concept. In react we can use infinite-scroll by a popular package called ‘react-infinite-scroll’. Most interesting things about ‘react-infinite-scroll’ are its size and usability. Super simple to use, with super handy use-case. 

## Virtualized and Window:
According to react-windows doc: 
1. React-window reduce the amount of work required to render the initial view and to process updates.
2. It reduces the memory footprint by avoiding over allocation of DOM nodes. 

React-window is new form of react-virtualized. React-window is smaller and faster than react-virtualized. I would suggest go for react-window instead of react-virtualized for those size, customizability and speed issues.

### Last-words:
Thanks for staying till now; I highly appreciate your effort. If you have any suggestion about maintaining large-scale data-set at frontend especially in react please share in comment box so that it will resourceful for others too. If you love this article let me know by your activity. Happy coding.
API Testing - Database State Validation in vREST NG
Tags: testing, vrestng, apitesting, tutorial
Published: 2021-10-04 05:50:27

Watch our video #tutorial on how you may validate the database state during the execution of API Test cases in the #vREST NG Application.

Video Link: https://youtu.be/dVdc8e0keiE

Playlist: https://youtube.com/playlist?list=PLmua155_WrDzt1AbB6iV5Lsw_Z7QrzZZ0

vREST NG is an enterprise-ready application for Automated API Testing. You can download and install the vREST NG application directly on Windows, OSX, and Linux via our website.

*Important Links:*
1. [vREST NG Website](https://vrest.io/?utm_source=devto&utm_medium=devto-desc&utm_campaign=video)
2. [Contact Email](mailto:support@vrest.io)
3. [Community Chat](https://discord.gg/NtRa7kw)
4. [Book a Live Demo](https://meetings.hubspot.com/dheeraj-aggarwal)

Please do like and share if you found this video helpful and let the voice heard by the testing community. Also, let us know your feedback by commenting on this post.
3 JS code snippets sites to use daily!
Tags: javascript, webdev, productivity, programming
Published: 2021-10-04 05:25:50

_Save for later._
<br/>

###[1loc.dev](https://1loc.dev/)
>JS utilities in single line of code.

![1loc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95r8jrbfr6h056eu5cwg.png)


###<br/>[htmldom.dev](https://htmldom.dev/)
>Managing DOM with JS.

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


###<br/>[30secondsofcode.org](https://www.30secondsofcode.org/)
>Snippets for all development needs.

![30secCode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ult6v1sod6666hxuap2l.png)


<br/>P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻
<br/>
Connect with me : [Github](https://github.com/deyRupak)
Support me : [Buy me a coffee!](https://paypal.me/deyrdx?locale.x=en_GB)
Форматер black и миграции
Tags: django, pycharm, black, docker
Published: 2021-10-04 05:19:52

### Описание проблемы
С недавних пор PyCharm перестал ругаться на форматирование, которые получается при использовании форматёра black и я полностью отказался от встроенного форматера. Сделал всё как описано в [этой инструкции](https://black.readthedocs.io/en/latest/integrations/editors.html#pycharm-intellij-idea). Потом настроил CI, чтобы он не пропускал код не соответствующий формату black. А чтобы плохой код не доходил до CI, настроил precommit hook в git. Всё хорошо и замечательно до тех пор, пока дело не касается миграций. В обычном коде я постоянно жмякую хоткей, который приведёт код в порядок. Исправил строку - жмякнул. Но в автоматически созданных миграциях нет необходимости открывать файл и из-за них комиты не проходили. Сгенерировал миграцию, попытался сделать коммит, переформатировал код, сделал коммит. И эта последовательность действий повторялась снова и снова. Хотелось этого избежать.

### Решение
Я работаю в Windows. Естественно, мой код работает в docker'е. Каждый раз запуская контейнер приложения из консоли я монтирую домашнюю папку. В результате, **сохраняется история** команд bash и django shell_plus между запусками контейнера.
А раз есть домашняя папка, то можно сделать инициализацию псевдонимов (алиасов). Вот содержимое моего файла `.bashrc`

``` bash
echo BASHRC
m () { ./manage.py $@; }
m1 () { MDO_DB=LOCAL m makemigrations $@ && black .; }

alias m2='MDO_DB=LOCAL m migrate'
alias mm='m1 && m2'
alias plus='m shell_plus --print-sql'

alias -p
```
* m1 - создание миграции
* m2 - применение миграций
* mm - создание и применение

Кстати, о переменной MDO_DB. Я могу переключаться между разными БД: локальной, тестовой и даже продом. За это отвечает упомянутая переменная. К проду подключаться могу, но никогда этого не делаю, а вот тестовому серверу подключаюсь часто, когда нужно пройти отладчиком на данных тестовой среды. И чтобы миграция применялась **только на локальной базе**, используется явное указание `MDO_DB=LOCAL`.

После использования псевдонимов мне не нужно отвлекаться на форматирования, т.к. все миграции и остальные файлы проекта полностью отформатированы.

### Глоссарий
- Хоткей - горячая клавиша
- Жмякнуть - нажать
- Псевдоним, алиас - alias
- Прод - production-сервер
- Глоссарий - словарик
Rock, Paper, Scissors game in Python
Tags: python, github, beginners, tutorial
Published: 2021-10-04 05:18:21

Hey there,  this is a simple GUI-Based Rock Paper Scissors game in python.

Link to the github repo: https://github.com/JRRyan606/Rock-Paper-Scissors-Tk-Gui



IMPORTANT, PLEASE READ THIS:

The credit for this project MUST go to Bro code, He made a video in his Youtube channel called Python rock, paper, scissors game where he created a CLI-Based rock, paper, scissors game in python. I have created the GUI version of it. There are some features that Bro code created in his rock, paper, scissors game that is NOT YET coded in my gui version of the game. I will be coding it soon...

Link to Bro code's Youtube channel: https://www.youtube.com/channel/UC4SVo0Ue36XCfOyb5Lh1viQ

Link to the Python rock, paper, scissors game Youtube video: https://youtu.be/GhPZHvhvlsk

If you want to address any bugs on this project or some improvements that can be made on this project, feel free to email me about it at: ryanjustin25706@gmail.com

This is my first Tkinter project using Python, any improvements or suggestions is highly appreciated!!. Thanks.






For those of you who have some problems seeing the code from the above github link, here's is the code: 

```
from tkinter import *
import random

win = Tk()
win.title("Rock, Paper, Scissors")
win.geometry("801x300")


options = ["rock", "paper", "scissors"]
computer = random.choice(options)




def show():
	info = "Computer choose: " + computer
	info2 = "You choose: " + str(e.get()).lower()
	if str(e.get()).lower() == computer:
		text3 = Label(win, text="ITS A TIE!!", font=('Arial', 18))
		text3.pack()
 
	elif str(e.get()).lower() == "rock":
		if computer == "paper":
			text4 = Label(win, text="The computer wins!, you lose", font=('Arial', 18))
			text4.pack()

		if computer == "scissors":
			text5 = Label(win, text="You win!, the computer lose", font=('Arial', 18))
			text5.pack()

	elif str(e.get()).lower() == "scissors":
		if computer == "rock":
			text6 = Label(win, text="The computer wins!, you lose", font=('Arial', 18))
			text6.pack()

		if computer == "paper":
			text7 = Label(win, text="You win!, the computer lose", font=('Arial', 18))
			text7.pack()

	elif str(e.get()).lower() == "paper":
		if computer == "scissors":
			text8 = Label(win, text="The computer wins!, you lose", font=('Arial', 18))
			text8.pack()

		if computer == "rock":
			text9 = Label(win, text="You win!, the computer lose", font=('Arial', 18))
			text9.pack()

	elif str(e.get()).lower() is not options:
		text10 = Label(win, text="There is no such thing as " + str(e.get()).lower() + " in this game. " + "Please enter the correct word", fg="red", font=('Arial', 18))
		text10.pack()

	text1 = Label(win, text=info, font=('Arial', 18))
	text1.pack()
	text2 = Label(win, text=info2, font=('Arial', 18))
	text2.pack()





lab = Label(win, text="Rock, Paper or Scissors?", font=('Arial', 18))
lab.pack()


e = Entry(win, borderwidth=10, bg="powderblue")
e.pack()


b = Button(win, text="Submit", font=('Arial', 18), bg="lightgreen", command=show)
b.pack()
win.mainloop()
```
Next.js toggle between grid and list view
Tags: nextjs, react, css
Published: 2021-10-04 05:16:35

Today we'll be building a simple yet super effective toggle function.
It will give us the option to toggle between the list and grid view.

The result will work like the video below.

![Next.js toggle between grid and list view](https://cdn.hashnode.com/res/hashnode/image/upload/v1632638811731/wTlld_S4d.gif)

If you want to follow along, please use the [following branch](https://github.com/rebelchris/next-tailwind/tree/active-link) as your starting point.

## Managing the state in Next.js

Since Next.js is React, we can use all the fantastic React state management tools, such as the useState, which we'll use for this purpose.

Open up your `pages/index.js` file and import the `useState` from React.

```js
import {useState} from 'react';
```

Then inside our page, we can define the state and its default value.
In our case, we'll use a boolean, where the default value (false) means it's in grid view, and if it's true, it will be in list view.

```js
const [toggleViewMode, setToggleViewMode] = useState(false);
```

The `toggleViewMode` will become the variable that we can read and use, and at the end of the line, you see `false`, which sets its default value.

The `setToggleViewMode` is the function we can call to change the value of this variable.

Let's go ahead and add a button that, on click, can change our variable.

```jsx
<div className="flex justify-end p-5">
  <button
    className="px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700"
    onClick={() => setToggleViewMode(!toggleViewMode)}
  >
    {toggleViewMode ? 'grid' : 'list'}
  </button>
</div>
```

> Add this code above the current wrapping div

The main things to watch for here are the `onClick` function, which will invoke every time we click this button. This button then calls the `setToggleViewMode` and passes the negative value it currently has.

> Remember using `!` in JavaScript is the logical "not" operator.

And the next part is based on what the current value is.
So if the value is true, we show the grid. Else we show the list.

## Next.js toggle between list and grid view

Now that we have this state and button working, we need to change our main wrapping div.

Currently it looks like this:

```jsx
<div className='grid grid-cols-3 gap-4 p-5'>
```

Note the `grid-cols-3` as this states the content should be split into three columns.

We want to show three columns if we are in grid mode. Else only one column, which will resemble list mode.

Change your class to look like this:

```jsx
<div className={`grid grid-cols-${toggleViewMode ? '1' : '3'} gap-4 p-5`}>
```

This will use the number we need based on the view mode variable.
And voila, we now have a grid/list mode toggle in Next.js.

You can find this complete code example on [GitHub](https://github.com/rebelchris/next-tailwind/tree/grid-list-mode).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)