Stories by Ateshan Gunduz on Medium

Devin AI Software Engineer

Ateshan Gunduz — Sun, 24 Mar 2024 10:19:20 GMT

Devin is claimed to be the world’s first fully autonomous AI software engineer. There are several features claimed that Devin can achieve but how accurate and true those claims are. Do developers need be scared? Will AI eventually take our jobs? Many questions to be answered, but we should not be so worried about it. We should consider the fact that claims might be tested on specific, trained areas and there might be loop holes where developers can thrive. We should also consider that Cognition-Labs need a lot of funding and they need to come up with best results.

Introducing Devin, the first AI software engineer

Devin’s capabilities are consist of “Learning unfamiliar technologies”, “End to end build and deployment”, “Finding and fixing bug autonomously”, “Training and tuning its own AI”, “Addressing bugs and feature request from repos”, “Contribute to production repos”, and “Accomplishing real jobs from Upwork”.

If we deep dive into capabilities claimed, and be little suspicions about the data given from the link above we can find out that implementation and reality is not that scary. For instance, “Devin correctly resolves 13.86%* of the issues end-to-end, far exceeding the previous state-of-the-art of 1.96%.” However chart description gives us an information such “*Devin was evaluated on a random 25% subset of the dataset.” Although, what Devin can accomplish seems impressing, since we can not try ourself, some of the information are still vague. This means, they may randomly choose the 25% until they got 25% that provide the intended number.

Overall, Devin is a cool tool can accomplish many things. Still, it currently needs a technical knowledge in order to use it. It shall make developers jobs easy and fast.

Stackademic 🎓

Thank you for reading until the end. Before you go:

Please consider clapping and following the writer! 👏
Follow us X | LinkedIn | YouTube | Discord
Visit our other platforms: In Plain English | CoFeed | Venture | Cubed
More content at Stackademic.com

Devin AI Software Engineer was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

An Introduction to React Native

Ateshan Gunduz — Tue, 12 Mar 2024 12:40:12 GMT

For building cross-platform mobile applications with JavaScript and React, React Native is a useful option. Before the cross-platform frameworks such as React Native, specific tools and languages were needed for iOS and Android seperatly. Specifically, Objective-C, Swift and Xcode for iOS and Kotlin, Java and Android studio for Android. Those were causing several challenges such as time, learning curve and code duplication. Developing separate codebases for both were time and resource consuming and often led to code duplication. On the other hand developers were need to be proficient in languages of both sides. React Native enables developers to create apps with single codebase for both iOS and Android.

In order to demonstrate simple introduction to React Native, predefined components called tags and CSS with objects will be our beginning point.

React Native Tags

Just like the tags in React, we are using special tags in our JSX.

import { StyleSheet,Alert, Text, View, Modal, ImageBackground, ScrollView, Button, ActivityIndicator } from 'react-native'

When compared to react, View works similar with div and Text works similar with p or span tags. ScrollView on the other hand provides us a scrollable div. ImageBackground let us set a box with background using uri instead of url.

Modal let us to prevent navigate full page transition by overlaying a component on our page. This helps user helps to keep the user’s focus on a specific task. Also instead of onClick we are using onPress to handle our button functions.

Styling

In React Native, styles are defined using JavaScript objects and can be applied directly to components. Or we can also use inline styles.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 100,j    
  },
})

export default function App() { 
return (

Although there many other abilities you can do with React Native as starting up a basic demonstration shall suffice. React native is becoming more popular due to its efficiency in the development process.

Stackademic 🎓

Thank you for reading until the end. Before you go:

Please consider clapping and following the writer! 👏
Follow us X | LinkedIn | YouTube | Discord
Visit our other platforms: In Plain English | CoFeed | Venture | Cubed
More content at Stackademic.com

An Introduction to React Native was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

React19 2024 What’s coming?

Ateshan Gunduz — Sun, 03 Mar 2024 08:03:09 GMT

The new major release, React 19, is estimated to be out at the end of 2024 or at the beginning of 2025. Possible features that might be implemented in future and the general direction that react is going is released by React recently. For the full detailed information you can reach the formal article below.

React Labs: What We've Been Working On - February 2024 - React

In order to quick sum up the situation and understand what is coming, lets dive-in on what is coming.

React Compiler

It used to be a research project within the react team. However, recent release tells us that it is currently powers the Instagram. So it is working. But what does is do? It is basically a solution for unnecessary renders in our components. We all stumble upon situations where only certain parts of our component should be re-rendered. Still, in those situation we are provided useMemo, useCallback, and memo. React Compiler brings us an automatic solution in which we will no longer need to use those performance optimization tools. It will re-render only right parts of the component by itself so that developers will not need to deal with memoization.

Actions

It is collection of actions for data submission from client to server. Basically enables synchronous and asynchronous functions for submitting by two new hooks called useFormStatus and useFormState. First one is for giving us a status information about the last submission of the form. Second one on the other hand is updates the state with the result of form action.

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();
  return 
}

export default function App() {
  return (
    
      
    
  );
}

import { useFormState } from "react-dom";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  const [state, formAction] = useFormState(increment, 0);
  return (
    
      {state}
      
    

  )
}

