Stories by Bobate Isaac on Medium

Writing cleaner CSS code with BEM

Bobate Isaac — Tue, 27 Jun 2023 16:53:05 GMT

Clean and organized code is crucial in modern web development projects, and developers are constantly seeking ways to improve code maintainability and organization. Thankfully, various techniques exist to achieve this goal, including the popular Block Element Modifier (BEM) methodology — and this article will explain how BEM works and why you should start applying it.

In this article, we’ll delve into the world of BEM, exploring its many advantages, usage, and implementation strategies for both HTML and CSS. By using BEM, developers can implement a structured, modular approach to naming conventions in HTML and CSS, resulting in code that is easier to read, more maintainable, and less prone to errors. This article will equip you with an understanding of the importance of BEM in modern web development and the ability to write cleaner, more maintainable code for your next project or product. Let’s get started!

What is BEM?

BEM is a naming convention for HTML and CSS classes that helps developers create maintainable and organized code. It provides a structured format for naming the HTML and CSS classes, leading to the breakdown of our webpage into smaller components (block, elements, and modifiers components). It was created in the mid-2000s by developers working on the complex user interface of the Yandex search engine. The developers were struggling with maintaining their rapidly growing CSS codebase. They needed a structured approach to naming conventions in HTML and CSS to make their codebase more maintainable, scalable, and reusable. After experimenting with several methods, they settled on BEM, which aims to create a hierarchy of components on the webpage. In 2010, they published their approach in a blog post, which gained popularity in the web development community. Today, BEM is widely adopted as a naming convention for HTML and CSS by companies such as Google, Airbnb, and GitHub, and has spawned many tools and resources to assist developers in implementing the methodology more efficiently.

There are many benefits to using the BEM methodology. Here are a few reasons for you to consider using BEM:

Reusability: BEM methodology allows us to generate code that enables the reuse of components in multiple instances, resulting in a well-structured and organized hierarchy of components on the webpage. As a result, it becomes possible to use blocks in various locations on the page.
Maintainability: BEM’s well-defined structure facilitates targeted changes or updates to particular sections of a webpage. By employing BEM, we can ensure smooth code maintenance, faster updates, and minimize coding errors, resulting in an error-free codebase.
Better accessibility: The naming convention offered by BEM enhances accessibility as it helps technologies, such as screen readers, to detect, interpret, and understand the content on a webpage with greater ease.
Better collaboration: BEM’s naming convention simplifies teamwork among developers. By adopting a unified naming convention for classes, developers can comprehend and edit each other’s code more effortlessly, ultimately fostering better collaboration and teamwork.

Before you continue reading, take this practical explanation as the primary goal of BEM. For instance, if your friend or another developer were to look at your CSS code, they should easily understand the code. It means that your code should be readable, clear, and concise. In other words, your code should have a consistent style that your friend or another developer can easily understand.

When should we use BEM?

We mostly used BEM when dealing with projects having a huge codebase comprising multiple pages. Here are some practical samples of where we can implement BEM:

Large-Scale Projects: We can introduce BEM when we have a project with a large codebase, which comprises multiple developers building different parts of the project. Using BEM, we can easily maintain the project and reduce the risk of error and code conflict.
Accessibility-focused projects: The BEM methodology will make our website more accessible to users when projects prioritize Search Engine Optimization (SEO). With BEM, our website would be more accessible to users when they use technology that detects the contents of a webpage.

The breakdown of the keyword “BEM”

BEM is a keyword that represents three entities:

Block

This is a fundamental entity in the structure of BEM, which is very useful in organizing and structuring CSS and HTML code for websites and web applications. A block is an independent User Interface (UI) entity that represents a reusable component of a web page. Some examples of the block entity on the webpage are the navigation bar, sidebar, header, etc.

Example of the block naming method:

.btn {
  color: red;
  font-size: 15px;
}

In the code snippet above, we can easily deduce that the developer is trying to style a button (a block in this case). It means that when choosing a name for a block element to style, we should choose names that are easy to read and understand. Also, the block name should start with a small letter like the block name btn above.

When applying the block method while setting the class name, we should remember the name should be descriptive and show the function or purpose of the block. That is the sole aim of the block naming convention. You are not required to consider other features (like appearance — color) of the block element when creating a class name. The modifier entity deals with appearance, so never try to do this:

.blue-btn {
  color: blue;
  font-size: 18px;
}

Instead, try to follow best practices by just using a word or set of descriptive words in alignment with the function of the element.

Another school of thought when working with the block is when we want to use more than a word for our block name. The creators of BEM had this in mind while developing it, and thus, they came up with a solution — separating words with hyphens.

For example, a product list block would be named “product-list”:

.product-list {
  list-style: none;
  font-size: 14px;
}

When using the block entity, you should always try to integrate the following guidelines:

Choose semantic block names: Choose names that explicitly define the function of the element, not its appearance.
Use class names consistently: BEM enforces having class names for every element in your code. Therefore, all element entities within a block should have a class name, including the block entity. With this‌, nothing is affected by changing the class style. Instead of using element selectors, assign a class name for each element in your codebase.
Separate block styles from their elements: BEM encourages us to separate block styling from other components, like the element. We often use Block styles in other parts of the code, which is why code conflicts may occur when combining the style of a block with another component.

Following the guidelines above will ensure that integrating the block entity when defining classes for our markdown or when styling (CSS) is a seamless process.

Element

The letter’ E’ in the BEM symbolizes the Element entity. Element, unlike the block entity, is dependent. They are the children of the block entity, as they can not stand alone. We can find them inside a block — they live inside the block.

Note: an element can only have a parent (just a block it’s tied to), and we can’t use it outside that block. Let’s take an example of a block — header. Inside the header block, we have things like logos, links, and buttons embedded in it. These things found in the header block are the “elements.” Now, how do we create an element name? An element name starts with the parent name (block name), followed by double underscores, and ends with the element name.

The CSS code:

/*recall header is our block name, therefore header comes first*/
.header__logo {
 
}

Our HTML code:

In the code sample above, we have a parent element (div) with a block name of header. Inside it, we have an image element with an element name header__logo.

Nesting Elements within the same block

Nesting elements is embedding an element inside another element within the same block. Using the example of a header block with a navigation element inside it ‌containing a menu-item element (ul tag - an unordered list), we can then say the menu item is nested in the navigation element.

Nesting Elements are very useful in representing complex or hierarchical relationships between parts of a Block. However, it is ‌advisable to keep the Element hierarchy flat and avoid nesting elements deeply. Deeply nested elements can make the HTML and CSS code more complex and harder to read and maintain. It can also lead to specificity issues when styling the nested elements, making it harder to override styles or change the layout later.

Therefore, use nesting sparingly only when it is necessary to represent the structure of the block. It is often better to use multiple blocks or elements at the same hierarchy level to represent different parts of the page rather than nesting elements intensely.

Here is a code sample to explain the theory of nesting of elements:

We can deduce from the code that we still implement the standard naming convention for defining element names, even when elements are being nested. We could have written the code above this way:

When defining an element name for a nested element, you shouldn’t prefix it with the parent element name (header__link in this case), which results in this — header__link__menu-list. Just prefix it with the block name (header), followed by double underscores, and then the element name, which results in this - header__menu-list (for this example).

Here are some key things to consider when using the Element entity:

We use elements to represent sub-components of a block.
Assign a descriptive name to your element and always follow the standard naming convention, even when working with nested elements.
Avoid using an element outside the block it belongs to.
Reduce the level of nesting elements.

Considering these tips will let you adapt to industry-standard usage of the Element entity in the BEM methodology.

Modifier

This determines/defines the appearance, state, or behaviour of a Block or an Element independently (without creating a new Block or Element from scratch).

We separate the modifier name from the block or element name by using two hyphens (--). The ideal way of naming modifiers is to prefix them with a double hyphen (--), though some people use double underscores (__) or a single hyphen (-). I would advise you to take it as an ideal practice to use the double hyphen (--) as a prefix for the modifier name and not the other methods in other not to mix the modifier with another entity, like an element since it uses the double underscore (__) prefix.

Here is the syntax:

/*when targeting a Block*/
.block-name-modifier-name {
/*   styles go in here */
}

/*when targeting an Element*/
.block-name__element-name-modifier-name {
/*   styles go in here */
}

We add Modifiers to Blocks or Elements by adding their name as a suffix to the Block or Element’s class, separated by two underscores.

Note, Modifiers are optional, but you can choose to use them because of their efficiency in creating visual styles and adding variation to Elements and Blocks. Some examples of modifier names are disabled, primary, and so on.

For example, within a div container are two buttons with identical styles except for their state (active or disabled). To accomplish this, we utilize a Block named card that contains an Element called buttons. From there, we apply Modifier to the buttons we want to assign a state.

The HTML code

In the code above, we have two modifiers named card__buttons-active and card__buttons-disabled, respectively.

When creating a name for any entity in the BEM methodology, try to use names that people who are not developers can easily understand.

Even if a non-developer looks at this code, they can easily predict that we are styling buttons on the card and that we assigned one to be active (a state that shows it has already been clicked) and the other to be disabled (a state that makes the button unclickable).

Modifiers are optional, but if you choose to use them, you need to note these things:

Use them judiciously and only when essential to prevent needless complications in our code.
When creating a modifier name, try to be clear and specific about its purpose, like disabling buttons, changing the font size, etc.
Avoid using a Modifier to override a style. Instead, consider adjusting the style to your desired outcome.

Session Replay for Developers

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.

Happy debugging! https://openreplay.com/

The Practical Aspect

In this section, we’re going to take a look at a real-world example that demonstrates the BEM methodology.

The case study for this segment is a Card structure built with HTML and CSS — the image above.

From the image, we can deduce the following entities:

Block: The card itself is the Block; it can also be referred to as the Parent of all other elements since other elements are embedded in it.
Element: Here, we can say that we have just two direct elements, a header component, and a button component. But in the actual sense, we have five elements — a header element with three elements (image element, title element, and description element) nested within it and a button element that has two actual button elements nested within it.
Modifier: Just as I said earlier, modifiers are used in place of setting appearance, and tweaking styles — as its name suggests, it helps us modify styles. In the card above, a modifier was created to disable one of the buttons, i.e., making the button inactive and unclickable.

