Write in front:

From last October, Ma Yun set up Alibaba Dharma Courtyard, to September 28 this year, the official website of The Dharma Courtyard was officially launched. As a person engaged in the Internet industry, most of them will go to the official website of Dharma Institute to see. This article is a simple and rough evaluation of the official website of Dharma Institute from the perspective of the front end, counting the points in detail, and extract some code skills that can be used for reference and thinking as the front end. Write experience report for the first time, think of what to write what, personal Angle or one-sided, inadequate, or you have a better opinion, welcome to exchange in the message. Of course, I hope that some students of Dharma Academy can read my simple assessment article and fix the bugs and optimization in the website of Dharma Academy described in the article.

I. Initial experience

1.1 the domain name

PC: https://damo.alibaba.com/

Mobile client: https://m.damo.alibaba.com/

1.2 Page Layout (directly above)

PC



The mobile terminal



The overall design style is Chinese style and simple sense of science and technology. The Chinese style is clear mainly through the ink (mountain) background picture. The sense of science and technology is a lot of solid colors (dark blue with slight gradient).


Two, small test knife

2.1 Page load time

Clear the browser cache, open the console, and refresh the page to obtain the following information (environment: Personal home Network Google Chrome), which shows that the site is rendered on the server side

1, the number of requests (requests) : 0/42 2, and the size of the transfer of resources (transferred) : 15.8 M 3, all requests (finish) : 3.09 S 4, DOM tree is built (DOMContentLoaded) : 558 ms 5, page loaded (Load) : 3.09 sCopy the code

Console. log () is not removed from the console. If you are interested in the data, you can read it by yourself



2.2 Page code structure

The swiper component is used in the News Feed, and CNZZ is also added to the rear of the console



2.2 Page Caching

CNZZDATA, UM_distinctid, SCA: CNZZ

2. Cna: Each Ali website will have the COOKIE of CNA, which is cross-top-level domain name. I guess this cookie is used to identify devices

Client_lang, of course, only appears when you switch languages

.





Three, the front end of the circle point

Here is the climax of this article, the first suppression and then raised the routine to a wave, first talk about personal as the front of the point of view about the “Bug” of the Website of Dharma Hospital and I think the design can be optimized a little bit, the following sneak peek

Note: Test time is 2018/09/29

3.1 Bug discovery and design optimization

3.1.1 (Bug) Navigation mouse pass event, a pixel white border appears under the column of “Lab” (you need to experience it on the official website)



Find the code, actually caused by the brother in the picture below, when the mouse moves over, the display state here changes



3.1.2 (Optimization) I think a click event should be added to the Logo in the middle of navigation. The same is true for mobile terminals, which can jump to the home page. At present, there is no click event on either PC terminal or mobile terminal

<div class="middle"><img class="top-logo" src="/_pc/css/img/top-logo-en.png"></div>
Copy the code

3.1.3 (Optimization) Navigation of the final CN, the home page is expected to be able to click to switch languages, of course, the sub-pages are OK, can switch languages (fixed)



3.1.4 (optimization) Rote map. This mouse can be clicked when placed on it, but it can be placed within a very small range



3.1.5 (optimization) About compatibility problem, open IE (default 11), cough, it seems that the font is lost, oh oh, there is also a round cast graph, what’s going on



Of course, continue to test, IE9 is cool (below), probably compatible with IE10 and above



3.1.6 (optimization) Home page and sub-page rotation map, 2M large picture, loading time (3s+) until you are a little suffocated






3.2 Mining the front end is worth exploring


3.2.1 navigation

Highlights: Center the logo, on both sides of the navigation column, scroll and shrink the navigation, adapted to the mobile terminal

On the official website, the navigation is cut in half, with three divs on the left, middle and right, and the logo in the middle div. Personally, if the number of navigation can be determined, the nTH-Child space can be used to leave the logo. The following is the part related to the layout and style that I wrote roughly (no specific style is adjusted, complete code).

<template>
  <div class="header_bg">
      <div class="header">
        <div class="logo">
          <a href="/"><img src=".. /assets/top-logo-en.png" alt="" /></a>
        </div>
        <nav class="navbar-default">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle">
            </button>
          </div>
          <div class="navbar-collapse">
            <ul class="navbar-nav">
              <li class="act" v-for="item in navdata"><a><p class="c-title">{{item.cTitle}}</p><p class="e-title">{{item.eTitle}}</p></a></li>
              <li><a>CN</a></li>
            </ul>
          </div>
        </nav>
      </div>
  </div>
</template>

<script>
  export default {
    name: ' ',
    components: {},
    data() {
      return {
        navdata:[
          {"cTitle":"Home page"."eTitle":"HOME"},
          {"cTitle":"实验室"."eTitle":"Laboratories"},
          {"cTitle":"Cooperative ecology"."eTitle":"Collaboration"},
          {"cTitle":"News In progress"."eTitle":"Events"},
          {"cTitle":"Join us."."eTitle":"Careers"},
          {"cTitle":"About us"."eTitle":"About Us"}
        ]
      }
    },
    methods: {}
  }
</script>Copy the code

&:nth-child(1) {
   margin-left: 1/18 * 100%;
 }

&:nth-child(4) {
   margin-left: 3/18 * 100%;
 }Copy the code

General effect (” Pinduoduo Edition “)



3.2.2 Background filter effect of rotation image

The filter property is used



.background {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: none;
    background-size: 100% 100%;
    -webkit-filter: blur(70px);
    -moz-filter: blur(70px);
    -o-filter: blur(70px);
    -ms-filter: blur(70px);
    filter: blur(70px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='70');
}
Copy the code

3.2.3 News list

The Swiper plugin can help




3.2.4 Accordion panel expansion and contraction effect

I’m going to use the transition property



.item-active { background-image: none! important; width: 278px; padding: 0 22px; transition: width .8s,padding-left .2s,padding-right .2s; -ms-transition: width .8s,padding-left .2s,padding-right .2s; -moz-transition: width .8s,padding-left .2s,padding-right .2s; -webkit-transition: width .8s,padding-left .2s,padding-right .2s; -o-transition: width .8s,padding-left .2s,padding-right .2s; }Copy the code

An aside: Ali is because of the many programs apes, so our technology to you on the small problem will be more attention and care, of course, I wrote an article is a kind of communication and sharing of attitude, not hit a son but in front of the articles written, certainly hope have ali dharma school classmate see me this simple review article, I can fix the bugs and optimization in the website of Dharma Academy described in the article. I also hope it will be helpful to other front-end students