Skip to content

modern and minimalist UI redesign with new features #1358

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 29, 2025

Conversation

sulimanbenhalim
Copy link
Contributor

hey @lipis , so i redesigned the site with some cool stuff that was missing before

main changes:

  • added search functionality to find flags quick (works in realtime)
  • new continent filter dropdown so ppl can find flags by region
  • flag cards are clickable + copy the html to clipboard so u dont have to type it
  • toggle between npm/yarn install commands
  • usage modal with syntax highlighting (its much better now)
  • detects user country to give personalized examples
  • fixed some perf issues - lazy loading images & localstorage cache

all the styling is done with vanilla CSS no frameworks needed so its super lightweight. did bunch of optimizations for load time too. page was like 2.5s load time before, now its under 1s.

code is structured better (modular functions) and fixed some bugs during implementation like memory leaks from timeouts not being cleared you may review this part if I missed something.

let me know what u think! would be cool to get this merged since it makes the site way more usable especially for devs who just need to grab a flag quick.

@lipis
Copy link
Owner

lipis commented May 27, 2025

Will test it and sleep on it and let you know!! Thank you!

@lipis
Copy link
Owner

lipis commented May 27, 2025

Looks very nice I like it.. can you put the Google Analytics back please?

@sulimanbenhalim
Copy link
Contributor Author

hey @lipis added the Google Analytics back! forgot to include it in the redesign.

tracking events are in there too for the format switching (4:3 vs 1:1) like the original had

should be good to go now 👍

@lipis
Copy link
Owner

lipis commented May 28, 2025

Could you run yarn fix to fix the errors please as well?

index.html Outdated
const COUNTRY_CACHE_DURATION = 86400000; // 24 hours in milliseconds

// Production-ready country detection
const detectUserCountry = async () => {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we really need it? Let's make it simpler.. shall we remove the country detection thingy?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a tiny delight the can devs see their own flag in examples :)
also you don't need to worry about crashing it has zero risk: 24hr cache + dual fallback APIs

I think it's a creative addition it makes docs feel personal without complexity I think it's worth keeping?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nah.. no need to overcomplicate things.. I would rather keep it simple and just show the flags! Usually people using them to show multiple of them anyway.. Thank you! Remove that and we're good to go..

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay check it out now I have removed this feature

@sulimanbenhalim
Copy link
Contributor Author

hey @lipis check it out now I used open-color pallete and formatted using yarn fix

@lipis
Copy link
Owner

lipis commented May 29, 2025

Awesome!!.. Thanks

@lipis lipis merged commit 50e718c into lipis:main May 29, 2025
2 checks passed
@sulimanbenhalim sulimanbenhalim deleted the modern-ui-redesign branch May 29, 2025 15:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants