Ahmed Bouchefra

Ahmed Bouchefra is a web developer with 5+ years of experience and technical author with an engineering diploma (Master's degree) on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for industry-leading websites such as SitePoint, Smashing Magazine, freeCodeCamp, JScrambler, DigitalOcean, RealPython, Pusher, Buddy, and Auth0, etc. He designed and implemented projects written in Python with Django, JavaScript and Java. Now focusing on web technologies and building apps with Angular, Ionic and Electron for mobile and desktop. He also co-authored various books about modern web development that you can find from his Amazon Author page and Leanpub.

Angular 17 standalone component

In this example, we'll see an angular 17 standalone component for displaying a router outlet.

Ahmed Bouchefra

Angular 14 route title and custom strategy

Angular 14 includes streamlined page title accessibility!

Ahmed Bouchefra

Reset file input with React

In this quick example, we will see how to reset the file input in React using a ref.

Ahmed Bouchefra

Get an element by ID in React

In this quick example, we will see how to get an element by ID in React using useRef and useEffect.

Ahmed Bouchefra
Working with Angular 14 Router

Working with Angular 14 Router

In this tutorial part, we’ll learn about Angular Router by example and will teach you everything you need to start using Angular routing to build Single Page Applications

Ahmed Bouchefra

Angular 14 inject example: reactive decorator

Understanding Angular 14 inject by creating an example reactive decorator

Ahmed Bouchefra

Angular 14 inject

Understanding new capabilities of Angular 14 inject with example

Ahmed Bouchefra

How to enable CORS in Angular 14

In this post, we will demonstrate how you can enable CORS in Angular 14 by proxying all requests to localhost

Ahmed Bouchefra

Using the substring method with React

The substring method is a method in JavaScript that allows you to get a substring of a string. We can use this method in React either in the class code...

Ahmed Bouchefra

Understanding React 18 root API: ReactDOM.createRoot

The introduction of the new root API, ReactDOM.createRoot, is one of the most significant improvements in React 18.

Ahmed Bouchefra

Add Tailwind CSS to Angular 14 apps

In this post, we will demonstrate how you can integrate Tailwind CSS into your Angular 14 application by providing you with step-by-step instructions.

Ahmed Bouchefra

Import standalone components in Angular 14

In this example, we'll learn about how to define and import angular 14 standalone components.

Ahmed Bouchefra

Generate standalone components in Angular 14

In this example, we'll learn about how to define and import angular 14 standalone components.

Ahmed Bouchefra

Add Bootstrap to Angular 14 example

In this example, we'll learn about how to define and import angular 14 standalone components.

Ahmed Bouchefra

Fullstack Angular 14: Monorepo with lerna & express.js

Throughout this tutorial, we'll be building a full stack monorepo project with Lerna, Angular 14, Node.js and Express.js.

Ahmed Bouchefra

Release Angular 14 libraries with lerna & commitizen

In this tutorial, we’ll learn how to streamline Angular 14 library releases with commit conventions.

Ahmed Bouchefra

Angular 14 monorepo with lerna, npm workspaces and Git

Lerna and npm workspaces are tools that help developers create libraries and applications in a single repo (also known as a monorepo) without having to publish to npm or other...

Ahmed Bouchefra

Fullstack Angular 14: Install the CLI

In this tutorial, we will learn how to install Angular CLI 14

Ahmed Bouchefra

Fullstack Angular 14: Architecture & project’s design

In this tutorial, we'll learn about the project's design and architecture.

Ahmed Bouchefra

Angular Daily Coding Challenge

Want to master Angular? Join our #99daysofangular challengewhere we'll build components, directives, services, pipes and complete web apps in latest Angular!

Ahmed Bouchefra

99+ Web Development Projects Challenges

You can start by implementing these projects with JavaScript and then move to advanced libraries and frameworks such as React, Angular, Vue, or Svelte.

Ahmed Bouchefra

TypeScript version 4.7

The TypeScript 4.7 version is released on the 24th of May

Ahmed Bouchefra

React 18 useEffect runs twice

If you have just made a new project using Create React App or updated to React version 18, you will notice that the useEffect hook is called twice in development...

Ahmed Bouchefra

Angular 14 release

Angular, is TypeScript-based web framework created by Google that is particularly famous in the enterprises world. Standalone components and optional ngmodules, typed reactive forms and enhanced template diagnostics will be...

Ahmed Bouchefra

React 18 refs: the useRef hook & createRef

In this article, we will explore how to utilize React refs to access DOM elements using both the class-based approach via the createRef method or the functional-based approach via the...

Ahmed Bouchefra

Git hooks with husky & commitlint

Now that we are using lerna to determine package versions, we need to ensure that all commits follow the proper syntax. We can utilize Husky to add a git hook...

Ahmed Bouchefra

Monorepository architecture

There are several benefits to using a mono repository for your project, but the most fundamental one is that it allows you to see the full codebase of your organization...

Ahmed Bouchefra

Angular 13 app root component

We will learn about the root component of Angular project.

Ahmed Bouchefra
Multiple Image Upload with Ionic 6 and FormData

Multiple Image Upload with Ionic 6 and FormData

In this tutorial, you'll learn to implement multiple file upload with Ionic 6, django 3 and FormData

Ahmed Bouchefra

Handling Arrays with React 18 useState

Ahmed Bouchefra

Build REST API with Laravel 9

In this post, we'll show you how to build a REST API with laravel 9. Laravel 9 is a full-stack web application framework with a robust and visually appealing design...

Ahmed Bouchefra

How to install laravel 9

In this post, we'll show you how to install laravel 9. Laravel is a full-stack web application framework that has powerful, beautiful design. A web framework gives a foundation and...

Ahmed Bouchefra

Angular 13 selectors

In this article, we will learn about angular selectors which enable angular developers to specify how components can be included in html templates.

Ahmed Bouchefra

Example angular 13 component

A component in angular is responsible for displaying a region of the user interface of the application that is associated with the component.

Ahmed Bouchefra

Render HTML with Angular and innerHtml

How to render HTML with Angular using innerHtml

Ahmed Bouchefra
How To Learn Java Online: Tips and Best Resources

How To Learn Java Online: Tips and Best Resources

So, you are thinking about learning Java. Since it’s fault-tolerant, high performing, and straightforward, the language is a great choice for beginners. However, navigating the waters of learning Java programming...

Ahmed Bouchefra

Laravel 8 CORS Tutorial and Example

Learn how to enable cors in Laravel 8

Ahmed Bouchefra
Install GitHub CLI on Ubuntu 20

Install GitHub CLI on Ubuntu 20

In this post, we'll show you how to install GitHub CLI on your Ubuntu 20 machine

Ahmed Bouchefra
Angular 10 and Django 3 Image Files Upload with FormData

Angular 10 and Django 3 Image Files Upload with FormData

Throughout this tutorial, we'll see how we can implement image files upload in Django 3, FormData and Angular 10 with a step by step example

Ahmed Bouchefra
Multiple Image Files Upload with Django 3, Angular 10 and FormData

Multiple Image Files Upload with Django 3, Angular 10 and FormData

Throughout this tutorial, we'll see how you can implement multiple file upload in Django 3. We'll be using Angular 10 to create a simple interface that allows the user to...

Ahmed Bouchefra
Laravel 8 Drag and Drop File/Image Upload UI Using Dropzone.js Example with Progress Bars and Image Previews

Laravel 8 Drag and Drop File/Image Upload UI Using Dropzone.js Example with Progress Bars and Image Previews

Throughout this tutorial, we'll show you by example how to use Dropzone.js in Laravel 8 to drag, drop and upload a file

Ahmed Bouchefra
Angular 10/8 Material Dialog with Example

Angular 10/8 Material Dialog with Example

This tutorial shows you how you can use Angular 7/8 Material to build Material UI dialogs for your web application

Ahmed Bouchefra
Angular 10/9 Elements Tutorial by Example: Building Web Components

Angular 10/9 Elements Tutorial by Example: Building Web Components

In this Angular 10 Elements tutorial by example we'll learn how to use Angular to build web components or custom elements.

Ahmed Bouchefra

Angular 10/9 Router Tutorial: Learn Routing & Navigation by Example

In this tutorial part, we’ll learn about Angular Router by example and will teach you everything you need to start using Angular routing to build Single Page Applications.

Ahmed Bouchefra

Convert String To Number/Array In JavaScript with React Hooks/Vue.JS Examples

In this tutorial, we'll learn by example how to convert a string to the corresponding integer or float number or array of numbers using the built-in JavaScript methods with simple...

Ahmed Bouchefra

JavaScript/Node Top-lavel Await Example

Before the new top-level await, you can only await for a piece of code inside a (arrow) function that's defined with the async keyword

Ahmed Bouchefra

Ionic 5 Content Padding Example

In Ionic 5, there are some changes regarding how we set padding of the ion-content component

Ahmed Bouchefra
React Router 5.1+ Hooks

React Router 5.1+ Hooks

In this tutorial, you will learn about routing in React using React Router 5.1+ hooks

Ahmed Bouchefra
Responsive Image Breakpoints Example with CDK's BreakpointObserver in Angular 9/8

Responsive Image Breakpoints Example with CDK's BreakpointObserver in Angular 9/8

We'll learn how to implement responsive images in Angular 9/8

Ahmed Bouchefra
Java 14/13 Switch Expressions by Example

Java 14/13 Switch Expressions by Example

We'll learn about the new Java 14/13 switch expressions by Example

Ahmed Bouchefra

Angular 9 Web Components: Custom Elements & Shadow DOM

Throughout this tutorial, we’ll teach you to create a native web component using the latest Angular 9 version. Part of standard web components are custom elements and shadow DOM which...

Team

Laravel 7/6 CORS Tutorial and Example

Learn how to enable cors in Laravel 7/6

Ahmed Bouchefra

How to Install Vue.JS in Laravel 7/6 By Example

Learn how to Install Vue.JS in Laravel 6/7 By Example

Ahmed Bouchefra

How to Install Laravel 7 On Ubuntu, Windows and macOS

Learn how to install Laravel 7

Ahmed Bouchefra

How to Install Bootstrap 4 in Laravel 7/6 Tutorial and Example

Learn how to Install Bootstrap 4 in Laravel 7/6 By Example

Ahmed Bouchefra

The OOP Concepts with TypeScript: Inheritance, Abstraction, Polymorphism and Encapsulation

In this article, we'll learn about the Object Oriented Programming or OOP concepts in TypeScript such as inheritance, abstraction, polymorphism and encapsulation.

Team
ES6 Spread Operator in React by Example: Props and setState

ES6 Spread Operator in React by Example: Props and setState

In this post, you will learn about using the JavaScript Spread operator in React.

Ahmed Bouchefra
React 16.3 New Context API Tutorial

React 16.3 New Context API Tutorial

In this is quick tutorial you'll learn how to use the new Context API in React 16.3+

Ahmed Bouchefra

Node.js Tutorial & Examples (Node.js 10)

Node.js tutorial for biginners

Ahmed Bouchefra
Building a Modern Web Application with Django REST Framework and Vue: Building Views and REST API

Building a Modern Web Application with Django REST Framework and Vue: Building Views and REST API

In this tutorial, the third part of building a demo application with Django and Django REST framework for the API back-end and a Vue front-end will be covered. You'll first...

Ahmed Bouchefra
Building Modern Applications with Django, Vue.js and Auth0: Part 2

Building Modern Applications with Django, Vue.js and Auth0: Part 2

Throughout this series, you'll be using Django, Django REST framework, and Vue.js to develop an application with a REST API back-end and a Vue.js front-end. The API will be consumed...

Ahmed Bouchefra