teleren/devto huggingface dataset:
Flutter Web SEO problem workaround
Tags: flutter, seo, webdev
Published: 2021-06-22 09:34:52

Flutter Web has a big problem, you like Flutter but then you get to know that Flutter it is not well optimized and has some problems with [SEO](https://priiimo.com/en/computer-science/topics/search-engine-optimization-seo/60c736d4c942f86410e9c4f9).  
  
Check this out! I'll give a few trick to use until, they, if, fix this problem.  


## So what's the problem?

For Web Flutter use the canvas tag! For those who don't know, the canvas is a tag used for drawing;   
  
It is a really powerfull tag, it let you achieve goals that otherwise are not possible, like complex animations, new ways of interacting with data etc...  
  
Ways that are not possible with the standard HTML, CSS, JS at all.  
  
So what's the problem? seems good right? No bro! The problem is that the Search Engine has not way to understand how your content is made, since it only understands textual content.  
  


## No Flutter?

Flutter is a great SDK it saves you a ton of time, so I don't se why you should use it anymore, I mean yes it has this problem, but we can find some workarounds.  
  
Before they solve this problem it may take a lot of time, let me tell you how to.

## How to!

I would say that when you want to develop for the Web you should one take in consideration the project that you want to create!  
  
If you want to create an article based Website like [Priiimo.com](https://priiimo.com/en/) or [This one Dev.to](https://dev.to/) then you can split your website in 2 parts, the part that will show the articles to serve it with node, php or other ways and the hidden part that needs authorization to do it with Flutter; So all the complex part that, for example, contains the management of users, analytics etc...  
  
What do you think? I'll give you another Idea, for example, you can as before use Flutter to create a sort of CMS that will generate HTML pages.  
  
In this way your contente will be visible by search engines without problems.

## Don't do this!!!

You have to be careful when serving content to search engines, one solution that probably you had in your mind was to show a clone content of what's visible on your App in a way or another, BUT....  
  
This MAY be a violation of the of Google's guidelines if you are targeting this one; It is called Cloaking.  
  
Here you have a [link](https://developers.google.com/search/docs/advanced/guidelines/cloaking) that explains more about this thing.

## Video?

{% youtube S5O_a-FirgM%}
Best Xamarin UI Controls with Incredible Performance
Tags: xamarinforms, charts, grid, mobile
Published: 2021-06-22 09:15:00

Check out the comprehensive [Xamarin UI controls](https://www.syncfusion.com/xamarin-ui-controls "Xamarin UI controls") package from Syncfusion, offering more than 135 controls with incredible performance. This suite includes the most popular [DataGrid](https://www.syncfusion.com/xamarin-ui-controls/xamarin-datagrid "DataGrid"), [Charts](https://www.syncfusion.com/xamarin-ui-controls/xamarin-charts "Charts"), [Scheduler](https://www.syncfusion.com/xamarin-ui-controls/xamarin-scheduler "Scheduler"), [ListView](https://www.syncfusion.com/xamarin-ui-controls/xamarin-listview "ListView"), and [PDF Viewer](https://www.syncfusion.com/xamarin-ui-controls/xamarin-pdf-viewer "PDF Viewer") controls as well as a complete collection of file format libraries.

With Syncfusion’s [Xamarin UI controls](https://www.syncfusion.com/xamarin-ui-controls "Xamarin UI controls"), you can easily build more modern mobile applications for Android, iOS, and UWP from a single shared C# code base.

To learn more and download a free trial of Syncfusion’s Xamarin UI controls visit: http://bit.ly/2W0duSm

{% youtube cw43tHUyj9U %}
https://www.youtube.com/watch?v=cw43tHUyj9U
💰 The Future of Crypto
Tags: crypto, currency, security
Published: 2021-06-21 14:37:04

#### ☑️ Permission.io’s CTO Hunter Jensen on crypto regulation, advice for the crypto-curious, and blockchain.

## <br>

_EDITOR’S NOTE: Crypto (digital currency) is becoming more mainstream with crypto exchange [Coinbase’s IPO splash](https://www.ibtimes.com/whats-next-coinbase-coin-after-blockbuster-ipo-fintech-analysts-weigh-3184496) and the [creation of the cyber yuan](https://www.wsj.com/articles/china-creates-its-own-digital-currency-a-first-for-major-economy-11617634118). Permission.io’s business model uses Auth0 to protect its platform while delivering digital currency in exchange for permission-based advertising. We invited their CTO, Hunter Jensen, to pen a post to share his thoughts on crypto’s future._

Today crypto is highly volatile — investing can be a real roller coaster. But that’s changing. We just saw the first public valuation of a cryptocurrency company, with [Coinbase coming in at $86 billion](https://www.nytimes.com/live/2021/04/14/business/stock-market-today). [Governments are creating digital currency](https://www.barrons.com/articles/central-banks-are-trying-to-muscle-aside-bitcoin-what-investors-need-to-know-51618866586) or at least talking about it. Here’s why I think everyone will eventually be carrying a crypto wallet.

## What Is Cryptocurrency Anyway?

Cryptocurrency is a digital currency issued by blockchain software and regulated by a decentralized set of systems, software, and rules.

Blockchain is really just a decentralized accounting ledger that records transaction after transaction. What makes it interesting is that it's decentralized — in most cases, there's no central authority running it. Blockchain also uses really complex and complicated cryptography and algorithmic mechanisms to be able to verify each one of these transactions. If you believe in the technology, you don't need a bank to be an intermediary to know that the transaction is taking place.

It helps to contrast cryptocurrency with fiat currency, which is issued by a government decree (or fiat) and regulated by a central authority.

Fiat is stable and controlled, which means it works well as a store of value and a unit of account. You can transfer it from one place to another and have it be the same value in both places. If a country prints a lot of money, it risks hyperinflation and depression, but that takes a certain amount of time to happen. Money, as we know it, has been around for thousands of years.

It’s also expensive and time-consuming to do big complicated transactions with fiat currency. If you’ve ever tried to buy a house or send money from the U.S. to a country in Eastern Europe, for example, it can get very tricky and take a long time.


[Read more...](https://auth0.com/blog/the-future-of-crypto/?utm_source=content_synd&utm_medium=sc&utm_campaign=crypto)
How to reverse a string in JavaScript
Tags: javascript, codenewbie, beginners, devjournal
Published: 2021-06-22 09:10:05

 String reversal is primarily concerned with changing the index position of a string in either ascending or descending pattern. _i.e. going from come to emoc_. In this short tutorial, we will be looking at various ways to handle this programming task.

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

**Task:** Reverse the given string: Hello
Note: This task could be solved in numerous ways, but we will take  a look at two methods on how to go about this. There are;
1. Imperative approach
2. Declarative approach (A single line of code does the work)

###Imperative approach
_Pseudocode:_
We will be defining a function (just to make our code organized at this point)
1. Define a function and give it a name
2. The function will accept a single parameter (which is the input to the function)
3. Declare a variable and initialize it with the length of the function parameter
4. Declare a variable which accepts an empty string which will be used to stored our new reversed string
5. Iterate through the given string from the last index in the string array.
6. Return the the concatenated reversed string
7. Call the function with an argument

Solution:
```
function reverseThisString(inputString) {
    let stringLength = inputString.length
    let reversedString = '';
    for (let i = stringLength - 1; i >= 0; i--) {
        reversedString += inputString[i];
    }
    return reversedString;
}
console.log(reverseThisString("hello"));

```
```
Output: olleh
```

**Note:** how the for loop here works
`(let i = stringLength - 1)`: we define a variable i with a starting value of `stringLength - 1 (i.e 5 - 1 = 4)` where index 4 represents the last index position `o` of the sample string (Hello).
`(i >= 0)`: We tell it that `i` will always be greater than or equal to `0` (when it is less than 0, it should stop looping)
`(i--)`:  will continually decrement the loop at each iteration
_Inside the for loop:_
`(reversedString += inputString[i];)`: At each iteration (as the condition above remains valid) store the value of the index position in the `reversedString` variable.

###Declarative  approach
_Pseudocode:_
**This pattern will only take a single line of code.**
Use step 1,2, 6 & 7 above
3. use split method with a quotation marks `split('')` to divide the strings by character i.e. `'h','e','l','l','o'`
4. use reverse method with no quotation marks `reverse()`to iterate through the indexes of the splitted string thus reversing its position. i.e. `'o','l','l','e','h'`
5. use join method with quotation marks `join('')` to concatenate the reversed string back with-out spaces i.e. `olleh`

Solution:
```
function reverseThisString(inputString) {
    return inputString.split('').reverse().join('');
}

console.log(reverseThisString("olleh"));
console.log(reverseThisString("fantastic"));
```
```
Output: hello
Output: citsatnaf
```
Don't make this mistake  sudo chown -R 'userName' /*
Published: 2021-06-22 08:27:32

Recently I was trying to change the owner for the folder that a docker compose volume created and I accidentally ran the following command 

```sh
 sudo chown -R 'userName' /*
```
Then hell broke lose, so now probably you are in the same situation. 



Reboot your computer and hold F11 (Please check which one is for your computer, F8 is the case on my computer) after the BIOS splash to bring up the GRUB boot menu. If you use one of the popular distros of linux (something like Ubuntu), there should be an option to start linux in recovery mode (the option might be found under 'Advanced Options' sub-menu if you use GRUB 2). Start linux in recovery mode.

Then select the option that will give you a root prompt. Since the shell is logged in as root, all commands will be run as root without needing the sudo command. You can use this to repair the permissions on /usr/bin/sudo:

```sh
chown root:root /usr/bin/sudo
chmod u+s /usr/bin/sudo
exit
```


After this you can reboot to regular mode that should fix it 


{% gist https://gist.github.com/leamsigc/68d3f891d9298c35de273caa2b21e453 %}
Day 6 of #100DaysOfCode!

Tags: javascript, beginners, 100daysofcode, codenewbie
Published: 2021-06-22 00:10:25

<h3>Today's progress🏍</h3>
I worked on inheritance, DRY (Don't Repeat Yourself) and supertype (parent). The benefit of inheritances and DRY is so that you don't rewrite code and it is about writing less code on your application. This way you deal with less problems (bugs) and write cleaner code. You can just imagine code can get extremely complex as it continues to grows. So it's better to find ways to minify it.

<h3>What I learned</h3>
I learned more about objects, prototypes and inheritances. The examples I worked on will hopefully explain how inheritance works and the benefits of it.

So what is `inheritance` in Object-oriented programming? Inheritance allows for one class to inherit (or obtain) the attributes and methods of another class. The class whose properties and methods are **inherited** is known as the `Parent` class.

The example below shows two *object constructors* and they both have a something in common, which is the `drive` method.

```javascript
function Car(){}

Car.prototype = {
   constructor: Car,
   drive: () => {
     console.log("Vroom vroom")
   }
}

function Motorcycle() {}

Motorcycle.prototype = {
   constructor: Motorcycle,
   drive: () => {
     console.log("Vroom vroom")
   }
}
```

Because we know both vehicles can both be driven and make the sound *Vroom vroom*, we can simplify and reduce the code by using the DRY principle and create a supertype (or parent) called `Vehicle` and removing the drive method from both Car and Motorcycle and putting it in Vehicle.

So let's go ahead and create that.

```javascript
//child object
function Car(){}

Car.prototype = {
   constructor: Car,
   drive: () => {
     console.log("Vroom vroom")
   }
}

//child object
function Motorcycle() {}

Motorcycle.prototype = {
   constructor: Motorcycle,
   drive: () => {
     console.log("Vroom vroom")
   }
}

// parent object
function Vehicle(){
    
}
Vehicle.prototype = {
   constructor: Vehicle,
   drive: () => {
     console.log("Vroom vroom")
   }  
}
```

**Inheritance**

We created a supertype, used the DRY principle and now we want to apply inheritance. In other words, we want to inherit from the supertype, in this case the `Vehicle` object. We can create a new instance of Animal simply by using a the method
`Object.create(obj)`. This will create a new object and set `obj` as the new object's prototype. 


Here is what that looks like.

```javascript
Car.prototype = Object.create(Vehicle.prototype)

let honda = new Car();

console.log(honda.drive());
//output: "Vroom vroom"

```
The subtype (or child) `Car` is now an instance of Vehicle. When we create a new `Car` object and store it into variable honda. `honda` now inherits all of `Vehicle`'s properties and thus can perform the `drive()` method.
Where Can You Find Successful Software Developers?
Published: 2021-06-22 07:52:53

Over the last few decades, the world has seen staggering technological changes. Organizations across the globe are constantly incorporating the latest technologies to build innovative products and services that are unlike anything we've seen before. And this has been made possible by engineers — the backbone of technological advancement.

However, the competition for skilled tech talents is at an all-time high. With many countries facing an acute talent shortage, where can businesses go to find their A-team?

In this piece, we've listed three countries that are a haven for successful software developers in 2021. If you're on the lookout for tech experts, then building a team in one of these countries can be a profitable move for your business.

1.China

New technologies like Artificial Intelligence and Machine Learning have led to the software industry in China flourishing like never before. In fact, in 2020 alone, the software industry in China generated revenue of €900 billion.

While large IT companies like Huawei, WeChat, Baidu, and Tencent have significantly contributed to this growth, China is also experiencing a massive increase in tech startups in cities like Nanjing, Jinan, Shenzhen, Shanghai, and Beijing.

2.India

India generates 1.5 million engineers every year — a number that continues to be unrivaled. Building a tech team in a country like India gives you access to a massive talent pool of highly-educated and <a href="https://thescalers.com/top-software-development-countries-in-2020/">successful software developers.</a>

They've been trained to approach every roadblock and bottleneck with an open mind and an unconventional approach, setting them apart from engineers across the globe.

Further, owing to the lower cost of living in India, the average salary of a developer is significantly lower than in the West. When you consider the big picture, you're getting access to exceptional talent and generating savings. A win-win situation!

3.Ukraine

Ukraine ranks fourth globally by the number of tech workers after the United States, India, and Russia. One of the primary contributing reasons is entrepreneurship, which has fueled the growth of the local startup community.

From Grammarly to Mobalytics, Preply, CleanMyMac, GitLab, PetCube, and Readdle, Ukraine is home to some of the largest tech corporations.

Compared to its neighboring countries such as the Czech Republic, Poland, and Belarus, Ukraine offers a larger talent pool and a more competitive outsourcing rate for one-off projects.

Source:http://www.apsense.com/article/where-can-you-find-successful-software-developers.html
DigitalOcean container deployments are down
Published: 2021-06-22 07:28:00

https://status.digitalocean.com

If you are looking to move your #docker app to AWS - this is the perfect time. Would love to help you with our one-click free tool. Sets up a full CI pipeline and all the infra needed on your AWS. 

Email me safeer@tinystacks.com and can get you setup in 15 min.
Adding custom fonts in React Native 0.60+
Tags: reactnative
Published: 2021-06-22 07:17:43

Custom fonts can be added into React Native project(0.60+) with the following steps.

### 1. Get the font files needed for the project
The font files should be either in .ttf or .otf format. The font files can be obtained from Google fonts. Create a folder named fonts under the assets directory and place the font files in it.

### 2. Create a configuration file
Create a configuration file named react-native.config.js in the root project directory and add the following code:
```javascript
module.exports = {
        project: {
            ios:{},
            android:{}
        },
        assets:['./assets/fonts/'],
    }
```
### 3. Link the font assets

Link the newly added asset by running the following command:

> yarn react-native link

or

> npx react-native link

That's all, the font is now added and we can see the new font assets in
android/app/src/main/assets/fonts in the case of android and changes in the
Info.plist in case of iOS. Finally, re-run the app.
6 things required to integrate SourceTree with Azure Repos
Tags: azure, sourcetree, showdev, devops
Published: 2021-06-22 06:57:06

###Step 1
Open your Azure DevOps account and select any repository and click the **Clone** button

###Step 2
Click on **Generate Git Credentials** button, it will show `Username` & `Password`. Just a make copy of it in a notepad

###Step 3
Launch SourceTree and go to **Remote** tab and click on **Add an account…** button

###Step 4
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5c2btt7gruj40oae7nm.png)
Set following values:
>Hosting Service: Azure DevOps
Host URL: https://yourorganisationname.visualstudio.com
Preferred Protocol: HTTPS
Authentication: Personal Access Token

and click on the **Refresh Personal Access Token** button, it will prompt for `username` & `password`, just copy-paste the values from Step 2
That’s it! You’re all set to clone your repositories

###Step 5
In the **Remote** tab, it will start listing down all your repositories. Now pick any repository you want and click on the **Clone** option

###Step 6
All the fields will be prefilled for you, so just go ahead and click Clone
It will start downloading the code to your drive
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ipqymy6uwdhuhqrrib2.png)


Thanks for reading!<span>&nbsp;</span><span> &#9996;</span>
Day 100 of 100 Days of SwiftUI
Tags: swift, 100daysofcode
Published: 2021-06-22 06:37:13

I just completed day 100 of 100 days of swiftui. I took the final exam and i passed!!!!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmbdycbjmuf4zax735v0.jpg)
PM2 Startup script, always keep processes running
Tags: node, javascript
Published: 2021-06-22 06:11:18

We had a short introduction into [PM2, a process manager for Node scripts](https://daily-dev-tips.com/posts/why-pm2-is-the-process-manager-youre-missing/). However, there is one big thing we didn't cover yet, and that's startup scripts.

These are PM2 scripts we can generate, so the processes running will restart themselves on an unexpected reboot of your server.

We had this issue before a server rebooted for software updates, but our node-driven websites would not start automatically.
This is where PM2 startup scripts shine.

## Generating a PM2 startup script

To generate a startup script for PM2, we can run this command.

```bash
pm2 startup
```

Running this will return the following:

```text
[PM2]
To setup the Startup Script, copy/paste the following command:
sudo env PATH=$PATH:/Users/chrisbongers/.nvm/versions/node/v14.15.4/bin /Users/chrisbongers/.nvm/versions/node/v14.15.4/lib/node_modules/pm2/bin/pm2 startup launchd -u chrisbongers --hp /Users/chrisbongers
```

When you copy that line, you'll be done with this part!

If you ever need to redo the startup script fully, you can run `pm2 startup and then`pm2 startup` again.

## Saving all running PM2 processes

Make sure you have all the PM2 processes running you want on startup.

Now we can run:

```bash
pm2 save
```

This will create a `dump.pm2`, which will auto startup our scripts.

Now, whenever your server reboots, your processes will automatically restart as well 🤗.

If you ever need to reboot all processes manually, you can also execute the following command.

```bash
pm2 resurrect
```

### 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)
Ready-to-use libraries with UI in React
Tags: programming, devops
Published: 2021-06-22 06:09:27

 Off-the-shelf libraries can be used to add formatting to the application. One of the most popular UI frameworks, Bootstrap, is one of the most popular UI frameworks, and it probably will remain so. Currently, you will find a huge number of libraries that coordinate the user interface, and you have a choice that is too wide to be limited to a list. Many UI frameworks provide web app developers with ready-made themes and "blocks" such as buttons, menus, and tables. We put the word "components" between two objections because we are not talking about React components here.

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

UI frameworks are typically used to insert CSS files in addition to their JavaScript files within an application. Many UI frameworks come with versions intended for use with React, with many of their components converted into React components. There are different versions of Bootstrap dedicated to working with React such as reactstrap and react-bootstrap.
🦊 GitLab Cheatsheet - 4 - GitLabCI - Jobs call sequence
Tags: gitlab, tutorial, devops, cheatsheet
Published: 2021-06-22 05:51:51

In this cheatsheet, the fourth, I would like to explain the jobs call sequence.

<a href="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-4-GitLabCI-Jobs_call_sequence.jpg" alt="4 - GitLabCI - Jobs call sequence" target="blank">
<img src="https://jeanphi-baconnais.gitlab.io/img/cheatsheet/GitLabCheatsheet-4-GitLabCI-Jobs_call_sequence.jpg" alt="4 - GitLabCI - Jobs call sequence" />
</a>

I will create others cheatsheet. Tell me if you have comments or suggest about those cheatsheet 😃.

Edit : update cheatsheet with the news of GitLab 14.2 version about needs