apple id无法创建_我如何为我的Apple收藏夹创建网站

apple id无法创建

A while ago I started an Apple collection. I've been following Apple hardware (and its aesthetics) since I was a teenager, but at that time I didn't the have money to own a Mac.

前一段时间，我开始了一个苹果系列。 从我十几岁起我就一直在关注Apple硬件(及其美学)，但是那时我没有钱拥有Mac。

I got my first Mac when I was 19. It was an iBook 700 Mhz, acquired on an eBay-like website in Brazil. The money came from a Flash project.

我19岁时得到了第一台Mac，那是一台iBook 700 Mhz，在巴西的类似eBay的网站上获得。 钱来自Flash项目。

After living in Canada for a few years now, I have some extra money to spend on a hobby. Most of the time I buy the devices from people on Craigslist.

在加拿大生活了几年之后，我有一些额外的钱可以花在业余爱好上。 大多数时候，我都是从Craigslist上的人那里购买设备的。

After a few laptops and iDevices, I decided that I should start collecting info about my iThings. In the beginning, I created a Gist containing the model, serial number, how I got the device, the minimum/maximum OS, and so on.

在购买了几台笔记本电脑和iDevices之后，我决定应该开始收集有关iThings的信息。 在开始时，我创建了一个Gist，其中包含型号，序列号，如何获得设备，最小/最大OS等。

The list kept getting bigger and bigger, and the content started looking messy. I thought showing this content on a website would be perfect, and I didn't need to hire a developer :D

列表越来越大，内容开始显得凌乱。 我以为在网站上显示此内容将是完美的，并且我不需要雇用开发人员：D

At first, I decided I would organize my data in an SQL database, with the information distributed in different columns and tables. After that, I would create a graphQL API to provide me the data needed to populate my UI – probably written in React, compiled with Babel and packed with Webpack.

首先，我决定将数据组织在一个SQL数据库中，并将信息分布在不同的列和表中。 之后，我将创建一个graphQL API为我提供填充我的UI所需的数据-可能是用React写的，用Babel编译并用Webpack打包的。

Reading the previous paragraph aloud, you can see that there are many technologies, and that I even ignored the backend language and UI details like SASS or styled-components. It all sounded a bit overwhelming when my ultimate goal was showing a list of items in a nice design.

朗读上一段，您会发现有很多技术，而且我什至忽略了后端语言和UI详细信息，例如SASS或样式化组件。 当我的最终目标是显示精美设计中的项目列表时，这一切听起来有些不知所措。

That being said, I thought about how I can deliver this content without:

话虽如此，我想到了如何在没有以下情况的情况下提供此内容：

• An API or any backend work
  API或任何后端工作
• Any JS framework/library
  任何JS框架/库
• Any JS tooling (Webpack, Babel, etc.)
  任何JS工具(Webpack，Babel等)
• Any CSS work
  任何CSS工作

On top of these constraints, I had a few stretch goals:

除了这些限制，我还有一些延伸目标：

• Create a website with good accessibility
  创建具有良好可访问性的网站
• Create a website that works on old browsers, since I have computers running Mac OS 9.2 and iDevices running iOS 3
  创建一个可在旧浏览器上运行的网站，因为我有运行Mac OS 9.2的计算机和运行i​​OS 3的iDevices

Challenge accepted. One index.html, a few vanilla JS files, and no custom CSS. I'd like to share the experience of building the site with you.

接受挑战。 一个index.html，几个原始JS文件，没有自定义CSS。 我想与您分享建立网站的经验。

TL,DR:

TL，DR：

• Final website

  最终网站

• Source code

  源代码

Let's talk about the constraints, point by point:

让我们逐点讨论约束：

没有API或任何后端工作 (No API or any backend work)

A while ago I saw a SaaS product called Stein. You create your data inside a Google Sheets document and they give you an endpoint with your data. Their library works like Handlebars, and it looked perfect for my use case:

不久前，我看到了一种名为Stein的SaaS产品。 您在Google表格文档中创建数据，它们为您提供了数据端点。 他们的库就像把手一样，对于我的用例来说看起来很完美：

<div data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1" data-stein-limit="2"><div><h1>{{title}}</h1><h6>By {{author}}</h6>{{content}}Read on <a href="{{link}}">Medium</a></div>
</div>

没有JS框架/库和工具 (No JS framework/library and tooling)

I decided to avoid adding a framework or library in this project since the use case didn’t need one. All JS interactions on this page are quite simple (show/hide menus, open a modal screen, handle permalinks).

我决定避免在该项目中添加框架或库，因为用例不需要。 此页面上的所有JS交互都非常简单(显示/隐藏菜单，打开模式屏幕，处理永久链接)。

Since I was not using a framework/library, I could avoid adding Webpack and Babel. No need to dig into presets and loaders.

由于我没有使用框架/库，因此可以避免添加Webpack和Babel。 无需深入研究预设和加载器。

P.S. You can argue that I could have chosen create-react-app or Next.js and get all these problems solved, but no.

PS：您可以说我可以选择create-react-app或Next.js并解决所有这些问题，但是没有。

没有CSS工作 (No CSS work)

I love writing CSS, especially when I can use SASS, but I decided not to write any CSS here. I had a few good reasons to avoid doing it:

我喜欢编写CSS，尤其是当我可以使用SASS时，但是我决定在这里不编写任何CSS。 我有几个很好的理由避免这样做：

• I had no designs in mind, and despite the fact that I could do something decent-looking, I didn’t want to put time and energy into it
  我没有设计的想法，尽管我可以做一些看起来不错的事情，但我不想浪费时间和精力

• I wanted to use Tailwind CSS

  我想使用Tailwind CSS

