Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam

Пикабу Игры +1000 бесплатных онлайн игр

Скайдом - пожалуй, самая красочная и интересная головоломка с действительно уникальными режимами игры!

Скайдом

Три в ряд, Головоломки, Казуальные

Играть
Динамичный карточный батлер с PVE и PVP-боями онлайн! Собери коллекцию карточных героев, построй свою боевую колоду и вступай в бой с другими игроками.

Cards out!

Карточные, Ролевые, Стратегии

Играть
 Что обсуждали люди в 2024 году? Самое время вспомнить — через виммельбух Пикабу «Спрятано в 2024»! Печенька облегчит поиск предметов.

Спрятано в 2024

Поиск предметов, Казуальные

Играть
Игра представляет собой полноценную головоломку и дает возможность расслабиться после дня в тихой и уютной обстановке недалеко от горы Фудзи под деревом сакуры с полноценной игрой Маджонг!

Маджонг: Лепестки Сакуры

Маджонг, Головоломки, Милая

Играть
Реалистичный симулятор игры бильярд. Играйте в Бильярд 3D: Русский бильярд, как в настоящей бильярдной!

Бильярд 3D: Русский бильярд

Симуляторы, Спорт, Настольные

Играть

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • alekseyJHL alekseyJHL 6 постов
  • XpyMy XpyMy 1 пост
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Angular

11 постов сначала свежее
6
Proglib
Proglib
9 месяцев назад
Серия Итоги недели в мире фронтенда и обзоры сервисов

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков⁠⁠

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🔮 10 полезных JavaScript-трюков

Деструктуризация с переименованием (алиасингом)

Деструктуризация – это способ извлечь значения из массивов или свойства из объектов и присвоить их отдельным переменным. Алиасинг (переименование) позволяет дать новые имена этим переменным в процессе деструктуризации:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Зачем это нужно:

  • Улучшает читаемость кода.

  • Помогает избежать конфликтов имен – если у вас уже есть переменная city, можно использовать hometown.

  • Пригодится при работе с API, если он возвращает данные с неподходящими для вашего кода именами.

Каррирование

Каррирование – техника преобразования функции с несколькими аргументами в серию функций, каждая из которых принимает только один аргумент. Это делает функции более гибкими и переиспользуемыми. Например, это обычная функция расчета скидки:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Та же функция, но с использованием каррирования:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Зачем это нужно:

  • Обеспечивает переиспользуемость функций.

  • Повышает читаемость и модульность кода.

  • Позволяет создавать новые функции на лету, используя уже существующие, например:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🤖🎓 Подтянуть свои знания по DS вы можете на нашем телеграм-канале «Библиотека DS для собеса»

debounce() и throttle()

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

debounce() работает так:

  • Функция вызывается только после того, как прошло определенное время с момента последнего вызова.

  • Если функция вызывается снова до истечения этого времени, таймер сбрасывается.

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

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

throttle() работает так:

  • Функция вызывается не чаще, чем раз в заданный интервал времени.

  • Если попытка вызвать функцию происходит до истечения интервала, вызов игнорируется.

В этом примере функция handleScroll будет вызываться не чаще, чем раз в 300 миллисекунд, независимо от того, сколько раз пользователь прокрутил страницу за это время:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Мемоизация

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

  • Когда функция вызывается с определенными аргументами, мы сначала проверяем, вычисляли ли мы уже результат для этих аргументов.

  • Если да, мы возвращаем сохраненный результат.

  • Если нет, мы выполняем вычисление, сохраняем результат и возвращаем его.

Пример мемоизации при вычислении ряда Фибоначчи:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Без мемоизации вычисление fibonacci(40) заняло бы очень много времени, потому что функция вызывала бы себя рекурсивно миллионы раз, повторяя одни и те же вычисления.

  • С мемоизацией каждое число Фибоначчи вычисляется только один раз. При повторном запросе того же числа результат берется из кэша, что значительно ускоряет работу.

Когда использовать мемоизацию:

  • Для функций с очень сложными вычислениями.

  • Когда функция часто вызывается с одними и теми же аргументами.

  • Когда функция  возвращает один и тот же результат для одних и тех же входных данных.

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

🐘🧩 Интересные задачи по PHP для практики можно найти на нашем телеграм-канале «Библиотека задач по PHP»

