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. But when you try to build the static site using gatsby build, it will throw the window is not defined error.

Why does gatsby develop run fine, but gatsby build throw an error for the same code?!

'gatsby develop’ vs 'gatsby build'

During development, Gatsby will run the code in the browser where window is available. Everything runs fine and you are left feeling happy, but not for long though :(

During build, Gatsby compiles your code on the Server Side. i.e., Gatsby will compile your code using Webpack on the server, and hence window is not accessible. Webpack knows all the imported stuff that goes into your code during the build phase (remember the 3rd party API ?!), and when it can’t find window it stops the build process by throwing an error.

The Fix!

The fix is to hide the window variable from Gatsby by doing a check for its existence. And move the offending code to the ComponentDidMount() function.

If you are importing a 3rd party API into your React component, then you should move the import to the ComponentDidMount() as well.

This should resolve the window is not defined error and you should be able to build your code successfully. If you need more information regarding this, check the Gatsby documentation on Debugging HTML Builds.

Originally published at www.amithraravi.com on January 24, 2020.

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. The website owner will still have to implement the actual mechanism of handling spam.

If you want a fine-tuned way of looking at spam, study the realtime data and continuously calibrate your spam meter, then version 3 is what you want.

A Simple Setup

Implementing reCaptcha version 3 is quite easy. Just follow the below steps: Go to the reCaptcha website, and get your site registered. You will get a Public/Private key.

Add the below line to your HTML file (frontend) where you need reCaptcha. Replace YOUR-PUBLIC-KEY with your public key from the previous step.

<script src="https://www.google.com/recaptcha/api.js?render=YOUR-PUBLIC-KEY"></script>

If you are running reCaptcha against a form, then create a new hidden input in the form:

<input type="hidden" id="comment-token" name="token" value="" />

Now, for a bit of javascript magic. You will usually have a submit function to send the form to the server, to be processed by a script. In the submit function, you have to run grecaptcha.execute to get the token from Google. Again, replace YOUR-PUBLIC-KEY with your public key. Once you get the token, it has to be sent to your server along with the form data. I’ll explain why in the next step.

$("#comment-form").submit(function() {
    event.preventDefault();
    grecaptcha.ready(function() {
      grecaptcha
        .execute("YOUR-PUBLIC-KEY", {action: "addcomment"})
        .then(function(token) {
          $("#comment-token").attr("value", token);
          $.ajax({
            type: $("#comment-form").attr("method"),
            url: $("#comment-form").attr("action"),
            data: $("#comment-form").serialize(),
            contentType: "application/x-www-form-urlencoded"
          })
            .done(function() {
              $("#comment-form-submit").html("Submitted");
            })
            .fail(function(/*err*/) {
              $("#comment-form-submit").html("Submit Comment");
            });
        });
    });

    return false;
  });

Don’t get overwhelmed by the above piece of code. It’s easy to understand once you break it down:

1. The submit function is called once the user hits the send/submit button on the form.
2. We need to call grecaptcha.execute to get the token.
3. Save the token in a hidden input field on the form (it will be picked up automatically to be sent to the server!)
4. I send the form data (with the token) using an Ajax call. Any other way will also work, the form data will get sent.

Now that you have received the form data on your server, the token sent has to be verified. This is done by sending the token to Google and checking the response (I have used a PHP script here). Don’t forget to replace YOUR-PRIVATE-KEY with your private key.

        $token        = $_POST['token'];
        $secretKey    = 'YOUR-PRIVATE-KEY';

        // post request to server
        $recaptchaurl =  'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secretKey) . '&response=' . urlencode($token);
        $response     = file_get_contents($recaptchaurl);
        $responseKeys = json_decode($response,true);
        // end post request

The response received will be in JSON format:

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number,            // the score for this request (0.0 - 1.0)
  "action": string,           // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

From the Google reCaptcha v3 docs.

Once you have the response, there are several things to evaluate.

• The success parameter will tell you if the reCaptcha token is valid.
• The score will tell you if it’s considered spam(0.0) or human(1.0). The score will not be 0.0 or 1.0 but in the range of 0.0 - 1.0 to indicate the probability of spam. Values towards 0.0 have a higher probability of being spam, while values towards 1.0 are considered more genuine.
• The action parameter will tell you the action against which this request was performed. Always verify this to match with the action on your frontend where the token got generated!
• The hostname will tell you where the request originated, this should be from your web server!
• In case of errors, the error-codes will give you the relevant codes to check.

The above parameters are meant to help you decide on the best course of action to take for each form submission. You can

• Set a threshold value for letting the user in.
• Send the riskier ones to a manual submission process.
• Ask the user to more authentication (two-factor, mobile, email, etc).
• Use the reCaptcha score as input for you machine-learning algorithms to determine how to handle it.

The Google Admin Console on the reCaptcha v3 site gives you great insights on the kind of traffic hitting your site, and which parts are being targeted by bots. Use this to better calibrate spam protection in realtime!

Control vs Convenience

The reason to use reCaptcha v3 will be about how much control of the decision-making process you want to take up. Do you need to handle it on your own? Or are you okay with Google deciding for you? And how much money and resources are you willing to spend on handling the process yourself?

Here, I’ve left out another key piece of the puzzle. And that is how much spam/bots hit your site, and how sophisticated are they?! For extremely determined attacks, you will need a greater level of control of the decision-making process.

So, make your choice by weighing all these!

The introductory blog post from the Google Security Blog had this simple overview of the reCaptcha v3, and I think it pretty much says it all:

“reCAPTCHA v3 runs adaptive risk analysis in the background to alert you of suspicious traffic while letting your human users enjoy a frictionless experience on your site.”

“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!

For more than 30 years, the science has been crystal clear. How dare you continue to look away and come here saying that you’re doing enough, when the politics and solutions needed are still nowhere in sight.

You say you hear us and that you understand the urgency. But no matter how sad and angry I am, I do not want to believe that. Because if you really understood the situation and still kept on failing to act, then you would be evil. And that I refuse to believe.

The popular idea of cutting our emissions in half in 10 years only gives us a 50% chance of staying below 1.5 degrees [Celsius], and the risk of setting off irreversible chain reactions beyond human control.

Fifty percent may be acceptable to you. But those numbers do not include tipping points, most feedback loops, additional warming hidden by toxic air pollution or the aspects of equity and climate justice. They also rely on my generation sucking hundreds of billions of tons of your CO2 out of the air with technologies that barely exist.

So a 50% risk is simply not acceptable to us – we who have to live with the consequences.

To have a 67% chance of staying below a 1.5 degrees global temperature rise – the best odds given by the [Intergovernmental Panel on Climate Change] – the world had 420 gigatons of CO2 left to emit back on Jan. 1st, 2018. Today that figure is already down to less than 350 gigatons.

How dare you pretend that this can be solved with just ‘business as usual’ and some technical solutions? With today’s emissions levels, that remaining CO2 budget will be entirely gone within less than 8 1/2 years.

There will not be any solutions or plans presented in line with these figures here today, because these numbers are too uncomfortable. And you are still not mature enough to tell it like it is.

You are failing us. But the young people are starting to understand your betrayal. The eyes of all future generations are upon you. And if you choose to fail us, I say: We will never forgive you.

We will not let you get away with this. Right here, right now is where we draw the line. The world is waking up. And change is coming, whether you like it or not.

Thank you.”

~ Greta Thunberg, at the Climate Action Summit at United Nations headquarters in New York. She sailed to New York City for the event from Sweden on a zero-emissions sailboat.

My intent in publishing this is to only share what Greta Thunberg has said. Nothing more. I couldn’t possibly add anything more to what she has said, even if I tried. But I do believe it’s urgent that all of us know what Climate Change is, and act on that information fast.

Really fast.

Note: The cover photo is by Markus Spiske 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 on to my local machine and process them. In the beginning, I used to do it every week or so as the volume of comments was quite low. However, in the last six months, I’ve found that the increasing high influx of comments requires a daily check. Or, I will miss the genuine comments in the barrage of spam that hits my website every day.

As It Is (or The Current System)

I finally found the time to automate comments submission on my site. It’s been on my TODO list for so long that getting it done filled me with relief.

Let me give you a brief description of the setup I have so that you can better understand the automation performed.

1. A PHP script on my server picks up the comments received through form submission on my website.
2. The script processes the comment and saves it as a YAML file.
3. I log-in periodically and download all the comments to my local machine.
4. I check the downloaded comments and delete the spam ones. This remains to be a manual step.
5. For each valid comment, I will check the post it belongs to and add it to that particular post.
6. Build my website with the new comments.
7. Deploy the new build to the web server.

Out of these steps, Step 4 is a manual one for me. As a result, I have 2 scripts:

1. Download comments: A script to download comments and delete them from the server.
2. Process Valid comments: A script to move each valid script to its post folder, build the website with new comments and deploy it to the web server.

Even if you are eliminating spam at the web server side (using Google Captcha or something similar), there will be spam leftover for a human to moderate. I would suggest not to eliminate the manual check from your moderation process. An attacker can design a handcrafted piece of code in a comment to wreak havoc on your web server. If you’re feeling brave, you can go ahead and write a single script ignoring the manual verification.

As It Should Be (or The Automated System)

I thought of BASH scripting to automate this process, as I usually have my MacBook Air with me wherever I go. I’m sure I will be using it for many more years to come!

Download Comments

To download comments, I used rsync Linux command. If the rsync is successful, I delete the downloaded comments from the server. Here is a sample script.

This part declares the variables to be used.

Execute the rsync command to download the comment YML files.

The above part will delete comment files from the server if the rsynccommand is successful.

The else part above will usually be run if there are no new comments. I say ‘usually’ because the else part is hit for any other errors as well. So it is better to keep logs of this part!

Once I run this script, I check all the comments downloaded onto my local machine and delete the spam. Now the remaining comments are ready to be processed by the next script.

Process Valid Comments

I will go through the script part by part, as before.

The variables are declared here.

The for loop will process each comment file.

If no files found, exit the loop. Else, move on.

The above part is specific to my code. I check if the comment file has a line starting with slug: . If it does, then it’s a valid comment. Else, move on to the next comment.

You can do processing specific to your comments in the above part!

I check for SLUG, if it exists then I move the comment to its post folder. If the post folder doesn’t exist, then I create the post folder and then move the comment.

This part gives information about the files that were processed (or not) by the script.

BASH Scripting

BASH may feel a bit weird to look at, and I agree the syntax is quite unintuitive. But you will get used to it after a while. After you build a small script like this, you will understand how shells work and model your script based on it.

There’s a caveat to using BASH (or any shell) scripting. Any shell can elevate to root privileges without you, the developer, intending it. And one of the easiest ways to do that is not quoting your variables. Have a look at the stack overflow thread, it’s worth the read.

I would suggest to run the BASH scripts from your terminal and never from outside your local machine. And this ties in with the manual verification step I’d talked about earlier. If the comment is not checked for spam, a carefully constructed piece of code can use your BASH script to attack your system!!

Use BASH responsibly, know the risks. It is quite powerful when used the right way.

I hope this post gave you enough information to automate your site! And Happy BASHing :)

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 static site built using Jekyll. After adding content for over a year, the blog has grown large enough that changing one thing may break something else. For testing my builds, below are the high-level steps I wanted automated.

