It works in Firefox, but not in Tor Browser

In today's world, where websites play a major role in providing various technical services to users, web developers have an important role. Though the war between back-end v/s front-end is never ending, nonetheless we all can probably agree on the fact that front-end does provide the non-tech users with an interface so that it becomes easier for them to use the back-end functionalities. Thus, the great problem of making front-end easy to use while also looking good comes into play. With the advent of the web, web technologies have also advanced a great deal. One of them is definitely CSS. CSS now has enough power to create a really interactive decent looking website only using it. With attributes like filter, masking and so on, you no more even need photoshop to change your images every time; with the help of grid-layout and flex you don't need to bang your head about laying out items properly on your webpage properly. Now you must be wondering why am I telling all this and n…

CSS Masking: Mask of Batman

Recently, I have been watching videos on CSS to know more about the various interesting features in CSS such as grid layout, flex, filter and so on. After all, it is one of the Turing Complete languages. One way I like to learn more about languages is by watching conference talks. So, I was going through the different talks in CSSConf 2015 when I came across this talk by Tim Holman titled Fun.css. It is a really fun talk but one thing that really caught my eyes was the transition between slides using a star wipe. I searched to see if I could find the code for how to do it with purely CSS but didn't get much help. This is when I decided to give it a try myself. But why Star? I would make a Bat Swipe.

So this is the final prototype I made using just CSS without any Javascript.

See the Pen Bat Swipe by Saptak Sengupta (@SaptakS) on CodePen.
The main CSS property that is used in the above example is mask-image and associated CSS Masking properties. What masking does is hiding parts o…

Science Hack Day India, 2017

So, finally, managed to clear up some time to write about the best event of the year I have attended - Science Hack Day India, 2017. This was my second time to Science Hack Day, India. SHD 2016 was so phenomenal, there was no way I was missing it this time either. Phenomenal more because of the wonderful people I got to meet and really connect with because the entire atmosphere about the event is more like an informal, friendly unconference type. This year it was no different.

Picture Credit: Sayan Chowdhury

Science Hack Day 2017 was truly bigger, better and even more fun than last year. Happening at one of the most happening venues, Sankalp Bhumi Farm, just the stay is so lovely, one doesn't need much other reason to attend it. Unlike last time, this year I had two friends accompanying me to Science Hack Day. We reached early morning in the 0th day. Like all conference, it was really good to meet everyone whom I personally was meeting maybe after 6 months, or an year or maybe for…

Uploading Images via APIs in the Open Event Server

APIs help us to send and receive data in some particular data format that can then be used individually or integrated with a frontend UI. In our case, the entire API server is used to manage all the requests from the frontend and send back the necessary response. Usually, the application is to send simple form data which is then stored into the backend database and a valid jsonapi response is shown. However other than normal text, url, datetime data one very important data is media files, in our case event images, user images, slides, etc. In this blog, we will particularly deal with how we can upload images in the server using API.
Sending Data
Firstly, we need to decide how do we send the data in the post request of the API. So we are sending a base64 encoded string representing the image along with the image extension appended to it, for example, data:image/png;base64,iVBORw0KGgoAAAANS. This is a widely used format for showing images over the web. So when we send a POST request we …

Avoid Race Condition in CSV exports

One of the biggest problems that appear while writing any file in the server side is a race condition. A race condition when two or more users make request to write to the same file in the server side and since neither of the operations are completed, so there is a certain problem in the integrity of the data written and may also cause the operation to be completely blocked. So how to stop this and still maintain that a large number of files or memory is not used? Let’s see.

What is a Race Condition?
A race condition is a situation when two or more processes perform a write operation on the same file at the same time. This causes an undesirable situation since the process should be in a sequential manner. So the situation causes something like a ‘race’ between the two server requests to change or modify the same file. So in such a scenario, there is no guarantee that the data written to the file is correct or will be meaningful at the end. Maximum probability is it won’t be.

Avoiding R…

Ticket Ordering and Positioning (Front-end)

As discussed in my last blog about ticket ordering and positioning, in this blog we are gonna talk about how we implement the front-end part of re-arranging the tickets. We essentially do it using compute and methods of Vue.js. The functionality that is expected in the front-end is, the event organizer should be able to move the tickets Up or Down the order and save that position so that it gets displayed later in that very particular order.
Like I said above we use two main things of Vue.JS for this purpose - Compute and Methods.
Compute We use this to get the sorted list of tickets based on the position key of the tickets and use this sorted list to display the tickets in the event editing wizard. Whenever you change the value of the position for a ticket, it automatically updates the list to sorted list again and hence the order of ticket in the front-end also updates. To add a compute function in Vue.JS, inside the new Vue() object creation, we add an attribute computed and insid…

Ticket Ordering or Positioning (back-end)

One of the many feature requests that we got for our open event organizer server or the eventyay website is ticket ordering. The event organizers wanted to show the tickets in a particular order in the website and wanted to control the ordering of the ticket. This was a common request by many and also an important enhancement. There were two main things to deal with when ticket ordering was concerned. Firstly, how do we store the position of the ticket in the set of tickets. Secondly, we needed to give an UI in the event creation/edit wizard to control the order or position of a ticket. In this blog, I will talk about how we store the position of the tickets in the backend and use it to show in our public page of the event.