The journey of #100DaysOfCode (@Darine_Tleiss)

[Darine_Tleiss]

100daysofcode - Day56

Hello folks , the 56th/100 is reaching its end. And after a long dive in the UI / UX process, it’s the time for a new start with a new aim. Learning React JS, an open-source front-end JavaScript library for building user interfaces based on UI components.

Today we will begin with a gentle tour in this amazing library. So we can set the foundation base for the whole journey.

What is React JS ?

• React JS is a JavaScript library used to build single page applications.
• React JS is based on the components concept.
• It allows developers to write reusable UI components.

How can we create a React app ?

• We use the npx create-react-app command followed by the app name.

What is a React component ?

Independent and reusable pieces of code. They work in the same way as a normal JS function and they return HTML code.

Types of React components:

1. Functional components:

   • JS functions that contain code that does not require any dependency from any other component

Example :

function Greetings() {
     return <h1> Hello World </h1>
}

2. Class Components:

   • Work in a similar way as function components, but they care about the passed data, where we can pass this data from one class to the other one.
   • The render() method is the one that parse and display the specified HTML content to the screen.

Example :

class Greetings extends React.Component {
	render() {
		return <h1> Hello World </h1>
       	     }
       }

[Darine_Tleiss]

100daysofcode - Day57

Hi guys , hope you’re having a great day , today marks our 57th day in this amazing 100 days of code challenge.

Yesterday we started our journey in React we learned what React is and what is a React component and their types.

Today we will learn about the benefits of React and what are props.

key benefits of React JS ?

1. Speed

2. Flexibility

3. Performance

4. Usability

5. Reusable Components
   One of the main benefits of using React JS is its potential to reuse components. It saves time for developers as they don’t have to write various codes for the same features. Furthermore, if any changes are made in any particular part, it will not affect other parts of the application.

Is React imperative or declarative ?

• In react we don’t need to write a set of DOM steps one by one. We simply define the desired target and react to figure out the actual JS DOM instructions to be done behind the scenes.
  We conclude that react operates in a declarative approach.

React props:

• Props are the arguments that we pass into the custom react component.
• Props stands for properties.
• Props used to pass data to a certain component.
  Example

function Car (props) {
	return  <h1> The car brand is {props.brand} </h1>
   }

function CarOwner () {
  return(
	<>
		<Car brand=”BMW”/>
     </>
   )
}

const root = ReactDOM.createRoot(document.getElementById(‘root’));
root.render(<CarOwner/>)

[Darine_Tleiss]

100daysofcode - Day58

Hey fellows , hope your day was full of joy and fun .

“Success isn’t overnight. It’s when every day you get a little better than the day before. It all adds up.”
― Dwayne Johnson, actor and former pro-wrestler

Yesterday we learned about react’s benefits and what props are.

Today we will explore what React Hooks are and we will dive into our first react hook which is UseState.

What is a Hook?

Hooks allow us to “hook” into React features such as state and lifecycle methods.

Hook Rules

• Hooks can only be called inside React function components.
• Hooks can only be called at the top level of a component.
• Hooks cannot be conditional

React useState Hook

The React useState Hook allows us to track state in a function component.

State generally refers to data or properties that need to be tracking in an application.

How to create a UseState Hook

1. Import useState

   To use the useState Hook, we first need to import it into our component.

Example:

At the top of your component, import the useState Hook.

import { useState } from "react";

2. Initialize useState

   We initialize our state by calling useState in our function component.

   useState accepts an initial state and returns two values:

   • The current state.
   • A function that updates the state.

Example:

Initialize state at the top of the function component.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

What Can State Hold

The useState Hook can be used to keep track of strings, numbers, Booleans, arrays, objects, and any combination of these!

We could create multiple state Hooks to track individual values.

Example:

Create multiple state Hooks:

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

Or, we can just use one state and include an object instead!

Example:

Create a single Hook that holds an object:

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  }); 

[Darine_Tleiss]

100daysofcode - Day59

Hello guys , a new day is here, a lot of knowledge are coming exploring the amazing world of React JS.

After starting yesterday with the react hooks exploring their usage and the advantages they give to us starting with the basic useState hook that help us tracking the functions state.

