teleren/devto huggingface dataset:
How to create a Offline Internationalization App:Technology
Tags: flutter, sqlite, strapi, offline
Published: 2021-10-10 11:43:08

The vast majority of internationalized apps are implemented by returning different languages through api requests. The so-called "content" does not refer to the UI interface of the APP, but the content information carried by the APP.

I have provided a different idea here. The core idea is to embed the part of the cloud API multilingual query that was originally in the cloud into the App by using Sqlite. There are three reasons:

- First, for specific content and data with information boundaries, embedding the data from the cloud to the local will get a faster response speed.

- Second, the users of the multilingual APP are people from various countries and regions. The network situation is complicated. The data can be embedded from the cloud to the local without being affected by the network and can be used offline.

- Third, I don’t have a cloud server 😂.

## Technology

![image-20211010184633-hb47llp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jah5j5ofzzxht3d95hr1.png)

The APP is developed using Flutter, which can complete both iOS and Android versions of the APP at the same time. At the Flutter framework level, I chose the GetX framework. This framework is very easy to get started and is a highly integrated framework. Basically commonly used functions such as routing, state machines, dependencies, themes, **internationalization**, etc. have been built in. It can be said to be very friendly to novices.

For the operation of Sqlite data, I chose Floor in the Flutter library. I really like his definition of Entity, which is very friendly for data extraction and binding in subsequent development. Of course, the library currently does not support a full set of Sqlite features, for example, you cannot use "count(*)" to count data, but you can use the view features in Sqlite to circumvent it.

In terms of content management, Strapi is selected here, using the Sqlite database and enabling multi-language support. In this way we will get a Sqlitedb database. By customizing the configuration file of Strapi, it can be perfectly integrated with the Flutter project.

Recommend some very convenient tools, DBeaver is used to view the actual data structure of the Sqlite database generated by the management Strapi project. There is also a website "remove bg" I really like this website, it can perfectly help you remove the background in the picture material when developing the APP, so that your APP can be a lot more colorful!

---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfajbsflhz9t8zpfm7ap.png)
 

[![Play Store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocrcqncrb8uyhym5m2so.png)](https://play.google.com/store/apps/details?id=com.nasawz.diet_therap)


[![Apple Store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6gwvms69chncj8lf5qe.png)](https://apps.apple.com/us/app/%E8%94%AC%E6%9E%9C%E9%A3%9F%E7%96%97/id1588683566)
Collect Email Signups With the Notion API
Tags: programming, javascript, netlify, webdev
Published: 2021-10-10 11:40:56

A lot of people these days are setting up their own newsletters. The first hurdle in setting up a newsletter is a mechanism to collect emails. But nothing is handier than setting up your own system which you can control.

So, I wrote a tutorial to help you set up your own system to collect emails for your newsletters based on the Jamstack architecture.

You'll implement an HTML form to collect emails for your newsletter, process those emails with Netlify Functions, and save them to a Notion database with the Notion API.

Read the full blog on [CSS Tricks](https://css-tricks.com/collecting-email-signups-with-the-notion-api/).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I across while surfing on the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
Create a window on a wall with Unreal Engine in 2 Second
Tags: gamedev, unrealengine
Published: 2021-10-10 11:16:56

1. Create the wall with geometry
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6u654h9q3rv0ulfsxrp.jpg)

2. Hold alt and drag it to copy that wall
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2o4yzamjaolbkogi5hkc.jpg)

3. Set brush to the subtractive
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcmd093137kqd1cvkous.jpg)

4. For the last step, drag it back into the wall to create the window
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9nghgwvsnjmptj2impa.jpg)
[Golang] How to get the diagonal difference: Problem Solving
Tags: go, tutorial, beginners, algorithms
Published: 2021-10-10 11:13:42

Hi,
So today we're about to cover up another problem solving question which is how we can find the diagonal difference and we are going to cover up this problem via two ways.
1. Using Loop
2. Using Recursive function.

Let's see the question first

Given a matrix of n X n. The task is to calculate the absolute difference between the sums of its diagonal.

