Forem: Cagatay Unal

Managing Software Complexity - The Cynefin Framework

Cagatay Unal — Sat, 02 Nov 2024 13:41:20 +0000

The Cynefin Framework was developed by IBM researchers, including Dave Snowden, to help people identify and understand complex systems and determine the appropriate approach to decision making and problem solving in this context. It is based on the premise that complex systems have 5 domains of complexity: simple, complicated, complex, chaotic and disordered.

In The Clear (Simple) Domain: the relationships and communications between the elements within the system are clear and the elements are well defined. This makes it easier to predict the consequences of our actions and we can use our expert knowledge to make decisions.

In The Complicated Domain: the relationships and communications between the elements within the system are more complex. However, the actions to be taken are still predictable. In this area, we can use our analytical and expert competences to make decisions. However, the specific contexts of the situation must also be taken into account.

In The Complex Domain: The relationships between the elements within the system are not fully known and communication is at an incomprehensible level. It is also difficult to predict the consequences of actions. In this situation, we need to be more exploratory in decision-making and we need to be prepared to learn from our experiences and adapt.

In The Chaotic Domain: The relationships between the elements within the system are unpredictable and it is very difficult to know what the consequences of our actions will be. At this stage, it is necessary to act urgently and decisively to stabilise the situation. We must also not make decisions without all the information we want to have.

In The Disorder Domain: The state of the system is no longer clear or known to which other areas it belongs. Before we can make effective decisions, we need to provide order and clarity in the state of the system.

useDebounce Hook 🚀

Cagatay Unal — Mon, 06 Mar 2023 13:26:11 +0000

I'll tell you about the use of Debounce Function as useDebounce Hook in React, which positively affects search request performance and which I also use frequently.

Firstly, let's create a react project in a simple way with the following command lines.



npx create-react-app my-app

Then you can create and use useDebounce as in the code blocks below.

useDebounce.js



import { useState, useEffect } from "react";

const useDebounce = (val, delay) => {
    const [ debounceVal, setDebounceVal ] = useState(val);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebounceVal(val);
        }, delay);

        return () => {
            clearTimeout(handler);
        }
    }, [val]);

    return debounceVal;
}

export default useDebounce;

App.js



import { useState, useEffect } from "react";
import useDebounce from "./useDebounce";

const DATA_LIST = [
  "Luke Skywalker",
  "C-3PO",
  "R2-D2",
  "Darth Vader",
  "Leia Organa",
  "Owen Lars",
  "Beru Whitesun lars",
  "R5-D4",
  "Biggs Darklighter",
  "Obi-Wan Kenobi",
];

function App() {
  const [results, setResults] = useState([]);
  const [text, setText] = useState("");

  const debounce = useDebounce(text, 500);

  useEffect(() => {
    const data = DATA_LIST.filter((el) => el.toLowerCase().includes(debounce));
    setResults(data);
  }, [debounce]);

  return (
    <div className="app">
      <h1>search</h1>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <div className="search-result">
        {results.length > 0 ? (
          results.map((item, i) => (
            <div key={i} className="result-item">
              {item}
            </div>
          ))
        ) : (
          <p>No Result</p>
        )}
      </div>
    </div>
  );
}

export default App;

You can also review this example from my github repo: https://github.com/cagatay-unal/useDebounce-hook

Atomic Design System

Cagatay Unal — Sun, 05 Mar 2023 21:15:01 +0000

The Atomic Design System is a methodology for designing digital products based on a hierarchy of complex components organised into stages, where changes at any stage affect the subsequent ones.

In this article, I will introduce you the elements that make up the Atomic Design System.

Atoms

These are the basic components of the Atom design system and components of the entire design system. These include properties such as colours, fonts or shadows.

Molecules

These are simple-to-use elements, such as buttons, checkboxes or badges, which are made up of connected atoms.

Organisms

They are complete user interface components that form the basic backbone of the entire system design of a given product.

Templates

These are the equivalent of models in atomic design. We combine prepared organisms with grey-scale elements that are not yet ready, you can think of it as a kind of preview. We do this to create a tangible product that can be presented to the business teams.

Pages

Pages are built from templates and populated with real content that we pass on to developers so that they become a functional product.

For Developers

You can also create and develop your user interface components and create your documentation through the storybook of the atomic designs created by your design team. You can even enable your test team to test these user interface components.

Installing Storybook with React and Typescript

You can create a Storybook + React + Typescript project in a simple way with the following command lines. For more information about developing user interface components with Storybook, please visit https://storybook.js.org/docs/react/get-started/introduction.

First, we’ll create a React + Typescript project.
npx create-react-app my-app --template typescript

Then we will set up the Storybook within this project.
npx sb init

Debounce Function in Javascript 🚀

Cagatay Unal — Fri, 17 Sep 2021 11:59:05 +0000

let count = 0;

const debounce = (func, delay) => {
    let timer;
    return function(){
        clearTimeout(timer);
        timer = setTimeout(() => {
            func();
        }, delay);
    }
}

let scrollCount = () => {
    console.log(count++);
}

scrollCount = debounce(scrollCount, 500);

window.addEventListener('scroll', scrollCount);

How to use CSS Media Query Breakpoint in Styled-Components

Cagatay Unal — Tue, 30 Mar 2021 18:28:54 +0000

Create and Use Breakpoint in Styled-Components

Step 1: Create breakpoints.js and define size, device variables
You can change breakpoints size and add new size.

const size = {
 xs: ‘320px’,
 sm: ‘768px’,
 lg: ‘1200px’,
}
const device = {
 xs: `(min-width: ${size.xs})`,
 sm: `(min-width: ${size.sm})`,
 lg: `(min-width: ${size.lg})`
}
export default {size, device}

Step 2: Use this breakpoints in Styled-Components

import breakpoint from 'Commons/breakpoints';
...
const Component = styled.div`
    @media only screen and ${breakpoint.device.xs}{
        display: none;
    }
    @media only screen and ${breakpoint.device.sm}{
        display: flex;
    }
    @media only screen and ${breakpoint.device.lg}{
        display: flex;
    }
`;