CSS is a very unique language. It looks very simple, but a particular effect that looks simple is very difficult to implement. The purpose of this article is to share some new CSS tricks for kids on the front end, things that are not covered in front end tutorials and training classes. The second is to rekindle the love and enthusiasm for front end layout and special effects for those who are still in front end development. πŸ”₯

1. Fix the contents at the bottom

This is a very common layout, but a common problem for beginners.

This layout is common in background management systems. When the content is not high enough for the browser window, the bottom content needs to be fixed at the bottom. When the content goes beyond the height of the browser window, it is pushed back with the content.

Before CSS3, it was difficult to achieve this effect. The height of the browser window varies depending on how the user opens the browser, the difference in screen size, and the browser’s zoom ratio. We need JavaScript to get the height of the browser in real time. Although the title says “fix” the bottom, we don’t want position: fixed. Fixed positioning blocks our content when it is higher than the window height.

With THE advent of CSS3, the perfect way to do this is to use Flexbox. The key is to use the less noticed Flex-grow attribute, which can be used in our content tag elements, such as div. In our example below we use the main tag.

Let me show you how it works.

Flex-grow is used to control how much space a Flex element can expand relative to its peer flex element. If we used flex-grow: 0, the Flex element would not expand at all. So we need to set the content tag element between the header and bottom to either Flex-grow: 1 or Flex-grow: Auto so that the content section automatically fills all the space except the header and bottom.

To prevent the bottom content from being expanded in the content section, we give the flex-shrink: 0 attribute to the bottom element of the footer. Flex-shrink is the opposite of flex-grow, which controls the size of flex elements. Here flex-shrink: 0 is given to ensure that the bottom footer size is not affected.

Let’s go straight to the HTML and CSS code and see how this works.

  • HTML
<div id="document">
	<nav>
		<h1>The head content</h1>
	</nav>
	<main>
		<p>You can add more content and see the changes at the bottom!</p>
	</main>
	<footer>
		<h1>At the bottom of the content</h1>
	</footer>
</div>
Copy the code
  • CSS
#document {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: # 202020;
    font-family: microsoft yahei,wenquanyi micro hei,sans-serif ! important;
}

nav.footer {
    background: # 494949;
    display: flex;
    justify-content: center;
}

main {
    color: #bdbdbd;
    flex: auto;
}

footer {
    flex-shrink: 0; {} *margin: 0;
}

h1.p {
    padding: 15px;
}

nav > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px # 00000080;
}

footer > h1 {
    color: #82FCFD;
    text-shadow: 1px 1px 4px # 00000080;
}
Copy the code

🌟

  • Flex-grow – Controls how much space a Flex element can expand relative to its peer flex element
  • flex-shrink– with the roleflex-growIt is the opposite, used to control the space in which flex elements shrink

Preview the actual effect | GitHub source | like children’s shoes 🌟star thank you

2. Hover to enlarge image effects

Hover zoom is a particularly eye-catching effect that is often used for clickable images. When the user hovers the mouse over the image, it enlarges slightly.

It’s actually very simple to implement this effect. First we need a div to wrap around the IMG tag. This layer is used to hide the image so that when the image is enlarged, it does not exceed the width and height specified.

First, let’s talk about the div wrap properties. We need to give it a fixed width and height. Then we must give this element the overflow: Hidden attribute. Make the image zoom within the width and height of the div element. With this wrapper, we can write img effects.

My example uses transform: scale(1,1) as a hover effect. This transform is used to change the attributes of any element, and scale is used to enlarge (integers will enlarge) or shrink (negative numbers will shrink) the element.

Let’s have a look at the code:

  • In the HTML body
<div class="img-wrapper">
  <img src="https://img-blog.csdnimg.cn/2020032122230564.png"/>
</div>
Copy the code
  • CSS
.img-wrapper {
  width: 400px;
  height: 400px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0.0.0.0.6);
}

.img-wrapper img {
  height: 400px;
  -webkit-transition: 0.3 s linear;
  transition: 0.3 s linear;
}

.img-wrapper img:hover {
  transform: scale(1.1);
}

.img-wrapper {
  display: inline-block;
  box-sizing: border-box;
  border: 3px solid # 000;
}
Copy the code

If you want to make your image more cool, you can add the image filter to make the image gray or dark brown, and then hover with a more cool color change. The greyed properties are filter: Grayscale (100%); , and then the sepia attribute is filter: sepia(100%). In fact, the picture has a lot of filter attributes, we are interested in can also try oh!

