Skip to content
OverviewSolutions
10
Comments
5

Jonathan Peters

@QMS85Western Cape. South Africa230 points

|Producer|DJ|Graphic Designer| |Self Taught Front End Web Developer|Label Owner @ Digital Divide Records|

Latest solutions

  • IP Address Tracker

    Jonathan Peters•230
    Submitted 6 days ago

    Here are the specific areas where I'd most value feedback and assistance...

    1. Code Architecture & Best Practices...
    • JavaScript Class Structure:
      I'd like feedback on whether the IPTracker class organization is optimal. Specifically:
      A. Is the separation between initializeMap(), bindEvents(), and data handling methods clear enough?
      B. Should I break down the searchIP() method further for better single responsibility?
      C. Are there any JavaScript design patterns I could implement to make the code more maintainable?
    1. Error Handling & User Experience...
    • API Integration Strategy:
      The current mock data system works for demo purposes, but I'd appreciate guidance on:
      A. Best practices for transitioning from mock data to real IPify API calls
      B. How to implement proper rate limiting and caching strategies Whether my current error handling approach (alert() fallback) should be replaced with something more sophisticated like toast notifications or inline error displays
    1. Performance Optimization
    • Map Rendering & Responsiveness:
      I'm particularly interested in feedback about:
      A. Whether the Leaflet.js initialization and marker management could be optimized further
      B. If the current responsive breakpoints (375px, 768px, 1024px, 1440px) provide the best user experience across devices
      C. How to improve initial page load performance, especially with the map library
    1. Accessibility Implementation
    • ARIA and Screen Reader Support:
      While I've implemented basic accessibility features, I'd value input on:

    A. Whether the current ARIA live regions for dynamic content updates are sufficient
    B. If the custom marker implementation maintains proper accessibility standards
    C. Any accessibility edge cases I might have missed in the search form or map interaction
    5. CSS Grid & Layout Consistency

    • Info Panel Responsive Design:
      The grid layout transitions from 1 to 2 to 4 columns, but I'd appreciate feedback on:

    A. Whether the visual hierarchy remains clear at all breakpoints If the overlapping header/info panel design could be more robust
    B. Any CSS Grid improvements that could simplify the responsive logic

    These are the areas where targeted feedback would help me elevate this project from a working demonstration to production-ready code.

    0 comments

  • Job Listings

    Jonathan Peters•230
    Submitted 6 days ago

    • Performance Optimization
      Current Implementation:
      Basic lazy loading is implemented, but there's room for improvement.

    • Specific Help Needed:

    Is the current filtering performance adequate for larger datasets (1000+ jobs)?
    Should you implement debouncing for rapid filter changes?
    Would virtual scrolling be beneficial for very long job lists?

    • Accessibility Edge Cases
      Current Implementation: Good ARIA support and keyboard navigation, but some areas could be refined.

    • Specific Help Needed:

    Are the screen reader announcements too verbose or not descriptive enough?
    Should filter removal have more specific keyboard shortcuts (like Delete key)?
    Is the focus management optimal when filters are added/removed dynamically?

    0 comments

  • Product List With Cart

    Jonathan Peters•230
    Submitted 6 days ago

    Looking at this Product List with Cart project, here are the specific areas where I'd appreciate feedback or help:

    Performance & Optimization Areas:

    1. State Management Architecture
      The current global cart array and direct DOM manipulation pattern works but could be more scalable. Should I implement a more structured state management pattern like a reducer or observer pattern for better predictability?

    2. Event Listener Memory Management
      I'm re-attaching event listeners every time addProductEventListeners() runs after re-rendering. Is there a more efficient way to handle dynamic event delegation without potential memory leaks?

    3. Image Loading Strategy
      Currently using responsive <picture> elements, but with 9 products each having 4 image variants (36 images total), should I implement lazy loading or image preloading strategies for better performance?

    Accessibility & UX Concerns:

    1. Screen Reader Experience
      The cart quantity updates use aria-live="polite" but I'm unsure if the screen reader experience is optimal when rapidly changing quantities. Should I debounce the announcements?

    2. Focus Management in Modal
      Basic focus trapping is implemented, but should I add more sophisticated focus management like cycling through focusable elements with Tab/Shift+Tab?

    Code Quality Questions...
    6. Error Handling Robustness
    The fetch for data.json has basic error handling, but should I add retry logic, loading states, or more graceful fallbacks for network failures?

    1. CSS Grid Responsiveness:
      The layout works well from mobile to desktop, but should I add more intermediate breakpoints or use container queries for better adaptation to various screen sizes?

    Specific Code Review Request:
    I'd particularly appreciate feedback on the updateCartDisplay() and renderCartItems() functions - are they doing too much work and should they be split into smaller, more focused functions?

    These are the areas where I feel the implementation could be improved for better maintainability, performance, and user experience.

    0 comments

  • Multi-Step-Form

    Jonathan Peters•230
    Submitted 10 days ago

    Some Areas Where I Could Use Some Help:

    1. Form Persistence & Data Recovery
    • Add localStorage to save progress so users don't lose data on page refresh
    • Implement session recovery functionality
    1. Enhanced Validation & User Experience:
    • Real-time validation feedback as users type
    • Better phone number validation with formatting
    • Visual indicators for completed steps
    • Smooth animations between step transitions
    1. Accessibility Improvements:
    • Enhanced keyboard navigation between form elements
    • Better screen reader announcements for step changes
    • Focus management when navigating between steps
    0 comments

  • Rock-Paper-Scissors-Game

    Jonathan Peters•230
    Submitted 10 days ago

    Accessibility Improvements

    Error Handling: The code currently has minimal error handling.

    My Specific questions would be:

    1. How to handle cases where SVG icons fail to load?
    2. What to do if localStorage is disabled or full?
    3. How to gracefully handle DOM manipulation errors?
    0 comments

  • EasyBank Website (Built With HTML, CSS & JavaScript)

    #node
    Jonathan Peters•230
    Submitted 12 days ago

    Some Specific Areas Needing Support:

    1. Performance Optimization:
    • Image optimization strategy for the hero mockup images.
    • Bundle size analysis and code splitting implementation.
    • Proper lazy loading for article images and components below the fold.
    1. Animation and Micro-interactions:
    • Implementing smooth scroll animations using Framer Motion.
    • Adding hover states and transitions that match the design system.
    • Creating engaging loading states for better UX.

    Some Code Specific Questions:

    1. Are there any best practices for handling the hero section's complex background positioning across different screen sizes???
    2. What is the Optimal way to structure the articles data - should it come from a CMS or API???
    0 comments
View more solutions

Latest comments

  • Jamie•30
    @Jamie098
    What specific areas of your project would you like help with?

    I would like feedback on styling, more specifically, setting up the styles in the best way to create a common reusable style. I wasn't sure in some cases whether the style should be global or local, and then the question of how local came up.

    For example, styling the name, should the styling just be applied to that specific tag, those tags within that page or globally. If this challenge were a larger I would worry the styles might mismatch slightly in different places or get out of hand.

    Social Links Component

    #astro
    1
    Jonathan Peters•230
    @QMS85

    Astro/HTML Readability:

    • Components use clear, descriptive IDs and classes.
    • Content is concise and easy to follow, with logical grouping of sections (avatar, personal info, quote, social links).

    The CSS...

    • Uses variables for color schemes in variables.css, which increases maintainability.
    • Global styles are clear, with good use of font faces and weights.

    Code/Component Reusability...

    Component Reuse:

    • The SocialLinks component can easily be extended to accept props for dynamic content (e.g., different users).
    • Styles are modular, with variables for easy theme changes.

    Improvements for Reusability:

    • Consider making the social links dynamic via props or a data file, so you don’t need to hardcode each button.
      Example:
    const links = [
  { name: 'Frontend Mentor', url: 'https://frontendmentor.io/solutions' },
  // ...
];
---
<section id="button-list">
  {links.map(link => (
    <a href={link.url} target="_blank" rel="noopener">
      <button type="button">{link.name}</button>
    </a>
  ))}
</section>```  

# Semantic HTML Usage...  
Strengths:  

- Uses ```<section>```, ```<h1>```, ```<strong>```, and ```<p>``` elements appropriately.
The avatar uses an ```<Image>``` component with ```alt``` text for accessibility.  
- Areas for Improvement:  

Social links are rendered as ```<button>``` elements, which are not semantically correct for navigation. Use ```<a>``` tags for links, possibly styled to look like buttons.  
Example:  
```<a href="https://frontendmentor/solutions" target="_blank" rel="noopener">
  <button type="button">Frontend Mentor</button>
</a>```  
Or...  
```<a href="https://frontendmentor.io/solutions" class="btn">Frontend Mentor</a>```  

# Some Hints & Tips...  
- Use Props: Make your components accept props (or use a data-driven approach) for better reusability.  
Semantic Links: Always use ```<a>``` for navigation, not ```<button>```.
- Accessibility: Continue using descriptive alt text and consider ARIA roles for interactive components.   
- Color Contrast: Check your color variables for accessibility (contrast ratio).  

Overall Your version looks awesome, keep up up the great work!!!
  • Jonathan Peters•230
    @QMS85

    The app looks great, code is structured, readable & reusable. Code comments are not excessive, only used where necessary. The app is responsive & adjusts to different screen-sizes

  • Jonathan Peters•230
    @QMS85

    i would suggest that you link the pages & images correctly...

    1. Add the relevant images to your github repository & update your html, to correctly link to the images & CSS stylesheet.
  • Jonathan Peters•230
    @QMS85

    the project looks great i would only suggest, that you change the tab title, in the browser

  • Patrick Neuhaus•10
    @mr-starfish
    What are you most proud of, and what would you do differently next time?

    I'm proud about the final result, is pretty close to the walkthrough.

    What challenges did you encounter, and how did you overcome them?

    Learning CSS and really put the hands on flexbox, for example, is hard, i think my JS is better than CSS.

    What specific areas of your project would you like help with?

    i wanna help with the flex command and the grid command, is very hard to see what each thing do.

    QR Corde page using flexbox

    1
    Jonathan Peters•230
    @QMS85

    well, overall i think this came out looking awesome... The only suggestion i would give is to change the tab title in the browser... Anyway, great work & keep it going All the best!!