teleren/devto huggingface dataset:
Git and GitHub
Tags: github, git, webdev, codenewbie
Published: 2020-11-28 19:29:43

# What is Git?

Git is a distributed version-control system for tracking changes in source code during software development. It creates a local repository in our computer in which we will make local changes.

# What is GitHub?

It is a place where your Local Repository can be uploaded to Remote Repository on GitHub.

## Requirements?

We need to create an account on GitHub, now it is time that we push our local data to a remote location at GitHub.

# Git Commands

Let's begin with the most used git commands.

Where will you type the commands? Open terminal with the project path;

- `git init`

This will initialize a local repository in your project folder.

- `git add .`

This command will add the project files in the staging area which will be ready to commit or push in GitHub.

- `git status`

This will check whether your files are in **Staged area** or not?

## What is staged area?

The staging area is a container where git collects all changes which will be part of the next commit it collects all the changes to be committed collectively before they will be pushed to GitHub.

- `git commit`

Commit set a message about the changes you were done. The commit also saves a revision of the code and you can revert the code to any version anytime in one click. We can always add commit message by this command `git commit -m "fix"` this message is used if any bug is fixed in the code.

- `git push/pull`

`git push` command is used to transfer or push the commit, which is made on a local branch in your computer to a remote repository like GitHub.

`git pull` is a Git command used to update the local version of a repository from a remote, suppose if any other developer made changes in the remote repository by this command you can update it to your local repository.
Como instalar o Jenkins via Docker
Published: 2020-11-28 19:22:08

Olá, amigo! Neste post vamos instalar o Jenkins utilizando Docker.

O que é o Jenkins?
É um sistema de automação de processos que envolve os mais diversos tipos de tarefas de integração e deploy contínuo.

Foi criado em 2004 por um desenvolvedor da Sun chamado Kohsuke Kawaguchi e na época chamava-se Hudson. Depois da compra pela Oracle da Sun rolou a preocupação se continuaria ou não open source e tal, mas, a comunidade resolveu fazer um fork do projeto Hudson e com isso deu origem ao Jenkins.
  
O Jenkins possui mais de mil plugins e tem como premissa automatiza os mais diversos tipos de tarefas. Faz o check-out do o repositório logo após o commit, ou seja, toda a vez que for realizado um commit no git, ele faz "automagicamente" o check-out e inicia o processo de build e tudo o mais que tiver configurado na esteira e mais: mostra todos os passos que foram realizados jogando no output dos logs.

Vamos aos passos:

