DEV Community: marvelken

Five flutter projects to participate in hackoctober

marvelken — Sat, 29 Oct 2022 23:27:39 +0000

Introduction

DigitalOcean sponsors Hacktoberfest, a month-long festival honoring open-source software that promotes involvement in giving back to the open-source community. Developers participate by completing pull requests, attending events, and making financial contributions to open-source projects.

Goals

Hacktoberfest is one of the most well-known events that promote contributions to open source. In this blog, I'll go through every facet of Hacktoberfest as well as resources for connecting with repos for contributions.
This essay will explore the importance of Hacktoberfest for developers as well as five fantastic flutter projects that might help developers feel heard and pleased.

Flutter Repos to contribute to hackoctober fest

This page contains links to over 300 flutter repos to which you can contribute, however, the five listed below were chosen because they assist novice and experienced flutter developers in gaining access to the full scope of flutter development expertise, strengthening your weak hands in open-source and not only a test for T-shirts.

Flutter community:
The majority of the flutter packages in this group are used by all flutter applications. This project is mostly for skilled Flutter developers with experience.

Flame-engine:
Flame is a Flutter game engine that is modular and offers a full range of convenient solutions for games. It benefits from the robust infrastructure. This project is mostly for skilled Flutter developers with experience.

Clueless community:
With PREGA and flutter-UI-components being the Flutter repos that are appropriate for new Flutter developers to contribute to and acquire the sense of open-source contribution, the Clueless community has several excellent repositories. This project is mostly for skilled and intermediary Flutter developers.

Institute ID card:
A straightforward Flutter generator for creating college ID cards that keeps your information for later usage in the Firestore database. This project is mostly for beginners and intermediary Flutter developers.

Flutter web base
Flutter web base is a project that aims to be a UI element library for Flutter web similar to Bootstrap but Flutter.,

Avoid making it spam-Octoberfest

According to Digital Ocean there are regulations in place to lessen spam. The excitement of obtaining a limited-edition Hacktoberfest t-shirt and the growing popularity of the event were determined to be the cause of low-quality pull/merge requests (PR/MRs) in 2020 as participants chased the t-shirt without considering their actions. These acts caused the open-source community to have a worse experience and added work for maintainers. As a result, Digital Ocean tightened the guidelines for submissions for the 2020 event right away and improved the consistency of enforcement, thus ensuring higher-quality PR/MRs and lowering the number of spam complaints. This year's rules are unchanged, and they will continue to be improved based on community feedback to ensure that Hacktoberfest is a success.

The following guidelines are drafted for this year as part of the ongoing commitment to high-quality contributions and useful experiences that unite the open-source community:

Maintainers must choose to participate in Hacktoberfest by either adding the "hacktoberfest" topic to their participating repository/project in GitHub or GitLab, or by adding the "hacktoberfest-accepted" label to certain PRs/MRs.
Spam PR/MRs will be marked as such. The PR/MR will be considered spam and not count toward Hacktoberfest if any of its labels contain the word "spam." Two or more spam PRs or MRs will result in a user's permanent disqualification.
PRs and MRs only count after a maintainer accepts them. By merging them, giving them a general thumbs up, or marking them as "hacktoberfest-accepted," maintainers of opted-in projects can accept PR/MRs from contributors.
A system for reporting problematic repositories has been implemented. The Hacktoberfest community can alert Digita ocean about repositories intended to rig the competition.
The importance of getting a t-shirt and earning a prize has been diminished. Instead there is more concentration on how to unite communities to enhance open source for everyone. ## Guidelines to create a good PR

Create a good Repo with the following guidelines below;

Pick a solid repo.
To commit your modifications, fork the repository.
To post all changes without affecting the original repository, forks essentially make a replica of the same repository on your account.
Make a new branch based on your work. For instance, to work on a drag-n-drop feature for marvel-ken.
You will be able to see a contribute button in your forked GitHub project once the job is finished. Utilize it to produce a PR for the main repository.
Watch for the PR's approval. You can always add new code to the branch and update the PR if there are any problems with the PR. After merging, at this point you are successful in adding to an open-source repository.