Proxy

Proxy позволяет нам обернуть объект и контролировать взаимодействие с ним. Мы можем перехватывать и изменять основные операции – чтение свойств, их запись, вызов функций и т. д. Proxy особенно полезен, когда нужно добавить дополнительное поведение к объектам, не изменяя их напрямую: это может быть полезно для отладки, для реализации реактивных систем (как в Vue.js), для создания умных объектов и многого другого:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Для чего еще можно использовать Proxy:

  • Валидация – проверка данных перед их установкой в объект.

  • Логирование – отслеживание использования и изменений свойств объекта.

  • Создание вычисляемых на лету свойств.

  • Безопасность – можно контролировать доступ к свойствам объекта.

Генераторы

Генераторы – особый тип функций в JavaScript:

  • Могут приостанавливать свое выполнение и возобновлять его позже.

  • Сохраняют свое состояние между вызовами.

  • Используют ключевое слово yield для возврата значений.

Пример итерации по свойствам объекта:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Преимущества генераторов:

  • Ленивые вычисления – вычисляют значения, когда они действительно нужны.

  • Создание бесконечных последовательностей, не занимающих бесконечный объем памяти.

  • Упрощение асинхронного кода – можно сделать асинхронный код более похожим на синхронный.

  • Создание кастомных итераторов для сложных структур данных.

Эффективное использование консоли

Помимо console.log(), консоль предоставляет несколько более наглядных методов вывода информации.

  • Ошибки и предупреждения:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Вывод табличных данных:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Группировка логов:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Измерение времени выполнения:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Условное логирование:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Трассировка стека:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🐍🎓 Подтянуть свои знания по Python вы можете на нашем телеграм-канале «Библиотека Python для собеса»

Структурированное клонирование

Структурированное клонирование – метод создания полной (глубокой) копии объекта, включающей все вложенные объекты и структуры данных. Функция structuredClone позволяет выполнять такое клонирование просто и эффективно – в  отличие от JSON.parse(JSON.stringify()), structuredClone корректно обрабатывает Date, Map, Set и другие специальные типы JavaScript:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Структурированное клонирование стоит использовать, если:

  • Нужно создать полную, независимую копию сложного объекта.

  • Данные не должны изменяться (иммутабельность).

  • Необходимо избежать побочных эффектов при изменении данных.

Самовызывающиеся функции

Самовызывающиеся функции (IIFE) выполняются автоматически сразу после их создания. Они создают временную область видимости, в которой можно безопасно определять переменные и функции, не беспокоясь о том, что они будут конфликтовать с другими частями кода и загрязнять глобальную область видимости. Эта техника особенно полезна в старых средах JavaScript, где блочная область видимости (let и const) недоступна, или в сценариях, где требуется немедленное выполнение для инициализации:

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Теговые шаблоны

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

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

Как можно использовать теговые шаблоны:

  • Автоматически обрабатывать пользовательский ввод, предотвращая XSS-атаки.

  • Форматировать числа, даты и т. д.

  • Безопасно формировать SQL-запросы, экранируя ввод.

  • Создавать теги для автоматического перевода строк с одного языка на другой.

🤖🧩 Интересные задачи по DS для практики можно найти на нашем телеграм-канале «Библиотека задач по DS»

📐 Единицы измерения высоты и ширины экрана в современном CSS

На протяжении многих лет разработчики использовали vh и vw, чтобы задавать размеры элементов в процентах от высоты и ширины экрана. Например, чтобы заполнить весь экран элементом, его размеры можно задать как 100vh на 100vw. Однако эти единицы могут работать ненадежно в некоторых случаях, например, при изменении видимой области экрана на мобильных устройствах из-за скрытия адресной строки браузера при прокрутке. Сейчас CSS предлагает новые единицы измерения, которые учитывают динамические изменения интерфейса браузера.

Large Viewport Units (lvh, lvw)

Эти единицы задаются относительно максимального размера видимой области, когда интерфейс браузера минимизирован (например, скрыты панели). По сути, они ведут себя аналогично классическим vh и vw, но с учетом возможных изменений интерфейса. Этот элемент будет занимать весь экран независимо от состояния интерфейса браузера:

.full-page-element {
height: 100lvh;
width: 100lvw;
z-index: -1
background: #f51;
}

