@Jojo-onedev
I’m interested in Programming, Mathematics, and HumanScience(Sociology, Economy and philosophy). Fun fact: I'm a cook and I like cooking in my free time, I also an amateur photographer interested in minimal and st
I’m currently learning...studying Finance and learning algorithms and I strive for a freer world.
Latest solutions
Next.js Calculator
#next#react#tailwind-cssSubmitted about 1 year ago- CSS File Optimization: Challenge: The CSS files might contain redundant or poorly optimized code, leading to larger file sizes and potentially slower load times.
Help Needed:
-
Code Review: A detailed review of the CSS files to identify and eliminate redundancies and improve the overall structure.
-
Optimization Techniques: Guidance on implementing best practices for CSS optimization, such as minification, removing unused styles, and leveraging critical CSS for faster rendering.
-
Refactoring for Maintainability: Suggestions on refactoring the CSS to make it more maintainable and scalable, potentially incorporating BEM (Block Element Modifier) methodology or similar conventions.
- Improving and Enhancing Usable Themes Challenge: While the current themes are functional, they may lack polish and could be improved for better usability and aesthetics. Help Needed:
-
Design Feedback: Expert feedback on the current themes' design, color schemes, and overall aesthetic appeal. Suggestions for making the themes more visually engaging and user-friendly.
-
Accessibility Improvements: Recommendations for ensuring that all themes meet accessibility standards, including color contrast and readability for users with visual impairments.
-
Advanced Theming Techniques: Guidance on implementing more advanced theming techniques, such as CSS Variables for dynamic theming and better integration with Tailwind CSS.
CSS File Optimization
-
Audit and Clean-up: A thorough audit of the existing CSS to remove any unused or redundant styles.
-
Performance Enhancements: Techniques to improve CSS performance, including the use of critical CSS, lazy loading non-essential styles, and ensuring efficient use of
Interactive card with next.js and tailwind CSS
#next#react#tailwind-css#typescriptSubmitted about 1 year ago
Latest comments
- @Ehsan-eslami
It's a grate solution for this challenge, I like it.
- The animations for drop down text is awesome and borders.
- Background Image works fine and responsive.
- Your Js logic works fine and simple, but it's better to delete the console.log in the develope branch.
- And make the dialog responsive, because in the mobile size it has a size problem
- @maxnoelpWhat are you most proud of, and what would you do differently next time?
Most prud of my shadow and that i finished the Challenge. I learn coding since two weeks and i love it.
What challenges did you encounter, and how did you overcome them?For me its very tricky to use the Flexbox. But i finished it, with some that i leraned.
@Ehsan-eslamiHi @maxnoelp. You've done a great and a cool job, be proud of yourself. Just a few small tips that could look awesome, add font family "Outfit" to your project and fade the shadow more. The rest is good.
🥳happy coding.
- @gmagnenatWhat are you most proud of, and what would you do differently next time?
I found an interesting setup for sass with a few node packages Static site sass setup. It works great for small static projects.
I refactored my code with @extend to avoid repeated parts. It works great also for full component styling like the button.
Next time i'll implement mixins to have flexible component that I can reuse with different values.
What challenges did you encounter, and how did you overcome them?The different spacing between mobile and desktop. I tried to avoid media queries and use only fluid value with clamp. Maybe there is a better way?
What specific areas of your project would you like help with?What is your best structure to organise your styles in different files?
@Ehsan-eslamiAnother perfect project, just some few tip. the font weight in "london, united kingdom" should be thinner and I think it would have more border radius.
- @gmagnenatWhat are you most proud of, and what would you do differently next time?
I tried do make this solution as quickly as I could. To improve efficiency I should start with a boilerplate where I already set the base CSS reset and custom properties organisation so I don't have to spend to much time on this.
Next time i'll use a build tool and preprocessor with SCSS. It will help keep consistency and speed up the styling process.
I used the chrome "perfect pixel" extension to get as close as possible from the design.
What challenges did you encounter, and how did you overcome them?Getting spacing correctly and the closest possible to the design. I used a chrome extension to get the design as an overlay in the browser. By inspecting and adjusting the values I think I achieved a decent result.
What specific areas of your project would you like help with?I would need help on code structure. I'm not sure about the card__wrapper, it feels like an extra div that can be simplified;
@Ehsan-eslamiOne of the best and complete solution for this challenge. Thank you, I learned a lot
- P@jormazlop@Ehsan-eslami
The Whole design is good, but you should change some things. First of the card isn't responsive, second in the query section in my opinion it's better to set action on the div.