Now Let's start Writing Code

1. Using Loop

```
func DiagonalDifference(arr [][]int) int {
	d1 := []int{}
	d2 := []int{}
	d1Sum := 0
	d2Sum := 0
	for x := range arr {
		for y := range arr {
			if x == y {
				d1 = append(d1, arr[x][y])
				d1Sum += arr[x][y]
			}

			if x == len(arr)-y-1 {
				d2 = append(d2, arr[x][y])
				d2Sum += arr[x][y]
			}
		}
	}
	fmt.Println("Left Diagonal Values", d1)
	fmt.Println("Right Diagonal Values", d2)

	return int(math.Abs(float64(d1Sum) - float64(d2Sum)))
}
```

Find the code from here for recursive method:
https://kdsingh4.blogspot.com/2021/10/how-to-find-diagonal-difference.html

Also Subscribe My Channel as well :)
https://www.youtube.com/channel/UCXhmNqWQ50zitqIdTgS7s8Q

Thanks for Reading
Memulai dan Menjalankan Jupyter Notebook di VS Code
Tags: jupyter, vscode, indonesia
Published: 2021-10-10 10:47:14

Jupyter adalah projek open-source yang menggabungkan teks Markdown dengan kode Python (dapat dieksekusi secara langsung) dalam satu kanvas yang dinamakan notebook. Pada kesempatan kali ini akan dijelaskan bagaimana cara memulai dan menjalankan Jupyter Notebook di VS Code.

