Kushagra Gour- Creativity freak!

Vibe-coding on Mac mini from anywhere

2026-05-06T00:00:00+00:00

This post is about me wanting to use my Mac mini whenever I’m away from it. This use case started with me wanting to work from another room. Since all my work (and in-progress) is on the Mac mini (and it is not movable), I wanted to keep working on the same machine. (PS: yes I know there is GIT). And working these days means just prompting, so even a reliable SSH connection works. So here is how I did it.

You need to enable remote SSH on your Mac mini. Open System Settings → General → Sharing and turn on Remote Login. That’s it — your Mac mini is now accepting SSH connections on the local network.

Step 2: Make SSH work outside your home Wi‑Fi (use Tailscale)

You still won’t be able to SSH into your Mac mini if you are away from your location, meaning you are not on the home Wi‑Fi. You basically need a public IP for your Mac mini. That’s where Tailscale comes in.

Tailscale gives you a secure private network where you can put all your devices: your Mac mini, your laptop, maybe your phone. Then each device can talk to the others over that private network — as if they were all sitting on the same Wi‑Fi, no matter where in the world they actually are.

Install Tailscale on both your Mac mini and your client device (laptop, phone), sign in with the same account on both, and you’re done. You’ll get a stable hostname/IP for your Mac mini that works from anywhere.

Step 3: Prevent the Mac mini from sleeping (so it stays reachable)

Cool, so now you can SSH to your Mac mini from anywhere in the world.

The issue is that most of us have a sleep timeout set on a Mac mini. This means that after a while the display turns off, then after some time the hard disk turns off, and the system goes to sleep.

When that happens, your SSH connection breaks and your Mac mini won’t be accessible anymore. You won’t be able to set up a new SSH connection either.

So we need to do one more thing to prevent it from sleeping. Run this command on your Mac mini:

sudo pmset -a disablesleep 1

This makes sure your Mac mini does not sleep even after the display turns off. After some time the display will turn off, but don’t worry — at this point it will still be SSH-able.

Just make sure you don’t put your Mac mini to sleep explicitly (Eg. from Apple menu > Sleep). In that case, it won’t be accessible.

⚠️ One important thing: don’t run this command on your laptop.

Laptops can be inside bags while they are on. If they don’t go to sleep when the lid is closed, ventilation can be blocked and the laptop can heat up.

This also applies to your Mac mini if it’s not properly ventilated or kept in a cool area. If so, avoid this.

Step 4: Keep work running even if your client device sleeps (use tmux)

Now you can SSH to your Mac mini from anywhere in the world and your Mac mini won’t sleep. It will always be accessible over SSH.

But what about the machine you are SSH-ing from?

In my case, it was my MacBook Air. I can SSH into my Mac mini and then open Claude Code, give it a prompt, and the thing starts running.

Now let’s say I have to go somewhere and I close the lid of my MacBook Air. That will put the MacBook Air to sleep after some time, and then the SSH connection will terminate. That means the Claude Code run would also stop midway, and your work will be lost.

We need to do one final thing: when you SSH to your Mac mini, you should use the terminal through tmux.

tmux is a terminal multiplexer that also has state persistence. If you run a session through tmux, anything that is going on will keep running even if the SSH connection closes.

That gives you two benefits:

Your MacBook Air, or whatever client device you are using, can go to sleep at any time. You can just walk away or shut down your client device, and your Mac mini will keep running Claude Code (or whatever you’re running) even if the SSH connection terminates. Next time you SSH back in, you just attach to the tmux session and pick up exactly where you left off.
A tmux session can also have multiple panes, just like you have in terminals like iTerm and Ghostty. To work on any project, you can maintain a tmux session per project which probably would have multiple panes for say, claude code, your server, vim etc etc. As soon as you attach to a particular session, all the panes related to that project — which you had opened last time — open up in one go. This is so cool to get in that working state very quickly. Also applies if you are working on a single machine too.

PS: Credit to this tip goes to Ayush Soni who suggested this at the IndieHacking Retreat when I refused to close my laptop lid! 😆

That’s it. Three small pieces — SSH, Tailscale, and tmux — and your Mac mini quietly becomes a Vibe-coding machine you can use from anywhere, with work that survives sleeps and disconnects on either end.

Bonus update: try Zellij instead of tmux

tmux is actually painful to use sometimes. I don’t like its default keyboard shortcuts. You can’t easily copy things from there. Even when you get it working, it works only half the time. No good mouse support either.

Ayush recently suggested a newer terminal multiplexer called Zellij. I gave it a quick spin and am liking it. So try that too.

AI and my direction

2026-02-16T00:00:00+00:00

For the past five or six months, I’ve been thinking deeply about the recent changes happening in the world of AI — what it means for how we work today, and what the future might look like.

PS: If you haven’t paused to reflect on this shift yet, you might be missing something important.

During this time, I’ve been re-evaluating my own style of work and how I can better leverage AI, while also thinking about what my future could look like. I had been meaning to write about these thoughts for months, and finally got inspired to put them into words after reading this post by Matt Shumer.

This article is essentially a collection of those reflections.

AI Anxiety

Let’s begin with a term I recently saw somewhere on the socials — AI anxiety.

It’s obvious why people feel anxious about AI. When something is being developed that can potentially do exactly what you do for a living — and possibly do it better — fear is a natural reaction. Interestingly, I don’t personally feel that anxiety, and I spent some time asking myself why.

I think it comes down to how I define who I am. I don’t see myself strictly as a developer or tied to a single profession. I see myself as a Builder — someone who currently builds software, but isn’t limited to it. I equally enjoy creating art pieces, designing in-person experiences, woodworking, making music, and many other forms of creation.

Even if software development eventually becomes something AI can fully handle, it wouldn’t feel like the end of what I do. I would simply build something else. And that feels completely fine.

In a way, passions should be diversified just like an investment portfolio. You don’t want a single failed investment to collapse your entire portfolio, and similarly, you don’t want one skill or passion becoming obsolete to bring down your entire career.

Diversify.

A Paradigm Shift: Personal Software

Software is what I spend most of my time building, and a major shift is already underway.

We are writing significantly less code today. With the latest AI models, in many cases you can avoid writing code entirely. You can simply describe the software you want in a few sentences, and the model can generate a working implementation. And this capability is improving every day.

This leads to an important question:
If everyone can create software for themselves, will people continue buying software made by others?

I suspect the answer is increasingly no.

Soon, individuals may be able to simply describe what they need and receive polished, robust software tailored specifically to them. One common counter-argument is that people will still value “taste” — beautiful design and thoughtful craftsmanship created by humans.

But from what I’ve seen, AI models are already beginning to demonstrate what we traditionally call taste. And given the exponential pace of progress in AI, it may not be long before AI closely replicates the aesthetic judgment we associate with human designers today.

What I believe will happen is this: powerful AI systems will build highly reliable personal software for each individual. Software will become so trustworthy and personalized that traditional visual interfaces may become less important. Instead of navigating apps, you might simply speak or write what you want done and receive the result — likely through a simple conversational interface.

And when the interface itself starts disappearing, the importance of visual taste may diminish as well.

What Will Matter: Experiences and Human Interaction

If software becomes personal and infinitely customizable, does that mean people will stop building software for others?

I don’t think so.

There will still be software that people use together — software that cannot be reduced to simple CRUD functionality. These will be shared experiences.

Even if AI can build perfectly tailored software for an individual, it cannot easily recreate the experience of thousands of people participating together in something meaningful. As the world becomes increasingly digital and potentially more isolated, people will seek experiences they can share with others — both online and in person.

Human interaction itself becomes the value.

CSSBattle

This belief strongly connects to CSSBattle.

CSSBattle isn’t special because of its technology or gameplay mechanics alone. It is what it is because of its players. The real value comes from the experience of competing in real time alongside other human developers.

Earlier, I mentioned a future where people may not need to write code manually anymore. Yet I believe there will always be passionate programmers — people like me — who can get work done with AI but still feel something missing when they no longer write code by hand. Not because they can’t, but because the future simply doesn’t require it.

When that happens, CSSBattle can become a place where developers come to chill, write code, compete with other humans, and enjoy the craft itself.

That’s why I believe CSSBattle will be incredibly valuable in the future. I’m very bullish on it, and I’m not giving up on it anytime soon.

Physical Products and Experiences

This year, my direction isn’t limited to CSSBattle or software alone.

I want to move more deeply into physical products and real-world experiences. My plans include organizing in-person CSSBattle conferences, building a clothing line inspired by ancient Vedic heritage, and creating a calm, serene café of my own — among other ideas.

Conclusion

To summarize: I’m genuinely excited about the future and the possibilities that AI has unlocked.

Rather than seeing AI as something that replaces what we do, I see it as something that reshapes where we direct our creativity and energy.

And I look forward to seeing you at one of the experiences I launch soon.

Getting started with Chrome's Inbuilt AI

2025-04-14T00:00:00+00:00

I recently wanted to tinker with Chrome's in-built AI, that uses the Gemini nano LLM. Though there are several articles/videos around getting started with it, I am still writing this guide post because most of them are dated now. Because the in-built AI is an experimental feature, it is undergoing very rapid iterations and so within a few months, all the information out there becomes old and invalid - even the official docs.

So if you want to get started with the in-built AI on Chrome (on Apr 14, 2025), follow along!

Browser version

In-built AI isn't limited to dev/carany channel anymore. You can try it on stable Chrome too.

The experimental flags

Switch on the following 2 experimental flags from chrome://flags

Enables optimization guide on device - Set it to Enable BypassPerPerfRequirement"
Prompt API for Gemini Nano - Set it to "Enabled"

And now relaunch your Chrome.

Downloading the model

If the model is downloaded or downloading, you would see "Optimization Guide On Device Model" listed on chrome://components/

For me the model, didn't download automatically, so I saw nothing there. In that case, first check if the LLM is available to you or not. Open the developer tools, go to Console and run:

await ai.languageModel.availability();

It should return "downloadable". If yes, run the following:

await window.ai.languageModel.create({
  monitor(m) {
    m.addEventListener("downloadprogress", (e) => {
      console.log(`Downloaded ${(e.loaded / e.total) * 100}%`);
    });
  },
});

This basically triggers the model to download on your machine and also adds a listener to the progress event of this process - so that you know when it has finished downloading.

Note: Even during download, if you visit chrome://components/, you should now see "Optimization Guide On Device Model" listed.

Using AI

Once the LLM has downloaded, you can verify it by running the following in the developer console:

await ai.languageModel.availability();

and it should return "available"! ✅

Now, run a small example to test out the new AI:

const _ai = await window.ai.languageModel.create();
await _ai.prompt("a small poem in 100 chars about dog");

Running a small example to test Chrome AI.

That is it! Have fun!

Mistake - Making an async function sync

2024-06-06T00:00:00+00:00

I recently migrated Firebase to the latest version in WebMaker app. As part of the migration the way database instance is retrieved changed from asynchronous to synchronous. Earlier, I had a function to get the db instance, like so:

let dbPromise; // a promise that gets defined somewhere
async function getDb() {
  return dbPromise; // resolved to a dbInstance
}

And then wherever I wanted to do some operation in the DB, this is how would use the above getDb function:

async function doSomethingWithDb() {
  const db = await getDb();
  return getDoc(doc(db, "colId/userId"));
}

Then I did the migration to latest Firebase which removed the async part in getting the db instance. So it was time to make a few things synchronous. To keep changes minimal, I made the getDb function return the dbInstance directly, instead of a promise:

async function getDb() {
  return dbInstance;
}

And since I wasn't returning any promise now, I could use the db without an await:

function doSomethingWithDb() {
  const db = getDb();
  return getDoc(doc(db, "colId/userId"));
}

But this didn't work! I got error from Firebase about wrong database instance being passed to it. But I was passing the same thing which I got from promise resolution earlier, being returned directly from getDb now. Oh wait...I spotted the mistake I made. It doesn't matter what you return from an async function, it always returns a promise. I had missed removing the async keyword from the getDb function and so it was still returning a promise. The fix was simple - changing the getDb to:

function getDb() {
  return dbInstance;
}

And that fixed it!

I’ll see you again with my next mistake! 👋🙂

Google maps street view hack

2024-05-23T00:00:00+00:00

I want to share a Google maps hack I executed recently. I think it was a super fun one! 😄 So story goes like...there is a mobile/laptop repair store in a market around 8kms far from my place. My brother had given a laptop for repair there but accidently misplaced the receipt that store gave and hence their contact number. Now he wanted to contact that store to get an update and doesn't have their contact number anymore! What do we do? Let the hacking beging! 😎

Chapter 1

Obviously I opened Google maps first to search for mobile and computer repair stores in that area. I know the exact geolocation of that store. So I could localize my search. Now, remember that we don't even know the name of that store 😅 Since I didn't know the name of the store, I couldn't search it by name. So I checked out all stores that came in my search, checked their pictures to identify.
Unfortunately, that store isn't listed on Google and hence no luck in the search!

Chapter 2

While wandering in Google maps, the street view icon caught my attention. I had played with the street view before one or two times but never for any use case. In fact, when I tried it this time I actually realized it worked pretty good in my location (Uttar Pradesh, India) too!
As soon as I entered the street view, I realized I can just walk down the street to that shop! Good thing is that in India, almost every shop has their contact number on their signboard. Ray of hope! ⛅ And so I started walking happily (and digitally) in the market streets to reach that shop and there it was. But wait! That particular shop doesn't have their contact number on their sign board...what!!!

The target shop with its signboard and name on it.

But, their name was on the signboard. Ah...at least some information.

Chapter 3

The next immediate thing I did was to google the name of the store. And weird enough, the store was listed on Google. Not sure why it didn't shop in the map search earlier. But this was of no use because they had not put their contact number in the google listing. 🤦🏼‍♂️

Chapter 4

I was clueless now. I didn't want to drive down the market just to ask the store for an update! Then I started thinking if I know someone there who could fetch me the store's contact number. At one point I was even thinking of asking in my society's whatsapp group if anyone is going to that market...and ask them a favour! 😆

Just then it clicked me - why not ask another shop besides it to get my store's number?? Yeah, why not! Most people would say no, but someone might just agree. To maximise my success chances here I felt that only a small roadside thela (mobile/portable shop) person could be helpful here. Someone who is nearby to that store and also mobile n humble enough to do me a favour. I remembered there are a lot of such mobile street-side tempered-glass shops. They could be my saviour!

So I went inside the street view again, started walking down the street from the target store...in search for that tempered-glass thela. And there it was - I had found one! This wasn't enough though. That thela had to satisfy either of the following 2 conditions for me to contact it. Either:

have itself listed on google
or have a signboard and its phone number on the signboard

It wasn't listed on Google...as expected. Fortunately, it had a small signboard and...its phone number written on it too! WOhoo! First hundle cleared! 🏁

This is that shop:

The small tempered-glass *thela* near the target store.

Final chapter

The final step was to contact this shop person, ask him for a favour and hope that he agrees to it 🤞🏼. I called the shop, explained my situation and requested him to get that store's number. I even said I am ready to pay him for his time...but he humbly said no to it. 🙂 He said I am just setting my shop for the day and will get the number in half an hour. I waited impatiently like a child waiting for exam results 😅.

And almost after half an hour, I got a whatsapp message from the shop guy - he had sent me a number! 🥳 Jackpot!

I am so happy with this hack I pulled off sitting on my couch at home. Made me wonder (yet again) how technology has enabled us so much! This was fun and hope you had fun reading it too! Until next time. 👋🏼

My first Woodwork

2024-03-18T00:00:00+00:00

Sometime back I wrote a post on this blog about things I want to do once I gain financial freedom. One of those things was opening a Wood workshop. Today, I am pleased to report that I have finished my first wood working project! This is what I made:

The finished rope hanging solid wood shelf

For those who are interested about how I made this, read on!

Backstory

My wife recently started trying her hands on handicraft gifts. Her table soon got occupied with multiple accessories, tools and what not - leaving her very little space to do actual work. I wanted to solve this for her and thanks to my deep interest in woodworking, I decided to build the solution myself! 😎 And so started this fun journey of BYOS (Build your own shelf)!

Type of shelf

I first wanted to decide what kind of shelf to build. I saw a bunch of videos on YouTube and searched Amazon to understand different kind of shelves out there - mainly in terms of how they attach to the wall. Some hang, some get screwed, some need brackets etc etc
Based on difficulty level and resources required, I decided on the following:

The design I decided to build

I liked this design for a few reasons:

It was very easy on the wooden plank side (nothing required there) apart from a slight groove at the bottom for keeping brackets in place.
Wooden plank can be easily replaced with a longer one in future.
Brackets are easy to hand on wall

PS: This wooden shelf is available on around INR 500, for 2 shelves. But its not solid wood.

The wooden plank

Immediately after, I starting searching for a solid wood plank. I checked out some online stores, but they had too expensive ones. So I thought about checking with some local wood workers near my place. But before I could do that, I had a chance to visit our gaushala (farmhouse) recently. And it couldn't have been a more fortunate visit - I found a good and old plank of solid wood there! I was so excited to get it - it was of perfect length for building 2 shelves! 🤩

The old wood plank I found at our gaushala

Getting the plank ready

The plank had to shaped down first to remove old paint and make it flat. There is a local furniture shop here from which we have got quite some things made in the past. I decided that I would go there and request the owner to let me work in their workshop. I would just use their tools and nothing else. Worst case I thought if they didn't agree to it, I would just ask them to do it for a price.

So on a fine weekend, I put the plank in my car and went to that furniture shop, asked the owner and he agreed! At their workshop I found the carpenter who had also built an almirah for us recently. I had a little chat with him and he showed me the tools there.

I got down to the first part - removing old nails from the wood. Some nails got removed, but some just broke and left part inside. The carpenter there helped me with this. Next was the smoothing the plank. This is done using a tool called Hand Plane (Randa). It was my first time using this tool. Fun fact, there was just one Hand plane in the workshop. So the carpenter kept asking me for it, for his own work. And everytime he used it, I watched him carefully and learnt something new about how to use that tool. Still it took me good 1.5 hours to smooth one side of the plank and the sides. I left the other side because it was anyways going to be hidden from view.

Smoothing the plank with a Hand plane (Randa)

I was so amazed to see fresh wood coming out every minute during this process...felt like magic! Once the wood was smooth enough, I got it cut into 2 pieces - one for each shelf. Here is the end result of this phase:

Ultra-smooth 2 planks ready!

Some more finishing

While I was leaving that workshop with my two wooden planks, I saw one of the carpenters sanding some wood. I had seen this thing in woodworking videos. Sanding is basically smoothening the wood some more with hand sand paper (or machine). I asked what kinda sand paper it was...he said it was No. 80. So while my wayback home, I got some materials:

2 Sand papers of No. 80
A Teak finish wood polish

After some sanding, polish and then some more sanding, I got this:

Sanded and polished 😍

The brackets

According to the design, I needed 4 metal brackets. I asked a local Iron fabricator to make such brackets but he asked me 200 rupees for one such bracket i.e. 800 for 4 - much more than the full cost of shelves on Amazon! 😅 So that way didn't work. I started thinking alternative to metal brackets and the next best thing was - Rope.

One way was to simply replace the bracket with rope but that would still need the grooves made on the wood - to keep the rope from slipping off the plank. Moreover, I wasn't sure if the plank would now stay horizontal on that flexible shaky rope. So I changed a bit. Instead of rope going around the wood, I decided to drill holes on 4 sides of the plank and hang the plank though rope, with rope itself handing on wall hooks.

Drilling work begins

4 holes and some rope-tying later, the shelf was ready to be hanged! I liked this way as it allows to easily asjust the plank's alignment through the rope knots.

Shelves ready with ropes tied on both sides

Now all that was required was to hang the shelves at the spot! So I drilled some holes in the wall, inserted some hooks and voila!

The finished shelf!

The finished shelf, from the side

I am so happy I could start on my dream and also with what I could build in my first try! 😃 I hope to continue to build more whenever I get a chance. Thanks for reading 👋🏼

Mistake - forgot to deploy indexes

2023-10-08T00:00:00+00:00

Now that we have a staging environment for CSSBattle, we develop all features there i.e. local frontend is connected to staging project on Firebase. This feature involved a firestore security change. I tested the whole thing on local and then deployed it to production. Since it involved a security rule change, I made the same change on the production project too. And then, it broke on production!
I couldn't figure out why it was not working. There was nothing wrong in the production data too! Finally I had to ask one of our users for any error that might be showing in their developer console. And there it was - there was a missing index on Firestore. The feature also required a new index to be created in Firestore, which I did in the staging project but forgot to create on production.

Learnings and fixes

I still make changes to Firestore security rules and indexes manually from the web UI. Firebase has a nice way to have all the configs in source files and deploy them from the command line. Had I used the source files method 1) I would have seen the diff in the PR 2) Automated the deployment of rules and indexes from command line.
I had to ask a user for the error in console 🤦🏼‍♂️ This actually reminded me that we have Sentry on the frontend but since I haven't made use of it ever I totally forgot about it! Need to be more active there.

See you in my next mistake!

CSS-only 3D card

2023-09-03T00:00:00+00:00

In this post we'll build a 3D card with just CSS. Yes, just CSS! This is sort of an extension to my last post - "Scroll-based 3d cards". So if you haven't read that already, I recommend you read that first.

Few more things about what we are building here. It will be a 3d card that can be rotated and viewed by same gesture as if you are scrolling the page - horizontally and vertically. This used scroll-linked animations feature in CSS, which as of writing this article is only supported in Chrome & Edge. See the final demo.

1. Get the Card

<div class="card-wrap">
  <div class="card"></div>
</div>

.card-wrap {
  display: grid;
  place-content: center;
  inset: 0;
  transform-style: preserve-3d;
  perspective: 800px;
}
.card {
  border-radius: 1.5rem;
  height: 80vh;
  aspect-ratio: 9 / 16;
  background: url("https://cdn.midjourney.com/f87ef132-b7e1-40a4-9e7c-0bf90e7e7724/0_3.png");
  background-size: cover;
  box-shadow: 50px 50px 30px rgba(0, 0, 0, 0.3);
  transform: rotateX(10deg) rotateY(10deg);
}

