嘻哈mula什么意思

by Lawrence Yeo

由杨紫琼

It was 2 AM on a Saturday night, and I was up late working on a new project.

星期六晚上凌晨2点，我在一个新项目上迟到了。

As a beatmaker, you would think that my screen would look something like this:

作为一个节拍手，您会认为我的屏幕看起来像这样：

But instead, it looked like this:

但是，它看起来像这样：

Rather than programming kicks and snares, I was trying to build out a sticky navigation bar on my website. Yeah, it’s not quite machine learning or AI, but for me, this was a pretty big deal.

我没有在编程上一网打尽，而是试图在我的网站上建立一个粘性导航栏。 是的，这不完全是机器学习或AI，但是对我来说，这是一个很大的问题。

You see, I never once considered myself to be a web developer. I have a couple of friends who did it for a living. But every time they opened up their code editors to show me what they were working on, it would just look like one of those GIFs that eternally loops into itself.

您知道，我从未认为自己是网络开发人员。 我有几个朋友以谋生为生。 但是每次他们打开代码编辑器向我展示他们在做什么时，它就像是永远循环进入其自身的那些GIF之一。

Naturally, I would get up and think, Thank goodness I don’t have to do that. I’m just a guy making a ton of beats all day!

自然，我会起身思考， 谢天谢地，我不必那样做。 我只是一个整日做大量节奏的家伙！

Well… that thought was short-lived.

好吧……那想法是短暂的。

Soundcloud, Spotify, and Bandcamp have made it infinitely easier for musicians to get their work out to the public. But music is now scattered across so many platforms that it’s hard for listeners to find exactly what they want.

Soundcloud，Spotify和Bandcamp使得音乐家向公众公开作品变得更加容易。 但是音乐现在分散在许多平台上，以至于听众很难找到他们想要的东西。

It was clear to me that I needed a website to act as a central hub for my work. Just like my favorite musicians, I wanted a webpage featuring a nice navigation bar and a large hero image of myself not looking into the camera.

对我来说很明显，我需要一个网站来充当我工作的中心枢纽。 就像我最喜欢的音乐家一样，我想要一个网页，上面有一个漂亮的导航栏，并且有一个大英雄形象，表示自己不注视镜头。

I originally tried using Squarespace, but I didn’t like how I had to start with a template, then work within the confines of pre-determined blocks.

我最初尝试使用Squarespace，但我不喜欢从模板开始然后在预定块的范围内工作的方式。

And the themes were too commonplace. You would click on your-favorite-artist.com, only to land on the same Squarespace template that you’ve seen hundreds of times already.

主题太普通了。 您只需点击your-favorite-artist.com ，即可进入已经看到数百次的相同Squarespace模板。

I wanted to build something from the ground-up — even if I was armed with no prior knowledge of HTML and CSS.

我想从头开始构建一些东西-即使我不具备HTML和CSS的先验知识。

I wanted to challenge myself.

我想挑战自己。

So I purchased a Udemy course, downloaded Brackets, and started the lessons.

因此，我购买了Udemy课程 ，下载了Brackets，然后开始了课程。

And… wow. I was immediately hooked.

还有...哇。 我立即被迷住了。

Just a month or two later, my website was live, and it was done entirely from scratch.

一两个月后， 我的网站开始运行了 ，并且完全是从头开始的。

Trebles and BluesTrebles and Blues is a Los Angeles-based beatmaker that takes influence from a multitude of creative outlets.www.treblesandbluesmusic.com

Trebles and Blues Trebles and Blues是一家位于洛杉矶的节拍制作人，受到众多创意商店的影响。 www.treblesandbluesmusic.com

So… what made me love the experience so much?

那么……是什么让我如此喜欢这个经历？

Here are some of the things I found particularly cool:

以下是我发现特别酷的一些内容：

The “turn a turd into a diamond” philosophy: the ability to build out raw content in HTML (no matter how crappy it would look), and then beautify it in CSS

“把钻石变成钻石”的理念 ：能够在HTML中构建原始内容(无论外观多么糟糕)，然后在CSS中对其进行美化

