API shortening - CSS animations and transistions

Community feedback

• 

  Marlon Passos•940

  @MarlonPassos-gitPosted about 3 years ago

  hello dave great job as always, one hour i get to your level.

  A little detail that I saw that can improve your project and avoid this mistake in the future. When I put a very big link that doesn't have "-" it breaks the designer, see https://prnt.sc/1v52ne7

  to solve this problem you can use overflow-wrap: anywhere; on the element that looks good, see https://prnt.sc/1v52tzj

  and if you pay attention we see that there is a little purple border near the corner of the white balloon, a slight detail that adding a border-radius to the bottom element solves.

  Otherwise keep up the great work and we are here waiting for your next project 😃

  Marked as helpful

  1

  ---

  

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  @MarlonPassos-git thanks for the good words. For sure, I don't think you are far behind me! I hadn't tested with very long urls. Nice catch, I'll look into sorting that out!

  Cheers

  1
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work for this one. Layout in desktop looks really great, it is responsive and the mobile layout looks great, just that hero-section image that you are talking about right.

  Have you tried using it as a background-image? This way you can manage it's size background-size then you could make use of clamp inside that property to manage well the size. Sometimes svg does not work the way we wanted it haha and I don't know why as well.

  Let me just fork the repo and test on my end:

  • Okay, so I just look at it and it seems fine, until this line:

  results.innerHTML += urls
      .map((url) => {
        return `
      <li class="split container">
        <p class="original">${url.original_link}</p>
        <p class="short">${url.full_short_link}</p>
        <button class="cta" aria-live="polite">Copy</button>
      </li>`;
      })
      .join("");
  

  You might think, " I am just adding an li element, why does it render the whole content" It is because of += operator. += differs in every language in concatenating strings. Some languages does not iterate per characters on the string, but some like js iterates through.

  So when you use:

  results.innerHtml +=
  

  It iterates through the current string of the results element, meaning you are iterating again on the previous result of the results element, so instead of actually adding a single element, you are adding the previous ones plus the new added url on it. That is why you should avoid += concatenation in strings in js, it would be better to make them an array then .join them.

  So a fix to the solution, you can use this:

    const list = document.createElement("li");
    list.className = "split container";
    list.innerHTML = urls.map(url => (`
      <p class="original">${url.original_link}</p>
      <p class="short">${url.full_short_link}</p>
      <button class="cta" aria-live="polite">Copy</button>`)
    )
    results.appendChild(list);
  

  This way you are actually adding only one.

  Marked as helpful

  1

  ---

  

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  @pikamart thanks so much for taking the time to go through my code and consider the questions I asked. This is really appreciated.

  I'm on my night off today! But I will go through your suggestions tomorrow and try and get things working. I think I can see the JS issue now - thanks again for that.

  As for the SVG, I just have to hope that I get lucky!!

  0

  

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  @pikamart this worked perfectly, I think I understand the issue - I'll have to read up a little more to really get my head around it.

  I've not battled the SVG yet.... saving that for when I'm feeling strong!! Thanks so much for the advice - much appreciated.

  1
• 

  Aiaru Mukhamedyarova•45

  @anapimolodecPosted about 3 years ago

  Hey, I really liked your work! Everything is working great, but it was quite long for a link to get shortened.

  Design is top! But, one small thing -> in mobile, the landing image is not centered.

  Keep coding~

  1

  ---

  

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  @anapimolodec thanks for the kind words! Yes the API is very slow. There's not much I can do about that as it is a problem on their side.

  I really struggled with the landing image and I have not succeeded. Normally I would expect an svg to respond to the size of the container but this one didn't.

  I'm not sure why, but I'll have another look later...

  1