Today we will dive more to discover a new hook which is the useEffect.

React useEffect Hooks

The useEffect Hook allows you to perform side effects in your components.

Some examples of side effects are:

• Fetching data.
• Directly updating the DOM
• Timers.

useEffect accepts two arguments. The second argument is optional.

useEffect(<function>, <dependency>)

Example:

Use setTimeout() to count 1 second after initial render:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>I've rendered {count} times!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

But wait It keeps counting even though it should only count once!

useEffect runs on every render . That means that when the count changes, a render happens, which then triggers another effect.

This is not what we want. There are several ways to control when side effects run.

We should always include the second parameter which accepts an array. We can optionally pass dependencies to useEffect in this array.

1. No dependency passed:

useEffect(() => {
  //Runs on every render
});

2. An empty array:

useEffect(() => {
  //Runs only on the first render
}, []);

3. Props or state values:

useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes
}, [prop, state]);

Effect Cleanup

Some effects require cleanup to reduce memory leaks.

Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed.

We do this by including a return function at the end of the useEffect Hook.

Example:

Clean up the timer at the end of the useEffect Hook:

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    let timer = setTimeout(() => {
    setCount((count) => count + 1);
  }, 1000);

  return () => clearTimeout(timer)
  }, []);

  return <h1>I've rendered {count} times!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Timer />);

[Darine_Tleiss]

100daysofcode - Day60

Hello guys , the day 60 is here, diving more in the amazing world of react and specifically the hooks and their importance .

Yesterday we discussed the useEffect hook, its characteristics and how to use it.

Today we will move on to explore another interesting react hook: useRef

What is the useRef hook ??

• The useRef Hook is a function that returns a mutable ref whose .current property is initialized with the passed argument ( initialValue ). The returned object will persist for the full lifetime of the component.
• It can be used to access a DOM element directly.

useRef DOES NOT CAUSE Re-render

• If we tried to count how many times our application renders using the useState Hook, we would be caught in an infinite loop since this Hook itself causes a re-render. And to avoid this we use the useRef
• useRef() only returns item. It returns an Object called current .
• To initialize useRef we set the initial value: useRef(0) .