Final thoughts

Since the annual festival still has a few days left before it ends on October 31st, there is still time to participate. In this article, we went over the dos and don'ts of the fest and highlighted five excellent repos to contribute to. I have concluded this essay; I appreciate your patience.

HIGH-PERFORMANCE GRAPHICS WITH REACT NATIVE SKIA

marvelken — Fri, 18 Feb 2022 18:53:00 +0000

Goals

React native SKIA still in alpha and this article will only cover the benefits of skia to React Native developers.

Introduction;-

React Native SKIA would be able to integrate the SKIA library into React Native, which would make many challenging and impossible React Native tasks much easier. I think i would point out the fact that this is my first article without any code, I was uneasy at first but pretty fine writing.

In react native, graphics have been a pain in the neck. I must say that SKIA represents a significant innovation. With SKIA, it only takes a few lines of code to produce amazing visuals; producing stunning and professional-looking applications would no longer require a large amount of code.

One of Facebook's self-proclaimed biggest mistakes was believing so much in HTML over NATIVE, well you could ask why? Retrieving data on a mobile version of Facebook was slow and at the same time unstable. React-Native was created as a result of this.

It allows developers to freely use the React framework in accordance with native enablements or capabilities when developing for Android, iOS, and Windows, although React-Native has a number of limitations. The React-Native Skia library comes into play here.

Since React Native SKIA is currently in alpha, we would have to wait for its full production before using it to construct something distinctive and sophisticated at the same time. But what does the React-Native Skia library have to offer the React-Native development environment before that happens? This article elaborates on that.

Do you want to try it before its release? You can follow the steps below:

Let's set up a development area for React Native, since React Native Skia project was recently focused on Ubuntu 18 to speed up project development, during your set up of React Native development areas you may encounter a KVM error while trying to run AVD in Android studio, there are quick fixes out there and you can also try this:
Open your Terminal

Sudo apt install qemu-kvm and run this
Add user "username" kvm replace "username" with your name and run this
Restart pc

Hope this turns out just fine for you, if this doesn't work out simply contact Ubuntu developers to help you out.
We would need to install REACT NATIVE SKIA but then I wouldn't go into that as Shopify has done a great job making available the installation process available, you can simply use this link.

React Native Skia

The rendering engine of Google Chrome is powered by SKIA. It is advised that you keep in mind that SKIA powers anything you view on the Google Chrome browser. The fact that Flutter is based on SKIA also explains the previous advantage it had over React Native. React Native Skia allows for a number of previously impossible tasks to be completed by integrating the Skia library and all of its features with React Native.

Things You Can't Do With React Native

Before we talk about how revolutionary Skia would be in React Native, it seems important to point out a list of Advanced 2D use cases that cannot be accomplished on React Native.

Graphics Performance

2D graphic capabilities are a hole to feel and SKIA has a handful of solutions to offer. Graphics are one of the most tiring weaknesses in React native.

SVG and Inset Shadows on Android

Making certain apps where you get to render huge SVG's would result in bottle-necked performance. As a fan of neomorphic designs, I frequently come into difficulties with drop shadows on Android. This is a basic feature that has, for a considerable amount of time, gone unattended. On a competent smartphone, graphics can operate at a rate of five frames per second. Not the best you wish for.

Text Animation

This is a problem with React Native since there have been numerous projects and libraries created to address it, but their success and outcomes were hardly sustained because each one had its own solutions that didn't withstand the test of time.

What To Expect From The Skia Library

React native SKIA would provide us with these;-

Lower Number Of Required Lines Of Code

Here I will provide an example of how Skia would enable streamlined code. I think a good example of this will be charting. Take a look at how much code it requires to create in Skia (from examples in Shopify/React-native-Skia repo) and then take a look at the average animated linear chart library code. It is clearly streamlined.

High Performance

Both on Android and IOS, SKIA offers significantly superior performance, but it is more obvious on Android. Many programmers believe JavaScript to be slow, however React Native SKIA makes it seem considerably faster. It is anticipated that this will require extensive optimization to work flawlessly. Not to overwhelm us, but switching back to ordinary React-Native (without Skia) would be much more challenging; after all, who doesn't prefer an easy path?

