Prateek Jadhwani

Reduced Motion Media Query to Avoid Vestibular Disorders and Seizures

Prateek Jadhwani — Tue, 28 May 2019 00:00:00 GMT

When I was doing my research in Accessibility, I came across the term Vestibular Disorder. I really didn’t know much about it at that time. It is basically a type of disability that a person viewing the screen might have. It is often grouped with seizures and symptoms may include dizziness, vertigo, nausea, etc.

In terms of browsing the web, this sort of motion sickness might be caused by weird animations, or parallax backgrounds[1], which a lot of might not like and thus causing a higher bounce rate[4].

In order to provide a solution for this accessibility issue, the web specifications now include a new media query called prefers-reduced-motion. What it does is, it lets the browser run a specific css stated under prefers-reduced-motion media query[3] which can contain fixes for Reduced Motion.

Enable Reduced Motion

Before we even start diving into code, let’s take a look at ways we can enable Reduced Motion option on a Mac. ( Sorry windows users, I don’t have a windows machine with me. )

If you are unable to view the gif above, the steps are as follows:

Go to System Preferences > Accessibility > Display
Click on Reduce Motion checkbox

And you can disable by unchecking the same checkbox.

prefers-reduced-motion media query

You can use the media query prefers-reduced-motion to specifically hide the contents of the page that might cause motion sickness or nausea.

@media (prefers-reduced-motion) {
	// do magic here
}

If you want, you can take a look at the demo below. If you have Reduced Motion enabled, you will see a black overlay. Or else you see a gif.

Try Enabling or Disabling the Reduced Motion option under Accessibility

Sex on acid

Reduced Motion is ON, so this section is hidden.

Demo Link : https://codepen.io/prateekjadhwani/pen/eajegp

Summary

I hope you are now able to understand the main reason behind the implementation of this feature. And ways in which this media query can be used to provide a better user interface for you site.

References

[1] Accessibility For Everyone : https://abookapart.com/products/accessibility-for-everyone

[2] CSS prefers-reduced-motion media query : https://chromestatus.com/feature/5597964353404928

[3] prefers-reduced-motion media feature : https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion

[4] Bounce Rate https://en.wikipedia.org/wiki/Bounce_rate

Picture In Picture API

Prateek Jadhwani — Wed, 22 May 2019 00:00:00 GMT

If you are a software engineer, you must have heard of the term "No code is the best code". It simply means that if you can make a feature work without any code, it is a good way of implementing that feature. In my experience, I have tried to push towards features that can be done with just CSS and html rather than using JavaScript as well. One of the most common examples of this is the use of tabs in a web page. You can achieve a tabbed layout with just css and html without any javascript events and handlers. This way you can not only create a feature that uses less code, you are also creating a feature that needs zero to very less maintenance.

In this article, I would like to cover one of these no cost- low maintenance features that is available on Chrome. This feature is called Picture In Picture API.

What is Picture in Picture API?

Picture in Picture api lets a developer create a floating video that can be placed on top of all the other content inside a web page.

Try looking at the demo below

See the Pen Picture In Picture API by Prateek Jadhwani (@prateekjadhwani) on CodePen.

If you click on the button "Request Picture in Picture", you will be able to see the video move from its original location to the bottom right corner of the screen.

I am requesting Picture in Picture with the help of the following code:

document.querySelector('video').requestPictureInPicture();

If you want you can call this code on the scroll event to make something like how news site show their floating videos.

One thing to keep in mind is that I did not write any extra code to achieve this feature. I simply called an api and the browser did it for me.

But What If I Need Customization?

There are a lot of ways you can customize Picture in Picture feature.

Feature Support

You can check if the browser supports Picture in Picture API by using the following code:

if (!document.pictureInPictureElement) {
  // handle errors
}

Listening for events

You can even listen to events triggered by the api. For example, you can listen for when the video enters Picture in Picture mode or when it leaves.

document.querySelector('video')
  .addEventListener('enterpictureinpicture', () => {
    // Do stuff when video enters Picture in Picture
  })

document.querySelector('video')
  .addEventListener('leavepictureinpicture', () => {
    // Do stuff when video leaves Picture in Picture
  })

Look and Feel

You can also change the css associated with the video using the :picture-in-picture pseudo class. Although this feature is available in chrome 76 and above.

video:picture-in-picture {
  border: 20px solid blue;
}

Summary

With the above description and code samples, you should be able to see the future aspect of Picture in Picture. If you are from a software / technology company who needs to show product or article videos, this might be a better route as it saves a lot of time in coding and maintenance.

References

[1] Picture-in-Picture (PiP) https://chromestatus.com/feature/5729206566649856

[2] Picture-in-Picture https://wicg.github.io/picture-in-picture/

[3] CSS pseudo-class ":picture-in-picture" Sample https://googlechrome.github.io/samples/picture-in-picture/css-pseudo-class

Where is Prateek + a Unity Game?

Prateek Jadhwani — Wed, 15 May 2019 00:00:00 GMT

I know I have been missing in action and haven’t written anything at all in a really long time. And I will be honest… I gave up on the blog. In the past 10 years of me writing blogs, there have been times when I totally stop writing the blogs for a few months and then start writing again. And the last time this happened was when I moved my blog from Wordpress to Hubpress on Github.

But the good news is I am back. And here are the updates.

Unity 3D

First and foremost news, I started learning Unity last year. And here is my first attempt to this technology:

1. Recycle Recycle

I created this game as a test project to see what can be done with Unity and basic / newbie Pixel art. The game is released on iOS and can be found here.

2. Chopper To Hell

This is another interesting unity 3d project. My aim was to create a game using the asset store with $0 budget. The game involved killing spiders while controlling a chopper. This game needs its own blog, so I will try to write a totally new blog on it in the coming days, especially about the lessons learned.

The game was released on Steam and can be found here.

Pixel Art

I have also been trying to play around with pixel art. I still have problems with Walk Cycles, but I am getting better at creating random artwork.

How much would you rate it out of 10 ?

