DEV Community: Gregor Schafroth

The Best AI Tools in 2024: ChatGPT, Perplexity, and Cursor

Gregor Schafroth — Sat, 23 Nov 2024 05:27:33 +0000

⭐️ In a recent episode of The Next Wave podcast, Matt Wolfe and Nathan Lands ranked the most important AI tools available today. 3 got "S-tier" ranking: ChatGPT, Perplexity, and Cursor

🤔 Personally I'd replace Cursor with Claude, but still a very interesting list

👇 Lets look at why these 3 tools topped their list

ChatGPT

While not Nathan's primary go-to tool, ChatGPT earned its S-tier status for consistently "setting the bar" that other AI models strive to match. The Matt and Nathan noted that ChatGPT's GPT-4 model remains the benchmark against which all other language models are compared. They highlighted several key features:

Daily voice chat capabilities
Custom GPT creation for specific tasks
Superior reasoning capabilities with their latest model
Continuous feature improvements
Integration with multiple file types

Perplexity

Both Matt and Nathan agreed enthusiastically about Perplexity's S-tier status, with Matt calling it "one of the most useful AI tools available right now." They praised Perplexity for:

Rapid development and feature shipping
Model-agnostic approach (works with Claude, GPT-4, and other models)
Powerful web search capabilities
Ability to provide detailed research with source links
Integration with various AI models, including Claude 3.5 Sonnet

Cursor

Matt and Nathan rated Cursor as S-tier specifically for its impact on software development. Key highlights included:

Ability to understand and work with entire codebases
Superior debugging capabilities
Integration with various APIs and documentation
Dramatically improved development speed
Real-world adoption by Silicon Valley teams

Matt and Nathan emphasized that Cursor is having a "major impact on software development," with Matt noting how they built a complete working app in just 45 minutes during a previous episode

And there you have it. 2 expected picks (ChatGPT, Perplexity) and 1 surprise tool (Cursor) are what they selected as the top 3 for 2024.

What are your top 3 AI tools? do you agree with their or my picks? Share your thoughts in the comments below

Why Businesses Should Offer AI Customer Service Assistants

Gregor Schafroth — Fri, 22 Nov 2024 07:33:02 +0000

🍕 Just like we humans care love eating food, businesses love generating revenue
🥵 And just like we humans like to reduce unnecessary effort, businesses like reducing expenses
🦾 AI customer service assistants can help with both of this, for example by 📈 converting more leads and 📉 reducing employee customer service work
Let's look at this in a bit mroe detail

The Real Benefits of AI Assistants

1. 24/7 Availability

Unlike human agents who need sleep and breaks, AI assistants are always available. This means customers from any timezone can get immediate help with common issues, leading to higher satisfaction rates

2. Cost Efficiency

While the initial setup requires investment, AI assistants can:

Handle multiple conversations simultaneously
Reduce the workload on human agents
Lower operational costs significantly over time

3. Consistent Service Quality

AI assistants never have a "bad day." They provide the same level of polite, accurate service whether it's their first or thousandth interaction of the day

Real-World Impact

Some examples:

Clarna: 66% of customer service chats handled by AI. Customer issues are now resolved in 2 minutes, compared to 11 minutes before the introduction of AI
Ikea: 47% of customer queries handled by AI chatbot. 8500 employees were freed up to do other work.
Sephora: Increased conversion by 11% thanks to AI Chatbots

You can find more details and examples in my video 7 Ways AI Chatbots Can Help Your Business

The Human + AI Partnership

It's crucial to understand that AI assistants aren't replacing human agents—they're empowering them. By handling routine queries, AI frees up human agents to focus on complex issues that require empathy and creative problem-solving or other work that has to be done.

Getting Started

The best approach is to:

Identify your most common customer queries
Start with a focused implementation
Gradually expand capabilities based on feedback

Conclusion

AI assistants aren't just another tech trend — they're a practical solution to real business needs. As customer expectations continue to rise, companies that embrace this technology will have a significant advantage over those that don't.

The question isn't whether to implement AI assistance, but when and how to do it most effectively.

What's your experience with AI assistants? Have you implemented one in your business? Share your thoughts in the comments below.

daily code 78 | js local storage

Gregor Schafroth — Tue, 23 Jul 2024 12:51:20 +0000

alright its time for another small coding exercise! today let’s practice local storage in javascript with a simple to-do list app.

Task

Use JavaScript to create a basic to-do list application that allows users to add, remove, and persist their tasks using localStorage.

