CodeBase | Frontend

📂 Вся База по IT в одном месте! IT База — новый канал со всем нужным как айтишникам, так и тем, кто давно хотел вкатиться. Заходите, и вы узнаете: ✅ Сколько сейчас зарабатывает кодер? ✅ Как с нуля вкатиться в IT в 2024? ✅ Какие есть секреты при работе в IT? Вопросов много, все ответы — уже на Базе🧑‍💻

🔥 Event Loop 🔥 ⚡️ Event Loop (Цикл событий) - это важный аспект асинхронного программирования, который позволяет выполнение JavaScript кода в однопоточном режиме, не блокируя другие операции. Event Loop проверяет наличие задач для выполнения и обрабатывает их поочередно. 🟢 JavaScript работает в одном потоке, что означает выполнение одной операции за раз. Однако благодаря Event Loop, JavaScript способен обрабатывать асинхронные задачи, такие как запросы к серверу или обработка событий интерфейса, не блокируя основной поток выполнения. ➡️ Механизм работы Event Loop: 😊 Стек вызовов (Call Stack): Хранит текущее выполнение функций. Функция добавляется в стек при вызове и удаляется после завершения выполнения. 😊 Очередь обратных вызовов (Callback Queue): Когда асинхронная операция завершена, ее обратный вызов помещается в очередь. 😊 Цикл событий (Event Loop): Проверяет стек вызовов на наличие функций для выполнения. Если стек пуст, Event Loop выбирает обратный вызов из очереди и добавляет его в стек для выполнения. 🟢 Это позволяет JavaScript выполнять долгосрочные операции, такие как загрузка данных, не блокируя основной поток выполнения и обеспечивая отзывчивость приложения. ➡️ Пример кода: console.log('Первое сообщение'); setTimeout(() => { console.log('Сообщение из setTimeout'); }, 0); console.log('Второе сообщение'); ➡️ В этом примере, несмотря на нулевую задержку в setTimeout, сообщения будут выведены в порядке: Первое сообщение Второе сообщение Сообщение из setTimeout 🟢 Это происходит потому, что обратный вызов setTimeout помещается в очередь и будет выполнен после завершения текущего кода в стеке вызовов. Event Loop позволяет выполнять асинхронные операции, сохраняя отзывчивость и эффективность веб-приложений. Если понравился пост, обязательно добавь 🔥🔥🔥 CodeBase | Frontend

⚡️ Многостраничный сайт - Веб музыка Тематика: IT, музыка Страницы: многостраничный 🔗 Ссылка CodeBase | Frontend | #figma

👩‍💻 Псевдокласс :has() Выбор элементов на основе их содержимого с использованием псевдокласса :has() открывает возможности изменения стилей элементов в зависимости от наличия определенных дочерних элементов или других условий в их содержимом. 👀 Параметры, которые принимает данный псевдокласс: 🔵 :has(selector) — применяет стили к элементу, если он содержит дочерние элементы, соответствующие селектору. 🔵 :has(:not(selector)) — применяет стили к элементу, если у него нет дочерних элементов, соответствующих селектору. CodeBase | Frontend | #css

⚡️ Анимация ввода - эффект анимации текстового поля для добавления задачи в список, выполненный с использованием CSS и JavaScript. 🔗 Ссылка CodeBase | Frontend | #animate

👩‍💻 Макеты для практики Начинающие фронтендеры всегда ищут дизайны для отработки своих навыков работы. Мы нашли несколько удивительных бесплатных дизайнов пользовательского интерфейса от талантливых и потрясающих дизайнеров из сообщества Figma. ✍️ Подборка: 1. Красивые разделы целевой страницы для стартап-приложения 2. Минималистичный дизайн портфолио 3. Дизайн приложения для доставки еды 4. Лендинг VPN-сервиса 5. Сайт архитекторов

Если было полезно, сохраняй и оставляй реакции 🔥

CodeBase | Frontend | #templates