- Pertama, [Unduh](https://www.anaconda.com/products/individual#Downloads) dan Install Anaconda.

![Website Anaconda](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuicb7ck250yiedt32fl.png)

- Kemudian, buka anaconda prompt dan jalankan perintah berikut:
```
conda install ipykernel
```
Pilih ya saat ditanya untuk melanjutkan.

- Setelah itu, buka VS Code dan install ekstensi Python

![Python Extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6v80c39wjxq4eifbef0e.png)

- Pada pojok kiri bawah klik tombol tersebut, pilih Anaconda sebagai Interpreter

![Interpreter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz5twpg43m51ohw3aqak.png)

- Sekarang Jupyter Notebook bisa dijalankan di VS Code. Buat notebook dengan cara membuat file berformat ipynb atau bisa juga dengan membuka command palette dan pilih create new jupyter notebook.

![Hello World](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ika37beiry7tlnb7jiej.png)

Referensi:
[Channel Youtube VS Code](https://www.youtube.com/watch?v=h1sAzPojKMg)
Inkscape: Alternative to Adobe Illustrator
Tags: opensource, design, webdev, beginners
Published: 2021-10-10 10:44:23

**Hi, Everyone! 
Aditya here,**
Today I want to discuss a topic which is vector ART, when I start making websites I found that my vector images are not up to the mark. So, I take a deep breath and dive into the internet for the everlasting search for perfect illustration.
####What I find:
1. Interesting vector they are paid and sometimes cannot modify them as per requirement.
2. The free alternative is sometimes bland and blurry.  

#now, what to do?
#Answer : Make your own vector.💪
How difficult it will be what I need is ms-paint.
###Yes, That's what I thought 😅
Sorry, I was so wrong, do more google and, and the things escalate pretty quickly. 
#**IT'S START TAKEING MORE TIME AND SOMETIMES IT'S FRUSTRATING!!!!**
![angry terry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjm4qikgk635eey5m1uj.gif)
So, today I will talk about A powerful, free design tool Whether you are an illustrator, designer, web designer or just someone who needs to create some vector imagery.
**Adobe Illustrator!! NO NO NO NO!! Not this One**

👇 **THIS ONE 👇** 
##[Inkscape](https://inkscape.org/)  🎊 
Inkscape is a very competitive, free and open source tool to Adobe Illustrator. A powerful vector editor, Inkscape has flexible drawing tools, various file format compatibility, powerful text tools and support for Bezier and spiro curves. It supports advanced scalable vector graphics features like markets, clones and blending.
This definition is copied from a random website. But, It's correct.   
😁Sorry, I am not good with definitions.👍

##Now, what I liked in Inkscape:
1. Easy.
2. Works with windows, Mac and Linux .
3. Editing svg with no watermark.
4. Easy import/export svgs and images.
5. Tracing illustration. 
6. Great for logo design.  
7. Absolutely FRREEE!!

 ![happy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/217heeghnqud7gtjkqf6.gif)
But, But there is catch.
You have to learn it to how to use it, because it is quite **powerful and it can perform very wonderful thing.** 
####How to learn Inkscape?
####Don't worry there are many tutorials you can find over the internet.
###one channel I ❤️ is :
## [Logos By Nick](https://www.youtube.com/c/LogosByNick) 
it is a great channel to learn Inkscape for beginners.
###**Also, I will be sharing what I learn by using Inksacpe but, next time.**
Thank you
Sorry for any mistakes. 
I hope this post is helpful for you guys.
Take care 
Bye.
Scientists make great Data Scientists
Tags: datascience, ship30for30
Published: 2021-10-10 21:53:50

---
title: Scientists make great Data Scientists
published: true
date: 2021-10-10 10:33:00 UTC
tags: datascience,ship30for30
canonical_url: https://dramsch.net/posts/scientists-make-great-data-scientists/
---

I love it when an applied scientist asks me how to get into data science or machine learning.

Sure, any scientist, but geologists, biologists, oceanographers and environmental scientists especially. Applied disciplines that are commonly looked down upon by fields like physics or math. Those are the gems in the rough.

I hear the outcry already:

> But math! But statistics! Those are mud people!

But here's the thing.

Few people have an intuitive understanding of complexity, like applied scientists. Few people can make a decision and gain insight in an environment where new data isn't available, and uncertainty is high.

## **Applied scientists know data.**

It's a marvel to watch an applied scientist dig through a data set. Depending on the scientist, it may also be good to keep the kids out of earshot, but that's another story.

Data is messy.

Nothing pokes a hole in well-laid-out plans like getting the real-world data set. Andrew Ng, after teaching the world machine learning, now teaches the world how important data is. And for a good reason, your neural network, your random forest, they're random numbers in a computer until they are conditioned on data.

## Applied scientists have seen it before.

An applied scientist has seen it before, even if the imposter syndrome is there because this knowledge is hard to quantify. Analyzing the genes from a dinosaur's bone marrow that is thousands of years dead or understanding how a region formed over millions of years after looking at a weathered cliff are awe-inspiring feats.

Those are hard skills. Those are skills that teach you to handle data. Those are skills that are hard to teach and hard to learn.

Teaching basic statistical concepts is easy after that.

That’s why I love when applied scientists are interested in data science.

![Image of Atomic Essay Day 1 - Scientists make great Data Scientists](https://dramsch.net/atomic-essays/day1-scientists-make-great-data-scientists.png)

> _This atomic essay was part of the October 2021 [#Ship30for30](https://enroll.ship30for30.com/october-enrollment/6jztd) cohort. A 30-day daily writing challenge by Dickie Bush and Nicolas Cole. [Want to join the challenge?](https://dramsch.net/r/ship30)_
Configure LiveReload on Rails 6
Tags: rails, livereload, tutorial, install
Published: 2021-10-10 10:23:51


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u95hnhcbbjicbd0mzen4.jpg)
Very often I find myself tired needing to manually refresh my browser after every little change I do to my code. It is not too hard to do it, but sometimes it is just so annoying.
In such cases I like setting up Rails app preview auto re-loadable. It's pretty easy to do and only takes 5 steps:

First off, let's install a couple of gems into development environment, since live-reloading doesn't even make sense on production.

STEP 1: Add the following to your Gemfile:
```
gem 'guard-livereload'
gem 'rack-livereload'
```
and run 'bundle install'.

Alternatively, you can run these commands from within your terminal to install the necessary gems
```
bundle add 'guard-livereload'
bundle add 'rack-livereload'
```

STEP 2: Next, we need to initialize livereload, by running:
```
bundle exec guard init livereload
```

STEP 3: Now add the following line to the very end of file enviroments/development.rb
```
config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload
```

STEP 4: Now you can run the command to start the livereload guard. Keep it running alongside your puma server.
```
bundle exec guard
```

PS. You may need to restart your Puma server before livereloading starts working.

STEP 5: install 'LiveReload' extension on your browser.

In order to start your autoreloading preview do this:
start your Puma Server
```
rails start
```
start your autoreload guard
```
bundle exec guard
```

Make sure to do so in the browser with LiveReload extension running.

That's pretty much it. Now every time you save your code-base file it'll auto reload your browser tab.

You may also watch the video about it on my YouTube channel:

{% youtube 1VrHLskUhjc %}
SoapUi Load Test reporting Dashboard 
Tags: loadtest, soapui, reporting, dashboard
Published: 2021-10-10 09:59:30

In this post I'd like to show you how to create the Load Test results dashboard using plotly and Dash.
Assuming that you use the SoapUi opensource version to run your load tests, you know there are very limited features to -
1. Archive the test results.
2. Analyze how the system is performing with respect to the previous builds.
3. Dashboard with graphical representation to show the performance of the system over time and load.

Here is the solution which I created to overcome these limitations.

* Since we know a .csv file is generated with the statistics when we run the load test from the command prompt.

>I used `Python` with `Pandas` to filter out the unwanted data and archive the results in the database using `pymssql`.

* Now, I've my results archived in the database, I used the `Dash` and `plotly` to create a dashboard and hosted it on a server which can be accessible to the stakeholders.

## So, Let's get Started ! 

Code Repository - https://github.com/akshayca/SoapUiLoadTestDashboard

**Step 1 - Execution**

Create a runLoadTest.bat file to run all your Load Tests from command prompt
I've used the [calculator](https://www.soapui.org/docs/soap-and-wsdl/) example project.

Below is the project structure, I've placed my example-soapui-project.xml in the TestCase folder -

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73czrcimrvivz6e03qkp.png)
 
the execution command would look something like this -

```
>set projectRootFolder=C:\SoapUiLoadTest\TestCase\

>set ReportFoler=C:\SoapUiLoadTest\TestResults\

>set limit=15
>set thread=10

>loadtestrunner.bat -s"CalculatorSoap TestSuite" -c"Add TestCase"  -l"LoadTestAdd" -m%limit% -n%thread% -r -f%ReportFoler% "%projectRootFolder%example-soapui-project.xml"
```
Run the `runLoadTest.bat`, execution will start and the reports will be generated with the current timestamp.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hv8hamdarqkwtx7bd18p.png)

**Step 2 - Data Archiving and Reporting**

Create a database called 'SoapUILoadTestResults' to archive the results -
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frhbzkklrog4vfvdloky.png)

