teleren/devto huggingface dataset:
Installing Tomcat server in Netbeans 12
Tags: linux, tutorial, java, beginners
Published: 2021-03-12 06:29:39

Netbeans no longer comes with Tomcat bundled so if you want to deploy your web application you need to manually register an external server.

#### foolish assumptions
I’m assuming you are using at least:
* Netbeans 12.0 installed and you are using Linux 
* You have the **Java Web Applications** plugin installed.
* You know some basic terminal commands

> If you don’t care an easier method would be to just download [apache-tomcat.zip](https://tomcat.apache.org/download-90.cgi) from the Tomcat website, extract the archive to a folder under your home directory and just skip to step 4 of this tutorial.

## 1. Installing Tomcat
`sudo apt update` :) _(the Linux ritual)_
```
sudo apt install tomcat9 tomcat9-docs tomcat9-examples tomcat9-admin 
``` 

## 2. Add admin user in Tomcat
By default, Tomcat does have any users defined that could be used for administrative purposes, so we need to edit `tomcat-users.xml` and add a user with the proper roles assigned to it.
```
sudo nano /etc/tomcat9/tomcat-users.xml
```

Add the following lines in `tomcat-users.xml`.
```xml
  <!-- user manager can access only manager section -->
  <role rolename="manager-gui" />
  <user username="username" password="_SECRET_PASSWORD_" roles="manager-gui" />

  <!-- user admin can access manager and admin section both -->
  <role rolename="admin-gui" />
  <user username="username" password="_SECRET_PASSWORD_" roles="manager-gui,admin-gui" />
```

## 3. Allow Netbeans to read the tomcat Configuration
Unfortunately Netbeans doesn’t correctly detect the the Tomcat installation directory.
We need to make sure that the configuration files can be read from the installation directory otherwise will get an error saying `“The <CATALINA_HOME>/conf/server.xml can’t be read.”`

```
sudo ln -s /etc/tomcat9/ /usr/share/tomcat9/conf
```

We need to change permission on the Tomcat installation directory so we don't face any permission issues.

```
sudo chown -R USERNAME /etc/tomcat9/
sudo chown -R USERNAME /usr/share/tomcat9/
```
> change `USERNAME` with your Linux username

## 4. Adding Server in Netbeans
Now that Tomcat is installed and configured we can open up Netbeans and under the **Services** tab right click on the **Servers** and click on **Add server**.
![nbserver](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l99fp52k0awojxvxwtw8.png)

In the next window, select Apache Tomcat and click next.
Under `Server Location` enter the tomcat directory,*(where tomcat was installed)*. Also add your username and password that you used in the `tomcat-users.xml` file.![addserver](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpf4fspo6syznm1at2jz.png)

Click finish, and you should see Tomcat as an added Server under the Server node.
Thanks for reading. I hope this is useful for you.
Matthew Brannelly's Sales Strategy
Tags: sales, strategy
Published: 2021-03-12 06:12:57

According to Matthew Brannelly, businesses have to take a new fresh look into the strategies and look for ways to make sales amidst the most difficult economic and social situations.

Matthew Brannelly, a founder of Orbit NFP hub, grow delves deeper into sales strategy that can drive revenue during the pandemic and beyond. Let’s dive in!
https://matthewbrannellybrisbane.wordpress.com/2021/03/10/revenue-sales-strategy/
Annotate source with Jest/ESLint information in OneDev
Tags: devops, javascript, onedev
Published: 2021-03-12 06:05:09

