I am trying to describe complex matters in simple doodles!

License: Creative Commons Attribution Share Alike 4.0 International

a-picture-is-worth-a-1000-words's Introduction

Doodles-as-A-Service Repo

👋 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 🌺

Generative AI

/generative-ai

└── 📁misc
    └── 📁png
        ├── 📄chatgpt.png
        ├── 📄GenAI-doodle-youtube.png
        └── 📄...

ChatGPT - Added in Feb, 2023
Doodle-to-Code YouTube series on GenAI
- Generative AI and prompting 101
- Build Clippy for Teams with Azure OpenAI and Teams AI Library
- Use OpenAI Assistants API to build your own cooking advisor bot on Teams

Algorithms

/algorithms

└── 📁algorithms
    ├── 📁images
    │   ├── 📄algorithm101_file.webp
    │   └── 📄...
    └── 📁pdf
        ├── 📄algorithm101_file.pdf
        └── 📄...

Big O Notation: O(n)
Big O Natation: O(1) and O(n²)
Data Structures: Array
Data Structures: Linked List
Data Structures: Stack
Data Structures: Queue
Data Structures: Hash Table (1/2)
Data Structures: Hash Table (2/2)
Data Structures: Binary Heap (1/2)
Data Structures: Binary Heap (2/2)
Data Structures: Binary Search Tree (1/2)
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
    ├── 📁images
    │   ├── webdev101-programmingml-history.webp
    │   └── 📄...
    └── 📁pdf
        ├── 📄webdev101-programming.pdf
        └── 📄...

Introduction to Programming Languages and Tools of the Trade
Introduction to GitHub
Creating Accessible Webpages
JavaScript Basics: Data Types
JavaScript Basics: Methods and Functions
JavaScript Basics: Making Decisions
JavaScript Basics: Arrays and Loops
Introduction to HTML
Introduction to CSS
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
    ├── 📁images
    │   ├── 📄ml-history.webp
    │   └── 📄...
    └── 📁pdf
        ├── 📄ml-history.pdf
        └── 📄...

Machine Learning history
Faireness in ML
Regression
Reinforcement
Time series
ML in the real world

Git Purr - Git Explained with Cats!

/git-purr

This series is my earlier 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.webp  
    └── 📄...

git purr (git pull)
git meowge (git merge & git rebase)
git puss (git push)
git cherry-pick & git log

Microsoft Teams

/teams

└── 📁teams
    ├── 📄teams-toolkit-v3-doodle.webp  
    └── 📄...

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.

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

a-picture-is-worth-a-1000-words's People

Contributors

Stargazers

Watchers

Forkers

virtual1 elikone chawit nlgrf nickgarkusha areeta jaragan arief-samuel dineshhnaik radhakrishnang kcvikrant sleeperzlx shravanjp abdulkareempy srivaspankhuri valquiriamatter anstoli akshu-on-github rengreen irajshaikh globalopensourcesociety graffitimsx ads-22 wodole virtualnew akuage giiiiiithub marcc1988 toread-jxj chenymin deltaniu ppambler payne allensmile nailsonlandim gyyfifafans owain-s f24aalam liuhaoran tomnkey codeuxdesigngit occultism jieyimao koloer-blus theldoria giserh james23wang xiaolushuo changxinbai kingsihai dahui4dev sdtm1016 frankfanslc sachinjai02 zamzambadruzaman ktiyi 6639 75asa yu-rie icodein ivandata taoya7 musadauda dedetang angievamo jhoskart shuidrinking yanan1021 annalisamagri ineffable23 mrchiragverma fasibaag abhishekgajendra skbasava bbandewa ninjaaniket amannpatel vivekkumar851135 thangaraja vipul1306 harshitrajsinha prabhakar9107 organise-learning-resources jd-kr singhkumarhemant adyhatem65 c50ritik taddedawson god-c lionchanggg aygavrilova xiaoyuomeara 21doublenexus realsaid84 devang-pipaliya bizbose priyashetty17 raghu298 jyi428 nawazish-github

a-picture-is-worth-a-1000-words's Issues

Questions & Feedback 👏

First of all, thank you for doing this, it's yet another amazing piece of work from you and it has an exceptional potential.

Related to git section mostly.

Questions:

Scrolling through git images for example, I had a feeling that I just can't categorize where will this fit into the age range?
Who is this targeted to?

Pardon me if this is indicated in description and I missed it up. 🙏🏼

Feedback:

Obviously it's too complex for kids prior to 10 I guess, I wouldn't be capable of grasping even 10% of this in my early ages.

I do not want to sound harsh but on this example.

https://github.com/girliemac/a-picture-is-worth-a-1000-words/tree/main/git-purr

It's a bit confusing to add aliases as git purr or git puss maybe kids are learning faster, I don't know :)