useOptimistic

Brand new hook along side with actions. It enables us to optimistically update the UI. In which temporary updates will be automatically reverted once the final state commits.

import { useOptimistic } from 'react';

function AppContainer() {
  const [optimisticState, addOptimistic] = useOptimistic(
    state,
    // updateFn
    (currentState, optimisticValue) => {
      // merge and return new state
      // with optimistic value
    }
  );
}

You can check and test those new features before the actual release from the new Canary channel on React’s website below.

Versioning Policy - React

Canary Channel

With this feature React allow us test everything before. They are releasing the canary with many features such as react server components, asset loading, document metadata and the actions.

React19 2024 What’s coming? was originally published in Towards Dev on Medium, where people are continuing the conversation by highlighting and responding to this story.

How to Set Up and Implement createBrowserRouter in Your App

Ateshan Gunduz — Thu, 22 Feb 2024 13:06:55 GMT

React-router-dom contains multiple ways to set-up our routing. However, createBrowserRouter is the recommended way by the react-router. It will allow us to navigate between our pages in a compact, well-organized way. We can even have dynamic routers connected to fetched API using react-query. Our small basic demonstration will show us how to set it up and implement it in our app.

Vite + React + TS

Note: You can check out my recent unfinished website from the link above. It is made with createBrowserRouter. So that you can also see what I mean.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

import App from './App.tsx'

const router = createBrowserRouter([{
  path: "/",
  element: ,
  errorElement: ,
  children: [{
    path: "/prices/:crypto",
    element: 
  }]
  },
  {
    path: "/login",
    element: 
  },
  {
    path: "/signin",
    element: 
  },
  {
    path: "/trade",
    element: 
  },
])

ReactDOM.createRoot(document.getElementById('root')!).render(
  
      
  ,
)

createBroweserRouter gets an array with objects. Those objects are containing our route logic with some keys such as path, element, children.
Basically, path that we give is belong to the element which is a component in our app. That path shall render the related component. errorElement helps us to manage errors with its own component. The component in the errorElement can contain its own Link that helps us to go back to home page. We can also use children key for creating another routing logic in certain path we choose. path: “/prices/:crypto” allow us to dynamically give a selected path. With using react-query, axios and useState we can connect them to this :crypto so that When user select from a display its dynamically fetches the chosen one with its id and give it into :crypto. path: “/prices/SELECTED ITEM”

import { Link } from "react-router-dom"
  
 
       Spot 🚀
       Margin
        APIs

After setting up our logic we can use Link from react-router-dom into our JSX to navigate to that component from any component.

import { useNavigate } from "react-router-dom"

const navigate = useNavigate();

const onSubmit: SubmitHandler = async (data)=>{
    try{
        await new Promise((resovle)=> setTimeout(resovle, 1000))

        dispatch(setFormData(data))
        navigate("/charts")
    } catch (error) {
         setError("root", {message: "This email is already taken"})
    }
  
}

The example above is an extra. Just to show one other ability we can use. useNavigate from react-router-dom let us to navigate into certain path within a function that we use. In the example above function submits the form. It does many things and in end it navigates to the path we give.

Stackademic 🎓

Thank you for reading until the end. Before you go:

Please consider clapping and following the writer! 👏
Follow us X | LinkedIn | YouTube | Discord
Visit our other platforms: In Plain English | CoFeed | Venture | Cubed
More content at Stackademic.com

How to Set Up and Implement createBrowserRouter in Your App was originally published in Stackademic on Medium, where people are continuing the conversation by highlighting and responding to this story.

redux-toolkit