Few things about the code above:

.card-wrap solves 2 purposes here - acts as a container to center our card. And also to give a 3D perspective to our card.
.card is a usual card which takes 80% of viewport height and has 16:9 aspect ratio. It has a cool background image which I generated through Midjourney for this demo.
For now the card has a static shadow and rotation which we'll make dynamic as we go!

Here is what we get:

2. Bring in some scroll

This is an interesting illusion! As I mentioned before, we'll enable card rotation through scroll. Which means if you have double finger scroll gesture on your track pad, you can very intuitively use it to explore the card from all angles. But, how do we get scroll on the page,...there is nothing overflowing from our page? For that, we'll create a dummy invisble element which is so big that it overflows out of our viewport.

This creates another issue that our card will also glide along with the scroll. But we don't want that. So what we do is make .card-wrap fixed positioned. Now you get this nice illusion where you are scrolling on the page technically but nothing scrolls.

<div class="dummy"></div>
<div class="card-wrap">
  <div class="card"></div>
</div>

.card-wrap {
  position: fixed;
  display: grid;
  place-content: center;
  inset: 0;
  transform-style: preserve-3d;
  perspective: 800px;
}
.dummy {
  width: 150vw;
  height: 150vh;
}

Our dummy element is set to be 150% (i.e. 1.5 times) of our viewport. You can increase/decrease it based on how much do you want user to scroll to see the effect.
.card-wrap is now fixed positioned so as to be independent from the page scroll.

Notice that now our page has scrolls.

3. Rotate card as we scroll

It's time to use some scroll-linked animation to rotate our card. Again, to get a recap, you can go through my previous post about scroll-linked animations.

We'll have the card rotated from -10deg to 10deg on x and y axes as we scroll, similar to how we did in the 3d card carousel.

:root {
  --rotation: 10deg;
}
.card {
  animation: rotate-x linear, rotate-y linear;
  animation-timeline: scroll(root inline), scroll(root block);
}
@keyframes rotate-x {
  from {
    transform: rotateX(var(--rotation));
  }
  to {
    transform: rotateX(calc(var(--rotation) * -1));
  }
}
@keyframes rotate-y {
  from {
    transform: rotateX(calc(var(--rotation) * -1));
  }
  to {
    transform: rotateX(var(--rotation));
  }
}

rotate-x & rotate-y are 2 animations that rotate from -10deg to 10deg respectively.
We add 2 animations on the card. Note how we also assign 2 different animation timelines because we want to attach the rotate-x animation with y-direction scroll and rotate-y animation with x-direction scroll.
Another thing different from the previous blog post is that we are not creating a named scroll here. Another shortcut to attach animation timeline to scroll is using the scroll function. root inside scroll simply means we are referring to document's root scroll.
Notice how x rotation goes from positive to negative while y rotation is opposite? This is just to make the rotation direction consistent with the scroll direction.

Except that this doesn't work as expected! Try for yourself and observe how it behaves:

The card rotates nicely as you scroll vertically. But horizontal scroll doesn't affect the card's rotation. Do you see what's wrong? Hint: It's the 2 keyframe animations.

The issue is - both animations modify the transform property of the card. So one overrides other. Since rotate-y is set after rotate-x on the card in the animation property, vertical scroll works. Let's fix this issue next.

4. Making both rotations work

It's clear that our animations can't simply work on the transform property since one overrides other. One solution here is to have each animation only work on a particular axis rotation. But there are no rotateX or rotateY properties in CSS. Custom properties to the rescue! When the property we want isn't there, we can create our own custom properties.

