teleren/devto huggingface dataset:
Data flow through services: Rest approach
Tags: webdev, beginners, programming, api
Published: 2022-12-10 21:53:53

Hi! Today I want to write a few words about Rest and about SOAP after that in another article. I have experience working with both of it in php, javascript and typescript, Node.js and Golang.

RESTful API is a popular approach to creating web APIs that provides a simple and effective way to access data over HTTP. It is based on the principles of REST (Representational State Transfer) architecture, which defines a set of rules for creating interfaces for systems to interact with each other.

 The main principles of RESTful API are state and representation. The state refers to the data stored on the server, and the representation is the way it is presented to the client. RESTful API uses HTTP methods (GET, POST, PUT, DELETE, etc.) to access and manipulate resources.


![REST API - Author: Seobility - License: CC BY-SA 4.0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i50tz3w1z5h6obh5i8bc.png)

 One of the main advantages of RESTful API is its simplicity and ease of use. It supports the standard set of HTTP methods, which are easy to understand and use. It also allows for the creation of API endpoints that can be easily shared and accessed by different clients. This makes RESTful API a versatile and flexible solution for accessing data over the web.

 Another benefit of RESTful API is its scalability. It can easily handle large amounts of data and traffic, making it suitable for use in high-volume applications. It also supports a wide range of data formats, including XML and JSON, which makes it easy to integrate with different systems and technologies.

 In conclusion, RESTful API is a popular and effective approach to creating web APIs. It offers simplicity, flexibility, and scalability, making it a good choice for accessing data over the web.

-----

Photo by <a href="https://unsplash.com/@ilyapavlov?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ilya Pavlov</a> on <a href="https://unsplash.com/s/photos/programing?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Image by Seobility - License: CC BY-SA 4.0
How to make a dark mode toggle with CSS and Javascript
Tags: webdev, css, javascript, tutorial
Published: 2022-12-10 21:48:01

Having a dark mode on your website is a great thing that many web developers use. It's also really easy to make with one CSS class and a javascript EventListener. 


##Making the CSS class
The first thing you need to make is a css class that has the dark mode. This is usually the body, but you can also put this for other specific elements that you want the dark mode on. In the class you it should `background-color` set to a dark color. It should also have the text set to be brighter so it can be easier for the user to see when it's dark. 

```css
.dark {
  color: #ffff;
  background-color: #0d1b2a;
}
```
<hr>
##The Javascript function
Now we give a button an EventListener with a function for whenever it's clicked. Inside the function it'll have the DomTokenList method `classList.toggle` and inside it we add the CSS class with the dark theme. Now whenever we click the button it toggles the dark theme on or off. 

```javascript
darkMode.addEventListener('click', function () {
    document.body.classList.toggle('dark');
  });
```