The re-contextualization of existing resources: take images, icon fonts, etc. from anywhere and manipulate them to fit your narrative

重新配置现有资源 ：从任何地方获取图像，图标字体等，并对其进行调整以适合您的叙述

The usage of external tools: the availability of jQuery plug-ins I could use to enhance the page

外部工具的使用 ：我可以用来增强页面的jQuery插件的可用性

After stepping back and thinking about it for a bit, it made sense as to why I enjoyed it so much.

在退后一步并思考了一下之后，就可以理解为什么我这么喜欢它了。

These same elements are firmly embedded into the beatmaking process as well!

这些相同的元素也牢固地嵌入到制音过程中！

It might seem unlikely, but it became very clear to me that there was a strong link between web development and music production. Let’s take some time to explore this connection further.

这似乎不太可能，但是对我来说很清楚，网络开发与音乐制作之间存在着紧密的联系。 让我们花一些时间进一步探讨这种联系。

For those of you that are unfamiliar with hip hop production, I am going to simplify the process down to the following three steps:

对于不熟悉嘻哈制作的人，我将简化为以下三个步骤：

Drums

鼓

Sampling

采样

Instrumentation

仪器仪表

For purposes of this exercise, I will deconstruct the following beat, titled “Clear Skies Ahead” (taken from my Soundcloud page):

为了本练习的目的，我将解构以下拍子，标题为“前方晴朗的天空”(摘自我的Soundcloud页面 )：

I chose it because it’s fairly simple in structure, the source files are still intact, and… it’s a pretty chill beat ?.

我选择它是因为它的结构非常简单，源文件仍然完好无损，并且…相当不错。

I will walk through each of the steps using this song, and detail how HTML and CSS is more hip hop than you could have ever imagined.

我将使用这首歌逐步讲解每个步骤，并详细介绍HTML和CSS如何比您想像的更时髦。

I want to highlight two key characteristics of HTML:

我想强调HTML的两个关键特征：

HTML provides structure. HTML provides the architecture for the page. In a typical HTML document, we have , ;head;, , tags that clearly delineate each section, along with calls to any necessary CSS files and jQuery plug-ins.

HTML提供了结构。 HTML提供了页面的体系结构。 在典型HTML文档中，我们有, ＆l t;head ＆g t;, ，标签，这些标签清楚地描绘了每个部分，以及对任何必要CSS文件和jQuery插件的调用。

HTML houses the content that will be styled later. Although HTML is responsible for a page’s content, we code everything in a way that makes it easy for us to style later. The initial preview may look really crappy now, but we’re setting it up for future beautification via CSS.

HTML包含将在以后设置样式的内容。 尽管HTML负责页面的内容 ，但我们对所有内容进行编码的方式使我们以后可以轻松设置样式 。 最初的预览现在看起来确实很糟糕，但是我们正在设置它，以便将来通过CSS进行美化 。

The drums of a beat also have very similar characteristics:

拍子的鼓也有非常相似的特征：

Drums provide structure. They’re the foundation of the song. They form the groove that will carry the listener.

鼓提供结构。 它们是这首歌的基础。 它们形成了将承载听众的凹槽。

Drums house sounds that will be styled later. They generally lack character at first. It’s usually when the proper effects are applied that they truly come to life.

鼓的声音将在以后设置。 他们一开始通常缺乏品格。 通常只有在应用适当的效果后，它们才能真正生效。

Let’s take a listen to the initial drums for the reference beat, “Clear Skies Ahead.” The raw pattern consists of kicks, snares, and a looped drum break:

让我们来聆听参考鼓 “ Clear Skies Ahead”的初始鼓声 。 原始模式包括脚踢，网罗和循环的鼓声休息：

It sounds… okay. The structure is there, the groove is there, but it lacks character. The kick sounds jarring. The snare sounds hollow. And the drum break is hiding in the background.

听起来... 好吧 。 结构在那里，凹槽在那里，但缺乏特色。 脚踢听起来很刺耳。 军鼓听起来是空心的。 鼓声隐藏在背景中。

