DEV Community: Emma Ham

I know you want to build AI applications too : LangChain

Emma Ham — Sun, 18 Feb 2024 05:06:37 +0000

Hey there!

How have you been?

After posting about ChatGPT prompt patterns and seeing your incredible responses,
it's clear to me that our interest isn't just in using AI tools like ChatGPT.
We're also keen on figuring out how we can use ai technologies like LLMs(Large Language Model) to build ai powered applications.
If that sounds like you, then you came to the right place🚀🚀!

Because today, what we I will be looking at together might be exactly what you've been looking for and a game changer!

So, Let's see what's on the menu today!

The core idea of this post is to introduce "LangChain" as a tool to crafting applications powered by large language models (LLMs) at a high level.

We'll begin by unpacking the essence of LangChain—the 'what' and 'why' that define its core. We’ll delve a little into its inner workings and uncover the advantages it offers.

And then we will briefly look into the main components of LangChain, exploring what LangChain is made of and what makes it work the way it does.

What won't be included in this particular post are detailed implementation guide and demo projects which I will be writing as part of a next post:)

- But first,

But hold on a second, let me just put this out there.
I am not an AI expert nor a ML engineer, actually I am far from it.
Therefore, I obviously don’t know what I am talking about, what a disappointment😞😞😞

But you know that’s also exactly why I chose this topic for today’s post. Because I’ve always been a passionate user of these llm tools like ChatGPT, Bards but the idea of building something with it always felt like a huge project that was too intimidating for me to even try.

And I thought
"There’s gotta be an easier way to do this👿"

And since I’ve discovered LangChain few weeks ago, it was such an interesting learning journey. And more than anything I wanted to share this experience with you guys so I hope you guys find something useful from this article!

1. What is LangChain, anyway?

If you look at the official documentation, LangChain is introduced as a framework designed to simplify the process of building llm powered application.

So, it's not a kind of LLM or an AI chatbot itself. Instead, it's more like a support layer that stands between us and the LLMs, making it easier for us to work with LLMs and get better results.

There are two things that make LangChain special.

First, It's data-aware.
This means you can feed your own data into large language models (LLMs). Instead of relying solely on the information they were trained with, you can link these models to your own data to get responses that are specifically meaningful to you.

The second standout feature is something called "Agents".
Agents elevate the application beyond simply responding to questions like a chatbot. They add the ability to perform actions on our behalf. Whether it's sending an email, updating a database, or buying products online, the potential uses are both endless and incredibly powerful.

Basic data flow of LangChain

The basic flow goes something like this:

1. Question
We start by asking a question to an LLM.
By this point, we've already loaded our data into LangChain, which could be stored in a Vectorstore. Then, based on the question asked,

2. Similarity/Vector search
It carry out a similarity search to pull out the relevant information.
This step is crucial for enabling the LLMs to give better responses, as this relevant info is passed as context for llm.

3. Crafting an answer
When the LLM gets the question along with this background information, it crafts an answer.

4. Actions
. Depending on our needs, we can then let the model to take a set of actions based on this process.

Some use cases
Use cases can be various but some of really common uses case could be SQL QA which we can ask a question about the data in a SQL database and get back a natural language answer. Or QA about Documents, SummarisationsAI, chatbots analysing data and so on.

2. But still, why use it?

But “Why” LangChain though?

It sounds like we can achieve this using LLM directly without any additional helper.

True, but I also believe that LangChain, like any new technology, was introduced to solve certain challenges that current large language models face.

And for that let’s take ChatGPT for example to understand why something like LangChain might be helpful.

1. Limitation of real-time data access
GPT models, such as GPT-3.5, which many of us use, are limited by the information they were trained on, with the latest update being in January 2022. The newer version of GPT includes content up to April 2023, offering slightly more up-to-date information, but it comes with a subscription cost.

2. Token Limitation
This means there's a maximum number of tokens (pieces of text) that the model can handle in a single question and its response. This limitation can impact the model's understanding of questions and its ability to generate meaningful answers.

3. Hallucination
"Hallucination" in AI is also an issue. A Purdue University study last year found that when ChatGPT was tested with 517 Stack Overflow programming questions, it returned inaccurate or broken code in over half the cases.

Typical Approaches

In machine learning development, when issues like these happen, it can be approached through fine-tuning, N-shot learning, and in-context learning.

Fine-tuning tweaks a model's parameters to better perform specific tasks. N-shot learning leverages a few examples to refine the model's task-specific responses. In contrast, in-context learning embeds the necessary information within the prompt itself, bypassing additional training—this can be more efficient than fine-tuning, which requires direct model adjustments and can be resource-intensive.

LangChain is designed to facilitate in-context learning effectively.

Coming back to limitations

LangChain offers some smart solutions to tackle these issues:

For accessing information, you can use your own data or a search agent (like a Google search agent) with LangChain to do real-time searches.

For Token limitation, LangChain provides TextSplitters and its parameters to split the big chunk of information into smaller Chungs in a cleaver way helping maintain the performance of LLMs.

For Hallucination, LangChain has effective methods to shape prompts depending on the model type and includes built-in instructions to minimise errors.

What else?

Quite recently we will all remember this drama around this guy in OpenAI,
Like there was no there time quite like now where everything is changing so quickly, that sometimes can worries us whether we will always need to be alerted when we use things like LLM models because we just don’t know what’s gonna happen!

One of my favourite part of LangChain is that is just unbelievably easy to migrate from one llm model to another. It literally takes just few lines of code changes because whatever happens behind the scenes, it is all handled by LangChain!

How cool is this? On the top of it, LangChain are supported by some helpful tools like LangSmith which you can see in this small screenshot that it is quite helpful when debugging the application, if you want to know what was passed as prompt and how the whole process played out.

3. 6 Main Components of LangChain

So far, we looked at how long chain work from a high level, Now let’s take a look at these 6 main components of LangChain that make this work.

- 💡 LLM : An engine of LangChain
here are plenty of models that LangChain can integrate for us including GPT models, palm, gemini, open source models like Llama etc.

- 💡 Prompt: A command to LLM
I've been saying "question" up until now for the convenience sake, but essentially, a prompt is a command we give to an LLM to get the output we want. This can be a question, some instructions, or context we provide.

- 💡 Indexing: Organising the data for LLM
Indexing is about organising and structuring our data so the LLM can work with it effectively.
We touched on text splitters before, but there are also document loaders, vectorstores, and much more!

- 💡 Memory: What makes a conversation?
Many LLM applications will have a conversational interface. An essential component of a conversation is being able to refer to information introduced earlier in the conversation. LangChain provides utilities for adding memory to a system.

For example,

- 💡 Chain : Chaining complex operations into a single line!

It is probably the most important concept because even the LangChain is named after this component!

In LangChain, a 'chain' links a series of operations together. Each operation's output is directly fed into the next as its input. This sequence continues from one operation to the next until the final result is produced.

Chain is a unique component that makes complicated data flow from us to llm more straight forward.

Here is a very simple example of chain

chain = prompt | llm | OutputParser

As you notice "|" is a chain expression which binds operations into a single liner.
As explained above, each operation's output will be input for the next operation.

This is a very simple example but still explains core concept of chain.

- 💡 Agents : Let it action for you!

The core idea of agents is making language model to select actions to execute.
It is not like we are making it to perform certain actions, but rather is letting the model to use its own reasoning skills to decide on the correct action to take.

It sounds like a magic but if you take a look at this simple code snippet, It is not so much of a magic actually.



agent = initialise_agent(
   llm=llm,
    verbose=True,
    agent=AgentType,
    tools=[
        StructuredTool.from_function(
            func=plus,
            name="Sum Calculator",
            description="Use this to perform sums of two numbers. This tool take two arguments, both should be numbers.",
        )
    ],
 )
 agent.invoke(prompt)