Also it attempts to explain git pull with this friendly cat images, but it doesn't explain the prerequisites first.

What is git.
What is a repository in git, what is local/remote(origin) repository.
What is a commit (like a small change on the cat)
What is a branch in git's context.

etc.

If this is targeted for mostly adults, then I would say that for me for example it's a bit confusing.

However...the potential is huge if targeting and "refactoring" your work for a younger audience, schools, or special classes.

For that I would suggest to go a bit more on explaining this "quirky" words that accompanies a git command.

I think you should pair with somebody (not me) or ask for massive feedback and improvements on this. Or just incremental refactoring might work with feedback from community. After that try to make this & publish as an ebook. Probably pair with a digital artist as well so it wouldn't have this borders or polish it to the level of the ai section.

Anyways enough of me nitpicking! Great job! 🖖🏼

Do some funny things in the reinforcement learning field with OpenDILab!

Hi girliemac，
I'm a member from OpenDILab ( the first decision intelligence platform covering the most comprehensive algorithms and applications both in academia and industry.).

We saw your work in this repository, this is really an outstanding work. We are looking for collaborators to do the same thing in the Reinforcement Learning field together, would you like to be involved？ If you are willing, we are pleased to have further communication and discussion with you

Best
Norman

Can you add some deeplearning workings under ml?

Convert image files to .webp files and .tiff to pdf's

The image files and especially the .tiff files use a lot of space on your hard drive and limit the github repostitory too.
I suggest to use the .webp filetypes which provide a much smaller file size while keeping the quality.

It is best-practise to convert all you .png or .jpeg files in you web development project to this format. I safe a lot of space and bandwidth in my webapp projects by using the .webp file format.

All important browsers support this standard at the time of writing and the best part is, there is a fallback if a browser does not support it, so that the pictures still gets displayed just in good old .png or .jpeg format.

I want to to convert all your images to the .webp format. You will safe lots of space.

For the .tiff files, I want to convert them to PDF files. They are much more better for printers, all understand them and they have huge advantages for general purposes over .tiff files. Here a link for reading: http://resources.printhandbook.com/pages/file-types.php

Deploy GitHub Pages?

Hey there 👋

What are your thoughts on deploying this project on GitHub Pages? A website would:

Make it easier to share, explore, and navigate to and fro from
Improve presentation
Allow image 'alts' or descriptions for screen readers, a.k.a improved accessibility

As a plus, it's pretty easy to set up! Let me know if I can help you out on that end 😁
That being said, it's a really awesome project that I'll be recommending to beginners to DSA!

Better example for O(1)

The current example (a function that always returns true) might lead an inexperienced reader to think O(1) only happens when the input isn't used at all. It would probably be better to use something like getFirstElement oder getLength

Loop condition explanation

Hi there, awesome repo btw!

Just found this minor issue under webdev JavaScript Basics - Arrays:

The while-loop condition should probably say "The loop will stop will stop when the condition is not met" or false.

Translate into Chinese

I want to reproduce your pictures and translate the graffiti text into Chinese, I hope to get your consent.

Remove Atom as editor

In picture webdev/png/webdev101-programming.png Atom is mentioned a possible editor.

On 2022-06-08 it was anounced (https://github.blog/2022-06-08-sunsetting-atom/) that the Atom editor will sunset on 2022-12-15. Maybe it is time to replace that suggestion?

There are lots of alternatives (even holy wars :-) ), but if the public of these pictures are beginners, I would advice Notepad++ (https://notepad-plus-plus.org/) because it is fully open-source without telemetry.

Git Push example needs correction

Thanks for creating the nice pictures. I have looked at them and they're helpful - except for one case, where I'm sure that the information is incorrect.

Considering this explanation for git push

I see, that the left example does not fit with my experience and understanding of Git - and reproducing the setup with a small repository I get push rejected for the final git push -u origin tabby instead of a successful push.

This makes sense, because the tabby branch has different histories locally vs. remote. Locally, tabby has cat -> cat with bow tie -> cat with bow tie and stripes. Remotely, before the push, origin/tabby is cat -> cat with stripes. The last cat with stripes commit never existed locally, hence the push will not work. Merges are only possible locally and not on remote.

Do be correct, the lower drawing needs to:

have the was origin/tabby text point to cat with bow tie
draw a line from cat with bow tie to the new cat with bow tie and stripes
remove the cat with stripes entirely and all of it's lines

What do you think?

Hi

Please add illustrations for object oriented programming concepts

My 9 years old son is learning Python. He loves your illustrations. I am actually using your work to teach him basic data structures.

Would be nice to add illustrations for object oriented programming concepts, which is what my son wants to learn next.

Thanks!

Can you add the git illustrations?

Hi. I remember you tweeted the git illustrations in this style on twitter a while ago. Can you post those here too?

girliemac / a-picture-is-worth-a-1000-words Goto Github PK