Where did the ‘window’ go? And how can I get it back?!

If you have a Gatsby website, then you may have noticed the window is not defined error when you try to do gatsby build. Since there were quite a few queries regarding this, I thought of explaining the issue and how to fix it!

The Issue

Say you have a 3rd party JavaScript API on your site. When you’re developing the site using Gatsby, you won’t see any issues. Running gatsby develop will be successful. This makes you think that everything is fine. …

Photo by Pau Casals on Unsplash.

Google introduced version 3 of its reCaptcha in late 2018, announcing the ‘adaptive risk analysis’ spam handler for websites. And the question on everyone’s mind was: Should I upgrade from version 2 to version 3?

I think that’s the wrong way to go about it. As it’s not an upgrade in the regular sense. Version 3 is a different way of doing spam protection, with the website owner having more control over deciding who they think is a spammer/bot and what to do about it. That’s what version 3 offers, the platform for deciding. …

“My message is that we’ll be watching you.

This is all wrong. I shouldn’t be up here. I should be back in school on the other side of the ocean. Yet you all come to us young people for hope. How dare you!

You have stolen my dreams and my childhood with your empty words. And yet I’m one of the lucky ones. People are suffering. People are dying. Entire ecosystems are collapsing. We are in the beginning of a mass extinction, and all you can talk about is money and fairy tales of eternal economic growth. How dare you!

Photo by Franck V. on Unsplash.

A Static Site is awesome for bloggers. Easy to create (content), easy to maintain (website). And it allows you to tinker with your website design with just a bit of HTML/CSS know-how. The only issue with Static Sites is how to manage the comments section, as a bunch of static pages cannot handle form submission on their own.

But fear not, a bit of server-side scripting can solve it for you. The comments can be stored as individual files on the server, as I’ve mentioned in a previous post. After this, all I had to do was download the files…

For people who want to send their thoughts out into the world, a blog is the perfect medium of delivery. Although the maintenance of a blog feels easy in the beginning, as the content grows with time it becomes difficult to manage the process manually. When the blog hits critical mass, it becomes important to look at automating the maintenance process.

This is where CI/CD tools come in. These tools will automate the testing and deployment stages in a fast and efficient manner.

Before we get into the nitty-gritty details, let me give you my use-case. My blog is a…

In order to work with JavaScript (in other words, designing any website; and more recently, the server-side node.js platform) it is necessary to understand how the Event loop works.

Event Loop

The Event Loop, as its name suggests, is a loop which processes events one after the other. It usually takes on the form:

The loop will handle every event as it comes in, in a FIFO (First In First Out) approach. When an event is triggered, it will be added to the Event loop queue as a message to be processed and has to wait its turn. Once the event moves to the front of the queue, the JavaScript engine will execute the event. Once an event starts getting processed, it cannot be preempted by another event before it…

Photo by Dmitri Popov on Unsplash

Isotope.js implementation for grid filtering on a Gatsby generated React.js site.

In my quest to learn Gatsby.js and the underlying React.js library, I was porting my existing site into a Gatsby site. I had finished the basics and was turning towards the more complex parts of my site.

This is when I hit the wall, figuratively speaking. Isotope.js is an external javascript resource that I have used to animate the filtering of articles grid on my static site, and connect it to the component using jQuery. Gatsby being React based, I had to write a component which would take care of rendering as well as the callbacks required to sort/filter using…

You’re done with the basic design of your website and now you want to code it in HTML.

For this you need to be aware of the different layout options available in HTML/CSS and which of those is the right fit for your website design. Let us go through the options one by one.

Photo by Pankaj Patel on Unsplash

Tables — Do Not Do This!

This was used earlier when the web was still in its infancy, and there wasn’t much you could do with a website except display text. The developers had got used to designing websites using <table> element and stuck to it even when new things (CSS, images, animations, small screens) came into the picture.

Note: The above code is from MA.CRO. Mind.

Websites designed…

Why do people fall prey to fake news so easily?!

The advent of Fake News in modern times is seen as a problem primarily to do with advancement in digital technology. Little or no thought is given to why fake news actually exists in today’s fast-moving all-knowing world, or why it spreads so easily. It is critical to think of fake news in these digital times.

While I have always wondered why so many of my acquaintances on Facebook/Twitter/WhatsApp keep sending information that I’ve found of a dubious nature, I’ve never really found the energy to dig deeper till now. About a week or so ago, I came across this…

Once you zero in on the kind of the website you want, the next step obviously is designing it.

Figure out the pages you want on your site and what you need each of them to be. Once you have a purpose for each page, you can think of the information to be presented and the kind of layout that goes well with that. In UX design, this process is called wireframing. Wireframing brings out the essentials from the initial concept. It is meant to convert the idea into concrete information, presented visually for easy understanding.

At its most basic level, wireframing can be just a simple sketch done with pen and paper. For advanced wireframing, you have tools…

Amith Raravi

Reader. Coder. Play a bit of chess, a movie here, a road-trip there :) www.amithraravi.com

Get the Medium app

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