Take a look at the "tools=", we are sending a list of tools when we are initialising agent.
In the example above, we seem to send a tool called "plus" saying LLM to use this tool when "perform sums of two numbers".

When we invoke this agent like this



agent.invoke(
"Give me sum of 3,32,4234,32543534,43,1,0,123,344,12,11,5,78,03,12."
)

LLM will evaluate this command and choose to use the provided tool when performing sum operations.

We are enabling LLM to use its reasoning skill in deciding what to do to return desired output by LangChain component called "Agent" here.

In real world scenarios, This could be sending an email, updating database, requesting network call or purchasing products online and many more using Agents!
Very Powerful isn't it?👏👏👏

4. Example DocsAssistantAI

Let's imagine DocsAssistAI uses LangChain to analyze documents for us:

a. We start by uploading any document, whether it's a calendar event, an email, an article, or a sales report.

b. Next, we break down the document into smaller sections to help the LLM process the information more efficiently.

c. These pieces are then converted into vectors—a format the LLM can understand.

d. When we ask a question, the system searches for and provides relevant context to the LLM, along with the query and chat history.

e. The LLM then gives us an answer.

For example during "Retrieving our data and send relevant data extracted to llm" part,

While this is a simplified view, LangChain allows for much more. For instance, in retrieving data, we can refine how we present information to the LLM to optimize the interaction.

5. What's coming next?

In today's article, we've explored the world of "LangChain" - covering its essence, benefits, functionality, and providing an illustrative example to spark your imagination.

We intentionally skipped the technical deep dive, such as setting up an OpenAI API key, downloading LangChain, and integrating it with an LLM model, among other details. This more intricate exploration is reserved for a future post, should you be keen on a step-by-step implementation guide.

I hope this introduction has illuminated the path for your next development venture with LangChain. For those eager to delve further, here are some insightful articles to guide your upcoming projects!

LangChain Official Document
LangChain Concepts Tutorial on YouTube
Medium article serious of each components
Retrieval Augmented Generation (RAG) Using LangChain
Implementing RAG with Langchain and Hugging Face

🚀🚀🚀🚀🚀🚀🚀
That's a wrap!

I hope you've enjoyed diving into the world of LangChain as much as I did when I first stumbled upon it. Whether you're an AI engineer or not, we're all part of a world brimming with exciting and interesting discoveries every single day.

I'm eager to hear about your latest interests in AI development. What's been capturing your attention lately? Share your thoughts here, and let's foster a vibrant discussion. Also, stay tuned for our next post, where we'll delve deeper into LangChain with more exciting insights and information. Let's keep the conversation going!

🚀🚀🚀🚀🚀🚀🚀

You Are Using ChatGPT Incorrectly!

Emma Ham — Thu, 09 Nov 2023 22:06:52 +0000

What an accusation! Boo!
I know it might seem a bit strong for a blog post title, but let me explain.

In my defense😅

I've encountered this question at one of the recent tech conferences I attended, where an audience member asked the panel speaker,

"Will ChatGPT replace our jobs?"

As common as this question has become in the era of AI technology, I was quite impressed with the speaker's response that day.
The individual stated,

"No, we won't necessarily lose our jobs to ChatGPT, but we might lose them to someone who knows how to use ChatGPT better."

Ding! This made me question whether I've been utilising ChatGPT to its full potential effectively.

So today, I'm here to admit that I've been underutilising ChatGPT and to introduce some ways to use it more effectively, which I'll share with you.

In this post, we will delve into how to make the best use of ChatGPT and other AI-powered generative models as engineers in our daily lives.
To achieve this, we'll explore some of the most popular and useful prompt patterns that developers can employ.

Stay tuned!
Some of these may be techniques you're already using without realising, or ones you can take advantage of in the future.

But first,
let's take a moment to consider an interesting research finding from Purdue University.

An interesting research

According to a recent study conducted by Purdue University, when ChatGPT was presented with around 517 programming questions from Stack Overflow, it provided answers with inaccuracies or non-functional code 52% of the time. The study also revealed that ChatGPT's performance in terms of correctness, comprehensiveness, consistency, and usefulness lags behind that of Stack Overflow.

Additionally, many of us have likely experienced instances of AI "hallucinating," where it produces convincing but incorrect answers.
This leads us to believe that we have the power to validate AI-provided answers.
To do so effectively,
We need to know how to ask the right questions and frame them properly.

After reading this article, I wasn't surprised at all because my ChatGPT has been apologising a lot for providing incorrect answers when I've called it out, which can be quite amusing.😂

4 Prompt Patterns for today

Setting jokes aside, let's now dive into four prompt patterns that can help make ChatGPT's responses more meaningful, accurate, and aligned with the intent of our questions. Let's start with some standard patterns.

👉 Pattern 1

First up is the "Persona Pattern". Using this pattern, we can guide ChatGPT to produce responses tailored to a specific viewpoint or perspective. This is particularly useful for code reviews, architectural advice, tech discussions, and ideas commonly required in our professional field.

👉 Pattern 2

Next is the "Recipe Pattern". As the name suggests, this pattern provides step-by-step guidelines based on the question, making it ideal for situations where you have a general idea of what you want to achieve but need detailed instructions.

For instance, a question like, "Can you provide me with a step-by-step guide for releasing a mobile app to production, including the necessary steps for submitting it to the store for review?" would be an excellent use case for this pattern.

👉 Pattern 3

The "Reflection Pattern" is the third pattern, and I consider it one of the most important patterns for daily use as a developer. It commands the AI to provide answers with clear reasoning, making it invaluable for spotting instances of AI "hallucination" and validating responses.

This pattern becomes essential as we increasingly rely on AI in our daily work, potentially leading us to lose our grasp of the truth and its meaning.

So highly recommend,
Use this pattern and then start asking questions!

👉 Pattern 4

Lastly, my all time favourite, we have the "Flip Interaction" Pattern.

This pattern is all about letting AI take control of the conversation, a creative approach when you know what you want to achieve but aren't sure what information ChatGPT needs from you.
In this scenario, the AI inverts roles with you, asking questions for you to answer. It's an exciting way to explore a topic.

With this pattern, you won't need to worry about asking the right questions; ChatGPT will guide you by asking the questions it needs answers to in order to address your original query correctly.

🚀🚀 That wraps up today!🚀🚀

In today's developer landscape, it's increasingly likely that we'll turn to AI tools like ChatGPT or Bard in our daily work. AI technologies have made tremendous strides and have a significant impact on both our personal and professional lives. We are in a world where it's crucial to equip ourselves with the right skills and a deep understanding of what we have at our disposal to make the most of it.

I hope this post helps you feel more confident in using ChatGPT effectively in the future, and I'm open to creating more AI-related posts if there's interest. Thank you!

Multi-Modules Architecture: Dependency Management _ Build your own gradle plugin

Emma Ham — Wed, 08 Nov 2023 07:53:27 +0000

Hey fellow devs!

Today, I've come here to talk about my frustrations that I've got to develop over the past few years in working in multi-module projects with
Dependency management

And how I managed to make them a bit less, well, head-scratching.💻😅

1: Understanding Multi-Module Projects

So, what's a multi-module project? As your codebase grows, it becomes harder to manage, resembling a monolithic structure. Multi-modularization comes to the rescue, making your app more modular, scalable, and maintainable.

The rise of on-demand delivery apps has fueled the popularity of modular codebases, solving common development problems. In this type of project, you'll see multiple separate modules, such as UI, data, and feature modules like login, signup, and dashboard.

2: The Dependency Management Dilemma

The tricky part in multi-modules? Dependency management.
As much as I loved the idea of app modularisation, I've realised it is not always sunshines and rainbows when it comes to managing dependencies.

With 10 modules, you end up with 12+ build.gradle files, and they all look eerily similar. Take a look at this example of a typical /build.gradle:

(Alert! This might be a bit of eye sore, Lol)

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-kapt'
    id 'dagger.hilt.android.plugin'
    id 'org.jlleitschuh.gradle.ktlint'
}

android {
    compileSdk 33
    defaultConfig {
        applicationId 'com.example.project.app'
        minSdk 26
        targetSdk 33
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        compileOptions {
            sourceCompatibility = JavaVersion.VERSION_17
            targetCompatibility = JavaVersion.VERSION_17
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    namespace 'com.example.project.app'

    compileOptions {
        sourceCompatibility = 17
        targetCompatibility = 17
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
    }
    packagingOptions {
        resources.excludes.add("META-INF/*")
    }
}

repositories {
    mavenCentral()
}

java {
    sourceCompatibility = JavaVersion.VERSION_17
    targetCompatibility = JavaVersion.VERSION_17
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'androidx.core:core-ktx:1.9.0'
    implementation 'androidx.appcompat:appcompat:1.6.1'
    implementation 'com.google.android.material:material:1.8.0'
    implementation 'com.jakewharton.timber:timber:5.0.1'

    // Compose dependencies
    implementation "androidx.compose.material:material:1.4.3"
    implementation "androidx.compose.ui:ui:1.4.3"
    implementation "androidx.compose.ui:ui-tooling-preview:1.4.3"
    testImplementation 'junit:junit:4.12'
    debugImplementation "androidx.compose.ui:ui-tooling:1.4.3"
    implementation 'androidx.activity:activity-compose:1.7.0'
    implementation "androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1"
    implementation "androidx.navigation:navigation-compose:2.5.3"
    implementation 'androidx.hilt:hilt-navigation-compose:1.0.0'

    // DI dependencies - Dagger Hilt
    implementation "com.google.dagger:hilt-android:2.44.2"
    kapt "com.google.dagger:hilt-android-compiler:2.44.2"
    kapt "androidx.hilt:hilt-compiler:1.0.0"

    // Coroutines
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.5.0'
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.5.1'

    // Local unit tests
    testImplementation "androidx.test:core:1.4.0"
    testImplementation "junit:junit:4.13.2"
    testImplementation "androidx.arch.core:core-testing:2.1.0"
    testImplementation "org.jetbrains.kotlinx:kotlinx-coroutines-test:1.5.1"
    testImplementation "com.google.truth:truth:1.1.3"
    testImplementation 'app.cash.turbine:turbine:0.12.1'
    testImplementation "io.mockk:mockk:1.13.8"
    debugImplementation "androidx.compose.ui:ui-test-manifest:1.1.0-alpha04"

    // Instrumentation tests
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:1.4.3"
    androidTestImplementation 'com.google.dagger:hilt-android-testing:2.37'
    kaptAndroidTest 'com.google.dagger:hilt-android-compiler:2.37'
    androidTestImplementation "junit:junit:4.13.2"
    androidTestImplementation "org.jetbrains.kotlinx:kotlinx-coroutines-test:1.5.1"
    androidTestImplementation "androidx.arch.core:core-testing:2.1.0"
    androidTestImplementation "com.google.truth:truth:1.1.3"
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test:core-ktx:1.4.0'
    androidTestImplementation "io.mockk:mockk-android:1.13.8"
    androidTestImplementation 'androidx.test:runner:1.5.2'
}

I see two major problems here.

First, all dependency versions are hardcoded.
Updating a library means updating multiple build.gradle files, a developer's nightmare.
(Typically, resolve this with versions object which I can talk about in the next post if anyone is interested.)

Second, there's a ton of duplicated code
plugin IDs, Android configuration, compile options, and more.

In this post, I want to talk about the second problem above and how to eliminate the duplications and make the build gradles more organised and cleaner.

3: What can we expect from this post?

Spoiler Alert!!
I will show you what your build.gradle file would look like after following this approach.
Remember, the eye-sore example above?
Well, here is an updated version.

apply<ProjectGradlePlugin>()
plugins {
    `android-library`
    `kotlin-android`
}
android {
    namespace = "com.example.project.module"
}
dependencies {
    // After resolving first problem, let me know anyone 
    wants to read about how to update this dependencies 
    block.
    // Modules
    design()
    navigation()
    core_data()
    model()
    datastore()

    // Dependencies
    material()
    compose()
    googleSupportLibraries()
    networking()
    data()
}

🚀🚀🚀
That's right, this is it!

All those duplicated code is gone in this build.gradle file and now it is obviously much shorter and cleaner.

How do we do this? Stay tuned in this post!

Let's journey through the solution.

4: Solution: Build your own custom gradle plugin

In this chapter, we'll explore a practical solution for eliminating duplicated code in your multi-module Android project by creating your own custom Gradle plugin.

Let's break it down into steps:

Step 1: Create the buildSrc/ Module

If you haven't already set up the buildSrc/ module in your project, now's the time to do it. You can create this directory at the root of your project by following these simple steps.
This is also a great opportunity to migrate from Groovy to Kotlin DSL for your build.gradle files. If you decide to do so, don't forget to add the Kotlin DSL plugin in the build.gradle.kts file in buildSrc/.

plugins {
    `kotlin-dsl`
}

Step 2: Develop Your Custom Plugin

Inside the buildSrc/src/ directory, create a Kotlin class that extends Plugin. You can name it whatever you prefer; for this post, let's call it "ProjectGradlePlugin." You'll need to override the apply function within this class.

class ProjectGradlePlugin : Plugin<Project> {
    override fun apply(project: Project) {
     // Empty for now
    }
}

Step 3: Extracting Duplicate Code from build.gradle Files

a. Handling Plugins

You often find duplicated plugin declarations in your build.gradle files.
To simplify, we'll extract these plugin declarations into your custom plugin class. However, you should leave Android library plugins in place, as they are required to create the Android block.

class ProjectGradlePlugin : Plugin<Project> {
    override fun apply(project: Project) {
         // Applying plugins
         project.apply {
            plugin("kotlin-kapt")
            plugin("dagger.hilt.android.plugin")
            plugin("org.jlleitschuh.gradle.ktlint")
        }
    }
}

We can now remove those three lines from the build.gradle file.

b. Handling Android Block Configuration

The Android block in build.gradle files often contains a significant amount of duplicated code, such as SDK versions and build features. To streamline this, create an extension function for the Android block in your custom plugin class. This extension function returns the LibraryExtension Gradle class, allowing you to modify the Android configuration within your custom plugin.

    private fun Project.android(): LibraryExtension {
        return extensions.getByType(LibraryExtension::class.java)
    }

Then we call this function inside of our apply() function.

class ProjectGradlePlugin : Plugin<Project> {
    override fun apply(project: Project) {
         // Applying plugins
         // Applying Configuration
         project.android().apply { 
            compileSdk = 33

            defaultConfig {
                minSdk = 21
                targetSdk = 33
                testInstrumentationRunner = ProjectConfig.testInstrumentationRunner
                consumerProguardFile(ProjectConfig.proguardFile)
            }
            buildFeatures {
                compose = true
            }
            compileOptions {
                sourceCompatibility = JavaVersion.VERSION_17
                targetCompatibility = JavaVersion.VERSION_17
            }
            composeOptions {
                kotlinCompilerExtensionVersion = "1.4.3"
            }
        }
    }
}

Then we can remove the same codes inside of andorid {} in the original build.gradle file.

c. Adding More Extensions

You can continue to extract and simplify further code blocks in a similar manner, such as specifying the Java version in the Kotlin block in your custom plugin.

Step 4: Applying Your Custom Plugin

Once you've extracted all the necessary code into your custom plugin, applying it is straightforward. Just add a single line to your build.gradle.kts file:

apply<ProjectGradlePlugin>()

5: Summary

That's it! Your Gradle files are now cleaner and more organized. When you need to update configurations for your modules, you can simply make the updates within your custom project plugin. It's that easy!

We've covered a lot of ground, but this approach can significantly simplify your multi-module Android project.

But wait, the adventure continues! If you've got questions or awesome ideas swirling in your developer brain, don't hesitate. Share them in the comments below. Your solutions and suggestions are the secret sauce to our coding success! 🚀😄

Useful resource
Here are useful articles that you might find helpful in case you are stuck with the points above.
Multi Module Architecture
BuildSrc and Kotlin DSL
Multi module architecture and BuildSrc
Public github project with custom gradle plugin implementation by Philipp Lackner

KOTLIN COROUTINE: don't click, this post is only for myself

Emma Ham — Sun, 28 Mar 2021 09:20:06 +0000

Hey there,
If you are reading this post, that would mean that you are already curious about what I am going to talk about Kotlin coroutine in this post. And that's the case, my plan worked! Horay!!

Yes, today in this post, I am going to talk about Kotlin coroutine which has been there for a while but for someone like me who haven't really get to use it so far or even get a heads around the concept itself and just really want to start it off with understanding it in a easy and straightforward way. So if you are already a kotlin coroutine expert, this post might be probably too easy for you then feel free to skip:)

Enough for chit chat I guess, and let's just dive in!

Kotlin Coroutine: What is it?

Before going straight into the topic, let me ask you something.
Have you ever been in a frustrating situation where you are out for dinner date and all of a sudden feeling this urge that you really need to go to bathroom? And finally when you get there, you realise there is only one toilet stall and there are two people waiting in the line?
How miserable!

Wait how on earth is this related to today's topic?
You are about to find out!

Synchronous
If you could relate to the situation described above. That means, in programming words, you were in "Synchronous" situation.

a job(or task) which is, in our case, using toilet can be completed one by one even if there are multiple people(tasks) waiting and we all know it can be quite annoying sometimes.

Asynchronous

But let's imagine what if there were a few stalls we could use! Then we wouldn't have had to wait for other people to come out. That case is what we call Asynchronous.

As you can see, in Asynchronous, multiple tasks can be executing at the same time and also other tasks don't need to wait another task that executed before to be finished.

Okay, I think it is enough for toilet example. Let's talk some real coding example

fun getNetWorkData() {
    val requestRes = networkRequest()
    displayResponse(requestRes)
}

fun networkRequest(): Response {
    // doing some heavy lifting call.
}

Let's say there are two functions as you can see above. The first one "getNetworkData" is getting request response from networkRequest() call and displaying it on the screen. And let's just say that networkRequest() function is doing some heavy job probably making network call or some disk operations.

The issue that we are facing here is that until the networkRequest() is completed, the other task print is blocked to be executed as this function is running on a main Thread just like we had only one toilet stall earlier(sorry for using this example again:( ).

If this networkRequest() is taking too long, then in real programming world, the UI might be getting laggy or even freeze for a second while waiting which would be very unpleasant to see as users

In an ideal world, we would want to move this non-UI related task to a different thread so that the UI related tasks can be unblocked.

This is where "Kotlin Coroutine" comes in!

Kotlin Coroutine: Concepts

With that being said, let's modify the snippet earlier to coroutine way

suspend fun getNetWorkData() {
    val requestRes = networkRequest()
    displayResponse(requestRes)
}

suspend fun networkRequest(): Response {
    withContext(Dispatcher.IO) {
    // doing some heavy lifting call.
    }
}

Compare to how it looked previously, there were two modifications made.

suspend
withContext

These are the coroutine concepts we will cover in the later post. So please bear with me and let me just briefly explain what that block of code doing. It is pretty much when the networkRequest is running, making the network call to be made in the Thread called Dispatcher.IO rather than the same Thread that this UI is running to avoid blocked tasks.

Wait, Dispatcher.IO.. is there more?

Yes

Dispatcher

This will mean that depending on the type of task that you want to run behind the scene, you can wisely choose the dispatcher type according to this.

Coroutine Scopes

Earlier, we have talked about "where" we would want to run our task and how to make that happen.

Here we will talk about "When".
What do you mean?
Well, let's imagine we have a task that printing the text "running..." in the log every 1 second. Depending on the purposes, we might want to run this task while the app is active. For example, this text will be displayed from the start of an app and finished when the app is killed. Or we might also want to run the task for a particular time of an app and make the task is cancelled when it is no longer needed. "When" do we want this task and "When" do we not want this task to be run can be defined with "Coroutine Scope".

So let me put it this way, the method that I described above that prints "running.." in the log, this will be happening as long as the app is running if we use globalScope.

    GlobalScope.launch {
       delay(1000)
       Log.d("coroutine", "running..")
    }

For lifecycleScope,

    lifecycleScope.launch {
       delay(1000)
       Log.d("coroutine", "running..")
       // Any coroutine launched in this scope is canceled when the Lifecycle is destroyed. 
    }

For viewModelScope,

    viewModelScope.launch {
       delay(1000)
       Log.d("coroutine", "running..")
       // Coroutine that will be canceled when the ViewModel 
      is cleared.
    }

We will dive in deeper in the next post!

Alright, in this post, we have covered the basic concept of Kotlin coroutine on what it is, why we need it, How we make sure when and where tasks are executed.

In the second post, we will cover how we define the task in coroutine and how we make it run and how we make it finished with some real code examples. Hope now you guys have at least clear idea of what Kotlin coroutine is. And for more details in codes, don't worry we will get there once we have the second post!

Links for references
uptrends.com/tools/website-speed-test

https://kotlinlang.org/docs/coroutines-overview.html

https://www.youtube.com/watch?v=C38lG2wraoo

Android: Accessing view, now what? (butterknife, viewbinding, databinding comparison)

Emma Ham — Mon, 29 Jun 2020 06:00:16 +0000

Hey guys! It has been a while since the last post, hope you guys have been doing good and staying strong:)

Recently, I have come across multiple ways to access layouts and bind those views with code so that we can use that views as we want. Sounds like we are going into the topic too straight away?

Well let me put this way, I have a xml file which has text field. In one of the fragments that I have, I want to set the text value or even decide on the visibility of the text field. Sounds like I should get the instance of the view in my fragment class. Then how do we do it? how do we create a bridge/connect these two seperate files and use one property in the other class?

well again, like I said word "multiple" earlier, there are many. And needless to say if you are working on a exisiting project that has been there for a while, you might probably have come across the history of view binding in Android development(with a bit of exaggeration):)

In this article, we will cover an overview of some of the most common and well used ways to make above possible in Android Development and talk about the general concept and some of the points that we can take into our accounts going forward.
Especially, if you are trying to migrate or transit the way of it from old way to another way, then hopefully this article can give you a good insight.

Step1: What are there for us

There are five most common and well-known ways to do view binding.

I am sure that most of you are already aware of some of or all of these view binding libraries and possibly already been using it for a while. I am not going to go through each and every item and explain since it is just all about high level of the concept of view binding ways and just to give it a good understanding as myself was also confused since there were so many! (as you can see a bit of a frustration from the title "now what!")

A. FindViewByID

Here we go, we have the most traditional and oldest way to bind views here. Initially, the traditional steps to take to be able to bind views with code is something like this.

Inflate the XML
Find the required element from the XML
Assign it to a local/member variable
Get the value from data
Assign the value or Assign the event listener

On the second step when finding the required element from the XML, using this old way would required to code "findViewById", creating unnecessary boilerplates.This approach is being considered as outdated way and better to avoid to use.

B. Butterknife

Butterknife was introduced in 2016 by Jake Wharton ever since its release, it had been considered one of the most best ways to replace "FindViewByID" since it was reducing a lot of boilerplates codes that original way was producing.
In butterknife, there are Annotate fields with @BindView and a view ID for Butter Knife to find and automatically cast the corresponding view in your layout like above.

However, the story doesn't end here
Guess what,
Butterknife tool is now deprecated and feature development and general bug fixes have stopped as the author himself is recommending to switch to "viewbinding" which will be covered in this article later.(FYI, this author has now joined the team to work on viewbinding tool now).
If you are interested to have a look at some documentations. check out this link.
https://github.com/JakeWharton/butterknife

C. Kotlin Synthetic

While butterknife was considered one of the best ways to do viewbinding. We also need to have a look at this one called Kotlin Syntehtic(also called Kotlin extensions). This one is, still in a lot of places, being considered the best way to do viewbinding for kotlin classes.

Why?
Kotlin uses synthetic properties, and they are called on demand with a caching function (hence a small activity / fragment load), and ButterKnife binds all the views at the same time ButterKnife.bind() (which consumes a bit more time). With Kotlin you don’t even need to use annotation to bind to views.
Just use the id of the imported views!!!

Yes, it also goes well with the RecyclerView + ViewHolder template, you just need to import kotlinx.android.synthetic.main.layout_main.view.* (If layout_main.xml is the name of the Activity / Fragment layout file).

You do not need to make any extra effort to import the layout with include .
Just use the id of the imported views.

Sounds good so far? You are about to see more fascinating stuff

D. ViewBinding VS Databinding

Here is why I wanted to explain viewbinding and databinding together.

As you can see, viewbinding is a sort of subset of databinding libraries which means viewbinding and databiding can do the same jobs in terms of binding layouts. And it would also mean with databinding, you might not need viewbinding cause it will do what viewbinding is supposed to do and also provide a bit of an extra functionalities such as 2way binding, and using variables in xml files.

then, this can lead to a question
"Then let's just use databinding as it sounds much more fancy!"

Hold on. As much as it sounds fancy, it is pretty heavy loaded library which might cause a longer compile time. So if you are not going to use databinding only functionalities then might be better consider viewbinding as it does have some advantages in terms of build time and apk size.

Also, apparently there are different steps need to take whenever using viewbinding functionalities with actual viewbinding library and databinding libarary.
Here are some examples.

** Adding tag in xml file
When we try to bind layouts using databinding, we need to go to that specific layout file and have to add tag manually to be able to get the generated binding class which I know a lot of developers hate to do.

** DataBindingUitil vs ActivityMainBinding(this one depends on the layout file name for example if the layout name is layout_login_fragment, it will be LayoutLoginFragmentBinding)

if we are using these in Activity this will be inside of onCreate, if it is Fragment it will be inside of onCreateView .

Here are some more links you can check
https://hackernoon.com/android-butterknife-vs-data-binding-fffceb77ed88 butterknife vs databinding

https://medium.com/@hardianbobby/databinding-vs-viewbinding-simple-comparison-792fa8d72e8 databinding vs viewbinding.

And some simple comparison between all the libraries mentioned above.

We have covered briefly about viewbinding ways on a high level in this article. Hopefully it gives you a better understanding of accessing views in Android and a bit of idea on which way that you will implement based on comparison here.

If it is possible, would love to dig in on viewbinding and databinding a bit more and write something up on how to implement it or even replace one with the other.

Thanks for reading!

WARNING: MEMORY LEAKS (feat. Java, Android Studio)

Emma Ham — Sun, 01 Mar 2020 03:22:40 +0000

Alright, please raise your hands if you have seen this error showing up before? Or have you detected that your application is acting weird? Weird as in strange application crashes, Severe performance degradation when the application is continuously running for a long time?
If this sounds familiar, there is a high chance that memory leaking is already happening in your app.

1. What is MEMORY LEAK?

You know, in Java, Objects are saved in a memory area called the heap. As it sounds, in heap, we can store heaps of objects there though it sometimes increases and reduces in size. Unfortunately, this heap has a limited space and once it reaches the limit, you will get to see OutOfMemoryError error message.
Useful article about OOM Error

Q: Then how can we clean the unnecessary memory?
A: Normally, there is a thing called GC(Garbage Collector)in Java that is periodically taking care of all the unused objects in memory.

GC: the built-in Garbage Collector (or GC for short). The GC implicitly takes care of allocating and freeing up memory and thus is capable of handling the majority of the memory leak issues.

Q: If Garbage collector can free up memory, why does this memory leak happen?
A: Let's have a look at the picture for better understanding!

Basically, When Garbage collector is freeing up the memory that is not being used, it checks that based on the fact that whether the object is unreferenced or referenced. If this object is identified as unreferenced object then GC will consider this as unused object to clean up and will get on with it.

However, in real world, it is most likely that we have objects that are not being used really but still being referenced with other objects in the app. As expected, Garbage collector is obviously not capable of identifying those troublesome objects and as a result, those objects will stay not being properly handled, using up the amount of memory available for the app, which causes unexpected results.

I mean, it is pretty much like, when we clean our room or when we move out, in a situation where we have to get rid of all the stuff that we are not actually using to start fresh, there are always some stuff that bug us all the time, right?
If you are much of a collector, you would understand what I am saying. There is no doubt that you are not using them and haven't been using them for a long time but then there is always some references to it that makes you hesitate to remove them but if you keep keeping them in your room, these will take up the most of the space and you will need to somehow remove them.

2. What could cause MEMORY LEAK?

In any application, memory leaks can happen for numerous reasons. There are 3 most common cases.

1. Heavy use of static
The first scenario that can cause a potential memory leak is heavy use of static variables.

In Java, static fields have a life that usually matches the entire lifetime of the running application. Unless we set it NULL when we are done using, there is a possibility that these variable stay in memory and be a potential cause of leaks.

2. Bitmaps
Bitmap objects are quite heavy in general, and if they are dealt with improperly, they can lead to significant memory leaks that eventually crash your app due to OutOfMemoryError. Most of the time, theses objects have something to do with images and if they are not handled in framework, it is recommended to use recycle() after using them.

3. Contexts
Another common reason for memory leaks is the misuse of the Context instances.
Context might sound familiar since is is commonly used as an abstract class that is extended to provide class' functionalities.

However, there are two important types of contexts which are activity-level context and app-level context. If activity Context is used in a wrong place, this reference can be kept to entire activity and be a potential leak.
Here is some article about types of Contexts in Android

3. How do we detect MEMORY LEAK?

If you are working on a big scale of application code written by someone else long ago and somehow you should figure out why this memory leak is happening, there are 2 amazing, recommended ways to do that.

Profiler

In Android docs, profiler is defined as below:
The Memory Profiler is a component in the Android Profiler that helps you identify memory leaks and memory churn that can lead to stutter, freezes, and even app crashes. It shows a realtime graph of your app's memory use and lets you capture a heap dump, force garbage collections, and track memory allocations.

So let's say that your device or emulator is connected to the android studio, and you open the profiler(normally View > Tool Windows > Profiler), and then let the application run for a bit.
Then you will see something similar as this picture.

https://developer.android.com/studio/debug/apk-debugger

You can carefully have a look into the graph and probably set the timing of the memory capture if needed to find out when the memory leak is happening, reading through the objects listed and identify whether these objects are supposed to be here or removed. If they exist when they are not supposed to be, this is where memory leak is detected and start thinking about optimizing the class.

This profiler helps analysing memory data and provides so much filter and information in depth.
For example, it provides,

What types of objects were allocated and how much space they use.
The stack trace of each allocation, including in which thread.
When the objects were deallocated (only when using a device with Android 8.0 or higher).

For more information, click Here to read documentations on profiler.

LeakCanary

Profiler provides very useful insight and analysis on memory leak, being connected to devices and allow us to be able to simulate the scenario and play with those. However, Here is one more thing you might want to have a look. LeakCanary.

LeakCanary is an Open Source Java library to detect memory leaks in your debug builds. The biggest advantage of using LeakCanary is that LeakCanary will automatically show a notification when an activity memory leak is detected in your debug build.

https://chromium.googlesource.com/external/github.com/square/leakcanary/+/refs/heads/jrod/false-negative/README.md

4. Conclusion

To sum up, as the size of the application is getting bigger, the harder it gets to troubleshoot app crashes and figure out the causes. In a same sense, since memory heap is not something clearly visible for us, it is really complicated to know exactly where and when the memory leak is happening. Using profiler and library such as LeakCanary, we can at least diagnose the problem with some meaningful data and analysis derived to start the troubleshooting on a right point.

What is your new year's resolution as a developer?

Emma Ham — Thu, 02 Jan 2020 22:51:13 +0000

What is your new year's resolution as a developer?

Super basic: How Hashmap works in Java

Emma Ham — Thu, 02 Jan 2020 11:01:04 +0000

Hi there!
It is 2020 already and what's a better way to start off the new year than to recap what we've already know such as how to walk and breathe and get drunk? LOL

Today I might bring up some real basic concepts of hashmap in Java. I am pretty sure a lot of you already know better than anyone on this one. If that's the case, feel free to click the go back button but if you are a little unsure or have no idea what I am talking about, it is up to you spend 2 minute reading this article!

Well, the most well known definition of has a hash map would be a data structure that implements an associative array abstract data type, a structure that can map keys to values.

To make it even easier,
you know when we think of an array, we would probably think of a number index to access to a certain value. ex) arrayName[index]= value
Same goes to hash map except that we can use key instead of number index values.
As shown in the image below, the hashmap is an array of nodes that has Key and Value which makes look ups to be much easier and more efficient by using key values.

