Front End Development UX & UI 设计指南

角度从0到100

当我开始学习Angular时，我很难理解应该如何将思维方式从以前的版本更改为新的方法。这种转变有点令人困惑，将我从教程中学到的东西翻译成自己的项目是困难的，而且充满了错误。我在Internet上只能找到一组示例代码，以及如何使用angular-cli生成它们。并不是说那些没用。毕竟，我设法从这些教程中学习。但是我感到缺少帮助我们了解如何为自己的项目设计和创建角度项目的教程。在本文中，我想展示如何使用现有的问题和项目来创建Angular项目。在您阅读了一些示例（例如Angular的官方英雄教程）后，我相信本教程会很有用。大图景首先，在进一步介绍之前，我想大致了解一下我们要介绍的内容以及我们想如何做。首先，我们必须学习组件和模块的概念。它们的含义以及工作方式。其次，我想谈谈我们项目中不同类型的组件。然后我们讨论路由，最后我们将讨论服务。我尽量不包括代码。由于如果您像我一样，很有可能您会跳过本文并复制粘贴代码。另外，我想使事情尽可能简单。因此，让我们深入。…

凭证开发人员挑战

Voucherify开发人员挑战赛的第一版。阅读下面的任务并开始破解！您有3周的时间提交解决方案。 – 见玛丽。她是一个开源贡献者，并且是Yet Another JS Framework™的创始人。玛丽和她的团队为开放源代码项目注册了免费的Voucherify帐户，并且最近开展了推介活动以推广其SWAG商店-这是“捐赠”按钮的替代方法。玛丽给出了唯一的推荐代码。玛丽的程序如何运作？假设您是推荐人之一。您将获得一个唯一的代码，可以将其粘贴到整个Internet。如果新购物者用您的代码购买了东西，他们将获得10％的折扣。推荐计划具有多个层次，因此您的奖励取决于您吸引了多少客户：如果您吸引1个人，您将获得5美元的折扣…

Projeto Matrix 3.0

“请给我一个历史……一个历史，一个人，一个人，一个没有问世者的crecreacre。 “您可以在这里找到自己的名字……在马拉维拉大街上……在最远的地方，您可以在这里玩耍。” 在卡里奥卡大学中心大学以前的矩阵中，您可以选择自己的名字。埃斯普雷托签证签证，软件许可证，软件批注，软件，软件，软件，软件，软件和软件。 O grupo回应了pelo projeto se chama CariocaDev。 Neste projeto os alunosvãopoder trabalhar em equipe，desenvolver as…

咬大小的ES6：let和const

