Get creative and DIY your browser home page

Develop and launch a geeky browser home page, so easy!

Hello everyone, I am Yu PI. Some time ago, I launched a browser homepage that programmers must have, which was well received by many students.

Address: home. Code – nav. Cn /

In fact, the project itself does not require complex technology, instead, only a little front-end foundation can be completed.

Below to share with you the complete production process and implementation principle of the project, finally teach you a click online their own project, quickly DIY your browser home page!

The preparatory work

1. Requirements analysis

Before you start a project, know your goals.

What I’m going to do is make a very simple browser home page. Firefox and Chrome also have good default tabs and some plugin homepages, but both have some limitations, such as no support for wallpaper switching and no ability to customize shortcut links.

I used to be a huge fan of KIM’s page, but I barely used the default links on the entire page. As a creator, I prefer my home page to be a variety of creative platforms, such as CSDN, Niuke, GitHub, etc. While it’s possible to go to KIM’s homepage to change the shortcut links, what’s more flexible than customizing your own homepage? And it doesn’t take a lot of work.

So what features should you add to the home page? Search comes first, then quick links. Everything else is just icing on the cake.

2. Product design

After confirming the goals and requirements, I need to design the page layout of the home page. As I am a programmer with low aesthetic and design ability, the page I made has been said to be ugly, so I refer to KIM’s home page for the whole design. I love and admire KIM’s home page design very much.

In fact, it is the same to do projects by yourself or in an enterprise. First, refer to existing projects and resources, learn their excellent points, and make improvements based on them.

3. Technical selection

After confirming the requirements and product design, we need to select the technology based on the functionality and interface design draft of the project, which programming language, framework, scaffolding, and even down to the class library to use. Good technology selection can greatly improve development efficiency.

For example, to make a browser home page, itself is a very small front-end project, so there is no need for heavy (large file) framework, you can directly choose the native HTML + CSS + JavaScript three pieces, with jQuery library to save code. You can also choose mainstream front-end frameworks, such as lightweight Vue and React, with a nice and elegant component library to flexibly implement page interaction and save the trouble of developing your own components.

Here I choose the main front-end framework React, because recently have been used more familiar, with React Static site development framework. As for the component library, I chose Ant Design of Ant Financial, which is popular. Moreover, the component supports multi-terminal self-adaptation, enabling the homepage to be browseable even on the mobile terminal. The navigation menu, drawer, button and other components provided can also meet my requirements.

In addition to developing the technology, figure out how your project will go live. Since the site has very little dynamically loaded data, some static web hosting services can be used, as discussed below.

4. Set up the Demo

Once you’ve identified the technology to use, you need to run a simple Demo project successfully locally. Try adding a button component to see if the component library has been successfully introduced. Then do a packaged build to verify that there are no problems with the environment and dependencies before proceeding to development.

Ready for development!

The development of implementation

It’s not possible to paste all of the source code into this article, and it doesn’t make sense, just to show you some key implementation ideas for developing a browser home page.

1. Basic interface

To develop any front-end project, we must first develop a basic interface, from whole to part, and disassemble the structure of the page from top to bottom.

Except for the button group, which is fixed in the bottom right corner, the other boxes are arranged from top to bottom, with some spacing.

2. Universal search

Universal search means that users can enter information from multiple different search engines only once.

The implementation principle is very simple, using the HTML tag, directly embed the entire Baidu or other search engines into the page, by defining the current variable to determine which search engine is currently used, through the searchText variable to determine the search content, Then concatenate the address of <iframe> as follows:

{
  current === "baidu" &&
  <iframe src={`https://www.baidu.com/s?wd=${searchText}`}
          style={{border: 'none', height: '100vh', position: 'fixed', zIndex: 1}} / >
}
{
  current === "bing" &&
  <iframe src={`https://cn.bing.com/search?q=${searchText}`}
          style={{border: 'none', height: '100vh', position: 'fixed', zIndex: 1}} / >
}
Copy the code

3. Switch between wallpaper

After completing the search function, I tried to beautify the entire home page, starting with the wallpaper switch. Choose different implementation methods for different types of wallpaper.

Static wallpaper

Static wallpaper is an image. Use the tag, set absolute positioning and display in full screen.

Dynamic wallpaper

Dynamic wallpaper is not a dynamic image (GIF, etc.), but the use of HTML5 Canvas Canvas technology to achieve interactive web pages. Each live wallpaper is a small independent project containing HTML, CSS, JS and other files that can be run directly in the browser.

Just use the tag to import these dynamic wallpaper pages.

Random wallpaper

Finally, in order to meet everyone’s special needs, but also made a random wallpaper function, there are several categories, every point, will randomly generate a new wallpaper!

Implementation principle is still very simple, the use of free botian API random wallpaper interface, completely do not have to climb the picture to do random!

In order to solve the browser cross-domain restrictions, but also the use of JsonBird free request proxy, will directly request random image address as a parameter splicing in JsonBird address on the line! The code is as follows:

await axios.get(`https://bird.ioliu.cn/v1/?url=${cover.api}`)
Copy the code

4. Theme switch

Finally, for better wallpaper appreciation, white background and transparent themes are supported, which can be dynamically switched.

Here I have defined two CSS files, one for a white background and the other for a transparent theme. When switching to a transparent theme, I simply add a class name to the outermost HTML tag as follows:

/* White-background CSS file */
.search-wrapper {
	background: white; /* White background */
}
  
/* Transparent mode CSS file */
.ghost .search-wrapper {
  background: transparent; /* Transparent background */
}
Copy the code

Outermost label, which determines the class name according to whether transparent mode is turned on:

<! Add ghost class name if transparent mode is enabled -->
<div className={ghostClose? ' ': ' ghost'} >
</div>
Copy the code

Of course, there are many different implementations and plug-ins for multi-themes, which are not the most elegant, but relatively straightforward.

The deployment of online

Once the project is complete, use the framework’s own commands to build all the files into a directory package. You can directly double-click the index.html file, or use serve to run the web page locally to view the effect.

If you want to publish a website, it’s very easy for others to enter the url and access it online. You can use the Vercel tool to publish with one line of command.

And if you want to make the website get faster access speed, the more recommended way is to use Tencent cloud static web hosting (or cloud hosting) services, is still a line of command, or even click the “one-button deployment button”, you can put the website online! Free space, fully adequate for study and small projects!

The last

The whole programming home page is like this, in the future will support more themes, more search engines, while continuing to improve the page and interactive effects, to give you a near perfect home page use experience.

All the code has been open source, has received nearly 200 stars, on today’s GitHub trend list!

Finally, I participated in Tencent cloud development competition, I hope you can help yu PI vote ❤️

Penultimate sixth “programming home page” author fish skin

Welcome to try my open source programming home page one-click deployment, can also help me increase the score of the competition, GitHub address.