• Stars
    star
    10,849
  • Rank 3,138 (Top 0.07 %)
  • Language
  • License
    Creative Commons ...
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

I am trying to describe complex matters in simple doodles!

header image

Doodles-as-A-Service Repo

CC BY-SA 4.0

๐Ÿ‘‹ Aloha, this is where you can grab most of my tech doodles and sketchnotes.

I have been posting my tech doodles on Twitter and Microsoft open-source projects. I am repeatedly asked where to get the original images, especially from people who saw some of my works out of context on some social media, so I decided to put them all together on one GitHub repo.

Here are some of the latest digitally created hand-drawn doodles, as well as photos of analog ones.

All my doodles are under Creative a Commons license, so please share with attributions. And I definitely don't want you to NFT them without my permission (and I won't permit you because you don't own them. They are open-sourced to be freely available for educational purpose only!)

Enjoy ๐ŸŒบ


Misc.

/misc

โ””โ”€โ”€ ๐Ÿ“misc
    โ””โ”€โ”€ ๐Ÿ“png
     ย ย  โ”œโ”€โ”€ ๐Ÿ“„chatgpt.png
     ย ย  โ””โ”€โ”€ ๐Ÿ“„...
  1. ChatGPT - Added in Feb, 2023

Algorithms

/algorithms

โ””โ”€โ”€ ๐Ÿ“algorithms
    โ””โ”€โ”€ ๐Ÿ“png
     ย ย  โ”œโ”€โ”€ ๐Ÿ“„algorithm101_file.png
     ย ย  โ””โ”€โ”€ ๐Ÿ“„...
  1. Big O Notation: O(n)
  2. Big O Natation: O(1) and O(nยฒ)
  3. Data Structures: Array
  4. Data Structures: Linked List
  5. Data Structures: Stack
  6. Data Structures: Queue
  7. Data Structures: Hash Table (1/2)
  8. Data Structures: Hash Table (2/2)
  9. Data Structures: Binary Heap (1/2)
  10. Data Structures: Binary Heap (2/2)
  11. Data Structures: Binary Search Tree (1/2)
  12. Data Structures: Binary Search Tree (2/2)

Web Development for Beginners

/webdev

These images are created for the project at Microsoft I was in, Web Dev for Beginners curriculum.

โ””โ”€โ”€ ๐Ÿ“webdev
    โ”œโ”€โ”€ ๐Ÿ“png
    โ”‚ย ย  โ”œโ”€โ”€ webdev101-programmingml-history.png
    โ”‚ย ย  โ””โ”€โ”€ ๐Ÿ“„...

  1. Introduction to Programming Languages and Tools of the Trade
  2. Introduction to GitHub
  3. Creating Accessible Webpages
  4. JavaScript Basics: Data Types
  5. JavaScript Basics: Methods and Functions
  6. JavaScript Basics: Making Decisions
  7. JavaScript Basics: Arrays and Loops
  8. Introduction to HTML
  9. Introduction to CSS
  10. DOM Manipulation and a Closure

Machine Learning for Beginners

/ml

These images are created for another project at Microsoft I was in, Machine Learning for Beginners curriculum.

โ””โ”€โ”€ ๐Ÿ“ml
    โ”œโ”€โ”€ ๐Ÿ“png
    โ”‚ย ย  โ”œโ”€โ”€ ๐Ÿ“„ml-history.png
    โ”‚ย ย  โ””โ”€โ”€ ๐Ÿ“„...
  1. Machine Learning history
  2. Faireness in ML
  3. Regression
  4. Reinforcement
  5. Time series
  6. ML in the real world

Git Purr - Git Explained with Cats!

/git-purr

This series is my ealier work and everything is drawn in very analog way.

I am planning to recreate digitally someday. Git cherrypick is the only one that digitally handdrawn after I got an iPad with Pencil.

โ””โ”€โ”€ ๐Ÿ“git-purr
    โ”œโ”€โ”€ ๐Ÿ“„git-purr.jpg   
 ย ย  โ””โ”€โ”€ ๐Ÿ“„...

  1. git purr (git pull)
  2. git meowge (git merge & git rebase)
  3. git puss (git push)
  4. git cherry-pick & git log

Microsoft Teams

/teams

โ””โ”€โ”€ ๐Ÿ“teams
    โ”œโ”€โ”€ ๐Ÿ“„teams-toolkit-v3-doodle.png  
 ย ย  โ””โ”€โ”€ ๐Ÿ“„...

  1. What's New in Teams Toolkit v3

Live Sketchnotes from Conferences and Classes

/sketchnotes

These are some of my old sketchnotes from the past. I don't have all of my drawings but post as I find somewhere in my HD or cloud spaces.