.card {
  transform: rotateX(var(--ry)) rotateY(var(--rx));
  animation: rotate-x linear, rotate-y linear;
  animation-timeline: scroll(root inline), scroll(root block);
}
@property --rx {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@property --ry {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-x {
  0% {
    --rx: var(--rotation);
  }
  100% {
    --rx: calc(var(--rotation) * -1);
  }
}
@keyframes rotate-y {
  0% {
    --ry: calc(var(--rotation) * -1);
  }
  100% {
    --ry: var(--rotation);
  }
}

Our keyframe animations now modify --rx and --ry custom properties now.
Custom properties by default are non-animatable. Unless we define what kind of value they can contain, through the @property rule. We define our custom properties to be of type <angle>.
Our card uses the 2 custom properties as transform: rotateX(var(--ry)) rotateY(var(--rx)).

">

5. Make shadows dynamic

:root {
  --shadow-length: 50px;
}
.card {
  box-shadow: var(--shadow-x) var(--shadow-y) 30px rgba(0, 0, 0, 0.3);
  transform: rotateX(var(--ry)) rotateY(var(--rx));
  animation: rotate-x linear, rotate-y linear, shadow-x linear, shadow-y linear;
  animation-timeline: scroll(root inline), scroll(root block), scroll(
      root inline
    ), scroll(root block);
}
/* other animations */
@property --shadow-x {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@keyframes shadow-x {
  0% {
    --shadow-x: calc(-1 * var(--shadow-length));
  }
  100% {
    --shadow-x: var(--shadow-length);
  }
}
@property --shadow-y {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@keyframes shadow-y {
  0% {
    --shadow-y: calc(-1 * var(--shadow-length));
  }
  100% {
    --shadow-y: var(--shadow-length);
  }
}

More or less similar to how we added rotation on both axes, we add 2 shadow animations for x and y direction. Our card is looking pretty 3D now:

6. Icing - Shine ✨

There is one final effect we can add to make our card real 3D - a shine! We create the shine through a radial-gradient over the card's current background image. We also move that shine across the card as it rotates.

.card {
  ...
  background: radial-gradient(
      circle at var(--shine-x) var(--shine-y),
      #fffa 40px,
      #0000
    ),
    url("https://cdn.midjourney.com/f87ef132-b7e1-40a4-9e7c-0bf90e7e7724/0_3.png");
  ...
  animation: rotate-y linear, shadow-y linear, rotate-x linear, shadow-x linear,
    anim-shine-x linear, anim-shine-y linear;
  animation-timeline: scroll(root), scroll(root), scroll(root inline), scroll(root inline),
    scroll(root inline), scroll(root);
}
/* other animations */
@property --shine-x {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
@property --shine-y {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
@keyframes anim-shine-x {
  0% {
    --shine-x: 0%;
  }
  100% {
    --shine-x: 100%;
  }
}
@keyframes anim-shine-y {
  0% {
    --shine-y: 100%;
  }
  100% {
    --shine-y: 0%;
  }
}

The shine is a circle created with radial-gradient from transparent white to complete transparent and whose center keeps on moving through the custom variables.

Final demo 🥳

See demo with code in Web Maker

This illusion works best on a mobile where scrolling is much more easy and intuitive. One improvement that can be done for mobile (or for trackpad supported devices) is hiding the scrollbars, which makes the whole effect more seamless.

::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}

If you enjoyed reading this, do share!

Scroll-based 3D card carousel

2023-08-15T00:00:00+00:00

In this blog post I'll show how we can simulate cards with 3D depth based on scrolling using the newly arrived scroll-based animations.

We’ll be creating a carousel of cards that change inclination while scrolling. The cards will seem to have a 3D depth i.e we’ll be able to see either of left or right sides of the card based on the carousel’s inclination while scrolling. See the final effect we’ll create.

1. Place the cards

<div class="carousel-wrap">
  <div class="carousel">
    <div class="card" style="--height: 7ex">Card 1</div>
    <div class="card" style="--height: 9ex">Card 2</div>
    <div class="card" style="--height: 10ex">Card 3</div>
    <div class="card" style="--height: 6ex">Card 4</div>
    <div class="card" style="--height: 12ex">Card 5</div>
  </div>
</div>

.carousel {
  display: flex;
  padding: 1rem;
  overflow-x: scroll;
}
.card {
  flex-shrink: 0;
  width: 28ch;
  height: var(--height);
  margin: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: #f7f1f2;
  text-align: center;
  font-family: sans-serif;
  border: 2px solid #222;
  box-shadow: -10px 5px 0px 2px rgba(0, 0, 0, 0.75);
}

Few things about the code above:

carousel-wrap doesn’t do anything for now 🤷🏻‍♂️. We’ll use it later.
Cards are given different heights, just for for visual enhancement, through a custom property called --height. Interestingly, the unit of these heights are ex which is height of the letter x in the current font...something you might want to use to approximate a set number of lines in an element.
.carousel is a flex container.
.card is given a flex-shrink: 0 so that the cards don’t shrink because of limited width of the parent. And instead take the given width and overflow the parent.
We give the cards a box-shadow to create an illusion of a depth on the cards. The left side shadow gives the impression of the visible left side of our 3D cards.

Here is what we get:

Card 1

Card 2

Card 3

Card 4

Card 5

2. Scroll-based inclination - give a timeline name for x-direction scrolling

Now the fun part starts. The overflowing set of cards create a scroll in their parent. We'll make this scroll the basis of our cool effect on the cards. First effect is inclining the set of cards from left-to-right when scrolling. We'll start by making use of the newly available scroll-timeline property to associate the x-direction scroll (inline) of the carousel to a name.

.carousel {
  scroll-timeline: --carousel-scroll inline;
}

--carousel-scroll is called the timeline-name and is associated with x-direction scroll of the element .carousel .

3. Create animation to rotate

Scroll-based animation allows us to attach any animation to a scroll timeline i.e. the animation would progress as the scroll progresses. So let’s define an animation for rotating our carousel along y-axis and attach it will the scroll timeline we created above.

@keyframes anim-rotate {
  from {
    transform: rotateY(8deg);
  }
  to {
    transform: rotateY(-8deg);
  }
}
.carousel-wrap {
  perspective: 600px;
}
.carousel {
  ...
  scroll-timeline: --carousel-scroll inline;
  animation: anim-rotate auto linear;
  animation-timeline: --carousel-scroll;
}

anim-rotate is an animation that rotates the carousel along y-axis from 8deg to -8deg.
We attach the animation to the scroll timeline using the animation-timeline property.
We now need the .carousel-wrap element to create a 3d perspective of 600px.

Scroll inside the carousel now and see it tilting from one side to another as you scroll! Voila!

Card 1

Card 2

Card 3

Card 4

Card 5

But if you scroll and reach the last card, the depth looks incorrect - with that tilt we should be seeing the right side (depth) of the cards, not left. Let’s make it dynamic!

5. Parametrize the shadow's x offset and animate on scroll

@keyframes anim-shadow {
  from {
    --shadow-x: -10px;
  }
  to {
    --shadow-x: 10px;
  }
}
.card {
  ...
  box-shadow: var(--shadow-x) 5px 0px 2px rgba(0, 0, 0, 0.75);
  animation: anim-shadow auto linear;
  animation-timeline: --carousel-scroll;
}

We create a animation for the card’s box-shadow. The animation basically animates a custom property called --shadow-x from -10px to 10px - which represents the x-offset in our box-shadow.
We make the x-offset dynamic in our box-shadow by using the --shadow-x custom property.
As before, we set the animation on the card and attach it to the --carousel-scroll scroll timeline.

Try scrolling inside the carousel and you’ll notice something strange - The box-shadow doesn’t animates! Instead, half way through the scroll, the box-shadow’s x-offset changes abruptly from -10px to 10px (Notice in the center card). That’s not what we want…we want the shadow to animate smoothly as we scroll.

Card 1

Card 2

Card 3

Card 4

Card 5

6. Fixing the animation

Even though the offsets in the box-shadow value are animatable, they don’t animate for us. It's because of the custom property being used for the x-offset. The browser doesn’t know about our custom property and hence doesn’t animate it. We need to give some extra information about our custom property to the browser for it figure out how to animate the property.

@property --shadow-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@keyframes anim-shadow {
  from {
    --shadow-x: -10px;
  }
  to {
    --shadow-x: 10px;
  }
}
.card {
  ...
  box-shadow: var(--shadow-x) 5px 0px 2px rgba(0, 0, 0, 0.75);
  animation: anim-shadow auto linear;
	animation-timeline: --carousel-scroll;
}

With the @property declaration we are telling the browser to treat --shadow-x as a length type value (like width is). And there we go, now the shadow offset animates perfectly!!

Now you have your nice pseudo 3D cards! 🥳

Final demo 🥳

Card 1

Card 2

Card 3

Card 4

Card 5

If you enjoyed reading this, do share!

How to learn & master CSS

2023-07-31T00:00:00+00:00

Cascading Style Sheets (CSS) is an essential technology used in web development to style and layout web pages. CSS is not like other programming languages because of its unique core concepts and hence learning CSS can be challenging, especially for beginners. In this blog post, I attempt to outline how one can learn and master CSS.

Learning CSS can be broken down into 2 things: Learning and Practice

Learning

You need to learn 2 things in CSS: The core concepts & property-values.

Learning Core Concepts

This involves understanding the CSS specific concepts, theoretically. Things like cascade, z-index, box model, selectors etc

The resources I recommend for this are:

web.dev guide - Super nice articles explaining each of the concepts in CSS. Must read!
CSSBattles’s Learn CSS course - they just have a beginner course for now but it's a unique interactive game-like experience to understand the basics of CSS, while not feeling daunted with just reading long articles.
Josh Comeau's CSS for JavaScript developers course. This man is a wizard in CSS and teaching - an extraordinary combination that makes his course excellent for learning CSS.

Learning about Properties and Values

The only resource I recommend here is the MDN docs. To learn properties and values, you should read the MDN docs on various properties. MDN docs provide an in-depth explanation of each property, including its syntax, possible values, interactive examples and browser support. As a routine, you can visit the MDN pages of the first 2-3 properties you use daily…its fun!

Practice

Once you get a basic knowledge about the core concepts and properties, practice is of utmost importance to turn your acquired knowledge into skills. Here are the 2 directions I recommend practicing CSS in:

Page layouts by building pages - this is an excellent way to practice what you have learned. It will give you real-world experience in applying CSS concepts and properties to create practical layouts and structures. You can start with building static webpages - grab a design from Dribbble/Behance and turn into HTML & CSS. Then move onto building simple apps like a landing page or a portfolio website.
Properties-values in CSSBattle - CSSBattle is a game where you play each level by replicating a given image as close as possible in just CSS in minimum number of characters (also called as code-golfing). Now writing minimum CSS may sound very impractical and it is! But you don't need to do code-golfing and can just focus on the matching the image part. Now even that might sound impractical, and yes that is! But suprisingly that gives you a very good practice in CSS properties and also helps develop your creative thinking when you come up with different approaches to replicate each level's image. There are so many levels on CSSBattle that doing them regularly will force you to experiment with each property and explore it in the process! I have personally learned a lot of properties here like clip-path, radial-gradient and much more.

Disclaimer: I recommend CSSBattle in this post wich I have created. As biased as it may sound, I don't recommend it because I am the creator. It has been my first-hand experience learning a lot on that platform, accompanied by testimonials from a lot of other players.

Final tool

In the end, the thing that will give the final sharpness to your CSS sword is - "The Specifications"! Specifications are the written documentation on each feature of CSS, by the people who build CSS! It covers every topic in-depth - upto details which then are also used by all the browsers to implement those CSS features. Reading these specifications give you the extra bit of understanding into why every features works the way it does.

Remember that learning and practicing are not sequential phases, they go hand-in-hand. Never stop learning as CSS language keeps evolving and so should your skills. And with time and practice, you can become a CSS master. Happy CSS-ing! 👋

Logging query docs in Firebase Firestore

2023-04-25T00:00:00+00:00

Firebase is one of my favourite and most useful tools! It’s one of the reasons Frontend developers like me are able to launch end-to-end products! No matter how much I praise Firebase, there is one distinct thing about it that always bothers me - it's peculiar way of fetching data and related error reporting. In a usual REST API system, you can easily inspect network calls, see the response and debug things. In Firebase, calls are not that trivial for queries you run. Its not straightforward to inspect them in the network tab of devtools.

Response of network call made by Firebase Firestore

But for this post I’ll like to focus on its error reporting. It’s not very unusual to hit an error like Query.where() called with invalid data] which occurs when a where clause is passed undefined compare value. This error results from some query in your code, but it won’t tell you which one. Even if you put a debugger on the calling point of this error, the stack trace is so massive and convoluted that I am not even sure if you can reach the actual query from there. So how do you debug which query is resulting this such an error in Firebase?

Note: This post is all related to Firebase v9 and it's Firestore database.

Solution

First thing we need is to know what queries are being made from your app. As there is no corresponding network call for each request, we can’t use the network tools for this. The only way left then is to put some log statements at all places where queries are made! What?? All places? Yes, there can be too many such places. Moreover, these log statements can’t be all same - each log statement will have to log some distinct pieces of information to be useful - eg. what doc or what collection is being queried.

What we can do is put our logging at some central place which we know gets called for all queries. Yes! We’ll monkey-patch Firebase API for this.

2 ways to read/write documents in Firebase (Firestore) are through the doc and collection functions on the Firestore's DB instance. These are the functions we’ll patch, like so:

const db = firebase.firestore();

if (DEBUG_MODE) {
  const _doc = db.doc;
  const _collection = db.collection;
  db.doc = (...args) => {
    console.log("doc()", args);
    return _doc.apply(db, args);
  };
  db.collection = (...args) => {
    console.log("collection()", args);
    return _collection.apply(db, args);
  };
}

We set db.doc and db.collection to our own functions which first log the received arguments and then call the original functions from within. Now we see what all queries were made in the console:

Query logs in devtools console

This isn’t a complete solution though. First, it won’t tell the additional info from where, orderBy etc. You’ll need to figure out from the doc/collection argument, the place of the actual call, put a debugger point and then see the other information at that instance. Still this works as a good starting point for me as now I can at least see what all queries are being made in the app and I can spot abnormalities from there.

I’ll probably keep refining the patch here to make it more informative. Let me know how you debug such instances in Firebase.

Mistake - deployed to wrong firebase project

2023-04-09T00:00:00+00:00

Hello, we meet so soon after my last mistake. 😄 Yesterday I was deploying CSSBattle's backend because new targets were to be unlocked and it did happen fine. Soon after, players started reporting that submissions are acting weirdly. There was an error in the submission call but the target scores were recorded correctly. Also, for the 2 new targets, the high score was not being added to the battle score!

This happened for the first time…I couldn’t really see why this should happen. The gcloud logs showed an error while recalculating the battle score - which happens after saving the target score. So that made sense, the call worked partially till saving the target score but failed while recalculating the battle score.

The bug

The error looked like the code I had deployed never got deployed - strange! There is one thing peculiar about that code though - it was from a yarn monorepo package outside the Firebase package. And because of how Firebase works, it's deployed in a little hacky manner. 🤷🏻 So I thought maybe that got messed up and I re-deployed. But even that didn’t fix anything.

Just then I remembered - we had introduced a staging environment on Firebase! I quickly went into the terminal to check which project did I deploy to…and yes, I had deployed to the staging environment (which I was working on before deployment). 🤦🏻‍♂️

Solution

That was pretty simple — I switched to the production environment with firebase use <projectID> and re-deployed!

But that is not actually the solution to the problem. I can make the same mistake again in the future. It’s very easy to miss which Firebase project/environment is set in the terminal. I still have to solve this for us, but I have a few ideas:

I could add the Firebase project name in my terminal prompt. That way it always shows without explicit checking. But still, I could miss seeing my prompt.

My terminal prompt
I use a shell script that internally does Firebase deployment. I could make that script print out loud something like “DEPLOYING TO X PROJECT”…in s big font! So that as soon as deployment starts, I clearly see where I am deploying.
(Added on 12th April '23) Right now I use a single npm command npm run deploy to deploy. I could break that command into npm run deploy:staging and npm run deploy:prod to make it very explicit where I am deploying! And inside those commands I can set the right project with firebase use.

I think I’ll go with 2nd one and see how it goes. Do you have a better solution to this? Let me know on Twitter or LinkedIn.

See you in my next mistake!

Mistake - comparison with optional chaining

2023-04-07T00:00:00+00:00

I broke CSSBattle’s leaderboard recently because of an interesting bug. We had a piece of code, whose simplified version looked something like this:

const isMore = a.score > b.score;

This got recently changed so that score was now inside a key called overall and also, the overall key was optional - could be there or not. Also, in the old scenario score was always guaranteed to be there. But in the new structure, because original key itself isn’t guaranteed, hence the score key too. So very conveniently I changed the above comparison to access score from overall key through an optional chaining operator so that I don't get an error if overall key doesn’t exist:

const isMore = a.overall?.score > b.overall?.score;

Everything seemed to be working with the change…until I noticed that the comparison was returning faulty results in some cases.

The Bug

Here’s what happened. Assume in the original code, we have a.score as 40 and b.score as 0. With those values, isMore would come out to be true - which is correct. But what if now, a.original.score is 40, but b.orginal doesn’t exist. We expect isMore to be still true because 40 is more than nothing, right? But that doesn’t happen - isMore is false in the new case. Let’s see why.

Putting values in our expression, we get:

const isMore = 40 > undefined; // evaluates to false

Note: right side of the > operator would evaluate to undefined because of the optional chaining operator on a key which doesn’t exists. And 40 , though we expect to be more than something which doesn’t exists, is actually not more than undefined !

That makes sense too (now at least 😛). I say the value “doesn’t exists” a lot of times above, but undefined doesn’t mean “doesn’t exist”, it means the value isn’t defined. In JS, the closest to “doesn’t exists” would be null. And as should be expected, 40 > null actually is true!

Comparison with undefined gives false and null gives true, shown in devtools

Solution

I patched the above expression to have 0 as default value when original key doesn’t exist:

const isMore = (a.overall?.score || 0) > (b.overall?.score || 0);

Now, we won’t have undefined ever so numeric comparisons work correctly. Fixed!

I’ll see you again with my next mistake! 👋🙂

New journey - is it a bad decision?

2023-03-24T00:00:00+00:00

I finally get to write this post! First, some news recap - I recently quit my super-awesome job to work full-time on my product, CSSBattle. That's not it! We got blessed with baby boy exactly around the same time 😃 I know… that 2 news coming together triggers surprise, but more so - a lot of questions. Let me come to them.

Why Quit?

Let me start by talking about why I quit my job. People generally quit their job either because they are not enjoying their current work, not growing professionally or are getting a better salary somewhere else. I was enjoying my job though - great team and good work & money. But if you know me, you know how much I love doing side projects. One such side project I started with a friend 3 years back is CSSBattle. Over time it has grown a lot organically, to be one of the biggest platforms to learn and practice CSS. It gets us decent revenue without putting in too much development or marketing efforts regularly. What that means is that it has a huge huge scope to become even bigger. There is so much we want to build there. This whole idea of taking it to the next level is too exciting! And I believe unless I devote myself 100% to it, unlocking its 100% potential won’t be possible.

But what about job and financial stability? That is another reason why people tend to stick with what they are doing. To be clear, this is not an ad-hoc decision I have taken. I have made sure I have a well-buffered runway to give me enough time to give 100% to CSSBattle and not worry about finances. And just in case I run out of money sooner than expected, I have confidence that I can again get back to a good job whenever I want. So there is essentially no risk on that front.

But why now?

You never know when there pops another product that builds on top of yours. This doesn’t mean I am scared of competition or don’t want one. I have confidence that nobody can build this thing better than us! But competition would be bad if that becomes a reason for me to quit my job one day in haste. You can’t compete with a product being worked full-time on while you take yours as a side project. I wanted me to control my decision, not a competition that comes in the future.

Moreover, each person I have talked to about CSSBattle and shared our vision with has only shared astonishment on where this has come and that gives me reassurance on what this can become! PS: I am lucky to have such friends around me who constantly motivate you to live your passion and are ready to support you in any way required! I am thankful to them 🙏🏼. And when I know where we can take CSSBattle, there is no point in delaying it further.

But going indie, with a kid?

I know, it is damn hard to run your own thing with a little kid! It is challenging! But one of the basic principles I go by is - “If you are comfortable, you can’t progress”. I realized it had been a while since I became uncomfortable again. Just that reason was enough for me to take the leap.

I know it's going to be challenging, it’s a problem I’ll have to solve. And I am a problem solver in the first place, that’s what I have been doing my whole career. So a problem can’t be a reason for me to not do what I want to do because it’s what I do - solve problems. Anyways, there will always be an excuse for not quitting, if you don't want to. This challenge is new for me, it’s exciting and am looking forward to solving it! 😄

Did I take a bad decision or a good one at the wrong time?

I don’t think so! I know my decision involves a lot of risks & challenges. But whenever I have such risks, the only question I ask is what can possibly go wrong? And here the answer is — nothing much really! The worst that can happen is I run out of money - then I take a job again. Or I might not have enough time for CSSBattle - fine, it might a little more time to get where we want. But I know my efforts will definitely be more than what I would have had with a full-time job. I know one year down the line I won’t repent for not giving it my best shot or delaying further!

How’s it going?

Well, it has been 24 days since I started this new journey. With a newborn, it’s very difficult to get time for yourself (for every feed, baby needs a burping of 10-15 mins and baby takes feed every 2-3 hours or so. That’s 2 hours gone in just burping - crazyy!) 😅. But I got more time this week to build things compared to last week — so that’s all I want — improvement! I know I’ll get there.

We (the “Kushagras”) have already started shipping things on CSSBattle and working on other exciting stuff we had in the pipeline. I am super pumped and excited to build and figure out what the future holds for CSSBattle!

We are not hiring nor looking for investments, so that means we can 100% focus on building and shipping! 🚀😄

I hope this post gives some perspective to those who have been sitting on their dreams and waiting for the right time. Trust in yourself, believe in your abilities, and take action toward your dreams. It may not be easy, but it will be worth it in the end. Remember, life is too short to settle for anything less than what truly makes you happy.

Peace!

My TODO after gaining financial freedom

2022-11-08T00:00:00+00:00

Lot of times you go somewhere and see someone doing something, you feel you want to do it, at least try it out. I have a similar list of things that I want to try out. You could say I should be doing these things even now if I like them...and I mostly do. But there are somethings that need more of your time and can't be done alongside a day job - the below mentioned things are those. Things that I did like to try for a month or so. Hence, I wan't to do them after I have gained financial freedom.

Financial Freedom

There are many definitions out there for the term "Financial Freedom". So let me first clear what it means for me. For me financial freedom is when I don't have to work anymore for money. I'll have enough for my needs and wants.

My TODO List

Cab Driver - I want to be a cab driver for sometime. I like driving. I feel I like helping people reach their destination 😅 I might also choose to be a cab driver in a tech-savvy place like Bangalore where I could converse with my passengers and discuss tech with them, may be solve a problem or two for them - B.Tech Cab-wala? 😄
At a restaurant counter - I want to be at the pay counter of McDonalds or a similar place where I can take food orders, provide money change to customers and get them their food.
Weekly sessions to teach programming - I want to sit with kids and tell them about my experiences around programming (whatever I can remember and write by then). Guide them on how to be a good programmer and a product builder.
Fast food joint - I want to open a fast food joint...probably just a small counter under a big umbrella with some seating. Something I can take places and serve food. I specifically want to serve sandwiches & burgers and some drinks alongside.
Do customer support - I want to join a good company as a customer support representative for them. Customer support people are the people who interact with the customers the most and are make or break for any company. I have always fancied talking to customers and solving their problems. I already do some of it, but I want to do it full-time and really take it to the next level.
Play music in cafes - Ever since I saw people do live performances in restaurants, I have wanted to do this! I want to play piano at restaurants...and if they give, have dinner there every time I play for them. 😃
Live portraits at fairs - I like drawing. I want to draw live at fairs & children parties and entertain folks.
Wood workshop - I want to get a formal training in wood working and then open my own workshop to build custom furnitures for my customers.

Side Projects?

Just to be clear - I haven't mentioned "Side Projects" in my list above, doesn't mean it's not on my list. It's love for me, I don't think I can ever stop building products. I'll keep doing them, on my side, forever! ♥️

Do you have a similar list? Share with me on this Twitter post.

Hint.css is free again!

2020-04-30T00:00:00+00:00

TL;DR

Hint.css is FREE again after being a paid product for nearly 3.5 years! 🥳

Back Story

Hint.css is a CSS library I built back in 2013. It is a CSS-only solution to create tooltips. After it launched, it quickly gained a lot of traction, thousands of stars on Github, was featured twice (🥶) on the homepage of HackerNews, featured on ProductHunt and mentioned on countless websites. It was launched under the MIT license and was free to use, no matter how you used it.

In 2016 I decided to monetize it. I came across a resource aggregation website called Uplabs which had also started its own marketplace. It was still free for personal projects. But if you did use it in a commercial project, a license had to be purchased. I decided to monetize it for a number of reasons:

It was a very popular tooltip library
I had never monetized any of my product before. I wanted to try it out.
Who doesn't want a few bucks from a side-project! 😬

And Today

After a period of 3.5 years, I have finally decided to make it free again! Here is why I have made this decision:

It has not been getting too many sales recently. There is a life of every product on a marketplace.
I think it has earned me enough, considering it was a few hours project! (and some days of maintenance) 😃

The Fun Part

Okay, now the interesting part. How much did it earn me!! I have experimented a lot over the years with its pricing. I don't have an exact count of the number of sales (Uplabs doesn't give that). But till date, Hint.css has made $1902.88 in sales! I think it is pretty good considering the library is just a few lines of CSS I wrote. 😎

Few Learnings

Experiment with pricing. It's difficult to guess what something is worth. I didn't expect people to purchased Hint.css for as much as $70!
Side projects can teach you a lot of things. Hint.css taught me open-source maintenance and product monetization.

I am really proud of this sweet little experiment of mine. 🤩 And now that Hint.css is free again, go and use it to add some quick tooltips to your websites. Ciao!

Terminal commands for daily use

2019-10-11T00:00:00+00:00

This post is a compilation of the most used commands I use in my terminal daily. A reason to share this compilation is to give a quick introduction to how a few very common regular tasks can be done through commands in a terminal. I find running commands in the terminal a lot faster than otherwise doing through the GUI and hence makes me more productive. If you feel you are better without them, that is completely fine too. But I suggest everyone should try them to see what works best for you.

There are 2 bonus tips at the end of this post to give you that extra productivity boost. Do read till the end.

List all files with human-readable filesizes

ls -lah some/folder/path

l - lists the files long format.
a - lists all the files.
h - lists filesize in more human-readable way.

Tip: you can list files of the current folder with ls .

Switch directory

cd some/folder/path

Create a new file

touch fileName.js

Creates an empty file with the name fileName.js.

Create a new folder

mkdir new-folder-name

Copy a file

cp copyFrom.js copyTo.js

Rename a file

mv oldFile.js newFile.js

Open a file in Visual Studio Code (VSCode)

code fileName.css

This is really useful. If you are not aware, VSCode can be added as a shell command too. Here is how to add VSCode as shell command.

Git commands

I am going to club these into one section.

git status - Check the status of the repository in the current directory
git checkout master - Switch to master branch
git pull --rebase origin <branch_name> - Pull remote changes from a branch called branch_name and apply my unpushed changes over those pulled changes
`git commit -m "my message here" - Commit changes
git push origin <branch_name> - Push changes of branch branch_name to remote

Open any file (Max OSX only)

open /some/path/filename.ext

This basically works like double-clicking a file in the GUI file explorer. It opens the file in the default program set for that type of file. Super useful!

open is a Mac OSX command, but I am sure every OS has something similar.

Bonus Tips

Quickly accessing your terminal

When you start using your terminal for little quick things like mentioned above, it becomes all the more necessary that you are able to do them fast enough without any overhead. And so it makes sense to do some tweaks to make your terminal accessible as quickly as possible.

For that, you can do 2 things.

First, set your terminal to show as an overlay on the screen i.e. on top of whatever window you have open in front of you. In case you have spaces (also referred as workspaces) enabled on your machine, showing as overlay prevents unnecessary context switch in changing spaces (because you'll switch to whatever space the terminal window is in) and also removes the time delay it would take to switch spaces. Overlay terminal shows instantly.
Next, set a hotkey on your terminal. That enables you to show up your terminal with a quick keyboard shortcut.

Most terminals (I have tested on Hyper and iTerm) let you do the above things natively or through some plugin.

Aliases

With time, you'll realise that you use a few commands more frequently than others. For these commands, you can set aliases. Aliases are short names given to commands so that you don't have to type the complete command again and again. Whatever shell you are using, they allow setting aliases. You can find how to set aliases in your shell by searching "How to set aliases in <your_shell_name>". By default, most operating systems give your bash shell.

Also, here is a good article on setting aliases in few different shells.

Hope this post proves useful to you and give you some extra productivity boost! Ciao!

Strong vs Em

2019-08-25T00:00:00+00:00

 and  are two of the most basic tags that we learn when we start learning HTML. I am sure you must have used both these tags multiple times. I have too. But somewhere at the back of my mind I always had that slight confusion about which cases each should be used. In fact about which places one tag shouldn't be used. So I finally decided to look up the specifications to clear that doubt once and for all. And I must admit, the specification does a great job at explaining the purpose of each.

If you also face that slight confusion about using  and  tags, you are at the right place. This article tries to re-express the learnings I got by reading the W3C specification.

TL;DR

If it's just visual importance, you want strong. If it alters the sentence meaning, use em.

The `` tag

Firstly, to quote the W3C specification

The strong element represents strong importance, seriousness, or urgency for its contents.

Let's try to understand those 3 use cases.

Importance

Importance can be thought of like "hierarchy". For example, say you are describing certain items in different paragraphs. You will probably start the paragraph by putting the item name in strong tags, like so:

<p>
  <strong>Item X</strong>: This paragraph is all about describing Item X, it's
  properties and behaviour.
</p>

<p>
  <strong>Item Y</strong>: This paragraph is all about describing Item Y, it's
  properties and behaviour.
</p>

They are acting similar to headings, visually. I compare importance with hierarchy because if someone needs to quickly scan all such items described in the paragraphs, they can just glance at the strong texts which also appear bold (and hence seemingly higher up the hierarchy).

Seriousness

A classic example of this is when you need to show a warning or error. You could simply show a sentence describing the whole warning but there could be a chance that user ignores reading the whole text, and thus the warning. To make it more evident that the particular text is conveying a warning, we can wrap it in strong tags. Again, the bold appearance of the strong tag helps us convey that this is not just another text. It's something serious and needs to be seen.

A simple example:

<strong>Warning: You data will lost in 35 seconds</strong>

which renders as:

Warning: You data will be lost in 35 seconds

Urgency

This use case is something I have encountered quite a lot, especially while writing emails. Say you are writing a long paragraph and there are certain things that you want the reader to read first and foremost. Those things can be wrapped in strong tags.

Again, the whole premise is that the person reading your long text doesn't have the time to read all the text and even if they do, there might be certain important pieces of text that are intended to be read first and act urgently. The strong tag helps us achieve that.

I know all the 3 use cases seem similar and overlapping each other. That is true. But overall they do help to construct a good set of intentions where you would use the strong tag.

The `` tag

em tag reads as emphasis but it certainly isn't just that. In fact, it's that word emphasis that has confused a lot of us in thinking that it is similar to the strong tag, which is also used to emphasize the importance of something. And it is not!

Again, to quote the W3C specification:

The em element represents stress emphasis of its contents.

Stress emphasis is the important thing to note here. It actually has to do with how you speak a particular piece of text.
Let me explain the gist of em tag with a gif:

via GIPHY

I am sure you have seen people doing this quote gesture while speaking a particular word or phrase in a long sentence. Imagine they hadn't done that gesture while speaking that word/phrase. Would you have got the same meaning out of that speaker? No. Because the specific stress that the speaker put on that particular part of the sentence, changed their intended meaning.

This is exactly what the em tag helps you do while writing. You can wrap certain parts of sentences to simulate the same stress as you would while speaking.

To make it more clear, I would like to show you the exact example from the W3C specification because I think it does the job perfectly in explaining what em tag does.

These examples show how changing the stress emphasis changes the meaning. First, a general statement of fact, with no stress:
Cats are cute animals.

By emphasizing the first word, the statement implies that the kind of animal under discussion is in question (maybe someone is asserting that dogs are cute):

Cats are cute animals.

Moving the stress to the verb, one highlights that the truth of the entire sentence is in question (maybe someone is saying cats are not cute):

Cats are cute animals.

By moving it to the adjective, the exact nature of the cats is reasserted (maybe someone suggested cats were mean animals):

Cats are cute animals.

Similarly, if someone asserted that cats were vegetables, someone correcting this might emphasize the last word:

Cats are cute animals.

By emphasizing the entire sentence, it becomes clear that the speaker is fighting hard to get the point across. This kind of stress emphasis also typically affects the punctuation, hence the exclamation mark here.

Cats are cute animals!

Anger mixed with emphasizing the cuteness could lead to markup such as:

Cats are cute animals!

Hope these examples make it all clear.

 and  are not just meant to convey semantics visually, but they are also supposed to convey the same meaning to screen reader users too, ideally through a change of voice.

From what I could test, VoiceOver doesn't seem to differentiate normal text from the emphasized text. Also, there seems to be no recent studies on the Web for other screen readers like JAWS and NVDA. Hence, I am not covering this topic in much details. I would appreciate if someone can share studies on this matter, which I can update here.

Nevertheless, screen readers are continuously improving and our correct use of the tags will only help users eventually.

Also, it's worth noting that accessibility isn't always about screen readers. The visual difference that comes with strong/em tag is great for increasing reading comprehension and helping with cognitive disabilities like dyslexia.

Summary

Next time you get confused which tag to use out of strong and em, think about this: What's your intention - is it just visual importance or do you want to stress over something to communicate better by changing the meaning of the sentence (like you would have stressed while speaking)?

If it's just visual importance, you want strong. If it alters the sentence meaning, use em.

What about `b` and `i` tags?

There is also a common confusion while choosing between strong/b and em/i. Visually they look exactly the same as their counterparts. Then what's the difference?

The difference lies in semantics. strong and em bring in some additional context or meaning wherever used. On the other hand, b and i are just for styling and visually differentiating some part of the sentence from the rest. You can consider b tag the same as a span with a CSS of font-weight: bold applied on it. Similarly, i can be thought of as a span with CSS of font-style: italics applied on it.

So if you want to communicate importance, urgency or seriousness, use strong. If you just need to draw attention without any importance, use b or rather just use CSS font-weight. Similarly, if you want put stress on something, use em. If it's just about highlighting a different type of text, such as a word in another language, then use  or just CSS font-style.

That is all for this post. Hope this helps understand these common tags better.

Special thanks to Jitendra Vyas, @stommepoes, and the lovely members of Slack Web Accessibility group for reviewing this post.

Case Study: Accessibility Report for Managers - Part 2

2019-08-08T00:00:00+00:00

This is a two part case-study of why and how I created my recent side-project - Accessibility Report for Managers.

Part 1 - Idea & Frontend
Part 2 - Backend & Deployment

In the previous chapter, I took you through why I made Accessibility Report for Managers and the rationale behind it. Also, we saw how different parts of the frontend are created. In this chapter, I’ll take you into how the app works behind the scene - The Backend and how the complete app is deployed. Let’s dive in.

Backend

The Monorepo

Before getting into the backend, I would highlight the folder structure of this app. I use a Monorepo structure - which means the frontend and backend, both reside in the same repo as side-by-side folders. And as a general Lerna convention, I place them inside a "packages" folder. The frontend is in the /packages/app folder and backend in /packages/api.

Note: I am not using Lerna, just following its packages folder convention.

Getting the actual Accessibility issues

The whole basis of this app is first getting the real Accessibility issues on a particular website which we can later highlight by turning into fake feedbacks. For this, I wanted a library that could detect most Accessibility issues on a website, with easy setup and API. Out of the many, I chose to use pa11y. pa11y is an open-source Node.js library to find Accessibility issues on a webpage. Perfect for my case.

pa11y can run its tests on an actual Chrome browser or you can provide it a Puppeteer instance, which is basically headless Chrome. This part of the backend resides in a script: packages/api/generate.js. Input for this endpoint is just the URL of the webpage that we want to run the Accessibility tests on. This input is passed to the endpoint as a query parameter. We’ll later see how this script gets served as an API on a URL endpoint. generate.js just runs pa11y over the passed webpage URL and sends pa11y’s test results in the response.

You might be thinking where does pa11y get Chrome browser from. The complete backend is deployed on a serverless environment (I’ll cover this in more depth when we get to the deployment part). So I do not actually have a server that I control and can install Chrome browser on. This is where chrome-aws-lambda comes in. Consider it as a stripped-down Chrome browser specifically tailored for serverless environments (particularly AWS and Google Cloud).

Now that we have got the actual issues on a webpage, we pass them to the frontend as a JSON response. And we saw in the last chapter how these get processed and turned into fake feedbacks.

Showing the affected page element

If you try the app on a URL, you’ll notice that in each feedback tweet it also shows the image of the affected element on that page.

Tweet screenshot of a fake user complaining about color contrast user

How does it do that?

Remember the result object we get from pa11y?

    {
      code: "WCAG2AA.Principle2.Guideline2_4.2_4_1.H64.1",
      message: "Iframe element requires a non-empty title attribute that identifies the frame.",
      type: "error",
      selector: "#77c8c1c1-74e9-4d61-be2e-c1e39ffe02a0"
    }

It also gives us the CSS selector of the page element that the Accessibility is found on. Now that we have the selector, how do we take an image of it? Enter Puppeteer.

Puppeteer is a high-level API to control a Chrome or Chromium browser (and now Firefox also). It runs the browser in headless mode by default - meaning the core of the browser runs without all the UI and visual stuff. Hence it is faster than running a normal browser instance.

Out of the several wonderful API options, there is one to grab a screenshot of any element on a URL. Now that we know this, it is time to create another API endpoint to generate the image for the affected page elements. As you can guess, this endpoint will require 2 things as input: a page URL and the CSS selector of the element. And it all happens inside packages/api/image.js.

Few things to note in this script:

We are decoding the passed CSS selector before using it, like so:
const selector = decodeURIComponent(queryData.selector);
The CSS selector is encoded on the frontend before sending as query parameter because it can contain URL-unsafe characters like #.
This is a little different from a traditional API endpoint which you call asynchronously to get a JSON response. Firstly, it doesn’t send a JSON response. Note the following line in the script:

res.setHeader("Content-Type", image/png);

We are setting the Content-Type header for our response as image/png. i.e. we are telling the browser to expect a PNG image from us. This is the same header value you’ll see in a usual PNG image. And how do you usually use a PNG image? In an <image> tag. That’s right, our API endpoint is designed such that it can be used in an <image> tag inside the src attribute. For example: if the endpoint is available on https://app.com/api/image and we want to generate screenshot image of an element on page https://targetpage.com having CSS selector as .avatar, we can do it like so:
```
<image
 src="https://app.com/api/image?url=https%3A%2F%2Ftargetpage.com&selector=.avatar"
></image>
```
And our captured screenshot would show up in the image tag!

Also, just like the pa11y script, I use chrome-aws-lamda as the Chrome instance because it is light-weight. And instead of uppeteer module, I use puppeteer-core for the same reason that it’s very minimal and light-weight. All these file size optimizations are necessary to take into account when you go with serverless architecture because you get a very limited amount of resources to run your code on. Of course, you can pay more and get on better resource plans, but you get my point.

That completes our backend - a set of 2 URL endpoints. One to get the issues on a webpage and second to generate a screenshot of any image on a webpage.

Deployment

I decided to try Zeit’s Now for this app. It let’s you deploy static files on a custom domain and also supports running many server-side languages in a serverless environment. No server management hassles, nothing. Absolutely a treat to deploy things on it.
I have 2 components of my app that will get deployed on Now - the frontend app and the backend APIs. How each component gets deployed on Now is defined in a file called now.json.

Frontend configuration

    {
      "version": 2,
      "builds": [
        {
          "src": "packages/app/package.json",
          "use": "@now/static-build",
          "config": {
            "distDir": "build"
          }
        }
      ],
      "routes": [
        {
          "src": "^/(.*)",
          "dest": "/packages/app/$1"
        }
      ]
    }

Notice a single entry in the build array. Its the configuration to deploy our frontend. What we are telling Now is:

the path of our app (particularly the package.json file)
that it needs to build the app first, by specifying the @now/static-build builder
path to our final build folder, which is build in our case.

You also have the ability to define redirects in now.json which is a very powerful tool to create app routes, APIs, proxies and much more. Using the same, we define a route which tells Now to redirect every request to our just deployed frontend app. A very important thing to note here is the dest path we give in our route: /packages/app/$1. Now takes the contents of the distDir we provided in our build config, and makes it available inside the folder that is being built. So in our case here, the final build artifacts are available inside /packages/app.

Backend configuration
Just like put an entry in the builds array for our frontend app, we’ll put an entry for each of our API endpoint. First, our issue generation script: generate.js:

    {
      "version": 2,
      "builds": [
        {
          "src": "packages/app/package.json",
          "use": "@now/static-build",
          "config": {
            "distDir": "build"
          }
        },
        {
          "src": "packages/api/generate.js",
          "use": "@now/node",
          "config": { "maxLambdaSize": "40mb" }
        }
      ],
      "routes": [
        {
          "src": "^/api/generate.*",
          "dest": "/packages/api/generate.js"
        },
        {
          "src": "^/(.*)",
          "dest": "/packages/app/$1"
        }
      ]
    }

Same as before, we tell is the script to run, we tell it to use Node.js for it and finally some serverless environment config to limit the memory available to our code.

The total of 40mb memory size is why we need things like 'chrome-aws-lambda' and 'puppeteer-core' which provide us the absolute minimal version of their respective capabilities. Thus making them faster and lighter to run.

And then, we add a route to redirect any request on /api/generate.* to our generate.js script. Done!

Build config for the image.js script is similar and this is how our final now.json looks like:

    {
      "version": 2,
      "builds": [
        {
          "src": "packages/app/package.json",
          "use": "@now/static-build",
          "config": {
            "distDir": "build"
          }
        },
        {
          "src": "packages/api/generate.js",
          "use": "@now/node",
          "config": { "maxLambdaSize": "40mb" }
        },
        {
          "src": "packages/api/image.js",
          "use": "@now/node",
          "config": { "maxLambdaSize": "40mb" }
        }
      ],
      "routes": [
        {
          "src": "^/api/generate.*",
          "dest": "/packages/api/generate.js"
        },
        {
          "src": "^/api/image.*",
          "dest": "/packages/api/image.js"
        },
        {
          "src": "^/(.*)",
          "dest": "/packages/app/$1"
        }
      ]
    }

Whatever matches with the first 2 API routes, gets redirected to the respective scripts. Rest all requests get served from the app folder.

By default, your website gets served on a now.sh subdomain but you have the option to add a custom domain if you want.

And here is the final product → https://a11yformanagers.now.sh/

Remember, this app is open-source on Github → https://github.com/chinchang/a11y-for-managers
So if you want to get your hands dirty in open-source by making your first contribution, this app is perfect way to do it. Presently it has support to show only only few accessibility issues as tweets. You can add support for more types of Accessibility issues. And reach out to me for any help.

Hope you had fun reading and learnt a few new things along the way.

Case Study: Accessibility Report for Managers - Part 1

2019-08-08T00:00:00+00:00

This is a two part case-study of why and how I created my recent side-project - Accessibility Report for Managers.

Part 1 - Idea & Frontend
Part 2 - Backend & Deployment

Accessibility is a very important aspect of any product. If your product isn’t accessible to every possible user, then you are simply losing out on potential users. Over the past few years, I have grown to care more and more about accessibility in every work I do, not just web development, but everything. With that also comes the disappointment to see all these websites out that that break even the basic accessibility rules.

Lack of knowledge is certainly the reason for poor accessibility in websites. But it isn’t always just the lack of knowledge of developers. I feel there are times when developers do want to take time out to improve the accessibility in their work as they slowly learn new and new things, but they are not always given the freedom to do so. Again, it’s the lack of knowledge and empathy, but in a different set of people who manage these developers. That is why Accessibility, and for that matter, any part of a website, is not just a developer’s job. It needs to be a company value that starts from the early stage of idea conceptualisation, to design, development, product management, marketing, and beyond.

The Idea behind “Accessibility Report for Managers”

The most common argument we get to hear from people who are tried to convinced about focusing on Accessibility is:

Hey, do we really have those kinds of users? Has anyone ever complained about our website not being accessible?
- A Manager

This gave me an idea - why not make an app that gives these people what they want - real feedback from actual users. But then I thought, the primary aim here is “real feedback”, not “actual users” 😉 This led to the whole concept for “Accessibility Report For Managers” - website where you can enter any website URL and generate a report full of dummy feedbacks about actual Accessibility issues on that website, by dummy users 🙂 You take this report to your manager who was asking for real customer feedback all this time, and voila!

Disclaimer: The idea here is not at all to diminish the importance of actual accessibility testing and feedback submitted by real users. That is at most important. This app is just a fun attempt to bring a different perspective to look at real accessibility issues.

The Real value

Okay, fun part aside. Accessibility Report for Managers isn’t just a funny impractical website to generate these fake feedback. I realised it serves a more practical purpose. This app basically gives you a very different, a customer oriented, view of the Accessibility issues present on your website. Compare this to reading a story and actually seeing/hearing the same story in a movie. Similarly, a textual list of issues generated from a linter would not create the same amount of empathy inside the reader that probably a tweet from a disappointed user showing a screenshot of something broken on the website would do.

For example, compare these two:

Linter: Color contrast not sufficient. It should be at least 4.5:1.
User Feedback: Hey web admin, I was browsing through your website to get some work done but at some places, it’s really hard for me to read the text, probably due to poor colour contrast.

I hope you can see the huge difference between the two. I feel the latter gives a very understandable view of the same issue.

TL;DR: Creating the App

This app, though seemingly small, has quite a few components behind the scenes. And the best part, as a frontend developer I could write it all in JavaScript and run without actually setting up or managing a server. These things really excite me and this article series is an attempt to share the whole process of creating such an app with all the latest tech out there. Let’s begin with the tech stack used in the app.

Note: The app is open-source on Github.

Component 1 - The Frontend

I chose Preact to write this app’s frontend. Preact is an extremely lightweight (just 3KB gzipped) alternative to React with almost the same API. It’s perfect for a scenario where you have such a small app and you don’t wanna overload it with some framework’s footprint.
I used Preact’s preact-cli which does a basic scaffolding for a Preact Progressive Web App. There is no other dependency on Frontend apart from Preact.

The CSS is written the old-fashioned way - a single CSS file.

Component 2 - The Backend

The backend is basically a set of serverless functions which creates 2 endpoints for the frontend. Again, they are all written in JavaScript (NodeJS).

There is one API endpoint to get the actual issues on a given page which uses the pa11y package to extract out all the issues.
The second API endpoint is to get the screenshot of affected areas. This is done using Puppeteer to get screenshot of specific elements on the page.

Component 3 - Deployment

Both, the frontend and the backend, are hosted on Zeit Now. It simply involves writing the deployment configuration for your components and everything gets deployed with a single command without managing any server!

The Frontend

Note: Till we get to the Backend, assume that we have a backend API. We can send any URL to the API and it returns us a list of Accessibility issues.

The framework

I love React. But if the project I am working on is not too demanding in terms of features and I am the only one working on it, I prefer to use Preact - which is a 3KB alternative to React. It almost feels like I am shipping a vanilla JS app while getting the same ease as with React.

Preact also has a CLI that scaffolds a basic progressive app.

Creating fake tweets - Content

As I mentioned, our API gives us a list of Accessibility issues (found through pa11y). First of all, we need to turn these into tweets. Each issue in the list is of the following structure:

    {
      code: "WCAG2AA.Principle2.Guideline2_4.2_4_1.H64.1",
      message: "Iframe element requires a non-empty title attribute that identifies the frame.",
      type: "error",
      selector: "#77c8c1c1-74e9-4d61-be2e-c1e39ffe02a0"
    }

The code is a unique identifier for a particular Accessibility guideline that wasn’t followed, explained in brief in the message value. The main gist of this app is to turn the technical guideline into seemingly real feedback from a real user. That is why I need to convert that into a tweet. And the same tweet always for a particular issue type would look unreal and boring. So I maintain 3-4 different tweets for each issue type and pick one out randomly. Like so:

const supportedRules = {
  INSUFFICIENT_CONTRAST: "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail",
  MISSING_LABEL_ON_FORM_CONTROL: "WCAG2AA.Principle1.Guideline1_3.1_3_1.F68"
};

function generateFeedback(issue, url) {
  switch (issue.code) {
    case supportedRules.MISSING_LABEL_ON_FORM_CONTROL: {
      return {
        message: [
          `Dear Web Developer, I cannot see and browse the web using a screen reader. And websites like ${url} on which you don't label your form elements are completely unusable to people like me. #fixtheweb #a11y`,
          `Oh God! It's a disaster browsing websites where the developer simply didn't care to put a label on form controls!! Encountered one such site -> ${url} #accessibility.`
        ][random(0, 2)]
      };
    }
    case supportedRules.INSUFFICIENT_CONTRAST: {
      return {
        message: [
          `Hello! I was browsing through your website ${url} and facing issues with reading few texts. I guess it could get a lil' better for people like me if the text color had some more contrast with the background.`,
          `It's such a difficult task to read websites these days. Eg. Missing text contrast here -> ${url} Someone please fix the web. #accessibility`
        ][random(0, 2)]
      };
    }
  }
}

