mohnatus

npm install webpack webpack-cli --save-dev
npm install html-loader file-loader image-minimizer-webpack-plugin --save-dev
npm install css-loader less-loader postcss-loader mini-css-extract-plugin --save-dev
npm install babel-loader @babel/core @babel/plugin-transform-runtime @babel/preset-env --save-dev ts-loader --save-dev

mohnatus

const loader = {
  test: /\.svg?$/,
  use: [
    {
      loader: "svg-sprite-loader",
      options: {
        symbolId: (filePath) => {
          let fileData = path.parse(filePath);
          return "svg-icon-" + fileData.name;
        },

mohnatus

/* At most 3 (3 or less, excluding 0) children */
ul:has(> :nth-child(-n+3):last-child) {
	outline: 1px solid red;
}

/* At most 3 (3 or less, including 0) children */
ul:not(:has(> :nth-child(3))) {
	outline: 1px solid red;
}

mohnatus

.multiline-ellipsis-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

mohnatus

function getCoords(e) {
  if (/touch/.test(e.type)) {
    return {
      x: e.changedTouches[0].pageX,
      y: e.changedTouches[0].pageY
    };
  }
  return {
    x: e.clientX,
    y: e.clientY

mohnatus

module.exports = (env={}, argv={}) => {
  return {
    devtool: 'source-map',
    module: {
      rules: [
        {
          test: /\.js$/,
          use: "babel-loader"
        },
        {

mohnatus

import React, { useState, useEffect } from "react";
import "./App.css";
import dummyData from "./data";
import CardList from "./components/CardList";

const App = () => {
  const [videos, setVideos] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {

mohnatus

import React from "react";
const Card = ({ item, channel }) => {
    return (
      <li className="card">
        <a
          href={`https://www.youtube.com/watch?v=${item.id}`}
          target="\_blank"
          rel="noopener noreferrer"
          className="card-link"
        >

mohnatus

import React from "react";
import Card from "./Card";
const CardList = ({ list }) => {
    return (
      <ul className="list">
        {list.items.map((item, index) => {
          return <Card key={index} item={item} channel={list.channel} />;
        })}
      </ul>
    );

mohnatus

import Skeleton, { SkeletonTheme } from "react-loading-skeleton";

const SkeletonComponent = () => (
  <SkeletonTheme color="#202020" highlightColor="#444">
    <section>
      <Skeleton height={50} width={50} />
    </section>
  </SkeletonTheme>
);