Merge branch 'master' into website

2025-09-08 17:40:31 +00:00 · 2020-01-30 15:54:00 -03:00 · 2020-01-30 15:54:00 -03:00 · cda5c2a65a
commit cda5c2a65a
parent e98a270d48 b8527d9e19
27 changed files with 3449 additions and 628 deletions
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@ -0,0 +1,36 @@
+<!--
+
+Please read the requirements corresponding to your pull request before you submit. You can delete this before you PR 
+
+## What's a Uses Page?
+
+A /uses page lists a developer's setup, gear, software, and configs (what they *use*). It's a great reference for those looking to add to their library of tools or reconfigure ones they already use.
+
+### What Should I Include?
+
+Include the hardware you use, such as your computer and other related equipment. Include your preferred terminal, text editors, tools, frameworks, and other related software you use. If you can, include configurations for software (such as fonts and themes). The more you have on your /uses page, the more interesting it'll be to those who view it - just keep it on-topic!
+
+## Adding Yourself
+
+* Ensure you are linking to a /uses page, **not just your website**
+* Ensure your data is formatted like other entries
+* Do not add yourself to the end of the array (add yourself somewhere random instead)
+* Ensure this PR has a title in the following format
+    * ✅ Add Your Name
+    * ✅ Add @twitterusername
+    * ❌ Add myself
+    * ❌ Adding myself!
+    * ❌ Add Your Name @twitter @github
+
+## Code Modifications
+
+* Ensure the code submitted is formatted similarly to existing code
+* Ensure variable, method, function, and component names are clear and concise
+
+## Final Requirements
+
+* You've read and understood the above
+
+**Add your name to verify:** Name
+
+-->
--- a/.github/workflows/data-validate.yml
+++ b/.github/workflows/data-validate.yml
@ -15,11 +15,17 @@ jobs:
    - uses: actions/setup-node@v1
      with:
        node-version: 13.x
-    - name: Install validation libs
-      run: |
-        npm install -g @hapi/joi@17.0.2
-        npm install -g @actions/core@1.2.0
-        npm link @hapi/joi
-        npm link @actions/core
+
+    - name: Cache/Restore node modules
+      uses: actions/cache@v1
+      with:
+        path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
+        key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+
+    - name: Install Dependencies
+      run: npm install
+
    - name: Validate data.js
-      run: node ./scripts/data-validate.js
+      run: node ./scripts/data-validate.js
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/populate-readme.yml
+++ b/.github/workflows/populate-readme.yml
@ -1,4 +1,4 @@
-name: Populate README.md from master
+name: Populate readme.md from master and lint src/data.js

 on:
  push:
@ -18,14 +18,33 @@ jobs:
    - uses: actions/setup-node@v1
      with:
        node-version: 13.x
