Image for post
Image for post

Did you ever wonder what the WordPress functions the_post() & have_posts() in the loop do? Do you know why do you call wp_reset_postdata() when writing a custom loop? In this video, I will explain the WordPress loop in depth and all these questions will be answered.

This video is part of my udemy course ‘The Complete Guide To Building Premium Wordpress Themes’. You can get this course with a 94% off by clicking on this link.


Image for post
Image for post

Recently I have been working on a couple of react native projects. For the first project I worked on, I used a plain react native set-up without Expo. Having to deal with Xcode and Android Studio was a bit of a hassle, however it wasn't a bad experience overall. On the other hand, using Expo made things even easier. Expo lets you completely abandon Xcode and Android studio. There are however some limitation to what you can do with expo.

Having discovered how easy it was to start and develop a project using expo, I decided to create a little…


Image for post
Image for post

In this final part, we will build a simple user interface for the tic-tac-toe board. We will use classes and methods created in previous parts to simulate a game with a certain search depth and a starting player.

View a demo or visit the project’s github page.

The HTML Markup

Our HTML markup will be quite simple, just a div with an id of board. This div will be populated with cells inside our JavaScript code…


Image for post
Image for post

In this part, you will learn how to implement the minimax algorithm in JavaScript to get the best move for the computer player. We will calculate each move’s heuristic value given some assumptions and a depth (the the number of turns to calculate).

View a demo or visit the project’s github page.

To create an AI player, we need to mimic how a human would think when playing a tic-tac-toe game. In real…


Image for post
Image for post

In this part, we will start building the logic behind the Tic-Tac-Toe board. We will learn how to create a Javascript class that represents the board. This class will hold the current state of the board in addition to methods that get some info about the board.

View a demo or visit the project’s github page.

The Board Structure

The only argument for our board class will be an array of length 9. This array will…


Image for post
Image for post

In this series of tutorials, you will learn how to create a simple tic-tac-toe game that never loses. We will use HTML/CSS(SASS) to build the UI, webpack to bundle javascript, compile SCSS and transpile the latest ES6 (ES2015) features to ES5 and the minimax algorithm to code the logic behind the computer player.

View a demo or visit the project’s github page.

Installing webpack

To get started, first make sure you have npm installed on…


Image for post
Image for post

You have probably faced a situation before where you really wished CSS media queries were based on elements’ width rather than the entire viewport. In this article we will explore a JavaScript approach to add different attributes to an element depending on its width using resize event and MutationObserver. You can then use these attributes to style the element differently in your CSS.

What We Will Achieve

The end result of this JavaScript bit is to dynamically add an attribute data-width="some_size" to an element depending on its width. So for instance data-width="small", data-width="medium", etc. and then use CSS to target these attributes:

The HTML Structure

We…

Ali Alaa

Front-end Web 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