In-Browser Style Linter

Chrome extension under development: 

In-Browser Style Linter 

What it does:

It enables you to do quick style checks on your page after it renders, without even leaving your browser. You can see a demo here: https://goo.gl/ou1KEv

Why:

I had a task to help developers automate style checks on new pages that they create. I know there are tons of CSS linters out there, but I could only find pre-render code linters. I was also getting tired of using and reading about bulky testing frameworks, and I wanted to minimize the time it takes to set up something to test UI styles. 

So I created a quick script to do just what I needed, and ran it as an in-browser snippet. The code analyzes computed styles, which happens post-render. Then the script evolved into a Chrome extension, which is great because now it saves developers even more time: no need to edit the JavaScript code directly, just copy and paste settings into a box. 

Find it in the Chrome Web Store: 

https://chrome.google.com/webstore/detail/in-browser-style-linter/mopnkclaipjghhmneijljnljeimjahfc

Read the Documentation or Contribute on GitHub: 

https://github.com/hchiam/in-browser-style-linter

Programming Problem Solving Mnemonic - part 2

Just improving my "AEIOU" framework with things I've learned from an online course by Colt Steele. 

From the basic AEIOU to this: 

A
E (S,C,E,I)
I (B)
O
U

Translation:

A = Assumptions
E = Examples (Simple, Complex, Empty, and Invalid inputs)
I = Ideas (Breakdown)
O = Optimizations
U = Unit tests

Further Translation:

A = clarify your Assumptions about the problem to better understand it. Ask so your answer addresses the actual problem.

E = ask for or come up with Example inputs (Simple/Complex/Empty/Invalid) and their expected outputs, both of which you can later use to test whether your code behaves the way it's expected to.

I = generate multiple Ideas of solutions (after choosing one, write a steps Breakdown) to get your thoughts flowing.

O = Optimize the idea that you chose (maybe go back to other ideas) by improving it's performance in time and memory, but also readability by simplifying the code.

U = Unit test your code using the example inputs and expected outputs (before doing a final submission).

Random Visual Mnemonics for Programming - part 2

Bit operations visual mnemonics:

Operation	Calculation	Mnemonic
GET bit i	n&(1<<i)	nacicci (拿 ná)
SET bit i	n|(1<<i)	nicicci ("knee")
CLR bit i	n&~(1<<i)	nancicci ("none")
CLR (MSB to bit i)	n&((1<<i)-1)	nacciccimi
CLR (bit i to LSB)	n&(-1<<(i+1))	nacmiccipi
UPDATE bit i	n&~(1<<i) | (1<<i)	nancicci icicci

BFS visual mnemonic:

Translation: To go through each level of a tree at a time, queue the most immediate child nodes and then look at each of their child nodes. 

Heap visual mnemonic:

Translation: To add to a heap, add to last position, then bubble-up. To remove the top/head node from the heap, remove it, then move the node in the last position ot the top, and then bubble-down. 

More visual mnemonics: here.

A Summary of DOET (The Design of Everyday Things)

The iconic teapot with the spout over the handle.

My summary of the book "The Design of Everyday Things"

Not 5S but 5F:

5F
 =
 = Form <- Function, Feedback, and Forcing Functions.
 = Form follows Function, Feedback, and Forcing Functions