DEV Community: Your Tech Sis

Dynamic programming: Teach me like I am 5!

Your Tech Sis — Wed, 17 Jul 2024 01:00:08 +0000

Imagine you have a magical notebook 📓✨. This notebook remembers answers to problems you’ve already solved so you don’t have to solve them again.

Let’s start with something simple: climbing stairs. Each time, you can either take 1 step or 2 steps. How many ways can you climb to the top if there are n stairs?

Magical Notebook to the Rescue!

Define the problem: To find the number of ways to reach the nth step.
Remember the simple problems: The number of ways to get to step 1 is 1, and to step 2 is 2.
Steps:

If you’re on step 1, there’s only one way to stay there.
If you’re on step 2, there are two ways: step 1 to step 2, or jump directly to step 2.
For step 3 and beyond, you can either come from the step right before it (n-1) or jump from the step two before it (n-2).

Let’s write this in code:
`def climbStairs(n):
if n == 1:
return 1
elif n == 2:
return 2
else:
steps = [0] * (n + 1)
steps[1] = 1
steps[2] = 2
for i in range(3, n + 1):
steps[i] = steps[i - 1] + steps[i - 2]
return steps[n]

print(climbStairs(5)) # Output: 8`

Another example!
You are in a candy store, and there are different candies in a line. Each candy has a different amount of happiness points. You can’t take two candies next to each other, or you’ll get a tummy ache. How do you collect the most happiness?

Magical Notebook to the Rescue!

Define the problem: To find the maximum happiness you can collect without taking two candies next to each other.
Remember the simple problems: The happiness points for each candy.
Steps:

If you only have one candy, take it.
If you have two candies, take the one with more happiness.
For three or more candies:

Decide to take the current candy and add it to the best of skipping the next candy.
Or skip the current candy and take the best up to the previous candy.
Let’s write this in code:
def maxCandyHappiness(happiness): n = len(happiness) if n == 0: return 0 elif n == 1: return happiness[0] elif n == 2: return max(happiness[0], happiness[1]) else: max_happiness = [0] * n max_happiness[0] = happiness[0] max_happiness[1] = max(happiness[0], happiness[1]) for i in range(2, n): max_happiness[i] = max(max_happiness[i-1], happiness[i] + max_happiness[i-2]) return max(max_happiness) happiness = [3, 2, 5, 10, 7] print(maxCandyHappiness(happiness)) # Output: 15

Why Use Dynamic Programming?
It saves time! Instead of doing the same work over and over, your helper remembers the answers and by remembering small answers, your helper can find the best way to solve the big problem!

Hope this helps!

Here are 3 leetcode questions to get you comfortable with this concept. Let me know how it goes ☺️

Jump Game : https://leetcode.com/problems/jump-game/description/

Unique Paths: https://leetcode.com/problems/unique-paths/description/

Scramble Strings: https://leetcode.com/problems/scramble-string/description/

Follow me on Instagram : https://www.instagram.com/yourtechsiss/

Tiktok: https://www.tiktok.com/@yourtechsiss

Binding event handlers in React

Your Tech Sis — Tue, 10 Jan 2023 12:24:26 +0000

The reason we bind event handlers is because of the way this keyword works in JavaScript. As an example, we’ll create a button and when the button is clicked we’ll simply change a message which is part of the component’s state.

Create a new file, we’ll call it EventBind.js. Create a class component and add a button. Next, create a state property called “message” and bind it to the user interface. Add the onClick attribute to the button and pass the event handler within curly braces. Define the clickHandler() method and change the state using setState() method. Your final code should look like this:

import React, {Component} from 'react'
class EventBind extends Component{
    constructor(props){
        super(props)
        this.state = {
            message: 'Hi there!'
        }  
    }
    clickHandler(){
        this.setState({
            message: 'Goodbye!'
        })
    }

    render(){
        return(
            <div>
                <div>{this.state.message}</div>

                <button onClick={this.clickHandler}>Click me!</button>

            </div>
        )
    }
}
export default EventBind