Inputs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Local Storage Exercise</title>
  </head>
  <body>
    <h1>To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Add a new task" />
    <button id="addTaskBtn">Add Task</button>
    <ul id="taskList" class="task-list"></ul>

    <script src="index.js"></script>
  </body>
</html>

that’s all you get. build out the javascript from here! you can find the solution below

Step by Step Solution

were you able to make it?

below you can find the step by step solution with the full one at the end

First, lets implement adding new tasks directly to the DOM

document.addEventListener("DOMContentLoaded",
  (event) => {
    const taskInput = document.getElementById("taskInput");
    const addTaskBtn = document.getElementById("addTaskBtn");
    const taskList = document.getElementById("taskList");

    // extract task input value
    const addTask = () => {
      const task = taskInput.value.trim();
      if (task) {
        addTaskToDOM(task);
        taskInput.value = '';
      }
    };

    // add tasks to DOM
    const addTaskToDOM = (task) => {
      const li = document.createElement("li");
      li.className = "task-item";
      li.textContent = task;

      taskList.appendChild(li);
    }; 

    // Event listener for the add task button
    addTaskBtn.addEventListener("click", addTask);
  });

next let’s add the remove notes feature as well. For this we change the addTaskToDOM function to add a Remove button and then implement the removeTask function

// add tasks to DOM
  const addTaskToDOM = (task) => {
    const li = document.createElement("li");
    li.className = "task-item";
    li.textContent = task;

    const removeBtn = document.createElement("button");
    removeBtn.textContent = "Remove";
    removeBtn.onclick = () => removeTask(li);

    li.appendChild(removeBtn);
    taskList.appendChild(li);
  };

  // Remove task from DOM
  const removeTask = (element) => {
    element.remove();
  };

Ok that works but if we reload the page, our tasks will go all away. To prevent this let’s add them to local storage.

To do that let’s first add 3 lines to our addTask function to the following:

// Add task to localStorage
  const addTask = () => {
      const task = taskInput.value.trim();
      if (task) {
          addTaskToDOM(task);
          let tasks = JSON.parse(localStorage.getItem('tasks')) || []; // new
          tasks.push(task); // new
          localStorage.setItem('tasks', JSON.stringify(tasks)); // new
          taskInput.value = '';
      }
  };

And then for this to make any difference, let’s also load those tasks when the page loads. The actual function call for this needs to be placed after the addTaskToDOM function, so best just to place it at the very end.

// load tasks from localStorage
const loadTasks = () => {
    const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    tasks.forEach(task => addTaskToDOM(task));
  };

// Load tasks when page loads
  loadTasks();

Alright great, so far this works, but now when we remove items and we reload the page again they come back.

To fix that lets update the the removeTask function

const removeTask = (task, element) => {
      let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
      tasks = tasks.filter(t => t !== task);
      localStorage.setItem('tasks', JSON.stringify(tasks));
      element.remove();
  };

Now removeTask takes an additional parameter, so let’s also fix that when we create the removeBtn

    removeBtn.onclick = () => removeTask(task, li);

And with that we are done! Below you can find the full solution

Full Solution

document.addEventListener('DOMContentLoaded', (event) => {
  const taskInput = document.getElementById('taskInput');
  const addTaskBtn = document.getElementById('addTaskBtn');
  const taskList = document.getElementById('taskList');

  // Load tasks from localStorage
  const loadTasks = () => {
      const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
      tasks.forEach(task => addTaskToDOM(task));
  };

  // Add task to DOM
  const addTaskToDOM = (task) => {
      const li = document.createElement('li');
      li.className = 'task-item';
      li.textContent = task;

      const removeBtn = document.createElement('button');
      removeBtn.textContent = 'Remove';
      removeBtn.onclick = () => removeTask(task, li);

      li.appendChild(removeBtn);
      taskList.appendChild(li);
  };

  // Add task to localStorage
  const addTask = () => {
      const task = taskInput.value.trim();
      if (task) {
          addTaskToDOM(task);
          let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
          tasks.push(task);
          localStorage.setItem('tasks', JSON.stringify(tasks));
          taskInput.value = '';
      }
  };

  // Remove task from localStorage and DOM
  const removeTask = (task, element) => {
      let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
      tasks = tasks.filter(t => t !== task);
      localStorage.setItem('tasks', JSON.stringify(tasks));
      element.remove();
  };

  // Event listener for the add task button
  addTaskBtn.addEventListener('click', addTask);

  // Load tasks when the page loads
  loadTasks();
});

this could of course be improved with styling and other features, but since we are practicing local storage here those don’t really matter.

