Мяукающее пианино

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

По ссылке вы сможете поиграть на пианино, а так же подробно изучить код и на его примере создать что-нибудь своё:

https://codepen.io/laurenvast/pen/jOrWXej

#codepen

​Подробный разбор вопросов с собеседований на должность фронтенд-разработчика

Нашли для вас серию видеороликов, которые помогут вам освежить знания или закрыть пробелы. Видеокаст представляет из себя коллекцию технических вопросов, которые можно получить на интервью.

Удобная, хорошо организованная шпаргалка всегда у вас под рукой. Сохраняйте, чтобы не потерять.

Ссылка: https://tprg.ru/Mbsq

#видео #фронтенд

Не нужно учить Svelte, потому что... угадайте что?

Вы уже знаете его! Это всё JavaScript, только в более крутом исполнении. По крайней мере, так считает автор статьи.

🔍Что такое Svelte?

• UI-фреймворк: быстрый, простой и довольно популярный.
• Встроенный компилятор, преобразующий .svelte-файлы в чистый JavaScript-код. Итоговый результат работы фреймворка представляет собой код без намека на этот самый фреймворк, перекладывая всю тяжелую работу на этап сборки приложения.
• Лаконичный: только HTML, CSS и JS.
• Полный: встроенное управление состоянием и стили, ограниченные компонентами.

🤖Svelte vs React

• Эффекты/Реактивность: Svelte автоматически отслеживает зависимости.
• Управление состоянием: Svelte предлагает простое решение "pub-sub".
• Жизненный цикл: в отличие от React, Svelte предоставляет более явные методы для управления жизненным циклом компонентов.

🎨Примеры: в то время как в React вам нужны обертки, Svelte позволяет вам напрямую работать с библиотеками, такими как Chart.js.

🚀Начало работы с Svelte

• Основы: обязательно начните с документации.
• Создайте проект: попробуйте создать свой собственный проект на Svelte — идеи для проектов также есть в статье.

🌟Заключение

Svelte — это свежий взгляд на веб-разработку, который позволяет вам сосредоточиться на создании приложения, а не на изучении сложных особенностей фреймворка.

🔗Читать статью

Choose Ticket — адаптивная страница с функцией выбора билетов на чистом CSS.

https://codepen.io/ig_design/pen/Bajogxq

@about_javascript

🔥Ищите вдохновение для дизайна футера? Тогда ловите ресурс с множеством идей, на котором можно фильтроваться по стилю и типу.

3D glass weather icons - Анимированные иконки погоды, выполненные с помощью SVG и SCSS, без использования JavaScript

https://codepen.io/onediv/pen/MWQKgmv

@about_javascript

GSAP Flip Cart - Анимация добавления в корзину, выполненная с помощью Pug, CSS и библиотеки GSAP.js

https://codepen.io/hexagoncircle/pen/RwLQLop

@about_javascript

Заказчик: Нужно на нашем сайте сделать кнопки зеркальными, чтобы пользователь заходил и видел своё отражение.

Я: Ни слова больше

CodePen-проект: https://codepen.io/tyeb_11/pen/dygoJow

#js

@about_javascript

Animista — гигантская библиотека CSS-анимаций

Платформа позволяет играть с коллекцией готовых CSS-анимаций и скачивать только те, которые вы собираетесь использовать

Отличный вариант для веб-дизайнеров и разработчиков, которые хотят добавить динамичность и интерактивность в свои проекты

Стоимость: #бесплатно

#CSS #web

​​Гигантскую библиотеку CSS-анимаций заказывали?

Animista позволяет играть с коллекцией готовых CSS-анимаций и скачивать только те, которые вы собираетесь использовать. Отличный вариант для веб-дизайнеров и разработчиков, которые хотят добавить динамичность и интерактивность в свои проекты.

Берите на заметку.

#css #инструменты

"use client" обозначает границу между серверным и клиентским кодом в дереве зависимостей модуля.

Каждый компонент, импортированный в файл с "use client", автоматически становится клиентским компонентом.

Мы по-прежнему можем передавать серверные компоненты в качестве реквизитов клиентским компонентам.

@about_javascript

You Must Build a Lighthouse

Игра на HTML и SCSS. Каждый квадрат, в котором можно построить часть дома, - радиокнопка, при активации которой задействуются CSS стили.

#html #css

https://codepen.io/ivorjetski/pen/OJXbvdL

💡 Совет по CSS

Легко анимируйте иконку с помощью этого маленького трюка

@about_javascript

