I'll speak for myself — as someone who always learned just enough about DNS to get it working, then immediately forgot everything until the next time it broke. It was a vicious cycle until I convinced myself to learn it in depth.  Meanwhile, non-technical folks wisely avoid meddling in such dangerous affairs all together.

Surely, there must be a better way (this is a blog post after all).

Every day, thousands of Cloudflare users add DNS records to their Internet properties to configure awesome tools like G Suite, Shopify, Wordpress, Ghost, and thousands of others.  A new Cloudflare Apps feature allows apps to automatically set up and manage configurable DNS records on more than 12 million registered domains on the Cloudflare network. In short, Cloudflare Apps are here to alleviate the Internet’s collective DNS woes.

Gone are the days of tribulating over whether it’s A or CNAME you should set.  Gone are the days of puzzling between A and AAAA records while wondering what the heck happened to AA and AAA records?  Unload your DNS dysphoria onto highly trained developers experienced at explicating these burdensome questions today!

Did you know?

Are you a highly trained developer?  Cloudflare now provides the tools to build robust, powerful apps that automate DNS record management saving countless developer hours that are currently spent fiddling with DNS.  Instead of manually configuring records to integrate with your solution provider, build a Cloudflare App that does it for you and for everyone else on the Internet.

Pointless DNS is a demo app that showcases the new DNS feature by installing a (pointless) TXT record on any root or subdomain of your choice.  The TXT record is configured and managed by the Pointless DNS app.  Go ahead and install it to see automated DNS record management with Cloudflare Apps.

The TXT record name was set to "blog" during installation

After installation, head over to your DNS dashboard and you'll see the app doing its thing.  If you really want to, you can uninstall it from your Installed Apps page.

Pointless DNS automatically manages its TXT record on my blog subdomain

To start building your own DNS app, download create-cloudflare-app and open it in your preferred text editor.  Below, I’ll explain how Pointless DNS manages its configurable TXT record.

In the install.json file, you’ll find a dns field that looks like this:

# install.json

"dns": [{
    "type": "TXT",
    "content": "Managed TXT Record",
    "name": "Created by create-cloudflare-app",
    "ttl": 120
  }]

This says a TXT record will be set up and managed on the app installer's site, which can only be modified or deleted through the app’s configuration page.  Apps can create or modify any type of Cloudflare DNS record available in Cloudflare's DNS API.

Now let's add in some configuration. Add an install option and point it at your record — options.subdomain will be set to the installer's desire.

# install.json

{
  "options": {
    "properties": {
      "subdomain": {
        "order": 1,
        "type": "string",
        "title": "TXT Record Subdomain",
        "description": "The subdomain of your DNS record",
        "placeholder": "*Required - e.g. [your_domain].com",
        "required": true
      }
    }
  },
  "dns": [{
    "type": "TXT",
    "name": "{{options.subdomain}}",
    "content": "{{options.subdomain}} was set"
  }]
}

That's all there is to it.  Check out the Cloudflare Apps docs to learn more about about building DNS apps.  For additional inspiration, consider Mailchannels — a powerful email security solution that manages DNS records to fight off pesky spammers and phishermen.

Woof!

DNS records used to be hard, but a new breed of Cloudflare Apps makes them easy.  Cloudflare Apps-based automated DNS configuration gives developers the opportunity to be the hero people want and the hero they need.

NOTE: This post was updated 5 hours after initial publication to include additional, relevant details.

I like my code the same way I like my team of POWr Rangers… DRY.

And no, I don’t mean dull and unexciting! (If you haven’t heard this acronym before, DRY stands for Don’t Repeat Yourself, the single most important principle in software engineering. Because, as a mentor once told me, “when someone needs to re-write your code, at least they only need to do it once.”)

At POWr, being DRY is not just a way to write code, it’s a way of life. This is true whether you’re an Engineer, a Customer Support agent, or an Office Manager; if you find you’re repeating yourself, we want to find a way to automate that repetition away. Our employees’ time is our company’s most valuable resource. Not to mention, who wants to spend all day repeating themselves?

We call this process becoming a Scaled Employee. A Scaled Employee leverages their time and resources to make a multifold impact compared to an average employee in their field. Building a culture of scaled employees plays a large part in how we have been able rapidly grow our company over the past 4 years without raising any VC funding.

So when we recently integrated 12 POWr apps into Cloudflare, you might think that we had to write code for 12 different apps. This would have required months of tedious building and QA testing.

Instead, we built a single integration template. Then, we wrote a few lines of code to automatically generate 12 apps in about as long as it takes to enjoy a sumptuous sip of California Cab. Ready for a quick overview? Begin swirling...

First we defined a “replacements” object with the important attributes of each app (which is already available in our database in an AppDetail model):

replacements = {
    APP_COMMON_NAME: app_detail.common_name, #eg “Form Builder”
    APP_SLUG: app_detail.slug, #e.g. “form-builder”
    APP_DESCRIPTION: app_detail.short_description #e.g. “Increase conversions and get more sign-ups.”
    …
}

Using these replacements, we then duplicated and renamed each file of our Cloudflare App accordingly:

replacements.each do |key, val|
  `find #{parent_dir} -name "*#{key}*" -exec rename 's/#{key}/#{val}/' * -v {} +`
end

And finally, we moved into each file and made the corresponding replacements:

Dir.glob("lib/cloudflare/powr-#{replacements[:APP_SLUG]}/**/*").reject{|fn| File.directory?(fn)}.each do |file_name|
  text = File.read(file_name)
  replacements.each do |key, val|
    text = text.gsub(key.to_s, val)
   end
   File.open(file_name, "w") {|file| file.puts text }
end

Delicious, right?

At this point, you may be wondering, “what are POWr Apps, anyway?” I’m glad you asked. They are a customizable and easy-to-use set of tools to supercharge any website… from forms to galleries to social media integrations to eCommerce.

Could you build a custom form for your website, a backend to handle and graph responses, and an integration with Zapier to turn on a lightbulb every time someone presses submit? Probably. Is that a good use of your time? Probably not. Instead, you can install POWr Form Builder in about 2 minutes, pass it off to your Marketing Intern to make it look pretty, and get back to the hard problems.

Adding POWr Form Builder to Cloudflare

Customize your app in the POWr Editor

If YOU want to be a Scaled Engineer, it’s not about knowing everything there is to know. The geekiest engineers that spend their lunches vehemently discussing the pros and cons of bubble vs selection sort often do not make the best Scaled Engineers. Scaled Engineers know when to avoid going down Rabbit Holes and use whatever tools are at their disposal to maximize impact.

So if you want to add some dynamic content to your site, take a look at POWr Apps for Cloudflare. I’d tell you that again, but I don’t want to repeat myself.

Implementing an OAuth Authentication server is conceptually simple but a pain in practice. We can leverage the power of Cloudflare Workers to simplify the implementation, reduce latency, and segregate our service logic from the authentication layer.

For those unfamiliar with OAuth, I highly recommend reading a more in depth article.

The steps of the OAuth 2.0 workflow are as follows:

1. The consumer service redirects the user to a callback URL that was setup by the auth server. At this callback URL, the auth server asks the user to sign in and accept the consumer permissions requests.

2. The auth server redirects the user to the consumer service with a code.

3. The consumer service asks to exchange this code for an access token. The consumer service validates their identity by including their client secret in the callback URL.

4. The auth server gives the consumer the access token.

5. The consumer service can now use the access token to get resources on behalf of the user.

In the rest of this post, I will be walking through my implementation of an OAuth Authentication server using a Worker. For simplicity, I will make the assumption the user has already logged in and obtained a session token in the form of a JWT that I will refer to as “token” herein. My full implementation has a more thorough flow that includes initial user login and registration.

We must be able to reference valid user sessions, codes and login information. Because Workers do not maintain state between executions, we will store this information using Cloudflare Storage. We setup up three namespaces called: USERS, CODES, and TOKENS .

On your OAuth server domain, create two empty worker scripts called auth and token. Bind the three namespaces to the two workers scripts. Then configure the namespaces to the scripts so that your resources end up looking like:

To put and get items from storage using KV Storage syntax:

// @ts-ignore 
CODES.get(“user@ex.com”) 

We include // @ts-ignore preceding all KV storage commands. We do not have type definitions for these variables locally, so Typescript would throw an error at compile time otherwise.

To set up a project using Typescript and the Cloudflare Previewer, follow this blog post. Webpack will allow us to import which we will need to use the JWT library jsonwebtoken.

import * as jwt from "jsonwebtoken";

Remember to run:

npm install jsonwebtoken && npm install @types/jsonwebtoken

Optionally, we can set up a file to specify endpoints and credentials.

import { hosts } from "./private";

export const credentials = {/* for demo purposes, ideally use KV to store secrets */
  clients: [{
    id: "victoriasclient",
    secret: "victoriassecret"
  }],
  storage: {
    secret: "somesecrettodecryptfromtheKV"
  }

};

export const paths = {
  auth: {
    authorize: hosts.auth + "/authorize",
    login: hosts.auth + "/login",
    code: hosts.auth + "/code",
  },
  token: {
    resource: hosts.token + "/resource",
    token: hosts.token + "/authorize",
  }
}

The consumer service generates some callback URL that redirects the user to our authentication server. The authentication server then presents the user with a login or accept page to generate a code. The authentication server thus must listen on the authorize url endpoint and return giveLoginPageResponse.

