#vue #vue3 #sfc #css

В Vue 3 появилась отличная фишка. Вы можете устанавливать значения CSS в Single File Component прямо из переменных. Проще говоря вот так:

<template>
<div class="text">hello</div>
</template>

<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>

<style>
.text {
color: v-bind(color);
}
</style>

Значения можно подставлять как и из data, так и из props, и даже из computed.

Подробнее в документации:
https://vuejs.org/api/sfc-css-features.html#v-bind-in-css

Друзья, возобновляю ведение своего канала, извините, что все это время не писал, поскольку был занят переездом и адаптацией на новом месте. Первый материал спустя столь долгий перерыв будет о деплое статического сайта на Vue.js, собранного при помощи Vite, на Github Pages.

Собственно, процесс деплоя довольно прост:

1. В vite.config.js нужно прописать параметр base.
Если вы деплоите на https://<USERNAME>.github.io/, то в таком случае значением base будет '/'. Это дефолтное значение, таким образом, base можно не прописывать.
Если же деплоите на https://<USERNAME>.github.io/<REPO>/, (например, ваш репозиторий расположен по адресу https://github.com/<USERNAME>/<REPO>), то пропишите base: '/<REPO>/'.

2. В корне проекта создайте файл deploy.sh со следующим содержимым:

#!/usr/bin/env sh

# abort on errors
set -e

# build
yarn run build

# navigate into the build output directory
cd dist

git init
git checkout main || git checkout -b main
git add -A
git commit --allow-empty -m 'Deploy to Github Pages'

# если вы деплоите на https://<USERNAME>.github.io, раскомментируйте следующую строку
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git main

# если вы деплоите на https://<USERNAME>.github.io/<REPO>, раскомментируйте следующую строку
# git push -f [email protected]:<USERNAME>/<REPO>.git main:gh-pages

cd -

3. Запустите deploy.sh - после этого в вашем репозитории появится ветка gh-pages.
4. Теперь вам нужно включить функционал GitHub Pages для своего репозитория. Чтобы сделать это, зайдите на страницу своего репозитория и выберите «Настройки» (Settings), затем выберите Pages на панели слева. В разделе Source выберите ветку gh-pages и сохраните изменения.
5. Как только вы сохраните изменения, появится сообщение о том, что сайт готов к публикации по адресу вида your-account-name.github.io/repo-name или your-account-name.github.io. Для проверки работы сайта перейдите по указанному адресу.

Готово!

#кодинг
#vue
#vite
#github

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

Тут делается упор на проверку знаний об arguments, но иногда заходят ещё дальше и просят рассказать каким образом работает Array.prototype.slice.call(arguments).

Ответ:

 function isThreePassed(){
  const args = Array.prototype.slice.call(arguments);
  return args.indexOf(3) != -1;
 }
 isThreePassed(1,2) //false
 isThreePassed(9,3,4,9) //true

Как мы знаем, arguments не массив, а обычный объект, поэтому у него нет такого полезного метода как indexOf. Для этого используется Array.prototype.slice.call(arguments), который делает из argument — > array.

Но всё же, как он работает ?
.call() и .apply() позволяют явно установить this в функции. И если передать argument как this, то slice будет работать с ним как с обычным массивом.

👉 @frontendInterview

SMACSS vs. BEM

Не все фанаты BEM.

Если вы в разработке относительно недавно, то возможно и не слышали о других методологиях.

SMACSS - это еще одна методология, помогающая с организацией кода. Аббревиатура расшифровывается, как Scalable and Modular Architecture for CSS (масштабируемая и модульная архитектура для CSS). 

Базовые категории SMACSS: 
- Base - в эту категорию входят правила, которые определяют внешний вид элементов по умолчанию;
- Layout - категория для стилей, с помощью которых страница разделяется на секции;
- Module - это повторно используемые части дизайна(меню, модальные окна и др.);
- State - категория для стилей состояния;
- Theme - в эту категорию входят стили, отвечающие за внешний вид макетов и модулей;