Inset Shadow

With react native SKIA we can always inset shadows, it's amazing because it's not just a box-shadow implementation we get from this library, it's a general-purpose Integration we could use to create any high-performing graphics. In cases where you want to customize UI components with a bit of styling here and there and some primitive like shadows. Instead of doing all of this, you write a maximum of five lines of skia and you are out there.

Text Animation

Text animation is made easier as we get animation by default. This would allow us to build incredibly smooth 2D animations for React Native and also be able to use a React like API Declarative syntax.

Why Is This So Hyped?

I'll provide a very general explanation of why this is so hyped: with this integration, we'll be able to close the gap in the React Native framework.

React Native excels at interacting with UI elements, including complicated animation, but it struggles when dealing with arbitrary motion, such as drawing and rotating an Octagon, because it cannot be readily descended from a native UI element. This is where Skia comes into action. I only hope you understand that it gives you access to an engine like Web Canvas to handle situations like these.

Conclusion

I outlined a few issues that developers face in our previous sub-topic, as well as all of the potential remedies SKIA offers for us.
We were able to highlight what React Native could not do, and the Skia library for React-Native is a wonderful addition. We also went through the installation procedure. Special thanks goes out to Chris, Williams, and all the React Native developers; this is a significant development.

AUTHENTICATION WITH FAUNA

marvelken — Sat, 18 Sep 2021 10:48:01 +0000

Author;- Marvel Ken.

Introduction

Fauna is a general-purpose, distributed database supporting multiple data models and strong
global consistency for modern app developers in the server-less era. Fauna uses many
coding languages like JavaScript, Nordjs, Java, C#, Scala, Python, GraphQL.
Fauna provides authentication and authorization features that makes it easy to provide clients
with direct access to your database in a secure and controlled way. This tutorial shows you
how to use user authentication and control access to information with attribute-based access
control (ABAC).

User authentication

Fauna offers built-in identity, authentication, and password management. In user
Authentication, we will look at creating user identity, authenticating them, and managing
seasons. We will divide this part into sections: setting up, creating user, user login, user
logout, changing user password, checking user credentials, and third-party delegation.

SETTING UP

The setup section describes all the preparatory work needed for authenticating the user. They
include: creating a database, creating a server key, creating a client key, creating a collection
to store user documents, and creating a public index for users.
First you need to sign up for a free Fauna account.

Creating a databases

In user authentication, We need the context of a specific application. With this, we can create
an application-specific database and call it “APPA.” the following query will create our
database:
my_db>CreateDatabase({ name: "APPA" })

Creating a server key

In user authentication, We need the context of a specific application. With this, we can create
an application-specific database and call it “APPA.”
Our application is going to need access to our new database though We don’t need to permit
all databases. We create a “server” key that will full access to a specific database.
This query will create our server key:
my_db>CreateKey({ name: "Server key for APPA", database: Database("APPA"), role: "server", })
After you run the query, different values will be generated. The values need to be copied for

the secret field. This is the key that authorizes Fauna, Specifically the associated database.
Note that this key is only generated once if the lost new key needs to be developed.

Creating a client key

We need to allow applications, public clients, typically a web browser, to access our “APPA”
database and enable a key into the public client to permit the access. When creating a client
key, the following query is written in the shell. After running the query we need to copy the
security field results, since it is displayed once.
my_db>CreateKey({ name: "Client key for app1", database: Database("APPA"), role: "client", })

Creating a collection to store user documents.

After creating an App-specified database and keys to access it, we need to create a collection
to store user documents. We use our saved server key to log in to the database and then
create a collection to store user documents using the following query:
my_db> CreateCollection({ name: "users" })

Creating a public public index for our user

