2023-09-11T05:58:14-04:00https://www.mjau-mjau.com/X3https://www.mjau-mjau.com/content/custom/favicon/favicon.pnghttps://www.mjau-mjau.com/content/custom/favicon/favicon.png2023 www.mjau-mjau.comwww.mjau-mjau.comhttps://www.mjau-mjau.com/tag:www.mjau-mjau.com,2022-01-02:pa2b81d

mjau-mjau Web Design Technology

2022-01-02T07:18:43-05:00tag:www.mjau-mjau.com,2020-08-31:p81f853

// mjau-mjau ranting and raving about the interweb thingy.

2020-08-31T03:01:46-04:00tag:www.mjau-mjau.com,2018-03-13:p8bd35f

It's been more than a decade since mjau-mjau.com was first introduced, and a lot has happened since then.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:p8ebf0f

The CSS viewport unit is a practical way to scale elements relative to the size of the device viewport. However, there is a mysterious bug in iOS Safari that occurs when content inside an element changes.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:pcdf8bc

I would like to suggest a method of massively boosting page speed, by preloading the entire website data object.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:p1daa2f

Rewind the web to 2002, when an emerging Shockwave Flash technology was taking the web with storm, offering app-like experiences before we had modern CSS and javascript frameworks.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:pe7bd43

With the availability of html5 and ajax websites on the rise, how to elegantly integrate Google Universal Analytics into single page javascript applications?

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:pb05db1

Cloudflare does not cache web pages by default, but by applying a page-rule, you can also serve pages at blazing speeds from the Cloudflare CDN.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2022-01-02:p8ee740

Files is a single-file PHP script that can be dropped into any dir on server, instantly creating a beautiful gallery of files and folders.

2022-01-02T07:19:49-05:00tag:www.mjau-mjau.com,2018-03-13:pbdbaa8

A variety of gallery layout concepts in action.

2018-03-13T10:38:50-04:00tag:www.mjau-mjau.com,2018-03-13:p37f59a

A selection of different gallery layout styles.

2018-03-13T10:38:50-04:00tag:www.mjau-mjau.com,2018-03-13:p2b7206

Images displaying in a vertical layout.

2018-03-13T10:38:50-04:00tag:www.mjau-mjau.com,2018-03-13:p252792

Images displaying in a justified grid.

2018-03-13T10:38:50-04:00tag:www.mjau-mjau.com,2018-03-13:p96fed5

Images displaying in a columns grid.

2018-03-13T10:38:50-04:00tag:www.mjau-mjau.com,2018-03-13:p5e1738

Images displaying in a standard grid.

2018-03-13T10:38:50-04:00tag:www.mjau-mjau.com,2018-03-13:pef995e

Images displaying in a slideshow.

2018-03-13T10:38:50-04:00tag:www.mjau-mjau.com,2018-03-13:pa16a40

Images displaying in a carousel.

2018-03-13T10:38:50-04:00tag:www.mjau-mjau.com,2018-03-13:p015804

Demonstrating a few more gallery layout variations.

2018-03-13T10:38:50-04:00tag:www.mjau-mjau.com,2018-03-13:p8c4660

Using split in combination with the vertical layout.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:p984045

A standard grid, using 200 px column width for smaller images in a tighter layout.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:p4a0396

A justified layout with larger images, more space, frames and captions.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:p05a674

A columns layout with larger images, more space and frames.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:p737d70

Slideshow layout in cover-mode, starts fullscreen, with dot-nav and crossfade transitions.

2018-03-13T10:38:50-04:00tag:www.mjau-mjau.com,2018-03-13:p742fec

Split carousel layout with tabs.

2018-03-13T10:38:50-04:00tag:www.mjau-mjau.com,2018-03-13:pb0551d

Screenbox combined with the vertical layout, where each image is scaled to fit within viewport.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:p622d3a

A few more examples, demonstrating specific features.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:pd34b92

The caption setting allows you to set context to overlay the images.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:pf0edc1

The tooltip setting allows you to display item context on mouse hover.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:pbcd236

Cropping images to specific aspect ratios is necessary for some layouts. It can also be used to create stylish layouts.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:pb3d4f0

Woohoo!

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:pda7a2c

Whoa, cool! Who is she?

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:p790df0

Compare two images side-by-side.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:p9256ae

Demonstrating various embedded elements in the page content.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:p72d27e

Information about website mjau-mjau.com and author Karl Ward.

2018-03-13T10:38:49-04:00tag:www.mjau-mjau.com,2018-03-13:p8fd677

Send an email to mjau-mjau!

2018-03-13T10:38:49-04:00