Also critique my art ¯\_(ツ)_/¯#Pixel_Dailies #pixelart #ドット絵 #screenshotsaturday #pixelartist #mood #art #beautiful #gameart #2d #retro #retroart pic.twitter.com/8fl4VhM3OT
— Prateek Jadhwani 🎮 Chopper To Hell (@prateekjadhwani) April 27, 2019

Writing a book

In the past few months, I have also been writing a book. While I am trying to learn Unity3d, I am also keeping up with learning frontend technologies and keeping up with the market. And I know, I haven’t been writing blogs, but I am spending that energy on to writing a book.

I cannot say anything more about it. XD

Summary

There you go guys, all the updates. I will try not to disappear again for a long time.

Contextual Styling Demo

Prateek Jadhwani — Mon, 02 Apr 2018 00:00:00 GMT

After reading Simurai's article on Contextual Styling with Custom Properties, I decided to create a small demo using the same tech.

See the Pen CSS Variable theme using data-theme by Prateek Jadhwani (@prateekjadhwani) on CodePen.

Please do not forget to review Contextual Styling with Custom Properties article incase you are interested in this tech.

Showing or Hiding Password

Prateek Jadhwani — Sat, 10 Mar 2018 00:00:00 GMT

Got bored while my PS4 was installing Monster Hunter World. And ended up making this concept Show Password by Prekesh

Dribbble UI

This is what the UI looks like.

If only, the browsers had an attribute in input[type=password] to show and hide passwords.

Demo

See the Pen Show Password by Prateek Jadhwani (@prateekjadhwani) on CodePen.

Building WebComponent based Progressive WebApp in Stencil JS - Part 02

Prateek Jadhwani — Thu, 08 Mar 2018 00:00:00 GMT

In Part 01, we looked into the hello-world example. In this part, we will be working further on the Mail Client.

Observations

Here are the various observations by looking at the Mail Client:

We have three sections on the page. The first section displays the folders and email labels, the second sections displays the mails in that folder and third section displays the actual mail content.
Each of these sections have a header. And then the content associated with it.
There is no mobile or tablet layout, so we wont be worrying about the responsive layouts.
To keep the demo simple, we will be using data from a json file instead of actual data for the email.
We will be able to see emails from different people, but to keep the demo not depend on any other backend services, all the other buttons wont have any functionality associated with it.

Components

We are going to use the bottom up approach to component development. In my experience, using a bottom up approach, forces components to be reusable, which is a good thing.

For the Part 02 of this series, we are going to create three components. These are as follows:

The new mail button
The mail information card
Email labels

1. New Mail Button

In this we are simply going to create a component that acts like a button, which is green in color, and contains some text.

Why is this a component? Because if you see the layout again, you will see that there is a green button with text "New Message" at the top, as well as a button with the text "Send" at the bottom. I decided to name this component as green-button.

Just like we did with the hello-world component, we will create two files green-button.tsx and green-button.css and place them in the /src/components/green-button folder.

2. Mail Information Card

The mail information card is the component which displays information about the sender, the subject, and the first line of the message.

Notice that there are a bunch of Mail Information Cards in the second column and you can only select one. This behaviour resembles that of a group of radio buttons, where you can select only one radio button at a time.

The Mail Information card has a label color associated with it as well. It also has a selected state which makes its background white. Keeping these things in mind, let’s create this component.

We will create two files mail-information-card.tsx and mail-information-card.css. And place them in /src/components/mail-information-card folder.

3. Email Labels

This component simply tells you what color represents what label. We can break it down into multiple components. One component can be the label itself called email-label and the other one can be the mail container where all these labels are called email-labels. Just like above, we are going the put the files in their respective folders.

email-label - the label

email-labels - the container

Conclusion

After making a bunch of changes to the app-home.tsx and app-home.css files, we can see it working on our demo. This is what it looks like with these three components:

If you are interested the full source code of the web app, here is the link to the github project: https://github.com/prateekjadhwani/my-pwa-02 or you can see a working demo of this project here: https://prateekjadhwani.github.io/my-pwa-02/

Upcoming in Part 03

In part 03 of this series, we will try to implement the remaining components so that we can use them freely in our web app.

Building WebComponent based Progressive WebApp in Stencil JS - Part 01

Prateek Jadhwani — Sat, 03 Mar 2018 00:00:00 GMT

Stencil.js is a compiler for WebComponents. It lets you write Web Components in TypeScript and jsx. If you are new to Stencil.js please take a look at their site https://stenciljs.com for a brief introduction.

You can download the starter project by simply cloning it so that you can skip the configuration part which may take ages.

git clone https://github.com/ionic-team/stencil-app-starter my-pwa

You can then install the dependencies by using the following command inside the my-pwa folder

npm install

Hello World

Let’s take a look at a small Hello World Example to get ourselves familiar with the starter template. Create a file hello-world.tsx inside the my-pwa/src/components/hello-world/ folder.

// filename: hello-world.tsx

import { Component } from '@stencil/core';

@Component({
    tag: 'hello-world',
    styleUrl: 'hello-world.css'
})
export class HelloWorld {
    render() {
        return (
            Hello World
        );
    }
}

The part @Component is a decorator which gives you information about the html tags used and the style sheet used. As you can see that we are trying to use a css file called hello-world.css for this stylesheet, let’s first create this file inside the same hello-world folder.

hello-world h1 {
    color: red;
}

Now, in order to load this component on to the page, we need to use it first. Let’s add the component in the component.

In file app-home.tsx inside the ` my-pwa/src/components/app-home/` folder we will simply add the hello-world component.

Before:

 
   Welcome to the Stencil App Starter.
   You can use this starter to build entire apps all with
   web components using Stencil!
   Check out our docs on
   stenciljs.com
   to get started.

After:

 
   Welcome to the Stencil App Starter.
   You can use this starter to build entire apps all with
   web components using Stencil!
   Check out our docs on
   stenciljs.com
   to get started.

Once this is done, we can now use the npm command to start the server and launch the page on to the browser with our hello world component.

npm run dev

The output looks like this

Upcoming in Part 02

This blog just gives you a basic introduction to Stencil.js and how we can use the startup template to have our own hello-world webcomponent in a PWA. In the next blog in this series, we will be looking at Mail Client App by Jakub Antalik (refer screenshot below) and how we can create it in our demo.

