DEV Community: Peter Andrew

Sorting Algorithm Theory VS Implementation 🧐 ?

Peter Andrew — Sun, 07 Jan 2024 14:44:19 +0000

Why Sorting?

I started learning Golang last week and to solidify my understanding of the syntax, I practiced using Leetcode. This led me to revisit the algorithms I learned in my university years, which I had long forgotten. The merge sort algorithm, in particular, sparked my interest and motivated me to learn more about sorting.

Here are the references for the sorting algorithm:

Bubble Sort, which had the time complexity of (n^2)
- more on bubble sort https://www.geeksforgeeks.org/bubble-sort/
Merge Sort, which had the time complexity of (n * log(n))
- more on merge sort https://www.geeksforgeeks.org/merge-sort/
Quick Sort, which had the time complexity of (n * log(n))
- more on quick sort https://www.geeksforgeeks.org/quick-sort/

Since people rarely use bubble sort due to its time complexity and perhaps because they prefer to use the built-in sort function, I wonder how inefficient it actually is . Thus to find out, I conducted a simple experiment.

Experiment

The experiment aims to track the time needed for the merge, bubble, quick, and built-in (sort.Ints) sorting function to sort the array. The whole experiment setup can be seen on my GitHub repo

peterchu999 / sorting-experiment

Comparison Between Sorting Algorithm (with Go)

My Post

Checkout my post on dev.to: https://dev.to/peterchu999/sorting-algorithm-theory-vs-implementation--40ga/

Thought

By theory bubble sort would had the n^2 complexity, and the rest (merge,quick,built-in sort func) would had n*log(n) complexity. here is the graph example :

but when I implemented all of the sorting algorithm in golang, here is the graph for 300 array length test:

Let see closely on the first 50 random array sorting benchmark. We could see up to ~25 array size, bubble sort perform better than merge and built-in sort. However, based on the theory it aren't suppose to be. Here os the graph comparison

Wierd isn't it ? but when we see the bigger picture the theory would align with the implementation. Let see the on 1000 array size

Running Workflow

./run-all.sh [n], change [n] with the number of max array size for benchmark

Running Python Visualization

pip install -r…

View on GitHub

This is how the time tracking works:

func TestSorting(sfc SortFunction, arr []int) int64 {
    scopedTestList := make([]int, len(arr)) 
    copy(scopedTestList, arr) // copy the unsorted array to avoid side effects on other test
    startTime := time.Now() // track start time
    sfc(scopedTestList) // call sorting function
    endTime := time.Now() // track end time
    return endTimeMerge.Sub(startTimeMerge).Nanoseconds() // test return startTime - endTime
}

And here is the test setup:

for i:=1; i < arrLen+1; i++ {
    testCase := GenerateUniqueRandomNumbers, 100) // generate i length of random numbers array
    mergeT := utils.TestSorting(MergeSortVoid, testCase)
    time.Sleep(time.Millisecond * 5) // incase computation degrade machine and make later case worst
    bubbleT := utils.TestSorting(BubbleSortVoid, testCase)
    time.Sleep(time.Millisecond * 5) // incase computation degrade machine and make later case worst
    quickT := utils.TestSorting(QuickSortVoid, testCase)
    time.Sleep(time.Millisecond * 5) // incase computation degrade machine and make later case worst
    biT :=  utils.TestSorting(sort.Ints, testCase)
}

loop until arrLen which was the maximum number of the array length.
for each iteration, generate a random number array with the length of the current iteration index (i)
for each iteration, tracked the time needed for each sorting function to sort the array

the gathered data from the experiment above were saved and visualized by using Python code. The visualization plot the time taken for each array length to be sorted.

Result

Interesting results are shown when using a small array length. Let's examine the visualized graph comparing the complexity of theoretical sorting algorithms with the actual implementation time.

Up to an array length of around 30, bubble sort, which was presumably deemed slower according to theory, was actually faster than the merge and built-in sort functions. It's quite surprising 🤯 !

However, when we look at the bigger picture, the theory and implementation align . Here is the visualization of the theoretical sort complexity versus the sort implementation time for an array length of 1000.

Conclusion

In the end, when the array size is small, the sorting operation takes a very short amount of time (just a few nanoseconds), so no one really notices the difference. What truly matters is that the n * log(n) sort algorithm (merge sort, quick sort) we learned performs significantly better on larger array size.

Please check out my code and feel free to experiment with it. If you find any flaws or errors, please create an issue on GitHub or leave a comment 💬 below!

I'm still unsure why bubble sort performs better on small datasets. My guess is that the operation to create a new array in merge sort takes longer than simply swapping values between indices. What do you think 🤔 ? Please share your thoughts and comments 🙌!

Acknowledgment

https://unsplash.com/photos/long-exposure-photography-of-road-and-cars-NqOInJ-ttqM (cover image)
https://geeksforgeeks.org/
https://blog.boot.dev/golang/quick-sort-golang/ (quick sort)
https://www.tutorialspoint.com/how-to-generate-a-array-of-unique-random-numbers-in-golang (generate random number array)