If we look into the hashmap slightly more in detail, we can see it looks like a table that has nodes so called buckets which can represent a class having following objects:

K key : key string value that we use for look ups
int hash: integer hashcode from the string key value
V value: the actual value that we want to access
Node next: to point out the next entry or node

Alright, now we kinda understand what the hashmap is, then it is time for us to have a try to work with it to understand how it actually works.

To explain the steps in order to access to a certain value using key, first of all, I would like to insert some values into the map first for better understanding.

To insert the values, we can use put(k,v) method and to to that, let's quickly create a simple hashmap called scroes where we will be storing the names and scores accordingly.

HashMap<String, integer>scores = new HashMap<String, Integer>();

Once the hashmap is created, the size of the map will be automatically initialised by 16 which makes the index of the map starts from 0 and finishes to 15.

Now let's say we want to put these three records into the scores map.


scores.put("Smith","100");
scores.put("Blake","87");
scores.put("King","100");

To start with the first record, we will be going through this put() method as shown below.

put(K k, V v)

hash(k)

index = hash & (n-1)

Let's go ahead and start inserting the data.

put(K k, V v) // k = "Smith" and v = "100"

hash(k) // This will get the hash of the string key. in this case hash("SMITH")= 79019862

index = hash & (n-1)// n= 16 and index will be 6