• On every commit to the master branch, take the code hosted on my GitHub repository (repo in short).
• Run sanity checks to see there are no breaking changes.
• Deploy to my web server — hosted on a Linux hosted server.

The repetitive nature of this task made me realize that my blog had grown to a point where using a CI/CD pipeline started to make sense.

What is CI/CD?

Continuous Integration and Continuous Delivery and/or Continuous Deployment is the practice of continuously merging all the developers’ code into a single codebase; for automated building, testing, and quicker delivery/deployment. In simple language, the code written by everyone in the team resides in a single place and is always delivery-ready, by running self-testing automated builds on each code check-in.

The CI/CD process places great importance on releasing software frequently. This will, in turn, lead to faster updates for the product, and a better experience for the user. Here is a good CI/CD explainer from Atlassian.

Continuous Delivery ensures that the latest code is ready for deployment, by incorporating all the changes successfully up to the present time (e.g., Minor/Major Version releases).

If Continuous Deployment is part of the CI/CD pipeline, then the code is deployed automatically in short cycles (e.g., nightlies).

CI/CD for individuals/blog-owners

I agree that the complete set of advantages offered by a dedicated CI/CD pipeline is a bit of overkill for us mere mortals. But then, all of us deserve a bit more of automation in our lives, don’t we?! With this spirit, I came up with the 3 steps that I would like to automate :)