The code to add the special effect is as follows:

  • HTML
<! -- Gray filter -->
<div class="img-wrapper">
  <img
    class="grayscale-img"
    src="https://img-blog.csdnimg.cn/2020032211021728.png"
  />
</div>

<! -- Dark brown filter -->
<div class="img-wrapper">
  <img
    class="sepia-img"
    src="https://img-blog.csdnimg.cn/2020032122230564.png"
  />
</div>
Copy the code
  • CSS
/* ==============* grayscale filtering * ==============*/
.grayscale-img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.grayscale-img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* ==============* dark brown filter * ==============*/
.sepia-img {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}

.sepia-img:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
}
Copy the code

🌟 Knowledge summary

  • Transform — Used to change elements
  • Scale – Zooms in and out of elements
  • Filter – Image filter
  • Grayscale — Grayscale filter
  • Sepia — Dark brown filter

Preview the actual effect | GitHub source | like children’s shoes 🌟star thank you

Instant Dark Mode

Recently, wechat has not escaped the arrival of the dark age, and many web pages have made compatibility and themes of the dark mode. What if we were working on a website that wanted to be in dark mode instantly?

A quick way to do this is to use the Invert and Hue -rotate CSS3 filters.

Filter: invert() — scale from 0 to 1, 1 from white to black. Filter: hue-rotate() – Used to change the color of your elements while keeping the color more or less the same. The value of this attribute can range from 0deg to 360deg.

By adding these two attributes to our page’s body TAB, we can quickly try to put our site into “dark mode”. Note that this filter will not work if the body and HTML colors are not set to background colors.

The CSS code is as follows:

html {
  background: #fff;
}

body {
  background: #fff;
  filter: invert(1) hue-rotate(270deg);
}
Copy the code

Implementation effectHere we can see that the color of the image is affected, it is not very beautiful, and it is not perfect to switch the dark mode using CSS filter. However, the dark mode can be switched perfectly with JavaScript assistance.

A JavaScript helper plugin called darkmode.js has recently been released.

πŸŒ“ Darkmode. Js

Darkmode.js also uses a CSS feature called mix-blending-mode — “CSS attributes describe how the content of an element should be blended with the content of its immediate parent and the background of the element.” Add Javascript to help determine which elements on the page need to be blackened and which don’t. As we did before, other elements that don’t need to be blackened, such as images, will be affected and the color will be wrong.

Using darkmode. js is as simple as adding the following code to the script to add a plug-in immediately,

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>
  // These are the configurable items of this plugin:
  var options = {
    bottom: "32px".// Locate the bottom distance - default: '32px'
    right: "32px".// Locate the right distance - default: '32px'
    left: "unset".// Locate the left distance - default: 'unset'
    time: "0.5 s".// Default animation time: '0.3s'
    mixColor: "#fff".// The color to change - default: '# FFF '
    backgroundColor: "#fff".// Background color - default: '# FFF '
    buttonColorDark: "# 262728".// Button color in dark mode - default: '#100f2c'
    buttonColorLight: "#fff".// Button color in daytime mode - default: '# FFF '
    saveInCookies: true.// Whether to save the current mode in cookie - default: true,
    label: "πŸŒ“".// Switch mode button icon - default:"
    autoMatchOsTheme: true // Whether to automatically adapt mode based on the system - Default: true
  };

  let darkmode = new Darkmode(options);
  darkmode.showWidget();
</script>
Copy the code

If you don’t want to use the plugin’s default buttons, you can control them in your JavaScript code. You can switch modes using the.toggle() method, and use the.isactivated () method to check if you have entered dark mode.

const darkmode =  new Darkmode();
darkmode.toggle();
console.log(darkmode.isActivated()) // Returns true if dark mode has been entered
Copy the code

🌟 Knowledge summary

  • Filter: invert() – You can change the page from white to black or from black to white.
  • Filter: hue-rotate() – Used to change the color of your elements while keeping the color more or less the same.
  • Darkmode.js – achieve Darkmode instantly.

Invert mode Darkmode: preview actual effect | GitHub source | like children 🌟star δΈ‹ thank you darkmode. js Darkmode: preview actual effect | GitHub source | like children 🌟star δΈ‹ thank you

4. Customize list symbols

