Project Management Dashboard UI

Пользовательский интерфейс панели управления проектами, реализован на CSS и JS.

#анимация #css #js

https://codepen.io/aybukeceylan/pen/OJRNbZp

@javascriptv

Textarea auto-expand

Автоматическое расширение текстовой области. Реализовано с помощью JavaScript и CSS.

#анимация #css #js

https://codepen.io/vsync/pen/nrKwbm

@javascriptv

Volume button knob 

Кнопка увеличения/уменьшения громкости, написанная на CSS(SCSS), JavaScript(TypeScript)

#button #js #typescript

https://codepen.io/rodzyk/pen/mdxvQby

@javascriptv

JavaScript: визуализация Event Loop

Одной из ключевых особенностей JavaScript является способность обрабатывать асинхронные операции с использованием цикла событий. По сути, цикл событий — это то, что позволяет JavaScript обрабатывать несколько задач одновременно, не дожидаясь завершения одной задачи, прежде чем переходить к следующей.

В этой статье с помощью визуализации рассматривается, как работает Event Loop:

https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

#js

Инструменты фронтенд-разработчика — ESLint

ESLint — это популярный JavaScript-линтер с открытым исходным кодом, который используется для анализа кода и выявления в нём ошибок.

Также ESLint предоставляет разработчикам набор правил, которые могут быть настроены в соответствии с конкретными потребностями проекта или команды. По сути, благодаря этому инструменту намного проще поддерживать стилистику кода и избегать базовых ошибок:

https://eslint.org/

#js

@javascriptv

​Руководство по Solid JS

Solid JS — это реактивная JavaScript-библиотека для создания пользовательских интерфейсов. Она однократно компилирует шаблоны, а при изменении состояния приложения выполняется только тот код, который необходим для визуализации этого изменения.

Видео-руководство по Solid JS на примерах знакомит со всеми аспектами использования этой библиотеки:

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gU_GvFygZFu0aBysPilkbB

#js

Section design with hover effect

Адаптивные карточки с красивым анимированным фоном при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/uiswarup/pen/BaaexdO

#js #анимация #css #javascript

@javascriptv

Carousel with drag and wheel

Карусель с перетаскиванием и прокруткой колеса. Реализована с помощью CSS и JS

#css #js #анимация #carousel

https://codepen.io/supah/pen/xxJMbbg

@javascriptv

Топ вопросы на собеседовании по JavaScript

1. Способы наследования
2. Типы данных
3. Ключевое слово this.
4. Методы call, apply, bind.
5. Замыкание (closure)
6. Область видимости (scope)
7. Каррирование (currying).
8. Параметры функции в ES6
9. Модификаторы var, let, const B
10. Коллекции Array, Map, Set Blog

#video #js

https://www.youtube.com/watch?v=0e9eyrxB-LU&list=PLwHvxJae2LazDrHm6ayqLKz6jszEn7ArQ&ab_channel=ProgBlog

📌Binoculars — красивая имитация бинокля. Реализована на CSS и JavaScript.

#js #анимация #css

https://codepen.io/DeyJordan/pen/MWZwRMm

@javascriptv

🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
— Удобные формы для Vue 3
— Глубокий JS. В память о типах и данных
— React + Three.js. Создаём собственный 3D шутер. Часть 2
— Лучшие ресурсы чтобы выучить Git и Github
— Поиск удобных мест для жизни в Москве на GitHub Pages с помощью DuckDB в браузере
— Добавление WebAuthn в веб-приложение
— Уроки рисования красных квадратов
— Интерактивный парсер web страниц
— Webpack vs esbuild — уже можно использовать в production?
— Latest Newsletter: Surrounded by Bears (Issue #141)
— Enhancing UX: Leveraging Nextjs Router Events for Form Manipulation
— 10 Essential React Hooks You Should Know
— "Finanz Faible: Expert Finanzberater für umfassenden finanziellen Rat"
— Configuring Jest for Typescript Unit Tests
— "Pro Digital Era: Leading Advertising & Digital Marketing in Lahore, Pakistan"
— Gpen Demystified: Expert Insights from Dumpsarena
— 1. Explore basic types of typescript
— Phanatik — Multipage blog theme
— Optimizing JavaScript with Memoization: A Deep Dive into Boosting Performance:

Посмотреть:
🌐 How Is This Code Safe? (⏱ 06:31)
🌐 NEW TypeScript Simplified Course - 24 Hour Sale (⏱ 07:18)
🌐 I Can’t Believe Chrome Hides This From You (⏱ 01:00)

Хорошего дня!

#digest #js

@javascriptv

⚡Уроки по JavaScript

1. DOM, События, Анимация, Библиотеки
2. Введение в JavaScript, Консоль разработчика
3. Строковый и логический тип данных
4. Шаблонные строки, Случайные числа, Округление чисел
5. Массивы на JavaScript
6. Объекты на JavaScript
7. Диалоговые окна, Условия if и switch
8. Циклы на JavaScript
9. Функции на JavaScript и решение задач
10. Дата и время на языке JavaScript

#video #js

https://www.youtube.com/watch?v=HU78HrKW9XI&list=PLuY6eeDuleINoCQtGZsMoVVCSgEH7gKQ5

@javascriptv

Kippo Hover Card Effect

Эффект раскрытия карточек при наведении, реализованный с помощью CSS и JavaScript.

#css #js

https://codepen.io/Hyperplexed/pen/zYWdYoo

@javascriptv

🧭 Анимированный компас вышел из строя и не может найти, где находится страница.

#анимация #страница404 #js

https://codepen.io/AustinBan/pen/yJJVEm

@javascriptv

👌🏻🤞🏼Классная библиотека JS, о которой возможно ты никогда не слышал

Hammer.js — это библиотека для распознавания жестов 🤲🏻 на сенсорных устройствах. Чтобы добавить её в проект, можно использовать NPM:

npm install --save hammerjs

Yarn:

yarn add hammerjs

, или подключить напрямую через CDN. Она позволяет легко реагировать на такие жесты, как тапы, двойные тапы, удержания и свайпы, делая интерфейс более дружелюбным и интерактивным.

Hammer.js предлагает удобные инструменты для работы с жестами, что особенно актуально для мобильных приложений и сайтов.

📍Github
📍Docs

#js #javascript #nodejs #css #html

@javascriptv

🚴‍♀️ Оригинальный прелоадер с велосипедом для вашей страницы.

Примеры применения:
▪ загрузка страницы товаров для спорта и активного отдыха;
▪ загрузка сайта для записи для участия в спортивных мероприятиях.

#js #прелоадер #ожидание #загрузка

https://codepen.io/peteszym/details/YPKmeo

@javascriptv