Kemi72's Posts
Nairaland Forum / Kemi72's Profile / Kemi72's Posts
(1) (2) (of 2 pages)
 Programming / How To Upload Image To Cloudinary In React JS With React Sweet Alert by kemi72: 3:50am On May 01 |
What is Cloudinary? Cloudinary is a cloud-based image and video management platform that provides an alternative solution for storing, managing, optimising, and delivering media assets (images and videos) for websites and mobile applications. Cloudinary offers a wide range of features and functionalities that are designed to simplify the process of handling media assets, improving performance, and enhancing user experience. Before we delve straight into coding it with React, let’s first understand why we might want to use cloud services like Cloudinary. But Why Cloudinary? Yes, I know what you are thinking: “why do I have to store my files on an external server?” Well, unless you have the resources and wherewithal, there are two important reasons why developers prefer cloud storage for their assets: Speed. Space. Speed: Cloudinary integrates with leading CDN providers to ensure fast and reliable delivery of media assets to users worldwide. CDN caching helps reduce latency and improve performance by serving content from edge locations closer to the user’s location. Space: Cloudinary allows users to upload images and videos to its cloud-based storage infrastructure, eliminating the need for local storage and enabling easy access to media assets from anywhere. Read more ... https://blog.codefussion.tech/how-to-upload-image-to-cloudinary-in-react-js-with-react-bootstrap-and-sweet-alert/
|
| Programming / Re: How To Set Character Limits In React JS With Linear Progress Bar by kemi72: 1:13pm On Apr 25 |
kemi72: |
| Programming / How To Set Character Limits In React JS With Linear Progress Bar by kemi72: 2:21am On Apr 25 |
we are going to see how to set character limits in React JS using Material UI Linear Progress dependency. Before we delve straight into coding, let’s see some of the reasons for limiting character input. Importance of Limiting Characters Enhanced User Experience: By limiting character input, you can prevent users from exceeding the allowed length, ensuring that their input fits within the designated space. This helps to prevent errors, such as text being cut off or overflowing, which can detract from the user experience. Clarity and Conciseness: Limiting character input encourages users to be more concise and to the point in their communication. This can lead to clearer and more succinct messages, making it easier for recipients to understand and respond to the content. Promotion of Key Messages: When character input is limited, users are forced to prioritize their content and focus on conveying the most important information. This can help to ensure that key messages are effectively communicated and not diluted by unnecessary details. Improved Readability: Shorter messages are generally easier to read and digest, particularly on digital platforms where attention spans may be limited. By limiting character input, you can help to improve the readability of content, making it more engaging and accessible to users. Let’s Code! First, we’ll have a very basic setup. If you’re reading this article and following along, I assume you already know how to set up a new React project. If not, please checkout our previous tutorials. Dependencies We’re using bootstrap for styling and material ui to show the progress. You can add the Bootstrap dependency to your index.html file in the public folder. This will make bootstrap globally available. Add the material ui dependency using yarn or rpm as follows: yarn add @mui/material yarn add @emotion/styled yarn add @emotion/react Read more ... https://blog.codefussion.tech/2024/04/22/how-to-set-character-limits-in-react-js-with-linear-progress-bar/ 1 Like
|
| Programming / How To Pass Data Between Two React Components by kemi72: 5:14pm On Jan 30 |
We can pass parameters easily between two components in React. Passing data between components is a fundamental aspect of building dynamic and interactive applications. To begin, you have to first install react router, if you don’t already have it installed: yarn add react-router-dom Next, we create a file called RouteScreen.js. We’ll create two files and pass data between them. Read more: https://codeflarelimited.com/blog/how-to-pass-parameters-between-components-in-react/ |
| Programming / How To Instantly Preview Image In React JS by kemi72: 4:58pm On Dec 16, 2023 |
When building software applications there are scenarios where you will want to upload and instantly preview the uploaded image(s). There are several reasons why you should add image preview functionality in your React application: 1. Enhanced User Experience 2. Improved Interactivity 3. Feedback and Confirmation 4. Reduced Server Load 5. Customization and Cropping Here's how to implement it: https://codeflarelimited.com/blog/instantly-preview-uploaded-image-in-react-js/
|
| Programming / Re: Fetch Data From An API And Display In Flatlist In React Native by kemi72: 4:00am On Dec 15, 2023 |
stankelz:Yeah, I get. I'm not always online myself. If you can send your email so I can send instructions on how to set it up. |
| Programming / Solve The Fizz - Buzz Hackerrank Challenge In Both Java And Javascript by kemi72: 4:24pm On Nov 18, 2023 |
Solve the fizzbuzz hackerrank challenge question: Given a number n, for each integer i in the range from 1 to n inclusive, print out one value per line as follows: if i is a multiple of both 3 and 5, print FizzBuzz if i is a multiple of 3(but not 5), print Fizz if i is a multiple of 5(but not 3), print Buzz if i is not a multiple of 3 or 5, print the value of i Java Solution import java.io.*; import java.math.*; import java.security.*; import java.text.*; import java.util.*; import java.util.concurrent.*; import java.util.function.*; import java.util.regex.*; import java.util.stream.*; import static java.util.stream.Collectors.joining; import static java.util.stream.Collectors.toList; class Result { /* * Complete the 'fizzBuzz' function below. * * The function accepts INTEGER n as parameter. */ public static void fizzBuzz(int n) { for(int i=1; i<=n; i++){ if(i%3 == 0 && i%5 == 0){ System.out.println("FizzBuzz"  ;}else if(i%3 == 0){ System.out.println("Fizz" ;}else if(i%5 == 0){ System.out.println("Buzz" ;}else{ System.out.println(i); } } } } public class Solution { public static void main(String[] args) throws IOException { BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(System.in)); int n = Integer.parseInt(bufferedReader.readLine().trim()); Result.fizzBuzz(n); bufferedReader.close(); } } Read more for Javascript solution: https://codeflarelimited.com/blog/fizzbuzz-hackerrank-challenge/
|
| Programming / Re: Fetch Data From An API And Display In Flatlist In React Native by kemi72: 6:02pm On Nov 11, 2023 |
stankelz:Hello bro. How is it going. Have you been able to resolve this. Sorry I'm not always online |
| Programming / Javascript Self-executing Functions by kemi72: 1:08am On Oct 10, 2023 |
What are Self-Executing Functions? A self-executing function, also known as Immediately-invoked Function Expression (IIFE), is a JavaScript function that is defined and executed immediately after its creation. Unlike regular functions that require a call to execute their code, IIFE runs automatically. This feature is particularly handy when you want to encapsulate code and create a private scope for your variables, preventing them from polluting the global scope and is a good software development practice. The basic syntax for an IIFE looks like this: (function () { // Your code here })(); Here’s a breakdown of how this works: Enclose the function definition within parentheses (function () { ... }). Immediately following the closing parentheses, add another pair of parentheses ( ... ) to invoke the function. In this software development training in Abuja, Nigeria, you will learn how to build software solutions that solve real time problems. Inside the first set of parentheses, you can pass parameters to the IIFE just like you would with any regular function. For example: (function (x, y) { console.log(x + y); })(5, 10); // Outputs: 15 Benefits of Self-Executing Functions Self-executing functions offer several advantages that make them a valuable tool for software developers who use JavaScript: 1. Encapsulation and Scope Isolation One of the primary benefits of IIFE is that they create a private scope for your code. Any variables declared inside an IIFE are not accessible from the outside, preventing them from conflicting with variables in the global scope or other parts of your code. This helps improve code maintainability and reduces the risk of naming collisions. (function () { var privateVar = 'This is private'; console.log(privateVar); // Outputs: 'This is private' })(); console.log(typeof privateVar); // Outputs: 'undefined' Read more https://codeflarelimited.com/blog/javascript-self-executing-functions/
|
| Programming / Re: Fetch Data From An API In React Using Functional Components by kemi72: 1:09pm On Oct 05, 2023 |
LikeAking: Lol comrade be calming down lol |
| Programming / Re: Flutterwave Payment Integration With PHP by kemi72: 11:11am On Oct 04, 2023 |
emetisuccess:I don't quite see it as spamming. I'm spreading information you know. |
| Programming / Re: Fetch Data From An API In React Using Functional Components by kemi72: 11:10am On Oct 04, 2023 |
john1101:Yeah. No time. |
| Programming / Re: Fetch Data From An API In React Using Functional Components by kemi72: 11:06am On Oct 04, 2023 |
niel63:Yeah valid point. |
| Programming / Fetch Data From An API In React Using Functional Components by kemi72: 9:41am On Sep 25, 2023 |
In the context of frontend web development, a functional component is a fundamental building block in many modern JavaScript frameworks and libraries. It is a type of component used in frameworks like React and Vue.js, and it can also refer to a similar concept in other programming paradigms, like functional programming. In the context of React (which is one of the most popular JavaScript libraries that we are dealing), a functional component is a JavaScript function that returns JSX (JavaScript XML) to define the structure and appearance of a user interface element. You could choose to use either class or functional components in rendering your JSX. For this particular example, we have already demonstrated the “class” example using React Native. See this article In this tutorial, we are going to fetch data from an endpoint and display the results on our page using, of course, functional components as well as bootstrap for styling. We are going to be fetching data from this endpoint https://catfact.ninja/breeds . It’s a GET Request and requires no access token or authorization. The first thing we want to do is create a new react project and add our code. In our App.js or App.tsx, whichever one applies to you, we’re going to add the following: import { useState, useEffect } from 'react'; const App = () => { return( <div> </div> } export default App Next, we want to have a function that fetches data from the given endpoint. We will create a function and call it fetchItems(). Let us fetch data from the endpoint in React JS. const fetchItem = () => { requestAnimationFrame(() => fetch(`https://catfact.ninja/breeds`, { method: 'GET', }) .then(response => response.json()) .then(responseJson => { setData(responseJson.data) console.warn(responseJson.data); }) .catch(error => { { alert(error) } }), ); } Next, we need to show this data to see that at least we’re getting a response. Read more https://codeflarelimited.com/blog/fetch-data-from-an-api-in-react-using-functional-components/ 1 Like
|
| Programming / Re: Fetch Data From An API And Display In Flatlist In React Native by kemi72: 10:55pm On Sep 24, 2023 |
Frontend:No particular reason. I Just I just like class components. You can still replace the class components with functional components. instead of componentDidMount(), You can use useEffect and useState, then change the class part to function, you're good to go. |
| Programming / Dynamically Populate Select Options In React JS by kemi72: 12:59pm On Sep 13, 2023 |
Dynamically Populate Select Options in React JS could be a real time-saver. When working with software applications built with libraries like React, there are times when you need to dynamically populate a select dropdown with data from an API. This can be done easily in React JS. One advantage of this method is its reusablity. The same data from the API can be used several times without the need to manually enter them. In this example, we shall be dynamically populating our select options with a list of countries. Let’s begin. First, let’s make things look clean. let’s create a file named countries.js. This file will hold our array of countries Here, we have an array of objects of all our countries Next, we call this in our App.js ( or whichever file you’re working with). Read more https://codeflarelimited.com/blog/dynamically-populate-select-options-in-react-js/
|
| Programming / Fetch Data From An API And Display In Flatlist In React Native by kemi72: 4:19am On Sep 09, 2023 |
The FlatList component is an effective way to display items in a scrollable list view. We can fetch data from an API and display in FlatList in React Native. It is a useful alternative to ScrollViews, especially when dealing with large data sets. Flat lists, has the following features: Fully cross-platform. Optional horizontal mode. Configurable viewability callbacks. Header support. Footer support. Separator support. Pull to Refresh. Scroll loading. ScrollToIndex support. Multiple column support. In this article, we shall see how we can fetch data from an endpoint and display the data using FlatList in React Native. So, I will assume that you already know how to create a new React Native application. If you’re just getting started, you can check out the article on creating a new React Native project here. Here’s what a new React Native application should look like: We are going to be fetching data from the Cat Facts API. So we will write our React Native code as follows: fetchItem() { requestAnimationFrame(() => fetch(`https://catfact.ninja/breeds`, { method: 'GET', }) .then(response => response.json()) .then(responseJson => { console.warn(responseJson); }) .catch(error => { { alert(error) } }), ); } componentDidMount(){ this.fetchItem() } Let’s explain what’s happening here. Here, we’re calling the endpoint https://catfact.ninja/breeds and logging the response to at least confirm that we’re even getting a response. We’re then calling that method in our componentDidMount() Here’s the response from the call Read more https://codeflarelimited.com/blog/fetch-data-from-an-api-and-display-in-flatlist-in-react-native/
|
| Programming / Re: Create A Todo App With React, Node JS And Mysql Using Sequelize And Pagination by kemi72: 4:10am On Sep 09, 2023 |
dkdaniel11:Yes, sure. What is the app about? |
| Programming / Image Upload With Preview Using Php’s PDO And Jquery by kemi72: 3:03am On Sep 06, 2023 |
With PHP we can upload various files to the server depending on the given requirements and specifications. In this tutorial, we shall look at how to upload image to the server and store the path in our database. So let’s begin! First, let us create our database connection: database.php <?php defined('BASEPATH') OR exit('No direct script access allowed'); $host = 'localhost'; $user = 'root'; $password = ''; $dbname = 'test'; $dsn = ''; try{ $dsn = 'mysql:host='.$host. ';dbname='.$dbname; $pdo = new PDO($dsn, $user, $password); $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); }catch(PDOException $e){ echo 'connection failed: '.$e->getMessage(); } ?> Next, we create our table called images. Here we’re adding both the image name and the image file. CREATE TABLE `images` ( `id` int(11) NOT NULL, `image_name` varchar(300) NOT NULL, `image_file` text NOT NULL, `date_time` datetime NOT NULL DEFAULT current_timestamp() ) ENGINE=MyISAM DEFAULT CHARSET=latin1; Next, we create a form that with which we can upload our file. <form action="index.php" method="post" enctype="multipart/form-data"> <div> <label for="title">Image title</label> <input id="title" name="image_name" required="required" type="text" aria-required="true" aria-invalid="false"> </div> <div class="form-group"> <div id="preview-container-imageThre"> <button required type="button" id="upload-dialog-three">Choose Image</button><br /><br /> <input require type="file" id="file" name="file" accept="image/jpg,image/png" style="display:none" required="required"/> <img id="preview-image-three" style="display:none" /> </div> </div> <div> <button id="payment-button" type="submit" name="sub"> Add </button> </div> </form> Read more here: https://codeflarelimited.com/blog/image-upload-with-file-preview-using-phps-pdo-and-jquery/
|
| Programming / Flutterwave Payment Integration With PHP by kemi72: 3:35am On Sep 04, 2023 |
FlutterWave payment integration with PHP can be a tedious process if you’re just starting out. Payment integration is the process of integrating a payment gateway or processor into a website or application to enable users to make online payments. This allows businesses to accept payments from customers using a variety of payment methods, such as credit and debit cards, digital wallets, bank transfers, and more. Some popular payment gateway providers include PayPal, Stripe, Authorize.net, Square, and Braintree, among others. Payment integration is an essential component of e-commerce websites, online marketplaces, and mobile applications that facilitate transactions. It helps to streamline the payment process, making it faster and more convenient for customers to make purchases. In addition, payment integration can provide added security measures, such as fraud detection and prevention, to ensure that transactions are safe and secure. To implement payment integration, developers typically use application programming interfaces (APIs) provided by the payment gateway provider to connect the payment system to the website or application. Together with PayStack, FlutterWave is one of the most popular payment platforms in Africa. It has a rich documentation which you can follow through. But if you’re pressed for time and also a PHP dev, here’s a quick and comprehensive implementation for you to follow. FlutterWave Code Integration Snippet <?php $amount = 11300; $first_name = "Lawson"; $last_name = "Luke"; $request = [ 'tx_ref' => time(), 'amount' => $amount, 'currency' => 'NGN', 'payment_options' => 'card', 'redirect_url' => 'your_success.php', //replace with yours 'customer' => [ 'email' => $email, 'name' => $first_name. ' '.$last_name ], 'meta' => [ 'price' => $amount ], 'customizations' => [ 'title' => 'Paying for a service', //Set your title 'description' => 'Level' ] ]; //* Call fluterwave endpoint $curl = curl_init(); curl_setopt_array($curl, array( CURLOPT_URL => 'https://api.flutterwave.com/v3/payments', //don't change this CURLOPT_RETURNTRANSFER => true, CURLOPT_ENCODING => '', CURLOPT_MAXREDIRS => 10, CURLOPT_TIMEOUT => 0, CURLOPT_FOLLOWLOCATION => true, CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1, CURLOPT_CUSTOMREQUEST => 'POST', CURLOPT_POSTFIELDS => json_encode($request), CURLOPT_HTTPHEADER => array( 'Authorization: Bearer YOUR_SECRET KEY', 'Content-Type: application/json' ), )); $response = curl_exec($curl); curl_close($curl); $res = json_decode($response); if($res->status == 'success') { $link = $res->data->link; header('Location: '.$link); } else { // echo 'We can not process your payment'; echo $res->status; } ?> Don’t forget to add Secret key and set your redirect link. Read more here: https://codeflarelimited.com/blog/flutterwave-payment-integration-with-php/ 1 Like
|
| Programming / Re: Create A Todo App With React, Node JS And Mysql Using Sequelize And Pagination by kemi72: 6:19am On Sep 03, 2023 |
Paystack:Thanks. |
| Programming / Re: Create A Todo App With React, Node JS And Mysql Using Sequelize And Pagination by kemi72: 1:45am On Sep 03, 2023 |
Deicide:Yeah, there are requirements for that. I've personally seen an interview assessment question with that requirement. Also to help people understand that if you can apply to a to-do app, you can apply it to just about anything. |
| Programming / Create A Todo App With React, Node JS And Mysql Using Sequelize And Pagination by kemi72: 5:36pm On Sep 02, 2023 |
Today, we are going to create a todo app with React and Node JS. A to-do app, short for “to-do list application,” is a software product that assists people or teams in better organising activities and managing their time. It normally lets users to create, organise, and prioritise tasks in a list style, set reminders and due dates, and mark completed tasks. In this article, we will see how we can create this this todo application with React, Node JS and MySQL using Sequelize. We will use React for the frontend and Node JS for the API creation. What is Sequelize in MySQL? Sequelize is a Node.js Object-Relational Mapping (ORM) framework that allows you to connect with relational databases using JavaScript syntax. It works with a variety of database systems, including MySQL, PostgreSQL, SQLite, and MSSQL. When used in conjunction with MySQL, Sequelize offers a number of useful capabilities for managing database connections, accessing data, and executing migrations. It abstracts away the actual SQL queries and enables developers to deal with database tables as JavaScript objects, utilising a robust set of API methods. Some of the key features of Sequelize with MySQL include: Support for database migrations: Sequelize provides a way to easily create, update, and roll back database schema changes, making it easy to manage database schema changes in a controlled and repeatable way. Object-Relational Mapping: Sequelize maps database tables to JavaScript objects, allowing developers to interact with the database using JavaScript syntax and avoid writing raw SQL queries. Query building: Sequelize provides a powerful query builder that allows developers to create complex SQL queries using a simple and intuitive syntax. Connection pooling: Sequelize includes a built-in connection pool, which can help improve performance by reusing database connections rather than creating a new connection for every request. Transactions: Sequelize supports database transactions, which provide a way to group together a set of database operations that should be executed atomically. To utilise serialisation in MySQL, you must first identify the essential areas of your application where concurrent access to the same data is possible, and then apply proper locking methods to avoid conflicts. Excessive locking can cause conflict and lower concurrency, therefore it’s critical to achieve a balance between performance and data consistency. Now let us begin … Building the Frontend With React First, we have to create a new React app npx create-react-app folderName Next, we need to add some dependencies — react-router-dom, sweetealert2. This will help us to show the results of performed actions. yarn add react-router-dom sweetalert2 From inside the src folder, we will create a new folder called assets -> images. We will also create another folder called components — that’s where we will put our API component. We will also create a folder called pages still inside the src folder. Read more https://codeflarelimited.com/blog/create-a-todo-app-with-react-node-js-and-mysql-using-sequelize-and-pagination/
|
| Programming / Re: How To Use React Router Navigation by kemi72: 5:30pm On Sep 02, 2023 |
Snotat:Thank you. |
| Programming / Re: How To Use React Router Navigation by kemi72: 5:11pm On Sep 02, 2023 |
chukwuebuka65:Thank you. |
| Programming / How To Use React Router Navigation by kemi72: 9:39pm On Aug 31, 2023 |
React Router, a widely adopted library in the React ecosystem, offers a powerful solution to tackle navigation challenges in modern web development. In this article, we’ll delve into the ins and outs of React Router navigation, exploring its core concepts, usage, and advanced features. Why React Router? In the world of single-page applications (SPAs), smooth and efficient navigation is a crucial aspect of providing a seamless user experience. React Router is a JavaScript library designed to handle client-side routing in SPAs. Unlike traditional multi-page applications that involve full page reloads upon navigation, SPAs dynamically update specific components based on the URL without causing the entire page to refresh. React Router facilitates this behavior by providing a set of components and tools for managing navigation within your React applications. Getting Started To start using React Router for navigation, you first need to install it into your project. Open your terminal and run the following command: npm install react-router-dom // or yarn add react-router-dom Read more here https://codeflarelimited.com/blog/react-router-navigation-with-examples/
|
| Programming / Re: I Want To Learn Programming. Which Language Should I Start With? by kemi72: 1:05am On Jul 15, 2023 |
"Unlock Your Potential with Codeflare Limited! Are you ready to embark on an exciting journey into the world of software development? Look no further than Codeflare Limited, the leading software development company in Abuja. We are thrilled to announce our exclusive 4-weeks training program, designed to empower aspiring developers in Web Development, Mobile App Development (Android & iOS), and Blockchain Development. *Why choose Codeflare Limited? Here's what sets us apart:* • Industry-Recognized Certification: Upon successful completion of the training, you will be awarded an internationally recognized certificate from the Skill Development Council Canada. This certificate will boost your credentials and open doors to global opportunities. • Industry-leading experts as trainers, with years of experience in their respective fields. • Practical, hands-on training approach to ensure you gain real-world skills. • State-of-the-art facilities and cutting-edge technologies for an immersive learning experience. And that's not all! We have a limited-time offer for our early birds. Be among the first 10 students to enroll and enjoy an incredible 50% discount on the training fees. Don't miss out on this golden opportunity to enhance your skills and broaden your horizons. Spaces are filling up fast, so hurry and secure your spot now! To register or learn more, visit our website at www.codeflarelimited.com or call us at 07089386320. Join Codeflare Limited and shape your future in the world of software development!"
|
(1) (2) (of 2 pages)
(Go Up)
| Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 89 |