Sunday, December 13, 2020

How to use flex to spread content vertically through all the page

How to use flex to spread content vertically through all the page.

Sometimes we want to have a group of elements that we want to stretch out to fill the whole page, to make it feel filled and balanced.

For the following suggestion, we'll use these elements:

<div class="container">

<div class="box"></div>
<div class="box"></div>

<div class="box"></div>

</div>

When thinking about CSS, the first thing that comes to mind is the display: flex; property and in a column direction; so it centers the content and stacks the element on top of each other:

.container { display: flex; flex-direction: column; }

/*To make the boxes distinguishable*/ .box { margin: 5px; border: 1px solid black; }

However this isn't enough. It renders 3 lines: the black borders of our 3 divs, with 0 height and 100% width, separated by their CSS margin.

To give height to these divs, we need to change 2 things:

First, we need to set the flex-grow for each of the box classed elements. This will allow these divs to grow if needed according to what the parent element wants, and;

Second, we need to set the height of the container. By default, an element will try to take the minimum ammount of size required to accomodate the inner content.

To fill up the whole height of the screen, we need to set the container to take 100% of the height of the parent elements. Unfortunately, the upper element (<body>) doesn't have a height set up, so it defaults to the minimum. So we need to set to 100% the height of the body and of the next up element, the html.

In the end the CSS will look like this:

.container { display: flex; flex-direction: column; } .box { margin: 5px; border: 1px solid black; flex-grow: 1; } html, body, .container{ height: 100%; }

To sum up, to stretch your content vertically on a webpage, you'll need to set the hight of the container and parent elements to 100%, add display flex to the container element, and have the stretchin child elements the flex-grow.

Saturday, November 28, 2020

Browser Video Capture, screenshot and compatibilities

Introduction

Hey all,

Ever considered to incorporate to your web page a video capture system to your page?
The process is really simple. We just need to add the video element to the HTML and a one-liner in the JS to have it started.

Sometimes not even that is needed!

Let's see how.

HTML Media Capture

This old method uses an HTML form extension to access a device's capture mechanism, such as camera, from within a file upload control.

<input type="file" accept="image/*;capture=camera">

This method is very simple and works well with mobile Chrome, but doesn't have support from some other mobile browsers, like Firefox, and is not supported by computers webcams.

WebRTC

WebRTC is an API that can be used by video-chat Web apps.

With this method we'll need the HTML5 element <video>, with an autoplayt attribute, to automatically display the video.

<video autoplay></video>

Then if you want to take a snapshot, just add a button and somewhere to display the image, either a canvas or an image. I'll showcase both:


  <button data-capture-video>Take Shot</button>
  <canvas></canvas>
  <img src="#"/>

Then when we press the button, we take the image from the video and display in our canvas/image element:


  buttonElement.addEventListener("click", () => {
   canvasElement.height = videoElement.videoHeight;
   canvasElement.width = videoElement.videoWidth;
   canvasElement.getContext("2d").drawImage(videoElement, 0, 0);
   imageElement.src = canvasElement.toDataURL("image/jpeg");
  });

This has the advantage that it's accepted in all major browsers, mobile and non-mobile, and allows the image to be edited. Like on CSS:


  .video--inverted {
      filter: invert(1);
  }

And edit the video element on HTML to:


<video autoplay class="video--inverted"></video>

One my notice that the image quality is not the best. This can happen for 3 reasons: Either the video element is compressing too much the webcam image, or the snapshot image compression is too high, or the camera hasn't got as good resolution as we'd expect.

If we (or anything else) is compressing too much the video image, we can add a constraint to force the image to be bigger


var constrains = {
    video: {width: 9999}
};

If the issue is the compression from video to image is too high, then we'd need to change the parameters on how we convert the image. If we want to use an image format with a lossy compression such as image/jpeg and image/webp, we'd want to increase the 2nd argument to a value near 1 (retain 100% quality)(the default is 0.92), like so:


imageElement.src = canvasElement.toDataURL("image/jpeg", 0.95);

Here's a fiddle with some of the above code.

https://jsfiddle.net/sesteves86/956acpx2/34/

Resources

https://www.html5rocks.com/en/tutorials/getusermedia/intro/

https://www.w3.org/TR/html-media-capture/

https://developer.mozilla.org

Monday, June 8, 2020

Personalize Radio Buttons

Hello all,

When we're creating a webpage, we first put the skeleton of the page with HTML, then add some shiny skin with CSS, and finally add some muscles with JS.

We can add styles (skin) to every HTML element (bones of the skeleton).... except for some form controls. And on this post I'm going to discuss how to sort it out for the radio button.

First let's get to know the radio button. It's an input element with the the type "radio". Usually we add a name attribute so only 1 radio button is checked at any given time, a value attribute to be read by the JS and is usually paired with a label element.

<div>
    <input type="radio" name="groupName" value="option1>
    <label for="option1">Option 1</label>
</div>
<div>
    <input type="radio" name="groupName" value="option2">
    <label for="option2">Option 2</label>
</div>

And we will get the following output:


Now the styling. 
We can't add stylings to the radio buttons and we don't want to create from scratch some new radio buttons (see why at the bottom of the post).

The hacky way forward is:
- to create a new element that we can edit, like a <span>; 
- hide the radio button element; and
- wrap everything on the label, so the radio functionality persists and is triggered whenever we click on the label.

So, it will look like this:

HTML
<label for="option1" class="container">option1
	<input type="radio" name="groupName" id="option1">
	<span class="checkmark"></span>
</label>
<label for="option2" class="container">option2
	<input type="radio" name="groupName" id="option2">
	<span class="checkmark"></span>
</label>
For the CSS, the bulk of the work will be on styling on the checkmark for the different situations, like when it's checked, not checked, and being hovered on:

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  user-select: none;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
  background-color: #bbb;
}

/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
  background-color: #38f; 
}


/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px; 
  width: 32px;
  background-color: #ccc; 
  border-radius: 12px; 
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
	content: "";
  position: absolute;
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: 8px;
  left: 11px;
  width: 10px;
  height: 8px;
  border-radius: 5px;
  background: #ddd;
}
This will produce an output like this:


It does seem a lot of work (and it is), but it's better than creating a custom component for 2 reasons: 
1- It's more accessible. People using a screen reader will more easily understand what's happening, and 
2- We don't need to create the JS for this functionality, so less work.

I hope this was helpful and have a great day ;)