ul.liThe unordered list has a default symbol,But in many cases we want to be able to add our own styles and colors to the symbol, or even change it to a custom symbol. We can’t do any styling for the default symbols, and there are only a few options available for the default symbols in the CSS properties, which in many cases don’t fit our design.

It is not difficult to customize the unordered list notation by using the pseudo-element ::before plus the content attribute.

In my example, I made two lists of tasks, one for to-do and one for completed, and gave them different symbols and colors.

Realize the principle of

List-style: None; list-style: none

βœ” Add content value to li’s :before pseudoelement, use πŸ—Ή for pending tasks, li.completed:before for completed tasks

Third, I gave li and Li. completed two different colors in order to show the better results

To see how it is implemented:

HTML

<div>
  <h2>To be processed</h2>
  <ul>
    <li>Todo Task 1</li>
    <li>Todo Task 2</li>
    <li>Task 3</li>
    <li>Task 4</li>
    <li>Task 5</li>
  </ul>
</div>
<div>
  <h2>Has been completed</h2>
  <ul>
    <li class="completed">Complete Task 1</li>
    <li class="completed">Complete Mission 2</li>
    <li class="completed">Complete Mission 3</li>
  </ul>
</div>
Copy the code

CSS

ul {
  list-style: none;
  color: #fff;
  font-size: 20px;
  border: 3px solid # 000;
  padding: 1rem 2rem;
  min-height: 200px;
  margin: 15px 2rem 0 0;
  background: # 323232;
  box-shadow: 0 1px 4px rgba(0.0.0.0.6);
  border-radius: 8px;
}

li {
  padding: 0.3 rem 0;
}

li::before {
  content: "πŸ—Ή";
  color: aqua;
}

li.completed::before {
  content: "βœ”";
  text-decoration: none;
  color: greenyellow;
}

li.completed {
  text-decoration: line-through;
  color: #bdbdbd;
}
Copy the code

::before and ::after pseudo-elements with content attributes can be used for many special effects and are common “magic” in contemporary front-end typography. Speaking of the use of pseudo-elements, let me give you a more common use scenario.

Breadcrumb navigation, often seen in admin background or article presentation, also uses pseudo-elements to insert symbols in the middle of each directory.

Implementation logic

First, add a pseudo-element ::after to each a tag, and then insert the/symbol in the content property.

Second, use a:first-child. The pseudo-class selects the first A tag and adds the Β» symbol using the Content attribute.

3. Since we first inserted the/after each A tag, we need to clear the last A tag. Here we use: last-Child to select the last A tag, and then use the Content: “” attribute to clear out the pseudo-class.

HTML

<div class="breadcrumb">
  <a>Three drill</a>
  <a>The front end</a>
  <a>The tutorial</a>
</div>
Copy the code

CSS

.breadcrumb {
  font-size: 1.6 rem;
  color: #fff;
}
.breadcrumb a:first-child {
  color: #82fcfd;
}
.breadcrumb a:first-child::before {
  content: "Β»";
}
.breadcrumb a::after {
  content: "/";
  color: #ef6eae;
}
.breadcrumb a:last-child::after {
  content: "";
}
Copy the code

🌟 Knowledge summary

  • : : before | : : after – pseudo element is used to add special effects to some selectors.
  • Content — THE CSS property is used to insert content in the ::before and :: After pseudo-elements of the element. Content inserted with the Content attribute is an anonymous replaceable element.
  • :first-child – CSS pseudo-classes represent the first element in a set of sibling elements.
  • :last-child – THE CSS pseudo-class represents the last child of the parent element.

Custom unordered list: preview actual effect | GitHub source | like children’s shoes 🌟star about thank you bread crumb navigation: preview actual effect | GitHub source | like children’s shoes 🌟star about thank you

5. Image parallax effect

This super cool effect is very popular in the official website, this effect can bring visual impact to users, but also bring vitality to our website. Normal web images slide along the page, but the visuals are stuck at the bottom, and only elements in the window that the image is in move.

Only use CSS

You are right, this effect only need to use CSS can be easily implemented! We simply use a CSS background property called background-Attachment: Fixed, which will fix the background relative to the viewport. Even if an element has a scrolling mechanism, the background does not scroll with the content of the element.

Realization theory:

Add background: URL () and background-size: cover (background-size: cover) to the element containing the image.

Background -attachment: fixed