-    - name: Populate README.md from master
+
+    - name: Cache/Restore node modules
+      uses: actions/cache@v1
+      with:
+        path: ~/.npm # npm cache files are stored in `~/.npm` on Linux/macOS
+        key: ${{ runner.os }}-npm-${{ hashFiles('package-lock.json') }}
+
+    - name: Install Dependencies
+      run: npm install
+
+    - name: Lint src/data.js
+      run: |
+        npx eslint --fix src/data.js
+        git add src/data.js
+
+    - 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\`"
+        # commit only if any changes
+        if [ ! -z "$(git status --porcelain)" ]; then
+        git commit -m "chore: generate \`readme.md\`, lint \`src/data.js\`"
+        fi
+
    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
--- a/.gitignore
+++ b/.gitignore
@ -61,6 +61,9 @@ public
 # Mac files
 .DS_Store

+# VS Code workspace settings
+.vscode/
+
 # Yarn
 yarn-error.log
 .pnp/
@ -69,3 +72,5 @@ yarn-error.log
 .yarn-integrity

 haters/
+
+.idea/
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -3,7 +3,7 @@ module.exports = {
    title: `/uses`,
    description: `A list of /uses pages detailing developer setups.`,
    author: `@wesbos`,
-    siteUrl: "https://uses.tech",
+    siteUrl: 'https://uses.tech',
  },
  plugins: [
    {
--- a/gatsby-node.js
+++ b/gatsby-node.js
@ -56,7 +56,6 @@ function sourceNodes({ actions, createNodeId, createContentDigest }) {
  });

  // Add Devices to GraphQL API
-  console.log(devices());
  devices().forEach(device => {
    const nodeMeta = {
      id: createNodeId(`device-${device.name}`),
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -3,14 +3,18 @@
  "description": "What do you uses",
  "version": "7.7.7",
  "author": "Wes Bos",
-  "type": "module",
  "eslintConfig": {
    "extends": [
      "wesbos"
    ]
  },
+  "engines": {
+    "node": ">= 12"
+  },
  "dependencies": {
-    "@actions/core": "^1.2.0",
+    "@actions/core": "^1.2.1",
+    "@actions/exec": "^1.0.3",
+    "@actions/github": "^2.0.1",
    "@hapi/joi": "^17.0.2",
    "country-emoji": "^1.5.0",
    "esm": "^3.2.25",
@ -50,6 +54,19 @@
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.17.0",
    "eslint-plugin-react-hooks": "^1.7.0",
+    "husky": "^4.0.10",
+    "lint-staged": "^9.5.0",
    "prettier": "^1.19.1"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/data.js": [
+      "eslint --fix",
+      "git add"
+    ]
  }
 }
--- a/readme.md
+++ b/readme.md
@ -29,44 +29,90 @@ This readme is auto-generated from the data.js file, so please don't PR this fil

 # Awesome Uses ![Awesome][awesome-badge]

+* [Simon Aronsson](https://simme.dev/uses) — Developer Advocate, Cloud and Devops Aficionado, Full-stack Developer
 * [Wes Bos](https://wesbos.com/uses) — Maker of this site. Web Developer, Tutorial Maker, Syntax.fm Podcaster, BBQ Lover
+* [Ahmed Ibrahim](https://ahmed-ibrahim.com/uses) — Full-stack developer who believes that Passion is the key to every success.
+* [Makon Cline](https://makoncline.com/uses) — Engineer, Developer, Home Cook. I like to make useful things and share them with others.
+* [Nich Secord](https://secord.io/uses) — Full Stack Developer from the Redmond, WA area. Best skier on the mountain. Pretty good in general.
+* [Mitchell Hanberg](https://mitchellhanberg.com/uses) — Full Stack Developer who loves working with Elixir, Ruby and JS.
+* [Davy Hausser](https://davyhausser.com/uses) — Game Producer. Web Developer, Travel Enthusiast
+* [Bojan Bedrač](https://www.improvebadcode.com/uses) — Coding the future, one line of code at a time.
+* [Yannick Le Roux](https://yannickleroux.com/uses) — Second career web dev, French living in San Diego, retired DJ.
+* [Eric Raslich](https://ericraslich.com/uses) — Boat captain, web developer, marine biologist, solving science and communication problems with web technologies.
+* [Didier Catz](https://didiercatz.com/uses) — Creative Developer & Interaction enthousiast. In love with modern JS, typography, jazz and homemade cappuccino.
+* [Anwar Hussain](https://gist.github.com/getanwar/daa9cb57428fd56255b1759fef2754f0) — Web Developer and No-Code Maker
+* [Victor Silva](https://github.com/VictorHSC/awesome-uses) — Web Developer
+* [Asur Bernardo](https://asur.dev/uses/) — Back end developer with no aesthetic sense. Full stack with reservations. Open-source enthusiast. Continuous learner!
+* [Vinoth Chellamuthu](https://ecevinoth.github.io/#uses) — Data Engineer
+* [Roberto Vázquez González](https://robertovg.com/uses/) — Javascript Engineer (10+ years experience) && CorkerSpace Co-founder, 💛js (^es6),🏄‍🧘‍🎸.
+* [Joe Astuccio](https://astucc.io/uses) — Front End Developer, Sailor, Stargazer, Hockey Player, and all around fun guy... but my absolute favorite thing is being a dad.
 * [Eliezer Steinbock](https://elie.tech/uses) — Founder of Skilled.co.il and Draft Fantasy. Full Stack Freelance Developer
+* [Rene Gens](https://renegens.com/uses) — android engineer, project manager, teacher, aspiring designer and author
+* [John Smith](https://solrevdev.com/uses/) — full-time carer formally head of infrastructure and operations, senior full-stack #dotnetcore #aspnetcore #vuejs developer and software engineer https://solrevdev.com
+* [Michael Gale](https://michaelgale.dev/uses) — Web Developer with a beard and glasses from Melbourne, Australia
+* [Aaron A.](https://ocular-rhythm.io/uses/) — Sandwich enthusiast and programmer.
+* [Renee de Kruijf](https://webdesignpuntnl.com/pages/uses.html) — Javascript developer in the making. Still learning every day. Liking it a lot!
+* [Amarpreet Singh](https://www.momcoded.com/uses) — Frontend Developer. Things i love JS, React, Swift, practicing minimalism and milk tea enthusiast.
+* [Asam Shan](https://www.asamshan.dev/uses) — JavaScript Junkie, very fond of React, Gatsby and Netlify ❤️
+* [Emmanuel Martins](http://betacodings.com/uses) — Full Stack Developer, i love programming with python, Advocate Engineer at @BCodings
+* [Chris Berry](http://chrisberry.io/uses) — Designer / Developer 🦄, Linux advocate, mechanical keyboard connoisseur 
 * [James Quick](https://jamesqquick.com/uses) — Developer Advocate Engineer at @auth0 and content creator
 * [Federico Vitale](https://fedevitale.dev/uses) — 20yo, Self Taught FullStack Developer, Full Time. Bikes lover, Tech (obviously) enthusiast.
 * [Vishwasa Navada K](https://vishwas.tech/uses) — Geek. Open source Enthusiast. Occasional blogger, photographer and traveler.
 * [Silvestar Bistrović](https://www.silvestar.codes/uses/) — Fearless web engineer, CSS developer, JAMstack enthusiast, and WordPress theme specialist.
 * [Adam Schwartz](https://adamschwartz.co/uses/) — Software developer, designer, film music composer
+* [Andy Bell](https://hankchizljaw.com/uses) — Educator who focuses on design, front-end development, accessibility and progressive enhancement. I teach at Piccalilli and Front-End Challenges Club
 * [Sergey Lysenko](https://soulwish.info/uses/) — Front-end developer, guitar player, MTB rider, snowboarder, runner.
+* [Shajan Jacob](https://shajanjacob.com/uses) — Software Engineer, extroverted introvert, storyteller and a maker.
 * [Habbat Adnan](https://adncodez.com/uses) — Self Taught Web Developer, Full Time Freelancer, Open Source Enthusiast
+* [Marco Poletto](https://poletto.dev/uses/) — Frontend Developer, UI engineer, Mentor
+* [Telmo Goncalves](https://telmo.online/uses) — Fullstack Developer, mostly focused to ReactJS. Digital Nomad, I love travelling.
+* [Mark Horsell](https://markhorsell.com/uses) — Software Developer - Front-end mostly, back-end and native sometimes.
 * [Carter McAlister](https://cartermcalister.dev/uses) — Software Engineer, Digital Nomad, Lover of the Outdoors
 * [Matt Jennings](https://mattjennings.io/uses) — web dev, hockey | tradebreaker.io
+* [Jake Jarvis](https://jarv.is/uses/) — Front-End Web Developer, Teacher, Cat Dad, World Wide Web Surfer 🏄
+* [Valentina Calabrese](https://valentinacalabrese.com/uses) — Front-End Engineer 🤓, Drummer 🥁, Skateboarder 🛹 & Tech Enthusiast 📲. Sometimes I blog, too ✍🏻. And I 💖 User-centered design.
 * [Jason Cory Alvernaz](https://jasoncoryalvernaz.com/uses) — Web Developer, Blogger, YouTuber, and Dog Lover. Not necessarily in that order.
 * [Alessia Bellisario](https://aless.co/uses) — Web engineer, mechanical keyboard builder, plotter art maker.
-* [Sam Cross](http://sam-cross.github.io/uses) — "Developer", IT student, frequent traveller by coach, addicted to music.
+* [Karl Koch](https://www.kejk.co/uses) — Design and Frontend Engineering lead @neuerenergy. Design Lead @makeacocktail. Guitar @echoes_uk.
+* [Sam Cross](https://sam-cross.github.io/#/uses) — "Developer", IT student, frequent traveller by coach, addicted to music.
 * [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](http://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
+* [Dave Mullen Jnr](https://davemullenjnr.co.uk/uses) — Designer, photographer, developer, multi-instrumentalist, chess player, aspiring minimalist, environmentally friendly.
+* [Josh Buchea](https://joshbuchea.com/uses) — Software Engineer, Open Source Contributor
 * [Tiffany White](https://tiffanywhite.dev/uses/) — Frontend dev, blogger, podcaster, herder of cats
 * [Kent C. Dodds](https://kentcdodds.com/uses) — JavaScript Software Engineer, speaker, and trainer
 * [Ava Gaiety Wroten](https://www.wroten.me/uses) — JavaScript Software Engineer, artist, and designer
+* [Darlene Zouras](https://darzouras.com/uses/) — Front-End and UI/UX Developer, Accessibility advocate, JAMStack fan, working in the marketing and entertainment industry
 * [Glenn Reyes](https://glennreyes.com/uses) — Independent Software Engineer, trainer & speaker. Into sports & music.
+* [Simon Stenbæk](https://sstenbaek.dk/uses) — Helicopter pilot, web developer
 * [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
+* [Gabriel Wilkes](https://azul.technology/uses/) — Full-stack developer who loves learning new things, American 10 years in Japan, soon back to the US
 * [Anton Andrésen](https://anton.best/uses/) — Software Engineer, Tutorial Maker, Youtuber, Tea Drinker
 * [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
+* [Rikin Patel](https://patelrikin.com/#uses) — Experienced Front-end developer, Passionate about Javascript
+* [Joris Hens](https://www.goodbytes.be/uses) — Web development teacher, Security and hacking enthousiast, Cook.
 * [Lauro Silva](https://laurosilva.com/uses) — Software Engineer and Technical Writer
+* [Tony Cimaglia](https://www.tonycimaglia.com/uses/) — Restaurant Veteran turned Developer.
 * [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
+* [Michael Knepprath](https://mknepprath.com/uses) — Pokémon-obsessed Software Engineer & Designer. Twitter bots are my jam.
 * [Brad Garropy](https://bradgarropy.com/uses) — Self taught frontender at Adobe, into lifting and country music.
+* [Bruno Brito](https://brunobrito.pt/uses) — Freelance Web Developer, Content Creator, Digital Marketing teacher
 * [Abdisalan Mohamud](https://abdisalan.com/uses) — Software Engineer, blogger, lifetime learner
+* [Roy Tang](https://roytang.net/about/uses/) — Programmer, engineer, scientist, critic, gamer, dreamer, and kid-at-heart.
 * [Josh Barker](https://joshuabarker.com/uses) — Front end engineer at Red Ventures. Soccer enthusiast. Lover of stories.
+* [David Perkins](https://prkns.me/uses) — Dad, Designer, Developer, Dave, Keyboard enthusiast
 * [Aaron Dunphy](https://aarondunphy.com/uses) — Full Stack Developer, Coffee Lover and Photo Taker
+* [Jason Raimondi](https://jasonraimondi.com/uses) — Full Stack Developer
 * [Mohamed Benhida](http://mohamedbenhida.com/uses) — Web Developer, Open source contributor.
 * [Thomas Hunter II](https://thomashunter.name/uses) — Node.js developer with a thing for distributed systems. Co-organizer of NodeSchool SF. Game developer.
 * [Andrew McCombe](https://www.euperia.com/uses) — Experienced full stack web developer with a passion for testing.
@ -74,23 +120,33 @@ This readme is auto-generated from the data.js file, so please don't PR this fil
 * [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
+* [Keith Wagner](https://kpwags.com/uses) — Experienced full stack developer. Always trying to learn new and better ways of doing things.
+* [Chuck Munson](https://www.breadandrosesweb.com/uses/) — Web developer, blogger, writer, journalist, photographer, librarian, Minecraft addict, cooking show fanatic
 * [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 Hoffmann](https://www.mokkapps.de/uses) — Freelance Software Engineer
+* [Austin Gil](https://stegosource.com/uses/) — Some dude that writes code.
 * [Michael Le](https://www.michael1e.com/uses/) — Software Engineer
+* [Sergey Panay](https://panay.dev/uses) — Front End developer. Productivity nerd.
 * [Sil van Diepen](https://www.silvandiepen.nl/uses/) — Creative Developer
 * [Kilian Valkhof](https://kilianvalkhof.com/using/) — User experience developer
+* [Dale French](https://dalefrench.dev/uses) — Full Stack Developer from South Africa. Skateboarder. Front End Enthusiast.
 * [Timothy Miller](https://timothymiller.dev/uses) — Web Designer/Developer for hire. Wears lots of hats.
+* [Caleb Ukle](https://calebukle.com/uses) — I'm a software developer, technology enthusiast, and simply enjoy learning new things.
 * [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://theopract.gitlab.io/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.
+* [Alba Silvente](https://dawntraoz.com/uses) — Front-end developer, Vue & TailwindCSS lover. Hip Hop & Afro house dancer.
+* [Alberto Fortes](https://albertofortes.com/uses/) — Senior Front-end developer with strong aesthetic sense. Building cool websites and apps as Front-end Team lead at Avallain.
 * [Josh Manders](https://joshmanders.com/uses/) — Full Snack Developer and Indie Maker
 * [Daniel Wirtz](https://danielwirtz.com/uses/) — Designer who codes @Crisp Studio
 * [Harry Wolff](https://hswolff.com/uses/) — Front-end engineer and YouTuber 
+* [Josh Moore](https://jmoore.dev/redesign/uses) — Self-taught full-stack web dev with a passion for open-source, privacy, & security.
 * [James Mills](https://jamesmills.co.uk/uses) — Work with PHP & Laravel at @clicksco in Dubai. Pleased to be part of the Laravel community.
+* [Mohammad Dohadwala](https://dohad.dev/uses) — Hi, I am a Javascript Full Stack Web Developer from Dubai, currently studying Computer Science.
 * [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
@ -98,25 +154,33 @@ This readme is auto-generated from the data.js file, so please don't PR this fil
 * [James Brooks](https://james.brooks.page/uses/) — Software Developer at Laravel and Podcaster
 * [Byurhan Beyzat](https://byurhanbeyzat.com/uses) — Front-End Developer. Engineer. Occasional blogger.
 * [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.
+* [Hugo Di Francesco](https://codewithhugo.com/uses) — JavaScript developer, blogger at codewithhugo.com, co-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.
 * [Talita Oliveira](https://talitaoliveira.com.br/#uses) — Software Developer. Loves CSS and Javascript. Already worked with PHP and a little with JAVA.
 * [Ben Leivian](https://benleivian.com/uses) — A “seasoned” full-stack developer & visual designer 🍔
+* [David Petringa](https://david.dukesnuz.com/uses) — A web developer who very much likes working with Laravel and Vuejs. My side Hustle is blogging.
+* [Mike Gunderloy](https://afreshcup.com/uses/) — Full-stack developer and dilettante
 * [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
+* [Marc Littlemore](https://marclittlemore.com/uses) — Engineering Team Lead @ BBC, Node.js fan, course creator, entrepreneur, ex-videogame developer, public speaker, and sepsis survivor.
 * [José Manuel Lucas](https://jmlweb.es/blog/2020/uses/) — Professional Frontend Engineer - Amateur musician
+* [Dao Huy Tuan](https://daohuytuan.com/uses/) — FrontEnd Engineer, Blogger, Vimmer
 * [Georgi Yanev](https://gyanev.com/uses/) — Software Engineer, FPV Drone Pilot, Blogger, YouTuber
+* [Mark Tse](https://neverendingqs.com/uses/) — A back-end developer who likes to dabble in the front-end.
 * [Karl Horky](https://github.com/karlhorky/uses/blob/master/readme.md) — Founder, Teacher at https://upleveled.io
+* [Zoran Panev](https://gist.github.com/8f08557764711afbf82b75ac0ce61e79.git) — Web developer
 * [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.
-* [Pedro Assunção](https://pedroassuncao.com/pages/uses) — Senior Fullstack Software Developer, Tutorial Maker, Blogger
 * [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
+* [Duncan McClean](https://duncanm.dev/uses) — Web Developer working with Laravel & Statamic
 * [Ricard Torres](https://php.quicoto.com/uses/) — Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor, street photographer, TV addict, Boston Red Sox fan...
+* [Matthew Rebehn](https://mattaz.com/uses) — Proud Dad and Developer
+* [Isaac Weber](https://www.webdevike.com/uses) — Full stack, GraphQL enthusiast
 * [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
@ -129,6 +193,7 @@ This readme is auto-generated from the data.js file, so please don't PR this fil
 * [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
+* [Jorge Calle](https://jorgecalle.co/uses) — Hello world! I am a Software Engineer and a Javascript developer from Sahagún (CO)
 * [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
 * [Juanito Fatas](https://juanitofatas.com/uses) — Program Tinker 🧙🏼‍♂️
@ -137,14 +202,19 @@ This readme is auto-generated from the data.js file, so please don't PR this fil
 * [Dieter Stinglhamber](https://www.dieterstinglhamber.me/uses/) — Developer, human, nerd.
 * [Dany Paredes](https://danywalls.com/uses) — I was a .NET guy, my last years ❤️ { #js & #sass } and play[ #react #vue #angular #sveltejs]
 * [Thomas Weibenfalk](https://www.weibenfalk.com/uses/) — Passionate developer, course creator, youtuber, designer and musician from Sweden
+* [Julio Lozovei](https://jlozovei.dev/uses/) — Front-end bugs developer, writer/speaker and amateur musician from Brazil 🤘
 * [Chris Burgin](https://chrisburgin.me/uses) — Frontend Software Engineer
 * [Shiveen Pandita](https://shiveenp.com/uses/) — Fullstack developer and blogger from Sydney
 * [David Leuliette](https://davidl.fr/uses) — Freelance React Native developer and bootcamp instructor specializing in cross-platform application.
 * [Dave Berning](https://daveberning.io/uses/) — Developer, author, rocker, Nintendo enthusiast. I also co-organize the CodePen Cincinnati Meetups.
 * [Jan-Lukas Else](https://jlelse.dev/uses/) — Computer Science Student, Developer & Blogger from Germany
+* [Will Presley](https://willpresley.com/uses/) — Professional Web Dev & SysAdmin from Ohio, USA
 * [Seyhun Akyürek](https://www.seyhunakyurek.com/uses/) — Senior Software Specialist. Swift, Objective-C, former Rubyist. Author of twitter-bootstrap-rails
+* [Silvestre Vivo](https://silvestrevivo.github.io/uses) — Full Stack developer, before architect and flamenco guitar player.
+* [Josef Aidt](https://josefaidt.dev/uses) — JavaScript and Garlic Bread connoisseur
 * [Eric Oyanadel](https://www.oyanadel.com/uses/) — Artist - Developer - Musician
 * [Usman Khwaja](https://usmankhwaja.com/uses) — Front end engineer, Jamstack developer
+* [Abdessalam Benharira](https://abdessalam-benharira.me/uses) — JavaScript developer, UX/UI design and tech enthusiast
 * [Thomas Large](https://tomlarge.dev/uses) — My name is Tom! I write code
 * [Amit Merchant](https://www.amitmerchant.com/uses) — Maker of things. Open-source enthusiast. Blogger. 
 * [Jesse James Burton](https://burtonmediainc.com/uses) — Software Developing Yogi from Alberta, Canada. Lets build the internet together.
@ -153,36 +223,59 @@ This readme is auto-generated from the data.js file, so please don't PR this fil
 * [Eduardo Reveles](https://www.osiux.ws/about/uses) — Web Engineer, Husband, Gamer.
 * [Thomas Maximini](https://www.maxi.io/uses/) — Freelance software developer from Germany.
 * [Philip Theobald](https://www.philiptheobald.com/uses/) — Guitar player, motorcyclist, software engineer, entreprenuer
+* [Wes Baker](https://wesbaker.com/uses) — Team Lead, Software Engineer, Board/Miniature/RPG Gamer, Miniature Painter, 3D Printer, Disney fanatic
+* [Roland Szabo](https://rolisz.ro/uses) — Team Lead, ML Engineer,  Board Gamer
+* [Matheus Almeida S. Anjos](https://matalmeida.netlify.com/uses/) — Passionate about programming, engaged with Javascript and Golang lover.
 * [Alejandro G. Anglada](https://aganglada.com/uses/) — Dad 👪🔥⚡️ Web Engineer ⚛️🚀 Building websites with #react #typescript #nodejs #graphql 👌
 * [Antoni Kepinski](https://kepinski.me/uses/) — Node Fetch maintainer // Into Node.js and Rust
+* [Frank Bültge](https://bueltge.de/uses/) — Alpinist, Cyclist, Optimist. I develop, support solutions, primarily with SAP at ZEISS Group and I make WordPress-based solutions at the Inpsyde
+* [Sangam Kumar](https://www.sangam.dev/uses) — (☕) => { 👨‍💻 }; git checkout hackerrank
 * [Marcus Obst](https://marcus-obst.de/uses) — Webdeveloper, Music Lover
+* [Max Schmeling](https://maxschmeling.me/uses) — CTO @Clipisode. ❤️ web dev/mobile/open source. Husband, father, drummer. #Royals and #Chiefs fan.
 * [Pawel Grzybek](https://pawelgrzybek.com/uses/) — Software Engineer
 * [Eric McCormick](https://edm00se.codes/uses/) — Software Developer, IBM Champion, coffee lover, dabbler in all things technology, hobbyist 3d design and printing
+* [Vince Picone](https://vincepic.one/uses) — Building design systems at IBM
 * [Ben Congdon](https://benjamincongdon.me/uses) — Golang, Python, Rust. Runs in the Cloud.
 * [Jens van Wijhe](https://jens.ai/uses) — Creative web developer and entrepreneur
 * [Jacob Herper](https://herper.io/uses/) — Senior Front-End Engineer with a passion for all things digital. I create amazing web apps to make the internet a better place.
+* [Ajay Karwal](https://ajaykarwal.com/uses/) — A designer, developer and UX guy from Buckingham, UK.
 * [David Vives](http://dispuestoaaprender.netlify.com/en/uses) — Software Engineer, Web Developer, Chess Player, Comics Reader, Loves reading, learning new things, sushi, BBQ and aioli.
 * [Ryan Warner](https://ryan.warner.codes/uses) — Software Engineer and Interface Designer. Leader and Mentor.
+* [Rob Warner](https://grailbox.com/uses/) — Software Architect, Developer, Father.
 * [Adam Urban](https://urbanisierung.dev/uses/) — coder, father, left-handed
 * [Majo Paskuvan](https://paskuvan.us/uses.html) — Front End Developer, Reader, Deaf Person
 * [Christopher Wavrin](https://wavrin.com/uses) — Full Stack Developer
 * [Florian Kapfenberger](https://phiilu.com/uses) — Frontend developer from Austria who likes to create modern applications with React (Native)
+* [TaeHee Kim](https://roto.dev/uses) — Front-end Engineer, Bassist, Cat lover.
+* [Marcin Krawczyk](https://marcin.codes/uses) — Javascript Developer from Poland, working and living in Switzerland, wannabe dev blogger.
 * [Maria Altyeva Schuessler ](http://mariacodes.io/uses) — Nacho Cheese Lover and Senior Full-Stack Developer, Project Manager, and Writer based out of Shanghai, China
 * [Arturo Campos](https://arturocampos.dev/uses) — Web Developer, dad, mountain biker, meat lover
+* [Ibrahim Cesar](https://ibrahimcesar.dev/uses) — Philosophy hacker. Fullstack dev && Editor @ media company in Brazil. 4733 pixels tall @ 72dpi
 * [Sercan Eraslan](http://sercaneraslan.com/uses) — Front-End Tech Lead
+* [Divjot Singh](https://bogas04.github.io/uses) — Web Developer, Vegan, Sikh.
 * [Jeff Wen](https://sinchang.me/uses) — Web Developer, Open Source Contributor
 * [Andrea Prus](https://avris.it/uses) — Full stack developer, blogger
 * [Bamuleseyo Gideon](https://medium.com/developer-circle-kampala/what-i-use-my-tools-of-trade-552655db4b8d) — Software Engineer, Facebook Developer Cirle Kamapala Lead. Front-end ❤️
 * [Nick Taylor](https://www.iamdeveloper.com/uses/) — Just some dev from Montreal, Quebec, Canada
+* [Benjamin Edenhuizen](https://rqrauhvmra.com/uses/) — Front-end web developer with a focus on accessibility and performance.
 * [Dave Hill](https://davehill.dev/uses/) — Front-end developer, amateur photographer, podcast beginner.
 * [Logan Blangenois](https://logan-blangenois.be/uses/) — Front-end developer passionate about eco-friendly (web)app and React.
 * [Muhammad Umair](https://gist.github.com/mumairofficial/0d97ed3dca1ba25d9f01b8db8aed42dc) — Fullstack front-end developer and designer, passionate in everything #JavaScript
 * [Alex Carpenter](https://alexcarpenter.me/uses) — UI Engineer, Screencaster
+* [Benjamin Mock](https://codesnacks.net/uses/) — coder, runner, reader, maker
 * [Kevin Woblick](https://www.kovah.de/uses/) — I turn Pizza into Code and Photos
 * [Michał Miszczyszyn](https://typeofweb.com/michal-miszczyszyn-uses/) — Motivated full-stack developer not afraid to use any technology. Experienced developer and leader. He, him.
+* [Simranjit Singh](https://simranjit.dev/uses) — Javascript loving Coldfusion developer
+* [Maxwell Morrison](https://maxmorrison.me/uses) — Continuous leaner and freelance full stack developer
+* [Rail Hamdeew](https://hmdw.me/uses/) — Full Stack. Open to new technologies
+* [Armno Prommarak](https://armno.in.th/uses) — Frontend developer, blogger, cyclist.
+* [Fernando Paredes](https://fdp.io/about/uses) — iOS/macOS developer, serial hobbyist, language nerd.
 * [Tarik Omercehajic](https://robotz.tech/uses/) — DevOps Engineer @BicomSystems. Mechanical Engineer in free time :)
 * [Duncan McDougall](https://www.belter.io/uses/) — Web developer, contractor, remotely working from the South of Scotland
 * [Kevin Simkanič](https://github.com/kevinko12323/uses) — Wordpress ninja 😎 React lover ❤️ CSS master 🧐
+* [Lakshmipriya Mukundan](https://gist.github.com/lakshmipriyamukundan/ddd224306ce962f4f159f1065f0f0c67) — Javascript lover, FullStack enthusiast, React Learner (current), Pet lover
+* [Jeremy Bunting](https://qbunt.com/uses) — Web 🤖 working remotely from the Connecticut burbs
+* [Tony Mamedbekov](https://www.tmamedbekov.dev/uses) — Architect, developer, cms enthusiast, technologoy evangelist, content creator, bloger, consultant
 * [Jerry Shi](https://github.com/szy0syz/uses) — Full Stack, Motivated full-stack developer not afraid to use any technology.

 [awesome-badge]: https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg
--- a/scripts/data-validate.js
+++ b/scripts/data-validate.js
@ -1,88 +1,43 @@
-import Joi from '@hapi/joi';
-import core from '@actions/core';
-import * as http from 'http';
-import * as https from 'https';
-import data from '../src/data.js';
-import flags from './flags.js';
+const core = require('@actions/core');
+const {
+  getMasterData,
+  Schema,
+  getStatusCode,
+  communicateValidationOutcome,
+} = require('./utils.js');
+const srcData = require('../src/data.js');

-if (process.env.CI !== 'true') {
-  core.error = console.error;
-  core.setFailed = console.error;
-}
+async function main() {
+  // on master branch will be empty array
+  const masterDataUrls = (await getMasterData()).map(d => d.url);
+  // so here data will be an array with all users
+  const data = srcData.filter(d => !masterDataUrls.includes(d.url));

-const schema = Joi.object({
-  name: Joi.string().required(),
-  description: Joi.string().required(),
-  url: Joi.string()
-    .uri()
-    .required()
-    .pattern(/(use|uses|using|setup|environment|^https:\/\/gist.github.com\/)/),
-  country: Joi.string()
-    .valid(...flags)
-    .required(),
-  twitter: Joi.string().pattern(new RegExp(/^@?(\w){1,15}$/)),
-  emoji: Joi.string().allow(''),
-  computer: Joi.string().valid('apple', 'windows', 'linux'),
-  phone: Joi.string().valid('iphone', 'android'),
-  tags: Joi.array().items(Joi.string()),
-});
+  const errors = data
+    .map(person => Schema.validate(person))
+    .filter(v => v.error)
+    .map(v => v.error);

-const errors = data
-  .map(person => schema.validate(person))
-  .filter(v => v.error)
-  .map(v => v.error);
-
-errors.forEach(e => {
-  core.error(e._original.name);
-  e.details.forEach(d => core.error(d.message));
-});
-
-if (errors.length) {
-  core.setFailed('Action failed with validation errors, see logs');
-}
-const REQUEST_TIMEOUT = 10000;
-
-function getStatusCode(url) {
-  const client = url.startsWith('https') ? https : http;
-  return new Promise((resolve, reject) => {
-    setTimeout(() => reject(new Error('Request timed out')), REQUEST_TIMEOUT);
-    client
-      .get(url, res => {
-        resolve(res.statusCode);
-      })
-      .on('error', err => {
-        reject(err);
-      });
+  errors.forEach(e => {
+    core.error(e._original.name || e._original.url);
+    e.details.forEach(d => core.error(d.message));
  });
-}

-async function isWorkingUrl(url) {
-  try {
-    const statusCode = await getStatusCode(url);
-    if (statusCode < 200 || statusCode >= 400) {
-      core.error(`Ping to "${url}" failed with status: ${statusCode}`);
-      return false;
+  const failedUrls = [];
+  for (const { url } of data) {
+    try {
+      const statusCode = await getStatusCode(url);
+      if (statusCode < 200 || statusCode >= 400) {
+        core.error(`Ping to "${url}" failed with status: ${statusCode}`);
+        failedUrls.push(url);
+      }
+    } catch (e) {
+      core.error(`Ping to "${url}" failed with error: ${e}`);
+      failedUrls.push(url);
    }
-    return true;
-  } catch (e) {
-    core.error(`Ping to "${url}" failed with error: ${e}`);
-    return false;
  }
+
+  await communicateValidationOutcome(errors, failedUrls, data);
 }

-(async () => {
-  // TODO: we might need to batch these in sets instead of requesting 100+ URLs
-  // at the same time
-  const areWorkingUrls = await Promise.all(
-    data.map(p => p.url).map(url => isWorkingUrl(url))
-  );
-  const failingUrls = areWorkingUrls.filter(a => !a);
-  if (failingUrls.length > 0) {
-    core.setFailed(
-      `Action failed with ${failingUrls.length} URL fetch failures, see logs`
-    );
-  }
-  if (process.env.CI !== 'true') {
-    process.exit(failingUrls.length > 0 ? 1 : 0)
-  }
-})();
+main();
--- a/scripts/flags.js
+++ b/scripts/flags.js
@ -1,4 +1,4 @@
-const flags = [
+module.exports = [
  '🇦🇫',
  '🇦🇱',
  '🇩🇿',
@ -236,5 +236,3 @@ const flags = [
  '🏳️‍🌈',
  '🇪🇺',
 ];
-
-export default flags;
--- a/scripts/masterData.js
+++ b/scripts/masterData.js
@ -0,0 +1,5 @@
+/**
+ * this is a stub file, do not edit it
+ * see `scripts/utils.js` -> `getMasterData`
+ */
+module.exports = [];
--- a/scripts/populate-readme.js
+++ b/scripts/populate-readme.js
@ -1,5 +1,5 @@
-import fs from 'fs';
-import data from '../src/data.js';
+const fs = require('fs');
+const data = require('../src/data.js');

 /** @type {string} */
 const readmeTemplate = fs.readFileSync('./scripts/readme-template.md', 'utf8');
--- a/scripts/utils.js
+++ b/scripts/utils.js
@ -0,0 +1,132 @@
+const exec = require('@actions/exec');
+const core = require('@actions/core');
+const github = require('@actions/github');
+const Joi = require('@hapi/joi');
+const http = require('http');
+const https = require('https');
+const flags = require('./flags.js');
+
+async function getCurrentBranchName() {
+  let myOutput = '';
+  let myError = '';
+
+  const options = {
+    silent: true,
+    listeners: {
+      stdout: data => (myOutput += data.toString()),
+      stderr: data => (myError += data.toString()),
+    },
+  };
+
+  await exec.exec('git rev-parse --abbrev-ref HEAD', [], options);
+  return myOutput.trim();
+}
+
+/** on master branch will return an empty array */
+module.exports.getMasterData = async function() {
+  const options = { silent: true };
+  const curentBranchName = await getCurrentBranchName();
+  // when on a branch/PR different from master
+  // will populate scripts/masterData.js with src/data.js from master
+  if (curentBranchName !== 'master') {
+    core.info('Executing action on branch different from master');
+    await exec.exec('mv src/data.js src/tmpData.js', [], options);
+    await exec.exec('git fetch origin master', [], options);
+    await exec.exec('git restore --source=FETCH_HEAD src/data.js', [], options);
+    await exec.exec('mv src/data.js scripts/masterData.js', [], options);
+    await exec.exec('mv src/tmpData.js src/data.js', [], options);
+  } else {
+    core.info('Executing action on master branch');
+  }
+
+  // eslint-disable-next-line global-require
+  const masterData = require('./masterData.js');
+
+  // restore `scripts/masterData.js` after was loaded
+  if (curentBranchName !== 'master') {
+    await exec.exec('git restore scripts/masterData.js', [], options);
+  }
+
+  return masterData;
+};
+
+module.exports.Schema = Joi.object({
+  name: Joi.string().required(),
+  description: Joi.string().required(),
+  url: Joi.string()
+    .uri()
+    .required()
+    .pattern(/(use|uses|using|setup|environment|^https:\/\/gist.github.com\/)/),
+  country: Joi.string()
+    .valid(...flags)
+    .required(),
+  twitter: Joi.string().pattern(new RegExp(/^@?(\w){1,15}$/)),
+  emoji: Joi.string().allow(''),
+  computer: Joi.string().valid('apple', 'windows', 'linux'),
+  phone: Joi.string().valid('iphone', 'android'),
+  tags: Joi.array().items(Joi.string()),
+});
+
+module.exports.getStatusCode = function(url) {
+  const client = url.startsWith('https') ? https : http;
+  return new Promise((resolve, reject) => {
+    const REQUEST_TIMEOUT = 10000;
+    const timeoutId = setTimeout(
+      reject,
+      REQUEST_TIMEOUT,
+      new Error('Request timed out')
+    );
+
+    client
+      .get(url, res => {
+        clearTimeout(timeoutId);
+        resolve(res.statusCode);
+      })
+      .on('error', err => reject(err));
+  });
+};
+
+// If there are errors, will fail the action & add a comment detailing the issues
+// If there are no errors, will leave an "all-clear" comment with relevant URLs (to ease a potential manual check)
+module.exports.communicateValidationOutcome = async function(
+  errors,
+  failedUrls,
+  changedData
+) {
+  let comment = '';
+  if (errors.length || failedUrls.length) {
+    core.setFailed('Action failed with errors, see logs & comment');
+
+    comment += [
+      '🚨 We have detected the following issues, let us (contributors) know if you need support or clarifications:',
+      ...errors.map(e => `- ${e.message}`),
+      ...failedUrls.map(url => `- URL is invalid: ${url}`),
+    ].join('\n');
+  } else {
+    comment += [
+      '✅ Automatic validation checks succeeded for:',
+      // Comment with the URLs of users that have changed
+      // for easy access, way easier than taking a screenshot
+      ...changedData.map(({ name, url }) => `- ${name}, ${url}`),
+    ].join('\n');
+  }
+
+  const { GITHUB_TOKEN } = process.env;
+  const { context } = github;
+  if (!GITHUB_TOKEN || !context.payload.pull_request) {
+    core.error(
+      'Cannot add a comment if GITHUB_TOKEN or context.payload.pull_request is not set'
+    );
+    core.info(`Comment contents:\n${comment}`);
+    return;
+  }
+
+  const pullRequestNumber = context.payload.pull_request.number;
+
+  const octokit = new github.GitHub(GITHUB_TOKEN);
+  await octokit.issues.createComment({
+    ...context.repo,
+    issue_number: pullRequestNumber,
+    body: comment,
+  });
+};
--- a/src/components/BackToTop.js
+++ b/src/components/BackToTop.js
@ -0,0 +1,56 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+const BackToTopLink = styled.a`
+  position: fixed;
+  bottom: 1%;
+  right: 1%;
+  background: var(--pink);
+  color: white;
+  background: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  border-radius: 3px;
+  padding: 1rem;
+  transition: opacity 0.2s;
+  opacity: 0;
+  text-decoration: none;
+  ${props =>
+    props.percent > 0.25 &&
+    `
+    opacity: 1;
+  `}
+  @media screen and (max-width: 500px) {
+    display: none;
+  }
+`;
+
+function useScrollPosition() {
+  const [percent, setPercent] = useState(0);
+
+  function handleScroll(event) {
+    const scrollTop =
+      document.scrollingElement.scrollHeight -
+      document.documentElement.clientHeight;
+    const howFar = document.documentElement.scrollTop / scrollTop;
+    setPercent(howFar);
+  }
+
+  useEffect(() => {
+    // listen for window scroll event
+    document.addEventListener('scroll', handleScroll);
+    return () => {
+      document.removeEventListener('scroll', handleScroll);
+    };
+  });
+
+  return percent;
+}
+
+export default function BackToTop() {
+  const percent = useScrollPosition();
+  return (
+    <BackToTopLink href="#top" title="Back To Top" percent={percent}>
+      &uarr;
+    </BackToTopLink>
+  );
+}
--- a/src/components/FavIcon.js
+++ b/src/components/FavIcon.js
@ -1,4 +1,4 @@
-import React, { useEffect, useState, forwardRef, useRef } from 'react';
+import React, { useEffect, useState, useRef } from 'react';

 function useInterval(callback, delay) {
  const savedCallback = useRef();
@ -44,7 +44,7 @@ function useWickedFavIcon() {
 }

 export default function FavIcon() {
-  const { letter, index, canvasRef } = useWickedFavIcon();
+  const { /* letter, index, */ canvasRef } = useWickedFavIcon();
  return (
    <div>
      <canvas
--- a/src/components/Person.js
+++ b/src/components/Person.js
@ -1,13 +1,34 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } 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';

+function useIntersectionObserver(ref) {
+  const [isIntersecting, setIntersecting] = useState(false);
+
+  useEffect(function() {
+    const observer = new IntersectionObserver(function([entry]) {
+      console.log('Run once for every time its on screen');
+      console.log(entry);
+    });
+    // Observe the element we want to observve
+    observer.observe(ref.current);
+
+    return () => {
+      observer.unobserve(ref.current);
+    };
+  });
+}
+
 export default function Person({ person, currentTag }) {
  const url = new URL(person.url);
-  const img = `https://images.weserv.nl/?url=https://unavatar.now.sh/${url.host}&w=100&l=9&af&il&n=-1`
+  const twitter = `https://unavatar.now.sh/twitter/${person.twitter}`;
+  const website = `https://unavatar.now.sh/${url.host}`;
+  const unavatar = person.twitter ? `${twitter}?fallback=${website}` : website;
+  const img = `https://images.weserv.nl/?url=${unavatar}&w=100&l=9&af&il&n=-1`;
+
  return (
    <PersonWrapper>
      <PersonInner>
@ -15,19 +36,19 @@ export default function Person({ person, currentTag }) {
          <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>
+              {person.name}
+            </a>{' '}
+            {person.emoji}
          </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>
+          >
+            {url.host}
+            {url.pathname.replace(/\/$/, '')}
+          </a>
        </header>
        <p>{person.description}</p>
        <Tags>
@ -110,6 +131,9 @@ const PersonInner = styled.div`
  padding: 2rem;
  h3 {
    margin: 0;
+    a:visited {
+      color: var(--purple);
+    }
  }
  header {
    display: grid;
@ -135,7 +159,8 @@ const PersonInner = styled.div`
      text-overflow: ellipsis;
      max-width: 100%;
      overflow: hidden;
-      :hover {
+      :hover,
+      :visited {
        color: var(--pink);
      }
    }
--- a/src/components/header.js
+++ b/src/components/header.js
@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React from 'react';
 import { Link } from 'gatsby';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
@ -21,7 +21,7 @@ function Header({ siteTitle, siteDescription, siteUrl }) {
        <meta name="twitter:image" content={`${siteUrl}/twitter-card.png`} />
      </Helmet>
      <div>
-        <h1>
+        <h1 id="top">
          <Link to="/">/uses</Link>
        </h1>
        <p>
@ -34,10 +34,14 @@ function Header({ siteTitle, siteDescription, siteUrl }) {
 }
 Header.propTypes = {
  siteTitle: PropTypes.string,
+  siteDescription: PropTypes.string,
+  siteUrl: PropTypes.string,
 };

 Header.defaultProps = {
-  siteTitle: ``,
+  siteTitle: '',
+  siteDescription: '',
+  siteUrl: '',
 };

 export default Header;
--- a/src/components/image.js
+++ b/src/components/image.js
@ -1,6 +1,6 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
+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
@ -24,9 +24,9 @@ const Image = () => {
        }
      }
    }
-  `)
+  `);

