Blur effect

Sometimes, we want to use front end skills to improve user experience, just like iPhone, you know, when Steven Jobs designed iPhone, he took all the details into account, especially the front end user experience. Blurred picture or background is one of them. It makes you feel all the control operations are real. In this blog I want to achieve this effect.

Basic Concept of Redux

I have seen lots of courses about Redux, only a small number of them that can be worthful, most of them are useless, even made me more confused. So I will write this blog in a different way. What's difference? Introduce the whole construction first! Redux is a technology, but also an idea of how to manage the whole situation.

Async operation in JS(4 methods)

As we all know, JS is a single thread coding language, because some limited of multithreading(Web Worker), the async method in JS is very important. For the most of time, we will use the async methods in the back end, so I just put this blog under the node branch.

Cancel all text selection of web page

In this blog, I just want to discuss some methods to cancel user selection in both Div cases and Input/Textarea cases. These two are different and also have many details we should be careful. Such as the select and onselectstart events, the selectStart and setSelectionRange methods, the compatibility in IE8- and so on.

Online Test project / React.js

I just designed and developed a small online test project by using React.js and JQuery Ajax. The idea of state transition and diff algorithm are amazing. I have learned React.js before, but using npm to create a react app is the first time. This project is easy to use and extend if you have the npm.

Small demo of reactjs

These days, I have learned something about reactjs, and took some demo classes online. So I just code some small demo by myself, hope to put it into practice. This demo is a BMI caculator, and I push it to the cloud application platform, you can click and see it online. Finally, thanks to the online teacher, I cannot find your name in the course site, so sorry for that.

Bullet screen / Canvas

It's just a common application or a function used in many video websites. Before Canvas, we often use CSS3 and JS, however, the more bullet texts, the screen will be more lagging, because we have to add more nodes into document. But now, the Canvas will solve this problem. And I also design a small case to show this easy skill, the Canvas bullet screen will be supported by IE9+, Chrome, Safari, Opera, Firefox, and also mobile devices.

How to monitor orientation of mobile devices

It is very significant to monitor the changes of mobile screen when you design or develop a web page for mobile devices. As we all know, the mobile phone will have totally different width and height of screen when changing its orientation, so sometimes it causes bad rendering of CSS and bad user experience. Therefore, the question of how to monitor orientation is very important for us. I will discuss three methods and their compatibilities.

A plane game for mobile devices

In order to increase the adaptability of mobile games and hail the thunder game, I spent one day developing a plane game for mobile devices. The amount of codes and pictures have improved greatly when compared to the previous one. Just try it! It's stunning. Your goal is to get 100 points

Just a small game for mobile devices

Tonight, I just want to test the Canvas game in mobile devices and how the "deviceorientation" event can work in different devices. This game coded for about 2 hours is simple and easy to play. Just move your mobile device to let the ball escape from lines.

Drop-shadow

In this blog, I want to introduce some cases and explanations of "drop-shadow". Maybe you are not familiar with it, hope these cases will help you.

Use "currentColor" to reduce your work

Before CSS3, if we want to change the color of a "div" and all its children elements, we have to rewrite all the codes of "color", "background", "border" and other attributes. It's often too troublesome. However, now we can use "currentColor" attribute to help us reduce some useless work.

Create 0.5px border used in mobile web pages

If you develop a web page for mobile phone, you will know, the "1px" border isn't look good, for the mobile screen is smaller when compared to computer screen. So as an old saying goes, where there is a need, there will be a supply. Smart coders just think about how to create "0.5px" border or make it more thiner.

An example of translateY used in online shop store

In this blog, I just want to imitate a simple but common used function in some online shop stores.

A Race Game based on Canvas

Before this game, I have not made a game with a running man, and now I know that all the actions of runner are formed by pictures. In order to practice how to code a running man controled by user, I also just take one day to code a small game, hope you will like it. If you want to see the source code, just click the right button of mouse.

Draw a Constitution Day Sale Coupon by using CSS3 gradient

In this blog, I want to use the radial-gradient and linear-gradient in CSS3 to draw a coupon. And show the power of these two attributes. Hope it will look nice.

The getComputedStyle and currentStyle, easy ? HEHE

Sometimes, we get some knowledge, and think we can do everything, we know everything, however, we often overlook our ability, maybe there are also lots of skills that you know but you cant control very well. For me, the "getComputedStyle" and "currentStyle" are good examples.

CSS3 Compatible Summary

I just want to keep a graph of CSS3 compatible grammar in mind. Usually, I tell myself, if I want my code more compatible, just do it, dont be lazy.

Great! I take just one day to make a Tower Defense Game based on HTML5 Canvas

Before that, I have made a small basketball game, but I just want to do something more complex and deeply, and I think the tower defense game would be nice and meaningful. So just do it and thx god, the result is stunning, I really like it even though it also has some shortcoming anyway.

3D Tranform in CSS3

When facing different situations, we should choose one of them, relatively the 3d transfrom of CSS3 could help us to solve some problem by using the less code, less DOM, but easy to control. And I'll give some examples to really understand the details of 3d transform...

A small basketball game based on HTML5 Canvas

In order to learn canvas more deeply, I just want to use it to build a small game, related to basketball, since I like it. :) It would be hard when something is done from the very beginning. However, let's do it!

How to build particle effects with Canvas

When you design a Canvas game, in most cases, you can finish it well without particle effects. However, it's not perfect. When you really want to achieve something, just make it perfect and flawlessness! Some effects are cherubic and amazing, why not use them to improve user experience? Particle effect is one of them. And it is also the most powerful function of Canvas which is totally different from "SVG" and CSS animation.

"var" in CSS

