teleren/devto huggingface dataset:
BOTS: Mischievous Pixel Avatars
Tags: javascript, art, canvasjs, programming
Published: 2022-09-26 14:57:23

This year I have coded and launched a small app (available on Google Play Store and as a PWA), where you can generate an avatar (looking like a square bot), and give it a name, a rarity/probability and a class. The name is BOTS.

![Iron Carnival: BOTS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xa9aglncgs992is57lm1.png)

![Iron Carnival: BOTS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aq5ii98dsr50tz1bg00l.png)

It started small, mostly in JavaScript and Canvas. Later, a database has been added, but things didn’t go according to plan, and I switched from PouchDB to SQLite3 to SleekDB and then back to PouchDB. When the number of bots grew from a few to a few hundreds, I decided to go with a proper PHP/MySQL implementation and a membership system. This is how BOTS 2 came to life – a user-generated Bot app, with no constraints, no microtransactions, no time limit.

I am not looking to keep the Google Play Store app any more, so I will turn this into a website (also PWA-ready), with full membership capabilities, user ranks, badges, points, profiles and more.

The logic behind the main Bot generation is based on random settings, while some of them are linked. There are custom eyes, custom textures, custom colours, random elements and items, random names, random classes and random rarities.

![Iron Carnival: BOTS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/npt9mdpbj9lcq6vk6xn5.png)

This is how BOTS started. We moved all the code into a Canvas element and started building everything in there, with zero HTML or CSS. BOTS evolved, and we got around 10 different parameters to play with and randomize their values. As my son wanted to be able to play with these parameters, I exposed them all as HTML checkboxes and <select> dropdowns.

Fast-forward a few weeks, I had a fully working PWA and a native Google Play app on my phone. As the “requirements” evolved, I needed to save the generated Bots in a small database. So, as I was saying in my previous article, I switched from PouchDB to SQLite3 to SleekDB and then back to PouchDB. When the number of Bots grew from a few to a few hundreds, I decided to go with a proper PHP/MySQL implementation and a membership system.

Fast-forward this week, I have a fully working website with a membership system and a dynamic Bot generation system. There are badges, texture packs, and upcoming trading and collection features.

One of the features under heavy development is a parameter-based generation system with lots of variables. And I mean lots.