If you run the code and check the console, you’d notice that when you click the button there’s an error and the application breaks. The problem here is that the this keyword here is undefined. The this keyword is usually undefined in an event handler and that’s why event binding is necessary in a Class Component. There are several ways to bind event handlers. Let’s look at each of them one after the other.

The first approach is to use the bind keyword and bind the handler in the render() method.

    render(){
        return(
            <div>
                <div>{this.state.message}</div>

                <button onClick={this.clickHandler.bind(this)}>Click me!</button>

            </div>
        )
    }
}
export default EventBind

Check the browser and now everything should work fine. Although this option works fine, every update to the state will cause the component to rerender. This will generate a new event handler on every render. Although the impact on performance is not severe in small applications, it could be troublesome in large applications and components that contain nested children components.

The second approach is to use arrow functions in the render() method.

render(){
        return(
            <div>
                <div>{this.state.message}</div>

                <button onClick={() => this.clickHandler()}>Click me!</button>

            </div>
        )
    }
}
export default EventBind

Similar to the first approach, this also has performance implications in some cases.

The third approach is to bind the event handler in the class constructor. This approach is in the official React documentation.

import React, {Component} from 'react'
class EventBind extends Component{
    constructor(props){
        super(props)
        this.state = {
            message: 'Hi there!'
        }
        this.clickHandler = this.clickHandler.bind(this) 
    }
    clickHandler(){
        this.setState({
            message: 'Goodbye!'
        })
    }

    render(){
        return(
            <div>
                <div>{this.state.message}</div>

                <button onClick={this.clickHandler}>Click me!</button>

            </div>
        )
    }
}
export default EventBind

Now because the binding happens once in the constructor, this is better than binding in the render() method.

The final approach is to use an arrow function as a class property.

import React, {Component} from 'react'
class EventBind extends Component{
    constructor(props){
        super(props)
        this.state = {
            message: 'Hi there!'
        }  
    }
    clickHandler = () => {
        this.setState({
            message: 'Goodbye!'
        })
    }

    render(){
        return(
            <div>
                <div>{this.state.message}</div>

                <button onClick={this.clickHandler}>Click me!</button>

            </div>
        )
    }
}
export default EventBind

So those are the four approaches.

Binding the handler in the render() method.
Using arrow functions in the render() method.
Binding the event handler in the class constructor.
Arrow function as a class property.

The first approach is something you might not want to use because of performance implications. The second approach is the easiest way to pass parameters. If your code doesn’t involve re-rendering nested children components, this approach is probably a viable option. React documentation suggests either approach 3 or approach 4.

Hope this helps!

Generics in Java

Your Tech Sis — Mon, 16 Aug 2021 18:34:11 +0000

Hi there! In this article, we will learn about Java Generics, how to create generics class and methods, its advantages and how they can be used to improve the quality of our code.

Java Generics were introduced in JDK 5.0 with the aim of reducing bugs and adding an extra layer of abstraction over types. Generics mean parameterized types. The Java Generics allows us to create a single class, interface, and method that can be used with different types of data (objects) and this helps us to reuse our code.

Generic methods are those methods that are written with a single method declaration and can be called with arguments of different types.

Generics also provide compile-time type safety that allows programmers to catch invalid types at compile time.

"It is important to note that Generics does not work with primitive types (int, float, char, etc)."

Why Generics?

Let's say we want to create a list in Java to store Integer; we can be tempted to write:

List list = new LinkedList();
list.add(new Integer(1)); 
Integer i = list.iterator().next();

The compiler will complain about the last line as it doesn't know what data type is returned and it requires an explicit casting:

Integer i = (Integer) list.iterator.next();

Now, this cast can be annoying, we know that the data type in this list is an Integer. The cast is also cluttering our code. It can cause type-related runtime errors if a programmer makes a mistake with the explicit casting.

It would be much easier if programmers could express their intention of using specific types and the compiler can ensure the correctness of such type. This is the main idea behind generics.