Finally, give this element a height of 100% or any height of 400px

It’s that simple! No doubt, immediately on the code, everyone can try oh!

HTML

<div class="wrapper">
   <div class="parallax-img"></div>
   <p>Just fill in a bunch of text here, as much as you can</p>
</div>
Copy the code

CSS

.wrapper {
  height: 100wh;
}
.parallax-img {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
p {
  font-size: 20px;
  padding: 1.5 rem 3rem;
  min-height: 1000px; // If you don't have enough text, you can still get enough height to see the effect, but if you have enough text, you don't need it.Copy the code

If you want to achieve the same effect as in my GIF, or to see how it works, you can check out the summary below under “Preview the actual effect” or “GitHub source code”.

🌟 Knowledge summary

  • Background-attachment: fixed — Fixed the background relative to the viewport. Even if an element has a scrolling mechanism, the background does not scroll with the content of the element.
  • Background-size: cover — Allows the image size to be automatically adjusted and the full image to be displayed on a large screen.

Preview the actual effect | GitHub source | like children’s shoes 🌟star thank you

Use CSS + JavaScript

Some children may not be impressed by this or find it not exciting enough. Let’s do another advanced example where the image is fixed when sliding. With the help of JavaScript, we can make the image of the window slide slowly along the page, making the effect more dynamic and impactful.

The implementation theory starts with typography, because we need to use JavaScript to offset the image as we slide, so we need to give the image a CSS property that allows us to move the image up and down depending on the speed. In this example we have all the images wrapped in a div class called block. This div gives the relative position: relative attribute. In this case, we can add the image and position: Absolute inside the div box.

But images can be large, and we need to keep them within the box we define, so our div also gives overflow: hidden and a height: 100%. The image is hidden outside the div box.

The layout code is as follows:

<div class="block">
  <img
    src="https://unsplash.it/1920/1920/? image=1005"
    data-speed="1"
    class="img-parallax"
  />
  <h2>Parallax velocity minus 1</h2>
</div>
<div class="block">
  <img
    src="https://unsplash.it/1920/1920/? image=1067"
    data-speed="1"
    class="img-parallax"
  />
  <h2>Parallax velocity 1</h2>
</div>
Copy the code
html.body{
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Amatic SC', cursive;
}
.block{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-size: 16px;
}
.block h2{
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10vw;
  color: white;
  font-weight: 400;
}
.img-parallax {
  width: 100vmax;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%.0);
  pointer-events: none
}
Copy the code

Implement this layout so that images don’t move when you swipe. Because the last step is to add JavaScript assistance to make the image come alive.

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// Loop through each image element
$(".img-parallax").each(function () {
  var img = $(this);
  var imgParent = $(this).parent();
  function parallaxImg() {
    var speed = img.data("speed"); // Get the offset speed set for each image
    var imgY = imgParent.offset().top; // Get the Y position of the picture box
    var winY = $(this).scrollTop(); // Get the current slide position
    var winH = $(this).height(); // Get the browser window height
    var parentH = imgParent.innerHeight(); // Get the inside height of the picture box

    // The position at the bottom of the browser window
    var winBottom = winY + winH; 

    // Whether the current image enters the browser window
    if (winBottom > imgY && winY < imgY + parentH) {
      // Calculate the position where the image needs to start moving
      var imgBottom = (winBottom - imgY) * speed;
      // Calculate where the image needs to stop moving
      var imgTop = winH + parentH;
      // Get % of movement from start to end (based on start and end pixels + movement speed)
      var imgPercent = (imgBottom / imgTop) * 100 + (50 - speed * 50);
    }
    img.css({
      top: imgPercent + "%".transform: "translate(-50%, -" + imgPercent + "%)"}); } $(document).on({
    scroll: function () {
      parallaxImg();
    },
    ready: function () { parallaxImg(); }}); });</script>
Copy the code

🌟 Knowledge summary

  • Position: relative – Relative position.
  • Position: Absolute – Absolute position.
  • Overflow: Hidden – If needed, the content will be clipped to fit the fill box. Scroll bars are not provided.

Preview the actual effect | GitHub source | like children’s shoes 🌟star thank you

6. Crop the animation of the image

Cropping the image implementation before CSS3 is also quite difficult. We now have two very convenient and simple CSS3 properties that can be clipped, namelyobject-fitandobject-positionThese two properties allow us to change the size of the image without affecting its aspect ratio.

Of course, we can use picture processing tools or use JavaScript and other plug-ins to achieve picture cropping function. But with CSS3 properties, we can not only crop, we can also use the cropping properties to do the dynamic effect of the image.

To make our example simpler, we use the checkbox element so that we can use the: Checked pseudo-element to trigger the launch effect. So in this example we don’t need JavaScript at all.

Implementation principle:

First, give the image a width of 1080px, width of 1920px.

2. Then lock the img tag with a CSS selector when the input is selected. When selected, give the image a new width and height. Here we give 500 pixels each width: 500px and height: 500px.

Transition: width 2s, height 4s; .

Finally, add the object-fit: cover and object-position: left-top attributes to maintain the width and height ratio of the image, and you’re done!

Let’s look at the finished code:

Check crop picture<input type="checkbox" />
<br />
<img
  src="https://img-blog.csdnimg.cn/2020032122230564.png"
  alt="Random"
/>
Copy the code
input {
  transform: scale(1.5); /* just to enlarge the checkbox size */
  margin: 10px 5px;
  color: #fff;
}

img {
  width: 1920px;
  height: 1080px;
  transition: 0s;
}

/* CSS selector locks the status of the checkbox when it is checked */
input:checked + br + img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  object-position: left-top;
  transition: width 2s, height 4s;
}
Copy the code