After this process, the map will look like this

After following the same steps for all the records, the map will end up looking like below

notice: I forgot to change the hash value for the second record for Kings in the picture. just note that the hash value for king is different from the one for Blake

Wait, hold on a second, some of you might have noticed that we have 2 records in index 4 node. How did this happen?

If we scroll back a bit up to where we get the index by hash & (n-1), we can check those two records end up having same index which is 4 in this case. Let's say we tried to put Blake's record first and there shouldn't have been any problem, like we understood the data "Blake | hash| score| null" must have been inserted.

But as we insert Kings record after, we will figure out that they have same index number, the map will automatically put the record next to the Blake's record by changing the null value to point out to the next node which is King's in this case. That is how the outcome looks like the map above.

This will also lead us to this question.
"If they have same index number, how do we access to them?"

In order to access to the nodes, we can use get(k) method.
This method looks like this.

V get(Object key)
hash(key)

Index = hash & (n-1)

Now, let's say we want to find King's score in this hashmap using

scores.get("King")

then it will get the hash which is 2306996 and will get the index number which is 4 in this case. In the first node which has index 4, it will compare hashcode between the hascode that we are looking for and the hashcode that this node has. For example, the hascode we are looking for is 2306996 and the node has 63281940 as a hash value. They don't match, so it will be pointed out to the next node which and will do the comparison again. This time the hash value do match since it has 2306996 which we are looking for.