Run the `createDashboard.py` 

>Note: You need to pip install all the imports used for this project and have bWLwgP.css file in the assets folder.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mwp3dnuiholrja7l65fs.png)

Once the execution is completed, you can the check the data archived in the database. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btywuup3ntqglld9zpps.png)

Dash will be running on http://127.0.0.1:8050/

Once you have enough data on your dashboard would look something like this -

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xalttim6f80ip2jh0mi0.png)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/htfnc90kb0pya7t9o4en.png)
  
Code repository - https://github.com/akshayca/SoapUiLoadTestDashboard

Let me know if you need any help with this :)
#GADS2021 | #100DaysOfCode
Tags: gads, andela, android, kotlin
Published: 2021-10-10 09:58:13

And I got up to phase 2!

It's been two fun months of learning, being overwhelmed, taking a break, resuming and learning again with #GADS2021.

I must say, I encountered my first code burnout during this period. 
But I sure am glad it left as quickly as it came.

I'm glad to be taking on the #100DaysOfGADS challenge where I'd share on this platform what I learn each day for a hundred days, which started on the 6th of October but I'll catch up.(I've actually been following though)

I'm enthusiastic about this since asides coding, improving my writing skills is something I started to get intentional about developing a short while ago.

I know it'll be difficult at times, but I'll stick to it, and I'm confident that when this journey is over, I'll be smiling.
Get information from json file and test on other's  branch
Published: 2021-10-10 09:49:44