Ateshan Gunduz — Fri, 16 Feb 2024 10:26:48 GMT

Redux helps manage the state of an application, making it easier to reason about state changes and manage complex state logic. Redux Toolkit, provides utilities to simplify redux based applications. It reduces the boilerplate code of redux and makes state management a lot easier.

npm install @reduxjs/toolkit react-redux

We can start installing ReduxToolkit for our basic demonstration.

import { configureStore } from "@reduxjs/toolkit";
import { formReducer } from "../features/profileSlice";


export const store = configureStore({
    reducer: {
      ....  // here comes the slice
    },
  });

With configureStore we can store our reducers that contains specific Slice that manages our states and functions related to them.

import { Provider } from 'react-redux'
import { store } from './store/store.ts'

ReactDOM.createRoot(document.getElementById('root')!).render(
  
     
     
    
    
  ,
)

Then we wrap our app with the Provider and store we created to let our app to reach those states and its managing functions.

import { createSlice } from "@reduxjs/toolkit"


const initialState = {
    formData: {
      email: "",
      password: "",
    },
  };

  const formSlice = createSlice({
    name: "form",
    initialState,
    reducers: {
      setFormData: (state, action) => {
        state.formData = action.payload;
      },
      clearFormData: (state) => {
        state.formData = initialState.formData;
      },
    },
  });

  export const { setFormData, clearFormData, setProfile } = formSlice.actions;
  export const formReducer = formSlice.reducer;

After that we create our Slice. We create an initialState with an object. createSlice from redux helps use to conduct our slice. The object contains name, initialState that we created. (just like useState(“”)). reducer key is an object and with the help state and action it will let us to change formData. We need to export our reducers and formSlice.

import { configureStore } from "@reduxjs/toolkit";
import { formReducer } from "../features/profileSlice";

export const store = configureStore({
    reducer: {
      formSlice: formReducer,
    },
  });

We use exported forReducer in here. It is one of our slices. And the exported actions will be used in components.

import { useDispatch } from "react-redux";
import { setFormData } from "../features/profileSlice";

const SignInForm = () => {
const dispatch = useDispatch();

const onSubmit: SubmitHandler = async (data)=>{
    try{
        await new Promise((resovle)=> setTimeout(resovle, 1000))
        dispatch(setFormData(data))
    } catch (error) {
         setError("root", {message: "This email is already taken"})
    }
  
}

return(
...
)
}

In here with the help of useDispatch() we can dispatch our imported action and use. We gets data from a form and dispatch the setFormData action with our submitted data so that formData’s states can change accordingly.

By doing so we did not used useStates in components. We handled states and its actions in elsewhere give it to store which is in the Provider as prop. So that all the information can be imported by any component in the app. Redux usually useful for large scale apps with large code-base. It reduces and centralize the state management.

react-hook-form

Ateshan Gunduz — Sun, 04 Feb 2024 08:23:37 GMT

It is a library provides utilities that make it easier to work with forms. Helps us to reduce the amount of boilerplate code related to forms. It eliminates the need of manually handling states for each input and therefor reducing the unnecessary code. Usually used needed in larger forms with many different inputs. It also provides functions and objects to make us able to manipulate our form and input in cleaner way.

npm install react-hook-form

Install the library.

const {register, handleSubmit} = useForm() // basic version


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

You can access those function and objects with useForm. Which will be usefull in the form. The register function will let us to get values from all inputs without using onChange and useState. handleSubmit will handle the submitting without the need for e.preventDefault. It will internally solve those issues for us.

const handleTheSubmiting: SubmitHandler = (data)=>{
    console.log(data);
}

return (

        Log-In to your Profile

         {if(!value.includes("@")){
          return "Email must include @"
        } return true
        }})} type="text" placeholder="Email"/>
     {errors.email && {errors.email.message}
}
      
    

)

We call our handlesubmit function in form tag onSubmit event with our function that handles the submitting. All input gets {…register(“email”)} to get the values user set. We can use “required” with string to let our input gives our string as an error if input send empty. Or we can use “validate” to create function that conditionally returns a string as an error. if the value from the input does not include “@” return ”Email must include @ “.

react-query

Ateshan Gunduz — Sat, 27 Jan 2024 09:13:55 GMT

When dealing with server-side data, react-query helps us to manage complex data. It comes with its hooks to make fetching and updating data easier for. Focusing on solely fetching attribute, besides its many abilities/ways to fetch data, we can see how react-query makes us code simpler related to our default way of fetching data.

