New Year’s Gift Technology Fat 262 free video on the front end to make your walk easier

There are still more than ten days left in 2018, I feel that this year I grow up is not very fast, there are a lot of 2018 New Year wishes have not reached. This article is my summary of 2018.

At the end of the year, I send all the videos to you. I hope you can make progress in both your study and your work in 2019.

A lot of people ask me why I record so many free videos and if there’s some big conspiracy.

My family was very poor when I was at school. My father was a soldier. He died when I was 12 years old. Mom is a paint worker, in my memory every time home from work is colorful, a paint smell. After my father left, my mother took on the burden of my grandmother, my brother and me, relying on only one person for all income.

When I learn a program even a program books can not afford, every day after class, fill a pot of cold water, buy two steamed buns to go xinhua bookstore copy books (at that time I did not have the phone to take pictures). Copy a chapter and then look at your notes when you can practice on your computer. I knew how hard it was to learn programming because I was poor and despised by a lot of rich kids.

Now that I’m in a better position, I just want to help you, make it easier for you to learn the program.

Here I record all my free lessons, and I’m stupid, and I prepare for three to five hours for each lesson, because speaking and speaking are really two different worlds.

It took two years. I wasn’t a lecturer, I was a front-line programmer who worked 8 + hours a day coding, and I recorded all the lessons when I got home from work and woke up at 4:30 in the morning.

All I’m trying to do is make it easier for you to go through the process.

I can’t promise I won’t change, but I thought so at this time, and I have thought so for two years. I wish you all the best in the New Year.

In 2019, I will publish three free videos a week, hoping to help more people learn front-end technology.

Technology fat wish junan!

1-Flutter Basics Video Tutorial

1. Meet Flutter

2. Build the Flutter development environment for Windows

3. Build a Mac version of the Flutter development environment

4. Install the AVD virtual machine Flutter to run

5. How to play Flutter under VSCode

6. Write a HelloWorld program

7. Text Widget Use of Text components

8. Container Use of Container components 1

9. Container Use of Container components 2

10. Image Use of the Image component

11. ListView Overview of list components

12. ListView horizontal list use

13. Use of ListView dynamic lists

14. GridView Grid list component

15. Flutter- use of horizontal layout Row

16. Flutter- Vertical layout Column components

17. The Flutter-Stack layout is stacked

18. The toy property of Stack

19. Card component layout

20. General page navigation and return

21. Transmission and Reception of navigation parameters (1)

22. Transmission and Reception of navigation parameters (2)

23. The page jumps and returns data

24. Static resource and project image processing

25. Package the Flutter client

2-Flutter 20 lesson short examples practice

1. Bottom navigation bar make -1

2. Bottom navigation bar make -2

3. Irregular bottom toolbar making -1

4. Irregular bottom toolbar making -2

5. Cool route animation -1

6. Cool route animation -2

7. Ground glass effect production

8. Keep the page state

9. Keep the page state -2

10. A not simple search bar -1

11. A not simple search bar -2

12. Streaming layout simulation adds photo effects

13. Open and close case

14. Expand the closed list case

15. Bezier curve cutting

16. Bezier curves in wave form

17. Open the application’s splash screen animation case

18. Swipe right to return to previous case

19. ToolTip control instance

20. Draggable control instance

ES6 Free Video Tutorials (18 episodes)

1. ES6 development environment construction

2. New declaration

3. Destruct assignment of variables

4. Extension operators and REST operators

5. String template

6. ES6 Digital operation

7. New array knowledge in ES6 (1)

8. New array knowledge in ES6 (2)

9. Arrow functions and extensions in ES6

10. ES6 functions and array fixes

11. Objects in the ES6

12. The role of Symbol in an object

13. Set and WeakSet data structures

14. Map data structure

15. Use Proxy for preprocessing

16. Use of promise objects

17. Use of the class class

18. Modular operation

Nginx free Tutorial (11 episodes)

1. Getting to know Nginx and environment preparation

2. Quick build of Nginx

3. Nginx basic configuration file details

4. Nginx service starts, stops, and restarts

5. Customize error pages and access Settings

6. More on Nginx access permissions

7. Nginx sets up virtual hosts

8. Nginx uses domain names to set up virtual hosts

9. Nginx reverse proxy setup

10. Nginx for PC or mobile devices

11. Gzip compression configuration for Nginx

5-TypeScript Pretypescript with Deno

1. I met TypeScript

2. Installation of the development environment

3. All that variable type stuff

4. Function of the TypeScript