So, finally, here it is, the BOTS website – [Iron Carnival: BOTS](https://ironcarnival.com/).

I wrote more about the process here – [BOTS v2: Development Update](https://getbutterfly.com/bots-v2-development-update/).
Youtube Metadata
Published: 2022-09-26 14:56:23

es una excelente herramienta para extraer metadatos, thumbs (la típica foto de portada) tanto del video como del canal, fotos del canal, etc etc.

Vamos, todo lo que te puede interesar de forma rápida y sencilla.

Por aquí tienes la página del desarrollador: https://lnkd.in/e5RYDcm

#mondaytool #tool #cybertool #herramienta #tutorial #cyberhunter
How to create python cli app and upload pypi
Tags: python, cli, example
Published: 2022-09-26 14:56:19

---
title: How to create python cli app and upload pypi
published: true
description: Super Simple python cli base project 
tags: python, cli, example
//cover_image: https://direct_url_to_image.jpg
---

There's a super simple python cli project i made.
Repository is https://github.com/jujumilk3/python-cli-base

This project made by less 100 line of codes So Very easy to understand how it works. As written, If you wanna create some python cli app, Just fork or copy it and build yours.

Also this app registered at pypi, so you can install and test it.
Just type `pip install python-cli-base` to install.
INTRODUCTION
Tags: beginners, career, computerscience, writing
Published: 2022-09-26 14:50:26

Hey there! 
I'm Nihal student at Vindhya Institute of technology and science Satna(INDIA).Currently I'm in first year of college. I am a computer science student.

I'm Intrested in Full stack Development - Right now I am learning MERN Stack Development . I have interest in DevOps-Cloud computing-Web 3 - Blockchain.

I'm Here to make connection and network with people.
I want to learn in public and share in public. I'm always willing to learn new things.  I'm really passionate about coding and I'm always looking  for new ways to learn and improve my skills.

I'm excited to start my journey and can't wait to see what the future holds for me.

I'm confident that i have what it takes to be a successful engineer, and I'm looking forward to making a difference in the world.


THANKS,
I Hope you Would like my Introduction
Health Reminder Extension for Chrome
Tags: javascript, html, css
Published: 2022-09-26 14:32:50

With this counter,computer enginers can leave the computer in 50 min parts. It will prevent the harms of continuous work on health.
An application that prevents people working at the computer from staying at the computer for hours.

This application warns the user in 50-minute periods.

https://chrome.google.com/webstore/detail/health-reminder-counter/bbhonneonophpenemfhaagcnfglflbpj

https://github.com/ahmetilhan24/health-reminder-counter
My Journey Into Tech
Tags: beginners, programming
Published: 2022-09-26 14:30:45

      

## **My Journey Into Tech**
My name is Favour Yusuf and I’m a student of CodeLab. My journey into tech wasn’t clear cut. I’ve always been an enthusiast for tech but never thought I’ll embark on it someday. The problems was boot camps are expensive and it’s a pretty huge decision to make, so I made my research and I found a community that offer full scholarship. CodeLab is a Tech Hub located in Ajegunle that trains young Adults who are economically disadvantaged in slums communities with programming skills, training them to become world class software developers building Application for Desktop, Mobile and the Web. CodeLab is established to provide a more favorable option over what the street has to offer. Training with a rare skills of becoming a Robotic Engineer, Leader/Entrepreneur, Software Developer, developing tools that will improve companies productivity and developing tools for social good. Codelab core goal is to redeem time and eradicate poverty in Ajegunle.
I went through series of interviews and I was offered a scholarship. As a novice, Codelab accepted me as one of their beneficiaries for the scholarship to become a Full-Stack software engineer. At first, I thought I’ll just be learning programming languages and how to use them but it was beyond that. I was quite surprised when we started having Transformational leadership class (which we usually call TL Class). This class improved me personally and helped me become a transformational leader. 
 Programming allows you to solve problems which is one of the things I love most about it. You must have a strong sense of motivation because the job itself demands a lot of commitment and deep learning. 
I should have mentioned that the path hasn't been easy. Key elements include perseverance, diligence, and a tenacious attitude, among others. I just have to keep going. I am not defined by my gender, and I am willing to take on all tasks. My course-mates and I share a mutual respect for each other.
I personally don't give up. I enjoy discussing technology, programming languages, and the Internet. I am a code monster. In the end, I don't care that there are more men than women in my place of employment. Working with decent individuals who are enthusiastic about their jobs and receiving the same respect and consideration as everyone else on the team are the things that matters to me.
Overall, all I need to do to become a female developer is what any other intelligent developer would do. Spend my weekends and late evenings in front of the computer writing code, fixing bugs, and creating my own projects, read articles, going over my training by instructors and practice ten times daily.
I was taught how to work with a team using the agile methodology for project management. It helped me build my communication skills and relate with my colleagues in a better way. It also opened my eyes on how to use tech to solve real life problems. Building Solutions with Tech. 
I am excited about my journey into tech and what the future holds.
Produtividade com Testes e Vue usando VSCode
Tags: typescript, braziliandevs, vue, testing
Published: 2022-09-26 14:18:02

Criar testes bem organizados, separados e com uma boa descrição no Jest ou inserir toda estrutura inicial padrão de um componente Vue, pode ser verboso. Mas configurando o VS Code é possível inserir automaticamente toda pré-estrutura com a escrita de apenas uma palavra.

Desenvolvendo com o Visual Studio Code você pode turbinar sua produtividade de uma forma muito simples com **Snippets**!

## Como funciona?
Os snippets salvos no seu VS Code geram códigos pré-definidos ao digitar uma determinada palavra escolhida na sua configuração.

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


## Como criar um snippet
Com o VS Code aberto vá em **File** -> **Preferences** -> **Configure User Snippets**

Na paleta de comandos aberta digite a linguagem para qual deseja exibir o snippet, no caso de testes Jest digite **typescript** se for sua linguagem utilizada.

Será aberto um arquivo typescript.json com instruções para criar seu snippet.

Cada snippet tem a seguinte estrutura:

```json
"Nome do Snippet": {
		"prefix": // Palavra que chama o snippet,
		"body": [
			// Corpo com o código a ser gerado			
		],
		"description": // Descrição com detalhes do código
},
```

Ao escrever o body, em linhas que houver indentação use **`\t`** para aplicar a tabulação necessária. Cada `\t` representa um Tab.

Para indicar as pausas do Tab para digitação de texto pelo código use **`$1`**, substituindo o número pela ordem de inserção desejada em cada trecho.

Também é possível indicar o tipo de conteúdo a ser inserido em cada pausa com **`${1:conteudo}`** dando uma ideia do que escrever. E para definir um texto igual a ser usado em várias partes do código use o mesmo número de ID em todas partes que o texto for repetir.

Abaixo montei um snippet completo para Jest usando BDD que você pode aproveitar nos seus códigos ou adaptar como preferir:

{% embed https://gist.github.com/Merieli/7cb51e5e8ea6ded4b75956219342d5cf.js %}

O snippet de Vue é para uso com composition Api usando Typescript e Sass scoped, mas você pode adaptar como preferir:

{% embed https://gist.github.com/Merieli/11901fec52d2e6fa60d16ddbde8eca75.js %}

O artigo é para produtividade com Testes e Vue, mas também é possível criar snippets para outras linguagens. 

Espero ter ajudado! 😊
Flutter Hive kütüphanesi
Tags: hive, dart, flutter
Published: 2022-09-26 14:16:13

**Hive kütüphanesi**

Hive 0ms gecikmeli olduğu iddia edilen ayarlandığında secure storage sağlayabilen bir nosql dbdir.Redis tarzında key value pairle verileri saklar. Verileri android ve ios için uygulamanın dosya yazma alanında, web için indexeddb kısmında saklar. Tablolara ve sütunlara verilen HiveType ve HiveKeyler unique olmalıdır ve sütünda veri tipi veya alan adı değişince yeni bir key atanmalıdır. Freezed kütüphanesi benzeri anotasyonlarla ve önceden kod oluşturma(build_runner/generated code) ile çalışır.

[kaynak :)](https://github.com/sametmasaci)
PowerApps clone Flow within Solution
Tags: powerapps, flow, cli, alm
Published: 2022-09-26 14:15:54

## Introduction

In my experience using the **Power Platform** I’ve focused a great part
of effort in understanding and using its **ALM** that continue to evolve
providing very useful tools allowing to facilitate introduction of
Devops practices within the Microsoft low-code eco-system

## The Problem: Clone a Flow within Solution

During **Power Platform** development I use almost exclusively
**Solutions** and [Microsoft Power Platform CLI (aka PAC)] to manage
**ALM** and often I deal with problem to **clone a Flow within solution**.

> Really the problem was also for **clone canvas app within solution**
> but lately in preview Microsoft has released the feature [add canvas apps to solution by default]
> 🤩🤩🤩.

So I've decided to search for a solution and I landed on this forum topic [Copy/Duplicate a Flow in a Solution]
that explain how to clone a flow once unpack solution using [PAC].
Since I've already [enhanced PAC in Nodejs using ZX], I started to implements a new feature in [zx-powerapps-cli].

## Solution: zx-clone-flow command

Now a new command `zx-clone-flow` is available from the latest version of [zx-powerapps-cli] package. 
Usage is very simple once exported a solution from Power Platform Cloud Environment to Local File system (e.g. local git repo)
using either the macro-command `zx-export-solution` or directly using
the [PAC]low level ones (`pac solution export` / `pac solution unpack`) it is enough run `zx-clone-flow` providing
**solution folder** and **flow json file** and **et voila'** the flow will be cloned. 
After that you have to import solution to Power Platform Cloud Environment from Local File system using either the macro-command
`zx-import-solution` or directly using the [PAC] low level ones (`pac solution pack` / `pac solution import`)

### Video

Below I’ve recorded a brief video that cover the entire cloning lifecycle from beginning to the end

[![Clone Powerapps Flow in Solution video](http://img.youtube.com/vi/JMHBijiRQc4/0.jpg)](https://youtu.be/JMHBijiRQc4 "Clone Powerapps Flow in Solution")


## Conclusion

I hope this feature makes Flow development easier as it did for me, in
the meantime, happy programming and ... enjoy [zx-powerapps-cli]! 👋

----
Originally published at [https://bsorrentino.github.io](https://bsorrentino.github.io/bsorrentino/powerapps/2022/09/22/clone-copy-flow-within-solution.html) on Sep 22, 2022.

[zx-powerapps-cli]: https://www.npmjs.com/package/@bsorrentino/zx-powerapps-cli
[Copy/Duplicate a Flow in a Solution]: https://powerusers.microsoft.com/t5/Building-Flows/Copy-Duplicate-a-Flow-in-a-Solution/td-p/487483
[add canvas apps to solution by default]: https://learn.microsoft.com/en-gb/power-apps/maker/canvas-apps/add-app-solution-default
[enchanced PAC in nodejs using ZX]: https://dev.to/bsorrentino/enhance-cli-with-zx-522i
[youtube video]: https://youtu.be/JMHBijiRQc4
[PAC]: https://learn.microsoft.com/en-us/power-platform/developer/cli/introduction
[Microsoft Power Platform CLI (aka PAC)]: https://learn.microsoft.com/en-us/power-platform/developer/cli/introduction
How to create a polymorphic Button with variants in NextJS + TailwindCSS + TS + RadixUI
Tags: nextjs, tailwindcss, react
Published: 2022-09-26 14:10:39

This is a quick post just to share a nice way how to do it with full TypeScript support. It uses RadixUI Slot component for the polymorphism.

```jsx
import React, { forwardRef } from 'react';
import { cnMerge } from 'common/cn-merge';
import { Slot } from '@radix-ui/react-slot';

const baseClasses = /*tw:*/ `inline-flex items-center justify-center gap-2 font-bold text-center rounded-md`;

const variantsLookup = {
  solid: /*tw:*/ `text-white bg-primary hover:shadow-button duration-100`,
  outline: /*tw:*/ `text-primary border border-blue-300 hover:bg-blue-600 hover:border-primary`,
  subtle: /*tw:*/ `text-primary hover:bg-blue-600`,
};

const sizesLookup = {
  base: /*tw:*/ `px-5 py-2.5`,
};

type ButtonProps = {
  children: React.ReactNode;
  variant?: 'outline' | 'solid' | 'subtle';
  size?: 'base';
  href?: string;
  className?: string;
  asChild?: boolean;
};

const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
  const { children, variant, size, asChild, className, ...rest } = props;

  const classes = cnMerge([
    baseClasses,
    variantsLookup[variant || 'solid'],
    sizesLookup[size || 'base'],
    className,
  ]);

  const Comp = asChild ? Slot : 'button';

  return (
    <Comp {...rest} className={classes} ref={ref}>
      {children}
    </Comp>
  );
});

export default Button;
```

Usage:
```jsx
<NextLink href="/extension" passHref>
  <Button asChild>
    <a>
      <ExtensionIcon />
      Install Chrome Extension
    </a>
  </Button>
</NextLink>

/* ---- */

<Button asChild>
  <a href="https://wwww.test.com" target="_blank" rel="noopener noreferrer">
    <ExtensionIcon />
    Install Chrome Extension
  </a>
</Button>

```
What are your goals for the week? 9/26
Published: 2022-09-26 14:09:59

It's Monday, What are your plans for this week? Hacktoberfest starts Saturday are you participating this year? 

Have you done so previously?

- What are your plans for the week?   
- What are you building? 
- What will be a good end result by week's end?

**Last Week's Goals**
 How did I do?

- [:white_check_mark:] Finish prepping a repo to help demo a side project. Almost done with this. (I think).
- [:white_check_mark:] Continue on the job search.
- [:x:] Work some code challenges. No actual code challenges. But did code along with a live stream.
- [:x:] Create some CSS art and blog about it. Didn't code but did pic couple subjects to build. Some where Halloween Themed so may build/blog those in October.
- [:white_check_mark:]Blog on virtual/hybrid conferences I attended last week. 
- [:white_check_mark:]Attended virtual events. Attended Virtual Coffee on Thursday, and a Virtual Coffee Preptember session. Codecademy did a live stream on building a portfolio. 
[How To Build a Tech Portfolio | Part 1: Structure and Style with HTML and CSS](https://www.youtube.com/watch?v=ksWsetVQjiI)

**This Week's Goals**

- Prepare for HacktoberFest.
- Create CSS art.
- Blog on any CSS art.
- Continue Job search.

What are your goals this week?

Did you meet your goals last week?

```
-$JarvisScript git push
```
Music Monday — What are you listening to? (New Music Edition)
Tags: watercooler, discuss, music
Published: 2022-09-26 14:09:29

_cover image source: [Red Hot Chili Peppers](https://giphy.com/chilipeppers/)_ 

**For this week's topic, I'd like us to share music that is new. To further define those boundaries, I think anything from 2022 is fair game. If it's a new recording of an old song, that counts! Just do your best to pick out something new and let's hear it. 🙌**


![cartoon skateboard from Red Hot Chili Pepper's "Poster Child" music video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1mu4ara94nu1to58712.gif)

***

## How we do 

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions.

If you like talking about music, consider following the org [#music discussions](https://dev.to/music-discussions) for more conversations about music!

{% embed https://dev.to/music-discussions %}

***

So, wanna share some new music with us? _Note: you can embed a link to your song using the following syntax `{% embed https://... %}`. This should work for most common platforms!_

I look forward to listening to y'all's suggestions! 👂 🎶
Do DevOps suffer less ageism compared to software developers?
Tags: anonymous, discuss, career
Published: 2022-09-26 13:53:41

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._ 

***


Don't want to cause any grief or pain with this question, but it's been on my mind a lot lately. I'd love to hear from the community what their thoughts are on this topic.
[DOCKER] [NODE]: Como 'buildar' a node_modules só quando for necessário!
Tags: typescript, javascript, node, docker
Published: 2022-09-26 13:34:35

## Introdução:

Nem todas as vezes que mudamos nosso código, isso significa que nós implementamos *novas dependências*: se não inserimos nenhum pacote novo no nosso projeto, então não há motivo algum para reconstruir (rebuild) a pasta `node_modules`.

Então, vamos entender como melhorar nossa **eficiência**, já que nosso tempo de **debugging e desenvolvimento** para aplicações Node rodando Docker será significantemente reduzido.

## Como Node Dockerfiles são implementados normalmente:

Vamos olhar rapidinho esse `Dockerfile` que está **mal** implementado.

```
FROM node:16

# Cria diretório do aplicativo
WORKDIR /usr/src/app

# Copia o código inteiro
COPY . .

# Instala as dependências
RUN npm install

# Roda o servidor
EXPOSE 8080
CMD [ "node", "server.js" ]
```

Todo o problema de eficiência aqui reside 
na linha `COPY . .`.

Isso é **ruim**, pois fazer isso significa que: todas as vezes que você fizer uma mudança no código presente em `.`, a pasta `node_modules` terá que ser reconstruída, de novo e de novo e de novo...

## Arrumando isso:

Ao invés disso, nós devemos **primeiramente**  copiar *apenas* nosso arquivo `package.json` e `package-lock.json` (que controlam nossas dependências) para o diretório do aplicativo e então instalar elas.

Então, vamos atualizar nosso `Dockerfile` para:

```
# Copia package.json e package-lock.json
COPY package*.json ./

# Instala as dependências
RUN npm install
```
E só então, copiamos o resto dos nossos arquivos:

```
COPY . .
```

Então, **nossa versão corrigida do Dockerfile** será:

```
FROM node:16

# Cria diretório do aplicativo
WORKDIR /usr/src/app

# Copia package.json e package-lock.json
COPY package*.json ./

# Instala as dependências
RUN npm install

# Copiamos o resto dos arquivos
COPY . .

# Roda o servidor
EXPOSE 8080
CMD [ "node", "server.js" ]
```
## Explicação:

É tudo sobre **camadas cacheadas do Docker**, ou **Docker cached layers**.

Cada imagem do Docker consiste de uma série de camadas.

Comandos no seu `Dockerfile` vão gerar novas camadas.

Ao invés de manter tudo dentro de uma só camada, nós devemos quebrar em partes diferentes.

Pois **o Docker sempre vai tentar usar uma camada que já existe, ao invés de criar uma nova**, se for possível.

Essa é a explicação simples e rápida.
Você pode ler mais detalhes na [documentação oficial](https://docs.docker.com/storage/storagedriver/).

## Conclusão:

Agora, toda vez que modificarmos a `package.json`, o comando `npm install` será executado novamente.
Caso não modifiquemos, então essa etapa será simplesmente ignorada.

Você pode verificar esse comportamento no log da imagem, procurando por ` ---> Using cache `, que indica que a pasta `node_modules` não está sendo reconstruída.

# Gostou do post? :D

Se você gostou, por favor considere me seguir ou favoritar esse post!
Run tests automatically on save
Tags: elixir, testing
Published: 2022-09-26 13:48:45

I was looking for a solution to run tests automatically every time I save any changes. The best way so far for me is the following [hex](https://hex.pm) package:

[mix_test_watch](https://hex.pm/packages/mix_test_watch)

## Install the dependency

```elixir
# mix.exs (v1.13)
def deps do
  [
    {:mix_test_watch, "~> 1.0", only: :dev}
  ]
end
```

## Configure it in your project

```elixir
# config/config.exs
import Config
​
if config_env() == :dev do
  config :mix_test_watch,
    clear: true
end
```

The `clear: true` option means that the screen will clear every time tests run. This is useful because it is easier to  scroll back to the top of the most recent test run.

## Start watching for changes

In your terminal or within a VS Code terminal, this works great:

```shell
mix test.watch --seed 0 --max-failures 1 --include pending
```

## Example

Here's an example of how this looks in VS Code:

![Run tests on save in VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v5a4jkcy2jm9zci49fl1.gif)

Enjoy!