[{"data":1,"prerenderedAt":1412},["ShallowReactive",2],{"navigation":3,"blog-page":26,"blogs":36},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Blog","/blog","blog",[9,13,17,21],{"title":10,"path":11,"stem":12},"A Developer's Guide to Scalable API Requests with Params in JavaScript and TypeScript","/blog/from-mockup-to-market","blog/from-mockup-to-market",{"title":14,"path":15,"stem":16},"Primitives vs. Objects in JavaScript","/blog/how-i-built-my-own-design-system-from-scratch","blog/how-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"A detailed explanation of five most used CSS frameworks","/blog/psychology-of-color-in-ui-design","blog/psychology-of-color-in-ui-design",{"title":22,"path":23,"stem":24},"Mastering JavaScript Array and it methods","/blog/slow-design-in-fast-paced-digital-world","blog/slow-design-in-fast-paced-digital-world",false,{"id":27,"title":28,"body":29,"description":30,"extension":31,"links":29,"meta":32,"navigation":33,"path":6,"seo":34,"stem":7,"__hash__":35},"pages/blog.yml","Latest Articles",null,"Some of my recent thoughts on design, development, and the tech industry.","yml",{},true,{"title":28,"description":30},"vycKbZXH6lUprkttlxVokzcLu31TOtP82HO4ECYI1yY",[37,166,673,1130],{"id":38,"title":10,"author":39,"body":43,"date":158,"description":159,"extension":160,"image":161,"meta":162,"minRead":163,"navigation":33,"path":11,"seo":164,"stem":12,"__hash__":165},"blog/blog/from-mockup-to-market.md",{"name":40,"avatar":41},"Emmanuel Abanobi",{"src":42,"alt":40},"/hero/Emma.avif",{"type":44,"value":45,"toc":148},"minimark",[46,50,53,56,61,64,75,80,86,89,93,96,99,105,108,114,120,124,127,130,134,137,142,145],[47,48,49],"p",{},"Welcome back to my article. Today, we will be discussing how we can make a scalable and dynamic API call using parameters.",[47,51,52],{},"In the world of software engineering, it’s likely for every developer to make an API call, whether a POST or a GET API request, so it is very important for developers to understand how to make this call dynamically.",[47,54,55],{},"However, to make an API call, we need to organise how our data should be received and sent. To do this, we need a parameter for dynamic API calls, a schema to store data in our database, and an interface to keep our data organized. First, let's look at how we can make an API call in JavaScript and TypeScript.",[57,58,60],"h2",{"id":59},"api-request","Api Request",[47,62,63],{},"Assuming we want to make an API call from the Unsplash URL, we would need an API key to access the data from Unsplash. Once we have an API key, we can make this API call. Here’s a quick way to make this call using JavaScript and TypeScript.",[65,66,71],"pre",{"className":67,"code":69,"language":70},[68],"language-text","// Create a global variable for our API key env file, which we will be using to access  unsplash endpoint in our code\n\nconst Api_key = process.env.API_KEY ; \n\nconst url = 'https://unsplash_api';\n\nasync function fetchApi(url, method = 'GET', body = null, headers = {}) {\n  const defaultHeaders = {\n    'Content-type': 'application/json',\n    'Authorization': `Bearer ${Api_Key}`,\n    ...headers\n  };\n\n  const response = await fetch(url, {\n    method,\n    headers: defaultHeaders,\n    body: body ? JSON.stringify(body) : null\n  });\n\n  let data;\n  try {\n    data = await response.json();\n    if (!response.ok) {\n      return 'Data failed to retrieve';\n    }\n  } catch (error) {\n    console.error('API call failed to fetch data', error);\n    return 'Error trying to fetch data';\n  }\n\n  return data;\n}\n\n\n","text",[72,73,69],"code",{"__ignoreMap":74},"",[76,77,79],"h3",{"id":78},"in-typescript-this-is-how-we-make-the-same-call","In TypeScript, this is how we make the same call.",[65,81,84],{"className":82,"code":83,"language":70},[68],"const api_key = 'unspalsh00992';\n\nasync function fetchapi(url: string, method: string = 'GET', body: any = null, header: Record\u003Cstring, string> = {}): Promise\u003Cstring> {\n  // Try to get the response\n  try {\n    // Create a default header to dynamically access headers in the function\n    const defaultHeader = {\n      'Content-type': 'application/json',\n      'Authorization': `Bearer ${process.env.api_key}`,\n      ...header\n    };\n\n    // Create a variable that defines our response data\n    const response = await fetch(url, {\n      method,\n      headers: defaultHeader,\n      body: body ? JSON.stringify(body) : null\n    });\n\n    // Create a variable to hold our response\n    let data = await response.json();\n    return data;\n  } catch (error) {\n    console.error('API call failed', error);\n    return 'An error occurred while fetching data';\n  }\n}\n\n",[72,85,83],{"__ignoreMap":74},[47,87,88],{},"Now that we have finally learned how to make our first API call, let's look at the issue at hand. Imagine we want to make an API call for specific images of a certain kind of location, e.g., \"beach in Spain.\" When we make the api call like the previous one, it wont give us full control of the kind of data we want to use, and it isn't scalable or ideal to allow our API to keep fetching irrelevant data. This is where parameters come into play.",[76,90,92],{"id":91},"what-is-a-parameter","What is a Parameter",[47,94,95],{},"A parameter is what we feed into our API call to get a specific kind of data. This is useful when we don't want to get irrelevant data. Here is a detailed example of how we can make an API call using a parameter.",[47,97,98],{},"Firstly, we need to set our parameter dynamically, and to do this, we can use a plain Object-based parameter structure. This can be done directly in JavaScript or TypeScript. While libraries like Zod can assist with table validation, this article focuses on using pure JavaScript and TypeScript.",[65,100,103],{"className":101,"code":102,"language":70},[68],"async function fetchApi(\n  url: string,\n  params: { country: string; type: string; location: string },\n  method: string = 'GET',\n  body: any = null,\n  headers: Record\u003Cstring, string>\n): Promise\u003Cstring> {\n  try {\n    const { country, type, location } = params;\n    const unsplashParam = `${country}, ${location}, ${type}`;\n    const apiUrl = `https://unsplashapi/search/photos?query=${encodeURIComponent(unsplashParam)}&per_page=40`;\n\n    const defaultHeaders = {\n      'Content-Type': 'application/json',\n      Authorization: `Bearer ${process.env.API_KEY}`,\n      ...headers\n    };\n\n    const response = await fetch(apiUrl, {\n      method,\n      headers: defaultHeaders,\n      body: body ? JSON.stringify(body) : null\n    });\n\n    const data = await response.json();\n    return data;\n  } catch (error) {\n    console.error('Failed to retrieve API response', error);\n    return 'API retrieval failed';\n  }\n}\n\n\n",[72,104,102],{"__ignoreMap":74},[47,106,107],{},"Then we can dynamically call our function this way.",[65,109,112],{"className":110,"code":111,"language":70},[68],"await fetchApi('https://unsplashapi...',{ type: 'beach', country: 'Spain', location: 'Ibiza' });\n\nawait fetchApi('https://usplashapi',{ type: 'temple', country: 'India', location: 'Dubai' });\n\nawait fetchApi('https://unspalashapi',{ type: 'temple', country: 'Nigeria', location: 'Akure' });\n",[72,113,111],{"__ignoreMap":74},[115,116,117],"note",{},[47,118,119],{},"You can call multiple APIs dynamically without hardcoding values. This approach offers a more scalable and efficient way to make API requests to any endpoint of your choice.",[76,121,123],{"id":122},"what-is-a-database","What is a database",[47,125,126],{},"A database is a backend system where useful data can be stored. Think of it as the brain of an application, where the key information ,logic and useful data are saved and used throughout the application. To organise data effectively , we use what we call a schema",[47,128,129],{},"In JavaScript development, PostgreSQL is highly recommended. Although PostgreSQL isn't written in JavaScript, we can interact with it using JavaScript libraries like pg or Prisma.",[76,131,133],{"id":132},"what-is-a-schema","What is a schema?",[47,135,136],{},"A schema is a structure or blueprint that helps us organize data in a database or system. Think of it as a data organizer. For instance, imagine we don't have a schema and we want to make an API call. Without a schema, our server wouldn't be able to recognize what data the user is asking for. But with a schema, the system understands what kind of data we are dealing with.",[115,138,139],{},[47,140,141],{},"This article does not focus on saving dynamic API calls data. To learn more about SQL databases and how to store data using sql , I will cover this topic in my next article.",[47,143,144],{},"Thank you for taking the time to read this. I hope it helps you understand how you can effectively use an API parameters, when making an api call to get a specific kind data.",[47,146,147],{},"Until the next article!",{"title":74,"searchDepth":149,"depth":149,"links":150},2,[151],{"id":59,"depth":149,"text":60,"children":152},[153,155,156,157],{"id":78,"depth":154,"text":79},3,{"id":91,"depth":154,"text":92},{"id":122,"depth":154,"text":123},{"id":132,"depth":154,"text":133},"2025-04-23","Build a robust, type-safe API wrapper from scratch without the bloat of external libraries. Learn to use dynamic parameters to turn complex data fetching into a lean, reusable, and zero-dependency workflow.","md","https://images.unsplash.com/photo-1554306274-f23873d9a26c?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fHNvZnR3YXJlJTIwYXJ0aWNsZSUyMGFwaXxlbnwwfHwwfHx8MA%3D%3D",{},5,{"title":10,"description":159},"zW8Vw1_1NmX9J8Pp5X3nrAoLg-a66xgVcmZAaKx3WPM",{"id":167,"title":22,"author":168,"body":170,"date":666,"description":667,"extension":160,"image":668,"meta":669,"minRead":670,"navigation":33,"path":23,"seo":671,"stem":24,"__hash__":672},"blog/blog/slow-design-in-fast-paced-digital-world.md",{"name":40,"avatar":169},{"src":42,"alt":40},{"type":44,"value":171,"toc":649},[172,175,181,184,187,190,194,197,200,203,205,209,212,216,219,226,232,237,240,245,247,251,254,259,265,269,272,277,279,283,286,291,297,302,308,312,315,320,322,326,329,332,337,342,348,352,355,360,362,366,369,373,376,380,386,391,395,398,402,409,413,419,424,426,430,433,437,440,444,450,455,457,461,464,469,473,479,483,486,491,493,497,500,504,507,516,520,523,528,530,534,537,542,546,552,557,563,567,570,577,582,584,588,591,596,600,606,611,626,631,633,637,640],[47,173,174],{},"Arrays are variables that can hold multiple values. In this article, I will be discussing JavaScript arrays and their methods.",[65,176,179],{"className":177,"code":178,"language":70},[68],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Benin\"]\n",[72,180,178],{"__ignoreMap":74},[47,182,183],{},"The code above is an example of how an array looks in JavaScript.",[47,185,186],{},"Congratulations, we just wrote our first array variable in JavaScript!",[188,189],"hr",{},[57,191,193],{"id":192},"why-arrays-in-javascript","Why Arrays in JavaScript?",[47,195,196],{},"We use arrays in JavaScript in order to reduce the amount of repeated code in our program. Instead of saving each value in a separate variable, we can just put them into an array.",[47,198,199],{},"Now let's focus on how we can manipulate our array to get our desired outcome.",[47,201,202],{},"In JavaScript, there are several methods we can use in manipulating arrays. These are well-known as array methods. However, without these methods, we can't work with arrays effectively.",[188,204],{},[57,206,208],{"id":207},"array-methods","Array Methods",[47,210,211],{},"We have multiple array methods in JavaScript, and I will explain each of them in this article.",[76,213,215],{"id":214},"array-slice","Array slice()",[47,217,218],{},"An array slice is used to select an element in an array and store it in a new array. However, the original array remains the same, unlike the pop and push methods.",[47,220,221,225],{},[222,223,224],"strong",{},"Syntax:","\narray.slice(first, end)",[65,227,230],{"className":228,"code":229,"language":70},[68],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Benin\"]\nconst newArray = myArray.slice(0, 2)\nconsole.log(newArray) // this returns [\"Nigeria\", \"USA\"]\n",[72,231,229],{"__ignoreMap":74},[47,233,234],{},[222,235,236],{},"Code Explanation:",[47,238,239],{},"In our code above, we created an array that we called myArray, then we used the slice method to select some elements in myArray, which were the first and second values in myArray elements. In JavaScript, if we are to target a value or element in an array, we use number type to get the index of the element we are targeting, which means an index of 0 is the first element in myArray and also index of 1 is the second element in myArray. As we all know, we do not count from an index of 1 in JavaScript; we start counting from an index of 0. In conclusion, we then saved the selected elements in a new variable called newArray.",[115,241,242],{},[47,243,244],{},"The original array remains unchanged when using slice().",[188,246],{},[76,248,250],{"id":249},"array-splice","Array splice()",[47,252,253],{},"The array splice method removes or adds elements in an array and returns the removed elements if any.",[47,255,256,258],{},[222,257,224],{},"\narray.splice(index, howmany, item1, ....., itemX)",[65,260,263],{"className":261,"code":262,"language":70},[68],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Benin\"]\nmyArray.splice(3, 1, \"Spain\", \"Zimbabwe\")\nconsole.log(myArray) // this returns [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\n\n",[72,264,262],{"__ignoreMap":74},[47,266,267],{},[222,268,236],{},[47,270,271],{},"In our example above we created an array, then we used the splice method to start adding more countries at the index of 3. The 1 inside the splice method is the number of items we want to remove before adding our new countries. Lastly, we added the countries we wanted to add inside our array.",[115,273,274],{},[47,275,276],{},"Unlike slice(), the splice() method modifies the original array.",[188,278],{},[76,280,282],{"id":281},"array-sort","Array sort()",[47,284,285],{},"This method is used for sorting or organizing an array in a descending or ascending order.",[47,287,288,290],{},[222,289,224],{},"\narray.sort(compareFunction)",[65,292,295],{"className":293,"code":294,"language":70},[68],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\nmyArray.sort()\nconsole.log(myArray) // this returns [\"Canada\", \"Nigeria\", \"Spain\", \"USA\", \"Zimbabwe\"]\n\n//Example (sorting in ascending order)\nconst myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\nmyArray.sort()\nconsole.log(myArray) // this returns [\"Canada\", \"Nigeria\", \"Spain\", \"USA\", \"Zimbabwe\"]\n\n\n",[72,296,294],{"__ignoreMap":74},[47,298,299],{},[222,300,301],{},"Example (sorting in descending order):",[65,303,306],{"className":304,"code":305,"language":70},[68],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\nmyArray.sort()\nmyArray.reverse()\nconsole.log(myArray) // this returns [\"Zimbabwe\", \"USA\", \"Spain\", \"Nigeria\", \"Canada\"]\n\n",[72,307,305],{"__ignoreMap":74},[47,309,310],{},[222,311,236],{},[47,313,314],{},"In the code above, we created an array of countries, then we used the sort method to organize the code alphabetically. For descending order, we combined sort() with reverse(). If you are sorting numbers, it targets the smallest to the biggest and vice versa, but if you are sorting strings, it targets the first letter to organize alphabetically.",[115,316,317],{},[47,318,319],{},"The sort() method modifies the original array.",[188,321],{},[76,323,325],{"id":324},"array-shift-and-unshift","Array shift() and unshift()",[47,327,328],{},"Now let's look into the shift and unshift methods. We can use the shift method to completely remove the first element in our array. We can store the value which was removed entirely from our original array in a new array variable, if necessary.",[47,330,331],{},"The unshift method is used to add elements at the beginning of the original array.",[47,333,334,336],{},[222,335,224],{},"\narray.shift()\narray.unshift(item1, item2, ..., itemX)",[47,338,339],{},[222,340,341],{},"Example:",[65,343,346],{"className":344,"code":345,"language":70},[68],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\nmyArray.shift()\nconsole.log(myArray) // this returns [\"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\n\n// Using the unshift method\nmyArray.unshift(\"Ethiopia\")\nconsole.log(myArray) // This returns [\"Ethiopia\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\n\n\n",[72,347,345],{"__ignoreMap":74},[47,349,350],{},[222,351,236],{},[47,353,354],{},"Using the .shift and .unshift methods is very simple because we do not need to do any complex solution to get our desired outcome. We just have to use the .shift or the .unshift syntax on our array. The .unshift syntax added an element to the start of our original array and the .shift element removed the first element.",[115,356,357],{},[47,358,359],{},"Both shift() and unshift() modify the original array.",[188,361],{},[76,363,365],{"id":364},"array-pop-and-array-push","Array pop() and array push()",[47,367,368],{},"This array method plays almost a similar role as the shift and unshift methods. However, the array.pop() method removes the last element from an array, while the array.push() method can be used to add new elements to an array.",[47,370,371],{},[222,372,224],{},[47,374,375],{},"array.pop()\narray.push(item1, item2, ..., itemX)",[47,377,378],{},[222,379,341],{},[65,381,384],{"className":382,"code":383,"language":70},[68],"const myArray = [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Zimbabwe\"]\nmyArray.pop()\nconsole.log(myArray) // This returns [\"Nigeria\", \"USA\", \"Canada\", \"Spain\"]\n\n// Using the push method\nmyArray.push(\"Ethiopia\")\nconsole.log(myArray) // This returns [\"Nigeria\", \"USA\", \"Canada\", \"Spain\", \"Ethiopia\"]\n\n\n",[72,385,383],{"__ignoreMap":74},[115,387,388],{},[47,389,390],{},"Both pop() and push() modify the original array.",[76,392,394],{"id":393},"array-delete","Array delete()",[47,396,397],{},"Array.delete() can be used to delete an element in an array, but I will advise you not to use this method because it leaves an undefined hole in your code. Instead, you can use the pop or shift method to delete an element in an array.",[47,399,400],{},[222,401,224],{},[47,403,404,405],{},"delete array",[406,407,408],"span",{},"index",[47,410,411],{},[222,412,341],{},[65,414,417],{"className":415,"code":416,"language":70},[68],"const myCities = [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\ndelete myCities[0]\nconsole.log(myCities) // This returns [empty, \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\n\n",[72,418,416],{"__ignoreMap":74},[115,420,421],{},[47,422,423],{},"Avoid using delete() on arrays as it leaves undefined holes. Use pop(), shift(), or splice() instead.",[188,425],{},[76,427,429],{"id":428},"array-join","Array join()",[47,431,432],{},"Array join() joins all elements together that are separated by commas or any specific separators in an array.",[47,434,435],{},[222,436,224],{},[47,438,439],{},"array.join(separator)",[47,441,442],{},[222,443,341],{},[65,445,448],{"className":446,"code":447,"language":70},[68],"const myCities = [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\nconsole.log(myCities.join('')) // this returns \"LagosSacramentoTokyoCapetownKampala\"\nconsole.log(myCities.join(' - ')) // this returns \"Lagos - Sacramento - Tokyo - Capetown - Kampala\"\n",[72,449,447],{"__ignoreMap":74},[115,451,452],{},[47,453,454],{},"The join() method does not modify the original array.",[188,456],{},[76,458,460],{"id":459},"array-concat","Array concat()",[47,462,463],{},"This method joins two or more arrays together. Moreover, it works just like the + operator.",[47,465,466,468],{},[222,467,224],{},"\narray1.concat(array2, array3, ..., arrayX)",[47,470,471],{},[222,472,341],{},[65,474,477],{"className":475,"code":476,"language":70},[68],"const myCities1 = [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\nconst myCities2 = [\"Texas\", \"Addis Ababa\", \"Accra\", \"Cotonou\"]\nconst newArray = myCities1.concat(myCities2)\nconsole.log(newArray) // this returns [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\", \"Texas\", \"Addis Ababa\", \"Accra\", \"Cotonou\"]\n",[72,478,476],{"__ignoreMap":74},[47,480,481],{},[222,482,236],{},[47,484,485],{},"In the code above, we created our first array \"myCities1\" and also created another array called \"myCities2\". We then called the concat method on myCities1 and added myCities2 to the parenthesis. This resulted in the first and second arrays joining together to form a new array.",[115,487,488],{},[47,489,490],{},"The concat() method does not modify the original arrays.",[188,492],{},[76,494,496],{"id":495},"array-tostring","Array toString()",[47,498,499],{},"Array toString() works on turning all the elements in an array into one string type.",[47,501,502],{},[222,503,224],{},[47,505,506],{},"array.toString()",[47,508,509,511,512,515],{},[222,510,341],{},"\nconst myCities = ",[406,513,514],{},"\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"","\nconst newArray = myCities.toString()\nconsole.log(newArray) // This returns \"Lagos,Sacramento,Tokyo,Capetown,Kampala\"",[47,517,518],{},[222,519,236],{},[47,521,522],{},"We created an array in the code above. After that, we created a new variable called newArray, and then we assigned it to the original array \"myCities\" and called the toString() method on myCities. Finally, we logged newArray to our console and got our desired result.",[115,524,525],{},[47,526,527],{},"The toString() method does not modify the original array.",[188,529],{},[76,531,533],{"id":532},"array-length","Array length",[47,535,536],{},"The length method checks for the length of an array element and returns the actual number of elements in an array.",[47,538,539,541],{},[222,540,224],{},"\narray.length",[47,543,544],{},[222,545,341],{},[65,547,550],{"className":548,"code":549,"language":70},[68],"const myCities = [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\nconst arrayLength = myCities.length\nconsole.log(arrayLength) // 5\n",[72,551,549],{"__ignoreMap":74},[47,553,554],{},[222,555,556],{},"Bonus example:",[65,558,561],{"className":559,"code":560,"language":70},[68],"const myCities = [\"Lagos\", \"Sacramento\", \"Tokyo\", \"Capetown\", \"Kampala\"]\nmyCities.length = 3\nconsole.log(myCities) // This returns [\"Lagos\", \"Sacramento\", \"Tokyo\"]\n",[72,562,560],{"__ignoreMap":74},[47,564,565],{},[222,566,236],{},[47,568,569],{},"This is a very simple code. We started by creating a new array, afterward, we created a variable and assigned it to our original array \"myCities\" and called the length method. After that, we console logged the variable, which resulted in 5 because the length of our myCities array is 5.",[47,571,572,573,576],{},"In our second example, myCities.length returns ",[406,574,575],{},"\"Lagos\", \"Sacramento\", \"Tokyo\""," because we assigned myCities.length to get the length of 3 elements.",[115,578,579],{},[47,580,581],{},"The length property can also be used to truncate an array.",[188,583],{},[76,585,587],{"id":586},"array-flat","Array flat()",[47,589,590],{},"Array flat methods are used to concatenate sub-arrays elements.",[47,592,593,595],{},[222,594,224],{},"\narray.flat()",[47,597,598],{},[222,599,341],{},[65,601,604],{"className":602,"code":603,"language":70},[68],"const myArray = [[1,2], [3,4], [5,6]]\nconst newArray = myArray.flat()\nconsole.log(newArray) // This returns [1,2,3,4,5,6]\n",[72,605,603],{"__ignoreMap":74},[47,607,608],{},[222,609,610],{},"Explanation:",[47,612,613,614,617,618,621,622,625],{},"The code above takes the nested array [[1,2], ",[406,615,616],{},"3,4",", ",[406,619,620],{},"5,6","] and transforms it into a single-dimensional array ",[406,623,624],{},"1, 2, 3, 4, 5, 6"," by flattening it using the flat() method.",[115,627,628],{},[47,629,630],{},"The flat() method does not modify the original array.",[188,632],{},[57,634,636],{"id":635},"conclusion","Conclusion",[47,638,639],{},"We have come to the end of this article. I hope you understand all concepts that were explained in this article. As we all know, array methods are very great tools to use while manipulating arrays. In this article, we looked at the frequently used array methods.",[47,641,642,643],{},"Please note, there are more array methods in JavaScript that we didn't look into. You can read more on array methods here: ",[644,645,646],"a",{"href":646,"rel":647},"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array",[648],"nofollow",{"title":74,"searchDepth":149,"depth":149,"links":650},[651,652,665],{"id":192,"depth":149,"text":193},{"id":207,"depth":149,"text":208,"children":653},[654,655,656,657,658,659,660,661,662,663,664],{"id":214,"depth":154,"text":215},{"id":249,"depth":154,"text":250},{"id":281,"depth":154,"text":282},{"id":324,"depth":154,"text":325},{"id":364,"depth":154,"text":365},{"id":393,"depth":154,"text":394},{"id":428,"depth":154,"text":429},{"id":459,"depth":154,"text":460},{"id":495,"depth":154,"text":496},{"id":532,"depth":154,"text":533},{"id":586,"depth":154,"text":587},{"id":635,"depth":149,"text":636},"2025-01-28","Master the functional power of JavaScript arrays. From basic manipulation to advanced iteration, this deep dive breaks down the most essential methods for building lean, high-performance codebases. Learn to handle data structures with the same 'aesthetic precision' you apply to your UI.","https://images.unsplash.com/photo-1514070706115-47c142769603?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTZ8fHNvZnR3YXJlJTIwYXJ0aWNsZSUyMGFwaXxlbnwwfHwwfHx8MA%3D%3D",{},7,{"title":22,"description":667},"rytYDVgGWxurUadqKXoBCbs-uk6lLZtEI_2MqxM-mfA",{"id":674,"title":14,"author":675,"body":677,"date":1124,"description":1125,"extension":160,"image":1126,"meta":1127,"minRead":670,"navigation":33,"path":15,"seo":1128,"stem":16,"__hash__":1129},"blog/blog/how-i-built-my-own-design-system-from-scratch.md",{"name":40,"avatar":676},{"src":42,"alt":40},{"type":44,"value":678,"toc":1100},[679,684,687,689,693,696,699,701,705,708,714,719,723,726,729,732,734,738,741,744,748,751,757,761,764,767,773,780,783,789,796,800,803,806,812,814,818,821,824,828,831,834,840,844,847,853,856,858,862,865,869,872,882,885,891,894,897,899,903,906,909,915,918,920,924,927,930,936,938,942,945,948,951,954,957,959,963,966,969,972,978,981,983,987,1082,1084,1086,1089,1092,1095,1097],[680,681,683],"h1",{"id":682},"understanding-javascript-data-types-a-comprehensive-guide-for-beginners","Understanding JavaScript Data Types: A Comprehensive Guide for Beginners",[47,685,686],{},"In this article, I will be discussing data types in JavaScript. I'm very sure that anyone reading this should be able to comprehend JavaScript data types well enough. Firstly, I will start by defining data types for a better understanding.",[188,688],{},[57,690,692],{"id":691},"what-are-data-types","What Are Data Types?",[47,694,695],{},"Data types can be described as different types or kinds of data we will be working with while using the JavaScript programming language. Data types are used in multiple ways while writing a program; we use them mostly when storing values in variables.",[47,697,698],{},"However, there are multiple types of data we will be looking into in this article.",[188,700],{},[57,702,704],{"id":703},"string-type","String Type",[47,706,707],{},"A string is a set of alphanumeric characters that can be written with double quotes in JavaScript. Here's how a string looks in JavaScript:",[65,709,712],{"className":710,"code":711,"language":70},[68],"const str = \"string\"\n",[72,713,711],{"__ignoreMap":74},[115,715,716],{},[47,717,718],{},"JavaScript strings are immutable, which means that once the string is created, it cannot be changed.",[76,720,722],{"id":721},"string-indexing","String Indexing",[47,724,725],{},"It is noted that the first character of a string is at the index of 0, the second character is at the index of 1.",[47,727,728],{},"As a newbie in JavaScript programming language, you may be confused about why I started counting from 0 instead of 1. Here's why: In computer science algorithms and data structures, we do not count from 1 when looking for the index in a string or number.",[47,730,731],{},"I will talk more about this topic in my next article; for now, we are only focusing on data type basics.",[188,733],{},[57,735,737],{"id":736},"number-type","Number Type",[47,739,740],{},"JavaScript has only one number type, which can be written with or without a decimal point:",[47,742,743],{},"const num = 45 // without decimal\nconst num2 = 3.5 // with decimal",[76,745,747],{"id":746},"scientific-notation","Scientific Notation",[47,749,750],{},"Extra large and extra small numbers can be written with scientific exponent notation. Using this exponent saves you time from writing lots of zeros behind or ahead of your number type:",[65,752,755],{"className":753,"code":754,"language":70},[68],"const myNum = 35e7\nconsole.log(myNum) // returns 350000000\nconsole.log(typeof myNum) // returns \"number\"\n\nconst myNum2 = 35e-7\nconsole.log(myNum2) // returns 0.0000035\n",[72,756,754],{"__ignoreMap":74},[76,758,760],{"id":759},"integer-precision-and-floating-precision","Integer Precision and Floating Precision",[47,762,763],{},"Furthermore, I would love to dive deeper into JavaScript number types. We have two types of numbers: integer precision and floating precision.",[47,765,766],{},"Integer precision numbers are those number types that don't have a decimal or exponent notation. These numbers are accurate to 15 digits:",[65,768,771],{"className":769,"code":770,"language":70},[68],"// Integer precision number\nconst myInteger = 42\nconsole.log(myInteger) // 42\nconsole.log(typeof myInteger) // 'number'\n",[72,772,770],{"__ignoreMap":74},[47,774,775,776],{},"There are deeper explanations to this; you can read more about it here: ",[644,777,778],{"href":778,"rel":779},"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Number_type",[648],[47,781,782],{},"Floating precision arithmetic points are numbers in JavaScript that aren't 100% accurate. For example:",[65,784,787],{"className":785,"code":786,"language":70},[68],"// Non-integer precision number\nconst myFloat = 3.14\nconsole.log(myFloat) // 3.14\nconsole.log(typeof myFloat) // 'number'\n",[72,788,786],{"__ignoreMap":74},[47,790,791,792],{},"You can also dive deeper into non-integer numbers here: ",[644,793,794],{"href":794,"rel":795},"https://developer.mozilla.org/en-US/docs/Glossary/float",[648],[76,797,799],{"id":798},"working-with-the-operator","Working with the + Operator",[47,801,802],{},"When you use the + operator with number types, it adds the numbers; when you use the + operator on a string, it concatenates the string.",[47,804,805],{},"For example:",[65,807,810],{"className":808,"code":809,"language":70},[68],"\n// Using the + operator with numbers\nconst myNum1 = 22\nconst myNum2 = 13\nconsole.log(myNum1 + myNum2) // returns 35\n\n// Using the + operator with a string\nconst myStr = \"string\"\nconst myNum3 = 13\nconsole.log(myStr + myNum3) // returns \"string13\"\n",[72,811,809],{"__ignoreMap":74},[188,813],{},[57,815,817],{"id":816},"equality-operators","Equality Operators",[47,819,820],{},"Now let's look at the equality operator. While programming, we will be using this operator constantly. As we all know, without this operator, we cannot assign a value to a variable or define a variable.",[47,822,823],{},"The equality operator comes with a strict (===) and loose (==) alternative for comparing values or data.",[76,825,827],{"id":826},"strict-equality","Strict Equality (===)",[47,829,830],{},"This operator does not perform coercion before comparing a value. For strict equality to return true, the values being compared must have the same data type and value.",[47,832,833],{},"// When comparing using strict equality",[65,835,838],{"className":836,"code":837,"language":70},[68],"\nlet myNum1 = 3\nlet myNum2 = \"3\"\nlet myNum3 = 3\n\nconsole.log(myNum1 === myNum3) // this returns true\nconsole.log(myNum1 === myNum2) // this returns false\n",[72,839,837],{"__ignoreMap":74},[76,841,843],{"id":842},"loose-equality","Loose Equality (==)",[47,845,846],{},"This equality must perform coercion or conversion before comparing values.",[65,848,851],{"className":849,"code":850,"language":70},[68],"\n// When comparing using loose equality\n\nlet myNum1 = 3\nlet myNum2 = \"3\"\nlet myNum3 = 3\n\nconsole.log(myNum1 == myNum3) // this returns true\nconsole.log(myNum1 == myNum2) // this returns true\n",[72,852,850],{"__ignoreMap":74},[47,854,855],{},"Please note: There are many operators in JavaScript, but we are just looking at the most frequently used ones. Check my profile for an article on all JavaScript operators for a deeper understanding.",[188,857],{},[57,859,861],{"id":860},"null-type","Null Type",[47,863,864],{},"Null is a special primitive data type that indicates an empty value or an absence of a value. When a variable is assigned null, it means that the variable is not pointing to any object or variable in memory.",[76,866,868],{"id":867},"primitive-vs-non-primitive","Primitive vs Non-Primitive",[47,870,871],{},"You might be wondering what primitive data types are:",[873,874,875,879],"ul",{},[876,877,878],"li",{},"Primitive data types are data that are predefined in JavaScript",[876,880,881],{},"Non-primitive data types are data that aren't predefined—it is the duty of the programmer to define these",[47,883,884],{},"Important: null and undefined are two different data types, although they play almost the same role in JavaScript.",[65,886,889],{"className":887,"code":888,"language":70},[68],"\nlet myVariable = null\nconsole.log(myVariable) // null\nconsole.log(typeof myVariable) // \"object\"\n",[72,890,888],{"__ignoreMap":74},[47,892,893],{},"In the example above, we assigned a variable to null, and you can clearly see what it returns. We also use the typeof operator to check for the data type, and it returns an object type.",[47,895,896],{},"The fact that typeof null is \"object\" in JavaScript is counterintuitive because we might expect it to be something like \"null\". This is because null is an empty object.",[188,898],{},[57,900,902],{"id":901},"undefined-type","Undefined Type",[47,904,905],{},"Undefined is a primitive data type that returns undefined when a variable isn't assigned a value. It represents the absence of any value, including objects or properties.",[47,907,908],{},"The difference between null and undefined is that null represents the intentional absence of an object.",[65,910,913],{"className":911,"code":912,"language":70},[68],"\nlet myVariable\nconsole.log(myVariable) // undefined\nconsole.log(typeof myVariable) // \"undefined\"\n",[72,914,912],{"__ignoreMap":74},[47,916,917],{},"Because the variable isn't defined in the example above, it automatically returns \"undefined\".",[188,919],{},[57,921,923],{"id":922},"boolean-type","Boolean Type",[47,925,926],{},"When working with programming languages, most times you will need a data type to check if a value is true or false, on or off, yes or no. This is where the boolean data type comes into play.",[47,928,929],{},"This data type only returns true or false:",[65,931,934],{"className":932,"code":933,"language":70},[68],"\nlet myBoolean1 = true\nlet myBoolean2 = false\n\nconsole.log(myBoolean1) // true\nconsole.log(typeof myBoolean1) // \"boolean\"\nconsole.log(myBoolean2) // false\nconsole.log(typeof myBoolean2) // \"boolean\"\n",[72,935,933],{"__ignoreMap":74},[188,937],{},[57,939,941],{"id":940},"symbol-type","Symbol Type",[47,943,944],{},"Symbols are primitive data types that were introduced in ECMAScript 2015 (ES6). They are unique and immutable values that can be used as keys for object properties.",[47,946,947],{},"Symbols can be created using the symbol function Symbol(), which returns a symbol. The symbol function takes an optional parameter of a string that serves as a description. These descriptions are mainly used for debugging and do not affect the uniqueness of the symbol.",[47,949,950],{},"const symbol1 = Symbol('mySymbol')\nconst symbol2 = Symbol('mySymbol')",[47,952,953],{},"console.log(symbol1 === symbol2) // false",[47,955,956],{},"From the example above, we got a falsy return value when comparing two symbols with the same description. This means two symbols with the same descriptions can never be equal.",[188,958],{},[57,960,962],{"id":961},"object-type-non-primitive-data-type","Object Type (Non-Primitive Data Type)",[47,964,965],{},"It wouldn't be cool if we only looked at primitive data types and didn't look into non-primitive data types. The object type is the only non-primitive data type we have in JavaScript.",[47,967,968],{},"Object is the only non-primitive and complex data type we have in JavaScript because you have to define it. Objects can be used to store collections of data. This data comes with property names; these property names are normally stored as strings, and the strings carry the values of the object.",[47,970,971],{},"Moreover, the values can be strings, numbers, or even arrays:",[65,973,976],{"className":974,"code":975,"language":70},[68],"\nconst person = {\n  name: \"Satochi\",\n  age: 25,\n  address: {\n    homeNum: 2,\n    street: \"Lincoln Avenue\",\n    city: \"Houston\",\n    state: \"Texas\"\n  }\n}\n\nconsole.log(person) // returns every detail: \"name\", \"age\", \"address\" of the object person\nconsole.log(typeof person) // returns \"object\"\n\n\n",[72,977,975],{"__ignoreMap":74},[47,979,980],{},"In the example above, we created an object variable called person and assigned properties of name, age, and address to it. When we log the console of person and typeof person, it brings out all the properties of person, and the typeof operator returns \"object\".",[188,982],{},[57,984,986],{"id":985},"summary","Summary",[988,989,990,1006],"table",{},[991,992,993],"thead",{},[994,995,996,1000,1003],"tr",{},[997,998,999],"th",{},"Data Type",[997,1001,1002],{},"Category",[997,1004,1005],{},"Example",[1007,1008,1009,1021,1031,1041,1051,1061,1071],"tbody",{},[994,1010,1011,1015,1018],{},[1012,1013,1014],"td",{},"String",[1012,1016,1017],{},"Primitive",[1012,1019,1020],{},"\"hello\"",[994,1022,1023,1026,1028],{},[1012,1024,1025],{},"Number",[1012,1027,1017],{},[1012,1029,1030],{},"42, 3.14",[994,1032,1033,1036,1038],{},[1012,1034,1035],{},"Boolean",[1012,1037,1017],{},[1012,1039,1040],{},"true, false",[994,1042,1043,1046,1048],{},[1012,1044,1045],{},"Null",[1012,1047,1017],{},[1012,1049,1050],{},"null",[994,1052,1053,1056,1058],{},[1012,1054,1055],{},"Undefined",[1012,1057,1017],{},[1012,1059,1060],{},"undefined",[994,1062,1063,1066,1068],{},[1012,1064,1065],{},"Symbol",[1012,1067,1017],{},[1012,1069,1070],{},"Symbol()",[994,1072,1073,1076,1079],{},[1012,1074,1075],{},"Object",[1012,1077,1078],{},"Non-Primitive",[1012,1080,1081],{},"{name: \"John\"}",[188,1083],{},[57,1085,636],{"id":635},[47,1087,1088],{},"Now that we have come to the end of this technical article, I'm sure you all now understand data types in JavaScript.",[47,1090,1091],{},"Thank you for reading my article. Do not forget to follow me, share this article, and also hit that like button.",[47,1093,1094],{},"Sending you all peace, love, and light. Namaste",[188,1096],{},[47,1098,1099],{},"Got questions? Drop them in the comments below!",{"title":74,"searchDepth":149,"depth":149,"links":1101},[1102,1103,1106,1111,1115,1118,1119,1120,1121,1122,1123],{"id":691,"depth":149,"text":692},{"id":703,"depth":149,"text":704,"children":1104},[1105],{"id":721,"depth":154,"text":722},{"id":736,"depth":149,"text":737,"children":1107},[1108,1109,1110],{"id":746,"depth":154,"text":747},{"id":759,"depth":154,"text":760},{"id":798,"depth":154,"text":799},{"id":816,"depth":149,"text":817,"children":1112},[1113,1114],{"id":826,"depth":154,"text":827},{"id":842,"depth":154,"text":843},{"id":860,"depth":149,"text":861,"children":1116},[1117],{"id":867,"depth":154,"text":868},{"id":901,"depth":149,"text":902},{"id":922,"depth":149,"text":923},{"id":940,"depth":149,"text":941},{"id":961,"depth":149,"text":962},{"id":985,"depth":149,"text":986},{"id":635,"depth":149,"text":636},"2023-04-24","A Comprehensive Explanation of Primitive and Object Types","https://plus.unsplash.com/premium_photo-1692241076210-9e696db67fce?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDd8fHNvZnR3YXJlJTIwYXJ0aWNsZSUyMGFwaXxlbnwwfHwwfHx8MA%3D%3D",{},{"title":14,"description":1125},"3UCeoz7xP4A4z8aVMMqe1RzT9SBUWeT6CWPh2H5uzqc",{"id":1131,"title":18,"author":1132,"body":1134,"date":1405,"description":1406,"extension":160,"image":1407,"meta":1408,"minRead":1409,"navigation":33,"path":19,"seo":1410,"stem":20,"__hash__":1411},"blog/blog/psychology-of-color-in-ui-design.md",{"name":40,"avatar":1133},{"src":42,"alt":40},{"type":44,"value":1135,"toc":1386},[1136,1140,1143,1145,1149,1152,1155,1158,1161,1163,1167,1170,1173,1179,1182,1187,1190,1194,1201,1208,1210,1214,1217,1220,1226,1229,1234,1237,1241,1247,1253,1255,1259,1262,1265,1271,1274,1279,1283,1289,1295,1297,1301,1304,1307,1310,1316,1319,1322,1326,1332,1338,1340,1344,1347,1350,1356,1359,1363,1369,1375,1377,1379,1382],[680,1137,1139],{"id":1138},"all-css-frameworks-you-can-use-for-client-side-development","All CSS Frameworks You Can Use for Client-Side Development",[47,1141,1142],{},"In this article, we will be discussing all CSS frameworks we can use in developing our client-side interface. For those of us that don't know what the term client-side interface means, I will just glance at this because this article is just focused on detailing our CSS frameworks.",[188,1144],{},[57,1146,1148],{"id":1147},"client-side-interface","Client-Side Interface",[47,1150,1151],{},"Client-side interface can be explained as the visible part of an application that users interact with. For example, we have buttons, a search bar, a navigation bar, footer — all these features can be found in the client-side interface.",[47,1153,1154],{},"NOTE: I hope this has given you a brief detail about the client-side interface. I will dive into this topic in my next article.",[47,1156,1157],{},"Now let's go back to our focus point for this article.",[47,1159,1160],{},"These are all frameworks used in the client-side interface, below.",[188,1162],{},[57,1164,1166],{"id":1165},"bootstrap","Bootstrap",[47,1168,1169],{},"Bootstrap is one of the popular free CSS frameworks written by some Twitter employees in CSS, and also it accepts JavaScript-written code. Bootstrap comes with pre-designed CSS styles, which makes developing web and mobile applications easy and faster. This CSS framework is making big waves in the tech industry and it is an open source development framework, where developers around the world commit to it on a daily basis on GitHub.",[47,1171,1172],{},"Bootstrap CSS framework supports cascading stylesheets for their responsive app design which can be also known as CSS. It is a mobile-first app, and it also supports HTML and also JavaScript as stated earlier in this article, which means developers have an upper hand in determining how their application can look like.",[65,1174,1177],{"className":1175,"code":1176,"language":70},[68],"\nHere's what a code in Bootstrap looks like:\n\n\u003Cbutton type=\"button\" class=\"btn btn-primary\">Click Me!\u003C/button>\n\n",[72,1178,1176],{"__ignoreMap":74},[47,1180,1181],{},"This code is a button element that has the class \"btn btn-primary\", which applies the Bootstrap styling for a primary button.",[115,1183,1184],{},[47,1185,1186],{},"This is just a simple example, and Bootstrap provides a wide range of HTML, CSS, and JavaScript components and tools that can be used to create more complex web pages and applications.",[47,1188,1189],{},"Based on my experience using Bootstrap as a front-end developer, I can boldly say Bootstrap is a very nice framework for the front end and also has a very large community. You can try it as well.",[76,1191,1193],{"id":1192},"official-bootstrap-documentation","Official Bootstrap Documentation",[47,1195,1196,1197],{},"Official documentation: ",[644,1198,1199],{"href":1199,"rel":1200},"https://getbootstrap.com/docs/",[648],[47,1202,1203,1204],{},"GitHub repository: ",[644,1205,1206],{"href":1206,"rel":1207},"https://github.com/twbs/bootstrap",[648],[188,1209],{},[57,1211,1213],{"id":1212},"foundation","Foundation",[47,1215,1216],{},"Foundation is also a popular CSS framework used in the front end client-side interface and also has a standard growing community. This framework integrates the classic web design languages HTML, CSS, and JavaScript and controls the responsive design in creating a web application. It is an open source framework just like Bootstrap and other CSS frameworks we will be looking at in this article, so all front-end developers are free to commit to this open source on GitHub.",[47,1218,1219],{},"The foundation is fully responsive and is a mobile-first application. With Foundation, you can write clean and better code for your mobile and web application.",[65,1221,1224],{"className":1222,"code":1223,"language":70},[68],"Here's what a code written in Foundation looks like:\n\n\u003Cbutton class=\"button primary\" style=\"background-color: #ffa500;\">Click me!\u003C/button>\n\n",[72,1225,1223],{"__ignoreMap":74},[47,1227,1228],{},"In this code, we're using the \"primary\" class to style the button as a primary button in Foundation, and we're also adding an inline style to set the background color to a custom shade of orange (#ffa500). You can adjust the color code to use any other color you prefer.",[115,1230,1231],{},[47,1232,1233],{},"You can also define custom styles for the button in a separate CSS file, rather than using inline styles. This is generally a better practice for larger or more complex projects, as it allows you to keep your styling separate from your HTML code.",[47,1235,1236],{},"Although I don't work with Foundation, for this article I had to do very deep research and come up with this and I'm impressed with this CSS framework.",[76,1238,1240],{"id":1239},"official-foundation-documentation","Official Foundation Documentation",[47,1242,1196,1243],{},[644,1244,1245],{"href":1245,"rel":1246},"https://foundation.zurb.com/sites/docs/",[648],[47,1248,1203,1249],{},[644,1250,1251],{"href":1251,"rel":1252},"https://github.com/foundation/foundation-sites",[648],[188,1254],{},[57,1256,1258],{"id":1257},"bulma","Bulma",[47,1260,1261],{},"Bulma is a modern CSS framework that provides pre-designed CSS styles and components to help build responsive web and mobile applications just like other frameworks. The key factor of this framework is that it offers its system of containers and frames that are used to organize the structure of your responsive web application.",[47,1263,1264],{},"Bulma is a CSS framework which means it is written with cascading stylesheet (CSS) and accepts the latest syntax in CSS and all CSS features, such as flexbox and CSS grid. This framework also accepts JavaScript, which can be used for drop-down menus and other JavaScript features you want to use it for.",[65,1266,1269],{"className":1267,"code":1268,"language":70},[68],"//Here is a simple code written with Bulma:\n\n\u003Cbutton class=\"button is-primary\">Click me!\u003C/button>\n",[72,1270,1268],{"__ignoreMap":74},[47,1272,1273],{},"This code creates a button with the Bulma class \"button\", which applies the default button styles, and the class \"is-primary\", which sets the button color to blue.",[115,1275,1276],{},[47,1277,1278],{},"Just like other CSS frameworks, you can add more styling to your code.",[76,1280,1282],{"id":1281},"official-bulma-documentation","Official Bulma Documentation",[47,1284,1196,1285],{},[644,1286,1287],{"href":1287,"rel":1288},"https://bulma.io/documentation/",[648],[47,1290,1203,1291],{},[644,1292,1293],{"href":1293,"rel":1294},"https://github.com/jgthms/bulma",[648],[188,1296],{},[57,1298,1300],{"id":1299},"tailwind-css","Tailwind CSS",[47,1302,1303],{},"Tailwind is a very popular CSS framework that is taking over the tech industries. Most developers prefer using this framework because it gives developers the upper hand on designs. This framework is fully responsive and it is easy to maintain.",[47,1305,1306],{},"The framework has a very big community that is friendly to its users, so while using this framework and you get stuck, the communities are always there to assist you with the problem you will be encountering.",[47,1308,1309],{},"Just like other frameworks explained above, Tailwind CSS is written in cascading stylesheet and also accepts the latest syntax in CSS and all CSS features. You can also write your code in JavaScript for your drop-down menus and codes that require JavaScript.",[65,1311,1314],{"className":1312,"code":1313,"language":70},[68],"//Here's an example of Tailwind CSS code:\n\n\u003Cbutton class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\">Click me!\u003C/button>\n",[72,1315,1313],{"__ignoreMap":74},[47,1317,1318],{},"This code creates a button with a blue background color using the bg-blue-500 class, and changes the background color to a darker shade of blue when the button is hovered over using the hover:bg-blue-700 class. It also sets the font to bold using font-bold and adds padding and rounded corners to the button using py-2 px-4 and rounded classes respectively. Finally, it sets the text color to white using the text-white class.",[47,1320,1321],{},"NOTE: Most developers use this framework including myself and it is highly recommendable.",[76,1323,1325],{"id":1324},"official-tailwind-css-documentation","Official Tailwind CSS Documentation",[47,1327,1196,1328],{},[644,1329,1330],{"href":1330,"rel":1331},"https://tailwindcss.com/docs",[648],[47,1333,1203,1334],{},[644,1335,1336],{"href":1336,"rel":1337},"https://github.com/tailwindlabs/tailwindcss",[648],[188,1339],{},[57,1341,1343],{"id":1342},"materialize","Materialize",[47,1345,1346],{},"Materialize is a CSS framework written in CSS and it is a framework based on Google Material Design guidelines. This framework is very responsive in its designs and it focuses on simplicity and usability.",[47,1348,1349],{},"Materialize has gained more popularity due to its pre-designed styles, components and JavaScript plugins to help developers build responsive web pages and applications. It has an easy customization option and compatibility which make it popular among developers.",[65,1351,1354],{"className":1352,"code":1353,"language":70},[68],"Here's a code example of Materialize:\n\n\u003Ca class=\"waves-effect waves-light btn blue\">Click me!\u003C/a>\n",[72,1355,1353],{"__ignoreMap":74},[47,1357,1358],{},"This code creates a button with a blue background color using the blue class, and adds some visual effects to it using the waves-effect and waves-light classes. The btn class sets the default button styles for Materialize CSS.",[76,1360,1362],{"id":1361},"official-materialize-documentation","Official Materialize Documentation",[47,1364,1196,1365],{},[644,1366,1367],{"href":1367,"rel":1368},"https://materializecss.com/",[648],[47,1370,1203,1371],{},[644,1372,1373],{"href":1373,"rel":1374},"https://github.com/Dogfalo/materialize",[648],[188,1376],{},[57,1378,636],{"id":635},[47,1380,1381],{},"All CSS frameworks have their strengths and capabilities, and you should choose one that fits your needs and helps you build what you want. While there are many CSS frameworks available, the top five frameworks mentioned earlier are popular and widely used by developers. It's important to note that there are many other CSS frameworks available and you may find others that better fit your specific needs and preferences.",[115,1383,1384],{},[47,1385,1099],{},{"title":74,"searchDepth":149,"depth":149,"links":1387},[1388,1389,1392,1395,1398,1401,1404],{"id":1147,"depth":149,"text":1148},{"id":1165,"depth":149,"text":1166,"children":1390},[1391],{"id":1192,"depth":154,"text":1193},{"id":1212,"depth":149,"text":1213,"children":1393},[1394],{"id":1239,"depth":154,"text":1240},{"id":1257,"depth":149,"text":1258,"children":1396},[1397],{"id":1281,"depth":154,"text":1282},{"id":1299,"depth":149,"text":1300,"children":1399},[1400],{"id":1324,"depth":154,"text":1325},{"id":1342,"depth":149,"text":1343,"children":1402},[1403],{"id":1361,"depth":154,"text":1362},{"id":635,"depth":149,"text":636},"2023-03-16","Beyond just styling, CSS frameworks define the structural logic of the modern web. This deep dive explores the top five frameworks through the lens of 'vibe-first' design and scalability, helping you choose the right tool to bridge the gap between technical puzzles and beautiful, inclusive user interfaces.","https://images.pexels.com/photos/40799/paper-colorful-color-loose-40799.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},6,{"title":18,"description":1406},"dNdJiuHxo2ms3EqKfGGYgAJHswE7OJRkeGKzOwJyFD4",1773669617328]