Let's modify the code now..

List<Integer> list = new LinkedList<>();

By adding the operator <> containing the type, we narrow the specialization of this list only to the Integer type, that is, we specify the type that will be held inside the list. The compiler can then enforce the type at compile time. This can add significant robustness and makes the program easier to read.

We can create a class that can be used with any type of data. Such a class is known as Generics Class. Here's is how we can create a generics class in Java:

class Main {
  public static void main(String[] args) {

    // initialize generic class with Integer data

    GenericsClass<Integer> intObj = new GenericsClass<>(5);
    System.out.println("Generic Class returns: " + intObj.getData());

    // initialize generic class with string data

    GenericsClass<String> stringObj = new GenericsClass<>("Java Programming");
    System.out.println("Generic Class returns: " + stringObj.getData());
  }
}

// create a generics class
class GenericsClass<T> {

  // variable of T type
  private T data;

  public GenericsClass(T data) {
    this.data = data;
  }

  // method that return T type variable
  public T getData() {
    return this.data;
  }
}

The Output

Generic Class returns: 5
Generic Class returns: Java Programming

Here, we have created a generic class named GenericsClass and this class can be used to work with any type of data.

class GenericsClass<T> {...}

Here, T used inside the angle bracket <> indicates the type parameter. Inside the Main class, we have created two objects of GenericsClass

intObj - Here, the type parameter T is replaced by Integer. Now, the GenericsClass works with integer data.

stringObj - Here, the type parameter T is replaced by String. Now, the GenericsClass works with string data.

We can also create a method that can be used with any type of data. Such a class is known as Generics Method.

Here's is how we can create a generics class in Java:

class Main {
  public static void main(String[] args) {

    // initialize the class with Integer data
    DemoClass demo = new DemoClass();

    // generics method working with String
    demo.<String>genericsMethod("Java Programming");

    // generics method working with integer
    demo.<Integer>genericsMethod(25);
  }
}

class DemoClass {

  // creae a generics method
  public <T> void genericsMethod(T data) {
    System.out.println("Generics Method:");
    System.out.println("Data Passed: " + data);
  }
}

The Output

Generics Method:
Data Passed: Java Programming
Generics Method:
Data Passed: 25

And so, in the above code, we have created a generic method named genericsMethod.

public <T> void genericMethod(T data) {...}

We can call the generics method by placing the actual type and inside the bracket before the method name.

demo.<String>genericMethod("Java Programming");

demo.<Integer>genericMethod(25);

We can call the generics method without including the type parameter. For example,

demo.genericsMethod("Java Programming");

Bounded Types

Let's take a look at Bounded Types. The type parameter can accept any data types (except primitive types).

Bounded means “restricted“, we can restrict types that can be accepted by a method.

If we want to use generics for some specific types (such as accept data of number types or accept data of string types) only, then we can use bounded types.

In the case of bound types, we use the extends keyword.

<T extends A>

This means T can only accept data that are subtypes of A.

class GenericsClass <T extends Number> {

  public void display() {
    System.out.println("This is a bounded type generics class.");
  }
}

class Main {
  public static void main(String[] args) {

    // create an object of GenericsClass
    GenericsClass<String> obj = new GenericsClass<>();
  }
}

In the above code, we have created a class named GenericsClass. Notice the expression GenericsClass is created with bounded type. This means GenericsClass can only work with data types that are children of Number (Integer, Double, and so on).

Advantages of Generics

It promotes Code Reuse: With the help of generics in Java, we can write code that will work with different types of data.

public <T> void genericsMethod(T data) {...}

The method above can be used to perform operations on integer data, string data, and so on.

Type Safety

It’s always better to know problems in your code at compile time rather than making your code fail at run time

Generics make errors to appear compile time than at run time.

// using Generics
GenericsClass<Integer> list = new GenericsClass<>();

Here, we know that GenericsClass is working with Integer data only.

If we try to pass data other than Integer to this class, the program will generate an error at compile time.

Individual Type Casting is not needed