Here is the code to create the card above; take a deep look at it — the HTML and CSS code. Try to see how I implemented BEM when defining class names in the semantic HTML and how I structured the classes in CSS following each other from top-to-bottom (this is very important, try to always let your style be in a top-down approach).

https://medium.com/media/4b361740986f9cbb0ca98fb894932e76/href

Resources

For more understanding of the subject discussed, you can use these websites:

Conclusion

This article explored how the Block Element Modifier (BEM) methodology can aid in writing cleaner, more maintainable CSS code. We analyzed BEM’s history, principles, implementation, and best practices. Although some arguments against BEM exist, many people accept that it offers a clear and consistent approach to organizing CSS code.

I hope you will consider using BEM in your subsequent projects because of its benefits. The benefits of BEM, such as easier collaboration, faster development time, and reduced errors, make it a valuable tool in modern web development.

Call to action: I challenge developers to try implementing BEM in their next project and see the positive impact it can have. Remember to start with a solid foundation by naming and structuring your blocks, elements, and modifiers. With the BEM methodology, you can take your CSS coding skills to the next level and create more efficient and maintainable user interfaces.

I trust that you found this piece informative and enjoyable. If you have any questions, please don’t hesitate to ask them in the comment box below. Additionally, I would appreciate it if you could share, like, and comment. Thank you for reading.

Originally published at https://blog.openreplay.com.

Writing cleaner CSS code with BEM was originally published in StackAnatomy on Medium, where people are continuing the conversation by highlighting and responding to this story.

Color types in CSS

Bobate Isaac — Thu, 16 Mar 2023 23:56:31 GMT

Spot me an object which can’t be attributed to a color! None right? That shows the efficacy of colors in our day-to-day living.

Colors are important design components as they help produce visually appealing and accessible web pages. As a Web developer, you should understand the different color models in CSS as it helps in implementing effective designs. With the wide range of color types available, knowing where to start is overwhelming, but don’t worry! This article is here to help you navigate the world of colors in CSS.

In this guide, we will take an in-depth look at the different color types available in CSS. We’ll start by discussing the different color types available in CSS, such as named colors, RGB, and HSL values. We’ll cover additional topics such as RGBA, HSLA, and using the currentColor keyword in CSS.

By the end of this guide, you will have a solid understanding of using colors in CSS effectively. Let’s dive in and explore the world of color in CSS!

Color Syntax in CSS

The color specification in CSS is relatively simple but solely depends on the color type. The most common ways to define colors in CSS are using named colors, hexadecimal values, RGB, and HSL values. Each type of color notation has its syntax and rules for defining colors, but they all follow the same basic structure of being a property value representation.

We use the color property in CSS to set the color of text content within an element. The syntax for using the color property is

element {
  color: value;
}

Where element is the HTML element you want to apply the color, and value is the color value you want to set. The value can be any of the color types we discussed earlier, such as named colors, hexadecimal values, RGB, and HSL.For example, the following CSS syntax sets the text color of an element to red:

element {
  color: red;
}

element {
  color: #ff0000;
}

element {
  color: rgb(255, 0, 0);
}

We also apply the color property to other CSS properties, such as background-color, border-color, and outline-color in controlling the color of these visual elements.

currentColor Keyword

The currentColor keyword in CSS is a significant method used in controlling the color of multiple elements at once. With the currentColor keyword, you can easily set the color value with a single line of code, making your stylesheets more efficient and maintainable.

The currentColor keyword refers to the computed value of the color property for an element, and it returns the color value of that element. For example, if you set the color property as red, properties in that element that use currentColor will have that same color (red in this case). It eliminates the need to set the color of each element separately, making it more efficient and easier to maintain the code

Usage
For example, let’s say you have a button class in which you must have the same color for both text and border. Instead of setting the color for both the text and border separately, you can use the currentColor keyword for the border color, like so:

.button {
  color: green;
  border: 3px solid currentColor;
}

In the example above, we set the text color to green and the border color to the same color (green) using the currentColor keyword. If you change the text color to red, the border color will also change to red automatically. We no longer need to set the border color separately, making maintaining the code more efficient and easier.

Drawback
We can use the currentColor keyword with other properties, such as background-color, background-image, box-shadow, and so on. But it has a little tweak when it is used to determine other color property values like border.

The currentColor keyword only works for the color property. If you want to use it with other properties such as background-color, you will need the var() function.

For example:

.element {
  background-color: red;
  border: 2px solid currentColor;
}

In the code above, the border for the button will remain black since the currentColor keyword doesn't inherit colors from other properties besides the color property itself.

But if we implement the color property, the currentColor keyword works.

.element {
  color: blue;
  background-color: red;
  border: 2px solid currentColor;
}

Now, the currentColor keyword works, and the border will inherit the value of the color property as its value (2px solid blue in this case).

The currentColor keyword is a powerful tool that helps you create consistent and efficient designs with less code. It allows you to set color values once and reuse them throughout your stylesheet, ‌hence implementing the DRY (Do Not Repeat Yourself) principle. It is a great way to keep your code organized and maintainable.

Session Replay for Developers

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — an open-source session replay suite for developers. It can be self-hosted in minutes, giving you complete control over your customer data

Happy debugging! Try using OpenReplay today.

The Color Types

There are diverse ways by which we can define colors in CSS. In this section, we will look at some specific color types in CSS and also explore the benefits and drawbacks of each. Here are the color types to be discussed:

Color Keyword/Named Colors
RGB (HEX)
HSL
RGBa
HSLa

Color Keyword/Named Colors

Named color, also known as the color keyword, is a straightforward method of defining color in CSS. Named colors are predefined keyword that corresponds to specific color values. For instance, the color keyword red corresponds to the color value #FF0000.

CSS provides a set of predefined named colors, such as azure, beige, bisque red, blue, green, yellow, and so on. Browser support for the color keyword is top-notch, as all modern browsers support it. With that, you can confidently use the color keyword method in defining colors, knowing fully well that they will be displayed correctly across various platforms.

Just as it is defined, here is the syntax for using the named color:

element {
  color: red;
}

In the code snippet above, we used the color keyword method to define a color for an element.

The color keyword is not limited to setting the color property but also defining other properties, such as background color and border color.

Benefits

Usage: This color type is easy to use since they are predefined keywords. Developers do not need to memorize color values to use them.
Browser Support: Modern browsers supports them, making them a convenient and versatile option.
Maintainability: You can easily update the color value of an element by changing only that color value at that instance instead of searching for all occurrences of that color value throughout the stylesheet. Hence, the color scheme of your web build is easy to maintain.
Case Insensitive: CSS color keywords are not case sensitive, disallowing bugs in our stylesheet. For example, red, Red, and RED will all result in the color value #FF0000.

Drawbacks
One major drawback of using named colors is that they do not have a standard definition across different platforms and devices. The appearance of the same named color across devices or browsers might be fully or partially different, which makes it hard to achieve consistent designs across various devices or browsers.

Note: the color keyword should be used more in places where you do not need to control the transparency of the color since it does not allow you to specify an alpha channel value.

RGB

RGB is an additive color model that creates colors via a mixture of red, green, and blue light. This color system accepts three parametric values — red, green, and blue. Each value can be a number between 0 and 255, where 0 represents no color and 255 represents the maximum amount of color. It’s also possible to use percentage values instead of integer values — the values range from 0% to 100%. For example, we can represent the red color in RGB as rgb(100%, 0%, 0%).

We have two ways to express RGB color values: hexadecimal and functional notation.

Hexadecimal notation It is commonly called HEX code, a 6-digit code prefixed with the # symbol followed by three pairs of hexadecimal digits, where the pairs represent the amount of red, green, and blue light. Each value is within the range 00 — FF or 0–255 in decimal notation.

The syntax:

element {
  color: #rrggbb;
}

Note: you can also specify each range value with a single value of red, green, and blue. It is valid. See the syntax below:

element {
  color: #rgb;
}

That HEX code originates from the RGB color model makes it entitled to conversion to an RGB value and vice versa. We can calculate the RGB values of a HEX color by converting the two-digit hexadecimal values for red, green, and blue to decimal values. For example, the HEX color #ff0000 is equivalent to the RGB color rgb(255, 0, 0).

Apart from being shorter than RGB values, HEX values also have some added advantages, such as:

Consistency: HEX codes are consistent across different platforms and devices, i.e., the color does not vary across various platforms.
Widely supported: They are supported by all modern web browsers, making them a reliable and versatile choice for web developers.
Easier to convert: we easily convert them to RGB values. Hex values also have some drawbacks, such as:
Limited range of colors: HEX color has a limited range of colors compared to other color methods. The total number of colors HEX notation provides — 256 ^ 3, equivalent to 16,777,216.
Complexity: HEX values are hard to comprehend. We often find HEX values complex to interpret, as we can not easily deduce the color.
Precision: HEX values are less precise than RGB values, which makes it difficult to interpret or specify the exact color you want without using a color picker tool.

Functional notation RGB and RGBa are functional notations. These two methods end with the opening ( and ) braces. It symbolizes a function, just as we have in programming languages like JavaScript. In subsequent sections of this article, we will look into the RGBa method. All you have to know is that RGBa is a higher level of RGB; the only difference is the additional alpha value that determines the opacity of the defined color.
RGB: As I mentioned earlier, this is a color scheme that takes three parameters, namely red, green, and blue values, just as its name suggests. This color model is very easy-to-use and human-friendly since we know that the integer 0 means we are not using that color, while the integer 255 or 100% means we used all that color. With the use of RGB, some colors can be easily determined - white and black. From the explanation above, you will agree with me that if we want to define a white color, all we have to do is initiate the max value for each of the three parameters, just like this:

.element {
  color: rgb(255, 255, 255);
  color: rgb(100%, 100%, 100%);
}

The code snippet above will result in a text color of white. And for black, we will set the values of the three parameters to the least value in the range (0–255).

.element {
  color: rgb(0, 0, 0);
}

The code snippet above will result in a text color of black.
We believe that the primary colors (red, green, and blue) are the easiest to define since you only need to set the color values of the two other color parameters you do not need to 0, while the value of the one you need in the range integer 1–255.

RGB color model has various advantages, such as a wide range of colors, flexibility of setting colors from very pale shades to very intense ones, a good option for creating color gradients, and great support across all modern web browsers and devices. On the other hand, the RGB color model has some drawbacks, such as complexity, being less intuitive when compared to the color keyword method, and precision (since RGB are in decimal, it is hard to define a particular color without the use of a color wheel).

