1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-21 09:41:16 -04:00

new <Figure> component for image captions

This commit is contained in:
2022-01-13 13:39:22 -05:00
parent 1a0541776e
commit 64a91d67bf
21 changed files with 226 additions and 409 deletions

View File

@@ -1,9 +1,9 @@
import CopyButton from "../clipboard/CopyButton"; import CopyButton from "./CopyButton";
import type { ReactNode } from "react"; import type { ReactNode } from "react";
import styles from "./Code.module.css"; import styles from "./Code.module.css";
type CustomCodeProps = { export type CustomCodeProps = {
className?: string; className?: string;
children: ReactNode; children: ReactNode;
}; };

View File

@@ -0,0 +1,20 @@
import Image from "./Image";
import innerText from "react-innertext";
import type { ReactNode } from "react";
import type { CustomImageProps } from "./Image";
export type CustomFigureProps = Omit<CustomImageProps, "alt"> & {
children: ReactNode; // caption (can be in markdown, yay!!!)
alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
};
const CustomFigure = ({ children, alt, ...imageProps }: CustomFigureProps) => {
return (
<figure>
<Image alt={alt || innerText(children)} {...imageProps} />
<figcaption>{children}</figcaption>
</figure>
);
};
export default CustomFigure;

View File

@@ -2,10 +2,7 @@ import Image from "next/image";
import type { ImageProps } from "next/image"; import type { ImageProps } from "next/image";
import type { CSSProperties } from "react"; import type { CSSProperties } from "react";
// TODO: infer ratio when given zero/one dimensions export type CustomImageProps = ImageProps & {
// TODO: fold figure/figcaption tags into this component
type CustomImageProps = ImageProps & {
style?: CSSProperties; style?: CSSProperties;
}; };

View File

