Blogs - Jamie's Blog

Gradle Dependency Collision Resolution

Today I met this error when build my project. SLF4J: Class path contains multiple SLF4J bindings. SLF4J: Found binding in [jar:file:/D:/apps/… fbb0e/logback-classic-1.2.1.jar!/org/slf4j/impl/StaticLoggerBinder.class] SLF4J: Found binding in [jar:file:/D:/apps/… eca4e/slf4j-log4j12-1.7.6.jar!/org/slf4j/impl/StaticLoggerBinder.class] SLF4J: See http://www.slf4j.org/codes.html#multiple_bindings for an explanation. SLF4J: Actual binding is of type Read more…

By jamie, 2 years24 July 2023 ago

Linux

Nginx Installation

Official website: http://nginx.org/ Click Download. Choose version campatible with your system. In this article, my system is Linux. Nginx is written in C language. So make sure you have C language environment first. yum -y install gcc pcre pcre-devel zlib Read more…

By jamie, 2 years21 July 2023 ago

Frontend Development

ES6 Promise

1. What is Promise Promise is a solution for asynchronous programming. It is actually a constructor with its own methods all, reject and resolve, and prototype methods such as then and catch. The Promise object has the following two features: Read more…

By jamie, 2 years3 July 2023 ago

Frontend Development

history.replace() V.S. history.push()

1. history principle The visited addresses are stored on a stack (LIFO-last in first out) 2. history.go() /home ==> /home/qa ===> /home/video history.go(-1) // return to previous page, history.go(1) // go forward one page 3. history.replace() & history.push() Location Replace: The Read more…

By jamie, 2 years3 July 2023 ago

Frontend Development

React Markdown(II) – auto generate catalog, support math formula and customize footnotes

Last time, we have introduced how to display a Markdown document in React.(http://52.65.48.177/index.php/2023/03/13/rendering-markdown-in-react/) Now, let’s move forward to support ToC(Table of Content), Mathematical Formula and Footnote. 1. ToC (Table of Content) To support ToC and in-page jump, we need two Read more…

By jamie, 2 years24 May 2023 ago

Frontend Development

Check Form Validation with Yup and Formik

import React, {useEffect} from "react"; import { useFormik } from "formik"; import { Box, Button, FormControl, FormErrorMessage, FormLabel, Heading, Input, Select, Textarea, VStack, } from "@chakra-ui/react"; import * as Yup from 'yup'; import FullScreenSection from "./FullScreenSection"; import useSubmit from "../hooks/useSubmit"; Read more…

By jamie, 2 years24 May 2023 ago

Frontend Development

Passing data from child to parent component in React.JS

To pass data from a child to a parent component in React: Pass a function as a prop to the Child component. Call the function in the Child component and pass the data as arguments. Access the data in the Read more…

By jamie, 2 years19 May 2023 ago

Crawler

Pyppeteer Introduction

1. Introduction Puppeteer is a tool developed by Google based on Node.js, which allows us to control some of the actions of Chrome via JavaScript and of course as a web crawler, with a very sophisticated and powerful API. And Read more…

By jamie, 2 years8 April 2023 ago

Frontend Development

Deploy a React project to server

First, you need to confirm node.js, npm and nginx have been installed on your server. We’ll skip this step. Second, swith to your project directory, run the following command. npm run build or yarn build (if you have installed yarn) Read more…

By jamie, 2 years23 March 2023 ago

Frontend Development

An example to show PDF file in React with react-pdf-viewer

Here is an example to show PDF in webpage with React-pdf-viewer, including helpful default layout and loading progress bar. import { Viewer, ProgressBar, Worker } from '@react-pdf-viewer/core'; import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; import '@react-pdf-viewer/core/lib/styles/index.css'; import '@react-pdf-viewer/default-layout/lib/styles/index.css'; const PdfViewer = Read more…

By jamie, 2 years21 March 2023 ago