// Using generics converts run time exceptions into
// compile time exception.
import java.util.*;

class Test
{
    public static void main(String[] args)
    {
        // Creating a an ArrayList with String specified
        ArrayList <String> al = new ArrayList<String> ();

        al.add("Success");
        al.add("Gideon");


        String s1 = (String)al.get(0);
        String s2 = (String)al.get(1);

    }
}

If we do not use generics, then, in the above example every time we retrieve data from ArrayList, we have to typecast it. Typecasting at every retrieval operation can be quite stressful, in fact, annoying. If we already know that our list only holds string data then we need not typecast it every time.

// We don't need to typecast individual members of ArrayList
import java.util.*;

class Test
{
    public static void main(String[] args)
    {
        // Creating a an ArrayList with String specified
        ArrayList <String> al = new ArrayList<String> ();

        al.add("Success");
        al.add("Gideon");

        // Typecasting is not needed
        String s1 = al.get(0);
        String s2 = al.get(1);
    }
}

Conclusion

Generics is a powerful addition to the Java language as it makes the programmer's job easier and less error-prone. Generics enforce type correctness at compile time and it enables implementing generic algorithms without causing any extra overhead to our applications.

Thanks for reading! Please write comments if you find anything incorrect, or you want to share more information about the topic discussed above.

Connect with me:
Twitter: https://twitter.com/DaCodess
Instagram: https://instagram.com/realsuccess._
LinkedIn: https://www.linkedin.com/in/success-godday-2772651b2/

Functional programming vs object oriented programming

Your Tech Sis — Wed, 12 May 2021 08:09:08 +0000

Functional programming is the programming technique that accentuates the functional factors required for creating and implementing the programs. Simply put, Functional programming (FP) is the process of building software by composing pure functions. Object-oriented programming is a programming paradigm based on the concept of "objects", which can contain data and code: data in the form of fields, and code, in the form of procedures.

Functional programming:
Functional programming is a declarative programming paradigm where programs are created by applying sequential functions rather than statements. Each function takes in an input value and returns a consistent output value without altering or being affected by the program state.
Functional programming is gaining popularity due to its efficiency and scalability to solve modern problems. Functional programming supports programming languages like Lisp, Clojure, Wolfram, Erlang, Haskell, F#, R, and other prominent languages. Functional programming is great for data science work.

Object-oriented programming:
Object Oriented programming (OOP) is a programming paradigm that relies on the concept of classes and objects. It is used to structure a software program into simple, reusable pieces of code blueprints (usually called classes), which are used to create individual instances of objects. Object-oriented programming languages include JavaScript, C++, Java, and Python. Object-oriented programming is about creating objects that contain both data and functions. A class is an abstract blueprint used to create more specific, concrete objects. Classes define what attributes an instance of this type will have, like color, but not the value of those attributes for a specific object.Classes can also contain functions, called methods available only to objects of that type. These functions are defined within the class and perform some action helpful to that specific type of object.

Functional programming vs Object oriented programming

Functional programming emphasizes on evaluation of functions while object oriented programming is based on the concept of objects.
Functional programming uses immutable data while object oriented programming uses the mutable data.
Functional programming follows the declarative programming model while object oriented programming follows the imperative programming model.
Functional programming supports parallel programming while object oriented programming does not.
In functional programming, statements can be executed in any order. In OOP, statements are executed in a particular order.
In functional programming, recursion is used for iterative data while in OOP, loops are used for iterative data.
Variables and functions are the basic elements of functional programming. Objects and models are the basic elements of object oriented programming.
Functional programming is used only when there are few things with more operations. Object-oriented programming is used when there are many things with few operations.
In functional programming, a state does not exist. In object-oriented programming, the state exists.
In functional programming, a function is the primary manipulation unit. In object-oriented, an object is the primary manipulation unit.
Functional programming provides high performance in processing large data for applications. Object-oriented programming is not good for big data processing.
Functional programming does not support conditional statements. In Object-oriented programming, conditional statements can be used like if-else statements and switch statement.

