teleren/devto huggingface dataset:
Build Web Application with React + WordPress
Tags: wordpress, react, reactnative, webdev
Published: 2022-04-18 11:28:58

Wait! What? We can build WordPress applications using React!

Yes! You heard it right. This can be easily achieved with the combination of WordPress REST API and React Js; a modern JavaScript Library. Building web applications using Word Press and React is an exemplary choice for content-driven applications.

But why WordPress? The reason: WordPress is a content management system with rich functionalities. It allows you to handle user management, Media, and content on your own. This means one need not have any specific technical knowledge to understand it.

Moving ahead, allow us to enlighten you with how we can build this amazing and user-friendly website. While strolling online, I found one of the great React-based frameworks that make it easy to build web applications in combination with WordPress. And that framework is Frontity .

Before we dive right into the topic, here is a pro tip for all the readers. If you wish to **[hire ReactJS developers](https://www.clariontech.com/hire-developers/hire-reactjs-developers)**, Clarion can help you with that. Also, you can **[hire WordPress developers](https://www.clariontech.com/hire-developers/hire-wordpress-developers)** for your software development needs.

## What is Frontity?

Frontity is a free and open-source framework. It enables you to easily build a React-based frontend for a headless (or decoupled) WordPress site. Your WordPress site serves its data via the REST API, and the frontend that you build with Frontity consumes this data and renders it in the browser as a SPA (Single Page Application) which you can configure and style to your liking.

You might have a question in your mind, why WordPress and React? The reason is, WordPress is one of the most popular CMS which serves more than 35% of websites on the internet. Its market share is growing with each passing day for the last couple of years and shows no sign of slowing down. And, if we talk about reach, it is growing in popularity and becoming essential for great user experience.

### How Frontity works with WordPress?

Frontity uses WordPress as a back-end system to manage the content, media. You can easily change and it automatically updates on the Frontity (front-end) application, just like a traditional WordPress theme.
What was your Worst Experience Working with an Ecommerce Platform?
Tags: discuss, watercooler, opensource, programming
Published: 2022-04-18 11:21:06

At [Medusa](https://medusajs.com) one of our main focuses is to provide a good developer experience that eliminates the need for hacky solutions. This is an issue most developers run into when working with monolithic and proprietary software, and this was what lead to the [creation of Medusa](https://dev.to/medusajs/the-story-behind-our-open-source-ecommerce-platform-with-9000-gh-stars-in-6-months-28id).

What was the most annoying or worst experience you had when working with an ecommerce platform? How were you able to overcome the issues you ran into?
📖 My Linux commands diary
Tags: linux, beginners
Published: 2022-04-18 11:18:52

I'll write commands which I will have used in real life, like diary. If you want to write your commands in your life, please comment it

---

### 😎 search big image files (bigger than 100kb) in assets directory !

``ls -lh`` thanks for **"h"**, human can see file size easily
For example ``168075 -> 164kb`` 

```shell
$ find ./hoge/apps/web/src/assets -size +100kb | xargs ls -lh | sort -rn
-rw-r--r--@ 1 kaziu  staff   164K Apr  9 08:32 ./hoge/apps/web/src/assets/hoge1.svg
-rw-r--r--  1 kaziu  staff   336K Apr  9 08:32 ./hoge/apps/web/src/assets/hoge2.svg
-rw-r--r--  1 kaziu  staff   280K Apr  9 08:32 ./hoge/apps/web/src/assets/hoge3.svg
```

### 😎 How many lines of "INSERT" in log file?
``-l`` means ``lines``, count of new llines
```shell
$ grep INSERT log/development.log | wc -l
2940
```

### 😎 I need to delete all files except some files
I'm gonna delete all files, but I still need these files ``docker-compose.yml, Dockerfile, Gemfile, Gemfile.lock`` !!

> ``grep -v``
v option means 'except' 

```shell
# (la is alias of ls -la on my PC)
$ la | grep -v -E 'docker-compose.yml|Dockerfile|Gemfile|Gemfile.lock|entrypoint.sh' | xarg
s rm -rf
```
Simple checkbox switch
Tags: codepen, html, css, beginners
Published: 2022-04-18 11:06:21

If you want your switch to work, you need to transform it into a checkbox element, otherwise, you will not be able to know if it is "on" or "off".

So, there's a simple way to do it. Create an box around it and hide the checkbox, and, with a little "css-animation", done.

Here, you will only need to:
- Put it inside a div and position then in your layout
- Change the background-color(s)

{% codepen https://codepen.io/lorainevilches/pen/NWXejZL %}
How to split a string in JavaScript
Tags: javascript, webdev, beginners, codenewbie
Published: 2022-04-18 11:04:48

JavaScript strings are sequences of characters enclosed in single('') or double quotes(""). We can create a string as a primitive using the string literal or as an object using the `String()` constructor.

String using a string literal,

```js
const greeting = "What a beautiful world".
```
String using the `String()` object,

```
const greeting = new String("What a beautiful world");
```

## JavaScript Split Method

The JavaScript string has access to a particular `split()` method that splits a string into multiple substrings based on a splitter. The split method returns an array with all the divided portions of the strings. The split method doesn't change the original string.

We split a string using the space(' ') as a splitter in the example below.

```
const greeting = "What a beautiful world";
const arr = greeting.split(' ');
console.log(arr);
```
The output is an array with a bunch of strings after splitting.

```bash
["What", "a", "beautiful", "world"]
```

The splitter(the argument to the split method) can be a single character or any other strings. If we want to split a string by each character, we can pass the empty string('') as the splitter.

```js
const greeting = "What a beautiful world";
const arr = greeting.split(''); // The splitter is an empty string, not a space
console.log(arr);
```
The output,

```bash
['W', 'h', 'a', 't', ' ', 'a', ' ', 'b', 'e', 'a', 'u', 't', 'i', 'f', 'u', 'l', ' ', 'w', 'o', 'r', 'l', 'd']
```
If you invoke the split method without passing a splitter, it returns an array with the entire string.

```js
const greeting = "What a beautiful world";
const arr = greeting.split();
console.log(arr);
```
The output,

```bash
['What a beautiful world']
```
## Splitting With a Limit
The `split()` method takes another optional argument other than the splitter. You can also pass a `limit` to limit the number of splits. In the following example, we split the string using a space character with a limit of 2.

```js
const greeting = "What a beautiful world";
const arr = greeting.split(' ', 2);
console.log(arr);
```
After splitting by the space character, it will return an array of strings, but the returned array will contain only the first two splits. Hence the output,

```bash
['What', 'a']
```

## JavaScript String Splitting and Array Destructuring
Since ES6, we can pick the values from the array in a much more innovative way. As the split method returns an array, we can use the array destructuring syntax to get the element from the array.

```js
const cartoon = "Tom Jerry";
let [tom, jerry] = cartoon.split(' ');
console.log(tom); // Tom
console.log(jerry); // Jerry
```

That's all for now. I hope you find this article helpful. 

Let's connect,

- [Follow on Showwcase](https://www.showwcase.com/atapas398)
- [Subscribe to my YouTube Channel](https://www.youtube.com/tapasadhikary?sub_confirmation=1)
- [Give a Follow on Twitter](https://twitter.com/tapasadhikary)
- [Side projects on GitHub](https://github.com/atapas)
Open Source Adventures: Episode 38: Update script for Russian Losses App
Tags: ruby
Published: 2022-04-18 11:03:14

I linked to the Russian Losses App many times in various internet arguments. It doesn't currently have a permanent URL for the latest version, and various versions just reflect state of the code at given point.

It makes sense to keep the code as is, but I still want each version to have the latest data. So I wrote this script:

```ruby
#!/usr/bin/env ruby

require "pathname"

class UpdateCSV
  def initialize(archive_path)
    @archive_path = Pathname(archive_path)
  end

  def updated_equipment
    @updated_equipment ||= (@archive_path + "russia_losses_equipment.csv").read
  end

  def updated_personnel
    @updated_personnel ||= (@archive_path + "russia_losses_personnel.csv").read
  end

  def csv_files
    @csv_files ||= `git ls`.lines.map(&:chomp).grep(/\.csv\z/)
  end

  def call
    csv_files.each do |path|
      case path
      when /russia_losses_equipment/
        Pathname(path).write(updated_equipment)
      when /russia_losses_personnel/
        Pathname(path).write(updated_personnel)
      else
        puts "Unknown CSV file: #{path}"
      end
    end
  end
end

unless ARGV[0]
  STDERR.puts "Usage: #{$0} path_to_updated_archive"
  exit 1
end

UpdateCSV.new(ARGV[0]).call
```

To run it, [I grab updated version from Kaggle](https://www.kaggle.com/datasets/piterfm/2022-ukraine-russian-war), unpack it, and then run the update script.

There's a lot of files it needs to update. The ones in `docs` are GitHub Pages compiled app:

```
docs/episode-29/tanks/russia_losses_equipment.csv
docs/episode-29/tanks/russia_losses_personnel.csv
docs/episode-30/russia_losses_equipment.982e4e03.csv
docs/episode-31/russia_losses_equipment.csv
docs/episode-31/russia_losses_personnel.csv
docs/episode-32/russia_losses_equipment.csv
docs/episode-32/russia_losses_personnel.csv
docs/episode-33/russia_losses_equipment.csv
docs/episode-33/russia_losses_personnel.csv
docs/episode-34/russia_losses_equipment.csv
docs/episode-34/russia_losses_personnel.csv
docs/episode-35/russia_losses_equipment.csv
docs/episode-35/russia_losses_personnel.csv
docs/episode-36/russia_losses_equipment.csv
docs/episode-36/russia_losses_personnel.csv
episode-29/tanks/russia_losses_equipment.csv
episode-29/tanks/russia_losses_personnel.csv
episode-30/src/russia_losses_equipment.csv
episode-30/src/russia_losses_personnel.csv
episode-31/public/russia_losses_equipment.csv
episode-31/public/russia_losses_personnel.csv
episode-32/public/russia_losses_equipment.csv
episode-32/public/russia_losses_personnel.csv
episode-33/public/russia_losses_equipment.csv
episode-33/public/russia_losses_personnel.csv
episode-34/public/russia_losses_equipment.csv
episode-34/public/russia_losses_personnel.csv
episode-35/public/russia_losses_equipment.csv
episode-35/public/russia_losses_personnel.csv
episode-36/public/russia_losses_equipment.csv
episode-36/public/russia_losses_personnel.csv
```

### Coming next

Over the next few episodes, I want to add a few new features to the Russian losses tracker.
Restart android device android 5.1
Published: 2022-04-18 10:53:42

how to restart android device programmatically and I used below code for restart my device   Process proc = null;            
          

##   try {
               //proc = Runtime.getRuntime().exec(new String[] { "su", "-c", "reboot" });
                 proc = Runtime.getRuntime().exec(new String[]{"/system/bin/su","-c","reboot now"});
                proc.waitFor();
            } catch (Exception ex) {
                Log.i(TAG, "Could not reboot", ex);
            }
 

  And he is asking for a permission then i used this code 

##
  <permission android:name="android.permission.REBOOT"/>

 PowerManager pm = (PowerManager) getSystemService(Context.POWER_SERVICE);
pm.reboot(null);
 
please help me and inform me it is possible or not and i need this only in android 5.1
Flutter — 1 Minute guide to Useful Tips and Libraries in 2022
Tags: flutter, librarie, programming, testing
Published: 2022-04-18 10:27:50


## Got a minute?

In this article, we’ll have a quick look at a few most essential libraries and tips that make your day-to-day app [development](https://blog.canopas.com/10-tips-from-10-years-of-android-experience-dd9a009bd51) effective and easy.

### Here's a quick summary of the article.

1. You are developing pure Dart app.
2. Use get_it for service locator.
3. Use sqflite for persisting structured data
4. Use hive for persisting key-value data 
5. Use RxDart for async and stream operations
6. Test your classes with Unit tests
7. [Use CI/CD to automate development](https://blog.canopas.com/android-gitlab-ci-setup-c3618b8ef0db)
8. Use Firebase crashlytics for analytics
9. Modularize your app by feature
10. Use logging package for logs
11. Use Provider for state management
12. Use flutter_lints for code formatting

For a detailed explanations, visit [our blog on blog.canopas.com](https://blog.canopas.com/flutter-1-minute-guide-to-useful-tips-and-libraries-in-2022-6dafba34ed40)
How to land your first tech job: apply everywhere
Tags: career, codenewbie
Published: 2022-04-18 10:27:43

Getting your first job in tech is tough, especially if you are a self-taught software engineer.

In this video I share my first tip about getting your foot in the door. It's all about being creative - and humble - when you choose where to apply.

Subscribe to my [channel](https://www.youtube.com/channel/UCwkrS1KQCC9jlTriI6m9xuQ?sub_confirmation=1) if you don't want to miss upcoming videos about job search in tech.

{% embed https://youtu.be/6mYYXar0rSc %}
Design Pattern React : The State Initialiser
Tags: french, react, designpattern
Published: 2022-04-18 10:11:18

Ce design pattern permet de déporter la gestion du state dans un custom hook.

On peut l'implémenter en 3 étapes simple: 
<br>
<u>Step 1 : Définition du defaultState</u>

Soit dans une const ou directement au niveau de l'argument de la fonction

`const defaultState = 0;`

ou

`const useCounter = (initValue = 0) => {}`
<br>

<u>Step 2: Création du Hook Custom</u>

<code>
const useCounter = (initValue = defaultState) => {
  const [count, setCount] = useState(initValue);

  const add = () => setCount(count + 1);

  const reset = useCallback(() => {
    setCount(initValue);
  }, [initValue]);

  return [count, add, reset];
};
</code>
Ici on utilise la mémoïsation (useCallback) et on retourne un tableau.
<br>
<u>Step3: Utilisation du Hook Custom</u>

Comme avec useState, on va spread le tableau de notre useCounter et y'a plus cas.

`const [count, add, reset] = useCounter();`

<br>
{% codesandbox phojcs %}
3d physics arcade game
Tags: gamedev, showdev, react, three
Published: 2022-04-18 10:03:03

hey 👋, just finished up this game with react three fiber, and cannon js.

https://comforting-yeot-16f793.netlify.app/

have a blast 💥, and collect the ✨ stars.

Tell me what you think about the difficulty of the later levels
How to C#: add a settings file to your Console application
Tags: tutorial, csharp, core, howto
Published: 2022-04-18 09:50:18

What if I want to create a quick console application and keep all my settings in a seperate appsettings.json file? The default C# application template doesn't provide this for us, so I think it might be useful to write a little guide to make this easier in the future.

### Required ###
-  .Net 5.0 console application
-  The following packages:
```  
<ItemGroup>
    <PackageReference Include="Microsoft.Extensions.Configuration" Version="5.0.1" />
    <PackageReference Include="Microsoft.Extensions.Configuration.Binder" Version="5.0.0" />
    <PackageReference Include="Microsoft.Extensions.Configuration.Json" Version="5.0.0" />
    <PackageReference Include="Microsoft.Extensions.DependencyInjection" Version="5.0.0" />
</ItemGroup>
```
### Guide ###
Simply follow these steps to load your appsettings into a class for easy use.
-  Add the references above to the project
-  Add a new class called `ApiSettings.cs`
```
    public class ApiSettings
    {
        public string TwitterApiKey { get; set; }
        public string TwitterApiSecret { get; set; }
        public string BearerToken { get; set; }
    }
```

-  Add a new class called `Startup.cs`
```
public class Startup
    {
        public Startup()
        {
            var builder = new ConfigurationBuilder()
                      .SetBasePath(Directory.GetCurrentDirectory())
                      .AddJsonFile("appsettings.json", optional: false);

            IConfiguration config = builder.Build();

            ApiSettings = config.GetSection("ApiSettings").Get<ApiSettings>();

        }

        public ApiSettings ApiSettings { get; private set; }
    }
```
- Add your `appsettings.json` with content similar to something like this:
```
  {
"ApiSettings": {
    "TwitterApiKey": "",
    "TwitterApiSecret": "",
    "BearerToken": ""
  }
}
```
- Right click on the file `appsettings.json` and set the copy output to `Copy always`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdjm02cimlag0gbjim9g.png)
  
-  Make sure the fields in the section 'ApiSettings' match your ApiSettings.cs class.

- Go back to your Program.cs file and add the following line:
`var startup = new Startup();`
- We can now use the values in the ApiSettings section of our appsettings. You can try it out with the following code.

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

#All Done!#
<img width="100%" style="width:100%" src="https://media.giphy.com/media/VIjf1GqRSbf0OsNG0H/giphy.gif">

Now you can experiment and make it even more advanced yourself!
CSS Grid: table of contents
Tags: css, tutorial, grid
Published: 2022-04-18 09:45:00

Hello. Here I gather all the articles published so far during my CSS Grid series. I hope you’ll find here everything you need 😉

1. [CSS Grid: introduction](https://dev.to/mateuszkirmuc/css-grid-introduction-49d8)
2. [CSS Grid: basic concept and terminology](https://dev.to/mateuszkirmuc/css-grid-basic-concept-and-terminology-3ep)
3. [CSS Grid: defining the grid] (https://dev.to/mateuszkirmuc/css-grid-defining-the-grid-58j9)
4. [CSS Grid: fr unit — basics](https://dev.to/mateuszkirmuc/css-grid-fr-unit-basics-21cm)
5. [CSS Grid: fr unit - beyond basics] (https://dev.to/mateuszkirmuc/css-grid-fr-unit-beyond-basics-3036)
6. [CSS Grid: sizing keywords] (https://dev.to/mateuszkirmuc/css-grid-sizing-keywords-5734)
7. [CSS Grid: sizing functions] (https://dev.to/mateuszkirmuc/css-grid-sizing-functions-4d4j)
8. [CSS Grid: repeat function - basics] (https://dev.to/mateuszkirmuc/css-grid-repeat-function-basics-ijc)
9. [CSS Grid: grid-items] (https://dev.to/mateuszkirmuc/css-grid-grid-items-2ej4)
10. [CSS Grid: nested grid] (https://dev.to/mateuszkirmuc/css-grid-nested-grid-1bdf)
11. [CSS Grid: custom grid item placement - basics] (https://dev.to/mateuszkirmuc/css-grid-custom-grid-item-placement-basics-ech)
12. [CSS Grid: custom grid item placement - beyond basics] (https://dev.to/mateuszkirmuc/css-grid-custom-grid-item-placement-beyond-basics-22d)
13. [CSS Grid: custom grid item placement - grid template] (https://dev.to/mateuszkirmuc/css-grid-custom-grid-item-placement-grid-template-glh)
14. [CSS Grid: repeat function - beyond basics] (https://dev.to/mateuszkirmuc/css-grid-repeat-function-beyond-basics-32ce)
editing files embed in html
Published: 2022-04-18 09:43:39

Hi,
I am relatively new in learning javascript and I have a question,

what are the possibilities of edditing files directly from my browser? are there any?

my case is just having various html files in my webpage. I want to edit the content/style. I am on lets say "index.html". I have there button by which I want to change the for example bacground of the body of let's say "services.html". How can I do that? Is there necesary backend scripting?
Create beautiful gradient text in CSS with three lines of code!
Tags: html, css, uiweekly, webdev
Published: 2022-04-18 09:29:13

In this post I will walk you through about creating gradient text in css. 

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

You can easily add gradient to your text by adding two properties in css to the element.

```
h1 {
background: linear-gradient(to right, #93fd33 0%,#1A9DF4 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
```

-webkit-background-clip:text , and -webkit-text-fill-color:transparent properties are must to add graident to your text.


## Full Code

```

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Text Gradient</title>
    <meta name="description" content="How to make gradient text.">
    <style>
         body {
	background-color:black;
        }
.text1 {
	font-family:'Poppins';
	font-size:192px;
	margin:100px;
	background: linear-gradient(to right, #93fd33 0%,#1A9DF4 100%);
	-webkit-background-clip:text;
	-webkit-text-fill-color:transparent;
}


    </style>
  </head>
  <body>
	<h1 class="text1">Hello</h1>	
  </body>
</html>



```
Getting Started with the Angular Dialog Component
Tags: webdev, angular
Published: 2022-04-18 09:09:18

See how easily you can create and configure the Syncfusion [Angular Dialog component](https://www.syncfusion.com/angular-ui-components/angular-modal-dialog). This video explains how to use the Angular Dialog component of Syncfusion to collect input from users; inform them about critical information, errors, and warnings; and confirm their decisions. You will also see how to drag, resize and position the dialog, how to create an overlay behind the dialog, and how to render the dialog using an HTML button element. 

Product Overview: https://www.syncfusion.com/angular-ui-components/angular-modal-dialog

Explore tutorial videos: https://www.syncfusion.com/tutorial-videos

Download a getting started example from GitHub: https://github.com/SyncfusionExamples/getting-started-with-the-angular-dialog-component 

{% youtube 3sz1TThz9Ww %}
How To Handle `Error: EACCES: permission denied`
Tags: javascript, webdev
Published: 2022-04-18 08:30:20

## The Occurrence
I'll be coding away, testing something, refactoring another or trying to figure out things on a dev server. I'll finish, then when I come back some time later and try to run a dev server and I am met with this error:

> listen EACCES: permission denied 0.0.0.0:3000

*This is on Windows*

## What Causes It?
I am actually stumped myself as:
1. I have no clue what causes it  and
2. I don't know how to trigger it.

Most of the explanations point to something to do with Docker, but I  do not have Docker installed. It must be something else that I can't seem to pinpoint.

## The Solution 
The best solution I have found to resolve this error is as follows:

- Open PowerShell as Admin and stop `winnat` with the command below:

```
net stop winnat
```

- Start `winnat` again with the command below:

```
  net start winnat
```

I have encountered this error enough times that I know the exact search term to find this solution. So rather than Googling the same thing over and over, I'll keep it here for quick access.

---

> Might you know exactly what triggers it and how to avoid it in future? I would be very grateful for any explanation that makes sense.

---

## My Suspicions
I got this error when I started the dev server with vs code's integrated terminal.  
Recently as I have been defaulting to cmder, I haven't been getting it at all.

Might it be that vs code doesn't recognise that you have killed a server and started a new one? Who knows....

---

### Thank you for reading, let's connect!
Thank you for visiting this little corner of mine. Let's connect on [**Twitter**](https://twitter.com/Psypher1) and [**LinkedIn**](https://www.linkedin.com/in/jamesmidzi/)>)