const myComponent= () => {
  const [isLoading, setIsLoading] = useState(true)
  const [data, setData] = useState([])
  const [error, setError] = useState("")

  useEffect(() => {
    axios.get('http://localhost:3001/herbs').then(res => {
      setData(res.data)
      setIsLoading(false)
    }).catch(error =>{
      setError(error.message)
      setIsLoading(false)
    })
  }, [])

  if (isLoading) {
    return Loading...

  }

  if(error){
    return {error}

  }

Without react-query we use useEffect and 3 useState hooks to manage our fetching. useEffect prevents unnecessary re-fetching and useStates helps us manage states. useStates also cause us our component to re-render. So lets look at same scenario with react-query.

  const fetchData = ()=>{
  return axios.get('http://localhost:3001/herbs') 
}

const myComponent = ()=> {
   const {isLoading, data, isError} = useQuery("herbs", fetchData)

if (isLoading) {
    return Loading...

  }

  if (isError) {  
    return {error.message}

  }

}

We wrote less code and did not required useEffect and 3 useStates to what we achieved in the code above. useQuery hook helped us to manage data using fecthData function and allowed us to reach it by destructuring. We can use the data in “const {isLoading, data, isError}” to display results in our return. It also handled the triggering the data fetching logic so we did needed useEffect.

Note that react-query opens many opportunities to manage our data in many specific detailed ways. This example is just to demonstrate basic differences.

axios react-query json-server

Ateshan Gunduz — Sun, 21 Jan 2024 11:15:50 GMT

In react applications combining, axios, react-query and json server is frequent to work with mock API. Json-server grant us ability to set up a RESTful API using a JSON file as a database. Axios simplifies the process of asynchronous HTTP requests with methods such as get, post, put, and delete. React-query on the other hand helps us to manage our data with fetching, caching and invalidation. How can we demonstrate a simple example for this use case?

npm install axios react-query json-server

After installing them we can create a json file with our desired setup.

{
  "address": [
    {
      "id": "67e6",
      "addName": "My Address",
      "street": "",
      "apartment": "",
      "city": "",
      "country": ""
    },
  ]
}

We establish a localhost where our json-server will run. Then we make a http request to get our data from our json folder.

const addressApi = axios.create({
    baseURL: "http://localhost:3001"
})

export  const fetchAddress = async ()=>{
    const response = await addressApi.get(`/address`);
    return response.data;
}

We use react-query useQuery() for handling the fetching process together with axios.

export function useAddress(){
    return useQuery({
        queryKey: ["address"],
        queryFn: fetchAddress
    })
}

In our component we import our needed functions and display our data with react-query.

const { data: theAddress, error, isLoading } = useAddress();

 if (isLoading) {
        console.log('Loading...');
        return Loading...
;
      }
      if (error) {
        return Error
;
      }

      console.log('Address:', theAddress);

If achieved so far and can see our data in the console, we are ready to display the data in our component.

  return (
     
       
       
         Delivery Adress

         

         
......

Then, we can run our json-server with the port we created above.

json-server -w data/db.json -p 3001

On a other bash run your app and see the dispay of your data.

npm start

Now we want be able to add our json folder. We created a function that post to our server using axios.

const addressApi = axios.create({
    baseURL: "http://localhost:3001"
})

export  const fetchAddress = async ()=>{
    const response = await addressApi.get(`/address`);
    return response.data;
}

export const createAddress = async (data: Address[])=>{
    await addressApi.post(`/address`, data);
    
}

Now we create another function includes react-query useMutation. Imported createAddress function above an used it in mutationFn. onSuccess with queryClient.invalidateQueries({queryKey: [“address”]} let use update the our display as soon as the posting happens.

export function useAddress(){
    return useQuery({
        queryKey: ["address"],
        queryFn: fetchAddress
    })
}

export function useCreateAddress(){
    const queryClient = useQueryClient()

    return useMutation({
        mutationFn: (data: Address[])=> createAddress(data),
        onSuccess: async()=>{
           await queryClient.invalidateQueries({queryKey: ["address"]})
        }
    })
}

In our component we import useCreateAddress and use it in a function that handles our submitting from a form.

const {register, handleSubmit} = useForm()
const createAddressMutation = useCreateAddress()
const handleCreateAddressSubmit: SubmitHandler = (data,e) =>{
        e?.preventDefault()
        createAddressMutation.mutate(data)
     }

return(... 
 handleCreateAddressSubmit(data, e))}>
          
         
         

         
         
         

         
        
         

         
       
        

        
        
        

        
  

...)

useMemo vs useCallback and memo

Ateshan Gunduz — Tue, 16 Jan 2024 09:49:48 GMT

When we create a dynamic app in react we use useState hook in many occasions. We use it to get values from inputs, re-arrange arrays, display values and set to them different values. When we set a new value with it, the component re-renders. There might be many buttons that set values and there might also be many expensive calculations such as filtering and sorting. So every time an unrelated value set to a new value in our component, re-render occurs. When the component re-renders, all other calculations in app also re-calculates. This might cause a performance issues especially if the calculation or the data it uses is heavy. Therefore useMemo and useCallback hooks comes handy.

They are used to optimize performance by memoizing values and functions, respectively.

useMemo

It memoize the result of the function it wraps. It takes dependencies and only renders when those dependencies changes. So that unrelated changed value wont trigger our function wrapped in useMemo.

import { useMemo, useState } from 'react'

const Component = ({ prop1, prop2 }) => {
const [value, setValue] = useState(0)

  const memoizedValue = useMemo(() => {
    return someExpensiveFunction(prop1, prop2)
  }, [prop1, prop2])

  return(
   <>
     
     {value}
   
  )
};

So, when the button is clicked and component re-renders it makes 0 to 5. But it does not compute someExpensiveFunction, because its dependencies did not changed.

useCallback

It memoize the function itself. Especially important when the function send to child component as a prop.

import { useCallback, useState} from 'react'
import Child from './Child'

const Parent = () => {
const [value, setValue] = useState(0)

  const handleExpensive = useCallback((text) => {
    return setValue(text)
  }, [])

console.log("Parent rendered")

  return(
   <>
     
     
     {value}
    
   
  )
}

//

import { memo } from "react"

const Child = ({handleExpensive}) => {
    console.log("Child rendered")
    
      return(
       <>
         handleExpensive(e.target.value)}/>
       
      )
    }

    export default memo(Child)

