Life Documentation: Tamal Anwar

A server does not allows another website to make response. 

So in my server, I have to allow that origin.

Here’s how to do it:

res.setHeader( 'Access-Control-Allow-Origin', 'http://domain.com' );

This will work.

Next I need to allow Content-Type's for POST requests. So I also have to add:

res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

Putting it all together in index.js as a middleware, so it will run for every request:

app.use(function (req, res, next) { res.setHeader( 'Access-Control-Allow-Origin', 'http://domain.com' ); res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); next(); });

Why I need this?

I want to make people engaged in my conversation (through talking, messages and videos) so more and more people will be interested in what I have to say.

I will initially use this skill for making vlog stories on YouTube, make them fun and engaging.

And why I want to make vlogs?

So I can create something, store them for future and maybe create an audience.

How I am approaching this?

I searched for a Udemy course first, found a promising one that I like but it’s 27 hours long. I don’t have that much time to spend, maybe in the future.

So I am going to watch story telling videos from YouTube. This will give me a barebones starting point and give an overall idea from many different sources.

Have collected a list of ten or so videos on a public playlist.

I will spend one hour every day for the next week to watch, learn and apply the skills. To apply, I will take notes and also make a post using the techniques on social media.

This chrome extension will hide the endscreen for every video I watch.

The extension will run a script to hide a CSS class.

.ytp-ce-element { display: none; }

Files

manifest.json background.js // Background script that runs on chrome content.js // My custom script to run

manifest.json

{ "name": "Hide YouTube Endscreen", "version": "1.0.0", "description": "Hides YouTube endscreen so you don't miss the climax part of the music video or movie clip", "permissions": ["activeTab", "tabs", "declarativeContent"], "background": { "scripts": ["background.js"], "persistent": false }, "content_scripts": [ { "matches": ["*://*.youtube.com/*"], "run_at": "document_idle", "js": ["content.js"] } ], "page_action": { "default_icon": { "16": "img/logo.png", "32": "img/logo.png", "48": "img/logo.png", "128": "img/logo.png" } }, "icons": { "16": "img/logo.png", "32": "img/logo.png", "48": "img/logo.png", "128": "img/logo.png" }, "manifest_version": 2 }

background.js

chrome.runtime.onInstalled.addListener(function () { chrome.declarativeContent.onPageChanged.removeRules(undefined, function () { chrome.declarativeContent.onPageChanged.addRules([ { conditions: [ new chrome.declarativeContent.PageStateMatcher({ pageUrl: { urlContains: 'youtube.com' }, }), ], actions: [new chrome.declarativeContent.ShowPageAction()], }, ]); }); });

content.js Here I will write the functionality.