HSL

The fact that it is hard to decipher some color models, such as HEX and RGB (in a way), leaves us with an option to find a color model which is more readable and easily understandable by humans. Here is where HSL comes into the picture.

HSL is an abbreviation that stands for hue, saturation, and lightness. This color model takes in three parameters, just like RGB. Here, we use it to specify colors, where hue is the color itself, saturation is the amount of gray, and lightness represents the brightness of the color. HSL uses these three values to define a color, making it easier to adjust the hue, saturation, and lightness of a color.

Hue (The color)
Hue is the actual color value for an angle (without the unit) on the color wheel. The hue value is between 0° to 360° representing the shade of color on the color wheel. All other hue falls in between these predefined hue values:

Red is represented as 0° and 360°
Yellow is represented as 60°
Green is represented as 120°
Cyan is represented as 180°
Blue is represented as 240°
Magneta is represented as 300°

Saturation (Intensity of the color)
Saturation refers to the intensity of a color, which is the dominance of hue in the color. The value ranges from 0% to 100%, where 0% means a shade of gray — fully desaturated, while a saturation of 100% is a state of full saturation showing a vibrant color.

Lightness (How bright)
It describes the level of brightness of a color. It ranges from 0% to 100%, where 0% represents a dark/black color, and 100% represents a light color.

Syntax:

.element {
  hsl(120, 100%, 50%);
}

The code above results in a shade of green, where the hue value of 120 represents a green hue on the color wheel, the saturation value of 100% means the color is fully saturated, and the lightness value of 50% represents a medium lightness level.

Here is an interactive demo of HSL:

https://medium.com/media/1a67e7aa35c0c01c0f30811bca770724/href

In the Iframe above, we created a color palette for the visual representation of the HSL model. The color palette, partitioned, is into ten segments showing the saturation and lightness of colors as we move the slider.

The Alpha Channel for HSL and RGB

The alpha channel refers to the transparency level of a color, where an alpha value of 1.0 represents a fully opaque color, and an alpha value of 0.0 represents a fully transparent color. With RGB, the RGBa color model extends the number of parameters by 1 — an additional value representing the alpha channel. The syntax for creating using RGBs is

RGBa(red value, green value, blue value, alpha channel);

Where red, green, and blue represent the intensity of the corresponding color channels, just like in the native RGB and alpha, the newly added value is between 0.0 and 1.0, which denotes the level of transparency. For example, the following code sets the background color of an element to a partially transparent red (Half-translucent red):

.element {
  background-color: RGBa(255, 0, 0, 0.5);
}

Similarly, the HSLA color model extends the HSL color model by adding an alpha channel to specify the level of transparency. We define the syntax of an HSLA color value in CSS as:

hsla(hue, saturation, lightness, alpha);

Where hue, saturation, and lightness are the same as in HSL, and alpha is a value between 0.0 and 1.0, representing the level of transparency. For example, the following code sets the text color of an element to transparent blue:

.element {
  color: hsla(240, 100%, 50%, 0);
}

Alternatively, RGBa and HSLA can now be defined in a more expressive manner using the RGB function. In CSS Color Module Level 4, the HSLA (Hue, Saturation, Lightness, and Alpha) and RGBa (Red, Green, Blue, and Alpha) color models extend to allow for a more flexible and expressive way of defining colors.

One of the key features of CSS Color Module Level 4 is the ability to leave space between parameter values in the HSLA and RGBA color models. It means that developers can specify color values using commas and other separators between the parameters. It is a more human-readable syntax and makes it easier for developers to quickly change color values without having concern for syntax errors. In other to use this new format, leave a space between the parameters and add a forward slash before the last parameter, which is the alpha channel.

For example, the following code specifies a color in HSLA format with a hue of 120, a saturation of 60%, a lightness of 50%, and an alpha value of 0.5.

.element {
  color: hsl(120 60% 50% / 0.5);
}

.element {
  color: rgb(165 0 0 / 0.4);
}

The CSS Color Module Level 4 provides a more flexible and expressive way of defining colors.

Browser Support

Modern browsers like Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge support most color schemes. Older versions of Internet Explorer might be the only exception because they might not fully support some of the most recent color schemes, including RGBa and HSLa. The previous color techniques(hex values, named colors) are still usable in these circumstances and are well-supported even by outdated browsers. Testing your designs in multiple browsers is always a good idea to ensure they display as intended.

Other Color Alternatives

Besides the methods discussed above, there are several other color models by which we can define colors in CSS. These models include:

HWB (Hue-Whiteness-Blackness) color model: we use the HWB color model in creating colors with an emphasis on hue, whiteness, and blackness. It is useful when creating color schemes that are easy to read and have pleasant contrast. HTML does not support this color type.
CMYK (Cyan-Magenta-Yellow-Black) color model: The CMYK color model is used in the printing industry and is based on subtractive color mixing. We use it to represent colors based on the amount of cyan, magenta, yellow, and black ink required to produce a particular color. HTML does not support this color model.
LAB (Luminance-Achromatic-Chromatic) color model: We use the LAB color model in the image and video processing. It is generated based on human color perception. It represents colors by their luminance, chromaticity, and hue. The LAB color model is useful for color correction and color management.

Resources

For more understanding of the subject discussed, you can use these websites.

Conclusion

This article explores various color models and their representation, as well as the pros and cons of each. We delve into five commonly used methods for defining colors in CSS. When choosing a color model, it is important to consider your specific needs and personal preference.

Feel free to leave any comments or questions below. If you found this article informative, please share it with your network. Thank you.

Color types in CSS was originally published in StackAnatomy on Medium, where people are continuing the conversation by highlighting and responding to this story.

Doing pagination with React Query

Bobate Isaac — Thu, 19 Jan 2023 01:41:46 GMT

When getting data from a large dataset (an API or a database), developers frequently struggle with presenting it to the user while keeping in mind specific requirements, such as a short load time and an excellent user interface.

Pagination is one method of resolving this. Using pagination enables developers to separate the data into pages for the end-users. As a result, chunks of large datasets are displayed on different pages, and as the user interacts with the pagination controls, data for each page is fetched and displayed. Pagination is a feature frequently found in applications like learning management systems, product sites (eCommerce with dozens of goods), blog pages, Google search results, and any page with massive data results.

Constructing the logic to perform pagination can be daunting, as you’ll have to introduce some mathematical programming techniques coupled with React hooks. However, I’ll show you how to use React-Query to implement pagination in this article.

Building the application

I have created a starter template repository to bootstrap the build process. You will need to clone this GitHub repository to your local desktop.

First, open your terminal and change the directory to where you want to save the app folder. For example, I want mine to be on the desktop, and I will run the following command.

cd desktop

Next, clone the starter application to our desktop:

git clone https://github.com/shegz101/Pagination-React-Query.git

Your folder structure should have the following directories and files:

Installing dependencies

The application has node packages attached to it, and for the build to run smoothly, we must download all the needed dependencies. To do this, run the following command:

cd Pagination-React-Query
npm install

After running the command above, a node module directory gets added to your folder structure.

Disconnect from the Remote Git Repository

Since this application is now your setup, and you may like to push it to your GitHub account as your project, you must disconnect it from the remote repository (i.e., the repo you cloned the starter folder from).

You have first to check if this folder is connected to any remote repository by running this:

git remote -v

You will get the links in the snapshot below as the result of the command above.

The snapshot above tells us that the folder is connected to the git repository link returned.

Now, to disconnect the folder, run the command below:

git remote remove origin

The folder is now disconnected. If you run git remote -v, you notice no repository link is returned (proof that the folder has been disconnected).

Starting the application

To run this application, type this command in your terminal:

//not npm start since we used vite and not CRA
npm run dev

The command above will compile the application and host it at “ http://localhost:5173/". Simply click on the localhost link, and the application will open in your browser.

Here is what your browser will display:

So far, what we have done in the app is fetch and display the data. With Axios, a package used for HTTP requests, we could fetch data from the API and display it. Try to understand what the starter files entail and how we’ve been able to get to this point (the snapshot above) because this would form the basis of your foundation for this web build, thus the prerequisites.

We can now move into the central part of this article, which is how to implement pagination using React-Query. I assume you understand the build-up to this point. Let’s get into the nitty-gritty of this article.

Remember to tidy up your code before starting to use React Query. Simply deleting the posts state from Posts.jsx and the useEffect we used to collect the data will accomplish this. Remove the code that follows:

const [posts, setPosts] = useState([]);

useEffect(() => {
  getPosts(page).then((json) => setPosts(json));
}, [page]);

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience — start using OpenReplay for free.

Initialising React Query

The official documentation describes React Query as the missing data-fetching library for React. Still, in more technical terms, it makes fetching, caching, synchronizing, and updating server state in your React applications a breeze. In simple terms, React Query is powerful asynchronous state management for React.

You first need to install the React Query library to get access to the React Query pagination feature. You can do this by running the following command:

npm i react-query

Next, navigate to the Posts.jsx file and import the useQuery hook from React Query.

import { useQuery } from 'react-query';

For the best experience, use the useQuery hook and set the KeepPreviousData option to true. We can then access states like:

isPreviousData - This lets us know the data the query is currently providing.
isLoading - This lets us know if the data to be fetched is loading
isError - This lets us know if an error exists
error - returns the error object
data - This is the result we get and display on each page
isFetching - This is the fetching status.

It should be noted that every useQuery state with the 'is' prefix produces a boolean value (true or false). Additionally, the UI is maintained via the KeepPreviousData option even though several queries are made and discarded for each page of data read.

The useQuery takes two parameters - the queryKey, and the queryFn. The queryKey is a pair of elements in an array. The first element depends on the URL; navigate to the axios.js file and find the line of code that reads const resp = await axiosRequest.get('/posts?_page=${pageParam}');, what comes before the question mark (?) which is /posts is the first element and the second is the page state. While the queryFn comprises calling the function to fetch data from the API and setting the keepPreviousData to true. The queryKey is what React Query utilizes to cache the data for each page, and the queryFn is used to fetch the data.

Let’s put the previous information into practice. Since we are now utilizing React Query to obtain the data, we will no longer use the ‘useEffect’ hook as we previously did. Additionally, since the “posts” array is no longer defined, we won’t be mapping through it; instead, we’ll be mapping through the data array that react-query produces.