-  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
-}
+  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
+};

-export default Image
+export default Image;
--- a/src/components/layout.js
+++ b/src/components/layout.js
@ -73,7 +73,7 @@ export default Layout;
 // Global Styles
 const GlobalStyle = createGlobalStyle`
  html {
-    --purple: #1e1f5c;
+    --purple: #b066ff;
    --blue: #203447;
    --lightblue: #1f4662;
    --blue2: #1C2F40;
@ -85,11 +85,11 @@ const GlobalStyle = createGlobalStyle`
    font-family: 'Fira Mono', monospace;
    font-weight: 100;
    font-size: 10px;
+    scroll-behavior: smooth;
  }
  body {
    font-size: 2rem;
    overflow-y: scroll;
-    /* overflow-x: hidden; */
  }
  h1,h2,h3,h4,h5,h6 {
    font-weight: 500;
--- a/src/context/FilterContext.js
+++ b/src/context/FilterContext.js
@ -1,5 +1,6 @@
 import React, { createContext, useState } from 'react';
 import { useStaticQuery, graphql } from 'gatsby';
+import PropTypes from 'prop-types';

 const FilterContext = createContext();

@ -44,5 +45,9 @@ const FilterProvider = function({ children }) {
  );
 };

+FilterProvider.propTypes = {
+  children: PropTypes.element,
+};
+
 export default FilterContext;
 export { FilterProvider };
