Showing posts with label Programming. Show all posts
Showing posts with label Programming. Show all posts

Sunday, June 21, 2020

Always Be Learning


My active learning tutorials and code templates have (already) moved to GitHub! 

https://github.com/hchiam/learning#learning 

From there, you can explore what I've been learning or what I've been up to, like links to samples of my latest side-projects and experiments. 

Stay curious!

Thursday, April 4, 2019

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

Thursday, March 14, 2019

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.

Wednesday, January 9, 2019

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


Tuesday, May 1, 2018

Ok Google, talk to Code Tutor!

Code Tutor is still under active development as of this post. Contributions are welcome!


Version 3 of Code Tutor is on the Google Assistant! Just say "Ok Google, talk to Code Tutor".

You can get the Google Assistant on your mobile device:

I'm still improving it. That's why I'm open-sourcing it so we can help it improve faster together. You can also learn from the code to more quickly build your own voice app: https://github.com/hchiam/code-tutor BTW: Can you find all the hidden features? :)


Monday, March 5, 2018

Synthesis of Programming Problem Solving Strategies:

AEIOU

What?

For context: skim/fast-forward through these:

Thing is, when you're already trying to solve a tough problem, you can't mentally keep track of too many steps. But you also don't want to lose out on important considerations. And add on top of that how easy it is to forget* the steps when they're so abstract. Some steps even seem to overlap. 

I like summaries, so I've been playing with a few ideas to optimize for compactness. Some steps can be grouped into larger conceptual chunks. I've tried posting visual mnemonics in my room (think pictionary and infographics), but I found a simpler way to keep a mental checklist.

I came up with:

  • A
  • E
  • I
  • O
  • U

Which stand for:

  • Assumptions
  • Examples
  • Ideas
  • Optimizations
  • Unit tests

Or if you like things in threes:

  • Examples (which you should ask for to clarify assumptions)
  • Ideas (of different possible solutions, and choosing one)
  • Optimizations (which should be done with testing to evaluate your idea(s))
And then you'd just remember the "EIEIO" farmer song.

*Of course, with practice, you don't really need to memorize the steps. You should be internalizing the concepts behind the steps so they become habits of thought. But having a portable checklist (i.e. a mental/paperless way to remember) is helpful for practicing to set up the habits in the first place.

Thursday, February 8, 2018

LUI 4 Update

Lui's back.

Suggestions? Wake-up-words? The voice assistant side-project got upgraded.


"Computer what can you do"

To talk to Lui, start by saying "computer", and then your request. For example: "computer what can you do", or "computer play number guessing game".



"Computer stop/start listening"

You can talk to Lui completely hands-free in Chrome. If you want the voice assistant to stop responding to everything you say, just tell it: "computer stop listening".


"Computer let's program"

One of the newest features is you can get Lui to find code for you. This may come in handy with the feature of programming with your voice (which is still in development). Just say "computer let's program" to see a suggested next action.
 


Links:

Live demo: https://codepen.io/hchiam/full/WOLOJG/

Feedback: https://goo.gl/forms/Nwf8TXvOW2vE2OHA3
 
Release notes: https://github.com/hchiam/language-user-interface/releases

Lui's premier blog post: https://hchiam.blogspot.ca/2017/08/lui.html


_____________________
<This blog post was automatically posted at 12 noon on February 8th, 2018.>
_____________________

Thursday, February 1, 2018

sourcefetch-server: An Interface to Find Code for You*

Live demo*: 


*Please don't blindly copy code. Making use of code you find on Google still requires critical thinking. This interface could be helpful for remembering syntax. But it was made with a bigger project in mind that I've been working on (news coming soon). 
 
_____________________
<This blog post was automatically posted at 12 noon on February 1st, 2018.>
_____________________

Monday, October 30, 2017

Mentally Finding Roots and Squares (or at least get pretty close)

 🔲 🌿 𝓷

How do you find the square of a number? What if that number has a decimal place?
What is b^2? 

Answer: make use of what you already know.  

Here's the equation:

b^2 = a^2 + Δ * Σ

That's a little cryptic. Here's that equation again:

destination^2 = origin^2 + difference * sum
Note: difference = (destination - origin). Going up should have a positive difference.  

Or this:

 dest^2 = orig^2 + (dest - orig)(dest + orig)

Or, for visual simplicity:

b^2 = a^2 + (b - a)(b + a)
Think: "to get from a to b". 

In other words: 

To get the square of a number (b^2, like 3.5^2 = ?), you can make use of a square that you already know (a^2, like 3^2 = 9), and just add the difference times the sum of the destination and the origin. Bonus: numbers with .5's and .1's are especially easy and can be used to get numbers with .6's. 

Example: 3.5^2 = ?

Well, with our equation we can make use of 3^2:
3.5^2 = 3^2 + (3.5-3)(3.5+3)
3.5^2 = 9 + (0.5)(3 x 2 + 0.5) 
3.5^2 = 9 + half of (6 + 0.5) 
3.5^2 = 9 + 3 + 0.25 

