DEV Community: Aniket Chauhan

Dynamic Gallery with Netlify Image CDN

Aniket Chauhan — Mon, 13 May 2024 06:57:34 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

An interactive image gallery using Next.js, taking advantage of Netlify's powerful image transformation capabilities. Enabling dynamic resizing of images based on random Height and Fit values for Masonry Grid.

Demo

Link for live demo: Dynamic Image Gallery

Platform Primitives

At the core of this project is the utilization of Netlify's Image CDN. By integrating Netlify's on-demand image transformation features, I ensured that each image in the gallery is dynamically resized, formatted, and optimized based on the user's device and screen size.

Note: Photos provided by Pexels

Display interactive 3D models in Web/AR

Aniket Chauhan — Sun, 21 Nov 2021 13:17:33 +0000

Easily display your 3D elements on Web or in AR.

Prerequisites: You must be aware of the basics of HTML, CSS and JavaScript(ES6).

Approach:

Start with an index.html file.
Then we have to add <model-viewer> tag and script link in <script> tag as shown in example.

Here <model-viewer> is not default tag. It imported from script with type module not text.

Example:
It uses glTF & GLB extension models for rendering. You can zoom and rotate it.

Check out <model-viewer website for more information.

Try out your glTF & GLB models with <model-viewer> Editor.

Browser Support: <model-viewer> is supported on the last two major versions of all evergreen desktop and mobile browsers, plus the last two versions of Safari (on MacOS and iOS).

Comment below if you have any query or suggestion. I hope you’ll find this helpful, Thanks for reading 🙂

Generate a CSS selector path of a DOM element.

Aniket Chauhan — Tue, 16 Mar 2021 09:39:59 +0000

The task is to generate a CSS selector path of DOM element by implementation of 'generateSelector' function.

Prerequisites: You must be aware of the basics of HTML, CSS and JavaScript.

Approach:

First of all, you need to create an index.html file that consists of any markup code like shown in example code.
Create an app.js file that generate unique CSS selector as given below in the code.
In the app.js file, when any element is clicked, it will shown in browser console and the generated selector shown on web interface.

Example: In this example, In order to get that selectors are unique, We will use :nth-of-type Selectors. Click on the element to see selector.

Note: This function creates a long, but quite practical unique selector, works quickly.

Comment below if you have any query. I hope you’ll find this article helpful, Thank you for reading :)

How you’re going to write JavaScript

Aniket Chauhan — Tue, 01 Sep 2020 17:40:02 +0000

JavaScript is fairly unique in the programming world. With your typical
programming language you have to write it, compile it, link it and deploy
it. JavaScript is much more fluid and flexible. With JavaScript all you
need to do is write JavaScript right into your page, and then load it into a
browser. From there, the browser will happily begin executing your code.
Let’s take a closer look at how this works:

Writing

You create your page
just like you always do,
with HTML content and
CSS style. And you also
include JavaScript in
your page. As you’ll see,
just like HTML and CSS,
you can put everything
together in one file, or
you can place JavaScript
in its own file, to be
included in your page.

Loading

Point your browser to your
page, just as you always
do. When the browser sees
code, it starts parsing it
immediately, getting ready
to execute it. Note that
like HTML and CSS, if the
browser sees errors in your
code, it will do its best to
keep moving and reading
more JavaScript, HTML and
CSS. The last thing it wants
to do is not be able to give
the user a page to see.

Executing

The browser starts
executing your code as
soon as it encounters it in
your page, and continues
executing it for the lifetime
of your page. Unlike early
versions of JavaScript,
today’s JavaScript is
a powerhouse, using
advanced compilation
techniques to execute
your code at nearly the
same speed as many native
programming languages.

I hope you’ll find this article useful,
Thank you for reading.