@@ -12,6 +12,7 @@ image: "/static/images/notes/bernie-sanders-bern-app-data/sad-bernie.jpg"
--- ---
import Image from "./components/media/Image"; import Image from "./components/media/Image";
import Figure from "./components/media/Figure";
import Video from "./components/media/Video"; import Video from "./components/media/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. 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.
@@ -77,60 +78,29 @@ 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. 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> <Figure src="/static/images/notes/bernie-sanders-bern-app-data/json-response.jpg" width="865" height="369">
<Image BERN's API response in Chrome DevTools
src="/static/images/notes/bernie-sanders-bern-app-data/json-response.jpg" </Figure>
width="865"
height="369"
alt="BERN's API response in Chrome DevTools"
/>
<figcaption>BERN's API response in Chrome DevTools</figcaption>
</figure>
Others have noted that web-based organizing tools like BERN have been used by campaigns at all levels since President Obama's well-oiled, futuristic machine in 2007. This is also true, and I'm a big fan of the trend they started. Others have noted that web-based organizing tools like BERN have been used by campaigns at all levels since President Obama's well-oiled, futuristic machine in 2007. This is also true, and I'm a big fan of the trend they started.
But the latter category of databases — like [NationBuilder](https://nationbuilder.com/) and, more notably, [NGP VAN's VoteBuilder](https://act.ngpvan.com/votebuilder) software based on the Obama campaign's inventions and now used by almost all Democratic campaigns across the United States — are secured and strictly guarded. Volunteer accounts need to be created and approved by paid campaign organizers and are locked down to provide the bare minimum amount of information necessary for one to canvass or phone bank a shortlist of voters. Every single click is also recorded in a [detailed log](sanders-campaign-audit.pdf) down to the millisecond. (This is how [Bernie's organizers got busted](https://time.com/4155185/bernie-sanders-hillary-clinton-data/) snooping around Hillary's VoteBuilder data last cycle, by the way.) But the latter category of databases — like [NationBuilder](https://nationbuilder.com/) and, more notably, [NGP VAN's VoteBuilder](https://act.ngpvan.com/votebuilder) software based on the Obama campaign's inventions and now used by almost all Democratic campaigns across the United States — are secured and strictly guarded. Volunteer accounts need to be created and approved by paid campaign organizers and are locked down to provide the bare minimum amount of information necessary for one to canvass or phone bank a shortlist of voters. Every single click is also recorded in a [detailed log](sanders-campaign-audit.pdf) down to the millisecond. (This is how [Bernie's organizers got busted](https://time.com/4155185/bernie-sanders-hillary-clinton-data/) snooping around Hillary's VoteBuilder data last cycle, by the way.)
<figure> <Figure src="/static/images/notes/bernie-sanders-bern-app-data/votebuilder-audit.png" width="750" height="447">
<a className="no-underline" href="/static/images/notes/bernie-sanders-bern-app-data/sanders-campaign-audit.pdf"> [NGP VAN's audit of the Sanders campaign's VoteBuilder
<Image activity](/static/images/notes/bernie-sanders-bern-app-data/sanders-campaign-audit.pdf)
src="/static/images/notes/bernie-sanders-bern-app-data/votebuilder-audit.png" </Figure>
width="750"
height="447"
alt="NGP VAN's audit of the Sanders campaign's VoteBuilder activity"
/>
</a>
<figcaption>
<a href="/static/images/notes/bernie-sanders-bern-app-data/sanders-campaign-audit.pdf">
NGP VAN's audit of the Sanders campaign's VoteBuilder activity
</a>
</figcaption>
</figure>
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. 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> <Figure src="/static/images/notes/bernie-sanders-bern-app-data/reddit-bros.png" width="600" height="301">
<Image [BERN discussion on /r/SandersForPresident
src="/static/images/notes/bernie-sanders-bern-app-data/reddit-bros.png" thread](https://www.reddit.com/r/SandersForPresident/comments/bi15la/new_get_the_official_bernie_sanders_2020_app_bern/elxi85m/)
width="600" </Figure>
height="301"
alt="BERN discussion on /r/SandersForPresident thread"
/>
<figcaption>
<a
href="https://www.reddit.com/r/SandersForPresident/comments/bi15la/new_get_the_official_bernie_sanders_2020_app_bern/elxi85m/"
target="_blank"
rel="noopener noreferrer"
>
BERN discussion on /r/SandersForPresident thread
</a>
</figcaption>
</figure>
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. 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.
<Image <Image
src="/static/images/notes/bernie-sanders-bern-app-data/webinar-slide-1.png" src="/static/images/notes/bernie-sanders-bern-app-data/webinar-slide-1.png"
width="700" width="700"
height="451" height="451"
@@ -140,7 +110,6 @@ alt="Webinar Slide 1"
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. 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.
<Image <Image
src="/static/images/notes/bernie-sanders-bern-app-data/webinar-slide-2.png" src="/static/images/notes/bernie-sanders-bern-app-data/webinar-slide-2.png"
width="700" width="700"
height="451" height="451"

View File

@@ -51,16 +51,12 @@ Now that Americans are _finally_ starting to get tested for the coronavirus, inf
The maintainers are also [fully transparent](https://covidtracking.com/about-tracker/) about their process and take great care to annotate individual figures with the methodology used to arrive at each, which has earned them the [trust](https://covidtracking.com/#press) of even the largest national news organizations reporting on COVID-19. The maintainers are also [fully transparent](https://covidtracking.com/about-tracker/) about their process and take great care to annotate individual figures with the methodology used to arrive at each, which has earned them the [trust](https://covidtracking.com/#press) of even the largest national news organizations reporting on COVID-19.
<figure>
<a className="no-underline" href="https://covidtracking.com/" target="_blank" rel="noopener noreferrer">
<Image <Image
src="/static/images/notes/coronavirus-open-source/covidtracking.png" src="/static/images/notes/coronavirus-open-source/covidtracking.png"
width="680" width="680"
height="328" height="328"
alt="The COVID Tracking Project" alt="The COVID Tracking Project"
/> />
</a>
</figure>
## [#findthemasks](https://findthemasks.com/) <Octocat repo="r-pop/findthemasks" /> ## [#findthemasks](https://findthemasks.com/) <Octocat repo="r-pop/findthemasks" />
@@ -68,16 +64,12 @@ This one might be my favorite, simply because of its laser-like focus on solving
_Please_ look up your local hospitals on [#findthemasks](https://findthemasks.com/#sites) and follow their instructions to donate anything you have hoarded — it's likely the single most impactful thing you can do at this point. If you don't see your local hospital, or don't feel comfortable shipping equipment to any hospital listed, you can also visit [PPE Link](https://ppelink.org/ppe-donations/) and they will connect you with hospitals in your area. _Please_ look up your local hospitals on [#findthemasks](https://findthemasks.com/#sites) and follow their instructions to donate anything you have hoarded — it's likely the single most impactful thing you can do at this point. If you don't see your local hospital, or don't feel comfortable shipping equipment to any hospital listed, you can also visit [PPE Link](https://ppelink.org/ppe-donations/) and they will connect you with hospitals in your area.
<figure>
<a className="no-underline" href="https://findthemasks.com/" target="_blank" rel="noopener noreferrer">
<Image <Image
src="/static/images/notes/coronavirus-open-source/findthemasks.png" src="/static/images/notes/coronavirus-open-source/findthemasks.png"
width="600" width="600"
height="295" height="295"
alt="#findthemasks" alt="#findthemasks"
/> />
</a>
</figure>
## [#StayTheFuckHome](https://staythefuckhome.com/) <Octocat repo="flore2003/staythefuckhome" /> ## [#StayTheFuckHome](https://staythefuckhome.com/) <Octocat repo="flore2003/staythefuckhome" />
@@ -85,96 +77,67 @@ I figured I'd throw in this cheeky website broadcasting a simple but serious mes
The [GitHub community](https://github.com/flore2003/staythefuckhome/pulls?q=is%3Apr) has translated the instructional essay into over a dozen different languages — including a [safe-for-work version](https://staythefuckhome.com/sfw/), if that helps — and they're [looking for more translators](https://github.com/flore2003/staythefuckhome#contributing) if you're multilingual and need something besides Netflix to fill your time with while you **_stay the fuck home!_** 😉 The [GitHub community](https://github.com/flore2003/staythefuckhome/pulls?q=is%3Apr) has translated the instructional essay into over a dozen different languages — including a [safe-for-work version](https://staythefuckhome.com/sfw/), if that helps — and they're [looking for more translators](https://github.com/flore2003/staythefuckhome#contributing) if you're multilingual and need something besides Netflix to fill your time with while you **_stay the fuck home!_** 😉
<figure>
<a className="no-underline" href="https://staythefuckhome.com/" target="_blank" rel="noopener noreferrer">
<Image <Image
src="/static/images/notes/coronavirus-open-source/staythefuckhome.png" src="/static/images/notes/coronavirus-open-source/staythefuckhome.png"
width="600" width="600"
height="215" height="215"
alt="#StayTheFuckHome" alt="#StayTheFuckHome"
/> />
</a>
</figure>
## [COVID-19 Dashboards](https://covid19dashboards.com/) <Octocat repo="github/covid19-dashboard" /> ## [COVID-19 Dashboards](https://covid19dashboards.com/) <Octocat repo="github/covid19-dashboard" />
This collection of various visualizations is fascinating (and sobering) to look at. If you're smarter than I am and have experience in data analysis, their team (led by a [GitHub engineer](https://github.com/hamelsmu)) would be more than happy to [add your contribution](https://github.com/github/covid19-dashboard/blob/master/CONTRIBUTING.md) to the site — they're using [Jupyter Notebooks](https://jupyter.org/) and [fastpages](https://github.com/fastai/fastpages). This collection of various visualizations is fascinating (and sobering) to look at. If you're smarter than I am and have experience in data analysis, their team (led by a [GitHub engineer](https://github.com/hamelsmu)) would be more than happy to [add your contribution](https://github.com/github/covid19-dashboard/blob/master/CONTRIBUTING.md) to the site — they're using [Jupyter Notebooks](https://jupyter.org/) and [fastpages](https://github.com/fastai/fastpages).
<figure>
<a className="no-underline" href="https://covid19dashboards.com/" target="_blank" rel="noopener noreferrer">
<Image <Image
src="/static/images/notes/coronavirus-open-source/covid19dashboards.png" src="/static/images/notes/coronavirus-open-source/covid19dashboards.png"
width="580" width="580"
height="442" height="442"
alt="COVID-19 Dashboards" alt="COVID-19 Dashboards"
/> />
</a>
</figure>
## [CoronaTracker](https://coronatracker.samabox.com/) <Octocat repo="MhdHejazi/CoronaTracker" /> ## [CoronaTracker](https://coronatracker.samabox.com/) <Octocat repo="MhdHejazi/CoronaTracker" />
CoronaTracker is a _beautiful_ cross-platform app for iOS and macOS with intuitive maps and charts fed by reputable live data. Apple is [being justifiably picky](https://developer.apple.com/news/?id=03142020a) about "non-official" Coronavirus apps in their App Store ([so is Google](https://blog.google/inside-google/company-announcements/coronavirus-covid19-response/), by the way) but you can still [download the macOS app directly](https://coronatracker.samabox.com/) or [compile the iOS source code](https://github.com/MhdHejazi/CoronaTracker#1-ios-app) yourself using Xcode if you wish. CoronaTracker is a _beautiful_ cross-platform app for iOS and macOS with intuitive maps and charts fed by reputable live data. Apple is [being justifiably picky](https://developer.apple.com/news/?id=03142020a) about "non-official" Coronavirus apps in their App Store ([so is Google](https://blog.google/inside-google/company-announcements/coronavirus-covid19-response/), by the way) but you can still [download the macOS app directly](https://coronatracker.samabox.com/) or [compile the iOS source code](https://github.com/MhdHejazi/CoronaTracker#1-ios-app) yourself using Xcode if you wish.
<figure>
<a className="no-underline" href="https://coronatracker.samabox.com/" target="_blank" rel="noopener noreferrer">
<Image <Image
src="/static/images/notes/coronavirus-open-source/coronatracker.png" src="/static/images/notes/coronavirus-open-source/coronatracker.png"
width="865" width="865"
height="417" height="417"
alt="CoronaTracker" alt="CoronaTracker"
/> />
</a>
</figure>
## [Staying Home Club](https://stayinghome.club/) <Octocat repo="phildini/stayinghomeclub" /> ## [Staying Home Club](https://stayinghome.club/) <Octocat repo="phildini/stayinghomeclub" />
A bit more family-friendly than [#StayTheFuckHome](https://staythefuckhome.com/), the [Staying Home Club](https://stayinghome.club/) is maintaining a running list of over a thousand companies and universities mandating that employees and students work from home, as well as events that have been canceled or moved online. Quarantining yourself might feel lonely, but here's solid proof that you're far from alone right now. A bit more family-friendly than [#StayTheFuckHome](https://staythefuckhome.com/), the [Staying Home Club](https://stayinghome.club/) is maintaining a running list of over a thousand companies and universities mandating that employees and students work from home, as well as events that have been canceled or moved online. Quarantining yourself might feel lonely, but here's solid proof that you're far from alone right now.
<figure>
<a className="no-underline" href="https://stayinghome.club/" target="_blank" rel="noopener noreferrer">
<Image <Image
src="/static/images/notes/coronavirus-open-source/stayinghome.png" src="/static/images/notes/coronavirus-open-source/stayinghome.png"
width="600" width="600"
height="137" height="137"
alt="Staying Home Club" alt="Staying Home Club"
/> />
</a>
</figure>
## [Nextstrain for nCoV](https://nextstrain.org/ncov) <Octocat repo="nextstrain/ncov" /> ## [Nextstrain for nCoV](https://nextstrain.org/ncov) <Octocat repo="nextstrain/ncov" />
This one is a bit over my head, but apparently [Nextstrain](https://nextstrain.org/) is a pretty impressive open-source service targeted at genome data analysis and visualization of different pathogens. Their [COVID-19 page](https://nextstrain.org/ncov) is still awe-inspiring to look at for a layman like me, but probably a thousand times more so if you're an actual scientist — in which case, the [genome data they've open-sourced](https://github.com/nextstrain/ncov) might be of interest to you. This one is a bit over my head, but apparently [Nextstrain](https://nextstrain.org/) is a pretty impressive open-source service targeted at genome data analysis and visualization of different pathogens. Their [COVID-19 page](https://nextstrain.org/ncov) is still awe-inspiring to look at for a layman like me, but probably a thousand times more so if you're an actual scientist — in which case, the [genome data they've open-sourced](https://github.com/nextstrain/ncov) might be of interest to you.
<figure>
<a className="no-underline" href="https://nextstrain.org/ncov" target="_blank" rel="noopener noreferrer">
<Image <Image
src="/static/images/notes/coronavirus-open-source/nextstrain.png" src="/static/images/notes/coronavirus-open-source/nextstrain.png"
width="865" width="865"
height="345" height="345"
alt="Nextstrain for nCOV" alt="Nextstrain for nCOV"
/> />
</a>
</figure>
## [Johns Hopkins 2019-nCoV Data](https://systems.jhu.edu/research/public-health/ncov/) <Octocat repo="CSSEGISandData/COVID-19" /> ## [Johns Hopkins 2019-nCoV Data](https://systems.jhu.edu/research/public-health/ncov/) <Octocat repo="CSSEGISandData/COVID-19" />
Johns Hopkins University's [visual COVID-19 global dashboard](https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6) has been bookmarked as my go-to source of information since the beginning of this crisis earlier this year. Now, JHU's [Center for Systems Science and Engineering](https://systems.jhu.edu/) has open-sourced [their data and analysis](https://github.com/CSSEGISandData/COVID-19) for anybody to use. Johns Hopkins University's [visual COVID-19 global dashboard](https://www.arcgis.com/apps/opsdashboard/index.html#/bda7594740fd40299423467b48e9ecf6) has been bookmarked as my go-to source of information since the beginning of this crisis earlier this year. Now, JHU's [Center for Systems Science and Engineering](https://systems.jhu.edu/) has open-sourced [their data and analysis](https://github.com/CSSEGISandData/COVID-19) for anybody to use.
<figure>
<a
className="no-underline"
href="https://systems.jhu.edu/research/public-health/ncov/"
target="_blank"
rel="noopener noreferrer"
>
<Image <Image
src="/static/images/notes/coronavirus-open-source/hopkins.png" src="/static/images/notes/coronavirus-open-source/hopkins.png"
width="865" width="865"
height="426" height="426"
alt="Johns Hopkins 2019-nCoV Data" alt="Johns Hopkins 2019-nCoV Data"
/> />
</a>
</figure>
## [COVID-19 Scenarios](https://neherlab.org/covid19/) <Octocat repo="neherlab/covid19_scenarios" /> ## [COVID-19 Scenarios](https://neherlab.org/covid19/) <Octocat repo="neherlab/covid19_scenarios" />
@@ -182,31 +145,23 @@ COVID-19 Scenarios will probably hit everyone in a different way, depending on y
The maintainers at the [Neher Lab in Basel, Switzerland](https://neherlab.org/) even have a [discussion thread](https://github.com/neherlab/covid19_scenarios/issues/18) and an [open chatroom](https://spectrum.chat/covid19-scenarios/general/questions-discussions~8d49f461-a890-4beb-84f7-2d6ed0ae503a) set up for both scientists and non-scientists to ask questions and post ideas, which I find really nice of them! The maintainers at the [Neher Lab in Basel, Switzerland](https://neherlab.org/) even have a [discussion thread](https://github.com/neherlab/covid19_scenarios/issues/18) and an [open chatroom](https://spectrum.chat/covid19-scenarios/general/questions-discussions~8d49f461-a890-4beb-84f7-2d6ed0ae503a) set up for both scientists and non-scientists to ask questions and post ideas, which I find really nice of them!
<figure>
<a className="no-underline" href="https://neherlab.org/covid19/" target="_blank" rel="noopener noreferrer">
<Image <Image
src="/static/images/notes/coronavirus-open-source/scenarios.png" src="/static/images/notes/coronavirus-open-source/scenarios.png"
width="740" width="740"
height="433" height="433"
alt="COVID-19 Scenarios" alt="COVID-19 Scenarios"
/> />
</a>
</figure>
## [Corona Data Scraper](https://coronadatascraper.com/#home) <Octocat repo="lazd/coronadatascraper" /> ## [Corona Data Scraper](https://coronadatascraper.com/#home) <Octocat repo="lazd/coronadatascraper" />
Similar to the [COVID Tracking Project](https://covidtracking.com/) above, the [Corona Data Scraper](https://coronadatascraper.com/#home) has set up an automated process to scrape verified data from across the web to form massive CSV spreadsheets and JSON objects. They even [rate the quality](https://github.com/lazd/coronadatascraper#source-rating) of each source to prioritize data accordingly. Similar to the [COVID Tracking Project](https://covidtracking.com/) above, the [Corona Data Scraper](https://coronadatascraper.com/#home) has set up an automated process to scrape verified data from across the web to form massive CSV spreadsheets and JSON objects. They even [rate the quality](https://github.com/lazd/coronadatascraper#source-rating) of each source to prioritize data accordingly.
<figure>
<a className="no-underline" href="https://coronadatascraper.com/#home" target="_blank" rel="noopener noreferrer">
<Image <Image
src="/static/images/notes/coronavirus-open-source/coronadatascraper.png" src="/static/images/notes/coronavirus-open-source/coronadatascraper.png"
width="750" width="750"
height="358" height="358"
alt="Corona Data Scraper" alt="Corona Data Scraper"
/> />
</a>
</figure>
## [Folding@home](https://foldingathome.org/covid19/) <Octocat repo="FoldingAtHome/coronavirus" /> ## [Folding@home](https://foldingathome.org/covid19/) <Octocat repo="FoldingAtHome/coronavirus" />
@@ -222,20 +177,11 @@ You can [download their software here](https://foldingathome.org/start-folding/)
To wrap this list up, I thought I'd include [yet another API](https://github.com/ExpDev07/coronavirus-tracker-api) fed by multiple data sources that you can use to create your own open-source project if any of these inspired you. This one is incredibly flexible in terms of [query parameters and endpoints](https://github.com/ExpDev07/coronavirus-tracker-api#api-endpoints) but they all return simple JSON responses like we all know and love. To wrap this list up, I thought I'd include [yet another API](https://github.com/ExpDev07/coronavirus-tracker-api) fed by multiple data sources that you can use to create your own open-source project if any of these inspired you. This one is incredibly flexible in terms of [query parameters and endpoints](https://github.com/ExpDev07/coronavirus-tracker-api#api-endpoints) but they all return simple JSON responses like we all know and love.
<figure>
<a
className="no-underline"
href="https://coronavirus-tracker-api.herokuapp.com/v2/locations"
target="_blank"
rel="noopener noreferrer"
>
<Image <Image
src="/static/images/notes/coronavirus-open-source/tracker-api.png" src="/static/images/notes/coronavirus-open-source/tracker-api.png"
width="712" width="712"
height="371" height="371"
alt="Coronavirus Tracker API" alt="Coronavirus Tracker API"
/> />
</a>
</figure>
### Stay safe (and [home](https://staythefuckhome.com/ "One last time...")), friends! ❤️ ### Stay safe (and [home](https://staythefuckhome.com/ "One last time...")), friends! ❤️

View File

@@ -12,21 +12,15 @@ image: "/static/images/notes/dropping-dropbox/email.png"
--- ---
import Image from "./components/media/Image"; import Image from "./components/media/Image";
import Figure from "./components/media/Figure";
import Tweet from "./components/media/Tweet"; import Tweet from "./components/media/Tweet";
import Video from "./components/media/Video"; import Video from "./components/media/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. 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> <Figure src="/static/images/notes/dropping-dropbox/email.png" width="504" height="223" priority>
<Image Deleting 401,907 files from Dropbox... 😬
src="/static/images/notes/dropping-dropbox/email.png" </Figure>
width="504"
height="223"
alt="Deleting 401,907 files from Dropbox... 😬"
priority
/>
<figcaption>Deleting 401,907 files from Dropbox... 😬</figcaption>
</figure>
## Five strikes, you're out... ## Five strikes, you're out...

View File

@@ -11,30 +11,21 @@ tags:
image: "/static/images/notes/finding-candidates-subdomain-takeovers/hackerone-2.png" image: "/static/images/notes/finding-candidates-subdomain-takeovers/hackerone-2.png"
--- ---
import Image from "./components/media/Image"; import Figure from "./components/media/Figure";
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. 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. 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> <Figure
<Image
src="/static/images/notes/finding-candidates-subdomain-takeovers/hackerone-2.png" src="/static/images/notes/finding-candidates-subdomain-takeovers/hackerone-2.png"
width="620" width="620"
height="347" height="347"
alt="Huge rewards for subdomain takeovers on HackerOne."
priority priority
/>
<figcaption>
<a
href="https://hackerone.com/hacktivity?querystring=subdomain%20takeover"
target="_blank"
rel="noopener noreferrer"
> >
Huge rewards for subdomain takeovers on HackerOne! [Huge rewards for subdomain takeovers on
</a> HackerOne!](https://hackerone.com/hacktivity?querystring=subdomain%20takeover)
</figcaption> </Figure>
</figure>
For a deep dive on the implications of takeovers, which can be a pretty serious vector of attack for malicious actors to obtain information from users of the targeted company, [Patrik Hudak](https://twitter.com/0xpatrik) wrote a [great post here](https://0xpatrik.com/subdomain-takeover/). Definitely take some time to skim through it and come back here when you're ready to hunt for a potential takeover yourself. For a deep dive on the implications of takeovers, which can be a pretty serious vector of attack for malicious actors to obtain information from users of the targeted company, [Patrik Hudak](https://twitter.com/0xpatrik) wrote a [great post here](https://0xpatrik.com/subdomain-takeover/). Definitely take some time to skim through it and come back here when you're ready to hunt for a potential takeover yourself.

View File

@@ -12,6 +12,7 @@ image: "/static/images/notes/github-actions/actions-flow.png"
--- ---
import Image from "./components/media/Image"; import Image from "./components/media/Image";
import Figure from "./components/media/Figure";
import Gist from "./components/media/Gist"; import Gist from "./components/media/Gist";
<Image <Image
@@ -26,17 +27,9 @@ 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. 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> <Figure src="/static/images/notes/github-actions/lighthouse-output.png" width="750" height="297">
<Image
src="/static/images/notes/github-actions/lighthouse-output.png"
width="750"
height="297"
alt="The results of a Lighthouse audit on this website, after running tests in a headless Google Chrome."
/>
<figcaption>
The results of a Lighthouse audit on this website, after running tests in a headless Google Chrome. The results of a Lighthouse audit on this website, after running tests in a headless Google Chrome.
</figcaption> </Figure>
</figure>
It's also been a fantastic avenue to dip my feet into the collaborative nature of GitHub and the open-source community. I've made some small apps in the past but these are the first projects where I'm regularly receiving new issues to help out with and impressive pull requests to merge. It's a great feeling! It's also been a fantastic avenue to dip my feet into the collaborative nature of GitHub and the open-source community. I've made some small apps in the past but these are the first projects where I'm regularly receiving new issues to help out with and impressive pull requests to merge. It's a great feeling!

View File

@@ -12,21 +12,12 @@ tags:
image: "/static/images/notes/how-to-backup-linux-server/apocalypse.png" image: "/static/images/notes/how-to-backup-linux-server/apocalypse.png"
--- ---
import Image from "./components/media/Image"; import Figure from "./components/media/Figure";
import Tweet from "./components/media/Tweet"; import Tweet from "./components/media/Tweet";
<figure> <Figure src="/static/images/notes/how-to-backup-linux-server/apocalypse.png" width="865" height="303" priority>
<Image **The Cloud-pocalypse:** Coming soon(er than you think) to a server near you.
src="/static/images/notes/how-to-backup-linux-server/apocalypse.png" </Figure>
width="865"
height="303"
alt="The Cloud-pocalypse: Coming soon(er than you think) to a server near you."
priority
/>
<figcaption>
<strong>The Cloud-pocalypse:</strong> Coming soon(er than you think) to a server near you.
</figcaption>
</figure>
Last month, the founder of [a small startup](https://raisup.com/) got quite a bit of [attention on Twitter](https://twitter.com/w3Nicolas/status/1134529316904153089) (and [Hacker News](https://news.ycombinator.com/item?id=20064169)) when he called out [DigitalOcean](https://www.digitalocean.com/) who, in his words, "killed" his company. Long story short: DigitalOcean's automated abuse system flagged the startup's account after they spun up about ten powerful droplets for some CPU-intensive jobs and deleted them shortly after — which is literally **the biggest selling point** of a "servers by the hour" company like DigitalOcean, by the way — and, after replying to the support ticket, an unsympathetic customer support agent [declined to reactivate](https://twitter.com/w3Nicolas/status/1134529372172509184) the account without explanation. [Nicolas](https://twitter.com/w3Nicolas) had no way of even accessing his data, turning the inconvenient but trivial task of migrating servers into a potentially fatal situation for his company. Last month, the founder of [a small startup](https://raisup.com/) got quite a bit of [attention on Twitter](https://twitter.com/w3Nicolas/status/1134529316904153089) (and [Hacker News](https://news.ycombinator.com/item?id=20064169)) when he called out [DigitalOcean](https://www.digitalocean.com/) who, in his words, "killed" his company. Long story short: DigitalOcean's automated abuse system flagged the startup's account after they spun up about ten powerful droplets for some CPU-intensive jobs and deleted them shortly after — which is literally **the biggest selling point** of a "servers by the hour" company like DigitalOcean, by the way — and, after replying to the support ticket, an unsympathetic customer support agent [declined to reactivate](https://twitter.com/w3Nicolas/status/1134529372172509184) the account without explanation. [Nicolas](https://twitter.com/w3Nicolas) had no way of even accessing his data, turning the inconvenient but trivial task of migrating servers into a potentially fatal situation for his company.

View File

@@ -12,19 +12,16 @@ image: "/static/images/notes/how-to-shrink-linux-virtual-disk-vmware/screen-shot
--- ---
import Image from "./components/media/Image"; import Image from "./components/media/Image";
import Figure from "./components/media/Figure";
<figure> <Figure
<Image
src="/static/images/notes/how-to-shrink-linux-virtual-disk-vmware/screen-shot-2018-12-07-at-2-04-04-pm.png" src="/static/images/notes/how-to-shrink-linux-virtual-disk-vmware/screen-shot-2018-12-07-at-2-04-04-pm.png"
width="620" width="620"
height="456" height="456"
alt="df -dh = WTF"
priority priority
/> >
<figcaption> `df -dh` = WTF
<code>df -dh</code> = WTF </Figure>
</figcaption>
</figure>
**[VMware Workstation](https://www.vmware.com/products/workstation-pro.html)** and **[Fusion](https://www.vmware.com/products/fusion.html)** normally work hard to minimize the size of virtual hard disks for optimizing the amount of storage needed on your host machine . On Windows virtual machines, [VMware has a "clean up" function](https://docs.vmware.com/en/VMware-Fusion/11/com.vmware.fusion.using.doc/GUID-6BB29187-F47F-41D1-AD92-1754036DACD9.html), which detects newly unused space and makes the size of the virtual hard disk smaller accordingly. You'll notice that even if you create a virtual machine with a capacity of 60 GB, for example, the actual size of the VMDK file will dynamically resize to fit the usage of the guest operating system. 60 GB is simply the maximum amount of storage allowed; if your guest operating system and its files amount to 20 GB, the VMDK file will simply be 20 GB. **[VMware Workstation](https://www.vmware.com/products/workstation-pro.html)** and **[Fusion](https://www.vmware.com/products/fusion.html)** normally work hard to minimize the size of virtual hard disks for optimizing the amount of storage needed on your host machine . On Windows virtual machines, [VMware has a "clean up" function](https://docs.vmware.com/en/VMware-Fusion/11/com.vmware.fusion.using.doc/GUID-6BB29187-F47F-41D1-AD92-1754036DACD9.html), which detects newly unused space and makes the size of the virtual hard disk smaller accordingly. You'll notice that even if you create a virtual machine with a capacity of 60 GB, for example, the actual size of the VMDK file will dynamically resize to fit the usage of the guest operating system. 60 GB is simply the maximum amount of storage allowed; if your guest operating system and its files amount to 20 GB, the VMDK file will simply be 20 GB.

View File

@@ -11,22 +11,19 @@ image: "/static/images/notes/millenial-with-hillary-clinton/24707394571_0818d4ab
noComments: true noComments: true
--- ---
import Image from "./components/media/Image"; import Figure from "./components/media/Figure";
import Video from "./components/media/Video"; import Video from "./components/media/Video";
{/* prettier-ignore */} <Figure
<figure>
<Image
src="/static/images/notes/millenial-with-hillary-clinton/24707394571_0818d4ab83_o-1-copy.jpg" src="/static/images/notes/millenial-with-hillary-clinton/24707394571_0818d4ab83_o-1-copy.jpg"
width="865" width="865"
height="411" height="411"
alt="Hillary for New Hampshire Winter Fellows with Hillary Clinton in Derry, NH (February 3, 2016)"
priority priority
/> >
<figcaption> [Hillary for New Hampshire](https://medium.com/@HillaryForNH) Winter Fellows with [Hillary
<a href="https://medium.com/@HillaryForNH" target="_blank" rel="noopener noreferrer">Hillary for New Hampshire</a> Winter Fellows with <a href="https://medium.com/@HillaryClinton" target="_blank" rel="noopener noreferrer">Hillary Clinton</a> in Derry, NH (<a href="https://www.flickr.com/photos/hillaryclinton/24707394571/" target="_blank" rel="noopener noreferrer">February 3, 2016</a>) Clinton](https://medium.com/@HillaryClinton) in Derry, NH ([February 3,
</figcaption> 2016](https://www.flickr.com/photos/hillaryclinton/24707394571/))
</figure> </Figure>
## Keeping in mind the big picture... ## Keeping in mind the big picture...
@@ -38,15 +35,13 @@ 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. 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> <Figure
<Image
src="/static/images/notes/millenial-with-hillary-clinton/9e58a-1bvweqv_ve2_c1tw5-ihrhw.jpg" src="/static/images/notes/millenial-with-hillary-clinton/9e58a-1bvweqv_ve2_c1tw5-ihrhw.jpg"
width="400" width="400"
height="500" height="500"
alt="The best birthday gift. 🎉" >
/> The best birthday gift. 🎉
<figcaption>The best birthday gift. 🎉</figcaption> </Figure>
</figure>
I had the incredible chance to meet Hillary the weekend before the New Hampshire primary. Her motorcade plowed through a quiet suburb in Manchester around noon and she hopped out to go knock on the doors of some lucky families. As neighbors started coming out of their houses to shake her hand, I couldn't restrain myself from at least trying to get close and wave hello. (By the way, it's amazing how casual the people in New Hampshire are about meeting presidential candidates.) I had the incredible chance to meet Hillary the weekend before the New Hampshire primary. Her motorcade plowed through a quiet suburb in Manchester around noon and she hopped out to go knock on the doors of some lucky families. As neighbors started coming out of their houses to shake her hand, I couldn't restrain myself from at least trying to get close and wave hello. (By the way, it's amazing how casual the people in New Hampshire are about meeting presidential candidates.)

View File

@@ -12,6 +12,7 @@ image: "/static/images/notes/my-first-code/jbb-screen1.png"
--- ---
import Image from "./components/media/Image"; import Image from "./components/media/Image";
import Figure from "./components/media/Figure";
<Image <Image
src="/static/images/notes/my-first-code/netscape.png" src="/static/images/notes/my-first-code/netscape.png"
@@ -31,16 +32,9 @@ Hopefully we can all look back at our first projects and be proud of how far we'
--- ---
<figure> <Figure src="/static/images/notes/my-first-code/jbb-logo.png" width="640" height="80">
<a className="no-underline" href="https://github.com/jakejarvis/jbb" target="_blank" rel="noopener noreferrer"> [Jake's Bulletin Board](https://github.com/jakejarvis/jbb)
<Image src="/static/images/notes/my-first-code/jbb-logo.png" width="640" height="80" alt="Jake's Bulletin Board" /> </Figure>
</a>
<figcaption>
<a href="https://github.com/jakejarvis/jbb" target="_blank" rel="noopener noreferrer">
Jake's Bulletin Board
</a>
</figcaption>
</figure>
Aside from my [first HTML creation](https://jakejarvis.github.io/my-first-website/) (circa 2001), my first real coding project was in 2003: a PHP 4 masterpiece creatively titled **Jake's Bulletin Board**. I've published the [source code in full on GitHub](https://github.com/jakejarvis/jbb) for your viewing pleasure and highlighted the best/worst parts below. Aside from my [first HTML creation](https://jakejarvis.github.io/my-first-website/) (circa 2001), my first real coding project was in 2003: a PHP 4 masterpiece creatively titled **Jake's Bulletin Board**. I've published the [source code in full on GitHub](https://github.com/jakejarvis/jbb) for your viewing pleasure and highlighted the best/worst parts below.
@@ -169,24 +163,16 @@ 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)) The installation "wizard" (that's the joke, I presume...) ([sql_submit.php](https://github.com/jakejarvis/jbb/blob/87b606797414b2fe563af85e269566fc5e076cc5/setup/sql_submit.php))
<figure> <Figure src="/static/images/notes/my-first-code/jbb-screen1.png" width="865" height="458">
<Image JBB Installation Wizard
src="/static/images/notes/my-first-code/jbb-screen1.png" </Figure>
width="865"
height="458"
alt="JBB Installation Wizard"
/>
<figcaption>JBB Installation Wizard</figcaption>
</figure>
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)) 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> <Figure src="/static/images/notes/my-first-code/jbb-screen3.png" width="865" height="561">
<Image src="/static/images/notes/my-first-code/jbb-screen3.png" width="865" height="561" alt="JBB Homepage" /> JBB Homepage
<figcaption>JBB Homepage</figcaption> </Figure>
</figure>
<figure> <Figure src="/static/images/notes/my-first-code/jbb-screen4.png" width="865" height="493">
<Image src="/static/images/notes/my-first-code/jbb-screen4.png" width="865" height="493" alt="JBB Post" /> JBB Post
<figcaption>JBB Post</figcaption> </Figure>
</figure>

View File

@@ -12,15 +12,17 @@ image: "/static/images/notes/no-homo-still-raps-motto/1_b41ztscbaxqi60snwsswfw.j
noComments: true noComments: true
--- ---
import Image from "./components/media/Image"; import Figure from "./components/media/Figure";
{/* prettier-ignore */} <Figure
<figure> src="/static/images/notes/no-homo-still-raps-motto/1_b41ztscbaxqi60snwsswfw.jpg"
<Image src="/static/images/notes/no-homo-still-raps-motto/1_b41ztscbaxqi60snwsswfw.jpg" width="865" height="364" priority /> width="865"
<figcaption> height="364"
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. priority
</figcaption> >
</figure> This essay was written for Professor David Valdes-Greenwood's "Love & Sexuality" class at [Tufts
University](https://www.tufts.edu/) in April 2012.
</Figure>
> _Too many faggot n\*ggas clocking my spending, exercising your gay-like minds like Richard Simmons ... Fucking faggot-ass light skin n\*ggas, get the fuck out of my face ... It's crazy how you can go from being Joe Blow, to everybody on your dick, no homo ... You homo n\*ggas getting AIDS in the ass, while the homie here's trying to get paid in advance ... If y'all leave me alone this wouldn't be my M.O., I wouldn't have to go, eenee-meene-minie-moe,' catch a homo by his toe, man I don't know no more..._ > _Too many faggot n\*ggas clocking my spending, exercising your gay-like minds like Richard Simmons ... Fucking faggot-ass light skin n\*ggas, get the fuck out of my face ... It's crazy how you can go from being Joe Blow, to everybody on your dick, no homo ... You homo n\*ggas getting AIDS in the ass, while the homie here's trying to get paid in advance ... If y'all leave me alone this wouldn't be my M.O., I wouldn't have to go, eenee-meene-minie-moe,' catch a homo by his toe, man I don't know no more..._
@@ -36,14 +38,9 @@ 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. 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> <Figure src="/static/images/notes/no-homo-still-raps-motto/66574-132xjztnwqcm40hmdrec08q.jpg" width="700" height="464">
<Image Frank Micelotta/Getty Images
src="/static/images/notes/no-homo-still-raps-motto/66574-132xjztnwqcm40hmdrec08q.jpg" </Figure>
width="700"
height="464"
/>
<figcaption>Frank Micelotta/Getty Images</figcaption>
</figure>
Eminem is a prime example of this. After rapping about "homos" and "fags" for years, his third studio album, _The Marshall Mathers LP_, finally saw mainstream recognition and acclaim, including the nomination for Best Rap Album and Album of the Year at the 2001 Grammy Awards. After both the National Academy of Recording Arts & Sciences and CBS "endured a storm of protest over the rapper's best album nomination" due to his use of homophobic slurs, Eminem announced a duet with Elton John to be performed at the Grammy ceremony. "I'd rather tear down walls between people than build them up. If I thought for one minute that he was hateful, I wouldn't do it," John said in defense of the performance. Eminem is a prime example of this. After rapping about "homos" and "fags" for years, his third studio album, _The Marshall Mathers LP_, finally saw mainstream recognition and acclaim, including the nomination for Best Rap Album and Album of the Year at the 2001 Grammy Awards. After both the National Academy of Recording Arts & Sciences and CBS "endured a storm of protest over the rapper's best album nomination" due to his use of homophobic slurs, Eminem announced a duet with Elton John to be performed at the Grammy ceremony. "I'd rather tear down walls between people than build them up. If I thought for one minute that he was hateful, I wouldn't do it," John said in defense of the performance.
@@ -71,14 +68,9 @@ 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.'" 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> <Figure src="/static/images/notes/no-homo-still-raps-motto/f9d7a-1gad6zdgng2-mjsedg5igwa.jpg" width="350" height="527">
<Image Sarah Taylor/Fashion Magazine
src="/static/images/notes/no-homo-still-raps-motto/f9d7a-1gad6zdgng2-mjsedg5igwa.jpg" </Figure>
width="350"
height="527"
/>
<figcaption>Sarah Taylor/Fashion Magazine</figcaption>
</figure>
Unfortunately, not all rappers — including and especially the most popular and celebrated — are not as enlightened as today's up-and-comers such as Nicki Minaj and A$AP Rocky. Kanye West, one of the rappers quoted before for shouting "no homo" on Jay-Z's number-one single _Run This Town_ and (in)famous for speaking what's on his mind, was the target of countless questions about his sexuality after his sudden attendance at Paris fashion shows and interest in women's designer clothing. When asked by DJ Sway for MTV News to respond to accusations from fans that he "dresses gay," West responded, "Your dress don't give away whether or not you like a man. Think about actors that straight dress up like a woman or something like that. People wanna label me and throw that on me all the time, but I'm so secure with my manhood." Unfortunately, not all rappers — including and especially the most popular and celebrated — are not as enlightened as today's up-and-comers such as Nicki Minaj and A$AP Rocky. Kanye West, one of the rappers quoted before for shouting "no homo" on Jay-Z's number-one single _Run This Town_ and (in)famous for speaking what's on his mind, was the target of countless questions about his sexuality after his sudden attendance at Paris fashion shows and interest in women's designer clothing. When asked by DJ Sway for MTV News to respond to accusations from fans that he "dresses gay," West responded, "Your dress don't give away whether or not you like a man. Think about actors that straight dress up like a woman or something like that. People wanna label me and throw that on me all the time, but I'm so secure with my manhood."
@@ -86,27 +78,17 @@ 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. 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> <Figure src="/static/images/notes/no-homo-still-raps-motto/a5c2a-1fkblnzkye3g04gdvsbbtpa.jpg" width="580" height="389">
<Image Amy Odell/New York Magazine Fashion
src="/static/images/notes/no-homo-still-raps-motto/a5c2a-1fkblnzkye3g04gdvsbbtpa.jpg" </Figure>
width="580"
height="389"
/>
<figcaption>Amy Odell/New York Magazine Fashion</figcaption>
</figure>
Lil Wayne's performance at MTV's Video Music Awards last year showed the community's lack of progress in the area of homophobia. The performance generated tons of instantaneous buzz on the Internet, but not for the reasons Wayne had hoped. Instead of his musical performance being discussed, the topic instead turned to his wardrobe. Viewers of the live award show started wondering and asking online, _"Is Lil Wayne wearing women's pants right now?"_ Lil Wayne's performance at MTV's Video Music Awards last year showed the community's lack of progress in the area of homophobia. The performance generated tons of instantaneous buzz on the Internet, but not for the reasons Wayne had hoped. Instead of his musical performance being discussed, the topic instead turned to his wardrobe. Viewers of the live award show started wondering and asking online, _"Is Lil Wayne wearing women's pants right now?"_
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). 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> <Figure src="/static/images/notes/no-homo-still-raps-motto/a805a-1ghqzd91ei4fdntwmzwxw6g.jpg" width="350" height="511">
<Image Martin Rose/Getty Images
src="/static/images/notes/no-homo-still-raps-motto/a805a-1ghqzd91ei4fdntwmzwxw6g.jpg" </Figure>
width="350"
height="511"
/>
<figcaption>Martin Rose/Getty Images</figcaption>
</figure>
In the most revealing and straightforward social experiment yet, 21-year-old rapper Lil B, famous for his intentionally offbeat rhythm, extremely loose rhymes, and, according to him, over 3,000 songs, some with ridiculous titles such as "I'm Miley Cyrus," "I'm God," "I'm Orange Juice," and "Wonton Soup," decided to test the rap community's homophobia once and for all. In April of last year, Lil B announced during his Coachella performance that his next independently released album would be titled _I'm Gay_. Lil B elaborated on the title, claiming "that he does not partake in that lifestyle but, but he wants to make a statement about the power of words, or lack thereof," but little of his reasoning made it past the headlines and onto the radar of rap fans other than the title, _I'm Gay_. In the most revealing and straightforward social experiment yet, 21-year-old rapper Lil B, famous for his intentionally offbeat rhythm, extremely loose rhymes, and, according to him, over 3,000 songs, some with ridiculous titles such as "I'm Miley Cyrus," "I'm God," "I'm Orange Juice," and "Wonton Soup," decided to test the rap community's homophobia once and for all. In April of last year, Lil B announced during his Coachella performance that his next independently released album would be titled _I'm Gay_. Lil B elaborated on the title, claiming "that he does not partake in that lifestyle but, but he wants to make a statement about the power of words, or lack thereof," but little of his reasoning made it past the headlines and onto the radar of rap fans other than the title, _I'm Gay_.

View File

@@ -11,18 +11,17 @@ image: "/static/images/notes/presidential-candidates-404-pages/obama-laughing.jp
--- ---
import Image from "./components/media/Image"; import Image from "./components/media/Image";
import Figure from "./components/media/Figure";
import Video from "./components/media/Video"; import Video from "./components/media/Video";
<figure> <Figure
<Image
src="/static/images/notes/presidential-candidates-404-pages/obama-laughing.jpg" src="/static/images/notes/presidential-candidates-404-pages/obama-laughing.jpg"
width="865" width="865"
height="460" height="460"
alt="President Barack H. Obama, probably ranking 404 pages."
priority priority
/> >
<figcaption>President Barack H. Obama, probably ranking 404 pages.</figcaption> President Barack H. Obama, probably ranking some of these 404 pages.
</figure> </Figure>
Ever since [President Obama injected technology](https://arstechnica.com/information-technology/2012/11/built-to-win-deep-inside-obamas-campaign-tech/) into presidential politics in a historic way, one of the few bright spots of the incredibly long and exhausting race for me has been inspecting each candidate's campaign website. They end up revealing a great deal about how much each of them is willing to invest in the internet, and how young and innovative (and potentially funny) the staff members they attract are. Ever since [President Obama injected technology](https://arstechnica.com/information-technology/2012/11/built-to-win-deep-inside-obamas-campaign-tech/) into presidential politics in a historic way, one of the few bright spots of the incredibly long and exhausting race for me has been inspecting each candidate's campaign website. They end up revealing a great deal about how much each of them is willing to invest in the internet, and how young and innovative (and potentially funny) the staff members they attract are.

View File

@@ -12,20 +12,16 @@ image: "/static/images/notes/security-headers-cloudflare-workers/security-header
--- ---
import Image from "./components/media/Image"; import Image from "./components/media/Image";
import Figure from "./components/media/Figure";
{/* prettier-ignore */} <Figure
<figure>
<Image
src="/static/images/notes/security-headers-cloudflare-workers/security-headers.png" src="/static/images/notes/security-headers-cloudflare-workers/security-headers.png"
width="700" width="700"
height="275" height="275"
alt="An A+ security grade for this website!"
priority priority
/> >
<figcaption> An [A+ security grade](https://securityheaders.com/?q=jarv.is&amp;followRedirects=on) for this website!
An <a href="https://securityheaders.com/?q=jarv.is&amp;followRedirects=on" target="_blank" rel="noopener noreferrer">A+ security grade</a> for this website! </Figure>
</figcaption>
</figure>
In 2019, it's becoming more and more important to harden websites via HTTP response headers, which all modern browsers parse and enforce. Multiple standards have been introduced over the past few years to protect users from various attack vectors, including `Content-Security-Policy` for injection protection, `Strict-Transport-Security` for HTTPS enforcement, `X-XSS-Protection` for cross-site scripting prevention, `X-Content-Type-Options` to enforce correct MIME types, `Referrer-Policy` to limit information sent with external links, [and many, many more](https://www.netsparker.com/whitepaper-http-security-headers/). In 2019, it's becoming more and more important to harden websites via HTTP response headers, which all modern browsers parse and enforce. Multiple standards have been introduced over the past few years to protect users from various attack vectors, including `Content-Security-Policy` for injection protection, `Strict-Transport-Security` for HTTPS enforcement, `X-XSS-Protection` for cross-site scripting prevention, `X-Content-Type-Options` to enforce correct MIME types, `Referrer-Policy` to limit information sent with external links, [and many, many more](https://www.netsparker.com/whitepaper-http-security-headers/).

View File

@@ -12,25 +12,13 @@ image: "/static/images/notes/shodan-search-queries/shodan.png"
--- ---
import Image from "./components/media/Image"; import Image from "./components/media/Image";
import Figure from "./components/media/Figure";
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. 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> <Figure src="/static/images/notes/shodan-search-queries/shodan.png" width="865" height="248" priority>
<a className="no-underline" href="https://account.shodan.io/register" target="_blank" rel="noopener noreferrer"> [**Most search filters require a Shodan account.**](https://account.shodan.io/register)
<Image </Figure>
src="/static/images/notes/shodan-search-queries/shodan.png"
width="865"
height="248"
alt="Most search filters require a Shodan account."
priority
/>
</a>
<figcaption>
<a href="https://account.shodan.io/register" target="_blank" rel="noopener noreferrer">
<strong>Most search filters require a Shodan account.</strong>
</a>
</figcaption>
</figure>
You can assume these queries only return unsecured/open instances when possible. For your own legal benefit, do not attempt to login (even with default passwords) if they aren't! Narrow down results by adding filters like `country:US` or `org:"Harvard University"` or `hostname:"nasa.gov"` to the end. You can assume these queries only return unsecured/open instances when possible. For your own legal benefit, do not attempt to login (even with default passwords) if they aren't! Narrow down results by adding filters like `country:US` or `org:"Harvard University"` or `hostname:"nasa.gov"` to the end.
@@ -251,15 +239,9 @@ 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) [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> <Figure src="/static/images/notes/shodan-search-queries/vnc.png" width="500" height="375">
<Image The first result right now. 😞
src="/static/images/notes/shodan-search-queries/vnc.png" </Figure>
width="500"
height="375"
alt="The first result right now. 😞"
/>
<figcaption>The first result right now. 😞</figcaption>
</figure>
### Windows RDP [🔎 →](https://www.shodan.io/search?query=%22%5Cx03%5Cx00%5Cx00%5Cx0b%5Cx06%5Cxd0%5Cx00%5Cx00%5Cx124%5Cx00%22) ### Windows RDP [🔎 →](https://www.shodan.io/search?query=%22%5Cx03%5Cx00%5Cx00%5Cx0b%5Cx06%5Cxd0%5Cx00%5Cx00%5Cx124%5Cx00%22)

View File

@@ -10,28 +10,15 @@ tags:
image: "/static/images/notes/y2k-sandbox/screenshot.png" image: "/static/images/notes/y2k-sandbox/screenshot.png"
--- ---
import Image from "./components/media/Image"; import Figure from "./components/media/Figure";
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? 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. 🤓 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> <Figure src="/static/images/notes/y2k-sandbox/screenshot.png" width="865" height="649" priority>
<a className="no-underline" href="https://y2k.app/" target="_blank" rel="noopener noreferrer"> [**Play in the Y2K Sandbox, at your own risk.**](https://y2k.app/)
<Image </Figure>
src="/static/images/notes/y2k-sandbox/screenshot.png"
width="865"
height="649"
alt="Play in the Y2K Sandbox, at your own risk."
priority
/>
</a>
<figcaption>
<a href="https://y2k.app/" target="_blank" rel="noopener noreferrer">
<strong>Play in the Y2K Sandbox, at your own risk.</strong>
</a>
</figcaption>
</figure>
The backend is powered by [**QEMU**](https://www.qemu.org/) (as a Pentium III emulator) inside isolated **Docker** containers, [**websocketd**](https://github.com/joewalnes/websocketd) (an **_awesome_** lightweight WebSockets server written in Go), and [**Cloudflare Tunnels**](https://www.cloudflare.com/products/tunnel/) (for some protection), all tied together with some [Ruby code](https://github.com/jakejarvis/y2k/blob/main/container/bin/boot.rb) and [shell scripts](https://github.com/jakejarvis/y2k/tree/main/host). ~~I'll push the backend scripts up to GitHub once I have a chance to untangle the spaghetti code. 🍝~~ The backend is powered by [**QEMU**](https://www.qemu.org/) (as a Pentium III emulator) inside isolated **Docker** containers, [**websocketd**](https://github.com/joewalnes/websocketd) (an **_awesome_** lightweight WebSockets server written in Go), and [**Cloudflare Tunnels**](https://www.cloudflare.com/products/tunnel/) (for some protection), all tied together with some [Ruby code](https://github.com/jakejarvis/y2k/blob/main/container/bin/boot.rb) and [shell scripts](https://github.com/jakejarvis/y2k/tree/main/host). ~~I'll push the backend scripts up to GitHub once I have a chance to untangle the spaghetti code. 🍝~~
@@ -41,17 +28,9 @@ 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? 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> <Figure src="/static/images/notes/y2k-sandbox/windows-me.png" width="320" height="92">
<Image **@microsoft** Please don't sue me.
src="/static/images/notes/y2k-sandbox/windows-me.png" </Figure>
width="320"
height="92"
alt="@microsoft Please don't sue me."
/>
<figcaption>
<strong>@microsoft</strong> Please don't sue me.
</figcaption>
</figure>
Feel free to [open an issue on GitHub](https://github.com/jakejarvis/y2k/issues) if you run into connection glitches or have any nostalgic inspiration for software you think would be cool to install persistently on the OS image. I certainly can't help with any actual Windows Me crashes, though — it was beyond help a long, long time ago. Like, [the day it came out](https://books.google.com/books?id=Jbft8HXJZwQC&lpg=PP1&pg=PA76#v=onepage&q&f=false). But it will always have a soft spot in my heart. Feel free to [open an issue on GitHub](https://github.com/jakejarvis/y2k/issues) if you run into connection glitches or have any nostalgic inspiration for software you think would be cool to install persistently on the OS image. I certainly can't help with any actual Windows Me crashes, though — it was beyond help a long, long time ago. Like, [the day it came out](https://books.google.com/books?id=Jbft8HXJZwQC&lpg=PP1&pg=PA76#v=onepage&q&f=false). But it will always have a soft spot in my heart.

View File

@@ -6,7 +6,7 @@ import { escape } from "html-escaper";
import { getMDXComponent } from "mdx-bundler/client"; import { getMDXComponent } from "mdx-bundler/client";
import Content from "../../components/Content"; import Content from "../../components/Content";
import Meta from "../../components/notes/Meta"; import Meta from "../../components/notes/Meta";
import CustomCode from "../../components/media/Code"; import CustomCode from "../../components/code-block/Code";
import { getNote, getNoteSlugs } from "../../lib/parse-notes"; import { getNote, getNoteSlugs } from "../../lib/parse-notes";
import * as config from "../../lib/config"; import * as config from "../../lib/config";
import type { GetStaticProps, GetStaticPaths } from "next"; import type { GetStaticProps, GetStaticPaths } from "next";