css · geeky · php code

Lazy image placeholders that respect the actual image aspect ratio

While lazy loading of the images has been used by many performance conscious websites, the placeholder images are not usually the focus. Having placeholder images that respect the actual proportion of the lazily loaded images will reduce the “jumpiness” once images are loaded. Obviously in order to do this, you will need to know the… Continue reading Lazy image placeholders that respect the actual image aspect ratio

css · geeky

Flexbox center cropped responsive images align justified

Some of you might know that I’m one of main developers who worked on the bhg.com site relaunch of 2015. I enjoyed applying many responsive techniques to the website. I used freely the relative new FLEXBOX feature in CSS. One of the more challenging aspects of the site design is the homepage. The designer’s dream was… Continue reading Flexbox center cropped responsive images align justified

css · geeky

Responsive Selection/dropdown idea

Placeholder text in selection/dropdown cannot be manipulated by CSS right now. Sometimes we’d like the placeholder text to change based on how wide the container is. Goal To allow the same HTML look differently based on the width of its container. So here’s an idea to generate a selection/dropdown via a list and allow the… Continue reading Responsive Selection/dropdown idea

css · geeky · javascript

How I made tiny carousel swipeable

On parents.com, we previously used the jquery plugin tiny carousel to display various lists of links mostly used to track pregnancy month/week: For example: The concept is easy. You have a list of items that you want to scroll horizontally by using nav buttons. In our case, all of the content are lists of links.… Continue reading How I made tiny carousel swipeable