Small Viewport Units (svh, svw)

Эти единицы рассчитываются относительно минимального размера видимой области, когда интерфейс браузера максимально расширен (например, когда панели видимы). Пример – статичный заголовок, занимающий 10% от минимальной видимой области:

.header {
height: 10svh;
background-color: #642;
}

Dynamic Viewport Units (dvh, dvw)

Эти единицы измеряются с учетом динамических изменений видимой области при взаимодействии пользователя с интерфейсом (например, при прокрутке страницы или появлении виртуальной клавиатуры). Есть нюансы: использование этих единиц иногда приводит к неожиданным изменениям размеров контента и ухудшению производительности. Пример – элемент, который адаптируется к изменениям высоты видимой области:

.adjustable-element {
height: calc(100dvh - 10svh);
}

Привет!

Мы запустили еженедельную email-рассылку, посвященную последним новостям и тенденциям в мире фронтенда. В наших еженедельных рассылках ты найдешь:

  • Современные JavaScript-фреймворки и библиотеки

  • HTML5 и CSS3: новые возможности и трюки

  • Оптимизация производительности веб-приложений

  • Тестирование и отладка кода

  • Лучшие практики UX/UI

  • Новые веб-стандарты и браузерные технологии

  • Тренды в веб-дизайне и интерфейсах

  • Прогрессивные веб-приложения (PWA)

📧 Подпишись, чтобы быть в числе первых, кто получит дайджест

✍️ 50 лучших ресурсов с бесплатными HTML/CSS/JS-шаблонами

  • HTMLrev – крупнейшая бесплатная библиотека шаблонов, созданных с использованием всех существующих технологий, включая HTML/CSS/JS, Bootstrap, Tailwind, Bulma, Angular, React, Vue, Next.js, Nuxt, Svelte, Astro, Laravel, Django, Gatsby, Hugo, Jekyll и BCMS.

  • HTML5 UP – бесплатная коллекция HTML-шаблонов с уникальным дизайном и высоким качеством кода.

  • StyleShout предлагает широкий выбор шаблонов для различных целей, включая SaaS, мобильные приложения, блоги, лендинги, портфолио и агентства.

  • One Page Lovе включает шаблоны на Bootstrap, Next.js, Tailwind, Carrd и Framer.

  • Cruip предлагает шаблоны на Tailwind, React, Vue, Next.js и Laravel.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🐍🧩 Интересные задачи по Python для практики можно найти на нашем телеграм-канале «Библиотека задач по Python»

  • Templatemo – огромная коллекция бесплатных Bootstrap-шаблонов.

  • ThemeSelection – библиотека бесплатных и платных шаблонов на Vue, Next.js, Nuxt и Laravel. Специализируется на административных панелях и UI-китах.

  • Creative Tim – шаблоны на Bootstrap, Tailwind, Angular, React, Vue, Next.js, Nuxt, Svelte, Laravel, Django и Astro.

  • Themesberg предлагает широкий выбор шаблонов для административных панелей, лендингов, дизайн-систем и UI-китов.

  • TemplateDeck – небольшая библиотека креативных Bootstrap-шаблонов высокого качества.

  • Flout UI – коллекция компонентов Tailwind и готовых шаблонов Next.js.

  • Michael Andreuzza – бесплатная подборка шаблонов Astro, созданная опытным и креативным разработчиком.

  • Just Good UI – собрание бесплатных и платных шаблонов Astro.

  • Startup Landing – подборка бесплатных шаблонов Next.js и Gatsby.

  • Web3Templates – красивые шаблоны Tailwind, Astro и Next.js, оптимизированные для конверсий.

  • Landify – красивые и современные шаблоны Gatsby.

  • Nextjs Templates – широкий выбор шаблонов для разных целей, включая SaaS, стартапы, бизнес, программное обеспечение и блоги.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • LayoutFlow – отличные шаблоны для агентств, портфолио и сайтов услуг.

  • Template Foundation – шаблоны, ориентированные на портфолио и личные сайты.

  • Templated – продуманные шаблоны на HTML/CSS и Bootstrap.

  • Freebiesbug – высококачественные шаблоны, оптимизированные для маркетинга.

  • Start Bootstrap – широкий выбор профессиональных шаблонов для стартапов, агентств, портфолио, личных сайтов и блогов.

  • MonsterOne – современные шаблоны с несколькими страницами.

  • TemplatesJungle – шаблоны для бизнеса, агентств, сервисов, портфолио, электронной коммерции и других целей.

  • 3rd Wave Media – коллекция высококачественных шаблонов, ориентированных на ИТ-сферу.

  • Tooplate – большая коллекция стильных и современных Bootstrap-шаблонов.

  • Pixel Rocket – качественные Bootstrap- и Tailwind-шаблоны.

  • HTML Codex – широкий выбор шаблонов для бизнеса, курсов, продуктов, агентств, сервисов, портфолио, резюме и других целей.

  • W3Layouts отличается широким выбором шаблонов для бизнеса.

  • Bootstrapious – шаблоны с хорошим дизайном и продвинутыми компонентами.

  • Untree – стильные шаблоны со сложными элементами.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • Tailwind Toolbox – красивые шаблоны с продуманной структурой.

  • Pixelcave – современные шаблоны для сайтов и административных интерфейсов.

  • Themefisher – коллекция шаблонов для бизнеса, SaaS, блогов и других целей.

  • Tailspark – Tailwind-шаблоны для SaaS-сайтов и лендингов.

  • Red Pixel Themes – шаблоны с  хорошим дизайном и многими полезными компонентами.

  • Ari Budin – уникальные шаблоны для портфолио, агентств, журналов и дизайн-систем.

  • Treact – бесплатная библиотека React-шаблонов.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • DesignToCodes – шаблоны для стартапов, агентств, портфолио и административных панелей.

  • UI Lib – библиотека Bootstrap-, Tailwind-, Angular-, React- и Vue-шаблонов.

  • AdminMart – профессиональные шаблоны со множеством секций и компонентов.

  • WrapPixel – специализируется на административных панелях и UI-китах, предлагает широкий выбор шаблонов с разным дизайном и структурой.

  • Tabler – бесплатная библиотека Bootstrap-шаблонов, специализируется на административных панелях.

  • KeenThemes – современные шаблоны для админ-панелей со множеством компонентов.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост

🎮 Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека разработчика игр | Gamedev, Unity, Unreal Engine»

  • EaseTemplate – подборка современных Bootstrap-шаблонов.

  • BootstrapDash – шаблоны с несколькими страницами и продвинутыми компонентами.

  • CodedThemes – профессиональные Bootstrap-, Angular-, React- и Vue-шаблоны с красивым дизайном.

  • Salvia Kit предлагает коллекцию Angular-, React-, Vue-, Nuxt- и Svelte-шаблонов. Отличается широким выбором шаблонов для административных панелей.

Итоги недели в мире фронтенда и обзоры новых сервисов: 10 полезных JavaScript-трюков Программирование, Разработка, Шаблон, Angular, Bootstrap, CSS, Frontend, Gatsby, HTML, IT, Javascript, Laravel, React, Vue, Длиннопост
  • JustBoil – Tailwind-, React-, Vue-, Next.js-, Nuxt- и Laravel-шаблоны для сайтов и админ-панелей.

  • Iqonic Design – библиотека React- и Vue-шаблонов, предлагает несколько бесплатных пакетов для создания современных интерфейсов.

Автор рассылки: Наталья Кайда

📧 Подписаться на рассылку

Показать полностью 24
Программирование Разработка Шаблон Angular Bootstrap CSS Frontend Gatsby HTML IT Javascript Laravel React Vue Длиннопост
1
AlexeyPerfilev
AlexeyPerfilev
10 месяцев назад

Есть три стула: React, Vue или Angular...⁠⁠

Привет, пикабушники! Сегодня я расскажу вам о трех популярных JavaScript-фреймворках: React, Vue.js и Angular. Знаю, что среди вас много айтишников, так что давайте разберемся, что к чему.

React: Детище Facebook

Представьте, что вы строите дом из кубиков LEGO. React - это как набор LEGO для веб-разработки. Каждый кубик - это компонент, который вы можете использовать снова и снова.

Плюсы:

  • Быстрый, как Флэш (благодаря виртуальному DOM)

  • Прост в освоении (если вы уже дружите с JavaScript)

  • Документация - просто песня

  • Куча инструментов и библиотек (как в швейцарском ноже)

  • Популярен, как пельмени на Новый год