Example:

    import { useState, useEffect, useRef } from "react";
    import ReactDOM from "react-dom/client";
    
    function App() {
      const [inputValue, setInputValue] = useState("");
      const count = useRef(0);
    
      useEffect(() => {
        count.current = count.current + 1;
      });
    
      return (
        <>
          <input
            type="text"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />
          <h1>Render Count: {count.current}</h1>
        </>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);

How to use the useRef to access the DOM

• In React, we can add a ref attribute to an element to access it directly in the DOM.

Example:

    import { useRef } from "react";
    import ReactDOM from "react-dom/client";
    
    function App() {
      const inputElement = useRef();
    
      const focusInput = () => {
        inputElement.current.focus();
      };
    
      return (
        <>
          <input type="text" ref={inputElement} />
          <button onClick={focusInput}>Focus Input</button>
        </>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<App />);

[Darine_Tleiss]

100daysofcode - Day61

Hey folks , day++ and the Hey folks, day++ and the 61th/100 is already here , As everyday, new knowledge, a lot of fun is coming to wrap the day .

Yesterday we talked about the useRef hook, and how it work by showing some use-cases and examples.

Today we will move on to learn a new interesting hook: useReducer

What is useReducer ?

• The useReducer Hook accepts ❷ arguments. useReducer(<reducer>, <initialState>)
• It allows for custom state logic.
• Help in tracking multiple pieces of state that rely on complex logic in a useful way
• The reducer function contains your custom state logic and the initialState can be a simple value but generally will contain an object.
• The useReducer Hook returns the current state and a dispatch method.

Example illustrating the work process of useReducer

   import { useReducer } from "react";
   import ReactDOM from "react-dom/client";
   
   const initialTodos = [
     {
       id: 1,
       title: "Todo 1",
       complete: false,
     },
     {
       id: 2,
       title: "Todo 2",
       complete: false,
     },
   ];
   
   const reducer = (state, action) => {
     switch (action.type) {
       case "COMPLETE":
         return state.map((todo) => {
           if (todo.id === action.id) {
             return { ...todo, complete: !todo.complete };
           } else {
             return todo;
}
         });
       default:
         return state;
     }
   };
   
   function Todos() {
     const [todos, dispatch] = useReducer(reducer, initialTodos);
   
     const handleComplete = (todo) => {
       dispatch({ type: "COMPLETE", id: todo.id });
     };
   
     return (
       <>
         {todos.map((todo) => (
           <div key={todo.id}>
             <label>
               <input
                 type="checkbox"
                 checked={todo.complete}
                 onChange={() => handleComplete(todo)}
               />
               {todo.title}
             </label>
           </div>
         ))}
       </>
     );
   }
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<Todos />);

[Darine_Tleiss]

100daysofcode - Day62

Hello folks, 62th/100 is here !! A new day == A new hook in react, a lot of new knowledge and a deep dive in the world of React . Yesterday, we talked about useReducer , and how it can be implemented. Today we will discuss, another important hook: useContext

What is useContext ?

• Context provides a way to pass data or state through the component tree without having to pass props down manually through each nested component .
• It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.

How to use the context ?

1. Creating the context

    import { createContext } from 'react';
    const Context = createContext('Default Value');

2. Providing the context

    function Main() {
      const value = 'My Context Value';
      return (
        <Context.Provider value={value}>
          <MyComponent />
        </Context.Provider>
      );
    }

3. Consuming the context

    import { useContext } from 'react';
    function MyComponent() {

      const value = useContext(Context);
      return <span>{value}</span>;

    }

Example

  import { useState, createContext, useContext } from "react";
  import ReactDOM from "react-dom/client";
  
  const UserContext = createContext();
  
  function Component1() {
    const [user, setUser] = useState("Jesse Hall");
  
    return (
      <UserContext.Provider value={user}>
        <h1>{`Hello ${user}!`}</h1>
        <Component2 user={user} />
      </UserContext.Provider>
    );
  }
  
  function Component2() {
    return (
      <>
        <h1>Component 2</h1>
        <Component3 />
      </>
    );
  }
  
  function Component3() {
    return (
      <>
        <h1>Component 3</h1>
        <Component4 />
      </>
    );
  }
  
  function Component4() {
    return (
      <>
        <h1>Component 4</h1>
        <Component5 />
      </>
    );
  }
  
  function Component5() {
    const user = useContext(UserContext);
  
    return (
      <>
        <h1>Component 5</h1>
        <h2>{`Hello ${user} again!`}</h2>
      </>
    );
  }
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<Component1 />);

When do you need context?

• The main idea of using the context is to allow your components to access some global data and re-render when that global data is changed. Context solves the props drilling problem: when you have to pass down props from parents to children.

[Darine_Tleiss]

Hello friends, our success counter, is increasing and with each increment a lot of knowledge, fun and collaboration with the amazing community .

Today is not like everyday, it’s really a special one that means a lot to me , " Community is the foundation to success , Inspired by this quote I’m happy to announce to you that Figma choosed me as a community advocate . Leading and representing the Friends of Figma Community in my lovely country Lebanon .

Really guys, from the first day I joined the community as a Core team member in the Google Developer Student Clubs at my university, moving to serve the GDG & Women Techmakers communities and my aim is to help my fellows, supporting them and facilitating the process for them, so they can start their journey in a smooth way by learning and growing then giving back to the community that helped them one day and everything in this case stay From the community to the community .

My Story with Figma and the UI/UX World

• Starting at the age of 15, representing my high school in a Poster Design competition organized at the Lebanese American University, and ending this unforgettable competition with the place, inspired me to start this career by learning and learning without stopping. Filled with consistency and dedication, my friend was Figma doing every project and practicing every new topic, surrounded by amazing family and friends that support me every minute to achieve my dreams.
• Today I’m representing this amazing community, aiming to serve more fellows, train and mentor them to the infinity until they reach the success and be able to join the UI UX industry as successful engineer’s.
• I promise you all in this new amazing community launched today, a special roadmap that will take you from zero to hero in this amazing world. Join me all and be ready for a funny and knowledgeable journey