happy coding everyon!

👋

daily code 77 | js fetch practice

Gregor Schafroth — Sun, 21 Jul 2024 12:33:00 +0000

All JavaScript beginner courses I know ignore this topic, but in the age of APIs and AI this is really important: fetch.

Do you know now to use fetch?

Here is a very simple exercise to practice or brush up your fetch skills:

Exercise: Fetch and Display a Random Joke

Create a basic HTML structure:

Create an index.html file with the following content:

htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch Random Joke</title>
</head>
<body>
    <h1>Random Joke</h1>
    <button id="fetch-joke-button">Get a Joke</button>
    <p id="joke-display"></p>

    <script src="script.js"></script>
</body>
</html>

Create a JavaScript file to fetch the joke:

the API you can use is https://official-joke-api.appspot.com/random_joke

Can you do it?

You can find the solution from ChatGPT below:

Solution

Create a script.js file with the following content:

javascriptCopy code
document.getElementById('fetch-joke-button').addEventListener('click', fetchJoke);

function fetchJoke() {
    fetch('https://official-joke-api.appspot.com/random_joke')
        .then(response => response.json())
        .then(data => {
            document.getElementById('joke-display').innerText = `${data.setup} - ${data.punchline}`;
        })
        .catch(error => {
            console.error('Error fetching joke:', error);
        });
}

How it works:
- When the "Get a Joke" button is clicked, the fetchJoke function is called.
- This function uses the fetch API to send a GET request to the "Official Joke API" to get a random joke.
- Once the response is received, it is converted to JSON format.
- The joke's setup and punchline are then displayed in the paragraph element with the id joke-display.
- If there is an error during the fetch operation, it is logged to the console.

Steps to Test

Open your index.html file in a web browser.
Click the "Get a Joke" button.
Observe the random joke displayed on the page.

This exercise will help you understand the basics of making HTTP requests using the fetch API and handling the response data in JavaScript.

Hope you enjoyed!

Have a great day, and enjoy the random jokes 😉

Daily Code 76 | Speed Limit

Gregor Schafroth — Wed, 10 Jul 2024 07:08:51 +0000

hi everyone! after a longer break i am back again with a small daily exercise. it’s simple but i think the different solutions are interesting. why don’t you give it a try as well? 😄

task

use javascript to write a function that determines the result of you driving at certain speeds:

speed limit: 120km/h (result: 'ok')
for every 5km/h above speed limit you get 1 point (result: 'x points'
if you get more than 12 points your licence is suspended (result: 'license suspended')

template:

function checkSpeed(speed){
  ...
}

below are different solutions:

my solution

let speed = 130;
console.log(checkSpeed(speed));

function checkSpeed(speed) {
  const speedLimit = 120;
  const kmPerPoint = 5;
  const points = Math.floor((speed - speedLimit) / kmPerPoint)
  if (points <= 0) return 'ok';
  if (points >= 12) return 'License suspended'
  if (points == 1) return '1 point'
  return `${points} points`
}

teacher solution (code with mosh)

checkSpeed(125);

function checkSpeed(speed) {
  const speedLimit = 120;
  const kmPerPoint = 5;

  if (speed < speedLimit + kmPerPoint)
    console.log('Ok');
  else {
    const points = Math.floor((speed - speedLimit) / 5)
    if (points >= 12)
      console.log('License suspended');
    else
      console.log('Points', points)
  }
}

chatgpt solution

function checkSpeeding(speed) {
  const speedLimit = 120;
  const pointsPerExcessKm = 1;
  const pointsThreshold = 12;

  if (speed <= speedLimit) {
      return 'ok';
  } else {
      const excessSpeed = speed - speedLimit;
      const points = Math.floor(excessSpeed / 5) * pointsPerExcessKm;

      if (points > pointsThreshold) {
          return 'license suspended';
      } else {
          return `${points} points`;
      }
  }
}

// Example usage:
console.log(checkSpeeding(130)); // Output: '2 points'
console.log(checkSpeeding(140)); // Output: '4 points'
console.log(checkSpeeding(160)); // Output: 'license suspended'
console.log(checkSpeeding(115)); // Output: 'ok'

conclusion

i am actually surprised that i like my solution better than the ones from mosh and chatgpt. feels much simplere and more straight forward. or am i missing something?

Some thongs when I compare the solutions:

mosh
- instead of console.logging the function output, he just logs directly inside of the function. i don’t particularly like that because it causes him to repeat the console.log statement several times and it causes the function to not return anything.
- i think the if (speed < speedLimit + kmPerPoint) console.log('Ok'); is really unintuitive. to me it’s much more logical to just give the ‘ok’ if points are 0 (hence I do it like that in my solution)
chatgpt
- i really like the ‘example usage’ in the end. looks like there is again a lot of repeated code with all these log statements but still that’s something i also want to do going forward
- chatgpt took an extra step to calculate the excessSpeed, which i just combined all in my points calculation. i think it’s a great approach to always do only one calculation per step to make things clearer, so that’s something i want to do as well going forward.
- surprisingly chatgpt does not give the desired results from 121-124km/h (it should be ‘ok’ since there are no points), but i guess that should have been more clearly specified in the task, since 0 points can also be seen as a valid result in these cases.
it’s a very simple exercise but still some nice learnings from me here. did you try it? how do you feel about these solutions? would love to hear your thoughts :)

