Jonathan Hammond’s Post

One of my favorite principles in frontend engineering: → KISS Keep It Simple Stupid. As a front-end developer I have 2 main goals: - reducing technical debt - reduce complexity How many times did you work with code written six months ago and it's complex to understand? It happened to me in the past and I hated it. That could be prevented with KISS. How do I implement KISS? ✅ reducing over-engineering of a solution → If you are asked to build a house, don't build a castle. ✅ keep code simple, readable and reusable ✅ try to follow specific pattern ✅ continuous refactoring to eliminate weird code Why complicate things when simplicity works?

Finding your way in the codebase should not be frustrating or cause confusion. If change is needed somewhere, it should be quite straightforward to figure out where that change is due.  This means that the code has been structured and divided in a way that makes sense. It depends largely on the understanding of the problems to solve and the domains in which these problems need to be solved. This is basically the ‘Screaming Architecture’ idea that Uncle Bob pitched. Vertical slicing by feature / functionality can help us achieve this. It gets a bit harder when the requirements touch different domains, where you  might want to choose to structure along the different domains. It is not as easy as just splitting up by domain nouns.  The benefit of this ‘Screaming Architecture’ is exactly that it makes your codebase easier to navigate. But there is a pitfall as well: If your code base reflects the domain, it is only easier to navigate if you understand the problem domain. I am fine with that. The idea that the entire world should be able to understand at first glance what your code is about and what it is doing is a bad idea anyway. During my career, I have come to believe that in order to contribute to meaningful solutions to a domain, you need to understand the domain. #softwaredevelopment #softwareengineering #softwaredesign

Ready to elevate your coding game? Here are some essential tips for writing high-quality code: 1. Clean Code Architecture 2. DRY Code 3. Simpler Design 4. Write Proper Comments 5. Maintain Modularity 6. Static Code Analytics Remember, great code is not just about functionality but also about readability and maintainability! Let’s build something amazing! #CodeQuality

I recently solved this challenge at frontend mentor. The challenge was to create a simple contact form that successfully shows errors and gives success message on completion. You can try this out at frontend mentor:- (https://lnkd.in/gff96JfC)

Day-9 learnings: 👉 Rendering Lists and conditional operator ➡ Map , filter and reduce in react ➡ Conditional Operator 👉 All about components ➡ Class vs functional component ➡ State vs Props ➡ Types of components . . . . Piyush Agarwal #interviewpreperation #frontend #react #roadsidecoder #learning

Checkout my in-depth Frontend Interview Course to learn these topics🔥 - https://lnkd.in/gWMcsPiH

another challenge from Frontend Mentor I finished, challenge name: Workit Landing Page feel free to give suggestions and advice, it's only a level 1 challenge

🚀 Frontend Engineers: Claude's New "Artifacts" Feature is a Game-Changer! As someone with zero frontend experience, I just created a landing page in under 5 minutes that includes: • Real-time 3D rendering • Mouse-based interactivity • Dynamic lighting and shadows • Responsive design How? Claude's new Artifacts feature enables rapid prototyping and iteration. To put this in perspective: an experienced frontend engineer recently spent 2 days implementing something similar. Now, it's possible in mere minutes! Anthropic Claude is becoming an indispensable tool for anyone using LLMs for coding. The speed and efficiency it brings to the development process are truly remarkable. Have you tried Claude's Artifacts feature yet? Share your experiences below! 

another challenge from Frontend Mentor I finished, challenge name: Interactive Rating Component feel free to give suggestions and advice, it's only a level 1 challenge

🚀 Day 60 of #100DaysOfCode Update: Enhancing and Styling 🌟 Hey everyone! 👋 Today was a productive day as I made significant progress in my Frontend Mentor challenge project. Here's a summary of what I accomplished: Enhanced Tailwind Config: Updated tailwind.config.js to include additional custom classes, making styling more flexible and efficient. Applied Repeated Styles: Modified index.css to use @apply for repeated styles and styles requiring more specificity, streamlining the CSS and making it more maintainable. Managed Background Images: Updated Root.jsx to use useLocation for path detection and useEffect for managing background image states, ensuring dynamic and context-sensitive backgrounds. Styled the Navbar: Focused on styling the navbar for larger screens, improving the overall look and feel of the navigation. It's exciting to see how these enhancements are bringing the project closer to completion. Thank you for your continued support and encouragement! Let's keep coding and learning together! 💻✨ #React #ReactRouter #TailwindCSS #FrontendMentor #CodingJourney #LearningToCode