1. Você deve ter o docker instalado e rodando na sua máquina (https://docs.docker.com/engine/install/);

2. Logando no Docker Hub:

➜ ~ docker login     
Authenticating with existing credentials...
Login Succeeded

➜  ~ docker pull jenkins/jenkins
Using default tag: latest
latest: Pulling from jenkins/jenkins
3192219afd04: Pull complete 
17c160265e75: Pull complete 
cc4fe40d0e61: Pull complete 
9d647f502a07: Pull complete 
d108b8c498aa: Pull complete 
1bfe918b8aa5: Pull complete 
dafa1a7c0751: Pull complete 
1aac8c69350b: Pull complete 
5ba31155797f: Pull complete 
1604a964a92a: Pull complete 
a047c2662742: Pull complete 
c7590000f6e1: Pull complete 
b5caeecd3ac5: Pull complete 
3b2f84c2b5c6: Pull complete 
3b867fccf4b4: Pull complete 
42f6598b3436: Pull complete 
23ef68d2e735: Pull complete 
6bf3d3fbec2e: Pull complete 
8e8cf44f4bfb: Pull complete 
b19f11a5cf28: Pull complete 
Digest: sha256:a26c4c0f57e14056178a8c0044ab23fdd072b7236e48fda2b6a0697bee71c982
Status: Downloaded newer image for jenkins/jenkins:latest
docker.io/jenkins/jenkins:latest

➜  ~ docker run -d -v /var/run/docker.sock:/var/run/docker.sock  -v ${PWD}/jenkins:/var/jenkins_home  -p 8080:8080  jenkins/jenkins 
4b3353fe4d4cd19564355595b15bece2b14bdb1b060f0f2809028dba1157286a

Acesse a url http://localhost:8080 mas aguarde uns instantes até que esteja disponível para configuração de acesso. *Unlock Jenkins*.

Acesse a pasta do Jenkins no seu home e execute o seguinte comando:

➜  jenkins ~ cat secrets/initialAdminPassword  
d326226d93824e38a669f678fd8bd37c

Copie esta chave e cole lá na página.

Passará para a próxima tela: *Customize Jenkins*

Instale os plugins sugeridos e aguarde a conclusão (demora um pouquinho mesmo).

Em seguida, vai passar para a tela de criação do usuário administrador *Create First Admin User*.

Siga em frente até chegar na tela *Jenkins is ready!*

Ok chegamos ao final com a instalação do Jenkins.

No próximo post, mostro como executar um pipeline simples usando essa maravilhosa ferramenta.

Até mais!

#Jenkins #Docker #Automation #ContinuosDelivery
Some Useful Tips to Use keyboard safely
Tags: keyboard
Published: 2020-11-28 19:14:48

**To avoid any type of stress, bad conditions, time wastage or body pain give a read to some of these tips.**

Using your keyboard properly can help avoid distress or injury to your wrists, hands, and arms, particularly if you use your computer for long periods of time. Here are some tips to help you avoid problems:

1. Place your keyboard at elbow level. Your upper arms should be relaxed at your sides.
2. Center your keyboard in front of you. If your keyboard has a numeric keypad, you can use the space-bar as the centering point.
3. Type with your hands and wrists floating above the keyboard, so that you can use your whole arm to reach for distant keys instead of stretching your fingers.
4. Avoid resting your palms or wrists on any type of surface while typing. If your keyboard has a palm rest, use it only during breaks from typing.
5. While typing, use a light touch and keep your wrists straight.
6. When you're not typing, relax your arms and hands.
7. Take short breaks from computer use every 15 to 20 minutes.

Since many of us are addicted to the computes and they are now integral part of our life, so just thought to share.
Make your console messages colorful

Tags: javascript, webdev, css
Published: 2020-11-28 19:11:53

Got a big list of bugs and bored of debugging? Here are the few tips that makes your life easy that add spice and sunshine to your console messages.

We can use `%c` directive to apply a CSS style to console output. And here are few ways how it is done.

*NOTE : Paste the below console commands in your console window*

```
console.log('%c Get Riggity Riggity Wrecked Son', 'color: white; background: pink; font-size: 20px')
```
![Output of the above code](https://miro.medium.com/max/980/1*0awR3PruAipU8pNBU8OJ8w.png)

Add the `%c` directive as a prefix to the part of the string you want to add style to.
The text before the directive will not be affected, but the text after the directive will be styled using the CSS declarations in the parameter.

###Multiple styles in one console message:

We can add the multiple styles to the multiple strings in the same console command.
```
console.log("%cIM " + "%cPOSSIBLE", "color: purple; background: pink", "color: yellow; background: black")
```
###Styling the error and warning messages:
One can change the styling of the error message and warnings too.
```
console.error('%cWubba Lubba Dub Dub!', 'color: whitesmoke; background: black')
console.warn('%c...To Live Is To Risk It All...', 'color: green; font-size: large')
```
###Push the styles to an array :
We can pass the styles in the array and join it to make a string when we have too many strings.
```
var styles = [
    'background: linear-gradient(green, #571402)'
    , 'color: white'
    , 'display: block'
    , 'line-height: 40px'
    , 'text-align: center'
    , 'font-weight: bold'
].join(';');
console.log('%c The Universe Is Basically An Animal... ', styles);
```
###Using `%s` directive for string to display and `%c` to style it:
We can use `%s` string to pass the string and apply styles to it. And this is how you do it. Assign the string to be printed and the styles to the variables respectively and call those in console command at once.
```
styles = 'font-weight: bold; font-size: 50px;color: red; text-shadow: 3px 3px 0 rgb(217,31,38) , 6px 6px 0 rgb(226,91,14) , 9px 9px 0 rgb(245,221,8) , 12px 12px 0 rgb(5,148,68) '
message = 'Wubba Lubba Dub Dub!'
console.log('%c %s', styles, message)
```
![Output for the above code](https://miro.medium.com/max/980/1*fiUZta8iV1K-01V99gcXCA.png)

And that’s all for today.

*References:
1) https://developer.mozilla.org/en-US/docs/Web/API/console#Usage
2) https://www.samanthaming.com/tidbits/40-colorful-console-message/
3) https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css*
A Couple Ways to Build Dropdowns in React
Tags: react
Published: 2020-11-28 18:52:27