> Link : Figma Beirut

• WAITING YOU ALL TO JOIN ME

[Darine_Tleiss]

100daysofcode - Day64

Hello friends, the challenge on fire . Everyday is a new challenge, a lot of new informations are gained. And a daily dose of knowledge is consumed .

Yesterday was a special day where we celebrated the launching of the new Figma community in Lebanon .

Today we will get back to the track, as we will discuss the React conditionals ⁇ and their role.

if Statement

• A Javascript operator that we can use to render some components based on a specific condition.
• Example

    function Goal(props) {
      const isGoal = props.isGoal;
      if (isGoal) {
        return <MadeGoal/>;
      }
      return <MissedGoal/>;
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Goal isGoal={false} />);

Logical && Operator

• Another way to render conditional content is by using the &&
• Any content after the && will render if the condition equates to true
• Example

    function Garage(props) {
      const cars = props.cars;
      return (
        <>
          <h1>Garage</h1>
          {cars.length > 0 &&
            <h2>
              You have {cars.length} cars in your garage.
            </h2>
          }
        </>
      );
    }
    
    const cars = ['Ford', 'BMW', 'Audi'];
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Garage cars={cars} />);

Ternary Operator : condition ? true : false

• The ternary operator is an operator that exists in some programming languages, which takes three operands rather than the typical one or two that most operators use . It provides a way to shorten a simple if else block.
• Example

    function Goal(props) {
      const isGoal = props.isGoal;
      return (
        <>
          { isGoal ? <MadeGoal/> : <MissedGoal/> }
        </>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Goal isGoal={false} />);

[Darine_Tleiss]

100daysofcode - Day65

Hello friends, the 65th from this amazing 00 days of code is here, and as everyday a lot of new knowledge and fun are gathered by learning some new topics from this amazing e-world .

Today we will discuss an important topic in react, the styling , and it’s different ways.

Inline Styling

• An inline CSS is used to apply a unique style to a single HTML element . An inline CSS uses the style attribute of an HTML element
• Example:

    const Header = () => {
      return (
        <>
          <h1 style={{color: "red"}}>Hello Style!</h1>
          <p>Add a little style!</p>
        </>
      );
    }

• Keep in mind while dealing with inline styles in react we should use the camelCase syntax to write down the properties with hyphen separators, like background-color to be backgroundColor
• Example:

    const Header = () => {
      return (
        <>
          <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
          <p>Add a little style!</p>
        </>
      );
    }

JavaScript Object

• In react we can create an object with styling information, and refer to it in the style attribute
• Example:

    const Header = () => {
      const myStyle = {
        color: "white",
        backgroundColor: "DodgerBlue",
        padding: "10px",
        fontFamily: "Sans-Serif"
      };
      return (
        <>
          <h1 style={myStyle}>Hello Style!</h1>
          <p>Add a little style!</p>
        </>
      );
    }

CSS Modules

• CSS Modules are convenient for components that are placed in separate files.
• The CSS inside a module is available only for the component that imported it, and you do not have to worry about name conflicts.
• CSS module are created with the .module.css extension
• Example

    my-style.module.css:
    
    .bigblue {
      color: DodgerBlue;
      padding: 40px;
      font-family: Sans-Serif;
      text-align: center;
    }

  Car.js:
  import styles from './my-style.module.css'; 
  
  const Car = () => {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
  
  export default Car;

[Harshit (Harshit Mehta)]

I just joined! Looking forward to learning Figma and designing from the community!
More power to you!

[Darine_Tleiss]

Thank you so much for the support

[Darine_Tleiss]

100daysofcode - Day66

Hello friends a new day is here, the 66th and our journey with react is rocking .

Yesterday we discussed the React conditionals.

Today we will dive more to work with the React lists.

What is a React List ?

• Lists are used to display data in an ordered format and mainly used to display menus on websites . In React, Lists can be created in a similar way as we create lists in JavaScript.
• To loop through the React list we mainly use the map , in JS

Example:

    function Car(props) {
      return <li>I am a { props.brand }</li>;
    }
    
    function Garage() {
      const cars = ['Ford', 'BMW', 'Audi'];
      return (
        <>
          <h1>Who lives in my garage?</h1>
          <ul>
            {cars.map((car) => <Car brand={car} />)}
          </ul>
        </>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Garage />);

List keys

• A “key” is a special string attribute you need to include when creating lists of elements in React . Keys are used to React to identify which items in the list are changed, updated, or deleted.
• Keys need to be unique to each sibling. But they can be duplicated globally.
• The key should be a unique ID assigned to each item. As a last resort, you can use the array index as a key.

Example

    function Car(props) {
      return <li>I am a { props.brand }</li>;
    }
    
    function Garage() {
      const cars = [
        {id: 1, brand: 'Ford'},
        {id: 2, brand: 'BMW'},
        {id: 3, brand: 'Audi'}
      ];
      return (
        <>
          <h1>Who lives in my garage?</h1>
          <ul>
            {cars.map((car) => <Car key={car.id} brand={car.brand} />)}
          </ul>
        </>
      );
    }
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Garage />);

[Darine_Tleiss]

100daysofcode - Day67

Hello folks , the 67th from 100 is reaching the end. And our daily dose of fun and knowledge is ready to be shared with this amazing community.

Today we will discuss the React JS form and how to use them in an effective way.

React vs HTML forms

• In HTML, form data is usually handled by the DOM. In React, form data is usually handled by the components . When the data is handled by the components, all the data is stored in the component state. You can control changes by adding event handlers in the onChange attribute.

Handling forms in React

• In React, form data is usually handled by the components.
• You can control changes by adding event handlers in the onChange attribute.
• We can use the useState Hook to keep track of each inputs value and provide a “single source of truth” for the entire application.
• Example:

   import { useState } from 'react';
   import ReactDOM from 'react-dom/client';
   
   function MyForm() {
     const [name, setName] = useState("");
   
     return (
       <form>
         <label>Enter your name:
           <input
             type="text" 
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
         </label>
       </form>
     )
   }
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<MyForm />);

Submitting Forms in React

• You can control the submit action by adding an event handler in the onSubmit attribute for the <form>
• Example:

   import { useState } from 'react';
   import ReactDOM from 'react-dom/client';
   
   function MyForm() {
     const [name, setName] = useState("");
   
     const handleSubmit = (event) => {
       event.preventDefault();
       alert(`The name you entered was: ${name}`)
     }
   
     return (
       <form onSubmit={handleSubmit}>
         <label>Enter your name:
           <input 
             type="text" 
             value={name}
             onChange={(e) => setName(e.target.value)}
           />
         </label>
         <input type="submit" />
       </form>
     )
   }
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(<MyForm />);

Multiple Input Fields

• You can control the values of more than one input field by adding a name attribute to each element.
• We will initialize our state with an empty object.
• To access the fields in the event handler use the event.target.name and event.target.value syntax.
• Example:

     import { useState } from 'react';
     import ReactDOM from 'react-dom/client';
     
     function MyForm() {
       const [inputs, setInputs] = useState({});
     
       const handleChange = (event) => {
         const name = event.target.name;
         const value = event.target.value;
         setInputs(values => ({...values, [name]: value}))
       }
     
       const handleSubmit = (event) => {
         event.preventDefault();
         alert(inputs);
       }
     
       return (
         <form onSubmit={handleSubmit}>
           <label>Enter your name:
           <input 
             type="text" 
             name="username" 
             value={inputs.username || ""} 
             onChange={handleChange}
           />
           </label>
           <label>Enter your age:
             <input 
               type="number" 
               name="age" 
               value={inputs.age || ""} 
               onChange={handleChange}
             />
             </label>
             <input type="submit" />
         </form>
       )
     }
     
     const root = ReactDOM.createRoot(document.getElementById('root'));
     root.render(<MyForm />);

[Darine_Tleiss]

100daysofcode - Day68

Hello guys , Hope you are all doing great , the day 68 is here

Today we will move on to explore another interesting topic Motion Design

What is Motion Design

• Motion design is a very crucial element in making users interactions with a brand’s digital products more intuitive and streamlined.

• Motion tells stories. Everything in an app is a sequence, and motion is your guide. For every button clicked and screen transition, there is a story that follow.

Misconceptions about Motion Design

• Motion is not a core aspect of the user experience.
  That’s not true because motion really does help to tell stories. It helps user to process all the information and understand where they are within the flow.

• We can add motion later.
  If we don’t think about motion and how motion really helps the usability the product and every type of transition just happened instantly it will be very hard for the user to comprehend what’s actually happening.

• Motion is just animation.
  Although in a design we have a bit of animation, but it is doing it for the purpose of usability and delight.

[Darine_Tleiss]

100daysofcode - Day69

Hello friends, day++ and a lot of fun and new knowledge are ready in the new amazing journey of motion design .

Yesterday we introduced this field in a gentle way.

Today we will discuss the role of the motion design in enhancing the UX .

Why is motion design so important?

• When the user interact with any product, they might ask one of the following questions
  1. What should I do next?
  2. Am I done with my task?
  3. What’s the most significant feature on this screen?
• And asking such questions may uncover opportunities where motion can be used to improve the user’s experience

How motion design can assist in creating a better UX ?

• It offers adequate attention between views.
• It moves the user’s attention to a specific object and hints at what may likely happen on tapping the screen.
• It also provides visual feedback.

How motion design will support the usability ?

1. Consistency : Does motion behaviour provide consistent and seamless interactions throughout the entire user journey?
2. Expectations : What does the user expect when he interacts with a UI element, for example, the navigation bar or a button? Does motion support the expected behaviour or does it cause confusion?
3. Narrative : Are interactions and the triggered motion behaviour linked to a logical sequence that is satisfying the user?
4. The bigger picture : How do the spatial, aesthetic, and hierarchical attributes of UI elements relate to each other? How do they influence the user’s decisions? How does motion affect the different relationships of individual elements to each other?

Motion design applications

• Easing transitions
• Engaging micro-interactions
• Just-for-fun animations
• Demonstrating interactions

[Darine_Tleiss]

100daysofcode - Day70

Hello friends, a new day is here a lot of new informations are required and our dive in the world of motion design is still running. .

Today we will discuss the first 7/12 principle of motion design, that help us building amazing digital products .

1 Easing

• Easing refers to the way in which a motion tween proceeds . You can think of easing as acceleration or deceleration. An object that moves from one side of the Stage to the other side can start off slowly, then build up speed, and then stop suddenly. Or, the object can start off quickly and then gradually slow to a halt.

2 Offset and Delay

• When several UI elements move at the same time and speed, users tend to group them together and overlook the possibility that each element may have its own functionality.
• Offset and delay creates hierarchy between UI elements that are moving at the same time and communicates that they are related, yet distinct. Instead of complete synchronization, the timing, speed, and spacing of elements are staggered, resulting in a subtle “one after another” effect.

3 Parenting

• Parenting links the properties of one UI element to the properties of others. When a property in the parent element changes, the linked properties of child elements also change. All element properties may be linked to each other.
• For instance, the position of a parent element can be tied to the scale of a child element. When the parent element moves, the child element increases or decreases in size.
• Parenting creates relationships between UI elements, establishes hierarchy, and allows multiple elements to communicate with users at once.

4 Transformation

• Transformation occurs when one UI element turns into another. For example, a download button transforms into a progress bar, which transforms into a completion icon.

5 Value Change

• Representations of value (numerical, text-based, or graphic) are abundant in digital interfaces, appearing in products ranging from banking apps to personal calendars to eCommerce sites. Because these representations are tied to datasets that exist in actuality, they are subject to change.

6 Masking

• Masking is the strategic revealing and concealing of parts of a UI element. By altering the shape and scale of an element’s perimeter, masking signals a change in utility while allowing the element itself to remain identifiable. For this reason, detailed visuals like photographs and illustrations are ideal candidates.

7 Overlay

• In 2D space, there is no depth, and UI elements may only move along the X or Y axis. Overlay creates the illusion of foreground/background distinction in the 2D space of UIs. By simulating depth, overlay allows elements to be hidden and revealed according to user needs.

Stay tuned for tomorrow post where we will discover and discuss the rest of the principles

[Darine_Tleiss]

100daysofcode - Day71

Hello friends, a new day is here, and a lot of fun and new knowledge are coming with it. As everyday our daily dose of informations is ready and the dive in the motion design world is still running .

Today we will continue yesterday post to resume our 12 design principles and master them .

8 Cloning

• Cloning is a motion behavior wherein one UI element splits off into others. It’s a clever way to highlight important information or interaction options.
• When UI elements materialize within an interface, they need a clear point of origin that links to an element already on-screen. If elements simply burst or fade into existence out of nowhere, users lack the context needed for confident interactions.

9 Obscuration

• Picture a frosted glass door. It requires interaction to open, but it’s possible to discern (to some extent) what awaits on the other side.
• Obscuration works the same way. It presents users with an interface that calls for interaction while simultaneously revealing a hint of the screen to follow. Navigation menus, passcode screens, and folder/file windows are common examples.

10 Parallax

• Parallax is displayed when two (or more) UI elements move at the same time but at different speeds. Here again, the intent is establishing hierarchy.
• Interactive elements move faster and appear in the foreground.
• Non-interactive elements move slower and recede to the background.

11 Dimensionality

• Dimensionality makes it seem as though UI elements have multiple interactive sides, just like objects in the physical world. The behavior is achieved by making elements appear as if they are foldable, flippable, floating, or bestowed with realistic depth properties.

12 Dolly and Zoom

• Dolly and zoom allow users to “travel” through UI elements spatially or increase their scale to reveal greater levels of detail.
  • Dolly : Dolly occurs when the user’s point of view gets closer to (or further from) a UI element. Imagine a person with a camera walking up to a flower to get a closer shot.
  • Zoom : With zoom, the user’s point of view and the UI element remain fixed, but the element increases (or decreases) in size within the user’s screen. Now imagine that the person stays put and uses the camera’s zoom feature to make the flower appear larger.

[Darine_Tleiss]

100daysofcode - Day72

Hello guys , a new day is here a lot of new informations are required and our dive in the world of motion design is still running.

Today we will discuss what is microinteraction

What is a microinteraction?

Micro interactions have the power to make that experience, much more effective and human.

Microinteractions are contained product moments that are meant for a single use case.

Example on Microinteraction

• Checking your notifications: the little pop up that pop up when you have a notification is a micro interaction.

• Adding to your cart: the click the feedback that you get and what is happening on the screen.

Benefits of Microinteractions

Help communicate the tone of your brand: Facebook is a great example: the like button and the little subtle animations, when you click them, when you hover over them and select.

The structure of a microinteraction

In order to create an effective micro interaction, there are essentials parts:

1. Trigger
2. Rules
3. Feedback
4. modes and loops

[Darine_Tleiss]

100daysofcode - Day73

Hello guys , the day 73 is here, diving more in the amazing world of motion design and specifically microinteractions and their importance .

Today we will explore why microinteractions are so important

In most cases the difference between products we tolerate and products we love are the quality of the microinteractions.

Why are micro interactions so important?

1. They provide feedback:
   if a user is in the middle of a payment process the user need to receive a feedback, if they did not get that confirmation they would be very confused and concerned and they would probably try and contact their costumer service line.

2. They help prevent errors:
   It is always good to prevent errors from happening.
   For example when we create an account and we need a password in most cases all the errors show up at the same time when we click on confirm so that is bad UX , what we should do is we need to handle this with inline validation, having this inline validation while it is happening instead of actually forcing the user to click submit is really helpful.

3. They can create seamless experiences:
   We don’t want users to put too much effort into doing the tasks that we want them to do.
   Example: swiping interactions allows the user to easily move throughout the list instead of constantly tapping another example is pooling to refresh

4. They encourage engagement:
   Using emotion and design in general makes it possible to form a better connection with your users
   Example: heart animation when somebody like something, or a confetti pop when the user does something like reaching a water drinking goal.
   We need to tell the user that what they did is so important and huge and we want to celebrate those little moments with people, it could be something as simple as clearing the inbox to something much more bigger and much more celebratory like getting a job that they wanted.
   These little animations really bring users back into your product, keep them excited about your product, get them just really to love your product.

5. They can help communicate the tone of your brand