If you want to take a look at the source code for this my-pwa folder, feel free to refer this link https://github.com/prateekjadhwani/my-pwa-01 .

Universal Site is the new Accessible Site

Prateek Jadhwani — Thu, 01 Mar 2018 00:00:00 GMT

When we talk about an accessible website, the first thing that comes to our mind is a user who is unable to see the screen. And I am sure 99% of the people reading this agree with me. This is the same case with an accessible area. The first thing that comes to the mind when someone talks about an accessible area is wheelchair access. But this is not the case all the time. It is simply our assumption that an accessible site is limited to just its availability on screen readers and an accessible area is limited to just wheelchair access.

Let’s talk about the title of this blog, Universal Site is the new Accessible Site. A universal site, is a website that can be accessed by everyone. Not just people with a mouse or people with a screen readers, instead, it can be accessed via any hardware, any software and it can be accessed by any user, with or without disabilities, with ease.

The example of wheelchair access: If an area is accessible, it simply does not mean that it can only be accessed by wheelchairs. It means that it can also be accessed by baby strollers, or catering companies or movers to move their stuff. When we think of an accessible area that can be used my everyone, it becomes a universal area.

Welcome to the book "Accessibility for Everyone"

I started reading the book "Accessibility for Everyone" by "Laura Kalbag" few days ago just for fun. If you are one of those people who are trying to understand various aspects of accessibility in a website, this is your to go book. It covers all the aspects of disabilities, hardware used, how various people perceive written text, and even animations.

It covers how developers and designers are misusing html tags to make things look good by giving up on accessibility features. It also talks about content break down to logical sections for better readability, management of font styles and colors, and much more. These all lessons are taken by comparing live sites of various companies, and how they perceive the term accessibility for their users.

It also covers a set of solutions that are in place to take advantages of tags already available in the HTML5 specification sheet. And it discusses what a user is expecting in what scenarios and what steps can be taken to make the site more accessible in them.

What it is not!

It is not a book that can be used for learning how to code accessible web site using HTML. It discusses a bunch of good practices, but you cannot refer them for coding examples. I personally would rather go to MDN (Mozilla Developer Network) and look at the ARIA (Accessible Rich Internet Applications) example there.

Conclusion

This is not a book review by any means. I was trying to look into accessibility and I found this book pretty helpful. And I decided to share the book with other people so that they can use it as well.

I can already see a lot of improvements in the way I see sites. And I am making sure that I put accessibility before anything else when I write my code.

References

[1] Accessibility for Everyone https://abookapart.com/products/accessibility-for-everyone

element: Modals for the future.

Prateek Jadhwani — Wed, 14 Feb 2018 00:00:00 GMT

I recently came across a new spec with the name

See the Pen by Prateek Jadhwani (@prateekjadhwani) on CodePen.

As you can see, it works right out of box, without any JavaScript or CSS. And…. now we can finally stop worrying performance drops and extra events that stay on the site till the end of eternity.

So, what’s the catch? It is available only in chrome right now. It does not work on firefox nightly [3]. Which makes it harder to use in a site at the time of writing of this article. But if you still want to see it working, feel free to look at the demo in chrome.

::backdrop pseudo class

As you can see it on the above demo, the background is semi opaque white colored. This can be customized with the help of ::backdrop pseudo class. For example:

See the Pen by Prateek Jadhwani (@prateekjadhwani) on CodePen.

Auto focus

The

See the Pen by Prateek Jadhwani (@prateekjadhwani) on CodePen.

Conclusion

The

References

[1] https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element