🧰 Pico CSS — минималистичный легковесный CSS-фреймворк для семантического HTML, который отлично подойдет бэкендеру, ведь с ним вообще не надо заморачиваться:

☑️ Pico напрямую стилизует HTML-теги, используя менее 10 классов. Также предлагается версия без классов для поклонников чистого HTML.
☑️ Работает без зависимостей, менеджеров пакетов, внешних файлов или JavaScript, обеспечивая элегантные и простые стили с чистой HTML-разметкой.
☑️ Pico автоматически масштабирует размеры шрифтов и отступы в зависимости от ширины экрана, обеспечивая консистентный и элегантный вид на всех устройствах.
☑️ Включает две доступные, нейтральные цветовые схемы: светлую и тёмную. Автоматически адаптируется к предпочтениям пользователя о цветовой схеме без использования JavaScript.
☑️ Можно настроить Pico с помощью более чем 130 CSS-переменных или использовать SASS. Переключайтесь между 20 ручными цветовыми темами и компонуйте с 30+ модульными компонентами.
☑️ В отличие от громоздких и перегруженных фреймворков, Pico поддерживает легкость HTML, уменьшает использование памяти, избегая чрезмерной специфичности CSS, и сокращает количество загружаемых файлов.

👉 GitHub

💡 Проблема: Вы хотите скопировать массив JavaScript, но использовать другое значение для одного индекса.

Решение: Array .with

Массив.with копирует массив вместо того, чтобы изменять его, и позволяет указать другое значение для определенного индекса.

@about_javascript

🔥Подборка лучших обучающих каналов для программистов.

➡️ Делитесь с коллегами и сохраняйте себе, чтобы не потерять

⚡Машинное обучение

Machine Learning - запускаем лучшие ИИ модели, пишем код, погружаемся в нейросети
Ml Собеседование - подготовка к собесу по мл, алгоритмам, коду
Ml ru - актуальные статьи, новости, код и обучающие материалы
Ml Jobs - вакансии ML
ML Книги - актуальные бесплатные книги МО
ML чат

🏆 Golang
Golang - изучи один из самых перспективных языков на ит-рынке
Golang собеседование - разбор задач и вопросов с собесов
Golang вакансии -работа для Go разработчика
Golang книги библиотека книг
Golang задачи и тесты
Golang чат
Golang news - новости из мира go
Golang дайджест

💥 Linux /Этичный хакинг
Linux Academy - гайды, секреты и лучшие материалы по Linux
Kali linux - погрузись в мир этичного хакинга и кибербезопасности
linux_kal - kali чат
Информационная безопасность

🚀 Data Science

Анализ данных - полезные фишки, код, гайды и советы, маст-хэв датасаентиста
Data Jobs - ds вакансии
Аналитик данных
Data Science книги - актуальные бесплатные книги
Big data

🛢Базы данных
Sql базы данных - научим работе с базами данных профессионально
Библиотека баз данных
SQL чат
Вакансии Sql аналитик данных

#️⃣C#

С# академия - лучший канал по c#
С# заметки — код, лучшие практики, заметки программиста c#
С# задачи и тесты
С# библиотека - актуальные бесплатные книги
C# вакансии - работа

🐍 Python

Python/django - самый крупный обучающий канал по Python
Python Собеседование - подготовка к собеседовению python и разбор алгоритмов
Pro python - статьи, новости, код и обучающие материалы
Python Jobs - вакансии Python
Python чат
Python книги

☕ Java

Java академия - java от Senior разработчика
Java вакансии
Java чат
Java вопросы с собеседований
Java книги

💻 C++

C++ академия
С++ книги
C++ задачи - подготовка к собеседовению мл, алгоритмам
C++ вакансии

⚡️ Frontend
Javascript академия - крупнейший js канал
React - лучшие гайды и советы по работе с react
Frontend - тутрориалы, уроки, гайды, код
PHP
Книги frontend
Задачи frontend

🦀 Rust
Rust программирование
Rust чат
Rust книги для программистов

📲 Мобильная разработка
Android разработка
Мобильный разработчик гайды и уроки

🇬🇧 Английский для программистов

🧠 Искусственный интеллект
ИИ и технологии
Neural - нейросети для работы и жизни
Книги ИИ
Artificial Intelligence

🔥 DevOPs
Devops для программистов
Книги Devops

🌟 Docker/Kubernets
Docker
Kubernets

📓 Книги
Библиотеки Книг для программситов

💼 Папка с вакансиями:
Папка Go разработчика:
Папка Python разработчика:
Папка Data Science
Папка Java разработчика
Папка C#
Папка Frontend