在ES6之前，JavaScript开发人员只能使用var标识符声明变量。现在我们有了let和const 。 var first = 'Jake'; let middle = 'Matthew'; const last = 'Wiesler'; console.log(first + middle…

学会敏捷

介绍许多公司和团队以敏捷为荣。但是他们是真正的敏捷者，还是只是展示外观？使用敏捷有很多好处，但是如何确保您的团队是真正的敏捷且不会陷入困境呢？我们将探讨敏捷的历史，优势以及如何将其叠加到另一种软件开发方法上：瀑布。我并没有声称自己是专家（我仍在学习每天变得敏捷的含义），但这可能有助于阐明该范式的含义。敏捷简史 1970年，温斯顿·罗伊斯（Winston Royce）博士写了一篇题为“管理大型软件系统的开发”的论文，他指出，不应像在装配线上的汽车一样开发软件，一旦完成上一步，便要依次添加每个软件。。实际上，他认为以这种方式完成的软件开发“注定要失败”。据罗伊斯（Royce）称，如果每个阶段的小组都没有沟通就孤立了，就不可能成功。然后，在2001年，犹他州的17个软件开发人员开会讨论了轻量级开发方法。他们发表了《敏捷软件开发宣言》，其重点是“发现通过开发软件并帮助他人开发软件的更好方法。” 敏捷宣言基于以下十二个关键点：通过尽早连续交付有价值的软件来使客户满意即使在后期开发中也欢迎不断变化的需求工作软件经常交付（数周而不是数月）…

2018年Vue.js最受欢迎的5个功能

Vue以其易用性和简单性而闻名。它部分地通过具有集中的小型API而没有太多多余的功能来达到这些品质。也就是说，用户和维护者始终在考虑潜在有用的新功能。本文讨论了Vue的GitHub问题板上最受欢迎的五个功能。通过v-for支持可迭代协议多根模板（片段）反应裁判自定义v-model修改器自定义渲染器包意识到这些功能请求是一件好事，因为有些功能会进入即将发布的Vue版本，而有些功能可能无法帮助您更好地了解Vue的设计。注意：本文最初于2018/09/17发布在Vue.js开发人员博客上 1.通过v-for支持可迭代协议它是什么？当您想到迭代时，您很可能会想到数组。 ES2015引入了可迭代协议，该协议在实现时允许使用for...of来迭代任何类型的对象。 ES2015还引入了新的可迭代数据类型，例如Map和Set 。…

使用ReactJS进行拉入刷新和无限表视图的最简单方法

拉动刷新和拉动加载更多在Web中显示数据极为常见，在React中有很多库可以实现它，但是存在一些问题。它们中的大多数很难进行子类化，您需要使用其组件来渲染单元格。如果要在单元格中添加更多操作，将非常麻烦。刷新库和无限库通常是分开的，您必须集成这些库并进行更改以使它们的样式与您的Web相同。其中一些非常庞大，或者甚至必须包括额外的依赖项。作为一个反应灵敏的初学者，我想到的第一个问题是……有必要吗？🤔 好吧…那么在此表视图中需要什么？将滚动条订阅到顶部和底部事件刷新/加载更多内容插入加载指示器收到新数据后关闭加载指示器好吧..如何靠自己做？？？滚动到顶部和底部事件感谢Google，有一些DOM属性scrollTop ， clientHeight和scrollHeight足以检测向上滚动和向下滚动事件，让我们在onScroll事件中使用它。 var scrollviewOffsetY…

使用React构建图谱应用程序（第1部分）

如何构建自己的Graph App？您可以从头开始或通过包装现有的单页Neo4j应用程序（或任何其他“在线URL”）来创建自己的Graph App。 graph-app-starter存储库中的示例应用程序将帮助您入门。但是，实际上，您将如何开始？让我们启动“单一文件图应用程序”。尽管只是index.html文件，但它是Neo4j Desktop API的很好的介绍。首先，克隆graph-app-starter存储库并导航到graph-app-starter/examples/basic-single-file/ ，并注意根文件夹的路径。在浏览器中打开index.html文件，并记下文件URL。您也可以在本地或从其他地方静态为其提供服务。在Neo4j Desktop中：在侧栏上打开设置切换开发模式：开…

最轻量的GraphQL前端设置

GraphQL之所以出色，有很多原因。不仅后端可以从中受益，前端也可以从中受益。有各种库可以帮助您处理GraphQL。但是其中大多数都塞满了您可能不需要的功能。这也使它们的尺寸也很大，这当然不利于页面速度。我们在gutefrage.net上需要一个非常基本的GraphQL前端设置，仅需几个必要条件就可以使它如此出色。我不想现在比较所有可用的库，但向您展示具有最基本功能的轻量级设置。实际上只有两个（除了能够发送请求之外）：两个要点：轻巧能够为所有查询和变异生成TypeScript类型我们选择的发送GraphQL请求的库是graphql-request。它只有4 KB的大小（压缩），这使它成为我们可以找到的最小的库。它也很容易使用和支持TypeScript。这基本上就是您发送请求所需要的。没有太多要说的了。如我所说直截了当。…

使用向量的p5.js鼠标跟随教程

我可能在那里丢了一些人，但是所有这一切的重要部分是最后一部分。这归结为四个条件，以计算出要在光标位置和文本位置之间绘制的向量。图形的中心位置是文本位置，从它移出的8条线是我们用来定义矢量方程的任何时间点的光标位置的所有可能。一旦创建了矢量，就可以使用它来沿正确的方向移动文本。我们通过对坐标进行矢量加法或减法来移动文本位置。如果鼠标位置在文本位置的左侧，则从文本位置的x坐标中减去矢量的x方向，或者在右侧添加。如果鼠标位置在我们的文本位置上方，则从文本位置的y坐标减去向量y方向，如果在下面，则相加。最后一件事是设置文本跟随光标的速度。要做到这一点很简单，我们将两点之间的向量乘以一个分数，这就是使文本易于进入光标的原因。随着文本和光标之间的距离增加，文本位置更新所依据的矢量随着文本的靠近而增加和减小。我们可以通过更改speed变量来加快或减慢以下速度。这一切对于现在的人们来说，对于那些已经在教程中走到如此远而又没有入睡的人们，我鼓舞您，我必须感谢您招待我的书呆子。如果有时间，我将来可能会做更多这些教程，所以请继续关注。 — — — — —…