notice: I forgot to change the hash value for the second record for Kings. just note that the hash value for king is different from the one for Blake

Alright!
Today, we have talked about some of the basic concepts of hashmap. Actually, the reason I brought this topic up today was that I realised that hashmap come across very often we we code and it is very easy to just overlook, thinking that we understand how it works 100%. However, when I faced some complicated issues, I realised that I wasn't really understanding how it works and how to use it properly. I hope it helped for some of you guys to understand little bit better about hashmap and not get confused later when we really need to go through some concepts along the way of programming.

Thanks a lot for your time to read this article and Happy new year!!!

What do you think about whiteboard interview?

Emma Ham — Wed, 30 Oct 2019 20:59:45 +0000

SOLID PRINCIPLES: To start with Object-oriented programming

Emma Ham — Tue, 17 Sep 2019 11:17:18 +0000

Hi everyone, today I would like to discuss about something solid.
solid? Of course, no! Not that solid.
wait... ah maybe exactly that solid!

I went to an interview today and was asked this question about "Solid principles". And I was like "um... not really sure" which means "I don't know what you are talking about".
On my way out of the room, I felt like I was definitely in a need of researching about solid principles to properly start off going further to object-oriented programming world in the right direction.

So today, I would like to cover this topic with a few basic definitions and easy examples to help ourselves out to understand the concept in general.

1) What and why : SOLID PRINCIPLES

SOLID stands for..

S.O.L.I.D is an acronym for the first five object-oriented design(OOD)** principles** by Robert C. Martin.

It is just really about a set of principles that we can keep in mind in terms of coding, refining and structuring code.

SOLID does..

By reading it, I had no idea what it is supposed to mean,by all mean. As far as understand, These principles are all about making it easier and cleaner for developers to develop software which are easy to maintain and modify when the scale of it is going bigger and get more complicated. So we can really understand this concept as a way of approaching object-oriented programming by cutting down the unnecessary part and organize the code in a way of refining and re-structuring.

2) Dive into : SOLID PRINCIPLES

First Principle: Single-responsibility Principle

"A class should have one and only one reason to change, meaning that a class should have only one job."

It is as simple as it sounds which means that a class should only perform a single job not the multiple jobs in a same class.
Let's have a look at the example down.

class Book {
  protected $Author;

  public getAuthor($Author) {
    return $this->Author;
  }

  public function formatJson() {
    return json_encode($this->getAuthor());
  }
}

What do you think, do you think you are getting a hang of it?
We can clearly see that Class named 'Book' is performing more than one job which are getting the author of a book and also it is encoding the output to Json format. But what if we want to have an output in a different format not only Json? In that case, we probably have to write few more lines to add more method for that or modifying the existing code. It could look like a minor work at the moment because this example we have right here is extremely simple but imagine there are hundreds or even thousands of classes, it would be better off preventing confusions in advance by implementing these principles.

