nyancodeid / quotes Goto Github PK
View Code? Open in Web Editor NEWThis is the place to try and learn to contribute with a simple, open source quotes website. Part of Hacktoberfest 2021
Home Page: https://quotes.nyan.my.id
This is the place to try and learn to contribute with a simple, open source quotes website. Part of Hacktoberfest 2021
Home Page: https://quotes.nyan.my.id
I got this bug when open quote page
to make it looks live, I add hoverable element on quotes card.
it will look like this
uhh I'm staring at it โจ
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.
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
quotes/src/views/QuoteGallery.vue
Line 100 in 2663e50
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
quotes/src/views/QuoteGallery.vue
Lines 92 to 94 in 2663e50
this is my good first time issue for hacktoberfest 2022! please support :)
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.
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.
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.
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?
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
this is why i've do pull request with name Adding Like Quote and save it to localstorage
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.
I thought when quotes get longer the other element goes weird. it looks like we have blank block here.
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.
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.) ?
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.
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.
Having a light/dark theme option for the UI can be a good addition.
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
quotes/src/views/QuoteGallery.vue
Lines 54 to 58 in 2663e50
I think it would be better to add some effects when hovering over the quote filter
When we click the download button, it will make the dialog card scaling down and back to normal. Is this deliberate?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.