Explore HTTP status codes with this collection of Rihanna GIFs at https://www.httriri.com/. Each GIF links to the relevant https://httpstatuses.com/ page.
This is a Next.js project bootstrapped with create-next-app
.
First, install the dependencies:
npm install
# or
yarn
Then, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js
. The page auto-updates as you edit the file.
-
The GIF should include Rihanna and not already be included on https://www.httriri.com/. In rare cases, a GIF that already exists in the HTTRIRI collection can be used for another status code but within the same set of proposed changes a new GIF should be chosen for the other status code to ensure there are no duplicate images and the overall size of the collection is growing.
-
Project maintainers reserve the right to determine whether or not a particular Rihanna GIF reflects the status code in question.
-
New GIFs should be added to the
/public/images
folder and named like [statuscode].gif -
The statuses file should be updated to include the new status code in
statuses
. Note the statusCodes should appear in thestatuses
object in ascending order. https://github.com/M0nica/httriri/blob/main/utils/statuses.ts -
For status code 404. I added a new image
404.gif
to/public/images
and updated statuses.ts to include:
code: 404,
title: "Not Found",
description:
"Rihanna singing Story of my life Searching for the right But it keeps avoiding me",
},
Note the code, title and description (which is used for image alt text are all required. The title should match the title on https://httpstatuses.com/ for that particular status code.
Here are some resources for creating GIFs:
- EzGif - Web
- Giftuna.io - Open source. Windows, Linux, Mac
- GifMaker - Android
Creating GIFs with EzGif
- On the website header, click on Video to gif option
- Upload the video file or URL
- Click on Upload video
Here are some tips for finding GIFs:
- When using Google, track down any GIF by clicking "Search Tools" under the search bar, then go into the "Any Type" dropdown and select "Animated."
- You can make use of Tumblr, the GIF's natural habitat to find cool GIFs.
- Find the GIF you are looking for by searching a term or set of terms in the search bar atop giphy.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!