🌟 Knowledge summary

  • The object-fit – CSS attribute specifies how the content of the replaceable element should fit into the box determined by its use of height and width.
  • Object-position – Used to toggle the alignment of the content object of the element to be replaced within the element box.
  • Transition – You can define different transitions for an element as it switches between different states.

Preview the actual effect | GitHub source | like children’s shoes 🌟star thank you

7. Blend

For those of you who have used Photoshop, yesblendBlend mode should be very familiar, we all know that blend mode is very powerful, and is a very common feature in photoshop. But have you ever imagined using CSS directly in a browser? Yes, we don’t need a designer to draw a picture for us, and our front end can also achieve hybrid mode.

In CSS, we can add blending mode to not only the background, but to the background of any element, allowing you to do a lot of effects and typography that you haven’t thought of before.

To add blend mode to an element, use a CSS attribute called mix-blending-mode.

Simple implementation principle:

First we just need to add an H1 header tag

<h1>Blend mode: Color dodge</h1>
Copy the code

We added color-dodge to the mix-blending-mode for the h1 tag, but note that we need to add background: white to the body and HTML, otherwise you will find that this effect will not work. Since h1 is not given a color, it will be automatically inherited from the higher level, and the blending mode is filtered for the background color, so the body and HTML need to have a background color.