What's happening here is, I have made enums for the supported Accessibility guideline codes to make it more clear while referencing them. Then there is the generateFeedback function which does a switch on the accessibility issue code and returns a random feedback from a list of feedbacks corresponding to that issue.

One more thing to note here is that I pass the URL of the website, whose report is being generated, to the generateFeedback function. This passed argument gets used in the ${url} placeholder within the feedback strings, which are actually template literals.

Creating fake tweets - Fake users

This one is interesting! Next, we need some fake users to show within our feedback tweets. I searched a lot for services which would give me random user data and finally settled on https://randomuser.me. It’s free, fast and gave me the data I wanted (eg. name, photo etc). It has an API with all sorts of options, but the one that is of our interest here is the results option. You can pass a count in results parameter and the API will return that number of fake users to you. Sweet right!

So the whole report generation process till now is as follows:

I get a list of issues from the API
The issue list is converted into fake feedback tweets (only the issues which are supported)
As per the number of feedbacks we generate, we fetch those number of fake user from https://randomuser.me

Creating fake tweets - Twitter handles

To complete our fake feedback tweet, we need to show the twitter handles (username) of our fake users. Now we could just create random strings out of numbers and alphabets, but that would again look unreal. And what's the fun in making unreal stuff! So here is what I do instead:

For each user, we have the user’s full name.
I extract some part of the user’s first name (F) and some part of their last name (L).
Then with a 50% probability, I concat F and L with an underscore. The other 50% times, I concat them straightaway. Because people generally contact their first and last names to create their handles.
Next, with a 30% probability, I append some digits (maximum 3) after the result of Step 3. Why? Because not everyone in the Twitter-verse gets their handle of choice. They append random numbers to make it unique :)
The result is appended to a “@” character.

And we have the handle ready! If you are wondering how do we do something with X% probability, it can be done easily by checking the result of Math.random().
For example: To run a code with 70% probability, we could use Math.random() > 0.3. This condition means we want the number returned by Math.random() to be greater than 0.3. And Math.random() return from 0 to 1. So basically we are checking that the returned number should be between 0.3 and 0.1. This translates to having a 70% chance:

0 - 0.3 → 30% probably outcomes
0.3 - 1 → 70% probably outcomes

Here is how the complete function looks like:

function getHandleFromName(fname, lname) {
  // Concatenating extracts from first and last name, with _ maybe?
  let handle = [
    `${fname.substr(0, random(1, fname.length - 1))}`,
    Math.random() > 0.5 ? "_" : "",
    `${lname.substr(0, random(1, lname.length - 1))}`
  ].join("");

  // Add some digits?
  if (Math.random() > 0.7) {
    handle = `${handle}${random(0, 999)}`;
  }

  // Append to @
  return `@${handle}`;
}

Creating fake tweets - Final items

To all the above data, we add random “like” count and tweet date. One more thing that the tweet shows is the image of the element on the website that failed the Accessibility guideline. Remember the issue structure that we get from the API? It had a key called selector is the CSS selector of the corresponding element. I created another API to which I pass the CSS selector and website URL and it returns me the screenshot of that element. More on that later.

And combining all the fake data, we generate this beautiful fake feedback tweet:

Tweet screenshot of a fake user complaining about color contrast user

That is it for this article. In the next article, we’ll go through the app’s backend and how its deployed.

How I saved 100KB with React.lazy

2019-07-05T00:00:00+00:00

This post is about how I was able to reduce my homepage JavaScript by more around 100Kb.

TL;DR: Use React.lazy and React.Suspense to lazy load your non-critical dependencies

I have a React app bootstrapped from create-react-app. One of the page (just a React Component) in that app uses CodeMirror (a code editor). The app uses react-router for routing. And so this page component, just like all other pages, is imported in the main App component to provide to the router.

App.js

import Home from "./Home";
import Page2 from "./Page2";

function App() {
  <Router>
    <Route path="/" component={Home} />
    <Route path="/page2" component={Page2} />
  </Router>;
}

Page2.js

import CodeMirror from "react-codemirror";

function App() {
  return (
    <div>
      <CodeMirror />
    </div>
  );
}

Note: react-codemirror actually does a named export. But for simplicity, I am assuming a default export.

This situation leads to Page2.js being a synchronous dependency to render App.js. And Page2.js in turn depends on react-codemirror. So indirectly, react-codemirror becomes a synchronous dependency to render App.js. This basically means whatever page we visit, react-codemirror will be fetched and parsed before the page renders. Even if Codemirror is not even being used on that page! Let's fix this.

Solution

The solution is pretty neat and easy. React recently introduced a new API: React.lazy. And an accompanying component called Suspense. Here is how we use them to fix our problem.

Step 1: Make the import lazy

Page2.js imports react-codemirror. Ideally we want that Page2.js should load react-codemirror asynchronously when Page2 is actually visited.

This is our current Page2.js:

import CodeMirror from "react-codemirror";

function App() {
  return (
    <div>
      <CodeMirror />
    </div>
  );
}

Using the React.lazy API, we can make the import lazy. Like so:

import React from "react";
const CodeMirror = React.lazy(() => import("react-codemirror"));

function App() {
  return (
    <div>
      <CodeMirror />
    </div>
  );
}

And this just starts working out of the box! No more change required in the way CodeMirror component is used. What you'll notice now is initially when you are on homepage, CodeMirror doesn't load. When you visit /page2/, you see blank area where CodeMirror was to be rendered, for a short duration while CodeMirror loads asynchronously. And then when it has finished loading, CodeMirror component renders.

While CodeMirror is being fetched, there is just blank space where CodeMirror editor should have been present. That is not such a good experience as user is left without any information about that blank space. That is where React.Suspense component comes into action.

Step 2: Improve the blank space context

Here is all we need to do to make the experience better:

import React, { Suspense } from "react";
const CodeMirror = React.lazy(() => import("react-codemirror"));

function App() {
  return (
    <div>
      <Suspense fallback="Loading editor...">
        <CodeMirror />
      </Suspense>
    </div>
  );
}

We wrap the asynchronous/lazy components with a Suspense tag and give it a fallback which should show instead of blank space. That is it!

Bonus tip

There is one special requirement for using React.lazy which you need to be aware of. It only works with component that have default export. So components with named exports can't be lazily imported with it. But you might have components with named exports, what to do then? There is a small trick. Let's assume our Page2.js file exported Page2 component so that it was initially imported as import {CodeMirror} from 'react-codemirror'. In that case, we can use React.lazy on it as follows:

import React, { Suspense } from "react";
const CodeMirror = lazy(() =>
  import("react-codemirror").then(module => ({ default: module.CodeMirror }))
);

function App() {
  return (
    <div>
      <Suspense fallback="Loading editor...">
        <CodeMirror />
      </Suspense>
    </div>
  );
}

What we did here is once we import the named module, inside the then callback we turn it into a seemingly default exported module - an object with the module available on default key.

That's all folks! Go shave off some unnecessary bytes of your pages. If you have any questions or comments, ask me on Twitter @chinchang457 (DMs are open).

An interactive and practical introduction to Web Accessibility

2019-07-02T00:00:00+00:00

Ever since I understood the importance of Accessibility, I have always tried putting a conscious effort to share whatever I keep learning. So that everyone can start caring about at least the basics of Accessibility while making websites.

Nothing brings you closer to reality than actually facing it. This is the premise of my latest attempt to spread awareness about Web Accessibility. Presenting, introtoaccessibility.com

This project is a series of chapters, in the form of a quiz. Each chapter shows you something or ask you to do something and then asks you a question. The chapters are basically extreme cases of unusable user experience designed such that they are inaccessible even to abled users.

Each chapter makes you experience a particular Accessibility issue. It then tells you how that issue affects various users on the Internet, why it affects them and what you can do to prevent it.

My intention with this project is that it can be the first step to introduce Web Accessibility to anyone and everyone who work with websites. No matter if they are developers, designers or marketers! I hope I can arouse empathy that each one of us requires to make the Web a better place for everyone.

Please do share with anyone and everyone you know who works with websites -> introtoaccessibility.com

Restrict specific fields updation in Firestore

2019-06-15T00:00:00+00:00

Let's say you have a users collection and each document in that collection contains the public information about a user. Something like this:

users/
user_id_1: {
  name: "John Doe",
  country: "Thailand",
  website: "https://example.com",
  username: "j_deo"
}

And of course, since this is user's information, the users will have editing rights to their corresponding document. This can be guaranteed by the following security rule:

match /users/{userId} {
  allow write: if userId == request.auth.uid;
}

All good till now. Here is a thing to note: Should all the fields in the above document be allowed to be written by its user? Think about the username field. Username of a person is a unique value in an app, generally. Meaning, if there exists a user with username "ramesh", there can't be (at least shouldn't be) another user with the same username "ramesh". How would you ensure that in Firestore, you ask? Well, that could be another blog post, but in summary, you'll have a cloud function endpoint to change username instead of directly hitting Firestore to update the username. And inside the function, you can have logic to check if there is username conflict and take appropriate actions.

This is the half solution for ensuring the username doesn't conflict. Remember that our above-mentioned security rule for any document in users collection doesn't stop anyone from updating the username field. So now we need to somehow ensure that the user cannot update their username in the document.

resource & request

For that, we need to know about these 2 variables: resource.data and request.resource.data. These are available to use while writing the Firestore security rules.

resource.data

This is simple. It's your document's current state, before the write. More precisely, it is a map with your current document's keys.

request.resource.data

This one is tricky. Let's say you send an update request to update your document's name field, like so:

db.collection("users/user_id_1").update({
  name: "Something else"
});

You would expect request.resource.data to be { name: 'Something else' }, which is simply the data we are sending in the request. But it is not!

request.resource.data is your document's future state i.e. after the write. So in this case, if the write succeeds, our document would become something like this:

{
  name: "Something else",
  country: "Thailand",
  website: "https://example.com",
  username: "j_deo"
}

This is exactly what request.resource.data is - A map with all your future document's keys.

Back to ensuring the missing field

Once you understand what resource.data and request.resource.data are, you soon realize why we cannot simply check that username should be undefined in our request.resource.data. Because request.resource.data is not the object you send. But it is the object that your document will become if the write happens, and in that object username still lives. So what do we do now?

Let's take a small example:

Current document:

// resource.data
{
  name: "John Doe",
  username: "j_deo"
}

And we send an update request like so: db.collection('users/user_id_1').update({ name: 'John Doe - the great' }). Here is what our future document will look like, i.e. our request.resource.data:

// request.resource.data
{
  name: "John Doe - the great",
  username: "j_deo"
}

If you compare the current and future state, you'll notice that the username remains same when we don't send the username field. That means to validate the user not sending the username field, we can check for the username being the same in before and after states with the following security rule:

match /users/{userId} {
  allow write: if userId == request.auth.uid
    && resource.data.username == request.resource.data.username;
}

Are we done? No, one more small thing. There could be a scenario where the username field doesn't exist in the current document. In that case, the above security rule errors out (it probably shouldn't, but it does) with a strange error Property username is undefined on object! To bypass this error, we can simply check for the field username to be absent in future state (request.resource.data). Because if there was no username initially and we don't update it, it won't be present in the future state too. Here is how we do that:

match /users/{userId} {
  allow write: if userId == request.auth.uid
    && !('username' in request.resource.data)
    || resource.data.username == request.resource.data.username;
}

Bonus refactor

You might probably have more such fields that need to be restricted for writing. Repeating above conditions for all such fields can make the rules difficult to read. We can abstract the logic in a function to make it manageable:

function notUpdating(field) {
  return !(field in request.resource.data) || resource.data[field] == request.resource.data[field]
}

match /users/{userId} {
  allow write: if userId == request.auth.uid
    && notUpdating('username') && notUpdating('isAdmin');
}

Neat, right?

That's all folks. If you have any questions or comments, reply in the comments or ask on Twitter @chinchang457 (DMs are open).

Introducing CSSBattle — the first CSS code-golfing game

2019-04-17T00:00:00+00:00

Undefined: The Third Boolean Value

2019-04-05T00:00:00+00:00

Side Project - my not so 'side' project

2019-02-25T00:00:00+00:00

A few months back I left my job to go full-time as an Independent Product Maker. And today I am here to present my latest product:

Side Project

"Side Project" aims to be a one-stop website to get new ideas for your side projects and resources to build it whether you want to choose a frontend framework, payment processor and what not. On top of that you also get a continuously improving Launch Checklist with important things to take care of while launching.

