
![image-1](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+15+-+Image+3.jpg)

### Preface
This is the second to a two part article. Here is the [first part](https://ark-am.com/blog/Pathos) of the article.

### The REAL Article:
[ShouldertoCryOn](https://shouldertocryon.health/) is a mental health platform whose mission is to heal people’s mental health issues, allowing them to move onward with their lives and deal with their other pressing matters, such as financial stability, physical wellbeing, etcetera. The platform offers an online space where emotional support can take many forms. This includes professional psychotherapy, peer-to-peer interactions, group engagements and educational resources. These facilities act in unison to support the individual and thereby giving the individual the ability to be of service to their community; insert the infamous quote by French author, Alexandre Dumas, _“all for one and one for all”_.

Initially, the Co-founders, [Andalib Kibria](https://www.linkedin.com/in/andalibkibria/) and [Mushfeq Noor Afsar](https://www.linkedin.com/in/mushfeq-noor-afsar-285b8954/), wanted to create a “venting” app; an app where someone simply goes to unload their issues and in return consoles the other recipient of their issues. Mr. Kibria took this a step further and did an in-depth analysis into this concept. Through his discovery, he found not only was there a pressing need for such an app, but large institutions like Hospitals, Universities and Corporations also have a need for a platform that offers professional as well as peer-to-peer psychotherapy. This again took him into another deep dive where he realized that anonymity and access to succinct educational resources, also would have a profound influence on the healing process. Thus, the first version of ShouldertoCryOn’s dashboard layout was born (see below).

![image-2](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+15+-+Image+4.jpg)

_“Our aim and goal are for members of ShouldertoCryOn to be off the platform and not using it once their issues have been resolved. To the point where if we see a member who has not signed in over a 3-month period, then most likely we will refund the 3-months’ worth of subscription”_, a statement made by Mr. Kibria in regard to ShouldertoCryOn’s ultimate objective. Since the platform is still in development, the cost to become a member is $10 USD per month, plus the hourly rate for any professional therapists a member chooses to engage. This monthly subscription allows the individual to access the majority of the facilities, such as Find a Friend, Group Session, Courses and Go Anonymous. Therefore, the monthly subscription will most likely increase as the development progresses and the platform matures. Mr. Kibria emphasizes to see this monthly charge as an investment and not as a cost. _"A member is paying the monthly subscription to invest in themselves and relieve any suffering from matters they would otherwise face difficulty in settling on their own"_, said Mr. Kibria. The penultimate result is for the members to find peace and what they do afterwards is of their own volition. The [ShouldertoCryOn team](https://shouldertocryon.health/about) is approaching this charge rate **_'one step at a time'_**, and thereby unable to fully predict the future amount. The current expectation is $200 to $500 USD per month; a steep charge, but one that needs further evaluation.

![image-3](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+15+-+Image+5.jpg)

The team’s _'one step at a time'_ approach has been a tried and tested method, especially when finding a solution to a problem that has yet to be defined. The team, in this instance, is [Ark-am](https://www.linkedin.com/company/ark-am-2021/). They are the ones behind the development of the ShouldertoCryOn and currently busy working on their client’s, [Ike Ubasineke](https://www.linkedin.com/in/ike-ubasineke/)'s app, [Growdie](https://apps.apple.com/us/app/growdie/id6739519886). From the very beginning, Ark-am embarked to establish themselves on a solid foundation; what that foundation consists is entirely dependent on the circumstance. However, in order to build a solid foundation, one must, at bare minimum, _think_ ahead, thereby knowing what to plan and how to strategize for the foreseeable future. Ark-am does not _plan_ the next 10 steps but instead **_thinks_** of the 10 steps and then reevaluates the _9 steps_ again, and this is repeated at every taken step. By far this is not the most efficient, nor is it the most profitable, but it is hyper effective because the process is agile and the resources needed remain lean.

![image-4](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+15+-+Image+6.jpg)

Now that the article is drawing near to an end, Ark-am and the ShouldertoCryOn teams want to promise to the readers and their members a few things: they are here to help; they are not here to treat people like objects; they are not here to consider peoples’ wallets as a bank accounts; they are here to stay as long as feasible and as long as the members want their services. That being said, life is life and it can take many turns, especially ones that no one expects or foresees. Now with the introduction of Ai and all its capabilities, they have a long and tough road ahead. Therefore, the ShouldertoCryOn platform needs to be a compelling product at a competitive value. God willing, the road ahead of them is made easy through their hard work, well researched perseverance, and shared values.


A mental health platform that is designed to “heal”


![image-1](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+15+-+Image+1.jpg)

### Preface
This is the first of a two part article. Here is the [link](https://ark-am.com/blog/ShouldertoCryOn%20article) to the second part of the article.

### The Article:
Hello and peace be upon you. To you as the reader, the [second part](https://ark-am.com/blog/ShouldertoCryOn) of this article is what should have been published in the [International Business Times (IB Times)](https://www.ibtimes.com/), where with the use of Ai technology, [Pathos Communications](https://payonresultspr.com/) was going to curate an article that was professionally written, coherent in it’s narrative, well researched and fact checked, but most of all, an article that was meant to have a profound impact on the intended reader. Instead, [Ark-am LLC](https://www.linkedin.com/company/ark-am-2021/) received a suboptimal piece. One that contains no real work from a professional journalist and yielded Ark-am $5,000 USD in January of 2026. An article that might as well have been written by a 16-year-old English major but instead was written by an unknown Ai Agent; ask Andalib Kibria how he knows this to be a fact and not an accusation. Moreover, in Mr. Kibria’s humble opinion, Pathos’s endeavor to be "Pay on Results” media company is a blatant rip-off and a borderline scam.

![image-1b](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+15+-+Image+1b.jpg)

[Andalib Kibria](https://www.linkedin.com/in/andalibkibria/) is the Managing Director and a Full-Stack Developer at Ark-am, and due to the injustice mentioned above, he is now taking matters into his own hands and providing to you, as the reader, what was meant to be the true nature of the article. This is to showcase one; Mr. Kibria has writing skills, and two; reflect the nature of Pathos Communications and its CEO (Chief Executive Office), [Omar Hamdi](https://www.linkedin.com/in/omar-e-hamdi/). He sent an e-mail to Mr. Kibria (see screenshot below) that included a video of him explaining how Pathos is the “fastest growing startup media company” and even provided his phone number (917-279-7172); needless to say, the phone number rings to a stop without going to voicemail. Moreover, Mr. Hamdi's video ensured that Ark-am as a company can be confident in Pathos’s approach and deliver on their promise. The said promise was to portray a story that would have a meaningful impact and was true to its origins. Sadly, the end result was a mediocre piece that is barely worth the click, let alone another click of the share button ([see original article](https://www.ibtimes.com/shouldertocryon-building-thoughtful-space-human-connection-emotional-support-3795092)). After more than five weeks’ worth of e-mail exchanges later, Ark-am did not receive the “expert support” they were promised, nor were any of the changes made to the article that was requested by Mr. Kibria.

Ergo, enjoy the next few moments as you read the real article that was meant to be published on the IB Times and everyone at [Ark-am](https://ark-am.com/about) *hopes this brings you peace in knowing what was wronged is now somewhat made right. \
*Hope in itself is not a strategy, but rather a feeling of trust.

---

#### E-mail screenshot:
![image-2](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+15+-+Image+2.jpg)

---

#### The original article:
["ShouldertoCryOn: Building a Thoughtful Space for Human Connection and Emotional Support"](https://www.ibtimes.com/shouldertocryon-building-thoughtful-space-human-connection-emotional-support-3795092)

#### The real article:
[ShouldertoCryOn is designed to “heal” instead of fixating on the problem](https://ark-am.com/blog/ShouldertoCryOn)


The article Ark-am was promised


![image-1](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+14+-+Image+1.jpg)

## Preface
Before Ark-am was an official company, we took the initiative to begin using Wix ourselves. This was due to a threefold factor. First, we did not want to spend countless hours developing and tweaking a website that was ultimately going to be rendered useless. Second, we wanted to see how Wix and Squarespace competed in this new era of website development; needless to say, they did a wonderful job. Third and lastly, we did not have the technical expertise to build the site you see today, let alone a more advanced one that involves animation or complex logic.

Within hours, our website was drafted and within a day the site was live. This gave us a great opportunity to advertise our skillset and broadcast who we are as a company. Inevitably, the skillset was honed into what you see on our [Services](https://ark-am.com/services) page and our [About Us](https://ark-am.com/about) page was perfected to portray our character.

We thank you for taking the time to read this article and hope you get some useful information regarding Wix, because we have found them to be a great asset and highly recommend their products/services.

---

# What Is [Wix.com](https://www.wix.com/)?
Wix.com is a popular cloud-based website builder that allows users to create professional-looking websites without needing to code. Whether you're a small business owner, freelancer, or blogger, Wix offers an intuitive drag-and-drop interface, hundreds of customizable templates, and built-in SEO tools to help you launch and grow your online presence.

## Key Features of Wix in 2025
#### 1. **Drag-and-Drop Website Builder**
Wix’s visual editor makes it easy to build a website exactly the way you want. You can simply drag elements—like text, images, and videos—onto your page without touching a single line of code.

#### 2. **AI Website Design with Wix ADI**
Wix ADI (Artificial Design Intelligence) helps beginners by automatically generating a website based on a few simple questions. It’s fast, easy, and ideal if you want a site up and running in minutes.

#### 3. **Hundreds of Professional Templates**
From online stores to personal portfolios, Wix offers over 800 designer-made templates that are mobile-friendly and customizable to fit your brand.

#### 4. **Built-in SEO Tools**
Wix has improved its SEO capabilities dramatically over the years. The Wix SEO Wiz provides personalized SEO plans, helping you rank higher on Google and attract more visitors.

#### 5. **App Market Integration**
Add extra features to your site with apps from the Wix App Market. You’ll find tools for email marketing, appointment booking, social media, live chat, and more.

#### 6. **E-commerce Ready**
Selling online? Wix lets you build a full-featured online store with payment gateways, product pages, order tracking, and inventory management.

![image-2](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+14+-+Image+2.jpg)

## Is Wix Good for SEO?
Absolutely. Wix has significantly upgraded its SEO capabilities over the past few years. Here’s what you get:
- Customizable meta tags and URLs
- Automatic sitemaps
- Schema markup support
- Image optimization
- 301 redirects
- SSL encryption for security
- Integration with Google Search Console

Wix also offers educational tools and support to guide you through the process of optimizing your website for search engines.

![image-3](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+14+-+Image+3.jpg)

## Wix Pricing in April, 2025
Wix offers both free and premium plans. Here’s a quick breakdown:
- **Free Plan**: Great for testing the platform. Includes Wix branding and a Wix domain.
- **Combo Plan** (for personal use): ~$16/month – Removes Wix ads and includes a custom domain.
- **Unlimited Plan** (freelancers): ~$22/month – More storage and bandwidth.
- **Business & eCommerce Plans**: Starting at ~$27/month – Includes online payments and e-commerce tools.

Prices may vary by region and promotion, so be sure to check Wix’s website for the latest deals.

## Pros and Cons of Using Wix
**Pros:**
- User-friendly, even for beginners
- Fast website setup with Wix ADI
- Excellent template selection
- Built-in SEO and marketing tools
- Active customer support and community

**Cons:**
- Less flexibility for advanced developers
- Can get pricey as you add more features
- Migration to another platform can be difficult

![image-4](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+14+-+Image+4.jpg)

## Final Thoughts: Is Wix Right for You?
If you're looking for an easy and affordable way to build a beautiful website, **Wix.com is a solid choice in 2025**. It offers a balanced combination of design freedom, SEO tools, and e-commerce features—making it ideal for entrepreneurs, creatives, and small business owners alike.

Whether you're launching a blog, starting an online store, or showcasing your portfolio, Wix can help you get online quickly and professionally.

[Contact us](https://ark-am.com/contact) if you require a website or app that demands a higher degree in complexity or customization.


Using Wix to build your first website


![image-1](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+13+-+Image+1.jpg)

## Preface
Developing an iOS app involves several key steps, starting with setting up the development environment using Xcode on a Mac. Using Swift, Apple’s programming language, allows one can to write the app, while SwiftUI or UIKit can be chosen for building the User Interface (UI). Designing the app follows Apple's Human Interface Guidelines to ensure a clean, user-friendly, and a secure experience.

Once the environment has been established, the next step is to use the Xcode’s simulator and test the app on real devices. After debugging and optimization improvements, the app can be submitted to the App Store through the App Store Connect portal, where it undergoes a review process. Depending on the app's complexity, this can take several iterations of feedback reviews. However, once approved, the app will be available in the App Store within 24 hours.

Note: Developers are encouraged to maintain the app by releasing updates, fixing bugs, and improving features based on user feedback.

![image-2](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+13+-+Image+2.png)

### **The Ups and Downs of Developing an iOS App: A Developer's and Owner's Perspective**
Developing an iOS app is an exciting yet challenging journey, filled with moments of triumph and frustration. From both a **developer's** and an **owner's** perspective, the process involves various ups and downs. Below is a breakdown of the key positives and challenges faced in iOS app development.

---

# **Developer's Point of View**
### **The Ups**
✅ **User-Friendly Development Tools**
- Apple provides **Xcode**, an all-in-one development environment, making coding, debugging, and UI design more efficient.
- **Swift**, Apple’s programming language, is modern, fast, and relatively easy to learn.

✅ **SwiftUI & UIKit for UI Development**
- **SwiftUI** allows developers to create interfaces with less code and real-time previews.
- **UIKit** provides flexibility and is more established for complex apps.

✅ **Powerful Testing & Debugging Tools**
- Xcode’s **Simulator** helps test apps on different iOS devices without needing physical hardware.
- **Instruments** helps track performance, memory usage, and battery consumption.

✅ **Monetization & Growth Opportunities**
- The **App Store** provides direct access to millions of potential users worldwide.
- Developers can generate revenue through **in-app purchases, subscriptions, and ads**.

### **The Downs**
❌ **Strict App Store Guidelines**
- Apple’s review process is **rigorous** and can take days or weeks, with the risk of rejection due to minor issues.

❌ **High Development Costs**
- A **Mac** and an Apple Developer Program membership ($99/year) are required.
- Advanced features may require **third-party services or APIs**, adding to the costs.

❌ **Compatibility & Performance Optimization**
- Apps must work seamlessly on **multiple iPhone and iPad models**, requiring extensive testing.
- Apple updates iOS frequently, meaning developers must **update their apps regularly** to maintain compatibility.

❌ **Debugging & Unexpected Bugs**
- Real-world usage may reveal **crashes or performance issues** that weren’t detected in testing.
- Fixing bugs can be time-consuming, especially if the issue is with an Apple framework or third-party library.

![image-3](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+13+-+Image+3.png)

# **App Owner’s Perspective**
### **The Ups**
✅ **Brand Exposure & Market Reach**
- The App Store provides a **huge platform** to attract customers and build brand credibility.
- A well-designed app can differentiate a business from competitors.

✅ **Revenue Generation**
- Owners can monetize apps through **subscriptions, in-app purchases, or one-time sales**.
- Businesses can enhance customer engagement and loyalty, leading to increased sales.

✅ **Better Customer Engagement**
- Push notifications, chat features, and seamless UX help **increase customer retention**.
- Data analytics allow owners to understand user behavior and improve services.

✅ **Scalability & Future Opportunities**
- A successful app can lead to **new business opportunities, partnerships, and investments**.
- Future updates and expansions (e.g., adding new features or launching an Android version) can drive long-term growth.

### **The Downs**
❌ **High Initial Investment & Maintenance Costs**
- Developing a feature-rich app requires **significant financial and time investment**.
- Ongoing maintenance, bug fixes, and updates add to the long-term cost.

❌ **Marketing & User Acquisition Challenges**
- Even a great app needs a **marketing strategy** (SEO, ads, social media) to attract users.
- Competing in a crowded market requires strong **branding and unique features**.

❌ **User Expectations & Negative Reviews**
- Users expect **flawless performance**, and even minor issues can lead to bad reviews.
- Owners must be responsive to feedback, bug reports, and feature requests to maintain a good reputation.

❌ **App Store Policies & Revenue Cut**
- Apple takes a **30% commission** on in-app purchases, affecting overall profitability.
- Frequent **policy changes** can impact monetization strategies.

![image-4](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+13+-+Image+4.png)

# **Final Thoughts**
While iOS app development offers incredible opportunities for **developers and app owners**, it comes with its own set of challenges. **Developers** enjoy working with Apple’s advanced tools but must deal with strict guidelines and debugging hurdles. **Owners** benefit from brand growth and revenue potential but face marketing and financial challenges.

Despite the downs, **a well-planned and well-executed app can be a game-changer**, whether for a startup, a business, or an independent developer looking to make an impact in the tech world. 🚀


Building an iOS app


**The Air We Breathe: Why Purified Air is Essential for a Productive Workspace**

When it comes to setting up the ideal workspace, we often focus on the usual suspects: ergonomic chairs, organized desks, and the right tech. However, one aspect that is easily overlooked in most industries is the air quality. Clean, purified air in the workspace does not just contribute to a pleasant environment, it has tangible benefits on health, focus, and productivity. Here’s why investing in purified air devices or machinary can make a world of difference in your work life and how to make it part of your ideal workspace setup.

![image-3](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+12+-+Image+3.jpg)

### 1. The Benefits of Purified Air for Cognitive Function
Pollutants like dust, volatile organic compounds (VOCs), and allergens can make concentration difficult, leading to brain fog, headaches, and fatigue. This is especially true for people working long hours, where indoor air quality can start to have noticeable effects on productivity and focus.

**Key Benefits:**
- **Enhanced Focus**: Improved air quality has been linked to better cognitive performance. A study by Harvard found that employees working in spaces with purified air performed better on tests of mental clarity and problem-solving.
- **Reduced Fatigue**: Purified air reduces common irritants that can cause respiratory issues and fatigue, keeping energy levels high throughout the day.
- **Fewer Sick Days**: Cleaner air also means fewer chances for airborne pathogens and viruses to spread, which can lead to a healthier workplace overall.

### 2. How Indoor Pollutants Affect Health and Productivity
Indoor air quality can be up to five times more polluted than outdoor air, largely due to dust, mold, VOCs from building materials, and everyday pollutants from things like printers, carpets, and cleaning products. For a developer or any professional working long hours indoors, these pollutants can lead to health problems over time, including allergies, respiratory issues, and even long-term health risks.

**Common Pollutants:**
- **Dust and Allergens**: These microscopic particles build up quickly and contribute to allergies and respiratory discomfort.
- **VOCs**: Emitted by common office items like furniture, paint, and cleaning products, VOCs can trigger headaches and cause dizziness.
- **Mold Spores**: Mold is a frequent contaminant in damp areas or poorly ventilated spaces. Exposure to mold can cause respiratory issues and worsen allergies.

![image-2](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+12+-+Image+2.png)

### 3. Setting Up an Air Purified Workspace
The good news is that improving air quality doesn’t have to be a daunting task. Simple, consistent practices and some strategic tools can drastically improve air quality, creating a fresher and more comfortable work environment.

**Steps to Improve Air Quality:**
- **Invest in a Quality Air Purifier**: Look for a HEPA filter purifier, which removes up to 99.97% of airborne particles like dust, allergens and VOCs that are bigger than 0.3 microns. For optimal results, choose one that fits the square footage of your space and consider an activated carbon filter for extra protection against odors and chemicals.
- **Add Indoor Plants**: Certain plants, like spider plants, peace lilies, and snake plants, naturally filter air. They not only contribute to a cleaner environment but add a touch of greenery and calm to the workspace.
- **Ventilate Regularly**: Open windows or set up a fan for at least a few minutes a day to allow fresh air to circulate. Good ventilation reduces the buildup of pollutants, keeping indoor air healthier and fresher.

![image-1](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+12+-+Image+1.png)

### 4. Maintaining Air Quality for Lasting Benefits
After setting up a system for cleaner air, maintaining it is key to keeping your workspace fresh and healthy. Regularly cleaning your workspace and purifiers is essential to prevent allergens and dust from building up again.

**Maintenance Tips:**
- **Change Air Purifier Filters**: Follow the manufacturer’s recommendations on changing filters, usually every 3-6 months, to keep your purifier working effectively.
- **Dust and Vacuum Regularly**: Keep dust from settling on surfaces by wiping down your workspace weekly, and vacuum with a HEPA filter to trap small particles.
- **Check for Mold and Dampness**: If your workspace is prone to dampness, consider using a dehumidifier or regularly inspecting areas for mold growth.

**Natural Remedies:**
- **Essential Oils**: Essentials oils are a great source to purify the air. Most are only suitable for breathing in but some are digestible and recommended if one has bad breath or infected lungs. Different companies make different potency, so it is best to do some research to discover which companies are well known for their essential oil products.
- **Wash hands**: Just like during COVID times, washing your hands after coming into contact with foreign objects or other people is a good habit to practice. Hands transfer many microbes unseen to the eye but if ingested, can cause a world of pain. Washing them at the appropriate times significantly reduces that risk, but over washing can also cause harm to the skin.
- **Clear Nose and Tongue**: Just like the hands, having a clear airway is just as important. To keep things simple, blowing your nose frequently throughout the day and using a proper tongue scraper can keep your lungs from building mucus and relieving the body from infection. Using a proper tongure scraper, ones made from copper or steel, are best to remove the layer of fungus, such as candida.
- **Indoor Plants**: These types of plants are excellent way to clean the indoor air. Plants such as Peace Lily, Monstera Deliciosa, Areca Palm, and Samsevieria Laurentil are some of the few that not only purify the air, but also easy to maintain.

![image-4](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+12+-+Image+4.png)

### 5. Create a Breathing Zone for Focused Work
Position your air purifier near your desk or where you spend most of your time to create a "breathing zone" with maximum air purity. This way, the air you’re inhaling most directly is as clean as possible, reducing distractions and keeping you focused and refreshed.

![image-5](https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/%23Blogs/Blog+12+-+Image+5.png)

### Wrapping Up
For developers and office workers alike, purified air can make a real impact on daily productivity and well-being. Cleaner air promotes clearer thinking, higher energy levels, and better overall health. By investing in an air purifier, maintaining a consistent cleaning schedule, and using natural remedies, you’re setting up a workspace that supports not only your productivity but also your health in the long term. Clean air isn’t a luxury; it’s a foundational element of an ideal work environment.

Breathing easier while you work can have profound effects on productivity, health, and happiness. Small changes like investing in an air purifier or adding plants are simple yet powerful steps toward a workspace that supports your best self every day.


Purified air work environment


## How to Implement Stripe in Your Mobile Application: A Step-by-Step Guide
As mobile commerce continues to grow, integrating a reliable payment gateway like Stripe into your mobile application has become essential for businesses looking to provide a seamless transaction experience. This guide will walk you through the process of implementing Stripe in your mobile app, whether you're developing for iOS or Android. By following these steps, you'll be able to handle payments securely and efficiently, ensuring a smooth user experience.

### Why Choose Stripe?
Stripe is a popular payment gateway that offers a robust API, extensive documentation, and a host of features, including support for multiple payment methods, currencies, and advanced fraud prevention. Its ease of use and developer-friendly tools make it an ideal choice for integrating payments into mobile applications.

![image-1](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+11+-+Image+1.png)

## Prerequisites
Before diving into the implementation, ensure you have the following:

1. **A Stripe Account**: Sign up at [Stripe](https://stripe.com).
2. **API Keys**: Obtain your API keys (publishable and secret) from the Stripe Dashboard.
3. **Mobile Development Setup**: Familiarize yourself with the development environment for your target platform (iOS or Android).
4. **Backend Server**: To securely handle sensitive information, like payment tokens, you need a backend server.

## Step 1: Install the Stripe SDK
#### For iOS
1. **CocoaPods**: Add the Stripe SDK to your `Podfile`:
   ```
   //ruby
   pod 'Stripe'
   ```
2. Run `pod install` to install the SDK.

#### For Android
1. **Gradle**: Add the Stripe dependency to your `build.gradle` file:
   ```
   //gradle
   implementation 'com.stripe:stripe-android:20.5.0'
   ```
2. Sync your project with Gradle files.

## Step 2: Configure Your App with Stripe API Keys
You'll need to configure your mobile app with the Stripe publishable key. This key is used to create payment tokens on the client side.

### iOS
In your `AppDelegate` file, initialize the Stripe SDK:

```
//swift
import Stripe

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    StripeAPI.defaultPublishableKey = "your_publishable_key"
    return true
}
```

### Android
In your `MainActivity` or Application class, initialize the Stripe SDK:

```
//java
PaymentConfiguration.init(
    getApplicationContext(),
    "your_publishable_key"
);
```

## Step 3: Create a Payment Intent on the Backend
The next step is to create a payment intent on your server. This involves generating a unique client secret that will be used to complete the payment. Here’s a basic example in Node.js:

```
//javascript
const stripe = require('stripe')('your_secret_key');

app.post('/create-payment-intent', async (req, res) => {
    const paymentIntent = await stripe.paymentIntents.create({
        amount: 1000, // Amount in cents
        currency: 'usd',
    });
    res.send({
        clientSecret: paymentIntent.client_secret,
    });
});
```

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+11+-+Image+2.png)

## Step 4: Collect Payment Information in the App
### iOS
Use `STPPaymentContext` to handle payment information:

```
//swift
let paymentContext = STPPaymentContext(apiAdapter: MyAPIAdapter())
paymentContext.paymentAmount = 1000 // Amount in cents
paymentContext.hostViewController = self
paymentContext.requestPayment()
```

### Android
Use the `PaymentSheet` to collect payment information:

```
//java
PaymentSheet paymentSheet = new PaymentSheet(this, paymentSheetResult -> {
    if (paymentSheetResult instanceof PaymentSheetResult.Completed) {
        // Payment complete
    }
});

// Present payment sheet
paymentSheet.presentWithPaymentIntent(
    "your_client_secret",
    new PaymentSheet.Configuration("Example, Inc.")
);
```

## Step 5: Confirm the Payment
Once the user provides their payment details, use the client secret obtained from your server to confirm the payment.

### iOS
```
//swift
let paymentIntentParams = STPPaymentIntentParams(clientSecret: "your_client_secret")
STPPaymentHandler.shared().confirmPayment(paymentIntentParams, with: self)
```

### Android
```
//java
ConfirmPaymentIntentParams params = ConfirmPaymentIntentParams.createWithPaymentMethodId(
    paymentMethodId,
    clientSecret
);
stripe.confirmPayment(this, params);
```

## Step 6: Handle Payment Status
Finally, handle the payment status on the client side to update the user on whether the payment was successful, failed, or requires further action.

### iOS
```
//swift
func paymentHandler(_ handler: STPPaymentHandler, didSucceedPaymentWith paymentIntent: STPPaymentIntent, completion: @escaping (STPPaymentHandlerActionStatus) -> Void) {
    // Payment succeeded
}

func paymentHandler(_ handler: STPPaymentHandler, didFailToAuthorizePaymentWith error: Error, completion: @escaping (STPPaymentHandlerActionStatus) -> Void) {
    // Payment failed
}
```

### Android
```
//java
@Override
public void onPaymentResult(@NonNull PaymentSheetResult paymentSheetResult) {
    if (paymentSheetResult instanceof PaymentSheetResult.Completed) {
        // Payment succeeded
    } else {
        // Payment failed or canceled
    }
}
```

![image-3](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+11+-+Image+3.png)

## Final Thoughts
Implementing Stripe in your mobile application provides a secure and reliable way to handle payments. By following the steps outlined in this guide, you'll be well on your way to integrating Stripe and offering your users a seamless checkout experience.

For further information, visit the [Stripe Documentation](https://stripe.com/docs/mobile) and customize the implementation as per your app's requirements.

#### Keywords: Stripe integration, mobile payments, iOS payments, Android payments, Stripe SDK, payment gateway, mobile app development, secure payments.


How to implement stripe in your mobile application

In today's fast-paced digital world, real-time communication is more crucial than ever. Whether it's for chat applications, live sports updates, or collaborative tools, instant data transfer can significantly enhance user experience. One of the key technologies enabling real-time communication on the web are WebSockets. In this blog post, we'll delve into WebSocket.io, a popular JavaScript library that simplifies WebSocket implementation, making it easier for developers to create real-time web applications.


<div style="position: relative; display: inline-block; width: 100%;">
  <img src="https://ark-am.s3.us-east-1.amazonaws.com/Arkam_website_images/Signature+Initials%2C+Devin+black.png" alt="image-1" style="width: 100%; border-radius: 1rem;" />
  <div style="position: absolute; top: 85%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 1.5rem; font-weight: 900; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,0.7);">
    Devin Perry
  </div>
</div>

# What is WebSocket.io?
WebSocket.io is a library that facilitates WebSocket connections in a Node.js environment. It builds on the WebSocket protocol, which provides a full-duplex communication channel over a single TCP connection, allowing for bidirectional data transfer between the client and the server. Unlike traditional HTTP requests, WebSockets enable continuous data exchange, reducing latency and improving efficiency.

WebSocket.io abstracts the complexities of WebSocket programming, offering a straightforward API that handles connection management, message routing, and error handling. It integrates seamlessly with Node.js, making it a popular choice for developers looking to implement real-time chat features in their applications.

##
# Why use WebSocket.io?
### 1. Simplified API
WebSocket.io provides a high-level API that simplifies the creation and management of WebSocket connections. Developers can focus on building features rather than dealing with the intricacies of the WebSocket protocol.

### 2. Real-Time Communication
With WebSocket.io, developers can easily implement real-time features such as live chat, notifications, and collaborative tools. This real-time capability can greatly enhance user engagement and experience.

### 3. Scalability
WebSocket.io is built on Node.js, known for its scalability and performance. It can handle a large number of concurrent connections, making it suitable for applications that require real-time data transfer at scale.

### 4. Flexibility
WebSocket.io is flexible and can be integrated with various frameworks and libraries. It also supports namespaces and rooms, allowing developers to organize their code and manage connections more efficiently.

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+10+-+Image+2.jpg)

##
# Getting Started
To get started with WebSocket.io, you'll need to have Node.js installed on your machine. If you haven't already, you can download and install Node.js from [nodejs.org](https://nodejs.org/).

### Installation
Once you have Node.js installed, you can install WebSocket.io via npm, the Node.js package manager. Open your **terminal** and run the following command:

```
npm install websocket.io
```

### Creating a Simple WebSocket SERVER
Let's start by creating a simple WebSocket server using WebSocket.io. Create a new file named **server.js** and add the following code:

```
const WebSocket = require('websocket.io');
const server = WebSocket.listen(3000, () => {
  console.log('WebSocket server listening on port 3000');
});

server.on('connection', (socket) => {
  console.log('New client connected');

  socket.on('message', (message) => {
    console.log('Received message:', message);
    socket.send('Hello from server');
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });
});
```

In this code, we create a WebSocket server that listens on port 3000. When a client connects, we log a message to the console. We also listen for incoming messages from the client and respond with a greeting message. Finally, we handle the disconnection event by logging a message to the console.

### Creating a Simple WebSocket CLIENT
Next, let's create a simple WebSocket client to connect to our server. Create a new file named **client.html** and add the following code:

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Client</title>
</head>
<body>
  <h1>WebSocket Client</h1>
  <script>
    const socket = new WebSocket('ws://localhost:3000');

    socket.onopen = () => {
      console.log('Connected to server');
      socket.send('Hello from client');
    };

    socket.onmessage = (event) => {
      console.log('Received message:', event.data);
    };

    socket.onclose = () => {
      console.log('Disconnected from server');
    };
  </script>
</body>
</html>
```

In this code, we create a WebSocket connection to our server running on **/localhost:3000**. When the connection is established, we send a message to the server. We also listen for messages from the server and handle the disconnection event by logging messages to the console.

### Running the Server and Client
To run the WebSocket server, open your terminal and execute the following command:

```
node server.js
```

Next, open **client.html** in a web browser. You should see messages being logged to the console, indicating that the client and server are communicating via WebSockets.

![image-3](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+10+-+Image+3.jpg)

##
# Advanced Features of WebSocket.io
WebSocket.io offers several advanced features that can help you build more sophisticated real-time applications. Let's explore some of these features.

### Namespaces
Namespaces allow you to create separate communication channels within a single WebSocket connection. This can be useful for organizing your code and managing different types of messages.

Here's an example of how to use namespaces in WebSocket.io:

```
const WebSocket = require('websocket.io');
const server = WebSocket.listen(3000, () => {
  console.log('WebSocket server listening on port 3000');
});

const chat = server.of('/chat');
const news = server.of('/news');

chat.on('connection', (socket) => {
  console.log('New client connected to chat namespace');

  socket.on('message', (message) => {
    console.log('Received message in chat namespace:', message);
    socket.send('Hello from chat namespace');
  });

  socket.on('close', () => {
    console.log('Client disconnected from chat namespace');
  });
});

news.on('connection', (socket) => {
  console.log('New client connected to news namespace');

  socket.on('message', (message) => {
    console.log('Received message in news namespace:', message);
    socket.send('Hello from news namespace');
  });

  socket.on('close', () => {
    console.log('Client disconnected from news namespace');
  });
});
```

In this example, we create two namespaces: /chat and /news. Clients can connect to these namespaces separately, and messages are handled independently within each namespace.

### Rooms
Rooms allow you to group clients within a namespace. This can be useful for creating chat rooms or broadcasting messages to specific groups of clients.

Here's an example of how to use rooms in WebSocket.io:

```
const WebSocket = require('websocket.io');
const server = WebSocket.listen(3000, () => {
  console.log('WebSocket server listening on port 3000');
});

const chat = server.of('/chat');

chat.on('connection', (socket) => {
  console.log('New client connected to chat namespace');

  socket.on('joinRoom', (room) => {
    socket.join(room);
    console.log(`Client joined room: ${room}`);
    socket.send(`You have joined room: ${room}`);
  });

  socket.on('leaveRoom', (room) => {
    socket.leave(room);
    console.log(`Client left room: ${room}`);
    socket.send(`You have left room: ${room}`);
  });

  socket.on('message', (message) => {
    console.log('Received message in chat namespace:', message);
    chat.to(message.room).send(message.text);
  });

  socket.on('close', () => {
    console.log('Client disconnected from chat namespace');
  });
});
```

In this example, clients can join and leave rooms within the **/chat** namespace. Messages sent by clients are broadcast to all other clients in the same room.

### Broadcasting
WebSocket.io allows you to broadcast messages to all connected clients or to specific rooms. This can be useful for sending notifications or updates to multiple clients simultaneously.

Here's an example of how to broadcast messages in WebSocket.io:

```
const WebSocket = require('websocket.io');
const server = WebSocket.listen(3000, () => {
  console.log('WebSocket server listening on port 3000');
});

server.on('connection', (socket) => {
  console.log('New client connected');

  socket.on('message', (message) => {
    console.log('Received message:', message);
    server.clients.forEach((client) => {
      if (client !== socket && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  socket.on('close', () => {
    console.log('Client disconnected');
  });
});
```

In this example, messages received from a client are broadcast to all other connected clients.

![image-4](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+10+-+Image+4.jpg)

##
# Error Handling and Debugging
Effective error handling and debugging are crucial for building robust real-time applications. WebSocket.io provides several mechanisms to help you manage errors and debug your applications.

### Error Handling
You can handle errors by listening for the **error** event on the WebSocket server and client:

```
const WebSocket = require('websocket.io');
const server = WebSocket.listen(3000, () => {
  console.log('WebSocket server listening on port 3000');
});

server.on('error', (error) => {
  console.error('WebSocket server error:', error);
});

server.on('connection', (socket) => {
  socket.on('error', (error) => {
    console.error('WebSocket client error:', error);
  });
});
```
In this example, we listen for the **error** event on both the server and the client, logging any errors to the console.

### Debugging
WebSocket.io provides a built-in debugging mechanism that can be enabled by setting the **DEBUG** environment variable. This can help you track down issues and understand the flow of messages in your application.

To enable debugging, set the **DEBUG** environment variable to **websocket.io**:

```
DEBUG=websocket.io node server.js
```

This will enable debug output for WebSocket.io, providing detailed logs of connections, messages, and events.

![image-5](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+10+-+Image+5.jpg)

##
# Best Practices for WebSocket.io
To make the most of WebSocket.io, consider the following best practices:
1. **Use Secure WebSockets (WSS):** For production applications, always use secure WebSocket connections (wss://) to protect data transmitted between the client and the server.

2. **Implement Authentication:** Implement authentication mechanisms to ensure that only authorized clients can connect to your WebSocket server. This can help prevent unauthorized access and improve security.

3. **Handle Connection Loss:** Implement mechanisms to handle connection loss and reconnection attempts. This can help maintain a seamless user experience even in the event of network issues.

4. **Optimize Performance:** Optimize your WebSocket server for performance by minimizing message size, reducing the frequency of messages, and efficiently managing connections.

5. **Monitor and Log:** Monitor your WebSocket server and log important events, such as connection attempts, errors, and disconnections. This can help you identify and address issues more quickly.

![image-6](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+10+-+Image+6.jpg)

##
# Conclusion
WebSocket.io is a powerful and flexible library that makes it easy to implement real-time communication in your web applications. By leveraging its simplified API, advanced features, and best practices, you can create robust and scalable real-time applications that enhance user experience.
Whether you're building a chat application, a live sports update system, or a collaborative tool, WebSocket.io provides the tools you need to get started and succeed. Embrace the power of real-time communication and unlock new possibilities for your web applications with WebSocket.io.

An In-Depth Guide to WebSocket.io: Real-Time Communication Made Easy


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+09+-+Image+1.jpg)

Koa.js is a backend framework for Node.js. It is used for developing backend servers. You can learn more about this in one of our [previous blogs](https://ark-am.com/blog/koa-js).

In this article, we will learn the step-by-step guide on how to implement the different HTTP endpoints via the Koa.js framework. However, before going further, you will need to know the fundamentals in [Node.js](https://nodejs.org/en) and [Npm packages](https://www.npmjs.com/).

##
# Setting Up Koa.js
#### Step 1 - Initialize Koa.js
First, you will need to initialize our project with Koa.js. In order to do that make sure you have the [latest version](https://nodejs.org/en/download) of Node.js installed in your system.

#### Step 2 - Create a Folder
Create a folder with the name of your project. Inside that folder, create a "package.json" file with the following content:

```
{
  "name": "koa-http",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "koa": "^2.15.2"
  }
}
```

Now, in the same project folder, create a "index.js" file containing the following code:

```
const Koa = require('koa')
const app = new Koa()

app.use(async (ctx) => {
  ctx.body = 'Welcome to Ark-am tutorial!'
})

app.listen(3000)
```

Now it is time to install the dependencies for that type npm install from the terminal. Make sure you are in the same folder via your terminal where your package.json file is located; cmd or bash or zsh. Type "npm start" in the terminal, where the directory is still in the project folder.

#### Step 3 - NPM Install
Install the dependencies for that type of **/npm install** from the terminal. Make sure to be in the same folder within the terminal where your package.json file is located.

Now type **"npm start"** from your terminal. This should give you the output on your browser at the following URL: [http://localhost:3000](http://localhost:3000). The output should be the Hello World text, which indicated you have successfully installed the Koa.js package in your system.

```
Hello World!
```

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+09+-+Image+2.jpg)

##
# Implementation of HTTP Methods
#### Step 4 - GET, POST, PUT & DELETE
Now we are going to add GET, POST, PUT & DELETE endpoints via the koa-router. It is the router middleware for Koa. Insert the following code in the index.js file.

```
const Koa = require('koa')
const Router = require('koa-router')
const bodyParser = require('koa-bodyparser')

const app = new Koa()
app.use(bodyParser())
const router = new Router()

// GET method
router.get('/api', async (ctx) => {
  ctx.body = 'GET request received successfully.'
})

// POST method
router.post('/api', async (ctx) => {
  ctx.body = 'POST request received successfully.'
})

// PUT method
router.put('/api/:id', async (ctx) => {
  const { id } = ctx.params
  const requestBody = ctx.request.body
  ctx.body = {
    message: `PUT request received for resource with id ${id}`,
    requestBody: requestBody,
  }
})

// DELETE method
router.delete('/api/:id', async (ctx) => {
  const { id } = ctx.params
  ctx.body = `DELETE request received for resource with id ${id}`
})

app.use(router.routes())
app.use(router.allowedMethods())

app.use(async (ctx) => {
  ctx.body = 'Welcome to Ark-am tutorial!'
})

app.listen(3000)
```

#### Step 5 - Testing HTTP Methods
#### GET
To test the GET method, go to your locahost URL, [http://localhost:3000](http://localhost:3000), in order to receive the following response:

```
GET request received
```

#### POST
To test the POST method, we can use [Postman](https://www.postman.com/). We can create a new HTTP post method like this one.

![image-3](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+09+-+POST.png)

#### PUT
The PUT method is used to update any specific resource at the server. We can test this on [Postman](https://www.postman.com/) as well. Here we are giving the ID of 234 at the URL, but any numerical ID can be used, and applying some basic data on the body to update. See image below.

![image-4](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+09+-+PUT.png)

#### DELETE
We use this method to delete something from the server. In order to delete, we need to pass the associated ID. However, no data from the body is required, such as the above PUT request.

![image-5](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+09+-+DELETE.png)

##
# Summary
From this blog, we discussed the 4 most important methods that are frequently used day-to-day. There are more methods, however those can be similarly implemented. If you struggling to understand and/or utilize this method, feel free to [contact us](https://ark-am.com/contact).

Thank you and happy learning.


HTTP Method: Implementation with Koa.js


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+08+-+Image+1.jpg)

Stripe is a payment bridge between clients and businesses. Through the bridge clients can pay to the business online. It also helps the business to accept payment in various methods. Stripe can act like an accountant for the business which can handle all the transaction processings behind the scene. For these things stripe takes a small charge on each transaction.

Stripe accepts various payment methods like Credit and debit cards, bank transfer or digital wallets like Apple pay or Google pay.

##
# Why should we use stripe payment?
Doesn’t matter if you have a small business or a large stripe is always a good option for you. Stripe gives a smooth payment processing experience for business and customers alike. It provides many ways of integration methods for various platforms. There are some key reasons why you should choose stripe payment for your business.

## Easy Integration with online business
Doesn’t matter if your business is a website or mobile app, stripe provides an easy way of integration for it.
If it's a website it doesn't matter if you are using a coding solution or no code solution, Stripe can handle both situations very easily to integrate with it. For custom sites Stripe provides API for their services to integrate easily from various programming languages like Node.js, PHP and many more.

## Secure payment and fraud detection
Unauthorized access is not possible at all for stripe payment. While setting up stripes for each business, the owner can take various configuration settings so that the fraud can be prevented during unusual activity. Also robust stripe security takes care of many burdens from business owners so that the business can focus on their own works, and be worry free for security and frauds.

## Easy way to get business money directly at bank
After the customer purchases something via the Stripe. Business owners can directly transfer money to their bank account. This is a very easy step.

This process also can be automated. There is no need to do a manual deposit to the bank account. The stripe system can take the burden out for processing delays & send your money where it needs to be.

## Reach global customers easily
If you want to expand your business from domestic to international then Stripe is a very good choice. Because Stripe can support multiple currencies worldwide with international cards.

For example, the platform like ShouldertoCryOn initially started for the USA only but when eventually it will hopefully by the will of Allah reach global clients, it can easily get the smallest payment possible via Stripe.

## Payment analytics
If you want to keep track of your business, then Stripe is a ready to go solution. Because it allows users to gain insights for their incoming transactions.

If someone needs to keep track separately then it's a complicated and error prone task. But by using the Stripe solution it is possible to save some time.

![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+08+-+Image+2.png)

##
# Stripe safety
Where there comes the financial matter, the first matter that can come in someone's mind is how is the security there? Certainly, Stripe is very good at maintaining its security. Both the business owner and the end user can trust Stripe without any hesitation.

There are many security measures that are taken by Stripe. Some of them are known and some are maybe only known by the Stripe internal team. Some of the public available informations are discussed below.

## Compliance by PCI
If any company wants the PCI compliance then they must follow the best practices to protect the data provided by the card holders. So we can understand that Stripe must have ensured all the best practices which were required to get PCI compliance.

## Two-Factor Authentication or 2FA
To make the users account extra secure Stripe offers two factor authentication. By using this feature users can easily add an extra layer of security to their account to prevent unauthorized access.

## Bug Bounty
Bug Bounty is a program where security researchers or developers can find bugs in Stripe systems and can report to them so that Stripe can take action or fix that vulnerability. By doing so it can fix unexpected security issues missed by stripe developers while developing the system.

Stripe in their documentation ( https://stripe.com/docs/security#disclosure-and-reward-program ) says about this program.

## Tokenization
Stripe uses the tokenization system to ensure high security for card information. For example, when a user first adds their card information Stripe replaces their card information via a unique token. So, for recurrent transactions Stripe can use this token.

If somehow the data gets into someone's hand, they will not get the actual card information, instead they will get a useless token which they can’t do much with.

These above are just some popular steps that Stripe took. But there are many more security features available by which you can easily rely on their security precautions.

![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+08+-+Image+3.png)

##
# Ways of, integrating Stripe
Stripe provides different ways of integration. Some methods are discussed as follows.

## Payment Links
If you don’t have any website or app but if you still want to accept payment online, then you can definitely use Payment links provided by Stripe. For this you do not have to write any coding or build anything, you will just have to set up your account and go through the process of accepting payments.

## Stripe Checkout
This is useful if you already have a website where you want to accept the payments. With stripe checkout you can create customizable forms with doing less coding. If you don’t want to put the payment form in your website, then you can of course redirect the users from your website to a stripped hosted payment page.

Doesn’t matter if it's a one time payment or subscription both is possible with Stripe checkout.

## Stripe Web Elements
If you don’t want ready to go solutions like Payment links or even if you don’t want to just do little customization with Stripe checkout but you want to fully customize each element of the payment flow, then Stripe element is for you. (https://stripe.com/payments/elements)

It requires a deep level of engineering. This is highly customizable, also it takes a good amount of time if there is a complex design to implement.

Additionally if you have a mobile application then you can also use Stripe Mobile Elements to build custom UI. (https://stripe.com/docs/payments/mobile)

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+08+-+Image+4.jpg)

Overall, Stripe simplifies the process of accepting payments online, making it an attractive choice for startups, small businesses, and large enterprises alike. Its user-friendly interface, extensive documentation, and robust features have contributed to its popularity in the online payment processing industry.


Why use Stripe?


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+07+-+Image+1.jpg)

# Overview
Javascript Object Notation (JSON) or commonly known as JSON Web Token (JWT) is an unmodified token mechanism to verify the user with the server. This last sentence has a few concepts that need to be further broken down and also is the main reason as to why we chose it for our login authentication process on [ShouldertoCryOn](https://shouldertocryon.health). We will also discuss the advantages and vulnerabilities in using JWTs later in this article.

Firstly, an unmodified token mechanism is a simple token-based authentication system where there is no need for additional modifications and complexities. A token-based authentication is when an application or system uses tokens to verify users. Instead of a username and password approach, an unique token is generated to serve as proof of the user’s identity. This is usually achieved via email or text message where a 4 to 6 digit alpha-numeric string of characters is sent to the user, after which the user can then input that generated code during the log-in portal for validation. This token then becomes signed by the server and grants access.

To further delve into what is an “unmodified” token, it is essentially a token that is not able to be modified by a third party or middleman. If this token is modified, then it becomes invalid, unable to be used and a new token needs to be created.

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+07+-+Image+2.png)

##
# Structure of JWT
JWT consists of 3 parts; header, payload, and signature. There could be other sections in the token, but these are the mandatory or essential components.

## Header:
The header typically contains two parts; the type and the signing algorithm. Below is an example of what is typically inside the code:

```
{
  “alg”: “HS256”,
  “typ”: “JWT”
}
```

## Payload:
The payload mainly contains the claims, which carry objects about the user, such as the name, date-of-birth, or any other fields entered during the session. Below is an example:

```
{
  “name”: “John Doe”,
  “id”: 01234,
  "dob”: “23-07-21”
}
```

## Signature:
The signature is created by taking the header, the payload, a secret key and the specific algorithm assigned to the header. This is a unique code used to verify the integrity of the token. See examples below:

```
{
  SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
}
```

or

```
{
  eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiAiMTIzNDU2Nzg5MCIsICJuYW1lIjogIkpvaG4gRG9lIiwgImlhdCI6IDE1MTYyMzkwMjJ9.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c
}
```

<p className="pulse1"> 
  Why do you need to understand the structure of JWT? Simply because a JWT allows you to verify the content that has not been tampered and it is also a good way to transmit information between two parties; almost like with the local mailing service where the letter or package has to be signed by the recipient with a valid ID. 
</p>

##
# Why is JWT better than a Session Creation?
There are many advantages to using a Javascript Object Notation Web Token, but the main benefits are as follows:
- JWTs are stateless, therefore the server does not need to store the signed JSON token for the client. For session creations on the other hand, the server has to check each instance via its ID and must store this information.
- The server can scale without any hesitation due to not needing to store the session information.
- This further improves the performance of the server side because it does not have to constantly go through the validation process.
- One server generated token can be used on other servers, which can be achieved using a secret key within the token’s signature. This is an arduous process through a Session and cannot be easily implemented.

![image-3](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+07+-+Image+3.png)

##
# Vulnerabilities in JWT
1. None Attack: The JSON web token uses various algorithms like HS256, HS384. If the token does not use any algorithm, then it can be under attack.
2. Leak of the Secret key: If anyone can get the key then they can sign a new JWT token of their own. So the server must be secure to store the secret key.
3. Not giving any expiry token: Each token must have its expiry date. Otherwise it is not possible to limit a user to give only a certain period of access to some resource.

After reading this blog, you can understand why we chose this path for [ShouldertoCryOn](https://shouldertocryon.health). Despite the vulnerabilities and despite the other authentication processes, our main priority was to keep the code lean and not waste time on building an application that will inevitably be revised and rewritten. Therefore, we ensure good practices, deploy professional standards, and use sound judgment whenever we are providing a service or producing a product. Javascript Object Notation Web Tokens will suffice for now.

Thank you.

![image-4](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+07+-+Image+4.jpg)


JSON Web Tokens (JWT)


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+06+-+Image+1.jpg)

In modern times, various technologies are used to establish a connection between the servers and clients (end users). Two such technologies are WebSockets and Webhooks.

# Short Overview
**WebSocket** <br/>
It is a communication protocol to connect with servers of any website or mobile application. By using this, clients (such as a browser) can establish a single long-lived connection with the server. It allows the client and the server to efficiently exchange data. Moreover, it is bidirectional where both the client and server can send and receive data.<br/>
You can read our [previous blog](https://ark-am.com/blog/what-is-websocket), for more information.<br/>

**Webhook** <br/>
This is a useful method of communication between two servers. One server sends a particular data package about an event that happened to the other server. This data can now be used for other purposes. Unidirectional by nature, where the sender notifies the receiver.<br/>
For more information, feel free to read our [first blog](https://ark-am.com/blog/what-is-webhook) post.

**Real-Time vs. Event-Driven** <br/>

<p className="pulse1">WebSockets are real-time, suitable for instant updates and interactive applications.<br/>
Webhooks are event-driven, used to notify external systems about specific events once that event has occurred.</p>

**Connection Type** <br/>
WebSockets are persistent, long-lived connections.<br/>
Webhooks are stateless, short-lived, and initiated by the sender. <br/>
We can discuss in more detail about stateless, stateful and persistent connections on a future blog.

![Image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+06+-+Image+2.png)

##
# What Should You Choose?
Depending on the project requirements and the technology’s use, more questions need to be answered before choosing to implement a WebSocket or a Webhook.<br/>
**Do you need to automate a task based on specific events only?** If yes, then Webhook is a good choice.<br/>
**Do you need real time communication?** If yes, then WebSocket is the best route.<br/>
**Do you want to make the connection between server and the client persistent?** If yes, then again, a WebSocket would be the best option.<br/>
**Do your endpoints allow asynchronous operation?** If yes, you can use Webhooks and it is asynchronous by nature.<br/>
**Does your project need rapid complex interactivity?** If yes, WebSocket does complex interactivity with low latency.<br/>
**Do you have to customize the data on a specific event before sending it to an endpoint?** Webhooks are highly customizable.<br/><br/>
See below for further details on all the above questions.

##
# For and Against
## Pros for WebSocket
- Real time communication: Applications that require real time data updates that can be achieved by implementing Websockets. Websockets enable real time data exchange between server and client ( like browsers ).
- Low latency: The initial connection request to establish connection between browser and server is a bit large, after that all the data transfers between server and client are very light. Because these don't need to send all the data like HTTP requests on per request. It reduces the delay in websocket connection.
- Bi directional: To make an app interactive it is very important to share data between each other at the same time. Websocket allows bidirectional data transfer between the server and the client. So, each other can share data at any given time.

## Cons for WebSocket
- Complexity: It is a bit more complex to implement Websockets than HTTP. Because it requires some additional work both at server and client side.
- State Management: To scale the websocket servers, we need to be careful about stateful Websocket connections. If state is not shared or managed between all the servers it will be not scalable at all.
- Not optimized for all kinds of data: Data like audio and videos is not suitable for websocket. The text based data is more preferable for websocket use case.

![Image-3](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+06+-+Image+3.jpg)

## Webhook Pros
- Real time updates: Webhooks allow real time updates based on some events. This is important in many scenarios like data changes or some crucial update that happened which can be notified via webhook event to another server.
- Low cost: For getting updates about any particular event, the traditional way was to simply frequent polling or perform manual checks. However, if Webhook was implemented, then it only sends data when there is an actual update. This reduces the bandwidth cost like in other methods.
- Customizable: In many events users can define which event triggers Webhooks. And they can also specify the data structure before sending any data.

## Webhook Cons
- Security: As mentioned in our [first blog](https://ark-am.com/blog/what-is-webhook), webhook endpoints are commonly not exposed, this is because the developers think like they didn’t publicly share the endpoint. But in some cases these endpoints are exposed if unexpected security risks arise.
- Scalability: Managing a large number of endpoints with different kinds of events is challenging.
- Error on failure: If the Webhook system fails to deliver a request to the endpoint, there is a need to resend the request. For this custom implementation is required.


Use cases for WebSockets and Webhooks


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+05+-+Image+1.jpg)

# Introduction
WebSocket is a communication protocol to connect with servers of any website or mobile application. A communication protocol is a system of rules that allow two or more entities to transmit information through various measures. These are a set of governed rules, syntax, semantics, and synchronization of communication, all of which can be implemented by the combination of both hardware and/or software. Some examples of WebSockets are real-time chat messaging, online/offline status, activity updates and notifications.

To further elaborate on this topic, WebSockets maintain an open connection between the client and the server. Using a PING/PONG mechanism, the server sends a PING packet to the client, then the client’s browser sends a PONG packet back to the server. If the server does not receive the PONG packet within a specified time frame, then it will invoke another set of protocols or close the connection. This is a better approach than simply relaying the packet without waiting for the response.

![image-pingpong](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+05+-+Image+2.png)

##
# Benefits
Like we mentioned above, WebSockets keep the connection active between the server and the client. Below is a list of benefits from this use case scenario:
- Real time communication. Both the client and server can communicate without any interruption at the same time, such as a full duplex communication.
- New data can be pushed to all the connected clients from the server, as soon as the data has arrived. This is called server push, which is useful because the client does not have to constantly check for data updates.
- Due to the low latency, the delay of each data transfer between client and server is quicker.
- WebSockets can be secured with TLS/SSL (Transport Layer Security / Secure Sockets Layer) encryption. Sensitive data can also be easily transferred.

##
# HTTP & WebSockets
HTTP (Hypertext Transfer Protocol) is a communication protocol used in browsers, much like a WebSocket. There are some key differences between them as discussed below:

![image-comparison_table](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+05+-+Image+3.png)

##
# Scalability
The WebSocket protocol has been in existence since 2008. With support and new improvements, this technology is still competitive in 2023. Scalability is a key factor when developing an application. Typically, REST (Representational State Transfer) APIs (Application Programming Interface) are used because RESTful HTTP are stateless and can be easily scaled.

Since WebSockets are stateful, meaning it has perfect memory or knowledge of the previous requests, this approach becomes memory intensive, and the server bears a considerable burden for the functionality of the application. Therefore, adding more powerful servers may not be a favorable practice. One workaround is to create additional components in the process, such as a load balancer. A load balancer evenly redirects traffic to available servers if the previous server is overloaded or defective. This is when request timeouts are configured, such that if the request to the server is not answered within 5 seconds, then another request is made to a different server. Once more, deploying multiple servers may not be a favorable practice, but if the servers are performing numerous requests from numerous different applications, then the cost to benefit ratio becomes satisfactory.

![image-load_balancer](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+05+-+Image+4.png)

##
# Conclusion
We used this technology on the [ShouldertoCryOn](https://shouldertocryon.health) (web)app. The messaging segment in the application uses a WebSocket to seamlessly allow users to chat with one another. Furthermore, notifications and alerts also use a WebSocket. The WebSocket enables the communication protocol to alert the user, instead of refreshing the page or reloading the app, thereby creating a better User Experience (UX). If you have any confusion about using this technology for your next project, feel free to [contact us](https://ark-am.com/contact).


What is a WebSocket?


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+04+-+Image+1.jpg)

# Introduction
Koa.js (Koa) is a Javascript framework for Node.js, where Node.js is a cross-platform, open-source server environment that can run on MacOS, Windows, Linux, and Unix. Koa was developed to make life easier when writing scalable server-side web applications. The same team that created the Express.js framework, built Koa but with an alternative philosophy. That said philosophy was to build an un-opinionated framework, allowing the developers freedom to structure their code in their manner and build a more robust foundation for web applications and APIs (Application Programming Interface).

##
# Benefits
One of the main reasons why Ark-am used Koa is due to its middleware architecture. Middleware architecture executes code in sequence for incoming HTTP (Hypertext Transfer Protocol) requests. This enables developers to build modular and reusable components for applications, thereby adding functionality on a needs basis. Moreover, the incoming HTTP requests use modern Javascript features such as async/await functions. These functions make writing asynchronous code more intuitive and less error prone, keeping the logic on the server-side less complex and more scalable.

##
# Understanding Koa.js Middleware
Thinking from an analogy point of view, picture the assembly line in a factory. Raw materials enter at one end and finished products emerge at the other end. In between, several stations perform specific tasks on the material, one after the other, gradually transforming it into a finished product. Koa's middleware is very much like this assembly line. It's a series of processing stations, each handling a specific task on the incoming HTTP data.

Another analogical example, imagine you are ordering a sandwich online. You click on the ingredients you want, and this selection (your HTTP request) is passed through various middleware functions: one checks the availability of ingredients, another calculates the price, and a third organizes delivery. All these functions are interlinked and form a streamlined process. This is what Koa's middleware architecture is all about - a chain of functions where each link has a specific role.

![image-sandwiches](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+04+-+Image+2.png)

##
# Koa.js Vs Express.js
You might wonder about the differences between Koa.js and Express.js, especially since both were created by the same team. To use travel as an analogy, if Express.js is like a guided tour with a pre-planned itinerary, Koa.js is like backpacking with a map and compass.

Express.js comes with a lot of features out of the box and has a more defined structure. It's like a guided tour where your path is mostly set for you. Whereas Koa.js is much more flexible and minimalist. It gives you the basic tools (the map and compass), but leaves the route entirely up to you. This flexibility allows developers to tailor their applications more precisely according to their needs.

![image-travel](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+04+-+Image+3.png)

##
# Conclusion
All in all, Koa.js is like an advanced toolbox for web developers, offering a range of modern, efficient tools for building web applications. It has a unique and flexible design that allows developers to construct their applications exactly as they envision. Whether you're looking to build a small, lightweight application, or a large, high-performance one, Koa.js has the tools and the flexibility to make it happen.


An overview on Koa.js


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+03+-+Image+1.jpg)

# The purpose behind React JS in Front-End Development
React JS (React) is a JavaScript library which was developed by Facebook and released in 2013. It is used to build User Interfaces (UI) in web applications. Although it can also be used to build desktop applications by incorporating other frameworks such as Electron JS, the focus behind this library is to deploy fast and scalable UI.

So why do we need React libraries to build UI? Can’t we just build it with regular HTML (HyperText Markup Language) and CSS (Cascading Style Sheets)?

Short answer, **Yes**.

Long answer, **No**.

TLDR (**too long didn’t read**) answer, who has the time to write extensive code for just one project. Reduce, reuse, and recycle the code.

##
# Why is React a library and not a framework?
We can build a UI with regular HTML, CSS, and JavaScript. However, the React library provides many more functionalities and ultimately, streamlines the workload to make it easy. See our previous blog, [Tailwind CSS](https://ark-am.com/blog/tailwind-css-for-modern-development), as an example behind this explanation. Furthermore, we can create stylings for web pages using CSS. However, instead of writing extensive lines of code, we can use frameworks like Tailwind CSS, making the code concise, structured, and most importantly, fast.

In the software development industry, there are two technological approaches when developing code: frameworks and libraries. A library is a set of additional components or code that was previously written and then it is requested by a program. It can be modified in its own way based on the requirements from the project. On the other hand, a framework is a library that does not possess any finished functions, but rather it provides a blueprint to build projects.

<p className="pulse1"> 
  In other words, imagine a library in terms of a ‘room containing books’, where the books are a set of completed functions ready to use off the shelf. Whereas frameworks are the shelves and cataloging system that hold and categorize the books, a structured and organized approach to build projects.
</p>

The React library can provide us with the above mentioned beneficial utilities for Front-End Development. For example, in the modern version of React, they provide a useful hook to easily perform sophisticated operations; see our blog on [Webhooks](https://ark-am.com/blog/what-is-webhook) as an expansion on this notion. The outcome is by and large the same, but the only difference being time and effort.

Taking it back to a ‘room containing books’ analogy, we can write the words on the pages of each book, then build the shelves that store the books and finally deploy them for each individual project. Not only does this take time but an immense amount of effort, especially for every single assignment. Instead, we are now able to deploy code using a mix-match bundle or as a coherent package, reusing components or code from various sources based on our needs.

<p className="pulse1">
  Now, taking the analogy one step further. Imagine if you needed a book but new information came out that only required one additional page. Instead of rewriting the entire book, you would simply add that page onto the book you possess; components added onto the project. Furthermore, imagine if there was no need for the pages you never read or used. In that case, simply take them away and thereby keeping the book slimmer and lighter; less data for storage, making the components lean.
</p>

This is hard to imagine in the conventional sense, but an analogy is a comparison of two things; may not be the best comparison, but a comparison nonetheless.

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+03+-+Image+2.jpg)

##
# Most useful feature of React
In the React library, there are many useful features to make developing easier and more efficient. Below are some of the key features:
- **Component-Based**: This is one of the main attributes which is incorporated on their official React Library website. Due to React being component based, this library allows people to build applications in a modular way. That is why it is easy to reuse components throughout the application.
- **Virtual DOM** (Document Object Model): This is an important core feature from the React library and a difficult topic to comprehend. In short, whatever we see as HTML on a website is traditionally Real DOM. Instead of creating Real DOM, React uses Virtual DOM to avoid expensive Real DOM manipulation. A topic we can discuss further on a future blog.
- **Server-side rendering**: When content on the web page is rendered on the server and not the browser using JavaScript. This feature improves the Search Engine Optimization (SEO) of an application.
- **State Management**: It is a process for managing the data that the components need in order to render. This is easy to integrate with React applications, which is very helpful for large applications to pass data throughout the program.
- **Performance**:Many people love React for this reason. For instance, if we compare it with Angular, then they perform a two-way data binding and use Real DOM. However in React, they use a one-way data binding process and use Virtual DOM. Also the size is much smaller when an application is built.
- **Community support**: Although every active library and framework provides community support on its development, from our point of view, React is very much ahead and has extensive community resources, such as System Developer Kits (SDK), blog posts, glossary, etcetera.

These are not the only benefits of the React library. If we dive deeper, we learn examples such as JSX (Javascript XML), a method to easily write HTML in React, or Testing, a library set to help test React components without relying on their implementation details and many other examples which we can discourse on a future blog.

##
# Conclusion
Our approach to building the [Ark-am website](https://ark-am.com/) was based on the above information. We wanted a website that was lean, responsive, and modern. Using React, we were able to build reusable components throughout the site which were based on our needs. Using Next.js, we were able to leverage off the framework and allow for customizability. Not only is Next.js easy to integrate into React, but by combining the two, we were able to benefit from the Server-Side Rendering and attain a more responsive website. Other key factors, such as State Management, or Component-Based code also contributed to our decision.

With a deeper understanding, React is a powerful library at our disposal. For beginner developers, React is a very good choice. For senior developers, React requires less keystrokes and allows them to efficiently build complex projects. There is a lot to learn in the React ecosystem and we recommend you get started as soon as feasible.

Thank you and happy learning.


React in real world application


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+02+-+Image+1.jpg)

# Why use Tailwind CSS?
Simply stated, [Tailwind CSS](https://tailwindcss.com/) is a Cascading Style Sheet (CSS) framework, which aids in a faster and easier development in User Interface (UI) components. It is not the first or the most used CSS framework, however there are great advantages in deploying this framework.

##
# Overview
Traditionally, one would need to write individual lines of code from scratch in the CSS library in order to create the layout of the UI. Such a layout could be anything from a web page to a mobile application to a proprietary software.

Writing these lines of code from scratch can not only consume time but data, and the CSS library file can become quite large in Megabytes. This is where Tailwind CSS shines. Having a smaller file size footprint (typically around 10 Kilobytes) allows for faster downloads and a more responsive experience. The reason behind such a small footprint is due to minification, compression and generating only the CSS code needed for the project.

Furthermore, the Tailwind CSS library is also highly customizable and allows for dynamic change. This can be accomplished by adding a parameter in the HTML (Hypertext Markup Language) element and not needing to invent class names (see example below).

In summary, not only can Tailwind CSS provide a faster, more comprehensive experience, but also allow the developer to adapt and change the code according to the end user.

### Below we will see an example of a regular CSS writing and the same code written in Tailwind CSS.
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ark-am</title>
    <style>
      h1 {
        color: #FFFFFF;
        background-color: #000000;
        text-align: center;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to Ark-am support!</h1>
  </body>
</html>
```

![Example-1](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+02+-+example-1.png)

The above code can be written in Tailwind CSS as follows:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ark-am</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="mt-4 text-white bg-black text-center text-3xl font-semibold p-[20px] font-serif">Welcome to Ark-am support!</h1>
  </body>
</html>
```

![Example-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+02+-+example-2.png)

And also if we want to customize more in Tailwind CSS, we can do it as follows:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ark-am</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="mt-4 text-white bg-orange-800 text-center text-3xl font-semibold p-[20px] font-serif">Welcome to Ark-am support!</h1>
  </body>
</html>
```

![Example-3](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+02+-+example-3.png)

> Here above by just adding **bg-orange-800** in the class, we can change the background color from black to orange.

##
# Advantages of Tailwind CSS
As mentioned earlier, Tailwind CSS is not the only framework, but the rise in popularity is a noteworthy factor. Frameworks such as Bootstrap and Materialize are well versed in the web development community. Blueprint was the first CSS framework, which was released in 2007. These frameworks have their individual advantages and disadvantages. We can explore them in more detail on a future blog, but for now, Tailwind CSS is slowly gaining momentum and the following points are the reasons behind the increase in popularity:
- **Ease of use** – With great documentation and community support, learning the syntax becomes effortless; a significant factor as to why developers from all levels are adopting this framework.
- **Low-level API** – Having a low-level Application Programming Interface (API) allows for more detailed control, especially when manipulating functions.
- **Customizability** – Possessing an extensive library where each component is changeable, the fear of being restricted by the framework is of little concern.
- **Performance** – The introduction of just-in-time compiler allows one to generate the style real-time rather than in advance during the initial build.

![image-2](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+02+-+Image+2.png)

##
# Conclusion
As a CSS framework, Tailwind CSS offers a great ecosystem for design and development. From the comprehensive documentation and online support to the customizability and performance levels, this framework has few limitations for those using it for their applications. Hence why we used this for the Ark-am website. We were able to rapidly change components in the UI and adjust the layout for all screen sizes with very little effort.


Tailwind CSS for modern development


![cover-image](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+01+-+Image+1.jpg)

What are webhooks and how do they operate? Essentially, webhooks accept a request from another server, which then validates that request in order to accomplish a certain task. That said task can vary but one component that differs webhooks from polling is the automation factor.

##
# Introduction
Webhooks connect two applications together. Our Ark-am website uses an automated deployment process where we do not deploy our site directly to the server, but rather, we push our application to a code hosting platform, such as GitLab or in our case, Github. So, whenever a new change in the code is pushed to Github, the platform then sends a request to our server to let it know about those changes and thus, a new version should be deployed for our website (see diagram below).

![Image-diagram](https://ark-am.s3.amazonaws.com/Arkam_website_images/%23Blogs/Blog+01+-+Image+2.png)

##
# Comparision with Polling
Polling on the other hand is less automated, where the communication between the two applications need constant confirmation for each step.

A great analogy when explaining this concept is like a neighbor asking for sugar. The neighbor knocks on your door (request), asks if you have any sugar (information), and then sends over the sugar (delivery).

Webhooks automate by sending the sugar straight to your house whenever you run low on supply, and this request only needs to be set up once between the two neighbors. Therefore, since only one request is made, users don’t have to send multiple requests in order to acquire the information, thus saving time, steps and data.

##
# Conclusion
One important note to mention is to properly secure webhooks. Due to its automation nature, if any webhooks does not validate the incoming request to perform the task, then this can cause a security breach. We delve more into this topic on a [future blog](https://ark-am.com/blog/WebSocket_Webhook), but for now, we thank you for reading and hope that this has helped in some shape or form.


Latest BlogArticles

16