- Retired engineer restarting a career as fullstack developer. - Experient GNU/Linux syadmin. - Arduino enthusiast. - Fluent in English, Spanish and Portuguese. - Amateur UI/UX researcher.
I’m currently learning...TailwindCSS, NextJS, React Native and Cypress
It would be nice to have a methodology to adjust the page to different window sizes in a fluid manner. In other words, to use a positioning (absolute) system that can produce transitions between screen sizes keeping a continued and harmonic flow.
How to handle SVG images in the context of React Native in such way that could be used without translation to React components.
What are the major differences between React with TailwindCSS and React Native with NativewindCSS.
How to style SVG image files with Tailwind and React without injecting the SVG line in the code.
I would like to expand the use of Ionic components to satisfy the design specifications by controlling the internal properties of those objects.
I would try to use a different UI library and create reusable components.
What challenges did you encounter, and how did you overcome them?Getting the card to the correct width was difficult. I had to play around with the CSS to get it to look similar to the provided images.
What specific areas of your project would you like help with?I would like to know if the width and the size of the text is off.
Well executed... I'm also fan of NextJS.
Just a comment about how to enjoy Typecript: The idea is to use classes in the .tsx or .jsx files to apply all the Tailwind magic.
If one place most of the CSS rules in a .ccs file, what remains to Tailwind do ?
Simple and direct... Neat solution!
Just a comment about font family.
Poppins is not being applied to the page. The way you define that in tailwind.conf.js was ignored by Tailwind.
For example: custom fonts:
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import "tailwindcss";@theme { --font-roboto: "Roboto", sans-serif; }
Maybe you could install the Fontanello plug-in in your browser to facilitate this kind of inspection.
Solution Retrospective: Netlify Deployment Challenges
What I’m Most Proud Of
create-react-app outputs to /build (not /dist), a key insight for fixing deployment.What I’d Do Differently Next Time
npm run build locally to ensure no ESLint warnings.build/ vs. dist/).netlify.toml File – Instead of relying on Netlify’s UI settings, I’d define:
to avoid misconfigurations.[build] command = "npm run build" publish = "build" # Explicitly set for CRA
Where I’d Like Support
vite instead of CRA for faster builds?Sharing this helps others avoid similar pitfalls! 🚀 Would love feedback or additional tips from the community.
What challenges did you encounter, and how did you overcome them?Solution:
Updated Netlify’s "Publish directory" from dist to build.
Alternatively, added Netlify.toml file to explicitly define:
toml [build] publish = "build" 2. ESLint Warnings Failed the Build Problem: Netlify treats warnings as errors in CI (process.env.CI = true).
Solution:
Fixed the code: Removed unused variables (e.g., 'use' in Tabs.js).
Temporary workaround: Disabled strict CI checks by setting CI=false in the build command.
Long-term fix: Adjusted ESLint rules in .eslintrc.json to downgrade no-unused-vars to "warn".
Solution:
Ran npm run build locally to replicate the error.
Checked the full error output in the terminal (which was more descriptive than Netlify’s UI).
Solution:
Verified local vs. production behaviour by comparing package.json scripts.
Explicitly defined settings in Netlify.toml to override defaults.
Key Takeaways Test builds locally first to catch issues early.
Always check the actual build output folder (e.g., build/ vs. dist/).
Configure ESLint to match CI behaviour to avoid surprises.
By breaking down each error methodically, I turned deployment hurdles into learning opportunities! 🛠️ Would love to hear how others handled similar issues.
What specific areas of your project would you like help with?Specific Needs:
Can I safely skip ESLint in production builds without risking code quality?
Are there caching strategies (e.g., node_modules caching) to reduce build times?
Specific Needs:
How difficult is the migration for a simple static site?
Would Vite’s faster builds outweigh the configuration effort?
Specific Needs:
Tools or scripts to parse build logs for clearer feedback.
Best practices for setting up custom error tracking (e.g., Sentry for build failures).
Specific Needs:
Should I use a monorepo setup if I add backend services later?
How to handle environment variables securely in Netlify?
Specific Needs:
Critical CSS extraction for a static React site.
Optimal image optimisation pipelines (e.g., Netlify plugins vs. local pre-processing).
Why This Matters: Clearer builds, faster deploys, and fewer surprises! If you’ve tackled any of these, I’d love your insights. 🚀
(For context: This is a static React landing page with minimal dependencies, but I’m planning to scale complexity over time.)
Nice solution!
Some comments:
type="email in a input do not mean a real validation of the content. For example: qqq@www will be accepted. In general, we use a regular expression to guarantee that, at least, the test has xxx@yyy.zz format.Hope that this helps.
I created it with my self only i am proud to become independent to develop my self
What challenges did you encounter, and how did you overcome them?i just implemented on bases of my learning so i did no face any problem to create it
What specific areas of your project would you like help with?here i used display flex to align the card that was helped me to complete this one
OK, nice job! As this solution is tagged: tailwind-css
It seems that was a mistake, as there is nothing of tailwind in the code...
Everything I did was just basic but it was fun using tailwind css v4.1 on my project. Different experience all together.
Nice job !
Some comments:
[@media(min-width:360px)]:text-3xl.The project was overall nice. I was able to conclude all requested features. Feel free to give comments.
What challenges did you encounter, and how did you overcome them?No challenge actually.
What specific areas of your project would you like help with?None for now.
Neat solution !
An UX suggestion:
If the page is in dark mode, it makes more sense if the upper corner show “Light Mode” and vice versa. When the user click in the mode toggler button is to change to the other mode not the present one.
Comments:
