Frontend & Web Dev, Marketing, SEO, GEO | HI Web

Free Figma Template: Auto auction participating 🧠 Difficulty: 🥕🥕🥕 #Figma #Template

Free Figma Template: Auto auction participating 🧠 Difficulty: 🥕🥕 #Figma #Template

🔧 Pseudo-class ::selection This subclass allows you to apply a style to a selected element. You can set both the color of the selection and the color of the text when it is selected. Accepted properties: • color — The color of the selected text. • background-color — The background color of the selected text. • cursor — The cursor displayed during text selection. • caret-color — The color of the caret (blinking vertical line) when editing text. • outline — The outline displayed around the selected text. • text-decoration — Text decoration (e.g., underline, strikethrough). • text-emphasis-color — The color of emphasis marks (e.g., dots, circles). • text-shadow — The shadow of the text.

🔊 Voice Recognition in JS The Web Speech API allows interaction with voice interfaces in your web applications. It consists of two parts: SpeechSynthesis (Text-to-Speech) and SpeechRecognition (Asynchronous Speech Recognition).

<h2>Voice Recognition</h2>
<p id="transcription"></p>
<button id="startRecognitionButton">Record</button>

const startRecognitionButton = document.getElementById("startRecognitionButton");
const transcription = document.getElementById("transcription");
startRecognitionButton.addEventListener("click", function () {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = "en-US";
  recognition.onresult = function (event) {
   const transcript = event.results[0][0].transcript;
    transcription.textContent = transcript;};
  recognition.onerror = function (event) {
    console.error("Error:", event.error);};
  recognition.start();});

🔧 CSS TIP Typing effect

<div class="wrapper">
  <div class="typing-demo">CSS Tips for you!</div>
</div>

.typing-demo {
    width: 17ch; /* Adjust based on the length of your text /
    animation: typing 12s steps(17) infinite, blink 0.5s step-end infinite alternate;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid;
    font-family: monospace;
    font-size: 2rem;
}

/ Typing and erasing animation /
@keyframes typing {
    0% { width: 0; }
    35% { width: 17ch; } / 4s for typing (1/3 of 12s) /
    70% { width: 17ch; } / 5s pause (adding up to 8.4s) /
    100% { width: 0; } / 3.6s for erasing (remaining time) /
}

/ Blinking cursor animation */
@keyframes blink {
    50% { border-color: transparent; }
}

Free Figma Template: Healthy food 🧠 Difficulty: 🥕🥕 #Figma #Template

Free Figma Template: Business forum 🧠 Difficulty: 🥕🥕🥕 #Figma #Template

👨‍🎨 CSS TIP shape-outside property in action

.column--left .shape {
  float: right;
  shape-outside: circle(100px at 100% 50%);
}

Free Figma Template: Restaurant 🧠 Difficulty: 🥕🥕 #Figma #Template

🔧 CSS TIP Use trigonometric functions in CSS to create a smooth stepped transition delay:

.character {
  transition-delay:
    calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}

🔧 Creating color palettes with the CSS color-mix() function The color-mix() function allows us to specify the two colors we want to mix and then outputs the result. We can control the amount of each color in the mix, as well as the color interpolation space, which determines how the colors blend together. We specify the amount of each color as percentages. If we omit the percentages of both colors, color-mix() will use 50% for each by default. As shown below, mixing red and blue in equal parts gives us a purple hue as expected.

.result {
  background-color: color-mix(in srgb, blue, red);
}

Free Figma Template: Food delivery 🧠 Difficulty: 🥕🥕 #Figma #Template

🔧 TOAST UI Calendar is a JavaScript calendar that has everything you need. Here are some features: ⏩ Supports various schedule views: daily, weekly, monthly ⏩ Allows customization of the date UI and schedule information ⏩ Drag & Drop: you can drag elements with the mouse ⏩ Customizable UI themes TOAST UI Calendar is an excellent component for your web application.

🧐 Interview Question: What is the difference between Observable and Promise in JavaScript? Answer: Observable and Promise are two ways to handle asynchronous operations in JS. • A Promise can either resolve successfully or with an error, but it executes only once. • On the other hand, an Observable represents a stream of data that can be accessed at any time; it can emit multiple values over time during its execution and can be stopped at any point.