DEV Community: Darpan Vithani

Gestures in Jetpack compose — All you need to know

Darpan Vithani — Fri, 13 Oct 2023 11:13:03 +0000

Gestures play a pivotal role in user interaction, offering a means to navigate, select, and manipulate elements within an app.

From simple taps and swipes to complex pinch-to-zoom and multi-touch gestures, Jetpack Compose provides a robust framework to seamlessly integrate these interactions into your application’s UI.

In this comprehensive guide, we embark on a deep dive into Jetpack Compose’s gesture-handling capabilities.

List of Gesture Modifiers and Gesture Detectors.
How do you detect a tap?
How to detect movements like drag, swipe, etc.?
How do you detect scroll gestures?

How do you detect scroll gestures?

A few modifiers that make composable scrollable or allow us to detect the scroll like LazyColumn or LazyRow come with inbuilt scrolling, you can use the state property of the LazyListState to detect scroll events.

Modifier.verticalScroll() and Modifier.horizontalScroll()

How to detect movements like drag, swipe, etc.?

To detect drag we can use either Modifier.draggable, or detectDragGesture also, or experimental Modifier.anchoredDraggable API with anchored states like swipe-to-dismiss.

Modifier. draggable

Now, Let’s examine the process of coding Modifier.draggable, Modifier.anchoredDraggable, detectDragGesture in our blog post.

Jetpack Compose provides a wide API range to handle gestures. Let’s divide it into modifiers and Detectors.

We have only scratched the surface of what's possible. Refer to our blog post to dive even deeper into the realm of interactive UI design.

To explore more about Jetpack Compose Gestures and discover how they can revolutionize your app's user experience, head over to Canopas Blog.

Follow Canopas for our latest technical blog posts!

React Component library with Storybook + Anima

Darpan Vithani — Fri, 15 Sep 2023 13:54:15 +0000

Components are the building blocks of your website. They should be efficiently reusable to improve development speed and consistency.

To streamline your web design process and create visually appealing user interfaces, it’s essential to have a robust component library in place.

Storybook and Anima

Storybook: Storybook is a tool for developing and documenting UI components. It provides an interactive environment where you can build, view, and test individual components in isolation. Storybook is widely used in the industry to create and maintain component libraries.

Anima: It is a design-to-code platform that allows designers to convert their design files directly into responsive code. It helps bridge the gap between design and development, making it easier to create web interfaces that match the original design.

Table Of Contents
Storybook and Anima
Component library in React App
- Install and set up the storybook
- Setting up Anima
- Add component in the storybook
- Directory structure
- Example of Button component from anima
- Customise component
- Run storybook
- How to use these components?
Conclusion

In this blog post, we’ll walk you through the process of building a component library with Anima and Storybook. In just a few steps, without code, you will have a ready-to-use component library for your website.

It helps bridge the gap between design and development, making it easier to create web interfaces that match the original design.

Your journey to web development excellence starts here, so let's build something amazing together.

Visit Canopas Blog now to read the full article.

Follow Canopas for our latest technical blog posts!

A comprehensive guide on how to design a responsive website.

Darpan Vithani — Fri, 08 Sep 2023 11:33:27 +0000

In today’s digital age, the internet is accessible from a multitude of devices, ranging from smartphones and tablets to desktop computers and even smart TVs.

As a web developer, it’s your responsibility to ensure that the websites you create are not only visually appealing but also functional on all screen sizes.

This is where responsive web design comes into play. It is important because it ensures that users have a consistent experience no matter what device they are using.

What is a Responsive Web Design?
Responsive web design is an approach that aims to make web pages render well on different devices and window or screen sizes.

The primary goal is to ensure that users have a consistent and user-friendly experience regardless of the device they are using to access a website.

Understanding Responsive Web Design
Mobile-First Approach
Viewport and Media Queries
Flexible Grid Systems
Images and Media for Different Devices
Responsive Typography
Testing and Debugging
Frameworks and Tools
Performance and Page Speed
Closing Thoughts

In this blog, You’ll explore the concept of responsive web design and discuss best practices for building websites that adapt seamlessly to various devices and screen resolutions.

So, fasten your seat belts and get ready to embark on a journey of designing a responsive website by visiting to Canopas Blog.