[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

[3] https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement#Browser_compatibility

Accessibility in a modal

Prateek Jadhwani — Thu, 08 Feb 2018 00:00:00 GMT

It is said that you learn a new thing every day, and so I did. Accessibility has been in the market for a very long time and even then, I did not have a chance to implement it in a modal.

But then few days ago, a new user story happened. Make sure that the modal that shows blah blah blah information about blah blah blah thing needs to be accessible and should be read by blah blah blah screen reader.

Without the accessibility features, this is what the modal looks like. Click on the button to open the modal. You should be able to notice that if you keep on pressing the tab key, and it will still focus the buttons behind the modal. This case is the same if you are reading it with the help of a screen reader.

See the Pen Modal by Prateek Jadhwani (@prateekjadhwani) on CodePen.

In order to make this accessible, we will need to follow a checklist.

1. Tell the accessibilty devices that what you are displaying is a dialog.

This is done with the help of role="dialog". For Example:


  ...
  ...

2. Focus the modal when it opens.

The modal html might be present at any section of the DOM. You do not want your users to keep on tabbing through the sections right after the button or link that opens up the modal. This is where you need to shift focus to the modal; because the screen reader needs to read the text inside the modal.

function openModal() {
    ...
    ...
    ...
    document.querySelector(".modal").focus();
}

3. Make close button keyboard accessible

Your button should get triggered via Enter / Return key as well because you do need a way for the people reading on screen readers to close it.

If you code is not using the

4. Make sure that Esc key closes the modal.

This is really handy when a user is going through the modal and decides to close the modal anytime without going through all the contents.

Add the event listener for key presses.

document.querySelector('.modal-container')
    .addEventListener('keydown', handleESCKeyEventListener);

Then this handleESCKeyEventListener function would look something like this.

const isOpen = document.querySelector('.modal-container')
                  .classList.contains('-open');
if (e.keyCode === 27 && isOpen) {
    closeModal();
}

Also, dont forget to remove this keydown event listener when you close the modal.

function closeModal() {
    ...
    ...
    document.querySelector('.modal-container')
        .removeEventListener('keydown', handleESCKeyEventListener);
}

5. Lock the focus to just the modal

When the user is inside the modal, and if he keeps on pressing tab key, the focus will eventually go out of the modal container. In order to stop the user focus to go out, we are going to use the focusout event handler.

First we need to bind the focus out event to the modal container

document.querySelector('.modal-container')
    .addEventListener('focusout', handleFocusOut);

Then we need to make sure that the relatedTarget is outsite of the modal container to make it focus the modal again.

function handleFocusOut(e) {
  const modalDOM = document.querySelector('.modal-container');
  const isOpen = modalDOM.classList.contains('-open');
  if(isOpen && !modalDOM.contains(e.relatedTarget)) {
    e.stopPropagation();
    document.querySelector(".modal").focus();
  }
}

6. Focus back to the next element

In order to move the focus to the element which was selected before opening the modal, we will first need to get the last focussed element.

function openModal() {
    lastFocussedElement = document.activeElement;
    ...
    ...
}

And now inside the close method, we can set focus back to this lastFocussedElement element.

function closeModal() {
    ...
    ...
    lastFocussedElement.focus();
}

Final Product

After implementing all these points, the final demo looks something like this. Try using the tab keys or the screen reader.

See the Pen Modal with Accessibility by Prateek Jadhwani (@prateekjadhwani) on CodePen.

References

[1] https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role

[2] https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/

:focus-within pseudo class

Prateek Jadhwani — Tue, 15 Aug 2017 00:00:00 GMT

I guess I will start with a piece of code

See the Pen focusin and focusout demo in jquery by Prateek Jadhwani (@prateekjadhwani) on CodePen.

Here you will see in the JavaScript that you need to target the parent element of a particular element. Well, if you love writing logic in JavaScript, this might be a good solution. But thankfully, there is a new spec that lets you do the same using css. Yup, pure css. It is called the :focus-within pseudo class.

Here is the demo of this pseudo class.

See the Pen :focus-within demo by Prateek Jadhwani (@prateekjadhwani) on CodePen.

As you can see here, there is no JavaScript used in the demo. Instead the pseudo class :focus-within is used on the parent class to add the property.

This is relatively a new spec that exists on Chrome, Chrome Canary and Firefox Nightly at the time of writing. If you would like to read more about the spec, feel free to refer this link.

Network Information API

Prateek Jadhwani — Wed, 02 Aug 2017 00:00:00 GMT

With technology development in the past few decades, web apps have improved from running simply on a desktop computer to a mobile phone to an IOT device. With so many different clients, using so many different types of network, there will always be a time when a web app will need information i.e. the type of network being used or the downlink speed provided by the network provider. With this thing in mind, web browsers are now shipping with this new specification called the Network Information API.

At the time of writing, only chrome for Android supported this spec. So, if you are on chrome for Android, you should be able to see the demo working properly. But in case you are unable to see the proper data due to an incomplete spec implementation, here is what you should be able to see.

Querying for navigator.connection.type would return one of these values

bluetooth

cellular

ethernet

mixed

none

other

unknown

wifi

wimax

This is basically the type of networks that a user can be on.

Querying for navigator.connection.effectiveType would return one of these values. And their meanings.

Effective Type	Speed	Type of data downloadable
2g	Very Slow	Only Text and Small Images
3g	Good Speed	Can download high quality images and SD Videos
4g	High Speed	Can download HD Video and large files
slow-2g	Very Very Slow	Only Text

Effective Type

Speed

Type of data downloadable

Very Slow

Only Text and Small Images

Good Speed

Can download high quality images and SD Videos

High Speed

Can download HD Video and large files

slow-2g

Very Very Slow

Only Text

effectiveType can be used to know the user network speed.

All these objects in the navigator.connection API might help decide web apps with the type of resources that can be downloaded in order to provide user with a better user experience. For example, a web app might be able to decide whether to serve the user with a low quality video or a high quality video, or if a news article can be displayed in terms of text or with images.

So, without any further delay, here is the demo.

See the Pen Network Information API by Prateek Jadhwani (@prateekjadhwani) on CodePen.

Storage API: Persistent Large Storage for the Web

Prateek Jadhwani — Fri, 28 Jul 2017 00:00:00 GMT

TL;DR

Early 1990s -Internet

User downloads the site and views it on his screen. Reload the page, and resources get downloaded again

Early 2005 - App cache

User downloads the site, and saves the resources to be used again and again, until the browser looses its cache. Painful process. Needed hit and trial to make it work.

2010 - Local Storage

User gets to save important information in text format over long periods of time. Very easy to use.

2016 - Service Workers

User gets to save other types of resources and can control the response manually, including the type of file served. But can only save upto a max of 2GB and resources gets cleared if memory is less. Easy to implement.

2017 - Storage API

User gets to save resources on hard disk after querying for available space without loosing them even if the space is less. Best improvement to storage ever!!

Introduction

So what is Storage API, and why do we need it. Its simple. With improvement in time, the resources consumed on the web have changed drastically, both in type and size. And looses these resources when the cache clears makes user experience pretty bad. Storage API is the next step in the improvement of storing website resources on a user’s computer.

The Storage API lets the website developer query for the available size on the user’s computer. And if it has space, with user’s permission, it can store data in a persistent form, like on a hard drive.

The most common scenarios where this specification can be used is for like games (to store game resources) , or a song streaming site( to store songs), or an image editor site (to store layer information). Just imagine, storing these things on a user’s computer, and user being able to use them while being offline, say on a flight or with choppy network would make the user experience even better.

Now that we know what Storage API is and what it can do, lets move on to how to use it and demo. At the time of writing, the APIs worked only on firefox nightly

Demo

See the Pen qXOBKo by Prateek Jadhwani (@prateekjadhwani) on CodePen.

When you click on the "Check if navigator.storage API’s can run on your browser" button, it checks whether the APIs can run on your system. Refer checkAPI() function.

When you click on the "Estimate Available Space" button, it queries for the space available with the help of navigator.storage.estimate() API. Refer showEstimate() function.

When you click on the "Query For User Permission" button, it checks for persistent-storage permission for that particular origin with the help of navigator.permissions.query API and the on getting a status of either granted or prompt shows the dialog for Storage API. Refer queryForPermission() function.

When you click on the "Revoke User Permission" button, it revokes the permission granted by clicking in the previous button. In order to make this work, you will need to set the dom.permissions.revoke.enable in about:config URL and toggle the value to true. Once you have revoked the property, you will see the dialog again if you click on the previous button.

Conclusion

Storage API shows the true growth of the web. In all, it holds a really good future; especially for PWAs; but it depends on project to project how it can be leveraged upto its full potential.

CSS Rhythmic Sizing

Prateek Jadhwani — Thu, 13 Jul 2017 00:00:00 GMT

There are always times when you are building a page with multiple columns and the content is a collection of headings and images just the same way as shown below or its varieties.

See the Pen line-step-height demo by Prateek Jadhwani (@prateekjadhwani) on CodePen.

If you see at the bottom of the page, the text is a little bit displeasing to look at. If you are someone who like to see typography in a perfect way, that starts at the same line, and ends at the same height.

So, the question is what can be done make it look more pleasing? Well, there is a new css property for that. Its called the line-height-step. All you need to do is add line-height-step property to you container css with height more than that of the line height, and thats it

This is what it looks like with line-height-step set to 18pt. Notice the end of the article. They all end on the same line.

See the Pen line-step-height demo2 by Prateek Jadhwani (@prateekjadhwani) on CodePen.

If you are more interesting in this css property, feel free to read about it in this editor’s draft.

Payment Request API

Prateek Jadhwani — Fri, 07 Jul 2017 00:00:00 GMT

So I recently came across a browser specification called Payment Request API. Its rare to come across a totally new api while browsing the internet, so I decided to look into it. Here is the link to the Editor’s Draft for this specification in case it has piqued your interest.

Reading the Editor’s draft is confusing and tough. I am just glad that the chrome dev team wrote a really good documentation on this technology and how to use it.

At the time of writing of this article, chrome 60 is due release, but the PaymentRequest API is supported on chrome canary. So the demo has been tested on chrome canary and no other browser. So without any further delay, here is the demo.

See the Pen Payment Request API DEMO by Prateek Jadhwani (@prateekjadhwani) on CodePen.

Explanation

Coming back to the explanation of what I have done in the demo, if you are familiar wiht online payment, then it will be really easy for you to understand. Every checkout process requires three things, type of payment and payment information, the total amount (with tax, discount, shipping etc) and optional information like shipping, phone number, etc. And the good thing is, the Payment request API requires these three things in the form of three different parameters as objects.

Payment information

This is the way you can ask the payment Request API to support any payment card (credit or debit)

const supportedPaymentMethods = [
  {
    supportedMethods: ['basic-card']
  }
];

And this is the way you can limit the payment method to just visa and mastercard

const supportedPaymentMethodsTwo = [
  {
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard'],
      supportedTypes: ['credit'],
    },
  }
];