This is what your Posts.jsx file should look like:

import "../App.css";
import { getPosts } from "../api/axios";
import { useState } from "react";
import { useQuery } from "react-query";

const Posts = () => {
  const [page, setPage] = useState(1);

  const { isLoading, isError, error, data, isFetching, isPreviousData } =
    useQuery({
      queryKey: ["/posts", page],
      queryFn: () => getPosts(page),
      keepPreviousData: true,
    });

  return (
    
      
        
        
        
        
        Page {page}

        
        
        ...

        
        
      


      
        
          {data.map((post) => (
            
              {post.id}

              {post.title}

              {post.body}

            

          ))}
        

      

    

  );
};

export default Posts;

Fixing the No QueryClient Error

Finally, React-Query is all set. But there is one crucial piece missing. If you check your browser’s developer tools, you should see a warning in the Console -tab, which says No Queryclient declared.
Let's fix that.

First, reinstall React-Query with this command:

npm i @tanstack/react-query

Next, once you’ve reinstalled the library using the npm command above, you’ll also have to re-import the library into your React component by replacing this command:

import { useQuery } from 'react-query'

With this command:

import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from "@tanstack/react-query";

We can now override the error we were getting because we have access to the QueryClient.

It is advisable to create the queryClient outside of your component (Posts), so as not to get your cache (generated from the queryCache, which is embedded in the queryClient) thrown away whenever things like re-rendering occur in the component. This makes it referentially stable.
Declare a ‘queryClient’ variable outside of your component to accomplish this:

//Create a Client
const queryClient = new QueryClient()

The next thing is to declare the QueryClient Provider, which creates a context to store the QueryClient and makes it accessible throughout the app.

Declare the Provider and export it as default using the following code:

const PostApp = () => {
  return (
    
      
    
  );
};

export default PostApp;

Navigate to your App.jsx file and import the Provider. Your code block in the App.jsx file should look like this:

import React from "react";
import "./App.css";
import PostApp from "./components/Posts";

function App() {
  return (
    
      Random Generated Posts.

      
    

  );
}

export default App;

Implementing Pagination using the Query Result

The query result is returned by useQuery, and contains the information/states needed to use the data. Navigate to the Posts component (Posts.jsx) file; that's where we would implement pagination.

We would first map through the data outside of the return block. Rendering of data will be based explicitly on the states/status react-query provides. We want to render data only when it isn’t in the loading/fetching state, and there aren’t any errors while fetching data. This can be done with the help of a control statement — the if, else if, and else statements.

Create a variable for mapping through the data:

const newFetch = (
  
    {data.map((post) => (
      
        {post.id}

        {post.title}

        {post.body}

      

    ))}
  

);

Next, create a function that handles data rendering using control statements.

const isPostFetched = () => {
  if (isLoading || isFetching) {
    return (
      
        Loading Posts....
      

    );
  } else if (isError) {
    return (
      
        The Error is: {error.message}
      

    );
  } else {
    return newFetch;
  }
};

To determine what should be rendered on the webpage, we are just checking the status of the data in the code above. We first check if it is in the fetching or loading state, where it should display loading posts...., then we check whether there is an error; if so, we display the error message, and finally, if it is not in any of the aforementioned states, it should provide us with the actual data.

We can now call the isPostFetched function inside the return block to render data on the web page.

{isPostFetched()}
;

The Button Functions

Be aware that the functions for the buttons would be hard coded because the API doesn’t return certain helpful information that would have allowed us to perform the task more efficiently.
The functions are as follows:

const prevPage = () => setPage((prev) => prev - 1);
const pageOne = () => setPage(1);
const pageTwo = () => setPage(2);
const pageThree = () => setPage(3);
const pageFour = () => setPage(4);
const pageFive = () => setPage(5);
const pageTen = () => setPage(10);
const nextPage = () => setPage((next) => next + 1);

Next, update the div where the buttons are embedded to this:


  
  
  
  
  Page {page}

  
  
  ...

  
  
;

The function for each button was activated in the div above using the onClick event. We also implemented a feature that would disable the prev button if we were on the first page and the next button if we were on the last page.

Navigate to the App.css file and add this code:

button: disabled {
  opacity: 0.5;
  cursor: not - allowed;
}

The style code above reduces the opacity of the button color when it is disabled.

Final Thoughts

The function that triggers each page button to display data was hard coded in this case because the API we used did not return the value of the total number of pages for us.
When building an API for a webpage that uses pagination, be sure to return the following data: the current page, the amount of data that will be displayed on each page, the total amount of data being retrieved from the API, and the number of pages based on the formula: total data generated minus total data to be displayed on each page.

If these are provided, you can easily get the pages array:

const pgArray = Array(totalpages {number of pages})
  .fill()
  .map((_, id) => id + 1 {id + 1 because index are zero based});

Render the page buttons by referencing the PgButtons component.

{
  pgArray.map((pageNumber) => (
          key={pageNumber}
      pageNumber={pageNumber}
      setPage={setPage}
      isPreviousData={isPreviousData}
    />
  ));
}

Next, you can create a separate component to display the buttons to keep things clean. Pass the page number, the setPage, and isPreviousData as props.

const PgButtons = ({ pageNumber, setPage, isPreviousData }) => {
  return (
    
  );
};

That’s how the buttons should be implemented and not hard coded.

Overview of the Posts Component

If your application still has trouble rendering, check your code in the Posts.jsx file against the following:

import "../App.css";
import { getPosts } from "../api/axios";
import { useState } from "react";
// import { useQuery } from 'react-query';
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from "@tanstack/react-query";

//Create a Client
const queryClient = new QueryClient();

const Posts = () => {
  const [page, setPage] = useState(1);

  const { isLoading, isError, error, data, isFetching, isPreviousData } =
    useQuery({
      queryKey: ["/posts", page], //used internally for refetching, caching, and sharing your queries throughout your application.
      queryFn: () => getPosts(page),
      keepPreviousData: true,
    });

  const newFetch = (
    
      {data.map((post) => (
        
          {post.id}

          {post.title}

          {post.body}

        

      ))}
    

  );

  const isPostFetched = () => {
    if (isLoading || isFetching) {
      return (
        
          Loading Posts....
        

      );
    } else if (isError) {
      return (
        
          The Error is: {error.message}
        

      );
    } else {
      return newFetch;
    }
  };

  const prevPage = () => setPage((prev) => prev - 1);
  const pageOne = () => setPage(1);
  const pageTwo = () => setPage(2);
  const pageThree = () => setPage(3);
  const pageFour = () => setPage(4);
  const pageFive = () => setPage(5);
  const pageTen = () => setPage(10);
  const nextPage = () => setPage((next) => next + 1);

  return (
    
      
        
        
        
        
        Page {page}

        
        
        ...

        
        
      


      {isPostFetched()}

    

  );
};

const PostApp = () => {
  return (
    
      
    
  );
};

export default PostApp;

Conclusion

In this article, we learned how to implement pagination using react-query. We learned about the perks of using react-query for handling pagination in our web apps.

A TIP FROM THE EDITOR: If you want infinite scrolling instead of paging, don’t miss Infinite Scrolling With React Query.

Originally published at blog.openreplay.com on January 19, 2023.

Doing pagination with React Query was originally published in StackAnatomy on Medium, where people are continuing the conversation by highlighting and responding to this story.

CSS Pseudo Elements: A Definite Guide

Bobate Isaac — Tue, 06 Dec 2022 01:54:35 GMT

Cascading Style Sheet (CSS) pseudo-elements are a handful of CSS features that help us keep our Hypertext Markup Language (HTML) minimal by adding and modifying it directly from the CSS code. For example, you may want to add text before a particular HTML element used in multiple places in the entire code. As we progress in this tutorial, we will examine different CSS pseudo-elements and how to apply them.

At the end of this article, we’ll have fully grasped the concept behind CSS Pseudo Elements and how to apply them.

You’ll need a fundamental knowledge of CSS to follow along with the code samples and understand the terminologies used in the article.

What are CSS Pseudo Elements?

Pseudo-elements are elements that are virtually added to the HTML via CSS code. These elements do not exist in the Document Object Model (DOM). In simple terms, pseudo-elements are elements that can be visualized on the webpage but are created using CSS.

Note: Without using the content property, pseudo-elements won’t reflect.

Pseudo Elements syntax: CSS 2 vs. CSS 3 syntax

The syntax changes between CSS versions:

CSS 2 Syntax

selector:pseudo-element {
      property: value;
}

CSS 3 Syntax

selector::pseudo-element {
     property: value;
}

The pseudo-element was initially introduced in CSS2. At that time, the convention for declaring a pseudo-element was that a single colon (:) comes before the pseudo-element text. But now, in CSS3, we use a double colon (::) before the pseudo-element text. This approach was introduced mainly to differentiate between pseudo-classes and pseudo-elements.

It is believed that if you use either of the two pseudo-elements writing conventions, your code will still work. However, some pseudo-elements only support usage with a double colon (::). Hence, it is advisable to always use a double colon (::) when using pseudo-elements and a single colon (:) when using pseudo-classes.

As we continue this article, pseudo-elements that support single and double colons will be shown with their respective notation.

Types of Pseudo Element

For this article, we will only examine five types of pseudo-elements to keep things concise. A study has it that these five types of pseudo-elements are the ones you will often use. The following are the five different CSS pseudo-elements to be discussed:

::before
::after
::first-letter
::first-line
::selection

Pseudo Elements Description

::before

This inserts the specified content before the element selected

::after

This inserts the specified content after the element selected

::first-letter

This is used to style the first letter of the element selected

::first-line

This selects the first line of the element selected

::selection

This selects and adds styles to the part of the document that the user has highlighted

Application/Usage of Pseudo-Elements

Note: To use pseudo-elements, you must first declare the content property and assign it a value. The content property can be assigned the following values and is not limited to these value types:

String

Selector::pseudo-element {
    Content: “string”;
}

Empty String

 Selector::pseudo-element {
    Content: "";
 }

Url pointing to an image

Selector::pseudo-element {
    //Just like how background-images are declared
    Content: url(“link to image goes in here”);
}

Note, when using the URL reference as the `content` property value, you shouldn’t wrap it in quotation marks. Wrapping it in quotation marks makes it be regarded as a string and not a URL reference thereby a string value is returned.

For example:

Selector::pseudo-element {
  Content: “url(“link to image goes in here”)”;
}

