teleren/devto huggingface dataset:
Task Force 2.0 Second Week Sessions
Tags: javascript, react, webdev, design
Published: 2021-03-12 13:00:02

There are only 19% women in tech industry, and the number goes lower as you go to the senior levels!  
Well, I was very surprised by the one I met in tech. The dream interface builder, very impressive!   

Oooh, I was about to talk about my second week in the boot camp.
My second week in the ___Task Force Boot Camp___ was really amazing, surprising, challenging and teaching.  

Not like the last week, we focused on the technical sessions especially __building interfaces__ (on my side as frontend developer).   

I was introduced to the new concepts of design and tools to optimize and speed up my web application.  

My new mentor told me that it’s not about __building__ something, but __how__ you build it.  

How other _teammates_ can _review_ and _feel comfortable_ with your __codes__. I liked this part though it was confusing.

I was introduced to new tools such as:  

>  
  1. React Ant Design
  2. Formik
  3. Yup    

It was my first time using those tools and I was totally confused,
 don’t laugh :(  

Briefly, __Ant Design__ is a library that gives you __pre-built components__, __Formik__ allows you to take in and out the data from your inputs, _validate_ your form and _handle_ submission of your data. __Yup__ works like __Formik__ but it is very rich in _features_. And they can be integrated together (__Yup__ and __Formik__).  

I was surprised by how those tools can __boost up__ your development.  

The _soft skills_ were surprising too, I learned body language tips.

Speaking of surprises, my mentor was __woman__. Not just a woman, ___the front end developer woman___.  

I have never seen a woman doing what she does anywhere. Her _designs_ really inspired me. I wish she would keep coaching me!  

I really thank [Code Of Africa](https://www.codeofafrica.com/EN) and [Awesomity Lab](https://awesomity.rw/), once again.
#CodepenChallenge | 3D Ice Cream 🍦 With p5.js and GSAP
Tags: codepen, javascript, showdev, html
Published: 2021-03-12 12:44:07

<p>A simple animation of an ice cream 🍦 being served placed on a cone.</p>

<p>I created the 3D image of an ice cream and cone using <a href="https://p5js.org/">p5.js</a>.</p>

<p>I created the animation using <a href="https://greensock.com/">GSAP</a> timeline.</p>

<p>I'm still practicing creating a 3D image using WebGL (or related libraries). I actually messed up the generation of lighting and the material itself, so the ice cream looks like a rubber ball. 😆</p>

<p>I'm planning to take-on creation of textures, and also better animation of an image. In addition, also creation of a better background for the <code>&lt;canvas&gt;</code> tag to blend the with the background.</p>

<p>The animation can be re-animated by clicking the "Reset" button at the top right corner of the screen.</p>

{% codepen https://codepen.io/takaneichinose/pen/gOLQjmQ %}
How Much Does it Cost to Develop a Real Money Ludo Game? 
Tags: ludogameappdevelopment
Published: 2021-03-12 12:40:08

A classic board game that gives real game experience can take your online business to the next level. Ludo has a different fan base because of its ancient popularity that has attracted every user to its doorstep. If you look back at the popularity of this game then the idea to develop a ludo game app turned out to be a huge success. 

Time and efforts to complete this project as per the client’s requirements needs to be mapped to calculate the exact figure. If dedicated developers for a Ludo game development are hired on a per hour basis, then you might save a few bucks as only you will be responsible for the overall management of the project. There are so many options available in the market for Ludo game development in a budget-friendly manner. 

Factors Affecting Cost of Ludo Game Development

Design of the Game:
Design of the game and high-quality user-interface both are the major factors that affect the cost of development. It is important to have an easy to use interface and engaging design for your ludo game app. The overall budget should be set in such a way that it can give the best possible design for the users. 

Advanced Features: 
Muli-player, daily bonus, online/offline mode, RNG certified games, rewards and loyalty are some of the additional features that you can add to make it more attractive. 

Mobile App Platform: 
The cost of developing a ludo game app is dependent on the type of platform selected among Android, iOS, windows or react native. 

App Size: 
Including all the advanced features in the application will influence its size and overall development cost of the application. Pages, features, and additional functions make it large in size and affect the cost of development. 

After analyzing above mentioned factors if you are eager to create real money ludo game development services then contact Mobiweb Technologies which is a professional Board game development company providing a variety of board games to global clients. 

https://www.mobiwebtech.com/ludo-game-software-development/
Rank Higher in Google using SERP API
Published: 2021-03-12 12:35:43

A large portion of the "What is the"s, "Do you know"s, and "How to"s end up on Google pages. It's our reliance on Google to discover the data about the earth to sky and everything in the middle that has made Google thought of the apparatuses that go about as an impetus in your data chase. No doubt, the Google SERP Programming interface.

It is an enormous fight in the Web optimization local area, with regard to regardless of what the SEO would prefer not to get down the principal page of Google query items. Other than SEO, the netizens likewise discover the Google SERP APIs to be their additional hand just under the wire. No big surprise, the Google SERP APIs are likewise a hotly debated issue in the improvement business, and consequently, we have a ton of them arising out there giving headway, and solace scanning experience for the clients.

<b>It's the SEO friend!</b>

Indeed, as referenced above <a href="http://all-serp.com">SERP API</a> is the most helpful tool for the SEO to check their exhibition and investigate their measurements. For a Website design enhancement, remaining in front of the contenders consistently is significant and in this manner, the Google SERP APIs help them finding their situation on the list items and how productive are they with the watchwords, henceforth furnishing them with a trace of progress if fundamental.

<b>You get more than the natural and paid query items!</b>

The list of items you find on SERPs is essentially the outcomes that are ordered by the internet searcher arachnid, filed by the human, or paid to be recorded on the inquiry page. Along these lines, easily you gain admittance to the natural and paid query items when entered to the catchphrase of your ideal data. In any case, with the Google Search Positioning Programming interface, you gain admittance to the data that are more than natural or paid and particularly to the setting explicit inquiry.

<b>Your information chase gets time and exertion successful!</b>

All things considered, there's no big surprise that Google SERPs consistently save our time furnishing us with the fast admittance to the ideal data, yet with the paid pages model, you now and again may arrive at the page not commendable enough. Along these lines, beating which the Google SERP APIs furnish you with the precise outcomes without you squirming around from pages to track down the ideal snippet of data.

<b>You get precise and continuous outcomes</b>

The Google SERP Programming interface gives you the Google results from any place across the globe with the area explicit boundaries and continuous ascribes. The Google SERP APIs are worked with the scholarly properties that continue the exactness of the information changing the outcomes as when refreshed on the web. Along these lines, you don't need to worry about what variant of information you are utilizing. You are consistently on the forthright with the most recent data.
VSCode - C# Top Level Programs
Tags: ptbr, vscode, dotnet, braziliandevs
Published: 2021-03-12 12:33:02

Olá Devs! 👩‍💻👨‍💻

Em alguns momentos acho interessante escrever determinados códigos em "C#" de forma isolada, assim eu direciono o meu foco somente no que estou escrevendo. Não me preocupo com uma grande aplicação, várias dependências e etc. Atenção, não estou falando de "C# Scripting", isso vou falar em outro post.

Eu utilizava o [LINQPad](#links) para isso, ele é uma excelente ferramenta desktop e atende muito bem, só que uma coisa que sempre me incomodou era o fato de ter 3 ferramentas para escrever código "C#". Por padrão eu utilizo [VS2019](#links) e [VSCode](#links), o ideal era resolver esse problema com eles, seria muito interessante.

Estava lendo um [post do Scott Hanselman](#links) e percebi que deixei passar uma novidade do "C# 9" que atenderia muito bem essa necessidade. A novidade, que já não é tão nova assim, é o recurso "Top Level Program".

Com esse recurso você consegue escrever o código de uma forma mais simples sem a necessidade da classe _Program_ e do método _Main_. Exatamente o que eu gostaria.

### Código padrão
```csharp
using System;
class Program
{
    static void Main(string[] args)
    {
        Console.WriteLine("Hello World!");
    }
}
```

### Top Level Program
```csharp
using static System.Console;

WriteLine("Hello World!");
```

Pode parecer uma bobagem, mas isso facilita muito, principalmente quando estou estudando ou explicando algum código para alguém. O Scott Hanselman fala do VS2019, mas pra mim seria perfeito conseguir utilizar o VSCode, fiz o teste e funciona.

Criei um repositório no github que pode servir como referência. Nele eu tenho um projeto que possui pacotes que eu julgo interessante para esse tipo de abordagem:
* [Bogus for .NET - gerar dados de exemplo sem dor de cabeça](#links)
* [ConsoleTables - gerar uma tabela no console sem muito esforço](#links) 

Se pintar mais alguma necessidade de pacote extra, eu atualizo o repositório.

### Repositório
{% github leandroats/vscode-csplayground no-readme %} 

Comandos utilizados para criar o projeto:
```powershell
dotnet new console -n csplayground -f net5.0
dotnet add package Bogus --version 33.0.2
dotnet add package ConsoleTables --version 2.4.2
```

### <a name="links"></a>Links e Referências:
👉 [VS2019 - Visual Studio 2019] (https://visualstudio.microsoft.com/pt-br/downloads/)
👉 [VSCode] (https://code.visualstudio.com/)
👉 [LINQPad] (https://www.linqpad.net/)
👉 [ConsoleTables] (https://github.com/khalidabuhakmeh/ConsoleTables)
👉 [Bogus] (hhttps://github.com/bchavez/Bogus)
👉 [Post do Thomas Claudius Huber - Bem Completo] (https://www.thomasclaudiushuber.com/2020/08/18/c-9-top-level-statements-or-should-i-say-hey-wheres-the-main-method/)
👉 [Post do "Scott Hanselman"] (https://www.hanselman.com/blog/tiny-toplevel-programs-with-c-9-and-smallsharp-and-visual-studio)
👉 [Post do Renato Groffe] (https://renatogroffe.medium.com/novidades-do-c-9-top-level-programs-5f9bd1d8a8ad)


Até a próxima! 👊
Changed Data Capture from CockroachDB to ConfluentCloud
Tags: cockroachdb, confluent, kafka, cdc
Published: 2021-03-12 03:20:37

# Changed Data Capture from CockroachDB to ConfluentCloud

Here's a simple tutorial for sending data from CockroachDB directly to Confluent Cloud using CockroachDB Change Data Capture, which is typically refered to as a [Changefeed](https://www.cockroachlabs.com/docs/v20.2/create-changefeed.html).  This example can be applied to CockroachCloud or a self hosted deployment of CockroachDB.  This tutorial was tested on CockroachDB 20.2 and ConfluentCloud 1.25.

## Setup Confluent Cloud

- [Create Free 30 Day ConfluentCloud Cluster](https://www.confluent.io/get-started/)
- [Add Confluent Cloud CLI](https://docs.confluent.io/ccloud-cli/current/install.html)

## Setup Your Kafka Cluster

#### Get Kafka Resource ID

The ID list here for your Kafka cluster will be needed in the steps below

```bash
ccloud kafka cluster list
```

#### Create API Keys

The API Key and API Secret are needed for creating the CockroachDB Changefeed

```bash
ccloud api-key create --resource <RESOURCE ID>
```

#### Get Kafka End Point

The end point is needed to connect the Changefeed to Kafka

```bash
ccloud kafka cluster describe <RESOURCE ID>
```

#### Create Topic

```bash
ccloud kafka topic create demo_t --partitions 6
```

#### Start a Kafka Consumer to Verify Your Change Data Feed

```bash
ccloud kafka topic consume demo_t
```

## Setup CockroachDB or CockroachCloud

- [Get CockroachDB or CockroachCloud](https://www.cockroachlabs.com/get-started-cockroachdb/)

Do note that Changefeeds do not currently work on CockroachCloud Free-Tier.  Use a Dedicated cluster to try this instead.


#### Create CockroachDB Table

Open a new terminal window and leave the Kafka consumer one open for later.  Log in the `cockroach sql` command line and enter the following commands.

First, ensure rangefeeds are enabled.

```sql
SET CLUSTER SETTING kv.rangefeed.enabled = true;
```

Next, create a table.

```sql
create table t (k int default unique_rowid() primary key, v string);
```

#### Create Changefeed

When creating the changefeed, notice that you'll use `kafka://` instead of using the returned endpoints earlier in ConfluentCloud (ie. `https://` or `SASL_SSL://`).  Also, be sure to include your API Key and Secret in the Changefeed.  

```sql
CREATE CHANGEFEED FOR TABLE t INTO 'kafka://<CONFLUENT CLOUD URL>:9092?sasl_enabled=true&sasl_password=<API SECRET>&sasl_user=<API KEY>&tls_enabled=true&topic_prefix=demo_' WITH updated, key_in_value, format = json;
```

#### Insert Some Rows

```sql
insert into t (v) values ('one');
insert into t (v) values ('two');
insert into t (v) values ('three');
```

#### Verify data is showing up in your consumer app

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a3d8jj833iq3z5v1ttuu.png)
Files Management Portal. 
Published: 2021-03-12 12:14:07

Open source provides File Management apps that many Dev's are not utilising in this era where many offices gone virtual.

Explore and use!  Save your files in your website hosting storage and be safer. 

Also, most of them can be fully customised to suite the needs of your clients.

Just like OwnCloud,it also provides mobile and computer apps where you can just drop your files, and its saved up in your hosting storage. And can easily be accessed or shared anytime and anywhere.

I believe in #OpenSourceApps as a Web Dev.

Here is a sample https://cloud.greatyom.com
Reactime : a performance and debugging tool for React
Tags: webdev, javascript, react
Published: 2021-03-12 12:07:29

## Concepts

![Image](https://reactime.io/static/new-reactime-c92bc4b88b0854b4be55448c573123b7.gif)

Reactime is an open-source React state debugging tool that tracks and visualizes state changes for developers. Reactime allows developers to time-travel and “jump” to previous states in their applications, allowing for a seamless debugging process.

At a high level, Reactime captures snapshots at every state change in an application and renders them in real-time to a visual hierarchical graph. By recording a snapshot before every state change in an application, Reactime is able to time-travel to an application’s previous state by simply pressing a button.


## Extension

[https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga)

## Links

* [https://reactime.io/](https://reactime.io/)

* [https://betterprogramming.pub/time-traveling-state-with-reactime-6-0-53fdc3ae2a20](https://betterprogramming.pub/time-traveling-state-with-reactime-6-0-53fdc3ae2a20)

* [https://github.com/open-source-labs/reactime](https://github.com/open-source-labs/reactime) 

* [https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga](https://chrome.google.com/webstore/detail/reactime/cgibknllccemdnfhfpmjhffpjfeidjga)
Comma operator in JS
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-03-12 12:07:18

Comma operator allows you to put multiple statements, where one is expected.  

```javascript
for (let i = 0, j = 0; i < 5; i++, j += 2) {
 console.log(`i=${i}, j=${j}`); 
}  
// Output
// i:0, j:0
// i:1, j:2
// i:2, j:4
// i:3, j:6
// i:4, j:8
```  
When placed in an expression, it evaluates every expression from left to right and returns the right most expression.  

```javascript
const a = () => 'a';
const b = () => 'b';
const c = () => 'c';

const x = (a(), b(), c());

console.log(x);

// Output c
```  

Also `,` operator has the lowest priority, so without parenthesis the expression would look like `const (x = a()), b(), c();`.  

Note that the `,`operators in assignments may appear not to have the normal effect of `,` operators because they don't exist within an expression. In the following example, a is set to the value of b = 3 (which is 3) and `c = 4` is evaluated and its result is returned to the console(4).  

```javascript
let a, b;
a = b = 3, c = 4; // Returns 4
console.log(a); // Output 3
```
Exporting Styled Component variants in reusable components
Tags: styledcomponents, javascript, typescript, react
Published: 2021-03-12 12:04:25

In the first part of this serie we have seen how to create Styled Component variants within the same file.

Now, let's say you want to create a multi-variant component that is reused all-across you app. How would you do this in a scalable way?

# Solution

Over time, I have tried several techniques to do this (more about this at the end of this article) but one really shined. 
Creating an extra Wrapper around the Default Component!

```js
import styled from 'styled-components';

// Note that having a default class is important
const StyledCTA = ({ className = 'default', children }) => {
    return <Wrapper className={className}>{children}</Wrapper>;
};

/*
 * Default Button styles
 */
const Wrapper = styled.button`
    color: #000;
`;

/*
 * Custom Button Variant 1
 */
export const StyledCTAFushia = styled(StyledCTA)`
    && {
        color: fuchsia;
    }
`;

/*
 * Custom Button Variant 2
 */
export const StyledCTADisabled = styled(StyledCTA)`
    && {
        color: ${(props) => props.theme.colors.grey.light};
    }
`;

export default StyledCTA;

```

## Usage

```js
import StyledCTA, { StyledCTADisabled, StyledCTAFushia } from 'components/StyledCTA';

const Page = () => {
    return (
        <>
            <StyledCTA>Default CTA</StyledCTA>
            <StyledCTADisabled>Disable CTA</StyledCTADisabled>
            <StyledCTAFushia>Fuchsia CTA</StyledCTAFushia>
        </>
    )
};
```

## Additional techniques

For some more advance usage I would also recommend using [composable CSS variables](https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables).

Another alternative is also to use a [dedicated library](https://styled-system.com/) on top of Styled Components.
Stop switching tutorials
Tags: python, kaggle, learning, ai
Published: 2021-03-12 12:00:32

As I'm learning Python this time around it is with the purpose of being able to understand and complete some AI projects.

This is the first thing that helps. Have a clear goal/endpoint in mind. What is it you want to be able to do or build?

I have [tried a bunch](https://infinitewaves.substack.com/p/learning-python-and-ai-as-a-web-developer) of resources over the years for learning Python. I never got too far because I didn't have a clear goal, and I was more focused on web development.

I am now using [Kaggle](https://www.kaggle.com/learn/overview), for reasons explained in the above link. It is specifically geared towards Data Science/Machine Learning, so it makes a lot of sense to do their courses, as it segues right into the sort of projects I want to be doing.

Just now I have been doing the Python mini-course, and at a certain point the tutorial didn't make sense to me. The first instinct is to assume:

"Well, this tutorial is obviously BS. What idiot wrote this? It's clearly not simple and obvious enough."

**OR**

"Well, I'm obviously super dumb I need some baby-style Python-by-numbers tutorial."

But I carried on through the tutorial and came back to that part and went over it again. Instantly it was all pretty clear and made sense the second time round.

It made it easier because I have **definitely** decided Kaggle is the way I'm going. So I kept confidence it was the right thing, and looking for something else wasn't a consideration.

Perhaps at these points we'd be tempted to assume this tutorial '*just isn't right for me*', or '*I bet I can find one that explains things better*.'

But, in the end, as long as you get a course that is well regarded it'll probably be fine. There will of course be variance in clarity and styles. But there will be trade-offs in **all** tutorials, documentation, and educational courses.

The moral of the story is pick your resource and stick with it (that's not to say don't do a bit of vetting and trialling early on). 

In most cases you'll learn more struggling when you don't understand part of the tutorial than jumping ship to the next one.
NPM basics of Global Packages
Tags: npm, node
Published: 2021-03-12 11:43:35

The information shared below is npm basics of global packages which are partially hidden or difficult to find in the docs page. I hope they help. Lets dabble.

1) NPM install global packages - example to install [Webpack](https://webpack.js.org/) globally

```
npm install -g webpack
```

2) Listing globally installed NPM packages and version

```
npm list -g --depth=0
```

The result will look something like this:

```
C:\Users\thatAfro\AppData\Roaming\npm
+-- @angular/cli@8.3.29
+-- ionic@5.4.16
`-- webpack@4.46.0
```

3) Update Global Packages

Find/View packages which need to be updated:
```
npm outdated -g --depth=0
```

The result will look something like this:
```
C:\Users\thatAfro>npm outdated -g --depth=0
Package  Current  Wanted  Latest  Location
npm        6.1.0   6.2.0   6.2.0
webpack   4.12.1  4.16.1  4.16.1
```

Update all global packages
```
npm update -g
```

In some cases you may want to update packages one at a time, so you can do this as follows:

npm update -g <package>

For example updating webpack, it would look like this
```
npm update -g webpack
```

4) Uninstall Global Packages

npm uninstall -g <package>
For example uninstall webpack, it would look like this
```
npm uninstall -g webpack
```

5) Uninstall npm modules in node.js

As commonly known, any npm module can be installed by running a simple command: npm install <module_name>

The command is simply npm uninstall <name>

The [nodejs documents](https://npmjs.org/doc/) have all the commands that you need to know with npm.

A local install will be in the node_modules/ directory of your application. This won't affect the application if a module remains there with no references to it.

If you’re removing a global package however, any applications referencing it will crash.

Here are different options:

npm uninstall <name> removes the module from node_modules, but not package.json

npm uninstall <name> --save also removes it from dependencies in package.json

npm uninstall <name> --save-dev also removes it from devDependencies in package.json

npm -g uninstall <name> --save also removes it globally.

For further help with npm, you can visit the docs page

[NPM Official Documentation](https://docs.npmjs.com/getting-started/what-is-npm)
Code quality testing with SonarQube and Gitlab CI for PHP applications
Tags: docker, gitlab, sonarqube, testing
Published: 2021-03-12 11:40:32

This article deals with the analysis of code quality for PHP application using SonarQube. We automate this in continuous integration pipelines with Gitlab CI. The code repository is available in the article.

Link to the complete article: https://medium.com/linkbynet/code-quality-testing-with-sonarqube-and-gitlab-ci-for-php-applications-f0c953f4133d