Which is better?

Well,it depends on what your program is trying to do.
Both OOP and FP have the shared goal of creating understandable, flexible programs that are free of bugs. But they have two different approaches for how to best create those programs.
In all programs, there are two primary components: the data (the stuff a program knows) and the behaviors (the stuff a program can do to/with that data). OOP says that bringing together data and its associated behavior in a single location (called an “object”) makes it easier to understand how a program works. Functional programming says that data and behavior are distinctively different things and should be kept separate for clarity.
In functional programming, data cannot be stored in objects, and it can only be transformed by creating functions. In object-oriented programming, data is stored in objects. Object-oriented programming is widely used by programmers and successful also.

In Object-oriented programming, it is quite hard to maintain objects while increasing the levels of inheritance. In functional programming, it requires a new object to execute functions, and it takes a lot of memory for executing the applications.
Each has their own advantages and disadvantages, it is up to the programmers or developers to choose the programming language concept that makes their development productive and easy.

Best practices every mobile app developer should know and adhere to

Your Tech Sis — Wed, 13 Jan 2021 13:32:27 +0000

Mobile app development is the process by which a mobile app is developed for mobile devices, such as personal digital assistants, enterprise digital assistants or mobile phones. It also means developing mobile application for devices that run mobile operating systems like iOS, Android, and Windows Phone. Here are some best practices every mobile app developer should follow:

1) Adhere to the app store development policies: If you want to make an Android app, you need to follow the Android Developer Guide. Similarly, for an iOS app you need to follow the Apple Developer Program guideline. You also need to understand regulations and best practices for the Apple App Store and Google Play Store. Failure to comply with those rules, could get your app rejected when you distribute your app to the app store. Now that's not good at all, so adhere to their instructions!

2) For every task you do, do it properly: You should list all the features that are the most important for your app functionality. Then, other features can come around. When this is done right, you will create a very good app. For every task you do, you should do it properly. This reduces the chance of making bugs and errors during the development process. Ensure all the features are well-connected with each other. Don’t just rush to the next step. Try to complete each stage.

3) Prioritize security: Your app could contain a lot of sensitive data (personal information) like name, email, phonenumber, credit card information, etc.
You need to prioritize security from the very start. Your users will be concerned about cyber-attacks and data breaches. If app isn't secure, users may leave you.

4) Test your app repeatedly : For every feature you complete, you should test it. If you don’t do this, it will be harder to identify and fix bugs. Test as you progress. This will improve your app's performance.

5) Get people to review your app: You’re going to need this to develop your app properly.

You can reach out to other developers that you know for advice.

When you’re working on a project for a while, you may not see something obvious that another developer would easily notice.

Other developers can help you identify things that an average user wouldn’t notice.

Conclusion

You’re developing a mobile app, that’s something that most people can't do!
You’re going to encounter some speed bumps along the way. Try not to stress out, even though sometimes it might be tough. Hope this helps!

Connect with me:
Twitter : @DaCodess
Instagram : @realsuccess._

Internet Safety Tips

Your Tech Sis — Thu, 31 Dec 2020 12:28:57 +0000

Here are the Top 5 Internet safety rules to follow to help you avoid getting into trouble online!!

1) Be careful what you download: One of the goals of cybercriminals is to trick you into downloading malware (programs or apps that carry malware or try to steal information). This malware can be disguised as an app or a popular game. Downloading things from the Internet and clicking 'Accept' on popup windows is what causes the majority of computers to get infected. Don't download apps that look suspicious or come from a site you don't trust!

2) Use strong passwords: Passwords are one of the biggest weak spots in the whole Internet security structure. The problem with passwords is that people tend to choose easy ones to remember (such as "password" and "123456"), which are also easy for cyber thieves to guess. Use strong passwords that are harder for cybercriminals to demystify. A strong password is one that is unique and complex—at least 15 characters long, mixing letters, numbers and special characters. You can use password manager software to manage multiple passwords so that you don't forget them.

