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

Новость для тех, кто работает с Vue.js — с сегодняшнего дня версией по умолчанию становится Vue 3 вместо Vue 2. Поэтому, если вы работаете с Vue 2 и ещё планируете работать с этой версией дальше, важно обратить внимание на следующее:

— если вы подключали Vue 2 через CDN без обозначения версии, то теперь нужно её обозначить:

- <script src="https://unpkg.com/vue"></script>
+ <script src="https://unpkg.com/vue@2"></script>

- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>

— если вы устанавливали Vue и сопутствующие библиотеки через npm/yarn/pnpm, используя вместо обозначения версий latest или *, то теперь нужно явно указать номера версий, совместимых с Vue 2:

{
"dependencies": {
- "vue": "latest",
+ "vue": "^2.6.14",
- "vue-router": "latest",
+ "vue-router": "^3.5.3",
- "vuex": "latest"
+ "vuex": "^3.6.2"
},
"devDependencies": {
- "vue-loader": "latest",
+ "vue-loader": "^15.9.8",
- "@vue/test-utils": "latest"
+ "@vue/test-utils": "^1.3.0"
}
}

Об остальных нововведениях можете прочитать здесь

#новость
#vue

Резервный шрифт

Свойство font-family может иметь несколько шрифтов. Они объявляются в порядке предпочтения. В данном случае шрифты, следующие после изначального шрифта, называются резервными. Если первоначальное значение font-family не может загрузить страницу, будут использоваться резервные шрифты.

#css

Отключение нескольких правил ESLint в одном комментарии

Периодически бывают ситуации, когда для конкретных участков JS-кода нужно отключить линтинг. Сделать это можно так:

— для следующей строки кода

// eslint-disable-next-line no-return-assign
( your code... )

— для текущей строки

( your code... ) // eslint-disable-line no-return-assign

— для блока кода

/* eslint-disable no-return-assign */
( your code... )
/* eslint-enable no-return-assign */

В перечисленных примерах мы отключаем одно правило — no-return-assign. Но что, если нам нужно отключить несколько правил помимо no-return-assign, например, no-param-reassign? Ответ прост: нужно просто перечислить их через запятую. Примеры:

— для следующей строки кода

// eslint-disable-next-line no-return-assign, no-param-reassign
( your code... )

— для текущей строки

( your code... ) // eslint-disable-line no-return-assign, no-param-reassign

— для блока кода

/* eslint-disable no-return-assign, no-param-reassign */
( your code... )
/* eslint-enable no-return-assign, no-param-reassign */

Подробнее о конфигурировании правил читайте здесь

#кодинг
#js
#eslint

Функция minmax()

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

#css

#вопросы_с_собеседований
Что такое DOM?

DOM или Document Object Model — это программный интерфейс для работы с HTML документами. Когда браузер первый раз читает HTML документ, он формирует большой объект, основанный на документе — DOM, представляющий из себя "дерево" документа. DOM используется для взаимодействия со своей структурой (получения информации), изменения отдельных элементов и узлов.

В JS DOM представлен объектом Document. Объект Document имеет большое количество методов для работы с элементами, их созданием, модификацией и удалением.

​Полное практическое руководство по JWT с лучшими практиками в JavaScript.

https://proglib.io/w/b9e037ff

#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