Notes

Well. URI encoding First, URLs can only read ASCII characters - so special characters like ’ ’ (space), ‘<’, or ‘>’ gets encoded using the percent-encoding convention. The javascript function to encode: encodeURIComponent() -> encodeURIComponent('<') // %3C The javascript function to decode: decodeURI() Accessing cookies via DOM document.cookie -> this will return you the entire string of cookies, delimited by ;. e.g. name=123; SID=455 IMG src is actually creating a get request One way of making a request to a server is to just do img src. The following script will make a get request to a server URL and send the cookies! ...

In the web security class this week, I learned another class of attacks: cross site scripting attacks, or XSS for short. What is XSS? In essence, an XSS attack occurs when site A manages to get a script that it wants to run into site B. An example of a reflected XSS is as follows: Evil.com gets Joe to click on a malicious link. That link then directs Joe to a bank.com domain, along a query parameter (e.g. bank.com?q=BALANCE). Evil.com knows that bank.com’s code is badly written, such that anything sent along the query parameter will be reflected in the html file, unsanitized. As such, it injects <script>sendcookies</script> into the query. When the HTML page loads, the script is ran, and Joe’s cookies are then sent to Evil.com. ...

So whilst working on my Python, I stumbled upon this rather tricky Regex problem that took me a long time to solve. The problem is as follows: 1 2 3 4 5 6 7 How would you write a regex that matches a number with commas for every three digits? It must match the following: • '42' • '1,234' • '6,368,745' but not the following: • '12,34,567' (which has only two digits between the commas) • '1234' (which lacks commas) The difficult part of this problem is making sure that your regex manages to match everything under 1000, which dictates something like \d{1-3}, but at the same time, this logic fades into irrelevance once the number passes 1000 for instance in the case of '1,234'. A thought I had was: how do you include conditional logic into Regex itself? Like, if the number is more than 1000, then the RHS parts of the regex cannot be 1-3 digits, but must be \d{3}. And so, I tried incorporating conditional logic into my regex like so, the final product of which was: ...

Whilst trying to get my app live onto Heroku, I realized that there were a lot of kinks that I needed to get right. This post attempts to document the complete series of steps on getting both the frontend built statically and copied into the backend, as well as getting the backend hosted on heroku. Steps on hosting both frontend and backend of your app on Heroku Step 1: Ensure cors is installed in backend npm install cors ...

So I was trying to implement Markdoc into my frontend app, which requires a basic markdown section. I’ve encountered Markdoc before, and was quite keen to try it out. And thus I followed along to their instructions on their integration guide for React. However, I found the guide pretty cryptic, and was basically a much more advanced configuration than what I needed. All I needed to do was to render some markdown file saved on the frontend onto the page. Did I need to create a Markdoc schema? What even are they? (And why bombard new users with unexplained schema definition files?) Did I need to create an express server in my case? No. So detailed below is my own much leaner implementation of it: ...

So in this app that I am building, I need to integrate an e-signature feature where the user clicks a button, and the PDF file is being sent directly via Docusign to the client to request for signature. Of course, I don’t have any idea whether this is possible. Luckily, I discovered that Docusign actually has an API service. In this post, I am going to document everything that I learn about it. ...

So part of my requirements for Kotakit was that I needed to upload PDFs into MongoDB. And I’ve never done that before. After googling, it turns out that for files less than 16mb, I could simply upload them as binary files. I also know next to nothing about the binary format. After an afternoon of tinkering around, I’ve finally managed to upload a binary file into my local instance of Mongodb. So here’s an attempt to note down everything that I’ve learned about the process and what is required. ...

Grid System Enabling the grid system Click F → and then select the different kinds of grids. Select the Grid layout - it should already be in your file. if not, import it from libraries. Adding Horizontal grids Add new layout grid Set to Row Count = auto Type = top Height = 16 Offset & Gutter = 0

I’ve never uploaded a blob file to an express backend, or MongoDB before. All the times that I’ve learned backend development, I was mainly handling JSON data types. Which is why, when I tried sending a POST request to an express backend with a body that contains a File data type, this error occurred: 1 2 request entity too large PayloadTooLargeError: request entity too large After a quick googling, it turns out that there are a few things that I’ll need to know about “uploading” files to a DB through an express backend. ...

So, whilst working on the file upload and Docusign feature of Kotakit, I realized that I needed to get a deeper understanding of Antd’s upload component in order to tune it to my desired effects. Invoking the upload component is easy. All you need to do is to wrap a <Button> component up within an <Upload> component: 1 2 3 <Upload {...props}> <Button icon={<UploadOutlined />}>Click to Upload</Button> </Upload> Where it gets tricky is the props used. The Upload component has many flags which allow you to adjust the desired feature of your upload component. ...