Vue.js: Тот самый "прогрессивный" парень

Vue.js - это как швейцарский нож среди фреймворков. Его можно использовать как для маленьких проектов, так и для больших.

Плюсы:

  • Шустрый, как белка (тоже использует виртуальный DOM)

  • Простой, как пять копеек (даже новички разберутся)

  • Документация - как учебник для первоклассников, все понятно

  • Инструменты растут как грибы после дождя

  • Популярен в Азии (как К-поп)

Angular: Танк от Google

Angular - это как швейцарские часы: сложный механизм, но работает как часы (простите за каламбур).

Плюсы:

  • Мощный, как трактор "Беларусь"

  • Сложноват для новичков (но если освоите - цены вам не будет)

  • Документация подробная, как инструкция к стиральной машине

  • Инструментов больше, чем в гараже у Кулибина

  • Популярен в корпорациях (как костюмы и галстуки)

В итоге, что выбрать?

  • React - если хотите быть как крутые стартаперы из Кремниевой долины

  • Vue.js - если хотите быстро создать что-то красивое и не сломать мозг

  • Angular - если вы любите сложные механизмы и работаете в большой компании

А вы, друзья, какой фреймворк предпочитаете? Делитесь в комментариях! И да пребудет с вами сила JavaScript!

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

Показать полностью
[моё] Frontend React Vue Angular Javascript Framework Стартап Технологии Инновации Текст
3
9
rostikt
1 год назад
Лига программистов

Вы крутые, спасибо за поддержку! (Продолжение "Я стал Ютубером!")⁠⁠

Честно говоря, даже не рассчитывал на такой отклик на мой предыдущий пост. 30 подписчиков на Youtube, ценные комментарии и советы, да и просто слова поддержки!

За эти две недели мне удалось выпустить еще два ролика:
- Техника собеседования STAR (7 минут)
- Третья часть серии "Кодим с chatGPT" (17 минут)

К сожалению, охват моих видео пока не очень большой, хотя видео про STAR приняли очень тепло, судя по лайкам.

На самом деле, затевая эксперимент "Кодим с ChatGPT", я был почти уверен, что сколь-нибудь значимых результатов я не получу. Но похоже, я начинаю сам себя опровергать. Чатбот сумел не просто предложить решение проблемы (например, "сделать форму авторизации"), но и решить абстрактную задачу "сделать форму красивой".

Кроме того, он неплохо разбирается в существующих библиотеках и сумел предложить мне два очень приличных варианта с полнофункциональным календарем. И это притом, что я использую версию 3.5, а не 4. В общем, мне кажется, из всего этого выйдет неплохой результат, но посмотрим. До работающего приложения еще очень далеко.

Одно могу сказать точно: если бы я писал код с нуля, я бы потратил на него раз в 5 больше времени, с учетом исправления всех ошибок, которые иногда допускает chatGPT.

Ну и немного внутренней кухни (кажется, эта рубрика становится постоянной):

Тема для видеоблога выбрана весьма непростая для новичка, ведь мне недоступна опция "перезаписать видео", если в процессе записи что-то пошло не так. Это же chatGPT, который запоминает контекст. То есть, я:

а) не могу просто как ни в чем не бывало заново его просить делать то, о чем уже просил (потому что он "знает", что я уже задавал этот вопрос и его ответ будет учитывать предыдущие ответы)

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

Приходится танцевать с бубном. Например, после записи я понял, что у меня был косяк с гарнитурой и звук был фиговый. Пришлось на имеющийся видеоряд с записью экрана накладывать новый аудио-видео ряд с голосом и миниатюрной головой. Это вылилось в адок на монтаже, общее время монтажа 17-минутного ролика составило часов 15. Всё для вас, дорогие будущие зрители :)

Спасибо за поддержку, буду рад новым подпискам на канал и идеям по развитию!

Показать полностью
[моё] Блог ChatGPT Программирование YouTube Видеоблог Angular Nodejs Postgresql IT Искусственный интеллект Кодирование Приложение Автоматизация Технологии Javascript Typescript Веб-разработка API Текст
0
17
rostikt
1 год назад
Лига программистов