Creating Robust Front-End Validation using react-hooks-form 👑

Peter Andrew — Thu, 30 Mar 2023 08:50:44 +0000

Why Frontend validation ?

Sometimes I wonder why we bother to make validation on the frontend side when there is a bunch of it on the backend side 🤔. Reflecting on managing several frontend projects here is the key takeaway :

1. Saving Time and Resources

By doing front end validation we could reduce the time taken by network request. Moreover, we are also saving back end resources as we reduce the number of invalid requests from the front end.

2. Better User Experience

Frontend validation could improve the user experience by providing instant feedback when they make an error. This way user could correct their errors in real-time which increases their engagement with our application.

3. Increase security and data consistency

Backend validation wasn’t bullet proof, sometimes human error happen and we forgot some validation and our data become inconsistent (such as unusual email, or phone number format). Therefore, having the 2nd layer protection was definitely better than only one layer. Moreover, front end validation decrease security issue to some extends (such as SQL injection, XSS, etc).

Why use react-hooks-form ?

The reason was quite clear from the official website “Performant, flexible and extensible forms with easy-to-use validation. - react-hook-form.com” 🤩. personally, I used react hooks form because of:

Isolate re-render: optimizing react rendering could be overwhelming for beginner - intermediate developers. React hooks form helps to mitigate those issue in the form, it makes sure every field only render when they are being edited.
Consistent Validation Strategy: react hooks form provides a structured way of doing validation. Hence, every developer would use the same validation strategy.
Developer Experience: this library provides intuitive API that could be used seamlessly across React and React Native environments.

Built-in validation in react-hooks-form

Let's dive into the code. Assume that we want to create a form for pre-ordering sandwiches. Here's the basic code:

peterchu999 / hooks-validation-article

hooks-validation-article

Edit on StackBlitz ⚡️

View on GitHub

The code above is basic and not yet integrated with react-hook-form. To integrate, we need to install react-hook-form by running:

yarn add react-hook-form

Next, we need to call the useForm hook:

const {register, handleSubmit, formState: { errors } } = useForm()

useForm returns several functions, but for our demonstration, we will focus on the following essential ones:

register: this function binds our input data to useForm. We need to specify the input name in the register function, and optionally, we can pass validation rules.
handleSubmit: this function binds our form's submit behavior, it takes 2 functions as parameter:
- onSuccess: the callback function that receives all data from registered fields. This function is triggered only when the data passes validation.
- onError: the callback function that captures validation errors for all registered fields. This function is triggered only when validation fails.
formState.errors: this state contains the error messages from our fields' validation.

Now, register our fields with register function then bind our form onSubmit with handleSubmit:

<form onSubmit={handleSubmit(
          (data) => {
            console.log("successfully submit", data)
          },
          (error) => {
            console.log("some validation had failed", error)
          }
        )}
 >
...
<label>Name</label>
<input {...register("name")} />
...
<label>Email</label>
<input {...register("email")}/>
...
<label>Phone Number</label>
<input {...register("phone-number")}/>
...
<label>Sandwich Qty</label>
<input {...register("qty")}/>
...

So far, we have integrated the react-hook-form into our project 😎. For the final step in this section, let's set up field validation and display an error message when a field fails validation.

to add rules (validation) to the fields we could pass the RegisterConfiguration object as the 2nd parameter to the register function :

...
<div style={{ display: 'flex', width: '50%', flexDirection: 'column', }} >
    <div style={{ display: 'flex', flex: 1, justifyContent: 'space-between', }} > 
            <label>Name</label>
            <input {...register('name', 
            { 
              required: 'name is required', 
              minLength: {
              value: 3, 
              message: 'name should have minimum 3 characther'
            } 
            })} /> 
    </div> 
    {errors.name && <p style={{ color: 'red' }}>{errors.name.message}</p>} 
</div>
...

The code above indicates that the name field is required and must have a minimum of 3 characters. If the validation fails, an error message will appear stating that either name is required or name should have a minimum of 3 characters.

the validation rules quite vary, here is the list:

maxLength: validate the value of the field to have a maximum character length of x
minLength: validate the value of the field to have a minimum character length of x
max: validate the fields with number type to had max value of x
max: validate the fields with number type to had min value of x
pattern: validate the value of the field to match the Regex pattern
validate: validate the value of the field to pass the custom-made function

Here is the demonstration of validating email fields with custom made function to make sure it contains @dev.to value:

<input {...register('email', 
        { required: 'email fields are required', 
            validate: (value) => { 
                    if (!value.includes('@dev.to')) {
                             return 'need to use dev to email'; 
                    } return true; 
}, })} />

the latest code that implements build-in validation of react-hook-form could be found on build-in-validate branch

Robust validation in react-hooks-form

This method of creating validation using react-hook-form is concise and helps us organize our validation more efficiently 👀. However, there is a more robust approach to validation in react-hook-form that involves using resolvers (validation resolvers). Resolvers is an adapter that integrates react-hook-form with 3rd-party validation libraries such as class-validator, joi, zod, etc. By delegating the validation to these libraries, we can have a more robust validation in our apps 🔥.