h1 {
   mix-blend-mode: color-dodge;
   font-family: yahei;
   font-size: 5rem;
   text-align: center;
   margin: 0; 
   padding: 20vh 200px;
   color: #D1956C;
 }

 html.body {
   margin: 0;
   background-color: white;
 }

 body {

   background-image: url(https://images.unsplash.com/photo-1505567745926-ba89000d255a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=cr op&w=3302&q=80);
   background-repeat: no-repeat;
   background-size: cover;
   min-height: 100vh;
   overflow: hidden;
 }
Copy the code

Changing the font color of the background image and the H1 tag creates a variety of different effects.

🌟 Knowledge summary

  • Mix-blending-mode – The CSS property describes how the content of an element should be mixed with the content of the element’s immediate parent and the background of the element.

Preview the actual effect | GitHub source | like children’s shoes 🌟star thank you

8. Waterfall flow layout

CSS Grid and Flexbox make it easier, easier and faster to implement a wide variety of responsive layouts, and allow us to quickly and easily implement landscape and vertical play in layouts. But it’s hard to think back.

While these new layouts allow us to solve many of the previous layout challenges, a waterfall layout, for example, cannot be easily implemented. Because waterfall flows are generally of the same width, but the height is adaptive based on the image. And the position of the picture is also based on the position of the picture above.

In fact, the best way to achieve waterfall layout is to use CSS column properties suite, most of which are used to layout columns of text in magazines. But it’s also especially useful for laying out waterfall flows. Since waterfall flow used to require JavaScript to calculate the height of the image and determine the location and position of each image, column properties can now be implemented using pure CSS.

Implementation principle:

To implement this layout, the first thing we need to do is wrap all the content inside a div element, and then give that element column-width and column-gap attributes.

Then, to prevent any elements from being split between the two columns, column-break-inside: avoid is added to each element.

The magic is perfectly realized, zero JavaScript.

Let’s look at the code:

<div class="columns">
  <figure>
    <img src="https://source.unsplash.com/random?city" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?night" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?developer" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?building" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?water" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?coding" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?stars" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?forest" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?girls" alt="" />
  </figure>
  <figure>
    <img src="https://source.unsplash.com/random?working" alt="" />
  </figure>
</div>
Copy the code
.columns {
  column-width: 320px;
  column-gap: 15px;
  width: 90%;
  max-width: 1100px;
  margin: 50px auto;
}
.columns figure {
  display: inline-block;
  box-shadow: 0 1px 2px rgba(34.25.25.0.4);
  column-break-inside: avoid;
  border-radius: 8px;
}
.columns figure img {
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  border-radius: 8px;
}
Copy the code

🌟 Knowledge summary

  • Column-width – The CSS property suggests an optimal column width. The column width is the maximum width before adding another column in front of it.
  • Column-width – This CSS property sets the size of the gutter between the columns of an element.
  • Column-break-inside – Sets or retrieves whether the object is broken internally.

Preview the actual effect | GitHub source | like children’s shoes 🌟star thank you

conclusion

I hope these 8 front-end tricks and effects have helped you absorb some of the new front-end knowledge. In fact, many of the contents mentioned in this article are worth digging and learning. There are some examples that I’ve done very simply, but the possibilities are infinite. Like the front end of the children’s shoes, let us continue to dig together in the front end of the field, let our love infinite burning up!

In the end, I would like to tell you my love and attitude towards the front end.

Looking back on the front end of the past few years, the development is really a rapid progress, from the front end typesetting, HTML5+CSS3 do H5 pages, to the front end componentization, a variety of UI frameworks fly everywhere.

At the beginning, I used the UI framework with the craze. At first, I thought it was very convenient. When I came to a new project, I used the UI framework directly, and the development speed was also very fast. But over time, front-end development became more about processing data, docking interfaces, and interaction.

One day while reading some foreign front-end designs and frameworks, I suddenly realized that most of the front-end developers in China don’t use CSS3 to make some interesting layouts and special effects any more. Now the system and page on the market are all the same, generally using some well-known UI framework to build the system and APP, basic diy typesetting has been very few. The front end is no longer the front end, without soul.

But let’s think back to when we first started learning about the front end, what made us feel most accomplished, what made the front end so much fun. The kind of layout, effects, and interactions that make us wonder, wonder, and wonder. The feeling that we had succeeded in creating beautiful, cool pages and special effects kept us excited and excited.

However, in some companies, the R&D department is required to develop quickly, and the UI design department is also controlled and limited by time, so it gradually enters the UI framework. Design and develop systems and applications around these UI frameworks.

As a developer who loves the front end, I still do the layout and implementation of page interaction effects myself on most projects. The UI framework is then used as an aid, mainly to ease the quick implementation of small components and commonly used components. (I can say that I am a programmer of the association for perfectionism and appearance πŸ˜‚)

Good article recommendation

  • πŸ”₯ “VSCode commonly used shortcut keys encyclopedia | VSCode senior players of the first book” — so for a good programmer, a good code editor can play a great role in the development process can bring us a lot of convenience, help, efficiency and influence. Even a good editor can bring a greater sense of joy to daily programming.
  • πŸ”₯ 7 Benefits of Learning to program for those of you who want to and are learning to program — Choosing to learn to program can be life-changing. Maybe a lot of people learn to program at first and sign up for a programming class in order to get a higher salary or a better working environment. Finally stick to stick to, we will find that programming will also bring us a lot of personal ability and skill improvement.
  • πŸ”₯ 5 Rules to Be a Better Developer — This article teaches us 5 rules to be a better developer, how to stand out from the crowd, and how to help us in our tech careers.
  • πŸ”₯ “Write Better Code with the principle of” Easy to Adapt “– novice and experienced developers alike often ask the question,” How to write good code?” To know how to write good code, we first need to know what good code is. You must have a clear goal in order to know how to achieve it. The “ETC Principle” mentioned in The “How to Be a Programmer” — the easy to adapt Principle. This principle seems simple, but the more we think about it, the more we realize that simplicity is not simple.