You can also add another type of payment systems like paypal or android pay. This link is helpful in configuring, but the process is same

Total Amount Information

You can provide the amount information in the following way

const paymentDetails = {
  total: {
    label: 'Total',
    amount: {
      currency: 'USD',
      value: 0
    }
  }
};

And you can add more information like shipping, tax etc in the following way

const paymentDetails = {
  total: {
    label: 'Total',
    amount: {
      currency: 'USD',
      value: 0
    }
  },
  displayItems: [
    {
      label: 'Shipping Cost',
      amount: {
        currency: 'USD',
        value: 5.75
      }
    },
    {
      label: 'Tax',
      amount: {
        currency: 'USD',
        value: 0.75
      }
    },
  ]
};

Extra Options

You can ask for more options from the user here in this object. You can either leave it blank or you can add the things that you require for the payment.

const options = {};

Or let’s say you want shipping information, you can go with this.

const optionsThree = {
  requestShipping: true
};

Getting the PaymentRequest Object

Once you are done creating the object for payment information, amount and options, you can create a PaymentRequest Object by passing them in the following way

const request = new PaymentRequest(
  supportedPaymentMethods,
  paymentDetails,
  options
);

Thats it!!!

Now lets say you have a Pay button and when the user clicks on it, it should let the users enter the payment information. So you can add an event listener on that button that would execute the show method of PaymentRequest API

This is how it can be done.

document.querySelector('.pay1').addEventListener('click', () => {
  request.show();  // this is a promise
});

Just remember that show() method returns a promise so it needs to be handled correctly in the following way

document.querySelector('.pay1').addEventListener('click', () => {
  request1.show()
  .then((response) => {
    // do stuff
  })
  .catch((e) => {
    console.log(e);
  });
});

So, now, clicking on the button will show up the pay dialog box where user can enter the details as shown in the screenshot below. After entering correct information, the flow goes into the then() block and when anything goes wrong, or if the user clicks on the cancel button, it goes to the catch block.

To close the payment dialog you can use the complete() method as shown in the then() block

document.querySelector('.pay1').addEventListener('click', () => {
  request1.show()
  .then((response) => {
    // do backend stuff
    console.log(response);

    //close the payment ui
    return response.complete()
  })
  .catch((e) => {
    console.log(e);
  });
});

Conclusion

This is a fairly new technology / specification and is continuously improving. But it takes care of a lot of things by simply moving everything in the browser layer. And in terms of code, it is fairly easy to implement. But feel free to look through the demo and source code if yo have any questions and/or concerns.

Building the web with position: sticky;

Prateek Jadhwani — Wed, 01 Feb 2017 00:00:00 GMT

Last week chrome announced that it is now supporting position: sticky. To tell you the truth, I never knew about this spec. Didn’t even know that it has been in firefox for a long time.

Good job Firefox!!

But when I heard the word sticky, it reminded me of one thing. Sticky Nav!!. I have seen it being used at a lot of places. And I have myself used a library called Waypoints to achieve the same. So this was a good use case for its application.

So, how to use it. Its pretty simple!! First you need to know which DOM needs to be sticky, then you need to decide at what location from the top it needs to be sticky. In my use case it was the navbar, which needs to be sticky when it reaches the top. So I added the following css to it.

nav {
  position: sticky;
  top: 0;
}

And that is it. Thats what it required to convert any DOM to sticky. No JavaScript, no event bindings, nothing!! Just pure css fun!!

See the Pen position: sticky by Prateek Jadhwani (@prateekjadhwani) on CodePen.

There is one more example that I would like to share. This is the demo in a parallax effect is achieved with the help of position: sticky

See the Pen Scroll Effect by Prateek Jadhwani (@prateekjadhwani) on CodePen.

Pancake-CMS Improvements - Week 3

Prateek Jadhwani — Tue, 24 Jan 2017 00:00:00 GMT