[OneDev](https://github.com/theonedev/onedev) is an open source self-hosted DevOps platform, with ability to manage your git repositories, as well as running CI/CD jobs in docker containers.

The recent version can leverage your projects’s Jest/ESLint integration to:

1. Generate report with ability to search/order by relevant metrics
2. Annotate source code with Jest coverage and ESLint violations when view files or pull request changes
3. Generate statistics of relevant metrics over time

To help you getting an instant impression of how it works, I cloned the react project, and add a demo branch to introduce some ESLint violations. CI job on this branch will generate three reports, respectively [Jest test report](https://code.onedev.io/projects/react/builds/4/jest-reports/Unit%20Test/test-suites), [Jest coverage report](https://code.onedev.io/projects/react/builds/4/clover-reports/Jest%20Test%20Coverage) and [ESLint violations report](https://code.onedev.io/projects/react/builds/4/checkstyle-reports/ESLint%20Violations/files). Also visit [this file](https://code.onedev.io/projects/react/blob/6039030814aedeaa6ebac706c0886e3675160666/packages/react-dom/src/client/ReactDOMSelect.js?position=source-202.10-0.0-8&problem-report=ESLint+Violations) and [this pull request](https://code.onedev.io/projects/react/pulls/2/changes) to see source/diff annotated with Jest coverages and ESLint violations in action:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzfyoui2jku3qzqb2s5l.png)

With this information, you will get extra confidence when merge the pull request.

Now let’s check [build spec](https://code.onedev.io/projects/react/blob/master/.onedev-buildspec.yml) of the demo project to see how to achieve this:
1. _Commands_ of the _test_ step runs Jest and ESLint to generate relevant reports
2. Publish reports generated above via corresponding report publishing steps
3. In _Params & Triggers_ section, add triggers to run current job automatically upon branch updating and pull request creating

That’s it. Thanks for reading.
Did some cleaning today, felt like showing it off :P ;)
Tags: workstations, womenintech, 100daysofcode, javascript
Published: 2021-03-12 05:56:00

![Macbook, ipad,worksapce](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aygx0fnpb1ty5pt8n9fi.jpeg)
Project 58 of 100 - React Calendar
Tags: javascript, 100daysofcode, react
Published: 2021-03-12 05:54:35

*Hey! I'm on a mission to make 100 React.js projects ending March 31st. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to the deployed project: [Link](https://100-react-projects-day-58-calendar.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-58-react-calendar)

This is going to be one of the simplest projects I've ever done, so please don't berate me for it. I have a larger project in mind for this weekend that uses the calendar component so this project just gets your feet wet with the excellent `react-calendar` npm package.

It's a full-featured and up to date calendar component that comes with default styling you can import or you can feel free to write your own styles.

All you need to do is follow the example on the npm homepage for this one ([link here](https://www.npmjs.com/package/react-calendar)). The basic code looks like this:

```JS
import React,{useState} from 'react'
import Calendar from 'react-calendar'
import 'react-calendar/dist/Calendar.css';

function App() {
  const [value,onChange] = useState(new Date())

  return (
    <div className="app">
      <Calendar 
        onChange={onChange}
        value={value}
        className='app__calendar'
      />
    </div>
  );
}

export default App;
```

The onChange handler for the component is commandeered by the `Calendar` component so you'll want to be aware of that. It also comes with all kinds of options you can read about on their github- stuff like what happens when the user drills down to a given date, or when there's a new click on a day, or if you want to show weeks, or years, or whole centuries.

That's it for today! This weekend you'll see this pop up again. For now, enjoy this simple, easy to use calendar component thanks again to the `react-calendar` team :)
108. Convert Sorted Array to Binary Search Tree
(javascript solution)
Tags: javascript, algorithms
Published: 2021-03-12 05:39:56

###Description:
Given an integer array nums where the elements are sorted in ascending order, convert it to a height-balanced binary search tree.

A height-balanced binary tree is a binary tree in which the depth of the two subtrees of every node never differs by more than one.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
// The function will make the num in the center of the array the root node
// All nums to the left of the center num will be part of the left subtree and all nums to the right of the center num will be part of the right subtree
// Repeat this process of setting the center num in each subarray as the root node and all nums to the left and right as its sub trees
var sortedArrayToBST = function(nums) {
    if (!nums.length) return null;
    
    const mid = Math.floor(nums.length / 2);
    const root = new TreeNode(nums[mid]);
    
    // Call the function recursively on each subtree
    root.left = sortedArrayToBST(nums.slice(0, mid));
    root.right = sortedArrayToBST(nums.slice(mid + 1));
    
    return root;
};
```
Taking break while you work is extremely important - Why, how and when👇
Published: 2021-03-12 05:28:58

Let me explain you:

How to take a break

When you should take a break

Science of taking break

## How & When
Everyone say this, but no one explain how & when

When:
Every 30 minute or 1 hour

How:
Set a timer for 5 min (remind you break is over)
Drink water (as it refreshes your body)
Walk (for proper blood circulation)

## Why break is important 👇

Re-create Neuron
When you work longer on a project

Mind follows single path

You loose ability to see thing from other angle

After break you noticed that you get the solution quickly

Break recreate brain's neurons connection
This help to see picture from other angle

If you enjoy this thread and you want more

Subscribe to my newsletter [Click Here](https://bitfumes.com/newsletter)

Also a share or follow will encourage me to write more here
What place is best to do announcement of New Programming language?
Tags: spvm
Published: 2021-03-12 05:16:29

What place is best to do announcement of New Programming language?

I'm creating a programing lanugage. that name is SPVM.

https://yuki-kimoto.github.io/spvmdoc-public/

I'm Japanese. I don't know what place is best to do announcement of New Programming language?

If you know, would you tell me it?
Crab Fit! Find a time that works for everyone
Tags: project, webdev, react, googlecloud
Published: 2021-03-12 04:43:55

---
title: Crab Fit! Find a time that works for everyone
published: true
description: Crab Fit is a web app that lets you and your friends plan events by collating your availabilities to find a time that works for everyone.
tags: project, webdev, react, googlecloud
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vt83abppkrtial7ogzfo.png
---

I plan a lot of events with friends and co-workers, and often we need to plan a time, which usually ends up being done with a simple poll. I've also used Doodle a lot, but of course that has it's own flaws.

Using React and Google Cloud Appengine, I have created a new solution which I call 🦀 Crab Fit! Honestly most of the name comes from finding the cute domain 😅. I'm proud of what I've created so keep reading to find out how it works and how you can use it to plan your events as well.

Crab Fit lets you create an event with a specific set of dates in mind, or you can also just use generic days of the week.
![Selecting dates in Crab Fit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/naxyh215dsj4vhncjcsx.gif)

You can then choose a time range, say, if the event must happen during working hours, using this cool slider. (oh, and yes there's a dark mode!)
![Selecting a time range in Crab Fit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fdgvbp7rgeb7btrcfouy.gif)

Then, all you have to do is send out the link to everyone involved, and get them to put in their availabilities! You can view them all on a heat map to easily see when everyone is free.
![Viewing availabilities in Crab Fit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6oncyvbnv1owwnh220te.gif)

I am constantly updating it as I get feedback, and currently have plans for the following as I write this:
* Mouse over the colour bar to highlight availability segments
* A better way of viewing availabilities on mobile
* Select a specific person to see their availability
* Just click on the link to copy to the clipboard

Please try it out and of course let me know if you have any feedback!

You can view it here: https://crab.fit
March 11th, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-03-12 04:23:27

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Image of the brain](https://media.giphy.com/media/ojmB7lOn3VUU8/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-2k65 %}

![Someone feeling like "Yaaas!"](https://media.giphy.com/media/zBhZiVNNQjfTG/giphy.gif)
</center>
O que é MVC?
Tags: mvc, mobile, designpattern
Published: 2021-03-12 04:16:53

<b>Model View Controller</b> é um design pattern, uma arquitetura que nos ajuda a organizar o código em três camadas e que pode ser aplicada em projetos.

Mas como é a arquitetura do MVC?

<b>Model</b>
Ele é responsável pela manipulação dos dados, escrita, leitura e validação.

<b>View</b>
O view é onde os dados são exibidos para o usuário.

<b>Controller</b>
Já o Controller, recebe as requisições do usuário. Depois elas são passadas para o Model e são exibidas na View.

<i>Ah, beleza! Sei como é, mas como funciona o MVC?</i>

<b>View:</b> <i>Olá Controller, a Lele ta querendo acessar o e-mail.</i> 
<b>Controller:</b> <i>Opa, tô aguardando ela fazer a requisição.</i>
<b>Model:</b> <i>Os dados estão corretos! Controller, olha ai a resposta da requisição.</i>
<b>Controller:</b> <i>Excelente! View tu pode exibir pra ela aí na tela?</i>
<b>View:</b> <i>Claro, Controller! Vou mostrar…</i>
Nuxt, Docker, WSL2, VSCode...
Tags: docker, wsl2, nuxt, vscode
Published: 2021-03-12 04:10:13

Hoje um amigo pediu ajuda para colocar uma aplicação no container (docker). Apenas para desenvolvimento mesmo. Como ele não tinha muito conhecimento de docker e nem de como rodar no windows, fiz um vídeo para ajudá-lo e me ajudar a aprender também.

{% youtube 5ZUkN95184U %}

Resultado foi um docker-compose:
```yml
version: "3.8"
services:  
  nuxt-ol:
    environment: 
      - NUXT_HOST=0.0.0.0
      - NUXT_PORT=3000
    image: node:12.21.0-alpine3.12
    container_name: nuxt.ol
    hostname: ol.nuxt
    ports:
      - 3000:3000
    volumes:
      - ./nuxt-ol:/usr/src/nuxt-ol
    working_dir: /usr/src/nuxt-ol
    command: npm run dev
```
Rolou um Makefile (alguém ainda usa mesmo?!):
```make
#!make

npm-install: ## executa npm install
	docker-compose run --rm nuxt-ol npm install

npm-build:
	docker-compose run --rm nuxt-ol npm run build

nuxt-up: ## iniciar serviço
	docker-compose up -d
```

{% github richardson-souza/nuxt-ol %}

Referências:

[The Intuitive Vue Framework](https://nuxtjs.org/)
[Overview of Docker Compose](https://docs.docker.com/compose/)
[Guia de instalação do Subsistema Windows para Linux para Windows 10](https://docs.microsoft.com/pt-br/windows/wsl/install-win10)
[Docker Desktop](https://www.docker.com/products/docker-desktop)
Keyboard shortcuts for GitHub • your key to increased productivity
Tags: github, opensource, productivity
Published: 2021-03-12 03:49:55

Many of us spend hours on the computer. Even more so today with people working from home. One of the quickest ways to increase productivity is to learn shortcuts. It's in the name - shortcuts! Take a shorter route to do something. Not all things should be cut short, but quickly navigating your computer is one that pays off.

Learning keyboard shortcuts for your most used programs can help increase your productivity ten fold. Your work will be quicker and you won't break your flow by having to reach for your mouse.

![Typing fast 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttimh72qfy2enw5h318j.gif)

Most people will know about the standard 'global' keyboard shortcuts, like CTRL+C to copy, or CTRL+V to paste. Did you know GitHub has a tonne of keyboard shortcuts too? From finding a file, to annotations, to quickly navigating to issues.

## Keyboard shortcuts for GitHub

One of the coolest keyboard shortcuts is "T". By typing "t" on your keyboard, you can quickly search for any file. Files are often lost in folders and random locations in your code base. Now you can quickly find them.

When you're in a repo, you can use some of my favourite keyboard shortcuts. One of them is "g" then "c", which takes you directly to your repo's code. There's also "g" then "i" to take you to issues, or "g" and "n" for notifications.

![Keyboard repo shortcuts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wycrs0n1l91ikdaiufdb.PNG)

Keyboard shortcuts are unique in GitHub. Each page has its own keyboard shortcuts, depending on the type of page. For example, a repo will have different shortcuts if you're in the code base or reviewing a pull request. You can check the keyboard shortcuts for any page you are on, by typing "?" on your keyboard.

![keyboard shortcuts Pull request](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/303lj1sor8ojs1wxgjzs.PNG)

You can also check out the [GitHub Docs page](https://docs.github.com/articles/using-keyboard-shortcuts/) to see all the available shortcuts.

Hopefully this helps increase your productivity, and take your code to the next level.
CSS Flexbox
Published: 2021-03-12 03:35:23

While scrolling through my blog posts from the past few months, I realized that I never talked about Flexbox! Here is a brief intro on it, enjoy!

The CSS Flexbox is a CSS module that gives amazing flexibility when creating layouts. CSS Flexbox is an elegant and lightweight approach to layouts in our CSS! Some pros of using Flexbox are:


- No floats
- Responsive and Mobile friendly
- Simple to position child elements
- Flex Container’s margins do not collapse with the margins of its 
contents
- Order of elements can be easily changed without editing the source HTML

Flexbox was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface with powerful alignment capabilities. Flexbox deals with layout in one dimension at a time whether it be a column or a row.

Flexbox utilizes a parent-child relationship so when you declare a flex container, the direct children of this container will automatically turn into flex items. Flexbox is designed as an axis grid.Each one of the flexbox properties works either on the container or defining how items are displayed inside the container. Flex items can be laid out in all directions across one of the two axes. Flexbox allows us to change the order of the flex items without the need of altering the source order of our code. Flex items are responsive, meaning they shrink and grow to the fill the page no matter the size!

As mentioned above, the flexbox container has two axes: the main axis and the cross axis. The main axis is determined by the value of the flex-direction property. The cross axis on the other side will be always perpendicular to the main axis. 

Thanks for stopping by!
Building My First Projects with Java!
Tags: java, webdev, devjournal, productivity
Published: 2021-03-12 03:27:15

Coming from the Flatiron Bootcamp, I have been exploring different programming languages out there to keep my wheels turning. Especially in this programming world where things are always changing and evolving, my passion for learning fuels my drive.

I have found myself enjoying Java and have decided to start building CLI projects. Alongside a Java course, I built 3 Projects this week: an email administration application, a student database application, and a bank account application. One thing is watching videos and reading articles but the best way to learn a new language, personally, is by building a project to see all the puzzle pieces come together!

In these projects, concatenating seemed to be my best friend. In Java, using the "+" provides a concatenation operator, you can directly add two String literals. A great example is when asking a user for input and printing it back out with some added text:
```javascript
Scanner in = new Scanner(System.in);
        System.out.print("Enter your name: ");
        String name = in.nextLine(); //Input: Ken
        System.out.print("Welcome, " + name + "!");
//=> Welcome, Ken!
```
Something to remember when using the "+" operator, is that spacing is not included so it is best to include it before closing the double quotation mark. 

A great escape character to use when displaying this data, and have it organized is 'newline' => "\n". This also comes in handy when printing out multiple lines, it can show you what it will look like before it prints out. 
```javascript 
// void means this method doesn't return a value
 public void showInfo(){
      System.out.println(
              "Name: " + name +
              "\nAge: " + age +
              "\nShoe Size: " + shoeSize 
      );

//=>   Name: Ken
//     Age: 20
//     Shoe Size: 10
```

I am now working on implementing a CSV file reader for my banking project. Knowing there is always something you can improve or add to my project, or simply start a new one, is the reason I love what I do and why I can't picture myself doing anything else!