Every popover element has a little arrow. We see this pattern all over when we click on a button and a div pops up. Here is an example of this UI pattern – Box arrow.
In this post, I will walk through how this works. Here is a CodePen for this post.
The HTML is only a div containing some text.…
There are lot of reasons to love React Hooks. But I have one reason that stands out from the rest.
Consider a class component that sets some state. This component has a controlled input within it.
class MyInput extends Component {
state = { text: '' };
render() {
<input type="text" value={text} onChange={..} /}
}With class components there are three ways to write onChange handler.…
HTML elements can optionally have relative, absolute and fixed positions. Absolute positioning adjusts the position of an element with respect to its nearest parent container which has relative position. If there are no parents with relative position, an element with absolute position is placed within the browser window using the top, left, right or bottom properties. An element with fixed position is always positioned within the browser window.…
CSS Grid is a powerful technique for creating website layout. In this article, I will show how to build a simple but responsive “Coming soon” page with CSS Grid.
This is how the “Coming soon” page will look in mobile and desktop.
As you can see, it is very simple. A title, subtitle and “Coming soon” text at the bottom. …
Most landing pages have a huge background image. Within that background image, there is some text and a button which prompts the user to take an action.
Usually, the problem is that of contrast. The text is white in color and the background image may also be light causing a problem with contrast. We can solve the problem with minor CSS adjustments.…
Should I call this series: React Nuggets? I want to show in the series that coding in React involves a lot of JavaScript and CSS. Inline styles in React are cool. But CSS is more performant.
In this article, I show you how to take a CSS spinner and display it within a button.
What I want to show in this Nugget is how to tweak React and CSS.…