Daily Code 75 | 🧮 Measuring Unit Converter

Gregor Schafroth — Wed, 28 Feb 2024 15:00:18 +0000

Alrigh after a bit of a break I’m back at coding!

Still working on the basics.

Today I built a measuring unit converter with HTML, CSS, and JS. It’s a nice little exercise to practice all the three of them.

I can actually build the HTML well and the JS works as well, but I find it difficult to make the CSS look really good. I guess design is really something that one needs to learn about almost as a separate discipline

My Code

Anyways, with that said here is my converter!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Currency Converter</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      text-align: center;
    }

    h1 {
      margin: 0;
      padding: 20px;
    }

    h2 {
      margin: 0;
      padding: 10px;
    }

    p {
      margin: 0;
      padding: 3px;
    }

    .convertion-div {
      background-color: white;
      width: 450px;
      margin: 10px;
      padding: 10px;
      border-radius: 10px;
    }

    #body-container {
      background-color: rgb(181, 236, 252);
      width: 600px;
      border-radius: 10px;
      margin: 20px;
      padding: 50px;
      box-sizing: border-box;
    }

    #convertion-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    #input-container {
      margin-bottom: 50px;
    }
  </style>
</head>

<body>
  <div id="body-container">
    <div id="input-container">
      <h1>Metric/Imperial Unit Conversion</h1>
      <input type="number" id="c-number">
      <button id="c-button">Convert</button>
    </div>
    <div id="convertion-container">
      <div id="length-div" class="convertion-div">
        <h2>Length (Meters/US Feet)</h2>
        <p id="m-to-f">1 meter = 3.281 feet</p>
        <p id="f-to-m">1 feet = 0.305 meter</p>
      </div>
      <div id="volume-div" class="convertion-div">
        <h2>Volume (Liters/US Gallons)</h2>
        <p id="l-to-g">1 liter = 0.264 gallon</p>
        <p id="g-to-l">1 gallon = 3.788 liter</p>
      </div>
      <div id="mass-div" class="convertion-div">
        <h2>Mass (Kilograms/US Pounds)</h2>
        <p id="k-to-p">1 kilogram = 2.204 pound</p>
        <p id="p-to-k">1 pound = 0.454 kilogram</p>
      </div>
    </div>
  </div>
  <script>
    const convertButton = document.getElementById("c-button");
    let factor = 1

    convertButton.addEventListener("click", function () {
      let convertNumber = document.getElementById("c-number").value;
      console.log(convertNumber);
      factor = Number(convertNumber)
      document.getElementById("c-number").value = "";

      document.getElementById("m-to-f").textContent = `${factor} meter = ${(factor * 3.281).toFixed(3)} feet`;
      document.getElementById("f-to-m").textContent = `${factor} feet = ${(factor * 0.305).toFixed(3)} meter`;
      document.getElementById("l-to-g").textContent = `${factor} liter = ${(factor * 0.264).toFixed(3)} gallon`;
      document.getElementById("g-to-l").textContent = `${factor} gallon = ${(factor * 3.788).toFixed(3)} liter`;
      document.getElementById("k-to-p").textContent = `${factor} kilogram = ${(factor * 2.204).toFixed(3)} pound`;
      document.getElementById("p-to-k").textContent = `${factor} pound = ${(factor * 0.454).toFixed(3)} kilogram`;
    });

  </script>

</body>

</html>

Daily Code 74 | 🏀 Basketball Score Board

Gregor Schafroth — Tue, 27 Feb 2024 16:15:16 +0000

Alrigh after a bit of a break I’m back at coding!

Still working on the basics.