5. Three ways to define a function

6. The scope of a variable in a function

7. Reference type – array

8. Reference type. – String

9. Reference type – date object

10. Reference type – Regular expression

11. Object-oriented programming – Declaration and use of classes

12. Object-oriented programming – Modifiers

13. Object-oriented programming – Inheritance and rewriting

14. Object-oriented programming – interface

15. Object-oriented programming – namespaces

Nuxt.js – Start SSR rendering with nuxt.js

1. NuxtJS course Introduction

2. Nuxt environment setup and Hello World

3. Nuxt Common configuration items

4. Nuxt routing configuration and parameter passing

5. Nuxt dynamic routing and parameter verification

6. Nuxt route animation

7. Default template and default layout for Nuxt

8. Nuxt error pages and personality meta Settings

9. The asyncData method gets data

10. Static resources and packaging

7- Free videos from CocosCreator from basics to combat

1. CocosCreator Introduction and HelloWorld

2. Software interface introduction and bouncing ball

3. Scene Introduction and basic operations

4. Player input event listener

5. Prefab and timer

6. Field – Game introduction and project analysis

7. Battle-ui layout

8. Actual combat – the main character’s movement monitoring and beating

9. Combat – Randomly generates ground thorns

10. Combat – Click to generate ground thorns and move

11. Combat-collision detection

12. Actual combat – Countdown and score increased

13. Actual combat – welcome interface code

14. Actual combat – Add sound effects

15. Combat – Launch the game

Full Stack MongoDB Basics Tutorial

1. Learn about and install MongoDB

2. Mongo Basic command -1

3. Mongo Basic command -2

4. Write the mongo command with the js file

5. The correct way to batch insert

6. Modify: Update common errors

7. Modify: Update modifier for the first time

8. Modify: Update array modifier

9. Modified: State return with security

10. Query: inequality modifier for find

11. Query: a multi-condition query of find

12. Query: An array query of find

13. Query: How to use the find parameter

14. Query: How is find used in JS text

15. Index: Construct mega data

16. Indexes: Getting started with indexes

17. Index: composite index

18. Index: full-text index

19. Management: Create, delete, and modify users

20. Management: Backup and restore

21. Management: Graphical interface management (finished)

9- Challenge Koa2 Free Video Tutorial (13 episodes)

1. Koa development environment setup

2. Use of async/await

3. Receive the Get request

4. How to receive a POST request (1)

5. How to receive a POST request (2)

6. Koa – bodyparser middleware

7. Koa2 native route implementation

8. Koa-router Middleware (1) Getting Started

9. Koa-router Middleware (2) tier

10. Koa-router middleware (3) parameters

11. Cookies are used in Koa2

12. Koa2 Template Introduction (EJS)

13. Koa -static Static resource middleware

React free Video Tutorial – Getting Started and Components

1. React

2. Environment setup and HelloWorld program

3. First introduction to JSX syntax

4. Advanced JSX syntax

5. React component: State member

6. React component: props and Render members

7. React component: Life cycle

8. React Component example – Mandatory exercises

9. React component: this.props. Children

10. React component: props property validation

11. React component: Gets the actual DOM node

React: How to Use Forms

1. Event response and bind reuse of forms

2. The React form name is reused

3. React Form – Controllable components

4. React Form – Uncontrollable components

How to Build and Route a React Project

1. Build: create-React-app fast scaffolding

2. Construction: the generator – the react – webpack

3. Build: Webpack builds 01 step by step

4. Build: Webpack builds 02 step by step

5. Route: Hello React Route

6. Route: a common option in NavLink

7. Routing: 404 Settings and jump Settings

8. Routing: The method of sending values through routing

9. Routing: Attributes and routing modes in the Router

10. Routing: Prompt instruction

Vue2.0 video tutorial – internal instructions (8 episodes)

1. Walk my Vue2.0

2. V-if V-else V-show command

3. V-for directive: Solves the template loop problem

4. v-text & v-html

5. V-on: Binds event listeners

6. V – model instruction

7. V – the bind command

8. Other internal commands (V-pre & V-cloak & V-once)

14- [season 2] Vue2.0 video tutorial – global API(9 episodes)

1. Vue.directive Indicates a custom directive

2. Extend extension of the vue.extend constructor

3. Vue.set Global operation

4. Vue lifecycle (hook functions)

5. Template Makes a Template

6. Component Get to know components

7. Component Props property setting

8. Component Parent-child Component relationship

9. Component tag

15- [season 3] Vue2.0 video tutorial – options (6 episodes)