Suppose we choose class-validator as our validation library. To install class-validator and resolver, run the following command:

yarn add @hookform/resolvers class-transformer class-validator

Then, create a class-validator schema:

export class SandwichPO {
  @MinLength(5)
  name: string;

  @IsEmail()
  email: string;

  @IsPhoneNumber()
  phoneNumber: string;

  @IsNumber()
  qty: string;
}

Using this schema, we can create resolvers and bind them to our useForm hooks:

const resolver = classValidatorResolver(SandwichPO);

...
const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({ resolver: resolver });
...

That's it! Everything is now aligned 🥳. Delegating our validation to a 3rd-party library makes our code more organized and robust 🤟.

latest code from resolver implementation could be found on resolver-implementation branch

Choosing validation library

When it comes to choosing a library, there are several factors that need to be considered. The rule of thumb that I follow is:

Experience

When selecting a validation library, it is best to choose one that you have used before. This will reduce the learning curve and make implementation easier.

Compatibility with the backend

Building backend services with JavaScript has become quite common nowadays. It would be ideal to use the same validation library on both the front-end and back end to ensure consistent validation using the same schema.

Library size

Keep in mind that the size of the validation library can increase the size of your app and cause longer download times for the user. Therefore, choose a library size that is appropriate for your needs.

Summary; TLDR

Front-end validation could improve user experience, increase security, save resources, and maintain data consistency. Therefore, it’s crucial to have a robust validation mechanism. react-hook-form could help us to standardize our validation strategy and it could even help us to integrate a 3rd-party validation library using the react-hook-form resolvers.

credits:

Photo by Antonio Borriello: https://www.pexels.com/photo/photo-of-macbook-air-on-a-table-next-to-house-plant-and-picture-frame-1297611/
Notion AI: https://www.notion.so/product/ai

Source:

Developer And Documentation

Peter Andrew — Sat, 01 Jan 2022 16:06:52 +0000

Hi there, Who doesn't like to write documentation as a developer 🖐. As a developer, code, tools and my application performance is the what matters to me, I always think documentation is only necessary at the large company as a part of obligation.

Underrated Documentation

Abandoning documentation is common for beginner developer for a various different reason, there is something in common when I discuss it with my peers. It happen because we:

Work on assignment project that will be dispose once our scoring done
Work on personal project which the sole contributor are us
Think our memory is good enough to remember everything

It's not only happen because of developer, sometimes company need to dispose all "unnecessary" task to shorten business delivery time, and think it can be work on after the business is "settled" (Which for most cases it will not happen 🙄).

While it's true we can still work on documentation at later time, but as a time go， it become unpaid developer debt.

Why Documentation Important ?

Here is my story that make me work on documentation even though I still don't like it 🤐.

I've been working on certain project for around 6 month, and recently we got a new developer, and i'm in charge to onboard them. At first, I can answer the basic questions like "What language did we use?", "What's our development stack" or "How to clone and run our project locally ?"

The problem arise when the new joiner ask me something specific "How is the data flow from A service to B service?" and "How we handle it from FE side, if specific case happen? ". Keep in mind that i'm not the only developer in this project and we have 0 documentation to be refer to. So I need to gather the whole team and we spent at least 1 week to just make sure every new joiner (and the old pals) understood our whole project data flow and architecture 😮‍💨.

Doesn't it better if we have documented everything and when there is someone new joining, we could just send them the document ? at worst we only need to sacrifice 1 person time to help the onboarding, rather than the whole team 😱.

So here is why documentation is important to me:

To centralize the knowledge of whole team
When i'm the only one working on feature A, it most likely the others teammate doesn't know the implementation detail. If in the near future they need to improve or refactor this A feature they need to ask me, to prevent this to happen i could just made a documentation that everyone can read.

To retain the project knowledge even if someone leaving
People came and go, but the knowledge must retain. Ever heard "don't touch the legacy code" ? yep, it happen because the one made it have left the organization. if there is a good documentation anyone can tweak or do improvement on the legacy code (or not legacy at all since we understood them 😏)

Feature improvement or bug fixing
As our project scale, we can't always remember on what we've done, once the bug occur we need to re-read all of our own code and try to make sense on what it done 😵‍💫. It's better if it's documented, even the others can work on it.

What to documented ?

There is a lot of documentation from Class, Flow, or even API documentation. but what should I make all of it ? the answer is actually depends on our situation 🤔. If you have any thought please leave it in discussion 🙏 cause it might help me and everyone who's struggling with this.

From my case this is what our team decide to documented:

API documentation (using swagger, but make it as detail as possible)
Architecture Documentation (How our service connected with each other, database connection and any 3rd party)
Activity Diagram (for each feature)
Additional Documentation (ranging from configuration needed to custom tools tutorial)

Conclusion

My story might not be the best, but the point is to encourage everyone to start the habit of documenting, even a Markdown documentation or documenting certain feature is great 🙌, at least we have a knowledge that we preserve for us and the others ✨.

