Free Figma Template

#Figma #Template

SVG Animation [Neon]

#Animation #SVG

Free Figma Template: Cloud Storage

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

Aurora text animation

📒 𝗙𝗿𝗲𝗲 𝗯𝗼𝗼𝗸: 𝗘𝗹𝗼𝗾𝘂𝗲𝗻𝘁 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

This is the best book about JavaScript, programming, and the wonders of the digital

Written by Marijn Haverbeke.

language: EN, ES, AR, RU, BUL, POR

#FreeBook

💻 A password generator with customizable length.

This example creates a simple password generator that, upon pressing the button, generates a random password with the specified length from the upper form, using characters from the specified charset.

<div class="password-generator">
<input type="text" id="passwordLength" placeholder="Password length">
<input type="text" id="password" readonly>
<button onclick="generatePassword()">Generate</button></div>

function generatePassword() {
    const length = parseInt(document.getElementById("passwordLength").value);
    const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
    const charsetLength = charset.length;
    let password = [];
    
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * charsetLength);
        password.push(charset[randomIndex]);
    }
    
    document.getElementById("password").value = password.join('');
}

Free Figma Template: Game site

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

🧐 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.

🔧 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.

Free Figma Template: Food delivery

🧠 Difficulty: 🥕🥕

#Figma #Template

🔧 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);
}

🔧 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);
}

Free Figma Template: Restaurant

🧠 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: Business forum

🧠 Difficulty: 🥕🥕🥕

#Figma #Template