Skip to content
OverviewSolutions
32
Comments
2
P

eestaniel

@eestaniel630 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Dylan Heslop•2,440
    @dylan-dot-c
    What are you most proud of, and what would you do differently next time?

    Been a while I've done something in vanilla JS, so its always a good feeling going back to basics

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

    Was planning on using vue, but it seems to have some compatability issues with Leaflet so I just went with vanilla js.

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

    Would like to have to review on my coding style and what can be done better.

    Responsive IP Address Tracker done with Vanilla JS

    #accessibility#fetch
    2
    P
    eestaniel•630
    @eestaniel

    Hey Dylan,

    Good job with the challenge. I’ve reviewed the JavaScript code you shared and here are some suggestions to improve its efficiency, readability, and error handling, along with a breakdown of each change and its benefits.

    Direct DOM Element Access

    • Directly accessing DOM elements simplifies the code by eliminating the need for an intermediary object to store these references. Here’s how you can update the DOM manipulation:
    const form = document.getElementById("form");
const ipElement = document.getElementById("ip");
const locElement = document.getElementById("location");
const ispElement = document.getElementById("isp");
const timezoneElement = document.getElementById("timezone");

function updateData(ip, isp, city, region, timezone, postalCode) {
  ipElement.textContent = ip;
  ispElement.textContent = isp;
  locElement.textContent = `${city}, ${region} ${postalCode}`;
  timezoneElement.textContent = `UTC ${timezone}`;
}

    Simplify Initialization: Replace window.onload with Direct initMap() and getInfo() Calls, Utilizing defer

    • Since your script tag includes the defer attribute, we can remove the window.onload and call initMap() and getInfo() directly. This approach leverages the defer attribute effectively, ensuring the DOM is fully loaded before script execution:
    // beginning consts initialization here
let map = initMap()

// other functions here

function initMap(defaultView = 15) {
  if (defaultView <= 0) {
    throw Error("View value can't be less than 1");
  }
  const map = L.map("map").setView([10, 10], defaultView);
  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 20,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  }).addTo(map);
  return map;

// Other functions here
getInfo()
}

    Adding Error Handling for fetchData

    • Enhancing error handling in fetchData prevents silent failures and makes issues easier to debug:
    async function fetchData(url) {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
}

    Error Handling in Asynchronous Functions

    • Implementing try-catch in asynchronous functions like getInfo allows for graceful error management and improves the user experience by handling exceptions properly:
    async function getInfo(ipAddress = null) {
  let url = "https://geo.ipify.org/api/v2/country,city?apiKey=APIKEY_HERE";
  if (ipAddress) {
    url += `&ipAddress=${ipAddress}`;
  }
  try {
    const data = await fetchData(url);
    const {lat, lng, timezone, city, region, postalCode} = data.location;
    const {ip, isp} = data;
    updateData(ip, isp, city, region, timezone, postalCode);
    updateMap(lat, lng);
  } catch (error) {
    console.error("Failed to fetch IP data", error);
    alert("Failed to fetch IP data");
  }
}

    While embedding API keys in frontend code is common, it exposes them to security risks. For sensitive interactions, consider managing API requests server-side with secure storage for API keys, like using .env files. This aligns with best practices and ensures data security.

    Overall good job with the challenge.

    P.S. I believe in your styles.css file, your html,body block contains both margin: 0, and margin: auto;.

    Marked as helpful
  • Braile•220
    @brailecg
    What are you most proud of, and what would you do differently next time?

    using supabase as backend as a service with authentication

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

    using supabase as backend as a service with authentication. overcame them using documentation, chat gpt, supabase youtube channel

    What specific areas of your project would you like help with?
    1. The realtime update of ui still needs better solutioning.
    2. Folder structuring

    Kanban using Nextjs, Tailwind and Supabase

    #next#tailwind-css
    2
    P
    eestaniel•630
    @eestaniel

    Hey there,

    Great job on the Kanban fullstack app! It's looking impressive. A few things that I've noticed:

    • Consider implementing a guest login for users who prefer not to use Google or just want a quick view.
    • Noticed some backend issues: "Uncaught (in promise) Error: An error occurred in the Server Components render."
    • When dragging columns within the create board modal, task IDs are visible.
    • "Add Task" remains functional even when no boards are present.
    • On the desktop view and mobile board selection, the board name input retains its state after exiting the modal.
    • Also, accessing /dashboard when not logged in does not redirect me to /auth

    Overall, fantastic work!

    Marked as helpful