👋 Добрый вечер, дорогие читатели нашего канала! Спешим сообщить вам о запуске нашего нового канала с полезными инструментами и ресурсами для разработчиков — IToolBox ⚙️ Там мы будем публиковать все, что может пригодится и будет полезным в нашей с вами работе. В общем, кому интересно то, что мы делаем - заходите!

⚡️ BLUEFISH IDE ⚡️ Bluefish — это многофункциональный редактор кода. Обладает рядом полезных функций: 🔵 проверка орфографии с учётом специфики языков программирования 🔵 автодополнение кода 🔵 поддержка сниппетов 🔵 управление проектами 🔵 автоматическое сохранение. 💡 Этот редактор идеально подходит для веб-разработчиков, но не удовлетворит потребности дизайнеров, которым необходим веб-ориентированный или WYSIWYG-редактор. CodeBase | Frontend | #ide

⚡️ React-animations ⚡️ React-animations — это библиотека, основанная на анимациях из animate.css. Она легко осваивается и предлагает большое количество анимаций. React-animations совместима с любыми inline-style библиотеками, которые поддерживают определение ключевых кадров анимации через объекты, такими как Radium, Aphrodite или styled-components. Теперь давайте разберём, как это работает на примере анимации подпрыгивания. ➡️ Для начала необходимо импортировать нужную анимацию из react-animations.

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;

➡️ После создания компонента нужно обернуть любой HTML-код или компонент для применения анимации.

<Bounce><h1>Hello Animation Bounce</h1></Bounce>

➡️ Пример:

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';
import './style.css';

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;

export default class ReactAnimations extends Component {
    render() {
        return (
            <Bounce><h1>Hello Animation Bounce</h1></Bounce>
        );
    }
}

Анимация успешно работает, она проста и легко настраивается. Для использования анимации при прокрутке можно воспользоваться отличным решением — библиотекой react-animate-on-scroll. CodeBase | Frontend | #react

🖥 Меняем title вкладки, если пользователь перешел на другую

// Когда пользователь переключается на другую вкладку
window.addEventListener('blur', () => {
    document.title = 'Вернитесь 😢'
})

// Когда пользователь возвращается на вашу страницу 
window.addEventListener('focus', () => {
    document.title = 't.me/WebTaverna 🙂'
})

⚡️ Друзья! Если хотите больше полезных материалов по HTML, CSS и JavaScript, то не забудьте подписаться на канал WebTaverna 👍 По мимо этого на канале регулярно публикуются готовые решения с для верстки сайтов и смешные IT мемы ➡️ Перейти в канал WebTaverna 👨‍💻

⚡️CAPTCHA генератор ⚡️ Система автоматической генерации случайных CAPTCHA с проверкой корректности введенного кода. Технологии: HTML, CSS, JS 🔗 Ссылка CodeBase | Frontend | #js

🔥 Space Journey - это космическое путешествие, созданное с помощью CSS и JavaScript. 🔗 Ссылка CodeBase | Frontend | #js #animate

⚡️ Свойство mask ⚡️ ➡️ Настройка маски в CSS позволяет установить изображение в качестве маски для элемента с использованием свойства mask. При этом можно указать: ⏺ mask-clip — область распространения маски; ⏺ mask-size — размер маски; ⏺ mask-position — позиционирование маски относительно элемента; ⏺ mask-repeat — повторение маски; ⏺ mask-composite — операцию композиции для маски и других слоев; ⏺ mask-mode — ссылку на маску; ⏺ mask-origin — начало координат маски. CodeBase | Frontend | #css

🔥 Знакомство с CSS-свойством inset 🔥 🔵 Оно является сокращением для знакомых вам свойств top, left, right и bottom. 🔵 Подобно краткому синтаксису для margin или padding, с помощью inset можно задать все смещения элемента одной строкой.

div {
  position: absolute;
  inset: 0;
}