The code snippet above will return this string — url() as the content property value.

::before (:before)

This pseudo-element adds content before the selected Hypertext Hypertext Markup Language (HTML) element. As the name implies, this pseudo-element adds the value assigned to the content property before the selected/targeted element.

Selector::before {
  content:" ";
}

We will use the ::before pseudo-element to add a particular text to a group of list items. In place of the text, you can use the url() to add a link to an image to the front of the HTML element you selected.

Demo:

https://medium.com/media/551fbfc1192f050eb0e308ce9453d438/href

::after (:after)

The ::after pseudo-element adds content after an HTML element. Like its counterpart (the ::before pseudo-element), this pseudo-element also inserts content, but it's after the selected element.

Selector::after {
  content:" ";
}

Just like the example above, we will use this pseudo-element to display content after selecting the HTML element.

Demo:

https://medium.com/media/cb73b7844c47c98827a9a72d8d8e6f37/href

Note: the two pseudo-elements discussed above are the most used.

::first-letter (:first-letter)

We often see text whereby the first letter covers one line or more. This letter starts the first word on the number of lines it covers. The ::first-letter pseudo-element is the key to implementing the feature mentioned above. In simple terms, this pseudo-element selects and styles the first letter of the selected element.

Selector::first-letter {
  content:" ";
}

Here, we will take a look at how to use this pseudo-element.

Demo:

https://medium.com/media/77942739af95f1e74bedab1aa4f206b4/href

You are limited to a set of CSS properties when using this pseudo-element. Properties about layout, such as position, display, and so on, can’t be modified. Also, the browser compatibility for digraphs is very low when using this pseudo-element.

::first-line (:first-line)

This ::first-line pseudo-element targets just the first line of the selected element and styles it provided it's a block-level element, not the inline block-level element.

Selector::first-line {
  content:" ";
}

Let’s take a look at how we can apply this pseudo-element.

Demo:

https://medium.com/media/f365b2aaa14546446156c4ad85404af1/href

::selection (:selection)

The ::selection pseudo-element targets any highlighted section on the webpage. When using this pseudo-element, you are limited to specific properties such as color, outline, background, etc.

Note: this pseudo-element can be used globally in the webpage, whereby any element highlighted gets the defined styles. Below is the syntax for using this pseudo-element globally and for a specific element.

//global element syntax
::selection {
  content:" ";
}

//specific element syntax
Selector::selection {
  content:" ";
}

Try highlighting the paragraph and any other text in the demo; you will see the style applied.

Demo:

https://medium.com/media/8222464cacf1fcba55fb7e108e29d1d4/href

Open Source Session Replay

Start enjoying your debugging experience — start using OpenReplay for free.

Combination Of the ::before and ::after pseudo-elements

In this segment, we will take a deeper look at the two most common pseudo-elements as we will build a simple card box with a default loader design.

Here is the demo:

https://medium.com/media/e85e3097f7ba5ff3db036be2ba3747bd/href

Resources

Conclusion

In this article, we learned how to style the content on our webpage using the most used pseudo-elements. Using the example scripts in the demo area, we also learned about the guidelines for using pseudo-elements, when to use them, and how to apply them.

A TIP FROM THE EDITOR: Do not miss our Modern CSS Selectors article for more on current CSS features!

Originally published at https://blog.openreplay.com.

CSS Pseudo Elements: A Definite Guide was originally published in StackAnatomy on Medium, where people are continuing the conversation by highlighting and responding to this story.

Building a Video Player with React and Material UI

Bobate Isaac — Wed, 19 Oct 2022 23:08:00 GMT

Video assets are quickly taking over as the preferred method of product promotion on websites. Thus, developers need to understand how to create and modify video players to meet the requirements of their websites.

In this article, I’ll demonstrate how to develop a video player using the react-player package and style it with Material UI, so you can make a video player that perfectly suits the requirements of your next web build.

This article’s primary purpose is to assist readers in creating and customizing their video players in accordance with their preferences. However, if you prefer a program that you can simply install to gain access to a fully developed and personalized video player, take a look at the Mui player. Also, be aware that this service has drawbacks, including the inability to adjust the video player to your preferences.

What is React Player?

React player is a component used in rendering various video assets, including YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, DailyMotion, and so on. React player is a package used to create video players that supports various video sources and types.

The first thing to do is to bootstrap a new React project using the Create React App (CRA) bundler. Inside the project folder, install the needed dependencies.

First, we have to install the react-player by typing the code below into your project terminal:

npm i react-player

Next, we have to install Material UI for styling the video player:

npm install @mui/material @emotion/react @emotion/styled

Still, on Material UI, we have to install the SVG icons. Icons are the major thing we want to import from Material UI. Use the code below to import and have access to the material UI icons:

npm install @mui/icons-material

And lastly, we will install screenfull, the package for bringing our video player into full-screen mode.

npm i screenfull

You have to clean up the default folder structure for the build by deleting the logo file and removing everything in the return block inside the App.js file.

Your App.js file should look like this:

import * as React from 'react'; 
import './App.css';  
function App() { 
  return (      
     <> 
      
         
  ); 
}  
export default App;

Next, import the react-player and screenfull in your App.js file.

import ReactPlayer from 'react-player';
import screenfull from 'screenfull';

Let’s create a simple header for the web app by updating our App.js file with this:

import './App.css';
import ReactPlayer from 'react-player';
import screenfull from 'screenfull';

function App() {
  return (
    <>
      
        Build a Video Player - Tutorial

      

    
  );
}

export default App;

Navigate to your App.css file and add the code below to style the header:

* {
  margin: 0;
  box-sizing: border-box;
}

.header__section {
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 40px;
  background-color: rgb(70, 70, 172);
}

.header__text {
  color: white;
  font-size: 28px;
  font-weight: 800;
  font-family: Georgia, 'Times New Roman', Times, serif;
  padding-top: 5px;
  padding-bottom: 5px;
}

Note, clean up the App.css file before adding the code above.

We want to get our video URL and preview the video using the react-player package.

Here is the link to the video sample we will use in this article, and we get the link from this github gist sample for free video URLs.

In the App.js file, import the container wrapper from the Material UI, where we'll include our React player and Controls.

import * as React from 'react';
import './App.css';
import ReactPlayer from 'react-player';
import screenfull from 'screenfull';
import Container from '@mui/material/Container';

function App() {
  return (
    <>
      
        Build a Video Player - Tutorial

      

      
        
          http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"/>
        

      
    
  );
}

export default App;

Navigate to your App.css file and style the Player Div using the code below:

.playerDiv {
  width:100%;
  position: relative;
}

If you run npm start to preview the video player on the browser, you will see this:

In the snapshot above, the react-player renders our sample video. Still, there seems not to be any video displayed because we’ve not added the needed props for that functionality.

To fix that, add a playing prop and a muted prop to the ReactPlayer component, and set the props to true, as shown in the code below:

url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
playing={true}
muted={true}
/>

In the code above, we included the playing and muted props to enable our sample video to play. In place of the props’ default values of false, we set a value of true. The code above produces the playing video seen in the illustration below:

Since there are no controls present, the video player is not interactive. Controls, a prop in the react-player package, has the value false by default. The video player’s controls are automatically added when the value is updated to true.

The controls prop adds the controls in the image above to your video player. But some controls we want our video player to have are not part of the controls react-player provides. For example, we don't have the fast forward and rewind features, hence the reason for customizing ours.

The Controls

The picture below is a visual representation of the functionalities of our Video Player.

From the image above, we can see that this video player has the following features:

Movie title
Pause and Play
Fast Forward and Rewind
Muting
Volume increase and decrease
Playback Speed
Fullscreen Mode

Importing and Styling the Controls

The controls are divided into the top, middle, and bottom.

Let’s get into the code:

First, import the ControlIcons component into the App.js file by updating your App.js file with the following code:

import * as React from 'react';
import './App.css';
import ReactPlayer from 'react-player';
import screenfull from 'screenfull';
import Container from '@mui/material/Container';
import ControlIcons from './Components/ControlIcons';

function App() {
  return (
    <>
      
        Build a Video Player - Tutorial

      

      
        
                    url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
          playing={true}
          muted={true}
          controls={true}
          />
          
        

      
    
  );
}

export default App;

Next, navigate to ControlIcons.jsx file, and let’s get right into importing the controls segment by segment. Update its contents:

import React from 'react';
import './ControlIcons.css';

const ControlIcons = () => {
    return (
        
            
        

    )
}

export default ControlIcons;

We must apply some styles, such as the position of absolute, to the div with a className of controls__div to allow our controls to overlap the video.

Inside the ControlsIcons.css file, add this:

.controls__div {
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    background: rgba(0,0,0,0.6);
}

Our style will use the Grid wrapper from Material UI. We now begin with the top section, where we only want the word "Player" to be visible.

For this, we first have to import Grid and Typography (where the text to be displayed is written; this is the way to display a text when using material UI for styling).

import React from 'react';
import './ControlIcons.css';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';

const ControlIcons = () => {
    return (
        
            
        

    )
}

export default ControlIcons;

The following code should be added to your ControlIcons.jsx file to display the top section text (which is "Player" ):

import React from 'react';
import './ControlIcons.css';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';

const ControlIcons = () => {
    return (
        
            {/* Top Segment */}
           
              
                Player
              
           
        

    )
}

export default ControlIcons;

In the code snippet above, we employ a Grid wrapper that acts as a container to hold the text “Player”. This Grid was given some positional parameters, and we then added the inline style padding: 16px to it. The item to be placed inside the container was then represented by another Grid wrapper, and the text was then displayed using the Typography wrapper.

Let’s move on to the middle section. Here we have three buttons: rewind, play, and fast-forward.

As usual, the first step is to import the needed icons. Add the following imports to your ControlIcons.jsx file.

import { IconButton } from '@mui/material';
import { FastRewind } from '@mui/icons-material';
import { FastForwardSharp } from '@mui/icons-material';
import { PlayArrowSharp } from '@mui/icons-material';

Next, let’s make use of the icons that we imported. Do this:

In the code above, we simply created a Grid (Container) where all three icons live; we applied some value to this Grid which determines how the icons are positioned. And lastly, we displayed all three icons using the IconButton wrapper Material UI provides. For each of the IconButton wrappers, we added a className called controls__icons. In the code above, all three icons are contained in a Grid (Container), and a value is applied to this Grid to determine how the icons are positioned. And lastly, we displayed all three icons using the IconButton wrapper Material UI provides. For each of the IconButton wrappers, we added a className called controls__icons.