Today I did a small exercise where I made a basketball scoreboard with just html, css, and js.

(Please be aware that I don’t actually know how basketball works, so excuse me if the board is wrong. I just followed the instructions haha)

My Code

Below is the code. If you run it anywhere it will work without the need for any additional files. 🙂

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basketball Scoreboard</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Happy+Monkey&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet">
  <style>
    body,
    h1 {
      margin: 0;
      font-family: "Roboto", Arial, Helvetica, sans-serif;
    }

    .score-board {
      display: flex;
    }

    .team-container {
      border-style: solid;
      border-width: 1px;
      border-color: grey;
      border-radius: 10px;
      margin: 10px;
      padding: 10px;
    }

    .home-score,
    .guest-score {
      font-size: 55px;
      margin: 10px;
      text-align: center;
    }

    .reset-button {
      margin: 10px;
    }
  </style>
</head>

<body>

  <div class="score-board">
    <div class="team-container">
      <h1>Home</h1>
      <p class="home-score" id="js-hs">0</p>
      <button id="js-h1">+1</button>
      <button id="js-h2">+2</button>
      <button id="js-h3">+3</button>
    </div>
    <div class="team-container">
      <h1>Guest</h1>
      <p class="guest-score" id="js-gs">0</p>
      <button id="js-g1">+1</button>
      <button id="js-g2">+2</button>
      <button id="js-g3">+3</button>
    </div>
  </div>
  <button class="reset-button" id="js-reset">RESET</button>

  <script>
    let homeScore = 0;
    let guestScore = 0;

    document.getElementById("js-h1").addEventListener("click", homeOne);
    document.getElementById("js-h2").addEventListener("click", homeTwo);
    document.getElementById("js-h3").addEventListener("click", homeThree);
    document.getElementById("js-g1").addEventListener("click", guestOne);
    document.getElementById("js-g2").addEventListener("click", guestTwo);
    document.getElementById("js-g3").addEventListener("click", guestThree);

    function homeOne() {
      homeScore += 1;
      document.getElementById("js-hs").textContent = homeScore;
    }

    function homeTwo() {
      homeScore += 2;
      document.getElementById("js-hs").textContent = homeScore;
    }

    function homeThree() {
      homeScore += 3;
      document.getElementById("js-hs").textContent = homeScore;
    }

    function guestOne() {
      guestScore += 1;
      document.getElementById("js-gs").textContent = guestScore;
    }

    function guestTwo() {
      guestScore += 2;
      document.getElementById("js-gs").textContent = guestScore;
    }

    function guestThree() {
      guestScore += 3;
      document.getElementById("js-gs").textContent = guestScore;
    }

    document.getElementById("js-reset").addEventListener("click", resetScores)

    function resetScores() {
      homeScore = 0;
      guestScore = 0;
      document.getElementById("js-hs").textContent = homeScore;
      document.getElementById("js-gs").textContent = guestScore;
    }

  </script>
</body>

</html>

Have a great day everyone!

Daily Code 73 | 📯 Postman.com

Gregor Schafroth — Mon, 19 Feb 2024 12:16:52 +0000

Ok now after this two-week long detour about HTML and CSS it’s time to get back on track and work on things more directlly related to my AI business again!

Since I’m recently working with APIs (for example VoiceFlow with AirTable) I thought it would be great to learn a tool where I can easily run tests related to that, and it appears to me (or ChatGPT said <kough kough>) that postman.com is the gold standard for this.

I found https://reqres.in/ a very useful resource to practice different API requests

My Learnings

When intereacting with an API, testing a GET request first tends to be easiest, since the only mandatory parameter is the request (url) itself
POST are next in line. Usually the JSON result from the get request can be slightly change and the POST works. If not, just copy paste in ChatGPT and then it should work.
PATCH is the safe way to update existing records, since PUT overrides everything.

And that’s as far as I need to use it. I don’t have a use case for DELETE but that would probably be easy to implement as well.

Anyways, happy API calling everyone 😄

Daily Code 72 | Final Lesson (🟥 HTML & 🟦 CSS Course 14)

Gregor Schafroth — Sat, 17 Feb 2024 08:03:20 +0000

Now finally the last lesson of this course! https://www.youtube.com/watch?v=G3e-cpL7ofc

Today we just learend some miscellaneous leftover things about html and CSS, such as media tags and comments. I put them in the comments below

My Code

With media tags I can adjust how my website looks for different screen sizes. The code below shows 1, 2, 3, or 4 video thumbnails per row depending on the size of the browser window, just like the real YouTube