A bit of googling (is this still a thing?!) revealed that a CI/CD pipeline using containers is the fastest way to automate the above requirement. Out of the various options available (the popular ones being Jenkins, Travis CI, CircleCI, Buddy, etc..), I zeroed in on CircleCI. CircleCI is currently offering free accounts for GitHub repo owners, as are a few others listed above.

Enter CircleCI

Using the CircleCI platform, my requirement given above can be automated as follows:

• Create a separate job in the CircleCI pipeline to accomplish the step.
• Chain the 3 jobs into a workflow so that there is a logical flow. Say Job 1-> Job 2 -> Job 3. You may also specify the dependency between steps in the workflow, something like Job 2 needs to wait for successful completion of Job 1. Or, that Job 3 will wait for Job 1 and Job 2 to complete.
• Specify the trigger condition for your workflow.

A simple CircleCI Job

The above CircleCI configuration (saved in a CircleCI config.yml file) lists a job called “build” which has 3 steps:

• It spins up a docker image for node.js platform. Think of this step as bringing up the node.js environment for program execution.
• Checks out code — from a GitHub repository that you’ve connected previously.
• Runs echo command inside the docker image.

A Docker image is a container that gives the required functionality/environment for running your code. For your project, the container will provide an easy way to install dependencies and run your code in an isolated environment. A container is not fully featured like a VM, but faster to bring up and run code. So it works great for testing individual code components!