It doesn't stop there, this is also my first paid product. Besides all the free things mentioned above, you can also buy a Side Project pack which allows you to fork the Launch checklist separately for your individual side projects. Plus, you can completely customize the checklist to suit your project. You can get 5 Side Projects for just $3! And to celebrate the launch you can get a 50% discount using the coupon "launch". So what are you waiting for? Try it now.

With this product I have experimented with a lot of stuff like Serverless functions, Netlify, Eleventy, Preact, Gumroad, payments, security, Accessibility, Product design and lots of other things. I'll probably write separate posts on that. It was fun build this mini product. If you have questions on how it was built or the tech behind it, feel free to comment or ask on twitter.

Things I Don't Know as of 2018

2018-12-29T00:00:00+00:00

This post is inspired by Dan Abramov's post where he lists out, yes, things he doesn't know as of 2018. On top of Dan's reasons, I am also writing this post to myself get clarity on the things I don't fully understand and things I want to learn next year. So here goes...

CSS Grid - I know I know, Grids are the best. Hard to believe, but I haven't used CSS Grids even once in any project yet. I have tinkered with them, but haven't got any practical need to use them over Flexbox.
Accessibility - I started focusing a lot on Web Accessibility (a11y) in 2017, thanks to my friend Jitendra Vyas. I take care about a11y in whatever I develop now. But the domain is very huge and there are many aspect I still need to learn about a11y (inspect me :)).
Responsive web design (RWD) - I feel I lack the right approach towards RWD. Whatever I implement still feels hacky and not-robust to me.
Docker performance - I started with Docker in late 2017 and have worked quite a bit. But the end results have been intolerably slow as far as performance is concerned. I still have to learn the internals of containers to have usable architectures over Docker.
Backend - I am a frontend developer and though I have worked a few times over backend code, I still am afraid to write one from scratch or maintain backend code. That is also the reason why my app Web Maker is completely serverless till date - hosted on Github pages and running serverless functions wherever required.
React patterns - I have tried React over 2-3 projects now. In fact I re-wrote Web Maker completely in Preact (lighter React) this year. But I feel my code could be much more concise and manageable if I know the many patterns out there.
Typing without looking at the keyboard - I still can't type correctly without looking at the keyboard for even a minute 😅 Moreover, I got a new keyboard and my type speed has severely downgraded!
SEO - Hardly know anything (maybe a point or two) in this space.

Now some non-tech things:

Being productive - I feel I have started procrastinating more and more 😛 Even more since I quit my job to become an indie developer. I need to get back on track soon and start shipping and learning.
Playing chords on Piano - I am able to figure out chords for a lot of music, but still not close to 100%.
Go to post something on twitter and get back without checking out my timeline - self-explanatory 😔.

TODO 2019

Finally here are few things I want to do in 2019:

Release 4 products that earn me money.
Deep dive more into Web Accessibility.
Launch the educational website I have been wanting to start (for years!).
Get my left hand to play without seeing on Piano. More practice required.
Draw more.
Stay like a kid :)

A CSS Approach to Trap Focus Inside of an Element

2018-03-27T00:00:00+00:00

Creating Vue.js Component Instances Programmatically

2018-01-23T00:00:00+00:00

How to write better CSS in teams with ACSS — A dynamic Atomic CSS library

2018-01-04T00:00:00+00:00

Web Maker — How I built a fast, offline front-end playground

2017-08-01T00:00:00+00:00

Overriding new tab page in Chrome extension, conditionally!

2017-07-26T00:00:00+00:00

If you use Chrome extensions like Momentum, Panda etc you know that Chrome extensions have the ability to override your new tab pages i.e. the page you see when you open a new tab in the browser. They do this through the Override Pages API, by doing so in the manifest file:

{
  "name": "My extension",
  ...

  "chrome_url_overrides" : {
    "newtab": "theNewPage.html"
  },
  ...
}

Issue with such extensions is that you can use only one such extension, because if you have multiple extensions with each one trying to override the new tab page, only one of them can finally override. Also, these extensions don't provide any configurable setting to make the overriding of new tab optional. But, there is a very simple trick to make new tab overriding conditional which I use in Web Maker.

First, you don't do anything in the extension's manifest as mentioned above. Then you can have a background page that listens for a new tab creation event. Whenever a new tab is created and the new tab's URL is chrome://newtab/, we can do our condition checking and replace the URL accordingly. Heres how you do that:

chrome.tabs.onCreated.addListener(function(tab) {
  if (tab.url === "chrome://newtab/") {
    if (shouldReplaceNewTabSetting === true) {
      chrome.tabs.update(tab.id, {
        url: chrome.extension.getURL("theNewPage.html")
      });
    }
  }
});

There you go - conditional new tab page replacement! You can also see the actual code I use in Web Maker here.

Web Maker: Forking and Fonts

2017-05-31T00:00:00+00:00

I recently released v2.7.0 of Web Maker with 2 super useful features - Forking & Customizable fonts. Here is a bit about them.

Forking

Forking basically allows you to create a duplicate of any of your existing creation. This sounds like a small feature, but its usefulness is enormous. Forking any creation gives you the power to define templates. Say, your creations are mostly based on three.js and a three.js work requires a bit of same starter code always. With Forking now in Web maker, you do this:

Create a new creation.
Add three.js from Add Library option.
Add the required base code for creating a new three.js work.
Change your creation's title to: Template: three.js starter

Thats it. Now you have created a readymade template for starting any three.js work in future. How do you use it? Simply:

Click on the Open button.
Type in template to search across all saved templates (remember you named your template so).
Hit the Fork button on the the desired template. And done!

And all this user experience is completely accessible through just keyboard too!

Web Maker's Fork feature

Fonts!

Customizable fonts are something that developers always dig. And with the new generation fonts with ligatures, it has become more exciting to use them. With this new release, you now get 4 awesome fonts with ligatures (except Inconsolata) - Fira Code (now default), FixedSys, Monoid and Inconsolata. Big thanks to the developers of these fonts! If you want to see some other font as well, let me know in comments or on twitter.

I personally like the game-y feel of the FixedSys font. Now coding feels like playing a game :)

FixedSys font in Web Maker

Hope it hear from you all about these new features. If you find them useful, tweet out your love to @webmakerapp. Oh, by the way, Web Maker has a chat lobby on Gitter. Join there if you need any help or want to say Hi. Cheers!

Web Maker: Console is here!

2017-05-18T00:00:00+00:00

I have an awesome news to share with all the Web Maker users out there. The most requested feature has finally landed in version 2.6 - The "Console". Yes, you heard it right, you now have an inbuilt Console right inside the Web Maker interface.

What exactly is a Console, you ask?

If you have developed for browsers, you have most probably used the developer console that every browser provides. Wherein you can see your logs, errors etc. The Console in Web Maker is a similar thing, though it might not be that advanced...yet. You can do most basic things you do in the browser's developer console, without actually opening it! This is how it looks:

Web Maker's inbuilt Console

How is a Console useful?

Having a Console right there, makes your much more productive and efficient in multiple ways. First of all, you won't have to open the browser's developer console in most cases...we all know how it can be slow at times.

You often use various log functions in your code, like console.log, console.error etc. All these logs show up in the inbuilt Console. Moreover, if there is any runtime error in your JavaScript code, it would show up too in the Console, thus making your debugging very quick and easy.

Apart from this, you can also evaluate any custom JavaScript code in your preview's context right from the Console. Just type it in the console input and press Enter.

I had real fun developing Console into Web Maker. Hope it makes you more productive. If you loved this new feature, tweet out your love to @webmakerapp. Cheers!

Web Maker, an Offline, Browser-based CodePen Alternative

2017-02-15T00:00:00+00:00

Web Maker: Preventing Infinite Loops

2017-02-10T00:00:00+00:00

The Problem

When you write JavaScript in Web Maker, it renders that JavaScript inside the preview window in realtime. What this means is in case you using any loop structure in your code, there will probably be a point when you mid way defining your loop variables, conditions, variant etc. And at that point if Web Maker renders your JavaScript, it would result in an infinite loop. Lets see with an example. Suppose I want to write a for loop to iterate 10 times, I'll start with

for (var i = 0; i < 10; [cursor_here]) {}

Note that my cursor would be where it says [cursor_here] and I am still defining my loop and going to write i++ there. But as we render in realtime, this incomplete code would get executed in preview, resulting in an infinite loop.

Therefore we need a way to prevent such intermediate incomplete loops from running infinitely and choking the browser.

Solution

There is a lot of discussion on the Web regarding how difficult it is to detect an infinite loop in runtime, simply because any runtime cannot actually diffrentiate between a normal loop and one that is going to run infinitely. There are some analyzers that try to solve this issue but static analysis can only do so much.

The approach Web Maker takes to solve this is by keeping a check on the time spent inside a loop. To be specific, I check if the loop isn't taking more than 1 second. Otherwise its marked as an infinite loop. To be able to keep track of this time, we need to have a time check inside the loop and hence this requires changing the actual loop code, also called as Code Instrumentation.

So if we have a code like this:

for (var i = 0; i < 10; ) {}

After our instrumentation, it should change to:

var startTime = Date.now();
for (var i = 0; i < 10; ) {
  if (Date.now() - startTime > 1000) {
    break;
  }
}

To analyze a piece of code, we need a JavaScript parser. I used Esprima for that. Lets see how we can use Esprima to instrument our code.

Detecting a loop

Esprima converts a string of JavaScript code into an Abstract Syntax Tree (AST), which is basically a tree like structure representing the code snippet.

function instrumentCode(code) {
  var ast = esprima.parse(code);
}

To get a sense of what an AST looks like, lets run esprima on the following code:

var foo = 3;
for (var i = 0; i < 10; i++) {}

This is what we'll get:

Esprima's Abstract Syntax Tree

Notice how the return AST is a repeating nested array structure (body inside body), with each identifiable unit as an instance of some class. Eg. VariableDeclaration, ForStatement etc. This is something we can easily traverse using recursion, like so:

function processAst(ast) {
  var currentElement;
  // If this ins't actual body, recurse with the body
  if (!Array.isArray(astBody)) {
    processAst(astBody.body);
    return;
  }
  // Traverse the body
  for (var i = ast.length; i--; ) {
    var currentElement = ast[i];

    // Process `currentElement` here

    // Recurse on inner body
    if (currentElement.body) {
      processAst(currentElement.body);
    }
  }
}
function instrumentCode(code) {
  var ast = esprima.parse(code);
  processAst(ast);
}

With the above code in place, we'll keep getting different syntax structures in currentElement. Next, we check them and inject the actual loop protection code.

Injecting the loop protection checks

We are concerned when currentElement is a for, while or do-while loop. This can be checked by simply testing currentElement.type. Lets add that.

function processAst(ast) {
  var currentElement;
  // If this ins't actual body, recurse with the body
  if (!Array.isArray(astBody)) {
    processAst(astBody.body);
    return;
  }
  // Traverse the body
  for (var i = ast.length; i--; ) {
    var currentElement = ast[i];

    if (
      (currentElement && currentElement.type === "ForStatement") ||
      currentElement.type === "WhileStatement" ||
      currentElement.type === "DoWhileStatement"
    ) {
      // We got a loop!
    }
    // Recurse on inner body
    if (currentElement.body) {
      processAst(currentElement.body);
    }
  }
}

Next we need two of our statements to be injected in AST syntax. For that we can again use esprima. Once we covert the statements into AST objects, its just a matter of adding them to the right body in our AST.

if (
  (currentElement && currentElement.type === "ForStatement") ||
  currentElement.type === "WhileStatement" ||
  currentElement.type === "DoWhileStatement"
) {
  var ast1 = esprima.parse("var myvar = Date.now();");
  var ast2 = esprima.parse(
    "while(a){if (Date.now() - myvar > 1000) { break;}}"
  );
  var insertionBlocks = {
    before: ast1.body[0],
    inside: ast2.body[0].body.body[0]
  };
}

Notice, that we have assigned the current time in myVar. Now there could be multiple loops (even nested) in a single code snippet and they all need to be handled with their unique variables. So we replace the variable names in our insertion blocks with a 3 digit random string:

if (
  (currentElement && currentElement.type === "ForStatement") ||
  currentElement.type === "WhileStatement" ||
  currentElement.type === "DoWhileStatement"
) {
  var ast1 = esprima.parse("var myvar = Date.now();");
  var ast2 = esprima.parse(
    "while(a){if (Date.now() - myvar > 1000) { break;}}"
  );
  var insertionBlocks = {
    before: ast1.body[0],
    inside: ast2.body[0].body.body[0]
  };
  randomVariableName = "_" + generateRandomId(3);
  insertionBLocks.before.declarations[0].id.name = insertionBLocks.inside.test.left.right.name = randomVariableName;
}

All that is left now is to insert the insertion blocks at right places:

if (
  (currentElement && currentElement.type === "ForStatement") ||
  currentElement.type === "WhileStatement" ||
  currentElement.type === "DoWhileStatement"
) {
  var ast1 = esprima.parse("var myvar = Date.now();");
  var ast2 = esprima.parse(
    "while(a){if (Date.now() - myvar > 1000) { break;}}"
  );
  var insertionBlocks = {
    before: ast1.body[0],
    inside: ast2.body[0].body.body[0]
  };
  randomVariableName = "_" + generateRandomId(3);
  insertionBLocks.before.declarations[0].id.name = insertionBLocks.inside.test.left.right.name = randomVariableName;

  // Insert time variable assignment as first child in the body array.
  ast.splice(i, 0, insertionBLocks.before);

  // If the loop's body is a single statement, then convert it into a block statement
  // so that we can insert our conditional break inside it.
  if (!Array.isArray(el.body)) {
    currentElement.body = {
      body: [el.body],
      type: "BlockStatement"
    };
  }

  // Insert the `If` Statement check
  currentElement.body.body.unshift(insertionBLocks.inside);
}

And we are done.

You can also see the actual Web Maker source code for this logic.

HTML5 mode without server-side code

2016-07-09T00:00:00+00:00

Issue

If you ever worked on a Single Page App (SPA), you would know that the URLs in the app either work using hash(#) or without hash - also called as HTML5 mode in most frameworks. For HTML5 mode to work though, you need to write server-side rewrite code to always serve index.html for every page requested.

Eg. www.yourapp.com/product/13 or www.yourapp.com/user/setting should all respond with index.html because in SPAs, there are no separate html files that can directly/independently render in the browser, except index.html.

But what if you could get the HTML5 mode working without any server-side code?

The Trick

I read this trick on Coderwall sometime back and decided to give it a shot. The trick is simple, if you do not have proper rewrite rules on the server, requesting a URL like www.yourapp.com/user/13 would try fetching a resource on the path user/13/, which isn't actually present. So your app would send in a 404.html in this case. But we want it to respond with index.html. What if we make 404.html same as index.html?? 😎

For this demo, I have implemented a basic SPA using Vue.js as the JavaScript framework and deployed it on Github pages.

Demo
Source

The main thing to notice there is if you refresh the app on a path other than https://kushagragour.in/vuejs-html5mode/, you would see a 404 in the network panel.

Things to keep in mind

First, you would have a 404 from the server when a user lands on any path other than the root. No big deal, just that there would be a red entry in the network panel.

Second, and more importantly, you are using your 404 page to make an index.html clone. That means that you no more have a real 404 page to show to your users. One way I think of to fix this is by having a script in 404.html that validates the current URL for valid URL and if its not, renders the 404 stuff instead of usual index.html contents.

Using background color in currentColor

2016-01-31T00:00:00+00:00

I had the following situation recently - I have a container with some background color and it needs to have an arrow coming out from inside of the same background color. I implemented the arrow using :after pseudo element. Something like this:

.container {
  display: inline-block;
  padding: 30px;
  background-color: indianred;
  position: relative;
}

/* Arrow */
.container:after {
  content: "";
  display: block;
  position: absolute;
  left: 100%;
  top: calc(50% - 10px);
  border: 10px solid transparent;
  border-left-color: indianred;
}

Now this code works, but the container could be multi-colored and also the arrow can show either right or left for any container. With above implementation, for each different container, we'll have to change the border color as well like so:

/* Modifier for a container having left arrow */
.container--inverted:after {
  left: auto;
  right: 100%;
  border-left-color: transparent !important;
}

/* New container */
.container--2 {
  background-color: skyblue;
}

/* Arrow */
.container--2:after {
  border-left-color: skyblue;
}
.container--2.container--inverted:after {
  border-right-color: skyblue;
}

Bad Demo:

See the Pen BjVPNJ by Kushagra Gour (@chinchang) on CodePen.

Issues

This code has 2 visible issues:

Not DRY - Every new container has to define the color of its arrow by specifying the border color and that too 2 times, one for left and right each. So in total we'll need to write a single color value 3 times for every container...too much repeatition.
Coupling - The container styling needs to be aware of the arrow implementation, whether its using border trick or something else. Changing the arrow implementation in future will require changing it for every container.

Solution

One thing that might come to your mind to prevent these issues is currentColor. Close enough, just that currentColor refers to the color property and not background-color. Bummer!

To overcome this limitation I came up with a trick I call currentColor propagation :) The trick is basically to propagate background-color to color property of the arrow and then use currentColor for coloring arrows! That solves both our issues:

.container {
  /* Other styles here */
  background-color: indianred;
}
.container:after {
  /* Other styles here */
  color: indianred;
  border-left-color: currentColor;
}
.container--inverted:after {
  border-left-color: transparent;
  border-right-color: currentColor;
}

/* Modifiers can just be like so */
.container--2 {
  background-color: skyblue;
}
/* Arrow */
.container--2:after {
  color: skyblue;
}

Yes, we need still need to mention color 2 times for each new container, but still better than 3 times. More importantly, all the arrow related code is just at one place and not duplicated for each container. Plus we don't have to use that dirty !important and have much less code.

Improved Demo:

See the Pen BjVPNJ by Kushagra Gour (@chinchang) on CodePen.

Thats it for this article. Hope it will help you sometime :)

2015 - Year in review

2015-12-31T00:00:00+00:00

Another year passed and its review time :) But this time instead of reviewing the year month wise, I'll do it in few categories.

Tech

This has to be the first category for review as this is what I love to do the most.

Perfaudit

PerfAudit was this year's first side project that I did with my colleague Apoorv. We did case-studies for some awesome websites, helped people make their sites faster and got lot of appreciation. It was fun.

cta.js

Cta.js is a JS library I wrote inspired from Paul Lewis' technique to performantly transition DOM elements.

konsole.table, super-search & screenlog.js

3 more JS shorties I did. konsole.table was my first npm module which provides `console.table` in node environment. And super-search is a JS library to enable search feature in any blog/website having an RSS feed.
screenlog.js makes it possible to use `console` statements without opening the console in your browser.

Prototyp

Then I did one of my most "useful" app of the year :P I had started playing with Framer.js and was really impressed with what one can do with it very easily. But the editor for it is paid and just available for mac. So I decided to build a web app over Framer.js which is free and works across platforms.
I would say this is by far the closest I have come to creating a product :) Hope to make it more usable in coming time

Kalu

Kalu was a calculator concept I implemented using codemirror editor. It aims at making long inter-linked calculation easy.

Word Blast Game

The only game I did this year was for JS13KGames compo. Wanted to make more games though.

lollipop.css

A self-learning experiment to implement Android Lollipop animations in pure CSS.

Code Blast plugin for Codemirror

A hack trigerred by someone's hack. Too much of fun :P

Art

INKtober

INKtober is a challenge where people draw something on every day of October. This was my first and although I couldn't draw all 31 days, I managed to pull off quite a few and had a very happy time doing it. Heres a summary of it but checkout all of them on my art blog.

Bematlab

I started Bematlab last year and this year I added content whenever I got time and ideas. Drawing is fun! Ideas are rare! Heres one of my favourite from this year.

Music

Not much here. I practiced beatboxing and playing flute occasionally. Also released a small beatbox+flute piece.

Sports

Football with office pals

We made an unofficial WingifyFC at Wingify :) We have started playing on Sat/Sun, then shifted to Wed/Fridays, then just fridays and then stopped in the end :P We'll definitely start it again and also have a tournament coming up this January :)

Won TT doubles tournament

A TT double tournament was organized at Wingify. I and Varun won that :)

Marathon

I ran a 7KM marathon...in Leh, Ladakh with my friend Manpreet :)

Conferences

Attended MetaRefresh conference in Bangalore where we (wingify) were a sponsor and Apoorv gave a talk. It was all fine until...there was a Karnataka-bandh and we had to stay for hours on Bangalore airport :(

Travel

Chamba, Himachal

An awesome trip to Chamba/Khajjiar/Dalhousie with Kamal, Ajay, Hariom and Gillz (Vivek). First time in Himachal :) More pics.

Kasol, Himachal

Full Wingify Engineering team outing.

Leh, Ladakh

No words to speak about this trip. Beautiful mountains, clean roads and absolute silence. You have to be there to experience it. And I must say, the food is just top class in Leh! More pics.

Jim Corbett, Uttarakhand

Full Wingify Engineering team outing, again :) We saw no tiger, infact no animal. Just chilled at the resort. We are playing mafia in above still.

Laangkawi, Malaysia

Wingify's year end trip with 100+ people :) It was amazing to see 100+ wingifians fill up the complete airport, plane, then the resort, beaches! Did para-sailing for first time. Last trip of year, absolute fun.

Work

First time campus recruitment

After 4 years out of college, I was in a campus (DTU) for recruiting engineers. Good first time experience :P

Focusing on DX along with UX

This year I shifted my partial focus from User experience (UX) to Developer experience (DX, self-invented term). DX means I work towards making life of developers easy in every aspect, whether its writing code or releasing it. That involves things like automating stuff and is a refreshing change for me.

BSP

We organized our first Bug squashing party at office. Quite a success I would say.

New office

Our product team at Wingify moved to a new office. New environment, new vibes, less distraction.

Hackathon

