Portfolio Project Ideas

[coolaj86]

Choosing a Project

There are basically 3 types of projects you can pursue.

• Passion Projects
• "Cliché" (but GOOD!) Projects
• Other Useful Projects

Pro Tips™:

• Documentation is most important (see Exact Instructions Challenge)
• Focus on your strengths - if you suck at JavaScript, focus on the HTML and CSS. If you suck at CSS, write a CLI utility.
• No one looks at your code to look at code. Your project MUST first show that it's valuable (and the value can be that it's fun or interesting). READMEs are a MUST.

Passion Projects

The best project is something that you're personally interested in or directly connected with - such as a tool to help a friend's business. This is good because:

• You inherently understand both the problem and solution
• There's a real reward - your own enjoyment - once you complete it
• You have a stronger desire to finish it, and share it

Typical Projects

If you don't have a passion project - just pick one of the common projects - just because they're cliché does not make them bad. In fact, they're quite good - and you should at least know how to write them anyway.

These are simple to understand, easy to create, and there are lots of examples out there to review if you get stuck.

1. Unix utils: tree, curl, etc
2. Markdown Blog
3. Bot-Friendly, Human-Readable Resume
4. To Do List
5. Chat Server or Bot
6. Nerdom Quiz or Compendium

1. Unix Commands, such as tree & curl

• tree - recursively print out files and folders, replicating unix tree, or lsd --tree
• curl - fetch web requests, modifying headers and body, replicating unix curl or curlie
• stat - give file metadata (size in various formats, created at, modified at, etc)

2. Blog

Markdown Blog - built in any language with Markdown, YAML, and a way to configure and apply a Theme

3. Bot-friendly, Human-Readable Resume

HR Departments use CRM software called "ATS", which makes good resumes look terrible, and bad resumes look not worse.

Create a resume template that plays well with pdftotext and ATSes, that also isn't an eyesore.

See BeyondCodeBootcamp/html-resume#5

4. To Do List

To Do List - Create a simple Notes or Reminders app for yourself

5. Chat Server or Bot

Chat Server or Bot - Write your own simple chat app, or write a bot for an existing one

6. Quizzes & Compendiums

Nerdom Quizzes & Compendiums - Write your nerdom quiz or compendium