It might seems to waste our time when we first write it, but it save time when someone need the knowledge, we could just send them over 😉.

Tracking in React Apps

Peter Andrew — Sat, 25 Dec 2021 11:30:38 +0000

Disclaimer

The code might not be a best practice, because it's based on personal experience.
Example has been simplified, so we could focus on the tracking code and tools
This post will not discuss or used any 3rd party implementation of specific tracking platform (crashlytics, data dog, sentry, mixpanel, etc)
The 3rdParty Mocked code might be different from real 3rdParty API

Notice

if you are interested in the application code more than the tracking implementation. Leave reaction to this post, I'll consider making another post to explain it.

Tracking

Nowadays, tracking user experience is a must for most application, by collecting the tracked data from user we can develop, fixing or improve our feature (especially UX).

Based on my experience tracking can be differ into 2 category :

product / marketing: this tracking goals is to keep track and evaluate marketing approaches (FB ads, google ads, instagram link, etc), and help product team to evaluate UX
error: this tracking purpose is to notify developer about the error that occur in production before customer making any complain.

Let's see the implementation in react code

Application and tracking statement

To implements tracking we need to at least having an application. I have create a base project at:

peterchu999 / react-tracking-impl

What is the app functionality ?

a news curation app that use newsapi
there is 2 tab Home and Top News
Each tab have refresh news functionality
Each news card linked to respective article website

What are we going to track ?

track every click on go to source button, we want to evaluate whether user usually go to tops news tab or not, so the Data expected looks like :

{
  eventName: 'click_go_to_source',
  page: 'Home / TopNews'
}

track every click on refresh feed button, we want to evaluate whether user click refresh feed button or not so the data expected looks like :

{
  eventName: 'refresh_feed',
  page: 'Home / TopNews'
}

track error when fetching data, we want to track every error occur when fetching data. Data expect to looks like :

{
  eventName: 'error_fetch',
  page: 'Home / TopNews',
  errorReason: stringify error object
}

Usual Tracking (Direct Approach)

Basically it's just calling 3rd party sdk / api for event tracking or logging on every click handler or error catch

In this code example we will use Mocked DataDog for our error tracking and MixPanel for our click tracking.

The code implementation can be seen in link.

Detail Code go through

Click Go To Source Track
every time the user click go to source this code will send over the data to mock MixPanel.

// ArticleCard.js
...
// line 7
const handleClick = () => {
  const eventName = "click_go_to_source";
  const unique_id = uuid();
  MixPanel.track(eventName, unique_id, {
    page,
  });
  ...
};
....

Click Refresh Feed Track
every time the user click refresh feed this code will send over the data to mock MixPanel.

// Home.js or TopNews.js
...
// line 26
const onRefreshClick = () => {
  const eventName = "refresh_feed";
  const unique_id = uuid();
  MixPanel.track(eventName, unique_id, {
    page,
  });
  ...
};
....

Fetch News error Track
every time our fetch to news from newsapi failed, this code will send over the fetch_error data to mock DDlog.

// Home.js or TopNews.js
...
// line 15
onError: (err) => {
  const eventName = "error_fetch";
  DDlog.error(eventName, {
    page,
    errorReason: JSON.stringify(err, null, 4),
  });
},
....

It seems everything to work fine 🤔, yep that's what i thought, until some changes was needed because of new feature or 3rd Party tracking platform commercial issue / fees.

Imagine that we already put 100+ tracker over 10 screens, then we need to :

change tracking platform, for example from MixPanel to Heap. we need to manually refactor all of our MixPanel tracking code 1-by-1 😵‍💫.
add additional tracking data since we have new login feature, now we want to track user data every too 🤯.

Gratefully, i encounter this problem when my tracker was still less than 20 😮‍💨. But there is a question pop up on my mind, do i need to change the code one-by-one every time there is commercial issue or new feature that affect current tracking ?

React Tracking

That's what lead me to react-tracking by NYT, a React specific tracking library. it helps to :

Centralize our tracking logic, yet compartmentalize tracking concerns to individual components
Give tracking data a scope

Let's see the code implementation link.

We create ReactTrackingInitializer HOC (High Order Component) to be our parent / root tracking wrapper.