Here is the style for the div with className of controls__icons:

.controls__icons {
    color: white;
    font-size: 50;
    transform:scale(0.9);
}

.controls__icons:hover {
    color: #fff;
    transform:scale(1);
}

And lastly, we move to the third section. This section has sub-sections: the video’s title, the player slider, and the last group of controls.

First, import the icons using the following code:

import Button from '@mui/material/Button';
import Slider from '@mui/material/Slider';
import { styled } from '@mui/material/styles';
import { VolumeUp } from '@mui/icons-material';
import { Fullscreen } from '@mui/icons-material';

We then add the code for the first category (the video title) in this section and create the Grid (container) that houses the entire bottom segment. Here is the code to execute the previous statement:

{/* Bottom Section */}

      
            Tears Of Steel

From the code above, it can be derived that this bottom section is embedded inside a container given a direction of row and justifyContent of space-between, which renders the bottom component with equal space between all the categories.

Let’s go on to the next category (the video player slider). We’ll use the ‘PrettoSlider’ pre-built slider from the material UI. There is a function needed to use the slider. We will use the PrettoSlider as a component wherever we want to display it after adding the function from the code snippet below to your “ControlIcons.jsx” file.

PrettoSlider Function:

const PrettoSlider = styled(Slider)({
  height: 5,
  "& .MuiSlider-track": {
    border: "none",
  },
  "& .MuiSlider-thumb": {
    height: 16,
    width: 16,
    backgroundColor: "#fff",
    border: "2px solid currentColor",
    "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
      boxShadow: "inherit",
    },
    "&:before": {
      display: "none",
    },
  },
  "& .MuiSlider-valueLabel": {
    lineHeight: 1.2,
    fontSize: 12,
    background: "unset",
    padding: 0,
    width: 32,
    height: 32,
    borderRadius: "50% 50% 50% 0",
    backgroundColor: "#52af77",
    transformOrigin: "bottom left",
    transform: "translate(50%, -100%) rotate(-45deg) scale(0)",
    "&:before": { display: "none" },
    "&.MuiSlider-valueLabelOpen": {
      transform: "translate(50%, -100%) rotate(-45deg) scale(1)",
    },
    "& > *": {
      transform: "rotate(45deg)",
    },
  },
});

Now use the PrettoSlider as a component:

{/* Bottom Section */}
  container
  direction="row"
  alignItems="center"
  justifyContent="space-between"
  style={{ padding: 16 }}
>
  
    
      Tears Of Steel

We provided the PrettoSlider with specific props, including a default value, the terms “min” for minimum value and “max” for maximum value. Next, we added some digits to show the video’s duration and total watch time.

The play button, volume up, volume slider, playback speed, and full screen are the icons found in the last category.

We will use the “IconButton wrapper” to display the icons and render the volume slider by giving it the className “volume slider” and some parameters with default values.

Here is the code to style the Volume Slider:

.volume__slider {
    width: 100;
    margin-top: -50px;
    margin-left: 130px;
}

Now let’s add the playback speed rate and the full-screen icon. Using the code below, display the text and icon in your video player.

Here is the style for the className of bottom__icons:

.bottom__icons {
    color:#999;
}

.bottom__icons:hover {
    color: white;
}

When you preview the app, you should see a video player rendered with all the imported and styled buttons and icons.

In case you are running into errors at this point, simply crosscheck your code with the one below:

import React from "react";
import "./ControlIcons.css";
import Grid from "@mui/material/Grid";
import Typography from "@mui/material/Typography";
import { IconButton } from "@mui/material";
import { FastRewind } from "@mui/icons-material";
import { FastForwardSharp } from "@mui/icons-material";
import { PlayArrowSharp } from "@mui/icons-material";
import Button from "@mui/material/Button";
import Slider from "@mui/material/Slider";
import { styled } from "@mui/material/styles";
import { VolumeUp } from "@mui/icons-material";
import { Fullscreen } from "@mui/icons-material";

const ControlIcons = () => {
  const PrettoSlider = styled(Slider)({
    height: 5,
    "& .MuiSlider-track": {
      border: "none",
    },
    "& .MuiSlider-thumb": {
      height: 16,
      width: 16,
      backgroundColor: "#fff",
      border: "2px solid currentColor",
      "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
        boxShadow: "inherit",
      },
      "&:before": {
        display: "none",
      },
    },
    "& .MuiSlider-valueLabel": {
      lineHeight: 1.2,
      fontSize: 12,
      background: "unset",
      padding: 0,
      width: 32,
      height: 32,
      borderRadius: "50% 50% 50% 0",
      backgroundColor: "#52af77",
      transformOrigin: "bottom left",
      transform: "translate(50%, -100%) rotate(-45deg) scale(0)",
      "&:before": { display: "none" },
      "&.MuiSlider-valueLabelOpen": {
        transform: "translate(50%, -100%) rotate(-45deg) scale(1)",
      },
      "& > *": {
        transform: "rotate(45deg)",
      },
    },
  });
  return (
    
      {/* Top Segment */}
              container
        direction="row"
        alignItems="center"
        justifyContent="start"
        style={{ padding: 16 }}
      >
        
          
            Player

{/* Middle Segment */}
              container
        direction="row"
        alignItems="center"
        justifyContent="center"
      >

{/* Bottom Segment */}
              container
        direction="row"
        alignItems="center"
        justifyContent="space-between"
        style={{ padding: 16 }}
      >
        
          
            Tears Of Steel


              40
            
                          min={0}
              max={100}
              defaultValue={100}
              className="volume__slider"
            />

export default ControlIcons;

When you preview, you should have a replica of the image below:

You’ll see that the buttons are not interactive and must be activated if you try clicking on them. This brings us to the article’s final section, Activating the Controls.

Open Source Session Replay

Start enjoying your debugging experience — start using OpenReplay for free.

Activating the Controls

We will proceed in this part in a logical order, beginning at the top. This means we’ll start by activating the controls for the middle part.

Navigate into the App.js file, and we’ll start by creating a state called playerState. This state is an object with six properties: playing, mute, playerbackRate, played, volume, and seeking.

const [playerstate, setPlayerState] = useState({
    playing: true,
    mute: true,
    volume: 0.5,
    playerbackRate:1.0,
    played:0,
    seeking: false,
})

Note, in other for you to be able to use the useState hook, you need to import it at the top like this:

import { useState } from 'react';

Next, destructure the state to access its properties.

//Destructure State in other to get the values in it
const { playing, mute, volume, playerbackRate, played, seeking} = playerstate;

Update the React Player component by replacing the values for playing and muted props from true to playing and mute, respectively.

height='100%'  url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
playing={playing}
muted={mute}
 />

We now develop a feature that determines whether our video is playing or paused. For this, we’ll use the spread operator to store the values of our current playerState, and anytime this function is called, we’ll update the playing property in the state to return the inverse of its current value.

Here is the function:

const handlePlayAndPause = () => {
    setPlayerState({
      ...playerstate, 
      playing: !playerstate.playing
    })
}

We have to send the function as a prop to the ControlIcons component so that the play button may access this feature. Just like this, pass the function as a prop:

Destructure the prop in the ControlIcons Component. We are now left with making use of the prop gotten.

Update the IconButton Wrapper where the play button icon is embedded, with onClick={playandpause}:

Use the code above to update the icon’s two instances.

Let’s include the capability to switch between play and pause. The playing attribute from our “playerState” will be used to conditionally render the icons and import the pause button.

Import the Pause Icon.

import { PauseSharp } from '@mui/icons-material';

Pass the playing prop to the ControlIcons component

Destructure the prop

const ControlIcons = ({ playandpause, playing }) => { }

Replace the two instances of the play icon wrapper with this:

  className="controls__icons"
  aria-label="reqind"
  onClick={playandpause}
>
  {playing ? (
    
  ) : (
    
  )}

You should be able to play and pause the video now.

We must now construct a new set of functions to manage the rewind and fast-forward features. Just like the Windows Media Player on Windows PCs, we want to fast-forward the video by 30 seconds and rewind it by 10 seconds.

To do this, we must first establish a reference to the React player component to determine the video’s current time.

First, import the useRef hook and create the reference for the react-player component.

import { useState, useRef } from 'react';

//refer to the react-player component
 const playerRef = useRef(null);

//And lastly, add the reference to the react-player component by updating it with this code
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
ref={playerRef} //here is the reference
playing={playing}
muted={mute}
/>

Let’s make the rewinding function, which we’ll call handleRewind(). Note that we have access to several instance methods through the react-player library, and we utilize the ‘playerRef’ to call instance methods on the player. We will utilize the two instance methods “seekTo(amount, type)” and “getCurrentTime()” for the rewind and fast-forward operations.

//function to handle rewinding
 const handleRewind = () => {
    playerRef.current.seekTo(playerRef.current.getCurrentTime() - 10, ‘seconds’)
 }

//function to handle fast-forward
//The major difference between this function and that of rewinding is the addition of 30 seconds to the video's current time.
const handleFastForward = () => {
    playerRef.current.seekTo(playerRef.current.getCurrentTime() + 30, 'seconds')
}

The “ControlIcons component will then get the functions as a prop, which will be destructured inside the component before the icons are activated.

For that, do this:

//Pass the functions as props
 playandpause={handlePlayAndPause}
 playing={playing}
 rewind={handleRewind}
 fastForward={handleFastForward}
 />

//Destructure the props inside the ControlIcons.jsx file
const ControlIcons = ({ playandpause, playing, rewind, fastForward }) => { }

Next, call the onClick event on the rewind and fast-forward icons passing the rewind and fastForward props to the event.

//The rewind icon

//The fast-forward icon

With the code above, we can now rewind and fast-forward the video. You’ll note that the video player slider doesn’t move to the current time when we rewind or fast-forward the video, and let’s change that as we enter the third section of the controls.

The seek bar on the video player is our next goal (the slider). In addition to implementing the ability to click (seek) a specific time on the seek bar and view the video from that moment, we also want it to move as we fast-forward or rewind.

For that, we have to use a callback prop react-player provides — onProgress.

Add the value handlePlayerProgress (a function we will later write) to the callback props for the react-player component list. Use the following code to update your React player component:

url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
ref={playerRef}
playing={playing}
muted={mute}
onProgress={handlePlayerProgress}
 />

The function handlePlayerProgress accepts a state argument. This state argument represents an object with other states embedded. Some sets of states are changed, and new values are returned whenever the video player seek bar (the player’s timing) changes. In this function, we retain the values of the previously altered States and our playerstate attributes. We want this to happen only when the seeking property value in our playerstate is negated.

You can observe the changing states in your console if you log the newly altered state. We simply require the played state, which is the duration of the video in seconds. This is the played property in our playerstate.

const handlePlayerProgress = (state) => {
    console.log('onProgress', state);
    if (!playerstate.seeking) {
      setPlayerState({...playerstate, ...state})
    }
    console.log('afterProgress', state);
 }

Next, pass played as a prop to the ControlIcons component:

    playandpause={handlePlayAndPause}
    playing={playing}
    rewind={handleRewind}
    fastForward={handleFastForward}
    played={played}
/>

Navigate to the ControlIcons.jsx file and destructure the played prop in it.

const ControlIcons = ({ playandpause, playing, rewind, fastForward, played }) => { }

Update your prettoslider with the code below:

 min={0} 
 max={100} 
 value={played*100}
 />

Since our slider has a maximum value of 100, we simply removed the defaultValue and introduced the value prop, which uses the played prop as its value but multiplies it by 100. As the video plays and when we fast-forward or rewind, the seek bar on the video player now moves.

We must create functions that enable us to seek a particular time using the video player slider. To do this, we will create two functions: handlePlayerSeek() and handlePlayerMouseSeekUp().

The handlePlayerSeek() is the function triggered when we seek a particular time of the video (when the slider value changes), while the handlePlayerMouseSeekUp() is the function triggered when the mouseup event is activated.

const handlePlayerSeek = (newValue) => {
    setPlayerState({...playerstate, played: parseFloat(newValue/100)});]
    playerRef.current.seekTo(parseFloat(newValue / 100));
}

