BradNut/awesome-uses
1
0
Fork 0
mirror of https://github.com/BradNut/awesome-uses synced 2025-09-08 17:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #1 from wesbos/master

Browse source 
Updating fork
This commit is contained in:
Jason Cory Alvernaz 2020-01-10 10:05:00 -08:00 committed by GitHub
commit 3d73108a5d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 20474 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
.github/workflows/populate-readme.yml vendored Normal file
View file

@ -0,0 +1,30 @@
name: Populate README.md from master
on:
push:
branches: master
paths: src/data.js
env:
CI: true
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: actions/setup-node@v1
with:
node-version: 13.x
- name: Populate README.md from master
run: |
node ./scripts/populate-readme.js
mv generated-readme.md readme.md
git add readme.md
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
git commit -m "chore: generate \`readme.md\`"
- name: Push changes
uses: ad-m/github-push-action@master
with:
github_token: ${{ secrets.GITHUB_TOKEN }}

71
.gitignore vendored Normal file
View file

@ -0,0 +1,71 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# dotenv environment variable files
.env*
# gatsby files
.cache/
public
# Mac files
.DS_Store
# Yarn
yarn-error.log
.pnp/
.pnp.js
# Yarn Integrity file
.yarn-integrity
haters/

7
gatsby-browser.js Normal file
View file

@ -0,0 +1,7 @@
import React from 'react';
import { FilterProvider } from './src/context/FilterContext';
import './static/fonts.css';
export const wrapRootElement = ({ element }) => (
<FilterProvider>{element}</FilterProvider>
);

31
gatsby-config.js Normal file
View file