A more complete example

Now that you have seen jobs in action, it’s time to understand the next level: workflows. A workflow allows you to define the logical sequence of the individual jobs, complete with dependencies between each. In the above example, the build and test jobs run in parallel and once both of them complete successfully, the deploy job is run.

Use CircleCI to push changes to your blog

If your website code resides on GitHub, you can connect it to CircleCI and start watching your GitHub repo for commits.

The only thing required is to add the below file to your repo.

The config.yml file contains the configuration required by CircleCI for the jobs/workflows to be run! And you can keep the config.yml as part of your build. Pretty nifty, right?!

Next up, is to build your website inside the docker image. My website is built on Jekyll in a Ruby environment. So, I will launch a ruby docker image and build my website in it.

The build job is given below

The next step is to run a sanity check on the website, to check if it’s running fine. HTMLProofer checks to see if your rendered website works as intended, and that’s what I use. After this, we will save the website (in the _sitefolder) to be used for deploying in the next job.

The deploy job will first get the data saved from the previous job. Then, it uses the rsync Linux command to sync the _site folder contents to the web server.

rsync command does the following:

• delete flag: delete the contents in the Destination folder that doesn’t match the contents of Source folder (_site)
• exclude flag: excludes the file/folder on the Destination side from deletion.
• The file/folders to be copied, or only copied if they’ve been modified in any way. And only the modified part is copied, not the entire file!

Well, that’s it! Now, make some changes and commit them to your GitHub repo. And watch the CircleCI workflow take over. It took me just a day (and a bit of night :) ) to automate this. Who knows, you may do it in a shorter time.

Even though I have used CircleCI here, you can use any other CI/CD solution that is out there. It will follow a similar approach to what is described here. Go ahead and dabble a bit!

Note: The cover photo is by JJ Ying on Unsplash!

CircleCI: A Simple CI/CD Pipeline for Your Static Site was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

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 completes. This feature is called Run-To-Completion and is quite useful for programmers to understand the nature of JavaScript processing. No new events can kick-off during this period, i.e., Javascript is deterministic.

When I say kick-off, I mean a new event can’t start processing. But nothing stops a new event from getting on to the queue. After all, a queue is meant for one thing: waiting!

The queue mentioned above is called the Message queue, and each event triggered will create a new message and add it to the queue for processing. The main function of the Event loop is to process the messages (and the corresponding event) in the order they were added to the queue.

Say, you are calling 2 events one after the other, and the 2nd event needs data that needs to be modified/generated by the first event. As a Web Developer, you expect the 2 events to be processed one after the other. Well then, you’re safe working with JavaScript! Because JavaScript has single-threaded processing built into it. This is referred to as the “Concurrency Model” of the JavaScript engine.

Example

The above code will print [1, 2]. Because the function inside setTimeout()is only executed once the current event queue is empty i.e., after the last console.log() line is executed.