const handlePlayerMouseSeekUp = (newValue) => {
    setPlayerState({...playerstate, seeking: false});
    playerRef.current.seekTo(newValue / 100);
}

For the handlePlayerSeek(), whenever the slider moves, automatically we get a new value - this is the parameter passed to the function. We then updated the playerState by keeping all we have in the state and updating only the played value to the newValue (which is a string) divided by 100 since played only takes a value between 0 and 1.

And for the handlePlayerMouseSeekUp(), we passed the parameter of newValue. We updated the playerState by keeping all we have in the state and updating only the seeking value to false. Afterward, we set the video's current time to the time sought.

We must pass the functions as props to the ControlIcons component by updating your ControlIcons component.

 playandpause={handlePlayAndPause}
 playing={playing}
 rewind={handleRewind}
 fastForward={handleFastForward}
 played={played}
 onSeek={handlePlayerSeek}  
 onSeekMouseUp={handlePlayerMouseSeekUp}
 />

Next, destructure the newly added props in your ControlIcons.jsx file:

const ControlIcons = ({ playandpause, playing, rewind, fastForward, played, onSeek, onSeekMouseUp }) => { }

In order to use the onSeek and onSeekMouseUp props, we need onChange and onChangeCommitted props, respectively.

The snapshot below explains what these props do.

Now, update your prettoslider component with the code below:

 min={0} 
 max={100} 
 value={played*100}
 onChange={onSeek} 
 onChangeCommitted={onSeekMouseUp}
/>

We can now seek a particular video time.

Next, right below the video player slider, we want to display the video’s total played time and length.

To do this, we need two instance methods react-player provides for us. The methods are: getCurrentTime() and getDuration(). The snapshot below explains their use.

const currentPlayerTime = playerRef.current ? playerRef.current.getCurrentTime() : '00:00';
const movieDuration = playerRef.current ? playerRef.current.getDuration() : '00:00'

The timing values were displayed using ternary operators in the code mentioned above sample. However, we still need to format the time returned to our preferences. For this, a globally scoped function is required.

Here is the globally scoped function (I defined it at the top, outside the App component function):

const format = (seconds) => {
  if (isNaN(seconds)) {
    return '00:00'
  }

const date = new Date(seconds * 1000);
  const hh = date.getUTCHours();
  const mm = date.getUTCMinutes();
  const ss = date.getUTCSeconds().toString().padStart(2, "0");

if (hh) {
    return `${hh}:${mm.toString().padStart(2, "0")}:${ss}`
  } else {
      return `${mm}:${ss}`
  }
};

Call the function doing this:

const currentPlayerTime = playerRef.current ? playerRef.current.getCurrentTime() : '00:00';
const movieDuration =  playerRef.current ? playerRef.current.getDuration() : '00:00';
const playedTime = format(currentPlayerTime);
const fullMovieTime = format(movieDuration);

Pass playedTime and fullMovieTime as props to the ControlIcons component. Update the component call using the code below:

  playandpause={handlePlayAndPause}
  playing={playing}
  rewind={handleRewind}
  fastForward={handleFastForward}
  played={played}
  onSeek={handlePlayerSeek}
  onSeekMouseUp={handlePlayerMouseSeekUp}
  playedTime={playedTime}
  fullMovieTime={fullMovieTime}
/>

As usual, destructure them inside the ControlIcons.jsx file:

const ControlIcons = ({ playandpause, playing, rewind, fastForward, played, onSeek, onSeekMouseUp, playedTime, fullMovieTime }) => { }

Finally, update the timing default value after the prettoslider component with this:

{playedTime}
{fullMovieTime}

You can now view the played time and the movie duration live as the video plays.

And finally, let’s work on the last category of the third segment. Let’s start with the volume icon. When we click it, we should be able to switch between muted and volume up. In that case, depending on the current volume level, the icon should change to muted or volume-up. Navigate into the App.js file, where we’ll create the function that handles the muting state.

const handleMuting = () => {
    setPlayerState({...playerstate, muted: !playerstate.muted})
}

For the handleMuting(), we kept all that is in the playerstate and updated the muted property to an inverse value of the current state of muted. Pass the function and muted property as props into the ControlIcons component by modifying your code with this:

  playandpause={handlePlayAndPause}
  playing={playing}
  rewind={handleRewind}
  fastForward={handleFastForward}
  played={played}
  onSeek={handlePlayerSeek}
  onSeekMouseUp={handlePlayerMouseSeekUp}
  playedTime={playedTime}
  fullMovieTime={fullMovieTime}
  muting={handleMuting}
  muted={mute}
/>

Destructure the muting and muted props in the ControlIcons.jsx file:

const ControlIcons = ({ playandpause, playing, rewind, fastForward, played, onSeek, onSeekMouseUp, playedTime, fullMovieTime,muting, muted }) => { }

Next, import the icon that symbolizes volume off or muted.

import { VolumeOff } from '@mui/icons-material';

Now, update the whole wrapper for the volume icon with the code below:

We conditionally rendered two icons in the aforementioned IconButton wrapper based on the value of the “muted” attribute in the “playerstate”. Additionally, we added an onClick() event to the wrapper and specified the value to be muting.

For the volume slider, just like the PrettoSlider, we have two functions to define, one for the onChange event and the other for the onChangeCommitted event.

//function for the `onChange` event
const handleVolumeChange = (e, newValue) => {
    setPlayerState({...playerstate, volume:parseFloat(newValue/100), mute:newValue === 0 ? true : false, });
}

//function for the `onChangeCommitted` event
const handleVolumeSeek = (e, newValue) => {
    setPlayerState({...playerstate, volume:parseFloat(newValue/100), mute:newValue === 0 ? true : false, });
}

For the functions above, we simply updated the playerstate by keeping all that is in it and the values of the volume and mute properties.

We then pass the function as props:

  playandpause={handlePlayAndPause}
  playing={playing}
  rewind={handleRewind}
  fastForward={handleFastForward}
  played={played}
  onSeek={handlePlayerSeek}
  onSeekMouseUp={handlePlayerMouseSeekUp}
  playedTime={playedTime}
  fullMovieTime={fullMovieTime}
  muting={handleMuting}
  muted={mute}
  volume={volume}
  volumeChange={handleVolumeChange}
  volumeSeek={handleVolumeSeek}
/>

Next, we update the volume slider by adding two new props: the onChange event and the onChangeCommitted event, and passing the volumeChange and volumeSeek props as their value, respectively. Also, we update the default value, which defines the volume pitch with the code below:

{volume * 100}
 min={0}
 max={100}
 value={volume * 100}
 className='volume__slider'
 onChange={volumeChange}
 onChangeCommitted={volumeSeek}
 />

Regarding the playback speed/rate. Here, we want to include a function that lets us change the speed at which the video plays.

In this section, we’ll work with the playbackRate props react-player provides.

We have to create the function that handles the playback rate. This function updates the playerstate by simply keeping all that is in it and updating only playerbackRate value to its parameter (rate).

Here is the function:

const handlePlayerRate = (rate) => {
    setPlayerState({...playerstate, playerbackRate: rate});
}

We have to pass this playerbackRate property from the playerstate as the value for the playbackRate prop that we'll add to the React Player component.

According to the statement above, your React Player component should have the following props.

  url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
  ref={playerRef}
  playing={playing}
  muted={mute}
  onProgress={handlePlayerProgress}
  playbackRate={playerbackRate}
/>

In the code snippet above, we added the playbackRate prop to the React Player component.

Next, we have to pass both playerbackRate property from the playerstate and handlePlayerRate() as props to ControlIcons component.

  playandpause={handlePlayAndPause}
  playing={playing}
  rewind={handleRewind}
  fastForward={handleFastForward}
  played={played}
  onSeek={handlePlayerSeek}  
  onSeekMouseUp={handlePlayerMouseSeekUp}
  playedTime={playedTime}
  fullMovieTime={fullMovieTime}
  muting={handleMuting}
  muted={mute}
  volume={volume}
  volumeChange={handleVolumeChange}
  volumeSeek={handleVolumeSeek}
  playerbackRate={playerbackRate}
  playRate={handlePlayerRate}
 />

Let’s move into the ControlIcons.jsx file, where we'll create the popover and use the recently passed props.

The first thing we have to do here is to set up the Popover where we'll embed the various speed rates.

Import Popover component from Material UI.

import Popover from '@mui/material/Popover';