function doSomething() { // Code goes here } doSomething();

I removed the endscreen like this: document.querySelector('.ytp-ce-element').style.display = 'none';

After uploading the chrome extension I saw the video only hides one end screen. There can be upto four end screen items in a video.

So I used the querySelectAll() to select all the elements. This creates an array. My next job is to run a loop and hide all of them.

Updated code:

function loadStuff() { // Target and get all the endscreen items var allEndscreenItems = document.querySelectorAll('.ytp-ce-element'); // Hide them all allEndscreenItems.forEach((item) => (item.style.display = 'none')); } loadStuff();

So it works now!

Problem

After checking a few other videos I saw the end screens are back.

Apparantly, the script only runs when I do a page refresh, but YouTube loads videos without refreshing the page.

This is where I got stuck and I need to learn how to run the code everytime a new video plays.

This is the part I hate the most.

Temporary Solution

I made a temporary solution by putting the code inside a time interval. It will now run every second. I know it's not very efficient but it is working now.

setInterval(function () { loadStuff(); }, 1000);

Publishing to Chrome web store

Uploading was straightforward. I just uploaded the folder in zip and set the description and images. It cost me \$5 for one time developer fee.

Chrome Extension Link

I also uploaded it to Firefox and the process for making an extension is the same as chrome. So I was able to upload the same package.

In some cases I don't know how many times I have to call the api (like a user request), so I will need to run a loop. Now it's possible to call the api with a for loop using async await like this:

The function should have async keyword before the function keyword

for(let i = 0; i< list.length; i++) { let response = await callTheApi(); }

But it's slow and takes way more time. Better if I run them all at once with Promise.all()

For this I will run the loop first and then call the array later with all the promises.

var allPromises = []; inputRequestArray.forEach((request) => allPromises.push(request)); var allReturnedPromises = await Promise.all(allPromises); // The code below this will not run until all promises resolve above

This way all three or so API calls run at the same time and resolve in less time.

We can streamline this code further with Array.map():

The file input field for uploading the file. This should be inside the <form> tag. It should have enctype="multipart/formdata" when using vanilla JS. React doesn't seem to need this.

<input type="file" name="excelFile"/>

Add an onChange action to hook up a file upload action.

Capturing the file:

let file = event.target.files[0];

File is an object with name, size and various attributes.

Use the FileReader class to create a new reader to make the reading and stuff.

let reader = new FileReader(); // Reading text and csv files: reader.readAsText(file); // Reading complex files like xls files reader.readAsArrayBuffer(file);

Hook into the onload event listener that will fire after the file is being loaded.

reader.onload = function(evt) { var data = evt.target.result; // Do something with the data, display it // OR var { result } = reader; // Do something with it // The data and the result is the same thing }

Reading Excel SpreadSheet xls, xlsx with XLSX module

Get array buffer data and process the spreadsheet with this module.

npm i xlsx

import XLSX from 'xlsx';

Now use the following functions to parse the excel sheet and convert the data into a JSON object:

// Parses the data var workbook = XLSX.read(data, {type: 'array'}); // array because I used readAsArrayBuffer // It can have multiple sheets, here taking the first one var first_worksheet = workbook.Sheets[workbook.SheetNames[0]]; // Converting the worksheet to json var jsonArr = XLSX.utils.sheet_to_json(first_worksheet, { header: 1 }); // Do something with the json

Start a react application with typescript template:

npx create-react-app my-app --template typescript

Or when creating inside the project folder:

npx create-react-app . --template typescript

Have to install @types/react-redux to make Redux work with TypeScript

npm i @types/react-redux

I am working with TypeScript for this new React project and it’s hampering my productivity. I am learning it as I go. 

Getting errors in every other line of code and the overall productivity is low. But I know TS is great and it will make me productive over the longrun.

I read files from the FileReader class like this:

new FileReader("hello.txt");

The file sits inside the project root folder (where I can see src, bin folders)

The FileReader is primitive, so I have to wrap it around a TextReader or Scanner class. I am using scanner to create the input stream:

Scanner input = null; input = new Scanner(new FileReader(fileName));

The Scanner input should be defined outside so that I can use the input later in the project. It should be set to null to avoid Java showing the local variable may not be initialized error.

Once I have the input stream, I can process the text file line by line with input.nextLine() or word by word input.next()

Checking if there are more text in the file: input.hasNext()

The entire input should be wrapped inside a try-catch block, it throws a FileNotFoundException:

try { input = new Scanner(new FileReader(fileName)); while(input.hasNextLine()) { System.out.println(input.nextLine()); } input.close() } catch (FileNotFoundException e) { // TODO: handle exception System.out.println("File not found " + e); }

Writing Files with Output Stream

PrintWriter is the available class in Java to create the output stream. I create this by doing PrintWriter output = new PrintWriter("output.txt")

This will create a file in the directory, rewrite if already exists.

I can take the output object and write to it like this: output.println() for writing line by line or output.print() for writing in the same line.

Again, I have to wrap it around a try-catch block and catch an IOException error.

try { output = new PrintWriter("output_" + fileName); output.println("Some text"); output.close(); } catch (IOException e) { // TODO: handle exception System.out.println("Error creating the file " + e); }

Reading from one file and writing to another

The code is inside main:

import java.io.FileNotFoundException; import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; import java.io.PrintWriter; import java.util.Scanner; public class FilePractice { public static void main(String[] args) { Scanner input = null; PrintWriter output = null; // Read the file contents try { input = new Scanner(new FileReader("today I will do.txt")); } catch (FileNotFoundException err) { System.out.println("Error reading the file " + err); return; } // Create the output file and output stream try { output = new PrintWriter(new FileWriter("something_something.txt")); } catch (IOException err) { // TODO: handle exception System.out.println("Something went wrong writing the file " + err); input.close(); return; } // Write contents to the file try { while (input.hasNextLine()) { String line = input.nextLine(); output.println(line); } System.out.println("Writing Done!"); } catch (Exception err) { System.out.println("Error trying to write to the file " + err); } finally { input.close(); output.close(); } } }

Learned the details about MVC design pattern. This is used for graphical user interfaces.

A model is an object that holds information about the data and methods to manipulate them.

The view is the object that deals with how to display the object.

The controller will stay in between and manipulate the data.

The controller object takes in the model and view. It will take instruction from the user and update the view.

It’s useful to update the view everytime I am changing the model.

Here’s how I implemented MVC in JavaScript, following this example from tutorials point.

Today I lucid dreamed. (it's a state when you are aware of the dream and can control it) I went downstairs, then I reached a beach. I looked at myself in the mirror to see my face.

When you see yourself in the mirror, what you will see is a representation of yourself by your subconscious self. Sometimes it can freak you out because it won't be what you see in the real world. Okay so I saw my face in the mirror, a happy face. I also noticed that I have eyes in my ear. So I have about 4 eyes. I did not freaked out because I am aware that it's my dream.

I went to the beach waves. Dipped my feet with it.

What it's gonna be? Germany or Brasil? Just 3 hours to go for the semi finals in world cup. I hope Brasil wins and meets Argentina in the final (I hope Arg wins too)

Today's google doodle was great. In this world cup the referee draws a line with a foam can -it looks kinda like the shaving foam.

So in this doodle g-o-o-g-l-e letters are standing in a row as we see when ever someone takes a free kick. The referee (r) draws a line and sees the bearded G and puts some foam in his face too.

The animation ends when the referee pulls out a razor as he were to shave G's beard. That was so funny!

If you missed the doodle you can search for "google doodle july 8 2014"

আমি ক্লাস এইটে পুলিশ ইস্কুলে ভর্তি হই। তখন ছিল দোতালা, আমার ক্লাস (ক্লাস এইট বি) ছিল ২০৭ নাম্বার রুমে। আমি তখন থাকতাম মিরপুর ১৪ নং পুলিশ কোয়ার্টারে। যারা সেই এলাকার সাথে পরিচিত, তারা জানবেন যে পুলিশ কোয়ার্টার আর পুলিশ স্কুল পাশাপাশি। মাত্র ২-৩ মিনিটের পথ।

পুলিশ কোয়ার্টারে অফিসাররা আর দাঙ্গা দমন বিভাগের পুলিশেরা থাকতো। আমরা থাকতাম ৬ নাম্বার বিল্ডিং এ, যেটা পর্যায়ক্রমে সর্বশেষ বিল্ডিং ছিল। আমাদের বিল্ডিং এর পাশে টিন-শেড কলোনি ছিল। সেখানে পুলিশের নিম্ন পদস্থ কর্মীরা থাকতো যেমন পুলিশের বাবুর্চী, ড্রাইভার, ধোপা, পিওন ইত্যাদি।

এর আগের ব্লগ পোস্ট (তালাচাবি সমাচার) -এ আমি লিখেছিলাম পুলিশ-ইস্কুলের চোর-চোট্টাদের ব্যাপারে। এবার আমি আরেক ধরনের স্টুডেন্টদের কথা লেখব।মানুষ বড় হয়ে কি কাজ করবে তার ইঙ্গিত ছোটবেলাতেই পাওয়া যায় বলে কেউ কেউ মনে করে।আমাদের স্কুলে আমি অনেকের ব্যাপারে কি কি অনুমান করেছি তা পড়ুন,

স্টিলের বড় স্কেল পাওয়া যায়; আমি যখন স্কুলে পড়তাম তখন সেগুলো ২০-২৫ টাকায় পাওয়া যেত।এগুলো অনেক শক্ত আর একই সাথে খুবই ধারালো। আমি প্রায়ই দেখতাম কিছু ক্লাসের ছেলেরা সু্যোগ পেলেই বেঞ্চ ছিলতো। আমাদের স্কুলের বেঞ্চগুলো অনেক উচ্চমানের। হাইবেঞ্চ-লউবেঞ্চ একসাথে স্টিলের সাথে লাগানো। বেঞ্চগুলো মোটেও সাধারন ছিল না।দেখতেই বোঝা যেত যে সেগুলো কত দামি আর কোয়ালিটির জিনিস।

ছবির ক্রেডিটঃ পুলিশ স্কুল গ্রুপ

আমি যখন পুলিশ-ইস্কুলে ক্লাস নাইনে পড়ি, তখন ক্লাসে তালা চাবির কালচার শুরু হয়।ক্লাসের সবাই তাদের ব্যাগে তালা মেরে রাখতো। এর কারন হল, প্রায় কয়েক সপ্তাহ ধরে সবার এটা ওটা মিসিং হওয়া শুরু করল। কলম, স্কেল, রাবার, পেন্সিল বক্স –বলতে গেলে সব কিছুই, এমনকি বই খাতাও চুরি হতে লাগল।

এ ব্যাপারটা এতটাই মহামারি আকার ধারন করেছিল যে সবাই ব্যাগে ছোট-ছোট তালা মেরে রাখা শুরু করল। এক দুইজন করতে করতে একসময় তালা মারাটা ক্লাসের ফ্যাশন হয়ে গেল।

বিঃদ্রঃ-এই লেখাটি পড়ার সময় মাথার লজিকের সুইচটি বন্ধ করে নিতে ভূলবেন না।

  আমি আর হ্যাক গত ২০ বছর ধরে একসাথে ঘুমাই। কিন্তু কখনই কারো সাথে দেখা হয় না। এর মানে হলো, বেশিরভাগ সময় হ্যাক আগে ঘুমিয়ে পড়ে আর আমি ঘুমাতে যাই দেরিত। আবার সকালে সে আগে ঘুম থেকে উঠে আর আমি উঠি দেরি করে। খুব কম দিনই আমরা দুজন একসাথে ঘুমাতে যাই, আর যখন তা হয় তখন আমরা প্রায় ১-২ ঘন্টা শুয়ে শুয়ে গল্প করি।

  গল্পতে আমরা কত ধরনের ঘটনা, রম্য, নাটক করি, সেগুলো যদি কেউ লিখে রাখতো, তাহলে আজকে একটা পান্ডুলিপি বের করা যেত। আচ্ছা যা হোক একদিন আমি আর হ্যাক একটা পুরনো ছবি দেখে ঘুমাতে গেলাম। ছবিতে এক গরীব যুবক তার দূর সম্পর্কের চাচার কাছ থেকে মিলিয়ন ডলার পায়।

চট্টগ্রাম

  সেপ্টেম্বর ১৯৬৭, শনিবার

  আমার বাবা পুলিশে চাকরি করে।

প্রতি বছর আমরা এক এক জেলায় যাই।

এই বছর আমরা চট্টগ্রামে এসেছি।

আমি ক্লাস ওয়ানে পড়ি।

আমাদের বাসার সামনে একটা রাস্তা আছে।

রাস্তার পাশে বড় একটা তালগাছ আছে।

রাস্তায় একটা দোকান আছে।

দোকানে চা পাওয়া যায়।

আমি চা তে বিস্কুট ডুবিয়ে খেতে পছন্দ করি।

বিস্কুট ডুবালেই ওটা পরে যায়।

Numbers doesn't matters.

But I tell you what it really matters...

It's 11th of Dec 2012 and I see people are talking about the upcoming 12-12-12.

For years people are having this belief that the world is going to end this year. But it is not.

And if the world is going to end, why it will happen in the English year?

Today is a different date in Chinese calender, something else in the Islamic (lunar) calendar, a completely different set of numbers in Bengali year also completely different from what it is on the Jewish year.

12-12-12 is just like 11-11-11 or 10-10-10, it is something that looks nice to see and read.

In 2009 it was 9-9-9 and in 1999, it was 9-9-99.

Numbers doesn't matters.