В статье дается сравнение BEM и SMACSS. А на официальном сайте SMACSS можно почитать онлайн или скачать руководство по использованию данной методологии.

Ссылка на статью

Ссылка на официальный сайт SMACSS

#css

#vuejs

А между тем ещё неделю назад в бету вышел Vue.js 2.7

Изменений не много, но он ещё больше приблизился к Vue 3. Наконец то добавили v-bind для стилей!

Подробнее прочитать можете на Хабре:
https://habr.com/ru/post/673484/

#vuejs #compare

Интересная штука которая позволяет сравнить как выглядят те или иные конструкции в разных фреймворках

https://component-party.dev/

Разбираемся, что такое тогл

Тогл (toggle) представляет собой переключатель, который позволяет пользователям включать/выключать что-либо. Нажал раз – включил, нажал два – выключил.
А чтобы получше разобраться, что такое тогл, когда и как его использовать, оставляем для вас ниже гайд.

👉Читать гайд

#html #теория

Как создать и развернуть библиотеку компонентов Vue в NPM

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

👉 @sWebDev

Валидируем формы с Vue Formulate

https://blog.openreplay.com/validating-forms-with-vue-formulate

​Front-end-documentation – список обучающих материалов, статей и ресурсов для изучения фронтенда

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

⤷ Ссылка на проект

GitHub | #Interesting #Web #Useful

CoderNotes — платформа для заметок разработчиков

Здесь можно сохранять фрагменты собственного кода, которые могут понадобиться в будущем

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

Стоимость: #бесплатно (но есть платные функции)

#web #code

Как сделать патч в Git и сохранить патч в отдельном файле

Иногда возникают ситуации, когда нужно создать патч и сохранить его в отдельном файле. Это можно следать следующими способами.

1. Если вы не закоммитили изменения и файлы находятся в стейджинге, то нужно запустить в терминале следующую команду (diff.patch — это имя файла, в котором будет содержаться патч):

git diff > diff.patch

2. Если нужно содать патч для новых файлов, то нужно добавить их в стейджинг, а затем запустить git diff c флагом cached:

git add .
git diff --cached > diff.patch

3. Если нужно добавить в патч бинарные файлы (например, .mp3), воспользуйтесь следующей командой:

git diff --cached --binary > mypatch.patch

Чтобы применить созданный патч, используйтесь git apply:

git apply mypatch.patch

#кодинг
#git

🛠 Medusa — бесплатный опенсорсный аналог Shopify с настраиваемым headless-движком, полезный для всех, кто работает в сфере электронной коммерции.

WebDEV #инструменты #js

Как перенести коммит с одной ветки на другую, если вы уже сделали git push

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

#кодинг
#git

#шпаргалка дня

Ну теперь-то ты точно не забудешь, как работает justify-content…

…пока не придёт время использовать flex-direction: column 🤪

#css #flex #video

​Урок: JavaScript Паттерны. Шаблоны проектирования. 17 Примеров

Паттерн проектирования — это часто встречающееся решение определённой проблемы при проектировании архитектуры программ.

В видео на примерах разберут целых 17 паттернов на языке JavaScript:

https://youtu.be/YJVj4XNASDk

#урок #паттерны #javascript #ru

​30-seconds-of-code – Коллекция готовых фрагментов кода на JavaScript, CSS, Python и даже Git для любых ваших потребностей в разработке

Например, коллекция JS содержит широкий спектр вспомогательных функций ES6, помощников для работы с примитивами, массивами и объектами, а также алгоритмы, функции манипулирования DOM и утилиты Node.js

¡ Все фрагменты находятся на их веб-сайте

GitHub | #Interesting #Useful #Templates

Примеры использования популярных функций JavaScript, которые были добавлены в ECMAScript 2022 (ES13).

Читать

Memo — приложение для создания интеллектуальных заметок с помощью GitHub Gist

Инструмент позволяет владеть приватными данными, храня их в Github Gist, при этом получить к ним доступ можно из любого места и в любое время

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

#github #gist #open_source