Next, destructure the props inside the ControlIcons.jsx file:

const ControlIcons = ({ playandpause, playing, rewind, fastForward, played, onSeek, onSeekMouseUp, playedTime, fullMovieTime, muting, muted, volume, volumeChange, volumeSeek , playRate, playerbackRate}) => { }

The Popover component from MUI comes with a series of things: a state, two functions that trigger the opening and closing of the popover, and two variables. You can find them in the code snippet below:

const [anchorEl, setAnchorEl] = React.useState(null);
const handlePopOver = (event) => {
     setAnchorEl(event.currentTarget);
};

const handleClose = () => {
     setAnchorEl(null);
 };

const open = Boolean(anchorEl);
 const id = open ? 'playbackrate-popover' : undefined;

Let’s systematically activate the popover starting with the displayed value of 1x in the Video player.

The Button Wrappper, which displays the current playback rate of the video, should be updated with the code below:

For the code above, we added the onClick event to the Button Wrapper, which we passed the handlePopOver() as its value. After that, we updated the current value of the playback rate using the playbackRate prop.

Immediately after the code above, add this:

    id={id}
    open={open}
    anchorEl={anchorEl}
    onClose={handleClose}
    anchorOrigin={{
        vertical: 'top',
        horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'bottom',
      horizontal: 'center
   }}>
        
                 {
                      [0.5,1,1.5,2].map((rate) => (
                           
                      ))
               }

In the code above, we simply passed id, open, anchorE!, and onClose as props to the Popover wrapper. We also structured the position of the Popover using the anchorOrigin and transformOrigin. Finally, inside the Popover wrapper, we mapped the values which symbolize the playback rate, then they are passed as the argument to the playRate.

Now, we can toggle through four values for our playback rate. By default, the playback rate is set to 1.

Navigate to the App.js.

Finally, let’s implement the Full-Screen Mode. Remember that we imported screenfull from the screenfull package.

We need to make a reference to the wrapper for the whole video player, i.e., the div with a className of playerDiv.

Create the reference using useRef:

const playerDivRef = useRef(null);

Call the reference on the Video player wrapper:

Create the function that triggers full-screen mode when we toggle the icon.

const handleFullScreenMode = () => {
    screenfull.toggle(playerDivRef.current);
}

Pass the function as a prop to the ControlIcons component. Update the ControlIcons component with this:

  playandpause={handlePlayAndPause}
  playing={playing} 
  rewind={handleRewind}
  fastForward={handleFastForward}
  played={played}
  onSeek={handlePlayerSeek}  
  onSeekMouseUp={handlePlayerMouseSeekUp}
  playedTime={playedTime}
  fullMovieTime={fullMovieTime}
  muting={handleMuting}
  muted={mute}
  volume={volume}
  volumeChange={handleVolumeChange}
  volumeSeek={handleVolumeSeek}
  playerbackRate={playerbackRate}
  playRate={handlePlayerRate}
  fullScreenMode={handleFullScreenMode}
/>

Destructure the fullScreenMode prop inside the ControlIcons.jsx file.

const ControlIcons = ({ playandpause, playing, rewind, fastForward, played, onSeek, onSeekMouseUp, playedTime, fullMovieTime, muting, muted, volume, volumeChange, volumeSeek , playRate, playerbackRate, fullScreenMode}) => { }

Add the onClick event (with the fullScreenMode prop as its value) to the IconButton wrapper where the full-screen icon is embedded.

Conclusion

In this article, we learned how to build and customize a video player using the react-player package and Mui to style and import the needed icons. However, you can always take the build further by adding some unique features to make the player suit your taste completely.

Here is the source code and the deployed version.

A TIP FROM THE EDITOR: If you are interested in showing videos, please also look at our Picture-In-Picture Video With HTML5 And JavaScript article.

Originally published at https://blog.openreplay.com.

Building a Video Player with React and Material UI was originally published in StackAnatomy on Medium, where people are continuing the conversation by highlighting and responding to this story.

DAOs using Dework

Bobate Isaac — Mon, 16 May 2022 17:41:22 GMT

Dework Logo

What are DAOs?

Decentralized Autonomous Organizations (DAOs) represent the term for a group of like-minded people coming together to work as one for the same purpose like investing in start-ups, managing a stablecoin, or buying a bunch of NFTs. There’s no central governing authority, hence the “decentralization”. Decisions are made collectively, whereby everyone’s vote counts — the DAO token represents a vote. In simple terms, more tokens mean more votes. According to ConsenSys, a blockchain organization, DAOs are “governing bodies that oversee the allocation of resources tied to the projects they are associated with and are also tasked with ensuring the long-term success of the project they support.”

What is Dework?

Dework is a web3-native tool like Trello, creating a medium for managing tasks and bounties all in one place. It goes further to offer some other incredible services like getting contributor applicants for your tasks, sync with discord, boost the reputation of contributors and even pay using your DAO token.

Integrating your DAO with Dework

First, create an account here. You will be directed to a page just like the snapshot below.

After you might have created the account and directed to the page above, they expect you to connect your discord and also establish a payment method (preferably metamask).

Now, you left with creating a project for your organization. You can decide to create a new project or just import an existing project from either Notion, Trello or Github.

Popular DAOs on Dework

Navigate here to view on the popular DAOs on Dework.

We regard the DAOs below as the popular DAOs on Dework. As a contributor, you can join any of this DAO, provided you’ve done all that is required by Dework.

In no particular order, let’s take a deeper view of some of the DAOs.

The OpenDAO

This DAO creates a community of digital natives united base on the following goals:

Building $SOS to be the central asset for the metaverse and web3 communities
Bridging the gap between existing intellectual property and the metaverse
Building core infrastructure for the non-fungible tokens (NFTs) ecosystem.

If Open DAO sounds like something you resonate with, you can go further by checking out the open tasks in the organization. With over 100+ active contributors, it’s no news that Open DAO is really growing.

The Open DAO has various open tasks spanning through development, design, translation, writing, marketing, community, product, research, legal, operations. Indeed the Open DAO covers a lot so everyone can find open tasks that we most likely tally with what they can do. If you feel there is a space you like in this organization, search for open tasks related to it then take a bold step to start contributing.

The PandaDAO

The PandaDAO is an organization taking the responsibility to reduce the control centralized organization have over information, and instead put personal data in the hands of the people (this is simply the practical definition of web 3). PandaDAO also aim to produce tools for DAOs, allowing more individuals to work full-time for this new type of organization. Another interesting thing about this organization is that it has lots of projects for various types of devopers be it frontend developer, backend developer, smart contracts (blockchain developers) and so on.

PandaDAO is more than just a decentralized media organization. They are developing new decentralized data systems and liberating internet products and human resources from Web2. They are making full use of web 3.

CityDAO

This organization is an on-chain city — cities that occur on a blockchain that are reflected on the distributed, public ledger. This organization is building metaverse where they are replicating cities in blockchain format.

There are also lots of projects provided in this organization be you a designer, developer, crypto enthusiasts and many more. If you have idea about real estate management, Iencourage to check out this organization in particular their real estate project section.

Dework has one unique feature which is the fact that you can easily integrate your github to work, making it easy for you as a contributor to submit your codes for project tasks contributed to. As DAO you can connect all your projects using github and also all the needed resources germane to contributors workflow.

Dework enables DAOs to create and manage tasks with current and new contributors, as well as reward them with their native token. With the Gnosis Safe, all contributors canbe paid at the same time.

Dework: Profile and reputation features

Bobate Isaac — Sun, 15 May 2022 16:02:17 GMT

Dework, the newly found web 3.0-native Trello.

Dework, a task manager for DAOs supporting token payments, credentialing, and bounties, should be your best option for getting web3 opportunities. It is also regarded as the web 3.0 Trello, offering what a native Trello can do — things like (managing tasks and bounties).

Dework Services

Dework does:

Creates a platform where DAOs can create tasks and also add bounties
Connects available DAOs to interested contributors
Integrates payment methods like metamask in other for contributors to quickly get paid.

With the seamless profile structure for contributors on Dework, we can call it a web 3.0 LinkedIn. Each contributor’s profile structure gets to see the list of all tasks contributed.

Profile and Reputation Features in Dework

Dework has quite several unique features that benefit both DAOs and contributors. This article aims to enlighten you about the profile and reputation features that Dework provides. A lot can be done with this tool.

I will explain this section by sighting two case studies — DAO management View and the Contributor’s View.

DAO management:

First, set up your DAO by clicking on the ‘Setup Project’ button on Dework’s homepage. This won’t take more than a minute of your time.

After setting up your DAO, you can add all the tasks you need a contributor for, by embedding them all in a Todo, just like the snapshot below.

The next phase is to create a task and attach a bounty to it, then wait for interested contributors to apply. In most cases, when a contributor accepts your task, you need to review/scrutinize their profile, though you can accept any contributor provided that you believe they are qualified for the task.

In other to make things more formal, you can take a step further by building a comprehensive task board and then adding segmented sections like (application review, work assignment, work in progress, work submitted for review, and work completed), just the way we have it for a typical Trello board.

Incorporating the Trello board-like feature in your DAO, make things look well structured, simple and clear.

Now, you can decide to use Dework to organize projects. Dework shows us the power of web 3.

The Contributor’s View:

Dework is a great tool that helps contributors access freelance web 3.0 gigs. By navigating to the Bounty section or Projects, you’ll discover open tasks to which you can decide to contribute to.

By clicking on a task you are interested in, you get to see more content information regarding that task, like the amount to be paid, instructions to follow, and so on.

If you feel comfortable with a skill, you can take your job surfing a step forward by simply using the search field to find available task regarding that skill you comfortable with.

What you stand to gain as a contributor using Dework:

Dework let’s existing contributors to easily handle tasks
As a contributor, you can decide to recruit new contributors to help you in completing a task, this is what we regard as outsourcing
Contributors get paid very fast due to the integration of payment platform. When you are signing up on with this tool, you are regarded to submit your wallet address, but you can also decide not to until you have completed a task using Dework.

The next section will help you in setting up your payment method.

Payment Structure:

In case you haven't linked your wallet address, just navigate to your profile settings.

Concluding note:

Dework is your number one DAO management and Contributor’s platform. A place where contributors that have their expertise in the web 3.0 field can easily get a job where they match up to. This platform helps to manage DAOs, contributor’s experience, and build on-chain reputation.