Всем привет! Созрел-таки для создания небольшого канала. Здесь будут tips and tricks и прочие полезности из области веб-разработки, а также репосты понравившихся материалов. Welcome on board!

Как поменять username и email в git на локальном, глобальном и системном уровнях

git предоставляет нам возможность поменять username и email на трёх уровнях:

- локальном,
- глобальном,
- и системном.

Локальные настройки git находятся по адресу:

/<корневая_папка_проекта/.git/config,

глобальные –

в ~/.gitconfig в Unix-подобных системах и C:\<имя_пользователя>\.gitconfig в системах Windows,

системные —

в $(prefix)/etc/gitconfig в Unix-подобных системах и в C:\ProgramData\Git\config в Windows.

Кроме того, важно помнить о приоритете настроек — наибольшим приоритетом обладают локальные настройки, наименьшим — системные. Это означает, что при поиске значения той или иной настройки git будет начинать с локального уровня и подниматься до системного.

Изменить username/email на локальном уровне можно следующими командами:

git config user.name "Your project specific name"
git config user.email "[email protected]"

Проверить изменения можно так:

git config --get user.name
git config --get user.email

На глобальном уровне username/email можно изменить так:

git config --global user.name "Your global username"
git config --global user.email "[email protected]"

Проверить изменения:

git config --global --get user.name
git config --global --get user.email

На системном уровне username/email можно изменить так (как правило, нужды менять настройки на системном уровне нет, но тем не менее):

git config --system user.name "Your default name"
git config --system user.email "[email protected]"

Проверить изменения:

git config --system --get user.name
git config --system --get user.email

А чтобы посмотреть все установленные настройки и узнать где именно они заданы, используйте следующую команду:

git config --list --show-origin

#кодинг
#git

Мой первый перевод статьи о кодинге с английского. Статья посвящена тому, как в JavaScript добавить свойство к объекту или элемент к массиву в зависимости от условия.

https://telegra.ph/Kak-dobavit-svojstvo-k-obektu-ili-ehlement-v-massiv-v-zavisimosti-ot-usloviya-12-21

#перевод
#кодинг
#javascript

В ходе изучения Vue 3 и Composition API в частности (кто не в курсе, Composition API — самое значительное нововведение Vue 3, дающее альтернативный подход к созданию к созданию компонентов) задумался о разнице между функциями ref() и reactive(). Если коротко, то обе этих функции используется создания реактивных данных, при этом ref() работает с примитивными типами данных (string, number, boolean, null, undefined, symbol, bigint), тогда как reactive() — с объектами. Однако это не единственные нюансы работы этих функций, и более подробно об этом рассказывает Маркус Оберленер в своей статье Vue 3 Composition API: ref() vs. reactive()

#кодинг
#репост
#vue

https://markus.oberlehner.net/blog/vue-3-composition-api-ref-vs-reactive/

🗼 Proxy и Reflect

#theory | Гайды по JavaScript

9 клевых CSS-инструментов, которые стоит использовать в 2022 году

https://blog.devgenius.io/9-awesome-css-tools-that-you-should-use-in-2022-2155eed03c4c

Tailwind CSS — резюме после двух с половиной проектов

Бэкендер рассказывает, почему ему нравится Tailwind: https://proglib.io/w/4868b61a

#css #frameworks

Неоморфизм

Если вы как разработчик, никогда не слышали о неоморфизме, то немного расскажем, что это такое.

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

В статье рассказывается как создать такой эффект с помощью CSS. Там и демо с примерами есть, и ссылки на генераторы CSS кода.

Может пригодиться вам для дизайна ваших проектов. Да и вообще всегда полезно расширять кругозор!

#дизайн

Прерву череду репостов своим переводом статьи Дэниэла Келли ESLint and Prettier with Vite and Vue.js 3. Из этой статьи можно будет узнать, как настроить ESLint и Prettier для проекта на Vue3, созданного при помощи Vite (идею перевода навеяло то, что я и сам недавно столкнулся с аналогичной проблемой).

#кодинг
#качество_кода
#vite
#ide

https://teletype.in/@sasha_jarvi/ts2ztKWdECs

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

function dd($arr, $var_dump = false)
{
echo "<pre style='background: #222; color: #54ff00; padding: 20px;'>";
$var_dump ? var_dump($arr) : print_r($arr);
echo "</pre>";
}

