Select Page

Yup: Validate if the values of two fields are same

Yup is a JavaScript object schema validator and object parser.  To check if the values of two...

What does Polymer.flush() do?

According to the documentation located here, it says that Polymer.flush() forces...

How To Detect HTTP Or HTTPS using JavaScript?

location.protocol can be used to detect the protocol that the current site is using. For...

Rotate elements using Javascript

We will be using the Propeller Javascript library to rotate elements. It supports inertia and...

Sprite sheet animation using CSS only

Using CSS steps() it is easy to control the number of keyframes rendered in an animation’s...
The Best WordPress Knowledge Base Plugin

Yup: Validate if the values of two fields are same

Yup is a JavaScript object schema validator and object parser.  To check if the values of two fields are same or not using Yup, you can do: Yup.object().shape({ field1: Yup.string() .required('Required'), field2: Yup.string() .oneOf([Yup.ref('field1'), null], "Does...

What does Polymer.flush() do?

According to the documentation located here, it says that Polymer.flush() forces several classes of asynchronously queued tasks to flush. So, when you do dynamic changes that affects ShadyDOM distribution or perform some async operations (like insert,...

Rotate elements using Javascript

We will be using the Propeller Javascript library to rotate elements. It supports inertia and stepwise rotation and is also compatible with touch devices. To rotate element you can simply drag or swipe. We will be making this: Let's start with HTML: <div...

Sprite sheet animation using CSS only

Using CSS steps() it is easy to control the number of keyframes rendered in an animation’s duration. It breaks up the sprite sheet into equal parts called steps based on the value we set. Let’s use steps() to create a simple sprite sheet animation. HTML: <div...

Animate spritesheet using Javascript

A sprite sheet is an image file containing several images or sprites. Combining the small images in one big image file not only improves the game performance but also reduces the memory usage and speeds up the startup time of the game. For this example we will use the...

Rotating DVD cover using CSS transform

The CSS transform property lets you rotate, scale, skew, or translate a given element. This is achieved by modifying the coordinate space of the CSS visual formatting model. Example: Transforming a flat DVD cover to 3D: Demo: See the Pen Rotating DVD cover using CSS...

How to enable HTTPS on live server ( Visual Studio Code)

Live Server is one of my favorite Visual Code extension which is used to launch a development local server with live reload feature for static & dynamic pages. Yes, it supports dynamic pages like PHP. By default, it runs on HTTP. In order to enable HTTPS protocol,...

Implementing mouse scroll in slick.js

  Slick, the last carousel you'll ever need, is a great image carousel for Javascript. Like every other carousels, you have a lot of additional functionality/features for your galleries like: Fully responsive. Scales with its container. Separate settings per...