I made an app called Gamjeong along with Dheeraj at a hackathon we had at Wingify. It send you push notifications for tweets that match the keyword and sentiment you say.

Misc

Rubiks Cube

Beginning this year, I started solving rubiks cube. Apart from getting down from 5 minutes/solve to 50 seconds/solve, best thing was perseverance. I kept practicing it the whole year...probably because its too handly and I keep playing with it in buses, trains, boring weddings and where not :)

Started Cardistry

A month back I also started Cardistry and some basic sleight of hands tricks with cards. Its very interesting and exciting. Will post my first video on cardistry soon :)

New Car

Got a new car for my Dad :)

More gaming

Bought a PS3 and have started playing games again after a long gap. Good to be back!

Summary

I created a lot of open source stuff, travelled a lot (by my standards). As far as art and music is concerned, I wanted to do more.

For 2016 (in no order)

Create and release more amazing stuff, as usual. More on product side instead of small libraries.
Draw more often
Release some music pieces
Start a tech podcast
Travel to more places
Work towards making someone's life better
Help bro with Prakriti

Adding search in your jekyll blog

2015-06-08T00:00:00+00:00

I recently implemented search on this website (made in Jekyll). Its a complete client-side search and hence very quick and easy to use. To try it out, press the '/' or ESC key and type something.

There are not too many articles out there on implementing a functional post search on a Jekyll blog, so I thought of writing about it. The following method described works over your blog's RSS feeds. So make sure you have your RSS feed URL ready. If you have a jekyll/octopress blog, chances are you already have a feed.xml in your root folder. If not, read here.

tl;dr

super-search - A library to easily add search on your jekyll or any other blog.

Lets start implementing the search.

Fetching the RSS feeds.

First thing we need to do is fetch the RSS feed XML. This is simple with XMLHttpRequest. We fetch the XML and create a DOM out of it for parsing later.

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "/feed.xml");
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState != 4) return;
  if (xmlhttp.status != 200 && xmlhttp.status != 304) {
    return;
  }

  // Create a DOM out of the XML string.
  var node = new DOMParser().parseFromString(xmlhttp.responseText, "text/xml");
  node = node.children[0];
  posts = xmlToJson(node).channel.item;
};
xmlhttp.send();

Parsing XML feeds into JSON

This can be done by traversing the XML tree and creating a JavaScript object as we go. I used David Walsh's xmlToJson function with some modifications to make it more suitable:


function xmlToJson(xml) {
	// Create the return object
	var obj = {};
	if (xml.nodeType == 3) { // text
		obj = xml.nodeValue;
	}

	// do children
	// If just one text node inside
	if (xml.hasChildNodes() && xml.childNodes.length === 1 && xml.childNodes[0].nodeType === 3) {
		obj = xml.childNodes[0].nodeValue;
	}
	else if (xml.hasChildNodes()) {
		for(var i = 0; i < xml.childNodes.length; i++) {
			var item = xml.childNodes.item(i);
			var nodeName = item.nodeName;
			if (typeof(obj[nodeName]) == "undefined") {
				obj[nodeName] = xmlToJson(item);
			} else {
				if (typeof(obj[nodeName].push) == "undefined") {
					var old = obj[nodeName];
					obj[nodeName] = [];
					obj[nodeName].push(old);
				}
				obj[nodeName].push(xmlToJson(item));
			}
		}
	}
	return obj;
}

Now you get a simple to use JavaScript object to search upon.

Matching the input with post data

Now all that remains is taking user input and matching it with the parsed posts we have. In my implementation, matching posts are ones which contain the input string in their title or full content.


document.querySelector('#your-search-input').addEventListener('input', onInputChange);

function onInputChange(e) {
	var currentInputValue = e.target.value,
		date;

	// We ignore input of less than 3 characters in length.
	if (!currentInputValue || currentInputValue.length < 3) {
		return;
	}

	// Filter out all posts that have entered string in their
	// title or description.
	var matchingPosts = posts.filter(function (post) {
		if (post.title.indexOf(currentInputValue) !== -1 || post.description.indexOf(currentInputValue) !== -1) {
			return true;
		}
	});

	document.querySelector('#your-results-container').innerHTML = matchingPosts.map(function (post) {
		date = new Date(post.pubDate);
		return '' + post.title + '' + date.toUTCString().replace(/.*(\d{2})\s+(\w{3})\s+(\d{4}).*/,'$2 $1, $3') + '';
	}).join('');
}

And done! You have a quick search system in your blog.

Thats not all!

I am releasing a library which implements the search system described above and even much more addons. Presenting super-search, an easy to add search system for your blog. It works equally good with any blog having RSS feed file.

Simply add the JS and CSS files to your blog:


<script src="super-search.js"></script>
<link rel="stylesheet" href="super-search.css">

And initiate the library at the end of your page (before closing BODY tag):


superSearch();

Now enjoy a fast search system on your blog. Read more about it here.

Until next time!

Journey with Rubik's Cube

2015-04-04T00:00:00+00:00

Yes, I started playing with Rubik's cube recently. I have had rubik's cube (very cheap one though) since I was 14, but it was just time-pass then. I didn't know how to solve it. It was just one-sided play (if you get what I mean) as I could figure how to solve only one side completely. But this January my cousin came to our place for his vacations and he brought along a rubik's cube (probably just like me back then). As anyone would do now-a-days to know how something is done, I google-d too. And a lot of videos on how to solve rubik's cube showed up. Me and my cousin together learned how to solve the cube with the very basic method and have been practicing since then. I am writing this post to document the approach I have taken to learn whatever I know on solving a 3x3x3 rubik's cube. Lets start.

Learning Beginner's method

My very first step was a youtube video explaining the most basic method for solving a 3x3x3 rubik's cube, also called as "Beginner's method".

It requires you to know very few algorithms (5 to be exact) and is obviously a little slower compared to other methods. Once I had all the 5 algorithms by heart, I was able to solve a 3x3x3 cube in around 10 minutes on average. Remember this was with a very okayish cube.

Average Time: ~ 10 minutes

Getting a new cube

As soon as my cousin left, I ordered a new cube online. It was a Taxton T-3 stickerless speedcube. It was damn smooth and I could just turn it the whole day. My solve times on that cube improved a lot, got almost 2x faster!

Average Time: ~ 5:20 minutes

Getting faster with finger tricks

I kept seeing videos of rubik's cube championships and various tips and tricks on solving the cube faster. Soon it became clear that to lower my solve time I had 2 options:

Learn a faster method of solving (Fridrich method)
Get faster with what I already knew

Upon a quick glance at the Fridrich method, I realized it was better not to take it at that time :P It has huge number of algorithms that one needs to learn to execute it perfectly. All rubik's cube champions use this method, in pure or derivative form. So I went with the second option, also called as finger tricks in puzzle world.

Finger tricks basically refers to using your fingers to turn the cube instead of using complete hand (which is slower). Also it emphasizes on smooth transitions from one algorithm to another without wasting much time in getting ready to execute the next one. This is how those sub-20 second guyz are able to turn the cube layers sooooo fast! So I got down to this, practicing each algorithm individually I knew whenever I got time - in bus, train, office, home...everywhere. I actually did not do even a single solve for about 2 weeks, just practice individual algorithms and developing my own finger turn-style. And then I did a timed solve just to show a colleague I could also solve the cube apart from just turning it seemingly ad-hoc - I did it in 2:40 minutes that day!

Average Time: ~ 3 minutes

Move to Fridrich Method?

Getting down to 3 minutes on average, I started feeling that I was not able to go lower than that. Also honestly I was getting a little bored with doing those algorithms over and over and over again. So I decided on giving Fridrich method a shot. Fridrich method involves large no. of algorithms which can be divided into categories:

to solve 1st and 2nd layer - F2L
to solve 3rd layer - PLL and OLL

Approaching step by step, I decided to learn F2L (first two layers) first. F2L basically aims at solving the first 2 layers together as opposed to solving then one after other in beginner's method. Plan was to get F2L perfect for first 2 layers and use the already know algorithms for the 3rd layer. So I started learning and practicing F2L algorithms. There being too many of them, I felt friction in learning them :P So I looked for easier ways to perform F2L. There are quite a few nice tutorials on easier F2L method which is also called as intuitive F2L.

I practiced it for a week, but the results were not very impressive. I hardly got any better with F2L. I realized it was not a flaw with the method itself, but the time I devoted to it. It demands much much more time to get better with it.
It was at this time when I saw a video on youtube where a guy could do a 3x3x3 solve in under 20 seconds with beginner's method! The trick was simple - faster turns. So I decided to do away with F2L and focus back on my finger tricks.

Average Time: ~ 3 minutes

More practice - cross and 3rd layer algorithms

I focused for a while on improving my cross times and 3rd layer algorithms. Meanwhile I also came to know about a technique called look-ahead that advanced level solvers use to avoid time spent in figuring out the next move. I realized it was a very essential technique to get faster considering that my most of the time was spent in actually rotating the cube to see what to execute next. But this comes only with time and practice. I tried practicing look-aheads for 2nd layer.

I bought another cube so that I didn't have to scramble after every solve during solve sprints :P It is a Shengshou 3x3x3 sticker cube. Much better than the taxton T-3. I love its turn sound!

Average Time: ~ 100 seconds

These days...

I have been focusing more on improving the individual steps rather than complete solves lately.

Faster cross
2nd and 3rd layer algorithms
2nd layer look-ahead

Here is a sample solve in 76 seconds:

My aim is to get atleast sub-60 seconds with just beginner's method before I move onto learning more advanced techniques. Wish me luck. Looking forward to hear your rubik's cube experiences.

2014 - Year in review

2014-12-31T00:00:00+00:00

Guess what...it has been an year since I last wrote a post here! Time has passed by pretty quickly (as always) this year. This post is just a written log of things that (did_happen && I_remember) this year. Lets begin.

January

2014 began with a bang. I published this year's first (and last too) blog post on learning GIT by implementing it in JavaScript. The post received a lot of appreciation on Hackernews. In short, people loved it. I had one or two further parts for this article, though I never couldn't take out time to finish them. 2015, may be :)

April

Nothing major here, but I had some really good 3-4 days with my awesome engineering team at Wingify. We were in the middle of our product's revamp and it had taken a lot of time already. Our engineering team was a little stressed out along with being excited. So we decided to leave our office for a few days and marched out to 'The Westin Sohna Resor'.

All techie ppl inside one huge villa at such an awesome place writing code till 6 in the morning and pool games in the evening...crazy time it was.

June

One of the biggest acheivement this year. Months and months of effort by our engineering team at Wingify - VWO 3.0 finally released on June 25th. It was really a festive environment at the office. Everyone was super relaxed and extremely happy with what a bunch of cool engineers had created.

I also released my first ever music piece in June. It was a beatbox on MJ's Billie Jean.

July

Our cow, Bahula, gave a cute baby boy this month. We named him 'Krishna' as he was dark in color. But with time his name got reduced to just 'Kalu' :D Yeah, that is what we call him now :)

September

Our complete engineering team went on a trip to the beautiful land of Nepal.. That place is amazing I must say. We did a small trek there and went on a bicycle sprint in Pokhra. Super fun-filled 4 days.

Wingify sponsored JSFoo this year which is a JavaScript conference in Banglore, India. So a bunch of people from engineering went there to setup a booth for 2 days. It was my first time attending a conference from sponsor point of view. It was nice altogether. I also gave a small hiring pitch on stage there in 'Hindi' which received an applause from the audience :P

November

November was kickass! I spoke at a conference for the first time. And guess which conference it was - CSS Conf Asia! It was really a great experience to be speaking on CSS, at such a big conference, in front of such awesome people and along with such great co-speakers. My talk went better than expected. People applauded and people laughed - that is all I wanted. Though I couldn't interact face to face much there :p I guess I'm a digital geek.

![](/images/2014/cssconf2.jpg)

Plus I went to Universal Studios, Singapore. The most amazing thing there was the transformers ride...can't explain it in words. Had lots of fun with my friends - Himanshu and Kushagra.

I also started maintaining a travelouge in this trip: http://travel.kushagragour.in/

December

On December's first day I finally started my Facebook page - "Bematlab". A place where I do what I love - draw & crack PJs, together :D Here is a latest comic from there:

I also released my second beatbox piece, this time a jam with a friend.

In the end was Wingify's year end outing! We went to Krabi, Thailand. Water-water everywhere. Had nice time there.

Summary

This year I travelled, drew stuff, attended a conference, spoke at a conference, created music, bought lots of toys, collected more flutes, worked on lots of side projects (couldn't release any though), spent more time with family and friend, learnt stuff. Hint.css reached 3000 stars on github.

For 2015 (in no order)

Create and release more amazing stuff
Take 'Bematlab' to next level
Draw more
Get better at Beatboxing
Collaborate more with other artists and programmers
Travel to more places
Learn something new everyday

Build GIT - Learn GIT (P1)

2014-01-20T00:00:00+00:00

If you are reading this post, you probably are using Git or want to use Git. I am a big fan of Git and also those posts where people implement some piece of an existing technology in order to understand how their work in the core. Point being that if you have implemented something, you obviously know how it works, right? This is one such post written to spread my love for Git. Yes, we'll implement Git!...in JavaScript.

This part implements basics of the following concepts:

Repository.
Commit.
Commit chaining.
Branch.

All the code written is available in a Github repo:

Github Repo

What is Git?

There is a very simple definition of Git at kernel.org:

Git is best thought of as a tool for storing the history of a collection of files.
- kernel.org

Yeah, that is essentially why one uses Git...to maintain a history of changes in a project.

Repository (repo)

When you want to use Git in your project, you create something called a Repository. Now we could refer the Git documentation which defines a repo as follows:

A collection of refs together with an object database containing all objects which are reachable from the refs, possibly accompanied by meta data from one or more porcelains. A repository can share an object database with other repositories via alternates mechanism.
- kernel.org

Well, that is too much to grasp, isn't it? And that is not what we are here for. So lets make things simple.
Consider a Git repository as a collection of everything related to Git. So when you make a project folder a Git repo, Git basically creates some of its internal stuff there and encapsulates them into it. Having said that, lets make a simple class called Git which will basically represent a repo.

function Git(name) {
  this.name = name; // Repo name
}

Great! Now making a repo simply requires us to instantiate the Git class passing in the name of the repo:

var repo = new Git("my-repo");

// Actual command:
// > git init

Commit

Next concept one needs to know about is a Commit. In very simple terms, a commit is a snapshot of your project's contents. It is these commits which when chained together form the history of your project.

From the looks of it, a simple Commit class would have and id to reference it and a change containing the snapshot of change made. Understanding how a change is actually stored is beyond the scope of this implementation. So lets drop the change part and assume that every commit has the change with it:

function Commit(id) {
  this.id = id;
  // Assume that 'this' has a 'change' property too.
}

In Git, when you commit after making some changes, you can give it a message which describes the change you are commiting. This is called the commit message which we'll add to our Commit class:

function Commit(id, message) {
  this.id = id;
  this.message = message;
}

Lets add the ability on our Git class to create a commit or commit (verb):

Git.prototype.commit = function (message) {
  var commit = new Commit();
  return commit;
};

We add a function called commit on the Git prototype. It accepts a string message, creates a new Commit instance and returns it. Note that we are not passing in anything yet in the Commit constructor. We need an id to give to the new commit. We'll make the Git class keep track of the commit ids by keeping a counter called lastCommitId with it:

function Git() {
  this.lastCommitId = -1;
}

Note: In actual Git, commit id is a 40-hexdigit number also called as "SHA-1 id". But for keeping things simple we are using integers here.

The commit function can now pass a new id (incremented) along with the message in the constructor:

Git.prototype.commit = function(message) {
  var commit = new Commit(++this.lastCommitId, message);
  return commit;
};

We can now commit anytime like so:

repo.commit("Make commit work");

// Actual command:
// > git commit -m "Make commit work"

Match your code

At this point you should have your implementation that looks like the one here. I have wrapped the whole code in an Immediately invoking function expression (IIFE) and exposed the Git class manually to keep global space clean.

Commit history - chaining the commits

Git has a command called log which shows the commit history in reverse chronological order, i.e. first the lastest commit followed by previous ones.

Lets implement this log command as a method on our Git class. Our log function will return an array of commits in reverse chronological order.

Here is a simple test which should pass for our log function:

console.log("Git.log() test");
var repo = new Git("test");
repo.commit("Initial commit");
repo.commit("Change 1");

var log = repo.log();
console.assert(log.length === 2); // Should have 2 commits.
console.assert(!!log[0] && log[0].id === 1); // Commit 1 should be first.
console.assert(!!log[1] && log[1].id === 0); // And then Commit 0.

Onto the implementation.

Git.prototype.log = function () {
  var history = []; // array of commits in reverse order.

  // 1. Start from last commit
  // 2. Go back tracing to the first commit
  // 3. Push in `history`

  return history;
};

The log function has only pseudo code right now in form of comments which tell us the logic of the function. To implement such logic 2 requirements arise:

We need to know the last commit.
Every commit should somehow know which commit was made before it.

We have a failing test case right now:

Build Git - Learn Git (part 1)

Lets take up the first requirement: Knowing the last commit.

Git has something called a HEAD. In actual Git it is simply a pointer to your current branch. But since we have not covered branches yet, we'll relax the definition here...temporarily.

What we'll do is add a property called HEAD in the Git class which will reference the last commit's Commit object:

function Git(name) {
  this.name = name; // Repo name
  this.lastCommitId = -1; // Keep track of last commit id.
  this.HEAD = null; // Reference to last Commit.
}

HEAD will be updated everytime a commit is made i.e. in the commit() function.

Git.prototype.commit = function(message) {
  // Increment last commit id and pass into new commit.
  var commit = new Commit(++this.lastCommitId, message);

  // Update HEAD and current branch.
  this.HEAD = commit;

  return commit;
};

Simple! Now we always know which was the last commit made.

Getting on the 2nd requirement: Every commit should somehow know which commit was made before it. This brings up the concept of parent in Git. Commits in Git are kept together in form a data structure called Linked Lists. Simply put, in a Linked List every item stores with itself a pointer to its parent item. This is done so that from every item, we can reach its parent item and keep following the pointers to get an ordered list. This diagram from Wikipedia will will make more sense:

For this, we add a property called parent in the Commit class which will reference its parent commit object:

function Commit(id, parent, message) {
  this.id = id;
  this.parent = parent;
  this.message = message;
}

The parent commit also needs to be passed into the Commit constructor. If you think, for a new commit what is the parent/previous commit? Yes, the current commit or the HEAD.

Git.prototype.commit = function (message) {
	// Increment last commit id and pass into new commit.
	var commit = new Commit(++this.lastCommitId, this.HEAD, message);

Having our requirements in place, lets implement the log() function:

Git.prototype.log = function () {
  // Start from HEAD
  var commit = this.HEAD,
    history = [];

  while (commit) {
    history.push(commit);
    // Keep following the parent
    commit = commit.parent;
  }

  return history;
};

// Can be used as repo.log();
// Actual command:
// > git log

Our test should pass now:

Build Git - Learn Git (part 1)

Match your code

At this point our code looks like this.
Next up is Branches!

Branches

Hurray, we have reached at the most interesting & powerful feature of Git: Branches. So what is a Branch and what is it used for?

Imagine this scenario, you are working on a project making commits now and then. At some point may be you or one of your teammate wants to experiment something on your current work, say a different algorithm. You could surely keep making those experimental commits, but remember this was your experiment and hence not guaranteed to be kept in the main project. This way you polluted your main project.

Branches to the rescue. What you need to do here is branch out from your current line of commits so that the commits you make do not pollute the main line of development.

To quote the definition at kernel.org:

A "branch" is an active line of development. The most recent commit on a branch is referred to as the tip of that branch. The tip of the branch is referenced by a branch head, which moves forward as additional development is done on the branch. A single git repository can track an arbitrary number of branches

Lets understand what a branch is. A branch is nothing but a mere pointer to some commit. Seriously, that is it. That is what makes branches in Git so lightweight and use-n-throw type. You may say HEAD was exactly this. You are right. The only difference being that HEAD is just one (because at a given time you are only on a single commit) but branches can be many, each pointing to a commit.

The 'master' branch

Each Git repo when initialized comes with a default branch called master. Lets understand branches through some diagrams from git-scm.com:

You create a new repository and make some commits:

Then you create a new branch called testing:

Nothing much, just a new pointer called testing to the lastest commit.
How does Git know which branch you are on? Here comes the HEAD. HEAD points to the current branch:

Now comes interesting part. Being on testing branch you make a commit. Notice what happens:

From now on, the testing branch/pointer only moves and not master. Looking at the above diagram and keeping our log() algorithm in mind, lets see what history would each branch return.

testing branch: Currently we are on testing branch. Moving backwards from HEAD(commit c2b9e) and tracking the visible linkages, we get the history as:
|c2b9e| -> |f30ab| -> |34ac2| -> |98ca9|
master branch: If we switch to master branch, we would have a state as follows:

Now tracing back from HEAD gives us the history as:
|f30ab| -> |34ac2| -> |98ca9|

You see what we acheived? We were able to make some experimental changes/commits without polluting the main branch (master) history using branches. Isn't that cool!!!

Enough said, lets code. First lets make a new class for a branch. A branch, as we saw, has a name and a reference to some commit:

function Branch(name, commit) {
  this.name = name;
  this.commit = commit;
}

By default, Git gives you a branch called master. Lets create one:

function Git(name) {
  this.name = name; // Repo name
  this.lastCommitId = -1; // Keep track of last commit id.
  this.HEAD = null; // Reference to last Commit.

  var master = new Branch("master", null); // null is passed as we don't have any commit yet.
}

Remember we changed the meaning of HEAD in the beginning as we were still to cover branches? Its time we make it do what its meant for i.e. reference the current branch (master when repo is created):

function Git(name) {
  this.name = name; // Repo name
  this.lastCommitId = -1; // Keep track of last commit id.

  var master = new Branch("master", null); // null is passed as we don't have any commit yet.

  this.HEAD = master; // HEAD points to current branch.
}

This will require certain changes in the commit() function as HEAD is no longer referencing a Commit but a Branch now:

Git.prototype.commit = function(message) {
  // Increment last commit id and pass into new commit.
  var commit = new Commit(++this.lastCommitId, this.HEAD.commit, message);

  // Update the current branch pointer to new commit.
  this.HEAD.commit = commit;

  return commit;
};

And a minor change in log function. We start from HEAD.commit now:

Git.prototype.log = function () {
	// Start from HEAD commit
	var commit = this.HEAD.commit,

Everything works as before. To really verify what we deduced in theory by calculating history of those 2 branches above, we need one final method on our Git class: checkout.

To begin with, consider checkout as switching branches. By default we are on master branch. If I do something like repo.checkout('testing'), I should jump to testing branch...provided it is already created. But if its not created already, a new branch with that name should be created. Lets write a test for this method.

console.log("Git.checkout() test");
var repo = new Git("test");
repo.commit("Initial commit");

console.assert(repo.HEAD.name === "master"); // Should be on master branch.
repo.checkout("testing");
console.assert(repo.HEAD.name === "testing"); // Should be on new testing branch.
repo.checkout("master");
console.assert(repo.HEAD.name === "master"); // Should be on master branch.
repo.checkout("testing");
console.assert(repo.HEAD.name === "testing"); // Should be on testing branch again.

This test fails right now as we don't have a checkout method yet. Lets write one:

Git.prototype.checkout = function (branchName) {
  // Check if a branch already exists with name = branchName
};

The comment in above code requires that the repo maintains a list of all created branches. So we put a property called branches on Git class with initially having only master in it:

function Git(name) {
  this.name = name; // Repo name
  this.lastCommitId = -1; // Keep track of last commit id.
  this.branches = []; // List of all branches.

  var master = new Branch("master", null); // No commit yet, so null is passed.
  this.branches.push(master); // Store master branch.

  this.HEAD = master; // HEAD points to current branch.
}

Continuing with the checkout function now. Taking first case when we find an existing branch, all we need to do is point the HEAD, the current branch pointer, to that existing branch:

Git.prototype.checkout = function (branchName) {
  // Loop through all branches and see if we have a branch
  // called `branchName`.
  for (var i = this.branches.length; i--; ) {
    if (this.branches[i].name === branchName) {
      // We found an existing branch
      console.log("Switched to existing branch: " + branchName);
      this.HEAD = this.branches[i];
      return this;
    }
  }

  // We reach here when no matching branch is found.
};

I returned this from that method so that methods can be chanined. Next, incase we don't find a branch with the passed name, we create one just like we did for master:

Git.prototype.checkout = function(branchName) {
  // Loop through all branches and see if we have a branch
  // called `branchName`.
  for (var i = this.branches.length; i--; ) {
    if (this.branches[i].name === branchName) {
      // We found an existing branch
      console.log("Switched to existing branch: " + branchName);
      this.HEAD = this.branches[i];
      return this;
    }
  }

  // If branch was not found, create a new one.
  var newBranch = new Branch(branchName, this.HEAD.commit);
  // Store branch.
  this.branches.push(newBranch);
  // Update HEAD
  this.HEAD = newBranch;

  console.log("Switched to new branch: " + branchName);
  return this;
};

// Actual command:
// > git checkout existing-branch
// > git checkout -b new-branch

Eureka! Now our checkout tests pass :)

Build Git - Learn Git (part 1)

Now the grand moment for which we created the checkout function. Verifying the awesomeness of branches through the theory we saw earlier. We'll write one final test to verify the same:

console.log("3. Branches test");

var repo = new Git("test");
repo.commit("Initial commit");
repo.commit("Change 1");

// Maps the array of commits into a string of commit ids.
// For [C2, C1,C3], it returns "2-1-0"
function historyToIdMapper(history) {
  var ids = history.map(function (commit) {
    return commit.id;
  });
  return ids.join("-");
}

console.assert(historyToIdMapper(repo.log()) === "1-0"); // Should show 2 commits.

repo.checkout("testing");
repo.commit("Change 3");

console.assert(historyToIdMapper(repo.log()) === "2-1-0"); // Should show 3 commits.

repo.checkout("master");
console.assert(historyToIdMapper(repo.log()) === "1-0"); // Should show 2 commits. Master unpolluted.

repo.commit("Change 3");
console.assert(historyToIdMapper(repo.log()) === "3-1-0"); // Continue on master with 4th commit.

This test basically represents the diagrams we saw earlier explaining the working of branches. Lets see if our implementation is inline with the theory:

Build Git - Learn Git (part 1)

Wonderful! Our implementation is right. The final code for this part can be found in GIT repo: git-part1.js.

Github Repo

Whats next?

Next I plan to implement concepts like merging (Fast-forward and 3-way-merge) and rebasing of branches.

I had a lot of fun writing this and hope you enjoyed it too. If you did, share the Git love with others.

Till next time, bbye.

References

https://git-scm.com/book/en/ (Where I learned Git from)
https://www.kernel.org/pub/software/scm/git/docs/gitglossary.html

Update: Join the discussion on HN.

Creating a 3D Cube Image Gallery

2013-08-06T00:00:00+00:00

Getting started with Chart.js

2013-06-02T00:00:00+00:00

I had been recording data from Alexa since Hint.css went live just to track its popularity and reach. Nothing too complex, just maintained a JSON file and added new object in an array for each data point. I had been thinking if I could visualize this data, just for fun. Did try d3.js. Though its a really awesome library for data visualization and all, it surely has some learning curve before you can have something out of it.

Then today I thought, lets try chart.js which had been on HN sometime back. And I must say, its so easy to get started with it and that is probably the reason I am writing this post for anyone who wants to do some chart work really really quick.

Here is what I did.

This is the sample of data I had which I wanted to visualize:

[
  {
    date: "15-12-2012",
    rank: 1896594,
    "sites-linking": 50
  },
  {
    date: "17-12-2012",
    rank: 1895639,
    "sites-linking": 50
  },
  {
    date: "09-02-2013",
    rank: 413592,
    "sites-linking": 47
  },
  {
    date: "12-02-2013",
    rank: 327643,
    "sites-linking": 55
  },
  {
    date: "14-02-2013",
    rank: 313141,
    "sites-linking": 55
  },
  {
    date: "15-02-2013",
    rank: 292197,
    "sites-linking": 55
  },
  {
    date: "25-02-2013",
    rank: 242294,
    "sites-linking": 88
  },
  {
    date: "26-02-2013",
    rank: 234704,
    "sites-linking": 88
  },
  {
    date: "02-03-2013",
    rank: 213869,
    "sites-linking": 100
  }
];

First thing I did was clone the github repo for Chart.js:

git clone git://github.com/nnnick/Chart.js.git
cd Chart.js

In the repo, you'll find a samples/ folder which has some examples of using Chart.js. I needed a line chart, so I opened samples/line.html in Sublime and started reading the code. It was such little code which created a sweet little line graph with subtle animations.

This was the old JS there:

var lineChartData = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      fillColor: "rgba(220,220,220,0.5)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      data: [65, 59, 90, 81, 56, 55, 40]
    },
    {
      fillColor: "rgba(151,187,205,0.5)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      pointStrokeColor: "#fff",
      data: [28, 48, 40, 19, 96, 27, 100]
    }
  ]
};

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(
  lineChartData
);

