This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const loader = { | |
test: /\.svg?$/, | |
use: [ | |
{ | |
loader: "svg-sprite-loader", | |
options: { | |
symbolId: (filePath) => { | |
let fileData = path.parse(filePath); | |
return "svg-icon-" + fileData.name; | |
}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.multiline-ellipsis-text { | |
overflow: hidden; | |
display: -webkit-box; | |
-webkit-line-clamp: 3; | |
-webkit-box-orient: vertical; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
module.exports = (env={}, argv={}) => { | |
return { | |
devtool: 'source-map', | |
module: { | |
rules: [ | |
{ | |
test: /\.js$/, | |
use: "babel-loader" | |
}, | |
{ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(() => { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | |
> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; | |
const SkeletonComponent = () => ( | |
<SkeletonTheme color="#202020" highlightColor="#444"> | |
<section> | |
<Skeleton height={50} width={50} /> | |
</section> | |
</SkeletonTheme> | |
); |
NewerOlder