teleren/devto huggingface dataset:
React #1: Hello, Bulma
Tags: react, bulma
Published: 2020-10-10 13:00:36

#Objectives
Create hello world page with ReactJS and Bulma.

#Prerequisites
1. Have npm package installed
2. Have IDE (for me Visual Code)

#Steps
### Generate react project with CRA (create-react-app) tool
```
npx create-react-app my-app
```
run `npm start` to check whether the boilerplate is installed correctly. 

### Install Bulma package
```
npm install bulma
```
instal node-saas
```
npm install node-sass
```

### Delete/ clean CRA boilerplate
delete every file under `/src/` file except `index.js`.

### Import Bulma and FontAwesome library
- First, open `index.js`, delete unused import header.
- Second, open `index.html` under `/public/` folder, add 
```
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"> 
```

### Hello, Bulma!
- create new folder named `component` under `/src/` folder
- create new file, `Banner.jsx` 
- add following script

```
import React from "react";
import "bulma";

class Banner extends React.Component {
  render() {
    return (
      <section class="hero is-primary is-fullheight">
        <div class="hero-body">
          <div class="container has-text-centered">
            <h1 class="title">Hello, Bulma!</h1>
            <h2 class="subtitle">This is react app feat. Bulma</h2>
          </div>
        </div>
      </section>
    );
  }
}

export default Banner;

```

- render the banner by defining its component in `index.js`

```
import React from "react";
import ReactDOM from "react-dom";
import "bulma";
import Banner from "./component/Banner";

ReactDOM.render(<Banner />, document.getElementById("root"));
```

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