Next what I did was get my data into that script. So I simply made a variable and assigned my object to it. Also to begin with, I removed one of the data set entry from the array so I can visualize just the rank key:

var myData = [
    {
      date: "15-12-2012",
      rank: 1896594,
      "sites-linking": 50
    },
    {
      date: "17-12-2012",
      rank: 1895639,
      "sites-linking": 50
    },
    {
      date: "09-02-2013",
      rank: 413592,
      "sites-linking": 47
    },
    {
      date: "12-02-2013",
      rank: 327643,
      "sites-linking": 55
    },
    {
      date: "14-02-2013",
      rank: 313141,
      "sites-linking": 55
    },
    {
      date: "15-02-2013",
      rank: 292197,
      "sites-linking": 55
    },
    {
      date: "25-02-2013",
      rank: 242294,
      "sites-linking": 88
    },
    {
      date: "26-02-2013",
      rank: 234704,
      "sites-linking": 88
    },
    {
      date: "02-03-2013",
      rank: 213869,
      "sites-linking": 100
    }
  ],
  lineChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        data: [65, 59, 90, 81, 56, 55, 40]
      }
    ]
  };

If you note in the above code where lineChartData is being created, values corresponding to the data we want to visualize are arrays. To be specific, its the label and data keys in that object. So we need to convert our data into arrays which could be assigned to those 2 keys.

For that I made a small function called mapProperty (inspired from Emberjs) which basically maps the array with only the passed property values.

Array.prototype.mapProperty = function(property) {
  return this.map(function(obj) {
    return obj[property];
  });
};

// Example: myData.mapProperty('rank') to get an array of all ranks

Now all I had to do is use the above function to map my data on appropriate key and assign in the lineChartData:

lineChartData = {
  labels: myData.mapProperty("date"),
  datasets: [
    {
      fillColor: "rgba(220,220,220,0.5)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      data: myData.mapProperty("rank")
    }
  ]
};

I refreshed the page in browser and voila! My data was converted into a beautiful chart. Wasn't that dead simple?

I added another dataset entry for the sites-linking, but rank values being much larger than sites-linking key, it made the sites-linking line almost invisible.

To sum up,

Good: easy to use, fast, nice animations, multiple chart types

Bad: no tooltips, no interactivity

Its still a new library and has a long way to go. It has been receiving contributions from Open Source developers and I think it will evolve into a cool visualization library soon.

Hack it here.

Cheers :)

Year's first side project- Hint.css

2013-02-17T00:00:00+00:00

Hey everyone!

It has been around a month and a half since we jumped into 2013. And this is my first post of the year. I released a side project called Hint.css some days back on Hacker News and this post is primarily about what it is, how it works and what all I learned while creating it.

First I would like to mention how nicely it was received and appreciated by the community. Here are some stats for the same:

I released it on Hacker News on 4th Feb 2013 where it attained #1 ranking just after half an hour or so. Cool eh? BTW, this was the first time my submission got to #1 :) It got 224 upvotes. Thank you!
As a result of the above, the project page around 20K+ unique views. Heres an image showing some realtime stats after ~3 hours of release (Note: The realtime count did went above 300, but come on...I was not in a state to take a screenshot then :P):

The github repo has been starred and forked 1.4K+ and 100+ times respectively.
Also the repo is still in the list of most trending repos on github.

So all in all, the launch was beyond expectations and really good.

###About hint.css

hint.css is a library written in SASS to create simple tooltips. So basically it uses only HTML and CSS to create tooltips for your lovely websites. Yes you heard that right, no JavaScript required. Learn more about how to use it.

The library uses the BEM naming convention by Nicolas Gallagher.

###How does it work
The library uses 4 basic concepts to create the tooltips without a line of JavaScript or any extra markup:

####1. Pseudo elements
Pseudo elements are a gift for web developers which open numerous possibilities for creating amazing stuff. Hint.css makes use of these pseudo elements (::before and ::after elements) to create the actual tooltip.

This has the advantage that you do not have to add any extra markup on your page. But it has a downside too. As the tooltip is created using pseudo elements, its not possible to use them for any other purpose on the element you put tooltip on.

####2. data-_ attributes
The tooltips need to be told what text to show. How do we provide this text? data-_ attributes to the rescue. They let you put custom data on any element using attributes. So hint.css expects you to define an attribute called data-hint on the element which needs a tooltip:

Out of the many, <span data-hint="Tooltip text">this</span> word needs a
tooltip.

####3. attr function for content
Now the most important part on which hint.css is based on. You may have heard about the content property of pseudo elements. As is clear from the name, it lets you specify content of the pseudo element.

What was really great for me was the attr function which gives you the power of grabbing the value of any attribute on the element and set it as the pseudo element's content. Isn't that really neat? So the meat of the library is this one line:

content: attr(data-hint);

And you are DONE!

####4. CSS3 transitions
Finally to add some eye candy, the tooltips are loaded with subtle fade & translate effect using CSS3 Transitions.

One thing to note here is that Transitions on pseudo elements work only in Firefox presently. But do not worry guyz...thanks to Elliott Sprehn, the feature has arrived in Google Chrome 26 dev version and it's not too far when we'll all have it in the stable one too :)

###What I learned

If you are passionate about creating cool new stuff, you surely understand the importance of developing small side projects, something you can own completely. It teaches you a hell lot of things...not only about the tech side but about managing stuff from planning to releasing to maintaining a small product. You should probably read this awesome post on creating side projects by Sacha Grief.

While making hint.css I too learned many things which I would like to share here.

####SASS

This was the first time I tried SASS. SASS is basically a CSS preprocessor...meaning it provides you some great features (like variables, mixins etc) to write your CSS in a more efficient way.

I had never felt the need of using a preprocessor ever. And same was with hint also. If you happen to see the original demo of hint.css I released, it was written in CSS. Even when I started writing the actual library I was using plain CSS but then things started getting very repetitive and unmanageable.

Adding any new type of tooltip required to change certain properties on all four tooltip positions (top, bottom, left and right) which I had to write again and again. Also at times, inconsistencies occurred with respect to color values and other static numbers used at different places. And hence I was forced to look into a preprocessor that could make me write smarter code.

Basically its the mixins (check out src/color-types.scss for example) and variables that made the whole library very easy to extend and consistent everywhere.

####Grunt

Grunt is a build tool basically made for JavaScript projects. I helps you create a build flow using variety of tasks it supports like concatenation, minification etc. As I started using SASS for Hint it made sense to incorporate a build tool in my workflow and having a little experience of using Grunt in my previous game projects, I thought why not try it on a CSS project.

It has worked quite well till now. I had to install some extra tasks for SASS compilation and CSS minification as they don't come bundled by default with Grunt and now I simply run grunt watch and all building happens silently in the background as I develop.

####Release preparation

This one is a tough and I would say a phase which needs more consideration and effort than the actual development itself.
Coding the library hardly took a day or two but rest of the work took around 300% of the already spent time and that includes:

Writing README for the repo
Creating a project page with demo, usage explanation etc
Writing a blog post about the project
Making sure I did not miss anything
Finally releasing!

During this I became better at writing (I only love writing code though) and managing multiple tasks.

####More CSS knowledge
Last but not the least, as I was working on a CSS library I came to know more about it as mentioned earlier. CSS is really beautiful :)

###In the end

Finally Hint.css was released as an Open Source project on Github. But it didn't stop there. People have been liking it and started using and contributing to it which marks the beginning of the final phase of a software: Maintenance. To keep a library fresh you need to constantly keep it up to date with latest technology, keep adding new features your users want, fix bugs that get reported regularly. And all this in very organized and planned manner so that the user's know exactly what changed when, whats coming up etc. In short, everyone should be able to track the project without difficulties.

Doing all this is fun. I am getting to know GIT better and better now that I have started using branches, merging etc a lot. I only hope I don't face the Cute Puppy Syndrome (a term coined by @fat) in future :P

Talking about issues, one thing that I have been hearing a lot from people is that BEM naming convention is kind of an overkill, specifically in Hint. For example people prefer hint-top class over hint--top. I am still thinking over this if BEM was at all necessary or is really an overkill in my library. Though I would really appreciate if BEM masters could really comment on this.

Would love to hear your comments, suggestion or anything you feel like saying about my work, this post...anything.

Take me to Hint.css

P.S. Discussion on Hacker News.

Cheers!

[Tutorial] Win8 HTML5 app development- II

2012-12-02T00:00:00+00:00

Finally I got the opportunity to write the second part of the tutorial series on HTML5 game development for Windows 8.
The first part can be read here.

Okay, so lets see what are we going to do today.

First we'll port my game Bouncy to a Visual Studio 2012 project
Add a paddle below he ball which will be controlled by Inclinometer sensor

Lets begin!

###PART 2: Writing your first sensor enabled Windows Store game###

To begin with the porting, we need the game source first which we'll fetch by cloning the game repository on github. I am using terminal to do so but you could use any possible way to clone it. If you are using the terminal too, run the following command:

git clone git@github.com:chinchang/Bouncy_HTML5.git

After you clone the repo, you should have a directory called Bouncy_HTML5 on your system containing 4 files out which we require index.html and game.js.

####Porting game to Visual Studio:####

Now lets fire up Visual Studio 2012. Once you have it running create a new project and select the Javascript > Windows Metro style > Blank App template for your project.

This will create a basic setup for an Windows Store HTML5 app ready to run on Window 8. You can check out the files that are created by the template for you in the right solution panel:

Our next step is to integrate our 2 files into the project. So basically first we integrate the markup (index.html) and then the JavaScript (game.js).

Open the default.html file present in your Visual Studio project and delete all the HTML present inside the BODY tag.

Now open up Bouncy_HTML5/index.html in your favourite text-editor (BTW, I use the awesome Sublime Text 2).
From there you only need to copy 2 lines (Yeah, just 2. Rest is all the extra stuff on the page) into default.html.

Copy the following line:

<canvas
  id="c"
  width="640"
  height="480"
  style=" border: 1px solid #AAA;"
></canvas>

and paste it inside the BODY tag.

Now back in the index.html file copy the following:

<script type="text/javascript" src="game.js"></script>

and paste it where other SCRIPT tags are present in default.html. One thing you need to change here is the script path as our JavaScript file will now go in a sub-folder named js. Change the line to:

<script type="text/javascript" src="/js/game.js"></script>

We are done with our HTML. Over to Javascript, developer.

Next we'll add Bouncy_HTML5/game.js to our project. Right-click on the js folder in the solution pane. Select Add > Existing Item then browse to Bouncy_HTML5/game.js and click Add as shown below:

Congratz, that file has now become part of your project. Now you can close the text editor and you have nothing to do with the Bouncy_HTML5 folder. You can delete it if you wish.

If you try to run the project by pressing F5, the game will run just fine. But we'll make a small tweak here.

If you happen to notice in game.js, we call a function called init() on window load event (Line 193). But in our new project we don't explicitly need to listen to window load event. In default.js file that was created with the project you'll see a code that looks like this around Line 13:

// TODO: This application has been newly launched. Initialize
// your application here.

This is essentially a position where we can execute any of our initialization code. But the issue here is that the init() function is inside an anonymous function and hence not available to outer world. It has to be first put in global scope to be able to call from default.js.

Back in game.js, modify the following line:

window.addEventListener("load", init);

// create a global game object
window.game = window.game || {};

// set a reference to init function
window.game.init = init;

So now the function is accessible in global scope using window.game.init()

Switch back to default.js and call the init() function at the place we saw earlier. Your onactivated function should look like this now:

app.onactivated = function(args) {
  if (args.detail.kind === activation.ActivationKind.launch) {
    if (
      args.detail.previousExecutionState !==
      activation.ApplicationExecutionState.terminated
    ) {
      // TODO: This application has been newly launched. Initialize
      // your application here.
      window.game.init();
    } else {
      // TODO: This application has been reactivated from suspension.
      // Restore application state here.
    }
    args.setPromise(WinJS.UI.processAll());
  }
};

To verify your change, run the game by pressing F5 and it should work as before.

####Adding the paddle:####
Now that our game is completely ported we'll add paddle to it which will use the Inclinometer sensor to move.

As this tutorial doesn't focus on game development, rather using sensors for Windows Store game, we'll not dive into the code to implement the paddle. Simply download the new game-with-paddle.js file and replace the game.js code with its code:

Download new game.js

Run your project and you should see a paddle on the screen and the balls bouncing on it. Lets make our paddle move, shall we?

####Enabling Inclinometer to move paddle:####
All the sensors in Windows Runtime (WinRT) are available under the namespace Windows.Devices.Sensors. The class we need to use is Windows.Devices.Sensors.Inclinometer.

In game.js, modify the following line:

var ball1, ball2, paddle;

var ball1,
  ball2,
  paddle,
  sensor,
  max_roll = 20;

which creates a new variable to reference our sensor.

Next, in the init() function, put the following lines:

// get the reference to the Inclinometer sensor
try {
  sensor = Windows.Devices.Sensors.Inclinometer.getDefault();
} catch (e) {
  console.log("You don't have sensor support");
}

At this point we have initialized the Inclinometer. Now we need to read it to make the paddle move. Modify the paddle's update() function to following:

Paddle.prototype.update = function(dt) {
  if (sensor) {
    var reading = sensor.getCurrentReading();
    if (reading) {
      this.x = (canvas.width / 2) * (1 + reading.rollDegrees / max_roll);
    }
  }
};

All we do above is read the sensor's present reading (we are using the device roll amount here) and position the paddle according to it.

Run your project now and try tilting your Windows 8 device. Voila! You can now control the paddle using the device's Inclinometer sensor (if one exists). You can download the Visual Studio project at the following link:

Download Project

We are done with our first sensor enabled game ready to be put up on the Windows Store. If I find some more interesting stuff about Windows Store app development, I'll share it in my next post :) Till then, here is a screenshot of the game in action:

So go now and make your games sensor enabled and rule the world!

Cheers!

[Tutorial] Win8 HTML5 app development- I

2012-09-22T00:00:00+00:00

Hola!

I recently received a prototype of the next generation Ultrabook device from Intel to support my Windows 8 app developments which had Windows 8 Release Preview installed.

Excited about the new capabilities the device offers, I thought of starting by porting one my previous games to Windows 8. I started looking on forums, communities etc to get some 'getting started' guides on developing HTML5 apps for Windows 8 RT which is specifically for touch device like tablets. Unfortunately, there isn't much information for beginners...or may be I couldn't find some. But anyways, the only option that was left was to explore stuff on my own.

This tutorial series is basically a documentation about my experience of the process of porting one of my HTML5 games (HTML5 Bouncy) to Windows 8 and use its accelerometer capability to add some extra control.
The tutorial series isn't pre-decided as to how long it would be as the app is still under development. I'll share my experience here as and when there is some progress.

###PART 1: Getting the dev environment ready###

