Giter Club home page Giter Club logo

quotes's Issues

It would be good adding hoverable on quotes card

to make it looks live, I add hoverable element on quotes card.

it will look like this

Quotes.Every.Day.Inspirasional.Quotes.-.Google.Chrome.2021-10-04.11-57-36.mp4

uhh I'm staring at it โœจ

Improve UX for search or filter result

Just because search or filter feature was added, I think we need to handle when the result is empty. Like using an empty state design. It is useful to tell the user that no result found with a nice way.

Synchronization between searches and favorite quotes

What should be the behavior for this cases?

Case 1
When we do a search on all quotes (not favorites), then switch favorite quotes, then switch back to all quotes, it will show all quotes instead of filtered quotes even search keyword exists

applyfilteredQuotes(allQuotes.value)

Case 2
When we do a search on all quotes, then switch favorite quotes, it will show all favorite quotes instead of filtered favorite quotes even search keyword exists

const item = allQuotes.value.find(quote => quote.id === quoteId)
return item || null

2021-10-28.04-43-53.compressed.mp4

Domain Moved from `quotes.nyandev.id` to `quotes.nyan.my.id`

Hi there ๐Ÿ‘‹, because my domain nyandev.id will expire in the end of January 2022 and because I can't renew the domain so I decided to change the domain from the all web I created to *.nyan.my.id.

Thank you for using this web application.

Optimize: reduce github avatar size

For now we are consuming the github avatar provided by github directly. The truth is that github provides an avatar image of about 420x420 in size with the byte size being around 29Kb-30Kb. This makes our website load heavily by thinking about the number of github avatars that are loaded, even though we have implemented lazy loading on images but if there is still a way to optimize it, why not?

So github has an additional parameter in its avatar url, namely s= which has a positive integer value that represents the width of the image. We can use this method to reduce the image size, because we only need 24x24 size so we can add s=24 behind our github avatar url in <QuoteCard /> component. We can reduce byte size of image up to ~94%. Such drastically different right?.

I working on it, so i'm ganno ship this update soon.

Improve or fix search reactivity

It is about the reactivity of the search feature, I think when we change the search category (dropdown), it must be updating the result corresponding to the current category & keyword (no need to trigger any change in the keyword).

Here is for the detail.

Search.Reactivity.mov

Duplicate or same quotes

Tbh, this is a really cool project I love the design and idea, simple but useful. I was wondering, what if there's the same quote with the other contributors. Is that okay or acceptable?

haloo

halo mas @nyancodeid sekarang aku lg belajar web programming aku iseng buat app ini wallofresolution inspirasinya dari app quote mas @nyancodeid dan aku mau izin pake palet gradienttnya punya mas karena blm bisa buat pallet gitu hehe. Terimakasih sebelumnya

no like or save for localstorage

this is why i've do pull request with name Adding Like Quote and save it to localstorage

  • Forgetting Save quote and forget keyword to searching quote
  • Saving quote to storage device but not need to share in social media
  • Simple saving quote without spamming on device storage,
  • simple feature with filtering which Quotes we like or no, we just click toggle button and all quotes are showing

Blurry download result

Just trying to download the quote image, but it showed as a blurred image!

Please look at this:

quotes-nyandev-id-1633915036734

Github API is Limited and Slow

We have ยฑ 81 yaml files inside of quotes folder, and it's mean everytime we run npm run generate:quotes we have to fetch 81 times to Github API to get users detail like full a name, avatar, and follower count. Couple days ago i create a PR #60 that include an optional Github Token as a Environment Variable helped by .env / .env.local files. Why i did this? because Github API is rate limited without Authentication or Token.

Now that the rate limited problem has been solved by using tokens, now many requests make it slow. And I just realized, why don't we call it using GraphQL instead. Some may ask what is the difference between GraphQL and the REST API used today.

Well , with GraphQL, it is very possible for us to retrieve more than one user data in one request. So we can simply determine how and what data we will receive by sending a formatted query according to what is provided by Github GraphQL. So instead of sending 81 requests to the Github API we can easily get them with 1 request using Github GraphQL.

I am working on it, so stay tune.

Reference

Build issues?

I think something went wrong!

Bugs

*I haven't checked the source code yet!

when quotes get longer the other element goes weird

I thought when quotes get longer the other element goes weird. it looks like we have blank block here.

Screenshot from 2021-10-05 23-13-16

what about to make their height same with each other. I mean we hide long quote's by previewing them, then make it visible when we hover on it. like how facebook does for their status profile. and yes add animation on it so the page will still look live.

Add search feature

I was thinking about to bring search feature
Here are my poor design
image
There are also a search filter just like github issue search bar (maybe)
We can filter it by

  • Quote (text)
  • From (author)
  • User (github user)

What do u think?

[Feature] Add author's description

Great project ! Simple but elegant ! @nyancodeid

I wonder whether we could add new author's description and show it on the card ? So everybody who reads the quotes also knows who/what is the author's job (CEO of xxx, Founder of xxx, etc.) ?

Search feature infinite scroll didn't work

I think, my bug in the previous search feature still there.

When i want to search for quotes "dan", and i scroll it to the bottom until infinite scroll finish load the quotes. Then i want to reset my search, but when i scroll it to bottom, the infinite scroll didn't load the new quotes.

Maybe the problem is the scroll listener on window has been removed if we already load all quotes.

Move Deployment from Cloudflare Pages to Vercel

I realize that we doing so many deployment using Cloudflare Pages. But Cloudflare Pages has limited deployments (500 every month). And, we don't actually have build preview for every PR, sometimes it's annoying when we need to review features that need to reviewed both design and code.

So, i think we need move into Vercel. I believe Vercel already have all we need.

Add dark mode

Having a light/dark theme option for the UI can be a good addition.

Search by user

I'm just wondering why not search both by username or name?

Currently if there is a github account then search by github name, if not then search by username written in the quote

case 'user':
if (!quote.github?.available)
return (quote.username.toLowerCase().includes(search.keyword.toLowerCase()))
return (quote.github?.name.toLowerCase().includes(search.keyword.toLowerCase()))

Better empty message for favorite quotes

I think we must have a different empty message for favorite quote. The current empty message unrelated with the favorite feature, and currently we don't search anything.

For example:

Anda belum memiliki quote favorit, โ€ฆ

Empty

Download effect?

When we click the download button, it will make the dialog card scaling down and back to normal. Is this deliberate?

Quotes.Download.Animation.mov

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.