Vincent Tang's Dev Blog


I write everything in markdown as of right now, and find it very efficient for jotting down notes as I can embed youtube videos, gifs, and annotated images very quickly

Many of my notes involve diagrams I make via greenshot + onenote can be later printed off on a posterboard should I choose too

But what about everyday documents? Sometimes I have to write a quick cheatsheet to someone who NEEDS to have a paper explanation on their desk explaining how to do XYZ

Markdown can be processed into any format via PANDOC processor (e.g. markdown to MSword, rich text format, etc). This gives it a lot of flexibility when it comes to printing

This is my workflow:

1: Write all the content in + shareX

Cannot put gifs here if I intend to print it out though

I wrote some guides on how I do this already

2: Click export, specifiy Word doc

I picked Word over PDF as I can have much more control on what the final printed output looks like. PDF doesn’t give me that flexibility

3: Adjust the images to fit document

Sometimes my imgur images are just flat out too big and detract away from the document as a whole. Not only that, they depend highly on my monitor size, which is inconsistent between my home and work PC

So I do some spellchecks here (I never turn on spellchecker on chrome), resize images, and when the result looks good, I print it off

4: Save and Printing

From there I can also create this word document into a PDF via CutePDF writer. I save the resulting file into dropbox.

See the result here:

Click to see the link

What are the advantages to this methodology?

Here’s the advantages:

  1. Manage all my documents within app.classeur.IO so I can quickly produce content without worrying about formatting
  2. Can churn out book content easily thanks to the Table Of Contents function in app.classeur.IO
  3. Can fine tune the final print in Microsoft word and do edits if needed

Onenote has some really strange printout functions and so does evernote. With this method I have full control over what I will print out, and how the end result will look like


  • None

Vincent Tang



Hexadecimal conversion to binary occurs via the following:


  • Hexadecimal: 0x00 notation for 1 byte, or 255 decimal or 1111-1111 binary
  • Binary: 0B1111 for 15


  • Write the binary numbers
  • Take 4 bit chunks (byte) and seperate them out
  • Assign each byte with the equivalent Hexadecimal value (1111 = 15 decimal, or “F” hexadecimal)
  • Put all numbers together, add the prefix “0x” to denote hexo


  • Take the hexadecimal value
  • Write out on top of it the \[ (10^0), (10^1), (10^2) \]
  • place like dewey decimal system (1,10,100), but this time \[ 16^0, 16^1, 16^2 \]
  • Take those values, convert to decimal. E.G. 0x397 would be \[ 3*16^2, 9*16^1, 7*16^0. \]
  • Convert decimal to binary (next section).
  • FASTER DIRECT WAY - take each value, convert (397) convert each value seperately. 3 = 0011, 9 = 1001, 7 = 0111, concatenate all together: 0011 1001 0111.


  • Take the decimal value
  • Write out a sequence of power by 2 numbers (1,2,4,8 – 16,32,64,128 – 256, 512, 1024,2048)
  • Pick the largest value that’s less than decimal
  • Add the remaining values up


  • Take binary value
  • Associate each value with a decimal
  • Add all values up

Address storage:

Everything is stored in binary (0101). 4 bites (0000) = 1 byte.

Strings are just arrays of characters (char* is the address of first letter stored in heap)

Characters represented by ASCII equivalent values, ascii table up to a total of 255, which is 8 bits or 2 bytes. See this image for 255 as last ASCII value

Therefore, each char is represented by 2 bytes in memory, followed by the “” null operator to denote end of sequence of chars. Intgers store 4 bytes in memory, floats 8 bytes, etc.

this diagram sums it up (CS50 week 4 notes)

AFTER NOTES - Unicode characters

I had some information wrong about unicode characters

Its actually

probably more than 4 bytes up to 8 bytes. Because it needs to include characters from other languages. This is where UTF-8, UTF-16, different encodecs are used. No easy answer supposedly according to stackoverflow


Vincent Tang

Stack Vs Heap Basics and Malloc

Notes from CS50 week 4 class