Okay, so to develop apps for Windows 8 we need Microsoft Visual 2012 which supports Metro style apps. So I headed over to the Visual Studio download page as prescribed by few articles I read.

Then I downloaded Visual Studio Express 2012 for Windows 8 from there. But upon installing, it gave a weird error:

Windows 8 Release Preview does not have the required .NET framework 4.5.50709

Well, that was annoying as I expected my windows 8 to come bundled with all the dependencies. My next step was to obviously search the Microsoft website for the required .NET updates. I even found some updates to .NET but each one on installation gave the message that I already had the same .NET version installed. That was more weird.

After some googling about the issue, I hit a Stackoverflow page that had the information I wanted. So it turns out that Visual Studio cannot be installed on Windows 8 Release Preview due to some restrictions by Microsoft. It can be installed only on Windows 8 RTM. Besides this, if you want to have Visual Studio 2012 for Win 8 RP, you can do so using Visual Studio 2012 Release Candidate. God bless Microsoft!

So basically I had 2 options now to choose from:

Get Windows 8 RTM
Get Visual Studio 2012 RC

And obviously I picked the latter as whose gonna download and install Window 8 :) Finally downloaded Visual Studio 2012 RC and it installed without any issues on my Ultrabook device. A moment of rejoice!

And there I had in front of my eyes, the beautiful new UI of Micorsoft Visual Studio 2012 inspired by the Metro view :D It was simply neat and clean.

Just to try out things, I made a new Javascript Blank Project which provides you with a default.html, default.js and default.css files with some basic setup code. I added some code to make a simple Hello World app:

HTML

<div id="hello-world">Hello World!</div>

CSS

#hello-world {
  text-align: center;
  font-size: 220px;
  margin-top: 300px;
}

And I have my first hello world HTML5 window 8 app ready :)

###Whats up next?###
It seems the dev environment is setup now. Next, this is what I am going to do:

Port HTML5 Bouncy to Visual Studio (shouldn't be much of pain)
Explore how to use device accelerometer with Javascript
Add some features to the game to exploit accelerometer capabilities
May be something more...

Hope this series is useful to someone starting Windows 8 app development for the next generation Ultrabooks.

Till the next part, cya!

Rotating earth using pure CSS

2012-09-16T00:00:00+00:00

Recently after seeing a pen on codepen by Jack Rugile and a creation on CSSDeck by Tim Holman, I thought why not use the two concepts to come up with something interesting. An illusion of a 3D rotating planet using just CSS. And so I hacked down a pen (this does a little more than mentioned, not nicely enough though).

I thought may be I should share the little CSS tricks being used in this CSS stuff to create the illusion. And here I am with a short walkthrough. Lets begin.

Demo

This demo uses a single div tag for the HTML. So lets start by creating a div tag with an ID earth.

<div id="earth" />

Thats it. Our markup is done. Time for some CSS now. Lets break this part into numbered steps.

STEP 1:

Lets give our earth some dimensions. Give it a width and height of 100 pixels. Also give a temporary background of blue color just to know what it is becoming.

#earth {
  width: 100px;
  height: 100px;
  background: blue;
}

STEP 2:

Earth isn't all that square for sure. Lets make it a perfect circle by giving it a border-radius of 50%.

#earth {
  width: 100px;
  height: 100px;
  background: blue;
  border-radius: 50%;
}

STEP 3:

Much better now. But still doesn't looks like our earth. Yeah, you're right...we need a texture. Lets pick an earth texture to put on our present blue circle. I have selected this image here for this tutorial (you could use any of your choice). Set the image as the background of our div instead of the blue color we have.

#earth {
  width: 100px;
  height: 100px;
  background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
}

Step 4:

Ahh, all we see is a blue color still. Why? Well that is because the texture we are using is quite big for a 100x100 earth. We need to scale down the background a bit. Lets try giving it a background-size of something according to our dimensions. I find 210 pixels to be a fit here.

#earth {
  width: 100px;
  height: 100px;
  background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 210px;
}

Step 5:

Seems better. But our earth still looks all flat. Time to give it some 3D feel by adding some lighting. For this we use box-shadow CSS property. Give it an inner blackish shadow from left.

#earth {
  width: 100px;
  height: 100px;
  background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 210px;
  box-shadow: inset 16px 0 40px 3px black;
}

To make it more realistic, add another white shadow from right side, a subtle one with some opacity.

#earth {
  width: 100px;
  height: 100px;
  background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 210px;
  box-shadow: inset 16px 0 40px 3px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
}

Step 6:

Now that looks like our earth. One final thing we will do is...rotate it. How? CSS Animations to the rescue. We first need to define our own animation keyframes which essentially means telling which CSS property will change to what value and at what time. But wait! What CSS property can we use to make a rotation animation?

Well, the rotation illusion is actually created by simply scrolling the background image horizontally which is by default tiled both horizontally and vertically. Hence we make use of background-position-x CSS to do so. Add the following CSS to define the animation keyframes which we call rotate:

@keyframes rotate {
  from {
    background-position-x: 0px;
  }
  to {
    background-position-x: 210px;
  }
}

So here we are defining our animation to change the background-position from 0px when animation cycle starts to 210px when cycle ends. Why we chose 210px for the final value? Remember that is the size we set for our background-image. So for a seamless scrolling we shift the background image equal to its width.

Step 7:

Nothing happens though because we have not yet used the above defined animation. To use it, we set the animation-name CSS property to our animation name (rotate).

#earth {
  width: 100px;
  height: 100px;
  background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 210px;
  box-shadow: inset 16px 0 40px 3px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
  animation-name: rotate;
}

Then we define the time it should take for one animation cycle using animation-duration property. Set a value of 4 seconds for the same.

#earth {
  width: 100px;
  height: 100px;
  background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 210px;
  box-shadow: inset 16px 0 40px 3px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
  animation-name: rotate;
  animation-duration: 4s;
}

Notice here how the animation plays just once and stops. We must tell the animation to play in an infinte loop using the animation-iteration-count property.

#earth {
  width: 100px;
  height: 100px;
  background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 210px;
  box-shadow: inset 16px 0 40px 3px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

One final adjustment to make the animation smooth, set the animation-timing-function to linear.

#earth {
  width: 100px;
  height: 100px;
  background: url(http://www.noirextreme.com/digital/Earth-Color4096.jpg);
  border-radius: 50%;
  background-size: 210px;
  box-shadow: inset 16px 0 40px 3px rgb(0, 0, 0), inset -3px 0 6px 2px rgba(255, 255, 255, 0.2);
  animation-name: rotate;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

And we are done! You may give the body a black background to get a feel of space. Also you can make different planets by just changing the background texture. So go and make some cool CSS planets.

Finally, some light discussion about the demo on Hacker News.

Earth image credits: http://www.noirextreme.com/earth

Cheers!

I complete an year at Wingify

2012-08-25T00:00:00+00:00

Today is quite a big day for me. Last year on this very date, I joined my first job at a startup called Wingify which was not much known name to me at that time. And today I complete an year working at Wingify and immensely proud and privileged of having been part of a bunch of talented geeks!

Writing this post, lots of memories of the past year strike my mind (whatever my short-term memory can recall). I still remember that day when I was about to join some other company in Bangalore and was all set to leave on Sunday. And two days before that I came to know about a startup called Wingify in New Delhi and that it was hiring. I was called for an interview the next day at Wingify's one room office back then, where I had the geekiest (and longest) interview of my life :P But seriously it was so much fun talking and discussing stuff at that 3 hour long interview which was taken by the geeky CTO of Wingify, Sparsh Gupta (btw, our cool CEO, Paras Chopra, was out for holidays at that time). Irrespective of my selection, I was happy to have talked to some awesome people that day. But thankfully I was selected for the job that very day (night to be precise) and there, I was saved from the employee exploitation machine I was going into :P We were just 7 people then.

Since then, it has been a journey filled with lots of learning, making awesome stuff and wonderful parties :)
Being a startup I have got the opportunity to work in various domains here which has really helped me grow, learn new things and become better at whatever I do. Here, I have created frontends, backends, doodles, christmas cards (this was a tough job for our team) and what not. And the most important thing which sets Wingify apart from the rest is the creative freedom and casual environment it provides to the team which lets us create better and better product for our customers.

Talking about the past year, one thing that I can't forget is the crazy trip to Thailand that we had on Christmas.

It was a wonderful experience going out with the team and I thank Wingify for that. There are a lot of short stories of that trip but lets not discuss them here :)

All in all, I feel really fortunate to be a part of Wingify and to be able to work with some freaky hackers here building a world class product that our customers love. Its altogether a different feeling to be in a small team (we are 10 people now) and share huge achievements together (we recently hit 1500+ signups and shifting to a better & bigger office soon). Hope to make more neat and wonderful stuff here.

And hey, we are always looking out for great talent out there. So if you think you have got it, reach out to us and be a part of this place called Wingify.

EDIT: And as an icing on the cake, I received a touch ultrabook from Intel today :D Yuhooo!!

Thanks Wingify!

Hello World!

2012-07-28T00:00:00+00:00

Hey!

As a custom, I write my first post on my new blog (powered by Jekyll and Github).

var str = "Hello World!";

console.log(str);

I'll be soon writing a post about my experience with switching from wordpress to really awesome Jekyll.

Stay tuned.

New web experiments!

2012-07-01T04:30:37+00:00

Hey everyone!

This is my post after a long long time. Well, I am here to introduce 2 recent experimental web stuff I developed just to get the hang of HTML5, CSS3 and coffeescript and I must tell you that working with these super-awesome web technologies has been a great experience. They open a whole new world of possibilities where imagination can create mind-blowing things.

ISO-BLOCKS

The first one of them is actually a small library used to create cool looking isometric text in the browser using CSS3 transitions and transforms.

Try out ISO-BLOCKS

piCSSel-art

This is a recent thing I have been working on. The inspiration behind this was the space invader made here using CSS box-shadow seeing which I though of recreating my complete site with zero images using only CSS pixel art. And so piCSSel-art was born.

Having the app done, I'll can now start working on my new website design which is gonna be hell lot of fun with this.

Try out piCSSel-art

Both the above experiments are in the open-source world for anyone who wants to tinker with them. So fork and play with them.

ISO-BLOCKS: https://github.com/chinchang/IsoBlocks

piCSSel-art: https://github.com/chinchang/picssel-art

Let me know your thoughts, comments, suggestions on them.

Cheers!

Ludum Dare 23!

2012-04-30T01:16:08+00:00

Hey everyone!

Last weekend was just super awesome...it was Ludum Dare 23 - The ultimate 48 hour compo. The theme was 'Tiny World' and I was in this time (my 2nd LD). I chose to make a game on flash platform using the Flashpunk game library. The game is called SAVE ME in which you control a cute alien which is attacked by some evil species. You can jump on planets and even hop from one planet to another collecting the game power-ups.

Some points about this LD for me were:

Gave more time and priority to gameplay.
Drew quite a lot pixel art for the first time (it was fun).
Tried some new game mechanics.
Integrated almost all game elements (sounds really matter).

Play and rate my entry.

Now that the compo is over, I have played around 60 entries out which here are my best picks (in no order):

**Memento XII - deepnight: **As always, this entry by deepnight has mind blowing graphics. The pixel art is really good and gives a very nice feel to the game. Though being a point and click adventure type, I was not that a fan of the gameplay.
Astro Break - hulahulahest: This was a really well made contra style game. I loved the sprites and the whole idea of having a shoot'emup on a lil planet was greet. A game to play for powerups!
Soul Searchin' - MaximSchoemaker: A 100% into the the theme entry. A very well executed idea where the player can be shrunk and grown to clear levels inside levels...A nice level design too.
**Nook - PoV: **Another shrink/grow type jam entry which wonderful graphics and animation. The game is fun to play and effects are neat.

So go ahead, play them, rate them and be cool :)

If you wanna check out my game's source, it can be found on github.

Till next time, cya!

Copter clone- open source on github

2012-01-01T20:06:20+00:00

Hey everyone

HAPPY NEW YEAR TO ALL!

It has been an awesome year in 2011, with many things happening as expected and many unexpectedly. But overall...superb.

The first news of 2012 from my side is that I have put one of my alpha games on github. Its basically a clone of the very famous copter game by seethru. You can fork the game HERE.

So fork it, hack it and enjoy.
May this new year bring more n more joy to all.

Cheers!

Fun at Nasscom GDC BYOG 2011!

2011-11-15T01:24:51+00:00

Hey fellow developers!

It has been a long time since I wrote my last post. Well, I have got a reason for this one :)

Four days back, Nasscom organized its third Game Developers Conference in Pune. What was different this time was the BYOG event conducted by the Indie Game Development India community. Yes, you heard that right a Build Your Own Game wherein a game was to be developed in 48 hours...savvy!

Unfortunately, I could not attend the awesome event this year. Nevertheless, I took part in the BYOG remotely. And what I came up with in this jam was Fun With Force. The theme of my game was 'physics'. Its a very simple prototype but I'm happy with the result. And yes...it won the 3rd prize in the jam :D

Play

Let the developer (me) know your comments and suggestions.

More updates on my games coming soon.
Cheers!

AS3 Motion Tracker on github

2011-06-13T18:37:47+00:00

Hiya everyone !

I have been working on motion tracking since my last blog post on experiment with Justin Windle's motion tracker. Inspired by all the fascinating stuff, I started writing my own motion tracker in Actionscript 3.0 which is finally done and up on Github.

Though it tracks motion nicely it still needs to be improved to track smoothly and more accurately. I'll be also working on integrating gesture recognition with it.

PROJECT SOURCE

Download it. Play with it. Improve it.

Cheers !

A supercool night with MOTION TRACKING

2011-06-04T09:09:13+00:00

Hellooo everyone !

Last night while surfing on the web and reading flash stuff I came across Justin Windle's blog. He has done such awesome flash work...was really amazed to see it. And one of them is his motion tracking API. As soon as I read about it and saw the demo, I could not stop myself and immediately downloaded it to explore more. I made a small game out of it. This is what I came up with :

(Move your hand left-right to move the platform.)

The motion tracking algorithm is itself very basic but gives amazing results with little tweaking. One restriction though, you should have only one object moving on the screen (hand, head etc) to properly get it tracked to play the game. More about the API can be read here.

Its actually really cool to make your very own motion sensing game and play it :) I am surely going to explore it more and develop some good stuff with it, soon.

Download Source

Cheers

[Creating a LAN] Wireless LAN using ad-hoc network

2011-05-28T01:21:59+00:00

This is the second part of the CREATING A LAN series - Wireless LAN.
You can read the tutorial on Wired LAN here.

Windows 7 gives you an option to form a wireless ad-hoc network without much configuration in few minutes.
Now some real stuff.

Requirements for this tutorial :

Upto 9 Computer machines having wifi.
Windows 7 OS (Windows Vista will also work)

(NOTE : The tutorial visuals shown here are of Win 7, though it would work just fine on Windows Vista also.)

STEP 1 :
On any one machine (which you want to create the network on), open the control Panel and go over to View network status and tasks.

STEP 2 :
Now click on Set up a new connection or network.

STEP 3 :
From the available options, select Set up a wireless ad hoc (computer-to-computer) network.

STEP 4 :
Now you need to enter a Network name and a Security key for the new network. Anything of your choice.

Thats all you need to do to create a wireless network. Now its time to start it up and let others join.

STEP 5 :
(NOTE : Make sure WIFI on the machine is turned on before this step.)

On the same machine, click the network icon in the system tray. You will see the network name you just created in the list.
Click it to connect to it.

On succesfull connection, you would see Waiting for users instead of Connect button.

STEP 6 :
Now move on to other machines which you want to add to the network. Switch on their WIFI. Click on the network icon in the system tray and find the network we created in the previous step (test in our case). Click it and connect. It will ask for the security key which
is the same as we entered while creating the network.

If all goes well, you will now be connected to the network successfully.

Now you can enjoy your favourite lan games with more than 2 machines connected wirelessly.

Have fun.

[Creating a LAN] Wired LAN using crossover cable

2011-05-18T23:49:05+00:00

Ever wanted to connect your PCs to form a LAN and play your favourite multiplayer game ?If you got stuck creating a LAN, then this tutorial will guide you through. So all you have to do is just follow the steps and you'll be on a LAN in no time.

The tutorial is in 2 parts : WIRED and WIRELESS.
This one will show how to create a wired LAN using just a crossover cable.

So lets get going !

Requirements for this tutorial :

2 Computer machines having lan card.
1 Crossover cable.

(NOTE : The visuals shown here are of Win 7, though it would work just fine on any Windows.)

STEP 1 :
Connect the 2 machines with the crossover cable.

STEP 2 :
On first machine, Open the control Panel and go over to View network status and tasks.

STEP 3 :
Now click on Change adapter settings in the left panel.

STEP 4 :

Select the Local Area Connection adapter, right-click on it and select Properties.

STEP 5 :

Now we need to edit some IPv4 properties of the connection. Click on Properties with Internet Protocol Version 4 (TCP/IPv4) selected in the list.

STEP 6 :

Change the IP addresses to those shown in the picture below and click OK.

STEP 7 :

Follow the same steps on the second machine and change its IP addresses as shown in the picture.

This is it ! Your both machines are now connected in a LAN.

You can also set some additional sharing options. For that:

STEP 8 :
Click on Change advanced sharing options in the Network and Sharing Center.

Here you can find several sharing options which you can set according to your preferences.

One disadvantage of using a crossover cable to form a LAN is that only 2 machines can be connected together. If you want to go over 2, you will need a switch.

In next tutorial, I shall demonstrate how to form a wireless ad-hoc network using wi-fi which enables more than 2 machines to be connected.

Stay tuned :)

Caricature 3: Hasta la vista, baby !

2011-05-17T15:28:08+00:00

One more...

(Made in Flash Professional)

Caricature 2 - Pride of India

2011-05-17T14:58:07+00:00

Helos all !

Here is one more caricature of a person who has made India proud.

Who is he ?

(Made in Flash Professional)

Kushagra Gour- Creativity freak!

Vibe-coding on Mac mini from anywhere

Step 1: Enable Remote Login (SSH) on your Mac mini #

Step 2: Make SSH work outside your home Wi‑Fi (use Tailscale) #

Step 3: Prevent the Mac mini from sleeping (so it stays reachable) #

Step 4: Keep work running even if your client device sleeps (use tmux) #

Bonus update: try Zellij instead of tmux #

AI and my direction

AI Anxiety #

A Paradigm Shift: Personal Software #

What Will Matter: Experiences and Human Interaction #

CSSBattle #

Physical Products and Experiences #

Conclusion #

Getting started with Chrome's Inbuilt AI

Browser version #

The experimental flags #

Downloading the model #

Using AI #

Mistake - Making an async function sync

Google maps street view hack

Chapter 1 #

Chapter 2 #

Chapter 3 #

Chapter 4 #

Final chapter #

My first Woodwork

Backstory #

Type of shelf #

The wooden plank #

Getting the plank ready #

Some more finishing #

The brackets #

Mistake - forgot to deploy indexes

Learnings and fixes #

CSS-only 3D card

1. Get the Card #

2. Bring in some scroll #

3. Rotate card as we scroll #

4. Making both rotations work #

5. Make shadows dynamic #

6. Icing - Shine ✨ #

Final demo 🥳 #

Scroll-based 3D card carousel

1. Place the cards #

2. Scroll-based inclination - give a timeline name for x-direction scrolling #

3. Create animation to rotate #

5. Parametrize the shadow's x offset and animate on scroll #

6. Fixing the animation #

Final demo 🥳 #

How to learn & master CSS

Learning #

Learning Core Concepts #

Learning about Properties and Values #

Practice #

Final tool #

Logging query docs in Firebase Firestore

Solution #

Mistake - deployed to wrong firebase project

The bug #

Solution #

Mistake - comparison with optional chaining

The Bug #

Solution #

New journey - is it a bad decision?

Why Quit? #

But why now? #

But going indie, with a kid? #

Did I take a bad decision or a good one at the wrong time? #

How’s it going? #

My TODO after gaining financial freedom

Financial Freedom #

My TODO List #

Side Projects? #

Hint.css is free again!

TL;DR #

Back Story #

And Today #

The Fun Part #

Few Learnings #

Step 1: Enable Remote Login (SSH) on your Mac mini

Step 2: Make SSH work outside your home Wi‑Fi (use Tailscale)

Step 3: Prevent the Mac mini from sleeping (so it stays reachable)

Step 4: Keep work running even if your client device sleeps (use tmux)

Bonus update: try Zellij instead of tmux

AI Anxiety

A Paradigm Shift: Personal Software

What Will Matter: Experiences and Human Interaction

CSSBattle

Physical Products and Experiences

Conclusion

Browser version

The experimental flags

Downloading the model

Using AI

Chapter 1

Chapter 2

Chapter 3

Chapter 4

Final chapter

Backstory

Type of shelf

The wooden plank

Getting the plank ready

Some more finishing

The brackets

Learnings and fixes

1. Get the Card

2. Bring in some scroll

3. Rotate card as we scroll

4. Making both rotations work

5. Make shadows dynamic

6. Icing - Shine ✨

Final demo 🥳

1. Place the cards

2. Scroll-based inclination - give a timeline name for x-direction scrolling

3. Create animation to rotate

5. Parametrize the shadow's x offset and animate on scroll

6. Fixing the animation

Final demo 🥳

Learning

Learning Core Concepts

Learning about Properties and Values

Practice

Final tool

Solution

The bug

Solution

The Bug

Solution

Why Quit?

But why now?

But going indie, with a kid?

Did I take a bad decision or a good one at the wrong time?

How’s it going?

Financial Freedom

My TODO List

Side Projects?

TL;DR

Back Story

And Today

The Fun Part

Few Learnings

List all files with human-readable filesizes

Switch directory

Create a new file

Create a new folder

Copy a file

Rename a file

Open a file in Visual Studio Code (VSCode)

Git commands

Open any file (Max OSX only)

Bonus Tips

Quickly accessing your terminal

Aliases

TL;DR

The `<strong>` tag

Importance

Seriousness

Urgency