Замедляет ли tailwind работу сайта в продакшене?нет или незначительно. количество классов у элемента почти не влияет на скорость отрисовки. но атомарные классы при этом положительно влияют на размер файла стиля. Очень жду, когда появится анализатор по аналогии с https://windicss.org/features/analyzer.html , чтобы повторы/незначительные вариации стилей проанализировать и перенести arbitrary values в конфиг.
Или он нужен только на этапе разработки?не понятно (
Стоит ли использовать tailwind в крупных проектах, если нет, то почему. И что стоит использовать?Стоит. Единственное, нужно фирменные элементы стиля зафиксировать в конфиге tailwind, можно вообще отказаться от дефолтного конфига и сделать свой с нуля.
И что стоит использовать?Ну вот вышеупомянутый windy - почти то же самое, что tailwind, но со своими плюсами (группировка классов - бомба, анализатор тоже полезная вещь) и минусами, например не 100% совместимость с tailwind и некоторые (некритичные) глюки в вычисляемых классах vue). Просто tailwind более распространен.
const obj = {
_x: 0,
get x() {
return this._x;
},
set x(value) {
this._x = value;
if (this._x === 5) {
console.log('Пятёрочка!');
}
},
};
// использование
obj.x = 5; // Пятёрочка!
const obj = {
_x: 0,
_filters: {},
addFilter(value, callback) {
this._filters[value] = callback;
},
get x() {
return this._x;
},
set x(value) {
this._x = value;
this._filters[value]?.(value);
},
};
// добавить обработчики
obj.addFilter(5, () => console.log('Пятёрочка!'));
obj.addFilter(10, v => console.log(`${v} это десять!`));
// использование
obj.x = 10; // 10 это десять!
axios.post('http://localhost:5000/api/create-post', () => {
body: data
})
Во-первых: axios
принимает параметром объект, а не функцию возвращающую объект.axios.post
вообще сразу принимает body: axios.post('http://localhost:5000/api/create-post', data)
() => {
body: data
}
на самом деле расшифровывается так: () => { // начало блока кода
// метка body указывающий на висящую в воздухе переменную data
body: data
// никакого возврата из функции
} // конец блока кода
чтобы оно воспринималось как объект, можно, например, заключать в скобки: () => ({
body: data
})
<autocomplete-input
:variants="cargo_codes"
:variantKey="'id'"
:label="'Код груза'"
:variantTitle="'code6'"
v-model="all_information.cargo_code"
-- :class="{ 'error_label': this.telegram_error.cargo_code }"
++ :myClass="{ 'error_label': this.telegram_error.cargo_code }"
></autocomplete-input>
export default {
name: 'AutocompleteInput',
props: {
variants: {
type: Array,
required: true,
},
value: {
default: ''
},
label: {
type: String,
default: '',
},
variantKey: {
type: String,
default: 'id'
},
variantTitle: {
type: String,
default: 'id'
},
placeholder: {
type: String,
default: ''
},
needFull: {
type: Boolean,
default: false
},
-- error_label: {
-- type: String,
-- default: ''
-- }
++ myClass: {
++ type: String,
++ default: {},
++ }
},
<template>
<div class="autocomplite_component">
<div class="controller">
<input type="text" class="textarea" @input="onInput" :value="value" :placeholder="placeholder">
</div>
<br>
-- <label class="label" :class="error_label">{{ label }}</label>
++ <label class="label" :class="myClass">{{ label }}</label>
<div class="variants" v-if="filtered && showVariants" style="max-height: 50px; overflow: auto;">
<div v-for="v in filtered" :key="v[variantKey]" class="variant" @click="selectVariant(v)">
<span style="cursor: pointer;">{{ v[variantTitle] }}</span>
</div>
</div>
</div>
</template>
const data = fetch('http://exmapl.ecom');
// ... - какой-то код
await data()
{
exclude: /\/node_modules/,
loader: "babel-loaderd",
query: {
presets: ['es2015-webpack', 'stage-0', 'react']
},
plugins: ['transform-runtime'],
},
{
exclude: /\/node_modules/,
loader: "babel-loader",
options: {
presets: ['es2015-webpack', 'stage-0', 'react'],
plugins: ['transform-runtime']
}
},
в HH ни в какую джуниором не берут
поймать зарубежный заказ