@media (max-width: 599px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .video-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  .video-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 1200px) {
  .video-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Comments in html work like this

<!-- here goes the comment -->

and in CSS like this

/* here goes the comment */

And that was it! The course was a great way to get an overview about HTML and CSS, which I preferably should already have had before I jumped into JavaScript. Well better late then never 😄

Daily Code 71 | Tooltips (🟥 HTML & 🟦 CSS Course 13)

Gregor Schafroth — Fri, 16 Feb 2024 17:02:16 +0000

It’s HTML & CSS course day 13 and the second-to-last lesson! https://www.youtube.com/watch?v=G3e-cpL7ofc

My Code

I can select specific elements only inside certain other elements (with a class) by using syntax like this selector below. That’s really cool and useful to avoid having to giving every single element its own class!

.sidebar-link img {
  height: 24px;
}

Here is some more interesting CSS that I learned about to make the tooltips. It’s a nice trick to use the opacity to hide and show them. they are actually always there, it’s just that they are hidden unles there is the mouseover over the object.

.search-button,
.voice-search-button,
.upload-icon-conatainer {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.search-button .tooltip,
.voice-search-button .tooltip,
.upload-icon-conatainer .tooltip {
  font-family: Roboto, Arial;
  position: absolute;
  background-color: gray;
  color: white;
  padding: 4px 8px;
  border-radius: 2px;
  font-size: 12px;
  bottom: -30px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
  white-space: nowrap;
}

.search-button:hover .tooltip,
.voice-search-button:hover .tooltip,
.upload-icon-conatainer:hover .tooltip {
  opacity: 1;
}

I realize that these exercises and my takeaways got a bit borin over the last few days, so good that there is only one more left after this. Time to tackle something new the coming days!

Daily Code 70 | Position Absolute and Relative (🟥 HTML & 🟦 CSS Course 12)

Gregor Schafroth — Thu, 15 Feb 2024 10:03:33 +0000

It’s HTML & CSS course day 12! Now about 85% through this course already: https://www.youtube.com/watch?v=G3e-cpL7ofc

In the YouTube demo the Position Absolute allows us to place the small time stamps on the thumbnails and also the notification counter on the notification bell.

My Code

`position: absolute;`

Below an easy example of position: absolute;. The cool thing is it fixes it according to coordinates, but different from position: fixed; it does not make it stick to the browser window. Instead it still scrolls down with the page

<div style="
position: absolute;
background-color: red;
color: white;
left: 100px;
top: 100px;
">absolute</div>

Also interesting to know is that elements that are written below appear above elements written higher up. This is super important to make sure ‘absolute’ elements actually show up and are not covered with other stuff.

Another way to also fix this is z-index: 1;. Something with a higher z-index appears in front of something with a lower z-index.

A common number is z-index: 100;, so many elements can be put inbetween

Also, when placing a position: absolute; inside a position:fixed; element it will appear relative to the latter

position: relative; also leads to the same result when placing a position: absolute; inside. Even tho the relative object itself is not fixed, the absolute one now will be relative to that. (this is not the case with position: static;, the default)

I’m actually again not sharing the YouTube code itself here because you can’t really use it without opening and downloading several files, in which case you would be better off to just directly get it from the YouTube 😊

Have a great day everyone!

Daily Code 69 | CSS Position (🟥 HTML & 🟦 CSS Course 11)

Gregor Schafroth — Wed, 14 Feb 2024 08:52:43 +0000

It’s HTML & CSS course day 11! Now about 80% through this course already: https://www.youtube.com/watch?v=G3e-cpL7ofc

Today we look at CSS position, apparently the last major thing to learn here.

My Code

Below is some practice code fot this. What’s interesting for position: fixed; is that I can use both left: 0; and right: 0; (or any other value) to just stretch the content.

Also interesting to know is that the best way to avoid the header blocking content below is to just add padding-top to the boddy.

<body style="
  padding-top: 50px;
">

  <div style="
    background-color: black;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    ">header</div>
  <div style="
    background-color: lightblue;
    height: 200px;
    width: 200px;
    position: static;
    ">div 1</div>
  <div style="
    background-color: lightpink;
    height: 200px;
    width: 200px;
    ">div 2</div>

The same thing applies to sidebars. So for YouTube that means the CSS might have something like this

body {
  margin: 0;
  padding-top: 80px;
  padding-left: 80px;
}

So that’s it. At this point I’m not posting the whole YouTube code anymore, as it gets too complex for you to follow. If you want that follow the linked course above instead 🙂