Photo by KOBU Agency on Unsplash

Web developers can use vanilla javascript to build a variety of features. Using vanilla javascript can speed up the development process in web programming. This is because there are no external libraries and plugins required. For example, vanilla js provides methods that can be used to put in place image size validation on websites. These methods are embedded in the javascript engine. In this article, I will show you step by step how to validate images using VANILLA js.

Step 1: Create a folder and inside it create three files. These are index.html, styles.css, and script.js.

Step 2: Add the…


Image by istockphoto

A search bar is a very common type of input on many websites. It improves the user experience of any web application. It does this by reducing the time spent on looking for data from very long lists. Adding a searchbar to a single-page application can be challenging for some developers. This article will show you step by step how to filter a long list of data using a search bar in React js.

Step 1

Create a fresh React app. Call it search-app. Read React installation steps here

npx create-react-app search-app

Step 2

Create a folder called components inside the /src folder of…


Photo by Myriam Jessier on Unsplash

Website forms rarely consist of only simple text fields and text-area fields. They usually contain more complex input types. These include dropdown select boxes, radio buttons, and checkbox inputs. Implementing these types of inputs in React has proven to be a challenge for some developers.

This article will show you a step-by-step implementation of some complex inputs. These are the dropdown select boxes, radio buttons, and checkbox inputs. We will use the <Field/> component in Formik.

Step 1. Create a fresh React app. Call it complex-form-app. Read React installation steps here

npx create-react-app complex-form-app

Step 2: Then install Formik library…


How to handle form validation in React

Photo by Domenico Loia on Unsplash

Front-end developers must put in place client-side form validation. This is because it improves user experience and website performance. It prevents the sending of invalid data to the backend server. REACT in conjunction with other libraries makes this implementation easy. This article will show you how to add validation to a text field, email field, text area, and date field. We will use REACT, formik, and yup.

Step 1. Create a fresh react app. Call it form-validation-app. Read React installation steps here

npx create-react-app form-validation-app

Step 2: Then install formik library to the app. Read Formik Documentation here

cd form-validation-app
npm…


Photo by Yogas Design on Unsplash

Connecting a REACT NATIVE project to a Localhost API can enhance the testing and debugging of your project. This however has proven to be cumbersome especially if the app project is running on a physical device. In most cases, the developer has to upload the RESTFUL API to the internet. The app on the device can then access the API from the World Wide Web. This approach can be costly and increases the development time.

A better approach is to connect a physical device to your development machine via USB cable. …


How to make dropdown select boxes in React Native with Formik

image by material.io

Dropdown select-boxes are a common feature on a lot of forms in mobile and web applications. They allow a user to select a single item from a list of similar items. These items can be days, months, cities, countries, or any other categories. This article will show you how to put in place drop-down select boxes in React Native and Formik.

Step 1: Create a new react-native project using expo. Call it SelectBoxApp

expo init SelectBoxApp

Step 2: Then install the Formik library to the app. Read the Formik Documentation here.

npm install formik --save

Step 3: Install Axios

npm…


Photo by Yogas Design on Unsplash

Connecting a flutter project to a Localhost API can enhance the testing and debugging of your project. This however has proven to be cumbersome especially if the app project is running on a physical device. In most cases, the developer has to upload the RESTFUL API to the internet. The app on the device can then access the API from the World Wide Web. This approach can be costly and increases the development time.

A better approach is to connect a physical device to your development machine via USB cable. …


How to add Radio Button Inputs in React Native with Formik

image from material.io

Radio buttons are used when there is a list of two or more options that are mutually exclusive. The user has only one choice to make from the many options. This article is a complete guide on how to implement radio button inputs in REACT-NATIVE forms. We will use a library called FORMIK.

Step 1: Create a new react native project using expo. Call it RadioButtonApp

expo init RadioButtonApp

Step 2: Then install formik library to the app. Read Formik Documentation here

npm install formik --save

Step 3: Install Axios

npm install formik --save

Step 4: Install react-native-paper

npm install…


Photo by Rahul Chakraborty on Unsplash

Most online registration forms require the user to upload images. Adding an image upload feature to mobile apps can be challenging for some developers. This article will show you step by step how to upload images on your FLUTTER app to a LARAVEL RESTFUL API.

This article has two parts.

  • Laravel API
  • FLUTTER App

PART 1. LARAVEL API

Step 1: Create a new laravel project using composer. You can give it any name but in this case, we will name it ImageApi.

composer create-project --prefer-dist laravel/laravel ImageApi

Step 2: In the created project. …


Photo by Daniel Korpai on Unsplash

Uploading images to a server is a very common task in most mobile apps. This task can be challenging for some developers. This article will show you step by step how to upload images on your React Native app to a Laravel API.

This article has two parts.

  • Laravel API
  • React Native App

PART 1: Laravel API

Step 1: Create a new Laravel project using composer. You can give it any name but in this case, we will name it ImageApi.

composer create-project --prefer-dist laravel/laravel ImageApi

Step 2: In the ImageApi project create a migration to create an images table.

php artisan make:migration create_images_table…

Paul Nasilele

Frontend Developer | System Developer | Web Developer | Software Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store