3) Make online purchases from secure sites: Any time you make a purchase online, you need to provide credit card or bank account information and that's just what cybercriminals are most eager to get their hands on! Only supply this information to sites that provide secure, encrypted connections. You can identify secure sites by looking for an address that starts with https: (the S stands for secure) rather than http: They may also be marked by a padlock icon next to the address bar in your browser. Sites using popular/recognized payment sytems for online payments are also safe too.

4) Click wisely: Do not click suspicious links from untrusted sources, ‘free’ offers or unsolicited ads. They are easy to recognize: all will urge you to click on them. If it is a malicious email attachment, the text will not mention the file, instead saying ‘open the attached file and let me know what you think’.
On a website, make sure both text and link are corresponding. If you click a link to read more about wildlife conservation and instead of seeing some wild animals or forest, you get a ‘success story’ about a celebrity who made millions of dollars overnight, then it’s better to leave the page!

5) Be careful what you post online: Content shared on the internet is never deleted. Even though you may have deleted content from your profile, you don’t know who has already seen it and/or stored it. You and other users of that site might not be able to see the deleted info, but it’s still stored somewhere. You can minimize your online footprint by personally deleting info from your social media sites, which will lower the chances of your data being further shared, but the reality is that you can never completely remove yourself or your information from the internet. Do not post documents with your address and other sensitive information!

Connect with me:
Twitter : @DaCodess
Instagram : @realsuccess._
Facebook : The Codess

Common mistakes frontend developers make and their solutions

Your Tech Sis — Thu, 24 Dec 2020 14:45:50 +0000

If you are new to software development, frontend developers are the ones that bring designs and functionality together. They are the glue that connects pretty images that designers make together with the functionality and logic built by backend developers, so websites look and work how they should. Every website you visit, what you see and interact with is created by frontend developers! In their work, they make use of three main tools - HTML5, CSS and Javascript. HTML is used for building the page structure, CSS is responsible for page rendering while JavaScript brings in the interactive elements. Together, these three technologies bring websites to life.

So what are the common mistakes frontend developers make?

Cross-Browser compatibility : Since each browser renders pages differently, developers need to test the site fully on each browser to ensure cross-browser compatibility. It is a lengthy process but if you care for user's experience, you know this is is important. There are tools out there that help with testing, such as BrowserStack, CrossBrowserTesting, LambdaTest, and others. Check them out. Whatever you do, do not skip testing!
One HTML for everything: Most developers put everything into one HTML file. They put HTML, CSS and Javascript in one file. This is a bad practice. Move your Javascript files into and external folder and get familiar with native web components. Frameworks like Vue or React can help you implement modular components easier, you might want to look into that.
Autoplay: It is annoying when you open a website and suddenly a video starts blaring noise in our ears😐. While developers are actually trying to prevent it, they use the attribute ‘autoplay” in the video’s source tag, then set it to “false”.
The issue here is that “autoplay” is not a boolean type variable, it doesn’t work based on “true” or “false" rules. So instead, the browser sees the string and ignoring the “false” setting attempt, auto plays the video. The simplest solution is to remove the attitude or use an attribute like “autostart” that is working by boolean preferences.
Forgetting input validation: Don't make the assumption that your users will input the proper data in the right fields. It is highly recommended to use input validation at all times. It ensures the correct data in the correct format is stored in your database, it is a good UX practice and is highly beneficial for your security, since it helps prevent injection attacks, systems compromises, and memory leakage.

Finally,

Not focusing on site speed: Site speed affects bounce rates, conversion rates, revenue and user satisfaction. Site speed depends on various factors. For example, client side can become slow due to “Spaghetti” JavaScript code. Large images can slow down page loading speed too. Slow sites frustrate users, thus it’s beneficial to put into use site speed testers that identify design elements responsible for slowing down your site. Good JavaScript libraries and supported code help design a responsive and mobile friendly site 👌.

Connect with me:
Twitter : @DaCodess
Instagram: @realsuccess._