teleren/devto huggingface dataset:
Internationalization of Angular App
Tags: angular, javascript, internationalization
Published: 2020-09-12 05:53:44

How to Internationalization our Angular App?
That's the question my project manager fires on me suddenly a morning and I have no idea about the implementation of Multilingual content in Angular.
As a fresher, my first response is Let me search some good npm packages for that, i'll try some and get back to you in evening.
But i found mostly packages are either difficult to understand/implement or key-value feature need default sentence as key.
So here what i finally found after going through hundreds of Github/Google/Npm pages - why don't we implement our own approach like other projects.
It takes one hour of my day and finally first sentence of App is multilingual.
Things I use: Service, JsonFile/ServerJsonResponse, Pipe with Default value handling.
{% github https://github.com/DebuggingDev/AngularInternationlization %}

I will upload source code shortly.
🛑 Stop using pixels in CSS
Tags: css
Published: 2020-09-12 05:40:17

I may be the worst advocate for actually doing this, but let me try and be a better person from now on.

And please, you too!

Let's all get away from pixels

But, don't take just my word for it:

{% twitter 1300690100741967877 %}

## Why no pixels?

From back in the days, we started using pixels for web development, and for a long time this was good enough.

So what makes them so bad you ask?

- A pixel in font size is not actually a pixel on the screen
- Accessibility becomes better if we as developers don't define what the "default" font-size must be
- There are nowadays pixels densities (retina etc)

## Ok, then what?

Well, we can choose between `em` and `rem` for font-size.
`CSS3` came with `rem` which is a relative size to the root html element and is supported by 98,22% of the browsers!

So the cool part about this is people can have their default browser setting set to something else, then the defined 16px's, and we will just scale for them.

> Side note: REM is also a [cool band](https://www.youtube.com/watch?v=xwtdhWltSIg&ab_channel=remhq)!

## Converting pixels to rem

To calculate the pixels to `rem` we have to understand that the default font size for an `HTML` document is 16 pixels...

We as developers, should **never** update that. It's something the user can do.

So talking that in account it means that 1rem = 16px, and 2rem = 32px. 

To make it super easy. I made this calculator for you guys:

{% codepen https://codepen.io/rebelchris/pen/rNevWqp default-tab=result %}

Let us please all be aware this is the future 🛸.

## Browser Support

The cursor is pretty well supported! The function has been around, some mobile browsers don't go about it, but you must see this as an "extra".

![CSS REM support](https://caniuse.bitsofco.de/image/rem.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)
Hello People of DEV.to
Tags: codenewbie, computerscience, blog
Published: 2020-09-12 05:10:01

 I know this might get buried under a better title post, but I wanna welcome those who manage to read my post :) Very much appreciated.

I am a new user on this site and kinda a new developer so go easy on me if I have any errors on my post or future projects lol

I look forward to reading and talking to everyone in this community and those who reply to my post. See ya soon :D
Come help us improve RDF4J
Tags: hacktoberfest, java, contributorswanted, rdf
Published: 2020-09-12 03:39:19

Hi everyone,

I thought I'd use my first post on Dev to introduce our project: [Eclipse RDF4J](https://rdf4j.org/), a Java framework for working with RDF knowledge graphs. 

First things first: I'd like to invite you to come help us improve it! We're looking for anyone interested in doing some Java coding, but also help us write documentation, and/or improve the web frontend UI or our project website. 

Our [Github repo](https://github.com/eclipse/rdf4j/) contains our code, including the website and documentation. We've tagged some [issues](https://github.com/eclipse/rdf4j/issues) with the [hacktoberfest](https://github.com/eclipse/rdf4j/issues?q=is%3Aopen+is%3Aissue+label%3Ahacktoberfest) or [good first issue](https://github.com/eclipse/rdf4j/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) tags to get new contributors started, though you're most welcome to pick something else as well, of course. We've got a [guide for contributors](https://github.com/eclipse/rdf4j#keen-to-contribute) that outlines how to best get going, and of course you can get in touch directly with any questions or comments (we're on [gitter](https://gitter.im/eclipse/rdf4j) and there's a [mailinglist](https://groups.google.com/forum/#!forum/rdf4j-users), too).

We also have a video explaining what we're about (it's a one hour webinar going into quite some detail):

{% youtube OOgXDUf8Cps %}

The "Too long; didn't watch":

RDF4J is a Java framework for working with knowledge graphs expressed as RDF data (if you've never heard of RDF, it's a W3C standard for serializing data as graphs - see our [getting started tutorial](https://rdf4j.org/documentation/tutorials/getting-started/) for a brief introduction). 

RDF4J has a suite of parsers and writers for RDF, a query engine for the SPARQL query language, several database implementations, and a set of powerful and flexible Java APIs that make it possible to quickly and easily work with RDF data in Java, including talking to _any_ RDF database or public knowledge graph. For example, many people use it to interact with the [Wikidata](https://www.wikidata.org/wiki/Wikidata:Main_Page) knowledge base, and connecting their own sources of data with other information to mash up and combine data into very powerful knowledge-driven applications. Bingo!

So anyway, come talk to us, we're a friendly bunch of about 3-5 regular contributors (depending on what you count as "regular") who will be overjoyed to help you get started (and you definitely don't need to be an RDF expert already to start getting involved!).
3 Lines to Use VSCode(codeserver) on Google Colab
Tags: vscode, jupyternotebook
Published: 2020-09-12 03:36:31

`colabcode` is an awesome python package since it allows us to use VSCode(codeserver) on Google Colab/Kaggle with only 3 lines.

{% github abhishekkrthakur/colabcode %}


## 3lines
```
!pip install colabcode
from colabcode import ColabCode
ColabCode(port=10000)
```

Tha's it. `jupyter notebook` will show you a `ngrok` url to access VSCode.


Let me explain about those 3 lines a little bit.

### Install PyPI package
As I mentioned, we need to install `colabcode` to use VSCode on Google Colab. The first line is to install the package.
Pretty straight forward. 
```zsh
!pip install colabcode
```


### Run VSCode via colabcode
If you know python a little bit, these 2 lines are pretty easy to understand. `from xxx import yyy` is for importing a package. Then, the second is to create an instance. Done lol.

```py
from colabcode import ColabCode
ColabCode(port=10000)
```

I would like to introduce a couple of parameters we can use to you. 
`ColabCode()` can take a couple of arguments.

From https://github.com/abhishekkrthakur/colabcode/
```
optional arguments:
  --password PASSWORD  password to protect your code-server from unauthorized access
  --mount_drive        if you use --mount_drive, your google drive will be mounted
```
As you can see, `port` is required and the above arguments are optional. If you want to share your VSCode on Colab, maybe `password` may be useful.


## How to Use 

### python
![Screen Shot 2020-09-11 at 10.42.54 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24723/c35df081-60c1-b56c-3aa1-9e544c10a514.png)

As you can see, what we will need to do is to open `Terminal` from the left corner icon. Then execute `python test.py`.
If you want to change the editor theme, you can do it by clicking `Gear` icon and select a theme.

![Screen Shot 2020-09-11 at 10.48.15 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24723/31f7bb3a-952e-297f-2caa-16ee11ee7bf2.png)

## nodejs
As you know, `Google Colab` is for python. However, with VSCode you can use nodejs. The version of nodejs is out of date, v8.11.3. But if you want to do something quickly with nodejs, this may be useful.

![Screen Shot 2020-09-11 at 10.55.29 AM.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24723/0eb4283e-ca15-0b68-2530-11818eb54396.png)
Developing with Empathy: Using a Code Style Guide
Tags: javascript, css, typescript, webdev
Published: 2020-09-12 03:33:31

Being a developer doesn't mean you're just coding all the time. You code, but you also communicate, interact with other people's code, maybe even *get on a zoom call*. Whatever it might be that you do, being on the same page is probably a good idea.

In my various development experiences, I've found that setting expectations of what "good code" or "clean code" looks like is a great way to help folks who do not necessarily know what questions to ask or if they even have any questions.

## What is good code?

Well, honestly, good code is what you make it to be. As long as it works / compiles / whatever, it's code. You can show your fellow coworkers / cohorts what good code *looks* like, but until you write down or codify (*giggle*) what that is, folks are going to write what they want to get the job done.

## Why is this necessary?

For a lack of better jokes: so that everyone is speaking the same language. If everyone writes code *similarly* then it helps code reviews, discovering bugs and pairing in general. I find myself doing at least two things before I really can start thinking about the problem being presented to me when I am pairing with someone:
1. Adjusting to the style of the code, whether that is the organization of the CSS rules or how abstracted the JS is.
2. Re-reading through everything before making sense of it and making recommendations.

I feel like this goes faster when everyone kinda does things similarly.

Style guides help do the following:
- Ensure everyone is writing similar code
- Ensure readability
- Ramp up new developers to the "expectations" of "good code" or "clean code"
- Clears up any issues regarding the above otherwise vague terms.

## What does a good style guide look like?

Well, again, that's up to you! I have some recommendations, though:

### CSS
- [Airbnb's CSS Style Guide](https://github.com/airbnb/css)
- [Harry Roberts' CSS Guidelines](https://cssguidelin.es/)
- [Andy Bell's CUBE CSS](https://piccalil.li/cube-css/)

### Javascript
- [Airbnb's Javascript Style Guide](https://github.com/airbnb/javascript)
- [Google's Javascript Style Guide](https://google.github.io/styleguide/jsguide.html)
- [StandardJS (an enforced style guide)](https://standardjs.com)

There are many others out there, and some of those out there come with their own tooling, such as Airbnb's `banel-preset-airbnb` or even StandardJS' `npm install standard`.

Being on the same page with your team with regard to "good code" not only improves communication and team dynamics, but it reduces the "omg who wrote this?" reaction you might have before you pull out git blame :)
Why isn’t mainstream Linux available for mobile?
Tags: linux, mobile, discuss
Published: 2020-09-12 03:22:08

I am tired of iOS and all restrictions. I like PC because we have choice to virtualize, use any OS and any product from any company. 

Why hasn’t anyone invested in open OS that can be installed on any phone. Just like Linux.

Android is there but it is still in control of Google. 

What is stopping people from creating free OS for any or at lest most recent mobile phones?

LLVM compiler tools are available for all processor types and are used to compile native mobile libraries.

Is there any project already doing this?

Why isn’t Linux community doing anything?

Pine64 looks interesting, but is it fork of Android? Can we fork it and create own private distro?
Can open-source documentations be monetized?
Tags: opensource, documentation, discuss, watercooler
Published: 2020-09-12 02:52:02

I came across an Android app called **Node.js Docs** by an organisation named **NextLabs.cc**. [Here is the app in Google Play store](https://play.google.com/store/apps/details?id=cc.nextlabs.nodejs).

And to my surprise, they have monetized the contents! 

Specifically, 
- There are banner ads in the app.
- To access the documentation of each version *for one day*, you need to watch a 15 second video.
- You can buy the whole app for a very little amount but it's monetization nonetheless.

I don't know much about open-source licenses and monetization so I wanted to ask it here.

**Is this legal?**

I'd like to know more about licenses and how all these work.
Generate pdf from dom with multiple pages and without cutting
Tags: react
Published: 2020-09-12 02:48:05


![Generate pdf from dom with multiple pages and without cutting ](https://i0.wp.com/blogreact.com/wp-content/uploads/2020/09/banner-772x250-1.png?resize=750%2C243&ssl=1)

In the last article we learned about how we can generate pdf from dom elements but there was some bottleneck like that method was only adding one big page and sometime div are cut in half i.e some portion of the div were displaying in the next page. In this article we will gonna learn how we can generate pdf from dom with multiple pages and without cutting.

## Dom to pdf

We will gonna use a package name  [dom-to-pdf](https://www.npmjs.com/package/dom-to-pdf)  in today article. This package basically convert html elements into canvas and svg. After that it converts canvas into the pdf.

This package is more simple and easy to use as compare to last article. In the last article we were using the two different packages one package is converting the dom into an image and then other package was converting the image into the dom. But with dom-to-pdf we can do both the things with single package.

The plus point of this package is it automatically manage the multiple pages format and at the same time it also manage that the content should not be cut while adding into the pdf. In other words no div will gonna be cut in parts while adding to the pdf instead of that it will gonna add whole div to next page which is very useful for most of the cases.

## Installation and Usage

We can install this package from npm simply.

```
npm install --save dom-to-pdf
```

After the installation import this package one time.

```
import domToPdf from 'dom-to-pdf';
```

domToPdf will gonna receive three arguments.

-   First argument will be the dom element.
-   Second argument will be the option object.
-   Third will be a callback function.

```
    const element = document.querySelector('.summary-report-container');

```

```
  const options = {
      filename: "test.pdf",
    };
```

```
domToPdf(element, options, () => {
// callback function
    });
```

The whole pdf generate function will be gonna look like this.

```
  generatePdf = () => {
   
    const element = document.querySelector('.summary-report-container');

    const options = {
      filename: "test.pdf",
    };

    return domToPdf(element, options, () => {
      // callback function
    });
  }
```

It will gonna save the pdf automatically after generation. This way you can generate the pdf with multiple pages and without cutting the content.

[How to create range slider with bubble in React](https://blogreact.com/how-to-create-range-slider-with-bubble-in-react/)
Understanding what Static does in Javascript
Tags: javascript, webdev, oop
Published: 2020-09-12 02:18:52

I am sure you have probably watched a tutorial of Javascript where the instructor have used the static method on a class and not fully explain what static even does. Here is a simple explanation of what the functionalities are as stated by the Mozilla Developer Network.
>*The static keyword defines a static method for a class. Static methods aren't called on instances of the class. Instead, they're called on the class itself. These are often utility functions, such as functions to create or clone objects eg.* 

```javascript
class Greet {
	static sayHi() {
		console.log("hello");
	}
}
Greet.sayHi(); // return 'hello'
```

If we were to create an instance and call the method **sayHi** on that instance we would get a TypeError of not a function eg. 

```javascript 
const greeting = new Greet();
greeting.sayHi(); // return TypeError: greeting.sayHi is not a function
```
For more information on Static methods: [click here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/static)
Contributing assets is never easy, but we have GitHub Actions
Tags: actionshackathon
Published: 2020-09-12 02:16:04

---
title: Contributing assets is never easy, but we have GitHub Actions
published: true
description: A story of how an audio collector ease the submission with GH actions
tags: actionshackathon
---

Yeh, we have been building a site of soundbites for monthes.

<https://suisei.moe/>

Also yeh, collecting sound clips from videos is never easy. You need a good connection to YouTube. You need [`youtube-dl`](https://github.com/ytdl-org/youtube-dl). You need [`ffmpeg`](https://ffmpeg.org/). You also need to know how to use `ffmpeg`. And sure, many fans (whoever want to contribute to this project) are Windows users and they don't know about anything above. So how to do the audio collection?

Our idea is letting users contribute by simply commenting in a issue.

## Procedure

1. A contributor making comments.
2. Our bot analyzes the comments, clip the audio and save it somewhere.
3. Our bot replies the link to the contributor.

This is a solution enough for the problem. After that, the contributor just downloads the file, fills in the metadata and makes a pull request to our project... wait, pull request?

> They are not used to the terminal and now you ask them to make a PR

🤔

Well... that's a problem. To ease the process, we need to avoid writing code for merely submitting an audio clip. This is where the GitHub action come:

## A More User-friendly Procedure

1. A contributor making comments.
2. Our bot analyzes the comments, clip the audio and save it somewhere.
3. Our bot replies the link to the contributor.
4. An action detects the audio link.
5. An action makes a PR with the audio link and the given metadata information.

That is our solution!

First, we [tell the metadata](https://github.com/suisei-cn/sbtn-assets/issues/1#issuecomment-667538110):

![Commenting on a issue](https://dev-to-uploads.s3.amazonaws.com/i/5kclasnnoi0k489suhw4.png)

And finally, the PR is [made](https://github.com/suisei-cn/starbuttons/pull/91):

![Creating PR](https://dev-to-uploads.s3.amazonaws.com/i/8hdannfx9ebrbhb0ssub.png)

Tada! 🎉

Last but not least, recently we [rebuilt the site](https://github.com/suisei-cn/starbuttons/releases/tag/v2.0.0) with Svelte 3, making it faster to view and easier to maintain.

Have a try on the brand-new ☄️<https://suisei.moe>!

----

*This post, as well as [this post](https://dev.to/outloudvi/asset-download-upload-and-metadata-update-all-in-one-12m9), is a part of the [GitHub Actions Hackerthon](https://dev.to/devteam/announcing-the-github-actions-hackathon-on-dev-3ljn).*
Learn MySQL Replication with Docker
Tags: docker, mysql, replication
Published: 2020-09-12 02:11:29

MySQL is one of the most popular open source RDBMS used by an number of web applications for various purpose. This article is about learning a bit of docker & containers, running MySQL in docker containers and setting up various types of MySQL replications using docker containers.

So what is Docker? Docker is an open source, application containerization tool which allow you to package your application and all of its required dependencies into a single package and run it ubiquitously, without any discrimination based on hardware or host operating system. The docker containers are like a virtual machine, but are smaller in size and consume lesser resource. For details see https://www.docker.com/

So whats the benefit of running your application as docker container? Simple, it makes you application independent of the system where it will run. And the docker container packs in all the dependencies required by the application. So an application developed in Linux can be run on Windows / Mac.

How to create docker container? In order to work with docker containers, you must have docker engine installed on the host machine. Please see “Docker installation” for how to install docker based on the operating system of your machine. One of many benefits of docker container is also that it makes horizontal scaling of an application very easy. Just spin up new docker containers of the application and you are set.

So why did I decide to do this? I wanted to experiment with docker, containers, running applications inside docker — specifically MySQL and how to setup the replication using docker containers. There can be many ways of setting up MySQL replication, but I implemented the following replication schemes

- Master to slave replication (stand-by replication)
- Master to master (multi-master) replication

So I decided to implement all of the above replication schemes by my own and it took me almost a week (I wasn’t working on it continuously) but finally I got it done.

You can get it from — https://github.com/vishalraj82/MySQLReplDocker

If you have any query / suggestion / comments, please do so by dropping in your comment here. This repository code base is only for learning purpose only to be familiar with concepts of docker, containers, MySQL and replication and how to combine them all.


Original article - https://vishalraj.blog/learn-mysql-replication-with-docker/