#Link
[Bulma](https://bulma.io/)
[CRA Boilerplate](https://reactjs.org/docs/create-a-new-react-app.html)
[Project Github](https://github.com/ninankara/reactjourney)
My contributions in this year 2020 Hacktoberfest
Tags: hacktoberfest, nuxt, frontendfoxes, css
Published: 2020-10-10 12:57:36

In this post I want to tell you how my contributions to Hacktoberfest2020 are going, although there are still 21 days to go!

This week has been a blast, I literally spent 5 days without stopping programming and I had a great time (but I don't recommend it as a lifestyle, for a hackathon is worth xD).

As I've already finished 4 PRs which is the star number of this hackathon (I'm looking forward to planting my tree 😍), I wanted to tell you what I've been doing.

Since I've been contributing little, I wanted to start with technologies that were more familiar to me, so I only had to fight with **forks** and **git origins**. That's why I chose to create a feature in  [https://stylestage.dev/](https://stylestage.dev/) as my first PR and put into practice my beloved SASS to generate the CSS that was require.

> If you still haven't finished your PRs or you want to keep contributing I absolutely recommend you to participate in this project, it's amazing!


{% github https://github.com/5t3ph/stylestage/pull/69 %}


And once it is merge you can see your result live! 😍

[https://stylestage.dev/styles/purpleland/](https://stylestage.dev/styles/purpleland/)


Then, searching among projects with the Hacktoberfest2020 tag, I found one where they were looking to migrate their CSS to LESS with the BEM methodology for their class nomenclature. As I really liked the initiative, I helped them with it. It allowed me to get to know Apache Cordova a bit, since I had never used it before.


{% github https://github.com/Scratch-Client-4/itchy-cordova/pull/29 %}


Once I had gained confidence with the way of working in open source I decided to try out projects I already knew before.


As a huge fan of the work that [FrontEndFoxes](https://www.vuevixens.org/) does for the community of FrontEnd developer women, I decided to contribute to their new website by adding the unit tests setup, first test cases and the CI workflow that won the [Runner-Up award at GitHub Actions Hackathon](https://dev.to/devteam/github-actions-hackathon-winners-announced-38o2) (which I'm very proud of and I was looking forward to implementing it in a real project).


{% github https://github.com/FrontEndFoxes/ff-web/pull/26 %}


Finally, as expected, I couldn't leave out my dear NuxtJS, so I caught up to see if they needed anything. I was told I could help migrate the documentation from the http module to the new [Docs theme](https://content.nuxtjs.org/themes/docs/) and here it is 👁.


{% github https://github.com/nuxt/http/pull/133 %}


These weeks I will continue to contribute to the wonderful world of open source and I hope to see you for some PR. May the good practices be with you!
React + Heroku
Tags: react
Published: 2020-10-10 12:48:37

In this post, I'll explain the step by step process to deploy a React app to heroku and no you'll not need a backend express server to do so.

Steps:
- Login/ Create a heroku account
- After logging in, you'll be redirected to the Heroku homepage
- On the top right corner, select "Create new app" from the "New" dropdown.
- In the step above we are creating an app that includes all the necessary quirks and features to deploy our React app.
- Give a name to your app and Heroku is kind enough to let you know if that name is taken or not.
- Next select a region where your app and its data will reside (although not guaranteed)
- After your application is created, you'll be redirected to the dashboard which includes sections such as Overview, Resources, Deploy, Metrics, Activity, Access and Settings.
- I'll explain each of these sections in more detail in the next iteration of this post
- Go to Deploy tab and you'll see "Deployment method" section. We have different methods to connect our github repository for deployment but in this case, I'll select "GitHub - Connect to Github".
- Selecting this option will switch the view below to two drop-downs with a label (Search for a repository to connect to).
- Enter the name of your repository and click search.
- It'll show the results with Connect button next to them.
- Once, you find your repository that you would like to connect, Click the corresponding connect button.
- After the connection is successful, You'll see two new sections: Automatic deploys and Manual deploy.
- Since, we'll be automating our react app deployment, Go to Automatic deploys and Choose the branch whose code you'd like to build and deploy.
- You can enable a CI-CD pipeline before this step (Usually github actions)
- Click "Enable Automatic Automatic Deploys" and you are all set on configuring Heroku.

Build and Serve React
- Now comes the main section, we'll deploy our beautiful react application to Heroku.
- First, install the following npm package: "serve", this is used for serving static websites and single package application.
- After the package is installed, go to your package.json file and in the "scripts" block, create a new key named "start-dev" and set its value to "react-scripts start"
- Now, replace the start key with following value: "serve -s build"
- And thats it!
- Push your changes to the remote repository branch that is connected with Heroku for automatic deployment and it'll start building your project.
- You must be thinking, I didn't make any config changes in Heroku to specify that my project is React based. Well, Heroku is smart enough to automatically detect your project, build and serve it for you.
- As the project is building, you can check the status of your build by going to Activity section, as it gives real time build logs.
- When the application is built fully, You can access it by clicking on "Open App" button and it'll open your deployed react app in a new browser window.

- In the next iteration, I'll explain the sections in more detail and show how to add environment variables if your app requires some.
Connect to ScaleChamp Managed PostgreSQL with SQLAlchemy
Tags: sqlalchemy, postgres, tls, tutorial
Published: 2020-10-10 12:19:47

Create database instance in [Control Panel](https://cloud.scalechamp.com/):

1. Select service, cloud, region:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d8ml1l34hu92oq54toab.png)

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

3. Wait until instance will be in RUNNING state:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xxiipn8067ktru1nl62h.png)

4. Then connect to it from your python application:
```python
from sqlalchemy import create_engine

conn_args = {
    "sslmode": "verify-full",
    "sslrootcert": "<path to your ca.pem downloaded from UI>",
}

engine = create_engine("postgresql://<user>:<password>@<hostname>:5432/ssndb", connect_args=conn_args)

conn = engine.connect()
```

To make sure no one can gain access to your database accept allowlisted IPs checkout firewalls section.
Voa'la. See you at [ScaleChamp](https://www.scalechamp.com)
Deploy StableCoin on XinFin Network
Tags: xinfin, stablecoin, ethereum, blockchain
Published: 2020-10-10 12:19:19

Non-Tech people can deploy a #Stablecoin on XinFin Network within 5 minutes. The best part here is that the transaction cost is extremely low compared to Ethereum Network. Here is the link to deploy stable coin on #XinFin Network: https://youtu.be/tsh0GCLucYU
#XDC #ETH
Introduction to Machine Learning
Tags: machinelearning
Published: 2020-10-10 11:29:57

Hi! Yesterday my book "Hands-on Machine Learning" arrived, so I wanted to give you a little introduction to this topic, based on the book. What is Machine Learning(ML)? "Machine Learning is the field of study that gives computers the ability to learn without being explicily programmed." (Arthur Samuel)

A good example is your E-Mail Spam Filter. The Spam filter learned to identify spam because it has been trained by examples of spam emails, the so called training set. When you mark an Email as spam this training instance will become part of the training set. With Machine Learning you avoid to program each spam case by yourself.

Not only can machines learn from humans, its also possible the other way around. When the spam filter has been trained for a while, we can inspect it by letting it reveal the list of words that it believes are the best predictors of spam. When you apply ML on large amounts of data(="data mining") you can discover patterns.

ML systems can be trained with or without human supervision (supervised/unsupervised). In supervised learning the training data includes the desired solutions, which are called labels. This means that you give the ML algorithm examples of Emails which are already marked as "not Spam" and examples marked as "Spam".

In unsupervised learning we dont use labels. You simply run different ML algorithms on the data. You could for example run a clustering algorithm on your Blogs visitors to detect groups of similar visitors. A possible result of the algorithm could be that 30% of the visitors are female and visit your blog on average at 8 p.m.

What interesting things do you know about Machine Learning? Have a nice day.
Something is already running on port 3000
Tags: ecommerce, react, javascript
Published: 2020-10-10 12:01:40

Hi Everyone 
I have downloaded a few react project from github for study purpose. When I run the project with the command npm start I got this error message : "Something is already running on port 3000". 

Now I if I restart the PC then I can run the project again. How can I run the projects without restarting the PC ? What's the solution ?
Daily Developer Jokes - Saturday, Oct 10, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-10-10 12:00:20

---
title: "Daily Developer Jokes - Saturday, Oct 10, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Saturday%2C%20Oct%2010%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12590a84b94.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What are computers' favorite snacks?

___A:___ Microchips, phish sticks, and cookies. But just a few bytes of each.
 -->
Making ISS 🛰️ tracker using Leaflet and Svelte V2
Tags: svelte, javascript, showdev
Published: 2020-10-10 11:43:28

A few months ago I made an [ISS tracker](https://dev.to/shriji/making-iss-tracker-using-leaflet-and-svelte-gg6) and it had too many lines of code although easy it wasn't beginner-friendly so a month ago I started to work on making a user-friendly svelte wrapper for leafletjs which reduces the complexity drastically! check out the demo [here](https://leaflet.anoram.com/)



### Quick start guide
Install via `npm i npm i @anoram/leaflet-svelte`.

```html
<script>
import Map from '@anoram/leaflet-svelte'
let options={
  center: [13,80],
  markers: [
    {
      lat: 13,
      lng: 80
    }
  ],
  mapID: "map"
}
</script>
<style>
  .map {
    height: 600px;
    width: auto;
  }
</style>
<div class="map">
  <Map {options} />
</div>
```
Svelte REPL: [https://svelte.dev/repl/a6a5c969aaf544018e5a4a9d7ea9e031?version=3.29.0] (https://svelte.dev/repl/a6a5c969aaf544018e5a4a9d7ea9e031?version=3.29.0)

An updated version of ISS Tracker https://iss.anoram.com/

Repo here https://github.com/peopledrivemecrazy/svelte-iss


Enjoy!
As a beginner, in what order should I learn these languages?
Tags: beginners, codenewbie, webdev
Published: 2020-10-10 11:36:36

Hi! I'm new to coding(started about a month ago) and I've been doing Udemy courses on front end and full stack, I've already learned the html, CSS and the essentials of Javascript. I'm currently doing the ''Web Dev Bootcamp'' which is gonna teach me Express, node JS, Mongo, etc..

I am unsure what courses to buy next, I've wishlisted a full Angular course and a full React course, which one do you recommend I do first after i've finished the web dev bootcamp?

Thanks!
What is an Operating System?
Published: 2020-10-10 11:35:37

What exactly is an Operating System(OS) and what does it do? An OS is a Software layer between the Hardware and all your other applications. The main task of the OS is to manage the execution of all the other applications, it decides when and for how long the apps get access to the Hardware.

This includes access to the CPU (central processing unit, your PC`s “brain”), the I/O (Input/Output) devices (like a printer for example) and to memory. Like this the OS helps that the Hardware is used efficiently. An example could be that you can continue writing something while your printer is printing.

Because there are always a lot of app processes running at the same time, the OS needs to coordinate all of them so that the user gets the experience he wants and doesn’ t need to wait for ages until some process has finished.

Concerning the implementation of this process “juggling” you can think of a lot of different queues, which hold processes, which want to be executed. A lot of times a process gets interrupted and needs to be stored somewhere else to be continued later. The OS then saves status info about the interrupted process so it can be easily continued later.

What interesting things do you know about Operating Systems?
What is SASS?
Tags: sass, css, webdev, scss
Published: 2020-10-10 11:30:25

Once you’re comfortable with CSS, the next natural step is to use a preprocessor. The biggest advantage is not having to repeat yourself. “Don’t Repeat Yourself” or "DRY" is a principle in software development aimed at reducing repetition of code, and using SASS we can have the advantage of keeping our CSS Dry.

### **What is CSS preprocessor?**

_"A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax."_ - [MDN](https://developer.mozilla.org/en-US/docs/Glossary/CSS_preprocessor)

### **Why use preprocessors?**
- Cleaner code using variables and nesting.
- Ease of organizing and maintaining the code as we can separate files into modules.
- Ability to implement logic and calculations in stylesheets.
- Overall improvement in workflow which can save hours of development time!

### **What is SASS?**

SASS (or Syntactically Awesome Style Sheets) is a tool known as a CSS preprocessor. SASS is a scripting language that provides us the capabilities which regular CSS doesn't have. Using SASS we can write more maintainable, readable and reusable code.

It gives us various capabilities such as:

- Variables
- Partials & Imports
- Nesting
- Functions
- Mixins
- Control directives
- Inheritance

In other words SASS helps us write CSS and organize large stylesheets in more maintainable way.

_Thanks for reading!_
Apache Cordova in 2021?
Tags: discuss, apache, cordova, mobile
Published: 2020-10-10 11:26:26

This discussion is intended to raise a question that's bothering for quite some time - Hybrid applications are a great way to develop almost simultaneously for Android and iOS. There are several options to pick from but we currently have an app in production based on [Apache Cordova](https://cordova.apache.org/).
Is time to move on? What would you do?
What's your favorite full-text search implementation?
Tags: search, fts, discuss
Published: 2020-10-10 11:25:48

Also on Quora - [What is better, a custom Google search or Algolia?](https://www.quora.com/unanswered/Which-is-better-a-custom-Google-search-or-Algolia)

- Algolia
- Elasticsearch, Lucene, Solr
- Google custom search

How does it compare to search engines with web crawlers?

- Yahoo
- Bing
- DuckDuckGo
- Yandex
- Baidu

What about pure JavaScript implementations?

- js-search
- lunr, elasticlunr

RDBMS and NoSQL's built-in?

- SQLite FTS4, FTS5
- PostGres plugin
- MongoDB

Or, some other implementations, like Python's Whoosh?
7 Tips to make your data safer
Tags: security
Published: 2020-10-10 11:21:58

Hello! Lets have a look at a few ways for making your data safer.🔒

1. Encrypt and password protect your hard drive
2. Use Two-Factor Authentication
3. (Automatically) backup your data and encrypt it
4. Set a screen lock after e.g. 5 minutes
5. Use a password manager (e.g. Bitwarden) so you can use difficult to memorize passwords
6. On the road: if needed, there are privacy filters for Laptops which you can place on them so you only see whats on the screen from a certain angle
7. If you cant avoid using public WLAN, use a VPN (Virtual private network, e.g. ProtonVPN)

Which security tips do you want to share? Have a nice weekend. :)
Is sudo just sudoly safe?
Tags: linux, security, discuss
Published: 2020-10-10 11:16:04

I first have this thought when comparing [apt to snap on security](https://www.reddit.com/r/Ubuntu/comments/a364ii/proscons_of_snap_vs_apt/), but [I asked first on Quora](https://www.quora.com/How-can-I-make-sudo-safer-or-can-I-be-safer-than-sudo).

Of course, this also includes

- On Windows, you are asked for Administrator rights upon install
- Not sure about macOS's Homebrew as well

Wouldn't it be better to be able to install most things without sudo?

Or, multiple levels of sudo, or `switch user` rather than sudo?

Some other thoughts are,

- I also realized sudo also involves logging, but I don't know how to check?
- Biometrics (fingerprint) for most basic logins, plus vanish-after-use recovery codes (like 2FA) for sharing admin rights.
Every time getRangeAt creates the Same Range?
Published: 2020-10-10 10:44:23

I am creating Range in the loop but every time getRangeAt creates the same Range. why is it so?

My scenario is very simple I have getting positions of words from the database and on page load highlight words or substrings at those positions but every time on the first word all tags added. Like if 4 times loop runs then 4 span tags will add only on the first matching word.

var r = document.createRange();
var s = window.getSelection();
// alert(s);
console.log(s);

// var abc = window.getSelection();

var pos = 0;
var start,end;
var range = [];


function dig(el){
    $(el).contents().each(function(i,e){
        if (e.nodeType==1){
            // not a textnode
         dig(e);   
        }
        else
        {
            if (pos<start){
               if (pos+e.length>=start){
                range.setStart(e, start-pos);
               }
            }
            
            if (pos<end){
               if (pos+e.length>=end){
                range.setEnd(e, end-pos);
               }
            }            
            
            pos = pos+e.length;
        }
    });  
}

function highlight(element,st,en){
    range = document.createRange();
    start = st;
    end = en;
    dig(element);
    s.addRange(range);   
}






$(document).ready(function(){
  var x;
  var url = window.location.pathname;
  var urlid = url.substring(url.lastIndexOf('/') + 1);
    
  $.ajax({
  type:'GET',
  url:'/check-words',
  data:{urlid:urlid},
  success:function(data){
   for (let [index,x]  of data.entries()) 
   {
    var jsondata = x + '';
    var nameArr = jsondata.split(',');
    console.log('when x is', x);
    console.log('nameArr is', nameArr);

    var a = nameArr[0];
    var b = nameArr[1];
    highlight($('.main-detail-content'), a, b);
    var ra = s.getRangeAt(0);   // this line always create same range even positions are different evry time loop runs.
    var newNode = document.createElement("em");
    newNode.appendChild(ra.extractContents());
    ra.insertNode(newNode);
   }
  }
 })
});