Notes on video to understand heap vs stack

Heap vs Stack overview:


  • is used for dynamic memory allocation during run time.
  • Used to allocate large dataset values.
  • allocates blocks of memory by reference. Must be allocated
  • If you don’t specify “malloc” in C, you aren’t using Heap
  • Both live in RAM
  • Can memory leak, use “free” to stop this. Google Chrome notorious for this.


  • is statitically allocated
  • Stack uses a LIFO method (Last In, First Out) by order of things during run time
  • runs faster
  • Stackoverflow if not enough memory
  • If you don’t specify “malloc” your using the stack.
  • Both live in RAM

Some languages process heap vs stacks differently - Java uses an automatic heap cleaner (garbage collector) removing pointees with no pointers - C must be done manually using malloc (dereference) and free (prevent leaking memory / addresses) - C++ uses new, and delete

EDIT 10/27/16

Variables on stack has the address (e.g. shortcut to mp3), the actual value lives on the heap (eg the mp3) See other image post on how pointers work in C


Vincent Tang


Above is a analogy to how copying over MP3 files is relative to pointers in C

Pointers are like shortcuts (pass by reference)

Pass by value is like copy+pasting

A better explanation on pointers, image

from (the guy has 28,000 reputation)

*x is the value

&x gives the address

x is the pointer that contains address


A more indepth explanation is such. Say we run this program:

int x;
int a;
int* b=malloc(sizeof(int))
a = &x
a = b


In this instance,

*a and *b are values at the address (analogy: the file itself, mp3 radioactive)

A and B are the pointers that contain address (The analogy: the property of the shortcut linking to file path)

&x is the address (pointee) , &b is the other address (pointee). &x lives in the stack, &b lives in the heap because of what was specified at the with malloc. (The analogy &x is its the shortcut to the program)

Going to the analogy of the mp3 radioactive file, if you were to change the following:

  • Changing the shortcut link address is like changing the pointer. Like now you click shortcut it no longer works. This is a
  • Changing the shortcut itself (deleting it) means you no longer have a pointee. You can no longer find the value anymore, but it still exists somewhere in the heap (you have to manually look for the file now). This is &x
  • Changing the file itself at the address (the mp3) means its no longer the same thing. Its called a binary checksum, its used to determine authenticity of legitimate programs. This is *a

Read more to see my notes on CS50-week4 notes and research on pointers

Read More


This is a current list of notetaking conventions I use for myself. Its similar to picking color schemas for Adobe InDesign to get the best flow of notetaking conventions possible


Class Notes

I use blue text boxes (pt 17) for comments and specifics

Green text boxes for main idea / where we are notes

“S” dialog boxes, same color as comments, for specific things

“Red line” to show that an item is a property of another item

Blue rectangle to group similar items

Arrows to show almost things like “slide 1 to slide 2” transitions

Highlight yellow as a wildcard

On GST files and the final image output, I put the save name of the file at bottom righT

Use 1290 x 1200 as the standard blank size. Can crop unneeded space at end. This is for a 15.6" Monitor**

edit: 10/29/16 1280x900 products good imagus blow up views, and file not too large imo this structure is pretty good. Deep red lines for positional eye movements, and number letters. Blue for overall organization and notes. Uses red,green, blue (RGB)

Tagging structure Hexo

  • Life: These are personal life notes
  • Webdev: Webdevelopment things
  • Tools: Software I use
  • Work: work specific things?

Tags are whatever I want. Categories need to be more well defined

Vincent Tang



At work sometimes I get tasked to look for some seriously obscure items that I am not 100% familiar with. Sometimes all I’m told is ‘look for this item its called “ABC”’ from my boss. Sometimes my boss doesn’t even know what the item is called himself and just made up a name.

Here’s a guide on how to find obscure products and benchmarking authority for those sites:

1: Clarify what the item actually is used for

The first thing you have to do, whether a client asks you to buy it, or its something you need yourself, ask questions.

“What is this product used for?”

“Who uses it and why?”