@ -0,0 +1,31 @@
module.exports = {
siteMetadata: {
title: `/uses`,
description: `A list of /uses pages detailing developer setups.`,
author: `@wesbos`,
},
plugins: [
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-styled-components`,
],
};

76
gatsby-node.js Normal file
View file

@ -0,0 +1,76 @@
import people from './src/data.js';
import { tags, countries, devices } from './src/util/stats';
function sourceNodes({ actions, createNodeId, createContentDigest }) {
// Add People to the GraphQL API, we randomize the data on each build so no one gets their feelings hurt
people
.sort(() => Math.random() - 0.5)
.forEach(person => {
const nodeMeta = {
id: createNodeId(`person-${person.name}`),
parent: null,
children: [],
internal: {
type: `Person`,
mediaType: `text/html`,
content: JSON.stringify(person),
contentDigest: createContentDigest(person),
},
};
actions.createNode({ ...person, ...nodeMeta });
});
// Add tags to GraphQL API
tags().forEach(tag => {
const nodeMeta = {
id: createNodeId(`tag-${tag.name}`),
parent: null,
children: [],
internal: {
type: `Tag`,
mediaType: `text/html`,
content: JSON.stringify(tag),
contentDigest: createContentDigest(tag),
},
};
actions.createNode({ ...tag, ...nodeMeta });
});
// Add Countries to GraphQL API
countries().forEach(country => {
const nodeMeta = {
id: createNodeId(`country-${country.name}`),
parent: null,
children: [],
internal: {
type: `Country`,
mediaType: `text/html`,
content: JSON.stringify(country),
contentDigest: createContentDigest(country),
},
};
actions.createNode({ ...country, ...nodeMeta });
});
// Add Devices to GraphQL API
console.log(devices());
devices().forEach(device => {
const nodeMeta = {
id: createNodeId(`device-${device.name}`),
parent: null,
children: [],
internal: {
type: `device`,
mediaType: `text/html`,
content: JSON.stringify(device),
contentDigest: createContentDigest(device),
},
};
actions.createNode({ ...device, ...nodeMeta });
});
}
export { sourceNodes };

1
gatsby-ssr.js Normal file
View file

@ -0,0 +1 @@
export { wrapRootElement } from './gatsby-browser';

103
migration.md Normal file
View file

@ -0,0 +1,103 @@
We need to move these people over to the data.js file:
https://github.com/wesbos/awesome-uses/blob/website/src/data.js
Grab a random person, and fill out the info as best as possible.
If possible maybe ask the user on twitter to update or review theirs.
When done, check that person off.
* [x] [Wes Bos](https://wesbos.com/uses) — Web Developer, Tutorial Maker, Podcaster.
* [x] [Glenn Reyes](https://glennreyes.com/uses) - Independent Software Engineer, Trainer & Speaker.
* [x] [Smakosh](https://smakosh.com/the-tech-tools-I-use) - JavaScript Developer, indie maker.
* [ ] [Eric L. Barnes](https://ericlbarnes.com/uses/) - Laravel Developer, Maker, Writer
* [x] [Benjamin Lannon](https://lannonbr.com/uses/) - Web Developer, Open Source Contributor.
* [ ] [Thibault Maekelbergh](https://thibmaek.com/uses) - All-round developer, DIY enthousiast, record collector.
* [x] [Kent C. Dodds](https://kentcdodds.com/uses) - Web Developer, Educator, Live Streamer, Open Sourcerer.
* [ ] [Randy Oest, aka amazingrando](https://randyoest.com/uses/) - Lead Design and Frontend Engineer, Four Kitchens
* [ ] [Elijah Manor](https://elijahmanor.com/uses) - Front-End Developer and Educator
* [ ] [Dave Kiss](https://davekiss.com/uses) - Web Developer, Solopreneur, Adventurer
* [x] [Jonathan Suh](https://jonsuh.com/uses) - Designer, Developer
* [ ] [Manuel Wildauer](https://wildauer.io/uses) - Developer
* [ ] [Elliot Forbes](https://tutorialedge.net/uses/) - All-round Developer
* [ ] [Dr. Abstract](https://zimjs.com/uses/) - Founder of ZIM JavaScript Canvas Framework
* [ ] [Jay Collett](https://www.jaycollett.co/uses/) - Freelance web designer and front end developer with CraftCMS
* [ ] [Amit Merchant](https://www.amitmerchant.com/uses/) - Fullstack web developer, blogger.
* [ ] [Adam Greenough](https://adamgreenough.me/uses/) - Freelance Digital Designer & Web Developer
* [x] [Georgi Yanev](https://gyanev.com/uses/) - Web Developer, FPV drone pilot
* [ ] [Kumar Abhirup](https://kumar.now.sh/uses) - A 15yo Jnr. developer with a passion for learning 👋🏻
* [ ] [Chris Enns](https://chrisenns.com/uses/) - Podcast Editor & WordPress Wannabe
* [ ] [David Llop](https://davidllop.com/uses/) - Laravel & ChatBots Developer
* [ ] [Med Ben hartouz](https://benhartouz.com/uses/) - Fullstack Javascript Developer.
* [ ] [Łukasz Ostrowski](https://ostrowski.ninja/uses/) - Frontend developer
* [ ] [Tim Smith](https://www.iamtimsmith.com/uses) - Web developer, Blogger, and Freelancer
* [ ] [Jon Quach](https://jonquach.com/uses/) - Design Engineer
* [ ] [Tracy Osborn](https://limedaring.com/uses/) - Designer, Developer, Tech Author, Entreprenerd
* [ ] [Daniel Van Cuylenburg](https://dvanc.co/uses/) - Web Designer, Front-end Developer, Guitarist.
* [ ] [Aurel Tyson](https://aureltyson.info/uses) - iOS and backend developer
* [ ] [Nick Janetakis](https://nickjanetakis.com/uses) - Web developer, Sysadmin, Teacher
* [x] [Andrew Healey](https://healeycodes.com/uses/) - Fullstack Software Engineer, Blogger, Tutorial Creator.
* [ ] [Alex Carpenter](https://alexcarpenter.me/uses/) - Front-end Web Developer and Screencaster.
* [ ] [Wang Junxiao](http://www.feng0207.site/uses/) — Java Web Developer, Student.
* [ ] [Jeff Wen](https://sinchang.me/uses/) - Web Developer, Open Source Contributor
* [ ] [Tracy Osborn](https://limedaring.com/uses/) - Designer, Developer, Tech Author, Entreprenerd
* [ ] [Bruno Brito](https://brunobrito.pt/uses/) - Web Developer, Content Creator, Digital Marketing 🇵🇹
* [ ] [Lemon 🍋](https://ahoylemon.xyz/uses/) - Web Developer, Podcaster, Human Who Makes Dumb Shit
* [ ] [Kevin Jalbert](https://kevinjalbert.com/uses/) - Developer Lead (React/Rails), Blogger.
* [ ] [Swapnil Agarwal](https://swapnil.net/uses/) - Backend Developer, Aspiring Writer, Budding Designer
* [x] [Hugo Di Francesco](https://codewithhugo.com/uses/) - JavaScript Developer, Blogger
* [x] [Josiah Wiebe](https://jwie.be/uses/) - Full Stack Developer & Designer
* [ ] [Khalil Stemmler](https://khalilstemmler.com/uses/) - Fullstack Javascript Developer / Designer, Musician 🇨🇦
* [ ] [Pierre-Antoine _Leny_ Delnatte](https://leny.me/uses/) - Fullstack Web Developer, Bootcamp coach 🇧🇪
* [ ] [Harry Roberts](https://csswizardry.com/uses/) - Consultant Front-end Architect, designer, developer, writer and speaker.
* [ ] [Matt D. Smith](http://mds.is/using-stuff/) - Owner and Design Director at Studio Mds.
* [ ] [Ash Hitchcock](https://www.ashleyhitchcock.com/uses) - Front-end Developer 🇬🇧
* [ ] [Oscar te Giffel](https://oscartegiffel.com/uses/) - Fullstack Software engineer
* [ ] [John Michael Ferraris](https://jhnferraris.dev/uses/) - Fullstack Developer (that is still eager to learn), Runner
* [ ] [François Rabanel aka Pesko](https://peskoo.github.io/lasalledutemps/articles/2019-04/uses) - Fullstack Software Engineer
* [ ] [Jesse Burton](https://burtonmediainc.com/uses) - Web Developer, Freelancer, Blogger
* [ ] [Philipp John](https://www.jplace.de/uses) - Fullstack Web Developer
* [ ] [Enea Xharja](https://eneaxharja.com/uses) — Web Developer
* [ ] [Daniel Kim](https://www.danielkim.io/uses) — Software Engineer
* [ ] [Sam Baldwin](https://sambaldwin.info/uses) — Designer and front-end developer
* [ ] [Zack Eaton](https://zackeaton.com/uses/) - Student, Developer, Caffiene Enthusiast
* [x] [Brad Garropy](https://bradgarropy.com/uses) - self taught ⚛ frontender @ [adobe](https://www.adobe.com/). [blogger](https://bradgarropy.com), [streamer](https://youtube.com/bradgarropy), [tweeter](https://twitter.com/bradgarropy). 📝📺🐦
* [ ] [Stefan Zweifel](https://stefanzweifel.io/uses/) - Fullstack Web Developer
* [ ] [Ignacio Villanueva](https://ignaciodenuevo.com/uses) - Frontend Developer 🇪🇸
* [ ] [Sheree Peña](https://smariapena.com/uses) - Front Ender, Tester.
* [ ] [Pawel Grzybek](https://pawelgrzybek.com/uses/) - Software Engineer at Mindera
* [ ] [Jessica Dembe](https://www.jessicadembe.tech/uses/) - Software Engineer
* [ ] [Keziah Moselle](https://blog.keziahmoselle.fr/uses/) - Front-end developer
* [ ] [Scott Zirkel](https://scottzirkel.com/uses) - Developer, Designer, Artist, Writer
* [ ] [Maxence Poutord](https://www.maxpou.fr/uses/) - Front-end Engineer and Nomadic worker
* [x] [Jonathan Speek](https://speek.design/uses/) - Fullstack Developer, Designer, Musician
* [ ] [Nervewax](https://nervewax.com/uses/) - Designer / Developer
* [ ] [Niko Heikkilä](https://nikoheikkila.fi/uses/) - Backend Developer & DevOps Engineer at Paytrail
* [ ] [Sil van Diepen](https://silvandiepen.nl/uses/) - Creative Front-end Developer
* [ ] [Matthias Hampel](https://dev.to/fullstack_to/tools-services-i-use-je9) - Fullstack Software Engineer / DevOps Enthusiast
* [ ] [Ste Grainer](https://stegrainer.com/uses) - Product designer, front-end developer, and writer
* [x] [Scott Tolinski](https://kit.com/leveluptutorials/podcasting-screencasting-gear) - Web Developer, Tutorial Maker, Podcaster.
* [ ] [Ben Hong](https://www.bencodezen.io/uses/) - Senior Frontend Engineer @ Meltano GitLab
* [ ] [Danny de Vries](https://dandevri.es/uses/) - Indie Maker and Lecturer
* [x] [Scott Spence](https://scottspence.me/uses) - Web Engineer @ Karmarama
* [ ] [Stephen Senkomago Musoke](https://ssmusoke.com/uses/) - Software Engineer [METS](https://mets.or.ug/), [UCSF Informatics Hub](https://globalhealthsciences.ucsf.edu/resources/informatics-hub) & PHP lover by night 🇺🇬
* [ ] [Gideon Bamuleseyo](https://medium.com/developer-circle-kampala/what-i-use-my-tools-of-trade-552655db4b8d) - Software Engineer [Andela](https://andela.com/), JavaScript junkie 🇺🇬
* [ ] [Jason Cory Alvernaz](https://jasoncoryalvernaz.com/uses/) - Fullstack Web Developer, Freelancer, Designer
* [ ] [Freek Van der Herten](https://freek.dev/uses/) - Developer, Package Creator, Conference Speaker, Blogger 🇧🇪
* [ ] [Adam Wathan](https://adamwathan.me/uses/) - Fullstack Web Developer, Entrepeneur, Maker of courses, Speaker, Blogger, Podcaster 🇨🇦
* [x] [Josh Manders](https://joshmanders.com/uses/) - Full Snack Developer and Indie Maker 🌯
* [x] [Daniel Wirtz](https://danielwirtz.com/uses/) - Designer who codes @Crisp Studio
* [x] [Harry Wolff](https://hswolff.com/uses/) - Front-end engineer and YouTouber
* [x] [Pouria Ezzati](https://pouria.dev/uses/) - Web developer
* [x] [James Mills](https://jamesmills.co.uk/uses/) - Web Consultant
* [x] [Jeffrey Way](https://laracasts.com/blog/laracasts-uses) - Laracasts author
* [x] [Terry Godier](https://terrygodier.com/uses/) - Developer and Marketer
* [x] [David O'Trakoun](https://www.davidosomething.com/uses/) - Software Engineer
* [x] [Nuno Maduro](https://nunomaduro.com/uses/) - Software engineer, Open Source contributor, Speaker
* [x] [Erno Salo](https://endormi.io/uses/) - Full Stack Developer and Open Source Contributor
* [x] [James Brooks](https://james.brooks.page/uses/) - Software Developer at Laravel and Podcaster
* [x] [Béla Varga](http://ecmanauten.de/uses/) - Front-end Developer, Meetup & Event Organizer and UX/UI Designer
[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg

17272
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

53
package.json Normal file
View file

@ -0,0 +1,53 @@
{
"name": "uses",
"description": "What do you uses",
"version": "7.7.7",
"author": "Wes Bos",
"type": "module",
"eslintConfig": {
"extends": [
"wesbos"
]
},
"dependencies": {
"country-emoji": "^1.5.0",
"esm": "^3.2.25",
"gatsby": "^2.18.12",
"gatsby-image": "^2.2.34",
"gatsby-plugin-manifest": "^2.2.31",
"gatsby-plugin-offline": "^3.0.27",
"gatsby-plugin-react-helmet": "^3.1.16",
"gatsby-plugin-sharp": "^2.3.5",
"gatsby-plugin-styled-components": "^3.1.16",
"gatsby-plugin-web-font-loader": "^1.0.4",
"gatsby-source-filesystem": "^2.1.40",
"gatsby-transformer-sharp": "^2.3.7",
"normalize.css": "^8.0.1",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^5.2.1",
"styled-components": "5.0.0-rc.3"
},
"scripts": {
"build": "npx --node-arg '-r esm' gatsby build",
"develop": "npx --node-arg '-r esm' gatsby develop",
"start": "npm run develop",
"serve": "npx --node-arg '-r esm' gatsby serve",
"clean": "gatsby clean"
},
"devDependencies": {
"babel-eslint": "^9.0.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.1",
"eslint-config-prettier": "^4.3.0",
"eslint-config-wesbos": "0.0.19",
"eslint-plugin-html": "^5.0.5",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.17.0",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "^1.19.1"
}
}

183
readme.md
View file

@ -1,3 +1,9 @@
A list of `/uses` pages detailing developer setups, gear, software and configs.
Add your own `/uses` page in [data.js](https://github.com/wesbos/awesome-uses/blob/master/src/data.js).
This readme is auto-generated from the data.js file, so please don't PR this file.
```
▄████████ ▄█ █▄ ▄████████ ▄████████ ▄██████▄ ▄▄▄▄███▄▄▄▄ ▄████████
███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███
@ -21,84 +27,103 @@
# Awesome Uses ![Awesome][awesome-badge]
A list of /uses pages that detail apps and gear used by professional web developers.
Submit your own. URL must be /uses. Link your name along with a few words that describes what you do.
* [Wes Bos](https://wesbos.com/uses) — Web Developer, Tutorial Maker, Podcaster.
* [Smakosh](https://smakosh.com/the-tech-tools-I-use) - JavaScript Developer, indie maker.
* [Eric L. Barnes](https://ericlbarnes.com/uses/) - Laravel Developer, Maker, Writer
* [Benjamin Lannon](https://lannonbr.com/uses/) - Web Developer, Open Source Contributor.
* [Thibault Maekelbergh](https://thibmaek.com/uses) - All-round developer, DIY enthousiast, record collector.
* [Kent C. Dodds](https://kentcdodds.com/uses) - Web Developer, Educator, Live Streamer, Open Sourcerer.
* [Randy Oest, aka amazingrando](https://randyoest.com/uses/) - Lead Design and Frontend Engineer, Four Kitchens
* [Elijah Manor](https://elijahmanor.com/uses) - Front-End Developer and Educator
* [Dave Kiss](https://davekiss.com/uses) - Web Developer, Solopreneur, Adventurer
* [Jonathan Suh](https://jonsuh.com/uses) - Designer, Developer
* [Manuel Wildauer](https://wildauer.io/uses) - Developer
* [Elliot Forbes](https://tutorialedge.net/uses/) - All-round Developer
* [Dr. Abstract](https://zimjs.com/uses/) - Founder of ZIM JavaScript Canvas Framework
* [Jay Collett](https://www.jaycollett.co/uses/) - Freelance web designer and front end developer with CraftCMS
* [Amit Merchant](https://www.amitmerchant.com/uses/) - Fullstack web developer, blogger.
* [Adam Greenough](https://adamgreenough.me/uses/) - Freelance Digital Designer & Web Developer
* [Georgi Yanev](https://gyanev.com/uses/) - Web Developer, FPV drone pilot
* [Kumar Abhirup](https://kumar.now.sh/uses) - A 15yo Jnr. developer with a passion for learning 👋🏻
* [Chris Enns](https://chrisenns.com/uses/) - Podcast Editor & WordPress Wannabe
* [David Llop](https://davidllop.com/uses/) - Laravel & ChatBots Developer
* [Med Ben hartouz](https://benhartouz.com/uses/) - Fullstack Javascript Developer.
* [Łukasz Ostrowski](https://ostrowski.ninja/uses/) - Frontend developer
* [Tim Smith](https://www.iamtimsmith.com/uses) - Web developer, Blogger, and Freelancer
* [Jon Quach](https://jonquach.com/uses/) - Design Engineer
* [Tracy Osborn](https://limedaring.com/uses/) - Designer, Developer, Tech Author, Entreprenerd
* [Daniel Van Cuylenburg](https://dvanc.co/uses/) - Web Designer, Front-end Developer, Guitarist.
* [Aurel Tyson](https://aureltyson.info/uses) - iOS and backend developer
* [Nick Janetakis](https://nickjanetakis.com/uses) - Web developer, Sysadmin, Teacher
* [Andrew Healey](https://healeycodes.com/uses/) - Fullstack Software Engineer, Blogger, Tutorial Creator.
* [Alex Carpenter](https://alexcarpenter.me/uses/) - Front-end Web Developer and Screencaster.
* [Wang Junxiao](http://www.feng0207.site/uses/) — Java Web Developer, Student.
* [Jeff Wen](https://sinchang.me/uses/) - Web Developer, Open Source Contributor
* [Tracy Osborn](https://limedaring.com/uses/) - Designer, Developer, Tech Author, Entreprenerd
* [Bruno Brito](https://brunobrito.pt/uses/) - Web Developer, Content Creator, Digital Marketing 🇵🇹
* [Lemon 🍋](https://ahoylemon.xyz/uses/) - Web Developer, Podcaster, Human Who Makes Dumb Shit
* [Kevin Jalbert](https://kevinjalbert.com/uses/) - Developer Lead (React/Rails), Blogger.
* [Swapnil Agarwal](https://swapnil.net/uses/) - Backend Developer, Aspiring Writer, Budding Designer
* [Hugo Di Francesco](https://codewithhugo.com/uses/) - JavaScript Developer, Blogger
* [Josiah Wiebe](https://jwie.be/uses/) - Full Stack Developer & Designer
* [Khalil Stemmler](https://khalilstemmler.com/uses/) - Fullstack Javascript Developer / Designer, Musician 🇨🇦
* [Pierre-Antoine _Leny_ Delnatte](https://leny.me/uses/) - Fullstack Web Developer, Bootcamp coach 🇧🇪
* [Harry Roberts](https://csswizardry.com/uses/) - Consultant Front-end Architect, designer, developer, writer and speaker.
* [Matt D. Smith](http://mds.is/using-stuff/) - Owner and Design Director at Studio Mds.
* [Ash Hitchcock](https://www.ashleyhitchcock.com/uses) - Front-end Developer 🇬🇧
* [Oscar te Giffel](https://oscartegiffel.com/uses/) - Fullstack Software engineer
* [John Michael Ferraris](https://jhnferraris.dev/uses/) - Fullstack Developer (that is still eager to learn), Runner
* [François Rabanel aka Pesko](https://peskoo.github.io/lasalledutemps/articles/2019-04/uses) - Fullstack Software Engineer
* [Jesse Burton](https://burtonmediainc.com/uses) - Web Developer, Freelancer, Blogger
* [Philipp John](https://www.jplace.de/uses) - Fullstack Web Developer
* [Enea Xharja](https://eneaxharja.com/uses) — Web Developer
* [Daniel Kim](https://www.danielkim.io/uses) — Software Engineer
* [Sam Baldwin](https://sambaldwin.info/uses) — Designer and front-end developer
* [Zack Eaton](https://zackeaton.com/uses/) - Student, Developer, Caffiene Enthusiast
* [Brad Garropy](https://bradgarropy.com/uses) - self taught ⚛ frontender @ [adobe](https://www.adobe.com/). [blogger](https://bradgarropy.com), [streamer](https://youtube.com/bradgarropy), [tweeter](https://twitter.com/bradgarropy). 📝📺🐦
* [Stefan Zweifel](https://stefanzweifel.io/uses/) - Fullstack Web Developer
* [Ignacio Villanueva](https://ignaciodenuevo.com/uses) - Frontend Developer 🇪🇸
* [Sheree Peña](https://smariapena.com/uses) - Front Ender, Tester.
* [Pawel Grzybek](https://pawelgrzybek.com/uses/) - Software Engineer at Mindera
* [Jessica Dembe](https://www.jessicadembe.tech/uses/) - Software Engineer
* [Keziah Moselle](https://blog.keziahmoselle.fr/uses/) - Front-end developer
* [Scott Zirkel](https://scottzirkel.com/uses) - Developer, Designer, Artist, Writer
* [Maxence Poutord](https://www.maxpou.fr/uses/) - Front-end Engineer and Nomadic worker
* [Jonathan Speek](https://speek.design/uses/) - Fullstack Developer, Designer, Musician
* [Nervewax](https://nervewax.com/uses/) - Designer / Developer
* [Niko Heikkilä](https://nikoheikkila.fi/uses/) - Backend Developer & DevOps Engineer at Paytrail
* [Sil van Diepen](https://silvandiepen.nl/uses/) - Creative Front-end Developer
* [Matthias Hampel](https://dev.to/fullstack_to/tools-services-i-use-je9) - Fullstack Software Engineer / DevOps Enthusiast
* [Ste Grainer](https://stegrainer.com/uses) - Product designer, front-end developer, and writer
* [Scott Tolinski](https://kit.com/leveluptutorials/podcasting-screencasting-gear) - Web Developer, Tutorial Maker, Podcaster.
* [Ben Hong](https://www.bencodezen.io/uses/) - Senior Frontend Engineer @ Meltano GitLab
* [Danny de Vries](https://dandevri.es/uses/) - Indie Maker and Lecturer
* [Scott Spence](https://scottspence.me/uses) - Web Engineer @ Karmarama
* [Stephen Senkomago Musoke](https://ssmusoke.com/uses/) - Software Engineer [METS](https://mets.or.ug/), [UCSF Informatics Hub](https://globalhealthsciences.ucsf.edu/resources/informatics-hub) & PHP lover by night 🇺🇬
* [Gideon Bamuleseyo](https://medium.com/developer-circle-kampala/what-i-use-my-tools-of-trade-552655db4b8d) - Software Engineer [Andela](https://andela.com/), JavaScript junkie 🇺🇬
* [Jason Cory Alvernaz](https://jasoncoryalvernaz.com/uses/) - Fullstack Web Developer, Freelancer, Designer
* [Wes Bos](https://wesbos.com/uses) — Maker of this site. Web Developer, Tutorial Maker, Syntax.fm Podcaster, BBQ Lover
* [Praveen Kumar Purushothaman](https://blog.praveen.science/my-personal-development-environment/) — Cook, Cat Lover, Front End Architect, Full Stack Web Developer Evangelist & Cloud Computing Consultant.
* [Rene Pot](https://renepot.com/uses) — Developer Evangelist, JavaScript Developer, Cross-Platform App Developer and gamer
* [Gant Laborde](http://gantlaborde.com/uses/) — Speaker, GDE Web/ML, Podcaster, Trainer, Speaker, Author, Podcaster
* [Troy Forster](https://tforster.com/uses) — Consulting Technology Director and CTO for Hire
* [Kent C. Dodds](https://kentcdodds.com/uses) — JavaScript Software Engineer, speaker, and trainer
* [Hussain Aminu](https://hussain4real.github.io/Portfolio/uses) — Web Developer, Data Scientist
* [Glenn Reyes](https://glennreyes.com/uses) — Independent Software Engineer, trainer & speaker. Into sports & music.
* [Adam Jahnke](https://adamyonk.com/uses) — Caffiend, motorcyclist, climber, recovering perfectionist. I love to make the complex simple.
* [Andrew Healey](https://healeycodes.com/uses) — Software Engineer, Writer, Learner!
* [Scott Tolinski](https://scotttolinski.com/uses) — Web Developer, Tutorial Maker, Podcaster, Bboy
* [Josiah Wiebe](https://jwie.be/uses/) — Designer & developer, lifelong learner.
* [Benjamin Lannon](https://lannonbr.com/uses/) — Web Developer, Open Source Contributor, Livestreamer
* [Braden Watkins](https://bradenwatkins.dev/uses) — Student, Full Stack Developer, Lover of all things analog
* [Rick Calder](https://calder.io) — Full Stack Developer, Amateur Writer mostly hockey and development, Hack Musician
* [Lauro Silva](https://laurosilva.com/uses) — Software Engineer and Technical Writer
* [Nuno Maduro](https://nunomaduro.com/uses/) — Software engineer, Open Source contributor, Speaker
* [Adrian Marin](https://adrianthedev.com/uses) — Product-Minded Software Engineer, Digital nomad, no-nonsense enjoyer of life, friends and family.
* [Jahir Fiquitiva](https://jahir.dev/uses) — Passionate and Creative Full Stack Developer
* [Christophe Querton](https://kertof.com/what-i-use) — Software Engineer, xoogler, co-founder of @accelery. Full-stack, technical debt collector. Lover of the Outdoors, BBQ, sailing.
* [Lina María Montaño Ramírez](https://calypsobronte.me/uses) — Software Engineer at @holbertonschool, Web Developer, passionate and Organizer at @node_co
* [Brad Garropy](https://bradgarropy.com/uses) — Self taught frontender at Adobe, into lifting and country music.
* [Abdisalan Mohamud](https://abdisalan.com/uses) — Software Engineer, blogger, lifetime learner
* [Josh Barker](https://joshuabarker.com/uses) — Front end engineer at Red Ventures. Soccer enthusiast. Lover of stories.
* [Aaron Dunphy](https://aarondunphy.com/uses) — Full Stack Developer, Coffee Lover and Photo Taker
* [Mohamed Benhida](http://mohamedbenhida.com/uses) — Web Developer, Open source contributor.
* [Andrew McCombe](https://www.euperia.com/uses) — Experienced full stack web developer with a passion for testing.
* [Smakosh](https://smakosh.com/the-tech-tools-I-use) — Full stack JavaScript Developer, blogger and speaker.
* [Pouria Ezzati](https://pouria.dev/uses) — Web developer. Digs music, football and a e s t h e t i c s
* [Jonathan Suh](https://jonsuh.com/uses) — Designer, Developer, Sneakerhead
* [Jonathan Speek](https://speek.design/uses) — Developer & Musician
* [David O'Trakoun](https://www.davidosomething.com/uses/) — Software Engineer
* [Dean Harris](https://deanacus.com/uses/) — Front End Developer. Husband. Skateboarder. Occasional blogger
* [Michael Hoffmann](https://www.mokkapps.de/blog/my-development-setup/) — Freelance Software Engineer
* [Michael Le](https://www.michael1e.com/uses/) — Software Engineer
* [Sil van Diepen](https://www.silvandiepen.nl/uses/) — Creative Developer
* [Kilian Valkhof](https://kilianvalkhof.com/using/) — User experience developer
* [Timothy Miller](https://timothymiller.dev/uses) — Web Designer/Developer for hire. Wears lots of hats.
* [Christopher Hranj](https://brodan.biz/uses) — Software Engineer, Blogger, Musician, Ultimate player.
* [Vincent Ramdhanie](https://vincentramdhanie.com/uses) — Software Developer, Lecturer, Technical Writer and Mentor
* [Amir R Muntasser](https://arkm.xyz/uses/) — Web Developer, #vuenicorn wizard, Oxford comma enthusiast, and inventor of the ol' razzle dazzle.
* [Pavel Melnik](https://pavel.dev/uses) — Web developer, Technology enthusiast, Energy Management System expert
* [Miguel Ángel Durán](https://midu.dev/uses) — Front end passionate, Web Performance freak, casual speaker, <WTFront! /> podcast host, and gamer.
* [David Llop](https://davidllop.com/uses) — Full stack developer from Girona. Open Source contributor. Always Learning.
* [Josh Manders](https://joshmanders.com/uses/) — Full Snack Developer and Indie Maker
* [Daniel Wirtz](https://danielwirtz.com/uses/) — Designer who codes @Crisp Studio
* [Sanket Gandhi](https://sanketgandhi.com/uses) — Software Engineer
* [Harry Wolff](https://hswolff.com/uses/) — Front-end engineer and YouTuber
* [James Mills](https://jamesmills.co.uk/uses) — Work with PHP & Laravel at @clicksco in Dubai. Pleased to be part of the Laravel community.
* [Jeffrey Way](https://laracasts.com/blog/laracasts-uses) — Laracasts Author
* [Terry Godier](https://terrygodier.com/uses) — A developer and marketer of fine internet products.
* [Erno Salo](https://endormi.io/uses/) — Full Stack Developer and Open Source Contributor
* [Gokulakrishnan Kalaikovan](https://gokul.site/uses) — Web Developer, GDE, Open Source contributor, Speaker
* [James Brooks](https://james.brooks.page/uses/) — Software Developer at Laravel and Podcaster
* [Douglas Andreani](https://andreanidr.com) — Software Engineer and Tinkerer
* [Byurhan Beyzat](https://byurhanbeyzat.com/uses) — Front-End Developer. Engineer. Occasional blogger.
* [Richard Palacios G.](https://www.richardpalaciosg.dev/uses) — Web Developer, passionate apprentice, Community co-organizer
* [Mike Barkmin](https://www.barkmin.eu/uses/) — I'm a passionate developer and researcher at the University of Duisburg-Essen at the chair of Computer Science Education.
* [Hugo Di Francesco](https://codewithhugo.com/uses/) — JavaScript developer, blogger at codewithhugo.com, author of 'Professional JavaScript' with Packt.
* [Steve Heyes](https://steveheyes.co.uk/uses) — I like to use tech to build awesome things that makes peoples lives better
* [Diego Vazquez](https://gist.github.com/diurivj/78ca931c4b20dca1e1e13982fa9c309d) — Young guy who loves code. Full Stack Web Developer. Lead Teacher @ Ironhack
* [Rafael Quintanilha](https://rafaelquintanilha.com/about#uses) — Software Engineer. Blogs about Web Development, Front-end, React, UI/UX, Accessibility.
* [Ben Leivian](https://benleivian.com/uses) — A “seasoned” full-stack developer & visual designer 🍔
* [Mike Williamson](http://dikuw.com/) — Into IoT, BLE, node.js, Android and iOS native apps
* [Roman Husar](https://seemslikelegit.com/uses) — Tinkering, all the time.
* [Stephen Senkomago Musoke](https://ssmusoke.com/uses) — Software Engineer, eHealth Technologist, PHP Lover by night, Muganda, Goat Meat for Life, Coffee Drinker
* [Jérémy Mouzin](https://jeremymouzin.com/uses) — Software Engineer, Tutorial Maker, Entrepreneur, Blogger
* [Adam Laycock](https://www.arcath.net/uses) — IT Engineer, Web Developer & Blogger
* [Scott Spence](https://scottspence.me#uses) — Father, husband 👨‍👩‍👧 Web Developer. Just In Time learner ❤️ 👍 http://my.pronoun.is/he
* [Georgi Yanev](https://gyanev.com/uses/) — Software Engineer, FPV Drone Pilot, Blogger, YouTuber
* [Karl Horky](https://github.com/karlhorky/uses/blob/master/readme.md) — Founder, Teacher at https://upleveled.io
* [Andrej Jovanovic](https://blog.andrejjovanovic.com/uses) — DevOps System Engineer, Coder, Hardworker
* [Josh Farrant](https://farrant.me/uses) — Full-Stack JavaScript developer, creator of Shortcuts JS, astrophysicist and private pilot. I turn coffee, alchemy-like, into code.
* [Martin Chammah](https://martinchammah.dev/uses) — Full Stack Gatsby Developer @ ecomerciar
* [Pedro Assunção](https://pedroassuncao.com/pages/uses) — Senior Fullstack Software Developer, Tutorial Maker, Blogger
* [Marek Racík](https://racik.info/uses) — Full Stack Developer
* [Steven van Loef](https://steven.vanloef.com/uses) — Web Developer, App Developer
* [Richard Zilahi](https://gist.github.com/zilahir/4aaf5907999ea53711b2d554d22b0f3f) — Full stack developer, pug enthusiast, dying for pizza
* [Bezael Pérez](https://dominicode.com/uses) — Front-end Developer passionate. Trainer & speaker
* [Zander Martineau](https://zander.wtf/writing/my-setup) — Independent front-end-full-stack-UI-UX-engineer coder
* [Daniel Van Cuylenburg](https://danielvanc.com/uses) — Front-end Web Developer. Love all things CSS, ReactJS, GatsbyJS, NodeJS and U.I design
* [Chiamaka Ikeanyi](https://chiamakaikeanyi.dev/uses) — Software Engineer, Technical Writer, Poet
* [Francis Sunday](https://hakaselogs.me/2020-01-10/what-i-use) — Software Engineer | Gopher | Hacker
* [Juan Manuel Incaurgarat](https://kilinkis.me/uses) — Front end developer
* [Jared Clifton-Lee](https://jared.clifton-lee.com/uses) — Engineer of code; manager of people; trainer of cats
* [Carlos Junod](http://carlosjunod.me/uses/) — Husband, Dreamer, Full Stack Developer, Javascript passionate, Graphic Designer
* [James Kemp](https://www.jameskemp.dev/uses/) — Web Developer, Blogger, Freelancer
* [Tom Hazledine](https://tomhazledine.com/uses) — Data visualisation tinkerer and JS enthusiast. Podcaster. Nerd.
* [Khriztian Moreno](https://khriztianmoreno.dev/uses) — #Javascript Developer 🥑& Community builder 👨🏻‍💻♥️👨🏻‍🏫 | #MDE at @cloudinary | Producer @commitfm 🎙📻 | Co-Organize of @MedellinJS @avanetr
* [Mihai Serban](https://www.mihaiserban.dev/uses) — Software engineer in constant search for new and exciting technologies
* [Nick Janetakis](https://nickjanetakis.com/uses) — Freelance Web Developer, Web App Deployment, Tutorials, Technical death metal enthusiast
* [Kaleigh Scruggs](https://kaleighscruggs.com/uses) — Front-End Web Developer, stand-up comedian, loves Brazilian jiu-jitsu, tea, and being a helicopter dog mom
* [Ste Grainer](https://stegrainer.com/uses) — Designer, Developer
* [Yuri Yakovlev](https://mynameisyuri.com/uses) — Maker of this site. Web Developer, Tutorial Maker, Podcaster, BBQ Lover
* [José Carlos Correa](https://jossdz.com/uses) — Fullstack developer and speaker. Lead teacher @ironhack and gatsby teacher @platzi. Learning all the time.
* [Erv Walter](https://blog.ewal.net/uses/) — Father, Husband, Web Developer, Board Game Addict
* [Carlos Andres Charris Sandoval](https://carloscharris.com/uses) — Software Engineer
* [Juanito Fatas](https://juanitofatas.com/uses) — Program Tinker 🧙🏼‍♂️
[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg

13
scripts/populate-readme.js Normal file
View file

@ -0,0 +1,13 @@
import fs from 'fs';
import data from '../src/data.js';
/** @type {string} */
const readmeTemplate = fs.readFileSync('./scripts/readme-template.md', 'utf8');
const formatedData = data
.map(page => `* [${page.name}](${page.url}) — ${page.description}`)
.join('\r\n');
fs.writeFileSync(
'generated-readme.md',
readmeTemplate.replace('###DATA_PLACEHOLDER###', formatedData)
);

34
scripts/readme-template.md Normal file
View file

@ -0,0 +1,34 @@
# → Visit [uses.tech](https://uses.tech) for a good time
A list of `/uses` pages detailing developer setups, gear, software and configs.
Add your own `/uses` page in [data.js](https://github.com/wesbos/awesome-uses/blob/master/src/data.js).
This readme is auto-generated from the data.js file, so please don't PR this file.
```
▄████████ ▄█ █▄ ▄████████ ▄████████ ▄██████▄ ▄▄▄▄███▄▄▄▄ ▄████████
███ ███ ███ ███ ███ ███ ███ ███ ███ ███ ▄██▀▀▀███▀▀▀██▄ ███ ███
███ ███ ███ ███ ███ █▀ ███ █▀ ███ ███ ███ ███ ███ ███ █▀
███ ███ ███ ███ ▄███▄▄▄ ███ ███ ███ ███ ███ ███ ▄███▄▄▄
▀███████████ ███ ███ ▀▀███▀▀▀ ▀███████████ ███ ███ ███ ███ ███ ▀▀███▀▀▀
███ ███ ███ ███ ███ █▄ ███ ███ ███ ███ ███ ███ ███ █▄
███ ███ ███ ▄█▄ ███ ███ ███ ▄█ ███ ███ ███ ███ ███ ███ ███ ███
███ █▀ ▀███▀███▀ ██████████ ▄████████▀ ▀██████▀ ▀█ ███ █▀ ██████████
███ █▄ ▄████████ ▄████████ ▄████████
███ ███ ███ ███ ███ ███ ███ ███
███ ███ ███ █▀ ███ █▀ ███ █▀
███ ███ ███ ▄███▄▄▄ ███
███ ███ ▀███████████ ▀▀███▀▀▀ ▀███████████
███ ███ ███ ███ █▄ ███
███ ███ ▄█ ███ ███ ███ ▄█ ███
████████▀ ▄████████▀ ██████████ ▄████████▀
```
# Awesome Uses ![Awesome][awesome-badge]
###DATA_PLACEHOLDER###
[awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg

59
src/components/FavIcon.js Normal file
View file

@ -0,0 +1,59 @@
import React, { useEffect, useState, forwardRef, useRef } from 'react';
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
const id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
function useWickedFavIcon() {
const letters = [...'/USES!💩'];
const [index, setIndex] = useState(0);
const canvasRef = useRef(0);
useInterval(() => {
setIndex(index >= letters.length - 1 ? 0 : index + 1);
const letter = letters[index];
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#203447';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#ffc600';
ctx.font = `310px monospace`;
ctx.fillText(letter, 10, canvas.height - 10);
const data = canvas.toDataURL('image/png');
const link = document.querySelector("link[rel*='icon']");
link.type = 'image/x-icon';
link.href = data;
}, 350);
return { letter: letters[index], index, canvasRef };
}
export default function FavIcon() {
const { letter, index, canvasRef } = useWickedFavIcon();
return (
<div>
<canvas
style={{ border: '1px solid yellow' }}
ref={canvasRef}
width="200"
height="200"
hidden
></canvas>
</div>
);
}

188
src/components/Person.js Normal file
View file

@ -0,0 +1,188 @@
import React from 'react';
import PropTypes from 'prop-types';
import { name } from 'country-emoji';
import styled from 'styled-components';
import { Tag, Tags } from './Topics';
import * as icons from '../util/icons';
export default function Person({ person, currentTag }) {
const url = new URL(person.url);
const img = `https://logo.clearbit.com/${url.host}`;
return (
<PersonWrapper>
<PersonInner>
<header>
<img width="50" height="50" src={img} alt={person.name} />
<h3>
<a href={person.url} target="_blank" rel="noopener noreferrer">
{person.name} {person.emoji}
</a>
</h3>
<a
target="_blank"
rel="noopener noreferrer"
className="displayLink"
href={person.url}
>{`${url.host}${
url.pathname.endsWith('/')
? url.pathname.substr(0, url.pathname.length - 1)
: url.pathname
}`}</a>
</header>
<p>{person.description}</p>
<Tags>
{person.tags.map(tag => (
<Tag key={tag} as="li" currentTag={tag === currentTag} small>
{tag}
</Tag>
))}
</Tags>
</PersonInner>
<PersonDeets>
<span className="country" title={name(person.country)}>
{person.country}
</span>
{person.computer && (
<span title={`Computer: ${person.computer}`}>
<img
height="40"
src={icons[person.computer]}
alt={person.computer}
/>
</span>
)}
{person.phone && (
<span title={`Uses an ${person.phone}`}>
<img height="50" src={icons[person.phone]} alt={person.phone} />
</span>
)}
{person.twitter && (
<TwitterHandle>
<a
href={`https://twitter.com/${person.twitter}`}
target="_blank"
rel="noopener noreferrer"
>
<span className="at">@</span>
{person.twitter.replace('@', '')}
</a>
</TwitterHandle>
)}
</PersonDeets>
</PersonWrapper>
);
}
Person.propTypes = {
currentTag: PropTypes.string,
person: PropTypes.shape({
github: PropTypes.string,
name: PropTypes.string,
url: PropTypes.string,
emoji: PropTypes.string,
description: PropTypes.string,
tags: PropTypes.arrayOf(PropTypes.string),
country: PropTypes.string,
computer: PropTypes.oneOf(['apple', 'windows', 'linux']),
phone: PropTypes.oneOf(['iphone', 'android']),
twitter(props, propName, componentName) {
if (!/^@?(\w){1,15}$/.test(props[propName])) {
return new Error(
`Invalid prop \`${propName}\` supplied to` +
` \`${componentName}\`. This isn't a legit twitter handle.`
);
}
},
}),
};
// Component Styles
const PersonWrapper = styled.div`
border: 1px solid var(--vape);
border-radius: 5.34334px;
box-shadow: 10px -10px 0 var(--blue2);
display: grid;
grid-template-rows: 1fr auto auto;
`;
const PersonInner = styled.div`
padding: 2rem;
h3 {
margin: 0;
}
header {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto 1fr;
grid-gap: 0 1rem;
@media all and (max-width: 400px) {
grid-template-columns: 1fr;
}
img {
grid-row: 1 / -1;
background: var(--lightblue);
font-size: 1rem;
}
.displayLink {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
color: var(--vape);
letter-spacing: 1px;
font-size: 1.2rem;
text-overflow: ellipsis;
max-width: 100%;
overflow: hidden;
:hover {
color: var(--pink);
}
}
}
`;
const PersonDeets = styled.div`
display: flex;
border-top: 1px solid var(--vape);
> * {
flex: 1;
border-left: 1px solid var(--vape);
text-align: center;
padding: 1rem;
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: auto auto;
&:first-child {
border-left: 0;
}
}
a {
color: var(--vape);
}
.country {
font-size: 3rem;
padding-top: 2rem;
}
.phone {
padding: 0;
}
@media all and (max-width: 400px) {
display: grid;
grid-template-columns: 1fr 1fr;
> *:nth-child(1),
> *:nth-child(2) {
/* lol */
border-bottom: 1px solid var(--vape);
}
}
`;
const TwitterHandle = styled.span`
font-size: 1.24323423426928098420394802rem;
.at {
color: var(--yellow);
margin-right: 2px;
}
`;

123
src/components/Topics.js Normal file
View file

@ -0,0 +1,123 @@
import React, { useContext } from 'react';
import styled from 'styled-components';
import FilterContext from '../context/FilterContext';
import * as icons from '../util/icons';
export default function Topics() {
const { countries, tags, devices, currentTag, setCurrentTag } = useContext(
FilterContext
);
return (
<Tags>
{tags.map(tag => (
<Tag
currentTag={tag.name === currentTag}
htmlFor={`filter-${tag.name}`}
key={`filter-${tag.name}`}
clickable
>
<input
type="radio"
name="tag"
id={`filter-${tag.name}`}
value={tag.name}
checked={tag.name === currentTag}
onChange={e => setCurrentTag(e.currentTarget.value)}
/>
{tag.name}
<TagCount>{tag.count}</TagCount>
</Tag>
))}
{countries.map(tag => (
<Tag
currentTag={tag.emoji === currentTag}
htmlFor={`filter-${tag.name}`}
key={`filter-${tag.name}`}
title={tag.name}
clickable
>
<input
type="radio"
name="tag"
id={`filter-${tag.name}`}
value={tag.emoji}
checked={tag.emoji === currentTag}
onChange={e => setCurrentTag(e.currentTarget.value)}
/>
<TagEmoji>{tag.emoji}</TagEmoji>
<TagCount>{tag.count}</TagCount>
</Tag>
))}
{devices.map(tag => (
<Tag
currentTag={tag.name === currentTag}
htmlFor={`filter-${tag.name}`}
key={`filter-${tag.name}`}
title={tag.name}
clickable
>
<input
type="radio"
name="computer"
id={`filter-${tag.name}`}
value={tag.name}
checked={tag.name === currentTag}
onChange={e => setCurrentTag(e.currentTarget.value)}
/>
<img height="20px" src={icons[tag.name]} alt={tag.name} />
<TagCount>{tag.count}</TagCount>
</Tag>
))}
</Tags>
);
}
// Component Styles
const Tags = styled.div`
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
`;
const Tag = styled.label`
background: var(--pink);
margin: 2px;
border-radius: 3px;
font-size: ${props => (props.small ? `1.2rem;` : `1.7rem;`)};
padding: 5px;
color: hsla(0, 100%, 100%, 0.8);
transition: background-color 0.2s;
cursor: ${props => (props.clickable? "pointer" : "default")};
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
input {
display: none;
}
${props =>
props.currentTag &&
`
background: var(--yellow);
color: hsla(0, 100%, 0%, 0.8);
`}
`;
const TagEmoji = styled.span`
transform: scale(1.45);
`;
const TagCount = styled.span`
background: var(--blue);
font-size: 1rem;
color: white;
padding: 2px;
border-radius: 2px;
margin-left: 5px;
`;
export { Tag, Tags };

43
src/components/header.js Normal file
View file

@ -0,0 +1,43 @@
import React, { useEffect, useState, useRef } from 'react';
import { Link } from 'gatsby';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import styled from 'styled-components';
import FavIcon from './FavIcon';
function Header({ siteTitle }) {
return (
<HeaderWrapper className="header">
<FavIcon />
<Helmet>
<title>{siteTitle}</title>
</Helmet>
<div>
<h1>
<Link to="/">/uses</Link>
</h1>
<p>
A list of <code>/uses</code> pages detailing developer setups, gear,
software and configs.
</p>
</div>
</HeaderWrapper>
);
}
Header.propTypes = {
siteTitle: PropTypes.string,
};
Header.defaultProps = {
siteTitle: ``,
};
export default Header;
// Component Styles
const HeaderWrapper = styled.header`
text-align: center;
h1 {
font-size: 6rem;
}
`;

32
src/components/image.js Normal file
View file

@ -0,0 +1,32 @@
import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
/*
* This component is built using `gatsby-image` to automatically serve optimized
* images with lazy loading and reduced file sizes. The image is loaded using a
* `useStaticQuery`, which allows us to load the image from directly within this
* component, rather than having to pass the image data down from pages.
*
* For more information, see the docs:
* - `gatsby-image`: https://gatsby.dev/gatsby-image
* - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
*/
const Image = () => {
const data = useStaticQuery(graphql`
query {
placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
childImageSharp {
fluid(maxWidth: 300) {
...GatsbyImageSharpFluid
}
}
}
}
`)
return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
}
export default Image

128
src/components/layout.js Normal file
View file

@ -0,0 +1,128 @@
/**
* Layout component that queries for data
* with Gatsby's useStaticQuery component
*
* See: https://www.gatsbyjs.org/docs/use-static-query/
*/
import React from 'react';
import PropTypes from 'prop-types';
import { useStaticQuery, graphql } from 'gatsby';
import styled, { createGlobalStyle } from 'styled-components';
import Header from './header';
import 'normalize.css';
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`);
return (
<>
<GlobalStyle />
<Main>
<Header siteTitle={data.site.siteMetadata.title} />
{children}
<footer>
<center ya-i-used-a-center-tag="sue me">
<p>
Made by <a href="https://wesbos.com">Wes Bos</a> with{' '}
<a href="https://www.gatsbyjs.org">Gatsby</a> ©{' '}
{new Date().getFullYear() - Math.floor(Math.random() * 777)}
</p>
<p>
Source on{' '}
<a href="https://github.com/wesbos/awesome-uses/">GitHub</a>. Add
yourself!
</p>
<p>
Icons from <a href="https://icons8.com">icons8.com</a>
</p>
<p>
Domain provided by <a href="https://get.tech/">.Tech</a>
</p>
<p>
Hosted on <a href="https://netlify.com">Netlify</a>
</p>
</center>
</footer>
</Main>
</>
);
};
Layout.propTypes = {
children: PropTypes.node.isRequired,
};
export default Layout;
// Global Styles
const GlobalStyle = createGlobalStyle`
html {
--purple: #1e1f5c;
--blue: #203447;
--lightblue: #1f4662;
--blue2: #1C2F40;
--yellow: #ffc600;
--pink: #EB4471;
--vape: #d7d7d7;
background: var(--blue);
color: var(--vape);
font-family: 'Fira Mono', monospace;
font-weight: 100;
font-size: 10px;
}
body {
font-size: 2rem;
overflow-y: scroll;
/* overflow-x: hidden; */
}
h1,h2,h3,h4,h5,h6 {
font-weight: 500;
}
a {
color: var(--yellow);
text-decoration-color: var(--pink);
font-style: italic;
}
code {
background: var(--lightblue);
}
::selection {
background: var(--yellow);
color: var(--blue);
}
body::-webkit-scrollbar {
width: 12px;
}
html {
scrollbar-width: thin;
scrollbar-color: var(--yellow) var(--blue);
}
body::-webkit-scrollbar-track {
background: var(--blue);
}
body::-webkit-scrollbar-thumb {
background-color: var(--yellow) ;
border-radius: 6px;
border: 3px solid var(--blue);
}
`;
// Component Styles
const Main = styled.main`
display: grid;
grid-gap: 3rem;
max-width: 1900px;
padding: 0 3rem;
margin: 5rem auto;
`;

48
src/context/FilterContext.js Normal file
View file

@ -0,0 +1,48 @@
import React, { createContext, useState } from 'react';
import { useStaticQuery, graphql } from 'gatsby';
const FilterContext = createContext();
const FilterProvider = function({ children }) {
const [currentTag, setCurrentTag] = useState('all');
const { allTag, allCountry, allDevice } = useStaticQuery(graphql`
query FilterQuery {
allTag {
nodes {
name
count
}
}
allCountry {
nodes {
count
emoji
name
}
}
allDevice {
nodes {
count
name
}
}
}
`);
return (
<FilterContext.Provider
value={{
tags: allTag.nodes,
countries: allCountry.nodes,
devices: allDevice.nodes,
currentTag,
setCurrentTag,
}}
>
{children}
</FilterContext.Provider>
);
};
export default FilterContext;
export { FilterProvider };

1895
src/data.js Normal file
View file

File diff suppressed because it is too large Load diff

BIN
src/fonts/fira_mono-regular-webfont.woff Normal file
View file

Binary file not shown.

BIN
src/fonts/fira_mono-regular-webfont.woff2 Normal file
View file

Binary file not shown.

BIN
src/fonts/fira_mono-regular_italic-webfont.woff Normal file
View file

Binary file not shown.

BIN
src/fonts/fira_mono-regular_italic-webfont.woff2 Normal file
View file

Binary file not shown.

BIN
src/images/android.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
src/images/apple.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100px" height="100px"><path fill="#e3e3e4" d="M64.983,7c0,0,1.076,14.875-13.983,17h0.017c0,0-1.076-14.875,13.983-17H64.983z"/><path fill="#e3e3e4" d="M73,49.313c0-7.589,3.725-14.116,9-17.138C78.509,28.313,73.551,26,68.5,26c-7,0-10.75,5-16.5,5 s-9.5-5-16.5-5C26,26,17,34.125,17,45.5c0,9,2.046,17.914,5.125,24C27.5,80.125,34.5,85,38.5,85c4.5,0,6.688-3,13.5-3s9,3,13.5,3 c4,0,11-4.875,16.375-15.5c0.397-0.786,0.764-1.62,1.125-2.494C77.152,64.296,73,57.407,73,49.313z"/><path fill="#1f212b" d="M51.017,25c-0.525,0-0.969-0.406-1.006-0.93c-0.004-0.054-0.003-0.106,0.001-0.158 c-0.058-1.668-0.09-15.747,14.772-17.892c0.042-0.009,0.085-0.015,0.129-0.018c0.01,0,0.021-0.001,0.031-0.001 c0.517-0.066,0.973,0.339,1.046,0.858c0.014,0.097,0.013,0.191,0,0.283c0.055,1.9-0.065,15.708-14.767,17.835 C51.156,24.992,51.087,25,51.017,25z M63.999,8.183C53.298,10.296,52.09,19.567,52.001,22.817 C62.702,20.704,63.91,11.433,63.999,8.183z"/><path fill="#1f212b" d="M65.5,86c-2.205,0-3.876-0.649-5.646-1.336C57.748,83.846,55.57,83,52,83s-5.748,0.846-7.854,1.664 C42.376,85.351,40.705,86,38.5,86c-4.406,0-11.689-5.022-17.268-16.049C17.956,63.476,16,54.335,16,45.5 C16,34.196,24.748,25,35.5,25c3.906,0,6.896,1.481,9.535,2.788C47.331,28.926,49.5,30,52,30s4.669-1.074,6.965-2.212 C61.604,26.481,64.594,25,68.5,25c5.313,0,10.505,2.371,14.242,6.504c0.202,0.225,0.293,0.529,0.245,0.828 c-0.047,0.299-0.228,0.561-0.49,0.711C77.335,35.999,74,42.386,74,49.313c0,7.43,3.786,14.176,9.42,16.786 c0.486,0.226,0.709,0.794,0.504,1.289c-0.428,1.036-0.795,1.851-1.156,2.563C77.189,80.978,69.906,86,65.5,86z M52,81 c3.945,0,6.407,0.956,8.579,1.8C62.237,83.443,63.67,84,65.5,84c3.184,0,9.934-3.981,15.482-14.951 c0.233-0.462,0.472-0.973,0.731-1.57C75.782,64.268,72,57.255,72,49.313c0-7.146,3.271-13.798,8.427-17.329 C77.153,28.803,72.868,27,68.5,27c-3.438,0-6.086,1.312-8.647,2.58C57.451,30.77,54.968,32,52,32s-5.451-1.23-7.853-2.42 C41.586,28.312,38.938,27,35.5,27C27.084,27,18,34.073,18,45.5c0,8.536,1.876,17.339,5.018,23.549C28.566,80.019,35.316,84,38.5,84 c1.83,0,3.263-0.557,4.921-1.2C45.593,81.956,48.055,81,52,81z"/><path fill="#1f212b" d="M33.5,76.719c-0.127,0-0.253-0.048-0.351-0.144c-2.434-2.395-4.643-5.534-6.563-9.333 c-2.572-5.083-4.271-12.457-4.544-19.724c-0.01-0.275,0.205-0.508,0.481-0.519c0.271-0.006,0.508,0.206,0.519,0.481 c0.267,7.13,1.926,14.348,4.437,19.31c1.872,3.701,4.016,6.753,6.372,9.071c0.197,0.193,0.199,0.511,0.006,0.707 C33.759,76.669,33.629,76.719,33.5,76.719z"/><path fill="#1f212b" d="M23.035,42c-0.043,0-0.087-0.006-0.131-0.018c-0.267-0.072-0.424-0.347-0.352-0.613 c0.639-2.356,1.855-4.507,3.52-6.218c0.193-0.198,0.51-0.202,0.707-0.01c0.198,0.192,0.202,0.509,0.01,0.707 c-1.546,1.59-2.677,3.589-3.271,5.782C23.457,41.854,23.256,42,23.035,42z"/><path fill="#1f212b" d="M28.5,34.252c-0.159,0-0.316-0.076-0.413-0.218c-0.155-0.229-0.097-0.539,0.131-0.695 c0.96-0.655,2.007-1.188,3.114-1.583c0.261-0.091,0.546,0.042,0.639,0.303c0.093,0.26-0.043,0.546-0.303,0.639 c-1.026,0.366-1.997,0.86-2.886,1.468C28.695,34.224,28.598,34.252,28.5,34.252z"/><path fill="#1f212b" d="M33.499,32.191c-0.237,0-0.449-0.171-0.491-0.413c-0.048-0.272,0.134-0.531,0.405-0.579 c0.347-0.062,0.694-0.113,1.042-0.145c0.259-0.015,0.518,0.178,0.543,0.453c0.024,0.274-0.178,0.518-0.453,0.543 c-0.32,0.029-0.639,0.077-0.958,0.133C33.558,32.189,33.528,32.191,33.499,32.191z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
src/images/gatsby-astronaut.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 163 KiB

BIN
src/images/gatsby-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
src/images/iphone.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
src/images/linux.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-.424 -.244 90.652 90.652">
<circle cx="44.902" cy="45.082001" r="45.326" fill="#dd4814"/>
<path fill="#fff" d="M14.082023 39.029c-3.344 0-6.0530003 2.709-6.0530003 6.053 0 3.342 2.7090003 6.051 6.0530003 6.051 3.342 0 6.051-2.709 6.051-6.051-.001-3.344-2.71-6.053-6.051-6.053zm43.207 27.504c-2.895 1.672-3.887 5.371-2.215 8.264 1.67 2.895 5.369 3.887 8.264 2.215 2.895-1.67 3.887-5.369 2.215-8.264-1.671-2.892-5.372-3.885-8.264-2.215zm-30.063-21.451c0-5.98 2.971-11.264 7.516-14.463l-4.424-7.41c-5.295 3.539-9.234 8.947-10.871 15.281 1.91 1.559 3.133 3.932 3.133 6.592 0 2.658-1.223 5.031-3.133 6.59 1.635 6.336 5.574 11.744 10.871 15.283l4.424-7.412c-4.545-3.197-7.516-8.48-7.516-14.461zm17.676-17.678c9.234 0 16.811 7.08 17.605 16.109l8.623-.127c-.424-6.666-3.336-12.65-7.811-17.051-2.301.869-4.959.736-7.256-.588-2.301-1.328-3.744-3.568-4.139-6-2.236-.617-4.59-.955-7.023-.955-4.184 0-8.139.982-11.65 2.721l4.205 7.535c2.262-1.052 4.786-1.644 7.446-1.644zm0 35.354c-2.66 0-5.184-.592-7.445-1.645l-4.205 7.535c3.512 1.74 7.467 2.723 11.65 2.723 2.434 0 4.787-.338 7.023-.957.395-2.432 1.838-4.67 4.139-6 2.299-1.326 4.955-1.457 7.256-.588 4.475-4.4 7.387-10.385 7.811-17.051l-8.625-.127c-.794 9.032-8.37 16.11-17.604 16.11zm12.385-39.131c2.895 1.672 6.594.682 8.264-2.213 1.672-2.895.682-6.594-2.213-8.266-2.895-1.67-6.594-.678-8.266 2.217-1.67 2.893-.678 6.592 2.215 8.262z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
src/images/windows.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="12 -12 48 48" width="96px" height="96px"><path fill="#03a9f4" d="M34.807,12.511l-3.488,12.077c-3.03-2.052-6.327-3.744-13.318-0.83l3.408-11.945l0.041-0.019C28.414,8.908,31.787,10.447,34.807,12.511z"/><path fill="#ffc107" d="M36.633,13.68l-3.447,11.943c3.028,2.069,6.383,3.718,13.365,0.805l3.324-11.643C42.76,17.24,39.66,15.731,36.633,13.68z"/><path fill="#ff5722" d="M35.387,10.337l3.441-11.964C35.8-3.688,32.442-5.344,25.454-2.424L22.011,9.59c2.775-1.153,4.969-1.682,6.806-1.666C31.604,7.942,33.563,9.102,35.387,10.337z"/><path fill="#7cb342" d="M40.643-0.369l-3.44,12.033c3.018,2.063,6.669,3.752,13.359,0.738L54,0.415C47.021,3.317,43.665,1.688,40.643-0.369z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 716 B

11
src/pages/404.js Normal file
View file

@ -0,0 +1,11 @@
import React from 'react';
import Layout from '../components/layout';
const NotFoundPage = () => (
<Layout>
<p>WHAT R U DOING HERE</p>
</Layout>
);
export default NotFoundPage;

60
src/pages/index.js Normal file
View file

@ -0,0 +1,60 @@
import React, { useContext } from 'react';
import { useStaticQuery, graphql } from 'gatsby';
import styled from 'styled-components';
import FilterContext from '../context/FilterContext';
import Layout from '../components/layout';
import Person from '../components/Person';
import Topics from '../components/Topics';
function IndexPage() {
const { currentTag } = useContext(FilterContext);
const { allPerson } = useStaticQuery(graphql`
query People {
allPerson {
nodes {
computer
country
description
emoji
id
name
phone
tags
twitter
url
}
}
}
`);
const people = allPerson.nodes.filter(
person =>
currentTag === 'all' ||
person.tags.includes(currentTag) ||
currentTag === person.country ||
currentTag === person.computer ||
currentTag === person.phone
);
return (
<Layout>
<Topics />
<People>
{people.map(person => (
<Person key={person.name} person={person} currentTag={currentTag} />
))}
</People>
</Layout>
);
}
export default IndexPage;
// Component Styles
const People = styled.div`
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 5rem;
@media all and (max-width: 400px) {
grid-template-columns: 1fr;
}
`;

7
src/util/icons.js Normal file
View file

@ -0,0 +1,7 @@
import iphone from '../images/iphone.png';
import android from '../images/android.png';
import windows from '../images/windows.svg';
import apple from '../images/apple.svg';
import linux from '../images/linux.svg';
export { iphone, android, windows, apple, linux };

63
src/util/stats.js Normal file
View file

@ -0,0 +1,63 @@
import { name } from 'country-emoji';
import people from '../data.js';
function merge(prop) {
return function(acc, obj) {
return [...obj[prop], ...acc];
};
}
function countInstances(acc, tag) {
acc[tag] = acc[tag] ? acc[tag] + 1 : 1;
return acc;
}
export function countries() {
const data = people
.map(person => ({
name: name(person.country),
emoji: person.country,
}))
.reduce((acc, country) => {
if (acc[country.name]) {
// exists, update
acc[country.name].count = acc[country.name].count + 1;
} else {
acc[country.name] = {
...country,
count: 1,
};
}
return acc;
}, {});
const sorted = Object.entries(data)
.map(([, country]) => country)
.sort((a, b) => b.count - a.count);
return sorted;
}
export function tags() {
const allTags = people.reduce(merge('tags'), []);
const counts = allTags.reduce(countInstances, {});
// sort and filter for any tags that only have 1
const tags = Object.entries(counts)
.sort(([, countA], [, countB]) => countB - countA)
// Only show the tag if this topic has 3 or more people in it
.filter(([, count]) => count >= 3)
.map(([name, count]) => ({ name, count }));
return [{ name: 'all', count: people.length }, ...tags];
}
export function devices() {
const all = [
...people.map(person => person.computer),
...people.map(person => person.phone),
];
return Object.entries(all.reduce(countInstances, {}))
.map(([device, count]) => ({ name: device, count }))
.sort((a, b) => b.count - a.count);
}

16
static/fonts.css Normal file
View file

@ -0,0 +1,16 @@
/* Fonts */
@font-face {
font-family: 'Fira Mono';
font-weight: 400;
font-style: normal;
src: url('../src/fonts/fira_mono-regular-webfont.woff2') format('woff2'),
url('../src/fonts/fira_mono-regular-webfont.woff') format('woff');
font-display: swap;
}
@font-face {
font-family: 'Fira Mono';
font-weight: 400;
font-style: italic;
src: url('../src/fonts/fira_mono-regular_italic-webfont.woff2') format('woff2'), url('../src/fonts/fira_mono-regular_italic-webfont.woff') format('woff');
font-display: swap;
}