Follow Canopas for our latest technical blog posts!

How to Create Chatbot Using PaLM 2 Model (chat-bison@001)

Darpan Vithani — Thu, 24 Aug 2023 10:13:58 +0000

It’s good to have a friendly companion with whom we can share our feelings and get consolidation as well as suggestions for our problems. A bot can do such things for us, as we can’t wander all the time with our friends or mentors!

In a world where technology is constantly evolving, one innovation that has captured the imagination of both developers and users alike is the creation of chatbots.

If you've ever wondered about the inner workings of these chatbots and How to craft one by yourself..?

You're at the right place!

Don't worry if you're new to the world of AI and programming – by the end of this journey, you'll have the knowledge and confidence to create your very own chatbot that leverages the power of PaLM 2.

List of Contents

When to use chat-bison and when text-bison?
Do You need to use Vertex AI SDK or PaLM API?
Authentication To Google
Setup service account key
Setup Virtual Environment
Implement Bot with Vertex AI Python SDK
Final Thoughts

In this blog, you will learn different use cases of text-bison vs. chat-bison models.

It’s quite easy to integrate the built-in chat model provided by Google Cloud Vertex AI, with a few steps of configuration.

So, let's embark on this adventure and unlock the secrets behind designing a chatbot that's bound to engage, assist, and captivate by visiting Canopas Blog.

Follow Canopas for our latest technical blog posts!

Golang: Test-Driven Development(TDD) with Gin and MySQL

Darpan Vithani — Thu, 17 Aug 2023 11:01:47 +0000

Test-Driven Development (TDD) is a software development technique in which You write tests for a piece of code before you write the code.

We write tests to define the desired behavior of the code and to ensure that the code meets those requirements.

The process of writing the tests first helps to ensure that the code is testable and that it meets the requirements of the user or client.

TDD helps to catch bugs early in the development process and to ensure that the code is maintainable and easy to understand.

It also promotes a test-first mindset and encourages the developer to think about the requirements and desired behavior of the code before writing it.

Throughout this blog, I’ll assume you’re familiar with the basics of Golang, like package importing and all.

How TDD works?
Define API Routes, Struct, and functions
Create a User using TDD
Get the User using TDD
Update User using TDD
Delete User using TDD
Final Thoughts

How TDD works?
TDD is an iterative process that follows these steps.

Write a test for a small piece of functionality that doesn’t exist yet.
Run the test, which should fail because the code doesn’t exist yet.
Write the minimum amount of code necessary to make the test pass.
Rerun the test, which should now pass because the code has been written.
Refactor the code if necessary, making sure that all tests still pass.
Repeat the process for the next piece of functionality.

Let’s examine the above steps with a basic example of a sum function, which calculates the sum of two values.

For detailed posts with code examples, check out our Canopas Blog.

The goal of TDD is to ensure that the code meets the requirements and behaves as expected by constantly testing the code during the development process.

This can help to catch bugs early on, improve code quality, and increase confidence in the software.

TDD is an iterative process that begins with writing a test, running it to confirm it fails, then writing the minimum amount of code to make the test pass and repeating this process until the feature is complete.

Understanding Vertex AI on Google Cloud: Key Terms Explained

Darpan Vithani — Fri, 11 Aug 2023 11:06:50 +0000

Google is making the AI model publicly available, which it has used for BARD and other products like Gmail, Google Docs, etc.

Quite often, we want to implement a chatbot for us, that can interact with humans as humans. For that purpose, google is making our life more accessible, by providing a pre-trained model readily available, rather than we need to implement it by ourselves.

For Chat models, Google is providing a service named Vertex AI.

In this blog, we will introduce some of the terms used by Google Vertex AI and will clarify things I felt you should grasp easily that drove me crazy while going through it.

No doubt Google has documented everything, but sometimes it becomes hard to understand. So I’m trying to make it more clear, especially for developers!

What is Vertex AI?
What is Generative AI Studio?
What is a Model Garden?
What are Foundation Models?
What is Custom Model?
What is fine-tuning of a Model?
What is a Prompt Tuning of a Model?
What is the PaLM 2 Model?
What is PaLM API?
Conclusion