So we must stylize and beautify it!

因此，我们必须对其进行样式化和美化！

To beef up the low-end on the kick, I applied an equalizer on it. This effect allows me to adjust the different frequencies on a sound. To give the snare more life, I added a reverb effect so it would echo out. To give the sampled break presence, I used an effect called a stereo imager to widen it across the beat.

为了增强踢低端功能，我在其上应用了均衡器 。 这种效果使我可以调整声音的不同频率。 为了使圈套器更有生命，我添加了混响效果，使之回响。 为了给出采样的休息时间，我使用了一种称为立体声成像器的效果来将其扩展到整个节拍。

This can be the equivalent of assigning a div element with classes “equalizer”, “reverb”, and “stereo-imager” to the various sections in HTML:

这等同于为HTML的各个部分分配一个带有“ equalizer”，“ reverb”和“ stereo-imager”类的div元素：

The “boom”

The “bap”

”Boom-bap”

Then we can adjust the styles of the classes accordingly in CSS:

然后，我们可以在CSS中相应地调整类的样式：

Here’s the sonic equivalent of styling the drums (with the processed effects):

这是对鼓定型的声音(带有经过处理的效果)：

As you can hear, the drums truly come to life once the appropriate effects have been applied. Similarly, the content in your webpage can only be presented after it has been properly styled in CSS.

如您所见，一旦应用了适当的效果，鼓就会真正栩栩如生。 同样，网页中的内容只有在CSS中正确设置样式后才能显示。

Regardless of what your views on sampling may be, it’s a staple in hip hop culture. I absolutely love it, and find it to be an amazing way to breathe new life into pre-existing works of art.

无论您对抽样的看法是什么，它都是嘻哈文化的主要内容。 我绝对喜欢它，并发现它是将新生命带入现有艺术品的一种神奇方式。

There’s a technique in hip hop called “chopping,” in which you take an older song, slice it up into small pieces, and replay them in a new sequence to create a whole new song.

嘻哈音乐中有一种称为“斩波”的技术，您可以将一首较旧的歌曲切成小段，然后以新的顺序重播以创建一整首新歌曲。

Using “Clear Skies Ahead” as an example, the below clip details the 3-step process:

以“提前清除天空”为例，以下剪辑详细介绍了三步过程：

Building a webpage follows the same philosophy.

建立网页遵循相同的理念。

Let’s say you’re building a very simple page of four centered images that changes opacity when you hover over them. The same 3-step process applies here as well:

假设您正在构建一个非常简单的页面，其中包含四个居中的图像，当您将它们悬停在它们上面时，它们会改变不透明度。 同样的三步过程也适用于此：

Identify the images to be used

识别要使用的图像

You can use Unsplash or any of these beautiful stock photo sites to find images you’d like.

您可以使用Unsplash或任何这些美丽的图片网站查找所需的图像。

2. Arrange the images in HTML in a sequence that fits a narrative

2. 按照适合叙述的顺序排列HTML中的图像

3. Add the necessary effects in CSS to finish up the page

3. 在CSS中添加必要的效果以完成页面

This process of actively digging for resources, rearranging them, and styling them according to your preferences is universal in both hip hop and web development.

主动挖掘资源，重新排列资源并根据您的喜好对其进行样式设置的过程在嘻哈和Web开发中都是普遍的。

To finalize this beat, I want to add a low, sub bass sound that will bring everything together. It will act as the glue that rounds out the low frequencies in the beat and fills it out.

为了最终确定此节拍，我想添加一个低音炮，将所有声音组合在一起。 它将充当胶粘剂，将拍子中的低频取整并填充。

“But what do I do if I don’t have a bass guitar? And even if I did have one, I wouldn’t know how to play it!”

“但是，如果我没有低音吉他该怎么办？ 即使我确实有一个，我也不知道该怎么玩！”

And that’s where virtual instruments come in. They come in the form of stock sounds or third-party plug-ins, and they allow you to access sounds that would otherwise be difficult to obtain. They allow you to create a synth sound without an actual synthesizer module, a violin sound without actual stringed instruments, and so on.

