The Web Log

The Problem Suppose you have created an HTML page with a table and some data in it, and now you want to work with that data in Excel. Well, the good news is that Excel can open the HTML page and automatically parse the HTML and convert it into an Excel spreadsheet. Your data table will be automatically populated in Excel cells. The bad news is that if you have a cell with only numbers in it, for example, a serial number with leading zeros, like this: 000245689 . Excel will format it as number and remove the leading zeros. You will then have to add back the leading zeros and format it as text to preserve the leading zeros. However, not only it's a hassle having to add back the leading zeros, but it's not always possible to know how many leading zeros were in the original number, if you have 100 numbers with leading zeros all with different lengths. You could check the original HTML 1 by 1 but it's very time consuming. The Solution Well, it turns out...

In the old days, when we wanted the scrolling effect to be animated, we had to write custom JavaScript to animate the scroll position one frame at a time. I had a blast learning how animations worked and how to animate things in JavaScript. Now, thanks to advancements in CSS, my skills are increasingly becoming obsolete. Introducing scroll-behavior This new (new for me) CSS property sets the scroll behaviour for an element so that when the scroll position is changed, the browser will scroll to the new position using the specified behaviour. By default, the behaviour is auto , which means no animation, and the browser jumps the scroll position to the new position instantly. If we change it to smooth , then the scrolling becomes animated. For our to top button, we want the whole page to scroll to the top and animated, so we will set the property on the html element. Code Example HTML First, we want to create our button in HTML: <button id="to-top-btn">...

It's easy to set the width and height in CSS. But what if we want the width to be responsive and height to be always in aspect ratio to the width? Ideally, we should be able to write something like this: .ar{ width: 50%; height: .3sw; } to set height to be 30% of self width and CSS would just take care of everything for us. Well, at the time of writing, there is no native CSS that can achieve this. Luckily, using an extra container, it's actually easy to achieve that. Fixed Aspect Ratio to Width HTML First, let's set up the HTML structure. You'll have one container element, and an inner element that you actually want to use. The container element will be used for responsive sizing purposes, and the inner element will be your actual element. <div class="responsive-ar-cnr"> <div> Whatever content, bla bla </div> </div> CSS And now the CSS: .responsive-ar-cnr{ position: relative; width: 50%; } .responsive...