const ReactTrackingInitializer = ({ children }) => {
  const { Track } = useTracking(
    {
      // this is where the initialize data put
      trackVersion: "1.0.0",
    },
    {
      dispatch: (trackedData) => {
        console.log("dispatchData", trackedData);  
    }
  );
  return <Track>{children}</Track>;
};

useTracking is a hooks version to implementing react-tracking which suitable for functional component, find out more on their docs if you still implementing class component.

useTracking takes 2 params:

initial data, means this data available for the rest of the child component.
is the options which consist of dispatch,dispatchOnMount,process, and fowardRef more detail check react-tracking

useTracking will return object with 3 properties:

trackEvent: a function to send data to be process at process, then dispatch.
getTrackingData: a function that return current initial data in our tracker.
Track: a HOC that wrapped a child component to give scope to it's initial data, process and dispatch logic. which later can be triggered using trackEvent

From the reference we can implements our 3rd Party logic at dispatch option. so it will looks like this :

...
dispatch: (trackedData) => {
  console.log("dispatchData", trackedData);
  const { eventName, ...restOfData } = trackedData.data;
  switch (trackedData.type) {
     case "product":
       const unique_id = uuid();
       MixPanel.track(eventName, unique_id, restOfData);
       break;
     case "error":
       DDlog.error(eventName, restOfData);
       break;
     default:
       break;
  }
},
...

It looks a lot like redux reducers. Now you might ask there must be a dispatch mechanism to like redux, where is it ? checkout the code at Home.js line 25 - 33

const { trackEvent, Track } = useTracking({
  data: { page: "HOME" },
});

const onRefreshClick = () => {
  trackEvent({ type: "product", data: { eventName: "refresh_feed" } });
  refetch();
};

the trackEvent will send over the data below to our dispatch function.

{ 
  type: "product", 
  data: { 
    eventName: "refresh_feed",
    page: "HOME"
  } 
  trackVersion: "1.0.0"
}

Wait, Where did trackVersion: "1.0.0" and page: "HOME" came from 🙄 ? react tracking perform a merge operation on data we sent and initial data provided. in this case :

data we send :

{ 
  type: "product", 
  data: { 
    eventName: "refresh_feed"
  } 
}

initial value on Home.js useTracking :

{ 
  data: { 
    page: "HOME"
  } 
}

initial value on ReactTrackingInitializer useTracking:

{
  trackVersion: "1.0.0"
}

We already utilize react-tracking 🎉🎉🎉, Just Note that:

there must be at least 1 component that wrapping with <Track></Track> at root level (prefer to wrap )
Initial value only available to child component if we wrapped them with <Track></Track>. that why we wrapped <ArticleCard> in Home.js line 57 - 63, so it get the initial value from Home.js useTracking, otherwise it will only have initial value of ReactTrackingInitializer.js.

Now back to the problem, let say we need to:

change MixPanel to Heap
add user data to every tracker, because we have new login feature

just see the difference between branch rtracking and rtracking-solution.

Changes need #1

peterchu999 posted on Dec 25, 2021

Changes need to solve the problem statement:

change MixPanel to Heap
add user data, because we have add login feature

View on GitHub

and compare it to the difference between branch direct and direct-solution`.

Changes Need -> Direct Solution #2

peterchu999 posted on Dec 25, 2021

Changes need to solve the problem statement:

change MixPanel to Heap add user data, because we have add login feature

View on GitHub

It will more work to be done when using 3rdParty Sdk / API directly, Imagine we have 10+ MixPanel tracker, it will cost a lot of time.

Conclusion

React Tracking Help us to centralize the tracking logic so if there are any changes needed we can just refactor our dispatch function.

Thanks for reading, leave any comment below 😊

Shout Out

nytimes / react-tracking

🎯 Declarative tracking for React apps.

Open Source: Declarative Tracking for React Apps | by Jeremy Gayed | NYT Open

Jeremy Gayed ・ Oct 1, 2018 ・
open.nytimes.com

My First Open Source Contribution

Peter Andrew — Mon, 06 Dec 2021 03:35:31 +0000

It's been a while after Hacktoberfest 2021 🤩, my very first hacktoberfest. I would like to share my story to motivate more people to start contributing to open source.

A Bit about Myself

I started to code around 2017 and my very first programming language was C (i barely remember the syntax now) for university assignment, then progressed into web development with PHP(Laravel), HTML, CSS, & Javascript. Since the pandemic, i had trying out various programming language and framework such as Java, Python, Swift, Typescript, React Native, Django, Nest JS, etc. Currently focus more on Javascript and Typescript as fullstack developer.

Open Source Encounter

Sometimes in 2019, senior of mine introduced the concept of open source where our code publicly available, could be contribute and use by developer around the world. A lot of programming language, framework, and tools are actually open source product such as Linux, Firefox, Android, PHP, etc. Contributing to open source can be a self satisfaction and enrich your CV as Developer.

First Open Source Experience

Based on idea above, I started to search open source project to contributed. Most of open source can be found at git repository services like Github, Gitlab, etc. Back in the day I think that we must contribute code to the main application / library to improve, bug fix or suggest new feature (It's untrue).

After a lot of searching on Github, Here was my problem:

I can't found any repository that suit my skill level, i try to find HTML, CSS , JS repository. The project is either too complex, undocumented or beyond my understanding.
I'm not used to git version control system, I only learn about clone, pull and push.

Then I gave up on the idea of contributing as a beginner. made self conclusion that only expert can contribute to the open source.

Hacktoberfest 2021

A newsletter from digital ocean about hacktoberfest coming to my email. Interested by the name I read and turns out hacktoberfest is one month event where developer could share, organize and contributing to open source project. check hacktoberfest website https://hacktoberfest.digitalocean.com/.

I sign up for the event out of eagerness what a mediocre developer like myself can do. Attend the opening meeting and got new insight of open source contribution:

You can contribute not only to the main code, but documentation and example code as well
Most of open source project have a contribution guide
You could check Issue tab to know what you can contribute
Some repository even need a translate contribution

What's make me more motivated is the hacktoberfest challenge. We need to made 4 Merge Request (term's for requesting our changes merge to repository) within October month, and we will receive t-shirts as swag or they will have a tree planted in our name.

Long story short I completed the challenge 🎉🎉🎉. I contribute 4 MR to Appwrite repository by creating an example on how to use the Appwrite SDK. Checkout Appwrite which can make your development easier and faster.

appwrite / appwrite

Secure Backend Server for Web, Mobile & Flutter Developers 🚀 AKA the 100% open-source Firebase alternative.

It's going to get cloudy! 🌩 ☂️ The Appwrite Cloud is coming soon! You can learn more about our upcoming hosted solution and signup for free credits at: https://appwrite.io/cloud

A complete backend solution for your [Flutter / Vue / Angular / React / iOS / Android / *ANY OTHER*] app

English | 简体中文

Announcing Appwrite 1.2 with GraphQL support! Learn what's new!

Appwrite is an end-to-end backend server for Web, Mobile, Native, or Backend apps packaged as a set of Docker microservices. Appwrite abstracts the complexity and repetitiveness required to build a modern backend API from scratch and allows you to build secure apps faster.

Using Appwrite, you can easily integrate your app with user authentication and multiple sign-in methods, a database for storing and querying users and team data, storage and file management, image manipulation, Cloud Functions, and more services.

Find out more at: https://appwrite.io

Table of Contents:

View on GitHub

Conclusion

Here is summarize of my learning throughout my open source journey :

For a beginner we can find open source community to help and guide us, rather than searching aimlessly alone.
try to find good first issue label in the issue. it usually required a very basic understanding on the repository
Join a contributing event like hacktoberfest to motivate ourself to make it to the end.
Read the contribution guide at the repository, it gave a lot of information about the project and the rules for contributing.
Some repository even have a group channel at discord or slack, join so we can communicate and learn with their team.
Contributing on repository with lot of star can be a pride, because the more star the repo have it means more developer use it.
[Hacktoberfest spesific] , always remember to check the hacktoberfest label on the repository or issue to make our contribution counted.

Contributing to open source is not an easy task, but it's not as hard as we think. we could read the hacktoberfest website which provide a video on step by step to create merge request.

Thanks for reading, kindly leave a comment 😗

App Center Build, Distribute Android "debug" buildType issue

Peter Andrew — Sun, 28 Nov 2021 21:28:49 +0000

If you have yet familiar with App Center Build we had discussed a bit in previous article, be sure to check it out:

Automate Build With App Center

Peter Andrew ・ Nov 22 '21 ・ 5 min read

#azure #devops #tutorial #productivity

The Issue 👀

It's been a while since I have been using App Center build and came across couple of issue, one that really hinder my work were a known issue where we can't automatically distribute a build from android "debug" buildType.

For more information read it from :

Option to sign and distribute debug builds to groups #844

androideveloper posted on Aug 08, 2019

When setting up branch configuration, I can't sign (and therefore distribute) debug build variants. It is a common practice to send debug builds for QA testing and this limitation is strange.

There a few alternatives: -Create a separate build type (debug1) and it will work (but why the limitation exists on debug word?) -Create a boilerplate post-build script that will distribute apks -Create release variant and sign with debug key. Release build variant builds a little longer (proguard enabled) and that affects our workflow.

Why the limitation exists? Why can't we just use debug variant as others?

View on GitHub

TL;DR: "debug" buildType is typically used for QA test. Because it still have code logging capability, that can help us to identify more precise causes of error. So if this are your purpose of using App Center, then the issue might become a problem.

Work Around 🔄

Based on some googling and the issue above, here is the possible work around :

create a new separate buildType (ex: appcenterDebug)
download the build (.apk) then re-upload it to App Center Distribute
create a post-build script to automate distribution.

All of the options need some hassle 😅. The easiest was obviously download and re-upload alternative, but then, it become less automation (the very first reason we use this tools).

In my case, a separate builtType make a ton of problem for managing credentials files and android permission. So it's not a suitable way out.

At the time, I work on the create a post-build script solution, since it's the best solution for my case.

Distribute Automation Using Post Build Script

For those who didn't know App Center Build Script, find out more at the documentation.

TL;DR: it's a custom bash script that run during certain build stages (post-clone, pre-build & post-build).

In this cases, we want to utilize the post-build script that run after the .apk was signed & created.

Disclaimer & Note

Admittedly, I am not good at bash script. The script below worked based on trial and error, if know the best practice or better version of the code, please leave a comment.

If you want to try the bash script locally, install appcenter cli by using npm i appcenter-cli -g.

Bash variable that start with ENV_ is Something that we defined in App Center Build environment variable, to load it check out this pre-build script.

Post Build Script

Here is the specific script that distribute our .apk to App Center Distribution.

APPCENTER_OUTPUT_DIRECTORY
Variable containing the path to .apk file. By default App Center have populate APPCENTER_OUTPUT_DIRECTORY, we just need to concat /[file-name].apk.

ENV_DISTRIBUTE_MESSAGE
Variable containing the distribution message.

ENV_APPCENTER_BUILD_TOKEN
Variable containing the App Center token. It is use to authorized App Center Cli. you could generate App Center token in App Center website over Settings > App API tokens > New API Token. Make sure you choose Full Access options when the generated API Token.

ENV_APP_NAME
Variable containing App Center App Name, it is used by App Center Cli to identify which project we are working on. the easiest way is by combining your [username]/[project name] in the example it was [werdnaretep99-gmail.com/App-Center-Testing-Android]

the other way, use App Center cli appcenter apps list command. it will list all of the apps name we possessed.

ENV_DISTRIBUTE_GROUP
Variable containing list of distribution group separated by comma(,), ex: 'Group 1, group 2, group n'.By default App Center already make 1 distribution group which is Collaborators. You could make a new group on App Center website over Distribute > Groups > Add New Group.

Notes
Bear in mind, you might want to remove line 1 - 7, from the github gist code (because it contains credential, plus it's more dynamic to set distribution group and release note on ENV). for every variable start with ENV_ must be place on App Center Environment Variable or your .env.

Additional Post Build Script (React Native)

If we are using react native, big chances our Android and iOS repository was not separated. Once we push our appcenter-post-build.sh script the build will run whether we build an Android project and iOS project. this will inevitably become a problem for iOS build. since there is no .apk and the ENV_APPCENTER_BUILD_TOKEN different across project.

We need to make an exception, so the distribution script doesn't run when we build iOS App. My current solution is checking if default Android Environment Variable available.

Trick to Set Default Distribution Group

We might want to set default distribution group to all group. it's a bother if we need to manually update our ENV_DISTRIBUTE_GROUP when we add new group. I found out a little tricks that work on my project (but i don't know if it's a best practice).

App Center Cli provide a way to get list of our distribution group using appcenter distribute groups list command. there is some parameters needed for the command above to work perfectly.

In the code example, we get the list of distribution group as json. We need to remapped the json into string with each elements separated by comma. I used jq a json library to extract the list.

After a lot of trial and error work perfectly 💪🤩.

checkout the code full version on github (several branches)

peterchu999 / appcenter-build-test

appcenter-connect

View on GitHub

Personal Thought

The post-script workaround might have pros and cons depending on our cases. For example we might want to use another distribution platform like Firebase - App Distribution, as long as the platform accommodate cli based distribution with could use post-script to distribute the build. on the contrary, if we want a simple solution (not recommended), give access and ask QA to download the build (.apk) from the App Center Build directly.

Thanks for reading, constructive comment will be really appreciated ❤️ ❤️ ❤️.

Automate Build With App Center

Peter Andrew — Mon, 22 Nov 2021 09:46:30 +0000

Disclaimer

This post was full of personal preferences, and i'm writing this based on my experience as hybrid mobile (React Native) developer.

Problem

As a mobile developer we are expected to build the apps artifacts (.apk/.ipa). Here was my problem when dealing with build/archiving apps artifacts:

As the code base grew larger, so does the build time. My current project took almost 15 mins for android and 35 mins for iOS.
When we are building the artifacts we can't change branch or run our code in simulator. Thus, (i assume) we can't code the new feature or fixing the issues while waiting for our build.
Building artifacts take a lot of computer resources (at least for iOS).

Those was my biggest problem aside from being noob to setup local environment to build the artifacts 🥲.

And App Center Build is the platform to mitigate those problem.

What's App Center Build ?

"The App Center Build is a service to helps you build Android, iOS, macOS, and UWP apps using a secure cloud infrastructure" - App Center.

Basically App Center Build is a way to build our artifacts on cloud, which solve our problem 🤩.

Advantages of using App Center Build (that i felt):

It's easy to use, just connect it to our repo and done (for some cases configuration might be needed).
It build based on branch, so no need to wait until the code merged to master.
App Center came with a distribution platform as well, which integrated really well with the App Center Build.
Build configuration can be cloned easily across branch.
it's free (with limitation though).

How to use App Center Build

Let's use step-by-step example to demonstrate the build process:

1. Create an App Center Account

Here is the link to the App Center Sign Up page click here.

[Optional] I have made a simple React Native Project.

this is a template React Native screen with additional feature to take ENV_TEXT key value from .env and show it in the screen. link to the repo forked it and get along with this example.

2. Create App Center Project

Create the App Center Project for both android and iOS version.

App Project Button:

iOS Build:

Android Build:

3. Connect for repository with the App Center Build!

Click the Build Tab:

Select the repo services, then follow the instruction. List of our repository will be shown. In this case i'll use this

After choosing repository, the App Center will look like this:

4. Setup Build Configuration

Actually, it's a bit impractical to say that we don't need to configure anything but if we just wanna try out it's do able.

From the picture above select the master branch row, and we'll see this:

click "Configure Build" and the Configuration sidebar will appear.

Actually all of the configuration name was already on point but here is some of differences when we build on local:

Build scripts: it shows what kind of build script that we have added in our repository. App Center Provide a way to run additional script command that corresponding to the build stages read here for more.
- Note that every time we push a new build script (let says currently we just have pre-build and want to add post build), we need to resave our configuration.
Build frequency: We can choose to build the apps manually by clicking "build", or build the apps from the branch every time we make a git push. Note that with automatic build, merged MR count as push and will be automatically build.

App Center Build also provide a way to store environment variable in the build configuration.

But the value of this environment variables is a bit different than .env file, it was meant to use in the build script. if we want to convert the App Center environment variable into .env, the repos appcenter-pre-build.sh file already provide the code to make a .env from the App Center environment variable that have start with ENV key.

For Signed with android, I usually do it manually in gradle. But if we want to upload .keystore file and provide the value from App Center Build Configuration this docs provide a great help.

As for the Signed with iOS build, we need to upload Provisioning Profile and Certificate. We could we find it ?

Provisioning Profile: Open Xcode, under `Signing & Capabilities Tab, there is the provisioning profile, click the "i" logo and popup will appear like the image below.

from the file like icon we could drag the provisioning file

Certificate File: Open KeyChain Access, find Apple Development Certificate, right click and export.

After the configuration was set, click save button on the bottom right.

5. Build the Apps

After we configured the build, there will be "build now" button click it and do other work's while waiting for the build done.

Once it's done, the "distribute" and "Download" button will appear.

Voilà that's it ✨✨✨

App Center Limitation

For the free tier:

There is maximal 4 hours build/month/user, means if the average of our apps build time is 20 mins, we can only build 12 times across project per month.
There is maximal 30 minutes build /build, if our iOS build takes longer than 30 minutes we'll get error ##[error]The operation was canceled., in this case we'll need to upgrade tier 💸.
There is only 1 (machine) concurrency to process our build, need to queue the build if we try to make 2 or more simultaneous build.

Paid tier :

There is maximal 60 minutes build times/build, if our iOS build takes longer than 60 minutes we'll get error ##[error]The operation was canceled., for this issue currently App Center doesn't support it means we need to find alternative 🚫

Advice

App Center is easy to use, even at the free tier we can still use it for hobby project (just remember to turn off automatic build after push). But if we really want to upgrade to paid tier which cost $40/month/concurrent, Then make an organization on App Center and pay the bill as organization so the people under the organization can get the unlimited build times benefit (just make everybody admin).

Thanks for reading, any critique, grammar correction, or comment will be appreciated 🙌

DEV Community: Peter Andrew

Sorting Algorithm Theory VS Implementation 🧐 ?

Why Sorting?

Experiment

peterchu999 / sorting-experiment

Comparison Between Sorting Algorithm (with Go)

My Post

Thought

Running Workflow

Running Python Visualization

Result

Conclusion

Acknowledgment

Creating Robust Front-End Validation using react-hooks-form 👑

Why Frontend validation ?

1. Saving Time and Resources

2. Better User Experience

3. Increase security and data consistency

Why use react-hooks-form ?

Built-in validation in react-hooks-form

peterchu999 / hooks-validation-article

hooks-validation-article

Robust validation in react-hooks-form

Choosing validation library

Experience

Compatibility with the backend

Library size

Summary; TLDR

Developer And Documentation

Underrated Documentation

Why Documentation Important ?

What to documented ?

Conclusion

Tracking in React Apps

Disclaimer

Notice

Tracking

Application and tracking statement

peterchu999 / react-tracking-impl

Usual Tracking (Direct Approach)

Detail Code go through

React Tracking

Changes need #1

Changes Need -> Direct Solution #2

Conclusion

Shout Out

nytimes / react-tracking

🎯 Declarative tracking for React apps.

Open Source: Declarative Tracking for React Apps | by Jeremy Gayed | NYT Open

Jeremy Gayed ・ Oct 1, 2018 ・ open.nytimes.com

My First Open Source Contribution

A Bit about Myself

Open Source Encounter

First Open Source Experience

Hacktoberfest 2021

appwrite / appwrite

Secure Backend Server for Web, Mobile & Flutter Developers 🚀 AKA the 100% open-source Firebase alternative.

Conclusion

App Center Build, Distribute Android "debug" buildType issue

Automate Build With App Center

Peter Andrew ・ Nov 22 '21 ・ 5 min read

The Issue 👀

Option to sign and distribute debug builds to groups #844

Work Around 🔄

Distribute Automation Using Post Build Script

Disclaimer & Note

Post Build Script

Additional Post Build Script (React Native)

Trick to Set Default Distribution Group

peterchu999 / appcenter-build-test

appcenter-connect

Personal Thought

Automate Build With App Center

Disclaimer

Problem

What's App Center Build ?

How to use App Center Build

1. Create an App Center Account

[Optional] I have made a simple React Native Project.

2. Create App Center Project

Jeremy Gayed ・ Oct 1, 2018 ・
open.nytimes.com