Dropdown menus remain a fundamental way of building forms on the web. React has several ways of building these dropdown. In this article, I’ll cover two ways of creating these essential forms. 

These two methods are among the most popular that I came across while building my own forms. 


## Using HTML tags 

You can use standard HTML tags to build a select form. To do this, you can wrap option tags in a select tag. 

```
<select value={this.state.weight} onChange={this.onSelectChange}>
         <option value="8 to 12 pounds">8 to 12 pounds</option>
         <option value="12 to 14 pounds">12 to 14 pounds</option>
         <option value="14 to 18 pounds">14 to 18 pounds</option>
         <option value="18 to 20 pounds">18 to 20 pounds</option>
         <option value="20 to 24 pounds">20 to 24 pounds</option>
        </select>
```

Here, the values correspond to the labels. I found this method the easiest to use, especially for a small set of data. Specifically, it was easier to tie the selected option to state while using the class constructor. This method works well with the classic React methodology. 



## Using map

Another way of building a dropdown menu is by mapping through those options. Here, the option tags are still wrapped in the select tag, but instead of listing each option, we use the map function to show each item. 

```
   
    const renderselect = () =>{
      return(<select>
      {items.map(item => (
        <option
          key={item.value}
          value={item.value}
        >
          {item.label}
        </option>
      ))}
     
     <
```

What does it map through? There are several options you can use. For example, you can use hooks to map through the values. If you have an object or an array of these values, you can also use those. 

In the example below, I’ve used the useState feature to show state. 

```
const [items] = useState([
      {label: "8 to 12 pounds", value:"8 to 12 pounds" }, 
      {label: "12 to 14 pounds", value:"12 to 14 pounds" },
      {label: "14 to 18 pounds", value:"14 to 18 pounds" },
      {label: "18 to 20 pounds", value:"18 to 20 pounds" }, 
      {label: "20 to 24 pounds", value:"20 to 24 pounds" }
    ])

```

Hooks make for a cleaner code base, but sometimes can abstract things too much. Those familiar with hooks, and those planning to use redux, as well as those with a larger set of data to add to their forms, should consider using this method. 

## Summary 

You can also create a dropdown menu using CSS and conditionally rendering the menu on click. This, however, would require a lot more code to get up and going. On the other hand, it is a more intuitive way of styling your dropdown menus. 

Dropdown menus are one of the most popular types of forms on the Internet. I covered two ways to create these forms in React. There are many ways to build these types of forms, but they seem to rely on these two methods: either listing your options by tags or by mapping through a list of options. Which way is your preferred method?
Understanding the browser load events.
Tags: javascript, webdev, browsers
Published: 2020-11-28 18:26:28

The browser is a very interesting playground for web developers to play around. Today i am going to talk about how you should correctly use the browser load events to ensure that all the _markup_, _stylesheet_ and _javascript_ you write is loaded correctly and any data to be fetched is done correctly.

Before we go into that. I want to mention that it is very essential for a web developer (mostly frontend developers) to understand how the browser parses the code they have written. For that, i have linked a very good articles which should supossedly make you understand that into detail.

HTML and CSS both have object models. That of HTML is called the DOM (`Document Object Model`) and CSS have CSSOM (_CSS Object Model_). The DOM which is our focus is a tree-like structure represnting the _nodes/elements_. Here, all the html elements are parsed and rendered in order. This holds for stylesheets and javascript code you will add. But sometimes you will want your javascript code to be run while your HTML and CSS are being rendered in order to include your animations, fetched data and manymore.

Let's get to it ;)

When the browser finished to parse the HTML and CSS code. An event is triggered. You might have come accross this event which is _DOMContentLoaded_. You will usually use it as such :

```javascript
window.addEventListener("DOMContentLoaded", doSomethingCool());
```

This event is especially useful when you want to do something after the page structure and its styles have been loaded.

> Note that event though the DOMContentLoaded event may be triggered, other stuff like images, audio or even video might have not yet loaded.

Another event triggered by the browser is the load event. You will use it this way.

```javascript
window.addEventListener("load", doAnotherCoolThing());
```

Unlike _DOMContentLoaded_, this event will be triggered when all markup, stylesheet, javascript and all static assets like images and audio have been loaded.

Now you know the two major load events you can make use of in the browser.
_Now you may ask yourself_ : What if i placed my javascript before the body of my page ? OR it comes before every other thing ?

For this, you can use the _`defer`_ attribute which will make your javascript load after the markup and the stylesheet.

