推荐理由：虽然大部分人可能都知道但是这里还是解释一下，hash function，即散列函数，可以按照需要记录的数据中关键码的值来提供一个表中的位置以便于存储，而这个项目就是一个不考虑任何加密的情况下可以很快生成目标位置的 hash function，当然了，你也不用担心它的冲突问题。如果你不需要加密的 hash 函数就可以关注一下它了，等它正式完成之后肯定能帮上忙。
今日推荐英文原文：《Beginner’s Web Development Guide Part 1: Frontend》作者：Pavels
Beginner’s Web Development Guide Part 1: Frontend
A few days ago I’ve posted a short essay on why I decided to start the DevTrails project mentioned, that I will begin working on the first guide. Most of my personal background is in web development, so I thought this is a good place to start. It’s also one of the largest segment of the industry with high demand both in startups and in the enterprise sector. This guide will start with the very basics, so I feel that it might be more interesting for beginners, but intermediate developers might discover something new as well.
For beginners, it’s easy to get into web development because there are many languages with relatively low entry barriers, a lot of free open-source tooling and many frameworks that simplify development. On the other hand, there is so much to choose from. The difficult part about development is that you need to combine a lot of components together for your application to work. Which UI framework to choose? Where to store your data? PHP, Python, Ruby or something else? How to host your application? I hope this guide will shed some light on this and help you figure out your way around web development and maybe even start a career.
The guide will we split into several parts and today we’ll start with the first one — Frontend development, and introduce you to the most important languages and tools in this area.
Frontend development languages and tools
We’ll start with a sort of a map of the frontend landscape that depicts the things you should at least know about to orientate in this area.
The color coding of the chart is very simple: yellow lines show the basic things you need to learn, while orange represents more advanced topics that you can leave for later.
Frontend development is also tightly related to web design and user experience and the border between the two can be different in each company. In general frontend developers focus on technical issues, while web designers are concerned with aesthetics and user experience.
Hyper Text Markup Language (HTML) is a markup language that allows you to structure the information that is displayed to the user. Its the An HTML document consists of elements each represented by an HTML tag, such as a heading, a paragraph of text or a text input field. HTML documents can also link to other documents using hyperlinks. Each tag carries its own type of content, has a certain appearance and attached behavior. Once you get a hang of HTML, you will be able to create very simple static HTML pages.
Cascading Style Sheets (CSS) is a styling language used to describe the visual appearance of HTML elements. It can be used to controls aspects like the positioning of an element, its dimensions, text style or colors, or almost any other visual aspect of a website. Styles are defined as a set of rules that can be applied to a single element of a subset of elements on the page. Recent CSS features allow you to go way beyond basic styling and control more complex visual aspects, such as animations.
CSS is a powerful language but it has its constraints when it comes to code reuse, verbosity, and isolation. Because of this, maintaining a large CSS code base can be difficult. To address these shortcomings, a number of solutions have been created by the community. These languages and their compilers are generally referred to as CSS preprocessors.
- Sass/SCSS extends the capabilities of CSS to make your CSS code base more maintainable. Some of the features, such as nesting, make CSS less verbose and easier to write, while other such as variable and mixins allow for code reuse. It also supports importing other SCSS files that allows you to break your code into smaller files. Some popular CSS frameworks such as Compass are based on Sass.
- Less is a preprocessor with a feature set similar to Sass. Despite their similarity, there are a number of differences in the underlying implementations. Although being popular in the past, a lot of developers are now moving away from Less in favor of Sass or PostCSS.
- Angular — a component-oriented “batteries included” type of framework developed by Google. Angular applications are usually written in TypeScript. It provides most o the things you’ll need to build a web application including a CLI tool to bootstrap, develop and build the project as well as libraries to manage forms, data loading, routing, etc. Although it does provide most of the things out of the box, it has a higher abstraction and complexity levels, and the need to learn TypeScript as a primary development language makes the initial learning curve steeper.
- Vue.js is a framework designed to be modular and incrementally adoptable. You can start using it as a view layer and add additional libraries as you need them. In contrast to other frameworks, the most important libraries are maintained by the core Vue.js team.
The frontend ecosystem is known for its large arsenal of helpful tools each designed for their own purpose. Since there are so many of them, there’s no way we can cover everything in this guide, so instead, we’ll focus on several that are important to get started with.
Npm actually means two things:
1. A software registry that contains thousands of open-source libraries and tools that you can install and use in your project.
2. A CLI tool that allows to install, update and remove packages from the registry.
Using npm allows you to install libraries that will be used by your project and document them in a JSON file. Storing this file together with the code base means that you can explicitly declare the dependencies of your project and quickly install them on different environments. You can also use it to publish your own libraries and share them with other developers.
The npm CLI tool also allows you to run scripts that can be used to execute tests, compile code or perform code analysis.
An analog to npm is Yarn, that offers some performance improvements and better support for library development and is compatible with the npm package registry.
Rollup.js is sometimes used as an alternative to Webpack.
Chrome DevTools is a rich set of tools available in the Chrome browser. It can be used for a wide range of debugging cases, such as browsing the source code or HTML elements, tracking network requests and measuring the performance of different parts of your application. It allows you to edit pages on the fly which can be useful to quickly test a small set of changes. Having a firm grasp of this tools will save you countless hours of debugging. You can also use it to look under the hood of other web pages and see how they work. Similar tools are also available in other browsers.
This should be enough to get you started on frontend development track. Don’t worry, this is just the tip of the iceberg. If you feel that this is something that you want to learn in more detail, then you will have a whole lot of interesting stuff waiting for you.
In the next chapter, we’ll do an overview of backend development and see what we have on the server-side.