This is the third continuous week that I am writing the blog on my side project "Pancake-CMS". The reason that I decided to write weekly blogs is to make myself work on this project on regular basis. Not only it makes me wanna fight my laziness to work to the project, but it also gets my thinking hat on, as in to prepare what kind of work I have to do.

So yeah, here is the change-log for week 3 on Pancake-CMS

Preview Mode to

With this feature, the users who are creating and editing the content, say like adding translations to pages, will be able to see their changes in the preview mode; as in how the page would look like in production.

After the preview button is clicked, this is what it looks like.

Send content for approvals

Once a user is done making changes to the page, say like, done with translating the page, he/she can send the page for approvals by clicking on the save button. Having a second pair of eyes to content is always helpful, thus, this feature would help alot in terms of content workflow.

Addition of

This page acts more like a moderator’s page where the moderator can approve components or page translations. I am still playing around with the idea, like adding comments or user rights management etc. Lets see how it goes.

element

This element lets a moderator see a translated page with content changes. Here the moderator may approve or decline the content changes. Approving the translations move the node data to pages node so that the element is able to see the new content changes.

Conclusion

Well this weekend was a busy one. With "Gravity Rush 2" coming out,and me being sick for two straight days, I wasn’t able to work alot on the project. But this week’s tasks were mostly concentrated on content-workflows and bug fixes. With this week’s work, the full cycle of a Content Management System is complete. Now, a user can

create individual components,
build a template out of those components,
create pages out of those templates,
update translations and content of those pages,
send them for approvals and
get them approved.

There are tonnes of improvements that can be made to the project but I still need to work on some small and basic functionalities before I can move on to those. But if you are interested and would like to see how it all works, feels free to fork the project here.

Pancake-CMS Improvements - Week 2

Prateek Jadhwani — Wed, 18 Jan 2017 00:00:00 GMT

Last week I posted a blog about my current side project - Pancake CMS. And because of the long weekend, I was able to finish off substantial amount of work on the project. The updates involved creating a bunch of new elements and some bug fixes. Here are the details.

Adding and

What these elements do is that thay provide a list of templates and pages that have been already created by the user. Then, the authors or content creators can fork a template or a page into a new page using the options provided in this list.

Also, if there are no templates available, the user can create a new template by clicking on the plus icon. A bunch of other routing relating operations were added as well to support this feature.

Adding support for email login a.k.a element

Even though this is an open source project, and I was anticipating most of the developers to be using either github or google for logging, it seems, some enterprises or companies might need email login for their project. So, The project now supports login via email and password. The enterprises will need to set up users in firebase for this.

element

Previously, I was stuck at an architecture related problem and was trying to figure out the tradeoff with 3 different approaches. This weekend I finally applied a solution and the finally shows up a page in which user can edit content. I am using tinyMCE for now. I am not sure if this will be replaced by some other editor.

Lots of bug fixes

As with any software, there are many bugs and they need to be fixed. So, yeah, I ended up fixing a bunch of bugs as well. Some were UI bugs which were messing up the look and feel; some were blockers which had to be fixed in order to move forward.

Separation of User Component functionality of Pancake Component functionality

I ended up creating two behaviors which enhance the user components so that they can user properties and multi-lingual content in them. Earlier, some of this functionality was inside the Panckake’s components. Moving them out increased the performance, fixed some bugs and made it optional for inclusion by the user.

Conclusion

In all, it was a fun weekend. I would say, the project is now 70% complete. Some of the future tasks would be as follows

Adding content workflow, where it would follow a proper cycle of creation and approvals.
Adding versioning system where the content of the whole site can be stored with a proper version number.
Creation of a element which will target the release version of the site and will work as a single page app with every thing minimised or in terms of polymer - vulcanised. It would work more like a release version of the site which companies could deploy on to the web servers.

I am still not setting any deadline to the project, but for now I will keep on working it. If you are interested, feel free to look into the repo developer-console.

Pancake CMS - A new approach to CMS using web components and server less architecture

Prateek Jadhwani — Tue, 10 Jan 2017 00:00:00 GMT

Most of the content management systems that I have worked with so far, are slow AF. Not to mention that the ones that corporations use are painful for the developers. When I say painful, it means that the developer literally feels like committing suicide. The initial setup takes tonnes of time, then debugging environment issues, providing fast computers to developers etc. are some of the common problems that most companies spend a lot of time and money on. Its not worth it. Hence the Pancake CMS.

For the past one year I have been working on an open source project called the Pancake-CMS. It is a content management system which uses web-component libraries like Polymer for the UI and Firebase in the back-end. Just create a firebase account, add users, fork the github repo, update the auth keys and voila, you are good to go. Its that simple. The users can add other polymer elements / components dynamically, build templates that can be used to build pages and have various dialects and their associated content. Simple, right?

So, is it complete yet? No, not yet. There is a lot of work left in it. I wanted to create a "fork and play" type of software where the initial enterprise setup takes less than 10 minutes for every project/website/webapp. And 1 minute setup for developers. With that said, I have been using Cloud 9 as a developer environment, and it takes even less than a minute to start development. 90% of the time it takes is to install packages via Bower. Thats it!!

And why am I writing an article about a project that is still under development? Its simple, I haven’t written anything on my blog for a long time. Friends have been asking me if the site is dead. The answer is, not yet, I have been busy with work, videogames, and this project. And I wanted to bring some attention to this project. Just wanted to see if there are other people who are working on a similar approach or are willing to contribute to this project.

By the way, here are some cool screenshots of the current working project. If you want you can fork the repo developer-console and run it on your local, but my approach would be to run it on Cloud 9. Its easy, and fast there plus you can simply delete the workspace if you dont like the project.

Login Screen

Users can login using their Github or Google account.

Components Page

This shows the list of developer components. Selecting them will show the readme file associated with the element / component. The green border on the component name shows that the component has been installed via bower. Orange border shows that installation is pending.

A new component can be added by clicking on the plus icon and adding the component details.

A developer can install the project components by clicking on the download button.

Templates page

New template section comes with an empty drag and drop container with all the added components.

This will auto save the template.

Once you drag and drop the components in a template, this is what it looks like. Components can be copied/modified by a toolbar at the top right corner of every component.

It also uses css grid for further layout enhancement

And css-grid is awesome!!!

Localization Page (under development)

Second release of #svg2css and Using it to build a Donkey Kong stage

Prateek Jadhwani — Tue, 19 Apr 2016 00:00:00 GMT

Wait, What is svg2css?

Few weeks ago I created a project called #svg2css. What it does is that it lets a user create complex css3 animations with simple SVG path knowledge. A user needs to provide the web-app with SVG path info and in return it will generate a keyframe for the user. This is pretty helpful when it comes to complex css3 animations because human minds cannot create these complex keyframe information without hours and hours of manual computation. To know more about it, feel free to checkout out this blog about #svg2css.

You’ve piquid my interest, Sir. Where is this #svg2css Web App?

You can visit the webapp on the site https://prateekjadhwani.github.io/svg2css/. It is an open source project built using PolymerJS. You can find the source code of #svg2css on Github

Woah!! But whats up with the 2nd version?

The first version of the app could help a user create a new project, build complex css3 animations and save it to gist. After all that is why this project was built initially. But when people decided to build something cool and were not able to show the output to other people without pasting the files to codepen or jsfiddle, it was time to get rid of this extra step.

The second version of #svg2css lets the user save the SVG information which was created during the project as well as lets the user load a project from gist directly into #svg2css with the help of a simple link. Now users can simply pass around their project link and open it in a browser to open the project. Please refer this tutorial link in order to understand how to generate the sharable link.

So wait, does that mean that you actually created a Donkey Kong stage demo using #svg2css ?

Oh hell yeah!!! This is a screenshot of the donkey kong stage project. The animation is applied to the drum that moves from the top to bottom. and left to right.

But if you want to see a working demo, you can go to this link. Feel free to fork the project and or see the generated source code from the webapp on this gist

Interesting!! Do you have anything planned for the future releases?

Yes, I do have a bunch of ideas that I would like to implement in the future releases. I usually keep a track of these things under the issues section of this project. If you have any ideas that could help improve this web app or if you find any bug, feel free to file them here.

OMG!!! It's WebMIDI API!!!

Prateek Jadhwani — Mon, 28 Mar 2016 00:00:00 GMT

I am not even sure where to start, but new Web APIs like WebMidi is what helps me kill time. In this experiment, I am glad I didn’t have to buy a new hardware. (Yup, you have no idea how many Firefox OS devices I have in my apartment. Some bricked, some still alive, and one daily driver). Anyways, I wanted to test how the WebMIDI api works, and thankfully, I had a Midi Fighter 3d at my disposal, that I bought long time ago (dont even ask why).

This experiment involves creating a WebMidi Polymer JS element that can be used directly by any web app. The link to the github project is this. Or you can directly install it via bower using the following command:

bower install --save web-midi

I am also working on another element called midi-fighter-3d. It is not complete yet, I am still experimenting with it. But here is the working video of WebMIDI api in the demo file of midi-fighter-3d element that uses web-midi element.

I personally believe that this api definitely holds a good future; especially if we combine it with Web Audio api.

FYI : In case you are thinking of testing out the midi-fighter-3d element, I havent tested it on Firefox (I dont think it has been implemented in Nightly yet, I could be wrong). I only tested it out in Canary.

Creating Complex CSS3 Animations

Prateek Jadhwani — Mon, 29 Feb 2016 00:00:00 GMT

Recently, I wanted to create a css3 demo to show flickering of light and after trying it for a couple of times, I was able to build something recognizable. To be honest, it was crap.

Problem Statement

Thinking about keyframes and writing down the values of every keyframe is not something human mind can do. This is just too complex. Just imagine, how would you write css keyframes for an animation if you need to manipulate 3-4 properties for a div. Not possible at all, right? In order to achieve this, I had to go with something that doesn’t involve human computation at all. Something that can be computed by a computer. Yup, you are right, I am talking about JavaScript.

Temporary Solution

I instantly fell in love with the library mo.js. It does everything what I want. I just had to tell it what type of animation I want, and it made the element animate as per that instruction. Simple as that. Legomushroom did an amazing job of creating something so beautiful.

But we all know the problem with using a JS library in a project. UPGRADING THE LIBRARY!!! I have always found it difficult to upgrade the libraries when my project is targeting millions of users. What if the browser that I want to support is not being supported by the library any more? What if a feature that I am using is being depreciated by the library? So many What Ifs!!

Permanent Solution

