teleren/devto huggingface dataset:
Create animations with Keronote ui
Tags: refinehackathon, keronote
Published: 2023-07-20 09:43:08

## What We built 

A simple, but fun animated canvas, with several tools and others features in web.

### Category Submission: 

* Best Overall Project
* Most Technically Impressive
* Most Visually Pleasing
* Best Project built using Material UI

### App Link
https://deft-pithivier-b4a203.netlify.app/login

### Screenshots 

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

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


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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42uaqg5n33gpor2wla91.PNG)

### Description 
Dare to make the animations you imagine, choose the color you want, generate different canvases and frames to give life to your creativity. Finally, take a look at the creations of others and play to see how they turned out.

### Link to Source Code 
https://github.com/Media-Collab/keronoteui

### Permissive License 
MIT

## Background (What made you decide to build this particular app? What inspired you?) 

We love flipnote animations, but the main problem is you need a Nintendo DS for create those animations. So we tried to do a simple animation software having inspiration on those features from flipnote studio, but at the same time improving and adding more features like layer system and extended color palette.


### How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?) 

We used refine for easily store animation information and we made a handmade canvas lib called "keronote", this project is also the frontend for that lib and use Refine hooks to finish the project in no time!

### Additional Resources/Info

- **Cloudinary API** [Docs](https://cloudinary.com/documentation/image_upload_api_reference#overview)
- **Supabase Data Provider** [Docs](https://refine.dev/docs/core/providers/data-provider/#overview)
- **Material UI** [Docs](https://refine.dev/docs/ui-frameworks/mui/tutorial/)
Wordle Today
Tags: beginners, gamedev
Published: 2023-07-20 09:40:47

The popular online word game [wordle today](https://wordletoday.io/) was created by programmer Josh Wardle. The player has six tries to guess a five-letter word accurately. Each time you guess, the game will show you which words are where they should be (in blue), which words are in the word but in the wrong position (in yellow), and which words don't exist (in gray).
The rules of this game are simple, but becoming proficient is challenging. Players must utilize their wits and language to guess the word within six tries. People of all ages like playing Wordle because of its simplicity and addictive nature.
Automate Your Web Testing with Selenium WebDriver
Published: 2023-07-20 09:39:12


Websites and web applications are essential for our online tasks. But have you ever wondered how developers ensure that these websites work flawlessly? Enter Selenium WebDriver, a fantastic tool that simplifies web testing and saves time and effort.

**What is Selenium WebDriver?**

Selenium WebDriver is like a smart robot that can automatically test websites for us. It's a free and open-source tool, meaning anyone can use it without paying a penny. With Selenium WebDriver, developers and testers can quickly check if their websites are working correctly.

**Why Should You Use Selenium WebDriver?**

**Easy Testing:** You don't have to be a tech genius to use Selenium WebDriver. It's user-friendly and offers a straightforward way to test websites and catch any bugs or errors.

**Browser compatibility:** Selenium WebDriver can work with various web browsers like Chrome, Firefox, and more. So, you can test your website on different browsers without doing the work manually.

**Language Flexibility:** Whether you prefer Java, Python, or another language, Selenium WebDriver supports multiple programming languages. You can use the language you're most comfortable with.

**Zero cost:** Since Selenium WebDriver is free and open-source, you don't need to spend money on expensive testing tools.

**How Does Selenium WebDriver Work?**

Imagine Selenium WebDriver as your virtual hands and eyes for testing. It can click buttons, fill out forms, and even read and verify text on a webpage. You just give it instructions, and it will follow them like a well-trained pet.

**Conclusion**

Selenium WebDriver is a game-changer for web testing. It saves time, ensures your website works well on different browsers, and doesn't cost you anything. So, if you want to be a superhero tester for your web projects, Selenium WebDriver is here to help!
Word-Dokumente mit Java-Programmen leicht in HTML-Dateien umwandeln
Tags: java, html, word, conversion
Published: 2023-07-20 09:34:27

Die Konvertierung von Word-Dokumenten in HTML-Dateien ist in verschiedenen Szenarien von großer Bedeutung. HTML ist eine weit verbreitete Sprache im Web, die es ermöglicht, Dokumente plattformunabhängig und einfach im Browser anzuzeigen. In diesem Artikel werden wir lernen, wie man das Class-Library [Free Spire.Doc für Java](https://www.e-iceblue.com/Introduce/free-doc-for-java.html) verwendet, um **Word-Dokumente in HTML-Dateien umzuwandeln**.

### Hinzufügen der Class-Library zum Programm:
Um Free Spire.Doc für Java verwenden zu können, müssen Sie zunächst die entsprechende Class-Library zu Ihrem Projekt hinzufügen. Führen Sie dazu die folgenden Schritte aus:
- Laden Sie die neueste Version von Free Spire.Doc für Java von der [offiziellen Website](https://www.e-iceblue.com/Download/doc-for-java-free.html) herunter.
- Extrahieren Sie das Archiv und kopieren Sie die JAR-Datei in den Ordner Ihres Projekts.
- Fügen Sie die JAR-Datei der Build Path Ihres Projekts hinzu, indem Sie in Ihrer Entwicklungsumgebung die Option "Build Path" oder "Abhängigkeiten" auswählen und die JAR-Datei importieren.

## Verwendung von Free Spire.Doc für Java zur Konvertierung von Word-Dokumenten in HTML-Dateien:
Folgen Sie den untenstehenden detaillierten Schritten, um Word-Dokumente in HTML-Dateien mithilfe von Free Spire.Doc für Java zu konvertieren:
- Schritt 1: Importieren Sie die erforderlichen Klassen:
```java
import com.spire.doc.*;
```
- Schritt 2: Laden Sie das Word-Dokument:
```java
Document doc = new Document();
doc.loadFromFile("Pfad/zum/Word-Dokument.docx");
```
- Schritt 3: Konvertieren Sie das Dokument in HTML:
```java
doc.saveToFile("Pfad/zur/Ausgabedatei.html", FileFormat.HTML);
```

### Vollständiges Code-Beispiel:

```java
import com.spire.doc.*;

public class WordToHtmlConverter {
    public static void main(String[] args) {
        // Laden des Word-Dokuments
        Document doc = new Document();
        doc.loadFromFile("Pfad/zum/Word-Dokument.docx");

        // Konvertierung des Dokuments in HTML
        doc.saveToFile("Pfad/zur/Ausgabedatei.html", FileFormat.HTML);

        System.out.println("Word-Dokument erfolgreich in HTML konvertiert!");
    }
}
```

Weitere Funktionen von Free Spire.Doc für Java:

[Word-Dokumente erstellen](https://www.e-iceblue.com/Tutorials/Java/Spire.Doc-for-Java/Program-Guide/Document-Operation/Create-Word-Document-in-Java.html)
[Text formatieren](https://www.e-iceblue.com/Tutorials/Java/Spire.Doc-for-Java/Program-Guide/Text/Apply-Formatting-to-Characters-in-Word-in-Java.html)
[Erstellen von Inhaltsverzeichnissen](https://www.e-iceblue.com/Tutorials/Java/Spire.Doc-for-Java/Program-Guide/Document-Operation/Create-Table-of-Contents-in-Word-in-Java.html)
A New Era for Time-Series Databases: dbForge Studio for PostgreSQL + TimescaleDB
Published: 2023-07-20 09:25:53

The latest update of dbForge Studio for PostgreSQL introduces a new addition to its supported databases. This addition is none other than TimescaleDB, a PostgreSQL fork that is marketed as "the easiest, fastest, and most cost-effective time-series database." With this update, TimescaleDB can now be seamlessly accessed and managed within the Studio. 

In this article, we will delve into TimescaleDB for those who are not yet familiar with it, providing the quickest way to learn all about its features. Even if you are already an active user, reading this post may introduce you to an excellent database management tool that will greatly simplify your daily work. So, fasten your seatbelts and let's embark on this journey!

https://blog.devart.com/timescaledb-support.html 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3k17lppiadonhxjhm79.png)
How to Import Any Data Format to MySQL Using ChatGPT
Published: 2023-07-20 09:23:31

Why not embrace the advancements in technology to simplify the process of database development? AI, a recent innovation gaining significant popularity, holds enormous potential in this regard. Among various AI solutions, ChatGPT stands out for its user-friendly interface and its ability to provide concise and precise responses.

ChatGPT's magic lies in its simplicity of use, as it only requires a well-crafted prompt. By providing a carefully formulated request, ChatGPT can generate SQL code that is ready to use. This not only streamlines data handling but also reduces the complexities associated with data conversion and manipulation, introducing a new level of efficiency to data transfer processes.

Read more: https://blog.devart.com/how-to-import-any-data-format-to-mysql-using-chatgpt.html 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egd7cbumkxbe1m2xl8zt.jpg)
Learning Path: MySQL Day 1
Tags: beginners, 100daysofcode, database, codenewbie
Published: 2023-07-20 09:19:50

Technically, this is not the day one. In the last few days, I took the time to create a curriculum of what I needed to learn. I explored some of the content available on the internet in the form of YouTube videos and paid courses to which I could subscribe to. The problem was these learnings will not be complete. They will only cover limited topics and I had to do my own search to gain more knowledge. 

Instead of identifying a single course, I decided to create a curriculum. I can learn the topics from material available on the internet. 

These are the topics I learned on day 1 of this journey. 

1. Connecting and disconnecting from the Server. 
2. Executing a query on the MySQL console. 
3. Creating a database
4. Creating a table
5. Loading data into a table. 

Satisfactory start to the journey.
How to Migrate Data from Oracle to MySQL: Step-by-Step Guide
Published: 2023-07-20 09:10:09

In this article, we will discuss the procedure of transferring data from Oracle to a MySQL table using two specific software tools: dbForge Studio for MySQL and Devart ODBC driver for Oracle. These tools enable users to effectively and efficiently migrate data between the Oracle and MySQL database systems.

For a more comprehensive understanding of data migration across various servers, we offer additional articles that delve into the following subjects:

Transferring data from MySQL to PostgreSQL
Migrating data from Oracle to PostgreSQL
Moving data from MySQL to Oracle

Read more: https://blog.devart.com/migrate-from-oracle-to-mysql.html 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6agh2j06eawjxknj6uaf.png)
Designing APIs with Swagger and OpenAPI
Tags: api, openapi, swagger, books
Published: 2023-07-20 09:02:00

_Disclaimer_: this post includes affiliate links; I may receive compensation if you purchase the book from the different links provided in this post.

This review is about [Designing APIs with Swagger and OpenAPI](https://www.manning.com/books/designing-apis-with-swagger-and-openapi?utm_source=frankel&utm_medium=affiliate&utm_campaign=affiliate&a_aid=frankel) by Joshua S. Ponelat and Lukas L. Rosenstock from Manning.

I'm continuing my API journey by reading books, viewing relevant YouTube videos, and reading relevant <abbr title="Internet Engineering Task Force">IETF</abbr> <abbr title="Request For Comments">RFC</abbr>s.

Today is a book review.

## Facts

* 21 chapters
* $38.39 (eBook)

## Chapters

* Part 1: Describing APIs
    1. Introducing APIs and OpenAPI
    2. Getting set up to make API requests
    3. Our first taste of OpenAPI definitions
    4. Using Swagger Editor to write OpenAPI definitions
    5. Describing API responses
    6. Creating resources
    7. Adding authentication and authorization
    8. Preparing and hosting API documentation
* Part 2: Design first
    9. Designing a web application
    10. Creating an API design using OpenAPI
    11. Building a change workflow around API design–first
    12. Implementing frontend code and reacting to changes
    13. Building a backend with Node.js and Swagger Codegen
    14. Integrating and releasing the web application
* Part 3: Extending APIs
    15. Designing the next API iteration
    16. Designing schemas with composition in OpenAPI
    17. Scaling collection endpoints with filters and pagination
    18. Supporting the unhappy path: Error handling with problem+json
    19. Improving input validation with advanced JSON Schema
    20. Versioning an API and handling breaking changes
    21. The API prerelease checklist

The book goes through designing a complete API via a demo project, the [Farmstall API](https://github.com/designapis/farmstall).

## Pros and cons

The review is concise, to say the least.

The book's main benefit is also its main issue: it focuses on beginners. Everything is very detailed. For example, the authors dedicated chapter 11 to explaining Git's basics.

I'm not an API expert, but I didn't learn anything. Hence, I don't have a lot to say.

## Conclusion

If you're a true newbie, _i.e._, you know nothing about HTTP, requests and responses, OpenAPI, and Postman, this book is for you. It goes into great detail in explaining everything from scratch.

If you have more than a passing familiarity with any of the above, I'm afraid it will be a loss of your money and time.

_Originally published at [A Java Geek](https://blog.frankel.ch/designing-apis-swagger-openapi/) on July 16th, 2023_
How to Convert React Web Application to Mobile Application
Published: 2023-07-20 08:58:52

Converting a React web application to a mobile application can be done using various methods. Here are a few steps you can follow to get started:

Choose a mobile development framework: There are several frameworks such as React Native, Ionic, Flutter, and Xamarin that allow you to create mobile applications using web technologies like React. As per your requirement, you can choose the one which fits your requirement.

Identify the parts of the web application that need to be converted: Not all parts of the web application may be needed in the mobile application. Identify the core features and functionalities that need to be included in the mobile application.

Reuse the existing React code: Since you have already developed the web application using React, you can reuse some of the code in the mobile application. However, you may need to modify some parts of the code to make it work in a mobile environment.

Optimize the user interface: Mobile devices have smaller screens compared to desktops or laptops. Therefore, you need to optimize the user interface of the mobile application to ensure it is easy to use on a smaller screen.

Test the mobile application: Once you have developed the mobile application, you need to test it thoroughly to ensure it works as expected. You can use tools like Appium, Espresso, or XCUITest to automate the testing process.

Publish the mobile application: Once you have tested the mobile application and are satisfied with its performance, you can publish it to the relevant app stores such as Google Play Store or Apple App Store.

Keep in mind that converting a web application to a mobile application requires a different approach and mindset. Therefore, you may need to make some adjustments to your development process to ensure a successful outcome.

This article is originally posted over [jsonworld](jsonworld.com)
DataGrip vs DBeaver vs dbForge Edge
Published: 2023-07-20 08:46:46

DataGrip and DBeaver are well-known and widely used options for daily development and management of relational databases across multiple systems. However, if you are an existing user of either tool and seeking to enhance your capabilities with a more advanced set of database tools, there is a solution available.

Introducing dbForge Edge, a comprehensive multidatabase solution that encompasses four integrated IDEs designed to cater to various database systems. With dbForge Edge, you can expect a range of advanced features that set it apart. In the following comparison, we will assess its features in contrast to DataGrip and DBeaver.

Take a look – you might just find that dbForge Edge is precisely what you need to elevate your database management experience:

https://www.devart.com/dbforge/edge/datagrip-vs-dbeaver-vs-dbforge-edge.html
How to show tables in Oracle Database
Published: 2023-07-20 08:40:44

When working with databases, it is typical to engage in tasks like checking tables within databases, accessing specific tables, or listing all existing tables. Database management systems provide convenient methods to carry out these tasks with ease.

For instance, MySQL simplifies the process with its SHOW TABLES command. However, alternative approaches are available for other database management systems that lack direct support for this functionality. SQL Server, for instance, relies on catalog views, while Oracle allows tables to be displayed by querying its data dictionaries. 

This article will explore different options for querying Oracle and retrieving information about database tables: https://www.devart.com/dbforge/oracle/studio/show-tables-in-oracle-database.html 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uas030d0glr5956t7g0l.png)
Encrypting Your MySQL: A How-to Guide
Published: 2023-07-20 08:36:27

The value and significance of data cannot be overstated, making the protection of both data and databases crucial. However, relying solely on one or two solutions is insufficient. Data security demands a multifaceted approach where every aspect holds importance, and encryption is a vital component.

When discussing MySQL encryption, we encounter two distinct scenarios: encryption of data stored within MySQL databases and encryption of connections to MySQL servers. Each scenario entails specific methods and mechanisms.

Now, let's delve into the various encryption methods applicable to MySQL databases: https://www.devart.com/dbforge/mysql/studio/mysql-encryption.html
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpvpydkgtcsmvt6cmic3.png)
Ruby Basics - Intro
Published: 2023-07-20 03:59:01

Let us recap the basics of Ruby in Codecademy!

Ruby takes strings, booleans, and numbers as variables 

```ruby
my_num =  25  
my_boolean = true   
my_string = "Ruby"  
```

Variables are declared as with a variable name and equal sign
```ruby
my_num = 100
```
Ruby allows for all mathematical symbols ...
Addition (+)
Subtraction (-)
Multiplication (*)
Division (/)
Exponentiation (**)
Modulo (%) => remainder 


Puts and Print 

Print - prints it to the screen
puts - adds a blank line and then puts the variable 


**Popular Methods**

.length => number of characters in a string
.reverse
.upcase
.downcase


**How to comment**

```ruby
single line comment uses => #

multi line comment ...

#
=begin
hello
this 
is
just
comments
=end
```

Multiple words in a variable name is ok as long as you use an underscore in between words

this_is_my_long_variable = 

**Getting an input from the user**

Ask a question and then set a prompt using gets.chomp

```ruby
print "What is your last name? "
last_name = gets.chomp

#Use methods to get the the user input in the correct format 

ex. last_name.capitalize!
```
Useful Input Decorator Features in Angular 16
Tags: angular, webdev
Published: 2023-07-20 08:30:00

Here are 3 useful Input Decorator Features in Angular 16

**Required Input**: This feature allows you to mark an input as required by using the @Input({ required: true }) decorator. This means that the parent component must provide a value for the input, otherwise a runtime error will be thrown. This is useful for ensuring that your components have all the data they need to function properly.

**Transform**: This feature allows you to transform the input value before it is assigned to the input property. This can be useful for validating the input value, formatting it, or converting it to a different type. For example, you could use the transform property to convert a string input to a number.

**Alias**: This property allows you to specify a different name for the input property in the template. This can be useful if you want to use a different name for the input property in the template than the name of the input property in the component class.

```typescript
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-component',
  template: `
  <h1>Input Decorator Features in Angular 16 Example</h1>

  <input type="text" [(ngModel)]="name" placeholder="Name" required />
  <input type="number" [(ngModel)]="age" placeholder="Age" />
  <input type="text" [(ngModel)]="customName" placeholder="Custom Name" />
  
  <p>Name: {{ name }}</p>
  <p>Age: {{ age }}</p>
  <p>Custom Name: {{ customName }}</p>
  `,
})
export class AppComponent {

  @Input({ required: true })
  name: string;

  @Input({ transform: (value: string) => parseInt(value, 10) })
  age: number;

  @Input({ alias: 'customName' })
  customName: string;

}
```

In the above example, the name input property is required, the age input property is transformed from a string to a number, and the customName input property is aliased to the name input property. The HTML code binds the input properties to the component properties using the ngModel directive.

When the user changes the value of an input property in the HTML, the new value is automatically updated in the component property. This is because Angular uses the @Input decorator to listen for changes to the input properties.

[Stackblitz Example Link](https://stackblitz.com/edit/stackblitz-starters-dkoixf?file=src%2Fmain.ts)
What is TypeScript Pick?
Tags: typescript, javascript, webdev, react
Published: 2023-07-20 08:24:35

Pick allows you to create a new type by selecting specific, properties from an axisting one.

This is particularly helpful when you whant to expose only a subset of an object's properties or when working with lerge objects with many properties.

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


**Read more:** https://refine.dev/blog/typescript-pick-utility-type/#when-to-avoid