Найти в Дзене
Статьи
ТЕЛЕГРАМ КАНАЛ: t.me/...g1d Nuxt 3 - это фреймворк для создания умных веб-приложений на Vue 3, добавляет кучу новых возможностей, чтобы сделать твою жизнь задрота программиста проще Разница между Nuxt 3 и Vue 3 заключается в том, что Nuxt 3 - это полная обвязка вокруг Vue 3, которая облегчает создание универсальных приложений. Он добавляет еще больше магии в Vue 3, чтобы разработка была более непринужденной (Куда легче то?). Он прекрасно подходит для создания сложных и мощных веб-приложений, благодаря своей универсальности и способности работать на сервере и браузере. Он также поддерживает создание статических сайтов, что позволяет тебе масштабировать свои проекты и позволяет гордо заявлять и говорить, что ты создаёшь "глобальные" сайты на хакатонах вместо позора перед лютыми индусами. Так что если ты хочешь упростить разработку веб-приложений с использованием Vue 3, добавить немного магии и создавать себе лишние проблемы прибыльные проекты, то Nuxt 3 - идеальный выбор @frontendG1d #Vue #JavaScriptFrameworks #Nuxt
1 год назад
ТЕЛЕГРАМ КАНАЛ: t.me/...g1d JSX в React - это расширение языка JavaScript, которое позволяет писать HTML-подобный код в JavaScript. Оно используется для описания пользовательского интерфейса в React-приложениях. React - это библиотека JavaScript для создания пользовательских интерфейсов. JSX используется в React для создания компонентов, которые представляют собой некоторую часть пользовательского интерфейса. JSX позволяет объединять HTML-подобную разметку с логикой JavaScript, делая код более понятным и лаконичным. Вот пример кода на JSX в React: JavaScript jsx import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); }; const decrement = () => { setCount(count - 1); }; return ( <div> <button onClick={increment}>+</button> <span>{count}</span> <button onClick={decrement}>-</button> </div> ); } export default Counter; Этот пример показывает компонент Counter в React, который содержит счетчик и две кнопки для увеличения и уменьшения значения счетчика. В компоненте используется хук useState для сохранения и обновления значения счетчика. Кнопки + и - привязаны к функциям increment и decrement, которые обновляют значение счетчика вызовом setCount с новым значением. Значение счетчика отображается внутри <span>. @frontendG1d #javascript #JavaScriptFrameworks #код #React
1 год назад
ТЕЛЕГРАМ КАНАЛ: t.me/...g1d Входное задание на собеседовании: Необходимо реализовать функционал передвижения красного квадрата по нажатию на кнопки (влево, вправо). Требования: 1. При нажатии кнопки "вправо" квадрат будет перемещаться до правой границы экрана; 2. При нажатии кнопки "влево" квадрат будет перемещаться до левой границы экрана; 3. Перемещение должно быть анимированным, длительность анимации составляет одну секунду; 4. При изменении размера окна квадрат должен оставаться у границы экрана. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> </head> <body> <div class="box"></div> <div class="btn-list"> <button class="btn">To right</button> <button class="btn">To left</button> </div> </body> </html> css .box { position: relative; width: 100px; height: 100px; background: red; transtion: 1s; } .btn-list { margin-top: 10px; }
1 год назад
ТЕЛЕГРАМ КАНАЛ: t.me/...g1d Поговорим о семантике и HTML Семантические теги в HTML представляют собой элементы, которые дают информацию о содержимом страницы и его структуре. Они предназначены для правильного описания смысла разметки, а не только для определения внешнего вида. Несколько основных семантических тегов в HTML: 1. <header>: Определяет заголовок или верхнюю часть страницы, которая может содержать логотип, заголовок сайта или навигационное меню. 2. <nav>: Используется для определения навигационной панели сайта. Обычно она содержит ссылки на разделы сайта или различные страницы. 3. <main>: Определяет основное содержимое страницы. Обычно это секция, в которой находится основная информация. 4. <article>: Используется для обозначения самостоятельного содержимого, такого как блоги, новости, статьи и комментарии. Каждая статья должна быть независимой и содержать смысл, даже если она отделена от остальных частей сайта. 5. <section>: Определяет раздел веб-страницы. Этот тег может содержать заголовок и указывать на то, что содержащийся в секции контент логически связан вместе. 6. <aside>: Используется для выделения дополнительной информации, которая может быть связана с основным содержимым страницы, но не является ее главной частью. Обычно это боковая панель, блок с дополнительными ссылками, рекламой или информацией. Семантические теги полезны, потому что они помогают слепым улучшить доступность и удобство использования веб-страниц. Они также могут быть полезны для поисковых систем, которые могут использовать эти теги для определения важности и содержания страницы. Кроме того, правильное использование семантических тегов делает код более понятным для разработчиков и облегчает его поддержку и изменение в будущем.
1 год назад
Телеграм канал: @frontendG1d Vue и React - это два популярных фреймворка для разработки пользовательских интерфейсов (UI). Оба являются открытыми и активно поддерживаемыми сообществами разработчиков. В посте ниже мы рассмотрим основные различия, а также плюсы и минусы каждого фреймворка Так что же выбрать? VUE Плюсы: 1. Простота изучения: Vue имеет более простую и интуитивно понятную структуру, что упрощает его изучение и использование для начинающих разработчиков. 2. Меньший размер: Vue имеет меньший объем кода, что облегчает его внедрение и более быструю загрузку. 3. Гибкость: Vue предоставляет гибкие варианты для разработки и расширения функциональности, что позволяет адаптировать фреймворк под свои потребности. 4. Производительность: Vue обладает хорошей производительностью благодаря своей механике обновления данных и виртуальному DOM. Минусы: 1. Меньшее сообщество: хотя сообщество Vue активно растет, оно все еще немного меньше, чем у React. Это может означать меньше доступных сторонних библиотек и ресурсов. 2. Ограниченная экосистема: из-за меньшего сообщества Vue может быть ограничен выбор сторонних плагинов и инструментов. Однако основные компоненты и функции все еще хорошо поддерживаются. REACT Плюсы: 1. Широкая экосистема: React имеет одно из самых активных сообществ разработчиков, что приводит к широкому выбору сторонних библиотек, инструментов и плагинов. Это позволяет быстро создавать функциональные и красивые пользовательские интерфейсы. 2. Высокая производительность: React использует виртуальный DOM и изоморфные возможности для обеспечения высокой производительности и быстрой отрисовки элементов. 3. Масштабируемость: React разработан с учетом масштабируемости, поэтому он легко масштабируется для разработки крупных и сложных проектов. 4. JSX: React использует JSX, что упрощает разметку компонентов и делает код более понятным и читабельным. Минусы: 1. Значительный объем изучаемого материала: изначально React может показаться сложнее для новичков, поскольку требуется изучение не только React, но и его экосистемы - Redux, React Router и других инструментов. 2. Больший размер: React имеет больший объем кода по сравнению с Vue, что приводит к более медленной загрузке страницы и использованию больших ресурсов. В итоге мы можем сделать вывод, что пора на завод оба фреймворка имеют свои преимущества и недостатки, и выбор между ними будет зависеть от конкретных требований и предпочтений разработчика. #JavaScriptFrameworks #Vue #React
1 год назад
ТЕЛЕГРАМ КАНАЛ: @frontendG1d Пример реализации выпадающего списка на нашем любимом JavaScript с комментариями JavaScript // Получаем ссылку на элемент, к которому применяется анимация const dropdownMenu = document.querySelector('.dropdown-menu'); // Получаем ссылку на кнопку, по нажатию на которую происходит открытие/закрытие списка const dropdownToggle = document.querySelector('.dropdown-toggle'); // Переменная, хранящая информацию о том, открыто или закрыто меню let isOpen = false; // Функция для открытия или закрытия списка с анимацией function toggleDropdownMenu() { // Проверяем, открыто или закрыто меню if (isOpen) { // Если меню открыто, то устанавливаем высоту 0 для закрытия dropdownMenu.style.height = '0'; } else { // Если меню закрыто, то получаем высоту меню с содержимым const menuHeight = dropdownMenu.scrollHeight; // Устанавливаем для меню начальную высоту 0 перед анимацией dropdownMenu.style.height = '0'; // Выполняем анимацию с использованием алгоритма плавности изменения высоты от 0 к menuHeight dropdownMenu.style.transition = 'height 0.3s ease'; // Устанавливаем конечную высоту menuHeight для раскрытия меню dropdownMenu.style.height = ${menuHeight}px; } // Инвертируем значение isOpen для следующего нажатия на кнопку isOpen = !isOpen; } // Добавляем обработчик события нажатия на кнопку dropdownToggle.addEventListener('click', toggleDropdownMenu); Расскажем поподробнее: - В первых трех строках получаем ссылки на элементы страницы, чтобы работать с ними в дальнейшем. В dropdownMenu сохраняется ссылка на элемент списка, а в dropdownToggle — на кнопку. - Объявляем переменную isOpen, которая хранит информацию о текущем состоянии списка — открыт или закрыт. - Далее определяем функцию toggleDropdownMenu(), которая будет вызываться при нажатии на кнопку и открытии списка. - Функция проверяет актуальное состояние isOpen. - Если меню открыто, включается анимация закрытия списка. Устанавливается начальная высота элемента как 0 пикселей dropdownMenu.style.height = '0';, что изменит высоту элемента на ноль, а анимация transition будет применена к этому изменению, чтобы меню плавно закрылось. - Если меню закрыто, получаем его высоту с учетом содержимого const menuHeight = dropdownMenu.scrollHeight;. Создаем анимацию с использованием свойства transition для изменения высоты и плавного открытия меню. - Устанавливаем конечную высоту dropdownMenu.style.height = ${menuHeight}px; равной значению menuHeight, что приведет к раскрытию меню с использованием заданной анимации высоты. - В конце функции инвертируется значение переменной isOpen, таким образом, что она становится противоположной своему предыдущему значению. Это позволяет правильно установить состояние открытия/закрытия списка для следующего нажатия на кнопку. - К последней строке добавляется обработчик события click, который будет вызывать функцию toggleDropdownMenu() при нажатии на кнопку. #Javascript #код
1 год назад