teleren/devto huggingface dataset:
How to write a javascript program.?
Tags: javascript, beginners, writing, programming
Published: 2021-01-03 05:43:36

#we need 2 things to run the javascript program...
1. We need Code editor and 
-> We are using  [vs](https://code.visualstudio.com/) (Visual Studio) Code. VS Code is free to editing code. Vs code is developed by Microsoft developers. 
2. We need where to see our output?
-> We use for output is Chrome. Chrome is developed by Google so it's also free to use 😅.


These 2 stuff things you already know.

So in this article, we are writing our first javascript program... 🥶. No Today we are not writing a Hello world... We are writing with Emoji to fun with javascript. Because I'm not thinking you go boring javascript.
Every javascript line end with ;

We are writing two types of javascript code. Internal and external javascript code.
first, we are discussing internal javascript

![program1](https://dev-to-uploads.s3.amazonaws.com/i/tkreum32180p4isvy5cb.png)

So now you see in our code. First, we make a simple HTML program, and then after you want to write javascript code. Then you can use `<script></script>`. 
You can use the `<script>` tag inside the `<body>` tag Or `<head>` tag

Secondly, External javascript use.

Index.html

![program2](https://dev-to-uploads.s3.amazonaws.com/i/iver84jux1cj2b775s31.png)
 
script.js
![program3](https://dev-to-uploads.s3.amazonaws.com/i/h5yub4chv11299w10exp.png)
 
Now you can see the first Index.html we are linked with the external script. 

`<script src="./script.js"></script>`.

SRC is an attribute of the script tag. Using src you can connect with an external javascript program. And seconde file call script.js in this file we write simple code...!

Now, How do I see my output in the browser.?
If you are using Chrome, Firefox, Or any other browser the way is always one.

Open Chrome browser -> clicks on white background -> Go to Inspect 
![Screenshot from 2021-01-03 10-55-03](https://dev-to-uploads.s3.amazonaws.com/i/g5tr742drqbpz4sgl4eb.png)

Go to the console.
 ![Screenshot from 2021-01-03 10-59-57](https://dev-to-uploads.s3.amazonaws.com/i/o4j2uown5abro1czya8d.png)
 
Here our output 👇
![Screenshot from 2021-01-03 11-01-11](https://dev-to-uploads.s3.amazonaws.com/i/wpo8iq34lblpg75v5vyn.png)

This is a long process to see our output 🤣
Click `F12` to directly open the console in your browser... 😎...

#What is console.log()? 
The console.log() is a function in JavaScript that is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user.

We discuss more Console.log() in the next chapter...
Thank you for reading 😉
What to learn before learning React
Tags: codenewbie, react, webdev
Published: 2021-01-03 05:28:23

I am currently learning React( A JavaScript library) and here are a few prerequisites before diving into the JavaScript library.

**BASIC HTML AND CSS**
You should have a basic understanding of HTML and CSS. Knowing how to write HTML sematic tags will make it easier to grasp the concepts of JSX(a JavaScript syntax extension) used in React. Besides that, you should learn how CSS is used in styling and in responsive web applications.

**VERSION CONTROL(GIT AND GITHUB)**
Git is an open source version control tool that lets you manage and keep track of your code and GitHub on the other hand, is a code hosting platform for version control and enables collaboration among developers.

**VANILLA JAVASCRIPT**
Before jumping into a JavaScript library or framework, it is a good idea to learn the vanilla JavaScript. Below is a list of JavaScript features that you should learn before learning React.
1. General JavaScript features(variables, functions, datatypes, conditional statements e.t.c)
2. Modern JavaScript features
 * ES6 classes
 * The new variable declaration let/const
 * Arrow functions
 * Destructuring assignment
 * Array functions especially Map and filter
 * ES6 modules
 * Asynchronous JavaScript

Happy coding!
Godot: Show custom editor warnings on Nodes
Tags: godot, tutorial
Published: 2021-01-03 05:13:46

Have you ever wanted to add the warning triangle on custom nodes that you can see on an `Area2D` or `KinematicBody2D` node? Well, then you're in luck because it is actually pretty easy!

For this example, we're going to create a custom `Enemy` node that requires a `Sprite` child node. That will give you a good starting point to extend the functionality to fit your purpose.

First, create a new script that inherits from the `Node2D` (or whatever node you'd like your `Enemy` to inherit from). I am going to call my file `Enemy.gd`.

We will define our class name to be `Enemy` and add the [`tool`](https://docs.godotengine.org/en/stable/tutorials/misc/running_code_in_the_editor.html) keyword. This will allow us to run code in the editor and show the required errors. One note here, I recommend reading the documentation for the `tool` keyword as there are some caveats that you will need to know about.

The top of your script should look something like this:

```gd
extends Node2D
tool
class_name Enemy
```

Next, we'll add the magical function, `_get_configuration_warning`. Whenever this function returns a non-empty string, it will show the warning in the editor.

```gd
// ...

func _get_configuration_warning():
	return ""
```

Before we add the logic, create your new `Enemy` node in a `Scene` so you can see the warnings appear in the editor. If you've changed the return statement, you should see something similar to this:

![Editor warning example in godot](https://dev-to-uploads.s3.amazonaws.com/i/c0adfdv45bfl8ni431xo.png)

We'll only be looking at direct children, so we'll use the `get_children` method and do a simple boolean check if the check includes a `Sprite`.

```gd
func _get_configuration_warning():
	var has_sprite = false
	
	for child in get_children():
		if child is Sprite:
			has_sprite = true
	
	if !has_sprite:
		return "Sprite is required"
	
	return ""
```

We create a boolean variable called `has_sprite` and set it to `false` by default. Then we loop through all the children, check if the child `is` a `Sprite` and set the variable to `true`. After the loop, we check if the `has_sprite` variable is still `false` and if it is, then we return a message saying that a `Sprite` is required.

If you save the script, the warning should pop up with your message and adding a `Sprite` as a child node should remove the warning.

The cool thing here is the `is` keyword, which allows us to;

> Tests whether a variable extends a given class, or is of a given built-in type.

Using this, we can test for any other nodes or other custom nodes that we have created.

Again, this is a very simple example but will be a good starting point from which to extend further to suit your needs.

---

Thank you for reading my article, it really means a lot! ❤️ Please provide any feedback or comments, I'm always looking to improve and have meaningful discussions.

👋 until next time!
Convert existing local project into git project
Tags: github, git
Published: 2021-01-03 05:09:29

I'm pretty sure we've all been here at some stage, you have a local folder with a quick project. The project soon turns out to be pretty useful so you actually wanted version control on it.

So how do we convert this folder into a git versioned project and even push it to GitHub?

First of all, we should have this local project somewhere on our computer, for me, it's a folder called `local-gitter` which contains a very basic website.

![Local gitter folder structure](https://cdn.hashnode.com/res/hashnode/image/upload/v1609219462023/hF-ige9Ha.png)

## Creating the GitHub project

Now let's head over to GitHub and create a new empty project.

![GitHub new project](https://cdn.hashnode.com/res/hashnode/image/upload/v1609219537088/pRlLTIUem.png)

On the next screen, you can fill out the name of your project, and add a description.

You can optionally choose to create it with a readme or gitignore file.

![GitHub new repo settings](https://cdn.hashnode.com/res/hashnode/image/upload/v1609219585089/TfNBSGhH5.png)

Once we have this repository, it's important to note the URL.

![GitHub repo url](https://cdn.hashnode.com/res/hashnode/image/upload/v1609219674336/11rnWr03B.png)

## Pushing our existing files to this repository

Now let's open our [favorite terminal](https://daily-dev-tips.com/posts/getting-started-with-the-terminal/) and follow these steps

- Navigate to the project folder.
- `git init` (start new git project)
- `touch .gitignore` (add ignore the file, add files you don't want in git here)
- `git add .` or `git add ${all relevant files}` (the dot adds everything, else add all files you want in git)
- `git commit -m "first message"` (Make it a good message)
- `git remote add origin git@github.com:rebelchris/local-gitter.git` (change with your URL)
- `git push -u origin master`

> Note: The gitignore file is super useful to not push stuff like `node_modules` for instance, always make sure to add these in the gitignore.

And we are done, now if we head over to GitHub we should see all the files we just committed.

![GitHub with all our files](https://cdn.hashnode.com/res/hashnode/image/upload/v1609220191370/fMtix6xYe.png)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Call a function inside a function
Published: 2021-01-03 04:52:34

Sometimes you’ll need another global function or one local function to rerun to perform some deeper algorithms and save some lines of code so I’ll show an example of one.

Function run(number){
Let newNumber = 0
Function again(){

}
For (let i=0; i<number; I++)
{

newNumber = again(newNumber)

}
Return newNumber 
}
Cleaner Flutter Vol. 1: Intro to CLEAN
Tags: dart, flutter, clean, architecture
Published: 2021-01-03 04:50:59

---
title: Cleaner Flutter Vol. 1: Intro to CLEAN
published: true
description: Beginner-friendly and Flutter focused introduction to clean architectur
tags: dart, flutter, clean, architecture
cover_image: https://images.unsplash.com/photo-1529220502050-f15e570c634e
---

> ⚠️ This article was deprecated. ⚠️
>
> Check out the updated full article on my personal [blog](https://marcossevilla.dev/cleaner-flutter-vol-1).

You can find even more and keep in contact with me on my socials:

- [GitHub](https://github.com/marcossevilla)
- [LinkedIn](https://www.linkedin.com/in/marcossevilla)
- [Twitch](https://www.twitch.tv/noscopedevs)
- [Twitter](https://twitter.com/MarcosJSevilla)
- [YouTube](https://www.youtube.com/noscopedevs)
Copying non-code files during a typescript build for deploy
Tags: typescript, tutorial
Published: 2021-01-03 04:44:37

---
title: Copying non-code files during a typescript build for deploy
published: true
tags: #typescript #tutorial
canonical_url: https://darraghoriordan.com/2021/01/03/copying-missing-files-typescript-build-deploy/
---

If you build your javascript project using typescript, it’s important to know that the typescript compiler `tsc` will only include files that are `.js` or `.ts`.

If you have an issue where you deploy or build a typescript project and you get a file not found issue or similar for say a pdf, it’s probably because you missed that typescript does not process these kinds of files for you.

If you need to include files like XML, pdf or images in your typescript project build output, you will have to copy them manually before or after the build process.

This is one way to copy assets in a typescript build.

<!-- end excerpt -->
## 1. Install copyfiles

copyfiles is an npm package so install it using your favorite package manager

```
yarn install -D copyfiles

# or

npm install --save-dev copyfiles
```

## 2. Add a copy files script

Add a script to your package.json file to copy the files you need. There are many options for copy files so check out their documentation, but this is what I typically use.

You can see here that I also have a `"build"` script that will be called to build the application.

I assume you will output the typescript build to `build` folder but this will be unique for your project. The last option in the `"copyMySpecialFiles"` script should match where you want the files to go!

```
{
  "scripts": {
    "build": "tsc -outDir build",
    "copyMySpecialFiles": "copyfiles --error --up 1 src/the-path/to-my/special-files/*.* build"
  }
}
```

I’m adding the script `copyMySpecialFiles`. This copies all the files in the folder to build. The `--up 1` tells copyfiles not to include the folder path when it copies. `--error` fails when there is an error. This is important to highlight unexpected issues when copying by stopping your build.

## 2. Add a post build script

Here i’m adding a special `postbuild` script. This script will automatically be run by `tsc` when the typescript build is successful. You don’t have to explicitly call this anywhere. If `postbuild` exists, tsc will call it for you.

```
{
  "scripts": {
    "build": "tsc -o build",
    "copyMySpecialFiles": "copyfiles --error --up 1 src/the-path/to-my/special-files/*.* build",
    "postbuild": "yarn run copyMySpecialFiles"
  }
}
```

And that’s it! you can use this to copy any required pdfs, images, excel files etc to the build output for you typescript Node application.
Prerequisites
Tags: dohackathon
Published: 2021-01-03 03:43:20

---
series : Open Source Marketplace
---
To complete this tutorial you will need :

- A text editor like [Visual Studio Code](https://code.visualstudio.com/download) or [Atom](https://atom.io/).
- A web browser like [Firefox](https://www.mozilla.org/en-US/firefox/new/) or [Chrome](https://www.google.com/chrome/).
- Familiarity with JavaScript. You can look at the [How To Code in JavaScript](https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript) series to learn more.
- Familiarity with Nuxtjs. You can take a look at Nuxtjs official documentation [here](https://nuxtjs.org/).
- Familiarity with TypeScript. You can look at the [TypeScript Tutorial](https://www.digitalocean.com/community/tags/typescript) series to learn more.
- Digitalocean account sign up [here](https://m.do.co/c/35524e9707b0)
- Sandbox Paypal Account [here](https://developer.paypal.com/developer/accounts/)
- Github code of this article [here](https://github.com/spiritbro1/opensource-marketplace-backend)
Introduction
Tags: dohackathon
Published: 2021-01-03 03:42:59

---
series : Open Source Marketplace
---

So i want to explain more about what i want to do with this project of mine, so i want to create a platform where you can buy or sell repo from git repository platform, in this case i want to use github, because it's the most popular git repository platform out there, and i'm gonna explain what i mean by selling the repo here, so what i mean by selling is, selling the rights of that repo, so let's say somebody want to change the name of that repo, you can't just fork that repo right? or you want to disable action, or etc. that you can't just do using forking repo, you should have access to that repo that's why i create this platform to enable developer to sell their access to that repo while still maintaining their repo. You can also buy private repo here so you can get access to some feature of a repo, for example that doesn't exist in the public repo, so the possibility of this platform is actually limitless.
Open Source Marketplace Using Digitalocean App Platform
Tags: dohackathon
Published: 2021-01-03 03:42:44

---
series : Open Source Marketplace
---

## What I built

I create an open source marketplace where you can buy and sell your repo from github

### Category Submission: 

Built for Business

### App Link

https://opensource-marketplace-qmgcv.ondigitalocean.app/

### Screenshots

![dashboard](https://rino.world/api/convertimage?url=https://imgur.com/download/BDOmqCy)

![add repo](https://rino.world/api/convertimage?url=https://imgur.com/download/dPANfNV)

![repo added](https://rino.world/api/convertimage?url=https://imgur.com/download/B4e0FT6)

![homepage](https://rino.world/api/convertimage?url=https://imgur.com/download/YlCQd6F)

![detail](https://rino.world/api/convertimage?url=https://imgur.com/download/nwKWMvz)

### Description
 
Sometimes, when a developer create a repo on github or any other git repository platform, they don't have the capability to get money from their repo other than donation, so in order to get some more money from their repo i create this platform, where you can sell or buy any repo from any developer while maintaning open source spirit, what does it mean to buy a repo in my platform? so sometimes people with only a fork repo doesn't have the ability to rename the project or change the description and whatever, forking only allow to change the code, with full ownership of the repo you can do anything with the repo. So let's say some of the repo you like doesn't have maintainer anymore and you love the maintainer and want to support the maintainer you can ask the maintainer to sell the repo on my platform then get full ownership of that repo. Or maybe if you want you can make the maintainer collaborator alongside yourself.

### Link to Source Code

{% github spiritbro1/opensource-marketplace-frontend %}

{% github spiritbro1/opensource-marketplace-backend %}

### Permissive License

[MIT License](https://github.com/spiritbro1/opensource-marketplace-frontend/blob/main/LICENSE)

## Background

What inspired me is, sometimes when we install an npm package there is something written on it like `npm fund` to fund the project owner, or sometimes people that has great repo that used by many but doesn't get credit for it can create a mirror to that repo with some more feature that you don't get in public repo and sell that private repo for some more money, so actually this was my take on this whole open source funding, so that open source maintainer can still get to maintain the repo and sell some of the repo that he think has some more exclusivity than the public repo, so that they can get their credit for their open source work.

### How I built it 

I'm using nuxtjs as a frontend also as a static website in DO app platform, also i add backend using nodejs express in the same app but different component,and using postgresql as the database


### Additional Resources/Info

- Youtube tutorial to deploy app platform [here](https://www.youtube.com/watch?v=1T3d7P_V2t4&lc=UgzS_QB6Ll7jMmmeV-N4AaABAg.9H6Pp-aTIa19HKh7Vn_dzf&ab_channel=BetterDev)
Good Resources for creating a programming language
Tags: resources
Published: 2021-01-03 02:53:10

A couple of months ago I had the idea to create a programming language. Yeah, crazy right?! Okay, but in all seriousness, learning to create programming languages helps you better understand computers. 

> “If you don’t know how compilers work, then you don’t know how computers work. If you’re not 100% sure whether you know how compilers work, then you don’t know how they work.” 
> — Steve Yegge

So, I went along googling "how to create a programming language" and "creating a programming language." You see, the problem here is that there are not too many proper tutorials that help you create a programming language, _especially_ for beginners. I literally was about to switch my search engine to DuckDuckGo or _even Bing!_ Now, I did find a couple of different resources, so I'll share them with you now, so you don't have to go through the long time it took me.

# Resources

### 1.
{% medium https://blog.usejournal.com/writing-your-own-programming-language-and-compiler-with-python-a468970ae6df %}

I found this one very helpful, and really was what I used in the end to create my programming language. This uses python to create a language.

### 2.
{% link https://dev.to/evantypanski/writing-a-simple-programming-language-from-scratch-part-1-54a2 %}

This is also really good. It explains a lot of the concepts in a language, and also gives really helpful diagrams, code snippets, etc.

### 3. [Let's Build a Programming Language](https://hackernoon.com/lets-build-a-programming-language-2612349105c6)

This is the first article in a series that walks you through the steps to create a language. This is another great resource to use and uses JS to create a language.

### 4.
{% github alex/rply no-readme %}
{% github dabeaz/ply no-readme %}
These are both great resources for lexers and parsers. I personally like RPLY, which is a direct port of PLY.

### 5.
{% youtube Eythq9848Fg %}
This is one in a 14 part series which really helps you create a programming language.

That's it! I hope this really helped you find resources to help!
Please comment if you have any other resources too!
Series: Building a POS. The API design
Tags: dohackathon, postgres, node
Published: 2021-01-03 02:43:08

---
title: Series: Building a POS. The API design
published: true
description: My submission to the DigitalOcean App Platform Hackathon! (Part 4)
tags: dohackathon, postgresql, nodejs
cover_image: https://media.giphy.com/media/Plg469Oxmig6lowyVM/giphy.gif
series: Building a POS
---

### Category Submission
Built for Business

![POS API design](https://dev-to-uploads.s3.amazonaws.com/i/d1lmaqxildckrpypdt9h.png)

It's time to design my own API's!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/srb4dfmn4fszcdtix97d.PNG)
Trougth Express I'm building a connection to the Database.

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

The API's are fully working! (Tested with [Postman](https://www.postman.com))

It's time to be serius 🤓😎🔥
I wouldn't have thought...
Tags: thoughts, personal
Published: 2021-01-03 02:14:10

I honestly wouldn't have thought I would be using this platform as much as I thought I would.

I am not a developer at all, but just love using Arch Linux. I mean I took C++ and C++ advanced in high school but that was like 18 years ago. Took Computer programming for 1 year in college, but felt it wasn't right for me. I remember installing Ubuntu because I was a complete noob and Ubuntu wasn't exactly user-friendly at that time. I remember spending 15 hours just trying to install a usb wifi adapter on my laptop. It didn't have all those fancy gui, it was just terminals. I didn't even know how to use it.

Youtube didn't have videos on how to install linux back in the days. It was just simply reading, and trial and error.

Arch Linux is the exact same thing. Youtube won't really help me because it changes. Just read the wiki and do a trial and error until you got it down.
I spent so many hours trying to install it the first time, always forgetting a command here and there each time. I finally got it, then I mess up the resolutions and had to do it all over again. 
But by making those mistakes, you are learning. 

Thanks for reading!

HaxNet@techie.com
HaxNet@cock.li
Send Positive Vibes
Tags: pwa, mobile, programming
Published: 2021-01-03 02:04:44

---
title: Send Positive Vibes
published: true
description: Send positive vibes PWA app
tags: pwa, mobile, programming
//cover_image: https://direct_url_to_image.jpg
---

2020 sucked and I just wanted to send positive vibes out to the world to combat the negativity.

I made an app for this. Free, no ads, no weird stuff. Just a simple mobile app where you can send positive vibes and see them.

https://spv.spirofloropoulos.com