15+ Best Web Design Communities & Discussion Spaces in 2021

Networking is an important part of almost every career, especially web design. And being part of a community related to your industry can bring many benefits. When you join a community, you’ll always have a place to turn to when you want to seek advice, get feedback on projects, find a solution to a problem,…

React Compatibility Issues in Firefox vs Chrome

I’m currently learning React and have noticed some unusual behavior in the Firefox browser.The example is a nav bar containing a logo on the left, some links in the center, and some social media icons on the right.When I open the link below in Chrome, everything is displayed as it should however in Firefox the social media icons are completely missing.I’ve verified the “react-icons/fa” imports aren’t the problem and am pretty sure it has something to do with the “.social-icons” class in the css.Here is the tutorial Source Code.In Navbar.js the unordered list pulls the icon and url data form data.js and has “social-icons” class:
{social.map((socialIcon) = > {
const { id, url, icon } = socialIcon;
return (

{icon}

);
})}

The CSS is responsive and only shows the icons on larger screens.Please open the link below in Chrome and Firefox to see the difference.Navigation BarWhen inspecting the html elements in Firefox, they are present but for some reason those are greyed out and are not being displayed.Any help would be appreciated as I’m sure I’ll run into this again in the future.Thanks in advance.

Color Tools And Resources

Today, we’re shining the spotlight on color tools and resources for all kinds of projects, from all types of color palettes and generators to getting contrast and gradients just right for your projects. This collection is by no means complete, but rather a selection of things that the team at Smashing found useful and hope…