#кодинг
#подсказка
#php

Про "Element is resolved only by name without use of explicit imports" в WebStorm/PhpStorm

Небольшой пост для пользователей WebStorm/PhpStorm: полагаю, многие из вас, кто работал с препроцессором SASS/SCSS, попадал в следующую ситуацию:

1. У вас есть файл, в котором прописаны переменные SASS/SCSS, использующиеся в большом количестве фрагментов кода, — назовем его _variables.scss.
2. У вас есть файл, в котором прописаны стили для определенного блока, — назовем его _block.scss.
3. Наконец, есть файл styles.scss, который импортирует _variables.scss и _block.scss:

@import _variables.scss;
@import _block.scss;

Если мы, находясь в файле _block.scss, попытается обратиться к переменной, например, $light-text, которая была объявлена в

_variables.scss

, IDE выдаст предупреждение вида "Element 'light-text' is resolved only by name without use of explicit imports" (хотя SCSS-код будет прекрасно работать). Как поступить в такой ситуации? Ответ прост — достаточно выключить это предупреждение в настройках IDE. Для этого нужно:

1. Перейти в File -> Settings.
2. Раскрыть раздел Editor и найти пункт Inspections.
3. Найти Sass/SCSS в Inspections.
4. Снять галочку с Missing import (или Resolved by name only в более старых версиях).

Готово! Теперь можно наслаждаться работой с Sass/SCSS без надоедливых предупреждений.

#кодинг
#scss
#ide
#webstorm

Про работу с mapState, mapGetters, mapMutations, mapActions в Nuxt.js на WebStorm/PhpStorm

Очередной пост про надоедливые предупреждения, а в этот раз ещё и по горячим следам. Работаю с одним проектом на Nuxt.js, решил использовать в одном из компонентов вспомогательную функцию mapActions (подробнее о ней здесь), импортирую как положено:

import { mapActions } from 'vuex'

Все в порядке, методы работают, но картину портит предупреждение от IDE о том, что vuex не установлен. Кто не в курсе: vuex в Nuxt.js идёт из коробки, а значит установка vuex как отдельной зависимости не требуется. Что же делать? Ответ нашёлся быстро: над импортом нужно добавить комментарий

// noinspection NpmUsedModulesInstalled

и после этого предупреждение исчезнет.

P.S. В одном из ответов техподдержки по этой ссылке говорится, что можно кликнуть правой кнопкой мыши по нужной папке в node_modules и выбрать Mark directory as | Not excluded в меню, но лично у меня так сделать не получилось — возможно, было доступно в старых версиях.

​Vuido – Фреймворк на базе Vue.js, который позволяет создавать десктопные приложения для Windows, Mac и Linux c использованием нативных UI-компонент

☛ Проект работает без использования Electron

GitHub | #JavaScript #Interesting

Немного о GraphQL

На днях начал разбираться с GraphQL. Если коротко, GraphQL — это язык запросов для API-интерфейсов и среда, в которой они выполняются. С помощью GraphQL можно получить данные из API и передать их в приложение (от сервера к клиенту), то есть GraphQL можно назвать альтернативой более привычному многим REST.

Собственно, у многих возникнет вопрос: зачем использовать GraphQL, а не REST? Все дело в том, что зачастую при работе с крупномасштабным приложением могут возникать ситуации с ограничениями REST-архитектуры. Например, мы хотим получить некие взаимосвязанные данные (например, профиль пользователя и его посты). На первый взгляд, это тривиально, но, во-первых, объём этих самых данных может быть огромным, и, во-вторых (хотя не менее важно) – эти данные могут быть размещены в разных базах данных (к примеру, MariaDB и MongoDB). При использовании REST нам пришлось бы создать несколько эндпойнтов, но при использовании GraphQL нам будет достаточно одного «умного» эндпойнта, который сможет отдать нам все нужные данные.

Теперь в моих планах написать небольшой пет-проект с использованием этого инструмента (если срастется, опишу процесс создания пошагово), а пока предлагаю почитать вводную статью о GraphQL.

#кодинг
#graphql

https://help.reg.ru/hc/ru/articles/4408054707473-Руководство-по-GraphQL

Серия из 51 обучающего видео про основы JavaScript от разработчиков из Microsoft:

https://tprg.ru/FxV0

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

#javascript