--- a/src/data.js
+++ b/src/data.js
--- a/src/images/linux.png
+++ b/src/images/linux.png
--- a/src/images/linux.svg
+++ b/src/images/linux.svg
@ -1,4 +0,0 @@
-<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>
--- a/src/pages/index.js
+++ b/src/pages/index.js
@ -6,6 +6,7 @@ import FilterContext from '../context/FilterContext';
 import Layout from '../components/layout';
 import Person from '../components/Person';
 import Topics from '../components/Topics';
+import BackToTop from '../components/BackToTop';

 function IndexPage() {
  const { currentTag } = useContext(FilterContext);
@ -43,6 +44,7 @@ function IndexPage() {
          <Person key={person.name} person={person} currentTag={currentTag} />
        ))}
      </People>
+      <BackToTop />
    </Layout>
  );
 }
--- a/src/util/icons.js
+++ b/src/util/icons.js
@ -2,6 +2,6 @@ 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';
+import linux from '../images/linux.png';

 export { iphone, android, windows, apple, linux };
--- a/src/util/stats.js
+++ b/src/util/stats.js
@ -21,7 +21,7 @@ export function countries() {
    .reduce((acc, country) => {
      if (acc[country.name]) {
        // exists, update
-        acc[country.name].count = acc[country.name].count + 1;
+        acc[country.name].count += 1;
      } else {
        acc[country.name] = {
          ...country,