```html
<script src="https://example.com/some-javascript.js" defer></script>
```

In case you ever need it to be loaded in an _async_ manner, you can use the _async_ attribute on your javascript tag.

```html
<script src="https://example.com/some-javascript.js" async></script>
```

This post was meant to be brief and i hope it was XD.

Read this post about [how the browser renders](https://dev.to/jstarmx/how-the-browser-renders-a-web-page-1ahc) a page to understand everything more into details
The Product Management Prioritization Menagerie
Tags: productmanagement, prodmgmt, agile, productowner
Published: 2020-11-28 18:18:38

Folks, it’s a zoo out there, especially when it comes to feature prioritization. I've even created my own O'Rly parody bookshelf to go with it: https://buff.ly/2Oo9xlC

The wild animals it includes:
* HiPPO — Highest Paid Person’s Opinion
* RHiNO — Really High value, New Opportunity
* ZEbRA — Zero Evidence, but Really Arrogant
* WoLF — Works on Latest Fire
* Seagull Management - swoops in & poops on your project

For each book cover in my blog post, I've linked up at least 2 or related articles or books on each of these 5 beasts that graze upon our prioritization process.

That said ...

... I'd be curious to see in this channel is a conversation on how these wild beasties might disrupt your work in progress, your sprint commitments, or take your product down a feature factory path.

For example, how do you deal with a charging HiPPO fresh out of a board meeting, or the RHiNO insisting that 'they really need feature X to make the sale?'
[Open Source] Top Animes android app
Tags: android, mvvm
Published: 2020-11-28 18:06:00

---
title: [Open Source] Top Animes android app

published: true

description: TopAnimes is a sample anime Android application 📱 built to demonstrate use of Modern Android development tools. Dedicated to all Android Developers with ❤️. 

tags: android, mvvm, 

cover_image: https://raw.githubusercontent.com/dhirajhimani/TopAnimes/master/media/topanimes_1.jpg

# https://github.com/dhirajhimani/TopAnimes

---
Why Python Json Dumps
Tags: python, json, dumps
Published: 2020-11-28 17:54:35

Json dumps can be used to take a Python data structure(list,tuple,dictionary,set) and generate a string in JSON format. That string can then be saved in a file, inserted in a database, or sent over the wire.

Example 1:

```
import json

details = {
    "FirstName":"Nana",
    "LastName":"Kwame",
    "Email":"None",
    "Children":"None"
}
print(details)

json_str = json.dumps(details)

with open('data.json','w') as fh:
    fh.write(json_str)
```

Example 2:
```
import json

details = {
    "FirstName":"Nana",
    "LastName":"Kwame",
    "Email":"None",
    "Children":"None"
}

with open('data.json','w') as fh:
        json.dump(a,fh)
```

<h2><b>Loading Json Dumps<b></h2>
Example 1:
```
import json

with open('data.json') as fh:
    json_str = fh.read()

print(json_str)
```

Example 2:
```
import json

with open('data.json','r') as fh:
    a = json.load(fh)

print(a)
```
🔥 dotnet add package ActiveLogic
Tags: csharp, productivity
Published: 2020-11-28 17:52:47

Active Logic (AL) is now available as a nuget package, yay.

Was having a look wondering how to explain this neat library to developers on dev.to. Specifically I got to thinking okay, how would we do an [async web request](https://docs.microsoft.com/en-us/dotnet/framework/network-programming/making-asynchronous-requests) in AL?

Perhaps something like:

```cs
Console.WriteLine( HttpGet("URL") );
```

I'll have another look to make sure this isn't off by a mile (I mean, yea sure, now that we have a nuget package I should probably make a sample app). 

What the above *does not* get wrong, is how AL does async without callbacks.  

〜 Going to call it a Sunday. 

*You may also find AL [on Github](https://github.com/active-logic/activelogic-cs) and it isn't really a new thing either. I see an initial commit in July 2019, which probably was migrated/squashed from an incubator. Got 100% coverage on November 23rd (2020), which felt... anticlimactic?*

Have my cake, and eat it 🎂

Image: *Arecibo Observatory (from Wikipedia)*
TableQA -Query your tabular data with natural language
Tags: nlp, machinelearning, deeplearning, python
Published: 2020-11-28 17:33:21

Imagine you have a big database/dataframe of tabular data. And you don't know enough SQL or doesn't know what the values are in the dataframe to make a good enough SQL query to do the task for you. This is where you wish you could ask something in natural language and hope AI got you covered to find the results for you. TableQA is one such product that gets you the result you want.

Suppose you are dealing with cancer death data. You have columns named as Year, Nationality, Gender, Age Group, Cancer site, Death Count. You could use TableQA to simply ask 
```"what is the maximum age of men having stomach cancer"``` and get the result. As simple as that.

TableQA uses huggingface transformers under the hood and uses a combination of an AI-based entity extractor to generate key value pair mapping of column name and values, and custom trained classifiers to classify the aggregate type,i.e COUNT,MAX,MIN,SUM,AVG. From there on it builds the associated SQL query on its own, with a rule-based approach. The rules are pretty much of an advantage because unlike other AI products which rely heavily on the dataset, you can modify the blocks of rules so that you can get a more accurate result.

The use of such rules could be more explained by a schema.
Suppose you want to include custom keywords for the natural language query to detect the column to which it belongs, or you need keywords for any column values, you could add a schema which contains this info and make the performance better.

The output could be visualized as the result of a query, or a bar or pie chart based on the result, or you could get an SQL query so that you could use that on your own database.

The ultimate use-case and userbase are widespread. You could use this on many databases including MySQL, Postgres, SQLite, and the same even on Amazon RDS. You could even use this plugin under your chatbots, Heck yeah!

There are several features I would like to show you that tableQA is capable of supporting. But enough talk, let's get coding! Feel free to check out the source code and also there is a colab example for you to try out!

[Github-TableQA](https://github.com/abhijithneilabraham/tableQA)

[colab example](https://colab.research.google.com/drive/1Bgd3L-839NVZiP3QqWfpkYIufQIm4Rar?usp=sharing)

Feel free to mail me at abhijithneilabrahampk@gmail.com for any questions.
Why sticking up with One Resource is Important.
Tags: programming, codenewbie, java, datascience
Published: 2020-11-28 17:23:51


"I don't think hackerrank is good for Data Structure , I should try out Codeforces",
"I think codeforces is too difficult."
"What about learning code from Youtube?" hell yeah...
"Wait..!! I don't understand Anything here it's not well Structured" .
"you know what?, I should have been continued with hackerrank."
Boom... i have wasted my time.

Yes, almost everyday we come up with the thought like this, With the so many resources all around We are stuck.
I would talk about me, how I understand  the importance of sticking with a Single resource.


A Few years back, I started Learning Programming language from random YOUTUBE videos. That's It. I thought I have cracked the formula to learn Programming just watch, the tutorials and execute it in Real time with the Instructor. 
I gain confidence I thought I have learned a full Programming language in Span of Just 6 hours of Tutorials. 
I thought I understand each and everything at that point of time . 
At that time I actually made a cool project(with Instructor) and showed off to my friends on Social media.
 
But wait?!! Why I wasn't able to execute the program myself?
But why I wasn't  able to do Anything else by myself?

That's Because It was a Fake confidence .Do you really think you could Master  something like Programming language in Just 6 hour? Maybe you're a fast learner or have a Intelligent Mind. 

But Sorry, I have to say What I don't really Say Easily , That's IMPOSSIBLE.

You're Smart, if you know what you don't know, and then you'll have a clear Idea of what you know and that's Where Confidence come from and That's how you prove beginning of the Sentence.

So Now that You know how to be Smart Just by doing NOTHING.
Offcourse you wouldn't mind to be the Smartest...Right?

You may argue that  'hey, Why should I not  learn from different resource if I have option to choose The best."

You're Right here but for the matter of fact i'm also right let me back it up


So the thing is You're learning Data Structure to Store data in most efficient manner and you're storing it in the most inefficient way in your mind. Too many contact switching can lead you to problems. 

Its not hard to understand that if you switch Alot during your Intial stage of Learning then probably you'll messed up you're basic concepts  and that's when your struggle  with programming will start. 


Trust me Whatever Resource you choose is the Best.
Because that's where Your best come from...


All the best.
12 Great Visual Studio Code Plugins for Web Developers
Tags: codenewbie, writing, devops
Published: 2020-11-28 17:15:12

Serious lover of developers, Visual Studio Code has managed to become a popular code editor used by countless web developers since 2015. With its built-in Git support, IntelliSense that helps autocomplete code, extensive search, and advanced Debugger features, Visual Studio Code deserves all the praise for it.
Continue reading: https://sirnode.com/12-great-visual-studio-code-plugins-for-web-developers