So what we try to achieve here is that preventing our Child component to re-render when the button on Parent components triggers. We may say that useCallback hook have more specific use cases in scenarios of much crowded codes with many dependencies. However, keep in mind that this code is just a small demonstration without a dependency needed. We need to image that our Child component has some expensive calculations in it. We would not want it to re-render every time a button in Parent component triggers. memo in our case co-works with the useCallback.

memo

It helps components to prevent unnecessary renders. It checks if the props are different between renders.

In our case of useCallback it memo checks the function passed as a prop. By default functions are considered different in every render. So useCallback that is wrapped our function creates a new function that is identical. Which prevents the re-render.

namespace interface type

Ateshan Gunduz — Thu, 04 Jan 2024 10:19:15 GMT

In TypeScript, namespace, interface and type serve to define types within our code. Each of them useful for different purposes and has their own use cases.

namespace

Primarily it do not focus on providing types. It provides a scope to avoid naming collisions and organize the code in a modular way. Typically used in larger codebases to form logical grouping.

namespace division {
  export const findDivisibleNumbers = (): number[] => {
    const divisibleNumbers: number[] = []

    for (let i = 1; i <= 100; i++) {
      if (i % 3 === 0 && i % 5 === 0) {
        divisibleNumbers.push(i)
      }
    }

    return divisibleNumbers;
  }
}

interface

It is specifically to define in objects. They declare the shape of object must have such as names types and its properties. Widely used in TypeScript.

  export interface familyMember {
    name: string;
    birthYear: number;
    gender: number;
  }

  const currentYear: number = new Date().getFullYear();

  const youngestMember: averageAge.familyMember = familyMembers.reduce(
    (min, member) => (member.birthYear > min.birthYear ? member : min),
    familyMembers[0]
  );
  console.log(youngestMember)

type

It is commonly used for creating custom types. They are more flexible than interfaces. Can be used both to define objects structures and unions, intersections and other types. Preferred when creating aliases for existing types in complex type relations. Since it encapsulate interface some developers use it as default instead of interface.

export type Name = {
    first: string
    last: string
}

export type PersonProps = {
    name: Name
}

Overall they all contribute to static typing ability of TypeScript. namespaces allow code organization, interface and types are focus on type system.