🔵 Использование краткого синтаксиса полезно для сокращения объема CSS-файла и улучшения читаемости кода. 🔵 Однако стоит помнить, что inset — это логическое свойство, которое учитывает направление письма. 🔵 Если на вашем сайте используется язык с направлением текста справа налево (RTL), стороны могут поменяться местами: лево станет право, и наоборот.

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend | #css

⚡️ Создаем свою игру на JavaScript ⚡️ JavaScript — невероятно гибкий язык, особенно с появлением JavaScript ES5 и последующих стандартов, которые значительно расширили его функциональность. 🔵 Конечно, иногда приходится обходить устаревшие решения, но преимущества языка перевешивают — на чистом JavaScript можно создать практически любую программу. 🔵 В этом гайде мы покажем, как написать 2D игру «Змейка». Однако, учтите, что этот гайд не предназначен для изучения JavaScript с нуля, поэтому вам понадобятся базовые знания. 🔵 Также потребуется знание HTML (включая HTML5 canvas) и CSS, хотя основное внимание будет уделено именно JavaScript. 🔗 Ссылка на код CodeBase | Frontend | #pet #js

🔥 Канал для профессионалов в сфере информационной безопасности Security Vision – ваш надежный источник актуальных статей, бесплатных вебинаров, обзоров платформы и свежих новостей из мира ИБ. ➡️ Присоединяйтесь к @svplatform, чтобы всегда быть в курсе новейших событий в информационной безопасности.

⚡️ТОП-4 инструмента для разработки ИИ на JS ⚡️ ➡️ AI.JSX — разработанный Fixie, является динамичным фреймворком для создания разговорных приложений с использованием JavaScript и JSX, оптимизированным для проектов на React. 🔵 Он выделяется среди других инструментов для ИИ благодаря надежной поддержке инжиниринга подсказок и простой интеграции с внешними API. ➡️ TensorFlow.js — адаптация библиотеки TensorFlow от Google для JavaScript, специально созданная для использования в вебе и Node.js, чтобы внедрить возможности машинного обучения в браузеры и серверные приложения. 🔵 Одним из ключевых преимуществ TensorFlow.js является способность запуска моделей МО прямо в браузере. ➡️ Brain.js предлагает простой способ создания нейронных сетей на JavaScript, подходит для браузера и Node.js. 🔵 Основное применение Brain.js — автоматизация процессов, таких как анализ текста, объединение PDF, обработка изображений и другие задачи, связанные с обработкой данных. ➡️ Tabnine — помощник по автозаполнению кода на основе ИИ, улучшающий опыт программирования. 🔵 Он ускоряет разработку и поддерживает целостность кода, предлагая фрагменты кода, завершения функций и блоки кода на основе естественных языковых комментариев.

Если понравился пост, добавь 🔥🔥🔥

CodeBase | Frontend | #js #AI

🖥 Flexbox Froggy - это игра, которая позволит на практике разобраться, как использовать свойства CSS flexbox для выравнивания элементов. Вы можете играть в игру онлайн и смотреть примеры кода для каждого уровня. Годная вещь для новичков, которые хотят разобраться с флексами 🔥 CodeBase | Frontend | #css #ресурсы

⚡️ Обучаться IT дорого? Ты просто не там ищешь информацию. За тебя уже всё нашли. Выбирай направление и обучайся бесплатно: — Frontend / Backend — Мобильная разработка — Десктопная разработка — Тестирование ПО — DevOps-инженер — Разработка нейросетей — ИИ и Машинное обучение — 1С-разработка — Разработка игр — Разработка ботов — Хакинг и безопасность — Админ баз данных — Data Science 🖥 Курсы, статьи, ресурсы, шпаргалки и видео публикуется в канале Free Dev

⚡️ Крутой способ анимировать вашу навигацию на сайте ⚡️ 🟢 Технологии: HTML, CSS, JS 🔗 Ссылка CodeBase | Frontend | #animate #js