What is Vertex AI?
It’s a service provided by Google Cloud, that lets you train and deploy Machine Learning(ML) models and AI applications. For more information visit Vertex AI.

Want to be a Vertex AI pro? We've got you covered. Head over to our definitive terminology guide on Canopas Blog and elevate your knowledge.

Web Deployment Simplified: GitHub Workflow with EC2, ECR, and Docker

Darpan Vithani — Wed, 02 Aug 2023 11:43:36 +0000

In software development, efficient deployment workflows are crucial to ensure seamless and reliable application delivery.

With the rise of containerization and cloud computing, developers have a powerful arsenal of tools at their disposal to streamline the deployment process.

In this blog, we will explore how to set up deployment workflow using GitHub, Docker, Nginx, Amazon Elastic Container Registry (ECR), and Amazon Elastic Compute Cloud (EC2).

Whether you are a seasoned DevOps professional or just getting started with application deployment, this guide will walk you through the entire process step-by-step.

So, let’s roll up our sleeves and embark on this exciting journey of mastering GitHub Workflow for deploying your applications.

Refer to our ready-to-use blog platform in case you want to see the working example of the workflow we’re going to implement in this blog.

Create Dockerfile
Setup GitHub workflow
Deploy on ECR
NGINX configuration
Prepare docker-compose
Deploy the application to EC2
Final workflow file
Conclusion

Please note that we will deploy the node.js application on AWS EC2 in this example. But, you can deploy applications developed using any language like GoLang, Python, or PHP by following the same approach.

For detailed step by step guide with code example, check out Canopas Blog.

How to Transform Dart Streams: A Basic Guide to Stream Operators

Darpan Vithani — Thu, 27 Jul 2023 12:02:24 +0000

According to the Flutter documentation, streams provide an essential feature for handling asynchronous sequences of data.

It provides a way to handle and process a continuous flow of data, where each event can be asynchronously received and processed.

To use the streams to their full potential, we can use stream operators. These operators are the methods that allow us to transform, filter, process, and combine stream data efficiently.

In this article, let’s take a tour of some operators/methods that are available in the Stream class.

asyncMap
asyncExpand
StreamTransformer
pipe
singleWhere
cast
distinct
skip
Conclusion

Streams are very helpful when you want to listen for changes in your data and react according to them and stream operators add functionality to the stream.

Let’s experiment with these operators, explore their different use cases, and adapt them to fit your specific needs.

For full article with examples, check out canopas blog.

Docker: Lesser known but Important facts you need to know

Darpan Vithani — Wed, 19 Jul 2023 10:10:11 +0000

While many developers are well-versed in the fundamental aspects of Docker, such as building images and creating containers, several lesser-known features hold immense value in the deployment process.

Recently, I delved deeper into Docker's capabilities and discovered some additional important and useful facets. Some of these features may prove beneficial during deployment, while others simply serve as good-to-know pieces of information.

In this article, we will explore some advanced Docker features and facts that transcend the basics, offering the potential to significantly enhance application performance.

Let's dive into the world of Docker 🐋 to uncover these important insights.

Introduction
Multi-Stage Builds
BuildKit
Docker Compose Profiles
Docker Content Trust(DCT)
SBOM for Docker images
Official Go SDK
Conclusion

Docker is a platform that enables developers to automate the deployment and management of applications within lightweight, isolated containers.

Containers only include necessary dependencies, configurations, and library files required to run an application.

Docker provides a consistent and efficient way to build, distribute, and run applications across different environments.

It provides many features like Multi-stage builds, Content trust, and Compose profiling which can be helpful to us when building the applications.

The latest features in Docker, such as

Multi-Stage Builds,
BuildKit,
Docker Compose Profiles,
Docker Content Trust, and the official Go SDK

enhance the platform’s capabilities and provide developers with powerful tools to streamline their workflows, improve performance, enhance security, and seamlessly integrate Docker into their applications.

For further explanation with examples, visit our Canopas Blog.

Jetpack compose — How to implement Custom Pager Indicators

Darpan Vithani — Mon, 17 Jul 2023 10:25:20 +0000

Pager indicators are vital in guiding users through multiple screens or pages in an app.

While Jetpack Compose offers a wide range of built-in components, customizing pager indicators to match your app's unique style and branding can elevate the user experience.