“How does this product help them in X problem they are facing?”

Read More

How To Left Align Images In Hexo Using CSS

Pictures I uploaded via into my blog aren’t always the same width or height. Some pictures are really heavy on information density, others not so much

Example large information dense image here

Example small image, low information density here

The generic formula to this is:

\[ Information Density=(Assets)/(Width*Height) \]

Small images, with low information density should be aligned left with text. Everything else should be centered

How markdown, CSS, and HTML come together

On this blog, the CSS files are such:

img, video {
max-width: 97.5%;
margin: 15px auto;
display: block;
height: auto;

This applies CSS to those default HTML5 elements. When I write things in markdown, such as:


for uploading a test image, this gets converted to HTML as:

<p><img src="" /></p>

This creates a centered image by default.

NOTE: The best way to try out conversions from markdown to HTML is

How to left align images

There is many solutions to aligning images left such as creating a class with CSS properties: FLOAT:LEFT and CLEAR:BOTH, however it has given me many issues

The solution is simple. Aligning images centered (by default) in my CSS file is through the property margin: 15px auto;

To get on demand left-aligned images, I do the following:

  1. Use a more advanced markdown to HTML converter, PANDOC
  2. Write a special class (call it “Lefty”) that uses margin-left: 0px to set images left within the same display block
  3. While writing post in markdown, write ![]({.lefty}

1: Installing Pandoc on Hexo

Run the following (node.js)

$ npm install hexo-renderer-pandoc --save

2: Writing special class:

Add this to the main CSS files:

.lefty {
margin-left: 0px;

3: While writing markdown:


gets converted in PANDOC-MARKDOWN to HTML as :

<div class="figure">
<img src="" class="lefty" />

End Result image reference

NOTE: When using this in Hexo you may have to run hexo clean first before generating and deploying

Jsfiddle notes


Vincent Tang

Enabling Newer GPUs for Adobe Premiere Pro CS6

For newer graphics card, Adobe CS6 does not recognize these files. This means you can’t use CUDA for GPU intensive rendering of videos

To change this do the following:

  1. Run administrator notepad
  2. Navigate to C:\Program Files\Adobe\Adobe Premiere Pro CS6\cuda_supported_cards.txt
  3. Edit and add your video card. Mine is GeForce GTX 970

Go to project->settings found here on adobe cs6

Or during creation of a new project

Select CUDA


Fastest Method of Taking Notes Online

Fastest Method of Taking Notes Online

This is the fastest methodology in my opinion, after 3 years of using notetaking applications like evernote and OneNote only to find that it doesn’t suit my needs

The problem with other notetaking application is as follows (OneNote example is used here, evernote is not that great of a tool in this instance). OneNotes downsides below:

  1. Editing features are limited. Notetaking apps online using markdown syntax can used native HTML5 elements such as <!-- delete notes--> to remove unwanted notes on preview
  2. Cannot port notes easily. Onenote images are embedded through microsofts servers and cannot be easily moved around like hyperlinked images. Using a universal text standard like markdown gets rid of this issue, and allows scalability of notes into blog sites, books, etc with large amounts of support, apps, and plugins available.
  3. No gif support functions. Onenote doesn’t have native support for gifs
  4. Its slow. OneNote requires a high amount of CPU when loading assets and RAM if I use the online version of it for hyperlink image previewing. Having a laptop running OneNote can be detrimental
  5. No native support for editing images. I can’t quickly edit image using something like Evernote skitch in OneNote
  6. Browser based notetaking apps are far superior than desktop apps. Because you can customize your browser with plugins like image previewers whereas desktop apps cannot. The only caveat is you need internet but getting reliable internet in many parts of the world is easy.

However, OneNote does do something that other notetaking apps do not. Its dynamic and can handle scalable amounts of embedded images and notes. That is also its biggest downside. OneNote gets cluttered so quickly it isn’t even funny. It becomes a full-time job just managing onenote documents. You have a difficult time of finding past documents unless you constantly organize it.

Read More