Editor on duty: Yuan Yuhan
1. 10 GitHub repositories that can’t be missed for front-end advancement
build-your-own-x
🤓 Build your own (insert technology here)
https://github.com/danistefan…
The repository covers 27 domains, each of which uses a specific language to implement a function. The figure below is related to the front-end domain:
JavaScript Algorithms
📝 Algorithms and Data Structures implemented in JavaScript with translation and links to further readings
https://github.com/trekhleb/j…
The repository contains a variety of Javascript based algorithms and data structures. Each algorithm and data structure has its own README, with instructions and links for further reading (as well as related videos).
30 Seconds of Code
Short JavaScript code snippets for all your development needs
https://github.com/30-seconds…
The repository contains a number of minimalist snippets of JavaScript code to meet your development needs. The following listenOnce function, for example, guarantees that the event handler will only execute once.
const listenOnce = (el, evt, fn) => { let fired = false; el.addEventListener(evt, (e) => { if (! fired) fn(e); fired = true; }); }; listenOnce( document.getElementById('my-btn'), 'click', () => console.log('Hello! ')); // 'Hello! ' will only be logged on the first click
Node Best Practices
✅ The Node.js best practices list
https://github.com/goldbergyo…
The repository describes best practices for Node.js applications, including the following:
RealWorld example apps
“The mother of all demo apps” — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, And many more 🏅
https://github.com/gothinkste…
For most of the “Todo” examples, they provide a brief overview of what the framework can do, but they do not provide a complete overview of the knowledge and perspective needed to build a real application using the framework and associated technology stacks.
RealWorld solves this problem by allowing you to choose any front-end framework (React, Vue, Angular, etc.) and any back-end framework (Node, Go, Spring, etc.) to drive a real, well-designed, full-stack application “Conduit”. The following is the supported front-end framework (with a lot of content, but only part of the content) :
clean-code-javascript
🛁 Clean Code concepts adapted for JavaScript
https://github.com/ryanmcderm…
The repository shows how to write clean JavaScript code, such as the author’s suggestion to use retrievable names:
bad
// What is 86400000 used for? setTimeout(blastOff, 86400000);Okay
// Use a simple, easy-to-understand constant to describe the value const MILLISECONDS_IN_A_DAY = 60 * 60 * 24 * 1000; / / 86400000; setTimeout(blastOff, MILLISECONDS_IN_A_DAY);The warehouse contains 11 aspects, and the specific directory is shown in the figure below:
javascript-questions
A long list of (advanced) JavaScript questions, and their translation ✨
https://github.com/lydiahalli…
This repository contains JavaScript knowledge from the basic to the advanced. Using this repository you can test your knowledge of JavaScript and help you prepare for interviews.
awesome-design-patterns
A curated list of software and architecture related design patterns.
https://github.com/DovAmir/aw…
The repository contains a select list of software and architecture-related design patterns. In software engineering, Design Pattern is a solution proposed to various common (recurring) problems in software Design. The term was introduced into computer science from the field of architectural design in the 1990s by Erich Gamma and others.
developer-roadmap
Roadmap to becoming a web developer in 2021
https://github.com/kamranahme…
The repository contains a set of charts that show the learning road map for becoming a Web developer. The repository contains front-end, back-end, and DevOps learning roadmaps. Here we will only cover the front-end learning road map (the original image is a long one, but only parts of it are shown here) :
Free Programming Books
6. 📚 Freely available programming books
https://github.com/EbookFound…
The repository contains a list of free learning resources in many languages. The following figure is the list of free learning resources in Chinese (with a lot of content, only part of the content is cut) :
— Author: Po Ge
2, instantclick.js plug-in, let web pages preload, website without refreshing jump page **
code
index.htm
<! DOCTYPE HTML >< meta charset="utf-8"> < HTML >< head> </title> <script SRC ="instantclick.min.js"></script> <style type="text/css"> #instantclick-bar { display: none; } </style> </head> <body> <div> <h2><a href="page.php? Url = baidu "> baidu once, you'll know < / a > < / h2 > < h2 > < a href =" page. PHP? </ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b ></ b > </div> ></ div> ></ div> data-no-instant> instantclick.init (); </script> </body> </html>page.php
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body style="margin:0;" > <? php header("Content-type:text/html; charset=utf-8"); If ($_GET [" url "] = = 'transition') {echo "< title > baidu < / title >"; Echo "<h1> "; echo "<h1> "; echo "<h1> "; echo "<iframe src='http://www.baidu.com' style='width:100%; height:100%; position:fixed; ' frameborder='0'></iframe>"; } else if ($_GET [" url "] = = 'taobao') {echo "< title > taobao < / title >"; Echo "<h1> Hello, I'm Jack Ma </h1>"; echo "<iframe src='http://www.taobao.com' style='width:100%; height:100%; position:fixed; ' frameborder='0'></iframe>"; } else if ($_GET [" url "] = = 'qq') {echo "< title > tencent < / title >"; Echo "<h1> "; echo "<h1> "; echo "<iframe src='http://www.qq.com' style='width:100%; height:100%; position:fixed; ' frameborder='0'></iframe>"; }else{echo "<h1>... </h1>"; }? > </body> </html>How to use
In fact, it is very simple, just need to import the plug-in’s JS page, and then initialize it. Here is the file we want to import.
<script src="instantclick.min.js"></script>
Then, add this sentence before the </body> tag of the site
<script data-no-instant>InstantClick.init(); </script>This way, your site can also quickly access the non-refresh feel of preloading technology!
website
Go directly to the official website to download the production version of JS plug-in!
link: http://instantclick.io/
— Author: THANKING
3. Use CSS Scroll Snap to optimize scrolling and improve user experience!
Making address: https://github.com/qq44924588…
How often do you want a CSS feature that makes it easy to create a scrollable container? CSS scroll snap does that. In the early days of front-end development, I relied on JS plug-ins to create slider components. Sometimes we need an easy way to quickly make elements into scrollable containers. Now, thanks to CSSS scroll snap, we can do this very easily.
Why use CSS Scroll Snap
With the rise of mobile and tablet devices, we need to design and build components that can be touched lightly. Take the gallery component as an example. Instead of a hierarchical structure, users can easily swipe left or right to see more images.
According to the CSS specification, providing developers with a well-controlled scrolling experience was one of the main reasons for introducing CSS scroll snap. It enhances the user experience and makes it easier to implement the scrolling experience.
– the author: Ahmad | translator: front end little wisdom
CI/CD platform migration practice: Move from Travis-CI to GitHub Action
Recently, we migrated CI from TravisCI to GitHub Action due to a number of deployment errors and the fact that our account had exceeded the free usage limit due to heavy usage.
Project introduction
The Translate Project is a major collaboration of the LCTT Translation Group, where hundreds of translators use GitHub to Translate articles around open source, Linux, software engineering, and more. Since 2013, a large number of submissions have accumulated, resulting in a large number of files under the Project.
Translate Project uses CI to help translators check basic text formats and pull requests; And regular execution of the command, to carry out all the application check, for the overtime did not complete the translation of the work for recovery; The status of the article is marked and the corresponding badge is generated.
Migration way of thinking
The overall difference in usage between Travis CI and GitHub Action is not that great, as both write configuration files based on the YAML file format. However, unlike Travis CI, GitHub Action supports multiple profiles, so you can configure different profiles for different scenarios, reducing the complexity of a single configuration file.
In addition, since our script relies on some Travis CI environment variables, we also need to replace them with the corresponding environment variables in GitHub Action to make sure the script works.
Reforming practice
1. Analyze the previous CI process
Our CI profile on TravisCI is shown here
The whole thing can be divided into three parts:
- Command area: Indicates what is done during the installation phase and the execution phase
- Condition area: Specifies the conditions under which this profile will take effect
- Deployment area: Does it specify how build artifacts are deployed
In the command area, there are preset installation procedures and subsequent execution procedures. During the installation process, some dependencies are installed and the current Pages resource is cloned locally to inherit the data generated from the last build.
In the condition section, only the master branch is specified
In the deployment area, the result of the previous command area is deployed.
In the actual execution process, it will decide whether to execute specific commands according to different environment variables. This part can be adjusted and split into different files in the subsequent transformation process.
2. Apply the configuration file directly
After completing the basic analysis, you are ready to create the new Action profile. Because the basic syntax is similar, many of them can be applied directly.
For example, when our configuration file is applied directly, the result is as follows
The directly applied files are already working, but there are a lot of unmet needs, so some changes are needed.
3. Restore the Travis CI environment variable
Since I didn’t write the generated script like Badge that we used, there is no intention to adjust the alignment to avoid failures in this migration. The script relies on some variables that need to be reset.
GitHub Action provides methods for setting environment variables manually. You can set the TRAVIS_BRANCH and TRAVIS_EVENT_TYPE environment variables in your build environment by adding the following code to your build steps to ensure that you can use this environment variable.
`- name: Set ENV variables
run: |
echo “::set-env name=TRAVIS_BRANCH::${TRAVIS_BRANCH:-$(echo $GITHUB_REF | awk ‘BEGIN { FS = “/” } ; { print $3 }’)}”
echo “::set-env name=TRAVIS_EVENT_TYPE::$(if [ “schedule” == “${{ github.event_name }}” ]; then echo “cron”; else echo “${{ github.event_name }}”; fi)”`
Also, since set-env is a relatively dangerous method, you need to enable execution of dangerous functions in environment variables.
`jobs:
build:
runs-on: ubuntu-latest
env:
ACTIONS_ALLOW_UNSECURE_COMMANDS: true
`
4. Split the configuration file
One difference between GitHub Action and Travisci is that you can split your CI files into multiple files, reducing the complexity of each individual configuration file.
According to the above analysis of the process, our CI process can be divided into three parts:
- The generation of a badge file should follow each submission
- The status file is generated, which takes a long time to execute and can be executed regularly
- According to the pull request content to sort out, do the verification
We split our configuration file into three different files:
Also thanks to the split, some of the necessary dependencies are not installed in the Checker, streamlining the CI process and improving the CI execution time.
5. Test the operation of CI
After the configuration file is written and split, you can perform local execution tests. Once the GitHub Action is written, it is inevitable to execute it to make sure the whole process is in order.
This time you can install tool (https://github.com/nektos/act), to execute the Action at the local, to confirm that your code is correct.
If you are on MacOS, you can install the ACT tool by simply executing BREW INSTALL ACT to complete the installation of ACT.
Once act is installed, you can execute actions locally by executing the act command, for example, by executing act pull_request to trigger a GitHub pull request event
Once you’ve passed your local tests, push your configuration file to GitHub for production testing.
6. Remove the Travis – CI
After completing the migration from Travis CI to GitHub Action with the steps described above, we can remove the.travis.yml file in the project root and close Travis CI completely.
7. Replace environment variables
After the basic migration, you need to fix some of the historical issues in your code. In the third step, we replaced the environment variables for travis-ci, but long-term maintenance projects should try to replace the uncontextual information with documented information, so we need to replace it.
Replacing the environment variable depends on the GitHub official environment variable description. You can refer to the official documentation.
With this simplification, the configuration file has been reduced from 27 lines to 17 lines, making it much simpler and easier to understand.
8. Modify the branch protection conditions for GitHub
In order to ensure that the changes meet the standards, we have restricted that new pull requests must pass the CI check before they can be merged into the master branch, so we also need to modify the branch protection rules to ensure that the appropriate protection is set.
A few considerations
1. Different environment variables
If you rely on environment variables, you will need to modify them accordingly. Or you can do what I did by having temporary environment variables locally first through set-env and then gradually migrating them later.
2. Action dependencies should be safe to run
There are two parts to the Action execution. The Action process itself depends on the master branch, but the script called during execution depends on the source, so from a security perspective, you should try to put all the processes in the Action, rather than in your source directory.
3. How to trigger the CI Pull Request check?
As you test the Pull Request, you need to trigger different Commit over and over again, You can Trigger a blank commit by executing Git Commit — Allow-Empty-M “Trigger Notification “&& Git push. After you push it to GitHub, Then the construction of the pull request can be triggered again to improve the efficiency of construction.
conclusion
Through the TravisCI process cleanup, code modification, and so on, we migrated our previous travis-ci to a faster, better performing GitHub Action, which on the one hand optimized our workflow and on the other hand made our code cleaner and cleaner.
For projects that are still using Travis CI, consider migrating to GitHub Action to optimize your workflow.
— Bai Huancheng
