JavaScript'er
Закрытый канал
Заявки приймаємо автоматично! Канал з лайфхаками для кожного поважаючого себе веб-розробника Запросити друга, якщо є: https://t.me/+my7itn9CGMplOTAy Зв'язок: @Ekater1na_admin
Больше6 879
Подписчики
-524 часа
-377 дней
-11930 дней
Архив постов
6 879
🔜github-spray - Малюйте на графіку коммітів GitHub
Це інтерфейс командного рядка для створення малюнків для вашого графіка історії GitHub
На відміну від Gitfiti, він може автоматично малювати цілі слова та навіть підтримує різні шрифти та символи
Мови: JavaScript (100%).
https://github.com/Annihil/github-spray
JavaScript'ер
6 879
⌛Boardgame.io - це двигун для створення покрокових ігор з використанням JavaScript.
Функціонал:
• Управління станами
• Розрахована на багато користувачів гра
• AI: Створені боти, які можуть грати у вашу гру.
• Налаштування фаз гри: з різними правилами гри та порядком ходу.
• Лобі: підбір ігор, гравців.
• Прототипування: Інтерфейс для імітації ходів ще до процесу рендерингу гри.
• Система плагінів, що дозволяє створювати нові абстракції.
Мови: TypeScript (90.1%), Svelte (4.5%), JavaScript (3.3%), Python (1.6%), …
https://github.com/boardgameio/boardgame.io
JavaScript'ер
6 879
📎Рушій для гри від першої особи в 265 рядках Javascript
Сьогодні поринемо у світ, який можна доторкнутися. У цій статті ми досліджуємо, як з нуля, швидко і без особливо складної математики написати двигун для гри від першої особи. Для цього ми скористаємося прийомом під назвою "кидання променів" (raycasting)
Читати далі: стаття
Ось демка : https://demos.playfuljs.com/raycaster/
JavaScript'ер
6 879
🎮Властивість initial-letter
Воно приймає два значення, розділених пробілом:
p:first-letter {
initial-letter: 3.5 3;
}
Перший аргумент визначає розмір початкової літери залежно від цього, скільки рядків вона займає. Негативні значення не допускаються.
Другий визначає кількість рядків, на які має потонути початкова літера, якщо задано її розмір. Значення повинні бути більшими за нуль. Якщо цей параметр опущений, він дублює значення розміру, округляючи його до найближчого цілого позитивного числа.
🔗Корисні посилання:
• Спробувати самому
• Підтримка 89.24%
JavaScript'ер6 879
🥸Питання із співбесіди
У чому різниця між innerText, innerHTML та value у JavaScript?
Відповідь:
innerText виводить тільки текст без HTML-форматування, ідентичний тому, якби ви дивилися на сторінку
innerHTML дозволяє маніпулювати HTML-структурою елементів, включаючи теги та стилі
value застосовується для роботи зі значеннями інтерактивних елементів, таких як input, textarea або select
// Працюємо з текстом, ігноруючи HTML-теги
document.querySelector('#elem').innerText = 'Текст';
// Вставляємо HTML-код, змінюючи структуру сторінки
document.querySelector('#elem').innerHTML = '<span>HTML</span>';
// Задаємо значення для елементів форм, таких як input чи select
document.querySelector('#input').value = 'Дані';
JavaScript'ер6 879
🔍Копіювання тексту в буфер обміну
Clipboard API дозволяє зчитувати та записувати дані в буфер обміну.
document.querySelector('.copy').addEventListener('click', () => {
const txt = document.querySelector('.content').value;
navigator.clipboard.writeText(txt);
});
writeText() — це метод об'єкта Clipboard, призначений для копіювання текстових даних у буфер обміну. Метод повертає Promise, який успішно завершується у випадку, якщо текст скопійований, і видає помилку, якщо операція не вдалася.
JavaScript'ер6 879
🖥VR Landing Page
Реалізовано на HTML та стилізовано за допомогою Tailwind.
Посилання на Codepen *ТИЦЬ
JavaScript'ер
6 879
⭐️Notifications API в JS
Використовується для налаштування та відображення повідомлень на робочий стіл користувача
Оскільки API повідомлень легко зловживати, він суворо застосовує дві функції безпеки:
— По-перше, користувачі повинні явно погодитись отримувати повідомлення для кожного джерела
— По-друге, надсилати повідомлення може лише код, що працює у безпечному контексті (HTTPS)
JavaScript'ер
6 879
✨Responsive Blog Card Slider
Верстка реалізована на HTML та SCSS, а функціонал слайдера за допомогою бібліотеки Swiper.
Посилання на Codepen *ТИЦЬ
JavaScript'ер
6 879
▶️Як відстежувати свій робочий час?
WakaTime – це плагін відстеження часу для розробників. Він інтегрується в текстові редактори та IDE, а також у браузери, такі як Chrome.
Надає автоматичне відстеження часу, аналітику використання мов програмування та інструменти підвищення продуктивності.
JavaScript'ер
6 879
💎Isometric-contributions – Браузерне розширення для рендерa ізометричної, піксельної версії вашого графіку коммітів GitHub
Крім свого акуратного вигляду, це розширення допомагає підкреслити різницю між кількістю коммітів.
Isometric-contributions не призначений для повної заміни стандартного 2D-графа, тому що в більшості випадків він насправді менш корисний. Наприклад, немає міток осей і більш короткі «стрижні» можуть бути приховані за вищими.
Мови: JavaScript (98.2%), CSS (1.8%).
https://github.com/jasonlong/isometric-contributions
JavaScript'ер
6 879
😮Tiny care terminal – це невелика панель, яка намагається подбати про вас, коли ви використовуєте термінал. Вона розповідає вам про милі речі, що дбають про вас, і намагається не напружувати вас.
Нагадують про необхідність робити перерви, пити воду та дивитися на вулицю, також розповідає химерні історії.
Мови: JavaScript (100%).
https://github.com/notwaldorf/tiny-care-terminal
JavaScript'ер
6 879
Підписуйтесь, бо ці аішки розвиваються настільки швидко, що вже глобально змінюють відносини між комп'ютером та людиною.
🤪 Поки вони не повстали треба вже кумекати як і де їх краще використовувати.
@Синтетика
6 879
Прогресивна спільнота що проведе вас у світ, нейронного та інноваційного.
Це той самий канал з ідеальним балансом корисно/мемного нейромережевого контенту, який ви так довго шукали. «Синтетика» це":
👾 Ключові новини AI приправлені гумором та особистим досвідом.
👾 Покрокові гайди та хаки по використанню найефекнивніших нейронок.
👾 Покажемо як створити власного Джарвіса під ваші задачі.
👾 Унікальні AI інструменти з безкоштовним доступом для програмістів та дизайнерів.
Отримуй доступ до авторської добірки безкоштовних нейронок що заберуть в тебе всю рутину та швидко апгрейднуть від джуна до Senior. 😎
Приєднуйся до Синтетики та не проґав Ші революцію!
6 879
👑Фільтри до фрагментів елемента
Завдяки властивості backdrop-filter у CSS, ви можете застосувати фільтри до елемента, що знаходиться за ним, створюючи унікальні та привабливі візуальні ефекти.
Може приймати такі значення:
• none — фільтри не використовуються (за замовчуванням)
• blur (px) - розмиває елемент
• brightness (%) – змінює яскравість
• contrast (%) – змінює контрастність
• grayscale (%) — перетворює елемент у відтінки сірого
• hue-rotate (градус) – обертає кольорове коло елемента
• invert (%) – інвертує кольори
• opacity (percentage) — змінює прозорість
• saturate (%) — змінює насиченість кольорів
• sepia (%) – застосовує сепійний фільтр до елемента
JavaScript'ер