So: 3.5^2 = 12.25

We got 3.5^2 by using what we already know (3^2 = 9) and then did some calculations using relatively smaller numbers and mental shortcuts. 

Ok, but why do this?

The point was to practice problem-solving. The explicit goal was to answer a practice programming question: How do you implement or "manually" compute the square root of any number? There are multiple solutions, but one solution involves:
  1. ) An initial educated guess (pick smaller than the number, e.g. sqrt(17) should be smaller than 17, so maybe pick 4), 
  2. ) checking if that guess^2 is above/below the number (e.g. 4^2 is below 17), 
  3. ) adjusting using an efficient search of numbers below/above that number (binary search for O(logN) time), and 
  4. ) repeating steps 2 and 3 until you get an exact answer or you settle with a close-enough answer.
Our shortcut equations give us a way to mentally do step 2, especially when steps 3 and 4 give us a number with a decimal place as we get closer and closer answers.

Proof for the curious: 

Use algebra.

b^2 = a^2 + (b - a)(b + a)
b^2 = a^2 + (b^2 + ab - ab - a^2), using distributive property
b^2 = a^2 + b^2 - a^2, cancelling out 
b^2 = b^2
Proven.

But that doesn't really show how the equation was found. Thing is, the equation is basically the answer. So how do you find the equation?

How the equation (i.e. answer) was found:

Discovery. This is where the real problem solving is. Find patterns in the squares of numbers, and patterns in the differences between destination and origin. Hence the equations at the beginning of this post involving destination, origin, difference, and sum. 

In general, make use of what you already know (like simpler squares, or ones you already calculated) and build on those things to get closer to a solution. Go with what you know. Discover patterns. Problem solve. If you just need a quick answer, you can use a calculator or computer assistant. But if you want to practice solving problems, make the most of the mental toolbox you already have, and grow from there.

_________________________

LINKS TO OTHER STUFF: 

Favourites
Programming
Original Art
Games

Thursday, August 17, 2017

The Mental Temperature Calculator Returns - with the Google Voice Assistant!

Visual mnemonic of increasing accuracy (in 3 or 4 steps).

Celsius? Fahrenheit? Do you want to learn and practice a shortcut* to convert temperature in your head? Using ideas from earlier work (here and here), I made a voice user interface app for the Google Assistant! You can also find an in-browser version on API.AI:



Built using Actions on Google, API.AI, and Glitch

Related demo: https://codepen.io/hchiam/full/NjmOdW

Earlier post: https://hchiam.blogspot.ca/2016/09/how-to-convert-temperature-quickly-in.html

*Accuracy is at worst only 1 degree off, plus 1% of the original number. This means you're covered for small numbers, and when you go into the hundreds, you'll be off by a couple degrees. For example: 300 F is actually 93.3 C, but 92 C is pretty close for a shortcut. You can progressively increase accuracy, but with a diminishing ROI or "return on effort": https://hchiam.blogspot.ca/2015/12/how-to-convert-temperature-f-c-quickly.html
_________________________

LINKS TO OTHER STUFF: 

Favourites
Programming
Original Art
Games

Thursday, August 3, 2017

LUI: a JARVIS-like Interface



Meet LUI. Ask questions.

LUI = Language User Interface

Ask LUI questions. LUI will talk and try to give a helpful reply. Think: a very simple version of JARVIS from Marvel's Iron Man movies.

Instructions: You can type questions into a textbox and it'll reply with a synthesized voice (sometimes it opens google search results or google maps, depending on your question). 

Even better, if you have speech recognition software, you can just turn that software on and have it type out what you say into the textbox for you. That way, it can feel less like you're sending text messages, and more like you're talking to LUI.

Example speech recognition software: on Macs, there's Mac Dictation, which comes out-of-the-box on newer macs. You can activate it by pressing the <fn> key twice. If your cursor is blinking in the textbox, then it'll start typing out what you say, and then LUI will respond to you. 

LUI should work on both laptop and mobile devices. Let me know if there's any issues and I can update the source code live!

Try it out! https://codepen.io/hchiam/full/WOLOJG/

Code also available on GitHub. You can see LUI among my live demos on Codepen

If you use ad blockers, NoScript, etc.: you'll need to enable rawgit and responsive voice. Authorize geolocation when requested. Other features require API calls and will be updated in real time as I push updates to GitHub.

< This blog post was auto-scheduled for 9:00 AM Thursday, August 3rd, 2017. >

_________________________

LINKS TO OTHER STUFF: 

Favourites
Programming
Original Art
Games

Thursday, July 27, 2017

Minimal Clock + NN Mouse Gestures

See if you can activate the neural network that detects mouse cursor gestures.
You can open it full-screen on the original Codepen page: here.
 .
If you use ad blockers, NoScript, etc.: you'll need to enable rawgit and responsive voice.

< This blog post was auto-scheduled for 9:00 AM Thursday, July 27th, 2017. > 

_________________________

LINKS TO OTHER STUFF: 

Favourites
Programming
Original Art
Games