In this lab4, the main part was dealing with JSON files and test other's features on my application. 

First, in this lab, I almost gave up while I am solving the [issue to adding JSON feature](https://github.com/jjung99/a1-ssg/issues/10) to [My partner's repo](https://github.com/jjung99/a1-ssg). When I parse JSON files to JS, I used Jquery and ajax. And both of them had the same error. The error message was a syntax error about a string that did not match the path.   ![lab4 (2)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6tmw10e55724sc3p777.PNG)

Hence, it took me two days to research and asked help from friends to ask about ways to solve error . However, no one can solve the problem and even I researched some ways on google, it does not work or applied to my code. So, I need to find another way to parse the JSON and I found one npm module called "JSON file". That npm module saved me from the give-up to finish this lab. After I solved that parse problem, the other parts went smoothly. 

And the second part of this lab was reviewing and testing via remotes of [my partner's pull request](https://github.com/suhhee1011/suhheeKim_OSD_release0.1_create_ssg/pull/25). She raised [an issue about to add JSON](https://github.com/suhhee1011/suhheeKim_OSD_release0.1_create_ssg/issues/24) feature which is the same feature as mine. I was a bit confused about the instruction to do run tests via remotes. Hence, I just reviewed the lecture again and follow what he did in the lecture. Fetch partner's repository and create a branch to test what she edited. However, there was some problem. There were 3 parts that she need to work on before I merge them into my repository. 
These are three parts
```
1. It doesn't allow to accept the output option.
2. It doesn't ignore other options which are not available.
3. If the config file is missing any options, it does not have a default value specified.
```
Hence, I leave a comment to the [the partner's pull request](https://github.com/suhhee1011/suhheeKim_OSD_release0.1_create_ssg/pull/25). 

In this lab, I learn how to run other's repositories without affecting my code. I think this feature is really great. This is because, in the first few labs, I wanted to use this feature. I want to edit some codes on my repository while my partner was working on the repository. I am just worried if it can cause a problem in merging the branch to my master branch. And for next time, if an error keeps having trouble for more than one day, I will also try to find a new way to write the same logic, not just google a way to fix the error.
Create a Spinner Loader in React using CSS
Tags: spinner, loader, react, css
Published: 2021-10-10 09:48:48

Hi Folks,

In this article, we'll talk about how to create a spinner loader in React using pure CSS.

We will be creating a loader as shown below -

![CPT2110092208-232x179](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3l26pl6ovfgvixgwvw8i.gif)
 

Let's start creating a file called **spinner.js** in the react project and add some JSX to it for the loader.

######File: Spinner.js
```
const Spinner = () => <div className="loader"></div>;

export default Spinner;
```
Let's understand the above code -

Here, we have created a functional component called Spinner. Which is returning a div element with a class `loader`. That's all the JSX required for it.

Now, Let's add css for it.

```
.loader {
  border: 10px solid #f3f3f3;
  border-top: 10px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1s linear infinite;
}
```
Let's understand the above CSS -

We've added ` border:10px solid #f3f3f3 ` property to create the gray circle and ` border-top: 10px solid #3498db ` to create the blue colored arc on top of the gray colored circle. After that ` border-radius: 50% ` property to make it circular and have given same amount of height & width. 

Now, to add the spinning effect we've added ` animation: spin 1s linear infinite `. 

It will look like this -

![s](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5e5gb6l14oveaodidvn.png)
 
Let's add the final CSS to create the spinning effect-

```
 @keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
```
Let's understand the final CSS -

Here, we have added keyframes for the spin animation. Where we are rotating the element using `transform: rotate()` property from 0 degree to 360 degree.

Finally, Our Sinnner loader is ready.

That was it from this article. Do share your comments and feedback about the article.

Find the code below.

{% codesandbox ozfrr %}

Keep learning!