Note: Check this nifty tool created by Philip Roberts to better visualise how the Event Loop works! Rerun the sample code and just look at what happens. It makes it so easy to understand how exactly JavaScript handles events.

Concurrency

The Concurrency Model has an interesting side-effect: Since the events are processed in order, the callback functions will never be called before the calling function finishes executing!

Promises are made possible due to this aspect of the JavaScript language. And they’ve made our life simpler, wouldn’t you say?!

Javascript is single-threaded and non-blocking! Feels like a contradiction, but it isn’t. Let me explain.

Since events are processed in the same order they’re added to the Message queue, you would expect IO operations to block further processing till they finish. But it ain’t so. :) Any IO operation is performed by firing events to relevant Web APIs, with callback functions attached to these events. The callback functions enable Javascript to perform IO operations in a non-blocking manner.

Even though JavaScript is a single-threaded, blocking, synchronous language, the environment in which JavaScript is executed allows asynchronous function calls to be performed. By running IO operations through such APIs, JavaScript can handle multiple things without blocking the main thread.

Example

Here is a sample code for a Submit button used for comment submission. The submit function uses an AJAX call to send the comment to the server, with callback functions for success/error (done/fail) handling.

The comment submission is sent, and the last console.log() is executed without any delay. Whenever the request call returns, it will execute the console.log within!

This illustrates the non-blocking nature of JavaScript. If the user interacts with the website during the submit call, the website is able to react to the user. The Mozilla docs even go on to say that JavaScript is “Never blocking”.

ES6 Promises

The only exception to the Message queue concept, is how (or rather when) the Promises are resolved. You would expect a Promise which resolves to be added to the end of the queue for processing. But a Promise is designed to wait the least time possible before execution!

How would you ensure that a Promise will be executed soon without compromising the Run-To-Completion feature? By adding it to the beginning of the queue! So that it gets executed as soon as the current function completes. This will guarantee that an asynchronous call will not have to wait too long after it returns to begin execution.

I hope this article has shed some light on the Event Loop of the JavaScript language and given you better understanding of the Concurrency Model.

If you want to understand the Event Loop in depth, there are several resources already available. The ones I found useful are given below:

• The JavaScript Event Loop
• JavaScript Event Loop Explained — Frontend Weekly — Medium

Note: The cover photo is by Pankaj Patel on Unsplash!

Originally published at www.amithraravi.com on 19 September, 2019.

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 Isotope. This is how I got it to work.

Initial Setup

Before we delve into the solution, it’s better to understand the React basics that go into making it work.

• A React component defined as an ES6 class usually implements event handler as a method of that class. This method has to be ‘bind’ed in the constructor for ‘this’ to work.

• Toggle the status of the buttons using the state of the component. The function this.setState() is used for this purpose.

• Style can be imported from CSS/SCSS files into the React component and used as shown below:

Say we have 2 groups of items — Tech and Personal — which would mean we should have three filter states — All, Tech and Personal respectively. Hence, a React component which will have 3 buttons, each having a callback that sets the state of those buttons, can be written as:

The GridFilter component renders a group of 3 buttons. Each button has a callback function for handling the click event. The callback functions are binded in the constructor (without which the call this.handleClick is not possible). The state variable is used to toggle the status of the buttons upon callback.

The 3 buttons as well as the <div> element containing them have classes - isChecked, filtersButton and filtersButtonGroup respectively. These are used to design the look of the buttons.

What happens when you click a button?

Does the button change its look?

How does the user know the state of each button?

At a bare minimum, the button that is clicked should look different compared to the other buttons in the grouping (this is kind of self explanatory).

Note that the state variable has 3 variables in it. These store the status of the 3 buttons - All, Tech and Personal. Right now, only the status will get toggled on clicking the buttons. But they are supposed to do something more i.e., filter the posts in the grid and animate the action. This is where Isotope comes in.

Install/Setup Isotope.js

First, install isotope using npm (or bower).

npm install --save isotope-layout

Then import it into your GridFilter component.

import Isotope from "isotope-layout/js/isotope";

If you have a pure HTML page containing a grid with the following hierarchy…

In order to use Isotope on such a grid, initialize Isotope using the class names grid and grid-items.

For filtering, you would call the arrange() method on the Isotope variable.

Pretty simple, right? How do we go about doing the same in our React component defined above?

Integrating Isotope into React

The changes to the React component are done in the 3 handleClick functions. See below:

Each of the functions has called the arrange() method to filter the grid items as required. But why is there an initialization done before every call? Ideally, this code should be in the constructor, right?

Well, I thought so too. And my first implementation had the initialization code in the constructor. But for some reason it didn’t work. I used to get an ‘undefined’ error upon clicking any of the 3 filter buttons. So I moved it into the ComponentDidMount() function thinking it would work from there. But it didn’t either.

Finally, I came up with the idea of initializing before use in each of the 3 handleClick functions. You can see that the initialising code is called only when the Isotope is undefined, meaning it only runs once.

Now, you can insert the GridFilter React component into any of your pages. All you need to do is supply the class names for your grid and grid-item in the initialization code of the component!

Ps: If you do get the Isotope initialization to work in the constructor, let me know!

Originally published at www.amithraravi.com on January 23, 2019.

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.

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 using <table> element are fixed in nature. They can’t be redesigned to handle new changes, everything will have to be rewritten completely. This is because the <table> element is meant to display only tabular data, and nothing more. So do not use it for website layout!

When we look at the other options available, you will realise why it’s so bad to use the Table-based layout. Especially when you are trying to create responsive websites.

A bit of history: When the CSS standard arrived in 1996, it helped alleviate the problems created by table-based layout. The <div> element ruled the layout design for a long time, until the CSS 2.1 standard was finally published in 2011 and float walked in to claim the throne!

Float — The Classical Way

The CSS Float property is used to float elements in a website. For example, you can float an image next to a body of text. This is <float> in its simplest usage. The same concept can be used to design an entire website.

For designing an entire website, the basic idea to understand is that the <float> element can be used to design an n-column layout. We can combine this with the <div> element to create a layout as given below.

Note: A float column should be cleared, or it will mess up the layout of elements that follow after!

Today, a website can be accessed from so many different devices — mobiles, tablets, laptops, PCs. So, how would you ensure that your website looks good on any device? The answer is Responsive Web Design. It has only one guiding principle: A web page should look good on any device!

w3schools has a rather neat definition: “Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).”

Now, if you want to make sure that your website is responsive and looks good on all kinds of devices then you can do something like the code below.

Add the following <meta> element to all your web pages:

Modify the CSS to add a media query:

This basically makes the website display as a single column for devices with resolution smaller than 800px (most tablets and all smartphones). Why do this you ask? Imagine looking at a two-column website on your mobile device and trying to read the content. It’s not appealing, is it?!

Flex — The Responsive Way

CSS Flexbox makes it quite simple to design flexible responsive layout for websites. It takes the concept behind float and streamlines it for easy adoption. The above code can be rewritten as follows:

It’s that simple.

You can imagine your website to be a hierarchy of Flexbox elements, starting with the body element, and diving down into the depths till you reach the individual components on each page. Once you start adding <flex> elements to your website, it will become second nature to think of your layout in terms of <flex> properties. That’s how powerful Flexbox is!

I won’t add anything more here, because there is a beautiful website which already explains Flexbox and its properties in detail. This CSS Tricks page is my go-to reference for all things flex!

Grid — The Future

By now you should be able to spot the issue with using <flex> to design an entire layout. It is a one-dimensional tool (a row/column layout), and as such has to be adapted to be used for designing a website layout which is two-dimensional. This is why you will end up with a hierarchy of nested Flexbox elements in your layout design.

Grid solves this by providing a two-dimensional layout that can be designed as per your requirements. The below code creates a 3-column layout of 8 items.

Going by the example above, you can design a layout of your website using the CSS Grid as follows.

The grid-template-areas is a great way to structure your layout. It’s represented visually in code and is easily understandable. Comparing this with the earlier ways (the rigid structure of the tables, the cumbersome floats and the multi-level hierarchy of the flexbox), we can see how easy the CSS Grid has made designing a layout!

After going through each of the above, you can see that a pattern has emerged.

• The CSS Grid is best suited for designing entire layout of the website.
• The CSS Flexbox is optimal for designing individual rows or columns of components.
• Responsive Web Design should be considered in the beginning stages of website design. You should have a pretty good idea about how your website will look on every kind of device.
• And finally, DO NOT use Tables for layout design.

I hope this post has been easy to understand and has added to your CSS/HTML knowledge. Please don’t hesitate to ask any questions that you may have!