If you've never heard about Tailwind CSS, please don’t just think, “It's just an alternative to Bootstrap.” Here is a good, short explanation from their website:

如果您从未听说过Tailwind CSS，请不要只是想：“它只是Bootstrap的替代品。” 这是他们网站上的简短说明：

Most CSS frameworks do too much. … Instead of opinionated predesigned components, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.

大多数CSS框架做得太多。 ……Tailwind提供了底层实用程序类，而不是预先设计好的组件，可让您构建完全自定义的设计，而无需离开HTML。

This is pretty much true. A quick search gives you many web apps “rebuilt” with Tailwind CSS:

这是真的。 快速搜索为您提供了许多使用Tailwind CSS“重建”的Web应用程序：

• Whatsapp

  Whatsapp的

• Telegram

  电报

• Facebook

  脸书

• Reddit

  Reddit

• Youtube

  优酷

• Slack

  松弛

• Coinbase

  币库

• Github

  Github

• Trello

  特雷洛

• Twitter

  推特

• Netlify

  Netlify

创建具有良好可访问性的网站 (Create a website with good accessibility)

Last month I started taking accessibility courses at Deque University. Their content is great and it reminded me that HTML is accessible by default. By using a semantic HTML structure and testing basic things like keyboard navigation and colour contrast you eliminate several barries that move people with disabilities away from your content.

上个月，我开始在Deque大学学习无障碍课程。 它们的内容很棒，它使我想起默认情况下可以访问HTML 。 通过使用语义HTML结构并测试诸如键盘导航和颜色对比度之类的基本内容，您可以消除使残疾人远离您的内容的若干障碍。

I am not an accessibility expert, but here are a few accessibility-related things I’ve worked on for this website:

我不是辅助功能专家，但是以下是我为该网站所做的一些与辅助功能有关的事情：

• Disable stylesheets: By disabling stylesheets you can ensure that your content follows a logical/structural way.
  禁用样式表：通过禁用样式表，可以确保您的内容遵循逻辑/结构方式。

• VoiceOver: VoiceOver is included in macOS and iOS. It is very simple to use, and by experimenting with it you can have a better understanding of how people use this feature.

  VoiceOver：VoiceOver包含在macOS和iOS中。 它非常易于使用 ，并且通过试验，您可以更好地了解人们如何使用此功能。

• Modals: Modals can be problematic. I decided to follow Ire Aderinokun’s approach.

  模态：模态可能有问题。 我决定遵循艾雷迪诺昆(Ire Aderinokun)的方法。

• axe: The extension is an accessibility checker for WCAG 2 and Section 508 accessibility rules.

  ax ：扩展名是WCAG 2和第508节可访问性规则的可访问性检查器。

It is not perfect -- there are a few things that I didn’t work on for my site, like adding a skip link to the main content. If you are curious, here is the Pull Request with all the changes.

这不是完美的-我在网站上没有做过一些事情，例如添加了指向主要内容的跳过链接。 如果您感到好奇， 这里是带有所有更改的请求请求 。

创建一个可在旧浏览器中运行的网站 (Create a website that works in old browsers)

I couldn’t achieve this objective since I had no control over scripts and styles. However, it doesn’t seem to be impossible. A few things I noticed:

我无法控制脚本和样式，因此无法实现这一目标。 但是，这似乎并非不可能。 我注意到了几件事：

• Expedite (Stein client) uses fetch, which was only added in Safari 10. The request to their server could be probably replaced with an XMLHttpRequest.

  Expedite (Stein客户端)使用fetch (仅在Safari 10中添加) 。 向其服务器的请求可能会替换为XMLHttpRequest。

• Tailwind uses Flexbox in many elements. Safari only started supporting Flexbox in iOS 7. Maybe I could write a few properties for their existing elements to achieve a decent look.
  Tailwind在许多元素中使用Flexbox。 Safari才开始在iOS 7中支持Flexbox。也许我可以为它们的现有元素编写一些属性，以实现美观的外观。
• SSL Certificates may be an issue for old browsers.
  SSL证书可能是旧浏览器的问题。

结论 (Conclusions)

Making this website was super fun. Having this kind of pet project gave me a good reason to work with tech that I don't use in my job. Maybe in the future, Stein and/or TailwindCSS will be useful to prototype a feature or build a hackathon project.

使这个网站超级有趣。 拥有这种宠物项目使我有充分的理由使用我在工作中不使用的技术。 也许在将来，Stein和/或TailwindCSS将对功能原型或构建hackathon项目很有用。

The fact that I added “constraints” to my project made me think outside the box. Even though I didn't achive all my objectives, it helped me understand more and more about how all the pieces are connected.

我在项目中添加了“约束”这一事实使我跳出了框框。 即使我没有实现我的所有目标，它也帮助我越来越了解所有各部分之间的联系。

I totally recommend doing something like this to give you a chance to play with different tech. It doesn't need to be an Apple collection -- you can create a site to list your favourite books or the best hikes you've done. In this case, the journey matters more than the goal.

我完全建议您这样做，让您有机会使用其他技术。 它不一定是Apple收藏的书，您可以创建一个网站来列出自己喜欢的书或您所做的最佳远足。 在这种情况下，旅程比目标更重要。

Out of curiosity, I tracked my time using Clockify and between coding, creating the data, testing and writing this post I’ve worked 13 hours on this.

出于好奇，我使用Clockify跟踪了我的时间，并在编码，创建数据，测试和撰写我为此工作了13个小时的这篇文章之间进行了跟踪。

Also posted on my blog. Follow me on Twitter

也张贴在我的博客上 。 在Twitter上关注我

翻译自: https://www.freecodecamp.org/news/creating-a-website-for-my-apple-collection/

apple id无法创建