这就是虚拟乐器的用武之地。它们以股票声音或第三方插件的形式出现，它们使您可以访问原本很难获得的声音。 它们允许您创建没有实际合成器模块的合成声音，没有实际弦乐器的小提琴声音等等。

For “Clear Skies Ahead”, I added the virtual instrument that contained the sub bass, recorded it, and applied it to the existing beat:

对于“前方清晰的天空”，我添加了包含次低音的虚拟乐器，对其进行了录制，并将其应用于现有的节拍：

This philosophy of using an external instrument is just like using a great jQuery plug-in for your site. They both allow you to easily access a feature that would otherwise be difficult to craft on your own.

使用外部工具的理念就像为您的站点使用出色的jQuery插件一样。 它们都使您可以轻松访问原本很难自行制作的功能。

To illustrate this on my webpage, let’s insert an image gallery that can display the four seasonal images in my earlier example. Instead of building one from scratch, let’s leverage jQuery and use a great-looking plug-in. I will use Swipebox:

为了在我的网页上对此进行说明，我们在前面的示例中插入一个可以显示四个季节性图像的图像库。 与其从头开始构建，不如使用jQuery并使用美观的插件。 我将使用Swipebox ：

For mobile readers, view my JSFiddle here.

对于移动读者，请在此处查看我的JSFiddle。

In both scenarios, I used external resources that were seamlessly integrated into each platform. Both were easily accessible and allowed for richer experiences for the visitor and listener.

在这两种情况下，我都使用了无缝集成到每个平台中的外部资源。 两者均易于访问，并为访问者和听众提供了更丰富的体验。

Although I’ve only been coding for a few months, I’ve made hundreds and hundreds of beats over the last six years. When I became aware of the strong similarities between the two, I was able to leverage my experience as a musician to become a better web developer.

尽管我只编码了几个月，但在过去的六年中，我已经做出了几百次的节奏。 当我意识到两者之间的强大相似性时，我能够利用自己作为音乐家的经验，成为一名更好的Web开发人员。

And that leads me to my final thought:

这使我想到了最后的想法：

To create a fun learning experience, find how an existing passion connects to the new topic you’re studying.

要创建有趣的学习体验，请找到现有的热情如何与您正在研究的新主题联系在一起。

It makes the concepts easier to understand, and it also reaches into the pot of excitement that you already have for your existing passions or hobbies.

它使概念更容易理解，并且也激发了您已经为现有的激情或爱好而兴奋的一面。

In my case, understanding the link between HTML/CSS and music production greatly accelerated my learning curve and made for a really fun experience. When I was building my site, I entered flow states that were reminiscent of what I would feel during my beatmaking sessions.

就我而言，了解HTML / CSS与音乐制作之间的联系极大地加快了我的学习进度，并带来了非常有趣的体验。 在建立网站时，我进入的流程状态让人想起在节拍制作过程中的感受。

How do your existing passions line up with a new skill set you’re learning? They might seem wildly different at first, but take the time to look a little deeper.

您现有的激情如何与正在学习的新技能相结合？ 乍一看，它们可能看起来大相径庭，但请花一些时间深入了解。

If seemingly unrelated skills like making beats and writing code can pair well together, you should be able to find a similarly strong connection between your various interests as well!

如果看似无关紧要的技巧(例如拍子和编写代码)可以很好地组合在一起，那么您也应该能够在您的各种兴趣之间找到相似的紧密联系！

Hey there, I’m Lawrence, and I make beats under the name Trebles and Blues. I just released a new EP, Set It Off, which is out now. For more music, feel free to check out my Soundcloud page.

嘿，我是劳伦斯(Lawrence)，我用Trebles and Blues的名字打节奏。 我刚刚发布了一个新的EP，名为“ Set It Off”， 现在已经淘汰了 。 如需更多音乐，请随时查看我的Soundcloud页面 。

翻译自: https://www.freecodecamp.org/news/how-making-hundreds-of-hip-hop-beats-helped-me-understand-html-and-css-cb7c61e847cf/

嘻哈mula什么意思