teleren/devto huggingface dataset:
Share Code With A Github Repository - A Quick Start Guide
Tags: git, github, npm
Published: 2020-05-07 09:50:15

&nbsp;
**Problem:** You have code you want to share with others and you don’t know git…
&nbsp;
**Solution:** Here are the basic steps to follow
&nbsp;
1 Download and install Git  
[Git Page](https://git-scm.com/)    

[Install Git on Win10 quick video](https://www.youtube.com/watch?v=d3g_e0HFMzI)  

2 Navigate to the root folder of your project and create a file named _.gitignore_

Include inside it the folders and files that you do NOT want to share.

e.g.

```
node_modules
client/node_modules
config/default.json
private/my_secret_passwords.txt
```

3 Initiate a git repository by typing

```
git init
```

in the console

4 Stage all the files you are about to commit by typing

```
git add .
```

5 Make the commit

```
git commit -m 'YOUR_DESCRIPTIVE_MESSAGE'
```

_YOUR_DESCRIPTIVE_MESSAGE is just informative text_

&nbsp;
So far you have commited your code to a local git repository.
&nbsp;
Now you need to make it public, with a remote repository hosted in Github.
(There are alternatives to Github, such as Gitlab, Bitbucket and more but this is not the topic of this article…)

&nbsp;

6 Sign up and sign in to Github: https://github.com/

7 From the top-right select the + sign , New Repository

8 Set a name for the new repository, e.g myrepo

9 In the next screen, copy the lines from the paragraph *…or push an existing repository from the command line*

![image](https://i.imgur.com/GCbmotc.png)
e.g.

```
git remote add origin https://github.com/stefaleon/myrepo.git
git branch -M main
git push -u origin main
```

10 Paste those lines in the console and enter

&nbsp;

Now the contents of your project (except the .gitignore includes) are uploaded to a repository in Github which you can **share** via the url like
**https://github.com/your_github_name/myrepo**

&nbsp;

![thats all folks!](https://miro.medium.com/max/1400/0*f1vWEOzBr0sdF7Ip.jpg)

&nbsp;
&nbsp;

After on, if you update your code you can be updating your local commits with

```
git add .
git commit -m 'YOUR_NEW_COMMIT_MESSAGE"
```

and also updating the remote copy of your repository in Github with

```
git push
```
TypeScript Onboarding for React Engineers
Tags: typescript, react
Published: 2020-05-07 09:47:33

We can get started with TypeScript right away as React engineers. As long as we know how to type props to our components and write handlers for our events, we can build most of our UI in TypeScript.

## Create app with TypeScript

```
npx create-react-app todo --template typescript
```

## Code

```typescript
import React, { useState } from 'react';

const TodoApp = () => {
  // <Array<string>> specifies state will be Array<string>
  // Generics: https://www.typescriptlang.org/docs/handbook/generics.html
  const [todos, setTodos] = useState<Array<string>>([]);
  const [newTodo, setNewTodo] = useState('');

  const onAdd = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setTodos([...todos, newTodo]);
    setNewTodo('');
  };

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNewTodo(event.target.value);
  };

  const onRemove = (todo: string) => {
    setTodos(todos.filter((t) => t !== todo));
  };

  return (
    <>
      {todos.map((todo) => (
        <TodoItem todo={todo} onRemove={onRemove} />
      ))}
      <form onSubmit={onAdd}>
        <input type="text" onChange={onChange} value={newTodo} />
      </form>
    </>
  );
}

// Specify prop types with interface
interface TodoItemProps {
  // We can specify values
  // Basic types: https://www.typescriptlang.org/docs/handbook/basic-types.html
  todo: string;
  // as well as functions
  onRemove(todo: string): void;
  // and other interfaces/types if we wanted too
}

// We are typing function argument `props`
// Object destructuring
const TodoItem = ({ todo, onRemove }: TodoItemProps) => {
  return (
    <div onClick={() => onRemove(todo)} role="button">{todo}</div>
  );
};

export default TodoApp
```

## Interfaces

Interfaces are used to describe a structure of an object.

```typescript
interface TodoItemProps {
  todo: string;
  onRemove(todo: string): void;
}
```

Once an interface is defined, we can use it with a component:

```typescript
const TodoItem = ({ todo, onRemove }: TodoItemProps) => {
  return (
    <div onClick={() => onRemove(todo)} role="button">{todo}</div>
  );
};
```

Learn more about interfaces:
https://www.typescriptlang.org/docs/handbook/interfaces.html

## Event Handlers

Event handlers are functions and TypeScript allows us to specify the type of the argument.

For forms we can use `React.FormEvent<HTMLFormElement>`:

```typescript
const onAdd = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  setTodos([...todos, newTodo]);
  setNewTodo('');
};
```

For input change we can use `React.ChangeEvent<HTMLInputElement>`:

```typescript
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setNewTodo(event.target.value);
};
```

These types are provided by `@types/react`. We can see what other types are available here:

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts

Learn more about functions in TypeScript:
https://www.typescriptlang.org/docs/handbook/functions.html
Developer Life | Common situations we may face
Tags: productivity, motivation
Published: 2020-05-07 09:34:15

Development can be awesome fun, but at this, can also be very frustrating. These are some things that I found always popping up as a developer.

{% twitter 1257937889293262851 %}

{% youtube kVu9wnxQqL0 %}
<center>[Youtube: Developer Life](https://youtu.be/kVu9wnxQqL0)</center>

Here are some more points/thing's I've noticed are common situations we all face!

{% twitter 1257969041752207367 %}
{% twitter 1257929416140701696 %}
{% twitter 1257914394454835200 %}
{% twitter 1257899399079849984 %}
{% twitter 1257892666466942977 %}
{% twitter 1257884815329648640 %}
{% twitter 1257860538647732224 %}

## Follow and support me: 
Special thanks if you subscribe to my channel :)
* [🎞️ Youtube](https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ?sub_confirmation=1)
* [🐦 Twitter](https://twitter.com/adrian_twarog)
* [💬 Discord](https://discord.gg/nGdThpE)
* [❤ Patreon](https://www.patreon.com/adriantwarog)

## Want to see more:
I will try to post new great content every day. Here are the latest items:
* [Adobe XD to Fully Responsive WordPress Site](https://dev.to/adriantwarog/adobe-xd-to-fully-responsive-wordpress-site-16e0)
* [Adobe XD to HTML Full Process](https://dev.to/adriantwarog/adobe-xd-to-html-full-process-ao6)
* [Full Tutorial on how to use SASS to improve your CSS](https://dev.to/adriantwarog/full-tutorial-on-how-to-use-sass-to-improve-your-css-57on)
* [Creating a Mobile Design and Developing it](https://dev.to/adriantwarog/creating-a-mobile-design-and-developing-it-5c4o)
Day one pt2 - initial setup, cpanel, mongo, node
Tags: node, mongodb, cpanel
Published: 2020-05-07 09:26:06

---
title: Day one pt2 - initial setup, cpanel, mongo, node
published: true
description: Second in a new series on building a full stack app using cpanel, mongodb, node and react
tags: nodejs, mongodb, cpanel
cover_image: http://toasterfaves.triplejdeveloping.com/images/logo.png
canonical_url: https://www.triplejdeveloping.com/blogarticles?blog=step-one-day-one-pt-2
series: Full stack recipe app - cpanel to react
---
#Episode two - electric boogaloo
## 3/5/20 Step one...still

So, I cheated a bit....

I started last night, but in the interest of documenting the process, I am retrospectively adding this information.

I started thinking about this more properly last night. I logged in to cpanel and checked for terminal access - I think I had to request it through my provider before as they locked access down by default, but they seemed fine about adding it.

I accessed that through the cpanel page and was presented with a terminal window. There, I was able to install [nvm](https://github.com/nvm-sh/nvm#install--update-script). Easy step one - once done, I could type <span class="terminal-font">nvm use node</span> to make sure I had a version installed and then <span class="terminal-font">nvm alias default node</span> to make sure the nvm version of node was the one accessed by new versions of the terminal.

This all went swimmingly...

Then I looked into installing mongo on the server. This looks like it needs `sudo` or `su` permissions to do it the easy way. This is when I started thinking about [Atlas](https://www.mongodb.com/cloud/atlas) instead of installing on the server. This seems like it might be useful to learn anyway - we use all of these tools at work, but (probably similarly for most of you), it is already set up and we just build on it

Fortunately, I already have a mongo account, but if you don't you will need to set one up - as I said, there is a free tier you can take advantage of.

You will have to create a new cluster. Once this is provisioned, you can connect to it - mongo will ask you to whitelist an ip and set up a user. Once that is done, you should be good to go.

At this point, you don't need to worry about creating any collections, tables or schemas - as soon as you insert from your app (as long as the connections are all set up correctly), mongo will allow you to connect to the cluster.

I think that will do for today. Next time, we can look at getting a api directory set up and connecting to mongo.

Time for a nap...
A Disabled React Component
Tags: react, todayilearned, javascript
Published: 2020-05-07 09:04:37

Fairly often in a React app you need to disable a component based on a prop or some state. Using a `Disabled` component is a clean and reusable way to handle that conditional logic.

You could choose to implement disabled by not showing the component at all (eg setting `display: none`), or you can do as I've done here and change the opacity to gray out the component. Most importantly, you can easily disable click events by setting the `pointerEvents` css property to `none`.

{% codesandbox j60s4 %}
DevNews for DEV Community
Tags: flutter, android, devnews
Published: 2020-05-07 08:46:01

---
title: DevNews for DEV Community
published: true
description: DevNews is open source Flutter application that using dev.to api to fetch articles.
tags: flutter, android, devnews
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/u4c66f6hi7dzs791aodw.png
---

## DevNews for DEV Community

[DevNews](https://play.google.com/store/apps/details?id=hundredthirtythree.dev_news) is open source Flutter application that using [dev.to](https://dev.to/api) api to fetch articles.


## About The Project

I remember back then twitter api was so popular and different people build beautiful apps for twitter. I used one of that application and it was super cool. 

Remembering this and seeing that dev.to api is accessible for building anything I took the challenge. Within 2 week I built this simple app which makes it accessible reading dev.to articles.

Building it with Flutter made it more fun, since it is my first released Flutter application I took care of it and made id [open source](https://github.com/chingiz/dev_news) letting everybody contribute to build app with more features covering all the api.

{% github https://github.com/chingiz/dev_news %}

## Future work

Since dev.to api is in beta I didn't dive into it and kept it simple. After first release of it I'm gonna build more features on it, of course with the help of the big and glorious DEV Community.

Hope, you will love it <3.

and I didn't of course forget Apple users, soon it is going to be available for you.

<a href='https://play.google.com/store/apps/details?id=hundredthirtythree.dev_news&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png'/></a>
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Published: 2020-05-07 08:37:50



			callData: function()

			{

				var urlWAF = myWidget.spaceURL + "/resources/WMSREQRestServiceModeler/getWorkOrderDetails";

				var dataWAF={

					"state": "Active",

				};

				/*var headerWAF={

					"SecurityContext": "ctx::VPLMAdministrator.Company Name.Default"

				};*/

				var methodWAF = "GET";

				

				WAFData.authenticatedRequest(urlWAF, {

					method: methodWAF, 

					//proxy:'passport',

					data: dataWAF,

					type: 'json',

					onComplete: function (dataResp) {

						if(dataResp.msg==="OK"){

							//myWidget.dataFull=JSON.parse(dataResp.data);

							myWidget.dataFull=dataResp.data;

							myWidget.displayData(myWidget.dataFull);

							console.log(myWidget.dataFull);

						}else{

							widget.body.innerHTML += "<p>Error in WebService Response</p>";

							widget.body.innerHTML += "<p>"+JSON.stringify(dataResp)+"</p>";

						}

					},

					onFailure: function(error){

						widget.body.innerHTML += "<p>Call Failure</p>";

						widget.body.innerHTML += "<p>"+JSON.stringify(error)+"</p>";

					}

				});

			},
Passing State As Props 
Published: 2020-05-07 08:27:54

So far, we have discussed props and state and looked at how useful they are in React. In this article, we will be discussing how to pass state as props in order to pass data between components. 

Look at the following code example. Suppose we have two components Image and App in the same folder, stored in Image.js and App.js respectively

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

In the example above, in App.js , we initialised the App component with a state “text” set to “I am a state”. Within its render method, on the Image component, we created a props called “passedState” and assigned it the value of the state using “this.state.text” 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2f0uxp1z3rofagit2ctc.png)


Next in the Image component, within the render method, we can now use “this.props.passedState”. This contains the data stored in the state passed from the App component via the "passedState" props and can now render it on the page within the App component and will return “I am a passed state”.

In summary, in addition to passing random data between components, it is also possible to pass state between components using props.
We've Arrived at the Bridge - Now, Cross!
Tags: devjournal, codenewbie, womenintech
Published: 2020-05-07 08:26:14

_This post was originally published on May 7, 2020 on [my blog](https://alexlsalt.github.io/blog)._

Thursday, Thursday, Thursday! Last night, I attended a great webinar put on by Twilio where participants got to try their hand at a live coding exercise via HackerRank.

Honestly, it was actually my first time doing that, and it was challenging - in a good way! I learned a lot afterward about best practices during the debrief from the host, Corey, and it really inspired me to start practicing with those timed coding exercises.

In fact, practicing live/timed coding exercises has always been one of those things at the back of my mind in an "I'll cross that bridge when I come to it" kind of way, and now I'm definitely thinking that I've come to that bridge lol.

I think I'll probably set myself up to do a few practice rounds each week. It's just something that I'm going to have to sit down, set a timer, and *do*.

That being said, I'm becoming more and more conscious of my tendency to shy away from new things that I don't know how to do because my underlying thought is that 'I don't know how.'

Looking back, it has been one of the determining factors in leading to procrastinating on important things in my life, but I'm realizing more and more that if I just purposefully work to switch the script and tell myself that the only way I'll eventually know *how* to do it is if I jump in and start practicing and getting experience with it!

Well, folks, we've made it to the bridge ... let's cross!
Chaos branching in Git
Tags: git
Published: 2020-05-07 08:20:40

When you're working on a feature branch, but that feature branch has had a lot of merges with other branches and sub-feature branches, you just want to unset the diff between all the files in one, chaos branch, and master you can run

```
> git checkout yourBranch
> git reset $(git merge-base master yourBranch)
```

(source from [StackOverflow answer](https://stackoverflow.com/questions/25356810/git-how-to-squash-all-commits-on-branch#answer-25357146))

Now you have one big change list, it's time to use `git commit -p` or your favourite git GUI to make selective commits into something more logical, ready to submit as a pull request.
DotNetGoF - Generate Gang of Four Design Pattern templates with .NET Core CLI
Tags: dotnet, csharp, gof, designpattern
Published: 2020-05-07 08:10:13

DotNetGoF is a [CLI template for .NET Core](https://docs.microsoft.com/pt-br/dotnet/core/tutorials/cli-templates-create-project-template).
You can check the [Github repo](https://github.com/joao2391/DotNetGoF) and the [Nuget Package](https://www.nuget.org/packages/DotNetGoF/).

It helps you to generate examples of [Gang of Four](https://www.dofactory.com/net/design-patterns).

## How to install

Use the [dotnet core CLI](https://docs.microsoft.com/pt-br/dotnet/core/tools/) to install DotNetGoF.

```bash
dotnet new --install DotNetGoF::1.0.0
```

## How to use

After installed it you'll see a list of templates available. If you want to check if it's all there run

```bash
dotnet new 
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2dugadv0q3vwlknswy14.png)


Choose a directory through your favorite terminal and run

```bash
dotnet new <SHORT_NAME> #example: dotnet new gofaf
```
Enjoy it!
Personal Documentation
Tags: help, vuepress, vue
Published: 2020-05-07 07:58:26

---
title: Personal Documentation
published: true
description: Where do you host personal docs?
tags: help,vuepress,vue
---

I have currently have a blog where I post snippets of info around different web dev topics but I'd like to somewhere I can write and keep more detailed notes that I can refer back to when I inevitably forget. 

I've tried gitbook which is good in way is it laid markdown supprt etc but limited without paying for it and ideally I want something I can host for free somewhere. 

I came across vuepress as anything Vue based I'm interested in but I've struggled to get started with it but it seems it may fit what I'm after. As I'd like to be able to style it and have more control over it. My site/blog is built with Gridsome which is also Vue-based, but I wondered has anyone ever used the two together? As you can add Vuepress to an existing project but I think I need to tweak the vuepress config to be able to get it to work with gridsome....

Any thoughts or perhaps pointers on Vuepress would be much helpful.

Update: So I've tried on more tha one occasion with VuePress but Im struggling to get anywhere with it. It throws 404 the config doesn't seem to work despite setting up as shown in the docs... I've tried adding docs folder to my personal site but I think I'd rather keep it separate.
CONTENT STRUCTURING OF A POWERPOINT PRESENTATION FOR A TECHNICAL WRITER

Tags: productivity, techtalks, career, technicalwriter
Published: 2020-05-07 07:52:12

The PowerPoint presentation is an essential communication-related skill to have as a technical writer, while you are preparing for a meeting, knowledge-sharing session, demo-session, or any formal event. Well-structured content in a PowerPoint presentation helps in significantly improving the content-flow and content-delivery. This blog helps you organize content for the PowerPoint presentations.

Start by dividing the content into three parts. They are;

1. Introduction
2. Body
3. Conclusion

<b> Content Structure for an Introduction </b>

1. Define objective(s).
2. Always <i> set the plot </i> for your presentation.
3. Give a (welcome) introduction. An introduction paragraph should contain 100 words. 

Overall, while you are writing a paragraph make sure you do not exceed 150 words with approximately 4-5 lines.

<b> Content Structure for Body </b> 

1. Define or list out all the relevant points.
2. Support your relevant points with detailed arguments where necessary.

While working on your body section, if you are creating content for the audience, remember to break the paragraph after you write either 8-10 lines or exceed 150 words. For oral presentations, try to present maximum information through bullet points, with a sentence limited to 25 words.

<b> Content Structure for Conclusion </b> 

Include the following;

1. The main takeaways from the presentation.
2. Scope of the content.
3. Summary of the content.

In conclusion, use bullet points and limit a sentence to 25 words.

<b> Some important points to consider;<b> 

1. Always proof-read the content, complement the format, and follow the word limit.
2. Use an aesthetic design such as; watermark or logo of your company. Avoid using watermark if it diverts the attention of your audience.
3. Do not use a copyrighted image. In case you use one, provide an authentic reference to the source.
4.2 Exception handling in Java
Tags: java, beginners, exception, devops
Published: 2020-05-07 07:32:31

In Java an exception is an event to indicate an error during the runtime of an application. So this disrupts the usual flow of the application’s instructions.

In general exceptions are thrown up in the call hierarchy until they get catched.

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

# Checked Exceptions
Checked Exceptions are explicitly thrown by methods, which might cause the exception or re-thrown by methods in case a thrown Exception is not caught.

So when calling methods, which throw checked Exceptions the Exceptions have either to be caught or to be re-thrown

'''

public void fileNotFoundExceptionIsCaughtInside() {
    try {
        createFileReader();
    } catch (FileNotFoundException e) {
        logger.error(e.getMessage(), e);
    }
}

public void fileNotFoundExceptionIsReThrown() throws FileNotFoundException {
    createFileReader();
}

public void createFileReader() throws FileNotFoundException {
    File file = new File("/home/Documents/JavaTraining.txt");

    // creating a new FileReader can cause a FileNotFoundException
    new FileReader(file);
}
'''
Checked Exceptions are used when an error can be predicted under certain circumstances, e.g., a file which cannot be found.

# Runtime Exceptions
Runtime Exceptions are Exceptions, which are not explicitly mentioned in the method signature and therefore also do not have to be catched explicitly.

The most famous runtime exception is the NullPointerException, which occurs during runtime, when a method is invoked on an object, which actually is null.

''' 
public void causeANullPointerException() {
    String thisStringIsNull = getMessage(false);

    // because the thisStringIsNull object is null
    // this will cause a NullPointerException
    thisStringIsNull.toLowerCase();
}

public String getMessage(boolean messageIsAvailable) {
    if(messageIsAvailable) {
        return message;
    }

    return null;
}

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