I came up with a solution that could let users create keyframes based on the same concept that mo.js uses, but instead of creating those keyframes on runtime and performing animations on the fly, the `keyframes are generated on a webapp called SVG2CSS and can be downloaded as css files that can be included in the project.

This exporting of css animation keyframes makes a project independent of any library. Not only that, a user can export the files to gist.github.com which can be shared with anyone. All that a user needs to do is, create the div, and add animation SVG paths and their properties.

Here are some outputs of the demos I added in the project

SVG2CSS

I created this webapp on top of Polymer JS and hosted it on github pages. All that a user needs to do is create a SVG path for the property he needs to manipulate, and add the keyframes generated from this path to a css-class.

I have also explained all the concepts and tutorials related to this SVG2CSS webapp in this link.

In all, I was able to create really complex animations including the ones involving physics in very small time.

See the Pen SVG2CSS dropball demo by Prateek Jadhwani (@prateekjadhwani) on CodePen.

See the Pen SVG2CSS demo by Prateek Jadhwani (@prateekjadhwani) on CodePen.

If you still find it difficult to use, feel free to reach out to me. If you find any bugs are if you face any problems with the tutorials, feel free to file a bug.

Playing with CSS3 Filters

Prateek Jadhwani — Wed, 06 Jan 2016 00:00:00 GMT

Just wanted to see what happens when blur and contrast filters fight with each other.

See the Pen Gooey CSS3 Checkbox by Prateek Jadhwani (@prateekjadhwani) on CodePen.

Demo for mo.js Library

Prateek Jadhwani — Wed, 30 Dec 2015 00:00:00 GMT

What is mo.js Library

I like to call mo.js a motion/animation library since I have only seen its use in creating animations or motion based UI. More details about the library can be found at mo.js Website.

How to use this library (tl;dr version)

This library is pretty simple to use.

For example: to use the Path Easing functionality, you just need to provide the following details:

A path easing graph, usually in the form of a svg
Animation time
Property change code for a DOM element.

Of course this is the tl;dr version, so I am omitting a lot of optional parameters, but if you want, you can look for more details here.

Demo

Now that the basics of how to use this library is clear, I can finally show what the demo looks like.

The working demo can be accessed from this codepen demo. All you need is a touchscreen.

Or you can see the demo below:

See the Pen Elastic Menu by Prateek Jadhwani (@prateekjadhwani) on CodePen.

So what is happening in the demo?

In the demo, I am just manipulating a SVG path. The touch start input decides the y-coordinate of the stretch, and touch drag computations decide the x-coordinate of the stretch. Once these coordinates have been calculated, SVG gets rendered on the screen.

When the touch is released, the animation functions (close menu or open menu) kicks in, which then uses mo.js path easing functionality to perform the wobble animation.

References

I used the following references to understand the pre-requisites and implement this demo:

Firefox OS on a High End Device

Prateek Jadhwani — Sat, 22 Aug 2015 00:00:00 GMT

It all started with one tweet!!

My Phone Runs on JavaScript - great Firefox OS intro deck from @jedireza http://t.co/JksO42aP2B
— dietrich ayala (@dietrich) August 3, 2015

Here you can clearly see from the slides that Firefos OS runs on Sony Xperia Z3 Compact. And so the experiment began!!

Unlocking the bootloader

For someone who has never created android mods, or played with android, it was really difficult to understand the steps that had to be followed in order to install Firefox OS. And so the first step Unlocking The Bootloader turned out to be more challenging than I had originally thought. But in the end, the bootloader was unlocked, and I got to play with some of the bootloader options.

Building for aries-l

Now that the bootloader was unlocked, I decided to install firefox os on this device which had Android 5.1.1 or you can say the most updated version of Android.

aries-l is the code name for Sony Xperia Z3 Compact device running Android 5.

After following the MDN docs on firefox OS for aries-l build, I started the build process on my mac. But after downloading the files, the build process failed. After talking to the community, I found out that the build process for Android 5.0+ was broken. Not only that, the build process doesnt work on Mac at all.

Flashing the phone with 4.4

After realizing that the previous step was a total failure and talking to the people in community, I decided to flash the devices with Android 4.4.

Building for aries

This time instead of using a Mac to build Firefox OS, I used a linux machine. (incase you are wondering why I did not use a virtual machine, well I did, but the process kept on failing after pulling the files from the device.)

aries is the code name for Sony Xperia Z3 Compact device running Android 4.4.

And this time, it was a success. I was finally able to see the device running Firefox OS.

Some of the settings from the device are as follows

Setting Name

Value

Model

Xperia Z3 Compact(B2G)

Software

Boot2Gecko 2.5.0.0-prerelease

Outcome

The final outcome was a High End Device runnning Firefox OS.

Hello World 2.0

Prateek Jadhwani — Mon, 03 Aug 2015 00:00:00 GMT

You guys must be wondering what happened to my old site. Well, I got tired of all the maintainence work that I had to do every now and then. And all the money that I was spending on just a 100MB space. Plus, this way I can concentrate more on what I love to do, i.e. code.

I am pretty sure I won’t be importing any of the posts from by old blog site. Sorry about that :(

It’s a lot of effort for old technologies which I am never planning to use!! Although I will try to import some good ones.

In either case, I will try to keep you guys posted on the stuff that I have been doing or planning to do in the coming days.

Playing with Source Maps

Prateek Jadhwani — Mon, 13 Jul 2015 00:00:00 GMT

So recently, I came across the word eval-source-map in a retweet by someone I follow. At first I had no idea what that word meant. Looking into the functionality of that parameter I came across the concept of Source Map.

After doing some research, I realized that Source Map is actually a pretty cool concept.

What is Source Map ?

Let’s say you have a single compressed file in your web application that is live and you are just browsing through the functionalities of a module. Suddenly it stops working. Bug!!!! You just found a bug in your live website. You open the dev tools and try to find out where that bug occurred. But the code is compressed. You have no idea what variable or function name the error message in dev tools is pointing to. Wouldn’t it be great if you could do that. As in view the original files despite using the compressed code.

Apparently, Source Map can help you with that. Source Map, as the name indicates can map the source code of the compressed file for you. It places a link to a map file that contains link to all the files that were compressed. This link to the map file can then be picked up by the browser to display you the source code instead of the unreadable minimized file. This way, even if the error happened in the compressed file, the variable or function name will be mapped to the source file and can be used to deal with the actual problem.

How can I have the source map in my code ?

Actually, it is pretty simple. When you are compressing the files, you will need to provide the parameter to create source map. Let’s say you are using Closure for compressing the files. You just need to compress the files with an extra parameter --create_source_map file-name-for-source-map as given in the example below.

$ java -jar compiler.jar --js example.js --create_source_map ./example-map --js_output_file example-compiled.js

This will add the compiled file xample-compiled.js and the map file example-map to your folder. Now you can add the following statement at the end of your example-compiled.js file.

//# sourceMappingURL=example-map

And that’s it. You just added source maps to your file.

Okay, so how do I test it ?

Make sure your server is running and you are viewing your application on a browser. Also verify that you have the source map comment in your compressed file, the one that we added in the previous section. Open Chrome Dev tools and see if you have Source maps enabled.

Now refresh the page and verify the files in the source tab of the Dev Tools. You should be able to see the un-compressed individual js files.

Conclusion

I hope this explanation of Source Map was useful. I can already see so many applications of this concept in mind right now. I am sure that similar thing can be done with CSS as well. If you have anything to share about the concept of Source Map, I would love to hear it in the comments below.

CSS3 Checkbox

Prateek Jadhwani — Sun, 11 May 2014 00:00:00 GMT

A simple checkbox (okay, not so simple!!) made using css3. The inspiration came from this Dribbble Post.

See the Pen expswitch by Prateek Jadhwani (@prateekjadhwani) on CodePen.