โ””โ”€โ”€ ๐Ÿ“sketchnotes  
 ย ย  โ””โ”€โ”€ ๐Ÿ“„...


HTTP Status Cats ๐Ÿฑ

This is one of my first personal projects to make technology into cats. Although this is not doodling, I thought it was worth mentioning here!

All HTTP Cats are now hosted at HTTP.cat because the domain name is awesome.

All images (except a few) are originally created by me a decade ago! Read the story on Know Your Meme


Slack API Zine

/slack

โ””โ”€โ”€ ๐Ÿ“slack  
 ย ย  โ””โ”€โ”€ ๐Ÿ“„...

These are something I did while working at Slack. I created the zine (as physical printed books) to be distributed at Slack-sponsored events and conferences but never got fully approved. The global pandemic forced us to give up all in-person events anyway.

The content is outdated as of 2022 so view them with cautions.

๐Ÿ–จ Printing / TIFF

โš ๏ธ Updated on August 27, 2021:

I no longer host the high-res TIFF files here because my Git LFS has been disabled as the bandwidth exceeded my data plan. Thank you! ๐Ÿ™‡โ€โ™€๏ธ

The tiff files are for printing. I set them in 5.83 x 8.27 inches, which should fit in A5 paper size. They are large files and stored as LFS files so you won't download the actual files when you git clone so please download manually from GitHub.


This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

CC BY-SA 4.0

More Repositories

1

RPi-KittyCam

Raspberry Pi app using a camera and PIR motion sensor, written in Node.js with Johnny-Five and Kittydar for cat facial detection
JavaScript
582
star
2

web-speech-ai

Simple AI Chat Bot Demo with Web Speech API
JavaScript
362
star
3

filterous-2

Instagram-like photo manipulation library for Node.js and Javascript on browser
JavaScript
195
star
4

Filterous

Instagram-like photo manipulation library in JavaScript
JavaScript
141
star
5

fb-apiai-bot-demo

A simple example of Facebook Chat Bot using API.ai
JavaScript
74
star
6

slack-httpstatuscats

HTTP Status Cats for Slack
JavaScript
47
star
7

html5-notifications-webOS-style

HTML5 Web Notifications API Demo
CSS
45
star
8

slack-sentiment

Slackbot: Sentiment analysis for Slack messages using IBM Watson
JavaScript
39
star
9

dash-rickroll

A node.js application to Rickroll whoever presses your Amazon Dash button.
JavaScript
36
star
10

x-barcode

Web Component wrapper for UPC-A (for now) barcode using Polymer.
HTML
22
star
11

girliemac.github.io

GirlieMac Blog on Github Pages
Less
18
star
12

arduino-led-rgb

A poor man's HUE smart light bulb demo with Arduino and RGB common cathode LED
CSS
18
star
13

send-sms

Nexmo demo: Sending SMS from web
JavaScript
17
star
14

presentation-slides

My Presentation slides in HTML
HTML
17
star
15

girliemac

my profile
11
star
16

magic8ball

HTML5 Device Orientation API Demo
JavaScript
9
star
17

msteams-httpstatuscats

HTTP Status Cats app for Microsoft Teams
JavaScript
8
star
18

nexmo-webhook

Nexmo Inbound Message Webhook Example in Node.js
JavaScript
5
star
19

sushi-compass

Pizza Compass Knock-off in HTML5
JavaScript
4
star
20

passport-uber-v2

Uber authentication strategy for Passport and Node.js
JavaScript
3
star
21

passport-lyft

Lyft authentication strategy for Passport and Node.js.
JavaScript
3
star
22

slack-twilio-call-demo

A Slack demo for Twilio Signal 2019 (1) receive a call and send a transcript to Slack and (2) Make a call to an agent and customer from Slack
JavaScript
3
star
23

Mojo-ICanHasLOL

ICanHasLOL app for Palm WebOS. (Unfinished. works as expected on emulator & devices. UI/Style will be modified. Icons will be modified.)
JavaScript
3
star
24

chat-lyft

A simple demo chat app that allows ypu to check nearby Lyft drivers
JavaScript
2
star
25

stickies

IndexedDB Demo App
JavaScript
2
star
26

comicsansfy

Make your web more friendly
2
star
27

x-twitter-button

Web Component wrapper for Twitter share button using Polymer
2
star
28

CoDoodler

Doodle with strangers on InterWeb
CSS
2
star
29

camera-cordova

PhoneGap version of the Coremob Camera app
JavaScript
1
star
30

flickr-css3-3d-demo

My CSS3 3D animation demo from 2009
CSS
1
star
31

terrarium-project

Learn the basics of HTML, CSS, and vanilla JavaScript DOM manipulation while building a web terrarium
HTML
1
star