We need an index to make it possible to look at our user by their email address. We need this
index to be public, since unauthorized users would be using the client key when attempting to
log in, that's why we need the index. We create it using the following query:
my_db> CreateIndex({ name: "users_by_email", permissions: { read: "public"}, source: Collection("users"), terms: [{field: ["data", "email"]}], unique: true, }

USER LOGIN

When a user wants to log in, they need to provide their email and password. Then we use the
login function to authenticate their access, and if valid, give them a token that they can use to
access resources.
A token only provides access according to the privileges granted by an attribute-based
access control(ABAC) role. This differs from keys, which are used to offer a coarser
database_level_access. The following query calls Login on the result of looking up the user
via the users_by_email index, with the password that they provided:
my_db> Login( Match(Index("users_by_email"), "samson@site.example"), { password: "secret password" }, )

After you run the query, the following development will be displayed:

{ ref: Ref(Tokens(), "251407817091580416"), ts: 1576020028130000, instance: Ref(Collection("users"), "251407645221585408"), secret: 'fnEDfS4T34ACAAN9IwrU8aQA5SxTgyqYaUfiAqLqzQjQH9Qcr94'} If the user cannot be found, or if their credentials are invalid, an error would be returned: my_db> Login( Match(Index("users_by_email"), "samsam@not.a.member"), { password: "secret password" }, )

results:
[{ position: [], code: 'authentication failed', description: 'The document was not found or provided password was incorrect.' }]

USER LOG OUT

After you call Logout, All the tokens associated with the current session are invalidated,
effectively logging out the user. A new token would need to be created for any future access.
Logout takes a single parameter all_tokens. When all_tokens are true, all tokens associated
with the current user are invalidated, logging the user out completely. When all_tokens are
false, only the current token is invalidated; any other active tokens are still valid.
Only call Logout when connecting to Fauna with a token received from calling Login. In your
client application code, that query would look similar to this JavaScript code:
my_db> client.query(q.Logout(true))
When you execute this query, a response of true indicates that log out was successful, and
false indicates that log out failed.

CHANGING A USER PASSWORD

Changing a user’s password is done by calling the Update or Replace functions with a new
password in the credentials field. When a password is updated, any existing tokens remain
valid.
To change the user password, the following query can be used:

my_db> Update( Ref(Collection("users"), "251407945291585008"), { credentials: { password: "new password" }, } ) After changing password, we need to get a new token based on the new password, using the following query: my_db> Login( Match(Index("users_by_email"), "samson@site.example"), { password: "new password" }, )

CHECKING CREDENTIALS

Users can be verified without creating a token, and this is done by calling the identity function.
For example, we can test whether the old and new credentials for our user are valid using the
following query:
my_db>[ identity( Ref(Collection(“users”),”251423556667638838666”), “secret password”, ) identity( Ref(Collection(“users”),”251423567546676388386”), “new password”, ) ]
After running this query the result should be either true or false.

THIRD PARTY DELEGATION

Third-party delegation is the scenario where a third party uses our APIs to provide services to
our users.
Using the authentication features of Fauna, we can provide unique tokens for each third-party
client that allow the third party to access resources on behalf of our users, while providing a
way for the user to revoke the third-party client’s access.
First, we create an index that allows us to list all of a user’s tokens. Login allows us to attach
data to a token by adding extra fields. We’ll use this capability to identify our tokens with the
name of the third-party service that will use the tokens.
EXAMPLE:
my_db> CreateIndex({ name: "tokens_by_instance",

permissions: { read: "public" }, source: Tokens(), terms: [{ field: "instance" }], values: [{field: ["data", "name"]}] })
Now we can create a token for each third-party service that our user uses. And we can do it
all in a single query.
The following query can be used:
my_db> Map( [ "Desktop App", "Mobile App", "Web Service" ], Lambda( "service", Login( Match(Index("users_by_email"), "samson@site.example"), { password: "new password", data: { name: Var("service") } } )

Finally, in client application code, list all the currently logged-in user’s tokens by querying the
index that we built, when connecting to Fauna using the user’s token. The following code is
written in JavaScript:
my_db>client.query( q.Paginate( q.Match( q.Index("tokens_by_instance"), q.Select("instance", q.Identity()) ) ) ) ) .then((ret) => console.log(ret)) .catch((err) => console.log("Error:", err)) After executing this query in your client application code, after the user has logged in successfully, the output should be: { data: [ 'Desktop App', 'Mobile App', 'Web Service' ] }

Access to Information with Attribute-Based Access Control(ABAC).

Attribute-based access control (ABAC) is a flexible, fine-grained strategy for managing
identity-based operations within Fauna. ABAC extends the default Fauna authentication and
authorization mechanisms.

ABAC has a role-based access control (RBAC), where roles can define privileges that can be
dynamically determined based on any attribute of the actor attempting to access or modify
data, any attribute of the data to be accessed or modified, or contextual information available
during a transaction.
A role defines a set of privileges-specific actions that can be executed on specific resources
and membership-specific identities that should have the specified privileges.
This can be done in the following sections; privilege section, membership section, Predicate
functions, Overlapping roles.
Privilege section
Privilege specifies the resource in Fauna, where the resource could be a database, collection,
document, key, index, function.
I. The actions available vary according to the target resource: Core schemas
(Databases, Collections, Indexes, Functions, Keys): create and delete
II. Documents: create, read, write, delete, history_read, history_write
III. User-defined functions: call
examples:
mydb> CreateRole({ name: "access_todos", membership: [{ resource: Collection("users") }], privileges: [{ resource: Collection("todos"), actions: { create: true, delete: true, write: true } }] })
Membership section
Membership describes the set of documents that should have the role’s privileges.
Membership is managed with collection; documents in the collection are members of the role.
Typically, a "document" would refer to a "user", but a document can be any record within
Fauna.
Membership can also be controlled with a predicate function for dynamic membership
evaluation. Multiple roles can be associated with a Fauna resource, and users can be

associated with multiple roles. Attribute-based access is computed for every Fauna
transaction, and updates to the role configuration take effect immediately. Also, action
permissions can be computed dynamically via Lambda functions.
Example:
my_db>CreateRole({ name: "can_manage_todos", membership: [ { resource: Collection("users"), predicate: Query(Lambda(ref => Select(["data", "vip"], Get(ref)) )) } ], privileges: [ // ... ] })
Predicate functions
A predicate function is the FQL Lambda function that operates in a read-only fashion,
accepting command-specific arguments, and returning true or false to indicate whether the
action is permitted or prohibited. The actions and their associated arguments are:

-Create: the new data that is about to be created.
-Read, history_read, delete: the ref to the underlying document.
-Read for indexes: the terms being used to match against the index.
-Write, history_write: the old data, the new data, and a reference to the document to
be written.
-Call: the parameters to be passed to the user-defined function.
Example:

mydb> CreateRole({ name: "can_manage_todos", membership: [ // ... ], privileges: [ { resource: Collection("todos"), actions: { create: Query(Lambda(newData => Select(["data", "vip"], Get(Identity())) )), // ... } } ] }
Example role

mydb> CreateRole({ name: "users", membership: [ { // This role will be assigned to all users // as long as they are active resource: Collection("users"), predicate: Query(ref => Select(["data", "isActive"], Get(ref), false) ) } ], privileges: [ { resource: Collection("todos"), actions: { write: // The following function enforces that you can write to your // own data but, you can't change the owner of the data Query((oldData, newData) => And( Equals( Identity(), Select(["data", "owner"], oldData) ), Equals( Select(["data", "owner"], oldData), Select(["data", "owner"], newData), ) ) ) } } ] })

Overlapping roles.

When a document is a member of two or more roles, Fauna does its best to optimize for the
most common access pattern, to avoid evaluating roles especially predicates unnecessarily.
The general approach is that once permission to perform a specific action for a specific
resource has been granted, no further determinations for that resource+action need to be
performed the first granted access wins.

The table stores the resolution of permissions, keyed on the combination of resource identifier
and requested action, involved in the current query.
During role processing, if a resource+action permission evaluates to true, or can be trivially
determined to be true, the permission is granted and no further evaluations for that specific
resource+action are performed.

CONCLUSION

We have come to the end of our project. We covered all you need to know about
authentication with Fauna. The above tutorial exemplified how to use user authentication and
control access to information with attribute-based access control (ABAC).
Written in connection with the Write with Fauna Program.