Josh Buchea

AuthN vs AuthZ

Wed, 01 Apr 2026 14:00:00 HST

Authentication (AuthN)

Verifies who a user is
Answers: 'Are you really who you claim to be?'
Examples:
- Password login
- OAuth login (Google, GitHub)
- Biometrics, 2FA
Output: identity (user ID, session, token)

Authorization (AuthZ)

Determines what a user can do
Answers: 'Are you allowed to do this?'
Examples:
- Role-based access (admin vs user)
- Permissions (read/write/delete)
- Feature flags, scopes in JWTs
Output: access decision (allow/deny specific actions)

Key difference

AuthN happens first → establishes identity
AuthZ happens after → enforces permissions for that identity

Quick analogy

AuthN: showing your ID at the door
AuthZ: being allowed into specific rooms once inside

Plant Identification Tools

Mon, 06 May 2024 14:00:00 HST

React Native Box Shadow

Thu, 11 Aug 2022 14:00:00 HST

A quick React Native box shadow example:

import { StyleSheet, View } from 'react-native';

const BoxShadowExample = () => {
  return (
    <View style={styles.container}>
      <View style={styles.boxShadow} />
    </View>
  );
};

const styles = StyleSheet.create({
  boxShadow: {
    // android:
    elevation: 1,
    // ios:
    shadowColor: '#000',
    shadowOffset: { height: 1, width: 0 },
    shadowOpacity: 0.1,
    shadowRadius: 1,
  },
  container: {
    backgroundColor: '#fff',
    flex: 1,
  },
});

Slack API files.upload error: not_in_channel

Tue, 17 May 2022 14:00:00 HST

{"ok":false,"error":"not_in_channel"}

This error occurs when a bot oauth token is used and the bot isn't in the target channel(s).

To fix:

Go into target channel(s)
Type /invite @BOT_NAME
Retry the request

CircleCI Artifact URL

Thu, 12 May 2022 14:00:00 HST

To preconstruct the URL of a CircleCI artifact before the store_artifacts step, use this URL structure:

https://output.circle-artifacts.com/output/job/${CIRCLE_WORKFLOW_JOB_ID}/artifacts/${CIRCLE_NODE_INDEX}/path-to-folder/or/file.ext

URI Safe Characters

Thu, 14 Apr 2022 14:00:00 HST

Below are all of the safe ("unreserved") characters to use when constructing a URI:

Alpha (A-Z)
Numeric (0-9)
Hyphen (-)
Period (.)
Underscore (_)
Tilde (~)

From section 2.3 of RFC 3986:

Characters that are allowed in a URI, but do not have a reserved purpose, are called unreserved. These include uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde.
ALPHA  DIGIT  "-" / "." / "_" / "~"

Browser Games for Developers & Designers

Thu, 29 Oct 2020 14:00:00 HST

Here's some great web browser based video games you can play to help you master development & design skills while having a little fun!

🕹 👾 🧠 🧑‍💻

Can’t Unsee - Choose the design that‘s most correct. (made by @alex_frantic and @keyanzhang)
Color - A color matching game. (made by @methodofaction)
CSS Battle - An online CSS Code Golfing battleground & leaderboard. Challenge players from around the world! 🌏 (made by @chinchang457 and @kushsolitary)
CSS Diner - A fun game to help you learn and practice CSS selectors. (made by @flukeout)
Dungeons & Developers - You guessed it, role playing! (made by @352inc)
Elevator Saga - Program the movement of elevators with JavaScript. The goal is to transport people in an efficient manner. (made by @magwo)
Flex Box Adventure
Flexbox Defense - Your job is to stop the incoming enemies from getting past your defenses. Unlike other tower defense games, you must position your towers using CSS! (made by @ChanningAllen)
Flexbox Froggy - Help guide Froggy and friends by writing CSS. This game helped me learn flexbox! (made by @playcodepip)
Flexbox Zombies - Complete zombie survival challenges and master flexbox concepts, your life depends on it! (made by @davidgeddes)
Grid Attack
Grid Critters
Grid Garden - Write CSS to grow a carrot garden! (made by @playcodepip)
Hex Invaders - The world needs your typically useless skill of hex code knowledge to prevent the invasion! (made by @352inc)
Interactive Vim Tutorial - It’s an interactive vim tutorial 😁 (made by @egaga)
Kern Type - The kerning game. (made by @tobiascnee)
Pixact.ly - Draw a box that matches the dimensions given and receive a score based on how close you are. (made by ??)
Regex Crossword - A crossword puzzle game, where the crossword clues are defined using regular expressions. (made by @mhmichelsen and @omichelsen)
RegexOne
Ruby Warrior - A triumphant quest of adventure, love & destiny (made by ???)
all within a few lines of code! (A project by @trybloc — made by Emelyn Baker, @foxy_blocks, and @choxi)
Shape Type - The letter shaping game. (made by @methodofaction)
The Bézier Game - A game to help you master the pen tool. (made by @methodofaction)
TwilioQuest - Learn to code and lead your intrepid crew on a mission to save The Cloud in TwilioQuest, a role-playing game inspired by classics of the 16-bit era. (made by @twilio)
Untrusted - The continuing adventures of Dr. Eval (made by @alexnisnevich)
User Inyerface
VIM Adventures - Learn VIM while playing a game! (made by @doronlinder)
VimGenius - Increase your speed and improve your muscle memory with Vim Genius, a timed flashcard-style game designed to make you faster in Vim. (made by @vicramon and @ryenotbread)

Web Monetization

Sat, 24 Oct 2020 14:00:00 HST

Steps to Monetize Web Content

Set up a web monetized wallet — I went with Uphold
Get the wallet's payment pointer — mine is $ilp.uphold.com/KBfxJZi2y78w
Add the monetization <meta> tag with the wallet's payment pointer to the web page(s) you'd like to monetize — mine is:

<meta name="monetization" content="$ilp.uphold.com/KBfxJZi2y78w">

That's it! The wallet will now receive a micro-payment every time a monetized browser visits a web page with the special meta tag.

Tristan Harris

Fri, 28 Aug 2020 14:00:00 HST

Time Well Spent movement:

Center for Humane Technology

Downgrading:

SVG

Fri, 28 Aug 2020 14:00:00 HST

Error: `<svg>` attribute width: Expected length, "auto"

Don't use auto:

<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="15px"

Use 100% instead:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="15px"

Memory

Fri, 28 Aug 2020 14:00:00 HST

Notes from "The Mind, Explained" on Netflix
- Types of memories
  - Implicit
  - Explicit
- Location
  - Memory Vividness is very strongly tied to location
    - The thing people are most consistent about when retelling vivid memories is where they were
  - Location has a strong role with memory
    - If you look in the hippocampus, there are special cells that are specifically responsive for time & place
- Foundation of some of our strongest memories:
  - Stories
  - Place
  - Emotion
  - They can be hijacked to help you memorize anything
    - Girl with amazing memory in documentary had a few systems to help her memorize things
      - Convert numbers to letters, and then "read" the numbers
        
        Often swapped numbers with similar looking letters
        
        539 = SAG
        
        166 = TBB
        
        Then would associate the series of letters with something already in her memory
        
        166 = TBB = Tabbouleh (The mediterranean dish) (I LOVE THIS BTW)
        
        Then associate the new letter and word combinations together
        
        SAG + Tabbouleh = A saggy person covered in tabbouleh
        
        Visceral images/thoughts are remembered better/easier
      - Utilized an ancient memory technique called "The Memory Palace"
        
        Would visualize herself walking through a neighborhood she knows well, adding surreal imagery along the route (associate items to remember spatially and sequentially with places in the neighborhood)
        
        "It helps inputting very random abstract things in order when you attach it to something you already know"
        
        As she came out of the metro, she saw a saggy man covered in Tabbouleh

How to Trick Your Brain into Remembering Almost Anything

Four-time USA Memory Champion Nelson Dellis and psychological scientist Julia Shaw explain how to boost your memory skills:

Start With Strong Images
Put Those Images in a Location
Pay Attention
Break Things Up
Finish Up by Reviewing

Robinhood

Thu, 27 Aug 2020 14:00:00 HST

Accidentally transferred funds from the wrong account?

It's possible to cancel some transactions... but there's a cut-off time!
After spending funds from an incorrect transfer, I didn't have the option to cancel. After initiating a new transaction for the same amount from the correct account I was able to cancel the original transfer from the incorrect account.
https://www.reddit.com/r/RobinHood/comments/7v1kgt/wrong_account/
https://www.reddit.com/r/RobinHood/comments/93zbj1/anyone_getting_the_robinhood_transfer_reversed/

Coronavirus

Thu, 06 Aug 2020 14:00:00 HST

Xcode

Wed, 05 Aug 2020 14:00:00 HST

How to Add Command Line Arguments in Xcode

As of Xcode 4.x I've had to go to the Product menu, select "Edit Scheme", then select the arguments tab and add the arguments there.

Folders that are safe to delete (the entire folder)

~/Library/Developer/Xcode/DerivedData
~/Library/Developer/Xcode/iOS DeviceSupport

URL

Wed, 05 Aug 2020 14:00:00 HST

Difference between URL & URI

URI is parent entity. URL contains protocol and is subset of URI.

URI: foo.html
URN: example.com/foo.html (globally unique)
URL: http://example.com/foo.html (includes protocol)

https://danielmiessler.com/study/url-uri/#gs.p3ItnCM

URL Maximum Length

According to the HTTP spec, there is no limit to a URL's length. Keep your URLs under 2048 characters; this will ensure the URLs work in all clients & server configurations. Also, search engines like URLs to remain under approximately 2000 characters.

Chrome has a 2MB limit for URLs, IE8 and 9 have a 2084 character limit. So everything points in keeping your URLs limited to approx. 2000 characters.

Also, from a usability point-of-view, URLs that long are not usable/readable by users.

However, the domain name has a max. length of 255 characters. So to be on the safe side, the max. length of an URL segment would be around 1745 characters, given that your URL exists out of 1 segment.

https://stackoverflow.com/a/33733386/1492782

SVN

Wed, 05 Aug 2020 14:00:00 HST

Golden rule is: once something is under svn-control, any moving, deleting, renaming, should be done with svn commands (svn mv, svn rm, etc.), not using normal filesystem/file-explorer functions.

Status: svn status
Revert file: svn revert path/to/file
Reset repo (recursively revert everything): svn revert --recursive .

Stack Overflow

Wed, 05 Aug 2020 14:00:00 HST

How to Edit Favorite Tags

Go to https://stackoverflow.com (not your profile page) and look for Favorite Tags section and press edit button

Jest

Wed, 05 Aug 2020 14:00:00 HST

Run Individual Tests with Jest

jest --runInBand -t "My Test Name"

If running that command results in a command not found: jest error, it may be necessary to preface the command with npm or yarn:

# npm
npm jest --runInBand -t "My Test Name"

# yarn
yarn jest --runInBand -t "My Test Name"

Google Drive

Wed, 05 Aug 2020 14:00:00 HST

How to get CSV data from Google Drive

In the spreadsheet, go to "Publish" and choose "CSV". Copy the link, which I'll call URL in the next part
wget 'URL' -O _data/mydata.csv

GitLab

Wed, 05 Aug 2020 14:00:00 HST

GitLab Runner

GitLab Runner: https://docs.gitlab.com/runner/
Digital Ocean Install Instructions: https://about.gitlab.com/2016/04/19/how-to-set-up-gitlab-runner-on-digitalocean/
Official GitLab Install Instructions: https://docs.gitlab.com/runner/install/
Official GitLab Install Instructions (Linux): https://docs.gitlab.com/runner/install/linux-repository.html
View Runners: GITLAB_INSTALL/admin/runners
Install & Register Shared Runner:
- Install GitLab Runner: sudo apt-get install gitlab-ci-multi-runner
- Verify Install: gitlab-runner --version
- Grab URL & token from "How to setup a shared Runner for a new project" section: GITLAB_INSTALL/admin/runners
- Register GitLab Runner gitlab-runner register
  - gitlab-ci coordinator URL: Enter URL acquired in previous step.
  - gitlab-ci token for this runner: Enter token acquired in previous step.
  - gitlab-ci description for this runner: Enter a description or the hostname of the droplet will be used.
  - gitlab-ci tags for this runner: You can use tags in your .gitlab-ci.yml to limit jobs to specific Runners. Useful if for example you are running tests on different OSes. (Ok to leave blank)
  - executor: docker
  - default Docker image: The default Docker image that will be used if you don't specify it in .gitlab-ci.yml. Entered node:latest.
- Verify Registration: gitlab-runner list

Update Runner

# For Debian/Ubuntu
sudo apt-get update
sudo apt-get install gitlab-ci-multi-runner

# For RHEL/CentOS
sudo yum update
sudo yum install gitlab-ci-multi-runner

FileZilla

Wed, 05 Aug 2020 14:00:00 HST

Backup/Restore FileZilla config

Export Config: File > Export... > Choose Option > Choose File
Import Config: File > Import... > Choose File

Feature vs Value

Wed, 05 Aug 2020 14:00:00 HST

A feature is something your product or solution does.
Value is something your customers get because of what your product enables.

http://marketinginteractions.typepad.com/marketing_interactions/2010/04/the-difference-between-features-and-value.html

Excel

Wed, 05 Aug 2020 14:00:00 HST

Move Column

Click column heading
Hold Shift & Hover over left/right border
Drag to desired location (in between to move)

Set Zoom Level for Multiple Sheets

Select sheets: from the first worksheet tab to be included, hold down the Shift key and click on the last worksheet tab to be included. If the worksheets are not next to each other in the workbook, hold down the Ctrl key whilst clicking on the worksheet tabs to be included.
Adjust to desired zoom level

Dropbox

Wed, 05 Aug 2020 14:00:00 HST

Set a file or folder to be ignored using the command line

Just replace the file/folder path placeholder with the file/folder path to ignore.

Mac:

xattr -w com.dropbox.ignored 1 /Users/yourname/Dropbox/YourFileName.pdf

Linux:

attr -s com.dropbox.ignored -V 1 /Users/yourname/Dropbox/YourFileName.pdf

Windows:

Set-Content -Path 'C:\Users\yourname\Dropbox\YourFileName.pdf'  -Stream com.dropbox.ignored -Value 1

https://help.dropbox.com/en-US/files-folders/restore-delete/ignored-files

Issue: High CPU Usage

Symlinks and/or having more than 300,000 files synced to one computer can cause Dropbox performance to decline.

This is a soft limit, and depends highly on the hardware specifications of the computer running the Dropbox application. If you think this might be part of the problem, I'd recommend using Selective Sync (https://www.dropbox.com/help/175) to sync only the folders you need to work with to your computer.

Reference

Asana

Wed, 05 Aug 2020 14:00:00 HST

Mark as Today in your My Tasks: Tab-Y
Monospace: CMD + Shift + M
Create section or convert task to section: Add : to end of task name

Argument vs Parameter

Wed, 05 Aug 2020 14:00:00 HST

A parameter is a variable in a method definition. When a method is called, the arguments are the data you pass into the method's parameters. Parameter is variable in the declaration of function. Argument is the actual value of this variable that gets passed to function.

function customLog(text) { // parameter
  console.log(text);
}

customLog('hi'); // argument

What's a digital garden?

Sun, 28 Jun 2020 14:00:00 HST

🌱🌵💻🌷📱🌱🧑‍💻☘️🌱🌹

🤷‍♀️ 🤷‍♂️ 🤔 ❓❔❓

👇 Thread 👇

The phrase "digital garden" is a metaphor for thinking about writing and creating that focuses less on the resulting "showpiece" and more on the process, care, and craft it takes to get there.

— @jhooks

A digital garden is...

less about:

👎 Chronologically sorted posts
👎 Paginated posts
👎 Content marketing
👎 Perfection

and more about:

👍 Non-performative blogging
👍 Personal curation
👍 Shipping

What belongs in a digital garden?

✅ Blog
✅ Wiki
✅ Notes
✅ Ideas
✅ Snippets
✅ Resources
✅ Thoughts
✅ Collections
✅ Anything you find interesting or useful!

Be creative! What else could/should be included? I'd love to hear your ideas!

A digital garden doesn’t have to be confined to a website. @jhooks says his digital garden extends well beyond his personal domain:

Twitter
Notion
Roam
Slack
Discord
Apple Notes

"My blog is a digital garden, not a blog" is an excellent resource to learn more about digital gardens from @jhooks 👀

https://joelhooks.com/digital-garden

Ultimately, a digital garden is personal and can be whatever you want it to be. A digital garden is a digital extension of you.

I hope this inspires you to start digital gardening 🌱

I'll leave you with this quote:

Perfectionism is not a quest for the best. It is a pursuit of the worst in ourselves, the part that tells us that nothing we do will ever be good enough - that we should try again.

— @J_CameronLive

These notes are a consolidation of tweets from a thread I recently shared on Twitter:

What’s a digital garden?

🌱🌵💻🌷📱🌱🧑‍💻☘️🌱🌹

🤷‍♀️ 🤷‍♂️ 🤔 ❓❔❓

👇 Thread 👇
— Josh #BlackLivesMatter (@joshbuchea) June 26, 2020

Music for Coding

Mon, 15 Jun 2020 14:00:00 HST

Music without lyrics is preferred while coding.

Soundtracks

Inception (2010)
Interstellar (2014)
John Wick (2014)
John Wick 2 (2017)
John Wick 3 (2019)
The Social Network (2010)
Tron: Legacy (2010)
Westworld: Season 1 (2016)

Homeschool Resources

Fri, 29 May 2020 14:00:00 HST

CS First | Google for Education - "A free computer science curriculum that makes coding easy to teach and fun to learn."
Library | Primer - "A collection of our favorite educational resources around the web."
Wide Open School - "A free collection of the best online learning experiences for kids curated by the editors at Common Sense"
WildEarth Kids - Virtual Safaris

React Native Push Notifications

Mon, 11 May 2020 14:00:00 HST

Solutions currently available:

React Native Firebase v5
React Native Firebase v6 (Notifee)
OneSignal
Airship (formerly Urban Airship)

Homemade Pizza

Sun, 10 May 2020 14:00:00 HST

Preheat oven to 450 degrees

1 1/4 cup of warm water
2 tsp instant yeast

Add warm water to a bowl. Add yeast to the water and give a little stir. Let sit for 5-10 min, it should start to foam and active. If nothing happens, throw out and start again.

2 Tbsp olive oil
1 tsp salt
3 1/2 cups of flour (maybe a little more)

Add oil, salt, and flour to yeast and water. Using a rubber spatula, gently start mixing together. Once a dough ball has formed, lose the spatula and start kneading (in the bowl) with palms and keeping it in a ball form. Once you have kneaded for about 5 min and no flour remains in the bowl, leave ball in bowl and cover with cling wrap for 30-45 min

Once ball is double in size, rip it in two or four pieces. On a lightly floured surface knead dough a little and start rolling it with a rolling pin. I rolled into a rectangle for cooking sheets, but after you roll it you can cut it to a circle for a pizza pan. Roll it to a desired thickness (1/8” for me), making sure it’s even everywhere. Place onto cooking sheet. Do the same with remaining dough.

1 cup marinara sauce
2 cups Mexican shredded cheese
Toppings: pepperoni, olives, onions, peppers, sausage, ground beef, etc.

Assembly: take first sheet of dough. Divide topping ingredients by 2 or 4 depending on how many pizza doughs you made. I made 2 so here’s mine:

1/2 cup marinara
1 cup cheese
Single layer of pepperoni
Topped with olives and onions

You can top it again with a bit of cheese.

Bake at 450 for 13 min (I am at sea level, so make sure you know if you need to adjust time or temp) while you assemble the next. Pizza should be nice golden brown on the underside.

Enjoy!

Ignore TypeScript-ESLint Rule with Code Comment

Thu, 07 May 2020 14:00:00 HST

To ignore a typescript-eslint rule for a single line or block of code:

/* eslint-disable @typescript-eslint/camelcase */
const myObj = {
  some_property: 'blah',
};

Auto-scaling Images in React Native

Thu, 07 May 2020 14:00:00 HST

One method to auto-scale images in React Native while preserving aspect ratio:

const imageStyles = {
  flex: 1,
  width: null,
  height: null,
  resizeMode: 'contain',
}

const Example = () => {
  return (
    <Image
      style={imageStyles}
      source={{ uri: 'https://placeholder.com/850' }}
    />
  );
}

Paste and Match Style by Default on macOS

Wed, 06 May 2020 14:00:00 HST

Copying & pasting between applications can be a frustrating experience when un-desired formatting is included.

macOS provides paste and match style to paste without formatting.

To set as the default system behavior:

Open System Preferences
Choose Keyboard
Choose Shortcuts tab (top)
Choose App Shortcuts (left)
Press button with plus symbol (bottom)
- Application: All Applications
- Menu Title: Paste and Match Style
- Keyboard Shortcut: ⌘V (Press Command + V)
Press Add

Run React Native App on iPad or any other iOS Simulator

Mon, 04 May 2020 14:00:00 HST

To run a React Native App on iPad or any other iOS Simulator, the React Native Docs outline using the --simulator flag with react-native run-ios:

npx react-native run-ios --simulator="iPad (7th generation)"

List available iOS Simulators:

xcrun simctl list devices

At the time of authoring this note, there is no way to set a default device for the Simulator.

React Native Error: Could not find iPhone X Simulator

Mon, 04 May 2020 14:00:00 HST

Issue

error Could not find "iPhone X" simulator. Run CLI with --verbose flag for more details.
error Command failed with exit code 1.

In my case, the iPhone X Simulator wasn't installed.

I verified installed simulators before and after with:

xcrun simctl list devices

Solution

Open Xcode
Select Window > Devices and Simulators from the top menu bar
In the Devices and Simulators window, select the Simulators tab
Add the iPhone X (and any others) in the left sidebar
Don't give it a custom name since RN is looking for iPhone X
Click Create

Epilepsy Devices

Sun, 03 May 2020 14:00:00 HST

Cameras:

SAMi

Mattress Devices:

Pillows:

Sleep-Safe Anti-Suffocation Pillow

Watches:

Always open React Native packager with iTerm

Sat, 02 May 2020 14:00:00 HST

On macOS, .command files open with Terminal.app by default.

To always open the React Native packager with iTerm, associate .command files with iTerm:

Open Finder
Find any file with the .command extension ($PROJECT/node_modules/react-native/scripts/launchPackager.command)
Right-click on .command file to bring up context menu
Choose Get Info
Change Open with to iterm.app
Click Change All...

Query Gatsby nodes based on gatsby-source-filesystem name

Sat, 22 Feb 2020 14:00:00 HST

Create Node Field

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions

  if (node.internal.type === 'Mdx') {
    // Grab the parent node
    const parent = getNode(node.parent)

    // Create a field on this node for the "collection" of the parent
    // NOTE: This is necessary so we can filter nodes by "collection"
    // otherwise there is no way to filter for only markdown
    // documents of type `post` or `note` or `whatever`.
    // https://github.com/gatsbyjs/gatsby/issues/1634#issuecomment-388899348
    createNodeField({
      name: 'collection',
      node,
      value: parent.sourceInstanceName,
    })

    // create remaining node fields here...
  }
}

Query by Node Field

Here's the pageQuery for the notes page on this site:

export const pageQuery = graphql`
  query {
    site {
      ...site
      siteMetadata {
        title
      }
    }
    allMdx(
      # limit: 5
      filter: {
        fields: { collection: { eq: "notes" } }
        frontmatter: { published: { ne: false } }
      }
      # sort: { fields: [frontmatter___date], order: DESC }
      sort: { fields: [frontmatter___slug], order: ASC }
    ) {
      edges {
        node {
          excerpt(pruneLength: 190)
          id
          fields {
            title
            slug
            date
            collection
          }
          parent {
            ... on File {
              sourceInstanceName
            }
          }
          frontmatter {
            title
            date(formatString: "MMMM DD, YYYY")
            description
            banner {
              childImageSharp {
                sizes(maxWidth: 720) {
                  ...GatsbyImageSharpSizes
                }
              }
            }
            slug
            keywords
            categories
          }
        }
      }
    }
  }
`

Uses

Wed, 08 Jan 2020 14:00:00 HST

Office equipment
Tech hardware
Software
What else??

Gear

Some of the physical gear I use to get work done:

Retired gear:

Mac Apps

Wed, 08 Jan 2020 14:00:00 HST

Development

Anvil
Captain: brew install --cask captain
Docker: brew install --cask docker
Postico: brew install --cask postico
Postman: brew install --cask postman
React Native Debugger: brew install --cask react-native-debugger
Reactotron
Screaming Frog SEO Spider: brew install --cask screaming-frog-seo-spider
Sequel Pro: brew install --cask sequel-pro
VirtualBox: brew install --cask virtualbox

Utilities

Alfred (launcher)
BetterTouchTool (to make touchbar great again & more?)
BitBar (scriptable menu widgets)
Camouflage (hides desktop icons)
Contexts (better cmd+tab experience)
ControlPlane (automate based on location)
Currency Menu
Dash (for documentation)
Dato (better menubar clock with calendar and timezones)
DefaultFolderX (?)
f.lux (display temperature cool/warm)
Flotato (turn webpages into apps)
Focus Time
Gestimer (reminders)
Gifski (Convert videos to gifs)
HazeOver (dims down what you aren't focused on)
iTerm 2
Itsycal
KeybaseIO
Mate (quick and precise translations across macOS + Safari)
Muzzle (silence notifications)
NightOwl (disable dark mode in certain apps)
Notefile (notes)
OBS: brew install --cask obs
One Switch (for hiding icons and other neat stuff)
PhraseExpress (text expander)
PixelSnap (measuring stuff on the screen)
Pock (display macOS dock in touchbar)
PopClip (customizable toolbar for selected text)
RescueTime
SetApp ($10/mo for 170+ apps)
Swish (enhanced macOS gesture layer)
Timestamp (better clock + calendar)
The Clock
Transmission: brew install --cask transmission
TypeIt4Me (text replacement)
UBar (dock replacement)
Unclutter (notes, files, pasteboard clips)
Unshaky
Viso (minimal image viewer)
VLC media player: brew install --cask vlc
VoltageShift (Undervoltage tools for macOS)
Yoink (drawer)

Clipboard

Colors

Color Snapper
Contrast (colors and accessible contrast ratios)
Sip
xScope (also measures!)

Emoji

ctrl + cmd + space for system emoji picker

Rocket: brew install --cask rocket
qmoji
Touch Emoji

Keyboard

Karabiner-Elements (customize keyboard)
Mouseless
skhd (keyboard shortcuts, hotkey daemon)

Media Keys

BeardedSpice
Mac Media Controller (prevent apple music from opening when media keys are pressed)
Mac Media Key Forwarder (formerly known as HighSierraMediaKeyEnabler)

Menubar Organization

Bartender
Dozer (free)
Hidden Bar (free, reportedly doesn't handle macbooks with a notch well)
Ice (free)
OnlySwitch
Vanilla

Passwords

1Password
Bit Warden
Dashlane (passwords + forms)
Enpass
KeePass

Screen Capture/Record

CleanShot
CloudApp (videos, gifs, screenshots)
Giphy Capture
Kap
LICEcap
Monosnap
Recordit (fast screencasts)

Sleep Control

You can also simply run the caffeinate command from the terminal

System Monitoring

Timezones

FlagTimes
There (work across timezones)

Window Management

Ametheyst (tiling)
Divvy
HyperDock
Magnet
Rectangle
Phoenix (window management & more!)
ShiftIt
SizeUp
Slate
Spectacle
Yabai (window tiling manager)

Backblaze

Thu, 19 Dec 2019 14:00:00 HST

Canceling the Online Backup service

To cancel a personal Online Backup subscription, remove all registered backups and licenses. To remove a single backup and license, follow the steps below. Repeat for each backup and license pair to be deleted.

Visit https://secure.backblaze.com/user_signin.htm and sign in to your Backblaze account with the registered email address and password.
Select the Preferences link on the left side of the page.
Locate the backup to be deleted from the list available.
Select the Delete Backup link next to the backup name.
Enter your account password went prompted. This action will immediately and irreversibly delete the backup data contained within, upon confirmation.
Select the Overview link from the left side of the page.
In the Unused License area found at the bottom, select the Delete link and proceed with the deletion.

Steps sourced from this article in Backblaze Help

Delays finding external drive

Backblaze delays finding my external drive or new files - PC:

Backblaze was designed to be lightweight. There is a small process that slowly scans your computer looking for new/changed files. It can take about an hour or two to scan across all drives for an average user. When you plug in an external drive, it may take Backblaze anywhere from a 1-120 minutes to schedule the files on the external drive to be backed up online.

There is a way to force an immediate rescan. It will slow your computer down for a few minutes while it scans all your drives. You can force the rescan by holding down the ALT key and clicking "Restore Options..." button.

Why hasn't Backblaze backed up my new files yet? :

We designed Backblaze to be lightweight on computer resources, so it might take one to eight hours to notice new or changed files and schedule them for upload or notice disconnected hard drives that are reconnected.

Once the files are found and scheduled for upload, they'll be transmitted as fast as your computer can talk to our servers.

After they've been transmitted, it can take about one to eight hours for the View/Restore Files browser on our website to show the results.

How Backblaze Got Started (2017) | Hacker News:

Even if you use the secret alt-click to force a full drive scan, it can still miss files and tell you fully backed up when files from days ago are still nowhere to be found.

How to Exit VIM

Sat, 14 Dec 2019 14:00:00 HST

Want to save changes and exit? Esc + :wq + Enter
Want to exit without saving changes? Esc + :q!

Steps

Exit edit mode: Press Esc
Enter quit command (choose one):
1. Quit: :q
2. Quit without saving: :q!
3. Save + Quit: :wq
Press Enter

Haircut

Sat, 14 Dec 2019 14:00:00 HST

My preferred haircut:

#3 on the top
#1 on the side
With a #2 fade

Camping

Sat, 14 Dec 2019 14:00:00 HST

Reservations

National Recreation Reservation Service (NRRS)

877-444-6777

Reservations Northwest (Oregon State Parks)

800-452-5687

Pack List

Vehicle Inspection

Mentors

Fri, 13 Dec 2019 14:00:00 HST

My “tribe of mentors”:

Happiness

Fri, 13 Dec 2019 14:00:00 HST

Happiness is pursuing something that you care about, and feeling vital. That's it.
Novelty & Challenge makes people happier (Gretchen Rubin on smart people podcast)
Strive to be happier, not happy all the time. Unrealistic.
50% genetically determined, 10-20% circumstantial
Aim for top of your natural range
Make your bed
Imitate a spiritual master
One sentence journal
Lower the bar
Sing in the morning
Get plenty of sleep!
Be creative every day - the more you do it, the more creative you can be
Focus on - Your nature, your interests, your values
Outer order contributes to inner calm- Huge surge of happiness and motivation.
If you always tell yourself that you don't have enough time for stuff — tell yourself you have plenty of time for the things that are important to you.

Edu Deals

Thu, 12 Dec 2019 14:00:00 HST

Amazon Prime Student - Free

Free Two-Day Shipping, Prime Video, Prime Music, and more — Free for 6 months

Apple Music - $5/month

50% Off ($4.99 vs $9.99)

Audible - Free

Free 30 Day Trial + 2 Free Books

1Password - Free

Free for 6 months

Adidas - 15% Off

15% Off + Free Shipping

Adobe Creative Cloud - $20/month

20+ apps, including Photoshop, Illustrator, and InDesign

Apple - Save

Save with education pricing on all Macs and iPads

Apple Pro Apps Bundle - $200

Final Cut Pro X, Logic Pro X, Motion 5, Compressor 4, and MainStage 3

AT&T - Save

Save on your monthly wireless bill

Autodesk - Free

Over 100 products including Fusion360, AutoCAD, and Maya

Best Buy - Save

Exclusive deals for students

Budget Truck Rental - 15—20% Off

20% Off Local Moves, 15% Off One-Way Moves

Dell - Save

Discounts + Free Expedited Shipping

DJI - Save

Educational Discount coupons

Dockers - 20% Off

20% Off

Dr. Martens - 15% Off

15% Off

Evernote Premium - $4/month

50% Off for one year

FedEx - 20–30% Off

30% Off Documents, 20% Off Packages

General Motors - Save

Savings for Current Students & Recent Grads

GitHub Student Developer Pack - Free

Free access to the best developer tools in one place

GoPro - 20% Off

20% Off across all cameras and accessories on GoPro products

Harry & David - 20% Off

20% Off Flowers & Gifts

Intuit QuickBooks - Free

Free Access to QuickBooks Online

JetBrains - Free

All Desktop Products & IDEs (WebStorm, PhpStorm, IntelliJ IDEA, and more)

LastPass Premium - Free

Free for 6 months

Lenovo - Save

20% Off Think Brand, 15% Off Idea Brand

Levi's - 15% Off

15% Off

Logitech - 25% Off

25% Off

MATLAB - $49

Mathmatical computing software

Microsoft Education Store - Save

Discounts + Save Up to 10%

Microsoft Office - Free

Word, Excel, PowerPoint, OneNote, Microsoft Teams, and additional classroom tools

New York Times - Pr$2/weekce

Unlimited articles on any device — $2 a week for one year

Nike - 10% Off

10% Off

Penske Truck Rental - 10% Off

10% Off + Free ulimited miles on one-way moving truck rentals + More

Scrivener - 15% Off

15% Off

Sketch - 50% Off

50% Off for Students/Teachers/Staff, Free for Academic Institutions

Spotify Premium + Hulu + Showtime - $5/month

Limited commercials on Hulu

Sprint - Save

Save on your monthly wireless service bill

Squarespace - 50% Off

50% Off your first full year

Targus - 25% Off

25% Off

Tower - 50% Off

Students, Universities and other educational institutions receive a 50% discount on new licenses

Wall Street Journal - $15

15 Weeks for $15

Western Digital - Save

Up to 25% Off

Verizon Wireless - Save

Educators may qualify for savings on their monthly wireless service bill

Xfinity - Save

Exclusive deals, Free Self-Install Kit, Cancel anytime

Fear

Sun, 01 Dec 2019 14:00:00 HST

What are you putting off out of fear? Usually, what we most fear doing is what we most need to do. That phone call, that conversation, whatever the action might be—it is fear of unknown outcomes that prevents us from doing what we need to do. Define the worst case, accept it, and do it. I’ll repeat something you might consider tattooing on your forehead: What we fear doing most is usually what we most need to do. As I have heard said, a person’s success in life can usually be measured by the number of uncomfortable conversations he or she is willing to have. Resolve to do one thing every day that you fear. I got into this habit by attempting to contact celebrities and famous business people for advice.

— Tim Ferris

Fear-Setting: The Most Valuable Exercise I Do Every Month

iOS Dev

Mon, 25 Nov 2019 14:00:00 HST

Simulator

ios-sim & ios-deploy

Install ios-sim: npm install -g ios-sim
Install ios-deploy: npm install -g ios-deploy
Launch simulator with app: ios-sim start
List devices: ios-sim showdevicetypes

Launch app on a specific device:

ios-sim launch --devicetypeid DEVICE_TYPE_ID ~/Desktop/AppName.app

Launch app on iPhone X:

ios-sim launch --devicetypeid iPhone-X ~/Desktop/AppName.app

xcrun simctl

List available commands: xcrun simctl
List devices: xcrun simctl list
Install app on specific device: xcrun simctl install DEVICE_UID ~/Desktop/AppName.app
Install app on currently booted simulator: xcrun simctl install booted ~/Desktop/AppName.app

NPM

Sun, 24 Nov 2019 14:00:00 HST

List globally installed packages + versions: npm list -g --depth=0
Update npm: npm install -g npm
Install specific version of npm (works with NVM): npm install -g npm@1.4.3
Install local module: npm install /path
- Beware, the command will COPY the content of the target repo found in /path into your project's node_modules, no further changes in /path will be reflected in the local repo unless you do npm install /path again. I'd recommend to use npm link for module development.
Execute commands for a package in a subdirectory:
- Install: npm --prefix ./path/to/package install ./path/to/package
- Test: npm --prefix ./path/to/package test
package.json dependency notation (https://stackoverflow.com/questions/22343224/whats-the-difference-between-tilde-and-caret-in-package-json):
- ^ or 1.x.x: is 1.[any].[any] (latest minor version)
- ~ or 1.2.x: is 1.2.[any] (latest patch)
Error: "ENOENT: no such file or directory, uv_cwd"
- Weird shell/dir issue, restart shell(s)
- https://github.com/nodejs/node/issues/1184
- https://github.com/foreverjs/forever/issues/200

NVM

Sun, 24 Nov 2019 14:00:00 HST

List installed versions of node: nvm ls
List available versions to install: nvm ls-remote
Use specific version of node: nvm use 6.0
Install specific version of node: nvm install 7.7.1
Install latest stable version of node: nvm install stable
Update node to latest stable and reinstall packages from current version: nvm install node --reinstall-packages-from=node
Update node to latest stable, reinstall packages from current version, and install latest npm: nvm install node --reinstall-packages-from=node --latest-npm
Update node to specific version and migrate packages from specific version: nvm install 7.7.1 --reinstall-packages-from=7.5.0
Update node to specific version and migrate packages from current version: nvm install 7.7.1 --reinstall-packages-from="$(nvm current)"
Update node to specific version and migrate packages from specific version: nvm install NEW_VERSION --reinstall-packages-from=OLD_VERSION
Then optionally delete previous version: nvm uninstall YOUR_PREVIOUS_VERSION
To set a default Node version to be used in any new shell, use the alias 'default': nvm alias default 7.7.1
To set a default Node version to be used in any new shell, use the alias 'default': nvm alias default stable

VS Code

Sat, 23 Nov 2019 14:00:00 HST

Open Developer Tools: Help > Toggle Developer Tools
Preferred color theme: Settings > Workbench > Appearance > Color Theme > Dark Modern

Three.js

Sat, 23 Nov 2019 14:00:00 HST

Places to Download 3D Models

LaPoste 3D

Browser Support

Quote from the three.js wikipedia page

Three.js runs in all browsers supported by WebGL.

Quote from one of the authors

Actually all browsers are supported which have support for canvas. We do not support polyfilled canvas. Mainly because most of the time, we use other things beside the canvas that are not implemented by the browser.

http://stackoverflow.com/a/20854036/1492782

CanIUse

A quick look at http://caniuse.com/webgl reveals browsers that lack WebGL support are:

IE < v11 (v11 is latest version)
Android Browser < v51 (v51 is latest version)
iOS Safari < v8
Opera Mini (all versions)

Summary

So, in summary it looks like three.js will NOT run in IE < v11 and some mobile browsers.

GatsbyJS

Sat, 23 Nov 2019 14:00:00 HST

Docs: https://www.gatsbyjs.org/docs/
Starters: https://www.gatsbyjs.org/docs/gatsby-starters/

Commands

Instal GatsbyJS CLI Tool: npm install --global gatsby-cli
Create New Site: gatsby new gatsby-site
Start Dev Server: gatsby develop
Production Build: gatsby build
Serve Production Build Locally: gatsby serve

Customize

Customize html.js: cp .cache/default-html.js src/html.js

MySQL

Fri, 22 Nov 2019 14:00:00 HST

Restart MySQL: systemctl restart mysql

SQL Wilcards

Find any values that start with "a": WHERE CustomerName LIKE 'a%'
Find any values that end with "a": WHERE CustomerName LIKE '%a'
Find any values that have "or" in any position: WHERE CustomerName LIKE '%or%'
Find any values that have "r" in the second position: WHERE CustomerName LIKE '_r%'
Find any values that starts with "a" and are at least 3 characters in length: WHERE CustomerName LIKE 'a_%_%'
Find any values that starts with "a" and ends with "o": WHERE ContactName LIKE 'a%o'

Import / Export

Export (with pwd): mysqldump -u username --password=password database_name > /path/to/file.sql
Export (pwd prompt): mysqldump -u username -p database_name > /path/to/file.sql
Export All (with pwd): mysqldump -u username --password=password –all-databases > /path/to/file.sql
Export All (pwd prompt): mysqldump -u username -p –all-databases > /path/to/file.sql
Import (with pwd): mysql -u username --password=password database_name < /path/to/file.sql
Import (pwd prompt): mysql -u username -p database_name < /path/to/file.sql
Import One DB From Dump (pwd prompt): mysql -u username -p --one-database database_name < /path/to/file.sql
- There are bugs related to the --one-database option: http://bugs.mysql.com/bug.php?id=40477 (can still modify other tables)
- Extract single DB from am --all-databases dump: sed -n '/^-- Current Database: dbname/,/^-- Current Database: /p' alldatabases.sql > output.sql`
  - Guy said he had to add original dump headers to avoid some errors: http://stackoverflow.com/a/25975930/1492782

Running into "foreign key" issues/errors?: Uncheck Enable foreign key checks in phpMyAdmin before importing

Check Disable foreign key checks & Add CREATE DATABASE / USE statement options for max compatibility

Error: TYPE vs ENGINE

The older TYPE option was synonymous with ENGINE. TYPE was deprecated in MySQL 4.0 and removed in MySQL 5.5. When upgrading to MySQL 5.5 or later, you must convert existing applications that rely on TYPE to use ENGINE instead.

Search & Replace: TYPE --> ENGINE

Error Code: 1062. Duplicate entry '1' for key 'PRIMARY'

Drop table & re-create before importing. This message is because 1 has already been assigned to a previous record for this table.

Error: Unknown collation

This error means your database is using a collation, which the MySQL server does not understand. This can happen, when you use a database, which has been created with a newer version of MySQL, with an older MySQL server version.

you need to change your collation. Something like ALTER TABLE myTable CONVERT TO CHARACTER SET utf8 COLLATE utf8_general_ci ... then redo your export/import

Sounds like you have an old version of MySQL? utf8mb4 came with 5.5.3; I don't know when that collation came.

Markdown

Fri, 22 Nov 2019 14:00:00 HST

Related
- Mermaid "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs."

Convert Markdown to Other Formats

Pandoc (handles TONS of formats!)
Convert Markdown to Confluence Wiki Markup

GitHub Flavored Markdown (GFM)

Escape Angle Brackets

You can write <MyComponent /> as \<MyComponent /> in GFM

https://github.com/gollum/gollum/issues/713

Collapsable Content Section

<details>
  <summary>Click to expand</summary>
  whatever
</details>

GitHub

Fri, 22 Nov 2019 14:00:00 HST

Code Highlights are done via Linguist: https://github.com/github/linguist/blob/master/lib/linguist/languages.yml
GitHub Pages
- Example Contribution Guidelines
  - From: https://github.com/aharris88/awesome-static-website-services/blob/master/contributing.md
  - Please ensure your pull request adheres to the following guidelines:
    - Search previous suggestions before making a new one, as yours may be a duplicate.
    - Make an individual pull request for each suggestion.
    - Additions should be added to the bottom of the relevant category.
    - Use the following format: [package](link) - Description.
    - New categories, or improvements to the existing categorization are welcome.
    - Keep descriptions short and simple, but descriptive.
    - Start the description with a capital and end with a full stop/period.
    - Check your spelling and grammar.
    - Make sure your text editor is set to remove trailing whitespace.
    - The pull request should have a useful title and include a link to the App and why it should be included.
  - Thank you for your suggestions!
Generic GitHub Intent to Close Issue Message
- It appears this issue may have been resolved. I prefer contributors have an opportunity to close their own issues. If you feel this issue is resolved, would you mind closing it? If the issue is not resolved or the issue needs some clarification, I'm happy to discuss. Thanks!

Link to GitHub Avatar

Get image URL from GitHub profile
Example: https://avatars2.githubusercontent.com/u/1474361?v=3&s=460

Generate New GitHub SSH Key

Generate SSH key (substitute email with GitHub email): ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
Accept Default Location (Press Enter)
Enter Passphrase (and write down somewhere safe!)
Add new SSH key to ssh-agent: ssh-add -K ~/.ssh/id_rsa
Enter Passphrase
Copy SSH key to clipboard: pbcopy < ~/.ssh/id_rsa.pub (Just copy EXACT file contents if this command fails)
Add SSH key to GitHub account: On GitHub website Account Settings > SSH keys > New SSH key

Sources:

Generating a new SSH key and adding it to the ssh-agent

Express

Fri, 22 Nov 2019 14:00:00 HST

Request Params: req.params

Hello world

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

Settings

app.set('title', 'My Site')
app.get('title') // "My Site"

app.disable('trust proxy')
app.enable('trust proxy')

app.enabled('trust proxy') //=> true

Google Chrome

Fri, 22 Nov 2019 14:00:00 HST

Toggle Bookmarks Bar: ⇧⌘B
View History: ⌘Y
View Downloads: ⇧⌘J

DevTools

Open Developer Tools: ⌥⌘I
Open Developer Tools and bring focus to the console: ⌥⌘J
Inspect Mode: ⇧⌘C
Inspect disappearing element: Set subtree breakpoint on parent element
Search DOM tree by CSS selector: When browsing the DOM with the Elements panel, try searching for nodes via CMD/Ctrl+F by their CSS selectors.
Search all source files: Use search tab in bottom drawer that is shown/hidden when ESC is pressed
Reset column sort in the Network Tab of Developer Tools:
- Right-click on any column header in the requests table (e.g., Name, Status, Size, Time)
- In the context menu that appears, click the Waterfall option
- Click Waterfall column header to toggle chronological sort order (ascending/descending)

Extension Development

Publish Chrome Extension

Resources:

Steps Followed to Publish SwiftTab:

Generate new build with latest code: npm run build
Generate Zip File of build directory
Upload extension zip file
- Go to Chrome Developer Dashboard
- Sign in to Dev account
- Click Add New Item button
- If you've never uploaded an item before, you need to accept the developer agreement before going to the next step.
- Click Choose file > your zip file > Upload. If your app's manifest and ZIP file are valid, you can edit your app on the next page.
Added App Information:
- Icon
- Screenshot
- Description
- Google Analytics ID
- Category
- Price?
Note: Took a little time after publishing:
- Status changed to Published immediately
- Showed up in search results immediately
- Extension listing took 15-60 mins to become live. 404'd until live.

Quote from Google Chrome Product Forum Post:

If you have any further questions or issues in the future with your Chrome extension on the Chrome Web Store, you can submit your question directly to the Chrome Web Store team by going to their Stack Overflow page or you can fill out this form.

Static Sites

Tue, 19 Nov 2019 14:00:00 HST

awesome-static-website-services

Tips:

avoid cross-origin issues with old-school jsonp

Why no static site?

Dynamic Features

Dynamic features typically require external services to integrate with static sites.

Admin Interface
API
CMS
Database
E-Commerce
Forms
Guest Posts
Image CDN
Reviews/Recommendations
Search
User Accounts

Hosting

GitHub Pages

Pros:

Free hosting
Free full ssl

Cons:

No 301s
No build step (autoprefixr)

Change App Display Name in React Native

Mon, 11 Nov 2019 14:00:00 HST

Android

In android/app/src/main/res/values/strings.xml change the value for app_name (replace PrevAppName):

<string name="app_name">PrevAppName</string>

iOS

In ios/<PrevAppName>/Info.plist change the value for CFBundleDisplayName (replace PrevAppName):

<key>CFBundleDisplayName</key>
<string>PrevAppName</string>

Note: If you're using the iOS launch screen that's included with React Native apps by default, it may be desireable to keep the launch screen in sync also. In ios/APP_NAME/Base.lproj/LaunchScreen.xib search and replace any instances of PrevAppName.

Expo

Mon, 11 Nov 2019 14:00:00 HST

Get Started

Install Expo CLI: npm install expo-cli --global
Create New Project: expo init MyAwesomeProject
Run Project: expo start (from project directory)
Run Project (and clear caches): expo start -c

Build Standalone App Binaries

Build (iOS): expo build:ios
Build (Android): expo build:android
Check Build Status: expo build:status

Note: We enable bitcode for iOS, so the .ipa files for iOS are much larger than the eventual App Store download available to your users. For more information, see App Thinning.

Submit to App Stores

Note: Apple will ask you whether your app uses the IDFA. Because Expo depends on Segment Analytics, the answer is yes, and you'll need to check a couple boxes on the Apple submission form. See Segment's Guide for which specific boxes to fill in.

References

WordPress

Fri, 08 Nov 2019 14:00:00 HST

Plugins

WordPress.org Plugin Directory

Add Admin CSS
Advanced Custom Fields
Custom Post Type UI
Easy WP SMTP
Ninja Forms
W3 Total Cache
WooCommerce
- Extensions
  - Product Vendors
- Themes
  - WooThemes
  - Storefront
WP Force Lowercase URLs
WP Google Analytics Events
Yoast SEO

PHP

Fri, 08 Nov 2019 14:00:00 HST

Frameworks

Terminology

Tue, 05 Nov 2019 14:00:00 HST

Terminology related to business, technology, and project management:

Acronyms

BRB: Be Right Back
COB: Close of Business
DOM: Document Object Model
EOD: End of Day
LMAO: Laughing My Ass Off
LOL: Laugh Out Loud
NSFW: Not safe for work
POC: Proof of Concept
TFW: That feeling when
TIL: Today I Learned

Terms

Spike:

A task aimed at answering a question or gathering information, rather than at producing shippable product. Sometimes a user story is generated that cannot be well estimated until the development team does some actual work to resolve a technical question or a design problem. The solution is to create a “spike,” which is some work whose purpose is to provide the answer or solution.

Security

Tue, 05 Nov 2019 14:00:00 HST

Audit Online Accounts

It's a good idea to perform a security audit of your online accounts from time-to-time:

(Google, Twitter, Facebook, Instagram, etc.)

Note: Email is most important since this is the key to all of your other accounts.

When in doubt, change your password. Have a feeling that someone might be reading your mail, but not sure which app is to blame? Changing your password instantly invalidates all your Google and Facebook OAuth tokens, though Twitter tokens persist after password changes.

Instagram

References & Resources

Nintendo Wii

Tue, 05 Nov 2019 14:00:00 HST

Information for homebrewing your Nintendo Wii:

Memory Card

4.0

If you have updated your Wii console to Wii Menu 4.0 How to or higher, then your Wii console is compatible with SD Cards that are 2 GB (Gigabyte) or less, and is also compatible with SDHC Cards up to 32 GB.

4.3

I'm personally using a: SanDisk 32GB Ultra Class 10 SDHC UHS-I Memory Card I purchased on Amazon for $10.

Emulators

NES: FCE Ultra GX
SNES: Snes9x GX
Nintendo 64: Wii64
Sega (Various): Genesis Plus

Internet Explorer

Tue, 05 Nov 2019 14:00:00 HST

Excellent list of what is supported in IE: https://devhints.io/ie

Not Supported

Custom Event (new CustomEvent('eventName'))
- Polyfill works for this
Fetch
URL API/Object
- https://www.npmjs.com/package/@publica/url-polyfill

fit-content (All versions of IE & Edge)

Issue: IE does not support fit-content ( width: fit-content;)
Fix: Replace style rule with display: table !important;

Sources:

Note: May not be supported in some versions of Edge as well. There was conflicting information between the fit-content & width pages on MDN.
The intrinsic-width page on CanIUse seems to state fit-content is not supported in the latest versions of Edge, which would insinuate that fit-content is not supported in any version of Edge (or IE).

Bugs

`<textarea>` placeholder becomes value (IE 11)

This issue is caused by a bug in IE 11 that Microsoft will not fix.

Issue: A textarea's placeholder text becomes it's actual value
Fix: Add click handler for all textarea elements, if value matches placeholder set value to empty string

$('body').on('click', 'textarea', function(e) {
  var $textarea = $(e.target);
  $textarea.val() === $textarea.attr('placeholder') && $textarea.val('');
});

// OR:

$('textarea').each(function(i) {
  var $textarea = $(this);
  $textarea.val() === $textarea.attr('placeholder') && $textarea.val('');
});

Jekyll

Sun, 03 Nov 2019 14:00:00 HST

No autoprefixr without build step
No individual pages for data records
Categories & Tags
- No individual page at /tags/burritos
- but page at /tags/ with burrito section, no problem :)
Recommended Posts?

URL & BASEURL

site.url: https://domain.com # your domain
site.baseurl: "/blog" # the path to your website (optional)

Note: For root-level sites GitHub Pages assumes site.baseurl: "".

Wrap N Items In A Row Tag

<!-- Wraps every three items in div.row -->
<!-- Closes div.row even there is not enough items -->

{% for item in site.data.your_data %}

  {% capture modulo %}{{ forloop.index | modulo: 3 }}{% endcapture %}

  {% if modulo == '1' %}
  <div class="row">
  {% endif %}
    <div class="col-sm-4">
      {{ item.name }}
    </div>
  {% if modulo == '0' or forloop.last %}
  </div>
  {% endif %}

{% endfor %}

<!-- Output: -->
<div class="row">
  <div class="col-sm-4">
    item1
  </div>
  <div class="col-sm-4">
    item2
  </div>
  <div class="col-sm-4">
    item3
  </div>
</div>
<div class="row">
  <div class="col-sm-4">
    item4
  </div>
</div>

Microsoft Edge Browser

Sun, 03 Nov 2019 14:00:00 HST

Empty Cache and Hard Reload: Developer Tools > Network (Tab) > Always Refresh from Server (4th Icon Button from Left in Toolbar)

Gmail

Sat, 02 Nov 2019 14:00:00 HST

Aliases
Filters
- SPAM keywords + NOT JAR spam digest email: (-jarbuchea@googlegroups.com) viagra cialis levitra
- Survey requests
- Reports
Labels
- Newsletters
- Read later
- Reports
- Shopping
Development
- InboxSDK - JavaScript library used to create browser extensions that interact with Gmail

Address Variants

Append a plus ("+") sign and any combination of words or numbers after your email address
Insert one or several dots (".") anywhere in your email address

If your email address is yourname@gmail.com, variations include:

your.name@gmail.com
yo.ur.na.me@gmail.com
yourname+donation@gmail.com
yourname+mailinglists@gmail.com

Keyboard Shortcuts

Turn on keyboard shortcuts

On a computer, go to Gmail
In the top right, click Settings ⚙️
Click Settings
Scroll down to the "Keyboard shortcuts" section
Select Keyboard shortcuts on
At the bottom of the page, click Save Changes

Shortcuts

Key	Description
`?`	Keyboard Shortcut Help
----	----
`!`	Report Spam
`#`	Delete
`.`	More Actions
`/`	Search
`=`	Toggle Important
`A`	Reply All
`C`	Compose
`D`	Compose (new tab)
`E`	Archive
`F`	Forward
`⇧I`	Mark Read
`J`	Next Email
`K`	Previous Email
`L`	Label As
`O`	Open
`R`	Reply
`S`	Toggle Star
`U`	Go to Inbox
`⇧U`	Mark Unread
`V`	Move To
`X`	Select
`Z`	Undo

External Access

Full Name or Display Name: Your name
Account Name, User Name, or Email address: username@gmail.com
Password: Your Gmail password

IMAP (Incoming)

imap.gmail.com
Port: 993
Requires SSL: Yes

POP3 (Incoming)

pop.gmail.com
Port: 995
Requires SSL: Yes

SMTP (Outgoing)

smtp.gmail.com
SSL Port: 465
TLS/STARTTLS Port: 587
Requires Authentication: Yes
Requires SSL: Yes
Requires TLS: Yes (if available)

References

React

Sun, 27 Oct 2019 14:00:00 HST

Conventions

One-way data flow
Single state obj
setState
render
handleEvent

Patterns

Display loading indicator until child component(s) have rendered

Include child loading indicator component (render until data is loaded)
For web, use CSS to hide loading indicator component if is not the only child:

.parent .loading-component:not(:only-child) {
  display: none;
}

Remote Work

Sun, 21 Jul 2019 14:00:00 HST

Benefits

⏳ more time
📅 flexible schedule
🚗 save time/money with no commute
🚗 family only needs one car
👔 no expensive uniforms
💄 less time/money on makeup
👖 pants optional
👨‍👩‍👧‍👦 more time with family
🚸 get kids from school
🍽 meals with family
🍔 save a fortune on lunches
🥗 healthy food options
🌡 control temperature
🔆 control lighting
🚽 private bathroom
🤧 no sick co-workers
🍻 no after-work expectations
📦 accept package deliveries
🧺 laundry during small breaks
🐕 no doggy care
📢 feel heard by colleagues

Companies

1Password
Airtable
Auth0
Automattic - all remote
Axios Media
Basecamp
Buffer
Convert.com
Datadog
DigitalOcean
Discourse
Docker
DuckDuckGo
Echobind - all remote
Egghead - all remote
Elastic
FirstbaseHQ
Formidable
Gatsby - all remote
GitHub
GitLab - all remote
Hims & Hers
HubSpot
Hubstaff
Lambda School
Infinite Red - all remote
InsideTrack
InVision
MeetEdgar
Netguru
Netlify
Red Hat
Ockam
Olark Live Chat
Puppet
SemanticBits - primarily remote
StackOverflow
Stripe
This Dot Labs
Toggl
Trello
Ultimate Software - "very remote friendly and number ONE on the Best Places to Work in Tech by @FortuneMagazine"
Unbird
Webflow
Zapier - all remote

Jobs

Resources

46+ Remote Working Statistics in 2021
900+ Startups hiring Remotely in 2019 - by Remoteive.io : UPDATED - The List of Awesome! - Google Doc
fuzz/remote - A list of companies that use distributed teams
jeanlucaslima/Readme.md - Remote Work Resources
lukas-madon/awesome-remote-job - A curated list of awesome remote jobs and resources
Remote Companies - 2,000+ companies hiring remotely (via Remotive)
Remote In Tech - A list of semi to fully remote-friendly companies in tech
Remote only
Remote Tech Jobs — 1000s of Remote Programming Jobs
The Memo - email newsletter

React Native

Thu, 18 Jul 2019 14:00:00 HST

Initialize new project

For React Native `0.60.0` or greater

Using npx:

Default template: npx react-native init ProjectName
TypeScript template: npx react-native init ProjectName --template typescript
Custom template: npx react-native init ProjectName --template ${TEMPLATE_NAME}

For older React Native versions

Using legacy react-native-cli package:

yarn global add react-native-cli
react-native init ProjectName

Run app with specific device in Simulator

Specify a simulator using the --simulator flag.

List all available iOS devices:

xcrun simctl list devices

Favorite Podcasts

Tue, 26 Feb 2019 14:00:00 HST

My favorite podcast shows and episodes:

Shows

Retired Shows:

Episodes

Holiday Films & Specials

Mon, 21 Jan 2019 14:00:00 HST

Some films and tv specials our family enjoys during the holidays:

Christmas

A Charlie Brown Christmas (1965)
A Christmas Story (1983)
Christmas Vacation (1989)
Die Hard (1988)
Elf (2003)
Frosty the Snowman (1969)
Home Alone (1990)
Home Alone 2 (1992)
How the Grinch Stole Christmas (1966)
It's A Wonderful Life (1946)
Rudolph the Red-Nosed Reindeer (1964)
The Polar Express (2004)

Easter

Hop (2011)
Rise of the Guardians (2012)

Halloween

Hocus Pocus (1993)
It's the Great Pumpkin, Charlie Brown (1966)
Monster House (2006)
SNL: Haunted Elevator (ft. David S. Pumpkins) (Oct 22, 2016)
SNL: The David S. Pumpkins Halloween Special (2017)

Thanksgiving

Free Birds (2013)
Planes, Trains and Automobiles (1987)

Dairy Free Banana Ice Cream

Thu, 30 Aug 2018 14:00:00 HST

A delicious treat that doesn't leave me with feelings of regret.

In a powerful blender (like a Vitamix or Blendtec):

2 frozen bananas, sliced
2 tbsp cocoa powder
2 tbsp vanilla almond milk
1 tbsp peanut butter (optional)

Great Video Games

Sat, 27 Jan 2018 14:00:00 HST

Below are some of my favorite video games:

Atari 2600 (1977)

Asteroids
Breakout
Centipede
Dig Dug
Donkey Kong
Frogger
Mario Bros
Millipede
Missile Command
Pac-Man
Paperboy
Pitfall!
Pole Position
Q*bert
Space Invaders
Track & Field

Nintendo NES (1983)

Battletoads
Bubble Bobble
Castlevania
Contra
Donkey Kong
Double Dragon 1-3
Duck Hunt
Excitebike
Hogan's Alley
Mega Man 1-6
Metroid
Mike Tyson's Punch-Out!!
Ninja Gaiden 1-3
R.C. Pro-Am
Shinobi
Spy Hunter
Spy vs. Spy
Super Contra
Super Mario Bros 1-3
The Legend of Zelda
Zelda II: The Adventure of Link

Nintendo SNES (1990)

Contra III: The Alien Wars
Donkey Kong Country 1-3
F-Zero
Killer Instinct
Mortal Kombat 1-3
Ninja Gaiden Trilogy
Star Fox
Street Fighter 2
Super Mario World
Super Mario World 2: Yoshi's Island
The Legend of Zelda: A Link to the Past
Uniracers

Nintendo N64 (1996)

GoldenEye 007
Hydro Thunder
Mario Kart 64
Super Mario 64
Super Smash Bros
The Legend of Zelda: Ocarina of Time
The Legend of Zelda: Majora's Mask

Nintendo GameCube (2001)

James Bond 007: Everything or Nothing

Nintendo Wii (2006)

Mario Kart Wii
Super Mario Galaxy

Sega Genesis (1989)

Road Rash 1-3
Sonic The Hedgehog
Virtua Fighter 2

Sega Dreamcast (1999)

Gauntlet Legends
Jet Set Radio
Power Stone
Soul Caliber
Star Wars: Episode I - Racer
Tony Hawk's Pro Skater

Sony Playstation 2 (2000)

ATV Offroad Fury
Gran Turismo 4
Grand Theft Auto Series
War of the Monsters

Xbox One (2013)

Knight Squad
SpeedRunners

PC

Call of Duty Series
Descent Series
Doom 1 & 2
Duke Nukem 3D
Grand Theft Auto Series
Need for Speed Series
Rise of the Triad (ROTT)
SkiFree
Snake aka Nibbles
Unreal Tournament Series
Wolfenstein 3D
Worms Armageddon

Arcade

Big Buck Hunter
Cruis'n USA
Cruis'n World
Metal Slug Series

Mac App Store Links

Fri, 15 Dec 2017 14:00:00 HST

Below is a list of Mac App Store link (macappstore://) structures I've compiled. If there's any I missed, please let me know!

During my testing, I found Mac App Store links work as expected in Safari and Firefox, but not Chrome. This could be due to my local config, your mileage may very.

Direct App Link: macappstore://itunes.apple.com/app/id425424353
Featured Tab: macappstore://
Top Charts Tab: ?
Categories Tab: ?
Updates Tab: macappstore://showUpdatesPage
Purchased Tab: macappstore://showPurchasesPage
Search: macappstore://search.itunes.apple.com/WebObjects/MZSearch.woa/wa/search?q=SEARCHTERM
Search (UTI): macappstore://search.itunes.apple.com/WebObjects/MZSearch.woa/wa/docTypeLookup?uti=YOURUTI
Search for apps that support a specific file extension: macappstore://search.itunes.apple.com/WebObjects/MZSearch.woa/wa/docTypeLookup?extension=png

Note: Mac App Store links can also be called from the command line (works without root privileges): open macappstore://showUpdatesPage

React Native - UI Kits

Mon, 17 Jul 2017 14:00:00 HST

Below is a list of all of the React Native UI kits, frameworks, and libraries I could find. If there's any I missed, please let me know!

Stop Real Mail Notification Email for USPS PO Box

Sat, 24 Jun 2017 14:00:00 HST

This past year my family and I moved from Newberg, Oregon to Bend, Oregon. When we moved we forwarded our mail to our new address and relinquished a USPS PO Box to the Newberg Post Office. Months after our move we noticed we were still receiving "Real Mail Notification" (an opt-in mail notification service) emails for the USPS PO Box we no longer had.

You'd think a service from the USPS would be simple to disable or unsubscribe from. Unfortunately that's far from the truth. No unsubscribe link in the notification emails, and no ability to manage the service from my account on the USPS website. After scouring the USPS website and paying a visit to my new local post office in Bend, I was still receiving mail notifications whenever the new owner of the PO Box received mail.

Eventually a google search and a little digging around the web and I found this little nugget in the comments section of a blog post:

I had to wade through a number of customer service reps, but apparently, you email them at realmailquestions@usps.gov with “Unsubscribe” in the subject line and in the body, write a formal request for them to discontinue the notifications.

Timeline

2016-12-21: Visited local post office in Bend
2016-12-21: Sent unsubscribe request to realmailquestions@usps.gov
2016-12-21: Received automatic reply from RealMailQuestions@usps.gov
2016-12-21: Sent unsubscribe request to POBinquiry@usps.gov
2017-02-19: Sent unsubscribe request to POBinquiry@usps.gov
2017-04-06: Received response from NoReply@uspsrmn.com (finally 🎉 🎉 🎉)

Unsubscribe Request Email

To: realmailquestions@usps.gov
Date: 2016-12-21
Subject: Unsubscribe
Body:

PLEASE UNSUBSCRIBE ME FROM REAL MAIL NOTIFICATIONS

To whom it concerns,

I am writing to formally request that Real Mail Email Notifications be disabled for the PO Box at: PO Box 1102, Newberg, OR 97132. I would also like to remove my signature on file if that is possible.

I signed up for Real Mail notifications on 6/25/2014 and relinquished the PO Box to the USPS on 8/8/2015 when I moved from Newberg, OR to Bend, OR.

The associated account information is:

Customer Name: Joshua Buchea

PO Box Number: 1102

PO Box Zip Code: 97132810202

Signature On File: Yes

Real Mail Notification: Yes

Street Addressing: Yes

Email Address: ***@buchea.com

Thank you for your time and effort,

Josh Buchea

Response #1

From: RealMailQuestions@usps.gov
Date: 2016-12-21
Subject: Unsubscribe
Body:

Thank you for your inquiry. In order to resolve your concern as quickly as possible, please see below for directions that best describe your situation.

If you receive Real Mail Notification text message or email alerts for PO Box deliveries, please contact POBinquiry@usps.gov for assistance.
If you are receiving alerts regarding packages being delivered to your physical address, please visit www.usps.com/help for assistance.
If you receive Informed Delivery service, please visit www.uspsinformeddelivery.com/RMQ for assistance. You may also access this support site by following the link in the bottom of your Informed Delivery Daily Digest.

Response #2 - Success 🎉 🎉 🎉

From: NoReply@uspsrmn.com
Date: 2017-04-06
Subject: USPS Real Mail Notification Termination
Body:

Your Real Mail Notification service has been terminated.

Customer Name: Joshua Buchea

PO Box Number: 1102

PO Box Zip Code:

This is an automated email message. Please do NOT reply to this email.

References

Easter Movies

Sat, 15 Apr 2017 14:00:00 HST

A list of Easter movies I compiled while searching for movies to watch with my family over the 2017 Easter holiday.

For Kids and Families

For Adults

Hank and Mike (2008)

Horror

References:

Wget - Create Website Mirror

Wed, 05 Apr 2017 14:00:00 HST

Use the command below to create a local offline-capable mirror of an entire website:

wget \
  --mirror \
  --page-requisites \
  --adjust-extension \
  --convert-links \
  --no-parent \
  --wait=1 \
  www.example.com

OR use the short version: wget -mpEknp -w 1 www.example.com

Note: In the short version you'll notice p twice in the flags. This is because the last p is part of np (--no-parent).

Option	Description
`-m --mirror`	Turns on recursion and time-stamping, sets infinite recursion depth and keeps FTP directory listings (Shorthand for `-r -l inf -N`)
`-p --page-requisites`	Download things like CSS style-sheets and images required to properly display the page offline.
`-E --adjust-extension`	Adds suitable extensions to filenames (.html or .css) depending on their content-type.
`-k --convert-links`	Convert all the links (also to stuff like CSS stylesheets) to relative, so it will be suitable for offline viewing.
`-np --no-parent`	When recursing do not ascend to the parent directory. It useful for restricting the download to only a portion of the site.
`-w --wait`	Wait the specified number of seconds between the retrievals.
`-r --recursive`	Turn on recursive retrieving. The default maximum depth is 5.
`-l inf`	‘-l 0’ is equivalent to ‘-l inf’ — that is, infinite recursion
`-N --timestamping`	Turn on time-stamping

References:

Wget Manual

Homebrew

Wed, 22 Feb 2017 14:00:00 HST

Homebrew-Cask
- https://caskroom.github.io/
- https://github.com/caskroom/homebrew-cask/blob/master/USAGE.md
- Get Homebrew Cask: brew tap caskroom/cask
- List available Casks: brew cask search or visit https://caskroom.github.io/search and use * as search string
- List outdated Casks: brew cask outdated
- Update Casks (just Casks repo, not Casks themselves): brew update
- Install app with Cask: brew cask install app-name
- Upgrade single app with Cask: brew cask reinstall app-name
- Upgrade all apps with Cask: brew cask upgrade
- TODO: Test upgrade single app with Cask (thinking this may update all Cask apps): brew cask upgrade app-name
Maintenance
- Run three commands below to get Homebrew and formulae 💯
- Update formulae and Homebrew: brew update (updates brew cask repo also)
- Upgrade everything: brew upgrade
- Uninstall old formulae: brew cleanup or brew cleanup <formula>
- Brew Doctor: brew doctor
Brew Cask Error: Unknown command: cask
- Recommended by @adidalal in a GitHub Issue thread:
- You shouldn't need to tap anything manually, we're now kept up-to-date with Homebrew itself.
- To make sure/if you have any issues, first try:
```
brew update; brew cleanup; brew cask cleanup
brew uninstall --force brew-cask; brew update
```
  - Performing the above steps along with ensuring the Xcode command line tools were installed resolved my Brew Cask issues :)
  - sudo xcode-select --install
Homebrew Formulas
Search Brew

Commands

List Packages: brew list
Get Package Info brew info package_name
Pin Package (lock at current version): brew pin package_name
Uninstall Package: brew uninstall package_name
Remove cask & prefs: brew cask zap cask_name

Update Homebrew & Packages

Update Homebrew: brew update
Update Packages: brew upgrade

Services

List services: brew services list
Start service: brew services start SERVICE_NAME
Stop service: brew services start SERVICE_NAME
Restart service: brew services restart SERVICE_NAME

Atom

Wed, 22 Feb 2017 14:00:00 HST

Keyboard Shortcuts

Edit
- Move Line Up: ^⌘ + Up
- Move Line Down: ^⌘ + Down
- Duplicate Lines: ⇧⌘D
Find
- Find File: ⌘P
- Select Next: Select text, then ⌘D
- Select All: Select text, then ^⌘G
Select
- Split into Lines: ⇧⌘L
Packages
- Command Palette
  - Toggle: ⇧⌘P
- Symbols
  - File Symbols: ⌘R

Package Manager

I use the Stars functionality to keep a list of the packages I use:

Star all installed packages (you will be prompted for an API token from https://atom.io/account): apm star --installed
List starred packages: apm stars or apm starred
Install all starred packages: apm stars --install or apm starred --install

Snippets

Selectors

ALL Selector: *
HTML Selector: .text.html.basic (not .source.html)
PHP Selector: .text.html.php (not .source.php)
CSS Selector: .source.css
JS Selector: .source.js
Markdown Selector: .text.md

Show closing brace/tag when folding code blocks

Add below code to ~/.atom/config.cson:

".basic.html.text":
  editor:
    foldEndPattern: ""
".css.source":
  editor:
    foldEndPattern: ""
".html.php.text":
  editor:
    foldEndPattern: ""
".js.jsx.source":
  editor:
    foldEndPattern: ""
".js.source":
  editor:
    foldEndPattern: ""

Note: This doesn't seem to work with a wildcard for the source type.

Found the answer in this Atom issue thread on GitHub: https://github.com/atom/atom/issues/11179

Hide Ignored Names In Tree View

Hide files & directories in Tree View that match glob patterns in Settings > Core > Ignored Names:

Preferences > Settings > Packages > Tree View > Hide Ignored Names

App Store Badges

Sat, 18 Feb 2017 14:00:00 HST

This page includes links to the official websites where you can download app store badges and icons.

The official websites typically provide:

Usage guidelines
Ability to customize
SVGs and EPS vector files
Localized versions in other languages

PNG files for the English version of the badges are included here for your convenience.

Apple App Store (iOS)

Official App Badges from Apple

Google Play Store (Android)

Official App Badges from Google

Microsoft Store (Windows)

Official App Badges from Microsoft

ImageMagick - PSD to PNG

Thu, 02 Feb 2017 14:00:00 HST

Make sure ImageMagick is installed on your system and open up a terminal:

Convert entire PSD to one PNG file: convert 'image.psd[0]' image.png (keep the [0] there)
Output all layers (cropped) to individual PNG files: convert image.psd image-%d.png

Revert ssh-agent behavior pre macOS Sierra

Wed, 21 Dec 2016 14:00:00 HST

Recently, after updating my workstation to macOS Sierra, I discovered that Apple changed the default behavior of ssh-agent. It no longer auto-loads all the keys stored in Keychain that were added with ssh-add -K. I was able to revert to the pre macOS behavior of ssh-agent by creating a file ~/.ssh/config with the following contents:

Host *
  UseKeychain yes
  AddKeysToAgent yes
  IdentityFile ~/.ssh/id_rsa

Optionally replace ~/.ssh/id_rsa with the path to your key. To add additional keys, add a new line for each key with: IdentityFile /path/to/your_key.

References:

Difficulties with ssh-agent in macOS Sierra

React Native - Books

Sat, 26 Nov 2016 14:00:00 HST

A list of React Native books on Amazon:

Google Maps

Fri, 14 Oct 2016 14:00:00 HST

API v3

Examples

Multiple Markers

<html>
<head>
  <title>Google Maps API v3 Multiple Markers</title>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
</head>
<body>
  <div id="map" style="height: 400px; width: 500px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

Change marker icon color

Use setIcon:

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');

Or as part of marker init:

marker = new google.maps.Marker({
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png'
});

Valid marker icon filenames are:

Blue: blue-dot.png
Red: red-dot.png
Purple: purple-dot.png
Yellow: yellow-dot.png
Green: green-dot.png

More icon & color choices: https://sites.google.com/site/gmapsdevelopment/

Info Window content is missing/hidden

.gm-style-iw div { overflow: visible !important; }

Mac Enable Xdebug in MAMP

Sat, 20 Aug 2016 14:00:00 HST

Below are the steps necessary to enable Xdebug in MAMP (non-pro version) for Mac.

Step 1: Determine PHP Version

In MAMP, press Open start page
View phpinfo to get PHP version
Note which PHP version you have

Step 2: Configure php.ini

MAMP has two configuration files for each PHP version:

/Applications/MAMP/conf/php[version]/php.ini
/Applications/MAMP/bin/php/php[version]/conf/php.ini

Locate the xdebug section at the bottom of both of these files
Uncomment zend_extension line in both files (remove the ;)
Add the following lines to the xdebug section in both files:

xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_connect_back=1    # Not safe for production servers
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=true

Result should look something like:

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php7.0.8/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"
xdebug.remote_enable=1
xdebug.remote_host=127.0.0.1
xdebug.remote_connect_back=1    # Not safe for production servers
xdebug.remote_port=9000
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_autostart=true

Step 3: Restart MAMP!

Restart MAMP and Xdebug should be all set for whatever environment you use!
Visit the page you desire to debug with ?XDEBUG_SESSION_START=xdebug appended to the URL.

CSS Disable Text Selection

Wed, 27 Jul 2016 14:00:00 HST

.disable-selection {
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
    -webkit-user-select: none; /* Chrome, Safari, and Opera */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer */
}

Animated GIFs

Mon, 25 Jul 2016 14:00:00 HST

Animated GIF solutions:

Mac - Single Command Web Server

Mon, 04 Jul 2016 14:00:00 HST

Running the following command will start a web server in the current directory:

python -m SimpleHTTPServer 8000

OR for python3 use:

python3 -m http.server

Then visit http://localhost:8000/ in your browser.

React Native - Text Size & Font Scaling

Mon, 27 Jun 2016 14:00:00 HST

In React Native, a default behavior of the <Text> Component is to respect the Text Size accessibility setting on iOS.

In a perfect world, your app would be 100% accessible and the UI would gracefully adapt to any text size. In reality, parts of your app's UI may break if the text size is adjusted. To disable this behavior on a <Text> Component, set it's allowFontScaling prop to false:

<Text allowFontScaling={false}>
  Hi! I will not change. I don't respect settings.
</Text>

<Text>
  Hi! I may change. By default, I respect the Text Size accessibility setting on iOS.
</Text>

Note: Most icon fonts (like react-native-vector-icons) are affected by font scaling. And last I checked, font scaling behavior isn’t present in the iOS Simulator; only physical devices. That makes this behavior easy to miss during development.

React Native - Set RootView Background Color

Sat, 09 Apr 2016 14:00:00 HST

In the RootView of a React Native app, the default background color is white. We can change this to another color by following the steps below.

Note: Changing the background color may resolve issues related to launch screen flicker/flash and background color during orientation change.

iOS

Open AppDelegate.m located in PROJECT_DIR/ios/AppName/
Locate line that matches or is similar to: rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
Adjust UIColor values!

UIColor is a handy website that can be used to convert HEX & RGB colors to UIColor for both Objective-C and Swift.

Static Sites - Forms

Tue, 22 Dec 2015 14:00:00 HST

A few form processing solutions for static sites (Jekyll, GitHub Pages, etc.):

Third-party options

elFormo (Free for 1500 submissions per month)
FormKeep ($19 per form per month)
Formspree (Free for 1000 submissions per month)
Simple Form (Free)
Wufoo (Free for 100 submissions per month)

Convert Plist to JSON

Mon, 27 Jul 2015 14:00:00 HST

As long as you have Xcode installed, you can simply do:

plutil -convert json Data.plist -o Data.json

Or go one step further and create a Service with Automator:

for f in "$@"
do
  filename="${f%.*}"
  plutil -convert json "$filename".plist -o "$filename".json
done

Open Automator and create a new workflow with Service type.
Choose Run Shell Script.
Copy the above code snippet to the code field.
Save the workflow. The name of the workflow is up to you, it will become the service name.

Now, just choose a .json file in Finder, pop up the context menu, choose Convert to json (or whatever name you just gave), and there should be a .plist file of the same name in the same directory.

CSS Font Smoothing

Sun, 21 Jun 2015 14:00:00 HST

If fonts on your website appear to be rendering "thicker" in Webkit or Firefox than they do in other applications (Photoshop, other browsers, etc.), the issue may be resolved by enabling font smoothing. Font smoothing can be enabled for Webkit & Firefox with the following CSS:

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Twitter (iOS) - Remove App Icon Badge

Fri, 05 Jun 2015 14:00:00 HST

I get a little obsessive about clearing App Icon Badges on iOS and find them to be distracting, so I prefer to disable them.

How to disable an App Icon Badge for any iOS app:

Settings > Notifications > [App Name] > Badge App Icon > Disable

That's great but what about when your Twitter App Icon Badge App setting is missing? Bring back the setting by turning off Badging in the Twitter app:

Twitter > Me (Profile) > Settings (Gear Icon) > General > Badge App Icon > Turn Off

Cordova - Emulate Target Specific Device

Sun, 24 May 2015 14:00:00 HST

Target a specific device:

cordova emulate ios --target="iPad-2"

Available iOS targets (case sensitive):

iPhone-4s
iPhone-5
iPhone-5s
iPhone-6-Plus
iPhone-6
iPad-2
iPad-Retina
iPad-Air
Resizable-iPhone
Resizable-iPad

Deprecated iOS targets (case insensitive):

iPhone (Retina 3.5-inch)
iPhone (Retina 4-inch)
iPhone
iPad
iPad (Retina)