• Nerdoms
  • Harry Potter Sorting Hat quiz
  • Which Power Ranger are You
  • Pokédex - (https://github.com/PokeAPI/pokeapi ?)
  • Hyrule Compendium
  • Similar movies / artists / books / games
• Some examples out in the Wild:
  • https://swapi.dev/ - Star Wars API
• Here are some CLI examples that I wrote:
  • npx color-code (the color code quiz)
  • npx love-language (the 5 love language quiz)

7. Unix Developer Tools

• aliasman a cross-platform tool to manage aliases across bash, powershell, fish, etc (alias gcf='git --amend --reuse-message HEAD')
• envman a cross-platform tool to manage ENVs across bash, fish, powershell, etc (GITHUB_TOKEN=gha_xxxxxxxxx)

Critical Coding: Think about some app you use every day - Slack, Spotify, Notes, etc - and find something that bugs you about it or that you wish it had. Then make a clone of that thing, focusing only on what you would make better (and the documentation and deployment, of course).

But... why is the time gone?

In reality, the presentable code that you write for a portfolio project is only about 10-25% of the work.

About 50% is the documentation and publishing:

• Creating Issues and task lists to track your goals and progress
• A nice README (todo create template)
  • Short, Tweetable description
  • Visual preview
  • Quick Start
• Host a demo online
• Publish to the package repository (npm, cargo, git) or app store
• Announcing
  • YOUR Blog
  • LinkedIn
  • add to LinkedIn portfolio
  • put in a related LinkedIn group
  • Twitter
  • reddit
  • HackerNoon
  • Facebook
• Possibly a Video Overview

Another 50% is research or trial-and-error - hence it takes 3 days to write 100 lines of code (or maybe just 50!)

Oh, and by the way - if you spend less than 400% of the time, you've done a great job. Be proud. 😉

More Projects (see below)

1. Resize an Image (in the Browser, with Canvas and scaling)
2. Random String Generator (suitable for API keys and Passwords)
3. File System as a Spreadsheet (an alternative way to manage files and folders)
4. Personal Search Engine (e.g. index your Social Media, Blog, activity on StackOverflow etc) (note: Matt Holt's Timeliner)
5. coreutils++ - crossplatform cli tools
   • a readlink or abspath that works cross-platform, similar to GNU readlink
   • a relpath command that, given two paths, yields a relative path if possible
     https://stackoverflow.com/questions/2564634/convert-absolute-path-into-relative-path-given-a-current-directory-using-bash
   • a stat command that can return the size of a file in bytes, or other units (KB, KiB, Kbit, MB, MiB, Mbit, etc)

Useful tools

• Adobe Kuler to pick complementary colors
• MVP.css - "Classless" CSS for Semantic HTML & Markdown
  • more classless CSS
• Utterances - enable feedback via github issues

[coolaj86]

1. Resize an Image with plain Browser JavaScript

Let the user provide an image as file upload or a URL and present a resized thumbnail for posting to the server.

You'll likely need to do something like this:

• Create <input type='file'> (perhaps with a constraint to only allow images) and get the file into a Blob
• Create an <input type='url'> and place that into an image tag
• Put that image Blob into a Canvas
• Use stackoverflow to figure out how to resize it (warning the naive approach may have significant distortion)
• Get the Blob from the Canvas
• Preview it in an <img> tag with a Blob DataURL
• Send the blob to the server with fetch.

Just take it one step at a time.

(pending https://github.com/MaxSultan/front-end-min)

[coolaj86]

2. Random String Generator

Generate a random string of a given character or bit length in the given encoding.
Re: webinstall/webi-roadmap#23

Usage might look like this:

# Produce a base62 string with 32 characters
rnd -alphanum -s 32

# Produce a 128-bit hex string
rnd -hex -b 128

# Produce a base62 32-byte (256-bit) string with the prefix 'gho_'
rnd -62 -B 32 -prefix gho_

• Encodings
  • (url-safe) Base64
  • hex
  • alphanumeric (base62 or truncated base64) (why?)
  • Bonus: Crockford's Base32 (lowercase alphanumeric, with visually similar letters treated as equivalent)

This is best done in cross-platform systems language like Go or Rust where it can easily be redistributed as a binary at minimal size (as opposed to requiring node or python and being 30-100mb of bundled runtime components).

Similar Projects:

• https://gist.github.com/denisbrodbeck/635a644089868a51eccd6ae22b2eb800

Prototype

# Hex: 012345679abcdef (10 + 6)
aliasman alias rnd16='xxd -c 0 -l 40 -p /dev/urandom'
alias rnd16='xxd -c 0 -l 40 -p /dev/urandom'

# Base32 (Crockford): 0123456789ABCDEFGHJKMNPQRSTVWXYZ (10 + 26 + -4)
aliasman alias rnd32='xxd -c 0 -l 256 -p /dev/urandom | xxd -r -ps | base64 | tr -d [:space:]/+_=- | tr -d abcdefghijklmnopqrstuvwxyzILOU | cut -c 1-80'
alias rnd32='xxd -c 0 -l 256 -p /dev/urandom | xxd -r -ps | base64 | tr -d [:space:]/+_=- | tr -d abcdefghijklmnopqrstuvwxyzILOU | cut -c 1-80'

# Base58 (Bitcoin): 123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz (10 + 26 + 26 + -4)
aliasman alias rnd58='xxd -c 0 -l 256 -p /dev/urandom | xxd -r -ps | base64 | tr -d [:space:]/+_=- | tr -d 0IOl | cut -c 1-80'
alias rnd58='xxd -c 0 -l 256 -p /dev/urandom | xxd -r -ps | base64 | tr -d [:space:]/+_=- | tr -d 0IOl | cut -c 1-80'

# Base62 (GitHub): 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz (10 + 26 + 26)
aliasman alias rnd62='xxd -c 0 -l 256 -p /dev/urandom | xxd -r -ps | base64 | tr -d [:space:]=+/_- | cut -c 1-80'
alias rnd62='xxd -c 0 -l 256 -p /dev/urandom | xxd -r -ps | base64 | tr -d [:space:]=+/_- | cut -c 1-80'

# Base64 (Web): ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ (10 + 26 + 26 + 2)
aliasman alias rnd64='xxd -c 0 -l 256 -p /dev/urandom | xxd -r -ps | base64 | tr -d [:space:]= | tr + - | tr / _ | cut -c 1-80'
alias rnd64='xxd -c 0 -l 256 -p /dev/urandom | xxd -r -ps | base64 | tr -d [:space:]= | tr + - | tr / _ | cut -c 1-80'

# 128+ bits of entropy
rnd16 | cut -c 1-32
rnd32 | cut -c 1-26
rnd58 | cut -c 1-22
rnd62 | cut -c 1-22
rnd64 | cut -c 1-22

Fun Facts

Base	Minimum Chars for 128 bits of Entropy
2	128
3	81
4	64
5	56
6	50
7	46
8	43
9	41
10	39
11	38
12	36
13	35
14	34
15	33
16	32
18	31
20	30
22	29
24	28
27	27
31	26
35	25
41	24
48	23
57	22
69	21
85	20
107	19
139	18
185	17
256	16

Base	Minimum Chars for 256 bits of Entropy
3	162
4	128
5	111
6	100
7	92
8	86
9	81
10	78
11	75
12	72
13	70
14	68
15	66
16	64
17	63
18	62
19	61
20	60
21	59
22	58
23	57
24	56
26	55
27	54
29	53
31	52
33	51
35	50
38	49
41	48
44	47
48	46
52	45
57	44
62	43
69	42
76	41
85	40
95	39
107	38
122	37
139	36
160	35
185	34
217	33
256	32

var last = 256;
var target = 128;

console.log(`| Base | Minimum Chars for ${target} bits of Entropy |`);
console.log(`| ---- | --------------- |`);
for (let n = 2; n <= 256; n += 1) {
    let bits = Math.log(n) / Math.log(2);
    let min = Math.ceil(target / bits);
    if (last === min) {
        continue;
    }
    last = min;
    console.log(`| ${n} |  ${min} |`);
}

[coolaj86]

3. Edit File System as a Spreadsheet

For digital archivist, it's pretty common to need to be able to edit maybe dozens of file names and file paths at a time. It's very tedius.

It would be great to have a way to recursively read through a folder and have the file paths and file names, along with metadata such as the size, creation, modified, and access dates visible in a spreadsheet.

Then, rather than dragging files between multiple windows one could simply copy-and-paste the file path to put a file in a folder.

Likewise it would be easy to update the names of multiple files at once, especially if there were some way to split the file name into multiple fields (e.g. The Greatest Show - S1.E01 (D1) - The Long Way Home.mp4).

[coolaj86]

4. Personal Search Engine

The ability to search your own history from one (or more) social sources:

• Blog
• Facebook
• Twitter
• StackOverflow

And the ability to limit results based on

• Author of Post or Question
• Replied to / Commented on
• Liked / Favorited / Bookmarked
• Link to External Source, posted by you
• Link to External Source, mentioned in thread

(see also: https://twitter.com/timelinize)

[coolaj86]

5. Celebrity Database / Social Network

Create an alternative to RandomUser.me, but using celebrities.

• Given Names
• Family Names
• Birthdays / Ages
• Family relationships (Spouse, Parent, Child, Sibling)
• Co-worker relationships / Shared Interest groups (movies worked on together)

This could be accomplished using IMDB.

[coolaj86]

6. Node.js Cookie Jar

Fork tough-cookie and file-cookie-store to create a modern cookie storage for Promise (async/await) enabled request libraries such as axios and @root/request, which is cross-compatible with wget and curl.

This is an old, old module that's changed hands several times and has never really been updated. Despite being deployed as a low-level library millions of times a month, it's quite cumbersome to use with any modern tools and there are big open deal-breaker issues on many of the popular plugins.

Many of the bugs have been fixed and are awaiting PR, but no one has taken on the responsibility to claim them.

Workaround Code

Here's the kind of hacky-do wrapper code that's required to fudge this into working with modern Promisable code.

//let setCookie = require('set-cookie-parser');
let Cookie = require('tough-cookie');
var FileCookieStore = require('file-cookie-store');
var cookies_store = new FileCookieStore('./cookie.txt', { auto_sync: false });
let jar = new Cookie.CookieJar(cookies_store);
jar.setCookieAsync = require('util').promisify(jar.setCookie);
jar.getCookiesAsync = require('util').promisify(jar.getCookies);
cookies_store.saveAsync = require('util').promisify(cookies_store.save);

async function setCookies(url, resp) {
  let cookies = [];
  if (resp.headers['set-cookie']) {
    if (Array.isArray(resp.headers['set-cookie'])) {
      cookies = resp.headers['set-cookie'].map(Cookie.parse);
    } else {
      cookies = [Cookie.parse(resp.headers['set-cookie'])];
    }
  }

  // let Cookie = require('set-cookie-parser');
  // Cookie.parse(resp, { decodeValues: true });
  await Promise.all(
    cookies.map(async function (cookie) {
      //console.log('DEBUG cookie:', cookie.toJSON());
      await jar.setCookieAsync(cookie, url, { now: new Date() });
    }),
  );
  await cookies_store.saveAsync();
}

async function getCookie(url) {
  return (await jar.getCookiesAsync(url)).toString();
}

// Example: logging in to get a refresh token cookie
  url = `${baseUrl}/authn/session`;
  id_token = await request({
    method: 'POST',
    url: url,
    json: { email: TEST_USERNAME, password: TEST_PASSWORD },
  })
    .then(expect(200))
    .then(async function (resp) {
      await setCookies(url, resp);
      return resp.body.id_token;
    });

// using a cookie from the cookie jar
  cookie = await getCookie(url);
  await request({
    method: 'GET',
    url: url,
    headers: { Authorization: 'Bearer ' + access_token },
    json: true,
  }).then(expect(200));

[coolaj86]

List # of Contributions to Various Github Projects on Portfolio

Replicate this in Node, Go, or Rust: https://stackoverflow.com/a/21591792/151312

Make it more fancy by sorting the higher-profile projects (estimate by star count, perhaps?) to the top.

Then output the links to your contributions, like this: https://github.com/nodejs/node/commits?author=coolaj86

Make it easy for yourself and others to run that script and visualize those nerd stas in a resume or portfolio.

[coolaj86]

Shellcheck Quick Check

Beginner JS+CSS Project

1. Download the shellcheck error code list from https://gist.github.com/nicerobot/53cee11ee0abbdc997661e65b348f375
2. Provide an textarea input that, when pasted into, will grab any strings in the format SCxxxx (e.g. SC2014) and filters the list to matching error codes.

So if I paste in text like any of these:

SC2034,SC2129,SC2069,SC2154,SC2164,SC2016,SC2001

or

SC2034 SC2129 SC2069 SC2154 SC2164 SC2016 SC2001

or even

In ziglang/install.sh line 5:
function __redirect_alias_zig() {
^-- SC2112: 'function' keyword is non-standard. Delete it.

In zoxide/install.sh line 3:
function __init_zoxide() {
^-- SC2112: 'function' keyword is non-standard. Delete it.

I'll get back the list of errors that applies.

[coolaj86]

list - set operations for the shell

We need a command that can perform basic set operations on delimited strings (with an option to chose all whitespace, comma, newline, tab, space, etc)

list_a="one two"
list_b="one three"

# union "one two three"
list -u "$list_a" "$list_b"

# intersect "one"
list -x "$list_a" "$list_b"

# complement "two three"
list -n "$list_a" "$list_b"

Re: https://twitter.com/coolaj86/status/1595187602755268609