JSX gives us a great way to handle HTML-based templating in JavaScript. Did you know you can use it without React?

Image for post
Image for post

I’m personally a big fan of JSX and love the way it allows me to split up and componentize my code. Even though JSX had been around before React, it wouldn’t have been nearly as popular without React picking it up. However, we can actually use JSX without React, and it’s not that difficult either.

The way React works is by configuring your bundler to convert JSX into calls to a createElement function. So for example:

However, most bundlers allow you to choose your own JSX pragma (function that will be in the place of React.createElement). …


Improve the user experience on your static sites with a tiny bit of JavaScript.

Image for post
Image for post

Single page applications have instant navigation. You click on a link and it changes views instantly. There might not be data and you might be shown a loading screen, but still, the navigation itself is instant, and I’ve always missed this in pure static websites. So, I thought I would try and implement something really simple to accomplish this nice boost in user experience.

The idea for the code is pretty simple. We need to get all the links on the page, check if they are internal, and if they are we need to add a click event handler on…


Intro Image
Intro Image

A few solid and easily implementable tips to step up your website’s type game

I try and make my websites look nice. I think the visual aspect of a website is very important especially to an average visitor. A regular person doesn’t care about what architecture you’re using to build your website, they care if it looks good and loads fast. And since typography is very important to a website’s looks, today we’ll be discussing a few ways you can immediately improve your web typography.

Typography is the base of all web design. Text is in my opinion the majority of a website’s content (couldn’t find any studies about this but I’m pretty sure…


Creating a unique experience for every visitor with generative design

Image for post
Image for post

Hey everyone! This is going to be a short post, but I wanted to show you how easy it is to have the color scheme for your website be generated randomly on the client-side. It’s a pretty interesting experience for the user, but I don’t think it makes sense for most websites, as most businesses (and even individuals) would want to stick to a more standard color scheme so they can stay consistent with their brand identity. However, if you find something cool to do with these accessible combos do share it with me I would love to see!

Now…


Building a sleek and user-friendly markdown editor

I’ve recently embarked on quite the arduous journey of building my own CMS from scratch. Why you ask? That’s for a different post 😊. However while working on this project I discovered an amazing data fetching hook called useSWR created by the amazing people at Vercel, so I wanted to show you guys how SWR makes it so much easier to make fast and User-Friendly applications.

It’s surprisingly easy so let’s get right into it. Since showing it to you with no context wouldn’t be very interesting, we’re gonna build a markdown editor that uses Firebase for authentication and storing…


Breaking away from create-react-app and learning to bundle my own assets

Image for post
Image for post

Hello everybody 👋, I hope you’re staying safe out there in these trying times. I haven’t written anything in a while due to this situation, but I thought why not share my new React workflow since some people might find it interesting, so here we go.

I’ve almost always used create-react-app as my react starter, sometimes Gatsby or Next.js for Static Sites and Server Side Rendering respectively, but mostly create-react-app for all my Single Page Apps. However, as some of you might know, the internals of create-react-app are abstracted away using the react-scripts package. This helps beginners like me get…


Build an awesome static site generator and Markdown-powered blog

Image for post
Image for post
Photo by Alex wong on Unsplash.

My blog was built using GatsbyJS, an awesome static site generator for React. Well, it was built using Gatsby, but I ended up switching to this project, as you’ll find out at the end. Gatsby was pretty easy to pick up and all I had to do was customize the gatsby-blog-starter to get something great.

But I was curious about how the generator worked, so I decided to try and build a simple, bare-bones static site generator using Node.js. Feel free to follow along with the code on GitHub. So let’s get into it.

Why Simple Static Site Generators?

I love static site generators a…


Typography styles, simplified

Image for post
Image for post

What’s Grotesk?

Grotesk is a CSS library and React component that aims to make web typography simple.

The reason I built it is because I’ve noticed I start almost every static website off with the same set of themes or typographic rules, so I decided to build a tiny library I can just plug into my next project easily.

Since I mostly only work on React applications and plain ol’ static websites, I made a React component and a CSS library.

Goals

The goal with Grotesk wasn’t to be an end all of styling — it’s supposed to be a very minimal stater…

Kartik Nair

Developer and designer striving to be better. Latest project: https://typemd.now.sh. Blog: https://blog.kartikn.me

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store