In this blog post, we will explore how to create and implement custom pager indicators in Jetpack Compose, allowing you to add a touch of uniqueness to your app’s navigation.

Expanding Line/Dot indicators
Sliding Indicators
Worm Dot indicator
Jumping Dot Indicator
Bouncing Dot Indicator
Swapping Dot Indicator
Revealing Dot Indicators
Conclusion

The final output will look like this:

I have implemented most of the indicators using the Canvas API. Additionally, to demonstrate alternative approaches, I have also implemented a few using built-in composable like Box.

We’ll highlight the flexibility of pager indicators and showcase how they can be implemented using a unified logic.

For detailed explanations with examples, check out our Canopas Blog.

Custom Error Handling in GraphQL — with examples

Darpan Vithani — Fri, 14 Jul 2023 13:11:27 +0000

Error handling is a critical aspect of building robust and reliable GraphQL APIs. As developers, we need to ensure that error responses are informative, consistent, and easy to handle on the client side.

In this article, we will explore advanced error-handling techniques in GraphQL. By leveraging these techniques, you can enhance user experience, provide meaningful error messages, and improve debugging.

We will use GraphQLError class of GraphQL to play with errors.

By customizing error messages, implementing validation rules, and centralizing error-handling logic, you can provide informative and consistent error responses.

Plus, advanced error-handling techniques allow you to catch and handle errors in nested resolvers and test different error scenarios.

GraphQLError
Customizing Errors
Custom error interface
Global Error Handling
Error Bubbling and Error Handling in Nested Resolvers
Conclusion

This post shows you the basics of error handling in GraphQL using GraphQLError class. Using this, we can easily customize errors whether it's database, validations, or any other errors.

For detailed explanation with examples, check out our Canopas Blog.

How to use CocoaLumberjack for Advanced Logging

Darpan Vithani — Fri, 14 Jul 2023 12:50:46 +0000

Welcome back to the second part of our series on setting up logging correctly with CocoaLumberjack in iOS.

Logging is an essential part of app development, providing valuable insights for debugging, analysis, and support purposes.

CocoaLumberjack is a popular logging framework that offers a range of powerful features to customize and manage logs effectively.

Using the advanced features will enable us to take our logging to the next level, providing enhanced readability, efficient log management, and centralized log analysis.

In the previous blog, we covered the basics of CocoaLumberjack and logging into the console and file, and its use with Crashlytics.

If you have missed the previous blog then please read it before starting reading this advanced version of it.

iOS — How to Setup Logging Correctly with CocoaLumberjack

I already explained CocoaLumberjeck briefly in the previous blog, So let’s move forward quickly by skipping details.

Introduction
Zip file and Upload it to the server
Upload logs to AWS CloudWatch
Conclusion

In this blog, we will learn how to zip the log file and upload them to the server, and send logs to the AWS CloudWatch.

Logging application data and diagnostic information to the console or a file can be very useful when debugging problems both during development and production. Having a solid logging solution in place is therefore essential.

Along with many other developers, I have created custom logging solutions for many projects, but CocoaLumberjack is an ideal replacement and it has a lot more to offer.

Remember to refer to the official CocoaLumberjack documentation for more detailed information and customization options.

For examples and other details, visit Canopas Blog.

DEV Community: Darpan Vithani

Gestures in Jetpack compose — All you need to know

Table of Contents

How do you detect scroll gestures?

React Component library with Storybook + Anima

Storybook and Anima

A comprehensive guide on how to design a responsive website.

Table Of Contents

How to Create Chatbot Using PaLM 2 Model (chat-bison@001)

List of Contents

Golang: Test-Driven Development(TDD) with Gin and MySQL

Table of Contents

Understanding Vertex AI on Google Cloud: Key Terms Explained

Table Of Contents

Web Deployment Simplified: GitHub Workflow with EC2, ECR, and Docker

Table of contents

How to Transform Dart Streams: A Basic Guide to Stream Operators

Table of contents

Docker: Lesser known but Important facts you need to know

Table of contents

Jetpack compose — How to implement Custom Pager Indicators

Table of Contents

Custom Error Handling in GraphQL — with examples

Table of contents

How to use CocoaLumberjack for Advanced Logging

Table of contents