 Courses from Mahmoud Abdelwahab

Cascading Style Sheets bring order and beauty to our applications.

Learn how to build a grid of images using flexbox and the flex-wrap property.

Flexbox allows us to build one-dimensional layouts where we have control over how we're going to display items.

Items can be laid out horizontally (row) or vertically (column) inside a flex container. The default behavior for a flex container is to lay items in a single row.

Adding `flex-wrap: wrap` to the flex container will allow the items to wrap onto multiple lines depending on the available width.

Create a Responsive Image Grid Using CSS Flexbox without Using Media Queries

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

We use the `useState` hook to keep track of the total number of characters in the text area. We create a variable called `characterCount` which will hold our state, a function that will update it called `setCharacterCount` and we set the initial value of our `characterCount` to 0 (passing 0 to `useState`).

We then set up an onChange event handler on the text area, so that every time we type, we update our character count by calling the setCharacterCount function 

Finally, we get the total number of characters in the text area by using `e.target.value.length`. Then we pass it to the `setChracterCount` function to update our character count.



Get the Number of Characters for a Text Area Using React's useState Hook

In this lesson, you'll learn how to write a custom React hook that returns the browser's inner width and inner height. We're going to call it `useWindowSize`.

We first import `useState` to keep track of the state of the browser window. 

We also create a function called `getSize( )` that returns an object containing the browser's inner width and inner height from the window object.

We then create a variable called `windowSize`, a function that will update it called `setWindowSize` and we set the initial value of our state by calling the `getSize( )` function.

Next, we create a function called `useWindowSize`, and inside of it, we use the `useEffect` hook. 

Inside our `useEffect` hook, we add an event listener to the window object, that listens to the resize event and will invoke a function called `handleResize( )` every time the window is resized.
We then return a function that removes this event listener.

The `handleResize( )` function updates the state by calling `setWindowSize` and passing the `getSize( )` function to it.

Finally, we return `windowSize`, which will be an object that contains the browser's inner width and inner height.





Write a Custom React Hook that Returns the Browser's Width and Height

Bite-size video tutorials for badass web developers.

egghead

In this talk, I'll be giving you an introduction to the different authentication strategies and then I'll be showing you how to add authentication to a React app using Auth0

Mahmoud Abdelwahab

Search Results

Create a Responsive Image Grid Using CSS Flexbox without Using Media Queries

Get the Number of Characters for a Text Area Using React's useState Hook

Write a Custom React Hook that Returns the Browser's Width and Height

Authenticating React Apps Using Auth0