teleren/devto huggingface dataset:
Was the 2022 Kenyan general election successful because of Blockchain technology?
Tags: discuss, blockchain
Published: 2022-12-27 01:33:48

With the promise of free, transparent and credible elections by the [IEBC](https://www.iebc.or.ke) each season, Kenyans on August 2022 participated in an election that some felt delivered on all its promises while some found it quite opaque. 

Is it too bold to claim that the technology that made the election unique compared to its predecessors  was [blockchain](https://en.m.wikipedia.org/wiki/Blockchain) ? Is the use of blockchain in elections even feasible ?

Some similar features that the election incorporated that can be seen in [Bitcoin's](https://bitcoin.org/en/) blockchain and that inspired this discussion are: 

1. Forms from polling stations being published on the IEBC website and made downloadable to all stakeholders. This mirrors the public nature of the Bitcoin ledger where all transactions can be queried and their addresses viewed by anyone. 

2. The use of biometrics to solve the issue of double voting. Bitcoin's blockchain solves the double spending problem. 

3. Once votes cast are recorded and signed by the officials, they are final, verifiable and cannot be amended. In Bitcoin, once a transaction is signed it is final.

It is clear that the IEBC designed the system to allow voters to verify all records which closely resembles Bitcoin's infrastructure. 

There are differences that can be seen however.

- Firstly, whereas the top officials of IEBC can change voter registration details and transfer voters, no admin in Bitcoin can move Bitcoin or change transactions. 

- Also, the IEBC polling station biometric devices have the full register of voters but can only allow voters registered for a specific location. In Bitcoin, one's transactions can be signed by any node on the network. 

Use of blockchain in elections is still an emerging area but blockchain or not, it is safe to say that the 2022 Kenyan election was innovative and disruptive. 
The success of the election was due to the Kenyan people who chose to make it successful. 

What do you think could make the next election even better ?
My Favourite Resources for Practicing Web Development
Published: 2022-12-27 00:45:27

## 1. [Frontendmentor.io](https://www.frontendmentor.io/)

Frontendmentor provides designs, and challenges can be completed in any stack. The challenges can also be as simple or complicated as you like.

## 2. [Chingu.io](https://www.chingu.io/)

Chingu puts participants into groups for a 6-week team project, which provides team work experience.

## 3. [Freecodecamp](https://www.freecodecamp.org/learn)

While freecodecamp lessons are not great the exercises are amazing. 

## 4. [Exercism](https://exercism.org/)
Exercism is a good place to develop programming language fluency. It supports 62 different programming lanauges. It is free and mentoring is available if needed. I find most of the mentors very knowledgable. I have also mentored on exercism and it was a great experience.
Do you need to know Javascript to learn React?
Published: 2022-12-27 18:23:23

---
title: Do you need to know Javascript to learn React?
published: true
date: 2022-12-27 00:00:00 UTC
tags: 
canonical_url: https://www.frontendundefined.com/posts/answers/need-javascript-react/
---

Learning frontend development can be overwhelming. There are a lot of things to learn and on top of that, you are not sure how much of each thing you should know. With most modern websites being built with frontend frameworks like React, you might be wondering whether you can skip learning Javascript and jump straight into React.

While you could jump straight into React without knowing Javascript, I don't recommend it. Javascript is still the only\* programming language of the web and while it might seem like all these frontend frameworks have their own language, they only extend Javascript. So when using a Frontend framework like React, you still write Javascript while using the extra features that the framework provides. So if you jump into React without learning Javascript first, you will not be able to understand and use React effectively.

So the real question then is how much Javascript you need to know to learn React. Do you need to fully master it or is knowing the basics enough? While more Javascript you know the better, you definitely don't need to master every single Javascript concept before starting to learn React. You can find a more detailed list of what Javascript concepts would be the most useful [here](https://www.frontendundefined.com/posts/answers/how-much-javascript-react).

<sub>*WebAssembly is the other programming language of the web but it is designed to be used for computationally expensive tasks and it will not replace Javascript</sub>
Consejos para lograr un software limpio, mantenible, testeable y escalable
Tags: javascript, solidjs, architecture, ioc
Published: 2022-12-26 23:47:24

**Hola atomeros, les saludo con cariño y espero que estén bien**.

🤜🤛🤓 

Con el objetivo de lograr un software limpio, mantenible, testeable y escalable, les comparto una combinación de principios y patrones de diseño que he encontrado útiles.

**Está basada en el uso de:**

1. Dependency injection (Patrón de diseño)
2. Inversion of control (Principio de diseño de software IoC)
3. Dependency inversion (Principio SOLID - DIP) 
4. Hexagonal arquitectura(Arquitectura del software)

Es importante tener en cuenta que la combinación ideal de estos principios y patrones de diseño dependerá del tamaño del proyecto. 

Para un software grande, se recomienda la implementación conjunta de:

A. La implementación de (DIP) con Hexagonal arquitectura.
B. La implementación de Inversion of control con Dependency injection.

> Esperando haberles ayudado ❤🚀

--- REF ---

**Para quienes necesiten más información les comparto mis referencias:** 

- [Introducción a las Arquitecturas de las Aplicaciones Web - Arquitectura Hexagonal](https://www.youtube.com/watch?v=XqgtFLMPaX4&list=PLj2IVmcP-_QNae4kZpMNk-yz1cNFyuRqS&index=1&t=1090s)
- [Cómo implementar la arquitectura hexagonal en frontend (Javascript/Typescript) React - Estructura de directorios - Ejemplo](https://github.com/dennysjmarquez/hexagonal-architecture-frontend)
- [Patrón Inversion Of Control - IoC](https://www.youtube.com/watch?v=ttWvOXzYF5Y)
- [Inversión de Control en Arquitectura Frontend
](https://dev.to/adevintaspain/inversion-de-control-en-arquitectura-frontend-4h5b)
- [Inyección de dependencia en Javascript](https://www.youtube.com/watch?v=N-NnxiVln8I)
- [Dependency inversion](https://www.youtube.com/watch?v=jHZdf5xFZOA)
- [Inversión de Dependencias vs Inyección de Dependencias vs Inversión de Control](https://anahisalgado.com/%F0%9F%A7%A0-inversion-de-dependencias-vs-inyeccion-de-dependencias-vs-inversion-de-control)
- [Desarrollo ágil con Arquitectura limpia Hexa3](https://medium.com/@dariopalminio/desarrollo-%C3%A1gil-de-ecosistemas-de-aplicaciones-hexagonales-3-capas-hexa3l-d6370bf11db0)

---

**-FIM-**
What language is the best to learn in 2022 if you're a solo developer?
Published: 2022-12-26 23:47:21

I'm a Java,Python developer and I've been looking to pick up a more modern language for solo projects.
My goal is to develop web applications with fast data crunching where I can have low level performance.
Which language is ideal for that?
My choices are
* F#: seems it supports fast data processing but its tooling is limited by DotNet and no native binaries
* Rust: seems low level processing is possible but steep learning curve and complicated syntax

Any other suggestions?
Credenciais da Veracode
Tags: veracode, ptbr, security
Published: 2022-12-26 23:04:14

Existem três credenciais que normalmente utilizamos em projetos da Veracode, duas para utilizar o SAST, Pipeline Scan ou Wrapper, e uma para o SCA Agent-Based. 

**SAST/Pipeline Scan/Wrapper**
Precisamos no [portal da Veracode](https://web.analysiscenter.veracode.com/login) resgatar duas credenciais, chamadas Veracode ID e Secret Key. 
Vamos acessar e clicar no nome de nossa organização no canto direito, depois selecionamos "**API Credentials**":
![Opção dentro do menu do usuario](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wgzwn19zzhaisvczvcn.png)

Na tela seguinte teremos um botão para gerar nossas credenciais, clicando nele os dois valores vão ser gerados:
![Valores das chaves](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/roqkoh50jjnmtw9b5x82.png)


**SCA**
Na tela inicial do [portal da Veracode](https://web.analysiscenter.veracode.com/login), vamos na seção "**Scans & Analysis**" e selecionamos "**Software Composition Analysis**":
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ay8ivbsvrrxh72rdkjqu.png)

Nessa nova tela, selecionamos a aba "**Agent-Based Scan**", clicamos no botão "**Actions**" e selecionamos "**Create Workspace**":
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj54npnbalg35zksm5kd.png)


Informamos um nome para esse ambiente e caso seja necessário vincular ele a um time, após digitar o nome clicamos em "**More Options**" e informamos o time, caso não seja necessário apenas clicamos em "**Create**".

A tela de configuração do agente vai ser aberta, nela podemos seguir guias específicos sobre como gerar e configurar o agente em varias ferramentas e sistemas. Como nosso objetivo é apenas pegar a credencial para utilizar a solução, podemos clicar em qualquer um, mas recomendo para agilizar que clique em "**Jenkins / Hudson**" e depois em "Create Agent & Generate Token":
![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j564ij9ldbjazxyxx3ls.png)

Conforme as orientações que vemos na tela, para autenticar com esse valor vamos precisar adiciona-lo a uma variável chamada **SRCCLR_API_TOKEN** independente de qual seja a ferramenta que vai implementar.
CLI Client for ReductStore v0.4.0 has been released
Tags: news, tooling, database, reductstore
Published: 2022-12-26 22:34:15

Hello everyone,

We're excited to announce the release of [version 0.4.0 of the Reduct CLI](https://github.com/reductstore/reduct-cli/releases/tag/v0.4.0)! This release includes a new `rcli export folder` command that allows you to export data from a bucket in your storage engine to a local folder on your computer.This can be useful if you want to make a copy of your data for backup or offline access. For more information, 
see the [documentation](https://cli.reduct.store/en/latest/docs/export/).

<!--more-->

To update to the latest version of the Reduct CLI, use the following command:

```
pip install -U reduct-cli
```

In addition to the new rcli export folder command, we've also made some improvements to the documentation and updated it after rebranding.

if you have any questions or feedback, don't hesitate to reach out in [Discord](https://discord.gg/NQbPeGgzdR) or by opening a discussion on [GitHub](https://github.com/reductstore/reductstore/discussions).

Thanks for using ReductStore!
Solution for "error[E0425]: cannot find function `every` in module `time`" when using Iced Rust GUI library
Published: 2022-12-26 22:22:09



![Figure 1: Winter Scenery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ncobrowkhgp8hxd4z2y.jpg)

**Problem:**
Running into the following error when trying to use the [Iced GUI library](https://github.com/iced-rs/iced) for a Rust program that replicates the [stopwatch Iced GUI example](https://github.com/iced-rs/iced/tree/master/examples/stopwatch):

```
$ cargo build
error[E0425]: cannot find function `every` in module `time`
   --> src\main.rs:203:23
    |
203 |                 time::every(Duration::from_millis(10)).map(Message::Tick)
    |                       ^^^^^ not found in `time`
```

**Solution:**
The problem was that the `smol` feature was not included in the `features` option for the `iced` dependency listed in the `Cargo.toml` file.

Try replacing your existing `iced` dependency line with the following line:

```
# Cargo.toml file

[dependencies]
iced = {version = "0.6", features = ["smol"]}
```

Then run `cargo build` and see if the error is resolved!

## Conclusion

Thanks for reading this blog post!

If you have any questions or concerns please feel free to post a comment in this post and I will get back to you if I find the time.

If you found this article helpful please share it and make sure to follow me on [Twitter ](https://twitter.com/SeanAtukorala)and [GitHub](https://github.com/ShehanAT), connect with me on [LinkedIn](https://www.linkedin.com/in/shehan-atukorala-8631491a5/) and subscribe to my [YouTube channel](https://www.youtube.com/channel/UCtxed_NljgtAXrQMMdLvhrQ).
The best Angular 15 Starter Project
Tags: webdev, javascript, beginners, angular
Published: 2022-12-26 22:13:09

This is an Angular 15 Starter with Material, Transloco, Jest, Compodoc, Docker Support, ESLint & Prettier.

**GitHub: https://github.com/wlucha/angular-starter**

✅ [Angular 15](https://angular.io/)
✅ [Angular Material](https://material.angular.io/)
✅ Unit Testing with [Jest](https://jestjs.io/)
✅ End-to-End Testing with [TestCafé](https://testcafe.io/ 
✅ Internationalization with [Transloco](https://github.com/ngneat/transloco)
✅ Auto documentation with [Compodoc](https://compodoc.app/)
✅ Analyse your project with [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)
✅ [Docker](https://www.docker.com/)
✅ [ESLint](https://eslint.org/)
✅ [Prettier](https://prettier.io/)
✅ [Commit Linting](https://github.com/conventional-changelog/commitlint)
✅ [AuditJS](https://www.npmjs.com/package/auditjs) Audit this application using Sonatype OSS Index
✅ Auto-generate a CHANGELOG with [auto-changelog](https://github.com/cookpete/auto-changelog)


## Deploy
[![Deploy](https://www.herokucdn.com/deploy/button.png)](https://heroku.com/deploy)


## Install / Development
```bash
# Clone the project
$ git clone https://github.com/wlucha/angular-starter
$ cd angular-starter

# Install dependencies
$ npm install

# Start server
$ npm run start

# Open in browser: http://localhost:4200
```

## Docker Deployment

```bash
# Build Docker image
$ docker build . -t angular-starter

# Run Docker Container
$ docker run -p 3000:80 angular-starter
```

## Docker Hub

https://hub.docker.com/r/wlucha/angular-starter

## Commands
```
- `npm run start` - Start the app
- `npm run lint` - Lint the project
- `npm run test` - Run unit tests
- `npm run build` - Build the project
- `npm run build:prod` - Build the project in production mode
- `npm run build:prod:stats` - Build the project in product mode with stats
- `npm run analyse` - Analyse bundle with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)
- `npm run compodoc` - Generate [compodoc](https://github.com/compodoc/compodoc) documentation
- `npm run version` - Generate changelog
- `npm run prettier` - Format the whole project
- `npm run audit` - Audit this application using Sonatype OSS Index
```

## License

MIT License

Copyright (c) 2022 Wilfried Lucha

**GitHub: https://github.com/wlucha/angular-starter**
Criando Agendamento de tarefas no Linux
Tags: braziliandevs, linux, tutorial
Published: 2022-12-26 22:08:04

Para criação de um cron no Linux, você precisará editar o arquivo **crontab** do usuário atual. O **crontab** é um arquivo que armazena as tarefas agendadas do cron. Para editar o **crontab**, você pode utilizar o seguinte comando:

`crontab -e
`

Isso abrirá o arquivo crontab em um editor de texto. Você pode adicionar uma nova tarefa agendada no seguinte formato:

```bash
# minuto hora dia_do_mês mês dia_da_semana comando
*/15 * * * * /caminho/para/o/script.sh

```

Nesse exemplo, a tarefa será executada a cada 15 minutos, em qualquer hora, em qualquer dia do mês, em qualquer mês e em qualquer dia da semana. O comando a ser executado é o script script.sh, que deve estar localizado no caminho especificado.

Depois de adicionar a nova tarefa ao crontab, salve o arquivo e saia do editor. A tarefa será executada conforme o agendamento especificado.

A sintaxe do Cron funciona como no exemplo abaixo:

```bash
# ┌───────────── minuto (0 - 59)
# │ ┌────────────── hora (0 - 23)
# │ │ ┌─────────────── dia do mês (1 - 31)
# │ │ │ ┌──────────────── mês (1 - 12)
# │ │ │ │ ┌───────────────── dia da semana (0 - 6) (domingo a sábado)
# │ │ │ │ │
# │ │ │ │ │
# │ │ │ │ │
# * * * * * comando

# por exemplo, para executar a tarefa "comando" todos os dias às 8h da manhã:
0 8 * * * comando

```
Web Components
Published: 2022-12-26 22:00:16

A Simple Web Component's folder structure may look like this:
![Web Component Folder Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obfilj3hkzpam57ioi8p.png)

 The HTML file for the layout and the JS file to register the functionality. 

[Define a Custom Element](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define)

```js
customElements.define('simple-custom', ...
```
The reserved word <code> customElements</code> is a part of the [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) which is an interface in the DOM.

The define function can take multiple parameters:
> define(name, constructor)
> define(name, constructor, options)

This use of the define function gives the custom-element a name, and it defines the implementation of the class.
```js
customElements.define('simple-custom',
  class extends HTMLElement {
    constructor() {
      super();
...
```
It is a class definition which extends an HTMLElement followed by a constructor which must call super() first.

<h3>Creating the HTML Content</h3>

```js
customElements.define('simple-custom',
  class extends HTMLElement {
    constructor() {
      super();
      const divElem = this.createHTMLContent();
  
```

```js
    createHTMLContent() {
      const divElem = document.createElement('div');
      divElem.textContent = this.getAttribute('text');
      return divElem;
    }
```
<h3>Attaching a Shadow</h3> 

```js
customElements.define('simple-custom',
  class extends HTMLElement {
    constructor() {
      super();
      const divElem = this.createHTMLContent();
      this.createShadow(divElem);
    }
```

```js
    createShadow(divElem) {
      const shadowRoot = this.attachShadow({ mode: 'open' });
      shadowRoot.appendChild(divElem);
    }

```
<h3>And the HTML</h3>

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>:defined demo</title>
    <script src="main.js" defer></script>
    <style>
      p {
        background: yellow;
      }

      simple-custom {
        background: cyan;
      }

      :defined {
        font-style: italic;
      }

      simple-custom:not(:defined) {
        display: none;
      }

      simple-custom:defined {
        display: block;
      }
    </style>
  </head>
  <body>
    <h1><code>:defined</code> demo</h1>

    <simple-custom text="Custom element example text"></simple-custom>

    <p>Standard paragraph example text</p>
  </body>
</html>


```

![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xggxopyywffc0q0sica7.png)
03.12 - State & Props - Send color change data to parent comp (function components)
Tags: react, webdev, tutorial, programming
Published: 2022-12-26 21:43:09

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/720dmyl7jqcw5xz05blr.gif)



Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4fe8csgg8j2ftitdona.png)



<hr/>
src/App.js
```react
import './App.css';
import ParentComponent from './components/ParentComponent';


function App() {
  return (
    <div className="App">
        <p><b>App.js</b> |function|</p>
        <ParentComponent/>
    </div>
  );
}

export default App;
```
<hr/>
src/App.js
```css
.App{
  background-color: lightskyblue;
  padding: 10px 10px;
}

p{
  margin-top: 6px; 
  margin-bottom: 12px 
}
```
<hr/>
<hr/>
src/components/ParentComponent.jsx
```react
import React, { useState } from "react"
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

function ParentComponent(){
    const[backgroundColor, setBackgroundColor] = useState('pink');

    const handleInputChange = (event) => {
        setBackgroundColor(event.target.value);
    }

    return(
        <div className="ParentComponent"  style={{backgroundColor: backgroundColor}}>
            <p><b>ParentComponent.jsx</b> |function|</p>
            <ChildComponent  handleInputChange={(event)=>{handleInputChange(event)}}  />
        </div>
    )
}

export default ParentComponent
```
<hr/>
src/components/ParentComponent.css
```css
.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
    margin: 10px 10px;
}

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}
```
<hr/>
<hr/>
src/components/ChildComponent.jsx
```react
import React from "react";
import "./ChildComponent.css"

function ChildComponent(props){

    const handleChange = (event) => {
        props.handleInputChange(event);
    }

    return (
        <div className="ChildComponent">
            <p><b>ChildComponent.jsx</b> |function|</p>
            <input onChange={(event)=>{handleChange(event)}}></input>
        </div>
    );
}

export default ChildComponent;
```
<hr/>
src/components/ChildComponent.css
```css
.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
    margin: 10px 10px;
}

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}
```
03.11 - State & Props - Send color change data to parent comp (class components)
Tags: react, webdev, tutorial, programming
Published: 2022-12-26 21:42:45

App preview:
![The way the app will look like](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s6j6fvwcnfvwzfxsr467.gif)


Project files:
![An image of project file structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p13bnh52jcfpb4hy5t7b.png)



<hr/>
src/App.js
```react
import React from 'react';
import './App.css';
import ParentComponent from './components/ParentComponent';


class App extends React.Component{
  render(){
    return (
      <div className="App">
          <p><b>App.js</b> |class|</p>
          <ParentComponent/>
      </div>
    );
  }
}

export default App;
```
<hr/>
src/App.css
```css
.App{
  background-color: lightskyblue;
  padding: 10px 10px;
}

p{
  margin-top: 6px; 
  margin-bottom: 12px 
}
```
<hr/>
<hr/>
src/components/ParentComponent.jsx
```react
import React from "react"
import ChildComponent from "./ChildComponent"
import "./ParentComponent.css"

class ParentComponent extends React.Component{
    constructor(){
        super();
        this.state = {
          backgroundColor: "pink"
        }
    }  

    handleInputChange = (event) => {
        this.setState({backgroundColor: event.target.value})
    }

    render(){
        return(
            <div className="ParentComponent"  style={{backgroundColor: this.state.backgroundColor}}>
                <p><b>ParentComponent.jsx</b> |class|</p>
                <ChildComponent  handleInputChange={(event)=>{this.handleInputChange(event)}}  />
            </div>
        )
    }
}

export default ParentComponent
```
<hr/>
src/components/ParentComponent.css
```css
.ParentComponent{
    background-color: lightsalmon;
    padding: 10px 10px;
    margin: 10px 10px;
}

h2{
    margin-top: 0px; 
    margin-bottom: 6px 
}
```
<hr/>
<hr/>
src/components/ChildComponent.jsx
```react
import React from "react";
import "./ChildComponent.css"


class ChildComponent extends React.Component{
    constructor(props){
        super(props);
    }

    handleChange = (event) => {
        this.props.handleInputChange(event);
    }

    render(){
        return (
            <div className="ChildComponent">
                <p><b>ChildComponent.jsx</b> |class|</p>
                <input onChange={(event)=>{this.handleChange(event)}}></input>
            </div>
        );
    }
}

export default ChildComponent;
```
<hr/>
src/components/ChildComponent.css
```css
.ChildComponent{
    background-color: lightgreen;
    padding: 10px 10px;
    margin: 10px 10px;
}

h3{
    margin-top: 0px; 
    margin-bottom: 6px 
}
```