Forem: Khadija Batool Gardezi

Developer Code vs Browser Code

Khadija Batool Gardezi — Tue, 26 Nov 2024 15:27:27 +0000

Callback function in js?🧐

Khadija Batool Gardezi — Sat, 16 Nov 2024 11:35:20 +0000

So basically, a callback function is a function() passed as an argument to another function. It is executed for each element in the array during iteration.

Example:
recipe => recipe.name.toLowerCase().includes(filter.toLowerCase())

Method: .filter()
Loops through each item in the recipes array and runs the callback function to decide if that item should be included in the filtered results.

Callback Function:
recipe => recipe.name.toLowerCase().includes(filter.toLowerCase())
Parameters:
recipe: Represents the current element in the recipe array.

recipe.name.toLowerCase(): Converts the recipe's name to lowercase for case-insensitive comparison.

.includes(filter.toLowerCase()): Checks if the lowercase filter string is part of the recipe's name.

The arrow function (recipe => recipe.name...) is the callback here.

Functions as User Interface

Khadija Batool Gardezi — Sun, 30 Jun 2024 16:46:25 +0000

Hi, y'all. ✨

My journey in the tech world has been filled with countless lines of code, numerous tools, and multiple languages. I have experience with JavaScript, ReactJS, CraftCMS, Twig, and a few more. As a woman in tech, I understand the challenges of this field. I am dedicated to sharing my knowledge and experiences to help others like me grow and thrive. Let's get started and become experts together!

Functions as UI

In React, functions can be used to define UI components. This allows you to create reusable and modular pieces of your user interface. To illustrate this concept, let's build a simple React component that displays the text "Hello, Khadija."

In standard HTML, we write something like below to display a message:

<h1>Hello JavaScript</h1>

This works fine for static content. right? isn't it? But what if we want to change the message dynamically based on user interaction or some other logic? That’s where React and JavaScript functions come into play.

First, we will create a function component named App. This component will use another function, getLanguage, to get the text "Khadija" and display it within an <h1> element.

import React from 'react';

const Message = () => {
// Without return, the function would return undefined.
  return "Khadija";  }

const App = () => {
  const getName = Message();
  return (
    <div>
      <h1>Hello, {getName}</h1>
    </div>
  );
}

export default App;

In this code snippet, we defined a simple React component called App that uses a function Message to return the string "Khadija". This string is then displayed inside an h1 tag in our component.

By using functions in this way, we can make our UI more dynamic and responsive to changes in data or state. It allows us to create interactive and responsive applications with ease. This example demonstrates how we can use a simple function to dynamically update the content of our components.

Thank you for following along & Happy coding! 💻

The next part is coming soon.📝

Let's interact with Ruby.

Khadija Batool Gardezi — Thu, 26 Oct 2023 22:03:06 +0000

Hey there, it's Khadija from Pakistan. I am a Web Developer.

Recently, I have developed a keen interest in delving deeply into Ruby, and I'm planning to share all my learning experiences with you all. If you are a learning or experienced developer, let's connect and share ideas!

Do you know? Ruby is a versatile and powerful programming language that has garnered a lot of attention since its creation in the mid-1990s. Ruby's syntax is designed to be clean, consistent, and readable. This makes the code not only easier to write but also easier to maintain and understand.

I started with the installation process, which was not easy, even though the language itself is very simple.

I am currently utilizing various resources to enhance my knowledge. These include Codecademy, Pragmatic Studio, and YouTube.

Here's the Ruby resource link if anyone is interested:
Codecademy