DEV Community: Neo Tang

Build UChart with KendoReact

Neo Tang — Sun, 23 Mar 2025 03:09:12 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

UChart
Provides out-of-the-box chart templates and supports custom chart styles to help you quickly generate beautiful charts

Demo

Link: https://kendo.uwarp.design/
Repo:https://github.com/tangweikun/kendo

KendoReact Experience

I use the Checkbox,Splitter,TabStrip,TabStripTab,Button,NumericTextBox,Notification,NotificationGroup,Fade,Dialog,Label,Slider,Switch on the Uchart, help me quickly build the UI part. KendoReact is very easy to get started with, It took me almost no time to use it in my projects.

🏆 Pick Your Champion - Netlify Dynamic Site Challenge

Neo Tang — Sun, 12 May 2024 06:25:06 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast & Build with Blobs & Clever Caching.

What I Built

Pick Your Champion is an interactive Quiz, player can pick the ideal type here.

Demo

🚀 Pick Your Champion

📸 Screenshots

Platform Primitives

Netlify Image CDN

Integrated Netlify Image CDN to dynamically manipulate images at the time of delivery.
Utilized parameterized transformation by adjusting parameters like width, height, quality, format, fit, and position in the image URL.

Netlify Blobs
Use it to store voting data.

import { getStore } from '@netlify/blobs';

export default async (req: Request) => {
  const { searchParams } = new URL(req.url);
  const gameId = searchParams.get('gameId');
  const roleId = searchParams.get('roleId');

  const store = getStore(`pick-your-champion`);
  const data = (await store.get(gameId, { type: 'json' })) || {};
  const preCount = data[roleId] ?? 0;
  data[roleId] = preCount + 1;

  await store.setJSON(gameId, data, {
    metadata: {
      lastModified: new Date().toISOString(),
    },
  });
  return new Response(data);
};

Netlify's fine-grained cache control capabilities

Implement custom Cache-Control headers, utilize the Netlify-CDN-Cache-Control header for edge caching, and demonstrate cache invalidation using cache tags.

First fetching timing cost

Fetching from the cache

Response Headers

Netlify's cache control capabilities is so good, make the API 10 times faster from the cache!!!

🎨 Logo Hunter - Netlify Dynamic Site Challenge

Neo Tang — Sun, 12 May 2024 03:55:18 +0000

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

What I Built

Logo Hunter boasts a user-friendly interface that allows visitors to effortlessly find app logos from the App Store. At the same time, it was also released to the Figma plug-in community, designers can click the logo to place it in a Figma file.
The project utilizes Netlify's image CDN to fetch and optimize images dynamically. By applying resizing and format optimization, the project creates visually appealing galleries based on user input. This implementation guarantees efficient image delivery and a smooth user experience.

Demo

🚀 Logo Hunter

🎨 Logo Hunter in Figma

📌 Features

Find any app logo from the App Store by searching with keywords and filtering by country.
Transform the logo by adjusting parameters such as width, height, quality, format, fit, and position in the image URL.
You have the convenience of either downloading or copying the logo
Insert the logo to the Figma file

📸 Screenshots

Platform Primitives

Netlify Image CDN

Integrated Netlify Image CDN to dynamically manipulate images at the time of delivery.
Utilized parameterized transformation by adjusting parameters like width, height, quality, format, fit, and position in the image URL.

  const url =
    'https://uwarp.netlify.app/.netlify/images?url=' +
    artworkUrl512 +
 `&fit=${config.fit}&w=${config.size}&h=${config.size}&fm=${config.format}&q=${config.quality}&position=${config.position}`;