document/TranslateProject
2
0
Fork 0
mirror of https://github.com/LCTT/TranslateProject.git synced 2025-02-03 23:40:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'LCTT/master'

Browse Source
This commit is contained in:
Xingyu Wang 2020-05-29 17:37:03 +08:00
commit 4e6e59dc89
9 changed files with 1125 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
sources/news/20200528 Fujitsu delivers exascale supercomputer that you can soon buy.md Normal file
View File

@ -0,0 +1,61 @@
[#]: collector: (lujun9972)
[#]: translator: ( )
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
[#]: subject: (Fujitsu delivers exascale supercomputer that you can soon buy)
[#]: via: (https://www.networkworld.com/article/3545816/fujitsu-delivers-exascale-supercomputer-that-you-can-soon-buy.html)
[#]: author: (Andy Patrizio https://www.networkworld.com/author/Andy-Patrizio/)
Fujitsu delivers exascale supercomputer that you can soon buy
======
Deployment will run through next year but Fugaku is already being put to work. Against Covid-19, naturally.
MaxiPhoto / Getty Images
Fujitsu has delivered all the components needed for a supercomputer in Japan that is expected to break the exaFLOP barrier when it comes online next year, and that delivery means that the same class of hardware will be available soon for enterprise customers.
The supercomputer, called Fugaku, is being assembled and brought online now at the RIKEN Center for  Computational Science. The installation of the 400-plus-rack machine started in December 2019, and full operation is scheduled for fiscal  2021, according according to a Fujitsu spokesman.
[10 of the world's fastest supercomputers][1]
All told, Fugaku will have a total of 158,976 processors, each with 48 cores at 2.2 GHz. Already the partially deployed supercomputer’s performance is [half an exaFLOP][2] of 64-bit double precision floating point performance and looks to be the first to get to a full exaFLOP. Intel says  its supercomputer Aurora being built for the Department of Energy’s Argonne National Laboratory in Chicago will be delivered by 2021, and it will break the exaFLOP barrier, too.
An exaFLOP is one quintillion (1018) floating-point operations per second, or 1,000 petaFLOPS.
Fujitsu announced last November a partnership with Cray, an HPE company, to sell Cray-branded supercomputers with the custom processor used in Fugaku. Cray already has deployed four systems for early evaluation located at Stony Brook University, Oak Ridge National Laboratory, Los Alamos National Laboratory, and the University of Bristol in Britain.
According to Cray, systems have been shipped to customers interested in early evaluation, and it is planning to officially launch the A64fx system featuring the Cray Programming Environment later this summer.
Fugaku is remarkable in that it contains no GPUs but instead uses a [custom-built Arm processor][3] designed entirely for high-performance computing. The motherboard has no memory slots; the memory is on the CPU die. If you look at the Top500 list now and proposed exaFLOP computers planned by the Department of Energy, they all use power-hungry GPUs.
As a result, Fugaku prototype topped the Green500 ranking last fall as the most energy efficient supercomputer in the world. Nvidia’s new Ampere A100 GPU may best the A64fx in performance but with its 400-watt power draw it will use a lot more power.
### Working to fight COVID-19
While construction marches on, RIKEN CCS and the Japanese Ministry of Education, Culture, Sports, Science and Technology have already started using the functioning parts of Fugaku to perform computations needed in research to fight the coronavirus. The projects it is working on include research into the characteristics of the virus, identifying potential drug compounds to combat the virus, research into diagnosis and treatment, insights into the spread of infections and its socio-economic impact.
It’s not the only supercomputer being turned against COVID-19. Government and industry organizations with supercomputers have  [joined together][4] in the effort, and CERN, the European nuclear research organization, [redeployed][5] a soon-to-be retired supercomputer with more than 100,000 cores on Folding@Home, the distributed-computing project that’s [seeking a way to thwart the virus’s entry into human cells][6].
Join the Network World communities on [Facebook][7] and [LinkedIn][8] to comment on topics that are top of mind.
--------------------------------------------------------------------------------
via: https://www.networkworld.com/article/3545816/fujitsu-delivers-exascale-supercomputer-that-you-can-soon-buy.html
作者：[Andy Patrizio][a]
选题：[lujun9972][b]
译者：[译者ID](https://github.com/译者ID)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://www.networkworld.com/author/Andy-Patrizio/
[b]: https://github.com/lujun9972
[1]: https://www.networkworld.com/article/3236875/embargo-10-of-the-worlds-fastest-supercomputers.html
[2]: https://twitter.com/ProfMatsuoka/status/1261194036276154368
[3]: https://www.networkworld.com/article/3535812/can-fujitsu-beat-nvidia-in-the-hpc-race.html
[4]: https://www.networkworld.com/article/3533426/covid-19-tech-giants-government-agencies-add-supercomputing-to-the-fight.html
[5]: https://home.cern/news/news/cern/cern-contributes-computers-combatting-covid-19
[6]: https://www.networkworld.com/article/3535080/thousands-of-home-pcs-break-exaflop-barrier.html
[7]: https://www.facebook.com/NetworkWorld/
[8]: https://www.linkedin.com/company/network-world

159
sources/tech/20200525 How to Execute a Command or Script at Reboot or Startup.md
View File

@ -1,159 +0,0 @@
[#]: collector: (lujun9972)
[#]: translator: (geekpi)
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
[#]: subject: (How to Execute a Command or Script at Reboot or Startup)
[#]: via: (https://www.2daygeek.com/execute-run-linux-scripts-command-at-reboot-startup/)
[#]: author: (Magesh Maruthamuthu https://www.2daygeek.com/author/magesh/)
How to Execute a Command or Script at Reboot or Startup
======
Well known services on Linux can be added on boot without any problems.
For example, if you want to add Apache Httpd **[service on boot][1]**, you can do this with the help of the chkconfig and systemctl command.
Sometimes you need to add a custom script or command or service on boot, and how to do it?
You can do this using the below three methods.
In this article, we will show you how to use these methods with examples.
### Method-1: How to Run Script or Command at Reboot or Startup Using /etc/rc.d/rc.local File
The **“/etc/rc.local”** file is traditionally executed after all normal computer services have been started at the end of the process of switching to a multiuser runlevel.
This method also works on the systemd system.
You need to add the location of your script to the “/etc/rc.d/rc.local” file to run on boot.
Make sure the file has permission to run.
```
# chmod +x /etc/rc.d/rc.local
```
To demonstrate this, we are going to create a simple sample script. You can create any script as needed.
```
# vi /opt/scripts/run-script-on-boot.sh
#!/bin/bash
date > /root/on-boot-output.txt
hostname > /root/on-boot-output.txt
```
Once the script is ready, set the executable permission.
```
# chmod +x /opt/scripts/run-script-on-boot.sh
```
Finally add the script to the bottom of the file.
```
# vi /etc/rc.d/rc.local
/opt/scripts/run-script-on-boot.sh
```
**[Restart your system][2]** to check this.
```
# reboot
```
### Method-2: How to Execute a Command or Script at Reboot or Startup Using the crontab
cron executes scheduled jobs automatically in the backend at a specific time.
This can be easily accomplished using a special string called **“@reboot”** with **[cron job][3]**.
@reboot is a special string and allows the user to run any command or script at startup (boot time).
This example runs the “/opt/scripts/run-script-on-boot.sh” file on the system restart.
We are going to use the same script as above.
To do so, just add the following entry in the crontab file.
```
# crontab -e
@reboot /opt/scripts/run-script-on-boot.sh
```
Restart your system to check this.
```
# reboot
```
### Method-3: How to Run a Command or Script at Reboot or Startup Using the systemd service unit
This method only works on the systemd system. This method is very straightforward.
We are going to use the same script above to demonstrate this.
To do so, you need to create a systemd startup script and place it in the **“/etc/systemd/system/”** directory.
This is our sample systemd startup unit script.
```
# vi sample-on-boot-script.service
[Unit]
Description=Run a Custom Script at Startup
After=default.target
[Service]
ExecStart=/opt/scripts/run-script-on-boot.sh
[Install]
WantedBy=default.target
```
Once you place the unit script in the systemd location, run the following command to update the systemd configuration files and enable the service.
```
# systemctl daemon-reload
# systemctl enable sample-on-boot-script.service
```
Restart your system to check this.
```
# reboot
```
### Bonus Tips:
If you want to run a script in the background, you need to add the trailing ampersand “&” symbol.
```
/Path/To/My_Script &
```
If you want to run the command as a different user, use the following format.
```
su - $USER -c /Path/To/My_Script
```
--------------------------------------------------------------------------------
via: https://www.2daygeek.com/execute-run-linux-scripts-command-at-reboot-startup/
作者：[Magesh Maruthamuthu][a]
选题：[lujun9972][b]
译者：[译者ID](https://github.com/译者ID)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://www.2daygeek.com/author/magesh/
[b]: https://github.com/lujun9972
[1]: https://www.2daygeek.com/enable-disable-services-on-boot-linux-chkconfig-systemctl-command/
[2]: https://www.2daygeek.com/6-commands-to-shutdown-halt-poweroff-reboot-the-linux-system/
[3]: https://www.2daygeek.com/linux-crontab-cron-job-to-schedule-jobs-task/

2
sources/tech/20200525 How to Remove Files Older than N Days Using Tmpwatch-Tmpreaper on Linux.md
View File

@ -1,5 +1,5 @@
[#]: collector: (lujun9972)
[#]: translator: ( )
[#]: translator: (geekpi)
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )

97
sources/tech/20200528 4 Linux distributions for gaming.md Normal file
View File

@ -0,0 +1,97 @@
[#]: collector: (lujun9972)
[#]: translator: ( )
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
[#]: subject: (4 Linux distributions for gaming)
[#]: via: (https://opensource.com/article/20/5/linux-gaming)
[#]: author: (Seth Kenlon https://opensource.com/users/seth)
4 Linux distributions for gaming
======
Linux offers plenty of great options for a work/play combo or a full
gaming console setup. Take our poll to tell us your favorite.
![Gaming with penguin pawns][1]
Gaming on Linux got a thorough kickstart in 2013 when Valve announced that their own SteamOS would be written on top of Linux. Since then, Linux users could realistically expect to play high-grade games that, in the past, required the purchase of a Windows computer or gaming console. The experience got off to a modest start, with just a few brave companies like CD Projekt Red, Deep Silver, Valve itself, and others putting the Linux penguin icon in their compatibility list, but eventually, even Gearbox and Square Enix were releasing their biggest titles on Linux. Today, [Valve's Proton project][2] helps ensure that even titles with no formal Linux release still work on SteamOS and other Linux distributions.
Valve didn't singlehandedly drag gaming into Linux, though. Well before Valve's initiative, there have been excellent independent games, blockbusters from id Software, and open source [gaming emulators][3] for Linux. Whether you want to play the latest releases or you want to relive classics from gaming history, Linux provides the only open source platform for your game rig. Here's an overview of what you might consider running on it.
### SteamOS
![Steam OS][4]
If you're looking for the full gaming PC experience—in which there's no difference between your desktop computer and a game console—then SteamOS is the obvious choice. On the one hand, there's nothing particularly special about SteamOS; it's essentially just [Debian Linux][5] with Steam set as the default startup application. When you boot your computer, Steam starts automatically, and you can interact with it using only your [Steam controller][6] or any [Xbox-style gamepad][7]. You can create the same configuration by installing Steam on any distribution and setting its "Big Picture mode" as a startup item.
However, SteamOS is ultimately specific to its purpose as a game console. While you can treat SteamOS as a normal desktop, the design choices of the distribution make it clear that it's intended as the frontend to a dedicated gaming machine. This isn't the distribution you're likely to use for your daily office or schoolwork. It's the "firmware" (except it's actually software) of a gaming console, first and foremost. When you're looking for a seamless, reliable, self-maintaining game console, build the machine of your dreams and install SteamOS.
### Lakka
![Lakka OS][8]
Similar in spirit to SteamOS, Lakka recreates the Playstation 3 interface, but for retro gaming. I installed Lakka on a Raspberry Pi Rev 1 using [Etcher][9] and was pleasantly surprised to find it ready for gaming upon bootup. Lakka loads to an interface that's eerily familiar to PS3 gamers, and, like a Playstation, you can control everything using just a [game controller][10].
Lakka focuses on retro gaming, meaning that, instead of Steam, it provides game emulators for old systems and engines. Provided you have ROM images, you can use the emulators to play games from Nintendo, Sega Genesis, Dreamcast, N64, or homebrew titles like [POWDER][11], [Warcraft Tower Defense][12], and others.
Lakka doesn't ship with any games, but it makes it easy for you to add games over SSH or Samba shares. Even if you've never used SSH or set up Samba (you've probably used it without knowing it), Lakka makes it easy to find your retro gaming system over your own network, so you can add games to it using whatever OS you have handy.
### Pop_OS!
![PopOS][13]
Not everyone is trying to build a game console—modern, retro, or otherwise. Sometimes, all you really want is a good computer with the ability to run games at top performance. [System76][14] maintains a desktop they call Pop_OS!, designed around the standard GNOME desktop with some custom additions. Pop_OS! doesn't do much by way of innovation, but it makes an impact in the way its designers maintain convenient defaults. For gamers, this includes easy access to Steam, Proton, WINE, game emulators, PlayOnLinux, automatic game controller recognition and configuration, and more. It's not far from its Ubuntu roots, but it has been refined just enough to make a noticeable difference.
When you're not playing games, Pop_OS! is also a wonderful productivity-focused desktop. It uses all of GNOME's built-in conveniences (such as the quick Activities menu overlay) to maximize efficiency, and adds useful modifications to bring the desktop closer to the universal expectation that's grown from decades of traditions founded in KDE Plasma, Finder, and Explorer. Pop_OS! is an intuitive and understated environment that helps you focus on whatever you're working on, until you break out the gaming gear, and then it makes sure you spend your time on entertainment instead of configuration.
### Drauger OS
![Drauger OS][15]
Situated somewhere between a dedicated gaming console and a plain old desktop is Drauger OS, with a simple interface designed to stay out of your way while also making it quick and easy to access the game applications you need. Drauger is still a young project, but it represents an interesting philosophy of computing and gaming—conserve every last resource for the task at hand. To that end, Drauger OS does away with the concept of a traditional desktop and instead provides a simplified control panel that lets you launch your game client (such as Steam, PlayOnLinux, Lutris, and so on), and configure services (such as your network) or launch an application. It's a little disorienting at first, especially because the control panel is designed to more or less disappear when in the background, but after an afternoon of interaction, you realize that the complexity of a full desktop is mostly unnecessary. The point of any computer is rarely its desktop. What you really care about is getting into an application as quickly and easily as possible, and then for that application to perform well.
The other side of this equation is performance. While having a drastically simplified desktop helps, Drauger OS attempts to maximize game performance by using a low-latency kernel. A kernel is the part of your operating system that communicates with external devices, such as game controllers and mice and keyboards, and even hard drives, memory, and video cards. An all-purpose kernel, such as the one that ships with most Linux distributions, gives more or less equal attention to all processes. A low-latency kernel can favor specific processes, including video and graphics, to ensure that calculations performed for important tasks are returned promptly, while mundane system tasks are assigned less importance. Drauger's Linux kernel is tuned for performance, so your games get top priority over all other processes.
### The Linux of your choice
![Pantheon OS][16]
Looking past the self-declared focal points of individual "gaming distributions," one Linux is ultimately essentially the same as the next Linux. Amazingly, I play games even on my RHEL laptop, a distribution famous for its enterprise IT support, thanks to the [Flatpak Steam installer][17]. If you want to game on Linux in this decade, your question isn't how to do it but which system to use.
The easiest answer to which Linux to use is, ultimately, to choose whatever Linux works best on your hardware. When you find a Linux distribution that boots and recognizes your computer hardware, your game controllers, and lets you play your games. Once you find that, install the games of your choice and get busy playing.
There are more great Linux distributions for gaming out there, including the [Fedora Games Spin][18], [RetroPie][19], [Clear Linux][20], [Manjaro][21], and so many more. What's your favorite? Tell us in the comments.
--------------------------------------------------------------------------------
via: https://opensource.com/article/20/5/linux-gaming
作者：[Seth Kenlon][a]
选题：[lujun9972][b]
译者：[译者ID](https://github.com/译者ID)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://opensource.com/users/seth
[b]: https://github.com/lujun9972
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/gaming_grid_penguin.png?itok=7Fv83mHR (Gaming with penguin pawns)
[2]: https://github.com/ValveSoftware/Proton
[3]: https://opensource.com/article/18/10/lutris-open-gaming-platform
[4]: https://opensource.com/sites/default/files/uploads/screenshot_from_2020-05-15_15-53-15_0.png (Steam OS)
[5]: http://debian.org
[6]: https://store.steampowered.com/app/353370/Steam_Controller/
[7]: https://www.logitechg.com/en-nz/products/gamepads/f710-wireless-gamepad.940-000119.html
[8]: https://opensource.com/sites/default/files/uploads/os-lakka_0.png (Lakka OS)
[9]: https://www.balena.io/etcher/
[10]: https://www.logitechg.com/en-nz/products/gamepads/f310-gamepad.940-000112.html
[11]: http://www.zincland.com/powder/index.php?pagename=about
[12]: https://ndswtd.wordpress.com/
[13]: https://opensource.com/sites/default/files/uploads/os-pop_os_0.jpg (PopOS)
[14]: https://system76.com/
[15]: https://opensource.com/sites/default/files/uploads/os-drauger_0.jpg (Drauger OS)
[16]: https://opensource.com/sites/default/files/uploads/os-pantheon_0.jpg (Pantheon OS)
[17]: https://flathub.org/apps/details/com.valvesoftware.Steam
[18]: https://labs.fedoraproject.org/en/games/
[19]: https://retropie.org.uk/
[20]: https://clearlinux.org/software/bundle/games
[21]: http://manjaro.org

294
sources/tech/20200528 9 open source JavaScript frameworks for front-end web development.md Normal file
View File

@ -0,0 +1,294 @@
[#]: collector: (lujun9972)
[#]: translator: ( )
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
[#]: subject: (9 open source JavaScript frameworks for front-end web development)
[#]: via: (https://opensource.com/article/20/5/open-source-javascript-frameworks)
[#]: author: (Bryant Son https://opensource.com/users/brson)
9 open source JavaScript frameworks for front-end web development
======
A breakdown of many JavaScript options for frameworks—their strengths
and key features.
![Computer screen with files or windows open][1]
About a decade ago, the JavaScript developer community began to witness fierce battles emerging among JavaScript frameworks. In this article, I will introduce some of the most well-known of these frameworks. And it's important to note that these are all open source JavaScript projects, meaning that you can freely utilize them under an [open source license][2] and even contribute to the source code and communities.
If you prefer to follow along as I explore these frameworks, you can watch my video.
Before getting started, though, it will be useful to learn some of the terminology JavaScript developers commonly use when discussing frameworks.
Term | What It Is
---|---
[Document Object Model (DOM)][3] | A tree-structure representation of a website where each node is an object representing part of the webpage. The World Wide Web Consortium (W3C), the international standards organization for the World Wide Web, maintains the definition of the DOM.
[Virtual DOM][4] | A "virtual" or "ideal" representation of a user interface (UI) is kept in memory and synced with the "real" DOM by a library such as [ReactDOM][5]. To explore further, please read ReactJS's virtual DOM and internals documentation.
[Data Binding][6] | A programming concept to provide a consistent interface for accessing data on websites. Web elements are associated with a property or attribute of an element maintained by the DOM. For example, when you need to fill out a password in a webpage form, the data binding mechanism can check with the password validation logic to ensure that the password is in a valid format.
Now that we are clear about common terms, let's explore what open source JavaScript frameworks are out there.
Framework | About | License | Release Date
---|---|---|---
[ReactJS][7] | Created by Facebook, currently the most popular JavaScript framework | MIT License | May 24, 2013
[Angular][8] | Popular JavaScript framework created by Google | MIT License | Jan 5, 2010
[VueJS][9] | Rapidly growing JavaScript framework | MIT License | Jul 28, 2013
[MeteorJS][10] | Powerful framework that is more than a JavaScript framework | MIT License | Jan 18, 2012
[KnockoutJS][11] | Open source Model-View-ViewModel (MVVM) framework | MIT License | Jul 5, 2010
[EmberJS][12] | Another open source Model-View-ViewModel framework | MIT License | Dec 8, 2011
[BackboneJS][13] | JavaScript framework with RESTful JSON and Model-View-Presenter pattern | MIT License | Sep 30, 2010
[Svelte][14] | Open source JavaScript framework not using virtual DOM | MIT License | Nov 20, 2016
[AureliaJS][15] | A collection of Modern JavaScript modules | MIT License | Feb 14, 2018
For context, here is the publicly available data on popularity based on NPM package downloads per framework, thanks to [npm trends][16].
![Framework downloads graph][17]
### ReactJS
![React page][18]
[ReactJS][19] was invented by Facebook, and it is the clear leader among JavaScript frameworks today, though it was invented well after Angular. React introduces a concept called a virtual DOM, an abstract copy where developers can utilize only the ReactJS features that they want, without having to rewrite the entire project to work within the framework. In addition, the active open source community with the React project has definitely been the workhorse behind the growth. Here are some of React's key strengths:
* Reasonable learning curve—React developers can easily create the React components without rewriting the entire code in JavaScript. See the benefits of ReactJS and how it makes it the programming easier on ReactJS's [front page][20].
* Highly optimized for performance—React's virtual DOM implementation and other features boost app rendering performance. See ReactJS's [description][21] of how its performance can be benchmarked and measured in terms of how the app performs.
* Excellent supporting tools—[Redux][22], [Thunk][23], and [Reselect][24] are some of the best tools for building well-structured, debuggable code.
* One way data binding—The model used in Reach flows from owner to child only making it simpler to trace cause and effect in code. Read more about it on ReactJS's [page on data binding][25].
Who is using ReactJS? Since Facebook invented it, the company itself heavily uses React for its frontpage, and [Instagram][26] is said to be completely based on the ReactJS library. You might be surprised to know that other well-known companies like [New York Times][27], [Netflix][28], and [Khan Academy][29] also implement ReactJS in their technology stacks.
What may be even more surprising is the availability of jobs for ReactJS developers, as you can see below from research done by Stackoverflow. Hey, you can work on an open source project and get paid to do it. That is pretty cool!
![React jobs page][30]
Stackoverflow shows the huge demand for ReactJS developers—[Source: Developer Hiring Trends in 2017—Stackoverflow Blog][31]
 
[ReactJS's GitHub][7] currently shows over 13K commits and 1,377 contributors to the open source project. And it is an open source project under MIT License.
![React GitHub page][32]
### Angular
![Angular homepage][33]
React may now be the leading JavaScript framework in terms of the number of developers, but [Angular][34] is close behind. In fact, while React is the more popular choice among open source developers and startup companies, larger corporations tend to prefer Angular (a few are listed below). The main reason is that, while Angular might be more complicated, its uniformity and consistency works well for larger projects. For example, I have worked on both Angular and React throughout my career, and I observed that the larger companies generally consider Angular's strict structure a strength. Here are some other key strengths of Angular:
* Well-designed Command Line Interface: Angular has an excellent Command Line Interface (CLI) tool to easily bootstrap and to develop with Angular. ReactJS also offers the Command Line Interface as well as other tools, but Angular has extensive support and excellent documentation, as you can see on [this page][35].
* One way data binding—Similarly to React, the one-way data binding model makes the framework less susceptible to unwanted side effects.
* Great support for TypeScript—Angular has excellent alignment with [TypeScript][36], which is effectively JavaScript more type enforcement. It also transcompiling to JavaScript, making it a great option to enforce types for less buggy code.
Well-known websites like YouTube, [Netflix][37], [IBM][38], and [Walmart][39] all have implemented Angular into their applications. I personally started front-end JavaScript development with Angular by educating myself on the subject. I have worked on quite a few personal and professional projects involving Angular, but that was Angular 1.x, which was called by AngularJS at the time. When Google decided to upgrade the version to 2.0, they completely revamped the framework, and then it became Angular. The new Angular was a complete transformation of the previous AngularJS, which drove off some existing developers while bringing new developers.
[Angular's][8] [GitHub][8] page shows 17,781 commits and 1,133 contributors at the time of this writing. It is also an open source project with an MIT License, so you can feel free to use it for your project or to contribute.
 
![Angular GitHub page][40]
### VueJS
![Vue JS page][41]
[VueJS][42] is a very interesting framework. It is a newcomer to the JavaScript framework scene, but its popularity has increased significantly over the course of a few years. VueJS was created by [Evan Yu][43], a former Google engineer who had worked on the Angular project. The framework got so popular that many front-end engineers now prefer VueJS over other JavaScript frameworks. The chart below depicts how fast the framework gained traction over time.
![Vue JS popularity graph][44]
Here are some of the key strengths of VueJS:
* Easier learning curve—Even compared to Angular or React, many front-end developers feel that VueJS has the lowest learning curve.
* Small size—VueJS is relatively lightweight compared to Angular or React. In its [official documentation][45], its size is stated to be only about 30 KB, while the project generated by Angular, for example, is over 65 KB.
* Concise documentation—Vue has thorough but concise and clear documentation. See [its official documentation][46] for yourself.
[VueJS's GitHub][9] shows 3,099 commits and 239 contributors.
![Vue JS GitHub page][47]
### MeteorJS
![Meteor page][48]
[MeteorJS][49] is a free and open source [isomorphic framework][50], which means, just like NodeJS, it runs both client and server-side JavaScript. Meteor can be used in conjunction with any other popular front-end framework like Angular, React, Vue, Svelte, etc.
Meteor is used by several corporations such as Qualcomm, Mazda, and Ikea, and many applications like Dispatch and Rocket.Chat. [See the case studies on its official website.][51]
![Meteor case study][52]
Some of the key features of Meteor include:
* Data on the wire—The server sends the data, not HTML, and the client renders it. Data on the wire refers mostly to the way that Meteor forms a WebSocket connection to the server on page load, and then transfers the data needed over that connection.
* Develop everything in JavaScript—Client-side, application server, webpage, and mobile interface can be all designed with JavaScript.
* Supports most major frameworks—Angular, React, and Vue can be all combined and used in conjunction with Meteor. Thus, you can still use your favorite framework, like React or Angular, but still leverage some of the great features that Meteor offers.
As of now, [Meteor's][10] [GitHub][10] shows 22,804 commits and 428 contributors. That is quite a lot for open source activities!
![Meteor GitHub page][53]
### EmberJS
![EmberJS page][54]
[EmberJS][55] is an open source JavaScript framework based on the [Model-view-viewModel(MVVM)][56] pattern. If you've never heard about EmberJS, you'll definitely be surprised how many companies are using it. Apple Music, Square, Discourse, Groupon, LinkedIn, Twitch, Nordstorm, and Chipotle all leverage EmberJS as one of their technology stacks. Check [EmberJS's official page][57] to discover all applications and customers that use EmberJS.
Although Ember has similar benefits to the other frameworks we've discussed, here are some of its unique differentiators:
* Convention over configuration—Ember standardizes naming conventions and automatically generates the result code. This approach has a little more of a learning curve but ensures that programmers follow best-recommended practices.
* Fully-fledged templating mechanism—Ember relies on straight text manipulation, building the HTML document dynamically while knowing nothing about DOM.
As one might expect from a framework used by many applications, [Ember's GitHub][58] page shows 19,808 commits and 785 contributors. That is huge!
![EmberJS GitHub page][59]
### KnockoutJS
![KnockoutJS page][60]
[KnockoutJS][61] is a standalone open source JavaScript framework adopting a [Model-View-ViewModel (MVVM)][56] pattern with templates. Although fewer people may have heard about this framework compared to Angular, React, or Vue, the project is still quite active among the development community and leverages features such as:
* Declarative binding—Knockout's declarative binding system provides a concise and powerful way to link data to the UI. It's generally easy to bind to simple data properties or to use a single binding. Read more about it [here at KnockoutJS's official documentation page][62].
* Automatic UI refresh
* Dependency tracking templating
[Knockout's GitHub][11] page shows about 1,766 commits and 81 contributors. Those numbers are not as significant compared to the other frameworks, but the project is still actively maintained.
![Knockout GitHub page][63]
### BackboneJS
![BackboneJS page][64]
[BackboneJS][65] is a lightweight JavaScript framework with a RESTful JSON interface and is based on Model-View-Presenter (MVP) design paradigm.
The framework is said to be used by [Airbnb][66], Hulu, SoundCloud, and Trello. You can find all of these case studies on [Backbone's page][67].
The [BackboneJS GitHub][13] page shows 3,386 commits and 289 contributors.
![BackboneJS GitHub page][68]
### Svelte
![Svelte page][69]
[Svelte][70] is an open source JavaScript framework that generates the code to manipulate DOM instead of including framework references. This process of converting an app into JavaScript at build time rather than run time might offer a slight boost in performance in some scenarios.
[Svelte's][14] [GitHub][14] page shows 5,729 commits and 296 contributors as of this writing.
![Svelte GitHub page][71]
### AureliaJS
![Aurelia page][72]
Last on the list is [Aurelia][73]. Aurelia is a front-end JavaScript framework that is a collection of modern JavaScript modules. Aurelia has the following interesting features:
* Fast rendering—Aurelia claims that its framework can render faster than any other framework today.
* Uni-directional data flow—Aurelia uses an observable-based binding system that pushes the data from the model to the view.
* Build with vanilla JavaScript—You can build all of the website's components with plain JavaScript.
[Aurelia's][15] [GitHub][15] page shows 788 commits and 96 contributors as of this writing.
![Aurelia GitHub page][74]
So that is what I found when looking at what is new in the JavaScript framework world. Did I miss any interesting frameworks? Feel free to share your ideas in the comment section!
--------------------------------------------------------------------------------
via: https://opensource.com/article/20/5/open-source-javascript-frameworks
作者：[Bryant Son][a]
选题：[lujun9972][b]
译者：[译者ID](https://github.com/译者ID)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://opensource.com/users/brson
[b]: https://github.com/lujun9972
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/browser_screen_windows_files.png?itok=kLTeQUbY (Computer screen with files or windows open)
[2]: https://opensource.com/article/17/9/open-source-licensing
[3]: https://www.w3schools.com/js/js_htmldom.asp
[4]: https://reactjs.org/docs/faq-internals.html
[5]: https://reactjs.org/docs/react-dom.html
[6]: https://en.wikipedia.org/wiki/Data_binding
[7]: https://github.com/facebook/react
[8]: https://github.com/angular/angular
[9]: https://github.com/vuejs/vue
[10]: https://github.com/meteor/meteor
[11]: https://github.com/knockout/knockout
[12]: https://github.com/emberjs/ember.js
[13]: https://github.com/jashkenas/backbone
[14]: https://github.com/sveltejs/svelte
[15]: https://github.com/aurelia/framework
[16]: https://www.npmtrends.com/angular-vs-react-vs-vue-vs-meteor-vs-backbone
[17]: https://opensource.com/sites/default/files/uploads/open-source-javascript-framework-downloads-opensourcedotcom_0.png (Framework downloads graph)
[18]: https://opensource.com/sites/default/files/uploads/3_react.jpg (React page)
[19]: https://reactjs.org
[20]: https://reactjs.org/
[21]: https://reactjs.org/docs/perf.html
[22]: https://redux.js.org/
[23]: https://github.com/reduxjs/redux-thunk
[24]: https://github.com/reduxjs/reselect
[25]: https://reactjs.org/docs/two-way-binding-helpers.html
[26]: https://instagram-engineering.com/react-native-at-instagram-dd828a9a90c7
[27]: https://open.nytimes.com/introducing-react-tracking-declarative-tracking-for-react-apps-2c76706bb79a
[28]: https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9
[29]: https://khan.github.io/react-components/
[30]: https://opensource.com/sites/default/files/uploads/4_reactjobs_0.jpg (React jobs page)
[31]: https://stackoverflow.blog/2017/03/09/developer-hiring-trends-2017
[32]: https://opensource.com/sites/default/files/uploads/5_reactgithub.jpg (React GitHub page)
[33]: https://opensource.com/sites/default/files/uploads/6_angular.jpg (Angular homepage)
[34]: https://angular.io
[35]: https://cli.angular.io/
[36]: https://www.typescriptlang.org/
[37]: https://netflixtechblog.com/netflix-likes-react-509675426db
[38]: https://developer.ibm.com/technologies/javascript/tutorials/wa-react-intro/
[39]: https://medium.com/walmartlabs/tagged/react
[40]: https://opensource.com/sites/default/files/uploads/7_angulargithub.jpg (Angular GitHub page)
[41]: https://opensource.com/sites/default/files/uploads/8_vuejs.jpg (Vue JS page)
[42]: https://vuejs.org
[43]: https://www.freecodecamp.org/news/between-the-wires-an-interview-with-vue-js-creator-evan-you-e383cbf57cc4/
[44]: https://opensource.com/sites/default/files/uploads/9_vuejspopularity.jpg (Vue JS popularity graph)
[45]: https://vuejs.org/v2/guide/comparison.html#Size
[46]: https://vuejs.org/v2/guide/
[47]: https://opensource.com/sites/default/files/uploads/10_vuejsgithub.jpg (Vue JS GitHub page)
[48]: https://opensource.com/sites/default/files/uploads/11_meteor_0.jpg (Meteor Page)
[49]: https://www.meteor.com
[50]: https://en.wikipedia.org/wiki/Isomorphic_JavaScript
[51]: https://www.meteor.com/showcase
[52]: https://opensource.com/sites/default/files/uploads/casestudy1_meteor.jpg (Meteor case study)
[53]: https://opensource.com/sites/default/files/uploads/12_meteorgithub.jpg (Meteor GitHub page)
[54]: https://opensource.com/sites/default/files/uploads/13_emberjs.jpg (EmberJS page)
[55]: https://emberjs.com
[56]: https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
[57]: https://emberjs.com/ember-users
[58]: https://github.com/emberjs
[59]: https://opensource.com/sites/default/files/uploads/14_embergithub.jpg (EmberJS GitHub page)
[60]: https://opensource.com/sites/default/files/uploads/15_knockoutjs.jpg (KnockoutJS page)
[61]: https://knockoutjs.com
[62]: https://knockoutjs.com/documentation/binding-syntax.html
[63]: https://opensource.com/sites/default/files/uploads/16_knockoutgithub.jpg (Knockout GitHub page)
[64]: https://opensource.com/sites/default/files/uploads/17_backbonejs.jpg (BackboneJS page)
[65]: https://backbonejs.org
[66]: https://medium.com/airbnb-engineering/our-first-node-js-app-backbone-on-the-client-and-server-c659abb0e2b4
[67]: https://sites.google.com/site/backbonejsja/examples
[68]: https://opensource.com/sites/default/files/uploads/18_backbonejsgithub.jpg (BackboneJS GitHub page)
[69]: https://opensource.com/sites/default/files/uploads/19_svelte.jpg (Svelte page)
[70]: https://svelte.dev
[71]: https://opensource.com/sites/default/files/uploads/20_svletegithub.jpg (Svelte GitHub page)
[72]: https://opensource.com/sites/default/files/uploads/21_aurelia.jpg (Aurelia page)
[73]: https://aurelia.io
[74]: https://opensource.com/sites/default/files/uploads/22_aureliagithub.jpg (Aurelia GitHub page)

356
sources/tech/20200528 Simplify data visualization in Python with Plotly.md Normal file
View File

@ -0,0 +1,356 @@
[#]: collector: (lujun9972)
[#]: translator: ( )
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
[#]: subject: (Simplify data visualization in Python with Plotly)
[#]: via: (https://opensource.com/article/20/5/plotly-python)
[#]: author: (Shaun Taylor-Morgan https://opensource.com/users/shaun-taylor-morgan)
Simplify data visualization in Python with Plotly
======
Plotly is a data plotting library with a clean interface designed to
allow you to build your own APIs.
![Colorful sound wave graph][1]
Plotly is a plotting ecosystem that allows you to make plots in [Python][2], as well as JavaScript and R. In this series of articles, I'm focusing on [plotting with Python libraries][3].
Plotly has three different Python APIs, giving you a choice of how to drive it:
* An [object-oriented API][4] that feels similar to Matplotlib
* A [data-driven API][5] that specifies plots by constructing dictionaries of JSON-like data
* A ["Plotly Express" API][6] that gives you high-level plotting functions similar to Seaborn
I'll explore each of these APIs by making the same plot in each one: a grouped bar plot of historical UK election results.
### Making plots using Graph Objects
Plotly's object-oriented API is named graph_objects. It's somewhat similar to [Matplotlib's object-oriented API][7].
To create a multi-bar plot, you can construct a figure object containing four bar plots:
```
    # Import Plotly and our data
    import plotly.graph_objects as go
    from votes import wide as df
    # Get a convenient list of x-values
    years = df['year']
    x = list(range(len(years)))
    # Specify the plots
    bar_plots = [
      go.Bar(x=x, y=df['conservative'], name='Conservative', marker=go.bar.Marker(color='#0343df')),
      go.Bar(x=x, y=df['labour'], name='Labour', marker=go.bar.Marker(color='#e50000')),
      go.Bar(x=x, y=df['liberal'], name='Liberal', marker=go.bar.Marker(color='#ffff14')),
      go.Bar(x=x, y=df['others'], name='Others', marker=go.bar.Marker(color='#929591')),
    ]
   
    # Specify the layout
    layout = go.Layout(
      title=go.layout.Title(text="Election results", x=0.5),
      yaxis_title="Seats",
      xaxis_tickmode="array",
      xaxis_tickvals=list(range(27)),
      xaxis_ticktext=tuple(df['year'].values),
    )
       
    # Make the multi-bar plot
    fig = go.Figure(data=bar_plots, layout=layout)
    # Tell Plotly to render it
    fig.show()
```
Unlike in Matplotlib, there's no need to calculate the x-positions of the bars manually; Plotly takes care of that for you.
Here's the final plot:
![A multi-bar plot made using Graph Objects][8]
A multi-bar plot made using Graph Objects (© 2019 [Anvil][9])
### Making plots using Python data structures
You can also specify your plot using basic Python data structures with the same structure as the object-oriented API. This corresponds directly to the JSON API for Plotly's JavaScript implementation.
```
    # Specify the plots
    fig = {
        'data': [
            {'type': 'bar', 'x': x, 'y': df['conservative'], 'name': 'Conservative', 'marker': {'color': '#0343df'}},
            {'type': 'bar', 'x': x, 'y': df['labour'], 'name': 'Labour', 'marker': {'color': '#e50000'}},
            {'type': 'bar', 'x': x, 'y': df['liberal'], 'name': 'Liberal', 'marker': {'color': '#ffff14'}},
            {'type': 'bar', 'x': x, 'y': df['others'], 'name': 'Others', 'marker': {'color': '#929591'}},
        ],
        'layout': {
            'title': {'text': 'Election results', 'x': 0.5},
            'yaxis': {'title': 'Seats'},
            'xaxis': {
                'tickmode': 'array',
                'tickvals': list(range(27)),
                'ticktext': tuple(df['year'].values),
            }
        }
    }
    # Tell Plotly to render it
    pio.show(fig)
```
The final plot looks exactly the same as the previous plot:
![A multi-bar plot made using JSON-like data structures][10]
A multi-bar plot made using JSON-like data structures (© 2019 [Anvil][9])
### Making plots using Plotly Express
[Plotly Express][11] is a high-level API that wraps Graph Objects.
You can make a multi-bar plot in Plotly Express using (almost) a single line:
```
    # Import Plotly and our data
    import plotly.express as px
    from votes import long as df
    # Define the colourmap to get custom bar colours
    cmap = {
        'Conservative': '#0343df',
        'Labour': '#e50000',
        'Liberal': '#ffff14',
        'Others': '#929591',
    }
   
    # Make the plot!
    fig = px.bar(df, x="year", y="seats", color="party", barmode="group", color_discrete_map=cmap)
```
This makes use of the data in [Long Form][12], also known as "tidy data." The columns are year, party, and seats, rather than being split by party. It's very similar to making a multi-bar plot in [Seaborn][13].
```
>> print(long)
     year         party  seats
0    1922  Conservative    344
1    1923  Conservative    258
2    1924  Conservative    412
3    1929  Conservative    260
4    1931  Conservative    470
..    ...           ...    ...
103  2005        Others     30
104  2010        Others     29
105  2015        Others     80
106  2017        Others     59
107  2019        Others     72
[108 rows x 3 columns]
```
You can access the underlying Graph Objects API to make detailed tweaks. Add a title and a y-axis label:
```
    # Use the Graph Objects API to tweak our plot
    import plotly.graph_objects as go
    fig.layout = go.Layout(
        title=go.layout.Title(text="Election results", x=0.5),
        yaxis_title="Seats",
    )
```
And finally, ask Plotly to show it to you:
```
    # Tell Plotly to render it
    fig.show()
```
This runs a temporary web server on an unused port and opens the default web browser to view the plot (the webserver is immediately torn down).
Unfortunately, the result is not perfect. The x-axis is treated as an integer, so the groups are far apart and small. This makes it quite difficult to see trends.
![A multi-bar plot made using Plotly Express][14]
A multi-bar plot made using Plotly Express (© 2019 [Anvil][9])
You might try to encourage Plotly Express to treat the x-values as strings by casting them to strings. You might expect this to result in them being plotted with even spacing and lexical ordering. Unfortunately, you still get them helpfully spaced numerically. Setting the xaxis_tickvals does not work as it did in graph_objects, either.
Unlike the similar example in [Seaborn][13], in this case, the abstraction does not appear to provide sufficient [escape hatches][15] to provide things exactly how you want them. But perhaps you could write your _own_ API?
### Building your own Plotly API
Not happy with how Plotly does something? Build your own Plotly API!
At its core, Plotly is a JavaScript library that makes plots using [D3][16] and [stack.gl][17]. The JavaScript library has an interface that consumes JSON structures that specify plots. So you just need to output JSON structures that the JavaScript library likes to consume.
Anvil did that to create a Python Plotly API that works entirely in the browser.
![Plotly uses a JavaScript library to create plots, driven by libraries in other languages via JSON][18]
Plotly uses a JavaScript library to create plots, driven by libraries in other languages via JSON (© 2019 [Anvil][9])
In the Anvil version, you can use both the Graph Objects API and the Python data structure approach explained above. You run exactly the same commands, assigning the data and layout to a [Plot component][19] in your Anvil app.
Here's the multi-bar plot written in Anvil's client-side Python API:
```
# Import Anvil libraries
from ._anvil_designer import EntrypointTemplate
from anvil import *
import anvil.server
# Import client-side Plotly
import plotly.graph_objs as go
# This is an Anvil Form
class Entrypoint(EntrypointTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
    # Fetch the data from the server
    data = anvil.server.call('get_election_data')
   
    #  Get a convenient list of x-values
    years = data['year']
    x = list(range(len(years)))
    # Specify the plots
    bar_plots = [
      go.Bar(x=x, y=data['conservative'], name='Conservative', marker=go.Marker(color='#0343df')),
      go.Bar(x=x, y=data['labour'], name='Labour', marker=go.Marker(color='#e50000')),
      go.Bar(x=x, y=data['liberal'], name='Liberal', marker=go.Marker(color='#ffff14')),
      go.Bar(x=x, y=data['others'], name='Others', marker=go.Marker(color='#929591')),
    ]
    # Specify the layout
    layout = {
      'title': 'Election results',
      'yaxis': {'title': 'Seats'},
      'xaxis': {
        'tickmode': 'array',
        'tickvals': list(range(27)),
        'ticktext': data['year'],
      },
    }
    # Make the multi-bar plot
    self.plot_1.data = bar_plots
    self.plot_1.layout = layout
```
The plotting logic is the same as above, but it's running _entirely in the web browser_—the plot is created by the Plotly JavaScript library on the user's machine! This is a big advantage over all the other [Python plotting libraries][3] in this series. All the other Python libraries need to run on a server.
Here's the interactive Plotly plot running in an Anvil app:
![The election plot on the web using Anvil's client-side-Python Plotly library][20]
The election plot on the web using Anvil's [client-side-Python][21] Plotly library (© 2019 [Anvil][9])
You can [copy this example][22] as an Anvil app (Note: Anvil requires registration to use).
Running Plotly in the frontend has another advantage: it opens up many more options for customizing interactive behavior.
### Customizing interactivity in Plotly
Plotly plots aren't just dynamic; you can customize their interactive behavior. For example, you can customize the format of tool-tips using hovertemplate in each bar plot:
```
    go.Bar(
      x=x,
      y=df['others'],
      name='others',
      marker=go.bar.Marker(color='#929591'),
      hovertemplate='Seats: <b>%{y}</b>',
    ),
```
Here's what you get when you apply this to each bar plot:
![A multi-bar plot with custom tool-tips][23]
A multi-bar plot with custom tool-tips (© 2019 [Anvil][9])
This is useful, but it would be even better if you could execute any code you want when certain events happen—like when a user hovers over the bar and you want to display an information box about the relevant election. In Anvil's Plotly library, you can bind event handlers to events such as hover, which makes that sort of complex interactivity possible!
![A multi-bar plot with a hover event handler][24]
A multi-bar plot with a hover event handler (© 2019 [Anvil][9])
You can achieve this by binding a method to the plot's hover event:
```
  def plot_1_hover(self, points, **event_args):
    """This method is called when a data point is hovered."""
    i = points[0]['point_number']
    self.label_year.text = self.data['year'][i]
    self.label_con.text = self.data['conservative'][i]
    self.label_lab.text = self.data['labour'][i]
    self.label_lib.text = self.data['liberal'][i]
    self.label_oth.text = self.data['others'][i]
    url = f"<https://en.wikipedia.org/wiki/{self.data\['year'\]\[i\]}\_United\_Kingdom\_general\_election>"
    self.link_more_info.text = url
    self.link_more_info.url = url
```
This is a rather extreme level of interactivity, and from the developer's point of view, an extreme level of customizability. It's all thanks to Plotly's architecture—Plotly has a clean interface that is explicitly designed to allow you to build your own APIs. It would be helpful to see this kind of great design everywhere!
### Custom interactivity using Bokeh
You've seen how Plotly uses JavaScript to create dynamic plots, and you can edit them live in the browser using Anvil's client-side Python code.
Bokeh is another Python plotting library that outputs an HTML document you can embed in a web app and get similar dynamic features to those provided by Plotly. (That's "BOE-kay," if you're wondering how to pronounce it.)
Enjoy customizing charts and share tips and tricks in the comments below.
* * *
_This article is based on [How to make plots using Plotly][9] on Anvil's blog and is reused with permission._
--------------------------------------------------------------------------------
via: https://opensource.com/article/20/5/plotly-python
作者：[Shaun Taylor-Morgan][a]
选题：[lujun9972][b]
译者：[译者ID](https://github.com/译者ID)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://opensource.com/users/shaun-taylor-morgan
[b]: https://github.com/lujun9972
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/colorful_sound_wave.png?itok=jlUJG0bM (Colorful sound wave graph)
[2]: https://opensource.com/resources/python
[3]: https://opensource.com/article/20/4/plot-data-python
[4]: tmp.c4bQMTUIxx#GraphObjects
[5]: tmp.c4bQMTUIxx#DataDrivenAPI
[6]: tmp.c4bQMTUIxx#PlotlyExpress
[7]: https://opensource.com/article/20/5/matplotlib-python
[8]: https://opensource.com/sites/default/files/uploads/plotly.png (A multi-bar plot made using Graph Objects)
[9]: https://anvil.works/blog/plotting-in-plotly
[10]: https://opensource.com/sites/default/files/uploads/plotly-pio.png (A multi-bar plot made using JSON-like data structures)
[11]: https://plot.ly/python/plotly-express/
[12]: https://anvil.works/blog/tidy-data
[13]: https://opensource.com/article/20/5/seaborn-visualization-python
[14]: https://opensource.com/sites/default/files/uploads/plotly-express.png (A multi-bar plot made using Plotly Express)
[15]: https://anvil.works/blog/escape-hatches-and-ejector-seats
[16]: https://d3js.org/
[17]: http://stack.gl/
[18]: https://opensource.com/sites/default/files/uploads/plotly-arch.png (Plotly uses a JavaScript library to create plots, driven by libraries in other languages via JSON)
[19]: https://anvil.works/docs/client/components/plots
[20]: https://opensource.com/sites/default/files/uploads/plotting-in-anvil.gif (The election plot on the web using Anvil's client-side-Python Plotly library)
[21]: https://anvil.works/docs/client/python
[22]: https://anvil.works/login?app-name=Plotting%20in%20Plotly&app-author=shaun%40anvil.works
[23]: https://opensource.com/sites/default/files/uploads/plotly-tooltips.png (A multi-bar plot with custom tool-tips)
[24]: https://opensource.com/sites/default/files/uploads/plotly-event-handling.gif (A multi-bar plot with a hover event handler)

90
sources/tech/20200529 Beaker Browser 1.0 Beta- One Step Forward and Two Steps Back.md Normal file
View File

@ -0,0 +1,90 @@
[#]: collector: (lujun9972)
[#]: translator: ( )
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
[#]: subject: (Beaker Browser 1.0 Beta: One Step Forward and Two Steps Back)
[#]: via: (https://itsfoss.com/beaker-browser-1-release/)
[#]: author: (John Paul https://itsfoss.com/author/john/)
Beaker Browser 1.0 Beta: One Step Forward and Two Steps Back
======
I recently reviewed the [Beaker Browser][1]. About a week after that review was published, the devs [released Beaker 1.0 Beta][2]. And that changes almost everything I had observed in the previous article.
This made me do an entire article on the new Beaker Browser.Here’s what’s been changed!
### No more Dat, Beaker now uses Hypercore protocol
![][3]
One of the most significant changes to Beaker is the introduction of a new protocol. Up to now, Beaker has used the [Dat protocol][4] to distribute content. Beta 1.0 replaces Dat with [Hypercore][5].
One of the components is Hyperdrive [version 10][6], which was released the same days as Beaker. Hyperdrive is “a POSIX-like filesystem implementation, written in Node.js, that’s designed to be the storage layer for fast, scalable, and secure peer-to-peer applications.”
Like BitTorrent, Hyperdrive can be used to share a large collection of files. However, unlike BitTorrent, the contents can be modified.
![][7]
Switching to the new protocol brings the following changes:
* Performance is now vastly superior thanks to new data structures.
* Connection-reliability has improved thanks to a switch to a hole-punching DHT.
* A new “mounts” feature for composing multiple Hyperdrives into a single hierarchy.
Since Beaker switched over to a new protocol, all previously created websites don’t work anymore. They did include a tool to convert sites from Dat to Hypercore. I tried it on a couple of one-page sites and it failed. It only created a new site that was totally empty of content.
### New Beaker-website creating tools
The Beaker devs introduced several new tools to make editing easier. Now when you edit or create a site, you will get a split-screen view with a code editor on the left and a preview window on the right. The preview is updated whenever you save your work.
![Beaker Site Editing][8]
Besides the editor you can also open a file manager to import and manage files and images. They also included a terminal application called [webterm][9]. This terminal can only interact with the contents of the site you are working on, but it is still pretty cool. webterm only comes with 10 simple commands. If you are adventurous you can write your own commands for it, using Javascript.
You can pop out each of these tools into their own window. If you have all three open, the left-hand panel can get crowded very quickly.
You can see more information about the release [here][2]
### Final thoughts on the Beaker Browser 1.0 beta release
When I saw the announcement for Beaker Browser 1.0 Beta, I was hopeful that some of the complaints I had in the review would be fixed. Unfortunately, that didn’t happen.
My biggest problem with Beaker Browser was that it was hard to find `dat` powered content. In the previous version, there was a page with a list of about a dozen projects running on the Dat protocol, but that was it.
If you dig around on the new version, you can find a list of people who have profiles created on Hypercore. Unfortunately, most of those pages are either blank or something someone quickly threw together. I imagine that this will change with the final version of 1.0 is released.
![Beaker User Directory][10]
I did enjoy the editing tools. It made it very easy to slap together a quick webpage with a couple of lines of Markdown. I did create a site, but I’m not going to leave Beaker Browser running 24/7 to seed it. There currently isn’t any other way to do it.
What are your thoughts on the Beaker Browser? What are your thoughts on the peer-to-peer web? Please let us know in the comments below.
If you found this article interesting, please take a minute to share it on social media, Hacker News, or [Reddit][11].
--------------------------------------------------------------------------------
via: https://itsfoss.com/beaker-browser-1-release/
作者：[John Paul][a]
选题：[lujun9972][b]
译者：[译者ID](https://github.com/译者ID)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://itsfoss.com/author/john/
[b]: https://github.com/lujun9972
[1]: https://itsfoss.com/beaker-browser/
[2]: https://beakerbrowser.com/2020/05/14/beaker-1-0-beta.html
[3]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2020/05/Beaker-Browser-1-beta.png?ssl=1
[4]: https://www.datprotocol.com/
[5]: https://hypercore-protocol.org/
[6]: https://blog.hypercore-protocol.org/posts/announcing-hyperdrive-10/
[7]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2020/05/beaker-start-page.jpg?resize=800%2C426&ssl=1
[8]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2020/05/beaker-site-editing-800x426.jpg?resize=800%2C426&ssl=1
[9]: https://docs.beakerbrowser.com/advanced/webterm
[10]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2020/05/beaker-user-directory.jpg?resize=800%2C426&ssl=1
[11]: https://reddit.com/r/linuxusersgroup

67
sources/tech/20200529 What is the Difference Between Soft link vs Hard link in Linux.md Normal file
View File

@ -0,0 +1,67 @@
[#]: collector: (lujun9972)
[#]: translator: ( )
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
[#]: subject: (What is the Difference Between Soft link vs Hard link in Linux?)
[#]: via: (https://www.2daygeek.com/difference-between-soft-link-vs-hard-link-linux/)
[#]: author: (Magesh Maruthamuthu https://www.2daygeek.com/author/magesh/)
What is the Difference Between Soft link vs Hard link in Linux?
======
A link is a mechanism for creating a shortcut to the original file or directory. It contains information about another file or directory.
Links allow more than one filename to reference the same file.
### What’s Soft link
A symbolic link, also known as a symlink or a soft link, is a special type of file that points to another file or directory on Linux.
It’s like a shortcut in Windows. It contains the path of the original file and not the contents.
In general Symbolic links are used to link libraries. Also, used to link log files and folders on mounted NFS (Network File System) shares.
### What’s Hard link
Hard link is a mirror copy of the original file. Deleting the original file does not impact anything, because the hard link file serves as a mirror copy of the original file.
Why would you want to create a link file instead of copying them?
This is especially useful when you want to keep a same files in multiple location with updated contents.
When you copy a file to another location, it will copy the content and never get updated from the source file.
The contents of the file will be different from time to time.
### The difference between Soft link vs Hard link
I’ve included possible difference between soft link and hard link in the table below.
S.No | Soft Link | Hard Link
---|---|---
1 | The soft link is similar to the file shortcut on Windows. | Hard link is a mirror copy of the original file.
2 | Soft link can be called Symbolic link or symlink. | Hard link has no other name
3 | Changes in both file are reflected in the other. | It's like a soft link.
4 | Soft links can be created on different file systems. | Hard link can only be made on the same file system.
5 | Can create a soft link to files and directories | Only files can be linked
6 | It has different inode number and file permissions compared to the original file. | It has the same inode number and file permissions.
7 | It contains the path of the original file and not the contents. | It contains the actual contents of the original file.
8 | When the original file is removed, the link will die because it points to a non-existent file. This is called the hanging link. | Nothing happens when the original file is removed.
9 | You can create a soft link with the following command (# ln -s [Source Filename] [Link Name]) | Hard link can be created using the following command (# ln [Source Filename] [Link Name])
10 | The soft link file contains a special symbol "l" in the file permission field. | There is no special symbol for this.
11 | You can find the soft link file with the following command (# find / -type l) | You can find the hard link file with the following command (# find / -samefile [Source Filename])
12 | A broken soft link can be found using the following command (# symlinks [Path/to/Directory]). | Not applicable
--------------------------------------------------------------------------------
via: https://www.2daygeek.com/difference-between-soft-link-vs-hard-link-linux/
作者：[Magesh Maruthamuthu][a]
选题：[lujun9972][b]
译者：[译者ID](https://github.com/译者ID)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://www.2daygeek.com/author/magesh/
[b]: https://github.com/lujun9972

159
translated/tech/20200525 How to Execute a Command or Script at Reboot or Startup.md Normal file
View File

@ -0,0 +1,159 @@
[#]: collector: (lujun9972)
[#]: translator: (geekpi)
[#]: reviewer: ( )
[#]: publisher: ( )
[#]: url: ( )
[#]: subject: (How to Execute a Command or Script at Reboot or Startup)
[#]: via: (https://www.2daygeek.com/execute-run-linux-scripts-command-at-reboot-startup/)
[#]: author: (Magesh Maruthamuthu https://www.2daygeek.com/author/magesh/)
如何在重启或启动时执行命令或脚本
======
总所周知 Linux 可以在启动时添加服务。
例如，如果要在**[启动时添加][1]** Apache Httpd 服务，你可以在 chkconfig 和 systemctl 命令的帮助下完成此操作。
有时你需要在启动时添加自定义脚本、命令或服务，该怎么做？
你可以使用以下三种方法来做到。
在本文中，我们将通过示例向你展示如何使用这些方法。
### 方法 1：如何使用 /etc/rc.d/rc.local 文件在重启或启动时运行脚本或命令
传统上，**“/etc/rc.local”** 文件是在切换到多用户运行级别的过程结束时启动所有正常的计算机服务之后执行的。
此方法也适用于 systemd 系统。
你需要将脚本位置添加到 “/etc/rc.d/rc.local” 文件中以在启动时运行。
确保文件有运行权限。
```
# chmod +x /etc/rc.d/rc.local
```
为了演示，我们将创建一个简单的示例脚本。你可以根据需要创建任何脚本。
```
# vi /opt/scripts/run-script-on-boot.sh
#!/bin/bash
date > /root/on-boot-output.txt
hostname > /root/on-boot-output.txt
```
脚本完成后，设置可执行权限。
```
# chmod +x /opt/scripts/run-script-on-boot.sh
```
最后，将该脚本添加到文件底部。
```
# vi /etc/rc.d/rc.local
/opt/scripts/run-script-on-boot.sh
```
**[重启系统][2]**进行检查。
```
# reboot
```
### 方法 2：如何使用 crontab 在重启或启动时执行命令或脚本
cron 在特定时间在后台自动执行计划的作业。
可以在 **[cron 任务][3]**中使用特殊的字符串 **“@reboot”** 来完成。
@reboot 是一个特殊的字符串，它允许用户在启动时运行任何命令或脚本。
此示例在系统重启时运行 “/opt/scripts/run-script-on-boot.sh” 文件。
我们将使用与上面相同的脚本。
为此，只需在 crontab 文件中添加以下条目。
```
# crontab -e
@reboot /opt/scripts/run-script-on-boot.sh
```
重启系统进行检查。
```
# reboot
```
### 方法 3：如何使用 systemd 服务单元在重启或启动时运行命令或脚本
此方法仅适用于 systemd 系统。该方法非常简单。
我们将使用上面相同的脚本进行演示。
为此，你需要创建一个 systemd 启动脚本并将其放在 **”/etc/systemd/system/“** 目录中。
这是我们的示例 systemd 启动单元脚本。
```
# vi sample-on-boot-script.service
[Unit]
Description=Run a Custom Script at Startup
After=default.target
[Service]
ExecStart=/opt/scripts/run-script-on-boot.sh
[Install]
WantedBy=default.target
```
将单元脚本放置在 systemd 所在位置后，运行以下命令更新 systemd 配置文件并启用服务。
```
# systemctl daemon-reload
# systemctl enable sample-on-boot-script.service
```
重启系统进行检查。
```
# reboot
```
### 额外提示：
如果你想在后台运行脚本，你需要在最后加上 “&amp;” 符号
```
/Path/To/My_Script &
```
如果你想以不同用户运行命令，使用以下格式。
```
su - $USER -c /Path/To/My_Script
```
--------------------------------------------------------------------------------
via: https://www.2daygeek.com/execute-run-linux-scripts-command-at-reboot-startup/
作者：[Magesh Maruthamuthu][a]
选题：[lujun9972][b]
译者：[geekpi](https://github.com/geekpi)
校对：[校对者ID](https://github.com/校对者ID)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
[a]: https://www.2daygeek.com/author/magesh/
[b]: https://github.com/lujun9972
[1]: https://www.2daygeek.com/enable-disable-services-on-boot-linux-chkconfig-systemctl-command/
[2]: https://www.2daygeek.com/6-commands-to-shutdown-halt-poweroff-reboot-the-linux-system/
[3]: https://www.2daygeek.com/linux-crontab-cron-job-to-schedule-jobs-task/