Until the next bog post..

Originally published at www.amithraravi.com on December 29, 2018.

Website Design: Creating the Layout in HTML was originally published in Elfsight Magazine 🚀 on Medium, where people are continuing the conversation by highlighting and responding to this story.

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 BBC study done on Fake News in various countries, India being one of them. This was of immense interest to me, as I see the significant real-world consequences of fake news in the current political climate.

It took me about 3–4 days for me to go through the entire study. The study is quite detailed and employs a qualitative analysis of the representative dataset to try to understand the prevailing situation in India. I urge everyone to go through the study for the sake of understanding why fake news can be so dangerous. If you are still not convinced, please see this article to get the basics of the study results and find some context for the study was deemed necessary.

Here is my understanding of the data from the BBC study.

The Current Situation

Indian media, especially the vernacular news media, has become sensationalistic and hyperbolic in the way they deliver news daily to its users. People know that most of the coverage is restricted to the news that sells, rather than news that needs to be seen/spread. And this knowledge spurs the growth of alternative news outlets. People are ready to believe what influential individuals in their circles say and broadcast it to all their acquaintances.

Rather than the authenticity of information, it’s the social influence of the sender that urges the user to forward information deemed to be important for consumption by their peers. And most messages are forwarded without being read, which tells us that people will only give a cursory glance before sending a message on its way to their friends and family. This removes any incentive for producing quality digital content, which can be verified to be true, because it’s so easy to create and share any kind of content.

“What is new though, is that with the definition of news becoming expansive and all-encompassing, we find that anything of importance to the citizen is now considered ‘news’. It then also stands to reason that they are happy receiving information from just about anyone — and not just a handful of news organisations with rigorous journalistic practices, trusted brand images, and legacies of accuracy. Even more importantly for our purposes, we find that people don’t differentiate — or more accurately find it too hard or too resource intensive50 — to differentiate between various sources of news (in the broad sense outlined above). Social media, with its low barriers to entry, provides innumerable sources of information — and the distinctions between them are flattened in the minds of the users.”

~ From the study

The Mindset of the Average Indian User

With the Internet being touted to be the greatest thing since the Industrial Revolution, everyone wants to use the Internet and be seen doing it. India arrived quite late to the party, so to speak. And Indians felt left behind. So they lapped up the cheap Internet rates and the equally cheap mobiles which could connect them to the ‘Internet’ being offered due to the entry of Jio. Till now, the news was something you could talk face to face in groups. But this push to digital had opened up a new public space. Twitter, WhatsApp, Facebook, and their ilk had opened up a space where people can say and do what they want without being physically there to face the consequences of their actions.

As such, Indian users embraced these social media spaces as public spaces where they could voice their opinions and engage with like-minded individuals. This meant anyone from any part of India could be in touch with people all over the world. This newfound connectivity excited the Indian user. They were placed in a unique situation of not having experience in handling the informational deluge and yet having the tools to make use of it any way they saw fit.

“WhatsApp groups bring together like-minded people into tight-knit online communities. While this is supposed to be of a positive nature, more often than not this character of WhatsApp is used to mobilise groups to violent action. This is beside the fact that WhatsApp is a platform known for spreading low-quality information of doubtful veracity.”

~ From the study

The Result

Easy access to the Internet and the resulting information overload has led to:

• Memes — Images with short texts attached to it, are the most shared pieces of ‘information’. Why do people believe memes, when they wouldn’t trust the same information if it was presented on a billboard in their city?!
• The ‘headline’ is the full story. We have developed shorter attention spans to deal with the overabundance of information.
• In-depth information or analysis is often lost to readers. Analyses of the information being presented take valuable time out of the day, this is not acceptable to most users.
• Sharing content is more about ‘feeling’ (socio-political ideology) rather than ‘thinking’ (critical analyses). This point is actually a result of all the above ones. It is easy to express what you feel rather than do a thorough analysis of the information you see.

So a key feature of online platforms is the sharing of content without active, engaged communication. Share because you feel it is important, not because it really is.

“Most people do not believe they are the ones spreading fake news. For them, the dominant association of fake news is scams and scares, done by nefarious actors for profit making, or at a deeper level fake news is news that is dissonant with their closely held beliefs and self-identity, done by those in a political outgroup. Either way, citizens don’t think they themselves have a role to play in this. This creates a challenge in tackling the spread of fake news: if you don’t believe you have a role to play in the sharing of fake news, then you certainly won’t respond to messages exhorting you to not share fake news.”