As an example heres this quick codepen i made, if you click the moon over at the top it'll change the theme! (Sorry it looks bad, i had a fever this week so i didn't feel like doing a lot)
{% codepen https://codepen.io/lensco825/pen/GRGLwVb %}
Benefits of Customs Recordal
Published: 2022-12-10 21:46:27


[Benefits of Customs Recordal](https://baianat-ip.com.sa/customs-recordal/)

It is feasible to officially demand the Customs recordal for safeguarding your IP privileges against duplicating and encroachment. Such solicitation requires recordal of your organization and important brand names or copyright with the Customs.

Customs recordal is one of the legitimate measures that IP proprietors can utilize for requirement at the lines.
The Customs Law furnishes that IP can be recorded with neighborhood Customs workplaces or the General Customs Department in Hanoi.
Recordal isn’t mandatory yet is energetically suggested for freedoms holders confronting IP encroachment in Vietnam. The pertinent regulations and guidelines administering customs recordal are the Customs Law 2001, revised in 2005, Decree No 154/ND-CP dated December 15, 2005.
Specifying the arrangements of the Customs Law and the Regulations on Handling Requests for Border Control Measures Over Imported and Exported Goods declared by Decision no 916/QD-TCHQ dated March 31, 2008.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bj2o1h6f96mk15d3bis.jpg)
[wip] Learning Flutter & Dart
Published: 2022-12-10 21:34:16

I took the course about [Flutter in Frontend masters by Maximiliano Firtman](https://frontendmasters.com/courses/flutter/) and it was amazing. As I usually do, there are some stuff that I will need to remember, here it goes.

####Dart
- By Google. For FE apps, Angular Dart and Flutter. Dart 2. Compiles to native, Intermediate Language and JS. [dartpad.dev](https://dartpad.dev/?)

####Flutter

#####Create a Flutter project in VS Code

- `Ctrl + Shift + P` and select `Flutter: New Project`
- `Application` template
- Select folder or create one.
- Name the project
- It will take some time to create the project

#####Run project in localhost

- Select platform


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

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

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

- Run debugger or press F5

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

- The app is now ready in a localhost:

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

#####Images
- You can create an `assets` or `images` folder **in the root** of the project. And you need to add them in the `pubspec.yaml` file.
- Scroll until `To add assets to your application, add an assets section, like this:`.
- Un-comments `assets:` line and then you can add images one by one or just write `images/`. After that, images will be "spread" to all folders and versions of your app.
- So you should have:

```
assets:
  - images/
```

#####Make http requests

- Go to `pubspec.yaml` file and look for `dependencies:`. There is `flutter:` so underneath we type `http:` (no version so we get the latest one).

#####Build for Android
- We need to provide icons in `Android studio`. 
- Open the `android` subfolder of your project in Android studio. In `mipmap` folder there is a subfolder called `ic_launcher`. By default is the flutter logo.
- Right click on `mipmap` > `New` > `Image Asset`.

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

- In `path` select the image file and adjust as necessary. 
- Now we are ready to build the app, you can go back to VS Code and run `flutter build appbundle` or `flutter build apk` in the CLI. 


#####Notable links shared in the course
- [Material design palette](https://m2.material.io/resources/color/#!/?view.left=0&view.right=0)
- [JSON to Dart](https://javiercbk.github.io/json_to_dart/)
- [Material design icons](https://fonts.google.com/icons?selected=Material+Icons)
- [Build and release an Android app](https://docs.flutter.dev/deployment/android)
- [Page with the data source for the demo app](https://firtman.github.io/coffeemasters/)

####Notable links I learnt on the way
- [Where to store env variables](https://codewithandrea.com/articles/flutter-api-keys-dart-define-env-files)
Predicting Soccer Match Outcome - Step by Step
Published: 2022-12-10 21:29:03

Predicting Soccer Match Outcome Algorithm - a Python script to predict soccer game winners and bet on them


To create a Python algorithm that can predict the results of a soccer game, such as the World Cup 2022, you would need to consider a number of factors. Some of the key steps in creating such an algorithm might include the following:

Gather data on the teams and players involved in the soccer game. This could include information on the teams' past performance, the players' individual statistics, and other relevant factors. Anything, down to weather in Qatar.

Develop a model or set of rules for predicting the outcome of the game. This could involve using statistical techniques such as regression analysis or machine learning algorithms to analyze the data and make predictions.

Test and refine the model by comparing its predictions to the actual results of previous soccer games. This will help to determine the accuracy and reliability of the model, and to identify areas for improvement.

Use the model to make predictions for the World Cup soccer games. This could involve inputting data on the teams and players involved in the game, and using the model to generate a prediction of the likely outcome.

Overall, creating a Python algorithm that can predict the results of a soccer game would require a combination of data analysis, statistical modeling, and testing and refinement. With the right approach, it is possible to develop an algorithm that can make accurate and reliable predictions for soccer games.

Stay tuned for more updates, after creating the algorithm, the next step would be to test its results with betting!

Follow on twitter
Graph database plugin for RDBMS
Tags: opensource, database, postgres, cypher
Published: 2022-12-10 20:52:35

Apache AGE is an open-source project for building plugins for RDBMS to process and store Graph data. Currently it supports PostgreSQL for RDBMS and openCypher for Graph data structure. 

It is designed to run a path finding algorithm in memory and is looking to add several Graph algorithms either as a built-in function and as a Python program.   

Apache AGE is also looking to expand its support for RDBMS including MariaDB. 

{% embed https://github.com/apache/age %}
PHP Getters and Setters in VS Code
Tags: php, vscode
Published: 2022-12-10 20:26:30

Hello I have created a small plugin for every PHP developer that uses VS code.

This plugin allow you to create multiple getters and setters and/or a constructor. 

https://marketplace.visualstudio.com/items?itemName=IvanGrigorov.php-getters-and-setters

What is defferent from the rest ? 

The main difference is that it works with multiple fields in a selection, not having to go and generate the code one by one. It also includes the option to generate constructors without the need of new extension with the already defined fields.

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

Feel free to try it, give feedback and/or rate it. :)
The Complete Guide to Micro-Frontends for 2023
Tags: react, microfrontend, beginners, programming
Published: 2022-12-10 20:15:19

**What is a micro frontend?**

The Micro Frontend style of architecture design does for the frontend of an application what microservices do for the backend, breaking monolithic structures into smaller components that can then be assembled on a single page.

[![Watch the video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td78ouu0hfaf0qjjdrpb.jpg)](https://youtu.be/u4Z9INmHhCM?autoplay=1)
---

##### Must Read If you haven't

###### [3 steps to create custom state management library with React and Context API](https://dev.to/devsmitra/3-steps-to-create-custom-state-management-library-with-react-hooks-and-context-api-1bfh)

###### [How to cancel Javascript API request with AbortController](https://dev.to/devsmitra/how-to-cancel-javascript-api-request-with-abortcontroller-36cm)

###### [Getting started with SolidJs – A Beginner's Guide](https://dev.to/devsmitra/getting-started-with-solidjs-a-beginners-guide-5af4)

---

###### More content at [Dev.to](https://dev.to/devsmitra "Rahul Sharma(DevsMitra)").

{% user devsmitra %}

###### Catch me on
<p>
{% cta https://www.youtube.com/@devsmitra?sub_confirmation=1 %} Youtube {% endcta %}
{% cta https://github.com/devsmitra %} Github {% endcta %}
{% cta https://www.linkedin.com/in/rahul-sharma-18b8b374 %} LinkedIn {% endcta %}
{% cta https://devsmitra.medium.com %} Medium {% endcta %}
{% cta https://stackblitz.com/@devsmitra %} Stackblitz {% endcta %} {% cta https://devsmitra.hashnode.dev %} Hashnode {% endcta %}
{% cta https://hackernoon.com/u/devsmitra %} HackerNoon {% endcta %}
</p>
UI/UX Design Basics
Tags: beginners
Published: 2022-12-10 20:10:47

There are several aspects of UI/UX Design that work jointly to create an easy to navigate, satisfying experience for the user. These principles consist of **Usability**, **Responsiveness**, **Consistency**, **Simplicity**, **Flexibility**, **Accessibility** and **Visual Design**. 

**Usability**: Usability refers to the ease of navigation and how comprehensible the layout of a website is, the controls should feel familiar and intuitive, your website should not be confusing to use. 

**Responsiveness**: Your website should be as responsive as possible, Lag kills the user experience, You could have an otherwise perfect website that takes too long to load, and the load times would overshadow everything else. You should always be looking for ways to optimize your projects.

**Consistency**: Consistency ties into usability, if you use the same layout, colors and navigation elements on every page, the user will be able to predict how to navigate and have an easier time understanding your design, resulting in a more enjoyable user experience. 

**Simplicity**: Simplicity is exactly what it sounds like, keep your website simple, if you add a plethora of unnecessary features it will increase the likelihood that your user becomes frustrated or overwhelmed by your design. Minimalist designs that allow the user to focus on the task at hand are best.

**Flexibility**: You want your interface to be usable on any screen size or orientation, by focusing on flexibility while designing you will end up with a product that's adaptable and scalable.

**Accessibility**: Your website should be accessible to the vast majority by including things such as semantic HTML tags, High contrast color palettes and appropriate text sizes and text spacing. Some more things you can do include closed captions for video content, as well as TTS for the visually impaired. 

**Visual Design**: Your design should be visually appealing as well as engaging, Use bold, eye catching colors to draw the users attention to important information as well as an effective use of color and typography to communicate a hierarchy of options. 

Source: https://dev.to/mohsenkamrani/7-crucial-ui-and-ux-principals-to-follow-2c63
Release 0.4 - Finale
Tags: javascript, react, github, opensource
Published: 2022-12-10 20:03:36

We have reached the finishing point of the semester as well as Release 0.4. 

I managed to finish the implementations themselves, it took a bit of time finishing the react but it was well worth the time.

For the Continuous integration, I managed to get the CI to run properly and also run the authors version of lint. I should have expected it to fail because there were several issues when running lint locally but it was the difference between. CRLF and LF, which is only the difference in line feed in different operating systems. So I assumed GitHub would ignore that and it did. though the Authors code did have some issues that I did not find. So I can safely say that I managed to integrate `ESLint` in the continuous integration properly.

For the timer I managed to finish the class for it to countdown till it reached zero. The timer has a constructor that would store the time and in the tick function it would do the math for the countdown. Then there would be a function to start the countdown and it would set the countdown as it kept ticking. Finally the render would be sent within contained between `<span></span>`. The index file would take the class and set the amount of seconds and send it to the main app.

But as the author requested, instead of making a class, it would be better if I could export it as a function. So I decided to revamp my code as a whole, and changed it to a much more simple function, instead of setting it up similar to the class before with multiple functions, it is one function that does everything.

**NOTE**: I am now a [collaborator](https://github.com/Ewager1/scrambled/tree/new-timer) for this repository.

As for why they are not merged yet, I am still awaiting a review from both Repositories. For **scrambled**, I basically have evrything done as per the authors request, and changing it to a function. As for **github-writter** I have not heard from them.
Algorithm to Recommend Driver Shafts in Golf
Tags: programming, beginners
Published: 2022-12-10 19:58:54

   Hi everyone, I'm starting to transition my life in a new direction and Codecademy is helping me achieve those goals. I don't know if I want to focus more on IT or Code specifically, but everything is new and exciting. For my course I had to create an algorithm for anything and being an avid golfer I decided to come up with a process to automatically recommend what type of golf shaft you should be using when you play golf, based on your swing speed.

   To create this algorithm I had to plan all the steps that are involved with not only finding your average swing speed, but also try to write it in a way that a program could understand. I may not be able to proficiently write code yet, but I have an idea how it works. I will share the steps I took from planning the algorithm, to the flow chart ending with my pseudocode. Any advice would be greatly appreatiated, on either my work or anything to help in my future goals in tech.  


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lfjb0vlg2pp8c2g8vml.jpg)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pl1mkntl4yiv0w817j2.jpg)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwtlol5qrkgejpy3n6pk.jpg)
Fibonacci Sequence in(JS and Golang)
Published: 2022-12-10 19:43:04

The Fibonacci sequence is the integer sequence where the first two terms are 0 and 1. After that, the next term is defined as the sum of the previous two terms.

```
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, ...
```

Fibonacci number using the following formula:

`Fibonacci(n)=Fibonacci(n-1)+Fibonacci(n-2)`

Fibonacci Series Up to n Terms(**JS**)

```
const number = parseInt(prompt('Enter the number of terms: '));
let n1 = 0, n2 = 1, nextTerm;

console.log('Fibonacci Series:');

for (let i = 1; i <= number; i++) {
    console.log(n1);
    nextTerm = n1 + n2;
    n1 = n2;
    n2 = nextTerm;
}
```
Fibonacci Series Up to n Terms(**Golang**)

```
package main
 
import (
  "fmt"
)
 
func Fibonacci(n int) {
 
  var n3, n1, n2 int = 0, 0, 1
 
  for i := 1; i <= n; i++ {
 
    fmt.Println(n1)
 
    n3 = n1 + n2
 
    n1 = n2
 
    n2 = n3
 
  }
}
 
func main() {
 
    Fibonacci(10)
 
  }


```
Using Recursion(**Golang**)

```
package main
 
import (
  "fmt"
)
 
func Fibonacci(n int) int {
 
  if n <= 1 {
 
    return n
 
  }
 
  return Fibonacci(n-1) + Fibonacci(n-2)
 
}
 
func main() {
 
  for i := 1; i <= 10; i = i + 1{
 
    fmt.Println(Fibonacci(i))
 
  }
 
}
```

 Fibonacci Sequence Up to a Certain Number(**JS**)

```
const number = parseInt(prompt('Enter a positive number: '));
let n1 = 0, n2 = 1, nextTerm;

console.log('Fibonacci Series:');
console.log(n1); // print 0
console.log(n2); // print 1

nextTerm = n1 + n2;

while (nextTerm <= number) {

    // print the next term
    console.log(nextTerm);

    n1 = n2;
    n2 = nextTerm;
    nextTerm = n1 + n2;
}

```
1/20 Coding Day
Published: 2022-12-10 19:40:59

## hello geekies...

First day i am going to setup react native project in macOS.
So as we all do i search on google 'How to Setup React Native project in mac' and where i found lot of blog/post.

Let me tell you first one of my bad habit is i don’t read blog, i just jump on the code example and try to understand what is going or what i need to do or which cmd i need to copy/paste.

I found on google to setup React native project we need following things:

1. node
2. android studio (for virtual device)
3. watchman (don't know why?)
4. Xcode (don't know why?)
5. java (i think for apk building)

## Lesson of the Day

I learn one main think in mac what we install with brew so we need setup path in shell working directory.
we can check current working directory with this cmd `echo $0` or `ps`. and in my case i am using `zsh` shell.

One more thing...

i am using `nvm` (node version manager) for use multiple version. For install use `brew install nvm` cmd and after that i set nvm path in `~/.zshrc` file
Natural Scrolling EndeavourOS i3-WM
Tags: linux, endeavouros, i3wm
Published: 2022-12-10 19:39:40

Edit `40-libinput.conf`

```
/usr/share/X11/xorg.conf.d/40-libinput.conf
```

Add there Option 
```
"NaturalScrolling" "True"
```

### Example
For mouse:
```
# Match on all types of devices but joysticks
Section "InputClass"
        Identifier "libinput pointer catchall"
        MatchIsPointer "on"
        MatchDevicePath "/dev/input/event*"
        Driver "libinput"
        Option "NaturalScrolling" "True"
EndSection
```

For touchpad:
```
Section "InputClass"
        Identifier "libinput touchpad catchall"
        MatchIsTouchpad "on"
        MatchDevicePath "/dev/input/event*"
        Driver "libinput"
        Option "NaturalScrolling" "True"
EndSection
```

Then log off and on to apply. 

---

## Reference
[https://askubuntu.com](https://askubuntu.com/questions/1122513/how-to-add-natural-inverted-mouse-scrolling-in-i3-window-manager)
A shell script to create a Django project.
Tags: django, shell, python, webdev
Published: 2022-12-10 18:34:56

I have been a Django developer for half a decade now and I always wish there was a way to start a project without having to deal with the boring stuffs. Every month  I start at least three projects.
Today, I introduce to you a simple shell script that automates the start of a Django project. 

## What does it do exactly?

1. Creates a virtual environment
2. Upgrades pip and install Django and Pillow, and other packages you added
3. Starts a Django project 
4. Gets list of apps you will need for your project and creates them
5. Creates `requirements.txt` file
6. Starts the project at port `8000`

You can access the script at this [github repo](https://github.com/KekeliDev/django_setup_shell_script.git)

Please follow the instructions at the repo
Enjoy and have fun!