How Trees With Ken Works

Interactive Christmas Tree Generator

Visit my Trees with Ken and make your very own Christmas tree! I enjoyed programming this cool little toy. I hope you have fun choosing shape, size, color, and decorations. It'll be as unique as you are.

Play around with my interactive tree builder dedicated to one of the world's favorite seasons. It's free, it's easy, it's waiting for you!

How the Frontend Works

ReactJS - I use this frontend framework to hang my webapp around. There's not much to say because it's so well-known at this point. My particular focus on it is how it keeps me thinking in terms of reusable components that do a single thing well.

Any user interface gets complex over time. It can be a easier to build, and maintain, by breaking it down into parts. Then composing larger parts from smaller ones. UI components are like little objects that maintain its own interaction behavior logic, data, and how to render it.

React also does a few things I like to make some rational sense out of the HTML standard. For example, calling the applied style attibute list className because the regular class attribute interferes with the JavaScript class operator.

I thought it was really weird looking mixing HTML into my JavaScript. React allows - demands - that with its JSX syntax.

Now it's entirely natural. It makes programming web UI easier because it's all "just there" - rendering and behavior code.

Back in the day, ten years ago, I suppose, we wanted a hard line between JavaScript, HTML, and CSS. As if it was a separation of concerns. I think we expected designers to open up HTML and CSS files to directly implement their PhotoShop screens.

Doesn't happen. Coders do it all. Might as well face facts and optimize for that efficient development flow. React enables HTML inline with JavaScript. That in turn references building block classes provided by TailWind.

Visit the ReactJS developer docs site for more info.

Tailwind CSS is a CSS framework that I've come to enjoy using. I suppose CSS developers have a specal name for the design pattern they implemented. We've seen a lot of proposals from very clever frontend web programmers for making CSS more rational, and more maintainable, over the last ten years.

For my money, Tailwind has figured it out. They took a look at the state of CSS syntax, and broken it down into rational and consistent names of parts. Small usable elements. I can use those to build up my interaction components while composing pages of UI.

They also do smart things to make responsive web breaking points easy, color palettes, deciding to use REMs, and a host of other things.

From my point of view, a group like the big brains behind Tailwind, can do this because we're pretty much done, as an industry, with frontend web development. Who is waiting around for CSS4 and HTML6. We got what we need on the web platform. Time to make it work.

Visit the Tailwind CSS developer docs site for more info.

Create React App is a code generator. It helped me spin up my React app from a blank code repo. It pulls in all the sorts of practical tools to make frontend web dev easier. I'm not even sure exactly what its dependency list is. Don't need to.

It gives me Babel for transpiling, Jest for unit testing, ESLint for code quality, has a local web server, and of course hooks into NPM for package management and task runners. Probably has some other stuff I'm not yet leveraging.

It's an accelerator. Look for tools like this that amplify your natural human skills in the right direction. Such tooks are especially valuable when we're trying to bang out an MVP, and time is limited, and expectations are high.

Visit the Create React App docs site for more info.

SVG stands for Scaled Vector Graphics. It's a subset HTML with the specific purpose of allowing us to "program" graphics. It's like issuing a bunch of draw commands to produce illustrations. Like a Christmas tree. Several SVG tags are used in this webapp:

• <g> to group components together
• <polygon> to draw a line along multiple points
• <circle> to draw a closed round shape
• <line> to draw a line connected by two points
• <ellipse> to draw a closed oval shape/li>
• <path> to draw an enclosed area defined by multiple points
• <defs> to contain a list of reusable definitions
• <linearGradient> to name color pairs used to fill shapes

You might be wondering what's the opposite of scaled graphics? I'll say pixels.

Most photos on the web are formed from pixels. Stuff like GIF, JPG, and PNG. They look fine at their native resultion. You know how they pixelate and get blocky when scaled up. You know how they drop detail with scaled down. SVG solves that.

Make no mistake, both have their proper application.

How the Backend Works

This is a webapp. The frontend code is made from CSS, HTML, and JavaScript. Just like every other SAAS you use every day. It's served from a web server.

It used to be okay that we would go to a big-box office supply store, or a company like Dell, and buy a computer, drive it to a data center, unpack it from its box, set it up, configure it, connect it to a network, install web server software, and load up all the data. That's how we once typically got a webserver. Some choose this way still today.

Ridiculous! Who has time for that? Why invest in server hardware you might not never use. Instead, use the tremendous leverage a cloud provider offers you. Free your precious brain power on solving real problems for paying customers.

Now, I know I have neither problems nor customers for my little Christmas Tree maker. Ha! All the same, I leverage the amazing power of Amazon Web Services (AWS) for my network infrastructure.

Route53 for domain registration and hosting through its routing table. It allows me to connect the dots from incoming user web browsers into the network resources I've defined in the AWS cloud. Particularly mapping my URL to the web server. In this case a CloudFront alias.

S3 for storing all of my web app's static resources like CSS, HTML, JavaScript, and a few image files. S3 is a key piece in my network topology because it operates as a web server for my index.html and all associated files. Really useful for simple one-page apps like my Christmas Tree Maker.

I have two S3 static web servers. One for the "bare" URL, which stores all the files. The second is the "www." URL that redirects to the other "bare" S3 bucket.

Certificate Manager gives me the necessary SSL to act in a professional manner. People coming to my website won't be alerted by the web browser that the connection might be insecure. Generally speaking it's piece of mind. My builder app doesn't take in any personally identifiable information, and it doesn't take important input like credit cards. All the same, visitors know the site is legit. The certificate includes the "www." and the "bare" URLs to my website.

CloudFront behaves like a CDN sitting in the middle of my network connecting the dots.

• It uses the certificate to provide the reassuring https:// capability.
• It takes files from the S3 bucket and caches them to respond faster.
• It's pointed to by Route53 to be the thing people "see" when they browse my website URL.

Grow Your Tree and Yourself

Why did I build this? For fun. I wanted it to exist.

The Trees project is a good workbench to improve my programming skills with SVG, Tailwind, and React. It's also a fantastic opportunity to lock-in my skills on the AWS network infra.

Use this information to build your own interactive webapp. Learn new things, solve interesting problems, and share with the world! Who knows what good stuff might happen.

More importantly, go design the perfect Christmas Tree!

Published November 16, 2022