Я стал Ютубером!⁠⁠

Итак, это случилось! Я завел свой канал по тематике программирования и даже выложил уже два видеоролика на него.

На самом деле, это сложнее, чем кажется. Ведь нужно говорить в камеру, и говорить что-то осмысленное, интересное, а я, признаться, очень стеснялся :) Ну там, как выгляжу, как говорю, что там видно в фоне... А потом просто взял и решился. Теперь вот делюсь с Пикабу. Поддержите меня, пожалуйста!

Очень хотелось приносить какую-то пользу, ведь у меня более 10 лет опыта во фронтенде, и мне очень нравится делиться знаниями. Но о чем можно говорить, что можно придумать такого, на что еще не снято 1000 роликов от блоггеров тысячников и миллионников?

Потом, как-то одним вечером мне пришла идея написать большое полноценное приложение, используя только chatGPT. И где-то через два потраченных вечера меня осенило: ведь я могу все свои шаги записывать и выкладывать на Ютуб! Вот и будет интересная тематика, и еще я смогу своим опытом делиться (вы же понимаете, за этим чатом нужно все перепроверять...).

В общем, первые два ролика уже на канале, далее планирую выпускать новые ролики еженедельно.

Канал мой сейчас имеет аж двух подписчиков, один из них - моя супруга :)


В общем, вот: https://www.youtube.com/@Rostik-T

Ну и немного внутренней кухни:

Ролик, протяженностью 20 минут (после монтажа) я записываю где-то час. Монтаж ролика занимает у меня примерно 6 часов. Это удаление пауз, эээканья, неудачных фраз, которые потом перезаписываю, работа со скоростью видео и прочее.

И примерно 30-40 минут уходит на оформление ролика в ютубе и рисование превью.

Задавайте вопросы, с радостью отвечу! Критику тоже приму с радостью, только не закидывайте уж очень сильно тапками, пожалуйста :)

Пост без рейтинга.

Показать полностью
[моё] Блог ChatGPT Программирование YouTube Видеоблог Angular Nodejs Postgresql Без рейтинга IT Текст
19
8
Аноним
Аноним
2 года назад

Фреймворк для лайков⁠⁠

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

Фреймворк для лайков IT, IT юмор, Интернет, Frontend, React, Angular, Лайк
[моё] IT IT юмор Интернет Frontend React Angular Лайк
2
3
andchir
2 года назад
ИТ-проекты пикабушников

Создаём народный чат-рулетку⁠⁠

Создаём народный чат-рулетку Чат, Видеочат, P2P, Webrtc, Angular, Nodejs, Полезное, Длиннопост

Чат-рулетку придумал школьник Андрей Терновский в 2009 году. В таком чате можно знакомиться и обсуждать интересные темы со случайными собеседниками. Нужен только браузер, веб-камера и микрофон. Я думаю это хорошая и очень полезная идея. С тех пор появилось не мало клонов сайта Андрея, но в существующих реализациях есть много минусов. Поэтому у меня возникла идея создать чат-рулетку с открытым исходным кодом, где пользователи смогут предлагать свои идеи функционала для реализации. В этой статье сначала изложу свои мысли о целях и проблемах данного сервиса, а в конце поделюсь некоторой технической информацией моей реализации.

Проект я назвал OpenChatRoulette: https://github.com/andchir/openchatroulette
Сайт: https://openchatr.com/ru/
Пока реализован только самый необходимый функционал. В разделе "Issues" вы можете создавать задачи со своими идеями и найденными багами.

Зачем?

Кроме общения между людьми чат-рулетку часто используют видео-блогеры для создания контента. Кто-то из них создаёт развлекательный контент, кто-то политический. На YouTube сейчас такие ролики собирают тысячи просмотров.

Создаём народный чат-рулетку Чат, Видеочат, P2P, Webrtc, Angular, Nodejs, Полезное, Длиннопост

Так же чат-рулетка даёт возможность общения одиноким людям. Да, есть и отрицательные стороны таких чатов, об этом позже.

Безопасность