~ From the study

The Tools Required to Fight This

It’s quite imperative that all of us understand how why widespread the issue of fake news is. The Indian users need to become aware of the way opinion trumps (pun intended) fact in the current political climate. The average Indian user should exercise more caution while browsing information and distributing it to their family and friends. Fake news spreads because people are ready to believe whatever feels right to them — which means they need to mature as responsible users of the Internet age. Also, the society as a whole needs to take cognisance of this issue and work as a community to work on this.

I will leave you with the following conclusion from the BBC study.

“We have to conclude, though, that checking the flow of fake news, especially in their current predominant form of images and memes is likely to be extremely challenging. We suggest that all actors — platforms, media organisations, government, civil society — come together to tackle the problem, since it is not just a technological problem. But in this, ordinary citizens too, need to take more responsibility about sharing things without verification — and surely, platform-centric solutions to help them can be found without compromising too much on the essential characteristics of the platform. We also recommend that journalists investigate further whether or not there is an organised ecosystem of fake news production and dissemination.”

~ From the study

Note: All images used in this post are from Unsplash!

Originally published at www.amithraravi.com on December 4, 2018.

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 available) that help to maintain the same feel across pages and reuse commonly used blocks. Wireframing tools are usually expensive and not really needed for building a personal website. But if you’re looking at a medium sized website for e-commerce purposes then they’re a worthy investment.

Okay then, let us deep-dive into the design process and see the steps involved.

The Content

What is the content that needs to be hosted? A personal blog? A niche market? A portfolio of your work? Each of these is talking to a different audience and the information expected also differs.

A personal blog is about your one passion turning into much more and hence requires a space to explore it. It will be less formal and more subjective in nature. A marketplace is about selling your goods, which means its all about displaying your product range. A portfolio site is about showcasing your amazing work done through the years (and growing).

Usually, all of these will require a landing page (SEO talk for your main page), which has the links to all the different sections of your website.

• A blog page listing the posts you have written.
• A products page listing out the products in a grid.
• A portfolio page with all the amazing work you have done.

Along with these, you will also need a couple of common-purpose pages:

• ‘About’ page: It has information on the ‘core functionality’ of the website and the people behind it.
• ‘Terms & Conditions’ page: This is essential to address user issues like data privacy and advertising policy. Being transparent from the word ‘go’ is very important in the current political climate.

Just start with a minimal set of pages that you think are necessary, and add more as you need. This will ensure that you add the core functionality first, and follow through with the bells and whistles later.

Layout of your website

To achieve a consistent look and feel across your website, all the pages need to conform to one design. This is usually achieved through the same header / footer sections and consistent colour and design choices. Choose a background colour / pattern / image that is relevant to your website. This is what we call the basic template of a website.

Once the layout of the different pages have been decided upon, the next thing you should think of is navigation. The navigation between the different pages should feel seamless to the user. For example, the Header / Footer sections should contain links to the main pages of your website. Along with the navigation section in the Header, page-specific navigation links offer users easier backlinks to come back to the main sections of the website. In each blog post, a link to the same category of posts is relevant and expected. You can also add links to the next/previous posts at the end of the current post being read. This leads to the evolution of a tree structure of your website, which would be something similar to the one below.

I believe, the number one thing to learn for designing websites is layout design. Or at least a basic understanding of the HTML/CSS elements like the Flexbox and Grid. If you don’t know what they are, then now is a good time for a refresher course on these. To play around with the different layouts and make sure they work as expected, its essential to know how to use these elements to fit your requirements.

Prototype It!

The first build of your website is just that. It has all the content presented as per the intended design and spread across the different pages. This gives you an overview of how the website will look. Once the initial version is coded, the basic design is complete. This will be your prototype!

A prototype may not have all the functionality working as expected, but it will have the look and feel of the website as designed. This is the main use of a prototype, it gives you a simplified version of your website for adding in functionality as required. It acts a placeholder for the complete functionality to be added later.

Once you have a working prototype, you have completed the basic part of your website!

Note: All images used in this post are from Unsplash!

Originally published at www.amithraravi.com on November 23, 2018.