Михаил Р.

Насколько сложно устроиться во Frontend начинающему в 2023?

Учитывая, что конкуренция стала еще больше, а вакансий все меньше и меньше

то каков шанс в 2023 году попасть на работу во Frontend

Выставляйте как один из альтернативных ответов. Отмечу решением.

Так вроде продолжает жить оффлайн версия.
Онлайн есть, но это вроде не тот самый фотошоп.

А нужны ли вообще препроцессоры в 2к22, уже почти 2к23 году

Переменные давно реализованы в нативном CSS

$palette: (

  light: (
    1: "0deg 100% 99%",
    2: "0deg 100% 98%",
    3: "0deg 100% 96%",
  ),
  
  dark: (
    1: "0deg 0% 0%",
    2: "0deg 0% 0%",
    3: "0deg 0% 0%",
  ),

);

вложенность также

.car {
  color: red;
  
  &--model {
    background: black;
    
    &-tesla {
      color: blue;
    }
  }
}

Какие преимущества остались у препроцессоров?

.palette--light-1 { color: hsl(0deg 100% 99%) }
.palette--light-2 { color: hsl(0deg 100% 98%) }
// ...
.palette--dark-3 { color: hsl(0deg 0% 0%) }

DELL 7570 ( i7 8550U, 32 гб ОЗУ Corsair 2400, ssd + m2 )

Имея разъем Тандерболт 3, я начала думать о внешней видеокарте

@font-face {
  font-family: roboto_regular;
  font-style: normal;
  font-weight: normal;
  src:
    local("roboto"),
    local("roboto regular"),
    local("roboto_regular"),
    local("roboto-regular"),
    url("~src/fonts/roboto.woff2") format("woff2"),
    url("~src/fonts/roboto.woff") format("woff");
}

module.exports = () => {

// ...

    resolve: {
      alias: {
        src: path.resolve(__dirname, "src"),
      },
    },

// ...

}

const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  entry: {
    app: './src/index.js'
  },

  resolve: {
    alias: {
      src: path.resolve(__dirname, "src"),
    },
  },
  
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: '/node_modules/'
    }, {
      test: /\.css$/i,
      use: [
        MiniCssExtractPlugin.loader, "css-loader"
      ],
    },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          publicPath: 'assets',
          outputPath: 'images',
        },
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          publicPath: 'assets',
        }
      },
      {
        test: /\.scss$/i,
        use: [
          MiniCssExtractPlugin.loader, {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "postcss-loader",
            // options:{sourceMap:true}
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "autoprefixer",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ],
      },

    ]
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist'
  },


  devServer: {
    client: {
      overlay: true
    },
    static: {
      directory: path.join(__dirname)
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ]
}