The "var" of CSS gives us a lot of advantages: convenience, code reuse and enhance the anti-error ability. But in most of the time, we don't need to use this method, because we can finish our work even without using "var" of CSS. But in a way, it really give us another way to improve our code.

Front end database : IndexedDB !

"IndexedDB is a way for you to persistently store data inside a user's browser. Because it lets you create web applications with rich query abilities regardless of network availability, these applications can work both online and offline."

Cookie and Web Storage

We typically use Cookie and Web Storage to store user information. Because sometimes we want to improve the user experience and reduce the workload of back end. As for this blog, I just want to conclude the difference between Cookie and Web Storage.

The difference between "nth-child" and "nth-of-type"

Today, I met a very embarrassed thing, when I did a small demo to help a junior sister apprentice test the assignment, I didn't use "id" and "class" because I just wanted to make it simple, so I used "nth-child" and "nth-of-type" instead. However, something didn't work, how can it be? I thought I knew how to use them, anyway, I was wrong. Now, I just want to write a blog to really discuss the difference between "nth-child" and "nth-of-type".

CSS Hack

When we use CSS, the most troublesome thing is the compatibility of the various browsers. The different browsers will get different results when analysing the same CSS codes. Therefore, if we want to get better compatibility, we have to use CSS Hack. There are three types of CSS Hack we use most common.

Structured pseudo class selectors

In this blog, I just want to discuss four kinds of structured pseudo class selectors in CSS. In some project, we can use them to help us reduce code lines and improve user experience. The content of this blog is easy to understand, come on!

Simulate progress bar of Google mailbox

Today, I noticed the progress bar of gmail was so great and fully energetic. So I'd like to simulate this function by using CSS3.

Draw icons by CSS3 methods

Without using CSS, how can we draw an icon on the web page? Picture. And we should use many kinds of pictures to match the different browsers, even we'll be in a fret when we cannot find a good way to manage those pictures and layouts. However, now we can use CSS to help us draw many icons used in common projects.

"arguments" in JavaScript

As we all know, there has a parameter which represents variables in JS function —— arguments. And when I was looking for something about "arguments", I found it was also a little bit complex, especially in some details. Therefore I would like to code some examples and also to write a blog to record them.

An essay(Chinese)

My essay, nothing interesting. I just want to remind myself, I was the best, I am the best, and I will be the best. I have to be the best, I must be best. There is no way back.

An example of browsing long pictures

Just imagine that we want to develop a webpage contains two columns, the left column shows some texts and the right one shows a long picture. And the function is when browsing the long picture, the left column won't move. It's very common in some online shopping websites, especially in some mobile terminals. So today I just want to use "scrollTop", "pageY" and some CSS attributes to implement this function.

Iframe height adaptive

For a long time, I have searched the internet and books for help, and they only told me how to write the codes of height adaptive, nothing helped. But thanks god, today when I was looking for the "contentDocument" attribute, I saw a very significant sentence about "iframe"...

Loading Animation

In this blog, I just want to try to develop some loading animations by using CSS3. Actually, when I was a freshman in college, I was so excited about loading animations for their beautiful and amazing effects. In that time, I haven't contacted with CSS3, so today I just want to realize this little dream.

Get pseudo element

When you use pseudo elements to create a variety of brilliant effects, have you ever thought about how to get them and change their attributes? Yep, the selectors such as "getElementById" and "querySelector" cannot help us. That means we should find another way. And in this blog, I will divide the problem into two parts, one is how to get the attributes, the other is how to change the value of attributes.

Responsive Picture

First of all, this is the blog which is translated from my Chinese blog written in 2016. So I also think this blog should belong to the 2016's blogs even I have changed some pictrues and words of it. This blog will discuss "picture" tag and "srcset" attribute.

Front End Picture Preview

Picture preview is a very significant function of front end development, especially if you want to contact with users directly and improve the user experience. And now we have two methods to achieve this effect. One is "FileReader" function, it's very easy to use and understand, the other is "window.URL".

Front End Picture Compression

When I developed a web project two years ago, our team could only use the thrid part to clip and compress the picture which users upload, in order to make the picture smaller and easy to be stored in the database. Actually, now we can use Canvas to help us to achieve this effect easily.

Bezier Curve Animation in SVG, Canvas and CSS3

Animation has a complex point —— Bezier curve animation. It's usually hard to understand. However, if you want to achieve some complex animation, you have to use it. Actually, it's easier than you thought. For the front end development, we have three methods to do the bezier curve: SVG, Canvas and CSS3. SVG and Canvas look the same, but CSS3 is a little bit different. Let's just see a conclusion first, and then I will show the details.

Awesome CSS Loading Animation

Actually, this is a past blog, I wrote it when I was a sophomore. But it achieves an awesome loading effect. I remember this blog is done after I saw Zhang xinxu's idea, in his blog, he used 8 labels to finish this effect and he also forgot the outer animation (He used the gif picture instead of CSS). So in this blog, I just finished this effect by using 4 labels without any gif. pictures.

Translucent border and Multiple border

How to create a translucent border? And how to create mutiple borders effect for a "div"? It's not comlex but contains some tips. Let's do it together.

Create Server("Get", "Post")

This blog will explain how to create a nodejs server, discuss the "Get" and "Post" requests simplicity. As we all know, the difference between "Get" and "Post" is that "Get" put the parameters in the URL, but "Post" has a request body. Therefore the most important thing is to get the content.

File Stream

In this blog, I just want to write some skills of read stream and write stream in node.js. And there are some cases and examples which are easy to understand, actually, the blog also contains some details that you might require.

Student Activity Management Web

This website was designed and finished as an entrepreneurship project by our team(7 team members). Our group took 5 months to finish this project, and I was the only one front-end developer so that I finished all these front-end pages. You can click on the link and watch the details of this project.