JavaScript'er

➡️Background Animation Цікавий градієнтний перехід між різними кольорами як тло. Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'ер

👩‍💻Шпаргалка по JavaScript JavaScript'ер

У вас немає комерційного досвіду? А роботу програміста без нього знайти дуже складно😉 У нас в FoxmindEd🦊 є рішення - курс Навчання на проєкті👍 Навчання проходить як на справжній роботі: спринти, статус мітинги з командою і code review. У результаті ви зможете записати комерційний досвід у резюме, що підвищить ваші шанси швидше знайти роботу👍 🔸Проєкт 1: Java + Angular or React 🔸Проєкт 2: Java + Angular or React 🔸Проєкт 3: C#/.NET 🔸Проєкт 4: Python + React 🔸Проєкт 5: Unity 🔸Проєкт 6: JuniorSpace (Python + React) 🔸Проєкт 7: Java + Angular or React FoxmindEd виповнюється 8 років! 🥳 Запрошуємо вас відсвяткувати разом із нами! 🎉 З 8 по 22 липня 2024 року ми запускаємо знижки -20% на всі курси менторингу та навчання на проєкті. Реєструйтесь 👉 https://go.foxminded.ua/4cDZQHH

🎮Новий синтаксис transform Іноді під час роботи з анімацією ключових кадрів. Якщо елемент вже має 3 трансформації, і ви хочете змінити тільки масштаб під час анімації, вам доведеться повторити всі три функції трансформації заново. Але за допомогою цього синтаксису ви можете задавати функції трансформації окремо. Властивість transform не є застарілим. Воно, як і раніше, має своє застосування. Наприклад, коли ви хочете задати кілька перетворень у певному порядку - translate -> rotate -> translate -> rotate. JavaScript'ер

😅Коли бекендер не дуже добре зрозумів суть своєї роботи JavaScript'ер

📌Гайд як верстати похилі блоки на css За допомогою clip-path можна задавати видиму область елемента. Все, що виходить за її межі, ховається. JavaScript'ер

😮Expanding Contact Form Форма для зв'язку, що розгортається при натисканні на кнопку. Реалізовано за допомогою SCSS та JS. ⤷ Забрати код

🥸Питання із співбесіди Як використовувати модулі JavaScript? Відповідь: 1. Експортування модулів: Дозволяє виконувати функції, об'єкти або змінні доступними для інших файлів. Використовується export для експорту кількох елементів із модуля.

 // utils.js
export function add(a, b) {
return a + b;
}
export const pi = 3.14159;

2. Імпортування модулів: Дозволяє використовувати раніше експортовані елементи. Використовується для імпорту окремих елементів з модуля.

 // main.js
import { add, pi } from './utils.js';
console.log(add(2, 3)); // 5
console.log(`Value of pi: ${pi}`); // Value of pi: 3.14159

3. Експорт за замовчуванням: Використовується для експорту одного основного елемента з модуля. Це може бути функція, клас чи об'єкт. Використовується export default для цього.

 // math.js
export default function multiply(a, b) {
return a*b;
}

4. Імпорт за замовчуванням: Здійснюється без фігурних дужок. Можна дати елементу, що імпортується, будь-яке ім'я.

 // main.js
import multiply від './math.js';
console.log(multiply(2, 3)); // 6

5. Динамічний імпорт: Дозволяє завантажувати модулі асинхронно, що корисно для завантаження модулів на вимогу. Використовується import() для динамічного імпорту.

 // main.js
async function loadModule() {
const { add } = await import('./utils.js');
console.log(add(5, 10)); // 15
}
loadModule();

6. Імпорт всього вмісту модуля: Іноді потрібно імпортувати вміст модуля під одним ім'ям. Використовується import*as для цього.

 // main.js
import * as Utils from './utils.js';
console.log(Utils.add(2, 3)); // 5
console.log(`Value of pi: ${Utils.pi}`); // Value of pi: 3.14159

JavaScript'ер

😐Коли випадково набрехав у резюме, але тебе все одно взяли на роботу </Codu>

function boo(boolean1, boolean2) {
  let sum = boolean1 + boolean2;
  console.log(sum);
}
boo(true, true);

JavaScript'ер

🔥Preloader Залипаюча анімація завантаження сторінки. Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'ер

⚙️Останні 2 фільтри для картинок Ми з вами вже розглянули 11 атрибутів якості filter в css. Ці 2 - останні в цій рубриці, у наступному пості все об'єдную однією шпаргалкою). • Сепія — ефект, що досягається під час використання відтінків коричневого кольору. Атрибут sepia() перетворює вхідне зображення на сепію. Приймає значення від 0% (залишає вхідні дані незмінними) до 100% (повністю відповідає сепії). • Атрибут drop-shadow() використовується не тільки як filter. Створює ефект тіні до вхідного зображення. У прикладі ми використовуємо перше число 20px для зміщення тіні по осі X. Друге число 20px для зміщення тіні по осі Y. 12px — радіус розмиття, і останні це колір тіні. JavaScript'ер

Народ, рідко кидаю сюди якісь пропозиції, але схоже настав час) Думаю багато хто бачив ці всі "тапалки" в телеграм, так от шукаю розробників, які роблять веб апки в тг(саме фронтенд) Є ідея, схема виходу на ринок і тому подібне. Шукаю людей, які готові працювати за щедрий та справедливий відсоток. Для деталей пишіть мені: @toy_sam або ставте + в чатику Плюсом - даю доступ до свого курсу, автором якого я є

🛡Розділові лінії між option Тепер можна додавати елементи <hr> між елементами <option> всередині <select> для створення візуального поділу. Ця функція доступна в останніх версіях всіх основних браузерів, але може не працювати у старих. Якщо вам потрібне певне угруповання з іменами груп, використовуйте <optgroup>.

Перестань платити повну вартість за сервіси! 😳 WhiteTools це сервіс, що дозволяє купувати такі підписки як ChatGPT, Midjourney, Leonardo AI, Canva, FreePik та інші зі знижкою до -95% Дуже корисний інструмент для того, щоб економити власні кошти. Ціни дуже низькі, тому не втрачайте корисний інструмент та економте. Переглянути повний список сервісів та ціни: https://t.me/+GtvzdeauP3U4MmRi

👩‍💻Порада по CSS Користувальницький Range Slider зі спливаючою підказкою. Підказка буде змінювати свою форму, щоб залишатися в межах повзунка. Навіть радіус змінюватиметься, коли підказка наближатиметься до кутів. https://codepen.io/t_afif/pen/vYweZQa JavaScript'ер

👑cssfx — колекція красивих простих CSS-ефектів з можливістю копіювання, створена з упором на плавність, простоту та зручність використання. 🔗Посилання: https://cssfx.netlify.app/ JavaScript'ер

⭐️Social Card Hover Розсувний ефект для соцмережі з появою короткої інформації. Реалізовано за допомогою CSS. ⤷ Забрати код JavaScript'ер