Для создания соединения и передачи потоковых данных (звук, видео, сообщения) по технологии "точка-точка" (P2P) используется WebRTC. Эта технология очень удобна с точки зрения экономии ресурсов, т.к. в основном используются ресурсы двух собеседников, а не сервера, на котором установлено программное обеспечение. Если соединение "точка-точка" невозможно, используется TURN сервер, тогда соединение "точка-точка" (клиент-клиент) превращается в "клиент-сервер-клиент". В любом случае пользователи чат-рулетки должны понимать, что если они хотят сохранить свою приватность, то должны использовать VPN, так же как с посещением любых других сайтов сети Интернет.

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

Я думаю использование виртуальных веб-камер нужно тоже разрешить, это даёт дополнительные возможности для создания интересного контента, а так же для скрытия при необходимости своего лица. Для борьбы с мошенниками нужно сделать предупреждение о том, что собеседник использует виртуальную веб-камеру (это в планах).


Эксгибиционизм

Я думаю всех любителей показывать свои интимные места нужно отправлять в раздел "Знакомства 18+". Позже планируется возможность для модератора отправлять туда насильно.

Создаём народный чат-рулетку Чат, Видеочат, P2P, Webrtc, Angular, Nodejs, Полезное, Длиннопост

Авторизация

На данный момент в самых известных чатах-рулетках требуется регистрация и авторизация пользователей (в том числе через соц. сети). Я думаю это сделано для дополнительной возможности блокировки пользователей, чтобы потом предложить им платную разблокировку. Или для возможности деанонимизации пользователей для каких-то целей. По-моему это ещё один очень большой минус существующих чатов-рулеток, который нужно исключить. Как уже говорилось, пользователей можно не банить, а насильно отправлять в отдельную группу в случае нарушения ими правил.

Техническая информация

В своем проекте во фронтенд части я использовал JS-фреймворк Angular c NGXS и Bootstrap, т.к. давно работаю с этими инструментами.  На серверной стороне NodeJS с PeerJS. Для определения страны пользователя используется MaxMind GeoIP2. Также на сервере установлен Coturn - TURN/STUN сервер для WebRTC.


Если вам понравился этот проект, прошу делиться своими идеями в комментариях и в разделе задач на GitHub.

Показать полностью 2
[моё] Чат Видеочат P2P Webrtc Angular Nodejs Полезное Длиннопост
6
5
chtaw
chtaw
2 года назад

Как искать работу в айти, будучи НЕ джуном?⁠⁠

Много раз на пикабу встречала мнение, что айти переполнен новичками, а специалистов уровня мидл и выше мало, большой кадровый дефицит, с руками оторвут любого мидла и выше и всё такое. Теперь пришел черед искать мне новую работу и пришлось столкнуться с тем, что всё это неправда. Обо мне: мидл фронтендер, пишу на ангуляре, в коммерческой разработке 3 года, есть высшее образование по айти, и это моя первая специальность (это к тому, что я не вайтишник, а изначально готовилась к айти со школы). Ситуация: откликаюсь на вакансии на хх.ру с резюме и сопроводительным письмом, на ~70 откликов сейчас статистика такая: большая часть висит непрочитанными, часть прочитаны, 5 отказов и 2 приглашения на интервью с эйчаром (один из них на сеньорную позицию, мисклик :|). Есть часть откликов с линкедина или от эйчаров, которым писала сама (контакты дали знакомые), но после общения с ними и письменного ответа на их вопросы, они пропадают, обещая написать позже (нет).

Может возникнуть подозрение у читателя, а мидл ли я вообще, получают ли эйчары от меня те ответы, которые они хотят слышать, или я полное дно и мой опыт ничего не значит? Да, возможно. Так что, если кому-то интересно, могу скинуть свое резюме в личку в телегу, чтобы составить более взвешенное мнение обо мне. Также, буду благодарна, если кто-то просмотрит моё резюме, чтобы дать совет, как улучшить его и возможно найти в нем корень проблемы с моими неудачами в поиске работы. Еще было бы круто, если в комментариях кто-то поделится опытом, в каких местах искать работу лучше всего.

[моё] Нужен совет IT Поиск работы Проблема Frontend Angular Резюме Помощь Просьба Удаленная работа Текст
41
17
Maquire
Maquire
3 года назад

И тебя переживу⁠⁠

И тебя переживу Angular, Vue, React, Jquery, IT юмор, Javascript, Frontend
Показать полностью 1
Angular Vue React Jquery IT юмор Javascript Frontend
42
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии