mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-26 04:45:22 -04:00
pass mdx images through next/image for full optimization benefits
This commit is contained in:
parent
32d1683e51
commit
6436a34c59
GPG Key ID:
2B0C9CF251E69A39
28
components/embeds/Code.tsx
Normal file
28
components/embeds/Code.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const CustomCode = (props: any) => {
|
||||
if (props.className?.split(" ").includes("hljs")) {
|
||||
const CopyButton = dynamic(() => import("../clipboard/CopyButton"));
|
||||
|
||||
// full multi-line code blocks with highlight.js and copy-to-clipboard button
|
||||
return (
|
||||
<div>
|
||||
<CopyButton source={props.children} />
|
||||
<code {...props}>{props.children}</code>
|
||||
<style jsx>{`
|
||||
div {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
overflow-x: scroll;
|
||||
margin: 1em 0;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
// inline code in paragraphs, headings, etc. (not highlighted)
|
||||
return <code {...props}>{props.children}</code>;
|
||||
}
|
||||
};
|
||||
|
||||
export default CustomCode;
|
||||
25
components/embeds/Image.tsx
Normal file
25
components/embeds/Image.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
import Image from "next/image";
|
||||
|
||||
import type { ImageProps } from "next/image";
|
||||
|
||||
// TODO: infer ratio when given zero/one dimensions
|
||||
// TODO: fold figure/figcaption tags into this component
|
||||
|
||||
const CustomImg = (props: ImageProps) => {
|
||||
return (
|
||||
// the required height and width are part of the props, so they get automatically passed here with {...props}
|
||||
<div className={props.className}>
|
||||
<Image
|
||||
src={props.src}
|
||||
layout="intrinsic"
|
||||
width={props.width}
|
||||
height={props.height}
|
||||
alt={props.alt}
|
||||
quality={85}
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomImg;
|
||||
19
components/embeds/Link.tsx
Normal file
19
components/embeds/Link.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import type { LinkProps } from "next/link";
|
||||
|
||||
type CustomLinkProps = LinkProps & {
|
||||
target?: string;
|
||||
rel?: string;
|
||||
className?: string;
|
||||
children?: unknown;
|
||||
};
|
||||
const CustomLink = ({ href, target, rel, className, children }: CustomLinkProps) => (
|
||||
<Link href={href} passHref={true}>
|
||||
<a className={className} target={target} rel={rel}>
|
||||
{children}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
||||
export default CustomLink;
|
||||
@ -1,67 +0,0 @@
|
||||
import dynamic from "next/dynamic";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
import type { LinkProps } from "next/link";
|
||||
import type { ImageProps } from "next/image";
|
||||
|
||||
// The following components are all passed into <MDXComponent /> in [slug].tsx as replacements for vanilla HTML tags.
|
||||
|
||||
type CustomLinkProps = LinkProps & {
|
||||
target?: string;
|
||||
rel?: string;
|
||||
className?: string;
|
||||
children?: unknown;
|
||||
};
|
||||
const CustomLink = ({ href, target, rel, className, children }: CustomLinkProps) => (
|
||||
<Link href={href} passHref={true}>
|
||||
<a className={className} target={target} rel={rel}>
|
||||
{children}
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
|
||||
type CustomImgProps = ImageProps & {
|
||||
caption?: unknown;
|
||||
};
|
||||
const CustomImg = (props: CustomImgProps) => (
|
||||
// the required height and width are part of the props, so they get automatically passed here with {...props}
|
||||
<div className={props.className}>
|
||||
{/* eslint-disable-next-line jsx-a11y/alt-text */}
|
||||
<Image {...props} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const CustomCode = (props: any) => {
|
||||
if (props.className?.split(" ").includes("hljs")) {
|
||||
const CopyButton = dynamic(() => import("./clipboard/CopyButton"));
|
||||
|
||||
// full multi-line code blocks with highlight.js and copy-to-clipboard button
|
||||
return (
|
||||
<div>
|
||||
<CopyButton source={props.children} />
|
||||
<code {...props}>{props.children}</code>
|
||||
<style jsx>{`
|
||||
div {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
overflow-x: scroll;
|
||||
margin: 1em 0;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
// inline code in paragraphs, headings, etc. (not highlighted)
|
||||
return <code {...props}>{props.children}</code>;
|
||||
}
|
||||
};
|
||||
|
||||
// These are the actual tags referenced in mdx files:
|
||||
const mdxComponents = {
|
||||
a: CustomLink,
|
||||
img: CustomImg,
|
||||
code: CustomCode,
|
||||
};
|
||||
|
||||
export default mdxComponents;
|
||||
@ -11,11 +11,17 @@ tags:
|
||||
image: "/static/images/notes/bernie-sanders-bern-app-data/sad-bernie.jpg"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
import Video from "./components/embeds/Video";
|
||||
|
||||
The team behind Bernie Sanders' 2020 campaign [released a new web app](https://www.nbcnews.com/politics/2020-election/bernie-sanders-2020-campaign-unveils-app-increase-its-voter-database-n999206) last month named [BERN](https://app.berniesanders.com/). The goal of BERN is simple: to gather as much information as they can on as many voters in the United States as they can, and make their grassroots army of enthusiastic supporters do the work. It's undoubtedly a smart strategy, but also a concerning one for myself and other privacy advocates.
|
||||
|
||||
<img src="/static/images/notes/bernie-sanders-bern-app-data/sad-bernie.jpg" width="865" height="433" alt="Sad Bernie" />
|
||||
<Image
|
||||
src="/static/images/notes/bernie-sanders-bern-app-data/sad-bernie.jpg"
|
||||
width="865"
|
||||
height="433"
|
||||
alt="Sad Bernie"
|
||||
/>
|
||||
|
||||
BERN has two features: one called "Friend-to-Friend" (described as "add everyone in your network") and another called "Community Canvassing" (described as "talk to people around you every day, e.g. on the bus, outside the grocery store, at a park"). Both of these involve phoning home to Sanders HQ with the following information on anybody you know or meet:
|
||||
|
||||
@ -62,7 +68,7 @@ Here's one of the instructional videos provided internally to volunteers:
|
||||
|
||||
...and a few privacy-related questions about the friend-to-friend feature were answered by campaign staff in a separate closed webinar for volunteers this week:
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/bernie-sanders-bern-app-data/webinar-qa-1.png"
|
||||
width="400"
|
||||
@ -70,7 +76,7 @@ Here's one of the instructional videos provided internally to volunteers:
|
||||
alt="Q&A 1"
|
||||
/>
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/bernie-sanders-bern-app-data/webinar-qa-2.png"
|
||||
width="400"
|
||||
@ -83,7 +89,7 @@ Defenders of the BERN app have pointed out that the information used is already
|
||||
There were even unverified claims that [BERN was leaking voter ID numbers](https://info.idagent.com/blog/bern-app-exposes-150m-voter-records), which are the same as one's driver's license ID numbers in some states, through JSON responses in the first few days after its release. There don't be appear to be strict rate limits on calls to the API either, potentially inviting malicious actors from around the world — wink wink — to scrape personal data on tens of millions of Americans en masse.
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/bernie-sanders-bern-app-data/json-response.jpg"
|
||||
width="865"
|
||||
height="369"
|
||||
@ -98,7 +104,7 @@ But the latter category of databases — like [NationBuilder](https://nationbuil
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="/static/images/notes/bernie-sanders-bern-app-data/sanders-campaign-audit.pdf">
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/bernie-sanders-bern-app-data/votebuilder-audit.png"
|
||||
width="750"
|
||||
height="447"
|
||||
@ -115,7 +121,7 @@ But the latter category of databases — like [NationBuilder](https://nationbuil
|
||||
BERN is taking this to an unprecedented level. Allowing anybody on the internet to sign up and add others' personal information to the campaign's database without their knowledge is troubling, especially when you consider the gamified "points" system they've added as an incentive to report as much information on as many people as possible.
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/bernie-sanders-bern-app-data/reddit-bros.png"
|
||||
width="600"
|
||||
height="301"
|
||||
@ -134,7 +140,7 @@ BERN is taking this to an unprecedented level. Allowing anybody on the internet
|
||||
|
||||
In addition to the points system, it was revealed in the webinar mentioned above that the campaign is planning on giving out shiny rewards based on how many friends one adds, setting expectations at 50+ contacts to reach the "Bernie Super Bundler" tier — whatever that means.
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/bernie-sanders-bern-app-data/webinar-slide-1.png"
|
||||
width="700"
|
||||
@ -144,7 +150,7 @@ In addition to the points system, it was revealed in the webinar mentioned above
|
||||
|
||||
In the middle of the webinar, the organizer also paused the presentation for _fifteen minutes_ — complete with a countdown clock — and told volunteers to race to add as many of their friends as possible in that time. She announced afterwards that participants added 20 to 40 friends into the app on average, with some allegedly adding close to 100 in fifteen minutes.
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/bernie-sanders-bern-app-data/webinar-slide-2.png"
|
||||
width="700"
|
||||
|
||||
@ -11,11 +11,12 @@ tags:
|
||||
image: "/static/images/notes/cloudflare-dns-archive-is-blocked/archive-is.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
import Tweet from "./components/embeds/Tweet";
|
||||
|
||||
**tl;dr:** No. Quite the opposite, actually — [Archive.is](https://archive.is/)'s owner is intentionally blocking 1.1.1.1 users.
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/cloudflare-dns-archive-is-blocked/archive-is.png"
|
||||
width="865"
|
||||
height="180"
|
||||
|
||||
@ -12,7 +12,9 @@ tags:
|
||||
image: "/static/images/notes/cool-bash-tricks-for-your-terminal-dotfiles/terminal.png"
|
||||
---
|
||||
|
||||
<img
|
||||
import Image from "./components/embeds/Image";
|
||||
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/cool-bash-tricks-for-your-terminal-dotfiles/terminal.png"
|
||||
width="320"
|
||||
|
||||
@ -11,8 +11,9 @@ tags:
|
||||
image: "/static/images/notes/coronavirus-open-source/covid19dashboards.png"
|
||||
---
|
||||
|
||||
import Octocat from "./components/embeds/Octocat";
|
||||
import Image from "./components/embeds/Image";
|
||||
import Video from "./components/embeds/Video";
|
||||
import Octocat from "./components/embeds/Octocat";
|
||||
|
||||
We're all quickly learning that worldwide pandemics can bring out both [the best](https://www.vox.com/culture/2020/3/13/21179293/coronavirus-italy-covid19-music-balconies-sing) and [the worst](https://twitter.com/9NewsAUS/status/1236088663093608448) of humanity. But one thing has become readily apparent to me — outside of the large teams of medical professionals risking their lives right this minute, the open source community stands alone in its ability to rapidly organize in the midst of chaos to give back to the world and, in this case, make it safer for all of us.
|
||||
|
||||
@ -26,7 +27,7 @@ The maintainers are also [fully transparent](https://covidtracking.com/about-tra
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://covidtracking.com/" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/coronavirus-open-source/covidtracking.png"
|
||||
width="680"
|
||||
@ -44,7 +45,7 @@ _Please_ look up your local hospitals on [#findthemasks](https://findthemasks.co
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://findthemasks.com/" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/coronavirus-open-source/findthemasks.png"
|
||||
width="600"
|
||||
@ -62,7 +63,7 @@ The [GitHub community](https://github.com/flore2003/staythefuckhome/pulls?q=is%3
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://staythefuckhome.com/" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/coronavirus-open-source/staythefuckhome.png"
|
||||
width="600"
|
||||
@ -78,7 +79,7 @@ This collection of various visualizations is fascinating (and sobering) to look
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://covid19dashboards.com/" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/coronavirus-open-source/covid19dashboards.png"
|
||||
width="580"
|
||||
@ -94,7 +95,7 @@ CoronaTracker is a _beautiful_ cross-platform app for iOS and macOS with intuiti
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://coronatracker.samabox.com/" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/coronavirus-open-source/coronatracker.png"
|
||||
width="865"
|
||||
height="417"
|
||||
@ -109,7 +110,7 @@ A bit more family-friendly than [#StayTheFuckHome](https://staythefuckhome.com/)
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://stayinghome.club/" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/coronavirus-open-source/stayinghome.png"
|
||||
width="600"
|
||||
@ -125,7 +126,7 @@ This one is a bit over my head, but apparently [Nextstrain](https://nextstrain.o
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://nextstrain.org/ncov" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/coronavirus-open-source/nextstrain.png"
|
||||
width="865"
|
||||
height="345"
|
||||
@ -145,7 +146,7 @@ Johns Hopkins University's [visual COVID-19 global dashboard](https://www.arcgis
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/coronavirus-open-source/hopkins.png"
|
||||
width="865"
|
||||
height="426"
|
||||
@ -162,7 +163,7 @@ The maintainers at the [Neher Lab in Basel, Switzerland](https://neherlab.org/)
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://neherlab.org/covid19/" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/coronavirus-open-source/scenarios.png"
|
||||
width="740"
|
||||
@ -178,7 +179,7 @@ Similar to the [COVID Tracking Project](https://covidtracking.com/) above, the [
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://coronadatascraper.com/#home" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/coronavirus-open-source/coronadatascraper.png"
|
||||
width="750"
|
||||
@ -209,7 +210,7 @@ To wrap this list up, I thought I'd include [yet another API](https://github.com
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/coronavirus-open-source/tracker-api.png"
|
||||
width="712"
|
||||
|
||||
@ -11,13 +11,14 @@ tags:
|
||||
image: "/static/images/notes/dropping-dropbox/email.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
import Tweet from "./components/embeds/Tweet";
|
||||
import Video from "./components/embeds/Video";
|
||||
|
||||
I've been a loyal Dropbox user since its inception as a [Y Combinator startup](https://www.ycombinator.com/apply/dropbox/) ten years ago. Having a folder on all of my devices that instantly synchronized with each other was a game-changer for me, and I grew dependent on it more and more as they gave out free storage like candy — 48 GB for having a Samsung Chromebook, 1 GB for "Posting \<3 to Twitter," and so on — until I needed to upgrade to Dropbox Pro. But this month I canceled my Pro subscription after a few too many strikes.
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/dropping-dropbox/email.png"
|
||||
width="504"
|
||||
height="223"
|
||||
@ -61,7 +62,7 @@ Decisions made by the top folks at Dropbox gave me an increasingly sour taste in
|
||||
|
||||
The infamous [Apple Ecosystem™](https://medium.com/swlh/the-irresistible-lure-of-the-apple-ecosystem-81bf8d66294a) has held me firmly in its grasp for over a decade now, and the main requirement of a replacement cloud storage service for me was smooth interoperability between my MacBook, iPhone, and iPad.
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/dropping-dropbox/icloud-storage.png"
|
||||
width="865"
|
||||
height="137"
|
||||
@ -70,7 +71,7 @@ The infamous [Apple Ecosystem™](https://medium.com/swlh/the-irresistible-lure-
|
||||
|
||||
I've never been a proponent of leaving all your eggs in one basket. But it's hard to ignore the convenience of Apple's streamlined (and [finally](https://www.imore.com/developers-encounter-major-icloud-issues-ios-13-beta) reliable) [**iCloud Drive**](https://www.apple.com/icloud/), which is already installed on all of my devices (and actually cheaper than Dropbox gigabyte-for-gigabyte, at \$9.99/month for 2 TB). In fact, it's nearly invisible on macOS: I can simply save files in my Documents or Desktop folders as I always have and they're uploaded in the background. Git repositories now sync just fine and my files reappeared without a hitch after I recently formatted my Mac.
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/dropping-dropbox/icloud-drive.png"
|
||||
width="680"
|
||||
|
||||
@ -11,12 +11,14 @@ tags:
|
||||
image: "/static/images/notes/finding-candidates-subdomain-takeovers/hackerone-2.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
|
||||
A **subdomain takeover** occurs when a subdomain (like _example_.jarv.is) points to a shared hosting account that is abandoned by its owner, leaving the endpoint available to claim for yourself.
|
||||
|
||||
Not only are takeovers a fun way to dip your toes into [penetration testing](https://www.cloudflare.com/learning/security/glossary/what-is-penetration-testing/), but they can also be incredibly lucrative thanks to [bug bounty programs](https://en.wikipedia.org/wiki/Bug_bounty_program) on services like [HackerOne](https://hackerone.com/hacktivity?order_direction=DESC&order_field=popular&filter=type%3Aall&querystring=subdomain%20takeover) and [Bugcrowd](https://bugcrowd.com/programs), where corporations pay pentesters for their discoveries.
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/finding-candidates-subdomain-takeovers/hackerone-2.png"
|
||||
width="620"
|
||||
height="347"
|
||||
|
||||
@ -11,9 +11,10 @@ tags:
|
||||
image: "/static/images/notes/github-actions/actions-flow.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
import Gist from "./components/embeds/Gist";
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/github-actions/actions-flow.png"
|
||||
width="780"
|
||||
@ -26,7 +27,7 @@ Since being accepted into the beta for [GitHub Actions](https://github.com/featu
|
||||
My favorite so far is my [Lighthouse Audit action](https://github.com/jakejarvis/lighthouse-action), which spins up a headless Google Chrome instance in an Ubuntu container and runs [Google's Lighthouse tool](https://developers.google.com/web/tools/lighthouse), which scores webpages on performance, accessibility, SEO, etc. and provides actual suggestions to improve them. It's a perfect example of the power of combining containers with Git workflows.
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/github-actions/lighthouse-output.png"
|
||||
width="750"
|
||||
height="297"
|
||||
@ -67,7 +68,7 @@ Using an action is also surprisingly simple, and more intuitive than [Travis CI]
|
||||
|
||||
For a more complex example, when I forked [Hugo](https://github.com/gohugoio/hugo) (the static site generator used to build this website) to make some small personalized changes, I also translated [their `.travis.yml` file](https://github.com/gohugoio/hugo/blob/master/.travis.yml) into a [`workflow.yml` file](https://github.com/jakejarvis/hugo-custom/blob/master/.github/workflows/workflow.yml) for practice, which simultaneously runs comprehensive unit tests on **three operating systems** (Ubuntu 18.04, Windows 10, and macOS 10.14) with the latest two Go versions _each!_ If the tests are all successful, it builds a Docker image and pushes it to both [Docker Hub](https://hub.docker.com/r/jakejarvis/hugo-custom) and the [GitHub Package Registry](https://github.com/jakejarvis/hugo-custom/packages) (also [in beta](https://github.com/features/package-registry)).
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/github-actions/hugo-logs.png"
|
||||
width="865"
|
||||
height="418"
|
||||
|
||||
@ -12,9 +12,15 @@ tags:
|
||||
image: "/static/images/notes/github-rename-master/github-default.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
import Tweet from "./components/embeds/Tweet";
|
||||
|
||||
<img src="/static/images/notes/github-rename-master/blm-topic.png" width="865" height="162" alt="Black lives matter." />
|
||||
<Image
|
||||
src="/static/images/notes/github-rename-master/blm-topic.png"
|
||||
width="865"
|
||||
height="162"
|
||||
alt="Black lives matter."
|
||||
/>
|
||||
|
||||
In the midst of this year's long-overdue support of the [**Black Lives Matter**](https://blacklivesmatters.carrd.co/) movement and calls to action in the US and around the world, a [new spotlight](https://mail.gnome.org/archives/desktop-devel-list/2019-May/msg00066.html) has been placed on unchecked invocations of racially charged language in the computer science world, no matter how big or small — like the long-standing and, until recently, widely accepted terms ["master" and "slave"](https://tools.ietf.org/id/draft-knodel-terminology-00.html#master-slave) as an oppressive metaphor for ownership/importance.
|
||||
|
||||
@ -55,7 +61,7 @@ You can verify this worked by running `git branch -r`. You should see something
|
||||
|
||||
Setting the default branch remotely is the only step that can't be done on the command line (although you can technically [use the GitHub API](https://github.com/erbridge/github-branch-renamer)). Head to **Settings → Branches** on GitHub to [change the default branch](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/changing-the-base-branch-of-a-pull-request).
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/github-rename-master/github-default.png"
|
||||
width="810"
|
||||
@ -79,7 +85,7 @@ Do a quick search of your codebase for `master` to manually replace any dead ref
|
||||
|
||||
Pay attention to CI files — `.travis.yml`, `.github/workflows/`, `.circleci/config.yml`, etc. — and make sure there aren't any external services relying on `master` being there. For example, I almost forgot to change the branch [Netlify triggers auto-deploys](https://docs.netlify.com/site-deploys/overview/#branches-and-deploys) from to build this site:
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/github-rename-master/netlify-deploy.png"
|
||||
width="720"
|
||||
|
||||
@ -12,10 +12,11 @@ tags:
|
||||
image: "/static/images/notes/how-to-backup-linux-server/apocalypse.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
import Tweet from "./components/embeds/Tweet";
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/how-to-backup-linux-server/apocalypse.png"
|
||||
width="865"
|
||||
height="303"
|
||||
|
||||
@ -12,6 +12,8 @@ tags:
|
||||
image: "/static/images/notes/how-to-pull-request-fork-github/step7-2.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
|
||||
<svg width="150" height="150" viewBox="0 0 40 40" style={{ float: "right", marginBottom: "6px", marginLeft: "12px" }}>
|
||||
<path d="M6.5 35v-4.8c0-5.4 4.3-9.7 9.7-9.7h7.6c5.4 0 9.7-4.3 9.7-9.7V6M6.5 32.5v-26" fill="none" stroke="#a3b7cc" />
|
||||
<path d="M6.5 10.5a4 4 0 110-8 4 4 0 010 8z" fill="#8bb7f0" />
|
||||
@ -34,7 +36,7 @@ Starting from the very beginning, we'll fork an existing repository to our accou
|
||||
|
||||
Assuming you're using GitHub, this step is easy. Just find the repository you're contributing to and press the Fork button in the upper left. This will create an exact copy of the repository (and all of its branches) under your own username.
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/how-to-pull-request-fork-github/step1.png"
|
||||
width="865"
|
||||
@ -50,7 +52,7 @@ GitHub will automatically redirect you to the forked repository under your usern
|
||||
git clone git@github.com:jakejarvis/react-native.git
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/how-to-pull-request-fork-github/step2.png"
|
||||
width="420"
|
||||
@ -104,7 +106,7 @@ git push -u origin fix-readme-typo
|
||||
|
||||
You're now all ready to submit the improvement you've made to the project's maintainers for approval. Head over to the original repositories Pull Requests tab, and you should see an automatic suggestion from GitHub to create a pull request from your new branch.
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/how-to-pull-request-fork-github/step7-1.png"
|
||||
width="865"
|
||||
@ -112,7 +114,7 @@ You're now all ready to submit the improvement you've made to the project's main
|
||||
alt="Step 7.1"
|
||||
/>
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/how-to-pull-request-fork-github/step7-2.png"
|
||||
width="700"
|
||||
|
||||
@ -11,8 +11,10 @@ tags:
|
||||
image: "/static/images/notes/how-to-shrink-linux-virtual-disk-vmware/screen-shot-2018-12-07-at-2-04-04-pm.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/how-to-shrink-linux-virtual-disk-vmware/screen-shot-2018-12-07-at-2-04-04-pm.png"
|
||||
width="620"
|
||||
height="456"
|
||||
@ -81,7 +83,7 @@ VMware on macOS makes this a little tricky, since it packages VMs in what looks
|
||||
|
||||
We need to right click on the .vmwarevm "file," and select **Show Package Contents** to see what's really in there. You should see the actual .VMDK file sitting there — normally we're looking for the plain VMDK file (named _Virtual Disk.vmdk_ by default) without a bunch of numbers after it, but if you have snapshots associated with your VM, this might not be the file we actually want. But run the command below with it anyways, and the output will tell you if you need to use a different file.
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/how-to-shrink-linux-virtual-disk-vmware/screen-shot-2018-12-07-at-1-58-42-pm.png"
|
||||
width="680"
|
||||
|
||||
@ -11,11 +11,12 @@ image: "/static/images/notes/millenial-with-hillary-clinton/24707394571_0818d4ab
|
||||
noComments: true
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
import Video from "./components/embeds/Video";
|
||||
|
||||
{/* prettier-ignore */}
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/millenial-with-hillary-clinton/24707394571_0818d4ab83_o-1-copy.jpg"
|
||||
width="865"
|
||||
height="411"
|
||||
@ -37,7 +38,7 @@ My goal here isn't to convince every Bernie believer to jump ship and support he
|
||||
After working for months as a fellow on Hillary's campaign in New Hampshire leading up to the first primary in the country, I could feed you all the standard campaign talking points in my sleep: After graduating from Yale Law she went to work at the [Children's Defense Fund](https://www.childrensdefense.org/), not a high-paying New York law firm. She [went undercover](https://www.nytimes.com/2015/12/28/us/politics/how-hillary-clinton-went-undercover-to-examine-race-in-education.html?_r=0) in Alabama to investigate discrimination in public schools. She [got juveniles out of adult prisons](https://www.huffingtonpost.com/entry/huffpost-criminal-justice-survey-democratics_us_56bb85eae4b0b40245c5038b). She [gave 8 million children healthcare](https://www.hillaryclinton.com/briefing/factsheets/2015/12/23/hillary-clintons-lifelong-fight-for-quality-affordable-health-care-for-all-americans/). But there's just one thing that, for some reason, is hard for people to believe: at her core she is a good, caring, and loving person who has had only selfless intentions her entire life. I promise you.
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/millenial-with-hillary-clinton/9e58a-1bvweqv_ve2_c1tw5-ihrhw.jpg"
|
||||
width="400"
|
||||
height="500"
|
||||
|
||||
@ -11,14 +11,16 @@ tags:
|
||||
image: "/static/images/notes/my-first-code/jbb-screen1.png"
|
||||
---
|
||||
|
||||
<img
|
||||
import Image from "./components/embeds/Image";
|
||||
|
||||
<Image
|
||||
src="/static/images/notes/my-first-code/netscape.png"
|
||||
width="865"
|
||||
height="155"
|
||||
alt="Awesome First Code on GitHub"
|
||||
/>
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/my-first-code/badges.png"
|
||||
width="537"
|
||||
@ -36,7 +38,7 @@ Hopefully we can all look back at our first projects and be proud of how far we'
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://github.com/jakejarvis/jbb" target="_blank" rel="noopener noreferrer">
|
||||
<img src="/static/images/notes/my-first-code/jbb-logo.png" width="640" height="80" alt="Jake's Bulletin Board" />
|
||||
<Image src="/static/images/notes/my-first-code/jbb-logo.png" width="640" height="80" alt="Jake's Bulletin Board" />
|
||||
</a>
|
||||
<figcaption>
|
||||
<a href="https://github.com/jakejarvis/jbb" target="_blank" rel="noopener noreferrer">
|
||||
@ -93,11 +95,11 @@ Incredibly ambitious emoticon and [BBCode](https://en.wikipedia.org/wiki/BBCode)
|
||||
|
||||
```php
|
||||
<?php
|
||||
$replacement = '<IMG SRC=images/emoticons/smile.gif>';
|
||||
$replacement2 = '<IMG SRC=images/emoticons/bigsmile.gif>';
|
||||
$replacement3 = '<IMG SRC=images/emoticons/frown.gif>';
|
||||
$replacement4 = '<IMG SRC=images/emoticons/crying.gif>';
|
||||
$replacement5 = '<IMG SRC=images/emoticons/blush.gif>';
|
||||
$replacement = '<Image SRC=images/emoticons/smile.gif>';
|
||||
$replacement2 = '<Image SRC=images/emoticons/bigsmile.gif>';
|
||||
$replacement3 = '<Image SRC=images/emoticons/frown.gif>';
|
||||
$replacement4 = '<Image SRC=images/emoticons/crying.gif>';
|
||||
$replacement5 = '<Image SRC=images/emoticons/blush.gif>';
|
||||
// ... yada yada yada ...
|
||||
$replacement21 = '<a href="';
|
||||
$replacement22 = '">';
|
||||
@ -173,7 +175,7 @@ while ($topic = mysql_fetch_object($result30)) {
|
||||
The installation "wizard" (that's the joke, I presume...) ([sql_submit.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/setup/sql_submit.php))
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/my-first-code/jbb-screen1.png"
|
||||
width="865"
|
||||
height="458"
|
||||
@ -185,11 +187,11 @@ The installation "wizard" (that's the joke, I presume...) ([sql_submit.php](http
|
||||
And finally, JBB's actual interface... or literally as much of it as I could get to function in 2019. ([index.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/index.php))
|
||||
|
||||
<figure>
|
||||
<img src="/static/images/notes/my-first-code/jbb-screen3.png" width="865" height="561" alt="JBB Homepage" />
|
||||
<Image src="/static/images/notes/my-first-code/jbb-screen3.png" width="865" height="561" alt="JBB Homepage" />
|
||||
<figcaption>JBB Homepage</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure>
|
||||
<img src="/static/images/notes/my-first-code/jbb-screen4.png" width="865" height="493" alt="JBB Post" />
|
||||
<Image src="/static/images/notes/my-first-code/jbb-screen4.png" width="865" height="493" alt="JBB Post" />
|
||||
<figcaption>JBB Post</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -12,9 +12,11 @@ tags:
|
||||
image: "/static/images/notes/netlify-analytics-review/overview.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
|
||||
I've been trying out [Netlify Analytics](https://www.netlify.com/products/analytics/) on this site for over a month now and have some quick thoughts about this unique offering in a world full of bloated and invasive tracking scripts.
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/netlify-analytics-review/pageviews-2.png"
|
||||
width="865"
|
||||
height="361"
|
||||
@ -51,7 +53,7 @@ Ad blocking is becoming commonplace on the World Wide Web with [over 25% of user
|
||||
|
||||
That's a _huge_ chunk of visitors missing that Netlify Analytics gains back for you — and probably far more if your audience is tech-savvy like those reading this post likely are. (Some might even [block JavaScript completely](https://www.gnu.org/philosophy/javascript-trap.en.html) using extensions like [NoScript](https://addons.mozilla.org/en-US/firefox/addon/noscript/).)
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/netlify-analytics-review/pages.png"
|
||||
width="865"
|
||||
height="390"
|
||||
@ -72,7 +74,7 @@ It makes sense that Netlify needs to subsidize the cost of providing free enterp
|
||||
|
||||
### 📈 Accuracy
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/netlify-analytics-review/sources-bandwidth.png"
|
||||
width="865"
|
||||
height="422"
|
||||
@ -89,7 +91,7 @@ One more note: since Netlify doesn't process IP addresses or user agents, bots c
|
||||
|
||||
### ⏱️ Historical Data
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/netlify-analytics-review/overview.png"
|
||||
width="865"
|
||||
height="355"
|
||||
|
||||
@ -12,9 +12,11 @@ image: "/static/images/notes/no-homo-still-raps-motto/1_b41ztscbaxqi60snwsswfw.j
|
||||
noComments: true
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
|
||||
{/* prettier-ignore */}
|
||||
<figure>
|
||||
<img src="/static/images/notes/no-homo-still-raps-motto/1_b41ztscbaxqi60snwsswfw.jpg" width="865" height="364" />
|
||||
<Image src="/static/images/notes/no-homo-still-raps-motto/1_b41ztscbaxqi60snwsswfw.jpg" width="865" height="364" />
|
||||
<figcaption>
|
||||
This essay was written for Professor David Valdes-Greenwood's "Love & Sexuality" class at <a href="https://www.tufts.edu/" target="_blank" rel="noopener noreferrer"> Tufts University </a> in April 2012.
|
||||
</figcaption>
|
||||
@ -35,7 +37,11 @@ My next inquiry was about whether there's room for a gay person in the mainstrea
|
||||
It became apparent to me that there is still an ethical divide between the rap industry and the rest of America. In 2012, there are few areas where undisguised and unapologetic homophobia is not only accepted, but rewarded with money and power. (Rap and the Republican presidential nomination race come to mind.) Every few years, we see the issue of rap and homophobia as front-page news, but the time between these climaxes of public outrage is filled with self-encouraging homophobic songs that get no backlash at all.
|
||||
|
||||
<figure>
|
||||
<img src="/static/images/notes/no-homo-still-raps-motto/66574-132xjztnwqcm40hmdrec08q.jpg" width="700" height="464" />
|
||||
<Image
|
||||
src="/static/images/notes/no-homo-still-raps-motto/66574-132xjztnwqcm40hmdrec08q.jpg"
|
||||
width="700"
|
||||
height="464"
|
||||
/>
|
||||
<figcaption>Frank Micelotta/Getty Images</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -66,7 +72,11 @@ A year earlier, in 2009, Queens rapper N.O.R.E. also revealed to DJ Vlad:
|
||||
Several other rappers have recently been vocal against homophobia. Nicki Minaj, protégé of Lil Wayne, said in an interview last year with _Out Magazine_, "Normally, Wayne probably wouldn't have gay guys coming to see his shows much, but they're definitely a big part of my movement, and I hope they'd still come out and see me. I think that will be really, really interesting, just to start bridging that gap." Up-and-coming 23-year-old rapper A$AP Rocky, admitted last year to Pitchfork.com, "I used to be homophobic, but that's fucked up. I had to look in the mirror and say, ‘All the designers I'm wearing are gay.'"
|
||||
|
||||
<figure>
|
||||
<img src="/static/images/notes/no-homo-still-raps-motto/f9d7a-1gad6zdgng2-mjsedg5igwa.jpg" width="350" height="527" />
|
||||
<Image
|
||||
src="/static/images/notes/no-homo-still-raps-motto/f9d7a-1gad6zdgng2-mjsedg5igwa.jpg"
|
||||
width="350"
|
||||
height="527"
|
||||
/>
|
||||
<figcaption>Sarah Taylor/Fashion Magazine</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -77,7 +87,11 @@ West, disagreeing with Fat Joe's claim of being surrounded by gay members of the
|
||||
While the sentiment from mainstream rappers is becoming increasingly supportive of all sexualities, West's automatic instinct to defend himself so passionately against rumors about his own sexuality reflects no such sentiment from the community of rap fans and critics. In other words, maybe the record executives are justified to think that a gay rapper would jeopardize the one thing they are hired to protect: a profitable return on investments in recording contracts, marketing, and concert venues.
|
||||
|
||||
<figure>
|
||||
<img src="/static/images/notes/no-homo-still-raps-motto/a5c2a-1fkblnzkye3g04gdvsbbtpa.jpg" width="580" height="389" />
|
||||
<Image
|
||||
src="/static/images/notes/no-homo-still-raps-motto/a5c2a-1fkblnzkye3g04gdvsbbtpa.jpg"
|
||||
width="580"
|
||||
height="389"
|
||||
/>
|
||||
<figcaption>Amy Odell/New York Magazine Fashion</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -86,7 +100,11 @@ Lil Wayne's performance at MTV's Video Music Awards last year showed the communi
|
||||
Sure enough, _Rolling Stone_ confirmed with the fashion store Tripp NYC that Wayne was sporting their ladies' leopard-print jeggings that retail online for $44. _Out Magazine_'s assistant editor Max Berlinger spoke in support of Wayne, attributing his choice of clothes to Dandyism, or "extreme visual paradigms that are manifested in a completely overt way and also heavily rooted in consumerism." Berlinger, when asked to elaborate on artists like Kanye wearing women's blouses and calling it individualism, simply responded with, "Fuck all that theoretical bullshit. At the end of the day, I just want someone to look confidently like themselves, which Lil Wayne did perfectly". However, Wayne's fans vocally disagreed. A Twitter account, @Waynes_Jeggings, was created almost immediately after the performance, and spent the rest of the night questioning Wayne's sexuality (the messages have since been deleted).
|
||||
|
||||
<figure>
|
||||
<img src="/static/images/notes/no-homo-still-raps-motto/a805a-1ghqzd91ei4fdntwmzwxw6g.jpg" width="350" height="511" />
|
||||
<Image
|
||||
src="/static/images/notes/no-homo-still-raps-motto/a805a-1ghqzd91ei4fdntwmzwxw6g.jpg"
|
||||
width="350"
|
||||
height="511"
|
||||
/>
|
||||
<figcaption>Martin Rose/Getty Images</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
@ -10,10 +10,11 @@ tags:
|
||||
image: "/static/images/notes/presidential-candidates-404-pages/obama-laughing.jpg"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
import Video from "./components/embeds/Video";
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/obama-laughing.jpg"
|
||||
width="865"
|
||||
height="460"
|
||||
@ -30,7 +31,7 @@ More recently, though, little-known hidden Easter eggs on ["404 Not Found"](http
|
||||
|
||||
I'm a _huge_ sucker for Kate McKinnon's spot-on impression of Warren on Saturday Night Live. And [unfortunately](https://twitter.com/realdonaldtrump/status/1097116612279316480), seeing a campaign embrace SNL is like a breath of fresh air these days. [Watch all of the Kate McWarren videos so far here; you won't regret it.](https://www.nbc.com/saturday-night-live/cast/kate-mckinnon-15056/impersonation/elizabeth-warren-287903)
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/warren.png"
|
||||
width="865"
|
||||
height="579"
|
||||
@ -63,7 +64,12 @@ Although the designer who selected this GIF likely had _thousands_ of choices wh
|
||||
|
||||
Uncle Joe has a nice and simple 404 page. I like it, along with the Ray-Bans and his choice of vanilla ice cream.
|
||||
|
||||
<img src="/static/images/notes/presidential-candidates-404-pages/biden.png" width="865" height="539" alt="Joe Biden" />
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/biden.png"
|
||||
width="865"
|
||||
height="539"
|
||||
alt="Joe Biden"
|
||||
/>
|
||||
|
||||
## 4. Beto O'Rourke — [betoorourke.com](https://betoorourke.com/asdfasdf404)
|
||||
|
||||
@ -113,7 +119,7 @@ Another clean and simple page with a top-notch GIF. It injected some emotion int
|
||||
|
||||
I love, love, _love_ Pete's design for his whole campaign, and his beautiful 404 page is no exception. In case you didn't know, Pete for America has an entire ["Design Toolkit"](https://design.peteforamerica.com/) publicly available for all to view and use, with really cool and in-depth explanations for all of their choices — even their [color palette](https://design.peteforamerica.com/colors). Very progressive indeed.
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/buttigeg.png"
|
||||
width="865"
|
||||
height="344"
|
||||
@ -124,7 +130,7 @@ I love, love, _love_ Pete's design for his whole campaign, and his beautiful 404
|
||||
|
||||
Love the photo choice. But although pains me to go against my Senator from my home state, I still _cannot stand_ his choice of font. Oh well, I guess that's now a criterion for running for president in 2020.
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/booker.png"
|
||||
width="865"
|
||||
height="503"
|
||||
@ -135,13 +141,18 @@ Love the photo choice. But although pains me to go against my Senator from my ho
|
||||
|
||||
Not sure if donating to Yang 2020 will help put a page at [yang2020.com/alsdjfzoif](https://www.yang2020.com/alsdjfzoif) — the actual URL I visited to grab this screenshot — but the Bitmoji Andrew looks pretty chill.
|
||||
|
||||
<img src="/static/images/notes/presidential-candidates-404-pages/yang.png" width="865" height="470" alt="Andrew Yang" />
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/yang.png"
|
||||
width="865"
|
||||
height="470"
|
||||
alt="Andrew Yang"
|
||||
/>
|
||||
|
||||
## 9. Amy Klobuchar — [amyklobuchar.com](https://amyklobuchar.com/asdfasdf404)
|
||||
|
||||
This is the 404 page of someone who won't forget the [Midwestern roots](https://en.wikipedia.org/wiki/Uff_da) she comes from once she moves into the White House...or writes a memoir about her campaign from her Minnesota home.
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/klobuchar.png"
|
||||
width="865"
|
||||
height="456"
|
||||
@ -152,7 +163,7 @@ This is the 404 page of someone who won't forget the [Midwestern roots](https://
|
||||
|
||||
I'll never publicly say anything against a good Dad joke. This is no exception.
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/bullock.png"
|
||||
width="865"
|
||||
height="467"
|
||||
@ -163,7 +174,7 @@ I'll never publicly say anything against a good Dad joke. This is no exception.
|
||||
|
||||
Another quality Dad joke here.
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/bennet.png"
|
||||
width="865"
|
||||
height="543"
|
||||
@ -174,7 +185,7 @@ Another quality Dad joke here.
|
||||
|
||||
Yet another Dad joke? I honestly had the hardest time ranking these three.
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/delaney.png"
|
||||
width="865"
|
||||
height="405"
|
||||
@ -185,7 +196,7 @@ Yet another Dad joke? I honestly had the hardest time ranking these three.
|
||||
|
||||
A 404 page only a motivational author and speaker running for president could envision.
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/williamson.png"
|
||||
width="865"
|
||||
height="357"
|
||||
@ -196,7 +207,7 @@ A 404 page only a motivational author and speaker running for president could en
|
||||
|
||||
I guess this would be slightly humorous...four years ago. Time to move on from your middle-school crush, Donny.
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/trump.png"
|
||||
width="865"
|
||||
height="524"
|
||||
@ -211,7 +222,7 @@ These candidates haven't configured a custom 404 page, settling for the default
|
||||
|
||||
### 15. Julián Castro — [julianforthefuture.com](https://www.julianforthefuture.com/asdfasdf404)
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/castro.png"
|
||||
width="865"
|
||||
height="316"
|
||||
@ -220,7 +231,7 @@ These candidates haven't configured a custom 404 page, settling for the default
|
||||
|
||||
### 16. Wayne Messam — [wayneforusa.com](https://wayneforusa.com/asdfasdf404)
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/messam.png"
|
||||
width="865"
|
||||
height="529"
|
||||
@ -229,7 +240,7 @@ These candidates haven't configured a custom 404 page, settling for the default
|
||||
|
||||
### 17. Tulsi Gabbard — [tulsi2020.com](https://www.tulsi2020.com/asdfasdf404)
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/gabbard.png"
|
||||
width="865"
|
||||
height="333"
|
||||
@ -238,7 +249,7 @@ These candidates haven't configured a custom 404 page, settling for the default
|
||||
|
||||
### 18. Joe Sestak — [joesestak.com](https://www.joesestak.com/asdfasdf404)
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/presidential-candidates-404-pages/sestak.png"
|
||||
width="865"
|
||||
height="366"
|
||||
|
||||
@ -11,9 +11,11 @@ tags:
|
||||
image: "/static/images/notes/security-headers-cloudflare-workers/security-headers.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
|
||||
{/* prettier-ignore */}
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/security-headers-cloudflare-workers/security-headers.png"
|
||||
width="700"
|
||||
height="275"
|
||||
@ -28,7 +30,7 @@ In 2019, it's becoming more and more important to harden websites via HTTP respo
|
||||
|
||||
[Cloudflare Workers](https://www.cloudflare.com/products/cloudflare-workers/) are a great feature of [Cloudflare](https://www.cloudflare.com/) that allows you to modify responses on-the-fly between your origin server and the user, similar to [AWS Lambda](https://aws.amazon.com/lambda/) (but much simpler). We'll use a Worker to add the headers.
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/security-headers-cloudflare-workers/cf-workers.png"
|
||||
width="650"
|
||||
|
||||
@ -11,11 +11,13 @@ tags:
|
||||
image: "/static/images/notes/shodan-search-queries/shodan.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
|
||||
Over time, I've collected an assortment of interesting, funny, and depressing search queries to plug into [Shodan](https://www.shodan.io/), the ([literal](https://www.vice.com/en_uk/article/9bvxmd/shodan-exposes-the-dark-side-of-the-net)) internet search engine. Some return facepalm-inducing results, while others return serious and/or ancient vulnerabilities in the wild.
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://account.shodan.io/register" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/shodan-search-queries/shodan.png"
|
||||
width="865"
|
||||
height="248"
|
||||
@ -58,7 +60,7 @@ The world and its devices are quickly becoming more connected through the shiny
|
||||
"Server: Prismview Player"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/billboard3.png"
|
||||
width="450"
|
||||
@ -72,7 +74,7 @@ The world and its devices are quickly becoming more connected through the shiny
|
||||
"in-tank inventory" port:10001
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/7-11.png"
|
||||
width="600"
|
||||
@ -86,7 +88,7 @@ The world and its devices are quickly becoming more connected through the shiny
|
||||
P372 "ANPR enabled"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/plate-reader.png"
|
||||
width="680"
|
||||
@ -128,7 +130,7 @@ Wiretapping mechanism outlined by Cisco in [RFC 3924](https://tools.ietf.org/htm
|
||||
http.title:"Tesla PowerPack System" http.component:"d3" -ga3ca4f2
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/shodan-search-queries/tesla.png"
|
||||
width="865"
|
||||
height="543"
|
||||
@ -149,7 +151,7 @@ Shodan made a pretty sweet [Ship Tracker](https://shiptracker.shodan.io/) that m
|
||||
"Cobham SATCOM" OR ("Sailor" "VSAT")
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/sailor-vsat.png"
|
||||
width="700"
|
||||
@ -169,7 +171,7 @@ title:"Slocum Fleet Mission Control"
|
||||
"Server: CarelDataServer" "200 Document follows"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/shodan-search-queries/refrigeration.png"
|
||||
width="865"
|
||||
height="456"
|
||||
@ -188,7 +190,7 @@ http.title:"Nordex Control" "Windows 2000 5.0 x86" "Jetty/3.1 (JSP 1.1; Servlet
|
||||
"[1m[35mWelcome on console"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/shodan-search-queries/c4max.png"
|
||||
width="865"
|
||||
height="171"
|
||||
@ -209,7 +211,7 @@ Secured by default, thankfully, but these 1,700+ machines still [have no busines
|
||||
"Server: EIG Embedded Web Server" "200 Document follows"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/power-gaugetech.png"
|
||||
width="500"
|
||||
@ -254,7 +256,7 @@ Secured by default, thankfully, but these 1,700+ machines still [have no busines
|
||||
[Shodan Images](https://images.shodan.io/) is a great supplementary tool to browse screenshots, by the way! [🔎 →](https://images.shodan.io/?query=%22authentication+disabled%22+%21screenshot.label%3Ablank)
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/vnc.png"
|
||||
width="500"
|
||||
@ -284,7 +286,7 @@ Command-line access inside Kubernetes pods and Docker containers, and real-time
|
||||
title:"Weave Scope" http.favicon.hash:567176827
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/shodan-search-queries/weavescope.png"
|
||||
width="865"
|
||||
height="465"
|
||||
@ -299,7 +301,7 @@ Older versions were insecure by default. [Very scary.](https://krebsonsecurity.c
|
||||
"MongoDB Server Information" port:27017 -authentication
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/mongo.png"
|
||||
width="500"
|
||||
@ -315,7 +317,7 @@ Like the [infamous phpMyAdmin](https://www.cvedetails.com/vulnerability-list/ven
|
||||
"Set-Cookie: mongo-express=" "200 OK"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/mongo-express.png"
|
||||
width="700"
|
||||
@ -329,7 +331,7 @@ Like the [infamous phpMyAdmin](https://www.cvedetails.com/vulnerability-list/ven
|
||||
"X-Jenkins" "Set-Cookie: JSESSIONID" http.title:"Dashboard"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/jenkins.png"
|
||||
width="700"
|
||||
@ -381,7 +383,7 @@ Lantronix password port:30718 -secured
|
||||
"Citrix Applications:" port:1604
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/citrix.png"
|
||||
width="700"
|
||||
@ -415,7 +417,7 @@ Telnet Configuration: [🔎 →](https://www.shodan.io/search?query=%22Polycom+C
|
||||
"Polycom Command Shell" -failed port:23
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/polycom.png"
|
||||
width="550"
|
||||
@ -449,7 +451,7 @@ HP-ILO-4 !"HP-ILO-4/2.53" !"HP-ILO-4/2.54" !"HP-ILO-4/2.55" !"HP-ILO-4/2.60" !"H
|
||||
"x-owa-version" "IE=EmulateIE7" "Server: Microsoft-IIS/7.0"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/owa2007.png"
|
||||
width="450"
|
||||
@ -463,7 +465,7 @@ HP-ILO-4 !"HP-ILO-4/2.53" !"HP-ILO-4/2.54" !"HP-ILO-4/2.55" !"HP-ILO-4/2.60" !"H
|
||||
"x-owa-version" "IE=EmulateIE7" http.favicon.hash:442749392
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/owa2010.png"
|
||||
width="450"
|
||||
@ -477,7 +479,7 @@ HP-ILO-4 !"HP-ILO-4/2.53" !"HP-ILO-4/2.54" !"HP-ILO-4/2.55" !"HP-ILO-4/2.60" !"H
|
||||
"X-AspNet-Version" http.title:"Outlook" -"x-owa-version"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/owa2013.png"
|
||||
width="580"
|
||||
@ -527,7 +529,7 @@ Concerning [default network shares of QuickBooks](https://quickbooks.intuit.com/
|
||||
"Set-Cookie: iomega=" -"manage/login.html" -http.title:"Log In"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/iomega.png"
|
||||
width="600"
|
||||
@ -541,7 +543,7 @@ Concerning [default network shares of QuickBooks](https://quickbooks.intuit.com/
|
||||
Redirecting sencha port:9000
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/buffalo.png"
|
||||
width="580"
|
||||
@ -555,7 +557,7 @@ Redirecting sencha port:9000
|
||||
"Server: Logitech Media Server" "200 OK"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/logitech.png"
|
||||
width="500"
|
||||
@ -575,7 +577,7 @@ Redirecting sencha port:9000
|
||||
"CherryPy/5.1.0" "/home"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/plexpy.png"
|
||||
width="560"
|
||||
@ -623,7 +625,7 @@ html:"DVR_H264 ActiveX"
|
||||
"Serial Number:" "Built:" "Server: HP HTTP"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/hp.png"
|
||||
width="700"
|
||||
@ -637,7 +639,7 @@ html:"DVR_H264 ActiveX"
|
||||
ssl:"Xerox Generic Root"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/xerox.png"
|
||||
width="620"
|
||||
@ -655,7 +657,7 @@ ssl:"Xerox Generic Root"
|
||||
"Server: EPSON-HTTP" "200 OK"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/epson.png"
|
||||
width="550"
|
||||
@ -673,7 +675,7 @@ ssl:"Xerox Generic Root"
|
||||
"Server: CANON HTTP Server"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/canon.png"
|
||||
width="550"
|
||||
@ -691,7 +693,7 @@ ssl:"Xerox Generic Root"
|
||||
"Server: AV_Receiver" "HTTP/1.1 406"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/yamaha.png"
|
||||
width="550"
|
||||
@ -729,7 +731,7 @@ Apple TVs, HomePods, etc.
|
||||
title:"OctoPrint" -title:"Login" http.favicon.hash:1307375944
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/octoprint.png"
|
||||
width="700"
|
||||
@ -743,7 +745,7 @@ title:"OctoPrint" -title:"Login" http.favicon.hash:1307375944
|
||||
"ETH - Total speed"
|
||||
```
|
||||
|
||||
<img
|
||||
<Image
|
||||
className="center"
|
||||
src="/static/images/notes/shodan-search-queries/eth.png"
|
||||
width="800"
|
||||
|
||||
@ -10,13 +10,15 @@ tags:
|
||||
image: "/static/images/notes/y2k-sandbox/screenshot.png"
|
||||
---
|
||||
|
||||
import Image from "./components/embeds/Image";
|
||||
|
||||
A few months ago, I stumbled upon [my first website ever](https://jakejarvis.github.io/my-first-website/) on an old floppy disk. Despite the instant cringing, I [uploaded it](https://github.com/jakejarvis/my-first-website) to GitHub, [collected other iterations](/previously/), and made an [#awesome-list](https://github.com/jakejarvis/awesome-first-code) of others who were brave and/or shameless enough to do the same. But why not take that ~~one~~ 1,000 steps further?
|
||||
|
||||
Introducing the [**Y2K Sandbox**](https://y2k.app/) — with fully-featured, fully-isolated, on-demand [**Windows Millennium Edition®**](https://www.youtube.com/watch?v=CaNDeyYP98A) virtual machines, simply to experience my first website in its natural Internet Explorer 5 habitat. And maybe play some [3D Pinball: Space Cadet](https://en.wikipedia.org/wiki/Full_Tilt!_Pinball#3D_Pinball_for_Windows_%E2%80%93_Space_Cadet). Oh, and [Microsoft Bob](https://en.wikipedia.org/wiki/Microsoft_Bob) is there too if you want to say hello and catch up. 🤓
|
||||
|
||||
<figure>
|
||||
<a className="no-underline" href="https://y2k.app/" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/y2k-sandbox/screenshot.png"
|
||||
width="865"
|
||||
height="649"
|
||||
@ -39,7 +41,7 @@ The frontend is _much_ simpler with [a few lines of JavaScript](https://github.c
|
||||
I must give credit to both [charlie.bz](https://charlie.bz/) and [benjojo.co.uk](https://benjojo.co.uk/), similar websites I was enamored with when they were posted on Hacker News a few years ago. Think we'll see some websites like these with Windows 29 in a decade?
|
||||
|
||||
<figure>
|
||||
<img
|
||||
<Image
|
||||
src="/static/images/notes/y2k-sandbox/windows-me.png"
|
||||
width="320"
|
||||
height="92"
|
||||
|
||||
@ -6,7 +6,8 @@ import { escape } from "html-escaper";
|
||||
import { getMDXComponent } from "mdx-bundler/client";
|
||||
import Content from "../../components/Content";
|
||||
import Meta from "../../components/notes/Meta";
|
||||
import mdxComponents from "../../components/mdxComponents";
|
||||
import CustomLink from "../../components/embeds/Link";
|
||||
import CustomCode from "../../components/embeds/Code";
|
||||
import { getNote, getNoteSlugs } from "../../lib/parse-notes";
|
||||
import * as config from "../../lib/config";
|
||||
import type { GetStaticProps, GetStaticPaths } from "next";
|
||||
@ -14,6 +15,11 @@ import type { GetStaticProps, GetStaticPaths } from "next";
|
||||
const Comments = dynamic(() => import("../../components/notes/Comments"), { ssr: false });
|
||||
|
||||
const Note = ({ frontMatter, mdxSource }) => {
|
||||
const customComponents = {
|
||||
a: CustomLink,
|
||||
code: CustomCode,
|
||||
};
|
||||
|
||||
const MDXComponent = useMemo(() => getMDXComponent(mdxSource, { process }), [mdxSource]);
|
||||
|
||||
return (
|
||||
@ -67,7 +73,7 @@ const Note = ({ frontMatter, mdxSource }) => {
|
||||
<Meta {...frontMatter} />
|
||||
<Content>
|
||||
{/* @ts-ignore */}
|
||||
<MDXComponent components={mdxComponents} />
|
||||
<MDXComponent components={customComponents} />
|
||||
</Content>
|
||||
{frontMatter.noComments !== true && <Comments slug={frontMatter.slug} />}
|
||||
</>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 332 KiB After Width: | Height: | Size: 328 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 906 KiB After Width: | Height: | Size: 903 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 403 KiB After Width: | Height: | Size: 393 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 363 KiB After Width: | Height: | Size: 358 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 244 KiB After Width: | Height: | Size: 244 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 118 KiB After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.7 MiB After Width: | Height: | Size: 5.6 MiB |
Loading…
x
Reference in New Issue
Block a user