So, the approach that we can take would be something like

class Book {
  protected $Author;

  public getAuthor($Author){
    return $this->Author;
  }
}

class JsonBookForm {
    public function format(Book $Author) {
        return json_encode($Author->getAuthor());
    }
}

By doing that, If we want to get a different type of output then we don't need to make a change in the Book class directly.

Second Principle: Open-closed Principle

"Objects or entities should be open for extension, but closed for modification."

I know it is getting boring, but this is actually meaning that classes should be extended to change functionality, rather than being modified. It should be a way of extending its functionality when they want to add more options and it should not be the case just changing the existing code directly.

There is a common example which is like down below.

class Triangle{
  public $width;
  public $height;
}

class Board {
  public $triangles= [];
  public function calculateArea() {
    $area = 0;
    foreach ($this->triangles as $triangle) {
      $area += $triangle->width * $triangle->height* 1/2;
    }
  }
}

We have a Triangle class that contains the data for a Triangle which are width and height, and a Board class that is used as a array of Triangle objects.
This code at the moment looks absolute fine but when you think about shape and calculating area function, maybe you might want to use this function later for other shapes as well not only just triangle to increase the efficiency. At the moment, these lines of codes are not allowing this by limiting the Board class only working with the Triangle class.

The approach we can try here is

interface Shape {
   public function area();
}

class Triangle implements Shape {
  public function area() {
    return $this->width * $this->height *1/2;
  }
}
class Circle implements Shape {
  public function area() {
    return $this->radius * $this->radius * pi();
  }
}

class Board {
  public $shapes;

  public function calculateArea() {
    $area = 0;
    foreach ($this->shapes as $shape) {
      $area+= $shape->area();
    }
    return $area;
  }
}

In this way, we don't need to specify the name of the class in the class name Board, so whenever we want to add more properties something like Rectangle we can easily add a class named itself and implements Shape interface so that we can use area() in a Board class.

Third Principle: Liskov substitution principle

"Let q(x) be a property provable about objects of x of type T. Then q(y) should be provable for objects y of type S where S is a subtype of T."

Okay, I know it does sound like my math teacher back in high school. can't really follow.
But look at this picture here

Does this look familiar? We have probably seen this picture in school and I am sure your math teacher must have mentioned it. Where this graph can be implied in our world is something related to the previous example. Shapes.

Speaking of shapes, there are a lot of shapes, right? There are circles, and triangles and rectangles and square.. wait, we all know that rectangle and square are similar but not same right?
Rectangle includes square in terms of the fact that rectangle needs more conditions to be square. So it would be like this.

***oops I put the name the other way around here!!!
The common code we can do here would be

class Rectangle {
  public function setW($w) { 
      $this->width = $w;
  }

  public function setH($h) {
      $this->height = $h;
  }

  public function Area() {
      return $this->height * $this->width;
  }
}

class Square extends Rectangle {
  public function set($w) {
    $this->width = $w;
    $this->height = $w;
  }

  public function setH=($h) {
    $this->height = $h;
    $this->width = $h;
  }
}

But did you realize that there are multiple lines looking exactly same? and considering the fact that in this tutorial, we are doing our best to make the code maintainable and efficient, this way should be avoided and rather trying this way.

interface Setshape {
  public function setH($h);

  public function setW($w);

  public function Area();
}

class Rectangle implements Setshape ;

class Square implements Setshape ;

By doing this way, we don't have to write the same code over and over again, and we can just simple implements the interface to the class.

Forth Principle: Interface segregation principle

"A client should never be forced to implement an interface that it doesn't use or clients shouldn't be forced to depend on methods they do not use."

We are almost there, the forth principle means that classes should not be forced to implement interfaces they do not use. For example, let's say there are some classes looking like

interface Employee {

  public function generatereport()

  public function clockin()

  public function clockout()

  public function customerservice()

  public function getPaid()

}

And let's say there is a duty manager who is doing the most of the functions above but not clockin and clockout because the could possibly get salary not hourly so for them those two functions will be never used. To follow the principle here once again, we should approach it this way.

interface Generalemployee{
 public function clockin()
 public function clockout()
}

interface Employee{
 public function customerservice()
 public function getPaid()
}

interface management{
  public function generatereport()
}

class Staff implements Generalemployee, Employee{
}

class Manager implements Employee, management{
}

Last Principle: Dependency Inversion principle

"Entities must depend on abstractions not on concretions. It states that the high level module must not depend on the low level module, but they should depend on abstractions."

I will go straight to the example for this one

class Getuserlists {
    private $dbConn;

    public function __construct(MySQLConn, $dbConn) {
        $this->dbConn= $dbConn;
    }
}

It is common mistake because according to the hierarchy structure, Getuserlists class is higher module and MySQLConn is a lower module, however, you can easily notice that the class is depending on MySQLConn thoroughly and it would confuse later if we want to use other database not just MySQL.

So the solution on this would be...

interface DbConnectionInterface {
    public function connect();
} 

class MySqlConn implements DbConnectionInterface {
    public function connect() {}
}

class Getuserlists {
    private $dbConn;
    public function __construct(DbConnectionInterface $dbConn) {
        $this->dbConn= $dbConn;
    }
}

According to the little snippet above, you can now see that both the high level and low level modules depend on abstraction.

Congratulations!! We took a step towards Object-oriented programming world!!

Conclusion

SOLID principles seemed to be a very confusing at first, and still will have some more struggles in order to make it to mine and get to the point where I can use comfortably without even realizing but It is always good to have some guidelines we can follow, isn't it?

How to optimize your website(feat.brotli Compression)

Emma Ham — Wed, 04 Sep 2019 05:13:49 +0000

Hi everyone!
Last time, I talked about Gzip compression which is one of the most common way to encode content, and someone have mentioned about brotli by Google.
For that reason, today I would to talk little bit about brotli.
If you haven't read my last post about Gzip compression, please Jump on here!

Alright, like mentioned above, Gzip is one of the popular and common ways of content encoding yet very useful in terms of the fact that it is easy to use because it can be executed simply by adjusting the setting provided by web server.
However, at the same time it is getting critics because it is not perfect when it comes to security problems.

FIRST: Birth of Brotli

In September 2015, Google released the Brotli as a open source and then it started getting popular as chrome started supporting brotli compression.

SECOND: Gzip VS Brotli

I know, You must be curious about which one is the best and I know always there would some discussions and different opinions on this.
But, according the this article which is comparing some of the compression technology including gzip and brotli,
less means better

It is concluded that in terms of ratio of compression, brotli is showing the best result, yet in the compression speed area, gzip is showing the better result.

If you want to have a look at more articles on this, the links below might help you to understand more.

1)https://hacks.mozilla.org/2015/11/better-than-gzip-compression-with-brotli/
2)https://medium.com/oyotech/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4

THIRD: Using Brotli on Nginx

Obviously, nginx is one of the web servers that has so many benefits. However, when we use brotli, it might require bit of an extra work.
If nginx version has been changed, we need to accordingly compile and reset the setting which sounds quite annoying at this point.
In order to reduce the extra work, there are some ways to automate these steps on internet yet it is not perfect.

Here are some links about Brotli support
1) https://github.com/pothi/nginx-brotli

2) Brotli with Engintron Nginx

LAST: Conclusion

To sum up, Brotil is probably the best way to execute the content encoding comparing to previous deflate or gzip when we consider the fact that it definitely increases the ratio of compression and obviously reduces the loading time at maximum 20%. However, there are still some discussions about whether it is also better way for dynamic contents websites not only for static websites. Also, we need to keep an eye on the fact that it might be high-maintenance in some ways.