1. PropsData Option Globally extended data transfer

2. Computed Option Computes options

3. Methods Option Method options

4. Watch option monitors data

5. Extends Option Extends Option

16- [season 4] Vue2.0 video tutorials – examples and built-in components (4 episodes)

1. Instance Getting Started – Instance properties

2. Instance methods

3. Examples of event

4. Built-in components – Slot description

17- VuE-CLI free Video Tutorial

1. Vue-cli, let’s get started

2. Vue-cli project structure description

3. Read the vuE-CLI template

18- Vue-Router free Video Tutorial

1. Vue – introduction to the router

2. Vue-router Configures child routes

3. How does vue-router pass parameters

4. Single-page multi-routing area operation

5. Vue-router passes parameters using urls

6. Vue-router redirection-redirect

7. Alias Indicates the use of an alias

8. Transition animation of routes

9. Mode Settings and 404 page processing

10. Hooks in routes

11. Programmatic navigation

Vuex free Video Tutorial (6 episodes)

1. A little Demo for the first time

2. State Access state objects

3. Mutations modify state

4. Getters calculates the filtering operation

5. Actions Changes the status asynchronously

6. The module module group

20- Vue Actual Combat Video – Fast Food Cashier System (11 episodes)

1. Mockplus drew our ideas

2. Vue-cli Set up the development environment

3. Fix the project icon Iconfont

4. Write a separate sidebar navigation component

5. Enable the Element seal

6. Quick Layout with Element (1)

7. Quick Layout with Element (2)

8. Axios reads data remotely

9. Order module making core functions -1

10. Order module making core functions -2

11. Project package and launch

21-WEEX Free Video Tutorials – From Getting Started to Getting Crazy (17 episodes)

1. Course is an introduction to

2. Development Environment Installation (1)

3. Development Environment Installation (2)

4. Weex common commands and hot updates

5. Android Studio development Settings

6. Weex and Vue’s love-hate relationship

7. Custom components and Text components

8. Input components and introductory built-in modules

9. Image and video components

10. Make a list together

11. Get the data from the back-end server

12. Make rotation picture effect

13. A component and Web component

14. Generic events and animations

15. Teach you weex by yourself

16. Navigator and WebView modules

17. Vue – the use of the router

22-Fabric.js Free Video Tutorial (13 episodes)

1. Getting to know the simple and powerful fabric.js library

2. Draw simple graphics on Canvas

3. Insert the image on the Canvas and set the rotation property

4. Fabric.js draws irregular shapes with paths

5. Fabric.js animation Settings

6. Fabric.js image filter

7. Fabric.js color mode and interconversion

8. Gradient fill for fabric.js

9. Text Settings for fabric.js

10. Fabric.js event system

11. Group drawing of fabric.js (part 1)

12. Group drawing of fabric.js (2)

13. Serialization and deserialization of fabric.js

23-CSS3 Free Video Tutorials (31 episodes)

1. Marry han marry Han dress and eat

2. Overview of new FEATURES and browser support for CSS3

3. CSS3 pseudoclass selector 1

4. CSS3 pseudo-class selector 2 structure pseudo-class selector

5. Range of pseudo element

6. CSS3 draws circles with border-radius

7. CSS3 draw triangles and dialog boxes

8. CSS3 draw a diamond and a paralleling quadrilateral

9. Draw five-pointed stars and six-pointed stars

10. CSS3 draws five-pointed stars and six-pointed stars

11. CSS3 draws hearts and eggs

12. CSS3 draws the Yin and Yang diagram of Tai Chi

13. CSS3 makes transparent background layer

14. CSS3 Color mode (1)

15. CSS3 color mode (2) – example imitation tmall goods display effect

16. CSS3 linear gradient

17. CSS3 radial gradient radial radial-gradient

18. CSS3 repetitive gradient

19. CSS3 Box shadow effect box-shadow

20. CSS3 Making slowly Lengthening squares

21. CSS3 Making slowly Lengthening squares

22. CSS3 timing-function attributes

23. CSS3 imitation Tmall special transition effect example

24. SS3 imitation Tmall category transition effect production

25. CSS3 animation @keyframes description

26. CSS3 animation compound properties explain

27. CSS3 animation synthesis instance production – content loading loading animation implementation

28. CSS3 Loading Animation example 2

29. CSS3 makes luminous characters, stereo characters, Apple fonts

30. CSS3 uses text-overflow to solve text typesetting problems

31. CSS3’s new font unit REM-final