addEventListener("fetch", (event: FetchEvent) => {
 const url = new URL(event.request.url);
 if (url.pathname.includes("/authorize"))
  return event.respondWith(giveLoginPageResponse(event.request));
}

export async function giveLoginPageResponse(request: Request) {
 ...checks for cases where I am not necessarily logged in... 
 let token = getTokenFromRequest(request)
 if (token) { //user already signed in
  return new Response(giveAcceptPage(request)
 }

Since the user already has a stored session, we can use a method giveAcceptPage. To display the accept page and return a redirect to generate the code.

export function giveAcceptPage(request: Request) {
  let req_url = new URL(request.url);
  let params = req_url.search
  let fetchCodeURL = paths.auth.code + params
  return `<!DOCTYPE html>
  <html>
    <body>
      <a href="${fetchCodeURL}"> Accept</button>
    </body>
  </html>
    `;
}

At the endpoint for fetchCodeURL, the authentication server will redirect the user’s browser to the consumer’s page as specified by redirect_uri in the original URL params of the callback with the code.

addEventListener("fetch", (event: FetchEvent) => {
 ...
 if (url.pathname.includes("/code"))
  return event.respondWith(redirectCodeToConsumer(event.request));
}
export async function redirectCodeToConsumer(request: Request) {
 let session = await verifyUser(request)

 if (session.msg == "403") return new Response(give403Page(), { status: 403 })
 if (session.msg == "dne") return registerNewUser(session.email, session.pwd)
 let code = Math.random().toString(36).substring(2, 12)
 try {
  let req_url = new URL(request.url)
  let redirect_uri = new URL(encodeURI(req_url.searchParams.get("redirect_uri")))
  let client_id = new URL(encodeURI(req_url.searchParams.get("client_id")))
  // @ts-ignore
  await CODES.put(client_id + email, code)
  redirect_uri.searchParams.set("code", code);
  redirect_uri.searchParams.set("response_type", "code");
  return Response.redirect(redirect_uri.href, 302);
 } catch (e) {
  // @ts-ignore
  await CODES.delete(email, code)
  return new Response(
   JSON.stringify(factoryIError({ message: "error with the URL passed in" + e})),
  { status: 500 });
 }
}

Now the consumer has the code. They can use this code to request a token. On our token worker, configure the endpoint to exchange the code for the consumer service to grant a token.

addEventListener("fetch", (event: FetchEvent) => {
...
 if (url.pathname.includes("/token"))
  return event.respondWith(giveToken(event.request));

Grab the code from the request and validate this code matches the code that is stored for this client. Once the code is verified, deliver the token by grabbing the existing token from the KV storage or by signing the user information to generate a new token.

export async function giveToken(request: Request) {
 let req_url = new URL(request.url);
 let code = req_url.searchParams.get("code");
 let email = req_url.searchParams.get("email");
 if (code){
   if(!validClientSecret(request) return errorResponse()
  // @ts-ignore
  let storedCode = await CODES.get(email)
  if(code != storedCode) return new Response(give403Page(), { status:403})

  let tokenJWT = jwt.sign(email, credentials.client.secret);
  ... return token

Continuing where step 3 left off from the giveToken method, respond to the consumer with this valid token.

  ...
  headers.append("set-cookie", "token=Bearer " + tokenJWT);
  // @ts-ignore
  await TOKENS.put(email, tokenJWT)
  var respBody = factoryTokenResponse({
   "access_token": tokenJWT,
   "token_type": "bearer",
   "expires_in": 2592000,
   "refresh_token": token,
   "token": token
  })
 } else {
  respBody.errors.push(factoryIError({ message: "there was no code sent to the authorize token url" }))
 }
 return new Response(JSON.stringify(respBody), { headers });
}

At this point voila, your duty as an OAuth 2.0 Authentication server is complete! The consumer service that wishes to use your service has the token that you have not so magically generated.

The consumer server would send a request including the token:

GET /resource/some-goods
Authorization: Bearer eyJhbGci..bGAqA

Authentication server would validate the token and give the goods:

export async function giveResource(request: Request) {
 var respBody: HookResponse = factoryHookResponse({})
 let token = ""
 let decodedJWT = factoryJWTPayload()
 try { //validate request is who they claim
  token = getCookie(request.headers.get("cookie"), "token")
  if (!token) token = request.headers.get("Authorization").substring(7)
  decodedJWT = jwt.verify(token, credentials.storage.secret)
  // @ts-ignore
  let storedToken = await TOKENS.get(decodedJWT.sub)
  if (isExpired(storedToken)) throw new Error("token is expired") /* TODO instead of throwing error send to refresh */
  if (storedToken != token) throw new Error("token does not match what is stored")
 }
 catch (e) {
  respBody.errors.push(factoryIError({ message: e.message, type: "oauth" }))
  return new Response(JSON.stringify(respBody), init)
 }
 respBody.body = getUsersPersonalBody(decodedJWT.sub)
 return new Response(JSON.stringify(respBody), init)
}

The boundaries of serverless are pushed everyday, though if your app just needs to authorize users, you may be better off using Cloudflare Access. We've demonstrated that a full blown OAuth 2.0 authentication server implementation can be achieved with Cloudflare Workers and Storage.

Stay tuned for a follow-up blog post on an OAuth consumer implementation.

This is an investment fund started in partnership with Venrock, Pelion Venture Partners, and New Enterprise Associates. We created the fund to provide developers with resources so that they can build apps using the Cloudflare network and our serverless product, Workers, which enables developers to create applications without configuring or maintaining infrastructure. The goal is to fuel a new economy that grows into a thriving ecosystem so that developers’ serverless innovations can enjoy commercial success.  

Cloudflare Apps with Workers allows developers to package Workers, delivering new worker-powered experiences to Cloudflare customers, all within a few clicks via Cloudflare Apps.

Our CTO, John Graham-Cumming talks about it in a recently recorded video:

In short, Cloudflare is looking for apps that will advance our mission to help build a better Internet: one that is safe, fast and reliable.   We are seeking out apps that have a clear vision, delight customers by the ease of use and align with our vision. Having already seen multiple use cases around custom application security, data loss prevention, and bot mitigation, we can’t wait to see what else you come up with.

We welcome apps coming from a variety of sources, ranging from standalone developers who have identified a particular market opportunity, to engineers who realize their internal idea has utility for a wider audience.  Since our beta launch of Cloudflare Apps with Workers we’ve already seen keen interest across developers who are looking to bundle and deliver complex worker logic for anyone else to consume by publishing to the Apps marketplace.  

With our fund we are helping this move faster.

Today we are announcing a public beta for our Cloudflare Apps with Workers!  If you are a developer who has been using Workers or Cloudflare Apps, this is a significant step forward to bring together our server-less platform allowing you the next wave of innovation in the Cloudflare marketplace.

Wait!  Yet more Workers news?  It’s already been a furious year of releases for Workers, from our GA launch in February to numerous improvements including the beta of Cache API and a flurry of updates during Cloudflare’s Birthday week, where we made available our K/V Storage and WASM support.  With this beta, developers can now package all Workers capabilities, deliver new worker-powered experiences to Cloudflare customers all within a few clicks via Cloudflare Apps.

Now your Apps can be more powerful, and Workers code running on the Cloudflare network are the engine that can take you there.   If you’ve successfully built and deployed a worker on your own domain, you can package it as an App and bring your idea to the Cloudflare Marketplace.  

Apps and Workers Life of a Request

New App experiences are possible including but not limited to personalization, experimentation with A/B testing, custom security, content validation, and localization.

To package a Worker in your App as an additional resource in your install.json, simply add a reference to your Worker script similar to how DNS entries were declared before.

{
	"resources": [...],
	"hooks": [...],
	"workers": [{
		"src": "./worker.js"
	}]
}

You can also deliver custom variables as install options which can then be referenced in Workers; useful for apps who may need to include a service specific token at App install time.

// inside src/worker.js
addEventListener('fetch', event => {
  event.respondWith(workerFn(event.request))
  let someOptionFromInstall = INSTALL_OPTIONS.UserAgents // UserAgents was selected by siteowner in previewer
})

As before, when you submit your app for approval and review, the submission process will gather your app  and worker  sources and make it available for our Moderation Team to review.  Once successfully through the Moderation process, you can expect an additional Security Review of your Worker, before this app will be made available just like any App is today.

Back in August, we announced the upcoming App with Worker capability and since then we’ve seen great interest across our developers and partners who are eager to put their Workers based solutions into the hands to a much broader audience We are continuing to welcome new App Developers in our beta. Apply below to be part of our beta program.

Sign-up to Join the beta!

• Cloudflare Apps with Workers

• Cloudflare Workers Service Providers

Why now? Over the course of the past few months we've seen accelerating interest in Workers, and we frequently field the question on what we are doing to combine our growing ecosystem around Workers, and our unique deliverability capability, Cloudflare Apps. To meet this need, we have introduced two programs, Apps with Workers and Workers Service Providers. Let’s dig into the details:

First, we are announcing the upcoming availability of Cloudflare Apps, powered by embeddable Workers. This will allow any developer to build, deploy and in the near future package Workers to distribute to third parties, all using the Cloudflare Apps platform. It will be, in effect, the world's first serverless Apps platform.

Today, it's easy to develop Workers using our UI or API. The ability to App-ify Workers opens up a whole new promise to those who prefer to deal in clicks and not code. For our Apps developers, Apps with Workers allows for more complex Apps offerings running on Cloudflare, and for our customers the next generation in Apps. So, while we are actively putting the finishing touches on this capability we are opening up this pilot program for select developers. We have a limited early access to program. To apply, click here for more details.

Second, we are announcing the upcoming availability of Cloudflare Worker Service providers. While many Cloudflare customers write Cloudflare Workers for themselves, many customers want to focus on their core business and bring in the development expertise when they need it. The goal is simple: make it easy for our customers to connect to an ecosystem of developers and Apps, and to grow a vibrant marketplace around customers and partners. Moving forward, in addition to Apps, we will support the ability to post Solutions and Services backed by a curated set of consultants, experts and System Integrators, all adding a new richness to the Cloudflare ecosystem. We are excited to hear from our community so drop us a line.

At the end of March, Kenton Varda, tech lead and architect for Cloudflare Workers, traveled to London and led a talk about the Rise of Edge Compute where he laid out our vision for the future of the Internet as a platform.

Several of those who were unable to attend on-site asked for us to produce a recording. Well, we've completed the audio edits, so here it is!

Visit the Workers category on Cloudflare's community forum to learn more about Workers and share questions, answers, and ideas with other developers.

Visit the Community Forum Here »

When installing an app, a site owner must select where - what URLs on their site - they want what apps installed. Our original plan for selecting the URLs an app would be installed on took a few twists and turns. Our end decision was to utilize our Always Online crawler to pre-populate a tree of the user’s site. Always Online is a feature that crawls Cloudflare sites and serves pages from our cache if the site goes down.

The benefits to this original setup are:1. Only valid pages appearAn app only allows installations on html pages. For example, since injecting Javascript into a JPEG image isn’t possible, we would prevent the installer from trying it by not showing that path. Preventing the user from that type of phony installation prevents the user from being confused later when it doesn’t work.2. The user was not required to know any URL of their siteThe URLs are available right there in the UI. With the click of a check mark, the user would not have to type a thing.

The disadvantage of this setup is the dependency of the Always Online crawler.

First off, some users do not wish to have Always Online turned on. Without the consent of the site owner to crawl the site via Always Online, the page loader tree will not load and the user had no options of pages to install an app on.

When a user does have Always Online enabled properly, the crawler might not crawl every page the site owner wishes to install an app on.

The duty of Always Online is to make sure in the most catastrophic event for a site owner - their site being down - users can still see a version of the site via cached static HTML. Once upon a time before Always Online v2, we actually used the Google bot and other search engine crawlers’ activity to decide what to cache for the Always Online feature. We found that implementing our own crawler made more sense. Our goal is to make sure the most vital pages of a site are crawled and stored on our cache, contrasting with search engine crawler’s priority of get the most information possible from the site, thus going “deep” into the depths of a site map.

The duty of an app install on Cloudflare’s Apps platform is to seamlessly enable users to select pages in which to inject Javascript, HTML, CSS, and in the near future, Cloudflare Service Workers into. Since the objectives of the Always Online crawler differ from that of the Cloudflare Apps platform, there were inevitable consequences. Here are some examples where a page would not be crawled:

• The page’s subdomain was not "orange-clouded".

• The page was not be accessible from the site's homepage via links.

• The site’s homepage had too many links for us to follow.

• The page was password-protected, preventing us from accessing it and adding it to your site map.

• The page was added before we had a chance to crawl the site.

Although our custom crawler works well for the Always Online feature, this limited control for our customers who are installing apps. We decided to do something about it. Combining the advantages of the crawler data we already had implemented with the ability to enter any URL in an install, we created the best of both worlds.

Now, site owners can type in whatever URL they wish to install an app. There is also an option for selecting an entire directory or strictly that page. For simplicity, no regex patterns are supported.

As the apps on the Cloudflare Apps platform advance, it is vital that the platform itself advance. In the near future, the App’s platform will have the power of Cloudflare Workers, local testing, and much more to come.

Photo by Jamie Street / Unsplash

Are you based in London or Barcelona? Drop by the Cloudflare London office to meet Kenton Varda, lead architect of Cloudflare Workers, front end developers Marta Bondyra and David Sancho from Typeform, or drop by the Typeform office in Barcelona to hear from Jason Harmon, Typeform’s Chief Platform Officer. My Developer Relations teammates and I are visiting these cities over the next two weeks. We’d love to meet you and invite you to the three events we’re hosting.

Our first stop is the Cloudflare London office. Developers from our Cloudflare Apps partner, Typeform, are leading a talk on Tuesday, March 27th. The lead architect of Cloudflare Workers, Kenton Varda, is going to lead a follow-up talk about edge computing on Wednesday, March 28th.

Tuesday, March 27th: 18:00-20:00

Location: Cloudflare London - 25 Lavington St, Second floor | SE1 0NZ London

Creating software from scratch, although fun, can be time consuming and expensive. Marta and David, both developers at Typeform, will tell you why their teams built tools to make the lives of developers a little easier and what they learned along the way.

View Event Details & Register Here »

Wednesday, March 28th: 18:00-20:00

Location: Cloudflare London - 25 Lavington St, Second floor | SE1 0NZ London

Edge Compute is the future of how complex software systems will be designed and built. Join Kenton Varda, the tech lead and architect for the Cloudflare Workers project, as he lays out our vision for the future of the Internet as a platform and provides a detailed look at the architecture of Workers.

View Event Details & Register Here »

Photo by Javier Bosch / Unsplash

Our second stop of the trip is Typeform's office in Barcelona. Here, the Cloudflare team will speak about performance and security after an introductory talk by Typeform's Chief Platform Officer on Tuesday, April 3rd.

Tuesday, April 3rd: 18:00-20:15

Location: Typeform - Carrer de Bac de Roda, 163 | 08018 Barcelona

Learn about the technologies behind cutting-edge performance, security, and edge development solutions. Jason Harmon, the Chief Platform Officer at Typeform, will open with a keynote talk. Connor Peshek and Jade Wang, both from Cloudflare, will cover topics relating to the way a network stays connected, web acceleration, mobile network optimization, and the future of edge compute.

View Event Details & Register Here »

We'll hope to meet you soon!

As a startup founder, there are always key product decisions to be made when Site Search 360, our key product, is embedded in one context versus another. I’d like to share some experiences, choices, and challenges in our process packaging Site Search 360 for Cloudflare Apps.

Site Search 360 is a search solution for websites. Offering a search bar on a website improves user experience tremendously if the site has more than just a handful of pages. According to a eConsultancy study, up to 30% of web visitors use the search feature on e-commerce sites and searchers sometimes make up 40% of the revenue. Additionally, Nielsen Group found that 51% of people who did not find what they were looking for with the first query, gave up without refining the search - the search had better work very well then.

Considering these facts, almost every website should have a search feature. However, implementing that functionality is not trivial. Developers are faced with multiple non-obvious decisions to make, such as:

• What content should and should not be indexed (do you need the header and footer of every page in the index? Probably not!)

• How do I keep my index up to date when I add new pages or change something?

• What storage engine should I use and how do I handle complex queries?

• How to maintin the additional codebase, especially if non-technical leadership wants to change a decision on what to index?

Thus, for most sites, a highly customizable off-the-shelf search solution is the fastest and lowest maintenance way to go. Site Search 360 offers that along with additional features, such as:

• Autocomplete and search suggestions

• High speed

• Mobile capability

• Full control over search results

• Analytics about user behavior and search trends

To make a search solution fit perfectly into the style and theme of a website, one has to be able to customize it. Site Search 360 offers over 60 parameters developers can tinker with to make the search behave and consistently fit the brand and style of the rest of the site.

Cloudflare Apps are configured visually though, and 60 input fields, radio buttons, check lists, select boxes, and sliders would be too much for the average Cloudflare user. Applying the Pareto Principle, we were able to identify the 7 parameters most frequently used that have the highest impact on a website's look and feel. We chose these for our Cloudflare app.

We have integrated Site Search 360 with other platforms, such as Zapier (read more), Integromat, WordPress,and Drupal, so we’ve seen multiple interfaces and experienced many different processes of getting an integration working and approved.

Where Cloudflare stood out is the declaration-driven approach to app development. Using only the form elements provided by Cloudflare required us to think about how to map our configuration parameters to Cloudflare components and make them as simple as possible. Just this process alone made us reconsider some of our configuration options and how we could make them easier to use, even outside the Cloudflare use case. For example, instead of letting the user choose between a set of icons for the search bar, we opted for picking one. This allowed us to embed it directly in CSS and minimize the CSS file size that would otherwise get considerably bigger with every Base64 encoded icon choice we could have provided.

The single best thing I have to say about the process is the support. No matter how good the documentation, developers always have questions, so it was crucial for us that we could get quick and thorough feedback every step along the way. Cloudflare takes the approval process very seriously and only allows high quality apps into their store. Their eye for detail challenged us to go back to the drawing board more than once and rethink certain design choices, e.g. did we really need sliders for the margin of an element or can we simplify it to a choice between "none", "little", and "more"?

We encountered two main challenges:

• jQuery had to die: Since we have no idea on which of 7+ million sites the Cloudflare app will be installed we had to move away from jQuery completely to avoid possible conflicts. This is another example of a push that came through the platform that benefits our product also outside of Cloudflare.

• Account & Sign Up: In order for the user to see the search working, we have to have some indexed data. However, if a user without a Cloudflare account just previews the app, there is no indexed data. We therefore created a preview account that shows search results from Wikipedia, making registration unnecessary to preview the app.

Preview Site Search 360 on any site with Cloudflare Apps »

If you have questions or feedback, it is easy to reach us in Site Search 360’s community chat, via Twitter @sitesearch, or by email mail@sitesearch360.com.

Happy Searching!

Along with four other Cloudflare colleagues, I traveled to New Haven, CT last weekend to support 1,000+ college students from Yale and beyond at YHack hackathon.

Throughout the weekend-long event, student attendees were supported by mentors, workshops, entertaining performances, tons of food and caffeine breaks, and a lot of air-mattresses and sleeping bags. Their purpose was to create projects to solve real world problems and to learn and have fun in the process.

Cloudflare sponsored YHack. Our team of five wanted to support, educate, and positively impact the experience and learning of these college students. Here are some ways we engaged with students.

1. Mentoring

Our team of five mentors from three different teams and two different Cloudflare locations (San Francisco and Austin) was available at the Cloudflare table or via Slack for almost every hour of the event. There were a few hours in the early morning when all of us were asleep, I'm sure, but we were available to help otherwise.

2. Providing challenges

Cloudflare submitted two challenges to the student attendees, encouraging them to protect and improve the performance of their projects and/or create an opportunity for exposure to 6 million+ potential users of their apps.

Challenge 1: Put Cloudflare in front of your hackathon project

Challenge 2. Make a Cloudflare App

Prizes were awarded to all teams which completed these challenges. Cloudflare awarded a total of ten teams for completing the challenges. The team which was judged to have created the best Cloudflare app won free admission to Cloudflare's 2018 Internet Summit as well as several swag items and introductions to Cloudflare teams offering internships next summer.

3. Distributing swag & cookies

Over 3,000 swag items (t-shirts, laptop stickers, and laptop camera covers) were distributed to almost every attendee. When the Cloudflare team noticed student attendees were going without snacks after dinner, I made a trip to a local grocery store and bought hundreds of cookies to distribute as well. After about an hour, none remained.

4. Sponsoring

As with most any hackathon, costs for food, A/V, venue rental, and other expenses are considerable. Cloudflare decided to financially support YHack to help offset some of these costs and be sure student participants were able to attend, learn, and build meaningful projects without having to pay admission fees.

In groups of up to four, students teamed up to create projects. There was no set project theme, so students could focus on subject areas they were most passionate about. Judging criteria were "practical and useful", "polish", "technical difficulty", and "creativity" and several sponsors, such as Intuit, Cloudflare, JetBlue, and Yale's Poynter Fellowship in Journalism submitted suggested challenges for teams to work on.

I saw a lot of cool projects that could help college students save money on food or other expenses, projects that could help identify fake news sources, and apps that would work great on Cloudflare Apps.

There were dozens of great completed projects by the end of the Hackathon. I'd like to highlight a few great ones which used Cloudflare best.

Akrama Mirza, a second year student at University of Waterloo, created an app for Cloudflare Apps which allows a website owner to automatically generate a TL;DR summary of the content on their pages and place it anywhere on their site. This app could be used to give a TL;DR summary of a blog post, article, report, etc.

Read more about TL;DR on Akrama's Devpost page.

Other great projects which used Cloudflare

Of the completed projects which put Cloudflare in front of their projects, there were three I most wanted to feature.

"Bringing Wall Street to Main Street through an accessible trading and back-testing platform."

K2 is a comprehensive backtesting platform for currency data, specializing in cryptocurrency and offering users the opportunity to create trading algorithms and simulate them in real-time.

The K2 team sought to equalize the playing field by enabling the general public to develop and test trading strategies. Users may specify a trading interval, time frame, and currency symbol, and the K2 backend will visualize the cumulative returns and generate financial metrics.

Read more about K2 on the team's Devpost page or website.

Money Moves analyzes data about financial advisors and their attributes and uses machine's deep learning unsupervised algorithms to predict if certain financial advisors will most likely be beneficial or detrimental to an investor's financial standing. Ultimately, Money Moves will help investors select the best possible financial advisor in their region.

The Money Moves team liked that they could easily use Cloudflare to protect and improve the performance of their site. One of the team members, Muyiwa Olaniyan, already used Cloudflare to run his personal server at home, so the team decided to use Cloudflare, from the start.

Read more about Money Moves on the team's Devpost page or website.

"Smart Bitcoin Investing Chatbot"

When the Facebook messenger chatbot is asked when it is best to invest in Bitcoin, current market trends are observed and a Mad Invest's model predicts how likely it is for the price to go up or down. A conclusion as to when it would be a good time to invest or sell is drawn and delivered by message to users.

Moving forward, the team intends to improve their model's predictions by developing a way to analyze the Chinese market, which represents 70% of Bitcoin traffic.

When telling me about their experience using Cloudflare and how it saved them time, the team delivered my favorite quote from the whole weekend. “We spent half an hour setting up Let's Encrypt for the SSL and we realized we could just put Cloudflare in front of it.” Exactly.

Read more about Mad Invest on the team's Devpost page.

I was honored to be part of a team that supported so many awesome students in the development of their projects at YHack. I was pleased to hear many attendees had already heard of or used Cloudflare before and many teams interacted with Cloudflare to protect and improve the performance of their projects and develop new apps. I look forward to being involved many more events in 2018 as well.

TL;DR - Net neutrality is under attack. There's an app on Cloudflare Apps that empowers site owners to host a popup on their sites, encouraging users to contact their congresspeople to fight back. Everyone should be doing this right now, before the December 14th FCC vote.

Use Battle for the Net to Call your Congressperson »

Attend Cloudflare's Save the Internet! Net Neutrality Call-A-Thon »

The Federal Communications Commission (FCC) has scheduled a vote to terminate its net neutrality rules this Thursday, December 14th. Unfortunately, the expectation is that the FCC will vote to repeal its net neutrality rules. Read about this on Business Insider, Bloomberg, or TechCrunch.

Net neutrality is the principle that networks should not discriminate against content that passes through them. The FCC’s net neutrality rules protect the Internet, users, and companies from abusive behavior by the largest Internet Service Providers (ISPs). Without net neutrality rules in place, ISPs may be able to legally create a "pay to play" system and charge websites to provide content to their customers more quickly. This will create a disadvantage for startups, bloggers, and everyone else who cannot afford to pay fees for their websites to offer faster service.

Cloudflare founders and employees strongly believe in the principle of network neutrality. Cloudflare co-founder and COO Michelle Zatlyn, sat on the FCC's Open Internet Advisory Committee, which guided the FCC to vote to preserve net neutrality in 2015. Cloudflare co-founder and CEO Matthew Prince and other employees have written four blog posts 1, 2, 3, 4, describing Cloudflare’s views on net neutrality.

I am extremely disappointed that net neutrality is under threat. I am extremely grateful that I work at a company made of people who are fighting for it and I'm hopeful our community (you) can make a difference.

Read, watch, listen, and learn much more about net neutrality and its importance below.

For now, here is my favorite video explanation of net neutrality, by John Oliver, host of Last Week Tonight on HBO.

---------------- ### Battle for the Net

Because net neutrality is under attack, the Battle for the Net app is once again live on Cloudflare Apps. The app can be used to “Break the Internet” for the two days before the FCC’s vote, as part of an internet-wide protest.

This app allows site owners to add a pop-up to their sites that will directly connect users to their respective US congresspeople so they may articulate their stance for net neutrality.

On a site that uses the Battle for the Net app, users are greeted with a pop-up which briefly explains that net neutrality is under attack, displays a countdown to the day and time (Thursday, December 14th) the FCC will vote to terminate the net neutrality rules, and provides an entry field for the user to enter their phone number.

When a user enters their phone number and clicks the "CALL CONGRESS" button, they'll immediately receive an automated phone call from Battle for the Net. The recording instructs the user to enter their zip code, so they'll be connected to their specific congressperson.

Users may select the option to become a daily caller by pressing 1. This will initiate a process where users will receive calls at the same time each day, connecting them to their congresspeople.

To make one-time calls, users can just stay on the line. The recording delivers a recommended script to inform the congressperson on the line that the user supports net neutrality and wants the congressperson to contact FCC Chairman Pai and oppose the repeal.

Here's the written script:

Be polite, introduce yourself, and say: “I support the existing Title II net neutrality rules and I would like you to publicly oppose the FCC’s plan to repeal them.”

When done with the first call, users may press * to be directed to another call to their next congressperson.

I live in San Francisco, so my first call was directed to Representative Nancy Pelosi. My second call was directed to Senator Dianne Feinstein.

On Cloudflare Apps, you can preview Battle for the Net and see how it'd look on a site. Cloudflare users can install the app on their site with the click of a button. You can see how a user can enter a phone number into the pop-up. Users are given share links on their screens, so they may share the action they take on Facebook or Twitter. They are also given the option to donate to the cause.

Though the pop-up covers a significant portion of the page, it can be easily discarded by clicking the "x" in the upper right corner.

Use Battle for the Net to Call your Congressperson »

Learn more about Battle for the Net and the Break the Internet protest on their site.

Join us at Cloudflare (or remotely) in the fight for net neutrality

The event will kick off with an introduction to net neutrality and why we think it's important. We'll preview the Battle for the Net app and use it to find our local representatives and call and tweet at them, letting them know we want them to take a stand for net neutrality.

Pizza will be provided for callers. Bring your own cell phone.

Tuesday, December 12th: 12:00pm-1:00pm

Cloudflare San Francisco101 Townsend StreetSan Francisco, CA 94107

Register Here »

If you can't make it on-site, join the effort by calling through the app, remotely.

Key moments for Net Neutrality

• The 1990's: The issue of net neutrality has been a discussion since the early days of the Internet in the 1990s, between users and service providers. There were no clear legal protections requiring net neutrality until 2015.

• 2015: The FCC classified broadband as a Title II communication service with providers being "common carriers", not "information providers", under former Chairman Tom Wheeler. Adoption of this notion would reclassify Internet service from one of information to one of telecommunications and ensure net neutrality. Wheeler stated, "This is no more a plan to regulate the Internet than the First Amendment is a plan to regulate free speech. They both stand for the same concept." Read more about the 2015 rules in this Newsweek article.

• January, 2017: Ajit Pai was named the new Chairman of the FCC by President Trump. Pai opposed the 2015 Open Internet Order which protects and promotes the open Internet and stated the he planned to modernize FCC policies. Read about Pai's October Senate confirmation in this TechCrunch article.

• April/May, 2017: Pai proposed Net neutrality rules be rolled back and service providers instead should voluntarily commit to net neutrality principles. On May 18, 2017 the FCC voted to move forward with the proposal. Over 1,000 companies and investors signed an open letter, opposing the proposal and millions of public pro net neutrality comments were submitted on the FCC website. Read more about the vote in this CNN article.

• June/July, 2017: The Battle for the Net coalition created a Day of Action during which over 50,000 websites participated in the largest online protest in history. Internet companies, CEOs, politicians, and users spoke out in support of net neutrality.

• Now: It's time to make a statement again. Use Battle for the Net to contact your congressperson and find other ways to make a statement to protect net neutrality.

Here are five more great videos, explaining net neutrality and why it's important.

1. Video created by Elisa Solinas, Senior Creative at Vimeo, explaining why net neutrality is so important for video makers, viewers, and all-around Internet video lovers.

2. Video of Julia Reda, a Member of the European (EU) Parliament from Germany, discussing the importance of net neutrality and new EU legislation designed to reinforce the principle.

3. Video of Bernie Sanders, US Senator for Vermont, explaining how it's imperative that we have net neutrality.

4. Video of FCC Commissioner Mignon Clyburn speaking about how "net neutrality is doomed if we're silent."

5. Video of John Oliver, host of Last Week Tonight on HBO, giving a second commentary on net neutrality.

The argument against net neutrality

Watch or read an interview with Ajit Pai by PBS about why he wants to do away with net neutrality.

• The FCC is a 5-member Commission, made up of three Republicans, including Pai, and two Democrats, including Clyburn.

• Its purpose is to regulate interstate and international communications by radio, television, wire, satellite, and cable in all 50 states, the District of Columbia and U.S. territories.

• It's an independent agency of the US government, overseen by Congress. The Commission is responsible for implementing and enforcing America’s communications law and regulations. It has over 1,700 employees and a budget of almost $400 Million.

Read more on the FCC website.

Read more on the FCC Wikipedia page.

I was encouraged, for a moment, when I read an article, claiming that the FCC would not be voting on the repeal of net neutrality in November. But now net neutrality is under attack again, just one month later. We need to fight for it. Join the fight.

Call your Congressperson »

Attend Cloudflare's Save the Internet! Net Neutrality Call-A-Thon »

We’ve made it easier to upsell premium features with product specific options. Customers can try out exclusive features before making a purchase, on any site, even without Cloudflare account! Here’s an example of Lead Box using product specific radio buttons:

Previewing premium features in Lead Box

In this example, a customer can choose to see the newsletter option after choosing the "Pro" plan. Developers can now update the Live Preview in response to this choice. We’ve added new "_product" keyword for this event. Here’s a snippet on how Lead Box handles a customer changing products without refreshing the page:

{
  "preview": {
    "handlers": [
      {
        "options": ["_default"],
        "execute": "INSTALL_SCOPE.setOptions(INSTALL_OPTIONS)"
      },
      {
        "options": ["_product"],
        "execute": "INSTALL_SCOPE.setProduct(INSTALL_PRODUCT)"
      }
    ]
  }
}

let options = INSTALL_OPTIONS
let product = INSTALL_PRODUCT

function renderApp () {/*...*/}

window.INSTALL_SCOPE = {
  setOptions (nextOptions) {
    options = nextOptions
    renderApp()
  },
  setProduct (nextProduct) {
    product = nextProduct
    renderApp()
  }
}

Our previous newsletter included two of our most requested features: customer feedback, and install metrics. Together these features have helped developers reach out to their customers and track down issues. Customers can now share their feedback publically with comments and ratings:

Revealing older comments.

Comments for previous releases are initially hidden to emphasize the most recent feedback. As customers send in new feedback, previous ratings will have less of an impact on your app’s sentiment. Apps that score well with customers will gradually increase your visibility in the public listing as well!

We’ve saved the best for last! App developers can now manage a customer’s DNS records. The simplest way to define a DNS record is directly in your app’s install.json file. This for example, would allow a customer to create a CNAME to send traffic to your domain, and insert a A record on their root domain:

{
  "resources": [/*...*/],
  "hooks": [/*...*/],
  "options": {
    "properties": {
      "subdomain": {
        "type": "string"
      }
    }
  },
  "dns": [
    {
      "type": "CNAME",
      "name": "{{subdomain}}",
      "content": "shops.myservice.com"
    },
    {
      "type": "A",
      "content": "1.2.3.4",
      "ttl": 60,
      "proxied": true
    }
  ]
}

The customer can then confirm your changes after before completing their installation.

Requesting permission to access a customer’s email address and DNS entries.

DNS records make it possible to add new records to a customer’s account for your email services, blogging platforms, customer management systems, and much, much more!

We’ve made hundreds of changes since our last newsletter, some more visible than others. Here’s a quick recap of some our favorites:

• New Cloudflare customers are onboarded with apps after registration

• Updated docs on “item add” event

• Developers can now optionally link to their public GitHub repository

• A new input type: Numbers with units!

In the spirit of Thanksgiving, we raise a gravy boat to everyone who made this winter a little warmer. To the all the Cloudflarians and developers who sent in feedback, we say thank you!

Reach out at @CloudflareApps and let us know what you’d like to see next!!!

Until next time! ⛄️️

— Teffen

Powerful tools built by world-class developers, delivered by Cloudflare, easily added to your website.

Up to $100k in Cloud Credits

Cloudflare Apps makes it easy to get what you build installed, but building a great app also requires great infrastructure. We’ve partnered with Google to offer app developers like you up to $100,000 in free Google Cloud credits to support the apps you build.

Check it out ›

.content-box { margin: 1em auto; max-width: 100%; box-sizing: border-box; } .content-box img { padding: .5em; border: 1px solid #ddd; border-radius: 3px; max-height: 100%; box-sizing: border-box; } .content-box[data-image="1"] img { background-color: #f3f3f3; padding: 0; } .content-box[data-image="2"] img { background-color: #fff; padding: 0; } .content-box[data-image="3"] img { background-color: #eee; padding: 0; } @media (min-width: 768px) { .content-box[data-image="1"] img { height: 314px; } .content-box[data-image="2"] img { height: 449px; } .content-box[data-image="3"] img { height: 428px; } } .content-footer { display: flex; align-items: center; justify-content: center; flex-flow: column; padding: 1em .5em; background: #272727; color: #f1f1f1; line-height: 1.533; position: absolute; left: 0; right: 0; } .content-footer .email-pitch { text-align: center; } .content-footer #mc-embedded-subscribe-form { display: flex; align-items: center; } .content-footer #mce-responses { margin-left: .5em; } .content-footer #mce-EMAIL { flex: 0 1 auto !important; width: 245px; margin: 0; } .content-footer #mce-EMAIL, .content-footer #mc-embedded-subscribe { height: 2.4em; font-size: 1.2em; line-height: 1; } .content-footer #mc-embedded-subscribe { padding: .55em 1em; font-weight: 500; } .content-footer #mc-embedded-subscribe-form, .content-footer #mc-embedded-subscribe-form > * { flex: 0 0 auto; } .content-footer .email-container { display: flex; } .content-footer .playbook-container { display: flex; align-items: center; } .content-footer .content-accent { flex: 0 0 auto; } .content-footer .content-accent img { height: 145px; margin-right: 2em; } .content-footer .content-headline { font-size: 2.1em; font-weight: bold; } .content-footer .content-description { font-size: .9em; max-width: 600px; margin-bottom: 1em; } @media (max-width: 768px) { .content-footer .email-container { flex: 1 1 auto; width: 100%; } .content-footer .playbook-container { flex-flow: column; } } /* Floating Sidebar */ body.floating-sidebar .primary-content, body.floating-sidebar .post-content { width: 100% !important; } body.floating-sidebar aside.sidebar { float: right !important; margin-bottom: 0.5em; } .post-content, .post-header { max-width: 36em; } body.floating-sidebar .post-content, body.floating-sidebar .post-header { max-width: none; } body.floating-sidebar .footer-nav { width: 100% !important; } /* Social */ .social { display: flex; align-items: center; } /*.fb_iframe_widget { padding-top: 3px; padding-right: 1px; }*/ .social > * + * { margin-right: 0 !important; margin-left: 7px !important; } .social > .IN-widget { margin-bottom: -2px !important; margin-left: 9px !important; } /* Hide period after author */ .post-header .meta a { border-right: 5px solid white; margin-right: -5px; position: relative; } /* Post */ body { background-color: white; } .post-header, .post-content p, .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content pre, .post-content ul, .post-content figcaption { display: block; margin-left: auto; margin-right: auto; width: 75%; } .post-content pre { width: 55%; font-size: .7em; margin-bottom: 1.9em; } .post-content figcaption { text-align: center; font-style: italic; opacity: .8; margin-top: 0.2em; margin-bottom: 1.9em; font-size: .9em; } pre, code { font-size: inherit; line-height: inherit; } section.primary-content { font-size: 16px; line-height: 1.6; color: black; } blockquote { padding-bottom: 1.5em; padding-top: 1em; font-style: italic; font-size: 1.2rem; } blockquote.pull-quote-centered { font-size: 1.2em; text-align: center; max-width: 100%; margin-left: auto; margin-right: auto; } blockquote blockquote { margin-left: 1em; padding-left: 1em; border-left: 5px solid rgba(0, 0, 0, 0.2); padding-bottom: 0.5em; padding-top: 0.5em; margin-bottom: 0.5em; margin-top: 0.5em; } p.attribution { color: #666; font-size: 0.8em; padding-bottom: 1em; } a code.year { text-decoration: underline; } .closing-cards #mc_embed_signup .mc-field-group { margin: 0.75em 0; } .closing-cards #mc_embed_signup input { font-size: 1.5em; height: auto; } .closing-cards #mc_embed_signup input[type="email"] { border: 1px solid #bcbcbc; border-radius: 2px; margin-bottom: 0; } .closing-cards #mc_embed_signup input[type="submit"] { background: #f38020; color: #fff; padding: .8em 1em .8em 1em; white-space: nowrap; line-height: 1.2; text-align: center; border-radius: 2px; border: 0; display: inline-block; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: subpixel-antialiased; user-select: none; -webkit-appearance: none; appearance: none; letter-spacing: .04em; text-indent: .04em; cursor: pointer; } .closing-cards #mc_embed_signup div.mce_inline_error { background-color: transparent; color: #C33; padding: 0; display: inline-block; font-size: 0.9em; } .closing-cards #mc_embed_signup p:not(:empty) { line-height: 1.5; margin-bottom: 2em; } .closing-cards #mc_embed_signup input[type="email"] { font-size: 20px !important; width: 100% !important; padding: .6em 1em !important; } .closing-cards #mc_embed_signup .mc-field-group { margin: 0 !important; } .closing-cards #mc_embed_signup input[type="submit"] { font-size: 20px !important; margin-top: .5em !important; padding: .6em 1em !important; } .closing-cards #mc_embed_signup div.mce_inline_error { padding: 0; margin: 0; color: #F38020 !important; } aside.section.learn-more { display: none; } .closing-cards { background: #eee; width: 100%; list-style-type: none; margin-left: 0; } .closing-card { width: calc(50% - 10px) !important; font-size: 20px; padding: 1.5em; display: inline-block; box-sizing: border-box; vertical-align: top; } #mc_embed_signup { max-width: 400px; margin: 1em auto; } @media (min-width: 768px) { #mc_embed_signup { margin-left: 1em; } } @media (max-width: 788px){ .closing-card { width: 100% !important; } .closing-card + .closing-card { border-top: 10px solid white; } }

(function () { 'use strict'

document.body.style.visibility = 'hidden'

function fakeReady (fn) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', fn) } else { fn() } }

window.$ = window.jQuery = function fakejQuery () { return { ready: fakeReady, fitVids: function () { // if (window.$.fn.fitVids) { // window.$.fn.fitVids.apply(window.$.fn, arguments) // } } } }

window.$.fn = window.$.fn || {}

function restyleBlog () { 'use strict'

if (window.innerWidth >= 800) {
  var sidebar = document.querySelector('aside.sidebar')
  var header = document.querySelector('header.post-header')
  var post = document.querySelector('article.post')

  try {
    post.insertBefore(sidebar, header)
    document.body.className += ' floating-sidebar'
  } catch (e) { console.log('Style Error', e)}
}

try {
  document.querySelector('body > .wrapper .sidebar').style.display = 'none'
} catch (e) { console.log('Style Error', e)}

try {
  var tagFooter = document.querySelector('.post-content + footer')
  tagFooter.appendChild(document.querySelector('.post-header .social'))
} catch (e) { console.log('Style Error', e)}

function resizeFooter () {
  post.style.paddingBottom = footer.clientHeight + 'px'
}

try {
  var signup = document.querySelector('#mc\_embed\_signup')
  signup.querySelector('#mce-EMAIL').placeholder = 'email@example.com'
  signup.querySelector('#mc-embedded-subscribe').textContent = 'Get Updates'
  signup.querySelector('#mc-embedded-subscribe').className += ' btn-warning'

  var post = document.querySelector('.post-content')
  var footer = post.querySelector('.content-footer')
  footer.querySelector('.email-container').appendChild(signup)

  window.addEventListener('resize', resizeFooter)
  resizeFooter()
} catch (e) { console.log('Style Error', e)}

document.body.style.visibility = ''

}

fakeReady(restyleBlog) })()

When our team learned about the opportunity to build an AddThis app on Cloudflare Apps, I was ready to pounce. Building for distribution platforms is a core part of our business and product strategy, and I knew AddThis could bring a lot to the table for Cloudflare users. With a media background in my pocket, I understand the necessity of making content easily and quickly distributable -- and I wanted to get our tools in front of new users so we could learn more about the critical needs of publishers, merchants, and website owners.

With time and resources tight, I knew building an app that offered our full suite of website tools wouldn’t be immediately feasible—or even make sense. Share buttons, follow buttons, related posts, list building, link promotion, and tip jar are all useful products, but launching with a more narrow tool and feature set meant we could reach the market sooner, learn from user behaviors, and identify needs unique to Cloudflare Apps publishers. I opted to forge ahead with our most popular tool: share buttons.

If you try to configure share buttons from addthis.com, there are a lot of ways to do this: Floating, Inline, Expanded, Image Sharing, Popup, Banner, and Slider. Seven options just for share buttons! My goal with Cloudflare Apps was to launch something simple, useful, and closer to drag-and-drop than code-and-configure. With this in mind, I made a hard decision: pare down our app to the simplest version of our floating sharing sidebar—our most popular share buttons type—and cut many of the advanced configuration options. Instead, I decided to serve auto-personalized buttons and limit settings to cosmetic changes like number of services displayed and bordered styling. Perhaps the biggest change: users don’t even need to register an AddThis account to use our share buttons on Cloudflare Apps or work with any code. We created the simplest version of our share buttons to date.

The AddThis team is no stranger to building for third-party platforms. Our tools are found on platforms like WordPress, Shopify, Magento, and others. Building for Cloudflare Apps turned out to be more of a dream, better than we could have imagined. There was one wrinkle to figure out: if we weren’t asking users to create or log in to an addthis.com account, how would we save unique configuration settings?

Every website with AddThis tools has a configuration object where on-page tool settings are stored. This includes configuration data such as layout, color, theme, and social media handles. This data needs to be stored each time tools are updated via the Cloudflare portal and loaded each time a website visitor lands on a page with AddThis tools. Ideally, this information is stored in a database and read each time tools are rendered. While this approach is feasible when users configure tools through the addthis.com dashboard, it’s not an option in Cloudflare Apps.

How to store and render sidebar settings for each user became an anticipated hurdle. Luckily, there was a good solution: save the tool configuration data on a JS global variable using Cloudflare’s suggested INSTALL_SCOPE JS technique and, using the AddThis Smart Layers API, render the tools from this global variable to display in the preview portal. When the user saves their configuration, we call and serve the settings stored on that global variable each time tools need to be rendered.

Anyone can check out this method in action by previewing the AddThis Share Buttons app from Cloudflare Apps and playing around with the tools’ positioning, styling, and other settings.

In the few weeks since our launch, we’ve received a lot of useful feedback—good, bad, and ugly. The Cloudflare Apps developer portal allows developers to view basic metrics and user comments that keep third parties up-to-date about what’s important to websites and publishers. In the future, we’re considering connecting the app to the addthis.com dashboard and including other tool styles or types. We’ve heard a lot about page speed scores and mobile performance being important to users, and I’m pleased to report these are both areas of continued investment for AddThis. Paring down Share Buttons—AddThis’ flagship product—was a risk, and it’s one we’re happy we took.

Check out a live preview of AddThis in Cloudflare Apps »

Want to shape the future of content and sharing? We’re all ears at help@addthis.com and @addthissupport. Happy sharing.

Cloudflare Apps now lists 95 apps from apps which grow email lists to apps which acquire new customers to apps which help site owners make more money. The great thing about these apps is that users don't have to have any coding or development skills. They can just sign up for the app and start using it on their sites.

Let’s take a moment to highlight some apps which increase a site’s user engagement. Check out more Cloudflare Apps which grow your email list, make money on your site, and get more customers.

I hope you enjoy them and I hope you build (or use) great apps like these too.

Check out other Cloudflare Apps »

Build an app on Cloudflare Apps »

Over 100,000 businesses use Privy to capture and convert website visitors. Privy offers a free suite of email capture tools, including exit-intent driven website popups & banners, email list sign-up, an online store, social media channels, mobile capability, and in-store traffic.

In the left preview pane, you can view the different packages and their features users may sign up for from free to "growth" ($199/month) options.

In the right pane, you can preview your choices, seeing how Privy's functionality interacts with the site and users and even play around with the popups yourself. I personally love the confetti.

The Share Buttons app from AddThis is a super easy way to add sidebar share buttons to a website and get the site's content distributed to over 200 social media channels, auto-personalized for users. Site owners can display between 1-10 share services, customized for their users. Site owners are able to control the size and style of buttons as well.

In the left pane, you can see the install options where you can customize the size, theme and position of the banner. You can adjust the number of social platforms listed and choose to list the number of content shares per platform or total.

In the right pane, you can preview choices, seeing what they’d look like on any website and experiment with placement and how it flows with the site. This is very similar to the tool that the app developer uses to test the app for how it behaves on a wide range of web properties.

This app embeds Vimeo videos directly onto sites, so people can easily find a view videos the site owners made, or maybe just a few of their favorites. The Vimeo app supports autoplay and multiple videos on one page, in multiple locations on the page. A site owner can put videos almost all over their site, if they wish.

In the left pane, you can change the location of the video on the page, change its orientation in each location, switch Vimeo video links, and add multiple videos to the page.

In the right pane, you can preview your choices, seeing where each video will be displayed.

You can't grow as a musician or podcaster or influencer if your favorite tracks are not heard. The SoundCloud app embeds SoundCloud tracks or playlists directly on sites to grow a site owner's audience, help them find fans, or gives the reader a taste of the music being reviewed in a blog post, all of which work towards engaging users on their sites longer.

This preview works very similarly to the Vimeo preview. You can change the location of the track/playlist on the page, its orientation in each location, switch audio tracks/playlists, and add multiple tracks/playlists to the page.

Drift uses messaging and artificial intelligence to catch leads that are falling through the cracks in sales funnels. Billions of people around the world are using messaging apps like Slack and HipChat to communicate in real-time these days and customers often don't want to wait for follow-up emails or calls.

After installing Drift, site owners are able to engage with leads when they’re at their most interested - while they’re actually live on their sites. Using intelligent bots, qualified leads can be captured 24/7, even when no human is available to chat.

In Drift's preview, you can view how the styling and messaging of the chat box may be adjusted. You can change the organization name, welcome message, and away message. You can also select the "automatically open chat" to give users a more visible chat invitation.

Skype Live Chat installs on websites easily. Site owners just add their Skype usernames or bot IDs to start chatting with their customers. Considering there are over 74 million Skype users, this app allows users to chat in a way that they're comfortable and familiar with.

In the left pane, you can see options to change the color of the chat button and message bubble. In the right pane, you can see the results and how users will be prompted to log into their Skype accounts, if they aren't already.

WeatherWidget.io provides an easy, interactive interface which site owners can create and customize a weather widget for any website. WeatherWidget.io is highly customizable. The labels, font, theme, number of forecast days, and icon sets, may all be edited to maximize user engagement. The app is responsive to the size of its container and available in 20 languages with more languages on their way.

There are a lot of options to play with here. In the left pane, you can see the location of the banner can be changed. The weather location can be adjusted and custom labels assigned to it. I chose "SF, CA" in the preview. The language and units (celsius vs fahrenheit) can be switched. Next, the font, icon type (I chose animated climacons) and option to choose forecast vs. current weather can be changed. Finally you can play with theme with options from "orange" to "blue mountains" and adjust the widget's margins.

In the right pane, you can see your options come to life.

I hope you enjoy playing with and using these apps. Cloudflare is encouraging app authors to write their apps on the app platform. I hope you'll consider developing one of your own.

Build an app on Cloudflare Apps »

© 2017 Cloudflare, Inc. All rights reserved. The Cloudflare logo and marks are trademarks of Cloudflare. All other company and product names may be trademarks of the respective companies with which they are associated.

Brady Gentile from Cloudflare's product team wrote an App Developer Playbook, embedded within the developer documentation page. He decided to write it after he and his team conducted several app developer interviews, finding that many developers wanted to learn how to better promote their apps.

They wanted to help app authors out in the areas outside of developer core expertise. Social media posting, community outreach, email deployment, SEO, blog posting and syndication, etc. can be daunting.

I wanted to take a moment to highlight some of the tips from the App Developer Playbook because I think Brady did a great job of providing clear ways to approach promotional strategies.

Your app’s potential audience likely reads community-aggregated news sites such as HackerNews, Product Hunt, or reddit. Sharing your app across these websites is a great way for users to find your app.

For apps that are interesting to developers, designers, scientists, entrepreneurs, etc., be sure to share your work with the Hacker News community. Be sure to follow the official guidelines when posting and when engaging with the community. It may be tempting to ask your friends to upvote you, but honesty is the best policy, and the vote-ring detector will bury your post if you try to game it. Instead, if you don’t frontpage on the first try, consider re-posting on another day, with any of these options: the frontpage of your site, the blog post about the launch of your app, a demo of your app in action, a github repo. It may be worth taking into consideration the rate at which new posts are being added to /newest per minute or per hour, which impacts the likelihood of your post making it to the frontpage.

Since you’re sharing a project that people can play with, be sure to: 1) use “Show HN” and follow Show HN guidelines, and 2) be available to answer questions in the comments.

Be sure to start your title with the words ‘Show HN:’ (this indicates that you’ll be sharing something interesting that you’ve built with the HN community with a live demo people can try), then briefly explain your app within the same field. Rather than just use the name of your app, consider adding something informative, like the short description you use in your Cloudflare Apps marketplace tile. For instance, “Show HN: Trebble (embed voice and music on your site)” is more informative than “Show HN: Trebble” as a post title. Next, you’ll have the option of either submitting the URL of your app or explaining a little bit about yourself, the app, and pasting a link to the app itself.

Lastly, you should probably take the time to explain yourself and what you're all about in a first comment, as it helps build good rapport with the community. Block off some time on your calendar so you’re available to answer questions and engage with the community for however long your post is on the frontpage. In addition to gathering their valuable feedback, a signal that the app author is there (“Hi, I’m Name and I made this app to solve this problem -- I’d love to get your feedback.”) will often make your project more approachable and put a face on a product.

Product Hunt has released a blog post which outlines how to properly submit your app or product to their community. I highly recommended you review this post in its entirety prior to launching your Cloudflare App.

Submit a link to your app, along with some screenshots/videos, and a descriptive title for your post, and select a subreddit to post into. For the title of your post, you’ll want to use something descriptive about your app; for example you could say “I just built an app that does [X].”

If your app isn't relevant to the subreddit in which you post, it'll likely be removed by a moderator, so think carefully about which subreddits would find your app genuinely useful. I also recommend you take some time to engage with that community prior to posting your app, in part because their feedback is valuable, and in part so that you’re not a stranger. Here are two subreddits you should definitely include, though: Apps, Cloudflare.

One of the most important steps of the Cloudflare app deployment process is ensuring that both visitors browsing Cloudflare Apps and anyone doing a search on the web may quickly and easily find your app. By optimizing your Cloudflare app for discoverability, you’ll receive a greater number of views, installations, and revenue.

Your app’s title and short description are the first thing millions of website owners are going to see when coming across your Cloudflare app, whether it’s through browsing Cloudflare Apps or on a search engine. It’s important that an app’s title is unique, descriptive, and identifiable.

NoAdBlock is a great example.

Showcasing how your app might appear on a user’s website gives confidence to users thinking about previewing and installing. Include a variety of screenshots, showing multiple ways in which the software can be configured on a user’s website.

Read more about how to configure your full app description and categories in the App Developer Playbook.

Once your app has launched on Cloudflare Apps, it’s important that users are able to envision how your app will work for them and that they're easily able to use it.

Preview links allow you to generate a link to the install page for your app, which includes customization options for users to play around with.

Check out this preview for the Spotify app:

Make it easy and obvious for users. The Cloudflare Install Button is an interactive badge which can be embedded in any online assets, including websites and emails.

To use the full Cloudflare App install badge, you can paste the code listed in the Playbook onto your website or marketing page.You just need to replace [ appTitle ] and [ appId or appAlias ] with the appropriate details for your app. You can choose a standard button or customize it to your app.

Here's what NoAdBlock used:

A quick and easy way to announce your app’s availability is to notify your user base that the app is now available for them to preview and install. Read more in the Playbook on how to grow your user base before the launch.

Here's a good starting template for an email announcement:

Targeting users across multiple channels is a pretty easy way to ensure that website owners know your app is now available. Cloudflare can help you with this. Tag @Cloudflare in your posts, so your post will be retweeted and reshared.

Another way to promote the release of your app is by writing a blog post (or several) on your app’s website, delving into the features and benefits that your app brings to users. In addition to your launch post, you can enumerate the new features and bug fixes in a new and improved release, highlight different use cases from your own user base, or deep dive into a fascinating aspect of how you implemented your app.

Here's a well-written launch blog post, from the makers of Admiral.

Other blogs may help you with this as well. Syndication is a great way to gain significant exposure for your posts. Brainstorm a list of blogs facing the core audience for your app, and reach out and ask if you can contribute a guest blog post. If developers are the core audience, drop a line to community@cloudflare.com. I’d love to have a conversation about whether a guest post featuring your app would be right for the Cloudflare blog.

Again, this is just a glimpse into the guidance that the App Developer Playbook provides. Check it out and share it with your community of app developers.

Happy, productive app launching to you!

Earlier this year, Cloudflare Apps was launched so app developers may leverage our global network of 6 million+ websites, applications, and APIs. I’d like to take a moment to highlight Spotify, which was a launch partner for Cloudflare Apps, especially since they have elected to open source the code to their Cloudflare App.

Spotify Github repo »

Spotify is the leading digital service for streaming music, serving more than 140 million listeners.

Recently, Spotify launched a Cloudflare App to instantly and easily embed the Spotify player onto your website without having to copy / paste anything.

A musician who runs a site for their band - they can now play samples of new tracks on their tour calendar page and psych up their fans.

A game creator who wants to share their game's soundtrack with their fans.

An activewear company which wants to deliver popular running playlists to its customers.

Web properties that install the Spotify app have the ability to increase user engagement.

Add Spotify widgets to your web pages and let your users play tracks and follow Spotify profiles. Add a Spotify Play Button to your blog, website, or social page; all your fans have to do is hit “Play” to enjoy the music. You can create Play Buttons for albums, tracks, artists, or playlists.

When a logged-in Spotify user clicks the button on your page, the music will start playing in the Spotify player. If the user isn’t logged into their Spotify account, the play button will play a 30-second audio preview of the music and they will be prompted to login or sign up.

You can customize your button as well as link to any song or album you prefer in Spotify’s music catalog or to a playlist you’ve generated. Take a look at the preview of how the Spotify app would appear on a site here:

The Cloudflare App creator allows you to preview the app on your site without making any changes to your code.

In the left pane, you can see the install options where you can select what kind of widget you’d like displayed: a playlist, a track, or a follow button. You can customize the size, theme and position of the banner on your site. The “Pick a location” tool uses CSS selectors to allow you to pinpoint the location on your site where it’s displayed.

In the right pane, you can preview your choices, seeing what they’d look like on your website and experiment with placement and how it flows with the site. This is very similar to the tool that the app developer uses to test the app for how it behaves on a wide range of web properties.

Play with the Spotify Preview now »

Our friends at Spotify made their code available on GitHub. You can clone and fork the repository here. It’s a great way to get some practice developing Cloudflare Apps and to start with some basic scaffolding for your app.

Check out the documentation for Cloudflare Apps here.

Check out Cloudflare’s new App Developer Playbook, a step-by-step marketing guide for Cloudflare app developers here.

A little while ago, we did exactly this and ran a meetup in the Cloudflare London office. Ivan Rustic from Hardenize was our guest speaker, he demonstrated how Hardenize developed a Cloudflare App to help build a culture of security. I presented two other talks which included a primer on how the Cloudflare network is architected and wrapped up with a discussion on how you can build and monetise your very own Cloudflare App.

Since we presented this meet-up, I've received a few requests to share the videos of all the talks. You can find all three of the talks from our last London office meet-up in this blog post.

If you're interested in the kinds of Denial-of-Service attacks that Cloudflare faces, and how we help mitigate them; check out our Learning Centre for further information on DDOS mitigation.

The Cloudflare Apps platform allows developers to ship their code to any of the 6 million websites on the Cloudflare network. When building on our apps platform, your code can be previewed and deployed on any Cloudflare site in seconds. Browse the apps documentation to learn more about building on Cloudflare Apps

We'd love for you to join us at our next meet-up. To stay up-to-date on local events, you can join our Meetup groups in San Francisco, Austin and, of course, London. Want to request a Cloudflare meetup or workshop in your city? Please drop a line to community@cloudflare.com.

Since launch, we’ve received hundreds of feature requests from developers and users alike. Feedback has been the source of some our most popular features. This month’s post is celebration of the innovation achieved when great ideas are shared.

Let’s dive in!

Continuing with the theme of feedback, App developers can now track their apps’ popularity and growth:

App usage by month.

The usage charts help identify which changes have a positive impact on your app.

If you’ve created a paid app you can also track its financial performance:

App revenue & churn.

Charts and graphs are great for tracking trends, but what do your users actually think of your app? Wonder no longer; users can now leave comments when adding and removing apps from their site. Each comment includes sentiment tags and an optional message from the user.

Comments left by users before and after installing an app.

Cloudflare users have always been able to select which routes their apps are active, though this was too coarse for apps with arrays of options. We've introduced Page Selectors to limit entries to specific pages:

Limiting YouTube videos to specific routes on a site.

Page selectors are great for apps that create multiple elements such as arrays in YouTube’s videos, or CSSGram’s image filters. Developers can also use them to target existing elements on specific pages. Apps like Shepherd can use Page Selectors to insert user guides on specific pages too!

We've included some updates — on App updates! Developers can now add release notes in their submissions:

Communicating your recent changes to users.

Your release notes will appear alongside other pending updates in the user’s Cloudflare Dashboard:

Users are notified of pending updates when visiting Cloudflare.

I want to give a huge shout-out to the developers who have sent us their feedback and suggestions. Thank you again for joining us on this amazing adventure. Reach out at @CloudflareApps and let us know what you’d like to see next!!!

Until next time! ?

— Teffen

Powerful tools built by world-class developers, delivered by Cloudflare, easily added to your website.

Just for you

The new App Developer Playbook features a step-by-step marketing guide showing you how to make money selling your Cloudflare Apps. It was written using all of the knowledge and experience we’ve gained releasing Apps to Cloudflare users.

Check it out ›

.content-box { margin: 1em auto; max-width: 100%; box-sizing: border-box; } .content-box img { padding: .5em; border: 1px solid #ddd; border-radius: 3px; max-height: 100%; box-sizing: border-box; } .content-box[data-image="1"] img { background-color: #fff; } .content-box[data-image="2"] img { background-color: #fff; } .content-box[data-image="3"] img { background-color: #eee; } .content-box[data-image="4"] img { background-color: #f3f3f3; } .content-box[data-image="5"] img { background-color: #f3f3f3; } .content-box[data-image="6"] img { background-color: #ebebeb; } @media (min-width: 768px) { .content-box[data-image="1"] img { height: 270px; } .content-box[data-image="2"] img { height: 270px; } .content-box[data-image="3"] img { height: 250px; } .content-box[data-image="4"] img { height: 460px; } .content-box[data-image="5"] img { height: 280px; } .content-box[data-image="6"] img { height: 250px; } } .content-footer { display: flex; align-items: center; justify-content: center; flex-flow: column; padding: 1em .5em; background: #272727; color: #f1f1f1; line-height: 1.533; position: absolute; left: 0; right: 0; } .content-footer .email-pitch { text-align: center; } .content-footer #mc-embedded-subscribe-form { display: flex; align-items: center; } .content-footer #mce-responses { margin-left: .5em; } .content-footer #mce-EMAIL { flex: 0 1 auto !important; width: 245px; margin: 0; } .content-footer #mce-EMAIL, .content-footer #mc-embedded-subscribe { height: 2.4em; font-size: 1.2em; line-height: 1; } .content-footer #mc-embedded-subscribe { padding: .55em 1em; font-weight: 500; } .content-footer #mc-embedded-subscribe-form, .content-footer #mc-embedded-subscribe-form > * { flex: 0 0 auto; } .content-footer .email-container { display: flex; } .content-footer .playbook-container { display: flex; align-items: center; } .content-footer .content-accent { flex: 0 0 auto; } .content-footer .content-accent img { height: 260px; margin-right: 2em; } .content-footer .content-headline { font-size: 2.1em; font-weight: bold; } .content-footer .content-description { font-size: .9em; max-width: 600px; margin-bottom: 1em; } @media (max-width: 768px) { .content-footer .email-container { flex: 1 1 auto; width: 100%; } .content-footer .playbook-container { flex-flow: column; } } /* Floating Sidebar */ body.floating-sidebar .primary-content, body.floating-sidebar .post-content { width: 100% !important; } body.floating-sidebar aside.sidebar { float: right !important; margin-bottom: 0.5em; } .post-content, .post-header { max-width: 36em; } body.floating-sidebar .post-content, body.floating-sidebar .post-header { max-width: none; } body.floating-sidebar .footer-nav { width: 100% !important; } /* Social */ .social { display: flex; align-items: center; } /*.fb_iframe_widget { padding-top: 3px; padding-right: 1px; }*/ .social > * + * { margin-right: 0 !important; margin-left: 7px !important; } .social > .IN-widget { margin-bottom: -2px !important; margin-left: 9px !important; } /* Hide period after author */ .post-header .meta a { border-right: 5px solid white; margin-right: -5px; position: relative; } /* Post */ body { background-color: white; } .post-header, .post-content p, .post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content figcaption { display: block; margin-left: auto; margin-right: auto; width: 75%; } .post-content figcaption { text-align: center; font-style: italic; opacity: .8; margin-top: 0.2em; margin-bottom: 1.9em; font-size: .9em; } pre, code { font-size: inherit; line-height: inherit; } section.primary-content { font-size: 16px; line-height: 1.6; color: black; } blockquote { padding-bottom: 1.5em; padding-top: 1em; font-style: italic; font-size: 1.2rem; } blockquote.pull-quote-centered { font-size: 1.2em; text-align: center; max-width: 100%; margin-left: auto; margin-right: auto; } blockquote blockquote { margin-left: 1em; padding-left: 1em; border-left: 5px solid rgba(0, 0, 0, 0.2); padding-bottom: 0.5em; padding-top: 0.5em; margin-bottom: 0.5em; margin-top: 0.5em; } p.attribution { color: #666; font-size: 0.8em; padding-bottom: 1em; } a code.year { text-decoration: underline; } .closing-cards #mc_embed_signup .mc-field-group { margin: 0.75em 0; } .closing-cards #mc_embed_signup input { font-size: 1.5em; height: auto; } .closing-cards #mc_embed_signup input[type="email"] { border: 1px solid #bcbcbc; border-radius: 2px; margin-bottom: 0; } .closing-cards #mc_embed_signup input[type="submit"] { background: #f38020; color: #fff; padding: .8em 1em .8em 1em; white-space: nowrap; line-height: 1.2; text-align: center; border-radius: 2px; border: 0; display: inline-block; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: subpixel-antialiased; user-select: none; -webkit-appearance: none; appearance: none; letter-spacing: .04em; text-indent: .04em; cursor: pointer; } .closing-cards #mc_embed_signup div.mce_inline_error { background-color: transparent; color: #C33; padding: 0; display: inline-block; font-size: 0.9em; } .closing-cards #mc_embed_signup p:not(:empty) { line-height: 1.5; margin-bottom: 2em; } .closing-cards #mc_embed_signup input[type="email"] { font-size: 20px !important; width: 100% !important; padding: .6em 1em !important; } .closing-cards #mc_embed_signup .mc-field-group { margin: 0 !important; } .closing-cards #mc_embed_signup input[type="submit"] { font-size: 20px !important; margin-top: .5em !important; padding: .6em 1em !important; } .closing-cards #mc_embed_signup div.mce_inline_error { padding: 0; margin: 0; color: #F38020 !important; } aside.section.learn-more { display: none; } .closing-cards { background: #eee; width: 100%; list-style-type: none; margin-left: 0; } .closing-card { width: calc(50% - 10px) !important; font-size: 20px; padding: 1.5em; display: inline-block; box-sizing: border-box; vertical-align: top; } #mc_embed_signup { max-width: 400px; margin: 1em auto; } @media (min-width: 768px) { #mc_embed_signup { margin-left: 1em; } } @media (max-width: 788px){ .closing-card { width: 100% !important; } .closing-card + .closing-card { border-top: 10px solid white; } }

(function () { 'use strict'

document.body.style.visibility = 'hidden'

function fakeReady (fn) { if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', fn) } else { fn() } }

window.$ = window.jQuery = function fakejQuery () { return { ready: fakeReady, fitVids: function () { // if (window.$.fn.fitVids) { // window.$.fn.fitVids.apply(window.$.fn, arguments) // } } } }

window.$.fn = window.$.fn || {}

function restyleBlog () { 'use strict'

if (window.innerWidth >= 800) {
  var sidebar = document.querySelector('aside.sidebar')
  var header = document.querySelector('header.post-header')
  var post = document.querySelector('article.post')

  try {
    post.insertBefore(sidebar, header)
    document.body.className += ' floating-sidebar'
  } catch (e) { console.log('Style Error', e)}
}

try {
  document.querySelector('body > .wrapper .sidebar').style.display = 'none'
} catch (e) { console.log('Style Error', e)}

try {
  var tagFooter = document.querySelector('.post-content + footer')
  tagFooter.appendChild(document.querySelector('.post-header .social'))
} catch (e) { console.log('Style Error', e)}

function resizeFooter () {
  post.style.paddingBottom = footer.clientHeight + 'px'
}

try {
  var signup = document.querySelector('#mc\_embed\_signup')
  signup.querySelector('#mce-EMAIL').placeholder = 'email@example.com'
  signup.querySelector('#mc-embedded-subscribe').textContent = 'Get Updates'
  signup.querySelector('#mc-embedded-subscribe').className += ' btn-warning'

  var post = document.querySelector('.post-content')
  var footer = post.querySelector('.content-footer')
  footer.querySelector('.email-container').appendChild(signup)

  window.addEventListener('resize', resizeFooter)
  resizeFooter()
} catch (e) { console.log('Style Error', e)}

document.body.style.visibility = ''

}

fakeReady(restyleBlog) })()

QWERTYUIOP

— Text of the first email ever sent, 1971

The ARPANET (a precursor to the Internet) was created “to help maintain U.S. technological superiority and guard against unforeseen technological advances by potential adversaries,” in other words, to avert the next Sputnik. Its purpose was to allow scientists to share the products of their work and to make it more likely that the work of any one team could potentially be somewhat usable by others. One thing which was not considered particularly valuable was allowing these scientists to communicate using this network. People were already perfectly capable of communicating by phone, letter, and in-person meeting. The purpose of a computer was to do massive computation, to augment our memories and empower our minds.

Surely we didn’t need a computer, this behemoth of technology and innovation, just to talk to each other.

The computers which sent (and received) the first email.

The history of computing moves from massive data processing mainframes, to time sharing where many people share one computer, to the diverse collection of personal computing devices we have today. Messaging was first born in the time sharing era, when users wanted the ability to message other users of the same time shared computer.

Unix machines have a command called write which can be used to send messages to other currently logged-in users. For example, if I want to ask Mark out to lunch:

$ write mark
write: mark is logged in more than once; writing to ttys002

Hi, wanna grab lunch?

He will see:

Message from zack@Awesome-Mainframe.local on ttys003 at 10:36 ...
Hi, wanna grab lunch?

This is absolutely hilarious if your coworker happens to be using a graphical tool like vim which will not take kindly to random output on the screen.

When the mail was being developed, nobody thought at the beginning it was going to be the smash hit that it was. People liked it, they thought it was nice, but nobody imagined it was going to be the explosion of excitement and interest that it became. So it was a surprise to everybody, that it was a big hit.

— Frank Heart, director of the ARPANET infrastructure team

An early alternative to Unix called Tenex took this capability one step further. Tenex included the ability to send a message to another user by writing onto the end of a file which only they could read. This is conceptually very simple, you could implement it yourself by creating a file in everyones home directory which only they can read:

mkdir ~/messages
chmod 0442 ~/messages

Anyone who wants to send a message just has to append to the file:

echo "??\n" >> /Users/zack/messages

This is, of course, not a great system because anyone could delete your messages! I trust the Tenex implementation (called SNDMSG) was a bit more secure.

In 1971, the Tenex team had just gotten access to the ARPANET, the network of computers which was a main precursor to the Internet. The team quickly created a program called CPYNET which could be used to send files to remote computers, similar to FTP today.

One of these engineers, Ray Tomlinson, had the idea to combine the message files with CPYNET. He added a command which allowed you to append to a file. He also wired things up such that you could add an @ symbol and a remote machine name to your messages and the machine would automatically connect to that host and append to the right file. In other words, running:

SNDMSG zack@cloudflare

Would append to the /Users/zack/messages file on the host cloudflare. And email was born!

The CPYNET format did not have much of a life outside of Tenex unfortunately. It was necessary to create a standard method of communication which every system could understand. Fortunately, this was also the goal of another similar protocol, FTP. FTP (the File Transfer Protocol) sought to create a single way by which different machines could transfer files over the ARPANET.

FTP originally didn’t include support for email. Around the time it was updated to use TCP (rather than the NCP protocol which ARPANET historically used) the MAIL command was added.

$ ftp
< open bbn

> 220 HELLO, this is the BBN mail service

< MAIL zack

> 354 Type mail, ended by <CRLF>.<CRLF>

< Sup?
< .

> 250 Mail stored

These commands were ultimately borrowed from FTP and formed the basis for the SMTP (Simple Mail Transfer Protocol) protocol in 1982.

The format for defining how a message should be transmitted (and often how it would be stored on disk) was first standardized in 1977:

Date     :  27 Aug 1976 0932-PDT
From     :  Ken Davis <KDavis at Other-Host>
Subject  :  Re: The Syntax in the RFC
To       :  George Jones <Group at Host>,
              Al Neuman at Mad-Host

There’s no way this is ever going anywhere...

Note that at this time the ‘at’ word could be used rather than the ‘@’ symbol. Also note that this use of headers before the message predates HTTP by almost fifteen years. This format remains nearly identical today.

The Fifth Edition of Unix used a very similar format for storing a users email messages on disk. Each user would have a file which contained their messages:

From MAILER-DAEMON Fri Jul  8 12:08:34 1974
From: Author <author@example.com>
To: Recipient <recipient@example.com>
Subject: Save $100 on floppy disks

They’re never gonna go out of style!

From MAILER-DAEMON Fri Jul  8 12:08:34 1974
From: Author <author@example.com>
To: Recipient <recipient@example.com>
Subject: Seriously, buy AAPL

You’ve never heard of it, you’ve never heard of me, but when you see
that stock symbol appear.  Buy it.

- The Future

Each message began with the word ‘From’, meaning if a message happened to contain From at the beginning of a line it needed to be escaped lest the system think that’s the start of a new message:

From MAILER-DAEMON Fri Jul  8 12:08:34 2011
From: Author <author@example.com>
To: Recipient <recipient@example.com>
Subject: Sample message 1

This is the body.
>From (should be escaped).
There are 3 lines.

It was technically possible to interact with your email by simply editing your mailbox file, but it was much more common to use an email client. As you might expect there was a diversity of clients available, but a few are of historical note.

RD was an editor which was created by Lawrence Roberts who was actually the program manager for the ARPANET itself at the time. It was a set of macros on top of the Tenex text editor (TECO), which itself would later become Emacs.

RD was the first client to give us the ability to sort messages, save messages, and delete them. There was one key thing missing though: any integration between receiving a message and sending one. RD was strictly for consuming emails you had received, to reply to a message it was necessary to compose an entirely new message in SNDMSG or another tool.

That innovation came from MSG, which itself was an improvement on a client with the hilarious name BANANARD. MSG added the ability to reply to a message, in the words of Dave Crocker:

My subjective sense was that propagation of MSG resulted in an exponential explosion of email use, over roughly a 6-month period. The simplistic explanation is that people could now close the Shannon-Weaver communication loop with a single, simple command, rather than having to formulate each new message. In other words, email moved from the sending of independent messages into having a conversation.

Email wasn’t just allowing people to talk more easily, it was changing how they talk. In the words of C. R. Linklider and Albert Vezza in 1978:

One of the advantages of the message systems over letter mail was that, in an ARPANET message, one could write tersely and type imperfectly, even to an older person in a superior position and even to a person one did not know very well, and the recipient took no offense... Among the advantages of the network message services over the telephone were the fact that one could proceed immediately to the point without having to engage in small talk first, that the message services produced a preservable record, and that the sender and receiver did not have to be available at the same time.

The most popular client from this era was called MH and was composed of several command line utilities for doing various actions with and to your email.

$ mh

% show

(Message inbox:1)
Return-Path: joed
Received: by mysun.xyz.edu (5.54/ACS)
        id AA08581; Mon, 09 Jan 1995 16:56:39 EST
Message-Id: <9501092156.AA08581@mysun.xyz.edu>
To: angelac
Subject: Here’s the first message you asked for
Date: Mon, 09 Jan 1995 16:56:37 -0600
From: "Joe Doe" <joed>

Hi, Angela!  You asked me to send you a message.  Here it is.
I hope this is okay and that you can figure out how to use
that mail system.

Joe

You could reply to the message easily:

% repl

To: "Joe Doe" <joed>
cc: angelac
Subject: Re: Here’s the first message you asked for
In-reply-to: Your message of "Mon, 09 Jan 1995 16:56:37 -0600."
        <9501092156.AA08581@mysun.xyz.edu>
-------

% edit vi

You could then edit your reply in vim which is actually pretty cool.

Interestingly enough, in June of 1996 the guide “MH & xmh: Email for Users & Programmers” was actually the first book in history to be published on the Internet.

All mail clients suck. This one just sucks less.

— Mutt Slogan

It took several years until terminals became powerful enough, and perhaps email pervasive enough, that a more graphical program was required. In 1986 Elm was introduced, which allowed you to interact with your email more interactively.

Elm Mail Client

This was followed by more graphical TUI clients like Mutt and Pine.

In the words of the University of Washington’s Pine team:

Our goal was to provide a mailer that naive users could use without fear of making mistakes. We wanted to cater to users who were less interested in learning the mechanics of using electronic mail than in doing their jobs; users who perhaps had some computer anxiety. We felt the way to do this was to have a system that didn’t do surprising things and provided immediate feedback on each operation; a mailer that had a limited set of carefully-selected functions.

These clients were becoming gradually easier and easier to use by non-technical people, and it was becoming clear how big of a deal this really was:

We in the ARPA community (and no doubt many others outside it) have come to realize that we have in our hands something very big, and possibly very important. It is now plain to all of us that message service over computer networks has enormous potential for changing the way communication is done in all sectors of our society: military, civilian government, and private.

Its like when I did the referer field. I got nothing but grief for my choice of spelling. I am now attempting to get the spelling corrected in the OED since my spelling is used several billion times a minute more than theirs.

— Phillip Hallam-Baker on his spelling of ’Referer’ 2000

The first webmail client was created by Phillip Hallam-Baker at CERN in 1994. Its creation was early enough in the history of the web that it led to the identification of the need for the Content-Length header in POST requests.

Hotmail was released in 1996. The name was chosen because it included the letters HTML to emphasize it being ‘on the web’ (it was original stylized as ‘HoTMaiL’). When it was launched users were limited to 2MB of storage (at the time a 1.6GB hard drive was $399).

Hotmail was originally implemented using FreeBSD, but in a decision I’m sure every engineer regretted, it was moved to Windows 2000 after the service was bought by Microsoft. In 1999, hackers revealed a security flaw in Hotmail that permitted anybody to log in to any Hotmail account using the password ‘eh’. It took until 2001 for ‘hackers’ to realize you could access other people’s messages by swap usernames in the URL and guessing at a valid message number.

Gmail was famously created in 2004 as a ‘20% project’ of Paul Buchheit. Originally it wasn’t particularly believed in as a product within Google. They had to launch using a few hundred Pentium III computers no one else wanted, and it took three years before they had the resources to accept users without an invitation. It was notable both for being much closer to a desktop application (using AJAX) and for the unprecedented offer of 1GB of mail storage.

US Postal Mail Volume, KPCB

At this point email is a ubiquitous enough communication standard that it’s very possible postal mail as an everyday idea will die before I do. One thing which has not survived well is any attempt to replace email with a more complex messaging tool like Google Wave. With the rise of more targeted communication tools like Slack, Facebook, and Snapchat though, you never know.

There is, of course, a cost to that. The ancestors of the Internet were kind enough to give us a communication standard which is free, transparent, and standardized. It would be a shame to see the tech communication landscape move further and further into the world of locked gardens and proprietary schemas.

We’ll leave you with two quotes:

Mostly because it seemed like a neat idea. There was no directive to ‘go forth and invent e-mail’.

— Ray Tomlinson, answering a question about why he invented e-mail

Permit me to carry the doom-crying one step further. I am curious whether the increasingly easy access to computers by adolescents will have any effect, however small, on their social development. Keep in mind that the social skills necessary for interpersonal relationships are not taught; they are learned by experience. Adolescence is probably the most important time period for learning these skills. There are two directions for a cause-effect relationship. Either people lacking social skills (shy people, etc.) turn to other pasttimes, or people who do not devote enough time to human interactions have difficulty learning social skills. I do not [consider] whether either or both of these alternatives actually occur. I believe I am justified in asking whether computers will compete with human interactions as a way of spending time? Will they compete more effectively than other pasttimes? If so, and if we permit computers to become as ubiquitous as televisions, will computers have some effect (either positive or negative) on personal development of future generations?

— Gary Feldman, 1981

• Use Cloudflare Apps to build tools which can be installed by millions of sites.

  Build an app →

  If you're in San Francisco, London or Austin: work with us.

• Our next post is on the history of the URL!Get notified when new apps and apps-related posts are released:

  Email Address

(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true); /* Social */ .social { margin-top: 1.3em; } .fb_iframe_widget { padding-right: 1px; } .IN-widget { padding-left: 11px; } /* Hide period after author */ .post-header .meta a { border-right: 5px solid white; margin-right: -5px; position: relative; } /* Post */ body { background-color: white; } pre, code { font-size: inherit; line-height: inherit; } section.primary-content { font-size: 16px; line-height: 1.6; color: black; } blockquote { padding-bottom: 1.5em; padding-top: 1em; font-style: italic; font-size: 1.25rem; } blockquote.pull-quote-centered { font-size: 1.2em; text-align: center; max-width: 100%; margin-left: auto; margin-right: auto; } blockquote blockquote { margin-left: 1em; padding-left: 1em; border-left: 5px solid rgba(0, 0, 0, 0.2); padding-bottom: 0.5em; padding-top: 0.5em; margin-bottom: 0.5em; margin-top: 0.5em; } figure.standard { position: relative; max-width: 100%; margin: 1em auto; text-align: center; z-index: -1; } .figcaption { padding-top: .5em; font-size: .8em; color: #888; font-weight: 300; letter-spacing: .03em; line-height: 1.35; } .figcontent { display: inline-block; } p.attribution { color: #666; font-size: 0.9em; padding-bottom: 1em; } a code.year { text-decoration: underline; } .closing-cards #mc_embed_signup .mc-field-group { margin: 0.75em 0; } .closing-cards #mc_embed_signup input { font-size: 1.5em; height: auto; } .closing-cards #mc_embed_signup input[type="email"] { border: 1px solid #bcbcbc; border-radius: 2px; margin-bottom: 0; } .closing-cards #mc_embed_signup input[type="submit"] { background: #f38020; color: #fff; padding: .8em 1em .8em 1em; white-space: nowrap; line-height: 1.2; text-align: center; border-radius: 2px; border: 0; display: inline-block; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: subpixel-antialiased; user-select: none; -webkit-appearance: none; appearance: none; letter-spacing: .04em; text-indent: .04em; cursor: pointer; } .closing-cards #mc_embed_signup div.mce_inline_error { background-color: transparent; color: #C33; padding: 0; display: inline-block; font-size: 0.9em; } .closing-cards #mc_embed_signup p:not(:empty) { line-height: 1.5; margin-bottom: 2em; } .closing-cards #mc_embed_signup input[type="email"] { font-size: 20px !important; width: 100% !important; padding: .6em 1em !important; } .closing-cards #mc_embed_signup .mc-field-group { margin: 0 !important; } .closing-cards #mc_embed_signup input[type="submit"] { font-size: 20px !important; margin-top: .5em !important; padding: .6em 1em !important; } .closing-cards #mc_embed_signup div.mce_inline_error { padding: 0; margin: 0; color: #F38020 !important; } aside.section.learn-more { display: none; } .closing-cards { background: #eee; width: 100%; list-style-type: none; margin-left: 0; } .closing-card { width: calc(50% - 10px) !important; font-size: 20px; padding: 1.5em; display: inline-block; box-sizing: border-box; vertical-align: top; } @media (max-width: 788px){ .closing-card { width: 100% !important; } .closing-card + .closing-card { border-top: 10px solid white; } }