How to optimize your php website(feat.Gzip Compression)

Emma Ham — Tue, 03 Sep 2019 02:50:15 +0000

Have you ever experienced when you grind your soul to make this website beautiful and once you deploy it online, It just takes forever to load and you feel bloody awkward in front of others cuz they also have to wait for eternal?

common we've all been there

Things get normally worse if it is deployed on free hosting website such as heroku, github.it etc.

Then, What we can do about it.

FIRST: a diagnosis

As simple and obvious as it sounds, we need to first figure out how slow the website is and what are the causes, just like we receive a diagnosis from doctors!
In order to do this, there are some useful links you might want to bookmark.
Even though I know for a fact that there are hundreds of websites that do the similar works but it is purely the matter of a taste and these two are my favorite in terms of simple and straight forward UI designs and its contents.

a. uptrends.com/tools/website-speed-test
b. tools.pingdom.com/

Well, this is how it looks when you click the second link which is pingdom which helped me a lot to look at the problem clearly. You can simply copy your website url and select the location that you want to test from. And hit the "Start test" button!

Let's have a look at the result.

Seems like the overall performance grade is not so terrible, however I had a "D" grade under the name of 'Compress components'.
It is saying

"Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today's Internet traffic travels through browsers that claim to support gzip."

Alright, it sounds like it is time for us to dig into "gzip" part, doesn't it?

SECOND: Gzip, what are you?

Before, we get to the Gzip, it would be easier to understand the concept of content encoding with some explanations like this.

Original

Browser: Hey dude, can I get index.php file?
Server: Give a sec, wait....Yes! got it! I’m sending the file to you.
Browser: 200KB? Ouch… waiting, I am gonna need more time… ok, it’s done and loaded.

After Compression

Browser: Hey dude, can I get index.php file? I wouldn't mind a compressed version if you have any.
Server: Give a sec, wait....Yes! got it! You said you are good with compressed one? amazing. I’m sending the file to you.
Browser: Great! It’s only 20KB. I’ll unzip it myself!

It is as simple as that! Smaller file can reduce so much time to download so that users don't have to wait for a long time to see the whole websites.

THIRD: Gzip, How can I have you?

Okay, let's get to the point right now to actually implement Gzip to our websites. It is going to be quite straight forward yet the syntax can varies so have that in mind!

Firstly, Open your .htaccess file in your root folder. If you don't have it, then you can simply make one. In side of that file, what we can do is to specify the type of file that we want to compress. I would look like this.



<IfModule deflate_module>
    # Enable compression for the following file types.
    AddOutputFilterByType            \
     DEFLATE                         \
      application/javascript         \
      text/css                       \
      text/html                      \
      text/javascript                \
      text/plain                     \
      text/xml
</IfModule>

But note that Gzip is not able to compress which is already compressed in a way of compressed formats such as PNG, Zip or any other compressed formats.

In Apache, this would work too



# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

If above doesn't work, then try this one here



<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_include mime ^text/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_include handler ^cgi-script$
</ifModule>

Secondly, Put this php code on the top of your main pages



<?php
if (!isset($_SERVER['HTTP_ACCEPT_ENCODING'])) {
    ob_start();            
}
elseif (strpos(' ' . $_SERVER['HTTP_ACCEPT_ENCODING'], 'x-gzip') == false) {
    if (strpos(' ' . $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip') == false) {
        ob_start();
    }
    elseif(!ob_start("ob_gzhandler")) {
        ob_start();
    }   
}
elseif(!ob_start("ob_gzhandler")) {
    ob_start();
}
?>

Thirdly, Let's go ahead and check if the compression is working!
gidnetwork.com/tools/gzip-test.php

Horray! it said that is is compressed right and type of compression is gzip. Looks like we've done our job here:)

Lastly, Little extra If you are not still satisfied with the speed.



## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Put those lines above in .htaccess file. What it does is the mentioned file will be stored in caching and expire after a certain time so if you visit the website again few days later and you won't need to wait for the browser to load all the files all over again!

Finally: Let's check again how it worked on the website

I clicked the first link to check the speed and it is how it turned out!

Wow, looks pretty cool and sounds like I reduce some loading time obviously.

Conclusion::

By compressing your site’s files, you can make sure loading time stay low, and your users don’t suffer from unnecessary slowdowns.
I hope this article would help you somehow and please let me know if you found this content useful Thank you!

If you want to have a look my website
Come and visit here

DEV Community: Emma Ham

I know you want to build AI applications too : LangChain

Hey there!

- But first,

1. What is LangChain, anyway?

Basic data flow of LangChain

2. But still, why use it?

3. 6 Main Components of LangChain

4. Example DocsAssistantAI

5. What's coming next?

You Are Using ChatGPT Incorrectly!

In my defense😅

An interesting research

4 Prompt Patterns for today

👉 Pattern 1

👉 Pattern 2

👉 Pattern 3

👉 Pattern 4

🚀🚀 That wraps up today!🚀🚀

Multi-Modules Architecture: Dependency Management _ Build your own gradle plugin

1: Understanding Multi-Module Projects

2: The Dependency Management Dilemma

3: What can we expect from this post?

4: Solution: Build your own custom gradle plugin

Step 1: Create the buildSrc/ Module

Step 2: Develop Your Custom Plugin

Step 3: Extracting Duplicate Code from build.gradle Files

Step 4: Applying Your Custom Plugin

5: Summary

KOTLIN COROUTINE: don't click, this post is only for myself

Kotlin Coroutine: What is it?

Okay, I think it is enough for toilet example. Let's talk some real coding example

Kotlin Coroutine: Concepts

With that being said, let's modify the snippet earlier to coroutine way

Yes

Dispatcher

Coroutine Scopes

We will dive in deeper in the next post!

Android: Accessing view, now what? (butterknife, viewbinding, databinding comparison)

Step1: What are there for us

A. FindViewByID

B. Butterknife

C. Kotlin Synthetic

D. ViewBinding VS Databinding

Thanks for reading!

WARNING: MEMORY LEAKS (feat. Java, Android Studio)

1. What is MEMORY LEAK?

2. What could cause MEMORY LEAK?

3. How do we detect MEMORY LEAK?

Profiler

LeakCanary

4. Conclusion

More to read

What is your new year's resolution as a developer?

Super basic: How Hashmap works in Java

What do you think about whiteboard interview?

SOLID PRINCIPLES: To start with Object-oriented programming

1) What and why : SOLID PRINCIPLES

SOLID stands for..

SOLID does..

2) Dive into : SOLID PRINCIPLES

First Principle: Single-responsibility Principle

"A class should have one and only one reason to change, meaning that a class should have only one job."

Second Principle: Open-closed Principle

"Objects or entities should be open for extension, but closed for modification."

Third Principle: Liskov substitution principle

"Let q(x) be a property provable about objects of x of type T. Then q(y) should be provable for objects y of type S where S is a subtype of T."

Forth Principle: Interface segregation principle

"A client should never be forced to implement an interface that it doesn't use or clients shouldn't be forced to depend on methods they do not use."

Last Principle: Dependency Inversion principle

"Entities must depend on abstractions not on concretions. It states that the high level module must not depend on the low level module, but they should depend on abstractions."

Congratulations!! We took a step towards Object-oriented programming world!!

Conclusion

How to optimize your website(feat.brotli Compression)

FIRST: Birth of Brotli

SECOND: Gzip VS Brotli

THIRD: Using Brotli on Nginx

LAST: Conclusion

How to optimize your php website(feat.Gzip Compression)

FIRST: a diagnosis